@paperless/core 2.0.1-beta.4 → 2.0.1-beta.41

package/dist/collection/components/atoms/floating-menu-container/floating-menu-container.component.js

@@ -1,44 +1,213 @@
-import { Host, h } from "@stencil/core";
-export class FloatingMenuContainer {
-  constructor() {
-    this.usedInTable = false;
-  }
-  render() {
-    return (h(Host, { class: "p-floating-menu-container" }, this.usedInTable ? (h("slot", { name: "floating-menu-item" })) : (h("slot", null))));
-  }
-  static get is() { return "p-floating-menu-container"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["floating-menu-container.component.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["floating-menu-container.component.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "usedInTable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Weather the container is used in the table"
+import { Fragment, Host, h, } from "@stencil/core";
+import { cva } from "class-variance-authority";
+import { formatTranslation, getLocaleComponentStrings } from "../../../utils";
+const container = cva([
+    'floating-menu-container z-floating-menu',
+    'bg-dark-teal-600 shadow-3',
+    'h-10 py-1 w-auto',
+    'rounded-lg',
+    'text-sm',
+    'flex items-center gap-2',
+], {
+    variants: {
+        enableAmountSelected: {
+            false: 'px-1',
+            true: 'pl-3 pr-1',
         },
-        "attribute": "used-in-table",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
+    },
+});
+const amountSelected = cva([
+    'text-dark-teal-100',
+    'min-w-0',
+    'overflow-hidden text-ellipsis text-nowrap',
+]);
+export class FloatingMenuContainer {
+    constructor() {
+        this.usedInTable = false;
+        this.enableAmountSelected = true;
+        this.amount = 0;
+        this.enableClose = true;
+        this.amountSelectedTemplate = (amount) => formatTranslation((amount === 1
+            ? this._locales.amount_selected
+            : this._locales.amount_selected_plural)?.replace('{{amount}}', amount));
+        this._locales = {};
+    }
+    /**
+     * Event whenever the close button is clicked
+     */
+    close;
+    /**
+     * The host element
+     */
+    _el;
+    componentWillLoad() {
+        this._setLocales();
+    }
+    render() {
+        return (h(Host, { key: 'e653fe503f27c3a0d7e0a90070c630b80ee5a7cc' }, h("div", { key: '287a711e046eece0bea4525a2e601ca9a1368e95', class: container({
+                enableAmountSelected: this.enableAmountSelected,
+            }) }, this.enableAmountSelected && (h(Fragment, { key: 'c5c11a8269651ea92a911feb26a8be52988f57a2' }, h("p", { key: 'edc2f9fbb9adef44731a1d8c8b81762f0248ee7b', class: amountSelected() }, this.amountSelectedTemplate(this.amount)), h("p-divider", { key: 'c89c60984a56f48ab2c6f3c1cd3a4e909288cdda', class: 'mx-0 h-4 text-black-teal-400', variant: 'vertical' }))), this.usedInTable ? h("slot", { name: 'floating-menu-item' }) : h("slot", null), this.enableClose && (h("div", { key: 'f231e9ddc59510cf67c0651b0ec6b5ae33b38e47', class: 'ml-auto cursor-pointer p-2 text-dark-teal-300 hover:text-dark-teal-100', onClick: ev => this.close.emit(ev) }, h("p-icon", { key: '4561b5337606c3897307cff554e347b3eb34f4b6', variant: 'negative' }))))));
+    }
+    async _setLocales() {
+        this._locales = await getLocaleComponentStrings(this._el);
+    }
+    static get is() { return "p-floating-menu-container"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["floating-menu-container.component.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["floating-menu-container.component.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "usedInTable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether the container is used in the table"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "used-in-table",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "enableAmountSelected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to show the amount selected"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "enable-amount-selected",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "amount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The amount selected"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "amount",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "enableClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to enablethe close button"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "enable-close",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "amountSelectedTemplate": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "amountSelectedTemplateFunc",
+                    "resolved": "(amount: number) => string",
+                    "references": {
+                        "amountSelectedTemplateFunc": {
+                            "location": "local",
+                            "path": "/home/runner/work/Paperless/Paperless/packages/core/src/components/atoms/floating-menu-container/floating-menu-container.component.tsx",
+                            "id": "src/components/atoms/floating-menu-container/floating-menu-container.component.tsx::amountSelectedTemplateFunc"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The template for amount selected"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "(\n\t\tamount: number\n\t) =>\n\t\tformatTranslation(\n\t\t\t(amount === 1\n\t\t\t\t? this._locales.amount_selected\n\t\t\t\t: this._locales.amount_selected_plural\n\t\t\t)?.replace('{{amount}}', amount)\n\t\t)"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_locales": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event whenever the close button is clicked"
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "_el"; }
+    static get listeners() {
+        return [{
+                "name": "localeChanged",
+                "method": "_setLocales",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=floating-menu-container.component.js.map

package/dist/collection/components/atoms/floating-menu-container/floating-menu-container.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"floating-menu-container.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/floating-menu-container/floating-menu-container.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,qBAAqB;;uBAIF,KAAK;;EAEpC,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAC,2BAA2B,IACrC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CACnB,YAAM,IAAI,EAAC,oBAAoB,GAAG,CAClC,CAAC,CAAC,CAAC,CACH,eAAQ,CACR,CACK,CACP,CAAC;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n\ttag: 'p-floating-menu-container',\n\tstyleUrl: 'floating-menu-container.component.scss',\n\tshadow: true,\n})\nexport class FloatingMenuContainer {\n\t/**\n\t * Weather the container is used in the table\n\t */\n\t@Prop() usedInTable: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-floating-menu-container\">\n\t\t\t\t{this.usedInTable ? (\n\t\t\t\t\t<slot name=\"floating-menu-item\" />\n\t\t\t\t) : (\n\t\t\t\t\t<slot />\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"floating-menu-container.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/floating-menu-container/floating-menu-container.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,KAAK,EAEL,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,CAAC,EACD,OAAO,EACP,KAAK,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAE9E,MAAM,SAAS,GAAG,GAAG,CACpB;IACC,yCAAyC;IACzC,2BAA2B;IAC3B,kBAAkB;IAClB,YAAY;IACZ,SAAS;IACT,yBAAyB;CACzB,EACD;IACC,QAAQ,EAAE;QACT,oBAAoB,EAAE;YACrB,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,WAAW;SACjB;KACD;CACD,CACD,CAAC;AAEF,MAAM,cAAc,GAAG,GAAG,CAAC;IAC1B,oBAAoB;IACpB,SAAS;IACT,2CAA2C;CAC3C,CAAC,CAAC;AASH,MAAM,OAAO,qBAAqB;;2BAIF,KAAK;oCAKL,IAAI;sBAKlB,CAAC;2BAKI,IAAI;sCAKmC,CAC5D,MAAc,EACb,EAAE,CACH,iBAAiB,CAChB,CAAC,MAAM,KAAK,CAAC;YACZ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,eAAe;YAC/B,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,sBAAsB,CACtC,EAAE,OAAO,CAAC,YAAY,EAAE,MAAM,CAAC,CAChC;wBAe+B,EAAE;;IAbnC;;OAEG;IACM,KAAK,CAA2B;IAEzC;;OAEG;IACgB,GAAG,CAAc;IAOpC,iBAAiB;QAChB,IAAI,CAAC,WAAW,EAAE,CAAC;IACpB,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI;YACJ,4DACC,KAAK,EAAE,SAAS,CAAC;oBAChB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB;iBAC/C,CAAC;gBAED,IAAI,CAAC,oBAAoB,IAAI,CAC7B,EAAC,QAAQ;oBACR,0DAAG,KAAK,EAAE,cAAc,EAAE,IACxB,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,CACtC;oBAEJ,kEACC,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAC,UAAU,GACjB,CACQ,CACX;gBAEA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,oBAAoB,GAAG,CAAC,CAAC,CAAC,eAAQ;gBAEhE,IAAI,CAAC,WAAW,IAAI,CACpB,4DACC,KAAK,EAAC,wEAAwE,EAC9E,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;oBAElC,+DAAQ,OAAO,EAAC,UAAU,GAAG,CACxB,CACN,CACI,CACA,CACP,CAAC;IACH,CAAC;IAGO,KAAK,CAAC,WAAW;QACxB,IAAI,CAAC,QAAQ,GAAG,MAAM,yBAAyB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC3D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\tFragment,\n\tHost,\n\tListen,\n\tProp,\n\th,\n\tElement,\n\tState,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { formatTranslation, getLocaleComponentStrings } from '../../../utils';\n\nconst container = cva(\n\t[\n\t\t'floating-menu-container z-floating-menu',\n\t\t'bg-dark-teal-600 shadow-3',\n\t\t'h-10 py-1 w-auto',\n\t\t'rounded-lg',\n\t\t'text-sm',\n\t\t'flex items-center gap-2',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tenableAmountSelected: {\n\t\t\t\tfalse: 'px-1',\n\t\t\t\ttrue: 'pl-3 pr-1',\n\t\t\t},\n\t\t},\n\t}\n);\n\nconst amountSelected = cva([\n\t'text-dark-teal-100',\n\t'min-w-0',\n\t'overflow-hidden text-ellipsis text-nowrap',\n]);\n\nexport type amountSelectedTemplateFunc = (amount: number) => string;\n\n@Component({\n\ttag: 'p-floating-menu-container',\n\tstyleUrl: 'floating-menu-container.component.css',\n\tshadow: true,\n})\nexport class FloatingMenuContainer {\n\t/**\n\t * Wether the container is used in the table\n\t */\n\t@Prop() usedInTable: boolean = false;\n\n\t/**\n\t * Wether to show the amount selected\n\t */\n\t@Prop() enableAmountSelected = true;\n\n\t/**\n\t * The amount selected\n\t */\n\t@Prop() amount = 0;\n\n\t/**\n\t * Wether to enablethe close button\n\t */\n\t@Prop() enableClose = true;\n\n\t/**\n\t * The template for amount selected\n\t */\n\t@Prop() amountSelectedTemplate: amountSelectedTemplateFunc = (\n\t\tamount: number\n\t) =>\n\t\tformatTranslation(\n\t\t\t(amount === 1\n\t\t\t\t? this._locales.amount_selected\n\t\t\t\t: this._locales.amount_selected_plural\n\t\t\t)?.replace('{{amount}}', amount)\n\t\t);\n\n\t/**\n\t * Event whenever the close button is clicked\n\t */\n\t@Event() close: EventEmitter<MouseEvent>;\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\tcomponentWillLoad() {\n\t\tthis._setLocales();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tclass={container({\n\t\t\t\t\t\tenableAmountSelected: this.enableAmountSelected,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{this.enableAmountSelected && (\n\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t<p class={amountSelected()}>\n\t\t\t\t\t\t\t\t{this.amountSelectedTemplate(this.amount)}\n\t\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t\t<p-divider\n\t\t\t\t\t\t\t\tclass='mx-0 h-4 text-black-teal-400'\n\t\t\t\t\t\t\t\tvariant='vertical'\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{this.usedInTable ? <slot name='floating-menu-item' /> : <slot />}\n\n\t\t\t\t\t{this.enableClose && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass='ml-auto cursor-pointer p-2 text-dark-teal-300 hover:text-dark-teal-100'\n\t\t\t\t\t\t\tonClick={ev => this.close.emit(ev)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<p-icon variant='negative' />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\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"]}

package/dist/collection/components/atoms/floating-menu-item/floating-menu-item.component.css

@@ -1 +1 @@
-.flex{display:flex!important}.h-6{height:1.5rem!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.whitespace-nowrap{white-space:nowrap!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.opacity-40{opacity:.4!important}*{box-sizing:border-box}:host{--tw-text-opacity:1;align-items:center;color:rgb(152 154 183/var(--tw-text-opacity,1));display:flex;font-size:.875rem;gap:.5rem;height:1.5rem;line-height:1.25rem;white-space:nowrap}:host([hover]){cursor:pointer;font-weight:600}:host([disabled=true]),:host([disabled]){opacity:.4;pointer-events:none}:host([hover]:hover:not([disabled])){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.static{position:static!important}
+.flex{display:flex!important}.h-6{height:1.5rem!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.whitespace-nowrap{white-space:nowrap!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.opacity-40{opacity:.4!important}*{box-sizing:border-box}.static{position:static!important}.min-w-0{min-width:0!important}.cursor-not-allowed{cursor:not-allowed!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.text-nowrap{text-wrap:nowrap!important}.font-semibold{font-weight:600!important}.text-dark-teal-200{--tw-text-opacity:1!important;color:rgb(153 185 182/var(--tw-text-opacity,1))!important}.text-dark-teal-300{--tw-text-opacity:1!important;color:rgb(102 151 145/var(--tw-text-opacity,1))!important}.opacity-60{opacity:.6!important}.group:hover .group-hover\:text-dark-teal-100,.hover\:text-dark-teal-100:hover{--tw-text-opacity:1!important;color:rgb(204 220 218/var(--tw-text-opacity,1))!important}

package/dist/collection/components/atoms/floating-menu-item/floating-menu-item.component.js

@@ -1,63 +1,244 @@
 import { h, Host } from "@stencil/core";
-export class FloatingMenuItem {
-  constructor() {
-    this.hover = true;
-    this.disabled = false;
-  }
-  render() {
-    return (h(Host, { class: "p-floating-menu-item" }, h("slot", null)));
-  }
-  static get is() { return "p-floating-menu-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["floating-menu-item.component.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["floating-menu-item.component.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "hover": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+import { cva } from "class-variance-authority";
+const item = cva([
+    'p-floating-menu-item group',
+    'flex gap-2 items-center h-6',
+    'text-sm text-dark-teal-300',
+], {
+    variants: {
+        hover: {
+            false: null,
+            true: null,
+        },
+        disabled: {
+            false: null,
+            true: 'opacity-60 cursor-not-allowed',
         },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether it should have a hover effect"
+    },
+    compoundVariants: [
+        {
+            disabled: false,
+            hover: true,
+            class: 'cursor-pointer hover:text-dark-teal-100',
         },
-        "attribute": "hover",
-        "reflect": true,
-        "defaultValue": "true"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+    ],
+});
+const icon = cva(['text-dark-teal-200'], {
+    variants: {
+        hover: {
+            false: null,
+            true: null,
         },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether the item is disabled"
+        disabled: {
+            false: null,
+            true: null,
         },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      }
-    };
-  }
+    },
+    compoundVariants: [
+        {
+            disabled: false,
+            hover: true,
+            class: 'group-hover:text-dark-teal-100',
+        },
+    ],
+});
+export class FloatingMenuItem {
+    constructor() {
+        this.hover = true;
+        this.disabled = false;
+        this.loading = false;
+        this.icon = undefined;
+        this.iconPosition = 'end';
+        this.iconFlip = undefined;
+        this.iconRotate = undefined;
+    }
+    render() {
+        return (h(Host, { key: '89082d400cd797029c4265e5e35865375c341acf', class: item({
+                hover: this.hover && !this.loading,
+                disabled: this.disabled,
+            }) }, this._getIcon(), h("p", { key: '9bd3e924cd1abb96281c8d5adc6b958c526b5884', class: 'min-w-0 overflow-hidden text-ellipsis text-nowrap font-semibold' }, h("slot", { key: '61212ad54e7446aff3656f7309f1ac37014dab46' }))));
+    }
+    _getIcon() {
+        if (!this.icon && !this.loading) {
+            return;
+        }
+        if (this.loading) {
+            return h("p-loader", { color: 'white' });
+        }
+        return (h("p-icon", { class: icon({
+                hover: this.hover,
+                disabled: this.disabled,
+            }), variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate }));
+    }
+    static get is() { return "p-floating-menu-item"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["floating-menu-item.component.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["floating-menu-item.component.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "hover": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether it should have a hover effect"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hover",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether the item is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether loading is applied"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "loading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconVariant",
+                    "resolved": "\"caret\" | \"double-caret\" | \"arrow\" | \"double-arrow\" | \"bell\" | \"chat\" | \"check-circle\" | \"cross-circle\" | \"error-circle\" | \"info-circle\" | \"phone\" | \"question-circle\" | \"headset\" | \"warning\" | \"attachment\" | \"description\" | \"document\" | \"folder\" | \"pdf\" | \"xls\" | \"bank\" | \"bread\" | \"cake\" | \"calculator\" | \"camera\" | \"car\" | \"certified\" | \"chair\" | \"checkmark\" | \"city\" | \"companies\" | \"company\" | \"credit-card\" | \"cutlery\" | \"department\" | \"diamond\" | \"docter\" | \"download\" | \"envelope\" | \"euro\" | \"exam\" | \"filter\" | \"flower\" | \"globe\" | \"globe-2\" | \"hash\" | \"hat\" | \"home\" | \"integration\" | \"language\" | \"laptop\" | \"location\" | \"mail\" | \"medal\" | \"menu\" | \"menu-arrow\" | \"minus\" | \"more\" | \"negative\" | \"other\" | \"pay\" | \"pencil\" | \"percent\" | \"pie-chart\" | \"placeholder\" | \"plus\" | \"power\" | \"receipt\" | \"reset\" | \"search\" | \"send\" | \"settings\" | \"shuffle\" | \"sick\" | \"signature\" | \"sparkle\" | \"star\" | \"stroller\" | \"tag\" | \"tasks\" | \"tools\" | \"tooth\" | \"train\" | \"trash\" | \"upload\" | \"wave\" | \"zipcode\" | \"eye\" | \"eye-closed\" | \"key\" | \"lock\" | \"unlocked\" | \"alarm\" | \"calendar\" | \"calendar-multi\" | \"calendar-free\" | \"calendar-not-free\" | \"clock\" | \"female\" | \"id\" | \"id-two\" | \"male\" | \"user\" | \"users\" | \"checkmarkThick\"",
+                    "references": {
+                        "IconVariant": {
+                            "location": "import",
+                            "path": "../icon/icon.component",
+                            "id": "src/components/atoms/icon/icon.component.tsx::IconVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon to show on the item"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon position"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon-position",
+                "reflect": false,
+                "defaultValue": "'end'"
+            },
+            "iconFlip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconFlipOptions",
+                    "resolved": "\"horizontal\" | \"none\" | \"vertical\"",
+                    "references": {
+                        "IconFlipOptions": {
+                            "location": "import",
+                            "path": "../icon/icon.component",
+                            "id": "src/components/atoms/icon/icon.component.tsx::IconFlipOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon flip"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon-flip",
+                "reflect": false
+            },
+            "iconRotate": {
+                "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",
+                            "id": "src/types/index.ts::RotateOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon rotate"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon-rotate",
+                "reflect": false
+            }
+        };
+    }
 }
 //# sourceMappingURL=floating-menu-item.component.js.map

package/dist/collection/components/atoms/floating-menu-item/floating-menu-item.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"floating-menu-item.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/floating-menu-item/floating-menu-item.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,gBAAgB;;iBAIc,IAAI;oBAKD,KAAK;;EAElD,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAC,sBAAsB;MACjC,eAAQ,CACF,CACP,CAAC;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-floating-menu-item',\n\tstyleUrl: 'floating-menu-item.component.scss',\n\tshadow: true,\n})\nexport class FloatingMenuItem {\n\t/**\n\t * Wether it should have a hover effect\n\t */\n\t@Prop({ reflect: true }) hover: boolean = true;\n\n\t/**\n\t * Wether the item is disabled\n\t */\n\t@Prop({ reflect: true }) disabled: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-floating-menu-item\">\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"floating-menu-item.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/floating-menu-item/floating-menu-item.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,IAAI,GAAG,GAAG,CACf;IACC,4BAA4B;IAC5B,6BAA6B;IAC7B,4BAA4B;CAC5B,EACD;IACC,QAAQ,EAAE;QACT,KAAK,EAAE;YACN,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,IAAI;SACV;QACD,QAAQ,EAAE;YACT,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,+BAA+B;SACrC;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE,IAAI;YACX,KAAK,EAAE,yCAAyC;SAChD;KACD;CACD,CACD,CAAC;AAEF,MAAM,IAAI,GAAG,GAAG,CAAC,CAAC,oBAAoB,CAAC,EAAE;IACxC,QAAQ,EAAE;QACT,KAAK,EAAE;YACN,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,IAAI;SACV;QACD,QAAQ,EAAE;YACT,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,IAAI;SACV;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE,IAAI;YACX,KAAK,EAAE,gCAAgC;SACvC;KACD;CACD,CAAC,CAAC;AAMH,MAAM,OAAO,gBAAgB;;qBAIc,IAAI;wBAKD,KAAK;uBAKvB,KAAK;;4BAUQ,KAAK;;;;IAY7C,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDACJ,KAAK,EAAE,IAAI,CAAC;gBACX,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO;gBAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACvB,CAAC;YAED,IAAI,CAAC,QAAQ,EAAE;YAEhB,0DAAG,KAAK,EAAC,iEAAiE;gBACzE,8DAAQ,CACL,CACE,CACP,CAAC;IACH,CAAC;IAEO,QAAQ;QACf,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YACjC,OAAO;QACR,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO,gBAAU,KAAK,EAAC,OAAO,GAAG,CAAC;QACnC,CAAC;QAED,OAAO,CACN,cACC,KAAK,EAAE,IAAI,CAAC;gBACX,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACvB,CAAC,EACF,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,GACtB,CACF,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport { IconFlipOptions, IconVariant } from '../icon/icon.component';\nimport { RotateOptions } from '../../../types';\nimport { cva } from 'class-variance-authority';\n\nconst item = cva(\n\t[\n\t\t'p-floating-menu-item group',\n\t\t'flex gap-2 items-center h-6',\n\t\t'text-sm text-dark-teal-300',\n\t],\n\t{\n\t\tvariants: {\n\t\t\thover: {\n\t\t\t\tfalse: null,\n\t\t\t\ttrue: null,\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\tfalse: null,\n\t\t\t\ttrue: 'opacity-60 cursor-not-allowed',\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tdisabled: false,\n\t\t\t\thover: true,\n\t\t\t\tclass: 'cursor-pointer hover:text-dark-teal-100',\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst icon = cva(['text-dark-teal-200'], {\n\tvariants: {\n\t\thover: {\n\t\t\tfalse: null,\n\t\t\ttrue: null,\n\t\t},\n\t\tdisabled: {\n\t\t\tfalse: null,\n\t\t\ttrue: null,\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tdisabled: false,\n\t\t\thover: true,\n\t\t\tclass: 'group-hover:text-dark-teal-100',\n\t\t},\n\t],\n});\n\n@Component({\n\ttag: 'p-floating-menu-item',\n\tstyleUrl: 'floating-menu-item.component.css',\n})\nexport class FloatingMenuItem {\n\t/**\n\t * Wether it should have a hover effect\n\t */\n\t@Prop({ reflect: true }) hover: boolean = true;\n\n\t/**\n\t * Wether the item is disabled\n\t */\n\t@Prop({ reflect: true }) disabled: boolean = false;\n\n\t/**\n\t * Wether loading is applied\n\t */\n\t@Prop() loading: boolean = false;\n\n\t/**\n\t * Icon to show on the item\n\t */\n\t@Prop() icon: IconVariant;\n\n\t/**\n\t * Icon position\n\t */\n\t@Prop() iconPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * Icon flip\n\t */\n\t@Prop() iconFlip: IconFlipOptions;\n\n\t/**\n\t * Icon rotate\n\t */\n\t@Prop() iconRotate: RotateOptions;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={item({\n\t\t\t\t\thover: this.hover && !this.loading,\n\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{this._getIcon()}\n\n\t\t\t\t<p class='min-w-0 overflow-hidden text-ellipsis text-nowrap font-semibold'>\n\t\t\t\t\t<slot />\n\t\t\t\t</p>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _getIcon() {\n\t\tif (!this.icon && !this.loading) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.loading) {\n\t\t\treturn <p-loader color='white' />;\n\t\t}\n\n\t\treturn (\n\t\t\t<p-icon\n\t\t\t\tclass={icon({\n\t\t\t\t\thover: this.hover,\n\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t})}\n\t\t\t\tvariant={this.icon}\n\t\t\t\tflip={this.iconFlip}\n\t\t\t\trotate={this.iconRotate}\n\t\t\t/>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/atoms/helper/helper.component.css

@@ -1 +1 @@
-.inline-block{display:inline-block!important}.w-3{width:.75rem!important}.cursor-pointer{cursor:pointer!important}.bg-center{background-position:50%!important}.bg-no-repeat{background-repeat:no-repeat!important}*{box-sizing:border-box}:host .helper{background-image:url(/assets/images/helper/helper.svg);background-position:50%;background-repeat:no-repeat;cursor:pointer;display:inline-block;height:.75rem;width:.75rem}:host .helper:hover{background-image:url(/assets/images/helper/helper-hover.svg)}.static{position:static!important}.absolute{position:absolute!important}
+*{box-sizing:border-box}.static{position:static!important}.absolute{position:absolute!important}.cursor-pointer{cursor:pointer!important}.text-black-teal-300{--tw-text-opacity:1!important;color:rgb(104 127 124/var(--tw-text-opacity,1))!important}.hover\:text-black-teal:hover{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}