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

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

@@ -0,0 +1,233 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3f9bbc0c.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-ef421825.js');
+const index$1 = require('./index-b556e70f.js');
+require('./clsx-fc789adc.js');
+
+const Portal = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get _el() { return index.getElement(this); }
+    _moved = false;
+    createPortal() {
+        document.body.append(this._el);
+    }
+    componentDidLoad() {
+        this.createPortal();
+    }
+    disconnectedCallback() {
+        this._moved ? this._el.remove() : (this._moved = true);
+    }
+    render() {
+        return (index.h(index.Host, { key: '04f9a6ddfe5756fff19f51575ed4869d85c756d5' }, index.h("slot", { key: 'ad0bd91e83e2b35f2bdb10ed17a1d77be095782d' })));
+    }
+};
+
+const tooltipComponentCss = "*{box-sizing:border-box}.pointer-events-none{pointer-events:none!important}.pointer-events-auto{pointer-events:auto!important}.visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.relative{position:relative!important}.z-tooltip{z-index:601!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-inherit{height:inherit!important}.w-\\[2px\\]{width:2px!important}.w-full{width:100%!important}.w-inherit{width:inherit!important}.w-max{width:max-content!important}.max-w-\\[14\\.5rem\\]{max-width:14.5rem!important}.max-w-full{max-width:100%!important}.cursor-pointer{cursor:pointer!important}.gap-2{gap:.5rem!important}.rounded-lg{border-radius:.5rem!important}.bg-black-teal{--tw-bg-opacity:1!important;background-color:rgb(3 42 36/var(--tw-bg-opacity,1))!important}.bg-negative-red{background-color:rgb(230 30 30/var(--tw-bg-opacity,1))!important}.bg-negative-red,.bg-white{--tw-bg-opacity:1!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.py-2{padding-bottom:.5rem!important;padding-top:.5rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-black-teal-300{--tw-text-opacity:1!important;color:rgb(104 127 124/var(--tw-text-opacity,1))!important}.text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.opacity-0{opacity:0!important}.opacity-100{opacity:1!important}.blur{--tw-blur:blur(8px)!important}.blur,.drop-shadow-3{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}.drop-shadow-3{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.08)) drop-shadow(0 2px 2px rgba(0,2,2,.08)) drop-shadow(0 4px 4px rgba(0,2,2,.08))!important}.transition-opacity{transition-duration:.15s!important;transition-property:opacity!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}";
+const PTooltipStyle0 = tooltipComponentCss;
+
+const popover = index$1.cva([
+    'inline-block px-2',
+    'text-xs',
+    'opacity-0 drop-shadow-3 transition-opacity',
+    'rounded-lg',
+    'z-tooltip',
+    'pointer-events-none',
+], {
+    variants: {
+        variant: {
+            hover: 'bg-black-teal text-white py-1',
+            click: null,
+            error: 'max-w-full w-full',
+        },
+        strategy: {
+            none: null,
+            fixed: 'fixed',
+            absolute: 'absolute',
+        },
+    },
+    compoundVariants: [
+        {
+            variant: ['hover', 'click'],
+            class: 'max-w-[14.5rem] w-max',
+        },
+        {
+            variant: ['click', 'error'],
+            class: 'bg-white text-black-teal-300 py-2',
+        },
+    ],
+});
+const portal = index$1.cva('', {
+    variants: {
+        strategy: {
+            fixed: 'fixed',
+            absolute: 'absolute',
+        },
+    },
+});
+const Tooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.isOpen = index.createEvent(this, "isOpen", 3);
+        this.variant = 'hover';
+        this.content = null;
+        this.placement = undefined;
+        this.offset = 8;
+        this.strategy = 'absolute';
+        this.enableUserInput = true;
+        this.show = false;
+        this.usePortal = false;
+        this.canManuallyClose = true;
+    }
+    /**
+     * Open change event
+     */
+    isOpen;
+    get _el() { return index.getElement(this); }
+    _hasContentSlot = false;
+    _loaded = false;
+    _popover;
+    _cleanup;
+    componentWillLoad() {
+        this._hasContentSlot = !!this._el.querySelector(':scope > [slot="content"]');
+    }
+    componentShouldUpdate() {
+        this._update();
+    }
+    disconnectedCallback() {
+        if (this._cleanup) {
+            this._cleanup();
+            this._cleanup = null;
+        }
+    }
+    render() {
+        const tooltipProps = {
+            role: 'popover',
+            'data-placement': this.placement,
+            ref: el => this._load(el),
+        };
+        let tooltip;
+        const tooltipElement = (index.h("div", { key: 'e773c573f879f37ca26e3efb0621a148150cc988', class: popover({
+                variant: this.variant,
+                strategy: this.usePortal ? 'none' : this.strategy,
+            }), ...(this.usePortal ? {} : tooltipProps) }, index.h("div", { key: 'beae5aa49190a54cb3852aed32989e4393a4577b', class: 'flex gap-2' }, this.variant === 'error' && (index.h("div", { key: '2df89a5828f590f1140e7b49d0fdbc0bbd342e76', class: 'w-[2px] bg-negative-red' })), this.content ? this.content : index.h("slot", { name: 'content' }))));
+        if (this.usePortal) {
+            tooltip = (index.h("p-portal", { key: 'b10a6efabbd222ac3f49ce1ed609225d43aef28c', class: portal({
+                    strategy: this.strategy,
+                }), ...tooltipProps }, tooltipElement));
+        }
+        else {
+            tooltip = tooltipElement;
+        }
+        return (index.h(index.Host, { key: '49b2555dfde9308712f54352b71b6b3392237f92', class: 'p-popover flex cursor-pointer' }, index.h("div", { key: '75bfdc10b8af271be06fb857d3f08e040c05711a', class: 'relative h-inherit w-inherit' }, index.h("slot", { key: '9dae75ed3b6edb2384b8a5d5b573aad90278a875', name: 'trigger' }), tooltip)));
+    }
+    clickHandler() {
+        if (this.variant === 'hover' || !this.enableUserInput) {
+            return;
+        }
+        if (this._popover.hasAttribute('data-show')) {
+            return;
+        }
+        this._show();
+    }
+    documentClickHandler() {
+        if (this.variant === 'hover' || !this.canManuallyClose || this.show) {
+            return;
+        }
+        if (!this._popover.hasAttribute('data-show')) {
+            return;
+        }
+        this._hide();
+    }
+    mouseEnterHandler() {
+        if (this.variant !== 'hover' || !this.enableUserInput) {
+            return;
+        }
+        this._show();
+    }
+    mouseLeaveHandler() {
+        if (this.show || this.variant !== 'hover' || !this.enableUserInput) {
+            return;
+        }
+        this._hide();
+    }
+    onShowChange(show) {
+        if (show && !this._popover.hasAttribute('data-show')) {
+            return this._show();
+        }
+        return this._hide();
+    }
+    _show() {
+        if (!this._loaded) {
+            return;
+        }
+        if (!this.content?.length && !this._hasContentSlot) {
+            if (this._popover.hasAttribute('data-show')) {
+                this._hide();
+            }
+            return;
+        }
+        this._cleanup = floatingUi_dom_esm.autoUpdate(this._el, this._popover, () => this._update());
+        // Make the popover visible
+        this._popover.setAttribute('data-show', '');
+        this._popover.classList.remove('opacity-0', 'pointer-events-none');
+        this._popover.classList.add('opacity-100', 'pointer-events-auto');
+        // Update its position
+        this.isOpen.emit(true);
+    }
+    _hide() {
+        if (!this._loaded) {
+            return;
+        }
+        if (this._cleanup) {
+            this._cleanup();
+            this._cleanup = null;
+        }
+        // Hide the popover
+        this._popover.removeAttribute('data-show');
+        this._popover.classList.remove('opacity-100', 'pointer-events-auto');
+        this._popover.classList.add('opacity-0', 'pointer-events-none');
+        this.isOpen.emit(false);
+    }
+    _load(popover) {
+        this._popover = popover;
+        if (popover) {
+            this._update();
+            this._loaded = true;
+            if (this.show) {
+                setTimeout(() => this._show(), 100);
+            }
+        }
+    }
+    _update() {
+        if (!this._popover) {
+            return;
+        }
+        floatingUi_dom_esm.computePosition(this._el, this._popover, {
+            placement: this.variant === 'error' && !this.placement
+                ? 'bottom-start'
+                : this.placement ?? 'top',
+            strategy: this.strategy,
+            middleware: [floatingUi_dom_esm.offset(this.offset), floatingUi_dom_esm.flip(), floatingUi_dom_esm.shift()],
+        }).then(({ x, y, placement }) => {
+            this._popover.dataset.placement = placement;
+            Object.assign(this._popover.style, {
+                top: `${y}px`,
+                left: `${x}px`,
+            });
+        });
+    }
+    static get watchers() { return {
+        "show": ["onShowChange"]
+    }; }
+};
+Tooltip.style = PTooltipStyle0;
+
+exports.p_portal = Portal;
+exports.p_tooltip = Tooltip;
+
+//# sourceMappingURL=p-portal_2.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"p-portal.p-tooltip.entry.cjs.js","mappings":"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","names":["h","Host","cva","autoUpdate","computePosition","offset","flip","shift"],"sources":["src/components/atoms/portal/portal.component.tsx","src/components/atoms/tooltip/tooltip.component.scss?tag=p-tooltip&encapsulation=shadow","src/components/atoms/tooltip/tooltip.component.tsx"],"sourcesContent":["import { Component, Element, h, Host } from '@stencil/core';\n\n@Component({\n\ttag: 'p-portal',\n})\nexport class Portal {\n\t/**\n\t * The host element\n\t */\n\t@Element() _el: HTMLElement;\n\n\tprivate _moved: boolean = false;\n\n\tprivate createPortal() {\n\t\tdocument.body.append(this._el);\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.createPortal();\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis._moved ? this._el.remove() : (this._moved = true);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n","// :host {\n// \t@apply flex cursor-pointer;\n//\n// \t.popover-container {\n// \t\t@apply relative h-0 w-0;\n// \t\t.popover {\n// \t\t\t@apply left-0 top-0 z-tooltip inline-block rounded bg-white px-3 py-2 text-xs font-medium opacity-0 drop-shadow-3 transition-opacity;\n// \t\t\t@apply pointer-events-none;\n// \t\t\twidth: max-content;\n// \t\t\tmax-width: 14.5rem;\n//\n// \t\t\t&.variant-hover,\n// \t\t\t&.variant-error,\n// \t\t\t&.variant-error-element {\n// \t\t\t\t@apply bg-storm py-1 text-white;\n// \t\t\t}\n//\n// \t\t\t&.variant-error,\n// \t\t\t&.variant-error-element {\n// \t\t\t\t@apply bg-negative uppercase tracking-wider;\n// \t\t\t}\n//\n// \t\t\t&[data-show] {\n// \t\t\t\t@apply pointer-events-auto opacity-100;\n// \t\t\t}\n//\n// \t\t\t.arrow,\n// \t\t\t.arrow::before {\n// \t\t\t\tbackground: inherit;\n// \t\t\t\t@apply absolute h-2 w-2;\n// \t\t\t}\n//\n// \t\t\t.arrow {\n// \t\t\t\tvisibility: hidden;\n//\n// \t\t\t\t&::before {\n// \t\t\t\t\t@apply visible rotate-45 transform;\n// \t\t\t\t\tcontent: '';\n// \t\t\t\t}\n// \t\t\t}\n//\n// \t\t\t&[data-strategy='fixed'] {\n// \t\t\t\t@apply fixed;\n// \t\t\t}\n//\n// \t\t\t&[data-strategy='absolute'] {\n// \t\t\t\t@apply absolute;\n// \t\t\t}\n//\n// \t\t\t&[data-placement^='top'] > .arrow {\n// \t\t\t\t@apply -bottom-1;\n// \t\t\t}\n//\n// \t\t\t&[data-placement^='bottom'] > .arrow {\n// \t\t\t\t@apply -top-1;\n// \t\t\t}\n//\n// \t\t\t&[data-placement^='left'] > .arrow {\n// \t\t\t\t@apply -right-1;\n// \t\t\t}\n//\n// \t\t\t&[data-placement^='right'] > .arrow {\n// \t\t\t\t@apply -left-1;\n// \t\t\t}\n// \t\t}\n// \t}\n// }\n","import {\n\tautoUpdate,\n\tcomputePosition,\n\tflip,\n\toffset,\n\tPlacement,\n\tshift,\n\tStrategy,\n} from '@floating-ui/dom';\nimport {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tWatch,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst popover = cva(\n\t[\n\t\t'inline-block px-2',\n\t\t'text-xs',\n\t\t'opacity-0 drop-shadow-3 transition-opacity',\n\t\t'rounded-lg',\n\n\t\t'z-tooltip',\n\t\t'pointer-events-none',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\thover: 'bg-black-teal text-white py-1',\n\t\t\t\tclick: null,\n\t\t\t\terror: 'max-w-full w-full',\n\t\t\t},\n\t\t\tstrategy: {\n\t\t\t\tnone: null,\n\t\t\t\tfixed: 'fixed',\n\t\t\t\tabsolute: 'absolute',\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tvariant: ['hover', 'click'],\n\t\t\t\tclass: 'max-w-[14.5rem] w-max',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['click', 'error'],\n\t\t\t\tclass: 'bg-white text-black-teal-300 py-2',\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst portal = cva('', {\n\tvariants: {\n\t\tstrategy: {\n\t\t\tfixed: 'fixed',\n\t\t\tabsolute: 'absolute',\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-tooltip',\n\tstyleUrl: 'tooltip.component.scss',\n\tshadow: true,\n})\nexport class Tooltip {\n\t/**\n\t * The variant of the popover\n\t */\n\t@Prop() variant: 'hover' | 'click' | 'error' = 'hover';\n\n\t/**\n\t * The content of the popover\n\t */\n\t@Prop() content: any = null;\n\n\t/**\n\t * The placement of the popover\n\t */\n\t@Prop() placement: Placement;\n\n\t/**\n\t * The offset of the popover\n\t */\n\t@Prop() offset: number = 8;\n\n\t/**\n\t * The strategy of the popover placement\n\t */\n\t@Prop() strategy: Strategy = 'absolute';\n\n\t/**\n\t * Wether the tooltip can be shown by user input\n\t */\n\t@Prop() enableUserInput: boolean = true;\n\n\t/**\n\t * Wether to show the popover\n\t */\n\t@Prop() show: boolean = false;\n\n\t/**\n\t * Wether to use a portal for the tooltip\n\t */\n\t@Prop() usePortal: boolean = false;\n\n\t/**\n\t * Wether to someone can manually close the popover\n\t */\n\t@Prop() canManuallyClose: boolean = true;\n\n\t/**\n\t * Open change event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tisOpen: EventEmitter<boolean>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tprivate _hasContentSlot = false;\n\n\tprivate _loaded = false;\n\tprivate _popover: HTMLElement;\n\tprivate _cleanup: () => void;\n\n\tcomponentWillLoad() {\n\t\tthis._hasContentSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"content\"]'\n\t\t);\n\t}\n\n\tcomponentShouldUpdate() {\n\t\tthis._update();\n\t}\n\n\tdisconnectedCallback() {\n\t\tif (this._cleanup) {\n\t\t\tthis._cleanup();\n\t\t\tthis._cleanup = null;\n\t\t}\n\t}\n\n\trender() {\n\t\tconst tooltipProps = {\n\t\t\trole: 'popover',\n\t\t\t'data-placement': this.placement,\n\t\t\tref: el => this._load(el),\n\t\t};\n\n\t\tlet tooltip: HTMLElement;\n\n\t\tconst tooltipElement = (\n\t\t\t<div\n\t\t\t\tclass={popover({\n\t\t\t\t\tvariant: this.variant,\n\t\t\t\t\tstrategy: this.usePortal ? 'none' : this.strategy,\n\t\t\t\t})}\n\t\t\t\t{...(this.usePortal ? {} : tooltipProps)}\n\t\t\t>\n\t\t\t\t<div class='flex gap-2'>\n\t\t\t\t\t{this.variant === 'error' && (\n\t\t\t\t\t\t<div class='w-[2px] bg-negative-red'></div>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.content ? this.content : <slot name='content' />}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\n\t\tif (this.usePortal) {\n\t\t\ttooltip = (\n\t\t\t\t<p-portal\n\t\t\t\t\tclass={portal({\n\t\t\t\t\t\tstrategy: this.strategy,\n\t\t\t\t\t})}\n\t\t\t\t\t{...tooltipProps}\n\t\t\t\t>\n\t\t\t\t\t{tooltipElement}\n\t\t\t\t</p-portal>\n\t\t\t);\n\t\t} else {\n\t\t\ttooltip = tooltipElement;\n\t\t}\n\n\t\treturn (\n\t\t\t<Host class='p-popover flex cursor-pointer'>\n\t\t\t\t<div class='relative h-inherit w-inherit'>\n\t\t\t\t\t<slot name='trigger' />\n\t\t\t\t\t{tooltip}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('click', { capture: true })\n\tprotected clickHandler() {\n\t\tif (this.variant === 'hover' || !this.enableUserInput) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._popover.hasAttribute('data-show')) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._show();\n\t}\n\n\t@Listen('click', { target: 'document', capture: true })\n\tprotected documentClickHandler() {\n\t\tif (this.variant === 'hover' || !this.canManuallyClose || this.show) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._popover.hasAttribute('data-show')) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._hide();\n\t}\n\n\t@Listen('mouseenter')\n\t@Listen('focus')\n\tprotected mouseEnterHandler() {\n\t\tif (this.variant !== 'hover' || !this.enableUserInput) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._show();\n\t}\n\n\t@Listen('mouseleave')\n\t@Listen('blur')\n\tprotected mouseLeaveHandler() {\n\t\tif (this.show || this.variant !== 'hover' || !this.enableUserInput) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._hide();\n\t}\n\n\t@Watch('show')\n\tonShowChange(show: boolean) {\n\t\tif (show && !this._popover.hasAttribute('data-show')) {\n\t\t\treturn this._show();\n\t\t}\n\n\t\treturn this._hide();\n\t}\n\n\tprivate _show() {\n\t\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this.content?.length && !this._hasContentSlot) {\n\t\t\tif (this._popover.hasAttribute('data-show')) {\n\t\t\t\tthis._hide();\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\tthis._cleanup = autoUpdate(this._el, this._popover, () => this._update());\n\t\t// Make the popover visible\n\t\tthis._popover.setAttribute('data-show', '');\n\n\t\tthis._popover.classList.remove('opacity-0', 'pointer-events-none');\n\t\tthis._popover.classList.add('opacity-100', 'pointer-events-auto');\n\n\t\t// Update its position\n\t\tthis.isOpen.emit(true);\n\t}\n\n\tprivate _hide() {\n\t\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._cleanup) {\n\t\t\tthis._cleanup();\n\t\t\tthis._cleanup = null;\n\t\t}\n\n\t\t// Hide the popover\n\t\tthis._popover.removeAttribute('data-show');\n\n\t\tthis._popover.classList.remove('opacity-100', 'pointer-events-auto');\n\t\tthis._popover.classList.add('opacity-0', 'pointer-events-none');\n\n\t\tthis.isOpen.emit(false);\n\t}\n\n\tprivate _load(popover: HTMLElement) {\n\t\tthis._popover = popover;\n\n\t\tif (popover) {\n\t\t\tthis._update();\n\t\t\tthis._loaded = true;\n\n\t\t\tif (this.show) {\n\t\t\t\tsetTimeout(() => this._show(), 100);\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate _update() {\n\t\tif (!this._popover) {\n\t\t\treturn;\n\t\t}\n\n\t\tcomputePosition(this._el, this._popover, {\n\t\t\tplacement:\n\t\t\t\tthis.variant === 'error' && !this.placement\n\t\t\t\t\t? 'bottom-start'\n\t\t\t\t\t: this.placement ?? 'top',\n\t\t\tstrategy: this.strategy,\n\n\t\t\tmiddleware: [offset(this.offset), flip(), shift()],\n\t\t}).then(({ x, y, placement }) => {\n\t\t\tthis._popover.dataset.placement = placement;\n\t\t\tObject.assign(this._popover.style, {\n\t\t\t\ttop: `${y}px`,\n\t\t\t\tleft: `${x}px`,\n\t\t\t});\n\t\t});\n\t}\n}\n"],"version":3}

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

