@paperless/core 1.9.3 → 1.10.0

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

@@ -1 +1 @@
-{"file":"p-modal-body.p-modal-container.p-modal-footer.p-modal-header.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,qBAAqB,GAAG,i8BAAi8B;;MCOl9B,SAAS;;;mBAIqB,SAAS;mBAKrB,KAAK;;EAEhC,MAAM;IACF,QACIA,QAACC,UAAI,IACD,KAAK,EAAE,wBAAwB,IAAI,CAAC,OAAO,IACvC,IAAI,CAAC,OAAO,IAAI,YACpB,EAAE,IAEFD,qBAAQ,CACL,EACT;GACL;;;;AC5BL,MAAM,0BAA0B,GAAG,ygFAAygF;;ACE5iF;AACA;AACA;AACA;AACA;AAEA,MAAM,UAAU,GAAG;EACf,EAAE,EAAE,aAAa;EACjB,EAAE,EAAE,oBAAoB;EACxB,EAAE,EAAE,kBAAkB;EACtB,EAAE,EAAE,oBAAoB;EACxB,EAAE,EAAE,oBAAoB;CAC3B,CAAC;MAKW,cAAc;;;gBAImB,IAAI;mBAKnB,KAAK;;EAEhC,MAAM;IACF,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAExC,QACIA,QAACC,UAAI,IACD,KAAK,EAAE,qBACH,IAAI,CAAC,OAAO,IAAI,SACpB,IAAI,SAAS,EAAE,IAEfD,qBAAQ,CACL,EACT;GACL;;;;AC1CL,MAAM,uBAAuB,GAAG,8sBAA8sB;;MCOjuB,WAAW;;;;EACpB,MAAM;IACF,QACIA,QAACC,UAAI,IAAC,KAAK,EAAC,gBAAgB,IACxBD,uBAAW,KAAK,EAAC,kCAAkC,GAAG,EAEtDA,qBAAQ,CACL,EACT;GACL;;;;AChBL,MAAM,uBAAuB,GAAG,29BAA29B;;MCO9+B,WAAW;;;;qBAIA,IAAI;;EASxB,MAAM;IACF,QACIA,QAACC,UAAI,IAAC,KAAK,EAAC,gBAAgB,IACxBD,sBACIA,qBAAQ,CACL,EAEN,IAAI,CAAC,SAAS,KACXA,sBACI,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,EACpC,IAAI,EAAC,OAAO,GACJ,CACf,CACE,EACT;GACL;;;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/modal-body/modal-body.component.scss?tag=p-modal-body&encapsulation=shadow","src/components/atoms/modal-body/modal-body.component.tsx","src/components/atoms/modal-container/modal-container.component.scss?tag=p-modal-container","src/components/atoms/modal-container/modal-container.component.tsx","src/components/atoms/modal-footer/modal-footer.component.scss?tag=p-modal-footer&encapsulation=shadow","src/components/atoms/modal-footer/modal-footer.component.tsx","src/components/atoms/modal-header/modal-header.component.scss?tag=p-modal-header&encapsulation=shadow","src/components/atoms/modal-header/modal-header.component.tsx"],"sourcesContent":[":host {\n    @apply bg-white;\n    @apply px-6 tablet:px-10 desktop-xs:px-14 py-6;\n}\n\n:host(.variant-table) {\n    @apply px-6;\n}\n\n:host(.is-rounded) {\n    @apply rounded-b-none desktop-xs:rounded-b-xxlarge;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-modal-body',\n    styleUrl: 'modal-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    /**\n     * Wether the modal body should be rounded at the bottom\n     */\n    @Prop() rounded: boolean = false;\n\n    render() {\n        return (\n            <Host\n                class={`p-modal-body variant-${this.variant} ${\n                    this.rounded && 'is-rounded'\n                }`}\n            >\n                <slot />\n            </Host>\n        );\n    }\n}\n","p-modal-container {\n    @apply flex flex-col w-full tablet:w-auto z-modal;\n    @apply rounded-b-none rounded-t-xxlarge desktop-xs:rounded-b-xxlarge;\n\n    @apply animate-slide-in-bottom desktop-xs:animate-slide-in-bottom-small #{!important};\n\n    @apply shadow-4 #{!important};\n\n    &.closing {\n        @apply animate-slide-out-bottom desktop-xs:animate-slide-out-bottom-small #{!important};\n    }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n// $modal-xs: 20rem;\n// $modal-sm: 33.5rem;\n// $modal-md: 38rem;\n// $modal-lg: 47.5rem;\n// $modal-xl: 57.5rem;\n\nconst modalSizes = {\n    xs: 'tablet:w-80',\n    sm: 'tablet:w-[33.5rem]',\n    md: 'tablet:w-[38rem]',\n    lg: 'tablet:w-[47.5rem]',\n    xl: 'tablet:w-[57.5rem]',\n};\n@Component({\n    tag: 'p-modal-container',\n    styleUrl: 'modal-container.component.scss',\n})\nexport class ModalContainer {\n    /**\n     * The size of the modal container\n     */\n    @Prop() size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n    /**\n     * Wether the container is closing\n     */\n    @Prop() closing: boolean = false;\n\n    render() {\n        const sizeClass = modalSizes[this.size];\n\n        return (\n            <Host\n                class={`p-modal-container ${\n                    this.closing && 'closing'\n                } ${sizeClass}`}\n            >\n                <slot />\n            </Host>\n        );\n    }\n}\n",":host {\n    @apply bg-white;\n    @apply flex flex-col;\n    @apply pb-6 px-6;\n    @apply rounded-b-none desktop-xs:rounded-b-xxlarge;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n    tag: 'p-modal-footer',\n    styleUrl: 'modal-footer.component.scss',\n    shadow: true,\n})\nexport class ModalFooter {\n    render() {\n        return (\n            <Host class=\"p-modal-footer\">\n                <p-divider class=\"mb-6 mt-0 hidden desktop-xs:flex\" />\n\n                <slot />\n            </Host>\n        );\n    }\n}\n",":host {\n    @apply bg-mystic rounded-t-xxlarge;\n    @apply flex justify-between items-center;\n    @apply p-4 desktop-xs:p-6;\n\n    @apply text-storm-dark text-xl font-semibold;\n    @apply desktop-xs:text-3xl desktop-xs:font-bold;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-modal-header',\n    styleUrl: 'modal-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-modal-header\">\n                <span>\n                    <slot />\n                </span>\n\n                {this.showClose && (\n                    <p-button\n                        variant=\"secondary\"\n                        icon=\"negative\"\n                        iconOnly={true}\n                        onClick={(ev) => this.close.emit(ev)}\n                        size=\"small\"\n                    ></p-button>\n                )}\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"p-modal-body.p-modal-container.p-modal-footer.p-modal-header.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,qBAAqB,GAAG,s7BAAs7B;;MCOv8B,SAAS;;;mBAIqB,SAAS;mBAKrB,KAAK;mBAKL,IAAI;;EAE/B,MAAM;IACF,QACIA,QAACC,UAAI,IACD,KAAK,EAAE,wBAAwB,IAAI,CAAC,OAAO,IACvC,IAAI,CAAC,OAAO,IAAI,YACpB,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,YAAY,EAAE,IAEnCD,qBAAQ,CACL,EACT;GACL;;;;ACjCL,MAAM,0BAA0B,GAAG,ygFAAygF;;ACE5iF;AACA;AACA;AACA;AACA;AAEA,MAAM,UAAU,GAAG;EACf,EAAE,EAAE,aAAa;EACjB,EAAE,EAAE,oBAAoB;EACxB,EAAE,EAAE,kBAAkB;EACtB,EAAE,EAAE,oBAAoB;EACxB,EAAE,EAAE,oBAAoB;CAC3B,CAAC;MAKW,cAAc;;;gBAImB,IAAI;mBAKnB,KAAK;;EAEhC,MAAM;IACF,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAExC,QACIA,QAACC,UAAI,IACD,KAAK,EAAE,qBACH,IAAI,CAAC,OAAO,IAAI,SACpB,IAAI,SAAS,EAAE,IAEfD,qBAAQ,CACL,EACT;GACL;;;;AC1CL,MAAM,uBAAuB,GAAG,8sBAA8sB;;MCOjuB,WAAW;;;;EACpB,MAAM;IACF,QACIA,QAACC,UAAI,IAAC,KAAK,EAAC,gBAAgB,IACxBD,uBAAW,KAAK,EAAC,kCAAkC,GAAG,EAEtDA,qBAAQ,CACL,EACT;GACL;;;;AChBL,MAAM,uBAAuB,GAAG,29BAA29B;;MCO9+B,WAAW;;;;qBAIA,IAAI;;EASxB,MAAM;IACF,QACIA,QAACC,UAAI,IAAC,KAAK,EAAC,gBAAgB,IACxBD,sBACIA,qBAAQ,CACL,EAEN,IAAI,CAAC,SAAS,KACXA,sBACI,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,EACpC,IAAI,EAAC,OAAO,GACJ,CACf,CACE,EACT;GACL;;;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/modal-body/modal-body.component.scss?tag=p-modal-body&encapsulation=shadow","src/components/atoms/modal-body/modal-body.component.tsx","src/components/atoms/modal-container/modal-container.component.scss?tag=p-modal-container","src/components/atoms/modal-container/modal-container.component.tsx","src/components/atoms/modal-footer/modal-footer.component.scss?tag=p-modal-footer&encapsulation=shadow","src/components/atoms/modal-footer/modal-footer.component.tsx","src/components/atoms/modal-header/modal-header.component.scss?tag=p-modal-header&encapsulation=shadow","src/components/atoms/modal-header/modal-header.component.tsx"],"sourcesContent":[":host {\n    @apply bg-white;\n    @apply px-6 py-6 tablet:px-10 desktop-xs:px-14;\n}\n\n:host(.variant-table) {\n    @apply px-6;\n}\n\n:host(.is-rounded) {\n    @apply rounded-b-none desktop-xs:rounded-b-xxlarge;\n}\n\n:host(.no-padding) {\n    @apply p-0;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-modal-body',\n    styleUrl: 'modal-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    /**\n     * Wether the modal body should be rounded at the bottom\n     */\n    @Prop() rounded: boolean = false;\n\n    /**\n     * Wether the body should have padding\n     */\n    @Prop() padding: boolean = true;\n\n    render() {\n        return (\n            <Host\n                class={`p-modal-body variant-${this.variant} ${\n                    this.rounded && 'is-rounded'\n                } ${!this.padding && 'no-padding'}`}\n            >\n                <slot />\n            </Host>\n        );\n    }\n}\n","p-modal-container {\n    @apply flex flex-col w-full tablet:w-auto z-modal;\n    @apply rounded-b-none rounded-t-xxlarge desktop-xs:rounded-b-xxlarge;\n\n    @apply animate-slide-in-bottom desktop-xs:animate-slide-in-bottom-small #{!important};\n\n    @apply shadow-4 #{!important};\n\n    &.closing {\n        @apply animate-slide-out-bottom desktop-xs:animate-slide-out-bottom-small #{!important};\n    }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n// $modal-xs: 20rem;\n// $modal-sm: 33.5rem;\n// $modal-md: 38rem;\n// $modal-lg: 47.5rem;\n// $modal-xl: 57.5rem;\n\nconst modalSizes = {\n    xs: 'tablet:w-80',\n    sm: 'tablet:w-[33.5rem]',\n    md: 'tablet:w-[38rem]',\n    lg: 'tablet:w-[47.5rem]',\n    xl: 'tablet:w-[57.5rem]',\n};\n@Component({\n    tag: 'p-modal-container',\n    styleUrl: 'modal-container.component.scss',\n})\nexport class ModalContainer {\n    /**\n     * The size of the modal container\n     */\n    @Prop() size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n    /**\n     * Wether the container is closing\n     */\n    @Prop() closing: boolean = false;\n\n    render() {\n        const sizeClass = modalSizes[this.size];\n\n        return (\n            <Host\n                class={`p-modal-container ${\n                    this.closing && 'closing'\n                } ${sizeClass}`}\n            >\n                <slot />\n            </Host>\n        );\n    }\n}\n",":host {\n    @apply bg-white;\n    @apply flex flex-col;\n    @apply pb-6 px-6;\n    @apply rounded-b-none desktop-xs:rounded-b-xxlarge;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n    tag: 'p-modal-footer',\n    styleUrl: 'modal-footer.component.scss',\n    shadow: true,\n})\nexport class ModalFooter {\n    render() {\n        return (\n            <Host class=\"p-modal-footer\">\n                <p-divider class=\"mb-6 mt-0 hidden desktop-xs:flex\" />\n\n                <slot />\n            </Host>\n        );\n    }\n}\n",":host {\n    @apply bg-mystic rounded-t-xxlarge;\n    @apply flex justify-between items-center;\n    @apply p-4 desktop-xs:p-6;\n\n    @apply text-storm-dark text-xl font-semibold;\n    @apply desktop-xs:text-3xl desktop-xs:font-bold;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-modal-header',\n    styleUrl: 'modal-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-modal-header\">\n                <span>\n                    <slot />\n                </span>\n\n                {this.showClose && (\n                    <p-button\n                        variant=\"secondary\"\n                        icon=\"negative\"\n                        iconOnly={true}\n                        onClick={(ev) => this.close.emit(ev)}\n                        size=\"small\"\n                    ></p-button>\n                )}\n            </Host>\n        );\n    }\n}\n"],"version":3}

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

@@ -20,6 +20,7 @@ const Modal = class {
     this.showMobileFooter = false;
     this.backdropClickClose = true;
     this.scrollLock = true;
+    this.padding = true;
     this._closing = false;
   }
   componentWillLoad() {
@@ -36,7 +37,7 @@ const Modal = class {
     const footerContent = index.h("slot", { name: "footer" });
     return (index.h(index.Host, { class: "p-modal" }, index.h("p-backdrop", { applyBlur: this.applyBlur, onClicked: (ev) => this._backdropClick(ev.detail), closing: this._closing, scrollLock: this.scrollLock }, index.h("p-modal-container", { size: this.size, closing: this._closing }, (((_a = this.header) === null || _a === void 0 ? void 0 : _a.length) || this._hasHeaderSlot) && (index.h("p-modal-header", { showClose: this.showClose, onClose: (ev) => this.close(ev.detail) }, this._hasHeaderSlot
       ? headerContent
-      : this.header)), index.h("p-modal-body", { variant: this.variant, rounded: !this._hasFooterSlot }, bodyContent), this._hasFooterSlot && (index.h("p-modal-footer", null, footerContent))))));
+      : this.header)), index.h("p-modal-body", { variant: this.variant, rounded: !this._hasFooterSlot, padding: this.padding }, bodyContent), this._hasFooterSlot && (index.h("p-modal-footer", null, footerContent))))));
   }
   _backdropClick(ev) {
     if (!this.backdropClickClose) {

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

@@ -1 +1 @@
-{"file":"p-modal.entry.cjs.js","mappings":";;;;;;MAea,KAAK;;;;;IAiEN,mBAAc,GAAG,KAAK,CAAC;IACvB,mBAAc,GAAG,KAAK,CAAC;gBA9DW,IAAI;mBAKP,SAAS;;gBAUxB,KAAK;qBAKA,KAAK;qBAKd,IAAI;4BAKG,KAAK;8BAKH,IAAI;sBAKH,IAAI;oBAwBN,KAAK;;EAEjC,iBAAiB;IACb,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC1C,0BAA0B,CAC7B,CAAC;IACF,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC1C,0BAA0B,CAC7B,CAAC;GACL;EAED,MAAM;;IACF,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,MAAM,aAAa,GAAGA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAAC;IAC7C,MAAM,WAAW,GAAGA,kBAAM,IAAI,EAAC,SAAS,GAAG,CAAC;IAC5C,MAAM,aAAa,GAAGA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAAC;IAE7C,QACIA,QAACC,UAAI,IAAC,KAAK,EAAC,SAAS,IACjBD,wBACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,MAAM,CAAC,EACjD,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,UAAU,EAAE,IAAI,CAAC,UAAU,IAE3BA,+BAAmB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACrD,CAAC,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,KAAI,IAAI,CAAC,cAAc,MACxCA,4BACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,IAErC,IAAI,CAAC,cAAc;QACd,aAAa;QACb,IAAI,CAAC,MAAM,CACJ,CACpB,EACDA,0BACI,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,CAAC,IAAI,CAAC,cAAc,IAE5B,WAAW,CACD,EACd,IAAI,CAAC,cAAc,KAChBA,gCAAiB,aAAa,CAAkB,CACnD,CACe,CACX,CACV,EACT;GACL;EAEO,cAAc,CAAC,EAAc;IACjC,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;MAC1B,OAAO;KACV;IAED,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;GAClB;EAEM,KAAK,CAAC,EAAc;IACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAE3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IAErB,UAAU,CAAC;MACP,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;MAEtB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACtB,EAAE,GAAG,CAAC,CAAC;GACX;;;;;;","names":["h","Host"],"sources":["src/components/organisms/modal/modal.component.tsx"],"sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State\n} from '@stencil/core';\n\n@Component({\n    tag: 'p-modal',\n    shadow: true,\n})\nexport class Modal {\n    /**\n     * The size of the modal container\n     */\n    @Prop() size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n    /**\n     * The variant of the modal body\n     */\n    @Prop() variant: 'default' | 'table' = 'default';\n\n    /**\n     * The Header of the modal\n     */\n    @Prop() header?: string;\n\n    /**\n     * Wether to show the modal or not\n     */\n    @Prop() show: boolean = false;\n\n    /**\n     * Wether to apply blur to the backdrop\n     */\n    @Prop() applyBlur: boolean = false;\n\n    /**\n     * Wether to show the close button in the header\n     */\n    @Prop() showClose = true;\n\n    /**\n     * Wether to show the footer on mobile\n     */\n    @Prop() showMobileFooter = false;\n\n    /**\n     * Wether to hide the modal when the backdrop is clicked\n     */\n    @Prop() backdropClickClose = true;\n\n    /**\n     * Wether we should scroll lock the body\n     */\n    @Prop() scrollLock: boolean = true;\n\n    /**\n     * Close click event\n     */\n    @Event({\n        bubbles: false\n    }) closeClicked: EventEmitter<MouseEvent>;\n\n    /**\n     * Closed event\n     */\n    @Event({\n        bubbles: false\n    }) closed: EventEmitter<null>;\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    private _hasFooterSlot = false;\n    private _hasHeaderSlot = false;\n\n    @State() private _closing = false;\n\n    componentWillLoad() {\n        this._hasFooterSlot = !!this._el.querySelector(\n            ':scope > [slot=\"footer\"]'\n        );\n        this._hasHeaderSlot = !!this._el.querySelector(\n            ':scope > [slot=\"header\"]'\n        );\n    }\n\n    render() {\n        if (!this.show) {\n            return;\n        }\n\n        const headerContent = <slot name=\"header\" />;\n        const bodyContent = <slot name=\"content\" />;\n        const footerContent = <slot name=\"footer\" />;\n\n        return (\n            <Host class=\"p-modal\">\n                <p-backdrop\n                    applyBlur={this.applyBlur}\n                    onClicked={(ev) => this._backdropClick(ev.detail)}\n                    closing={this._closing}\n                    scrollLock={this.scrollLock}\n                >\n                    <p-modal-container size={this.size} closing={this._closing}>\n                        {(this.header?.length || this._hasHeaderSlot) && (\n                            <p-modal-header\n                                showClose={this.showClose}\n                                onClose={(ev) => this.close(ev.detail)}\n                            >\n                                {this._hasHeaderSlot\n                                    ? headerContent\n                                    : this.header}\n                            </p-modal-header>\n                        )}\n                        <p-modal-body\n                            variant={this.variant}\n                            rounded={!this._hasFooterSlot}\n                        >\n                            {bodyContent}\n                        </p-modal-body>\n                        {this._hasFooterSlot && (\n                            <p-modal-footer>{footerContent}</p-modal-footer>\n                        )}\n                    </p-modal-container>\n                </p-backdrop>\n            </Host>\n        );\n    }\n\n    private _backdropClick(ev: MouseEvent) {\n        if (!this.backdropClickClose) {\n            return;\n        }\n\n        this.close(ev);\n    }\n\n    public close(ev: MouseEvent) {\n        this.closeClicked.emit(ev);\n\n        this._closing = true;\n\n        setTimeout(() => {\n            this.show = false;\n            this._closing = false;\n\n            this.closed.emit();\n        }, 550);\n    }\n}\n"],"version":3}
+{"file":"p-modal.entry.cjs.js","mappings":";;;;;;MAea,KAAK;;;;;IAwEN,mBAAc,GAAG,KAAK,CAAC;IACvB,mBAAc,GAAG,KAAK,CAAC;gBArEW,IAAI;mBAKP,SAAS;;gBAUxB,KAAK;qBAKA,KAAK;qBAKd,IAAI;4BAKG,KAAK;8BAKH,IAAI;sBAKH,IAAI;mBAKP,IAAI;oBA0BH,KAAK;;EAEjC,iBAAiB;IACb,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC1C,0BAA0B,CAC7B,CAAC;IACF,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC1C,0BAA0B,CAC7B,CAAC;GACL;EAED,MAAM;;IACF,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,MAAM,aAAa,GAAGA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAAC;IAC7C,MAAM,WAAW,GAAGA,kBAAM,IAAI,EAAC,SAAS,GAAG,CAAC;IAC5C,MAAM,aAAa,GAAGA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAAC;IAE7C,QACIA,QAACC,UAAI,IAAC,KAAK,EAAC,SAAS,IACjBD,wBACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,MAAM,CAAC,EACjD,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,UAAU,EAAE,IAAI,CAAC,UAAU,IAE3BA,+BAAmB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACrD,CAAC,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,KAAI,IAAI,CAAC,cAAc,MACxCA,4BACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,IAErC,IAAI,CAAC,cAAc;QACd,aAAa;QACb,IAAI,CAAC,MAAM,CACJ,CACpB,EACDA,0BACI,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,CAAC,IAAI,CAAC,cAAc,EAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,WAAW,CACD,EACd,IAAI,CAAC,cAAc,KAChBA,gCAAiB,aAAa,CAAkB,CACnD,CACe,CACX,CACV,EACT;GACL;EAEO,cAAc,CAAC,EAAc;IACjC,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;MAC1B,OAAO;KACV;IAED,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;GAClB;EAEM,KAAK,CAAC,EAAc;IACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAE3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IAErB,UAAU,CAAC;MACP,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;MAEtB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACtB,EAAE,GAAG,CAAC,CAAC;GACX;;;;;;","names":["h","Host"],"sources":["src/components/organisms/modal/modal.component.tsx"],"sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n} from '@stencil/core';\n\n@Component({\n    tag: 'p-modal',\n    shadow: true,\n})\nexport class Modal {\n    /**\n     * The size of the modal container\n     */\n    @Prop() size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n    /**\n     * The variant of the modal body\n     */\n    @Prop() variant: 'default' | 'table' = 'default';\n\n    /**\n     * The Header of the modal\n     */\n    @Prop() header?: string;\n\n    /**\n     * Wether to show the modal or not\n     */\n    @Prop() show: boolean = false;\n\n    /**\n     * Wether to apply blur to the backdrop\n     */\n    @Prop() applyBlur: boolean = false;\n\n    /**\n     * Wether to show the close button in the header\n     */\n    @Prop() showClose = true;\n\n    /**\n     * Wether to show the footer on mobile\n     */\n    @Prop() showMobileFooter = false;\n\n    /**\n     * Wether to hide the modal when the backdrop is clicked\n     */\n    @Prop() backdropClickClose = true;\n\n    /**\n     * Wether we should scroll lock the body\n     */\n    @Prop() scrollLock: boolean = true;\n\n    /**\n     * Wether the body should have padding\n     */\n    @Prop() padding: boolean = true;\n\n    /**\n     * Close click event\n     */\n    @Event({\n        bubbles: false,\n    })\n    closeClicked: EventEmitter<MouseEvent>;\n\n    /**\n     * Closed event\n     */\n    @Event({\n        bubbles: false,\n    })\n    closed: EventEmitter<null>;\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    private _hasFooterSlot = false;\n    private _hasHeaderSlot = false;\n\n    @State() private _closing = false;\n\n    componentWillLoad() {\n        this._hasFooterSlot = !!this._el.querySelector(\n            ':scope > [slot=\"footer\"]'\n        );\n        this._hasHeaderSlot = !!this._el.querySelector(\n            ':scope > [slot=\"header\"]'\n        );\n    }\n\n    render() {\n        if (!this.show) {\n            return;\n        }\n\n        const headerContent = <slot name=\"header\" />;\n        const bodyContent = <slot name=\"content\" />;\n        const footerContent = <slot name=\"footer\" />;\n\n        return (\n            <Host class=\"p-modal\">\n                <p-backdrop\n                    applyBlur={this.applyBlur}\n                    onClicked={(ev) => this._backdropClick(ev.detail)}\n                    closing={this._closing}\n                    scrollLock={this.scrollLock}\n                >\n                    <p-modal-container size={this.size} closing={this._closing}>\n                        {(this.header?.length || this._hasHeaderSlot) && (\n                            <p-modal-header\n                                showClose={this.showClose}\n                                onClose={(ev) => this.close(ev.detail)}\n                            >\n                                {this._hasHeaderSlot\n                                    ? headerContent\n                                    : this.header}\n                            </p-modal-header>\n                        )}\n                        <p-modal-body\n                            variant={this.variant}\n                            rounded={!this._hasFooterSlot}\n                            padding={this.padding}\n                        >\n                            {bodyContent}\n                        </p-modal-body>\n                        {this._hasFooterSlot && (\n                            <p-modal-footer>{footerContent}</p-modal-footer>\n                        )}\n                    </p-modal-container>\n                </p-backdrop>\n            </Host>\n        );\n    }\n\n    private _backdropClick(ev: MouseEvent) {\n        if (!this.backdropClickClose) {\n            return;\n        }\n\n        this.close(ev);\n    }\n\n    public close(ev: MouseEvent) {\n        this.closeClicked.emit(ev);\n\n        this._closing = true;\n\n        setTimeout(() => {\n            this.show = false;\n            this._closing = false;\n\n            this.closed.emit();\n        }, 550);\n    }\n}\n"],"version":3}

