@watermarkinsights/ripple 5.20.0-alpha.12 → 5.20.0-alpha.14

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

@@ -876,11 +876,6 @@
   color: var(--wmcolor-select-option-text);
   user-select: none;
 }
-:host:focus, :host.focus {
-  outline: none;
-  background: var(--wmcolor-select-option-background-focus);
-  color: var(--wmcolor-interactive-text);
-}
 :host.icon {
   color: var(--wmcolor-interactive);
 }
@@ -993,13 +988,13 @@
   pointer-events: none;
 }
 
-:host(:focus-visible) {
+:host(:focus) {
   outline: none;
   background: var(--wmcolor-select-option-background-focus);
   color: var(--wmcolor-interactive-text);
 }
-:host(:focus-visible) .checkbox.svg-checkbox-blank,
-:host(:focus-visible) .checkbox.svg-checkbox-selected {
+:host(:focus) .checkbox.svg-checkbox-blank,
+:host(:focus) .checkbox.svg-checkbox-selected {
   --icon-fill: var(--wmcolor-interactive-text);
 }
 
@@ -1009,7 +1004,7 @@
   outline: none;
 }
 
-:host(:focus-visible:hover) .checkbox.svg-checkbox-blank,
-:host(:focus-visible:hover) .checkbox.svg-checkbox-selected {
+:host(:focus:hover) .checkbox.svg-checkbox-blank,
+:host(:focus:hover) .checkbox.svg-checkbox-selected {
   --icon-fill: var(--wmcolor-interactive);
 }

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

@@ -1078,7 +1078,6 @@
   margin: 0;
   padding: 0;
   width: unset;
-  position: absolute;
   -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);

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

@@ -68,7 +68,7 @@ export class Select {
         }
     }
     handleToggle(ev) {
-        ev.newState === "open" ? this.open() : this.close();
+        ev.newState === "open" ? this.onOpen() : this.onClose();
     }
     dropdownPosition() {
         // polyfill for opening up or down + positioning according to screen
@@ -108,7 +108,7 @@ export class Select {
         }
         this.isHidden = false;
     }
