@unofficialbox/box-open-elements 0.2.1 → 0.4.0

package/dist/components/forms/search-field.js

@@ -1,7 +1,8 @@
-import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
-import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDescriptionMarkup, formErrorMessageMarkup, } from "../../core/index.js";
+import { boeMotionDuration, boeMotionEasing, boeReducedMotionStyles, } from "../../foundations/motion/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-search-field";
+const searchSpinnerMarkup = '<span part="spinner" aria-hidden="true"></span>';
 const searchFieldStyles = `
   :host {
     display: block;
@@ -121,21 +122,47 @@ const searchFieldStyles = `
     cursor: not-allowed;
   }
 
+  [part="submit"] [part="spinner"] {
+    display: inline-block;
+    inline-size: 0.95rem;
+    block-size: 0.95rem;
+    border-radius: 999px;
+    border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
+    border-top-color: currentColor;
+    animation: boe-search-spin ${boeMotionDuration.spin} ${boeMotionEasing.linear} infinite;
+  }
+
+  @keyframes boe-search-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  ${boeReducedMotionStyles('[part="submit"] [part="spinner"]', "animation-duration: 1.6s;")}
+
   ${boeFormFieldErrorStyles}
+  ${boeFormFieldSupportStyles}
 `;
 export class BoxSearchFieldElement extends FormAssociatedElement {
     static get observedAttributes() {
         return [
-            ...FormAssociatedElement.formObservedAttributes,
+            ...FormAssociatedElement.fieldObservedAttributes,
             "disabled",
             "label",
             "placeholder",
+            "loading",
             "value",
         ];
     }
+    /** Shows a spinner in the submit button while a search runs asynchronously. */
+    get loading() {
+        return this.hasAttribute("loading");
+    }
+    set loading(value) {
+        this.toggleAttribute("loading", Boolean(value));
+    }
     valueInternal = "";
     inputEl;
     labelEl;
+    descriptionEl;
     submitEl;
     clearEl;
     errorEl;
@@ -206,6 +233,7 @@ export class BoxSearchFieldElement extends FormAssociatedElement {
       <style>${searchFieldStyles}</style>
       <label part="field">
         <span part="label"></span>
+        ${formDescriptionMarkup()}
         <div part="input-shell">
           <input type="search" part="input" />
           <button type="button" part="submit">Search</button>
@@ -215,6 +243,7 @@ export class BoxSearchFieldElement extends FormAssociatedElement {
       </label>
     `;
         this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.descriptionEl = this.shadowRoot.querySelector('[part="description"]');
         this.inputEl = this.shadowRoot.querySelector('[part="input"]');
         this.submitEl = this.shadowRoot.querySelector('[part="submit"]');
         this.clearEl = this.shadowRoot.querySelector('[part="clear"]');
@@ -241,27 +270,32 @@ export class BoxSearchFieldElement extends FormAssociatedElement {
                 return;
             }
             if (event.key === "Enter") {
-                this.dispatchEvent(new CustomEvent("search", {
-                    bubbles: true,
-                    composed: true,
-                    detail: { value: this.valueInternal },
-                }));
+                this.submitSearch();
             }
         });
         this.submitEl.addEventListener("click", () => {
             if (this.disabled) {
                 return;
             }
-            this.dispatchEvent(new CustomEvent("search", {
-                bubbles: true,
-                composed: true,
-                detail: { value: this.valueInternal },
-            }));
+            this.submitSearch();
         });
         this.clearEl.addEventListener("click", () => {
             this.clear();
         });
     }