package/dist/cjs/paperless.cjs.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy(JSON.parse("[[\"p-button_3.cjs\",[[4,\"p-button\",{\"variant\":[1],\"href\":[1],\"target\":[1],\"size\":[1],\"loading\":[4],\"chevron\":[8],\"chevronPosition\":[1,\"chevron-position\"],\"disabled\":[4],\"icon\":[1],\"iconOnly\":[4,\"icon-only\"],\"iconPosition\":[1,\"icon-position\"],\"iconFlip\":[1,\"icon-flip\"],\"iconRotate\":[2,\"icon-rotate\"],\"inheritText\":[4,\"inherit-text\"]},[[2,\"click\",\"handleClick\"]]],[1,\"p-loader\",{\"show\":[4],\"variant\":[1],\"color\":[1],\"modalTitle\":[1,\"modal-title\"],\"modalDescription\":[1,\"modal-description\"]}],[0,\"p-icon\",{\"variant\":[1],\"size\":[1],\"rotate\":[2],\"flip\":[1]}]]],[\"p-table.cjs\",[[4,\"p-table\",{\"items\":[1],\"loading\":[4],\"headerLoading\":[4,\"header-loading\"],\"footerLoading\":[4,\"footer-loading\"],\"amountOfLoadingRows\":[2,\"amount-of-loading-rows\"],\"enableRowSelection\":[4,\"enable-row-selection\"],\"enableRowClick\":[4,\"enable-row-click\"],\"selectedRows\":[16],\"selectionKey\":[1,\"selection-key\"],\"canSelectKey\":[1,\"can-select-key\"],\"enableHeader\":[4,\"enable-header\"],\"quickFilters\":[16],\"activeQuickFilterIdentifier\":[1,\"active-quick-filter-identifier\"],\"enableSearch\":[4,\"enable-search\"],\"query\":[1025],\"enableFilter\":[4,\"enable-filter\"],\"selectedFiltersAmount\":[2,\"selected-filters-amount\"],\"filterButtonTemplate\":[16],\"enableEdit\":[4,\"enable-edit\"],\"editButtonLoading\":[4,\"edit-button-loading\"],\"editButtonIcon\":[1,\"edit-button-icon\"],\"editButtonText\":[1,\"edit-button-text\"],\"editButtonTemplate\":[16],\"enableFooter\":[4,\"enable-footer\"],\"enablePageSize\":[4,\"enable-page-size\"],\"enablePagination\":[4,\"enable-pagination\"],\"enableExport\":[4,\"enable-export\"],\"page\":[1538],\"total\":[2],\"pageSize\":[2,\"page-size\"],\"pageSizeOptions\":[16],\"hideOnSinglePage\":[4,\"hide-on-single-page\"],\"emptyStateHeader\":[16],\"emptyStateContent\":[16],\"emptyStateAction\":[16],\"enableEmptyStateAction\":[4,\"enable-empty-state-action\"],\"emptyStateFilteredHeader\":[16],\"emptyStateFilteredContent\":[16],\"_locales\":[32],\"_columns\":[32],\"_items\":[32]},[[16,\"localeChanged\",\"_setLocales\"],[16,\"tableDefinitionChanged\",\"onTableDefinitionUpdated\"],[4,\"keydown\",\"keyDown\"],[4,\"keyup\",\"keyUp\"],[4,\"visibilitychange\",\"visibilityChange\"]],{\"items\":[\"_parseItems\"]}]]],[\"p-modal.cjs\",[[1,\"p-modal\",{\"size\":[1],\"variant\":[1],\"header\":[1],\"show\":[4],\"applyBlur\":[4,\"apply-blur\"],\"showClose\":[4,\"show-close\"],\"showMobileFooter\":[4,\"show-mobile-footer\"],\"backdropClickClose\":[4,\"backdrop-click-close\"],\"scrollLock\":[4,\"scroll-lock\"],\"_closing\":[32]}]]],[\"p-select.cjs\",[[0,\"p-select\",{\"items\":[1],\"icon\":[1],\"query\":[1],\"placeholder\":[1],\"autocompletePlaceholder\":[1,\"autocomplete-placeholder\"],\"value\":[8],\"displayKey\":[1,\"display-key\"],\"valueKey\":[1,\"value-key\"],\"identifierKey\":[1,\"identifier-key\"],\"queryKey\":[1,\"query-key\"],\"autoSelectFirst\":[4,\"auto-select-first\"],\"showChevron\":[4,\"show-chevron\"],\"maxDisplayedItems\":[2,\"max-displayed-items\"],\"enableAutocomplete\":[4,\"enable-autocomplete\"],\"keepQuery\":[4,\"keep-query\"],\"asyncFilter\":[4,\"async-filter\"],\"loading\":[4],\"size\":[1],\"prefix\":[1],\"label\":[1],\"helper\":[1],\"required\":[516],\"error\":[513],\"disabled\":[516],\"_showDropdown\":[32],\"_selectedItem\":[32],\"_isAutoCompleting\":[32]},[[6,\"click\",\"documentClickHandler\"]],{\"value\":[\"_valueChange\"],\"items\":[\"itemChanges\"],\"_showDropdown\":[\"_showDropdownChanges\"]}]]],[\"p-datepicker.cjs\",[[0,\"p-datepicker\",{\"placeholder\":[1],\"value\":[1],\"preselectToday\":[4,\"preselect-today\"],\"disabledDates\":[1,\"disabled-dates\"],\"minDate\":[1,\"min-date\"],\"maxDate\":[1,\"max-date\"],\"disableWeekends\":[4,\"disable-weekends\"],\"mode\":[1],\"format\":[1],\"size\":[1],\"prefix\":[1],\"label\":[1],\"helper\":[1],\"required\":[516],\"error\":[513],\"disabled\":[516],\"_showDropdown\":[32],\"_value\":[32],\"_minDate\":[32],\"_maxDate\":[32],\"_disabledDates\":[32]},[[6,\"click\",\"documentClickHandler\"]],{\"value\":[\"parseValue\"],\"minDate\":[\"parseMinDate\"],\"maxDate\":[\"parseMaxDate\"],\"disabledDates\":[\"parseDisabledDates\"]}]]],[\"p-drawer.cjs\",[[1,\"p-drawer\",{\"header\":[1],\"show\":[4],\"applyBlur\":[4,\"apply-blur\"],\"showClose\":[4,\"show-close\"],\"backdropClickClose\":[4,\"backdrop-click-close\"],\"canClose\":[4,\"can-close\"],\"scrollLock\":[4,\"scroll-lock\"],\"_closing\":[32]}]]],[\"p-attachment.cjs\",[[1,\"p-attachment\",{\"mode\":[1],\"loading\":[4],\"error\":[1],\"downloading\":[4]}]]],[\"p-navbar.cjs\",[[1,\"p-navbar\",{\"closeText\":[1,\"close-text\"],\"menuText\":[1,\"menu-text\"],\"_showMenu\":[32]},[[8,\"closeNavbar\",\"handleCloseNavbar\"],[8,\"openNavbar\",\"handleOpenNavbar\"]]]]],[\"p-profile.cjs\",[[1,\"p-profile\",{\"variant\":[1],\"size\":[513],\"_dropdownOpen\":[32]}]]],[\"p-toast.cjs\",[[1,\"p-toast\",{\"variant\":[1],\"header\":[1],\"content\":[1],\"enableAction\":[4,\"enable-action\"],\"actionIcon\":[1,\"action-icon\"],\"actionIconFlip\":[1,\"action-icon-flip\"],\"actionIconRotate\":[2,\"action-icon-rotate\"]}]]],[\"p-accordion.cjs\",[[1,\"p-accordion\",{\"header\":[1],\"open\":[4],\"closeable\":[4],\"openable\":[4]}]]],[\"p-navigation-item.cjs\",[[1,\"p-navigation-item\",{\"active\":[4],\"icon\":[1],\"counter\":[8],\"href\":[1],\"target\":[1]}]]],[\"p-card-header.cjs\",[[4,\"p-card-header\",{\"header\":[1],\"arrow\":[4]}]]],[\"p-content-slider.cjs\",[[1,\"p-content-slider\",{\"hideMobileIndicator\":[4,\"hide-mobile-indicator\"],\"disableDrag\":[4,\"disable-drag\"],\"disableAutoCenter\":[4,\"disable-auto-center\"],\"disableIndicatorClick\":[4,\"disable-indicator-click\"],\"_visibleIndex\":[32],\"_outerHeight\":[32],\"_totalWidth\":[32],\"_dragging\":[32]},[[9,\"mouseup\",\"mouseUpHandler\"],[9,\"touchend\",\"mouseUpHandler\"],[9,\"resize\",\"resizeHandler\"]]]]],[\"p-info-panel.cjs\",[[1,\"p-info-panel\",{\"variant\":[1],\"header\":[1],\"content\":[1],\"closeable\":[4]}]]],[\"p-status.cjs\",[[4,\"p-status\",{\"variant\":[1],\"icon\":[1],\"iconFlip\":[1,\"icon-flip\"],\"iconRotate\":[2,\"icon-rotate\"]}]]],[\"p-stepper-line.cjs\",[[1,\"p-stepper-line\",{\"active\":[516],\"direction\":[513]}]]],[\"p-stepper.cjs\",[[1,\"p-stepper\",{\"activeStep\":[2,\"active-step\"],\"direction\":[513],\"contentPosition\":[513,\"content-position\"]},null,{\"activeStep\":[\"_generateSteps\"]}]]],[\"p-stepper-item.cjs\",[[1,\"p-stepper-item\",{\"align\":[513],\"direction\":[513],\"contentPosition\":[513,\"content-position\"],\"finished\":[516],\"active\":[516]}]]],[\"p-divider.cjs\",[[1,\"p-divider\"]]],[\"p-tab-group.cjs\",[[1,\"p-tab-group\"]]],[\"p-avatar.cjs\",[[0,\"p-avatar\",{\"variant\":[513],\"size\":[513],\"defaultImage\":[1,\"default-image\"],\"src\":[1],\"_src\":[32]},null,{\"src\":[\"onSrchChange\"]}]]],[\"p-avatar-group.cjs\",[[4,\"p-avatar-group\",{\"extra\":[2]}]]],[\"p-card-body.cjs\",[[4,\"p-card-body\",{\"inheritText\":[516,\"inherit-text\"]}]]],[\"p-card-container.cjs\",[[1,\"p-card-container\",{\"hoverable\":[516],\"shadow\":[516]}]]],[\"p-layout.cjs\",[[1,\"p-layout\",{\"variant\":[1]}]]],[\"p-tab-item.cjs\",[[1,\"p-tab-item\",{\"active\":[4]}]]],[\"p-table-column.cjs\",[[0,\"p-table-column\",{\"path\":[1537],\"type\":[1537],\"name\":[1537],\"useSlot\":[1540,\"use-slot\"],\"hasCheckbox\":[1540,\"has-checkbox\"],\"align\":[1537],\"isLast\":[1540,\"is-last\"],\"sizes\":[1032]}]]],[\"p-toast-container.cjs\",[[1,\"p-toast-container\",{\"placement\":[1]}]]],[\"p-calendar.cjs\",[[1,\"p-calendar\",{\"variant\":[1],\"value\":[1],\"preselectToday\":[4,\"preselect-today\"],\"disabledDates\":[1,\"disabled-dates\"],\"minDate\":[1,\"min-date\"],\"maxDate\":[1,\"max-date\"],\"disableWeekends\":[4,\"disable-weekends\"],\"mode\":[1],\"_view\":[32],\"_viewDate\":[32],\"_value\":[32],\"_minDate\":[32],\"_maxDate\":[32],\"_disabledDates\":[32]},null,{\"value\":[\"_parseValue\"],\"minDate\":[\"_parseMinDate\"],\"maxDate\":[\"_parseMaxDate\"],\"disabledDates\":[\"_parseDisabledDates\"]}]]],[\"p-counter.cjs\",[[1,\"p-counter\",{\"variant\":[1],\"size\":[1]}]]],[\"p-slider-indicator.cjs\",[[1,\"p-slider-indicator\",{\"active\":[4]}]]],[\"p-drawer-body_3.cjs\",[[1,\"p-drawer-header\",{\"showClose\":[4,\"show-close\"]}],[1,\"p-drawer-body\",{\"variant\":[1]}],[4,\"p-drawer-container\",{\"closing\":[4]}]]],[\"p-backdrop.cjs\",[[1,\"p-backdrop\",{\"variant\":[1],\"applyBlur\":[4,\"apply-blur\"],\"closing\":[4],\"scrollLock\":[4,\"scroll-lock\"]},[[2,\"click\",\"handleClick\"]]]]],[\"p-modal-body_4.cjs\",[[1,\"p-modal-header\",{\"showClose\":[4,\"show-close\"]}],[1,\"p-modal-footer\"],[1,\"p-modal-body\",{\"variant\":[1],\"rounded\":[4]}],[4,\"p-modal-container\",{\"size\":[1],\"closing\":[4]}]]],[\"p-label_3.cjs\",[[1,\"p-label\",{\"variant\":[513],\"behavior\":[513],\"icon\":[513],\"iconFlip\":[1,\"icon-flip\"],\"iconRotate\":[2,\"icon-rotate\"],\"size\":[513],\"keepMobileContent\":[516,\"keep-mobile-content\"]}],[1,\"p-segment-item\",{\"active\":[4],\"icon\":[1],\"iconFlip\":[1,\"icon-flip\"],\"iconRotate\":[2,\"icon-rotate\"]}],[4,\"p-segment-container\"]]],[\"p-dropdown-menu-container.cjs\",[[4,\"p-dropdown-menu-container\",{\"maxWidth\":[4,\"max-width\"],\"fullWidth\":[4,\"full-width\"],\"scrollable\":[4]}]]],[\"p-dropdown_2.cjs\",[[1,\"p-dropdown-menu-item\",{\"active\":[4],\"enableHover\":[4,\"enable-hover\"],\"icon\":[1]}],[1,\"p-dropdown\",{\"placement\":[513],\"strategy\":[1],\"show\":[4],\"calculateWidth\":[4,\"calculate-width\"],\"applyMaxWidth\":[4,\"apply-max-width\"],\"applyFullWidth\":[4,\"apply-full-width\"],\"scrollable\":[4],\"insideClick\":[4,\"inside-click\"],\"disableTriggerClick\":[4,\"disable-trigger-click\"],\"chevronPosition\":[1,\"chevron-position\"],\"chevronDirection\":[1,\"chevron-direction\"]},[[6,\"click\",\"documentClickHandler\"]],{\"show\":[\"onShowChange\"]}]]],[\"p-page-size-select_3.cjs\",[[1,\"p-page-size-select\",{\"size\":[1538],\"sizeOptions\":[16],\"chevronPosition\":[1,\"chevron-position\"],\"buttonSize\":[1,\"button-size\"],\"buttonTemplate\":[16],\"itemTemplate\":[16],\"hidden\":[4],\"_locales\":[32]},[[16,\"localeChanged\",\"_setLocales\"]]],[0,\"p-pagination\",{\"page\":[1538],\"pageSize\":[2,\"page-size\"],\"hideOnSinglePage\":[4,\"hide-on-single-page\"],\"total\":[2]},null,{\"page\":[\"pageChangeHandler\"],\"pageSize\":[\"pageChangeHandler\"],\"total\":[\"pageChangeHandler\"]}],[1,\"p-pagination-item\",{\"active\":[4]}]]],[\"p-tooltip.cjs\",[[1,\"p-tooltip\",{\"variant\":[1],\"content\":[8],\"placement\":[1],\"strategy\":[1],\"enableUserInput\":[4,\"enable-user-input\"],\"show\":[4],\"canManuallyClose\":[4,\"can-manually-close\"]},[[2,\"click\",\"clickHandler\"],[6,\"click\",\"documentClickHandler\"],[1,\"mouseenter\",\"mouseEnterHandler\"],[0,\"focus\",\"mouseEnterHandler\"],[1,\"mouseleave\",\"mouseLeaveHandler\"],[0,\"blur\",\"mouseLeaveHandler\"]]]]],[\"p-helper_3.cjs\",[[1,\"p-input-group\",{\"size\":[1],\"prefix\":[1],\"suffix\":[1],\"icon\":[1],\"iconFlip\":[1,\"icon-flip\"],\"iconRotate\":[2,\"icon-rotate\"],\"iconPosition\":[1,\"icon-position\"],\"label\":[1],\"helper\":[1],\"required\":[516],\"error\":[513],\"disabled\":[516],\"focused\":[516],\"focusMethod\":[1,\"focus-method\"],\"_forceShowTooltip\":[32]},[[0,\"focusin\",\"handleFocusIn\"],[0,\"focusout\",\"handleFocusOut\"]]],[1,\"p-helper\",{\"placement\":[1]}],[1,\"p-input-error\",{\"error\":[1],\"forceShowTooltip\":[4,\"force-show-tooltip\"],\"_showTooltip\":[32]}]]],[\"p-illustration_6.cjs\",[[1,\"p-table-header\",{\"quickFilters\":[16],\"activeQuickFilterIdentifier\":[1,\"active-quick-filter-identifier\"],\"loading\":[4],\"enableSearch\":[4,\"enable-search\"],\"itemsSelectedAmount\":[2,\"items-selected-amount\"],\"query\":[1025],\"enableFilter\":[4,\"enable-filter\"],\"selectedFiltersAmount\":[2,\"selected-filters-amount\"],\"filterButtonTemplate\":[16],\"enableEdit\":[4,\"enable-edit\"],\"editLoading\":[4,\"edit-loading\"],\"editIcon\":[1,\"edit-icon\"],\"editText\":[1,\"edit-text\"],\"canEdit\":[1028,\"can-edit\"],\"editButtonTemplate\":[16],\"_locales\":[32]},[[16,\"localeChanged\",\"_setLocales\"]]],[1,\"p-table-footer\",{\"enablePageSize\":[4,\"enable-page-size\"],\"enablePagination\":[4,\"enable-pagination\"],\"enableExport\":[4,\"enable-export\"],\"loading\":[4],\"page\":[1538],\"total\":[2],\"pageSize\":[2,\"page-size\"],\"pageSizeOptions\":[16],\"hideOnSinglePage\":[4,\"hide-on-single-page\"],\"_locales\":[32]},[[16,\"localeChanged\",\"_setLocales\"]]],[4,\"p-table-cell\",{\"variant\":[1],\"index\":[2],\"rowIndex\":[2,\"row-index\"],\"definition\":[16],\"item\":[8],\"value\":[8],\"checkbox\":[8],\"template\":[16]}],[1,\"p-table-row\",{\"variant\":[1],\"enableHover\":[4,\"enable-hover\"]}],[0,\"p-illustration\",{\"variant\":[1]}],[1,\"p-table-container\"]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"p-button_3.cjs\",[[4,\"p-button\",{\"variant\":[1],\"href\":[1],\"target\":[1],\"size\":[1],\"loading\":[4],\"chevron\":[8],\"chevronPosition\":[1,\"chevron-position\"],\"disabled\":[4],\"icon\":[1],\"iconOnly\":[4,\"icon-only\"],\"iconPosition\":[1,\"icon-position\"],\"iconFlip\":[1,\"icon-flip\"],\"iconRotate\":[2,\"icon-rotate\"],\"inheritText\":[4,\"inherit-text\"]},[[2,\"click\",\"handleClick\"]]],[1,\"p-loader\",{\"show\":[4],\"variant\":[1],\"color\":[1],\"modalTitle\":[1,\"modal-title\"],\"modalDescription\":[1,\"modal-description\"]}],[0,\"p-icon\",{\"variant\":[1],\"size\":[1],\"rotate\":[2],\"flip\":[1]}]]],[\"p-table.cjs\",[[4,\"p-table\",{\"items\":[1],\"loading\":[4],\"headerLoading\":[4,\"header-loading\"],\"footerLoading\":[4,\"footer-loading\"],\"amountOfLoadingRows\":[2,\"amount-of-loading-rows\"],\"enableRowSelection\":[4,\"enable-row-selection\"],\"enableRowClick\":[4,\"enable-row-click\"],\"selectedRows\":[16],\"selectionKey\":[1,\"selection-key\"],\"canSelectKey\":[1,\"can-select-key\"],\"enableHeader\":[4,\"enable-header\"],\"quickFilters\":[16],\"activeQuickFilterIdentifier\":[1,\"active-quick-filter-identifier\"],\"enableSearch\":[4,\"enable-search\"],\"query\":[1025],\"enableFilter\":[4,\"enable-filter\"],\"selectedFiltersAmount\":[2,\"selected-filters-amount\"],\"filterButtonTemplate\":[16],\"enableEdit\":[4,\"enable-edit\"],\"editButtonLoading\":[4,\"edit-button-loading\"],\"editButtonIcon\":[1,\"edit-button-icon\"],\"editButtonText\":[1,\"edit-button-text\"],\"editButtonTemplate\":[16],\"enableFooter\":[4,\"enable-footer\"],\"enablePageSize\":[4,\"enable-page-size\"],\"enablePagination\":[4,\"enable-pagination\"],\"enableExport\":[4,\"enable-export\"],\"page\":[1538],\"total\":[2],\"pageSize\":[2,\"page-size\"],\"pageSizeOptions\":[16],\"hideOnSinglePage\":[4,\"hide-on-single-page\"],\"emptyStateHeader\":[16],\"emptyStateContent\":[16],\"emptyStateAction\":[16],\"enableEmptyStateAction\":[4,\"enable-empty-state-action\"],\"emptyStateFilteredHeader\":[16],\"emptyStateFilteredContent\":[16],\"_locales\":[32],\"_columns\":[32],\"_items\":[32]},[[16,\"localeChanged\",\"_setLocales\"],[16,\"tableDefinitionChanged\",\"onTableDefinitionUpdated\"],[4,\"keydown\",\"keyDown\"],[4,\"keyup\",\"keyUp\"],[4,\"visibilitychange\",\"visibilityChange\"]],{\"items\":[\"_parseItems\"]}]]],[\"p-modal.cjs\",[[1,\"p-modal\",{\"size\":[1],\"variant\":[1],\"header\":[1],\"show\":[4],\"applyBlur\":[4,\"apply-blur\"],\"showClose\":[4,\"show-close\"],\"showMobileFooter\":[4,\"show-mobile-footer\"],\"backdropClickClose\":[4,\"backdrop-click-close\"],\"scrollLock\":[4,\"scroll-lock\"],\"padding\":[4],\"_closing\":[32]}]]],[\"p-select.cjs\",[[0,\"p-select\",{\"items\":[1],\"icon\":[1],\"query\":[1],\"placeholder\":[1],\"autocompletePlaceholder\":[1,\"autocomplete-placeholder\"],\"value\":[8],\"displayKey\":[1,\"display-key\"],\"valueKey\":[1,\"value-key\"],\"identifierKey\":[1,\"identifier-key\"],\"queryKey\":[1,\"query-key\"],\"autoSelectFirst\":[4,\"auto-select-first\"],\"showChevron\":[4,\"show-chevron\"],\"maxDisplayedItems\":[2,\"max-displayed-items\"],\"enableAutocomplete\":[4,\"enable-autocomplete\"],\"keepQuery\":[4,\"keep-query\"],\"asyncFilter\":[4,\"async-filter\"],\"loading\":[4],\"size\":[1],\"prefix\":[1],\"label\":[1],\"helper\":[1],\"required\":[516],\"error\":[513],\"disabled\":[516],\"_showDropdown\":[32],\"_selectedItem\":[32],\"_isAutoCompleting\":[32]},[[6,\"click\",\"documentClickHandler\"]],{\"value\":[\"_valueChange\"],\"items\":[\"itemChanges\"],\"_showDropdown\":[\"_showDropdownChanges\"]}]]],[\"p-datepicker.cjs\",[[0,\"p-datepicker\",{\"placeholder\":[1],\"value\":[1],\"preselectToday\":[4,\"preselect-today\"],\"disabledDates\":[1,\"disabled-dates\"],\"minDate\":[1,\"min-date\"],\"maxDate\":[1,\"max-date\"],\"disableWeekends\":[4,\"disable-weekends\"],\"mode\":[1],\"format\":[1],\"size\":[1],\"prefix\":[1],\"label\":[1],\"helper\":[1],\"required\":[516],\"error\":[513],\"disabled\":[516],\"_showDropdown\":[32],\"_value\":[32],\"_minDate\":[32],\"_maxDate\":[32],\"_disabledDates\":[32]},[[6,\"click\",\"documentClickHandler\"]],{\"value\":[\"parseValue\"],\"minDate\":[\"parseMinDate\"],\"maxDate\":[\"parseMaxDate\"],\"disabledDates\":[\"parseDisabledDates\"]}]]],[\"p-drawer.cjs\",[[1,\"p-drawer\",{\"header\":[1],\"show\":[4],\"applyBlur\":[4,\"apply-blur\"],\"showClose\":[4,\"show-close\"],\"backdropClickClose\":[4,\"backdrop-click-close\"],\"canClose\":[4,\"can-close\"],\"scrollLock\":[4,\"scroll-lock\"],\"_closing\":[32]}]]],[\"p-attachment.cjs\",[[1,\"p-attachment\",{\"mode\":[1],\"loading\":[4],\"error\":[1],\"downloading\":[4]}]]],[\"p-navbar.cjs\",[[1,\"p-navbar\",{\"closeText\":[1,\"close-text\"],\"menuText\":[1,\"menu-text\"],\"_showMenu\":[32]},[[8,\"closeNavbar\",\"handleCloseNavbar\"],[8,\"openNavbar\",\"handleOpenNavbar\"]]]]],[\"p-profile.cjs\",[[1,\"p-profile\",{\"variant\":[1],\"size\":[513],\"_dropdownOpen\":[32]}]]],[\"p-toast.cjs\",[[1,\"p-toast\",{\"variant\":[1],\"header\":[1],\"content\":[1],\"enableAction\":[4,\"enable-action\"],\"actionIcon\":[1,\"action-icon\"],\"actionIconFlip\":[1,\"action-icon-flip\"],\"actionIconRotate\":[2,\"action-icon-rotate\"]}]]],[\"p-divider.cjs\",[[1,\"p-divider\"]]],[\"p-accordion.cjs\",[[1,\"p-accordion\",{\"header\":[1],\"open\":[4],\"closeable\":[4],\"openable\":[4]}]]],[\"p-navigation-item.cjs\",[[1,\"p-navigation-item\",{\"active\":[4],\"icon\":[1],\"counter\":[8],\"href\":[1],\"target\":[1]}]]],[\"p-card-header.cjs\",[[4,\"p-card-header\",{\"header\":[1],\"arrow\":[4]}]]],[\"p-content-slider.cjs\",[[1,\"p-content-slider\",{\"hideMobileIndicator\":[4,\"hide-mobile-indicator\"],\"disableDrag\":[4,\"disable-drag\"],\"disableAutoCenter\":[4,\"disable-auto-center\"],\"disableIndicatorClick\":[4,\"disable-indicator-click\"],\"_visibleIndex\":[32],\"_outerHeight\":[32],\"_totalWidth\":[32],\"_dragging\":[32]},[[9,\"mouseup\",\"mouseUpHandler\"],[9,\"touchend\",\"mouseUpHandler\"],[9,\"resize\",\"resizeHandler\"]]]]],[\"p-cropper.cjs\",[[1,\"p-cropper\",{\"variant\":[513],\"value\":[8],\"returnType\":[1,\"return-type\"],\"_loaded\":[32],\"_currentScale\":[32]},[[9,\"resize\",\"onResize\"]]]]],[\"p-info-panel.cjs\",[[1,\"p-info-panel\",{\"variant\":[1],\"header\":[1],\"content\":[1],\"closeable\":[4]}]]],[\"p-status.cjs\",[[4,\"p-status\",{\"variant\":[1],\"icon\":[1],\"iconFlip\":[1,\"icon-flip\"],\"iconRotate\":[2,\"icon-rotate\"]}]]],[\"p-stepper-line.cjs\",[[1,\"p-stepper-line\",{\"active\":[516],\"direction\":[513]}]]],[\"p-stepper.cjs\",[[1,\"p-stepper\",{\"activeStep\":[2,\"active-step\"],\"direction\":[513],\"contentPosition\":[513,\"content-position\"]},null,{\"activeStep\":[\"_generateSteps\"]}]]],[\"p-stepper-item.cjs\",[[1,\"p-stepper-item\",{\"align\":[513],\"direction\":[513],\"contentPosition\":[513,\"content-position\"],\"finished\":[516],\"active\":[516]}]]],[\"p-tab-group.cjs\",[[1,\"p-tab-group\"]]],[\"p-avatar.cjs\",[[0,\"p-avatar\",{\"variant\":[513],\"size\":[513],\"defaultImage\":[1,\"default-image\"],\"src\":[1],\"_src\":[32]},null,{\"src\":[\"onSrchChange\"]}]]],[\"p-avatar-group.cjs\",[[4,\"p-avatar-group\",{\"extra\":[2]}]]],[\"p-card-body.cjs\",[[4,\"p-card-body\",{\"inheritText\":[516,\"inherit-text\"]}]]],[\"p-card-container.cjs\",[[1,\"p-card-container\",{\"hoverable\":[516],\"shadow\":[516]}]]],[\"p-layout.cjs\",[[1,\"p-layout\",{\"variant\":[1]}]]],[\"p-tab-item.cjs\",[[1,\"p-tab-item\",{\"active\":[4]}]]],[\"p-table-column.cjs\",[[0,\"p-table-column\",{\"path\":[1537],\"type\":[1537],\"name\":[1537],\"useSlot\":[1540,\"use-slot\"],\"hasCheckbox\":[1540,\"has-checkbox\"],\"align\":[1537],\"isLast\":[1540,\"is-last\"],\"sizes\":[1032]}]]],[\"p-toast-container.cjs\",[[1,\"p-toast-container\",{\"placement\":[1]}]]],[\"p-calendar.cjs\",[[1,\"p-calendar\",{\"variant\":[1],\"value\":[1],\"preselectToday\":[4,\"preselect-today\"],\"disabledDates\":[1,\"disabled-dates\"],\"minDate\":[1,\"min-date\"],\"maxDate\":[1,\"max-date\"],\"disableWeekends\":[4,\"disable-weekends\"],\"mode\":[1],\"_view\":[32],\"_viewDate\":[32],\"_value\":[32],\"_minDate\":[32],\"_maxDate\":[32],\"_disabledDates\":[32]},null,{\"value\":[\"_parseValue\"],\"minDate\":[\"_parseMinDate\"],\"maxDate\":[\"_parseMaxDate\"],\"disabledDates\":[\"_parseDisabledDates\"]}]]],[\"p-counter.cjs\",[[1,\"p-counter\",{\"variant\":[1],\"size\":[1]}]]],[\"p-slider-indicator.cjs\",[[1,\"p-slider-indicator\",{\"active\":[4]}]]],[\"p-drawer-body_3.cjs\",[[1,\"p-drawer-header\",{\"showClose\":[4,\"show-close\"]}],[1,\"p-drawer-body\",{\"variant\":[1]}],[4,\"p-drawer-container\",{\"closing\":[4]}]]],[\"p-backdrop.cjs\",[[1,\"p-backdrop\",{\"variant\":[1],\"applyBlur\":[4,\"apply-blur\"],\"closing\":[4],\"scrollLock\":[4,\"scroll-lock\"]},[[2,\"click\",\"handleClick\"]]]]],[\"p-modal-body_4.cjs\",[[1,\"p-modal-header\",{\"showClose\":[4,\"show-close\"]}],[1,\"p-modal-footer\"],[1,\"p-modal-body\",{\"variant\":[1],\"rounded\":[4],\"padding\":[4]}],[4,\"p-modal-container\",{\"size\":[1],\"closing\":[4]}]]],[\"p-label_3.cjs\",[[1,\"p-label\",{\"variant\":[513],\"behavior\":[513],\"icon\":[513],\"iconFlip\":[1,\"icon-flip\"],\"iconRotate\":[2,\"icon-rotate\"],\"size\":[513],\"keepMobileContent\":[516,\"keep-mobile-content\"]}],[1,\"p-segment-item\",{\"active\":[4],\"icon\":[1],\"iconFlip\":[1,\"icon-flip\"],\"iconRotate\":[2,\"icon-rotate\"]}],[4,\"p-segment-container\"]]],[\"p-dropdown-menu-container.cjs\",[[4,\"p-dropdown-menu-container\",{\"maxWidth\":[4,\"max-width\"],\"fullWidth\":[4,\"full-width\"],\"scrollable\":[4]}]]],[\"p-dropdown_2.cjs\",[[1,\"p-dropdown-menu-item\",{\"active\":[4],\"enableHover\":[4,\"enable-hover\"],\"icon\":[1]}],[1,\"p-dropdown\",{\"placement\":[513],\"strategy\":[1],\"show\":[4],\"calculateWidth\":[4,\"calculate-width\"],\"applyMaxWidth\":[4,\"apply-max-width\"],\"applyFullWidth\":[4,\"apply-full-width\"],\"scrollable\":[4],\"insideClick\":[4,\"inside-click\"],\"disableTriggerClick\":[4,\"disable-trigger-click\"],\"chevronPosition\":[1,\"chevron-position\"],\"chevronDirection\":[1,\"chevron-direction\"]},[[6,\"click\",\"documentClickHandler\"]],{\"show\":[\"onShowChange\"]}]]],[\"p-page-size-select_3.cjs\",[[1,\"p-page-size-select\",{\"size\":[1538],\"sizeOptions\":[16],\"chevronPosition\":[1,\"chevron-position\"],\"buttonSize\":[1,\"button-size\"],\"buttonTemplate\":[16],\"itemTemplate\":[16],\"hidden\":[4],\"_locales\":[32]},[[16,\"localeChanged\",\"_setLocales\"]]],[0,\"p-pagination\",{\"page\":[1538],\"pageSize\":[2,\"page-size\"],\"hideOnSinglePage\":[4,\"hide-on-single-page\"],\"total\":[2]},null,{\"page\":[\"pageChangeHandler\"],\"pageSize\":[\"pageChangeHandler\"],\"total\":[\"pageChangeHandler\"]}],[1,\"p-pagination-item\",{\"active\":[4]}]]],[\"p-tooltip.cjs\",[[1,\"p-tooltip\",{\"variant\":[1],\"content\":[8],\"placement\":[1],\"strategy\":[1],\"enableUserInput\":[4,\"enable-user-input\"],\"show\":[4],\"canManuallyClose\":[4,\"can-manually-close\"]},[[2,\"click\",\"clickHandler\"],[6,\"click\",\"documentClickHandler\"],[1,\"mouseenter\",\"mouseEnterHandler\"],[0,\"focus\",\"mouseEnterHandler\"],[1,\"mouseleave\",\"mouseLeaveHandler\"],[0,\"blur\",\"mouseLeaveHandler\"]]]]],[\"p-helper_3.cjs\",[[1,\"p-input-group\",{\"size\":[1],\"prefix\":[1],\"suffix\":[1],\"icon\":[1],\"iconFlip\":[1,\"icon-flip\"],\"iconRotate\":[2,\"icon-rotate\"],\"iconPosition\":[1,\"icon-position\"],\"label\":[1],\"helper\":[1],\"required\":[516],\"error\":[513],\"disabled\":[516],\"focused\":[516],\"focusMethod\":[1,\"focus-method\"],\"_forceShowTooltip\":[32]},[[0,\"focusin\",\"handleFocusIn\"],[0,\"focusout\",\"handleFocusOut\"]]],[1,\"p-helper\",{\"placement\":[1]}],[1,\"p-input-error\",{\"error\":[1],\"forceShowTooltip\":[4,\"force-show-tooltip\"],\"_showTooltip\":[32]}]]],[\"p-illustration_6.cjs\",[[1,\"p-table-header\",{\"quickFilters\":[16],\"activeQuickFilterIdentifier\":[1,\"active-quick-filter-identifier\"],\"loading\":[4],\"enableSearch\":[4,\"enable-search\"],\"itemsSelectedAmount\":[2,\"items-selected-amount\"],\"query\":[1025],\"enableFilter\":[4,\"enable-filter\"],\"selectedFiltersAmount\":[2,\"selected-filters-amount\"],\"filterButtonTemplate\":[16],\"enableEdit\":[4,\"enable-edit\"],\"editLoading\":[4,\"edit-loading\"],\"editIcon\":[1,\"edit-icon\"],\"editText\":[1,\"edit-text\"],\"canEdit\":[1028,\"can-edit\"],\"editButtonTemplate\":[16],\"_locales\":[32]},[[16,\"localeChanged\",\"_setLocales\"]]],[1,\"p-table-footer\",{\"enablePageSize\":[4,\"enable-page-size\"],\"enablePagination\":[4,\"enable-pagination\"],\"enableExport\":[4,\"enable-export\"],\"loading\":[4],\"page\":[1538],\"total\":[2],\"pageSize\":[2,\"page-size\"],\"pageSizeOptions\":[16],\"hideOnSinglePage\":[4,\"hide-on-single-page\"],\"_locales\":[32]},[[16,\"localeChanged\",\"_setLocales\"]]],[4,\"p-table-cell\",{\"variant\":[1],\"index\":[2],\"rowIndex\":[2,\"row-index\"],\"definition\":[16],\"item\":[8],\"value\":[8],\"checkbox\":[8],\"template\":[16]}],[1,\"p-table-row\",{\"variant\":[1],\"enableHover\":[4,\"enable-hover\"]}],[0,\"p-illustration\",{\"variant\":[1]}],[1,\"p-table-container\"]]]]"), options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/assets/icons/plan.svg

@@ -1,14 +1,5 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>⚛️ Atoms/icons/plan</title>
-    <defs>
-        <rect id="path-1" x="0" y="-4.54747351e-13" width="16" height="16"></rect>
-    </defs>
-    <g id="⚛️-Atoms/icons/plan" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <mask id="mask-2" fill="white">
-            <use xlink:href="#path-1"></use>
-        </mask>
-        <g id="Bounding-box"></g>
-        <path d="M10.4142136,-0.985786282 L13.4142136,2.01421372 C13.7892863,2.38928647 14,2.8979943 14,3.42842728 L14,13.6000002 C14,14.7045697 13.1045695,15.6000002 12,15.6000002 L6,15.6000002 C4.8954305,15.6000002 4,14.7045697 4,13.6000002 L4,3.42842728 C4,2.8979943 4.21071368,2.38928647 4.58578644,2.01421372 L7.58578644,-0.985786282 C8.36683502,-1.76683487 9.63316498,-1.76683487 10.4142136,-0.985786282 Z M9.23357664,6.60000016 C8.9026764,6.60000016 8.59975669,6.66786719 8.32481752,6.80360126 C8.04987835,6.93933534 7.81386861,7.13462619 7.61678832,7.38947384 C7.41970803,7.64432149 7.2676399,7.95872592 7.16058394,8.33268714 C7.05352798,8.70664835 7,9.12908603 7,9.60000016 C7,10.0764544 7.05352798,10.5002772 7.16058394,10.8714683 C7.2676399,11.2426594 7.41970803,11.5556788 7.61678832,11.8105265 C7.81386861,12.0653741 8.04987835,12.260665 8.32481752,12.396399 C8.59975669,12.5321331 8.9026764,12.6000002 9.23357664,12.6000002 C9.47688564,12.6000002 9.69221411,12.5695292 9.87956204,12.5085874 C10.06691,12.4476456 10.2323601,12.3673132 10.3759124,12.2675902 C10.5194647,12.1678672 10.6411192,12.0556788 10.7408759,11.9310251 C10.8406326,11.8063713 10.9270073,11.6803326 11,11.5529087 L10.2043796,10.8880888 C9.97080292,11.3590029 9.64720195,11.59446 9.23357664,11.59446 C8.99026764,11.59446 8.77858881,11.5127425 8.59854015,11.3493076 C8.41849148,11.1858727 8.29440389,10.9462605 8.22627737,10.6304711 L9.90510949,10.6304711 L9.90510949,9.88254863 L8.16788321,9.88254863 L8.16788321,9.31745168 L9.90510949,9.31745168 L9.90510949,8.56952924 L8.22627737,8.56952924 C8.29927007,8.27036027 8.4270073,8.0349032 8.60948905,7.86315805 C8.7919708,7.6914129 9,7.60554032 9.23357664,7.60554032 C9.44768856,7.60554032 9.62408759,7.65955694 9.76277372,7.76759018 C9.90145985,7.87562342 10.0243309,8.03767329 10.1313869,8.25373977 L10.9270073,7.59723007 C10.8491484,7.47534642 10.7627737,7.35346276 10.6678832,7.2315791 C10.5729927,7.10969545 10.459854,7.00304725 10.3284672,6.9116345 C10.1970803,6.82022176 10.0425791,6.74542952 9.8649635,6.68725777 C9.68734793,6.62908603 9.47688564,6.60000016 9.23357664,6.60000016 Z M9,1.60000016 C8.44771525,1.60000016 8,2.04771541 8,2.60000016 C8,3.15228491 8.44771525,3.60000016 9,3.60000016 C9.55228475,3.60000016 10,3.15228491 10,2.60000016 C10,2.04771541 9.55228475,1.60000016 9,1.60000016 Z" id="Combined-Shape" fill="currentColor" mask="url(#mask-2)" transform="translate(9, 7.0142) rotate(45) translate(-9, -7.0142)"></path>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" viewBox="0 0 16 16">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="currentColor" d="M16,2.07320636 L16,6.4711412 C16,7.02098971 15.7815735,7.54831786 15.3927719,7.93711947 L7.93711947,15.3927719 C7.12748203,16.2024094 5.81480036,16.2024094 5.00516292,15.3927719 L0.607228085,10.9948371 C-0.202409362,10.1851996 -0.202409362,8.87251797 0.607228085,8.06288053 L8.06288053,0.607228085 C8.45168214,0.218426472 8.97901029,0 9.5288588,0 L13.9267936,0 C15.0717939,0 16,0.928206105 16,2.07320636 Z M9.57430689,6.76811139 C9.33176061,6.52556511 9.05997795,6.35327405 8.75895892,6.25123822 C8.4579399,6.1492024 8.14180125,6.11935591 7.81054298,6.16169875 C7.47928471,6.20404159 7.13736539,6.32303234 6.78478502,6.51867099 C6.43220465,6.71430965 6.083327,6.98471645 5.73815206,7.32989139 C5.38891623,7.67912721 5.11749422,8.02902009 4.923886,8.37957001 C4.73027779,8.73011994 4.61230226,9.07102404 4.56995942,9.40228231 C4.52761657,9.73354058 4.55746307,10.0496792 4.65949889,10.3506983 C4.76153472,10.6517173 4.93382578,10.9234999 5.17637206,11.1660462 C5.35471492,11.3443891 5.53488319,11.4798877 5.71687689,11.572542 C5.89887059,11.6651963 6.07902651,11.7275866 6.25734467,11.759713 C6.43566282,11.7918394 6.60706711,11.798778 6.77155751,11.7805288 C6.93604792,11.7622795 7.09174469,11.7332061 7.23864783,11.6933087 L7.14277249,10.6228218 C6.6263884,10.7967876 6.21660494,10.7321791 5.91342208,10.4289962 C5.73507922,10.2506533 5.63981894,10.0355971 5.62764124,9.78382734 C5.61546353,9.53205761 5.70014181,9.26546963 5.88167606,8.98406337 L7.11224177,10.2146291 L7.66046079,9.66641006 L6.3870928,8.39304206 L6.80130273,7.97883213 L8.07467072,9.25220013 L8.62288975,8.7039811 L7.39232404,7.4734154 C7.66511451,7.30763064 7.93133198,7.22867317 8.19097645,7.23654298 C8.45062092,7.24441279 8.66604773,7.33395227 8.83725687,7.50516141 C8.99419859,7.66210313 9.08390356,7.83099529 9.1063718,8.01183791 C9.12884003,8.19268053 9.10012239,8.40152446 9.02021886,8.6383697 L10.0846145,8.74033637 C10.1168842,8.59392726 10.1429118,8.44127615 10.1626975,8.28238304 C10.1824832,8.12348993 10.1777257,7.96238853 10.1484252,7.79907884 C10.1191246,7.63576915 10.0606987,7.46769953 9.97314772,7.29486999 C9.88559669,7.12204045 9.75264975,6.94645425 9.57430689,6.76811139 Z M13.0680434,2.93195656 C12.6632247,2.52713783 12.0068839,2.52713783 11.6020652,2.93195656 C11.1972464,3.33677528 11.1972464,3.99311611 11.6020652,4.39793483 C12.0068839,4.80275356 12.6632247,4.80275356 13.0680434,4.39793483 C13.4728622,3.99311611 13.4728622,3.33677528 13.0680434,2.93195656 Z" mask="url(#b)"/>
     </g>
 </svg>

package/dist/collection/collection-manifest.json

@@ -45,6 +45,7 @@
     "components/molecules/attachment/attachment.component.js",
     "components/molecules/calendar/calendar.component.js",
     "components/molecules/content-slider/content-slider.component.js",
+    "components/molecules/cropper/cropper.component.js",
     "components/molecules/datepicker/datepicker.component.js",
     "components/molecules/dropdown/dropdown.component.js",
     "components/molecules/input-error/input-error.component.js",

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

@@ -1 +1 @@
-.fixed{position:fixed!important}.left-0{left:0!important}.top-0{top:0!important}.flex{display:flex!important}.h-full{height:100%!important}.max-h-screen{max-height:100vh!important}.w-full{width:100%!important}.animate-fade-in{animation:fadeIn .2s ease forwards!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.justify-center{justify-content:center!important}.overflow-y-auto{overflow-y:auto!important}.p-0{padding:0!important}*{box-sizing:border-box}:host{animation:fadeIn .2s ease forwards;background-color:rgba(39,40,56,.5);display:flex;height:100%;left:0;max-height:100vh;max-width:100vw;overflow:hidden;position:fixed;top:0;width:100%;z-index:490}:host .content-container{align-items:flex-end;display:flex;height:100%;justify-content:center;max-height:100vh;max-width:100vw;overflow-x:hidden;overflow-y:auto;width:100%}@media (min-width:40rem){:host .content-container{padding-left:4rem;padding-right:4rem}}@media (min-width:64rem){:host .content-container{align-items:center;padding:4rem}}:host(.blurred){--tw-backdrop-blur:blur(2px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}:host(.closing){animation:fadeOut .2s ease forwards}:host(.closing) .content-container{overflow:hidden}:host(.variant-drawer) .content-container{align-items:flex-start;justify-content:flex-end;padding:0}@media (min-width:40rem){:host(.variant-drawer) .content-container{padding:0}}@media (min-width:64rem){:host(.variant-drawer) .content-container{padding:0}}@media (min-width:40rem){.tablet\:p-0{padding:0!important}.tablet\:px-16{padding-left:4rem!important;padding-right:4rem!important}}
+.fixed{position:fixed!important}.left-0{left:0!important}.top-0{top:0!important}.flex{display:flex!important}.h-full{height:100%!important}.max-h-screen{max-height:100vh!important}.w-full{width:100%!important}.animate-fade-in{animation:fadeIn .2s ease forwards!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.justify-center{justify-content:center!important}.overflow-y-auto{overflow-y:auto!important}.p-0{padding:0!important}*{box-sizing:border-box}:host{animation:fadeIn .2s ease forwards;background-color:rgba(39,40,56,.5);display:flex;height:100%;left:0;max-height:100vh;max-width:100vw;overflow:hidden;position:fixed;top:0;width:100%;z-index:490}:host .content-container{align-items:flex-end;display:flex;height:100%;justify-content:center;max-height:100vh;max-width:100vw;overflow-x:hidden;overflow-y:auto;width:100%}@media (min-width:40rem){:host .content-container{padding-left:4rem;padding-right:4rem}}@media (min-width:64rem){:host .content-container{align-items:center;padding:4rem}}:host(.blurred){--tw-backdrop-blur:blur(2px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}:host(.closing){animation:fadeOut .2s ease forwards}:host(.closing) .content-container{overflow:hidden}:host(.variant-drawer) .content-container{align-items:flex-start;justify-content:flex-end;padding:0}@media (min-width:40rem){:host(.variant-drawer) .content-container{padding:0}}@media (min-width:64rem){:host(.variant-drawer) .content-container{padding:0}}@media (min-width:40rem){.tablet\:p-0{padding:0!important}.tablet\:px-16{padding-left:4rem!important;padding-right:4rem!important}}.static{position:static!important}

package/dist/collection/components/atoms/card-body/card-body.component.css

@@ -1 +1 @@
-.px-4{padding-left:1rem!important;padding-right:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}*{box-sizing:border-box}p-card-body{--tw-text-opacity:1;color:rgb(152 154 183/var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem;padding:1.5rem 1rem}p-card-body[inherit-text]{color:inherit!important;font-size:inherit!important;font-weight:inherit!important}
+.px-4{padding-left:1rem!important;padding-right:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}*{box-sizing:border-box}p-card-body{--tw-text-opacity:1;color:rgb(152 154 183/var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem;padding:1.5rem 1rem}p-card-body[inherit-text]{color:inherit!important;font-size:inherit!important;font-weight:inherit!important}.static{position:static!important}

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

@@ -1 +1 @@
-.my-2{margin-bottom:.5rem!important;margin-top:.5rem!important}.block{display:block!important}.flex{display:flex!important}.h-px{height:1px!important}.w-full{width:100%!important}.bg-mystic-medium{--tw-bg-opacity:1!important;background-color:rgb(227 236 243/var(--tw-bg-opacity))!important}*{box-sizing:border-box}:host{display:block;margin-bottom:.5rem;margin-top:.5rem;width:100%}:host .content{align-items:center;display:flex;width:100%}:host .content:after,:host .content:before{--tw-bg-opacity:1;background-color:rgb(227 236 243/var(--tw-bg-opacity));content:"";flex:1 1 0%;height:1px}.items-center{align-items:center!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}
+.my-2{margin-bottom:.5rem!important;margin-top:.5rem!important}.block{display:block!important}.flex{display:flex!important}.h-px{height:1px!important}.w-full{width:100%!important}.bg-mystic-medium{--tw-bg-opacity:1!important;background-color:rgb(227 236 243/var(--tw-bg-opacity))!important}*{box-sizing:border-box}:host{display:block;margin-bottom:.5rem;margin-top:.5rem;width:100%}:host .content{align-items:center;display:flex;width:100%}:host .content:after,:host .content:before{--tw-bg-opacity:1;background-color:rgb(227 236 243/var(--tw-bg-opacity));content:"";flex:1 1 0%;height:1px}.static{position:static!important}.items-center{align-items:center!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}

package/dist/collection/components/atoms/modal-body/modal-body.component.css

@@ -1 +1 @@
-.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));padding:1.5rem}@media (min-width:40rem){:host{padding-left:2.5rem;padding-right:2.5rem}}@media (min-width:64rem){:host{padding-left:3.5rem;padding-right:3.5rem}}:host(.variant-table){padding-left:1.5rem;padding-right:1.5rem}:host(.is-rounded){border-bottom-left-radius:0;border-bottom-right-radius:0}@media (min-width:64rem){:host(.is-rounded){border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}}@media (min-width:40rem){.tablet\:px-10{padding-left:2.5rem!important;padding-right:2.5rem!important}}@media (min-width:64rem){.desktop-xs\:px-14{padding-left:3.5rem!important;padding-right:3.5rem!important}}.static{position:static!important}.rounded{border-radius:.25rem!important}
+.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}.py-6{padding-bottom:1.5rem!important;padding-top:1.5rem!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));padding:1.5rem}@media (min-width:40rem){:host{padding-left:2.5rem;padding-right:2.5rem}}@media (min-width:64rem){:host{padding-left:3.5rem;padding-right:3.5rem}}:host(.variant-table){padding-left:1.5rem;padding-right:1.5rem}:host(.is-rounded){border-bottom-left-radius:0;border-bottom-right-radius:0}@media (min-width:64rem){:host(.is-rounded){border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}}:host(.no-padding){padding:0}@media (min-width:40rem){.tablet\:px-10{padding-left:2.5rem!important;padding-right:2.5rem!important}}.static{position:static!important}.rounded{border-radius:.25rem!important}

package/dist/collection/components/atoms/modal-body/modal-body.component.js

@@ -3,9 +3,10 @@ export class ModalBody {
   constructor() {
     this.variant = 'default';
     this.rounded = false;
+    this.padding = true;
   }
   render() {
-    return (h(Host, { class: `p-modal-body variant-${this.variant} ${this.rounded && 'is-rounded'}` }, h("slot", null)));
+    return (h(Host, { class: `p-modal-body variant-${this.variant} ${this.rounded && 'is-rounded'} ${!this.padding && 'no-padding'}` }, h("slot", null)));
   }
   static get is() { return "p-modal-body"; }
   static get encapsulation() { return "shadow"; }
@@ -56,6 +57,24 @@ export class ModalBody {
         "attribute": "rounded",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "padding": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether the body should have padding"
+        },
+        "attribute": "padding",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }

package/dist/collection/components/atoms/modal-body/modal-body.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-body.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/modal-body/modal-body.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,SAAS;;mBAIqB,SAAS;mBAKrB,KAAK;;EAEhC,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IACD,KAAK,EAAE,wBAAwB,IAAI,CAAC,OAAO,IACvC,IAAI,CAAC,OAAO,IAAI,YACpB,EAAE;MAEF,eAAQ,CACL,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-modal-body',\n    styleUrl: 'modal-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    /**\n     * Wether the modal body should be rounded at the bottom\n     */\n    @Prop() rounded: boolean = false;\n\n    render() {\n        return (\n            <Host\n                class={`p-modal-body variant-${this.variant} ${\n                    this.rounded && 'is-rounded'\n                }`}\n            >\n                <slot />\n            </Host>\n        );\n    }\n}\n"]}
+{"version":3,"file":"modal-body.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/modal-body/modal-body.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,SAAS;;mBAIqB,SAAS;mBAKrB,KAAK;mBAKL,IAAI;;EAE/B,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IACD,KAAK,EAAE,wBAAwB,IAAI,CAAC,OAAO,IACvC,IAAI,CAAC,OAAO,IAAI,YACpB,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,YAAY,EAAE;MAEnC,eAAQ,CACL,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-modal-body',\n    styleUrl: 'modal-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    /**\n     * Wether the modal body should be rounded at the bottom\n     */\n    @Prop() rounded: boolean = false;\n\n    /**\n     * Wether the body should have padding\n     */\n    @Prop() padding: boolean = true;\n\n    render() {\n        return (\n            <Host\n                class={`p-modal-body variant-${this.variant} ${\n                    this.rounded && 'is-rounded'\n                } ${!this.padding && 'no-padding'}`}\n            >\n                <slot />\n            </Host>\n        );\n    }\n}\n"]}

