sas-ui 0.8.181 → 0.8.182

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

@@ -1179,7 +1179,7 @@ let SasDateField = class {
       formInputTemplate.error = !this.validity.valid;
     }
     if (!this.validity.valid) {
-      this.message = this.getErrorMessage();
+      this.message = this.message !== "" ? this.message : this.getErrorMessage();
     }
   }
   /**
@@ -1381,7 +1381,7 @@ let SasDateField = class {
 };
 SasDateField.style = sasDateFieldCss;
 
-const sasDateRangeCss = ":host{display:block}:host .container{position:relative;display:flex;justify-content:space-evenly;border:1px solid var(--s-300);border-radius:5px;box-sizing:border-box;--input-border:none;--input-focus-border:none;--input-focus-box-shadow:none}:host .container:after{content:attr(data-message);position:absolute;top:calc(100% + 5px);right:10px;color:var(--li-2);font-size:12px;text-align:right}:host .container:focus-within{border:1px solid var(--s-400);outline:none;box-shadow:0px 0px 5px #0000001A}:host .container:not([data-message=\"\"]){border-color:var(--li-2)}:host .outside-label{color:var(--secondary);font-size:14px;position:absolute;left:0;bottom:100%;transform:translateY(-10px)}:host .inside-label{color:var(--s-400);left:10px;position:absolute;z-index:1;font-size:12px;transform:translateY(-65%);background-color:white;padding:0 2px}:host .required-symbol{margin-left:5px;color:var(--primary)}:host .date-field{min-width:0}:host .icon{align-self:center}:host([outside]:not([outside=false]):not([label=\"\"])) .container{margin-top:30px}:host([disabled]:not([disabled=false])) .container{cursor:not-allowed}:host([disabled]:not([disabled=false])) label{cursor:default}:host([disabled]:not([disabled=false])) .container:before{content:\"\";background-color:var(--s-200);left:0;right:0;top:0;bottom:0;position:absolute;border-radius:5px;opacity:0.3;z-index:10}";
+const sasDateRangeCss = ":host{display:block}:host .container{position:relative;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--s-300);border-radius:5px;box-sizing:border-box;--input-border:none;--input-focus-border:none;--input-focus-box-shadow:none}:host .container:after{content:attr(data-message);position:absolute;top:calc(100% + 5px);right:10px;color:var(--li-2);font-size:12px;text-align:right}:host .container:focus-within{border:1px solid var(--s-400);outline:none;box-shadow:0px 0px 5px #0000001A}:host .container:not([data-message=\"\"]){border-color:var(--li-2)}:host .dateDiv{display:flex;justify-content:space-between}:host .outside-label{color:var(--secondary);font-size:14px;position:absolute;left:0;bottom:100%;transform:translateY(-10px)}:host .inside-label{color:var(--s-400);left:10px;position:absolute;z-index:1;font-size:12px;transform:translateY(-65%);background-color:white;padding:0 2px}:host .required-symbol{margin-left:5px;color:var(--primary)}:host .date-field{min-width:0;width:100%;width:-moz-available;width:-webkit-fill-available}:host .icon{align-self:center;padding-right:9px}:host([outside]:not([outside=false]):not([label=\"\"])) .container{margin-top:30px}:host([disabled]:not([disabled=false])) .container{cursor:not-allowed}:host([disabled]:not([disabled=false])) label{cursor:default}:host([disabled]:not([disabled=false])) .container:before{content:\"\";background-color:var(--s-200);left:0;right:0;top:0;bottom:0;position:absolute;border-radius:5px;opacity:0.3;z-index:10}";
 
 let SasDateRange = class {
   constructor(hostRef) {
@@ -1451,6 +1451,18 @@ let SasDateRange = class {
     this.labelIconClickHandler = () => {
       this.labeliconclicked.emit();
     };
+    this.getClearIcon = () => {
+      if (this.from !== "" || this.to !== "")
+        return 'fa-solid fa-circle-xmark';
+      else
+        return 'far fa-calendar-alt';
+    };
+    this.clearDates = () => {
+      if (this.from !== "" || this.to !== "") {
+        this.from = "";
+        this.to = "";
+      }
+    };
   }
   watchFromHandler() {
     this.resetErrorStatus();
@@ -1462,13 +1474,52 @@ let SasDateRange = class {
    * Validate
    */
   async validate() {
-    let valueMissing = true;
-    if (this.required && Boolean(this.from) && Boolean(this.to)) {
-      valueMissing = false;
+    let fromValueMissing = false;
+    let toValueMissing = false;
+    if (!Boolean(this.from)) {
+      fromValueMissing = true;
+    }
+    if (!Boolean(this.to)) {
+      toValueMissing = true;
+    }
+    let fromRangeUnderflow = false;
+    if (Boolean(this.min) && Boolean(this.from)) {
+      const inputDate = new Date(this.from);
+      const minDate = new Date(`${this.min}T00:00:00`);
+      if (inputDate < minDate) {
+        fromRangeUnderflow = true;
+      }
+    }
+    let fromRangeOverflow = false;
+    if (Boolean(this.max) && Boolean(this.from)) {
+      const inputDate = new Date(this.from);
+      const maxDate = new Date(`${this.max}T23:59:59`);
+      if (inputDate > maxDate) {
+        fromRangeOverflow = true;
+      }
     }
+    let toRangeUnderflow = false;
+    if (Boolean(this.min) && Boolean(this.to)) {
+      const inputDate = new Date(this.to);
+      const minDate = new Date(`${this.min}T00:00:00`);
+      if (inputDate < minDate) {
+        toRangeUnderflow = true;
+      }
+    }
+    let toRangeOverflow = false;
+    if (Boolean(this.max) && Boolean(this.to)) {
+      const inputDate = new Date(this.to);
+      const maxDate = new Date(`${this.max}T23:59:59`);
+      if (inputDate > maxDate) {
+        toRangeOverflow = true;
+      }
+    }
+    let valueMissing = false;
+    if (this.required && (toValueMissing || fromValueMissing))
+      valueMissing = true;
     this.validity = {
-      valid: !valueMissing,
-      valueMissing: valueMissing,
+      valid: !valueMissing && !fromRangeUnderflow && !fromRangeOverflow && !toRangeUnderflow && !toRangeOverflow,
+      valueMissing: toValueMissing || fromValueMissing,
     };
   }
   /**
@@ -1488,6 +1539,7 @@ let SasDateRange = class {
     };
   }
   emitEvent() {
+    this.validate();
     this.daterangeupdate.emit({
       from: this.from,
       to: this.to,
@@ -1508,7 +1560,7 @@ let SasDateRange = class {
       ? index.h("label", { class: this.outside ? 'outside-label' : 'inside-label' }, this.label, this.required
         ? index.h("span", { class: "required-symbol" }, "*")
         : null, index.h("sas-icon", { icon: this.iconLabel, onClick: this.labelIconClickHandler }))
-      : null, index.h("sas-date-field", { class: "date-field", icon: "", value: this.from, min: this.min, max: Boolean(this.to) ? this.to : this.max, position: this.position, onDatefieldupdate: this.fromDateUpdateHander }), index.h("sas-icon", { class: "icon", icon: "far fa-long-arrow-alt-right" }), index.h("sas-date-field", { class: "date-field", icon: "", value: this.to, min: Boolean(this.from) ? this.from : this.min, max: this.max, position: this.position, "position-h": "right", onDatefieldupdate: this.toDateUpdateHander }))));
+      : null, index.h("div", { class: "dateDiv" }, index.h("sas-date-field", { class: "date-field", icon: "", value: this.from, min: this.min, max: Boolean(this.to) ? this.to : this.max, position: this.position, onDatefieldupdate: this.fromDateUpdateHander }), index.h("sas-icon", { class: "icon", icon: "far fa-long-arrow-alt-right" })), index.h("div", { class: "dateDiv" }, index.h("sas-date-field", { class: "date-field", icon: "", value: this.to, min: Boolean(this.from) ? this.from : this.min, max: this.max, position: this.position, "position-h": "right", onDatefieldupdate: this.toDateUpdateHander }), index.h("sas-icon", { class: "icon", icon: this.getClearIcon(), onClick: this.clearDates })))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
@@ -2347,7 +2399,7 @@ let SasImage = class {
 };
 SasImage.style = sasImageCss;
 
-const sasInputCss = ":host{display:flex}:host .input-container{position:relative;height:var(--input-height, 40px);width:100%;max-width:100%;background-color:var(--input-background-color, white);border:var(--input-border, 1px solid var(--s-300));border-radius:5px;box-sizing:border-box;display:flex;gap:5px;padding:var(--input-padding, 0)}:host .input-container:focus-within{border:var(--input-border, 1px solid var(--s-400));outline:none;box-shadow:var(--input-focus-box-shadow, 0px 0px 5px #0000001A)}:host .input-container:after{content:attr(data-message);position:absolute;top:calc(100% + 5px);right:10px;color:var(--li-2);font-size:12px;text-align:right}:host .outside-label{color:var(--secondary);font-size:14px;position:absolute;left:0;bottom:100%;transform:translateY(-10px)}:host .inside-label{color:var(--s-400);left:10px;position:absolute;z-index:1;font-size:12px;transform:translateY(-65%);background-color:white;padding:0 2px}:host .required-symbol{margin-left:5px;color:var(--primary)}:host .input{border:none;color:var(--input-color, var(--s-500));background-color:var(--input-background-color, white);height:100%;min-width:0;font-family:roboto, \"Font Awesome 6 Pro\";font-size:14px;text-overflow:ellipsis;flex-grow:1;flex-shrink:1;margin:0 10px;box-sizing:border-box}:host .input:focus{outline:none}:host .input:required{box-shadow:none}:host ::-webkit-input-placeholder{color:var(--s-400)}:host :-ms-input-placeholder{color:var(--s-400)}:host ::placeholder{color:var(--s-400)}:host input[type=date],:host input[type=time]{-webkit-appearance:none}:host input[type=date]::-webkit-calendar-picker-indicator{display:none}:host input[type=time]::-webkit-calendar-picker-indicator{display:none}:host .input-date-container{position:relative;flex-grow:1;display:flex}:host .input-date-cover{position:absolute;left:0;right:0;top:0;bottom:0;z-index:1}:host input[readonly]:not([readonly=false]){cursor:initial}:host .right-icon-container{display:flex;align-items:center}:host .clear-icon{--icon-color:white;--icon-background-color:var(--s-300);--icon-background-width:14px;--icon-background-height:14px;--icon-size:9px;box-shadow:none;margin-right:10px}:host .input-right-icon{--icon-color:var(--input-right-icon-color, var(--s-500));--icon-size:var(--input-right-icon-size, 14px);--icon-background-height:38px;margin-right:10px;padding:var(--input-right-icon-padding, 0)}:host .input-error{border:1px solid var(--li-2)}:host(:focus){outline:none}:host([type=textarea]) .input-container{height:var(--input-height, auto)}:host([type=textarea]) .right-icon-container{align-items:flex-start}:host([type=textarea]) .clear-icon{margin-top:10px;margin-right:10px}:host(:not([label=\"\"])) .input-container{margin-top:var(--input-margin-top, 5px)}:host([outside]:not([outside=false]):not([label=\"\"])) .input-container{margin-top:var(--input-margin-top, 30px)}:host([disabled]:not([disabled=false])) .input-container{cursor:not-allowed}:host([disabled]:not([disabled=false])) label{cursor:default}:host([disabled]:not([disabled=false])) .input-container:before{content:\"\";background-color:var(--s-200);left:0;right:0;top:0;bottom:0;position:absolute;border-radius:5px;opacity:0.3;z-index:10}:host-context([error]:not([error=false])) .input-container,:host([error]:not([error=false])) .input-container{border-color:var(--li-2)}";
+const sasInputCss = ":host{display:flex}:host .input-container{position:relative;height:var(--input-height, 40px);width:100%;max-width:100%;background-color:var(--input-background-color, white);border:var(--input-border, 1px solid var(--s-300));border-radius:5px;box-sizing:border-box;display:flex;gap:5px;padding:var(--input-padding, 0)}:host .input-container:focus-within{border:var(--input-border, 1px solid var(--s-400));outline:none;box-shadow:var(--input-focus-box-shadow, 0px 0px 5px #0000001A)}:host .input-container:after{content:attr(data-message);position:absolute;top:calc(100% + 5px);right:10px;color:var(--li-2);font-size:12px;text-align:right}:host .outside-label{color:var(--secondary);font-size:14px;position:absolute;left:0;bottom:100%;transform:translateY(-10px)}:host .inside-label{color:var(--s-400);left:10px;position:absolute;z-index:1;font-size:12px;transform:translateY(-65%);background-color:white;padding:0 2px}:host .required-symbol{margin-left:5px;color:var(--primary)}:host .input{border:none;color:var(--input-color, var(--s-500));background-color:var(--input-background-color, white);height:100%;min-width:0;font-family:roboto, \"Font Awesome 6 Pro\";font-size:14px;text-overflow:ellipsis;flex-grow:1;flex-shrink:1;margin:0 10px;box-sizing:border-box}:host .input:focus{outline:none}:host .input:required{box-shadow:none}:host ::-webkit-input-placeholder{color:var(--s-400)}:host :-ms-input-placeholder{color:var(--s-400)}:host ::placeholder{color:var(--s-400)}:host input[type=date],:host input[type=time]{-webkit-appearance:none}:host input[type=date]::-webkit-calendar-picker-indicator{display:none}:host input[type=time]::-webkit-calendar-picker-indicator{display:none}:host .input-date-container{position:relative;flex-grow:1;display:flex}:host .input-date-cover{position:absolute;left:0;right:0;top:0;bottom:0;z-index:1}:host input[readonly]:not([readonly=false]){cursor:initial}:host .iconLabel{padding-left:5px;cursor:pointer}:host .right-icon-container{display:flex;align-items:center}:host .clear-icon{--icon-color:white;--icon-background-color:var(--s-300);--icon-background-width:14px;--icon-background-height:14px;--icon-size:9px;box-shadow:none;margin-right:10px}:host .input-right-icon{--icon-color:var(--input-right-icon-color, var(--s-500));--icon-size:var(--input-right-icon-size, 14px);--icon-background-height:38px;margin-right:10px;padding:var(--input-right-icon-padding, 0)}:host .input-error{border:1px solid var(--li-2)}:host(:focus){outline:none}:host([type=textarea]) .input-container{height:var(--input-height, auto)}:host([type=textarea]) .right-icon-container{align-items:flex-start}:host([type=textarea]) .clear-icon{margin-top:10px;margin-right:10px}:host(:not([label=\"\"])) .input-container{margin-top:var(--input-margin-top, 5px)}:host([outside]:not([outside=false]):not([label=\"\"])) .input-container{margin-top:var(--input-margin-top, 30px)}:host([disabled]:not([disabled=false])) .input-container{cursor:not-allowed}:host([disabled]:not([disabled=false])) label{cursor:default}:host([disabled]:not([disabled=false])) .input-container:before{content:\"\";background-color:var(--s-200);left:0;right:0;top:0;bottom:0;position:absolute;border-radius:5px;opacity:0.3;z-index:10}:host-context([error]:not([error=false])) .input-container,:host([error]:not([error=false])) .input-container{border-color:var(--li-2)}";
 
 let SasInput = class {
   constructor(hostRef) {
@@ -2686,7 +2738,7 @@ let SasInput = class {
     , null, index.h("div", { class: "input-container", "data-message": this.message }, Boolean(this.label)
       ? index.h("label", { class: this.outside ? 'outside-label' : 'inside-label' }, this.label, this.required
         ? index.h("span", { class: "required-symbol" }, "*")
-        : null, index.h("sas-icon", { icon: this.iconLabel, onClick: this.labelIconClickHandler }))
+        : null, index.h("sas-icon", { class: "iconLabel", icon: this.iconLabel, onClick: this.labelIconClickHandler }))
       : null, this.type === 'tel'
       ? index.h("sas-input-tel", { "data-country": this.country, "data-value": this.value, "data-placeholder": this.placeholder, "data-placeholderNumberType": this.placeholderNumberType })
       : null, this.type === 'textarea'

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

@@ -216,7 +216,7 @@ export class SasDateField {
       formInputTemplate.error = !this.validity.valid;
     }
     if (!this.validity.valid) {
-      this.message = this.getErrorMessage();
+      this.message = this.message !== "" ? this.message : this.getErrorMessage();
     }
   }
   /**

package/dist/collection/components/sas-date-range/sas-date-range.css

@@ -3,8 +3,8 @@
 }
 :host .container {
   position: relative;
-  display: flex;
-  justify-content: space-evenly;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   border: 1px solid var(--s-300);
   border-radius: 5px;
   box-sizing: border-box;
@@ -29,6 +29,10 @@
 :host .container:not([data-message=""]) {
   border-color: var(--li-2);
 }
+:host .dateDiv {
+  display: flex;
+  justify-content: space-between;
+}
 :host .outside-label {
   color: var(--secondary);
   font-size: 14px;
@@ -53,9 +57,13 @@
 }
 :host .date-field {
   min-width: 0;
+  width: 100%;
+  width: -moz-available;
+  width: -webkit-fill-available;
 }
 :host .icon {
   align-self: center;
+  padding-right: 9px;
 }
 
 :host([outside]:not([outside=false]):not([label=""])) .container {

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

@@ -64,6 +64,18 @@ export class SasDateRange {
     this.labelIconClickHandler = () => {
       this.labeliconclicked.emit();
     };
+    this.getClearIcon = () => {
+      if (this.from !== "" || this.to !== "")
+        return 'fa-solid fa-circle-xmark';
+      else
+        return 'far fa-calendar-alt';
+    };
+    this.clearDates = () => {
+      if (this.from !== "" || this.to !== "") {
+        this.from = "";
+        this.to = "";
+      }
+    };
   }
   watchFromHandler() {
     this.resetErrorStatus();
@@ -75,13 +87,52 @@ export class SasDateRange {
    * Validate
    */
   async validate() {
-    let valueMissing = true;
-    if (this.required && Boolean(this.from) && Boolean(this.to)) {
-      valueMissing = false;
+    let fromValueMissing = false;
+    let toValueMissing = false;
+    if (!Boolean(this.from)) {
+      fromValueMissing = true;
+    }
+    if (!Boolean(this.to)) {
+      toValueMissing = true;
+    }
+    let fromRangeUnderflow = false;
+    if (Boolean(this.min) && Boolean(this.from)) {
+      const inputDate = new Date(this.from);
+      const minDate = new Date(`${this.min}T00:00:00`);
+      if (inputDate < minDate) {
+        fromRangeUnderflow = true;
+      }
+    }
+    let fromRangeOverflow = false;
+    if (Boolean(this.max) && Boolean(this.from)) {
+      const inputDate = new Date(this.from);
+      const maxDate = new Date(`${this.max}T23:59:59`);
+      if (inputDate > maxDate) {
+        fromRangeOverflow = true;
+      }
+    }
+    let toRangeUnderflow = false;
+    if (Boolean(this.min) && Boolean(this.to)) {
+      const inputDate = new Date(this.to);
+      const minDate = new Date(`${this.min}T00:00:00`);
+      if (inputDate < minDate) {
+        toRangeUnderflow = true;
+      }
+    }
+    let toRangeOverflow = false;
+    if (Boolean(this.max) && Boolean(this.to)) {
+      const inputDate = new Date(this.to);
+      const maxDate = new Date(`${this.max}T23:59:59`);
+      if (inputDate > maxDate) {
+        toRangeOverflow = true;
+      }
     }
+    let valueMissing = false;
+    if (this.required && (toValueMissing || fromValueMissing))
+      valueMissing = true;
     this.validity = {
-      valid: !valueMissing,
-      valueMissing: valueMissing,
+      valid: !valueMissing && !fromRangeUnderflow && !fromRangeOverflow && !toRangeUnderflow && !toRangeOverflow,
+      valueMissing: toValueMissing || fromValueMissing,
     };
   }
   /**
@@ -101,6 +152,7 @@ export class SasDateRange {
     };
   }
   emitEvent() {
+    this.validate();
     this.daterangeupdate.emit({
       from: this.from,
       to: this.to,
@@ -127,9 +179,12 @@ export class SasDateRange {
               : null,
             h("sas-icon", { icon: this.iconLabel, onClick: this.labelIconClickHandler }))
           : null,
-        h("sas-date-field", { class: "date-field", icon: "", value: this.from, min: this.min, max: Boolean(this.to) ? this.to : this.max, position: this.position, onDatefieldupdate: this.fromDateUpdateHander }),
-        h("sas-icon", { class: "icon", icon: "far fa-long-arrow-alt-right" }),
-        h("sas-date-field", { class: "date-field", icon: "", value: this.to, min: Boolean(this.from) ? this.from : this.min, max: this.max, position: this.position, "position-h": "right", onDatefieldupdate: this.toDateUpdateHander }))));
+        h("div", { class: "dateDiv" },
+          h("sas-date-field", { class: "date-field", icon: "", value: this.from, min: this.min, max: Boolean(this.to) ? this.to : this.max, position: this.position, onDatefieldupdate: this.fromDateUpdateHander }),
+          h("sas-icon", { class: "icon", icon: "far fa-long-arrow-alt-right" })),
+        h("div", { class: "dateDiv" },
+          h("sas-date-field", { class: "date-field", icon: "", value: this.to, min: Boolean(this.from) ? this.from : this.min, max: this.max, position: this.position, "position-h": "right", onDatefieldupdate: this.toDateUpdateHander }),
+          h("sas-icon", { class: "icon", icon: this.getClearIcon(), onClick: this.clearDates })))));
   }
   static get is() { return "sas-date-range"; }
   static get encapsulation() { return "shadow"; }

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

@@ -116,6 +116,10 @@
 :host input[readonly]:not([readonly=false]) {
   cursor: initial;
 }
+:host .iconLabel {
+  padding-left: 5px;
+  cursor: pointer;
+}
 :host .right-icon-container {
   display: flex;
   align-items: center;

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

@@ -334,7 +334,7 @@ export class SasInput {
             this.required
               ? h("span", { class: "required-symbol" }, "*")
               : null,
-            h("sas-icon", { icon: this.iconLabel, onClick: this.labelIconClickHandler }))
+            h("sas-icon", { class: "iconLabel", icon: this.iconLabel, onClick: this.labelIconClickHandler }))
           : null,
         this.type === 'tel'
           ? h("sas-input-tel", { "data-country": this.country, "data-value": this.value, "data-placeholder": this.placeholder, "data-placeholderNumberType": this.placeholderNumberType })

package/dist/collection/components/sas-input/sas-input.stories.js

@@ -30,6 +30,7 @@ export const TypeText = (args) => `
     clear="${args.clear}"
     maxlength="${args.maxlength}"
     minlength="${args.minlength}"
+    icon-label="${args.iconLabel}"
   >
   </sas-input>
 `;
@@ -47,6 +48,7 @@ TypeText.args = {
   clear: false,
   maxlength: 100,
   minlength: 0,
+  iconLabel: "fa-regular fa-circle-question"
 };
 
 export const TypeTextarea = (args) => `

package/dist/custom-elements/index.js

@@ -6386,7 +6386,7 @@ let SasDateField$1 = class extends H {
       formInputTemplate.error = !this.validity.valid;
     }
     if (!this.validity.valid) {
-      this.message = this.getErrorMessage();
+      this.message = this.message !== "" ? this.message : this.getErrorMessage();
     }
   }
   /**
@@ -6588,7 +6588,7 @@ let SasDateField$1 = class extends H {
   static get style() { return sasDateFieldCss; }
 };
 
-const sasDateRangeCss = ":host{display:block}:host .container{position:relative;display:flex;justify-content:space-evenly;border:1px solid var(--s-300);border-radius:5px;box-sizing:border-box;--input-border:none;--input-focus-border:none;--input-focus-box-shadow:none}:host .container:after{content:attr(data-message);position:absolute;top:calc(100% + 5px);right:10px;color:var(--li-2);font-size:12px;text-align:right}:host .container:focus-within{border:1px solid var(--s-400);outline:none;box-shadow:0px 0px 5px #0000001A}:host .container:not([data-message=\"\"]){border-color:var(--li-2)}:host .outside-label{color:var(--secondary);font-size:14px;position:absolute;left:0;bottom:100%;transform:translateY(-10px)}:host .inside-label{color:var(--s-400);left:10px;position:absolute;z-index:1;font-size:12px;transform:translateY(-65%);background-color:white;padding:0 2px}:host .required-symbol{margin-left:5px;color:var(--primary)}:host .date-field{min-width:0}:host .icon{align-self:center}:host([outside]:not([outside=false]):not([label=\"\"])) .container{margin-top:30px}:host([disabled]:not([disabled=false])) .container{cursor:not-allowed}:host([disabled]:not([disabled=false])) label{cursor:default}:host([disabled]:not([disabled=false])) .container:before{content:\"\";background-color:var(--s-200);left:0;right:0;top:0;bottom:0;position:absolute;border-radius:5px;opacity:0.3;z-index:10}";
+const sasDateRangeCss = ":host{display:block}:host .container{position:relative;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--s-300);border-radius:5px;box-sizing:border-box;--input-border:none;--input-focus-border:none;--input-focus-box-shadow:none}:host .container:after{content:attr(data-message);position:absolute;top:calc(100% + 5px);right:10px;color:var(--li-2);font-size:12px;text-align:right}:host .container:focus-within{border:1px solid var(--s-400);outline:none;box-shadow:0px 0px 5px #0000001A}:host .container:not([data-message=\"\"]){border-color:var(--li-2)}:host .dateDiv{display:flex;justify-content:space-between}:host .outside-label{color:var(--secondary);font-size:14px;position:absolute;left:0;bottom:100%;transform:translateY(-10px)}:host .inside-label{color:var(--s-400);left:10px;position:absolute;z-index:1;font-size:12px;transform:translateY(-65%);background-color:white;padding:0 2px}:host .required-symbol{margin-left:5px;color:var(--primary)}:host .date-field{min-width:0;width:100%;width:-moz-available;width:-webkit-fill-available}:host .icon{align-self:center;padding-right:9px}:host([outside]:not([outside=false]):not([label=\"\"])) .container{margin-top:30px}:host([disabled]:not([disabled=false])) .container{cursor:not-allowed}:host([disabled]:not([disabled=false])) label{cursor:default}:host([disabled]:not([disabled=false])) .container:before{content:\"\";background-color:var(--s-200);left:0;right:0;top:0;bottom:0;position:absolute;border-radius:5px;opacity:0.3;z-index:10}";
 
 let SasDateRange$1 = class extends H {
   constructor() {
@@ -6660,6 +6660,18 @@ let SasDateRange$1 = class extends H {
     this.labelIconClickHandler = () => {
       this.labeliconclicked.emit();
     };
+    this.getClearIcon = () => {
+      if (this.from !== "" || this.to !== "")
+        return 'fa-solid fa-circle-xmark';
+      else
+        return 'far fa-calendar-alt';
+    };
+    this.clearDates = () => {
+      if (this.from !== "" || this.to !== "") {
+        this.from = "";
+        this.to = "";
+      }
+    };
   }
   watchFromHandler() {
     this.resetErrorStatus();
@@ -6671,13 +6683,52 @@ let SasDateRange$1 = class extends H {
    * Validate
    */
   async validate() {
-    let valueMissing = true;
-    if (this.required && Boolean(this.from) && Boolean(this.to)) {
-      valueMissing = false;
+    let fromValueMissing = false;
+    let toValueMissing = false;
+    if (!Boolean(this.from)) {
+      fromValueMissing = true;
+    }
+    if (!Boolean(this.to)) {
+      toValueMissing = true;
+    }
+    let fromRangeUnderflow = false;
+    if (Boolean(this.min) && Boolean(this.from)) {
+      const inputDate = new Date(this.from);
+      const minDate = new Date(`${this.min}T00:00:00`);
+      if (inputDate < minDate) {
+        fromRangeUnderflow = true;
+      }
+    }
+    let fromRangeOverflow = false;
+    if (Boolean(this.max) && Boolean(this.from)) {
+      const inputDate = new Date(this.from);
+      const maxDate = new Date(`${this.max}T23:59:59`);
+      if (inputDate > maxDate) {
+        fromRangeOverflow = true;
+      }
     }
+    let toRangeUnderflow = false;
+    if (Boolean(this.min) && Boolean(this.to)) {
+      const inputDate = new Date(this.to);
+      const minDate = new Date(`${this.min}T00:00:00`);
+      if (inputDate < minDate) {
+        toRangeUnderflow = true;
+      }
+    }
+    let toRangeOverflow = false;
+    if (Boolean(this.max) && Boolean(this.to)) {
+      const inputDate = new Date(this.to);
+      const maxDate = new Date(`${this.max}T23:59:59`);
+      if (inputDate > maxDate) {
+        toRangeOverflow = true;
+      }
+    }
+    let valueMissing = false;
+    if (this.required && (toValueMissing || fromValueMissing))
+      valueMissing = true;
     this.validity = {
-      valid: !valueMissing,
-      valueMissing: valueMissing,
+      valid: !valueMissing && !fromRangeUnderflow && !fromRangeOverflow && !toRangeUnderflow && !toRangeOverflow,
+      valueMissing: toValueMissing || fromValueMissing,
     };
   }
   /**
@@ -6697,6 +6748,7 @@ let SasDateRange$1 = class extends H {
     };
   }
   emitEvent() {
+    this.validate();
     this.daterangeupdate.emit({
       from: this.from,
       to: this.to,
@@ -6717,7 +6769,7 @@ let SasDateRange$1 = class extends H {
       ? h("label", { class: this.outside ? 'outside-label' : 'inside-label' }, this.label, this.required
         ? h("span", { class: "required-symbol" }, "*")
         : null, h("sas-icon", { icon: this.iconLabel, onClick: this.labelIconClickHandler }))
-      : null, h("sas-date-field", { class: "date-field", icon: "", value: this.from, min: this.min, max: Boolean(this.to) ? this.to : this.max, position: this.position, onDatefieldupdate: this.fromDateUpdateHander }), h("sas-icon", { class: "icon", icon: "far fa-long-arrow-alt-right" }), h("sas-date-field", { class: "date-field", icon: "", value: this.to, min: Boolean(this.from) ? this.from : this.min, max: this.max, position: this.position, "position-h": "right", onDatefieldupdate: this.toDateUpdateHander }))));
+      : null, h("div", { class: "dateDiv" }, h("sas-date-field", { class: "date-field", icon: "", value: this.from, min: this.min, max: Boolean(this.to) ? this.to : this.max, position: this.position, onDatefieldupdate: this.fromDateUpdateHander }), h("sas-icon", { class: "icon", icon: "far fa-long-arrow-alt-right" })), h("div", { class: "dateDiv" }, h("sas-date-field", { class: "date-field", icon: "", value: this.to, min: Boolean(this.from) ? this.from : this.min, max: this.max, position: this.position, "position-h": "right", onDatefieldupdate: this.toDateUpdateHander }), h("sas-icon", { class: "icon", icon: this.getClearIcon(), onClick: this.clearDates })))));
   }
   get el() { return this; }
   static get watchers() { return {
@@ -7572,7 +7624,7 @@ let SasImage$1 = class extends H {
   static get style() { return sasImageCss; }
 };
 
-const sasInputCss = ":host{display:flex}:host .input-container{position:relative;height:var(--input-height, 40px);width:100%;max-width:100%;background-color:var(--input-background-color, white);border:var(--input-border, 1px solid var(--s-300));border-radius:5px;box-sizing:border-box;display:flex;gap:5px;padding:var(--input-padding, 0)}:host .input-container:focus-within{border:var(--input-border, 1px solid var(--s-400));outline:none;box-shadow:var(--input-focus-box-shadow, 0px 0px 5px #0000001A)}:host .input-container:after{content:attr(data-message);position:absolute;top:calc(100% + 5px);right:10px;color:var(--li-2);font-size:12px;text-align:right}:host .outside-label{color:var(--secondary);font-size:14px;position:absolute;left:0;bottom:100%;transform:translateY(-10px)}:host .inside-label{color:var(--s-400);left:10px;position:absolute;z-index:1;font-size:12px;transform:translateY(-65%);background-color:white;padding:0 2px}:host .required-symbol{margin-left:5px;color:var(--primary)}:host .input{border:none;color:var(--input-color, var(--s-500));background-color:var(--input-background-color, white);height:100%;min-width:0;font-family:roboto, \"Font Awesome 6 Pro\";font-size:14px;text-overflow:ellipsis;flex-grow:1;flex-shrink:1;margin:0 10px;box-sizing:border-box}:host .input:focus{outline:none}:host .input:required{box-shadow:none}:host ::-webkit-input-placeholder{color:var(--s-400)}:host :-ms-input-placeholder{color:var(--s-400)}:host ::placeholder{color:var(--s-400)}:host input[type=date],:host input[type=time]{-webkit-appearance:none}:host input[type=date]::-webkit-calendar-picker-indicator{display:none}:host input[type=time]::-webkit-calendar-picker-indicator{display:none}:host .input-date-container{position:relative;flex-grow:1;display:flex}:host .input-date-cover{position:absolute;left:0;right:0;top:0;bottom:0;z-index:1}:host input[readonly]:not([readonly=false]){cursor:initial}:host .right-icon-container{display:flex;align-items:center}:host .clear-icon{--icon-color:white;--icon-background-color:var(--s-300);--icon-background-width:14px;--icon-background-height:14px;--icon-size:9px;box-shadow:none;margin-right:10px}:host .input-right-icon{--icon-color:var(--input-right-icon-color, var(--s-500));--icon-size:var(--input-right-icon-size, 14px);--icon-background-height:38px;margin-right:10px;padding:var(--input-right-icon-padding, 0)}:host .input-error{border:1px solid var(--li-2)}:host(:focus){outline:none}:host([type=textarea]) .input-container{height:var(--input-height, auto)}:host([type=textarea]) .right-icon-container{align-items:flex-start}:host([type=textarea]) .clear-icon{margin-top:10px;margin-right:10px}:host(:not([label=\"\"])) .input-container{margin-top:var(--input-margin-top, 5px)}:host([outside]:not([outside=false]):not([label=\"\"])) .input-container{margin-top:var(--input-margin-top, 30px)}:host([disabled]:not([disabled=false])) .input-container{cursor:not-allowed}:host([disabled]:not([disabled=false])) label{cursor:default}:host([disabled]:not([disabled=false])) .input-container:before{content:\"\";background-color:var(--s-200);left:0;right:0;top:0;bottom:0;position:absolute;border-radius:5px;opacity:0.3;z-index:10}:host-context([error]:not([error=false])) .input-container,:host([error]:not([error=false])) .input-container{border-color:var(--li-2)}";
+const sasInputCss = ":host{display:flex}:host .input-container{position:relative;height:var(--input-height, 40px);width:100%;max-width:100%;background-color:var(--input-background-color, white);border:var(--input-border, 1px solid var(--s-300));border-radius:5px;box-sizing:border-box;display:flex;gap:5px;padding:var(--input-padding, 0)}:host .input-container:focus-within{border:var(--input-border, 1px solid var(--s-400));outline:none;box-shadow:var(--input-focus-box-shadow, 0px 0px 5px #0000001A)}:host .input-container:after{content:attr(data-message);position:absolute;top:calc(100% + 5px);right:10px;color:var(--li-2);font-size:12px;text-align:right}:host .outside-label{color:var(--secondary);font-size:14px;position:absolute;left:0;bottom:100%;transform:translateY(-10px)}:host .inside-label{color:var(--s-400);left:10px;position:absolute;z-index:1;font-size:12px;transform:translateY(-65%);background-color:white;padding:0 2px}:host .required-symbol{margin-left:5px;color:var(--primary)}:host .input{border:none;color:var(--input-color, var(--s-500));background-color:var(--input-background-color, white);height:100%;min-width:0;font-family:roboto, \"Font Awesome 6 Pro\";font-size:14px;text-overflow:ellipsis;flex-grow:1;flex-shrink:1;margin:0 10px;box-sizing:border-box}:host .input:focus{outline:none}:host .input:required{box-shadow:none}:host ::-webkit-input-placeholder{color:var(--s-400)}:host :-ms-input-placeholder{color:var(--s-400)}:host ::placeholder{color:var(--s-400)}:host input[type=date],:host input[type=time]{-webkit-appearance:none}:host input[type=date]::-webkit-calendar-picker-indicator{display:none}:host input[type=time]::-webkit-calendar-picker-indicator{display:none}:host .input-date-container{position:relative;flex-grow:1;display:flex}:host .input-date-cover{position:absolute;left:0;right:0;top:0;bottom:0;z-index:1}:host input[readonly]:not([readonly=false]){cursor:initial}:host .iconLabel{padding-left:5px;cursor:pointer}:host .right-icon-container{display:flex;align-items:center}:host .clear-icon{--icon-color:white;--icon-background-color:var(--s-300);--icon-background-width:14px;--icon-background-height:14px;--icon-size:9px;box-shadow:none;margin-right:10px}:host .input-right-icon{--icon-color:var(--input-right-icon-color, var(--s-500));--icon-size:var(--input-right-icon-size, 14px);--icon-background-height:38px;margin-right:10px;padding:var(--input-right-icon-padding, 0)}:host .input-error{border:1px solid var(--li-2)}:host(:focus){outline:none}:host([type=textarea]) .input-container{height:var(--input-height, auto)}:host([type=textarea]) .right-icon-container{align-items:flex-start}:host([type=textarea]) .clear-icon{margin-top:10px;margin-right:10px}:host(:not([label=\"\"])) .input-container{margin-top:var(--input-margin-top, 5px)}:host([outside]:not([outside=false]):not([label=\"\"])) .input-container{margin-top:var(--input-margin-top, 30px)}:host([disabled]:not([disabled=false])) .input-container{cursor:not-allowed}:host([disabled]:not([disabled=false])) label{cursor:default}:host([disabled]:not([disabled=false])) .input-container:before{content:\"\";background-color:var(--s-200);left:0;right:0;top:0;bottom:0;position:absolute;border-radius:5px;opacity:0.3;z-index:10}:host-context([error]:not([error=false])) .input-container,:host([error]:not([error=false])) .input-container{border-color:var(--li-2)}";
 
 let SasInput$1 = class extends H {
   constructor() {
@@ -7913,7 +7965,7 @@ let SasInput$1 = class extends H {
     , null, h("div", { class: "input-container", "data-message": this.message }, Boolean(this.label)
       ? h("label", { class: this.outside ? 'outside-label' : 'inside-label' }, this.label, this.required
         ? h("span", { class: "required-symbol" }, "*")
-        : null, h("sas-icon", { icon: this.iconLabel, onClick: this.labelIconClickHandler }))
+        : null, h("sas-icon", { class: "iconLabel", icon: this.iconLabel, onClick: this.labelIconClickHandler }))
       : null, this.type === 'tel'
       ? h("sas-input-tel", { "data-country": this.country, "data-value": this.value, "data-placeholder": this.placeholder, "data-placeholderNumberType": this.placeholderNumberType })
       : null, this.type === 'textarea'

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

@@ -1175,7 +1175,7 @@ let SasDateField = class {
       formInputTemplate.error = !this.validity.valid;
     }
     if (!this.validity.valid) {
-      this.message = this.getErrorMessage();
+      this.message = this.message !== "" ? this.message : this.getErrorMessage();
     }
   }
   /**
@@ -1377,7 +1377,7 @@ let SasDateField = class {
 };
 SasDateField.style = sasDateFieldCss;
 
-const sasDateRangeCss = ":host{display:block}:host .container{position:relative;display:flex;justify-content:space-evenly;border:1px solid var(--s-300);border-radius:5px;box-sizing:border-box;--input-border:none;--input-focus-border:none;--input-focus-box-shadow:none}:host .container:after{content:attr(data-message);position:absolute;top:calc(100% + 5px);right:10px;color:var(--li-2);font-size:12px;text-align:right}:host .container:focus-within{border:1px solid var(--s-400);outline:none;box-shadow:0px 0px 5px #0000001A}:host .container:not([data-message=\"\"]){border-color:var(--li-2)}:host .outside-label{color:var(--secondary);font-size:14px;position:absolute;left:0;bottom:100%;transform:translateY(-10px)}:host .inside-label{color:var(--s-400);left:10px;position:absolute;z-index:1;font-size:12px;transform:translateY(-65%);background-color:white;padding:0 2px}:host .required-symbol{margin-left:5px;color:var(--primary)}:host .date-field{min-width:0}:host .icon{align-self:center}:host([outside]:not([outside=false]):not([label=\"\"])) .container{margin-top:30px}:host([disabled]:not([disabled=false])) .container{cursor:not-allowed}:host([disabled]:not([disabled=false])) label{cursor:default}:host([disabled]:not([disabled=false])) .container:before{content:\"\";background-color:var(--s-200);left:0;right:0;top:0;bottom:0;position:absolute;border-radius:5px;opacity:0.3;z-index:10}";
+const sasDateRangeCss = ":host{display:block}:host .container{position:relative;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--s-300);border-radius:5px;box-sizing:border-box;--input-border:none;--input-focus-border:none;--input-focus-box-shadow:none}:host .container:after{content:attr(data-message);position:absolute;top:calc(100% + 5px);right:10px;color:var(--li-2);font-size:12px;text-align:right}:host .container:focus-within{border:1px solid var(--s-400);outline:none;box-shadow:0px 0px 5px #0000001A}:host .container:not([data-message=\"\"]){border-color:var(--li-2)}:host .dateDiv{display:flex;justify-content:space-between}:host .outside-label{color:var(--secondary);font-size:14px;position:absolute;left:0;bottom:100%;transform:translateY(-10px)}:host .inside-label{color:var(--s-400);left:10px;position:absolute;z-index:1;font-size:12px;transform:translateY(-65%);background-color:white;padding:0 2px}:host .required-symbol{margin-left:5px;color:var(--primary)}:host .date-field{min-width:0;width:100%;width:-moz-available;width:-webkit-fill-available}:host .icon{align-self:center;padding-right:9px}:host([outside]:not([outside=false]):not([label=\"\"])) .container{margin-top:30px}:host([disabled]:not([disabled=false])) .container{cursor:not-allowed}:host([disabled]:not([disabled=false])) label{cursor:default}:host([disabled]:not([disabled=false])) .container:before{content:\"\";background-color:var(--s-200);left:0;right:0;top:0;bottom:0;position:absolute;border-radius:5px;opacity:0.3;z-index:10}";
 
 let SasDateRange = class {
   constructor(hostRef) {
@@ -1447,6 +1447,18 @@ let SasDateRange = class {
     this.labelIconClickHandler = () => {
       this.labeliconclicked.emit();
     };
+    this.getClearIcon = () => {
+      if (this.from !== "" || this.to !== "")
+        return 'fa-solid fa-circle-xmark';
+      else
+        return 'far fa-calendar-alt';
+    };
+    this.clearDates = () => {
+      if (this.from !== "" || this.to !== "") {
+        this.from = "";
+        this.to = "";
+      }
+    };
   }
   watchFromHandler() {
     this.resetErrorStatus();
@@ -1458,13 +1470,52 @@ let SasDateRange = class {
    * Validate
    */
   async validate() {
-    let valueMissing = true;
-    if (this.required && Boolean(this.from) && Boolean(this.to)) {
-      valueMissing = false;
+    let fromValueMissing = false;
+    let toValueMissing = false;
+    if (!Boolean(this.from)) {
+      fromValueMissing = true;
+    }
+    if (!Boolean(this.to)) {
+      toValueMissing = true;
+    }
+    let fromRangeUnderflow = false;
+    if (Boolean(this.min) && Boolean(this.from)) {
+      const inputDate = new Date(this.from);
+      const minDate = new Date(`${this.min}T00:00:00`);
+      if (inputDate < minDate) {
+        fromRangeUnderflow = true;
+      }
+    }
+    let fromRangeOverflow = false;
+    if (Boolean(this.max) && Boolean(this.from)) {
+      const inputDate = new Date(this.from);
+      const maxDate = new Date(`${this.max}T23:59:59`);
+      if (inputDate > maxDate) {
+        fromRangeOverflow = true;
+      }
     }
+    let toRangeUnderflow = false;
+    if (Boolean(this.min) && Boolean(this.to)) {
+      const inputDate = new Date(this.to);
+      const minDate = new Date(`${this.min}T00:00:00`);
+      if (inputDate < minDate) {
+        toRangeUnderflow = true;
+      }
+    }
+    let toRangeOverflow = false;
+    if (Boolean(this.max) && Boolean(this.to)) {
+      const inputDate = new Date(this.to);
+      const maxDate = new Date(`${this.max}T23:59:59`);
+      if (inputDate > maxDate) {
+        toRangeOverflow = true;
+      }
+    }
+    let valueMissing = false;
+    if (this.required && (toValueMissing || fromValueMissing))
+      valueMissing = true;
     this.validity = {
-      valid: !valueMissing,
-      valueMissing: valueMissing,
+      valid: !valueMissing && !fromRangeUnderflow && !fromRangeOverflow && !toRangeUnderflow && !toRangeOverflow,
+      valueMissing: toValueMissing || fromValueMissing,
     };
   }
   /**
@@ -1484,6 +1535,7 @@ let SasDateRange = class {
     };
   }
   emitEvent() {
+    this.validate();
     this.daterangeupdate.emit({
       from: this.from,
       to: this.to,
@@ -1504,7 +1556,7 @@ let SasDateRange = class {
       ? h("label", { class: this.outside ? 'outside-label' : 'inside-label' }, this.label, this.required
         ? h("span", { class: "required-symbol" }, "*")
         : null, h("sas-icon", { icon: this.iconLabel, onClick: this.labelIconClickHandler }))
-      : null, h("sas-date-field", { class: "date-field", icon: "", value: this.from, min: this.min, max: Boolean(this.to) ? this.to : this.max, position: this.position, onDatefieldupdate: this.fromDateUpdateHander }), h("sas-icon", { class: "icon", icon: "far fa-long-arrow-alt-right" }), h("sas-date-field", { class: "date-field", icon: "", value: this.to, min: Boolean(this.from) ? this.from : this.min, max: this.max, position: this.position, "position-h": "right", onDatefieldupdate: this.toDateUpdateHander }))));
+      : null, h("div", { class: "dateDiv" }, h("sas-date-field", { class: "date-field", icon: "", value: this.from, min: this.min, max: Boolean(this.to) ? this.to : this.max, position: this.position, onDatefieldupdate: this.fromDateUpdateHander }), h("sas-icon", { class: "icon", icon: "far fa-long-arrow-alt-right" })), h("div", { class: "dateDiv" }, h("sas-date-field", { class: "date-field", icon: "", value: this.to, min: Boolean(this.from) ? this.from : this.min, max: this.max, position: this.position, "position-h": "right", onDatefieldupdate: this.toDateUpdateHander }), h("sas-icon", { class: "icon", icon: this.getClearIcon(), onClick: this.clearDates })))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -2343,7 +2395,7 @@ let SasImage = class {
 };
 SasImage.style = sasImageCss;
 
-const sasInputCss = ":host{display:flex}:host .input-container{position:relative;height:var(--input-height, 40px);width:100%;max-width:100%;background-color:var(--input-background-color, white);border:var(--input-border, 1px solid var(--s-300));border-radius:5px;box-sizing:border-box;display:flex;gap:5px;padding:var(--input-padding, 0)}:host .input-container:focus-within{border:var(--input-border, 1px solid var(--s-400));outline:none;box-shadow:var(--input-focus-box-shadow, 0px 0px 5px #0000001A)}:host .input-container:after{content:attr(data-message);position:absolute;top:calc(100% + 5px);right:10px;color:var(--li-2);font-size:12px;text-align:right}:host .outside-label{color:var(--secondary);font-size:14px;position:absolute;left:0;bottom:100%;transform:translateY(-10px)}:host .inside-label{color:var(--s-400);left:10px;position:absolute;z-index:1;font-size:12px;transform:translateY(-65%);background-color:white;padding:0 2px}:host .required-symbol{margin-left:5px;color:var(--primary)}:host .input{border:none;color:var(--input-color, var(--s-500));background-color:var(--input-background-color, white);height:100%;min-width:0;font-family:roboto, \"Font Awesome 6 Pro\";font-size:14px;text-overflow:ellipsis;flex-grow:1;flex-shrink:1;margin:0 10px;box-sizing:border-box}:host .input:focus{outline:none}:host .input:required{box-shadow:none}:host ::-webkit-input-placeholder{color:var(--s-400)}:host :-ms-input-placeholder{color:var(--s-400)}:host ::placeholder{color:var(--s-400)}:host input[type=date],:host input[type=time]{-webkit-appearance:none}:host input[type=date]::-webkit-calendar-picker-indicator{display:none}:host input[type=time]::-webkit-calendar-picker-indicator{display:none}:host .input-date-container{position:relative;flex-grow:1;display:flex}:host .input-date-cover{position:absolute;left:0;right:0;top:0;bottom:0;z-index:1}:host input[readonly]:not([readonly=false]){cursor:initial}:host .right-icon-container{display:flex;align-items:center}:host .clear-icon{--icon-color:white;--icon-background-color:var(--s-300);--icon-background-width:14px;--icon-background-height:14px;--icon-size:9px;box-shadow:none;margin-right:10px}:host .input-right-icon{--icon-color:var(--input-right-icon-color, var(--s-500));--icon-size:var(--input-right-icon-size, 14px);--icon-background-height:38px;margin-right:10px;padding:var(--input-right-icon-padding, 0)}:host .input-error{border:1px solid var(--li-2)}:host(:focus){outline:none}:host([type=textarea]) .input-container{height:var(--input-height, auto)}:host([type=textarea]) .right-icon-container{align-items:flex-start}:host([type=textarea]) .clear-icon{margin-top:10px;margin-right:10px}:host(:not([label=\"\"])) .input-container{margin-top:var(--input-margin-top, 5px)}:host([outside]:not([outside=false]):not([label=\"\"])) .input-container{margin-top:var(--input-margin-top, 30px)}:host([disabled]:not([disabled=false])) .input-container{cursor:not-allowed}:host([disabled]:not([disabled=false])) label{cursor:default}:host([disabled]:not([disabled=false])) .input-container:before{content:\"\";background-color:var(--s-200);left:0;right:0;top:0;bottom:0;position:absolute;border-radius:5px;opacity:0.3;z-index:10}:host-context([error]:not([error=false])) .input-container,:host([error]:not([error=false])) .input-container{border-color:var(--li-2)}";
+const sasInputCss = ":host{display:flex}:host .input-container{position:relative;height:var(--input-height, 40px);width:100%;max-width:100%;background-color:var(--input-background-color, white);border:var(--input-border, 1px solid var(--s-300));border-radius:5px;box-sizing:border-box;display:flex;gap:5px;padding:var(--input-padding, 0)}:host .input-container:focus-within{border:var(--input-border, 1px solid var(--s-400));outline:none;box-shadow:var(--input-focus-box-shadow, 0px 0px 5px #0000001A)}:host .input-container:after{content:attr(data-message);position:absolute;top:calc(100% + 5px);right:10px;color:var(--li-2);font-size:12px;text-align:right}:host .outside-label{color:var(--secondary);font-size:14px;position:absolute;left:0;bottom:100%;transform:translateY(-10px)}:host .inside-label{color:var(--s-400);left:10px;position:absolute;z-index:1;font-size:12px;transform:translateY(-65%);background-color:white;padding:0 2px}:host .required-symbol{margin-left:5px;color:var(--primary)}:host .input{border:none;color:var(--input-color, var(--s-500));background-color:var(--input-background-color, white);height:100%;min-width:0;font-family:roboto, \"Font Awesome 6 Pro\";font-size:14px;text-overflow:ellipsis;flex-grow:1;flex-shrink:1;margin:0 10px;box-sizing:border-box}:host .input:focus{outline:none}:host .input:required{box-shadow:none}:host ::-webkit-input-placeholder{color:var(--s-400)}:host :-ms-input-placeholder{color:var(--s-400)}:host ::placeholder{color:var(--s-400)}:host input[type=date],:host input[type=time]{-webkit-appearance:none}:host input[type=date]::-webkit-calendar-picker-indicator{display:none}:host input[type=time]::-webkit-calendar-picker-indicator{display:none}:host .input-date-container{position:relative;flex-grow:1;display:flex}:host .input-date-cover{position:absolute;left:0;right:0;top:0;bottom:0;z-index:1}:host input[readonly]:not([readonly=false]){cursor:initial}:host .iconLabel{padding-left:5px;cursor:pointer}:host .right-icon-container{display:flex;align-items:center}:host .clear-icon{--icon-color:white;--icon-background-color:var(--s-300);--icon-background-width:14px;--icon-background-height:14px;--icon-size:9px;box-shadow:none;margin-right:10px}:host .input-right-icon{--icon-color:var(--input-right-icon-color, var(--s-500));--icon-size:var(--input-right-icon-size, 14px);--icon-background-height:38px;margin-right:10px;padding:var(--input-right-icon-padding, 0)}:host .input-error{border:1px solid var(--li-2)}:host(:focus){outline:none}:host([type=textarea]) .input-container{height:var(--input-height, auto)}:host([type=textarea]) .right-icon-container{align-items:flex-start}:host([type=textarea]) .clear-icon{margin-top:10px;margin-right:10px}:host(:not([label=\"\"])) .input-container{margin-top:var(--input-margin-top, 5px)}:host([outside]:not([outside=false]):not([label=\"\"])) .input-container{margin-top:var(--input-margin-top, 30px)}:host([disabled]:not([disabled=false])) .input-container{cursor:not-allowed}:host([disabled]:not([disabled=false])) label{cursor:default}:host([disabled]:not([disabled=false])) .input-container:before{content:\"\";background-color:var(--s-200);left:0;right:0;top:0;bottom:0;position:absolute;border-radius:5px;opacity:0.3;z-index:10}:host-context([error]:not([error=false])) .input-container,:host([error]:not([error=false])) .input-container{border-color:var(--li-2)}";
 
 let SasInput = class {
   constructor(hostRef) {
@@ -2682,7 +2734,7 @@ let SasInput = class {
     , null, h("div", { class: "input-container", "data-message": this.message }, Boolean(this.label)
       ? h("label", { class: this.outside ? 'outside-label' : 'inside-label' }, this.label, this.required
         ? h("span", { class: "required-symbol" }, "*")
-        : null, h("sas-icon", { icon: this.iconLabel, onClick: this.labelIconClickHandler }))
+        : null, h("sas-icon", { class: "iconLabel", icon: this.iconLabel, onClick: this.labelIconClickHandler }))
       : null, this.type === 'tel'
       ? h("sas-input-tel", { "data-country": this.country, "data-value": this.value, "data-placeholder": this.placeholder, "data-placeholderNumberType": this.placeholderNumberType })
       : null, this.type === 'textarea'