sas-ui 0.8.140 → 0.8.144

package/dist/cjs/{index-42a2fe48.js → index-cd75521b.js}

@@ -183,6 +183,7 @@ const isComplexType = (o) => {
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
 const h = (nodeName, vnodeData, ...children) => {
     let child = null;
+    let key = null;
     let simple = false;
     let lastSimple = false;
     let vNodeChildren = [];
@@ -210,6 +211,10 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
+        // normalize class / classname attributes
+        if (vnodeData.key) {
+            key = vnodeData.key;
+        }
         {
             const classData = vnodeData.className || vnodeData.class;
             if (classData) {
@@ -227,6 +232,9 @@ const h = (nodeName, vnodeData, ...children) => {
     if (vNodeChildren.length > 0) {
         vnode.$children$ = vNodeChildren;
     }
+    {
+        vnode.$key$ = key;
+    }
     return vnode;
 };
 const newVNode = (tag, text) => {
@@ -240,6 +248,9 @@ const newVNode = (tag, text) => {
     {
         vnode.$attrs$ = null;
     }
+    {
+        vnode.$key$ = null;
+    }
     return vnode;
 };
 const Host = {};
@@ -288,6 +299,8 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 }
             }
         }
+        else if (memberName === 'key')
+            ;
         else if ((!isProp ) &&
             memberName[0] === 'o' &&
             memberName[1] === 'n') {
@@ -452,6 +465,8 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
 const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let oldStartIdx = 0;
     let newStartIdx = 0;
+    let idxInOld = 0;
+    let i = 0;
     let oldEndIdx = oldCh.length - 1;
     let oldStartVnode = oldCh[0];
     let oldEndVnode = oldCh[oldEndIdx];
@@ -459,6 +474,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let newStartVnode = newCh[0];
     let newEndVnode = newCh[newEndIdx];
     let node;
+    let elmToMove;
     while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
         if (oldStartVnode == null) {
             // Vnode might have been moved left
@@ -496,7 +512,29 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             newStartVnode = newCh[++newStartIdx];
         }
         else {
+            // createKeyToOldIdx
+            idxInOld = -1;
             {
+                for (i = oldStartIdx; i <= oldEndIdx; ++i) {
+                    if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
+                        idxInOld = i;
+                        break;
+                    }
+                }
+            }
+            if (idxInOld >= 0) {
+                elmToMove = oldCh[idxInOld];
+                if (elmToMove.$tag$ !== newStartVnode.$tag$) {
+                    node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
+                }
+                else {
+                    patch(elmToMove, newStartVnode);
+                    oldCh[idxInOld] = undefined;
+                    node = elmToMove.$elm$;
+                }
+                newStartVnode = newCh[++newStartIdx];
+            }
+            else {
                 // new element
                 node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
                 newStartVnode = newCh[++newStartIdx];
@@ -519,7 +557,9 @@ const isSameVnode = (vnode1, vnode2) => {
     // compare if two vnode to see if they're "technically" the same
     // need to have the same element tag, and same key to be the same
     if (vnode1.$tag$ === vnode2.$tag$) {
-        return true;
+        {
+            return vnode1.$key$ === vnode2.$key$;
+        }
     }
     return false;
 };

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 require('./modules-ebff93e4.js');
 require('./_commonjsHelpers-537d719a.js');
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 const global = require('./global-73bf4da9.js');
 const _commonjsHelpers = require('./_commonjsHelpers-537d719a.js');
 
@@ -482,7 +482,7 @@ let SasButton = class {
 };
 SasButton.style = sasButtonCss;
 
-const sasCardCss = ":host{display:inline-block}:host .container{display:inline-block;width:340px;position:relative}:host .image-container{position:relative;background-color:var(--s-200);border-top-left-radius:5px;border-top-right-radius:5px;height:192px;display:flex;align-items:center;justify-content:center;overflow:hidden}:host .image{transition:transform 0.2s;border-radius:5px 5px 0 0;width:100%;cursor:pointer}:host .noimage{--icon-color:var(--s-400);--icon-size:60px}:host .icon-container{position:absolute;top:21px;right:21px;display:grid;row-gap:10px;justify-items:end}:host .icon-container sas-icon{--icon-color:#3A5766}:host .text-container{padding:16px 20px;position:relative;background-color:#FFF;border:1px solid #ECEFF1;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px}:host .ellipsis-icon{--icon-background-width:normal;--icon-background-height:normal;--icon-color:var(--s-400);--icon-size:30px}:host .title{font-size:16px;font-weight:500;margin-bottom:3px;color:#253F4D;display:flex;align-items:center;justify-content:space-between}:host .title-content{padding-right:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .content{font-size:12px;margin-top:7px;color:#4C6671;line-height:1.8}:host([block]:not([block=false])){display:block}:host([block]:not([block=false])) .container{width:100%}";
+const sasCardCss = ":host{display:inline-block}:host .container{display:inline-block;width:340px;position:relative}:host .image-container{position:relative;background-color:var(--s-200);border-top-left-radius:5px;border-top-right-radius:5px;height:192px;display:flex;align-items:center;justify-content:center;overflow:hidden}:host .image{transition:transform 0.2s;border-radius:5px 5px 0 0;width:100%;cursor:pointer}:host .noimage{--icon-color:var(--s-400);--icon-size:60px}:host .icon-container{position:absolute;top:21px;right:21px;display:grid;row-gap:10px;justify-items:end}:host .icon-container sas-icon{--icon-color:#3A5766}:host .text-container{padding:16px 20px;position:relative;background-color:#FFF;border:1px solid #ECEFF1;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px}:host .ellipsis-icon{--icon-background-width:normal;--icon-background-height:normal;--icon-color:var(--s-400);--icon-size:20px}:host .title{font-size:16px;font-weight:500;margin-bottom:3px;color:#253F4D;display:flex;align-items:center;justify-content:space-between}:host .title-content{padding-right:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .content{font-size:12px;margin-top:7px;color:#4C6671;line-height:1.8}:host([block]:not([block=false])){display:block}:host([block]:not([block=false])) .container{width:100%}";
 
 let SasCard = class {
   constructor(hostRef) {
@@ -550,7 +550,7 @@ let SasCard = class {
   render() {
     return (index.h(index.Host, null, index.h("div", { class: "container" }, index.h("div", { class: "image-container" }, Boolean(this.src)
       ? index.h("sas-image", { class: "image", src: this.src, onClick: this.clickHandler, onPointerOver: this.pointerOverHandler, onPointerOut: this.pointerOutHandler, lazy: this.lazyImage })
-      : index.h("sas-icon", { class: "noimage", icon: "fas fa-image" })), index.h("div", { class: "icon-container" }, this.getIcons(), index.h("slot", { name: "icon" })), index.h("div", { class: "text-container" }, index.h("div", { class: "title" }, index.h("span", { class: "title-content" }, index.h("slot", { name: "title" }, index.h("span", null, this.cardTitle))), index.h("sas-dropdown", { "position-h": "left" }, index.h("sas-icon", { tabindex: "0", class: "ellipsis-icon", slot: "control", icon: "fal fa-ellipsis-h" }), index.h("slot", { name: "list", slot: "menu" }))), index.h("div", { class: "content" }, index.h("slot", { name: "content" }))))));
+      : index.h("sas-icon", { class: "noimage", icon: "fas fa-image" })), index.h("div", { class: "icon-container" }, this.getIcons(), index.h("slot", { name: "icon" })), index.h("div", { class: "text-container" }, index.h("div", { class: "title" }, index.h("span", { class: "title-content" }, index.h("slot", { name: "title" }, index.h("span", null, this.cardTitle))), index.h("sas-dropdown", { "position-h": "left" }, index.h("sas-icon", { tabindex: "0", class: "ellipsis-icon", slot: "control", icon: "far fa-ellipsis-h" }), index.h("slot", { name: "list", slot: "menu" }))), index.h("div", { class: "content" }, index.h("slot", { name: "content" }))))));
   }
 };
 SasCard.style = sasCardCss;
@@ -4958,7 +4958,8 @@ let SasSelect = class {
   getErrorMessage() {
     const validity = this.validity;
     if (validity.valueMissing) {
-      return `${this.label} is required`;
+      const prefix = Boolean(this.label) ? this.label : 'Field';
+      return `${prefix} is required`;
     }
   }
   checkShadowDom() {

package/dist/cjs/sas-avatar-group.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 
 const sasAvatarGroupCss = ":host{display:flex}:host .container{display:flex;font-size:0;margin-left:7px;--avatar-margin-left:-7px;--avatar-transition:0.3s;--avatar-hover-transform:translate(0, -5px)}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 
 const sasAvatarCss = ":host{display:inline-flex}:host .container{display:inline-flex;justify-content:center;background-color:var(--s-400);border-radius:50%;cursor:pointer;margin-left:var(--avatar-margin-left, 0);transition:var(--avatar-transition, 0)}:host sas-icon{--icon-color:white}:host img{max-width:100%;max-height:100%;border-radius:inherit}:host .text-container{display:flex;align-items:center;font-weight:500;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}:host(:hover) .container{transform:var(--avatar-hover-transform, none)}:host([type=small]) .container{max-height:var(--avatar-max-height, initial);min-height:var(--avatar-min-height, initial);height:var(--avatar-height, 34px);max-width:var(--avatar-max-width, initial);min-width:var(--avatar-min-width, initial);width:var(--avatar-width, 34px);background-color:var(--avatar-small-background);color:var(--avatar-small-text);font-size:12px}:host([type=medium]) .container{max-height:var(--avatar-max-height, initial);min-height:var(--avatar-min-height, initial);height:var(--avatar-height, 70px);max-width:var(--avatar-max-width, initial);min-width:var(--avatar-min-width, initial);width:var(--avatar-width, 70px)}:host([type=medium]) .container sas-icon{--icon-size:45px}:host([type=large]) .container{max-height:var(--avatar-max-height, initial);min-height:var(--avatar-min-height, initial);height:var(--avatar-height, 136px);max-width:var(--avatar-max-width, initial);min-width:var(--avatar-min-width, initial);width:var(--avatar-width, 136px)}:host([type=large]) .container sas-icon{--icon-size:90px}:host([disabled]:not([disabled=false])) .container{opacity:0.6;pointer-events:none}";
 
@@ -46,12 +46,19 @@ let SasAvatar = class {
   getInitial() {
     if (Boolean(this.name)) {
       const nameArray = this.name.split(' ');
-      if (nameArray.length === 1) {
-        return nameArray[0].slice(0, 1).toUpperCase();
+      let initial = this.getFirstValidLetter(nameArray[0]);
+      if (nameArray.length > 1) {
+        initial += this.getFirstValidLetter(nameArray[1]);
+      }
+      return initial;
+    }
+    return '';
+  }
+  getFirstValidLetter(name) {
+    for (let i = 0; i < name.length; i++) {
+      if (/^[a-z]$/i.test(name[i])) {
+        return name[i].toUpperCase();
       }
-      const firstInitial = nameArray[0].slice(0, 1).toUpperCase();
-      const lastInitial = nameArray[nameArray.length - 1].slice(0, 1).toUpperCase();
-      return firstInitial + lastInitial;
     }
     return '';
   }

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 
 const sasBadgeCss = ":host{display:inline-flex;position:relative;align-items:center;justify-content:space-between}:host .container{display:inline-flex;position:absolute;top:-2px;left:calc(100% - 7px);background-color:var(--badge-background-color, var(--li-2));border:1px solid var(--badge-border);border-radius:50%;box-shadow:var(--badge-box-shadow);font-size:var(--badge-font-size, 8px);font-weight:bold;justify-content:center;align-items:center;color:var(--badge-color, var(--badge-text));padding:0 5px}:host([type=indicator]) .container{width:2px;height:12px}:host([type=indicator][status=online]) .container{background-color:var(--badge-online-background)}:host([type=notification]) .container{min-width:4px;height:14px;border-radius:10px;left:calc(100% - 9px)}:host([type=notification][number=\"0\"]) .container{opacity:0}:host([inline]:not([inline=false])){display:flex}:host([inline]:not([inline=false])) .container{position:initial}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 const global = require('./global-73bf4da9.js');
 
 const sasBreadcrumbCss = ":host{display:block;font-size:14px;font-weight:500}:host ul{list-style-type:none;display:inline-flex;margin:0;padding:0}:host a{color:var(--secondary);text-decoration:none}:host a:hover,:host a:focus{text-decoration:underline;cursor:pointer;outline:none}:host .disabled{color:var(--s-400);font-weight:normal;pointer-events:none}:host .divider{padding:0 15px}";

package/dist/cjs/sas-button-group.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 
 const sasButtonGroupCss = ":host{--button-background-color:var(--button-text-background);--button-border:1px solid var(--s-200);--button-border-radius:0;--button-color:var(--s-400);--button-margin:0 0 0 -1px}:host .container{display:inline-block;font-size:0;margin-left:1px}::slotted(sas-button:first-child){--button-border-radius:5px 0 0 5px}::slotted(sas-button:last-child){--button-border-radius:0 5px 5px 0}::slotted(sas-button.button-group-active){--button-background-color:var(--s-200);--button-color:#214F67}";
 

package/dist/cjs/sas-chat-bubble.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 
 const sasChatBubbleCss = ":host{border-radius:3px;padding:6px 9px;background-color:var(--secondary);font-size:12px;line-height:18px;color:#FFF;position:absolute;transition:opacity 0.5s;max-width:200px;width:max-content}:host:before{content:\"\";width:0;height:0;border:5px solid transparent;position:absolute;transform:rotate(45deg)}:host([position=top]){bottom:calc(100% + 12px);left:50%;transform:translateX(-50%)}:host([position=top]):before{bottom:-4px;border-bottom-color:var(--secondary);border-right-color:var(--secondary);left:calc(50% - 5px)}:host([position=bottom]){top:calc(100% + 12px);left:50%;transform:translateX(-50%)}:host([position=bottom]):before{top:-4px;border-top-color:var(--secondary);border-left-color:var(--secondary);transform:rotate(45deg);left:calc(50% - 5px)}:host([position=left]){right:calc(100% + 12px);top:50%;transform:translateY(-50%)}:host([position=left]):before{right:-4px;border-top-color:var(--secondary);border-right-color:var(--secondary);top:calc(50% - 5px)}:host([position=right]){left:calc(100% + 12px);top:50%;transform:translateY(-50%)}:host([position=right]):before{left:-4px;border-bottom-color:var(--secondary);border-left-color:var(--secondary);top:calc(50% - 5px)}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 const global = require('./global-73bf4da9.js');
 
 const sasDateFieldCss = ":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}";

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 
 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}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 const global = require('./global-73bf4da9.js');
 
 const sasDetailsCss = ":host{display:block}:host .container{overflow:hidden}:host .summary-container{display:flex;align-items:baseline;cursor:pointer}:host .title{flex-grow:1}:host sas-icon{transition:0.25s transform ease}:host .transform{transform:rotate(180deg)}:host .margin-bottom{margin-bottom:15px}:host([auto-gap=false]) .margin-bottom{margin-bottom:0}";
@@ -32,7 +32,7 @@ let SasDetails = class {
     let summaryElement = this.el.querySelector('[slot="summary"]');
     summaryElement.tabIndex = 0;
     let contentElement = this.el.querySelector('[slot="content"]');
-    this.height = contentElement.getBoundingClientRect().height;
+    this.height = this.getHeight();
     if (!this.open) {
       contentElement.style.height = '0';
     }
@@ -44,6 +44,10 @@ let SasDetails = class {
       }
     }
   }
+  getHeight() {
+    let contentElement = this.el.querySelector('[slot="content"]');
+    return contentElement.getBoundingClientRect().height;
+  }
   hasContent(contentElement) {
     if (contentElement && contentElement.innerHTML) {
       return true;
@@ -64,6 +68,7 @@ let SasDetails = class {
     if (this.hasContent(contentElement)) {
       const currentHeight = contentElement.getBoundingClientRect().height;
       const isOpen = currentHeight > 0 ? true : false;
+      this.height = this.height > 0 ? this.height : this.getHeight();
       const originalHeight = this.height;
       let drawFunction;
       if (isOpen) {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 
 const sasDialogCss = "";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 
 const sasDividerCss = ":host{display:block;padding:50px 0;border-color:var(--divider-color)}:host hr{border-style:solid;border-width:thin 0 0;border-color:inherit;margin:0}:host([type=dotted]){padding:30px 0}:host([type=dotted]) hr{border-style:dotted}";
 

package/dist/cjs/sas-file-upload.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 
 const sasFileUploadCss = ":host{display:flex;justify-content:space-between;border:1px solid #D8E2E8;border-radius:5px;color:#8E9EAA;font-size:14px}:host .file-container{display:flex;justify-content:space-between;padding:10px 15px;width:100%}:host .file-name{color:#4C6671;text-decoration:underline}:host .control{display:inline-block;position:relative;padding:10px 20px;border-left:1px solid #D8E2E8}:host input{position:absolute;width:100%;height:100%;opacity:0;left:0;top:0}:host(.drop-effect){background-color:#F5F6F7}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 
 const sasFormCss = ":host{display:block}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-42a2fe48.js');
+const index$1 = require('./index-cd75521b.js');
 
 /**
  * A collection of shims that provide minimal functionality of the ES6 collections.

package/dist/cjs/sas-navigation-top.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 
 const sasNavigationTopCss = ":host{display:flex}:host .container{flex-grow:1;display:flex;align-items:center;background-color:var(--secondary);padding:0 20px;height:70px}:host .dropdown{height:100%;display:flex;align-items:center;--list-item-text-font-weight:500}:host .icon-header{--icon-color:var(--navigation-header-background);--icon-background-color:white;--icon-background-width:15px;--icon-background-height:15px;--icon-background-border-radius:0}:host .title{display:inline;color:#FFF;font-size:24px;font-weight:bold;flex-grow:1;margin-left:15px}:host .icon-header-2{--icon-color:#FFF}:host .user{display:inline;color:#FFF;font-size:12px;font-weight:bold;margin-left:27px;margin-right:10px}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 
 const sasNavigationCss = ":host{display:inline-block}:host .container{display:inline-block}:host .header{background-color:var(--navigation-header-background);color:#FFF;font-size:24px;font-weight:bold;padding:21px 80px 21px 30px}:host .icon-header{--icon-color:var(--navigation-header-background);--icon-background-color:white;--icon-background-width:15px;--icon-background-height:15px;--icon-background-border-radius:0;margin-right:15px}:host .menu-container{padding:29px 0;background-color:#FFF;border-right:1px solid var(--s-200);--sublist-item-padding:12px 10px 12px 45px;--sublist-hover-background:var(--list-item-hover-background);--sublist-selected-background:var(--list-item-hover-background);--sublist-border-left:3px solid transparent;--sublist-selected-border-left:3px solid var(--primary);--sublist-item-border-left:none;--sublist-item-selected-border-left:none;--list-item-default-color:var(--s-400);--list-item-border-left:3px solid transparent;--list-item-selected-border-left:3px solid var(--primary);--list-item-text-font-weight:500}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 
 const sasPaginationCss = ":host{display:block}:host ul{display:inline-flex;gap:5px;padding:0}:host li{list-style:none}:host sas-button{--button-border-radius:50%;--button-border:1px solid var(--s-200);--button-color:var(--pagination-text);--button-width:29px;--button-height:29px;--button-padding:0;--button-font-size:12px}:host sas-button[disabled]:not([disabled=false]){--button-color:var(--button-disabled-text)}:host sas-button.pagination-active{--button-background-color:#ECEFF1}:host #prev-icon,:host #next-icon{--icon-size:10px}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 
 const sasProgressBarCss = ":host{height:8px;background-color:var(--progress-bar-background);border-radius:10px;display:block}:host #progressBar{height:8px;width:0px}";
 

package/dist/cjs/sas-radio-group.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 
 const sasRadioGroupCss = ":host .container{display:grid;row-gap:var(--radio-group-row-gap, 5px);position:relative}:host .label{color:var(--secondary);font-size:14px;position:absolute;left:0;bottom:100%;transform:translateY(-10px)}:host .required-symbol{margin-left:5px;color:var(--primary)}:host(:not([label=\"\"])) .container{margin-top:30px}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 const global = require('./global-73bf4da9.js');
 
 const sasRadioCss = ":host{display:flex}:host .container{display:flex;gap:10px;flex-grow:1;align-items:center;cursor:pointer;position:relative}:host .container:after{content:attr(data-message);position:absolute;top:calc(100% + 5px);color:var(--li-2);font-size:12px;white-space:nowrap}:host .radio{border:1px solid var(--s-300);border-radius:50%;width:19px;height:19px;flex-shrink:0;align-self:flex-start;display:flex;justify-content:center}:host .radio:hover,:host .radio:focus{border-color:var(--s-400);box-shadow:0px 0px 5px #0000001A;outline:none}:host img{width:21px;height:21px;border-radius:50%;margin-left:-1px;margin-top:-1px;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host sas-icon{--icon-background-width:100%;--icon-background-height:100%;--icon-color:white;--icon-size:90%}:host .text{font-size:14px;color:var(--secondary)}:host([checked]:not([checked=false])) .radio{background-color:var(--primary);border-color:var(--primary)}:host([disabled]:not([disabled=false])) .container{pointer-events:none}:host([disabled]:not([disabled=false])) .radio{background-color:var(--s-200);border:1px solid var(--s-200)}:host([error]:not([error=false])) .text{color:var(--li-2)}:host([text-position=left]) .text{margin-right:10px}:host([text-position=right]) .text{margin-left:10px}:host([align=left]) .container{justify-content:flex-start}:host([align=right]) .container{justify-content:flex-end}:host([align=space-between]) .container{justify-content:space-between}";

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 
 const sasStepperCss = ":host{display:flex}:host .container{flex-grow:1;margin:5px 10px 35px;display:flex;align-items:center}:host sas-button{--button-width:21px;--button-height:21px;--button-border-radius:50%;--button-font-size:10px;--button-padding:0;position:relative}:host sas-button:after{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:29px;height:29px;background-color:white;border:1px solid var(--primary);border-radius:50%;z-index:-1;opacity:0}:host sas-button>.step-name{position:absolute;font-size:14px;color:var(--s-400);top:calc(100% + 15px);left:50%;transform:translateX(-50%);white-space:nowrap}:host sas-button[data-status=active]:after{opacity:1}:host sas-divider{flex-grow:1;padding:0;z-index:-2}:host sas-button[data-status=complete]+sas-divider{--divider-color:var(--primary)}:host sas-button[data-status=complete]>.step-name{color:var(--secondary)}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 const global = require('./global-73bf4da9.js');
 
 const sasSwitchCss = ":host{display:inline-block}:host .container{position:relative;display:inline-block;width:30px;height:16px;border-radius:8px;background-color:var(--s-200);-webkit-transition:0.4s;transition:0.4s}:host .container:after{content:attr(data-message);position:absolute;top:calc(100% + 5px);color:var(--li-2);font-size:12px;white-space:nowrap}:host .switch{position:absolute;content:\"\";height:14px;width:14px;left:1px;bottom:1px;border-radius:50%;background-color:white;-webkit-transition:0.4s;transition:0.4s}:host .switch:focus,:host .switch:hover{box-shadow:0px 0px 3px 3px var(--switch-background);outline:none}:host([checked]:not([checked=false])) .container{background-color:var(--switch-background)}:host([checked]:not([checked=false])) .switch{-webkit-transform:translateX(14px);-ms-transform:translateX(14px);transform:translateX(14px)}:host([error]:not([error=false])) .container{background-color:var(--li-2)}";

package/dist/cjs/sas-tab-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 const global = require('./global-73bf4da9.js');
 
 const sasTabItemCss = ":host{display:inline-block}:host .container{display:inline-block;font-size:16px;font-weight:normal;border-bottom:var(--tab-item-border-bottom, 3px solid transparent);color:var(--tab-item-color, --s-500);padding:24px 0;margin-right:60px;cursor:pointer;position:relative}:host(:hover) .container{color:var(--s-600)}";

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 
 const sasTabCss = ":host{display:block}:host .container{display:block;border-bottom:1px solid var(--s-200)}::slotted(sas-tab-item.tab-active){--tab-item-border-bottom:3px solid var(--primary);--tab-item-color:var(--s-600)}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 
 const sasTableCss = ":host table{width:100%;text-align:center;border-collapse:collapse;line-height:3}:host th{font-size:12px;color:#253F4D;cursor:pointer;vertical-align:middle;font-weight:500}:host td{font-size:14px;font-weight:normal;color:#4C6671}:host span{display:table-cell}:host sas-button.date-button{--button-border:1px solid transparent;--button-border-radius:50%;--button-margin:5px 0;--button-padding:0;--button-width:33px;--button-height:33px;--button-color:#4C6671}:host sas-button.date-button-active{--button-background-color:var(--primary);--button-color:white;--button-border:1px solid var(--primary)}:host sas-button[disabled]:not([disabled=false]).date-button{--button-color:var(--s-300)}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 
 const sasTimeFieldCss = ":host{display:block;}:host sas-form-input-template{--form-input-template-container-min-width:none;--form-input-template-container-max-width:380px;--input-height:var(--time-field-height, 40px)}:host .time-field{padding:20px;display:grid;grid-template-columns:repeat(3, 1fr);column-gap:10px}:host .time-field:focus{outline:none}:host .part::-webkit-scrollbar{display:none}:host .part{-ms-overflow-style:none;scrollbar-width:none;}:host sas-list{max-height:200px;overflow-y:auto;position:relative}:host sas-list-item{margin-bottom:6px;--list-item-border-radius:5px;--list-item-padding:12px 40px;--list-item-text-align:center}:host sas-list-item[selected]:not([selected=false]){--list-item-selected-background-color:white;--list-item-selected-border:1px solid var(--s-300);--list-item-selected-border-left:1px solid var(--s-300)}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 
 const sasTooltipCss = ":host{display:inline-block}:host .container{display:inline-block;position:relative;cursor:pointer}:host .chatBubble{z-index:10}:host .hide{opacity:0;z-index:-1;pointer-events:none}:host .trigger-container{color:var(--s-400);font-weight:bold}:host .text{margin:0}";
 

package/dist/cjs/sas-ui.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 require('./modules-ebff93e4.js');
 require('./_commonjsHelpers-537d719a.js');
 

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 const global = require('./global-73bf4da9.js');
 
-const sasUploadCss = ":host{display:block}:host .container{display:flex;align-items:center;border:1px solid var(--upload-border);border-radius:5px;background-color:var(--s-100);color:var(--s-400);font-size:14px;padding:25px;position:relative}:host .container:before{content:attr(data-filter-message);position:absolute;bottom:5px;right:10px;color:var(--li-2);font-size:12px}:host .container:after{content:attr(data-error-message);position:absolute;top:calc(100% + 5px);right:10px;color:var(--li-2);font-size:12px}:host .drop-effect{background-color:var(--upload-drop-effect-background)}:host .label{color:var(--secondary);font-size:14px;position:absolute;left:0;bottom:100%;transform:translateY(-10px)}:host .required-symbol{margin-left:5px;color:var(--primary)}:host .info-container{flex-grow:1;text-align:center;padding:10px}:host .upload-icon{--icon-size:48px;--icon-background-height:48px;--icon-background-width:48px;margin-bottom:22px}:host .drop-zone-text{font-weight:500;line-height:2}:host .input-label{color:var(--upload-label-text);font-weight:normal;position:relative;cursor:pointer}:host .input-label:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:5px;background-color:currentColor;opacity:0}:host .input-label:focus{outline:none}:host .input-label:focus:before{opacity:0.24}:host input{position:absolute;width:0;opacity:0;left:0;top:0}:host .tip{color:var(--upload-tip-text);font-size:12px}:host .file-container{flex-grow:1;padding:0 10px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0, 1fr);row-gap:10px;max-height:200px;overflow-y:auto;border-top:none;border-left:1px dashed var(--s-400)}:host .file{display:flex;gap:10px;align-items:center;border:1px solid var(--upload-border);border-radius:5px;box-sizing:border-box;padding:15px}:host .file-type-icon{--icon-color:var(--s-400)}:host .thumbnail{--image-max-width:24px;--image-max-height:24px;height:24px;width:24px}:host .file-name-container{flex-grow:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align:left}:host .hide{display:none}:host .file-upload-delete-icon{box-shadow:none;--icon-color:white;--icon-background-color:var(--primary);--icon-background-width:18px;--icon-background-height:18px;--icon-size:10px;flex-shrink:0}:host([compact]:not([compact=false])) .container{display:grid}:host([compact]:not([compact=false])) .file-container{border-top:1px dashed var(--s-400);border-left:none;padding:10px 0}:host([input-outside]:not([input-outside=false])) .container{display:grid}:host([input-outside]:not([input-outside=false])) .container-hide{display:none}:host([input-outside]:not([input-outside=false])) .info-container{padding:0}:host([input-outside]:not([input-outside=false])) .file-container{border:none;padding:0}:host(:not([label=\"\"])) .container{margin-top:var(--upload-margin-top, 30px)}:host([disabled]:not([disabled=false])) .file-container{border:none}:host([error]:not([error=false])) .container{border-color:var(--li-2);background-color:#D039150D}";
+const sasUploadCss = ":host{display:block}:host .container{display:flex;align-items:center;border:1px solid var(--upload-border);border-radius:5px;background-color:var(--s-100);color:var(--s-400);font-size:14px;padding:20px;position:relative}:host .container:before{content:attr(data-filter-message);position:absolute;bottom:5px;right:10px;color:var(--li-2);font-size:12px}:host .container:after{content:attr(data-error-message);position:absolute;top:calc(100% + 5px);right:10px;color:var(--li-2);font-size:12px}:host .drop-effect{background-color:var(--upload-drop-effect-background)}:host .label{color:var(--secondary);font-size:14px;position:absolute;left:0;bottom:100%;transform:translateY(-10px)}:host .required-symbol{margin-left:5px;color:var(--primary)}:host .info-container{flex-grow:1;text-align:center}:host .upload-icon{--icon-size:48px;--icon-background-height:48px;--icon-background-width:48px;margin-bottom:22px}:host .drop-zone-text{font-weight:500;line-height:2}:host .input-label{color:var(--upload-label-text);font-weight:normal;position:relative;cursor:pointer}:host .input-label:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:5px;background-color:currentColor;opacity:0}:host .input-label:focus{outline:none}:host .input-label:focus:before{opacity:0.24}:host input{position:absolute;width:0;opacity:0;left:0;top:0}:host .tip{color:var(--upload-tip-text);font-size:12px}:host .file-container{flex-grow:1;padding:0 10px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0, 1fr);row-gap:10px;max-height:200px;overflow-y:auto;border-top:none;border-left:1px dashed var(--s-400)}:host .file{display:flex;gap:10px;align-items:center;border:1px solid var(--upload-border);border-radius:5px;box-sizing:border-box;padding:15px}:host .file-type-icon{--icon-color:var(--s-400)}:host .thumbnail{--image-max-width:24px;--image-max-height:24px;height:24px;width:24px}:host .file-name-container{flex-grow:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align:left}:host .hide{display:none}:host .file-upload-delete-icon{box-shadow:none;--icon-color:white;--icon-background-color:var(--primary);--icon-background-width:18px;--icon-background-height:18px;--icon-size:10px;flex-shrink:0}:host([compact]:not([compact=false])) .container{display:grid}:host([compact]:not([compact=false])) .file-container{border-top:1px dashed var(--s-400);border-left:none;padding:10px 0;margin-top:10px}:host([input-outside]:not([input-outside=false])) .container{display:grid}:host([input-outside]:not([input-outside=false])) .container-hide{display:none}:host([input-outside]:not([input-outside=false])) .info-container{padding:0}:host([input-outside]:not([input-outside=false])) .file-container{border:none;padding:0}:host(:not([label=\"\"])) .container{margin-top:var(--upload-margin-top, 30px)}:host([disabled]:not([disabled=false])) .file-container{border:none}:host([error]:not([error=false])) .container{border-color:var(--li-2);background-color:#D039150D}";
 
 let SasUpload = class {
   constructor(hostRef) {
@@ -424,17 +424,14 @@ let SasUpload = class {
       }
       return fileClone;
     });
-    const fileList = [];
-    let fileListItem;
-    decodeFiles.forEach((file, index$1) => {
-      fileListItem = index.h("div", { class: "file" }, this.getFileType(file.name) === 'jpg' || this.getFileType(file.name) === 'jpeg' || this.getFileType(file.name) === 'png'
+    const fileList = decodeFiles.map((file, index$1) => {
+      return (index.h("div", { class: "file", key: 'url' in file ? file.url : file.name }, this.getFileType(file.name) === 'jpg' || this.getFileType(file.name) === 'jpeg' || this.getFileType(file.name) === 'png'
         ? index.h("sas-image", { class: "thumbnail", imageObject: file })
         : index.h("sas-icon", { class: "file-type-icon", icon: this.getFileIcon(file.name) }), index.h("div", { class: "file-name-container" }, index.h("a", { class: "file-name", href: 'url' in file ? file.url : null, download: 'url' in file ? file.name : false }, file.name)), 'size' in file
         ? index.h("span", null, this.getFileSize(file.size))
         : null, ('preventDelete' in file && file.preventDelete) || this.disabled
         ? null
-        : index.h("sas-icon", { class: "file-upload-delete-icon", type: "round", icon: "fas fa-times", index: index$1, onClick: this.handleDeleteIconClick }));
-      fileList.push(fileListItem);
+        : index.h("sas-icon", { class: "file-upload-delete-icon", type: "round", icon: "fas fa-times", index: index$1, onClick: this.handleDeleteIconClick })));
     });
     return fileList;
   }
@@ -474,7 +471,7 @@ let SasUpload = class {
         : null, !this.disabled && !this.inputOutside
         ? index.h("div", { class: "info-container" }, index.h("sas-icon", { class: "upload-icon", icon: this.type === 'image'
             ? "fal fa-camera-alt"
-            : "fal fa-cloud-upload" }), index.h("div", { class: "drop-zone-text" }, "Drag and drop your files here, or", index.h("label", { class: "input-label", tabindex: 0, htmlFor: "input", onKeyDown: global.keydownEvent }, " browse")), index.h("input", { id: "input", type: "file", accept: this.getAcceptAttributeValue(), multiple: this.max !== 1, onChange: this.handleInputChange }), index.h("div", { class: "tip" }, "(Accepted files ", `.${this.acceptTypes.join(', .')}`, " Max size ", this.size, "mb each)"))
+            : "fal fa-cloud-upload" }), index.h("div", { class: "drop-zone-text" }, "Drag and drop your ", this.type === 'image' ? 'photo' : 'files', " here, or", index.h("label", { class: "input-label", tabindex: 0, htmlFor: "input", onKeyDown: global.keydownEvent }, " browse")), index.h("input", { id: "input", type: "file", accept: this.getAcceptAttributeValue(), multiple: this.max !== 1, onChange: this.handleInputChange }), index.h("div", { class: "tip" }, "(Accepted files ", `.${this.acceptTypes.join(', .')}`, " Max size ", this.size, "mb each)"))
         : null, this.files.length > 0
         ? index.h("div", { class: "file-container" }, this.getFiles())
         : null)));

package/dist/cjs/sas-user-card.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-42a2fe48.js');
+const index = require('./index-cd75521b.js');
 
 const sasUserCardCss = ":host .container{display:inline-block;background-color:#FFF;border:1px solid var(--s-200);border-radius:5px;box-sizing:border-box;padding:0 20px;margin-top:35px;width:215px;height:155px;text-align:left;position:relative}:host sas-avatar{margin-top:-35px}:host .option{position:absolute;top:8px;right:16px;z-index:2}:host .ellipsis-icon{--icon-background-width:normal;--icon-background-height:normal;--icon-color:var(--s-400);--icon-size:30px}:host .title{font-size:14px;font-weight:500;margin-top:15px;color:var(--secondary)}:host .subtitle{font-size:12px;margin-top:10px;margin-bottom:16px;color:var(--s-500)}:host .hide{display:none;margin-right:0}:host .control{display:flex;align-items:center;height:26px}:host sas-switch{margin-right:6px}:host .status{font-size:10px;color:var(--s-400);flex-grow:1}:host ul{margin:0;list-style-type:none}:host li{display:inline}:host sas-icon{font-size:16px;--icon-color:var(--primary);--icon-background-width:normal;--icon-background-height:normal;margin-left:10px}:host([block]:not([block=false])){display:block}:host([block]:not([block=false])) .container{width:100%}";
 

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

@@ -37,12 +37,19 @@ export class SasAvatar {
   getInitial() {
     if (Boolean(this.name)) {
       const nameArray = this.name.split(' ');
-      if (nameArray.length === 1) {
-        return nameArray[0].slice(0, 1).toUpperCase();
+      let initial = this.getFirstValidLetter(nameArray[0]);
+      if (nameArray.length > 1) {
+        initial += this.getFirstValidLetter(nameArray[1]);
+      }
+      return initial;
+    }
+    return '';
+  }
+  getFirstValidLetter(name) {
+    for (let i = 0; i < name.length; i++) {
+      if (/^[a-z]$/i.test(name[i])) {
+        return name[i].toUpperCase();
       }
-      const firstInitial = nameArray[0].slice(0, 1).toUpperCase();
-      const lastInitial = nameArray[nameArray.length - 1].slice(0, 1).toUpperCase();
-      return firstInitial + lastInitial;
     }
     return '';
   }

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

@@ -51,7 +51,7 @@
   --icon-background-width: normal;
   --icon-background-height: normal;
   --icon-color: var(--s-400);
-  --icon-size: 30px;
+  --icon-size: 20px;
 }
 :host .title {
   font-size: 16px;