package/dist/collection/components/molecules/cropper/cropper.component.css

@@ -0,0 +1 @@
+.relative{position:relative!important}.mb-6{margin-bottom:1.5rem!important}.flex{display:flex!important}.h-4{height:1rem!important}.h-\[2px\]{height:2px!important}.w-4{width:1rem!important}.w-full{width:100%!important}.appearance-none{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-between{justify-content:space-between!important}.rounded-round{border-radius:100%!important}.border-0{border-width:0!important}*{box-sizing:border-box}:host{align-items:center;display:flex;flex-direction:column;gap:1.5rem;justify-content:space-between;margin-bottom:1.5rem;width:100%}:host .p-input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;position:relative}:host .p-input[type=range]::-moz-range-track,:host .p-input[type=range]::-webkit-slider-runnable-track{--tw-bg-opacity:1;background-color:rgb(218 230 240/var(--tw-bg-opacity));height:2px}:host .p-input[type=range]::-moz-range-thumb,:host .p-input[type=range]::-webkit-slider-thumb{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity));border-radius:100%;border-width:0;height:1rem;width:1rem}.static{position:static!important}.hidden{display:none!important}.h-\[17\.5rem\]{height:17.5rem!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}.resize{resize:both!important}.gap-2{gap:.5rem!important}.rounded{border-radius:.25rem!important}.border-b{border-bottom-width:1px!important}.border-solid{border-style:solid!important}.border-mystic-medium{--tw-border-opacity:1!important;border-color:rgb(227 236 243/var(--tw-border-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.px-14{padding-left:3.5rem!important;padding-right:3.5rem!important}.text-storm-vague{--tw-text-opacity:1!important;color:rgb(152 154 183/var(--tw-text-opacity))!important}@media (min-width:40rem){.tablet\:max-w-xs{max-width:20rem!important}.tablet\:px-1{padding-left:.25rem!important;padding-right:.25rem!important}}

package/dist/collection/components/molecules/cropper/cropper.component.js

@@ -0,0 +1,235 @@
+import { Host, h, } from "@stencil/core";
+import { clsx } from "clsx";
+import "cropperjs";
+export class Cropper {
+  constructor() {
+    this._maxScale = 0;
+    this._minScale = 0;
+    this.variant = 'user';
+    this.value = undefined;
+    this.returnType = 'base64';
+    this._loaded = false;
+    this._currentScale = 0;
+  }
+  onResize() {
+    if (this._resizeDebounceTimeout) {
+      clearTimeout(this._resizeDebounceTimeout);
+    }
+    this._resizeDebounceTimeout = setTimeout(() => {
+      this._selectionRef.$center();
+      this._imageRef.$center();
+    }, 200);
+  }
+  componentDidLoad() {
+    setTimeout(() => {
+      this._loaded = true;
+    }, 200);
+  }
+  render() {
+    return (h(Host, { class: "p-cropper" }, this._loaded && (h("cropper-canvas", { class: "h-[17.5rem] w-full border-0 border-b border-solid border-mystic-medium bg-white", onAction: () => this._onAction() }, h("cropper-image", { src: this.value, alt: "Picture", ref: (ref) => this._setImageRef(ref), scalable: true, crossorigin: "anonymous" }), h("cropper-shade", { class: clsx({
+        'rounded-round': this.variant === 'user',
+        rounded: this.variant === 'company',
+      }), "theme-color": "rgba(255, 255, 255, 0.5)", hidden: true }), h("cropper-selection", { "initial-coverage": "0.7", "aspect-ratio": "1", ref: (ref) => (this._selectionRef = ref) }), h("cropper-handle", { action: "move", plain: true }))), h("div", { class: "flex w-full items-center gap-2 px-14 text-storm-vague tablet:max-w-xs tablet:px-1" }, h("p-icon", { variant: "minus" }), h("input", { class: "p-input w-full", type: "range", min: "0", max: "100", value: this._currentScale, onInput: (ev) => this._onInput(ev.target.value), step: "0.5" }), h("p-icon", { variant: "plus" }))));
+  }
+  _setImageRef(ref) {
+    if (this._imageRef) {
+      return;
+    }
+    this._imageRef = ref;
+    this._imageRef.$ready((image) => setTimeout(() => this._setInitialState(image), 200));
+  }
+  _setInitialState(image) {
+    let scale;
+    if (image.naturalWidth > image.naturalHeight) {
+      // set scale by height
+      scale = 200 / image.naturalHeight;
+    }
+    if (image.naturalHeight >= image.naturalWidth) {
+      // set scale by width
+      scale = 200 / image.naturalWidth;
+    }
+    const current = this._imageRef.$getTransform();
+    this._minScale = scale;
+    this._maxScale = current[0];
+    this._selectionRef.$resize('nw-resize', 200, 200, 1);
+    this._selectionRef.$center();
+    this._setScale(scale);
+    this._toCanvas();
+  }
+  _onAction() {
+    this._setCurrentScale();
+    this._toCanvas();
+  }
+  _setScale(scale, setCenter = true, setCurrentScale = true) {
+    const transform = this._imageRef.$getTransform();
+    this._imageRef.$setTransform([
+      scale,
+      0,
+      0,
+      scale,
+      transform[4],
+      transform[5],
+    ]);
+    if (setCenter) {
+      this._imageRef.$center();
+    }
+    if (setCurrentScale) {
+      this._setCurrentScale();
+    }
+  }
+  _setCurrentScale() {
+    const transform = this._imageRef.$getTransform();
+    const current = transform[0];
+    if (current < this._minScale) {
+      this._setScale(this._minScale, true, false);
+      this._currentScale = 0;
+      return;
+    }
+    if (current > this._maxScale) {
+      this._setScale(this._maxScale, true, false);
+      this._currentScale = 100;
+      return;
+    }
+    if (current === this._minScale) {
+      this._currentScale = 0;
+      return;
+    }
+    if (current === this._maxScale) {
+      this._currentScale = 100;
+      return;
+    }
+    const minMaxDiff = this._maxScale - this._minScale;
+    const currentDiff = current - this._minScale;
+    const percentage = (currentDiff / minMaxDiff) * 100;
+    this._currentScale = percentage;
+  }
+  _onInput(value) {
+    const transform = this._imageRef.$getTransform();
+    const current = transform[0];
+    const minMaxDiff = this._maxScale - this._minScale;
+    const toSet = minMaxDiff * (value / 100);
+    if (toSet === current) {
+      return;
+    }
+    this._setScale(toSet + this._minScale, false, false);
+    this._currentScale = value;
+    this._toCanvas();
+  }
+  _toCanvas() {
+    if (this._toCanvasDebounceTimeout) {
+      clearTimeout(this._toCanvasDebounceTimeout);
+    }
+    this._toCanvasDebounceTimeout = setTimeout(async () => {
+      const canvas = await this._selectionRef.$toCanvas();
+      if (this.returnType === 'canvas') {
+        this.valueChange.emit(canvas);
+        return;
+      }
+      const data = canvas.toDataURL('image/png');
+      this.valueChange.emit(data);
+    }, 200);
+  }
+  static get is() { return "p-cropper"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["cropper.component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cropper.component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'user' | 'company'",
+          "resolved": "\"company\" | \"user\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant of the image that's being cropped"
+        },
+        "attribute": "variant",
+        "reflect": true,
+        "defaultValue": "'user'"
+      },
+      "value": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The image to crop (url or base64)"
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "returnType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'canvas' | 'base64'",
+          "resolved": "\"base64\" | \"canvas\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The return type of the onchange"
+        },
+        "attribute": "return-type",
+        "reflect": false,
+        "defaultValue": "'base64'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_loaded": {},
+      "_currentScale": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "valueChange",
+        "name": "valueChange",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event when the value changes"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "onResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}
+//# sourceMappingURL=cropper.component.js.map

package/dist/collection/components/molecules/cropper/cropper.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cropper.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/cropper/cropper.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Event,\n    EventEmitter,\n    Host,\n    Listen,\n    Prop,\n    State,\n    h,\n} from '@stencil/core';\nimport { clsx } from 'clsx';\nimport 'cropperjs';\nimport { CropperImage, CropperSelection } from 'cropperjs';\n\n@Component({\n    tag: 'p-cropper',\n    styleUrl: 'cropper.component.scss',\n    shadow: true,\n})\nexport class Cropper {\n    /**\n     * Variant of the image that's being cropped\n     */\n    @Prop({ reflect: true }) variant: 'user' | 'company' = 'user';\n\n    /**\n     * The image to crop (url or base64)\n     */\n    @Prop() value: any;\n\n    /**\n     * The return type of the onchange\n     */\n    @Prop() returnType: 'canvas' | 'base64' = 'base64';\n\n    /**\n     * Event when the value changes\n     */\n    @Event({\n        bubbles: false,\n    })\n    valueChange: EventEmitter<any>;\n\n    private _imageRef: CropperImage;\n    private _selectionRef: CropperSelection;\n\n    private _maxScale = 0;\n    private _minScale = 0;\n\n    private _resizeDebounceTimeout: NodeJS.Timer;\n    private _toCanvasDebounceTimeout: NodeJS.Timer;\n\n    @State()\n    private _loaded = false;\n\n    @State()\n    private _currentScale = 0;\n\n    @Listen('resize', { target: 'window' })\n    onResize() {\n        if (this._resizeDebounceTimeout) {\n            clearTimeout(this._resizeDebounceTimeout);\n        }\n\n        this._resizeDebounceTimeout = setTimeout(() => {\n            this._selectionRef.$center();\n            this._imageRef.$center();\n        }, 200);\n    }\n\n    componentDidLoad() {\n        setTimeout(() => {\n            this._loaded = true;\n        }, 200);\n    }\n\n    render() {\n        return (\n            <Host class=\"p-cropper\">\n                {this._loaded && (\n                    <cropper-canvas\n                        class=\"h-[17.5rem] w-full border-0 border-b border-solid border-mystic-medium bg-white\"\n                        onAction={() => this._onAction()}\n                    >\n                        <cropper-image\n                            src={this.value}\n                            alt=\"Picture\"\n                            ref={(ref) =>\n                                this._setImageRef(ref as CropperImage)\n                            }\n                            scalable\n                            crossorigin=\"anonymous\"\n                        />\n                        <cropper-shade\n                            class={clsx({\n                                'rounded-round': this.variant === 'user',\n                                rounded: this.variant === 'company',\n                            })}\n                            theme-color=\"rgba(255, 255, 255, 0.5)\"\n                            hidden\n                        />\n                        <cropper-selection\n                            initial-coverage=\"0.7\"\n                            aspect-ratio=\"1\"\n                            ref={(ref) =>\n                                (this._selectionRef = ref as CropperSelection)\n                            }\n                        />\n\n                        <cropper-handle action=\"move\" plain></cropper-handle>\n                    </cropper-canvas>\n                )}\n\n                <div class=\"flex w-full items-center gap-2 px-14 text-storm-vague tablet:max-w-xs tablet:px-1\">\n                    <p-icon variant=\"minus\" />\n                    <input\n                        class=\"p-input w-full\"\n                        type=\"range\"\n                        min=\"0\"\n                        max=\"100\"\n                        value={this._currentScale}\n                        onInput={(ev) =>\n                            this._onInput((ev.target as HTMLInputElement).value)\n                        }\n                        step=\"0.5\"\n                    />\n                    <p-icon variant=\"plus\" />\n                </div>\n            </Host>\n        );\n    }\n\n    private _setImageRef(ref: CropperImage) {\n        if (this._imageRef) {\n            return;\n        }\n\n        this._imageRef = ref;\n        this._imageRef.$ready((image) =>\n            setTimeout(() => this._setInitialState(image), 200)\n        );\n    }\n\n    private _setInitialState(image) {\n        let scale: number;\n        if (image.naturalWidth > image.naturalHeight) {\n            // set scale by height\n            scale = 200 / image.naturalHeight;\n        }\n\n        if (image.naturalHeight >= image.naturalWidth) {\n            // set scale by width\n            scale = 200 / image.naturalWidth;\n        }\n\n        const current = this._imageRef.$getTransform();\n\n        this._minScale = scale;\n        this._maxScale = current[0];\n\n        this._selectionRef.$resize('nw-resize', 200, 200, 1);\n        this._selectionRef.$center();\n\n        this._setScale(scale);\n        this._toCanvas();\n    }\n\n    private _onAction() {\n        this._setCurrentScale();\n        this._toCanvas();\n    }\n\n    private _setScale(\n        scale: number,\n        setCenter: boolean = true,\n        setCurrentScale: boolean = true\n    ) {\n        const transform = this._imageRef.$getTransform();\n        this._imageRef.$setTransform([\n            scale,\n            0,\n            0,\n            scale,\n            transform[4],\n            transform[5],\n        ]);\n\n        if (setCenter) {\n            this._imageRef.$center();\n        }\n\n        if (setCurrentScale) {\n            this._setCurrentScale();\n        }\n    }\n\n    private _setCurrentScale() {\n        const transform = this._imageRef.$getTransform();\n        const current = transform[0];\n\n        if (current < this._minScale) {\n            this._setScale(this._minScale, true, false);\n            this._currentScale = 0;\n            return;\n        }\n\n        if (current > this._maxScale) {\n            this._setScale(this._maxScale, true, false);\n            this._currentScale = 100;\n            return;\n        }\n\n        if (current === this._minScale) {\n            this._currentScale = 0;\n            return;\n        }\n\n        if (current === this._maxScale) {\n            this._currentScale = 100;\n            return;\n        }\n\n        const minMaxDiff = this._maxScale - this._minScale;\n        const currentDiff = current - this._minScale;\n\n        const percentage = (currentDiff / minMaxDiff) * 100;\n        this._currentScale = percentage;\n    }\n\n    private _onInput(value) {\n        const transform = this._imageRef.$getTransform();\n        const current = transform[0];\n        const minMaxDiff = this._maxScale - this._minScale;\n\n        const toSet = minMaxDiff * (value / 100);\n\n        if (toSet === current) {\n            return;\n        }\n\n        this._setScale(toSet + this._minScale, false, false);\n        this._currentScale = value;\n\n        this._toCanvas();\n    }\n\n    private _toCanvas() {\n        if (this._toCanvasDebounceTimeout) {\n            clearTimeout(this._toCanvasDebounceTimeout);\n        }\n\n        this._toCanvasDebounceTimeout = setTimeout(async () => {\n            const canvas = await this._selectionRef.$toCanvas();\n            if (this.returnType === 'canvas') {\n                this.valueChange.emit(canvas);\n                return;\n            }\n\n            const data = canvas.toDataURL('image/png');\n            this.valueChange.emit(data);\n        }, 200);\n    }\n}\n"]}

package/dist/collection/components/molecules/cropper/test/cropper.component.e2e.js

@@ -0,0 +1,26 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('p-cropper', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<p-cropper></p-cropper>');
+    const element = await page.find('p-cropper');
+    expect(element).toHaveClass('hydrated');
+  });
+  it('renders changes to the content', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<p-cropper></p-cropper>');
+    // const component = await page.find('p-button');
+    const element = await page.find('p-cropper');
+    expect(element.textContent).toEqual(``);
+    // component.setProperty('name', 'World');
+    // await page.waitForChanges();
+    // expect(element.textContent).toEqual(`Hello, World!`);
+    // component.setProperty('name', 'Bob');
+    // await page.waitForChanges();
+    // expect(element.textContent).toEqual(`Hello, Bob!`);
+    // component.setProperty('name', 'Earl');
+    // await page.waitForChanges();
+    // expect(element.textContent).toEqual(`Hello, Earl!`);
+  });
+});
+//# sourceMappingURL=cropper.component.e2e.js.map

