@umbraco-ui/uui 1.17.0 → 2.0.0-alpha.0

package/dist/components/modal/modal-container.js

@@ -0,0 +1,160 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _onSlotChange, _onCloseModalClose, _UUIModalContainerElement_instances, updateModals_fn, updateSidebars_fn;
+import { LitElement, html, css } from "lit";
+import { query, state, property } from "lit/decorators.js";
+import { UUIModalSidebarElement } from "./modal-sidebar.element.js";
+import { UUIModalElement, UUIModalCloseEvent } from "./modal.element.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const _UUIModalContainerElement = class _UUIModalContainerElement extends LitElement {
+  constructor() {
+    super();
+    __privateAdd(this, _UUIModalContainerElement_instances);
+    __privateAdd(this, _onSlotChange);
+    __privateAdd(this, _onCloseModalClose);
+    this.sidebarGap = 64;
+    this.transitionDurationMS = 250;
+    __privateSet(this, _onSlotChange, () => {
+      const existingModals = this._modals ?? [];
+      this._modals = this.modalSlot?.assignedElements({ flatten: true }).filter(
+        (el) => el instanceof UUIModalElement
+      ) ?? [];
+      const oldModals = existingModals.filter(
+        (modal) => !this._modals.includes(modal)
+      );
+      oldModals.forEach(
+        (modal) => modal.removeEventListener(UUIModalCloseEvent, __privateGet(this, _onCloseModalClose))
+      );
+      const newModals = this._modals.filter(
+        (modal) => !existingModals.includes(modal)
+      );
+      newModals.forEach(
+        (modal) => modal.addEventListener(UUIModalCloseEvent, __privateGet(this, _onCloseModalClose))
+      );
+      this._sidebars = this._modals.filter(
+        (el) => el instanceof UUIModalSidebarElement
+      );
+      if (this._modals.length === 0) {
+        this.removeAttribute("backdrop");
+        return;
+      }
+      __privateMethod(this, _UUIModalContainerElement_instances, updateModals_fn).call(this);
+      __privateMethod(this, _UUIModalContainerElement_instances, updateSidebars_fn).call(this);
+    });
+    __privateSet(this, _onCloseModalClose, (event) => {
+      event.stopImmediatePropagation();
+      event.target?.removeEventListener(
+        UUIModalCloseEvent,
+        __privateGet(this, _onCloseModalClose)
+      );
+      if (!this._modals || this._modals.length <= 1) {
+        this.removeAttribute("backdrop");
+        return;
+      }
+      __privateMethod(this, _UUIModalContainerElement_instances, updateModals_fn).call(this);
+      __privateMethod(this, _UUIModalContainerElement_instances, updateSidebars_fn).call(this);
+    });
+    this.addEventListener(UUIModalCloseEvent, __privateGet(this, _onCloseModalClose));
+  }
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+    this.style.setProperty(
+      "--uui-modal-transition-duration",
+      this.transitionDurationMS + "ms"
+    );
+  }
+  render() {
+    return html`<slot @slotchange=${__privateGet(this, _onSlotChange)}></slot>`;
+  }
+};
+_onSlotChange = new WeakMap();
+_onCloseModalClose = new WeakMap();
+_UUIModalContainerElement_instances = new WeakSet();
+updateModals_fn = function() {
+  this.setAttribute("backdrop", "");
+  const reverse = this._modals?.filter((modal) => !modal.isClosing).reverse() ?? [];
+  reverse?.forEach((modal, index) => {
+    modal.index = index;
+    modal.transitionDuration = this.transitionDurationMS;
+  });
+  reverse?.forEach((modal) => {
+    const sameType = reverse?.filter(
+      (m) => m.constructor.name === modal.constructor.name
+    );
+    modal.uniqueIndex = sameType?.indexOf(modal) ?? 0;
+  });
+};
+updateSidebars_fn = function() {
+  requestAnimationFrame(() => {
+    let sidebarOffset = 0;
+    const reversed = this._sidebars?.filter((modal) => !modal.isClosing).reverse() ?? [];
+    for (let i = 0; i < reversed.length; i++) {
+      const sidebar = reversed[i];
+      const nextSidebar = reversed[i + 1];
+      const tempSidebarOffset = sidebarOffset;
+      sidebar.updateComplete.then(() => {
+        sidebar.style.setProperty(
+          "--uui-modal-offset",
+          tempSidebarOffset + "px"
+        );
+      });
+      if (nextSidebar?.hasAttribute("hide")) break;
+      const currentWidth = sidebar.shadowRoot?.querySelector("dialog")?.getBoundingClientRect().width ?? 0;
+      const nextWidth = nextSidebar?.shadowRoot?.querySelector("dialog")?.getBoundingClientRect().width ?? 0;
+      const distance = currentWidth + sidebarOffset + this.sidebarGap - nextWidth;
+      sidebarOffset = Math.max(distance, 0);
+    }
+  });
+};
+_UUIModalContainerElement.styles = css`
+    :host {
+      position: fixed;
+      --uui-modal-color-backdrop: rgba(0, 0, 0, 0.5);
+    }
+    :host::after {
+      content: '';
+      position: fixed;
+      inset: 0;
+      background-color: var(--uui-modal-color-backdrop, rgba(0, 0, 0, 0.5));
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity var(--uui-modal-transition-duration, 250ms);
+    }
+    :host([backdrop])::after {
+      opacity: 1;
+    }
+  `;
+let UUIModalContainerElement = _UUIModalContainerElement;
+__decorateClass([
+  query("slot")
+], UUIModalContainerElement.prototype, "modalSlot");
+__decorateClass([
+  state()
+], UUIModalContainerElement.prototype, "_modals");
+__decorateClass([
+  state()
+], UUIModalContainerElement.prototype, "_sidebars");
+__decorateClass([
+  property({ type: Number })
+], UUIModalContainerElement.prototype, "sidebarGap");
+__decorateClass([
+  property({ type: Number })
+], UUIModalContainerElement.prototype, "transitionDurationMS");
+export {
+  UUIModalContainerElement
+};
+//# sourceMappingURL=modal-container.js.map

