@paperless/core 1.17.5 → 1.18.0

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

@@ -1 +1 @@
-{"file":"p-drawer.js","mappings":";;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,+GAA+G;;MCgB7H,MAAM;;;;;;;IA0DP,mBAAc,GAAG,KAAK,CAAC;;gBAjDP,KAAK;qBAKA,KAAK;qBAKd,IAAI;8BAKK,IAAI;oBAKL,IAAI;sBAKF,IAAI;oBA0BN,KAAK;;EAEjC,iBAAiB;IACb,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,GAAG,YAAM,IAAI,EAAC,QAAQ,GAAG,CAAC;IAC7C,MAAM,WAAW,GAAG,YAAM,IAAI,EAAC,SAAS,GAAG,CAAC;IAE5C,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,UAAU,IAClB,kBACI,OAAO,EAAC,QAAQ,EAChB,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,IAE3B,0BAAoB,OAAO,EAAE,IAAI,CAAC,QAAQ,IACrC,CAAC,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,KAAI,IAAI,CAAC,cAAc,MACxC,qCACgB,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,IAErC,IAAI,CAAC,cAAc;QACd,aAAa;QACb,IAAI,CAAC,MAAM,CACH,CACrB,EACD,yBAAgB,WAAW,CAAiB,CAC3B,CACZ,CACV,EACT;GACL;EAEO,cAAc,CAAC,EAAE;IACrB,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;MACnB,KAAK,EAAE,EAAE;MACT,QAAQ,EAAE,IAAI,CAAC,QAAQ;KAC1B,CAAC,CAAC;IAEH,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAChB,OAAO;KACV;IAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IAErB,UAAU,CAAC;MACP,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;MACtB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACtB,EAAE,GAAG,CAAC,CAAC;GACX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/organisms/drawer/drawer.component.scss?tag=p-drawer&encapsulation=shadow","src/components/organisms/drawer/drawer.component.tsx"],"sourcesContent":[":host {\n    @apply block;\n}\n","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-drawer',\n    styleUrl: 'drawer.component.scss',\n    shadow: true,\n})\nexport class Drawer {\n    /**\n     * The Header of the drawer\n     */\n    @Prop() header?: string;\n\n    /**\n     * Wether to show the drawer 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 on mobile in the header\n     */\n    @Prop() showClose = true;\n\n    /**\n     * Wether to hide the drawer when the backdrop is clicked\n     */\n    @Prop() backdropClickClose = true;\n\n    /**\n     * Wether the drawer can be closed\n     */\n    @Prop() canClose: boolean = 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<{\n        event: MouseEvent;\n        canClose: boolean;\n    }>;\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 _hasHeaderSlot = false;\n\n    @State() private _closing = false;\n\n    componentWillLoad() {\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\n        return (\n            <Host class=\"p-drawer\">\n                <p-backdrop\n                    variant=\"drawer\"\n                    applyBlur={this.applyBlur}\n                    onClicked={(ev) => this._backdropClick(ev.detail)}\n                    closing={this._closing}\n                    scrollLock={this.scrollLock}\n                >\n                    <p-drawer-container closing={this._closing}>\n                        {(this.header?.length || this._hasHeaderSlot) && (\n                            <p-drawer-header\n                                show-close={this.showClose}\n                                onClose={(ev) => this.close(ev.detail)}\n                            >\n                                {this._hasHeaderSlot\n                                    ? headerContent\n                                    : this.header}\n                            </p-drawer-header>\n                        )}\n                        <p-drawer-body>{bodyContent}</p-drawer-body>\n                    </p-drawer-container>\n                </p-backdrop>\n            </Host>\n        );\n    }\n\n    private _backdropClick(ev) {\n        if (!this.backdropClickClose) {\n            return;\n        }\n\n        this.close(ev);\n    }\n\n    public close(ev: MouseEvent) {\n        this.closeClicked.emit({\n            event: ev,\n            canClose: this.canClose,\n        });\n\n        if (!this.canClose) {\n            return;\n        }\n\n        this._closing = true;\n\n        setTimeout(() => {\n            this.show = false;\n            this._closing = false;\n            this.closed.emit();\n        }, 250);\n    }\n}\n"],"version":3}
+{"file":"p-drawer.js","mappings":";;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,+GAA+G;;MCgB7H,MAAM;;;;;;;IA4DV,mBAAc,GAAG,KAAK,CAAC;;gBAnDP,KAAK;qBAKA,KAAK;qBAKd,IAAI;8BAKK,IAAI;oBAKL,IAAI;sBAKF,IAAI;oBA4BN,KAAK;;EAEjC,iBAAiB;IAChB,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC7C,0BAA0B,CAC1B,CAAC;GACF;EAED,MAAM;;IACL,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACf,OAAO;KACP;IAED,MAAM,aAAa,GAAG,YAAM,IAAI,EAAC,QAAQ,GAAG,CAAC;IAC7C,MAAM,WAAW,GAAG,YAAM,IAAI,EAAC,SAAS,GAAG,CAAC;IAE5C,QACC,EAAC,IAAI,IAAC,KAAK,EAAC,UAAU,IACrB,kBACC,OAAO,EAAC,QAAQ,EAChB,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,IAE3B,0BAAoB,OAAO,EAAE,IAAI,CAAC,QAAQ,IACxC,CAAC,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,KAAI,IAAI,CAAC,cAAc,MAC3C,qCACa,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,IAErC,IAAI,CAAC,cAAc;QACjB,aAAa;QACb,IAAI,CAAC,MAAM,CACG,CAClB,EACD,yBAAgB,WAAW,CAAiB,CACxB,CACT,CACP,EACN;GACF;EAEO,cAAc,CAAC,EAAE;IACxB,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;MAC7B,OAAO;KACP;IAED,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;GACf;EAEM,KAAK,CAAC,EAAc;IAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;MACtB,KAAK,EAAE,EAAE;MACT,QAAQ,EAAE,IAAI,CAAC,QAAQ;KACvB,CAAC,CAAC;IAEH,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MACnB,OAAO;KACP;IAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IAErB,UAAU,CAAC;MACV,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;MACtB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACnB,EAAE,GAAG,CAAC,CAAC;GACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/organisms/drawer/drawer.component.scss?tag=p-drawer&encapsulation=shadow","src/components/organisms/drawer/drawer.component.tsx"],"sourcesContent":[":host {\n\t@apply block;\n}\n","import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tProp,\n\tState,\n} from '@stencil/core';\n\n@Component({\n\ttag: 'p-drawer',\n\tstyleUrl: 'drawer.component.scss',\n\tshadow: true,\n})\nexport class Drawer {\n\t/**\n\t * The Header of the drawer\n\t */\n\t@Prop() header?: string;\n\n\t/**\n\t * Wether to show the drawer or not\n\t */\n\t@Prop() show: boolean = false;\n\n\t/**\n\t * Wether to apply blur to the backdrop\n\t */\n\t@Prop() applyBlur: boolean = false;\n\n\t/**\n\t * Wether to show the close on mobile in the header\n\t */\n\t@Prop() showClose = true;\n\n\t/**\n\t * Wether to hide the drawer when the backdrop is clicked\n\t */\n\t@Prop() backdropClickClose = true;\n\n\t/**\n\t * Wether the drawer can be closed\n\t */\n\t@Prop() canClose: boolean = true;\n\n\t/**\n\t * Wether we should scroll lock the body\n\t */\n\t@Prop() scrollLock: boolean = true;\n\n\t/**\n\t * Close click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tcloseClicked: EventEmitter<{\n\t\tevent: MouseEvent;\n\t\tcanClose: boolean;\n\t}>;\n\n\t/**\n\t * Closed event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclosed: EventEmitter<null>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tprivate _hasHeaderSlot = false;\n\n\t@State() private _closing = false;\n\n\tcomponentWillLoad() {\n\t\tthis._hasHeaderSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"header\"]'\n\t\t);\n\t}\n\n\trender() {\n\t\tif (!this.show) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst headerContent = <slot name=\"header\" />;\n\t\tconst bodyContent = <slot name=\"content\" />;\n\n\t\treturn (\n\t\t\t<Host class=\"p-drawer\">\n\t\t\t\t<p-backdrop\n\t\t\t\t\tvariant=\"drawer\"\n\t\t\t\t\tapplyBlur={this.applyBlur}\n\t\t\t\t\tonClicked={(ev) => this._backdropClick(ev.detail)}\n\t\t\t\t\tclosing={this._closing}\n\t\t\t\t\tscrollLock={this.scrollLock}\n\t\t\t\t>\n\t\t\t\t\t<p-drawer-container closing={this._closing}>\n\t\t\t\t\t\t{(this.header?.length || this._hasHeaderSlot) && (\n\t\t\t\t\t\t\t<p-drawer-header\n\t\t\t\t\t\t\t\tshow-close={this.showClose}\n\t\t\t\t\t\t\t\tonClose={(ev) => this.close(ev.detail)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this._hasHeaderSlot\n\t\t\t\t\t\t\t\t\t? headerContent\n\t\t\t\t\t\t\t\t\t: this.header}\n\t\t\t\t\t\t\t</p-drawer-header>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<p-drawer-body>{bodyContent}</p-drawer-body>\n\t\t\t\t\t</p-drawer-container>\n\t\t\t\t</p-backdrop>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _backdropClick(ev) {\n\t\tif (!this.backdropClickClose) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.close(ev);\n\t}\n\n\tpublic close(ev: MouseEvent) {\n\t\tthis.closeClicked.emit({\n\t\t\tevent: ev,\n\t\t\tcanClose: this.canClose,\n\t\t});\n\n\t\tif (!this.canClose) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._closing = true;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.show = false;\n\t\t\tthis._closing = false;\n\t\t\tthis.closed.emit();\n\t\t}, 250);\n\t}\n}\n"],"version":3}

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

