@ukic/canary-web-components 3.0.0-canary.5 → 3.0.0-canary.8

package/dist/esm/ic-pagination_4.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, f as forceUpdate } from './index-93509377.js';
-import { r as removeDisabledFalse, a as onComponentRequiredPropUndefined, L as capitalize, c as checkSlotInChildMutations, C as getLabelFromValue, A as getFilteredMenuOptions, M as getOptionsWithoutGroupTitlesCount, k as removeFormResetListener, v as inheritAttributes, j as addFormResetListener, l as renderHiddenInput, n as getInputDescribedByText, p as hasValidationStatus, N as isMobileOrTablet, w as IC_INHERITED_ARIA, O as IcInformationStatus, P as debounceEvent, i as isSlotUsed, E as isEmptyString } from './helpers-d3091c8c.js';
+import { r as removeDisabledFalse, b as onComponentRequiredPropUndefined, N as capitalize, O as checkSlotInChildMutations, E as getLabelFromValue, A as getFilteredMenuOptions, P as getOptionsWithoutGroupTitlesCount, k as removeFormResetListener, v as inheritAttributes, j as addFormResetListener, l as renderHiddenInput, n as getInputDescribedByText, p as hasValidationStatus, Q as isMobileOrTablet, w as IC_INHERITED_ARIA, R as IcInformationStatus, C as debounceEvent, m as removeHiddenInput, i as isSlotUsed, F as isEmptyString } from './helpers-96838a0a.js';
 
 const paginationNextPrevious = `<svg width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M2.08748 0L0.912476 1.175L4.72914 5L0.912476 8.825L2.08748 10L7.08748 5L2.08748 0Z" fill="currentColor"/>
@@ -94,6 +94,9 @@ const Pagination = class {
             this.boundaryPageCount = 2;
         }
     }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
     watchNumberPagesHandler() {
         this.watchPageChangeHandler();
     }
@@ -229,6 +232,7 @@ const Pagination = class {
     static get watchers() { return {
         "adjacentPageCount": ["watchAdjacentPageCountHandler"],
         "boundaryPageCount": ["watchBoundaryPageCountHandler"],
+        "disabled": ["watchDisabledHandler"],
         "pages": ["watchNumberPagesHandler"],
         "type": ["watchTypeHandler"],
         "currentPage": ["watchPageChangeHandler"]
@@ -254,6 +258,9 @@ const PaginationItem = class {
         this.theme = "inherit";
         this.type = undefined;
     }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
     watchLabelHandler() {
         this.capitalizedLabel = capitalize(this.label);
     }
@@ -282,6 +289,7 @@ const PaginationItem = class {
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
         "label": ["watchLabelHandler"]
     }; }
 };
@@ -346,28 +354,26 @@ const Select = class {
             this.blurredBecauseButtonPressed = true;
             this.retryButtonClick = true;
             this.hasSetDefaultValue = true;
-            this.icRetryLoad.emit({ value: this.hiddenInputValue });
+            this.icRetryLoad.emit({
+                value: this.searchable
+                    ? this.searchableSelectInputValue
+                    : this.hiddenInputValue,
+            });
         };
         this.emitIcChange = (value) => {
-            if (!this.searchable) {
-                // If "Select all" button clicked, replace value with new value (array of all option values)
-                if (this.multiple && !Array.isArray(value) && value !== null) {
-                    this.handleMultipleSelectChange(value);
-                }
-                else {
-                    this.value = value;
-                }
+            // If "Select all" button clicked, replace value with new value (array of all option values)
+            if (this.multiple && !Array.isArray(value) && value !== null) {
+                this.handleMultipleSelectChange(String(value));
             }
-            clearTimeout(this.debounceIcChange);
-            this.debounceIcChange = window.setTimeout(() => {
-                const valueToEmit = this.multiple ? this.value : value;
-                this.icChange.emit({ value: valueToEmit });
-            }, this.currDebounce);
+            else {
+                this.value = value;
+            }
+            const valueToEmit = this.multiple ? this.value : value;
+            this.icChange.emit({ value: valueToEmit });
         };
-        this.emitImmediateIcChange = (value) => {
-            this.value = value;
-            clearTimeout(this.debounceIcChange);
-            this.icChange.emit({ value });
+        this.emitIcInput = (value) => {
+            clearTimeout(this.debounceIcInput);
+            this.debounceIcInput = window.setTimeout(() => this.icInput.emit({ value }), this.currDebounce);
         };
         /**
          * Processes the provided array of IcMenuOptions, removing duplicates and reporting them with a console.warn
@@ -465,7 +471,7 @@ const Select = class {
         };
         this.handleNativeSelectChange = () => {
             this.icOptionSelect.emit({ value: this.nativeSelectElement.value });
-            this.emitImmediateIcChange(this.nativeSelectElement.value);
+            this.emitIcChange(this.nativeSelectElement.value);
             this.setTextColor();
         };
         // Handle option select for when a custom input box and menu is rendered
@@ -473,8 +479,10 @@ const Select = class {
         this.handleCustomSelectChange = (event) => {
             var _a;
             const value = event.detail.value;
-            if (this.searchable && event.detail.label === this.emptyOptionListText) {
-                this.searchableSelectElement.focus();
+            if (event.detail.label === this.emptyOptionListText) {
+                if (this.searchable) {
+                    this.searchableSelectElement.focus();
+                }
                 return;
             }
             if (this.searchable) {
@@ -598,13 +606,10 @@ const Select = class {
             event.stopPropagation();
             this.hasTimedOut = false;
             clearTimeout(this.timeoutTimer);
-            this.noOptions = null;
-            this.emitImmediateIcChange(null);
+            this.clearInput();
+            this.emitIcChange(null);
             this.icClear.emit();
             if (this.searchable) {
-                this.searchableSelectElement.value = null;
-                this.searchableSelectInputValue = null;
-                this.filteredOptions = this.uniqueOptions;
                 this.hiddenInputValue = null;
                 this.searchableSelectElement.focus();
             }
@@ -628,7 +633,7 @@ const Select = class {
                     this.pressedCharacters += key;
                     this.handleFilter();
                     if (!this.noOptions) {
-                        this.emitImmediateIcChange(this.filteredOptions[0].value);
+                        this.emitIcChange(this.filteredOptions[0].value);
                     }
                 }
             }
@@ -773,9 +778,13 @@ const Select = class {
         };
         this.handleSearchableSelectInput = (event) => {
             this.searchableSelectInputValue = event.target.value;
-            this.icInput.emit({ value: this.searchableSelectInputValue });
-            this.emitIcChange(this.searchableSelectInputValue);
-            this.hiddenInputValue = this.searchableSelectInputValue;
+            this.emitIcInput(this.searchableSelectInputValue);
+            // De-select previous selection when input is edited
+            // Only emit icChange once when editing input
+            if (this.value != null) {
+                this.emitIcChange(null);
+            }
+            this.hiddenInputValue = null;
             this.inputValueToFilter = this.searchableSelectInputValue;
             this.setMenuChange(true);
             if (!this.disableAutoFiltering) {
@@ -833,6 +842,10 @@ const Select = class {
             if (isSearchableAndNoFocusedInternalElements) {
                 if (!this.retryButtonClick) {
                     this.setMenuChange(false);
+                    // Clear input field on blur when searchable if no option is selected
+                    if (!this.value) {
+                        this.clearInput();
+                    }
                 }
                 this.handleFocusIndicatorDisplay();
             }
@@ -856,9 +869,17 @@ const Select = class {
                 this.hiddenInputValue = this.value;
             }
         };
+        this.clearInput = () => {
+            this.noOptions = null;
+            if (this.searchable) {
+                this.searchableSelectElement.value = null;
+                this.searchableSelectInputValue = null;
+                this.filteredOptions = this.uniqueOptions;
+            }
+        };
         this.ariaActiveDescendant = undefined;
         this.clearButtonFocused = false;
-        this.debounceIcChange = undefined;
+        this.debounceIcInput = undefined;
         this.hiddenInputValue = undefined;
         this.noOptions = null;
         this.open = false;
@@ -901,6 +922,9 @@ const Select = class {
         this.inputValueToFilter = this.value;
         this.currValue = this.value;
     }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
     loadingHandler(newValue) {
         newValue && this.triggerLoading();
     }
@@ -954,9 +978,10 @@ const Select = class {
                 this.currValue = this.value;
             }
         }
-        if (this.searchable) {
+        if (this.searchable && this.value) {
+            // Only set if value not null - prevents whole input value being cleared when edited
             this.searchableSelectInputValue =
-                this.getLabelFromValue(this.currValue) ||
+                this.getLabelFromValue(String(this.currValue)) ||
                     this.currValue;
         }
     }
@@ -1094,6 +1119,7 @@ const Select = class {
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
         "loading": ["loadingHandler"],
         "options": ["watchOptionsHandler"],
         "debounce": ["debounceChangedHandler"],
@@ -1118,14 +1144,24 @@ const TextField = class {
         this.icKeydown = createEvent(this, "icKeydown", 7);
         this.inheritedAttributes = {};
         this.hostMutationObserver = null;
+        this.checkChildHydration = () => {
+            var _a;
+            const el = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("ic-typography");
+            if (this.hideLabel || (el && el.classList.contains("hydrated"))) {
+                this.setFocus();
+                clearInterval(this.interval);
+            }
+        };
+        this.getNumberOfCharacters = (value) => value !== null && value !== undefined ? value.length : 0;
         this.getMaxValueExceeded = (value) => {
+            this.numChars = this.getNumberOfCharacters(value);
             if (this.type === "number") {
                 this.minValueUnattained = value && Number(value) < Number(this.min);
                 this.maxValueExceeded = Number(value) > Number(this.max);
             }
         };
         this.getMaxCharactersReached = (value) => {
-            this.numChars = value.length;
+            this.numChars = this.getNumberOfCharacters(value);
             this.maxCharactersReached =
                 this.maxCharacters > 0 ? this.numChars >= this.maxCharacters : false;
             if (this.maxCharactersWarning && !this.maxCharactersReached) {
@@ -1180,7 +1216,7 @@ const TextField = class {
         this.autocapitalize = "off";
         this.autocomplete = "off";
         this.autocorrect = "off";
-        this.autoFocus = false;
+        this.autofocus = false;
         this.disabled = false;
         this.fullWidth = false;
         this.helperText = "";
@@ -1214,6 +1250,9 @@ const TextField = class {
         this.value = "";
         this.initialValue = this.value;
     }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
     debounceChanged() {
         this.icChange = debounceEvent(this.icChange, this.debounce);
     }
@@ -1268,6 +1307,9 @@ const TextField = class {
             attributes: true,
             childList: true,
         });
+        if (this.autofocus && !this.disabled && !this.readonly) {
+            this.interval = setInterval(this.checkChildHydration, 50);
+        }
     }
     handleKeyDown(ev) {
         this.icKeydown.emit({ event: ev });
@@ -1318,25 +1360,25 @@ const TextField = class {
         const disabledText = disabledMode && !readonly;
         const showLeftIcon = !!this.el.querySelector(`[slot="icon"]`) && !disabledText;
         const invalid = `${currentStatus === IcInformationStatus.Error}`;
-        if (hiddenInput) {
-            renderHiddenInput(true, this.el, name, value, disabledMode);
-        }
+        hiddenInput
+            ? renderHiddenInput(true, this.el, name, value, disabledMode)
+            : removeHiddenInput(this.el);
         return (h(Host, { class: {
                 "ic-text-field-full-width": fullWidth,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-text-field-disabled": disabledMode,
             } }, h("ic-input-container", { readonly: readonly, disabled: disabledMode }, !this.hideLabel && (h("ic-input-label", { for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly })), h("ic-input-component-container", { size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { class: {
                 readonly,
-                "has-value": value.length > 0,
+                "has-value": this.getNumberOfCharacters(value) > 0,
             }, slot: "left-icon" }, h("slot", { name: "icon" }))), !multiline ? (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: this.type, min: min, max: max, value: value, class: {
                 "no-left-pad": !showLeftIcon && readonly,
                 readonly,
                 "truncate-value": truncateValue,
-            }, placeholder: placeholder ? placeholder : "", required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-activedescendant": this.ariaActiveDescendant, "aria-expanded": this.ariaExpanded, "aria-owns": this.ariaOwns, autocomplete: this.autocomplete, autocapitalize: this.autocapitalize, autoFocus: this.autoFocus, spellcheck: spellcheck, inputmode: inputmode, role: this.role, maxlength: maxCharactersReached ? maxCharacters : null, minlength: minCharactersUnattained ? minCharacters : null }, this.inheritedAttributes))) : (h("textarea", Object.assign({ id: inputId, class: {
+            }, placeholder: placeholder ? placeholder : "", required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-activedescendant": this.ariaActiveDescendant, "aria-expanded": this.ariaExpanded, "aria-owns": this.ariaOwns, autocomplete: this.autocomplete, autocapitalize: this.autocapitalize, spellcheck: spellcheck, inputmode: inputmode, role: this.role, maxlength: maxCharactersReached ? maxCharacters : null, minlength: minCharactersUnattained ? minCharacters : null }, this.inheritedAttributes))) : (h("textarea", Object.assign({ id: inputId, class: {
                 "no-resize": resize === false || readonly,
                 "no-left-pad": !showLeftIcon && readonly,
                 readonly,
-            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder ? placeholder : "", readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocapitalize: this.autocapitalize, autoFocus: this.autoFocus, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : null, minlength: minCharactersUnattained ? minCharacters : null }, this.inheritedAttributes))), isSlotUsed(this.el, "clear-button") && (h("slot", { name: "clear-button" })), isSlotUsed(this.el, "search-submit-button") && (h("slot", { name: "search-submit-button" }))), isSlotUsed(this.el, "menu") && h("slot", { name: "menu" }), (!isEmptyString(validationStatus) ||
+            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder ? placeholder : "", readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocapitalize: this.autocapitalize, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : null, minlength: minCharactersUnattained ? minCharacters : null }, this.inheritedAttributes))), isSlotUsed(this.el, "clear-button") && (h("slot", { name: "clear-button" })), isSlotUsed(this.el, "search-submit-button") && (h("slot", { name: "search-submit-button" }))), isSlotUsed(this.el, "menu") && h("slot", { name: "menu" }), (!isEmptyString(validationStatus) ||
             !isEmptyString(validationText) ||
             maxNumChars > 0 ||
             maxValueExceeded ||
@@ -1352,6 +1394,7 @@ const TextField = class {
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
         "debounce": ["debounceChanged"],
         "value": ["watchValueHandler"]
     }; }