package/dist/components/modal/modal-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-container.js","sources":["../../../src/components/modal/modal-container.ts"],"sourcesContent":["import type { PropertyValueMap } from 'lit';\nimport { LitElement, css, html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { UUIModalSidebarElement } from './modal-sidebar.element.js';\nimport { UUIModalCloseEvent, UUIModalElement } from './modal.element.js';\nexport class UUIModalContainerElement extends LitElement {\n  @query('slot')\n  modalSlot?: HTMLSlotElement;\n\n  @state()\n  private _modals?: Array<UUIModalElement>;\n\n  @state()\n  private _sidebars?: Array<UUIModalSidebarElement>;\n\n  @property({ type: Number })\n  sidebarGap = 64;\n\n  @property({ type: Number })\n  transitionDurationMS = 250;\n\n  constructor() {\n    super();\n    this.addEventListener(UUIModalCloseEvent, this.#onCloseModalClose);\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties);\n\n    this.style.setProperty(\n      '--uui-modal-transition-duration',\n      this.transitionDurationMS + 'ms',\n    );\n  }\n\n  readonly #onSlotChange = () => {\n    const existingModals = this._modals ?? [];\n\n    this._modals =\n      (this.modalSlot\n        ?.assignedElements({ flatten: true })\n        .filter(\n          el => el instanceof UUIModalElement,\n        ) as Array<UUIModalElement>) ?? [];\n\n    const oldModals = existingModals.filter(\n      modal => !this._modals!.includes(modal),\n    );\n    oldModals.forEach(modal =>\n      modal.removeEventListener(UUIModalCloseEvent, this.#onCloseModalClose),\n    );\n\n    const newModals = this._modals.filter(\n      modal => !existingModals.includes(modal),\n    );\n    newModals.forEach(modal =>\n      modal.addEventListener(UUIModalCloseEvent, this.#onCloseModalClose),\n    );\n\n    this._sidebars = this._modals.filter(\n      el => el instanceof UUIModalSidebarElement,\n    );\n\n    if (this._modals.length === 0) {\n      this.removeAttribute('backdrop');\n      return;\n    }\n\n    this.#updateModals();\n    this.#updateSidebars();\n  };\n\n  readonly #onCloseModalClose = (event: Event) => {\n    event.stopImmediatePropagation();\n\n    event.target?.removeEventListener(\n      UUIModalCloseEvent,\n      this.#onCloseModalClose,\n    );\n    if (!this._modals || this._modals.length <= 1) {\n      this.removeAttribute('backdrop');\n      return;\n    }\n\n    this.#updateModals();\n    this.#updateSidebars();\n  };\n\n  #updateModals() {\n    this.setAttribute('backdrop', '');\n\n    const reverse =\n      this._modals?.filter(modal => !modal.isClosing).reverse() ?? [];\n\n    //set index to all modals, the one in front is 0\n    reverse?.forEach((modal, index) => {\n      modal.index = index;\n      modal.transitionDuration = this.transitionDurationMS;\n    });\n\n    //set unique-index on all modals based on which modal of the same type it is, the one in front is 0.\n    reverse?.forEach(modal => {\n      const sameType = reverse?.filter(\n        m => m.constructor.name === modal.constructor.name,\n      );\n\n      modal.uniqueIndex = sameType?.indexOf(modal) ?? 0;\n    });\n  }\n\n  #updateSidebars() {\n    requestAnimationFrame(() => {\n      let sidebarOffset = 0;\n      const reversed =\n        this._sidebars?.filter(modal => !modal.isClosing).reverse() ?? [];\n\n      for (let i = 0; i < reversed.length; i++) {\n        const sidebar = reversed[i];\n        const nextSidebar = reversed[i + 1];\n        const tempSidebarOffset = sidebarOffset; // Cache to prevent it from being overwritten before the updateComplete.\n        // The sidebar checks it's own width at sets it's --uui-modal-offset to negative that width.\n        // This enables it to slide in from the right. So we need to set the new --uui-modal-offset after the updateComplete.\n        sidebar.updateComplete.then(() => {\n          sidebar.style.setProperty(\n            '--uui-modal-offset',\n            tempSidebarOffset + 'px',\n          );\n        });\n\n        // Stop the calculations if the next sidebar is hidden\n        if (nextSidebar?.hasAttribute('hide')) break;\n\n        //TODO: is there a better way to get the width of the sidebar?\n        const currentWidth =\n          sidebar.shadowRoot?.querySelector('dialog')?.getBoundingClientRect()\n            .width ?? 0;\n\n        //TODO: is there a better way to get the width of the sidebar?\n        const nextWidth =\n          nextSidebar?.shadowRoot\n            ?.querySelector('dialog')\n            ?.getBoundingClientRect().width ?? 0;\n        const distance =\n          currentWidth + sidebarOffset + this.sidebarGap - nextWidth;\n        sidebarOffset = Math.max(distance, 0);\n      }\n    });\n  }\n\n  render() {\n    return html`<slot @slotchange=${this.#onSlotChange}></slot>`;\n  }\n  static readonly styles = css`\n    :host {\n      position: fixed;\n      --uui-modal-color-backdrop: rgba(0, 0, 0, 0.5);\n    }\n    :host::after {\n      content: '';\n      position: fixed;\n      inset: 0;\n      background-color: var(--uui-modal-color-backdrop, rgba(0, 0, 0, 0.5));\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity var(--uui-modal-transition-duration, 250ms);\n    }\n    :host([backdrop])::after {\n      opacity: 1;\n    }\n  `;\n}\n"],"names":[],"mappings":"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"}

package/dist/components/modal/modal-dialog.element.d.ts

@@ -0,0 +1,5 @@
+import { UUIModalElement } from './modal.element.js';
+export declare class UUIModalDialogElement extends UUIModalElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/modal/modal-dialog.element.js

@@ -0,0 +1,44 @@
+import { html, css } from "lit";
+import { UUIModalElement } from "./modal.element.js";
+const _UUIModalDialogElement = class _UUIModalDialogElement extends UUIModalElement {
+  render() {
+    return html`
+      <dialog>
+        <slot></slot>
+      </dialog>
+    `;
+  }
+};
+_UUIModalDialogElement.styles = [
+  ...UUIModalElement.styles,
+  css`
+      :host {
+        outline: none;
+        --uui-modal-dialog-background: var(--uui-color-surface);
+      }
+      dialog {
+        margin: auto;
+        max-width: 100%;
+        max-height: 100%;
+        border-radius: var(
+          --uui-modal-dialog-border-radius,
+          var(--uui-border-radius-3)
+        );
+        background: var(
+          --uui-modal-dialog-background,
+          var(--uui-color-surface)
+        );
+      }
+      :host([index='0']) dialog {
+        box-shadow: var(--uui-shadow-depth-5);
+      }
+      :host(:not([index='0'])) dialog {
+        outline: 1px solid rgba(0, 0, 0, 0.1);
+      }
+    `
+];
+let UUIModalDialogElement = _UUIModalDialogElement;
+export {
+  UUIModalDialogElement
+};
+//# sourceMappingURL=modal-dialog.element.js.map

package/dist/components/modal/modal-dialog.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-dialog.element.js","sources":["../../../src/components/modal/modal-dialog.element.ts"],"sourcesContent":["import { css, html } from 'lit';\nimport { UUIModalElement } from './modal.element.js';\nexport class UUIModalDialogElement extends UUIModalElement {\n  render() {\n    return html`\n      <dialog>\n        <slot></slot>\n      </dialog>\n    `;\n  }\n\n  static override readonly styles = [\n    ...UUIModalElement.styles,\n    css`\n      :host {\n        outline: none;\n        --uui-modal-dialog-background: var(--uui-color-surface);\n      }\n      dialog {\n        margin: auto;\n        max-width: 100%;\n        max-height: 100%;\n        border-radius: var(\n          --uui-modal-dialog-border-radius,\n          var(--uui-border-radius-3)\n        );\n        background: var(\n          --uui-modal-dialog-background,\n          var(--uui-color-surface)\n        );\n      }\n      :host([index='0']) dialog {\n        box-shadow: var(--uui-shadow-depth-5);\n      }\n      :host(:not([index='0'])) dialog {\n        outline: 1px solid rgba(0, 0, 0, 0.1);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;AAEO,MAAM,yBAAN,MAAM,+BAA8B,gBAAgB;AAAA,EACzD,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AA8BF;AA5BE,uBAAyB,SAAS;AAAA,EAChC,GAAG,gBAAgB;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAXG,IAAM,wBAAN;"}

package/dist/components/modal/modal-example.element.d.ts

@@ -0,0 +1,13 @@
+import type { TemplateResult } from 'lit';
+import { LitElement } from 'lit';
+import './modal-container.js';
+import './modal.js';
+import '../dialog-layout/dialog-layout.js';
+import '../button/button.js';
+import '../box/box.js';
+export declare class UUIModalExampleElement extends LitElement {
+    #private;
+    private readonly _modals;
+    render(): TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult;
+}

package/dist/components/modal/modal-sidebar.element.d.ts

@@ -0,0 +1,15 @@
+import type { PropertyValueMap } from 'lit';
+import { UUIModalElement } from './modal.element.js';
+export type UUIModalSidebarSize = 'small' | 'medium' | 'large' | 'full';
+export declare class UUIModalSidebarElement extends UUIModalElement {
+    #private;
+    /**
+     * @attr
+     */
+    size: UUIModalSidebarSize;
+    protected firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): void;
+    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    forceClose(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/modal/modal-sidebar.element.js

@@ -0,0 +1,109 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var _UUIModalSidebarElement_instances, getWidth_get;
+import { html, css } from "lit";
+import { property } from "lit/decorators.js";
+import { UUIModalElement } from "./modal.element.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const _UUIModalSidebarElement = class _UUIModalSidebarElement extends UUIModalElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _UUIModalSidebarElement_instances);
+    this.size = "full";
+  }
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+    this.style.setProperty("--uui-modal-offset", -__privateGet(this, _UUIModalSidebarElement_instances, getWidth_get) + "px");
+  }
+  updated(_changedProperties) {
+    super.updated(_changedProperties);
+    if (this.uniqueIndex > 10) {
+      this.setAttribute("hide", "");
+    } else {
+      this.removeAttribute("hide");
+    }
+  }
+  forceClose() {
+    if (this.isClosing) return;
+    this.isClosing = true;
+    this.style.setProperty("--uui-modal-offset", -__privateGet(this, _UUIModalSidebarElement_instances, getWidth_get) + "px");
+    setTimeout(() => {
+      super.forceClose();
+    }, this.transitionDuration);
+  }
+  render() {
+    return html`<dialog>
+      <slot></slot>
+    </dialog>`;
+  }
+};
+_UUIModalSidebarElement_instances = new WeakSet();
+getWidth_get = function() {
+  return this._dialogElement?.getBoundingClientRect().width ?? 0;
+};
+_UUIModalSidebarElement.styles = [
+  ...UUIModalElement.styles,
+  css`
+      :host {
+        outline: none;
+        --uui-modal-sidebar-left-gap: 24px;
+        --uui-modal-sidebar-background: var(--uui-color-surface);
+      }
+      @media (min-width: 600px) {
+        :host {
+          --uui-modal-sidebar-left-gap: 64px;
+        }
+      }
+      dialog {
+        height: 100%;
+        width: 100%;
+        box-sizing: border-box;
+        max-width: calc(100% - var(--uui-modal-sidebar-left-gap));
+        margin-left: auto;
+        right: var(--uui-modal-offset);
+        transition: right var(--uui-modal-transition-duration, 250ms);
+        background: var(
+          --uui-modal-sidebar-background,
+          var(--uui-color-surface)
+        );
+      }
+      :host([index='0']) dialog {
+        box-shadow: var(--uui-shadow-depth-5);
+      }
+      :host(:not([index='0'])) dialog {
+        outline: 1px solid rgba(0, 0, 0, 0.1);
+      }
+      :host([hide]) dialog {
+        display: none;
+      }
+      :host([size='large']) dialog {
+        max-width: min(1200px, calc(100% - var(--uui-modal-sidebar-left-gap)));
+      }
+      :host([size='medium']) dialog {
+        max-width: min(800px, calc(100% - var(--uui-modal-sidebar-left-gap)));
+      }
+      :host([size='small']) dialog {
+        max-width: min(500px, calc(100% - var(--uui-modal-sidebar-left-gap)));
+      }
+    `
+];
+let UUIModalSidebarElement = _UUIModalSidebarElement;
+__decorateClass([
+  property({ reflect: true })
+], UUIModalSidebarElement.prototype, "size");
+export {
+  UUIModalSidebarElement
+};
+//# sourceMappingURL=modal-sidebar.element.js.map

package/dist/components/modal/modal-sidebar.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-sidebar.element.js","sources":["../../../src/components/modal/modal-sidebar.element.ts"],"sourcesContent":["import type { PropertyValueMap } from 'lit';\nimport { css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { UUIModalElement } from './modal.element.js';\nexport type UUIModalSidebarSize = 'small' | 'medium' | 'large' | 'full';\n\nexport class UUIModalSidebarElement extends UUIModalElement {\n  /**\n   * @attr\n   */\n  @property({ reflect: true })\n  size: UUIModalSidebarSize = 'full';\n\n  protected firstUpdated(\n    _changedProperties: Map<string | number | symbol, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties);\n\n    this.style.setProperty('--uui-modal-offset', -this.#getWidth + 'px');\n  }\n\n  protected updated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(_changedProperties);\n\n    // if we've reached over X layers of sidebars, hide for better performance.\n    if (this.uniqueIndex > 10) {\n      this.setAttribute('hide', '');\n    } else {\n      this.removeAttribute('hide');\n    }\n  }\n\n  get #getWidth() {\n    return this._dialogElement?.getBoundingClientRect().width ?? 0;\n  }\n\n  forceClose() {\n    if (this.isClosing) return;\n\n    this.isClosing = true;\n    this.style.setProperty('--uui-modal-offset', -this.#getWidth + 'px');\n\n    setTimeout(() => {\n      super.forceClose();\n    }, this.transitionDuration);\n  }\n\n  render() {\n    return html`<dialog>\n      <slot></slot>\n    </dialog>`;\n  }\n\n  static override readonly styles = [\n    ...UUIModalElement.styles,\n    css`\n      :host {\n        outline: none;\n        --uui-modal-sidebar-left-gap: 24px;\n        --uui-modal-sidebar-background: var(--uui-color-surface);\n      }\n      @media (min-width: 600px) {\n        :host {\n          --uui-modal-sidebar-left-gap: 64px;\n        }\n      }\n      dialog {\n        height: 100%;\n        width: 100%;\n        box-sizing: border-box;\n        max-width: calc(100% - var(--uui-modal-sidebar-left-gap));\n        margin-left: auto;\n        right: var(--uui-modal-offset);\n        transition: right var(--uui-modal-transition-duration, 250ms);\n        background: var(\n          --uui-modal-sidebar-background,\n          var(--uui-color-surface)\n        );\n      }\n      :host([index='0']) dialog {\n        box-shadow: var(--uui-shadow-depth-5);\n      }\n      :host(:not([index='0'])) dialog {\n        outline: 1px solid rgba(0, 0, 0, 0.1);\n      }\n      :host([hide]) dialog {\n        display: none;\n      }\n      :host([size='large']) dialog {\n        max-width: min(1200px, calc(100% - var(--uui-modal-sidebar-left-gap)));\n      }\n      :host([size='medium']) dialog {\n        max-width: min(800px, calc(100% - var(--uui-modal-sidebar-left-gap)));\n      }\n      :host([size='small']) dialog {\n        max-width: min(500px, calc(100% - var(--uui-modal-sidebar-left-gap)));\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAMO,MAAM,0BAAN,MAAM,gCAA+B,gBAAgB;AAAA,EAArD,cAAA;AAAA,UAAA,GAAA,SAAA;AAAA;AAKL,SAAA,OAA4B;AAAA,EAAA;AAAA,EAElB,aACR,oBACM;AACN,UAAM,aAAa,kBAAkB;AAErC,SAAK,MAAM,YAAY,sBAAsB,CAAC,mBAAK,mDAAY,IAAI;AAAA,EACrE;AAAA,EAEU,QACR,oBACM;AACN,UAAM,QAAQ,kBAAkB;AAGhC,QAAI,KAAK,cAAc,IAAI;AACzB,WAAK,aAAa,QAAQ,EAAE;AAAA,IAC9B,OAAO;AACL,WAAK,gBAAgB,MAAM;AAAA,IAC7B;AAAA,EACF;AAAA,EAMA,aAAa;AACX,QAAI,KAAK,UAAW;AAEpB,SAAK,YAAY;AACjB,SAAK,MAAM,YAAY,sBAAsB,CAAC,mBAAK,mDAAY,IAAI;AAEnE,eAAW,MAAM;AACf,YAAM,WAAA;AAAA,IACR,GAAG,KAAK,kBAAkB;AAAA,EAC5B;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,EAGT;AAgDF;AA/FO;AA4BD,eAAA,WAAY;AACd,SAAO,KAAK,gBAAgB,sBAAA,EAAwB,SAAS;AAC/D;AAmBA,wBAAyB,SAAS;AAAA,EAChC,GAAG,gBAAgB;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAnDG,IAAM,yBAAN;AAKL,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GAJhB,uBAKX,WAAA,MAAA;"}

package/dist/components/modal/modal.d.ts

@@ -0,0 +1,15 @@
+import { UUIModalDialogElement } from './modal-dialog.element.js';
+import { UUIModalSidebarElement } from './modal-sidebar.element.js';
+import { UUIModalContainerElement } from './modal-container.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-modal-dialog': UUIModalDialogElement;
+        'uui-modal-sidebar': UUIModalSidebarElement;
+        'uui-modal-container': UUIModalContainerElement;
+    }
+}
+export * from './modal-dialog.element.js';
+export * from './modal-sidebar.element.js';
+export * from './modal.element.js';
+export * from './modal-container.js';
+export { UUIModalElement as default } from './modal.element.js';

package/dist/components/modal/modal.element.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+export declare const UUIModalOpenEvent = "uui:modal-open";
+export declare const UUIModalCloseEvent = "uui:modal-close";
+export declare const UUIModalCloseEndEvent = "uui:modal-close-end";
+export declare class UUIModalElement extends LitElement {
+    protected readonly _dialogElement?: HTMLDialogElement;
+    isOpen: boolean;
+    isClosing: boolean;
+    index: number;
+    uniqueIndex: number;
+    private _transitionDuration;
+    get transitionDuration(): number;
+    set transitionDuration(value: number);
+    protected firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): void;
+    open: (event?: Event) => void;
+    close: (event?: Event) => void;
+    protected _openModal(): void;
+    forceClose(): void;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/modal/modal.element.js

@@ -0,0 +1,135 @@
+import { LitElement, css } from "lit";
+import { query, property } from "lit/decorators.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const UUIModalOpenEvent = "uui:modal-open";
+const UUIModalCloseEvent = "uui:modal-close";
+const UUIModalCloseEndEvent = "uui:modal-close-end";
+const _UUIModalElement = class _UUIModalElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.isOpen = false;
+    this.isClosing = false;
+    this.index = 0;
+    this.uniqueIndex = 0;
+    this._transitionDuration = 250;
+    this.open = (event) => {
+      event?.preventDefault();
+      event?.stopImmediatePropagation();
+      const openEvent = new CustomEvent(UUIModalOpenEvent, {
+        cancelable: true
+      });
+      const legacyOpenEvent = new CustomEvent("open", {
+        cancelable: true
+      });
+      this.dispatchEvent(openEvent);
+      this.dispatchEvent(legacyOpenEvent);
+      if (openEvent.defaultPrevented || legacyOpenEvent.defaultPrevented) return;
+      this._openModal();
+    };
+    this.close = (event) => {
+      event?.preventDefault();
+      event?.stopImmediatePropagation();
+      const closeEvent = new CustomEvent(UUIModalCloseEvent, {
+        cancelable: true
+      });
+      this.dispatchEvent(closeEvent);
+      if (closeEvent.defaultPrevented) return;
+      this.forceClose();
+    };
+  }
+  get transitionDuration() {
+    return this._transitionDuration;
+  }
+  set transitionDuration(value) {
+    this._transitionDuration = value;
+    this.style.setProperty(
+      "--uui-modal-transition-duration",
+      this._transitionDuration + "ms"
+    );
+  }
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+    if (!this.isClosing) {
+      this.open();
+    }
+  }
+  _openModal() {
+    this.isOpen = true;
+    this._dialogElement?.showModal();
+    this._dialogElement?.addEventListener("cancel", this.close);
+  }
+  forceClose() {
+    this.isClosing = true;
+    this.isOpen = false;
+    this._dialogElement?.close();
+    this.dispatchEvent(new CustomEvent("close-end"));
+    this.dispatchEvent(new CustomEvent(UUIModalCloseEndEvent));
+    this.remove();
+  }
+};
+_UUIModalElement.styles = [
+  css`
+      dialog {
+        display: block;
+        margin: 0;
+        padding: 0;
+        max-width: unset;
+        max-height: unset;
+        border: none;
+        background: none;
+        color: var(--uui-color-text);
+      }
+      dialog::backdrop {
+        background: none;
+        opacity: 0;
+      }
+      dialog::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: var(--uui-modal-color-backdrop, rgba(0, 0, 0, 0.5));
+        pointer-events: none;
+        opacity: 1;
+        transition: opacity var(--uui-modal-transition-duration, 250ms);
+        z-index: 1;
+      }
+      :host([index='0']) dialog::after {
+        opacity: 0;
+      }
+    `
+];
+let UUIModalElement = _UUIModalElement;
+__decorateClass([
+  query("dialog")
+], UUIModalElement.prototype, "_dialogElement", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "is-open" })
+], UUIModalElement.prototype, "isOpen", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "is-closing" })
+], UUIModalElement.prototype, "isClosing", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], UUIModalElement.prototype, "index", 2);
+__decorateClass([
+  property({ type: Number, reflect: true, attribute: "unique-index" })
+], UUIModalElement.prototype, "uniqueIndex", 2);
+__decorateClass([
+  property({ type: Number, attribute: "transition-duration" })
+], UUIModalElement.prototype, "transitionDuration", 1);
+export {
+  UUIModalCloseEndEvent,
+  UUIModalCloseEvent,
+  UUIModalElement,
+  UUIModalOpenEvent
+};
+//# sourceMappingURL=modal.element.js.map

