@paperless/core 2.0.1-beta.2 → 2.0.1-beta.21

package/dist/cjs/p-modal-body_4.cjs.entry.js

@@ -2,25 +2,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-02e05522.js');
+const index = require('./index-3f9bbc0c.js');
 
 const modalBodyComponentCss = ".rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.rounded-t-lg{border-top-left-radius:.5rem!important;border-top-right-radius:.5rem!important}.p-0{padding:0!important}.px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:1.5rem}:host(.variant-table-flush){padding:0!important}:host(.is-rounded-bottom){border-bottom-left-radius:0;border-bottom-right-radius:0}@media (min-width:64rem){:host(.is-rounded-bottom){border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}}:host(.is-rounded-top){border-top-left-radius:.5rem;border-top-right-radius:.5rem}@media (min-width:64rem){:host(.is-rounded-top){border-top-left-radius:1rem;border-top-right-radius:1rem}}:host(.no-padding){padding:0}.static{position:static!important}";
+const PModalBodyStyle0 = modalBodyComponentCss;
 
 const ModalBody = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.variant = 'default';
-    this.roundedBottom = false;
-    this.roundedTop = false;
-    this.padding = true;
-  }
-  render() {
-    return (index.h(index.Host, { class: `p-modal-body variant-${this.variant} ${this.roundedBottom && 'is-rounded-bottom'} ${this.roundedTop && 'is-rounded-top'} ${!this.padding && 'no-padding'}` }, index.h("slot", null)));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.variant = 'default';
+        this.roundedBottom = false;
+        this.roundedTop = false;
+        this.padding = true;
+    }
+    render() {
+        return (index.h(index.Host, { key: 'd0b735c1c6aca053bb2d9b36f66dc8c3e6fe42da', class: `p-modal-body variant-${this.variant} ${this.roundedBottom && 'is-rounded-bottom'} ${this.roundedTop && 'is-rounded-top'} ${!this.padding && 'no-padding'}` }, index.h("slot", { key: '2278b56bf9810ec13f90b8f14ae5167d26442e2f' })));
+    }
 };
-ModalBody.style = modalBodyComponentCss;
+ModalBody.style = PModalBodyStyle0;
 
 const modalContainerComponentCss = ".z-modal{z-index:600!important}.flex{display:flex!important}.max-h-\\[calc\\(100dvh-4rem\\)\\]{max-height:calc(100dvh - 4rem)!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.rounded-t-2xl{border-top-left-radius:1rem!important;border-top-right-radius:1rem!important}.shadow-3{--tw-shadow:0 1px 1px rgba(0,2,2,.08),0 2px 2px rgba(0,2,2,.08),0 4px 4px rgba(0,2,2,.08)!important;--tw-shadow-colored:0 1px 1px var(--tw-shadow-color),0 2px 2px var(--tw-shadow-color),0 4px 4px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.animate-in{--tw-enter-opacity:initial!important;--tw-enter-scale:initial!important;--tw-enter-rotate:initial!important;--tw-enter-translate-x:initial!important;--tw-enter-translate-y:initial!important;animation-duration:.15s!important;animation-name:enter!important}.slide-in-from-bottom{--tw-enter-translate-y:100%!important}.slide-out-to-bottom{--tw-exit-translate-y:100%!important}*{box-sizing:border-box}p-modal-container{--tw-enter-opacity:initial!important;--tw-enter-scale:initial!important;--tw-enter-rotate:initial!important;--tw-enter-translate-x:initial!important;--tw-enter-translate-y:initial!important;--tw-enter-translate-y:100%!important;--tw-shadow:0 1px 1px rgba(0,2,2,.08),0 2px 2px rgba(0,2,2,.08),0 4px 4px rgba(0,2,2,.08)!important;--tw-shadow-colored:0 1px 1px var(--tw-shadow-color),0 2px 2px var(--tw-shadow-color),0 4px 4px var(--tw-shadow-color)!important;animation-duration:.15s!important;animation-name:enter!important;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:1rem;border-top-right-radius:1rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important;display:flex;flex-direction:column;max-height:calc(100dvh - 4rem);width:100%;z-index:600}@media (min-width:40rem){p-modal-container{width:auto}}@media (min-width:64rem){p-modal-container{--tw-enter-translate-y:4rem!important;border-bottom-left-radius:1rem;border-bottom-right-radius:1rem;margin:auto;max-height:none}}p-modal-container.closing{--tw-exit-translate-y:100%!important}@media (min-width:64rem){p-modal-container.closing{--tw-exit-translate-y:4rem!important}.desktop-xs\\:slide-in-from-bottom-16{--tw-enter-translate-y:4rem!important}.desktop-xs\\:slide-out-to-bottom-16{--tw-exit-translate-y:4rem!important}}.static{position:static!important}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}";
+const PModalContainerStyle0 = modalContainerComponentCss;
 
 // $modal-xs: 20rem;
 // $modal-sm: 33.5rem;
@@ -28,50 +30,56 @@ const modalContainerComponentCss = ".z-modal{z-index:600!important}.flex{display
 // $modal-lg: 47.5rem;
 // $modal-xl: 57.5rem;
 const modalSizes = {
-  xs: 'tablet:w-80',
-  sm: 'tablet:w-[33.5rem]',
-  md: 'tablet:w-[38rem]',
-  lg: 'tablet:w-[47.5rem]',
-  xl: 'tablet:w-[57.5rem]',
+    xs: 'tablet:w-80',
+    sm: 'tablet:w-[33.5rem]',
+    md: 'tablet:w-[38rem]',
+    lg: 'tablet:w-[47.5rem]',
+    xl: 'tablet:w-[57.5rem]',
 };
 const ModalContainer = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.size = 'md';
-    this.closing = false;
-  }
-  render() {
-    const sizeClass = modalSizes[this.size];
-    return (index.h(index.Host, { class: `p-modal-container ${this.closing && 'closing'} ${sizeClass}` }, index.h("slot", null)));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.size = 'md';
+        this.closing = false;
+    }
+    render() {
+        const sizeClass = modalSizes[this.size];
+        return (index.h(index.Host, { key: 'f8c36d282ba3b1f4265bad93d5facdeac272726f', class: `p-modal-container ${this.closing && 'closing'} ${sizeClass}` }, index.h("slot", { key: 'f70d967878d24e66e1bb41ef63690a1a6aa702e8' })));
+    }
 };
-ModalContainer.style = modalContainerComponentCss;
+ModalContainer.style = PModalContainerStyle0;
 
 const modalFooterComponentCss = ".flex{display:flex!important}.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));border-bottom-left-radius:0;border-bottom-right-radius:0;display:flex;flex-direction:column;padding-bottom:1.5rem;padding-left:1.5rem;padding-right:1.5rem}@media (min-width:64rem){:host{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.hidden{display:none!important}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}";
+const PModalFooterStyle0 = modalFooterComponentCss;
 
 const ModalFooter = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, { class: "p-modal-footer" }, index.h("p-divider", { class: "mb-6 mt-0 hidden desktop-xs:flex" }), index.h("slot", null)));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '8b95e0bc8927f933dbde6532cfe674c3b795d91d', class: "p-modal-footer" }, index.h("p-divider", { key: '44924282dcfa7271edb5468db39568bc9a348f6d', class: "mb-6 mt-0 hidden desktop-xs:flex" }), index.h("slot", { key: 'b09dc0f60512eb72456fa7e3837487f16086ae10' })));
+    }
 };
