@watermarkinsights/ripple 5.11.0-1 → 5.11.0-11

package/dist/collection/components/selects/wm-nested-select/wm-nested-select.js

@@ -294,7 +294,7 @@ export class NestedSelect {
     }
     renderClearSelectionButton() {
         if (this.showClearSelectionButton) {
-            return (h("button", { class: "menuitem clear-selection", onClick: () => this.handleClearSelection(), tabindex: -1, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, this.clearSelectionMessage));
+            return (h("button", { class: "menuitem clear-selection", onClick: () => this.handleClearSelection(), tabindex: -1, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, h("div", { class: "svg-icon svg-close" }), this.clearSelectionMessage));
         }
     }
     renderSelectionCount(optgroupEl) {
@@ -325,16 +325,16 @@ export class NestedSelect {
                 this.isExpanded ? this.close() : this.open();
             },
         };
-        return (h(Host, { key: '0669fabf52f24b6e03d6fb99aa64edc83fd52c18', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '084ddf762d01a6aa631f7757abdc3339ef9c34f9', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '523fa912a6f133af76defda20cd69375eff3d290', class: "label-wrapper" }, h("label", { key: '5322a6d57d6567d32c1b899b42177e61d8521eb6', class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
-        // we can't use aria-required because the listbox is in a sub-component and it is not announced 
-        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { key: '568bf1ead352bed9e080fa2d366225deee3dba70', class: "button-wrapper" }, h("button", Object.assign({ key: 'b5c2c93abd411f6df28375f961fe7232bc145dec' }, buttonProps, { class: `displayedoption ${this.isExpanded ? "expanded" : ""}`, ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '9690b4b70ac5049d4a24bcc9b1d2d366e63cae2f', class: "overflowcontrol" }, h("span", { key: '13ec62a16385376bd6242c76189fecae5fb347d4', class: "button-text" }, this.renderButtonText())), this.renderOverflowCount(), h("div", { key: '905ff86d7ce0e2bec718130bbcd5d83f9c8a103e', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '7eb5fb39c2d84bde8712ed77627080f0572a7acc', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { key: '2fd0f2d8450baa37171161a86a35940dd5057a29', ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
+        return (h(Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
+        // we can't use aria-required because the listbox is in a sub-component and it is not announced
+        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { class: "button-wrapper" }, h("button", Object.assign({}, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { class: "overflowcontrol" }, h("span", { class: "button-text" }, this.renderButtonText())), h("div", { class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
             return (h("button", { class: `menuitem group-btn ${optgroupEl.disabled ? "disabled" : ""}`, role: "menuitem", "data-label": optgroupEl.label, tabindex: -1, "aria-disabled": optgroupEl.disabled, onClick: () => {
                     if (!optgroupEl.disabled) {
                         optgroupEl.isExpanded = !optgroupEl.isExpanded;
                         forceUpdate(this.el);
                     }
-                }, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, h("span", null, optgroupEl.label), this.renderSelectionCount(optgroupEl), optgroupEl.disabled && h("div", { class: "disabled-indication" }, "Disabled")));
-        })), h("div", { key: 'd7993e9a985e3b6bf4e04f9a721ca7bd1eafc368', ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", { key: 'd3b7de77e701007e1bb29d9f9f2ed6c8db8a2318' }))), h("div", { key: '2ee6fe98a77317d1a55a838c752c723ba77399ca', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { key: '4495016bbfb371ba954bea1bca2eb1fecd907c69', id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+                }, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, h("span", null, optgroupEl.label), this.renderSelectionCount(optgroupEl), optgroupEl.disabled && h("div", { class: "disabled-indication" }, "Disabled"), h("div", { class: "svg-icon svg-next" })));
+        })), h("div", { ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", null))), h("div", { id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "wm-nested-select"; }
     static get encapsulation() { return "shadow"; }