@watermarkinsights/ripple 5.19.1-alpha.2 → 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-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;
-  }
 }