npm - @ukic/web-components - Versions diffs - 3.0.0-alpha.9 → 3.1.0 - Mend

@ukic/web-components 3.0.0-alpha.9 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1061) hide show

package/dist/collection/components/ic-menu/ic-menu.js CHANGED Viewed

@@ -22,6 +22,46 @@ export class Menu {
         this.preventMenuFocus = false; // (When multiple) ensures focus moves straight to select all button from menu.
         this.shiftPressed = false;
         this.ungroupedOptions = [];
+        this.focusFromSearchKeypress = false;
+        this.initialOptionsListRender = false;
+        this.keyboardNav = false;
+        this.preventIncorrectTabOrder = false;
+        /**
+         * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.
+         */
+        this.activationType = "automatic";
+        /**
+         * @internal If `true`, autofocus will be applied on selected item when menu is open.
+         */
+        this.autofocusOnSelected = true;
+        /**
+         *  If `true`, the menu will close when an option is selected.
+         */
+        this.closeOnSelect = true;
+        /**
+         *  If `true`, the menu will fill the width of the container.
+         */
+        this.fullWidth = false;
+        /**
+         * The custom name for the label field for IcMenuOption.
+         */
+        this.labelField = "label";
+        /**
+         * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.
+         */
+        this.searchMode = "navigation";
+        /**
+         * @internal If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown.
+         */
+        this.selectOnEnter = false;
+        /**
+         * The size of the menu.
+         */
+        this.size = "medium";
+        /**
+         * The custom name for the value field for IcMenuOption.
+         */
+        this.valueField = "value";
         this.handleClearListener = () => {
             this.optionHighlighted = "";
         };
@@ -384,7 +424,7 @@ export class Menu {
                 const menuOptions = this.getMenuOptions();
                 const selectedOptionIndex = menuOptions.findIndex((option) => option.value === value);
                 this.handleOptionSelect(event, selectedOptionIndex, true);
-                this.multiOptionClicked = value;
+                this.multiOptionClicked = value || null;
             }
             else {
                 this.menuOptionSelect.emit({ value, label });
@@ -402,14 +442,15 @@ export class Menu {
             }
         };
         this.handleBlur = (event) => {
+            var _a, _b, _c, _d;
             if (event.relatedTarget !== this.inputEl) {
                 if (event.relatedTarget === this.selectAllButton) {
-                    this.menu.removeAttribute(this.ACTIVE_DESCENDANT);
+                    (_a = this.menu) === null || _a === void 0 ? void 0 : _a.removeAttribute(this.ACTIVE_DESCENDANT);
                 }
-                if (!(this.menu.contains(event.relatedTarget) ||
+                if (!(((_b = this.menu) === null || _b === void 0 ? void 0 : _b.contains(event.relatedTarget)) ||
                     event.relatedTarget === this.selectAllButton)) {
                     this.handleMenuChange(false, this.hasPreviouslyBlurred);
-                    this.menu.removeAttribute(this.ACTIVE_DESCENDANT);
+                    (_c = this.menu) === null || _c === void 0 ? void 0 : _c.removeAttribute(this.ACTIVE_DESCENDANT);
                     this.lastOptionFocused = null;
                     this.lastOptionSelected = null;
                 }
@@ -417,7 +458,7 @@ export class Menu {
             else {
                 this.handleMenuChange(false);
                 this.preventClickOpen = true;
-                this.menu.removeAttribute(this.ACTIVE_DESCENDANT);
+                (_d = this.menu) === null || _d === void 0 ? void 0 : _d.removeAttribute(this.ACTIVE_DESCENDANT);
                 this.lastOptionFocused = null;
                 this.lastOptionSelected = null;
             }
@@ -448,15 +489,17 @@ export class Menu {
             }
         };
         this.handleSelectAllClick = () => {
+            var _a;
             this.keyboardNav = false;
-            this.menu.focus();
+            (_a = this.menu) === null || _a === void 0 ? void 0 : _a.focus();
             this.emitSelectAllEvents();
             this.lastOptionFocused = null;
             this.lastOptionSelected = null;
         };
         this.handleSelectAllBlur = (event) => {
+            var _a;
             this.host.classList.remove("ic-select-select-all-focused");
-            if (!this.menu.contains(event.relatedTarget)) {
+            if (!((_a = this.menu) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget))) {
                 this.handleMenuChange(false, false);
             }
         };
@@ -629,6 +672,7 @@ export class Menu {
         };
         this.isManualMode = this.activationType === "manual";
         this.scrollToSelected = (menu) => {
+            var _a;
             const selectedOption = this.selectOnEnter
                 ? this.host.querySelector(`li[data-value="${this.optionHighlighted}"]`)
                 : menu.querySelector(".option[aria-selected='true']");
@@ -640,7 +684,7 @@ export class Menu {
                 }
                 // 'aria-activedescendant' affects screen reader focus
                 // https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/#kbd_focus_activedescendant
-                this.menu.setAttribute(this.ACTIVE_DESCENDANT, selectedOption.id);
+                (_a = this.menu) === null || _a === void 0 ? void 0 : _a.setAttribute(this.ACTIVE_DESCENDANT, selectedOption.id);
                 selectedOption.focus();
             }
         };
@@ -661,22 +705,24 @@ export class Menu {
             this.ungroupedOptionsSet.emit({ options: this.ungroupedOptions });
         };
         this.setMenuScrollbar = () => {
+            var _a;
             let optionsHeight = 0;
             this.host
                 .querySelectorAll(".option")
                 .forEach((option) => (optionsHeight += option.clientHeight));
             if (optionsHeight >= 320) {
-                this.menu.classList.add("menu-scroll");
+                (_a = this.menu) === null || _a === void 0 ? void 0 : _a.classList.add("menu-scroll");
             }
         };
         this.handleTimeoutBlur = (ev) => {
             this.timeoutBlur.emit({ ev });
         };
         this.optionContent = (option, selected) => {
+            var _a;
             const showCheckIcon = !!option[this.valueField] &&
                 !!this.value &&
                 selected &&
-                this.parentEl.tagName !== this.SEARCH_BAR_TAG;
+                ((_a = this.parentEl) === null || _a === void 0 ? void 0 : _a.tagName) !== this.SEARCH_BAR_TAG;
             return (h(Fragment, null, option.loading && h("ic-loading-indicator", { size: "icon" }), h("div", { class: {
                     "option-text-container": true,
                     "show-check-icon": showCheckIcon,
@@ -690,41 +736,20 @@ export class Menu {
                         ? (keyboardNav || initialOptionsListRender) &&
                             option[this.valueField] === optionHighlighted
                         : keyboardNav && selected,
-                    "last-recommended-option": option.recommended &&
+                    "last-recommended-option": !!(option.recommended &&
                         options[index + 1] &&
-                        !options[index + 1].recommended,
-                    "disabled-option": option.disabled,
-                    "loading-option": option.loading,
-                    timeout: option.timedOut,
+                        !options[index + 1].recommended),
+                    "disabled-option": !!option.disabled,
+                    "loading-option": !!option.loading,
+                    timeout: !!option.timedOut,
                 }, role: "option", tabindex: open &&
                     (selected || option[this.valueField] === optionHighlighted) &&
                     keyboardNav
                     ? "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, 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", "aria-labelledby": "error-title", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#000000" }, h("title", { id: "error-title" }, "Error"), h("g", { id: "close-octagon" }, h("path", { id: "Vector", 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))));
+                    : "-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", "aria-labelledby": "error-title", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#000000" }, h("title", { id: "error-title" }, "Error"), h("g", { id: "close-octagon" }, h("path", { id: "Vector", 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))));
         };
-        this.focusFromSearchKeypress = false;
-        this.initialOptionsListRender = false;
-        this.keyboardNav = false;
-        this.optionHighlighted = undefined;
-        this.preventIncorrectTabOrder = false;
-        this.menuOptions = undefined;
-        this.activationType = "automatic";
-        this.anchorEl = undefined;
-        this.autofocusOnSelected = true;
-        this.closeOnSelect = true;
-        this.fullWidth = false;
-        this.inputEl = undefined;
-        this.inputLabel = undefined;
-        this.labelField = "label";
-        this.menuId = undefined;
-        this.open = undefined;
-        this.parentEl = undefined;
-        this.searchMode = "navigation";
-        this.selectOnEnter = false;
-        this.size = "medium";
-        this.options = undefined;
-        this.value = undefined;
-        this.valueField = "value";
     }
     watchOpenHandler() {
         if (!this.open && this.popperInstance) {
@@ -739,7 +764,7 @@ export class Menu {
         this.loadUngroupedOptions();
     }
     connectedCallback() {
-        this.getParentEl(this.parentEl);
+        this.parentEl && this.getParentEl(this.parentEl);
         if (this.isSearchBar) {
             if (this.searchMode === "navigation")
                 this.setHighlightedOption(0);
@@ -755,12 +780,12 @@ export class Menu {
         (_b = this.parentEl) === null || _b === void 0 ? void 0 : _b.removeEventListener("icSubmitSearch", this.handleSubmitSearch);
     }
     componentWillLoad() {
-        var _a, _b;
+        var _a, _b, _c, _d;
         this.loadUngroupedOptions();
-        this.parentEl.addEventListener("icClear", this.handleClearListener);
-        this.parentEl.addEventListener("icSubmitSearch", this.handleSubmitSearch);
-        this.hasTimedOut = (_a = this.options) === null || _a === void 0 ? void 0 : _a.some((opt) => opt.timedOut);
-        this.isLoading = (_b = this.options) === null || _b === void 0 ? void 0 : _b.some((opt) => opt.loading);
+        (_a = this.parentEl) === null || _a === void 0 ? void 0 : _a.addEventListener("icClear", this.handleClearListener);
+        (_b = this.parentEl) === null || _b === void 0 ? void 0 : _b.addEventListener("icSubmitSearch", this.handleSubmitSearch);
+        this.hasTimedOut = (_c = this.options) === null || _c === void 0 ? void 0 : _c.some((opt) => opt.timedOut);
+        this.isLoading = (_d = this.options) === null || _d === void 0 ? void 0 : _d.some((opt) => opt.loading);
     }
     componentDidLoad() {
         if (this.isSearchBar &&
@@ -777,7 +802,10 @@ export class Menu {
     }
     componentDidUpdate() {
         const inputValueInOptions = this.options.some((option) => option[this.valueField] === this.value);
-        if (this.open && this.options.length !== 0 && !this.preventMenuFocus) {
+        if (this.menu &&
+            this.open &&
+            this.options.length !== 0 &&
+            !this.preventMenuFocus) {
             if (this.value &&
                 this.keyboardNav &&
                 inputValueInOptions &&
@@ -801,7 +829,7 @@ export class Menu {
                 this.menu.focus();
             }
         }
-        if (this.open && !this.value && this.selectOnEnter) {
+        if (this.menu && this.open && !this.value && this.selectOnEnter) {
             this.scrollToSelected(this.menu);
         }
         this.preventMenuFocus = false;
@@ -886,8 +914,8 @@ export class Menu {
         const { inputLabel, options, menuId, value, fullWidth, hasTimedOut, isLoading, size, open, inputEl, keyboardNav, parentEl, SEARCH_BAR_TAG, } = 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, { class: {
-                "ic-menu-full-width": fullWidth,
+        return (h(Host, { key: 'da6a6114d695c99a303ddae835ebbdb81c4bf0e8', 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) ||
                     hasTimedOut ||
@@ -895,7 +923,7 @@ export class Menu {
                 [`ic-menu-${size}`]: true,
                 "ic-menu-open": open && options.length !== 0,
                 "ic-menu-multiple": this.isMultiSelect,
-            } }, options.length !== 0 && (h("ul", { id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": this.isMultiSelect ? "true" : "false", tabindex: open &&
+            } }, options.length !== 0 && (h("ul", { key: '8a6b17763235c84e94621e2f83c3a02302f5a8bc', id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": this.isMultiSelect ? "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)
@@ -923,7 +951,7 @@ export class Menu {
             this.isMultiSelect &&
             !isLoading &&
             !hasTimedOut &&
-            !hasNoResults && (h("div", { class: "option-bar" }, h("ic-typography", null, h("p", null, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { 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: '453d9a11e3933a48aa85f39f686bdf98a6ba0953', class: "option-bar" }, h("ic-typography", { key: '8ca77bff0d3fbbc4264e83ff815f2de5ff98670c' }, h("p", { key: '6262a580c6071c81146e082f2e839a06efd90461' }, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { key: '192c92dec9525bc2bf3fe386414b292483d25d72', 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)))));
     }
     static get is() { return "ic-menu"; }
     static get encapsulation() { return "scoped"; }
@@ -944,7 +972,7 @@ export class Menu {
                 "mutable": false,
                 "complexType": {
                     "original": "IcActivationTypes",
-                    "resolved": "\"automatic\" | \"manual\"",
+                    "resolved": "\"automatic\" | \"manual\" | undefined",
                     "references": {
                         "IcActivationTypes": {
                             "location": "import",
@@ -959,6 +987,8 @@ export class Menu {
                     "tags": [],
                     "text": "Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "activation-type",
                 "reflect": false,
                 "defaultValue": "\"automatic\""
@@ -981,18 +1011,20 @@ export class Menu {
                 "docs": {
                     "tags": [],
                     "text": "The reference to an anchor element the menu will position itself from when rendered."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "autofocusOnSelected": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "internal",
@@ -1000,6 +1032,8 @@ export class Menu {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "autofocus-on-selected",
                 "reflect": false,
                 "defaultValue": "true"
@@ -1009,15 +1043,17 @@ export class Menu {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the menu will close when an option is selected."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "close-on-select",
                 "reflect": false,
                 "defaultValue": "true"
@@ -1027,15 +1063,17 @@ export class Menu {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the menu will fill the width of the container."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "full-width",
                 "reflect": false,
                 "defaultValue": "false"
@@ -1058,7 +1096,9 @@ export class Menu {
                 "docs": {
                     "tags": [],
                     "text": "The reference to the input element."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "inputLabel": {
                 "type": "string",
@@ -1074,6 +1114,8 @@ export class Menu {
                     "tags": [],
                     "text": "The label for the input element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "input-label",
                 "reflect": false
             },
@@ -1082,15 +1124,17 @@ export class Menu {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The custom name for the label field for IcMenuOption."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label-field",
                 "reflect": false,
                 "defaultValue": "\"label\""
@@ -1109,6 +1153,8 @@ export class Menu {
                     "tags": [],
                     "text": "The ID of the menu."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "menu-id",
                 "reflect": false
             },
@@ -1126,6 +1172,8 @@ export class Menu {
                     "tags": [],
                     "text": "If `true`, the menu will be displayed open."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "open",
                 "reflect": true
             },
@@ -1134,7 +1182,7 @@ export class Menu {
                 "mutable": false,
                 "complexType": {
                     "original": "HTMLElement",
-                    "resolved": "HTMLElement",
+                    "resolved": "HTMLElement | undefined",
                     "references": {
                         "HTMLElement": {
                             "location": "global",
@@ -1150,14 +1198,16 @@ export class Menu {
                             "text": "- The parent element if ic-menu is nested inside another component."
                         }],
                     "text": ""
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "searchMode": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "IcSearchBarSearchModes",
-                    "resolved": "\"navigation\" | \"query\"",
+                    "resolved": "\"navigation\" | \"query\" | undefined",
                     "references": {
                         "IcSearchBarSearchModes": {
                             "location": "import",
@@ -1172,6 +1222,8 @@ export class Menu {
                     "tags": [],
                     "text": "Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "search-mode",
                 "reflect": false,
                 "defaultValue": "\"navigation\""
@@ -1181,7 +1233,7 @@ export class Menu {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1193,6 +1245,8 @@ export class Menu {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "select-on-enter",
                 "reflect": false,
                 "defaultValue": "false"
@@ -1202,7 +1256,7 @@ export class Menu {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
                     "references": {
                         "IcSizes": {
                             "location": "import",
@@ -1217,6 +1271,8 @@ export class Menu {
                     "tags": [],
                     "text": "The size of the menu."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
@@ -1240,7 +1296,9 @@ export class Menu {
                 "docs": {
                     "tags": [],
                     "text": "The possible menu selection options."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "value": {
                 "type": "string",
@@ -1256,6 +1314,8 @@ export class Menu {
                     "tags": [],
                     "text": "The value of the currently selected option - or array of values (if multiple options allowed)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false
             },
@@ -1264,15 +1324,17 @@ export class Menu {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The custom name for the value field for IcMenuOption."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value-field",
                 "reflect": false,
                 "defaultValue": "\"value\""
@@ -1427,13 +1489,13 @@ export class Menu {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "IcValueEventDetail",
-                    "resolved": "IcValueEventDetail",
+                    "original": "IcMultiValueEventDetail",
+                    "resolved": "IcMultiValueEventDetail",
                     "references": {
-                        "IcValueEventDetail": {
+                        "IcMultiValueEventDetail": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcValueEventDetail"
+                            "id": "src/utils/types.ts::IcMultiValueEventDetail"
                         }
                     }
                 }