-    open() {
+    onOpen() {
         if (!this.isExpanded && !this.isDisabled) {
             // polyfill for browsers without anchor() support (FF)
             if (!this.hasAnchor) {
@@ -119,6 +119,16 @@ export class Select {
                 const hasSpaceBelow = this.dropdownEl.offsetHeight <= document.documentElement.clientHeight - anchorRect.bottom;
                 const hasSpaceAbove = this.dropdownEl.offsetHeight <= anchorRect.top;
                 this.openUp = !hasSpaceBelow && hasSpaceAbove;
+                if (!hasSpaceBelow && !hasSpaceAbove) {
+                    // dropdown will open downwards but doesn't have enough space
+                    // it needs to be absolutely positioned + html has to have overflow-y auto
+                    // (the default, but could have been overriden)
+                    // in order to ensure the options can be scrolled to
+                    // (would already be possible if the page has content below. this is in case select was at bottom of page)
+                    this.initialHtmlOverflowY = document.documentElement.style.overflowY;
+                    document.documentElement.style.overflowY = "auto";
+                    this.dropdownEl.style.position = "absolute";
+                }
                 this.isExpanded = true;
             });
             setTimeout(() => {
@@ -128,9 +138,12 @@ export class Select {
             }, 50);
         }
     }
-    close() {
+    onClose() {
         if (this.isExpanded) {
             this.optionListEl.unfocusAll();
+            // see onOpen
+            document.documentElement.style.overflowY = this.initialHtmlOverflowY || "";
+            this.dropdownEl.style.position = "fixed";
             window.setTimeout(() => {
                 if (!this.hasAnchor) {
                     this.isHidden = true;
@@ -301,14 +314,14 @@ export class Select {
     }
     render() {
         const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
-        return (h(Host, { key: '4ec7d687b40ffcef80fbce21e6880680c72d03a7', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'c400196d862a763af6f4f5d4663a8f3e805a9ddd', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '1c7df9eee5ebc62a12bd36e97918e144c7e4dc72', class: "label-wrapper" }, h("label", { key: '752c9ce6491c959afda2105a5e2c6063ce4ee52e', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        return (h(Host, { key: '7e8a475bb0ec52e4944c6873e01c4606898f4c5f', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'ab7b7ac75c131204dfb9053522aca310def8f45c', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'd621ab97f8538a4888b57724ce19459216a909a2', class: "label-wrapper" }, h("label", { key: '6721709ccc53c4dcb34adde92400213edcecfcd1', 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", { key: 'c0b4660ed16129c1a3aaf5252aa5e7c71eb42f20', class: "required" }, h("span", { key: '8c4a41df3473c88021f8d73f09fdfd33e3ad1c48', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '303e6f18bef3d30b32508c6192ac363bbc8fb80c', "aria-hidden": "true" }, "*")))), h("div", { key: '7acc269a0e60042549cbc3fc6879b3e471f1b016', class: "button-wrapper" }, h("button", { key: 'd1e7751c22951130f92ca6fdc2c9f253e4e63b5b', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, h("span", { key: '6236a027968e849c873e1d09bf89910ca627b760', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '3af139e809e636873cd53dfb53141c0c606e4963', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: '5894b37ef490101b0ba38547745f450c0521a8ea', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '6bce5cbddd6160c0d2eeb8de27ed7f0d46fffb38', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: 'a0d9da60b818f8a576f6fcaab422b9ec31d42fd4', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'dc70db1f203700702cf3586412eef64ab108b86f',
+        this.requiredField && (h("span", { key: 'aa206ab21ef45c4881508a7d89dbeb9c9e391bc5', class: "required" }, h("span", { key: '4831f113ee6326704bdd4c54062e3a68c6c17783', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '88d2090f8ad7a017a0d43d54e8344b8ee6fa858d', "aria-hidden": "true" }, "*")))), h("div", { key: '414f570b751a2c8a886b7b4b8c80b2c2f9150f2d', class: "button-wrapper" }, h("button", { key: '11bd141ae70438ac048bce9df4e8983e36b4abb0', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, h("span", { key: '1f337bb2196dfd0c2c22f32f05073eac31f978d2', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '978a03d535551ade50c872610b53af59bca79004', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'b97e2bccd8dc0ccc55df54a8220c80940ae21b15', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '687523e6ee6f23a22a55481dbbb4856580e71770', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: 'eb88eb23947a6c7c608fe80c752b604102db6a2d', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '0c8b8cd661caa7f55de6e0eb56d304e6ae299e45',
             // is-open is for the CSS transition in modern browsers
             // hidden is to wait for position calculations in Firefox
             class: `dropdown ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.openUp ? "upward" : ""}`, id: "dropdown", popover: "auto", ref: (el) => (this.dropdownEl = el),
             // @ts-ignore -- don't tell typescript but we're in the future
-            onToggle: (ev) => this.handleToggle(ev) }, h("priv-option-list", { key: '09db81570f9990ec4cf87f16b52320ec82701a04', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
+            onToggle: (ev) => this.handleToggle(ev) }, h("priv-option-list", { key: 'c2f173700a255dfe637bb0bbd12d73ef1c4e15fd', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
                 this.dropdownEl.hidePopover();
             }, onOptionListAllSelected: () => {
                 this.returnFocus = true;
@@ -316,7 +329,7 @@ export class Select {
             }, onOptionListAllDeselected: () => {
                 this.returnFocus = true;
                 this.wmSelectAllDeselected.emit();
-            } }, h("slot", { key: '420515d805ad1039ed3b72bd2968a0a29c27a5fc' }))), h("div", { key: '3bda216f90f3d6b10b92034996d3bdc90a4ffd60', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '032fb47f7c64c04d518740dbcb31efcd761baed6', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+            } }, h("slot", { key: '7f7e2c3a4c3e174a108f028fb4fa0236f829b7b8' }))), h("div", { key: '4734b6b6f448c151a2f4373001285e0f2bbacff8', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'c8a8b6d9d4e67b71f86ee522386fbc9f5e47c3de', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
     }
     static get is() { return "wm-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/esm/{app-globals-289e89c8.js → app-globals-9401ec2f.js}

@@ -1,6 +1,6 @@
 import './index-130e07bb.js';
 
-const version = "5.20.0-alpha.12";
+const version = "5.20.0-alpha.14";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length

package/dist/esm/loader.js

@@ -1,6 +1,6 @@
 import { b as bootstrapLazy } from './index-130e07bb.js';
 export { s as setNonce } from './index-130e07bb.js';
-import { g as globalScripts } from './app-globals-289e89c8.js';
+import { g as globalScripts } from './app-globals-9401ec2f.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/esm/ripple.js

@@ -1,6 +1,6 @@
 import { p as promiseResolve, b as bootstrapLazy } from './index-130e07bb.js';
 export { s as setNonce } from './index-130e07bb.js';
-import { g as globalScripts } from './app-globals-289e89c8.js';
+import { g as globalScripts } from './app-globals-9401ec2f.js';
 
 /*
  Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com