labx-components 0.1.0

package/dist/collection/components/labx-input/labx-input.js

@@ -0,0 +1,183 @@
+import { Host, h } from "@stencil/core";
+export class LabxInput {
+    /** Texto del label flotante */
+    label;
+    /** Valor del input */
+    value = '';
+    /** Type HTML del input */
+    type = 'text';
+    /** Deshabilita el input */
+    disabled = false;
+    /** Mensaje de error */
+    error;
+    /** El input tiene foco actualmente */
+    focused = false;
+    /** true si el slot icon-left tiene contenido */
+    hasIconLeft = false;
+    /** true si el slot icon-right tiene contenido */
+    hasIconRight = false;
+    /** Se emite cuando el valor cambia */
+    labxChange;
+    handleInput(e) {
+        this.value = e.target.value;
+        this.labxChange.emit(this.value);
+    }
+    onSlotChange(side, e) {
+        const slot = e.target;
+        const hasContent = slot.assignedNodes().length > 0;
+        if (side === 'left')
+            this.hasIconLeft = hasContent;
+        else
+            this.hasIconRight = hasContent;
+    }
+    render() {
+        const isFloating = this.focused || this.value?.length > 0;
+        return (h(Host, { key: '357eb1c2b3c395801c8d7249c3e649f5ddd33bda' }, h("div", { key: '1bc8515582f79c560196c7631cef3de31344234e', class: {
+                'input-wrapper': true,
+                'input-wrapper--focused': this.focused,
+                'input-wrapper--error': !!this.error,
+                'input-wrapper--disabled': this.disabled,
+                'input-wrapper--icon-left': this.hasIconLeft,
+                'input-wrapper--icon-right': this.hasIconRight,
+            } }, h("span", { key: 'd3da76f5d96c55179870583faf5931c6008188ec', class: "input-icon input-icon--left" }, h("slot", { key: 'eeea94735ef34585bd88eef2e6d753f58733aeb7', name: "icon-left", onSlotchange: (e) => this.onSlotChange('left', e) })), h("input", { key: '2792b2634677fe2ebe272248bd75fbd0e993080a', class: "input", type: this.type, value: this.value, disabled: this.disabled, onInput: (e) => this.handleInput(e), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }), this.label && (h("label", { key: '0d1ae4db30645f2a4a1927f0495b053620d5a3d5', class: { 'input-label': true, 'input-label--floating': isFloating } }, this.label)), h("span", { key: '4e25bc9f95998d3d94f36306a353859fa67fc5f3', class: "input-icon input-icon--right" }, h("slot", { key: '2492d04ec309a636128fd7da1729875e2c0c93d5', name: "icon-right", onSlotchange: (e) => this.onSlotChange('right', e) }))), this.error && h("span", { key: 'bfde298513f8d55f4b36b51afee6565d312f52d3', class: "input-error" }, this.error)));
+    }
+    static get is() { return "labx-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["labx-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["labx-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto del label flotante"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor del input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type HTML del input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'text'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Deshabilita el input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mensaje de error"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "focused": {},
+            "hasIconLeft": {},
+            "hasIconRight": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "labxChange",
+                "name": "labxChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Se emite cuando el valor cambia"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/index.js

@@ -0,0 +1,10 @@
+/**
+ * @fileoverview entry point for your component library
+ *
+ * This is the entry point for your component library. Use this file to export utilities,
+ * constants or data structure that accompany your components.
+ *
+ * DO NOT use this file to export your components. Instead, use the recommended approaches
+ * to consume components of this package as outlined in the `README.md`.
+ */
+export { format } from './utils/utils';

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}

package/dist/collection/utils/utils.unit.test.js

@@ -0,0 +1,16 @@
+import { describe, it, expect } from "vitest";
+import { format } from "./utils";
+describe('format', () => {
+    it('returns empty string for no names defined', () => {
+        expect(format(undefined, undefined, undefined)).toEqual('');
+    });
+    it('formats just first names', () => {
+        expect(format('Joseph', undefined, undefined)).toEqual('Joseph');
+    });
+    it('formats first and last names', () => {
+        expect(format('Joseph', undefined, 'Publique')).toEqual('Joseph Publique');
+    });
+    it('formats first, middle and last names', () => {
+        expect(format('Joseph', 'Quincy', 'Publique')).toEqual('Joseph Quincy Publique');
+    });
+});

package/dist/components/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1 @@
+export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-DEM5hG4h.js";function t(s,t,e){return(s||"")+(t?" "+t:"")+(e?" "+e:"")}export{t as format}

package/dist/components/labx-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LabxButton extends Components.LabxButton, HTMLElement {}
+export const LabxButton: {
+    prototype: LabxButton;
+    new (): LabxButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/labx-button.js

@@ -0,0 +1 @@
+import{t as r,p as o,H as e,c as a,h as t,d as l}from"./p-DEM5hG4h.js";const n=o(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.labxClick=a(this,"labxClick")}label="Button";variant="primary";disabled=!1;type="button";labxClick;handleClick(){this.disabled||this.labxClick.emit()}render(){return t(l,{key:"76d607e0f7612ef141b30d884166181402e4e6a0"},t("button",{key:"cd3204b93d8791529784d04ccf80a566221aab74",type:this.type,disabled:this.disabled,class:"btn btn--"+this.variant,onClick:()=>this.handleClick()},this.label))}static get style(){return":host{display:inline-block}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border:2px solid transparent;border-radius:8px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease}.btn:focus-visible{outline:3px solid var(--color-primary-light);outline-offset:2px}.btn--primary{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-bg-surface)}.btn--primary:hover:not(:disabled){background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}.btn--secondary{background-color:transparent;border-color:var(--color-primary);color:var(--color-primary)}.btn--secondary:hover:not(:disabled){background-color:var(--color-primary-light)}.btn--danger{background-color:var(--color-danger);border-color:var(--color-danger);color:var(--color-bg-surface)}.btn--danger:hover:not(:disabled){background-color:var(--color-danger-light);border-color:var(--color-danger);color:var(--color-danger)}.btn:disabled{background-color:var(--color-bg-subtle);border-color:var(--color-border);color:var(--color-disabled);cursor:not-allowed}"}},[513,"labx-button",{label:[1],variant:[1],disabled:[4],type:[1]}]);function c(){"undefined"!=typeof customElements&&["labx-button"].forEach((o=>{"labx-button"===o&&(customElements.get(r(o))||customElements.define(r(o),n))}))}c();const i=n,s=c;export{i as LabxButton,s as defineCustomElement}

package/dist/components/labx-icon.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LabxIcon extends Components.LabxIcon, HTMLElement {}
+export const LabxIcon: {
+    prototype: LabxIcon;
+    new (): LabxIcon;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/labx-icon.js

@@ -0,0 +1 @@
+import{t,p as e,H as n,h as i,d as s}from"./p-DEM5hG4h.js";const o=e(class extends n{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}name;size=20;filled=!1;render(){return i(s,{key:"30e38c191019432490921f13c23fc91f96952e90",style:{fontSize:this.size+"px"}},i("span",{key:"9ff64363cdb1fcb0f0eec24e13a2fc623506972f",class:{icon:!0,"icon--filled":this.filled}},this.name))}static get style(){return":host{display:inline-flex;align-items:center;justify-content:center;color:inherit}.icon{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:inherit;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20}.icon--filled{font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20}"}},[513,"labx-icon",{name:[1],size:[2],filled:[4]}]);function l(){"undefined"!=typeof customElements&&["labx-icon"].forEach((e=>{"labx-icon"===e&&(customElements.get(t(e))||customElements.define(t(e),o))}))}l();const c=o,r=l;export{c as LabxIcon,r as defineCustomElement}

package/dist/components/labx-input.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LabxInput extends Components.LabxInput, HTMLElement {}
+export const LabxInput: {
+    prototype: LabxInput;
+    new (): LabxInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/labx-input.js

@@ -0,0 +1 @@
+import{t as e,p as t,H as o,c as r,h as i,d as n}from"./p-DEM5hG4h.js";const a=t(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.labxChange=r(this,"labxChange")}label;value="";type="text";disabled=!1;error;focused=!1;hasIconLeft=!1;hasIconRight=!1;labxChange;handleInput(e){this.value=e.target.value,this.labxChange.emit(this.value)}onSlotChange(e,t){const o=t.target.assignedNodes().length>0;"left"===e?this.hasIconLeft=o:this.hasIconRight=o}render(){const e=this.focused||this.value?.length>0;return i(n,{key:"357eb1c2b3c395801c8d7249c3e649f5ddd33bda"},i("div",{key:"1bc8515582f79c560196c7631cef3de31344234e",class:{"input-wrapper":!0,"input-wrapper--focused":this.focused,"input-wrapper--error":!!this.error,"input-wrapper--disabled":this.disabled,"input-wrapper--icon-left":this.hasIconLeft,"input-wrapper--icon-right":this.hasIconRight}},i("span",{key:"d3da76f5d96c55179870583faf5931c6008188ec",class:"input-icon input-icon--left"},i("slot",{key:"eeea94735ef34585bd88eef2e6d753f58733aeb7",name:"icon-left",onSlotchange:e=>this.onSlotChange("left",e)})),i("input",{key:"2792b2634677fe2ebe272248bd75fbd0e993080a",class:"input",type:this.type,value:this.value,disabled:this.disabled,onInput:e=>this.handleInput(e),onFocus:()=>this.focused=!0,onBlur:()=>this.focused=!1}),this.label&&i("label",{key:"0d1ae4db30645f2a4a1927f0495b053620d5a3d5",class:{"input-label":!0,"input-label--floating":e}},this.label),i("span",{key:"4e25bc9f95998d3d94f36306a353859fa67fc5f3",class:"input-icon input-icon--right"},i("slot",{key:"2492d04ec309a636128fd7da1729875e2c0c93d5",name:"icon-right",onSlotchange:e=>this.onSlotChange("right",e)}))),this.error&&i("span",{key:"bfde298513f8d55f4b36b51afee6565d312f52d3",class:"input-error"},this.error))}static get style(){return":host{display:block}.input-wrapper{position:relative;display:flex;align-items:center;background-color:var(--color-bg-surface);border:2px solid var(--color-border);border-radius:8px;transition:border-color 0.2s ease}.input-wrapper--focused{border-color:var(--color-primary)}.input-wrapper--error{border-color:var(--color-danger)}.input-wrapper--disabled{background-color:var(--color-bg-subtle);cursor:not-allowed}.input{width:100%;padding:20px 14px 6px 14px;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;color:var(--color-text-default);cursor:inherit}.input:disabled{color:var(--color-disabled);cursor:not-allowed}.input-wrapper--icon-left .input{padding-left:40px}.input-wrapper--icon-right .input{padding-right:40px}.input-label{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--color-text-muted);pointer-events:none;transition:top 0.2s ease, font-size 0.2s ease, color 0.2s ease}.input-label--floating{top:7px;transform:none;font-size:11px;color:var(--color-primary)}.input-wrapper--error .input-label--floating{color:var(--color-danger)}.input-wrapper--icon-left .input-label{left:40px}.input-icon{position:absolute;display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--color-text-muted);pointer-events:none}.input-icon--left{left:12px}.input-icon--right{right:12px}.input-error{display:block;margin-top:4px;padding-left:4px;font-size:12px;color:var(--color-danger)}"}},[769,"labx-input",{label:[1],value:[1537],type:[1],disabled:[4],error:[1],focused:[32],hasIconLeft:[32],hasIconRight:[32]}]);function s(){"undefined"!=typeof customElements&&["labx-input"].forEach((t=>{"labx-input"===t&&(customElements.get(e(t))||customElements.define(e(t),a))}))}s();const p=a,l=s;export{p as LabxInput,l as defineCustomElement}

