@paperless/core 1.17.4 → 1.18.0

package/dist/components/counter.component.js.map

@@ -1 +1 @@
-{"file":"counter.component.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,gyEAAgyE;;MCO/yE,OAAO;;;;;mBAIiD,MAAM;gBAKpC,SAAS;;EAE5C,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAE,qBAAqB,IAAI,CAAC,OAAO,SAAS,IAAI,CAAC,IAAI,EAAE,IAC9D,eAAQ,CACL,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/counter/counter.component.scss?tag=p-counter&encapsulation=shadow","src/components/atoms/counter/counter.component.tsx"],"sourcesContent":[":host {\n    @apply h-4 px-2 bg-indigo rounded-xlarge;\n    @apply text-xs leading-3 text-white font-bold uppercase;\n    @apply flex justify-center items-center;\n}\n\n:host(.variant-positive),\n:host(.variant-unbiased),\n:host(.variant-negative) {\n    @apply rounded px-1 min-w-[1rem];\n}\n\n:host(.variant-positive) {\n    @apply bg-positive-light text-positive-dark;\n}\n\n:host(.variant-unbiased) {\n    @apply bg-unbiased-light text-unbiased-dark;\n}\n\n:host(.variant-negative) {\n    @apply bg-negative-light text-negative-dark;\n}\n\n:host(.size-mini) {\n    @apply w-2 h-2 rounded-round p-0 min-w-0;\n\n    slot {\n        display: none;\n    }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-counter',\n    styleUrl: 'counter.component.scss',\n    shadow: true,\n})\nexport class Counter {\n    /**\n     * The variant of the counter\n     */\n    @Prop() variant: 'info' | 'negative' | 'positive' | 'unbiased' = 'info';\n\n    /**\n     * The size of the counter\n     */\n    @Prop() size: 'default' | 'mini' = 'default';\n\n    render() {\n        return (\n            <Host class={`p-counter variant-${this.variant} size-${this.size}`}>\n                <slot />\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"counter.component.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,gyEAAgyE;;MCO/yE,OAAO;;;;;mBAI8C,MAAM;gBAKpC,SAAS;;EAE5C,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,qBAAqB,IAAI,CAAC,OAAO,SAAS,IAAI,CAAC,IAAI,EAAE,IACjE,eAAQ,CACF,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/counter/counter.component.scss?tag=p-counter&encapsulation=shadow","src/components/atoms/counter/counter.component.tsx"],"sourcesContent":[":host {\n\t@apply h-4 px-2 bg-indigo rounded-xlarge;\n\t@apply text-xs leading-3 text-white font-bold uppercase;\n\t@apply flex justify-center items-center;\n}\n\n:host(.variant-positive),\n:host(.variant-unbiased),\n:host(.variant-negative) {\n\t@apply rounded px-1 min-w-[1rem];\n}\n\n:host(.variant-positive) {\n\t@apply bg-positive-light text-positive-dark;\n}\n\n:host(.variant-unbiased) {\n\t@apply bg-unbiased-light text-unbiased-dark;\n}\n\n:host(.variant-negative) {\n\t@apply bg-negative-light text-negative-dark;\n}\n\n:host(.size-mini) {\n\t@apply w-2 h-2 rounded-round p-0 min-w-0;\n\n\tslot {\n\t\tdisplay: none;\n\t}\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-counter',\n\tstyleUrl: 'counter.component.scss',\n\tshadow: true,\n})\nexport class Counter {\n\t/**\n\t * The variant of the counter\n\t */\n\t@Prop() variant: 'info' | 'negative' | 'positive' | 'unbiased' = 'info';\n\n\t/**\n\t * The size of the counter\n\t */\n\t@Prop() size: 'default' | 'mini' = 'default';\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`p-counter variant-${this.variant} size-${this.size}`}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/divider.component.js.map

@@ -1 +1 @@
-{"file":"divider.component.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,y4CAAy4C;;MCOx5C,OAAO;;;;;mBAI8C,YAAY;;EAO1E,MAAM;;IACF,MAAM,UAAU,GAAG,CAAC,EAAC,MAAA,IAAI,CAAC,GAAG,CAAC,SAAS,0CAAE,MAAM,CAAA,CAAC;IAChD,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,WAAW,IACnB,WAAK,KAAK,EAAC,SAAS,IAChB,WACI,KAAK,EAAE,qBACH,UAAU,IAAI,MAClB,oDAAoD,IAEpD,eAAQ,CACN,CACJ,CACH,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/divider/divider.component.scss?tag=p-divider&encapsulation=shadow","src/components/atoms/divider/divider.component.tsx"],"sourcesContent":[":host {\n    @apply my-2 block w-full text-mystic-medium;\n\n    .content {\n        @apply flex w-full items-center;\n\n        &::before,\n        &::after {\n            content: '';\n            @apply h-px flex-1 bg-current;\n        }\n    }\n}\n\n:host([variant='vertical']) {\n    @apply mx-2 my-0 block h-full w-auto;\n\n    .content {\n        @apply h-full w-auto flex-col;\n\n        &::before,\n        &::after {\n            content: '';\n            @apply w-px flex-1 bg-current;\n        }\n    }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-divider',\n    styleUrl: 'divider.component.scss',\n    shadow: true,\n})\nexport class Divider {\n    /**\n     * The variant of the modal body\n     */\n    @Prop({ reflect: true }) variant: 'horizontal' | 'vertical' = 'horizontal';\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    render() {\n        const hasSlotted = !!this._el.innerHTML?.length;\n        return (\n            <Host class=\"p-divider\">\n                <div class=\"content\">\n                    <div\n                        class={`flex items-center ${\n                            hasSlotted && 'px-2'\n                        } text-xxs font-semibold uppercase text-storm-light`}\n                    >\n                        <slot />\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"divider.component.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,y4CAAy4C;;MCOx5C,OAAO;;;;;mBAI2C,YAAY;;EAO1E,MAAM;;IACL,MAAM,UAAU,GAAG,CAAC,EAAC,MAAA,IAAI,CAAC,GAAG,CAAC,SAAS,0CAAE,MAAM,CAAA,CAAC;IAChD,QACC,EAAC,IAAI,IAAC,KAAK,EAAC,WAAW,IACtB,WAAK,KAAK,EAAC,SAAS,IACnB,WACC,KAAK,EAAE,qBACN,UAAU,IAAI,MACf,oDAAoD,IAEpD,eAAQ,CACH,CACD,CACA,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/divider/divider.component.scss?tag=p-divider&encapsulation=shadow","src/components/atoms/divider/divider.component.tsx"],"sourcesContent":[":host {\n\t@apply my-2 block w-full text-mystic-medium;\n\n\t.content {\n\t\t@apply flex w-full items-center;\n\n\t\t&::before,\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\t@apply h-px flex-1 bg-current;\n\t\t}\n\t}\n}\n\n:host([variant='vertical']) {\n\t@apply mx-2 my-0 block h-full w-auto;\n\n\t.content {\n\t\t@apply h-full w-auto flex-col;\n\n\t\t&::before,\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\t@apply w-px flex-1 bg-current;\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-divider',\n\tstyleUrl: 'divider.component.scss',\n\tshadow: true,\n})\nexport class Divider {\n\t/**\n\t * The variant of the modal body\n\t */\n\t@Prop({ reflect: true }) variant: 'horizontal' | 'vertical' = 'horizontal';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\trender() {\n\t\tconst hasSlotted = !!this._el.innerHTML?.length;\n\t\treturn (\n\t\t\t<Host class=\"p-divider\">\n\t\t\t\t<div class=\"content\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass={`flex items-center ${\n\t\t\t\t\t\t\thasSlotted && 'px-2'\n\t\t\t\t\t\t} text-xxs font-semibold uppercase text-storm-light`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/drawer-body.component.js.map

@@ -1 +1 @@
-{"file":"drawer-body.component.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,ocAAoc;;MCOtd,SAAS;;;;;mBAIqB,SAAS;;EAEhD,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAE,yBAAyB,IAAI,CAAC,OAAO,EAAE,IAChD,eAAQ,CACL,EACT;GACL;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/drawer-body/drawer-body.component.scss?tag=p-drawer-body&encapsulation=shadow","src/components/atoms/drawer-body/drawer-body.component.tsx"],"sourcesContent":[":host {\n    @apply flex flex-1 flex-col;\n    @apply min-h-full w-full px-4 py-6;\n    @apply bg-mystic;\n\n    padding-bottom: env(safe-area-inset-bottom, 0);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-drawer-body',\n    styleUrl: 'drawer-body.component.scss',\n    shadow: true,\n})\nexport class ModalBody {\n    /**\n     * The variant of the modal body\n     */\n    @Prop() variant: 'default' | 'table' = 'default';\n\n    render() {\n        return (\n            <Host class={`p-drawer-body variant-${this.variant}`}>\n                <slot />\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"drawer-body.component.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,ocAAoc;;MCOtd,SAAS;;;;;mBAIkB,SAAS;;EAEhD,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,yBAAyB,IAAI,CAAC,OAAO,EAAE,IACnD,eAAQ,CACF,EACN;GACF;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/drawer-body/drawer-body.component.scss?tag=p-drawer-body&encapsulation=shadow","src/components/atoms/drawer-body/drawer-body.component.tsx"],"sourcesContent":[":host {\n\t@apply flex flex-1 flex-col;\n\t@apply min-h-full w-full px-4 py-6;\n\t@apply bg-mystic;\n\n\tpadding-bottom: env(safe-area-inset-bottom, 0);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-drawer-body',\n\tstyleUrl: 'drawer-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' = 'default';\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`p-drawer-body variant-${this.variant}`}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/drawer-container.component.js.map

@@ -1 +1 @@
-{"file":"drawer-container.component.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,q3CAAq3C;;MCY54C,cAAc;;;;mBAII,KAAK;;EAEhC,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAE,sBAAsB,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE,IAC1D,eAAQ,CACL,EACT;GACL;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/drawer-container/drawer-container.component.scss?tag=p-drawer-container","src/components/atoms/drawer-container/drawer-container.component.tsx"],"sourcesContent":["p-drawer-container {\n    @apply z-drawer flex flex-col;\n    // tablet:w-[22.5rem]\n    @apply w-full tablet:w-[22.5rem];\n    @apply bg-white;\n    @apply animate-slide-in-right;\n    @apply min-h-screen;\n\n    @apply shadow-4 #{!important};\n\n    &.closing {\n        @apply animate-slide-out-right;\n    }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n// $drawer-xs: 20rem;\n// $drawer-sm: 33.5rem;\n// $drawer-md: 38rem;\n// $drawer-lg: 47.5rem;\n// $drawer-xl: 57.5rem;\n\n@Component({\n    tag: 'p-drawer-container',\n    styleUrl: 'drawer-container.component.scss',\n})\nexport class ModalContainer {\n    /**\n     * Wether the container is closing\n     */\n    @Prop() closing: boolean = false;\n\n    render() {\n        return (\n            <Host class={`p-drawer-container ${this.closing && 'closing'}`}>\n                <slot />\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"drawer-container.component.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,q3CAAq3C;;MCY54C,cAAc;;;;mBAIC,KAAK;;EAEhC,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,sBAAsB,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE,IAC7D,eAAQ,CACF,EACN;GACF;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/drawer-container/drawer-container.component.scss?tag=p-drawer-container","src/components/atoms/drawer-container/drawer-container.component.tsx"],"sourcesContent":["p-drawer-container {\n\t@apply z-drawer flex flex-col;\n\t// tablet:w-[22.5rem]\n\t@apply w-full tablet:w-[22.5rem];\n\t@apply bg-white;\n\t@apply animate-slide-in-right;\n\t@apply min-h-screen;\n\n\t@apply shadow-4 #{!important};\n\n\t&.closing {\n\t\t@apply animate-slide-out-right;\n\t}\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n// $drawer-xs: 20rem;\n// $drawer-sm: 33.5rem;\n// $drawer-md: 38rem;\n// $drawer-lg: 47.5rem;\n// $drawer-xl: 57.5rem;\n\n@Component({\n\ttag: 'p-drawer-container',\n\tstyleUrl: 'drawer-container.component.scss',\n})\nexport class ModalContainer {\n\t/**\n\t * Wether the container is closing\n\t */\n\t@Prop() closing: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`p-drawer-container ${this.closing && 'closing'}`}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/drawer-header.component.js.map

@@ -1 +1 @@
-{"file":"drawer-header.component.js","mappings":";;;;;AAAA,MAAM,wBAAwB,GAAG,gvCAAgvC;;MCOpwC,WAAW;;;;;;qBAIA,IAAI;;EASxB,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB,IACxB,IAAI,CAAC,SAAS,KACX,gBACI,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,EAChC,IAAI,EAAC,OAAO,GACJ,CACf,EAED,eAAQ,CACL,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/drawer-header/drawer-header.component.scss?tag=p-drawer-header&encapsulation=shadow","src/components/atoms/drawer-header/drawer-header.component.tsx"],"sourcesContent":[":host {\n    @apply bg-white;\n    @apply sticky top-0 flex justify-center items-center;\n    @apply p-4 z-drawer-header;\n\n    padding-top: calc(env(safe-area-inset-top, 0) + 1rem);\n\n    @apply text-storm-dark text-xl font-semibold;\n\n    @apply border-0 border-b border-b-mystic-dark border-solid #{!important};\n\n    p-button {\n        @apply absolute left-4;\n\n        top: calc(env(safe-area-inset-top, 0) + 1rem);\n    }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-drawer-header',\n    styleUrl: 'drawer-header.component.scss',\n    shadow: true,\n})\nexport class ModalHeader {\n    /**\n     * Wether to show the close button on mobile\n     */\n    @Prop() showClose = true;\n\n    /**\n     * Close click event\n     */\n    @Event({\n        bubbles: false\n    }) close: EventEmitter<MouseEvent>;\n\n    render() {\n        return (\n            <Host class=\"p-drawer-header\">\n                {this.showClose && (\n                    <p-button\n                        variant=\"secondary\"\n                        icon=\"negative\"\n                        iconOnly={true}\n                        onClick={() => this.close.emit()}\n                        size=\"small\"\n                    ></p-button>\n                )}\n\n                <slot />\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"drawer-header.component.js","mappings":";;;;;AAAA,MAAM,wBAAwB,GAAG,gvCAAgvC;;MCOpwC,WAAW;;;;;;qBAIH,IAAI;;EAUxB,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB,IAC3B,IAAI,CAAC,SAAS,KACd,gBACC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,EAChC,IAAI,EAAC,OAAO,GACD,CACZ,EAED,eAAQ,CACF,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/drawer-header/drawer-header.component.scss?tag=p-drawer-header&encapsulation=shadow","src/components/atoms/drawer-header/drawer-header.component.tsx"],"sourcesContent":[":host {\n\t@apply bg-white;\n\t@apply sticky top-0 flex justify-center items-center;\n\t@apply p-4 z-drawer-header;\n\n\tpadding-top: calc(env(safe-area-inset-top, 0) + 1rem);\n\n\t@apply text-storm-dark text-xl font-semibold;\n\n\t@apply border-0 border-b border-b-mystic-dark border-solid #{!important};\n\n\tp-button {\n\t\t@apply absolute left-4;\n\n\t\ttop: calc(env(safe-area-inset-top, 0) + 1rem);\n\t}\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-drawer-header',\n\tstyleUrl: 'drawer-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-drawer-header\">\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={() => this.close.emit()}\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t></p-button>\n\t\t\t\t)}\n\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/dropdown-menu-container.component.js.map

@@ -1 +1 @@
-{"file":"dropdown-menu-container.component.js","mappings":";;AAAA,MAAM,iCAAiC,GAAG,6rDAA6rD;;MCO1tD,qBAAqB;;;;oBAIF,IAAI;qBAKH,IAAI;sBAKH,KAAK;;EAEnC,MAAM;IACF,QACI,EAAC,IAAI,IACD,KAAK,EAAE,6BACH,IAAI,CAAC,QAAQ,IAAI,WACrB,IAAI,IAAI,CAAC,SAAS,IAAI,YAAY,IAC9B,IAAI,CAAC,UAAU,IAAI,YACvB,EAAE,IAEF,WAAK,KAAK,EAAC,SAAS,IAChB,eAAQ,CACN,CACH,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/dropdown-menu-container/dropdown-menu-container.component.scss?tag=p-dropdown-menu-container","src/components/atoms/dropdown-menu-container/dropdown-menu-container.component.tsx"],"sourcesContent":["@import '../../../style/mixins';\n\np-dropdown-menu-container {\n    @apply w-auto;\n    @apply rounded-xxlarge bg-white;\n    @apply z-10 overflow-y-auto overflow-x-hidden drop-shadow-4 filter;\n\n    .content {\n        @apply w-full p-2;\n        @apply flex flex-col gap-[1px];\n    }\n\n    &.full-width {\n        @apply w-full;\n    }\n\n    &.max-width {\n        @apply max-w-[222px];\n    }\n\n    &.scrollable {\n        @apply max-h-[11.5rem];\n\n        scrollbar-width: none;\n        &::-webkit-scrollbar {\n            @apply hidden;\n        }\n\n        .content {\n            @apply h-full;\n        }\n    }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-dropdown-menu-container',\n    styleUrl: 'dropdown-menu-container.component.scss',\n    // shadow: true,\n})\nexport class DropdownMenuContainer {\n    /**\n     * Wether the container applies it's max width\n     */\n    @Prop() maxWidth: boolean = true;\n\n    /**\n     * Wether the container should all available space\n     */\n    @Prop() fullWidth: boolean = true;\n\n    /**\n     * Wether the container should be scrollable when the threshold is met.\n     */\n    @Prop() scrollable: boolean = false;\n\n    render() {\n        return (\n            <Host\n                class={`p-dropdown-menu-container ${\n                    this.maxWidth && 'max-width'\n                } ${this.fullWidth && 'full-width'} ${\n                    this.scrollable && 'scrollable'\n                }`}\n            >\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"dropdown-menu-container.component.js","mappings":";;AAAA,MAAM,iCAAiC,GAAG,6rDAA6rD;;MCO1tD,qBAAqB;;;;oBAIL,IAAI;qBAKH,IAAI;sBAKH,KAAK;;EAEnC,MAAM;IACL,QACC,EAAC,IAAI,IACJ,KAAK,EAAE,6BACN,IAAI,CAAC,QAAQ,IAAI,WAClB,IAAI,IAAI,CAAC,SAAS,IAAI,YAAY,IACjC,IAAI,CAAC,UAAU,IAAI,YACpB,EAAE,IAEF,WAAK,KAAK,EAAC,SAAS,IACnB,eAAQ,CACH,CACA,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/dropdown-menu-container/dropdown-menu-container.component.scss?tag=p-dropdown-menu-container","src/components/atoms/dropdown-menu-container/dropdown-menu-container.component.tsx"],"sourcesContent":["@import '../../../style/mixins';\n\np-dropdown-menu-container {\n\t@apply w-auto;\n\t@apply rounded-xxlarge bg-white;\n\t@apply z-10 overflow-y-auto overflow-x-hidden drop-shadow-4 filter;\n\n\t.content {\n\t\t@apply w-full p-2;\n\t\t@apply flex flex-col gap-[1px];\n\t}\n\n\t&.full-width {\n\t\t@apply w-full;\n\t}\n\n\t&.max-width {\n\t\t@apply max-w-[222px];\n\t}\n\n\t&.scrollable {\n\t\t@apply max-h-[11.5rem];\n\n\t\tscrollbar-width: none;\n\t\t&::-webkit-scrollbar {\n\t\t\t@apply hidden;\n\t\t}\n\n\t\t.content {\n\t\t\t@apply h-full;\n\t\t}\n\t}\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-dropdown-menu-container',\n\tstyleUrl: 'dropdown-menu-container.component.scss',\n\t// shadow: true,\n})\nexport class DropdownMenuContainer {\n\t/**\n\t * Wether the container applies it's max width\n\t */\n\t@Prop() maxWidth: boolean = true;\n\n\t/**\n\t * Wether the container should all available space\n\t */\n\t@Prop() fullWidth: boolean = true;\n\n\t/**\n\t * Wether the container should be scrollable when the threshold is met.\n\t */\n\t@Prop() scrollable: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-dropdown-menu-container ${\n\t\t\t\t\tthis.maxWidth && 'max-width'\n\t\t\t\t} ${this.fullWidth && 'full-width'} ${\n\t\t\t\t\tthis.scrollable && 'scrollable'\n\t\t\t\t}`}\n\t\t\t>\n\t\t\t\t<div class=\"content\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/dropdown-menu-item.component.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './icon.component.js';
 
-const dropdownMenuItemComponentCss = ".block{display:block!important}.flex{display:flex!important}.h-8{height:2rem!important}.w-full{width:100%!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.rounded{border-radius:.25rem!important}.bg-indigo-light{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity))!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}*{box-sizing:border-box}:host{--tw-text-opacity:1;align-items:center;border-radius:.25rem;color:rgb(81 83 107/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;height:2rem;line-height:1.25rem;padding-left:.5rem;padding-right:.5rem;width:100%}:host .text-container{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}:host(.hover:hover){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity));color:rgb(81 83 107/var(--tw-text-opacity))}:host(.active){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity));color:rgb(82 138 250/var(--tw-text-opacity))}.static{position:static!important}";
+const dropdownMenuItemComponentCss = ".block{display:block!important}.flex{display:flex!important}.h-4{height:1rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-4{width:1rem!important}.w-6{width:1.5rem!important}.w-\\[2\\.375rem\\]{width:2.375rem!important}.w-full{width:100%!important}.translate-x-0{--tw-translate-x:0px!important}.translate-x-0,.translate-x-3{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}.translate-x-3{--tw-translate-x:0.75rem!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}.appearance-none{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.rounded{border-radius:.25rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-indigo{--tw-border-opacity:1!important;border-color:rgb(82 138 250/var(--tw-border-opacity))!important}.border-negative{--tw-border-opacity:1!important;border-color:rgb(185 30 40/var(--tw-border-opacity))!important}.bg-indigo-light{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity))!important}.bg-mystic-dark{background-color:rgb(218 230 240/var(--tw-bg-opacity))!important}.bg-mystic-dark,.bg-white{--tw-bg-opacity:1!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.bg-center{background-position:50%!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.outline-none{outline:2px solid transparent!important;outline-offset:2px!important}.transition-transform{transition-duration:.15s!important;transition-property:transform!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}*{box-sizing:border-box}:host{--tw-text-opacity:1;align-items:center;border-radius:.25rem;color:rgb(81 83 107/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;height:2rem;line-height:1.25rem;padding-left:.5rem;padding-right:.5rem;width:100%}:host input[type=checkbox].p-input{--tw-bg-opacity:1;--tw-border-opacity:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:rgb(255 255 255/var(--tw-bg-opacity));background-position:50%;background-repeat:no-repeat;background-size:1rem;border-color:rgb(218 230 240/var(--tw-border-opacity));border-radius:.25rem;border-style:solid;border-width:1px;height:1.5rem;outline:2px solid transparent!important;outline-offset:2px!important;width:1.5rem}:host input[type=checkbox].p-input+label{margin-left:.2rem;margin-top:.05rem}:host input[type=checkbox].p-input:hover:not(:disabled):not([disabled]):not(.disabled){cursor:pointer}:host input[type=checkbox].p-input:hover:not(:disabled):not([disabled]):not(.disabled):not(:checked):not([checked]):not(.checked):not(:indeterminate):not([indeterminate]):not(.indeterminate){--tw-border-opacity:1;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.965 11.487 13.53 1.53c.435-.572 1.22-.7 1.8-.292l.108.077c.294.206.492.53.546.895.054.365-.04.737-.26 1.026L7.26 14.38a1.34 1.34 0 0 1-.642.463 1.302 1.302 0 0 1-1.575-.263L.362 9.6a1.356 1.356 0 0 1-.36-.99c.017-.37.181-.713.452-.95l.1-.088a1.302 1.302 0 0 1 1.82.093l3.592 3.82h-.001Z' fill='%23dae6f0' fill-rule='evenodd'/%3E%3C/svg%3E\");border-color:rgb(82 138 250/var(--tw-border-opacity))}:host input[type=checkbox].p-input.checked,:host input[type=checkbox].p-input.indeterminate,:host input[type=checkbox].p-input:checked,:host input[type=checkbox].p-input:indeterminate,:host input[type=checkbox].p-input[checked],:host input[type=checkbox].p-input[indeterminate]{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity));border-color:rgb(82 138 250/var(--tw-border-opacity))}:host input[type=checkbox].p-input.checked,:host input[type=checkbox].p-input:checked,:host input[type=checkbox].p-input[checked]{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.965 11.487 13.53 1.53c.435-.572 1.22-.7 1.8-.292l.108.077c.294.206.492.53.546.895.054.365-.04.737-.26 1.026L7.26 14.38a1.34 1.34 0 0 1-.642.463 1.302 1.302 0 0 1-1.575-.263L.362 9.6a1.356 1.356 0 0 1-.36-.99c.017-.37.181-.713.452-.95l.1-.088a1.302 1.302 0 0 1 1.82.093l3.592 3.82h-.001Z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E\")}:host input[type=checkbox].p-input.indeterminate,:host input[type=checkbox].p-input:indeterminate,:host input[type=checkbox].p-input[indeterminate]{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h8a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2Z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E\")}:host input[type=checkbox].p-input.disabled,:host input[type=checkbox].p-input:disabled,:host input[type=checkbox].p-input[disabled]{opacity:.4}:host input[type=checkbox].p-input.error,:host input[type=checkbox].p-input[error]{--tw-text-opacity:1;--tw-border-opacity:1!important;border-color:rgb(185 30 40/var(--tw-border-opacity))!important;color:rgb(138 15 29/var(--tw-text-opacity))}:host input[type=checkbox].p-input.error::-moz-placeholder,:host input[type=checkbox].p-input[error]::-moz-placeholder{--tw-text-opacity:1;color:rgb(255 204 211/var(--tw-text-opacity))}:host input[type=checkbox].p-input.error::placeholder,:host input[type=checkbox].p-input[error]::placeholder{--tw-text-opacity:1;color:rgb(255 204 211/var(--tw-text-opacity))}:host input[type=checkbox].p-input.error.checked,:host input[type=checkbox].p-input.error:checked,:host input[type=checkbox].p-input.error[checked],:host input[type=checkbox].p-input[error].checked,:host input[type=checkbox].p-input[error]:checked,:host input[type=checkbox].p-input[error][checked]{--tw-bg-opacity:1;background-color:rgb(185 30 40/var(--tw-bg-opacity))}:host input[type=checkbox].p-input.size-small{font-size:.75rem;height:1rem;line-height:1rem;width:1rem}:host input[type=checkbox].p-toggle{--tw-bg-opacity:1;--tw-border-opacity:1;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(218 230 240/var(--tw-border-opacity));border-radius:1.5625rem;border-style:solid;border-width:1px;display:flex;height:1.5rem;justify-content:flex-start;padding:.25rem;width:2.375rem}:host input[type=checkbox].p-toggle:after{--tw-translate-x:0px;--tw-bg-opacity:1;background-color:rgb(218 230 240/var(--tw-bg-opacity));border-radius:100%;content:\"\";display:block;height:1rem;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));transition-duration:.1s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);width:1rem}:host input[type=checkbox].p-toggle.checked,:host input[type=checkbox].p-toggle:checked,:host input[type=checkbox].p-toggle[checked]{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity));border-color:rgb(82 138 250/var(--tw-border-opacity))}:host input[type=checkbox].p-toggle.checked:after,:host input[type=checkbox].p-toggle:checked:after,:host input[type=checkbox].p-toggle[checked]:after{--tw-translate-x:0.75rem;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));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))}:host input[type=checkbox].p-toggle.disabled,:host input[type=checkbox].p-toggle:disabled,:host input[type=checkbox].p-toggle[disabled]{opacity:.4}:host input[type=checkbox].p-toggle:hover:not(:disabled):not([disabled]):not(.disabled){cursor:pointer}:host input[type=checkbox].p-toggle:hover:not(:disabled):not([disabled]):not(.disabled):not(:checked):not([checked]):not(.checked){--tw-border-opacity:1;border-color:rgb(82 138 250/var(--tw-border-opacity))}:host input[type=checkbox].p-toggle.error,:host input[type=checkbox].p-toggle[error]{--tw-text-opacity:1;--tw-border-opacity:1!important;border-color:rgb(185 30 40/var(--tw-border-opacity))!important;color:rgb(138 15 29/var(--tw-text-opacity))}:host input[type=checkbox].p-toggle.error::-moz-placeholder,:host input[type=checkbox].p-toggle[error]::-moz-placeholder{--tw-text-opacity:1;color:rgb(255 204 211/var(--tw-text-opacity))}:host input[type=checkbox].p-toggle.error::placeholder,:host input[type=checkbox].p-toggle[error]::placeholder{--tw-text-opacity:1;color:rgb(255 204 211/var(--tw-text-opacity))}:host input[type=checkbox].p-toggle.error.checked,:host input[type=checkbox].p-toggle.error:checked,:host input[type=checkbox].p-toggle.error[checked],:host input[type=checkbox].p-toggle[error].checked,:host input[type=checkbox].p-toggle[error]:checked,:host input[type=checkbox].p-toggle[error][checked]{--tw-bg-opacity:1;background-color:rgb(185 30 40/var(--tw-bg-opacity))}:host .text-container{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}:host(.hover:hover){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity));color:rgb(81 83 107/var(--tw-text-opacity))}:host(.active){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity));color:rgb(82 138 250/var(--tw-text-opacity))}.static{position:static!important}.flex-shrink-0{flex-shrink:0!important}";
 
 const DropdownMenuItem = /*@__PURE__*/ proxyCustomElement(class DropdownMenuItem extends HTMLElement {
   constructor() {
@@ -9,15 +9,17 @@ const DropdownMenuItem = /*@__PURE__*/ proxyCustomElement(class DropdownMenuItem
     this.__registerHost();
     this.__attachShadow();
     this.active = false;
+    this.variant = 'default';
     this.enableHover = true;
     this.icon = undefined;
   }
   render() {
-    return (h(Host, { class: `p-dropdown-menu-item ${this.active && 'active'} ${this.enableHover && 'hover'}` }, this.icon && h("p-icon", { variant: this.icon }), h("div", { class: "text-container" }, h("slot", null))));
+    return (h(Host, { class: `p-dropdown-menu-item ${this.active && 'active'} ${this.enableHover && 'hover'}` }, this.icon && h("p-icon", { variant: this.icon }), this.variant === 'checkbox' && (h("input", { type: "checkbox", class: "p-input size-small flex-shrink-0", checked: this.active })), h("div", { class: "text-container" }, h("slot", null))));
   }
   static get style() { return dropdownMenuItemComponentCss; }
 }, [1, "p-dropdown-menu-item", {
     "active": [4],
+    "variant": [1],
     "enableHover": [4, "enable-hover"],
     "icon": [1]
   }]);

package/dist/components/dropdown-menu-item.component.js.map

@@ -1 +1 @@
-{"file":"dropdown-menu-item.component.js","mappings":";;;AAAA,MAAM,4BAA4B,GAAG,0vCAA0vC;;MCQlxC,gBAAgB;;;;;kBAIC,KAAK;uBAKA,IAAI;;;EAOnC,MAAM;IACF,QACI,EAAC,IAAI,IACD,KAAK,EAAE,wBAAwB,IAAI,CAAC,MAAM,IAAI,QAAQ,IAClD,IAAI,CAAC,WAAW,IAAI,OACxB,EAAE,IAED,IAAI,CAAC,IAAI,IAAI,cAAQ,OAAO,EAAE,IAAI,CAAC,IAAI,GAAI,EAE5C,WAAK,KAAK,EAAC,gBAAgB,IACvB,eAAQ,CACN,CACH,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/dropdown-menu-item/dropdown-menu-item.component.scss?tag=p-dropdown-menu-item&encapsulation=shadow","src/components/atoms/dropdown-menu-item/dropdown-menu-item.component.tsx"],"sourcesContent":[":host {\n    @apply flex h-8 w-full items-center gap-2 rounded px-2;\n    @apply text-sm font-semibold text-storm;\n    @apply cursor-pointer;\n\n    .text-container {\n        @apply block w-full overflow-hidden text-ellipsis whitespace-nowrap;\n    }\n}\n\n:host(.hover:hover) {\n    @apply bg-indigo-light text-storm;\n}\n\n:host(.active) {\n    @apply bg-indigo-light text-indigo;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { IconVariant } from '../icon/icon.component';\n\n@Component({\n    tag: 'p-dropdown-menu-item',\n    styleUrl: 'dropdown-menu-item.component.scss',\n    shadow: true,\n})\nexport class DropdownMenuItem {\n    /**\n     * Wether the dropdown menu item is active\n     */\n    @Prop() active: boolean = false;\n\n    /**\n     * Wether to enable the hover state\n     */\n    @Prop() enableHover: boolean = true;\n\n    /**\n     * Icon of the navigation item\n     */\n    @Prop() icon: IconVariant;\n\n    render() {\n        return (\n            <Host\n                class={`p-dropdown-menu-item ${this.active && 'active'} ${\n                    this.enableHover && 'hover'\n                }`}\n            >\n                {this.icon && <p-icon variant={this.icon} />}\n\n                <div class=\"text-container\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"dropdown-menu-item.component.js","mappings":";;;AAAA,MAAM,4BAA4B,GAAG,m1TAAm1T;;MCQ32T,gBAAgB;;;;;kBAIF,KAAK;mBAKW,SAAS;uBAKpB,IAAI;;;EAOnC,MAAM;IACL,QACC,EAAC,IAAI,IACJ,KAAK,EAAE,wBAAwB,IAAI,CAAC,MAAM,IAAI,QAAQ,IACrD,IAAI,CAAC,WAAW,IAAI,OACrB,EAAE,IAED,IAAI,CAAC,IAAI,IAAI,cAAQ,OAAO,EAAE,IAAI,CAAC,IAAI,GAAI,EAE3C,IAAI,CAAC,OAAO,KAAK,UAAU,KAC3B,aACC,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,kCAAkC,EACxC,OAAO,EAAE,IAAI,CAAC,MAAM,GACnB,CACF,EAED,WAAK,KAAK,EAAC,gBAAgB,IAC1B,eAAQ,CACH,CACA,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/dropdown-menu-item/dropdown-menu-item.component.scss?tag=p-dropdown-menu-item&encapsulation=shadow","src/components/atoms/dropdown-menu-item/dropdown-menu-item.component.tsx"],"sourcesContent":[":host {\n\t@import '../../../style/form/checkbox';\n\n\t@apply flex h-8 w-full items-center gap-2 rounded px-2;\n\t@apply text-sm font-semibold text-storm;\n\t@apply cursor-pointer;\n\n\t.text-container {\n\t\t@apply block w-full overflow-hidden text-ellipsis whitespace-nowrap;\n\t}\n}\n\n:host(.hover:hover) {\n\t@apply bg-indigo-light text-storm;\n}\n\n:host(.active) {\n\t@apply bg-indigo-light text-indigo;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { IconVariant } from '../icon/icon.component';\n\n@Component({\n\ttag: 'p-dropdown-menu-item',\n\tstyleUrl: 'dropdown-menu-item.component.scss',\n\tshadow: true,\n})\nexport class DropdownMenuItem {\n\t/**\n\t * Wether the dropdown menu item is active\n\t */\n\t@Prop() active: boolean = false;\n\n\t/**\n\t * The variant of the item\n\t */\n\t@Prop() variant: 'default' | 'checkbox' = 'default';\n\n\t/**\n\t * Wether to enable the hover state\n\t */\n\t@Prop() enableHover: boolean = true;\n\n\t/**\n\t * Icon of the navigation item\n\t */\n\t@Prop() icon: IconVariant;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-dropdown-menu-item ${this.active && 'active'} ${\n\t\t\t\t\tthis.enableHover && 'hover'\n\t\t\t\t}`}\n\t\t\t>\n\t\t\t\t{this.icon && <p-icon variant={this.icon} />}\n\n\t\t\t\t{this.variant === 'checkbox' && (\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\tclass=\"p-input size-small flex-shrink-0\"\n\t\t\t\t\t\tchecked={this.active}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t<div class=\"text-container\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/dropdown.component.js

@@ -21,6 +21,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
     this.scrollable = false;
     this.insideClick = false;
     this.disableTriggerClick = false;
+    this.applyChevron = true;
     this.chevronPosition = 'end';
     this.chevronDirection = undefined;
   }
@@ -37,6 +38,9 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
     return (h(Host, { class: "p-dropdown" }, h("div", { class: "trigger", ref: (ref) => (this._trigger = ref), onClick: () => this._triggerClickHandler() }, h("slot", { onSlotchange: (ev) => this._checkButton(ev), name: "trigger" })), h("p-dropdown-menu-container", { role: "popover", maxWidth: !this.calculateWidth && this.applyMaxWidth, fullWidth: this.applyFullWidth && !this.applyMaxWidth, ref: (el) => this._load(el), "data-placement": this.placement, "data-strategy": this.strategy, onClick: () => this._containerClickHandler(), scrollable: this.scrollable }, h("slot", { name: "items" }))));
   }
   _checkButton({ target }) {
+    if (!this.applyChevron) {
+      return;
+    }
     const slot = target;
     const children = slot.assignedElements();
     for (let child of children) {
@@ -150,6 +154,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
     "scrollable": [4],
     "insideClick": [4, "inside-click"],
     "disableTriggerClick": [4, "disable-trigger-click"],
+    "applyChevron": [4, "apply-chevron"],
     "chevronPosition": [1, "chevron-position"],
     "chevronDirection": [1, "chevron-direction"]
   }, [[6, "click", "documentClickHandler"]], {

package/dist/components/dropdown.component.js.map

@@ -1 +1 @@
-{"file":"dropdown.component.js","mappings":"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","names":[],"sources":["src/components/molecules/dropdown/dropdown.component.scss?tag=p-dropdown&encapsulation=shadow","src/components/molecules/dropdown/dropdown.component.tsx"],"sourcesContent":[":host {\n    @apply relative block;\n\n    .trigger {\n        @apply relative block h-auto w-auto;\n    }\n\n    p-dropdown-menu-container {\n        @apply left-0 top-0 z-dropdown hidden;\n\n        &[data-show] {\n            @apply flex;\n        }\n\n        &[data-strategy='absolute'] {\n            @apply absolute;\n        }\n\n        &[data-strategy='fixed'] {\n            @apply fixed;\n        }\n    }\n}\n","import {\n    autoUpdate,\n    computePosition,\n    flip,\n    offset,\n    Placement,\n    shift,\n    Strategy,\n} from '@floating-ui/dom';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    Watch,\n} from '@stencil/core';\nimport { childOf } from '../../../utils/child-of';\n\n@Component({\n    tag: 'p-dropdown',\n    styleUrl: 'dropdown.component.scss',\n    shadow: true,\n})\nexport class Dropdown {\n    /**\n     * The content of the dropdown menu\n     */\n    @Prop({ reflect: true }) placement: Placement = 'bottom-start';\n\n    /**\n     * The strategy of the popover placement\n     */\n    @Prop() strategy: Strategy = 'absolute';\n\n    /**\n     * Wether to show the dropdown menu\n     */\n    @Prop() show: boolean = false;\n\n    /**\n     * Wether to automatically calculate the width of the menu based on the trigger\n     */\n    @Prop() calculateWidth: boolean = false;\n\n    /**\n     * Wether to apply the max width\n     */\n    @Prop() applyMaxWidth: boolean = true;\n\n    /**\n     * Wether to apply the full width\n     */\n    @Prop() applyFullWidth: boolean = true;\n\n    /**\n     * Wether the dropdown container should be scrollable when the threshold is met.\n     */\n    @Prop() scrollable: boolean = false;\n\n    /**\n     * Wether to automatically close the dropdown menu after clicking inside\n     */\n    @Prop() insideClick: boolean = false;\n\n    /**\n     * Wether to automatically close the dropdown menu after clicking inside\n     */\n    @Prop() disableTriggerClick: boolean = false;\n\n    /**\n     * Chevron position\n     */\n    @Prop() chevronPosition: 'start' | 'end' = 'end';\n\n    /**\n     * Chevron direction\n     */\n    @Prop() chevronDirection: 'up' | 'down';\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    /**\n     * Open change event\n     */\n    @Event({\n        bubbles: false,\n    })\n    isOpen: EventEmitter<boolean>;\n\n    private _loaded = false;\n    private _trigger: HTMLElement;\n    private _menu: HTMLElement;\n    private _cleanup: () => void;\n\n    componentShouldUpdate() {\n        this._update();\n    }\n\n    disconnectedCallback() {\n        if (this._cleanup) {\n            this._cleanup();\n            this._cleanup = null;\n        }\n    }\n\n    render() {\n        return (\n            <Host class=\"p-dropdown\">\n                <div\n                    class=\"trigger\"\n                    ref={(ref) => (this._trigger = ref)}\n                    onClick={() => this._triggerClickHandler()}\n                >\n                    <slot\n                        onSlotchange={(ev) => this._checkButton(ev)}\n                        name=\"trigger\"\n                    />\n                </div>\n                <p-dropdown-menu-container\n                    role=\"popover\"\n                    maxWidth={!this.calculateWidth && this.applyMaxWidth}\n                    fullWidth={this.applyFullWidth && !this.applyMaxWidth}\n                    ref={(el) => this._load(el)}\n                    data-placement={this.placement}\n                    data-strategy={this.strategy}\n                    onClick={() => this._containerClickHandler()}\n                    scrollable={this.scrollable}\n                >\n                    <slot name=\"items\" />\n                </p-dropdown-menu-container>\n            </Host>\n        );\n    }\n\n    private _checkButton({ target }: Event) {\n        const slot = target as HTMLSlotElement;\n        const children = slot.assignedElements();\n\n        for (let child of children) {\n            if (child.nodeName === 'P-BUTTON') {\n                (child as any).chevronPosition = this.chevronPosition;\n                (child as any).chevron = this.chevronDirection\n                    ? this.chevronDirection\n                    : this.placement.indexOf('top') >= 0\n                    ? 'up'\n                    : 'down';\n            }\n        }\n    }\n\n    @Watch('show')\n    protected onShowChange(show) {\n        if (!this._loaded) {\n            return;\n        }\n\n        if (!show) {\n            this._hide();\n            return;\n        }\n\n        this._show();\n    }\n\n    @Listen('click', { target: 'document', capture: true })\n    protected documentClickHandler({ target }) {\n        if (\n            !this._menu.hasAttribute('data-show') ||\n            childOf(target, this._el)\n        ) {\n            return;\n        }\n\n        this._hide();\n    }\n\n    private _containerClickHandler() {\n        if (this.insideClick) {\n            return;\n        }\n\n        if (this._menu.hasAttribute('data-show')) {\n            this._hide();\n        }\n    }\n\n    private _triggerClickHandler() {\n        if (this.disableTriggerClick) {\n            return;\n        }\n\n        if (this._menu.hasAttribute('data-show')) {\n            this._hide();\n            return;\n        }\n\n        this._show();\n    }\n\n    private _load(popover: HTMLElement) {\n        this._menu = popover;\n        if (popover) {\n            this._update();\n            this._loaded = true;\n\n            if (this.show) {\n                setTimeout(() => this._show(), 100);\n            }\n        }\n    }\n\n    private _show() {\n        if (!this._loaded) {\n            return;\n        }\n\n        // Make the popover visible\n        if (this.calculateWidth) {\n            this._menu.style.width = `${this._trigger.clientWidth}px`;\n        }\n\n        this._cleanup = autoUpdate(this._el, this._menu, () => this._update());\n\n        this._menu.setAttribute('data-show', '');\n        this.isOpen.emit(true);\n    }\n\n    private _hide() {\n        if (!this._loaded || this.show) {\n            return;\n        }\n\n        if (this._cleanup) {\n            this._cleanup();\n            this._cleanup = null;\n        }\n\n        // Hide the popover\n        this._menu.removeAttribute('data-show');\n        this.isOpen.emit(false);\n    }\n\n    private _update() {\n        if (!this._menu) {\n            return;\n        }\n\n        computePosition(this._el, this._menu, {\n            placement: this.placement,\n            strategy: this.strategy,\n            middleware: [offset(8), flip(), shift()],\n        }).then(({ x, y, placement }) => {\n            this._menu.dataset.placement = placement;\n            Object.assign(this._menu.style, {\n                top: `${y}px`,\n                left: `${x}px`,\n            });\n        });\n    }\n}\n"],"version":3}
+{"file":"dropdown.component.js","mappings":"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","names":[],"sources":["src/components/molecules/dropdown/dropdown.component.scss?tag=p-dropdown&encapsulation=shadow","src/components/molecules/dropdown/dropdown.component.tsx"],"sourcesContent":[":host {\n\t@apply relative block;\n\n\t.trigger {\n\t\t@apply relative block h-auto w-auto;\n\t}\n\n\tp-dropdown-menu-container {\n\t\t@apply left-0 top-0 z-dropdown hidden;\n\n\t\t&[data-show] {\n\t\t\t@apply flex;\n\t\t}\n\n\t\t&[data-strategy='absolute'] {\n\t\t\t@apply absolute;\n\t\t}\n\n\t\t&[data-strategy='fixed'] {\n\t\t\t@apply fixed;\n\t\t}\n\t}\n}\n","import {\n\tautoUpdate,\n\tcomputePosition,\n\tflip,\n\toffset,\n\tPlacement,\n\tshift,\n\tStrategy,\n} from '@floating-ui/dom';\nimport {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tWatch,\n} from '@stencil/core';\nimport { childOf } from '../../../utils/child-of';\n\n@Component({\n\ttag: 'p-dropdown',\n\tstyleUrl: 'dropdown.component.scss',\n\tshadow: true,\n})\nexport class Dropdown {\n\t/**\n\t * The content of the dropdown menu\n\t */\n\t@Prop({ reflect: true }) placement: Placement = 'bottom-start';\n\n\t/**\n\t * The strategy of the popover placement\n\t */\n\t@Prop() strategy: Strategy = 'absolute';\n\n\t/**\n\t * Wether to show the dropdown menu\n\t */\n\t@Prop() show: boolean = false;\n\n\t/**\n\t * Wether to automatically calculate the width of the menu based on the trigger\n\t */\n\t@Prop() calculateWidth: boolean = false;\n\n\t/**\n\t * Wether to apply the max width\n\t */\n\t@Prop() applyMaxWidth: boolean = true;\n\n\t/**\n\t * Wether to apply the full width\n\t */\n\t@Prop() applyFullWidth: boolean = true;\n\n\t/**\n\t * Wether the dropdown container should be scrollable when the threshold is met.\n\t */\n\t@Prop() scrollable: boolean = false;\n\n\t/**\n\t * Wether to automatically close the dropdown menu after clicking inside\n\t */\n\t@Prop() insideClick: boolean = false;\n\n\t/**\n\t * Wether to automatically close the dropdown menu after clicking inside\n\t */\n\t@Prop() disableTriggerClick: boolean = false;\n\n\t/**\n\t * Wether to apply chevron automatically\n\t */\n\t@Prop() applyChevron: boolean = true;\n\n\t/**\n\t * Chevron position\n\t */\n\t@Prop() chevronPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * Chevron direction\n\t */\n\t@Prop() chevronDirection: 'up' | 'down';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t/**\n\t * Open change event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tisOpen: EventEmitter<boolean>;\n\n\tprivate _loaded = false;\n\tprivate _trigger: HTMLElement;\n\tprivate _menu: HTMLElement;\n\tprivate _cleanup: () => void;\n\n\tcomponentShouldUpdate() {\n\t\tthis._update();\n\t}\n\n\tdisconnectedCallback() {\n\t\tif (this._cleanup) {\n\t\t\tthis._cleanup();\n\t\t\tthis._cleanup = null;\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-dropdown\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"trigger\"\n\t\t\t\t\tref={(ref) => (this._trigger = ref)}\n\t\t\t\t\tonClick={() => this._triggerClickHandler()}\n\t\t\t\t>\n\t\t\t\t\t<slot\n\t\t\t\t\t\tonSlotchange={(ev) => this._checkButton(ev)}\n\t\t\t\t\t\tname=\"trigger\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<p-dropdown-menu-container\n\t\t\t\t\trole=\"popover\"\n\t\t\t\t\tmaxWidth={!this.calculateWidth && this.applyMaxWidth}\n\t\t\t\t\tfullWidth={this.applyFullWidth && !this.applyMaxWidth}\n\t\t\t\t\tref={(el) => this._load(el)}\n\t\t\t\t\tdata-placement={this.placement}\n\t\t\t\t\tdata-strategy={this.strategy}\n\t\t\t\t\tonClick={() => this._containerClickHandler()}\n\t\t\t\t\tscrollable={this.scrollable}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"items\" />\n\t\t\t\t</p-dropdown-menu-container>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _checkButton({ target }: Event) {\n\t\tif (!this.applyChevron) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst slot = target as HTMLSlotElement;\n\t\tconst children = slot.assignedElements();\n\n\t\tfor (let child of children) {\n\t\t\tif (child.nodeName === 'P-BUTTON') {\n\t\t\t\t(child as any).chevronPosition = this.chevronPosition;\n\t\t\t\t(child as any).chevron = this.chevronDirection\n\t\t\t\t\t? this.chevronDirection\n\t\t\t\t\t: this.placement.indexOf('top') >= 0\n\t\t\t\t\t\t? 'up'\n\t\t\t\t\t\t: 'down';\n\t\t\t}\n\t\t}\n\t}\n\n\t@Watch('show')\n\tprotected onShowChange(show) {\n\t\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!show) {\n\t\t\tthis._hide();\n\t\t\treturn;\n\t\t}\n\n\t\tthis._show();\n\t}\n\n\t@Listen('click', { target: 'document', capture: true })\n\tprotected documentClickHandler({ target }) {\n\t\tif (\n\t\t\t!this._menu.hasAttribute('data-show') ||\n\t\t\tchildOf(target, this._el)\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._hide();\n\t}\n\n\tprivate _containerClickHandler() {\n\t\tif (this.insideClick) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._menu.hasAttribute('data-show')) {\n\t\t\tthis._hide();\n\t\t}\n\t}\n\n\tprivate _triggerClickHandler() {\n\t\tif (this.disableTriggerClick) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._menu.hasAttribute('data-show')) {\n\t\t\tthis._hide();\n\t\t\treturn;\n\t\t}\n\n\t\tthis._show();\n\t}\n\n\tprivate _load(popover: HTMLElement) {\n\t\tthis._menu = popover;\n\t\tif (popover) {\n\t\t\tthis._update();\n\t\t\tthis._loaded = true;\n\n\t\t\tif (this.show) {\n\t\t\t\tsetTimeout(() => this._show(), 100);\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate _show() {\n\t\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Make the popover visible\n\t\tif (this.calculateWidth) {\n\t\t\tthis._menu.style.width = `${this._trigger.clientWidth}px`;\n\t\t}\n\n\t\tthis._cleanup = autoUpdate(this._el, this._menu, () => this._update());\n\n\t\tthis._menu.setAttribute('data-show', '');\n\t\tthis.isOpen.emit(true);\n\t}\n\n\tprivate _hide() {\n\t\tif (!this._loaded || this.show) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._cleanup) {\n\t\t\tthis._cleanup();\n\t\t\tthis._cleanup = null;\n\t\t}\n\n\t\t// Hide the popover\n\t\tthis._menu.removeAttribute('data-show');\n\t\tthis.isOpen.emit(false);\n\t}\n\n\tprivate _update() {\n\t\tif (!this._menu) {\n\t\t\treturn;\n\t\t}\n\n\t\tcomputePosition(this._el, this._menu, {\n\t\t\tplacement: this.placement,\n\t\t\tstrategy: this.strategy,\n\t\t\tmiddleware: [offset(8), flip(), shift()],\n\t\t}).then(({ x, y, placement }) => {\n\t\t\tthis._menu.dataset.placement = placement;\n\t\t\tObject.assign(this._menu.style, {\n\t\t\t\ttop: `${y}px`,\n\t\t\t\tleft: `${x}px`,\n\t\t\t});\n\t\t});\n\t}\n}\n"],"version":3}

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

@@ -1 +1 @@
-{"file":"floating-menu-container.component.js","mappings":";;AAAA,MAAM,iCAAiC,GAAG,soCAAsoC;;MCOnqC,qBAAqB;;;;;uBAIC,KAAK;;EAEpC,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,2BAA2B,IAClC,IAAI,CAAC,WAAW,IACb,YAAM,IAAI,EAAC,oBAAoB,GAAG,KAElC,eAAQ,CACX,CACE,EACT;GACL;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/floating-menu-container/floating-menu-container.component.scss?tag=p-floating-menu-container&encapsulation=shadow","src/components/atoms/floating-menu-container/floating-menu-container.component.tsx"],"sourcesContent":[":host {\n    @apply z-floating-menu flex h-12 items-center gap-4 rounded-xxlarge bg-storm-dark px-4 py-3 text-storm-vague shadow-2;\n}\n\n:host(.preload) {\n    @apply animate-none #{!important};\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n    tag: 'p-floating-menu-container',\n    styleUrl: 'floating-menu-container.component.scss',\n    shadow: true,\n})\nexport class FloatingMenuContainer {\n    /**\n     * Weather the container is used in the table\n     */\n    @Prop() usedInTable: boolean = false;\n\n    render() {\n        return (\n            <Host class=\"p-floating-menu-container\">\n                {this.usedInTable ? (\n                    <slot name=\"floating-menu-item\" />\n                ) : (\n                    <slot />\n                )}\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"floating-menu-container.component.js","mappings":";;AAAA,MAAM,iCAAiC,GAAG,soCAAsoC;;MCOnqC,qBAAqB;;;;;uBAIF,KAAK;;EAEpC,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAC,2BAA2B,IACrC,IAAI,CAAC,WAAW,IAChB,YAAM,IAAI,EAAC,oBAAoB,GAAG,KAElC,eAAQ,CACR,CACK,EACN;GACF;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/floating-menu-container/floating-menu-container.component.scss?tag=p-floating-menu-container&encapsulation=shadow","src/components/atoms/floating-menu-container/floating-menu-container.component.tsx"],"sourcesContent":[":host {\n\t@apply z-floating-menu flex h-12 items-center gap-4 rounded-xxlarge bg-storm-dark px-4 py-3 text-storm-vague shadow-2;\n}\n\n:host(.preload) {\n\t@apply animate-none #{!important};\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n\ttag: 'p-floating-menu-container',\n\tstyleUrl: 'floating-menu-container.component.scss',\n\tshadow: true,\n})\nexport class FloatingMenuContainer {\n\t/**\n\t * Weather the container is used in the table\n\t */\n\t@Prop() usedInTable: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-floating-menu-container\">\n\t\t\t\t{this.usedInTable ? (\n\t\t\t\t\t<slot name=\"floating-menu-item\" />\n\t\t\t\t) : (\n\t\t\t\t\t<slot />\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

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

@@ -1 +1 @@
-{"file":"floating-menu-item.component.js","mappings":";;AAAA,MAAM,4BAA4B,GAAG,spBAAspB;;MCO9qB,gBAAgB;;;;;iBAIiB,IAAI;;EAE9C,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,sBAAsB,IAC9B,eAAQ,CACL,EACT;GACL;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/floating-menu-item/floating-menu-item.component.scss?tag=p-floating-menu-item&encapsulation=shadow","src/components/atoms/floating-menu-item/floating-menu-item.component.tsx"],"sourcesContent":[":host {\n    @apply flex h-6 items-center gap-2 whitespace-nowrap text-sm text-storm-vague;\n}\n\n:host([hover]) {\n    @apply cursor-pointer font-semibold;\n}\n\n:host([hover]:hover) {\n    @apply text-white;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-floating-menu-item',\n    styleUrl: 'floating-menu-item.component.scss',\n    shadow: true,\n})\nexport class FloatingMenuItem {\n    /**\n     * The variant of the modal body\n     */\n    @Prop({ reflect: true }) hover: boolean = true;\n\n    render() {\n        return (\n            <Host class=\"p-floating-menu-item\">\n                <slot />\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"floating-menu-item.component.js","mappings":";;AAAA,MAAM,4BAA4B,GAAG,spBAAspB;;MCO9qB,gBAAgB;;;;;iBAIc,IAAI;;EAE9C,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAC,sBAAsB,IACjC,eAAQ,CACF,EACN;GACF;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/floating-menu-item/floating-menu-item.component.scss?tag=p-floating-menu-item&encapsulation=shadow","src/components/atoms/floating-menu-item/floating-menu-item.component.tsx"],"sourcesContent":[":host {\n\t@apply flex h-6 items-center gap-2 whitespace-nowrap text-sm text-storm-vague;\n}\n\n:host([hover]) {\n\t@apply cursor-pointer font-semibold;\n}\n\n:host([hover]:hover) {\n\t@apply text-white;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-floating-menu-item',\n\tstyleUrl: 'floating-menu-item.component.scss',\n\tshadow: true,\n})\nexport class FloatingMenuItem {\n\t/**\n\t * The variant of the modal body\n\t */\n\t@Prop({ reflect: true }) hover: boolean = true;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-floating-menu-item\">\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/helper.component.js.map

@@ -1 +1 @@
-{"file":"helper.component.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,whBAAwhB;;MCQtiB,MAAM;;;;;qBAIgB,KAAK;;EAEpC,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,UAAU,IAClB,iBAAW,SAAS,EAAE,IAAI,CAAC,SAAS,IAChC,WAAK,IAAI,EAAC,SAAS,IACf,eAAQ,CACN,EAEN,WAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,GAAO,CACjC,CACT,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/helper/helper.component.scss?tag=p-helper&encapsulation=shadow","src/components/atoms/helper/helper.component.tsx"],"sourcesContent":[":host {\n  .helper {\n    @apply inline-block cursor-pointer bg-no-repeat bg-center w-3 h-3;\n    background-image: url(/assets/images/helper/helper.svg);\n\n    &:hover {\n      background-image: url(/assets/images/helper/helper-hover.svg);\n    }\n  }\n}\n","import { Placement } from '@floating-ui/dom';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-helper',\n    styleUrl: 'helper.component.scss',\n    shadow: true,\n})\nexport class Helper {\n    /**\n     * The placement of the helper popover\n     */\n    @Prop() placement: Placement = 'top';\n\n    render() {\n        return (\n            <Host class=\"p-helper\">\n                <p-tooltip placement={this.placement}>\n                    <div slot=\"content\">\n                        <slot />\n                    </div>\n\n                    <div slot=\"trigger\" class=\"helper\"></div>\n                </p-tooltip>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"helper.component.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,whBAAwhB;;MCQtiB,MAAM;;;;;qBAIa,KAAK;;EAEpC,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAC,UAAU,IACrB,iBAAW,SAAS,EAAE,IAAI,CAAC,SAAS,IACnC,WAAK,IAAI,EAAC,SAAS,IAClB,eAAQ,CACH,EAEN,WAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,GAAO,CAC9B,CACN,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/helper/helper.component.scss?tag=p-helper&encapsulation=shadow","src/components/atoms/helper/helper.component.tsx"],"sourcesContent":[":host {\n\t.helper {\n\t\t@apply inline-block cursor-pointer bg-no-repeat bg-center w-3 h-3;\n\t\tbackground-image: url(/assets/images/helper/helper.svg);\n\n\t\t&:hover {\n\t\t\tbackground-image: url(/assets/images/helper/helper-hover.svg);\n\t\t}\n\t}\n}\n","import { Placement } from '@floating-ui/dom';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-helper',\n\tstyleUrl: 'helper.component.scss',\n\tshadow: true,\n})\nexport class Helper {\n\t/**\n\t * The placement of the helper popover\n\t */\n\t@Prop() placement: Placement = 'top';\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-helper\">\n\t\t\t\t<p-tooltip placement={this.placement}>\n\t\t\t\t\t<div slot=\"content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div slot=\"trigger\" class=\"helper\"></div>\n\t\t\t\t</p-tooltip>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/icon.component.js.map

@@ -1 +1 @@
-{"file":"icon.component.js","mappings":"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","names":[],"sources":["src/utils/icons.ts","src/components/atoms/icon/icon.component.scss?tag=p-icon","src/components/atoms/icon/icon.component.tsx"],"sourcesContent":["import arrow from '../assets/icons/arrow.svg';\nimport attachment from '../assets/icons/attachment.svg';\nimport bread from '../assets/icons/bread.svg';\nimport calendar from '../assets/icons/calendar.svg';\nimport camera from '../assets/icons/camera.svg';\nimport car from '../assets/icons/car.svg';\nimport checklist from '../assets/icons/checklist.svg';\nimport checkmark from '../assets/icons/checkmark.svg';\nimport chevron from '../assets/icons/chevron.svg';\nimport chevrons from '../assets/icons/chevrons.svg';\nimport clock from '../assets/icons/clock.svg';\nimport cogs from '../assets/icons/cogs.svg';\nimport colleagues from '../assets/icons/colleagues.svg';\nimport comment from '../assets/icons/comment.svg';\nimport companies from '../assets/icons/companies.svg';\nimport deactivate from '../assets/icons/deactivate.svg';\nimport document from '../assets/icons/document.svg';\nimport download from '../assets/icons/download.svg';\nimport envelope from '../assets/icons/envelope.svg';\nimport explanation from '../assets/icons/explanation.svg';\nimport eye from '../assets/icons/eye.svg';\nimport faBuilding from '../assets/icons/fa/building.svg';\nimport faPiggy from '../assets/icons/fa/piggy.svg';\nimport filter from '../assets/icons/filter.svg';\nimport folder from '../assets/icons/folder.svg';\nimport formula from '../assets/icons/formula.svg';\nimport grid from '../assets/icons/grid.svg';\nimport hashtag from '../assets/icons/hashtag.svg';\nimport headset from '../assets/icons/headset.svg';\nimport iDeal from '../assets/icons/iDeal.svg';\nimport integration from '../assets/icons/integration.svg';\nimport list from '../assets/icons/list.svg';\nimport location from '../assets/icons/location.svg';\nimport megaphone from '../assets/icons/megaphone.svg';\nimport menu from '../assets/icons/menu.svg';\nimport minus from '../assets/icons/minus.svg';\nimport more from '../assets/icons/more.svg';\nimport negative from '../assets/icons/negative.svg';\nimport notification from '../assets/icons/notification.svg';\nimport pagination from '../assets/icons/pagination.svg';\nimport payment from '../assets/icons/payment.svg';\nimport pencil from '../assets/icons/pencil.svg';\nimport person from '../assets/icons/person.svg';\nimport plan from '../assets/icons/plan.svg';\nimport plus from '../assets/icons/plus.svg';\nimport question from '../assets/icons/question.svg';\nimport receipt from '../assets/icons/receipt.svg';\nimport reload from '../assets/icons/reload.svg';\nimport report from '../assets/icons/report.svg';\nimport search from '../assets/icons/search.svg';\nimport settings from '../assets/icons/settings.svg';\nimport sick from '../assets/icons/sick.svg';\nimport signout from '../assets/icons/signout.svg';\nimport switchIcon from '../assets/icons/switch.svg';\nimport tachometer from '../assets/icons/tachometer.svg';\nimport task from '../assets/icons/task.svg';\nimport template from '../assets/icons/template.svg';\nimport tool from '../assets/icons/tool.svg';\nimport trash from '../assets/icons/trash.svg';\nimport turn from '../assets/icons/turn.svg';\nimport upload from '../assets/icons/upload.svg';\nimport warning from '../assets/icons/warning.svg';\n\nexport default {\n    arrow,\n    attachment,\n    bread,\n    calendar,\n    camera,\n    car,\n    checklist,\n    checkmark,\n    chevron,\n    chevrons,\n    clock,\n    colleagues,\n    cogs,\n    comment,\n    companies,\n    deactivate,\n    document,\n    download,\n    envelope,\n    explanation,\n    eye,\n    faBuilding,\n    faPiggy,\n    filter,\n    folder,\n    formula,\n    grid,\n    hashtag,\n    headset,\n    iDeal,\n    integration,\n    list,\n    location,\n    megaphone,\n    menu,\n    minus,\n    more,\n    negative,\n    notification,\n    pagination,\n    payment,\n    pencil,\n    person,\n    plan,\n    plus,\n    question,\n    reload,\n    receipt,\n    report,\n    search,\n    settings,\n    sick,\n    signout,\n    switch: switchIcon,\n    tachometer,\n    task,\n    template,\n    tool,\n    trash,\n    turn,\n    upload,\n    warning,\n};\n",":host {\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { RotateOptions, TextSizeOptions } from '../../../types/tailwind';\nimport icons from '../../../utils/icons';\n\nexport type IconVariant = keyof typeof icons;\nexport type IconFlipOptions = 'horizontal' | 'vertical';\n\n@Component({\n    tag: 'p-icon',\n    styleUrl: 'icon.component.scss',\n    // shadow: true,\n})\nexport class Icon {\n    /**\n     * The icon the be displayed\n     */\n    @Prop() variant!: IconVariant;\n\n    /**\n     * The size of the icon, using tailwind sizes\n     */\n    @Prop() size: TextSizeOptions = 'auto';\n\n    /**\n     * Wether to rotate the icon x degrees\n     */\n    @Prop() rotate: RotateOptions = 0;\n\n    /**\n     * Wether to flip the icon horizontally or vertically\n     */\n    @Prop() flip: IconFlipOptions = null;\n\n    render() {\n        const icon = icons[this.variant];\n\n        const styles = {\n            'p-icon flex': true,\n            'text-auto': this.size === 'auto',\n            'text-xxs': this.size === 'xxs',\n            'text-xs': this.size === 'xs',\n            'text-sm': this.size === 'sm',\n            'text-base': this.size === 'base',\n            'text-lg': this.size === 'lg',\n            'text-xl': this.size === 'xl',\n            'text-2xl': this.size === '2xl',\n            'text-3xl': this.size === '3xl',\n            'text-4xl': this.size === '4xl',\n            'text-5xl': this.size === '5xl',\n            'text-6xl': this.size === '6xl',\n            transform: !!this.rotate || !!this.flip,\n            'scale-x-flip': this.flip === 'horizontal',\n            'scale-y-flip': this.flip === 'vertical',\n            'rotate-0': this.rotate === 0,\n            'rotate-25': this.rotate === 25,\n            'rotate-45': this.rotate === 45,\n            'rotate-90': this.rotate === 90,\n            'rotate-135': this.rotate === 135,\n            'rotate-180': this.rotate === 180,\n            'rotate-225': this.rotate === 225,\n            'rotate-270': this.rotate === 270,\n            'rotate-315': this.rotate === 315,\n            '-rotate-0': this.rotate === -0,\n            '-rotate-25': this.rotate === -25,\n            '-rotate-45': this.rotate === -45,\n            '-rotate-90': this.rotate === -90,\n            '-rotate-135': this.rotate === -135,\n            '-rotate-180': this.rotate === -180,\n            '-rotate-225': this.rotate === -225,\n            '-rotate-270': this.rotate === -270,\n            '-rotate-315': this.rotate === -315,\n        };\n\n        return <Host class={styles} innerHTML={icon}></Host>;\n    }\n}\n"],"version":3}
+{"file":"icon.component.js","mappings":"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","names":[],"sources":["src/utils/icons.ts","src/components/atoms/icon/icon.component.scss?tag=p-icon","src/components/atoms/icon/icon.component.tsx"],"sourcesContent":["import arrow from '../assets/icons/arrow.svg';\nimport attachment from '../assets/icons/attachment.svg';\nimport bread from '../assets/icons/bread.svg';\nimport calendar from '../assets/icons/calendar.svg';\nimport camera from '../assets/icons/camera.svg';\nimport car from '../assets/icons/car.svg';\nimport checklist from '../assets/icons/checklist.svg';\nimport checkmark from '../assets/icons/checkmark.svg';\nimport chevron from '../assets/icons/chevron.svg';\nimport chevrons from '../assets/icons/chevrons.svg';\nimport clock from '../assets/icons/clock.svg';\nimport cogs from '../assets/icons/cogs.svg';\nimport colleagues from '../assets/icons/colleagues.svg';\nimport comment from '../assets/icons/comment.svg';\nimport companies from '../assets/icons/companies.svg';\nimport deactivate from '../assets/icons/deactivate.svg';\nimport document from '../assets/icons/document.svg';\nimport download from '../assets/icons/download.svg';\nimport envelope from '../assets/icons/envelope.svg';\nimport explanation from '../assets/icons/explanation.svg';\nimport eye from '../assets/icons/eye.svg';\nimport faBuilding from '../assets/icons/fa/building.svg';\nimport faPiggy from '../assets/icons/fa/piggy.svg';\nimport filter from '../assets/icons/filter.svg';\nimport folder from '../assets/icons/folder.svg';\nimport formula from '../assets/icons/formula.svg';\nimport grid from '../assets/icons/grid.svg';\nimport hashtag from '../assets/icons/hashtag.svg';\nimport headset from '../assets/icons/headset.svg';\nimport iDeal from '../assets/icons/iDeal.svg';\nimport integration from '../assets/icons/integration.svg';\nimport list from '../assets/icons/list.svg';\nimport location from '../assets/icons/location.svg';\nimport megaphone from '../assets/icons/megaphone.svg';\nimport menu from '../assets/icons/menu.svg';\nimport minus from '../assets/icons/minus.svg';\nimport more from '../assets/icons/more.svg';\nimport negative from '../assets/icons/negative.svg';\nimport notification from '../assets/icons/notification.svg';\nimport pagination from '../assets/icons/pagination.svg';\nimport payment from '../assets/icons/payment.svg';\nimport pencil from '../assets/icons/pencil.svg';\nimport person from '../assets/icons/person.svg';\nimport plan from '../assets/icons/plan.svg';\nimport plus from '../assets/icons/plus.svg';\nimport question from '../assets/icons/question.svg';\nimport receipt from '../assets/icons/receipt.svg';\nimport reload from '../assets/icons/reload.svg';\nimport report from '../assets/icons/report.svg';\nimport search from '../assets/icons/search.svg';\nimport settings from '../assets/icons/settings.svg';\nimport sick from '../assets/icons/sick.svg';\nimport signout from '../assets/icons/signout.svg';\nimport switchIcon from '../assets/icons/switch.svg';\nimport tachometer from '../assets/icons/tachometer.svg';\nimport task from '../assets/icons/task.svg';\nimport template from '../assets/icons/template.svg';\nimport tool from '../assets/icons/tool.svg';\nimport trash from '../assets/icons/trash.svg';\nimport turn from '../assets/icons/turn.svg';\nimport upload from '../assets/icons/upload.svg';\nimport warning from '../assets/icons/warning.svg';\n\nexport default {\n    arrow,\n    attachment,\n    bread,\n    calendar,\n    camera,\n    car,\n    checklist,\n    checkmark,\n    chevron,\n    chevrons,\n    clock,\n    colleagues,\n    cogs,\n    comment,\n    companies,\n    deactivate,\n    document,\n    download,\n    envelope,\n    explanation,\n    eye,\n    faBuilding,\n    faPiggy,\n    filter,\n    folder,\n    formula,\n    grid,\n    hashtag,\n    headset,\n    iDeal,\n    integration,\n    list,\n    location,\n    megaphone,\n    menu,\n    minus,\n    more,\n    negative,\n    notification,\n    pagination,\n    payment,\n    pencil,\n    person,\n    plan,\n    plus,\n    question,\n    reload,\n    receipt,\n    report,\n    search,\n    settings,\n    sick,\n    signout,\n    switch: switchIcon,\n    tachometer,\n    task,\n    template,\n    tool,\n    trash,\n    turn,\n    upload,\n    warning,\n};\n",":host {\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { RotateOptions, TextSizeOptions } from '../../../types/tailwind';\nimport icons from '../../../utils/icons';\n\nexport type IconVariant = keyof typeof icons;\nexport type IconFlipOptions = 'horizontal' | 'vertical';\n\n@Component({\n\ttag: 'p-icon',\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!: IconVariant;\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 = null;\n\n\trender() {\n\t\tconst icon = icons[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\t'text-5xl': this.size === '5xl',\n\t\t\t'text-6xl': this.size === '6xl',\n\t\t\ttransform: !!this.rotate || !!this.flip,\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 <Host class={styles} innerHTML={icon}></Host>;\n\t}\n}\n"],"version":3}

package/dist/components/illustration.component.js

@@ -1633,7 +1633,7 @@ const Illustration = /*@__PURE__*/ proxyCustomElement(class Illustration extends
   }
   render() {
     const illustration = illustrations[this.variant];
-    return h(Host, { class: "p-illustration block", innerHTML: illustration });
+    return (h(Host, { class: "p-illustration block", innerHTML: illustration }));
   }
 }, [0, "p-illustration", {
     "variant": [1]

package/dist/components/illustration.component.js.map

@@ -1 +1 @@
-{"file":"illustration.component.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,sBAAe;EACX,aAAa,EAAE,UAAU;EACzB,oBAAoB,EAAE,gBAAgB;EACtC,sBAAsB,EAAE,kBAAkB;EAC1C,iBAAiB,EAAE,aAAa;EAChC,WAAW;EACX,QAAQ;EACR,SAAS;EACT,SAAS;EACT,YAAY,EAAE,SAAS;EACvB,UAAU,EAAE,OAAO;EACnB,eAAe,EAAE,WAAW;EAC5B,QAAQ,EAAE,KAAK;CAClB;;MCjBY,YAAY;;;;;;EAMvB,MAAM;IACJ,MAAM,YAAY,GAAG,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAEjD,OAAO,EAAC,IAAI,IAAC,KAAK,EAAC,sBAAsB,EAAC,SAAS,EAAE,YAAY,GAAS,CAAC;GAC5E;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/utils/illustrations.ts","src/components/atoms/illustration/illustration.component.tsx"],"sourcesContent":["import emptyState from '../assets/illustrations/default-empty-state.svg';\nimport departments from '../assets/illustrations/departments.svg';\nimport email from '../assets/illustrations/e-mail.svg';\nimport emptyStateAdd from '../assets/illustrations/empty-state-add.svg';\nimport emptyStateOverview from '../assets/illustrations/empty-state-overview.svg';\nimport emptyStateSearch from '../assets/illustrations/empty-state-search.svg';\nimport expenses from '../assets/illustrations/expenses.svg';\nimport functions from '../assets/illustrations/functions.svg';\nimport questions from '../assets/illustrations/questions.svg';\nimport sickLeave from '../assets/illustrations/sick-leave.svg';\nimport timeOff from '../assets/illustrations/time-off.svg';\nimport upgradeToHr from '../assets/illustrations/upgrade-to-hr.svg';\n\nexport default {\n    'empty-state': emptyState,\n    'empty-state-search': emptyStateSearch,\n    'empty-state-overview': emptyStateOverview,\n    'empty-state-add': emptyStateAdd,\n    departments,\n    expenses,\n    functions,\n    questions,\n    'sick-leave': sickLeave,\n    'time-off': timeOff,\n    'upgrade-to-hr': upgradeToHr,\n    'e-mail': email,\n};\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport illustrations from '../../../utils/illustrations';\n\nexport type IllustrationVariant = keyof typeof illustrations;\n\n@Component({\n  tag: 'p-illustration',\n  // shadow: true,\n})\nexport class Illustration {\n  /**\n   * The icon the be displayed\n   */\n  @Prop() variant!: IllustrationVariant;\n\n  render() {\n    const illustration = illustrations[this.variant];\n\n    return <Host class=\"p-illustration block\" innerHTML={illustration}></Host>;\n  }\n}\n"],"version":3}
+{"file":"illustration.component.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,sBAAe;EACX,aAAa,EAAE,UAAU;EACzB,oBAAoB,EAAE,gBAAgB;EACtC,sBAAsB,EAAE,kBAAkB;EAC1C,iBAAiB,EAAE,aAAa;EAChC,WAAW;EACX,QAAQ;EACR,SAAS;EACT,SAAS;EACT,YAAY,EAAE,SAAS;EACvB,UAAU,EAAE,OAAO;EACnB,eAAe,EAAE,WAAW;EAC5B,QAAQ,EAAE,KAAK;CAClB;;MCjBY,YAAY;;;;;;EAMxB,MAAM;IACL,MAAM,YAAY,GAAG,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAEjD,QACC,EAAC,IAAI,IAAC,KAAK,EAAC,sBAAsB,EAAC,SAAS,EAAE,YAAY,GAAS,EAClE;GACF;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/utils/illustrations.ts","src/components/atoms/illustration/illustration.component.tsx"],"sourcesContent":["import emptyState from '../assets/illustrations/default-empty-state.svg';\nimport departments from '../assets/illustrations/departments.svg';\nimport email from '../assets/illustrations/e-mail.svg';\nimport emptyStateAdd from '../assets/illustrations/empty-state-add.svg';\nimport emptyStateOverview from '../assets/illustrations/empty-state-overview.svg';\nimport emptyStateSearch from '../assets/illustrations/empty-state-search.svg';\nimport expenses from '../assets/illustrations/expenses.svg';\nimport functions from '../assets/illustrations/functions.svg';\nimport questions from '../assets/illustrations/questions.svg';\nimport sickLeave from '../assets/illustrations/sick-leave.svg';\nimport timeOff from '../assets/illustrations/time-off.svg';\nimport upgradeToHr from '../assets/illustrations/upgrade-to-hr.svg';\n\nexport default {\n    'empty-state': emptyState,\n    'empty-state-search': emptyStateSearch,\n    'empty-state-overview': emptyStateOverview,\n    'empty-state-add': emptyStateAdd,\n    departments,\n    expenses,\n    functions,\n    questions,\n    'sick-leave': sickLeave,\n    'time-off': timeOff,\n    'upgrade-to-hr': upgradeToHr,\n    'e-mail': email,\n};\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport illustrations from '../../../utils/illustrations';\n\nexport type IllustrationVariant = keyof typeof illustrations;\n\n@Component({\n\ttag: 'p-illustration',\n\t// shadow: true,\n})\nexport class Illustration {\n\t/**\n\t * The icon the be displayed\n\t */\n\t@Prop() variant!: IllustrationVariant;\n\n\trender() {\n\t\tconst illustration = illustrations[this.variant];\n\n\t\treturn (\n\t\t\t<Host class=\"p-illustration block\" innerHTML={illustration}></Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/input-error.component.js.map

@@ -1 +1 @@
-{"file":"input-error.component.js","mappings":";;;;MAMa,UAAU;;;;;;4BASQ,KAAK;wBAEA,KAAK;;EAErC,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,eAAe,IACvB,iBACI,OAAO,EAAC,OAAO,EACf,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAC3B,QAAQ,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,MAAM,CAAC,IAEjD,cACI,KAAK,EAAE,GACH,IAAI,CAAC,YAAY;UACX,eAAe;UACf,qBACV,sBAAsB,EACtB,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,aAAa,GACvB,CACM,CACT,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/molecules/input-error/input-error.component.tsx"],"sourcesContent":["import { Component, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n    tag: 'p-input-error',\n    shadow: true,\n})\nexport class InputError {\n    /**\n     * The error to show\n     */\n    @Prop() error: string;\n\n    /**\n     * Wether to force show the tooltip\n     */\n    @Prop() forceShowTooltip = false;\n\n    @State() private _showTooltip = false;\n\n    render() {\n        return (\n            <Host class=\"p-input-error\">\n                <p-tooltip\n                    variant=\"error\"\n                    content={this.error}\n                    show={this.forceShowTooltip}\n                    onIsOpen={(ev) => (this._showTooltip = ev.detail)}\n                >\n                    <p-icon\n                        class={`${\n                            this._showTooltip\n                                ? 'text-negative'\n                                : 'text-negative-light'\n                        } hover:text-negative`}\n                        slot=\"trigger\"\n                        variant=\"explanation\"\n                    />\n                </p-tooltip>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"input-error.component.js","mappings":";;;;MAMa,UAAU;;;;;;4BASK,KAAK;wBAEA,KAAK;;EAErC,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAC,eAAe,IAC1B,iBACC,OAAO,EAAC,OAAO,EACf,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAC3B,QAAQ,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,MAAM,CAAC,IAEjD,cACC,KAAK,EAAE,GACN,IAAI,CAAC,YAAY;UACd,eAAe;UACf,qBACJ,sBAAsB,EACtB,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,aAAa,GACpB,CACS,CACN,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/molecules/input-error/input-error.component.tsx"],"sourcesContent":["import { Component, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n\ttag: 'p-input-error',\n\tshadow: true,\n})\nexport class InputError {\n\t/**\n\t * The error to show\n\t */\n\t@Prop() error: string;\n\n\t/**\n\t * Wether to force show the tooltip\n\t */\n\t@Prop() forceShowTooltip = false;\n\n\t@State() private _showTooltip = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-input-error\">\n\t\t\t\t<p-tooltip\n\t\t\t\t\tvariant=\"error\"\n\t\t\t\t\tcontent={this.error}\n\t\t\t\t\tshow={this.forceShowTooltip}\n\t\t\t\t\tonIsOpen={(ev) => (this._showTooltip = ev.detail)}\n\t\t\t\t>\n\t\t\t\t\t<p-icon\n\t\t\t\t\t\tclass={`${\n\t\t\t\t\t\t\tthis._showTooltip\n\t\t\t\t\t\t\t\t? 'text-negative'\n\t\t\t\t\t\t\t\t: 'text-negative-light'\n\t\t\t\t\t\t} hover:text-negative`}\n\t\t\t\t\t\tslot=\"trigger\"\n\t\t\t\t\t\tvariant=\"explanation\"\n\t\t\t\t\t/>\n\t\t\t\t</p-tooltip>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/input-group.component.js

@@ -50,10 +50,10 @@ const InputGroup = /*@__PURE__*/ proxyCustomElement(class InputGroup extends HTM
     this._forceShowTooltip = false;
   }
   /*
-   With this, we shall hack the system in ways no one would ever have thought.
-   
-   <div class="pl-0 pr-0 border-l-0 border-r-0 rounded-tl-none rounded-bl-none rounded-tr-none rounded-br-none"></div>
-   */
+     With this, we shall hack the system in ways no one would ever have thought.
+     
+     <div class="pl-0 pr-0 border-l-0 border-r-0 rounded-tl-none rounded-bl-none rounded-tr-none rounded-br-none"></div>
+     */
   _setInputClasses() {
     const input = this._el.querySelector(':scope > [slot="input"]');
     if (!input) {

package/dist/components/input-group.component.js.map

@@ -1 +1 @@
-{"file":"input-group.component.js","mappings":"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","names":[],"sources":["src/components/molecules/input-group/input-group.component.scss?tag=p-input-group&encapsulation=shadow","src/components/molecules/input-group/input-group.component.tsx"],"sourcesContent":["@import '../../../style/form/mixins';\n\n@mixin slottedItems($prefix: false) {\n    @include inputs($prefix, true) {\n        @content;\n    }\n}\n\n:host {\n    @apply flex w-full flex-col;\n    @apply outline-none #{!important};\n\n    .input-label {\n        @apply mb-[2px] text-xs font-semibold uppercase tracking-wider text-storm-vague;\n    }\n\n    .input-header {\n        @apply mb-[2px] flex items-end gap-2;\n    }\n\n    .content {\n        @apply flex w-full;\n\n        .prefix,\n        .suffix {\n            @include inputDefaultState(false);\n            @apply box-border flex-1 text-storm;\n            @apply h-full;\n        }\n\n        .prefix {\n            @apply rounded-br-none rounded-tr-none;\n            @apply border-r-0 #{!important};\n            @apply order-1;\n            @apply pr-2;\n        }\n\n        .suffix {\n            @apply rounded-bl-none rounded-tl-none;\n            @apply order-3;\n            @apply pl-2;\n            @apply border-l-0 #{!important};\n        }\n\n        @include slottedItems() {\n            @include inputDefaultState();\n            @apply order-2;\n        }\n\n        @include slottedItems('.prefix') {\n            @apply rounded-bl-none rounded-tl-none #{!important};\n            @apply flex-auto;\n            @apply border-l-0 pl-0 #{!important};\n        }\n\n        @include slottedItems('.suffix') {\n            @apply rounded-br-none rounded-tr-none #{!important};\n            @apply flex-auto;\n            @apply border-r-0 pr-0 #{!important};\n        }\n    }\n}\n\n:host(.focused),\n:host([focused]),\n:host(:focus-within),\n:host(:focus) {\n    @apply outline-none #{!important};\n\n    .prefix,\n    .suffix {\n        @include inputFocusState();\n        @apply text-indigo;\n    }\n\n    @include slottedItems() {\n        @include inputFocusState();\n    }\n}\n\n:host(.error),\n:host([error]) {\n    .prefix,\n    .suffix {\n        @include inputErrorState();\n        @apply text-negative;\n    }\n\n    .suffix {\n        @apply items-start py-[calc(0.75rem-1px)];\n    }\n\n    @include slottedItems() {\n        @include inputErrorState();\n\n        &:focus,\n        &:focus-within,\n        &:focus-visible,\n        &.focus,\n        &[active],\n        &.active {\n            @include inputErrorState();\n        }\n    }\n}\n\n:host(.disabled),\n:host([disabled]) {\n    .prefix,\n    .suffix {\n        @include inputDisabledState();\n    }\n\n    @include slottedItems() {\n        @include inputDisabledState();\n        pointer-events: none;\n    }\n}\n\n:host(.size-small) {\n    @include slottedItems() {\n        @include inputSizeSmall();\n    }\n}\n\n:host(.size-small.error),\n:host(.size-small[error]) {\n    .suffix {\n        @apply py-2;\n    }\n}\n","import {\n    Component,\n    Element,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State,\n} from '@stencil/core';\nimport { RotateOptions } from '../../../types/tailwind';\nimport { IconFlipOptions, IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n    tag: 'p-input-group',\n    styleUrl: './input-group.component.scss',\n    shadow: true,\n})\nexport class InputGroup {\n    /**\n     * The size of the input group\n     */\n    @Prop() size: 'small' | 'medium' = 'medium';\n\n    /**\n     * The prefix of the input group\n     */\n    @Prop() prefix: string;\n\n    /**\n     * The suffix of the input group\n     */\n    @Prop() suffix: string;\n\n    /**\n     * Icon of the input group\n     */\n    @Prop() icon: IconVariant;\n\n    /**\n     * Icon flip\n     */\n    @Prop() iconFlip: IconFlipOptions;\n\n    /**\n     * Icon rotate\n     */\n    @Prop() iconRotate: RotateOptions;\n\n    /**\n     * Icon position\n     */\n    @Prop() iconPosition: 'start' | 'end' = 'start';\n\n    /**\n     * The label of the input group\n     */\n    @Prop() label: string;\n\n    /**\n     * The helper of the input group\n     */\n    @Prop() helper: string;\n\n    /**\n     * Wether the field is required\n     */\n    @Prop({ reflect: true }) required: boolean;\n\n    /**\n     * The helper of the input group\n     */\n    @Prop({ reflect: true }) error: string;\n\n    /**\n     * Wether the input group is disabled\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Wether the input group is focused\n     */\n    @Prop({ reflect: true }) focused: boolean = false;\n\n    /**\n     * The method to use when focusing the input\n     */\n    @Prop() focusMethod: 'focus' | 'click' = 'focus';\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    @State() private _forceShowTooltip = false;\n\n    private _whitelistedTags = ['input', 'textarea'];\n\n    componentWillRender() {\n        this._setInputClasses();\n    }\n\n    render() {\n        const {\n            hasHeaderSlot,\n            helper,\n            label,\n            prefix,\n            suffix,\n            errorAndErrorIsNotBoolean,\n            errorVariant,\n        } = this._getSlotInfo();\n\n        return (\n            <Host\n                class={`p-input-group ${this.error?.length && 'error'} ${\n                    this.disabled && 'disabled'\n                } ${this.focused && 'focused'} size-${this.size}`}\n            >\n                <div class=\"flex items-end justify-between\">\n                    {label && (\n                        <div\n                            class=\"input-label\"\n                            onClick={() => this._focusInput()}\n                        >\n                            {label}\n                            {this.required && (\n                                <span class=\"ml-1 text-negative\">*</span>\n                            )}\n                        </div>\n                    )}\n\n                    {(helper || hasHeaderSlot) && (\n                        <div class=\"input-header\">\n                            {hasHeaderSlot && <slot name=\"header\" />}\n                            {helper && (\n                                <p-helper\n                                    class={`flex ${\n                                        hasHeaderSlot ? 'ml-2' : ''\n                                    }`}\n                                    placement=\"top-end\"\n                                >\n                                    {helper}\n                                </p-helper>\n                            )}\n                        </div>\n                    )}\n                </div>\n                <p-tooltip\n                    class=\"w-full\"\n                    variant=\"error-element\"\n                    content={this.error}\n                    show={\n                        errorAndErrorIsNotBoolean &&\n                        errorVariant === 'element' &&\n                        this._forceShowTooltip\n                    }\n                    enableUserInput={false}\n                >\n                    <div class=\"content\" slot=\"trigger\">\n                        {(prefix ||\n                            (this.icon && this.iconPosition === 'start')) && (\n                            <div\n                                class={`prefix size-${this.size}`}\n                                onClick={() => this._focusInput()}\n                            >\n                                {this.icon && this.iconPosition === 'start' ? (\n                                    <p-icon\n                                        class=\"flex\"\n                                        variant={this.icon}\n                                        rotate={this.iconRotate}\n                                        flip={this.iconFlip}\n                                    />\n                                ) : (\n                                    prefix\n                                )}\n                            </div>\n                        )}\n                        {(suffix ||\n                            (errorAndErrorIsNotBoolean &&\n                                errorVariant === 'icon') ||\n                            (this.icon && this.iconPosition === 'end')) && (\n                            <div\n                                class={`suffix size-${this.size}`}\n                                onClick={() => this._focusInput()}\n                            >\n                                {errorAndErrorIsNotBoolean &&\n                                errorVariant === 'icon' ? (\n                                    <p-input-error\n                                        error={this.error}\n                                        forceShowTooltip={\n                                            this._forceShowTooltip\n                                        }\n                                    />\n                                ) : this.icon && this.iconPosition === 'end' ? (\n                                    <p-icon\n                                        class=\"flex\"\n                                        variant={this.icon}\n                                        rotate={this.iconRotate}\n                                        flip={this.iconFlip}\n                                    />\n                                ) : (\n                                    suffix\n                                )}\n                            </div>\n                        )}\n\n                        <slot name=\"input\" />\n                    </div>\n                </p-tooltip>\n            </Host>\n        );\n    }\n\n    @Listen('focusin')\n    handleFocusIn() {\n        this._forceShowTooltip = true;\n    }\n\n    @Listen('focusout')\n    handleFocusOut() {\n        this._forceShowTooltip = false;\n    }\n    /* \n     With this, we shall hack the system in ways no one would ever have thought.\n     \n     <div class=\"pl-0 pr-0 border-l-0 border-r-0 rounded-tl-none rounded-bl-none rounded-tr-none rounded-br-none\"></div>\n     */\n    private _setInputClasses() {\n        const input = this._el.querySelector(':scope > [slot=\"input\"]');\n\n        if (!input) {\n            return;\n        }\n\n        const tagName = input.tagName.toLowerCase();\n        if (this._whitelistedTags.indexOf(tagName) === -1) {\n            return;\n        }\n\n        if (!input.classList.contains('p-input')) {\n            input.classList.add('p-input');\n        }\n\n        const { prefix, suffix, errorAndErrorIsNotBoolean, errorVariant } =\n            this._getSlotInfo();\n\n        if (\n            suffix ||\n            (errorAndErrorIsNotBoolean && errorVariant === 'icon') ||\n            (this.icon && this.iconPosition === 'end')\n        ) {\n            input.classList.add(\n                'border-r-0',\n                'rounded-tr-none',\n                'rounded-br-none',\n                'pr-0'\n            );\n        } else {\n            input.classList.remove(\n                'border-r-0',\n                'rounded-tr-none',\n                'rounded-br-none',\n                'pr-0'\n            );\n        }\n\n        if (prefix || (this.icon && this.iconPosition === 'start')) {\n            input.classList.add(\n                'border-l-0',\n                'rounded-tl-none',\n                'rounded-bl-none',\n                'pl-0'\n            );\n        } else {\n            input.classList.remove(\n                'border-l-0',\n                'rounded-tl-none',\n                'rounded-bl-none',\n                'pl-0'\n            );\n        }\n\n        if (this.size === 'small' && !input.classList.contains('size-small')) {\n            input.classList.add('size-small');\n        }\n\n        if (this.size !== 'small' && input.classList.contains('size-small')) {\n            input.classList.remove('size-small');\n        }\n    }\n\n    private _getSlotInfo() {\n        const hasHelperSlot = !!this._el.querySelector(\n            ':scope > [slot=\"helper\"]'\n        );\n        const hasLabelSlot = !!this._el.querySelector(\n            ':scope > [slot=\"label\"]'\n        );\n        const hasPrefixSlot = !!this._el.querySelector(\n            ':scope > [slot=\"prefix\"]'\n        );\n        const hasSuffixSlot = !!this._el.querySelector(\n            ':scope > [slot=\"suffix\"]'\n        );\n        const hasHeaderSlot = !!this._el.querySelector(\n            ':scope > [slot=\"header\"]'\n        );\n\n        const helper = hasHelperSlot ? <slot name=\"helper\" /> : this.helper;\n        const label = hasLabelSlot ? <slot name=\"label\" /> : this.label;\n        const prefix = hasPrefixSlot ? <slot name=\"prefix\" /> : this.prefix;\n        const suffix = hasSuffixSlot ? <slot name=\"suffix\" /> : this.suffix;\n\n        const errorAndErrorIsNotBoolean =\n            this.error &&\n            typeof this.error === 'string' &&\n            this.error !== 'true';\n\n        return {\n            hasHelperSlot,\n            hasLabelSlot,\n            hasPrefixSlot,\n            hasSuffixSlot,\n            hasHeaderSlot,\n            helper,\n            label,\n            prefix,\n            suffix,\n            errorAndErrorIsNotBoolean,\n            errorVariant: this._el.offsetWidth <= 72 ? 'element' : 'icon',\n        };\n    }\n\n    private _focusInput() {\n        const input = this._el.querySelector(':scope > [slot=\"input\"]');\n        (input as HTMLElement)[this.focusMethod]();\n    }\n}\n"],"version":3}
+{"file":"input-group.component.js","mappings":"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","names":[],"sources":["src/components/molecules/input-group/input-group.component.scss?tag=p-input-group&encapsulation=shadow","src/components/molecules/input-group/input-group.component.tsx"],"sourcesContent":["@import '../../../style/form/mixins';\n\n@mixin slottedItems($prefix: false) {\n\t@include inputs($prefix, true) {\n\t\t@content;\n\t}\n}\n\n:host {\n\t@apply flex w-full flex-col;\n\t@apply outline-none #{!important};\n\n\t.input-label {\n\t\t@apply mb-[2px] text-xs font-semibold uppercase tracking-wider text-storm-vague;\n\t}\n\n\t.input-header {\n\t\t@apply mb-[2px] flex items-end gap-2;\n\t}\n\n\t.content {\n\t\t@apply flex w-full;\n\n\t\t.prefix,\n\t\t.suffix {\n\t\t\t@include inputDefaultState(false);\n\t\t\t@apply box-border flex-1 text-storm;\n\t\t\t@apply h-full;\n\t\t}\n\n\t\t.prefix {\n\t\t\t@apply rounded-br-none rounded-tr-none;\n\t\t\t@apply border-r-0 #{!important};\n\t\t\t@apply order-1;\n\t\t\t@apply pr-2;\n\t\t}\n\n\t\t.suffix {\n\t\t\t@apply rounded-bl-none rounded-tl-none;\n\t\t\t@apply order-3;\n\t\t\t@apply pl-2;\n\t\t\t@apply border-l-0 #{!important};\n\t\t}\n\n\t\t@include slottedItems() {\n\t\t\t@include inputDefaultState();\n\t\t\t@apply order-2;\n\t\t}\n\n\t\t@include slottedItems('.prefix') {\n\t\t\t@apply rounded-bl-none rounded-tl-none #{!important};\n\t\t\t@apply flex-auto;\n\t\t\t@apply border-l-0 pl-0 #{!important};\n\t\t}\n\n\t\t@include slottedItems('.suffix') {\n\t\t\t@apply rounded-br-none rounded-tr-none #{!important};\n\t\t\t@apply flex-auto;\n\t\t\t@apply border-r-0 pr-0 #{!important};\n\t\t}\n\t}\n}\n\n:host(.focused),\n:host([focused]),\n:host(:focus-within),\n:host(:focus) {\n\t@apply outline-none #{!important};\n\n\t.prefix,\n\t.suffix {\n\t\t@include inputFocusState();\n\t\t@apply text-indigo;\n\t}\n\n\t@include slottedItems() {\n\t\t@include inputFocusState();\n\t}\n}\n\n:host(.error),\n:host([error]) {\n\t.prefix,\n\t.suffix {\n\t\t@include inputErrorState();\n\t\t@apply text-negative;\n\t}\n\n\t.suffix {\n\t\t@apply items-start py-[calc(0.75rem-1px)];\n\t}\n\n\t@include slottedItems() {\n\t\t@include inputErrorState();\n\n\t\t&:focus,\n\t\t&:focus-within,\n\t\t&:focus-visible,\n\t\t&.focus,\n\t\t&[active],\n\t\t&.active {\n\t\t\t@include inputErrorState();\n\t\t}\n\t}\n}\n\n:host(.disabled),\n:host([disabled]) {\n\t.prefix,\n\t.suffix {\n\t\t@include inputDisabledState();\n\t}\n\n\t@include slottedItems() {\n\t\t@include inputDisabledState();\n\t\tpointer-events: none;\n\t}\n}\n\n:host(.size-small) {\n\t@include slottedItems() {\n\t\t@include inputSizeSmall();\n\t}\n}\n\n:host(.size-small.error),\n:host(.size-small[error]) {\n\t.suffix {\n\t\t@apply py-2;\n\t}\n}\n","import {\n\tComponent,\n\tElement,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\nimport { RotateOptions } from '../../../types/tailwind';\nimport { IconFlipOptions, IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n\ttag: 'p-input-group',\n\tstyleUrl: './input-group.component.scss',\n\tshadow: true,\n})\nexport class InputGroup {\n\t/**\n\t * The size of the input group\n\t */\n\t@Prop() size: 'small' | 'medium' = 'medium';\n\n\t/**\n\t * The prefix of the input group\n\t */\n\t@Prop() prefix: string;\n\n\t/**\n\t * The suffix of the input group\n\t */\n\t@Prop() suffix: string;\n\n\t/**\n\t * Icon of the input group\n\t */\n\t@Prop() icon: IconVariant;\n\n\t/**\n\t * Icon flip\n\t */\n\t@Prop() iconFlip: IconFlipOptions;\n\n\t/**\n\t * Icon rotate\n\t */\n\t@Prop() iconRotate: RotateOptions;\n\n\t/**\n\t * Icon position\n\t */\n\t@Prop() iconPosition: 'start' | 'end' = 'start';\n\n\t/**\n\t * The label of the input group\n\t */\n\t@Prop() label: string;\n\n\t/**\n\t * The helper of the input group\n\t */\n\t@Prop() helper: string;\n\n\t/**\n\t * Wether the field is required\n\t */\n\t@Prop({ reflect: true }) required: boolean;\n\n\t/**\n\t * The helper of the input group\n\t */\n\t@Prop({ reflect: true }) error: string;\n\n\t/**\n\t * Wether the input group is disabled\n\t */\n\t@Prop({ reflect: true }) disabled: boolean = false;\n\n\t/**\n\t * Wether the input group is focused\n\t */\n\t@Prop({ reflect: true }) focused: boolean = false;\n\n\t/**\n\t * The method to use when focusing the input\n\t */\n\t@Prop() focusMethod: 'focus' | 'click' = 'focus';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _forceShowTooltip = false;\n\n\tprivate _whitelistedTags = ['input', 'textarea'];\n\n\tcomponentWillRender() {\n\t\tthis._setInputClasses();\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\thasHeaderSlot,\n\t\t\thelper,\n\t\t\tlabel,\n\t\t\tprefix,\n\t\t\tsuffix,\n\t\t\terrorAndErrorIsNotBoolean,\n\t\t\terrorVariant,\n\t\t} = this._getSlotInfo();\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-input-group ${this.error?.length && 'error'} ${\n\t\t\t\t\tthis.disabled && 'disabled'\n\t\t\t\t} ${this.focused && 'focused'} size-${this.size}`}\n\t\t\t>\n\t\t\t\t<div class=\"flex items-end justify-between\">\n\t\t\t\t\t{label && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"input-label\"\n\t\t\t\t\t\t\tonClick={() => this._focusInput()}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t{this.required && (\n\t\t\t\t\t\t\t\t<span class=\"ml-1 text-negative\">*</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{(helper || hasHeaderSlot) && (\n\t\t\t\t\t\t<div class=\"input-header\">\n\t\t\t\t\t\t\t{hasHeaderSlot && <slot name=\"header\" />}\n\t\t\t\t\t\t\t{helper && (\n\t\t\t\t\t\t\t\t<p-helper\n\t\t\t\t\t\t\t\t\tclass={`flex ${\n\t\t\t\t\t\t\t\t\t\thasHeaderSlot ? 'ml-2' : ''\n\t\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\t\tplacement=\"top-end\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{helper}\n\t\t\t\t\t\t\t\t</p-helper>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<p-tooltip\n\t\t\t\t\tclass=\"w-full\"\n\t\t\t\t\tvariant=\"error-element\"\n\t\t\t\t\tcontent={this.error}\n\t\t\t\t\tshow={\n\t\t\t\t\t\terrorAndErrorIsNotBoolean &&\n\t\t\t\t\t\terrorVariant === 'element' &&\n\t\t\t\t\t\tthis._forceShowTooltip\n\t\t\t\t\t}\n\t\t\t\t\tenableUserInput={false}\n\t\t\t\t>\n\t\t\t\t\t<div class=\"content\" slot=\"trigger\">\n\t\t\t\t\t\t{(prefix ||\n\t\t\t\t\t\t\t(this.icon && this.iconPosition === 'start')) && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass={`prefix size-${this.size}`}\n\t\t\t\t\t\t\t\tonClick={() => this._focusInput()}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this.icon && this.iconPosition === 'start' ? (\n\t\t\t\t\t\t\t\t\t<p-icon\n\t\t\t\t\t\t\t\t\t\tclass=\"flex\"\n\t\t\t\t\t\t\t\t\t\tvariant={this.icon}\n\t\t\t\t\t\t\t\t\t\trotate={this.iconRotate}\n\t\t\t\t\t\t\t\t\t\tflip={this.iconFlip}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\tprefix\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{(suffix ||\n\t\t\t\t\t\t\t(errorAndErrorIsNotBoolean &&\n\t\t\t\t\t\t\t\terrorVariant === 'icon') ||\n\t\t\t\t\t\t\t(this.icon && this.iconPosition === 'end')) && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass={`suffix size-${this.size}`}\n\t\t\t\t\t\t\t\tonClick={() => this._focusInput()}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{errorAndErrorIsNotBoolean &&\n\t\t\t\t\t\t\t\terrorVariant === 'icon' ? (\n\t\t\t\t\t\t\t\t\t<p-input-error\n\t\t\t\t\t\t\t\t\t\terror={this.error}\n\t\t\t\t\t\t\t\t\t\tforceShowTooltip={\n\t\t\t\t\t\t\t\t\t\t\tthis._forceShowTooltip\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) : this.icon && this.iconPosition === 'end' ? (\n\t\t\t\t\t\t\t\t\t<p-icon\n\t\t\t\t\t\t\t\t\t\tclass=\"flex\"\n\t\t\t\t\t\t\t\t\t\tvariant={this.icon}\n\t\t\t\t\t\t\t\t\t\trotate={this.iconRotate}\n\t\t\t\t\t\t\t\t\t\tflip={this.iconFlip}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\tsuffix\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<slot name=\"input\" />\n\t\t\t\t\t</div>\n\t\t\t\t</p-tooltip>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('focusin')\n\thandleFocusIn() {\n\t\tthis._forceShowTooltip = true;\n\t}\n\n\t@Listen('focusout')\n\thandleFocusOut() {\n\t\tthis._forceShowTooltip = false;\n\t}\n\t/* \n     With this, we shall hack the system in ways no one would ever have thought.\n     \n     <div class=\"pl-0 pr-0 border-l-0 border-r-0 rounded-tl-none rounded-bl-none rounded-tr-none rounded-br-none\"></div>\n     */\n\tprivate _setInputClasses() {\n\t\tconst input = this._el.querySelector(':scope > [slot=\"input\"]');\n\n\t\tif (!input) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst tagName = input.tagName.toLowerCase();\n\t\tif (this._whitelistedTags.indexOf(tagName) === -1) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!input.classList.contains('p-input')) {\n\t\t\tinput.classList.add('p-input');\n\t\t}\n\n\t\tconst { prefix, suffix, errorAndErrorIsNotBoolean, errorVariant } =\n\t\t\tthis._getSlotInfo();\n\n\t\tif (\n\t\t\tsuffix ||\n\t\t\t(errorAndErrorIsNotBoolean && errorVariant === 'icon') ||\n\t\t\t(this.icon && this.iconPosition === 'end')\n\t\t) {\n\t\t\tinput.classList.add(\n\t\t\t\t'border-r-0',\n\t\t\t\t'rounded-tr-none',\n\t\t\t\t'rounded-br-none',\n\t\t\t\t'pr-0'\n\t\t\t);\n\t\t} else {\n\t\t\tinput.classList.remove(\n\t\t\t\t'border-r-0',\n\t\t\t\t'rounded-tr-none',\n\t\t\t\t'rounded-br-none',\n\t\t\t\t'pr-0'\n\t\t\t);\n\t\t}\n\n\t\tif (prefix || (this.icon && this.iconPosition === 'start')) {\n\t\t\tinput.classList.add(\n\t\t\t\t'border-l-0',\n\t\t\t\t'rounded-tl-none',\n\t\t\t\t'rounded-bl-none',\n\t\t\t\t'pl-0'\n\t\t\t);\n\t\t} else {\n\t\t\tinput.classList.remove(\n\t\t\t\t'border-l-0',\n\t\t\t\t'rounded-tl-none',\n\t\t\t\t'rounded-bl-none',\n\t\t\t\t'pl-0'\n\t\t\t);\n\t\t}\n\n\t\tif (this.size === 'small' && !input.classList.contains('size-small')) {\n\t\t\tinput.classList.add('size-small');\n\t\t}\n\n\t\tif (this.size !== 'small' && input.classList.contains('size-small')) {\n\t\t\tinput.classList.remove('size-small');\n\t\t}\n\t}\n\n\tprivate _getSlotInfo() {\n\t\tconst hasHelperSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"helper\"]'\n\t\t);\n\t\tconst hasLabelSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"label\"]'\n\t\t);\n\t\tconst hasPrefixSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"prefix\"]'\n\t\t);\n\t\tconst hasSuffixSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"suffix\"]'\n\t\t);\n\t\tconst hasHeaderSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"header\"]'\n\t\t);\n\n\t\tconst helper = hasHelperSlot ? <slot name=\"helper\" /> : this.helper;\n\t\tconst label = hasLabelSlot ? <slot name=\"label\" /> : this.label;\n\t\tconst prefix = hasPrefixSlot ? <slot name=\"prefix\" /> : this.prefix;\n\t\tconst suffix = hasSuffixSlot ? <slot name=\"suffix\" /> : this.suffix;\n\n\t\tconst errorAndErrorIsNotBoolean =\n\t\t\tthis.error &&\n\t\t\ttypeof this.error === 'string' &&\n\t\t\tthis.error !== 'true';\n\n\t\treturn {\n\t\t\thasHelperSlot,\n\t\t\thasLabelSlot,\n\t\t\thasPrefixSlot,\n\t\t\thasSuffixSlot,\n\t\t\thasHeaderSlot,\n\t\t\thelper,\n\t\t\tlabel,\n\t\t\tprefix,\n\t\t\tsuffix,\n\t\t\terrorAndErrorIsNotBoolean,\n\t\t\terrorVariant: this._el.offsetWidth <= 72 ? 'element' : 'icon',\n\t\t};\n\t}\n\n\tprivate _focusInput() {\n\t\tconst input = this._el.querySelector(':scope > [slot=\"input\"]');\n\t\t(input as HTMLElement)[this.focusMethod]();\n\t}\n}\n"],"version":3}

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

@@ -1 +1 @@
-{"file":"label.component.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,ugKAAugK;;MCSphK,KAAK;;;;;mBAUC,SAAS;oBAUJ,QAAQ;wBAKY,OAAO;;;;gBAoBM,SAAS;6BAKR,KAAK;;EAE3D,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,SAAS,IAChB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,KAAK,OAAO,KACvC,cACI,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,GACzB,CACL,EACA,CAAC,IAAI,CAAC,QAAQ,KAAK,QAAQ;MACxB,IAAI,CAAC,QAAQ,KAAK,aAAa,MAC/B,WAAK,KAAK,EAAC,QAAQ,GAAO,CAC7B,EACD,WAAK,KAAK,EAAC,SAAS,IAChB,eAAQ,CACN,EACL,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,KAAK,KAAK,KACrC,cACI,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,GACzB,CACL,CACE,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/label/label.component.scss?tag=p-label&encapsulation=shadow","src/components/atoms/label/label.component.tsx"],"sourcesContent":[":host {\n    @apply flex items-center justify-center gap-2 rounded px-2 desktop-xs:px-3;\n    @apply h-[1.625rem];\n    @apply text-sm font-semibold;\n\n    .content {\n        @apply hidden items-center desktop-xs:flex;\n    }\n\n    .circle {\n        @apply hidden h-[0.625rem] w-[0.625rem] rounded-round;\n    }\n\n    p-icon {\n        @apply hidden text-xs #{!important};\n    }\n}\n\n:host([variant='neutral']) {\n    @apply bg-mystic;\n    @apply text-storm-vague;\n\n    .circle {\n        @apply bg-storm-vague;\n    }\n}\n\n:host([variant='special']) {\n    @apply bg-indigo-light;\n    @apply text-indigo-dark;\n\n    .circle {\n        @apply bg-indigo;\n    }\n}\n\n:host([variant='info']) {\n    @apply bg-sky-light;\n    @apply text-sky;\n\n    .circle {\n        @apply bg-sky;\n    }\n}\n\n:host([variant='positive']) {\n    @apply bg-positive-light;\n    @apply text-positive;\n\n    .circle {\n        @apply bg-positive;\n    }\n}\n\n:host([variant='unbiased']) {\n    @apply bg-unbiased-light;\n    @apply text-unbiased;\n\n    .circle {\n        @apply bg-unbiased;\n    }\n}\n\n:host([variant='negative']) {\n    @apply bg-negative-light;\n    @apply text-negative;\n\n    .circle {\n        @apply bg-negative;\n    }\n}\n\n:host([size='small']) {\n    @apply h-4 min-w-[1rem] px-1 py-[1px];\n    @apply justify-center text-xs;\n    @apply leading-3;\n}\n\n:host([behavior='circle']) {\n    .circle {\n        @apply block desktop-xs:block;\n    }\n}\n\n:host([behavior='icon']) {\n    p-icon {\n        @apply flex desktop-xs:flex #{!important};\n    }\n}\n\n:host([behavior='text']) {\n    p-icon {\n        @apply hidden desktop-xs:hidden #{!important};\n    }\n\n    .circle {\n        @apply hidden desktop-xs:hidden;\n    }\n\n    .content {\n        @apply flex desktop-xs:flex;\n    }\n}\n\n:host([behavior='combination']) {\n    @apply px-0 desktop-xs:px-3;\n    @apply w-[1.625rem] desktop-xs:w-auto;\n\n    .circle {\n        @apply hidden desktop-xs:block;\n    }\n\n    p-icon {\n        @apply flex desktop-xs:hidden #{!important};\n    }\n}\n\n:host([behavior='icon-only']) {\n    @apply px-0 desktop-xs:px-0;\n    @apply w-[1.625rem];\n\n    .content {\n        @apply hidden desktop-xs:hidden;\n    }\n\n    p-icon {\n        @apply flex desktop-xs:flex #{!important};\n    }\n}\n\n:host([behavior='icon-only'][size='small']) {\n    @apply h-4 w-4;\n}\n\n:host([keep-mobile-content]),\n:host([keep-mobile-content='true']) {\n    .content {\n        @apply flex desktop-xs:flex;\n    }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { RotateOptions } from '../../../types';\nimport { IconFlipOptions, IconVariant } from '../icon/icon.component';\n\n@Component({\n    tag: 'p-label',\n    styleUrl: 'label.component.scss',\n    shadow: true,\n})\nexport class Label {\n    /**\n     * Variant of the label\n     */\n    @Prop({ reflect: true }) variant:\n        | 'neutral'\n        | 'positive'\n        | 'unbiased'\n        | 'negative'\n        | 'special'\n        | 'info' = 'neutral';\n\n    /**\n     * Define the behavior of the label\n     */\n    @Prop({ reflect: true }) behavior:\n        | 'icon'\n        | 'circle'\n        | 'combination'\n        | 'text'\n        | 'icon-only' = 'circle';\n\n    /**\n     * Icon position\n     */\n    @Prop() iconPosition: 'start' | 'end' = 'start';\n\n    /**\n     * Icon to show on the label\n     */\n    @Prop({ reflect: true }) icon: IconVariant;\n\n    /**\n     * Icon flip\n     */\n    @Prop() iconFlip: IconFlipOptions;\n\n    /**\n     * Icon rotate\n     */\n    @Prop() iconRotate: RotateOptions;\n\n    /**\n     * The size of the label\n     */\n    @Prop({ reflect: true }) size: 'small' | 'default' = 'default';\n\n    /**\n     * Wether to keep the content on mobile\n     */\n    @Prop({ reflect: true }) keepMobileContent: boolean = false;\n\n    render() {\n        return (\n            <Host class=\"p-label\">\n                {this.icon && this.iconPosition === 'start' && (\n                    <p-icon\n                        variant={this.icon}\n                        flip={this.iconFlip}\n                        rotate={this.iconRotate}\n                    />\n                )}\n                {(this.behavior === 'circle' ||\n                    this.behavior === 'combination') && (\n                    <div class=\"circle\"></div>\n                )}\n                <div class=\"content\">\n                    <slot />\n                </div>\n                {this.icon && this.iconPosition === 'end' && (\n                    <p-icon\n                        variant={this.icon}\n                        flip={this.iconFlip}\n                        rotate={this.iconRotate}\n                    />\n                )}\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"label.component.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,ugKAAugK;;MCSphK,KAAK;;;;;mBAUL,SAAS;oBAUJ,QAAQ;wBAKe,OAAO;;;;gBAoBM,SAAS;6BAKR,KAAK;;EAE3D,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAC,SAAS,IACnB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,KAAK,OAAO,KAC1C,cACC,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,GACtB,CACF,EACA,CAAC,IAAI,CAAC,QAAQ,KAAK,QAAQ;MAC3B,IAAI,CAAC,QAAQ,KAAK,aAAa,MAC/B,WAAK,KAAK,EAAC,QAAQ,GAAO,CAC1B,EACD,WAAK,KAAK,EAAC,SAAS,IACnB,eAAQ,CACH,EACL,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,KAAK,KAAK,KACxC,cACC,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,GACtB,CACF,CACK,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/label/label.component.scss?tag=p-label&encapsulation=shadow","src/components/atoms/label/label.component.tsx"],"sourcesContent":[":host {\n\t@apply flex items-center justify-center gap-2 rounded px-2 desktop-xs:px-3;\n\t@apply h-[1.625rem];\n\t@apply text-sm font-semibold;\n\n\t.content {\n\t\t@apply hidden items-center desktop-xs:flex;\n\t}\n\n\t.circle {\n\t\t@apply hidden h-[0.625rem] w-[0.625rem] rounded-round;\n\t}\n\n\tp-icon {\n\t\t@apply hidden text-xs #{!important};\n\t}\n}\n\n:host([variant='neutral']) {\n\t@apply bg-mystic;\n\t@apply text-storm-vague;\n\n\t.circle {\n\t\t@apply bg-storm-vague;\n\t}\n}\n\n:host([variant='special']) {\n\t@apply bg-indigo-light;\n\t@apply text-indigo-dark;\n\n\t.circle {\n\t\t@apply bg-indigo;\n\t}\n}\n\n:host([variant='info']) {\n\t@apply bg-sky-light;\n\t@apply text-sky;\n\n\t.circle {\n\t\t@apply bg-sky;\n\t}\n}\n\n:host([variant='positive']) {\n\t@apply bg-positive-light;\n\t@apply text-positive;\n\n\t.circle {\n\t\t@apply bg-positive;\n\t}\n}\n\n:host([variant='unbiased']) {\n\t@apply bg-unbiased-light;\n\t@apply text-unbiased;\n\n\t.circle {\n\t\t@apply bg-unbiased;\n\t}\n}\n\n:host([variant='negative']) {\n\t@apply bg-negative-light;\n\t@apply text-negative;\n\n\t.circle {\n\t\t@apply bg-negative;\n\t}\n}\n\n:host([size='small']) {\n\t@apply h-4 min-w-[1rem] px-1 py-[1px];\n\t@apply justify-center text-xs;\n\t@apply leading-3;\n}\n\n:host([behavior='circle']) {\n\t.circle {\n\t\t@apply block desktop-xs:block;\n\t}\n}\n\n:host([behavior='icon']) {\n\tp-icon {\n\t\t@apply flex desktop-xs:flex #{!important};\n\t}\n}\n\n:host([behavior='text']) {\n\tp-icon {\n\t\t@apply hidden desktop-xs:hidden #{!important};\n\t}\n\n\t.circle {\n\t\t@apply hidden desktop-xs:hidden;\n\t}\n\n\t.content {\n\t\t@apply flex desktop-xs:flex;\n\t}\n}\n\n:host([behavior='combination']) {\n\t@apply px-0 desktop-xs:px-3;\n\t@apply w-[1.625rem] desktop-xs:w-auto;\n\n\t.circle {\n\t\t@apply hidden desktop-xs:block;\n\t}\n\n\tp-icon {\n\t\t@apply flex desktop-xs:hidden #{!important};\n\t}\n}\n\n:host([behavior='icon-only']) {\n\t@apply px-0 desktop-xs:px-0;\n\t@apply w-[1.625rem];\n\n\t.content {\n\t\t@apply hidden desktop-xs:hidden;\n\t}\n\n\tp-icon {\n\t\t@apply flex desktop-xs:flex #{!important};\n\t}\n}\n\n:host([behavior='icon-only'][size='small']) {\n\t@apply h-4 w-4;\n}\n\n:host([keep-mobile-content]),\n:host([keep-mobile-content='true']) {\n\t.content {\n\t\t@apply flex desktop-xs:flex;\n\t}\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { RotateOptions } from '../../../types';\nimport { IconFlipOptions, IconVariant } from '../icon/icon.component';\n\n@Component({\n\ttag: 'p-label',\n\tstyleUrl: 'label.component.scss',\n\tshadow: true,\n})\nexport class Label {\n\t/**\n\t * Variant of the label\n\t */\n\t@Prop({ reflect: true }) variant:\n\t\t| 'neutral'\n\t\t| 'positive'\n\t\t| 'unbiased'\n\t\t| 'negative'\n\t\t| 'special'\n\t\t| 'info' = 'neutral';\n\n\t/**\n\t * Define the behavior of the label\n\t */\n\t@Prop({ reflect: true }) behavior:\n\t\t| 'icon'\n\t\t| 'circle'\n\t\t| 'combination'\n\t\t| 'text'\n\t\t| 'icon-only' = 'circle';\n\n\t/**\n\t * Icon position\n\t */\n\t@Prop() iconPosition: 'start' | 'end' = 'start';\n\n\t/**\n\t * Icon to show on the label\n\t */\n\t@Prop({ reflect: true }) icon: IconVariant;\n\n\t/**\n\t * Icon flip\n\t */\n\t@Prop() iconFlip: IconFlipOptions;\n\n\t/**\n\t * Icon rotate\n\t */\n\t@Prop() iconRotate: RotateOptions;\n\n\t/**\n\t * The size of the label\n\t */\n\t@Prop({ reflect: true }) size: 'small' | 'default' = 'default';\n\n\t/**\n\t * Wether to keep the content on mobile\n\t */\n\t@Prop({ reflect: true }) keepMobileContent: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-label\">\n\t\t\t\t{this.icon && this.iconPosition === 'start' && (\n\t\t\t\t\t<p-icon\n\t\t\t\t\t\tvariant={this.icon}\n\t\t\t\t\t\tflip={this.iconFlip}\n\t\t\t\t\t\trotate={this.iconRotate}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{(this.behavior === 'circle' ||\n\t\t\t\t\tthis.behavior === 'combination') && (\n\t\t\t\t\t<div class=\"circle\"></div>\n\t\t\t\t)}\n\t\t\t\t<div class=\"content\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t\t{this.icon && this.iconPosition === 'end' && (\n\t\t\t\t\t<p-icon\n\t\t\t\t\t\tvariant={this.icon}\n\t\t\t\t\t\tflip={this.iconFlip}\n\t\t\t\t\t\trotate={this.iconRotate}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/loader.component.js.map

@@ -1 +1 @@
-{"file":"loader.component.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,uyGAAuyG;;MCQrzG,MAAM;;;;;IA+BP,UAAK,GAAG,IAAI,CAAC,IAAI,CAAC;IAGlB,YAAO,IAAI,WAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE,GAAQ,CAAC,CAAC;gBA9BvB,IAAI;mBAUlC,QAAQ;iBAKsB,QAAQ;;;;EAiBtD,mBAAmB;IACf,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAED,qBAAqB;IACjB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAED,MAAM;IACF,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;MAC1B,OAAO,EAAC,IAAI,IAAC,KAAK,EAAC,wBAAwB,GAAQ,CAAC;KACvD;IAED,IAAI,IAAI,CAAC,OAAO,KAAK,aAAa,EAAE;MAChC,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,8BAA8B,IACtC,WAAK,KAAK,EAAC,gBAAgB,IACvB,WAAK,KAAK,EAAC,SAAS,IAChB,eAAQ,EAER,WAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,OAAO,CAAO,CAC9C,CACJ,CACH,EACT;KACL;IAED,QACI,EAAC,IAAI,IACD,KAAK,EAAE,iCACH,IAAI,CAAC,OAAO,KAAK,YAAY;QAC7B,qCACJ,EAAE,IAED,IAAI,CAAC,OAAO,CACV,EACT;GACL;EAEO,UAAU;;IACd,IAAI,IAAI,CAAC,eAAe,EAAE;MACtB,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC;MACnC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;KAC/B;IAED,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;MAChC,IAAI,CAAC,eAAe,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,SAAS,CACvC,CAAC,IAAI,MAAM,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAChC,CAAC;MACF,OAAO;KACV;IAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;GAC1B;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/loader/loader.component.scss?tag=p-loader&encapsulation=shadow","src/components/atoms/loader/loader.component.tsx"],"sourcesContent":[":host {\n    .loader {\n        @apply inline-block h-[1em] w-[1em] rounded-round;\n        @apply border-2 border-solid border-indigo-light border-t-indigo;\n        animation: 500ms spin linear infinite;\n\n        will-change: transform;\n\n        &.color-storm {\n            @apply border-storm-light/40 border-t-storm #{!important};\n        }\n\n        &.color-white {\n            @apply border-indigo-light/40 border-t-white #{!important};\n        }\n    }\n\n    .loading-screen {\n        @apply w-screen-safe h-screen-safe fixed top-0 left-0;\n        @apply flex items-center justify-center;\n        @apply bg-mystic;\n\n        z-index: 1001;\n\n        .content {\n            @apply max-w-xs;\n\n            .loader-wrapper {\n                @apply flex w-full justify-center;\n\n                .loader {\n                    @apply text-4xl;\n                }\n            }\n        }\n    }\n}\n\n:host(.variant-ghost) {\n    @apply box-border block;\n\n    will-change: background, background-position-x, background-color;\n\n    min-height: 1em;\n    min-width: 1em;\n\n    --loading-bg: #f7fafc;\n    --loading-stripe: rgba(252, 253, 254, 1);\n\n    background-color: var(--loading-bg);\n    background: linear-gradient(\n            100deg,\n            rgba(255, 255, 255, 0) 40%,\n            var(--loading-stripe) 50%,\n            rgba(255, 255, 255, 0) 60%\n        )\n        var(--loading-bg);\n    background-size: 200% 100%;\n    background-position-x: 180%;\n    animation: 1s loading ease-in-out infinite;\n}\n\n@keyframes loading {\n    to {\n        background-position-x: -20%;\n    }\n}\n\n@keyframes spin {\n    100% {\n        transform: rotate(1turn);\n    }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { Observable, Subscription } from 'rxjs';\n\n@Component({\n    tag: 'p-loader',\n    styleUrl: 'loader.component.scss',\n    shadow: true,\n})\nexport class Loader {\n    /**\n     * Wether to show or hide the loader\n     */\n    @Prop() show: boolean | Observable<boolean> = true;\n\n    /**\n     * Variant of loader\n     */\n    @Prop() variant:\n        | 'inline'\n        | 'full-width'\n        | 'full-screen'\n        | 'modal'\n        | 'ghost' = 'inline';\n\n    /**\n     * Color of the loader\n     */\n    @Prop() color: 'indigo' | 'white' | 'storm' = 'indigo';\n\n    /**\n     * !NOT IMPLEMENTED! Modal title for modal variant\n     */\n    @Prop() modalTitle: string;\n\n    /**\n     * !NOT IMPLEMENTED! Modal description for modal variant\n     */\n    @Prop() modalDescription: string;\n\n    private _show = this.show;\n    private _showSubscriber: Subscription;\n\n    private _loader = (<div class={`loader color-${this.color}`}></div>);\n\n    componentWillRender() {\n        this._checkShow();\n    }\n\n    componentShouldUpdate() {\n        this._checkShow();\n    }\n\n    render() {\n        if (!this._show) {\n            return;\n        }\n\n        if (this.variant === 'ghost') {\n            return <Host class=\"p-loader variant-ghost\"></Host>;\n        }\n\n        if (this.variant === 'full-screen') {\n            return (\n                <Host class=\"p-loader variant-full-screen\">\n                    <div class=\"loading-screen\">\n                        <div class=\"content\">\n                            <slot />\n\n                            <div class=\"loader-wrapper\">{this._loader}</div>\n                        </div>\n                    </div>\n                </Host>\n            );\n        }\n\n        return (\n            <Host\n                class={`p-loader variant-default flex ${\n                    this.variant === 'full-width' &&\n                    'w-full flex justify-center text-4xl'\n                }`}\n            >\n                {this._loader}\n            </Host>\n        );\n    }\n\n    private _checkShow() {\n        if (this._showSubscriber) {\n            this._showSubscriber.unsubscribe();\n            this._showSubscriber = null;\n        }\n\n        if (typeof this.show !== 'boolean') {\n            this._showSubscriber = this.show?.subscribe(\n                (show) => (this._show = show)\n            );\n            return;\n        }\n\n        this._show = this.show;\n    }\n}\n"],"version":3}
+{"file":"loader.component.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,uyGAAuyG;;MCQrzG,MAAM;;;;;IA+BV,UAAK,GAAG,IAAI,CAAC,IAAI,CAAC;IAGlB,YAAO,IAAI,WAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE,GAAQ,CAAC,CAAC;gBA9BvB,IAAI;mBAUrC,QAAQ;iBAKyB,QAAQ;;;;EAiBtD,mBAAmB;IAClB,IAAI,CAAC,UAAU,EAAE,CAAC;GAClB;EAED,qBAAqB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;GAClB;EAED,MAAM;IACL,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MAChB,OAAO;KACP;IAED,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;MAC7B,OAAO,EAAC,IAAI,IAAC,KAAK,EAAC,wBAAwB,GAAQ,CAAC;KACpD;IAED,IAAI,IAAI,CAAC,OAAO,KAAK,aAAa,EAAE;MACnC,QACC,EAAC,IAAI,IAAC,KAAK,EAAC,8BAA8B,IACzC,WAAK,KAAK,EAAC,gBAAgB,IAC1B,WAAK,KAAK,EAAC,SAAS,IACnB,eAAQ,EAER,WAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,OAAO,CAAO,CAC3C,CACD,CACA,EACN;KACF;IAED,QACC,EAAC,IAAI,IACJ,KAAK,EAAE,iCACN,IAAI,CAAC,OAAO,KAAK,YAAY;QAC7B,qCACD,EAAE,IAED,IAAI,CAAC,OAAO,CACP,EACN;GACF;EAEO,UAAU;;IACjB,IAAI,IAAI,CAAC,eAAe,EAAE;MACzB,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC;MACnC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;KAC5B;IAED,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;MACnC,IAAI,CAAC,eAAe,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,SAAS,CAC1C,CAAC,IAAI,MAAM,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAC7B,CAAC;MACF,OAAO;KACP;IAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;GACvB;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/loader/loader.component.scss?tag=p-loader&encapsulation=shadow","src/components/atoms/loader/loader.component.tsx"],"sourcesContent":[":host {\n\t.loader {\n\t\t@apply inline-block h-[1em] w-[1em] rounded-round;\n\t\t@apply border-2 border-solid border-indigo-light border-t-indigo;\n\t\tanimation: 500ms spin linear infinite;\n\n\t\twill-change: transform;\n\n\t\t&.color-storm {\n\t\t\t@apply border-storm-light/40 border-t-storm #{!important};\n\t\t}\n\n\t\t&.color-white {\n\t\t\t@apply border-indigo-light/40 border-t-white #{!important};\n\t\t}\n\t}\n\n\t.loading-screen {\n\t\t@apply w-screen-safe h-screen-safe fixed top-0 left-0;\n\t\t@apply flex items-center justify-center;\n\t\t@apply bg-mystic;\n\n\t\tz-index: 1001;\n\n\t\t.content {\n\t\t\t@apply max-w-xs;\n\n\t\t\t.loader-wrapper {\n\t\t\t\t@apply flex w-full justify-center;\n\n\t\t\t\t.loader {\n\t\t\t\t\t@apply text-4xl;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n:host(.variant-ghost) {\n\t@apply box-border block;\n\n\twill-change: background, background-position-x, background-color;\n\n\tmin-height: 1em;\n\tmin-width: 1em;\n\n\t--loading-bg: #f7fafc;\n\t--loading-stripe: rgba(252, 253, 254, 1);\n\n\tbackground-color: var(--loading-bg);\n\tbackground: linear-gradient(\n\t\t\t100deg,\n\t\t\trgba(255, 255, 255, 0) 40%,\n\t\t\tvar(--loading-stripe) 50%,\n\t\t\trgba(255, 255, 255, 0) 60%\n\t\t)\n\t\tvar(--loading-bg);\n\tbackground-size: 200% 100%;\n\tbackground-position-x: 180%;\n\tanimation: 1s loading ease-in-out infinite;\n}\n\n@keyframes loading {\n\tto {\n\t\tbackground-position-x: -20%;\n\t}\n}\n\n@keyframes spin {\n\t100% {\n\t\ttransform: rotate(1turn);\n\t}\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { Observable, Subscription } from 'rxjs';\n\n@Component({\n\ttag: 'p-loader',\n\tstyleUrl: 'loader.component.scss',\n\tshadow: true,\n})\nexport class Loader {\n\t/**\n\t * Wether to show or hide the loader\n\t */\n\t@Prop() show: boolean | Observable<boolean> = true;\n\n\t/**\n\t * Variant of loader\n\t */\n\t@Prop() variant:\n\t\t| 'inline'\n\t\t| 'full-width'\n\t\t| 'full-screen'\n\t\t| 'modal'\n\t\t| 'ghost' = 'inline';\n\n\t/**\n\t * Color of the loader\n\t */\n\t@Prop() color: 'indigo' | 'white' | 'storm' = 'indigo';\n\n\t/**\n\t * !NOT IMPLEMENTED! Modal title for modal variant\n\t */\n\t@Prop() modalTitle: string;\n\n\t/**\n\t * !NOT IMPLEMENTED! Modal description for modal variant\n\t */\n\t@Prop() modalDescription: string;\n\n\tprivate _show = this.show;\n\tprivate _showSubscriber: Subscription;\n\n\tprivate _loader = (<div class={`loader color-${this.color}`}></div>);\n\n\tcomponentWillRender() {\n\t\tthis._checkShow();\n\t}\n\n\tcomponentShouldUpdate() {\n\t\tthis._checkShow();\n\t}\n\n\trender() {\n\t\tif (!this._show) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.variant === 'ghost') {\n\t\t\treturn <Host class=\"p-loader variant-ghost\"></Host>;\n\t\t}\n\n\t\tif (this.variant === 'full-screen') {\n\t\t\treturn (\n\t\t\t\t<Host class=\"p-loader variant-full-screen\">\n\t\t\t\t\t<div class=\"loading-screen\">\n\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t\t<slot />\n\n\t\t\t\t\t\t\t<div class=\"loader-wrapper\">{this._loader}</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Host>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-loader variant-default flex ${\n\t\t\t\t\tthis.variant === 'full-width' &&\n\t\t\t\t\t'w-full flex justify-center text-4xl'\n\t\t\t\t}`}\n\t\t\t>\n\t\t\t\t{this._loader}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _checkShow() {\n\t\tif (this._showSubscriber) {\n\t\t\tthis._showSubscriber.unsubscribe();\n\t\t\tthis._showSubscriber = null;\n\t\t}\n\n\t\tif (typeof this.show !== 'boolean') {\n\t\t\tthis._showSubscriber = this.show?.subscribe(\n\t\t\t\t(show) => (this._show = show)\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\n\t\tthis._show = this.show;\n\t}\n}\n"],"version":3}