@universal-material/web 3.7.2 → 3.9.0

package/datepicker/range-datepicker.js

@@ -0,0 +1,212 @@
+import { __decorate } from "tslib";
+import { html, nothing, svg } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+import { NativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
+import { TextFieldBase } from '../shared/text-field-base/text-field-base.js';
+import { styles as textFieldStyles } from '../text-field/text-field.styles.js';
+import { styles } from './datepicker.styles.js';
+import { formatIsoDateRange } from './format.js';
+import '../button/icon-button.js';
+import '../calendar/range-calendar.js';
+import '../menu/menu.js';
+import '../ripple/ripple.js';
+const ISO_DATE_RANGE = /^\d{4}-\d{2}-\d{2} - \d{4}-\d{2}-\d{2}$/;
+let RangeDatepicker = class RangeDatepicker extends NativeTextFieldWrapper {
+    constructor() {
+        super(...arguments);
+        /**
+         * The BCP 47 locale tag forwarded to the underlying range calendar and used
+         * for non-editable display formatting.
+         * When `null`, the calendar falls back to the browser's `navigator.language`.
+         */
+        this.locale = null;
+        /**
+         * Format used when displaying the value while the field is not editable.
+         * Accepts `'short'`, `'medium'`, `'long'`, `'full'`, `'iso'`, or an
+         * `Intl.DateTimeFormatOptions` object. Each end of the range is formatted
+         * independently and joined with ` - `.
+         */
+        this.format = 'short';
+        /**
+         * Whether the input accepts manually-typed ranges. When `false` (default),
+         * the field is read-only and clicking anywhere opens the calendar popover.
+         * When `true`, the input accepts text in the `YYYY-MM-DD - YYYY-MM-DD` format;
+         * the calendar popover is opened via the trailing icon.
+         */
+        this.editable = false;
+        /**
+         * Whether the input is read-only. When set, manual typing is disabled even
+         * if `editable` is `true`; the calendar popover remains available.
+         */
+        this.readOnly = false;
+        /**
+         * The positioning strategy used by the calendar popover. Use `'fixed'`
+         * when the datepicker is rendered inside a clipped/scrollable container.
+         */
+        this.menuPositioning = 'relative';
+        this.#handleKeyDown = (e) => {
+            if (e.key === 'ArrowDown' && !this._menu.open) {
+                e.preventDefault();
+                this._menu.show();
+                return;
+            }
+            if (e.key === 'Escape' && this._menu.open) {
+                e.preventDefault();
+                this._menu.close();
+                return;
+            }
+            this._handleKeyDown(e);
+        };
+        this.#handleCalendarInput = (e) => {
+            e.stopPropagation();
+            const value = e.target.value ?? '';
+            this.value = value;
+            this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+        };
+        this.#handleCalendarChange = (e) => {
+            e.stopPropagation();
+            if (!ISO_DATE_RANGE.test(this._value)) {
+                return;
+            }
+            this.dispatchEvent(new Event('change', { bubbles: true }));
+            this._menu.close();
+        };
+        this.#stopPropagation = (e) => {
+            e.stopPropagation();
+        };
+        this.#toggleMenu = () => {
+            if (this.disabled) {
+                return;
+            }
+            this._menu.toggle();
+        };
+    }
+    static { this.styles = [TextFieldBase.styles, textFieldStyles, styles]; }
+    renderControl() {
+        const displayValue = this.editable
+            ? this._value
+            : formatIsoDateRange(this._value, this.format, this.locale);
+        return html `
+      ${this.editable
+            ? nothing
+            : html `
+          <button
+            class="trigger"
+            type="button"
+            aria-haspopup="dialog"
+            ?disabled=${this.disabled}
+            @click=${this.#toggleMenu}></button>
+          <u-ripple ?disabled=${this.disabled}></u-ripple>
+        `}
+      <div class="input">
+        <input
+          type="text"
+          part="input"
+          id=${this.id || nothing}
+          aria-labelledby="label"
+          aria-describedby="supporting-text"
+          aria-haspopup="dialog"
+          tabindex=${this.editable ? nothing : -1}
+          ?readonly=${this.readOnly || !this.editable}
+          ?disabled=${this.disabled}
+          placeholder=${this.placeholder ?? nothing}
+          .value=${live(displayValue)}
+          @input=${this._handleInput}
+          @keydown=${this.#handleKeyDown} />
+      </div>
+    `;
+    }
+    renderDefaultTrailingIcon() {
+        const icon = svg `
+      <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor">
+        <path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z"/>
+      </svg>`;
+        // In editable mode the field itself is typeable, so the icon must be a
+        // dedicated button for opening the calendar. In non-editable mode the
+        // .trigger button covers the whole field, so the icon is just visual.
+        return this.editable
+            ? html `<u-icon-button
+          type="button"
+          aria-haspopup="dialog"
+          aria-label="Open calendar"
+          ?disabled=${this.disabled}
+          @click=${this.#toggleMenu}>${icon}</u-icon-button>`
+            : icon;
+    }
+    renderAfterContent() {
+        return html `
+      <u-menu
+        positioning=${this.menuPositioning}
+        autoclose="outside"
+        anchor-corner="end-start"
+        direction="down-end"
+        allow-overflow
+        manualFocus
+        @click=${this.#stopPropagation}>
+        <u-range-calendar
+          .value=${this._value}
+          .locale=${this.locale}
+          @input=${this.#handleCalendarInput}
+          @change=${this.#handleCalendarChange}></u-range-calendar>
+      </u-menu>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        void this.#attach();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._trailingSlot?.removeEventListener('click', this.#toggleMenu);
+    }
+    _handleInput() {
+        super._handleInput();
+        if (ISO_DATE_RANGE.test(this._value)) {
+            this._calendar.value = this._value;
+        }
+        this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+    }
+    #handleKeyDown;
+    #handleCalendarInput;
+    #handleCalendarChange;
+    #stopPropagation;
+    #toggleMenu;
+    async #attach() {
+        await this.updateComplete;
+        this._menu.anchorElement = this._container;
+        this._trailingSlot.addEventListener('click', this.#toggleMenu);
+    }
+};
+__decorate([
+    property()
+], RangeDatepicker.prototype, "locale", void 0);
+__decorate([
+    property()
+], RangeDatepicker.prototype, "format", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RangeDatepicker.prototype, "editable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RangeDatepicker.prototype, "readOnly", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'menu-positioning' })
+], RangeDatepicker.prototype, "menuPositioning", void 0);
+__decorate([
+    query('input')
+], RangeDatepicker.prototype, "input", void 0);
+__decorate([
+    query('u-menu', true)
+], RangeDatepicker.prototype, "_menu", void 0);
+__decorate([
+    query('u-range-calendar', true)
+], RangeDatepicker.prototype, "_calendar", void 0);
+__decorate([
+    query('.trailing-icon', true)
+], RangeDatepicker.prototype, "_trailingSlot", void 0);
+RangeDatepicker = __decorate([
+    customElement('u-range-datepicker')
+], RangeDatepicker);
+export { RangeDatepicker };
+//# sourceMappingURL=range-datepicker.js.map

package/datepicker/range-datepicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-datepicker.js","sourceRoot":"","sources":["../../src/datepicker/range-datepicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { html, HTMLTemplateResult, nothing, svg } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { RangeCalendar } from '../calendar/range-calendar.js';\nimport { Menu } from '../menu/menu.js';\nimport { NativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';\nimport { TextFieldBase } from '../shared/text-field-base/text-field-base.js';\n\nimport { styles as textFieldStyles } from '../text-field/text-field.styles.js';\nimport { styles } from './datepicker.styles.js';\nimport { DatepickerFormat, formatIsoDateRange } from './format.js';\n\nimport '../button/icon-button.js';\nimport '../calendar/range-calendar.js';\nimport '../menu/menu.js';\nimport '../ripple/ripple.js';\n\nconst ISO_DATE_RANGE = /^\\d{4}-\\d{2}-\\d{2} - \\d{4}-\\d{2}-\\d{2}$/;\n\n@customElement('u-range-datepicker')\nexport class RangeDatepicker extends NativeTextFieldWrapper {\n  static override styles: CSSResultGroup = [TextFieldBase.styles, textFieldStyles, styles];\n\n  /**\n   * The BCP 47 locale tag forwarded to the underlying range calendar and used\n   * for non-editable display formatting.\n   * When `null`, the calendar falls back to the browser's `navigator.language`.\n   */\n  @property() locale: string | null = null;\n\n  /**\n   * Format used when displaying the value while the field is not editable.\n   * Accepts `'short'`, `'medium'`, `'long'`, `'full'`, `'iso'`, or an\n   * `Intl.DateTimeFormatOptions` object. Each end of the range is formatted\n   * independently and joined with ` - `.\n   */\n  @property() format: DatepickerFormat = 'short';\n\n  /**\n   * Whether the input accepts manually-typed ranges. When `false` (default),\n   * the field is read-only and clicking anywhere opens the calendar popover.\n   * When `true`, the input accepts text in the `YYYY-MM-DD - YYYY-MM-DD` format;\n   * the calendar popover is opened via the trailing icon.\n   */\n  @property({ type: Boolean, reflect: true }) editable = false;\n\n  /**\n   * Whether the input is read-only. When set, manual typing is disabled even\n   * if `editable` is `true`; the calendar popover remains available.\n   */\n  @property({ type: Boolean, reflect: true }) readOnly = false;\n\n  /**\n   * The positioning strategy used by the calendar popover. Use `'fixed'`\n   * when the datepicker is rendered inside a clipped/scrollable container.\n   */\n  @property({ reflect: true, attribute: 'menu-positioning' }) menuPositioning: 'relative' | 'fixed' = 'relative';\n\n  @query('input') input!: HTMLInputElement;\n  @query('u-menu', true) private _menu!: Menu;\n  @query('u-range-calendar', true) private _calendar!: RangeCalendar;\n  @query('.trailing-icon', true) private _trailingSlot!: HTMLSlotElement;\n\n  protected override renderControl(): HTMLTemplateResult {\n    const displayValue = this.editable\n      ? this._value\n      : formatIsoDateRange(this._value, this.format, this.locale);\n\n    return html`\n      ${this.editable\n        ? nothing\n        : html`\n          <button\n            class=\"trigger\"\n            type=\"button\"\n            aria-haspopup=\"dialog\"\n            ?disabled=${this.disabled}\n            @click=${this.#toggleMenu}></button>\n          <u-ripple ?disabled=${this.disabled}></u-ripple>\n        `}\n      <div class=\"input\">\n        <input\n          type=\"text\"\n          part=\"input\"\n          id=${this.id || nothing}\n          aria-labelledby=\"label\"\n          aria-describedby=\"supporting-text\"\n          aria-haspopup=\"dialog\"\n          tabindex=${this.editable ? nothing : -1}\n          ?readonly=${this.readOnly || !this.editable}\n          ?disabled=${this.disabled}\n          placeholder=${this.placeholder ?? nothing}\n          .value=${live(displayValue)}\n          @input=${this._handleInput}\n          @keydown=${this.#handleKeyDown} />\n      </div>\n    `;\n  }\n\n  protected override renderDefaultTrailingIcon() {\n    const icon = svg`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n        <path d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z\"/>\n      </svg>`;\n\n    // In editable mode the field itself is typeable, so the icon must be a\n    // dedicated button for opening the calendar. In non-editable mode the\n    // .trigger button covers the whole field, so the icon is just visual.\n    return this.editable\n      ? html`<u-icon-button\n          type=\"button\"\n          aria-haspopup=\"dialog\"\n          aria-label=\"Open calendar\"\n          ?disabled=${this.disabled}\n          @click=${this.#toggleMenu}>${icon}</u-icon-button>`\n      : icon;\n  }\n\n  protected override renderAfterContent() {\n    return html`\n      <u-menu\n        positioning=${this.menuPositioning}\n        autoclose=\"outside\"\n        anchor-corner=\"end-start\"\n        direction=\"down-end\"\n        allow-overflow\n        manualFocus\n        @click=${this.#stopPropagation}>\n        <u-range-calendar\n          .value=${this._value}\n          .locale=${this.locale}\n          @input=${this.#handleCalendarInput}\n          @change=${this.#handleCalendarChange}></u-range-calendar>\n      </u-menu>\n    `;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    void this.#attach();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._trailingSlot?.removeEventListener('click', this.#toggleMenu);\n  }\n\n  protected override _handleInput(): void {\n    super._handleInput();\n\n    if (ISO_DATE_RANGE.test(this._value)) {\n      this._calendar.value = this._value;\n    }\n\n    this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n  }\n\n  #handleKeyDown = (e: KeyboardEvent): void => {\n    if (e.key === 'ArrowDown' && !this._menu.open) {\n      e.preventDefault();\n      this._menu.show();\n      return;\n    }\n\n    if (e.key === 'Escape' && this._menu.open) {\n      e.preventDefault();\n      this._menu.close();\n      return;\n    }\n\n    this._handleKeyDown(e);\n  };\n\n  #handleCalendarInput = (e: Event): void => {\n    e.stopPropagation();\n    const value = (e.target as RangeCalendar).value ?? '';\n    this.value = value;\n    this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n  };\n\n  #handleCalendarChange = (e: Event): void => {\n    e.stopPropagation();\n\n    if (!ISO_DATE_RANGE.test(this._value)) {\n      return;\n    }\n\n    this.dispatchEvent(new Event('change', { bubbles: true }));\n    this._menu.close();\n  };\n\n  #stopPropagation = (e: Event): void => {\n    e.stopPropagation();\n  };\n\n  #toggleMenu = (): void => {\n    if (this.disabled) {\n      return;\n    }\n    this._menu.toggle();\n  };\n\n  async #attach(): Promise<void> {\n    await this.updateComplete;\n    this._menu.anchorElement = this._container;\n    this._trailingSlot.addEventListener('click', this.#toggleMenu);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-range-datepicker': RangeDatepicker;\n  }\n}\n"]}

