@leavittsoftware/web 8.7.2 → 8.8.0

package/titanium/date-range-selector/types/range-label.d.ts

@@ -0,0 +1,5 @@
+import { DateRangeKey } from './date-range-key';
+import { DateRangeOption } from './date-range-option';
+export declare function rangeLabel(range: DateRangeKey, startDate: string | null, endDate: string | null, prefix?: string, ranges?: Map<DateRangeKey, DateRangeOption>): string;
+export declare function humanizeRange(rangeKey: string, startDate: string | null, endDate: string | null, ranges?: Map<string, DateRangeOption>): string;
+//# sourceMappingURL=range-label.d.ts.map

package/titanium/date-range-selector/types/range-label.js

@@ -0,0 +1,25 @@
+import dayjs from 'dayjs/esm';
+import { DateRanges } from './date-ranges';
+export function rangeLabel(range, startDate, endDate, prefix = 'Created', ranges = DateRanges) {
+    if (range !== 'custom') {
+        return `${prefix} ${ranges.get(range)?.name?.toLowerCase() ?? ''}`;
+    }
+    else {
+        if (startDate && endDate) {
+            return `${prefix} ${dayjs(startDate).format('MMM D, YYYY')} to ${dayjs(endDate).format('MMM D, YYYY')}`;
+        }
+        return endDate ? `${prefix} to ${dayjs(endDate).format('MMM D, YYYY')}` : `${prefix} from ${dayjs(startDate).format('MMM D, YYYY')}`;
+    }
+}
+export function humanizeRange(rangeKey, startDate, endDate, ranges = DateRanges) {
+    if (rangeKey !== 'custom') {
+        return `${ranges.get(rangeKey)?.name ?? ''}`;
+    }
+    else {
+        if (startDate && endDate) {
+            return `${dayjs(startDate).format('MMM D, YYYY')} to ${dayjs(endDate).format('MMM D, YYYY')}`;
+        }
+        return endDate ? `Ending ${dayjs(endDate).format('MMM D, YYYY')}` : `Starting ${dayjs(startDate).format('MMM D, YYYY')}`;
+    }
+}
+//# sourceMappingURL=range-label.js.map

package/titanium/date-range-selector/types/range-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-label.js","sourceRoot":"","sources":["range-label.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,WAAW,CAAC;AAE9B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,MAAM,UAAU,UAAU,CAAC,KAAmB,EAAE,SAAwB,EAAE,OAAsB,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,UAAU;IACvI,IAAI,KAAK,KAAK,QAAQ,EAAE,CAAC;QACvB,OAAO,GAAG,MAAM,IAAI,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,CAAC;IACrE,CAAC;SAAM,CAAC;QACN,IAAI,SAAS,IAAI,OAAO,EAAE,CAAC;YACzB,OAAO,GAAG,MAAM,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,CAAC;QAC1G,CAAC;QACD,OAAO,OAAO,CAAC,CAAC,CAAC,GAAG,MAAM,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,MAAM,SAAS,KAAK,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,CAAC;IACvI,CAAC;AACH,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,QAAgB,EAAE,SAAwB,EAAE,OAAsB,EAAE,SAAuC,UAAU;IACjJ,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;QAC1B,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,IAAI,IAAI,EAAE,EAAE,CAAC;IAC/C,CAAC;SAAM,CAAC;QACN,IAAI,SAAS,IAAI,OAAO,EAAE,CAAC;YACzB,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,CAAC;QAChG,CAAC;QACD,OAAO,OAAO,CAAC,CAAC,CAAC,UAAU,KAAK,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,KAAK,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,CAAC;IAC3H,CAAC;AACH,CAAC"}

package/titanium/drawer/drawer.d.ts

