@paperless/core 2.0.1-beta.0 → 2.0.1-beta.10

package/dist/components/p-iban-icon.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PIbanIcon extends Components.PIbanIcon, HTMLElement {}
+export const PIbanIcon: {
+  prototype: PIbanIcon;
+  new (): PIbanIcon;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/p-iban-icon.js

@@ -0,0 +1,64 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { I as IBAN_ICON_VARIANTS_ARRAY } from './iban.js';
+
+const IbanIcon = /*@__PURE__*/ proxyCustomElement(class IbanIcon extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.iban = undefined;
+    this.variant = undefined;
+  }
+  render() {
+    var _a;
+    let variant = this.variant;
+    if ((_a = this.iban) === null || _a === void 0 ? void 0 : _a.length) {
+      variant = this.iban.slice(4, 8).toLowerCase();
+    }
+    const exists = IBAN_ICON_VARIANTS_ARRAY.includes(variant);
+    return (exists && (h(Host, { class: 'p-iban-icon' }, this._getIcon(variant))));
+  }
+  _getIcon(variant) {
+    switch (variant) {
+      case 'abna':
+        return h("img", { src: './assets/iban-icons/icon-abn.svg' });
+      case 'rabo':
+        return h("img", { src: './assets/iban-icons/icon-rabo.svg' });
+      case 'ingb':
+        return h("img", { src: './assets/iban-icons/icon-ing.svg' });
+      case 'bunq':
+        return h("img", { src: './assets/iban-icons/icon-bunq.svg' });
+      case 'asnb':
+        return h("img", { src: './assets/iban-icons/icon-asn.svg' });
+      case 'trio':
+        return h("img", { src: './assets/iban-icons/icon-triodos.svg' });
+      case 'knab':
+        return h("img", { src: './assets/iban-icons/icon-knab.svg' });
+      case 'snsb':
+        return h("img", { src: './assets/iban-icons/icon-sns.svg' });
+    }
+  }
+}, [1, "p-iban-icon", {
+    "iban": [513],
+    "variant": [513]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-iban-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-iban-icon":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, IbanIcon);
+      }
+      break;
+  } });
+}
+
+const PIbanIcon = IbanIcon;
+const defineCustomElement = defineCustomElement$1;
+
+export { PIbanIcon, defineCustomElement };
+
+//# sourceMappingURL=p-iban-icon.js.map

package/dist/components/p-iban-icon.js.map

@@ -0,0 +1 @@
+{"file":"p-iban-icon.js","mappings":";;;MAOa,QAAQ;;;;;;;;EAWpB,MAAM;;IACL,IAAI,OAAO,GAAW,IAAI,CAAC,OAAO,CAAC;IAEnC,IAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,EAAE;MACtB,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;KAC9C;IAED,MAAM,MAAM,GAAG,wBAAwB,CAAC,QAAQ,CAC/C,OAA0B,CAC1B,CAAC;IAEF,QACC,MAAM,KACL,EAAC,IAAI,IAAC,KAAK,EAAC,aAAa,IACvB,IAAI,CAAC,QAAQ,CAAC,OAA0B,CAAC,CACpC,CACP,EACA;GACF;EAEO,QAAQ,CAAC,OAAwB;IACxC,QAAQ,OAAO;MACd,KAAK,MAAM;QACV,OAAO,WAAK,GAAG,EAAC,kCAAkC,GAAG,CAAC;MACvD,KAAK,MAAM;QACV,OAAO,WAAK,GAAG,EAAC,mCAAmC,GAAG,CAAC;MACxD,KAAK,MAAM;QACV,OAAO,WAAK,GAAG,EAAC,kCAAkC,GAAG,CAAC;MACvD,KAAK,MAAM;QACV,OAAO,WAAK,GAAG,EAAC,mCAAmC,GAAG,CAAC;MACxD,KAAK,MAAM;QACV,OAAO,WAAK,GAAG,EAAC,kCAAkC,GAAG,CAAC;MACvD,KAAK,MAAM;QACV,OAAO,WAAK,GAAG,EAAC,sCAAsC,GAAG,CAAC;MAC3D,KAAK,MAAM;QACV,OAAO,WAAK,GAAG,EAAC,mCAAmC,GAAG,CAAC;MACxD,KAAK,MAAM;QACV,OAAO,WAAK,GAAG,EAAC,kCAAkC,GAAG,CAAC;KACvD;GACD;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/iban-icon/iban-icon.component.tsx"],"sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport { IBAN_ICON_VARIANTS_ARRAY, IbanIconVariant } from '../../../types';\n\n@Component({\n\ttag: 'p-iban-icon',\n\tshadow: true,\n})\nexport class IbanIcon {\n\t/**\n\t * The iban you want to get an icon for\n\t */\n\t@Prop({ reflect: true }) iban: string;\n\n\t/**\n\t * The variant of the icon you want toshow\n\t */\n\t@Prop({ reflect: true }) variant: IbanIconVariant;\n\n\trender() {\n\t\tlet variant: string = this.variant;\n\n\t\tif (this.iban?.length) {\n\t\t\tvariant = this.iban.slice(4, 8).toLowerCase();\n\t\t}\n\n\t\tconst exists = IBAN_ICON_VARIANTS_ARRAY.includes(\n\t\t\tvariant as IbanIconVariant\n\t\t);\n\n\t\treturn (\n\t\t\texists && (\n\t\t\t\t<Host class='p-iban-icon'>\n\t\t\t\t\t{this._getIcon(variant as IbanIconVariant)}\n\t\t\t\t</Host>\n\t\t\t)\n\t\t);\n\t}\n\n\tprivate _getIcon(variant: IbanIconVariant) {\n\t\tswitch (variant) {\n\t\t\tcase 'abna':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-abn.svg' />;\n\t\t\tcase 'rabo':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-rabo.svg' />;\n\t\t\tcase 'ingb':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-ing.svg' />;\n\t\t\tcase 'bunq':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-bunq.svg' />;\n\t\t\tcase 'asnb':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-asn.svg' />;\n\t\t\tcase 'trio':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-triodos.svg' />;\n\t\t\tcase 'knab':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-knab.svg' />;\n\t\t\tcase 'snsb':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-sns.svg' />;\n\t\t}\n\t}\n}\n"],"version":3}

