@ukic/web-components 3.12.0 → 3.14.0

package/dist/components/ic-menu2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
 import { c as checkIcon } from './check-icon.js';
-import { E as isMacDevice, o as onComponentRequiredPropUndefined, F as getOptionsWithoutGroupTitlesCount } from './helpers.js';
+import { G as isMacDevice, o as onComponentRequiredPropUndefined, H as getOptionsWithoutGroupTitlesCount } from './helpers.js';
 import { f as IC_CUSTOM_ALLOWED_COMPONENTS } from './constants.js';
 import { d as defineCustomElement$4 } from './ic-button2.js';
 import { d as defineCustomElement$3 } from './ic-loading-indicator2.js';
@@ -1811,7 +1811,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
             const { value, label } = event.target.dataset;
             if (this.multiSelect) {
                 const menuOptions = this.getMenuOptions();
-                const selectedOptionIndex = menuOptions.findIndex((option) => option.value === value);
+                const selectedOptionIndex = menuOptions.findIndex((option) => option[this.valueField] === value);
                 this.handleOptionSelect(event, selectedOptionIndex, true);
                 this.multiOptionClicked = value || null;
             }
@@ -2116,11 +2116,14 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
             return (h(Fragment, null, option.loading && h("ic-loading-indicator", { size: "icon" }), h("div", { class: {
                     "option-text-container": true,
                     "show-check-icon": showCheckIcon,
-                } }, h("div", { class: "option-label" }, option.icon && (h("div", { class: "option-icon", innerHTML: sanitizeHTMLIconString(option.icon), "aria-hidden": "true" })), h("ic-typography", { variant: "body", "aria-hidden": "true" }, option[this.labelField])), option.description && (h("ic-typography", { id: `${this.getOptionId(option[this.valueField])}-description`, class: "option-description", variant: "caption", "aria-hidden": "true" }, h("p", null, option.description))), option.element && (h("div", { class: "option-element", innerHTML: sanitizeHTMLString(option.element.component), "aria-hidden": "true" }))), showCheckIcon && h("span", { class: "check-icon", innerHTML: checkIcon })));
+                } }, (option.icon || !option.hideLabel) && (h("div", { class: "option-label" }, option.icon && (h("div", { class: "option-icon", innerHTML: sanitizeHTMLIconString(option.icon), "aria-hidden": "true" })), !option.hideLabel && (h("ic-typography", { variant: "body", "aria-hidden": "true" }, option[this.labelField])))), option.description && (h("ic-typography", { id: `${this.getOptionId(option[this.valueField])}-description`, class: "option-description", variant: "caption", "aria-hidden": "true" }, h("p", null, option.description))), option.element && (h("div", { class: {
+                    "option-element": option.icon || !option.hideLabel || option.description,
+                }, innerHTML: sanitizeHTMLString(option.element.component), "aria-hidden": "true" }))), showCheckIcon && h("span", { class: "check-icon", innerHTML: checkIcon })));
         };
         this.displayOption = (option, selected, index, parentOption) => {
+            var _a;
             const { open, keyboardNav, isManualMode, initialOptionsListRender, optionHighlighted, options, } = this;
-            return (h("li", { id: this.getOptionId(option[this.valueField]), class: {
+            return (h("li", Object.assign({ id: this.getOptionId(option[this.valueField]), class: {
                     option: true,
                     "focused-option": isManualMode
                         ? (keyboardNav || initialOptionsListRender) &&
@@ -2138,7 +2141,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
                     ? "0"
                     : "-1", "aria-label": this.getOptionAriaLabel(option, parentOption), "aria-selected": selected ? "true" : "false", "aria-disabled": option.disabled ? "true" : "false", onClick: !option.timedOut && !option.loading
                     ? this.handleOptionClick
-                    : undefined, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, "data-value": option[this.valueField], "data-label": option[this.labelField] }, option.timedOut ? (h(Fragment, null, h("div", { class: "loading-error-info" }, h("svg", { class: "error-icon-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#000000" }, h("title", null, "Error"), h("g", null, h("path", { d: "M8.77 3L3.5 8.27V15.73L8.77 21H16.23L21.5 15.73V8.27L16.23 3M8.91 7L12.5 10.59L16.09 7L17.5 8.41L13.91 12L17.5 15.59L16.09 17L12.5 13.41L8.91 17L7.5 15.59L11.09 12L7.5 8.41" }))), h("ic-typography", { variant: "label" }, option[this.labelField])), h("ic-button", { size: "small", variant: "tertiary", onClick: this.handleRetry, onKeyDown: this.handleRetryKeyDown, onBlur: this.handleTimeoutBlur, id: "retry-button" }, "Retry"))) : (this.optionContent(option, selected))));
+                    : undefined, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, "data-value": option[this.valueField], "data-label": option[this.labelField] }, ((_a = option.htmlProps) !== null && _a !== void 0 ? _a : {})), option.timedOut ? (h(Fragment, null, h("div", { class: "loading-error-info" }, h("svg", { class: "error-icon-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#000000" }, h("title", null, "Error"), h("g", null, h("path", { d: "M8.77 3L3.5 8.27V15.73L8.77 21H16.23L21.5 15.73V8.27L16.23 3M8.91 7L12.5 10.59L16.09 7L17.5 8.41L13.91 12L17.5 15.59L16.09 17L12.5 13.41L8.91 17L7.5 15.59L11.09 12L7.5 8.41" }))), h("ic-typography", { variant: "label" }, option[this.labelField])), h("ic-button", { size: "small", variant: "tertiary", onClick: this.handleRetry, onKeyDown: this.handleRetryKeyDown, onBlur: this.handleTimeoutBlur, id: "retry-button" }, "Retry"))) : (this.optionContent(option, selected))));
         };
     }
     watchOpenHandler() {
@@ -2305,7 +2308,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
         const { inputLabel, options, menuId, value, fullWidth, hasTimedOut, isLoading, size, open, inputEl, keyboardNav, parentEl, SEARCH_BAR_TAG, multiSelect, } = this;
         const selectAllButtonText = `${(value === null || value === void 0 ? void 0 : value.length) === this.ungroupedOptions.length ? "Clear" : "Select"} all`;
         const hasNoResults = this.host.classList.contains("no-results");
-        return (h(Host, { key: 'e17a70bcf59709dd5b9d0cc7b404520ff06bcf35', class: {
+        return (h(Host, { key: '1e4da9c2108dc9df947dcf92f558fcbc14c3f686', class: {
                 "ic-menu-full-width": !!fullWidth,
                 "ic-menu-no-focus": ((inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) === "INPUT" &&
                     (parentEl === null || parentEl === void 0 ? void 0 : parentEl.tagName) !== SEARCH_BAR_TAG) ||
@@ -2314,7 +2317,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
                 [`ic-menu-${size}`]: true,
                 "ic-menu-open": open && options.length !== 0,
                 "ic-menu-multiple": multiSelect,
-            } }, options.length !== 0 && (h("ul", { key: '438cd6126c1296a14e216edc0a5d790a4705b143', id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": multiSelect ? "true" : "false", tabindex: open &&
+            } }, options.length !== 0 && (h("ul", { key: '0861edb24bdb21aecd3b70ec4d7f11112d4ad3eb', id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": multiSelect ? "true" : "false", tabindex: open &&
                 !keyboardNav &&
                 ((inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) !== "INPUT" ||
                     (parentEl === null || parentEl === void 0 ? void 0 : parentEl.tagName) === SEARCH_BAR_TAG)
@@ -2322,7 +2325,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
                 : "-1", ref: (el) => (this.menu = el), onKeyDown: this.handleMenuKeyDown, onKeyUp: this.handleMenuKeyUp, onBlur: this.handleBlur }, this.getSortedOptions(options).map((option, index) => {
             if (option.children) {
                 if (option.children.length > 0) {
-                    return (h("div", null, h("ic-typography", { class: "option-group-title", role: "presentation", variant: "subtitle-small" }, h("p", null, option[this.labelField])), option.children.map((childOption) => childOption.label &&
+                    return (h("div", null, h("ic-typography", { class: "option-group-title", role: "presentation", variant: "subtitle-small" }, h("p", null, option[this.labelField])), option.children.map((childOption) => childOption[this.labelField] &&
                         this.displayOption(childOption, multiSelect
                             ? value === null || value === void 0 ? void 0 : value.includes(childOption[this.valueField])
                             : childOption[this.valueField] === value, index, option))));
@@ -2333,7 +2336,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
             }
             else {
                 // Display option only if it has a label (rather than displaying an empty space)
-                return (option.label &&
+                return (option[this.labelField] &&
                     this.displayOption(option, multiSelect
                         ? value === null || value === void 0 ? void 0 : value.includes(option[this.valueField])
                         : option[this.valueField] === value, index));
@@ -2342,7 +2345,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
             multiSelect &&
             !isLoading &&
             !hasTimedOut &&
-            !hasNoResults && (h("div", { key: '5732c5ac4fa70ff249a7851d61aee8ccf46082d1', class: "option-bar" }, h("ic-typography", { key: '48ce8543a189cad706804715a077575b3774e490' }, h("p", { key: '63537752e580815f650c3d9bbf38b23267c5229c' }, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { key: '60c446e5303a3939494284b9ce7772feb1fe547c', class: "select-all-button", "aria-label": `${selectAllButtonText} options for ${inputLabel}`, ref: (el) => (this.selectAllButton = el), variant: "tertiary", onClick: this.handleSelectAllClick, onMouseDown: this.handleSelectAllMouseDown, onBlur: this.handleSelectAllBlur, onFocus: this.handleSelectAllFocus, size: size === "small" ? "small" : "medium" }, selectAllButtonText)))));
+            !hasNoResults && (h("div", { key: 'aa5a9084985ac02f145acbc5d45ff726ae5d575e', class: "option-bar" }, h("ic-typography", { key: 'c9854cfb8d9ddf6b54a4b66445020f1e437dece7' }, h("p", { key: '47b9491c4332bc7d547df9a6edbd97290cdb9535' }, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { key: 'a07f28d90a7fd4efa5d3a0574f161a111a46c048', class: "select-all-button", "aria-label": `${selectAllButtonText} options for ${inputLabel}`, ref: (el) => (this.selectAllButton = el), variant: "tertiary", onClick: this.handleSelectAllClick, onMouseDown: this.handleSelectAllMouseDown, onBlur: this.handleSelectAllBlur, onFocus: this.handleSelectAllFocus, size: size === "small" ? "small" : "medium" }, selectAllButtonText)))));
     }
     get host() { return this; }
     static get watchers() { return {