@paperless/core 0.1.0-alpha.15 → 0.1.0-alpha.151

package/dist/collection/components/molecules/pagination/pagination.component.js

@@ -1,4 +1,4 @@
-import { Component, Event, h, Host, Prop, Watch } from '@stencil/core';
+import { Component, Event, h, Host, Prop, Watch, } from '@stencil/core';
 export class Pagination {
   constructor() {
     /**
@@ -9,6 +9,10 @@ export class Pagination {
      * The amount of items per page
      */
     this.pageSize = 12;
+    /**
+     * Wether to hide when there is only 1 page available
+     */
+    this.hideOnSinglePage = false;
     this._pages = [];
     this._set = [];
     this._nextClick = () => {
@@ -46,7 +50,7 @@ export class Pagination {
       };
       // Disable page range, display all the pages
       if (range === null) {
-        const p = this._pages.map(p => ({
+        const p = this._pages.map((p) => ({
           type: 'page',
           value: p,
         }));
@@ -106,10 +110,12 @@ export class Pagination {
     this._generate();
   }
   render() {
-    var _a;
-    return (h(Host, { class: "p-pagination" }, (_a = this._set) === null || _a === void 0 ? void 0 : _a.map(p => {
+    var _a, _b;
+    return (h(Host, { class: `p-pagination ${this.hideOnSinglePage && ((_a = this._set) === null || _a === void 0 ? void 0 : _a.length) === 3 && 'hidden'}` }, (_b = this._set) === null || _b === void 0 ? void 0 : _b.map((p) => {
       if (p.type === 'previous' || p.type === 'next') {
-        return h("p-pagination-item", { onClick: () => (p.type === 'previous' ? this._previousClick() : this._nextClick()) }, p.value);
+        return (h("p-pagination-item", { onClick: () => p.type === 'previous'
+            ? this._previousClick()
+            : this._nextClick() }, p.value));
       }
       if (p.type === 'ellipsis') {
         return h("p-pagination-item", null, "...");
@@ -121,8 +127,12 @@ export class Pagination {
     this._generate();
   }
   _generate() {
+    var _a;
     this._pages = this._generatePages();
     this._set = this._generateSet();
+    if (this.page > ((_a = this._pages) === null || _a === void 0 ? void 0 : _a.length)) {
+      this._changePage(this._pages.length);
+    }
   }
   _changePage(p) {
     if (!p) {
@@ -189,6 +199,24 @@ export class Pagination {
       "reflect": false,
       "defaultValue": "12"
     },
+    "hideOnSinglePage": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to hide when there is only 1 page available"
+      },
+      "attribute": "hide-on-single-page",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "total": {
       "type": "number",
       "mutable": false,
@@ -215,7 +243,7 @@ export class Pagination {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Event whenever the page changes"
       },
       "complexType": {
         "original": "number",

package/dist/collection/components/molecules/profile/profile.component.css

@@ -0,0 +1,60 @@
+:host {
+  @apply flex;
+}
+:host .content {
+  @apply flex gap-3 items-center w-full;
+}
+:host .content .name {
+  @apply flex flex-col justify-center overflow-hidden;
+}
+:host .content .name > *:nth-child(1) {
+  @apply text-sm text-storm-dark;
+  @apply font-semibold;
+}
+:host .content .name > *:nth-child(2) {
+  @apply text-sm text-storm-vague;
+}
+:host .content .name ::slotted(*) {
+  @apply text-ellipsis overflow-hidden whitespace-nowrap;
+}
+
+:host([size=small]) {
+  @apply h-8;
+}
+
+:host([size=medium]) {
+  @apply h-[3.125rem];
+}
+
+:host([size=large]) {
+  @apply h-16;
+}
+
+:host(.has-dropdown) {
+  @apply cursor-pointer;
+}
+:host(.has-dropdown) .content {
+  @apply p-2 rounded;
+  @apply border border-solid border-mystic-dark !important;
+}
+
+:host(.has-dropdown[size=small]) {
+  @apply h-12;
+}
+
+:host(.has-dropdown[size=medium]) {
+  @apply h-[4.125rem];
+}
+
+:host(.has-dropdown[size=large]) {
+  @apply h-20;
+}
+
+:host(.has-dropdown:hover) .content,
+:host(.active) .content {
+  @apply shadow-4;
+}
+
+:host(.active) .content p-icon {
+  @apply text-indigo;
+} .static{position:static!important}.absolute{position:absolute!important}.ml-auto{margin-left:auto!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}*{box-sizing:border-box}

package/dist/collection/components/molecules/profile/profile.component.js

@@ -0,0 +1,95 @@
+import { Component, Element, h, Host, Prop, State } from '@stencil/core';
+export class Profile {
+  constructor() {
+    /**
+     * The variant of the profile
+     */
+    this.variant = 'user';
+    /**
+     * The size of the profile avatar
+     */
+    this.size = 'small';
+    this._dropdownOpen = false;
+  }
+  componentWillRender() {
+    this._updateAvatar();
+  }
+  render() {
+    const hasDropdownSlot = !!this._el.querySelector('[slot="dropdown"]');
+    const content = this._getContent(hasDropdownSlot);
+    return (h(Host, { class: `p-profile ${hasDropdownSlot && 'has-dropdown'} ${this._dropdownOpen && 'active'}` }, hasDropdownSlot ? (h("p-dropdown", { class: "w-full min-w-0", strategy: "absolute", placement: this.variant === 'user' ? 'top-end' : 'bottom-end', onIsOpen: (ev) => (this._dropdownOpen = ev.detail) },
+      content,
+      h("div", { slot: "items" },
+        h("slot", { name: "dropdown" })))) : (content)));
+  }
+  _getContent(hasDropdownSlot) {
+    return (h("div", { class: "content", slot: "trigger" },
+      h("slot", { name: "avatar" }),
+      h("div", { class: "name" },
+        h("slot", { name: "title" }),
+        h("slot", { name: "subtitle" })),
+      hasDropdownSlot && this._getIcon()));
+  }
+  _updateAvatar() {
+    var _a, _b;
+    const avatar = this._el.querySelector('p-avatar[slot="avatar"]');
+    if (!avatar) {
+      return;
+    }
+    avatar.variant = (_a = this.variant) !== null && _a !== void 0 ? _a : avatar.variant;
+    avatar.size = (_b = this.size) !== null && _b !== void 0 ? _b : avatar === null || avatar === void 0 ? void 0 : avatar.size;
+  }
+  _getIcon() {
+    return (h("p-icon", { class: "ml-auto", variant: this.variant === 'company' ? 'chevron' : 'more' }));
+  }
+  static get is() { return "p-profile"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["profile.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["profile.component.css"]
+  }; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'company' | 'user'",
+        "resolved": "\"company\" | \"user\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The variant of the profile"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'user'"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'small' | 'medium' | 'large'",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The size of the profile avatar"
+      },
+      "attribute": "size",
+      "reflect": true,
+      "defaultValue": "'small'"
+    }
+  }; }
+  static get states() { return {
+    "_dropdownOpen": {}
+  }; }
+  static get elementRef() { return "_el"; }
+}

package/dist/collection/components/molecules/stepper/stepper.component.css

@@ -0,0 +1,12 @@
+:host {
+  @apply flex;
+}
+
+:host([direction=horizontal]) {
+  @apply h-auto items-end;
+}
+
+:host([direction=vertical]) {
+  @apply flex-col flex-wrap items-start;
+  @apply w-full min-h-full;
+} .static{position:static!important}.mb-3{margin-bottom:.75rem!important}.ml-2{margin-left:.5rem!important}.flex-auto{flex:1 1 auto!important}.-translate-y-1\/2{--tw-translate-y:-50%!important}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-translate-x-1\/2{--tw-translate-x:-50%!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.border-t-2{border-top-width:2px!important}.border-r-2{border-right-width:2px!important}.border-indigo{--tw-border-opacity:1!important;border-color:rgb(82 138 250/var(--tw-border-opacity))!important}.border-mystic-dark{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.transition{transition-duration:.15s!important;transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.duration-500{transition-duration:.5s!important}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}

package/dist/collection/components/molecules/stepper/stepper.component.js

@@ -0,0 +1,106 @@
+import { Component, Element, h, Host, Prop } from '@stencil/core';
+export class Stepper {
+  constructor() {
+    /**
+     * The currently active step
+     */
+    this.activeStep = 1;
+    /**
+     * The direction of the stepper
+     */
+    this.direction = 'horizontal';
+  }
+  componentWillRender() {
+    const activeStep = this.activeStep - 1;
+    this._steps = this._generateSteps(activeStep);
+  }
+  render() {
+    return h(Host, { class: "p-stepper" }, this._steps);
+  }
+  _generateSteps(activeStep) {
+    const elements = [];
+    const items = this._el.querySelectorAll('p-stepper-item');
+    for (let i = 0; i < (items === null || items === void 0 ? void 0 : items.length); i++) {
+      const item = items.item(i);
+      if (i > 0) {
+        elements.push(h("p-stepper-line", { direction: this.direction, active: i <= activeStep }));
+      }
+      const newItem = (h("p-stepper-item", { active: i === activeStep, finished: i < activeStep, direction: this.direction, align: i === 0
+          ? 'start'
+          : i === (items === null || items === void 0 ? void 0 : items.length) - 1
+            ? 'end'
+            : 'center' }, item.innerHTML));
+      elements.push(newItem);
+    }
+    return elements;
+    // return this._el
+    //     .querySelectorAll('p-stepper-step')
+    //     .map((child: any, index) => {
+    //         return (
+    //             <>
+    //                 {index > 0 && (
+    //                     <div
+    //                         className={`flex-auto transform ${
+    //                             direction === 'horizontal'
+    //                                 ? 'border-t-2 mb-3 -translate-y-1/2'
+    //                                 : 'border-r-2 ml-2 -translate-x-1/2'
+    //                         } transition duration-500 ease-in-out ${
+    //                             index <= activeStep
+    //                                 ? 'border-indigo'
+    //                                 : 'border-mystic-dark'
+    //                         }`}
+    //                     ></div>
+    //                 )}
+    //                 {child}
+    //             </>
+    //         );
+    //     });
+  }
+  static get is() { return "p-stepper"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stepper.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stepper.component.css"]
+  }; }
+  static get properties() { return {
+    "activeStep": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The currently active step"
+      },
+      "attribute": "active-step",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "direction": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'horizontal' | 'vertical'",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The direction of the stepper"
+      },
+      "attribute": "direction",
+      "reflect": true,
+      "defaultValue": "'horizontal'"
+    }
+  }; }
+  static get elementRef() { return "_el"; }
+}

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

@@ -0,0 +1,30 @@
+:host {
+  @apply grid grid-cols-1 gap-4;
+  @apply w-full;
+  @apply p-6;
+}
+:host > p-pagination {
+  @apply flex justify-self-center col-start-1;
+}
+@screen desktop-xs {
+  :host {
+    @apply grid-cols-3;
+    grid-template-areas: "page-size pagination export";
+  }
+  :host > p-page-size-select {
+    @apply col-start-1;
+  }
+  :host > p-pagination {
+    @apply col-start-2;
+  }
+  :host > p-button {
+    @apply justify-self-end col-start-3;
+  }
+}
+
+:host(.page-size-disabled.export-disabled) {
+  @apply grid-cols-1;
+}
+:host(.page-size-disabled.export-disabled) > p-pagination {
+  @apply col-start-1;
+} .static{position:static!important}.flex{display:flex!important}.table{display:table!important}.h-6{height:1.5rem!important}.w-full{width:100%!important}.w-6{width:1.5rem!important}.w-1\/12{width:8.333333%!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-10\/12{width:83.333333%!important}.w-11\/12{width:91.666667%!important}.w-auto{width:auto!important}.flex-1{flex:1 1 0%!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}.justify-center{justify-content:center!important}.gap-4{gap:1rem!important}.rounded{border-radius:.25rem!important}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!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}*{box-sizing:border-box}@media (min-width:40rem){.tablet\:w-1\/12{width:8.333333%!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\:w-10\/12{width:83.333333%!important}.tablet\:w-11\/12{width:91.666667%!important}}@media (min-width:64rem){.desktop-xs\:w-1\/12{width:8.333333%!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\:w-10\/12{width:83.333333%!important}.desktop-xs\:w-11\/12{width:91.666667%!important}}@media (min-width:80rem){.desktop-sm\:w-1\/12{width:8.333333%!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\:w-10\/12{width:83.333333%!important}.desktop-sm\:w-11\/12{width:91.666667%!important}}@media (min-width:85.375rem){.desktop\:w-1\/12{width:8.333333%!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\:w-10\/12{width:83.333333%!important}.desktop\:w-11\/12{width:91.666667%!important}}@media (min-width:90rem){.desktop-lg\:w-1\/12{width:8.333333%!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\:w-10\/12{width:83.333333%!important}.desktop-lg\:w-11\/12{width:91.666667%!important}}@media (min-width:120rem){.desktop-xl\:w-1\/12{width:8.333333%!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\:w-10\/12{width:83.333333%!important}.desktop-xl\:w-11\/12{width:91.666667%!important}}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}.hidden{display:none!important}*{box-sizing:border-box}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}}.static{position:static!important}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.justify-end{justify-content:flex-end!important}.gap-4{gap:1rem!important}.justify-self-end{justify-self:end!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))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!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}*{box-sizing:border-box}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}.desktop-xs\:hidden{display:none!important}.desktop-xs\:w-auto{width:auto!important}.desktop-xs\:flex-row{flex-direction:row!important}}.static{position:static!important}.m-0{margin:0!important}*{box-sizing:border-box}.visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.blur{--tw-blur:blur(8px)!important;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}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}*{box-sizing:border-box}*{box-sizing:border-box}.static{position:static!important}.hidden{display:none!important}*{box-sizing:border-box}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}}*{box-sizing:border-box}

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

@@ -0,0 +1,268 @@
+import { Component, Element, Event, h, Host, Listen, Prop, State, } from '@stencil/core';
+import { formatTranslation, getLocaleComponentStrings, } from '../../../utils/localization';
+import { defaultSize, defaultSizeOptions } from '../page-size-select/constants';
+export class TableFooter {
+  constructor() {
+    /**
+     * Wether to enable page size select
+     */
+    this.enablePageSize = true;
+    /**
+     * Wether to enable pagination
+     */
+    this.enablePagination = true;
+    /**
+     * Wether to enable export
+     */
+    this.enableExport = true;
+    /**
+     * The current page
+     */
+    this.page = 1;
+    /**
+     * The amount of items per page
+     */
+    this.pageSize = defaultSize;
+    /**
+     * The options for the page size
+     */
+    this.pageSizeOptions = defaultSizeOptions;
+    /**
+     * Wether to hide when there is only 1 page available
+     */
+    this.hideOnSinglePage = true;
+    /**
+     * Locales used for this component
+     */
+    this._locales = {};
+  }
+  componentWillLoad() {
+    this._setLocales();
+  }
+  render() {
+    var _a;
+    const hidePageSizeSelect = this.hideOnSinglePage && this.total < ((_a = this.pageSizeOptions) === null || _a === void 0 ? void 0 : _a[0]);
+    return (h(Host, { class: `p-table-footer ${!this.enablePageSize && 'page-size-disabled'} ${!this.enablePagination && 'pagination-disabled'} ${!this.enableExport && 'export-disabled'}` },
+      this.enablePagination && this.enablePageSize && (h("p-page-size-select", { class: !hidePageSizeSelect && 'hidden desktop-xs:flex', hidden: hidePageSizeSelect, size: this.pageSize, sizeOptions: this.pageSizeOptions, onSizeChange: ({ detail }) => this._changePageSize(detail) })),
+      this.enablePagination && (h("p-pagination", { pageSize: this.pageSize, total: this.total, page: this.page, hideOnSinglePage: this.hideOnSinglePage, onPageChange: ({ detail }) => this.pageChange.emit(detail) })),
+      this.enableExport && (h("p-button", { class: "hidden desktop-xs:flex", variant: "secondary", size: "small", icon: "download", onClick: () => this.export.emit() }, formatTranslation(this._locales.export)))));
+  }
+  async _setLocales() {
+    this._locales = await getLocaleComponentStrings(this._el);
+  }
+  _changePageSize(s) {
+    if (!s) {
+      return;
+    }
+    this.pageSize = s;
+    this.pageSizeChange.emit(this.pageSize);
+  }
+  static get is() { return "p-table-footer"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["table-footer.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["table-footer.component.css"]
+  }; }
+  static get properties() { return {
+    "enablePageSize": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to enable page size select"
+      },
+      "attribute": "enable-page-size",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "enablePagination": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to enable pagination"
+      },
+      "attribute": "enable-pagination",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "enableExport": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to enable export"
+      },
+      "attribute": "enable-export",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "page": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The current page"
+      },
+      "attribute": "page",
+      "reflect": true,
+      "defaultValue": "1"
+    },
+    "total": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The total amount of items"
+      },
+      "attribute": "total",
+      "reflect": false
+    },
+    "pageSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The amount of items per page"
+      },
+      "attribute": "page-size",
+      "reflect": false,
+      "defaultValue": "defaultSize"
+    },
+    "pageSizeOptions": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "number[]",
+        "resolved": "number[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The options for the page size"
+      },
+      "defaultValue": "defaultSizeOptions"
+    },
+    "hideOnSinglePage": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to hide when there is only 1 page available"
+      },
+      "attribute": "hide-on-single-page",
+      "reflect": false,
+      "defaultValue": "true"
+    }
+  }; }
+  static get states() { return {
+    "_locales": {}
+  }; }
+  static get events() { return [{
+      "method": "pageChange",
+      "name": "pageChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event whenever the page changes"
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }, {
+      "method": "pageSizeChange",
+      "name": "pageSizeChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event whenever the page changes"
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }, {
+      "method": "export",
+      "name": "export",
+      "bubbles": true,
+      "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",
+      "capture": false,
+      "passive": false
+    }]; }
+}