@paperless/core 0.1.0-alpha.21 → 0.1.0-alpha.210

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

@@ -0,0 +1,369 @@
+import { Component, Element, Event, h, Host, Listen, Prop, State, } from '@stencil/core';
+import { debounceTime, distinctUntilChanged, Subject } from 'rxjs';
+import { formatTranslation, getLocaleComponentStrings, } from '../../../utils/localization';
+export class TableHeader {
+  constructor() {
+    /**
+     * Quick filters to show
+     */
+    this.quickFilters = [];
+    /**
+     * Wether to show the search input
+     */
+    this.enableSearch = true;
+    /**
+     * The amount of items that are selected
+     */
+    this.itemsSelectedAmount = 0;
+    /**
+     * Wether to show the filter button
+     */
+    this.enableFilter = true;
+    /**
+     * The template for the filter button text
+     */
+    this.filterButtonTemplate = () => formatTranslation(this._locales.filter);
+    /**
+     * 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 = (amount) => formatTranslation(amount === 0
+      ? this._locales.edit
+      : amount === 1
+        ? this._locales.edit_single
+        : this._locales.edit_plural, { amount });
+    /**
+     * Locales used for this component
+     */
+    this._locales = {};
+    this._queryObserver = new Subject();
+  }
+  componentWillLoad() {
+    this._setLocales();
+  }
+  componentDidLoad() {
+    this._queryObserver
+      .pipe(debounceTime(300), distinctUntilChanged())
+      .subscribe((value) => this.queryChange.emit(value));
+  }
+  render() {
+    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.selectedFiltersAmount && (h("p-label", { size: "small", variant: "negative", "mobile-icon": false, circle: false, class: "ml-1" }, this.selectedFiltersAmount)))),
+        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);
+  }
+  _buttonTemplate(mobile = false) {
+    return (h("p-button", { class: !mobile && 'hidden desktop-xs:flex', icon: "pencil", size: "small", width: mobile ? 'full' : 'auto', disabled: !this.canEdit, onClick: () => this.edit.emit() }, this.editButtonTemplate(mobile ? this.itemsSelectedAmount : 0)));
+  }
+  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"
+          }
+        }
+      },
+      "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": "Wether to show the search input"
+      },
+      "attribute": "enable-search",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "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"
+    },
+    "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
+    },
+    "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"
+    },
+    "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"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The template for the filter button text"
+      },
+      "defaultValue": "() =>\n        formatTranslation(this._locales.filter)"
+    },
+    "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"
+    },
+    "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"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The template for the edit button text"
+      },
+      "defaultValue": "(amount: number) =>\n        formatTranslation(\n            amount === 0\n                ? this._locales.edit\n                : amount === 1\n                ? this._locales.edit_single\n                : this._locales.edit_plural,\n            { amount }\n        )"
+    }
+  }; }
+  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": {}
+      }
+    }]; }
+  static get elementRef() { return "_el"; }
+  static get listeners() { return [{
+      "name": "localeChanged",
+      "method": "_setLocales",
+      "target": "body",
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,21 @@
+:host {
+  @apply w-full flex flex-col;
+  @apply text-sm text-storm-medium;
+  @apply px-6;
+}
+:host .content {
+  @apply flex flex-nowrap justify-between gap-4 w-full items-center py-6;
+}
+
+:host(.variant-header) {
+  @apply bg-mystic-light;
+  @apply text-xs font-semibold uppercase text-storm-vague;
+  @apply border-y border-x-0 border-solid border-y-mystic-dark !important;
+}
+:host(.variant-header) .content {
+  @apply py-2;
+}
+
+:host(.enable-hover:hover) {
+  @apply bg-indigo-light cursor-pointer;
+} .static{position:static!important}.flex{display:flex!important}.table{display:table!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.flex-col{flex-direction:column!important}.rounded{border-radius:.25rem!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}.static{position:static!important}.flex{display:flex!important}.h-6{height:1.5rem!important}.w-full{width:100%!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}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!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}*{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}*{box-sizing:border-box}.static{position:static!important}.m-0{margin:0!important}*{box-sizing:border-box}

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

@@ -0,0 +1,67 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class TableRow {
+  constructor() {
+    /**
+     * Variant of the header
+     */
+    this.variant = 'default';
+    /**
+     * Enable hover
+     */
+    this.enableHover = true;
+  }
+  render() {
+    return (h(Host, { class: `p-table-row variant-${this.variant} ${this.enableHover &&
+        this.variant === 'default' &&
+        'enable-hover'}` },
+      h("div", { class: "content" },
+        h("slot", null)),
+      this.variant === 'default' && h("p-divider", { class: "m-0" })));
+  }
+  static get is() { return "p-table-row"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["table-row.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["table-row.component.css"]
+  }; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'header'",
+        "resolved": "\"default\" | \"header\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Variant of the header"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "enableHover": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enable hover"
+      },
+      "attribute": "enable-hover",
+      "reflect": false,
+      "defaultValue": "true"
+    }
+  }; }
+}

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

