@universal-material/web 3.7.2 → 3.9.0

package/datepicker/datepicker.d.ts

@@ -1,9 +1,60 @@
-import { LitElement } from 'lit';
-export declare class UmDatepicker extends LitElement {
+import { CSSResultGroup } from '@lit/reactive-element/css-tag';
+import { HTMLTemplateResult } from 'lit';
+import { NativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
+import { DatepickerFormat } from './format.js';
+import '../button/icon-button.js';
+import '../calendar/calendar.js';
+import '../menu/menu.js';
+import '../ripple/ripple.js';
+export declare class Datepicker extends NativeTextFieldWrapper {
+    #private;
+    static styles: CSSResultGroup;
+    /**
+     * The BCP 47 locale tag forwarded to the underlying calendar and used for
+     * non-editable display formatting.
+     * When `null`, the calendar falls back to the browser's `navigator.language`.
+     */
+    locale: string | null;
+    /**
+     * Format used when displaying the value while the field is not editable.
+     * Accepts the named presets `'short'`, `'medium'`, `'long'`, `'full'`,
+     * the literal `'iso'` (keeps the ISO `YYYY-MM-DD` value), or an
+     * `Intl.DateTimeFormatOptions` object for custom formatting.
+     * In editable mode the input uses the browser's native `type="date"` mask
+     * and ignores this property.
+     */
+    format: DatepickerFormat;
+    /**
+     * Whether the input accepts manually-typed dates. When `false` (default),
+     * the field is read-only and clicking anywhere opens the calendar popover.
+     * When `true`, the input uses native `type="date"` and accepts keyboard input;
+     * the calendar popover is opened via the trailing icon.
+     */
+    editable: boolean;
+    /**
+     * Whether the input is read-only. When set, manual typing is disabled even
+     * if `editable` is `true`; the calendar popover remains available.
+     */
+    readOnly: boolean;
+    /**
+     * The positioning strategy used by the calendar popover. Use `'fixed'`
+     * when the datepicker is rendered inside a clipped/scrollable container.
+     */
+    menuPositioning: 'relative' | 'fixed';
+    input: HTMLInputElement;
+    private _menu;
+    private _calendar;
+    private _trailingSlot;
+    protected renderControl(): HTMLTemplateResult;
+    protected renderDefaultTrailingIcon(): import("lit-html").TemplateResult<1> | import("lit-html").TemplateResult<2>;
+    protected renderAfterContent(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected _handleInput(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-datepicker': UmDatepicker;
+        'u-datepicker': Datepicker;
     }
 }
 //# sourceMappingURL=datepicker.d.ts.map

package/datepicker/datepicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../src/datepicker/datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGjC,qBACa,YAAa,SAAQ,UAAU;CAE3C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,YAAY,CAAC;KAC9B;CACF"}
+{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../src/datepicker/datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAQ,kBAAkB,EAAgB,MAAM,KAAK,CAAC;AAM7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8DAA8D,CAAC;AAKtG,OAAO,EAAE,gBAAgB,EAAiB,MAAM,aAAa,CAAC;AAE9D,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,iBAAiB,CAAC;AACzB,OAAO,qBAAqB,CAAC;AAI7B,qBACa,UAAW,SAAQ,sBAAsB;;IACpD,OAAgB,MAAM,EAAE,cAAc,CAAmD;IAEzF;;;;OAIG;IACS,MAAM,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEzC;;;;;;;OAOG;IACS,MAAM,EAAE,gBAAgB,CAAW;IAE/C;;;;;OAKG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyD,eAAe,EAAE,UAAU,GAAG,OAAO,CAAc;IAE/F,KAAK,EAAG,gBAAgB,CAAC;IAClB,OAAO,CAAC,KAAK,CAAQ;IACjB,OAAO,CAAC,SAAS,CAAY;IACzB,OAAO,CAAC,aAAa,CAAmB;cAEpD,aAAa,IAAI,kBAAkB;cAoCnC,yBAAyB;cAmBzB,kBAAkB;IAkB5B,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;cAKlB,YAAY,IAAI,IAAI;CAmDxC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

package/datepicker/datepicker.js

@@ -1,10 +1,206 @@
 import { __decorate } from "tslib";
-import { LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-let UmDatepicker = class UmDatepicker extends LitElement {
+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 { formatIsoDate } from './format.js';
+import '../button/icon-button.js';
+import '../calendar/calendar.js';
+import '../menu/menu.js';
+import '../ripple/ripple.js';
+const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+let Datepicker = class Datepicker extends NativeTextFieldWrapper {
+    constructor() {
+        super(...arguments);
+        /**
+         * The BCP 47 locale tag forwarded to the underlying 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 the named presets `'short'`, `'medium'`, `'long'`, `'full'`,
+         * the literal `'iso'` (keeps the ISO `YYYY-MM-DD` value), or an
+         * `Intl.DateTimeFormatOptions` object for custom formatting.
+         * In editable mode the input uses the browser's native `type="date"` mask
+         * and ignores this property.
+         */
+        this.format = 'short';
+        /**
+         * Whether the input accepts manually-typed dates. When `false` (default),
+         * the field is read-only and clicking anywhere opens the calendar popover.
+         * When `true`, the input uses native `type="date"` and accepts keyboard input;
+         * 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.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
+            : formatIsoDate(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=${this.editable ? 'date' : '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-calendar
+          .value=${this._value}
+          .locale=${this.locale}
+          @input=${this.#handleCalendarInput}></u-calendar>
+      </u-menu>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        void this.#attach();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._trailingSlot?.removeEventListener('click', this.#toggleMenu);
+    }
+    _handleInput() {
+        super._handleInput();
+        if (ISO_DATE.test(this._value)) {
+            this._calendar.value = this._value;
+        }
+        this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+    }
+    #handleKeyDown;
+    #handleCalendarInput;
+    #stopPropagation;
+    #toggleMenu;
+    async #attach() {
+        await this.updateComplete;
+        this._menu.anchorElement = this._container;
+        this._trailingSlot.addEventListener('click', this.#toggleMenu);
+    }
 };
-UmDatepicker = __decorate([
+__decorate([
+    property()
+], Datepicker.prototype, "locale", void 0);
+__decorate([
+    property()
+], Datepicker.prototype, "format", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Datepicker.prototype, "editable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Datepicker.prototype, "readOnly", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'menu-positioning' })
+], Datepicker.prototype, "menuPositioning", void 0);
+__decorate([
+    query('input')
+], Datepicker.prototype, "input", void 0);
+__decorate([
+    query('u-menu', true)
+], Datepicker.prototype, "_menu", void 0);
+__decorate([
+    query('u-calendar', true)
+], Datepicker.prototype, "_calendar", void 0);
+__decorate([
+    query('.trailing-icon', true)
+], Datepicker.prototype, "_trailingSlot", void 0);
+Datepicker = __decorate([
     customElement('u-datepicker')
-], UmDatepicker);
-export { UmDatepicker };
+], Datepicker);
+export { Datepicker };
 //# sourceMappingURL=datepicker.js.map

package/datepicker/datepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.js","sourceRoot":"","sources":["../../src/datepicker/datepicker.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;CAE3C,CAAA;AAFY,YAAY;IADxB,aAAa,CAAC,cAAc,CAAC;GACjB,YAAY,CAExB","sourcesContent":["import { LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('u-datepicker')\nexport class UmDatepicker extends LitElement {\n\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-datepicker': UmDatepicker;\n  }\n}\n"]}
+{"version":3,"file":"datepicker.js","sourceRoot":"","sources":["../../src/datepicker/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 { Calendar } from '../calendar/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, formatIsoDate } from './format.js';\n\nimport '../button/icon-button.js';\nimport '../calendar/calendar.js';\nimport '../menu/menu.js';\nimport '../ripple/ripple.js';\n\nconst ISO_DATE = /^\\d{4}-\\d{2}-\\d{2}$/;\n\n@customElement('u-datepicker')\nexport class Datepicker extends NativeTextFieldWrapper {\n  static override styles: CSSResultGroup = [TextFieldBase.styles, textFieldStyles, styles];\n\n  /**\n   * The BCP 47 locale tag forwarded to the underlying calendar and used for\n   * 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 the named presets `'short'`, `'medium'`, `'long'`, `'full'`,\n   * the literal `'iso'` (keeps the ISO `YYYY-MM-DD` value), or an\n   * `Intl.DateTimeFormatOptions` object for custom formatting.\n   * In editable mode the input uses the browser's native `type=\"date\"` mask\n   * and ignores this property.\n   */\n  @property() format: DatepickerFormat = 'short';\n\n  /**\n   * Whether the input accepts manually-typed dates. When `false` (default),\n   * the field is read-only and clicking anywhere opens the calendar popover.\n   * When `true`, the input uses native `type=\"date\"` and accepts keyboard input;\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-calendar', true) private _calendar!: Calendar;\n  @query('.trailing-icon', true) private _trailingSlot!: HTMLSlotElement;\n\n  protected override renderControl(): HTMLTemplateResult {\n    const displayValue = this.editable\n      ? this._value\n      : formatIsoDate(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=${this.editable ? 'date' : '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-calendar\n          .value=${this._value}\n          .locale=${this.locale}\n          @input=${this.#handleCalendarInput}></u-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.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 Calendar).value;\n    this.value = value;\n    this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\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-datepicker': Datepicker;\n  }\n}\n"]}

package/datepicker/datepicker.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.styles.d.ts","sourceRoot":"","sources":["../../src/datepicker/datepicker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAElB,CAAC"}
+{"version":3,"file":"datepicker.styles.d.ts","sourceRoot":"","sources":["../../src/datepicker/datepicker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA2BlB,CAAC"}

package/datepicker/datepicker.styles.js

@@ -1,5 +1,30 @@
 import { css } from 'lit';
 export const styles = css `
+  :host(:not([editable]):not([disabled])) .container {
+    cursor: pointer;
+  }
 
+  .trigger {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    border: none;
+    appearance: none;
+    cursor: inherit;
+  }
+
+  input[type=date]::-webkit-calendar-picker-indicator {
+    display: none;
+  }
+
+  input[type=date]::-webkit-inner-spin-button, input[type=date]::-webkit-clear-button {
+    display: none;
+  }
+
+  :host([empty]:not(:focus-within)) .container:not(.no-label) input[type=date]::-webkit-datetime-edit {
+    color: transparent;
+  }
 `;
 //# sourceMappingURL=datepicker.styles.js.map

package/datepicker/datepicker.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.styles.js","sourceRoot":"","sources":["../../src/datepicker/datepicker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;CAEzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n\n`;\n"]}
+{"version":3,"file":"datepicker.styles.js","sourceRoot":"","sources":["../../src/datepicker/datepicker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host(:not([editable]):not([disabled])) .container {\n    cursor: pointer;\n  }\n\n  .trigger {\n    position: absolute;\n    inset: 0;\n    margin: 0;\n    padding: 0;\n    background: transparent;\n    border: none;\n    appearance: none;\n    cursor: inherit;\n  }\n\n  input[type=date]::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n\n  input[type=date]::-webkit-inner-spin-button, input[type=date]::-webkit-clear-button {\n    display: none;\n  }\n\n  :host([empty]:not(:focus-within)) .container:not(.no-label) input[type=date]::-webkit-datetime-edit {\n    color: transparent;\n  }\n`;\n"]}

package/datepicker/format.d.ts

@@ -0,0 +1,19 @@
+export type DatepickerFormat = 'short' | 'medium' | 'long' | 'full' | 'iso' | Intl.DateTimeFormatOptions;
+/**
+ * Parses an ISO `YYYY-MM-DD` string into a `Date` at local midnight,
+ * sidestepping the UTC-vs-local parsing ambiguity of the `Date` constructor
+ * when given a string.
+ */
+export declare function parseIsoDate(iso: string): Date | null;
+/**
+ * Formats an ISO date string (`YYYY-MM-DD`) for display, following the
+ * datepicker `format` property. Non-ISO inputs are passed through
+ * unchanged so partially-typed values aren't mangled.
+ */
+export declare function formatIsoDate(value: string, format: DatepickerFormat, locale: string | null): string;
+/**
+ * Formats a range value (`YYYY-MM-DD - YYYY-MM-DD`) by formatting each end
+ * with `formatIsoDate` and rejoining them with the same separator.
+ */
+export declare function formatIsoDateRange(value: string, format: DatepickerFormat, locale: string | null): string;
+//# sourceMappingURL=format.d.ts.map

package/datepicker/format.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../src/datepicker/format.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GACxB,OAAO,GACP,QAAQ,GACR,MAAM,GACN,MAAM,GACN,KAAK,GACL,IAAI,CAAC,qBAAqB,CAAC;AAI/B;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAOrD;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,gBAAgB,EACxB,MAAM,EAAE,MAAM,GAAG,IAAI,GACpB,MAAM,CAgBR;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,gBAAgB,EACxB,MAAM,EAAE,MAAM,GAAG,IAAI,GACpB,MAAM,CAYR"}

package/datepicker/format.js

@@ -0,0 +1,47 @@
+const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+/**
+ * Parses an ISO `YYYY-MM-DD` string into a `Date` at local midnight,
+ * sidestepping the UTC-vs-local parsing ambiguity of the `Date` constructor
+ * when given a string.
+ */
+export function parseIsoDate(iso) {
+    if (!ISO_DATE.test(iso)) {
+        return null;
+    }
+    const [year, month, day] = iso.split('-').map(Number);
+    return new Date(year, month - 1, day);
+}
+/**
+ * Formats an ISO date string (`YYYY-MM-DD`) for display, following the
+ * datepicker `format` property. Non-ISO inputs are passed through
+ * unchanged so partially-typed values aren't mangled.
+ */
+export function formatIsoDate(value, format, locale) {
+    if (!value || format === 'iso') {
+        return value;
+    }
+    const date = parseIsoDate(value);
+    if (!date) {
+        return value;
+    }
+    const options = typeof format === 'string'
+        ? { dateStyle: format }
+        : format;
+    return new Intl.DateTimeFormat(locale ?? undefined, options).format(date);
+}
+/**
+ * Formats a range value (`YYYY-MM-DD - YYYY-MM-DD`) by formatting each end
+ * with `formatIsoDate` and rejoining them with the same separator.
+ */
+export function formatIsoDateRange(value, format, locale) {
+    if (!value || format === 'iso') {
+        return value;
+    }
+    const parts = value.split(' - ');
+    if (parts.length !== 2) {
+        return value;
+    }
+    const [start, end] = parts;
+    return `${formatIsoDate(start, format, locale)} - ${formatIsoDate(end, format, locale)}`;
+}
+//# sourceMappingURL=format.js.map

package/datepicker/format.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.js","sourceRoot":"","sources":["../../src/datepicker/format.ts"],"names":[],"mappings":"AAQA,MAAM,QAAQ,GAAG,qBAAqB,CAAC;AAEvC;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,GAAW;IACtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IACtD,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;AACxC,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,aAAa,CAC3B,KAAa,EACb,MAAwB,EACxB,MAAqB;IAErB,IAAI,CAAC,KAAK,IAAI,MAAM,KAAK,KAAK,EAAE,CAAC;QAC/B,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,IAAI,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACjC,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,OAAO,GACX,OAAO,MAAM,KAAK,QAAQ;QACxB,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE;QACvB,CAAC,CAAC,MAAM,CAAC;IAEb,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,IAAI,SAAS,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AAC5E,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,kBAAkB,CAChC,KAAa,EACb,MAAwB,EACxB,MAAqB;IAErB,IAAI,CAAC,KAAK,IAAI,MAAM,KAAK,KAAK,EAAE,CAAC;QAC/B,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC;IAC3B,OAAO,GAAG,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;AAC3F,CAAC","sourcesContent":["export type DatepickerFormat =\n  | 'short'\n  | 'medium'\n  | 'long'\n  | 'full'\n  | 'iso'\n  | Intl.DateTimeFormatOptions;\n\nconst ISO_DATE = /^\\d{4}-\\d{2}-\\d{2}$/;\n\n/**\n * Parses an ISO `YYYY-MM-DD` string into a `Date` at local midnight,\n * sidestepping the UTC-vs-local parsing ambiguity of the `Date` constructor\n * when given a string.\n */\nexport function parseIsoDate(iso: string): Date | null {\n  if (!ISO_DATE.test(iso)) {\n    return null;\n  }\n\n  const [year, month, day] = iso.split('-').map(Number);\n  return new Date(year, month - 1, day);\n}\n\n/**\n * Formats an ISO date string (`YYYY-MM-DD`) for display, following the\n * datepicker `format` property. Non-ISO inputs are passed through\n * unchanged so partially-typed values aren't mangled.\n */\nexport function formatIsoDate(\n  value: string,\n  format: DatepickerFormat,\n  locale: string | null,\n): string {\n  if (!value || format === 'iso') {\n    return value;\n  }\n\n  const date = parseIsoDate(value);\n  if (!date) {\n    return value;\n  }\n\n  const options: Intl.DateTimeFormatOptions =\n    typeof format === 'string'\n      ? { dateStyle: format }\n      : format;\n\n  return new Intl.DateTimeFormat(locale ?? undefined, options).format(date);\n}\n\n/**\n * Formats a range value (`YYYY-MM-DD - YYYY-MM-DD`) by formatting each end\n * with `formatIsoDate` and rejoining them with the same separator.\n */\nexport function formatIsoDateRange(\n  value: string,\n  format: DatepickerFormat,\n  locale: string | null,\n): string {\n  if (!value || format === 'iso') {\n    return value;\n  }\n\n  const parts = value.split(' - ');\n  if (parts.length !== 2) {\n    return value;\n  }\n\n  const [start, end] = parts;\n  return `${formatIsoDate(start, format, locale)} - ${formatIsoDate(end, format, locale)}`;\n}\n"]}

package/datepicker/range-datepicker.d.ts

@@ -0,0 +1,58 @@
+import { CSSResultGroup } from '@lit/reactive-element/css-tag';
+import { HTMLTemplateResult } from 'lit';
+import { NativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
+import { DatepickerFormat } from './format.js';
+import '../button/icon-button.js';
+import '../calendar/range-calendar.js';
+import '../menu/menu.js';
+import '../ripple/ripple.js';
+export declare class RangeDatepicker extends NativeTextFieldWrapper {
+    #private;
+    static styles: CSSResultGroup;
+    /**
+     * 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`.
+     */
+    locale: string | 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 ` - `.
+     */
+    format: DatepickerFormat;
+    /**
+     * 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.
+     */
+    editable: boolean;
+    /**
+     * Whether the input is read-only. When set, manual typing is disabled even
+     * if `editable` is `true`; the calendar popover remains available.
+     */
+    readOnly: boolean;
+    /**
+     * The positioning strategy used by the calendar popover. Use `'fixed'`
+     * when the datepicker is rendered inside a clipped/scrollable container.
+     */
+    menuPositioning: 'relative' | 'fixed';
+    input: HTMLInputElement;
+    private _menu;
+    private _calendar;
+    private _trailingSlot;
+    protected renderControl(): HTMLTemplateResult;
+    protected renderDefaultTrailingIcon(): import("lit-html").TemplateResult<1> | import("lit-html").TemplateResult<2>;
+    protected renderAfterContent(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected _handleInput(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-range-datepicker': RangeDatepicker;
+    }
+}
+//# sourceMappingURL=range-datepicker.d.ts.map

package/datepicker/range-datepicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-datepicker.d.ts","sourceRoot":"","sources":["../../src/datepicker/range-datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAQ,kBAAkB,EAAgB,MAAM,KAAK,CAAC;AAM7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8DAA8D,CAAC;AAKtG,OAAO,EAAE,gBAAgB,EAAsB,MAAM,aAAa,CAAC;AAEnE,OAAO,0BAA0B,CAAC;AAClC,OAAO,+BAA+B,CAAC;AACvC,OAAO,iBAAiB,CAAC;AACzB,OAAO,qBAAqB,CAAC;AAI7B,qBACa,eAAgB,SAAQ,sBAAsB;;IACzD,OAAgB,MAAM,EAAE,cAAc,CAAmD;IAEzF;;;;OAIG;IACS,MAAM,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEzC;;;;;OAKG;IACS,MAAM,EAAE,gBAAgB,CAAW;IAE/C;;;;;OAKG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyD,eAAe,EAAE,UAAU,GAAG,OAAO,CAAc;IAE/F,KAAK,EAAG,gBAAgB,CAAC;IAClB,OAAO,CAAC,KAAK,CAAQ;IACX,OAAO,CAAC,SAAS,CAAiB;IACpC,OAAO,CAAC,aAAa,CAAmB;cAEpD,aAAa,IAAI,kBAAkB;cAoCnC,yBAAyB;cAmBzB,kBAAkB;IAmB5B,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;cAKlB,YAAY,IAAI,IAAI;CA4DxC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,eAAe,CAAC;KACvC;CACF"}