@paperless/core 0.1.0-alpha.99 → 1.3.0

package/dist/collection/components/atoms/info-panel/info-panel.component.js

@@ -1,106 +1,103 @@
-import { Component, Element, h, Host, Prop } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 export class InfoPanel {
   constructor() {
-    /**
-     * The variant of the info panel
-     */
     this.variant = 'info';
-    /**
-     * Wether the panel can be closed
-     */
+    this.header = undefined;
+    this.content = undefined;
     this.closeable = false;
   }
   render() {
-    return (h(Host, { class: `p-info-panel variant-${this.variant} ${this.closeable && 'has-close'}` },
-      h("div", { class: "header" },
-        h("slot", { name: "header" })),
-      h("div", { class: "content" },
-        h("slot", { name: "content" })),
-      this.closeable && (h("div", { class: "close", onClick: () => this._close() },
-        h("p-icon", { variant: "negative" })))));
+    return (h(Host, { class: `p-info-panel variant-${this.variant} ${this.closeable && 'has-close'}` }, h("div", { class: "header" }, h("slot", { name: "header" })), h("div", { class: "content" }, h("slot", { name: "content" })), this.closeable && (h("div", { class: "close", onClick: () => this._close() }, h("p-icon", { variant: "negative" })))));
   }
   _close() {
     this._el.remove();
   }
   static get is() { return "p-info-panel"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["info-panel.component.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["info-panel.component.css"]
-  }; }
-  static get properties() { return {
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'info' | 'negative' | 'positive' | 'unbiased'",
-        "resolved": "\"info\" | \"negative\" | \"positive\" | \"unbiased\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The variant of the info panel"
-      },
-      "attribute": "variant",
-      "reflect": false,
-      "defaultValue": "'info'"
-    },
-    "header": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The header of the info panel"
-      },
-      "attribute": "header",
-      "reflect": false
-    },
-    "content": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The content of the info panel"
+  static get originalStyleUrls() {
+    return {
+      "$": ["info-panel.component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["info-panel.component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'info' | 'negative' | 'positive' | 'unbiased'",
+          "resolved": "\"info\" | \"negative\" | \"positive\" | \"unbiased\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The variant of the info panel"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'info'"
       },
-      "attribute": "content",
-      "reflect": false
-    },
-    "closeable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The header of the info panel"
+        },
+        "attribute": "header",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Wether the panel can be closed"
+      "content": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The content of the info panel"
+        },
+        "attribute": "content",
+        "reflect": false
       },
-      "attribute": "closeable",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
+      "closeable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether the panel can be closed"
+        },
+        "attribute": "closeable",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
   static get elementRef() { return "_el"; }
 }
+//# sourceMappingURL=info-panel.component.js.map

package/dist/collection/components/atoms/info-panel/info-panel.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"info-panel.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/info-panel/info-panel.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,SAAS;;mBAI6C,MAAM;;;qBAe1C,KAAK;;EAOlC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,wBAAwB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,WAAW,EAAE;MAClF,WAAK,KAAK,EAAC,QAAQ;QACjB,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB;MACN,WAAK,KAAK,EAAC,SAAS;QAClB,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB;MAEL,IAAI,CAAC,SAAS,IAAI,CACjB,WAAK,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;QAC7C,cAAQ,OAAO,EAAC,UAAU,GAAG,CACzB,CACP,CACI,CACR,CAAC;EACJ,CAAC;EAEO,MAAM;IACZ,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC;EACpB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'p-info-panel',\n  styleUrl: 'info-panel.component.scss',\n  shadow: true,\n})\nexport class InfoPanel {\n  /**\n   * The variant of the info panel\n   */\n  @Prop() variant: 'info' | 'negative' | 'positive' | 'unbiased' = 'info';\n\n  /**\n   * The header of the info panel\n   */\n  @Prop() header: string;\n\n  /**\n   * The content of the info panel\n   */\n  @Prop() content: string;\n\n  /**\n   * Wether the panel can be closed\n   */\n  @Prop() closeable: boolean = false;\n\n  /**\n   * The host element\n   */\n  @Element() private _el: HTMLElement;\n\n  render() {\n    return (\n      <Host class={`p-info-panel variant-${this.variant} ${this.closeable && 'has-close'}`}>\n        <div class=\"header\">\n          <slot name=\"header\" />\n        </div>\n        <div class=\"content\">\n          <slot name=\"content\" />\n        </div>\n\n        {this.closeable && (\n          <div class=\"close\" onClick={() => this._close()}>\n            <p-icon variant=\"negative\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private _close() {\n    this._el.remove();\n  }\n}\n"]}

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