+    /**
+     * Emit `search` and, when placed inside a form, request its submission — so a
+     * search field behaves like a native search input on Enter / submit-click.
+     */
+    submitSearch() {
+        this.dispatchEvent(new CustomEvent("search", {
+            bubbles: true,
+            composed: true,
+            detail: { value: this.valueInternal },
+        }));
+        const form = this.internals.form ?? this.closest("form");
+        form?.requestSubmit();
+    }
     update() {
         if (!this.inputEl || !this.labelEl || !this.submitEl || !this.clearEl || !this.errorEl) {
             return;
@@ -273,13 +307,26 @@ export class BoxSearchFieldElement extends FormAssociatedElement {
         }
         if (this.disabled) {
             this.inputEl.setAttribute("disabled", "");
-            this.submitEl.setAttribute("disabled", "");
         }
         else {
             this.inputEl.removeAttribute("disabled");
-            this.submitEl.removeAttribute("disabled");
+        }
+        // Loading: show a spinner in the submit button and disable it; else the
+        // submit label, disabled only when the whole field is disabled.
+        if (this.loading) {
+            this.submitEl.innerHTML = searchSpinnerMarkup;
+            this.submitEl.setAttribute("aria-label", "Searching");
+            this.submitEl.setAttribute("aria-busy", "true");
+            this.submitEl.disabled = true;
+        }
+        else {
+            this.submitEl.textContent = "Search";
+            this.submitEl.removeAttribute("aria-label");
+            this.submitEl.removeAttribute("aria-busy");
+            this.submitEl.disabled = this.disabled;
         }
         this.clearEl.disabled = this.disabled || this.valueInternal.length === 0;
+        this.applyFieldSupport(this.labelEl, this.inputEl, this.descriptionEl);
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }

package/dist/components/forms/select.d.ts

@@ -1,30 +1,41 @@
 import { FormAssociatedElement } from "../../core/index.js";
 import type { FormValue } from "../../core/index.js";
+type SelectOption = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    group?: string;
+};
 export declare class BoxSelectElement extends FormAssociatedElement {
     static get observedAttributes(): string[];
     private valueInternal;
+    private valuesInternal;
     private selectEl;
     private labelEl;
+    private descriptionEl;
     private errorEl;
+    /** Allow selecting several options (native multi-select list box). */
+    get multiple(): boolean;
+    set multiple(value: boolean);
     get value(): string;
     set value(nextValue: string);
+    /** Selected values (canonical when `multiple`; single-element otherwise). */
+    get values(): string[];
+    set values(next: string[]);
     get disabled(): boolean;
     set disabled(value: boolean);
     get label(): string;
     set label(value: string);
-    get options(): Array<{
-        label: string;
-        value: string;
-    }>;
-    set options(value: Array<{
-        label: string;
-        value: string;
-    }>);
+    get options(): SelectOption[];
+    set options(value: SelectOption[]);
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     protected getFormValue(): FormValue;
     protected restoreFormValue(value: FormValue): void;
     protected renderTemplate(): void;
     protected setupListeners(): void;
+    /** Build `<option>`/`<optgroup>` markup, grouping options that carry `group`. */
+    private optionsMarkup;
     protected update(): void;
 }
 export declare const defineBoxSelectElement: (tagName?: string) => typeof BoxSelectElement;
+export {};

package/dist/components/forms/select.js

