@umbraco-ui/uui 2.0.0 → 2.0.1

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

@@ -1,126 +1,80 @@
-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 __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import { UUIModalCloseEvent, UUIModalElement } from "./modal.element.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`
+import { LitElement, css, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+//#region src/components/modal/modal-container.ts
+var UUIModalContainerElement = class extends LitElement {
+	constructor() {
+		super();
+		this.sidebarGap = 64;
+		this.transitionDurationMS = 250;
+		this.#onSlotChange = () => {
+			const existingModals = this._modals ?? [];
+			this._modals = this.modalSlot?.assignedElements({ flatten: true }).filter((el) => el instanceof UUIModalElement) ?? [];
+			existingModals.filter((modal) => !this._modals.includes(modal)).forEach((modal) => modal.removeEventListener(UUIModalCloseEvent, this.#onCloseModalClose));
+			this._modals.filter((modal) => !existingModals.includes(modal)).forEach((modal) => modal.addEventListener(UUIModalCloseEvent, this.#onCloseModalClose));
+			this._sidebars = this._modals.filter((el) => el instanceof UUIModalSidebarElement);
+			if (this._modals.length === 0) {
+				this.removeAttribute("backdrop");
+				return;
+			}
+			this.#updateModals();
+			this.#updateSidebars();
+		};
+		this.#onCloseModalClose = (event) => {
+			event.stopImmediatePropagation();
+			event.target?.removeEventListener(UUIModalCloseEvent, this.#onCloseModalClose);
+			if (!this._modals || this._modals.length <= 1) {
+				this.removeAttribute("backdrop");
+				return;
+			}
+			this.#updateModals();
+			this.#updateSidebars();
+		};
+		this.addEventListener(UUIModalCloseEvent, this.#onCloseModalClose);
+	}
+	firstUpdated(_changedProperties) {
+		super.firstUpdated(_changedProperties);
+		this.style.setProperty("--uui-modal-transition-duration", this.transitionDurationMS + "ms");
+	}
+	#onSlotChange;
+	#onCloseModalClose;
+	#updateModals() {
+		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) => {
+			modal.uniqueIndex = (reverse?.filter((m) => m.constructor.name === modal.constructor.name))?.indexOf(modal) ?? 0;
+		});
+	}
+	#updateSidebars() {
+		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);
+			}
+		});
+	}
+	render() {
+		return html`<slot @slotchange=${this.#onSlotChange}></slot>`;
+	}
+	static {
+		this.styles = css`
     :host {
       position: fixed;
       --uui-modal-color-backdrop: rgba(0, 0, 0, 0.5);
@@ -138,23 +92,14 @@ _UUIModalContainerElement.styles = css`
       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
+__decorate([query("slot")], UUIModalContainerElement.prototype, "modalSlot", void 0);
+__decorate([state()], UUIModalContainerElement.prototype, "_modals", void 0);
+__decorate([state()], UUIModalContainerElement.prototype, "_sidebars", void 0);
+__decorate([property({ type: Number })], UUIModalContainerElement.prototype, "sidebarGap", void 0);
+__decorate([property({ type: Number })], UUIModalContainerElement.prototype, "transitionDurationMS", void 0);
+//#endregion
+export { UUIModalContainerElement };
+
+//# sourceMappingURL=modal-container.js.map

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

@@ -1 +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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"}
+{"version":3,"file":"modal-container.js","names":["#onCloseModalClose","#updateModals","#updateSidebars","#onSlotChange"],"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"],"mappings":"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"}

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

@@ -1,17 +1,16 @@
-import { html, css } from "lit";
 import { UUIModalElement } from "./modal.element.js";
