@api-client/ui 0.5.5 → 0.5.6

package/build/src/md/date-picker/ui-date-picker-modal.js

@@ -0,0 +1,344 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { modalStyles } from './internals/DatePicker.styles.js';
+import { formatDate } from './internals/DatePickerUtils.js';
+import './internals/DatePickerCalendar.js';
+import '../../md/dialog/ui-dialog.js';
+import '../../md/button/ui-button.js';
+import '../../md/icon-button/ui-icon-button.js';
+import '../../md/icons/ui-icon.js';
+/**
+ * A modal date picker for selecting date ranges.
+ * Extends full-screen and is ideal for date range selection like flight bookings.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <ui-date-picker-modal
+ *   .open=${true}
+ *   .selectedRange=${{ start: new Date(), end: null }}
+ *   @change=${this.handleRangeChange}
+ *   @close=${this.handleClose}
+ * ></ui-date-picker-modal>
+ * ```
+ *
+ * ### Custom labels
+ * ```html
+ * <ui-date-picker-modal
+ *   title="Select travel dates"
+ *   startLabel="Check-in"
+ *   endLabel="Check-out"
+ * ></ui-date-picker-modal>
+ * ```
+ */
+let UiDatePickerModal = (() => {
+    let _classDecorators = [customElement('ui-date-picker-modal')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LitElement;
+    let _open_decorators;
+    let _open_initializers = [];
+    let _open_extraInitializers = [];
+    let _title_decorators;
+    let _title_initializers = [];
+    let _title_extraInitializers = [];
+    let _startLabel_decorators;
+    let _startLabel_initializers = [];
+    let _startLabel_extraInitializers = [];
+    let _endLabel_decorators;
+    let _endLabel_initializers = [];
+    let _endLabel_extraInitializers = [];
+    let _selectedRange_decorators;
+    let _selectedRange_initializers = [];
+    let _selectedRange_extraInitializers = [];
+    let _minDate_decorators;
+    let _minDate_initializers = [];
+    let _minDate_extraInitializers = [];
+    let _maxDate_decorators;
+    let _maxDate_initializers = [];
+    let _maxDate_extraInitializers = [];
+    let _disabledDates_decorators;
+    let _disabledDates_initializers = [];
+    let _disabledDates_extraInitializers = [];
+    let _locale_decorators;
+    let _locale_initializers = [];
+    let _locale_extraInitializers = [];
+    let _showModeToggle_decorators;
+    let _showModeToggle_initializers = [];
+    let _showModeToggle_extraInitializers = [];
+    let __isInputMode_decorators;
+    let __isInputMode_initializers = [];
+    let __isInputMode_extraInitializers = [];
+    var UiDatePickerModal = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _open_decorators = [property({ type: Boolean })];
+            _title_decorators = [property({ type: String })];
+            _startLabel_decorators = [property({ type: String })];
+            _endLabel_decorators = [property({ type: String })];
+            _selectedRange_decorators = [property({ type: Object })];
+            _minDate_decorators = [property({ type: Object })];
+            _maxDate_decorators = [property({ type: Object })];
+            _disabledDates_decorators = [property({ type: Array })];
+            _locale_decorators = [property({ type: String })];
+            _showModeToggle_decorators = [property({ type: Boolean })];
+            __isInputMode_decorators = [state()];
+            __esDecorate(this, null, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
+            __esDecorate(this, null, _title_decorators, { kind: "accessor", name: "title", static: false, private: false, access: { has: obj => "title" in obj, get: obj => obj.title, set: (obj, value) => { obj.title = value; } }, metadata: _metadata }, _title_initializers, _title_extraInitializers);
+            __esDecorate(this, null, _startLabel_decorators, { kind: "accessor", name: "startLabel", static: false, private: false, access: { has: obj => "startLabel" in obj, get: obj => obj.startLabel, set: (obj, value) => { obj.startLabel = value; } }, metadata: _metadata }, _startLabel_initializers, _startLabel_extraInitializers);
+            __esDecorate(this, null, _endLabel_decorators, { kind: "accessor", name: "endLabel", static: false, private: false, access: { has: obj => "endLabel" in obj, get: obj => obj.endLabel, set: (obj, value) => { obj.endLabel = value; } }, metadata: _metadata }, _endLabel_initializers, _endLabel_extraInitializers);
+            __esDecorate(this, null, _selectedRange_decorators, { kind: "accessor", name: "selectedRange", static: false, private: false, access: { has: obj => "selectedRange" in obj, get: obj => obj.selectedRange, set: (obj, value) => { obj.selectedRange = value; } }, metadata: _metadata }, _selectedRange_initializers, _selectedRange_extraInitializers);
+            __esDecorate(this, null, _minDate_decorators, { kind: "accessor", name: "minDate", static: false, private: false, access: { has: obj => "minDate" in obj, get: obj => obj.minDate, set: (obj, value) => { obj.minDate = value; } }, metadata: _metadata }, _minDate_initializers, _minDate_extraInitializers);
+            __esDecorate(this, null, _maxDate_decorators, { kind: "accessor", name: "maxDate", static: false, private: false, access: { has: obj => "maxDate" in obj, get: obj => obj.maxDate, set: (obj, value) => { obj.maxDate = value; } }, metadata: _metadata }, _maxDate_initializers, _maxDate_extraInitializers);
+            __esDecorate(this, null, _disabledDates_decorators, { kind: "accessor", name: "disabledDates", static: false, private: false, access: { has: obj => "disabledDates" in obj, get: obj => obj.disabledDates, set: (obj, value) => { obj.disabledDates = value; } }, metadata: _metadata }, _disabledDates_initializers, _disabledDates_extraInitializers);
+            __esDecorate(this, null, _locale_decorators, { kind: "accessor", name: "locale", static: false, private: false, access: { has: obj => "locale" in obj, get: obj => obj.locale, set: (obj, value) => { obj.locale = value; } }, metadata: _metadata }, _locale_initializers, _locale_extraInitializers);
+            __esDecorate(this, null, _showModeToggle_decorators, { kind: "accessor", name: "showModeToggle", static: false, private: false, access: { has: obj => "showModeToggle" in obj, get: obj => obj.showModeToggle, set: (obj, value) => { obj.showModeToggle = value; } }, metadata: _metadata }, _showModeToggle_initializers, _showModeToggle_extraInitializers);
+            __esDecorate(this, null, __isInputMode_decorators, { kind: "accessor", name: "_isInputMode", static: false, private: false, access: { has: obj => "_isInputMode" in obj, get: obj => obj._isInputMode, set: (obj, value) => { obj._isInputMode = value; } }, metadata: _metadata }, __isInputMode_initializers, __isInputMode_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiDatePickerModal = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static styles = modalStyles;
+        #open_accessor_storage = __runInitializers(this, _open_initializers, false
+        /**
+         * The modal title
+         */
+        );
+        /**
+         * Whether the modal is open
+         */
+        get open() { return this.#open_accessor_storage; }
+        set open(value) { this.#open_accessor_storage = value; }
+        #title_accessor_storage = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _title_initializers, 'Select dates'
+        /**
+         * Label for the start date
+         */
+        ));
+        /**
+         * The modal title
+         */
+        get title() { return this.#title_accessor_storage; }
+        set title(value) { this.#title_accessor_storage = value; }
+        #startLabel_accessor_storage = (__runInitializers(this, _title_extraInitializers), __runInitializers(this, _startLabel_initializers, 'Start date'
+        /**
+         * Label for the end date
+         */
+        ));
+        /**
+         * Label for the start date
+         */
+        get startLabel() { return this.#startLabel_accessor_storage; }
+        set startLabel(value) { this.#startLabel_accessor_storage = value; }
+        #endLabel_accessor_storage = (__runInitializers(this, _startLabel_extraInitializers), __runInitializers(this, _endLabel_initializers, 'End date'
+        /**
+         * The selected date range
+         */
+        ));
+        /**
+         * Label for the end date
+         */
+        get endLabel() { return this.#endLabel_accessor_storage; }
+        set endLabel(value) { this.#endLabel_accessor_storage = value; }
+        #selectedRange_accessor_storage = (__runInitializers(this, _endLabel_extraInitializers), __runInitializers(this, _selectedRange_initializers, null
+        /**
+         * Minimum selectable date
+         */
+        ));
+        /**
+         * The selected date range
+         */
+        get selectedRange() { return this.#selectedRange_accessor_storage; }
+        set selectedRange(value) { this.#selectedRange_accessor_storage = value; }
+        #minDate_accessor_storage = (__runInitializers(this, _selectedRange_extraInitializers), __runInitializers(this, _minDate_initializers, undefined
+        /**
+         * Maximum selectable date
+         */
+        ));
+        /**
+         * Minimum selectable date
+         */
+        get minDate() { return this.#minDate_accessor_storage; }
+        set minDate(value) { this.#minDate_accessor_storage = value; }
+        #maxDate_accessor_storage = (__runInitializers(this, _minDate_extraInitializers), __runInitializers(this, _maxDate_initializers, undefined
+        /**
+         * Array of disabled dates
+         */
+        ));
+        /**
+         * Maximum selectable date
+         */
+        get maxDate() { return this.#maxDate_accessor_storage; }
+        set maxDate(value) { this.#maxDate_accessor_storage = value; }
+        #disabledDates_accessor_storage = (__runInitializers(this, _maxDate_extraInitializers), __runInitializers(this, _disabledDates_initializers, undefined
+        /**
+         * Locale for date formatting
+         */
+        ));
+        /**
+         * Array of disabled dates
+         */
+        get disabledDates() { return this.#disabledDates_accessor_storage; }
+        set disabledDates(value) { this.#disabledDates_accessor_storage = value; }
+        #locale_accessor_storage = (__runInitializers(this, _disabledDates_extraInitializers), __runInitializers(this, _locale_initializers, undefined
+        /**
+         * Whether to show edit/calendar toggle button
+         */
+        ));
+        /**
+         * Locale for date formatting
+         */
+        get locale() { return this.#locale_accessor_storage; }
+        set locale(value) { this.#locale_accessor_storage = value; }
+        #showModeToggle_accessor_storage = (__runInitializers(this, _locale_extraInitializers), __runInitializers(this, _showModeToggle_initializers, true));
+        /**
+         * Whether to show edit/calendar toggle button
+         */
+        get showModeToggle() { return this.#showModeToggle_accessor_storage; }
+        set showModeToggle(value) { this.#showModeToggle_accessor_storage = value; }
+        #_isInputMode_accessor_storage = (__runInitializers(this, _showModeToggle_extraInitializers), __runInitializers(this, __isInputMode_initializers, false));
+        get _isInputMode() { return this.#_isInputMode_accessor_storage; }
+        set _isInputMode(value) { this.#_isInputMode_accessor_storage = value; }
+        _handleRangeSelect(event) {
+            this.selectedRange = event.detail.range;
+            this._dispatchChangeEvent();
+        }
+        _handleCancel() {
+            this._dispatchCloseEvent(false);
+        }
+        _handleConfirm() {
+            this._dispatchCloseEvent(true);
+        }
+        _handleModeToggle() {
+            this._isInputMode = !this._isInputMode;
+        }
+        _dispatchChangeEvent() {
+            if (!this.selectedRange)
+                return;
+            const event = {
+                range: this.selectedRange,
+                formattedRange: {
+                    start: this.selectedRange.start ? formatDate(this.selectedRange.start, this.locale) : null,
+                    end: this.selectedRange.end ? formatDate(this.selectedRange.end, this.locale) : null,
+                },
+            };
+            this.dispatchEvent(new CustomEvent('date-range-change', {
+                detail: event,
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        _dispatchCloseEvent(confirmed) {
+            this.dispatchEvent(new CustomEvent('close', {
+                detail: {
+                    confirmed,
+                    range: confirmed ? this.selectedRange : null,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        _renderHeader() {
+            return html `
+      <div class="modal-header">
+        <h2 class="modal-title">${this.title}</h2>
+        <div style="display: flex; gap: 8px;">
+          ${this.showModeToggle
+                ? html `
+                <ui-icon-button
+                  @click=${this._handleModeToggle}
+                  aria-label=${this._isInputMode ? 'Show calendar' : 'Show date input'}
+                  title=${this._isInputMode ? 'Show calendar' : 'Show date input'}
+                >
+                  <ui-icon icon=${this._isInputMode ? 'calendarToday' : 'edit'}></ui-icon>
+                </ui-icon-button>
+              `
+                : ''}
+          <ui-icon-button @click=${this._handleCancel} aria-label="Close" title="Close">
+            <ui-icon icon="close"></ui-icon>
+          </ui-icon-button>
+        </div>
+      </div>
+    `;
+        }
+        _renderDateDisplay() {
+            const startDate = this.selectedRange?.start;
+            const endDate = this.selectedRange?.end;
+            return html `
+      <div class="date-range-display">
+        <div class="date-display">
+          <div class="date-label">${this.startLabel}</div>
+          <div class="date-value">${startDate ? formatDate(startDate, this.locale) : 'Select date'}</div>
+        </div>
+        <div class="date-separator">—</div>
+        <div class="date-display">
+          <div class="date-label">${this.endLabel}</div>
+          <div class="date-value">${endDate ? formatDate(endDate, this.locale) : 'Select date'}</div>
+        </div>
+      </div>
+    `;
+        }
+        _renderCalendar() {
+            const currentDate = this.selectedRange?.start || new Date();
+            return html `
+      <ui-date-picker-calendar
+        .year=${currentDate.getFullYear()}
+        .month=${currentDate.getMonth()}
+        .selectedRange=${this.selectedRange}
+        .rangeSelection=${true}
+        .minDate=${this.minDate}
+        .maxDate=${this.maxDate}
+        .disabledDates=${this.disabledDates}
+        .locale=${this.locale}
+        @date-range-select=${this._handleRangeSelect}
+      ></ui-date-picker-calendar>
+    `;
+        }
+        _renderInputMode() {
+            // For now, we'll show a placeholder for input mode
+            // This could be enhanced with actual date input fields
+            return html `
+      <div style="padding: 24px; text-align: center; color: var(--ui-color-on-surface-variant);">
+        <ui-icon icon="edit" style="font-size: 48px; margin-bottom: 16px;"></ui-icon>
+        <p>Manual date input mode</p>
+        <p>This feature can be enhanced with date input fields</p>
+      </div>
+    `;
+        }
+        _renderContent() {
+            return html `
+      <div class="modal-content">
+        ${this._renderDateDisplay()} ${this._isInputMode ? this._renderInputMode() : this._renderCalendar()}
+      </div>
+    `;
+        }
+        _renderActions() {
+            const hasValidRange = this.selectedRange?.start && this.selectedRange?.end;
+            return html `
+      <div class="modal-actions">
+        <ui-button color="text" @click=${this._handleCancel}>Cancel</ui-button>
+        <ui-button color="filled" @click=${this._handleConfirm} .disabled=${!hasValidRange}> Confirm </ui-button>
+      </div>
+    `;
+        }
+        render() {
+            return html `
+      <ui-dialog .open=${this.open} @close=${this._handleCancel}>
+        ${this._renderHeader()} ${this._renderContent()} ${this._renderActions()}
+      </ui-dialog>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, __isInputMode_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return UiDatePickerModal = _classThis;
+})();
+export { UiDatePickerModal };
+//# sourceMappingURL=ui-date-picker-modal.js.map

package/build/src/md/date-picker/ui-date-picker-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-date-picker-modal.js","sourceRoot":"","sources":["../../../../src/md/date-picker/ui-date-picker-modal.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { modalStyles } from './internals/DatePicker.styles.js'\nimport { DateRange, formatDate } from './internals/DatePickerUtils.js'\nimport type { DateRangeSelectEvent } from './internals/DatePickerCalendar.js'\nimport './internals/DatePickerCalendar.js'\nimport '../../md/dialog/ui-dialog.js'\nimport '../../md/button/ui-button.js'\nimport '../../md/icon-button/ui-icon-button.js'\nimport '../../md/icons/ui-icon.js'\n\nexport interface ModalDatePickerChangeEvent {\n  range: DateRange\n  formattedRange: {\n    start: string | null\n    end: string | null\n  }\n}\n\n/**\n * A modal date picker for selecting date ranges.\n * Extends full-screen and is ideal for date range selection like flight bookings.\n *\n * ## Usage\n *\n * ```html\n * <ui-date-picker-modal\n *   .open=${true}\n *   .selectedRange=${{ start: new Date(), end: null }}\n *   @change=${this.handleRangeChange}\n *   @close=${this.handleClose}\n * ></ui-date-picker-modal>\n * ```\n *\n * ### Custom labels\n * ```html\n * <ui-date-picker-modal\n *   title=\"Select travel dates\"\n *   startLabel=\"Check-in\"\n *   endLabel=\"Check-out\"\n * ></ui-date-picker-modal>\n * ```\n */\n@customElement('ui-date-picker-modal')\nexport class UiDatePickerModal extends LitElement {\n  static override styles = modalStyles\n\n  /**\n   * Whether the modal is open\n   */\n  @property({ type: Boolean }) accessor open = false\n\n  /**\n   * The modal title\n   */\n  @property({ type: String }) override accessor title = 'Select dates'\n\n  /**\n   * Label for the start date\n   */\n  @property({ type: String }) accessor startLabel = 'Start date'\n\n  /**\n   * Label for the end date\n   */\n  @property({ type: String }) accessor endLabel = 'End date'\n\n  /**\n   * The selected date range\n   */\n  @property({ type: Object }) accessor selectedRange: DateRange | null = null\n\n  /**\n   * Minimum selectable date\n   */\n  @property({ type: Object }) accessor minDate: Date | undefined = undefined\n\n  /**\n   * Maximum selectable date\n   */\n  @property({ type: Object }) accessor maxDate: Date | undefined = undefined\n\n  /**\n   * Array of disabled dates\n   */\n  @property({ type: Array }) accessor disabledDates: Date[] | undefined = undefined\n\n  /**\n   * Locale for date formatting\n   */\n  @property({ type: String }) accessor locale: string | undefined = undefined\n\n  /**\n   * Whether to show edit/calendar toggle button\n   */\n  @property({ type: Boolean }) accessor showModeToggle = true\n\n  @state() private accessor _isInputMode = false\n\n  private _handleRangeSelect(event: CustomEvent<DateRangeSelectEvent>): void {\n    this.selectedRange = event.detail.range\n    this._dispatchChangeEvent()\n  }\n\n  private _handleCancel(): void {\n    this._dispatchCloseEvent(false)\n  }\n\n  private _handleConfirm(): void {\n    this._dispatchCloseEvent(true)\n  }\n\n  private _handleModeToggle(): void {\n    this._isInputMode = !this._isInputMode\n  }\n\n  private _dispatchChangeEvent(): void {\n    if (!this.selectedRange) return\n\n    const event: ModalDatePickerChangeEvent = {\n      range: this.selectedRange,\n      formattedRange: {\n        start: this.selectedRange.start ? formatDate(this.selectedRange.start, this.locale) : null,\n        end: this.selectedRange.end ? formatDate(this.selectedRange.end, this.locale) : null,\n      },\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('date-range-change', {\n        detail: event,\n        bubbles: true,\n        composed: true,\n      })\n    )\n  }\n\n  private _dispatchCloseEvent(confirmed: boolean): void {\n    this.dispatchEvent(\n      new CustomEvent('close', {\n        detail: {\n          confirmed,\n          range: confirmed ? this.selectedRange : null,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    )\n  }\n\n  private _renderHeader(): TemplateResult {\n    return html`\n      <div class=\"modal-header\">\n        <h2 class=\"modal-title\">${this.title}</h2>\n        <div style=\"display: flex; gap: 8px;\">\n          ${this.showModeToggle\n            ? html`\n                <ui-icon-button\n                  @click=${this._handleModeToggle}\n                  aria-label=${this._isInputMode ? 'Show calendar' : 'Show date input'}\n                  title=${this._isInputMode ? 'Show calendar' : 'Show date input'}\n                >\n                  <ui-icon icon=${this._isInputMode ? 'calendarToday' : 'edit'}></ui-icon>\n                </ui-icon-button>\n              `\n            : ''}\n          <ui-icon-button @click=${this._handleCancel} aria-label=\"Close\" title=\"Close\">\n            <ui-icon icon=\"close\"></ui-icon>\n          </ui-icon-button>\n        </div>\n      </div>\n    `\n  }\n\n  private _renderDateDisplay(): TemplateResult {\n    const startDate = this.selectedRange?.start\n    const endDate = this.selectedRange?.end\n\n    return html`\n      <div class=\"date-range-display\">\n        <div class=\"date-display\">\n          <div class=\"date-label\">${this.startLabel}</div>\n          <div class=\"date-value\">${startDate ? formatDate(startDate, this.locale) : 'Select date'}</div>\n        </div>\n        <div class=\"date-separator\">—</div>\n        <div class=\"date-display\">\n          <div class=\"date-label\">${this.endLabel}</div>\n          <div class=\"date-value\">${endDate ? formatDate(endDate, this.locale) : 'Select date'}</div>\n        </div>\n      </div>\n    `\n  }\n\n  private _renderCalendar(): TemplateResult {\n    const currentDate = this.selectedRange?.start || new Date()\n\n    return html`\n      <ui-date-picker-calendar\n        .year=${currentDate.getFullYear()}\n        .month=${currentDate.getMonth()}\n        .selectedRange=${this.selectedRange}\n        .rangeSelection=${true}\n        .minDate=${this.minDate}\n        .maxDate=${this.maxDate}\n        .disabledDates=${this.disabledDates}\n        .locale=${this.locale}\n        @date-range-select=${this._handleRangeSelect}\n      ></ui-date-picker-calendar>\n    `\n  }\n\n  private _renderInputMode(): TemplateResult {\n    // For now, we'll show a placeholder for input mode\n    // This could be enhanced with actual date input fields\n    return html`\n      <div style=\"padding: 24px; text-align: center; color: var(--ui-color-on-surface-variant);\">\n        <ui-icon icon=\"edit\" style=\"font-size: 48px; margin-bottom: 16px;\"></ui-icon>\n        <p>Manual date input mode</p>\n        <p>This feature can be enhanced with date input fields</p>\n      </div>\n    `\n  }\n\n  private _renderContent(): TemplateResult {\n    return html`\n      <div class=\"modal-content\">\n        ${this._renderDateDisplay()} ${this._isInputMode ? this._renderInputMode() : this._renderCalendar()}\n      </div>\n    `\n  }\n\n  private _renderActions(): TemplateResult {\n    const hasValidRange = this.selectedRange?.start && this.selectedRange?.end\n\n    return html`\n      <div class=\"modal-actions\">\n        <ui-button color=\"text\" @click=${this._handleCancel}>Cancel</ui-button>\n        <ui-button color=\"filled\" @click=${this._handleConfirm} .disabled=${!hasValidRange}> Confirm </ui-button>\n      </div>\n    `\n  }\n\n  override render(): TemplateResult {\n    return html`\n      <ui-dialog .open=${this.open} @close=${this._handleCancel}>\n        ${this._renderHeader()} ${this._renderContent()} ${this._renderActions()}\n      </ui-dialog>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-date-picker-modal': UiDatePickerModal\n  }\n\n  interface HTMLElementEventMap {\n    'date-range-change': CustomEvent<ModalDatePickerChangeEvent>\n    'close': CustomEvent<{\n      confirmed: boolean\n      range: DateRange | null\n    }>\n  }\n}\n"]}

package/build/src/md/dialog/internals/Dialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":";AAEA,wBAiKC"}
+{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":";AAEA,wBAkKC"}

package/build/src/md/dialog/internals/Dialog.styles.js

@@ -34,6 +34,7 @@ export default css `
     left: 50%;
     transform: translate(-50%, -50%);
     margin: 0;
+    z-index: 1000;
   }
 
   dialog.non-modal:open {

package/build/src/md/dialog/internals/Dialog.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.styles.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiKjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: contents;\n  }\n\n  dialog {\n    overflow: hidden;\n    /* Do not override the display value here. It will render the dialog even when hidden */\n\n    border: none;\n    border-radius: var(--md-sys-shape-corner-extra-large);\n    background-color: var(--md-sys-color-surface-container-high);\n    box-shadow: var(--md-sys-elevation-3);\n    color: var(--md-sys-color-on-surface-variant);\n    padding: 24px;\n\n    max-width: var(--ui-dialog-max-width, 90vw);\n    max-height: var(--ui-dialog-max-height, 90vh);\n    width: var(--ui-dialog-width, revert);\n    height: var(--ui-dialog-height, revert);\n  }\n\n  dialog:open {\n    animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* Positioning for non-modal dialogs */\n  dialog.non-modal {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    margin: 0;\n  }\n\n  dialog.non-modal:open {\n    /* Override the animation transform for non-modal dialogs to account for centering */\n    animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-non-modal-dialog;\n  }\n\n  dialog:open::backdrop {\n    animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-backdrop;\n  }\n\n  .container {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    overflow: hidden;\n  }\n\n  .icon {\n    display: none;\n  }\n\n  .icon.with-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 16px;\n  }\n\n  .icon ::slotted(*) {\n    color: var(--md-sys-color-secondary);\n    fill: var(--md-sys-color-secondary);\n    width: 24px;\n    height: 24px;\n  }\n\n  .icon.destructive ::slotted(*) {\n    color: var(--md-sys-color-error);\n    fill: var(--md-sys-color-error);\n  }\n\n  .title {\n    display: none;\n    color: var(--md-sys-color-on-surface);\n    font-family: var(--md-sys-typescale-headline-small-font);\n    font-weight: var(--md-sys-typescale-headline-small-weight);\n    font-size: var(--md-sys-typescale-headline-small-size);\n    letter-spacing: var(--md-sys-typescale-headline-small-tracking);\n    line-height: var(--md-sys-typescale-headline-small-height);\n    margin: 0;\n    padding: 0;\n    text-align: center;\n  }\n\n  .title.with-title {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 16px;\n  }\n\n  .content {\n    overflow: auto;\n    font-family: var(--md-sys-typescale-body-medium-font);\n    font-weight: var(--md-sys-typescale-body-medium-weight);\n    font-size: var(--md-sys-typescale-body-medium-size);\n    letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n    line-height: var(--md-sys-typescale-body-medium-height);\n  }\n\n  .buttons {\n    display: none;\n    display: flex;\n    align-items: center;\n    justify-content: end;\n  }\n\n  .buttons.with-buttons {\n    margin-top: 24px;\n  }\n\n  .buttons ::slotted(:not(:last-child)) {\n    margin-right: 12px;\n  }\n\n  .content ::slotted(*) {\n    background-color: var(--md-sys-color-surface-container-high);\n  }\n\n  @keyframes show-dialog {\n    from {\n      transform: translateY(-110%) scaleY(0);\n    }\n    to {\n      transform: translateY(0%) scaleY(1);\n    }\n  }\n\n  @keyframes show-non-modal-dialog {\n    from {\n      transform: translate(-50%, -50%) translateY(-110%) scaleY(0);\n    }\n    to {\n      transform: translate(-50%, -50%) translateY(0%) scaleY(1);\n    }\n  }\n\n  @keyframes show-backdrop {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  /* Destructive button styling for dangerous actions */\n  .internal-button.destructive {\n    --_background-color: var(--md-sys-color-error);\n    --_color: var(--md-sys-color-on-error);\n\n    /* Override ripple colors for better interaction feedback */\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-error);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-error);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-error);\n  }\n`\n"]}
+{"version":3,"file":"Dialog.styles.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkKjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: contents;\n  }\n\n  dialog {\n    overflow: hidden;\n    /* Do not override the display value here. It will render the dialog even when hidden */\n\n    border: none;\n    border-radius: var(--md-sys-shape-corner-extra-large);\n    background-color: var(--md-sys-color-surface-container-high);\n    box-shadow: var(--md-sys-elevation-3);\n    color: var(--md-sys-color-on-surface-variant);\n    padding: 24px;\n\n    max-width: var(--ui-dialog-max-width, 90vw);\n    max-height: var(--ui-dialog-max-height, 90vh);\n    width: var(--ui-dialog-width, revert);\n    height: var(--ui-dialog-height, revert);\n  }\n\n  dialog:open {\n    animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* Positioning for non-modal dialogs */\n  dialog.non-modal {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    margin: 0;\n    z-index: 1000;\n  }\n\n  dialog.non-modal:open {\n    /* Override the animation transform for non-modal dialogs to account for centering */\n    animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-non-modal-dialog;\n  }\n\n  dialog:open::backdrop {\n    animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-backdrop;\n  }\n\n  .container {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    overflow: hidden;\n  }\n\n  .icon {\n    display: none;\n  }\n\n  .icon.with-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 16px;\n  }\n\n  .icon ::slotted(*) {\n    color: var(--md-sys-color-secondary);\n    fill: var(--md-sys-color-secondary);\n    width: 24px;\n    height: 24px;\n  }\n\n  .icon.destructive ::slotted(*) {\n    color: var(--md-sys-color-error);\n    fill: var(--md-sys-color-error);\n  }\n\n  .title {\n    display: none;\n    color: var(--md-sys-color-on-surface);\n    font-family: var(--md-sys-typescale-headline-small-font);\n    font-weight: var(--md-sys-typescale-headline-small-weight);\n    font-size: var(--md-sys-typescale-headline-small-size);\n    letter-spacing: var(--md-sys-typescale-headline-small-tracking);\n    line-height: var(--md-sys-typescale-headline-small-height);\n    margin: 0;\n    padding: 0;\n    text-align: center;\n  }\n\n  .title.with-title {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 16px;\n  }\n\n  .content {\n    overflow: auto;\n    font-family: var(--md-sys-typescale-body-medium-font);\n    font-weight: var(--md-sys-typescale-body-medium-weight);\n    font-size: var(--md-sys-typescale-body-medium-size);\n    letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n    line-height: var(--md-sys-typescale-body-medium-height);\n  }\n\n  .buttons {\n    display: none;\n    display: flex;\n    align-items: center;\n    justify-content: end;\n  }\n\n  .buttons.with-buttons {\n    margin-top: 24px;\n  }\n\n  .buttons ::slotted(:not(:last-child)) {\n    margin-right: 12px;\n  }\n\n  .content ::slotted(*) {\n    background-color: var(--md-sys-color-surface-container-high);\n  }\n\n  @keyframes show-dialog {\n    from {\n      transform: translateY(-110%) scaleY(0);\n    }\n    to {\n      transform: translateY(0%) scaleY(1);\n    }\n  }\n\n  @keyframes show-non-modal-dialog {\n    from {\n      transform: translate(-50%, -50%) translateY(-110%) scaleY(0);\n    }\n    to {\n      transform: translate(-50%, -50%) translateY(0%) scaleY(1);\n    }\n  }\n\n  @keyframes show-backdrop {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  /* Destructive button styling for dangerous actions */\n  .internal-button.destructive {\n    --_background-color: var(--md-sys-color-error);\n    --_color: var(--md-sys-color-on-error);\n\n    /* Override ripple colors for better interaction feedback */\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-error);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-error);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-error);\n  }\n`\n"]}

package/demo/elements/har/har2.json

@@ -1,7 +1,7 @@
 {
   "log": {
     "creator": {
-      "name": "Advanced REST Client",
+      "name": "ABC",
       "version": "Unknown"
     },
     "version": "1.2",