package/dist/components/p-icon-deprecated.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PIconDeprecated extends Components.PIconDeprecated, HTMLElement {}
+export const PIconDeprecated: {
+  prototype: PIconDeprecated;
+  new (): PIconDeprecated;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/p-icon-deprecated.js

@@ -0,0 +1,79 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { i as iconsDeprecated } from './icons-deprecated.js';
+
+const iconComponentCss = "*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!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:2rem!important;line-height:2.5rem!important}.text-4xl{font-size:2.5rem!important;line-height:3rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important}.text-xs,.text-xxs{line-height:1rem!important}.text-xxs{font-size:.5rem!important}";
+
+const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.variant = undefined;
+    this.size = 'auto';
+    this.rotate = 0;
+    this.flip = 'none';
+  }
+  render() {
+    const icon = iconsDeprecated[this.variant];
+    const styles = {
+      'p-icon flex': true,
+      'text-auto': this.size === 'auto',
+      'text-xxs': this.size === 'xxs',
+      'text-xs': this.size === 'xs',
+      'text-sm': this.size === 'sm',
+      'text-base': this.size === 'base',
+      'text-lg': this.size === 'lg',
+      'text-xl': this.size === 'xl',
+      'text-2xl': this.size === '2xl',
+      'text-3xl': this.size === '3xl',
+      'text-4xl': this.size === '4xl',
+      transform: !!this.rotate || this.flip !== 'none',
+      'scale-x-flip': this.flip === 'horizontal',
+      'scale-y-flip': this.flip === 'vertical',
+      'rotate-0': this.rotate === 0,
+      'rotate-25': this.rotate === 25,
+      'rotate-45': this.rotate === 45,
+      'rotate-90': this.rotate === 90,
+      'rotate-135': this.rotate === 135,
+      'rotate-180': this.rotate === 180,
+      'rotate-225': this.rotate === 225,
+      'rotate-270': this.rotate === 270,
+      'rotate-315': this.rotate === 315,
+      '-rotate-0': this.rotate === -0,
+      '-rotate-25': this.rotate === -25,
+      '-rotate-45': this.rotate === -45,
+      '-rotate-90': this.rotate === -90,
+      '-rotate-135': this.rotate === -135,
+      '-rotate-180': this.rotate === -180,
+      '-rotate-225': this.rotate === -225,
+      '-rotate-270': this.rotate === -270,
+      '-rotate-315': this.rotate === -315,
+    };
+    return (h(Host, { class: styles, innerHTML: icon }));
+  }
+  static get style() { return iconComponentCss; }
+}, [0, "p-icon-deprecated", {
+    "variant": [1],
+    "size": [1],
+    "rotate": [2],
+    "flip": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-icon-deprecated"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-icon-deprecated":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Icon);
+      }
+      break;
+  } });
+}
+
+const PIconDeprecated = Icon;
+const defineCustomElement = defineCustomElement$1;
+
+export { PIconDeprecated, defineCustomElement };
+
+//# sourceMappingURL=p-icon-deprecated.js.map

package/dist/components/p-icon-deprecated.js.map

