@uxuissk/design-system-core 3.4.6 → 3.4.7

package/dist/main.d.ts

@@ -2766,6 +2766,7 @@ export declare class WidgetMatric extends LitElement implements Widget, ThemeVal
     iconLeftColor: string;
     iconLeft: string;
     imgUrl: string;
+    imgAlt: string;
     buttonColor: string;
     buttonVariant: string;
     buttonIcon: string;

package/dist/sellsuki-components.bundled.js

@@ -24285,14 +24285,14 @@ const oc = "important", o9 = " !" + oc, Hl = cl(class extends pl {
     return yr;
   }
 });
-var s9 = Object.defineProperty, $e = (o, e, t, i) => {
+var s9 = 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 && s9(e, t, r), r;
 };
 const cn = class cn 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);
@@ -24431,21 +24431,23 @@ const cn = class cn 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>
-                        ` : x}
-                
+                        ` : this.showIconLeft && this.iconLeft ? m`
+                            <div>
+                                <ssk-misc-icon
+                                iconname="${this.iconLeft}"
+                                size="sm"
+                                themecolor="${this.iconLeftColor}"
+                                variant="light"
+                                ></ssk-misc-icon>
+                            </div>
+                            ` : x}
+                </slot>
+
                 <div class="text-content">
                     <div>
                         ${this.renderLabel()}