@@ -1 +1 @@
-{"file":"p-info-panel.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,uxCAAuxC;;MCOxyC,SAAS;;;;;mBAI6C,MAAM;;;qBAe1C,KAAK;;EAOlC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,wBAAwB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,WAAW,EAAE,IAClF,WAAK,KAAK,EAAC,QAAQ,IACjB,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,EACN,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,EAEL,IAAI,CAAC,SAAS,KACb,WAAK,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,IAC7C,cAAQ,OAAO,EAAC,UAAU,GAAG,CACzB,CACP,CACI,EACP;GACH;EAEO,MAAM;IACZ,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC;GACnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/info-panel/info-panel.component.scss?tag=p-info-panel&encapsulation=shadow","src/components/atoms/info-panel/info-panel.component.tsx"],"sourcesContent":[":host {\n  @apply flex flex-col w-full relative p-4 bg-indigo-light rounded-large;\n\n  .header {\n    @apply font-semibold text-storm-dark;\n  }\n\n  .content {\n    @apply text-sm;\n  }\n\n  .close {\n    @apply absolute top-2 right-2 cursor-pointer text-storm-vague;\n  }\n}\n\n:host(.variant-positive) {\n  @apply bg-positive-light;\n}\n\n:host(.variant-unbiased) {\n  @apply bg-unbiased-light;\n}\n\n:host(.variant-negative) {\n  @apply bg-negative-light;\n}\n\n:host(.has-close) {\n  @apply pr-8;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'p-info-panel',\n  styleUrl: 'info-panel.component.scss',\n  shadow: true,\n})\nexport class InfoPanel {\n  /**\n   * The variant of the info panel\n   */\n  @Prop() variant: 'info' | 'negative' | 'positive' | 'unbiased' = 'info';\n\n  /**\n   * The header of the info panel\n   */\n  @Prop() header: string;\n\n  /**\n   * The content of the info panel\n   */\n  @Prop() content: string;\n\n  /**\n   * Wether the panel can be closed\n   */\n  @Prop() closeable: boolean = false;\n\n  /**\n   * The host element\n   */\n  @Element() private _el: HTMLElement;\n\n  render() {\n    return (\n      <Host class={`p-info-panel variant-${this.variant} ${this.closeable && 'has-close'}`}>\n        <div class=\"header\">\n          <slot name=\"header\" />\n        </div>\n        <div class=\"content\">\n          <slot name=\"content\" />\n        </div>\n\n        {this.closeable && (\n          <div class=\"close\" onClick={() => this._close()}>\n            <p-icon variant=\"negative\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private _close() {\n    this._el.remove();\n  }\n}\n"],"version":3}
+{"file":"p-info-panel.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,uxCAAuxC;;MCOxyC,SAAS;;;;;mBAI4C,MAAM;;;qBAe1C,KAAK;;EAOlC,MAAM;IACL,QACC,EAAC,IAAI,IACJ,KAAK,EAAE,wBAAwB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,WAAW,EAAE,IAE9E,WAAK,KAAK,EAAC,QAAQ,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,EACN,WAAK,KAAK,EAAC,SAAS,IACnB,YAAM,IAAI,EAAC,SAAS,GAAG,CAClB,EAEL,IAAI,CAAC,SAAS,KACd,WAAK,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,IAC9C,cAAQ,OAAO,EAAC,UAAU,GAAG,CACxB,CACN,CACK,EACN;GACF;EAEO,MAAM;IACb,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC;GAClB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/info-panel/info-panel.component.scss?tag=p-info-panel&encapsulation=shadow","src/components/atoms/info-panel/info-panel.component.tsx"],"sourcesContent":[":host {\n\t@apply flex flex-col w-full relative p-4 bg-indigo-light rounded-large;\n\n\t.header {\n\t\t@apply font-semibold text-storm-dark;\n\t}\n\n\t.content {\n\t\t@apply text-sm;\n\t}\n\n\t.close {\n\t\t@apply absolute top-2 right-2 cursor-pointer text-storm-vague;\n\t}\n}\n\n:host(.variant-positive) {\n\t@apply bg-positive-light;\n}\n\n:host(.variant-unbiased) {\n\t@apply bg-unbiased-light;\n}\n\n:host(.variant-negative) {\n\t@apply bg-negative-light;\n}\n\n:host(.has-close) {\n\t@apply pr-8;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-info-panel',\n\tstyleUrl: 'info-panel.component.scss',\n\tshadow: true,\n})\nexport class InfoPanel {\n\t/**\n\t * The variant of the info panel\n\t */\n\t@Prop() variant: 'info' | 'negative' | 'positive' | 'unbiased' = 'info';\n\n\t/**\n\t * The header of the info panel\n\t */\n\t@Prop() header: string;\n\n\t/**\n\t * The content of the info panel\n\t */\n\t@Prop() content: string;\n\n\t/**\n\t * Wether the panel can be closed\n\t */\n\t@Prop() closeable: boolean = false;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-info-panel variant-${this.variant} ${this.closeable && 'has-close'}`}\n\t\t\t>\n\t\t\t\t<div class=\"header\">\n\t\t\t\t\t<slot name=\"header\" />\n\t\t\t\t</div>\n\t\t\t\t<div class=\"content\">\n\t\t\t\t\t<slot name=\"content\" />\n\t\t\t\t</div>\n\n\t\t\t\t{this.closeable && (\n\t\t\t\t\t<div class=\"close\" onClick={() => this._close()}>\n\t\t\t\t\t\t<p-icon variant=\"negative\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _close() {\n\t\tthis._el.remove();\n\t}\n}\n"],"version":3}

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

