udp-stencil-component-library 25.18.1-beta.6 → 25.18.1-beta.8

package/dist/cjs/udp-stepper-demo.cjs.entry.js

@@ -94,7 +94,7 @@ const UdpStepperDemo = class {
         };
     }
     render() {
-        return (index.h("div", { key: 'afad6510846a9c4d5d83344d045915061c40e4da', style: { padding: '2rem' } }, index.h("unity-typography", { key: '39114ea64804d8441c90ab2b4bac9175509128f1', variant: "h2" }, "Horizontal Stepper with Labels bottom"), index.h("udp-stepper", { key: '4525e5ceb4a92ddc679690ba2762bfaff5b09218', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "all", labelPosition: "bottom" }), index.h("unity-typography", { key: 'c28dc5a2348e1af8e544a33d6f359d32d7f326ea', variant: "h2" }, "Horizontal Stepper without Labels"), index.h("udp-stepper", { key: 'bc50999f3a4b9f150d3f932101221c9c6b992fdc', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "none", labelPosition: "bottom" }), index.h("unity-typography", { key: 'a5fb283cd408dae5a92b5bbcb999849d29c4114e', variant: "h2" }, "Horizontal Stepper with Labels to Right"), index.h("udp-stepper", { key: 'cc34b5cfd9e2a29dc5f23c229e28ff6e3bb4fccd', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "all", labelPosition: "right" }), index.h("unity-typography", { key: '6d602c582f6ebc764cb46f0bc3a7b7322da22217', variant: "h2" }, "Vertical Stepper"), index.h("udp-stepper", { key: 'f530054751640c808efa3a1abdfea025402283a8', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "vertical", labelDisplay: "all", labelPosition: "right" })));
+        return (index.h("div", { key: 'e81619ca3c31f9f6662c0b3af6c02a2db3e3f564', style: { padding: '2rem' } }, index.h("unity-typography", { key: '5e11e57915b6081e460f47a344dd31bf722d7e5b', variant: "h2" }, "Horizontal Stepper with Labels bottom"), index.h("udp-stepper", { key: 'ec35e19cc92d59c85818becd4e4d56e065df5dc3', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "all", labelPosition: "bottom" }), index.h("unity-typography", { key: 'f0011595e8eb435dd85b6c6c2570029a3cbd6afc', variant: "h2" }, "Horizontal Stepper without Labels"), index.h("udp-stepper", { key: 'afe54dc4d369c757dcb6ba5fe455e84c95e86f07', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "none", labelPosition: "bottom" }), index.h("unity-typography", { key: '394396ffff23cc1f4d99611bc3ccceeb096a2c1e', variant: "h2" }, "Horizontal Stepper with Labels to Right"), index.h("udp-stepper", { key: '104aaf080e02cd0c9da8a84cf911b721883e0a37', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "all", labelPosition: "right" }), index.h("unity-typography", { key: '90b1aaf901ca38b48c5584c0fb79d75a0f5a2a8c', variant: "h2" }, "Vertical Stepper"), index.h("udp-stepper", { key: '219567475d5ea693bd77641df12c20ee9360367d', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "vertical", labelDisplay: "all", labelPosition: "right" })));
     }
 };
 

package/dist/cjs/udp-tab-panel.cjs.entry.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var index = require('./index-DrMNAZCL.js');
+
+const udpTabPanelCss = ":host{display:block}.tab-panel{display:none}.tab-panel.active{display:block}";
+
+const UdpTabPanel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        const isActive = this.value === this.index;
+        return (index.h("div", { key: 'eaa68aa3e874dbf92d218eed44f6332efd7b4946', class: {
+                'tab-panel': true,
+                'active': isActive,
+            }, role: "tabpanel", "aria-hidden": !isActive ? 'true' : 'false' }, index.h("slot", { key: '5ebaeac17012121bcdf75249edd5042f47473f58' })));
+    }
+};
+UdpTabPanel.style = udpTabPanelCss;
+
+exports.udp_tab_panel = UdpTabPanel;
+//# sourceMappingURL=udp-tab-panel.entry.cjs.js.map

package/dist/cjs/udp-tab-panel.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"udp-tab-panel.entry.cjs.js","sources":["src/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.css?tag=udp-tab-panel&encapsulation=shadow","src/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.tab-panel {\n  display: none;\n}\n\n.tab-panel.active {\n  display: block;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'udp-tab-panel',\n  styleUrl: 'udp-tab-panel.css',\n  shadow: true,\n})\nexport class UdpTabPanel {\n  /**\n   * The active tab index, provided by the parent.\n   */\n  @Prop() value: number;\n\n  /**\n   * The index this panel corresponds to.\n   */\n  @Prop() index: number;\n\n  render() {\n    const isActive = this.value === this.index;\n\n    return (\n      <div\n        class={{\n          'tab-panel': true,\n          'active': isActive,\n        }}\n        role=\"tabpanel\"\n        // Use aria-hidden for accessibility and :host styling\n        aria-hidden={!isActive ? 'true' : 'false'}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,cAAc,GAAG,8EAA8E;;MCOxF,WAAW,GAAA,MAAA;;;;IAWtB,MAAM,GAAA;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;QAE1C,QACEA,OACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AACjB,gBAAA,QAAQ,EAAE,QAAQ;AACnB,aAAA,EACD,IAAI,EAAC,UAAU,EAAA,aAAA,EAEF,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA,EAEzCA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;"}

package/dist/cjs/udp-vertical-spacer.cjs.entry.js

@@ -15,7 +15,7 @@ const UdpVerticalSpacer = class {
             large: 'spacing-13', // Assuming this corresponds to --spacing-13
         };
         const spacingClass = sizeMap[this.unit] || 'spacing-01';
-        return (index.h("div", { key: '6f95b2f7bac8b4c689e35d4923ff72ae310e5fdb', class: spacingClass }));
+        return (index.h("div", { key: 'e05ad349a3c1df3a515ede40f457661c8b7913b9', class: spacingClass }));
     }
 };
 UdpVerticalSpacer.style = udpVerticalSpacerCss;

package/dist/collection/collection-manifest.json