@@ -2,61 +2,62 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-02e05522.js');
+const index = require('./index-3f9bbc0c.js');
 const index$1 = require('./index-b556e70f.js');
 require('./clsx-fc789adc.js');
 
-const profileComponentCss = "*{box-sizing:border-box}.static{position:static!important}.absolute{position:absolute!important}.block{display:block!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.w-full{width:100%!important}.flex-1{flex:1 1 0%!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.rounded-lg{border-radius:.5rem!important}.border{border-width:1px!important}.border-black-teal-100{--tw-border-opacity:1!important;border-color:rgb(205 212 211/var(--tw-border-opacity,1))!important}.border-supportive-lilac-800{--tw-border-opacity:1!important;border-color:rgb(189 140 255/var(--tw-border-opacity,1))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.p-2{padding:.5rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-medium{font-weight:500!important}.text-black-teal-300{--tw-text-opacity:1!important;color:rgb(104 127 124/var(--tw-text-opacity,1))!important}.shadow-1{--tw-shadow:0 1px 1px rgba(0,2,2,.08)!important;--tw-shadow-colored:0 1px 1px var(--tw-shadow-color)!important}.shadow-1,.shadow-2{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.shadow-2{--tw-shadow:0 1px 1px rgba(0,2,2,.04),0 2px 2px rgba(0,2,2,.04),0 4px 4px rgba(0,2,2,.04)!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}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.ring,.ring-2{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.ring-supportive-lilac-100{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}.hover\\:shadow-2:hover{--tw-shadow:0 1px 1px rgba(0,2,2,.04),0 2px 2px rgba(0,2,2,.04),0 4px 4px rgba(0,2,2,.04)!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}";
+const profileComponentCss = "*{box-sizing:border-box}.static{position:static!important}.absolute{position:absolute!important}.block{display:block!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.w-auto{width:auto!important}.w-full{width:100%!important}.w-inherit{width:inherit!important}.min-w-0{min-width:0!important}.max-w-full{max-width:100%!important}.flex-1{flex:1 1 0%!important}.flex-col{flex-direction:column!important}.items-start{align-items:flex-start!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-medium{font-weight:500!important}.text-black-teal-300{--tw-text-opacity:1!important;color:rgb(104 127 124/var(--tw-text-opacity,1))!important}";
+const PProfileStyle0 = profileComponentCss;
 
