@watermarkinsights/ripple 5.19.1-alpha.1 → 5.19.1

package/dist/collection/components/selects/priv-option-list/priv-option-list.js

@@ -349,7 +349,9 @@ export class PrivOptionList {
             : selectMessages.optgroupSingleSelectionCount())))));
     }
     renderSearchField() {
-        return (h("div", { class: "search" }, h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, h("div", { class: "svg-icon svg-search" }), h("input", { ref: (el) => (this.searchFieldEl = el), class: "searchfield", role: "combobox", "aria-controls": "list", onKeyDown: (ev) => this.handleKeyDown(ev), onFocus: () => this.searchFieldWrapperEl.classList.add("focus"), onBlur: (ev) => this.handleSearchFieldBlur(ev), onInput: () => this.debouncedSearch(), placeholder: this.searchPlaceholder }))));
+        return (h("div", { class: "search" }, h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, h("div", { class: "svg-icon svg-search" }), h("input", { ref: (el) => (this.searchFieldEl = el), class: "searchfield", role: "combobox", "aria-controls": "list",
+            // aria-expanded={this.isExpanded ? "true" : "false"}
+            onKeyDown: (ev) => this.handleKeyDown(ev), onFocus: () => this.searchFieldWrapperEl.classList.add("focus"), onBlur: (ev) => this.handleSearchFieldBlur(ev), onInput: () => this.debouncedSearch(), placeholder: this.searchPlaceholder }))));
     }
     renderSearchFailedMessage() {
         return h("div", { class: "search-results-message" }, selectMessages.noSearchResults);
@@ -367,7 +369,7 @@ export class PrivOptionList {
         return (h("div", { class: "non-options-wrapper" }, this.isInNestedSelect && this.renderReturnBtn(), this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton()));
     }
     render() {
-        return (h("div", { key: '9f19650526738eefcf2e2de58b812d9d0d3a21af', class: "list-wrapper" }, (this.isInNestedSelect || this.search || this.visibleSelectAllButton) && this.renderNonOptions(), h("div", { key: '381b60f8cb2dc58f7c268e75e6d0e78879393f0d', id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el), style: { "--max-height": this.effectiveMaxHeight } }, this.searchTerm && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", { key: '6a99161cdb2d3c4b6b1bfbe9b4af333daa4704de' })), h("div", { key: '8cee667df6aa79c7db5511858a73f68e911cc566', id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        return (h("div", { key: '1b5a638b1ce9746eba27e3b106f910b6c08d59ed', class: "list-wrapper" }, (this.isInNestedSelect || this.search || this.visibleSelectAllButton) && this.renderNonOptions(), h("div", { key: '314e0a7234cdb65a636ea96bb9a5bc3ea94cf9aa', id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el), style: { "--max-height": this.effectiveMaxHeight } }, this.searchTerm && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", { key: '4399f882be1d24b5ee799126b1c8b7396f4985d7' })), h("div", { key: '4132af7d3529fdfa3ec301baa9aaf7ad460f9f5e', id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "priv-option-list"; }
     static get originalStyleUrls() {

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

@@ -1131,19 +1131,19 @@
   transform: scale(1, 1);
 }
 
-.menu {
+#menu {
   width: 100%;
   display: flex;
   flex-direction: column;
   max-height: var(--max-height);
   overflow-y: auto;
 }
-.menu.hidden {
+#menu.hidden {
   position: absolute;
   max-height: 100%;
   overflow: hidden;
 }
-.menu .menuitem {
+#menu .menuitem {
   display: flex;
   justify-content: space-between;
   gap: 1.25rem;
@@ -1160,30 +1160,30 @@
   font-weight: 600;
   text-align: left;
 }
-.menu .menuitem:not(:last-child) {
+#menu .menuitem:not(:last-child) {
   border-bottom: 2px solid;
   border-color: var(--wmcolor-select-option-border);
 }
-.menu .menuitem.disabled {
+#menu .menuitem.disabled {
   color: var(--wmcolor-select-option-text-disabled);
   cursor: auto;
 }
-.menu .menuitem.clear-selection {
+#menu .menuitem.clear-selection {
   color: var(--wmcolor-select-text);
   justify-content: start;
   align-items: center;
   gap: unset;
 }
-.menu .menuitem.clear-selection .svg-close {
+#menu .menuitem.clear-selection .svg-close {
   --icon-size: 1.125rem;
   padding-inline-end: 0.5rem;
 }
-.menu .menuitem:focus-visible {
+#menu .menuitem:focus-visible {
   outline: none;
   background: var(--wmcolor-interactive-background-focus);
   color: var(--wmcolor-interactive-text);
 }
-.menu .menuitem:hover {
+#menu .menuitem:hover {
   background: var(--wmcolor-select-option-background-hover);
   outline: none;
   color: var(--wmcolor-select-option-text);

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

@@ -1,5 +1,5 @@
 import { h, Host, forceUpdate } from "@stencil/core";
-import { getContextMeasurements, getTextDir, isElOrChild, shouldOpenUp, toBool, showTooltip, hideTooltip } from "../../../global/functions";
+import { getContextMeasurements, getTextDir, isElOrChild, shouldOpenUp, toBool, showTooltip, hideTooltip, } from "../../../global/functions";
 import { globalMessages, selectMessages } from "../../../global/intl";
 export class NestedSelect {
     constructor() {
@@ -284,7 +284,7 @@ export class NestedSelect {
         const buttonProps = {
             id: "selectbtn",
             ["disabled"]: this.isDisabled,
-            ["aria-controls"]: "list",
+            ["aria-controls"]: "menu",
             ["aria-labelledby"]: "label selectbtn",
             ["aria-describedby"]: "error",
             ["aria-expanded"]: this.isExpanded ? "true" : "false",
@@ -292,16 +292,16 @@ export class NestedSelect {
                 this.isExpanded ? this.close() : this.open();
             },
         };
-        return (h(Host, { key: '5f959093568bc000490f93b887bc0c6cea467c39', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'a83e7570a7cfeb417728d4e94cadcd7b44c4a52c', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '880400f61bc3c1ab3bcbc3bb2d414f05af37c20b', class: "label-wrapper" }, h("label", { key: '776e280c3535923d6c39d4d345c50d2b552b25e6', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        return (h(Host, { key: 'cace730a8e2023eee24ef2d48104cdc334b765df', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'fcf737069a6297763779710da41f1947235845cd', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'c7af1c5c2b04fa15eddac417b69b22dc2f820e6b', class: "label-wrapper" }, h("label", { key: '75b81af82fc50ff315d8873599c67e10c0ba0580', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, 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: 'e9d9fba2781c3c0abf101d4027c3f48e585dcdb4', class: "button-wrapper" }, h("button", Object.assign({ key: 'c40510c5476a961a5ec60e8f6cf1eb8fb68e236d' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '466733e138ca9162ca35cc145ac2b15600d9a381', class: "overflowcontrol" }, h("span", { key: 'b4e2134d076ab22c5baaa87f8fbe5bb022ee822f', class: "button-text" }, this.renderButtonText())), h("div", { key: '05b13a8f7aef21c663f408d48488843fa8da8be9', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '16d82a9457d895a592890d874f8dc7245478fb73', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '4b0375b2acef34d7607c3fa23d741843d3005017', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { key: '52ecc936ebdb87eae9bb2de5551c075bc75bb2fc', ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
+        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : ("")), h("div", { key: '1ee9286a3b62e9bd85049acfa347801220d47957', class: "button-wrapper" }, h("button", Object.assign({ key: 'b214874daf294a02d7a5671c806fc9f05be724bd' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: 'c2cca855b7085a26b8f9b0e2637424c34b36561f', class: "overflowcontrol" }, h("span", { key: '047d5650fd6dc9cf0a17ecbc7778d3c94060cce1', class: "button-text" }, this.renderButtonText())), h("div", { key: 'b65f799f801505de8fed7ad83453e6fca8f0ab26', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '07cdfdafb857c58f0d37e41cadcd884f7ddc0431', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '6d097a2a65b495e97c1556c4a4fa47d097df4ec5', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { key: 'cfb6b6aab31777b9a5f3223121fcaf5a0785c006', ref: (el) => (this.menuEl = el), id: "menu", role: "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("div", { class: "option-text" }, 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", { key: '3861f21a5798af5cabbcdc37dd06b41db59a450f', ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", { key: '1e9c15552d06669d790b8490d84da4855a0c841d' }))), h("div", { key: 'ca12e1f32d3d8e57bc562538d3959d7fc8f78575', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { key: 'd9d2aa31d14f78158a69aadb981df4063dcc9c82', id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        })), h("div", { key: 'd1b03429523cc98abe7eab5daa7c3b53471c2a42', ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", { key: '6b064d941c0d6c9fe77abcf0676ab9d53089e854' }))), h("div", { key: '227555697e6da19102120de41068750f48f322be', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { key: 'dfa6a311286314637093b9c60ab7c62cdc285d8a', 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"; }

package/dist/collection/components/selects/wm-select/wm-select.css

@@ -878,10 +878,6 @@
   --wmcolor-select-selectall-border: var(--wmcolor-select-option-border);
   --wmcolor-select-selectall-text: var(--wmcolor-interactive);
   --wmcolor-select-text: var(--wmcolor-interactive);
-  --button-width: auto;
-  --dropdown-left: 0;
-  --dropdown-translate-y: 0;
-  --dropdown-max-height: none;
   position: relative;
   display: block;
   box-sizing: border-box;
@@ -979,16 +975,14 @@
   margin-left: 0.75rem;
 }
 
-.button-wrapper {
+.wrapper .button-wrapper {
   position: relative;
   flex: 1;
   font-size: 1.125rem;
   color: var(--wmcolor-select-text);
   min-width: 8.75rem;
 }
-
-.displayedoption {
-  anchor-name: --select-button;
+.wrapper .button-wrapper .displayedoption {
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
@@ -1015,124 +1009,118 @@
   text-align: left;
 }
 @media only screen and (max-width: 768px) {
-  .displayedoption {
+  .wrapper .button-wrapper .displayedoption {
     height: 2.75rem;
   }
 }
-.displayedoption .expand-icon {
+.wrapper .button-wrapper .displayedoption .expand-icon {
   --icon-size: 1.125rem;
   position: absolute;
   inset-inline-end: 0.5625rem;
 }
-.displayedoption:hover:not(:disabled):not(.-disabled):not(.-raised) {
+.wrapper .button-wrapper .displayedoption:hover:not(:disabled):not(.-disabled):not(.-raised) {
   background: var(--wmcolor-select-background);
   text-decoration: none;
 }
-.displayedoption:active {
+.wrapper .button-wrapper .displayedoption:active {
   -ms-transform: initial;
   transform: initial;
 }
-.displayedoption:focus {
+.wrapper .button-wrapper .displayedoption:focus {
   outline: none;
 }
-.displayedoption::-moz-focus-inner {
+.wrapper .button-wrapper .displayedoption::-moz-focus-inner {
   border: 0;
 }
-.displayedoption:focus-visible {
+.wrapper .button-wrapper .displayedoption:focus-visible {
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: 2px;
 }
-.displayedoption .overflowcontrol {
+.wrapper .button-wrapper .displayedoption .overflowcontrol {
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   flex: 1;
 }
-.displayedoption .overflowcontrol.hassubinfo {
+.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo {
   display: flex;
 }
-.displayedoption .overflowcontrol.hassubinfo .button-text {
+.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo .button-text {
   flex: 1;
   text-overflow: ellipsis;
   overflow: hidden;
   min-width: 0;
 }
-.displayedoption .overflowcontrol.hassubinfo .subinfo {
+.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo .subinfo {
   flex: none;
   font-style: italic;
 }
-.displayedoption .overflow-counter {
+.wrapper .button-wrapper .displayedoption .overflow-counter {
   font-weight: bold;
   margin-left: 0.5rem;
 }
-
-.displayedoption[disabled] {
+.wrapper .button-wrapper > .displayedoption[disabled] {
   color: var(--wmcolor-select-option-text-disabled);
   border-color: var(--wmcolor-border-dark);
   background: var(--wmcolor-select-option-background-disabled);
   cursor: default;
 }
-
-.dropdown {
-  margin: 0;
-  padding: 0;
-  width: unset;
+.wrapper .button-wrapper > .dropdown {
+  -webkit-overflow-scrolling: touch;
   -webkit-box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2);
   box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2);
-  border: none;
+  -ms-transition: transform 0.25s ease;
+  -webkit-transition: transform 0.25s ease;
+  -moz-transition: transform 0.25s ease;
+  transition: transform 0.25s ease;
+  -ms-transform: scale(1, 0);
+  -webkit-transform: scale(1, 0);
+  -moz-transform: scale(1, 0);
+  transform: scale(1, 0);
+  -ms-transform-origin: center top;
+  -webkit-transform-origin: center top;
+  -moz-transform-origin: center top;
+  transform-origin: center top;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
   border-radius: 3px;
-  -webkit-overflow-scrolling: touch;
+  position: absolute;
+  top: 40px;
+  right: 0;
   background: var(--wmcolor-select-option-background);
+  z-index: 100;
+  width: 100%;
   font-size: 0.875rem;
   max-height: var(--max-height);
   overflow-y: auto;
 }
-.dropdown.hidden {
+.wrapper .button-wrapper > .dropdown.upwards {
+  top: unset;
+  bottom: 100%;
+  -ms-transform-origin: center bottom;
+  -webkit-transform-origin: center bottom;
+  -moz-transform-origin: center bottom;
+  transform-origin: center bottom;
+}
+.wrapper .button-wrapper > .dropdown.hidden {
   visibility: hidden;
 }
-
-@supports (top: anchor(bottom)) {
-  .dropdown:popover-open {
-    transform: scaleY(1);
-    transition: transform 0.25s ease;
-    position: absolute;
-    position-anchor: --select-button;
-    top: anchor(bottom);
-    left: anchor(left);
-    right: anchor(right);
-    position-try-fallbacks: --pop-downward, --pop-upward;
-    transform-origin: center top;
-  }
-  .dropdown:popover-open.upward {
-    transform-origin: center bottom;
-  }
-  @starting-style {
-    .dropdown:popover-open {
-      transform: scaleY(0);
-    }
-  }
-  @position-try --pop-downward {
-    bottom: unset;
-    top: anchor(bottom);
-  }
-  @position-try --pop-upward {
-    top: unset;
-    bottom: anchor(top);
-  }
+.wrapper .button-wrapper > .dropdown.open {
+  -ms-transform: scale(1, 1);
+  -webkit-transform: scale(1, 1);
+  -moz-transform: scale(1, 1);
+  transform: scale(1, 1);
 }
-.invalid .displayedoption {
+.wrapper.invalid .button-wrapper .displayedoption {
   -webkit-box-shadow: 0 0 0 1px var(--wmcolor-border-error);
   -moz-box-shadow: 0 0 0 1px var(--wmcolor-border-error);
   box-shadow: 0 0 0 1px var(--wmcolor-border-error);
   border-color: var(--wmcolor-border-error);
 }
-
-.error-message {
+.wrapper .error-message {
   display: block;
   font-style: italic;
   color: var(--wmcolor-text-error);
@@ -1141,7 +1129,7 @@
   top: 100%;
   left: 0;
 }
-.error-message:not(:empty) {
+.wrapper .error-message:not(:empty) {
   margin-top: 0.25rem;
 }
 
@@ -1171,20 +1159,4 @@
 .rtl > .displayedoption:before {
   right: auto;
   left: 0.5625rem;
-}
-
-@supports not (top: anchor(bottom)) {
-  .dropdown {
-    position: fixed !important;
-    z-index: 30;
-    inset: auto;
-    width: var(--button-width, auto) !important;
-    top: 0 !important;
-    left: var(--dropdown-left, 0) !important;
-    transform: translate(0, var(--dropdown-translate-y, 0)) !important;
-    max-height: var(--dropdown-max-height, none) !important;
-  }
-  .dropdown.hidden {
-    visibility: hidden;
-  }
 }