@xplortech/apollo-core 2.11.0 → 3.0.0

package/dist/cjs/xpl-dynamic-table.cjs.entry.js

@@ -1,13 +1,14 @@
 'use strict';
 
-var index = require('./index-BaXVr8ux.js');
+var index = require('./index-3cBvw409.js');
 
 const DynamicTable = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.selectedItemCountChange = index.createEvent(this, "selectedItemCountChange", 7);
-        this.selectedItemCount = 0;
         this.colCount = 0;
+        this.hasAccordion = false;
+        this.selectedItemCount = 0;
     }
     updateColumnCount() {
         const headerCells = this.el.querySelectorAll('xpl-table-header-cell');
@@ -20,7 +21,7 @@ const DynamicTable = class {
             }
             return '1fr';
         });
-        this.el.style.setProperty('--column-widths', columnWidths.join(' '));
+        this.el.style.setProperty('--xpl-column-widths', columnWidths.join(' '));
         this.colCount = headerCells.length;
     }
     listenToDeselectEvent() {
@@ -29,24 +30,13 @@ const DynamicTable = class {
     }
     listenToChangeEvent() {
         const childCheckboxes = document.querySelectorAll('.xpl-dynamic-table xpl-checkbox:not([class^="xpl-header-accordion__parent-checkbox"]) input:not([disabled])');
-        const checkedIds = Array.from(childCheckboxes)
-            .filter((checkbox) => checkbox.checked)
-            .map((checkbox) => checkbox.getAttribute('data-id'));
+        const checkedCheckboxes = Array.from(childCheckboxes).filter((checkbox) => checkbox.checked);
+        const checkedIds = checkedCheckboxes.map((checkbox) => checkbox.getAttribute('data-id') ?? '');
         this.selectedItemCount = checkedIds.length;
         this.selectedItemCountChange.emit(checkedIds);
     }
     updateRowGap() {
-        const hasHeaderAccordion = this.el.querySelector('xpl-header-accordion') !== null;
-        if (!hasHeaderAccordion) {
-            return;
-        }
-        const selectors = ['.xpl-dynamic-table', '.xpl-dynamic-table > [slot="body"]'];
-        selectors.forEach((sel) => {
-            const element = this.el.querySelector(sel);
-            if (element !== null) {
-                element.style.rowGap = '0.5rem';
-            }
-        });
+        this.hasAccordion = this.el.querySelector('xpl-header-accordion') !== null;
     }
     componentDidLoad() {
         this.updateColumnCount();
@@ -56,7 +46,10 @@ const DynamicTable = class {
         this.updateColumnCount();
     }
     render() {
-        return (index.h("div", { key: '7b1ac3b1461e69fb7001baf63c256abcc65cb3a3', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, index.h("slot", { key: '5d7484d4517b132dbb2400f7c63da3be14064586', name: "header" }), index.h("slot", { key: '292c502f9cb58467bbb69a3eeacff51af557d826', name: "body" })));
+        return (index.h("div", { key: '9fdd0a6b9adfad92d89ff30873009e08ca981124', role: "grid", class: {
+                'xpl-dynamic-table': true,
+                'xpl-dynamic-table--accordion': this.hasAccordion,
+            }, "aria-colcount": this.colCount }, index.h("slot", { key: 'a105d82f752d34618a0603c59f85ea9e2ee6c3dd', name: "header" }), index.h("slot", { key: '24817b404a5a6f50ab1f17674a85391a8645f728', name: "body" })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/xpl-grid-item.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BaXVr8ux.js');
+var index = require('./index-3cBvw409.js');
 
 const GridItem = class {
     constructor(hostRef) {
@@ -16,7 +16,7 @@ const GridItem = class {
         className += ` xpl-grid-item-sm-${this.sm}`;
         className += ` xpl-grid-item-md-${this.md}`;
         className += ` xpl-grid-item-lg-${this.lg}`;
-        return (index.h(index.Host, { key: 'a541967d85e9a4fcd643aa95b62226e46c476dc6', class: className }, index.h("slot", { key: 'e20ba799288ffb654334698215518e8cfe6ba9a3' })));
+        return (index.h(index.Host, { key: '0fc1d60f8f0d0df7208302a3668930afdb1dc5ba', class: className }, index.h("slot", { key: '0385c17beb3982d060b4e2a4bdd0fd16f924a0d3' })));
     }
 };
 

package/dist/cjs/xpl-grid.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BaXVr8ux.js');
+var index = require('./index-3cBvw409.js');
 
 const Grid = class {
     constructor(hostRef) {
@@ -13,10 +13,10 @@ const Grid = class {
         let smCounter = 0;
         let xsCounter = 0;
         items.forEach((item) => {
-            lgCounter += +item.getAttribute('lg') || 6;
-            mdCounter += +item.getAttribute('md') || 6;
-            smCounter += +item.getAttribute('sm') || 6;
-            xsCounter += +item.getAttribute('xs') || 6;
+            lgCounter += Number(item.getAttribute('lg')) || 6;
+            mdCounter += Number(item.getAttribute('md')) || 6;
+            smCounter += Number(item.getAttribute('sm')) || 6;
+            xsCounter += Number(item.getAttribute('xs')) || 6;
             if (lgCounter % 6 === 0)
                 item.classList.add('xpl-grid-item-lg-last');
             if (mdCounter % 6 === 0)
@@ -28,7 +28,7 @@ const Grid = class {
         });
     }
     render() {
-        return index.h(index.Host, { key: '3700079a0f7bbea9755a217d7757dff5a82ee601', class: "xpl-grid" });
+        return index.h(index.Host, { key: '94440d9d2f50c8712e7e4599409101da361f66d8', class: "xpl-grid" });
     }
     get container() { return index.getElement(this); }
 };

package/dist/cjs/xpl-header-accordion.cjs.entry.js

@@ -0,0 +1,69 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+
+const HeaderAccordion = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.initialExpanded = false;
+        this.disabled = false;
+        this.selectedCount = -1;
+        this.hasCheckbox = true;
+        this.expanded = this.initialExpanded;
+        this.parentChecked = false;
+        this.parentIndeterminate = false;
+        this.toggleAccordion = () => {
+            this.expanded = !this.expanded;
+        };
+        this.handleParentCheckboxChange = (checked) => {
+            this.parentChecked = checked;
+            this.parentIndeterminate = false;
+            const childCheckboxes = this.el?.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
+            childCheckboxes?.forEach((checkbox) => {
+                checkbox.checked = checked;
+            });
+        };
+    }
+    watchSelectedCount(selectedCount, _previousCount) {
+        if (selectedCount > -1) {
+            this.updateParentCheckbox(selectedCount);
+        }
+    }
+    updateParentCheckbox(selectedCount) {
+        const childCheckboxes = this.el?.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
+        if (selectedCount === 0) {
+            this.parentChecked = false;
+            this.parentIndeterminate = false;
+        }
+        else if (selectedCount === (childCheckboxes?.length ?? 0)) {
+            this.parentChecked = true;
+            this.parentIndeterminate = false;
+        }
+        else {
+            this.parentChecked = false;
+            this.parentIndeterminate = true;
+        }
+    }
+    handleChildCheckboxChange() {
+        if (this.selectedCount === -1) {
+            const childCheckboxes = this.el?.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
+            const checkedCount = Array.from(childCheckboxes ?? []).filter((checkbox) => checkbox.checked).length;
+            this.updateParentCheckbox(checkedCount);
+        }
+    }
+    componentDidLoad() {
+        const initialCheckoxesValue = this.selectedCount > -1 ? this.selectedCount : 0;
+        this.updateParentCheckbox(initialCheckoxesValue);
+    }
+    render() {
+        return (index.h(index.Host, { key: '7a9c486fd491732cafa29086b3e3edab9090fcef', class: "xpl-header-accordion" }, index.h("div", { key: 'c63b756d6336e89b7976fb9a072782ed9d67a7c9', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (index.h("xpl-checkbox", { key: '65d41ff6f70d0cc9022f0337335305737a23617d', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), index.h("button", { key: '514f9bfe4a024416b8a4e152472c2bd7bbe3ab1d', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, index.h("slot", { key: '29a2434b4a4be46751f4425b7837f11324547e1a', name: "title" }), index.h("xpl-icon", { key: 'cf2e043da31d9845e6b4db91022f67c3abb4918d', size: 16, icon: "chevron-down", class: this.expanded ? 'rotate' : undefined }))), index.h("div", { key: '6bcc05f2ebf545ef67fa7cf1e3bb1e6f39f0f170', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, index.h("slot", { key: '6bbcd7e23979d93d88168f173766f86701ecc382', name: "content" }))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "selectedCount": [{
+                "watchSelectedCount": 0
+            }]
+    }; }
+};
+
+exports.xpl_header_accordion = HeaderAccordion;