@xplortech/apollo-core 2.6.0 → 2.7.0

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

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { v4 as uuid } from "uuid";
 export class Input {
     constructor() {
@@ -14,6 +14,7 @@ export class Input {
         this.hideAcceptText = false;
         this.defaultCountry = 'US';
         this.isInternational = true;
+        this.ariaLabel = '';
         this.type = 'text';
         this.valueChanged = (event) => {
             const target = event.target;
@@ -22,12 +23,12 @@ export class Input {
         this.characterCount = 0;
         this.passwordVisible = false;
         this.hasPreSlotContent = false;
-        this.handleFocus = (ev) => {
-            this.focusEvent.emit(ev);
-        };
         this.handleBlur = (ev) => {
             this.blurEvent.emit(ev);
         };
+        this.handleFocus = (ev) => {
+            this.focusEvent.emit(ev);
+        };
         this.handleInput = (ev) => {
             if (this.multiline) {
                 this.updateCharacterCount();
@@ -41,13 +42,33 @@ export class Input {
                 this.hasPreSlotContent = hasSlotted;
             }
         };
-    }
-    updateCharacterCount() {
-        this.characterCount = this.input.value.length;
+        this.handleSearchBlurForward = (event) => {
+            const { detail } = event;
+            if (!detail) {
+                return;
+            }
+            event.stopPropagation();
+            this.blurEvent.emit(detail);
+        };
+        this.handleSearchCommit = (event) => {
+            event.stopPropagation();
+            this.search.emit(event.detail);
+        };
+        this.handleSearchFocusForward = (event) => {
+            const { detail } = event;
+            if (!detail) {
+                return;
+            }
+            event.stopPropagation();
+            this.focusEvent.emit(detail);
+        };
     }
     hasDirectPreSlotChild() {
         return Array.from(this.el.children).some((child) => child.getAttribute('slot') === 'pre');
     }
+    updateCharacterCount() {
+        this.characterCount = this.input.value.length;
+    }
     componentWillLoad() {
         if (this._id === undefined || this._id === null || this._id === '')
             this._id = uuid();
@@ -59,7 +80,7 @@ export class Input {
         }
     }
     componentDidLoad() {
-        if (this.multiline)
+        if (this.multiline || this.type === 'search')
             return;
         if (typeof MutationObserver !== 'undefined') {
             this.preSlotObserver = new MutationObserver(this.syncPreSlotContent);
@@ -70,7 +91,16 @@ export class Input {
         var _a;
         (_a = this.preSlotObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
+    async setFocus() {
+        var _a, _b;
+        if (this.type === 'search') {
+            await ((_a = this.searchInputRef) === null || _a === void 0 ? void 0 : _a.setFocus());
+            return;
+        }
+        (_b = this.input) === null || _b === void 0 ? void 0 : _b.focus();
+    }
     renderInput() {
+        var _a, _b, _c, _d, _e, _f;
         switch (this.type) {
             case 'file':
                 return (h("xpl-input-file", { accept: this.accept, disabled: this.disabled, hideAcceptText: this.hideAcceptText, hideFileNames: this.hideFileNames, hideTriggerOnSelect: this.hideTriggerOnSelect, multiple: this.multiple, name: this.name, _id: this._id }, h("slot", { name: "trigger" })));
@@ -82,6 +112,13 @@ export class Input {
                 return (h("xpl-input-time", { inputId: this._id, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, max: this.max, min: this.min, step: this.step, mode: this.mode, timeFormat: this.timeFormat, allowCustomOption: this.allowCustomOption }));
             case 'phone':
                 return (h("xpl-input-phone", { inputId: this._id, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, defaultCountry: this.defaultCountry, preferredCountries: this.preferredCountries, isInternational: this.isInternational }));
+            case 'search': {
+                const hasVisibleLabel = Boolean(((_a = this.label) !== null && _a !== void 0 ? _a : '').trim());
+                const hasErrorMessage = Boolean(this.error && this.error.length > 0);
+                return (h("xpl-input-search", { ariaLabel: ((_b = this.ariaLabel) !== null && _b !== void 0 ? _b : '').trim() || 'Search', autocomplete: (_c = this.autocomplete) !== null && _c !== void 0 ? _c : 'off', disabled: this.disabled, errorMessageId: hasErrorMessage ? `${this._id}-error` : undefined, hasError: hasErrorMessage, hasVisibleLabel: hasVisibleLabel, inputId: this._id, name: this.name, onBlurEvent: this.handleSearchBlurForward, onFocusEvent: this.handleSearchFocusForward, onSearch: this.handleSearchCommit, placeholder: (_d = this.placeholder) !== null && _d !== void 0 ? _d : 'Search', readonly: this.readonly, ref: (el) => {
+                        this.searchInputRef = el !== null && el !== void 0 ? el : undefined;
+                    }, required: this.required, shape: (_e = this.shape) !== null && _e !== void 0 ? _e : 'rounded', value: (_f = this.value) !== null && _f !== void 0 ? _f : '' }));
+            }
             default:
                 return (h("div", { class: "xpl-input-wrapper" }, !this.multiline && (h("label", { class: {
                         'xpl-input-pre': true,
@@ -110,13 +147,13 @@ export class Input {
         if (type === 'password' && this.passwordVisible) {
             type = 'text';
         }
-        return (h(Host, { key: 'c0d3b87b9dca0c4f75c15accb6542d270a43f3d3', class: {
+        return (h(Host, { key: '21535bfebdb899ef3bf28ae4ac252ffcc8b03388', class: {
                 'xpl-input': true,
                 'xpl-input--disabled': this.disabled,
                 'xpl-input--error': hasError,
                 'xpl-input--readonly': this.readonly,
                 [`xpl-input--${this.type}`]: true,
-            } }, this.label && (h("label", { key: '1842998b20424a952ff618ed15d611d59d2e9eba', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && h("small", { key: 'ccfe57e608f789d643d2219091922cf259971b12' }, this.description))), this.renderInput(), ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("label", { key: '3a3147f7e1be2d1f109a400baf005289bb37d60f', class: "xpl-input-error", htmlFor: this._id }, h("xpl-icon", { key: 'b4960e9243db0126ca5d6d3b3226c551927c2f39', icon: "alert-circle", size: 16 }), h("span", { key: 'd8f524d135f664c876ae83594e113967bb933cca' }, this.error)))));
+            } }, this.label && (h("label", { key: 'f72b35d866295451cf74832dd191853e77190590', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && h("small", { key: '712910cd0e7a1db84add0f1483fdc0da6c38a07d' }, this.description))), this.renderInput(), ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("label", { key: 'd8fcab92ea7f4989e9d2db1117e689ad9a26ced8', class: "xpl-input-error", htmlFor: this._id, id: `${this._id}-error` }, h("xpl-icon", { key: 'cbe4f7792ea586c78b7bc0f34d277bfa5977d50e', icon: "alert-circle", size: 16 }), h("span", { key: '91f88da21c48f0bf069e4c20205a81cfbb30fb1e' }, this.error)))));
     }
     static get is() { return "xpl-input"; }
     static get properties() {
@@ -266,7 +303,7 @@ export class Input {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the input is editable\n\nApplies to text, password, number, and date inputs."
+                    "text": "Whether the input is editable\n\nApplies to text, password, number, date, and search inputs."
                 },
                 "getter": false,
                 "setter": false,
@@ -285,7 +322,7 @@ export class Input {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Including a `value` will pre-populate the input\nwith the given string.\n\nApplies to text, password, number, and date inputs."
+                    "text": "Including a `value` will pre-populate the input\nwith the given string.\n\nApplies to text, password, number, date, and search inputs."
                 },
                 "getter": false,
                 "setter": false,
@@ -304,7 +341,7 @@ export class Input {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Hint for form autofill feature\n\nApplies to text, password, number."
+                    "text": "Hint for form autofill feature\n\nApplies to text, password, number, and search inputs."
                 },
                 "getter": false,
                 "setter": false,
@@ -323,7 +360,7 @@ export class Input {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Placeholder text that appears when the field has no value\n\nApplies to text, password, number, and date inputs."
+                    "text": "Placeholder text that appears when the field has no value\n\nApplies to text, password, number, date, and search inputs."
                 },
                 "getter": false,
                 "setter": false,
@@ -723,12 +760,51 @@ export class Input {
                 "attribute": "is-international",
                 "defaultValue": "true"
             },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for search inputs when there is no visible `label` (after trim).\nIgnored for naming when a visible label is shown.\nDefaults to `''`; whitespace-only values are treated as missing and fall back to `'Search'` so the field is never unnamed when there is no visible label.\n\nApplies to search inputs (`type=\"search\"`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "''"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'rounded' | 'box'",
+                    "resolved": "\"box\" | \"rounded\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Shell corner radius for search inputs: `rounded` (pill) or `box` (rounded rectangle).\n\nApplies to search inputs (`type=\"search\"`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape"
+            },
             "type": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'date' | 'time' | 'text' | 'number' | 'password' | 'file' | 'color' | 'phone'",
-                    "resolved": "\"color\" | \"date\" | \"file\" | \"number\" | \"password\" | \"phone\" | \"text\" | \"time\"",
+                    "original": "| 'date'\n        | 'time'\n        | 'text'\n        | 'number'\n        | 'password'\n        | 'file'\n        | 'color'\n        | 'phone'\n        | 'search'",
+                    "resolved": "\"color\" | \"date\" | \"file\" | \"number\" | \"password\" | \"phone\" | \"search\" | \"text\" | \"time\"",
                     "references": {}
                 },
                 "required": false,
@@ -801,7 +877,7 @@ export class Input {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event that emits the current value of the input"
+                    "text": "Event that emits the current value of the input (including search fields)."
                 },
                 "complexType": {
                     "original": "string",
@@ -816,7 +892,22 @@ export class Input {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event that emits the current value of the input\n\nApplies to text like inputs only."
+                    "text": "Event that emits the current value of the input\n\nApplies to text-like inputs and search inputs."
+                },
+                "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\ninternal search form). `event.detail` is the trimmed query string.\n\nApplies to search inputs (`type=\"search\"`)."
                 },
                 "complexType": {
                     "original": "string",
@@ -825,5 +916,26 @@ export class Input {
                 }
             }];
     }
+    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 native control (text field, textarea, or search inner input).",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
 }

package/dist/collection/components/xpl-large-card/xpl-large-card.js

@@ -13,7 +13,7 @@ export class LargeCard {
     render() {
         const contentSlot = 'graph-content';
         const hasContentSlot = this.el.querySelector(`[slot="${contentSlot}"]`);
-        return (h(Host, { key: '02b42037a8e13fb68df0f40a07804bad533f690b', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '27a8aa72e6e97d3918aa8a066c2528dab7466946', class: "xpl-large-card__header" }, h("header", { key: '9846eccca6988543cc671abe84f0a68e0dba06b0' }, h("slot", { key: '002ebff29d02550decb87f66609e941e6128c284', name: "title" }, this.name), this.link && (h("span", { key: 'a5c4dfe1c7149d95c5f4e6c291f61f75e49ce088', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: 'a12c2c98867a189cb6bcabfcbbc6a08f2691c763', icon: "chevron-right", size: 16 })))), this.description && (h("div", { key: 'd7ca785313811f6fd962804964a90a161118d936', class: "xpl-large-card__description" }, this.description))), h("dd", { key: 'fe57a3a97ffd2d124e74e20c88077ffb68ea938a', class: "xpl-large-card__body" }, hasContentSlot && h("slot", { key: '2ebfb5e288ca2426d3085c97cc3a0bec81a72c46', name: contentSlot }))));
+        return (h(Host, { key: '886078965cb1ca87fd9c4f45a8b06f089a4b2e04', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '1c2006c9167b2d46262b222ace3c5e9135863783', class: "xpl-large-card__header" }, h("header", { key: '21ba4629c7e3d0d9dff98f9dde2ac4bc9f1f494e' }, h("slot", { key: 'd50991dc4fcca6c56c04c7cc9a401f0894035aa2', name: "title" }, this.name), this.link && (h("span", { key: '35b1b15786c1674f6d1797ec3b04da81b27d5d3a', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: 'f52a7a39b3d044341296d88adb9d2bc07cdec9ab', icon: "chevron-right", size: 16 })))), this.description && (h("div", { key: 'bac9d6cec27272d277c991c81e651714603066a2', class: "xpl-large-card__description" }, this.description))), h("dd", { key: '9da3ca8ec575a6755f1f47065299ec3ab3e5169b', class: "xpl-large-card__body" }, hasContentSlot && h("slot", { key: '022da3c1e07c264441c58f7d42d6edca109a504d', name: contentSlot }))));
     }
     static get is() { return "xpl-large-card"; }
     static get properties() {