-ModalFooter.style = modalFooterComponentCss;
+ModalFooter.style = PModalFooterStyle0;
 
 const modalHeaderComponentCss = ".flex{display:flex!important}.items-center{align-items:center!important}.rounded-t-2xl{border-top-left-radius:1rem!important;border-top-right-radius:1rem!important}.p-4{padding:1rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.font-semibold{font-weight:600!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(247 250 252/var(--tw-bg-opacity,1));border-top-left-radius:1rem;border-top-right-radius:1rem;color:rgb(39 40 56/var(--tw-text-opacity,1));display:flex;font-size:1.25rem;font-weight:600;justify-content:space-between;line-height:1.75rem;padding:1rem}@media (min-width:64rem){:host{font-size:2rem;font-weight:700;line-height:2.5rem;padding:1.5rem}}@media (min-width:64rem){.desktop-xs\\:text-3xl{font-size:2rem!important;line-height:2.5rem!important}}.static{position:static!important}";
+const PModalHeaderStyle0 = modalHeaderComponentCss;
 
 const ModalHeader = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.close = index.createEvent(this, "close", 3);
-    this.showClose = true;
-  }
-  render() {
-    return (index.h(index.Host, { class: 'p-modal-header' }, index.h("span", null, index.h("slot", null)), this.showClose && (index.h("p-button", { variant: 'secondary', icon: 'negative', iconOnly: true, onClick: ev => this.close.emit(ev), size: 'sm' }))));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.close = index.createEvent(this, "close", 3);
+        this.showClose = true;
+    }
+    /**
+     * Close click event
+     */
+    close;
+    render() {
+        return (index.h(index.Host, { key: '420214cfdb2dd596f7538048593025801122a7b3', class: 'p-modal-header' }, index.h("span", { key: '10f405e910552ccf368a7ce1ab0799ac193199c8' }, index.h("slot", { key: '916197272fc2f43bd87f7c97bd36a0b94d304892' })), this.showClose && (index.h("p-button", { key: 'bfdcec4df0c865693d8d9cc35a8556408447f76e', variant: 'secondary', icon: 'negative', iconOnly: true, onClick: ev => this.close.emit(ev), size: 'sm' }))));
+    }
 };
-ModalHeader.style = modalHeaderComponentCss;
+ModalHeader.style = PModalHeaderStyle0;
 
 exports.p_modal_body = ModalBody;
 exports.p_modal_container = ModalContainer;

