@platformscode/core 0.0.35 → 0.0.38

package/dist/collection/components/dga-icon/dga-icon.js

@@ -1,8 +1,9 @@
 import { Build, Host, h } from "@stencil/core";
 import { getSvgContent, gdsIconContent } from "./request";
-import { getName, getUrl } from "./utils";
+import { getName, getUrl, parseIconString, isStr, isSrc } from "./utils";
 import { inheritAttributes } from "../../utils/helpers";
 import { isRTL } from "../../utils/rtl/dir";
+import { parseCSSValue } from "../../utils/index";
 export class Icon {
     constructor() {
         this.iconName = null;
@@ -10,12 +11,20 @@ export class Icon {
         this.didLoadIcon = false;
         this.isVisible = false;
         /**
-       * The variant of the icon.
-       * Available options are: `"stroke"`, `"solid"`, `"duotone"`, `"twotone"`, `"bulk"`.
-       * @default "bulk"
-       */
-        this.variant = 'bulk';
+         * The variant of the icon.
+         * Supported options are: `"stroke"` and `"solid"`.
+         *
+         * Deprecated options:
+         * - `"twotone"` → `"stroke"`
+         * - `"duotone"` → `"solid"`
+         * - `"bulk"` → `"solid"`
+         *
+         * Deprecated options: `"duotone"`, `"twotone"`, `"bulk"`.
+         * @default "stroke"
+         */
+        this.variant = 'stroke';
         /**
+         * @deprecated This prop will be removed in a future release.
          * The type/style of the icon.
          * Available options are: `"rounded"`, `"sharp"`, `"standard"`.
          * @default "rounded"
@@ -107,7 +116,7 @@ export class Icon {
         io.observe(el);
     }
     /**
-     * Watch for changes to the icon name, src, icon, variant, or type properties.
+     * Watch for changes to the icon name, src, icon, or variant properties.
      * When a change is detected, the icon will be loaded.
      */
     loadIcon() {
@@ -125,6 +134,14 @@ export class Icon {
                 this.didLoadIcon = true;
             }
         }
+        // Handle parsed icon strings (e.g., "home-solid-rounded") for iconName
+        if (this.icon && isStr(this.icon) && !isSrc(this.icon)) {
+            const parsed = parseIconString(this.icon);
+            if (parsed.variant) {
+                this.iconName = parsed.name;
+                return;
+            }
+        }
         this.iconName = getName(this.name, this.icon);
     }
     render() {
@@ -133,19 +150,17 @@ export class Icon {
          * we have designated that arrows & chevrons should automatically flip (unless flip-rtl
          * is set to false) because "back" is left in ltr and right in rtl, and "forward" is the opposite
          */
-        const shouldAutoFlip = iconName
-            ? (iconName.includes('arrow') || iconName.includes('chevron')) && flipRtl !== false
-            : false;
+        const shouldAutoFlip = iconName ? (iconName.includes('arrow') || iconName.includes('chevron')) && flipRtl !== false : false;
         /**
          * if shouldBeFlippable is true, the icon should change direction when `dir` changes
          */
         const shouldBeFlippable = flipRtl || shouldAutoFlip;
-        return (h(Host, Object.assign({ key: 'c3c86b0aa965042f90353da7160f27ed66a6e37a', role: "img", class: {
+        return (h(Host, Object.assign({ key: 'cca86354e98f7bc83a4cfce895be2ef308ae6ba6', role: "img", class: {
                 'flip-rtl': shouldBeFlippable,
                 'icon-rtl': shouldBeFlippable && isRTL(el),
             } }, inheritedAttributes, { style: {
                 color: color !== null && color !== void 0 ? color : 'inherit',
-                fontSize: `${size}px`,
+                fontSize: parseCSSValue(size),
             } }), Build.isBrowser && this.svgContent ? (h("div", { class: {
                 'icon-inner': true,
             }, innerHTML: this.svgContent })) : (h("div", { class: "icon-inner" }))));
@@ -227,23 +242,29 @@ export class Icon {
                 "attribute": "variant",
                 "mutable": false,
                 "complexType": {
-                    "original": "'stroke' | 'solid' | 'duotone' | 'twotone' | 'bulk'",
+                    "original": "IconVariant",
                     "resolved": "\"bulk\" | \"duotone\" | \"solid\" | \"stroke\" | \"twotone\"",
-                    "references": {}
+                    "references": {
+                        "IconVariant": {
+                            "location": "local",
+                            "path": "/home/mahmoud/Documents/platform-code-cross-platform-storybook/packages/core/src/components/dga-icon/dga-icon.tsx",
+                            "id": "src/components/dga-icon/dga-icon.tsx::IconVariant"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "default",
-                            "text": "\"bulk\""
+                            "text": "\"stroke\""
                         }],
-                    "text": "The variant of the icon.\nAvailable options are: `\"stroke\"`, `\"solid\"`, `\"duotone\"`, `\"twotone\"`, `\"bulk\"`."
+                    "text": "The variant of the icon.\nSupported options are: `\"stroke\"` and `\"solid\"`.\n\nDeprecated options:\n- `\"twotone\"` \u2192 `\"stroke\"`\n- `\"duotone\"` \u2192 `\"solid\"`\n- `\"bulk\"` \u2192 `\"solid\"`\n\nDeprecated options: `\"duotone\"`, `\"twotone\"`, `\"bulk\"`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'bulk'"
+                "defaultValue": "'stroke'"
             },
             "type": {
                 "type": "string",
@@ -258,10 +279,13 @@ export class Icon {
                 "optional": true,
                 "docs": {
                     "tags": [{
+                            "name": "deprecated",
+                            "text": "This prop will be removed in a future release.\nThe type/style of the icon.\nAvailable options are: `\"rounded\"`, `\"sharp\"`, `\"standard\"`."
+                        }, {
                             "name": "default",
                             "text": "\"rounded\""
                         }],
-                    "text": "The type/style of the icon.\nAvailable options are: `\"rounded\"`, `\"sharp\"`, `\"standard\"`."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -307,12 +331,12 @@ export class Icon {
                 "reflect": false
             },
             "size": {
-                "type": "number",
+                "type": "any",
                 "attribute": "size",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "string | number",
+                    "resolved": "number | string",
                     "references": {}
                 },
                 "required": false,
@@ -391,9 +415,6 @@ export class Icon {
             }, {
                 "propName": "variant",
                 "methodName": "loadIcon"
-            }, {
-                "propName": "type",
-                "methodName": "loadIcon"
             }];
     }
 }

package/dist/collection/components/dga-icon/utils.js

@@ -1,5 +1,49 @@
 import { getAssetPath } from "@stencil/core";
 let CACHED_MAP;
+const VALID_VARIANTS = ['stroke', 'solid', 'duotone', 'twotone', 'bulk'];
+const DEPRECATED_VARIANT_MAP = {
+    twotone: 'stroke',
+    duotone: 'solid',
+    bulk: 'solid',
+};
+const normalizeVariant = (variant) => {
+    var _a;
+    if (!variant)
+        return 'stroke';
+    return (_a = DEPRECATED_VARIANT_MAP[variant]) !== null && _a !== void 0 ? _a : variant;
+};
+/**
+ * Parses an icon string in the format `[icon-name]-[variant]`
+ * Example: `1st-bracket-circle-solid` -> { name: '1st-bracket-circle', variant: 'solid' }
+ * Also handles legacy `[icon-name]-[variant]-[type]` strings by stripping the type.
+ * If no variant suffix is found, returns the original string as the name.
+ */
+export const parseIconString = (iconString) => {
+    if (!iconString || typeof iconString !== 'string') {
+        return { name: iconString };
+    }
+    const lowerStr = iconString.toLowerCase().trim();
+    const LEGACY_TYPES = ['rounded', 'sharp', 'standard'];
+    for (const variant of VALID_VARIANTS) {
+        for (const type of LEGACY_TYPES) {
+            const suffix = `-${variant}-${type}`;
+            if (lowerStr.endsWith(suffix)) {
+                const name = lowerStr.slice(0, -suffix.length);
+                if (name.length > 0) {
+                    return { name, variant };
+                }
+            }
+        }
+        const suffix = `-${variant}`;
+        if (lowerStr.endsWith(suffix)) {
+            const name = lowerStr.slice(0, -suffix.length);
+            if (name.length > 0) {
+                return { name, variant };
+            }
+        }
+    }
+    return { name: lowerStr };
+};
 export const getIconMap = () => {
     if (typeof window === 'undefined') {
         return new Map();
@@ -72,8 +116,23 @@ export const getUrl = (i) => {
     if (url) {
         return url;
     }
+    // Check if icon prop contains a full icon string with variant suffix
+    // e.g., "1st-bracket-circle-solid"
+    if (i.icon && isStr(i.icon) && !isSrc(i.icon)) {
+        const parsed = parseIconString(i.icon);
+        if (parsed.variant) {
+            const iconName = getName(parsed.name, undefined);
+            if (iconName) {
+                return getNamedUrlWithVariant(iconName, parsed.variant, i);
+            }
+        }
+    }
     url = getName(i.name, i.icon);
     if (url) {
+        const parsed = parseIconString(url);
+        if (parsed.variant) {
+            return getNamedUrlWithVariant(parsed.name, parsed.variant, i);
+        }
         return getNamedUrl(url, i);
     }
     if (i.icon) {
@@ -84,17 +143,36 @@ export const getUrl = (i) => {
     }
     return null;
 };
+/**
+ * Get the URL for a named icon using an explicit variant value.
+ * Used when parsing icon strings like "icon-name-variant"
+ */
+const getNamedUrlWithVariant = (iconName, variant, iconEl) => {
+    const normalized = normalizeVariant(variant);
+    const fullName = `${iconName}-${normalized}`;
+    const url = getIconMap().get(fullName) || getIconMap().get(iconName);
+    if (url) {
+        return url;
+    }
+    try {
+        // const assetPath = `assets/svg/${normalized}/${iconName}-${normalized}.svg`;
+        const assetPath = `assets/svg/${iconName}-${normalized}.svg`;
+        const result = getAssetPath(assetPath);
+        return result;
+    }
+    catch (e) {
+        console.log('e', e);
+        console.warn(`[GDS Icons Warning]: Could not load icon with name "${iconName}" (variant: ${normalized}). Ensure that the icon is registered using addIcons or that the icon SVG data is passed directly to the icon component.`, iconEl);
+    }
+};
 const getNamedUrl = (iconName, iconEl) => {
     const url = getIconMap().get(iconName);
     if (url) {
         return url;
     }
     try {
-        // Get variant and type from the icon element, with defaults
-        const variant = iconEl.variant || 'bulk';
-        const type = iconEl.type || 'rounded';
-        // Construct path with variant-type folder structure
-        const assetPath = `assets/svg/${variant}-${type}/${iconName}-${variant}-${type}.svg`;
+        const variant = normalizeVariant(iconEl.variant);
+        const assetPath = `assets/svg/${variant}/${iconName}-${variant}.svg`;
         const result = getAssetPath(assetPath);
         return result;
     }

package/dist/collection/components/dga-list/dga-list-item.js

@@ -25,7 +25,7 @@ export class DgaListItem {
         return null;
     }
     render() {
-        return (h("li", { key: 'ea563aa2b52b600800ce2991e055b2db73344cf4', class: this.getListClass() }, this.type === 'with-icon' && (h("span", { key: '23548209d319ae5791f14da2b56068a3775b137f', class: "list-item__icon" }, h("dga-icon", { key: 'ecf93dfc8a40471abe01c4e3f78229ea09dd8a82', icon: this.icon, size: 16 }))), this.renderMarker(), h("span", { key: '8ef34fbd75174cb7ba82c84835cb3441b14d33b6', class: "list-item__text" }, this.itemText)));
+        return (h("li", { key: '095ccba8b5d487a7e9ed11cb6635e08ed703391a', class: this.getListClass() }, this.type === 'with-icon' && (h("span", { key: '5e04ec4045647289dd314f49c668f27aa2266d5e', class: "list-item__icon" }, h("dga-icon", { key: '9979d04aea2fca3d11f7737bb43ecf563adf00d9', icon: this.icon, size: 16 }))), this.renderMarker(), h("span", { key: '3bb6fe07dc6087b7f8dcc5f86aa5d9910ef0ab3f', class: "list-item__text" }, this.itemText)));
     }
     static get is() { return "dga-list-item"; }
     static get originalStyleUrls() {
@@ -50,7 +50,7 @@ export class DgaListItem {
                     "references": {
                         "ListItemProps": {
                             "location": "local",
-                            "path": "/Users/mohamedaboelezz/projects/Azm-X/platform-code-cross-platform-storybook/packages/core/src/components/dga-list/dga-list-item.tsx",
+                            "path": "/home/mahmoud/Documents/platform-code-cross-platform-storybook/packages/core/src/components/dga-list/dga-list-item.tsx",
                             "id": "src/components/dga-list/dga-list-item.tsx::ListItemProps"
                         }
                     }
@@ -75,7 +75,7 @@ export class DgaListItem {
                     "references": {
                         "ListItemProps": {
                             "location": "local",
-                            "path": "/Users/mohamedaboelezz/projects/Azm-X/platform-code-cross-platform-storybook/packages/core/src/components/dga-list/dga-list-item.tsx",
+                            "path": "/home/mahmoud/Documents/platform-code-cross-platform-storybook/packages/core/src/components/dga-list/dga-list-item.tsx",
                             "id": "src/components/dga-list/dga-list-item.tsx::ListItemProps"
                         }
                     }

package/dist/collection/components/dga-list/dga-list-v2.js

@@ -25,7 +25,7 @@ export class DgaListV2 {
     //   }
     render() {
         const Tag = this.type === 'ordered' ? 'ol' : 'ul';
-        return (h(Tag, { key: 'ff99aa5ace5c3a92bbff8d30fc3c7820a32b66de', class: `list list--${this.type} list--${this.color}` }, h("slot", { key: '2280745fe712b4b00ce5f459615848b4aa3ef9c4' })));
+        return (h(Tag, { key: 'c33ca9f7659546ad35276b507e11dc40260e12f3', class: `list list--${this.type} list--${this.color}` }, h("slot", { key: 'ed5c5c048d7afaf5c3d467343418ffbf6890eb02' })));
     }
     static get is() { return "dga-list-v2"; }
     static get originalStyleUrls() {
@@ -110,7 +110,7 @@ export class DgaListV2 {
                     "references": {
                         "ListItem": {
                             "location": "local",
-                            "path": "/Users/mohamedaboelezz/projects/Azm-X/platform-code-cross-platform-storybook/packages/core/src/components/dga-list/dga-list-v2.tsx",
+                            "path": "/home/mahmoud/Documents/platform-code-cross-platform-storybook/packages/core/src/components/dga-list/dga-list-v2.tsx",
                             "id": "src/components/dga-list/dga-list-v2.tsx::ListItem"
                         }
                     }

package/dist/collection/components/dga-loading/dga-loading.js

@@ -38,7 +38,7 @@ export class DgaLoading {
     }
     render() {
         const classes = `dga-loading dga-loading--${this.size} dga-loading--${this.variant} ${this.extraClass ? this.extraClass : ''}`;
-        return (h(Host, { key: 'aec3305a5289c4f5a2661e5ac024f9d3dba1ce18', id: this.componentId, style: this.rootStyles }, h("div", { key: 'f26f96d4e528b58281080ba7b56c78acd4ff8420', class: classes }, h("div", { key: 'a1aa4321be52b29c87ea64a4a5eb0d7156a6cb65', class: "dga-loading__circle" }))));
+        return (h(Host, { key: 'a26a8c3c5407c0af5b128d7f830af590d3c65a03', id: this.componentId, style: this.rootStyles }, h("div", { key: '2bf09fde0a2b05205edb773af7b95dfbcff0b20b', class: classes }, h("div", { key: 'ac65ba6f0cc4118f3a367825e30d0082ffde53f3', class: "dga-loading__circle" }))));
     }
     static get is() { return "dga-loading"; }
     static get encapsulation() { return "shadow"; }
@@ -64,7 +64,7 @@ export class DgaLoading {
                     "references": {
                         "LoadingSize": {
                             "location": "local",
-                            "path": "/Users/mohamedaboelezz/projects/Azm-X/platform-code-cross-platform-storybook/packages/core/src/components/dga-loading/dga-loading.tsx",
+                            "path": "/home/mahmoud/Documents/platform-code-cross-platform-storybook/packages/core/src/components/dga-loading/dga-loading.tsx",
                             "id": "src/components/dga-loading/dga-loading.tsx::LoadingSize"
                         }
                     }
@@ -90,7 +90,7 @@ export class DgaLoading {
                     "references": {
                         "LoadingStyle": {
                             "location": "local",
-                            "path": "/Users/mohamedaboelezz/projects/Azm-X/platform-code-cross-platform-storybook/packages/core/src/components/dga-loading/dga-loading.tsx",
+                            "path": "/home/mahmoud/Documents/platform-code-cross-platform-storybook/packages/core/src/components/dga-loading/dga-loading.tsx",
                             "id": "src/components/dga-loading/dga-loading.tsx::LoadingStyle"
                         }
                     }

package/dist/collection/components/dga-metric/dga-metric-chart-v2.js

@@ -216,7 +216,7 @@ export class DgaMetricChartV2 {
     }
     render() {
         const { x: markerX, y: markerY } = this.currentMarkerPos;
-        return (h("svg", { key: '8441c2e5f5e05b71aa9219772be966ae538abb99', width: this.width, height: this.height, viewBox: "0 0 130 66", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("defs", { key: '2ef4cf4b02a690980a548735a632eee5d317f113' }, h("linearGradient", { key: '3cf5eb7dedd346de4b6663f0f34a871fd31a66b8', id: "gradientMask", x1: "64", y1: "0", x2: "64", y2: "64", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '89d831bf8353aeb7fc62ec8735226779853d541c' }), h("stop", { key: 'bd072fe5eddf721c9c543fcdcb8b9c5afe5b8c05', offset: "1", "stop-opacity": "0" })), h("mask", { key: '73f36217b608723995fd651589dbfb66f1d90f89', id: "chartMask", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "1", y: "1", width: "128", height: "64" }, h("rect", { key: '0984f7e8941af7ed10fe674cddfea16b0494ed4c', width: "128", height: "64", transform: "translate(1 1)", fill: "url(#gradientMask)" }))), h("g", { key: '7e7ccdb3cb39833368570c48bd52643f0f6d3a51', mask: "url(#chartMask)" }, h("path", { key: 'c85d9a84c13fa6b0e07e17ed7b00521dfc7e2010', opacity: "0.2", d: this.areaD, fill: this.fillColor })), h("path", { key: '78c1fee3e019258c5774c83f8d9e076534af7cd4', d: this.pathD, stroke: this.strokeColor, "stroke-width": this.strokeWidth, "stroke-linecap": "round", "stroke-linejoin": "round", fill: "none" }), this.showMarker && (h("g", { key: '7f5dfcd69728523b3abcec8fc3d847f5acddc95c', transform: `translate(${markerX}, ${markerY})` }, h("g", { key: 'ce18730ff77a6e5dc1c7fc8d8572fd7a87e1a449', opacity: "0.2" }, h("rect", { key: '938728b792c35b22a127080a94593669d063b1d1', width: "20", height: "20", rx: "10", stroke: this.strokeColor, "stroke-width": this.strokeWidth })), h("rect", { key: 'd8a9dc11b706ff001739a4950874e02db13f14a3', x: "5", y: "5", width: "10", height: "10", rx: "5", fill: "white" }), h("rect", { key: 'f3ea78180ae863f4108cab1f9e70571b8d3d0208', x: "5", y: "5", width: "10", height: "10", rx: "5", stroke: this.strokeColor, "stroke-width": this.strokeWidth })))));
+        return (h("svg", { key: '21cb7639e1bb84c5a07cd7228503c6db8b88960c', width: this.width, height: this.height, viewBox: "0 0 130 66", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("defs", { key: '5fbdc79365affcc8eff80dedd4a5a6a2e03001f8' }, h("linearGradient", { key: 'cacaafbb7da16fdbc8e23f15d0f089210ce9573f', id: "gradientMask", x1: "64", y1: "0", x2: "64", y2: "64", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '50db3958dd54b513043360dfd29baa76a157bd50' }), h("stop", { key: '8f99ff9c56ccc69cb24689ea464311cf3fc9d5ef', offset: "1", "stop-opacity": "0" })), h("mask", { key: '6cab4fc69cd585ed810ce6e7c79531f37ce32ea9', id: "chartMask", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "1", y: "1", width: "128", height: "64" }, h("rect", { key: '84c771ca83db1990d02db3c1604eab70619fd380', width: "128", height: "64", transform: "translate(1 1)", fill: "url(#gradientMask)" }))), h("g", { key: '5b83567dfc8cff62ba9610fbd6088847991dc11a', mask: "url(#chartMask)" }, h("path", { key: 'ef3226d18157e6d3551981bc2f28d0e373297109', opacity: "0.2", d: this.areaD, fill: this.fillColor })), h("path", { key: '9751032b599180fb3350879dbccacedd35cde80a', d: this.pathD, stroke: this.strokeColor, "stroke-width": this.strokeWidth, "stroke-linecap": "round", "stroke-linejoin": "round", fill: "none" }), this.showMarker && (h("g", { key: 'a0a87660359ed63d98a5c187a263563d06db5f1a', transform: `translate(${markerX}, ${markerY})` }, h("g", { key: 'aba29f5af07db2022089691c10b509003664e2da', opacity: "0.2" }, h("rect", { key: '60d64614d2fe846eb57cff6c7af88e77e8dc2da7', width: "20", height: "20", rx: "10", stroke: this.strokeColor, "stroke-width": this.strokeWidth })), h("rect", { key: '6b0269e79dac44fab9456f89bc4bb8f5493de5b0', x: "5", y: "5", width: "10", height: "10", rx: "5", fill: "white" }), h("rect", { key: 'd3f2b7ab612f3554b51ada107af3966fd426d1c8', x: "5", y: "5", width: "10", height: "10", rx: "5", stroke: this.strokeColor, "stroke-width": this.strokeWidth })))));
     }
     static get is() { return "dga-metric-chart-v2"; }
     static get encapsulation() { return "shadow"; }
@@ -332,7 +332,7 @@ export class DgaMetricChartV2 {
                     "references": {
                         "DataPoint": {
                             "location": "local",
-                            "path": "/Users/mohamedaboelezz/projects/Azm-X/platform-code-cross-platform-storybook/packages/core/src/components/dga-metric/dga-metric-chart-v2.tsx",
+                            "path": "/home/mahmoud/Documents/platform-code-cross-platform-storybook/packages/core/src/components/dga-metric/dga-metric-chart-v2.tsx",
                             "id": "src/components/dga-metric/dga-metric-chart-v2.tsx::DataPoint"
                         }
                     }
@@ -377,7 +377,7 @@ export class DgaMetricChartV2 {
                     "references": {
                         "MarkerPosition": {
                             "location": "local",
-                            "path": "/Users/mohamedaboelezz/projects/Azm-X/platform-code-cross-platform-storybook/packages/core/src/components/dga-metric/dga-metric-chart-v2.tsx",
+                            "path": "/home/mahmoud/Documents/platform-code-cross-platform-storybook/packages/core/src/components/dga-metric/dga-metric-chart-v2.tsx",
                             "id": "src/components/dga-metric/dga-metric-chart-v2.tsx::MarkerPosition"
                         }
                     }

package/dist/collection/components/dga-metric/dga-metric.js

@@ -30,15 +30,15 @@ export class DgaMetric {
         };
     }
     render() {
-        return (h("div", { key: '314cdf92f905dbf8a3ae6b63dc9fdf0e493542c3', class: `dga-metric`, "data-chart-size": this.Style }, h("div", { key: '200315a62f15f2aa0b4fb9f192e69d5cd47ad21c', class: "dga-metric__head" }, h("div", { key: 'e3b34506cdd7400be7a46c5194c070f42710125a', class: "dga-metric__head-content" }, this.showFeaturedIcon && h("div", { key: '3068d2addfa736f01ec2d50df4a4e3293a38707a', class: "featured-icon featured-icon--light-brand featured-icon--circle featured-icon--sm" }, this.featuredIcon), this.label && h("span", { key: 'bda97e35abad96b0b1d7a8dc1e3f6fe97f3e6fad', class: "dga-metric__head-content-text" }, this.label)), this.showMoreButton && (h("dga-button-v2", { key: '7b83a8aeef2b452b115e98b4b345852bdb6bd200', variant: "subtle", iconOnly: true, leadIcon: true, leadIconProps: {
+        return (h("div", { key: '7eee68aad1ede7c9a1ddafc3ed4cf040c72ec505', class: `dga-metric`, "data-chart-size": this.Style }, h("div", { key: '708b92c50a072e901bf51d3be917d99d35a06d51', class: "dga-metric__head" }, h("div", { key: '126c152cc0a020b3df468d0008129b3be07670e0', class: "dga-metric__head-content" }, this.showFeaturedIcon && h("div", { key: '34cee16589308772e476d1d43eec92a6cd0eb94b', class: "featured-icon featured-icon--light-brand featured-icon--circle featured-icon--sm" }, this.featuredIcon), this.label && h("span", { key: '4da9317c1d74d063679f2332b746dfbb7bf1e5e9', class: "dga-metric__head-content-text" }, this.label)), this.showMoreButton && (h("dga-button-v2", { key: '88400e2fd8ee4c3bd615a7cf6ddf52f217620f97', variant: "subtle", iconOnly: true, leadIcon: true, leadIconProps: {
                 name: 'more-vertical',
                 variant: 'stroke',
                 type: 'rounded',
-            }, onClick: this.onExpandAction }))), h("div", { key: 'f3b2f6290453a9b4ce1d3f399e7609a768af5383', class: "dga-metric__body" }, h("div", { key: '503084c257592859c1249a77460462f2f689f1eb', class: "dga-metric__content" }, h("h3", { key: '7f26e13d786a042e2214dc9caaf7e41c915a3429', class: "dga-metric__content-percentage" }, this.percentage), this.showInfo && (h("div", { key: 'e6b06e62dd0ad6bfdfdd5455417fa95b03b2d0d7', class: "dga-metric__content-change", "data-change-trend": this.changeProps.trend }, h("span", { key: 'd8d1e0ba9f73f2640aa414ac23db3871756275cd', class: "dga-metric__content-change-icon" }, h("dga-icon", { key: '565f756fc4f6f3d2d2907b4fc3ada1c76016da09', icon: this.changeIcons[this.changeProps.type][this.changeProps.trend], type: "rounded", variant: "stroke", size: 24 })), h("span", { key: 'd94c1b1831454cb0295715a522c1419909a614f3', class: "dga-metric__content-change-value" }, Math.abs(100), "%"), h("span", { key: 'ea76897604bd61574f635b872275f68f9724ff3f', class: "dga-metric__content-change-period" }, "vs last month")))), this.showChart && (h("div", { key: 'e64a526ba47e91ace2a36aa58a86f84f75bb9ac1', class: "dga-metric__chart" }, h("dga-metric-chart", Object.assign({ key: '7e85020d66426de8a03be8e7d8e07371b7fdde76' }, this.chartProps, { size: this.Style === 'small-chart' ? 'sm' : 'lg' }))))), this.showActions && (h(Fragment, { key: '50d85ae9db0e4e76b1cb4fcb220aadb511523a2a' }, h("div", { key: '9d0cefe611c0d7c150cfbec676129cfa6d1c1681', class: "dga-metric__divider" }), h("div", { key: 'b5d42a5f863ff14702cb65786e290de146a4e551', class: "dga-metric__actions" }, this.showSecondaryAction && (h("dga-button-v2", { key: '718e9ad0e6c9490acdd2037859903dd7fe7b793b', variant: "subtle", iconOnly: true, leadIcon: true, leadIconProps: {
+            }, onClick: this.onExpandAction }))), h("div", { key: 'a9143e06f761f06c0ff75019c617eaf096c3b6da', class: "dga-metric__body" }, h("div", { key: '260b6b154e01c81f992632a9e581044bdcccbea3', class: "dga-metric__content" }, h("h3", { key: 'f7770fdc054acbb94b6e4e9a20cdf5bdb7877ee8', class: "dga-metric__content-percentage" }, this.percentage), this.showInfo && (h("div", { key: '51cc9d19b3a29b437e139444b296bad468f3934a', class: "dga-metric__content-change", "data-change-trend": this.changeProps.trend }, h("span", { key: '05f05622179af232a4ec0d199ef21a4a89c80f6a', class: "dga-metric__content-change-icon" }, h("dga-icon", { key: 'e5c1831b21cae1af1beeb4322ed315acf89be811', icon: this.changeIcons[this.changeProps.type][this.changeProps.trend], type: "rounded", variant: "stroke", size: 24 })), h("span", { key: '547dce2ba0d90d06d814355c0cdecd4d6f06e852', class: "dga-metric__content-change-value" }, Math.abs(100), "%"), h("span", { key: '57e25c115490dcc68dfe93575641528813522956', class: "dga-metric__content-change-period" }, "vs last month")))), this.showChart && (h("div", { key: '0398a82e6fb1c86f7fddab6d1f35721d4639efad', class: "dga-metric__chart" }, h("dga-metric-chart", Object.assign({ key: '508857cbc2f3ddf9cd84840d8b65d25c24473aa6' }, this.chartProps, { size: this.Style === 'small-chart' ? 'sm' : 'lg' }))))), this.showActions && (h(Fragment, { key: '1c6a90eb89cdd7b4ab814d64deee3945f10f3869' }, h("div", { key: '6edf347e501fa6dfb3a9410b0a2979a35fc213fa', class: "dga-metric__divider" }), h("div", { key: 'eca66fa8fc10cecedca2f87cead73036bb8549c9', class: "dga-metric__actions" }, this.showSecondaryAction && (h("dga-button-v2", { key: '43c65479b3f80d9e93d9dfaccbd65e482774388a', variant: "subtle", iconOnly: true, leadIcon: true, leadIconProps: {
                 name: 'settings-02',
                 variant: 'stroke',
                 type: 'rounded',
-            }, onClick: this.onSecondaryAction })), h("dga-button-v2", { key: '19627305bc5456f4e9b9e772e2810fb5871101cb', variant: "secondary-outline", class: "dga-metric__actions--primary", label: "View Report", onClick: this.onPrimaryAction }))))));
+            }, onClick: this.onSecondaryAction })), h("dga-button-v2", { key: '8cf205718bb0e48edbcd2bd260ed5a098f02812c', variant: "secondary-outline", class: "dga-metric__actions--primary", label: "View Report", onClick: this.onPrimaryAction }))))));
     }
     static get is() { return "dga-metric"; }
     static get originalStyleUrls() {
@@ -287,7 +287,7 @@ export class DgaMetric {
                     "references": {
                         "IChartProps": {
                             "location": "local",
-                            "path": "/Users/mohamedaboelezz/projects/Azm-X/platform-code-cross-platform-storybook/packages/core/src/components/dga-metric/dga-metric.tsx",
+                            "path": "/home/mahmoud/Documents/platform-code-cross-platform-storybook/packages/core/src/components/dga-metric/dga-metric.tsx",
                             "id": "src/components/dga-metric/dga-metric.tsx::IChartProps"
                         }
                     }
@@ -311,7 +311,7 @@ export class DgaMetric {
                     "references": {
                         "ITrend": {
                             "location": "local",
-                            "path": "/Users/mohamedaboelezz/projects/Azm-X/platform-code-cross-platform-storybook/packages/core/src/components/dga-metric/dga-metric.tsx",
+                            "path": "/home/mahmoud/Documents/platform-code-cross-platform-storybook/packages/core/src/components/dga-metric/dga-metric.tsx",
                             "id": "src/components/dga-metric/dga-metric.tsx::ITrend"
                         }
                     }

package/dist/collection/components/dga-metric-v2/dga-metric-v2.js

@@ -30,15 +30,15 @@ export class DgaMetric {
         };
     }
     render() {
-        return (h("div", { key: '575df91070ec3bb6fbee5528aff23f248d40c5b9', class: `dga-metric`, "data-chart-size": this.Style }, h("div", { key: 'a4ac60e3834f567449ad33430a74406c35244bcd', class: "dga-metric__head" }, h("div", { key: 'b370e1b3de2d28e6d070898778a2dbb098ae868e', class: "dga-metric__head-content" }, this.showFeaturedIcon && h("div", { key: 'c04b9d81254544f5411ac91f43f553e9c73f776b', class: "featured-icon featured-icon--light-brand featured-icon--circle featured-icon--sm" }, this.featuredIcon), this.label && h("span", { key: 'c8da1099582546dc29e45401d47cddd032c32f5d', class: "dga-metric__head-content-text" }, this.label)), this.showMoreButton && (h("dga-button-v2", { key: '09287f5aacd513ca6475a1b4edc4065166553855', variant: "subtle", iconOnly: true, leadIcon: true, leadIconProps: {
+        return (h("div", { key: 'd14ab1787c8c118ea71175cc5ecbc72a33c5371d', class: `dga-metric`, "data-chart-size": this.Style }, h("div", { key: 'b82347af7ba629ff4936d949756d24212be5e7e0', class: "dga-metric__head" }, h("div", { key: 'd18c5422258a85d62937f9d18c5e9d1880a736d7', class: "dga-metric__head-content" }, this.showFeaturedIcon && h("div", { key: '0a66bc6b5a66446c8a28c9433974a37125602b63', class: "featured-icon featured-icon--light-brand featured-icon--circle featured-icon--sm" }, this.featuredIcon), this.label && h("span", { key: '7979f1e2dd404456399d9226b4dfac936a1e000e', class: "dga-metric__head-content-text" }, this.label)), this.showMoreButton && (h("dga-button-v2", { key: '5d72b1595fc8b25cd571a65efe65bf2c596caa0d', variant: "subtle", iconOnly: true, leadIcon: true, leadIconProps: {
                 name: 'more-vertical',
                 variant: 'stroke',
                 type: 'rounded',
-            }, onClick: this.onExpandAction }))), h("div", { key: '140c4a033c4bc8765826d1b417c5e13150f2380b', class: "dga-metric__body" }, h("div", { key: '18069a890bdb8b9a487e48c254765f448d5f1c5e', class: "dga-metric__content" }, h("h3", { key: 'd4492075d8048b54c7a18e87a55301452d097fa9', class: "dga-metric__content-percentage" }, this.percentage), this.showInfo && (h("div", { key: 'b09735ba9a432b82ea94b779fdcd8ed79884dbbb', class: "dga-metric__content-change", "data-change-trend": this.changeProps.trend }, h("span", { key: 'd3f7e9aac24725765bb67118913ac5ed961a9fef', class: "dga-metric__content-change-icon" }, h("dga-icon", { key: '7224580232a91864477875c70c6fc9edc2964288', name: this.changeIcons[this.changeProps.type][this.changeProps.trend], type: "rounded", variant: "stroke", size: 24 })), h("span", { key: 'c4beafe9a72bac2d63d035a4296bfca2d4060251', class: "dga-metric__content-change-value" }, Math.abs(100), "%"), h("span", { key: 'bb71f004fed299027cb7b997004822e366de98e9', class: "dga-metric__content-change-period" }, "vs last month")))), this.showChart && (h("div", { key: 'ff309d5a23565858d6a0a9dfb932fb24fe387286', class: "dga-metric__chart" }, h("dga-metric-chart", Object.assign({ key: 'e6b5eb8e879c61119e31d755a84c32772d3203fa' }, this.chartProps, { size: this.Style === 'small-chart' ? 'sm' : 'lg' }))))), this.showActions && (h(Fragment, { key: '09c619a5301ae6d3cb2cd4c3ec6fe72cdee45257' }, h("div", { key: '1bf127302bcafd84c5c1ded0b2739f87bca53ab4', class: "dga-metric__divider" }), h("div", { key: '33333c471391db91a903cac1e018524288ee3450', class: "dga-metric__actions" }, this.showSecondaryAction && (h("dga-button-v2", { key: 'df34837408a2d4601468fb3f7508d05dba0fe2cb', variant: "subtle", iconOnly: true, leadIcon: true, leadIconProps: {
+            }, onClick: this.onExpandAction }))), h("div", { key: 'c392fe2d83c260be2297fa662f24169804e7fc10', class: "dga-metric__body" }, h("div", { key: '1fda8b3c6f085bdcdf73d7dac44056ac0dbda5de', class: "dga-metric__content" }, h("h3", { key: 'e429d5b66b3d61f650811fe6ca3eefdb457d83fa', class: "dga-metric__content-percentage" }, this.percentage), this.showInfo && (h("div", { key: 'fd739650accd1444e38f7af40f1d7a22c19375df', class: "dga-metric__content-change", "data-change-trend": this.changeProps.trend }, h("span", { key: '8b5807df922d0905e9a918f8d8bbdea8119383c6', class: "dga-metric__content-change-icon" }, h("dga-icon", { key: '34ac0a4daa85d46244fbd239fe3ca4a08560e6c4', name: this.changeIcons[this.changeProps.type][this.changeProps.trend], type: "rounded", variant: "stroke", size: 24 })), h("span", { key: '4c8c58105a9a28e74992a13adbd2ba62f8019a26', class: "dga-metric__content-change-value" }, Math.abs(100), "%"), h("span", { key: '846e6c2126b331e9fc5235fa084095194c4cf845', class: "dga-metric__content-change-period" }, "vs last month")))), this.showChart && (h("div", { key: '71f10dfc21154d2acc0a2121be627c16c0bae7b0', class: "dga-metric__chart" }, h("dga-metric-chart", Object.assign({ key: '812b4ddcff8bae020fd7ccbefd84df25aeb14472' }, this.chartProps, { size: this.Style === 'small-chart' ? 'sm' : 'lg' }))))), this.showActions && (h(Fragment, { key: '44c5913cf09a3502fe4ae02a5ab4ff31fb7a0144' }, h("div", { key: 'f620bc446036348e32fcb9fab98ba25cf91ed840', class: "dga-metric__divider" }), h("div", { key: '8c31b9c385abae3979bfd016b1871e708fac59ca', class: "dga-metric__actions" }, this.showSecondaryAction && (h("dga-button-v2", { key: '52cae7eb9840ba93292119230e35e5998eb7c8d7', variant: "subtle", iconOnly: true, leadIcon: true, leadIconProps: {
                 name: 'settings-02',
                 variant: 'stroke',
                 type: 'rounded',
-            }, onClick: this.onSecondaryAction })), h("dga-button-v2", { key: '474382eaa11be141a05c9b5cf664d6054a9b56ca', variant: "secondary-outline", class: "dga-metric__actions--primary", label: "View Report", onClick: this.onPrimaryAction }))))));
+            }, onClick: this.onSecondaryAction })), h("dga-button-v2", { key: 'c562672015795df55976db881eeea6738c98a40b', variant: "secondary-outline", class: "dga-metric__actions--primary", label: "View Report", onClick: this.onPrimaryAction }))))));
     }
     static get is() { return "dga-metric-v2"; }
     static get originalStyleUrls() {
@@ -287,7 +287,7 @@ export class DgaMetric {
                     "references": {
                         "IChartProps": {
                             "location": "local",
-                            "path": "/Users/mohamedaboelezz/projects/Azm-X/platform-code-cross-platform-storybook/packages/core/src/components/dga-metric-v2/dga-metric-v2.tsx",
+                            "path": "/home/mahmoud/Documents/platform-code-cross-platform-storybook/packages/core/src/components/dga-metric-v2/dga-metric-v2.tsx",
                             "id": "src/components/dga-metric-v2/dga-metric-v2.tsx::IChartProps"
                         }
                     }
@@ -311,7 +311,7 @@ export class DgaMetric {
                     "references": {
                         "ITrend": {
                             "location": "local",
-                            "path": "/Users/mohamedaboelezz/projects/Azm-X/platform-code-cross-platform-storybook/packages/core/src/components/dga-metric-v2/dga-metric-v2.tsx",
+                            "path": "/home/mahmoud/Documents/platform-code-cross-platform-storybook/packages/core/src/components/dga-metric-v2/dga-metric-v2.tsx",
                             "id": "src/components/dga-metric-v2/dga-metric-v2.tsx::ITrend"
                         }
                     }

package/dist/collection/components/dga-notification/dga-notification.js

@@ -1,36 +1,17 @@
 import { Host, h } from "@stencil/core";
 import { SxStyleManager } from "../../utils/sx-style-manager";
+import { checkmarkCircle02SolidSharpIcon, informationCircleSolidSharpIcon, alert02SolidSharpIcon, alertCircleSolidSharpIcon, multiplicationSignStrokeRoundedIcon } from "../../assets/icons/index";
 export class DgaNotification {
     constructor() {
         this.icon = true;
         this.link = false;
         this.dismissable = false;
         this.icons = {
-            success: {
-                name: "checkmark-circle-02",
-                variant: "solid",
-                type: "sharp",
-            },
-            info: {
-                name: "information-circle",
-                variant: "solid",
-                type: "sharp",
-            },
-            neutral: {
-                name: "information-circle",
-                variant: "solid",
-                type: "sharp",
-            },
-            warning: {
-                name: "alert-02",
-                variant: "solid",
-                type: "sharp",
-            },
-            critical: {
-                name: "alert-circle",
-                variant: "solid",
-                type: "sharp",
-            },
+            success: checkmarkCircle02SolidSharpIcon,
+            info: informationCircleSolidSharpIcon,
+            neutral: informationCircleSolidSharpIcon,
+            warning: alert02SolidSharpIcon,
+            critical: alertCircleSolidSharpIcon,
         };
         // Generate a unique ID if not provided
         this.componentId = `dga-notification-${Math.random().toString(36).substring(2, 9)}`;
@@ -65,11 +46,11 @@ export class DgaNotification {
         (_a = this.sxStyleManager) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
     render() {
-        return (h(Host, { key: '579d2614e65103439af62032332c6a2e208f03c6', id: this.componentId, style: this.rootStyles }, h("div", { key: '9aacdd487c273ccf9acb7bf8f9b20ad32dad0636', class: `notification notification--${this.variant}`, role: "alert" }, h("div", { key: '2fb5e89d0abebe8028233bd0bd1a6d60a2c0b37b', class: "notification__content" }, this.icon && h("div", { key: 'a3e728c59d97c219cd3fbd5315bc80db953d6071', class: "notification__icon" }, h("dga-icon", { key: '1fde62052ad50ccb8d29062791c9b41b9e00ecc5', name: this.icons[this.variant].name, variant: this.icons[this.variant].variant, type: this.icons[this.variant].type, size: 24 })), this.leadText && h("strong", { key: '99bf3bcc33b5467941c42ed7bd6d54b8be329b65', class: "notification__lead-text" }, this.leadText, ": "), h("p", { key: 'a5ccee40878e673a863dab578484ec1554caf4dd' }, this.content), this.link && (h("a", { key: '2a99612f46242e3b34ea5b4d61a7e8f5818318e0', onClick: () => {
+        return (h(Host, { key: 'c10fe5cf1d1b2b8e34f95c9628c93fc54ed08a63', id: this.componentId, style: this.rootStyles }, h("div", { key: '3781e8e6ee2e86b48eee4ff1499dcfb750ff53f2', class: `notification notification--${this.variant}`, role: "alert" }, h("div", { key: '1a54e54e0d597ec96a7dc1baa06e583eedf31256', class: "notification__content" }, this.icon && h("div", { key: '269d9828eab5dce7a867e93e99c46f559fb0bdee', class: "notification__icon" }, h("dga-icon", { key: '214fbd86c993ea9a7ff16b0f124b7c2a18bf26ba', icon: this.icons[this.variant], size: 24 })), this.leadText && h("strong", { key: 'd2649d7873d4457ecb5e21234cc0791f79a0aa37', class: "notification__lead-text" }, this.leadText, ": "), h("p", { key: '5018fc98e3384415f9e1872ec8920762fa2dca39' }, this.content), this.link && (h("a", { key: '82afcee551bb6768f51d7a6e990b59e40e5ce4e0', onClick: () => {
                 this.navigateTo && this.navigateTo(this.setNavigateTo);
-            }, class: "notification__link link link--md link--neutral link--inline" }, h("span", { key: '8106eae1476e9912aabdb45f773c195e642d5e86', class: "link__label" }, this.textLink)))), this.dismissable && (h("div", { key: 'ddd12f7c22c4079add4f1b744f102f2c4938c055', class: "notification__dismiss" }, h("button", { key: '4ce90062a91a8103cbaf573a6dc464ef6df9aa79', class: "dga-btn dga-btn--close dga-btn--icon dga-btn--md", onClick: () => {
+            }, class: "notification__link link link--md link--neutral link--inline" }, h("span", { key: '777c91d4e3d8d8c0a94c701c2a4a199d98482c77', class: "link__label" }, this.textLink)))), this.dismissable && (h("div", { key: '367e85962266e5db6997eabc0cb8a57d796a687b', class: "notification__dismiss" }, h("button", { key: 'e8ffaa3a182a8d2527dface4a0d07e6d78c3abe2', class: "dga-btn dga-btn--close dga-btn--icon dga-btn--md", onClick: () => {
                 this.dismmissed && this.dismmissed();
-            } }, h("span", { key: '2ed65757bae2ea164ac58aa61dd1038c78797f2a', class: "dga-btn-icon" }, h("dga-icon", { key: '37247fcf010d8f4f876b4e4f8d55ca4402576625', name: "multiplication-sign", variant: 'stroke', size: 20 }))))))));
+            } }, h("span", { key: '4fab62e36b1d881c1e03a8556f2bd3eb676c27fa', class: "dga-btn-icon" }, h("dga-icon", { key: 'f4734ac6295ec9bf5aa4d3c7e13c72bdb3a0ec50', icon: multiplicationSignStrokeRoundedIcon, size: 20 }))))))));
     }
     static get is() { return "dga-notification"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dga-quote/dga-quote.js

@@ -12,6 +12,7 @@ export class DgaQuote {
         this.authorName = '';
         this.authorDescription = '';
         this.showAvatar = false;
+        this.avatarSrc = '';
     }
     componentWillLoad() {
         this.sxHandler = new SxHandler(this.el, 'dga-slider');
@@ -26,7 +27,7 @@ export class DgaQuote {
         this.sxHandler.cleanup();
     }
     render() {
-        return (h("div", { key: '646789efc2ad38b7808ca82592939a6051f19c9f', class: { 'dga-quote': true, 'dga-quote--white-bg': this.whiteBackground } }, h("div", { key: '1837a07a10c5677cdd0c5c219bf38049946bc21d', class: "dga-quote__body" }, h("dga-flex", { key: '75ba955f74da6e195b1aa634d6b946d6fc07993f', spacing: 9 }, h("span", { key: '7e0a9caba28a5d9c21d852061eb9dcd1870d15dd', class: "quote-icon" }, "\u201D"), h("dga-flex", { key: '40644c053b578527da6903a1bdbb304cded58468', direction: "column", spacing: 16 }, this.showQuoteTitle && h("h2", { key: '92ef841ea8f0a55459d6fcc7fa40d46ffa996b3f', class: "dga-quote__body-title" }, this.quoteTitle), this.showQuoteDescription && h("p", { key: '52a97893f283ecdcc78c4648b234026d12f8c63a', class: "dga-quote__body-desc" }, this.quoteDescription)))), this.showAuthorDetails && (h("div", { key: '5083d38d5b396433df0435ae8fc7ad41d7edf580', class: "dga-quote__auther-details" }, h("dga-flex", { key: '8e73fea44dcb5d2a6e5c1cd79684b7d1d03dedf7', direction: "row", spacing: 16, align: "center" }, this.showAvatar && h("dga-avatar", { key: '9f0131bf583ad16c96c219b7d86f5d2b73c5cdfd', size: 80, type: "image", border: false }), h("dga-flex", { key: '32d24e14df4ca57a1bd1daa85b7f1648392408b0', direction: "column", spacing: 8 }, h("h3", { key: '9ca353846a3f53d6cff9e4a8eb1c54f216a6fb6a', class: "auther-title" }, this.authorName), h("p", { key: 'f0fa2d233583a74c5a012f405204f9d75de290d4', class: "auther-desc" }, this.authorDescription))), h("span", { key: 'affac155816d82093ad4341e9226c2fa780008d7', class: "quote-icon" }, "\u201C")))));
+        return (h("div", { key: '07dd772dbecb2357d9b415f9d0634b8026dcd545', class: { 'dga-quote': true, 'dga-quote--white-bg': this.whiteBackground } }, h("div", { key: '6610e95353f3401a7ff3611c95fd5265940cb6ae', class: "dga-quote__body" }, h("dga-flex", { key: '0ac4e007538c281e0f77354f6b075cb1c721186e', spacing: 9 }, h("span", { key: '058665944ad2a598a97c578e469feeccaff80356', class: "quote-icon" }, "\u201D"), h("dga-flex", { key: '72675b554aae7b2818776565b5a687a7617c960f', direction: "column", spacing: 16 }, this.showQuoteTitle && h("h2", { key: 'ae55478db2150cbe3fe3958084a022c16ab1dbfe', class: "dga-quote__body-title" }, this.quoteTitle), this.showQuoteDescription && h("p", { key: '161e595a53136e146d2fc4aabd4380b10812d1ba', class: "dga-quote__body-desc" }, this.quoteDescription)))), this.showAuthorDetails && (h("div", { key: '3a3073a56b54bfe6d84e7fd1f1e2879d65684a91', class: "dga-quote__auther-details" }, h("dga-flex", { key: 'ca7ced49fdf2dc3f0e5047d13cc1736948b1b9e3', direction: "row", spacing: 16, align: "center" }, this.showAvatar && h("dga-avatar", { key: '1dd0ab142f1bfb671971289b468cc5802d7735a4', size: 80, type: "image", border: false, imgUrl: this.avatarSrc }), h("dga-flex", { key: 'a48f41654eafe4c267749edc87fa839043f2c170', direction: "column", spacing: 8 }, h("h3", { key: 'dd46a2f0c41206e1fa49dd7d6d6c0f2cb7c9a95e', class: "auther-title" }, this.authorName), h("p", { key: '14c40e6d46e0a2baaa64646e911c2aebc8b3dfcd', class: "auther-desc" }, this.authorDescription))), h("span", { key: '6905a5bbd199c912c81b2ddf5ce5d4fd2c56ebbc', class: "quote-icon" }, "\u201C")))));
     }
     static get is() { return "dga-quote"; }
     static get originalStyleUrls() {
@@ -241,6 +242,26 @@ export class DgaQuote {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "avatarSrc": {
+                "type": "string",
+                "attribute": "avatar-src",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
             "sx": {
                 "type": "string",
                 "attribute": "sx",