@@ -0,0 +1,23 @@
+:host {
+  @apply flex justify-between items-center gap-2;
+  @apply w-full p-4 pl-5;
+  @apply bg-white rounded box-border;
+  @apply shadow-4 !important;
+  @apply border-l-4 border-solid !important;
+}
+:host p {
+  @apply m-0;
+  @apply overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+:host(.variant-positive) {
+  @apply border-l-positive  !important;
+}
+
+:host(.variant-unbiased) {
+  @apply border-l-unbiased  !important;
+}
+
+:host(.variant-negative) {
+  @apply border-l-negative  !important;
+} .static{position:static!important}.flex{display:flex!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.flex-col{flex-direction:column!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-storm{--tw-text-opacity:1!important;color:rgb(81 83 107/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}*{box-sizing:border-box}

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

@@ -0,0 +1,192 @@
+import { Component, Event, h, Host, Prop } from '@stencil/core';
+export class Toast {
+  constructor() {
+    /**
+     * The variant of the toast
+     */
+    this.variant = 'positive';
+    /**
+     * Wether to enable the close button
+     */
+    this.enableAction = true;
+    /**
+     * Icon to show on the button
+     */
+    this.actionIcon = 'negative';
+  }
+  render() {
+    var _a, _b;
+    return (h(Host, { class: `p-toast variant-${this.variant}` },
+      h("div", { class: "flex flex-col w-full min-w-0" },
+        h("p", { class: "font-semibold text-storm" }, ((_a = this.header) === null || _a === void 0 ? void 0 : _a.length) ? (this.header) : (h("slot", { name: "header" }))),
+        h("p", { class: "text-sm text-storm-medium w-full" }, ((_b = this.content) === null || _b === void 0 ? void 0 : _b.length) ? (this.content) : (h("slot", { name: "content" })))),
+      this.enableAction && (h("p-button", { class: "flex-1", variant: "secondary", iconOnly: true, size: "small", icon: this.actionIcon, iconFlip: this.actionIconFlip, iconRotate: this.actionIconRotate, onClick: () => this.action.emit() }))));
+  }
+  static get is() { return "p-toast"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["toast.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["toast.component.css"]
+  }; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'positive' | 'unbiased' | 'negative'",
+        "resolved": "\"negative\" | \"positive\" | \"unbiased\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The variant of the toast"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'positive'"
+    },
+    "header": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The header of the toast"
+      },
+      "attribute": "header",
+      "reflect": false
+    },
+    "content": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The content of the toast"
+      },
+      "attribute": "content",
+      "reflect": false
+    },
+    "enableAction": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to enable the close button"
+      },
+      "attribute": "enable-action",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "actionIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "IconVariant",
+        "resolved": "\"arrow\" | \"attachment\" | \"bread\" | \"calendar\" | \"camera\" | \"car\" | \"checklist\" | \"checkmark\" | \"chevron\" | \"clock\" | \"cogs\" | \"comment\" | \"document\" | \"download\" | \"envelope\" | \"explanation\" | \"eye\" | \"filter\" | \"folder\" | \"grid\" | \"headset\" | \"integration\" | \"list\" | \"location\" | \"megaphone\" | \"menu\" | \"minus\" | \"more\" | \"negative\" | \"pagination\" | \"payment\" | \"pencil\" | \"person\" | \"plus\" | \"question\" | \"receipt\" | \"report\" | \"search\" | \"settings\" | \"sick\" | \"signout\" | \"switch\" | \"tachometer\" | \"task\" | \"template\" | \"tool\" | \"trash\" | \"turn\" | \"upload\" | \"warning\"",
+        "references": {
+          "IconVariant": {
+            "location": "import",
+            "path": "../../atoms/icon/icon.component"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon to show on the button"
+      },
+      "attribute": "action-icon",
+      "reflect": false,
+      "defaultValue": "'negative'"
+    },
+    "actionIconFlip": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "IconFlipOptions",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {
+          "IconFlipOptions": {
+            "location": "import",
+            "path": "../../atoms/icon/icon.component"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon flip"
+      },
+      "attribute": "action-icon-flip",
+      "reflect": false
+    },
+    "actionIconRotate": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "RotateOptions",
+        "resolved": "-135 | -180 | -225 | -25 | -270 | -315 | -45 | -90 | 0 | 135 | 180 | 225 | 25 | 270 | 315 | 45 | 90",
+        "references": {
+          "RotateOptions": {
+            "location": "import",
+            "path": "../../../types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon rotate"
+      },
+      "attribute": "action-icon-rotate",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "action",
+      "name": "action",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Button click event"
+      },
+      "complexType": {
+        "original": "MouseEvent",
+        "resolved": "MouseEvent",
+        "references": {
+          "MouseEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+}