@paperless/core 0.1.0-alpha.281 → 0.1.0-alpha.282

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

@@ -1,4 +1,4 @@
-import { Component, Element, Event, h, Host, Listen, Prop, State, } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
 import { debounceTime, distinctUntilChanged, Subject } from 'rxjs';
 import { formatTranslation, getLocaleComponentStrings, } from '../../../utils/localization';
 export class TableHeader {
@@ -9,43 +9,19 @@ export class TableHeader {
       : amount === 1
         ? this._locales.edit_single
         : this._locales.edit_plural, { amount });
-    /**
-     * Quick filters to show
-     */
+    this._queryObserver = new Subject();
     this.quickFilters = [];
-    /**
-     * Wether to show the search input
-     */
+    this.activeQuickFilterIdentifier = undefined;
     this.enableSearch = true;
-    /**
-     * The amount of items that are selected
-     */
     this.itemsSelectedAmount = 0;
-    /**
-     * Wether to show the filter button
-     */
+    this.query = undefined;
     this.enableFilter = true;
-    /**
-     * The template for the filter button text
-     */
+    this.selectedFiltersAmount = undefined;
     this.filterButtonTemplate = this._defaultFilterButtonTemplate;
-    /**
-     * Wether to show the edit button
-     */
     this.enableEdit = true;
-    /**
-     * Wether to enable the edit button
-     */
     this.canEdit = false;
-    /**
-     * The template for the edit button text
-     */
     this.editButtonTemplate = this._defaultEditButtonTemplate;
-    /**
-     * Locales used for this component
-     */
     this._locales = {};
-    this._queryObserver = new Subject();
   }
   componentWillLoad() {
     this._setLocales();
@@ -59,27 +35,14 @@ export class TableHeader {
     const activeQuickFilter = this.quickFilters.find((f) => f.identifier === this.activeQuickFilterIdentifier);
     const mobileTotal = (this.selectedFiltersAmount || 0) +
       ((activeQuickFilter === null || activeQuickFilter === void 0 ? void 0 : activeQuickFilter.default) ? 0 : 1);
-    return (h(Host, { class: "p-table-header" },
-      this.quickFilters.length > 0 && (h("p-segment-container", { 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 === null || item === void 0 ? void 0 : item.count) >= 0 ? `(${item.count})` : ''))))),
-      h("div", { class: "flex flex-col desktop-xs:flex-row gap-4 justify-end justify-self-end" },
-        this.enableSearch && (h("p-input-group", { icon: "search", size: "small" },
-          h("input", { type: "text", slot: "input", placeholder: "Zoeken...", value: this.query, onInput: (ev) => this._queryObserver.next(ev.target.value) }))),
-        this.enableFilter && (h("p-button", { icon: "filter", variant: "secondary", size: "small", class: "w-full desktop-xs:w-auto", onClick: () => this.filter.emit() },
-          this.filterButtonTemplate
-            ? this.filterButtonTemplate()
-            : this._defaultFilterButtonTemplate(),
-          this.selectedFiltersAmount &&
-            this._getLabel(this.selectedFiltersAmount),
-          mobileTotal > 0 &&
-            this._getLabel(mobileTotal, 'mobile'))),
-        this.enableEdit && this._buttonTemplate()),
-      this.enableEdit && this.canEdit && (h("div", { class: "fixed bottom-0 left-0 w-full p-4 bg-white border border-solid border-transparent border-t-mystic-dark block desktop-xs:hidden" }, this._buttonTemplate(true)))));
+    return (h(Host, { class: "p-table-header" }, this.quickFilters.length > 0 && (h("p-segment-container", { 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 === null || item === void 0 ? void 0 : item.count) >= 0 ? `(${item.count})` : ''))))), h("div", { class: "flex flex-col desktop-xs:flex-row gap-4 justify-end justify-self-end" }, this.enableSearch && (h("p-input-group", { icon: "search", size: "small" }, h("input", { type: "text", slot: "input", placeholder: "Zoeken...", value: this.query, onInput: (ev) => this._queryObserver.next(ev.target.value) }))), this.enableFilter && (h("p-button", { icon: "filter", variant: "secondary", size: "small", class: "w-full desktop-xs:w-auto", onClick: () => this.filter.emit() }, this.filterButtonTemplate
+      ? this.filterButtonTemplate()
+      : this._defaultFilterButtonTemplate(), this.selectedFiltersAmount &&
+      this._getLabel(this.selectedFiltersAmount), mobileTotal > 0 &&
+      this._getLabel(mobileTotal, 'mobile'))), this.enableEdit && this._buttonTemplate()), this.enableEdit && this.canEdit && (h("div", { class: "fixed bottom-0 left-0 w-full p-4 bg-white border border-solid border-transparent border-t-mystic-dark block desktop-xs:hidden" }, this._buttonTemplate(true)))));
   }
   async _setLocales() {
     this._locales = await getLocaleComponentStrings(this._el);
@@ -96,291 +59,303 @@ export class TableHeader {
   }
   static get is() { return "p-table-header"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["table-header.component.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["table-header.component.css"]
-  }; }
-  static get properties() { return {
-    "quickFilters": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "QuickFilter[]",
-        "resolved": "QuickFilter[]",
-        "references": {
-          "QuickFilter": {
-            "location": "import",
-            "path": "../../../types/table"
+  static get originalStyleUrls() {
+    return {
+      "$": ["table-header.component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["table-header.component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "quickFilters": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "QuickFilter[]",
+          "resolved": "QuickFilter[]",
+          "references": {
+            "QuickFilter": {
+              "location": "import",
+              "path": "../../../types/table"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Quick filters to show"
-      },
-      "defaultValue": "[]"
-    },
-    "activeQuickFilterIdentifier": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Active quick filter identifier"
-      },
-      "attribute": "active-quick-filter-identifier",
-      "reflect": false
-    },
-    "enableSearch": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Quick filters to show"
+        },
+        "defaultValue": "[]"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Wether to show the search input"
+      "activeQuickFilterIdentifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Active quick filter identifier"
+        },
+        "attribute": "active-quick-filter-identifier",
+        "reflect": false
       },
-      "attribute": "enable-search",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "itemsSelectedAmount": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "enableSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to show the search input"
+        },
+        "attribute": "enable-search",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The amount of items that are selected"
+      "itemsSelectedAmount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The amount of items that are selected"
+        },
+        "attribute": "items-selected-amount",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "attribute": "items-selected-amount",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "query": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "query": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The query to show in the search bar"
+        },
+        "attribute": "query",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The query to show in the search bar"
+      "enableFilter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to show the filter button"
+        },
+        "attribute": "enable-filter",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "attribute": "query",
-      "reflect": false
-    },
-    "enableFilter": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "selectedFiltersAmount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The amount of filters being selected"
+        },
+        "attribute": "selected-filters-amount",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Wether to show the filter button"
-      },
-      "attribute": "enable-filter",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "selectedFiltersAmount": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The amount of filters being selected"
-      },
-      "attribute": "selected-filters-amount",
-      "reflect": false
-    },
-    "filterButtonTemplate": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "templateFunc",
-        "resolved": "() => string",
-        "references": {
-          "templateFunc": {
-            "location": "local"
+      "filterButtonTemplate": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "templateFunc",
+          "resolved": "() => string",
+          "references": {
+            "templateFunc": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The template for the filter button text"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The template for the filter button text"
+        },
+        "defaultValue": "this._defaultFilterButtonTemplate"
       },
-      "defaultValue": "this._defaultFilterButtonTemplate"
-    },
-    "enableEdit": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "enableEdit": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to show the edit button"
+        },
+        "attribute": "enable-edit",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Wether to show the edit button"
+      "canEdit": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to enable the edit button"
+        },
+        "attribute": "can-edit",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "enable-edit",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "canEdit": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Wether to enable the edit button"
-      },
-      "attribute": "can-edit",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "editButtonTemplate": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "buttonTemplateFunc",
-        "resolved": "(amount: number) => string",
-        "references": {
-          "buttonTemplateFunc": {
-            "location": "local"
+      "editButtonTemplate": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "buttonTemplateFunc",
+          "resolved": "(amount: number) => string",
+          "references": {
+            "buttonTemplateFunc": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The template for the edit button text"
-      },
-      "defaultValue": "this._defaultEditButtonTemplate"
-    }
-  }; }
-  static get states() { return {
-    "_locales": {}
-  }; }
-  static get events() { return [{
-      "method": "quickFilter",
-      "name": "quickFilter",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event when one of the quick filters is clicked"
-      },
-      "complexType": {
-        "original": "QuickFilter",
-        "resolved": "QuickFilter",
-        "references": {
-          "QuickFilter": {
-            "location": "import",
-            "path": "../../../types/table"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The template for the edit button text"
+        },
+        "defaultValue": "this._defaultEditButtonTemplate"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_locales": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "quickFilter",
+        "name": "quickFilter",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event when one of the quick filters is clicked"
+        },
+        "complexType": {
+          "original": "QuickFilter",
+          "resolved": "QuickFilter",
+          "references": {
+            "QuickFilter": {
+              "location": "import",
+              "path": "../../../types/table"
+            }
           }
         }
-      }
-    }, {
-      "method": "queryChange",
-      "name": "queryChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event when the query changes"
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }, {
-      "method": "filter",
-      "name": "filter",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event when the filter button is clicked"
-      },
-      "complexType": {
-        "original": "null",
-        "resolved": "null",
-        "references": {}
-      }
-    }, {
-      "method": "edit",
-      "name": "edit",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event when the edit button is clicked"
-      },
-      "complexType": {
-        "original": "null",
-        "resolved": "null",
-        "references": {}
-      }
-    }]; }
+      }, {
+        "method": "queryChange",
+        "name": "queryChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event when the query changes"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "filter",
+        "name": "filter",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event when the filter button is clicked"
+        },
+        "complexType": {
+          "original": "null",
+          "resolved": "null",
+          "references": {}
+        }
+      }, {
+        "method": "edit",
+        "name": "edit",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event when the edit button is clicked"
+        },
+        "complexType": {
+          "original": "null",
+          "resolved": "null",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "_el"; }
-  static get listeners() { return [{
-      "name": "localeChanged",
-      "method": "_setLocales",
-      "target": "body",
-      "capture": false,
-      "passive": false
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "localeChanged",
+        "method": "_setLocales",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }