@paperless/core 2.0.1-beta.2 → 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":"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","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/p-tooltip.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface PTooltip extends Components.PTooltip, HTMLElement {}
 export const PTooltip: {
-  prototype: PTooltip;
-  new (): PTooltip;
+    prototype: PTooltip;
+    new (): PTooltip;
 };
 /**
  * Used to define this component and all nested components recursively.

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

@@ -1,105 +1,121 @@
 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$6 } from './button.component.js';
-import { d as defineCustomElement$5 } from './dropdown.component.js';
-import { d as defineCustomElement$4 } from './dropdown-menu-container.component.js';
-import { d as defineCustomElement$3 } from './dropdown-menu-item.component.js';
-import { d as defineCustomElement$2 } from './icon.component.js';
-import { d as defineCustomElement$1 } from './loader.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';
+import { d as defineCustomElement$3 } from './icon.component.js';
+import { d as defineCustomElement$2 } from './loader.component.js';
+import { d as defineCustomElement$1 } from './portal.component.js';
 
 const defaultSize = 12;
 const defaultSizeOptions = [12, 24, 68, 136];
 
 const PageSizeSelect = /*@__PURE__*/ proxyCustomElement(class PageSizeSelect extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.sizeChange = createEvent(this, "sizeChange", 3);
-    this._defaultButtonTemplate = size => formatTranslation(this._locales.item, { size });
-    this._defaultItemTemplate = size => formatTranslation(this._locales.item, { size });
-    this.size = defaultSize;
-    this.sizeOptions = defaultSizeOptions;
-    this.chevronPosition = 'start';
-    this.buttonSize = 'sm';
-    this.buttonTemplate = this._defaultButtonTemplate;
-    this.itemTemplate = this._defaultItemTemplate;
-    this.hidden = false;
-    this._locales = {};
-  }
-  componentWillLoad() {
-    this._setLocales();
-  }
-  render() {
-    return (h(Host, { class: `p-page-size-select ${this.hidden && 'hidden'}` }, h("p-dropdown", { placement: 'top-start', chevronPosition: this.chevronPosition, chevronDirection: 'down' }, h("p-button", { variant: 'secondary', slot: 'trigger', size: this.buttonSize }, this.buttonTemplate
-      ? this.buttonTemplate(this.size)
-      : this._defaultButtonTemplate(this.size)), h("slot", { slot: 'items' }, this.sizeOptions.map(option => (h("p-dropdown-menu-item", { active: option === this.size, onClick: () => this._changeSize(option) }, this.itemTemplate
-      ? this.itemTemplate(option)
-      : this._defaultItemTemplate(option))))))));
-  }
-  async _setLocales() {
-    this._locales = await getLocaleComponentStrings(this._el);
-  }
-  _changeSize(s) {
-    if (!s) {
-      return;
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.sizeChange = createEvent(this, "sizeChange", 3);
+        this.size = defaultSize;
+        this.sizeOptions = defaultSizeOptions;
+        this.chevronPosition = 'start';
+        this.buttonSize = 'sm';
+        this.buttonTemplate = this._defaultButtonTemplate;
+        this.itemTemplate = this._defaultItemTemplate;
+        this.hidden = false;
+        this._locales = {};
+    }
+    _defaultButtonTemplate = size => formatTranslation(this._locales.item, { size });
+    _defaultItemTemplate = size => formatTranslation(this._locales.item, { size });
+    /**
+     * Event whenever the size changes
+     */
+    sizeChange;
+    get _el() { return this; }
+    componentWillLoad() {
+        this._setLocales();
+    }
+    render() {
+        return (h(Host, { key: 'fed0ed91432b016ba89756bbb1da23280d53fbad', class: `p-page-size-select ${this.hidden && 'hidden'}` }, h("p-dropdown", { key: 'e0c88d1e79a318d6722aa930d398c2885c25db55', placement: 'top-start', chevronPosition: this.chevronPosition, chevronDirection: 'down' }, h("p-button", { key: '5533afc447a3cc32e173e5043461e503d79d85ca', variant: 'secondary', slot: 'trigger', size: this.buttonSize }, this.buttonTemplate
+            ? this.buttonTemplate(this.size)
+            : this._defaultButtonTemplate(this.size)), h("slot", { key: '03b5da08593e42e2c632418d3c40621377e181c9', slot: 'items' }, this.sizeOptions.map(option => (h("p-dropdown-menu-item", { active: option === this.size, onClick: () => this._changeSize(option) }, this.itemTemplate
+            ? this.itemTemplate(option)
+            : this._defaultItemTemplate(option))))))));
+    }
+    async _setLocales() {
+        this._locales = await getLocaleComponentStrings(this._el);
+    }
+    _changeSize(s) {
+        if (!s) {
+            return;
+        }
+        this.size = s;
+        this.sizeChange.emit(this.size);
     }
-    this.size = s;
-    this.sizeChange.emit(this.size);
-  }
-  get _el() { return this; }
 }, [1, "p-page-size-select", {
-    "size": [1538],
-    "sizeOptions": [16],
-    "chevronPosition": [1, "chevron-position"],
-    "buttonSize": [1, "button-size"],
-    "buttonTemplate": [16],
-    "itemTemplate": [16],
-    "hidden": [4],
-    "_locales": [32]
-  }, [[16, "localeChanged", "_setLocales"]]]);
+        "size": [1538],
+        "sizeOptions": [16],
+        "chevronPosition": [1, "chevron-position"],
+        "buttonSize": [1, "button-size"],
+        "buttonTemplate": [16],
+        "itemTemplate": [16],
+        "hidden": [4],
+        "_locales": [32]
+    }, [[16, "localeChanged", "_setLocales"]]]);
 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"];
