@ukic/canary-web-components 2.0.0-canary.0 → 2.0.0-canary.1

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4f4d2b43.js');
-const helpers = require('./helpers-3811d14b.js');
-const types = require('./types-3eb02246.js');
+const index = require('./index-990b968b.js');
+const helpers = require('./helpers-d166f875.js');
+const types = require('./types-7d67439f.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"/>
@@ -320,6 +320,48 @@ const Select = class {
       clearTimeout(this.debounceIcChange);
       this.icChange.emit({ value: value });
     };
+    /**
+     * Processes the provided array of IcMenuOptions, removing duplicates and reporting them with a console.warn
+     * @param options array of IcMenuOptions
+     * @returns a new options object, with all entries possessing a duplicate 'value' field removed
+     */
+    this.deduplicateOptions = (options) => {
+      const uniqueValues = [];
+      const dedupedOptions = [];
+      let dedupedChildren;
+      options.forEach((option) => {
+        if (option.children) {
+          //If an option has children, we will loop through them
+          dedupedChildren = [];
+          option.children.forEach((child) => {
+            if (uniqueValues.includes(child.value)) {
+              console.warn(`ic-select with label ${this.label} was populated with duplicate option (value: ${child.value}) which has been removed.`);
+            }
+            else {
+              uniqueValues.push(child.value);
+              dedupedChildren.push(child);
+            }
+          });
+          // construct a modified option, inserting the deduplicated children alongside the original information
+          const modifiedParent = Object.assign(Object.assign({}, option), { children: dedupedChildren });
+          dedupedOptions.push(modifiedParent);
+        }
+        else {
+          // If an option does not have children, assess to see if it's value has been included already
+          if (uniqueValues.includes(option.value)) {
+            console.warn(`ic-select with label ${this.label} was populated with duplicate option (value: ${option.value}) which has been removed.`);
+          }
+          else {
+            uniqueValues.push(option.value);
+            dedupedOptions.push(option);
+          }
+        }
+      });
+      return dedupedOptions;
+    };
+    /**
+     * Loop through options array and for all options with no value, infer it from the label
+     */
     this.setOptionsValuesFromLabels = () => {
       if (this.options.length > 0 && this.options.map) {
         this.options.map((option) => {
@@ -346,7 +388,7 @@ const Select = class {
       }
     };
     this.getLabelFromValue = (value) => {
-      return helpers.getLabelFromValue(value, this.options);
+      return helpers.getLabelFromValue(value, this.uniqueOptions);
     };
     this.getFilteredChildMenuOptions = (option) => {
       let children = option.children;
@@ -422,7 +464,7 @@ const Select = class {
           !this.loading &&
           (!this.searchable || this.searchableMenuItemSelected)) {
           this.noOptions = null;
-          this.menu.options = this.options;
+          this.menu.options = this.uniqueOptions;
         }
       }
       if (event.detail !== 0) {
@@ -446,7 +488,7 @@ const Select = class {
       if (this.searchable) {
         this.searchableSelectElement.value = null;
         this.searchableSelectInputValue = null;
-        this.filteredOptions = this.options;
+        this.filteredOptions = this.uniqueOptions;
         this.hiddenInputValue = null;
         this.searchableSelectElement.focus();
       }
@@ -494,7 +536,7 @@ const Select = class {
         else {
           if (!this.hasTimedOut) {
             this.noOptions = null;
-            this.menu.options = this.options;
+            this.menu.options = this.uniqueOptions;
           }
         }
       }
@@ -526,7 +568,7 @@ const Select = class {
       this.clearButtonFocused = false;
     };
     this.handleFilter = () => {
-      const options = this.searchable ? [...this.options] : this.ungroupedOptions;
+      const options = this.deduplicateOptions(this.searchable ? [...this.uniqueOptions] : this.ungroupedOptions);
       let isGrouped = false;
       let newFilteredOptions = [];
       options.map((option) => {
@@ -578,13 +620,19 @@ const Select = class {
         this.filteredOptions = this.noOptions;
       }
     };
+    /**
+     * Put the select component into loading state.
+     * Replace options with the loading message. If timeout is enabled, set the timeout and once passed, replace options with the loading error message
+     */
     this.triggerLoading = () => {
       this.hasTimedOut = false;
       this.noOptions = [{ label: this.loadingLabel, value: "", loading: true }];
-      if (this.filteredOptions !== this.noOptions && this.searchable)
+      if (this.filteredOptions !== this.noOptions && this.searchable) {
         this.filteredOptions = this.noOptions;
-      else if (!this.searchable && this.options !== this.noOptions)
-        this.options = this.noOptions;
+      }
+      else if (this.uniqueOptions !== this.noOptions && !this.searchable) {
+        this.uniqueOptions = this.noOptions;
+      }
       if (this.timeout) {
         this.timeoutTimer = window.setTimeout(() => {
           this.loading = false;
@@ -594,13 +642,13 @@ const Select = class {
           ];
           this.filteredOptions = this.noOptions;
           if (!this.searchable)
-            this.options = this.noOptions;
+            this.uniqueOptions = this.noOptions;
         }, this.timeout);
       }
     };
     this.getValueFromLabel = (label) => {
       var _a;
-      return (_a = this.options.find((option) => option.label === label)) === null || _a === void 0 ? void 0 : _a.value;
+      return (_a = this.uniqueOptions.find((option) => option.label === label)) === null || _a === void 0 ? void 0 : _a.value;
     };
     this.handleSearchableSelectInput = (event) => {
       this.searchableSelectInputValue = event.target.value;
@@ -703,6 +751,7 @@ const Select = class {
     this.loading = false;
     this.options = [];
     this.filteredOptions = this.options;
+    this.uniqueOptions = this.options;
     this.debounce = 0;
     this.currDebounce = this.debounce;
     this.value = undefined;
@@ -721,10 +770,12 @@ const Select = class {
         if (this.options.length > 0) {
           this.setOptionsValuesFromLabels();
           this.noOptions = null;
-          this.filteredOptions = this.options;
+          this.uniqueOptions = this.deduplicateOptions(this.options);
+          this.filteredOptions = this.uniqueOptions;
         }
         else {
           this.noOptions = [{ label: this.emptyOptionListText, value: "" }];
+          this.uniqueOptions = this.noOptions;
           this.filteredOptions = this.noOptions;
         }
         this.updateSearchableSelectResultAriaLive();
@@ -732,7 +783,8 @@ const Select = class {
       }
       else {
         this.setOptionsValuesFromLabels();
-        this.filteredOptions = this.options;
+        this.uniqueOptions = this.deduplicateOptions(this.options);
+        this.filteredOptions = this.uniqueOptions;
         if (this.initialOptionsEmpty) {
           this.setDefaultValue();
           this.initialOptionsEmpty = false;
@@ -773,12 +825,14 @@ const Select = class {
     }
     else {
       this.setDefaultValue();
+      this.uniqueOptions = this.deduplicateOptions(this.options);
     }
   }
   componentDidLoad() {
     helpers.onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Select");
-    if (this.loading)
+    if (this.loading) {
       this.triggerLoading();
+    }
     this.hiddenInputValue = this.searchable && this.currValue;
   }
   componentDidRender() {
@@ -864,7 +918,7 @@ const Select = class {
         "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, onMenuValueChange: this.handleMenuValueChange, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.host, onTimeoutBlur: this.onTimeoutBlur, activationType: this.searchable ? "manual" : "automatic" })), helpers.hasValidationStatus(this.validationStatus, this.disabled) && (index.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 : this.uniqueOptions, 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" })), helpers.hasValidationStatus(this.validationStatus, this.disabled) && (index.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 index.getElement(this); }