@@ -0,0 +1 @@
+.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.h-4{height:1rem!important}.h-\[0\.625rem\]{height:.625rem!important}.h-\[1\.625rem\]{height:1.625rem!important}.w-\[0\.625rem\]{width:.625rem!important}.w-\[1\.625rem\]{width:1.625rem!important}.min-w-\[1rem\]{min-width:1rem!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.rounded{border-radius:.25rem!important}.rounded-round{border-radius:100%!important}.px-0{padding-left:0!important;padding-right:0!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-\[1px\]{padding-bottom:1px!important;padding-top:1px!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}*{box-sizing:border-box}:host{align-items:center;border-radius:.25rem;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;height:1.625rem;justify-content:center;line-height:1.25rem;padding-left:.5rem;padding-right:.5rem}@media (min-width:64rem){:host{padding-left:.75rem;padding-right:.75rem}}:host .content{align-items:center;display:none}@media (min-width:64rem){:host .content{display:flex}}:host .circle{border-radius:100%;display:none;height:.625rem;width:.625rem}:host p-icon{display:none!important;font-size:.75rem!important;line-height:1rem!important}:host([variant=info]){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(245 254 255/var(--tw-bg-opacity));color:rgb(30 218 227/var(--tw-text-opacity))}:host([variant=info]) .circle{--tw-bg-opacity:1;background-color:rgb(30 218 227/var(--tw-bg-opacity))}:host([variant=positive]){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(229 255 242/var(--tw-bg-opacity));color:rgb(40 209 124/var(--tw-text-opacity))}:host([variant=positive]) .circle{--tw-bg-opacity:1;background-color:rgb(40 209 124/var(--tw-bg-opacity))}:host([variant=unbiased]){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 246 220/var(--tw-bg-opacity));color:rgb(255 199 45/var(--tw-text-opacity))}:host([variant=unbiased]) .circle{--tw-bg-opacity:1;background-color:rgb(255 199 45/var(--tw-bg-opacity))}:host([variant=negative]){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 204 211/var(--tw-bg-opacity));color:rgb(185 30 40/var(--tw-text-opacity))}:host([variant=negative]) .circle{--tw-bg-opacity:1;background-color:rgb(185 30 40/var(--tw-bg-opacity))}:host([size=small]){font-size:.75rem;height:1rem;justify-content:center;line-height:.75rem;min-width:1rem;padding:1px .25rem}:host([behavior=circle]) .circle{display:block}@media (min-width:64rem){:host([behavior=circle]) .circle{display:block}}:host([behavior=icon]) p-icon{display:flex!important}@media (min-width:64rem){:host([behavior=icon]) p-icon{display:flex!important}}:host([behavior=text]) p-icon{display:none!important}@media (min-width:64rem){:host([behavior=text]) p-icon{display:none!important}}:host([behavior=text]) .circle{display:none}@media (min-width:64rem){:host([behavior=text]) .circle{display:none}}:host([behavior=text]) .content{display:flex}@media (min-width:64rem){:host([behavior=text]) .content{display:flex}}:host([behavior=combination]){padding-left:0;padding-right:0;width:1.625rem}@media (min-width:64rem){:host([behavior=combination]){padding-left:.75rem;padding-right:.75rem;width:auto}}:host([behavior=combination]) .circle{display:none}@media (min-width:64rem){:host([behavior=combination]) .circle{display:block}}:host([behavior=combination]) p-icon{display:flex!important}@media (min-width:64rem){:host([behavior=combination]) p-icon{display:none!important}}:host([behavior=icon-only]){padding-left:0;padding-right:0;width:1.625rem}@media (min-width:64rem){:host([behavior=icon-only]){padding-left:0;padding-right:0}}:host([behavior=icon-only]) .content{display:none}@media (min-width:64rem){:host([behavior=icon-only]) .content{display:none}}:host([behavior=icon-only]) p-icon{display:flex!important}@media (min-width:64rem){:host([behavior=icon-only]) p-icon{display:flex!important}}:host([behavior=icon-only][size=small]){height:1rem;width:1rem}:host([keep-mobile-content=true]) .content,:host([keep-mobile-content]) .content{display:flex}@media (min-width:64rem){:host([keep-mobile-content=true]) .content,:host([keep-mobile-content]) .content{display:flex}.desktop-xs\:block{display:block!important}.desktop-xs\:flex{display:flex!important}.desktop-xs\:hidden{display:none!important}.desktop-xs\:px-3{padding-left:.75rem!important;padding-right:.75rem!important}}.static{position:static!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.table{display:table!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.max-w-\[20rem\]{max-width:20rem!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.self-center{align-self:center!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.text-center{text-align:center!important}.font-semibold{font-weight:600!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/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}.table-cell{display:table-cell!important}.w-1\/12{width:8.333333%!important}.w-10\/12{width:83.333333%!important}.w-11\/12{width:91.666667%!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-auto{width:auto!important}.w-full{width:100%!important}.flex-1{flex:1 1 0%!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.pr-4{padding-right:1rem!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}@media (min-width:40rem){.tablet\:w-1\/12{width:8.333333%!important}.tablet\:w-10\/12{width:83.333333%!important}.tablet\:w-11\/12{width:91.666667%!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}}@media (min-width:64rem){.desktop-xs\:w-1\/12{width:8.333333%!important}.desktop-xs\:w-10\/12{width:83.333333%!important}.desktop-xs\:w-11\/12{width:91.666667%!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}}@media (min-width:80rem){.desktop-sm\:w-1\/12{width:8.333333%!important}.desktop-sm\:w-10\/12{width:83.333333%!important}.desktop-sm\:w-11\/12{width:91.666667%!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}}@media (min-width:85.375rem){.desktop\:w-1\/12{width:8.333333%!important}.desktop\:w-10\/12{width:83.333333%!important}.desktop\:w-11\/12{width:91.666667%!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}}@media (min-width:90rem){.desktop-lg\:w-1\/12{width:8.333333%!important}.desktop-lg\:w-10\/12{width:83.333333%!important}.desktop-lg\:w-11\/12{width:91.666667%!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}}@media (min-width:120rem){.desktop-xl\:w-1\/12{width:8.333333%!important}.desktop-xl\:w-10\/12{width:83.333333%!important}.desktop-xl\:w-11\/12{width:91.666667%!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}}.h-8{height:2rem!important}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.w-3\/4{width:75%!important}.gap-4{gap:1rem!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}@media (min-width:64rem){.desktop-xs\:w-48{width:12rem!important}.desktop-xs\:w-auto{width:auto!important}.desktop-xs\:flex-row{flex-direction:row!important}}.m-0{margin:0!important}.table-row{display:table-row!important}.visible{visibility:visible!important}.absolute{position:absolute!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}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{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}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{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}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{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}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{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}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{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}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{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}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{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}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{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}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{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}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{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}.scale-y-flip{--tw-scale-y:-1!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}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-xxs{font-size:.6875rem!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}.hover\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.ml-2{margin-left:.5rem!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.inline{display:inline!important}

package/dist/collection/components/atoms/label/label.component.js

@@ -0,0 +1,171 @@
+import { h, Host } from '@stencil/core';
+export class Label {
+  constructor() {
+    this.variant = 'info';
+    this.behavior = 'circle';
+    this.icon = undefined;
+    this.iconFlip = undefined;
+    this.iconRotate = undefined;
+    this.size = 'default';
+    this.keepMobileContent = false;
+  }
+  render() {
+    return (h(Host, { class: "p-label" }, this.icon && (h("p-icon", { variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate })), (this.behavior === 'circle' ||
+      this.behavior === 'combination') && (h("div", { class: "circle" })), h("div", { class: "content" }, h("slot", null))));
+  }
+  static get is() { return "p-label"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["label.component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["label.component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "| 'positive'\n        | 'unbiased'\n        | 'negative'\n        | 'info'",
+          "resolved": "\"info\" | \"negative\" | \"positive\" | \"unbiased\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant of the label"
+        },
+        "attribute": "variant",
+        "reflect": true,
+        "defaultValue": "'info'"
+      },
+      "behavior": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "| 'icon'\n        | 'circle'\n        | 'combination'\n        | 'text'\n        | 'icon-only'",
+          "resolved": "\"circle\" | \"combination\" | \"icon\" | \"icon-only\" | \"text\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define the behavior of the label"
+        },
+        "attribute": "behavior",
+        "reflect": true,
+        "defaultValue": "'circle'"
+      },
+      "icon": {
+        "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\" | \"faBuilding\" | \"faBuildings\" | \"faPiggy\" | \"filter\" | \"folder\" | \"grid\" | \"headset\" | \"integration\" | \"list\" | \"location\" | \"megaphone\" | \"menu\" | \"minus\" | \"more\" | \"negative\" | \"notification\" | \"pagination\" | \"payment\" | \"pencil\" | \"person\" | \"plus\" | \"question\" | \"reload\" | \"receipt\" | \"report\" | \"search\" | \"settings\" | \"sick\" | \"signout\" | \"switch\" | \"tachometer\" | \"task\" | \"template\" | \"tool\" | \"trash\" | \"turn\" | \"upload\" | \"warning\"",
+          "references": {
+            "IconVariant": {
+              "location": "import",
+              "path": "../icon/icon.component"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon to show on the label"
+        },
+        "attribute": "icon",
+        "reflect": true
+      },
+      "iconFlip": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IconFlipOptions",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {
+            "IconFlipOptions": {
+              "location": "import",
+              "path": "../icon/icon.component"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon flip"
+        },
+        "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"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon rotate"
+        },
+        "attribute": "icon-rotate",
+        "reflect": false
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'default'",
+          "resolved": "\"default\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The size of the label"
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'default'"
+      },
+      "keepMobileContent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to keep the content on mobile"
+        },
+        "attribute": "keep-mobile-content",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+}
+//# sourceMappingURL=label.component.js.map

package/dist/collection/components/atoms/label/label.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/label/label.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASzD,MAAM,OAAO,KAAK;;mBAQC,MAAM;oBAUD,QAAQ;;;;gBAoByB,SAAS;6BAKR,KAAK;;EAE3D,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IAAC,KAAK,EAAC,SAAS;MAChB,IAAI,CAAC,IAAI,IAAI,CACV,cACI,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,GACzB,CACL;MACA,CAAC,IAAI,CAAC,QAAQ,KAAK,QAAQ;QACxB,IAAI,CAAC,QAAQ,KAAK,aAAa,CAAC,IAAI,CACpC,WAAK,KAAK,EAAC,QAAQ,GAAO,CAC7B;MACD,WAAK,KAAK,EAAC,SAAS;QAChB,eAAQ,CACN,CACH,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport { RotateOptions } from '../../../types';\nimport { IconFlipOptions, IconVariant } from '../icon/icon.component';\n\n@Component({\n    tag: 'p-label',\n    styleUrl: 'label.component.scss',\n    shadow: true,\n})\nexport class Label {\n    /**\n     * Variant of the label\n     */\n    @Prop({ reflect: true }) variant:\n        | 'positive'\n        | 'unbiased'\n        | 'negative'\n        | 'info' = 'info';\n\n    /**\n     * Define the behavior of the label\n     */\n    @Prop({ reflect: true }) behavior:\n        | 'icon'\n        | 'circle'\n        | 'combination'\n        | 'text'\n        | 'icon-only' = 'circle';\n\n    /**\n     * Icon to show on the label\n     */\n    @Prop({ reflect: true }) icon: IconVariant;\n\n    /**\n     * Icon flip\n     */\n    @Prop() iconFlip: IconFlipOptions;\n\n    /**\n     * Icon rotate\n     */\n    @Prop() iconRotate: RotateOptions;\n\n    /**\n     * The size of the label\n     */\n    @Prop({ reflect: true }) size: 'small' | 'default' = 'default';\n\n    /**\n     * Wether to keep the content on mobile\n     */\n    @Prop({ reflect: true }) keepMobileContent: boolean = false;\n\n    render() {\n        return (\n            <Host class=\"p-label\">\n                {this.icon && (\n                    <p-icon\n                        variant={this.icon}\n                        flip={this.iconFlip}\n                        rotate={this.iconRotate}\n                    />\n                )}\n                {(this.behavior === 'circle' ||\n                    this.behavior === 'combination') && (\n                    <div class=\"circle\"></div>\n                )}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n}\n"]}

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

@@ -1,73 +1 @@
-:host {
-  @apply grid h-screen w-screen content-start overflow-hidden;
-  grid-template-columns: 1fr;
-  grid-template-rows: repeat(1fr, 3);
-  gap: 0;
-  grid-template-areas: "topbar" "sidebar" "content";
-}
-@screen desktop-xs {
-  :host {
-    grid-template-columns: auto 1fr;
-    grid-template-rows: auto 1fr;
-    grid-template-areas: "topbar topbar" "sidebar content";
-  }
-}
-:host .topbar,
-:host .sidebar,
-:host .content {
-  @apply self-start;
-}
-:host .topbar {
-  grid-area: topbar;
-  @apply sticky w-full;
-  @apply order-2 desktop-sm:order-1;
-}
-:host .sidebar {
-  grid-area: sidebar;
-  @apply flex h-full box-border;
-  @apply w-sidebar-mobile desktop-sm:w-sidebar-desktop;
-  @apply order-1 desktop-sm:order-2;
-}
-:host .content {
-  grid-area: content;
-  @apply relative flex flex-col h-full overflow-y-auto overflow-x-hidden;
-  @apply order-3;
-  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
-}
-:host .content .inner-content {
-  @apply relative pb-24;
-  @apply px-content-mobile-x py-content-mobile-y;
-  @apply desktop-sm:px-content-desktop-x desktop-sm:py-content-desktop-y;
-  @apply desktop-xs:w-content-desktop-xs desktop-sm:w-content-desktop-sm desktop:w-content-desktop desktop-lg:w-content-desktop-lg desktop-xl:w-content-desktop-xl;
-}
-
-:host(.variant-default) .content {
-  @apply flex-1;
-}
-
-:host(.variant-login) {
-  grid-template-areas: "topbar topbar" "content content";
-}
-@screen desktop-xs {
-  :host(.variant-login) {
-    grid-template-areas: "topbar topbar" "content sidebar";
-  }
-}
-:host(.variant-login) .sidebar {
-  @apply hidden desktop-xs:flex w-unset;
-  @apply order-3 p-2;
-  @apply flex-1 overflow-hidden;
-}
-:host(.variant-login) .sidebar .inner-content {
-  @apply p-2;
-}
-:host(.variant-login) .content {
-  @apply order-3 desktop-xs:order-2;
-  @apply items-center desktop-xs:justify-center;
-}
-:host(.variant-login) .content .inner-content {
-  @apply box-border;
-  @apply desktop-xs:py-0 desktop-xs:px-18;
-  @apply w-full tablet:w-content-desktop-login;
-  @apply pt-14 desktop-xs:pt-content-mobile-y;
-} .static{position:static!important}*{box-sizing:border-box}
+.relative{position:relative!important}.sticky{position:sticky!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.box-border{box-sizing:border-box!important}.flex{display:flex!important}.grid{display:grid!important}.hidden{display:none!important}.h-full{height:100%!important}.h-screen{height:100vh!important}.w-full{width:100%!important}.w-screen{width:100vw!important}.w-sidebar-mobile{width:100%!important}.w-unset{width:unset!important}.flex-1{flex:1 1 0%!important}.flex-col{flex-direction:column!important}.content-start{align-content:flex-start!important}.items-center{align-items:center!important}.overflow-y-auto{overflow-y:auto!important}.px-content-mobile-x{padding-left:1rem!important;padding-right:1rem!important}*{box-sizing:border-box}:host{align-content:flex-start;display:grid;gap:0;grid-template-areas:"sidebar" "topbar" "content";grid-template-columns:1fr;grid-template-rows:repeat(1fr,3);height:100vh;overflow:hidden;width:100vw}@media (min-width:64rem){:host{grid-template-areas:"topbar topbar" "sidebar content";grid-template-columns:auto 1fr;grid-template-rows:auto 1fr}}:host .content,:host .sidebar,:host .topbar{align-self:flex-start}:host .topbar{grid-area:topbar;order:2;position:sticky;width:100%}@media (min-width:80rem){:host .topbar{order:1}}:host .sidebar{box-sizing:border-box;display:flex;grid-area:sidebar;height:100%;order:1;width:100%}@media (min-width:80rem){:host .sidebar{order:2;width:15rem}}:host .content{display:flex;flex-direction:column;grid-area:content;height:100%;order:3;overflow-x:hidden;overflow-y:auto;padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);position:relative}:host .content .inner-content{padding:1.5rem 1rem;position:relative}@media (min-width:64rem){:host .content .inner-content{padding:2rem;width:100%}}@media (min-width:80rem){:host .content .inner-content{width:100%}}@media (min-width:85.375rem){:host .content .inner-content{width:69rem}}@media (min-width:90rem){:host .content .inner-content{width:69rem}}@media (min-width:120rem){:host .content .inner-content{width:69rem}}:host(.variant-default) .content{flex:1 1 0%}:host(.variant-login){grid-template-areas:"topbar topbar" "content content"}@media (min-width:64rem){:host(.variant-login){grid-template-areas:"topbar topbar" "content sidebar"}}:host(.variant-login) .sidebar{display:none;flex:1 1 0%;order:3;overflow:hidden;padding:.5rem;width:unset}@media (min-width:64rem){:host(.variant-login) .sidebar{display:flex}}:host(.variant-login) .sidebar .inner-content{padding:.5rem}:host(.variant-login) .content{align-items:center;order:3}@media (min-width:64rem){:host(.variant-login) .content{justify-content:center;order:2}}:host(.variant-login) .content .inner-content{box-sizing:border-box;padding:calc(env(safe-area-inset-top) + 3.5rem) 1rem 1.5rem;width:100%}@media (min-width:64rem){:host(.variant-login) .content .inner-content{padding:1.5rem 4.5rem 0}}@media (min-width:40rem){:host(.variant-login) .content .inner-content{width:30rem}}@media (min-width:80rem){:host(.variant-office) .sidebar{width:19.5rem}:host(.variant-office-minimal) .sidebar{width:4.5rem}}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}.desktop-xs\:w-content-desktop-xs{width:100%!important}.desktop-xs\:px-18{padding-left:4.5rem!important;padding-right:4.5rem!important}.desktop-xs\:px-content-desktop-x{padding-left:2rem!important;padding-right:2rem!important}}@media (min-width:80rem){.desktop-sm\:w-content-desktop-sm{width:100%!important}}@media (min-width:85.375rem){.desktop\:w-content-desktop{width:69rem!important}}@media (min-width:90rem){.desktop-lg\:w-content-desktop-lg{width:69rem!important}}.static{position:static!important}

package/dist/collection/components/atoms/layout/layout.component.js

@@ -1,47 +1,44 @@
-import { Component, h, Host, Prop } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 export class Layout {
   constructor() {
-    /**
-     * Variant of the layout
-     */
     this.variant = 'default';
   }
   render() {
-    return (h(Host, { class: `p-layout variant-${this.variant}` },
-      h("div", { class: "topbar" },
-        h("slot", { name: "topbar" })),
-      h("div", { class: "sidebar" },
-        h("slot", { name: "sidebar" })),
-      h("div", { class: "content" },
-        h("div", { class: "inner-content" },
-          h("slot", { name: "content" })))));
+    return (h(Host, { class: `p-layout variant-${this.variant}` }, h("div", { class: "topbar" }, h("slot", { name: "topbar" })), h("div", { class: "sidebar" }, h("slot", { name: "sidebar" })), h("div", { class: "content" }, h("div", { class: "inner-content" }, h("slot", { name: "content" })))));
   }
   static get is() { return "p-layout"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["layout.component.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["layout.component.css"]
-  }; }
-  static get properties() { return {
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'default' | 'login'",
-        "resolved": "\"default\" | \"login\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Variant of the layout"
-      },
-      "attribute": "variant",
-      "reflect": false,
-      "defaultValue": "'default'"
-    }
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["layout.component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["layout.component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'login' | 'office' | 'office-minimal'",
+          "resolved": "\"default\" | \"login\" | \"office\" | \"office-minimal\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant of the layout"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'default'"
+      }
+    };
+  }
 }