package/dist/components/modal/modal.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.element.js","sources":["../../../src/components/modal/modal.element.ts"],"sourcesContent":["import { LitElement, css } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nexport const UUIModalOpenEvent = 'uui:modal-open';\nexport const UUIModalCloseEvent = 'uui:modal-close';\nexport const UUIModalCloseEndEvent = 'uui:modal-close-end';\n\nexport class UUIModalElement extends LitElement {\n  @query('dialog')\n  protected readonly _dialogElement?: HTMLDialogElement;\n\n  @property({ type: Boolean, reflect: true, attribute: 'is-open' })\n  isOpen = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'is-closing' })\n  isClosing = false;\n\n  @property({ type: Number, reflect: true })\n  index = 0;\n\n  @property({ type: Number, reflect: true, attribute: 'unique-index' })\n  uniqueIndex = 0;\n\n  private _transitionDuration = 250;\n\n  @property({ type: Number, attribute: 'transition-duration' })\n  public get transitionDuration() {\n    return this._transitionDuration;\n  }\n  public set transitionDuration(value: number) {\n    this._transitionDuration = value;\n    this.style.setProperty(\n      '--uui-modal-transition-duration',\n      this._transitionDuration + 'ms',\n    );\n  }\n\n  protected firstUpdated(\n    _changedProperties: Map<string | number | symbol, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties);\n\n    if (!this.isClosing) {\n      this.open();\n    }\n  }\n\n  public open = (event?: Event) => {\n    event?.preventDefault();\n    event?.stopImmediatePropagation();\n\n    const openEvent = new CustomEvent(UUIModalOpenEvent, {\n      cancelable: true,\n    });\n    const legacyOpenEvent = new CustomEvent('open', {\n      cancelable: true,\n    });\n\n    this.dispatchEvent(openEvent);\n    this.dispatchEvent(legacyOpenEvent);\n    if (openEvent.defaultPrevented || legacyOpenEvent.defaultPrevented) return;\n\n    this._openModal();\n  };\n\n  public close = (event?: Event) => {\n    event?.preventDefault();\n    event?.stopImmediatePropagation();\n\n    const closeEvent = new CustomEvent(UUIModalCloseEvent, {\n      cancelable: true,\n    });\n    this.dispatchEvent(closeEvent);\n\n    if (closeEvent.defaultPrevented) return;\n\n    this.forceClose();\n  };\n\n  protected _openModal() {\n    this.isOpen = true;\n    this._dialogElement?.showModal();\n    this._dialogElement?.addEventListener('cancel', this.close);\n  }\n\n  public forceClose() {\n    this.isClosing = true;\n    this.isOpen = false;\n    this._dialogElement?.close();\n\n    this.dispatchEvent(new CustomEvent('close-end'));\n    this.dispatchEvent(new CustomEvent(UUIModalCloseEndEvent));\n\n    this.remove();\n  }\n\n  static override readonly styles = [\n    css`\n      dialog {\n        display: block;\n        margin: 0;\n        padding: 0;\n        max-width: unset;\n        max-height: unset;\n        border: none;\n        background: none;\n        color: var(--uui-color-text);\n      }\n      dialog::backdrop {\n        background: none;\n        opacity: 0;\n      }\n      dialog::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        background-color: var(--uui-modal-color-backdrop, rgba(0, 0, 0, 0.5));\n        pointer-events: none;\n        opacity: 1;\n        transition: opacity var(--uui-modal-transition-duration, 250ms);\n        z-index: 1;\n      }\n      :host([index='0']) dialog::after {\n        opacity: 0;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAGO,MAAM,oBAAoB;AAC1B,MAAM,qBAAqB;AAC3B,MAAM,wBAAwB;AAE9B,MAAM,mBAAN,MAAM,yBAAwB,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AAKL,SAAA,SAAS;AAGT,SAAA,YAAY;AAGZ,SAAA,QAAQ;AAGR,SAAA,cAAc;AAEd,SAAQ,sBAAsB;AAwB9B,SAAO,OAAO,CAAC,UAAkB;AAC/B,aAAO,eAAA;AACP,aAAO,yBAAA;AAEP,YAAM,YAAY,IAAI,YAAY,mBAAmB;AAAA,QACnD,YAAY;AAAA,MAAA,CACb;AACD,YAAM,kBAAkB,IAAI,YAAY,QAAQ;AAAA,QAC9C,YAAY;AAAA,MAAA,CACb;AAED,WAAK,cAAc,SAAS;AAC5B,WAAK,cAAc,eAAe;AAClC,UAAI,UAAU,oBAAoB,gBAAgB,iBAAkB;AAEpE,WAAK,WAAA;AAAA,IACP;AAEA,SAAO,QAAQ,CAAC,UAAkB;AAChC,aAAO,eAAA;AACP,aAAO,yBAAA;AAEP,YAAM,aAAa,IAAI,YAAY,oBAAoB;AAAA,QACrD,YAAY;AAAA,MAAA,CACb;AACD,WAAK,cAAc,UAAU;AAE7B,UAAI,WAAW,iBAAkB;AAEjC,WAAK,WAAA;AAAA,IACP;AAAA,EAAA;AAAA,EAnDA,IAAW,qBAAqB;AAC9B,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAW,mBAAmB,OAAe;AAC3C,SAAK,sBAAsB;AAC3B,SAAK,MAAM;AAAA,MACT;AAAA,MACA,KAAK,sBAAsB;AAAA,IAAA;AAAA,EAE/B;AAAA,EAEU,aACR,oBACM;AACN,UAAM,aAAa,kBAAkB;AAErC,QAAI,CAAC,KAAK,WAAW;AACnB,WAAK,KAAA;AAAA,IACP;AAAA,EACF;AAAA,EAkCU,aAAa;AACrB,SAAK,SAAS;AACd,SAAK,gBAAgB,UAAA;AACrB,SAAK,gBAAgB,iBAAiB,UAAU,KAAK,KAAK;AAAA,EAC5D;AAAA,EAEO,aAAa;AAClB,SAAK,YAAY;AACjB,SAAK,SAAS;AACd,SAAK,gBAAgB,MAAA;AAErB,SAAK,cAAc,IAAI,YAAY,WAAW,CAAC;AAC/C,SAAK,cAAc,IAAI,YAAY,qBAAqB,CAAC;AAEzD,SAAK,OAAA;AAAA,EACP;AAiCF;AA/BE,iBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA1FG,IAAM,kBAAN;AAEc,gBAAA;AAAA,EADlB,MAAM,QAAQ;AAAA,GADJ,gBAEQ,WAAA,kBAAA,CAAA;AAGnB,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,WAAW;AAAA,GAJrD,gBAKX,WAAA,UAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,cAAc;AAAA,GAPxD,gBAQX,WAAA,aAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAV9B,gBAWX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,gBAAgB;AAAA,GAbzD,gBAcX,WAAA,eAAA,CAAA;AAKW,gBAAA;AAAA,EADV,SAAS,EAAE,MAAM,QAAQ,WAAW,uBAAuB;AAAA,GAlBjD,gBAmBA,WAAA,sBAAA,CAAA;"}

package/dist/components/modal/modal.js

@@ -0,0 +1,13 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUIModalDialogElement } from "./modal-dialog.element.js";
+import { UUIModalSidebarElement } from "./modal-sidebar.element.js";
+import { UUIModalContainerElement } from "./modal-container.js";
+defineElement("uui-modal-dialog", UUIModalDialogElement);
+defineElement("uui-modal-sidebar", UUIModalSidebarElement);
+defineElement("uui-modal-container", UUIModalContainerElement);
+export {
+  UUIModalContainerElement,
+  UUIModalDialogElement,
+  UUIModalSidebarElement
+};
+//# sourceMappingURL=modal.js.map

package/dist/components/modal/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sources":["../../../src/components/modal/modal.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIModalDialogElement } from './modal-dialog.element.js';\nimport { UUIModalSidebarElement } from './modal-sidebar.element.js';\nimport { UUIModalContainerElement } from './modal-container.js';\n\ndefineElement('uui-modal-dialog', UUIModalDialogElement);\ndefineElement('uui-modal-sidebar', UUIModalSidebarElement);\ndefineElement('uui-modal-container', UUIModalContainerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-modal-dialog': UUIModalDialogElement;\n    'uui-modal-sidebar': UUIModalSidebarElement;\n    'uui-modal-container': UUIModalContainerElement;\n  }\n}\n\nexport * from './modal-dialog.element.js';\nexport * from './modal-sidebar.element.js';\nexport * from './modal.element.js';\nexport * from './modal-container.js';\nexport { UUIModalElement as default } from './modal.element.js';\n"],"names":[],"mappings":";;;;AAKA,cAAc,oBAAoB,qBAAqB;AACvD,cAAc,qBAAqB,sBAAsB;AACzD,cAAc,uBAAuB,wBAAwB;"}

package/dist/components/pagination/UUIPaginationEvent.d.ts

@@ -0,0 +1,6 @@
+import { UUIEvent } from '../../internal/events/index.js';
+import type { UUIPaginationElement } from './pagination.element.js';
+export declare class UUIPaginationEvent extends UUIEvent<{}, UUIPaginationElement> {
+    static readonly CHANGE = "change";
+    constructor(evName: string, eventInit?: any);
+}

package/dist/components/pagination/UUIPaginationEvent.js

@@ -0,0 +1,15 @@
+import { UUIEvent } from "../../internal/events/UUIEvent.js";
+const _UUIPaginationEvent = class _UUIPaginationEvent extends UUIEvent {
+  constructor(evName, eventInit = {}) {
+    super(evName, {
+      bubbles: true,
+      ...eventInit
+    });
+  }
+};
+_UUIPaginationEvent.CHANGE = "change";
+let UUIPaginationEvent = _UUIPaginationEvent;
+export {
+  UUIPaginationEvent
+};
+//# sourceMappingURL=UUIPaginationEvent.js.map

package/dist/components/pagination/UUIPaginationEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UUIPaginationEvent.js","sources":["../../../src/components/pagination/UUIPaginationEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIPaginationElement } from './pagination.element.js';\n\nexport class UUIPaginationEvent extends UUIEvent<{}, UUIPaginationElement> {\n  public static readonly CHANGE = 'change';\n\n  constructor(evName: string, eventInit: any = {}) {\n    super(evName, {\n      bubbles: true,\n      ...eventInit,\n    });\n  }\n}\n"],"names":[],"mappings":";AAGO,MAAM,sBAAN,MAAM,4BAA2B,SAAmC;AAAA,EAGzE,YAAY,QAAgB,YAAiB,IAAI;AAC/C,UAAM,QAAQ;AAAA,MACZ,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,CACJ;AAAA,EACH;AACF;AARE,oBAAuB,SAAS;AAD3B,IAAM,qBAAN;"}

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,9 @@
+import { UUIPaginationElement } from './pagination.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-pagination': UUIPaginationElement;
+    }
+}
+export * from './pagination.element.js';
+export * from './UUIPaginationEvent.js';
+export { UUIPaginationElement as default } from './pagination.element.js';