@xplortech/apollo-core 2.5.0 → 2.7.0

package/dist/collection/components/xpl-input/xpl-input-search/xpl-input-search.js

@@ -0,0 +1,485 @@
+import { Host, h, } from "@stencil/core";
+export class InputSearch {
+    constructor() {
+        this.hasAncestorForm = false;
+        this.ariaLabel = 'Search';
+        this.autocomplete = 'off';
+        this.disabled = false;
+        this.hasError = false;
+        this.hasVisibleLabel = false;
+        this.placeholder = 'Search';
+        this.readonly = false;
+        this.required = false;
+        this.shape = 'rounded';
+        this.value = '';
+        this.handleInnerFormSubmit = (event) => {
+            event.preventDefault();
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            this.emitSearchCommit(this.value.trim());
+        };
+        this.handleClear = (event) => {
+            var _a;
+            event.preventDefault();
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            this.value = '';
+            this.valueChange.emit('');
+            this.inputEvent.emit('');
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        this.handleInput = (event) => {
+            const target = event.target;
+            this.value = target.value;
+            this.valueChange.emit(target.value);
+            this.inputEvent.emit(target.value);
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key !== 'Enter')
+                return;
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            const input = event.target;
+            if (input.form) {
+                return;
+            }
+            event.preventDefault();
+            this.emitSearchCommit(this.value.trim());
+        };
+        this.handleFocus = (event) => {
+            this.focusEvent.emit(event);
+        };
+        this.handleBlur = (event) => {
+            this.blurEvent.emit(event);
+        };
+    }
+    connectedCallback() {
+        this.syncAncestorFormFlag();
+    }
+    async setFocus() {
+        var _a;
+        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    syncAncestorFormFlag() {
+        const root = this.el;
+        const next = Boolean(root && typeof root.closest === 'function' && root.closest('form'));
+        if (this.hasAncestorForm !== next) {
+            this.hasAncestorForm = next;
+        }
+    }
+    get hasValue() {
+        return this.value !== undefined && this.value.length > 0;
+    }
+    get resolvedInputAriaLabel() {
+        var _a;
+        if (this.hasVisibleLabel) {
+            return undefined;
+        }
+        return ((_a = this.ariaLabel) !== null && _a !== void 0 ? _a : '').trim() || 'Search';
+    }
+    get rendersInnerSearchForm() {
+        return !this.hasAncestorForm;
+    }
+    emitSearchCommit(detail) {
+        this.search.emit(detail);
+    }
+    renderShell() {
+        const shell = (h("div", { class: "xpl-input-search__shell" }, h("span", { class: "xpl-input-search__icon", "aria-hidden": "true" }, h("xpl-icon", { icon: "magnifier", size: 20 })), h("input", { "aria-describedby": this.hasError ? this.errorMessageId : undefined, "aria-invalid": this.hasError ? 'true' : undefined, "aria-label": this.resolvedInputAriaLabel, autocomplete: this.autocomplete, class: "xpl-input-search__input", disabled: this.disabled, id: this.inputId, name: this.name, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
+                this.inputEl = el !== null && el !== void 0 ? el : undefined;
+            }, required: this.required, role: "searchbox", type: "text", value: this.value }), h("button", { "aria-hidden": this.hasValue ? undefined : 'true', "aria-label": "Clear search", class: "xpl-input-search__clear", disabled: this.disabled || this.readonly, onClick: this.handleClear, type: "button" }, h("xpl-icon", { icon: "circle-xmark", size: 16 }))));
+        if (this.rendersInnerSearchForm) {
+            return (h("form", { class: "xpl-input-search__form", onSubmit: this.handleInnerFormSubmit }, shell));
+        }
+        return shell;
+    }
+    render() {
+        return (h(Host, { key: 'ac235500df2d6958d9070535f922a018bce14906', class: {
+                'xpl-input-search': true,
+                'xpl-input-search--disabled': this.disabled,
+                'xpl-input-search--error': this.hasError,
+                'xpl-input-search--has-value': this.hasValue,
+                'xpl-input-search--readonly': this.readonly,
+                'xpl-input-search--shape-box': this.shape === 'box',
+            } }, this.renderShell()));
+    }
+    static get is() { return "xpl-input-search"; }
+    static get properties() {
+        return {
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name when there is no visible label from the parent; maps to `aria-label` on the input.\nWhen the parent provides a visible label, the input is named by `<label for=\"\u2026\">` \u2014 this prop is ignored for naming.\nEmpty or whitespace-only values are treated as missing and fall back to `'Search'` so the field is never unnamed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "'Search'"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the native input (`autocomplete` attribute). Default `off` matches common\ninline-search UX; browsers may still apply heuristics."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete",
+                "defaultValue": "'off'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the field and clear control."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "errorMessageId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Element id for `aria-describedby` when `hasError` (error message lives on `xpl-input`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message-id"
+            },
+            "hasError": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by `xpl-input` when `error` is shown \u2014 drives `aria-invalid` / `aria-describedby`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-error",
+                "defaultValue": "false"
+            },
+            "hasVisibleLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, parent `xpl-input` renders a visible label \u2014 omit `aria-label` on the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-visible-label",
+                "defaultValue": "false"
+            },
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Associates the control with the parent `xpl-input` label (`for` / `id`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-id"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Form field `name` on the native input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder shown when the value is empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Search'"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is editable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'rounded' | 'box'",
+                    "resolved": "\"box\" | \"rounded\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shell corner radius: `rounded` (pill) or `box` (rounded rectangle)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'rounded'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value (controlled-friendly)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasAncestorForm": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "blurEvent",
+                "name": "blurEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the inner control loses focus.\nWhen nested under `xpl-input type=\"search\"`, this event bubbles to the `xpl-input` host (same\nevent name as other input types)."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "focusEvent",
+                "name": "focusEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the inner control receives focus.\nWhen nested under `xpl-input type=\"search\"`, this event bubbles to the `xpl-input` host (same\nevent name as other input types)."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "inputEvent",
+                "name": "inputEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired on every input change (typing, paste) and when the value is cleared \u2014 mirrors `xpl-input` text fields.\nWhen nested under `xpl-input type=\"search\"`, bubbles to the `xpl-input` host."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "search",
+                "name": "search",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user commits a search (Enter with no enclosing form owner, or submit of the inner\nsearch form). `event.detail` is the trimmed query string.\nWhen nested under `xpl-input type=\"search\"`, the parent listens with `onSearch` and re-emits so the\ncanonical `search` `@Event` stays on `xpl-input`."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired on every input change (typing, paste) and when the value is cleared.\n`event.detail` is the raw `value` string (not trimmed).\nWhen nested under `xpl-input type=\"search\"`, bubbles to the `xpl-input` host."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Moves keyboard focus to the search field.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/xpl-input/xpl-input-time/xpl-input-time.js

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { format12Hour, normalizeTime, generateTimeOptions } from "./time-utils";
-export class XplInputTime {
+export class InputTime {
     constructor() {
         this.max = '23:59';
         this.min = '00:00';
@@ -105,11 +105,11 @@ export class XplInputTime {
         }));
     }
     render() {
-        return (h(Host, { key: '99b06c895d608dec6226f79f21ceda92225428b7', class: {
+        return (h(Host, { key: '6ed0e8da81a96e0e4e7078a7477c9a4ee92532ba', class: {
                 'xpl-input-time': true,
                 [`xpl-input-time--mode-${this.mode}`]: true,
                 'xpl-input-time--error': !!this.hasErrorState,
-            } }, h("xpl-input", { key: '8cdf996f46d969c243d246fdfe888c22c9c4999b', pre: h("xpl-icon", { class: "xpl-input-time__clock-icon", icon: "clock", size: 24 }), post: this.timeFormat === '12h' ? this.amPm || 'AM' : null, type: "text", _id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, onInput: this.handleInput, value: this.formattedValue, onFocusEvent: this.handleFocus, onBlurEvent: this.handleBlur, onClick: this.handleClick }), !this.readonly && !this.disabled && (h("xpl-dropdown", { key: '5213fcd68da96d726d8b046277233afd6b5b20e8', options: this.options, isOpen: this.showOptions, ref: (el) => {
+            } }, h("xpl-input", { key: 'bae0f7e9b9e3f14b5d780a0300ef672da9301596', pre: h("xpl-icon", { class: "xpl-input-time__clock-icon", icon: "clock", size: 24 }), post: this.timeFormat === '12h' ? this.amPm || 'AM' : null, type: "text", _id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, onInput: this.handleInput, value: this.formattedValue, onFocusEvent: this.handleFocus, onBlurEvent: this.handleBlur, onClick: this.handleClick }), !this.readonly && !this.disabled && (h("xpl-dropdown", { key: 'cd8ae7e4c7d130bdbf44aeb2f806b3c9a490d8bb', options: this.options, isOpen: this.showOptions, ref: (el) => {
                 this.dropdown = el;
             }, class: "xpl-input-time__dropdown" }))));
     }