+//# sourceMappingURL=layout.component.js.map

package/dist/collection/components/atoms/layout/layout.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/layout/layout.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,MAAM;;mBAIsD,SAAS;;EAE9E,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IAAC,KAAK,EAAE,oBAAoB,IAAI,CAAC,OAAO,EAAE;MAC3C,WAAK,KAAK,EAAC,QAAQ;QACf,YAAM,IAAI,EAAC,QAAQ,GAAG,CACpB;MACN,WAAK,KAAK,EAAC,SAAS;QAChB,YAAM,IAAI,EAAC,SAAS,GAAG,CACrB;MACN,WAAK,KAAK,EAAC,SAAS;QAChB,WAAK,KAAK,EAAC,eAAe;UACtB,YAAM,IAAI,EAAC,SAAS,GAAG,CACrB,CACJ,CACH,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-layout',\n    styleUrl: 'layout.component.scss',\n    shadow: true,\n})\nexport class Layout {\n    /**\n     * Variant of the layout\n     */\n    @Prop() variant: 'default' | 'login' | 'office' | 'office-minimal' = 'default';\n\n    render() {\n        return (\n            <Host class={`p-layout variant-${this.variant}`}>\n                <div class=\"topbar\">\n                    <slot name=\"topbar\" />\n                </div>\n                <div class=\"sidebar\">\n                    <slot name=\"sidebar\" />\n                </div>\n                <div class=\"content\">\n                    <div class=\"inner-content\">\n                        <slot name=\"content\" />\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"]}