-  components.forEach(tagName => { switch (tagName) {
-    case "p-page-size-select":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, PageSizeSelect);
-      }
-      break;
-    case "p-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "p-dropdown":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "p-dropdown-menu-container":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "p-dropdown-menu-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "p-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "p-loader":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    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)) {
+                customElements.define(tagName, PageSizeSelect);
+            }
+            break;
+        case "p-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "p-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "p-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "p-dropdown-menu-container":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "p-dropdown-menu-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "p-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "p-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "p-portal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { PageSizeSelect as P, defaultSize as a, defaultSizeOptions as b, defineCustomElement as d };

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;;;;;;IAClB,2BAAsB,GAAiB,IAAI,IAClD,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;IACzC,yBAAoB,GAAiB,IAAI,IAChD,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;gBAIM,WAAW;uBAKlC,kBAAkB;2BAaP,OAAO;sBAKd,IAAI;0BAKD,IAAI,CAAC,sBAAsB;wBAK7B,IAAI,CAAC,oBAAoB;kBAUpC,KAAK;oBAKE,EAAE;;EAEnC,iBAAiB;IAChB,IAAI,CAAC,WAAW,EAAE,CAAC;GACnB;EAED,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,sBAAsB,IAAI,CAAC,MAAM,IAAI,QAAQ,EAAE,IAC3D,kBACC,SAAS,EAAC,WAAW,EACrB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,gBAAgB,EAAC,MAAM,IAEvB,gBACC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,SAAS,EACd,IAAI,EAAE,IAAI,CAAC,UAAU,IAEpB,IAAI,CAAC,cAAc;QACjB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;QAC9B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAC/B,EACX,YAAM,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;QACf,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;QACzB,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CACd,CACvB,CAAC,CACI,CACK,CACP,EACN;GACF;EAGO,MAAM,WAAW;IACxB,IAAI,CAAC,QAAQ,GAAG,MAAM,yBAAyB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;GAC1D;EAEO,WAAW,CAAC,CAAU;IAC7B,IAAI,CAAC,CAAC,EAAE;MACP,OAAO;KACP;IAED,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IACd,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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