@@ -0,0 +1 @@
+{"file":"p-icon-deprecated.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,g2HAAg2H;;MCY52H,IAAI;;;;;gBASgB,MAAM;kBAKN,CAAC;gBAKD,MAAM;;EAEtC,MAAM;IACL,MAAM,IAAI,GAAG,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAE3C,MAAM,MAAM,GAAG;MACd,aAAa,EAAE,IAAI;MACnB,WAAW,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;MACjC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;MAC/B,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;MAC7B,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;MAC7B,WAAW,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;MACjC,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;MAC7B,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;MAC7B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;MAC/B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;MAC/B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;MAC/B,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;MAChD,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,YAAY;MAC1C,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;MACxC,UAAU,EAAE,IAAI,CAAC,MAAM,KAAK,CAAC;MAC7B,WAAW,EAAE,IAAI,CAAC,MAAM,KAAK,EAAE;MAC/B,WAAW,EAAE,IAAI,CAAC,MAAM,KAAK,EAAE;MAC/B,WAAW,EAAE,IAAI,CAAC,MAAM,KAAK,EAAE;MAC/B,YAAY,EAAE,IAAI,CAAC,MAAM,KAAK,GAAG;MACjC,YAAY,EAAE,IAAI,CAAC,MAAM,KAAK,GAAG;MACjC,YAAY,EAAE,IAAI,CAAC,MAAM,KAAK,GAAG;MACjC,YAAY,EAAE,IAAI,CAAC,MAAM,KAAK,GAAG;MACjC,YAAY,EAAE,IAAI,CAAC,MAAM,KAAK,GAAG;MACjC,WAAW,EAAE,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC;MAC/B,YAAY,EAAE,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;MACjC,YAAY,EAAE,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;MACjC,YAAY,EAAE,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;MACjC,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,CAAC,GAAG;MACnC,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,CAAC,GAAG;MACnC,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,CAAC,GAAG;MACnC,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,CAAC,GAAG;MACnC,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,CAAC,GAAG;KACnC,CAAC;IAEF,QACC,EAAC,IAAI,IACJ,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,IAAI,GACR,EACP;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/icon-deprecated/icon.component.scss?tag=p-icon-deprecated","src/components/atoms/icon-deprecated/icon.component.tsx"],"sourcesContent":[":host {\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { RotateOptions, TextSizeOptions } from '../../../types/tailwind';\nimport { iconsDeprecated } from '../../../utils/icons-deprecated';\nimport { IconFlipOptions } from '../icon/icon.component';\n\nexport type IconDeprecatedVariant = keyof typeof iconsDeprecated;\n\n@Component({\n\ttag: 'p-icon-deprecated',\n\tstyleUrl: 'icon.component.scss',\n\t// shadow: true,\n})\nexport class Icon {\n\t/**\n\t * The icon the be displayed\n\t */\n\t@Prop() variant!: IconDeprecatedVariant;\n\n\t/**\n\t * The size of the icon, using tailwind sizes\n\t */\n\t@Prop() size: TextSizeOptions = 'auto';\n\n\t/**\n\t * Wether to rotate the icon x degrees\n\t */\n\t@Prop() rotate: RotateOptions = 0;\n\n\t/**\n\t * Wether to flip the icon horizontally or vertically\n\t */\n\t@Prop() flip: IconFlipOptions = 'none';\n\n\trender() {\n\t\tconst icon = iconsDeprecated[this.variant];\n\n\t\tconst styles = {\n\t\t\t'p-icon flex': true,\n\t\t\t'text-auto': this.size === 'auto',\n\t\t\t'text-xxs': this.size === 'xxs',\n\t\t\t'text-xs': this.size === 'xs',\n\t\t\t'text-sm': this.size === 'sm',\n\t\t\t'text-base': this.size === 'base',\n\t\t\t'text-lg': this.size === 'lg',\n\t\t\t'text-xl': this.size === 'xl',\n\t\t\t'text-2xl': this.size === '2xl',\n\t\t\t'text-3xl': this.size === '3xl',\n\t\t\t'text-4xl': this.size === '4xl',\n\t\t\ttransform: !!this.rotate || this.flip !== 'none',\n\t\t\t'scale-x-flip': this.flip === 'horizontal',\n\t\t\t'scale-y-flip': this.flip === 'vertical',\n\t\t\t'rotate-0': this.rotate === 0,\n\t\t\t'rotate-25': this.rotate === 25,\n\t\t\t'rotate-45': this.rotate === 45,\n\t\t\t'rotate-90': this.rotate === 90,\n\t\t\t'rotate-135': this.rotate === 135,\n\t\t\t'rotate-180': this.rotate === 180,\n\t\t\t'rotate-225': this.rotate === 225,\n\t\t\t'rotate-270': this.rotate === 270,\n\t\t\t'rotate-315': this.rotate === 315,\n\t\t\t'-rotate-0': this.rotate === -0,\n\t\t\t'-rotate-25': this.rotate === -25,\n\t\t\t'-rotate-45': this.rotate === -45,\n\t\t\t'-rotate-90': this.rotate === -90,\n\t\t\t'-rotate-135': this.rotate === -135,\n\t\t\t'-rotate-180': this.rotate === -180,\n\t\t\t'-rotate-225': this.rotate === -225,\n\t\t\t'-rotate-270': this.rotate === -270,\n\t\t\t'-rotate-315': this.rotate === -315,\n\t\t};\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={styles}\n\t\t\t\tinnerHTML={icon}\n\t\t\t></Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/p-info-panel.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './icon.component.js';
 
-const infoPanelComponentCss = ".absolute{position:absolute!important}.relative{position:relative!important}.right-2{right:.5rem!important}.top-2{top:.5rem!important}.flex{display:flex!important}.w-full{width:100%!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.whitespace-pre-line{white-space:pre-line!important}.rounded-large{border-radius:.375rem!important}.bg-indigo-light{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity))!important}.font-semibold{font-weight:600!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity));border-radius:.375rem;display:flex;flex-direction:column;padding:1rem;position:relative;width:100%}:host .header{--tw-text-opacity:1;color:rgb(39 40 56/var(--tw-text-opacity));font-weight:600}:host .content{font-size:.875rem;line-height:1.25rem;white-space:pre-line}:host .close{--tw-text-opacity:1;color:rgb(152 154 183/var(--tw-text-opacity));cursor:pointer;position:absolute;right:.5rem;top:.5rem}:host(.variant-positive){--tw-bg-opacity:1;background-color:rgb(229 255 242/var(--tw-bg-opacity))}:host(.variant-unbiased){--tw-bg-opacity:1;background-color:rgb(255 246 220/var(--tw-bg-opacity))}:host(.variant-negative){--tw-bg-opacity:1;background-color:rgb(255 204 211/var(--tw-bg-opacity))}:host(.has-close){padding-right:2rem}.static{position:static!important}";
+const infoPanelComponentCss = ".absolute{position:absolute!important}.relative{position:relative!important}.right-2{right:.5rem!important}.top-2{top:.5rem!important}.flex{display:flex!important}.w-full{width:100%!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.whitespace-pre-line{white-space:pre-line!important}.rounded-lg{border-radius:.5rem!important}.bg-indigo-light{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity,1))!important}.font-semibold{font-weight:600!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity,1));border-radius:.5rem;display:flex;flex-direction:column;padding:1rem;position:relative;width:100%}:host .header{--tw-text-opacity:1;color:rgb(39 40 56/var(--tw-text-opacity,1));font-weight:600}:host .content{font-size:.875rem;line-height:1.25rem;white-space:pre-line}:host .close{--tw-text-opacity:1;color:rgb(152 154 183/var(--tw-text-opacity,1));cursor:pointer;position:absolute;right:.5rem;top:.5rem}:host(.variant-positive){--tw-bg-opacity:1;background-color:rgb(229 255 242/var(--tw-bg-opacity,1))}:host(.variant-unbiased){--tw-bg-opacity:1;background-color:rgb(255 246 220/var(--tw-bg-opacity,1))}:host(.variant-negative){--tw-bg-opacity:1;background-color:rgb(255 204 211/var(--tw-bg-opacity,1))}:host(.has-close){padding-right:2rem}.static{position:static!important}";
 
 const InfoPanel = /*@__PURE__*/ proxyCustomElement(class InfoPanel extends HTMLElement {
   constructor() {

package/dist/components/p-info-panel.js.map

@@ -1 +1 @@
-{"file":"p-info-panel.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,m3CAAm3C;;MCep4C,SAAS;;;;;;mBAI4C,MAAM;;;qBAe1C,KAAK;;EAelC,MAAM;IACL,QACC,EAAC,IAAI,IACJ,KAAK,EAAE,wBAAwB,IAAI,CAAC,OAAO,IAC1C,IAAI,CAAC,SAAS,IAAI,WACnB,EAAE,IAEF,WAAK,KAAK,EAAC,QAAQ,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,EACN,WAAK,KAAK,EAAC,SAAS,IACnB,YAAM,IAAI,EAAC,SAAS,GAAG,CAClB,EAEL,IAAI,CAAC,SAAS,KACd,WACC,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,IAE5B,cAAQ,OAAO,EAAC,UAAU,GAAG,CACxB,CACN,CACK,EACN;GACF;EAEO,MAAM;IACb,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACnB,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC;GAClB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/info-panel/info-panel.component.scss?tag=p-info-panel&encapsulation=shadow","src/components/atoms/info-panel/info-panel.component.tsx"],"sourcesContent":[":host {\n\t@apply relative flex w-full flex-col rounded-large bg-indigo-light p-4;\n\n\t.header {\n\t\t@apply font-semibold text-storm-dark;\n\t}\n\n\t.content {\n\t\t@apply whitespace-pre-line text-sm;\n\t}\n\n\t.close {\n\t\t@apply absolute right-2 top-2 cursor-pointer text-storm-vague;\n\t}\n}\n\n:host(.variant-positive) {\n\t@apply bg-positive-light;\n}\n\n:host(.variant-unbiased) {\n\t@apply bg-unbiased-light;\n}\n\n:host(.variant-negative) {\n\t@apply bg-negative-light;\n}\n\n:host(.has-close) {\n\t@apply pr-8;\n}\n","import {\n\tComponent,\n\tElement,\n\th,\n\tHost,\n\tProp,\n\tEvent,\n\tEventEmitter,\n} from '@stencil/core';\n\n@Component({\n\ttag: 'p-info-panel',\n\tstyleUrl: 'info-panel.component.scss',\n\tshadow: true,\n})\nexport class InfoPanel {\n\t/**\n\t * The variant of the info panel\n\t */\n\t@Prop() variant: 'info' | 'negative' | 'positive' | 'unbiased' = 'info';\n\n\t/**\n\t * The header of the info panel\n\t */\n\t@Prop() header: string;\n\n\t/**\n\t * The content of the info panel\n\t */\n\t@Prop() content: string;\n\n\t/**\n\t * Wether the panel can be closed\n\t */\n\t@Prop() closeable: boolean = false;\n\n\t/**\n\t * When the backdrop is clicked\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclosed: EventEmitter<void>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-info-panel variant-${this.variant} ${\n\t\t\t\t\tthis.closeable && 'has-close'\n\t\t\t\t}`}\n\t\t\t>\n\t\t\t\t<div class='header'>\n\t\t\t\t\t<slot name='header' />\n\t\t\t\t</div>\n\t\t\t\t<div class='content'>\n\t\t\t\t\t<slot name='content' />\n\t\t\t\t</div>\n\n\t\t\t\t{this.closeable && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass='close'\n\t\t\t\t\t\tonClick={() => this._close()}\n\t\t\t\t\t>\n\t\t\t\t\t\t<p-icon variant='negative' />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _close() {\n\t\tthis.closed.emit();\n\t\tthis._el.remove();\n\t}\n}\n"],"version":3}
+{"file":"p-info-panel.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,03CAA03C;;MCe34C,SAAS;;;;;;mBAI4C,MAAM;;;qBAe1C,KAAK;;EAelC,MAAM;IACL,QACC,EAAC,IAAI,IACJ,KAAK,EAAE,wBAAwB,IAAI,CAAC,OAAO,IAC1C,IAAI,CAAC,SAAS,IAAI,WACnB,EAAE,IAEF,WAAK,KAAK,EAAC,QAAQ,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,EACN,WAAK,KAAK,EAAC,SAAS,IACnB,YAAM,IAAI,EAAC,SAAS,GAAG,CAClB,EAEL,IAAI,CAAC,SAAS,KACd,WACC,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,IAE5B,cAAQ,OAAO,EAAC,UAAU,GAAG,CACxB,CACN,CACK,EACN;GACF;EAEO,MAAM;IACb,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACnB,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC;GAClB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/info-panel/info-panel.component.scss?tag=p-info-panel&encapsulation=shadow","src/components/atoms/info-panel/info-panel.component.tsx"],"sourcesContent":[":host {\n\t@apply relative flex w-full flex-col rounded-lg bg-indigo-light p-4;\n\n\t.header {\n\t\t@apply font-semibold text-storm-dark;\n\t}\n\n\t.content {\n\t\t@apply whitespace-pre-line text-sm;\n\t}\n\n\t.close {\n\t\t@apply absolute right-2 top-2 cursor-pointer text-storm-vague;\n\t}\n}\n\n:host(.variant-positive) {\n\t@apply bg-positive-light;\n}\n\n:host(.variant-unbiased) {\n\t@apply bg-unbiased-light;\n}\n\n:host(.variant-negative) {\n\t@apply bg-negative-light;\n}\n\n:host(.has-close) {\n\t@apply pr-8;\n}\n","import {\n\tComponent,\n\tElement,\n\th,\n\tHost,\n\tProp,\n\tEvent,\n\tEventEmitter,\n} from '@stencil/core';\n\n@Component({\n\ttag: 'p-info-panel',\n\tstyleUrl: 'info-panel.component.scss',\n\tshadow: true,\n})\nexport class InfoPanel {\n\t/**\n\t * The variant of the info panel\n\t */\n\t@Prop() variant: 'info' | 'negative' | 'positive' | 'unbiased' = 'info';\n\n\t/**\n\t * The header of the info panel\n\t */\n\t@Prop() header: string;\n\n\t/**\n\t * The content of the info panel\n\t */\n\t@Prop() content: string;\n\n\t/**\n\t * Wether the panel can be closed\n\t */\n\t@Prop() closeable: boolean = false;\n\n\t/**\n\t * When the backdrop is clicked\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclosed: EventEmitter<void>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-info-panel variant-${this.variant} ${\n\t\t\t\t\tthis.closeable && 'has-close'\n\t\t\t\t}`}\n\t\t\t>\n\t\t\t\t<div class='header'>\n\t\t\t\t\t<slot name='header' />\n\t\t\t\t</div>\n\t\t\t\t<div class='content'>\n\t\t\t\t\t<slot name='content' />\n\t\t\t\t</div>\n\n\t\t\t\t{this.closeable && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass='close'\n\t\t\t\t\t\tonClick={() => this._close()}\n\t\t\t\t\t>\n\t\t\t\t\t\t<p-icon variant='negative' />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _close() {\n\t\tthis.closed.emit();\n\t\tthis._el.remove();\n\t}\n}\n"],"version":3}

package/dist/components/p-navbar.js

@@ -1,34 +1,70 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as cva } from './index2.js';
 import { d as defineCustomElement$5 } from './backdrop.component.js';
 import { d as defineCustomElement$4 } from './button.component.js';
 import { d as defineCustomElement$3 } from './icon.component.js';
 import { d as defineCustomElement$2 } from './loader.component.js';
 
-const navbarComponentCss = ".fixed{position:fixed!important}.relative{position:relative!important}.left-0{left:0!important}.top-0{top:0!important}.z-navbar{z-index:300!important}.z-navbar-topbar{z-index:280!important}.mt-auto{margin-top:auto!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.h-screen{height:100vh!important}.w-60{width:15rem!important}.w-full{width:100%!important}.-translate-x-full{--tw-translate-x:-100%!important;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}.transform-gpu{transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) 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}.items-center{align-items:center!important}.justify-between{justify-content:space-between!important}.border-0{border-width:0!important}.border-b{border-bottom-width:1px!important}.border-r{border-right-width:1px!important}.border-solid{border-style:solid!important}.border-mystic-dark{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-2{padding-bottom:.5rem!important;padding-top:.5rem!important}*{box-sizing:border-box}:host{max-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));width:100%}@media (min-width:80rem){:host{width:15rem}}@media (min-width:105rem){:host{width:18rem}}:host .sidebar,:host .sidebar .company,:host .sidebar .content,:host .sidebar .user,:host .userbar{display:flex;flex-direction:column;width:100%}:host .sidebar,:host .top-bar{--tw-bg-opacity:1;--tw-border-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(218 230 240/var(--tw-border-opacity))!important;border-style:solid!important;border-width:0!important}:host .sidebar{--tw-bg-opacity:1;--tw-translate-x:-100%;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-right-width:1px!important;gap:1.5rem;height:100vh;left:0;padding-bottom:1rem;padding-top:calc(env(safe-area-inset-top, 0) + 1rem);position:fixed;top: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));transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:15rem;will-change:transform;z-index:300}@media (min-width:80rem){:host .sidebar{--tw-translate-x:0px;height:100%;position:relative;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));width:100%;z-index:0}}:host .sidebar .company,:host .sidebar .content,:host .sidebar .header,:host .sidebar .user{padding-left:1rem;padding-right:1rem}:host .sidebar .header{align-items:center;display:flex;justify-content:space-between;width:100%}@media (min-width:80rem){:host .sidebar .header{display:none}}:host .sidebar .content{overflow-y:auto;scrollbar-color:#528afa #dae6f0;scrollbar-width:thin}:host .sidebar .content::-webkit-scrollbar{width:.25rem}:host .sidebar .content::-webkit-scrollbar-track{background:#dae6f0}:host .sidebar .content::-webkit-scrollbar-thumb{background:#528afa}:host .sidebar .content::-webkit-scrollbar-thumb:hover{background:#528afa}:host .sidebar .user{display:none;margin-top:auto}@media (min-width:80rem){:host .sidebar .user{display:flex}}:host .sidebar.show{--tw-translate-x:env(safe-area-inset-left,0)}:host .top-bar{border-bottom-width:1px!important;display:flex;height:calc(env(safe-area-inset-top, 0) + 3rem);justify-content:space-between;padding:calc(env(safe-area-inset-top, 0) + .5rem) 1rem .5rem;position:relative;width:100%;z-index:280}@media (min-width:80rem){:host .top-bar{display:none}}:host p-backdrop{display:none}:host p-backdrop.show{display:block}@media (min-width:80rem){.layout-1280\\:relative{position:relative!important}.layout-1280\\:flex{display:flex!important}.layout-1280\\:hidden{display:none!important}.layout-1280\\:h-full{height:100%!important}.layout-1280\\:w-60{width:15rem!important}.layout-1280\\:w-full{width:100%!important}}.static{position:static!important}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!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}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}}";
+const navbarComponentCss = "*{box-sizing:border-box}:host .safe-sidebar{padding-top:calc(env(safe-area-inset-top, 0) + 1rem)!important}:host .safe-sidebar.show{--tw-translate-x:env(safe-area-inset-left,0)!important}:host .safe-topbar{height:calc(env(safe-area-inset-top, 0) + 4rem);padding-top:calc(env(safe-area-inset-top, 0) + 1rem)!important}.pointer-events-none{pointer-events:none!important}.static{position:static!important}.fixed{position:fixed!important}.relative{position:relative!important}.left-0{left:0!important}.top-0{top:0!important}.z-navbar{z-index:300!important}.z-navbar-backdrop{z-index:290!important}.z-navbar-topbar{z-index:280!important}.mt-auto{margin-top:auto!important}.flex{display:flex!important}.hidden{display:none!important}.h-screen{height:100vh!important}.w-60{width:15rem!important}.w-full{width:100%!important}.max-w-\\[16\\.5rem\\]{max-width:16.5rem!important}.-translate-x-full{--tw-translate-x:-100%!important;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}.transform-gpu{transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) 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}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.items-stretch{align-items:stretch!important}.justify-between{justify-content:space-between!important}.gap-6{gap:1.5rem!important}.overflow-y-auto{overflow-y:auto!important}.border-0{border-width:0!important}.border-b{border-bottom-width:1px!important}.border-r{border-right-width:1px!important}.border-solid{border-style:solid!important}.border-off-white-700{--tw-border-opacity:1!important;border-color:rgb(222 219 213/var(--tw-border-opacity,1))!important}.bg-off-white-300{--tw-bg-opacity:1!important;background-color:rgb(248 247 244/var(--tw-bg-opacity,1))!important}.p-4{padding:1rem!important}.opacity-0{opacity:0!important}.opacity-100{opacity:1!important}.transition-all{transition-duration:.15s!important;transition-property:all!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.transition-opacity{transition-duration:.15s!important;transition-property:opacity!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.will-change-transform{will-change:transform!important}.max-h-screen-safe{max-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important}@media (min-width:80rem){.layout-1280\\:relative{position:relative!important}.layout-1280\\:z-0{z-index:0!important}.layout-1280\\:flex{display:flex!important}.layout-1280\\:hidden{display:none!important}.layout-1280\\:h-full{height:100%!important}.layout-1280\\:w-60{width:15rem!important}.layout-1280\\:max-w-none{max-width:none!important}.layout-1280\\:translate-x-0{--tw-translate-x:0px!important;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}}@media (min-width:105rem){.layout-1680\\:w-72{width:18rem!important}}";
 
+const sidebarAndTopbar = cva([
+  'bg-off-white-300',
+  'border-0 border-solid border-off-white-700',
+  'p-4',
+]);
+const sidebar = cva([
+  'flex flex-col',
+  'fixed left-0 top-0 z-navbar h-screen w-60',
+  'w-full max-w-[16.5rem]',
+  'layout-1280:relative layout-1280:z-0 layout-1280:max-w-none layout-1280:h-full',
+  'gap-6',
+  'transition-all',
+  'will-change-transform',
+  '-translate-x-full transform-gpu layout-1280:translate-x-0',
+  'border-r',
+  'safe-sidebar',
+], {
+  variants: {
+    show: {
+      false: null,
+      true: 'show',
+    },
+  },
+});
+const topbar = cva([
+  'flex w-full justify-between items-center',
+  'relative z-navbar-topbar',
+  'border-b',
+  'layout-1280:hidden',
+  'safe-topbar',
+]);
+const backdrop = cva(['z-navbar-backdrop layout-1280:hidden transition-opacity'], {
+  variants: {
+    show: {
+      false: 'opacity-0 pointer-events-none',
+      true: 'opacity-100',
+    },
+  },
+});
 const Navbar = /*@__PURE__*/ proxyCustomElement(class Navbar extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.closeText = 'Close';
-    this.menuText = 'Menu';
-    this._showMenu = false;
+    this._show = false;
   }
   render() {
-    return (h(Host, { class: "p-navbar" }, h("p-backdrop", { applyBlur: true, class: `z-navbar-backdrop desktop-xs:hidden ${this._showMenu && 'show'}`, onClicked: () => (this._showMenu = false) }), h("div", { class: `sidebar ${this._showMenu && 'show'}` }, h("div", { class: "header" }, h("p", { class: "text-xl m-0 font-semibold text-storm-dark" }, this.menuText), h("p-button", { variant: "secondary", icon: "negative", iconPosition: "end", size: "small", onClick: () => (this._showMenu = false) }, this.closeText)), h("div", { class: "company" }, h("slot", { name: "company" })), h("div", { class: "content" }, h("slot", { name: "content" })), h("div", { class: "user" }, h("slot", { name: "user" }))), h("div", { class: "top-bar" }, h("p-button", { variant: "secondary", icon: "menu", size: "small", onClick: () => (this._showMenu = true) }, this.menuText), h("slot", { name: "topbar" }))));
+    return (h(Host, { class: 'p-navbar w-full max-h-screen-safe layout-1280:w-60 layout-1680:w-72' }, h("p-backdrop", { class: backdrop({ show: this._show }), scrollLock: this._show, onClicked: () => (this._show = false) }), h("div", { class: sidebar({ class: sidebarAndTopbar(), show: this._show }) }, h("div", { class: 'flex w-full items-center justify-between layout-1280:hidden' }, h("p-button", { variant: 'secondary', icon: 'menu-arrow', iconFlip: 'horizontal', iconOnly: true, size: 'sm', onClick: () => (this._show = false) })), h("div", { class: 'flex w-full flex-col items-stretch' }, h("slot", { name: 'company' })), h("div", { class: 'flex w-full flex-col gap-6 overflow-y-auto' }, h("slot", { name: 'content' })), h("div", { class: 'mt-auto hidden w-full flex-col layout-1280:flex' }, h("slot", { name: 'user' }))), h("div", { class: topbar({ class: sidebarAndTopbar() }) }, h("p-button", { variant: 'secondary', iconOnly: true, icon: 'menu-arrow', size: 'sm', onClick: () => (this._show = true) }), h("slot", { name: 'topbar' }))));
   }
   handleCloseNavbar() {
-    this._showMenu = false;
+    this._show = false;
   }
   handleOpenNavbar() {
-    this._showMenu = true;
+    this._show = true;
   }
   static get style() { return navbarComponentCss; }
 }, [1, "p-navbar", {
-    "closeText": [1, "close-text"],
-    "menuText": [1, "menu-text"],
-    "_showMenu": [32]
+    "_show": [32]
   }, [[8, "closeNavbar", "handleCloseNavbar"], [8, "openNavbar", "handleOpenNavbar"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/p-navbar.js.map

@@ -1 +1 @@
-{"file":"p-navbar.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,01JAA01J;;MCOx2J,MAAM;;;;;qBAIE,OAAO;oBAKR,MAAM;qBAEI,KAAK;;EAElC,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAC,UAAU,IACrB,kBACC,SAAS,EAAE,IAAI,EACf,KAAK,EAAE,uCACN,IAAI,CAAC,SAAS,IAAI,MACnB,EAAE,EACF,SAAS,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,GAC5B,EACd,WAAK,KAAK,EAAE,WAAW,IAAI,CAAC,SAAS,IAAI,MAAM,EAAE,IAChD,WAAK,KAAK,EAAC,QAAQ,IAClB,SAAG,KAAK,EAAC,2CAA2C,IAClD,IAAI,CAAC,QAAQ,CACX,EAEJ,gBACC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,UAAU,EACf,YAAY,EAAC,KAAK,EAClB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAEtC,IAAI,CAAC,SAAS,CACL,CACN,EACN,WAAK,KAAK,EAAC,SAAS,IACnB,YAAM,IAAI,EAAC,SAAS,GAAG,CAClB,EACN,WAAK,KAAK,EAAC,SAAS,IACnB,YAAM,IAAI,EAAC,SAAS,GAAG,CAClB,EAEN,WAAK,KAAK,EAAC,MAAM,IAChB,YAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACD,EAEN,WAAK,KAAK,EAAC,SAAS,IACnB,gBACC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAErC,IAAI,CAAC,QAAQ,CACJ,EAEX,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,CACA,EACN;GACF;EAGD,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;GACvB;EAGD,gBAAgB;IACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/organisms/navbar/navbar.component.scss?tag=p-navbar&encapsulation=shadow","src/components/organisms/navbar/navbar.component.tsx"],"sourcesContent":["@import '../../../style/mixins';\n\n:host {\n\t@apply w-full max-h-screen-safe;\n\t@apply layout-1280:w-60 layout-1680:w-72;\n\n\t.sidebar,\n\t.sidebar .company,\n\t.sidebar .content,\n\t.sidebar .user,\n\t.userbar {\n\t\t@apply flex w-full flex-col;\n\t}\n\n\t.sidebar,\n\t.top-bar {\n\t\t@apply bg-white;\n\t\t@apply border-0  border-solid border-mystic-dark #{!important};\n\t}\n\n\t.sidebar {\n\t\t@apply fixed top-0 left-0 z-navbar h-screen w-60 bg-white;\n\t\t@apply layout-1280:relative layout-1280:h-full layout-1280:w-full layout-1280:z-0;\n\t\t@apply gap-6;\n\n\t\t@apply will-change-transform;\n\t\t@apply -translate-x-full transform-gpu layout-1280:translate-x-0;\n\n\t\t@apply py-4;\n\n\t\tpadding-top: calc(env(safe-area-inset-top, 0) + 1rem);\n\n\t\t@apply border-r #{!important};\n\n\t\t@apply transition-all;\n\n\t\t.company,\n\t\t.content,\n\t\t.user,\n\t\t.header {\n\t\t\t@apply px-4;\n\t\t}\n\n\t\t.header {\n\t\t\t@apply flex w-full items-center justify-between;\n\t\t\t@apply layout-1280:hidden;\n\t\t}\n\n\t\t.content {\n\t\t\t@apply overflow-y-auto;\n\n\t\t\t@include scrollbarY();\n\t\t}\n\n\t\t.user {\n\t\t\t@apply mt-auto hidden;\n\t\t\t@apply layout-1280:flex;\n\t\t}\n\n\t\t&.show {\n\t\t\t--tw-translate-x: env(safe-area-inset-left, 0);\n\t\t}\n\t}\n\n\t.top-bar {\n\t\t@apply flex w-full justify-between px-4 py-2 z-navbar-topbar relative;\n\n\t\tpadding-top: calc(env(safe-area-inset-top, 0) + 0.5rem);\n\t\theight: calc(env(safe-area-inset-top, 0) + 3rem);\n\n\t\t@apply border-b #{!important};\n\n\t\t@apply layout-1280:hidden;\n\t}\n\n\tp-backdrop {\n\t\t@apply hidden;\n\n\t\t&.show {\n\t\t\t@apply block;\n\t\t}\n\t}\n}\n","import { Component, h, Host, Listen, Prop, State } from '@stencil/core';\n\n@Component({\n\ttag: 'p-navbar',\n\tstyleUrl: 'navbar.component.scss',\n\tshadow: true,\n})\nexport class Navbar {\n\t/**\n\t * The text to display for the close button\n\t */\n\t@Prop() closeText = 'Close';\n\n\t/**\n\t * The text to display for the menu button & sidebar title\n\t */\n\t@Prop() menuText = 'Menu';\n\n\t@State() private _showMenu = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-navbar\">\n\t\t\t\t<p-backdrop\n\t\t\t\t\tapplyBlur={true}\n\t\t\t\t\tclass={`z-navbar-backdrop desktop-xs:hidden ${\n\t\t\t\t\t\tthis._showMenu && 'show'\n\t\t\t\t\t}`}\n\t\t\t\t\tonClicked={() => (this._showMenu = false)}\n\t\t\t\t></p-backdrop>\n\t\t\t\t<div class={`sidebar ${this._showMenu && 'show'}`}>\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<p class=\"text-xl m-0 font-semibold text-storm-dark\">\n\t\t\t\t\t\t\t{this.menuText}\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\ticon=\"negative\"\n\t\t\t\t\t\t\ticonPosition=\"end\"\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tonClick={() => (this._showMenu = false)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this.closeText}\n\t\t\t\t\t\t</p-button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"company\">\n\t\t\t\t\t\t<slot name=\"company\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<slot name=\"content\" />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div class=\"user\">\n\t\t\t\t\t\t<slot name=\"user\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<div class=\"top-bar\">\n\t\t\t\t\t<p-button\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\ticon=\"menu\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tonClick={() => (this._showMenu = true)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.menuText}\n\t\t\t\t\t</p-button>\n\n\t\t\t\t\t<slot name=\"topbar\" />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('closeNavbar', { target: 'window' })\n\thandleCloseNavbar() {\n\t\tthis._showMenu = false;\n\t}\n\n\t@Listen('openNavbar', { target: 'window' })\n\thandleOpenNavbar() {\n\t\tthis._showMenu = true;\n\t}\n}\n"],"version":3}
+{"file":"p-navbar.js","mappings":";;;;;;;AAAA,MAAM,kBAAkB,GAAG,ypGAAypG;;ACGprG,MAAM,gBAAgB,GAAG,GAAG,CAAC;EAC5B,kBAAkB;EAClB,4CAA4C;EAC5C,KAAK;CACL,CAAC,CAAC;AAEH,MAAM,OAAO,GAAG,GAAG,CAClB;EACC,eAAe;EAEf,2CAA2C;EAC3C,wBAAwB;EACxB,gFAAgF;EAChF,OAAO;EAEP,gBAAgB;EAChB,uBAAuB;EACvB,2DAA2D;EAE3D,UAAU;EAEV,cAAc;CACd,EACD;EACC,QAAQ,EAAE;IACT,IAAI,EAAE;MACL,KAAK,EAAE,IAAI;MACX,IAAI,EAAE,MAAM;KACZ;GACD;CACD,CACD,CAAC;AAEF,MAAM,MAAM,GAAG,GAAG,CAAC;EAClB,0CAA0C;EAC1C,0BAA0B;EAC1B,UAAU;EACV,oBAAoB;EACpB,aAAa;CACb,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAG,GAAG,CACnB,CAAC,yDAAyD,CAAC,EAC3D;EACC,QAAQ,EAAE;IACT,IAAI,EAAE;MACL,KAAK,EAAE,+BAA+B;MACtC,IAAI,EAAE,aAAa;KACnB;GACD;CACD,CACD,CAAC;MAOW,MAAM;;;;;iBACO,KAAK;;EAE9B,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAC,qEAAqE,IAChF,kBACC,KAAK,EAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,EACrC,UAAU,EAAE,IAAI,CAAC,KAAK,EACtB,SAAS,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,GACxB,EACd,WAAK,KAAK,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,IACnE,WAAK,KAAK,EAAC,6DAA6D,IACvE,gBACC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,YAAY,EACjB,QAAQ,EAAC,YAAY,EACrB,QAAQ,EAAE,IAAI,EACd,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,GACxB,CACP,EACN,WAAK,KAAK,EAAC,oCAAoC,IAC9C,YAAM,IAAI,EAAC,SAAS,GAAG,CAClB,EACN,WAAK,KAAK,EAAC,4CAA4C,IACtD,YAAM,IAAI,EAAC,SAAS,GAAG,CAClB,EAEN,WAAK,KAAK,EAAC,iDAAiD,IAC3D,YAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACD,EACN,WAAK,KAAK,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE,CAAC,IAChD,gBACC,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,IAAI,EACd,IAAI,EAAC,YAAY,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GACvB,EAEZ,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,CACA,EACN;GACF;EAGD,iBAAiB;IAChB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;GACnB;EAGD,gBAAgB;IACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;GAClB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/organisms/navbar/navbar.component.scss?tag=p-navbar&encapsulation=shadow","src/components/organisms/navbar/navbar.component.tsx"],"sourcesContent":[":host {\n\t.safe-sidebar {\n\t\tpadding-top: calc(env(safe-area-inset-top, 0) + 1rem) !important;\n\n\t\t&.show {\n\t\t\t--tw-translate-x: env(safe-area-inset-left, 0) !important;\n\t\t}\n\t}\n\n\t.safe-topbar {\n\t\tpadding-top: calc(env(safe-area-inset-top, 0) + 1rem) !important;\n\t\theight: calc(env(safe-area-inset-top, 0) + 4rem);\n\t}\n}\n","import { Component, h, Host, Listen, State } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst sidebarAndTopbar = cva([\n\t'bg-off-white-300',\n\t'border-0 border-solid border-off-white-700',\n\t'p-4',\n]);\n\nconst sidebar = cva(\n\t[\n\t\t'flex flex-col',\n\n\t\t'fixed left-0 top-0 z-navbar h-screen w-60',\n\t\t'w-full max-w-[16.5rem]',\n\t\t'layout-1280:relative layout-1280:z-0 layout-1280:max-w-none layout-1280:h-full',\n\t\t'gap-6',\n\n\t\t'transition-all',\n\t\t'will-change-transform',\n\t\t'-translate-x-full transform-gpu layout-1280:translate-x-0',\n\n\t\t'border-r',\n\n\t\t'safe-sidebar',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tshow: {\n\t\t\t\tfalse: null,\n\t\t\t\ttrue: 'show',\n\t\t\t},\n\t\t},\n\t}\n);\n\nconst topbar = cva([\n\t'flex w-full justify-between items-center',\n\t'relative z-navbar-topbar',\n\t'border-b',\n\t'layout-1280:hidden',\n\t'safe-topbar',\n]);\n\nconst backdrop = cva(\n\t['z-navbar-backdrop layout-1280:hidden transition-opacity'],\n\t{\n\t\tvariants: {\n\t\t\tshow: {\n\t\t\t\tfalse: 'opacity-0 pointer-events-none',\n\t\t\t\ttrue: 'opacity-100',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-navbar',\n\tstyleUrl: 'navbar.component.scss',\n\tshadow: true,\n})\nexport class Navbar {\n\t@State() private _show = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-navbar w-full max-h-screen-safe layout-1280:w-60 layout-1680:w-72'>\n\t\t\t\t<p-backdrop\n\t\t\t\t\tclass={backdrop({ show: this._show })}\n\t\t\t\t\tscrollLock={this._show}\n\t\t\t\t\tonClicked={() => (this._show = false)}\n\t\t\t\t></p-backdrop>\n\t\t\t\t<div class={sidebar({ class: sidebarAndTopbar(), show: this._show })}>\n\t\t\t\t\t<div class='flex w-full items-center justify-between layout-1280:hidden'>\n\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\t\ticon='menu-arrow'\n\t\t\t\t\t\t\ticonFlip='horizontal'\n\t\t\t\t\t\t\ticonOnly={true}\n\t\t\t\t\t\t\tsize='sm'\n\t\t\t\t\t\t\tonClick={() => (this._show = false)}\n\t\t\t\t\t\t></p-button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class='flex w-full flex-col items-stretch'>\n\t\t\t\t\t\t<slot name='company' />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class='flex w-full flex-col gap-6 overflow-y-auto'>\n\t\t\t\t\t\t<slot name='content' />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div class='mt-auto hidden w-full flex-col layout-1280:flex'>\n\t\t\t\t\t\t<slot name='user' />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class={topbar({ class: sidebarAndTopbar() })}>\n\t\t\t\t\t<p-button\n\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\ticonOnly={true}\n\t\t\t\t\t\ticon='menu-arrow'\n\t\t\t\t\t\tsize='sm'\n\t\t\t\t\t\tonClick={() => (this._show = true)}\n\t\t\t\t\t></p-button>\n\n\t\t\t\t\t<slot name='topbar' />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('closeNavbar', { target: 'window' })\n\thandleCloseNavbar() {\n\t\tthis._show = false;\n\t}\n\n\t@Listen('openNavbar', { target: 'window' })\n\thandleOpenNavbar() {\n\t\tthis._show = true;\n\t}\n}\n"],"version":3}