package/dist/components/p-DEM5hG4h.js

@@ -0,0 +1 @@
+const e=":root{--color-bg-surface:#FFFDF8;--color-bg-light:#FAF3E1;--color-bg-subtle:#F5E7C6;--color-primary:#FA8112;--color-primary-hover:#D96A0A;--color-primary-light:#FEE8CE;--color-text-default:#222222;--color-text-muted:#8C7B6B;--color-border:#DDD0B3;--color-success:#3A8C5C;--color-success-light:#D4EDDF;--color-danger:#C0392B;--color-danger-light:#FAD7D4;--color-disabled:#B0A89A}.labx-bg-surface{background-color:var(--color-bg-surface)}.labx-bg-light{background-color:var(--color-bg-light)}.labx-bg-subtle{background-color:var(--color-bg-subtle)}.labx-bg-primary{background-color:var(--color-primary)}.labx-bg-success{background-color:var(--color-success-light)}.labx-bg-danger{background-color:var(--color-danger-light)}.labx-text-default{color:var(--color-text-default)}.labx-text-muted{color:var(--color-text-muted)}.labx-text-primary{color:var(--color-primary)}.labx-text-success{color:var(--color-success)}.labx-text-danger{color:var(--color-danger)}.labx-text-disabled{color:var(--color-disabled)}.labx-border{border:1px solid var(--color-border)}.labx-border-primary{border:1px solid var(--color-primary)}.labx-border-success{border:1px solid var(--color-success)}.labx-border-danger{border:1px solid var(--color-danger)}";function t(e,t,n){const o="undefined"!=typeof HTMLElement?HTMLElement.prototype:null;for(;e&&e!==o;){const o=Object.getOwnPropertyDescriptor(e,t);if(o&&(!n||o.get))return o;e=Object.getPrototypeOf(e)}}var n,o=(e,n)=>{var o;Object.entries(null!=(o=n.o.t)?o:{}).map((([o,[l]])=>{if(31&l||32&l){const l=e[o],r=t(Object.getPrototypeOf(e),o,!0)||Object.getOwnPropertyDescriptor(e,o);r&&Object.defineProperty(e,o,{get(){return r.get.call(this)},set(e){r.set.call(this,e)},configurable:!0,enumerable:!0}),n.l.has(o)?e[o]=n.l.get(o):void 0!==l&&(e[o]=l)}}))},l=e=>{if(e.__stencil__getHostRef)return e.__stencil__getHostRef()},r=(e,t)=>t in e,s=(e,t)=>(0,console.error)(e,t),c=new Map,i="undefined"!=typeof window?window:{},a=i.HTMLElement||class{},u={i:0,u:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,o)=>e.addEventListener(t,n,o),rel:(e,t,n,o)=>e.removeEventListener(t,n,o),ce:(e,t)=>new CustomEvent(e,t)},f=(()=>{try{return!!i.document.adoptedStyleSheets&&(new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync)}catch(e){}return!1})(),d=!!f&&(()=>!!i.document&&Object.getOwnPropertyDescriptor(i.document.adoptedStyleSheets,"length").writable)(),b=!1,p=[],h=[],m=(e,t)=>n=>{e.push(n),b||(b=!0,t&&4&u.i?y(v):u.raf(v))},g=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){s(e)}e.length=0},v=()=>{g(p),g(h),(b=p.length>0)&&u.raf(v)},y=e=>Promise.resolve(undefined).then(e),$=m(h,!0),x=e=>{const t=new URL(e,u.u);return t.origin!==i.location.origin?t.href:t.pathname},w=e=>u.u=e;function j(){var t;const o=this.attachShadow({mode:"open"});if(void 0===n&&(n=null!=(t=function(e){if(!f)return;const t=new CSSStyleSheet;return t.replaceSync(e),t}(e))?t:null),n)d?o.adoptedStyleSheets.push(n):o.adoptedStyleSheets=[...o.adoptedStyleSheets,n];else if(!f){const t=document.createElement("style");t.innerHTML=e,o.prepend(t)}}var S,O=new WeakMap,k=e=>"sc-"+e.p,E=e=>"object"==(e=typeof e)||"function"===e,A=(e,t,...n)=>{let o=null,l=null,r=!1,s=!1;const c=[],i=t=>{for(let n=0;n<t.length;n++)o=t[n],Array.isArray(o)?i(o):null!=o&&"boolean"!=typeof o&&((r="function"!=typeof e&&!E(o))&&(o=String(o)),r&&s?c[c.length-1].h+=o:c.push(r?C(null,o):o),s=r)};if(i(n),t){t.key&&(l=t.key);{const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}}const a=C(e,null);return a.m=t,c.length>0&&(a.v=c),a.$=l,a},C=(e,t)=>({i:0,j:e,h:null!=t?t:null,S:null,v:null,m:null,$:null}),D={},F=(e,t)=>null==e||E(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?"string"==typeof e?parseFloat(e):"number"==typeof e?e:NaN:1&t?String(e):e,M=(e,t)=>{const n=e;return{emit:e=>L(n,t,{bubbles:!0,composed:!0,cancelable:!0,detail:e})}},L=(e,t,n)=>{const o=u.ce(t,n);return e.dispatchEvent(o),o},N=(e,t,n,o,s,c)=>{if(n===o)return;let a=r(e,t),f=t.toLowerCase();if("class"===t){const t=e.classList,l=B(n);let r=B(o);t.remove(...l.filter((e=>e&&!r.includes(e)))),t.add(...r.filter((e=>e&&!l.includes(e))))}else if("style"===t){for(const t in n)o&&null!=o[t]||(t.includes("-")?e.style.removeProperty(t):e.style[t]="");for(const t in o)n&&o[t]===n[t]||(t.includes("-")?e.style.setProperty(t,o[t]):e.style[t]=o[t])}else if("key"===t);else if(e.__lookupSetter__(t)||"o"!==t[0]||"n"!==t[1]){if("a"===t[0]&&t.startsWith("attr:")){const n=t.slice(5);let r;{const t=l(e);if(t&&t.o&&t.o.t){const e=t.o.t[n];e&&e[1]&&(r=e[1])}}return r||(r=n.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()),void(null==o||!1===o?!1===o&&""!==e.getAttribute(r)||e.removeAttribute(r):e.setAttribute(r,!0===o?"":o))}if("p"===t[0]&&t.startsWith("prop:")){const n=t.slice(5);try{e[n]=o}catch(e){}return}{const l=E(o);if((a||l&&null!==o)&&!s)try{if(e.tagName.includes("-"))e[t]!==o&&(e[t]=o);else{const l=null==o?"":o;"list"===t?a=!1:null!=n&&e[t]===l||("function"==typeof e.__lookupSetter__(t)?e[t]=l:e.setAttribute(t,l))}}catch(e){}null==o||!1===o?!1===o&&""!==e.getAttribute(t)||e.removeAttribute(t):(!a||4&c||s)&&!l&&1===e.nodeType&&e.setAttribute(t,o=!0===o?"":o)}}else if(t="-"===t[2]?t.slice(3):r(i,f)?f.slice(2):f[2]+t.slice(3),n||o){const l=t.endsWith(H);t=t.replace(P,""),n&&u.rel(e,t,n,l),o&&u.ael(e,t,o,l)}},_=/\s/,B=e=>("object"==typeof e&&e&&"baseVal"in e&&(e=e.baseVal),e&&"string"==typeof e?e.split(_):[]),H="Capture",P=new RegExp(H+"$"),R=(e,t,n)=>{const o=11===t.S.nodeType&&t.S.host?t.S.host:t.S,l=e&&e.m||{},r=t.m||{};for(const e of U(Object.keys(l)))e in r||N(o,e,l[e],void 0,n,t.i);for(const e of U(Object.keys(r)))N(o,e,l[e],r[e],n,t.i)};function U(e){return e.includes("ref")?[...e.filter((e=>"ref"!==e)),"ref"]:e}var W=!1,V=!1,q=(e,t,n)=>{const o=t.v[n];let l,r,s=0;if(null!=o.h)l=o.S=i.document.createTextNode(o.h);else{if(!i.document)throw new Error("You are trying to render a Stencil component in an environment that doesn't support the DOM.");if(l=o.S=i.document.createElement(o.j),R(null,o,V),o.v){const t="template"===o.j?l.content:l;for(s=0;s<o.v.length;++s)r=q(e,o,s),r&&t.appendChild(r)}}return l["s-hn"]=S,l},z=(e,t,n,o,l,r)=>{let s,c=e;for(c.shadowRoot&&c.tagName===S&&(c=c.shadowRoot),"template"===n.j&&(c=c.content);l<=r;++l)o[l]&&(s=q(null,n,l),s&&(o[l].S=s,G(c,s,t)))},T=(e,t,n)=>{for(let o=t;o<=n;++o){const t=e[o];if(t){const e=t.S;e&&e.remove()}}},Y=(e,t,n=!1)=>e.j===t.j&&(n?(n&&!e.$&&t.$&&(e.$=t.$),!0):e.$===t.$),Z=(e,t,n=!1)=>{const o=t.S=e.S,l=e.v,r=t.v,s=t.h;null==s?("slot"!==t.j||W||e.O!==t.O&&(t.S["s-sn"]=t.O||"",(e=>{u.i|=1;const t=e.closest(S.toLowerCase());if(null!=t){const n=Array.from(t.__childNodes||t.childNodes).find((e=>e["s-cr"])),o=Array.from(e.__childNodes||e.childNodes);for(const e of n?o.reverse():o)null!=e["s-sh"]&&(G(t,e,null!=n?n:null),e["s-sh"]=void 0)}u.i&=-2})(t.S.parentElement)),R(e,t,V),null!==l&&null!==r?((e,t,n,o,l=!1)=>{let r,s,c=0,i=0,a=0,u=0,f=t.length-1,d=t[0],b=t[f],p=o.length-1,h=o[0],m=o[p];const g="template"===n.j?e.content:e;for(;c<=f&&i<=p;)if(null==d)d=t[++c];else if(null==b)b=t[--f];else if(null==h)h=o[++i];else if(null==m)m=o[--p];else if(Y(d,h,l))Z(d,h,l),d=t[++c],h=o[++i];else if(Y(b,m,l))Z(b,m,l),b=t[--f],m=o[--p];else if(Y(d,m,l))Z(d,m,l),G(g,d.S,b.S.nextSibling),d=t[++c],m=o[--p];else if(Y(b,h,l))Z(b,h,l),G(g,b.S,d.S),b=t[--f],h=o[++i];else{for(a=-1,u=c;u<=f;++u)if(t[u]&&null!==t[u].$&&t[u].$===h.$){a=u;break}a>=0?(s=t[a],s.j!==h.j?r=q(t&&t[i],n,a):(Z(s,h,l),t[a]=void 0,r=s.S),h=o[++i]):(r=q(t&&t[i],n,i),h=o[++i]),r&&G(d.S.parentNode,r,d.S)}c>f?z(e,null==o[p+1]?null:o[p+1].S,n,o,i,p):i>p&&T(t,c,f)})(o,l,t,r,n):null!==r?(null!==e.h&&(o.textContent=""),z(o,null,t,r,0,r.length-1)):!n&&null!==l&&T(l,0,l.length-1)):e.h!==s&&(o.data=s)},G=(e,t,n)=>e.__insertBefore?e.__insertBefore(t,n):null==e?void 0:e.insertBefore(t,n),I=(e,t,n=!1)=>{const o=e.$hostElement$,l=e.o,r=e.k||C(null,null);var s;const c=(s=t)&&s.j===D?t:A(null,null,t);if(S=o.tagName,l.A&&(c.m=c.m||{},l.A.forEach((([e,t])=>{c.m[t]=o[e]}))),n&&c.m)for(const e of Object.keys(c.m))o.hasAttribute(e)&&!["key","ref","style","class"].includes(e)&&(c.m[e]=o[e]);c.j=null,c.i|=4,e.k=c,c.S=r.S=o.shadowRoot||o,W=!(!(1&l.i)||128&l.i),Z(r,c,n)},J=(e,t)=>{if(t&&!e.C&&t["s-p"]){const n=t["s-p"].push(new Promise((o=>e.C=()=>{t["s-p"].splice(n-1,1),o()})))}},K=(e,t)=>{if(e.i|=16,4&e.i)return void(e.i|=512);J(e,e.D);const n=()=>Q(e,t);if(!t)return $(n);queueMicrotask((()=>{n()}))},Q=(e,t)=>{const n=e.$hostElement$,o=n;if(!o)throw new Error(`Can't render component <${n.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);let l;return l=re(o,t?"componentWillLoad":"componentWillUpdate",void 0,n),l=X(l,(()=>re(o,"componentWillRender",void 0,n))),X(l,(()=>te(e,o,t)))},X=(e,t)=>ee(e)?e.then(t).catch((e=>{console.error(e),t()})):t(),ee=e=>e instanceof Promise||e&&e.then&&"function"==typeof e.then,te=async(e,t,n)=>{var o;const l=e.$hostElement$,r=l["s-rc"];n&&(e=>{const t=e.o,n=e.$hostElement$,o=t.i,l=((e,t)=>{var n,o,l;const r=k(t),s=c.get(r);if(!i.document)return r;if(e=11===e.nodeType?e:i.document,s)if("string"==typeof s){let l,c=O.get(e=e.head||e);if(c||O.set(e,c=new Set),!c.has(r)){l=i.document.createElement("style"),l.textContent=s;const a=null!=(n=u.F)?n:function(){var e,t,n;return null!=(n=null==(t=null==(e=i.document.head)?void 0:e.querySelector('meta[name="csp-nonce"]'))?void 0:t.getAttribute("content"))?n:void 0}();if(null!=a&&l.setAttribute("nonce",a),!(1&t.i))if("HEAD"===e.nodeName){const t=e.querySelectorAll("link[rel=preconnect]"),n=t.length>0?t[t.length-1].nextSibling:e.querySelector("style");e.insertBefore(l,(null==n?void 0:n.parentNode)===e?n:null)}else if("host"in e)if(f){const t=new(null!=(o=e.defaultView)?o:e.ownerDocument.defaultView).CSSStyleSheet;t.replaceSync(s),d?e.adoptedStyleSheets.unshift(t):e.adoptedStyleSheets=[t,...e.adoptedStyleSheets]}else{const t=e.querySelector("style");t?t.textContent=s+t.textContent:e.prepend(l)}else e.append(l);1&t.i&&e.insertBefore(l,null),4&t.i&&(l.textContent+="slot-fb{display:contents}slot-fb[hidden]{display:none}"),c&&c.add(r)}}else{let t=O.get(e);if(t||O.set(e,t=new Set),!t.has(r)){const n=null!=(l=e.defaultView)?l:e.ownerDocument.defaultView;let o;if(s.constructor===n.CSSStyleSheet)o=s;else{o=new n.CSSStyleSheet;for(let e=0;e<s.cssRules.length;e++)o.insertRule(s.cssRules[e].cssText,e)}d?e.adoptedStyleSheets.push(o):e.adoptedStyleSheets=[...e.adoptedStyleSheets,o],t.add(r)}}return r})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&o&&(n["s-sc"]=l,n.classList.add(l+"-h"))})(e);ne(e,t,l,n),r&&(r.map((e=>e())),l["s-rc"]=void 0);{const t=null!=(o=l["s-p"])?o:[],n=()=>oe(e);0===t.length?n():(Promise.all(t).then(n).catch(n),e.i|=4,t.length=0)}},ne=(e,t,n,o)=>{try{t=t.render(),e.i&=-17,e.i|=2,I(e,t,o)}catch(t){s(t,e.$hostElement$)}return null},oe=e=>{const t=e.$hostElement$,n=t,o=e.D;re(n,"componentDidRender",void 0,t),64&e.i?re(n,"componentDidUpdate",void 0,t):(e.i|=64,se(t),re(n,"componentDidLoad",void 0,t),e.M(t),o||le()),e.C&&(e.C(),e.C=void 0),512&e.i&&y((()=>K(e,!1))),e.i&=-517},le=()=>{y((()=>L(i,"appload",{detail:{namespace:"labx-components"}})))},re=(e,t,n,o)=>{if(e&&e[t])try{return e[t](n)}catch(e){s(e,o)}},se=e=>e.classList.add("hydrated"),ce=(e,t,n,o)=>{const r=l(e);if(!r)return;const s=e,c=r.l.get(t),i=r.i,a=s;n=F(n,o.t[t][0]);const u=Number.isNaN(c)&&Number.isNaN(n);if(n!==c&&!u&&(r.l.set(t,n),2&i)){if(a.componentShouldUpdate&&!1===a.componentShouldUpdate(n,c,t)&&!(16&i))return;16&i||K(r,!1)}},ie=(e,n)=>{var o,r;const s=e.prototype;if(n.t){const c=Object.entries(null!=(o=n.t)?o:{});c.map((([e,[o]])=>{if(31&o||32&o){const{get:r,set:c}=t(s,e)||{};r&&(n.t[e][0]|=2048),c&&(n.t[e][0]|=4096),Object.defineProperty(s,e,{get(){return r?r.apply(this):(t=e,l(this).l.get(t));var t},configurable:!0,enumerable:!0}),Object.defineProperty(s,e,{set(t){const r=l(this);if(r){if(c)return void 0===(32&o?this[e]:r.$hostElement$[e])&&r.l.get(e)&&(t=r.l.get(e)),c.apply(this,[F(t,o)]),void ce(this,e,t=32&o?this[e]:r.$hostElement$[e],n);ce(this,e,t,n)}}})}}));{const t=new Map;s.attributeChangedCallback=function(e,o,r){u.jmp((()=>{var i;const a=t.get(e),u=l(this);if(this.hasOwnProperty(a),s.hasOwnProperty(a)&&"number"==typeof this[a]&&this[a]==r)return;if(null==a){const t=null==u?void 0:u.i;if(u&&t&&!(8&t)&&r!==o){const l=this,s=null==(i=n.L)?void 0:i[e];null==s||s.forEach((n=>{const[[s,c]]=Object.entries(n);null!=l[s]&&(128&t||1&c)&&l[s].call(l,r,o,e)}))}return}const f=c.find((([e])=>e===a));f&&4&f[1][0]&&(r=null!==r&&"false"!==r);const d=Object.getOwnPropertyDescriptor(s,a);r==this[a]||d.get&&!d.set||(this[a]=r)}))},e.observedAttributes=Array.from(new Set([...Object.keys(null!=(r=n.L)?r:{}),...c.filter((([e,t])=>31&t[0])).map((([e,o])=>{var l;const r=o[1]||e;return t.set(r,e),512&o[0]&&(null==(l=n.A)||l.push([e,r])),r}))]))}}return e},ae=(e,t)=>{const n={i:t[0],p:t[1]};try{n.t=t[2],n.A=[];const r=e.prototype.connectedCallback,i=e.prototype.disconnectedCallback;return Object.assign(e.prototype,{__hasHostListenerAttached:!1,__registerHost(){((e,t)=>{const n={i:0,$hostElement$:e,o:t,l:new Map,N:new Map};n._=new Promise((e=>n.M=e)),e["s-p"]=[],e["s-rc"]=[];const l=n;e.__stencil__getHostRef=()=>l,512&t.i&&o(e,n)})(this,n)},connectedCallback(){if(!this.__hasHostListenerAttached){if(!l(this))return;this.__hasHostListenerAttached=!0}(e=>{if(!(1&u.i)){const t=l(e);if(!t)return;const n=t.o,o=()=>{};if(1&t.i)(null==t?void 0:t.B)||(null==t?void 0:t._)&&t._.then((()=>{}));else{t.i|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){J(t,t.D=n);break}}n.t&&Object.entries(n.t).map((([t,[n]])=>{if(31&n&&Object.prototype.hasOwnProperty.call(e,t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n)=>{let o;try{if(!(32&t.i)&&(t.i|=32,o=e.constructor,customElements.whenDefined(e.localName).then((()=>t.i|=128)),o&&o.style)){let e;"string"==typeof o.style&&(e=o.style);const t=k(n);if(!c.has(t)){const o=()=>{};((e,t,n)=>{let o=c.get(e);f&&n?(o=o||new CSSStyleSheet,"string"==typeof o?o=t:o.replaceSync(t)):o=t,c.set(e,o)})(t,e,!!(1&n.i)),o()}}const l=t.D,r=()=>K(t,!0);l&&l["s-rc"]?l["s-rc"].push(r):r()}catch(n){s(n,e),t.C&&(t.C(),t.C=void 0),t.M&&t.M(e)}})(e,t,n)}o()}})(this),r&&r.call(this)},disconnectedCallback(){(async e=>{1&u.i||l(e),O.has(e)&&O.delete(e),e.shadowRoot&&O.has(e.shadowRoot)&&O.delete(e.shadowRoot)})(this),i&&i.call(this)},__attachShadow(){if(this.shadowRoot){if("open"!==this.shadowRoot.mode)throw new Error(`Unable to re-use existing shadow root for ${n.p}! Mode is set to ${this.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else j.call(this,n)}}),Object.defineProperty(e,"is",{value:n.p,configurable:!0}),ie(e,n)}catch(t){return s(t),e}},ue=e=>u.F=e,fe=e=>Object.assign(u,e);function de(e,t){I({o:{i:0,p:t.tagName},$hostElement$:t},e)}function be(e){return e}export{a as H,ue as a,fe as b,M as c,D as d,x as g,A as h,ae as p,de as r,w as s,be as t}