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

package/dist/components/p-toggle.js

@@ -0,0 +1,169 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as cva } from './index2.js';
+import { n as nonce } from './nonce.js';
+
+const toggleComponentCss = "*{box-sizing:border-box}.pointer-events-none{pointer-events:none!important}.static{position:static!important}.absolute{position:absolute!important}.relative{position:relative!important}.left-\\[1px\\]{left:1px!important}.left-\\[2px\\]{left:2px!important}.top-1\\/2{top:50%!important}.m-0{margin:0!important}.flex{display:flex!important}.h-3{height:.75rem!important}.h-4{height:1rem!important}.h-6{height:1.5rem!important}.h-\\[14px\\]{height:14px!important}.h-\\[20px\\]{height:20px!important}.h-\\[22px\\]{height:22px!important}.w-10{width:2.5rem!important}.w-3{width:.75rem!important}.w-8{width:2rem!important}.w-\\[14px\\]{width:14px!important}.w-\\[20px\\]{width:20px!important}.w-\\[22px\\]{width:22px!important}.flex-shrink-0{flex-shrink:0!important}.-translate-y-1\\/2{--tw-translate-y:-50%!important}.-translate-y-1\\/2,.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}.justify-center{justify-content:center!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-black-teal-100{--tw-bg-opacity:1!important;background-color:rgb(205 212 211/var(--tw-bg-opacity,1))!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}.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}.ring-black-teal\\/10{--tw-ring-color:rgba(3,42,36,.1)!important}.transition-all{transition-duration:.15s!important;transition-property:all!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.after\\:h-1:after{content:var(--tw-content)!important;height:.25rem!important}.after\\:h-2:after{content:var(--tw-content)!important;height:.5rem!important}.after\\:w-1:after{content:var(--tw-content)!important;width:.25rem!important}.after\\:w-2:after{content:var(--tw-content)!important;width:.5rem!important}.after\\:rounded-full:after{border-radius:9999px!important;content:var(--tw-content)!important}.after\\:bg-supportive-lilac-800:after{--tw-bg-opacity:1!important;background-color:rgb(189 140 255/var(--tw-bg-opacity,1))!important;content:var(--tw-content)!important}.after\\:transition-all:after{content:var(--tw-content)!important;transition-duration:.15s!important;transition-property:all!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.after\\:content-\\[\\'\\'\\]:after{--tw-content:\"\"!important;content:var(--tw-content)!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}.group:hover .group-hover\\:w-\\[18px\\]{width:18px!important}.group:hover .group-hover\\:w-\\[26px\\]{width:26px!important}.group:hover .group-hover\\:after\\:w-2:after{content:var(--tw-content)!important;width:.5rem!important}.group:hover .group-hover\\:after\\:w-3:after{content:var(--tw-content)!important;width:.75rem!important}.peer:checked~.peer-checked\\:left-full{left:100%!important}.peer:checked~.peer-checked\\:-translate-x-\\[calc\\(100\\%\\+1px\\)\\]{--tw-translate-x:calc(-100% - 1px)!important}.peer:checked~.peer-checked\\:-translate-x-\\[calc\\(100\\%\\+1px\\)\\],.peer:checked~.peer-checked\\:-translate-x-\\[calc\\(100\\%\\+2px\\)\\]{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}.peer:checked~.peer-checked\\:-translate-x-\\[calc\\(100\\%\\+2px\\)\\]{--tw-translate-x:calc(-100% - 2px)!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}";
+const PToggleStyle0 = toggleComponentCss;
+
+const checkbox = cva([
+    'peer appearance-none m-0 outline-none flex-shrink-0',
+    'border border-inset border-solid ',
+], {
+    variants: {
+        size: {
+            sm: 'rounded-full w-8 h-4',
+            base: 'rounded-full w-10 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: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 = cva([
+    'flex items-center justify-center',
+    'rounded-full transition-all ',
+    'absolute top-1/2  peer-checked:left-full  transform -translate-y-1/2 pointer-events-none',
+], {
+    variants: {
+        size: {
+            sm: null,
+            base: null,
+        },
+        disabled: {
+            false: [
+                'bg-white ring-1 ring-black-teal/10',
+                'left-[1px] peer-checked:-translate-x-[calc(100%+1px)]',
+                "after:content-[''] after:bg-supportive-lilac-800 after:rounded-full after:transition-all",
+            ],
+            true: [
+                'bg-black-teal-100 peer-checked:bg-black-teal-200',
+                'left-[2px] peer-checked:-translate-x-[calc(100%+2px)]',
+            ],
+        },
+    },
+    compoundVariants: [
+        {
+            size: 'sm',
+            disabled: false,
+            class: [
+                'w-[14px] h-[14px] group-hover:w-[18px]',
+                'after:w-1 after:h-1 group-hover:after:w-2',
+            ],
+        },
+        {
+            size: 'base',
+            disabled: false,
+            class: [
+                'w-[22px] h-[22px] group-hover:w-[26px]',
+                'after:w-2 after:h-2 group-hover:after:w-3',
+            ],
+        },
+        {
+            size: 'sm',
+            disabled: true,
+            class: 'w-3 h-3',
+        },
+        {
+            size: 'base',
+            disabled: true,
+            class: 'w-[20px] h-[20px]',
+        },
+    ],
+});
+const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.checkedChange = createEvent(this, "checkedChange", 7);
+        this.indeterminateChange = createEvent(this, "indeterminateChange", 7);
+        this.checked = undefined;
+        this.indeterminate = undefined;
+        this.size = 'base';
+        this.disabled = false;
+        this.required = true;
+        this.id = undefined;
+        this.name = undefined;
+        this._nonce = nonce(5);
+    }
+    /**
+     * Event whenever the checked changes
+     */
+    checkedChange;
+    /**
+     * Event whenever the indeterminate changes
+     */
+    indeterminateChange;
+    render() {
+        return (h(Host, { key: '665a9617a9ab6f36f84bb2431a1aae0b873acfab', class: 'p-checkbox' }, h("label", { key: 'f9090b0b5cc6ca14c09a43e53f01bef33e411e5f', htmlFor: this.id ?? this._nonce, class: 'flex items-center justify-start gap-2 text-black-teal' }, h("div", { key: '9a47bbc17f2efb2cf196c558b67837b73531f02f', class: 'group relative flex flex-shrink-0 items-center' }, h("input", { key: 'aead176166d2cc5799d3756076d9ed4085d67637', class: checkbox({
+                size: this.size,
+                disabled: this.disabled,
+            }), type: 'checkbox', id: this.id ?? this._nonce, name: this.name, required: this.required, checked: !!this.checked, indeterminate: this.indeterminate, disabled: this.disabled, onChange: ev => this._onChange(ev) }), h("div", { key: 'f73eab7f22090288618a5e71f1a0ca9d7aa92733', class: circle({
+                size: this.size,
+                disabled: this.disabled,
+            }) })), h("slot", { key: 'dbd72bce56cdad804076b3a51c921a877530ec8a' }))));
+    }
+    _onChange(ev) {
+        if (this.disabled) {
+            ev.preventDefault();
+            return;
+        }
+        const checked = ev.target.checked;
+        const indeterminate = ev.target.indeterminate;
+        if (checked != this.checked) {
+            this.checked = checked;
+            this.checkedChange.emit(checked);
+        }
+        if (indeterminate != this.indeterminate) {
+            this.indeterminate = indeterminate;
+            this.indeterminateChange.emit(indeterminate);
+        }
+    }
+    static get style() { return PToggleStyle0; }
+}, [4, "p-toggle", {
+        "checked": [4],
+        "indeterminate": [4],
+        "size": [1],
+        "disabled": [516],
+        "required": [516],
+        "id": [513],
+        "name": [513],
+        "_nonce": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["p-toggle"];
+    components.forEach(tagName => { switch (tagName) {
+        case "p-toggle":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Toggle);
+            }
+            break;
+    } });
+}
+
+const PToggle = Toggle;
+const defineCustomElement = defineCustomElement$1;
+
+export { PToggle, defineCustomElement };
+
+//# sourceMappingURL=p-toggle.js.map

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