@@ -0,0 +1,54 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * Titanium drawer - a minimalist fly-out style drawer based on a native dialog
+ *
+ * @element titanium-drawer
+ * @slot - Main drawer content slot
+ * @csspart dialog - internal native dialog element
+ * @cssprop {Color} [--md-sys-color-outline-variant] Color of left border when open
+ * @cssprop {Color} [--md-sys-color-on-background] Color of slotted h3 and h4
+ */
+export declare class TitaniumDrawer extends LitElement {
+    #private;
+    private accessor dialog;
+    /**
+     * Set the position of content fixed when menu is closed. Only takes effect if always-show-content is set.
+     */
+    accessor fixed: boolean;
+    /**
+     * Show the slotted content regardless if the menu is open or closed
+     * @deprecated use mode instead
+     */
+    accessor alwayShowContent: boolean;
+    /**
+     * Reverse the direction of the drawer opening and closing animations
+     */
+    accessor direction: 'ltr' | 'rtl';
+    private accessor hasHeader;
+    private accessor hasFooter;
+    private accessor keepOpenWhenGoingToFlyover;
+    accessor mode: 'inline' | 'flyover' | null;
+    accessor isOpen: boolean;
+    private readonly headerElements;
+    private readonly footerElements;
+    updated(changedProps: PropertyValues<this>): Promise<void>;
+    firstUpdated(): Promise<void>;
+    static animationsComplete(element: HTMLElement): Promise<PromiseSettledResult<Animation>[] | undefined>;
+    /**
+     *  Opens drawer
+     */
+    open(): void;
+    /**
+     *  Closes drawer
+     */
+    close(): Promise<void>;
+    toggle(): void;
+    /**
+     *  Closes drawer without animations
+     */
+    closeQuick(): void;
+    protected setBodyOverflow(value: string): void;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=drawer.d.ts.map

package/titanium/drawer/drawer.js

@@ -0,0 +1,431 @@
+var TitaniumDrawer_1;
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';
+import { redispatchEvent } from '@material/web/internal/events/redispatch-event';
+/**
+ * Titanium drawer - a minimalist fly-out style drawer based on a native dialog
+ *
+ * @element titanium-drawer
+ * @slot - Main drawer content slot
+ * @csspart dialog - internal native dialog element
+ * @cssprop {Color} [--md-sys-color-outline-variant] Color of left border when open
+ * @cssprop {Color} [--md-sys-color-on-background] Color of slotted h3 and h4
+ */
+let TitaniumDrawer = class TitaniumDrawer extends LitElement {
+    static { TitaniumDrawer_1 = this; }
+    #dialog_accessor_storage;
+    get dialog() { return this.#dialog_accessor_storage; }
+    set dialog(value) { this.#dialog_accessor_storage = value; }
+    #fixed_accessor_storage = false;
+    /**
+     * Set the position of content fixed when menu is closed. Only takes effect if always-show-content is set.
+     */
+    get fixed() { return this.#fixed_accessor_storage; }
+    set fixed(value) { this.#fixed_accessor_storage = value; }
+    #alwayShowContent_accessor_storage = false;
+    /**
+     * Show the slotted content regardless if the menu is open or closed
+     * @deprecated use mode instead
+     */
+    get alwayShowContent() { return this.#alwayShowContent_accessor_storage; }
+    set alwayShowContent(value) { this.#alwayShowContent_accessor_storage = value; }
+    #direction_accessor_storage = 'ltr';
+    /**
+     * Reverse the direction of the drawer opening and closing animations
+     */
+    get direction() { return this.#direction_accessor_storage; }
+    set direction(value) { this.#direction_accessor_storage = value; }
+    #hasHeader_accessor_storage = false;
+    get hasHeader() { return this.#hasHeader_accessor_storage; }
+    set hasHeader(value) { this.#hasHeader_accessor_storage = value; }
+    #hasFooter_accessor_storage = false;
+    get hasFooter() { return this.#hasFooter_accessor_storage; }
+    set hasFooter(value) { this.#hasFooter_accessor_storage = value; }
+    #keepOpenWhenGoingToFlyover_accessor_storage = false;
+    get keepOpenWhenGoingToFlyover() { return this.#keepOpenWhenGoingToFlyover_accessor_storage; }
+    set keepOpenWhenGoingToFlyover(value) { this.#keepOpenWhenGoingToFlyover_accessor_storage = value; }
+    #mode_accessor_storage;
+    get mode() { return this.#mode_accessor_storage; }
+    set mode(value) { this.#mode_accessor_storage = value; }
+    #isOpen_accessor_storage = false;
+    get isOpen() { return this.#isOpen_accessor_storage; } //read only
+    set isOpen(value) { this.#isOpen_accessor_storage = value; }
+    async updated(changedProps) {
+        if (changedProps.has('mode')) {
+            if (this.mode === 'inline') {
+                if (this.isOpen) {
+                    //drawer was already open in inline mode, so we need to keep it open
+                    this.alwayShowContent = true;
+                }
+                //close the flyover drawer, we are inline
+                this.dialog?.close();
+            }
+            if (this.mode === 'flyover') {
+                if (this.isOpen) {
+                    if (this.keepOpenWhenGoingToFlyover) {
+                        //we are now in flyover mode, so we need to open the drawer if it was open
+                        this.dialog?.showModal();
+                        this.dialog?.removeAttribute('hide');
+                        this.setBodyOverflow('hidden');
+                    }
+                    else {
+                        this.#setOpen(false);
+                    }
+                }
+                //we are now in flyover mode, we need to hide the inline content
+                this.alwayShowContent = false;
+            }
+        }
+    }
+    #setOpen(isOpen) {
+        this.isOpen = isOpen;
+        this.dispatchEvent(new Event('open-change'));
+    }
+    async firstUpdated() {
+        let touchstartX = 0;
+        let touchendX = 0;
+        this.addEventListener('touchstart', (e) => {
+            touchstartX = e.changedTouches[0].screenX;
+        });
+        this.addEventListener('touchend', (e) => {
+            touchendX = e.changedTouches[0].screenX;
+            if (touchstartX - touchendX > 50) {
+                this.close();
+            }
+        });
+        this.dialog?.addEventListener('click', (e) => {
+            if (e.target instanceof Element && e.target?.nodeName === 'DIALOG') {
+                this.close();
+            }
+        });
+        this.dialog?.addEventListener('cancel', (event) => {
+            event.preventDefault();
+            this.close();
+        });
+        window.addEventListener('popstate', () => this.dialog?.close(), false);
+        // prevent page load @keyframes playing
+        await TitaniumDrawer_1.animationsComplete(this.dialog);
+        await TitaniumDrawer_1.animationsComplete(this.dialog);
+        this.dialog?.removeAttribute('loading');
+    }
+    static async animationsComplete(element) {
+        if (!element)
+            return;
+        return await Promise.allSettled(element.getAnimations().map((animation) => animation.finished));
+    }
+    /**
+     *  Opens drawer
+     */
+    open() {
+        if (this.mode === 'inline') {
+            this.#setOpen(true);
+            this.alwayShowContent = true;
+        }
+        else {
+            this.dialog?.showModal();
+            this.dialog?.removeAttribute('hide');
+            this.setBodyOverflow('hidden');
+        }
+    }
+    /**
+     *  Closes drawer
+     */
+    async close() {
+        if (this.mode === 'inline') {
+            this.#setOpen(false);
+            this.alwayShowContent = false;
+        }
+        else {
+            this.dialog?.setAttribute('hide', '');
+            await TitaniumDrawer_1.animationsComplete(this.dialog);
+            this.dialog?.close();
+            this.dialog?.removeAttribute('hide');
+        }
+    }
+    toggle() {
+        if (this.isOpen) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    /**
+     *  Closes drawer without animations
+     */
+    closeQuick() {
+        if (this.mode === 'inline') {
+            this.#setOpen(false);
+            this.alwayShowContent = false;
+        }
+        else {
+            this.dialog?.close();
+        }
+    }
+    setBodyOverflow(value) {
+        const htmlNode = document.querySelector('html');
+        if (htmlNode) {
+            htmlNode.style.overflow = value;
+        }
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+    }
+
+    dialog {
+      background-color: var(--titanium-drawer-background-color, var(--md-sys-color-background));
+      color: var(--titanium-drawer-color, var(--md-sys-color-on-background));
+      box-sizing: border-box;
+
+      grid:
+        'content' 1fr
+        'footer' auto;
+    }
+
+    :host([has-footer]) dialog {
+      grid:
+        'content' 1fr
+        'footer' auto;
+    }
+
+    :host([has-header]) dialog {
+      grid:
+        'header' auto
+        'content' 1fr;
+    }
+
+    :host([has-footer][has-header]) dialog {
+      grid:
+        'header' auto
+        'content' 1fr
+        'footer' auto;
+    }
+
+    dialog[loading] {
+      visibility: hidden;
+    }
+
+    dialog[open] {
+      display: grid;
+
+      inset-inline-end: inherit;
+      border: 0;
+      padding: 0;
+      margin: 0;
+
+      flex-direction: column;
+      width: var(--titanium-drawer-width, 300px);
+
+      min-height: 100dvh;
+      max-height: -webkit-fill-available;
+
+      border-right: 1px solid var(--md-sys-color-outline-variant);
+      padding-right: 8px;
+      animation: show 0.25s ease normal;
+    }
+
+    :host([direction='rtl']) dialog[open] {
+      animation: show-reverse 0.25s ease normal;
+    }
+
+    main {
+      grid-area: content;
+      display: grid;
+      align-content: start;
+      scrollbar-color: var(--md-sys-color-surface-container-highest) transparent;
+      scrollbar-width: thin;
+      overflow-y: auto;
+    }
+
+    header,
+    footer {
+      display: none;
+
+      background-color: var(--titanium-drawer-background-color, var(--md-sys-color-background));
+      color: var(--titanium-drawer-color, var(--md-sys-color-on-background));
+    }
+
+    :host([has-header]) header {
+      display: grid;
+      grid-area: header;
+    }
+
+    :host([has-footer]) footer {
+      grid-area: footer;
+
+      display: flex;
+      flex-direction: row;
+      padding: 8px 24px;
+      gap: 24px;
+    }
+
+    footer ::slotted(a) {
+      text-decoration: none;
+      color: var(--md-sys-color-on-surface-variant);
+      font-family: var(--titanium-styles-a-font-family, Metropolis, Roboto, Noto, sans-serif);
+      font-weight: 400;
+      font-size: 12px;
+      opacity: 0.8;
+    }
+
+    :host([always-show-content]) dialog:not([open]) {
+      position: sticky;
+      top: var(--titanium-drawer-full-height-padding, 48px);
+
+      display: grid;
+      inset-inline-start: initial;
+      inset-inline-end: inherit;
+      border: 0;
+      min-width: var(--titanium-drawer-width, 300px);
+      padding: 0;
+      margin: 0;
+      width: 100%;
+
+      height: calc(100dvh - var(--titanium-drawer-full-height-padding, 48px));
+
+      animation: show 0.25s ease normal;
+    }
+
+    :host([always-show-content][direction='rtl']) dialog:not([open]) {
+      animation: show-reverse 0.25s ease normal;
+    }
+
+    ::slotted(h3) {
+      font-family: 'Metropolis';
+      color: var(--md-sys-color-on-background);
+      margin: 0px;
+      font-weight: 400;
+      padding: 12px 0px 4px 16px;
+    }
+
+    ::slotted(h4) {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--md-sys-color-on-background);
+      font-weight: 400;
+      margin: 0px;
+      padding: 16px 16px 8px 16px;
+      min-height: 24px;
+    }
+
+    ::slotted(h4[sub]) {
+      font-weight: 300;
+      font-size: 14px;
+      padding: 4px 12px 2px 66px;
+      cursor: inherit;
+    }
+
+    dialog[hide] {
+      animation: close 0.25s ease normal;
+    }
+
+    dialog[hide][direction='rtl'] {
+      animation: close-reverse 0.25s ease normal;
+    }
+
+    @keyframes show {
+      from {
+        transform: translateX(-110%);
+      }
+      to {
+        transform: translateX(0%);
+      }
+    }
+
+    @keyframes close {
+      to {
+        transform: translateX(-110%);
+      }
+    }
+
+    @keyframes show-reverse {
+      from {
+        transform: translateX(110%);
+      }
+      to {
+        transform: translateX(0%);
+      }
+    }
+
+    @keyframes close-reverse {
+      to {
+        transform: translateX(110%);
+      }
+    }
+
+    dialog::backdrop {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    @supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
+      dialog::backdrop {
+        backdrop-filter: blur(3px);
+        /* Not supported yet */
+        transition: backdrop-filter 0.5s ease;
+      }
+    }
+  `; }
+    render() {
+        return html `<dialog
+      loading
+      @close=${(e) => {
+            this.setBodyOverflow('');
+            redispatchEvent(this, e);
+        }}
+      @toggle=${(e) => {
+            //isOpen state is fully managed by the drawer when not in flyover mode
+            if (this.mode === 'flyover') {
+                const isOpen = e.target?.hasAttribute('open');
+                this.#setOpen(isOpen);
+            }
+            redispatchEvent(this, e);
+        }}
+      part="dialog"
+    >
+      <header part="header"><slot name="header" @slotchange=${() => (this.hasHeader = this.headerElements.length > 0)}></slot></header>
+      <main part="main"><slot></slot></main>
+      <footer part="footer"><slot name="footer" @slotchange=${() => (this.hasFooter = this.footerElements.length > 0)}></slot></footer>
+    </dialog>`;
+    }
+};
+__decorate([
+    query('dialog')
+], TitaniumDrawer.prototype, "dialog", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TitaniumDrawer.prototype, "fixed", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'always-show-content' })
+], TitaniumDrawer.prototype, "alwayShowContent", null);
+__decorate([
+    property({ type: String, reflect: true })
+], TitaniumDrawer.prototype, "direction", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'has-header' })
+], TitaniumDrawer.prototype, "hasHeader", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'has-footer' })
+], TitaniumDrawer.prototype, "hasFooter", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'keep-open-when-going-to-flyover' })
+], TitaniumDrawer.prototype, "keepOpenWhenGoingToFlyover", null);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'mode' })
+], TitaniumDrawer.prototype, "mode", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'open' })
+], TitaniumDrawer.prototype, "isOpen", null);
+__decorate([
+    queryAssignedElements({ slot: 'header' })
+], TitaniumDrawer.prototype, "headerElements", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'footer' })
+], TitaniumDrawer.prototype, "footerElements", void 0);
+TitaniumDrawer = TitaniumDrawer_1 = __decorate([
+    customElement('titanium-drawer')
+], TitaniumDrawer);
+export { TitaniumDrawer };
+//# sourceMappingURL=drawer.js.map

package/titanium/drawer/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","sourceRoot":"","sources":["drawer.ts"],"names":[],"mappings":"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"}

package/titanium/duration-input/duration-input.d.ts

@@ -0,0 +1,31 @@
+import { PropertyValues } from 'lit';
+import duration from 'dayjs/esm/plugin/duration';
+import { ExtendableOutlinedTextField } from '../extendable-outlined-text-field/extendable-outlined-text-field';
+/**
+ * titanium-duration-input is a human readable duration textfield.
+ *
+ * @element titanium-duration-input
+ *
+ * @fires duration-change The duration can be accessed via event.target.duration
+ *
+ */
+export declare class TitaniumDurationInput extends ExtendableOutlinedTextField {
+    #private;
+    /**
+     *  Dayjs duration object. This is the main property you will interact with because the value
+     *  property of this component is actually the human readable string and not the duration you most likely
+     *  want to work with. When changed a duration-change event will be dispatched.
+     */
+    accessor duration: duration.Duration | null;
+    accessor autocomplete: string;
+    accessor spellcheck: boolean;
+    accessor placeholder: string;
+    accessor label: string;
+    firstUpdated(): void;
+    static styles: import("lit").CSSResult;
+    updated(changedProps: PropertyValues<this>): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    reset(): Promise<void>;
+}
+//# sourceMappingURL=duration-input.d.ts.map

package/titanium/duration-input/duration-input.js

@@ -0,0 +1,126 @@
+import { __decorate } from "tslib";
+import { property, customElement } from 'lit/decorators.js';
+import { css } from 'lit';
+import dayjs from 'dayjs/esm';
+import duration from 'dayjs/esm/plugin/duration';
+import { ExtendableOutlinedTextField } from '../extendable-outlined-text-field/extendable-outlined-text-field';
+import humanInterval, { durationToString } from './human-interval';
+dayjs.extend(duration);
+/**
+ * titanium-duration-input is a human readable duration textfield.
+ *
+ * @element titanium-duration-input
+ *
+ * @fires duration-change The duration can be accessed via event.target.duration
+ *
+ */
+let TitaniumDurationInput = class TitaniumDurationInput extends ExtendableOutlinedTextField {
+    #duration_accessor_storage = null;
+    /**
+     *  Dayjs duration object. This is the main property you will interact with because the value
+     *  property of this component is actually the human readable string and not the duration you most likely
+     *  want to work with. When changed a duration-change event will be dispatched.
+     */
+    get duration() { return this.#duration_accessor_storage; }
+    set duration(value) { this.#duration_accessor_storage = value; }
+    #autocomplete_accessor_storage = 'off';
+    get autocomplete() { return this.#autocomplete_accessor_storage; }
+    set autocomplete(value) { this.#autocomplete_accessor_storage = value; }
+    #spellcheck_accessor_storage = false;
+    get spellcheck() { return this.#spellcheck_accessor_storage; }
+    set spellcheck(value) { this.#spellcheck_accessor_storage = value; }
+    #placeholder_accessor_storage = '3 hours and 30 minutes';
+    get placeholder() { return this.#placeholder_accessor_storage; }
+    set placeholder(value) { this.#placeholder_accessor_storage = value; }
+    #label_accessor_storage = 'Duration';
+    get label() { return this.#label_accessor_storage; }
+    set label(value) { this.#label_accessor_storage = value; }
+    firstUpdated() {
+        this.addEventListener('change', () => {
+            this.#customReportValidity(this.input.value);
+            const dur = this.#textToInterval(this.input.value);
+            if (dur?.asMilliseconds() != this.duration?.asMilliseconds()) {
+                this.duration = dur;
+                this.dispatchEvent(new Event('duration-change'));
+            }
+        });
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+    }
+
+    md-outlined-text-field {
+      width: 100%;
+    }
+  `; }
+    updated(changedProps) {
+        if (changedProps.has('duration') && changedProps.get('duration') !== this.duration) {
+            if (this.duration) {
+                this.value = durationToString(this.duration);
+            }
+            else {
+                this.duration = null;
+                this.value = '';
+            }
+        }
+    }
+    checkValidity() {
+        return super.checkValidity() && this.#customCheckValidity(this.input.value);
+    }
+    reportValidity() {
+        this.#customReportValidity(this.input.value);
+        return super.reportValidity();
+    }
+    #customCheckValidity(input) {
+        if (input && !this.#textToInterval(input)) {
+            return false;
+        }
+        else {
+            return true;
+        }
+    }
+    #customReportValidity(input) {
+        if (!this.#customCheckValidity(input)) {
+            this.error = true;
+            this.errorText = 'Duration was entered in an incorrect format. Try "3 hours and 30 minutes"';
+        }
+        else {
+            this.error = false;
+            this.errorText = '';
+        }
+    }
+    #textToInterval(input) {
+        if (!input) {
+            return null;
+        }
+        const ms = humanInterval(input);
+        return isNaN(ms) ? null : dayjs.duration(ms, 'ms');
+    }
+    async reset() {
+        super.reset();
+        this.error = false;
+        this.errorText = '';
+        this.duration = null;
+    }
+};
+__decorate([
+    property({ type: Object })
+], TitaniumDurationInput.prototype, "duration", null);
+__decorate([
+    property({ reflect: true, type: String })
+], TitaniumDurationInput.prototype, "autocomplete", null);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], TitaniumDurationInput.prototype, "spellcheck", null);
+__decorate([
+    property({ reflect: true, type: String })
+], TitaniumDurationInput.prototype, "placeholder", null);
+__decorate([
+    property({ reflect: true, type: String })
+], TitaniumDurationInput.prototype, "label", null);
+TitaniumDurationInput = __decorate([
+    customElement('titanium-duration-input')
+], TitaniumDurationInput);
+export { TitaniumDurationInput };
+//# sourceMappingURL=duration-input.js.map