package/dist/cjs/p-modal-body_4.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"p-modal-body.p-modal-container.p-modal-footer.p-modal-header.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,qBAAqB,GAAG,i4BAAi4B;;MCOl5B,SAAS;;;mBAIwB,SAAS;yBAKrB,KAAK;sBAKR,KAAK;mBAKR,IAAI;;EAE/B,MAAM;IACL,QACCA,QAACC,UAAI,IACJ,KAAK,EAAE,wBAAwB,IAAI,CAAC,OAAO,IAC1C,IAAI,CAAC,aAAa,IAAI,mBACvB,IACC,IAAI,CAAC,UAAU,IAAI,gBACpB,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,YAAY,EAAE,IAEnCD,qBAAQ,CACF,EACN;GACF;;;;ACxCF,MAAM,0BAA0B,GAAG,gxFAAgxF;;ACEnzF;AACA;AACA;AACA;AACA;AAEA,MAAM,UAAU,GAAG;EAClB,EAAE,EAAE,aAAa;EACjB,EAAE,EAAE,oBAAoB;EACxB,EAAE,EAAE,kBAAkB;EACtB,EAAE,EAAE,oBAAoB;EACxB,EAAE,EAAE,oBAAoB;CACxB,CAAC;MAKW,cAAc;;;gBAIgB,IAAI;mBAKnB,KAAK;;EAEhC,MAAM;IACL,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAExC,QACCA,QAACC,UAAI,IACJ,KAAK,EAAE,qBACN,IAAI,CAAC,OAAO,IAAI,SACjB,IAAI,SAAS,EAAE,IAEfD,qBAAQ,CACF,EACN;GACF;;;;AC1CF,MAAM,uBAAuB,GAAG,yuBAAyuB;;MCO5vB,WAAW;;;;EACvB,MAAM;IACL,QACCA,QAACC,UAAI,IAAC,KAAK,EAAC,gBAAgB,IAC3BD,uBAAW,KAAK,EAAC,kCAAkC,GAAG,EAEtDA,qBAAQ,CACF,EACN;GACF;;;;AChBF,MAAM,uBAAuB,GAAG,43BAA43B;;MCO/4B,WAAW;;;;qBAIH,IAAI;;EAUxB,MAAM;IACL,QACCA,QAACC,UAAI,IAAC,KAAK,EAAC,gBAAgB,IAC3BD,sBACCA,qBAAQ,CACF,EAEN,IAAI,CAAC,SAAS,KACdA,sBACC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,EAClC,IAAI,EAAC,IAAI,GACE,CACZ,CACK,EACN;GACF;;;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/modal-body/modal-body.component.scss?tag=p-modal-body&encapsulation=shadow","src/components/atoms/modal-body/modal-body.component.tsx","src/components/atoms/modal-container/modal-container.component.scss?tag=p-modal-container","src/components/atoms/modal-container/modal-container.component.tsx","src/components/atoms/modal-footer/modal-footer.component.scss?tag=p-modal-footer&encapsulation=shadow","src/components/atoms/modal-footer/modal-footer.component.tsx","src/components/atoms/modal-header/modal-header.component.scss?tag=p-modal-header&encapsulation=shadow","src/components/atoms/modal-header/modal-header.component.tsx"],"sourcesContent":[":host {\n\t@apply bg-white;\n\t@apply px-6 py-6;\n}\n\n:host(.variant-table-flush) {\n\t@apply p-0 #{!important};\n}\n\n:host(.is-rounded-bottom) {\n\t@apply rounded-b-none desktop-xs:rounded-b-2xl;\n}\n\n:host(.is-rounded-top) {\n\t@apply rounded-t-lg desktop-xs:rounded-t-2xl;\n}\n\n:host(.no-padding) {\n\t@apply p-0;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal-body',\n\tstyleUrl: 'modal-body.component.scss',\n\tshadow: true,\n})\nexport class ModalBody {\n\t/**\n\t * The variant of the modal body\n\t */\n\t@Prop() variant: 'default' | 'table-flush' = 'default';\n\n\t/**\n\t * Wether the modal body should be rounded at the bottom\n\t */\n\t@Prop() roundedBottom: boolean = false;\n\n\t/**\n\t * Wether the modal body should be rounded at the top\n\t */\n\t@Prop() roundedTop: boolean = false;\n\n\t/**\n\t * Wether the body should have padding\n\t */\n\t@Prop() padding: boolean = true;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-modal-body variant-${this.variant} ${\n\t\t\t\t\tthis.roundedBottom && 'is-rounded-bottom'\n\t\t\t\t} ${\n\t\t\t\t\tthis.roundedTop && 'is-rounded-top'\n\t\t\t\t} ${!this.padding && 'no-padding'}`}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n","p-modal-container {\n\t@apply z-modal flex w-full flex-col tablet:w-auto;\n\t@apply rounded-b-none rounded-t-2xl desktop-xs:rounded-b-2xl;\n\n\t@apply desktop-xs:m-auto;\n\t@apply max-h-[calc(100dvh-4rem)] desktop-xs:max-h-none;\n\n\t@apply animate-in slide-in-from-bottom desktop-xs:slide-in-from-bottom-16 #{!important};\n\n\t@apply shadow-3 #{!important};\n\n\t&.closing {\n\t\t@apply slide-out-to-bottom desktop-xs:slide-out-to-bottom-16 #{!important};\n\t}\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n// $modal-xs: 20rem;\n// $modal-sm: 33.5rem;\n// $modal-md: 38rem;\n// $modal-lg: 47.5rem;\n// $modal-xl: 57.5rem;\n\nconst modalSizes = {\n\txs: 'tablet:w-80',\n\tsm: 'tablet:w-[33.5rem]',\n\tmd: 'tablet:w-[38rem]',\n\tlg: 'tablet:w-[47.5rem]',\n\txl: 'tablet:w-[57.5rem]',\n};\n@Component({\n\ttag: 'p-modal-container',\n\tstyleUrl: 'modal-container.component.scss',\n})\nexport class ModalContainer {\n\t/**\n\t * The size of the modal container\n\t */\n\t@Prop() size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n\t/**\n\t * Wether the container is closing\n\t */\n\t@Prop() closing: boolean = false;\n\n\trender() {\n\t\tconst sizeClass = modalSizes[this.size];\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-modal-container ${\n\t\t\t\t\tthis.closing && 'closing'\n\t\t\t\t} ${sizeClass}`}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n",":host {\n\t@apply bg-white;\n\t@apply flex flex-col;\n\t@apply px-6 pb-6;\n\t@apply rounded-b-none desktop-xs:rounded-b-2xl;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal-footer',\n\tstyleUrl: 'modal-footer.component.scss',\n\tshadow: true,\n})\nexport class ModalFooter {\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-modal-footer\">\n\t\t\t\t<p-divider class=\"mb-6 mt-0 hidden desktop-xs:flex\" />\n\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n",":host {\n\t@apply rounded-t-2xl bg-mystic;\n\t@apply flex items-center justify-between;\n\t@apply p-4 desktop-xs:p-6;\n\n\t@apply text-xl font-semibold text-storm-dark;\n\t@apply desktop-xs:text-3xl desktop-xs:font-bold;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal-header',\n\tstyleUrl: 'modal-header.component.scss',\n\tshadow: true,\n})\nexport class ModalHeader {\n\t/**\n\t * Wether to show the close button on mobile\n\t */\n\t@Prop() showClose = true;\n\n\t/**\n\t * Close click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclose: EventEmitter<MouseEvent>;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-modal-header'>\n\t\t\t\t<span>\n\t\t\t\t\t<slot />\n\t\t\t\t</span>\n\n\t\t\t\t{this.showClose && (\n\t\t\t\t\t<p-button\n\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\ticon='negative'\n\t\t\t\t\t\ticonOnly={true}\n\t\t\t\t\t\tonClick={ev => this.close.emit(ev)}\n\t\t\t\t\t\tsize='sm'\n\t\t\t\t\t></p-button>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"p-modal-body.p-modal-container.p-modal-footer.p-modal-header.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,qBAAqB,GAAG,i4BAAi4B,CAAC;AACh6B,yBAAe,qBAAqB;;MCMvB,SAAS;;;uBAIwB,SAAS;6BAKrB,KAAK;0BAKR,KAAK;uBAKR,IAAI;;IAE/B,MAAM;QACL,QACCA,QAACC,UAAI,qDACJ,KAAK,EAAE,wBAAwB,IAAI,CAAC,OAAO,IAC1C,IAAI,CAAC,aAAa,IAAI,mBACvB,IACC,IAAI,CAAC,UAAU,IAAI,gBACpB,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,YAAY,EAAE,IAEnCD,oEAAQ,CACF,EACN;KACF;;;;ACxCF,MAAM,0BAA0B,GAAG,gxFAAgxF,CAAC;AACpzF,8BAAe,0BAA0B;;ACCzC;AACA;AACA;AACA;AACA;AAEA,MAAM,UAAU,GAAG;IAClB,EAAE,EAAE,aAAa;IACjB,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,kBAAkB;IACtB,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,oBAAoB;CACxB,CAAC;MAKW,cAAc;;;oBAIgB,IAAI;uBAKnB,KAAK;;IAEhC,MAAM;QACL,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAExC,QACCA,QAACC,UAAI,qDACJ,KAAK,EAAE,qBACN,IAAI,CAAC,OAAO,IAAI,SACjB,IAAI,SAAS,EAAE,IAEfD,oEAAQ,CACF,EACN;KACF;;;;AC1CF,MAAM,uBAAuB,GAAG,yuBAAyuB,CAAC;AAC1wB,2BAAe,uBAAuB;;MCMzB,WAAW;;;;IACvB,MAAM;QACL,QACCA,QAACC,UAAI,qDAAC,KAAK,EAAC,gBAAgB,IAC3BD,wEAAW,KAAK,EAAC,kCAAkC,GAAG,EAEtDA,oEAAQ,CACF,EACN;KACF;;;;AChBF,MAAM,uBAAuB,GAAG,43BAA43B,CAAC;AAC75B,2BAAe,uBAAuB;;MCMzB,WAAW;;;;yBAIH,IAAI;;;;;IAQxB,KAAK,CAA2B;IAEhC,MAAM;QACL,QACCA,QAACC,UAAI,qDAAC,KAAK,EAAC,gBAAgB,IAC3BD,qEACCA,oEAAQ,CACF,EAEN,IAAI,CAAC,SAAS,KACdA,uEACC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,EAClC,IAAI,EAAC,IAAI,GACE,CACZ,CACK,EACN;KACF;;;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/modal-body/modal-body.component.scss?tag=p-modal-body&encapsulation=shadow","src/components/atoms/modal-body/modal-body.component.tsx","src/components/atoms/modal-container/modal-container.component.scss?tag=p-modal-container","src/components/atoms/modal-container/modal-container.component.tsx","src/components/atoms/modal-footer/modal-footer.component.scss?tag=p-modal-footer&encapsulation=shadow","src/components/atoms/modal-footer/modal-footer.component.tsx","src/components/atoms/modal-header/modal-header.component.scss?tag=p-modal-header&encapsulation=shadow","src/components/atoms/modal-header/modal-header.component.tsx"],"sourcesContent":[":host {\n\t@apply bg-white;\n\t@apply px-6 py-6;\n}\n\n:host(.variant-table-flush) {\n\t@apply p-0 #{!important};\n}\n\n:host(.is-rounded-bottom) {\n\t@apply rounded-b-none desktop-xs:rounded-b-2xl;\n}\n\n:host(.is-rounded-top) {\n\t@apply rounded-t-lg desktop-xs:rounded-t-2xl;\n}\n\n:host(.no-padding) {\n\t@apply p-0;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal-body',\n\tstyleUrl: 'modal-body.component.scss',\n\tshadow: true,\n})\nexport class ModalBody {\n\t/**\n\t * The variant of the modal body\n\t */\n\t@Prop() variant: 'default' | 'table-flush' = 'default';\n\n\t/**\n\t * Wether the modal body should be rounded at the bottom\n\t */\n\t@Prop() roundedBottom: boolean = false;\n\n\t/**\n\t * Wether the modal body should be rounded at the top\n\t */\n\t@Prop() roundedTop: boolean = false;\n\n\t/**\n\t * Wether the body should have padding\n\t */\n\t@Prop() padding: boolean = true;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-modal-body variant-${this.variant} ${\n\t\t\t\t\tthis.roundedBottom && 'is-rounded-bottom'\n\t\t\t\t} ${\n\t\t\t\t\tthis.roundedTop && 'is-rounded-top'\n\t\t\t\t} ${!this.padding && 'no-padding'}`}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n","p-modal-container {\n\t@apply z-modal flex w-full flex-col tablet:w-auto;\n\t@apply rounded-b-none rounded-t-2xl desktop-xs:rounded-b-2xl;\n\n\t@apply desktop-xs:m-auto;\n\t@apply max-h-[calc(100dvh-4rem)] desktop-xs:max-h-none;\n\n\t@apply animate-in slide-in-from-bottom desktop-xs:slide-in-from-bottom-16 #{!important};\n\n\t@apply shadow-3 #{!important};\n\n\t&.closing {\n\t\t@apply slide-out-to-bottom desktop-xs:slide-out-to-bottom-16 #{!important};\n\t}\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n// $modal-xs: 20rem;\n// $modal-sm: 33.5rem;\n// $modal-md: 38rem;\n// $modal-lg: 47.5rem;\n// $modal-xl: 57.5rem;\n\nconst modalSizes = {\n\txs: 'tablet:w-80',\n\tsm: 'tablet:w-[33.5rem]',\n\tmd: 'tablet:w-[38rem]',\n\tlg: 'tablet:w-[47.5rem]',\n\txl: 'tablet:w-[57.5rem]',\n};\n@Component({\n\ttag: 'p-modal-container',\n\tstyleUrl: 'modal-container.component.scss',\n})\nexport class ModalContainer {\n\t/**\n\t * The size of the modal container\n\t */\n\t@Prop() size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n\t/**\n\t * Wether the container is closing\n\t */\n\t@Prop() closing: boolean = false;\n\n\trender() {\n\t\tconst sizeClass = modalSizes[this.size];\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-modal-container ${\n\t\t\t\t\tthis.closing && 'closing'\n\t\t\t\t} ${sizeClass}`}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n",":host {\n\t@apply bg-white;\n\t@apply flex flex-col;\n\t@apply px-6 pb-6;\n\t@apply rounded-b-none desktop-xs:rounded-b-2xl;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal-footer',\n\tstyleUrl: 'modal-footer.component.scss',\n\tshadow: true,\n})\nexport class ModalFooter {\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-modal-footer\">\n\t\t\t\t<p-divider class=\"mb-6 mt-0 hidden desktop-xs:flex\" />\n\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n",":host {\n\t@apply rounded-t-2xl bg-mystic;\n\t@apply flex items-center justify-between;\n\t@apply p-4 desktop-xs:p-6;\n\n\t@apply text-xl font-semibold text-storm-dark;\n\t@apply desktop-xs:text-3xl desktop-xs:font-bold;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal-header',\n\tstyleUrl: 'modal-header.component.scss',\n\tshadow: true,\n})\nexport class ModalHeader {\n\t/**\n\t * Wether to show the close button on mobile\n\t */\n\t@Prop() showClose = true;\n\n\t/**\n\t * Close click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclose: EventEmitter<MouseEvent>;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-modal-header'>\n\t\t\t\t<span>\n\t\t\t\t\t<slot />\n\t\t\t\t</span>\n\n\t\t\t\t{this.showClose && (\n\t\t\t\t\t<p-button\n\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\ticon='negative'\n\t\t\t\t\t\ticonOnly={true}\n\t\t\t\t\t\tonClick={ev => this.close.emit(ev)}\n\t\t\t\t\t\tsize='sm'\n\t\t\t\t\t></p-button>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/cjs/p-modal.cjs.entry.js

@@ -2,62 +2,69 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-02e05522.js');
+const index = require('./index-3f9bbc0c.js');
 
 const Modal = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.closeClicked = index.createEvent(this, "closeClicked", 3);
-    this.closed = index.createEvent(this, "closed", 3);
-    this._hasFooterSlot = false;
-    this._hasHeaderSlot = false;
-    this.size = 'md';
-    this.variant = 'default';
-    this.header = undefined;
-    this.show = false;
-    this.applyBlur = false;
-    this.showClose = true;
-    this.showMobileFooter = false;
-    this.backdropClickClose = true;
-    this.scrollLock = true;
-    this.padding = true;
-    this._closing = false;
-  }
-  componentWillLoad() {
-    this._hasFooterSlot = !!this._el.querySelector(':scope > [slot="footer"]');
-    this._hasHeaderSlot = !!this._el.querySelector(':scope > [slot="header"]');
-  }
-  render() {
-    var _a, _b;
-    if (!this.show) {
-      return;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.closeClicked = index.createEvent(this, "closeClicked", 3);
+        this.closed = index.createEvent(this, "closed", 3);
+        this.size = 'md';
+        this.variant = 'default';
+        this.header = undefined;
+        this.show = false;
+        this.applyBlur = false;
+        this.showClose = true;
+        this.showMobileFooter = false;
+        this.backdropClickClose = true;
+        this.scrollLock = true;
+        this.padding = true;
+        this._closing = false;
     }
-    const headerContent = index.h("slot", { name: "header" });
-    const bodyContent = index.h("slot", { name: "content" });
-    const footerContent = index.h("slot", { name: "footer" });
-    return (index.h(index.Host, { class: "p-modal" }, index.h("p-backdrop", { applyBlur: this.applyBlur, onClicked: (ev) => this._backdropClick(ev.detail), closing: this._closing, scrollLock: this.scrollLock }, index.h("p-modal-container", { size: this.size, closing: this._closing }, (((_a = this.header) === null || _a === void 0 ? void 0 : _a.length) || this._hasHeaderSlot) && (index.h("p-modal-header", { showClose: this.showClose, onClose: (ev) => this.close('button', ev.detail) }, this._hasHeaderSlot
-      ? headerContent
-      : this.header)), index.h("p-modal-body", { variant: this.variant, roundedBottom: !this._hasFooterSlot, roundedTop: !this._hasHeaderSlot && !((_b = this.header) === null || _b === void 0 ? void 0 : _b.length), padding: this.padding }, bodyContent), this._hasFooterSlot && (index.h("p-modal-footer", null, footerContent))))));
-  }
-  _backdropClick(ev) {
-    if (!this.backdropClickClose) {
-      return;
+    /**
+     * Close click event
+     */
+    closeClicked;
+    /**
+     * Closed event
+     */
+    closed;
+    get _el() { return index.getElement(this); }
+    _hasFooterSlot = false;
+    _hasHeaderSlot = false;
+    componentWillLoad() {
+        this._hasFooterSlot = !!this._el.querySelector(':scope > [slot="footer"]');
+        this._hasHeaderSlot = !!this._el.querySelector(':scope > [slot="header"]');
+    }
+    render() {
+        if (!this.show) {
+            return;
+        }
+        const headerContent = index.h("slot", { name: "header" });
+        const bodyContent = index.h("slot", { name: "content" });
+        const footerContent = index.h("slot", { name: "footer" });
+        return (index.h(index.Host, { class: "p-modal" }, index.h("p-backdrop", { applyBlur: this.applyBlur, onClicked: (ev) => this._backdropClick(ev.detail), closing: this._closing, scrollLock: this.scrollLock }, index.h("p-modal-container", { size: this.size, closing: this._closing }, (this.header?.length || this._hasHeaderSlot) && (index.h("p-modal-header", { showClose: this.showClose, onClose: (ev) => this.close('button', ev.detail) }, this._hasHeaderSlot
+            ? headerContent
+            : this.header)), index.h("p-modal-body", { variant: this.variant, roundedBottom: !this._hasFooterSlot, roundedTop: !this._hasHeaderSlot && !this.header?.length, padding: this.padding }, bodyContent), this._hasFooterSlot && (index.h("p-modal-footer", null, footerContent))))));
+    }
+    _backdropClick(ev) {
+        if (!this.backdropClickClose) {
+            return;
+        }
+        this.close('backdrop', ev);
+    }
+    close(reason, ev) {
+        this.closeClicked.emit(ev);
+        this._closing = true;
+        setTimeout(() => {
+            this.show = false;
+            this._closing = false;
+            this.closed.emit(reason);
+        }, 550);
+    }
+    handleCloseModal() {
+        this.close('event');
     }
-    this.close('backdrop', ev);
-  }
-  close(reason, ev) {
-    this.closeClicked.emit(ev);
-    this._closing = true;
-    setTimeout(() => {
-      this.show = false;
-      this._closing = false;
-      this.closed.emit(reason);
-    }, 550);
-  }
-  handleCloseModal() {
-    this.close('event');
-  }
-  get _el() { return index.getElement(this); }
 };
 
 exports.p_modal = Modal;

package/dist/cjs/p-modal.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"p-modal.entry.cjs.js","mappings":";;;;;;MAgBa,KAAK;;;;;IAwET,mBAAc,GAAG,KAAK,CAAC;IACvB,mBAAc,GAAG,KAAK,CAAC;gBArEW,IAAI;mBAKD,SAAS;;gBAU9B,KAAK;qBAKA,KAAK;qBAKd,IAAI;4BAKG,KAAK;8BAKH,IAAI;sBAKH,IAAI;mBAKP,IAAI;oBA0BH,KAAK;;EAEjC,iBAAiB;IAChB,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC7C,0BAA0B,CAC1B,CAAC;IACF,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC7C,0BAA0B,CAC1B,CAAC;GACF;EAED,MAAM;;IACL,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACf,OAAO;KACP;IAED,MAAM,aAAa,GAAGA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAAC;IAC7C,MAAM,WAAW,GAAGA,kBAAM,IAAI,EAAC,SAAS,GAAG,CAAC;IAC5C,MAAM,aAAa,GAAGA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAAC;IAE7C,QACCA,QAACC,UAAI,IAAC,KAAK,EAAC,SAAS,IACpBD,wBACC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,MAAM,CAAC,EACjD,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,UAAU,EAAE,IAAI,CAAC,UAAU,IAE3BA,+BAAmB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACxD,CAAC,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,KAAI,IAAI,CAAC,cAAc,MAC3CA,4BACC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,MAAM,CAAC,IAE/C,IAAI,CAAC,cAAc;QACjB,aAAa;QACb,IAAI,CAAC,MAAM,CACE,CACjB,EACDA,0BACC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,aAAa,EAAE,CAAC,IAAI,CAAC,cAAc,EACnC,UAAU,EAAE,CAAC,IAAI,CAAC,cAAc,IAAI,EAAC,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,CAAA,EACxD,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,WAAW,CACE,EACd,IAAI,CAAC,cAAc,KACnBA,gCAAiB,aAAa,CAAkB,CAChD,CACkB,CACR,CACP,EACN;GACF;EAEO,cAAc,CAAC,EAAc;IACpC,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;MAC7B,OAAO;KACP;IAED,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;GAC3B;EAEM,KAAK,CAAC,MAAc,EAAE,EAAe;IAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAE3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IAErB,UAAU,CAAC;MACV,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;MAEtB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACzB,EAAE,GAAG,CAAC,CAAC;GACR;EAGD,gBAAgB;IACf,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;GACpB;;;;;;","names":["h","Host"],"sources":["src/components/organisms/modal/modal.component.tsx"],"sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State\n} from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal',\n\tshadow: true,\n})\nexport class Modal {\n\t/**\n\t * The size of the modal container\n\t */\n\t@Prop() size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n\t/**\n\t * The variant of the modal body\n\t */\n\t@Prop() variant: 'default' | 'table-flush' = 'default';\n\n\t/**\n\t * The Header of the modal\n\t */\n\t@Prop() header?: string;\n\n\t/**\n\t * Wether to show the modal or not\n\t */\n\t@Prop() show: boolean = false;\n\n\t/**\n\t * Wether to apply blur to the backdrop\n\t */\n\t@Prop() applyBlur: boolean = false;\n\n\t/**\n\t * Wether to show the close button in the header\n\t */\n\t@Prop() showClose = true;\n\n\t/**\n\t * Wether to show the footer on mobile\n\t */\n\t@Prop() showMobileFooter = false;\n\n\t/**\n\t * Wether to hide the modal when the backdrop is clicked\n\t */\n\t@Prop() backdropClickClose = true;\n\n\t/**\n\t * Wether we should scroll lock the body\n\t */\n\t@Prop() scrollLock: boolean = true;\n\n\t/**\n\t * Wether the body should have padding\n\t */\n\t@Prop() padding: boolean = true;\n\n\t/**\n\t * Close click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tcloseClicked: EventEmitter<MouseEvent>;\n\n\t/**\n\t * Closed event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclosed: EventEmitter<string>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tprivate _hasFooterSlot = false;\n\tprivate _hasHeaderSlot = false;\n\n\t@State() private _closing = false;\n\n\tcomponentWillLoad() {\n\t\tthis._hasFooterSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"footer\"]'\n\t\t);\n\t\tthis._hasHeaderSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"header\"]'\n\t\t);\n\t}\n\n\trender() {\n\t\tif (!this.show) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst headerContent = <slot name=\"header\" />;\n\t\tconst bodyContent = <slot name=\"content\" />;\n\t\tconst footerContent = <slot name=\"footer\" />;\n\n\t\treturn (\n\t\t\t<Host class=\"p-modal\">\n\t\t\t\t<p-backdrop\n\t\t\t\t\tapplyBlur={this.applyBlur}\n\t\t\t\t\tonClicked={(ev) => this._backdropClick(ev.detail)}\n\t\t\t\t\tclosing={this._closing}\n\t\t\t\t\tscrollLock={this.scrollLock}\n\t\t\t\t>\n\t\t\t\t\t<p-modal-container size={this.size} closing={this._closing}>\n\t\t\t\t\t\t{(this.header?.length || this._hasHeaderSlot) && (\n\t\t\t\t\t\t\t<p-modal-header\n\t\t\t\t\t\t\t\tshowClose={this.showClose}\n\t\t\t\t\t\t\t\tonClose={(ev) => this.close('button', ev.detail)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this._hasHeaderSlot\n\t\t\t\t\t\t\t\t\t? headerContent\n\t\t\t\t\t\t\t\t\t: this.header}\n\t\t\t\t\t\t\t</p-modal-header>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<p-modal-body\n\t\t\t\t\t\t\tvariant={this.variant}\n\t\t\t\t\t\t\troundedBottom={!this._hasFooterSlot}\n\t\t\t\t\t\t\troundedTop={!this._hasHeaderSlot && !this.header?.length}\n\t\t\t\t\t\t\tpadding={this.padding}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{bodyContent}\n\t\t\t\t\t\t</p-modal-body>\n\t\t\t\t\t\t{this._hasFooterSlot && (\n\t\t\t\t\t\t\t<p-modal-footer>{footerContent}</p-modal-footer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</p-modal-container>\n\t\t\t\t</p-backdrop>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _backdropClick(ev: MouseEvent) {\n\t\tif (!this.backdropClickClose) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.close('backdrop', ev);\n\t}\n\n\tpublic close(reason: string, ev?: MouseEvent) {\n\t\tthis.closeClicked.emit(ev);\n\n\t\tthis._closing = true;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.show = false;\n\t\t\tthis._closing = false;\n\n\t\t\tthis.closed.emit(reason);\n\t\t}, 550);\n\t}\n\n\t@Listen('closeModal', { target: 'window' })\n\thandleCloseModal() {\n\t\tthis.close('event');\n\t}\n}\n"],"version":3}
+{"file":"p-modal.entry.cjs.js","mappings":";;;;;;MAgBa,KAAK;;;;;oBAIyB,IAAI;uBAKD,SAAS;;oBAU9B,KAAK;yBAKA,KAAK;yBAKd,IAAI;gCAKG,KAAK;kCAKH,IAAI;0BAKH,IAAI;uBAKP,IAAI;wBA0BH,KAAK;;;;;IAlBjC,YAAY,CAA2B;;;;IAQvC,MAAM,CAAuB;;IAOrB,cAAc,GAAG,KAAK,CAAC;IACvB,cAAc,GAAG,KAAK,CAAC;IAI/B,iBAAiB;QAChB,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC7C,0BAA0B,CAC1B,CAAC;QACF,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC7C,0BAA0B,CAC1B,CAAC;KACF;IAED,MAAM;QACL,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACf,OAAO;SACP;QAED,MAAM,aAAa,GAAGA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAAC;QAC7C,MAAM,WAAW,GAAGA,kBAAM,IAAI,EAAC,SAAS,GAAG,CAAC;QAC5C,MAAM,aAAa,GAAGA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAAC;QAE7C,QACCA,QAACC,UAAI,IAAC,KAAK,EAAC,SAAS,IACpBD,wBACC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,MAAM,CAAC,EACjD,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,UAAU,EAAE,IAAI,CAAC,UAAU,IAE3BA,+BAAmB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACxD,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,IAAI,IAAI,CAAC,cAAc,MAC3CA,4BACC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,MAAM,CAAC,IAE/C,IAAI,CAAC,cAAc;cACjB,aAAa;cACb,IAAI,CAAC,MAAM,CACE,CACjB,EACDA,0BACC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,aAAa,EAAE,CAAC,IAAI,CAAC,cAAc,EACnC,UAAU,EAAE,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,EACxD,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,WAAW,CACE,EACd,IAAI,CAAC,cAAc,KACnBA,gCAAiB,aAAa,CAAkB,CAChD,CACkB,CACR,CACP,EACN;KACF;IAEO,cAAc,CAAC,EAAc;QACpC,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;YAC7B,OAAO;SACP;QAED,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;KAC3B;IAEM,KAAK,CAAC,MAAc,EAAE,EAAe;QAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAE3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QAErB,UAAU,CAAC;YACV,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YAEtB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACzB,EAAE,GAAG,CAAC,CAAC;KACR;IAGD,gBAAgB;QACf,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;KACpB;;;;;","names":["h","Host"],"sources":["src/components/organisms/modal/modal.component.tsx"],"sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State\n} from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal',\n\tshadow: true,\n})\nexport class Modal {\n\t/**\n\t * The size of the modal container\n\t */\n\t@Prop() size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n\t/**\n\t * The variant of the modal body\n\t */\n\t@Prop() variant: 'default' | 'table-flush' = 'default';\n\n\t/**\n\t * The Header of the modal\n\t */\n\t@Prop() header?: string;\n\n\t/**\n\t * Wether to show the modal or not\n\t */\n\t@Prop() show: boolean = false;\n\n\t/**\n\t * Wether to apply blur to the backdrop\n\t */\n\t@Prop() applyBlur: boolean = false;\n\n\t/**\n\t * Wether to show the close button in the header\n\t */\n\t@Prop() showClose = true;\n\n\t/**\n\t * Wether to show the footer on mobile\n\t */\n\t@Prop() showMobileFooter = false;\n\n\t/**\n\t * Wether to hide the modal when the backdrop is clicked\n\t */\n\t@Prop() backdropClickClose = true;\n\n\t/**\n\t * Wether we should scroll lock the body\n\t */\n\t@Prop() scrollLock: boolean = true;\n\n\t/**\n\t * Wether the body should have padding\n\t */\n\t@Prop() padding: boolean = true;\n\n\t/**\n\t * Close click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tcloseClicked: EventEmitter<MouseEvent>;\n\n\t/**\n\t * Closed event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclosed: EventEmitter<string>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tprivate _hasFooterSlot = false;\n\tprivate _hasHeaderSlot = false;\n\n\t@State() private _closing = false;\n\n\tcomponentWillLoad() {\n\t\tthis._hasFooterSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"footer\"]'\n\t\t);\n\t\tthis._hasHeaderSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"header\"]'\n\t\t);\n\t}\n\n\trender() {\n\t\tif (!this.show) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst headerContent = <slot name=\"header\" />;\n\t\tconst bodyContent = <slot name=\"content\" />;\n\t\tconst footerContent = <slot name=\"footer\" />;\n\n\t\treturn (\n\t\t\t<Host class=\"p-modal\">\n\t\t\t\t<p-backdrop\n\t\t\t\t\tapplyBlur={this.applyBlur}\n\t\t\t\t\tonClicked={(ev) => this._backdropClick(ev.detail)}\n\t\t\t\t\tclosing={this._closing}\n\t\t\t\t\tscrollLock={this.scrollLock}\n\t\t\t\t>\n\t\t\t\t\t<p-modal-container size={this.size} closing={this._closing}>\n\t\t\t\t\t\t{(this.header?.length || this._hasHeaderSlot) && (\n\t\t\t\t\t\t\t<p-modal-header\n\t\t\t\t\t\t\t\tshowClose={this.showClose}\n\t\t\t\t\t\t\t\tonClose={(ev) => this.close('button', ev.detail)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this._hasHeaderSlot\n\t\t\t\t\t\t\t\t\t? headerContent\n\t\t\t\t\t\t\t\t\t: this.header}\n\t\t\t\t\t\t\t</p-modal-header>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<p-modal-body\n\t\t\t\t\t\t\tvariant={this.variant}\n\t\t\t\t\t\t\troundedBottom={!this._hasFooterSlot}\n\t\t\t\t\t\t\troundedTop={!this._hasHeaderSlot && !this.header?.length}\n\t\t\t\t\t\t\tpadding={this.padding}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{bodyContent}\n\t\t\t\t\t\t</p-modal-body>\n\t\t\t\t\t\t{this._hasFooterSlot && (\n\t\t\t\t\t\t\t<p-modal-footer>{footerContent}</p-modal-footer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</p-modal-container>\n\t\t\t\t</p-backdrop>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _backdropClick(ev: MouseEvent) {\n\t\tif (!this.backdropClickClose) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.close('backdrop', ev);\n\t}\n\n\tpublic close(reason: string, ev?: MouseEvent) {\n\t\tthis.closeClicked.emit(ev);\n\n\t\tthis._closing = true;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.show = false;\n\t\t\tthis._closing = false;\n\n\t\t\tthis.closed.emit(reason);\n\t\t}, 550);\n\t}\n\n\t@Listen('closeModal', { target: 'window' })\n\thandleCloseModal() {\n\t\tthis.close('event');\n\t}\n}\n"],"version":3}