@@ -0,0 +1 @@
+{"file":"p-toggle.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,ykMAAykM,CAAC;AACrmM,sBAAe,kBAAkB;;ACWjC,MAAM,QAAQ,GAAG,GAAG,CACnB;IACC,qDAAqD;IACrD,mCAAmC;CACnC,EACD;IACC,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,EAAE,EAAE,sBAAsB;YAC1B,IAAI,EAAE,uBAAuB;SAC7B;QACD,QAAQ,EAAE;YACT,KAAK,EAAE;gBACN,yBAAyB;gBACzB,gCAAgC;gBAChC,4DAA4D;gBAC5D,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,GAAG,GAAG,CACjB;IACC,kCAAkC;IAClC,8BAA8B;IAC9B,0FAA0F;CAC1F,EACD;IACC,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,EAAE,EAAE,IAAI;YACR,IAAI,EAAE,IAAI;SACV;QACD,QAAQ,EAAE;YACT,KAAK,EAAE;gBACN,oCAAoC;gBACpC,uDAAuD;gBACvD,0FAA0F;aAC1F;YACD,IAAI,EAAE;gBACL,kDAAkD;gBAClD,uDAAuD;aACvD;SACD;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE;gBACN,wCAAwC;gBACxC,2CAA2C;aAC3C;SACD;QACD;YACC,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE;gBACN,wCAAwC;gBACxC,2CAA2C;aAC3C;SACD;QAED;YACC,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,SAAS;SAChB;QACD;YACC,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,mBAAmB;SAC1B;KACD;CACD,CACD,CAAC;MAMW,MAAM;;;;;;;;oBAcY,MAAM;wBAKS,KAAK;wBAKL,IAAI;;;sBAqBvB,KAAK,CAAC,CAAC,CAAC;;;;;IANzB,aAAa,CAAwB;;;;IAIrC,mBAAmB,CAAwB;IAIpD,MAAM;QACL,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,YAAY,IACvB,8DACC,OAAO,EAAE,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,MAAM,EAC/B,KAAK,EAAC,uDAAuD,IAE7D,4DAAK,KAAK,EAAC,gDAAgD,IAC1D,8DACC,KAAK,EAAE,QAAQ,CAAC;gBACf,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACvB,CAAC,EACF,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,MAAM,EAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,GACjC,EACF,4DACC,KAAK,EAAE,MAAM,CAAC;gBACb,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACvB,CAAC,GACI,CACF,EACN,8DAAa,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,MAAM,aAAa,GAAI,EAAE,CAAC,MAA2B,CAAC,aAAa,CAAC;QAEpE,IAAI,OAAO,IAAI,IAAI,CAAC,OAAO,EAAE;YAC5B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;YACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SACjC;QAED,IAAI,aAAa,IAAI,IAAI,CAAC,aAAa,EAAE;YACxC,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;YACnC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAC7C;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/toggle/toggle.component.css?tag=p-toggle","src/components/atoms/toggle/toggle.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 checkbox = cva(\n\t[\n\t\t'peer appearance-none m-0 outline-none flex-shrink-0',\n\t\t'border border-inset border-solid ',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: 'rounded-full w-8 h-4',\n\t\t\t\tbase: 'rounded-full w-10 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: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'flex items-center justify-center',\n\t\t'rounded-full transition-all ',\n\t\t'absolute top-1/2  peer-checked:left-full  transform -translate-y-1/2 pointer-events-none',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: null,\n\t\t\t\tbase: null,\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\tfalse: [\n\t\t\t\t\t'bg-white ring-1 ring-black-teal/10',\n\t\t\t\t\t'left-[1px] peer-checked:-translate-x-[calc(100%+1px)]',\n\t\t\t\t\t\"after:content-[''] after:bg-supportive-lilac-800 after:rounded-full after:transition-all\",\n\t\t\t\t],\n\t\t\t\ttrue: [\n\t\t\t\t\t'bg-black-teal-100 peer-checked:bg-black-teal-200',\n\t\t\t\t\t'left-[2px] peer-checked:-translate-x-[calc(100%+2px)]',\n\t\t\t\t],\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tsize: 'sm',\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: [\n\t\t\t\t\t'w-[14px] h-[14px] group-hover:w-[18px]',\n\t\t\t\t\t'after:w-1 after:h-1 group-hover:after:w-2',\n\t\t\t\t],\n\t\t\t},\n\t\t\t{\n\t\t\t\tsize: 'base',\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: [\n\t\t\t\t\t'w-[22px] h-[22px] group-hover:w-[26px]',\n\t\t\t\t\t'after:w-2 after:h-2 group-hover:after:w-3',\n\t\t\t\t],\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tsize: 'sm',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'w-3 h-3',\n\t\t\t},\n\t\t\t{\n\t\t\t\tsize: 'base',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'w-[20px] h-[20px]',\n\t\t\t},\n\t\t],\n\t}\n);\n\n@Component({\n\ttag: 'p-toggle',\n\tstyleUrl: 'toggle.component.css',\n})\nexport class Toggle {\n\t/**\n\t * Wether the checkbox is checked\n\t */\n\t@Prop() checked: boolean;\n\n\t/**\n\t * Wether the checkbox is in indeterminate state\n\t */\n\t@Prop() indeterminate: boolean;\n\n\t/**\n\t * The size of the checkbox\n\t */\n\t@Prop() size: 'sm' | 'base' = 'base';\n\n\t/**\n\t * Wether the checkbox is disabled\n\t */\n\t@Prop({ reflect: true }) disabled: boolean = false;\n\n\t/**\n\t * Wether the checkbox is required\n\t */\n\t@Prop({ reflect: true }) required: boolean = true;\n\n\t/**\n\t * The id of the checkbox button\n\t */\n\t@Prop({ reflect: true }) id: string;\n\n\t/**\n\t * The name of the checkbox button\n\t */\n\t@Prop({ reflect: true }) name: string;\n\n\t/**\n\t * Event whenever the checked changes\n\t */\n\t@Event() checkedChange: EventEmitter<boolean>;\n\t/**\n\t * Event whenever the indeterminate changes\n\t */\n\t@Event() indeterminateChange: EventEmitter<boolean>;\n\n\t@State() private _nonce = nonce(5);\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-checkbox'>\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='group relative flex flex-shrink-0 items-center'>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclass={checkbox({\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='checkbox'\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\tchecked={!!this.checked}\n\t\t\t\t\t\t\tindeterminate={this.indeterminate}\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></div>\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\tconst indeterminate = (ev.target as HTMLInputElement).indeterminate;\n\n\t\tif (checked != this.checked) {\n\t\t\tthis.checked = checked;\n\t\t\tthis.checkedChange.emit(checked);\n\t\t}\n\n\t\tif (indeterminate != this.indeterminate) {\n\t\t\tthis.indeterminate = indeterminate;\n\t\t\tthis.indeterminateChange.emit(indeterminate);\n\t\t}\n\t}\n}\n"],"version":3}

package/dist/components/page-size-select.component.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { f as formatTranslation, g as getLocaleComponentStrings } from './localization.js';
-import { d as defineCustomElement$7 } from './button.component.js';
+import { d as defineCustomElement$8 } from './button.component.js';
+import { d as defineCustomElement$7 } from './checkbox.component.js';
 import { d as defineCustomElement$6 } from './dropdown.component.js';
 import { d as defineCustomElement$5 } from './dropdown-menu-container.component.js';
 import { d as defineCustomElement$4 } from './dropdown-menu-item.component.js';
