@paperless/core 2.0.1-beta.67 → 2.0.1-beta.68

package/dist/collection/components/{deprecated/molecules → molecules}/table/cell/table-cell.component.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
-import { objectGetByPath, getTableCellColumnClasses, } from "../../../../../utils";
+import { getTableCellColumnClasses, objectGetByPath } from "../../../../utils";
+import { cn } from "../../../../utils/cn";
 /*
      With this, we shall hack the system in ways no one would ever have thought.
 
@@ -82,10 +83,6 @@ export class TableCell {
      * The value of the column
      */
     value;
-    /**
-     * Wether the table has actions
-     */
-    tableHasActions = false;
     /**
      * The checkbox to show
      */
@@ -108,33 +105,25 @@ export class TableCell {
         };
     }
     render() {
-        return (h(Host, { key: 'b7620f0ee21e17edca2055eb8922744a907967db', class: {
-                'p-table-cell': true,
-                [`variant-${this.variant}`]: true,
-                ...this._getColumnClasses(),
-            } }, this.checkbox, this._getContent()));
+        return (h(Host, { key: 'a41d0f01aef7ca7ad10f0628ff10d21de0990c21', class: this._getColumnClasses() }, this.checkbox, this._getContent()));
     }
     _getContent() {
         if (this.variant === 'loading') {
             return (h("p-loader", { variant: 'ghost', class: 'h-6 w-full flex-1 rounded' }));
         }
-        if (this.variant === 'actions') {
-            return h("slot", { name: 'actions' });
-        }
-        return (h("div", { class: {
-                flex: true,
+        return (h("div", { class: cn('flex', {
                 'justify-start': this.definition.align === 'start',
                 'justify-center': this.definition.align === 'center',
                 'justify-end': this.definition.align === 'end',
-            } }, this.variant === 'header' ? (this.data.value) : this.definition.useSlot ? (h("slot", null)) : (this.template(this.data))));
+            }) }, this.variant === 'header' ? (this.data.value) : this.definition.useSlot ? (h("slot", null)) : (this.template(this.data))));
     }
     _getColumnClasses() {
-        return getTableCellColumnClasses(this.definition, this.variant, this.tableHasActions);
+        return getTableCellColumnClasses(this.definition, this.variant);
     }
     static get is() { return "p-table-cell"; }
     static get originalStyleUrls() {
         return {
-            "$": ["table-cell.component.scss"]
+            "$": ["table-cell.component.css"]
         };
     }
     static get styleUrls() {
@@ -149,8 +138,8 @@ export class TableCell {
                 "attribute": "variant",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'loading' | 'header' | 'actions'",
-                    "resolved": "\"actions\" | \"default\" | \"header\" | \"loading\"",
+                    "original": "'default' | 'loading' | 'header'",
+                    "resolved": "\"default\" | \"header\" | \"loading\"",
                     "references": {}
                 },
                 "required": false,
@@ -212,7 +201,7 @@ export class TableCell {
                     "references": {
                         "TableColumn": {
                             "location": "import",
-                            "path": "../../../../helpers/table/column/table-column.component",
+                            "path": "../../../helpers/table/column/table-column.component",
                             "id": "src/components/helpers/table/column/table-column.component.tsx::TableColumn"
                         }
                     }
@@ -264,26 +253,6 @@ export class TableCell {
                 "setter": false,
                 "reflect": false
             },
-            "tableHasActions": {
-                "type": "boolean",
-                "attribute": "table-has-actions",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Wether the table has actions"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "checkbox": {
                 "type": "any",
                 "attribute": "checkbox",
@@ -313,12 +282,12 @@ export class TableCell {
                     "references": {
                         "TableDefinitionTemplateFunc": {
                             "location": "import",
-                            "path": "../../../../../types",
+                            "path": "../../../../types",
                             "id": "src/types/index.ts::TableDefinitionTemplateFunc"
                         },
                         "TableDefinitionData": {
                             "location": "import",
-                            "path": "../../../../../types",
+                            "path": "../../../../types",
                             "id": "src/types/index.ts::TableDefinitionData"
                         }
                     }

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

@@ -0,0 +1 @@
+{"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,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAKzD,OAAO,EAAE,yBAAyB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAE/E,OAAO,EAAE,EAAE,EAAE,MAAM,sBAAsB,CAAC;AAG1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAwDM;AAKN,MAAM,OAAO,SAAS;IACrB;;OAEG;IACK,OAAO,GAAqC,SAAS,CAAC;IAE9D;;OAEG;IACK,KAAK,CAAS;IAEtB;;OAEG;IACK,QAAQ,CAAS;IAEzB;;OAEG;IACK,UAAU,CAAe;IAEjC;;OAEG;IACK,IAAI,CAAM;IAElB;;OAEG;IACK,KAAK,CAAM;IAEnB;;OAEG;IACK,QAAQ,CAAM;IAEtB;;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,EAAE,IAAI,CAAC,KAAK,IAAI,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YACrE,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,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE;YACnC,IAAI,CAAC,QAAQ;YAEb,IAAI,CAAC,WAAW,EAAE,CACb,CACP,CAAC;IACH,CAAC;IAEO,WAAW;QAClB,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAChC,OAAO,CACN,gBACC,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,2BAA2B,GAChC,CACF,CAAC;QACH,CAAC;QAED,OAAO,CACN,WACC,KAAK,EAAE,EAAE,CAAC,MAAM,EAAE;gBACjB,eAAe,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,OAAO;gBAClD,gBAAgB,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,QAAQ;gBACpD,aAAa,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,KAAK;aAC9C,CAAC,IAED,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC5B,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,yBAAyB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACjE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport {\n\tTableDefinitionData,\n\tTableDefinitionTemplateFunc,\n} from '../../../../types';\nimport { getTableCellColumnClasses, objectGetByPath } from '../../../../utils';\n\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\t <div class=\"justify-start justify-center justify-end\"></div>\n\t <div class=\"font-semibold text-storm-dark\"></div>\n     <div class=\"w-1/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 w-10/12 w-11/12 w-12/12\"></div>\n     <div class=\"tablet:w-1/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 tablet:w-10/12 tablet:w-11/12 tablet:w-12/12\"></div>\n     <div class=\"desktop-xs:w-1/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 desktop-xs:w-10/12 desktop-xs:w-11/12 desktop-xs:w-12/12\"></div>\n     <div class=\"desktop-xs:w-1/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 desktop-xs:w-10/12 desktop-xs:w-11/12 desktop-xs:w-12/12\"></div>\n     <div class=\"desktop-sm:w-1/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 desktop-sm:w-10/12 desktop-sm:w-11/12 desktop-sm:w-12/12\"></div>\n     <div class=\"desktop:w-1/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 desktop:w-10/12 desktop:w-11/12 desktop:w-12/12\"></div>\n     <div class=\"desktop-lg:w-1/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 desktop-lg:w-10/12 desktop-lg:w-11/12 desktop-lg:w-12/12\"></div>\n     <div class=\"desktop-xl:w-1/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 desktop-xl:w-10/12 desktop-xl:w-11/12 desktop-xl:w-12/12\"></div>\n     <div class=\"hidden flex group-hover:hidden group-hover:flex\"></div>\n     <div class=\"tablet:hidden tablet:flex tablet:group-hover:hidden tablet:group-hover:flex\"></div>\n     <div class=\"desktop-xs:hidden desktop-xs:flex desktop-xs:group-hover:hidden desktop-xs:group-hover:flex\"></div>\n     <div class=\"desktop-sm:hidden desktop-sm:flex  desktop-sm:group-hover:hidden desktop-sm:group-hover:flex\"></div>\n     <div class=\"desktop:hidden desktop:flex desktop:group-hover:hidden desktop:group-hover:flex\"></div>\n     <div class=\"desktop-lg:hidden desktop-lg:flex desktop-lg:group-hover:hidden desktop-lg:group-hover:flex\"></div>\n     <div class=\"desktop-xl:hidden desktop-xl:flex desktop-xl:group-hover:hidden desktop-xl:group-hover:flex\"></div>\n     <div class=\"pr-4 pr-0\"></div>\n     <div class=\"tablet:pr-4 tablet:pr-0\"></div>\n     <div class=\"desktop-xs:pr-4 desktop-xs:pr-0\"></div>\n     <div class=\"desktop-sm:pr-4 desktop-sm:pr-0\"></div>\n     <div class=\"desktop:pr-4 desktop:pr-0\"></div>\n     <div class=\"desktop-lg:pr-4 desktop-lg:pr-0\"></div>\n     <div class=\"desktop-xl:pr-4 desktop-xl:pr-0\"></div>\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;\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: this.value ?? objectGetByPath(this.item, this.definition.path),\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<Host class={this._getColumnClasses()}>\n\t\t\t\t{this.checkbox}\n\n\t\t\t\t{this._getContent()}\n\t\t\t</Host>\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-full 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('flex', {\n\t\t\t\t\t'justify-start': this.definition.align === 'start',\n\t\t\t\t\t'justify-center': this.definition.align === 'center',\n\t\t\t\t\t'justify-end': 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 getTableCellColumnClasses(this.definition, this.variant);\n\t}\n}\n"]}

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

@@ -0,0 +1 @@
+.sticky{position:sticky!important}.z-\[1\]{z-index:1!important}*{box-sizing:border-box}:host{--tw-content:"";position:sticky;z-index:1}.static{position:static!important}.relative{position:relative!important}.z-\[2\]{z-index:2!important}.flex{display:flex!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}.px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}.py-8{padding-bottom:2rem!important;padding-top:2rem!important}.after\:absolute:after{content:var(--tw-content)!important;position:absolute!important}.after\:left-0:after{content:var(--tw-content)!important;left:0!important}.after\:top-0:after{content:var(--tw-content)!important;top:0!important}.after\:z-\[0\]:after{content:var(--tw-content)!important;z-index:0!important}.after\:h-full:after{content:var(--tw-content)!important;height:100%!important}.after\:w-full:after{content:var(--tw-content)!important;width:100%!important}.after\:bg-gradient-to-t:after{background-image:linear-gradient(to top,var(--tw-gradient-stops))!important;content:var(--tw-content)!important}.after\:from-white:after{--tw-gradient-from:#fff var(--tw-gradient-from-position)!important;--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important;content:var(--tw-content)!important}.after\:via-white\/80:after{--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),hsla(0,0%,100%,.8) var(--tw-gradient-via-position),var(--tw-gradient-to)!important;content:var(--tw-content)!important}.after\:to-transparent:after{--tw-gradient-to:transparent var(--tw-gradient-to-position)!important;content:var(--tw-content)!important}.after\:opacity-0:after{content:var(--tw-content)!important;opacity:0!important}.after\:opacity-100:after{content:var(--tw-content)!important;opacity:1!important}.after\:transition-opacity:after{content:var(--tw-content)!important;transition-duration:.15s!important;transition-property:opacity!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}

package/dist/collection/components/{deprecated/molecules → molecules}/table/footer/table-footer.component.js

@@ -1,19 +1,29 @@
-import { h, Host, } from "@stencil/core";
-import { formatTranslation, getLocaleComponentStrings, } from "../../../../../utils/localization";
-import { defaultSize, defaultSizeOptions, } from "../../../../molecules/pagination/size/constants";
+import { h, } from "@stencil/core";
+import { cva } from "class-variance-authority";
+import { defaultSize, defaultSizeOptions, } from "../../../molecules/pagination/size/constants";
+const footer = cva([
+    'flex justify-center relative',
+    'w-full py-8 px-6',
+    'after:absolute after:top-0 after:left-0  after:z-[0]',
+    'after:w-full after:h-full after:transition-opacity',
+    'after:bg-gradient-to-t after:from-white after:via-white/80 after:to-transparent',
+], {
+    variants: {
+        pinned: {
+            false: 'after:opacity-0',
+            true: 'after:opacity-100',
+        },
+    },
+});
 export class TableFooter {
     /**
-     * Wether to enable page size select
+     * Wether to enable pagination size select
      */
-    enablePageSize = true;
+    enablePaginationSize = true;
     /**
-     * Wether to enable pagination
+     * Wether to enable pagination pages
      */
-    enablePagination = true;
-    /**
-     * Wether to enable export
-     */
-    enableExport = true;
+    enablePaginationPages = true;
     /**
      * Wether we want to show loading state
      */
@@ -42,10 +52,6 @@ export class TableFooter {
      * Event whenever the page changes
      */
     pageSizeChange;
-    /**
-     * Event whenever the page changes
-     */
-    export;
     /**
      * Wether to hide when there is only 1 page available
      */
@@ -54,19 +60,15 @@ export class TableFooter {
      * The host element
      */
     _el;
-    /**
-     * Locales used for this component
-     */
-    _locales = {};
-    componentWillLoad() {
-        this._setLocales();
+    _isPinned = false;
+    componentDidLoad() {
+        this._checkStuck();
     }
     render() {
-        const hidePageSizeSelect = this.hideOnSinglePage && this.total < this.pageSizeOptions?.[0];
-        return (h(Host, { key: '3f4e0c5076b37fdfc5d0e5be548b75466c7eae3f', class: `p-table-footer ${!this.enablePageSize && 'page-size-disabled'} ${!this.enablePagination && 'pagination-disabled'} ${!this.enableExport && 'export-disabled'}` }, !this.loading && this.enablePagination && this.enablePageSize && (h("p-pagination-size", { key: 'f04181e63fff24d77cef765a3a407c092f5778d5', class: !hidePageSizeSelect && 'hidden desktop-xs:flex', hidden: hidePageSizeSelect, size: this.pageSize, sizeOptions: this.pageSizeOptions, onSizeChange: ({ detail }) => this._changePageSize(detail) })), this.loading && (h("p-loader", { key: 'a8ae2ba7710a12b9972883cff3cd388eca64846d', variant: 'ghost', class: 'h-8 w-full rounded' })), !this.loading && this.enablePagination && (h("p-pagination-pages", { key: '0509218175a106f638f20cc7aa8473a3e6da2481', pageSize: this.pageSize, total: this.total, page: this.page, hideOnSinglePage: this.hideOnSinglePage, onPageChange: ({ detail }) => this.pageChange.emit(detail) })), !this.loading && this.enableExport && (h("p-button", { key: 'e874598c37373eb0901f5d4a589d97d95e23a8e7', class: 'hidden desktop-xs:flex', variant: 'secondary', size: 'sm', icon: 'download', onClick: () => this.export.emit() }, formatTranslation(this._locales.export)))));
-    }
-    async _setLocales() {
-        this._locales = await getLocaleComponentStrings(this._el);
+        return (h("div", { key: '1adecc0b323bd38087e2b8ebde968992d7b0b3fe', class: footer({
+                pinned: this._isPinned,
+            }) }, (this.enablePaginationPages || this.enablePaginationSize) &&
+            this.total > 0 && (h("p-pagination", { key: 'bc478d95203a23290b320fd233db8bb560ccf2c8', 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 }))));
     }
     _changePageSize(s) {
         if (!s) {
@@ -75,11 +77,25 @@ export class TableFooter {
         this.pageSize = s;
         this.pageSizeChange.emit(this.pageSize);
     }
+    _checkStuck() {
+        const rect = this._el.getBoundingClientRect();
+        const layout = document.querySelector('p-layout');
+        if (layout) {
+            const innerContent = layout.shadowRoot.querySelector('.content');
+            const innerContentComputed = getComputedStyle(innerContent);
+            const layoutPaddingBottom = parseInt(innerContentComputed.paddingBottom, 10);
+            this._el.style.bottom = `-${layoutPaddingBottom}px`;
+        }
+        this._isPinned = window.innerHeight - rect.bottom == 0;
+    }
+    onScroll() {
+        this._checkStuck();
+    }
     static get is() { return "p-table-footer"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["table-footer.component.scss"]
+            "$": ["table-footer.component.css"]
         };
     }
     static get styleUrls() {
@@ -89,29 +105,9 @@ export class TableFooter {
     }
     static get properties() {
         return {
-            "enablePageSize": {
-                "type": "boolean",
-                "attribute": "enable-page-size",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Wether to enable page size select"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "true"
-            },
-            "enablePagination": {
+            "enablePaginationSize": {
                 "type": "boolean",
-                "attribute": "enable-pagination",
+                "attribute": "enable-pagination-size",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -122,16 +118,16 @@ export class TableFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Wether to enable pagination"
+                    "text": "Wether to enable pagination size select"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
-            "enableExport": {
+            "enablePaginationPages": {
                 "type": "boolean",
-                "attribute": "enable-export",
+                "attribute": "enable-pagination-pages",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -142,7 +138,7 @@ export class TableFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Wether to enable export"
+                    "text": "Wether to enable pagination pages"
                 },
                 "getter": false,
                 "setter": false,
@@ -271,7 +267,7 @@ export class TableFooter {
     }
     static get states() {
         return {
-            "_locales": {}
+            "_isPinned": {}
         };
     }
     static get events() {
@@ -305,31 +301,16 @@ export class TableFooter {
                     "resolved": "number",
                     "references": {}
                 }
-            }, {
-                "method": "export",
-                "name": "export",
-                "bubbles": false,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event whenever the page changes"
-                },
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                }
             }];
     }
     static get elementRef() { return "_el"; }
     static get listeners() {
         return [{
-                "name": "localeChanged",
-                "method": "_setLocales",
-                "target": "body",
+                "name": "scroll",
+                "method": "onScroll",
+                "target": "window",
                 "capture": false,
-                "passive": false
+                "passive": true
             }];
     }
 }

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-footer.component.js","sourceRoot":"","sources":["../../../../../src/components/molecules/table/footer/table-footer.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\th,\n\tProp,\n\tElement,\n\tState,\n\tListen,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport {\n\tdefaultSize,\n\tdefaultSizeOptions,\n} from '../../../molecules/pagination/size/constants';\n\nconst footer = cva(\n\t[\n\t\t'flex justify-center relative',\n\t\t'w-full py-8 px-6',\n\t\t'after:absolute after:top-0 after:left-0  after:z-[0]',\n\t\t'after:w-full after:h-full after:transition-opacity',\n\t\t'after:bg-gradient-to-t after:from-white after:via-white/80 after:to-transparent',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tpinned: {\n\t\t\t\tfalse: 'after:opacity-0',\n\t\t\t\ttrue: 'after:opacity-100',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-table-footer',\n\tstyleUrl: 'table-footer.component.css',\n\tshadow: true,\n})\nexport class TableFooter {\n\t/**\n\t * Wether to enable pagination size select\n\t */\n\t@Prop() enablePaginationSize: boolean = true;\n\n\t/**\n\t * Wether to enable pagination pages\n\t */\n\t@Prop() enablePaginationPages: boolean = true;\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 * The current page\n\t */\n\t@Prop({ mutable: true, reflect: true }) page: number = 1;\n\n\t/**\n\t * The total amount of items\n\t */\n\t@Prop() total!: number;\n\n\t/**\n\t * Event whenever the page changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tpageChange: EventEmitter<number>;\n\n\t/**\n\t * The amount of items per page\n\t */\n\t@Prop() pageSize: number = defaultSize;\n\n\t/**\n\t * The options for the page size\n\t */\n\t@Prop() pageSizeOptions: number[] = defaultSizeOptions;\n\n\t/**\n\t * Event whenever the page changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tpageSizeChange: EventEmitter<number>;\n\n\t/**\n\t * Wether to hide when there is only 1 page available\n\t */\n\t@Prop() hideOnSinglePage: boolean = true;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _isPinned = false;\n\n\tcomponentDidLoad() {\n\t\tthis._checkStuck();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={footer({\n\t\t\t\t\tpinned: this._isPinned,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{(this.enablePaginationPages || this.enablePaginationSize) &&\n\t\t\t\t\tthis.total > 0 && (\n\t\t\t\t\t\t<p-pagination\n\t\t\t\t\t\t\tclass='z-[2]'\n\t\t\t\t\t\t\tenablePaginationSize={this.enablePaginationSize}\n\t\t\t\t\t\t\tenablePaginationPages={this.enablePaginationPages}\n\t\t\t\t\t\t\tpageSize={this.pageSize}\n\t\t\t\t\t\t\tpageSizeOptions={this.pageSizeOptions}\n\t\t\t\t\t\t\tonPageSizeChange={({ detail }) => this._changePageSize(detail)}\n\t\t\t\t\t\t\tpage={this.page}\n\t\t\t\t\t\t\thideOnSinglePage={this.hideOnSinglePage}\n\t\t\t\t\t\t\tonPageChange={({ detail }) => this.pageChange.emit(detail)}\n\t\t\t\t\t\t\ttotal={this.total}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate _changePageSize(s?: number) {\n\t\tif (!s) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.pageSize = s;\n\t\tthis.pageSizeChange.emit(this.pageSize);\n\t}\n\n\tprivate _checkStuck() {\n\t\tconst rect = this._el.getBoundingClientRect();\n\t\tconst layout = document.querySelector('p-layout');\n\n\t\tif (layout) {\n\t\t\tconst innerContent = layout.shadowRoot.querySelector('.content');\n\t\t\tconst innerContentComputed = getComputedStyle(innerContent);\n\n\t\t\tconst layoutPaddingBottom = parseInt(\n\t\t\t\tinnerContentComputed.paddingBottom,\n\t\t\t\t10\n\t\t\t);\n\t\t\tthis._el.style.bottom = `-${layoutPaddingBottom}px`;\n\t\t}\n\n\t\tthis._isPinned = window.innerHeight - rect.bottom == 0;\n\t}\n\n\t@Listen('scroll', { target: 'window' })\n\tonScroll() {\n\t\tthis._checkStuck();\n\t}\n}\n"]}

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

@@ -0,0 +1 @@
+*{box-sizing:border-box}.static{position:static!important}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.z-\[1\]{z-index:1!important}.col-start-1{grid-column-start:1!important}.col-start-2{grid-column-start:2!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.h-4{height:1rem!important}.h-8{height:2rem!important}.w-3\/4{width:75%!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.gap-2{gap:.5rem!important}.gap-4{gap:1rem!important}.justify-self-start{justify-self:start!important}.rounded{border-radius:.25rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity,1))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.p-4{padding:1rem!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}@media (min-width:40rem){.tablet\:flex{display:flex!important}}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}.desktop-xs\:grid{display:grid!important}.desktop-xs\:hidden{display:none!important}.desktop-xs\:w-auto{width:auto!important}.desktop-xs\:max-w-60{max-width:15rem!important}.desktop-xs\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.desktop-xs\:flex-row{flex-direction:row!important}.desktop-xs\:items-center{align-items:center!important}}

package/dist/collection/components/{deprecated/molecules → molecules}/table/header/table-header.component.js

@@ -1,6 +1,12 @@
-import { h, Host, } from "@stencil/core";
+import { h, } from "@stencil/core";
+import { cva } from "class-variance-authority";
 import { debounceTime, distinctUntilChanged, Subject } from "rxjs";
-import { formatTranslation, getLocaleComponentStrings, } from "../../../../../utils/localization";
+import { formatTranslation, getLocaleComponentStrings, } from "../../../../utils/localization";
+const header = cva([
+    'flex flex-col gap-2 z-[1]',
+    'w-full',
+    'desktop-xs:grid desktop-xs:grid-cols-2',
+]);
 export class TableHeader {
     _defaultFilterButtonTemplate = () => formatTranslation(this._locales.filter);
     _defaultActionButtonTemplate = (amount) => this.actionText
@@ -38,6 +44,10 @@ export class TableHeader {
      * Wether to show the filter button
      */
     enableFilter = true;
+    /**
+     * Wether to show the export button
+     */
+    enableExport = true;
     /**
      * Wether to show the filter button on desktop
      */
@@ -90,6 +100,10 @@ export class TableHeader {
      * Event when the action button is clicked
      */
     action;
+    /**
+     * Event whenever the export button is clicked
+     */
+    export;
     /**
      * The host element
      */
@@ -112,19 +126,19 @@ export class TableHeader {
         const mobileTotal = (this.selectedFiltersAmount || 0) + (activeQuickFilter?.default ? 0 : 1);
         const hasCustomFilterSlot = !!this._el.querySelector(':scope > [slot="custom-filter"]');
         const hasCustomActionsSlot = !!this._el.querySelector(':scope > [slot="custom-actions"]');
-        return (h(Host, { key: '865662121f2eb6e4b389c10d4d211b2ec7f40ca0', class: 'p-table-header' }, this.loading && (h("p-loader", { key: '2890fa8f55ed0561f6a66ec91d3a527fd85577d6', variant: 'ghost', class: 'hidden h-8 w-3/4 rounded desktop-xs:flex' })), !this.loading &&
-            (hasCustomFilterSlot || this.quickFilters.length > 0) && (h("div", { key: 'f21d44f44ef2367afbf2bb208d822892862eb45b', class: 'left-side flex flex-col justify-start gap-4 desktop-xs:flex-row' }, hasCustomFilterSlot && h("slot", { key: '5faf9c98416de17890a33bb51089b0a2b329c37b', name: 'custom-filter' }), this.quickFilters.length > 0 && (h("p-segment-container", { key: 'd16231dd99cb6c0ca3dfa058690910fd79c69ed7', class: 'hidden desktop-xs:flex' }, this.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: '409b4c928bbada5fb3a0f1876db745f5b87e1109', class: 'right-side flex flex-col justify-end gap-4 desktop-xs:flex-row' }, this.enableSearch && (h("p-field", { key: '2d1330a49f30b3a197e6fe39d14fc2e2121ce951', icon: 'search', size: 'sm', class: 'desktop-xs:w-48', placeholder: 'Zoeken...', value: this.query, onValueChange: ev => this._queryObserver.next(ev.detail) })), this.enableFilter && (h("p-button", { key: '685ebbc9a4eec5b817c355d2b6402bf58bf7958e', icon: 'filter', variant: 'secondary', size: 'sm', class: `w-full ${this.enableFilterDesktop
+        return (h("div", { key: '9cee2d0ce2d22ade10d541a27eda932a750f36f2', class: header() }, this.loading && (h("p-loader", { key: '410901852b3077c8089624b25dadb4f7ce269515', variant: 'ghost', class: 'hidden h-8 w-3/4 rounded desktop-xs:flex' })), !this.loading &&
+            (hasCustomFilterSlot || this.quickFilters.length > 0) && (h("div", { key: '18149595c8405dd1a28fdd6379c15bfed91267fd', class: 'col-start-1 flex flex-col justify-start gap-4 justify-self-start desktop-xs:flex-row' }, hasCustomFilterSlot && h("slot", { key: '811f3f7d6c6cd9fa286b34c162bcdb9279e0ce8b', name: 'custom-filter' }), this.quickFilters.length > 0 && (h("p-segment-container", { key: 'b11bc2767fc7b0335e7bfe238f053547475a68ff', class: 'hidden desktop-xs:flex' }, this.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: 'a84f52b7ad956033b66bf4f53d6b34eceb4855a4', class: 'col-start-2 flex flex-col justify-end gap-2 desktop-xs:flex-row desktop-xs:items-center' }, this.enableSearch && (h("p-field", { key: '24b86b5902911d4aae23b2857da262eacbf784be', icon: 'search', class: 'desktop-xs:max-w-60', placeholder: 'Zoeken...', value: this.query, onValueChange: ev => this._queryObserver.next(ev.detail) })), h("div", { key: 'b53d2ca089b385884637ad77b234a10d5f889ced', class: 'flex items-center gap-2' }, this.enableFilter && (h("p-button", { key: '56f05fcc7c2633cc7664622d3d0d6dffb7d7efcb', icon: 'filter', variant: 'secondary', class: `w-full ${this.enableFilterDesktop
                 ? 'desktop-xs:w-auto'
                 : 'desktop-xs:hidden'}`, onClick: () => this.filter.emit() }, this.filterButtonTemplate
             ? this.filterButtonTemplate()
             : this._defaultFilterButtonTemplate(), this.selectedFiltersAmount &&
-            this._getLabel(this.selectedFiltersAmount), mobileTotal > 0 && this._getLabel(mobileTotal, 'mobile'))), this.enableAction && this._buttonTemplate(), hasCustomActionsSlot && h("slot", { key: '131acff7514a093a756e5b6b2cbde077f92b2620', name: 'custom-actions' })), this.enableAction && this.canUseAction && (h("div", { key: 'c85203af6bb24027ee0e1eff79cd5aaa0bbe5438', class: 'fixed bottom-0 left-0 block w-full border border-solid border-transparent border-t-mystic-dark bg-white p-4 desktop-xs:hidden' }, this._buttonTemplate(true)))));
+            this._getLabel(this.selectedFiltersAmount), mobileTotal > 0 && this._getLabel(mobileTotal, 'mobile'))), !this.loading && this.enableExport && this.enableFilter && (h("p-divider", { key: '0f74c850f06051000fcec1111df686cada6b96b0', variant: 'vertical', class: 'hidden h-4 tablet:flex' })), !this.loading && this.enableExport && (h("p-button", { key: '8c46666090fdd946f986bfcc859536be9bbb7841', 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: '9afca30b53005ed17c4c9a351e23f003f2589d2f', name: 'custom-actions' })), this.enableAction && this.canUseAction && (h("div", { key: '14defd672bd6f0b9e1d29dc5495414ca29e450d6', class: 'fixed bottom-0 left-0 block w-full border border-solid border-transparent border-t-mystic-dark bg-white p-4 desktop-xs:hidden' }, 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, size: 'sm', 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, onClick: () => this.action.emit(), loading: this.actionLoading }, this.actionButtonTemplate
             ? this.actionButtonTemplate(mobile ? this.itemsSelectedAmount : 0)
             : this._defaultActionButtonTemplate(mobile ? this.itemsSelectedAmount : 0)));
     }
@@ -137,7 +151,7 @@ export class TableHeader {
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["table-header.component.scss"]
+            "$": ["table-header.component.css"]
         };
     }
     static get styleUrls() {
@@ -157,7 +171,7 @@ export class TableHeader {
                     "references": {
                         "QuickFilter": {
                             "location": "import",
-                            "path": "../../../../../types/table",
+                            "path": "../../../../types/table",
                             "id": "src/types/table.ts::QuickFilter"
                         }
                     }
@@ -290,6 +304,26 @@ export class TableHeader {
                 "reflect": false,
                 "defaultValue": "true"
             },
+            "enableExport": {
+                "type": "boolean",
+                "attribute": "enable-export",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to show the export button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "enableFilterDesktop": {
                 "type": "boolean",
                 "attribute": "enable-filter-desktop",
@@ -339,8 +373,8 @@ export class TableHeader {
                     "references": {
                         "templateFunc": {
                             "location": "local",
-                            "path": "/home/runner/work/Paperless/Paperless/packages/core/src/components/deprecated/molecules/table/header/table-header.component.tsx",
-                            "id": "src/components/deprecated/molecules/table/header/table-header.component.tsx::templateFunc"
+                            "path": "/home/runner/work/Paperless/Paperless/packages/core/src/components/molecules/table/header/table-header.component.tsx",
+                            "id": "src/components/molecules/table/header/table-header.component.tsx::templateFunc"
                         }
                     }
                 },
@@ -404,7 +438,7 @@ export class TableHeader {
                     "references": {
                         "IconVariant": {
                             "location": "import",
-                            "path": "../../../../atoms/icon/icon.component",
+                            "path": "../../../atoms/icon/icon.component",
                             "id": "src/components/atoms/icon/icon.component.tsx::IconVariant"
                         }
                     }
@@ -469,8 +503,8 @@ export class TableHeader {
                     "references": {
                         "buttonTemplateFunc": {
                             "location": "local",
-                            "path": "/home/runner/work/Paperless/Paperless/packages/core/src/components/deprecated/molecules/table/header/table-header.component.tsx",
-                            "id": "src/components/deprecated/molecules/table/header/table-header.component.tsx::buttonTemplateFunc"
+                            "path": "/home/runner/work/Paperless/Paperless/packages/core/src/components/molecules/table/header/table-header.component.tsx",
+                            "id": "src/components/molecules/table/header/table-header.component.tsx::buttonTemplateFunc"
                         }
                     }
                 },
@@ -508,7 +542,7 @@ export class TableHeader {
                     "references": {
                         "QuickFilter": {
                             "location": "import",
-                            "path": "../../../../../types/table",
+                            "path": "../../../../types/table",
                             "id": "src/types/table.ts::QuickFilter"
                         }
                     }
@@ -558,6 +592,21 @@ export class TableHeader {
                     "resolved": "null",
                     "references": {}
                 }
+            }, {
+                "method": "export",
+                "name": "export",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event whenever the export button is clicked"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "_el"; }

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-header.component.js","sourceRoot":"","sources":["../../../../../src/components/molecules/table/header/table-header.component.tsx"],"names":[],"mappings":"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","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';\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\n\t'desktop-xs:grid desktop-xs:grid-cols-2',\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[] = [];\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 activeQuickFilter = this.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<div class={header()}>\n\t\t\t\t{this.loading && (\n\t\t\t\t\t<p-loader\n\t\t\t\t\t\tvariant='ghost'\n\t\t\t\t\t\tclass='hidden h-8 w-3/4 rounded desktop-xs:flex'\n\t\t\t\t\t></p-loader>\n\t\t\t\t)}\n\n\t\t\t\t{!this.loading &&\n\t\t\t\t\t(hasCustomFilterSlot || this.quickFilters.length > 0) && (\n\t\t\t\t\t\t<div class='col-start-1 flex flex-col justify-start gap-4 justify-self-start desktop-xs:flex-row'>\n\t\t\t\t\t\t\t{hasCustomFilterSlot && <slot name='custom-filter' />}\n\n\t\t\t\t\t\t\t{this.quickFilters.length > 0 && (\n\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{this.quickFilters.map(item => (\n\t\t\t\t\t\t\t\t\t\t<p-segment-item\n\t\t\t\t\t\t\t\t\t\t\tactive={\n\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}\n\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>\n\t\t\t\t\t\t\t\t\t\t\t{typeof item.text === 'string' ? item.text : item.text()}{' '}\n\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</p-segment-item>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</p-segment-container>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t<div class='col-start-2 flex flex-col justify-end gap-2 desktop-xs:flex-row desktop-xs:items-center'>\n\t\t\t\t\t{this.enableSearch && (\n\t\t\t\t\t\t<p-field\n\t\t\t\t\t\t\ticon='search'\n\t\t\t\t\t\t\tclass='desktop-xs:max-w-60'\n\t\t\t\t\t\t\tplaceholder='Zoeken...'\n\t\t\t\t\t\t\tvalue={this.query}\n\t\t\t\t\t\t\tonValueChange={ev => this._queryObserver.next(ev.detail)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<div class='flex items-center gap-2'>\n\t\t\t\t\t\t{this.enableFilter && (\n\t\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\t\ticon='filter'\n\t\t\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\t\t\tclass={`w-full ${\n\t\t\t\t\t\t\t\t\tthis.enableFilterDesktop\n\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: 'desktop-xs:hidden'\n\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\tonClick={() => this.filter.emit()}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this.filterButtonTemplate\n\t\t\t\t\t\t\t\t\t? this.filterButtonTemplate()\n\t\t\t\t\t\t\t\t\t: this._defaultFilterButtonTemplate()}\n\t\t\t\t\t\t\t\t{this.selectedFiltersAmount &&\n\t\t\t\t\t\t\t\t\tthis._getLabel(this.selectedFiltersAmount)}\n\t\t\t\t\t\t\t\t{mobileTotal > 0 && this._getLabel(mobileTotal, 'mobile')}\n\t\t\t\t\t\t\t</p-button>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{!this.loading && this.enableExport && this.enableFilter && (\n\t\t\t\t\t\t\t<p-divider\n\t\t\t\t\t\t\t\tvariant='vertical'\n\t\t\t\t\t\t\t\tclass='hidden h-4 tablet:flex'\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{!this.loading && this.enableExport && (\n\t\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\t\t\ticon='upload'\n\t\t\t\t\t\t\t\tclass='desktop-xs:auto w-full'\n\t\t\t\t\t\t\t\tonClick={() => this.export.emit()}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{formatTranslation(this._locales.export)}\n\t\t\t\t\t\t\t</p-button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.enableAction && this._buttonTemplate()}\n\n\t\t\t\t\t{hasCustomActionsSlot && <slot name='custom-actions' />}\n\t\t\t\t</div>\n\n\t\t\t\t{this.enableAction && this.canUseAction && (\n\t\t\t\t\t<div class='fixed bottom-0 left-0 block w-full border border-solid border-transparent border-t-mystic-dark bg-white p-4 desktop-xs:hidden'>\n\t\t\t\t\t\t{this._buttonTemplate(true)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\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"]}

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

@@ -0,0 +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-\[1\]{z-index:1!important}.z-\[2\]{z-index:2!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-\[3\.875rem\]{min-height:3.875rem!important}.w-full{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}.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}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-normal{font-weight:400!important}.text-black-teal-400{--tw-text-opacity:1!important;color:rgb(53 85 80/var(--tw-text-opacity,1))!important}.text-black-teal-500{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.opacity-0{opacity:0!important}.transition-opacity{transition-duration:.15s!important;transition-property:opacity!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.after\:pointer-events-none:after{content:var(--tw-content)!important;pointer-events:none!important}.after\:absolute:after{content:var(--tw-content)!important;position:absolute!important}.after\:left-1:after{content:var(--tw-content)!important;left:.25rem!important}.after\:top-1:after{content:var(--tw-content)!important;top:.25rem!important}.after\:z-\[0\]:after{content:var(--tw-content)!important;z-index:0!important}.after\:h-\[calc\(100\%-0\.5rem\)\]:after{content:var(--tw-content)!important;height:calc(100% - .5rem)!important}.after\:w-\[calc\(100\%-0\.5rem\)\]:after{content:var(--tw-content)!important;width:calc(100% - .5rem)!important}.after\:rounded-lg:after{border-radius:.5rem!important;content:var(--tw-content)!important}.after\:bg-off-white-300:after{--tw-bg-opacity:1!important;background-color:rgb(248 247 244/var(--tw-bg-opacity,1))!important;content:var(--tw-content)!important}.after\:opacity-0:after{content:var(--tw-content)!important;opacity:0!important}.after\:transition-opacity:after{content:var(--tw-content)!important;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\:after\:opacity-100:hover:after{content:var(--tw-content)!important;opacity:1!important}.group:hover .group-hover\:opacity-100{opacity:1!important}@media (min-width:40rem){.tablet\:h-18{height:4.5rem!important}.tablet\:py-6{padding-bottom:1.5rem!important;padding-top:1.5rem!important}}