@@ -152,6 +152,7 @@
     "components/my-component/UI/stepper/udp-stepper.js",
     "components/my-component/UI/tabs/tab/udp-tab.js",
     "components/my-component/UI/tabs/tab/tabs/udp-tabs.js",
+    "components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.js",
     "components/my-component/UI/toolbars/app-bar/app-bar.js",
     "components/my-component/UI/unity-typography/unity-typography.js",
     "components/my-component/UI/util/ghost-render/ghost-render.js",

package/dist/collection/components/my-component/UI/data-display/icons/udp-icon.js

@@ -11,6 +11,9 @@ export class UdpIcon {
     render() {
         var _a, _b;
         const iconData = getIconFromName(this.iconName, this.iconType);
+        if (!iconData) {
+            return null;
+        }
         let iconColor;
         if (this.color) {
             switch (this.color) {
@@ -39,7 +42,7 @@ export class UdpIcon {
         else {
             iconColor = this.darkIcon ? 'black' : 'white';
         }
-        return (h("div", { key: '3fcd971d2ddff23c78ebc0663ee5e1e484ae2805', class: "icon-container" }, h("svg", Object.assign({ key: '8fe3db2e6cf032b5b3eb6c0460579cdf660e76ec' }, ((_a = iconData === null || iconData === void 0 ? void 0 : iconData.attrs) !== null && _a !== void 0 ? _a : {}), { fill: iconColor }), (_b = iconData === null || iconData === void 0 ? void 0 : iconData.content) === null || _b === void 0 ? void 0 : _b.map((item, index) => {
+        return (h("div", { class: "icon-container" }, h("svg", Object.assign({}, ((_a = iconData === null || iconData === void 0 ? void 0 : iconData.attrs) !== null && _a !== void 0 ? _a : {}), { fill: iconColor }), (_b = iconData === null || iconData === void 0 ? void 0 : iconData.content) === null || _b === void 0 ? void 0 : _b.map((item, index) => {
             var _a, _b;
             if ((item === null || item === void 0 ? void 0 : item.elem) === 'path') {
                 return h("path", Object.assign({}, ((_a = item === null || item === void 0 ? void 0 : item.attrs) !== null && _a !== void 0 ? _a : {}), { key: index }));

package/dist/collection/components/my-component/UI/data-display/icons/udp-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"udp-icon.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/data-display/icons/udp-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAO9C,MAAM,OAAO,OAAO;IALpB;QAOU,aAAQ,GAAW,QAAQ,CAAC;QACpC;;WAEG;QACK,aAAQ,GAAY,IAAI,CAAC;KAiDlC;IA9CC,MAAM;;QACJ,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC/D,IAAI,SAAiB,CAAC;QAEtB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;gBACnB,KAAK,SAAS;oBACZ,SAAS,GAAG,sBAAsB,CAAC;oBACnC,MAAM;gBACR,KAAK,WAAW;oBACd,SAAS,GAAG,wBAAwB,CAAC;oBACrC,MAAM;gBACR,KAAK,OAAO;oBACV,SAAS,GAAG,yBAAyB,CAAC;oBACtC,MAAM;gBACR,KAAK,MAAM;oBACT,SAAS,GAAG,wBAAwB,CAAC;oBACrC,MAAM;gBACR,KAAK,SAAS;oBACZ,SAAS,GAAG,2BAA2B,CAAC;oBACxC,MAAM;gBACR,KAAK,SAAS;oBACZ,SAAS,GAAG,cAAc,CAAC;oBAC3B,MAAM;gBACR;oBACE,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;YAC3B,CAAC;QACH,CAAC;aAAM,CAAC;YACN,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;QAChD,CAAC;QAED,OAAO,CACL,4DAAK,KAAK,EAAC,gBAAgB;YACzB,4EAAS,CAAC,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,mCAAI,EAAE,CAAC,IAAE,IAAI,EAAE,SAAS,KAC9C,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,0CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;gBACtC,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,MAAK,MAAM,EAAE,CAAC;oBAC1B,OAAO,4BAAU,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,mCAAI,EAAE,CAAC,IAAE,GAAG,EAAE,KAAK,IAAI,CAAC;gBACvD,CAAC;qBAAM,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,MAAK,QAAQ,EAAE,CAAC;oBACnC,OAAO,8BAAY,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,mCAAI,EAAE,CAAC,IAAE,GAAG,EAAE,KAAK,IAAI,CAAC;gBACzD,CAAC;gBACD,OAAO,IAAI,CAAC;YACd,CAAC,CAAC,CACE,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { getIconFromName } from './iconUtils';\n\n@Component({\n  tag: 'udp-icon',\n  styleUrl: 'udp-icon.css',\n  shadow: true,\n})\nexport class UdpIcon {\n  @Prop() iconName: string;\n  @Prop() iconType: string = 'carbon';\n  /**\n   * @deprecated Use color prop instead\n   */\n  @Prop() darkIcon: boolean = true;\n  @Prop() color: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'inherit' | string;\n\n  render() {\n    const iconData = getIconFromName(this.iconName, this.iconType);\n    let iconColor: string;\n\n    if (this.color) {\n      switch (this.color) {\n        case 'primary':\n          iconColor = 'var(--primary-color)';\n          break;\n        case 'secondary':\n          iconColor = 'var(--secondary-color)';\n          break;\n        case 'error':\n          iconColor = 'var(--error-color-main)';\n          break;\n        case 'info':\n          iconColor = 'var(--info-color-main)';\n          break;\n        case 'success':\n          iconColor = 'var(--success-color-main)';\n          break;\n        case 'inherit':\n          iconColor = 'currentColor';\n          break;\n        default:\n          iconColor = this.color;\n      }\n    } else {\n      iconColor = this.darkIcon ? 'black' : 'white';\n    }\n\n    return (\n      <div class=\"icon-container\">\n        <svg {...(iconData?.attrs ?? {})} fill={iconColor}>\n          {iconData?.content?.map((item, index) => {\n            if (item?.elem === 'path') {\n              return <path {...(item?.attrs ?? {})} key={index} />;\n            } else if (item?.elem === 'circle') {\n              return <circle {...(item?.attrs ?? {})} key={index} />;\n            }\n            return null;\n          })}\n        </svg>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"udp-icon.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/data-display/icons/udp-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAO9C,MAAM,OAAO,OAAO;IALpB;QAOU,aAAQ,GAAW,QAAQ,CAAC;QACpC;;WAEG;QACK,aAAQ,GAAY,IAAI,CAAC;KAqDlC;IAlDC,MAAM;;QACJ,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC/D,IAAI,CAAC,QAAQ,EAAC,CAAC;YACb,OAAO,IAAI,CAAC;QACd,CAAC;QAED,IAAI,SAAiB,CAAC;QAEtB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;gBACnB,KAAK,SAAS;oBACZ,SAAS,GAAG,sBAAsB,CAAC;oBACnC,MAAM;gBACR,KAAK,WAAW;oBACd,SAAS,GAAG,wBAAwB,CAAC;oBACrC,MAAM;gBACR,KAAK,OAAO;oBACV,SAAS,GAAG,yBAAyB,CAAC;oBACtC,MAAM;gBACR,KAAK,MAAM;oBACT,SAAS,GAAG,wBAAwB,CAAC;oBACrC,MAAM;gBACR,KAAK,SAAS;oBACZ,SAAS,GAAG,2BAA2B,CAAC;oBACxC,MAAM;gBACR,KAAK,SAAS;oBACZ,SAAS,GAAG,cAAc,CAAC;oBAC3B,MAAM;gBACR;oBACE,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;YAC3B,CAAC;QACH,CAAC;aAAM,CAAC;YACN,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;QAChD,CAAC;QAED,OAAO,CACL,WAAK,KAAK,EAAC,gBAAgB;YACzB,2BAAS,CAAC,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,mCAAI,EAAE,CAAC,IAAE,IAAI,EAAE,SAAS,KAC9C,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,0CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;gBACtC,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,MAAK,MAAM,EAAE,CAAC;oBAC1B,OAAO,4BAAU,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,mCAAI,EAAE,CAAC,IAAE,GAAG,EAAE,KAAK,IAAI,CAAC;gBACvD,CAAC;qBAAM,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,MAAK,QAAQ,EAAE,CAAC;oBACnC,OAAO,8BAAY,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,mCAAI,EAAE,CAAC,IAAE,GAAG,EAAE,KAAK,IAAI,CAAC;gBACzD,CAAC;gBACD,OAAO,IAAI,CAAC;YACd,CAAC,CAAC,CACE,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { getIconFromName } from './iconUtils';\n\n@Component({\n  tag: 'udp-icon',\n  styleUrl: 'udp-icon.css',\n  shadow: true,\n})\nexport class UdpIcon {\n  @Prop() iconName: string;\n  @Prop() iconType: string = 'carbon';\n  /**\n   * @deprecated Use color prop instead\n   */\n  @Prop() darkIcon: boolean = true;\n  @Prop() color: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'inherit' | string;\n\n  render() {\n    const iconData = getIconFromName(this.iconName, this.iconType);\n    if (!iconData){\n      return null;\n    }\n    \n    let iconColor: string;\n\n    if (this.color) {\n      switch (this.color) {\n        case 'primary':\n          iconColor = 'var(--primary-color)';\n          break;\n        case 'secondary':\n          iconColor = 'var(--secondary-color)';\n          break;\n        case 'error':\n          iconColor = 'var(--error-color-main)';\n          break;\n        case 'info':\n          iconColor = 'var(--info-color-main)';\n          break;\n        case 'success':\n          iconColor = 'var(--success-color-main)';\n          break;\n        case 'inherit':\n          iconColor = 'currentColor';\n          break;\n        default:\n          iconColor = this.color;\n      }\n    } else {\n      iconColor = this.darkIcon ? 'black' : 'white';\n    }\n\n    return (\n      <div class=\"icon-container\">\n        <svg {...(iconData?.attrs ?? {})} fill={iconColor}>\n          {iconData?.content?.map((item, index) => {\n            if (item?.elem === 'path') {\n              return <path {...(item?.attrs ?? {})} key={index} />;\n            } else if (item?.elem === 'circle') {\n              return <circle {...(item?.attrs ?? {})} key={index} />;\n            }\n            return null;\n          })}\n        </svg>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/my-component/UI/data-display/kpi/kpi-list.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class KpiList {
     render() {
-        return (h("div", { key: '85c225971e2e51a0a0808165130c60c6734dc707', class: "kpi-container" }, this.kpiValues.map((kpi, index) => (h("div", { class: "kpi-item" }, h("span", { class: "kpi-label", style: {
+        return (h("div", { key: 'a04e6b402e88c914e2c53bf45d587a819544dda6', class: "kpi-container" }, this.kpiValues.map((kpi, index) => (h("div", { class: "kpi-item" }, h("span", { class: "kpi-label", style: {
                 fontSize: ' 0.875rem',
                 fontWeight: '300',
                 lineHeight: '0.25',

package/dist/collection/components/my-component/UI/data-display/list-item/list-item.js

@@ -49,11 +49,11 @@ export class UdpListRenderer {
     render() {
         const showPrimaryText = this.primaryText || this.hasPrimaryTextSlot;
         const showSecondaryText = this.secondaryText || this.hasSecondaryTextSlot;
-        return (h(Host, { key: 'a7fdc84e454e4415e41b494b874c5cd58093781b' }, h("div", { key: 'b708146bf6886d5822cc3784c1b1dde0a41531a8', class: {
+        return (h(Host, { key: '41eb6d0141ee4439623ec120ee274bb787f1bfee' }, h("div", { key: '2b210540274910e64292519574d5bb67a770bdf5', class: {
                 'list-item': true,
                 'clickable': this.clickable,
                 'variant-compact': this.variant === 'compact',
-            }, onClick: this.handleClick, onKeyPress: this.handleKeyPress, role: this.clickable ? 'button' : undefined, tabindex: this.clickable ? 0 : -1 }, this.iconName && (h("div", { key: 'bf2122fa1d51b1ad1e4d1248b863b2971459a67e', class: "avatar-container" }, h("udp-avatar", { key: '32d1956f5cf2e506bfcd7f5c85862349d1b394d2', iconName: this.iconName, variant: this.avatarVariant, color: this.avatarBackgroundColor }))), h("div", { key: '238cf5b9acc5504e56d8ed7c652e00f94ff75716', class: "text-container" }, showPrimaryText && (h("div", { key: 'ae15ea2fcd67fbd01f9eaf997acc5a21089cd6d2', class: "primary-text" }, h("slot", { key: '1a629990a4721c7281b5f1dd1c3db680b29a3e72', name: "primary-text" }, h("unity-typography", { key: 'ac76e535367c2a00ac1ae5ffd0fb08671a37c61f', variant: "body" }, this.primaryText)))), showSecondaryText && (h("div", { key: 'a48a9103abd12c8a2c5cdd36f5bdf720ebd9731f', class: "secondary-text" }, h("slot", { key: '1ac630c59426e4b6ecb9c3b891d9731cbcff3384', name: "secondary-text" }, h("unity-typography", { key: '6da8fd733530cddb27e5588ecdfa6f4d288d9c50', variant: "caption-text", color: "textSecondary" }, this.secondaryText))))), this.hasStatusChipSlot && (h("div", { key: '3987c5c8b83c77990706d376714444aae78ae7b9', class: "status-chip-container" }, h("slot", { key: '485ef815359ed98fd4269e1748ab25fd67f2119c', name: "status-chip" }))), this.hasActionsSlot && (h("div", { key: '3c34b44562e3077eba9e824e1a581aabb6662684', class: "actions-container" }, h("slot", { key: '011c682eb2fa5c1e7f730b028252489f24056e5c', name: "actions" }))))));
+            }, onClick: this.handleClick, onKeyPress: this.handleKeyPress, role: this.clickable ? 'button' : undefined, tabindex: this.clickable ? 0 : -1 }, this.iconName && (h("div", { key: '913f2b8c672493d7316e64ca3c26cea222b0281d', class: "avatar-container" }, h("udp-avatar", { key: '114fa2f5a4d3395aad73fff0fa6d239c7eecaf2a', iconName: this.iconName, variant: this.avatarVariant, color: this.avatarBackgroundColor }))), h("div", { key: 'bf27da4ea3959f2330e910ccf4964519941e7336', class: "text-container" }, showPrimaryText && (h("div", { key: '9f644311da4b3f144f2afc9f5a57f17e6c6b84a3', class: "primary-text" }, h("slot", { key: 'd7590409f59e534c5a057942ce30f9512e1a7b94', name: "primary-text" }, h("unity-typography", { key: 'a023f31b04cdc9c60514140d9f47681b2ab800d3', variant: "body" }, this.primaryText)))), showSecondaryText && (h("div", { key: '40f57bd6c501910e200d4cd145c9fed2a36d2fe8', class: "secondary-text" }, h("slot", { key: '62fbe0222b1d4866c61fe07a8d84d1567cbc4d56', name: "secondary-text" }, h("unity-typography", { key: 'e33b76e74015dd4e7176c06cdf84e8c40b3ba554', variant: "caption-text", color: "textSecondary" }, this.secondaryText))))), this.hasStatusChipSlot && (h("div", { key: '97542efce1a23b6e504cd541e41254e83da48baf', class: "status-chip-container" }, h("slot", { key: '432f5cc6a98b82c7ee53906dce053e95e097c588', name: "status-chip" }))), this.hasActionsSlot && (h("div", { key: '9e8065713ec74f83cd6bd7a00dac7c54c92355c0', class: "actions-container" }, h("slot", { key: '949296f60d37ed3cd5fdfc8c5cb39f8e38ef30f6', name: "actions" }))))));
     }
     static get is() { return "udp-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/data-display/pop-over/udp-pop-over.js

@@ -113,7 +113,7 @@ export class UdpPopOver {
             maxHeight: this.popoverMaxHeight,
             overflow: this.overflow
         };
-        return (h(Host, { key: '5c088fd433163c11cc9af440ddbde003d95a0f96' }, h("div", { key: '37774fc4c4f7484e23bf848e58adee84a47f5d6c', class: "popover", style: style }, h("slot", { key: 'f479cfe2f59c6ddded24909b26f7f7a6aeba5d59' }))));
+        return (h(Host, { key: 'a064210032eb7db2bba02fee5c9a857fffc4cbcf' }, h("div", { key: '1cd02d254250afed442607f0925613dafb0ef63f', class: "popover", style: style }, h("slot", { key: '085cca6f9a387c33b56fd18d41b54fbfd4b59b90' }))));
     }
     static get is() { return "udp-pop-over"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/data-display/pop-over-grid-action-header/udp-pop-over-grid-action-header.js

@@ -35,7 +35,7 @@ export class UdpPopOver {
             style['top'] = `${rect.bottom}px`;
             style['left'] = `${rect.left}px`;
         }
-        return (h("div", { key: '8e551e93e0cd39e0a1945c6bba655986ce3f9ec4', class: "popover", style: style }, h("unity-typography", { key: 'f19947195b6539834bf48380c7ea628ec75c1119', variant: "caption-text" }, h("slot", { key: 'ff01703a997941175c2f3d94e3765015d604be86' }))));
+        return (h("div", { key: '8db3050c709cd4652f36b7f7fccdf5474fef6786', class: "popover", style: style }, h("unity-typography", { key: '1d45adc91c79e9c417161bedd9c347884738b612', variant: "caption-text" }, h("slot", { key: '4782e7ff5fef34f131e21b3c6e85c6162543aa11' }))));
     }
     static get is() { return "udp-pop-over-grid-action-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/data-display/primary-action-header/primary-action-header.js

@@ -32,7 +32,7 @@ export class PrimaryActionHeader {
     //   }
     render() {
         console.log('active tab', this.activeTabIndex);
-        return (h("div", { key: '2b5cd6ddd163ddef49cc7fa95dab7f4a9911939e', class: "header-bar" }, h("div", { key: '0b74461e94c2263eb92a1faf4e2783eda26a29da', class: "title-section" }, h("unity-typography", { key: '0a21709957bdb4de3dcd85b882946b960caa7447', variant: "h4" }, this.title)), this.tabs && (h("div", { key: '1b224383283f2e875e4e4bec85f97d548078f256', class: "tabs" }, h("udp-tabs", { key: '3f2af545b1af466bf376e248ddadda48fceebb4d' }, h("button", { key: '7ba0d458d14def7c1fb1c32852e89097a85a07c2', class: this.activeTabIndex === 0 ? 'active' : '', slot: "tab-title", onClick: () => this.selectTab(0) }, "Demo Grid"), h("button", { key: '7dec1019d203c03c6ab9485c0aa83008b7970cdc', class: this.activeTabIndex === 1 ? 'active' : '', slot: "tab-title", onClick: () => this.selectTab(1) }, "Other Content")))), h("div", { key: 'f2a2f4e44fbc245ef82f8f3fe125cde71c3cc37e', class: "button-section" }, this.defaultActionButtons.map(btn => {
+        return (h("div", { key: 'a747d9aeac8c5d98c8781f91c0306e20279886df', class: "header-bar" }, h("div", { key: '167eafc92eec5750035e6cfba200893b7cc5e10b', class: "title-section" }, h("unity-typography", { key: '2aa18ffa1d295e3ba51cea9fd2c842f7bbb35004', variant: "h4" }, this.title)), this.tabs && (h("div", { key: 'd5b3255eadb6ba4961e1c312861ac814ea8c8743', class: "tabs" }, h("udp-tabs", { key: 'c1c5d42e23ec1b25963127a2b081d86abeb9e3b6' }, h("button", { key: '79659833299583267aa6589a5e36142256681dc3', class: this.activeTabIndex === 0 ? 'active' : '', slot: "tab-title", onClick: () => this.selectTab(0) }, "Demo Grid"), h("button", { key: '0635c5ef0354b88c2a0e1793a5249dd04fc70015', class: this.activeTabIndex === 1 ? 'active' : '', slot: "tab-title", onClick: () => this.selectTab(1) }, "Other Content")))), h("div", { key: 'a7da9e4e8385692aa04b1196e49d4b0d973b35d2', class: "button-section" }, this.defaultActionButtons.map(btn => {
             // Determine the actual icon to use
             const ActualIcon = this.getIconComponent(btn.icon, btn.customIcon);
             const clickHandler = (event) => {
@@ -47,7 +47,7 @@ export class PrimaryActionHeader {
                 return (h("stencil-icon-button", { secondary: btn.secondary, onClick: clickHandler, tooltip: btn.tooltip }, this.renderIcon(ActualIcon), !this.hiddenLabels.includes(btn.label) && btn.showLabel && h("span", null, btn.label)));
             }
             return null;
-        }), !this.actionButtonLabel && h("div", { key: '6cd80a675dab2d514a8ddfa819162ed2219d41c1', class: "right-margin" }), this.actionButtonLabel && (h("udp-button", { key: '0c714349e245f2554667b03de3bdb0e66d44581d', variant: "contained", color: "secondary", onClick: event => this.primaryActionClick(event) }, this.actionButtonLabel)))));
+        }), !this.actionButtonLabel && h("div", { key: '20aa08ddc0f999d58f401594bfe42802d100afac', class: "right-margin" }), this.actionButtonLabel && (h("udp-button", { key: 'd63ae8c88041c2b07d61e2ae94cb28df17c58d4e', variant: "contained", color: "secondary", onClick: event => this.primaryActionClick(event) }, this.actionButtonLabel)))));
     }
     static get is() { return "primary-action-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/data-display/simple-card/simple-card.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SimpleCard {
     render() {
-        return (h("div", { key: '60f920fe15bbc2916a11a8b800fda7277a0b489a', class: "card" }, h("slot", { key: 'ac4b2c77d9ad2ca9e3d52423c194c2e6ecabdaeb' })));
+        return (h("div", { key: 'f994bdbe314773f3e6c5d5c17dd82055fb76f0fc', class: "card" }, h("slot", { key: '05e6e796914b9b2c0eb796aabc2672e6ba1199f5' })));
     }
     static get is() { return "simple-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/data-display/tool-tip/udp-ambient-tool-tip.js

@@ -80,9 +80,9 @@ export class UdpAmbientToolTip {
     render() {
         // Check if content is provided before rendering the tooltip content.
         const shouldDisplayTooltip = !!this.isVisible && !!this.content && this.content.trim() !== '';
-        return (h("div", { key: '213f2dd7bcd6470d4a5bf6ae953fbcdd2ec775dc', class: "tooltip-wrapper", ref: el => (this.wrapperEl = el), onMouseOver: this.showTooltip, onMouseOut: this.hideTooltip }, h("slot", { key: '9088f10428a250bd218c8429722b2395927d5b11' }), shouldDisplayTooltip && (
+        return (h("div", { key: '55804784ff463b9aa4350063c7184183bc00cd2f', class: "tooltip-wrapper", ref: el => (this.wrapperEl = el), onMouseOver: this.showTooltip, onMouseOut: this.hideTooltip }, h("slot", { key: '53baf44478409db05bca1a7470e53083493876c2' }), shouldDisplayTooltip && (
         // STEP 4: Use the global class name we defined in our style string.
-        h("div", { key: '235f0deab48ed2764980d391bd12781be7778183', class: "udp-tooltip-portal", role: "tooltip", ref: el => (this.tooltipContentEl = el) }, h("unity-typography", { key: '6c068bf0a81a9e754afc7c19ceb86bb1f348b839', variant: "caption-text" }, this.content)))));
+        h("div", { key: '72b5a2ebda076e46f07c1e338b0981ddd12df1da', class: "udp-tooltip-portal", role: "tooltip", ref: el => (this.tooltipContentEl = el) }, h("unity-typography", { key: '76b55c15271a02a07f3d0747e922566d118b8188', variant: "caption-text" }, this.content)))));
     }
     static get is() { return "udp-ambient-tool-tip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/data-display/tree/tree-list-item/search-item/search-list-item.js

@@ -91,7 +91,7 @@ export class SearchListItem {
         });
     }
     render() {
-        return (h("div", { key: '2f9faea0db2a5169b65604d68f9ca20eafd6f861', class: "list-item" }, h("div", { key: 'b82093bc34c325f67524a1d3186539caa36e2152', class: "list-body" }, h("div", { key: 'b3dafb84904a51cea0056bce923a568a0aec5be4', class: "name" }, h("unity-typography", { key: '6601c3002021d53aa9e538184160a7f60e92a520', variant: "button" }, this.label)), h("div", { key: '0062f55adaff01fb3c04542bda56c06ce0af5391', style: { width: '200px' } }, h("udp-selector", { key: this.searchOperator, initialValue: this.searchOperator, options: this.selectorOptions, disabled: this.isInitialSearchItem || this.isDefault, onChange: (event) => this.handleOperatorSelected(event) })), h("div", { key: 'f2138827a4cb3a16a366c7fca18f60ca39106004', class: "input" }, h("text-field", { key: 'ee52bc7081269037056c185a0ed7f491c0d5db24', value: this.name, disabled: this.isInitialSearchItem, onBlur: this.handleInputBlur }))), (!this.isInitialSearchItem || !this.isDefault) && h("stencil-icon-button", { key: '2894cf78c8a2ee6ea23db2485bf5807d6d3374c6', icon: Close24, onClick: this.handleDelete })));
+        return (h("div", { key: '9fb346269c6a44b051c4a20cc39bfbc623ed9511', class: "list-item" }, h("div", { key: '46a6a66eb5f52df6e8bec384bbf297dbcf0d4e2c', class: "list-body" }, h("div", { key: '7d9f84c9bd1fba13c9c9bcca525e1c785975de24', class: "name" }, h("unity-typography", { key: '9f5addc8ff5141cd43a823245ae1562f0276e772', variant: "button" }, this.label)), h("div", { key: '934360ca2bd4d9f2bc27b984105a08b99a7e1430', style: { width: '200px' } }, h("udp-selector", { key: this.searchOperator, initialValue: this.searchOperator, options: this.selectorOptions, disabled: this.isInitialSearchItem || this.isDefault, onChange: (event) => this.handleOperatorSelected(event) })), h("div", { key: '797210e0f73d37629b38daee87679d6c6ed22957', class: "input" }, h("text-field", { key: '4a66cf9f3a2600ef5bc690b74050866abb8c8bc6', value: this.name, disabled: this.isInitialSearchItem, onBlur: this.handleInputBlur }))), (!this.isInitialSearchItem || !this.isDefault) && h("stencil-icon-button", { key: '24001c57bab2a78885fe3853571893f1fcb8e8fd', icon: Close24, onClick: this.handleDelete })));
     }
     static get is() { return "search-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/data-display/udp-avatar/udp-avatar.js

@@ -42,7 +42,7 @@ export class UdpAvatar {
         else {
             style['background-color'] = this.getColorForUsername();
         }
-        return (h("div", { key: '39efa3768058fc1fe61ee05d6f0e2ee2ff6ecd0e', class: classes.join(' '), style: style }, this.iconName ? h("udp-icon", { iconName: this.iconName, darkIcon: false }) : h("unity-typography", { variant: "data-display-two" }, " ", this.getInitial())));
+        return (h("div", { key: '171f5b8188fe7648880844ecb0e92e9f93e734e8', class: classes.join(' '), style: style }, this.iconName ? h("udp-icon", { iconName: this.iconName, darkIcon: false }) : h("unity-typography", { variant: "data-display-two" }, " ", this.getInitial())));
     }
     static get is() { return "udp-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/dialogs/fluent-dialog/fluent-dialog.js

@@ -10,9 +10,9 @@ export class FluentDialog {
         this.buttonThreeHidden = true;
     }
     render() {
-        return (h("div", { key: '04a8aa4e472a39d524ee138afe8a569787c75843', class: { 'overlay': true, 'overlay-open': this.open } }, h("div", { key: 'bd58e65752384f3091e39a2a481a924c9e008e76', class: { 'dialog-container': true, 'dialog-open': this.open } }, h("div", { key: '74992ef8c8f6f84eb7206890813c7f8b2e1df7e6', class: "dialog-title", id: this.titleId }, h("unity-typography", { key: '319d68746d8fe968b36562e55c68328828cc20c1', variant: "h3" }, this.title)), h("div", { key: '1f1eabf51753f8bb0149e00b5dae4fb7bfe5e92d', class: "dialog-content" }, h("unity-typography", { key: '185821d98461721147e8131ceb069f74799a18ef', variant: "h6" }, this.message), h("unity-typography", { key: '39ad78492867945a3b21d1805aa561f38ed7c27d', variant: "body" }, h("slot", { key: 'a4c259a59a5ce8ee3eba5ec6b39a46718d3e9348' }))), h("div", { key: '3985e215eefe1e27d831ab3369b2a8bfd21f2ef2', class: "dialog-actions" }, !this.buttonTwoHidden && (h("custom-button", { key: '382eb5cbf946b6c4e57d3794aeb6f31b7d4dd143', size: "tall", variant: "text", onClick: () => this.actionTwo() }, this.labelTwo)), !this.buttonThreeHidden && (h("custom-button", { key: '08b6ce4fa8519d5b02cb2215cabae04ca1371c75',
+        return (h("div", { key: 'a67918a009b7850a24efa7fc0e778ed8dccaae6b', class: { 'overlay': true, 'overlay-open': this.open } }, h("div", { key: 'd4475170ef03b690c76b8a21306c50cdf9a146b4', class: { 'dialog-container': true, 'dialog-open': this.open } }, h("div", { key: '17cf58f182a6f04fb1397addbba892b51c512cef', class: "dialog-title", id: this.titleId }, h("unity-typography", { key: '7ed19079acd30bedace74b84a2526dfdc2854daf', variant: "h3" }, this.title)), h("div", { key: 'c17f3edde2e241dd13723f1a0baed138320bf532', class: "dialog-content" }, h("unity-typography", { key: 'f3b39b44284dc013069ad52232b0973fe8588b9b', variant: "h6" }, this.message), h("unity-typography", { key: '2162c0081d1bc1238d76b2acf88483ae4bfc8672', variant: "body" }, h("slot", { key: '39019b9967ba312d50dd3fd64a24089cf2cd65e8' }))), h("div", { key: '9f50fb36d28f9f62cf829328d6786fc9bf0795cb', class: "dialog-actions" }, !this.buttonTwoHidden && (h("custom-button", { key: '1bc3782ee17bd5baa10c3860b22de6bb3747764f', size: "tall", variant: "text", onClick: () => this.actionTwo() }, this.labelTwo)), !this.buttonThreeHidden && (h("custom-button", { key: '3bf6eb9efdc79a9fd154dc45fcdc5fd79f2a450c',
             //class="primary-action"
-            onClick: () => this.actionThree(), size: "tall", variant: "text", disabled: this.disableThree }, this.labelThree)), !this.buttonOneHidden && (h("custom-button", { key: '50b1433782b04b4bb04ec0f6fc4adb45f535e26a', class: "primary-action", variant: "text", onClick: () => this.actionOne(), size: "tall", disabled: this.disableOne }, this.labelOne))), this.progress && h("div", { key: '38c5abae188957796b93f80f5a93edafc1d600c5', class: "linear-progress" }))));
+            onClick: () => this.actionThree(), size: "tall", variant: "text", disabled: this.disableThree }, this.labelThree)), !this.buttonOneHidden && (h("custom-button", { key: 'b14268f5d3ed523dce91c3e6ab151bf6df782e48', class: "primary-action", variant: "text", onClick: () => this.actionOne(), size: "tall", disabled: this.disableOne }, this.labelOne))), this.progress && h("div", { key: 'd2b065ffacc638e5e3b2a1f4b8bd7b1f4af28a6b', class: "linear-progress" }))));
     }
     static get is() { return "fluent-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/dialogs/udp-dialog.js

@@ -49,7 +49,7 @@ export class UdpDialog {
         document.removeEventListener('keydown', this.handleKeyDown);
     }
     render() {
-        return (h(Host, { key: '4adbe541f2902a9d92c243a40388bdc3b121b645', onClick: this.handleOverlayClick }, h("div", { key: '9614c5df4fbe7e94c73b5aacc37174d6b16555c9', class: "dialog-container", role: "dialog", "aria-modal": "true", "aria-labelledby": this.titleId, "aria-describedby": this.descriptionId, onClick: (event) => event.stopPropagation() }, h("div", { key: 'adb9fc377065a01d3b3266d99f3ffe640058fa73', class: "dialog-title", id: this.titleId }, h("unity-typography", { key: 'e03c5fc91c29a384eabab75c1509488eac44d6f0', variant: "h3" }, this.title)), h("div", { key: 'e0f011fb41be303e8779e128e02c2b9aed43e645', class: "dialog-content", id: this.descriptionId }, this.message && h("unity-typography", { key: 'fef802596e0859df5774da1497eb91e4f2a6d193', variant: "body" }, this.message), h("slot", { key: '1cb32eb5d979ad00ed1e9fa9e284e46562defb05' })), h("div", { key: '1b1043c981af31c3b3e51f61017e09e856da5f71', class: "dialog-actions" }, !this.buttonTwoHidden && (h("udp-button", { key: '3dced852ea4bb0741eb0de0809f8e75b3b3b4c30', variant: 'text', disabled: this.disableTwo, onClick: () => this.actionTwo() }, this.labelTwo)), !this.buttonThreeHidden && (h("udp-button", { key: 'ca50eec078c3f5a3947d5377547fc2c689d7cc33', variant: 'text', disabled: this.disableThree, onClick: () => this.actionThree() }, this.labelThree)), !this.buttonOneHidden && (h("udp-button", { key: 'ab4c062175324d22f85900dd7713df93624dd7ef', variant: 'contained', disabled: this.disableOne, onClick: () => this.actionOne(), loading: !!this.progress }, this.labelOne))))));
+        return (h(Host, { key: '01757cb710b4621a69e4ed790374d9b16a139031', onClick: this.handleOverlayClick }, h("div", { key: '669805ff6826420f397e97cf1051022ecf33451a', class: "dialog-container", role: "dialog", "aria-modal": "true", "aria-labelledby": this.titleId, "aria-describedby": this.descriptionId, onClick: (event) => event.stopPropagation() }, h("div", { key: '6c4ce9f296e970e49f9d582e260f49eb847eb42b', class: "dialog-title", id: this.titleId }, h("unity-typography", { key: 'd5565820bca213943b5406ce63e967e1c9895684', variant: "h3" }, this.title)), h("div", { key: 'af030ddb399c0a9805e13f2025d585fa37f5193c', class: "dialog-content", id: this.descriptionId }, this.message && h("unity-typography", { key: 'ea821f4f8dc91cafd77b49f351b960bc2ea86fcb', variant: "body" }, this.message), h("slot", { key: '10fd10148354b8072bbd247436c649a6625afd4c' })), h("div", { key: 'a4be76d0999841f2ce0a05e52f22930cffacf140', class: "dialog-actions" }, !this.buttonTwoHidden && (h("udp-button", { key: '69fee918e7319ed67e98f6fbc6c568167f839a09', variant: 'text', disabled: this.disableTwo, onClick: () => this.actionTwo() }, this.labelTwo)), !this.buttonThreeHidden && (h("udp-button", { key: '91cc57acd1d201f7828c8c34ec399ba25715a054', variant: 'text', disabled: this.disableThree, onClick: () => this.actionThree() }, this.labelThree)), !this.buttonOneHidden && (h("udp-button", { key: 'b6672709b4432743f0ac7ba740cea49ccd085dfe', variant: 'contained', disabled: this.disableOne, onClick: () => this.actionOne(), loading: !!this.progress }, this.labelOne))))));
     }
     static get is() { return "udp-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/drawers/udp-side-sheet/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/collection/components/my-component/UI/drawers/udp-side-sheet/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/drawers/udp-side-sheet/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface SecondaryButton {\n  id: number | string;\n  label: string;\n  icon?: string;\n  disabled?: boolean;\n  onClick: () => void\n}\n"]}

package/dist/collection/components/my-component/UI/drawers/udp-side-sheet/udp-side-sheet.css

@@ -1,137 +1,163 @@
-:host {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 9999;
-  visibility: hidden;
-  transition: visibility 0s 0.2s;
-}
-
-:host(.is-visible) {
-  visibility: visible;
-  transition-delay: 0s;
-}
-
-.backdrop {
-  background: rgba(0, 0, 0, 0.5);
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  transition: opacity 0.2s ease-in-out;
-}
-
-:host(.is-visible) .backdrop {
-  opacity: 1;
-}
-
-.sheet {
-  background: white;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
-  transition: transform 0.2s ease-in-out;
-  width: 100%;
-}
-
-.sheet.right {
-  right: 0;
-  transform: translateX(100%);
-}
-
-.sheet.left {
-  left: 0;
-  transform: translateX(-100%);
-}
-
-:host(.is-visible) .sheet {
-  transform: translateX(0);
-}
-
-.sheet.sm { max-width: 360px; }
-.sheet.md { max-width: 600px; }
-.sheet.lg { max-width: 960px; }
-.sheet.full { max-width: 100%; }
-.sheet.custom-width { /* max-width is set via inline style */ }
-
-/* Updated title container for new layout */
-.title-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-shrink: 0;
-  box-shadow: var(--elevation-01, 0 4px 8px rgba(0, 0, 0, 0.1));
-  gap: var(--spacing-02)
-}
-
-.title-text {
-  flex-grow: 1;
-  text-align: left; /* Ensure title stays left-aligned */
-}
-
-.close-button {
-  flex-shrink: 0;
-}
-
-/* Added styles for the new button's container */
-.header-action-button {
-  flex-shrink: 0;
-}
-
-.content {
-  overflow-y: auto;
-  flex-grow: 1;
-  background-color: var(--gray-01);
-}
-
-.content.padding {
-  padding: var(--spacing-05, 24px);
-}
-
-.footer {
-  padding: var(--spacing-05, 24px);
-  border-top: 1px solid #ccc;
-  display: flex;
-  justify-content: flex-end;
-  flex-shrink: 0;
-}
-
-
-/* This container reserves the space for the loader (4px height).
-  This prevents the content below it from shifting up and down
-  when the loader appears or disappears.
-*/
-.loader-container {
-  height: 4px;
-  width: 100%;
-  background-color: var(--gray-01);
-}
-
-/*
-  By default, the loader is instantly hidden.
-  There is no transition applied in its hidden state.
-*/
-.loader-container udp-linear-loader {
-  visibility: hidden;
-  opacity: 0;
-  transition: none;
-}
-
-/*
-  When the .is-loading class is applied, we make the loader visible
-  AND apply a transition so it fades in smoothly. When the class is removed,
-  it reverts to the rule above and disappears instantly.
-*/
-.loader-container udp-linear-loader.is-loading {
-  visibility: visible;
-  opacity: 1;
-  /* transition: opacity 0.3s ease-in-out; */
-}
-
+:host {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  visibility: hidden;
+  transition: visibility 0s 0.2s;
+}
+
+:host(.is-visible) {
+  visibility: visible;
+  transition-delay: 0s;
+}
+
+.backdrop {
+  background: rgba(0, 0, 0, 0.5);
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
+:host(.is-visible) .backdrop {
+  opacity: 1;
+}
+
+.sheet {
+  background: white;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+  transition: transform 0.2s ease-in-out;
+  width: 100%;
+}
+
+.sheet.right {
+  right: 0;
+  transform: translateX(100%);
+}
+
+.sheet.left {
+  left: 0;
+  transform: translateX(-100%);
+}
+
+:host(.is-visible) .sheet {
+  transform: translateX(0);
+}
+
+.sheet.sm { max-width: 360px; }
+.sheet.md { max-width: 600px; }
+.sheet.lg { max-width: 960px; }
+.sheet.full { max-width: 100%; }
+.sheet.custom-width { /* max-width is set via inline style */ }
+
+/* Updated title container for new layout */
+.title-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+  box-shadow: var(--elevation-01, 0 4px 8px rgba(0, 0, 0, 0.1));
+  gap: var(--spacing-02)
+}
+
+.title-text {
+  flex-grow: 1;
+  text-align: left; /* Ensure title stays left-aligned */
+}
+
+.close-button {
+  flex-shrink: 0;
+}
+
+/* Added styles for the new button's container */
+.header-action-button {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-02, 4px);
+  padding: var(--spacing-03, 8px) var(--spacing-03, 8px) var(--spacing-03, 8px) 0;
+}
+
+.content {
+  overflow-y: auto;
+  flex-grow: 1;
+  background-color: var(--gray-01);
+}
+
+.content.padding {
+  padding: var(--spacing-05, 24px);
+}
+
+.footer {
+  padding: var(--spacing-03, 8px);
+  box-shadow: var(--elevation-01, 0 4px 8px rgba(0, 0, 0, 0.1));
+  display: flex;
+  justify-content: flex-end;
+  flex-shrink: 0;
+  width: 100%;
+  gap: var(--spacing-02, 4px);
+  align-items: center;
+}
+
+.footer.secondary-button-overflow{
+  flex-direction: row-reverse;
+}
+
+.footer-secondary-buttons-container{
+  flex-grow: 2;
+  width: 100%;
+}
+
+.footer-secondary-buttons{
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-02, 4px);
+  align-items: center;
+}
+
+.footer-secondary-buttons.secondary-button-overflow{
+  flex-grow: 1;
+}
+
+/* This container reserves the space for the loader (4px height).
+  This prevents the content below it from shifting up and down
+  when the loader appears or disappears.
+*/
+.loader-container {
+  height: 4px;
+  width: 100%;
+  background-color: var(--gray-01);
+}
+
+/*
+  By default, the loader is instantly hidden.
+  There is no transition applied in its hidden state.
+*/
+.loader-container udp-linear-loader {
+  visibility: hidden;
+  opacity: 0;
+  transition: none;
+}
+
+/*
+  When the .is-loading class is applied, we make the loader visible
+  AND apply a transition so it fades in smoothly. When the class is removed,
+  it reverts to the rule above and disappears instantly.
+*/
+.loader-container udp-linear-loader.is-loading {
+  visibility: visible;
+  opacity: 1;
+  /* transition: opacity 0.3s ease-in-out; */
+}
+