@@ -1 +1 @@
-{"file":"p-layout.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,0oHAA0oH;;MCOxpH,MAAM;;;;;mBAImC,SAAS;;EAE3D,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAE,oBAAoB,IAAI,CAAC,OAAO,EAAE,IAC3C,WAAK,KAAK,EAAC,QAAQ,IACf,YAAM,IAAI,EAAC,QAAQ,GAAG,CACpB,EACN,WAAK,KAAK,EAAC,SAAS,IAChB,YAAM,IAAI,EAAC,SAAS,GAAG,CACrB,EACN,WAAK,KAAK,EAAC,SAAS,IAChB,WAAK,KAAK,EAAC,eAAe,IACtB,YAAM,IAAI,EAAC,SAAS,GAAG,CACrB,CACJ,CACH,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/layout/layout.component.scss?tag=p-layout&encapsulation=shadow","src/components/atoms/layout/layout.component.tsx"],"sourcesContent":[":host {\n    @apply grid h-screen w-screen content-start overflow-hidden;\n\n    grid-template-columns: 1fr;\n    grid-template-rows: repeat(1fr, 3);\n    gap: 0;\n    grid-template-areas:\n        'sidebar'\n        'topbar'\n        'content';\n\n    @screen desktop-xs {\n        grid-template-columns: auto 1fr;\n        grid-template-rows: auto 1fr;\n        grid-template-areas:\n            'topbar topbar'\n            'sidebar content';\n    }\n\n    .topbar,\n    .sidebar,\n    .content {\n        @apply self-start;\n    }\n\n    .topbar {\n        grid-area: topbar;\n\n        @apply sticky w-full;\n        @apply order-2 desktop-sm:order-1;\n    }\n\n    .sidebar {\n        grid-area: sidebar;\n\n        @apply box-border flex h-full;\n        @apply w-sidebar-mobile desktop-sm:w-sidebar-desktop;\n        @apply order-1 desktop-sm:order-2;\n    }\n\n    .content {\n        grid-area: content;\n\n        @apply relative flex h-full flex-col overflow-y-auto overflow-x-hidden;\n        @apply order-3;\n\n        padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom)\n            env(safe-area-inset-left);\n\n        .inner-content {\n            @apply relative pb-24;\n\n            @apply px-content-mobile-x py-content-mobile-y;\n            @apply desktop-xs:px-content-desktop-x desktop-xs:py-content-desktop-y;\n\n            @apply desktop-xs:w-content-desktop-xs desktop-sm:w-content-desktop-sm desktop:w-content-desktop desktop-lg:w-content-desktop-lg desktop-xl:w-content-desktop-xl;\n        }\n    }\n}\n\n:host(.variant-default) {\n    .content {\n        @apply flex-1;\n    }\n}\n\n:host(.variant-login) {\n    grid-template-areas:\n        'topbar topbar'\n        'content content';\n\n    @screen desktop-xs {\n        grid-template-areas:\n            'topbar topbar'\n            'content sidebar';\n    }\n\n    .sidebar {\n        @apply hidden w-unset desktop-xs:flex;\n        @apply order-3 p-2;\n        @apply flex-1 overflow-hidden;\n\n        .inner-content {\n            @apply p-2;\n        }\n    }\n\n    .content {\n        @apply order-3 desktop-xs:order-2;\n        @apply items-center desktop-xs:justify-center;\n\n        .inner-content {\n            @apply box-border;\n            @apply desktop-xs:px-18 desktop-xs:py-0;\n            @apply w-full tablet:w-content-desktop-login;\n\n            @apply px-content-mobile-x py-content-mobile-y;\n            padding-top: calc(env(safe-area-inset-top) + 3.5rem);\n\n            @screen desktop-xs {\n                @apply pt-content-mobile-y;\n            }\n        }\n    }\n}\n\n:host(.variant-office) {\n    .sidebar {\n        @apply desktop-sm:w-sidebar-office-desktop;\n    }\n}","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-layout',\n    styleUrl: 'layout.component.scss',\n    shadow: true,\n})\nexport class Layout {\n    /**\n     * Variant of the layout\n     */\n    @Prop() variant: 'default' | 'login' | 'office' = 'default';\n\n    render() {\n        return (\n            <Host class={`p-layout variant-${this.variant}`}>\n                <div class=\"topbar\">\n                    <slot name=\"topbar\" />\n                </div>\n                <div class=\"sidebar\">\n                    <slot name=\"sidebar\" />\n                </div>\n                <div class=\"content\">\n                    <div class=\"inner-content\">\n                        <slot name=\"content\" />\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"p-layout.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,0oHAA0oH;;MCOxpH,MAAM;;;;;mBAIgC,SAAS;;EAE3D,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,oBAAoB,IAAI,CAAC,OAAO,EAAE,IAC9C,WAAK,KAAK,EAAC,QAAQ,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,EACN,WAAK,KAAK,EAAC,SAAS,IACnB,YAAM,IAAI,EAAC,SAAS,GAAG,CAClB,EACN,WAAK,KAAK,EAAC,SAAS,IACnB,WAAK,KAAK,EAAC,eAAe,IACzB,YAAM,IAAI,EAAC,SAAS,GAAG,CAClB,CACD,CACA,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/layout/layout.component.scss?tag=p-layout&encapsulation=shadow","src/components/atoms/layout/layout.component.tsx"],"sourcesContent":[":host {\n\t@apply grid h-screen w-screen content-start overflow-hidden;\n\n\tgrid-template-columns: 1fr;\n\tgrid-template-rows: repeat(1fr, 3);\n\tgap: 0;\n\tgrid-template-areas:\n\t\t'sidebar'\n\t\t'topbar'\n\t\t'content';\n\n\t@screen desktop-xs {\n\t\tgrid-template-columns: auto 1fr;\n\t\tgrid-template-rows: auto 1fr;\n\t\tgrid-template-areas:\n\t\t\t'topbar topbar'\n\t\t\t'sidebar content';\n\t}\n\n\t.topbar,\n\t.sidebar,\n\t.content {\n\t\t@apply self-start;\n\t}\n\n\t.topbar {\n\t\tgrid-area: topbar;\n\n\t\t@apply sticky w-full;\n\t\t@apply order-2 desktop-sm:order-1;\n\t}\n\n\t.sidebar {\n\t\tgrid-area: sidebar;\n\n\t\t@apply box-border flex h-full;\n\t\t@apply w-sidebar-mobile desktop-sm:w-sidebar-desktop;\n\t\t@apply order-1 desktop-sm:order-2;\n\t}\n\n\t.content {\n\t\tgrid-area: content;\n\n\t\t@apply relative flex h-full flex-col overflow-y-auto overflow-x-hidden;\n\t\t@apply order-3;\n\n\t\tpadding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom)\n\t\t\tenv(safe-area-inset-left);\n\n\t\t.inner-content {\n\t\t\t@apply relative pb-24;\n\n\t\t\t@apply px-content-mobile-x py-content-mobile-y;\n\t\t\t@apply desktop-xs:px-content-desktop-x desktop-xs:py-content-desktop-y;\n\n\t\t\t@apply desktop-xs:w-content-desktop-xs desktop-sm:w-content-desktop-sm desktop:w-content-desktop desktop-lg:w-content-desktop-lg desktop-xl:w-content-desktop-xl;\n\t\t}\n\t}\n}\n\n:host(.variant-default) {\n\t.content {\n\t\t@apply flex-1;\n\t}\n}\n\n:host(.variant-login) {\n\tgrid-template-areas:\n\t\t'topbar topbar'\n\t\t'content content';\n\n\t@screen desktop-xs {\n\t\tgrid-template-areas:\n\t\t\t'topbar topbar'\n\t\t\t'content sidebar';\n\t}\n\n\t.sidebar {\n\t\t@apply hidden w-unset desktop-xs:flex;\n\t\t@apply order-3 p-2;\n\t\t@apply flex-1 overflow-hidden;\n\n\t\t.inner-content {\n\t\t\t@apply p-2;\n\t\t}\n\t}\n\n\t.content {\n\t\t@apply order-3 desktop-xs:order-2;\n\t\t@apply items-center desktop-xs:justify-center;\n\n\t\t.inner-content {\n\t\t\t@apply box-border;\n\t\t\t@apply desktop-xs:px-18 desktop-xs:py-0;\n\t\t\t@apply w-full tablet:w-content-desktop-login;\n\n\t\t\t@apply px-content-mobile-x py-content-mobile-y;\n\t\t\tpadding-top: calc(env(safe-area-inset-top) + 3.5rem);\n\n\t\t\t@screen desktop-xs {\n\t\t\t\t@apply pt-content-mobile-y;\n\t\t\t}\n\t\t}\n\t}\n}\n\n:host(.variant-office) {\n\t.sidebar {\n\t\t@apply desktop-sm:w-sidebar-office-desktop;\n\t}\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-layout',\n\tstyleUrl: 'layout.component.scss',\n\tshadow: true,\n})\nexport class Layout {\n\t/**\n\t * Variant of the layout\n\t */\n\t@Prop() variant: 'default' | 'login' | 'office' = 'default';\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`p-layout variant-${this.variant}`}>\n\t\t\t\t<div class=\"topbar\">\n\t\t\t\t\t<slot name=\"topbar\" />\n\t\t\t\t</div>\n\t\t\t\t<div class=\"sidebar\">\n\t\t\t\t\t<slot name=\"sidebar\" />\n\t\t\t\t</div>\n\t\t\t\t<div class=\"content\">\n\t\t\t\t\t<div class=\"inner-content\">\n\t\t\t\t\t\t<slot name=\"content\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

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

@@ -1 +1 @@
-{"file":"p-modal.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,GAAG,YAAM,IAAI,EAAC,QAAQ,GAAG,CAAC;IAC7C,MAAM,WAAW,GAAG,YAAM,IAAI,EAAC,SAAS,GAAG,CAAC;IAC5C,MAAM,aAAa,GAAG,YAAM,IAAI,EAAC,QAAQ,GAAG,CAAC;IAE7C,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,SAAS,IACjB,kBACI,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,IAE3B,yBAAmB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACrD,CAAC,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,KAAI,IAAI,CAAC,cAAc,MACxC,sBACI,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,EACD,oBACI,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,KAChB,0BAAiB,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":[],"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}
+{"file":"p-modal.js","mappings":";;;;;;;;;;;MAea,KAAK;;;;;;;IAwET,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;IAChB,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC7C,0BAA0B,CAC1B,CAAC;IACF,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC7C,0BAA0B,CAC1B,CAAC;GACF;EAED,MAAM;;IACL,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACf,OAAO;KACP;IAED,MAAM,aAAa,GAAG,YAAM,IAAI,EAAC,QAAQ,GAAG,CAAC;IAC7C,MAAM,WAAW,GAAG,YAAM,IAAI,EAAC,SAAS,GAAG,CAAC;IAC5C,MAAM,aAAa,GAAG,YAAM,IAAI,EAAC,QAAQ,GAAG,CAAC;IAE7C,QACC,EAAC,IAAI,IAAC,KAAK,EAAC,SAAS,IACpB,kBACC,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,IAE3B,yBAAmB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACxD,CAAC,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,KAAI,IAAI,CAAC,cAAc,MAC3C,sBACC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,IAErC,IAAI,CAAC,cAAc;QACjB,aAAa;QACb,IAAI,CAAC,MAAM,CACE,CACjB,EACD,oBACC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,CAAC,IAAI,CAAC,cAAc,EAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,WAAW,CACE,EACd,IAAI,CAAC,cAAc,KACnB,0BAAiB,aAAa,CAAkB,CAChD,CACkB,CACR,CACP,EACN;GACF;EAEO,cAAc,CAAC,EAAc;IACpC,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;MAC7B,OAAO;KACP;IAED,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;GACf;EAEM,KAAK,CAAC,EAAc;IAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAE3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IAErB,UAAU,CAAC;MACV,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;MAEtB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACnB,EAAE,GAAG,CAAC,CAAC;GACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/organisms/modal/modal.component.tsx"],"sourcesContent":["import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tProp,\n\tState,\n} from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal',\n\tshadow: true,\n})\nexport class Modal {\n\t/**\n\t * The size of the modal container\n\t */\n\t@Prop() size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n\t/**\n\t * The variant of the modal body\n\t */\n\t@Prop() variant: 'default' | 'table' = 'default';\n\n\t/**\n\t * The Header of the modal\n\t */\n\t@Prop() header?: string;\n\n\t/**\n\t * Wether to show the modal or not\n\t */\n\t@Prop() show: boolean = false;\n\n\t/**\n\t * Wether to apply blur to the backdrop\n\t */\n\t@Prop() applyBlur: boolean = false;\n\n\t/**\n\t * Wether to show the close button in the header\n\t */\n\t@Prop() showClose = true;\n\n\t/**\n\t * Wether to show the footer on mobile\n\t */\n\t@Prop() showMobileFooter = false;\n\n\t/**\n\t * Wether to hide the modal when the backdrop is clicked\n\t */\n\t@Prop() backdropClickClose = true;\n\n\t/**\n\t * Wether we should scroll lock the body\n\t */\n\t@Prop() scrollLock: boolean = true;\n\n\t/**\n\t * Wether the body should have padding\n\t */\n\t@Prop() padding: boolean = true;\n\n\t/**\n\t * Close click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tcloseClicked: EventEmitter<MouseEvent>;\n\n\t/**\n\t * Closed event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclosed: EventEmitter<null>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tprivate _hasFooterSlot = false;\n\tprivate _hasHeaderSlot = false;\n\n\t@State() private _closing = false;\n\n\tcomponentWillLoad() {\n\t\tthis._hasFooterSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"footer\"]'\n\t\t);\n\t\tthis._hasHeaderSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"header\"]'\n\t\t);\n\t}\n\n\trender() {\n\t\tif (!this.show) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst headerContent = <slot name=\"header\" />;\n\t\tconst bodyContent = <slot name=\"content\" />;\n\t\tconst footerContent = <slot name=\"footer\" />;\n\n\t\treturn (\n\t\t\t<Host class=\"p-modal\">\n\t\t\t\t<p-backdrop\n\t\t\t\t\tapplyBlur={this.applyBlur}\n\t\t\t\t\tonClicked={(ev) => this._backdropClick(ev.detail)}\n\t\t\t\t\tclosing={this._closing}\n\t\t\t\t\tscrollLock={this.scrollLock}\n\t\t\t\t>\n\t\t\t\t\t<p-modal-container size={this.size} closing={this._closing}>\n\t\t\t\t\t\t{(this.header?.length || this._hasHeaderSlot) && (\n\t\t\t\t\t\t\t<p-modal-header\n\t\t\t\t\t\t\t\tshowClose={this.showClose}\n\t\t\t\t\t\t\t\tonClose={(ev) => this.close(ev.detail)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this._hasHeaderSlot\n\t\t\t\t\t\t\t\t\t? headerContent\n\t\t\t\t\t\t\t\t\t: this.header}\n\t\t\t\t\t\t\t</p-modal-header>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<p-modal-body\n\t\t\t\t\t\t\tvariant={this.variant}\n\t\t\t\t\t\t\trounded={!this._hasFooterSlot}\n\t\t\t\t\t\t\tpadding={this.padding}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{bodyContent}\n\t\t\t\t\t\t</p-modal-body>\n\t\t\t\t\t\t{this._hasFooterSlot && (\n\t\t\t\t\t\t\t<p-modal-footer>{footerContent}</p-modal-footer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</p-modal-container>\n\t\t\t\t</p-backdrop>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _backdropClick(ev: MouseEvent) {\n\t\tif (!this.backdropClickClose) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.close(ev);\n\t}\n\n\tpublic close(ev: MouseEvent) {\n\t\tthis.closeClicked.emit(ev);\n\n\t\tthis._closing = true;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.show = false;\n\t\t\tthis._closing = false;\n\n\t\t\tthis.closed.emit();\n\t\t}, 550);\n\t}\n}\n"],"version":3}

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

@@ -1 +1 @@
-{"file":"p-navbar.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,w9IAAw9I;;MCOt+I,MAAM;;;;;qBAIK,OAAO;oBAKR,MAAM;qBAEI,KAAK;;EAElC,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,UAAU,IAClB,kBACI,SAAS,EAAE,IAAI,EACf,KAAK,EAAE,uCACH,IAAI,CAAC,SAAS,IAAI,MACtB,EAAE,EACF,SAAS,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,GAC/B,EACd,WAAK,KAAK,EAAE,WAAW,IAAI,CAAC,SAAS,IAAI,MAAM,EAAE,IAC7C,WAAK,KAAK,EAAC,QAAQ,IACf,SAAG,KAAK,EAAC,2CAA2C,IAC/C,IAAI,CAAC,QAAQ,CACd,EAEJ,gBACI,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,UAAU,EACf,YAAY,EAAC,KAAK,EAClB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAEtC,IAAI,CAAC,SAAS,CACR,CACT,EACN,WAAK,KAAK,EAAC,SAAS,IAChB,YAAM,IAAI,EAAC,SAAS,GAAG,CACrB,EACN,WAAK,KAAK,EAAC,SAAS,IAChB,YAAM,IAAI,EAAC,SAAS,GAAG,CACrB,EAEN,WAAK,KAAK,EAAC,MAAM,IACb,YAAM,IAAI,EAAC,MAAM,GAAG,CAClB,CACJ,EAEN,WAAK,KAAK,EAAC,SAAS,IAChB,gBACI,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAErC,IAAI,CAAC,QAAQ,CACP,EAEX,YAAM,IAAI,EAAC,QAAQ,GAAG,CACpB,CACH,EACT;GACL;EAGD,iBAAiB;IACb,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;GAC1B;EAGD,gBAAgB;IACZ,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;GACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/organisms/navbar/navbar.component.scss?tag=p-navbar&encapsulation=shadow","src/components/organisms/navbar/navbar.component.tsx"],"sourcesContent":["@import '../../../style/mixins';\n\n:host {\n    @apply w-full max-h-screen-safe;\n    @apply desktop-xs:w-60;\n\n    .sidebar,\n    .sidebar .company,\n    .sidebar .content,\n    .sidebar .user,\n    .userbar {\n        @apply flex w-full flex-col;\n    }\n\n    .sidebar,\n    .top-bar {\n        @apply bg-white;\n        @apply border-0  border-solid border-mystic-dark #{!important};\n    }\n\n    .sidebar {\n        @apply fixed top-0 left-0 z-navbar h-screen w-60 bg-white;\n        @apply desktop-xs:relative desktop-xs:h-full desktop-xs:w-full;\n        @apply gap-6;\n\n        @apply will-change-transform;\n        @apply -translate-x-full transform-gpu desktop-xs:translate-x-0;\n\n        @apply py-4;\n\n        padding-top: calc(env(safe-area-inset-top, 0) + 1rem);\n\n        @apply border-r #{!important};\n\n        @apply transition-all;\n\n        .company,\n        .content,\n        .user,\n        .header {\n            @apply px-4;\n        }\n\n        .header {\n            @apply flex w-full items-center justify-between;\n            @apply desktop-xs:hidden;\n        }\n\n        .content {\n            @apply overflow-y-auto;\n\n            @include scrollbarY();\n        }\n\n        .user {\n            @apply mt-auto hidden;\n            @apply desktop-xs:flex;\n        }\n\n        &.show {\n            --tw-translate-x: env(safe-area-inset-left, 0);\n        }\n    }\n\n    .top-bar {\n        @apply flex w-full justify-between px-4 py-2;\n\n        padding-top: calc(env(safe-area-inset-top, 0) + 0.5rem);\n        height: calc(env(safe-area-inset-top, 0) + 3rem);\n\n        @apply border-b #{!important};\n\n        @apply desktop-xs:hidden;\n    }\n\n    p-backdrop {\n        @apply hidden;\n\n        &.show {\n            @apply block;\n        }\n    }\n}\n","import { Component, h, Host, Listen, Prop, State } from '@stencil/core';\n\n@Component({\n    tag: 'p-navbar',\n    styleUrl: 'navbar.component.scss',\n    shadow: true,\n})\nexport class Navbar {\n    /**\n     * The text to display for the close button\n     */\n    @Prop() closeText = 'Close';\n\n    /**\n     * The text to display for the menu button & sidebar title\n     */\n    @Prop() menuText = 'Menu';\n\n    @State() private _showMenu = false;\n\n    render() {\n        return (\n            <Host class=\"p-navbar\">\n                <p-backdrop\n                    applyBlur={true}\n                    class={`z-navbar-backdrop desktop-xs:hidden ${\n                        this._showMenu && 'show'\n                    }`}\n                    onClicked={() => (this._showMenu = false)}\n                ></p-backdrop>\n                <div class={`sidebar ${this._showMenu && 'show'}`}>\n                    <div class=\"header\">\n                        <p class=\"text-xl m-0 font-semibold text-storm-dark\">\n                            {this.menuText}\n                        </p>\n\n                        <p-button\n                            variant=\"secondary\"\n                            icon=\"negative\"\n                            iconPosition=\"end\"\n                            size=\"small\"\n                            onClick={() => (this._showMenu = false)}\n                        >\n                            {this.closeText}\n                        </p-button>\n                    </div>\n                    <div class=\"company\">\n                        <slot name=\"company\" />\n                    </div>\n                    <div class=\"content\">\n                        <slot name=\"content\" />\n                    </div>\n\n                    <div class=\"user\">\n                        <slot name=\"user\" />\n                    </div>\n                </div>\n\n                <div class=\"top-bar\">\n                    <p-button\n                        variant=\"secondary\"\n                        icon=\"menu\"\n                        size=\"small\"\n                        onClick={() => (this._showMenu = true)}\n                    >\n                        {this.menuText}\n                    </p-button>\n\n                    <slot name=\"topbar\" />\n                </div>\n            </Host>\n        );\n    }\n\n    @Listen('closeNavbar', { target: 'window' })\n    handleCloseNavbar() {\n        this._showMenu = false;\n    }\n\n    @Listen('openNavbar', { target: 'window' })\n    handleOpenNavbar() {\n        this._showMenu = true;\n    }\n}\n"],"version":3}
+{"file":"p-navbar.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,w9IAAw9I;;MCOt+I,MAAM;;;;;qBAIE,OAAO;oBAKR,MAAM;qBAEI,KAAK;;EAElC,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAC,UAAU,IACrB,kBACC,SAAS,EAAE,IAAI,EACf,KAAK,EAAE,uCACN,IAAI,CAAC,SAAS,IAAI,MACnB,EAAE,EACF,SAAS,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,GAC5B,EACd,WAAK,KAAK,EAAE,WAAW,IAAI,CAAC,SAAS,IAAI,MAAM,EAAE,IAChD,WAAK,KAAK,EAAC,QAAQ,IAClB,SAAG,KAAK,EAAC,2CAA2C,IAClD,IAAI,CAAC,QAAQ,CACX,EAEJ,gBACC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,UAAU,EACf,YAAY,EAAC,KAAK,EAClB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAEtC,IAAI,CAAC,SAAS,CACL,CACN,EACN,WAAK,KAAK,EAAC,SAAS,IACnB,YAAM,IAAI,EAAC,SAAS,GAAG,CAClB,EACN,WAAK,KAAK,EAAC,SAAS,IACnB,YAAM,IAAI,EAAC,SAAS,GAAG,CAClB,EAEN,WAAK,KAAK,EAAC,MAAM,IAChB,YAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACD,EAEN,WAAK,KAAK,EAAC,SAAS,IACnB,gBACC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAErC,IAAI,CAAC,QAAQ,CACJ,EAEX,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,CACA,EACN;GACF;EAGD,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;GACvB;EAGD,gBAAgB;IACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/organisms/navbar/navbar.component.scss?tag=p-navbar&encapsulation=shadow","src/components/organisms/navbar/navbar.component.tsx"],"sourcesContent":["@import '../../../style/mixins';\n\n:host {\n\t@apply w-full max-h-screen-safe;\n\t@apply desktop-xs:w-60;\n\n\t.sidebar,\n\t.sidebar .company,\n\t.sidebar .content,\n\t.sidebar .user,\n\t.userbar {\n\t\t@apply flex w-full flex-col;\n\t}\n\n\t.sidebar,\n\t.top-bar {\n\t\t@apply bg-white;\n\t\t@apply border-0  border-solid border-mystic-dark #{!important};\n\t}\n\n\t.sidebar {\n\t\t@apply fixed top-0 left-0 z-navbar h-screen w-60 bg-white;\n\t\t@apply desktop-xs:relative desktop-xs:h-full desktop-xs:w-full;\n\t\t@apply gap-6;\n\n\t\t@apply will-change-transform;\n\t\t@apply -translate-x-full transform-gpu desktop-xs:translate-x-0;\n\n\t\t@apply py-4;\n\n\t\tpadding-top: calc(env(safe-area-inset-top, 0) + 1rem);\n\n\t\t@apply border-r #{!important};\n\n\t\t@apply transition-all;\n\n\t\t.company,\n\t\t.content,\n\t\t.user,\n\t\t.header {\n\t\t\t@apply px-4;\n\t\t}\n\n\t\t.header {\n\t\t\t@apply flex w-full items-center justify-between;\n\t\t\t@apply desktop-xs:hidden;\n\t\t}\n\n\t\t.content {\n\t\t\t@apply overflow-y-auto;\n\n\t\t\t@include scrollbarY();\n\t\t}\n\n\t\t.user {\n\t\t\t@apply mt-auto hidden;\n\t\t\t@apply desktop-xs:flex;\n\t\t}\n\n\t\t&.show {\n\t\t\t--tw-translate-x: env(safe-area-inset-left, 0);\n\t\t}\n\t}\n\n\t.top-bar {\n\t\t@apply flex w-full justify-between px-4 py-2;\n\n\t\tpadding-top: calc(env(safe-area-inset-top, 0) + 0.5rem);\n\t\theight: calc(env(safe-area-inset-top, 0) + 3rem);\n\n\t\t@apply border-b #{!important};\n\n\t\t@apply desktop-xs:hidden;\n\t}\n\n\tp-backdrop {\n\t\t@apply hidden;\n\n\t\t&.show {\n\t\t\t@apply block;\n\t\t}\n\t}\n}\n","import { Component, h, Host, Listen, Prop, State } from '@stencil/core';\n\n@Component({\n\ttag: 'p-navbar',\n\tstyleUrl: 'navbar.component.scss',\n\tshadow: true,\n})\nexport class Navbar {\n\t/**\n\t * The text to display for the close button\n\t */\n\t@Prop() closeText = 'Close';\n\n\t/**\n\t * The text to display for the menu button & sidebar title\n\t */\n\t@Prop() menuText = 'Menu';\n\n\t@State() private _showMenu = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-navbar\">\n\t\t\t\t<p-backdrop\n\t\t\t\t\tapplyBlur={true}\n\t\t\t\t\tclass={`z-navbar-backdrop desktop-xs:hidden ${\n\t\t\t\t\t\tthis._showMenu && 'show'\n\t\t\t\t\t}`}\n\t\t\t\t\tonClicked={() => (this._showMenu = false)}\n\t\t\t\t></p-backdrop>\n\t\t\t\t<div class={`sidebar ${this._showMenu && 'show'}`}>\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<p class=\"text-xl m-0 font-semibold text-storm-dark\">\n\t\t\t\t\t\t\t{this.menuText}\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\ticon=\"negative\"\n\t\t\t\t\t\t\ticonPosition=\"end\"\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tonClick={() => (this._showMenu = false)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this.closeText}\n\t\t\t\t\t\t</p-button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"company\">\n\t\t\t\t\t\t<slot name=\"company\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<slot name=\"content\" />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div class=\"user\">\n\t\t\t\t\t\t<slot name=\"user\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<div class=\"top-bar\">\n\t\t\t\t\t<p-button\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\ticon=\"menu\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tonClick={() => (this._showMenu = true)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.menuText}\n\t\t\t\t\t</p-button>\n\n\t\t\t\t\t<slot name=\"topbar\" />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('closeNavbar', { target: 'window' })\n\thandleCloseNavbar() {\n\t\tthis._showMenu = false;\n\t}\n\n\t@Listen('openNavbar', { target: 'window' })\n\thandleOpenNavbar() {\n\t\tthis._showMenu = true;\n\t}\n}\n"],"version":3}

