@ukic/web-components 2.1.0-beta.15 → 2.1.0-beta.17

package/dist/esm/ic-section-container.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-3b144b17.js';
+import { r as registerInstance, h, H as Host } from './index-a77644e1.js';
 
 const icSectionContainerCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media only screen and (max-width: 576px){:host{--section-container-margin:var(--ic-space-xs);--section-container-max-width:var(--ic-breakpoint-sm)}}@media only screen and (min-width: 577px){:host{--section-container-margin:var(--ic-space-md);--section-container-max-width:var(--ic-breakpoint-md)}}@media only screen and (min-width: 769px){:host{--section-container-margin:var(--ic-space-md);--section-container-max-width:var(--ic-breakpoint-lg)}}@media only screen and (min-width: 993px){:host{--section-container-margin:var(--ic-space-md);--section-container-max-width:var(--ic-breakpoint-xl)}}@media only screen and (min-width: 1201px){:host{--section-container-margin:var(--ic-space-lg);--section-container-max-width:var(--ic-breakpoint-xl)}}:host{display:block;padding-top:var(--ic-space-md);padding-bottom:var(--ic-space-md);box-sizing:border-box}:host(.aligned-center){max-width:var(--section-container-max-width);margin-left:auto;margin-right:auto;padding-left:var(--section-container-margin);padding-right:var(--section-container-margin)}:host(.aligned-left){max-width:var(--section-container-max-width);margin-left:var(--section-container-margin);margin-right:auto;padding-right:var(--section-container-margin)}:host(.aligned-full-width){margin-left:var(--section-container-margin);margin-right:var(--section-container-margin)}:host(.vertical-padding){padding-top:var(--ic-space-md);padding-bottom:var(--ic-space-md)}:host(.no-vertical-padding){padding-top:0;padding-bottom:0}";
 

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3b144b17.js';
-import { x as getLabelFromValue, w as getFilteredMenuOptions, m as inheritAttributes, d as addFormResetListener, a as onComponentRequiredPropUndefined, r as removeFormResetListener, e as renderHiddenInput, h as getInputDescribedByText, j as hasValidationStatus, y as isMobileOrTablet, n as IC_INHERITED_ARIA } from './helpers-73666f14.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a77644e1.js';
+import { y as getLabelFromValue, w as getFilteredMenuOptions, e as removeFormResetListener, n as inheritAttributes, r as removeDisabledFalse, d as addFormResetListener, a as onComponentRequiredPropUndefined, f as renderHiddenInput, j as getInputDescribedByText, k as hasValidationStatus, z as isMobileOrTablet, p as IC_INHERITED_ARIA } from './helpers-c4e378c4.js';
 import { I as IcThemeForegroundEnum, a as IcInformationStatus } from './types-dd515332.js';
 
 const Expand = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -18,19 +18,20 @@ let inputIds = 0;
 const Select = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.icBlur = createEvent(this, "icBlur", 7);
     this.icChange = createEvent(this, "icChange", 7);
     this.icClear = createEvent(this, "icClear", 7);
     this.icFocus = createEvent(this, "icFocus", 7);
-    this.icBlur = createEvent(this, "icBlur", 7);
-    this.icOptionSelect = createEvent(this, "icOptionSelect", 7);
     this.icInput = createEvent(this, "icInput", 7);
+    this.icOptionSelect = createEvent(this, "icOptionSelect", 7);
     this.icRetryLoad = createEvent(this, "icRetryLoad", 7);
+    this.hasSetDefaultValue = false;
+    this.inheritedAttributes = {};
+    this.initialOptionsEmpty = false;
     this.inputId = `ic-select-input-${inputIds++}`;
     this.menuId = `${this.inputId}-menu`;
+    this.searchableMenuItemSelected = false;
     this.ungroupedOptions = [];