package/dist/cjs/p-navbar.cjs.entry.js

@@ -2,68 +2,68 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-02e05522.js');
+const index = require('./index-3f9bbc0c.js');
 const index$1 = require('./index-b556e70f.js');
 require('./clsx-fc789adc.js');
 
-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}.m-0{margin:0!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}.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,1))!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 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 PNavbarStyle0 = navbarComponentCss;
 
 const sidebarAndTopbar = index$1.cva([
-  'bg-off-white-300',
-  'border-0 border-solid border-off-white-700',
-  'p-4',
+    'bg-off-white-300',
+    'border-0 border-solid border-off-white-700',
+    'p-4',
 ]);
 const sidebar = index$1.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',
+    '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',
+    variants: {
+        show: {
+            false: null,
+            true: 'show',
+        },
     },
-  },
 });
 const topbar = index$1.cva([
-  'flex w-full justify-between items-center',
-  'relative z-navbar-topbar',
-  'border-b',
-  'layout-1280:hidden',
-  'safe-topbar',
+    'flex w-full justify-between items-center',
+    'relative z-navbar-topbar',
+    'border-b',
+    'layout-1280:hidden',
+    'safe-topbar',
 ]);
 const backdrop = index$1.cva(['z-navbar-backdrop layout-1280:hidden transition-opacity'], {
-  variants: {
-    show: {
-      false: 'opacity-0 pointer-events-none',
-      true: 'opacity-100',
+    variants: {
+        show: {
+            false: 'opacity-0 pointer-events-none',
+            true: 'opacity-100',
+        },
     },
-  },
 });
 const Navbar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.menuText = 'Menu';
-    this._show = false;
-  }
-  render() {
-    return (index.h(index.Host, { class: 'p-navbar w-full max-h-screen-safe layout-1280:w-60 layout-1680:w-72' }, index.h("p-backdrop", { class: backdrop({ show: this._show }), scrollLock: this._show, onClicked: () => (this._show = false) }), index.h("div", { class: sidebar({ class: sidebarAndTopbar(), show: this._show }) }, index.h("div", { class: 'flex w-full items-center justify-between layout-1280:hidden' }, index.h("p", { class: 'm-0 text-xl font-semibold text-storm-dark' }, this.menuText), index.h("p-button", { variant: 'secondary', icon: 'negative', iconPosition: 'end', iconOnly: true, size: 'sm', onClick: () => (this._show = false) })), index.h("div", { class: 'flex w-full flex-col items-stretch' }, index.h("slot", { name: 'company' })), index.h("div", { class: 'flex w-full flex-col gap-6 overflow-y-auto' }, index.h("slot", { name: 'content' })), index.h("div", { class: 'mt-auto hidden w-full flex-col layout-1280:flex' }, index.h("slot", { name: 'user' }))), index.h("div", { class: topbar({ class: sidebarAndTopbar() }) }, index.h("p-button", { variant: 'secondary', iconOnly: true, icon: 'menu', size: 'sm', onClick: () => (this._show = true) }), index.h("slot", { name: 'topbar' }))));
-  }
-  handleCloseNavbar() {
-    this._show = false;
-  }
-  handleOpenNavbar() {
-    this._show = true;
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this._show = false;
+    }
+    render() {
+        return (index.h(index.Host, { key: 'd0fb08c272ed8209ba4b4eeb0e84db3af7f56b6c', class: 'p-navbar w-full max-h-screen-safe layout-1280:w-60 layout-1680:w-72' }, index.h("p-backdrop", { key: '03c3f5a31cdb369c0fc9e2e2758c6124f8874323', class: backdrop({ show: this._show }), scrollLock: this._show, onClicked: () => (this._show = false) }), index.h("div", { key: 'e436eb63373ce0460d04c1e6bf9d2a6d5dd77a22', class: sidebar({ class: sidebarAndTopbar(), show: this._show }) }, index.h("div", { key: '5cc267234e3f93766244c241c896004f0312e7ab', class: 'flex w-full items-center justify-between layout-1280:hidden' }, index.h("p-button", { key: 'a1cf06f679fe209a5d9fee1e3f59e4ab1e2b3628', variant: 'secondary', icon: 'menu-arrow', iconFlip: 'horizontal', iconOnly: true, size: 'sm', onClick: () => (this._show = false) })), index.h("div", { key: '3c2bc5439cfb75cc9d3134f987dc80ebd3971298', class: 'flex w-full flex-col items-stretch' }, index.h("slot", { key: '9fc8ab5a7648ee33fe8fd7aeadcc6f612b636971', name: 'company' })), index.h("div", { key: 'b7be3f50a653bb6ec6b175a0d5391555689f7b5d', class: 'flex w-full flex-col gap-6 overflow-y-auto' }, index.h("slot", { key: '941a9dea07c2270d9ccea702ed1bce4af6dda0a7', name: 'content' })), index.h("div", { key: 'd104fa1db346b0f6fcd09d55ba3d2cb474a725f2', class: 'mt-auto hidden w-full flex-col layout-1280:flex' }, index.h("slot", { key: 'a20c417a192f6ec4c5eef06fe12118270fd299ac', name: 'user' }))), index.h("div", { key: '3a1d9b69bde033789e2e420e49f8702b8a0c92bf', class: topbar({ class: sidebarAndTopbar() }) }, index.h("p-button", { key: 'bbb50411a3ce918bfbd33f1bacfc14a053f7d118', variant: 'secondary', iconOnly: true, icon: 'menu-arrow', size: 'sm', onClick: () => (this._show = true) }), index.h("slot", { key: 'a931c9bc1a090b004788693f2fea96d76d2c43bd', name: 'topbar' }))));
+    }
+    handleCloseNavbar() {
+        this._show = false;
+    }
+    handleOpenNavbar() {
+        this._show = true;
+    }
 };
