@paperless/core 2.15.2 → 2.16.0

package/dist/collection/components/helpers/table/extra-header/table-extra-header.component.js

@@ -0,0 +1,189 @@
+export class TableExtraHeader {
+    /**
+     * The name of the column
+     */
+    name;
+    /**
+     * Wether the column should be sticky (Only works on angular variant of table)
+     */
+    sticky = false;
+    /**
+     * Wether the column should use the slot
+     */
+    useSlot = true;
+    /**
+     * The alignment of the column
+     */
+    align = 'start';
+    /**
+     * Parsed sizes based on the complete set of columns
+     */
+    parsedSizes;
+    /**
+     * The sizes of the column
+     */
+    sizes = 'auto';
+    /**
+     * Event to let the table know it has to re render
+     */
+    tableDefinitionChanged;
+    componentDidUpdate() {
+        this.tableDefinitionChanged.emit(true);
+    }
+    render() {
+        return;
+    }
+    static get is() { return "p-table-extra-header"; }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the column"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "sticky": {
+                "type": "boolean",
+                "attribute": "sticky",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether the column should be sticky (Only works on angular variant of table)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "useSlot": {
+                "type": "boolean",
+                "attribute": "use-slot",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether the column should use the slot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "align": {
+                "type": "string",
+                "attribute": "align",
+                "mutable": true,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end'",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The alignment of the column"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'start'"
+            },
+            "parsedSizes": {
+                "type": "unknown",
+                "attribute": "parsed-sizes",
+                "mutable": true,
+                "complexType": {
+                    "original": "| TableColumnSizes\n\t\t| undefined",
+                    "resolved": "TableColumnSizes",
+                    "references": {
+                        "TableColumnSizes": {
+                            "location": "import",
+                            "path": "../../../../types/table",
+                            "id": "src/types/table.ts::TableColumnSizes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Parsed sizes based on the complete set of columns"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "sizes": {
+                "type": "any",
+                "attribute": "sizes",
+                "mutable": true,
+                "complexType": {
+                    "original": "| 'auto'\n\t\t| 'hidden'\n\t\t| 'full'\n\t\t| number\n\t\t| TableColumnSizes",
+                    "resolved": "\"auto\" | \"full\" | \"hidden\" | TableColumnSizes | number",
+                    "references": {
+                        "TableColumnSizes": {
+                            "location": "import",
+                            "path": "../../../../types/table",
+                            "id": "src/types/table.ts::TableColumnSizes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The sizes of the column"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'auto'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tableDefinitionChanged",
+                "name": "tableDefinitionChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to let the table know it has to re render"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=table-extra-header.component.js.map

package/dist/collection/components/helpers/table/extra-header/table-extra-header.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-extra-header.component.js","sourceRoot":"","sources":["../../../../../src/components/helpers/table/extra-header/table-extra-header.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,eAAe,CAAC;AAMrE,MAAM,OAAO,gBAAgB;IAC5B;;OAEG;IACqC,IAAI,CAAS;IAErD;;OAEG;IACqC,MAAM,GAAY,KAAK,CAAC;IAEhE;;OAEG;IACqC,OAAO,GAAY,IAAI,CAAC;IAEhE;;OAEG;IACqC,KAAK,GAC5C,OAAO,CAAC;IAET;;OAEG;IACqC,WAAW,CAEtC;IAEb;;OAEG;IACsB,KAAK,GAKR,MAAM,CAAC;IAE7B;;OAEG;IAEH,sBAAsB,CAAwB;IAE9C,kBAAkB;QACjB,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC;IAED,MAAM;QACL,OAAO;IACR,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, Prop } from '@stencil/core';\nimport { TableColumnSizes } from '../../../../types/table';\n\n@Component({\n\ttag: 'p-table-extra-header',\n})\nexport class TableExtraHeader {\n\t/**\n\t * The name of the column\n\t */\n\t@Prop({ reflect: true, mutable: true }) name: string;\n\n\t/**\n\t * Wether the column should be sticky (Only works on angular variant of table)\n\t */\n\t@Prop({ reflect: true, mutable: true }) sticky: boolean = false;\n\n\t/**\n\t * Wether the column should use the slot\n\t */\n\t@Prop({ reflect: true, mutable: true }) useSlot: boolean = true;\n\n\t/**\n\t * The alignment of the column\n\t */\n\t@Prop({ reflect: true, mutable: true }) align: 'start' | 'center' | 'end' =\n\t\t'start';\n\n\t/**\n\t * Parsed sizes based on the complete set of columns\n\t */\n\t@Prop({ reflect: true, mutable: true }) parsedSizes:\n\t\t| TableColumnSizes\n\t\t| undefined;\n\n\t/**\n\t * The sizes of the column\n\t */\n\t@Prop({ mutable: true }) sizes:\n\t\t| 'auto'\n\t\t| 'hidden'\n\t\t| 'full'\n\t\t| number\n\t\t| TableColumnSizes = 'auto';\n\n\t/**\n\t * Event to let the table know it has to re render\n\t */\n\t@Event({ bubbles: true, composed: true })\n\ttableDefinitionChanged: EventEmitter<boolean>;\n\n\tcomponentDidUpdate() {\n\t\tthis.tableDefinitionChanged.emit(true);\n\t}\n\n\trender() {\n\t\treturn;\n\t}\n}\n"]}

package/dist/collection/components/molecules/table/cell/table-cell.component.css

@@ -1 +1 @@
-*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.table{display:table!important}.table-cell{display:table-cell!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-1\/12{width:8.333333%!important}.w-10\/12{width:83.333333%!important}.w-11\/12{width:91.666667%!important}.w-2\/12{width:16.666667%!important}.w-3\/12{width:25%!important}.w-4\/12{width:33.333333%!important}.w-5\/12{width:41.666667%!important}.w-6\/12{width:50%!important}.w-7\/12{width:58.333333%!important}.w-8\/12{width:66.666667%!important}.w-9\/12{width:75%!important}.w-\[calc\(100\%-1rem\)\]{width:calc(100% - 1rem)!important}.flex-1{flex:1 1 0%!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.rounded{border-radius:.25rem!important}.pr-0{padding-right:0!important}.pr-4{padding-right:1rem!important}.text-center{text-align:center!important}.text-start{text-align:start!important}.text-end{text-align:end!important}.font-semibold{font-weight:600!important}.text-storm-300{--tw-text-opacity:1!important;color:rgb(116 120 127/var(--tw-text-opacity,1))!important}.text-storm-400{--tw-text-opacity:1!important;color:rgb(70 75 84/var(--tw-text-opacity,1))!important}.text-storm-500{--tw-text-opacity:1!important;color:rgb(24 30 41/var(--tw-text-opacity,1))!important}.last-of-type\:pr-0:last-of-type{padding-right:0!important}.group:hover .group-hover\:flex{display:flex!important}.group:hover .group-hover\:hidden{display:none!important}@media (min-width:40rem){.tablet\:flex{display:flex!important}.tablet\:hidden{display:none!important}.tablet\:w-1\/12{width:8.333333%!important}.tablet\:w-10\/12{width:83.333333%!important}.tablet\:w-11\/12{width:91.666667%!important}.tablet\:w-2\/12{width:16.666667%!important}.tablet\:w-3\/12{width:25%!important}.tablet\:w-4\/12{width:33.333333%!important}.tablet\:w-5\/12{width:41.666667%!important}.tablet\:w-6\/12{width:50%!important}.tablet\:w-7\/12{width:58.333333%!important}.tablet\:w-8\/12{width:66.666667%!important}.tablet\:w-9\/12{width:75%!important}.tablet\:pr-0{padding-right:0!important}.tablet\:pr-4{padding-right:1rem!important}.group:hover .tablet\:group-hover\:flex{display:flex!important}.group:hover .tablet\:group-hover\:hidden{display:none!important}}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}.desktop-xs\:hidden{display:none!important}.desktop-xs\:w-1\/12{width:8.333333%!important}.desktop-xs\:w-10\/12{width:83.333333%!important}.desktop-xs\:w-11\/12{width:91.666667%!important}.desktop-xs\:w-2\/12{width:16.666667%!important}.desktop-xs\:w-3\/12{width:25%!important}.desktop-xs\:w-4\/12{width:33.333333%!important}.desktop-xs\:w-5\/12{width:41.666667%!important}.desktop-xs\:w-6\/12{width:50%!important}.desktop-xs\:w-7\/12{width:58.333333%!important}.desktop-xs\:w-8\/12{width:66.666667%!important}.desktop-xs\:w-9\/12{width:75%!important}.desktop-xs\:pr-0{padding-right:0!important}.desktop-xs\:pr-4{padding-right:1rem!important}.group:hover .desktop-xs\:group-hover\:flex{display:flex!important}.group:hover .desktop-xs\:group-hover\:hidden{display:none!important}}@media (min-width:80rem){.desktop-sm\:flex{display:flex!important}.desktop-sm\:hidden{display:none!important}.desktop-sm\:w-1\/12{width:8.333333%!important}.desktop-sm\:w-10\/12{width:83.333333%!important}.desktop-sm\:w-11\/12{width:91.666667%!important}.desktop-sm\:w-2\/12{width:16.666667%!important}.desktop-sm\:w-3\/12{width:25%!important}.desktop-sm\:w-4\/12{width:33.333333%!important}.desktop-sm\:w-5\/12{width:41.666667%!important}.desktop-sm\:w-6\/12{width:50%!important}.desktop-sm\:w-7\/12{width:58.333333%!important}.desktop-sm\:w-8\/12{width:66.666667%!important}.desktop-sm\:w-9\/12{width:75%!important}.desktop-sm\:pr-0{padding-right:0!important}.desktop-sm\:pr-4{padding-right:1rem!important}.group:hover .desktop-sm\:group-hover\:flex{display:flex!important}.group:hover .desktop-sm\:group-hover\:hidden{display:none!important}}@media (min-width:85.375rem){.desktop\:flex{display:flex!important}.desktop\:hidden{display:none!important}.desktop\:w-1\/12{width:8.333333%!important}.desktop\:w-10\/12{width:83.333333%!important}.desktop\:w-11\/12{width:91.666667%!important}.desktop\:w-2\/12{width:16.666667%!important}.desktop\:w-3\/12{width:25%!important}.desktop\:w-4\/12{width:33.333333%!important}.desktop\:w-5\/12{width:41.666667%!important}.desktop\:w-6\/12{width:50%!important}.desktop\:w-7\/12{width:58.333333%!important}.desktop\:w-8\/12{width:66.666667%!important}.desktop\:w-9\/12{width:75%!important}.desktop\:pr-0{padding-right:0!important}.desktop\:pr-4{padding-right:1rem!important}.group:hover .desktop\:group-hover\:flex{display:flex!important}.group:hover .desktop\:group-hover\:hidden{display:none!important}}@media (min-width:90rem){.desktop-lg\:flex{display:flex!important}.desktop-lg\:hidden{display:none!important}.desktop-lg\:w-1\/12{width:8.333333%!important}.desktop-lg\:w-10\/12{width:83.333333%!important}.desktop-lg\:w-11\/12{width:91.666667%!important}.desktop-lg\:w-2\/12{width:16.666667%!important}.desktop-lg\:w-3\/12{width:25%!important}.desktop-lg\:w-4\/12{width:33.333333%!important}.desktop-lg\:w-5\/12{width:41.666667%!important}.desktop-lg\:w-6\/12{width:50%!important}.desktop-lg\:w-7\/12{width:58.333333%!important}.desktop-lg\:w-8\/12{width:66.666667%!important}.desktop-lg\:w-9\/12{width:75%!important}.desktop-lg\:pr-0{padding-right:0!important}.desktop-lg\:pr-4{padding-right:1rem!important}.group:hover .desktop-lg\:group-hover\:flex{display:flex!important}.group:hover .desktop-lg\:group-hover\:hidden{display:none!important}}@media (min-width:120rem){.desktop-xl\:flex{display:flex!important}.desktop-xl\:hidden{display:none!important}.desktop-xl\:w-1\/12{width:8.333333%!important}.desktop-xl\:w-10\/12{width:83.333333%!important}.desktop-xl\:w-11\/12{width:91.666667%!important}.desktop-xl\:w-2\/12{width:16.666667%!important}.desktop-xl\:w-3\/12{width:25%!important}.desktop-xl\:w-4\/12{width:33.333333%!important}.desktop-xl\:w-5\/12{width:41.666667%!important}.desktop-xl\:w-6\/12{width:50%!important}.desktop-xl\:w-7\/12{width:58.333333%!important}.desktop-xl\:w-8\/12{width:66.666667%!important}.desktop-xl\:w-9\/12{width:75%!important}.desktop-xl\:pr-0{padding-right:0!important}.desktop-xl\:pr-4{padding-right:1rem!important}.group:hover .desktop-xl\:group-hover\:flex{display:flex!important}.group:hover .desktop-xl\:group-hover\:hidden{display:none!important}}.dark\:text-hurricane-200:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1!important;color:rgb(163 165 169/var(--tw-text-opacity,1))!important}.dark\:text-white:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.dark\:text-hurricane-200:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1!important;color:rgb(163 165 169/var(--tw-text-opacity,1))!important}.dark\:text-white:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}
+*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.table{display:table!important}.table-cell{display:table-cell!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-1\/12{width:8.333333%!important}.w-10\/12{width:83.333333%!important}.w-11\/12{width:91.666667%!important}.w-2\/12{width:16.666667%!important}.w-3\/12{width:25%!important}.w-4\/12{width:33.333333%!important}.w-5\/12{width:41.666667%!important}.w-6\/12{width:50%!important}.w-7\/12{width:58.333333%!important}.w-8\/12{width:66.666667%!important}.w-9\/12{width:75%!important}.w-\[calc\(100\%-1rem\)\]{width:calc(100% - 1rem)!important}.flex-1{flex:1 1 0%!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.rounded{border-radius:.25rem!important}.pl-8{padding-left:2rem!important}.pr-0{padding-right:0!important}.pr-4{padding-right:1rem!important}.text-center{text-align:center!important}.text-start{text-align:start!important}.text-end{text-align:end!important}.font-semibold{font-weight:600!important}.text-storm-300{--tw-text-opacity:1!important;color:rgb(116 120 127/var(--tw-text-opacity,1))!important}.text-storm-400{--tw-text-opacity:1!important;color:rgb(70 75 84/var(--tw-text-opacity,1))!important}.text-storm-500{--tw-text-opacity:1!important;color:rgb(24 30 41/var(--tw-text-opacity,1))!important}.last-of-type\:pr-0:last-of-type{padding-right:0!important}.group:hover .group-hover\:flex{display:flex!important}.group:hover .group-hover\:hidden{display:none!important}@media (min-width:40rem){.tablet\:flex{display:flex!important}.tablet\:hidden{display:none!important}.tablet\:w-1\/12{width:8.333333%!important}.tablet\:w-10\/12{width:83.333333%!important}.tablet\:w-11\/12{width:91.666667%!important}.tablet\:w-2\/12{width:16.666667%!important}.tablet\:w-3\/12{width:25%!important}.tablet\:w-4\/12{width:33.333333%!important}.tablet\:w-5\/12{width:41.666667%!important}.tablet\:w-6\/12{width:50%!important}.tablet\:w-7\/12{width:58.333333%!important}.tablet\:w-8\/12{width:66.666667%!important}.tablet\:w-9\/12{width:75%!important}.tablet\:pr-0{padding-right:0!important}.tablet\:pr-4{padding-right:1rem!important}.group:hover .tablet\:group-hover\:flex{display:flex!important}.group:hover .tablet\:group-hover\:hidden{display:none!important}}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}.desktop-xs\:hidden{display:none!important}.desktop-xs\:w-1\/12{width:8.333333%!important}.desktop-xs\:w-10\/12{width:83.333333%!important}.desktop-xs\:w-11\/12{width:91.666667%!important}.desktop-xs\:w-2\/12{width:16.666667%!important}.desktop-xs\:w-3\/12{width:25%!important}.desktop-xs\:w-4\/12{width:33.333333%!important}.desktop-xs\:w-5\/12{width:41.666667%!important}.desktop-xs\:w-6\/12{width:50%!important}.desktop-xs\:w-7\/12{width:58.333333%!important}.desktop-xs\:w-8\/12{width:66.666667%!important}.desktop-xs\:w-9\/12{width:75%!important}.desktop-xs\:pr-0{padding-right:0!important}.desktop-xs\:pr-4{padding-right:1rem!important}.group:hover .desktop-xs\:group-hover\:flex{display:flex!important}.group:hover .desktop-xs\:group-hover\:hidden{display:none!important}}@media (min-width:80rem){.desktop-sm\:flex{display:flex!important}.desktop-sm\:hidden{display:none!important}.desktop-sm\:w-1\/12{width:8.333333%!important}.desktop-sm\:w-10\/12{width:83.333333%!important}.desktop-sm\:w-11\/12{width:91.666667%!important}.desktop-sm\:w-2\/12{width:16.666667%!important}.desktop-sm\:w-3\/12{width:25%!important}.desktop-sm\:w-4\/12{width:33.333333%!important}.desktop-sm\:w-5\/12{width:41.666667%!important}.desktop-sm\:w-6\/12{width:50%!important}.desktop-sm\:w-7\/12{width:58.333333%!important}.desktop-sm\:w-8\/12{width:66.666667%!important}.desktop-sm\:w-9\/12{width:75%!important}.desktop-sm\:pr-0{padding-right:0!important}.desktop-sm\:pr-4{padding-right:1rem!important}.group:hover .desktop-sm\:group-hover\:flex{display:flex!important}.group:hover .desktop-sm\:group-hover\:hidden{display:none!important}}@media (min-width:85.375rem){.desktop\:flex{display:flex!important}.desktop\:hidden{display:none!important}.desktop\:w-1\/12{width:8.333333%!important}.desktop\:w-10\/12{width:83.333333%!important}.desktop\:w-11\/12{width:91.666667%!important}.desktop\:w-2\/12{width:16.666667%!important}.desktop\:w-3\/12{width:25%!important}.desktop\:w-4\/12{width:33.333333%!important}.desktop\:w-5\/12{width:41.666667%!important}.desktop\:w-6\/12{width:50%!important}.desktop\:w-7\/12{width:58.333333%!important}.desktop\:w-8\/12{width:66.666667%!important}.desktop\:w-9\/12{width:75%!important}.desktop\:pr-0{padding-right:0!important}.desktop\:pr-4{padding-right:1rem!important}.group:hover .desktop\:group-hover\:flex{display:flex!important}.group:hover .desktop\:group-hover\:hidden{display:none!important}}@media (min-width:90rem){.desktop-lg\:flex{display:flex!important}.desktop-lg\:hidden{display:none!important}.desktop-lg\:w-1\/12{width:8.333333%!important}.desktop-lg\:w-10\/12{width:83.333333%!important}.desktop-lg\:w-11\/12{width:91.666667%!important}.desktop-lg\:w-2\/12{width:16.666667%!important}.desktop-lg\:w-3\/12{width:25%!important}.desktop-lg\:w-4\/12{width:33.333333%!important}.desktop-lg\:w-5\/12{width:41.666667%!important}.desktop-lg\:w-6\/12{width:50%!important}.desktop-lg\:w-7\/12{width:58.333333%!important}.desktop-lg\:w-8\/12{width:66.666667%!important}.desktop-lg\:w-9\/12{width:75%!important}.desktop-lg\:pr-0{padding-right:0!important}.desktop-lg\:pr-4{padding-right:1rem!important}.group:hover .desktop-lg\:group-hover\:flex{display:flex!important}.group:hover .desktop-lg\:group-hover\:hidden{display:none!important}}@media (min-width:120rem){.desktop-xl\:flex{display:flex!important}.desktop-xl\:hidden{display:none!important}.desktop-xl\:w-1\/12{width:8.333333%!important}.desktop-xl\:w-10\/12{width:83.333333%!important}.desktop-xl\:w-11\/12{width:91.666667%!important}.desktop-xl\:w-2\/12{width:16.666667%!important}.desktop-xl\:w-3\/12{width:25%!important}.desktop-xl\:w-4\/12{width:33.333333%!important}.desktop-xl\:w-5\/12{width:41.666667%!important}.desktop-xl\:w-6\/12{width:50%!important}.desktop-xl\:w-7\/12{width:58.333333%!important}.desktop-xl\:w-8\/12{width:66.666667%!important}.desktop-xl\:w-9\/12{width:75%!important}.desktop-xl\:pr-0{padding-right:0!important}.desktop-xl\:pr-4{padding-right:1rem!important}.group:hover .desktop-xl\:group-hover\:flex{display:flex!important}.group:hover .desktop-xl\:group-hover\:hidden{display:none!important}}.dark\:text-hurricane-200:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1!important;color:rgb(163 165 169/var(--tw-text-opacity,1))!important}.dark\:text-white:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.dark\:text-hurricane-200:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1!important;color:rgb(163 165 169/var(--tw-text-opacity,1))!important}.dark\:text-white:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}

package/dist/collection/components/molecules/table/cell/table-cell.component.js

@@ -63,6 +63,10 @@ export class TableCell {
      * The checkbox to show
      */
     checkbox;
+    /**
+     * Wether the cell needs checkbox offset instead of a checkbox
+     */
+    checkboxOffset = false;
     /**
      * The template to show
      */
@@ -83,7 +87,7 @@ export class TableCell {
         };
     }
     render() {
-        return (h(ThemedHost, { key: 'cd757cfb2a27c50feef5127165eb99b071238872', class: this._getColumnClasses() }, this.checkbox, this._getContent(), false && (h(Fragment, { key: 'cee33b8580e78e39d2567b92696d4b38ebfa5c56' }, h("div", { key: '5d519c083da98149208c0e88ae7c9fd21c848e04', class: 'text-storm-300 text-storm-400 text-storm-500 dark:text-hurricane-200 dark:text-white' }), h("div", { key: 'f296e7adc1229b338d92a5d18eafba5f208b41ca', class: 'justify-start justify-end justify-center' }), h("div", { key: 'fd5854b0f3a24d482dbedca031e2184418bac4b4', class: 'font-semibold text-storm-300 text-storm-400 text-storm-500' }), h("div", { key: 'c780b3ac8c5a6c8c2b0f92d07537aed9358f447b', class: 'w-12/12 w-1/12 w-10/12 w-11/12 w-2/12 w-3/12 w-4/12 w-5/12 w-6/12 w-7/12 w-8/12 w-9/12' }), h("div", { key: '1ff079d3a61e419fca39119ad254415332546e71', class: 'tablet:w-12/12 tablet:w-1/12 tablet:w-10/12 tablet:w-11/12 tablet:w-2/12 tablet:w-3/12 tablet:w-4/12 tablet:w-5/12 tablet:w-6/12 tablet:w-7/12 tablet:w-8/12 tablet:w-9/12' }), h("div", { key: 'cd2fb0523fdcd1d9c26a60dc6fd808d46e8b7957', class: 'desktop-xs:w-12/12 desktop-xs:w-1/12 desktop-xs:w-10/12 desktop-xs:w-11/12 desktop-xs:w-2/12 desktop-xs:w-3/12 desktop-xs:w-4/12 desktop-xs:w-5/12 desktop-xs:w-6/12 desktop-xs:w-7/12 desktop-xs:w-8/12 desktop-xs:w-9/12' }), h("div", { key: '7bb766b68ebb4b1fdeb79de0e01b9fd005e89965', class: 'desktop-xs:w-12/12 desktop-xs:w-1/12 desktop-xs:w-10/12 desktop-xs:w-11/12 desktop-xs:w-2/12 desktop-xs:w-3/12 desktop-xs:w-4/12 desktop-xs:w-5/12 desktop-xs:w-6/12 desktop-xs:w-7/12 desktop-xs:w-8/12 desktop-xs:w-9/12' }), h("div", { key: 'a0b9a56086e2ae818d72fbafbf1b097bc73aed3e', class: 'desktop-sm:w-12/12 desktop-sm:w-1/12 desktop-sm:w-10/12 desktop-sm:w-11/12 desktop-sm:w-2/12 desktop-sm:w-3/12 desktop-sm:w-4/12 desktop-sm:w-5/12 desktop-sm:w-6/12 desktop-sm:w-7/12 desktop-sm:w-8/12 desktop-sm:w-9/12' }), h("div", { key: '9425fce4acd1a1a3c0bad85f7d172125baa09d63', class: 'desktop:w-12/12 desktop:w-1/12 desktop:w-10/12 desktop:w-11/12 desktop:w-2/12 desktop:w-3/12 desktop:w-4/12 desktop:w-5/12 desktop:w-6/12 desktop:w-7/12 desktop:w-8/12 desktop:w-9/12' }), h("div", { key: '7f599e6c359e1e1b8ce09153b1c13babba424a13', class: 'desktop-lg:w-12/12 desktop-lg:w-1/12 desktop-lg:w-10/12 desktop-lg:w-11/12 desktop-lg:w-2/12 desktop-lg:w-3/12 desktop-lg:w-4/12 desktop-lg:w-5/12 desktop-lg:w-6/12 desktop-lg:w-7/12 desktop-lg:w-8/12 desktop-lg:w-9/12' }), h("div", { key: 'c67bd330cc055edb416f0a6cc01b188a73c58462', class: 'desktop-xl:w-12/12 desktop-xl:w-1/12 desktop-xl:w-10/12 desktop-xl:w-11/12 desktop-xl:w-2/12 desktop-xl:w-3/12 desktop-xl:w-4/12 desktop-xl:w-5/12 desktop-xl:w-6/12 desktop-xl:w-7/12 desktop-xl:w-8/12 desktop-xl:w-9/12' }), h("div", { key: '166b82949ef1713f4eee23068bfde63b0bb0dff9', class: 'flex hidden group-hover:flex group-hover:hidden' }), h("div", { key: 'ad04aa8cf128d4fda3581907ba147f9f9d64df29', class: 'tablet:flex tablet:hidden tablet:group-hover:flex tablet:group-hover:hidden' }), h("div", { key: '96fca39ba7eae1c4b6d7f7a83ff5148784263d8d', class: 'desktop-xs:flex desktop-xs:hidden desktop-xs:group-hover:flex desktop-xs:group-hover:hidden' }), h("div", { key: '5f27fef437cc2ebc965b235e3e731f324c85590b', class: 'desktop-sm:flex desktop-sm:hidden  desktop-sm:group-hover:flex desktop-sm:group-hover:hidden' }), h("div", { key: '7b21f8a5056168a3906deb2d5b3bc7906715ad21', class: 'desktop:flex desktop:hidden desktop:group-hover:flex desktop:group-hover:hidden' }), h("div", { key: 'dd58cfc8bcc768ef574279ef43b2b20c368fab20', class: 'desktop-lg:flex desktop-lg:hidden desktop-lg:group-hover:flex desktop-lg:group-hover:hidden' }), h("div", { key: 'bf54fbdf8d971df872dd93f3499f7a0f20288711', class: 'desktop-xl:flex desktop-xl:hidden desktop-xl:group-hover:flex desktop-xl:group-hover:hidden' }), h("div", { key: 'e828635f2281c78e535781fc777bc32f5b6834f9', class: 'pr-0 pr-4 last-of-type:pr-0' }), h("div", { key: 'c9b0ea3df3103dca2c5a7cbaf9bf35f4160dfc19', class: 'tablet:pr-0 tablet:pr-4' }), h("div", { key: '55314977008960b068314740a686301700c589e2', class: 'desktop-xs:pr-0 desktop-xs:pr-4' }), h("div", { key: '2c5f60ccdd95eeea93165a3d06eb2b0cb07c8e0b', class: 'desktop-sm:pr-0 desktop-sm:pr-4' }), h("div", { key: '91e704406f68cfd88523055a197b0506360f8c9a', class: 'desktop:pr-0 desktop:pr-4' }), h("div", { key: '01f44080a5cae4940dcbf1fb1af538f2ca035da8', class: 'desktop-lg:pr-0 desktop-lg:pr-4' }), h("div", { key: '3419c371f9df3e6c5c7fa2ae4e1d1e9278169124', class: 'desktop-xl:pr-0 desktop-xl:pr-4' })))));
+        return (h(ThemedHost, { key: 'f848ead76672fc2c07711a0713b6a85ae91e967a', class: this._getColumnClasses() }, this.checkbox, this._getContent(), false && (h(Fragment, { key: '1994941caac1f1eb4af05ad82ab747951a95deb8' }, h("div", { key: '971286e8db4f601c69d2deddf6df057ee39c7614', class: 'pl-8' }), h("div", { key: '291e06d9773e491fa4dfad06d1a0943849800b9a', class: 'text-storm-300 text-storm-400 text-storm-500 dark:text-hurricane-200 dark:text-white' }), h("div", { key: '4ad0407482770d539a255b928f7061caa318a2a5', class: 'justify-start justify-end justify-center' }), h("div", { key: 'f1a93933355f3e8a8581a7319f39b52bba545048', class: 'font-semibold text-storm-300 text-storm-400 text-storm-500' }), h("div", { key: '9590a243d0f032298ead37f4fbb549ab7a80c58d', class: 'w-12/12 w-1/12 w-10/12 w-11/12 w-2/12 w-3/12 w-4/12 w-5/12 w-6/12 w-7/12 w-8/12 w-9/12' }), h("div", { key: '07f22a8ef3c353e9956f9a4f1835bf1d00297a64', class: 'tablet:w-12/12 tablet:w-1/12 tablet:w-10/12 tablet:w-11/12 tablet:w-2/12 tablet:w-3/12 tablet:w-4/12 tablet:w-5/12 tablet:w-6/12 tablet:w-7/12 tablet:w-8/12 tablet:w-9/12' }), h("div", { key: '1f1299f9532a86cee84592f9f90bde37401462ed', class: 'desktop-xs:w-12/12 desktop-xs:w-1/12 desktop-xs:w-10/12 desktop-xs:w-11/12 desktop-xs:w-2/12 desktop-xs:w-3/12 desktop-xs:w-4/12 desktop-xs:w-5/12 desktop-xs:w-6/12 desktop-xs:w-7/12 desktop-xs:w-8/12 desktop-xs:w-9/12' }), h("div", { key: 'cd51dc52d5eabe9a7495cdf3beb94ea317eae05c', class: 'desktop-xs:w-12/12 desktop-xs:w-1/12 desktop-xs:w-10/12 desktop-xs:w-11/12 desktop-xs:w-2/12 desktop-xs:w-3/12 desktop-xs:w-4/12 desktop-xs:w-5/12 desktop-xs:w-6/12 desktop-xs:w-7/12 desktop-xs:w-8/12 desktop-xs:w-9/12' }), h("div", { key: '2576e85451dd979da23f4a57f23b17b46cf846f5', class: 'desktop-sm:w-12/12 desktop-sm:w-1/12 desktop-sm:w-10/12 desktop-sm:w-11/12 desktop-sm:w-2/12 desktop-sm:w-3/12 desktop-sm:w-4/12 desktop-sm:w-5/12 desktop-sm:w-6/12 desktop-sm:w-7/12 desktop-sm:w-8/12 desktop-sm:w-9/12' }), h("div", { key: '5bd7d23f19190c2a44f9125f1153a0e7f2df56fe', class: 'desktop:w-12/12 desktop:w-1/12 desktop:w-10/12 desktop:w-11/12 desktop:w-2/12 desktop:w-3/12 desktop:w-4/12 desktop:w-5/12 desktop:w-6/12 desktop:w-7/12 desktop:w-8/12 desktop:w-9/12' }), h("div", { key: 'd4bf628a6f3c0d77a4f900e8573d80a5eb388014', class: 'desktop-lg:w-12/12 desktop-lg:w-1/12 desktop-lg:w-10/12 desktop-lg:w-11/12 desktop-lg:w-2/12 desktop-lg:w-3/12 desktop-lg:w-4/12 desktop-lg:w-5/12 desktop-lg:w-6/12 desktop-lg:w-7/12 desktop-lg:w-8/12 desktop-lg:w-9/12' }), h("div", { key: '3fc7ed0a5130fe18901006d1a14aee0525e65f92', class: 'desktop-xl:w-12/12 desktop-xl:w-1/12 desktop-xl:w-10/12 desktop-xl:w-11/12 desktop-xl:w-2/12 desktop-xl:w-3/12 desktop-xl:w-4/12 desktop-xl:w-5/12 desktop-xl:w-6/12 desktop-xl:w-7/12 desktop-xl:w-8/12 desktop-xl:w-9/12' }), h("div", { key: '714fb5dab671da8eed01f67b90601cd7b656ac8f', class: 'flex hidden group-hover:flex group-hover:hidden' }), h("div", { key: '4075653b086695de42b6c3d369f5509a944a2ac8', class: 'tablet:flex tablet:hidden tablet:group-hover:flex tablet:group-hover:hidden' }), h("div", { key: '7bbf87f66ab6c5699528df578cd2ea19b10a406b', class: 'desktop-xs:flex desktop-xs:hidden desktop-xs:group-hover:flex desktop-xs:group-hover:hidden' }), h("div", { key: '5fdcb3bec6567b059fddd39fa6983d9e5a084a63', class: 'desktop-sm:flex desktop-sm:hidden  desktop-sm:group-hover:flex desktop-sm:group-hover:hidden' }), h("div", { key: '998414a192058dfb57b68eb59a5cc4992694a934', class: 'desktop:flex desktop:hidden desktop:group-hover:flex desktop:group-hover:hidden' }), h("div", { key: 'f9bb15a077cb16fd44d370977b2a185b50bd4d3e', class: 'desktop-lg:flex desktop-lg:hidden desktop-lg:group-hover:flex desktop-lg:group-hover:hidden' }), h("div", { key: 'afa1f226b531c716e7474e06bed6210263c2fb07', class: 'desktop-xl:flex desktop-xl:hidden desktop-xl:group-hover:flex desktop-xl:group-hover:hidden' }), h("div", { key: '9e897ecbf0747bc43bcb7af75fde0d80deae3234', class: 'pr-0 pr-4 last-of-type:pr-0' }), h("div", { key: '591d5da586ccc3d8d4f58d90a529793ff00bb5a4', class: 'tablet:pr-0 tablet:pr-4' }), h("div", { key: 'd7974ba53ef8332217df264e548de0d300046ae3', class: 'desktop-xs:pr-0 desktop-xs:pr-4' }), h("div", { key: 'f3913ab6699df94225ace5caf60c2d9df791e847', class: 'desktop-sm:pr-0 desktop-sm:pr-4' }), h("div", { key: 'd5baccd7a1827c7a30878ac7bc97c70118dbdefa', class: 'desktop:pr-0 desktop:pr-4' }), h("div", { key: '251ef84d91306dbc50fc029bbf44a330499a53c0', class: 'desktop-lg:pr-0 desktop-lg:pr-4' }), h("div", { key: 'f59fd27fa39b4bb40cc98108f71be4550b28df43', class: 'desktop-xl:pr-0 desktop-xl:pr-4' })))));
     }
     _getContent() {
         if (this.variant === 'loading') {
@@ -101,10 +105,10 @@ export class TableCell {
                         this.definition.align === 'start'),
                 'text-center': !this.definition.flex && this.definition.align === 'center',
                 'text-end': !this.definition.flex && this.definition.align === 'end',
-            }) }, this.variant === 'header' ? (this.data.value) : this.definition.useSlot ? (h("slot", null)) : (this.template(this.data))));
+            }) }, this.variant === 'header' || this.variant === 'header-secondary' ? (this.data.value) : this.definition.useSlot ? (h("slot", null)) : (this.template(this.data))));
     }
     _getColumnClasses() {
-        return cn(getTableCellColumnClasses(this.definition, this.variant));
+        return cn(getTableCellColumnClasses(this.definition, this.variant, this.checkboxOffset));
     }
     static get is() { return "p-table-cell"; }
     static get originalStyleUrls() {
@@ -124,8 +128,8 @@ export class TableCell {
                 "attribute": "variant",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'loading' | 'header'",
-                    "resolved": "\"default\" | \"header\" | \"loading\"",
+                    "original": "'default' | 'loading' | 'header' | 'header-secondary'",
+                    "resolved": "\"default\" | \"header\" | \"header-secondary\" | \"loading\"",
                     "references": {}
                 },
                 "required": false,
@@ -259,6 +263,26 @@ export class TableCell {
                 "setter": false,
                 "reflect": false
             },
+            "checkboxOffset": {
+                "type": "boolean",
+                "attribute": "checkbox-offset",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether the cell needs checkbox offset instead of a checkbox"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "template": {
                 "type": "unknown",
                 "attribute": "template",

package/dist/collection/components/molecules/table/cell/table-cell.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-cell.component.js","sourceRoot":"","sources":["../../../../../src/components/molecules/table/cell/table-cell.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Fragment, h, Prop } from '@stencil/core';\nimport {\n\tTableDefinitionData,\n\tTableDefinitionTemplateFunc,\n} from '../../../../types';\nimport { getTableCellColumnClasses, objectGetByPath } from '../../../../utils';\n\nimport { ThemedHost } from '../../../../internal/themed-host.component';\nimport { cn } from '../../../../utils/cn';\nimport { TableColumn } from '../../../helpers/table/column/table-column.component';\n\n/*\n     With this, we shall hack the system in ways no one would ever have thought.\n\n\n        ⠀⠀⠀⠀⠀⣠⣴⣶⣿⣿⠿⣷⣶⣤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣴⣶⣷⠿⣿⣿⣶⣦⣀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⢀⣾⣿⣿⣿⣿⣿⣿⣿⣶⣦⣬⡉⠒⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠚⢉⣥⣴⣾⣿⣿⣿⣿⣿⣿⣿⣧⠀⠀⠀⠀\n        ⠀⠀⠀⡾⠿⠛⠛⠛⠛⠿⢿⣿⣿⣿⣿⣿⣷⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣾⣿⣿⣿⣿⣿⠿⠿⠛⠛⠛⠛⠿⢧⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠻⣿⣿⣿⣿⣿⡄⠀⠀⠀⠀⠀⠀⣠⣿⣿⣿⣿⡿⠟⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⢰⣿⡿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⣠⣤⠶⠶⠶⠰⠦⣤⣀⠀⠙⣷⠀⠀⠀⠀⠀⠀⠀⢠⡿⠋⢀⣀⣤⢴⠆⠲⠶⠶⣤⣄⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠘⣆⠀⠀⢠⣾⣫⣶⣾⣿⣿⣿⣿⣷⣯⣿⣦⠈⠃⡇⠀⠀⠀⠀⢸⠘⢁⣶⣿⣵⣾⣿⣿⣿⣿⣷⣦⣝⣷⡄⠀⠀⡰⠂⠀\n        ⠀⠀⣨⣷⣶⣿⣧⣛⣛⠿⠿⣿⢿⣿⣿⣛⣿⡿⠀⠀⡇⠀⠀⠀⠀⢸⠀⠈⢿⣟⣛⠿⢿⡿⢿⢿⢿⣛⣫⣼⡿⣶⣾⣅⡀⠀\n        ⢀⡼⠋⠁⠀⠀⠈⠉⠛⠛⠻⠟⠸⠛⠋⠉⠁⠀⠀⢸⡇⠀⠀⠄⠀⢸⡄⠀⠀⠈⠉⠙⠛⠃⠻⠛⠛⠛⠉⠁⠀⠀⠈⠙⢧⡀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣿⡇⢠⠀⠀⠀⢸⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣾⣿⡇⠀⠀⠀⠀⢸⣿⣷⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠟⠁⣿⠇⠀⠀⠀⠀⢸⡇⠙⢿⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠰⣄⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣾⠖⡾⠁⠀⠀⣿⠀⠀⠀⠀⠀⠘⣿⠀⠀⠙⡇⢸⣷⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠄⠀\n        ⠀⠀⢻⣷⡦⣤⣤⣤⡴⠶⠿⠛⠉⠁⠀⢳⠀⢠⡀⢿⣀⠀⠀⠀⠀⣠⡟⢀⣀⢠⠇⠀⠈⠙⠛⠷⠶⢦⣤⣤⣤⢴⣾⡏⠀⠀\n        ⠀⠀⠈⣿⣧⠙⣿⣷⣄⠀⠀⠀⠀⠀⠀⠀⠀⠘⠛⢊⣙⠛⠒⠒⢛⣋⡚⠛⠉⠀⠀⠀⠀⠀⠀⠀⠀⣠⣿⡿⠁⣾⡿⠀⠀⠀\n        ⠀⠀⠀⠘⣿⣇⠈⢿⣿⣦⠀⠀⠀⠀⠀⠀⠀⠀⣰⣿⣿⣿⡿⢿⣿⣿⣿⣆⠀⠀⠀⠀⠀⠀⠀⢀⣼⣿⡟⠁⣼⡿⠁⠀⠀⠀\n        ⠀⠀⠀⠀⠘⣿⣦⠀⠻⣿⣷⣦⣤⣤⣶⣶⣶⣿⣿⣿⣿⠏⠀⠀⠻⣿⣿⣿⣿⣶⣶⣶⣦⣤⣴⣿⣿⠏⢀⣼⡿⠁⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠘⢿⣷⣄⠙⠻⠿⠿⠿⠿⠿⢿⣿⣿⣿⣁⣀⣀⣀⣀⣙⣿⣿⣿⠿⠿⠿⠿⠿⠿⠟⠁⣠⣿⡿⠁⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠈⠻⣯⠙⢦⣀⠀⠀⠀⠀⠀⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠀⠀⠀⠀⠀⣠⠴⢋⣾⠟⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠙⢧⡀⠈⠉⠒⠀⠀⠀⠀⠀⠀⣀⠀⠀⠀⠀⢀⠀⠀⠀⠀⠀⠐⠒⠉⠁⢀⡾⠃⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀⠀⠻⣿⣿⣿⣿⠋⠀⠀⠀⠀⠀⠀⠀⠀⣠⠟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⢦⡀⠀⠀⠀⠀⠀⠀⠀⣸⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⢀⡴⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⣿⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n    */\n@Component({\n\ttag: 'p-table-cell',\n\tstyleUrl: 'table-cell.component.css',\n})\nexport class TableCell {\n\t/**\n\t * The variant of the column\n\t */\n\t@Prop() variant: 'default' | 'loading' | 'header' = 'default';\n\n\t/**\n\t * The index of the column\n\t */\n\t@Prop() index: number;\n\n\t/**\n\t * The index of the row\n\t */\n\t@Prop() rowIndex: number;\n\n\t/**\n\t * The definition of the table column\n\t */\n\t@Prop() definition?: TableColumn | any;\n\n\t/**\n\t * The item in question\n\t */\n\t@Prop() item: any;\n\n\t/**\n\t * The value of the column\n\t */\n\t@Prop() value: any;\n\n\t/**\n\t * The checkbox to show\n\t */\n\t@Prop() checkbox: any;\n\n\t/**\n\t * The template to show\n\t */\n\t@Prop() template: TableDefinitionTemplateFunc = ({\n\t\tvalue,\n\t}: TableDefinitionData) => value;\n\n\tget data(): TableDefinitionData | { value: string } {\n\t\tif (this.variant === 'header') {\n\t\t\treturn {\n\t\t\t\tvalue: this.value,\n\t\t\t};\n\t\t}\n\n\t\treturn {\n\t\t\tvalue:\n\t\t\t\tthis.value ?? this.definition?.path\n\t\t\t\t\t? objectGetByPath(this.item, this.definition.path)\n\t\t\t\t\t: null,\n\t\t\titem: this.item,\n\t\t\tindex: this.index,\n\t\t\trowIndex: this.rowIndex,\n\t\t};\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<ThemedHost class={this._getColumnClasses()}>\n\t\t\t\t{this.checkbox}\n\n\t\t\t\t{this._getContent()}\n\n\t\t\t\t{false && (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t<div class='text-storm-300 text-storm-400 text-storm-500 dark:text-hurricane-200 dark:text-white'></div>\n\t\t\t\t\t\t<div class='justify-start justify-end justify-center'></div>\n\t\t\t\t\t\t<div class='font-semibold text-storm-300 text-storm-400 text-storm-500'></div>\n\t\t\t\t\t\t<div class='w-12/12 w-1/12 w-10/12 w-11/12 w-2/12 w-3/12 w-4/12 w-5/12 w-6/12 w-7/12 w-8/12 w-9/12'></div>\n\t\t\t\t\t\t<div class='tablet:w-12/12 tablet:w-1/12 tablet:w-10/12 tablet:w-11/12 tablet:w-2/12 tablet:w-3/12 tablet:w-4/12 tablet:w-5/12 tablet:w-6/12 tablet:w-7/12 tablet:w-8/12 tablet:w-9/12'></div>\n\t\t\t\t\t\t<div class='desktop-xs:w-12/12 desktop-xs:w-1/12 desktop-xs:w-10/12 desktop-xs:w-11/12 desktop-xs:w-2/12 desktop-xs:w-3/12 desktop-xs:w-4/12 desktop-xs:w-5/12 desktop-xs:w-6/12 desktop-xs:w-7/12 desktop-xs:w-8/12 desktop-xs:w-9/12'></div>\n\t\t\t\t\t\t<div class='desktop-xs:w-12/12 desktop-xs:w-1/12 desktop-xs:w-10/12 desktop-xs:w-11/12 desktop-xs:w-2/12 desktop-xs:w-3/12 desktop-xs:w-4/12 desktop-xs:w-5/12 desktop-xs:w-6/12 desktop-xs:w-7/12 desktop-xs:w-8/12 desktop-xs:w-9/12'></div>\n\t\t\t\t\t\t<div class='desktop-sm:w-12/12 desktop-sm:w-1/12 desktop-sm:w-10/12 desktop-sm:w-11/12 desktop-sm:w-2/12 desktop-sm:w-3/12 desktop-sm:w-4/12 desktop-sm:w-5/12 desktop-sm:w-6/12 desktop-sm:w-7/12 desktop-sm:w-8/12 desktop-sm:w-9/12'></div>\n\t\t\t\t\t\t<div class='desktop:w-12/12 desktop:w-1/12 desktop:w-10/12 desktop:w-11/12 desktop:w-2/12 desktop:w-3/12 desktop:w-4/12 desktop:w-5/12 desktop:w-6/12 desktop:w-7/12 desktop:w-8/12 desktop:w-9/12'></div>\n\t\t\t\t\t\t<div class='desktop-lg:w-12/12 desktop-lg:w-1/12 desktop-lg:w-10/12 desktop-lg:w-11/12 desktop-lg:w-2/12 desktop-lg:w-3/12 desktop-lg:w-4/12 desktop-lg:w-5/12 desktop-lg:w-6/12 desktop-lg:w-7/12 desktop-lg:w-8/12 desktop-lg:w-9/12'></div>\n\t\t\t\t\t\t<div class='desktop-xl:w-12/12 desktop-xl:w-1/12 desktop-xl:w-10/12 desktop-xl:w-11/12 desktop-xl:w-2/12 desktop-xl:w-3/12 desktop-xl:w-4/12 desktop-xl:w-5/12 desktop-xl:w-6/12 desktop-xl:w-7/12 desktop-xl:w-8/12 desktop-xl:w-9/12'></div>\n\t\t\t\t\t\t<div class='flex hidden group-hover:flex group-hover:hidden'></div>\n\t\t\t\t\t\t<div class='tablet:flex tablet:hidden tablet:group-hover:flex tablet:group-hover:hidden'></div>\n\t\t\t\t\t\t<div class='desktop-xs:flex desktop-xs:hidden desktop-xs:group-hover:flex desktop-xs:group-hover:hidden'></div>\n\t\t\t\t\t\t<div class='desktop-sm:flex desktop-sm:hidden  desktop-sm:group-hover:flex desktop-sm:group-hover:hidden'></div>\n\t\t\t\t\t\t<div class='desktop:flex desktop:hidden desktop:group-hover:flex desktop:group-hover:hidden'></div>\n\t\t\t\t\t\t<div class='desktop-lg:flex desktop-lg:hidden desktop-lg:group-hover:flex desktop-lg:group-hover:hidden'></div>\n\t\t\t\t\t\t<div class='desktop-xl:flex desktop-xl:hidden desktop-xl:group-hover:flex desktop-xl:group-hover:hidden'></div>\n\t\t\t\t\t\t<div class='pr-0 pr-4 last-of-type:pr-0'></div>\n\t\t\t\t\t\t<div class='tablet:pr-0 tablet:pr-4'></div>\n\t\t\t\t\t\t<div class='desktop-xs:pr-0 desktop-xs:pr-4'></div>\n\t\t\t\t\t\t<div class='desktop-sm:pr-0 desktop-sm:pr-4'></div>\n\t\t\t\t\t\t<div class='desktop:pr-0 desktop:pr-4'></div>\n\t\t\t\t\t\t<div class='desktop-lg:pr-0 desktop-lg:pr-4'></div>\n\t\t\t\t\t\t<div class='desktop-xl:pr-0 desktop-xl:pr-4'></div>\n\t\t\t\t\t</Fragment>\n\t\t\t\t)}\n\t\t\t</ThemedHost>\n\t\t);\n\t}\n\n\tprivate _getContent() {\n\t\tif (this.variant === 'loading') {\n\t\t\treturn (\n\t\t\t\t<p-loader\n\t\t\t\t\tvariant='ghost'\n\t\t\t\t\tclass='h-6 w-[calc(100%-1rem)] flex-1 rounded'\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={cn('overflow-hidden text-ellipsis', {\n\t\t\t\t\tflex: this.definition.flex,\n\t\t\t\t\t'justify-start':\n\t\t\t\t\t\tthis.definition.flex &&\n\t\t\t\t\t\t(this.definition.align === undefined ||\n\t\t\t\t\t\t\tthis.definition.align === 'start'),\n\t\t\t\t\t'justify-end':\n\t\t\t\t\t\tthis.definition.flex && this.definition.align === 'end',\n\t\t\t\t\t'justify-center':\n\t\t\t\t\t\tthis.definition.flex && this.definition.align === 'end',\n\t\t\t\t\t'text-start':\n\t\t\t\t\t\t!this.definition.flex &&\n\t\t\t\t\t\t(this.definition.align === undefined ||\n\t\t\t\t\t\t\tthis.definition.align === 'start'),\n\t\t\t\t\t'text-center':\n\t\t\t\t\t\t!this.definition.flex && this.definition.align === 'center',\n\t\t\t\t\t'text-end': !this.definition.flex && this.definition.align === 'end',\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{this.variant === 'header' ? (\n\t\t\t\t\tthis.data.value\n\t\t\t\t) : this.definition.useSlot ? (\n\t\t\t\t\t<slot />\n\t\t\t\t) : (\n\t\t\t\t\tthis.template(this.data as TableDefinitionData)\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate _getColumnClasses() {\n\t\treturn cn(getTableCellColumnClasses(this.definition, this.variant));\n\t}\n}\n"]}
+{"version":3,"file":"table-cell.component.js","sourceRoot":"","sources":["../../../../../src/components/molecules/table/cell/table-cell.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAK7D,OAAO,EAAE,yBAAyB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAE/E,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AACxE,OAAO,EAAE,EAAE,EAAE,MAAM,sBAAsB,CAAC;AAG1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA+BM;AAKN,MAAM,OAAO,SAAS;IACrB;;OAEG;IACK,OAAO,GACd,SAAS,CAAC;IAEX;;OAEG;IACK,KAAK,CAAS;IAEtB;;OAEG;IACK,QAAQ,CAAS;IAEzB;;OAEG;IACK,UAAU,CAAqB;IAEvC;;OAEG;IACK,IAAI,CAAM;IAElB;;OAEG;IACK,KAAK,CAAM;IAEnB;;OAEG;IACK,QAAQ,CAAM;IAEtB;;OAEG;IACK,cAAc,GAAY,KAAK,CAAC;IAExC;;OAEG;IACK,QAAQ,GAAgC,CAAC,EAChD,KAAK,GACgB,EAAE,EAAE,CAAC,KAAK,CAAC;IAEjC,IAAI,IAAI;QACP,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;YAC/B,OAAO;gBACN,KAAK,EAAE,IAAI,CAAC,KAAK;aACjB,CAAC;QACH,CAAC;QAED,OAAO;YACN,KAAK,EACJ,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,EAAE,IAAI;gBAClC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;gBAClD,CAAC,CAAC,IAAI;YACR,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACvB,CAAC;IACH,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,UAAU,qDAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE;YACzC,IAAI,CAAC,QAAQ;YAEb,IAAI,CAAC,WAAW,EAAE;YAElB,KAAK,IAAI,CACT,EAAC,QAAQ;gBACR,4DAAK,KAAK,EAAC,MAAM,GAAO;gBACxB,4DAAK,KAAK,EAAC,sFAAsF,GAAO;gBACxG,4DAAK,KAAK,EAAC,0CAA0C,GAAO;gBAC5D,4DAAK,KAAK,EAAC,4DAA4D,GAAO;gBAC9E,4DAAK,KAAK,EAAC,wFAAwF,GAAO;gBAC1G,4DAAK,KAAK,EAAC,4KAA4K,GAAO;gBAC9L,4DAAK,KAAK,EAAC,4NAA4N,GAAO;gBAC9O,4DAAK,KAAK,EAAC,4NAA4N,GAAO;gBAC9O,4DAAK,KAAK,EAAC,4NAA4N,GAAO;gBAC9O,4DAAK,KAAK,EAAC,wLAAwL,GAAO;gBAC1M,4DAAK,KAAK,EAAC,4NAA4N,GAAO;gBAC9O,4DAAK,KAAK,EAAC,4NAA4N,GAAO;gBAC9O,4DAAK,KAAK,EAAC,iDAAiD,GAAO;gBACnE,4DAAK,KAAK,EAAC,6EAA6E,GAAO;gBAC/F,4DAAK,KAAK,EAAC,6FAA6F,GAAO;gBAC/G,4DAAK,KAAK,EAAC,8FAA8F,GAAO;gBAChH,4DAAK,KAAK,EAAC,iFAAiF,GAAO;gBACnG,4DAAK,KAAK,EAAC,6FAA6F,GAAO;gBAC/G,4DAAK,KAAK,EAAC,6FAA6F,GAAO;gBAC/G,4DAAK,KAAK,EAAC,6BAA6B,GAAO;gBAC/C,4DAAK,KAAK,EAAC,yBAAyB,GAAO;gBAC3C,4DAAK,KAAK,EAAC,iCAAiC,GAAO;gBACnD,4DAAK,KAAK,EAAC,iCAAiC,GAAO;gBACnD,4DAAK,KAAK,EAAC,2BAA2B,GAAO;gBAC7C,4DAAK,KAAK,EAAC,iCAAiC,GAAO;gBACnD,4DAAK,KAAK,EAAC,iCAAiC,GAAO,CACzC,CACX,CACW,CACb,CAAC;IACH,CAAC;IAEO,WAAW;QAClB,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAChC,OAAO,CACN,gBACC,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,wCAAwC,GAC7C,CACF,CAAC;QACH,CAAC;QAED,OAAO,CACN,WACC,KAAK,EAAE,EAAE,CAAC,+BAA+B,EAAE;gBAC1C,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI;gBAC1B,eAAe,EACd,IAAI,CAAC,UAAU,CAAC,IAAI;oBACpB,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,SAAS;wBACnC,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,OAAO,CAAC;gBACpC,aAAa,EACZ,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,KAAK;gBACxD,gBAAgB,EACf,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,KAAK;gBACxD,YAAY,EACX,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI;oBACrB,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,SAAS;wBACnC,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,OAAO,CAAC;gBACpC,aAAa,EACZ,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,QAAQ;gBAC5D,UAAU,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,KAAK;aACpE,CAAC,IAED,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,kBAAkB,CAAC,CAAC,CAAC,CACnE,IAAI,CAAC,IAAI,CAAC,KAAK,CACf,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAC7B,eAAQ,CACR,CAAC,CAAC,CAAC,CACH,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAA2B,CAAC,CAC/C,CACI,CACN,CAAC;IACH,CAAC;IAEO,iBAAiB;QACxB,OAAO,EAAE,CACR,yBAAyB,CACxB,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,cAAc,CACnB,CACD,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Fragment, h, Prop } from '@stencil/core';\nimport {\n\tTableDefinitionData,\n\tTableDefinitionTemplateFunc,\n} from '../../../../types';\nimport { getTableCellColumnClasses, objectGetByPath } from '../../../../utils';\n\nimport { ThemedHost } from '../../../../internal/themed-host.component';\nimport { cn } from '../../../../utils/cn';\nimport { TableColumn } from '../../../helpers/table/column/table-column.component';\n\n/*\n     With this, we shall hack the system in ways no one would ever have thought.\n\n\n        ⠀⠀⠀⠀⠀⣠⣴⣶⣿⣿⠿⣷⣶⣤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣴⣶⣷⠿⣿⣿⣶⣦⣀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⢀⣾⣿⣿⣿⣿⣿⣿⣿⣶⣦⣬⡉⠒⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠚⢉⣥⣴⣾⣿⣿⣿⣿⣿⣿⣿⣧⠀⠀⠀⠀\n        ⠀⠀⠀⡾⠿⠛⠛⠛⠛⠿⢿⣿⣿⣿⣿⣿⣷⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣾⣿⣿⣿⣿⣿⠿⠿⠛⠛⠛⠛⠿⢧⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠻⣿⣿⣿⣿⣿⡄⠀⠀⠀⠀⠀⠀⣠⣿⣿⣿⣿⡿⠟⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⢰⣿⡿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⣠⣤⠶⠶⠶⠰⠦⣤⣀⠀⠙⣷⠀⠀⠀⠀⠀⠀⠀⢠⡿⠋⢀⣀⣤⢴⠆⠲⠶⠶⣤⣄⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠘⣆⠀⠀⢠⣾⣫⣶⣾⣿⣿⣿⣿⣷⣯⣿⣦⠈⠃⡇⠀⠀⠀⠀⢸⠘⢁⣶⣿⣵⣾⣿⣿⣿⣿⣷⣦⣝⣷⡄⠀⠀⡰⠂⠀\n        ⠀⠀⣨⣷⣶⣿⣧⣛⣛⠿⠿⣿⢿⣿⣿⣛⣿⡿⠀⠀⡇⠀⠀⠀⠀⢸⠀⠈⢿⣟⣛⠿⢿⡿⢿⢿⢿⣛⣫⣼⡿⣶⣾⣅⡀⠀\n        ⢀⡼⠋⠁⠀⠀⠈⠉⠛⠛⠻⠟⠸⠛⠋⠉⠁⠀⠀⢸⡇⠀⠀⠄⠀⢸⡄⠀⠀⠈⠉⠙⠛⠃⠻⠛⠛⠛⠉⠁⠀⠀⠈⠙⢧⡀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣿⡇⢠⠀⠀⠀⢸⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣾⣿⡇⠀⠀⠀⠀⢸⣿⣷⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠟⠁⣿⠇⠀⠀⠀⠀⢸⡇⠙⢿⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠰⣄⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣾⠖⡾⠁⠀⠀⣿⠀⠀⠀⠀⠀⠘⣿⠀⠀⠙⡇⢸⣷⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠄⠀\n        ⠀⠀⢻⣷⡦⣤⣤⣤⡴⠶⠿⠛⠉⠁⠀⢳⠀⢠⡀⢿⣀⠀⠀⠀⠀⣠⡟⢀⣀⢠⠇⠀⠈⠙⠛⠷⠶⢦⣤⣤⣤⢴⣾⡏⠀⠀\n        ⠀⠀⠈⣿⣧⠙⣿⣷⣄⠀⠀⠀⠀⠀⠀⠀⠀⠘⠛⢊⣙⠛⠒⠒⢛⣋⡚⠛⠉⠀⠀⠀⠀⠀⠀⠀⠀⣠⣿⡿⠁⣾⡿⠀⠀⠀\n        ⠀⠀⠀⠘⣿⣇⠈⢿⣿⣦⠀⠀⠀⠀⠀⠀⠀⠀⣰⣿⣿⣿⡿⢿⣿⣿⣿⣆⠀⠀⠀⠀⠀⠀⠀⢀⣼⣿⡟⠁⣼⡿⠁⠀⠀⠀\n        ⠀⠀⠀⠀⠘⣿⣦⠀⠻⣿⣷⣦⣤⣤⣶⣶⣶⣿⣿⣿⣿⠏⠀⠀⠻⣿⣿⣿⣿⣶⣶⣶⣦⣤⣴⣿⣿⠏⢀⣼⡿⠁⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠘⢿⣷⣄⠙⠻⠿⠿⠿⠿⠿⢿⣿⣿⣿⣁⣀⣀⣀⣀⣙⣿⣿⣿⠿⠿⠿⠿⠿⠿⠟⠁⣠⣿⡿⠁⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠈⠻⣯⠙⢦⣀⠀⠀⠀⠀⠀⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠀⠀⠀⠀⠀⣠⠴⢋⣾⠟⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠙⢧⡀⠈⠉⠒⠀⠀⠀⠀⠀⠀⣀⠀⠀⠀⠀⢀⠀⠀⠀⠀⠀⠐⠒⠉⠁⢀⡾⠃⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀⠀⠻⣿⣿⣿⣿⠋⠀⠀⠀⠀⠀⠀⠀⠀⣠⠟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⢦⡀⠀⠀⠀⠀⠀⠀⠀⣸⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⢀⡴⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⣿⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n    */\n@Component({\n\ttag: 'p-table-cell',\n\tstyleUrl: 'table-cell.component.css',\n})\nexport class TableCell {\n\t/**\n\t * The variant of the column\n\t */\n\t@Prop() variant: 'default' | 'loading' | 'header' | 'header-secondary' =\n\t\t'default';\n\n\t/**\n\t * The index of the column\n\t */\n\t@Prop() index: number;\n\n\t/**\n\t * The index of the row\n\t */\n\t@Prop() rowIndex: number;\n\n\t/**\n\t * The definition of the table column\n\t */\n\t@Prop() definition?: TableColumn | any;\n\n\t/**\n\t * The item in question\n\t */\n\t@Prop() item: any;\n\n\t/**\n\t * The value of the column\n\t */\n\t@Prop() value: any;\n\n\t/**\n\t * The checkbox to show\n\t */\n\t@Prop() checkbox: any;\n\n\t/**\n\t * Wether the cell needs checkbox offset instead of a checkbox\n\t */\n\t@Prop() checkboxOffset: boolean = false;\n\n\t/**\n\t * The template to show\n\t */\n\t@Prop() template: TableDefinitionTemplateFunc = ({\n\t\tvalue,\n\t}: TableDefinitionData) => value;\n\n\tget data(): TableDefinitionData | { value: string } {\n\t\tif (this.variant === 'header') {\n\t\t\treturn {\n\t\t\t\tvalue: this.value,\n\t\t\t};\n\t\t}\n\n\t\treturn {\n\t\t\tvalue:\n\t\t\t\tthis.value ?? this.definition?.path\n\t\t\t\t\t? objectGetByPath(this.item, this.definition.path)\n\t\t\t\t\t: null,\n\t\t\titem: this.item,\n\t\t\tindex: this.index,\n\t\t\trowIndex: this.rowIndex,\n\t\t};\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<ThemedHost class={this._getColumnClasses()}>\n\t\t\t\t{this.checkbox}\n\n\t\t\t\t{this._getContent()}\n\n\t\t\t\t{false && (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t<div class='pl-8'></div>\n\t\t\t\t\t\t<div class='text-storm-300 text-storm-400 text-storm-500 dark:text-hurricane-200 dark:text-white'></div>\n\t\t\t\t\t\t<div class='justify-start justify-end justify-center'></div>\n\t\t\t\t\t\t<div class='font-semibold text-storm-300 text-storm-400 text-storm-500'></div>\n\t\t\t\t\t\t<div class='w-12/12 w-1/12 w-10/12 w-11/12 w-2/12 w-3/12 w-4/12 w-5/12 w-6/12 w-7/12 w-8/12 w-9/12'></div>\n\t\t\t\t\t\t<div class='tablet:w-12/12 tablet:w-1/12 tablet:w-10/12 tablet:w-11/12 tablet:w-2/12 tablet:w-3/12 tablet:w-4/12 tablet:w-5/12 tablet:w-6/12 tablet:w-7/12 tablet:w-8/12 tablet:w-9/12'></div>\n\t\t\t\t\t\t<div class='desktop-xs:w-12/12 desktop-xs:w-1/12 desktop-xs:w-10/12 desktop-xs:w-11/12 desktop-xs:w-2/12 desktop-xs:w-3/12 desktop-xs:w-4/12 desktop-xs:w-5/12 desktop-xs:w-6/12 desktop-xs:w-7/12 desktop-xs:w-8/12 desktop-xs:w-9/12'></div>\n\t\t\t\t\t\t<div class='desktop-xs:w-12/12 desktop-xs:w-1/12 desktop-xs:w-10/12 desktop-xs:w-11/12 desktop-xs:w-2/12 desktop-xs:w-3/12 desktop-xs:w-4/12 desktop-xs:w-5/12 desktop-xs:w-6/12 desktop-xs:w-7/12 desktop-xs:w-8/12 desktop-xs:w-9/12'></div>\n\t\t\t\t\t\t<div class='desktop-sm:w-12/12 desktop-sm:w-1/12 desktop-sm:w-10/12 desktop-sm:w-11/12 desktop-sm:w-2/12 desktop-sm:w-3/12 desktop-sm:w-4/12 desktop-sm:w-5/12 desktop-sm:w-6/12 desktop-sm:w-7/12 desktop-sm:w-8/12 desktop-sm:w-9/12'></div>\n\t\t\t\t\t\t<div class='desktop:w-12/12 desktop:w-1/12 desktop:w-10/12 desktop:w-11/12 desktop:w-2/12 desktop:w-3/12 desktop:w-4/12 desktop:w-5/12 desktop:w-6/12 desktop:w-7/12 desktop:w-8/12 desktop:w-9/12'></div>\n\t\t\t\t\t\t<div class='desktop-lg:w-12/12 desktop-lg:w-1/12 desktop-lg:w-10/12 desktop-lg:w-11/12 desktop-lg:w-2/12 desktop-lg:w-3/12 desktop-lg:w-4/12 desktop-lg:w-5/12 desktop-lg:w-6/12 desktop-lg:w-7/12 desktop-lg:w-8/12 desktop-lg:w-9/12'></div>\n\t\t\t\t\t\t<div class='desktop-xl:w-12/12 desktop-xl:w-1/12 desktop-xl:w-10/12 desktop-xl:w-11/12 desktop-xl:w-2/12 desktop-xl:w-3/12 desktop-xl:w-4/12 desktop-xl:w-5/12 desktop-xl:w-6/12 desktop-xl:w-7/12 desktop-xl:w-8/12 desktop-xl:w-9/12'></div>\n\t\t\t\t\t\t<div class='flex hidden group-hover:flex group-hover:hidden'></div>\n\t\t\t\t\t\t<div class='tablet:flex tablet:hidden tablet:group-hover:flex tablet:group-hover:hidden'></div>\n\t\t\t\t\t\t<div class='desktop-xs:flex desktop-xs:hidden desktop-xs:group-hover:flex desktop-xs:group-hover:hidden'></div>\n\t\t\t\t\t\t<div class='desktop-sm:flex desktop-sm:hidden  desktop-sm:group-hover:flex desktop-sm:group-hover:hidden'></div>\n\t\t\t\t\t\t<div class='desktop:flex desktop:hidden desktop:group-hover:flex desktop:group-hover:hidden'></div>\n\t\t\t\t\t\t<div class='desktop-lg:flex desktop-lg:hidden desktop-lg:group-hover:flex desktop-lg:group-hover:hidden'></div>\n\t\t\t\t\t\t<div class='desktop-xl:flex desktop-xl:hidden desktop-xl:group-hover:flex desktop-xl:group-hover:hidden'></div>\n\t\t\t\t\t\t<div class='pr-0 pr-4 last-of-type:pr-0'></div>\n\t\t\t\t\t\t<div class='tablet:pr-0 tablet:pr-4'></div>\n\t\t\t\t\t\t<div class='desktop-xs:pr-0 desktop-xs:pr-4'></div>\n\t\t\t\t\t\t<div class='desktop-sm:pr-0 desktop-sm:pr-4'></div>\n\t\t\t\t\t\t<div class='desktop:pr-0 desktop:pr-4'></div>\n\t\t\t\t\t\t<div class='desktop-lg:pr-0 desktop-lg:pr-4'></div>\n\t\t\t\t\t\t<div class='desktop-xl:pr-0 desktop-xl:pr-4'></div>\n\t\t\t\t\t</Fragment>\n\t\t\t\t)}\n\t\t\t</ThemedHost>\n\t\t);\n\t}\n\n\tprivate _getContent() {\n\t\tif (this.variant === 'loading') {\n\t\t\treturn (\n\t\t\t\t<p-loader\n\t\t\t\t\tvariant='ghost'\n\t\t\t\t\tclass='h-6 w-[calc(100%-1rem)] flex-1 rounded'\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={cn('overflow-hidden text-ellipsis', {\n\t\t\t\t\tflex: this.definition.flex,\n\t\t\t\t\t'justify-start':\n\t\t\t\t\t\tthis.definition.flex &&\n\t\t\t\t\t\t(this.definition.align === undefined ||\n\t\t\t\t\t\t\tthis.definition.align === 'start'),\n\t\t\t\t\t'justify-end':\n\t\t\t\t\t\tthis.definition.flex && this.definition.align === 'end',\n\t\t\t\t\t'justify-center':\n\t\t\t\t\t\tthis.definition.flex && this.definition.align === 'end',\n\t\t\t\t\t'text-start':\n\t\t\t\t\t\t!this.definition.flex &&\n\t\t\t\t\t\t(this.definition.align === undefined ||\n\t\t\t\t\t\t\tthis.definition.align === 'start'),\n\t\t\t\t\t'text-center':\n\t\t\t\t\t\t!this.definition.flex && this.definition.align === 'center',\n\t\t\t\t\t'text-end': !this.definition.flex && this.definition.align === 'end',\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{this.variant === 'header' || this.variant === 'header-secondary' ? (\n\t\t\t\t\tthis.data.value\n\t\t\t\t) : this.definition.useSlot ? (\n\t\t\t\t\t<slot />\n\t\t\t\t) : (\n\t\t\t\t\tthis.template(this.data as TableDefinitionData)\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate _getColumnClasses() {\n\t\treturn cn(\n\t\t\tgetTableCellColumnClasses(\n\t\t\t\tthis.definition,\n\t\t\t\tthis.variant,\n\t\t\t\tthis.checkboxOffset\n\t\t\t)\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/molecules/table/footer/table-footer.component.js

@@ -100,12 +100,12 @@ export class TableFooter {
         this._renderCheckTimeout = setTimeout(() => this._checkStuck(), 200);
     }
     render() {
-        return (h(ThemedHost, { key: '4e733469026c4ee831bad2746c23e10b9fb4460f' }, h("div", { key: '086d244e013b9ecfe726eaedb02d161fc8198487', class: footer({
+        return (h(ThemedHost, { key: '1024988f53e543b3f8d94b0219913b4b0877ce45' }, h("div", { key: '8757e2e3f2951b01fefa252b64a5cf19f46209d0', class: footer({
                 pinned: this._isPinned,
                 hidden: this._hidden,
                 tableHeaderHasAction: this.tableHeaderHasAction,
             }) }, (this.enablePaginationPages || this.enablePaginationSize) &&
-            this.total > 0 && (h("p-pagination", { key: '0a6d5d4d55ad3b6ec77959655b29ff064d60ddc6', class: 'z-[2]', enablePaginationSize: this.enablePaginationSize, enablePaginationPages: this.enablePaginationPages, pageSize: this.pageSize, pageSizeOptions: this.pageSizeOptions, onPageSizeChange: ({ detail }) => this._changePageSize(detail), page: this.page, hideOnSinglePage: this.hideOnSinglePage, onPageChange: ({ detail }) => this.pageChange.emit(detail), total: this.total, onPagesChange: ({ detail }) => (this._hasPaginationPages = detail > 1) })))));
+            this.total > 0 && (h("p-pagination", { key: '47682dcc14961e5ebab05317cda65dc44def9ee8', class: 'z-[2]', enablePaginationSize: this.enablePaginationSize, enablePaginationPages: this.enablePaginationPages, pageSize: this.pageSize, pageSizeOptions: this.pageSizeOptions, onPageSizeChange: ({ detail }) => this._changePageSize(detail), page: this.page, hideOnSinglePage: this.hideOnSinglePage, onPageChange: ({ detail }) => this.pageChange.emit(detail), total: this.total, onPagesChange: ({ detail }) => (this._hasPaginationPages = detail > 1) })))));
     }
     _changePageSize(s) {
         if (!s) {

package/dist/collection/components/molecules/table/header/table-header.component.js

@@ -134,18 +134,18 @@ export class TableHeader {
         return (h(ThemedHost, { key: 'c1b62a3635fc61d8130b4d1c7b5e2382423fc8b4' }, h("div", { key: '42dbc580b0f7cbeee1c010222011c929c105616f', class: header() }, this.loading && (h("p-loader", { key: '1d22845dc422bbc0f073572903d255024fe91256', variant: 'ghost', class: 'hidden h-8 w-3/4 rounded desktop-xs:flex' })), !this.loading &&
             (hasCustomFilterSlot || quickFilters.length > 0) && (h("div", { key: '0b19ec881c0d734e58bf50dfa49447bec37fe91d', class: 'flex flex-col justify-start gap-4 justify-self-start desktop-xs:flex-row' }, hasCustomFilterSlot && h("slot", { key: 'c6fdbeecee6e5feaac30ba80d5c4e332ea804af8', name: 'custom-filter' }), quickFilters.length > 0 && (h("p-segment-container", { key: 'de00cdb0b7cb6e192fb83157ff60ccf6a08fa626', class: 'hidden desktop-xs:flex' }, quickFilters.map(item => (h("p-segment-item", { active: item.identifier === this.activeQuickFilterIdentifier, onClick: () => this.quickFilter.emit(item) }, typeof item.text === 'string'
             ? item.text
-            : item.text(), ' ', item?.count >= 0 ? `(${item.count})` : ''))))))), h("div", { key: '2648878d64a6a8f3a56f85724a8145a5ff30220a', class: 'flex flex-col justify-end gap-2 desktop-xs:ml-auto desktop-xs:flex-row desktop-xs:items-center' }, this.enableSearch && (h("p-field", { key: '83af3e145b5effa18aa36052e14c8e7aae674a0c', icon: 'search', class: 'desktop-xs:max-w-60', placeholder: 'Zoeken...', value: this.query, onValueChange: ev => this._queryObserver.next(ev.detail) })), h("div", { key: 'dfd462d178469f369c71093487457b8b7461450d', class: 'flex items-center gap-2' }, this.enableFilter && (h("p-button", { key: 'b81c91709dd8d9b60f0d41621b07118966fea148', icon: 'filter', variant: 'secondary', class: `w-full ${this.enableFilterDesktop
+            : item.text(), ' ', item?.count >= 0 ? `(${item.count})` : ''))))))), h("div", { key: '2648878d64a6a8f3a56f85724a8145a5ff30220a', class: 'flex flex-col justify-end gap-2 desktop-xs:ml-auto desktop-xs:flex-row desktop-xs:items-center' }, this.enableSearch && (h("p-field", { key: '83af3e145b5effa18aa36052e14c8e7aae674a0c', icon: 'search', class: 'desktop-xs:max-w-60', placeholder: 'Zoeken...', value: this.query, onValueChange: ev => this._queryObserver.next(ev.detail) })), h("div", { key: 'dfd462d178469f369c71093487457b8b7461450d', class: 'flex items-center gap-2' }, this.enableFilter && (h("p-button", { key: 'a2be734fc03c60c117e554a6a78815f3185741d3', icon: 'filter', variant: 'secondary', class: `w-full ${this.enableFilterDesktop
                 ? 'desktop-xs:w-auto'
-                : 'desktop-xs:hidden'}`, onClick: () => this.filter.emit() }, this.filterButtonTemplate
+                : 'desktop-xs:hidden'}`, onOnClick: () => this.filter.emit() }, this.filterButtonTemplate
             ? this.filterButtonTemplate()
             : this._defaultFilterButtonTemplate(), this.selectedFiltersAmount &&
-            this._getLabel(this.selectedFiltersAmount), mobileTotal > 0 && this._getLabel(mobileTotal, 'mobile'))), !this.loading && this.enableExport && this.enableFilter && (h("p-divider", { key: '69fa061c128034dc499d2f7548121d623701b111', variant: 'vertical', class: 'hidden h-4 tablet:flex dark:text-white/15' })), !this.loading && this.enableExport && (h("p-button", { key: '6bf0e38639cac6e886ca83d36879a838f14056dc', variant: 'secondary', icon: 'upload', class: 'desktop-xs:auto w-full', onClick: () => this.export.emit() }, formatTranslation(this._locales.export)))), this.enableAction && this._buttonTemplate(), hasCustomActionsSlot && h("slot", { key: 'b09deed8ab74a41bdbaebd53296144822c4575dd', name: 'custom-actions' })), this.enableAction && this.canUseAction && (h("div", { key: 'c82822c61f4ace4b8b8c81573b9e776d3d6af9b2', class: 'fixed bottom-0 left-0 z-[2] block w-full border border-solid border-transparent bg-white p-4 desktop-xs:hidden dark:border-t-hurricane-400 dark:bg-hurricane-500' }, this._buttonTemplate(true))))));
+            this._getLabel(this.selectedFiltersAmount), mobileTotal > 0 && this._getLabel(mobileTotal, 'mobile'))), !this.loading && this.enableExport && this.enableFilter && (h("p-divider", { key: '284c90912644a046dc99b5eaa939287ed5bb5eab', variant: 'vertical', class: 'hidden h-4 tablet:flex dark:text-white/15' })), !this.loading && this.enableExport && (h("p-button", { key: '477053b89473d00b9756d200785755e6a30f4702', variant: 'secondary', icon: 'upload', class: 'desktop-xs:auto w-full', onOnClick: () => this.export.emit() }, formatTranslation(this._locales.export)))), this.enableAction && this._buttonTemplate(), hasCustomActionsSlot && h("slot", { key: 'aafe392b17b4794b595bc39d59a111008218c752', name: 'custom-actions' })), this.enableAction && this.canUseAction && (h("div", { key: '6024d4dfae503048683ff68324c1e6a50d41fc6c', class: 'fixed bottom-0 left-0 z-[2] block w-full border border-solid border-transparent bg-white p-4 desktop-xs:hidden dark:border-t-hurricane-400 dark:bg-hurricane-500' }, this._buttonTemplate(true))))));
     }
     async _setLocales() {
         this._locales = await getLocaleComponentStrings(this._el);
     }
     _buttonTemplate(mobile = false) {
-        return (h("p-button", { class: mobile ? 'w-full' : 'hidden desktop-xs:flex', icon: this.actionIcon, disabled: !this.canUseAction, onClick: () => this.action.emit(), loading: this.actionLoading }, this.actionButtonTemplate
+        return (h("p-button", { class: mobile ? 'w-full' : 'hidden desktop-xs:flex', icon: this.actionIcon, disabled: !this.canUseAction, onOnClick: () => this.action.emit(), loading: this.actionLoading }, this.actionButtonTemplate
             ? this.actionButtonTemplate(mobile ? this.itemsSelectedAmount : 0)
             : this._defaultActionButtonTemplate(mobile ? this.itemsSelectedAmount : 0)));
     }

package/dist/collection/components/molecules/table/header/table-header.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-header.component.js","sourceRoot":"","sources":["../../../../../src/components/molecules/table/header/table-header.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,MAAM,EACN,IAAI,EACJ,KAAK,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAEnE,OAAO,EACN,iBAAiB,EACjB,yBAAyB,GACzB,MAAM,gCAAgC,CAAC;AAExC,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AAKxE,MAAM,MAAM,GAAG,GAAG,CAAC;IAClB,2BAA2B;IAC3B,QAAQ;IACR,kBAAkB;IAElB,qBAAqB;CACrB,CAAC,CAAC;AAOH,MAAM,OAAO,WAAW;IACf,4BAA4B,GAAiB,GAAG,EAAE,CACzD,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IACjC,4BAA4B,GAAuB,CAAC,MAAc,EAAE,EAAE,CAC7E,IAAI,CAAC,UAAU;QACd,CAAC,CAAC,IAAI,CAAC,UAAU;QACjB,CAAC,CAAC,iBAAiB,CACjB,MAAM,KAAK,CAAC;YACX,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI;YACpB,CAAC,CAAC,MAAM,KAAK,CAAC;gBACd,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW;gBAC3B,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,EAC5B,EAAE,MAAM,EAAE,CACT,CAAC;IAEN;;OAEG;IACK,YAAY,GAA2B,EAAE,CAAC;IAElD;;OAEG;IACK,2BAA2B,CAAS;IAE5C;;OAEG;IACK,OAAO,GAAY,KAAK,CAAC;IAEjC;;OAEG;IACK,YAAY,GAAY,IAAI,CAAC;IAErC;;OAEG;IACK,mBAAmB,GAAW,CAAC,CAAC;IAExC;;OAEG;IACsB,KAAK,CAAS;IAEvC;;OAEG;IACK,YAAY,GAAY,IAAI,CAAC;IAErC;;OAEG;IACK,YAAY,GAAY,IAAI,CAAC;IAErC;;OAEG;IACK,mBAAmB,GAAY,IAAI,CAAC;IAE5C;;OAEG;IACK,qBAAqB,CAAS;IAEtC;;OAEG;IACK,oBAAoB,GAC3B,IAAI,CAAC,4BAA4B,CAAC;IAEnC;;OAEG;IACK,YAAY,GAAY,IAAI,CAAC;IAErC;;OAEG;IACK,aAAa,GAAY,KAAK,CAAC;IAEvC;;OAEG;IACK,UAAU,GAAgB,QAAQ,CAAC;IAE3C;;OAEG;IACK,UAAU,CAAS;IAE3B;;OAEG;IACsB,YAAY,GAAY,KAAK,CAAC;IAEvD;;OAEG;IACK,oBAAoB,GAC3B,IAAI,CAAC,4BAA4B,CAAC;IAEnC;;OAEG;IAIH,WAAW,CAA4B;IAEvC;;OAEG;IAIH,WAAW,CAAuB;IAElC;;OAEG;IAIH,MAAM,CAAqB;IAE3B;;OAEG;IAIH,MAAM,CAAqB;IAE3B;;OAEG;IAIH,MAAM,CAAuB;IAE7B;;OAEG;IACgB,GAAG,CAAc;IAEpC;;OAEG;IACc,QAAQ,GAAQ,EAAE,CAAC;IAE5B,cAAc,GAAG,IAAI,OAAO,EAAU,CAAC;IAE/C,iBAAiB;QAChB,IAAI,CAAC,WAAW,EAAE,CAAC;IACpB,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,cAAc;aACjB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,oBAAoB,EAAE,CAAC;aAC/C,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IACpD,CAAC;IAED,MAAM;QACL,MAAM,YAAY,GACjB,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ;YACpC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC;YAC/B,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC;QAEtB,MAAM,iBAAiB,GAAG,YAAY,CAAC,IAAI,CAC1C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,KAAK,IAAI,CAAC,2BAA2B,CACtD,CAAC;QACF,MAAM,WAAW,GAChB,CAAC,IAAI,CAAC,qBAAqB,IAAI,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAE1E,MAAM,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CACnD,iCAAiC,CACjC,CAAC;QAEF,MAAM,oBAAoB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CACpD,kCAAkC,CAClC,CAAC;QAEF,OAAO,CACN,EAAC,UAAU;YACV,4DAAK,KAAK,EAAE,MAAM,EAAE;gBAClB,IAAI,CAAC,OAAO,IAAI,CAChB,iEACC,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,0CAA0C,GACrC,CACZ;gBAEA,CAAC,IAAI,CAAC,OAAO;oBACb,CAAC,mBAAmB,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CACnD,4DAAK,KAAK,EAAC,0EAA0E;oBACnF,mBAAmB,IAAI,6DAAM,IAAI,EAAC,eAAe,GAAG;oBAEpD,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAC3B,4EAAqB,KAAK,EAAC,wBAAwB,IACjD,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACzB,sBACC,MAAM,EACL,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,2BAA2B,EAErD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;wBAEzC,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;4BAC7B,CAAC,CAAC,IAAI,CAAC,IAAI;4BACX,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE;wBAAE,GAAG;wBAClB,IAAI,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAC1B,CACjB,CAAC,CACmB,CACtB,CACI,CACN;gBAEF,4DAAK,KAAK,EAAC,gGAAgG;oBACzG,IAAI,CAAC,YAAY,IAAI,CACrB,gEACC,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,qBAAqB,EAC3B,WAAW,EAAC,WAAW,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,aAAa,EAAE,EAAE,CAAC,EAAE,CACnB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,MAAgB,CAAC,GAE7C,CACF;oBAED,4DAAK,KAAK,EAAC,yBAAyB;wBAClC,IAAI,CAAC,YAAY,IAAI,CACrB,iEACC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,UACN,IAAI,CAAC,mBAAmB;gCACvB,CAAC,CAAC,mBAAmB;gCACrB,CAAC,CAAC,mBACJ,EAAE,EACF,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;4BAEhC,IAAI,CAAC,oBAAoB;gCACzB,CAAC,CAAC,IAAI,CAAC,oBAAoB,EAAE;gCAC7B,CAAC,CAAC,IAAI,CAAC,4BAA4B,EAAE;4BACrC,IAAI,CAAC,qBAAqB;gCAC1B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,qBAAqB,CAAC;4BAC1C,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,QAAQ,CAAC,CAC/C,CACX;wBAEA,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,IAAI,CAC3D,kEACC,OAAO,EAAC,UAAU,EAClB,KAAK,EAAC,2CAA2C,GAChD,CACF;wBAEA,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,IAAI,CACtC,iEACC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,IAEhC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAC9B,CACX,CACI;oBAEL,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,eAAe,EAAE;oBAE3C,oBAAoB,IAAI,6DAAM,IAAI,EAAC,gBAAgB,GAAG,CAClD;gBAEL,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,IAAI,CAC1C,4DAAK,KAAK,EAAC,kKAAkK,IAC3K,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CACtB,CACN,CACI,CACM,CACb,CAAC;IACH,CAAC;IAGO,KAAK,CAAC,WAAW;QACxB,IAAI,CAAC,QAAQ,GAAG,MAAM,yBAAyB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC3D,CAAC;IAEO,eAAe,CAAC,MAAM,GAAG,KAAK;QACrC,OAAO,CACN,gBACC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,wBAAwB,EACnD,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,QAAQ,EAAE,CAAC,IAAI,CAAC,YAAY,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EACjC,OAAO,EAAE,IAAI,CAAC,aAAa,IAE1B,IAAI,CAAC,oBAAoB;YACzB,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;YAClE,CAAC,CAAC,IAAI,CAAC,4BAA4B,CACjC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CACpC,CACM,CACX,CAAC;IACH,CAAC;IAEO,SAAS,CAAC,MAAM,EAAE,UAAgC,SAAS;QAClE,OAAO,CACN,eACC,KAAK,EAAE,QACN,OAAO,KAAK,SAAS;gBACpB,CAAC,CAAC,wBAAwB;gBAC1B,CAAC,CAAC,wBACJ,EAAE,IAED,MAAM,CACE,CACV,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { debounceTime, distinctUntilChanged, Subject } from 'rxjs';\nimport { QuickFilter } from '../../../../types/table';\nimport {\n\tformatTranslation,\n\tgetLocaleComponentStrings,\n} from '../../../../utils/localization';\nimport { IconVariant } from '../../../atoms/icon/icon.component';\nimport { ThemedHost } from '../../../../internal/themed-host.component';\n\nexport type templateFunc = () => string;\nexport type buttonTemplateFunc = (amount: number) => string;\n\nconst header = cva([\n\t'flex flex-col gap-2 z-[1]',\n\t'w-full',\n\t'px-4 tablet:px-0',\n\n\t'desktop-xs:flex-row',\n]);\n\n@Component({\n\ttag: 'p-table-header',\n\tstyleUrl: 'table-header.component.css',\n\tshadow: true,\n})\nexport class TableHeader {\n\tprivate _defaultFilterButtonTemplate: templateFunc = () =>\n\t\tformatTranslation(this._locales.filter);\n\tprivate _defaultActionButtonTemplate: buttonTemplateFunc = (amount: number) =>\n\t\tthis.actionText\n\t\t\t? this.actionText\n\t\t\t: formatTranslation(\n\t\t\t\t\tamount === 0\n\t\t\t\t\t\t? this._locales.edit\n\t\t\t\t\t\t: amount === 1\n\t\t\t\t\t\t? this._locales.edit_single\n\t\t\t\t\t\t: this._locales.edit_plural,\n\t\t\t\t\t{ amount }\n\t\t\t  );\n\n\t/**\n\t * Quick filters to show\n\t */\n\t@Prop() quickFilters: QuickFilter[] | string = [];\n\n\t/**\n\t * Active quick filter identifier\n\t */\n\t@Prop() activeQuickFilterIdentifier: string;\n\n\t/**\n\t * Wether we want to show loading state\n\t */\n\t@Prop() loading: boolean = false;\n\n\t/**\n\t * Wether to show the search input\n\t */\n\t@Prop() enableSearch: boolean = true;\n\n\t/**\n\t * The amount of items that are selected\n\t */\n\t@Prop() itemsSelectedAmount: number = 0;\n\n\t/**\n\t * The query to show in the search bar\n\t */\n\t@Prop({ mutable: true }) query: string;\n\n\t/**\n\t * Wether to show the filter button\n\t */\n\t@Prop() enableFilter: boolean = true;\n\n\t/**\n\t * Wether to show the export button\n\t */\n\t@Prop() enableExport: boolean = true;\n\n\t/**\n\t * Wether to show the filter button on desktop\n\t */\n\t@Prop() enableFilterDesktop: boolean = true;\n\n\t/**\n\t * The amount of filters being selected\n\t */\n\t@Prop() selectedFiltersAmount: number;\n\n\t/**\n\t * The template for the filter button text\n\t */\n\t@Prop() filterButtonTemplate: templateFunc =\n\t\tthis._defaultFilterButtonTemplate;\n\n\t/**\n\t * Wether to show the action button\n\t */\n\t@Prop() enableAction: boolean = true;\n\n\t/**\n\t * Wether the action button is loading\n\t */\n\t@Prop() actionLoading: boolean = false;\n\n\t/**\n\t * The action button icon\n\t */\n\t@Prop() actionIcon: IconVariant = 'pencil';\n\n\t/**\n\t * The action button text if changed\n\t */\n\t@Prop() actionText: string;\n\n\t/**\n\t * Wether to enable the action button\n\t */\n\t@Prop({ mutable: true }) canUseAction: boolean = false;\n\n\t/**\n\t * The template for the action button text\n\t */\n\t@Prop() actionButtonTemplate: buttonTemplateFunc =\n\t\tthis._defaultActionButtonTemplate;\n\n\t/**\n\t * Event when one of the quick filters is clicked\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tquickFilter: EventEmitter<QuickFilter>;\n\n\t/**\n\t * Event when the query changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tqueryChange: EventEmitter<string>;\n\n\t/**\n\t * Event when the filter button is clicked\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tfilter: EventEmitter<null>;\n\n\t/**\n\t * Event when the action button is clicked\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\taction: EventEmitter<null>;\n\n\t/**\n\t * Event whenever the export button is clicked\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\texport: EventEmitter<number>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t/**\n\t * Locales used for this component\n\t */\n\t@State() private _locales: any = {};\n\n\tprivate _queryObserver = new Subject<string>();\n\n\tcomponentWillLoad() {\n\t\tthis._setLocales();\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis._queryObserver\n\t\t\t.pipe(debounceTime(300), distinctUntilChanged())\n\t\t\t.subscribe(value => this.queryChange.emit(value));\n\t}\n\n\trender() {\n\t\tconst quickFilters =\n\t\t\ttypeof this.quickFilters === 'string'\n\t\t\t\t? JSON.parse(this.quickFilters)\n\t\t\t\t: this.quickFilters;\n\n\t\tconst activeQuickFilter = quickFilters.find(\n\t\t\tf => f.identifier === this.activeQuickFilterIdentifier\n\t\t);\n\t\tconst mobileTotal =\n\t\t\t(this.selectedFiltersAmount || 0) + (activeQuickFilter?.default ? 0 : 1);\n\n\t\tconst hasCustomFilterSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"custom-filter\"]'\n\t\t);\n\n\t\tconst hasCustomActionsSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"custom-actions\"]'\n\t\t);\n\n\t\treturn (\n\t\t\t<ThemedHost>\n\t\t\t\t<div class={header()}>\n\t\t\t\t\t{this.loading && (\n\t\t\t\t\t\t<p-loader\n\t\t\t\t\t\t\tvariant='ghost'\n\t\t\t\t\t\t\tclass='hidden h-8 w-3/4 rounded desktop-xs:flex'\n\t\t\t\t\t\t></p-loader>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{!this.loading &&\n\t\t\t\t\t\t(hasCustomFilterSlot || quickFilters.length > 0) && (\n\t\t\t\t\t\t\t<div class='flex flex-col justify-start gap-4 justify-self-start desktop-xs:flex-row'>\n\t\t\t\t\t\t\t\t{hasCustomFilterSlot && <slot name='custom-filter' />}\n\n\t\t\t\t\t\t\t\t{quickFilters.length > 0 && (\n\t\t\t\t\t\t\t\t\t<p-segment-container class='hidden desktop-xs:flex'>\n\t\t\t\t\t\t\t\t\t\t{quickFilters.map(item => (\n\t\t\t\t\t\t\t\t\t\t\t<p-segment-item\n\t\t\t\t\t\t\t\t\t\t\t\tactive={\n\t\t\t\t\t\t\t\t\t\t\t\t\titem.identifier === this.activeQuickFilterIdentifier\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => this.quickFilter.emit(item)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{typeof item.text === 'string'\n\t\t\t\t\t\t\t\t\t\t\t\t\t? item.text\n\t\t\t\t\t\t\t\t\t\t\t\t\t: item.text()}{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t{item?.count >= 0 ? `(${item.count})` : ''}\n\t\t\t\t\t\t\t\t\t\t\t</p-segment-item>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</p-segment-container>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t<div class='flex flex-col justify-end gap-2 desktop-xs:ml-auto desktop-xs:flex-row desktop-xs:items-center'>\n\t\t\t\t\t\t{this.enableSearch && (\n\t\t\t\t\t\t\t<p-field\n\t\t\t\t\t\t\t\ticon='search'\n\t\t\t\t\t\t\t\tclass='desktop-xs:max-w-60'\n\t\t\t\t\t\t\t\tplaceholder='Zoeken...'\n\t\t\t\t\t\t\t\tvalue={this.query}\n\t\t\t\t\t\t\t\tonValueChange={ev =>\n\t\t\t\t\t\t\t\t\tthis._queryObserver.next(ev.detail as string)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<div class='flex items-center gap-2'>\n\t\t\t\t\t\t\t{this.enableFilter && (\n\t\t\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\t\t\ticon='filter'\n\t\t\t\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\t\t\t\tclass={`w-full ${\n\t\t\t\t\t\t\t\t\t\tthis.enableFilterDesktop\n\t\t\t\t\t\t\t\t\t\t\t? 'desktop-xs:w-auto'\n\t\t\t\t\t\t\t\t\t\t\t: 'desktop-xs:hidden'\n\t\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\t\tonClick={() => this.filter.emit()}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{this.filterButtonTemplate\n\t\t\t\t\t\t\t\t\t\t? this.filterButtonTemplate()\n\t\t\t\t\t\t\t\t\t\t: this._defaultFilterButtonTemplate()}\n\t\t\t\t\t\t\t\t\t{this.selectedFiltersAmount &&\n\t\t\t\t\t\t\t\t\t\tthis._getLabel(this.selectedFiltersAmount)}\n\t\t\t\t\t\t\t\t\t{mobileTotal > 0 && this._getLabel(mobileTotal, 'mobile')}\n\t\t\t\t\t\t\t\t</p-button>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t{!this.loading && this.enableExport && this.enableFilter && (\n\t\t\t\t\t\t\t\t<p-divider\n\t\t\t\t\t\t\t\t\tvariant='vertical'\n\t\t\t\t\t\t\t\t\tclass='hidden h-4 tablet:flex dark:text-white/15'\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t{!this.loading && this.enableExport && (\n\t\t\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\t\t\t\ticon='upload'\n\t\t\t\t\t\t\t\t\tclass='desktop-xs:auto w-full'\n\t\t\t\t\t\t\t\t\tonClick={() => this.export.emit()}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{formatTranslation(this._locales.export)}\n\t\t\t\t\t\t\t\t</p-button>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{this.enableAction && this._buttonTemplate()}\n\n\t\t\t\t\t\t{hasCustomActionsSlot && <slot name='custom-actions' />}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.enableAction && this.canUseAction && (\n\t\t\t\t\t\t<div class='fixed bottom-0 left-0 z-[2] block w-full border border-solid border-transparent bg-white p-4 desktop-xs:hidden dark:border-t-hurricane-400 dark:bg-hurricane-500'>\n\t\t\t\t\t\t\t{this._buttonTemplate(true)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</ThemedHost>\n\t\t);\n\t}\n\n\t@Listen('localeChanged', { target: 'body' })\n\tprivate async _setLocales(): Promise<void> {\n\t\tthis._locales = await getLocaleComponentStrings(this._el);\n\t}\n\n\tprivate _buttonTemplate(mobile = false) {\n\t\treturn (\n\t\t\t<p-button\n\t\t\t\tclass={mobile ? 'w-full' : 'hidden desktop-xs:flex'}\n\t\t\t\ticon={this.actionIcon}\n\t\t\t\tdisabled={!this.canUseAction}\n\t\t\t\tonClick={() => this.action.emit()}\n\t\t\t\tloading={this.actionLoading}\n\t\t\t>\n\t\t\t\t{this.actionButtonTemplate\n\t\t\t\t\t? this.actionButtonTemplate(mobile ? this.itemsSelectedAmount : 0)\n\t\t\t\t\t: this._defaultActionButtonTemplate(\n\t\t\t\t\t\t\tmobile ? this.itemsSelectedAmount : 0\n\t\t\t\t\t  )}\n\t\t\t</p-button>\n\t\t);\n\t}\n\n\tprivate _getLabel(amount, variant: 'mobile' | 'default' = 'default') {\n\t\treturn (\n\t\t\t<p-badge\n\t\t\t\tclass={`ml-1 ${\n\t\t\t\t\tvariant === 'default'\n\t\t\t\t\t\t? 'hidden desktop-xs:flex'\n\t\t\t\t\t\t: 'flex desktop-xs:hidden'\n\t\t\t\t}`}\n\t\t\t>\n\t\t\t\t{amount}\n\t\t\t</p-badge>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"table-header.component.js","sourceRoot":"","sources":["../../../../../src/components/molecules/table/header/table-header.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,MAAM,EACN,IAAI,EACJ,KAAK,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAEnE,OAAO,EACN,iBAAiB,EACjB,yBAAyB,GACzB,MAAM,gCAAgC,CAAC;AAExC,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AAKxE,MAAM,MAAM,GAAG,GAAG,CAAC;IAClB,2BAA2B;IAC3B,QAAQ;IACR,kBAAkB;IAElB,qBAAqB;CACrB,CAAC,CAAC;AAOH,MAAM,OAAO,WAAW;IACf,4BAA4B,GAAiB,GAAG,EAAE,CACzD,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IACjC,4BAA4B,GAAuB,CAAC,MAAc,EAAE,EAAE,CAC7E,IAAI,CAAC,UAAU;QACd,CAAC,CAAC,IAAI,CAAC,UAAU;QACjB,CAAC,CAAC,iBAAiB,CACjB,MAAM,KAAK,CAAC;YACX,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI;YACpB,CAAC,CAAC,MAAM,KAAK,CAAC;gBACd,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW;gBAC3B,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,EAC5B,EAAE,MAAM,EAAE,CACT,CAAC;IAEN;;OAEG;IACK,YAAY,GAA2B,EAAE,CAAC;IAElD;;OAEG;IACK,2BAA2B,CAAS;IAE5C;;OAEG;IACK,OAAO,GAAY,KAAK,CAAC;IAEjC;;OAEG;IACK,YAAY,GAAY,IAAI,CAAC;IAErC;;OAEG;IACK,mBAAmB,GAAW,CAAC,CAAC;IAExC;;OAEG;IACsB,KAAK,CAAS;IAEvC;;OAEG;IACK,YAAY,GAAY,IAAI,CAAC;IAErC;;OAEG;IACK,YAAY,GAAY,IAAI,CAAC;IAErC;;OAEG;IACK,mBAAmB,GAAY,IAAI,CAAC;IAE5C;;OAEG;IACK,qBAAqB,CAAS;IAEtC;;OAEG;IACK,oBAAoB,GAC3B,IAAI,CAAC,4BAA4B,CAAC;IAEnC;;OAEG;IACK,YAAY,GAAY,IAAI,CAAC;IAErC;;OAEG;IACK,aAAa,GAAY,KAAK,CAAC;IAEvC;;OAEG;IACK,UAAU,GAAgB,QAAQ,CAAC;IAE3C;;OAEG;IACK,UAAU,CAAS;IAE3B;;OAEG;IACsB,YAAY,GAAY,KAAK,CAAC;IAEvD;;OAEG;IACK,oBAAoB,GAC3B,IAAI,CAAC,4BAA4B,CAAC;IAEnC;;OAEG;IAIH,WAAW,CAA4B;IAEvC;;OAEG;IAIH,WAAW,CAAuB;IAElC;;OAEG;IAIH,MAAM,CAAqB;IAE3B;;OAEG;IAIH,MAAM,CAAqB;IAE3B;;OAEG;IAIH,MAAM,CAAuB;IAE7B;;OAEG;IACgB,GAAG,CAAc;IAEpC;;OAEG;IACc,QAAQ,GAAQ,EAAE,CAAC;IAE5B,cAAc,GAAG,IAAI,OAAO,EAAU,CAAC;IAE/C,iBAAiB;QAChB,IAAI,CAAC,WAAW,EAAE,CAAC;IACpB,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,cAAc;aACjB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,oBAAoB,EAAE,CAAC;aAC/C,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IACpD,CAAC;IAED,MAAM;QACL,MAAM,YAAY,GACjB,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ;YACpC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC;YAC/B,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC;QAEtB,MAAM,iBAAiB,GAAG,YAAY,CAAC,IAAI,CAC1C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,KAAK,IAAI,CAAC,2BAA2B,CACtD,CAAC;QACF,MAAM,WAAW,GAChB,CAAC,IAAI,CAAC,qBAAqB,IAAI,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAE1E,MAAM,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CACnD,iCAAiC,CACjC,CAAC;QAEF,MAAM,oBAAoB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CACpD,kCAAkC,CAClC,CAAC;QAEF,OAAO,CACN,EAAC,UAAU;YACV,4DAAK,KAAK,EAAE,MAAM,EAAE;gBAClB,IAAI,CAAC,OAAO,IAAI,CAChB,iEACC,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,0CAA0C,GACrC,CACZ;gBAEA,CAAC,IAAI,CAAC,OAAO;oBACb,CAAC,mBAAmB,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CACnD,4DAAK,KAAK,EAAC,0EAA0E;oBACnF,mBAAmB,IAAI,6DAAM,IAAI,EAAC,eAAe,GAAG;oBAEpD,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAC3B,4EAAqB,KAAK,EAAC,wBAAwB,IACjD,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACzB,sBACC,MAAM,EACL,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,2BAA2B,EAErD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;wBAEzC,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;4BAC7B,CAAC,CAAC,IAAI,CAAC,IAAI;4BACX,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE;wBAAE,GAAG;wBAClB,IAAI,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAC1B,CACjB,CAAC,CACmB,CACtB,CACI,CACN;gBAEF,4DAAK,KAAK,EAAC,gGAAgG;oBACzG,IAAI,CAAC,YAAY,IAAI,CACrB,gEACC,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,qBAAqB,EAC3B,WAAW,EAAC,WAAW,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,aAAa,EAAE,EAAE,CAAC,EAAE,CACnB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,MAAgB,CAAC,GAE7C,CACF;oBAED,4DAAK,KAAK,EAAC,yBAAyB;wBAClC,IAAI,CAAC,YAAY,IAAI,CACrB,iEACC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,UACN,IAAI,CAAC,mBAAmB;gCACvB,CAAC,CAAC,mBAAmB;gCACrB,CAAC,CAAC,mBACJ,EAAE,EACF,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;4BAElC,IAAI,CAAC,oBAAoB;gCACzB,CAAC,CAAC,IAAI,CAAC,oBAAoB,EAAE;gCAC7B,CAAC,CAAC,IAAI,CAAC,4BAA4B,EAAE;4BACrC,IAAI,CAAC,qBAAqB;gCAC1B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,qBAAqB,CAAC;4BAC1C,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,QAAQ,CAAC,CAC/C,CACX;wBAEA,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,IAAI,CAC3D,kEACC,OAAO,EAAC,UAAU,EAClB,KAAK,EAAC,2CAA2C,GAChD,CACF;wBAEA,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,IAAI,CACtC,iEACC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,wBAAwB,EAC9B,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,IAElC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAC9B,CACX,CACI;oBAEL,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,eAAe,EAAE;oBAE3C,oBAAoB,IAAI,6DAAM,IAAI,EAAC,gBAAgB,GAAG,CAClD;gBAEL,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,IAAI,CAC1C,4DAAK,KAAK,EAAC,kKAAkK,IAC3K,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CACtB,CACN,CACI,CACM,CACb,CAAC;IACH,CAAC;IAGO,KAAK,CAAC,WAAW;QACxB,IAAI,CAAC,QAAQ,GAAG,MAAM,yBAAyB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC3D,CAAC;IAEO,eAAe,CAAC,MAAM,GAAG,KAAK;QACrC,OAAO,CACN,gBACC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,wBAAwB,EACnD,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,QAAQ,EAAE,CAAC,IAAI,CAAC,YAAY,EAC5B,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EACnC,OAAO,EAAE,IAAI,CAAC,aAAa,IAE1B,IAAI,CAAC,oBAAoB;YACzB,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;YAClE,CAAC,CAAC,IAAI,CAAC,4BAA4B,CACjC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CACpC,CACM,CACX,CAAC;IACH,CAAC;IAEO,SAAS,CAAC,MAAM,EAAE,UAAgC,SAAS;QAClE,OAAO,CACN,eACC,KAAK,EAAE,QACN,OAAO,KAAK,SAAS;gBACpB,CAAC,CAAC,wBAAwB;gBAC1B,CAAC,CAAC,wBACJ,EAAE,IAED,MAAM,CACE,CACV,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { debounceTime, distinctUntilChanged, Subject } from 'rxjs';\nimport { QuickFilter } from '../../../../types/table';\nimport {\n\tformatTranslation,\n\tgetLocaleComponentStrings,\n} from '../../../../utils/localization';\nimport { IconVariant } from '../../../atoms/icon/icon.component';\nimport { ThemedHost } from '../../../../internal/themed-host.component';\n\nexport type templateFunc = () => string;\nexport type buttonTemplateFunc = (amount: number) => string;\n\nconst header = cva([\n\t'flex flex-col gap-2 z-[1]',\n\t'w-full',\n\t'px-4 tablet:px-0',\n\n\t'desktop-xs:flex-row',\n]);\n\n@Component({\n\ttag: 'p-table-header',\n\tstyleUrl: 'table-header.component.css',\n\tshadow: true,\n})\nexport class TableHeader {\n\tprivate _defaultFilterButtonTemplate: templateFunc = () =>\n\t\tformatTranslation(this._locales.filter);\n\tprivate _defaultActionButtonTemplate: buttonTemplateFunc = (amount: number) =>\n\t\tthis.actionText\n\t\t\t? this.actionText\n\t\t\t: formatTranslation(\n\t\t\t\t\tamount === 0\n\t\t\t\t\t\t? this._locales.edit\n\t\t\t\t\t\t: amount === 1\n\t\t\t\t\t\t? this._locales.edit_single\n\t\t\t\t\t\t: this._locales.edit_plural,\n\t\t\t\t\t{ amount }\n\t\t\t  );\n\n\t/**\n\t * Quick filters to show\n\t */\n\t@Prop() quickFilters: QuickFilter[] | string = [];\n\n\t/**\n\t * Active quick filter identifier\n\t */\n\t@Prop() activeQuickFilterIdentifier: string;\n\n\t/**\n\t * Wether we want to show loading state\n\t */\n\t@Prop() loading: boolean = false;\n\n\t/**\n\t * Wether to show the search input\n\t */\n\t@Prop() enableSearch: boolean = true;\n\n\t/**\n\t * The amount of items that are selected\n\t */\n\t@Prop() itemsSelectedAmount: number = 0;\n\n\t/**\n\t * The query to show in the search bar\n\t */\n\t@Prop({ mutable: true }) query: string;\n\n\t/**\n\t * Wether to show the filter button\n\t */\n\t@Prop() enableFilter: boolean = true;\n\n\t/**\n\t * Wether to show the export button\n\t */\n\t@Prop() enableExport: boolean = true;\n\n\t/**\n\t * Wether to show the filter button on desktop\n\t */\n\t@Prop() enableFilterDesktop: boolean = true;\n\n\t/**\n\t * The amount of filters being selected\n\t */\n\t@Prop() selectedFiltersAmount: number;\n\n\t/**\n\t * The template for the filter button text\n\t */\n\t@Prop() filterButtonTemplate: templateFunc =\n\t\tthis._defaultFilterButtonTemplate;\n\n\t/**\n\t * Wether to show the action button\n\t */\n\t@Prop() enableAction: boolean = true;\n\n\t/**\n\t * Wether the action button is loading\n\t */\n\t@Prop() actionLoading: boolean = false;\n\n\t/**\n\t * The action button icon\n\t */\n\t@Prop() actionIcon: IconVariant = 'pencil';\n\n\t/**\n\t * The action button text if changed\n\t */\n\t@Prop() actionText: string;\n\n\t/**\n\t * Wether to enable the action button\n\t */\n\t@Prop({ mutable: true }) canUseAction: boolean = false;\n\n\t/**\n\t * The template for the action button text\n\t */\n\t@Prop() actionButtonTemplate: buttonTemplateFunc =\n\t\tthis._defaultActionButtonTemplate;\n\n\t/**\n\t * Event when one of the quick filters is clicked\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tquickFilter: EventEmitter<QuickFilter>;\n\n\t/**\n\t * Event when the query changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tqueryChange: EventEmitter<string>;\n\n\t/**\n\t * Event when the filter button is clicked\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tfilter: EventEmitter<null>;\n\n\t/**\n\t * Event when the action button is clicked\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\taction: EventEmitter<null>;\n\n\t/**\n\t * Event whenever the export button is clicked\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\texport: EventEmitter<number>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t/**\n\t * Locales used for this component\n\t */\n\t@State() private _locales: any = {};\n\n\tprivate _queryObserver = new Subject<string>();\n\n\tcomponentWillLoad() {\n\t\tthis._setLocales();\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis._queryObserver\n\t\t\t.pipe(debounceTime(300), distinctUntilChanged())\n\t\t\t.subscribe(value => this.queryChange.emit(value));\n\t}\n\n\trender() {\n\t\tconst quickFilters =\n\t\t\ttypeof this.quickFilters === 'string'\n\t\t\t\t? JSON.parse(this.quickFilters)\n\t\t\t\t: this.quickFilters;\n\n\t\tconst activeQuickFilter = quickFilters.find(\n\t\t\tf => f.identifier === this.activeQuickFilterIdentifier\n\t\t);\n\t\tconst mobileTotal =\n\t\t\t(this.selectedFiltersAmount || 0) + (activeQuickFilter?.default ? 0 : 1);\n\n\t\tconst hasCustomFilterSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"custom-filter\"]'\n\t\t);\n\n\t\tconst hasCustomActionsSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"custom-actions\"]'\n\t\t);\n\n\t\treturn (\n\t\t\t<ThemedHost>\n\t\t\t\t<div class={header()}>\n\t\t\t\t\t{this.loading && (\n\t\t\t\t\t\t<p-loader\n\t\t\t\t\t\t\tvariant='ghost'\n\t\t\t\t\t\t\tclass='hidden h-8 w-3/4 rounded desktop-xs:flex'\n\t\t\t\t\t\t></p-loader>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{!this.loading &&\n\t\t\t\t\t\t(hasCustomFilterSlot || quickFilters.length > 0) && (\n\t\t\t\t\t\t\t<div class='flex flex-col justify-start gap-4 justify-self-start desktop-xs:flex-row'>\n\t\t\t\t\t\t\t\t{hasCustomFilterSlot && <slot name='custom-filter' />}\n\n\t\t\t\t\t\t\t\t{quickFilters.length > 0 && (\n\t\t\t\t\t\t\t\t\t<p-segment-container class='hidden desktop-xs:flex'>\n\t\t\t\t\t\t\t\t\t\t{quickFilters.map(item => (\n\t\t\t\t\t\t\t\t\t\t\t<p-segment-item\n\t\t\t\t\t\t\t\t\t\t\t\tactive={\n\t\t\t\t\t\t\t\t\t\t\t\t\titem.identifier === this.activeQuickFilterIdentifier\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => this.quickFilter.emit(item)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{typeof item.text === 'string'\n\t\t\t\t\t\t\t\t\t\t\t\t\t? item.text\n\t\t\t\t\t\t\t\t\t\t\t\t\t: item.text()}{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t{item?.count >= 0 ? `(${item.count})` : ''}\n\t\t\t\t\t\t\t\t\t\t\t</p-segment-item>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</p-segment-container>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t<div class='flex flex-col justify-end gap-2 desktop-xs:ml-auto desktop-xs:flex-row desktop-xs:items-center'>\n\t\t\t\t\t\t{this.enableSearch && (\n\t\t\t\t\t\t\t<p-field\n\t\t\t\t\t\t\t\ticon='search'\n\t\t\t\t\t\t\t\tclass='desktop-xs:max-w-60'\n\t\t\t\t\t\t\t\tplaceholder='Zoeken...'\n\t\t\t\t\t\t\t\tvalue={this.query}\n\t\t\t\t\t\t\t\tonValueChange={ev =>\n\t\t\t\t\t\t\t\t\tthis._queryObserver.next(ev.detail as string)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<div class='flex items-center gap-2'>\n\t\t\t\t\t\t\t{this.enableFilter && (\n\t\t\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\t\t\ticon='filter'\n\t\t\t\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\t\t\t\tclass={`w-full ${\n\t\t\t\t\t\t\t\t\t\tthis.enableFilterDesktop\n\t\t\t\t\t\t\t\t\t\t\t? 'desktop-xs:w-auto'\n\t\t\t\t\t\t\t\t\t\t\t: 'desktop-xs:hidden'\n\t\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\t\tonOnClick={() => this.filter.emit()}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{this.filterButtonTemplate\n\t\t\t\t\t\t\t\t\t\t? this.filterButtonTemplate()\n\t\t\t\t\t\t\t\t\t\t: this._defaultFilterButtonTemplate()}\n\t\t\t\t\t\t\t\t\t{this.selectedFiltersAmount &&\n\t\t\t\t\t\t\t\t\t\tthis._getLabel(this.selectedFiltersAmount)}\n\t\t\t\t\t\t\t\t\t{mobileTotal > 0 && this._getLabel(mobileTotal, 'mobile')}\n\t\t\t\t\t\t\t\t</p-button>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t{!this.loading && this.enableExport && this.enableFilter && (\n\t\t\t\t\t\t\t\t<p-divider\n\t\t\t\t\t\t\t\t\tvariant='vertical'\n\t\t\t\t\t\t\t\t\tclass='hidden h-4 tablet:flex dark:text-white/15'\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t{!this.loading && this.enableExport && (\n\t\t\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\t\t\t\ticon='upload'\n\t\t\t\t\t\t\t\t\tclass='desktop-xs:auto w-full'\n\t\t\t\t\t\t\t\t\tonOnClick={() => this.export.emit()}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{formatTranslation(this._locales.export)}\n\t\t\t\t\t\t\t\t</p-button>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{this.enableAction && this._buttonTemplate()}\n\n\t\t\t\t\t\t{hasCustomActionsSlot && <slot name='custom-actions' />}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.enableAction && this.canUseAction && (\n\t\t\t\t\t\t<div class='fixed bottom-0 left-0 z-[2] block w-full border border-solid border-transparent bg-white p-4 desktop-xs:hidden dark:border-t-hurricane-400 dark:bg-hurricane-500'>\n\t\t\t\t\t\t\t{this._buttonTemplate(true)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</ThemedHost>\n\t\t);\n\t}\n\n\t@Listen('localeChanged', { target: 'body' })\n\tprivate async _setLocales(): Promise<void> {\n\t\tthis._locales = await getLocaleComponentStrings(this._el);\n\t}\n\n\tprivate _buttonTemplate(mobile = false) {\n\t\treturn (\n\t\t\t<p-button\n\t\t\t\tclass={mobile ? 'w-full' : 'hidden desktop-xs:flex'}\n\t\t\t\ticon={this.actionIcon}\n\t\t\t\tdisabled={!this.canUseAction}\n\t\t\t\tonOnClick={() => this.action.emit()}\n\t\t\t\tloading={this.actionLoading}\n\t\t\t>\n\t\t\t\t{this.actionButtonTemplate\n\t\t\t\t\t? this.actionButtonTemplate(mobile ? this.itemsSelectedAmount : 0)\n\t\t\t\t\t: this._defaultActionButtonTemplate(\n\t\t\t\t\t\t\tmobile ? this.itemsSelectedAmount : 0\n\t\t\t\t\t  )}\n\t\t\t</p-button>\n\t\t);\n\t}\n\n\tprivate _getLabel(amount, variant: 'mobile' | 'default' = 'default') {\n\t\treturn (\n\t\t\t<p-badge\n\t\t\t\tclass={`ml-1 ${\n\t\t\t\t\tvariant === 'default'\n\t\t\t\t\t\t? 'hidden desktop-xs:flex'\n\t\t\t\t\t\t: 'flex desktop-xs:hidden'\n\t\t\t\t}`}\n\t\t\t>\n\t\t\t\t{amount}\n\t\t\t</p-badge>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/molecules/table/row/table-row.component.css

@@ -1 +1 @@
-.relative{position:relative!important}*{box-sizing:border-box}:host{--tw-content:"";position:relative}.static{position:static!important}.absolute{position:absolute!important}.-right-4{right:-1rem!important}.top-1{top:.25rem!important}.z-\[2\]{z-index:2!important}.m-1{margin:.25rem!important}.flex{display:flex!important}.table-row{display:table-row!important}.h-\[calc\(100\%-0\.5rem\)\]{height:calc(100% - .5rem)!important}.min-h-0{min-height:0!important}.min-h-14{min-height:3.5rem!important}.min-w-\[calc\(100\%-0\.5rem\)\]{min-width:calc(100% - .5rem)!important}.min-w-full{min-width:100%!important}.flex-col{flex-direction:column!important}.flex-nowrap{flex-wrap:nowrap!important}.items-center{align-items:center!important}.justify-between{justify-content:space-between!important}.rounded-lg{border-radius:.5rem!important}.bg-off-white-300{--tw-bg-opacity:1!important;background-color:rgb(248 247 244/var(--tw-bg-opacity,1))!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-2{padding-bottom:.5rem!important;padding-top:.5rem!important}.pb-4{padding-bottom:1rem!important}.font-ambit{font-family:Ambit,sans-serif!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-bold{font-weight:700!important}.font-normal{font-weight:400!important}.text-storm-400{--tw-text-opacity:1!important;color:rgb(70 75 84/var(--tw-text-opacity,1))!important}.text-storm-500{--tw-text-opacity:1!important;color:rgb(24 30 41/var(--tw-text-opacity,1))!important}.opacity-0{opacity:0!important}.transition-colors{transition-duration:.15s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.transition-opacity{transition-duration:.15s!important;transition-property:opacity!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.empty\:hidden:empty{display:none!important}.hover\:cursor-pointer:hover{cursor:pointer!important}.hover\:bg-off-white-300:hover{--tw-bg-opacity:1!important;background-color:rgb(248 247 244/var(--tw-bg-opacity,1))!important}.group:hover .group-hover\:opacity-100{opacity:1!important}@media (min-width:40rem){.tablet\:py-4{padding-bottom:1rem!important;padding-top:1rem!important}}.dark\:bg-hurricane-400:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-bg-opacity:1!important;background-color:rgb(70 75 84/var(--tw-bg-opacity,1))!important}.dark\:text-hurricane-200:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1!important;color:rgb(163 165 169/var(--tw-text-opacity,1))!important}.dark\:text-white:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.dark\:hover\:bg-hurricane-400:hover:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-bg-opacity:1!important;background-color:rgb(70 75 84/var(--tw-bg-opacity,1))!important}.dark\:hover\:bg-hurricane-600:hover:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-bg-opacity:1!important;background-color:rgb(46 52 62/var(--tw-bg-opacity,1))!important}.dark\:bg-hurricane-400:where([data-theme=dark],[data-theme=dark] *){--tw-bg-opacity:1!important;background-color:rgb(70 75 84/var(--tw-bg-opacity,1))!important}.dark\:text-hurricane-200:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1!important;color:rgb(163 165 169/var(--tw-text-opacity,1))!important}.dark\:text-white:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.dark\:hover\:bg-hurricane-400:hover:where([data-theme=dark],[data-theme=dark] *){--tw-bg-opacity:1!important;background-color:rgb(70 75 84/var(--tw-bg-opacity,1))!important}.dark\:hover\:bg-hurricane-600:hover:where([data-theme=dark],[data-theme=dark] *){--tw-bg-opacity:1!important;background-color:rgb(46 52 62/var(--tw-bg-opacity,1))!important}
+.relative{position:relative!important}*{box-sizing:border-box}:host{--tw-content:"";position:relative}.static{position:static!important}.absolute{position:absolute!important}.-right-4{right:-1rem!important}.top-1{top:.25rem!important}.z-\[2\]{z-index:2!important}.m-1{margin:.25rem!important}.mb-4{margin-bottom:1rem!important}.flex{display:flex!important}.table-row{display:table-row!important}.h-\[calc\(100\%-0\.5rem\)\]{height:calc(100% - .5rem)!important}.min-h-0{min-height:0!important}.min-h-14{min-height:3.5rem!important}.min-w-\[calc\(100\%-0\.5rem\)\]{min-width:calc(100% - .5rem)!important}.min-w-full{min-width:100%!important}.flex-col{flex-direction:column!important}.flex-nowrap{flex-wrap:nowrap!important}.items-center{align-items:center!important}.justify-between{justify-content:space-between!important}.rounded-lg{border-radius:.5rem!important}.bg-off-white-300{--tw-bg-opacity:1!important;background-color:rgb(248 247 244/var(--tw-bg-opacity,1))!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-2{padding-bottom:.5rem!important;padding-top:.5rem!important}.pb-4{padding-bottom:1rem!important}.font-ambit{font-family:Ambit,sans-serif!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-bold{font-weight:700!important}.font-normal{font-weight:400!important}.text-storm-400{--tw-text-opacity:1!important;color:rgb(70 75 84/var(--tw-text-opacity,1))!important}.text-storm-500{--tw-text-opacity:1!important;color:rgb(24 30 41/var(--tw-text-opacity,1))!important}.opacity-0{opacity:0!important}.transition-colors{transition-duration:.15s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.transition-opacity{transition-duration:.15s!important;transition-property:opacity!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.empty\:hidden:empty{display:none!important}.hover\:cursor-pointer:hover{cursor:pointer!important}.hover\:bg-off-white-300:hover{--tw-bg-opacity:1!important;background-color:rgb(248 247 244/var(--tw-bg-opacity,1))!important}.group:hover .group-hover\:opacity-100{opacity:1!important}@media (min-width:40rem){.tablet\:py-4{padding-bottom:1rem!important;padding-top:1rem!important}}.dark\:bg-hurricane-400:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-bg-opacity:1!important;background-color:rgb(70 75 84/var(--tw-bg-opacity,1))!important}.dark\:text-hurricane-200:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1!important;color:rgb(163 165 169/var(--tw-text-opacity,1))!important}.dark\:text-white:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.dark\:hover\:bg-hurricane-400:hover:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-bg-opacity:1!important;background-color:rgb(70 75 84/var(--tw-bg-opacity,1))!important}.dark\:hover\:bg-hurricane-600:hover:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-bg-opacity:1!important;background-color:rgb(46 52 62/var(--tw-bg-opacity,1))!important}.dark\:bg-hurricane-400:where([data-theme=dark],[data-theme=dark] *){--tw-bg-opacity:1!important;background-color:rgb(70 75 84/var(--tw-bg-opacity,1))!important}.dark\:text-hurricane-200:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1!important;color:rgb(163 165 169/var(--tw-text-opacity,1))!important}.dark\:text-white:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.dark\:hover\:bg-hurricane-400:hover:where([data-theme=dark],[data-theme=dark] *){--tw-bg-opacity:1!important;background-color:rgb(70 75 84/var(--tw-bg-opacity,1))!important}.dark\:hover\:bg-hurricane-600:hover:where([data-theme=dark],[data-theme=dark] *){--tw-bg-opacity:1!important;background-color:rgb(46 52 62/var(--tw-bg-opacity,1))!important}