@paperless/core 2.0.1-beta.3 → 2.0.1-beta.31

package/dist/cjs/p-input-group.cjs.entry.js

@@ -0,0 +1,130 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3f9bbc0c.js');
+
+const inputGroupComponentCss = ".mb-\\[2px\\]{margin-bottom:2px!important}.box-border{box-sizing:border-box!important}.flex{display:flex!important}.w-full{width:100%!important}.flex-1{flex:1 1 0%!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.py-\\[calc\\(0\\.75rem-1px\\)\\]{padding-bottom:calc(.75rem - 1px)!important;padding-top:calc(.75rem - 1px)!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-semibold{font-weight:600!important}.uppercase{text-transform:uppercase!important}.tracking-wider{letter-spacing:.05em!important}.outline-none{outline:2px solid transparent!important;outline-offset:2px!important}*{box-sizing:border-box}:host{display:flex;flex-direction:column;outline:2px solid transparent!important;outline-offset:2px!important;width:100%}:host .input-label{--tw-text-opacity:1;color:rgb(152 154 183/var(--tw-text-opacity,1));font-size:.75rem;font-weight:600;letter-spacing:.05em;line-height:1rem;margin-bottom:2px;text-transform:uppercase}:host .input-header{align-items:flex-end;display:flex;gap:.5rem;margin-bottom:2px}:host .content{display:flex;width:100%}:host .content .prefix,:host .content .suffix{--tw-text-opacity:1;box-sizing:border-box;color:rgb(81 83 107/var(--tw-text-opacity,1));flex:1 1 0%;height:100%}:host .content .prefix{border-bottom-right-radius:0;border-right-width:0!important;border-top-right-radius:0;order:1;padding-right:.5rem}:host .content .suffix{border-bottom-left-radius:0;border-left-width:0!important;border-top-left-radius:0;order:3;padding-left:.5rem}:host(.focused),:host(:focus),:host(:focus-within),:host([focused]){outline:2px solid transparent!important;outline-offset:2px!important}:host(.focused) .prefix,:host(.focused) .suffix,:host(:focus) .prefix,:host(:focus) .suffix,:host(:focus-within) .prefix,:host(:focus-within) .suffix,:host([focused]) .prefix,:host([focused]) .suffix{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity,1))}:host(.error) .prefix,:host(.error) .suffix,:host([error]) .prefix,:host([error]) .suffix{--tw-text-opacity:1;color:rgb(185 30 40/var(--tw-text-opacity,1))}:host(.error) .suffix,:host([error]) .suffix{align-items:flex-start;padding-bottom:calc(.75rem - 1px);padding-top:calc(.75rem - 1px)}:host(.size-small.error) .suffix,:host(.size-small[error]) .suffix{padding-bottom:.5rem;padding-top:.5rem}.static{position:static!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.justify-between{justify-content:space-between!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity,1))!important}";
+const PInputGroupStyle0 = inputGroupComponentCss;
+
+const InputGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.size = 'medium';
+        this.prefix = undefined;
+        this.suffix = undefined;
+        this.icon = undefined;
+        this.iconFlip = undefined;
+        this.iconRotate = undefined;
+        this.iconPosition = 'start';
+        this.label = undefined;
+        this.helper = undefined;
+        this.required = undefined;
+        this.error = undefined;
+        this.disabled = false;
+        this.focused = false;
+        this.forceShowTooltip = false;
+        this.focusMethod = 'focus';
+        this.errorVariant = 'auto';
+        this._forceShowTooltip = false;
+    }
+    get _el() { return index.getElement(this); }
+    _whitelistedTags = ['input', 'textarea'];
+    componentDidLoad() {
+        console.warn('[p-input-group] Deprecated, please use p-field');
+    }
+    componentWillRender() {
+        this._setInputClasses();
+    }
+    render() {
+        const { hasHeaderSlot, helper, label, prefix, suffix, errorAndErrorIsNotBoolean, errorVariant, } = this._getSlotInfo();
+        return (index.h(index.Host, { key: '9848be9dc18dbb66de4ffaeb0fd6377204355127', class: `p-input-group ${this.error?.length && 'error'} ${this.disabled && 'disabled'} ${this.focused && 'focused'} size-${this.size}` }, index.h("div", { key: '4d4035d525fe79a6afbd669bf49302fbd96ee4a9', class: 'flex items-end justify-between' }, label && (index.h("div", { key: '859e6c72d70ddd2b62c72170be460452d0d87d11', class: 'input-label', onClick: () => this._focusInput() }, label, this.required && index.h("span", { key: '19c99b31a2d0f5b6f03971b6441e459653e3af13', class: 'ml-1 text-negative' }, "*"))), (helper || hasHeaderSlot) && (index.h("div", { key: '3e2abec6c63ae8d26b42316d48516992c2bc699b', class: 'input-header' }, hasHeaderSlot && index.h("slot", { key: '1d100f887f1345ccfcf11e97d7667dd94355f026', name: 'header' }), helper && (index.h("p-helper", { key: '9dbf5401cd26db9421c526bd406c683829abd877', class: `flex ${hasHeaderSlot ? 'ml-2' : ''}`, placement: 'top-end' }, helper))))), index.h("p-tooltip", { key: '71ef03a090b4311c14d7c935809f147140791e9e', class: 'w-full', variant: 'error', content: this.error, show: errorAndErrorIsNotBoolean &&
+                errorVariant === 'element' &&
+                (this.forceShowTooltip || this._forceShowTooltip), enableUserInput: false }, index.h("div", { key: '21bda229af33f22f4080ef66cd2b2821f755edd6', class: 'content', slot: 'trigger' }, (prefix || (this.icon && this.iconPosition === 'start')) && (index.h("div", { key: '21f4e49db797a4ee2e6caee81d952858cc550567', class: `prefix size-${this.size}`, onClick: () => this._focusInput() }, this.icon && this.iconPosition === 'start' ? (index.h("p-icon", { class: 'flex', variant: this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (prefix))), (suffix ||
+            (errorAndErrorIsNotBoolean && errorVariant === 'icon') ||
+            (this.icon && this.iconPosition === 'end')) && (index.h("div", { key: '033bc354c872c0b9fb351182d7466515642d3f9b', class: `suffix size-${this.size}`, onClick: () => this._focusInput() }, errorAndErrorIsNotBoolean && errorVariant === 'icon' ? (index.h("p-input-error", { error: this.error, forceShowTooltip: this.forceShowTooltip || this._forceShowTooltip })) : this.icon && this.iconPosition === 'end' ? (index.h("p-icon", { class: 'flex', variant: this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (suffix))), index.h("slot", { key: '1dc6aa666c99246ba2d532c435987875528af5f6', name: 'input' })))));
+    }
+    handleFocusIn() {
+        this._forceShowTooltip = true;
+    }
+    handleFocusOut() {
+        this._forceShowTooltip = false;
+    }
+    /*
+     With this, we shall hack the system in ways no one would ever have thought.
+
+     <div class="pl-0 pr-0 border-l-0 border-r-0 rounded-tl-none rounded-bl-none rounded-tr-none rounded-br-none"></div>
+     */
+    _setInputClasses() {
+        const input = this._el.querySelector(':scope > [slot="input"]');
+        if (!input) {
+            return;
+        }
+        const tagName = input.tagName.toLowerCase();
+        if (this._whitelistedTags.indexOf(tagName) === -1) {
+            return;
+        }
+        if (!input.classList.contains('p-input')) {
+            input.classList.add('p-input');
+        }
+        const { prefix, suffix, errorAndErrorIsNotBoolean, errorVariant } = this._getSlotInfo();
+        if (suffix ||
+            (errorAndErrorIsNotBoolean && errorVariant === 'icon') ||
+            (this.icon && this.iconPosition === 'end')) {
+            input.classList.add('border-r-0', 'rounded-tr-none', 'rounded-br-none', 'pr-0');
+        }
+        else {
+            input.classList.remove('border-r-0', 'rounded-tr-none', 'rounded-br-none', 'pr-0');
+        }
+        if (prefix || (this.icon && this.iconPosition === 'start')) {
+            input.classList.add('border-l-0', 'rounded-tl-none', 'rounded-bl-none', 'pl-0');
+        }
+        else {
+            input.classList.remove('border-l-0', 'rounded-tl-none', 'rounded-bl-none', 'pl-0');
+        }
+        if (this.size === 'small' && !input.classList.contains('size-small')) {
+            input.classList.add('size-small');
+        }
+        if (this.size !== 'small' && input.classList.contains('size-small')) {
+            input.classList.remove('size-small');
+        }
+    }
+    _getSlotInfo() {
+        const hasHelperSlot = !!this._el.querySelector(':scope > [slot="helper"]');
+        const hasLabelSlot = !!this._el.querySelector(':scope > [slot="label"]');
+        const hasPrefixSlot = !!this._el.querySelector(':scope > [slot="prefix"]');
+        const hasSuffixSlot = !!this._el.querySelector(':scope > [slot="suffix"]');
+        const hasHeaderSlot = !!this._el.querySelector(':scope > [slot="header"]');
+        const helper = hasHelperSlot ? index.h("slot", { name: 'helper' }) : this.helper;
+        const label = hasLabelSlot ? index.h("slot", { name: 'label' }) : this.label;
+        const prefix = hasPrefixSlot ? index.h("slot", { name: 'prefix' }) : this.prefix;
+        const suffix = hasSuffixSlot ? index.h("slot", { name: 'suffix' }) : this.suffix;
+        const errorAndErrorIsNotBoolean = this.error && typeof this.error === 'string' && this.error !== 'true';
+        return {
+            hasHelperSlot,
+            hasLabelSlot,
+            hasPrefixSlot,
+            hasSuffixSlot,
+            hasHeaderSlot,
+            helper,
+            label,
+            prefix,
+            suffix,
+            errorAndErrorIsNotBoolean,
+            errorVariant: this.errorVariant === 'auto'
+                ? this._el.offsetWidth <= 72
+                    ? 'element'
+                    : 'icon'
+                : this.errorVariant,
+        };
+    }
+    _focusInput() {
+        const input = this._el.querySelector(':scope > [slot="input"]');
+        input[this.focusMethod]();
+    }
+};
+InputGroup.style = PInputGroupStyle0;
+
+exports.p_input_group = InputGroup;
+
+//# sourceMappingURL=p-input-group.cjs.entry.js.map

package/dist/cjs/p-input-group.cjs.entry.js.map

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

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

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3f9bbc0c.js');
+const index$1 = require('./index-b556e70f.js');
+const cn = require('./cn-b70f9965.js');
+require('./clsx-fc789adc.js');
+
+const labelComponentCss = "*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.flex-1{flex:1 1 0%!important}.flex-shrink-0{flex-shrink:0!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.rounded-full{border-radius:9999px!important}.bg-amber-100{--tw-bg-opacity:1!important;background-color:rgb(255 246 194/var(--tw-bg-opacity,1))!important}.bg-negative-red-100{--tw-bg-opacity:1!important;background-color:rgb(255 221 221/var(--tw-bg-opacity,1))!important}.bg-positive-green-100{--tw-bg-opacity:1!important;background-color:rgb(213 251 199/var(--tw-bg-opacity,1))!important}.bg-supportive-lilac-100{--tw-bg-opacity:1!important;background-color:rgb(246 239 255/var(--tw-bg-opacity,1))!important}.bg-white-700{--tw-bg-opacity:1!important;background-color:rgb(242 242 242/var(--tw-bg-opacity,1))!important}.p-2{padding:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-amber-800{--tw-text-opacity:1!important;color:rgb(148 77 11/var(--tw-text-opacity,1))!important}.text-dark-teal-800{--tw-text-opacity:1!important;color:rgb(1 37 33/var(--tw-text-opacity,1))!important}.text-negative-red-800{--tw-text-opacity:1!important;color:rgb(141 16 16/var(--tw-text-opacity,1))!important}.text-positive-green-800{--tw-text-opacity:1!important;color:rgb(47 100 7/var(--tw-text-opacity,1))!important}.text-supportive-lilac-900{--tw-text-opacity:1!important;color:rgb(80 9 179/var(--tw-text-opacity,1))!important}@media (min-width:64rem){.desktop-xs\\:block{display:block!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:py-0{padding-bottom:0!important;padding-top:0!important}}";
+const PLabelStyle0 = labelComponentCss;
+
+const label = index$1.cva(['flex items-center justify-center gap-2', 'h-6 rounded-full'], {
+    variants: {
+        variant: {
+            positive: 'bg-positive-green-100 text-positive-green-800',
+            biased: 'bg-amber-100  text-amber-800',
+            negative: 'bg-negative-red-100 text-negative-red-800',
+            neutral: 'bg-supportive-lilac-100 text-supportive-lilac-900',
+            unavailable: 'bg-white-700 text-dark-teal-800',
+        },
+        iconOnly: {
+            false: 'px-2',
+            true: 'p-2 w-6',
+        },
+        keepMobileContent: {
+            false: null,
+            true: null,
+        },
+    },
+    compoundVariants: [
+        {
+            keepMobileContent: false,
+            iconOnly: false,
+            class: 'p-2 w-6 desktop-xs:w-auto desktop-xs:py-0',
+        },
+    ],
+});
+const Label = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.variant = 'neutral';
+        this.iconOnly = false;
+        this.icon = undefined;
+        this.iconFlip = undefined;
+        this.iconRotate = undefined;
+        this.keepMobileContent = false;
+    }
+    render() {
+        return (index.h(index.Host, { key: '04c0b2510fd1ae8cad957ee02d7d54245b7fdbb0', class: 'p-label' }, index.h("div", { key: '7dfd0871e52cef46c49f0c30e58facfa603c5d0f', class: label({
+                variant: this.variant,
+                iconOnly: this.iconOnly,
+                keepMobileContent: this.keepMobileContent,
+            }) }, this.icon && (index.h("p-icon", { key: 'b70587122206d6b26785cbf5e9e8219219aeb7d0', class: 'flex-shrink-0', variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate })), !this.iconOnly && (index.h("div", { key: '5426ae86e86f205b04130628923f3d53747c85d5', class: cn.cn('flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm', {
+                hidden: !this.keepMobileContent,
+                'desktop-xs:block': !this.keepMobileContent,
+            }) }, index.h("slot", { key: '62413d44b71c12291cb13997e839774d2b047fdd' }))))));
+    }
+};
+Label.style = PLabelStyle0;
+
+exports.p_label = Label;
+
+//# sourceMappingURL=p-label.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"p-label.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,i9DAAi9D,CAAC;AAC5+D,qBAAe,iBAAiB;;ACKhC,MAAM,KAAK,GAAGA,WAAG,CAChB,CAAC,wCAAwC,EAAE,kBAAkB,CAAC,EAC9D;IACC,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,QAAQ,EAAE,+CAA+C;YACzD,MAAM,EAAE,8BAA8B;YACtC,QAAQ,EAAE,2CAA2C;YACrD,OAAO,EAAE,mDAAmD;YAC5D,WAAW,EAAE,iCAAiC;SAC9C;QACD,QAAQ,EAAE;YACT,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,SAAS;SACf;QACD,iBAAiB,EAAE;YAClB,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,IAAI;SACV;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,iBAAiB,EAAE,KAAK;YACxB,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE,2CAA2C;SAClD;KACD;CACD,CACD,CAAC;MAOW,KAAK;;;uBASE,SAAS;wBAKiB,KAAK;;;;iCAoBI,KAAK;;IAE3D,MAAM;QACL,QACCC,QAACC,UAAI,qDAAC,KAAK,EAAC,SAAS,IACpBD,kEACC,KAAK,EAAE,KAAK,CAAC;gBACZ,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB;aACzC,CAAC,IAED,IAAI,CAAC,IAAI,KACTA,qEACC,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,GACtB,CACF,EAEA,CAAC,IAAI,CAAC,QAAQ,KACdA,kEACC,KAAK,EAAEE,KAAE,CACR,gEAAgE,EAChE;gBACC,MAAM,EAAE,CAAC,IAAI,CAAC,iBAAiB;gBAC/B,kBAAkB,EAAE,CAAC,IAAI,CAAC,iBAAiB;aAC3C,CACD,IAEDF,oEAAQ,CACH,CACN,CACI,CACA,EACN;KACF;;;;;;","names":["cva","h","Host","cn"],"sources":["src/components/molecules/label/label.component.css?tag=p-label&encapsulation=shadow","src/components/molecules/label/label.component.tsx"],"sourcesContent":["","import { Component, h, Host, Prop } from '@stencil/core';\nimport { RotateOptions } from '../../../types';\nimport { IconFlipOptions, IconVariant } from '../../atoms/icon/icon.component';\nimport { cva } from 'class-variance-authority';\nimport { cn } from '../../../utils/cn';\n\nconst label = cva(\n\t['flex items-center justify-center gap-2', 'h-6 rounded-full'],\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tpositive: 'bg-positive-green-100 text-positive-green-800',\n\t\t\t\tbiased: 'bg-amber-100  text-amber-800',\n\t\t\t\tnegative: 'bg-negative-red-100 text-negative-red-800',\n\t\t\t\tneutral: 'bg-supportive-lilac-100 text-supportive-lilac-900',\n\t\t\t\tunavailable: 'bg-white-700 text-dark-teal-800',\n\t\t\t},\n\t\t\ticonOnly: {\n\t\t\t\tfalse: 'px-2',\n\t\t\t\ttrue: 'p-2 w-6',\n\t\t\t},\n\t\t\tkeepMobileContent: {\n\t\t\t\tfalse: null,\n\t\t\t\ttrue: null,\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tkeepMobileContent: false,\n\t\t\t\ticonOnly: false,\n\t\t\t\tclass: 'p-2 w-6 desktop-xs:w-auto desktop-xs:py-0',\n\t\t\t},\n\t\t],\n\t}\n);\n\n@Component({\n\ttag: 'p-label',\n\tstyleUrl: 'label.component.css',\n\tshadow: true,\n})\nexport class Label {\n\t/**\n\t * Variant of the label\n\t */\n\t@Prop({ reflect: true }) variant:\n\t\t| 'positive'\n\t\t| 'biased'\n\t\t| 'negative'\n\t\t| 'neutral'\n\t\t| 'unavailable' = 'neutral';\n\n\t/**\n\t * Wether to only show the icon\n\t */\n\t@Prop({ reflect: true }) iconOnly: boolean = false;\n\n\t/**\n\t * Icon to show on the label\n\t */\n\t@Prop({ reflect: true }) icon: IconVariant;\n\n\t/**\n\t * Icon flip\n\t */\n\t@Prop() iconFlip: IconFlipOptions;\n\n\t/**\n\t * Icon rotate\n\t */\n\t@Prop() iconRotate: RotateOptions;\n\n\t/**\n\t * Wether to keep the content on mobile\n\t */\n\t@Prop({ reflect: true }) keepMobileContent: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-label'>\n\t\t\t\t<div\n\t\t\t\t\tclass={label({\n\t\t\t\t\t\tvariant: this.variant,\n\t\t\t\t\t\ticonOnly: this.iconOnly,\n\t\t\t\t\t\tkeepMobileContent: this.keepMobileContent,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{this.icon && (\n\t\t\t\t\t\t<p-icon\n\t\t\t\t\t\t\tclass='flex-shrink-0'\n\t\t\t\t\t\t\tvariant={this.icon}\n\t\t\t\t\t\t\tflip={this.iconFlip}\n\t\t\t\t\t\t\trotate={this.iconRotate}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{!this.iconOnly && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass={cn(\n\t\t\t\t\t\t\t\t'flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\thidden: !this.keepMobileContent,\n\t\t\t\t\t\t\t\t\t'desktop-xs:block': !this.keepMobileContent,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

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

@@ -2,20 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-02e05522.js');
+const index = require('./index-3f9bbc0c.js');
 
 const layoutComponentCss = ".relative{position:relative!important}.sticky{position:sticky!important}.box-border{box-sizing:border-box!important}.flex{display:flex!important}.grid{display:grid!important}.hidden{display:none!important}.h-dvh{height:100dvh!important}.h-full{height:100%!important}.w-full{width:100%!important}.w-unset{width:unset!important}.flex-1{flex:1 1 0%!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.overflow-y-auto{overflow-y:auto!important}.px-content-mobile-x{padding-left:1rem!important;padding-right:1rem!important}*{box-sizing:border-box}:host{display:grid;gap:0;grid-template-areas:\"sidebar\" \"topbar\" \"content\";grid-template-columns:1fr;grid-template-rows:repeat(2,min-content) 1fr;height:100dvh;width:100dvw}@media (min-width:80rem){:host{grid-template-areas:\"topbar topbar\" \"sidebar content\";grid-template-columns:auto 1fr;grid-template-rows:min-content 1fr}}:host .content,:host .sidebar,:host .topbar{align-self:flex-start}:host .topbar{grid-area:topbar;position:sticky;width:100%}:host .sidebar{box-sizing:border-box;display:flex;grid-area:sidebar;height:100%;width:100%}@media (min-width:80rem){:host .sidebar{width:15rem}}@media (min-width:105rem){:host .sidebar{width:18rem}}:host .content{display:flex;flex-direction:column;grid-area:content;height:100%;overflow-x:hidden;overflow-y:auto;padding:1.5rem 1rem;position:relative}@media (min-width:40rem){:host .content{padding:2rem}}@media (min-width:80rem){:host .content{padding:2rem 1.5rem 1.5rem}}@media (min-width:90rem){:host .content{padding:2rem}}@media (min-width:120rem){:host .content{padding-bottom:5rem;padding-left:5rem;padding-right:2rem}}@media (min-width:160rem){:host .content{padding-bottom:7.5rem;padding-left:7.5rem;padding-top:4rem}}:host .content .inner-content{flex:1 1 0%;position:relative}@media (min-width:80rem){:host .content .inner-content{width:62rem}}@media (min-width:90rem){:host .content .inner-content{width:71rem}}@media (min-width:96rem){:host .content .inner-content{width:77rem}}@media (min-width:105rem){:host .content .inner-content{width:83rem}}:host(.variant-default) .content{flex:1 1 0%}:host(.variant-login){grid-template-areas:\"topbar topbar\" \"content content\"}@media (min-width:80rem){:host(.variant-login){grid-template-areas:\"topbar topbar\" \"content sidebar\"}}:host(.variant-login) .sidebar{display:none;flex:1 1 0%;overflow:hidden;padding:.5rem;width:unset}@media (min-width:80rem){:host(.variant-login) .sidebar{display:flex}}:host(.variant-login) .sidebar .inner-content{padding:.5rem}:host(.variant-login) .content{align-items:center;padding:calc(env(safe-area-inset-top) + 3.5rem) 1rem 1.5rem}@media (min-width:80rem){:host(.variant-login) .content{justify-content:center;padding:1.5rem 4.5rem 0}}:host(.variant-login) .content .inner-content{box-sizing:border-box;flex:unset;width:100%}@media (min-width:40rem){:host(.variant-login) .content .inner-content{width:21rem}}@media (min-width:80rem){:host(.variant-office) .content .inner-content{width:58rem}}@media (min-width:90rem){:host(.variant-office) .content .inner-content{width:67rem}}@media (min-width:96rem){:host(.variant-office) .content .inner-content{width:73rem}}@media (min-width:105rem){:host(.variant-office) .content .inner-content{width:79rem}}@media (min-width:120rem){:host(.variant-office) .content .inner-content{width:82rem}}@media (min-width:160rem){:host(.variant-office) .content .inner-content{width:84.5rem}}@media (min-width:80rem){:host(.variant-office) .sidebar{width:19rem}}@media (min-width:105rem){:host(.variant-office) .sidebar{width:22rem}}@media (min-width:80rem){.layout-1280\\:flex{display:flex!important}.layout-1280\\:w-60{width:15rem!important}.layout-1280\\:w-\\[19rem\\]{width:19rem!important}.layout-1280\\:w-\\[58rem\\]{width:58rem!important}.layout-1280\\:p-6{padding:1.5rem!important}.layout-1280\\:px-18{padding-left:4.5rem!important;padding-right:4.5rem!important}}@media (min-width:90rem){.layout-1440\\:w-\\[67rem\\]{width:67rem!important}}@media (min-width:96rem){.layout-1536\\:w-\\[73rem\\]{width:73rem!important}}@media (min-width:105rem){.layout-1680\\:w-\\[22rem\\]{width:22rem!important}.layout-1680\\:w-\\[79rem\\]{width:79rem!important}}@media (min-width:120rem){.layout-1920\\:w-\\[82rem\\]{width:82rem!important}.layout-1920\\:pl-20{padding-left:5rem!important}.layout-1920\\:pr-8{padding-right:2rem!important}}@media (min-width:160rem){.layout-2560\\:w-\\[84\\.5rem\\]{width:84.5rem!important}.layout-2560\\:pb-\\[7\\.5rem\\]{padding-bottom:7.5rem!important}.layout-2560\\:pl-\\[7\\.5rem\\]{padding-left:7.5rem!important}.layout-2560\\:pt-16{padding-top:4rem!important}}.static{position:static!important}";
+const PLayoutStyle0 = layoutComponentCss;
 
 const Layout = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.variant = 'default';
-  }
-  render() {
-    return (index.h(index.Host, { class: `p-layout variant-${this.variant}` }, index.h("div", { class: "content" }, index.h("div", { class: "inner-content" }, index.h("slot", { name: "content" }))), index.h("div", { class: "sidebar" }, index.h("slot", { name: "sidebar" })), index.h("div", { class: "topbar" }, index.h("slot", { name: "topbar" }))));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.variant = 'default';
+    }
+    render() {
+        return (index.h(index.Host, { key: 'fa4b89568d7ec5962f4767566ca8d5d97c169314', class: `p-layout variant-${this.variant}` }, index.h("div", { key: '21d92f4cfe34b655995fb9d984b1ef273f686ff2', class: "content" }, index.h("div", { key: '9fec48f933afa2a151e3e050a04459a09f15cedb', class: "inner-content" }, index.h("slot", { key: '0c8ff716020b44a9cf737e5c0390ec64e559b790', name: "content" }))), index.h("div", { key: 'a4b88f57ea6c6ea9cacfe6b5865185a99f691146', class: "sidebar" }, index.h("slot", { key: 'c2866ebb42b7a010ed08407fd4f75f6a86a669f1', name: "sidebar" })), index.h("div", { key: '3cbe3287c3b1cfd8472f4e0e27301c31770e25fe', class: "topbar" }, index.h("slot", { key: 'b36f43fdbacfc72357a63fbc85f65ec023f50b1a', name: "topbar" }))));
+    }
 };
-Layout.style = layoutComponentCss;
+Layout.style = PLayoutStyle0;
 
 exports.p_layout = Layout;
 

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

@@ -1 +1 @@
-{"file":"p-layout.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,4lJAA4lJ;;MCO1mJ,MAAM;;;mBAIgC,SAAS;;EAE3D,MAAM;IACL,QACCA,QAACC,UAAI,IAAC,KAAK,EAAE,oBAAoB,IAAI,CAAC,OAAO,EAAE,IAC9CD,iBAAK,KAAK,EAAC,SAAS,IACnBA,iBAAK,KAAK,EAAC,eAAe,IACzBA,kBAAM,IAAI,EAAC,SAAS,GAAG,CAClB,CACD,EACNA,iBAAK,KAAK,EAAC,SAAS,IACnBA,kBAAM,IAAI,EAAC,SAAS,GAAG,CAClB,EACNA,iBAAK,KAAK,EAAC,QAAQ,IAClBA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,CACA,EACN;GACF;;;;;;","names":["h","Host"],"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-dvh w-dvw;\n\n\tgrid-template-columns: 1fr;\n\tgrid-template-rows: repeat(2, min-content) 1fr;\n\tgap: 0;\n\tgrid-template-areas:\n\t\t'sidebar'\n\t\t'topbar'\n\t\t'content';\n\n\t@screen layout-1280 {\n\t\tgrid-template-columns: auto 1fr;\n\t\tgrid-template-rows: min-content 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}\n\n\t.sidebar {\n\t\tgrid-area: sidebar;\n\n\t\t@apply box-border flex h-full;\n\t\t@apply w-full;\n\t\t@apply layout-1280:w-60 layout-1680:w-72;\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 pb-24;\n\n\t\t@apply px-content-mobile-x py-content-mobile-y;\n\t\t@apply tablet:p-8;\n\t\t@apply layout-1280:p-6 layout-1280:pt-8;\n\t\t@apply layout-1440:p-8;\n\t\t@apply layout-1920:pr-8 layout-1920:pl-20 layout-1920:pb-20;\n\t\t@apply layout-2560:pt-16 layout-2560:pl-[7.5rem] layout-2560:pb-[7.5rem];\n\n\t\t.inner-content {\n\t\t\t@apply relative flex-1;\n\n\t\t\t// https://linear.app/employes/issue/PRO-9053/%E2%9A%9B%EF%B8%8F-component-wijzigen-layout\n\t\t\t@apply layout-1280:w-content-1280;\n\t\t\t@apply layout-1440:w-content-1440;\n\t\t\t@apply layout-1536:w-content-1536;\n\t\t\t@apply layout-1680:w-content-1680;\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 layout-1280 {\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 layout-1280:flex;\n\t\t@apply 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 items-center layout-1280:justify-center;\n\n\t\t@apply layout-1280:px-18 layout-1280:py-0;\n\t\t@apply px-content-mobile-x py-content-mobile-y;\n\t\tpadding-top: calc(env(safe-area-inset-top) + 3.5rem);\n\n\t\t@screen layout-1280 {\n\t\t\t@apply pt-content-mobile-y;\n\t\t}\n\n\t\t.inner-content {\n\t\t\t@apply box-border;\n\t\t\t@apply w-full tablet:w-content-desktop-login;\n\t\t\tflex: unset;\n\t\t}\n\t}\n}\n\n:host(.variant-office) {\n\t.content {\n\t\t.inner-content {\n\t\t\t@apply layout-1280:w-[58rem];\n\t\t\t@apply layout-1440:w-[67rem];\n\t\t\t@apply layout-1536:w-[73rem];\n\t\t\t@apply layout-1680:w-[79rem];\n\t\t\t@apply layout-1920:w-[82rem];\n\t\t\t@apply layout-2560:w-[84.5rem];\n\t\t}\n\t}\n\n\t.sidebar {\n\t\t@apply layout-1280:w-[19rem] layout-1680:w-[22rem];\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=\"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\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=\"topbar\">\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"],"version":3}
+{"file":"p-layout.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,4lJAA4lJ,CAAC;AACxnJ,sBAAe,kBAAkB;;MCMpB,MAAM;;;uBAIgC,SAAS;;IAE3D,MAAM;QACL,QACCA,QAACC,UAAI,qDAAC,KAAK,EAAE,oBAAoB,IAAI,CAAC,OAAO,EAAE,IAC9CD,kEAAK,KAAK,EAAC,SAAS,IACnBA,kEAAK,KAAK,EAAC,eAAe,IACzBA,mEAAM,IAAI,EAAC,SAAS,GAAG,CAClB,CACD,EACNA,kEAAK,KAAK,EAAC,SAAS,IACnBA,mEAAM,IAAI,EAAC,SAAS,GAAG,CAClB,EACNA,kEAAK,KAAK,EAAC,QAAQ,IAClBA,mEAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,CACA,EACN;KACF;;;;;;","names":["h","Host"],"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-dvh w-dvw;\n\n\tgrid-template-columns: 1fr;\n\tgrid-template-rows: repeat(2, min-content) 1fr;\n\tgap: 0;\n\tgrid-template-areas:\n\t\t'sidebar'\n\t\t'topbar'\n\t\t'content';\n\n\t@screen layout-1280 {\n\t\tgrid-template-columns: auto 1fr;\n\t\tgrid-template-rows: min-content 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}\n\n\t.sidebar {\n\t\tgrid-area: sidebar;\n\n\t\t@apply box-border flex h-full;\n\t\t@apply w-full;\n\t\t@apply layout-1280:w-60 layout-1680:w-72;\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 pb-24;\n\n\t\t@apply px-content-mobile-x py-content-mobile-y;\n\t\t@apply tablet:p-8;\n\t\t@apply layout-1280:p-6 layout-1280:pt-8;\n\t\t@apply layout-1440:p-8;\n\t\t@apply layout-1920:pr-8 layout-1920:pl-20 layout-1920:pb-20;\n\t\t@apply layout-2560:pt-16 layout-2560:pl-[7.5rem] layout-2560:pb-[7.5rem];\n\n\t\t.inner-content {\n\t\t\t@apply relative flex-1;\n\n\t\t\t// https://linear.app/employes/issue/PRO-9053/%E2%9A%9B%EF%B8%8F-component-wijzigen-layout\n\t\t\t@apply layout-1280:w-content-1280;\n\t\t\t@apply layout-1440:w-content-1440;\n\t\t\t@apply layout-1536:w-content-1536;\n\t\t\t@apply layout-1680:w-content-1680;\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 layout-1280 {\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 layout-1280:flex;\n\t\t@apply 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 items-center layout-1280:justify-center;\n\n\t\t@apply layout-1280:px-18 layout-1280:py-0;\n\t\t@apply px-content-mobile-x py-content-mobile-y;\n\t\tpadding-top: calc(env(safe-area-inset-top) + 3.5rem);\n\n\t\t@screen layout-1280 {\n\t\t\t@apply pt-content-mobile-y;\n\t\t}\n\n\t\t.inner-content {\n\t\t\t@apply box-border;\n\t\t\t@apply w-full tablet:w-content-desktop-login;\n\t\t\tflex: unset;\n\t\t}\n\t}\n}\n\n:host(.variant-office) {\n\t.content {\n\t\t.inner-content {\n\t\t\t@apply layout-1280:w-[58rem];\n\t\t\t@apply layout-1440:w-[67rem];\n\t\t\t@apply layout-1536:w-[73rem];\n\t\t\t@apply layout-1680:w-[79rem];\n\t\t\t@apply layout-1920:w-[82rem];\n\t\t\t@apply layout-2560:w-[84.5rem];\n\t\t}\n\t}\n\n\t.sidebar {\n\t\t@apply layout-1280:w-[19rem] layout-1680:w-[22rem];\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=\"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\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=\"topbar\">\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"],"version":3}

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

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

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

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

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

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