Split panel

packages/uui-resize-observer/README.md

@@ -0,0 +1,31 @@
+# uui-resize-observer
+
+![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-resize-observer?logoColor=%231B264F)
+
+Umbraco style resize-observer component.
+
+## Installation
+
+### ES imports
+
+```zsh
+npm i @umbraco-ui/uui-resize-observer
+```
+
+Import the registration of `<uui-resize-observer>` via:
+
+```javascript
+import '@umbraco-ui/uui-resize-observer';
+```
+
+When looking to leverage the `UUIResizeObserverElement` base class as a type and/or for extension purposes, do so via:
+
+```javascript
+import { UUIResizeObserverElement } from '@umbraco-ui/uui-resize-observer';
+```
+
+## Usage
+
+```html
+<uui-resize-observer></uui-resize-observer>
+```

packages/uui-resize-observer/lib/UUIResizeEvent.ts

@@ -0,0 +1,13 @@
+import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
+import { UUIResizeObserverElement } from './uui-resize-observer.element';
+
+export class UUIResizeEvent extends UUIEvent<{}, UUIResizeObserverElement> {
+  public static readonly CHANGE = 'change';
+
+  constructor(evName: string, eventInit: any | null = {}) {
+    super(evName, {
+      ...{ bubbles: true },
+      ...eventInit,
+    });
+  }
+}

packages/uui-resize-observer/lib/index.ts

@@ -0,0 +1 @@
+export * from './uui-resize-observer.element';

packages/uui-resize-observer/lib/uui-resize-observer.element.ts

@@ -0,0 +1,91 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { property } from 'lit/decorators.js';
+import { css, html, LitElement } from 'lit';
+
+import { UUIResizeEvent } from './UUIResizeEvent';
+
+/**
+ * @element uui-resize-observer
+ */
+@defineElement('uui-resize-observer')
+export class UUIResizeObserverElement extends LitElement {
+      static styles = [
+    css`
+      :host {
+        display: contents;
+      }
+    `,
+  ];
+
+  private _resizeObserver!: ResizeObserver;
+  private _observedElements: HTMLElement[] = [];
+
+  /** Disables the observer. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+      this.dispatchEvent(new UUIResizeEvent(UUIResizeEvent.CHANGE));
+    });
+
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopObserver();
+  }
+
+  private handleSlotChange() {
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+
+  private startObserver() {
+    const slot = this.shadowRoot!.querySelector('slot');
+
+    if (slot !== null) {
+      const elements = slot.assignedElements({ flatten: true }) as HTMLElement[];
+
+      // Unwatch previous elements
+      this._observedElements.forEach(el => this._resizeObserver.unobserve(el));
+      this._observedElements = [];
+
+      // Watch new elements
+      elements.forEach(el => {
+        this._resizeObserver.observe(el);
+        this._observedElements.push(el);
+      });
+    }
+  }
+
+  private stopObserver() {
+    this._resizeObserver.disconnect();
+  }
+
+  firstUpdated() {
+    this.handleDisabledChange();
+  }
+
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.stopObserver();
+    } else {
+      this.startObserver();
+    }
+  }
+
+  render() {
+    return html` <slot @slotchange=${this.handleSlotChange}></slot> `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'uui-resize-observer': UUIResizeObserverElement ;
+  }
+}

packages/uui-resize-observer/lib/uui-resize-observer.story.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+import './uui-resize-observer.element';
+import type { UUIResizeObserverElement } from './uui-resize-observer.element';
+import readme from '../README.md?raw';
+
+const meta: Meta<UUIResizeObserverElement> = {
+  id: 'uui-resize-observer',
+  title: 'Resize Observer',
+  component: 'uui-resize-observer',
+  parameters: {
+    readme: { markdown: readme },
+    docs: {
+      source: {
+        code: `<uui-resize-observer>
+          <div>Resize this box</div>
+        </uui-resize-observer>`,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<UUIResizeObserverElement>;
+
+export const Overview: Story = {};

packages/uui-resize-observer/lib/uui-resize-observer.test.ts

@@ -0,0 +1,20 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import { UUIResizeObserverElement } from './uui-resize-observer.element';
+
+describe('UUIResizeObserverElement', () => {
+  let element: UUIResizeObserverElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html` <uui-resize-observer></uui-resize-observer> `
+    );
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UUIResizeObserverElement);
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible();
+  });
+});

packages/uui-resize-observer/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@umbraco-ui/uui-resize-observer",
+  "version": "0.0.0",
+  "license": "MIT",
+  "keywords": [
+    "Umbraco",
+    "Custom elements",
+    "Web components",
+    "UI",
+    "Lit",
+    "Resize Observer"
+  ],
+  "description": "Umbraco UI resize-observer component",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umbraco/Umbraco.UI.git",
+    "directory": "packages/uui-resize-observer"
+  },
+  "bugs": {
+    "url": "https://github.com/umbraco/Umbraco.UI/issues"
+  },
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "type": "module",
+  "customElements": "custom-elements.json",
+  "files": [
+    "lib/**/*.d.ts",
+    "lib/**/*.js",
+    "custom-elements.json"
+  ],
+  "dependencies": {
+    "@umbraco-ui/uui-base": "1.5.0-rc.0"
+  },
+  "scripts": {
+    "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
+    "clean": "tsc --build --clean && rimraf -g dist lib/*.js lib/**/*.js *.tgz lib/**/*.d.ts custom-elements.json",
+    "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://uui.umbraco.com/?path=/story/uui-resize-observer"
+}

packages/uui-resize-observer/rollup.config.js

@@ -0,0 +1,5 @@
+import { UUIProdConfig } from '../rollup-package.config.mjs';
+
+export default UUIProdConfig({
+  entryPoints: ['index']
+});

packages/uui-resize-observer/tsconfig.json

@@ -0,0 +1,17 @@
+// Don't edit this file directly. It is generated by /scripts/generate-ts-config.js
+
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./lib",
+    "rootDir": "./lib",
+    "composite": true
+  },
+  "include": ["./**/*.ts"],
+  "exclude": ["./**/*.test.ts", "./**/*.story.ts"],
+  "references": [
+    {
+      "path": "../uui-base"
+    }
+  ]
+}

packages/uui-split-panel/README.md

@@ -0,0 +1,31 @@
+# uui-split-panel
+
+![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-split-panel?logoColor=%231B264F)
+
+Umbraco style split-panel component.
+
+## Installation
+
+### ES imports
+
+```zsh
+npm i @umbraco-ui/uui-split-panel
+```
+
+Import the registration of `<uui-split-panel>` via:
+
+```javascript
+import '@umbraco-ui/uui-split-panel';
+```
+
+When looking to leverage the `UUISplitPanelElement` base class as a type and/or for extension purposes, do so via:
+
+```javascript
+import { UUISplitPanelElement } from '@umbraco-ui/uui-split-panel';
+```
+
+## Usage
+
+```html
+<uui-split-panel></uui-split-panel>
+```

packages/uui-split-panel/lib/index.ts

@@ -0,0 +1 @@
+export * from './uui-split-panel.element';