package/dist/collection/components/molecules/cropper/test/cropper.component.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cropper.component.e2e.js","sourceRoot":"","sources":["../../../../../src/components/molecules/cropper/test/cropper.component.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;EACvB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACrB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAEhC,MAAM,IAAI,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC;IACjD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC5C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAC5C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAEhC,MAAM,IAAI,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC;IACjD,iDAAiD;IACjD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7C,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;IAExC,0CAA0C;IAC1C,+BAA+B;IAC/B,wDAAwD;IAExD,wCAAwC;IACxC,+BAA+B;IAC/B,sDAAsD;IAEtD,yCAAyC;IACzC,+BAA+B;IAC/B,uDAAuD;EAC3D,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('p-cropper', () => {\n    it('renders', async () => {\n        const page = await newE2EPage();\n\n        await page.setContent('<p-cropper></p-cropper>');\n        const element = await page.find('p-cropper');\n        expect(element).toHaveClass('hydrated');\n    });\n\n    it('renders changes to the content', async () => {\n        const page = await newE2EPage();\n\n        await page.setContent('<p-cropper></p-cropper>');\n        // const component = await page.find('p-button');\n        const element = await page.find('p-cropper');\n        expect(element.textContent).toEqual(``);\n\n        // component.setProperty('name', 'World');\n        // await page.waitForChanges();\n        // expect(element.textContent).toEqual(`Hello, World!`);\n\n        // component.setProperty('name', 'Bob');\n        // await page.waitForChanges();\n        // expect(element.textContent).toEqual(`Hello, Bob!`);\n\n        // component.setProperty('name', 'Earl');\n        // await page.waitForChanges();\n        // expect(element.textContent).toEqual(`Hello, Earl!`);\n    });\n});\n"]}