sas-ui 0.8.147 → 0.8.148

package/dist/cjs/sas-alert_22.cjs.entry.js

@@ -4602,7 +4602,7 @@ let SasMultiselect = class {
     return this.el.shadowRoot.querySelector('sas-form-input-template').querySelector('sas-checkbox-group').shadowRoot.querySelector('sas-checkbox[checked]');
   }
   render() {
-    return (index.h(index.Host, null, index.h("sas-form-input-template", { label: this.label, outside: this.outside, placeholder: this.placeholder, "icon-right": "far fa-chevron-down", required: this.required, readonly: true, value: this.value, disabled: this.disabled, "data-message": this.message, position: this.position }, this.type === 'chip'
+    return (index.h(index.Host, { tabindex: "0" }, index.h("sas-form-input-template", { label: this.label, outside: this.outside, placeholder: this.placeholder, "icon-right": "far fa-chevron-down", required: this.required, readonly: true, value: this.value, disabled: this.disabled, "data-message": this.message, position: this.position }, this.type === 'chip'
       ? index.h("div", { class: "input-container", tabindex: -1, slot: "input" }, this.getChipElement(), index.h("sas-chip", { class: this.getChipClass(this.chipArray.length > this.maxChip), id: "text-chip", text: `+${this.chipArray.length - this.maxChip}`, uppercase: false, bold: false, onMouseDown: this.chipMouseDownEvent }))
       : null, this.clear
       ? index.h("div", { slot: "container", class: "clear-button-container" }, index.h("button", { class: "clear-button", onClick: this.clearAll }, "Clear"))
@@ -5186,7 +5186,7 @@ let SasSelect = class {
     });
   }
   render() {
-    return (index.h(index.Host, null, index.h("sas-form-input-template", { label: this.label, outside: this.outside, required: this.required, placeholder: this.placeholder, "icon-right": "far fa-chevron-down", value: this.text, readonly: this.type === 'default', disabled: this.disabled, clear: this.clear, error: this.error, "data-message": this.message, position: this.position }, this.decodeOptions.length > 0
+    return (index.h(index.Host, { tabindex: "0" }, index.h("sas-form-input-template", { label: this.label, outside: this.outside, required: this.required, placeholder: this.placeholder, "icon-right": "far fa-chevron-down", value: this.text, readonly: this.type === 'default', disabled: this.disabled, clear: this.clear, error: this.error, "data-message": this.message, position: this.position }, this.decodeOptions.length > 0
       ? index.h("sas-list", { slot: "container", options: this.decodeOptions, value: this.value, defaultValue: this.defaultValue, subtextPosition: this.subtextPosition })
       : index.h("slot", { slot: "container" }), this.type === 'search'
       ? index.h("sas-list-item", { slot: "container", class: "tip hide", id: "no-match-tip", text: this.noMatchTip })

package/dist/cjs/sas-date-field.cjs.entry.js

@@ -416,7 +416,7 @@ let SasDateField = class {
     return '';
   }
   render() {
-    return (index.h(index.Host, { tabindex: 0 }, index.h("sas-form-input-template", { label: this.label, outside: this.outside, required: this.required, value: this.getLocalDateString(this.value), iconRight: this.icon, type: "date", disabled: this.disabled, clear: this.clear, "data-message": this.message, position: this.position, "position-h": this.positionH }, index.h("div", { slot: "container", class: "container", tabindex: -1 }, index.h("div", { class: "title", tabindex: 0 }, index.h("sas-icon", { class: `prev-year-icon ${this.checkIsDateLimit(this.min) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-double-left", onClick: this.goToPrevYear, onKeyDown: global.keydownEvent }), index.h("sas-icon", { class: `prev-month-icon ${this.checkIsDateLimit(this.min) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-left", onClick: this.goToPrevMonth, onKeyDown: global.keydownEvent }), index.h("span", { class: "title-content" }, this.getTitleText()), index.h("sas-icon", { class: `next-month-icon ${this.checkIsDateLimit(this.max) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-right", onClick: this.goToNextMonth, onKeyDown: global.keydownEvent }), index.h("sas-icon", { class: `next-year-icon ${this.checkIsDateLimit(this.max) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-double-right", onClick: this.goToNextYear, onKeyDown: global.keydownEvent })), index.h("sas-table", { class: "date-table", headers: this.titles, items: this.generateDateContent(), tabindex: 0 })))));
+    return (index.h(index.Host, { tabindex: "0" }, index.h("sas-form-input-template", { label: this.label, outside: this.outside, required: this.required, value: this.getLocalDateString(this.value), iconRight: this.icon, type: "date", disabled: this.disabled, clear: this.clear, "data-message": this.message, position: this.position, "position-h": this.positionH }, index.h("div", { slot: "container", class: "container", tabindex: -1 }, index.h("div", { class: "title", tabindex: 0 }, index.h("sas-icon", { class: `prev-year-icon ${this.checkIsDateLimit(this.min) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-double-left", onClick: this.goToPrevYear, onKeyDown: global.keydownEvent }), index.h("sas-icon", { class: `prev-month-icon ${this.checkIsDateLimit(this.min) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-left", onClick: this.goToPrevMonth, onKeyDown: global.keydownEvent }), index.h("span", { class: "title-content" }, this.getTitleText()), index.h("sas-icon", { class: `next-month-icon ${this.checkIsDateLimit(this.max) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-right", onClick: this.goToNextMonth, onKeyDown: global.keydownEvent }), index.h("sas-icon", { class: `next-year-icon ${this.checkIsDateLimit(this.max) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-double-right", onClick: this.goToNextYear, onKeyDown: global.keydownEvent })), index.h("sas-table", { class: "date-table", headers: this.titles, items: this.generateDateContent(), tabindex: 0 })))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/sas-menu-bar.cjs.entry.js

@@ -1005,9 +1005,17 @@ let SasMenuBar = class {
     }
   }
   updateLayout() {
+    let shouldKeepFocus = false;
+    const focusedElement = document.activeElement;
+    if (focusedElement.slot === 'more-filter-slot') {
+      shouldKeepFocus = true;
+    }
     this.resetFilter();
     this.hideOverlapElement();
     this.updateBadgeNumber();
+    if (shouldKeepFocus) {
+      focusedElement.focus();
+    }
   }
   resetFilter() {
     const filters = this.el.querySelectorAll('[slot="more-filter-slot"]');
@@ -1016,8 +1024,6 @@ let SasMenuBar = class {
       filter.slot = "";
       filterContainer.append(filter);
     });
-    const dropdown = this.el.shadowRoot.querySelector('sas-dropdown');
-    dropdown.classList.add('hide');
   }
   hideOverlapElement() {
     const filters = this.el.querySelectorAll('[slot="filter"] > *');
@@ -1039,8 +1045,11 @@ let SasMenuBar = class {
         break;
       }
     }
-    if (startIndex !== -1) {
-      const dropdown = this.el.shadowRoot.querySelector('sas-dropdown');
+    const dropdown = this.el.shadowRoot.querySelector('sas-dropdown');
+    if (startIndex === -1) {
+      dropdown.classList.add('hide');
+    }
+    else {
       dropdown.classList.remove('hide');
       for (let i = startIndex; i < filtersArray.length; i += 1) {
         filtersArray[i].slot = 'more-filter-slot';

package/dist/collection/components/sas-date-field/sas-date-field.js

@@ -405,7 +405,7 @@ export class SasDateField {
     return '';
   }
   render() {
-    return (h(Host, { tabindex: 0 },
+    return (h(Host, { tabindex: "0" },
       h("sas-form-input-template", { label: this.label, outside: this.outside, required: this.required, value: this.getLocalDateString(this.value), iconRight: this.icon, type: "date", disabled: this.disabled, clear: this.clear, "data-message": this.message, position: this.position, "position-h": this.positionH },
         h("div", { slot: "container", class: "container", tabindex: -1 },
           h("div", { class: "title", tabindex: 0 },

package/dist/collection/components/sas-menu-bar/sas-menu-bar.js

@@ -77,9 +77,17 @@ export class SasMenuBar {
     }
   }
   updateLayout() {
+    let shouldKeepFocus = false;
+    const focusedElement = document.activeElement;
+    if (focusedElement.slot === 'more-filter-slot') {
+      shouldKeepFocus = true;
+    }
     this.resetFilter();
     this.hideOverlapElement();
     this.updateBadgeNumber();
+    if (shouldKeepFocus) {
+      focusedElement.focus();
+    }
   }
   resetFilter() {
     const filters = this.el.querySelectorAll('[slot="more-filter-slot"]');
@@ -88,8 +96,6 @@ export class SasMenuBar {
       filter.slot = "";
       filterContainer.append(filter);
     });
-    const dropdown = this.el.shadowRoot.querySelector('sas-dropdown');
-    dropdown.classList.add('hide');
   }
   hideOverlapElement() {
     const filters = this.el.querySelectorAll('[slot="filter"] > *');
@@ -111,8 +117,11 @@ export class SasMenuBar {
         break;
       }
     }
-    if (startIndex !== -1) {
-      const dropdown = this.el.shadowRoot.querySelector('sas-dropdown');
+    const dropdown = this.el.shadowRoot.querySelector('sas-dropdown');
+    if (startIndex === -1) {
+      dropdown.classList.add('hide');
+    }
+    else {
       dropdown.classList.remove('hide');
       for (let i = startIndex; i < filtersArray.length; i += 1) {
         filtersArray[i].slot = 'more-filter-slot';

package/dist/collection/components/sas-multiselect/sas-multiselect.js

@@ -590,7 +590,7 @@ export class SasMultiselect {
     return this.el.shadowRoot.querySelector('sas-form-input-template').querySelector('sas-checkbox-group').shadowRoot.querySelector('sas-checkbox[checked]');
   }
   render() {
-    return (h(Host, null,
+    return (h(Host, { tabindex: "0" },
       h("sas-form-input-template", { label: this.label, outside: this.outside, placeholder: this.placeholder, "icon-right": "far fa-chevron-down", required: this.required, readonly: true, value: this.value, disabled: this.disabled, "data-message": this.message, position: this.position },
         this.type === 'chip'
           ? h("div", { class: "input-container", tabindex: -1, slot: "input" },

package/dist/collection/components/sas-select/sas-select.js

@@ -560,7 +560,7 @@ export class SasSelect {
     });
   }
   render() {
-    return (h(Host, null,
+    return (h(Host, { tabindex: "0" },
       h("sas-form-input-template", { label: this.label, outside: this.outside, required: this.required, placeholder: this.placeholder, "icon-right": "far fa-chevron-down", value: this.text, readonly: this.type === 'default', disabled: this.disabled, clear: this.clear, error: this.error, "data-message": this.message, position: this.position },
         this.decodeOptions.length > 0
           ? h("sas-list", { slot: "container", options: this.decodeOptions, value: this.value, defaultValue: this.defaultValue, subtextPosition: this.subtextPosition })

package/dist/custom-elements/index.js

@@ -6549,7 +6549,7 @@ let SasDateField$1 = class extends H {
     return '';
   }
   render() {
-    return (h(Host, { tabindex: 0 }, h("sas-form-input-template", { label: this.label, outside: this.outside, required: this.required, value: this.getLocalDateString(this.value), iconRight: this.icon, type: "date", disabled: this.disabled, clear: this.clear, "data-message": this.message, position: this.position, "position-h": this.positionH }, h("div", { slot: "container", class: "container", tabindex: -1 }, h("div", { class: "title", tabindex: 0 }, h("sas-icon", { class: `prev-year-icon ${this.checkIsDateLimit(this.min) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-double-left", onClick: this.goToPrevYear, onKeyDown: keydownEvent }), h("sas-icon", { class: `prev-month-icon ${this.checkIsDateLimit(this.min) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-left", onClick: this.goToPrevMonth, onKeyDown: keydownEvent }), h("span", { class: "title-content" }, this.getTitleText()), h("sas-icon", { class: `next-month-icon ${this.checkIsDateLimit(this.max) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-right", onClick: this.goToNextMonth, onKeyDown: keydownEvent }), h("sas-icon", { class: `next-year-icon ${this.checkIsDateLimit(this.max) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-double-right", onClick: this.goToNextYear, onKeyDown: keydownEvent })), h("sas-table", { class: "date-table", headers: this.titles, items: this.generateDateContent(), tabindex: 0 })))));
+    return (h(Host, { tabindex: "0" }, h("sas-form-input-template", { label: this.label, outside: this.outside, required: this.required, value: this.getLocalDateString(this.value), iconRight: this.icon, type: "date", disabled: this.disabled, clear: this.clear, "data-message": this.message, position: this.position, "position-h": this.positionH }, h("div", { slot: "container", class: "container", tabindex: -1 }, h("div", { class: "title", tabindex: 0 }, h("sas-icon", { class: `prev-year-icon ${this.checkIsDateLimit(this.min) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-double-left", onClick: this.goToPrevYear, onKeyDown: keydownEvent }), h("sas-icon", { class: `prev-month-icon ${this.checkIsDateLimit(this.min) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-left", onClick: this.goToPrevMonth, onKeyDown: keydownEvent }), h("span", { class: "title-content" }, this.getTitleText()), h("sas-icon", { class: `next-month-icon ${this.checkIsDateLimit(this.max) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-right", onClick: this.goToNextMonth, onKeyDown: keydownEvent }), h("sas-icon", { class: `next-year-icon ${this.checkIsDateLimit(this.max) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-double-right", onClick: this.goToNextYear, onKeyDown: keydownEvent })), h("sas-table", { class: "date-table", headers: this.titles, items: this.generateDateContent(), tabindex: 0 })))));
   }
   get el() { return this; }
   static get watchers() { return {
@@ -11129,9 +11129,17 @@ let SasMenuBar$1 = class extends H {
     }
   }
   updateLayout() {
+    let shouldKeepFocus = false;
+    const focusedElement = document.activeElement;
+    if (focusedElement.slot === 'more-filter-slot') {
+      shouldKeepFocus = true;
+    }
     this.resetFilter();
     this.hideOverlapElement();
     this.updateBadgeNumber();
+    if (shouldKeepFocus) {
+      focusedElement.focus();
+    }
   }
   resetFilter() {
     const filters = this.el.querySelectorAll('[slot="more-filter-slot"]');
@@ -11140,8 +11148,6 @@ let SasMenuBar$1 = class extends H {
       filter.slot = "";
       filterContainer.append(filter);
     });
-    const dropdown = this.el.shadowRoot.querySelector('sas-dropdown');
-    dropdown.classList.add('hide');
   }
   hideOverlapElement() {
     const filters = this.el.querySelectorAll('[slot="filter"] > *');
@@ -11163,8 +11169,11 @@ let SasMenuBar$1 = class extends H {
         break;
       }
     }
-    if (startIndex !== -1) {
-      const dropdown = this.el.shadowRoot.querySelector('sas-dropdown');
+    const dropdown = this.el.shadowRoot.querySelector('sas-dropdown');
+    if (startIndex === -1) {
+      dropdown.classList.add('hide');
+    }
+    else {
       dropdown.classList.remove('hide');
       for (let i = startIndex; i < filtersArray.length; i += 1) {
         filtersArray[i].slot = 'more-filter-slot';
@@ -11811,7 +11820,7 @@ let SasMultiselect$1 = class extends H {
     return this.el.shadowRoot.querySelector('sas-form-input-template').querySelector('sas-checkbox-group').shadowRoot.querySelector('sas-checkbox[checked]');
   }
   render() {
-    return (h(Host, null, h("sas-form-input-template", { label: this.label, outside: this.outside, placeholder: this.placeholder, "icon-right": "far fa-chevron-down", required: this.required, readonly: true, value: this.value, disabled: this.disabled, "data-message": this.message, position: this.position }, this.type === 'chip'
+    return (h(Host, { tabindex: "0" }, h("sas-form-input-template", { label: this.label, outside: this.outside, placeholder: this.placeholder, "icon-right": "far fa-chevron-down", required: this.required, readonly: true, value: this.value, disabled: this.disabled, "data-message": this.message, position: this.position }, this.type === 'chip'
       ? h("div", { class: "input-container", tabindex: -1, slot: "input" }, this.getChipElement(), h("sas-chip", { class: this.getChipClass(this.chipArray.length > this.maxChip), id: "text-chip", text: `+${this.chipArray.length - this.maxChip}`, uppercase: false, bold: false, onMouseDown: this.chipMouseDownEvent }))
       : null, this.clear
       ? h("div", { slot: "container", class: "clear-button-container" }, h("button", { class: "clear-button", onClick: this.clearAll }, "Clear"))
@@ -13047,7 +13056,7 @@ let SasSelect$1 = class extends H {
     });
   }
   render() {
-    return (h(Host, null, h("sas-form-input-template", { label: this.label, outside: this.outside, required: this.required, placeholder: this.placeholder, "icon-right": "far fa-chevron-down", value: this.text, readonly: this.type === 'default', disabled: this.disabled, clear: this.clear, error: this.error, "data-message": this.message, position: this.position }, this.decodeOptions.length > 0
+    return (h(Host, { tabindex: "0" }, h("sas-form-input-template", { label: this.label, outside: this.outside, required: this.required, placeholder: this.placeholder, "icon-right": "far fa-chevron-down", value: this.text, readonly: this.type === 'default', disabled: this.disabled, clear: this.clear, error: this.error, "data-message": this.message, position: this.position }, this.decodeOptions.length > 0
       ? h("sas-list", { slot: "container", options: this.decodeOptions, value: this.value, defaultValue: this.defaultValue, subtextPosition: this.subtextPosition })
       : h("slot", { slot: "container" }), this.type === 'search'
       ? h("sas-list-item", { slot: "container", class: "tip hide", id: "no-match-tip", text: this.noMatchTip })

package/dist/esm/sas-alert_22.entry.js

@@ -4598,7 +4598,7 @@ let SasMultiselect = class {
     return this.el.shadowRoot.querySelector('sas-form-input-template').querySelector('sas-checkbox-group').shadowRoot.querySelector('sas-checkbox[checked]');
   }
   render() {
-    return (h(Host, null, h("sas-form-input-template", { label: this.label, outside: this.outside, placeholder: this.placeholder, "icon-right": "far fa-chevron-down", required: this.required, readonly: true, value: this.value, disabled: this.disabled, "data-message": this.message, position: this.position }, this.type === 'chip'
+    return (h(Host, { tabindex: "0" }, h("sas-form-input-template", { label: this.label, outside: this.outside, placeholder: this.placeholder, "icon-right": "far fa-chevron-down", required: this.required, readonly: true, value: this.value, disabled: this.disabled, "data-message": this.message, position: this.position }, this.type === 'chip'
       ? h("div", { class: "input-container", tabindex: -1, slot: "input" }, this.getChipElement(), h("sas-chip", { class: this.getChipClass(this.chipArray.length > this.maxChip), id: "text-chip", text: `+${this.chipArray.length - this.maxChip}`, uppercase: false, bold: false, onMouseDown: this.chipMouseDownEvent }))
       : null, this.clear
       ? h("div", { slot: "container", class: "clear-button-container" }, h("button", { class: "clear-button", onClick: this.clearAll }, "Clear"))
@@ -5182,7 +5182,7 @@ let SasSelect = class {
     });
   }
   render() {
-    return (h(Host, null, h("sas-form-input-template", { label: this.label, outside: this.outside, required: this.required, placeholder: this.placeholder, "icon-right": "far fa-chevron-down", value: this.text, readonly: this.type === 'default', disabled: this.disabled, clear: this.clear, error: this.error, "data-message": this.message, position: this.position }, this.decodeOptions.length > 0
+    return (h(Host, { tabindex: "0" }, h("sas-form-input-template", { label: this.label, outside: this.outside, required: this.required, placeholder: this.placeholder, "icon-right": "far fa-chevron-down", value: this.text, readonly: this.type === 'default', disabled: this.disabled, clear: this.clear, error: this.error, "data-message": this.message, position: this.position }, this.decodeOptions.length > 0
       ? h("sas-list", { slot: "container", options: this.decodeOptions, value: this.value, defaultValue: this.defaultValue, subtextPosition: this.subtextPosition })
       : h("slot", { slot: "container" }), this.type === 'search'
       ? h("sas-list-item", { slot: "container", class: "tip hide", id: "no-match-tip", text: this.noMatchTip })

package/dist/esm/sas-date-field.entry.js

@@ -412,7 +412,7 @@ let SasDateField = class {
     return '';
   }
   render() {
-    return (h(Host, { tabindex: 0 }, h("sas-form-input-template", { label: this.label, outside: this.outside, required: this.required, value: this.getLocalDateString(this.value), iconRight: this.icon, type: "date", disabled: this.disabled, clear: this.clear, "data-message": this.message, position: this.position, "position-h": this.positionH }, h("div", { slot: "container", class: "container", tabindex: -1 }, h("div", { class: "title", tabindex: 0 }, h("sas-icon", { class: `prev-year-icon ${this.checkIsDateLimit(this.min) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-double-left", onClick: this.goToPrevYear, onKeyDown: keydownEvent }), h("sas-icon", { class: `prev-month-icon ${this.checkIsDateLimit(this.min) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-left", onClick: this.goToPrevMonth, onKeyDown: keydownEvent }), h("span", { class: "title-content" }, this.getTitleText()), h("sas-icon", { class: `next-month-icon ${this.checkIsDateLimit(this.max) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-right", onClick: this.goToNextMonth, onKeyDown: keydownEvent }), h("sas-icon", { class: `next-year-icon ${this.checkIsDateLimit(this.max) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-double-right", onClick: this.goToNextYear, onKeyDown: keydownEvent })), h("sas-table", { class: "date-table", headers: this.titles, items: this.generateDateContent(), tabindex: 0 })))));
+    return (h(Host, { tabindex: "0" }, h("sas-form-input-template", { label: this.label, outside: this.outside, required: this.required, value: this.getLocalDateString(this.value), iconRight: this.icon, type: "date", disabled: this.disabled, clear: this.clear, "data-message": this.message, position: this.position, "position-h": this.positionH }, h("div", { slot: "container", class: "container", tabindex: -1 }, h("div", { class: "title", tabindex: 0 }, h("sas-icon", { class: `prev-year-icon ${this.checkIsDateLimit(this.min) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-double-left", onClick: this.goToPrevYear, onKeyDown: keydownEvent }), h("sas-icon", { class: `prev-month-icon ${this.checkIsDateLimit(this.min) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-left", onClick: this.goToPrevMonth, onKeyDown: keydownEvent }), h("span", { class: "title-content" }, this.getTitleText()), h("sas-icon", { class: `next-month-icon ${this.checkIsDateLimit(this.max) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-right", onClick: this.goToNextMonth, onKeyDown: keydownEvent }), h("sas-icon", { class: `next-year-icon ${this.checkIsDateLimit(this.max) ? 'disabled' : ''}`, tabindex: 0, icon: "far fa-angle-double-right", onClick: this.goToNextYear, onKeyDown: keydownEvent })), h("sas-table", { class: "date-table", headers: this.titles, items: this.generateDateContent(), tabindex: 0 })))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/sas-menu-bar.entry.js

@@ -1001,9 +1001,17 @@ let SasMenuBar = class {
     }
   }
   updateLayout() {
+    let shouldKeepFocus = false;
+    const focusedElement = document.activeElement;
+    if (focusedElement.slot === 'more-filter-slot') {
+      shouldKeepFocus = true;
+    }
     this.resetFilter();
     this.hideOverlapElement();
     this.updateBadgeNumber();
+    if (shouldKeepFocus) {
+      focusedElement.focus();
+    }
   }
   resetFilter() {
     const filters = this.el.querySelectorAll('[slot="more-filter-slot"]');
@@ -1012,8 +1020,6 @@ let SasMenuBar = class {
       filter.slot = "";
       filterContainer.append(filter);
     });
-    const dropdown = this.el.shadowRoot.querySelector('sas-dropdown');
-    dropdown.classList.add('hide');
   }
   hideOverlapElement() {
     const filters = this.el.querySelectorAll('[slot="filter"] > *');
@@ -1035,8 +1041,11 @@ let SasMenuBar = class {
         break;
       }
     }
-    if (startIndex !== -1) {
-      const dropdown = this.el.shadowRoot.querySelector('sas-dropdown');
+    const dropdown = this.el.shadowRoot.querySelector('sas-dropdown');
+    if (startIndex === -1) {
+      dropdown.classList.add('hide');
+    }
+    else {
       dropdown.classList.remove('hide');
       for (let i = startIndex; i < filtersArray.length; i += 1) {
         filtersArray[i].slot = 'more-filter-slot';

package/dist/sas-ui/{p-4d864653.entry.js → p-312a4c13.entry.js}

@@ -1 +1 @@
-import{r as t,h as e,H as i,g as n}from"./p-4635a068.js";var s=function(){if("undefined"!=typeof Map)return Map;function t(t,e){var i=-1;return t.some((function(t,n){return t[0]===e&&(i=n,!0)})),i}return function(){function e(){this.__entries__=[]}return Object.defineProperty(e.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0}),e.prototype.get=function(e){var i=t(this.__entries__,e),n=this.__entries__[i];return n&&n[1]},e.prototype.set=function(e,i){var n=t(this.__entries__,e);~n?this.__entries__[n][1]=i:this.__entries__.push([e,i])},e.prototype.delete=function(e){var i=this.__entries__,n=t(i,e);~n&&i.splice(n,1)},e.prototype.has=function(e){return!!~t(this.__entries__,e)},e.prototype.clear=function(){this.__entries__.splice(0)},e.prototype.forEach=function(t,e){void 0===e&&(e=null);for(var i=0,n=this.__entries__;i<n.length;i++){var s=n[i];t.call(e,s[1],s[0])}},e}()}(),r="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,o="undefined"!=typeof global&&global.Math===Math?global:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),a="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(o):function(t){return setTimeout((function(){return t(Date.now())}),1e3/60)},l=["top","right","bottom","left","width","height","size","weight"],h="undefined"!=typeof MutationObserver,u=function(){function t(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(t){var e=!1,i=!1,n=0;function s(){e&&(e=!1,t()),i&&o()}function r(){a(s)}function o(){var t=Date.now();if(e){if(t-n<2)return;i=!0}else e=!0,i=!1,setTimeout(r,20);n=t}return o}(this.refresh.bind(this))}return t.prototype.addObserver=function(t){~this.observers_.indexOf(t)||this.observers_.push(t),this.connected_||this.connect_()},t.prototype.removeObserver=function(t){var e=this.observers_,i=e.indexOf(t);~i&&e.splice(i,1),!e.length&&this.connected_&&this.disconnect_()},t.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},t.prototype.updateObservers_=function(){var t=this.observers_.filter((function(t){return t.gatherActive(),t.hasActive()}));return t.forEach((function(t){return t.broadcastActive()})),t.length>0},t.prototype.connect_=function(){r&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),h?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},t.prototype.disconnect_=function(){r&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},t.prototype.onTransitionEnd_=function(t){var e=t.propertyName,i=void 0===e?"":e;l.some((function(t){return!!~i.indexOf(t)}))&&this.refresh()},t.getInstance=function(){return this.instance_||(this.instance_=new t),this.instance_},t.instance_=null,t}(),f=function(t,e){for(var i=0,n=Object.keys(e);i<n.length;i++){var s=n[i];Object.defineProperty(t,s,{value:e[s],enumerable:!1,writable:!1,configurable:!0})}return t},c=function(t){return t&&t.ownerDocument&&t.ownerDocument.defaultView||o},d=g(0,0,0,0);function p(t){return parseFloat(t)||0}function m(t){for(var e=[],i=1;i<arguments.length;i++)e[i-1]=arguments[i];return e.reduce((function(e,i){return e+p(t["border-"+i+"-width"])}),0)}var b="undefined"!=typeof SVGGraphicsElement?function(t){return t instanceof c(t).SVGGraphicsElement}:function(t){return t instanceof c(t).SVGElement&&"function"==typeof t.getBBox};function v(t){return r?b(t)?function(t){var e=t.getBBox();return g(0,0,e.width,e.height)}(t):function(t){var e=t.clientWidth,i=t.clientHeight;if(!e&&!i)return d;var n=c(t).getComputedStyle(t),s=function(t){for(var e={},i=0,n=["top","right","bottom","left"];i<n.length;i++){var s=n[i];e[s]=p(t["padding-"+s])}return e}(n),r=s.left+s.right,o=s.top+s.bottom,a=p(n.width),l=p(n.height);if("border-box"===n.boxSizing&&(Math.round(a+r)!==e&&(a-=m(n,"left","right")+r),Math.round(l+o)!==i&&(l-=m(n,"top","bottom")+o)),!function(t){return t===c(t).document.documentElement}(t)){var h=Math.round(a+r)-e,u=Math.round(l+o)-i;1!==Math.abs(h)&&(a-=h),1!==Math.abs(u)&&(l-=u)}return g(s.left,s.top,a,l)}(t):d}function g(t,e,i,n){return{x:t,y:e,width:i,height:n}}var w=function(){function t(t){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=g(0,0,0,0),this.target=t}return t.prototype.isActive=function(){var t=v(this.target);return this.contentRect_=t,t.width!==this.broadcastWidth||t.height!==this.broadcastHeight},t.prototype.broadcastRect=function(){var t=this.contentRect_;return this.broadcastWidth=t.width,this.broadcastHeight=t.height,t},t}(),y=function(t,e){var i,n,s,r,o,a,l,h=(n=(i=e).x,s=i.y,r=i.width,o=i.height,a="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,l=Object.create(a.prototype),f(l,{x:n,y:s,width:r,height:o,top:s,right:n+r,bottom:o+s,left:n}),l);f(this,{target:t,contentRect:h})},x=function(){function t(t,e,i){if(this.activeObservations_=[],this.observations_=new s,"function"!=typeof t)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=t,this.controller_=e,this.callbackCtx_=i}return t.prototype.observe=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(t instanceof c(t).Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this.observations_;e.has(t)||(e.set(t,new w(t)),this.controller_.addObserver(this),this.controller_.refresh())}},t.prototype.unobserve=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(t instanceof c(t).Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this.observations_;e.has(t)&&(e.delete(t),e.size||this.controller_.removeObserver(this))}},t.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},t.prototype.gatherActive=function(){var t=this;this.clearActive(),this.observations_.forEach((function(e){e.isActive()&&t.activeObservations_.push(e)}))},t.prototype.broadcastActive=function(){if(this.hasActive()){var t=this.callbackCtx_,e=this.activeObservations_.map((function(t){return new y(t.target,t.broadcastRect())}));this.callback_.call(t,e,t),this.clearActive()}},t.prototype.clearActive=function(){this.activeObservations_.splice(0)},t.prototype.hasActive=function(){return this.activeObservations_.length>0},t}(),E="undefined"!=typeof WeakMap?new WeakMap:new s,M=function t(e){if(!(this instanceof t))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var i=u.getInstance(),n=new x(e,i,this);E.set(this,n)};["observe","unobserve","disconnect"].forEach((function(t){M.prototype[t]=function(){var e;return(e=E.get(this))[t].apply(e,arguments)}}));var k=void 0!==o.ResizeObserver?o.ResizeObserver:M;let S=class{constructor(e){t(this,e),this.moreFilterButtonWidth=190,this.sticky=!1,this.clickEvent=t=>{t.stopPropagation()},this.clearFilter=()=>{this.el.querySelectorAll('[slot="filter"] > sas-select').forEach((t=>{t.value=t.defaultValue||"",t.update()})),this.el.querySelectorAll('sas-select[slot="more-filter-slot"]').forEach((t=>{t.value=t.defaultValue||"",t.update()})),this.el.querySelectorAll('[slot="filter"] > sas-date-field').forEach((t=>{t.value="",t.update()})),this.el.querySelectorAll('sas-date-field[slot="more-filter-slot"]').forEach((t=>{t.value="",t.update()})),this.el.querySelectorAll('[slot="filter"] > sas-multiselect').forEach((t=>{t.values=[],t.update()})),this.el.querySelectorAll('sas-multiselect[slot="more-filter-slot"]').forEach((t=>{t.values=[],t.update()}))}}componentDidLoad(){const t=new k((t=>{t.forEach((()=>{this.updateLayout()}))})),e=this.el.shadowRoot.querySelector(".filter");t.observe(e)}selectUpdateEventUsedInternalHandler(t){"more-filter-slot"===t.target.slot&&this.updateBadgeNumber()}multiselectUpdateEventUsedInternalHandler(t){"more-filter-slot"===t.target.slot&&this.updateBadgeNumber()}dateFieldUpdateEventUsedInternalHandler(t){"more-filter-slot"===t.target.slot&&this.updateBadgeNumber()}updateLayout(){this.resetFilter(),this.hideOverlapElement(),this.updateBadgeNumber()}resetFilter(){const t=this.el.querySelectorAll('[slot="more-filter-slot"]'),e=this.el.querySelector('[slot="filter"]');t.forEach((t=>{t.slot="",e.append(t)})),this.el.shadowRoot.querySelector("sas-dropdown").classList.add("hide")}hideOverlapElement(){const t=this.el.querySelectorAll('[slot="filter"] > *');let e=[];for(let i=0;i<t.length;i+=1)"SAS-SELECT"!==t[i].tagName&&"SAS-MULTISELECT"!==t[i].tagName&&"SAS-DATE-FIELD"!==t[i].tagName||e.push(t[i]);const i=this.el.shadowRoot.querySelector(".button-list");let n=-1;for(let t=0;t<e.length;t+=1){let s=this.moreFilterButtonWidth;if(t===e.length-1&&(s=0),this.checkOverlap(e[t],i,s)){n=t;break}}if(-1!==n){this.el.shadowRoot.querySelector("sas-dropdown").classList.remove("hide");for(let t=n;t<e.length;t+=1)e[t].slot="more-filter-slot",this.el.append(e[t])}}checkOverlap(t,e,i){const n=t.getBoundingClientRect();return e.getBoundingClientRect().left-n.right<i}getFilterNumber(){const t=this.el.querySelectorAll('[slot="more-filter-slot"]');if(t.length>0){let e=0;return t.forEach((t=>{"SAS-SELECT"===t.tagName?null!==t.value&&""!==t.value&&t.value!==t.defaultValue&&(e+=1):"SAS-MULTISELECT"===t.tagName?t.values.length>0&&(e+=1):"SAS-DATE-FIELD"===t.tagName&&Boolean(t.value)&&(e+=1)})),e}}updateBadgeNumber(){this.el.shadowRoot.querySelector("sas-badge").number=this.getFilterNumber()}render(){return e(i,{onClick:this.clickEvent},e("div",{class:"menu-bar-part bulk-action"},e("slot",{name:"bulk-action"})),e("div",{class:"menu-bar-part search"},e("slot",{name:"search"})),e("div",{class:"menu-bar-part filter"},e("slot",{name:"filter"}),e("sas-dropdown",{class:"more-filter-button",positionH:"left",clickClose:!1},e("sas-button",{slot:"control",type:"text",icon:"far fa-sliders-h",text:"More Filters"},e("sas-badge",{type:"notification",inline:!0})),e("div",{class:"menu",slot:"menu"},e("div",{class:"more-filter"},e("slot",{name:"more-filter-slot"})),e("div",{class:"filter-control"},e("sas-button",{type:"secondary",text:"Clear Filters",block:!0,onClick:this.clearFilter}))))),e("div",{class:"menu-bar-part button-list"},e("slot",{name:"button-list"})))}get el(){return n(this)}};S.style=":host{display:grid;grid-template-columns:max-content max-content minmax(0, 1fr) max-content;padding:21px 29px;background-color:var(--s-100);border:1px solid var(--s-200);position:relative;z-index:1}:host .menu-bar-part{display:flex;gap:20px;height:40px}:host .filter{--select-flex-shrink:0;gap:0}:host sas-dropdown{position:sticky;right:0;align-items:stretch;margin-left:20px;--dropdown-control-align-items:flex-end}:host .menu{padding:20px;box-sizing:border-box}:host .more-filter{display:grid;grid-row-gap:20px}:host .filter-control{margin-top:20px;display:flex;gap:10px}:host .hide{display:none}::slotted([slot=bulk-action]){display:flex;gap:20px;margin-right:40px !important;align-items:flex-end}::slotted([slot=search]){display:flex;margin-right:40px !important;align-items:flex-end}::slotted([slot=filter]){display:flex;--select-flex-shrink:0;gap:20px;white-space:nowrap;align-items:flex-end}::slotted([slot=button-list]){margin-left:40px !important;display:flex;gap:20px;align-items:flex-end}:host([sticky]:not([sticky=false])){position:sticky;top:0}";export{S as sas_menu_bar}
+import{r as t,h as e,H as i,g as n}from"./p-4635a068.js";var s=function(){if("undefined"!=typeof Map)return Map;function t(t,e){var i=-1;return t.some((function(t,n){return t[0]===e&&(i=n,!0)})),i}return function(){function e(){this.__entries__=[]}return Object.defineProperty(e.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0}),e.prototype.get=function(e){var i=t(this.__entries__,e),n=this.__entries__[i];return n&&n[1]},e.prototype.set=function(e,i){var n=t(this.__entries__,e);~n?this.__entries__[n][1]=i:this.__entries__.push([e,i])},e.prototype.delete=function(e){var i=this.__entries__,n=t(i,e);~n&&i.splice(n,1)},e.prototype.has=function(e){return!!~t(this.__entries__,e)},e.prototype.clear=function(){this.__entries__.splice(0)},e.prototype.forEach=function(t,e){void 0===e&&(e=null);for(var i=0,n=this.__entries__;i<n.length;i++){var s=n[i];t.call(e,s[1],s[0])}},e}()}(),r="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,o="undefined"!=typeof global&&global.Math===Math?global:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),a="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(o):function(t){return setTimeout((function(){return t(Date.now())}),1e3/60)},l=["top","right","bottom","left","width","height","size","weight"],u="undefined"!=typeof MutationObserver,h=function(){function t(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(t){var e=!1,i=!1,n=0;function s(){e&&(e=!1,t()),i&&o()}function r(){a(s)}function o(){var t=Date.now();if(e){if(t-n<2)return;i=!0}else e=!0,i=!1,setTimeout(r,20);n=t}return o}(this.refresh.bind(this))}return t.prototype.addObserver=function(t){~this.observers_.indexOf(t)||this.observers_.push(t),this.connected_||this.connect_()},t.prototype.removeObserver=function(t){var e=this.observers_,i=e.indexOf(t);~i&&e.splice(i,1),!e.length&&this.connected_&&this.disconnect_()},t.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},t.prototype.updateObservers_=function(){var t=this.observers_.filter((function(t){return t.gatherActive(),t.hasActive()}));return t.forEach((function(t){return t.broadcastActive()})),t.length>0},t.prototype.connect_=function(){r&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),u?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},t.prototype.disconnect_=function(){r&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},t.prototype.onTransitionEnd_=function(t){var e=t.propertyName,i=void 0===e?"":e;l.some((function(t){return!!~i.indexOf(t)}))&&this.refresh()},t.getInstance=function(){return this.instance_||(this.instance_=new t),this.instance_},t.instance_=null,t}(),f=function(t,e){for(var i=0,n=Object.keys(e);i<n.length;i++){var s=n[i];Object.defineProperty(t,s,{value:e[s],enumerable:!1,writable:!1,configurable:!0})}return t},c=function(t){return t&&t.ownerDocument&&t.ownerDocument.defaultView||o},d=g(0,0,0,0);function p(t){return parseFloat(t)||0}function m(t){for(var e=[],i=1;i<arguments.length;i++)e[i-1]=arguments[i];return e.reduce((function(e,i){return e+p(t["border-"+i+"-width"])}),0)}var b="undefined"!=typeof SVGGraphicsElement?function(t){return t instanceof c(t).SVGGraphicsElement}:function(t){return t instanceof c(t).SVGElement&&"function"==typeof t.getBBox};function v(t){return r?b(t)?function(t){var e=t.getBBox();return g(0,0,e.width,e.height)}(t):function(t){var e=t.clientWidth,i=t.clientHeight;if(!e&&!i)return d;var n=c(t).getComputedStyle(t),s=function(t){for(var e={},i=0,n=["top","right","bottom","left"];i<n.length;i++){var s=n[i];e[s]=p(t["padding-"+s])}return e}(n),r=s.left+s.right,o=s.top+s.bottom,a=p(n.width),l=p(n.height);if("border-box"===n.boxSizing&&(Math.round(a+r)!==e&&(a-=m(n,"left","right")+r),Math.round(l+o)!==i&&(l-=m(n,"top","bottom")+o)),!function(t){return t===c(t).document.documentElement}(t)){var u=Math.round(a+r)-e,h=Math.round(l+o)-i;1!==Math.abs(u)&&(a-=u),1!==Math.abs(h)&&(l-=h)}return g(s.left,s.top,a,l)}(t):d}function g(t,e,i,n){return{x:t,y:e,width:i,height:n}}var w=function(){function t(t){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=g(0,0,0,0),this.target=t}return t.prototype.isActive=function(){var t=v(this.target);return this.contentRect_=t,t.width!==this.broadcastWidth||t.height!==this.broadcastHeight},t.prototype.broadcastRect=function(){var t=this.contentRect_;return this.broadcastWidth=t.width,this.broadcastHeight=t.height,t},t}(),y=function(t,e){var i,n,s,r,o,a,l,u=(n=(i=e).x,s=i.y,r=i.width,o=i.height,a="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,l=Object.create(a.prototype),f(l,{x:n,y:s,width:r,height:o,top:s,right:n+r,bottom:o+s,left:n}),l);f(this,{target:t,contentRect:u})},x=function(){function t(t,e,i){if(this.activeObservations_=[],this.observations_=new s,"function"!=typeof t)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=t,this.controller_=e,this.callbackCtx_=i}return t.prototype.observe=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(t instanceof c(t).Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this.observations_;e.has(t)||(e.set(t,new w(t)),this.controller_.addObserver(this),this.controller_.refresh())}},t.prototype.unobserve=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(t instanceof c(t).Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this.observations_;e.has(t)&&(e.delete(t),e.size||this.controller_.removeObserver(this))}},t.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},t.prototype.gatherActive=function(){var t=this;this.clearActive(),this.observations_.forEach((function(e){e.isActive()&&t.activeObservations_.push(e)}))},t.prototype.broadcastActive=function(){if(this.hasActive()){var t=this.callbackCtx_,e=this.activeObservations_.map((function(t){return new y(t.target,t.broadcastRect())}));this.callback_.call(t,e,t),this.clearActive()}},t.prototype.clearActive=function(){this.activeObservations_.splice(0)},t.prototype.hasActive=function(){return this.activeObservations_.length>0},t}(),E="undefined"!=typeof WeakMap?new WeakMap:new s,M=function t(e){if(!(this instanceof t))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var i=h.getInstance(),n=new x(e,i,this);E.set(this,n)};["observe","unobserve","disconnect"].forEach((function(t){M.prototype[t]=function(){var e;return(e=E.get(this))[t].apply(e,arguments)}}));var k=void 0!==o.ResizeObserver?o.ResizeObserver:M;let S=class{constructor(e){t(this,e),this.moreFilterButtonWidth=190,this.sticky=!1,this.clickEvent=t=>{t.stopPropagation()},this.clearFilter=()=>{this.el.querySelectorAll('[slot="filter"] > sas-select').forEach((t=>{t.value=t.defaultValue||"",t.update()})),this.el.querySelectorAll('sas-select[slot="more-filter-slot"]').forEach((t=>{t.value=t.defaultValue||"",t.update()})),this.el.querySelectorAll('[slot="filter"] > sas-date-field').forEach((t=>{t.value="",t.update()})),this.el.querySelectorAll('sas-date-field[slot="more-filter-slot"]').forEach((t=>{t.value="",t.update()})),this.el.querySelectorAll('[slot="filter"] > sas-multiselect').forEach((t=>{t.values=[],t.update()})),this.el.querySelectorAll('sas-multiselect[slot="more-filter-slot"]').forEach((t=>{t.values=[],t.update()}))}}componentDidLoad(){const t=new k((t=>{t.forEach((()=>{this.updateLayout()}))})),e=this.el.shadowRoot.querySelector(".filter");t.observe(e)}selectUpdateEventUsedInternalHandler(t){"more-filter-slot"===t.target.slot&&this.updateBadgeNumber()}multiselectUpdateEventUsedInternalHandler(t){"more-filter-slot"===t.target.slot&&this.updateBadgeNumber()}dateFieldUpdateEventUsedInternalHandler(t){"more-filter-slot"===t.target.slot&&this.updateBadgeNumber()}updateLayout(){let t=!1;const e=document.activeElement;"more-filter-slot"===e.slot&&(t=!0),this.resetFilter(),this.hideOverlapElement(),this.updateBadgeNumber(),t&&e.focus()}resetFilter(){const t=this.el.querySelectorAll('[slot="more-filter-slot"]'),e=this.el.querySelector('[slot="filter"]');t.forEach((t=>{t.slot="",e.append(t)}))}hideOverlapElement(){const t=this.el.querySelectorAll('[slot="filter"] > *');let e=[];for(let i=0;i<t.length;i+=1)"SAS-SELECT"!==t[i].tagName&&"SAS-MULTISELECT"!==t[i].tagName&&"SAS-DATE-FIELD"!==t[i].tagName||e.push(t[i]);const i=this.el.shadowRoot.querySelector(".button-list");let n=-1;for(let t=0;t<e.length;t+=1){let s=this.moreFilterButtonWidth;if(t===e.length-1&&(s=0),this.checkOverlap(e[t],i,s)){n=t;break}}const s=this.el.shadowRoot.querySelector("sas-dropdown");if(-1===n)s.classList.add("hide");else{s.classList.remove("hide");for(let t=n;t<e.length;t+=1)e[t].slot="more-filter-slot",this.el.append(e[t])}}checkOverlap(t,e,i){const n=t.getBoundingClientRect();return e.getBoundingClientRect().left-n.right<i}getFilterNumber(){const t=this.el.querySelectorAll('[slot="more-filter-slot"]');if(t.length>0){let e=0;return t.forEach((t=>{"SAS-SELECT"===t.tagName?null!==t.value&&""!==t.value&&t.value!==t.defaultValue&&(e+=1):"SAS-MULTISELECT"===t.tagName?t.values.length>0&&(e+=1):"SAS-DATE-FIELD"===t.tagName&&Boolean(t.value)&&(e+=1)})),e}}updateBadgeNumber(){this.el.shadowRoot.querySelector("sas-badge").number=this.getFilterNumber()}render(){return e(i,{onClick:this.clickEvent},e("div",{class:"menu-bar-part bulk-action"},e("slot",{name:"bulk-action"})),e("div",{class:"menu-bar-part search"},e("slot",{name:"search"})),e("div",{class:"menu-bar-part filter"},e("slot",{name:"filter"}),e("sas-dropdown",{class:"more-filter-button",positionH:"left",clickClose:!1},e("sas-button",{slot:"control",type:"text",icon:"far fa-sliders-h",text:"More Filters"},e("sas-badge",{type:"notification",inline:!0})),e("div",{class:"menu",slot:"menu"},e("div",{class:"more-filter"},e("slot",{name:"more-filter-slot"})),e("div",{class:"filter-control"},e("sas-button",{type:"secondary",text:"Clear Filters",block:!0,onClick:this.clearFilter}))))),e("div",{class:"menu-bar-part button-list"},e("slot",{name:"button-list"})))}get el(){return n(this)}};S.style=":host{display:grid;grid-template-columns:max-content max-content minmax(0, 1fr) max-content;padding:21px 29px;background-color:var(--s-100);border:1px solid var(--s-200);position:relative;z-index:1}:host .menu-bar-part{display:flex;gap:20px;height:40px}:host .filter{--select-flex-shrink:0;gap:0}:host sas-dropdown{position:sticky;right:0;align-items:stretch;margin-left:20px;--dropdown-control-align-items:flex-end}:host .menu{padding:20px;box-sizing:border-box}:host .more-filter{display:grid;grid-row-gap:20px}:host .filter-control{margin-top:20px;display:flex;gap:10px}:host .hide{display:none}::slotted([slot=bulk-action]){display:flex;gap:20px;margin-right:40px !important;align-items:flex-end}::slotted([slot=search]){display:flex;margin-right:40px !important;align-items:flex-end}::slotted([slot=filter]){display:flex;--select-flex-shrink:0;gap:20px;white-space:nowrap;align-items:flex-end}::slotted([slot=button-list]){margin-left:40px !important;display:flex;gap:20px;align-items:flex-end}:host([sticky]:not([sticky=false])){position:sticky;top:0}";export{S as sas_menu_bar}

package/dist/sas-ui/{p-db615ee3.entry.js → p-e5d9d12a.entry.js}

@@ -1 +1 @@
-import{r as t,c as e,h as s,H as i,g as a}from"./p-4635a068.js";import{k as n}from"./p-033ca179.js";let h=class{constructor(s){t(this,s),this.dateFieldUpdate=e(this,"dateFieldUpdate",7),this.datefieldupdate=e(this,"datefieldupdate",7),this.dateFieldUpdateEventUsedInternal=e(this,"dateFieldUpdateEventUsedInternal",7),this.titles=[{value:"1",text:"Mo",sortAble:!1},{value:"2",text:"Tu",sortAble:!1},{value:"3",text:"We",sortAble:!1},{value:"4",text:"Th",sortAble:!1},{value:"5",text:"Fr",sortAble:!1},{value:"6",text:"Sa",sortAble:!1},{value:"0",text:"Su",sortAble:!1}],this.label="",this.outside=!1,this.required=!1,this.name="",this.value="",this.max="",this.min="",this.disabled=!1,this.clear=!1,this.icon="far fa-calendar-alt",this.position=null,this.positionH="left",this.validity={valid:!0,valueMissing:!1,rangeUnderflow:!1,rangeOverflow:!1},this.message="",this.goToPrevMonth=t=>{t.stopPropagation();const e=this.localDate.getFullYear(),s=this.localDate.getMonth(),i=this.localDate.getDate(),a=new Date(e,s-1,i),n=new Date(this.min);this.value=a<n?new Date(this.min).toISOString():a.toISOString()},this.goToNextMonth=t=>{t.stopPropagation();const e=this.localDate.getFullYear(),s=this.localDate.getMonth(),i=this.localDate.getDate(),a=new Date(e,s+1,i),n=new Date(this.max);this.value=a>n?new Date(this.max).toISOString():a.toISOString()},this.goToPrevYear=t=>{t.stopPropagation();const e=this.localDate.getFullYear(),s=this.localDate.getMonth(),i=this.localDate.getDate(),a=new Date(e-1,s,i),n=new Date(this.min);this.value=a<n?new Date(this.min).toISOString():a.toISOString()},this.goToNextYear=t=>{t.stopPropagation();const e=this.localDate.getFullYear(),s=this.localDate.getMonth(),i=this.localDate.getDate(),a=new Date(e+1,s,i),n=new Date(this.max);this.value=a>n?new Date(this.max).toISOString():a.toISOString()},this.handleButtonClick=t=>{t.stopPropagation(),t.target.disabled||(this.localDate.setDate(Number(t.target.text)),this.localDate.setHours(0,0,0,0),this.value=this.localDate.toISOString(),this.dateFieldUpdate.emit(this.value),this.datefieldupdate.emit(this.value),this.el.focus())}}watchHandler(){this.updateLocalDate(this.value),this.resetErrorStatus(),this.dateFieldUpdateEventUsedInternal.emit()}componentWillLoad(){this.updateLocalDate(this.value),this.resetErrorStatus()}inputUpdateHandler(t){this.value=t.detail?new Date(t.detail+"T00:00:00.000").toISOString():"",this.dateFieldUpdate.emit(this.value),this.datefieldupdate.emit(this.value)}async update(){const t=this.value;this.dateFieldUpdate.emit(t),this.datefieldupdate.emit(t)}async validate(){let t=!1;this.required&&!Boolean(this.value)&&(t=!0);let e=!1;Boolean(this.min)&&Boolean(this.value)&&new Date(this.value)<new Date(`${this.min}T00:00:00`)&&(e=!0);let s=!1;Boolean(this.max)&&Boolean(this.value)&&new Date(this.value)>new Date(`${this.max}T23:59:59`)&&(s=!0),this.validity={valid:!t&&!e&&!s,valueMissing:t,rangeUnderflow:e,rangeOverflow:s}}async updateErrorStatus(){await this.validate();const t=this.el.shadowRoot.querySelector("sas-form-input-template");null!==t&&(t.error=!this.validity.valid),this.validity.valid||(this.message=this.getErrorMessage())}async resetErrorStatus(){const t=this.el.shadowRoot.querySelector("sas-form-input-template");null!==t&&(t.error=!1),this.message=""}getErrorMessage(){const t=this.validity;return t.valueMissing?`${this.label} is required`:t.rangeOverflow?`${this.label} must be less or equal to ${this.max}`:t.rangeUnderflow?`${this.label} must be future dated`:void 0}updateLocalDate(t){if(t){const e=this.validateValue(t);if("invalid format"===e){const t=new Date;let e=t;if(Boolean(this.min)){const s=new Date(this.min);t<s&&(e=s)}if(Boolean(this.max)){const s=new Date(this.max);t>s&&(e=s)}this.value="",this.localDate=e}else this.localDate="less than min"===e?new Date(this.min):"larger than max"===e?new Date(this.max):new Date(this.value)}else this.localDate=new Date}validateValue(t){if(/^[0-9]{4}[\-](0[1-9]|1[012])[\-](0[1-9]|[12][0-9]|3[01])T([01][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])[\.]([0-9]{3})Z$/.test(t)){const e=new Date(t);return Boolean(this.min)&&e<new Date(this.min)?"less than min":Boolean(this.max)&&e>new Date(this.max)?"larger than max":"valid"}return console.warn('The specified value does not conform to the required format, "YYYY-MM-DDTHH:mm:ss.sssZ"'),"invalid format"}checkIsDateLimit(t){if(t){const e=new Date(t);if(e.getFullYear()===this.localDate.getFullYear()&&e.getMonth()===this.localDate.getMonth()&&e.getDate()===this.localDate.getDate())return!0}return!1}getLocalDateString(t){if(t){const e=new Date(t);if("Invalid Date"===e.toString())return"";{let t=`${e.getFullYear()}`;t.length<4&&(t="0".repeat(4-t.length)+t);const s=e.getMonth()+1;let i=`${s}`;s<10&&(i=`0${s}`);const a=e.getDate();let n=`${a}`;return a<10&&(n=`0${a}`),`${t}-${i}-${n}`}}return""}getTitleText(){return`${this.localDate.toLocaleString("default",{month:"long"})} ${this.localDate.getFullYear()}`}generateDateContent(){const t=this.localDate.getFullYear(),e=this.localDate.getMonth(),i=new Date(t,e,1).getDay(),a=new Date(t,e+1,0).getDate(),n=[];let h=i-1;0===i&&(h=6);let o={};const l=this.checkIsInMinMonth(),r=this.checkIsInMaxMonth();for(let t=0;t<h+a;t+=1){let e=!1;l&&t-h+1<new Date(this.min).getDate()&&(e=!0),r&&t-h+1>new Date(this.max).getDate()&&(e=!0),o[this.titles[t%7].text]=t<h?"":s("sas-button",{class:`date-button ${this.getButtonClass(t-h+1)}`,type:"text",text:""+(t-h+1),size:"small",disabled:e,onClick:this.handleButtonClick}),(t+1)%7!=0&&t!==h+a-1||(n.push(o),o={})}return n}checkIsInMinMonth(){if(Boolean(this.min)){const t=new Date(this.min);if(t.getFullYear()===this.localDate.getFullYear()&&t.getMonth()===this.localDate.getMonth())return!0}return!1}checkIsInMaxMonth(){if(Boolean(this.max)){const t=new Date(this.max);if(t.getFullYear()===this.localDate.getFullYear()&&t.getMonth()===this.localDate.getMonth())return!0}return!1}getButtonClass(t){return t===this.localDate.getDate()?"date-button-active":""}render(){return s(i,{tabindex:0},s("sas-form-input-template",{label:this.label,outside:this.outside,required:this.required,value:this.getLocalDateString(this.value),iconRight:this.icon,type:"date",disabled:this.disabled,clear:this.clear,"data-message":this.message,position:this.position,"position-h":this.positionH},s("div",{slot:"container",class:"container",tabindex:-1},s("div",{class:"title",tabindex:0},s("sas-icon",{class:"prev-year-icon "+(this.checkIsDateLimit(this.min)?"disabled":""),tabindex:0,icon:"far fa-angle-double-left",onClick:this.goToPrevYear,onKeyDown:n}),s("sas-icon",{class:"prev-month-icon "+(this.checkIsDateLimit(this.min)?"disabled":""),tabindex:0,icon:"far fa-angle-left",onClick:this.goToPrevMonth,onKeyDown:n}),s("span",{class:"title-content"},this.getTitleText()),s("sas-icon",{class:"next-month-icon "+(this.checkIsDateLimit(this.max)?"disabled":""),tabindex:0,icon:"far fa-angle-right",onClick:this.goToNextMonth,onKeyDown:n}),s("sas-icon",{class:"next-year-icon "+(this.checkIsDateLimit(this.max)?"disabled":""),tabindex:0,icon:"far fa-angle-double-right",onClick:this.goToNextYear,onKeyDown:n})),s("sas-table",{class:"date-table",headers:this.titles,items:this.generateDateContent(),tabindex:0}))))}get el(){return a(this)}static get watchers(){return{value:["watchHandler"]}}};h.style=":host{display:block}:host sas-form-input-template{--form-input-template-container-min-width:none;--form-input-template-container-max-width:370px;--input-height:var(--date-field-height, 40px)}:host .container{padding:30px 25px}:host .container:focus{outline:none}:host sas-icon{--icon-color:var(--s-500)}:host .title{display:grid;grid-template-columns:repeat(7, 1fr);justify-items:center;padding-bottom:25px}:host .title:focus,:host .date-table:focus{outline:none}:host .title-content{font-weight:bold;grid-column-start:3;grid-column-end:6;display:flex;align-items:center}:host .disabled{color:var(--s-300);pointer-events:none}";export{h as sas_date_field}
+import{r as t,c as e,h as s,H as i,g as a}from"./p-4635a068.js";import{k as n}from"./p-033ca179.js";let h=class{constructor(s){t(this,s),this.dateFieldUpdate=e(this,"dateFieldUpdate",7),this.datefieldupdate=e(this,"datefieldupdate",7),this.dateFieldUpdateEventUsedInternal=e(this,"dateFieldUpdateEventUsedInternal",7),this.titles=[{value:"1",text:"Mo",sortAble:!1},{value:"2",text:"Tu",sortAble:!1},{value:"3",text:"We",sortAble:!1},{value:"4",text:"Th",sortAble:!1},{value:"5",text:"Fr",sortAble:!1},{value:"6",text:"Sa",sortAble:!1},{value:"0",text:"Su",sortAble:!1}],this.label="",this.outside=!1,this.required=!1,this.name="",this.value="",this.max="",this.min="",this.disabled=!1,this.clear=!1,this.icon="far fa-calendar-alt",this.position=null,this.positionH="left",this.validity={valid:!0,valueMissing:!1,rangeUnderflow:!1,rangeOverflow:!1},this.message="",this.goToPrevMonth=t=>{t.stopPropagation();const e=this.localDate.getFullYear(),s=this.localDate.getMonth(),i=this.localDate.getDate(),a=new Date(e,s-1,i),n=new Date(this.min);this.value=a<n?new Date(this.min).toISOString():a.toISOString()},this.goToNextMonth=t=>{t.stopPropagation();const e=this.localDate.getFullYear(),s=this.localDate.getMonth(),i=this.localDate.getDate(),a=new Date(e,s+1,i),n=new Date(this.max);this.value=a>n?new Date(this.max).toISOString():a.toISOString()},this.goToPrevYear=t=>{t.stopPropagation();const e=this.localDate.getFullYear(),s=this.localDate.getMonth(),i=this.localDate.getDate(),a=new Date(e-1,s,i),n=new Date(this.min);this.value=a<n?new Date(this.min).toISOString():a.toISOString()},this.goToNextYear=t=>{t.stopPropagation();const e=this.localDate.getFullYear(),s=this.localDate.getMonth(),i=this.localDate.getDate(),a=new Date(e+1,s,i),n=new Date(this.max);this.value=a>n?new Date(this.max).toISOString():a.toISOString()},this.handleButtonClick=t=>{t.stopPropagation(),t.target.disabled||(this.localDate.setDate(Number(t.target.text)),this.localDate.setHours(0,0,0,0),this.value=this.localDate.toISOString(),this.dateFieldUpdate.emit(this.value),this.datefieldupdate.emit(this.value),this.el.focus())}}watchHandler(){this.updateLocalDate(this.value),this.resetErrorStatus(),this.dateFieldUpdateEventUsedInternal.emit()}componentWillLoad(){this.updateLocalDate(this.value),this.resetErrorStatus()}inputUpdateHandler(t){this.value=t.detail?new Date(t.detail+"T00:00:00.000").toISOString():"",this.dateFieldUpdate.emit(this.value),this.datefieldupdate.emit(this.value)}async update(){const t=this.value;this.dateFieldUpdate.emit(t),this.datefieldupdate.emit(t)}async validate(){let t=!1;this.required&&!Boolean(this.value)&&(t=!0);let e=!1;Boolean(this.min)&&Boolean(this.value)&&new Date(this.value)<new Date(`${this.min}T00:00:00`)&&(e=!0);let s=!1;Boolean(this.max)&&Boolean(this.value)&&new Date(this.value)>new Date(`${this.max}T23:59:59`)&&(s=!0),this.validity={valid:!t&&!e&&!s,valueMissing:t,rangeUnderflow:e,rangeOverflow:s}}async updateErrorStatus(){await this.validate();const t=this.el.shadowRoot.querySelector("sas-form-input-template");null!==t&&(t.error=!this.validity.valid),this.validity.valid||(this.message=this.getErrorMessage())}async resetErrorStatus(){const t=this.el.shadowRoot.querySelector("sas-form-input-template");null!==t&&(t.error=!1),this.message=""}getErrorMessage(){const t=this.validity;return t.valueMissing?`${this.label} is required`:t.rangeOverflow?`${this.label} must be less or equal to ${this.max}`:t.rangeUnderflow?`${this.label} must be future dated`:void 0}updateLocalDate(t){if(t){const e=this.validateValue(t);if("invalid format"===e){const t=new Date;let e=t;if(Boolean(this.min)){const s=new Date(this.min);t<s&&(e=s)}if(Boolean(this.max)){const s=new Date(this.max);t>s&&(e=s)}this.value="",this.localDate=e}else this.localDate="less than min"===e?new Date(this.min):"larger than max"===e?new Date(this.max):new Date(this.value)}else this.localDate=new Date}validateValue(t){if(/^[0-9]{4}[\-](0[1-9]|1[012])[\-](0[1-9]|[12][0-9]|3[01])T([01][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])[\.]([0-9]{3})Z$/.test(t)){const e=new Date(t);return Boolean(this.min)&&e<new Date(this.min)?"less than min":Boolean(this.max)&&e>new Date(this.max)?"larger than max":"valid"}return console.warn('The specified value does not conform to the required format, "YYYY-MM-DDTHH:mm:ss.sssZ"'),"invalid format"}checkIsDateLimit(t){if(t){const e=new Date(t);if(e.getFullYear()===this.localDate.getFullYear()&&e.getMonth()===this.localDate.getMonth()&&e.getDate()===this.localDate.getDate())return!0}return!1}getLocalDateString(t){if(t){const e=new Date(t);if("Invalid Date"===e.toString())return"";{let t=`${e.getFullYear()}`;t.length<4&&(t="0".repeat(4-t.length)+t);const s=e.getMonth()+1;let i=`${s}`;s<10&&(i=`0${s}`);const a=e.getDate();let n=`${a}`;return a<10&&(n=`0${a}`),`${t}-${i}-${n}`}}return""}getTitleText(){return`${this.localDate.toLocaleString("default",{month:"long"})} ${this.localDate.getFullYear()}`}generateDateContent(){const t=this.localDate.getFullYear(),e=this.localDate.getMonth(),i=new Date(t,e,1).getDay(),a=new Date(t,e+1,0).getDate(),n=[];let h=i-1;0===i&&(h=6);let o={};const l=this.checkIsInMinMonth(),r=this.checkIsInMaxMonth();for(let t=0;t<h+a;t+=1){let e=!1;l&&t-h+1<new Date(this.min).getDate()&&(e=!0),r&&t-h+1>new Date(this.max).getDate()&&(e=!0),o[this.titles[t%7].text]=t<h?"":s("sas-button",{class:`date-button ${this.getButtonClass(t-h+1)}`,type:"text",text:""+(t-h+1),size:"small",disabled:e,onClick:this.handleButtonClick}),(t+1)%7!=0&&t!==h+a-1||(n.push(o),o={})}return n}checkIsInMinMonth(){if(Boolean(this.min)){const t=new Date(this.min);if(t.getFullYear()===this.localDate.getFullYear()&&t.getMonth()===this.localDate.getMonth())return!0}return!1}checkIsInMaxMonth(){if(Boolean(this.max)){const t=new Date(this.max);if(t.getFullYear()===this.localDate.getFullYear()&&t.getMonth()===this.localDate.getMonth())return!0}return!1}getButtonClass(t){return t===this.localDate.getDate()?"date-button-active":""}render(){return s(i,{tabindex:"0"},s("sas-form-input-template",{label:this.label,outside:this.outside,required:this.required,value:this.getLocalDateString(this.value),iconRight:this.icon,type:"date",disabled:this.disabled,clear:this.clear,"data-message":this.message,position:this.position,"position-h":this.positionH},s("div",{slot:"container",class:"container",tabindex:-1},s("div",{class:"title",tabindex:0},s("sas-icon",{class:"prev-year-icon "+(this.checkIsDateLimit(this.min)?"disabled":""),tabindex:0,icon:"far fa-angle-double-left",onClick:this.goToPrevYear,onKeyDown:n}),s("sas-icon",{class:"prev-month-icon "+(this.checkIsDateLimit(this.min)?"disabled":""),tabindex:0,icon:"far fa-angle-left",onClick:this.goToPrevMonth,onKeyDown:n}),s("span",{class:"title-content"},this.getTitleText()),s("sas-icon",{class:"next-month-icon "+(this.checkIsDateLimit(this.max)?"disabled":""),tabindex:0,icon:"far fa-angle-right",onClick:this.goToNextMonth,onKeyDown:n}),s("sas-icon",{class:"next-year-icon "+(this.checkIsDateLimit(this.max)?"disabled":""),tabindex:0,icon:"far fa-angle-double-right",onClick:this.goToNextYear,onKeyDown:n})),s("sas-table",{class:"date-table",headers:this.titles,items:this.generateDateContent(),tabindex:0}))))}get el(){return a(this)}static get watchers(){return{value:["watchHandler"]}}};h.style=":host{display:block}:host sas-form-input-template{--form-input-template-container-min-width:none;--form-input-template-container-max-width:370px;--input-height:var(--date-field-height, 40px)}:host .container{padding:30px 25px}:host .container:focus{outline:none}:host sas-icon{--icon-color:var(--s-500)}:host .title{display:grid;grid-template-columns:repeat(7, 1fr);justify-items:center;padding-bottom:25px}:host .title:focus,:host .date-table:focus{outline:none}:host .title-content{font-weight:bold;grid-column-start:3;grid-column-end:6;display:flex;align-items:center}:host .disabled{color:var(--s-300);pointer-events:none}";export{h as sas_date_field}