@@ -1,33 +1,34 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const paginationItemComponentCss = ".flex{display:flex!important}.h-8{height:2rem!important}.justify-center{justify-content:center!important}.rounded{border-radius:.25rem!important}.font-semibold{font-weight:600!important}.text-indigo{--tw-text-opacity:1!important;color:rgb(82 138 250/var(--tw-text-opacity,1))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity,1))!important}*{box-sizing:border-box}:host{--tw-text-opacity:1;align-items:center;border-radius:.25rem;color:rgb(128 130 158/var(--tw-text-opacity,1));cursor:pointer;display:flex;font-size:.875rem;font-weight:600;height:2rem;justify-content:center;line-height:1.25rem;width:2rem}:host(:focus),:host(:hover){--tw-text-opacity:1;color:rgb(81 83 107/var(--tw-text-opacity,1))}:host(.active){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity,1));color:rgb(82 138 250/var(--tw-text-opacity,1))}.static{position:static!important}";
+const PPaginationItemStyle0 = paginationItemComponentCss;
 
 const PaginationItem = /*@__PURE__*/ proxyCustomElement(class PaginationItem extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.active = false;
-  }
-  render() {
-    return (h(Host, { class: `p-pagination-item ${this.active && 'active'}` }, h("slot", null)));
-  }
-  static get style() { return paginationItemComponentCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.active = false;
+    }
+    render() {
+        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", {
-    "active": [4]
-  }]);
+        "active": [4]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["p-pagination-item"];
-  components.forEach(tagName => { switch (tagName) {
-    case "p-pagination-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, PaginationItem);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["p-pagination-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "p-pagination-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PaginationItem);
+            }
+            break;
+    } });
 }
 
 export { PaginationItem as P, defineCustomElement as d };

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

@@ -1 +1 @@
-{"file":"pagination-item.component.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,k7BAAk7B;;MCOx8B,cAAc;;;;;kBAIA,KAAK;;EAE/B,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,qBAAqB,IAAI,CAAC,MAAM,IAAI,QAAQ,EAAE,IAC1D,eAAQ,CACF,EACN;GACF;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/pagination-item/pagination-item.component.scss?tag=p-pagination-item&encapsulation=shadow","src/components/atoms/pagination-item/pagination-item.component.tsx"],"sourcesContent":[":host {\n\t@apply h-8 w-8;\n\t@apply flex justify-center items-center;\n\t@apply font-semibold text-storm-medium text-sm;\n\t@apply rounded;\n\t@apply cursor-pointer;\n}\n\n:host(:hover),\n:host(:focus) {\n\t@apply text-storm;\n}\n\n:host(.active) {\n\t@apply text-indigo bg-indigo-light;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-pagination-item',\n\tstyleUrl: 'pagination-item.component.scss',\n\tshadow: true,\n})\nexport class PaginationItem {\n\t/**\n\t * Wether the pagination item is active\n\t */\n\t@Prop() active: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`p-pagination-item ${this.active && 'active'}`}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"pagination-item.component.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,k7BAAk7B,CAAC;AACt9B,8BAAe,0BAA0B;;MCM5B,cAAc;;;;;sBAIA,KAAK;;IAE/B,MAAM;QACL,QACC,EAAC,IAAI,qDAAC,KAAK,EAAE,qBAAqB,IAAI,CAAC,MAAM,IAAI,QAAQ,EAAE,IAC1D,8DAAQ,CACF,EACN;KACF;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/pagination-item/pagination-item.component.scss?tag=p-pagination-item&encapsulation=shadow","src/components/atoms/pagination-item/pagination-item.component.tsx"],"sourcesContent":[":host {\n\t@apply h-8 w-8;\n\t@apply flex justify-center items-center;\n\t@apply font-semibold text-storm-medium text-sm;\n\t@apply rounded;\n\t@apply cursor-pointer;\n}\n\n:host(:hover),\n:host(:focus) {\n\t@apply text-storm;\n}\n\n:host(.active) {\n\t@apply text-indigo bg-indigo-light;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-pagination-item',\n\tstyleUrl: 'pagination-item.component.scss',\n\tshadow: true,\n})\nexport class PaginationItem {\n\t/**\n\t * Wether the pagination item is active\n\t */\n\t@Prop() active: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`p-pagination-item ${this.active && 'active'}`}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}