package/dialog/confirm-dialog-builder.d.ts

@@ -1,12 +1,12 @@
 import { DialogBuilder } from './dialog-builder.js';
 import { DialogButtonDef } from './dialog-button-def.js';
-import { UmDialog } from './dialog.js';
+import { Dialog } from './dialog.js';
 export declare class ConfirmDialogBuilder extends DialogBuilder<ConfirmDialogBuilder, Promise<boolean>> {
     #private;
     static create(message: string): ConfirmDialogBuilder;
     confirmButton(confirmButtonDef: DialogButtonDef): ConfirmDialogBuilder;
     cancelButton(cancelButtonDef: DialogButtonDef): ConfirmDialogBuilder;
-    _addButtons(dialog: UmDialog): void;
-    protected innerShow(dialog: UmDialog): Promise<boolean>;
+    _addButtons(dialog: Dialog): void;
+    protected innerShow(dialog: Dialog): Promise<boolean>;
 }
 //# sourceMappingURL=confirm-dialog-builder.d.ts.map

package/dialog/confirm-dialog-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"confirm-dialog-builder.d.ts","sourceRoot":"","sources":["../../src/dialog/confirm-dialog-builder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,qBAAa,oBAAqB,SAAQ,aAAa,CAAC,oBAAoB,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;;IAC7F,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,oBAAoB;IAOpD,aAAa,CAAC,gBAAgB,EAAE,eAAe,GAAG,oBAAoB;IAKtE,YAAY,CAAC,eAAe,EAAE,eAAe,GAAG,oBAAoB;IAK3D,WAAW,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI;cAazB,SAAS,CAAC,MAAM,EAAE,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC;CAMjE"}
+{"version":3,"file":"confirm-dialog-builder.d.ts","sourceRoot":"","sources":["../../src/dialog/confirm-dialog-builder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,qBAAa,oBAAqB,SAAQ,aAAa,CAAC,oBAAoB,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;;IAC7F,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,oBAAoB;IAOpD,aAAa,CAAC,gBAAgB,EAAE,eAAe,GAAG,oBAAoB;IAKtE,YAAY,CAAC,eAAe,EAAE,eAAe,GAAG,oBAAoB;IAK3D,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;cAavB,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC;CAM/D"}

package/dialog/confirm-dialog-builder.js.map

@@ -1 +1 @@
-{"version":3,"file":"confirm-dialog-builder.js","sourceRoot":"","sources":["../../src/dialog/confirm-dialog-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIpD,MAAM,OAAO,oBAAqB,SAAQ,aAAqD;IAC7F,MAAM,CAAC,MAAM,CAAC,OAAe;QAC3B,OAAO,IAAI,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IAED,iBAAiB,CAAmB;IACpC,gBAAgB,CAAmB;IAEnC,aAAa,CAAC,gBAAiC;QAC7C,IAAI,CAAC,iBAAiB,GAAG,gBAAgB,CAAC;QAC1C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,YAAY,CAAC,eAAgC;QAC3C,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC;QACxC,OAAO,IAAI,CAAC;IACd,CAAC;IAEQ,WAAW,CAAC,MAAgB;QAEnC,IAAI,CAAC,UAAU,CACb,MAAM,EACN,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,iBAAiB,EAAE,EAC7E,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;QAE5B,IAAI,CAAC,UAAU,CACb,MAAM,EACN,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE,EAC3E,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAClC,CAAC;IAEkB,SAAS,CAAC,MAAgB;QAC3C,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;QAExB,OAAO,IAAI,OAAO,CAAU,OAAO,CAAC,EAAE,CACpC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC;IACnF,CAAC;CACF","sourcesContent":["import { config } from '../config.js';\nimport { DialogBuilder } from './dialog-builder.js';\nimport { DialogButtonDef } from './dialog-button-def.js';\nimport { UmDialog } from './dialog.js';\n\nexport class ConfirmDialogBuilder extends DialogBuilder<ConfirmDialogBuilder, Promise<boolean>> {\n  static create(message: string): ConfirmDialogBuilder {\n    return new ConfirmDialogBuilder(message);\n  }\n\n  #confirmButtonDef?: DialogButtonDef;\n  #cancelButtonDef?: DialogButtonDef;\n\n  confirmButton(confirmButtonDef: DialogButtonDef): ConfirmDialogBuilder {\n    this.#confirmButtonDef = confirmButtonDef;\n    return this;\n  }\n\n  cancelButton(cancelButtonDef: DialogButtonDef): ConfirmDialogBuilder {\n    this.#cancelButtonDef = cancelButtonDef;\n    return this;\n  }\n\n  override _addButtons(dialog: UmDialog): void {\n\n    this._addButton(\n      dialog,\n      { ...config.dialog.confirmDefaults.confirmButton, ...this.#confirmButtonDef },\n      () => dialog.close('ok'));\n\n    this._addButton(\n      dialog,\n      { ...config.dialog.confirmDefaults.cancelButton, ...this.#cancelButtonDef },\n      () => dialog.close('cancel'));\n  }\n\n  protected override innerShow(dialog: UmDialog): Promise<boolean> {\n    super.innerShow(dialog);\n\n    return new Promise<boolean>(resolve =>\n      dialog.addEventListener('closed', () => resolve(dialog.returnValue === 'ok')));\n  }\n}\n"]}
+{"version":3,"file":"confirm-dialog-builder.js","sourceRoot":"","sources":["../../src/dialog/confirm-dialog-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIpD,MAAM,OAAO,oBAAqB,SAAQ,aAAqD;IAC7F,MAAM,CAAC,MAAM,CAAC,OAAe;QAC3B,OAAO,IAAI,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IAED,iBAAiB,CAAmB;IACpC,gBAAgB,CAAmB;IAEnC,aAAa,CAAC,gBAAiC;QAC7C,IAAI,CAAC,iBAAiB,GAAG,gBAAgB,CAAC;QAC1C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,YAAY,CAAC,eAAgC;QAC3C,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC;QACxC,OAAO,IAAI,CAAC;IACd,CAAC;IAEQ,WAAW,CAAC,MAAc;QAEjC,IAAI,CAAC,UAAU,CACb,MAAM,EACN,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,iBAAiB,EAAE,EAC7E,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;QAE5B,IAAI,CAAC,UAAU,CACb,MAAM,EACN,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE,EAC3E,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAClC,CAAC;IAEkB,SAAS,CAAC,MAAc;QACzC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;QAExB,OAAO,IAAI,OAAO,CAAU,OAAO,CAAC,EAAE,CACpC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC;IACnF,CAAC;CACF","sourcesContent":["import { config } from '../config.js';\nimport { DialogBuilder } from './dialog-builder.js';\nimport { DialogButtonDef } from './dialog-button-def.js';\nimport { Dialog } from './dialog.js';\n\nexport class ConfirmDialogBuilder extends DialogBuilder<ConfirmDialogBuilder, Promise<boolean>> {\n  static create(message: string): ConfirmDialogBuilder {\n    return new ConfirmDialogBuilder(message);\n  }\n\n  #confirmButtonDef?: DialogButtonDef;\n  #cancelButtonDef?: DialogButtonDef;\n\n  confirmButton(confirmButtonDef: DialogButtonDef): ConfirmDialogBuilder {\n    this.#confirmButtonDef = confirmButtonDef;\n    return this;\n  }\n\n  cancelButton(cancelButtonDef: DialogButtonDef): ConfirmDialogBuilder {\n    this.#cancelButtonDef = cancelButtonDef;\n    return this;\n  }\n\n  override _addButtons(dialog: Dialog): void {\n\n    this._addButton(\n      dialog,\n      { ...config.dialog.confirmDefaults.confirmButton, ...this.#confirmButtonDef },\n      () => dialog.close('ok'));\n\n    this._addButton(\n      dialog,\n      { ...config.dialog.confirmDefaults.cancelButton, ...this.#cancelButtonDef },\n      () => dialog.close('cancel'));\n  }\n\n  protected override innerShow(dialog: Dialog): Promise<boolean> {\n    super.innerShow(dialog);\n\n    return new Promise<boolean>(resolve =>\n      dialog.addEventListener('closed', () => resolve(dialog.returnValue === 'ok')));\n  }\n}\n"]}

package/dialog/dialog-builder.d.ts

@@ -1,5 +1,6 @@
 import { DialogButtonDef } from './dialog-button-def.js';
-import { UmDialog } from './dialog.js';
+import { Dialog } from './dialog.js';
+import '../button/button.js';
 import './dialog.js';
 export declare abstract class DialogBuilder<TBuilder extends DialogBuilder<any, any>, TReturn> {
     #private;
@@ -7,9 +8,9 @@ export declare abstract class DialogBuilder<TBuilder extends DialogBuilder<any,
     constructor(message: string);
     headline(headline: string): TBuilder;
     show(): TReturn;
-    protected innerShow(dialog: UmDialog): TReturn | void;
-    protected abstract _addButtons(dialog: UmDialog): void;
+    protected innerShow(dialog: Dialog): TReturn | void;
+    protected abstract _addButtons(dialog: Dialog): void;
     private _addHeadline;
-    protected _addButton(dialog: UmDialog, buttonDef: DialogButtonDef, click: () => void): void;
+    protected _addButton(dialog: Dialog, buttonDef: DialogButtonDef, click: () => void): void;
 }
 //# sourceMappingURL=dialog-builder.d.ts.map

package/dialog/dialog-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-builder.d.ts","sourceRoot":"","sources":["../../src/dialog/dialog-builder.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,aAAa,CAAC;AAErB,8BAAsB,aAAa,CAAC,QAAQ,SAAS,aAAa,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,OAAO;;IAGvE,OAAO,CAAC,QAAQ,CAAC,OAAO;gBAAP,OAAO,EAAE,MAAM;IAI5C,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ;IAKpC,IAAI,IAAI,OAAO;IAUf,SAAS,CAAC,SAAS,CAAC,MAAM,EAAE,QAAQ,GAAG,OAAO,GAAG,IAAI;IAQrD,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI;IAEtD,OAAO,CAAC,YAAY;IAWpB,SAAS,CAAC,UAAU,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,IAAI;CASrF"}
+{"version":3,"file":"dialog-builder.d.ts","sourceRoot":"","sources":["../../src/dialog/dialog-builder.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,aAAa,CAAC;AAErB,8BAAsB,aAAa,CAAC,QAAQ,SAAS,aAAa,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,OAAO;;IAGvE,OAAO,CAAC,QAAQ,CAAC,OAAO;gBAAP,OAAO,EAAE,MAAM;IAI5C,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ;IAKpC,IAAI,IAAI,OAAO;IAUf,SAAS,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAQnD,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAEpD,OAAO,CAAC,YAAY;IAWpB,SAAS,CAAC,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,IAAI;CAmBnF"}

package/dialog/dialog-builder.js

@@ -1,4 +1,5 @@
 import DOMPurify from 'dompurify';
+import '../button/button.js';
 import './dialog.js';
 export class DialogBuilder {
     #headline;
@@ -33,9 +34,15 @@ export class DialogBuilder {
     }
     _addButton(dialog, buttonDef, click) {
         const button = document.createElement('u-button');
-        button.variant = buttonDef.variant;
-        button.color = buttonDef.color;
-        button.textContent = buttonDef.label;
+        if (buttonDef.variant !== undefined) {
+            button.variant = buttonDef.variant;
+        }
+        if (buttonDef.color !== undefined) {
+            button.color = buttonDef.color;
+        }
+        if (buttonDef.label !== undefined) {
+            button.textContent = buttonDef.label;
+        }
         button.slot = 'actions';
         button.addEventListener('click', click);
         dialog.appendChild(button);

package/dialog/dialog-builder.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-builder.js","sourceRoot":"","sources":["../../src/dialog/dialog-builder.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,WAAW,CAAC;AAKlC,OAAO,aAAa,CAAC;AAErB,MAAM,OAAgB,aAAa;IACjC,SAAS,CAAU;IAEnB,YAA6B,OAAe;QAAf,YAAO,GAAP,OAAO,CAAQ;IAE5C,CAAC;IAED,QAAQ,CAAC,QAAgB;QACvB,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAC1B,OAAO,IAA2B,CAAC;IACrC,CAAC;IAED,IAAI;QACF,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAClD,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEpD,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QAC1B,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAEzB,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAY,CAAC;IAC3C,CAAC;IAES,SAAS,CAAC,MAAgB;QAClC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC;QACzD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAClC,MAAM,CAAC,IAAI,EAAE,CAAC;QAEd,OAAO;IACT,CAAC;IAIO,YAAY,CAAC,MAAmB;QACtC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACvD,eAAe,CAAC,IAAI,GAAG,UAAU,CAAC;QAClC,eAAe,CAAC,SAAS,GAAG,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC/D,MAAM,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;IACtC,CAAC;IAES,UAAU,CAAC,MAAgB,EAAE,SAA0B,EAAE,KAAiB;QAClF,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAClD,MAAM,CAAC,OAAO,GAAG,SAAS,CAAC,OAAQ,CAAC;QACpC,MAAM,CAAC,KAAK,GAAG,SAAS,CAAC,KAAM,CAAC;QAChC,MAAM,CAAC,WAAW,GAAG,SAAS,CAAC,KAAM,CAAC;QACtC,MAAM,CAAC,IAAI,GAAG,SAAS,CAAC;QACxB,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QACxC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC;CACF","sourcesContent":["import DOMPurify from 'dompurify';\n\nimport { DialogButtonDef } from './dialog-button-def.js';\nimport { UmDialog } from './dialog.js';\n\nimport './dialog.js';\n\nexport abstract class DialogBuilder<TBuilder extends DialogBuilder<any, any>, TReturn> {\n  #headline?: string;\n\n  constructor(private readonly message: string) {\n\n  }\n\n  headline(headline: string): TBuilder {\n    this.#headline = headline;\n    return this as unknown as TBuilder;\n  }\n\n  show(): TReturn {\n    const dialog = document.createElement('u-dialog');\n    dialog.innerHTML = DOMPurify.sanitize(this.message);\n\n    this._addHeadline(dialog);\n    this._addButtons(dialog);\n\n    return this.innerShow(dialog) as TReturn;\n  }\n\n  protected innerShow(dialog: UmDialog): TReturn | void {\n    dialog.addEventListener('closed', () => dialog.remove());\n    document.body.appendChild(dialog);\n    dialog.show();\n\n    return;\n  }\n\n  protected abstract _addButtons(dialog: UmDialog): void;\n\n  private _addHeadline(dialog: HTMLElement) {\n    if (!this.#headline) {\n      return;\n    }\n\n    const headlineElement = document.createElement('span');\n    headlineElement.slot = 'headline';\n    headlineElement.innerHTML = DOMPurify.sanitize(this.#headline);\n    dialog.appendChild(headlineElement);\n  }\n\n  protected _addButton(dialog: UmDialog, buttonDef: DialogButtonDef, click: () => void) {\n    const button = document.createElement('u-button');\n    button.variant = buttonDef.variant!;\n    button.color = buttonDef.color!;\n    button.textContent = buttonDef.label!;\n    button.slot = 'actions';\n    button.addEventListener('click', click);\n    dialog.appendChild(button);\n  }\n}\n"]}
+{"version":3,"file":"dialog-builder.js","sourceRoot":"","sources":["../../src/dialog/dialog-builder.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,WAAW,CAAC;AAKlC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,aAAa,CAAC;AAErB,MAAM,OAAgB,aAAa;IACjC,SAAS,CAAU;IAEnB,YAA6B,OAAe;QAAf,YAAO,GAAP,OAAO,CAAQ;IAE5C,CAAC;IAED,QAAQ,CAAC,QAAgB;QACvB,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAC1B,OAAO,IAA2B,CAAC;IACrC,CAAC;IAED,IAAI;QACF,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAClD,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEpD,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QAC1B,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAEzB,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAY,CAAC;IAC3C,CAAC;IAES,SAAS,CAAC,MAAc;QAChC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC;QACzD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAClC,MAAM,CAAC,IAAI,EAAE,CAAC;QAEd,OAAO;IACT,CAAC;IAIO,YAAY,CAAC,MAAmB;QACtC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACvD,eAAe,CAAC,IAAI,GAAG,UAAU,CAAC;QAClC,eAAe,CAAC,SAAS,GAAG,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC/D,MAAM,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;IACtC,CAAC;IAES,UAAU,CAAC,MAAc,EAAE,SAA0B,EAAE,KAAiB;QAChF,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAElD,IAAI,SAAS,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YACpC,MAAM,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC;QACrC,CAAC;QAED,IAAI,SAAS,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YAClC,MAAM,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC;QACjC,CAAC;QAED,IAAI,SAAS,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YAClC,MAAM,CAAC,WAAW,GAAG,SAAS,CAAC,KAAK,CAAC;QACvC,CAAC;QAED,MAAM,CAAC,IAAI,GAAG,SAAS,CAAC;QACxB,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QACxC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC;CACF","sourcesContent":["import DOMPurify from 'dompurify';\n\nimport { DialogButtonDef } from './dialog-button-def.js';\nimport { Dialog } from './dialog.js';\n\nimport '../button/button.js';\nimport './dialog.js';\n\nexport abstract class DialogBuilder<TBuilder extends DialogBuilder<any, any>, TReturn> {\n  #headline?: string;\n\n  constructor(private readonly message: string) {\n\n  }\n\n  headline(headline: string): TBuilder {\n    this.#headline = headline;\n    return this as unknown as TBuilder;\n  }\n\n  show(): TReturn {\n    const dialog = document.createElement('u-dialog');\n    dialog.innerHTML = DOMPurify.sanitize(this.message);\n\n    this._addHeadline(dialog);\n    this._addButtons(dialog);\n\n    return this.innerShow(dialog) as TReturn;\n  }\n\n  protected innerShow(dialog: Dialog): TReturn | void {\n    dialog.addEventListener('closed', () => dialog.remove());\n    document.body.appendChild(dialog);\n    dialog.show();\n\n    return;\n  }\n\n  protected abstract _addButtons(dialog: Dialog): void;\n\n  private _addHeadline(dialog: HTMLElement) {\n    if (!this.#headline) {\n      return;\n    }\n\n    const headlineElement = document.createElement('span');\n    headlineElement.slot = 'headline';\n    headlineElement.innerHTML = DOMPurify.sanitize(this.#headline);\n    dialog.appendChild(headlineElement);\n  }\n\n  protected _addButton(dialog: Dialog, buttonDef: DialogButtonDef, click: () => void) {\n    const button = document.createElement('u-button');\n\n    if (buttonDef.variant !== undefined) {\n      button.variant = buttonDef.variant;\n    }\n\n    if (buttonDef.color !== undefined) {\n      button.color = buttonDef.color;\n    }\n\n    if (buttonDef.label !== undefined) {\n      button.textContent = buttonDef.label;\n    }\n\n    button.slot = 'actions';\n    button.addEventListener('click', click);\n    dialog.appendChild(button);\n  }\n}\n"]}

package/dialog/dialog-button-def.d.ts

@@ -1,7 +1,7 @@
-import { UmButtonColor, UmButtonVariant } from '../button/button.js';
+import { ButtonColor, ButtonVariant } from '../button/button.js';
 export interface DialogButtonDef {
-    variant?: UmButtonVariant;
+    variant?: ButtonVariant;
     label?: string;
-    color?: UmButtonColor;
+    color?: ButtonColor;
 }
 //# sourceMappingURL=dialog-button-def.d.ts.map

package/dialog/dialog-button-def.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-button-def.d.ts","sourceRoot":"","sources":["../../src/dialog/dialog-button-def.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAErE,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB"}
+{"version":3,"file":"dialog-button-def.d.ts","sourceRoot":"","sources":["../../src/dialog/dialog-button-def.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEjE,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB"}

package/dialog/dialog-button-def.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-button-def.js","sourceRoot":"","sources":["../../src/dialog/dialog-button-def.ts"],"names":[],"mappings":"","sourcesContent":["import { UmButtonColor, UmButtonVariant } from '../button/button.js';\n\nexport interface DialogButtonDef {\n  variant?: UmButtonVariant;\n  label?: string;\n  color?: UmButtonColor;\n}\n"]}
+{"version":3,"file":"dialog-button-def.js","sourceRoot":"","sources":["../../src/dialog/dialog-button-def.ts"],"names":[],"mappings":"","sourcesContent":["import { ButtonColor, ButtonVariant } from '../button/button.js';\n\nexport interface DialogButtonDef {\n  variant?: ButtonVariant;\n  label?: string;\n  color?: ButtonColor;\n}\n"]}

package/dialog/dialog.d.ts

@@ -3,9 +3,13 @@ import { HTMLTemplateResult, LitElement } from 'lit';
 import { ConfirmDialogBuilder } from './confirm-dialog-builder.js';
 import { MessageDialogBuilder } from './message-dialog-builder.js';
 import '../elevation/elevation.js';
-export declare class UmDialog extends LitElement {
+export declare class Dialog extends LitElement {
     #private;
     static styles: import("lit").CSSResult[];
+    /**
+     * Whether the dialog is open. Setting this to `true` is equivalent to
+     * calling `show()`; setting it to `false` is equivalent to `close()`.
+     */
     get open(): boolean;
     set open(open: boolean);
     get returnValue(): string;
@@ -21,6 +25,10 @@ export declare class UmDialog extends LitElement {
      * _Note:_ Readonly
      */
     hasIcon: boolean;
+    /**
+     * The external element that drives the top/bottom scroll dividers.
+     * When not set, the dialog's own content element is used.
+     */
     get scrollContainer(): HTMLElement;
     set scrollContainer(scrollContainer: HTMLElement);
     dialog: HTMLDialogElement;
@@ -40,7 +48,7 @@ export declare class UmDialog extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-dialog': UmDialog;
+        'u-dialog': Dialog;
     }
 }
 //# sourceMappingURL=dialog.d.ts.map

package/dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAI3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE,OAAO,2BAA2B,CAAC;AAKnC,qBACa,QAAS,SAAQ,UAAU;;IACtC,OAAgB,MAAM,4BAAwB;IAK9C,IACI,IAAI,IAAI,OAAO,CAElB;IAED,IAAI,IAAI,CAAC,IAAI,EAAE,OAAO,EAWrB;IAED,IAAI,WAAW,WAEd;IAED;;;;OAIG;IACoE,WAAW,UAAS;IAE3F;;;;OAIG;IACgE,OAAO,UAAS;IAInF,IACI,eAAe,IAAI,WAAW,CAEjC;IAED,IAAI,eAAe,CAAC,eAAe,EAAE,WAAW,EAM/C;IAEgB,MAAM,EAAG,iBAAiB,CAAC;IAC3B,KAAK,EAAG,WAAW,CAAC;IAClB,OAAO,EAAG,WAAW,CAAC;IACpB,SAAS,EAAG,WAAW,CAAC;IAG7C,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAiB;IAGnD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiB;IAE/C,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,oBAAoB;IAIrD,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,oBAAoB;IAI5C,MAAM,IAAI,kBAAkB;IA+B5B,YAAY,CAAC,iBAAiB,EAAE,cAAc;IAM9C,iBAAiB;IAUjB,oBAAoB;IAoEvB,IAAI;IAWJ,KAAK,CAAC,WAAW,GAAE,MAAyB;CA6CnD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAI3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE,OAAO,2BAA2B,CAAC;AAKnC,qBACa,MAAO,SAAQ,UAAU;;IACpC,OAAgB,MAAM,4BAAwB;IAK9C;;;OAGG;IACH,IACI,IAAI,IAAI,OAAO,CAElB;IAED,IAAI,IAAI,CAAC,IAAI,EAAE,OAAO,EAWrB;IAED,IAAI,WAAW,WAEd;IAED;;;;OAIG;IACoE,WAAW,UAAS;IAE3F;;;;OAIG;IACgE,OAAO,UAAS;IAInF;;;OAGG;IACH,IACI,eAAe,IAAI,WAAW,CAEjC;IAED,IAAI,eAAe,CAAC,eAAe,EAAE,WAAW,EAM/C;IAEgB,MAAM,EAAG,iBAAiB,CAAC;IAC3B,KAAK,EAAG,WAAW,CAAC;IAClB,OAAO,EAAG,WAAW,CAAC;IACpB,SAAS,EAAG,WAAW,CAAC;IAG7C,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAiB;IAGnD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiB;IAE/C,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,oBAAoB;IAIrD,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,oBAAoB;IAI5C,MAAM,IAAI,kBAAkB;IA+B5B,YAAY,CAAC,iBAAiB,EAAE,cAAc;IAM9C,iBAAiB;IAUjB,oBAAoB;IAoEvB,IAAI;IAWJ,KAAK,CAAC,WAAW,GAAE,MAAyB;CA6CnD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,MAAM,CAAC;KACpB;CACF"}

package/dialog/dialog.js

@@ -8,7 +8,7 @@ import { MessageDialogBuilder } from './message-dialog-builder.js';
 import '../elevation/elevation.js';
 const topDividerClass = 'top-divider';
 const bottomDividerClass = 'bottom-divider';
-let UmDialog = class UmDialog extends LitElement {
+let Dialog = class Dialog extends LitElement {
     constructor() {
         super(...arguments);
         this.#open = false;
@@ -37,6 +37,10 @@ let UmDialog = class UmDialog extends LitElement {
     static { this.styles = [baseStyles, styles]; }
     #open;
     #contentResizeObserver;
+    /**
+     * Whether the dialog is open. Setting this to `true` is equivalent to
+     * calling `show()`; setting it to `false` is equivalent to `close()`.
+     */
     get open() {
         return this.#open;
     }
@@ -54,6 +58,10 @@ let UmDialog = class UmDialog extends LitElement {
         return this.dialog.returnValue;
     }
     #scrollContainer;
+    /**
+     * The external element that drives the top/bottom scroll dividers.
+     * When not set, the dialog's own content element is used.
+     */
     get scrollContainer() {
         return this.#scrollContainer ?? this.content;
     }
@@ -195,36 +203,36 @@ let UmDialog = class UmDialog extends LitElement {
 };
 __decorate([
     property({ type: Boolean })
-], UmDialog.prototype, "open", null);
+], Dialog.prototype, "open", null);
 __decorate([
     property({ type: Boolean, attribute: 'has-headline', reflect: true })
-], UmDialog.prototype, "hasHeadline", void 0);
+], Dialog.prototype, "hasHeadline", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'has-icon', reflect: true })
-], UmDialog.prototype, "hasIcon", void 0);
+], Dialog.prototype, "hasIcon", void 0);
 __decorate([
     property()
-], UmDialog.prototype, "scrollContainer", null);
+], Dialog.prototype, "scrollContainer", null);
 __decorate([
     query('dialog')
-], UmDialog.prototype, "dialog", void 0);
+], Dialog.prototype, "dialog", void 0);
 __decorate([
     query('.scrim')
-], UmDialog.prototype, "scrim", void 0);
+], Dialog.prototype, "scrim", void 0);
 __decorate([
     query('.content')
-], UmDialog.prototype, "content", void 0);
+], Dialog.prototype, "content", void 0);
 __decorate([
     query('.container')
-], UmDialog.prototype, "container", void 0);
+], Dialog.prototype, "container", void 0);
 __decorate([
     queryAssignedElements({ slot: 'headline', flatten: true })
-], UmDialog.prototype, "assignedHeadlines", void 0);
+], Dialog.prototype, "assignedHeadlines", void 0);
 __decorate([
     queryAssignedElements({ slot: 'icon', flatten: true })
-], UmDialog.prototype, "assignedIcons", void 0);
-UmDialog = __decorate([
+], Dialog.prototype, "assignedIcons", void 0);
+Dialog = __decorate([
     customElement('u-dialog')
-], UmDialog);
-export { UmDialog };
+], Dialog);
+export { Dialog };
 //# sourceMappingURL=dialog.js.map