-const _UUIModalDialogElement = class _UUIModalDialogElement extends UUIModalElement {
-  render() {
-    return html`
+import { css, html } from "lit";
+//#region src/components/modal/modal-dialog.element.ts
+var UUIModalDialogElement = class extends UUIModalElement {
+	render() {
+		return html`
       <dialog>
         <slot></slot>
       </dialog>
     `;
-  }
-};
-_UUIModalDialogElement.styles = [
-  ...UUIModalElement.styles,
-  css`
+	}
+	static {
+		this.styles = [...UUIModalElement.styles, css`
       :host {
         outline: none;
         --uui-modal-dialog-background: var(--uui-color-surface);
@@ -35,10 +34,10 @@ _UUIModalDialogElement.styles = [
       :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
+//#endregion
+export { UUIModalDialogElement };
+
+//# sourceMappingURL=modal-dialog.element.js.map

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

@@ -1 +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;"}
+{"version":3,"file":"modal-dialog.element.js","names":[],"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"],"mappings":";;;AAEA,IAAa,wBAAb,cAA2C,gBAAgB;CACzD,SAAS;EACP,OAAO,IAAI;;;;;CAKb;;gBAEkC,CAChC,GAAG,gBAAgB,QACnB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;KAyBL;;AACF"}

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

@@ -1,61 +1,40 @@
-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 __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.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>
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+//#region src/components/modal/modal-sidebar.element.ts
+var UUIModalSidebarElement = class extends UUIModalElement {
+	constructor(..._args) {
+		super(..._args);
+		this.size = "full";
+	}
+	firstUpdated(_changedProperties) {
+		super.firstUpdated(_changedProperties);
+		this.style.setProperty("--uui-modal-offset", -this.#getWidth + "px");
+	}
+	updated(_changedProperties) {
+		super.updated(_changedProperties);
+		if (this.uniqueIndex > 10) this.setAttribute("hide", "");
+		else this.removeAttribute("hide");
+	}
+	get #getWidth() {
+		return this._dialogElement?.getBoundingClientRect().width ?? 0;
+	}
+	forceClose() {
+		if (this.isClosing) return;
+		this.isClosing = true;
+		this.style.setProperty("--uui-modal-offset", -this.#getWidth + "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`
+	}
+	static {
+		this.styles = [...UUIModalElement.styles, css`
       :host {
         outline: none;
         --uui-modal-sidebar-left-gap: 24px;
@@ -97,13 +76,11 @@ _UUIModalSidebarElement.styles = [
       :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
+__decorate([property({ reflect: true })], UUIModalSidebarElement.prototype, "size", void 0);
+//#endregion
+export { UUIModalSidebarElement };
+
+//# sourceMappingURL=modal-sidebar.element.js.map

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

@@ -1 +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;"}
+{"version":3,"file":"modal-sidebar.element.js","names":["#getWidth"],"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"],"mappings":";;;;;AAMA,IAAa,yBAAb,cAA4C,gBAAgB;;;cAK9B;;CAE5B,aACE,oBACM;EACN,MAAM,aAAa,kBAAkB;EAErC,KAAK,MAAM,YAAY,sBAAsB,CAAC,KAAKA,YAAY,IAAI;CACrE;CAEA,QACE,oBACM;EACN,MAAM,QAAQ,kBAAkB;EAGhC,IAAI,KAAK,cAAc,IACrB,KAAK,aAAa,QAAQ,EAAE;OAE5B,KAAK,gBAAgB,MAAM;CAE/B;CAEA,IAAIA,YAAY;EACd,OAAO,KAAK,gBAAgB,sBAAsB,CAAC,CAAC,SAAS;CAC/D;CAEA,aAAa;EACX,IAAI,KAAK,WAAW;EAEpB,KAAK,YAAY;EACjB,KAAK,MAAM,YAAY,sBAAsB,CAAC,KAAKA,YAAY,IAAI;EAEnE,iBAAiB;GACf,MAAM,WAAW;EACnB,GAAG,KAAK,kBAAkB;CAC5B;CAEA,SAAS;EACP,OAAO,IAAI;;;CAGb;;gBAEkC,CAChC,GAAG,gBAAgB,QACnB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2CL;;AACF;YA3FG,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,uBAAA,WAAA,QAAA,KAAA,CAAA"}

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

@@ -12,4 +12,3 @@ 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';