-const profileContent = index$1.cva(['flex h-10 gap-2 items-center w-full'], {
-  variants: {
-    dropdown: {
-      false: 'py-1',
-      true: 'bg-white p-2 shadow-1 border rounded-lg hover:shadow-2 cursor-pointer',
+const profileContent = index$1.cva(['flex gap-2 items-center flex-1 min-w-0'], {
+    variants: {
+        dropdown: {
+            false: 'h-10 py-1',
+            true: null,
+        },
     },
-    dropdownOpen: {
-      false: 'border-black-teal-100',
-      true: 'shadow-2 border-supportive-lilac-800 ring ring-2 ring-supportive-lilac-100',
-    },
-  },
 });
 const Profile = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.dropdownLocation = 'bottom-end';
-    this.size = 'base';
-    this._dropdownOpen = false;
-    this._hasDropdownSlot = false;
-  }
-  componentWillLoad() {
-    this._hasDropdownSlot = !!this._el.querySelector(':scope > [slot="dropdown"]');
-  }
-  componentWillRender() {
-    this._updateAvatar();
-  }
-  render() {
-    const content = this._getContent();
-    return (index.h(index.Host, { class: 'p-profile inline-block' }, this._hasDropdownSlot ? (index.h("p-dropdown", { class: 'block', strategy: 'absolute', placement: this.dropdownLocation, applyFullWidth: true, applyMaxWidth: false, onIsOpen: ev => (this._dropdownOpen = ev.detail) }, content, index.h("div", { slot: 'items' }, index.h("slot", { name: 'dropdown' })))) : (content)));
-  }
-  _getContent() {
-    return (index.h("div", { class: profileContent({
-        dropdown: this._hasDropdownSlot,
-        dropdownOpen: this._dropdownOpen,
-      }), slot: 'trigger' }, index.h("slot", { name: 'avatar' }), index.h("div", { class: 'flex flex-1 flex-col' }, index.h("p", { class: 'font-sm font-medium' }, index.h("slot", { name: 'title' })), index.h("p", { class: 'text-xs text-black-teal-300' }, index.h("slot", { name: 'subtitle' }))), index.h("slot", { name: 'post-title' }), this._hasDropdownSlot && this._getIcon()));
-  }
-  _updateAvatar() {
-    const avatar = this._el.querySelector('p-avatar[slot="avatar"]');
-    if (!avatar) {
-      return;
-    }
-    avatar.size = this._hasDropdownSlot ? 'sm' : avatar.size;
-  }
-  _getIcon() {
-    return (index.h("p-icon", { variant: 'caret', flip: this._dropdownOpen ? 'vertical' : 'horizontal' }));
-  }
-  get _el() { return index.getElement(this); }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropdownLocation = 'bottom-end';
+        this._dropdownOpen = false;
+        this._hasDropdownSlot = false;
+    }
+    get _el() { return index.getElement(this); }
+    componentWillLoad() {
+        this._checkDropdownSlot();
+    }
+    componentWillRender() {
+        this._updateAvatar();
+    }
+    render() {
+        const content = this._getContent();
+        return (index.h(index.Host, { key: '1ff9fb75ed53f1e4c9e53dd942f150fae77484d4', class: 'p-profile inline-block w-inherit' }, this._hasDropdownSlot ? (index.h("p-dropdown", { class: 'block', strategy: 'absolute', placement: this.dropdownLocation, applyFullWidth: true, applyMaxWidth: false, onIsOpen: ev => (this._dropdownOpen = ev.detail) }, index.h("p-button", { variant: 'dropdown', chevron: this._dropdownOpen ? 'up' : 'down', active: this._dropdownOpen, slot: 'trigger', size: 'lg', class: 'w-full' }, content), index.h("div", { slot: 'items' }, index.h("slot", { name: 'dropdown', onSlotchange: () => this._checkDropdownSlot() })))) : (content)));
+    }
+    slotchange() {
+        this._checkDropdownSlot();
+    }
+    _checkDropdownSlot() {
+        this._hasDropdownSlot = !!this._el.querySelector(':scope > [slot="dropdown"]');
+        if (!this._hasDropdownSlot && this._dropdownOpen) {
+            this._dropdownOpen = false;
+        }
+    }
+    _getContent() {
+        return (index.h("div", { class: profileContent({
+                dropdown: this._hasDropdownSlot,
+            }) }, index.h("slot", { name: 'avatar' }), index.h("div", { class: 'flex min-w-0 flex-1 flex-col items-start' }, index.h("p", { class: 'w-auto max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium' }, index.h("slot", { name: 'title' })), index.h("p", { class: 'w-auto max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-xs text-black-teal-300' }, index.h("slot", { name: 'subtitle' }))), index.h("slot", { name: 'post-title' })));
+    }
+    _updateAvatar() {
+        const avatar = this._el.querySelector('p-avatar[slot="avatar"]');
+        if (!avatar) {
+            return;
+        }
+        avatar.size = this._hasDropdownSlot ? 'sm' : avatar.size;
+    }
 };
