@uxuissk/design-system-core 3.4.5 → 3.4.7

package/dist/sellsuki-components.js

@@ -23412,14 +23412,14 @@ u1([
   l({ type: String })
 ], Li.prototype, "widgetHeight");
 customElements.get("ssk-widget-example") || customElements.define("ssk-widget-example", Li);
-var w6 = Object.defineProperty, Ve = (o, e, t, i) => {
+var w6 = Object.defineProperty, He = (o, e, t, i) => {
   for (var r = void 0, s = o.length - 1, n; s >= 0; s--)
     (n = o[s]) && (r = n(e, t, r) || r);
   return r && w6(e, t, r), r;
 };
 const Os = class Os extends B {
   constructor() {
-    super(...arguments), this.size = "md", this.gap = "md", this.fontFamilyGroup = "sans", this.fontWeight = "normal", this.widgetWidth = "4", this.widgetHeight = "2", this._defaultWidth = "3", this._defaultHeight = "2", this.label = "Label", this.subText = "subText", this.badgeText = "3.25%", this.badgeColor = "success", this.badgeIcon = "solid-arrow-up-right", this.iconLeftColor = "gray", this.iconLeft = "outline-ellipsis-horizontal-circle", this.imgUrl = "https://fastly.picsum.photos/id/216/200/300.jpg?hmac=c3OXbiUxWPMgwnaFpX8ZAfBL5TZzWjnof6mb4OwuSPs", this.buttonColor = "primary", this.buttonVariant = "outline", this.buttonIcon = "solid-arrow-right-circle", this.iconRightColor = "gray", this.iconRight = "outline-ellipsis-horizontal-circle", this.showSubtext = !0, this.showImage = !1, this.showIconLeft = !1, this.showButtonIcon = !1, this.showBadge = !1, this.showIconRight = !1, this.isLabelClamped = !1, this.isSubtextClamped = !1, this.boundCheckLabelEllipsis = this.checkLabelEllipsis.bind(this);
+    super(...arguments), this.size = "md", this.gap = "md", this.fontFamilyGroup = "sans", this.fontWeight = "normal", this.widgetWidth = "4", this.widgetHeight = "2", this._defaultWidth = "3", this._defaultHeight = "2", this.label = "", this.subText = "", this.badgeText = "", this.badgeColor = "success", this.badgeIcon = "", this.iconLeftColor = "gray", this.iconLeft = "", this.imgUrl = "", this.imgAlt = "", this.buttonColor = "primary", this.buttonVariant = "outline", this.buttonIcon = "", this.iconRightColor = "gray", this.iconRight = "", this.showSubtext = !0, this.showImage = !1, this.showIconLeft = !1, this.showButtonIcon = !1, this.showBadge = !1, this.showIconRight = !1, this.isLabelClamped = !1, this.isSubtextClamped = !1, this.boundCheckLabelEllipsis = this.checkLabelEllipsis.bind(this);
   }
   connectedCallback() {
     super.connectedCallback(), window.addEventListener("resize", this.boundCheckLabelEllipsis);
@@ -23558,21 +23558,23 @@ const Os = class Os extends B {
         >
         <div class="matric-style">
             <div class="matric-left">
-                ${this.showImage ? m`
-                    <div>
-                        <ssk-image src="${this.imgUrl}" alt="demo image" width="56px" height="56px"></ssk-image>
-                    </div>
-                    ` : this.showIconLeft ? m`
+                <slot name="left">
+                    ${this.showImage && this.imgUrl ? m`
                         <div>
-                            <ssk-misc-icon
-                            iconname="${this.iconLeft}"
-                            size="sm"
-                            themecolor="${this.iconLeftColor}"
-                            variant="light"
-                            ></ssk-misc-icon>
+                            <ssk-image src="${this.imgUrl}" alt="${this.imgAlt}" width="56px" height="56px"></ssk-image>
                         </div>
-                        ` : C}
-                
+                        ` : this.showIconLeft && this.iconLeft ? m`
+                            <div>
+                                <ssk-misc-icon
+                                iconname="${this.iconLeft}"
+                                size="sm"
+                                themecolor="${this.iconLeftColor}"
+                                variant="light"
+                                ></ssk-misc-icon>
+                            </div>
+                            ` : C}
+                </slot>
+
                 <div class="text-content">
                     <div>
                         ${this.renderLabel()}
@@ -23585,43 +23587,45 @@ const Os = class Os extends B {
                 </div>
             </div>
             <div class="matric-right">
-                ${this.showBadge ? m`
-                        <div>
-                            <ssk-badge
-                            variant="subtle"
-                            size="sm"
-                            themecolor="${this.badgeColor}">
-                                <ssk-icon
-                                    name="${this.badgeIcon}"
-                                    themeColor="${this.badgeColor}"
-                                    size="sm"
-                                ></ssk-icon>
-                                <label>${this.renderBadgeText()}</label>
-                            </ssk-badge>
-                        </div>
-                        ` : this.showButtonIcon ? m`
-                        <div>
-                            <ssk-button 
-                            variant="${this.buttonVariant}"
-                            themecolor="${this.buttonColor}"
-                            size="sm"
-                            @click=${this.handleButtonClick}>
-                            <ssk-icon slot="prefix"
-                            name="${this.buttonIcon}"
-                            size="sm">
-                            </ssk-icon>
-                            </ssk-button>
-                        </div>
-                        ` : this.showIconRight ? m`
-                        <div>
-                            <ssk-misc-icon
-                            iconname="${this.iconRight}"
-                            size="sm"
-                            themecolor="${this.iconRightColor}"
-                            variant="light"
-                            ></ssk-misc-icon>
-                        </div>
-                        ` : C}
+                <slot name="right">
+                    ${this.showBadge && this.badgeText ? m`
+                            <div>
+                                <ssk-badge
+                                variant="subtle"
+                                size="sm"
+                                themecolor="${this.badgeColor}">
+                                    ${this.badgeIcon ? m`<ssk-icon
+                                            name="${this.badgeIcon}"
+                                            themeColor="${this.badgeColor}"
+                                            size="sm"
+                                        ></ssk-icon>` : C}
+                                    <label>${this.renderBadgeText()}</label>
+                                </ssk-badge>
+                            </div>
+                            ` : this.showButtonIcon && this.buttonIcon ? m`
+                            <div>
+                                <ssk-button
+                                variant="${this.buttonVariant}"
+                                themecolor="${this.buttonColor}"
+                                size="sm"
+                                @click=${this.handleButtonClick}>
+                                <ssk-icon slot="prefix"
+                                name="${this.buttonIcon}"
+                                size="sm">
+                                </ssk-icon>
+                                </ssk-button>
+                            </div>
+                            ` : this.showIconRight && this.iconRight ? m`
+                            <div>
+                                <ssk-misc-icon
+                                iconname="${this.iconRight}"
+                                size="sm"
+                                themecolor="${this.iconRightColor}"
+                                variant="light"
+                                ></ssk-misc-icon>
+                            </div>
+                            ` : C}
+                </slot>
             </div>
         </div>
       </div>
@@ -23682,114 +23686,117 @@ Os.registeredName = "ssk-widget-matric", Os.styles = F`
         min-width: 0;
     }
   `;
-let Ce = Os;
-Ve([
+let xe = Os;
+He([
   R({ context: U, subscribe: !0 }),
   l({ attribute: !1 })
-], Ce.prototype, "theme");
-Ve([
+], xe.prototype, "theme");
+He([
+  l({ type: String })
+], xe.prototype, "size");
+He([
   l({ type: String })
-], Ce.prototype, "size");
-Ve([
+], xe.prototype, "color");
+He([
   l({ type: String })
-], Ce.prototype, "color");
-Ve([
+], xe.prototype, "margin");
+He([
   l({ type: String })
-], Ce.prototype, "margin");
-Ve([
+], xe.prototype, "padding");
+He([
   l({ type: String })
-], Ce.prototype, "padding");
-Ve([
+], xe.prototype, "gap");
+He([
   l({ type: String })
-], Ce.prototype, "gap");
-Ve([
+], xe.prototype, "testId");
+He([
   l({ type: String })
-], Ce.prototype, "testId");
-Ve([
+], xe.prototype, "fontFamilyGroup");
+He([
   l({ type: String })
-], Ce.prototype, "fontFamilyGroup");
-Ve([
+], xe.prototype, "fontWeight");
+He([
   l({ type: String })
-], Ce.prototype, "fontWeight");
-Ve([
+], xe.prototype, "fontSize");
+He([
   l({ type: String })
-], Ce.prototype, "fontSize");
-Ve([
+], xe.prototype, "widgetWidth");
+He([
   l({ type: String })
-], Ce.prototype, "widgetWidth");
-Ve([
+], xe.prototype, "widgetHeight");
+He([
   l({ type: String })
-], Ce.prototype, "widgetHeight");
-Ve([
+], xe.prototype, "label");
+He([
   l({ type: String })
-], Ce.prototype, "label");
-Ve([
+], xe.prototype, "subText");
+He([
   l({ type: String })
-], Ce.prototype, "subText");
-Ve([
+], xe.prototype, "badgeText");
+He([
   l({ type: String })
-], Ce.prototype, "badgeText");
-Ve([
+], xe.prototype, "badgeColor");
+He([
   l({ type: String })
-], Ce.prototype, "badgeColor");
-Ve([
+], xe.prototype, "badgeIcon");
+He([
   l({ type: String })
-], Ce.prototype, "badgeIcon");
-Ve([
+], xe.prototype, "iconLeftColor");
+He([
   l({ type: String })
-], Ce.prototype, "iconLeftColor");
-Ve([
+], xe.prototype, "iconLeft");
+He([
   l({ type: String })
-], Ce.prototype, "iconLeft");
-Ve([
+], xe.prototype, "imgUrl");
+He([
   l({ type: String })
-], Ce.prototype, "imgUrl");
-Ve([
+], xe.prototype, "imgAlt");
+He([
   l({ type: String })
-], Ce.prototype, "buttonColor");
-Ve([
+], xe.prototype, "buttonColor");
+He([
   l({ type: String })
-], Ce.prototype, "buttonVariant");
-Ve([
+], xe.prototype, "buttonVariant");
+He([
   l({ type: String })
-], Ce.prototype, "buttonIcon");
-Ve([
+], xe.prototype, "buttonIcon");
+He([
   l({ type: String })
-], Ce.prototype, "iconRightColor");
-Ve([
+], xe.prototype, "iconRightColor");
+He([
   l({ type: String })
-], Ce.prototype, "iconRight");
-Ve([
+], xe.prototype, "iconRight");
+He([
   l({ type: Boolean })
-], Ce.prototype, "showSubtext");
-Ve([
+], xe.prototype, "showSubtext");
+He([
   l({ type: Boolean })
-], Ce.prototype, "showImage");
-Ve([
+], xe.prototype, "showImage");
+He([
   l({ type: Boolean })
-], Ce.prototype, "showIconLeft");
-Ve([
+], xe.prototype, "showIconLeft");
+He([
   l({ type: Boolean })
-], Ce.prototype, "showButtonIcon");
-Ve([
+], xe.prototype, "showButtonIcon");
+He([
   l({ type: Boolean })
-], Ce.prototype, "showBadge");
-Ve([
+], xe.prototype, "showBadge");
+He([
   l({ type: Boolean })
-], Ce.prototype, "showIconRight");
-Ve([
+], xe.prototype, "showIconRight");
+He([
   Y()
-], Ce.prototype, "isLabelClamped");
-Ve([
+], xe.prototype, "isLabelClamped");
+He([
   Ar(".label-wrapper")
-], Ce.prototype, "labelWrapperEl");
-Ve([
+], xe.prototype, "labelWrapperEl");
+He([
   Y()
-], Ce.prototype, "isSubtextClamped");
-Ve([
+], xe.prototype, "isSubtextClamped");
+He([
   Ar(".subtext-wrapper")
-], Ce.prototype, "subtextWrapperEl");
-customElements.get("ssk-widget-matric") || customElements.define("ssk-widget-matric", Ce);
+], xe.prototype, "subtextWrapperEl");
+customElements.get("ssk-widget-matric") || customElements.define("ssk-widget-matric", xe);
 var y6 = Object.defineProperty, Be = (o, e, t, i) => {
   for (var r = void 0, s = o.length - 1, n; s >= 0; s--)
     (n = o[s]) && (r = n(e, t, r) || r);
@@ -24006,105 +24013,105 @@ js.registeredName = "ssk-widget-user-detail", js.styles = F`
     .bottom-left { min-width: 0; flex: 1;}
     .bottom-right { flex-shrink: 0; }
   `;
-let He = js;
+let Ve = js;
 Be([
   R({ context: U, subscribe: !0 }),
   l({ attribute: !1 })
-], He.prototype, "theme");
+], Ve.prototype, "theme");
 Be([
   l({ type: String })
-], He.prototype, "size");
+], Ve.prototype, "size");
 Be([
   l({ type: String })
-], He.prototype, "color");
+], Ve.prototype, "color");
 Be([
   l({ type: String })
-], He.prototype, "margin");
+], Ve.prototype, "margin");
 Be([
   l({ type: String })
-], He.prototype, "padding");
+], Ve.prototype, "padding");
 Be([
   l({ type: String })
-], He.prototype, "gap");
+], Ve.prototype, "gap");
 Be([
   l({ type: String })
-], He.prototype, "testId");
+], Ve.prototype, "testId");
 Be([
   l({ type: String })
-], He.prototype, "fontFamilyGroup");
+], Ve.prototype, "fontFamilyGroup");
 Be([
   l({ type: String })
-], He.prototype, "fontWeight");
+], Ve.prototype, "fontWeight");
 Be([
   l({ type: String })
-], He.prototype, "fontSize");
+], Ve.prototype, "fontSize");
 Be([
   l({ type: String })
-], He.prototype, "widgetWidth");
+], Ve.prototype, "widgetWidth");
 Be([
   l({ type: String })
-], He.prototype, "widgetHeight");
+], Ve.prototype, "widgetHeight");
 Be([
   l({ type: String })
-], He.prototype, "label");
+], Ve.prototype, "label");
 Be([
   l({ type: String })
-], He.prototype, "subText");
+], Ve.prototype, "subText");
 Be([
   l({ type: String })
-], He.prototype, "buttonColor");
+], Ve.prototype, "buttonColor");
 Be([
   l({ type: String })
-], He.prototype, "buttonVariant");
+], Ve.prototype, "buttonVariant");
 Be([
   l({ type: String })
-], He.prototype, "buttonIcon");
+], Ve.prototype, "buttonIcon");
 Be([
   l({ type: String })
-], He.prototype, "buttonText");
+], Ve.prototype, "buttonText");
 Be([
   l({ type: String })
-], He.prototype, "imgUrl");
+], Ve.prototype, "imgUrl");
 Be([
   l({ type: String })
-], He.prototype, "imageShape");
+], Ve.prototype, "imageShape");
 Be([
   l({ type: Boolean })
-], He.prototype, "showSubtext");
+], Ve.prototype, "showSubtext");
 Be([
   l({ type: Boolean })
-], He.prototype, "showImage");
+], Ve.prototype, "showImage");
 Be([
   l({ type: Boolean })
-], He.prototype, "showButtonIcon");
+], Ve.prototype, "showButtonIcon");
 Be([
   l({ type: Boolean })
-], He.prototype, "showButtonTooltip");
+], Ve.prototype, "showButtonTooltip");
 Be([
   l({ type: String })
-], He.prototype, "buttonTooltipText");
+], Ve.prototype, "buttonTooltipText");
 Be([
   l({ type: Boolean })
-], He.prototype, "disabledButton");
+], Ve.prototype, "disabledButton");
 Be([
   l({ type: Array })
-], He.prototype, "rowItems");
+], Ve.prototype, "rowItems");
 Be([
   Y()
-], He.prototype, "clampedStates");
+], Ve.prototype, "clampedStates");
 Be([
   Y()
-], He.prototype, "isLabelClamped");
+], Ve.prototype, "isLabelClamped");
 Be([
   Y()
-], He.prototype, "isSubtextClamped");
+], Ve.prototype, "isSubtextClamped");
 Be([
   Ar(".label-wrapper")
-], He.prototype, "labelWrapperEl");
+], Ve.prototype, "labelWrapperEl");
 Be([
   Ar(".subtext-wrapper")
-], He.prototype, "subtextWrapperEl");
-customElements.get("ssk-widget-user-detail") || customElements.define("ssk-widget-user-detail", He);
+], Ve.prototype, "subtextWrapperEl");
+customElements.get("ssk-widget-user-detail") || customElements.define("ssk-widget-user-detail", Ve);
 var b6 = Object.defineProperty, x6 = Object.getOwnPropertyDescriptor, Ye = (o, e, t, i) => {
   for (var r = i > 1 ? void 0 : i ? x6(e, t) : e, s = o.length - 1, n; s >= 0; s--)
     (n = o[s]) && (r = (i ? n(e, t, r) : n(r)) || r);
@@ -24471,7 +24478,7 @@ Ye([
   Ar(".subtext-wrapper")
 ], Pe.prototype, "subtextWrapperEl", 2);
 customElements.get("ssk-widget-title") || customElements.define("ssk-widget-title", Pe);
-var C6 = Object.defineProperty, xe = (o, e, t, i) => {
+var C6 = Object.defineProperty, Ce = (o, e, t, i) => {
   for (var r = void 0, s = o.length - 1, n; s >= 0; s--)
     (n = o[s]) && (r = n(e, t, r) || r);
   return r && C6(e, t, r), r;
@@ -24823,122 +24830,122 @@ Gs.registeredName = "ssk-widget-table", Gs.styles = F`
   }
   `;
 let me = Gs;
-xe([
+Ce([
   R({ context: U, subscribe: !0 }),
   l({ attribute: !1 })
 ], me.prototype, "theme");
-xe([
+Ce([
   l({ type: String })
 ], me.prototype, "size");
-xe([
+Ce([
   l({ type: String })
 ], me.prototype, "color");
-xe([
+Ce([
   l({ type: String })
 ], me.prototype, "margin");
-xe([
+Ce([
   l({ type: String })
 ], me.prototype, "padding");
-xe([
+Ce([
   l({ type: String })
 ], me.prototype, "gap");
-xe([
+Ce([
   l({ type: String })
 ], me.prototype, "testId");
-xe([
+Ce([
   l({ type: String })
 ], me.prototype, "fontFamilyGroup");
-xe([
+Ce([
   l({ type: String })
 ], me.prototype, "fontWeight");
-xe([
+Ce([
   l({ type: String })
 ], me.prototype, "fontSize");
-xe([
+Ce([
   l({ type: String })
 ], me.prototype, "widgetWidth");
-xe([
+Ce([
   l({ type: String })
 ], me.prototype, "widgetHeight");
-xe([
+Ce([
   l({ type: String })
 ], me.prototype, "label");
-xe([
+Ce([
   l({ type: String })
 ], me.prototype, "description");
-xe([
+Ce([
   l({ type: String })
 ], me.prototype, "badgeText");
-xe([
+Ce([
   l({ type: String })
 ], me.prototype, "badgeColor");
-xe([
+Ce([
   l({ type: String })
 ], me.prototype, "badgeIcon");
-xe([
+Ce([
   l({ type: Boolean })
 ], me.prototype, "showBadge");
-xe([
+Ce([
   l({ type: Boolean })
 ], me.prototype, "showDescription");
-xe([
+Ce([
   l({ type: String })
 ], me.prototype, "buttonColor");
-xe([
+Ce([
   l({ type: String })
 ], me.prototype, "buttonVariant");
-xe([
+Ce([
   l({ type: String })
 ], me.prototype, "buttonIcon");
-xe([
+Ce([
   l({ type: String })
 ], me.prototype, "buttonText");
-xe([
+Ce([
   l({ type: Boolean })
 ], me.prototype, "disabledButton");
-xe([
+Ce([
   l({ type: Boolean })
 ], me.prototype, "showButtonIcon");
-xe([
+Ce([
   l({ type: Array })
 ], me.prototype, "tableColumns");
-xe([
+Ce([
   l({ type: Array })
 ], me.prototype, "tableData");
-xe([
+Ce([
   l({ type: Number })
 ], me.prototype, "totalItems");
-xe([
+Ce([
   l({ type: Number })
 ], me.prototype, "currentPage");
-xe([
+Ce([
   l({ type: Number })
 ], me.prototype, "rowsPerPage");
-xe([
+Ce([
   l({ type: String })
 ], me.prototype, "emptyImage");
-xe([
+Ce([
   l({ type: Number })
 ], me.prototype, "maxVisiblePageButtons");
-xe([
+Ce([
   Y()
 ], me.prototype, "internalTableData");
-xe([
+Ce([
   Y()
 ], me.prototype, "activeSortColumn");
-xe([
+Ce([
   Y()
 ], me.prototype, "activeSortDirection");
-xe([
+Ce([
   Y()
 ], me.prototype, "isLabelClamped");
-xe([
+Ce([
   Y()
 ], me.prototype, "isSubtextClamped");
-xe([
+Ce([
   Ar(".title-wrapper")
 ], me.prototype, "labelWrapperEl");
-xe([
+Ce([
   Ar(".subtext-wrapper")
 ], me.prototype, "subtextWrapperEl");
 customElements.get("ssk-widget-table") || customElements.define("ssk-widget-table", me);
@@ -43113,10 +43120,10 @@ export {
   T1 as WaveIcon,
   Li as WidgetExample,
   dr as WidgetGrid,
-  Ce as WidgetMatric,
+  xe as WidgetMatric,
   me as WidgetTable,
   Pe as WidgetTitle,
-  He as WidgetUserDetail,
+  Ve as WidgetUserDetail,
   Av as applyTheme,
   ba as brandContext,
   p as cssVar,