-Navbar.style = navbarComponentCss;
+Navbar.style = PNavbarStyle0;
 
 exports.p_navbar = Navbar;
 

package/dist/cjs/p-navbar.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"p-navbar.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,kBAAkB,GAAG,m4GAAm4G;;ACG95G,MAAM,gBAAgB,GAAGA,WAAG,CAAC;EAC5B,kBAAkB;EAClB,4CAA4C;EAC5C,KAAK;CACL,CAAC,CAAC;AAEH,MAAM,OAAO,GAAGA,WAAG,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,GAAGA,WAAG,CAAC;EAClB,0CAA0C;EAC1C,0BAA0B;EAC1B,UAAU;EACV,oBAAoB;EACpB,aAAa;CACb,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAGA,WAAG,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;;;oBAIC,MAAM;iBAEA,KAAK;;EAE9B,MAAM;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAC,qEAAqE,IAChFD,wBACC,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,EACdA,iBAAK,KAAK,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,IACnEA,iBAAK,KAAK,EAAC,6DAA6D,IACvEA,eAAG,KAAK,EAAC,2CAA2C,IAClD,IAAI,CAAC,QAAQ,CACX,EAEJA,sBACC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,UAAU,EACf,YAAY,EAAC,KAAK,EAClB,QAAQ,EAAE,IAAI,EACd,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,GACxB,CACP,EACNA,iBAAK,KAAK,EAAC,oCAAoC,IAC9CA,kBAAM,IAAI,EAAC,SAAS,GAAG,CAClB,EACNA,iBAAK,KAAK,EAAC,4CAA4C,IACtDA,kBAAM,IAAI,EAAC,SAAS,GAAG,CAClB,EAENA,iBAAK,KAAK,EAAC,iDAAiD,IAC3DA,kBAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACD,EACNA,iBAAK,KAAK,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE,CAAC,IAChDA,sBACC,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,IAAI,EACd,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GACvB,EAEZA,kBAAM,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":["cva","h","Host"],"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, Prop, 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/**\n\t * The text to display for the menu button & sidebar title\n\t */\n\t@Prop() menuText = 'Menu';\n\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 class='m-0 text-xl 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\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'\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}
+{"file":"p-navbar.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,kBAAkB,GAAG,ypGAAypG,CAAC;AACrrG,sBAAe,kBAAkB;;ACEjC,MAAM,gBAAgB,GAAGA,WAAG,CAAC;IAC5B,kBAAkB;IAClB,4CAA4C;IAC5C,KAAK;CACL,CAAC,CAAC;AAEH,MAAM,OAAO,GAAGA,WAAG,CAClB;IACC,eAAe;IAEf,2CAA2C;IAC3C,wBAAwB;IACxB,gFAAgF;IAChF,OAAO;IAEP,gBAAgB;IAChB,uBAAuB;IACvB,2DAA2D;IAE3D,UAAU;IAEV,cAAc;CACd,EACD;IACC,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,MAAM;SACZ;KACD;CACD,CACD,CAAC;AAEF,MAAM,MAAM,GAAGA,WAAG,CAAC;IAClB,0CAA0C;IAC1C,0BAA0B;IAC1B,UAAU;IACV,oBAAoB;IACpB,aAAa;CACb,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAGA,WAAG,CACnB,CAAC,yDAAyD,CAAC,EAC3D;IACC,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,KAAK,EAAE,+BAA+B;YACtC,IAAI,EAAE,aAAa;SACnB;KACD;CACD,CACD,CAAC;MAOW,MAAM;;;qBACO,KAAK;;IAE9B,MAAM;QACL,QACCC,QAACC,UAAI,qDAAC,KAAK,EAAC,qEAAqE,IAChFD,yEACC,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,EACdA,kEAAK,KAAK,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,IACnEA,kEAAK,KAAK,EAAC,6DAA6D,IACvEA,uEACC,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,EACNA,kEAAK,KAAK,EAAC,oCAAoC,IAC9CA,mEAAM,IAAI,EAAC,SAAS,GAAG,CAClB,EACNA,kEAAK,KAAK,EAAC,4CAA4C,IACtDA,mEAAM,IAAI,EAAC,SAAS,GAAG,CAClB,EAENA,kEAAK,KAAK,EAAC,iDAAiD,IAC3DA,mEAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACD,EACNA,kEAAK,KAAK,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE,CAAC,IAChDA,uEACC,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,EAEZA,mEAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,CACA,EACN;KACF;IAGD,iBAAiB;QAChB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;KACnB;IAGD,gBAAgB;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;KAClB;;;;;;","names":["cva","h","Host"],"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}

package/dist/cjs/p-navigation-item.cjs.entry.js

@@ -2,59 +2,64 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-02e05522.js');
+const index = require('./index-3f9bbc0c.js');
 const index$1 = require('./index-b556e70f.js');
+const cn = require('./cn-b70f9965.js');
 require('./clsx-fc789adc.js');
 
-const navigationItemComponentCss = "*{box-sizing:border-box}.static{position:static!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.aspect-branding{aspect-ratio:23/24!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-\\[inherit\\]{width:inherit!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.rounded-full{border-radius:9999px!important}.rounded-lg{border-radius:.5rem!important}.bg-off-white-600{--tw-bg-opacity:1!important;background-color:rgb(236 234 229/var(--tw-bg-opacity,1))!important}.bg-supportive-lilac{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.pl-1{padding-left:.25rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-medium{font-weight:500!important}.font-semibold{font-weight:600!important}.text-black-teal-400{--tw-text-opacity:1!important;color:rgb(53 85 80/var(--tw-text-opacity,1))!important}.text-black-teal-500{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.hover\\:bg-off-white:hover{--tw-bg-opacity:1!important;background-color:rgb(243 241 237/var(--tw-bg-opacity,1))!important}.hover\\:text-black-teal-500:hover{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}";
+const navigationItemComponentCss = "*{box-sizing:border-box}.static{position:static!important}.ml-auto{margin-left:auto!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.aspect-branding{aspect-ratio:23/24!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-\\[inherit\\]{width:inherit!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.rounded-full{border-radius:9999px!important}.rounded-lg{border-radius:.5rem!important}.bg-off-white-600{--tw-bg-opacity:1!important;background-color:rgb(236 234 229/var(--tw-bg-opacity,1))!important}.bg-supportive-lilac{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.pl-1{padding-left:.25rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-medium{font-weight:500!important}.font-semibold{font-weight:600!important}.text-black-teal-400{--tw-text-opacity:1!important;color:rgb(53 85 80/var(--tw-text-opacity,1))!important}.text-black-teal-500{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.hover\\:bg-off-white:hover{--tw-bg-opacity:1!important;background-color:rgb(243 241 237/var(--tw-bg-opacity,1))!important}.hover\\:text-black-teal-500:hover{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}";
+const PNavigationItemStyle0 = navigationItemComponentCss;
 
 const navigationItem = index$1.cva([
-  'h-8 w-[inherit]',
-  'flex items-center gap-2',
-  'text-black-teal-400 hover:text-black-teal-500',
-  'rounded-lg',
-  'py-1 px-2',
-  'text-sm font-medium',
-  'cursor-pointer',
+    'h-8 w-[inherit]',
+    'flex items-center gap-2',
+    'text-black-teal-400 hover:text-black-teal-500',
+    'rounded-lg',
+    'py-1 px-2',
+    'text-sm font-medium',
+    'cursor-pointer',
 ], {
-  variants: {
-    active: {
-      false: ['hover:bg-off-white'],
-      true: ['bg-off-white-600 text-black-teal-500 font-semibold'],
+    variants: {
+        active: {
+            false: ['hover:bg-off-white'],
+            true: ['bg-off-white-600 text-black-teal-500 font-semibold'],
+        },
+        icon: {
+            false: false,
+            true: ['pl-1'],
+        },
     },
-    icon: {
-      false: false,
-      true: ['pl-1'],
-    },
-  },
 });
 const navigationItemIconContainer = index$1.cva(['flex h-6 aspect-branding items-center justify-center rounded-full'], {
-  variants: {
-    active: {
-      false: false,
-      true: ['bg-supportive-lilac'],
+    variants: {
+        active: {
+            false: false,
+            true: ['bg-supportive-lilac'],
+        },
     },
-  },
 });
 const NavigationItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.icon = undefined;
-    this.active = false;
-    this.as = 'a';
-    this.counter = undefined;
-    this.href = undefined;
-    this.target = undefined;
-  }
-  render() {
-    const TagType = this.as;
-    return (index.h(index.Host, { class: 'p-navigation-item inline-block' }, index.h(TagType, { class: navigationItem({
-        active: this.active,
-        icon: !!this.icon,
-      }), href: this.href, target: this.target }, index.h("div", { class: navigationItemIconContainer({ active: this.active }) }, index.h("p-icon", { variant: this.icon })), index.h("span", { class: this.counter && 'has-counter' }, index.h("slot", null)), !!this.counter && this.counter !== '0' && (index.h("p-badge", null, this.counter)))));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.icon = undefined;
+        this.active = false;
+        this.loading = false;
+        this.as = 'a';
+        this.counter = undefined;
+        this.href = undefined;
+        this.target = undefined;
+        this.class = undefined;
+    }
+    render() {
+        const TagType = this.as;
+        const active = this.active || this.class?.includes('active');
+        return (index.h(index.Host, { key: 'd87d8e76973078637e8c2d184b495d630f4fd556', class: cn.cn('p-navigation-item inline-block', this.class) }, index.h(TagType, { key: 'db37312225ef973cb75c71b0b0b918ed2f8799c3', class: navigationItem({
+                icon: !!this.icon,
+                active,
+            }), href: this.href, target: this.target }, index.h("div", { key: '5f56c4395729260e25e6a71da5ac716b09193bd5', class: navigationItemIconContainer({ active }) }, index.h("p-icon", { key: '0cc4e9b0f0cdf1ad574ef8ba5b8b80f3ce376d3f', variant: this.icon })), index.h("span", { key: 'a52984e8227ec3af005d1b240944ff85ba58a37e', class: this.counter && 'has-counter' }, index.h("slot", { key: 'eaa1a3e88f0d7517fc383d96fae3194522e4efb1' })), !!this.counter && this.counter !== '0' && (index.h("p-badge", { key: 'eb7b69d6235d7f1c72ca1045255d70764a9b179d' }, this.counter)), !!this.loading && index.h("p-loader", { key: '081c5f8b49dfb3a80429815de87f717cd70e39ae', class: 'ml-auto' }))));
+    }
 };
-NavigationItem.style = navigationItemComponentCss;
+NavigationItem.style = PNavigationItemStyle0;
 
 exports.p_navigation_item = NavigationItem;