@@ -67,7 +68,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["p-page-size-select", "p-button", "p-dropdown", "p-dropdown-menu-container", "p-dropdown-menu-item", "p-icon", "p-loader", "p-portal"];
+    const components = ["p-page-size-select", "p-button", "p-checkbox", "p-dropdown", "p-dropdown-menu-container", "p-dropdown-menu-item", "p-icon", "p-loader", "p-portal"];
     components.forEach(tagName => { switch (tagName) {
         case "p-page-size-select":
             if (!customElements.get(tagName)) {
@@ -75,6 +76,11 @@ function defineCustomElement() {
             }
             break;
         case "p-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "p-checkbox":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }

package/dist/components/page-size-select.component.js.map

@@ -1 +1 @@
-{"file":"page-size-select.component.js","mappings":";;;;;;;;;;MAAa,WAAW,GAAG,GAAG;MACjB,kBAAkB,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG;;MCsBrC,cAAc;;;;;;oBAQ6B,WAAW;2BAKlC,kBAAkB;+BAaP,OAAO;0BAKd,IAAI;8BAKD,IAAI,CAAC,sBAAsB;4BAK7B,IAAI,CAAC,oBAAoB;sBAUpC,KAAK;wBAKE,EAAE;;IAvD3B,sBAAsB,GAAiB,IAAI,IAClD,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;IACzC,oBAAoB,GAAiB,IAAI,IAChD,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;;;;IAiBjD,UAAU,CAAuB;;IAqCjC,iBAAiB;QAChB,IAAI,CAAC,WAAW,EAAE,CAAC;KACnB;IAED,MAAM;QACL,QACC,EAAC,IAAI,qDAAC,KAAK,EAAE,sBAAsB,IAAI,CAAC,MAAM,IAAI,QAAQ,EAAE,IAC3D,mEACC,SAAS,EAAC,WAAW,EACrB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,gBAAgB,EAAC,MAAM,IAEvB,iEACC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,SAAS,EACd,IAAI,EAAE,IAAI,CAAC,UAAU,IAEpB,IAAI,CAAC,cAAc;cACjB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;cAC9B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAC/B,EACX,6DAAM,IAAI,EAAC,OAAO,IAChB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,KAC3B,4BACC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC,IAAI,EAC5B,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAEtC,IAAI,CAAC,YAAY;cACf,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;cACzB,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CACd,CACvB,CAAC,CACI,CACK,CACP,EACN;KACF;IAGO,MAAM,WAAW;QACxB,IAAI,CAAC,QAAQ,GAAG,MAAM,yBAAyB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC1D;IAEO,WAAW,CAAC,CAAU;QAC7B,IAAI,CAAC,CAAC,EAAE;YACP,OAAO;SACP;QAED,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;QACd,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/molecules/page-size-select/constants.tsx","src/components/molecules/page-size-select/page-size-select.component.tsx"],"sourcesContent":["export const defaultSize = 12;\nexport const defaultSizeOptions = [12, 24, 68, 136];\n","import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\nimport {\n\tformatTranslation,\n\tgetLocaleComponentStrings,\n} from '../../../utils/localization';\nimport { defaultSize, defaultSizeOptions } from './constants';\n\nexport type templateFunc = (value: number) => string;\n\n@Component({\n\ttag: 'p-page-size-select',\n\tshadow: true,\n})\nexport class PageSizeSelect {\n\tprivate _defaultButtonTemplate: templateFunc = size =>\n\t\tformatTranslation(this._locales.item, { size });\n\tprivate _defaultItemTemplate: templateFunc = size =>\n\t\tformatTranslation(this._locales.item, { size });\n\t/**\n\t * The current page\n\t */\n\t@Prop({ mutable: true, reflect: true }) size: number = defaultSize;\n\n\t/**\n\t * The available sizes\n\t */\n\t@Prop() sizeOptions: number[] = defaultSizeOptions;\n\n\t/**\n\t * Event whenever the size changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tsizeChange: EventEmitter<number>;\n\n\t/**\n\t * Chevron position\n\t */\n\t@Prop() chevronPosition: 'start' | 'end' = 'start';\n\n\t/**\n\t * The size of the button\n\t */\n\t@Prop() buttonSize: 'sm' | 'base' = 'sm';\n\n\t/**\n\t * The template for the data view\n\t */\n\t@Prop() buttonTemplate: templateFunc = this._defaultButtonTemplate;\n\n\t/**\n\t * The template for the data view\n\t */\n\t@Prop() itemTemplate: templateFunc = this._defaultItemTemplate;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t/**\n\t * Wether to hide when there is only 1 page available\n\t */\n\t@Prop() hidden: boolean = false;\n\n\t/**\n\t * Locales used for this component\n\t */\n\t@State() private _locales: any = {};\n\n\tcomponentWillLoad() {\n\t\tthis._setLocales();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`p-page-size-select ${this.hidden && 'hidden'}`}>\n\t\t\t\t<p-dropdown\n\t\t\t\t\tplacement='top-start'\n\t\t\t\t\tchevronPosition={this.chevronPosition}\n\t\t\t\t\tchevronDirection='down'\n\t\t\t\t>\n\t\t\t\t\t<p-button\n\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\tslot='trigger'\n\t\t\t\t\t\tsize={this.buttonSize}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.buttonTemplate\n\t\t\t\t\t\t\t? this.buttonTemplate(this.size)\n\t\t\t\t\t\t\t: this._defaultButtonTemplate(this.size)}\n\t\t\t\t\t</p-button>\n\t\t\t\t\t<slot slot='items'>\n\t\t\t\t\t\t{this.sizeOptions.map(option => (\n\t\t\t\t\t\t\t<p-dropdown-menu-item\n\t\t\t\t\t\t\t\tactive={option === this.size}\n\t\t\t\t\t\t\t\tonClick={() => this._changeSize(option)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this.itemTemplate\n\t\t\t\t\t\t\t\t\t? this.itemTemplate(option)\n\t\t\t\t\t\t\t\t\t: this._defaultItemTemplate(option)}\n\t\t\t\t\t\t\t</p-dropdown-menu-item>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</slot>\n\t\t\t\t</p-dropdown>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('localeChanged', { target: 'body' })\n\tprivate async _setLocales(): Promise<void> {\n\t\tthis._locales = await getLocaleComponentStrings(this._el);\n\t}\n\n\tprivate _changeSize(s?: number) {\n\t\tif (!s) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.size = s;\n\t\tthis.sizeChange.emit(this.size);\n\t}\n}\n"],"version":3}
+{"file":"page-size-select.component.js","mappings":";;;;;;;;;;;MAAa,WAAW,GAAG,GAAG;MACjB,kBAAkB,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG;;MCsBrC,cAAc;;;;;;oBAQ6B,WAAW;2BAKlC,kBAAkB;+BAaP,OAAO;0BAKd,IAAI;8BAKD,IAAI,CAAC,sBAAsB;4BAK7B,IAAI,CAAC,oBAAoB;sBAUpC,KAAK;wBAKE,EAAE;;IAvD3B,sBAAsB,GAAiB,IAAI,IAClD,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;IACzC,oBAAoB,GAAiB,IAAI,IAChD,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;;;;IAiBjD,UAAU,CAAuB;;IAqCjC,iBAAiB;QAChB,IAAI,CAAC,WAAW,EAAE,CAAC;KACnB;IAED,MAAM;QACL,QACC,EAAC,IAAI,qDAAC,KAAK,EAAE,sBAAsB,IAAI,CAAC,MAAM,IAAI,QAAQ,EAAE,IAC3D,mEACC,SAAS,EAAC,WAAW,EACrB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,gBAAgB,EAAC,MAAM,IAEvB,iEACC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,SAAS,EACd,IAAI,EAAE,IAAI,CAAC,UAAU,IAEpB,IAAI,CAAC,cAAc;cACjB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;cAC9B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAC/B,EACX,6DAAM,IAAI,EAAC,OAAO,IAChB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,KAC3B,4BACC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC,IAAI,EAC5B,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAEtC,IAAI,CAAC,YAAY;cACf,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;cACzB,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CACd,CACvB,CAAC,CACI,CACK,CACP,EACN;KACF;IAGO,MAAM,WAAW;QACxB,IAAI,CAAC,QAAQ,GAAG,MAAM,yBAAyB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC1D;IAEO,WAAW,CAAC,CAAU;QAC7B,IAAI,CAAC,CAAC,EAAE;YACP,OAAO;SACP;QAED,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;QACd,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/molecules/page-size-select/constants.tsx","src/components/molecules/page-size-select/page-size-select.component.tsx"],"sourcesContent":["export const defaultSize = 12;\nexport const defaultSizeOptions = [12, 24, 68, 136];\n","import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\nimport {\n\tformatTranslation,\n\tgetLocaleComponentStrings,\n} from '../../../utils/localization';\nimport { defaultSize, defaultSizeOptions } from './constants';\n\nexport type templateFunc = (value: number) => string;\n\n@Component({\n\ttag: 'p-page-size-select',\n\tshadow: true,\n})\nexport class PageSizeSelect {\n\tprivate _defaultButtonTemplate: templateFunc = size =>\n\t\tformatTranslation(this._locales.item, { size });\n\tprivate _defaultItemTemplate: templateFunc = size =>\n\t\tformatTranslation(this._locales.item, { size });\n\t/**\n\t * The current page\n\t */\n\t@Prop({ mutable: true, reflect: true }) size: number = defaultSize;\n\n\t/**\n\t * The available sizes\n\t */\n\t@Prop() sizeOptions: number[] = defaultSizeOptions;\n\n\t/**\n\t * Event whenever the size changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tsizeChange: EventEmitter<number>;\n\n\t/**\n\t * Chevron position\n\t */\n\t@Prop() chevronPosition: 'start' | 'end' = 'start';\n\n\t/**\n\t * The size of the button\n\t */\n\t@Prop() buttonSize: 'sm' | 'base' = 'sm';\n\n\t/**\n\t * The template for the data view\n\t */\n\t@Prop() buttonTemplate: templateFunc = this._defaultButtonTemplate;\n\n\t/**\n\t * The template for the data view\n\t */\n\t@Prop() itemTemplate: templateFunc = this._defaultItemTemplate;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t/**\n\t * Wether to hide when there is only 1 page available\n\t */\n\t@Prop() hidden: boolean = false;\n\n\t/**\n\t * Locales used for this component\n\t */\n\t@State() private _locales: any = {};\n\n\tcomponentWillLoad() {\n\t\tthis._setLocales();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`p-page-size-select ${this.hidden && 'hidden'}`}>\n\t\t\t\t<p-dropdown\n\t\t\t\t\tplacement='top-start'\n\t\t\t\t\tchevronPosition={this.chevronPosition}\n\t\t\t\t\tchevronDirection='down'\n\t\t\t\t>\n\t\t\t\t\t<p-button\n\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\tslot='trigger'\n\t\t\t\t\t\tsize={this.buttonSize}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.buttonTemplate\n\t\t\t\t\t\t\t? this.buttonTemplate(this.size)\n\t\t\t\t\t\t\t: this._defaultButtonTemplate(this.size)}\n\t\t\t\t\t</p-button>\n\t\t\t\t\t<slot slot='items'>\n\t\t\t\t\t\t{this.sizeOptions.map(option => (\n\t\t\t\t\t\t\t<p-dropdown-menu-item\n\t\t\t\t\t\t\t\tactive={option === this.size}\n\t\t\t\t\t\t\t\tonClick={() => this._changeSize(option)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this.itemTemplate\n\t\t\t\t\t\t\t\t\t? this.itemTemplate(option)\n\t\t\t\t\t\t\t\t\t: this._defaultItemTemplate(option)}\n\t\t\t\t\t\t\t</p-dropdown-menu-item>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</slot>\n\t\t\t\t</p-dropdown>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('localeChanged', { target: 'body' })\n\tprivate async _setLocales(): Promise<void> {\n\t\tthis._locales = await getLocaleComponentStrings(this._el);\n\t}\n\n\tprivate _changeSize(s?: number) {\n\t\tif (!s) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.size = s;\n\t\tthis.sizeChange.emit(this.size);\n\t}\n}\n"],"version":3}

package/dist/components/pagination-item.component.js

@@ -11,7 +11,7 @@ const PaginationItem = /*@__PURE__*/ proxyCustomElement(class PaginationItem ext
         this.active = false;
     }
     render() {
-        return (h(Host, { key: '5df379f6f05c43ebfc4ab5445126f51d722f4a2e', class: `p-pagination-item ${this.active && 'active'}` }, h("slot", { key: '9b26d26a42d4766cc3050a851b106ad211787b30' })));
+        return (h(Host, { key: '6a4e7f7bf424e158a087b7ba5e165f0f79293157', class: `p-pagination-item ${this.active && 'active'}` }, h("slot", { key: '5fc864a64664a7ea8d45228c25b6c3fb909515ad' })));
     }
     static get style() { return PPaginationItemStyle0; }
 }, [1, "p-pagination-item", {

package/dist/components/pagination.component.js

@@ -25,7 +25,7 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
         this._generate();
     }
     render() {
-        return (h(Host, { key: '69fc6fbdb1e075358090556d764d51fe8c03953c', class: `p-pagination ${this.hideOnSinglePage && this._set?.length === 3 && 'hidden'}` }, this._set?.map(p => {
+        return (h(Host, { key: '81016401bd076834a83260a0a081fc738867c08e', class: `p-pagination ${this.hideOnSinglePage && this._set?.length === 3 && 'hidden'}` }, this._set?.map(p => {
             if (p.type === 'previous' || p.type === 'next') {
                 return (h("p-pagination-item", { onClick: () => p.type === 'previous'
                         ? this._previousClick()

package/dist/components/portal.component.js

@@ -17,7 +17,7 @@ const Portal = /*@__PURE__*/ proxyCustomElement(class Portal extends HTMLElement
         this._moved ? this._el.remove() : (this._moved = true);
     }
     render() {
-        return (h(Host, { key: '7604d2cbdf309fb03b9a051d737f2b92fa57a354' }, h("slot", { key: 'f4edec28f68504e7622f7fcffe9a80cf55501af9' })));
+        return (h(Host, { key: '04f9a6ddfe5756fff19f51575ed4869d85c756d5' }, h("slot", { key: 'ad0bd91e83e2b35f2bdb10ed17a1d77be095782d' })));
     }
 }, [4, "p-portal"]);
 function defineCustomElement() {

package/dist/components/segment-container.component.js

@@ -9,7 +9,7 @@ const SegmentContainer = /*@__PURE__*/ proxyCustomElement(class SegmentContainer
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: 'ec428b10ad23a3fff5e4aa1e1d1cd99d548a8cc8', class: "p-segment-container" }, h("slot", { key: '2d1dde7e35c55a7c3598212291d89181793e0d2a' })));
+        return (h(Host, { key: 'c8554666934a49559cb5b8a31e6d448d41445c10', class: "p-segment-container" }, h("slot", { key: 'a99446441d550c8d87e0e40a6b8cd576d4be8ba3' })));
     }
     static get style() { return PSegmentContainerStyle0; }
 }, [4, "p-segment-container"]);

package/dist/components/segment-item.component.js

@@ -22,7 +22,7 @@ const SegmentItem = /*@__PURE__*/ proxyCustomElement(class SegmentItem extends H
         this._hasDescriptionSlot = !!this._el.querySelector(':scope > [slot="description"]');
     }
     render() {
-        return (h(Host, { key: 'e97f6340c0d5ae8c03e307f7de8e62bc47d9fdbe', class: `p-segment-item variant-${this.iconOnly ? 'icon' : 'default'} ${this.active && 'active'}` }, this.icon && this._getIcon(), h("slot", { key: '579eb8460666e7c9777da7ed991fb9c68e6e139b' }), this.size === 'big' && this._hasDescriptionSlot && (h("span", { key: '46e5d72d9499462f7059a6df288a3d16bdd3d02e', class: "description" }, h("slot", { key: '830d7e3e592a8d023eebbf1a995a23235851f0ed', name: "description" })))));
+        return (h(Host, { key: '0231e33d62667c6f6baf39907c52f1d05483b777', class: `p-segment-item variant-${this.iconOnly ? 'icon' : 'default'} ${this.active && 'active'}` }, this.icon && this._getIcon(), h("slot", { key: 'b150ba986fdaef2a98661a48796bf43ff77e8c24' }), this.size === 'big' && this._hasDescriptionSlot && (h("span", { key: '78017b51faf3a96f8fc8b8d59fc9a62bec694afd', class: "description" }, h("slot", { key: '6d36db486c92e1324260ba88e91fe6d5c709798a', name: "description" })))));
     }
     _getIcon() {
         if (!this.icon) {

package/dist/components/slider-indicator.component.js

@@ -11,7 +11,7 @@ const SliderIndicator = /*@__PURE__*/ proxyCustomElement(class SliderIndicator e
         this.active = false;
     }
     render() {
-        return (h(Host, { key: '4525154d8a2fa45a67c9194601c038ce4d68d93c', class: `p-slider-indicator ${this.active && 'active'}` }));
+        return (h(Host, { key: 'b881e676d31e9db8b09093c2ad767467584194aa', class: `p-slider-indicator ${this.active && 'active'}` }));
     }
     static get style() { return PSliderIndicatorStyle0; }
 }, [1, "p-slider-indicator", {

package/dist/components/stepper-line.component.js

@@ -12,7 +12,7 @@ const StepperLine = /*@__PURE__*/ proxyCustomElement(class StepperLine extends H
         this.direction = 'horizontal';
     }
     render() {
-        return h(Host, { key: '9c523b4c1c77f12e65b9e8e97e447682089c6259', class: "p-stepper-line" });
+        return h(Host, { key: 'a098b7140c582af2edc9cdd7b4f8c37f5396223f', class: "p-stepper-line" });
     }
     static get style() { return PStepperLineStyle0; }
 }, [1, "p-stepper-line", {

package/dist/components/table-cell.component.js

@@ -33,7 +33,7 @@ const TableCell = /*@__PURE__*/ proxyCustomElement(class TableCell extends HTMLE
         };
     }
     render() {
-        return (h(Host, { key: '3cc18c25df90e5ef83bc43a9a05e167691efe61f', class: {
+        return (h(Host, { key: '9d0c40d23049e13123b42e026cf617abe4e5f5f0', class: {
                 'p-table-cell': true,
                 [`variant-${this.variant}`]: true,
                 ...this._getColumnClasses(),

package/dist/components/table-container.component.js

@@ -11,7 +11,7 @@ const TableContainer = /*@__PURE__*/ proxyCustomElement(class TableContainer ext
         this.shadow = true;
     }
     render() {
-        return (h(Host, { key: '8400210ea3f34d240b032c875ef5e86dc218e7d5', class: `p-table-container ${!this.shadow && 'no-shadow'}` }, h("slot", { key: '6abc0755ec890cd9001aef58ac24acb3f2e4f529' })));
+        return (h(Host, { key: '3093de271c11a50d334006232f4cd02a66131191', class: `p-table-container ${!this.shadow && 'no-shadow'}` }, h("slot", { key: '76d6ab8ecf532e2a4d43f6b7257135c4881176e3' })));
     }
     static get style() { return PTableContainerStyle0; }
 }, [1, "p-table-container", {

package/dist/components/table-footer.component.js

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { f as formatTranslation, g as getLocaleComponentStrings } from './localization.js';
 import { a as defaultSize, b as defaultSizeOptions, d as defineCustomElement$4 } from './page-size-select.component.js';
-import { d as defineCustomElement$a } from './button.component.js';
+import { d as defineCustomElement$b } from './button.component.js';
+import { d as defineCustomElement$a } from './checkbox.component.js';
 import { d as defineCustomElement$9 } from './dropdown.component.js';
 import { d as defineCustomElement$8 } from './dropdown-menu-container.component.js';
 import { d as defineCustomElement$7 } from './dropdown-menu-item.component.js';
@@ -51,7 +52,7 @@ const TableFooter = /*@__PURE__*/ proxyCustomElement(class TableFooter extends H
     }
     render() {
         const hidePageSizeSelect = this.hideOnSinglePage && this.total < this.pageSizeOptions?.[0];
-        return (h(Host, { key: 'de0fed44b08f46efdc56b51498c355fb2d973d5b', class: `p-table-footer ${!this.enablePageSize && 'page-size-disabled'} ${!this.enablePagination && 'pagination-disabled'} ${!this.enableExport && 'export-disabled'}` }, !this.loading && this.enablePagination && this.enablePageSize && (h("p-page-size-select", { key: 'f2d5f4773759a2715bb62a85a7ecc2bb70e421fa', class: !hidePageSizeSelect && 'hidden desktop-xs:flex', hidden: hidePageSizeSelect, size: this.pageSize, sizeOptions: this.pageSizeOptions, onSizeChange: ({ detail }) => this._changePageSize(detail) })), this.loading && (h("p-loader", { key: '1e95a000af05e30496d48b3f57639de954d0d83d', variant: 'ghost', class: 'h-8 w-full rounded' })), !this.loading && this.enablePagination && (h("p-pagination", { key: 'f493f90308042214b5e078f194a7c61cb26fdedb', pageSize: this.pageSize, total: this.total, page: this.page, hideOnSinglePage: this.hideOnSinglePage, onPageChange: ({ detail }) => this.pageChange.emit(detail) })), !this.loading && this.enableExport && (h("p-button", { key: '4908aa789d7acce5bd4e8d88ae748c0bf3094fc0', class: 'hidden desktop-xs:flex', variant: 'secondary', size: 'sm', icon: 'download', onClick: () => this.export.emit() }, formatTranslation(this._locales.export)))));
+        return (h(Host, { key: '5d741b128761060367791b642d9105ab84b85fbd', class: `p-table-footer ${!this.enablePageSize && 'page-size-disabled'} ${!this.enablePagination && 'pagination-disabled'} ${!this.enableExport && 'export-disabled'}` }, !this.loading && this.enablePagination && this.enablePageSize && (h("p-page-size-select", { key: 'f2cd843ef2002d2c5efeeb6e0b0cc19e9ddcc459', class: !hidePageSizeSelect && 'hidden desktop-xs:flex', hidden: hidePageSizeSelect, size: this.pageSize, sizeOptions: this.pageSizeOptions, onSizeChange: ({ detail }) => this._changePageSize(detail) })), this.loading && (h("p-loader", { key: 'ba98725795479f4394f389af953a3691bc652504', variant: 'ghost', class: 'h-8 w-full rounded' })), !this.loading && this.enablePagination && (h("p-pagination", { key: 'a450cb9a2b7fcbb0ee63cd33466d4df2a34938e6', pageSize: this.pageSize, total: this.total, page: this.page, hideOnSinglePage: this.hideOnSinglePage, onPageChange: ({ detail }) => this.pageChange.emit(detail) })), !this.loading && this.enableExport && (h("p-button", { key: 'ae71744adf3ed536d30570e69d7f54f6bd411028', class: 'hidden desktop-xs:flex', variant: 'secondary', size: 'sm', icon: 'download', onClick: () => this.export.emit() }, formatTranslation(this._locales.export)))));
     }
     async _setLocales() {
         this._locales = await getLocaleComponentStrings(this._el);
@@ -80,7 +81,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["p-table-footer", "p-button", "p-dropdown", "p-dropdown-menu-container", "p-dropdown-menu-item", "p-icon", "p-loader", "p-page-size-select", "p-pagination", "p-pagination-item", "p-portal"];
+    const components = ["p-table-footer", "p-button", "p-checkbox", "p-dropdown", "p-dropdown-menu-container", "p-dropdown-menu-item", "p-icon", "p-loader", "p-page-size-select", "p-pagination", "p-pagination-item", "p-portal"];
     components.forEach(tagName => { switch (tagName) {
         case "p-table-footer":
             if (!customElements.get(tagName)) {
@@ -88,6 +89,11 @@ function defineCustomElement() {
             }
             break;
         case "p-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "p-checkbox":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }

package/dist/components/table-footer.component.js.map

@@ -1 +1 @@
-{"file":"table-footer.component.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,uBAAuB,GAAG,+nCAA+nC,CAAC;AAChqC,2BAAe,uBAAuB;;MCqBzB,WAAW;;;;;;;;8BAIW,IAAI;gCAKF,IAAI;4BAKR,IAAI;uBAKT,KAAK;oBAKuB,CAAC;;wBAkB7B,WAAW;+BAKF,kBAAkB;gCAqBlB,IAAI;wBAUP,EAAE;;;;;IAzCnC,UAAU,CAAuB;;;;IAkBjC,cAAc,CAAuB;;;;IAQrC,MAAM,CAAuB;;IAiB7B,iBAAiB;QAChB,IAAI,CAAC,WAAW,EAAE,CAAC;KACnB;IAED,MAAM;QACL,MAAM,kBAAkB,GACvB,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC;QACjE,QACC,EAAC,IAAI,qDACJ,KAAK,EAAE,kBACN,CAAC,IAAI,CAAC,cAAc,IAAI,oBACzB,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,qBAAqB,IAClD,CAAC,IAAI,CAAC,YAAY,IAAI,iBACvB,EAAE,IAED,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,cAAc,KAC7D,2EACC,KAAK,EAAE,CAAC,kBAAkB,IAAI,wBAAwB,EACtD,MAAM,EAAE,kBAAkB,EAC1B,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GACzD,CACF,EAEA,IAAI,CAAC,OAAO,KACZ,iEACC,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,oBAAoB,GACf,CACZ,EAEA,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,gBAAgB,KACtC,qEACC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,GACzD,CACF,EACA,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,KAClC,iEACC,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,IAEhC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAC9B,CACX,CACK,EACN;KACF;IAGO,MAAM,WAAW;QACxB,IAAI,CAAC,QAAQ,GAAG,MAAM,yBAAyB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC1D;IAEO,eAAe,CAAC,CAAU;QACjC,IAAI,CAAC,CAAC,EAAE;YACP,OAAO;SACP;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;QAClB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/molecules/table-footer/table-footer.component.scss?tag=p-table-footer&encapsulation=shadow","src/components/molecules/table-footer/table-footer.component.tsx"],"sourcesContent":[":host {\n\t@apply grid grid-cols-1 gap-4;\n\t@apply w-full;\n\t@apply p-6;\n\n\t> p-pagination {\n\t\t@apply flex justify-self-center col-start-1;\n\t}\n\n\t> p-loader {\n\t\t@apply col-start-1;\n\t}\n\n\t@screen desktop-xs {\n\t\t@apply grid-cols-3;\n\t\tgrid-template-areas: 'page-size pagination export';\n\n\t\t> p-page-size-select {\n\t\t\t@apply col-start-1;\n\t\t}\n\n\t\t> p-pagination {\n\t\t\t@apply col-start-2;\n\t\t}\n\n\t\t> p-loader {\n\t\t\t@apply col-start-2;\n\t\t}\n\n\t\t> p-button {\n\t\t\t@apply justify-self-end col-start-3;\n\t\t}\n\t}\n}\n\n:host(.page-size-disabled.export-disabled) {\n\t@apply grid-cols-1;\n\n\t> p-pagination {\n\t\t@apply col-start-1;\n\t}\n}\n","import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\nimport {\n\tformatTranslation,\n\tgetLocaleComponentStrings,\n} from '../../../utils/localization';\nimport { defaultSize, defaultSizeOptions } from '../page-size-select/constants';\n\n@Component({\n\ttag: 'p-table-footer',\n\tstyleUrl: 'table-footer.component.scss',\n\tshadow: true,\n})\nexport class TableFooter {\n\t/**\n\t * Wether to enable page size select\n\t */\n\t@Prop() enablePageSize: boolean = true;\n\n\t/**\n\t * Wether to enable pagination\n\t */\n\t@Prop() enablePagination: boolean = true;\n\n\t/**\n\t * Wether to enable export\n\t */\n\t@Prop() enableExport: boolean = true;\n\n\t/**\n\t * Wether we want to show loading state\n\t */\n\t@Prop() loading: boolean = false;\n\n\t/**\n\t * The current page\n\t */\n\t@Prop({ mutable: true, reflect: true }) page: number = 1;\n\n\t/**\n\t * The total amount of items\n\t */\n\t@Prop() total!: number;\n\n\t/**\n\t * Event whenever the page changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tpageChange: EventEmitter<number>;\n\n\t/**\n\t * The amount of items per page\n\t */\n\t@Prop() pageSize: number = defaultSize;\n\n\t/**\n\t * The options for the page size\n\t */\n\t@Prop() pageSizeOptions: number[] = defaultSizeOptions;\n\n\t/**\n\t * Event whenever the page changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tpageSizeChange: EventEmitter<number>;\n\n\t/**\n\t * Event whenever the page changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\texport: EventEmitter<number>;\n\n\t/**\n\t * Wether to hide when there is only 1 page available\n\t */\n\t@Prop() hideOnSinglePage: boolean = true;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t/**\n\t * Locales used for this component\n\t */\n\t@State() private _locales: any = {};\n\n\tcomponentWillLoad() {\n\t\tthis._setLocales();\n\t}\n\n\trender() {\n\t\tconst hidePageSizeSelect =\n\t\t\tthis.hideOnSinglePage && this.total < this.pageSizeOptions?.[0];\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-table-footer ${\n\t\t\t\t\t!this.enablePageSize && 'page-size-disabled'\n\t\t\t\t} ${!this.enablePagination && 'pagination-disabled'} ${\n\t\t\t\t\t!this.enableExport && 'export-disabled'\n\t\t\t\t}`}\n\t\t\t>\n\t\t\t\t{!this.loading && this.enablePagination && this.enablePageSize && (\n\t\t\t\t\t<p-page-size-select\n\t\t\t\t\t\tclass={!hidePageSizeSelect && 'hidden desktop-xs:flex'}\n\t\t\t\t\t\thidden={hidePageSizeSelect}\n\t\t\t\t\t\tsize={this.pageSize}\n\t\t\t\t\t\tsizeOptions={this.pageSizeOptions}\n\t\t\t\t\t\tonSizeChange={({ detail }) => this._changePageSize(detail)}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{this.loading && (\n\t\t\t\t\t<p-loader\n\t\t\t\t\t\tvariant='ghost'\n\t\t\t\t\t\tclass='h-8 w-full rounded'\n\t\t\t\t\t></p-loader>\n\t\t\t\t)}\n\n\t\t\t\t{!this.loading && this.enablePagination && (\n\t\t\t\t\t<p-pagination\n\t\t\t\t\t\tpageSize={this.pageSize}\n\t\t\t\t\t\ttotal={this.total}\n\t\t\t\t\t\tpage={this.page}\n\t\t\t\t\t\thideOnSinglePage={this.hideOnSinglePage}\n\t\t\t\t\t\tonPageChange={({ detail }) => this.pageChange.emit(detail)}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{!this.loading && this.enableExport && (\n\t\t\t\t\t<p-button\n\t\t\t\t\t\tclass='hidden desktop-xs:flex'\n\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\tsize='sm'\n\t\t\t\t\t\ticon='download'\n\t\t\t\t\t\tonClick={() => this.export.emit()}\n\t\t\t\t\t>\n\t\t\t\t\t\t{formatTranslation(this._locales.export)}\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\t@Listen('localeChanged', { target: 'body' })\n\tprivate async _setLocales(): Promise<void> {\n\t\tthis._locales = await getLocaleComponentStrings(this._el);\n\t}\n\n\tprivate _changePageSize(s?: number) {\n\t\tif (!s) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.pageSize = s;\n\t\tthis.pageSizeChange.emit(this.pageSize);\n\t}\n}\n"],"version":3}
+{"file":"table-footer.component.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,uBAAuB,GAAG,+nCAA+nC,CAAC;AAChqC,2BAAe,uBAAuB;;MCqBzB,WAAW;;;;;;;;8BAIW,IAAI;gCAKF,IAAI;4BAKR,IAAI;uBAKT,KAAK;oBAKuB,CAAC;;wBAkB7B,WAAW;+BAKF,kBAAkB;gCAqBlB,IAAI;wBAUP,EAAE;;;;;IAzCnC,UAAU,CAAuB;;;;IAkBjC,cAAc,CAAuB;;;;IAQrC,MAAM,CAAuB;;IAiB7B,iBAAiB;QAChB,IAAI,CAAC,WAAW,EAAE,CAAC;KACnB;IAED,MAAM;QACL,MAAM,kBAAkB,GACvB,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC;QACjE,QACC,EAAC,IAAI,qDACJ,KAAK,EAAE,kBACN,CAAC,IAAI,CAAC,cAAc,IAAI,oBACzB,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,qBAAqB,IAClD,CAAC,IAAI,CAAC,YAAY,IAAI,iBACvB,EAAE,IAED,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,cAAc,KAC7D,2EACC,KAAK,EAAE,CAAC,kBAAkB,IAAI,wBAAwB,EACtD,MAAM,EAAE,kBAAkB,EAC1B,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GACzD,CACF,EAEA,IAAI,CAAC,OAAO,KACZ,iEACC,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,oBAAoB,GACf,CACZ,EAEA,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,gBAAgB,KACtC,qEACC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,GACzD,CACF,EACA,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,KAClC,iEACC,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,IAEhC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAC9B,CACX,CACK,EACN;KACF;IAGO,MAAM,WAAW;QACxB,IAAI,CAAC,QAAQ,GAAG,MAAM,yBAAyB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC1D;IAEO,eAAe,CAAC,CAAU;QACjC,IAAI,CAAC,CAAC,EAAE;YACP,OAAO;SACP;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;QAClB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/molecules/table-footer/table-footer.component.scss?tag=p-table-footer&encapsulation=shadow","src/components/molecules/table-footer/table-footer.component.tsx"],"sourcesContent":[":host {\n\t@apply grid grid-cols-1 gap-4;\n\t@apply w-full;\n\t@apply p-6;\n\n\t> p-pagination {\n\t\t@apply flex justify-self-center col-start-1;\n\t}\n\n\t> p-loader {\n\t\t@apply col-start-1;\n\t}\n\n\t@screen desktop-xs {\n\t\t@apply grid-cols-3;\n\t\tgrid-template-areas: 'page-size pagination export';\n\n\t\t> p-page-size-select {\n\t\t\t@apply col-start-1;\n\t\t}\n\n\t\t> p-pagination {\n\t\t\t@apply col-start-2;\n\t\t}\n\n\t\t> p-loader {\n\t\t\t@apply col-start-2;\n\t\t}\n\n\t\t> p-button {\n\t\t\t@apply justify-self-end col-start-3;\n\t\t}\n\t}\n}\n\n:host(.page-size-disabled.export-disabled) {\n\t@apply grid-cols-1;\n\n\t> p-pagination {\n\t\t@apply col-start-1;\n\t}\n}\n","import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\nimport {\n\tformatTranslation,\n\tgetLocaleComponentStrings,\n} from '../../../utils/localization';\nimport { defaultSize, defaultSizeOptions } from '../page-size-select/constants';\n\n@Component({\n\ttag: 'p-table-footer',\n\tstyleUrl: 'table-footer.component.scss',\n\tshadow: true,\n})\nexport class TableFooter {\n\t/**\n\t * Wether to enable page size select\n\t */\n\t@Prop() enablePageSize: boolean = true;\n\n\t/**\n\t * Wether to enable pagination\n\t */\n\t@Prop() enablePagination: boolean = true;\n\n\t/**\n\t * Wether to enable export\n\t */\n\t@Prop() enableExport: boolean = true;\n\n\t/**\n\t * Wether we want to show loading state\n\t */\n\t@Prop() loading: boolean = false;\n\n\t/**\n\t * The current page\n\t */\n\t@Prop({ mutable: true, reflect: true }) page: number = 1;\n\n\t/**\n\t * The total amount of items\n\t */\n\t@Prop() total!: number;\n\n\t/**\n\t * Event whenever the page changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tpageChange: EventEmitter<number>;\n\n\t/**\n\t * The amount of items per page\n\t */\n\t@Prop() pageSize: number = defaultSize;\n\n\t/**\n\t * The options for the page size\n\t */\n\t@Prop() pageSizeOptions: number[] = defaultSizeOptions;\n\n\t/**\n\t * Event whenever the page changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tpageSizeChange: EventEmitter<number>;\n\n\t/**\n\t * Event whenever the page changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\texport: EventEmitter<number>;\n\n\t/**\n\t * Wether to hide when there is only 1 page available\n\t */\n\t@Prop() hideOnSinglePage: boolean = true;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t/**\n\t * Locales used for this component\n\t */\n\t@State() private _locales: any = {};\n\n\tcomponentWillLoad() {\n\t\tthis._setLocales();\n\t}\n\n\trender() {\n\t\tconst hidePageSizeSelect =\n\t\t\tthis.hideOnSinglePage && this.total < this.pageSizeOptions?.[0];\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-table-footer ${\n\t\t\t\t\t!this.enablePageSize && 'page-size-disabled'\n\t\t\t\t} ${!this.enablePagination && 'pagination-disabled'} ${\n\t\t\t\t\t!this.enableExport && 'export-disabled'\n\t\t\t\t}`}\n\t\t\t>\n\t\t\t\t{!this.loading && this.enablePagination && this.enablePageSize && (\n\t\t\t\t\t<p-page-size-select\n\t\t\t\t\t\tclass={!hidePageSizeSelect && 'hidden desktop-xs:flex'}\n\t\t\t\t\t\thidden={hidePageSizeSelect}\n\t\t\t\t\t\tsize={this.pageSize}\n\t\t\t\t\t\tsizeOptions={this.pageSizeOptions}\n\t\t\t\t\t\tonSizeChange={({ detail }) => this._changePageSize(detail)}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{this.loading && (\n\t\t\t\t\t<p-loader\n\t\t\t\t\t\tvariant='ghost'\n\t\t\t\t\t\tclass='h-8 w-full rounded'\n\t\t\t\t\t></p-loader>\n\t\t\t\t)}\n\n\t\t\t\t{!this.loading && this.enablePagination && (\n\t\t\t\t\t<p-pagination\n\t\t\t\t\t\tpageSize={this.pageSize}\n\t\t\t\t\t\ttotal={this.total}\n\t\t\t\t\t\tpage={this.page}\n\t\t\t\t\t\thideOnSinglePage={this.hideOnSinglePage}\n\t\t\t\t\t\tonPageChange={({ detail }) => this.pageChange.emit(detail)}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{!this.loading && this.enableExport && (\n\t\t\t\t\t<p-button\n\t\t\t\t\t\tclass='hidden desktop-xs:flex'\n\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\tsize='sm'\n\t\t\t\t\t\ticon='download'\n\t\t\t\t\t\tonClick={() => this.export.emit()}\n\t\t\t\t\t>\n\t\t\t\t\t\t{formatTranslation(this._locales.export)}\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\t@Listen('localeChanged', { target: 'body' })\n\tprivate async _setLocales(): Promise<void> {\n\t\tthis._locales = await getLocaleComponentStrings(this._el);\n\t}\n\n\tprivate _changePageSize(s?: number) {\n\t\tif (!s) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.pageSize = s;\n\t\tthis.pageSizeChange.emit(this.pageSize);\n\t}\n}\n"],"version":3}

package/dist/components/table-row.component.js

@@ -13,9 +13,9 @@ const TableRow = /*@__PURE__*/ proxyCustomElement(class TableRow extends HTMLEle
         this.enableHover = true;
     }
     render() {
-        return (h(Host, { key: '106cbaf558245629401e4cc50c197a358b50a3af', class: `p-table-row variant-${this.variant} ${this.enableHover &&
+        return (h(Host, { key: '5d5245faf40bfcfaf3008117ec6e604c45a716ea', class: `p-table-row variant-${this.variant} ${this.enableHover &&
                 this.variant === 'default' &&
-                'enable-hover'} group` }, h("div", { key: 'c4558d465f1ff97509ca009f465b667aeb647e63', class: "content" }, h("slot", { key: '76e1c489fe7510b7c61c66362592cffff77d9fc6' })), this.variant === 'default' && h("p-divider", { key: '5eab74db0145d5c5af95e27a2057e3e7c6ca9348', class: "m-0" })));
+                'enable-hover'} group` }, h("div", { key: '1ed45114cb5478ad37461fb4c7957b89e2f4e7d9', class: "content" }, h("slot", { key: '029596bda8f0b019ec48fdf7b5cb00e2878f939d' })), this.variant === 'default' && h("p-divider", { key: '5263474be1ce89579330294f80218e92a86d0a87', class: "m-0" })));
     }
     static get style() { return PTableRowStyle0; }
 }, [1, "p-table-row", {

package/dist/components/tooltip.component.js

@@ -89,19 +89,19 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
             ref: el => this._load(el),
         };
         let tooltip;
-        const tooltipElement = (h("div", { key: '012701d2371f41206de7a3a921abc11ef50aced1', class: popover({
+        const tooltipElement = (h("div", { key: 'e773c573f879f37ca26e3efb0621a148150cc988', class: popover({
                 variant: this.variant,
                 strategy: this.usePortal ? 'none' : this.strategy,
-            }), ...(this.usePortal ? {} : tooltipProps) }, h("div", { key: '70d51ec9a805c3155c0a09371966603de463d9f6', class: 'flex gap-2' }, this.variant === 'error' && (h("div", { key: '28fce86e2c1bcf42519ab9f3849bc9483397ee4f', class: 'w-[2px] bg-negative-red' })), this.content ? this.content : h("slot", { name: 'content' }))));
+            }), ...(this.usePortal ? {} : tooltipProps) }, h("div", { key: 'beae5aa49190a54cb3852aed32989e4393a4577b', class: 'flex gap-2' }, this.variant === 'error' && (h("div", { key: '2df89a5828f590f1140e7b49d0fdbc0bbd342e76', class: 'w-[2px] bg-negative-red' })), this.content ? this.content : h("slot", { name: 'content' }))));
         if (this.usePortal) {
-            tooltip = (h("p-portal", { key: '02a965ebe380080c6eef501a2b121b0a5ab4dc2f', class: portal({
+            tooltip = (h("p-portal", { key: 'b10a6efabbd222ac3f49ce1ed609225d43aef28c', class: portal({
                     strategy: this.strategy,
                 }), ...tooltipProps }, tooltipElement));
         }
         else {
             tooltip = tooltipElement;
         }
-        return (h(Host, { key: 'ba454a3140c52b57a66b5e46ae6fddf33ed52721', class: 'p-popover flex cursor-pointer' }, h("div", { key: '319cf2bc0723ca7e31472649c30119b943af0bcf', class: 'relative h-inherit w-inherit' }, h("slot", { key: 'c0a2e40f70b1c5f4654fc8e822caf9572853e327', name: 'trigger' }), tooltip)));
+        return (h(Host, { key: '49b2555dfde9308712f54352b71b6b3392237f92', class: 'p-popover flex cursor-pointer' }, h("div", { key: '75bfdc10b8af271be06fb857d3f08e040c05711a', class: 'relative h-inherit w-inherit' }, h("slot", { key: '9dae75ed3b6edb2384b8a5d5b573aad90278a875', name: 'trigger' }), tooltip)));
     }
     clickHandler() {
         if (this.variant === 'hover' || !this.enableUserInput) {

package/dist/esm/index-2ef94580.js

@@ -49,10 +49,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'p-button_8':
+                case 'p-button_3':
                     return import(
                       /* webpackMode: "lazy" */
-                      './p-button_8.entry.js').then(processMod, consoleError);
+                      './p-button_3.entry.js').then(processMod, consoleError);
                 case 'p-accordion':
                     return import(
                       /* webpackMode: "lazy" */
@@ -185,6 +185,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './p-toast-container.entry.js').then(processMod, consoleError);
+                case 'p-toggle':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './p-toggle.entry.js').then(processMod, consoleError);
                 case 'p-avatar':
                     return import(
                       /* webpackMode: "lazy" */
@@ -237,10 +241,14 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './p-backdrop.entry.js').then(processMod, consoleError);
-                case 'p-dropdown_2':
+                case 'p-checkbox_3':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './p-checkbox_3.entry.js').then(processMod, consoleError);
+                case 'p-field_3':
                     return import(
                       /* webpackMode: "lazy" */
-                      './p-dropdown_2.entry.js').then(processMod, consoleError);
+                      './p-field_3.entry.js').then(processMod, consoleError);
                 case 'p-divider':
                     return import(
                       /* webpackMode: "lazy" */
@@ -249,6 +257,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './p-dropdown-menu-container.entry.js').then(processMod, consoleError);
+                case 'p-portal_2':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './p-portal_2.entry.js').then(processMod, consoleError);
           }
       }
   return import(

package/dist/esm/index.js

@@ -367,7 +367,8 @@ const shadows = {
         '0 2px 2px rgba(0, 2, 2, 0.08)',
         '0 4px 4px rgba(0, 2, 2, 0.08)',
     ],
-    'supportive-lilac': '0px 1px 1px 0px rgba(189, 140, 255, 0.20)',
+    'supportive-lilac': '0px 1px 1px rgba(189, 140, 255, 0.20)',
+    'black-teal-10%': '0px 1px 0px rgba(3, 42, 36, 0.1)',
     inherit: 'inherit',
     transparent: 'transparent',
 };