-Profile.style = profileComponentCss;
+Profile.style = PProfileStyle0;
 
 exports.p_profile = Profile;
 

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

@@ -1 +1 @@
-{"file":"p-profile.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,+rFAA+rF;;ACG3tF,MAAM,cAAc,GAAGA,WAAG,CAAC,CAAC,qCAAqC,CAAC,EAAE;EACnE,QAAQ,EAAE;IACT,QAAQ,EAAE;MACT,KAAK,EAAE,MAAM;MACb,IAAI,EAAE,uEAAuE;KAC7E;IACD,YAAY,EAAE;MACb,KAAK,EAAE,uBAAuB;MAC9B,IAAI,EAAE,4EAA4E;KAClF;GACD;CACD,CAAC,CAAC;MAMU,OAAO;;;4BAIkC,YAAY;gBAatD,MAAM;yBAOgB,KAAK;4BACF,KAAK;;EAEzC,iBAAiB;IAChB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC/C,4BAA4B,CAC5B,CAAC;GACF;EAED,mBAAmB;IAClB,IAAI,CAAC,aAAa,EAAE,CAAC;GACrB;EAED,MAAM;IACL,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IACnC,QACCC,QAACC,UAAI,IAAC,KAAK,EAAC,wBAAwB,IAClC,IAAI,CAAC,gBAAgB,IACrBD,wBACC,KAAK,EAAC,OAAO,EACb,QAAQ,EAAC,UAAU,EACnB,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,cAAc,EAAE,IAAI,EACpB,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,EAAE,KAAK,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,MAAM,CAAC,IAE/C,OAAO,EACRA,iBAAK,IAAI,EAAC,OAAO,IAChBA,kBAAM,IAAI,EAAC,UAAU,GAAG,CACnB,CACM,KAEb,OAAO,CACP,CACK,EACN;GACF;EAEO,WAAW;IAClB,QACCA,iBACC,KAAK,EAAE,cAAc,CAAC;QACrB,QAAQ,EAAE,IAAI,CAAC,gBAAgB;QAC/B,YAAY,EAAE,IAAI,CAAC,aAAa;OAChC,CAAC,EACF,IAAI,EAAC,SAAS,IAEdA,kBAAM,IAAI,EAAC,QAAQ,GAAG,EACtBA,iBAAK,KAAK,EAAC,sBAAsB,IAChCA,eAAG,KAAK,EAAC,qBAAqB,IAC7BA,kBAAM,IAAI,EAAC,OAAO,GAAG,CAClB,EACJA,eAAG,KAAK,EAAC,6BAA6B,IACrCA,kBAAM,IAAI,EAAC,UAAU,GAAG,CACrB,CACC,EAENA,kBAAM,IAAI,EAAC,YAAY,GAAG,EACzB,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,QAAQ,EAAE,CACpC,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,IAAI,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;GACzD;EAEO,QAAQ;IACf,QACCA,oBACC,OAAO,EAAC,OAAO,EACf,IAAI,EAAE,IAAI,CAAC,aAAa,GAAG,UAAU,GAAG,YAAY,GACnD,EACD;GACF;;;;;;;","names":["cva","h","Host"],"sources":["src/components/molecules/profile/profile.component.scss?tag=p-profile","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='xsmall']) {\n// \t@apply h-6;\n// }\n//\n// :host([size='small']) {\n// \t@apply h-8;\n// }\n//\n// :host([size='table']) {\n// \t@apply h-10;\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([size='xlarge']) {\n// \t@apply h-[6.5rem];\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-3;\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';\nimport { cva } from 'class-variance-authority';\n\nconst profileContent = cva(['flex h-10 gap-2 items-center w-full'], {\n\tvariants: {\n\t\tdropdown: {\n\t\t\tfalse: 'py-1',\n\t\t\ttrue: 'bg-white p-2 shadow-1 border rounded-lg hover:shadow-2 cursor-pointer',\n\t\t},\n\t\tdropdownOpen: {\n\t\t\tfalse: 'border-black-teal-100',\n\t\t\ttrue: 'shadow-2 border-supportive-lilac-800 ring ring-2 ring-supportive-lilac-100',\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-profile',\n\tstyleUrl: 'profile.component.scss',\n})\nexport class Profile {\n\t/**\n\t * The position of the dropdown\n\t */\n\t@Prop() dropdownLocation: 'top-end' | 'bottom-end' = 'bottom-end';\n\n\t/**\n\t * The size of the profile avatar\n\t */\n\t@Prop({ reflect: true }) size:\n\t\t| 'xs'\n\t\t| 'sm'\n\t\t| 'base'\n\t\t| 'lg'\n\t\t| 'xl'\n\t\t| '2xl'\n\t\t| '3xl'\n\t\t| '4xl' = 'base';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _dropdownOpen = false;\n\t@State() private _hasDropdownSlot = false;\n\n\tcomponentWillLoad() {\n\t\tthis._hasDropdownSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"dropdown\"]'\n\t\t);\n\t}\n\n\tcomponentWillRender() {\n\t\tthis._updateAvatar();\n\t}\n\n\trender() {\n\t\tconst content = this._getContent();\n\t\treturn (\n\t\t\t<Host class='p-profile inline-block'>\n\t\t\t\t{this._hasDropdownSlot ? (\n\t\t\t\t\t<p-dropdown\n\t\t\t\t\t\tclass='block'\n\t\t\t\t\t\tstrategy='absolute'\n\t\t\t\t\t\tplacement={this.dropdownLocation}\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() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={profileContent({\n\t\t\t\t\tdropdown: this._hasDropdownSlot,\n\t\t\t\t\tdropdownOpen: this._dropdownOpen,\n\t\t\t\t})}\n\t\t\t\tslot='trigger'\n\t\t\t>\n\t\t\t\t<slot name='avatar' />\n\t\t\t\t<div class='flex flex-1 flex-col'>\n\t\t\t\t\t<p class='font-sm font-medium'>\n\t\t\t\t\t\t<slot name='title' />\n\t\t\t\t\t</p>\n\t\t\t\t\t<p class='text-xs text-black-teal-300'>\n\t\t\t\t\t\t<slot name='subtitle' />\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\n\t\t\t\t<slot name='post-title' />\n\t\t\t\t{this._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.size = this._hasDropdownSlot ? 'sm' : avatar.size;\n\t}\n\n\tprivate _getIcon() {\n\t\treturn (\n\t\t\t<p-icon\n\t\t\t\tvariant='caret'\n\t\t\t\tflip={this._dropdownOpen ? 'vertical' : 'horizontal'}\n\t\t\t/>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"p-profile.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,0iCAA0iC,CAAC;AACvkC,uBAAe,mBAAmB;;ACUlC,MAAM,cAAc,GAAGA,WAAG,CAAC,CAAC,wCAAwC,CAAC,EAAE;IACtE,QAAQ,EAAE;QACT,QAAQ,EAAE;YACT,KAAK,EAAE,WAAW;YAClB,IAAI,EAAE,IAAI;SACV;KACD;CACD,CAAC,CAAC;MAMU,OAAO;;;gCAIkC,YAAY;6BAOhC,KAAK;gCACF,KAAK;;;IAEzC,iBAAiB;QAChB,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC1B;IAED,mBAAmB;QAClB,IAAI,CAAC,aAAa,EAAE,CAAC;KACrB;IAED,MAAM;QACL,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAEnC,QACCC,QAACC,UAAI,qDAAC,KAAK,EAAC,kCAAkC,IAC5C,IAAI,CAAC,gBAAgB,IACrBD,wBACC,KAAK,EAAC,OAAO,EACb,QAAQ,EAAC,UAAU,EACnB,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,cAAc,EAAE,IAAI,EACpB,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,EAAE,KAAK,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,MAAM,CAAC,IAEhDA,sBACC,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,MAAM,EAC3C,MAAM,EAAE,IAAI,CAAC,aAAa,EAC1B,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,QAAQ,IAEb,OAAO,CACE,EACXA,iBAAK,IAAI,EAAC,OAAO,IAChBA,kBACC,IAAI,EAAC,UAAU,EACf,YAAY,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE,GAC5C,CACG,CACM,KAEb,OAAO,CACP,CACK,EACN;KACF;IAGD,UAAU;QACT,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC1B;IAEO,kBAAkB;QACzB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC/C,4BAA4B,CAC5B,CAAC;QAEF,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,aAAa,EAAE;YACjD,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC3B;KACD;IAEO,WAAW;QAClB,QACCA,iBACC,KAAK,EAAE,cAAc,CAAC;gBACrB,QAAQ,EAAE,IAAI,CAAC,gBAAgB;aAC/B,CAAC,IAEFA,kBAAM,IAAI,EAAC,QAAQ,GAAG,EACtBA,iBAAK,KAAK,EAAC,0CAA0C,IACpDA,eAAG,KAAK,EAAC,uFAAuF,IAC/FA,kBAAM,IAAI,EAAC,OAAO,GAAG,CAClB,EACJA,eAAG,KAAK,EAAC,+FAA+F,IACvGA,kBAAM,IAAI,EAAC,UAAU,GAAG,CACrB,CACC,EAENA,kBAAM,IAAI,EAAC,YAAY,GAAG,CACrB,EACL;KACF;IAEO,aAAa;QACpB,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CACpC,yBAAyB,CACH,CAAC;QAExB,IAAI,CAAC,MAAM,EAAE;YACZ,OAAO;SACP;QAED,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;KACzD;;;;;;","names":["cva","h","Host"],"sources":["src/components/molecules/profile/profile.component.scss?tag=p-profile","src/components/molecules/profile/profile.component.tsx"],"sourcesContent":["","import {\n\tComponent,\n\tElement,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst profileContent = cva(['flex gap-2 items-center flex-1 min-w-0'], {\n\tvariants: {\n\t\tdropdown: {\n\t\t\tfalse: 'h-10 py-1',\n\t\t\ttrue: null,\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-profile',\n\tstyleUrl: 'profile.component.scss',\n})\nexport class Profile {\n\t/**\n\t * The position of the dropdown\n\t */\n\t@Prop() dropdownLocation: 'top-end' | 'bottom-end' = 'bottom-end';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _dropdownOpen = false;\n\t@State() private _hasDropdownSlot = false;\n\n\tcomponentWillLoad() {\n\t\tthis._checkDropdownSlot();\n\t}\n\n\tcomponentWillRender() {\n\t\tthis._updateAvatar();\n\t}\n\n\trender() {\n\t\tconst content = this._getContent();\n\n\t\treturn (\n\t\t\t<Host class='p-profile inline-block w-inherit'>\n\t\t\t\t{this._hasDropdownSlot ? (\n\t\t\t\t\t<p-dropdown\n\t\t\t\t\t\tclass='block'\n\t\t\t\t\t\tstrategy='absolute'\n\t\t\t\t\t\tplacement={this.dropdownLocation}\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<p-button\n\t\t\t\t\t\t\tvariant='dropdown'\n\t\t\t\t\t\t\tchevron={this._dropdownOpen ? 'up' : 'down'}\n\t\t\t\t\t\t\tactive={this._dropdownOpen}\n\t\t\t\t\t\t\tslot='trigger'\n\t\t\t\t\t\t\tsize='lg'\n\t\t\t\t\t\t\tclass='w-full'\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t</p-button>\n\t\t\t\t\t\t<div slot='items'>\n\t\t\t\t\t\t\t<slot\n\t\t\t\t\t\t\t\tname='dropdown'\n\t\t\t\t\t\t\t\tonSlotchange={() => this._checkDropdownSlot()}\n\t\t\t\t\t\t\t/>\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\t@Listen('slotchange')\n\tslotchange() {\n\t\tthis._checkDropdownSlot();\n\t}\n\n\tprivate _checkDropdownSlot() {\n\t\tthis._hasDropdownSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"dropdown\"]'\n\t\t);\n\n\t\tif (!this._hasDropdownSlot && this._dropdownOpen) {\n\t\t\tthis._dropdownOpen = false;\n\t\t}\n\t}\n\n\tprivate _getContent() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={profileContent({\n\t\t\t\t\tdropdown: this._hasDropdownSlot,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<slot name='avatar' />\n\t\t\t\t<div class='flex min-w-0 flex-1 flex-col items-start'>\n\t\t\t\t\t<p class='w-auto max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium'>\n\t\t\t\t\t\t<slot name='title' />\n\t\t\t\t\t</p>\n\t\t\t\t\t<p class='w-auto max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-xs text-black-teal-300'>\n\t\t\t\t\t\t<slot name='subtitle' />\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\n\t\t\t\t<slot name='post-title' />\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.size = this._hasDropdownSlot ? 'sm' : avatar.size;\n\t}\n}\n"],"version":3}

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

@@ -0,0 +1,102 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3f9bbc0c.js');
+const index$1 = require('./index-b556e70f.js');
+const nonce = require('./nonce-0feefc04.js');
+require('./clsx-fc789adc.js');
+
+const radioComponentCss = "*{box-sizing:border-box}.pointer-events-none{pointer-events:none!important}.static{position:static!important}.absolute{position:absolute!important}.relative{position:relative!important}.left-1\\/2{left:50%!important}.top-1\\/2{top:50%!important}.m-0{margin:0!important}.block{display:block!important}.flex{display:flex!important}.h-2{height:.5rem!important}.h-3{height:.75rem!important}.h-4{height:1rem!important}.h-6{height:1.5rem!important}.w-2{width:.5rem!important}.w-3{width:.75rem!important}.w-4{width:1rem!important}.w-6{width:1.5rem!important}.flex-shrink-0{flex-shrink:0!important}.-translate-x-1\\/2{--tw-translate-x:-50%!important}.-translate-x-1\\/2,.-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-translate-y-1\\/2{--tw-translate-y:-50%!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.appearance-none{appearance:none!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.gap-2{gap:.5rem!important}.rounded-full{border-radius:9999px!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-black-teal-100{--tw-border-opacity:1!important;border-color:rgb(205 212 211/var(--tw-border-opacity,1))!important}.border-black-teal-50{--tw-border-opacity:1!important;border-color:rgb(230 234 233/var(--tw-border-opacity,1))!important}.bg-transparent{background-color:transparent!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-white,.bg-white-600{--tw-bg-opacity:1!important}.bg-white-600{background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.shadow-1{--tw-shadow:0 1px 1px rgba(0,2,2,.08)!important;--tw-shadow-colored:0 1px 1px 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}.outline-none{outline:2px solid transparent!important;outline-offset:2px!important}.checked\\:cursor-auto:checked{cursor:auto!important}.checked\\:border-black-teal\\/20:checked{border-color:rgba(3,42,36,.2)!important}.checked\\:bg-supportive-lilac:checked{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.checked\\:ring-2:checked{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.checked\\:ring-supportive-lilac-100:checked{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}.hover\\:border-black-teal-100:hover{--tw-border-opacity:1!important;border-color:rgb(205 212 211/var(--tw-border-opacity,1))!important}.hover\\:bg-supportive-lilac-100:hover{--tw-bg-opacity:1!important;background-color:rgb(246 239 255/var(--tw-bg-opacity,1))!important}.checked\\:hover\\:border-black-teal\\/20:hover:checked{border-color:rgba(3,42,36,.2)!important}.checked\\:hover\\:bg-supportive-lilac:hover:checked{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.peer:checked~.peer-checked\\:bg-black-teal-200{--tw-bg-opacity:1!important;background-color:rgb(154 170 167/var(--tw-bg-opacity,1))!important}.peer:checked~.peer-checked\\:bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.peer:checked~.peer-checked\\:ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.peer:checked~.peer-checked\\:ring-black-teal\\/10{--tw-ring-color:rgba(3,42,36,.1)!important}";
+const PRadioStyle0 = radioComponentCss;
+
+const radio = index$1.cva([
+    'peer appearance-none m-0 outline-none flex-shrink-0',
+    'rounded-full border border-inset border-solid ',
+], {
+    variants: {
+        size: {
+            sm: 'w-4 h-4',
+            base: 'w-6 h-6',
+        },
+        disabled: {
+            false: [
+                'cursor-pointer shadow-1',
+                'bg-white border-black-teal-100',
+                'hover:bg-supportivce-lilac-100 hover:border-black-teal-100',
+                'checked:cursor-auto',
+                'checked:bg-supportive-lilac checked:border-black-teal/20',
+                'checked:ring-2 checked:ring-supportive-lilac-100',
+                'checked:hover:bg-supportive-lilac checked:hover:border-black-teal/20',
+            ],
+            true: 'bg-white-600 border-black-teal-50 cursor-not-allowed ',
+        },
+    },
+    compoundVariants: [
+        {
+            disabled: false,
+            class: [
+                'cursor-pointer shadow-1',
+                'bg-white border-black-teal-100',
+                'hover:bg-supportive-lilac-100 hover:border-black-teal-100',
+            ],
+        },
+    ],
+});
+const circle = index$1.cva([
+    'block',
+    'rounded-full bg-transparent',
+    'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none',
+], {
+    variants: {
+        size: {
+            sm: 'w-2 h-2',
+            base: 'w-3 h-3',
+        },
+        disabled: {
+            false: 'peer-checked:bg-white peer-checked:ring-1 peer-checked:ring-black-teal/10',
+            true: 'peer-checked:bg-black-teal-200',
+        },
+    },
+});
+const Radio = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.checkedChange = index.createEvent(this, "checkedChange", 7);
+        this.value = undefined;
+        this.size = 'base';
+        this.disabled = false;
+        this.required = true;
+        this.id = undefined;
+        this.name = undefined;
+        this.checked = false;
+        this._nonce = nonce.nonce(5);
+    }
+    /**
+     * Event whenever the checked changes
+     */
+    checkedChange;
+    render() {
+        return (index.h(index.Host, { key: 'cadcfb2a903a3a9f70796770dc47f22caf199b5e', class: 'p-radio' }, index.h("label", { key: 'bad70100ebbf0d8635fb9a50c274aac56b74735a', htmlFor: this.id ?? this._nonce, class: 'flex items-center justify-start gap-2 text-black-teal' }, index.h("div", { key: '87c8c6b485b23beb305450bb18416936425e000e', class: 'relative flex flex-shrink-0 items-center' }, index.h("input", { key: '500655357e45b7ed47b651993b2a4e62aaae1818', class: radio({
+                size: this.size,
+                disabled: this.disabled,
+            }), type: 'radio', id: this.id ?? this._nonce, name: this.name, required: this.required, value: this.value, checked: this.checked, disabled: this.disabled, onChange: ev => this._onChange(ev) }), index.h("div", { key: '23b0de0ff8913ed6bc66bddd50eea9117063b880', class: circle({
+                size: this.size,
+                disabled: this.disabled,
+            }) })), index.h("slot", { key: 'bbf707984104b091871111ae1d1e79ea09f5e7b8' }))));
+    }
+    _onChange(ev) {
+        if (this.disabled) {
+            ev.preventDefault();
+            return;
+        }
+        const checked = ev.target.checked;
+        this.checked = checked;
+        this.checkedChange.emit(checked);
+    }
+};
+Radio.style = PRadioStyle0;
+
+exports.p_radio = Radio;
+
+//# sourceMappingURL=p-radio.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"p-radio.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,q3IAAq3I,CAAC;AACh5I,qBAAe,iBAAiB;;ACWhC,MAAM,KAAK,GAAGA,WAAG,CAChB;IACC,qDAAqD;IACrD,gDAAgD;CAChD,EACD;IACC,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,SAAS;SACf;QACD,QAAQ,EAAE;YACT,KAAK,EAAE;gBACN,yBAAyB;gBACzB,gCAAgC;gBAChC,4DAA4D;gBAC5D,qBAAqB;gBACrB,0DAA0D;gBAC1D,kDAAkD;gBAClD,sEAAsE;aACtE;YACD,IAAI,EAAE,uDAAuD;SAC7D;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE;gBACN,yBAAyB;gBACzB,gCAAgC;gBAChC,2DAA2D;aAC3D;SACD;KACD;CACD,CACD,CAAC;AAEF,MAAM,MAAM,GAAGA,WAAG,CACjB;IACC,OAAO;IACP,6BAA6B;IAC7B,2FAA2F;CAC3F,EACD;IACC,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,SAAS;SACf;QACD,QAAQ,EAAE;YACT,KAAK,EACJ,2EAA2E;YAC5E,IAAI,EAAE,gCAAgC;SACtC;KACD;CACD,CACD,CAAC;MAMW,KAAK;;;;;oBASa,MAAM;wBAKS,KAAK;wBAKL,IAAI;;;uBAeL,KAAK;sBAOvBC,WAAK,CAAC,CAAC,CAAC;;;;;IAFzB,aAAa,CAAwB;IAI9C,MAAM;QACL,QACCC,QAACC,UAAI,qDAAC,KAAK,EAAC,SAAS,IACpBD,oEACC,OAAO,EAAE,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,MAAM,EAC/B,KAAK,EAAC,uDAAuD,IAE7DA,kEAAK,KAAK,EAAC,0CAA0C,IACpDA,oEACC,KAAK,EAAE,KAAK,CAAC;gBACZ,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACvB,CAAC,EACF,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,MAAM,EAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,GACjC,EACFA,kEACC,KAAK,EAAE,MAAM,CAAC;gBACb,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACvB,CAAC,GACD,CACG,EACNA,oEAAa,CACN,CACF,EACN;KACF;IAEO,SAAS,CAAC,EAAS;QAC1B,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClB,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,OAAO;SACP;QAED,MAAM,OAAO,GAAI,EAAE,CAAC,MAA2B,CAAC,OAAO,CAAC;QACxD,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACjC;;;;;;","names":["cva","nonce","h","Host"],"sources":["src/components/atoms/radio/radio.component.css?tag=p-radio","src/components/atoms/radio/radio.component.tsx"],"sourcesContent":["","import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\tHost,\n\tProp,\n\tState,\n\th,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { nonce } from '../../../utils/nonce';\n\nconst radio = cva(\n\t[\n\t\t'peer appearance-none m-0 outline-none flex-shrink-0',\n\t\t'rounded-full border border-inset border-solid ',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: 'w-4 h-4',\n\t\t\t\tbase: 'w-6 h-6',\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\tfalse: [\n\t\t\t\t\t'cursor-pointer shadow-1',\n\t\t\t\t\t'bg-white border-black-teal-100',\n\t\t\t\t\t'hover:bg-supportivce-lilac-100 hover:border-black-teal-100',\n\t\t\t\t\t'checked:cursor-auto',\n\t\t\t\t\t'checked:bg-supportive-lilac checked:border-black-teal/20',\n\t\t\t\t\t'checked:ring-2 checked:ring-supportive-lilac-100',\n\t\t\t\t\t'checked:hover:bg-supportive-lilac checked:hover:border-black-teal/20',\n\t\t\t\t],\n\t\t\t\ttrue: 'bg-white-600 border-black-teal-50 cursor-not-allowed ',\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: [\n\t\t\t\t\t'cursor-pointer shadow-1',\n\t\t\t\t\t'bg-white border-black-teal-100',\n\t\t\t\t\t'hover:bg-supportive-lilac-100 hover:border-black-teal-100',\n\t\t\t\t],\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst circle = cva(\n\t[\n\t\t'block',\n\t\t'rounded-full bg-transparent',\n\t\t'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: 'w-2 h-2',\n\t\t\t\tbase: 'w-3 h-3',\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\tfalse:\n\t\t\t\t\t'peer-checked:bg-white peer-checked:ring-1 peer-checked:ring-black-teal/10',\n\t\t\t\ttrue: 'peer-checked:bg-black-teal-200',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-radio',\n\tstyleUrl: 'radio.component.css',\n})\nexport class Radio {\n\t/**\n\t * The value of the radio button\n\t */\n\t@Prop() value: string;\n\n\t/**\n\t * The size of the radio\n\t */\n\t@Prop() size: 'sm' | 'base' = 'base';\n\n\t/**\n\t * Wether the radio is disabled\n\t */\n\t@Prop({ reflect: true }) disabled: boolean = false;\n\n\t/**\n\t * Wether the radio is required\n\t */\n\t@Prop({ reflect: true }) required: boolean = true;\n\n\t/**\n\t * The id of the radio button\n\t */\n\t@Prop({ reflect: true }) id: string;\n\n\t/**\n\t * The name of the radio button\n\t */\n\t@Prop({ reflect: true }) name: string;\n\n\t/**\n\t * Wether the radio is checked\n\t */\n\t@Prop({ reflect: true }) checked: boolean = false;\n\n\t/**\n\t * Event whenever the checked changes\n\t */\n\t@Event() checkedChange: EventEmitter<boolean>;\n\n\t@State() private _nonce = nonce(5);\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-radio'>\n\t\t\t\t<label\n\t\t\t\t\thtmlFor={this.id ?? this._nonce}\n\t\t\t\t\tclass='flex items-center justify-start gap-2 text-black-teal'\n\t\t\t\t>\n\t\t\t\t\t<div class='relative flex flex-shrink-0 items-center'>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclass={radio({\n\t\t\t\t\t\t\t\tsize: this.size,\n\t\t\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\ttype='radio'\n\t\t\t\t\t\t\tid={this.id ?? this._nonce}\n\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\t\tchecked={this.checked}\n\t\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\t\tonChange={ev => this._onChange(ev)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass={circle({\n\t\t\t\t\t\t\t\tsize: this.size,\n\t\t\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</label>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _onChange(ev: Event) {\n\t\tif (this.disabled) {\n\t\t\tev.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tconst checked = (ev.target as HTMLInputElement).checked;\n\t\tthis.checked = checked;\n\t\tthis.checkedChange.emit(checked);\n\t}\n}\n"],"version":3}