@@ -1,4 +1,4 @@
-import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
+import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDataFromNamedValues, formDescriptionMarkup, formErrorMessageMarkup, stringValuesFromFormValue, } from "../../core/index.js";
 import { boeControl, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-select";
 const escapeHtml = (value) => value
@@ -63,32 +63,71 @@ const selectStyles = `
     cursor: not-allowed;
   }
 
+  /* Multi-select renders as a native list box: drop the single-select chevron
+     and fixed height, let it show several rows. */
+  [part="select"][multiple] {
+    min-height: auto;
+    padding: 4px;
+    background-image: none;
+    cursor: default;
+  }
+
+  [part="select"][multiple] option {
+    padding: 3px 6px;
+    border-radius: ${boeRadius.size};
+  }
+
   ${boeFormFieldErrorStyles}
+  ${boeFormFieldSupportStyles}
 `;
 export class BoxSelectElement extends FormAssociatedElement {
     static get observedAttributes() {
         return [
-            ...FormAssociatedElement.formObservedAttributes,
+            ...FormAssociatedElement.fieldObservedAttributes,
             "disabled",
             "label",
+            "multiple",
             "options",
             "value",
         ];
     }
     valueInternal = "";
+    valuesInternal = [];
     selectEl;
     labelEl;
+    descriptionEl;
     errorEl;
+    /** Allow selecting several options (native multi-select list box). */
+    get multiple() {
+        return this.hasAttribute("multiple");
+    }
+    set multiple(value) {
+        this.toggleAttribute("multiple", Boolean(value));
+    }
     get value() {
         return this.valueInternal;
     }
     set value(nextValue) {
         this.valueInternal = nextValue;
+        this.valuesInternal = nextValue ? [nextValue] : [];
         this.setAttribute("value", nextValue);
         if (this.isRendered) {
             this.update();
         }
     }
+    /** Selected values (canonical when `multiple`; single-element otherwise). */
+    get values() {
+        return [...this.valuesInternal];
+    }
+    set values(next) {
+        this.valuesInternal = Array.isArray(next) ? [...next] : [];
+        this.valueInternal = this.valuesInternal[0] ?? "";
+        this.setAttribute("value", this.valueInternal);
+        this.syncFormAssociation();
+        if (this.isRendered) {
+            this.update();
+        }
+    }
     get disabled() {
         return this.hasAttribute("disabled");
     }
@@ -125,16 +164,30 @@ export class BoxSelectElement extends FormAssociatedElement {
     attributeChangedCallback(name, oldValue, newValue) {
         if (name === "value") {
             this.valueInternal = this.getAttribute("value") ?? "";
+            if (!this.multiple) {
+                this.valuesInternal = this.valueInternal ? [this.valueInternal] : [];
+            }
         }
         super.attributeChangedCallback(name, oldValue, newValue);
     }
     getFormValue() {
+        if (this.multiple) {
+            return formDataFromNamedValues(this.name, this.valuesInternal);
+        }
         return this.valueInternal;
     }
     restoreFormValue(value) {
-        const next = typeof value === "string" ? value : "";
-        this.valueInternal = next;
-        this.setAttribute("value", next);
+        if (this.multiple) {
+            this.valuesInternal = stringValuesFromFormValue(value, this.name);
+            this.valueInternal = this.valuesInternal[0] ?? "";
+            this.setAttribute("value", this.valueInternal);
+        }
+        else {
+            const next = typeof value === "string" ? value : "";
+            this.valueInternal = next;
+            this.valuesInternal = next ? [next] : [];
+            this.setAttribute("value", next);
+        }
         if (this.isRendered) {
             this.update();
         }
@@ -147,44 +200,86 @@ export class BoxSelectElement extends FormAssociatedElement {
       <style>${selectStyles}</style>
       <label part="field">
         <span part="label"></span>
+        ${formDescriptionMarkup()}
         <select part="select"></select>
         ${formErrorMessageMarkup()}
       </label>
     `;
         this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.descriptionEl = this.shadowRoot.querySelector('[part="description"]');
         this.selectEl = this.shadowRoot.querySelector('[part="select"]');
         this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
     }
     setupListeners() {
         this.selectEl.addEventListener("change", event => {
-            const nextValue = event.currentTarget.value;
-            this.valueInternal = nextValue;
-            this.setAttribute("value", nextValue);
+            const select = event.currentTarget;
+            if (this.multiple) {
+                this.valuesInternal = Array.from(select.selectedOptions).map(option => option.value);
+                this.valueInternal = this.valuesInternal[0] ?? "";
+            }
+            else {
+                this.valueInternal = select.value;
+                this.valuesInternal = this.valueInternal ? [this.valueInternal] : [];
+            }
+            this.setAttribute("value", this.valueInternal);
             this.syncFormAssociation();
             this.dispatchEvent(new CustomEvent("value-changed", {
                 bubbles: true,
                 composed: true,
-                detail: { value: nextValue },
+                detail: this.multiple
+                    ? { value: this.valueInternal, values: this.values }
+                    : { value: this.valueInternal },
             }));
         });
     }
+    /** Build `<option>`/`<optgroup>` markup, grouping options that carry `group`. */
+    optionsMarkup() {
+        const renderOption = (option) => `<option value="${escapeHtml(option.value)}"${option.disabled ? " disabled" : ""}>${escapeHtml(option.label)}</option>`;
+        const options = this.options;
+        let markup = "";
+        let index = 0;
+        while (index < options.length) {
+            const group = options[index].group;
+            if (!group) {
+                markup += renderOption(options[index]);
+                index += 1;
+                continue;
+            }
+            // Consume the contiguous run sharing this group label into one optgroup.
+            let run = "";
+            while (index < options.length && options[index].group === group) {
+                run += renderOption(options[index]);
+                index += 1;
+            }
+            markup += `<optgroup label="${escapeHtml(group)}">${run}</optgroup>`;
+        }
+        return markup;
+    }
     update() {
         if (!this.selectEl || !this.labelEl || !this.errorEl) {
             return;
         }
         this.labelEl.textContent = this.label;
-        // Rebuild options (the list itself may change)
-        this.selectEl.innerHTML = this.options
-            .map(option => `<option value="${escapeHtml(option.value)}">${escapeHtml(option.label)}</option>`)
-            .join("");
-        // Patch selected value and disabled after rebuilding options
-        this.selectEl.value = this.valueInternal;
+        // Rebuild options (the list itself may change), grouping by `group`.
+        this.selectEl.multiple = this.multiple;
+        this.selectEl.innerHTML = this.optionsMarkup();
+        // Patch selected value(s) and disabled after rebuilding options.
+        if (this.multiple) {
+            const selected = new Set(this.valuesInternal);
+            Array.from(this.selectEl.options).forEach(option => {
+                option.selected = selected.has(option.value);
+            });
+        }
+        else {
+            this.selectEl.value = this.valueInternal;
+        }
         if (this.disabled) {
             this.selectEl.setAttribute("disabled", "");
         }
         else {
             this.selectEl.removeAttribute("disabled");
         }
+        this.applyFieldSupport(this.labelEl, this.selectEl, this.descriptionEl);
         this.applyInvalidState(this.selectEl, this.errorEl);
     }
 }

package/dist/components/forms/text-field.d.ts

@@ -5,7 +5,20 @@ export declare class BoxTextFieldElement extends FormAssociatedElement {
     private valueInternal;
     private inputEl;
     private labelEl;
+    private descriptionEl;
     private errorEl;
+    private controlEl;
+    private iconSlot;
+    private statusEl;
+    /** Input type passthrough (text/email/tel/url/password/search/number). */
+    get type(): string;
+    set type(value: string);
+    /** Shows a trailing spinner (e.g. while validating/looking up asynchronously). */
+    get loading(): boolean;
+    set loading(value: boolean);
+    /** Shows a trailing success check (explicit valid affirmation). */
+    get valid(): boolean;
+    set valid(value: boolean);
     get value(): string;
     set value(nextValue: string);
     get disabled(): boolean;
@@ -19,6 +32,7 @@ export declare class BoxTextFieldElement extends FormAssociatedElement {
     protected restoreFormValue(value: FormValue): void;
     protected renderTemplate(): void;
     protected setupListeners(): void;
+    private syncIconSlot;
     protected update(): void;
 }
 export declare const defineBoxTextFieldElement: (tagName?: string) => typeof BoxTextFieldElement;

package/dist/components/forms/text-field.js

@@ -1,6 +1,10 @@
-import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
+import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDescriptionMarkup, formErrorMessageMarkup, } from "../../core/index.js";
 import { boeControl, boeInputControlStyles, boeSpace } from "../../foundations/geometry/index.js";
+import { boeMotionDuration, boeMotionEasing, boeReducedMotionStyles, } from "../../foundations/motion/index.js";
 const DEFAULT_TAG_NAME = "box-text-field";
+const VALID_INPUT_TYPES = new Set(["text", "email", "tel", "url", "password", "search", "number"]);
+const spinnerMarkup = '<span part="spinner" aria-hidden="true"></span>';
+const validMarkup = '<svg part="valid-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M6.5 11L3 7.5l1-1 2.5 2.5L12 3.5l1 1z" fill="currentColor"/></svg>';
 /** Input chrome tracks BUE `@mixin box-inputs` (`src/styles/_inputs.scss`). */
 const textFieldStyles = `
   :host {
@@ -33,22 +37,124 @@ const textFieldStyles = `
     color: var(--boe-token-text-text-placeholder, #909090);
   }
 
+  /* Control wrapper holds the input plus optional leading icon and trailing
+     status. With no adornments it is layout-neutral (default renders unchanged). */
+  [part="control"] {
+    position: relative;
+    display: block;
+  }
+
+  [part="icon"] {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 0.6rem;
+    transform: translateY(-50%);
+    display: inline-flex;
+    align-items: center;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    pointer-events: none;
+  }
+
+  [part="icon"]:not(.has-content) {
+    display: none;
+  }
+
+  [part="icon"]::slotted(*) {
+    inline-size: 1rem;
+    block-size: 1rem;
+    display: block;
+  }
+
+  [part="control"][data-has-icon="true"] [part="input"] {
+    padding-inline-start: 2.1rem;
+  }
+
+  [part="status"] {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: 0.65rem;
+    transform: translateY(-50%);
+    display: none;
+    align-items: center;
+  }
+
+  [part="control"][data-status="loading"] [part="status"],
+  [part="control"][data-status="valid"] [part="status"] {
+    display: inline-flex;
+  }
+
+  [part="control"][data-status="loading"] [part="input"],
+  [part="control"][data-status="valid"] [part="input"] {
+    padding-inline-end: 2.2rem;
+  }
+
+  [part="spinner"] {
+    inline-size: 1rem;
+    block-size: 1rem;
+    border-radius: 999px;
+    border: 2px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 20%, transparent);
+    border-top-color: var(--boe-token-surface-surface-brand, #0061d5);
+    animation: boe-text-field-spin ${boeMotionDuration.spin} ${boeMotionEasing.linear} infinite;
+  }
+
+  @keyframes boe-text-field-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  ${boeReducedMotionStyles('[part="spinner"]', "animation-duration: 1.6s;")}
+
+  [part="valid-icon"] {
+    inline-size: 1.05rem;
+    block-size: 1.05rem;
+    color: var(--boe-token-surface-status-surface-success, #26c281);
+  }
+
   ${boeFormFieldErrorStyles}
+  ${boeFormFieldSupportStyles}
 `;
 export class BoxTextFieldElement extends FormAssociatedElement {
     static get observedAttributes() {
         return [
-            ...FormAssociatedElement.formObservedAttributes,
+            ...FormAssociatedElement.fieldObservedAttributes,
             "disabled",
             "label",
             "placeholder",
+            "type",
+            "loading",
+            "valid",
             "value",
         ];
     }
     valueInternal = "";
     inputEl;
     labelEl;
+    descriptionEl;
     errorEl;
+    controlEl;
+    iconSlot;
+    statusEl;
+    /** Input type passthrough (text/email/tel/url/password/search/number). */
+    get type() {
+        const value = this.getAttribute("type");
+        return value && VALID_INPUT_TYPES.has(value) ? value : "text";
+    }
+    set type(value) {
+        this.setAttribute("type", value);
+    }
+    /** Shows a trailing spinner (e.g. while validating/looking up asynchronously). */
+    get loading() {
+        return this.hasAttribute("loading");
+    }
+    set loading(value) {
+        this.toggleAttribute("loading", Boolean(value));
+    }
+    /** Shows a trailing success check (explicit valid affirmation). */
+    get valid() {
+        return this.hasAttribute("valid");
+    }
+    set valid(value) {
+        this.toggleAttribute("valid", Boolean(value));
+    }
     get value() {
         return this.valueInternal;
     }
@@ -102,15 +208,25 @@ export class BoxTextFieldElement extends FormAssociatedElement {
       <style>${textFieldStyles}</style>
       <label part="field">
         <span part="label"></span>
-        <input type="text" part="input" />
+        ${formDescriptionMarkup()}
+        <span part="control">
+          <slot name="icon" part="icon"></slot>
+          <input type="text" part="input" />
+          <span part="status" aria-hidden="true"></span>
+        </span>
         ${formErrorMessageMarkup()}
       </label>
     `;
         this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.descriptionEl = this.shadowRoot.querySelector('[part="description"]');
         this.inputEl = this.shadowRoot.querySelector('[part="input"]');
         this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
+        this.controlEl = this.shadowRoot.querySelector('[part="control"]');
+        this.iconSlot = this.shadowRoot.querySelector('slot[name="icon"]');
+        this.statusEl = this.shadowRoot.querySelector('[part="status"]');
     }
     setupListeners() {
+        this.iconSlot.addEventListener("slotchange", () => this.syncIconSlot());
         this.inputEl.addEventListener("input", event => {
             const nextValue = event.currentTarget.value;
             this.valueInternal = nextValue;
@@ -123,12 +239,35 @@ export class BoxTextFieldElement extends FormAssociatedElement {
             }));
         });
     }
+    syncIconSlot() {
+        if (!this.iconSlot || !this.controlEl) {
+            return;
+        }
+        const hasContent = this.iconSlot.assignedNodes({ flatten: true }).length > 0;
+        this.iconSlot.classList.toggle("has-content", hasContent);
+        this.controlEl.dataset.hasIcon = hasContent ? "true" : "false";
+    }
     update() {
         if (!this.inputEl || !this.labelEl || !this.errorEl) {
             return;
         }
         this.labelEl.textContent = this.label;
+        this.inputEl.type = this.type;
         this.inputEl.placeholder = this.placeholder;
+        this.syncIconSlot();
+        // Trailing status: loading spinner takes precedence over the valid check.
+        if (this.loading) {
+            this.controlEl.dataset.status = "loading";
+            this.statusEl.innerHTML = spinnerMarkup;
+        }
+        else if (this.valid) {
+            this.controlEl.dataset.status = "valid";
+            this.statusEl.innerHTML = validMarkup;
+        }
+        else {
+            this.controlEl.removeAttribute("data-status");
+            this.statusEl.innerHTML = "";
+        }
         if (this.shadowRoot?.activeElement !== this.inputEl) {
             this.inputEl.value = this.valueInternal;
         }
@@ -138,6 +277,8 @@ export class BoxTextFieldElement extends FormAssociatedElement {
         else {
             this.inputEl.removeAttribute("disabled");
         }
+        // After the label text is (re)set, since it clears the required mark.
+        this.applyFieldSupport(this.labelEl, this.inputEl, this.descriptionEl);
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }

package/dist/components/forms/time-field.d.ts

@@ -21,6 +21,17 @@ export declare class BoxTimeFieldElement extends FormAssociatedElement {
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     protected getFormValue(): FormValue;
     protected restoreFormValue(value: FormValue): void;
+    /**
+     * Parse a human time string in 24-hour (`13:30`) or 12-hour (`1:30 PM`,
+     * `1 pm`) form to canonical `HH:MM`. Returns `""` for empty input and `null`
+     * when it cannot be parsed.
+     */
+    static parseTime(raw: string): string | null;
+    /**
+     * Set the value from a human 12h/24h string. On success updates the value and
+     * returns true; on a parse failure emits `parse-error` and returns false.
+     */
+    setTimeString(value: string): boolean;
     private syncValue;
     protected renderTemplate(): void;
     protected setupListeners(): void;