package/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/dialog/dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\n\nimport { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { ConfirmDialogBuilder } from './confirm-dialog-builder.js';\nimport { styles } from './dialog.styles.js';\nimport { MessageDialogBuilder } from './message-dialog-builder.js';\n\nimport '../elevation/elevation.js';\n\nconst topDividerClass = 'top-divider';\nconst bottomDividerClass = 'bottom-divider';\n\n@customElement('u-dialog')\nexport class UmDialog extends LitElement {\n  static override styles = [baseStyles, styles];\n\n  #open = false;\n  #contentResizeObserver!: ResizeObserver | null;\n\n  @property({ type: Boolean })\n  get open(): boolean {\n    return this.#open;\n  }\n\n  set open(open: boolean) {\n    if (this.#open === open) {\n      return;\n    }\n\n    if (!open) {\n      this.close();\n      return;\n    }\n\n    this.show();\n  }\n\n  get returnValue() {\n    return this.dialog.returnValue;\n  }\n\n  /**\n   * Whether dialog has headline or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-headline', reflect: true }) hasHeadline = false;\n\n  /**\n   * Whether dialog has icon\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-icon', reflect: true }) hasIcon = false;\n\n  #scrollContainer: HTMLElement | null = null;\n\n  @property()\n  get scrollContainer(): HTMLElement {\n    return this.#scrollContainer ?? this.content;\n  }\n\n  set scrollContainer(scrollContainer: HTMLElement) {\n    this.#scrollContainer?.removeEventListener('scroll', this.#handleScroll);\n\n    this.#scrollContainer = scrollContainer;\n    scrollContainer.addEventListener('scroll', this.#handleScroll.bind(this));\n    this.#setScrollDividers();\n  }\n\n  @query('dialog') dialog!: HTMLDialogElement;\n  @query('.scrim') scrim!: HTMLElement;\n  @query('.content') content!: HTMLElement;\n  @query('.container') container!: HTMLElement;\n\n  @queryAssignedElements({ slot: 'headline', flatten: true })\n  private readonly assignedHeadlines!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private readonly assignedIcons!: HTMLElement[];\n\n  static message(message: string): MessageDialogBuilder {\n    return MessageDialogBuilder.create(message);\n  }\n\n  static confirm(message: string): ConfirmDialogBuilder {\n    return ConfirmDialogBuilder.create(message);\n  }\n\n  override render(): HTMLTemplateResult {\n    return html`\n      <dialog>\n        <div class=\"scrim\" @click=${this.#handleScrimClick}></div>\n        <div class=\"container\" part=\"container\">\n          <u-elevation></u-elevation>\n          <div class=\"icon\" part=\"icon\">\n            <slot\n              name=\"icon\"\n              @slotchange=${this.#handleIconSlotChange}>\n            </slot>\n          </div>\n          <div class=\"headline\" part=\"headline\">\n            <slot\n              name=\"headline\"\n              @slotchange=${this.#handleHeadlineSlotChange}>\n            </slot>\n          </div>\n          <div\n            class=\"content\"\n            part=\"content\"\n            @scroll=${this.#handleScroll}>\n            <slot></slot>\n          </div>\n          <div class=\"actions\" part=\"actions\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </dialog>`;\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n\n    this.dialog.addEventListener('cancel', this.#handleCancel);\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('submit', this.#handleSubmit);\n\n    setTimeout(() => {\n      this.#contentResizeObserver = new ResizeObserver(() => this.#setScrollDividers());\n      this.#contentResizeObserver.observe(this.content);\n    });\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('submit', this.#handleSubmit);\n\n    this.#contentResizeObserver!.disconnect();\n    this.#contentResizeObserver = null;\n  }\n\n  #handleSubmit(event: SubmitEvent) {\n    const form = event.target as HTMLFormElement;\n    const { submitter } = event;\n\n    if (form.method !== 'dialog' || !submitter) {\n      return;\n    }\n\n    this.close(submitter.getAttribute('value') ?? this.returnValue);\n  }\n\n  readonly #handleCancel = (e: Event) => {\n    e.preventDefault();\n\n    const cancelPrevented = !this.dispatchEvent(new Event('cancel', { cancelable: true }));\n\n    if (cancelPrevented) {\n      return;\n    }\n\n    this.close();\n  };\n\n  #handleIconSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n\n  #handleHeadlineSlotChange() {\n    this.hasHeadline = this.assignedHeadlines.length > 0;\n  }\n\n  #handleScroll() {\n    this.#setScrollDividers();\n  }\n\n  #setScrollDividers() {\n    this.#setTopScrollDivider();\n    this.#setBottomScrollDivider();\n  }\n\n  #setBottomScrollDivider() {\n    const scrollBottom = this.scrollContainer.scrollTop + this.scrollContainer.offsetHeight;\n\n    if (scrollBottom >= this.scrollContainer.scrollHeight) {\n      this.content?.classList.remove(bottomDividerClass);\n      return;\n    }\n\n    this.content?.classList.add(bottomDividerClass);\n  }\n\n  #setTopScrollDivider() {\n    if (this.scrollContainer.scrollTop) {\n      this.content?.classList.add(topDividerClass);\n      return;\n    }\n\n    this.content?.classList.remove(topDividerClass);\n  }\n\n  async show() {\n    this.#open = true;\n    this.setAttribute('open', '');\n\n    await this.updateComplete;\n    this.dialog.showModal();\n    const autoFocusElement = this.querySelector<HTMLElement>('[autofocus]');\n    autoFocusElement?.focus();\n    this.content.scrollTop = 0;\n  }\n\n  async close(returnValue: string = this.returnValue) {\n    this.#open = false;\n    this.removeAttribute('open');\n\n    await this.updateComplete;\n\n    if (!this.dialog.open || this.open) {\n      return;\n    }\n\n    const preventClose = !this.dispatchEvent(new Event('close', { cancelable: true }));\n\n    if (preventClose) {\n      this.#open = true;\n      return;\n    }\n\n    this.open = false;\n\n    const closed = new Promise<void>(resolve =>\n      this.container.addEventListener(\n        'animationend',\n        () => {\n          resolve();\n          this.classList.remove('closing');\n          this.dialog.close(returnValue);\n          this.dispatchEvent(new Event('closed'));\n        },\n        { capture: true, once: true },\n      )\n    );\n\n    this.classList.add('closing');\n    await closed;\n  }\n\n  #handleScrimClick() {\n    const cancelPrevented = !this.dispatchEvent(new Event('cancel', { cancelable: true }));\n\n    if (cancelPrevented) {\n      return;\n    }\n\n    this.close();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-dialog': UmDialog;\n  }\n}\n"]}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/dialog/dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\n\nimport { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { ConfirmDialogBuilder } from './confirm-dialog-builder.js';\nimport { styles } from './dialog.styles.js';\nimport { MessageDialogBuilder } from './message-dialog-builder.js';\n\nimport '../elevation/elevation.js';\n\nconst topDividerClass = 'top-divider';\nconst bottomDividerClass = 'bottom-divider';\n\n@customElement('u-dialog')\nexport class Dialog extends LitElement {\n  static override styles = [baseStyles, styles];\n\n  #open = false;\n  #contentResizeObserver!: ResizeObserver | null;\n\n  /**\n   * Whether the dialog is open. Setting this to `true` is equivalent to\n   * calling `show()`; setting it to `false` is equivalent to `close()`.\n   */\n  @property({ type: Boolean })\n  get open(): boolean {\n    return this.#open;\n  }\n\n  set open(open: boolean) {\n    if (this.#open === open) {\n      return;\n    }\n\n    if (!open) {\n      this.close();\n      return;\n    }\n\n    this.show();\n  }\n\n  get returnValue() {\n    return this.dialog.returnValue;\n  }\n\n  /**\n   * Whether dialog has headline or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-headline', reflect: true }) hasHeadline = false;\n\n  /**\n   * Whether dialog has icon\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-icon', reflect: true }) hasIcon = false;\n\n  #scrollContainer: HTMLElement | null = null;\n\n  /**\n   * The external element that drives the top/bottom scroll dividers.\n   * When not set, the dialog's own content element is used.\n   */\n  @property()\n  get scrollContainer(): HTMLElement {\n    return this.#scrollContainer ?? this.content;\n  }\n\n  set scrollContainer(scrollContainer: HTMLElement) {\n    this.#scrollContainer?.removeEventListener('scroll', this.#handleScroll);\n\n    this.#scrollContainer = scrollContainer;\n    scrollContainer.addEventListener('scroll', this.#handleScroll.bind(this));\n    this.#setScrollDividers();\n  }\n\n  @query('dialog') dialog!: HTMLDialogElement;\n  @query('.scrim') scrim!: HTMLElement;\n  @query('.content') content!: HTMLElement;\n  @query('.container') container!: HTMLElement;\n\n  @queryAssignedElements({ slot: 'headline', flatten: true })\n  private readonly assignedHeadlines!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private readonly assignedIcons!: HTMLElement[];\n\n  static message(message: string): MessageDialogBuilder {\n    return MessageDialogBuilder.create(message);\n  }\n\n  static confirm(message: string): ConfirmDialogBuilder {\n    return ConfirmDialogBuilder.create(message);\n  }\n\n  override render(): HTMLTemplateResult {\n    return html`\n      <dialog>\n        <div class=\"scrim\" @click=${this.#handleScrimClick}></div>\n        <div class=\"container\" part=\"container\">\n          <u-elevation></u-elevation>\n          <div class=\"icon\" part=\"icon\">\n            <slot\n              name=\"icon\"\n              @slotchange=${this.#handleIconSlotChange}>\n            </slot>\n          </div>\n          <div class=\"headline\" part=\"headline\">\n            <slot\n              name=\"headline\"\n              @slotchange=${this.#handleHeadlineSlotChange}>\n            </slot>\n          </div>\n          <div\n            class=\"content\"\n            part=\"content\"\n            @scroll=${this.#handleScroll}>\n            <slot></slot>\n          </div>\n          <div class=\"actions\" part=\"actions\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </dialog>`;\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n\n    this.dialog.addEventListener('cancel', this.#handleCancel);\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('submit', this.#handleSubmit);\n\n    setTimeout(() => {\n      this.#contentResizeObserver = new ResizeObserver(() => this.#setScrollDividers());\n      this.#contentResizeObserver.observe(this.content);\n    });\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('submit', this.#handleSubmit);\n\n    this.#contentResizeObserver!.disconnect();\n    this.#contentResizeObserver = null;\n  }\n\n  #handleSubmit(event: SubmitEvent) {\n    const form = event.target as HTMLFormElement;\n    const { submitter } = event;\n\n    if (form.method !== 'dialog' || !submitter) {\n      return;\n    }\n\n    this.close(submitter.getAttribute('value') ?? this.returnValue);\n  }\n\n  readonly #handleCancel = (e: Event) => {\n    e.preventDefault();\n\n    const cancelPrevented = !this.dispatchEvent(new Event('cancel', { cancelable: true }));\n\n    if (cancelPrevented) {\n      return;\n    }\n\n    this.close();\n  };\n\n  #handleIconSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n\n  #handleHeadlineSlotChange() {\n    this.hasHeadline = this.assignedHeadlines.length > 0;\n  }\n\n  #handleScroll() {\n    this.#setScrollDividers();\n  }\n\n  #setScrollDividers() {\n    this.#setTopScrollDivider();\n    this.#setBottomScrollDivider();\n  }\n\n  #setBottomScrollDivider() {\n    const scrollBottom = this.scrollContainer.scrollTop + this.scrollContainer.offsetHeight;\n\n    if (scrollBottom >= this.scrollContainer.scrollHeight) {\n      this.content?.classList.remove(bottomDividerClass);\n      return;\n    }\n\n    this.content?.classList.add(bottomDividerClass);\n  }\n\n  #setTopScrollDivider() {\n    if (this.scrollContainer.scrollTop) {\n      this.content?.classList.add(topDividerClass);\n      return;\n    }\n\n    this.content?.classList.remove(topDividerClass);\n  }\n\n  async show() {\n    this.#open = true;\n    this.setAttribute('open', '');\n\n    await this.updateComplete;\n    this.dialog.showModal();\n    const autoFocusElement = this.querySelector<HTMLElement>('[autofocus]');\n    autoFocusElement?.focus();\n    this.content.scrollTop = 0;\n  }\n\n  async close(returnValue: string = this.returnValue) {\n    this.#open = false;\n    this.removeAttribute('open');\n\n    await this.updateComplete;\n\n    if (!this.dialog.open || this.open) {\n      return;\n    }\n\n    const preventClose = !this.dispatchEvent(new Event('close', { cancelable: true }));\n\n    if (preventClose) {\n      this.#open = true;\n      return;\n    }\n\n    this.open = false;\n\n    const closed = new Promise<void>(resolve =>\n      this.container.addEventListener(\n        'animationend',\n        () => {\n          resolve();\n          this.classList.remove('closing');\n          this.dialog.close(returnValue);\n          this.dispatchEvent(new Event('closed'));\n        },\n        { capture: true, once: true },\n      )\n    );\n\n    this.classList.add('closing');\n    await closed;\n  }\n\n  #handleScrimClick() {\n    const cancelPrevented = !this.dispatchEvent(new Event('cancel', { cancelable: true }));\n\n    if (cancelPrevented) {\n      return;\n    }\n\n    this.close();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-dialog': Dialog;\n  }\n}\n"]}

package/dialog/message-dialog-builder.d.ts

@@ -1,10 +1,10 @@
 import { DialogBuilder } from './dialog-builder.js';
 import { DialogButtonDef } from './dialog-button-def.js';
-import { UmDialog } from './dialog.js';
+import { Dialog } from './dialog.js';
 export declare class MessageDialogBuilder extends DialogBuilder<MessageDialogBuilder, void> {
     #private;
     static create(message: string): MessageDialogBuilder;
     acknowledgeButton(acknowledgeButtonDef: DialogButtonDef): MessageDialogBuilder;
-    _addButtons(dialog: UmDialog): void;
+    _addButtons(dialog: Dialog): void;
 }
 //# sourceMappingURL=message-dialog-builder.d.ts.map

package/dialog/message-dialog-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message-dialog-builder.d.ts","sourceRoot":"","sources":["../../src/dialog/message-dialog-builder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,qBAAa,oBAAqB,SAAQ,aAAa,CAAC,oBAAoB,EAAE,IAAI,CAAC;;IACjF,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,oBAAoB;IAMpD,iBAAiB,CAAC,oBAAoB,EAAE,eAAe,GAAG,oBAAoB;IAKrE,WAAW,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI;CAO7C"}
+{"version":3,"file":"message-dialog-builder.d.ts","sourceRoot":"","sources":["../../src/dialog/message-dialog-builder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,qBAAa,oBAAqB,SAAQ,aAAa,CAAC,oBAAoB,EAAE,IAAI,CAAC;;IACjF,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,oBAAoB;IAMpD,iBAAiB,CAAC,oBAAoB,EAAE,eAAe,GAAG,oBAAoB;IAKrE,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;CAO3C"}

package/dialog/message-dialog-builder.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-dialog-builder.js","sourceRoot":"","sources":["../../src/dialog/message-dialog-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIpD,MAAM,OAAO,oBAAqB,SAAQ,aAAyC;IACjF,MAAM,CAAC,MAAM,CAAC,OAAe;QAC3B,OAAO,IAAI,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IAED,qBAAqB,CAAmB;IAExC,iBAAiB,CAAC,oBAAqC;QACrD,IAAI,CAAC,qBAAqB,GAAG,oBAAoB,CAAC;QAClD,OAAO,IAAI,CAAC;IACd,CAAC;IAEQ,WAAW,CAAC,MAAgB;QAEnC,IAAI,CAAC,UAAU,CACb,MAAM,EACN,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,EACnF,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IAC1B,CAAC;CACF","sourcesContent":["import { config } from '../config.js';\nimport { DialogBuilder } from './dialog-builder.js';\nimport { DialogButtonDef } from './dialog-button-def.js';\nimport { UmDialog } from './dialog.js';\n\nexport class MessageDialogBuilder extends DialogBuilder<MessageDialogBuilder, void> {\n  static create(message: string): MessageDialogBuilder {\n    return new MessageDialogBuilder(message);\n  }\n\n  #acknowledgeButtonDef?: DialogButtonDef;\n\n  acknowledgeButton(acknowledgeButtonDef: DialogButtonDef): MessageDialogBuilder {\n    this.#acknowledgeButtonDef = acknowledgeButtonDef;\n    return this;\n  }\n\n  override _addButtons(dialog: UmDialog): void {\n\n    this._addButton(\n      dialog,\n      { ...config.dialog.alertDefaults.acknowledgeButton, ...this.#acknowledgeButtonDef },\n      () => dialog.close());\n  }\n}\n"]}
+{"version":3,"file":"message-dialog-builder.js","sourceRoot":"","sources":["../../src/dialog/message-dialog-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIpD,MAAM,OAAO,oBAAqB,SAAQ,aAAyC;IACjF,MAAM,CAAC,MAAM,CAAC,OAAe;QAC3B,OAAO,IAAI,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IAED,qBAAqB,CAAmB;IAExC,iBAAiB,CAAC,oBAAqC;QACrD,IAAI,CAAC,qBAAqB,GAAG,oBAAoB,CAAC;QAClD,OAAO,IAAI,CAAC;IACd,CAAC;IAEQ,WAAW,CAAC,MAAc;QAEjC,IAAI,CAAC,UAAU,CACb,MAAM,EACN,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,EACnF,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IAC1B,CAAC;CACF","sourcesContent":["import { config } from '../config.js';\nimport { DialogBuilder } from './dialog-builder.js';\nimport { DialogButtonDef } from './dialog-button-def.js';\nimport { Dialog } from './dialog.js';\n\nexport class MessageDialogBuilder extends DialogBuilder<MessageDialogBuilder, void> {\n  static create(message: string): MessageDialogBuilder {\n    return new MessageDialogBuilder(message);\n  }\n\n  #acknowledgeButtonDef?: DialogButtonDef;\n\n  acknowledgeButton(acknowledgeButtonDef: DialogButtonDef): MessageDialogBuilder {\n    this.#acknowledgeButtonDef = acknowledgeButtonDef;\n    return this;\n  }\n\n  override _addButtons(dialog: Dialog): void {\n\n    this._addButton(\n      dialog,\n      { ...config.dialog.alertDefaults.acknowledgeButton, ...this.#acknowledgeButtonDef },\n      () => dialog.close());\n  }\n}\n"]}

package/elevation/elevation.d.ts

@@ -1,11 +1,11 @@
 import { LitElement } from 'lit';
-export declare class UmElevation extends LitElement {
+export declare class Elevation extends LitElement {
     static styles: import("lit").CSSResult;
     connectedCallback(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-elevation': UmElevation;
+        'u-elevation': Elevation;
     }
 }
 //# sourceMappingURL=elevation.d.ts.map

package/elevation/elevation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"elevation.d.ts","sourceRoot":"","sources":["../../src/elevation/elevation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAU;IAEvB,iBAAiB;CAI3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,WAAW,CAAC;KAC5B;CACF"}
+{"version":3,"file":"elevation.d.ts","sourceRoot":"","sources":["../../src/elevation/elevation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAAU;IAEvB,iBAAiB;CAI3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,SAAS,CAAC;KAC1B;CACF"}