sas-ui 0.8.204 → 0.8.206

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

@@ -1499,7 +1499,7 @@ let SasForm = class {
 };
 SasForm.style = sasFormCss;
 
-const sasFormInputTemplateCss = ":host{display:block;position:relative;height:100%}:host .container{overflow-y:auto;position:absolute;min-width:var(--form-input-template-container-min-width, 100%);max-width:var(--form-input-template-container-max-width, none);background-color:white;height:0;z-index:-15;pointer-events:none}:host .top{transform:translateY(-100%);top:0}:host .right{right:0}:host .bottom{border:5px solid red;top:0}:host .left{border:5px solid red;left:0}:host(:focus){outline:none}:host(:focus-within)>.container{padding:10px 0;height:auto;overflow:visible;z-index:15;pointer-events:initial;box-shadow:0px 5px 10px #0000001A;border:1px solid #D0D9DE;border-radius:5px}:host(:not([label=\"\"])) .top{transform:translateY(-100%);top:0}:host(:not([label=\"\"])[outside]:not([outside=false])) .top{transform:translateY(calc(-100% + 30px));top:0}:host:after{content:attr(data-message);position:absolute;top:calc(100% + 5px);right:10px;color:var(--li-2);font-size:12px;text-align:right}";
+const sasFormInputTemplateCss = ":host{display:block;position:relative;height:100%}:host .hide{display:none}:host .container{overflow-y:auto;position:absolute;min-width:var(--form-input-template-container-min-width, 100%);max-width:var(--form-input-template-container-max-width, none);background-color:white;height:0;z-index:-15;pointer-events:none}:host .top{transform:translateY(-100%);top:0}:host .right{right:0}:host(:focus){outline:none}:host(:focus-within)>.container{padding:10px 0;height:auto;overflow:visible;z-index:15;pointer-events:initial;box-shadow:0px 5px 10px #0000001A;border:1px solid #D0D9DE;border-radius:5px}:host(:not([label=\"\"])) .top{transform:translateY(-100%);top:0}:host(:not([label=\"\"])[outside]:not([outside=false])) .top{transform:translateY(calc(-100% + 30px));top:0}:host:after{content:attr(data-message);position:absolute;top:calc(100% + 5px);right:10px;color:var(--li-2);font-size:12px;text-align:right}";
 
 let SasFormInputTemplate = class {
   constructor(hostRef) {
@@ -1584,36 +1584,28 @@ let SasFormInputTemplate = class {
      */
     this.minimumPixelsRightOfComponentRequired = 0;
     this.handleInputClick = (event) => {
-      console.log("handleInputClick");
       event.stopPropagation();
       if (!this.disabled) {
         const container = this.el.shadowRoot.querySelector('.container');
         const height = container.getBoundingClientRect().height;
-        console.log(`handleInputClick: container`);
-        console.log(container);
-        console.log(`handleInputClick: height: ${height}`);
-        // if (height > 0) {
-        //   this.show = false;
-        // } else {
-        //   this.show = true;
-        // }
-        this.show = true;
-        console.log(`handleInputClick: show: ${this.show}`);
+        if (height > 0) {
+          this.show = false;
+        }
+        else {
+          this.show = true;
+        }
         this.inputContainerClick.emit();
       }
     };
     this.handleContainerClick = (event) => {
-      console.log("handleContainerClick");
       event.stopPropagation();
-      console.log(`handleContainerClick: clickClose: ${this.clickClose}`);
-      // if (this.clickClose) {
-      //   setTimeout(() => {
-      //     this.show = false;
-      //   }, 100);
-      // }
+      if (this.clickClose) {
+        setTimeout(() => {
+          this.show = false;
+        }, 100);
+      }
     };
     this.updateContainerPosition = () => {
-      console.log("updateContainerPosition");
       this.updateVerticalContainerPosition();
       this.updateContainerHorizontalPosition();
     };
@@ -1624,8 +1616,6 @@ let SasFormInputTemplate = class {
       else {
         const top = this.el.getBoundingClientRect().top;
         const clientHeight = document.documentElement.clientHeight;
-        console.log(`updateVerticalContainerPosition: top: ${top}`);
-        console.log(`updateVerticalContainerPosition: clientHeight: ${clientHeight}`);
         if (clientHeight < top * 2 && top > this.minimumPixelsAboveComponentRequired) {
           this.containerVerticalPosition = 'top';
         }
@@ -1633,7 +1623,6 @@ let SasFormInputTemplate = class {
           this.containerVerticalPosition = 'bottom';
         }
       }
-      console.log(`updateVerticalContainerPosition: containerVerticalPosition: ${this.containerVerticalPosition}`);
     };
     this.updateContainerHorizontalPosition = () => {
       if (Boolean(this.positionH)) {
@@ -1642,8 +1631,6 @@ let SasFormInputTemplate = class {
       else {
         const left = this.el.getBoundingClientRect().left;
         const clientWidth = document.documentElement.clientWidth;
-        console.log(`updateContainerHorizontalPosition: left: ${left}`);
-        console.log(`updateContainerHorizontalPosition: clientWidth: ${clientWidth}`);
         if (clientWidth - this.minimumPixelsRightOfComponentRequired > left) {
           this.containerHorizontalPosition = 'left';
         }
@@ -1651,7 +1638,6 @@ let SasFormInputTemplate = class {
           this.containerHorizontalPosition = 'right';
         }
       }
-      console.log(`updateContainerHorizontalPosition: containerHorizontalPosition: ${this.containerHorizontalPosition}`);
     };
   }
   showHandler(newValue) {
@@ -1668,22 +1654,15 @@ let SasFormInputTemplate = class {
     this.el.focus();
   }
   showContainer() {
-    console.log("showContainer");
     const element = this.el.shadowRoot.querySelector('.container');
-    console.log("showContainer: element");
-    console.log(element);
     element.classList.remove('hide');
   }
   hideContainer() {
-    console.log("hideContainer");
     const element = this.el.shadowRoot.querySelector('.container');
-    console.log("hideContainer: element");
-    console.log(element);
     element.classList.add('hide');
   }
   render() {
-    console.log("sas-form-input-template: render()");
-    return (index.h(index.Host, { tabindex: 0, "data-message": "" }, index.h("sas-input", { label: this.label, outside: this.outside, required: this.required, type: this.type, placeholder: this.placeholder, "icon-right": this.iconRight, value: this.value, min: this.min, max: this.max, readonly: this.readonly, disabled: this.disabled, clear: this.clear, onKeyDown: global.keydownEvent, tabindex: 0,
+    return (index.h(index.Host, { onFocus: this.updateContainerPosition, tabindex: 0, "data-message": "" }, index.h("sas-input", { label: this.label, outside: this.outside, required: this.required, type: this.type, placeholder: this.placeholder, "icon-right": this.iconRight, value: this.value, min: this.min, max: this.max, readonly: this.readonly, disabled: this.disabled, clear: this.clear, onKeyDown: global.keydownEvent, tabindex: 0,
       // mouseDown event is faster than focus event, click event is slower than focus event
       onMouseDown: this.handleInputClick }, index.h("slot", { name: "input" })), index.h("div", { class: `container hide ${this.containerVerticalPosition} ${this.containerHorizontalPosition}`, onMouseDown: this.handleContainerClick }, index.h("slot", { name: "container" }))));
   }

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

@@ -152,10 +152,8 @@ let SasDateField = class {
       }
     };
     this.handleButtonClick = (event) => {
-      console.log("handleButtonClick: start");
       event.stopPropagation();
       if (!event.target.disabled) {
-        console.log("handleButtonClick: inside if statement - start");
         this.localDate.setDate(Number(event.target.text));
         this.localDate.setHours(0, 0, 0, 0);
         this.value = this.localDate.toISOString();
@@ -163,10 +161,8 @@ let SasDateField = class {
         this.datefieldupdate.emit(this.value);
         // usage 1: close date table after click if button is not disabled
         // usage 2: when used inside dropdown, keep focus so dropdown container will not close
-        this.el.focus({ preventScroll: true });
-        console.log("handleButtonClick: inside if statement - end");
+        this.el.focus();
       }
-      console.log("handleButtonClick: end");
     };
   }
   // handle value set by js
@@ -432,7 +428,6 @@ let SasDateField = class {
     return '';
   }
   render() {
-    console.log("sas-date-field: 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, minimumPixelsAboveComponentRequired: 400, minimumPixelsRightOfComponentRequired: 300 }, 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); }

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

@@ -937,6 +937,8 @@ let SasMenuBar = class {
   constructor(hostRef) {
     index$1.registerInstance(this, hostRef);
     this.moreFilterButtonWidth = 190;
+    // Prevents resize when input in filter slots cause scroll bar being added to the page
+    this.preventUpdateLayoutCallDueToRecentInputInteraction = false;
     /**
      * Sticky
      */
@@ -1013,10 +1015,10 @@ let SasMenuBar = class {
   }
   componentDidLoad() {
     const resizeObserver = new index((entries) => {
-      entries.forEach((entry) => {
-        console.log("resizeObserver: entry");
-        console.log(entry);
-        this.updateLayout();
+      entries.forEach(() => {
+        if (this.preventUpdateLayoutCallDueToRecentInputInteraction === false) {
+          this.updateLayout();
+        }
       });
     });
     const filterContainer = this.el.shadowRoot.querySelector('.filter');
@@ -1042,9 +1044,11 @@ let SasMenuBar = class {
       this.updateBadgeNumber();
     }
   }
-  inputinputContainerClickEventInternalHandler(event) {
-    console.log("inputinputContainerClickEventInternalHandler");
-    console.log(event.target.slot);
+  inputinputContainerClickEventInternalHandler() {
+    this.preventUpdateLayoutCallDueToRecentInputInteraction = true;
+    setTimeout(() => {
+      this.preventUpdateLayoutCallDueToRecentInputInteraction = false;
+    }, 10);
   }
   updateLayout() {
     let shouldKeepFocus = false;

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

@@ -1,4 +1,4 @@
-import { Component, Element, Event, Host, Listen, Method, Prop, State, Watch, h, } from '@stencil/core';
+import { Component, Host, h, Prop, Element, State, Event, Watch, Listen, Method, } from '@stencil/core';
 import { keydownEvent } from '../../global/global';
 export class SasDateField {
   constructor() {
@@ -141,10 +141,8 @@ export class SasDateField {
       }
     };
     this.handleButtonClick = (event) => {
-      console.log("handleButtonClick: start");
       event.stopPropagation();
       if (!event.target.disabled) {
-        console.log("handleButtonClick: inside if statement - start");
         this.localDate.setDate(Number(event.target.text));
         this.localDate.setHours(0, 0, 0, 0);
         this.value = this.localDate.toISOString();
@@ -152,10 +150,8 @@ export class SasDateField {
         this.datefieldupdate.emit(this.value);
         // usage 1: close date table after click if button is not disabled
         // usage 2: when used inside dropdown, keep focus so dropdown container will not close
-        this.el.focus({ preventScroll: true });
-        console.log("handleButtonClick: inside if statement - end");
+        this.el.focus();
       }
-      console.log("handleButtonClick: end");
     };
   }
   // handle value set by js
@@ -421,7 +417,6 @@ export class SasDateField {
     return '';
   }
   render() {
-    console.log("sas-date-field: 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, minimumPixelsAboveComponentRequired: 400, minimumPixelsRightOfComponentRequired: 300 },
         h("div", { slot: "container", class: "container", tabindex: -1 },

package/dist/collection/components/sas-form-input-template/sas-form-input-template.css

@@ -7,6 +7,9 @@
   position: relative;
   height: 100%;
 }
+:host .hide {
+  display: none;
+}
 :host .container {
   overflow-y: auto;
   position: absolute;
@@ -24,14 +27,6 @@
 :host .right {
   right: 0;
 }
-:host .bottom {
-  border: 5px solid red;
-  top: 0;
-}
-:host .left {
-  border: 5px solid red;
-  left: 0;
-}
 
 :host(:focus) {
   outline: none;

package/dist/collection/components/sas-form-input-template/sas-form-input-template.js

@@ -1,4 +1,4 @@
-import { Component, Element, Event, Host, Listen, Prop, Watch, h, } from '@stencil/core';
+import { Component, Host, h, Prop, Element, Watch, Event, Listen, } from '@stencil/core';
 import { keydownEvent } from '../../global/global';
 export class SasFormInputTemplate {
   constructor() {
@@ -81,36 +81,28 @@ export class SasFormInputTemplate {
      */
     this.minimumPixelsRightOfComponentRequired = 0;
     this.handleInputClick = (event) => {
-      console.log("handleInputClick");
       event.stopPropagation();
       if (!this.disabled) {
         const container = this.el.shadowRoot.querySelector('.container');
         const height = container.getBoundingClientRect().height;
-        console.log(`handleInputClick: container`);
-        console.log(container);
-        console.log(`handleInputClick: height: ${height}`);
-        // if (height > 0) {
-        //   this.show = false;
-        // } else {
-        //   this.show = true;
-        // }
-        this.show = true;
-        console.log(`handleInputClick: show: ${this.show}`);
+        if (height > 0) {
+          this.show = false;
+        }
+        else {
+          this.show = true;
+        }
         this.inputContainerClick.emit();
       }
     };
     this.handleContainerClick = (event) => {
-      console.log("handleContainerClick");
       event.stopPropagation();
-      console.log(`handleContainerClick: clickClose: ${this.clickClose}`);
-      // if (this.clickClose) {
-      //   setTimeout(() => {
-      //     this.show = false;
-      //   }, 100);
-      // }
+      if (this.clickClose) {
+        setTimeout(() => {
+          this.show = false;
+        }, 100);
+      }
     };
     this.updateContainerPosition = () => {
-      console.log("updateContainerPosition");
       this.updateVerticalContainerPosition();
       this.updateContainerHorizontalPosition();
     };
@@ -121,8 +113,6 @@ export class SasFormInputTemplate {
       else {
         const top = this.el.getBoundingClientRect().top;
         const clientHeight = document.documentElement.clientHeight;
-        console.log(`updateVerticalContainerPosition: top: ${top}`);
-        console.log(`updateVerticalContainerPosition: clientHeight: ${clientHeight}`);
         if (clientHeight < top * 2 && top > this.minimumPixelsAboveComponentRequired) {
           this.containerVerticalPosition = 'top';
         }
@@ -130,7 +120,6 @@ export class SasFormInputTemplate {
           this.containerVerticalPosition = 'bottom';
         }
       }
-      console.log(`updateVerticalContainerPosition: containerVerticalPosition: ${this.containerVerticalPosition}`);
     };
     this.updateContainerHorizontalPosition = () => {
       if (Boolean(this.positionH)) {
@@ -139,8 +128,6 @@ export class SasFormInputTemplate {
       else {
         const left = this.el.getBoundingClientRect().left;
         const clientWidth = document.documentElement.clientWidth;
-        console.log(`updateContainerHorizontalPosition: left: ${left}`);
-        console.log(`updateContainerHorizontalPosition: clientWidth: ${clientWidth}`);
         if (clientWidth - this.minimumPixelsRightOfComponentRequired > left) {
           this.containerHorizontalPosition = 'left';
         }
@@ -148,7 +135,6 @@ export class SasFormInputTemplate {
           this.containerHorizontalPosition = 'right';
         }
       }
-      console.log(`updateContainerHorizontalPosition: containerHorizontalPosition: ${this.containerHorizontalPosition}`);
     };
   }
   showHandler(newValue) {
@@ -165,22 +151,15 @@ export class SasFormInputTemplate {
     this.el.focus();
   }
   showContainer() {
-    console.log("showContainer");
     const element = this.el.shadowRoot.querySelector('.container');
-    console.log("showContainer: element");
-    console.log(element);
     element.classList.remove('hide');
   }
   hideContainer() {
-    console.log("hideContainer");
     const element = this.el.shadowRoot.querySelector('.container');
-    console.log("hideContainer: element");
-    console.log(element);
     element.classList.add('hide');
   }
   render() {
-    console.log("sas-form-input-template: render()");
-    return (h(Host, { tabindex: 0, "data-message": "" },
+    return (h(Host, { onFocus: this.updateContainerPosition, tabindex: 0, "data-message": "" },
       h("sas-input", { label: this.label, outside: this.outside, required: this.required, type: this.type, placeholder: this.placeholder, "icon-right": this.iconRight, value: this.value, min: this.min, max: this.max, readonly: this.readonly, disabled: this.disabled, clear: this.clear, onKeyDown: keydownEvent, tabindex: 0, 
         // mouseDown event is faster than focus event, click event is slower than focus event
         onMouseDown: this.handleInputClick },

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

@@ -1,4 +1,4 @@
-import { Component, Element, Host, Listen, Prop, h, } from '@stencil/core';
+import { Component, Host, h, Prop, Element, Listen, } from '@stencil/core';
 import ResizeObserver from 'resize-observer-polyfill';
 /**
  * @slot bulk-action - used for bulk action content
@@ -9,6 +9,8 @@ import ResizeObserver from 'resize-observer-polyfill';
 export class SasMenuBar {
   constructor() {
     this.moreFilterButtonWidth = 190;
+    // Prevents resize when input in filter slots cause scroll bar being added to the page
+    this.preventUpdateLayoutCallDueToRecentInputInteraction = false;
     /**
      * Sticky
      */
@@ -85,10 +87,10 @@ export class SasMenuBar {
   }
   componentDidLoad() {
     const resizeObserver = new ResizeObserver((entries) => {
-      entries.forEach((entry) => {
-        console.log("resizeObserver: entry");
-        console.log(entry);
-        this.updateLayout();
+      entries.forEach(() => {
+        if (this.preventUpdateLayoutCallDueToRecentInputInteraction === false) {
+          this.updateLayout();
+        }
       });
     });
     const filterContainer = this.el.shadowRoot.querySelector('.filter');
@@ -114,9 +116,11 @@ export class SasMenuBar {
       this.updateBadgeNumber();
     }
   }
-  inputinputContainerClickEventInternalHandler(event) {
-    console.log("inputinputContainerClickEventInternalHandler");
-    console.log(event.target.slot);
+  inputinputContainerClickEventInternalHandler() {
+    this.preventUpdateLayoutCallDueToRecentInputInteraction = true;
+    setTimeout(() => {
+      this.preventUpdateLayoutCallDueToRecentInputInteraction = false;
+    }, 10);
   }
   updateLayout() {
     let shouldKeepFocus = false;

package/dist/custom-elements/index.js

@@ -6291,10 +6291,8 @@ let SasDateField$1 = class extends H {
       }
     };
     this.handleButtonClick = (event) => {
-      console.log("handleButtonClick: start");
       event.stopPropagation();
       if (!event.target.disabled) {
-        console.log("handleButtonClick: inside if statement - start");
         this.localDate.setDate(Number(event.target.text));
         this.localDate.setHours(0, 0, 0, 0);
         this.value = this.localDate.toISOString();
@@ -6302,10 +6300,8 @@ let SasDateField$1 = class extends H {
         this.datefieldupdate.emit(this.value);
         // usage 1: close date table after click if button is not disabled
         // usage 2: when used inside dropdown, keep focus so dropdown container will not close
-        this.el.focus({ preventScroll: true });
-        console.log("handleButtonClick: inside if statement - end");
+        this.el.focus();
       }
-      console.log("handleButtonClick: end");
     };
   }
   // handle value set by js
@@ -6571,7 +6567,6 @@ let SasDateField$1 = class extends H {
     return '';
   }
   render() {
-    console.log("sas-date-field: 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, minimumPixelsAboveComponentRequired: 400, minimumPixelsRightOfComponentRequired: 300 }, 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; }
@@ -7280,7 +7275,7 @@ let SasForm$1 = class extends H {
   static get style() { return sasFormCss; }
 };
 
-const sasFormInputTemplateCss = ":host{display:block;position:relative;height:100%}:host .container{overflow-y:auto;position:absolute;min-width:var(--form-input-template-container-min-width, 100%);max-width:var(--form-input-template-container-max-width, none);background-color:white;height:0;z-index:-15;pointer-events:none}:host .top{transform:translateY(-100%);top:0}:host .right{right:0}:host .bottom{border:5px solid red;top:0}:host .left{border:5px solid red;left:0}:host(:focus){outline:none}:host(:focus-within)>.container{padding:10px 0;height:auto;overflow:visible;z-index:15;pointer-events:initial;box-shadow:0px 5px 10px #0000001A;border:1px solid #D0D9DE;border-radius:5px}:host(:not([label=\"\"])) .top{transform:translateY(-100%);top:0}:host(:not([label=\"\"])[outside]:not([outside=false])) .top{transform:translateY(calc(-100% + 30px));top:0}:host:after{content:attr(data-message);position:absolute;top:calc(100% + 5px);right:10px;color:var(--li-2);font-size:12px;text-align:right}";
+const sasFormInputTemplateCss = ":host{display:block;position:relative;height:100%}:host .hide{display:none}:host .container{overflow-y:auto;position:absolute;min-width:var(--form-input-template-container-min-width, 100%);max-width:var(--form-input-template-container-max-width, none);background-color:white;height:0;z-index:-15;pointer-events:none}:host .top{transform:translateY(-100%);top:0}:host .right{right:0}:host(:focus){outline:none}:host(:focus-within)>.container{padding:10px 0;height:auto;overflow:visible;z-index:15;pointer-events:initial;box-shadow:0px 5px 10px #0000001A;border:1px solid #D0D9DE;border-radius:5px}:host(:not([label=\"\"])) .top{transform:translateY(-100%);top:0}:host(:not([label=\"\"])[outside]:not([outside=false])) .top{transform:translateY(calc(-100% + 30px));top:0}:host:after{content:attr(data-message);position:absolute;top:calc(100% + 5px);right:10px;color:var(--li-2);font-size:12px;text-align:right}";
 
 let SasFormInputTemplate$1 = class extends H {
   constructor() {
@@ -7367,36 +7362,28 @@ let SasFormInputTemplate$1 = class extends H {
      */
     this.minimumPixelsRightOfComponentRequired = 0;
     this.handleInputClick = (event) => {
-      console.log("handleInputClick");
       event.stopPropagation();
       if (!this.disabled) {
         const container = this.el.shadowRoot.querySelector('.container');
         const height = container.getBoundingClientRect().height;
-        console.log(`handleInputClick: container`);
-        console.log(container);
-        console.log(`handleInputClick: height: ${height}`);
-        // if (height > 0) {
-        //   this.show = false;
-        // } else {
-        //   this.show = true;
-        // }
-        this.show = true;
-        console.log(`handleInputClick: show: ${this.show}`);
+        if (height > 0) {
+          this.show = false;
+        }
+        else {
+          this.show = true;
+        }
         this.inputContainerClick.emit();
       }
     };
     this.handleContainerClick = (event) => {
-      console.log("handleContainerClick");
       event.stopPropagation();
-      console.log(`handleContainerClick: clickClose: ${this.clickClose}`);
-      // if (this.clickClose) {
-      //   setTimeout(() => {
-      //     this.show = false;
-      //   }, 100);
-      // }
+      if (this.clickClose) {
+        setTimeout(() => {
+          this.show = false;
+        }, 100);
+      }
     };
     this.updateContainerPosition = () => {
-      console.log("updateContainerPosition");
       this.updateVerticalContainerPosition();
       this.updateContainerHorizontalPosition();
     };
@@ -7407,8 +7394,6 @@ let SasFormInputTemplate$1 = class extends H {
       else {
         const top = this.el.getBoundingClientRect().top;
         const clientHeight = document.documentElement.clientHeight;
-        console.log(`updateVerticalContainerPosition: top: ${top}`);
-        console.log(`updateVerticalContainerPosition: clientHeight: ${clientHeight}`);
         if (clientHeight < top * 2 && top > this.minimumPixelsAboveComponentRequired) {
           this.containerVerticalPosition = 'top';
         }
@@ -7416,7 +7401,6 @@ let SasFormInputTemplate$1 = class extends H {
           this.containerVerticalPosition = 'bottom';
         }
       }
-      console.log(`updateVerticalContainerPosition: containerVerticalPosition: ${this.containerVerticalPosition}`);
     };
     this.updateContainerHorizontalPosition = () => {
       if (Boolean(this.positionH)) {
@@ -7425,8 +7409,6 @@ let SasFormInputTemplate$1 = class extends H {
       else {
         const left = this.el.getBoundingClientRect().left;
         const clientWidth = document.documentElement.clientWidth;
-        console.log(`updateContainerHorizontalPosition: left: ${left}`);
-        console.log(`updateContainerHorizontalPosition: clientWidth: ${clientWidth}`);
         if (clientWidth - this.minimumPixelsRightOfComponentRequired > left) {
           this.containerHorizontalPosition = 'left';
         }
@@ -7434,7 +7416,6 @@ let SasFormInputTemplate$1 = class extends H {
           this.containerHorizontalPosition = 'right';
         }
       }
-      console.log(`updateContainerHorizontalPosition: containerHorizontalPosition: ${this.containerHorizontalPosition}`);
     };
   }
   showHandler(newValue) {
@@ -7451,22 +7432,15 @@ let SasFormInputTemplate$1 = class extends H {
     this.el.focus();
   }
   showContainer() {
-    console.log("showContainer");
     const element = this.el.shadowRoot.querySelector('.container');
-    console.log("showContainer: element");
-    console.log(element);
     element.classList.remove('hide');
   }
   hideContainer() {
-    console.log("hideContainer");
     const element = this.el.shadowRoot.querySelector('.container');
-    console.log("hideContainer: element");
-    console.log(element);
     element.classList.add('hide');
   }
   render() {
-    console.log("sas-form-input-template: render()");
-    return (h(Host, { tabindex: 0, "data-message": "" }, h("sas-input", { label: this.label, outside: this.outside, required: this.required, type: this.type, placeholder: this.placeholder, "icon-right": this.iconRight, value: this.value, min: this.min, max: this.max, readonly: this.readonly, disabled: this.disabled, clear: this.clear, onKeyDown: keydownEvent, tabindex: 0,
+    return (h(Host, { onFocus: this.updateContainerPosition, tabindex: 0, "data-message": "" }, h("sas-input", { label: this.label, outside: this.outside, required: this.required, type: this.type, placeholder: this.placeholder, "icon-right": this.iconRight, value: this.value, min: this.min, max: this.max, readonly: this.readonly, disabled: this.disabled, clear: this.clear, onKeyDown: keydownEvent, tabindex: 0,
       // mouseDown event is faster than focus event, click event is slower than focus event
       onMouseDown: this.handleInputClick }, h("slot", { name: "input" })), h("div", { class: `container hide ${this.containerVerticalPosition} ${this.containerHorizontalPosition}`, onMouseDown: this.handleContainerClick }, h("slot", { name: "container" }))));
   }
@@ -11046,6 +11020,8 @@ let SasMenuBar$1 = class extends H {
     this.__registerHost();
     this.__attachShadow();
     this.moreFilterButtonWidth = 190;
+    // Prevents resize when input in filter slots cause scroll bar being added to the page
+    this.preventUpdateLayoutCallDueToRecentInputInteraction = false;
     /**
      * Sticky
      */
@@ -11122,10 +11098,10 @@ let SasMenuBar$1 = class extends H {
   }
   componentDidLoad() {
     const resizeObserver = new index((entries) => {
-      entries.forEach((entry) => {
-        console.log("resizeObserver: entry");
-        console.log(entry);
-        this.updateLayout();
+      entries.forEach(() => {
+        if (this.preventUpdateLayoutCallDueToRecentInputInteraction === false) {
+          this.updateLayout();
+        }
       });
     });
     const filterContainer = this.el.shadowRoot.querySelector('.filter');
@@ -11151,9 +11127,11 @@ let SasMenuBar$1 = class extends H {
       this.updateBadgeNumber();
     }
   }
-  inputinputContainerClickEventInternalHandler(event) {
-    console.log("inputinputContainerClickEventInternalHandler");
-    console.log(event.target.slot);
+  inputinputContainerClickEventInternalHandler() {
+    this.preventUpdateLayoutCallDueToRecentInputInteraction = true;
+    setTimeout(() => {
+      this.preventUpdateLayoutCallDueToRecentInputInteraction = false;
+    }, 10);
   }
   updateLayout() {
     let shouldKeepFocus = false;