-    this.inheritedAttributes = {};
-    this.hasSetDefaultValue = false;
-    this.initialOptionsEmpty = false;
     this.handleRetry = (ev) => {
       var _a;
       if (ev.detail.keyPressed)
@@ -54,10 +55,6 @@ const Select = class {
       clearTimeout(this.debounceIcChange);
       this.icChange.emit({ value: value });
     };
-    this.isMenuEnabled = () => {
-      return (this.searchableSelectInputValue !== null ||
-        this.searchableSelectInputValue !== "");
-    };
     this.setOptionsValuesFromLabels = () => {
       if (this.options.length > 0 && this.options.map) {
         this.options.map((option) => {
@@ -110,6 +107,7 @@ const Select = class {
       }
       if (this.searchable) {
         this.value = event.detail.value;
+        this.searchableMenuItemSelected = true;
         // After editing the input, if selecting the same option as before, set the input value to label again
         if (this.value === this.currValue) {
           this.searchableSelectInputValue = this.getLabelFromValue(this.value);
@@ -132,6 +130,9 @@ const Select = class {
       ev.cancelBubble = true;
       this.handleCharacterKeyDown(ev.detail.key);
     };
+    this.handleMenuValueChange = (ev) => {
+      this.value = ev.detail.value;
+    };
     this.handleFocusIndicatorDisplay = () => {
       const focusIndicator = this.host.shadowRoot.querySelector(".focus-indicator");
       if (this.open) {
@@ -148,16 +149,18 @@ const Select = class {
     };
     this.isExternalFiltering = () => this.searchable && this.disableFilter;
     this.handleClick = (event) => {
-      if (this.isExternalFiltering()) {
-        this.menu.options = this.filteredOptions;
-      }
-      else {
-        if (!this.hasTimedOut && !this.loading) {
+      if (!this.open) {
+        if (this.isExternalFiltering()) {
+          this.menu.options = this.filteredOptions;
+        }
+        else if (!this.hasTimedOut &&
+          !this.loading &&
+          (!this.searchable || this.searchableMenuItemSelected)) {
           this.noOptions = null;
           this.menu.options = this.options;
         }
       }
-      if (event.detail !== 0 && this.isMenuEnabled()) {
+      if (event.detail !== 0) {
         this.menu.handleClickOpen();
       }
     };
@@ -171,6 +174,7 @@ const Select = class {
     this.handleClear = (event) => {
       event.stopPropagation();
       this.hasTimedOut = false;
+      clearTimeout(this.timeoutTimer);
       this.noOptions = null;
       this.emitImmediateIcChange(null);
       this.icClear.emit();
@@ -180,9 +184,6 @@ const Select = class {
         this.filteredOptions = this.options;
         this.hiddenInputValue = null;
         this.searchableSelectElement.focus();
-        if (!this.isMenuEnabled()) {
-          this.setMenuChange(false);
-        }
       }
       else {
         this.customSelectElement.focus();
@@ -211,11 +212,15 @@ const Select = class {
       }
     };
     this.handleNativeSelectKeyDown = (event) => {
-      event.cancelBubble = true;
+      if ((event.key !== "Escape" && event.key !== "Tab") || this.open) {
+        event.cancelBubble = true;
+      }
       this.handleCharacterKeyDown(event.key);
     };
     this.handleKeyDown = (event) => {
-      event.cancelBubble = true;
+      if ((event.key !== "Escape" && event.key !== "Tab") || this.open) {
+        event.cancelBubble = true;
+      }
       const isArrowKey = event.key === "ArrowDown" || event.key === "ArrowUp";
       if (!this.open) {
         if (this.isExternalFiltering() && (event.key === "Enter" || isArrowKey)) {
@@ -232,7 +237,7 @@ const Select = class {
         this.setMenuChange(false);
       }
       else {
-        if (!(isArrowKey && this.noOptions !== null) && this.isMenuEnabled()) {
+        if (!(isArrowKey && this.noOptions !== null)) {
           if (!(event.key === " " && this.pressedCharacters.length > 0)) {
             // Keyboard events get passed onto ic-menu
             this.menu.handleKeyboardOpen(event);
@@ -266,6 +271,7 @@ const Select = class {
       let menuOptionsFiltered;
       if (this.searchable) {
         menuOptionsFiltered = getFilteredMenuOptions(options, this.includeDescriptionsInSearch, this.inputValueToFilter, this.searchMatchPosition);
+        this.searchableMenuItemSelected = false;
       }
       else {
         menuOptionsFiltered = getFilteredMenuOptions(options, false, this.pressedCharacters, "start");
@@ -337,12 +343,7 @@ const Select = class {
       this.emitIcChange(this.searchableSelectInputValue);
       this.hiddenInputValue = this.searchableSelectInputValue;
       this.inputValueToFilter = this.searchableSelectInputValue;
-      if (this.isMenuEnabled()) {
-        this.setMenuChange(true);
-      }
-      else {
-        this.setMenuChange(false);
-      }
+      this.setMenuChange(true);
       if (!this.disableFilter) {
         this.handleFilter();
         this.debounceAriaLiveUpdate();
@@ -403,46 +404,46 @@ const Select = class {
         this.hiddenInputValue = this.value;
       }
     };
-    this.label = undefined;
-    this.options = [];
-    this.required = false;
-    this.hideLabel = false;
+    this.ariaActiveDescendant = undefined;
+    this.clearButtonFocused = false;
+    this.debounceIcChange = undefined;
+    this.hiddenInputValue = undefined;
+    this.noOptions = null;
+    this.open = false;
+    this.pressedCharacters = "";
+    this.searchableSelectInputValue = null;
+    this.charactersUntilSuggestions = 0;
     this.disabled = false;
-    this.readonly = false;
-    this.placeholder = "Select an option";
-    this.helperText = "";
-    this.small = false;
+    this.disableFilter = false;
+    this.emptyOptionListText = "No results found";
     this.fullWidth = false;
-    this.validationStatus = "";
-    this.validationText = "";
-    this.value = undefined;
-    this.debounce = 0;
-    this.name = this.inputId;
-    this.showClearButton = false;
-    this.searchable = false;
+    this.helperText = "";
+    this.hideLabel = false;
     this.includeDescriptionsInSearch = false;
     this.includeGroupTitlesInSearch = false;
+    this.label = undefined;
+    this.loadingErrorLabel = "Loading Error";
+    this.loadingLabel = "Loading...";
+    this.name = this.inputId;
+    this.placeholder = "Select an option";
+    this.readonly = false;
+    this.required = false;
+    this.searchable = false;
     this.searchMatchPosition = "anywhere";
-    this.charactersUntilSuggestions = 0;
-    this.emptyOptionListText = "No results found";
-    this.disableFilter = false;
+    this.showClearButton = false;
+    this.small = false;
     this.timeout = undefined;
-    this.loadingLabel = "Loading...";
-    this.loadingErrorLabel = "Loading Error";
+    this.validationStatus = "";
+    this.validationText = "";
     this.loading = false;
-    this.open = false;
-    this.clearButtonFocused = false;
-    this.searchableSelectInputValue = null;
+    this.options = [];
     this.filteredOptions = this.options;
-    this.ariaActiveDescendant = undefined;
-    this.noOptions = null;
-    this.initialValue = this.value;
+    this.debounce = 0;
     this.currDebounce = this.debounce;
-    this.currValue = this.value;
-    this.debounceIcChange = undefined;
-    this.pressedCharacters = "";
-    this.hiddenInputValue = undefined;
+    this.value = undefined;
+    this.initialValue = this.value;
     this.inputValueToFilter = this.value;
+    this.currValue = this.value;
   }
   loadingHandler(newValue) {
     newValue && this.triggerLoading();
@@ -457,7 +458,7 @@ const Select = class {
           this.noOptions = null;
           this.filteredOptions = this.options;
         }
-        else if (this.isMenuEnabled()) {
+        else {
           this.noOptions = [{ label: this.emptyOptionListText, value: "" }];
           this.filteredOptions = this.noOptions;
         }
@@ -490,6 +491,36 @@ const Select = class {
         this.getLabelFromValue(this.currValue) || this.currValue;
     }
   }
+  disconnectedCallback() {
+    removeFormResetListener(this.host, this.handleFormReset);
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.host, [
+      ...IC_INHERITED_ARIA,
+      "tabindex",
+      "title",
+    ]);
+    removeDisabledFalse(this.disabled, this.host);
+    this.setOptionsValuesFromLabels();
+    addFormResetListener(this.host, this.handleFormReset);
+    if (!this.options.length) {
+      this.initialOptionsEmpty = true;
+    }
+    else {
+      this.setDefaultValue();
+    }
+  }
+  componentDidLoad() {
+    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Select");
+    if (this.loading)
+      this.triggerLoading();
+    this.hiddenInputValue = this.searchable && this.currValue;
+  }
+  componentDidRender() {
+    if (this.nativeSelectElement && !this.disabled) {
+      this.setTextColor();
+    }
+  }
   /**
    * Sets focus on the input box.
    */
@@ -522,42 +553,14 @@ const Select = class {
       this.hasSetDefaultValue = true;
     }
   }
-  componentWillLoad() {
-    this.inheritedAttributes = inheritAttributes(this.host, [
-      ...IC_INHERITED_ARIA,
-      "tabindex",
-      "title",
-    ]);
-    this.setOptionsValuesFromLabels();
-    addFormResetListener(this.host, this.handleFormReset);
-    if (!this.options.length) {
-      this.initialOptionsEmpty = true;
-    }
-    else {
-      this.setDefaultValue();
-    }
-  }
-  componentDidRender() {
-    if (this.nativeSelectElement && !this.disabled) {
-      this.setTextColor();
-    }
-  }
-  componentDidLoad() {
-    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Select");
-    if (this.loading)
-      this.triggerLoading();
-    this.hiddenInputValue = this.searchable && this.currValue;
-  }
-  disconnectedCallback() {
-    removeFormResetListener(this.host, this.handleFormReset);
-  }
   render() {
-    var _a, _b;
     const { small, disabled, fullWidth, helperText, hideLabel, label, menuId, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, currValue, } = this;
-    const isOrHasLoaded = ((_a = (searchable ? this.filteredOptions : options)[0]) === null || _a === void 0 ? void 0 : _a.label) ===
-      this.loadingLabel ||
-      ((_b = (searchable ? this.filteredOptions : options)[0]) === null || _b === void 0 ? void 0 : _b.label) ===
-        this.loadingErrorLabel;
+    const noOptionSelect = searchable &&
+      (this.loading ||
+        this.hasTimedOut ||
+        (this.noOptions !== null &&
+          this.noOptions[0] &&
+          this.noOptions[0].label === this.emptyOptionListText));
     const inputValue = this.searchable ? this.hiddenInputValue : currValue;
     renderHiddenInput(true, this.host, name, inputValue, disabled);
     const invalid = validationStatus === IcInformationStatus.Error ? "true" : "false";
@@ -593,10 +596,10 @@ const Select = class {
       }, innerHTML: Expand, "aria-hidden": "true" }))), currValue && showClearButton && (h("ic-button", { id: "clear-button", "aria-label": "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: small ? "small" : "default", variant: "icon", appearance: this.clearButtonFocused
         ? IcThemeForegroundEnum.Light
         : IcThemeForegroundEnum.Dark }))))), !isMobileOrTablet() && (h("ic-menu", { class: {
-        "no-results": this.noOptions !== null || isOrHasLoaded,
+        "no-results": noOptionSelect,
       }, ref: (el) => (this.menu = el), inputEl: searchable
         ? this.searchableSelectElement
-        : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, small: small, menuId: menuId, open: this.open, options: searchable ? this.filteredOptions : options, value: currValue, fullWidth: fullWidth, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuKeyPress: this.handleMenuKeyPress, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.host, onTimeoutBlur: this.onTimeoutBlur, activationType: this.searchable ? "manual" : "automatic" })), hasValidationStatus(this.validationStatus, this.disabled) && (h("ic-input-validation", { class: { "menu-open": this.open }, ariaLiveMode: "polite", status: validationStatus, message: validationText, for: this.inputId })))));
+        : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, small: small, menuId: menuId, open: this.open, options: searchable ? this.filteredOptions : options, value: currValue, fullWidth: fullWidth, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuKeyPress: this.handleMenuKeyPress, onMenuValueChange: this.handleMenuValueChange, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.host, onTimeoutBlur: this.onTimeoutBlur, activationType: this.searchable ? "manual" : "automatic" })), hasValidationStatus(this.validationStatus, this.disabled) && (h("ic-input-validation", { class: { "menu-open": this.open }, ariaLiveMode: "polite", status: validationStatus, message: validationText, for: this.inputId })))));
   }
   static get delegatesFocus() { return true; }
   get host() { return getElement(this); }