@platformscode/core 0.0.25 → 0.0.28

package/dist/cjs/nds-table-of-content-usage.cjs.entry.js

@@ -7,84 +7,84 @@ const NdsTableOfContentUsage = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '8976d2f5b9ffcc322e12a0606c52adb9b8a1f624', style: {
+        return (index.h("div", { key: 'd374df1de9d5fb6aeec71c8c39a6339f4de55f3b', style: {
                 position: 'relative',
                 width: '100%',
                 maxWidth: '1200px',
                 margin: '0 auto',
                 padding: '20px'
-            } }, index.h("h1", { key: '8a2317a495203dbcc3e61ffc95c00316c0cce49c' }, "Table of Content Example"), index.h("section", { key: 'b13a9a190ad05ffab1acdb419bb17a395020ce1d' }, index.h("div", { key: '590289d1c385c7d15567f6c37b78b44175d5901e', id: "section_1", style: {
+            } }, index.h("h1", { key: '1ddbcf4d675541519127955cdfd1114012a750dd' }, "Table of Content Example"), index.h("section", { key: '0933f193f3c1ae4666bd3902ff0ae79d23549074' }, index.h("div", { key: 'c1a38a4f2ce54c5717e92c2aac0d521efd4c446d', id: "section_1", style: {
                 minHeight: "100vh",
                 backgroundColor: "gray",
                 padding: "20px",
                 margin: "20px 0 200px 0"
-            } }, index.h("h2", { key: 'e95a13f23af97e5a4a66a8b1e5722012b41bcc0f' }, "Section 1"), index.h("div", { key: 'a339d723ac2dee1a8f25f26d07d49991cb69239f', id: "section_1_child_1", style: {
+            } }, index.h("h2", { key: 'dab1e1154b97daa49c6afce571872f669c6c5fdf' }, "Section 1"), index.h("div", { key: '93d75ac1760c51b088d5ade8b85afebfa5a528c2', id: "section_1_child_1", style: {
                 minHeight: "100vh",
                 backgroundColor: "rgba(255,0,0,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, index.h("h3", { key: 'e5ae3e0505cc81f2ea00080f71f4c7035aaebcf8' }, "Section 1 Child 1")), index.h("div", { key: '2ba0bc4c427024c8914602f453973e1d95e4a984', id: "section_1_child_2", style: {
+            } }, index.h("h3", { key: '335bfcf9a7e51242d4b2766346315e50db6746b7' }, "Section 1 Child 1")), index.h("div", { key: 'efe1651d3e613c77335631510c9b40c70f49b9a9', id: "section_1_child_2", style: {
                 minHeight: "100vh",
                 backgroundColor: "rgba(0,0,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, index.h("h3", { key: 'f12acd5017da8cc65465b94393e099e9bfc29d6e' }, "Section 1 Child 2")), index.h("div", { key: 'c508177abd9e75a48c34a7b9c2559f331f3a7b2d', id: "section_1_child_3", style: {
+            } }, index.h("h3", { key: 'c3093ff7b2a1af4f9b86fcd5e49997f0e170b91f' }, "Section 1 Child 2")), index.h("div", { key: 'f4080e18936dd9aea3b43905808d9f9681f893ed', id: "section_1_child_3", style: {
                 minHeight: "100vh",
                 backgroundColor: "rgba(0,255,0,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, index.h("h3", { key: 'c7d4b3594f1de545898ca59d68cec54ef0448a43' }, "Section 1 Child 3"), index.h("div", { key: 'a7430bef424b2034fc0aa2eb9edacbaf24436b66', id: "section_1_sub_child_1", style: {
+            } }, index.h("h3", { key: 'ba13f26ca5b19794395e5739240cfeb607321f5e' }, "Section 1 Child 3"), index.h("div", { key: '2f78f27b26949c8df8166a2f3c224500ac77122b', id: "section_1_sub_child_1", style: {
                 minHeight: "50vh",
                 backgroundColor: "rgba(255,255,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, index.h("h4", { key: '283f9e228ddcc395c666e525015b71fdf9d4cf17' }, "Section 1 Sub Child 1")), index.h("div", { key: 'ebe9c97d3616d89fe4e399c1e5b8969d6300b710', id: "section_1_sub_child_2", style: {
+            } }, index.h("h4", { key: 'd34ae6ccf0b5182c4e01d2cf763c24b3cee7de13' }, "Section 1 Sub Child 1")), index.h("div", { key: '79b5241ceba9fc0d32b676f533704df5f9f8ca13', id: "section_1_sub_child_2", style: {
                 minHeight: "50vh",
                 backgroundColor: "rgba(255,255,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, index.h("h4", { key: '2d5359ea2b1fdf31cc7dc7352a6fd0f247bcc285' }, "Section 1 Sub Child 2")), index.h("div", { key: 'f0ccaae803103eb9ff7fa4da2ea19adb3d3da33b', id: "section_1_sub_child_3", style: {
+            } }, index.h("h4", { key: '84794462343c8bdd74b1557ba968a5768c4df820' }, "Section 1 Sub Child 2")), index.h("div", { key: '012b68c5604d928eaa28967e9bfd7147e845ba07', id: "section_1_sub_child_3", style: {
                 minHeight: "50vh",
                 backgroundColor: "rgba(255,255,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, index.h("h4", { key: '451d8c82c3b175c60cc83212054d6a78a4f9a5d3' }, "Section 1 Sub Child 3")))), index.h("div", { key: '15cca72a6b6ff10b4b7f5c780a2e4c058a4be28b', id: "section_2", style: {
+            } }, index.h("h4", { key: '616a7d35864b1ffb9be6819caaa702f39d6265da' }, "Section 1 Sub Child 3")))), index.h("div", { key: '64d230965070d10551ed817d32137d1004301517', id: "section_2", style: {
                 minHeight: "100vh",
                 backgroundColor: "rgba(0,0,0,0.8)",
                 color: "white",
                 padding: "20px",
                 margin: "20px 0"
-            } }, index.h("h2", { key: '21454ee03d34b1c07f12150798c38343fea3ae21' }, "Section 2")), index.h("div", { key: 'e6ade736af01c30cf338bf460785e7b59a8ad9c6', id: "section_3", style: {
+            } }, index.h("h2", { key: '1fda144830a9f96c5940eb793e78944f8dc6683c' }, "Section 2")), index.h("div", { key: '4cbd623f10ff27c412ea16b518abb032afd94211', id: "section_3", style: {
                 minHeight: "100vh",
                 backgroundColor: "brown",
                 padding: "20px",
                 margin: "20px 0"
-            } }, index.h("h2", { key: '83a6ffc62d3f02d84e11084c17450d354d14f8b9' }, "Section 3"), index.h("div", { key: 'cc3684cc455d3cbe62afe684b5b5fdacbcd973f3', id: "section_3_child_1", style: {
+            } }, index.h("h2", { key: '1064d9ce6553ffedd10764c89d1ddeb251c4c902' }, "Section 3"), index.h("div", { key: 'f5cede3f8f757f6e7da29660ab8613debffefcd1', id: "section_3_child_1", style: {
                 minHeight: "50vh",
                 backgroundColor: "rgba(255,255,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, index.h("h3", { key: '4126ccdf944880d47bfdad8e9897b8b56b1a3676' }, "Section 3 Child 1")), index.h("div", { key: '11603836d5a4e54d1048693cd35509c91562b14c', id: "section_3_child_2", style: {
+            } }, index.h("h3", { key: '74fc34a75bbb92f3fe8780ee2156b9006d43c670' }, "Section 3 Child 1")), index.h("div", { key: '338b3ddeb8a56b6764caa8a6a14d3b5ae30afc30', id: "section_3_child_2", style: {
                 minHeight: "50vh",
                 backgroundColor: "rgba(255,255,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, index.h("h3", { key: '3593b5f8260f9e343ea4f6f3c1dc6e14dc598a1f' }, "Section 3 Child 2"), index.h("div", { key: '9e40873181139cc30c0c751282cba78d86324c9a', id: "section_3_child_2_1", style: {
+            } }, index.h("h3", { key: '2ba2b521664e03b4345a03b11a869d85b821bef9' }, "Section 3 Child 2"), index.h("div", { key: '5e3fceb4c05f947da350df38d46e6940823e37f7', id: "section_3_child_2_1", style: {
                 minHeight: "30vh",
                 backgroundColor: "rgba(0,0,0,0.1)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, index.h("h4", { key: 'dbbb90d7b4111701ddfa82151155e5985939f737' }, "Section 3 Child 2.1")), index.h("div", { key: '07eaa7fccefd587663cad8714557ca50ed5ad6b2', id: "section_3_child_2_2", style: {
+            } }, index.h("h4", { key: 'bfde3e30c870d7f308eccd0681b318e3ba6473ae' }, "Section 3 Child 2.1")), index.h("div", { key: '9316d10ccd7b0a4026e54bf6b4e4e6e50c1467e6', id: "section_3_child_2_2", style: {
                 minHeight: "30vh",
                 backgroundColor: "rgba(0,0,0,0.1)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, index.h("h4", { key: '3775282c598e6f5aeada1021177e85cdb0e1c1cd' }, "Section 3 Child 2.2")), index.h("div", { key: 'c19c544633e04729669142bf6d4f164c134b3016', id: "section_3_child_2_3", style: {
+            } }, index.h("h4", { key: '013c84eb8eb4994d5758c6a8f154e8f8f5bf6892' }, "Section 3 Child 2.2")), index.h("div", { key: '0e5e0b68a1bcf884038526294398937f2a6076d6', id: "section_3_child_2_3", style: {
                 minHeight: "30vh",
                 backgroundColor: "rgba(0,0,0,0.1)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, index.h("h4", { key: '9afd9cd00c393fd71c6b2ed102f79f3be4638fc5' }, "Section 3 Child 2.3"))))), index.h("div", { key: 'da39630ace9f929a53e3f31dc14ceb3bb4462310', style: {
+            } }, index.h("h4", { key: 'f92be07f3186bb50282b84bf45c5028c28a5800d' }, "Section 3 Child 2.3"))))), index.h("div", { key: '31e7562fa06b4d59b2998b19b7c70dd46007fd1c', style: {
                 position: "fixed",
                 top: "100px",
                 left: "40px",
@@ -92,7 +92,7 @@ const NdsTableOfContentUsage = class {
                 background: "white",
                 borderRadius: "8px",
                 boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
-            } }, index.h("dga-table-of-content", { key: '6853707a25c51ef6b770dad5d8425d6db3288b86', title: "On this Page", subTitle: "Page Title", sections: [
+            } }, index.h("dga-table-of-content", { key: '00757186d052dbec3d8bc9ac7ade8f5867936bdc', title: "On this Page", subTitle: "Page Title", sections: [
                 {
                     Name: 'Section 1',
                     Target: 'section_1',
@@ -127,7 +127,7 @@ const NdsTableOfContentUsage = class {
                         }
                     ]
                 }
-            ] })), index.h("div", { key: '62ae23f4553b8597b5aee914a811811cf05fafbf', style: {
+            ] })), index.h("div", { key: 'f3756e3eb1be78331c25d24106051273fe0b9199', style: {
                 position: "fixed",
                 top: "100px",
                 right: "40px",
@@ -135,7 +135,7 @@ const NdsTableOfContentUsage = class {
                 background: "white",
                 borderRadius: "8px",
                 boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
-            } }, index.h("dga-table-of-content", { key: '87662f93081dd4dbbc47435d4b4e2df09205964a', title: "\u0641\u064A \u0647\u0630\u0647 \u0627\u0644\u0635\u0641\u062D\u0629", subTitle: "[\u0627\u0633\u0645 \u0627\u0644\u0635\u0641\u062D\u0629]", rtl: true, sections: [
+            } }, index.h("dga-table-of-content", { key: '6edf19e8ac1016a37d4a3e23d85e468e519bfbe3', title: "\u0641\u064A \u0647\u0630\u0647 \u0627\u0644\u0635\u0641\u062D\u0629", subTitle: "[\u0627\u0633\u0645 \u0627\u0644\u0635\u0641\u062D\u0629]", rtl: true, sections: [
                 {
                     Name: 'قسم صفحة',
                     Target: 'section_1',

package/dist/collection/collection-manifest.json

@@ -65,6 +65,7 @@
     "components/dga-content-switcher/dga-content-switcher-panel.js",
     "components/dga-content-switcher/dga-content-switcher.js",
     "components/dga-data-table/dga-data-table-old.js",
+    "components/dga-data-table/dga-data-table-usage.js",
     "components/dga-data-table/dga-table.body.js",
     "components/dga-data-table/dga-table.js",
     "components/dga-datepicker/DateCell.js",

package/dist/collection/components/dga-button/dga-button.css

@@ -2321,6 +2321,10 @@ dga-button {
   justify-content: center;
   align-items: center;
 }
+.dga-btn-label {
+  display: inline-flex;
+  line-height: normal;
+}
 .dga-btn--lg {
   height: 40px;
   padding-inline: var(--buttons-lg-padding);

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

@@ -59,7 +59,7 @@ export class DgaButton {
         ]
             .filter(Boolean)
             .join(' ');
-        return (h(Host, { key: '69925fb79fca46e9a90ce6391b78930fc7a1c716', id: this.componentId, style: this.rootStyles }, h("button", { key: 'cf358170e29ccd38aaada49a356dd3670602981c', id: buttonId, type: this.type, class: classList, disabled: this.disabled, "aria-label": this.iconOnly && !this.label ? 'Button with icon' : this.label, role: "button", onClick: (event) => this.handleClick(event) }, this.iconOnly && this.iconType && (h("span", { key: 'e96d3a0395460624b623abbdb444f0646c336732', class: "dga-btn-icon", "aria-hidden": "true" }, this.renderIcon(this.iconType, this.iconProps))), this.leadIcon && this.leadIconType && (h("span", { key: '2a85f76f645804b2ffaa7c631012354436871d7e', class: "dga-btn-icon", "aria-hidden": "true" }, this.renderIcon(this.leadIconType, this.leadIconProps))), !this.iconOnly && this.label && h("span", { key: 'fb3485e860e7b30a0a7d96d76e8ba6fee420c647' }, this.label), this.trailIcon && this.trailIconType && (h("span", { key: '75ca14bc2d09a271ba60b3f6ecfffcac084f4ef3', class: "dga-btn-icon", "aria-hidden": "true" }, this.renderIcon(this.trailIconType, this.trailIconProps))))));
+        return (h(Host, { key: '69925fb79fca46e9a90ce6391b78930fc7a1c716', id: this.componentId, style: this.rootStyles }, h("button", { key: 'cf358170e29ccd38aaada49a356dd3670602981c', id: buttonId, type: this.type, class: classList, disabled: this.disabled, "aria-label": this.iconOnly && !this.label ? 'Button with icon' : this.label, role: "button", onClick: (event) => this.handleClick(event) }, this.iconOnly && this.iconType && (h("span", { key: 'e96d3a0395460624b623abbdb444f0646c336732', class: "dga-btn-icon", "aria-hidden": "true" }, this.renderIcon(this.iconType, this.iconProps))), this.leadIcon && this.leadIconType && (h("span", { key: '2a85f76f645804b2ffaa7c631012354436871d7e', class: "dga-btn-icon", "aria-hidden": "true" }, this.renderIcon(this.leadIconType, this.leadIconProps))), !this.iconOnly && this.label && h("span", { key: 'e7df88d685136fa8c140d257f54b191fc2e7fcb4', class: "dga-btn-label" }, this.label), this.trailIcon && this.trailIconType && (h("span", { key: '33ae7ad9f0297f5c01a2922b31987b2a559009b0', class: "dga-btn-icon", "aria-hidden": "true" }, this.renderIcon(this.trailIconType, this.trailIconProps))))));
     }
     static get is() { return "dga-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dga-data-table/dga-data-table-usage.js

@@ -0,0 +1,68 @@
+import { h } from "@stencil/core";
+export class DgaDateFieldUsage {
+    constructor() {
+        this.value = '';
+    }
+    render() {
+        return (h("div", { key: '3b496d87fdb6f58e21d63c7bc3670a7905f7caaf' }, h("h1", { key: '914901df4b9cc8d88004029840e7111f32319104' }, "Date Field Example"), h("div", { key: '652ea31f1acdecea7698590cb91df32419546af7', style: { padding: '50px' } }, h("div", { key: '3a004e735cda3eed66b73c888727f7bcfdb0264e', style: { display: 'flex', flexDirection: 'column', gap: '16px' } }, h("dga-data-table", { key: '23161a2440c0483481fc5f6df34a808b43aac2a9', cells: [
+                {
+                    colSpan: 1,
+                    isFilter: true,
+                    isSort: true,
+                    propertyName: 'city',
+                    sort: 'up',
+                    title: 'city',
+                    type: 'propertyName',
+                },
+                {
+                    colSpan: 1,
+                    isFilter: true,
+                    isSort: true,
+                    propertyName: 'price',
+                    sort: 'down',
+                    title: 'price',
+                    type: 'propertyName',
+                },
+                {
+                    colSpan: 1,
+                    isFilter: true,
+                    isSort: true,
+                    propertyName: 'state',
+                    title: 'state',
+                    type: 'element', // <-- change this
+                    El: row => h("dga-button", { label: row.state }, console.log(row, 'roooooow')), // <-- use a functional component
+                },
+            ], contained: true, data: [
+                {
+                    city: 'Dallas',
+                    h_id: '3',
+                    price: '162500',
+                    selected: false,
+                    state: 'TX',
+                    zip: '75201',
+                },
+                {
+                    city: 'Bevery Hills',
+                    h_id: '4',
+                    price: '319250',
+                    selected: false,
+                    state: 'CA',
+                    zip: '90210',
+                },
+                {
+                    city: 'New York',
+                    h_id: '5',
+                    price: '962500',
+                    selected: false,
+                    state: 'NY',
+                    zip: '00010',
+                },
+            ], getSelectedRows: function vu() { }, pressOnFilter: function vu() { }, rowDivider: true, showSelectCheckBox: true })))));
+    }
+    static get is() { return "dga-data-table-usage"; }
+    static get states() {
+        return {
+            "value": {}
+        };
+    }
+}

package/dist/collection/components/dga-data-table/dga-data-table.js

@@ -91,6 +91,36 @@ export class DgaDataTable {
             this.sortedData = clonedData;
         }
     }
+    buildComponentProps(cell, rowData, rowIndex) {
+        const props = {};
+        // Add static props
+        if (cell.staticProps) {
+            Object.assign(props, cell.staticProps);
+        }
+        // Add row index
+        props.rowIndex = rowIndex;
+        // Method 1: Using elProperties (simple property list)
+        if (cell.elProperties && cell.elProperties.length > 0) {
+            cell.elProperties.forEach(prop => {
+                if (rowData.hasOwnProperty(prop)) {
+                    props[prop] = rowData[prop];
+                }
+            });
+        }
+        // Method 2: Using propMapping (custom property mapping)
+        if (cell.propMapping) {
+            Object.entries(cell.propMapping).forEach(([componentProp, dataProp]) => {
+                if (rowData.hasOwnProperty(dataProp)) {
+                    props[componentProp] = rowData[dataProp];
+                }
+            });
+        }
+        // Method 3: If no specific mapping, pass all row data (fallback)
+        if (!cell.elProperties && !cell.propMapping) {
+            Object.assign(props, rowData);
+        }
+        return props;
+    }
     // componentDidLoad() {
     //   if (document.dir) {
     //     if (document.dir === 'rtl') this.direction = true;
@@ -148,12 +178,14 @@ export class DgaDataTable {
     //     };
     render() {
         console.log(this.sortedData, "this.sortedData");
-        return (h("div", { key: '1f9543a605c90fb731b87690b789befcb2fe1ff3', class: `table-wrapper ${this.contained ? 'table-contained' : ''}` }, h("table", { key: '6fb15399504af87ab22a29e6dfdc06c3e0cb414d', class: ` azm-table ${this.contained ? 'table-contained' : ''}`, style: { direction: this.direction ? 'rtl' : 'ltr' } }, h("thead", { key: 'fc4bb6483281c5a35b7a84050a1b8e1120bbfb37' }, h("tr", { key: '8d1c9aa85b88e9f5e4f8e89745d843cf0850acc2', class: `${this.rowDivider ? 'row-divider' : ''}` }, this.showSelectCheckBox && (h("th", { key: '4b03683271eae037be53414cc1c59ff6c357f097', style: { width: '20px' } }, h("dga-checkbox", { key: 'ed30d783b71fb9b2b6c6e78eb971cbdf8b81dfe4', showBorderOnFocusAndFocusOute: false, value: 'true', onChange: (event) => this.selectAll(event.target.checked) }))), this.cells.map((_a, index) => {
+        return (h("div", { key: 'c5ea921d3d6e2e2243580ecdad7fccdd33c9006c', class: `table-wrapper ${this.contained ? 'table-contained' : ''}` }, h("table", { key: '3199bd207fa5b6380a7a81a25aa88b145994780a', class: ` azm-table ${this.contained ? 'table-contained' : ''}`, style: { direction: this.direction ? 'rtl' : 'ltr' } }, h("thead", { key: 'fd721a77cc6a1317ff7cfe51accb891d45b347cc' }, h("tr", { key: '2f512fed798c1dd2eba7bcd3b809e707beab30fe', class: `${this.rowDivider ? 'row-divider' : ''}` }, this.showSelectCheckBox && (h("th", { key: '8c7333bac1364db924628b7038de8ead3c7afb3d', style: { width: '20px' } }, h("dga-checkbox", { key: '87544b9e54f65d526f67970fb3c2ef75e28a39ee', showBorderOnFocusAndFocusOute: false, value: 'true', onChange: (event) => this.selectAll(event.target.checked) }))), this.cells.map((_a, index) => {
             var { sort, isSort, propertyName, type } = _a, header = __rest(_a, ["sort", "isSort", "propertyName", "type"]);
             return (h("th", { key: index }, h("span", null, h("span", { class: "text" }, header.title), h("span", { class: "icon-wrapper" }, isSort && sort == 'up' && type == 'propertyName' && (h("button", { class: "dga-btn dga-btn--sort dga-btn--icon dga-btn--md", onClick: () => this.sortData('up', propertyName, index) }, h("dga-icon", { icon: "SortByUp02Icon", variant: 'stroke', type: 'rounded', size: 16 }))), isSort && (!sort || sort == 'down') && type == 'propertyName' && (h("button", { class: "dga-btn dga-btn--sort dga-btn--icon dga-btn--md", onClick: () => this.sortData('down', propertyName, index) }, h("dga-icon", { icon: "SortByDown02Icon", variant: 'stroke', type: 'rounded', size: 16 }))), header.isFilter && (h("button", { class: "dga-btn dga-btn--sort dga-btn--icon dga-btn--md ", onClick: () => this.pressOnFilter && this.pressOnFilter(propertyName) }, h("dga-icon", { icon: "FilterIcon", variant: 'stroke', type: 'rounded', size: 16 })))))));
-        }))), h("tbody", { key: '33f8d0cc7ddf274c42700795d93fc36e959f3609' }, this.sortedData.map((row, rowIndex) => (h("tr", { class: `${this.rowDivider ? 'row-divider' : ''} ${this.alternate ? 'alternate' : ''} ${row.selected ? 'row-selected' : ''} `, key: rowIndex }, this.showSelectCheckBox && (h("td", null, h("dga-checkbox", { name: rowIndex + 'checkboxSelection', value: row.selected, id: rowIndex + 'checkboxSelection', showBorderOnFocusAndFocusOute: false, onChange: event => this.handleSelectedRowChanges(event.target.checked, rowIndex), checked: row.selected }))), this.cells.map((_a, cellIndex) => {
+        }))), h("tbody", { key: 'c43cf72c041e7d1cd965dd6e1c5b02af68d60018' }, this.sortedData.map((row, rowIndex) => (h("tr", { class: `${this.rowDivider ? 'row-divider' : ''} ${this.alternate ? 'alternate' : ''} ${row.selected ? 'row-selected' : ''} `, key: rowIndex }, this.showSelectCheckBox && (h("td", null, h("dga-checkbox", { name: rowIndex + 'checkboxSelection', value: row.selected, id: rowIndex + 'checkboxSelection', showBorderOnFocusAndFocusOute: false, onChange: event => this.handleSelectedRowChanges(event.target.checked, rowIndex), checked: row.selected }))), this.cells.map((_a, cellIndex) => {
             var { El } = _a, cell = __rest(_a, ["El"]);
-            return (h("td", { key: cellIndex, colSpan: cell.colSpan ? cell.colSpan : 1 }, cell.type === "element" && El ? (h(El, Object.assign({}, row))) : (row[cell.propertyName])));
+            return (h("td", { key: cellIndex, colSpan: cell.colSpan ? cell.colSpan : 1 }, cell.type === "element" && El ? (typeof El === 'string' ? (
+            // Create element dynamically with props
+            h(El, this.buildComponentProps(cell, row, rowIndex))) : (h(El, Object.assign({}, row)))) : (row[cell.propertyName])));
         }))))))));
     }
     static get is() { return "dga-data-table"; }
@@ -268,13 +300,13 @@ export class DgaDataTable {
                 "attribute": "cells",
                 "mutable": false,
                 "complexType": {
-                    "original": "{\n    title: string;\n    isSort: boolean;\n    isFilter: boolean;\n    sort?: 'up' | 'down';\n    propertyName: string;\n    type: 'element' | 'propertyName';\n    El?: string | FunctionalComponent<any>;\n    elProperties?: string[];\n    colSpan?: number;\n    // elProperties: { [key: string]: any };\n  }[]",
-                    "resolved": "{ title: string; isSort: boolean; isFilter: boolean; sort?: \"up\" | \"down\"; propertyName: string; type: \"element\" | \"propertyName\"; El?: string | FunctionalComponent<any>; elProperties?: string[]; colSpan?: number; }[]",
+                    "original": "CellConfig[]",
+                    "resolved": "CellConfig[]",
                     "references": {
-                        "FunctionalComponent": {
-                            "location": "import",
-                            "path": "@stencil/core",
-                            "id": "../../node_modules/.pnpm/@stencil+core@4.36.0/node_modules/@stencil/core/internal/stencil-core/index.d.ts::FunctionalComponent"
+                        "CellConfig": {
+                            "location": "local",
+                            "path": "/home/mamoud/Documents/temp/components/platform-code-cross-platform-storybook/packages/core/src/components/dga-data-table/dga-data-table.tsx",
+                            "id": "src/components/dga-data-table/dga-data-table.tsx::CellConfig"
                         }
                     }
                 },

package/dist/collection/components/dga-data-table/dga-table.body.js

@@ -115,7 +115,7 @@ export class DgaTableBody {
     //         this.selected = index;
     //     };
     render() {
-        return (h("tbody", { key: 'a0713a4db7cc2551fe392a82136ae655f92df198' }, h("slot", { key: '113d40d6704388bd16e3e920caa9fb720d444e24' })));
+        return (h("tbody", { key: 'c0631edc404bf8ef2bf27bce333e6caffd021a54' }, h("slot", { key: 'ff2d0b4a85ea66402fa1824d09e5fdacdd4c1ee7' })));
     }
     static get is() { return "dga-table-body"; }
     static get properties() {

package/dist/collection/components/dga-data-table/dga-table.js

@@ -92,7 +92,7 @@ export class DgaTable {
         this.sortedData = cloneData;
     }
     render() {
-        return (h("div", { key: 'd38d52b18e87603e51e71cdefa062c4a2d46e26f', class: `table-wrapper ${this.contained ? 'table-contained' : ''}` }, h("table", { key: 'a14b9b38dd38cf0d4f6ffed8b2214014bbe13edc', class: ` azm-table ${this.contained ? 'table-contained' : ''}`, style: { direction: this.direction ? 'rtl' : 'ltr' } }, h("slot", { key: 'd75de225f47ee31f9c5f4658649a4214ef4eccfa' }))));
+        return (h("div", { key: '052ab0152b8551f26a20b18a1ef77d48b9862873', class: `table-wrapper ${this.contained ? 'table-contained' : ''}` }, h("table", { key: 'da609690b436f6fb54b098ee0ce6482bd6e4f247', class: ` azm-table ${this.contained ? 'table-contained' : ''}`, style: { direction: this.direction ? 'rtl' : 'ltr' } }, h("slot", { key: '248067b86031f1589d37fa6f9dd82f1ef9aca54c' }))));
     }
     static get is() { return "dga-table"; }
     static get properties() {

package/dist/collection/components/dga-datepicker/DateCell.js

@@ -35,7 +35,7 @@ export class DateCell {
             className += ' date-cell--mid-range--first-child';
         if (this.isLastRangeChild)
             className += ' date-cell--mid-range--last-child';
-        return (h("button", { key: 'f19d7c39f48b2251c91a519ff59ba2150a198278', type: "button", class: className, onClick: () => this.handleClick(), onMouseDown: this.handleAddPressed, onMouseUp: this.handleRemovePressed, onMouseOut: this.handleRemovePressed, disabled: !this.isCurrentMonth }, h("div", { key: '867c3587d1bba6aec44264fd637d30bbb577efd6', class: "date-cell__label" }, h("span", { key: '764becdfe76dcc3b0f88a0da2ba960d4b2fdea5f' }, this.date.getDate()))));
+        return (h("button", { key: '3cfb2bbbe4b32af0cbe3f6a8c046f1a3df18e764', type: "button", class: className, onClick: () => this.handleClick(), onMouseDown: this.handleAddPressed, onMouseUp: this.handleRemovePressed, onMouseOut: this.handleRemovePressed, disabled: !this.isCurrentMonth }, h("div", { key: '639c4d2ad163e23494e0034016f39e294a4c8e23', class: "date-cell__label" }, h("span", { key: '4370802b3685b31fc702d8ab72ed8d8cb6a17d71' }, this.date.getDate()))));
     }
     static get is() { return "date-cell"; }
     static get originalStyleUrls() {

package/dist/collection/components/dga-datepicker/MonthNavigator.js

@@ -80,21 +80,21 @@ export class MonthNavigator {
         }
     }
     render() {
-        return (h("div", { key: '7341dcb50c1cae79a19b7e014878907e90df8655', class: "date-picker__navigator" }, h("div", { key: 'acf39e26867fd56cdaf11bc8c1535494c6bfb081', class: "date-picker__navigator-label" }, this.currentMonth.toLocaleDateString(this.RTL ? 'ar' : 'default', {
+        return (h("div", { key: '485e9d83547211470b319cea22e6ca699d8bf9f3', class: "date-picker__navigator" }, h("div", { key: '2f26355c7d7e66e5084d57bafe6d4ce45b61e967', class: "date-picker__navigator-label" }, this.currentMonth.toLocaleDateString(this.RTL ? 'ar' : 'default', {
             month: 'long',
             // year: 'numeric',
-        }), " ", h("span", { key: '144729490a1019b08362f6830e2b7ba9c791afcd', class: "year-selector", onClick: this.toggleYearsDropdown, style: {
+        }), " ", h("span", { key: '26c607af9d1119b823b83a0a77310b194cc48456', class: "year-selector", onClick: this.toggleYearsDropdown, style: {
                 cursor: 'pointer',
                 position: 'relative',
                 display: 'inline-flex',
                 alignItems: 'center'
             } }, this.currentMonth.getFullYear(), this.isYearsDropdownOpen && (
         // {true && (
-        h("ul", { key: '70be1e88c2835559f634c8aaef7c85ab25483f4b', class: "dga-breadcrumb-dropdown", ref: (el) => this.yearDropdownRef = el }, this.yearsList.map(year => (h("li", { key: year, class: `dga-breadcrumb-dropdown-item ${year === this.currentMonth.getFullYear() ? 'selected-year' : ''}` }, h("a", { onClick: (e) => this.handleYearSelect(year, e) }, h("span", { class: "link__label" }, year))))))))), this.showArrows && (h("div", { key: '021d35d2463546f0c8826cd14d5dede6a2d4bcfd', class: "date-picker__navigator-buttons" }, h("dga-button-v2", { key: '025d82aae706d311a4c2ee962eea86a1084e4614', variant: "subtle", size: "lg", iconOnly: true, leadIcon: true, leadIconProps: {
+        h("ul", { key: '2ef3876e85edabc3b1da6786495e0198f49aa5f7', class: "dga-breadcrumb-dropdown", ref: (el) => this.yearDropdownRef = el }, this.yearsList.map(year => (h("li", { key: year, class: `dga-breadcrumb-dropdown-item ${year === this.currentMonth.getFullYear() ? 'selected-year' : ''}` }, h("a", { onClick: (e) => this.handleYearSelect(year, e) }, h("span", { class: "link__label" }, year))))))))), this.showArrows && (h("div", { key: '8ed7afa9ed2cb230d5cca9baa525123b7e0d3231', class: "date-picker__navigator-buttons" }, h("dga-button-v2", { key: '985a28922d4029c7235b4e19c4cec0686f5fca9d', variant: "subtle", size: "lg", iconOnly: true, leadIcon: true, leadIconProps: {
                 name: 'arrow-left-02',
                 variant: 'stroke',
                 type: 'rounded',
-            }, onClick: this.handlePrevClick }), h("dga-button-v2", { key: '4f7734bca054dfae65a49f32aa2874a14063c578', variant: "subtle", size: "lg", iconOnly: true, leadIcon: true, leadIconProps: {
+            }, onClick: this.handlePrevClick }), h("dga-button-v2", { key: 'd96b39a654ee99c5290fbacf5db3ce08a401fdc0', variant: "subtle", size: "lg", iconOnly: true, leadIcon: true, leadIconProps: {
                 name: 'arrow-right-02',
                 variant: 'stroke',
                 type: 'rounded',

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

@@ -139,10 +139,10 @@ export class DgaDatepicker {
         }
     }
     render() {
-        return (h(Host, { key: 'ff1973f77a1c37af4452c03eb262a70a4f9f4c56' }, h("div", { key: '9d117678dd3f5a7d85808fe0e625652816825057', class: "date-picker-root dga-flex-column", "data-dual-view": this.dualMonthView, dir: this.RTL ? 'rtl' : 'ltr' }, h("div", { key: 'b824fff3adbe73b95ed4f9b6c0611980594e5158', class: "dga-flex" }, this.qickOptions && this.range && (h("div", { key: '4783e252014fb986e6a7b2517f6cdd7df5d22a8f', class: "date-picker-root__quick-options" }, h("span", { key: '7e789b20f1e128e531f7f7071259573326fe11f5', class: "text-md-regular" }, this.RTL ? 'اختصارات' : 'Qick options'), h("ul", { key: 'd17fec67c84a27495a2ea1c01004bd77124f22ea', class: "options-list" }, defaultStaticRanges.map(({ label, range }) => (h("li", { key: label[this.RTL ? 'ar' : 'en'] }, h("button", { class: "text-md-medium", onClick: () => {
+        return (h(Host, { key: '9dc661bc73774b44fe118eed357bd08dae1c3339' }, h("div", { key: '773716bb1d0baedb01c153312b5a4e7dd50f2fec', class: "date-picker-root dga-flex-column", "data-dual-view": this.dualMonthView, dir: this.RTL ? 'rtl' : 'ltr' }, h("div", { key: '282aeb27750e2e3aaaaa18a5752cd68b83975f4d', class: "dga-flex" }, this.qickOptions && this.range && (h("div", { key: 'e7c874e5a5bfed86efcc2a87a38b58bb3a8d6e74', class: "date-picker-root__quick-options" }, h("span", { key: '46e021e074a4875680233a3b173de5c32a7295e8', class: "text-md-regular" }, this.RTL ? 'اختصارات' : 'Qick options'), h("ul", { key: '4bc0c4bc1d7043c8fadf9a0c7e6b5cf5baa99eeb', class: "options-list" }, defaultStaticRanges.map(({ label, range }) => (h("li", { key: label[this.RTL ? 'ar' : 'en'] }, h("button", { class: "text-md-medium", onClick: () => {
                 this.rangeDates = range();
                 console.log(range, "rrrrrrrrrrrrrrrrrrrraaaaaaaaaaaaaaaaaange");
-            } }, label[this.RTL ? 'ar' : 'en']))))))), h("div", { key: '16474410f663c2edcc2c69f8aa68e66a2eb084dc', class: "date-picker-root__main" }, this.inputField && (h("div", { key: 'eab55df8dd6def84a6c15af6f1eeda4d300f37d0', class: "date-picker-root__main__inputs" }, h("dga-text-input", { key: '43aeee9099f3f0c5a9dfb44d0d45878fd623e2f0', placeholder: "Month DD, YYYY", name: "startDate", value: this.inputDates.startDate, onChange: (e) => this.handleInputDate(e), onBlur: (e) => {
+            } }, label[this.RTL ? 'ar' : 'en']))))))), h("div", { key: 'cab92a392c08a835d36fbcfd5c479ecbc422711e', class: "date-picker-root__main" }, this.inputField && (h("div", { key: '5f922af55a89c18a1e2dc7903dfcb69e64eb55b7', class: "date-picker-root__main__inputs" }, h("dga-text-input", { key: 'f9a0403af12b5fa08a6cb4f9c32682d1672e1ebf', placeholder: "Month DD, YYYY", name: "startDate", value: this.inputDates.startDate, onChange: (e) => this.handleInputDate(e), onBlur: (e) => {
                 if (validateInputDate(e.target.value)) {
                     const date = new Date(e.target.value);
                     if (this.range) {
@@ -165,7 +165,7 @@ export class DgaDatepicker {
                         this.selectedDate = date;
                     }
                 }
-            } }), this.range && (h("dga-text-input", { key: '1dd40bd74a2f122114e7913106db8c2d4bdb5959', placeholder: "Month DD, YYYY", name: "endDate", value: this.inputDates.endDate, onChange: (e) => this.handleInputDate(e), onBlur: (e) => {
+            } }), this.range && (h("dga-text-input", { key: '6c3e3f85bd86395f66cb01e5d006d439ac885207', placeholder: "Month DD, YYYY", name: "endDate", value: this.inputDates.endDate, onChange: (e) => this.handleInputDate(e), onBlur: (e) => {
                 if (validateInputDate(e.target.value)) {
                     const date = new Date(e.target.value);
                     if (this.range) {
@@ -199,19 +199,19 @@ export class DgaDatepicker {
                         this.selectedDate = date;
                     }
                 }
-            } })))), h("div", { key: '4d243d30846b117a07d314fb563c48be43eaaf96', class: "date-picker-root__main__content-wrapper" }, h("div", { key: '31d9e24857aac90f85bbb17a33eccdfc252e6fde', class: "date-picker" }, h("month-navigator", { key: '7cfc6b1178f318afb9dbf33d8d4c7a7b20a19806', RTL: this.RTL, currentMonth: this.currentMonth, onChange: (date) => this.handleChangeMonth(date), showArrows: !this.dualMonthView }), h("div", { key: 'e2d47c064dd5b770753745bca90dbc4bd0d6da59', class: "date-picker__weekdays" }, daysMap[this.RTL ? 'ar' : 'en'].map((day) => (h("div", { key: day, class: "date-picker__weekday" }, day)))), h("div", { key: '188d2e8c93d38361a0490b2b989502911896cfca', class: "date-picker__date-grid" }, this.days.map((date) => (h("date-cell", { key: date.toString(), date: date, isCurrentMonth: date.getMonth() === this.currentMonth.getMonth(), isSelected: (this.range)
+            } })))), h("div", { key: '9727be87ef1a3d7d647b9f2a81e19857e9163a2a', class: "date-picker-root__main__content-wrapper" }, h("div", { key: 'fcb28fe511a552b4e21d42520c66aacfae38c72b', class: "date-picker" }, h("month-navigator", { key: 'd5277a301ccabc9148b9bea7839160eb31cace05', RTL: this.RTL, currentMonth: this.currentMonth, onChange: (date) => this.handleChangeMonth(date), showArrows: !this.dualMonthView }), h("div", { key: 'd8d92f6400b56ea5bb9bb85e9a8f2cb7931d26a0', class: "date-picker__weekdays" }, daysMap[this.RTL ? 'ar' : 'en'].map((day) => (h("div", { key: day, class: "date-picker__weekday" }, day)))), h("div", { key: '65f1c19331c208371ee7e31b9a3da777e2e1db90', class: "date-picker__date-grid" }, this.days.map((date) => (h("date-cell", { key: date.toString(), date: date, isCurrentMonth: date.getMonth() === this.currentMonth.getMonth(), isSelected: (this.range)
                 ? (!!this.rangeDates.startDate &&
                     compareDatesWithoutTime(date, this.rangeDates.startDate)) ||
                     (!!this.rangeDates.endDate &&
                         compareDatesWithoutTime(date, this.rangeDates.endDate))
                 : this.selectedDate
                     ? compareDatesWithoutTime(date, this.selectedDate)
-                    : false, isToday: new Date().toDateString() === date.toDateString(), isFirstRangeChild: this.isFirstRangeChild(date), isLastRangeChild: this.isLastRangeChild(date), midRange: this.isMidRange(date), onSelect: (date) => this.handleSelectDate(date) }))))), this.dualMonthView && (h("div", { key: '531be6e61309c3cc489a2668b002821966d68eb9', class: "date-picker" }, h("month-navigator", { key: 'f647bf7958f5475332bb75717fb4318e1e880c9b', currentMonth: this.nextMonth, onChange: (date) => {
+                    : false, isToday: new Date().toDateString() === date.toDateString(), isFirstRangeChild: this.isFirstRangeChild(date), isLastRangeChild: this.isLastRangeChild(date), midRange: this.isMidRange(date), onSelect: (date) => this.handleSelectDate(date) }))))), this.dualMonthView && (h("div", { key: '36bd4a87e80117cf2d276cdcf80afdd7dc2d5479', class: "date-picker" }, h("month-navigator", { key: '54914a68f17e7d064b428aae633ff8d70697599d', currentMonth: this.nextMonth, onChange: (date) => {
                 const newMonth = date.getMonth() === this.currentMonth.getMonth()
                     ? new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() - 1)
                     : new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + 1);
                 this.handleChangeMonth(newMonth);
-            }, showArrows: true }), h("div", { key: '8269cd5e831bd7d9bbf6eb72801280259ff4f8cb', class: "date-picker__weekdays" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (h("div", { key: day, class: "date-picker__weekday" }, day)))), h("div", { key: '5747bed30156172b36c9907529b6587b9db9ee2c', class: "date-picker__date-grid" }, this.nextMonthDays.map((date) => (h("date-cell", { key: date.toString(), date: date, isCurrentMonth: date.getMonth() === this.nextMonth.getMonth(), isSelected: this.range
+            }, showArrows: true }), h("div", { key: 'e50c6a0997bd4be358a41c0b84d3026ed5017e51', class: "date-picker__weekdays" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (h("div", { key: day, class: "date-picker__weekday" }, day)))), h("div", { key: '1495e668f5a063eac62a9ceb64c2c0e5a4b00b27', class: "date-picker__date-grid" }, this.nextMonthDays.map((date) => (h("date-cell", { key: date.toString(), date: date, isCurrentMonth: date.getMonth() === this.nextMonth.getMonth(), isSelected: this.range
                 ? (!!this.rangeDates.startDate &&
                     date.getTime() ===
                         this.rangeDates.startDate.getTime()) ||
@@ -219,7 +219,7 @@ export class DgaDatepicker {
                         date.getTime() === this.rangeDates.endDate.getTime())
                 : this.selectedDate
                     ? date.getTime() === this.selectedDate.getTime()
-                    : false, isToday: new Date().toDateString() === date.toDateString(), midRange: this.isMidRange(date), isFirstRangeChild: this.isFirstRangeChild(date), isLastRangeChild: this.isLastRangeChild(date), onSelect: (date) => this.handleSelectDate(date) }))))))))), this.submitButton && (h("div", { key: '9f6d5deee7ebd72c185068d932c2ec2730cc79b6', class: "date-picker-root__main__buttons" }, h("dga-button-v2", { key: '0cc092fd53f8066ed4f17f012bd771d4fcf52b0f', label: "Cancel", onClick: this.onCancel, size: "lg", variant: "secondary-outline" }), h("dga-button-v2", { key: 'f95ef90aaa253dd2fc41135b1fbc9573e58e9d16', label: "Submit", onClick: this.onSubmit, size: "lg", variant: "neutral" }))))));
+                    : false, isToday: new Date().toDateString() === date.toDateString(), midRange: this.isMidRange(date), isFirstRangeChild: this.isFirstRangeChild(date), isLastRangeChild: this.isLastRangeChild(date), onSelect: (date) => this.handleSelectDate(date) }))))))))), this.submitButton && (h("div", { key: 'c2b28f3b91f438f3d1507c7eef1e9ab2af9cc263', class: "date-picker-root__main__buttons" }, h("dga-button-v2", { key: 'acd1650b5f8e1b5a989748dd764dc4ef26e51795', label: "Cancel", onClick: this.onCancel, size: "lg", variant: "secondary-outline" }), h("dga-button-v2", { key: '6311e072de7efdd53ebb370e4e89b86e609bfd0a', label: "Submit", onClick: this.onSubmit, size: "lg", variant: "neutral" }))))));
     }
     static get is() { return "dga-datepicker"; }
     static get originalStyleUrls() {