@ukic/canary-web-components 2.0.0-canary.9 → 3.0.0-canary.1

package/dist/collection/components/ic-select-with-multi/ic-select.js

@@ -243,7 +243,7 @@ export class Select {
                 event.preventDefault();
             }
         };
-        this.isExternalFiltering = () => this.searchable && this.disableFilter;
+        this.isExternalFiltering = () => this.searchable && this.disableAutoFiltering;
         this.handleClick = (event) => {
             var _a;
             if (!this.open) {
@@ -453,7 +453,7 @@ export class Select {
             this.hiddenInputValue = this.searchableSelectInputValue;
             this.inputValueToFilter = this.searchableSelectInputValue;
             this.setMenuChange(true);
-            if (!this.disableFilter) {
+            if (!this.disableAutoFiltering) {
                 this.handleFilter();
                 this.debounceAriaLiveUpdate();
             }
@@ -538,16 +538,10 @@ export class Select {
         this.open = false;
         this.pressedCharacters = "";
         this.searchableSelectInputValue = null;
-        this.charactersUntilSuggestions = 0;
         this.disabled = false;
-        this.disableFilter = false;
+        this.disableAutoFiltering = false;
         this.emptyOptionListText = "No results found";
         this.form = undefined;
-        this.formaction = undefined;
-        this.formenctype = undefined;
-        this.formmethod = undefined;
-        this.formnovalidate = undefined;
-        this.formtarget = undefined;
         this.fullWidth = false;
         this.helperText = "";
         this.hideLabel = false;
@@ -565,8 +559,7 @@ export class Select {
         this.searchMatchPosition = "anywhere";
         this.selectOnEnter = false;
         this.showClearButton = false;
-        this.size = "default";
-        this.small = false;
+        this.size = "medium";
         this.timeout = undefined;
         this.validationStatus = "";
         this.validationText = "";
@@ -699,7 +692,7 @@ export class Select {
         }, 800);
     }
     render() {
-        const { size, small, disabled, fullWidth, helperText, hideLabel, label, menuId, multiple, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, currValue, } = this;
+        const { size, disabled, fullWidth, helperText, hideLabel, label, menuId, multiple, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, currValue, } = this;
         // HTML inputs only accept 'string' for their value
         // Does not cause errors when it is a multi-select - sets value correctly, to a comma-separated string
         renderHiddenInput(true, this.el, name, this.searchable ? this.hiddenInputValue : currValue, disabled);
@@ -707,12 +700,11 @@ export class Select {
         const describedBy = getInputDescribedByText(this.inputId, helperText !== "", hasValidationStatus(this.validationStatus, this.disabled)).trim();
         const optionsSelectedCount = `${currValue === null || currValue === void 0 ? void 0 : currValue.length} of ${getOptionsWithoutGroupTitlesCount(this.options)} selected`;
         return (h(Host, { class: {
-                disabled: disabled,
-                searchable: searchable,
-                small: small,
-                [size]: size !== "default",
-                "full-width": fullWidth,
-            }, onBlur: this.onBlur }, h("ic-input-container", { readonly: readonly }, !hideLabel && (h("ic-input-label", { for: this.inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), h("ic-input-component-container", { ref: (el) => (this.anchorEl = el), class: { "menu-open": this.open }, small: small, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, readonly ? (h("ic-typography", null, h("p", null, multiple
+                ["ic-select-disabled"]: disabled,
+                ["ic-select-searchable"]: searchable,
+                [`ic-select-${size}`]: size !== "medium",
+                ["ic-select-full-width"]: fullWidth,
+            }, onBlur: this.onBlur }, h("ic-input-container", { readonly: readonly }, !hideLabel && (h("ic-input-label", { for: this.inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), h("ic-input-component-container", { ref: (el) => (this.anchorEl = el), class: { "menu-open": this.open }, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, readonly ? (h("ic-typography", null, h("p", null, multiple
             ? this.getMultipleOptionsString(currValue)
             : this.getLabelFromValue(currValue)))) : isMobileOrTablet() && !multiple ? (h("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: this.inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.handleNativeSelectKeyDown, form: this.form }, this.inheritedAttributes), h("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => {
             if (option.children) {
@@ -724,7 +716,7 @@ export class Select {
         }))) : searchable ? (h("div", { class: "searchable-select-container" }, h("input", { class: {
                 "select-input": true,
                 "with-clear-button": !!this.searchableSelectInputValue,
-            }, role: "combobox", autocomplete: "off", "aria-label": label, "aria-describedby": describedBy, "aria-activedescendant": this.ariaActiveDescendant, "aria-autocomplete": "list", "aria-expanded": this.open ? "true" : "false", "aria-invalid": invalid, "aria-required": required ? "true" : "false", "aria-controls": menuId, ref: (el) => (this.searchableSelectElement = el), id: this.inputId, value: this.searchableSelectInputValue, placeholder: placeholder, disabled: disabled, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, form: this.form, formaction: this.formaction, formenctype: this.formenctype, formmethod: this.formmethod, formnovalidate: this.formnovalidate, formtarget: this.formtarget }), this.searchableSelectInputValue &&
+            }, role: "combobox", autocomplete: "off", "aria-label": label, "aria-describedby": describedBy, "aria-activedescendant": this.ariaActiveDescendant, "aria-autocomplete": "list", "aria-expanded": this.open ? "true" : "false", "aria-invalid": invalid, "aria-required": required ? "true" : "false", "aria-controls": menuId, ref: (el) => (this.searchableSelectElement = el), id: this.inputId, value: this.searchableSelectInputValue, placeholder: placeholder, disabled: disabled, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, form: this.form }), this.searchableSelectInputValue &&
             (showClearButton || searchable) && (h("div", { class: "clear-button-container" }, h("ic-button", { id: "clear-button", ref: (el) => (this.clearButton = el), "aria-label": this.searchableSelectInputValue && currValue === null
                 ? "Clear input"
                 : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon", appearance: this.clearButtonFocused
@@ -755,7 +747,7 @@ export class Select {
                         this.noOptions[0].label === this.emptyOptionListText),
             }, ref: (el) => (this.menu = el), inputEl: searchable
                 ? this.searchableSelectElement
-                : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, small: small, size: size, menuId: menuId, open: this.open, options: searchable ? this.filteredOptions : this.uniqueOptions, value: multiple ? currValue : currValue, fullWidth: fullWidth, selectOnEnter: this.selectOnEnter, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuOptionSelectAll: this.handleSelectAllChange, onMenuKeyPress: this.handleMenuKeyPress, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.el, onTimeoutBlur: this.onTimeoutBlur, activationType: this.searchable || multiple || this.selectOnEnter
+                : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, size: size, menuId: menuId, open: this.open, options: searchable ? this.filteredOptions : this.uniqueOptions, value: multiple ? currValue : currValue, fullWidth: fullWidth, selectOnEnter: this.selectOnEnter, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuOptionSelectAll: this.handleSelectAllChange, onMenuKeyPress: this.handleMenuKeyPress, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.el, onTimeoutBlur: this.onTimeoutBlur, activationType: this.searchable || multiple || this.selectOnEnter
                 ? "manual"
                 : "automatic", closeOnSelect: !multiple })), this.multiple && (h("div", { "aria-live": "polite", role: "status", class: "multi-select-selected-count" })), hasValidationStatus(this.validationStatus, this.disabled) && (h("ic-input-validation", { class: { "menu-open": this.open }, ariaLiveMode: "polite", status: validationStatus, message: validationText, for: this.inputId })))));
     }
@@ -774,24 +766,6 @@ export class Select {
     }
     static get properties() {
         return {
-            "charactersUntilSuggestions": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "**[DEPRECATED]** This prop should not be used anymore."
-                },
-                "attribute": "characters-until-suggestions",
-                "reflect": false,
-                "defaultValue": "0"
-            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -810,7 +784,7 @@ export class Select {
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "disableFilter": {
+            "disableAutoFiltering": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -824,7 +798,7 @@ export class Select {
                     "tags": [],
                     "text": "If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source."
                 },
-                "attribute": "disable-filter",
+                "attribute": "disable-auto-filtering",
                 "reflect": false,
                 "defaultValue": "false"
             },
@@ -863,91 +837,6 @@ export class Select {
                 "attribute": "form",
                 "reflect": false
             },
-            "formaction": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The URL that processes the information submitted by the select. It overrides the action attribute of the select's form owner. Does nothing if there is no form owner.\nThis prop should only be used with searchable select and will only be applied if searchable is true."
-                },
-                "attribute": "formaction",
-                "reflect": false
-            },
-            "formenctype": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The way the submitted form data is encoded. This prop should only be used with searchable select and will only be applied if searchable is true."
-                },
-                "attribute": "formenctype",
-                "reflect": false
-            },
-            "formmethod": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The HTTP method used to submit the form. This prop should only be used with searchable select and will only be applied if searchable is true."
-                },
-                "attribute": "formmethod",
-                "reflect": false
-            },
-            "formnovalidate": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the form will not be validated when submitted. This prop should only be used with searchable select and will only be applied if searchable is true."
-                },
-                "attribute": "formnovalidate",
-                "reflect": false
-            },
-            "formtarget": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The place to display the response from submitting the form. It overrides the target attribute of the select's form owner.\nThis prop should only be used with searchable select and will only be applied if searchable is true."
-                },
-                "attribute": "formtarget",
-                "reflect": false
-            },
             "fullWidth": {
                 "type": "boolean",
                 "mutable": false,
@@ -1264,7 +1153,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
                     "references": {
                         "IcSizes": {
                             "location": "import",
@@ -1281,25 +1170,7 @@ export class Select {
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "\"default\""
-            },
-            "small": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "**[DEPRECATED]** This prop should not be used anymore. Set prop `size` to \"small\" instead."
-                },
-                "attribute": "small",
-                "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "\"medium\""
             },
             "timeout": {
                 "type": "number",