package/dist/components/p-navigation-item.js.map

@@ -1 +1 @@
-{"file":"p-navigation-item.js","mappings":";;;;AAAA,MAAM,0BAA0B,GAAG,szCAAszC;;MCQ50C,cAAc;;;;;kBAIG,KAAK;;;;;;EAsB/B,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAE,qBAAqB,IAAI,CAAC,MAAM,IAAI,QAAQ,EAAE,IACvD,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IAClC,IAAI,CAAC,IAAI,IAAI,cAAQ,OAAO,EAAE,IAAI,CAAC,IAAI,GAAI,EAC5C,YAAM,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,aAAa,IACtC,eAAQ,CACL,EACN,IAAI,CAAC,OAAO,KACT,iBAAW,OAAO,EAAC,UAAU,IAAE,IAAI,CAAC,OAAO,CAAa,CAC3D,CACD,CACD,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/molecules/navigation-item/navigation-item.component.scss?tag=p-navigation-item&encapsulation=shadow","src/components/molecules/navigation-item/navigation-item.component.tsx"],"sourcesContent":[":host {\n    @apply w-full inline-block mb-1;\n\n    > a {\n        @apply w-full h-8 px-2 cursor-pointer rounded-large no-underline;\n        @apply flex items-center gap-2;\n        @apply text-storm font-semibold;\n\n        @apply hover:bg-indigo-light;\n\n        > p-icon {\n            @apply text-storm;\n        }\n\n        > p-counter {\n            @apply ml-auto;\n        }\n    }\n}\n\n:host(.active) {\n    > a {\n        @apply text-indigo bg-indigo-light;\n\n        > p-icon {\n            @apply text-indigo;\n        }\n    }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n    tag: 'p-navigation-item',\n    styleUrl: 'navigation-item.component.scss',\n    shadow: true,\n})\nexport class NavigationItem {\n    /**\n     * Wether the navigation item is active\n     */\n    @Prop() active: boolean = false;\n\n    /**\n     * Icon of the navigation item\n     */\n    @Prop() icon: IconVariant;\n\n    /**\n     * Icon of the navigation item\n     */\n    @Prop() counter: number | string;\n\n    /**\n     * The href of the navigation item\n     */\n    @Prop() href: string;\n\n    /**\n     * The target of the navigation item\n     */\n    @Prop() target: string;\n\n    render() {\n        return (\n            <Host class={`p-navigation-item ${this.active && 'active'}`}>\n                <a href={this.href} target={this.target}>\n                    {this.icon && <p-icon variant={this.icon} />}\n                    <span class={this.counter && 'has-counter'}>\n                        <slot />\n                    </span>\n                    {this.counter && (\n                        <p-counter variant=\"negative\">{this.counter}</p-counter>\n                    )}\n                </a>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"p-navigation-item.js","mappings":";;;;AAAA,MAAM,0BAA0B,GAAG,szCAAszC;;MCQ50C,cAAc;;;;;kBAIA,KAAK;;;;;;EAsB/B,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,qBAAqB,IAAI,CAAC,MAAM,IAAI,QAAQ,EAAE,IAC1D,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACrC,IAAI,CAAC,IAAI,IAAI,cAAQ,OAAO,EAAE,IAAI,CAAC,IAAI,GAAI,EAC5C,YAAM,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,aAAa,IACzC,eAAQ,CACF,EACN,IAAI,CAAC,OAAO,KACZ,iBAAW,OAAO,EAAC,UAAU,IAAE,IAAI,CAAC,OAAO,CAAa,CACxD,CACE,CACE,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/molecules/navigation-item/navigation-item.component.scss?tag=p-navigation-item&encapsulation=shadow","src/components/molecules/navigation-item/navigation-item.component.tsx"],"sourcesContent":[":host {\n\t@apply w-full inline-block mb-1;\n\n\t> a {\n\t\t@apply w-full h-8 px-2 cursor-pointer rounded-large no-underline;\n\t\t@apply flex items-center gap-2;\n\t\t@apply text-storm font-semibold;\n\n\t\t@apply hover:bg-indigo-light;\n\n\t\t> p-icon {\n\t\t\t@apply text-storm;\n\t\t}\n\n\t\t> p-counter {\n\t\t\t@apply ml-auto;\n\t\t}\n\t}\n}\n\n:host(.active) {\n\t> a {\n\t\t@apply text-indigo bg-indigo-light;\n\n\t\t> p-icon {\n\t\t\t@apply text-indigo;\n\t\t}\n\t}\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n\ttag: 'p-navigation-item',\n\tstyleUrl: 'navigation-item.component.scss',\n\tshadow: true,\n})\nexport class NavigationItem {\n\t/**\n\t * Wether the navigation item is active\n\t */\n\t@Prop() active: boolean = false;\n\n\t/**\n\t * Icon of the navigation item\n\t */\n\t@Prop() icon: IconVariant;\n\n\t/**\n\t * Icon of the navigation item\n\t */\n\t@Prop() counter: number | string;\n\n\t/**\n\t * The href of the navigation item\n\t */\n\t@Prop() href: string;\n\n\t/**\n\t * The target of the navigation item\n\t */\n\t@Prop() target: string;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`p-navigation-item ${this.active && 'active'}`}>\n\t\t\t\t<a href={this.href} target={this.target}>\n\t\t\t\t\t{this.icon && <p-icon variant={this.icon} />}\n\t\t\t\t\t<span class={this.counter && 'has-counter'}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t{this.counter && (\n\t\t\t\t\t\t<p-counter variant=\"negative\">{this.counter}</p-counter>\n\t\t\t\t\t)}\n\t\t\t\t</a>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

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

@@ -1 +1 @@
-{"file":"p-profile.js","mappings":";;;;;AAAA,MAAM,mBAAmB,GAAG,82EAA82E;;MCO73E,OAAO;;;;;mBAIsB,MAAM;gBAKkB,OAAO;yBAOpC,KAAK;;EAEtC,mBAAmB;IACf,IAAI,CAAC,aAAa,EAAE,CAAC;GACxB;EAED,MAAM;IACF,MAAM,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC5C,4BAA4B,CAC/B,CAAC;IACF,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;IAClD,QACI,EAAC,IAAI,IACD,KAAK,EAAE,aAAa,eAAe,IAAI,cAAc,IACjD,IAAI,CAAC,aAAa,IAAI,QAC1B,EAAE,IAED,eAAe,IACZ,kBACI,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAC,UAAU,EACnB,SAAS,EACL,IAAI,CAAC,OAAO,KAAK,MAAM,GAAG,SAAS,GAAG,YAAY,EAEtD,cAAc,EAAE,IAAI,EACpB,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,MAAM,CAAC,IAEjD,OAAO,EACR,WAAK,IAAI,EAAC,OAAO,IACb,YAAM,IAAI,EAAC,UAAU,GAAG,CACtB,CACG,KAEb,OAAO,CACV,CACE,EACT;GACL;EAEO,WAAW,CAAC,eAAe;IAC/B,QACI,WAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,IAC/B,YAAM,IAAI,EAAC,QAAQ,GAAG,EACtB,WAAK,KAAK,EAAC,MAAM,IACb,YAAM,IAAI,EAAC,OAAO,GAAG,EACrB,YAAM,IAAI,EAAC,UAAU,GAAG,CACtB,EAEL,eAAe,IAAI,IAAI,CAAC,QAAQ,EAAE,CACjC,EACR;GACL;EAEO,aAAa;;IACjB,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CACjC,yBAAyB,CACN,CAAC;IAExB,IAAI,CAAC,MAAM,EAAE;MACT,OAAO;KACV;IAED,MAAM,CAAC,OAAO,GAAG,MAAA,IAAI,CAAC,OAAO,mCAAI,MAAM,CAAC,OAAO,CAAC;IAChD,MAAM,CAAC,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,mCAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC;GAC3C;EAEO,QAAQ;IACZ,QACI,cACI,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM,GAC1D,EACJ;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/molecules/profile/profile.component.scss?tag=p-profile&encapsulation=shadow","src/components/molecules/profile/profile.component.tsx"],"sourcesContent":[":host {\n    @apply flex;\n\n    .content {\n        @apply flex gap-3 items-center w-full;\n\n        .name {\n            @apply flex flex-col justify-center overflow-hidden;\n\n            > *:nth-child(1) {\n                @apply text-sm text-storm-dark;\n                @apply font-semibold;\n            }\n\n            > *:nth-child(2) {\n                @apply text-sm text-storm-vague;\n            }\n\n            ::slotted(*) {\n                @apply text-ellipsis overflow-hidden whitespace-nowrap;\n            }\n        }\n    }\n}\n\n:host([size='small']) {\n    @apply h-8;\n}\n\n:host([size='medium']) {\n    @apply h-[3.125rem];\n}\n\n:host([size='large']) {\n    @apply h-16;\n}\n\n:host(.has-dropdown) {\n    @apply cursor-pointer;\n\n    .content {\n        @apply p-2 rounded;\n        @apply border border-solid border-mystic-dark #{!important};\n    }\n}\n\n:host(.has-dropdown[size='small']) {\n    @apply h-12;\n}\n\n:host(.has-dropdown[size='medium']) {\n    @apply h-[4.125rem];\n}\n\n:host(.has-dropdown[size='large']) {\n    @apply h-20;\n}\n\n:host(.has-dropdown:hover),\n:host(.active) {\n    .content {\n        @apply shadow-4;\n    }\n}\n\n:host(.active) {\n    .content {\n        p-icon {\n            @apply text-indigo;\n        }\n    }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n    tag: 'p-profile',\n    styleUrl: 'profile.component.scss',\n    shadow: true,\n})\nexport class Profile {\n    /**\n     * The variant of the profile\n     */\n    @Prop() variant: 'company' | 'user' = 'user';\n\n    /**\n     * The size of the profile avatar\n     */\n    @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'small';\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    @State() private _dropdownOpen = false;\n\n    componentWillRender() {\n        this._updateAvatar();\n    }\n\n    render() {\n        const hasDropdownSlot = !!this._el.querySelector(\n            ':scope > [slot=\"dropdown\"]'\n        );\n        const content = this._getContent(hasDropdownSlot);\n        return (\n            <Host\n                class={`p-profile ${hasDropdownSlot && 'has-dropdown'} ${\n                    this._dropdownOpen && 'active'\n                }`}\n            >\n                {hasDropdownSlot ? (\n                    <p-dropdown\n                        class=\"w-full min-w-0\"\n                        strategy=\"absolute\"\n                        placement={\n                            this.variant === 'user' ? 'top-end' : 'bottom-end'\n                        }\n                        applyFullWidth={true}\n                        applyMaxWidth={false}\n                        onIsOpen={(ev) => (this._dropdownOpen = ev.detail)}\n                    >\n                        {content}\n                        <div slot=\"items\">\n                            <slot name=\"dropdown\" />\n                        </div>\n                    </p-dropdown>\n                ) : (\n                    content\n                )}\n            </Host>\n        );\n    }\n\n    private _getContent(hasDropdownSlot) {\n        return (\n            <div class=\"content\" slot=\"trigger\">\n                <slot name=\"avatar\" />\n                <div class=\"name\">\n                    <slot name=\"title\" />\n                    <slot name=\"subtitle\" />\n                </div>\n\n                {hasDropdownSlot && this._getIcon()}\n            </div>\n        );\n    }\n\n    private _updateAvatar() {\n        const avatar = this._el.querySelector(\n            'p-avatar[slot=\"avatar\"]'\n        ) as HTMLPAvatarElement;\n\n        if (!avatar) {\n            return;\n        }\n\n        avatar.variant = this.variant ?? avatar.variant;\n        avatar.size = this.size ?? avatar?.size;\n    }\n\n    private _getIcon() {\n        return (\n            <p-icon\n                class=\"ml-auto\"\n                variant={this.variant === 'company' ? 'chevron' : 'more'}\n            />\n        );\n    }\n}\n"],"version":3}
+{"file":"p-profile.js","mappings":";;;;;AAAA,MAAM,mBAAmB,GAAG,82EAA82E;;MCO73E,OAAO;;;;;mBAImB,MAAM;gBAKkB,OAAO;yBAOpC,KAAK;;EAEtC,mBAAmB;IAClB,IAAI,CAAC,aAAa,EAAE,CAAC;GACrB;EAED,MAAM;IACL,MAAM,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC/C,4BAA4B,CAC5B,CAAC;IACF,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;IAClD,QACC,EAAC,IAAI,IACJ,KAAK,EAAE,aAAa,eAAe,IAAI,cAAc,IACpD,IAAI,CAAC,aAAa,IAAI,QACvB,EAAE,IAED,eAAe,IACf,kBACC,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAC,UAAU,EACnB,SAAS,EACR,IAAI,CAAC,OAAO,KAAK,MAAM,GAAG,SAAS,GAAG,YAAY,EAEnD,cAAc,EAAE,IAAI,EACpB,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,MAAM,CAAC,IAEjD,OAAO,EACR,WAAK,IAAI,EAAC,OAAO,IAChB,YAAM,IAAI,EAAC,UAAU,GAAG,CACnB,CACM,KAEb,OAAO,CACP,CACK,EACN;GACF;EAEO,WAAW,CAAC,eAAe;IAClC,QACC,WAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,IAClC,YAAM,IAAI,EAAC,QAAQ,GAAG,EACtB,WAAK,KAAK,EAAC,MAAM,IAChB,YAAM,IAAI,EAAC,OAAO,GAAG,EACrB,YAAM,IAAI,EAAC,UAAU,GAAG,CACnB,EAEL,eAAe,IAAI,IAAI,CAAC,QAAQ,EAAE,CAC9B,EACL;GACF;EAEO,aAAa;;IACpB,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CACpC,yBAAyB,CACH,CAAC;IAExB,IAAI,CAAC,MAAM,EAAE;MACZ,OAAO;KACP;IAED,MAAM,CAAC,OAAO,GAAG,MAAA,IAAI,CAAC,OAAO,mCAAI,MAAM,CAAC,OAAO,CAAC;IAChD,MAAM,CAAC,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,mCAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC;GACxC;EAEO,QAAQ;IACf,QACC,cACC,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM,GACvD,EACD;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/molecules/profile/profile.component.scss?tag=p-profile&encapsulation=shadow","src/components/molecules/profile/profile.component.tsx"],"sourcesContent":[":host {\n\t@apply flex;\n\n\t.content {\n\t\t@apply flex gap-3 items-center w-full;\n\n\t\t.name {\n\t\t\t@apply flex flex-col justify-center overflow-hidden;\n\n\t\t\t> *:nth-child(1) {\n\t\t\t\t@apply text-sm text-storm-dark;\n\t\t\t\t@apply font-semibold;\n\t\t\t}\n\n\t\t\t> *:nth-child(2) {\n\t\t\t\t@apply text-sm text-storm-vague;\n\t\t\t}\n\n\t\t\t::slotted(*) {\n\t\t\t\t@apply text-ellipsis overflow-hidden whitespace-nowrap;\n\t\t\t}\n\t\t}\n\t}\n}\n\n:host([size='small']) {\n\t@apply h-8;\n}\n\n:host([size='medium']) {\n\t@apply h-[3.125rem];\n}\n\n:host([size='large']) {\n\t@apply h-16;\n}\n\n:host(.has-dropdown) {\n\t@apply cursor-pointer;\n\n\t.content {\n\t\t@apply p-2 rounded;\n\t\t@apply border border-solid border-mystic-dark #{!important};\n\t}\n}\n\n:host(.has-dropdown[size='small']) {\n\t@apply h-12;\n}\n\n:host(.has-dropdown[size='medium']) {\n\t@apply h-[4.125rem];\n}\n\n:host(.has-dropdown[size='large']) {\n\t@apply h-20;\n}\n\n:host(.has-dropdown:hover),\n:host(.active) {\n\t.content {\n\t\t@apply shadow-4;\n\t}\n}\n\n:host(.active) {\n\t.content {\n\t\tp-icon {\n\t\t\t@apply text-indigo;\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n\ttag: 'p-profile',\n\tstyleUrl: 'profile.component.scss',\n\tshadow: true,\n})\nexport class Profile {\n\t/**\n\t * The variant of the profile\n\t */\n\t@Prop() variant: 'company' | 'user' = 'user';\n\n\t/**\n\t * The size of the profile avatar\n\t */\n\t@Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'small';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _dropdownOpen = false;\n\n\tcomponentWillRender() {\n\t\tthis._updateAvatar();\n\t}\n\n\trender() {\n\t\tconst hasDropdownSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"dropdown\"]'\n\t\t);\n\t\tconst content = this._getContent(hasDropdownSlot);\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-profile ${hasDropdownSlot && 'has-dropdown'} ${\n\t\t\t\t\tthis._dropdownOpen && 'active'\n\t\t\t\t}`}\n\t\t\t>\n\t\t\t\t{hasDropdownSlot ? (\n\t\t\t\t\t<p-dropdown\n\t\t\t\t\t\tclass=\"w-full min-w-0\"\n\t\t\t\t\t\tstrategy=\"absolute\"\n\t\t\t\t\t\tplacement={\n\t\t\t\t\t\t\tthis.variant === 'user' ? 'top-end' : 'bottom-end'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tapplyFullWidth={true}\n\t\t\t\t\t\tapplyMaxWidth={false}\n\t\t\t\t\t\tonIsOpen={(ev) => (this._dropdownOpen = ev.detail)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{content}\n\t\t\t\t\t\t<div slot=\"items\">\n\t\t\t\t\t\t\t<slot name=\"dropdown\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</p-dropdown>\n\t\t\t\t) : (\n\t\t\t\t\tcontent\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _getContent(hasDropdownSlot) {\n\t\treturn (\n\t\t\t<div class=\"content\" slot=\"trigger\">\n\t\t\t\t<slot name=\"avatar\" />\n\t\t\t\t<div class=\"name\">\n\t\t\t\t\t<slot name=\"title\" />\n\t\t\t\t\t<slot name=\"subtitle\" />\n\t\t\t\t</div>\n\n\t\t\t\t{hasDropdownSlot && this._getIcon()}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate _updateAvatar() {\n\t\tconst avatar = this._el.querySelector(\n\t\t\t'p-avatar[slot=\"avatar\"]'\n\t\t) as HTMLPAvatarElement;\n\n\t\tif (!avatar) {\n\t\t\treturn;\n\t\t}\n\n\t\tavatar.variant = this.variant ?? avatar.variant;\n\t\tavatar.size = this.size ?? avatar?.size;\n\t}\n\n\tprivate _getIcon() {\n\t\treturn (\n\t\t\t<p-icon\n\t\t\t\tclass=\"ml-auto\"\n\t\t\t\tvariant={this.variant === 'company' ? 'chevron' : 'more'}\n\t\t\t/>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/p-select.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as childOf } from './child-of.js';
+import { d as defineCustomElement$b } from './avatar.component.js';
 import { d as defineCustomElement$a } from './dropdown.component.js';
 import { d as defineCustomElement$9 } from './dropdown-menu-container.component.js';
 import { d as defineCustomElement$8 } from './dropdown-menu-item.component.js';
@@ -10,7 +11,7 @@ import { d as defineCustomElement$4 } from './input-group.component.js';
 import { d as defineCustomElement$3 } from './loader.component.js';
 import { d as defineCustomElement$2 } from './tooltip.component.js';
 
-const selectComponentCss = ".flex{display:flex!important}.w-full{width:100%!important}*{box-sizing:border-box}p-select{display:flex;flex-direction:column;width:100%}p-select input.read-only{text-overflow:ellipsis}.static{position:static!important}.h-6{height:1.5rem!important}.cursor-pointer{cursor:pointer!important}.rounded{border-radius:.25rem!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}";
+const selectComponentCss = ".pointer-events-none{pointer-events:none!important}.pointer-events-auto{pointer-events:auto!important}.absolute{position:absolute!important}.relative{position:relative!important}.left-0{left:0!important}.top-0{top:0!important}.flex{display:flex!important}.h-\\[1\\.625rem\\]{height:1.625rem!important}.h-full{height:100%!important}.w-full{width:100%!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.rounded{border-radius:.25rem!important}.bg-indigo-light{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-4{padding-bottom:1rem!important;padding-top:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-indigo{--tw-text-opacity:1!important;color:rgb(82 138 250/var(--tw-text-opacity))!important}.text-indigo-dark{--tw-text-opacity:1!important;color:rgb(44 75 169/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}*{box-sizing:border-box}p-select{display:flex;flex-direction:column;position:relative;width:100%}p-select input.read-only{text-overflow:ellipsis}p-select .multi-container{align-items:center;display:flex;gap:.5rem;height:100%;left:0;overflow:hidden;padding:1rem .5rem;pointer-events:none;position:absolute;top:0;width:100%}p-select .multi-container .item{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(241 246 255/var(--tw-bg-opacity));border-radius:.25rem;color:rgb(44 75 169/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;height:1.625rem;line-height:1.25rem;padding-left:.5rem;padding-right:.5rem;pointer-events:auto;white-space:nowrap}p-select .multi-container .item p-icon{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity));font-size:.75rem;line-height:1rem}p-select .multi-container .extra{--tw-text-opacity:1;color:rgb(128 130 158/var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem;pointer-events:none}.static{position:static!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.gap-1{gap:.25rem!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}";
 
 const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement {
   constructor() {
@@ -19,7 +20,9 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     this.queryChange = createEvent(this, "queryChange", 3);
     this.valueChange = createEvent(this, "valueChange", 3);
     this.dropdownShown = createEvent(this, "dropdownShown", 3);
+    this.add = createEvent(this, "add", 3);
     this.items = undefined;
+    this.multi = undefined;
     this.icon = undefined;
     this.query = undefined;
     this.placeholder = undefined;
@@ -27,6 +30,8 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     this.value = undefined;
     this.displayKey = 'text';
     this.valueKey = undefined;
+    this.avatarKey = undefined;
+    this.avatarLettersKey = undefined;
     this.identifierKey = undefined;
     this.queryKey = undefined;
     this.autoSelectFirst = true;
@@ -43,9 +48,12 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     this.required = undefined;
     this.error = undefined;
     this.disabled = false;
+    this.showAddItem = false;
+    this.addItemText = 'Add item';
     this._showDropdown = false;
     this._selectedItem = null;
     this._isAutoCompleting = false;
+    this._amountHidden = 0;
   }
   get _items() {
     var _a, _b;
@@ -78,11 +86,14 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     return items === null || items === void 0 ? void 0 : items.slice(0, this.maxDisplayedItems);
   }
   get _displayValue() {
-    var _a;
+    var _a, _b;
     if (this._isAutoCompleting) {
       return this.query;
     }
-    return (_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a[this.displayKey];
+    if (this.multi) {
+      return (_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a.map((i) => i === null || i === void 0 ? void 0 : i[this.displayKey]).filter((i) => !!i);
+    }
+    return (_b = this._selectedItem) === null || _b === void 0 ? void 0 : _b[this.displayKey];
   }
   get _placeholder() {
     var _a;
@@ -98,17 +109,46 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     if (!this.valueKey && !this.identifierKey) {
       throw new Error('You must provide a valueKey or identifierKey');
     }
+    if (this.multi) {
+      this.enableAutocomplete = false;
+      this._setMultiContainerMaxWidth();
+      this._resizeObserver = new ResizeObserver(() => {
+        if (this._resizeDebounceTimer) {
+          clearTimeout(this._resizeDebounceTimer);
+          this._resizeDebounceTimer = null;
+        }
+        this._resizeDebounceTimer = setTimeout(() => {
+          this._setMultiContainerMaxWidth();
+          this._checkSelectedItems();
+        }, 200);
+      });
+      this._resizeObserver.observe(this._el);
+    }
     if (this.value) {
       this._valueChange();
       return;
     }
     this.itemChanges();
   }
+  componentDidRender() {
+    if (this.multi) {
+      this._setMultiContainerMaxWidth();
+      this._checkSelectedItems();
+    }
+  }
+  disconnectedCallback() {
+    if (this.multi) {
+      this._resizeObserver.disconnect();
+    }
+  }
   render() {
+    var _a, _b;
     return (h(Host, { class: "p-select" }, this._showDropdown && (!!this._items.length || this.loading), this._isAutoCompleting, h("p-dropdown", { disableTriggerClick: true, calculateWidth: true, insideClick: true, scrollable: true, show: this._showDropdown &&
-        (!!this._items.length || this.loading) }, h("p-input-group", { slot: "trigger", icon: this.icon, size: this.size, prefix: this.prefix, label: this.label, helper: this.helper, required: this.required, error: this.error, disabled: this.disabled, focused: this._showDropdown, focusMethod: this.enableAutocomplete ? 'focus' : 'click' }, h("input", { slot: "input", type: "text", placeholder: this._placeholder, value: this._displayValue, class: `p-input cursor-pointer ${!this._isAutoCompleting && 'read-only'}`, onFocus: (ev) => this._onFocus(ev), onMouseDown: (ev) => this._onMouseDown(ev), onClick: () => this._onClick(), onInput: (ev) => this._onChange(ev) }), this.showChevron && (h("p-icon", { variant: "chevron", slot: "suffix" }))), h("div", { slot: "items" }, this.loading
+        (!!this._items.length || this.loading) }, h("p-input-group", { slot: "trigger", icon: this.icon, size: this.size, prefix: this.prefix, label: this.label, helper: this.helper, required: this.required, error: this.error, disabled: this.disabled, focused: this._showDropdown, focusMethod: this.enableAutocomplete ? 'focus' : 'click' }, h("input", { slot: "input", type: "text", placeholder: this._placeholder, value: this.multi && ((_a = this._displayValue) === null || _a === void 0 ? void 0 : _a.length)
+        ? ' '
+        : this._displayValue, class: `p-input cursor-pointer ${!this._isAutoCompleting && 'read-only'}`, onFocus: (ev) => this._onFocus(ev), onMouseDown: (ev) => this._onMouseDown(ev), onClick: () => this._onClick(), onInput: (ev) => this._onChange(ev), ref: (ref) => (this._inputRef = ref) }), this.showChevron && (h("p-icon", { variant: "chevron", slot: "suffix" }))), h("div", { slot: "items" }, this.loading
       ? this._getLoadingItems()
-      : this._getItems()))));
+      : this._getItems(), this.showAddItem && this._getAddItem())), this.multi && ((_b = this._selectedItem) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h("div", { class: "multi-container", ref: (ref) => (this._multiContainerRef = ref) }, this._selectedItem.map((item) => (h("div", { class: "item", onClick: () => this._selectValue(item) }, item[this.displayKey], h("p-icon", { variant: "negative" })))), h("div", { class: "extra hidden" }, "+", this._amountHidden)))));
   }
   documentClickHandler({ target }) {
     if (!this._showDropdown || childOf(target, this._el)) {
@@ -134,14 +174,28 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     if (this._isAutoCompleting && ((_a = this.query) === null || _a === void 0 ? void 0 : _a.length)) {
       return;
     }
-    let value = this.value;
+    let value = typeof this.value === 'string' && this.multi
+      ? JSON.parse(this.value)
+      : this.value;
+    if (this.multi) {
+      if (!Array.isArray(value)) {
+        this.value = [];
+        this.valueChange.emit(this.value);
+        return;
+      }
+      this.value = value;
+      if (!value.length) {
+        return;
+      }
+      this._selectedItem =
+        !!this.valueKey && this.valueKey !== 'false'
+          ? this._items.filter((i) => value.includes(i === null || i === void 0 ? void 0 : i[this.valueKey]))
+          : [...value];
+      return;
+    }
     if (!this._selectedItem && !value && this.autoSelectFirst) {
       value = this._items[0];
     }
-    // if (!value) {
-    //     this._selectValue(null);
-    //     return;
-    // }
     const identifier = typeof value === 'object' && value !== null
       ? value[this._identifierKey]
       : value;
@@ -172,14 +226,40 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     this._selectValue(!!item ? item : value);
   }
   _selectValue(item) {
-    this._selectedItem = item;
-    const value = !!this.valueKey && this.valueKey !== 'false' && item !== null
+    let value = !!this.valueKey && this.valueKey !== 'false' && item !== null
       ? item === null || item === void 0 ? void 0 : item[this.valueKey]
       : item;
     this.query = this.keepQuery ? item === null || item === void 0 ? void 0 : item[this.displayKey] : null;
-    this.value = value;
-    this.valueChange.emit(value);
-    this._onBlur(true);
+    if (this.multi) {
+      if (!this._selectedItem || !Array.isArray(this._selectedItem)) {
+        this._selectedItem = [];
+      }
+      if (!this.value || !Array.isArray(this.value)) {
+        this.value = [];
+      }
+      const selectedItem = [...this._selectedItem];
+      const valueArray = [...this.value];
+      const includesIndex = selectedItem.findIndex((i) => i[this._identifierKey] === item[this._identifierKey]);
+      if (includesIndex === -1) {
+        selectedItem.push(item);
+        valueArray.push(value);
+      }
+      else {
+        selectedItem.splice(includesIndex, 1);
+        valueArray.splice(includesIndex, 1);
+      }
+      this._selectedItem = selectedItem;
+      this.value = valueArray;
+      this.valueChange.emit(valueArray);
+    }
+    else {
+      this._selectedItem = item;
+      this.value = value;
+      this.valueChange.emit(value);
+    }
+    if (!this.multi) {
+      this._onBlur(true);
+    }
   }
   _onFocus(ev) {
     if (!this.enableAutocomplete) {
@@ -229,14 +309,53 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
   }
   _getItems() {
     return this._items.map((item) => {
-      var _a;
-      return (h("p-dropdown-menu-item", { onClick: () => this._selectValue(item), active: item[this._identifierKey] ===
-          ((_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a[this._identifierKey]) }, item[this.displayKey]));
+      var _a, _b;
+      return (h("p-dropdown-menu-item", { onClick: () => this._selectValue(item), active: this.multi
+          ? ((_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a.findIndex((i) => i[this._identifierKey] ===
+            item[this._identifierKey])) >= 0
+          : item[this._identifierKey] ===
+            ((_b = this._selectedItem) === null || _b === void 0 ? void 0 : _b[this._identifierKey]), variant: this.multi ? 'checkbox' : 'default' }, this.avatarKey ? (h("span", { class: "flex items-center gap-2" }, h("p-avatar", { size: "xsmall", src: item[this.avatarKey], letters: item[this.avatarLettersKey] }), item[this.displayKey])) : (item[this.displayKey])));
     });
   }
+  _getAddItem() {
+    return (h("p-dropdown-menu-item", { onClick: () => this.add.emit() }, h("span", { class: "text-indigo font-semibold flex gap-1 items-center" }, this.addItemText, h("p-icon", { variant: "plus" }))));
+  }
   _getLoadingItems() {
     return [0, 0, 0].map(() => (h("p-dropdown-menu-item", { enableHover: false }, h("p-loader", { variant: "ghost", class: "h-6 w-full rounded" }))));
   }
+  _setMultiContainerMaxWidth() {
+    if (!this._inputRef || !this._multiContainerRef) {
+      return;
+    }
+    this._multiContainerRef.style.maxWidth = `${this._inputRef.clientWidth - 16}px`;
+  }
+  _checkSelectedItems() {
+    if (!this._multiContainerRef) {
+      return;
+    }
+    const containerRect = this._multiContainerRef.getBoundingClientRect();
+    const items = Array.from(this._multiContainerRef.querySelectorAll('.item'));
+    let amountHidden = 0;
+    for (const child of items) {
+      child.classList.remove('hidden');
+      const childRect = child.getBoundingClientRect();
+      if (childRect.right > containerRect.right) {
+        child.classList.add('hidden');
+        amountHidden++;
+      }
+    }
+    this._amountHidden = amountHidden;
+    const extra = this._multiContainerRef.querySelector('.extra');
+    if (!extra) {
+      return;
+    }
+    if (!extra.classList.contains('hidden')) {
+      extra.classList.add('hidden');
+    }
+    if (amountHidden > 0) {
+      extra.classList.remove('hidden');
+    }
+  }
   get _el() { return this; }
   static get watchers() { return {
     "value": ["_valueChange"],
@@ -246,6 +365,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
   static get style() { return selectComponentCss; }
 }, [0, "p-select", {
     "items": [1],
+    "multi": [516],
     "icon": [1],
     "query": [1],
     "placeholder": [1],
@@ -253,6 +373,8 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     "value": [8],
     "displayKey": [1, "display-key"],
     "valueKey": [1, "value-key"],
+    "avatarKey": [1, "avatar-key"],
+    "avatarLettersKey": [1, "avatar-letters-key"],
     "identifierKey": [1, "identifier-key"],
     "queryKey": [1, "query-key"],
     "autoSelectFirst": [4, "auto-select-first"],
@@ -269,9 +391,12 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     "required": [516],
     "error": [513],
     "disabled": [516],
+    "showAddItem": [4, "show-add-item"],
+    "addItemText": [1, "add-item-text"],
     "_showDropdown": [32],
     "_selectedItem": [32],
-    "_isAutoCompleting": [32]
+    "_isAutoCompleting": [32],
+    "_amountHidden": [32]
   }, [[6, "click", "documentClickHandler"]], {
     "value": ["_valueChange"],
     "items": ["itemChanges"],
@@ -281,13 +406,18 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["p-select", "p-dropdown", "p-dropdown-menu-container", "p-dropdown-menu-item", "p-helper", "p-icon", "p-input-error", "p-input-group", "p-loader", "p-tooltip"];
+  const components = ["p-select", "p-avatar", "p-dropdown", "p-dropdown-menu-container", "p-dropdown-menu-item", "p-helper", "p-icon", "p-input-error", "p-input-group", "p-loader", "p-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "p-select":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, Select);
       }
       break;
+    case "p-avatar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
     case "p-dropdown":
       if (!customElements.get(tagName)) {
         defineCustomElement$a();