@@ -24458,43 +24460,45 @@ const cn = class cn 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>
-                        ` : x}
+                <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>` : x}
+                                    <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>
+                            ` : x}
+                </slot>
             </div>
         </div>
       </div>
@@ -24555,114 +24559,117 @@ cn.registeredName = "ssk-widget-matric", cn.styles = F`
         min-width: 0;
     }
   `;
-let Ce = cn;
-$e([
+let xe = cn;
+He([
   R({ context: U, subscribe: !0 }),
   l({ attribute: !1 })
-], Ce.prototype, "theme");
-$e([
+], xe.prototype, "theme");
+He([
+  l({ type: String })
+], xe.prototype, "size");
+He([
   l({ type: String })
-], Ce.prototype, "size");
-$e([
+], xe.prototype, "color");
+He([
   l({ type: String })
-], Ce.prototype, "color");
-$e([
+], xe.prototype, "margin");
+He([
   l({ type: String })
-], Ce.prototype, "margin");
-$e([
+], xe.prototype, "padding");
+He([
   l({ type: String })
-], Ce.prototype, "padding");
-$e([
+], xe.prototype, "gap");
+He([
   l({ type: String })
-], Ce.prototype, "gap");
-$e([
+], xe.prototype, "testId");
+He([
   l({ type: String })
-], Ce.prototype, "testId");
-$e([
+], xe.prototype, "fontFamilyGroup");
+He([
   l({ type: String })
-], Ce.prototype, "fontFamilyGroup");
-$e([
+], xe.prototype, "fontWeight");
+He([
   l({ type: String })
-], Ce.prototype, "fontWeight");
-$e([
+], xe.prototype, "fontSize");
+He([
   l({ type: String })
-], Ce.prototype, "fontSize");
-$e([
+], xe.prototype, "widgetWidth");
+He([
   l({ type: String })
-], Ce.prototype, "widgetWidth");
-$e([
+], xe.prototype, "widgetHeight");
+He([
   l({ type: String })
-], Ce.prototype, "widgetHeight");
-$e([
+], xe.prototype, "label");
+He([
   l({ type: String })
-], Ce.prototype, "label");
-$e([
+], xe.prototype, "subText");
+He([
   l({ type: String })
-], Ce.prototype, "subText");
-$e([
+], xe.prototype, "badgeText");
+He([
   l({ type: String })
-], Ce.prototype, "badgeText");
-$e([
+], xe.prototype, "badgeColor");
+He([
   l({ type: String })
-], Ce.prototype, "badgeColor");
-$e([
+], xe.prototype, "badgeIcon");
+He([
   l({ type: String })
-], Ce.prototype, "badgeIcon");
-$e([
+], xe.prototype, "iconLeftColor");
+He([
   l({ type: String })
-], Ce.prototype, "iconLeftColor");
-$e([
+], xe.prototype, "iconLeft");
+He([
   l({ type: String })
-], Ce.prototype, "iconLeft");
-$e([
+], xe.prototype, "imgUrl");
+He([
   l({ type: String })
-], Ce.prototype, "imgUrl");
-$e([
+], xe.prototype, "imgAlt");
+He([
   l({ type: String })
-], Ce.prototype, "buttonColor");
-$e([
+], xe.prototype, "buttonColor");
+He([
   l({ type: String })
-], Ce.prototype, "buttonVariant");
-$e([
+], xe.prototype, "buttonVariant");
+He([
   l({ type: String })
-], Ce.prototype, "buttonIcon");
-$e([
+], xe.prototype, "buttonIcon");
+He([
   l({ type: String })
-], Ce.prototype, "iconRightColor");
-$e([
+], xe.prototype, "iconRightColor");
+He([
   l({ type: String })
-], Ce.prototype, "iconRight");
-$e([
+], xe.prototype, "iconRight");
+He([
   l({ type: Boolean })
-], Ce.prototype, "showSubtext");
-$e([
+], xe.prototype, "showSubtext");
+He([
   l({ type: Boolean })
-], Ce.prototype, "showImage");
-$e([
+], xe.prototype, "showImage");
+He([
   l({ type: Boolean })
-], Ce.prototype, "showIconLeft");
-$e([
+], xe.prototype, "showIconLeft");
+He([
   l({ type: Boolean })
-], Ce.prototype, "showButtonIcon");
-$e([
+], xe.prototype, "showButtonIcon");
+He([
   l({ type: Boolean })
-], Ce.prototype, "showBadge");
-$e([
+], xe.prototype, "showBadge");
+He([
   l({ type: Boolean })
-], Ce.prototype, "showIconRight");
-$e([
+], xe.prototype, "showIconRight");
+He([
   Y()
-], Ce.prototype, "isLabelClamped");
-$e([
+], xe.prototype, "isLabelClamped");
+He([
   P1(".label-wrapper")
-], Ce.prototype, "labelWrapperEl");
-$e([
+], xe.prototype, "labelWrapperEl");
+He([
   Y()
-], Ce.prototype, "isSubtextClamped");
-$e([
+], xe.prototype, "isSubtextClamped");
+He([
   P1(".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);
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -24934,105 +24941,105 @@ pn.registeredName = "ssk-widget-user-detail", pn.styles = F`
     .bottom-left { min-width: 0; flex: 1;}
     .bottom-right { flex-shrink: 0; }
   `;
-let He = pn;
+let $e = pn;
 Be([
   R({ context: U, subscribe: !0 }),
   l({ attribute: !1 })
-], He.prototype, "theme");
+], $e.prototype, "theme");
 Be([
   l({ type: String })
-], He.prototype, "size");
+], $e.prototype, "size");
 Be([
   l({ type: String })
-], He.prototype, "color");
+], $e.prototype, "color");
 Be([
   l({ type: String })
-], He.prototype, "margin");
+], $e.prototype, "margin");
 Be([
   l({ type: String })
-], He.prototype, "padding");
+], $e.prototype, "padding");
 Be([
   l({ type: String })
-], He.prototype, "gap");
+], $e.prototype, "gap");
 Be([
   l({ type: String })
-], He.prototype, "testId");
+], $e.prototype, "testId");
 Be([
   l({ type: String })
-], He.prototype, "fontFamilyGroup");
+], $e.prototype, "fontFamilyGroup");
 Be([
   l({ type: String })
-], He.prototype, "fontWeight");
+], $e.prototype, "fontWeight");
 Be([
   l({ type: String })
-], He.prototype, "fontSize");
+], $e.prototype, "fontSize");
 Be([
   l({ type: String })
-], He.prototype, "widgetWidth");
+], $e.prototype, "widgetWidth");
 Be([
   l({ type: String })
-], He.prototype, "widgetHeight");
+], $e.prototype, "widgetHeight");
 Be([
   l({ type: String })
-], He.prototype, "label");
+], $e.prototype, "label");
 Be([
   l({ type: String })
-], He.prototype, "subText");
+], $e.prototype, "subText");
 Be([
   l({ type: String })
-], He.prototype, "buttonColor");
+], $e.prototype, "buttonColor");
 Be([
   l({ type: String })
-], He.prototype, "buttonVariant");
+], $e.prototype, "buttonVariant");
 Be([
   l({ type: String })
-], He.prototype, "buttonIcon");
+], $e.prototype, "buttonIcon");
 Be([
   l({ type: String })
-], He.prototype, "buttonText");
+], $e.prototype, "buttonText");
 Be([
   l({ type: String })
-], He.prototype, "imgUrl");
+], $e.prototype, "imgUrl");
 Be([
   l({ type: String })
-], He.prototype, "imageShape");
+], $e.prototype, "imageShape");
 Be([
   l({ type: Boolean })
-], He.prototype, "showSubtext");
+], $e.prototype, "showSubtext");
 Be([
   l({ type: Boolean })
-], He.prototype, "showImage");
+], $e.prototype, "showImage");
 Be([
   l({ type: Boolean })
-], He.prototype, "showButtonIcon");
+], $e.prototype, "showButtonIcon");
 Be([
   l({ type: Boolean })
-], He.prototype, "showButtonTooltip");
+], $e.prototype, "showButtonTooltip");
 Be([
   l({ type: String })
-], He.prototype, "buttonTooltipText");
+], $e.prototype, "buttonTooltipText");
 Be([
   l({ type: Boolean })
-], He.prototype, "disabledButton");
+], $e.prototype, "disabledButton");
 Be([
   l({ type: Array })
-], He.prototype, "rowItems");
+], $e.prototype, "rowItems");
 Be([
   Y()
-], He.prototype, "clampedStates");
+], $e.prototype, "clampedStates");
 Be([
   Y()
-], He.prototype, "isLabelClamped");
+], $e.prototype, "isLabelClamped");
 Be([
   Y()
-], He.prototype, "isSubtextClamped");
+], $e.prototype, "isSubtextClamped");
 Be([
   P1(".label-wrapper")
-], He.prototype, "labelWrapperEl");
+], $e.prototype, "labelWrapperEl");
 Be([
   P1(".subtext-wrapper")
-], He.prototype, "subtextWrapperEl");
-customElements.get("ssk-widget-user-detail") || customElements.define("ssk-widget-user-detail", He);
+], $e.prototype, "subtextWrapperEl");
+customElements.get("ssk-widget-user-detail") || customElements.define("ssk-widget-user-detail", $e);
 var l9 = Object.defineProperty, a9 = Object.getOwnPropertyDescriptor, Ye = (o, e, t, i) => {
   for (var r = i > 1 ? void 0 : i ? a9(e, t) : e, s = o.length - 1, n; s >= 0; s--)
     (n = o[s]) && (r = (i ? n(e, t, r) : n(r)) || r);
@@ -25399,7 +25406,7 @@ Ye([
   P1(".subtext-wrapper")
 ], Pe.prototype, "subtextWrapperEl", 2);
 customElements.get("ssk-widget-title") || customElements.define("ssk-widget-title", Pe);
-var d9 = Object.defineProperty, xe = (o, e, t, i) => {
+var d9 = 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 && d9(e, t, r), r;
@@ -25751,122 +25758,122 @@ gn.registeredName = "ssk-widget-table", gn.styles = F`
   }
   `;
 let me = gn;
-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([
   P1(".title-wrapper")
 ], me.prototype, "labelWrapperEl");
-xe([
+Ce([
   P1(".subtext-wrapper")
 ], me.prototype, "subtextWrapperEl");
 customElements.get("ssk-widget-table") || customElements.define("ssk-widget-table", me);
@@ -44041,10 +44048,10 @@ export {
   Zr as WaveIcon,
   Li as WidgetExample,
   h1 as WidgetGrid,
-  Ce as WidgetMatric,
+  xe as WidgetMatric,
   me as WidgetTable,
   Pe as WidgetTitle,
-  He as WidgetUserDetail,
+  $e as WidgetUserDetail,
   xw as applyTheme,
   i5 as brandContext,
   p as cssVar,