npm - @paperless/core - Versions diffs - 2.0.1-beta.166 → 2.0.1-beta.168 - Mend

@paperless/core 2.0.1-beta.166 → 2.0.1-beta.168

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (149) hide show

package/dist/collection/components/atoms/toggle/toggle.component.js CHANGED Viewed

@@ -13,9 +13,11 @@ const toggle = cva([
                 'cursor-pointer shadow-1',
                 'bg-black-teal-50 border-black-teal-100',
                 'hover:bg-supportive-lilac-100 hover:border-black-teal-100',
+                'group-hover/toggle-label:bg-supportive-lilac-100 group-hover/toggle-label: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-700 checked:hover:border-black-teal/20',
+                'checked:group-hover/toggle-label:bg-supportive-lilac-700 checked:group-hover/toggle-label:border-black-teal/20',
             ],
             true: ['bg-white-600 border-black-teal-50 cursor-not-allowed'],
         },
@@ -32,8 +34,8 @@ const circle = cva([
                 'bg-white ring-1 ring-black-teal/10',
                 'left-[1px] peer-checked:-translate-x-[calc(100%+1px)]',
                 "after:content-[] peer-checked:after:content-['']  after:bg-supportive-lilac-800 after:rounded-full after:transition-all",
-                'w-[14px] h-[14px] group-hover:w-[18px]',
-                'after:w-1 after:h-1 group-hover:after:w-2',
+                'w-[14px] h-[14px] group-hover/p-toggle:w-[18px] group-hover/toggle-label:w-[18px]',
+                'after:w-1 after:h-1 group-hover/p-toggle:after:w-2 group-hover/toggle-label:after:w-2',
             ],
             true: [
                 'bg-black-teal-100 peer-checked:bg-black-teal-200',
@@ -85,11 +87,11 @@ export class Toggle {
     }
     render() {
         const id = this.id?.length ? this.id : this._nonce;
-        return (h("label", { key: '57e81ded3ab3a05bdd44c332f6dddee8f7966d1f', htmlFor: id, class: 'flex items-center justify-start gap-2 text-black-teal' }, h("div", { key: 'ae7304913a31846b8fa77ec5311f99200bfaeb94', class: 'group relative flex flex-shrink-0 items-center' }, h("input", { key: 'f6e1a28d10818787ccd69c8baa88042916a0f40a', class: toggle({
+        return (h("label", { key: '42173ad03d7f7e88e46c8f5dd640310a6ddc6061', htmlFor: id, class: 'flex items-center justify-start gap-2 text-black-teal' }, h("div", { key: '8af38bc7c8e5500a62223f0e6e7787b98385d37a', class: 'group/p-toggle relative flex flex-shrink-0 items-center' }, h("input", { key: 'a53031be1e71c9e27d2a033404b25fd12e7fe7be', class: toggle({
                 disabled: asBoolean(this.disabled),
-            }), type: 'checkbox', id: id, name: this.name, required: this.required, checked: !!this.checked, disabled: asBoolean(this.disabled), onChange: ev => this._onChange(ev) }), h("div", { key: 'cc1b3f3885ec1299e4d148aa5333a54e928b0478', class: circle({
+            }), type: 'checkbox', id: id, name: this.name, required: this.required, checked: !!this.checked, disabled: asBoolean(this.disabled), onChange: ev => this._onChange(ev) }), h("div", { key: '9cdba16880e7e7bf116e1459a19bb497171f152f', class: circle({
                 disabled: asBoolean(this.disabled),
-            }) })), h("slot", { key: '2644883b4765dc5817824385a4b63da64e90e642' })));
+            }) })), h("slot", { key: 'ee95f5c7fddc68dd6a7ecf6aa63821e2b28bb335' })));
     }
     _onChange(ev) {
         if (asBoolean(this.disabled)) {

package/dist/collection/components/atoms/toggle/toggle.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/toggle/toggle.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,eAAe,EACf,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,KAAK,EACL,CAAC,GACD,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C,MAAM,MAAM,GAAG,GAAG,CACjB;IACC,qDAAqD;IACrD,mCAAmC;IACnC,sBAAsB;CACtB,EACD;IACC,QAAQ,EAAE;QACT,QAAQ,EAAE;YACT,KAAK,EAAE;gBACN,yBAAyB;gBACzB,wCAAwC;gBACxC,2DAA2D;gBAC3D,0DAA0D;gBAC1D,kDAAkD;gBAClD,0EAA0E;~~aAC1E~~;YACD,IAAI,EAAE,CAAC,sDAAsD,CAAC;SAC9D;KACD;CACD,CACD,CAAC;AAEF,MAAM,MAAM,GAAG,GAAG,CACjB;IACC,kCAAkC;IAClC,8BAA8B;IAC9B,0FAA0F;CAC1F,EACD;IACC,QAAQ,EAAE;QACT,QAAQ,EAAE;YACT,KAAK,EAAE;gBACN,oCAAoC;gBACpC,uDAAuD;gBACvD,yHAAyH;gBACzH,~~wCAAwC~~;~~gBACxC~~,~~2CAA2C~~;~~aAC3C~~;YACD,IAAI,EAAE;gBACL,kDAAkD;gBAClD,uDAAuD;gBACvD,SAAS;aACT;SACD;KACD;CACD,CACD,CAAC;AAOF,MAAM,OAAO,MAAM;IAClB;;OAEG;IACK,OAAO,CAAU;IAEzB;;OAEG;IACsB,QAAQ,GAAY,KAAK,CAAC;IAEnD;;OAEG;IACsB,QAAQ,GAAY,IAAI,CAAC;IAElD;;OAEG;IACsB,EAAE,CAAS;IAEpC;;OAEG;IACsB,IAAI,CAAS;IAEtC;;OAEG;IACM,aAAa,CAAwB;IAC9C;;OAEG;IACM,mBAAmB,CAAwB;IAEnC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IAEhB,UAAU,CAAmB;IAEhD,iBAAiB;QAChB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACtB,CAAC;IAED,oBAAoB,CAAC,QAAiB;QACrC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;YAC3B,OAAO;QACR,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC1B,CAAC;IAED,MAAM;QACL,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;QAEnD,OAAO,CACN,8DACC,OAAO,EAAE,EAAE,EACX,KAAK,EAAC,uDAAuD;YAE7D,4DAAK,KAAK,EAAC,~~gDAAgD~~;~~gBAC1D~~,8DACC,KAAK,EAAE,MAAM,CAAC;wBACb,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;qBAClC,CAAC,EACF,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,EACvB,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,EAClC,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,GACjC;gBAEF,4DACC,KAAK,EAAE,MAAM,CAAC;wBACb,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;qBAClC,CAAC,GACI,CACF;YACN,8DAAQ,CACD,CACR,CAAC;IACH,CAAC;IAEO,SAAS,CAAC,EAAS;QAC1B,IAAI,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9B,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,OAAO;QACR,CAAC;QAED,MAAM,OAAO,GAAI,EAAE,CAAC,MAA2B,CAAC,OAAO,CAAC;QACxD,IAAI,OAAO,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAC7B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;YACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACjC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QAC3D,CAAC;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {\n\tAttachInternals,\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\tProp,\n\tState,\n\th,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { asBoolean } from '../../../utils/as-boolean';\nimport { nonce } from '../../../utils/nonce';\n\nconst toggle = 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\t'rounded-full w-8 h-4',\n\t],\n\t{\n\t\tvariants: {\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-black-teal-50 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\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-700 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}\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\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-[] peer-checked:after:content-[''] after:bg-supportive-lilac-800 after:rounded-full after:transition-all\",\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\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\t'w-3 h-3',\n\t\t\t\t],\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-toggle',\n\tstyleUrl: 'toggle.component.css',\n\tformAssociated: true,\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 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\t@AttachInternals() _internals: ElementInternals;\n\n\tformResetCallback() {\n\t\tthis.checked = false;\n\t}\n\n\tformDisabledCallback(disabled: boolean) {\n\t\tif (!this._internals.form) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.disabled = disabled;\n\t}\n\n\trender() {\n\t\tconst id = this.id?.length ? this.id : this._nonce;\n\n\t\treturn (\n\t\t\t<label\n\t\t\t\thtmlFor={id}\n\t\t\t\tclass='flex items-center justify-start gap-2 text-black-teal'\n\t\t\t>\n\t\t\t\t<div class='group relative flex flex-shrink-0 items-center'>\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass={toggle({\n\t\t\t\t\t\t\tdisabled: asBoolean(this.disabled),\n\t\t\t\t\t\t})}\n\t\t\t\t\t\ttype='checkbox'\n\t\t\t\t\t\tid={id}\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\tchecked={!!this.checked}\n\t\t\t\t\t\tdisabled={asBoolean(this.disabled)}\n\t\t\t\t\t\tonChange={ev => this._onChange(ev)}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass={circle({\n\t\t\t\t\t\t\tdisabled: asBoolean(this.disabled),\n\t\t\t\t\t\t})}\n\t\t\t\t\t></div>\n\t\t\t\t</div>\n\t\t\t\t<slot />\n\t\t\t</label>\n\t\t);\n\t}\n\n\tprivate _onChange(ev: Event) {\n\t\tif (asBoolean(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\tif (checked != this.checked) {\n\t\t\tthis.checked = checked;\n\t\t\tthis.checkedChange.emit(checked);\n\t\t\tthis._internals.setFormValue(this.checked ? 'on' : 'off');\n\t\t}\n\t}\n}\n"]}
1	+ {"version":3,"file":"toggle.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/toggle/toggle.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tAttachInternals,\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\tProp,\n\tState,\n\th,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { asBoolean } from '../../../utils/as-boolean';\nimport { nonce } from '../../../utils/nonce';\n\nconst toggle = 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\t'rounded-full w-8 h-4',\n\t],\n\t{\n\t\tvariants: {\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-black-teal-50 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\t'group-hover/toggle-label:bg-supportive-lilac-100 group-hover/toggle-label: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-700 checked:hover:border-black-teal/20',\n\t\t\t\t\t'checked:group-hover/toggle-label:bg-supportive-lilac-700 checked:group-hover/toggle-label: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}\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\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-[] peer-checked:after:content-[''] after:bg-supportive-lilac-800 after:rounded-full after:transition-all\",\n\t\t\t\t\t'w-[14px] h-[14px] group-hover/p-toggle:w-[18px] group-hover/toggle-label:w-[18px]',\n\t\t\t\t\t'after:w-1 after:h-1 group-hover/p-toggle:after:w-2 group-hover/toggle-label:after:w-2',\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\t'w-3 h-3',\n\t\t\t\t],\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-toggle',\n\tstyleUrl: 'toggle.component.css',\n\tformAssociated: true,\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 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\t@AttachInternals() _internals: ElementInternals;\n\n\tformResetCallback() {\n\t\tthis.checked = false;\n\t}\n\n\tformDisabledCallback(disabled: boolean) {\n\t\tif (!this._internals.form) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.disabled = disabled;\n\t}\n\n\trender() {\n\t\tconst id = this.id?.length ? this.id : this._nonce;\n\n\t\treturn (\n\t\t\t<label\n\t\t\t\thtmlFor={id}\n\t\t\t\tclass='flex items-center justify-start gap-2 text-black-teal'\n\t\t\t>\n\t\t\t\t<div class='group/p-toggle relative flex flex-shrink-0 items-center'>\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass={toggle({\n\t\t\t\t\t\t\tdisabled: asBoolean(this.disabled),\n\t\t\t\t\t\t})}\n\t\t\t\t\t\ttype='checkbox'\n\t\t\t\t\t\tid={id}\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\tchecked={!!this.checked}\n\t\t\t\t\t\tdisabled={asBoolean(this.disabled)}\n\t\t\t\t\t\tonChange={ev => this._onChange(ev)}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass={circle({\n\t\t\t\t\t\t\tdisabled: asBoolean(this.disabled),\n\t\t\t\t\t\t})}\n\t\t\t\t\t></div>\n\t\t\t\t</div>\n\t\t\t\t<slot />\n\t\t\t</label>\n\t\t);\n\t}\n\n\tprivate _onChange(ev: Event) {\n\t\tif (asBoolean(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\tif (checked != this.checked) {\n\t\t\tthis.checked = checked;\n\t\t\tthis.checkedChange.emit(checked);\n\t\t\tthis._internals.setFormValue(this.checked ? 'on' : 'off');\n\t\t}\n\t}\n}\n"]}

package/dist/collection/components/molecules/table/header/table-header.component.css CHANGED Viewed

	@@ -1 +1 @@
1	- *{box-sizing:border-box}.static{position:static!important}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.z-\[1\]{z-index:1!important}.col-start-1{grid-column-start:1!important}.col-start-2{grid-column-start:2!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.h-4{height:1rem!important}.h-8{height:2rem!important}.w-3\/4{width:75%!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.gap-2{gap:.5rem!important}.gap-4{gap:1rem!important}.justify-self-start{justify-self:start!important}.rounded{border-radius:.25rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(0 255 0/var(--tw-border-opacity,1))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.p-4{padding:1rem!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}@media (min-width:40rem){.tablet\:flex{display:flex!important}}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}.desktop-xs\:grid{display:grid!important}.desktop-xs\:hidden{display:none!important}.desktop-xs\:w-auto{width:auto!important}.desktop-xs\:max-w-60{max-width:15rem!important}.desktop-xs\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.desktop-xs\:flex-row{flex-direction:row!important}.desktop-xs\:items-center{align-items:center!important}}
1	+ *{box-sizing:border-box}.static{position:static!important}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.z-\[1\]{z-index:1!important}.col-start-1{grid-column-start:1!important}.col-start-2{grid-column-start:2!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.h-4{height:1rem!important}.h-8{height:2rem!important}.w-3\/4{width:75%!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.gap-2{gap:.5rem!important}.gap-4{gap:1rem!important}.justify-self-start{justify-self:start!important}.rounded{border-radius:.25rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(0 255 0/var(--tw-border-opacity,1))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.p-4{padding:1rem!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}@media (min-width:40rem){.tablet\:flex{display:flex!important}.tablet\:px-0{padding-left:0!important;padding-right:0!important}}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}.desktop-xs\:grid{display:grid!important}.desktop-xs\:hidden{display:none!important}.desktop-xs\:w-auto{width:auto!important}.desktop-xs\:max-w-60{max-width:15rem!important}.desktop-xs\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.desktop-xs\:flex-row{flex-direction:row!important}.desktop-xs\:items-center{align-items:center!important}}

package/dist/collection/components/molecules/table/header/table-header.component.js CHANGED Viewed

@@ -5,6 +5,7 @@ import { formatTranslation, getLocaleComponentStrings, } from "../../../../utils
 const header = cva([
     'flex flex-col gap-2 z-[1]',
     'w-full',
+    'px-4 tablet:px-0',
     'desktop-xs:grid desktop-xs:grid-cols-2',
 ]);
 export class TableHeader {
@@ -126,13 +127,13 @@ export class TableHeader {
         const mobileTotal = (this.selectedFiltersAmount || 0) + (activeQuickFilter?.default ? 0 : 1);
         const hasCustomFilterSlot = !!this._el.querySelector(':scope > [slot="custom-filter"]');
         const hasCustomActionsSlot = !!this._el.querySelector(':scope > [slot="custom-actions"]');
-        return (h("div", { key: '92a01469c89592c7c9201edfac691b294b6a261e', class: header() }, this.loading && (h("p-loader", { key: '05b618ea3bb15b8375ca4d50d32e4e0383e45fb4', variant: 'ghost', class: 'hidden h-8 w-3/4 rounded desktop-xs:flex' })), !this.loading &&
-            (hasCustomFilterSlot || this.quickFilters.length > 0) && (h("div", { key: '0ede0674238f87e5591ed4ab19a9588e4bacbbbe', class: 'col-start-1 flex flex-col justify-start gap-4 justify-self-start desktop-xs:flex-row' }, hasCustomFilterSlot && h("slot", { key: 'df90d1012e256bba3e91178f7f7f1d3ad6dc87c6', name: 'custom-filter' }), this.quickFilters.length > 0 && (h("p-segment-container", { key: '21e99e24fa62f1fb6901f9932c531004a41fd9f8', class: 'hidden desktop-xs:flex' }, this.quickFilters.map(item => (h("p-segment-item", { active: item.identifier === this.activeQuickFilterIdentifier, onClick: () => this.quickFilter.emit(item) }, typeof item.text === 'string' ? item.text : item.text(), ' ', item?.count >= 0 ? `(${item.count})` : ''))))))), h("div", { key: 'b3b2c57a97006bab96ed45cadadfbf5633ebe99c', class: 'col-start-2 flex flex-col justify-end gap-2 desktop-xs:flex-row desktop-xs:items-center' }, this.enableSearch && (h("p-field", { key: '229a1da7fed86767e36a83405beaa36a550f67db', icon: 'search', class: 'desktop-xs:max-w-60', placeholder: 'Zoeken...', value: this.query, onValueChange: ev => this._queryObserver.next(ev.detail) })), h("div", { key: '40446fd46c0df4c05ef90411199b0e39bb4597b6', class: 'flex items-center gap-2' }, this.enableFilter && (h("p-button", { key: 'a2df0e96f7a6c057fc8f746013eebf8a9a331ee5', icon: 'filter', variant: 'secondary', class: `w-full ${this.enableFilterDesktop
+        return (h("div", { key: 'ab535aa8c4529ad575072685d7e0d8763abfa3df', class: header() }, this.loading && (h("p-loader", { key: '2d75a59cb8b377deb771c289292f8c0377255e0e', variant: 'ghost', class: 'hidden h-8 w-3/4 rounded desktop-xs:flex' })), !this.loading &&
+            (hasCustomFilterSlot || this.quickFilters.length > 0) && (h("div", { key: '7652284d3b6171753994973dc2f7dad69a3a6bcd', class: 'col-start-1 flex flex-col justify-start gap-4 justify-self-start desktop-xs:flex-row' }, hasCustomFilterSlot && h("slot", { key: '4209da4be63dde923d6fc4124a6f510592978bca', name: 'custom-filter' }), this.quickFilters.length > 0 && (h("p-segment-container", { key: 'adb4213bc76adc9971cbaf14ad82727ad382bfa8', class: 'hidden desktop-xs:flex' }, this.quickFilters.map(item => (h("p-segment-item", { active: item.identifier === this.activeQuickFilterIdentifier, onClick: () => this.quickFilter.emit(item) }, typeof item.text === 'string' ? item.text : item.text(), ' ', item?.count >= 0 ? `(${item.count})` : ''))))))), h("div", { key: '3707ccfdfb753dc4398824e2b777bccb87fb4b04', class: 'col-start-2 flex flex-col justify-end gap-2 desktop-xs:flex-row desktop-xs:items-center' }, this.enableSearch && (h("p-field", { key: 'c0f442a36ee55f29b569d82bebc38de2ab64ba82', icon: 'search', class: 'desktop-xs:max-w-60', placeholder: 'Zoeken...', value: this.query, onValueChange: ev => this._queryObserver.next(ev.detail) })), h("div", { key: '055050b150fad4d5c013a7c6f04bdd433e966a2f', class: 'flex items-center gap-2' }, this.enableFilter && (h("p-button", { key: 'b14ae98072117e21a84d6041f6459baa997f47d7', icon: 'filter', variant: 'secondary', class: `w-full ${this.enableFilterDesktop
                 ? 'desktop-xs:w-auto'
                 : 'desktop-xs:hidden'}`, onClick: () => this.filter.emit() }, this.filterButtonTemplate
             ? this.filterButtonTemplate()
             : this._defaultFilterButtonTemplate(), this.selectedFiltersAmount &&
-            this._getLabel(this.selectedFiltersAmount), mobileTotal > 0 && this._getLabel(mobileTotal, 'mobile'))), !this.loading && this.enableExport && this.enableFilter && (h("p-divider", { key: 'a884df04935555f172bd0bbb9ef5f08ae191fad2', variant: 'vertical', class: 'hidden h-4 tablet:flex' })), !this.loading && this.enableExport && (h("p-button", { key: '71191649e43ce2e5ef13342df377aa809d085a7e', variant: 'secondary', icon: 'upload', class: 'desktop-xs:auto w-full', onClick: () => this.export.emit() }, formatTranslation(this._locales.export)))), this.enableAction && this._buttonTemplate(), hasCustomActionsSlot && h("slot", { key: 'cc1b422824e2e058037467619d8fb784bcec58e8', name: 'custom-actions' })), this.enableAction && this.canUseAction && (h("div", { key: 'e546c52c70511a0b7f9d2d17284c111106743a67', class: 'fixed bottom-0 left-0 block w-full border border-solid border-transparent border-t-mystic-dark bg-white p-4 desktop-xs:hidden' }, this._buttonTemplate(true)))));
+            this._getLabel(this.selectedFiltersAmount), mobileTotal > 0 && this._getLabel(mobileTotal, 'mobile'))), !this.loading && this.enableExport && this.enableFilter && (h("p-divider", { key: 'd92bc4736c8a262e109f57f0d4a885ea732ce74f', variant: 'vertical', class: 'hidden h-4 tablet:flex' })), !this.loading && this.enableExport && (h("p-button", { key: 'bca239c0104cb7ea42e51cdcfdf0cc859c4de427', variant: 'secondary', icon: 'upload', class: 'desktop-xs:auto w-full', onClick: () => this.export.emit() }, formatTranslation(this._locales.export)))), this.enableAction && this._buttonTemplate(), hasCustomActionsSlot && h("slot", { key: '7b4fedb1b1d78b11a8b9b29adf99416836bae534', name: 'custom-actions' })), this.enableAction && this.canUseAction && (h("div", { key: 'f30fda6c05739a02115df7dd8904c61dd7076efe', class: 'fixed bottom-0 left-0 block w-full border border-solid border-transparent border-t-mystic-dark bg-white p-4 desktop-xs:hidden' }, this._buttonTemplate(true)))));
     }
     async _setLocales() {
         this._locales = await getLocaleComponentStrings(this._el);

package/dist/collection/components/molecules/table/header/table-header.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-header.component.js","sourceRoot":"","sources":["../../../../../src/components/molecules/table/header/table-header.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { debounceTime, distinctUntilChanged, Subject } from 'rxjs';\nimport { QuickFilter } from '../../../../types/table';\nimport {\n\tformatTranslation,\n\tgetLocaleComponentStrings,\n} from '../../../../utils/localization';\nimport { IconVariant } from '../../../atoms/icon/icon.component';\n\nexport type templateFunc = () => string;\nexport type buttonTemplateFunc = (amount: number) => string;\n\nconst header = cva([\n\t'flex flex-col gap-2 z-[1]',\n\t'w-full',\n\n\t'desktop-xs:grid desktop-xs:grid-cols-2',\n]);\n\n@Component({\n\ttag: 'p-table-header',\n\tstyleUrl: 'table-header.component.css',\n\tshadow: true,\n})\nexport class TableHeader {\n\tprivate _defaultFilterButtonTemplate: templateFunc = () =>\n\t\tformatTranslation(this._locales.filter);\n\tprivate _defaultActionButtonTemplate: buttonTemplateFunc = (amount: number) =>\n\t\tthis.actionText\n\t\t\t? this.actionText\n\t\t\t: formatTranslation(\n\t\t\t\t\tamount === 0\n\t\t\t\t\t\t? this._locales.edit\n\t\t\t\t\t\t: amount === 1\n\t\t\t\t\t\t? this._locales.edit_single\n\t\t\t\t\t\t: this._locales.edit_plural,\n\t\t\t\t\t{ amount }\n\t\t\t );\n\n\t/*\n\t Quick filters to show\n\t /\n\t@Prop() quickFilters: QuickFilter[] = [];\n\n\t/\n\t Active quick filter identifier\n\t /\n\t@Prop() activeQuickFilterIdentifier: string;\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 Wether to show the search input\n\t /\n\t@Prop() enableSearch: boolean = true;\n\n\t/\n\t The amount of items that are selected\n\t /\n\t@Prop() itemsSelectedAmount: number = 0;\n\n\t/\n\t The query to show in the search bar\n\t /\n\t@Prop({ mutable: true }) query: string;\n\n\t/\n\t Wether to show the filter button\n\t /\n\t@Prop() enableFilter: boolean = true;\n\n\t/\n\t Wether to show the export button\n\t /\n\t@Prop() enableExport: boolean = true;\n\n\t/\n\t Wether to show the filter button on desktop\n\t /\n\t@Prop() enableFilterDesktop: boolean = true;\n\n\t/\n\t The amount of filters being selected\n\t /\n\t@Prop() selectedFiltersAmount: number;\n\n\t/\n\t The template for the filter button text\n\t /\n\t@Prop() filterButtonTemplate: templateFunc =\n\t\tthis._defaultFilterButtonTemplate;\n\n\t/\n\t Wether to show the action button\n\t /\n\t@Prop() enableAction: boolean = true;\n\n\t/\n\t Wether the action button is loading\n\t /\n\t@Prop() actionLoading: boolean = false;\n\n\t/\n\t The action button icon\n\t /\n\t@Prop() actionIcon: IconVariant = 'pencil';\n\n\t/\n\t The action button text if changed\n\t /\n\t@Prop() actionText: string;\n\n\t/\n\t Wether to enable the action button\n\t /\n\t@Prop({ mutable: true }) canUseAction: boolean = false;\n\n\t/\n\t The template for the action button text\n\t /\n\t@Prop() actionButtonTemplate: buttonTemplateFunc =\n\t\tthis._defaultActionButtonTemplate;\n\n\t/\n\t Event when one of the quick filters is clicked\n\t /\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tquickFilter: EventEmitter<QuickFilter>;\n\n\t/\n\t Event when the query changes\n\t /\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tqueryChange: EventEmitter<string>;\n\n\t/\n\t Event when the filter button is clicked\n\t /\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tfilter: EventEmitter<null>;\n\n\t/\n\t Event when the action button is clicked\n\t /\n\t@Event({\n\t\tbubbles: false,\n\t})\n\taction: EventEmitter<null>;\n\n\t/\n\t Event whenever the export button is clicked\n\t /\n\t@Event({\n\t\tbubbles: false,\n\t})\n\texport: EventEmitter<number>;\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\tprivate _queryObserver = new Subject<string>();\n\n\tcomponentWillLoad() {\n\t\tthis._setLocales();\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis._queryObserver\n\t\t\t.pipe(debounceTime(300), distinctUntilChanged())\n\t\t\t.subscribe(value => this.queryChange.emit(value));\n\t}\n\n\trender() {\n\t\tconst activeQuickFilter = this.quickFilters.find(\n\t\t\tf => f.identifier === this.activeQuickFilterIdentifier\n\t\t);\n\t\tconst mobileTotal =\n\t\t\t(this.selectedFiltersAmount \|\| 0) + (activeQuickFilter?.default ? 0 : 1);\n\n\t\tconst hasCustomFilterSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"custom-filter\"]'\n\t\t);\n\n\t\tconst hasCustomActionsSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"custom-actions\"]'\n\t\t);\n\n\t\treturn (\n\t\t\t<div class={header()}>\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='hidden h-8 w-3/4 rounded desktop-xs:flex'\n\t\t\t\t\t></p-loader>\n\t\t\t\t)}\n\n\t\t\t\t{!this.loading &&\n\t\t\t\t\t(hasCustomFilterSlot \|\| this.quickFilters.length > 0) && (\n\t\t\t\t\t\t<div class='col-start-1 flex flex-col justify-start gap-4 justify-self-start desktop-xs:flex-row'>\n\t\t\t\t\t\t\t{hasCustomFilterSlot && <slot name='custom-filter' />}\n\n\t\t\t\t\t\t\t{this.quickFilters.length > 0 && (\n\t\t\t\t\t\t\t\t<p-segment-container class='hidden desktop-xs:flex'>\n\t\t\t\t\t\t\t\t\t{this.quickFilters.map(item => (\n\t\t\t\t\t\t\t\t\t\t<p-segment-item\n\t\t\t\t\t\t\t\t\t\t\tactive={\n\t\t\t\t\t\t\t\t\t\t\t\titem.identifier === this.activeQuickFilterIdentifier\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => this.quickFilter.emit(item)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{typeof item.text === 'string' ? item.text : item.text()}{' '}\n\t\t\t\t\t\t\t\t\t\t\t{item?.count >= 0 ? `(${item.count})` : ''}\n\t\t\t\t\t\t\t\t\t\t</p-segment-item>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</p-segment-container>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t<div class='col-start-2 flex flex-col justify-end gap-2 desktop-xs:flex-row desktop-xs:items-center'>\n\t\t\t\t\t{this.enableSearch && (\n\t\t\t\t\t\t<p-field\n\t\t\t\t\t\t\ticon='search'\n\t\t\t\t\t\t\tclass='desktop-xs:max-w-60'\n\t\t\t\t\t\t\tplaceholder='Zoeken...'\n\t\t\t\t\t\t\tvalue={this.query}\n\t\t\t\t\t\t\tonValueChange={ev => this._queryObserver.next(ev.detail)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<div class='flex items-center gap-2'>\n\t\t\t\t\t\t{this.enableFilter && (\n\t\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\t\ticon='filter'\n\t\t\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\t\t\tclass={`w-full ${\n\t\t\t\t\t\t\t\t\tthis.enableFilterDesktop\n\t\t\t\t\t\t\t\t\t\t? 'desktop-xs:w-auto'\n\t\t\t\t\t\t\t\t\t\t: 'desktop-xs:hidden'\n\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\tonClick={() => this.filter.emit()}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this.filterButtonTemplate\n\t\t\t\t\t\t\t\t\t? this.filterButtonTemplate()\n\t\t\t\t\t\t\t\t\t: this._defaultFilterButtonTemplate()}\n\t\t\t\t\t\t\t\t{this.selectedFiltersAmount &&\n\t\t\t\t\t\t\t\t\tthis._getLabel(this.selectedFiltersAmount)}\n\t\t\t\t\t\t\t\t{mobileTotal > 0 && this._getLabel(mobileTotal, 'mobile')}\n\t\t\t\t\t\t\t</p-button>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{!this.loading && this.enableExport && this.enableFilter && (\n\t\t\t\t\t\t\t<p-divider\n\t\t\t\t\t\t\t\tvariant='vertical'\n\t\t\t\t\t\t\t\tclass='hidden h-4 tablet:flex'\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{!this.loading && this.enableExport && (\n\t\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\t\t\ticon='upload'\n\t\t\t\t\t\t\t\tclass='desktop-xs:auto w-full'\n\t\t\t\t\t\t\t\tonClick={() => this.export.emit()}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{formatTranslation(this._locales.export)}\n\t\t\t\t\t\t\t</p-button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.enableAction && this._buttonTemplate()}\n\n\t\t\t\t\t{hasCustomActionsSlot && <slot name='custom-actions' />}\n\t\t\t\t</div>\n\n\t\t\t\t{this.enableAction && this.canUseAction && (\n\t\t\t\t\t<div class='fixed bottom-0 left-0 block w-full border border-solid border-transparent border-t-mystic-dark bg-white p-4 desktop-xs:hidden'>\n\t\t\t\t\t\t{this._buttonTemplate(true)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\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 _buttonTemplate(mobile = false) {\n\t\treturn (\n\t\t\t<p-button\n\t\t\t\tclass={mobile ? 'w-full' : 'hidden desktop-xs:flex'}\n\t\t\t\ticon={this.actionIcon}\n\t\t\t\tdisabled={!this.canUseAction}\n\t\t\t\tonClick={() => this.action.emit()}\n\t\t\t\tloading={this.actionLoading}\n\t\t\t>\n\t\t\t\t{this.actionButtonTemplate\n\t\t\t\t\t? this.actionButtonTemplate(mobile ? this.itemsSelectedAmount : 0)\n\t\t\t\t\t: this._defaultActionButtonTemplate(\n\t\t\t\t\t\t\tmobile ? this.itemsSelectedAmount : 0\n\t\t\t\t\t )}\n\t\t\t</p-button>\n\t\t);\n\t}\n\n\tprivate _getLabel(amount, variant: 'mobile' \| 'default' = 'default') {\n\t\treturn (\n\t\t\t<p-badge\n\t\t\t\tclass={`ml-1 ${\n\t\t\t\t\tvariant === 'default'\n\t\t\t\t\t\t? 'hidden desktop-xs:flex'\n\t\t\t\t\t\t: 'flex desktop-xs:hidden'\n\t\t\t\t}`}\n\t\t\t>\n\t\t\t\t{amount}\n\t\t\t</p-badge>\n\t\t);\n\t}\n}\n"]}
1	+ {"version":3,"file":"table-header.component.js","sourceRoot":"","sources":["../../../../../src/components/molecules/table/header/table-header.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { debounceTime, distinctUntilChanged, Subject } from 'rxjs';\nimport { QuickFilter } from '../../../../types/table';\nimport {\n\tformatTranslation,\n\tgetLocaleComponentStrings,\n} from '../../../../utils/localization';\nimport { IconVariant } from '../../../atoms/icon/icon.component';\n\nexport type templateFunc = () => string;\nexport type buttonTemplateFunc = (amount: number) => string;\n\nconst header = cva([\n\t'flex flex-col gap-2 z-[1]',\n\t'w-full',\n\t'px-4 tablet:px-0',\n\n\t'desktop-xs:grid desktop-xs:grid-cols-2',\n]);\n\n@Component({\n\ttag: 'p-table-header',\n\tstyleUrl: 'table-header.component.css',\n\tshadow: true,\n})\nexport class TableHeader {\n\tprivate _defaultFilterButtonTemplate: templateFunc = () =>\n\t\tformatTranslation(this._locales.filter);\n\tprivate _defaultActionButtonTemplate: buttonTemplateFunc = (amount: number) =>\n\t\tthis.actionText\n\t\t\t? this.actionText\n\t\t\t: formatTranslation(\n\t\t\t\t\tamount === 0\n\t\t\t\t\t\t? this._locales.edit\n\t\t\t\t\t\t: amount === 1\n\t\t\t\t\t\t? this._locales.edit_single\n\t\t\t\t\t\t: this._locales.edit_plural,\n\t\t\t\t\t{ amount }\n\t\t\t );\n\n\t/*\n\t Quick filters to show\n\t /\n\t@Prop() quickFilters: QuickFilter[] = [];\n\n\t/\n\t Active quick filter identifier\n\t /\n\t@Prop() activeQuickFilterIdentifier: string;\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 Wether to show the search input\n\t /\n\t@Prop() enableSearch: boolean = true;\n\n\t/\n\t The amount of items that are selected\n\t /\n\t@Prop() itemsSelectedAmount: number = 0;\n\n\t/\n\t The query to show in the search bar\n\t /\n\t@Prop({ mutable: true }) query: string;\n\n\t/\n\t Wether to show the filter button\n\t /\n\t@Prop() enableFilter: boolean = true;\n\n\t/\n\t Wether to show the export button\n\t /\n\t@Prop() enableExport: boolean = true;\n\n\t/\n\t Wether to show the filter button on desktop\n\t /\n\t@Prop() enableFilterDesktop: boolean = true;\n\n\t/\n\t The amount of filters being selected\n\t /\n\t@Prop() selectedFiltersAmount: number;\n\n\t/\n\t The template for the filter button text\n\t /\n\t@Prop() filterButtonTemplate: templateFunc =\n\t\tthis._defaultFilterButtonTemplate;\n\n\t/\n\t Wether to show the action button\n\t /\n\t@Prop() enableAction: boolean = true;\n\n\t/\n\t Wether the action button is loading\n\t /\n\t@Prop() actionLoading: boolean = false;\n\n\t/\n\t The action button icon\n\t /\n\t@Prop() actionIcon: IconVariant = 'pencil';\n\n\t/\n\t The action button text if changed\n\t /\n\t@Prop() actionText: string;\n\n\t/\n\t Wether to enable the action button\n\t /\n\t@Prop({ mutable: true }) canUseAction: boolean = false;\n\n\t/\n\t The template for the action button text\n\t /\n\t@Prop() actionButtonTemplate: buttonTemplateFunc =\n\t\tthis._defaultActionButtonTemplate;\n\n\t/\n\t Event when one of the quick filters is clicked\n\t /\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tquickFilter: EventEmitter<QuickFilter>;\n\n\t/\n\t Event when the query changes\n\t /\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tqueryChange: EventEmitter<string>;\n\n\t/\n\t Event when the filter button is clicked\n\t /\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tfilter: EventEmitter<null>;\n\n\t/\n\t Event when the action button is clicked\n\t /\n\t@Event({\n\t\tbubbles: false,\n\t})\n\taction: EventEmitter<null>;\n\n\t/\n\t Event whenever the export button is clicked\n\t /\n\t@Event({\n\t\tbubbles: false,\n\t})\n\texport: EventEmitter<number>;\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\tprivate _queryObserver = new Subject<string>();\n\n\tcomponentWillLoad() {\n\t\tthis._setLocales();\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis._queryObserver\n\t\t\t.pipe(debounceTime(300), distinctUntilChanged())\n\t\t\t.subscribe(value => this.queryChange.emit(value));\n\t}\n\n\trender() {\n\t\tconst activeQuickFilter = this.quickFilters.find(\n\t\t\tf => f.identifier === this.activeQuickFilterIdentifier\n\t\t);\n\t\tconst mobileTotal =\n\t\t\t(this.selectedFiltersAmount \|\| 0) + (activeQuickFilter?.default ? 0 : 1);\n\n\t\tconst hasCustomFilterSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"custom-filter\"]'\n\t\t);\n\n\t\tconst hasCustomActionsSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"custom-actions\"]'\n\t\t);\n\n\t\treturn (\n\t\t\t<div class={header()}>\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='hidden h-8 w-3/4 rounded desktop-xs:flex'\n\t\t\t\t\t></p-loader>\n\t\t\t\t)}\n\n\t\t\t\t{!this.loading &&\n\t\t\t\t\t(hasCustomFilterSlot \|\| this.quickFilters.length > 0) && (\n\t\t\t\t\t\t<div class='col-start-1 flex flex-col justify-start gap-4 justify-self-start desktop-xs:flex-row'>\n\t\t\t\t\t\t\t{hasCustomFilterSlot && <slot name='custom-filter' />}\n\n\t\t\t\t\t\t\t{this.quickFilters.length > 0 && (\n\t\t\t\t\t\t\t\t<p-segment-container class='hidden desktop-xs:flex'>\n\t\t\t\t\t\t\t\t\t{this.quickFilters.map(item => (\n\t\t\t\t\t\t\t\t\t\t<p-segment-item\n\t\t\t\t\t\t\t\t\t\t\tactive={\n\t\t\t\t\t\t\t\t\t\t\t\titem.identifier === this.activeQuickFilterIdentifier\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => this.quickFilter.emit(item)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{typeof item.text === 'string' ? item.text : item.text()}{' '}\n\t\t\t\t\t\t\t\t\t\t\t{item?.count >= 0 ? `(${item.count})` : ''}\n\t\t\t\t\t\t\t\t\t\t</p-segment-item>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</p-segment-container>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t<div class='col-start-2 flex flex-col justify-end gap-2 desktop-xs:flex-row desktop-xs:items-center'>\n\t\t\t\t\t{this.enableSearch && (\n\t\t\t\t\t\t<p-field\n\t\t\t\t\t\t\ticon='search'\n\t\t\t\t\t\t\tclass='desktop-xs:max-w-60'\n\t\t\t\t\t\t\tplaceholder='Zoeken...'\n\t\t\t\t\t\t\tvalue={this.query}\n\t\t\t\t\t\t\tonValueChange={ev => this._queryObserver.next(ev.detail)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<div class='flex items-center gap-2'>\n\t\t\t\t\t\t{this.enableFilter && (\n\t\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\t\ticon='filter'\n\t\t\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\t\t\tclass={`w-full ${\n\t\t\t\t\t\t\t\t\tthis.enableFilterDesktop\n\t\t\t\t\t\t\t\t\t\t? 'desktop-xs:w-auto'\n\t\t\t\t\t\t\t\t\t\t: 'desktop-xs:hidden'\n\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\tonClick={() => this.filter.emit()}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this.filterButtonTemplate\n\t\t\t\t\t\t\t\t\t? this.filterButtonTemplate()\n\t\t\t\t\t\t\t\t\t: this._defaultFilterButtonTemplate()}\n\t\t\t\t\t\t\t\t{this.selectedFiltersAmount &&\n\t\t\t\t\t\t\t\t\tthis._getLabel(this.selectedFiltersAmount)}\n\t\t\t\t\t\t\t\t{mobileTotal > 0 && this._getLabel(mobileTotal, 'mobile')}\n\t\t\t\t\t\t\t</p-button>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{!this.loading && this.enableExport && this.enableFilter && (\n\t\t\t\t\t\t\t<p-divider\n\t\t\t\t\t\t\t\tvariant='vertical'\n\t\t\t\t\t\t\t\tclass='hidden h-4 tablet:flex'\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{!this.loading && this.enableExport && (\n\t\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\t\t\ticon='upload'\n\t\t\t\t\t\t\t\tclass='desktop-xs:auto w-full'\n\t\t\t\t\t\t\t\tonClick={() => this.export.emit()}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{formatTranslation(this._locales.export)}\n\t\t\t\t\t\t\t</p-button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.enableAction && this._buttonTemplate()}\n\n\t\t\t\t\t{hasCustomActionsSlot && <slot name='custom-actions' />}\n\t\t\t\t</div>\n\n\t\t\t\t{this.enableAction && this.canUseAction && (\n\t\t\t\t\t<div class='fixed bottom-0 left-0 block w-full border border-solid border-transparent border-t-mystic-dark bg-white p-4 desktop-xs:hidden'>\n\t\t\t\t\t\t{this._buttonTemplate(true)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\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 _buttonTemplate(mobile = false) {\n\t\treturn (\n\t\t\t<p-button\n\t\t\t\tclass={mobile ? 'w-full' : 'hidden desktop-xs:flex'}\n\t\t\t\ticon={this.actionIcon}\n\t\t\t\tdisabled={!this.canUseAction}\n\t\t\t\tonClick={() => this.action.emit()}\n\t\t\t\tloading={this.actionLoading}\n\t\t\t>\n\t\t\t\t{this.actionButtonTemplate\n\t\t\t\t\t? this.actionButtonTemplate(mobile ? this.itemsSelectedAmount : 0)\n\t\t\t\t\t: this._defaultActionButtonTemplate(\n\t\t\t\t\t\t\tmobile ? this.itemsSelectedAmount : 0\n\t\t\t\t\t )}\n\t\t\t</p-button>\n\t\t);\n\t}\n\n\tprivate _getLabel(amount, variant: 'mobile' \| 'default' = 'default') {\n\t\treturn (\n\t\t\t<p-badge\n\t\t\t\tclass={`ml-1 ${\n\t\t\t\t\tvariant === 'default'\n\t\t\t\t\t\t? 'hidden desktop-xs:flex'\n\t\t\t\t\t\t: 'flex desktop-xs:hidden'\n\t\t\t\t}`}\n\t\t\t>\n\t\t\t\t{amount}\n\t\t\t</p-badge>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/organisms/stepper/stepper.component.js CHANGED Viewed

@@ -120,6 +120,7 @@ export class Stepper {
             }
             item.number = i + 1;
             item.align = this.direction === 'vertical' ? this.align : 'start';
+            item.direction = this.direction;
             item.contentPosition = this.contentPosition;
         }
     }

package/dist/collection/components/organisms/stepper/stepper.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stepper.component.js","sourceRoot":"","sources":["../../../../src/components/organisms/stepper/stepper.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tElement,\n\tFragment,\n\th,\n\tProp,\n\tState,\n\tWatch,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nexport interface StepperStepItemObj {\n\tcontent: string;\n\tactive: boolean;\n\tfinished: boolean;\n}\n\nconst stepper = cva(['flex gap-2'], {\n\tvariants: {\n\t\tdirection: {\n\t\t\tvertical: 'w-full flex-col flex-wrap',\n\t\t\thorizontal: 'h-auto items-center',\n\t\t},\n\t\tgeneratedOnce: {\n\t\t\ttrue: 'opacity-100',\n\t\t\tfalse: 'opacity-0',\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-stepper',\n\tstyleUrl: 'stepper.component.css',\n\tshadow: true,\n})\nexport class Stepper {\n\t/*\n\t The steps but as a property, can also be used via slot\n\t /\n\t@Prop() steps: string \| string[] \| StepperStepItemObj[];\n\n\t/\n\t The currently active step\n\t /\n\t@Prop() activeStep: number = 1;\n\n\t/\n\t Wether to automatically apply active & finished to items\n\t /\n\t@Prop() enableAutoStatus: boolean = true;\n\n\t/\n\t The direction of the stepper\n\t /\n\t@Prop() direction: 'horizontal' \| 'vertical' = 'horizontal';\n\n\t/\n\t The alignment of the content in case of vertical direction\n\t /\n\t@Prop() align: 'start' \| 'center' \| 'end' = 'center';\n\n\t/\n\t The position of the content in case of vertical direction\n\t /\n\t@Prop() contentPosition: 'start' \| 'end' = 'end';\n\n\t/\n\t The host element\n\t /\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _generatedOnce = false;\n\t@State() private _loaded = false;\n\n\tprivate _generateTimeout: NodeJS.Timeout \| undefined;\n\tprivate _containerRef: HTMLDivElement;\n\tprivate _resizeObserver: ResizeObserver;\n\n\tprivate _hasSlotItems = false;\n\n\tcomponentDidLoad() {\n\t\tthis._hasSlotItems = !!this._el.querySelector(':scope > ');\n\t\tthis._loaded = true;\n\t}\n\n\tdisconnectCallback() {\n\t\tif (this._resizeObserver) {\n\t\t\tthis._resizeObserver.disconnect();\n\t\t}\n\t}\n\n\trender() {\n\t\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._hasSlotItems) {\n\t\t\tconst steps =\n\t\t\t\ttypeof this.steps === 'string' ? JSON.parse(this.steps) : this.steps;\n\t\t\tif (!steps?.length) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst items = steps.map((step, index) => {\n\t\t\t\tconst item = this._getItem(\n\t\t\t\t\ttypeof step === 'string'\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tactive: false,\n\t\t\t\t\t\t\t\tfinished: false,\n\t\t\t\t\t\t\t\tcontent: step,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: step,\n\t\t\t\t\tindex\n\t\t\t\t);\n\t\t\t\treturn (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t{item}\n\t\t\t\t\t\t{index < steps.length - 1 && this._getLine(index)}\n\t\t\t\t\t</Fragment>\n\t\t\t\t);\n\t\t\t});\n\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tclass={stepper({\n\t\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\t\tgeneratedOnce: true,\n\t\t\t\t\t})}\n\t\t\t\t\tref={ref => this._setContainerRef(ref)}\n\t\t\t\t>\n\t\t\t\t\t{items}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={stepper({\n\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\tgeneratedOnce: this._generatedOnce,\n\t\t\t\t})}\n\t\t\t\tref={ref => this._setContainerRef(ref)}\n\t\t\t>\n\t\t\t\t<slot onSlotchange={() => this._generateLinesOnce()} />\n\t\t\t</div>\n\t\t);\n\t}\n\n\t@Watch('align')\n\tprotected _onAlignChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\t@Watch('direction')\n\tprotected _onDirectionChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\t@Watch('activeStep')\n\tprotected _onActiveStepChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\tprivate _setContainerRef(ref: HTMLDivElement) {\n\t\tthis._containerRef = ref;\n\n\t\tif (this._resizeObserver) {\n\t\t\tthis._resizeObserver.disconnect();\n\t\t}\n\n\t\tthis._resizeObserver = new ResizeObserver(() => this._generateLinesOnce());\n\t\tthis._resizeObserver.observe(this._containerRef);\n\t}\n\n\tprivate _getItem(data: StepperStepItemObj, i: number) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\n\n\t\treturn (\n\t\t\t<p-stepper-item\n\t\t\t\tactive={this.enableAutoStatus ? i === activeStep : data.active}\n\t\t\t\tfinished={this.enableAutoStatus ? i < activeStep : data.finished}\n\t\t\t\tnumber={i + 1}\n\t\t\t\talign={this.direction === 'vertical' ? this.align : 'start'}\n\t\t\t\tcontentPosition={this.contentPosition}\n\t\t\t>\n\t\t\t\t{data.content}\n\t\t\t</p-stepper-item>\n\t\t);\n\t}\n\n\tprivate _getLine(i: number) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\n\t\treturn (\n\t\t\t<p-stepper-line\n\t\t\t\tactive={i < activeStep}\n\t\t\t\tdirection={this.direction}\n\t\t\t/>\n\t\t);\n\t}\n\n\tprivate _checkItems(items: NodeListOf<HTMLPStepperItemElement>) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\n\n\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\tconst item = items.item(i) as any;\n\n\t\t\tif (this.enableAutoStatus) {\n\t\t\t\titem.active = i === activeStep;\n\t\t\t\titem.finished = i < activeStep;\n\t\t\t}\n\n\t\t\titem.number = i + 1;\n\t\t\titem.align = this.direction === 'vertical' ? this.align : 'start';\n\t\t\titem.contentPosition = this.contentPosition;\n\t\t}\n\t}\n\n\tprivate _generateLinesOnce() {\n\t\tif (!this._hasSlotItems) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._generateTimeout) {\n\t\t\tclearTimeout(this._generateTimeout);\n\t\t\tthis._generateTimeout = null;\n\t\t}\n\n\t\tthis._generateTimeout = setTimeout(() => {\n\t\t\tconst items = this._el.querySelectorAll('p-stepper-item');\n\t\t\tthis._checkItems(items);\n\t\t\tthis._generateLines(items);\n\t\t\tthis._generateTimeout = null;\n\t\t}, 50);\n\t}\n\n\tprivate _generateLines(items: NodeListOf<HTMLPStepperItemElement>) {\n\t\tif (!this._el) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet activeStep = this.activeStep - 1 \|\| 0;\n\n\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\tconst item = items.item(i) as any;\n\n\t\t\tif (i < items.length - 1) {\n\t\t\t\tlet nextItem = item.nextElementSibling;\n\n\t\t\t\tif (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-item') {\n\t\t\t\t\tconst stepperLine = document.createElement('p-stepper-line');\n\t\t\t\t\tthis._el.insertBefore(stepperLine, nextItem);\n\t\t\t\t\tthis._setLineData(stepperLine, item, nextItem, i, activeStep);\n\n\t\t\t\t\tconst previous = stepperLine.previousElementSibling;\n\t\t\t\t\tif (previous && previous.tagName.toLowerCase() === 'p-stepper-line') {\n\t\t\t\t\t\tprevious.remove();\n\t\t\t\t\t}\n\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tif (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-line') {\n\t\t\t\t\tconst stepperLine = nextItem;\n\t\t\t\t\tnextItem = nextItem.nextElementSibling;\n\n\t\t\t\t\tif (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-item') {\n\t\t\t\t\t\tthis._setLineData(stepperLine, item, nextItem, i, activeStep);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (i > 0) {\n\t\t\t\tconst previousItem = item.previousElementSibling;\n\t\t\t\tif (\n\t\t\t\t\tpreviousItem &&\n\t\t\t\t\tpreviousItem.tagName.toLowerCase() === 'p-stepper-line'\n\t\t\t\t) {\n\t\t\t\t\tpreviousItem.direction = this.direction;\n\t\t\t\t\tpreviousItem.active = item.active \|\| item.finished;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst lines = this._el.querySelectorAll(\n\t\t\t'p-stepper-line:not(:has(+ p-stepper-item)), p-stepper-line:first-child'\n\t\t);\n\t\tfor (let j = lines.length - 1; j >= 0; j--) {\n\t\t\tconst line = lines.item(j);\n\t\t\tline.remove();\n\t\t}\n\n\t\tif (!this._generatedOnce) {\n\t\t\tthis._generatedOnce = true;\n\t\t}\n\t}\n\n\tprivate _setLineData(\n\t\tstepperLine: HTMLPStepperLineElement,\n\t\titem: HTMLPStepperItemElement,\n\t\tnextItem: HTMLPStepperItemElement,\n\t\ti: number,\n\t\tactiveStep: number\n\t) {\n\t\tlet heightDiff = item.clientHeight - 24;\n\t\tlet heightDiffNext = nextItem.clientHeight - 24;\n\n\t\tif (this.align === 'center') {\n\t\t\theightDiff = heightDiff / 2;\n\t\t\theightDiffNext = heightDiffNext / 2;\n\t\t}\n\n\t\tstepperLine.direction = this.direction;\n\t\tstepperLine.active = i < activeStep;\n\n\t\tif (heightDiff > 0 && this.direction === 'vertical') {\n\t\t\tlet totalHeight = 0;\n\n\t\t\tstepperLine.style.marginTop = '0';\n\t\t\tstepperLine.style.marginBottom = '0';\n\n\t\t\tif (this.align === 'start' \|\| this.align === 'center') {\n\t\t\t\tstepperLine.style.marginTop = `-${heightDiff / 16}rem`;\n\t\t\t\ttotalHeight += heightDiff;\n\t\t\t}\n\n\t\t\tif (this.align === 'center' \|\| this.align === 'end') {\n\t\t\t\tstepperLine.style.marginBottom = `-${heightDiffNext / 16}rem`;\n\t\t\t\ttotalHeight += heightDiffNext;\n\t\t\t}\n\n\t\t\tstepperLine.style.minHeight = `calc(${totalHeight / 16}rem)`;\n\t\t}\n\t}\n}\n"]}
1	+ {"version":3,"file":"stepper.component.js","sourceRoot":"","sources":["../../../../src/components/organisms/stepper/stepper.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tElement,\n\tFragment,\n\th,\n\tProp,\n\tState,\n\tWatch,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nexport interface StepperStepItemObj {\n\tcontent: string;\n\tactive: boolean;\n\tfinished: boolean;\n}\n\nconst stepper = cva(['flex gap-2'], {\n\tvariants: {\n\t\tdirection: {\n\t\t\tvertical: 'w-full flex-col flex-wrap',\n\t\t\thorizontal: 'h-auto items-center',\n\t\t},\n\t\tgeneratedOnce: {\n\t\t\ttrue: 'opacity-100',\n\t\t\tfalse: 'opacity-0',\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-stepper',\n\tstyleUrl: 'stepper.component.css',\n\tshadow: true,\n})\nexport class Stepper {\n\t/*\n\t The steps but as a property, can also be used via slot\n\t /\n\t@Prop() steps: string \| string[] \| StepperStepItemObj[];\n\n\t/\n\t The currently active step\n\t /\n\t@Prop() activeStep: number = 1;\n\n\t/\n\t Wether to automatically apply active & finished to items\n\t /\n\t@Prop() enableAutoStatus: boolean = true;\n\n\t/\n\t The direction of the stepper\n\t /\n\t@Prop() direction: 'horizontal' \| 'vertical' = 'horizontal';\n\n\t/\n\t The alignment of the content in case of vertical direction\n\t /\n\t@Prop() align: 'start' \| 'center' \| 'end' = 'center';\n\n\t/\n\t The position of the content in case of vertical direction\n\t /\n\t@Prop() contentPosition: 'start' \| 'end' = 'end';\n\n\t/\n\t The host element\n\t /\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _generatedOnce = false;\n\t@State() private _loaded = false;\n\n\tprivate _generateTimeout: NodeJS.Timeout \| undefined;\n\tprivate _containerRef: HTMLDivElement;\n\tprivate _resizeObserver: ResizeObserver;\n\n\tprivate _hasSlotItems = false;\n\n\tcomponentDidLoad() {\n\t\tthis._hasSlotItems = !!this._el.querySelector(':scope > ');\n\t\tthis._loaded = true;\n\t}\n\n\tdisconnectCallback() {\n\t\tif (this._resizeObserver) {\n\t\t\tthis._resizeObserver.disconnect();\n\t\t}\n\t}\n\n\trender() {\n\t\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._hasSlotItems) {\n\t\t\tconst steps =\n\t\t\t\ttypeof this.steps === 'string' ? JSON.parse(this.steps) : this.steps;\n\t\t\tif (!steps?.length) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst items = steps.map((step, index) => {\n\t\t\t\tconst item = this._getItem(\n\t\t\t\t\ttypeof step === 'string'\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tactive: false,\n\t\t\t\t\t\t\t\tfinished: false,\n\t\t\t\t\t\t\t\tcontent: step,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: step,\n\t\t\t\t\tindex\n\t\t\t\t);\n\t\t\t\treturn (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t{item}\n\t\t\t\t\t\t{index < steps.length - 1 && this._getLine(index)}\n\t\t\t\t\t</Fragment>\n\t\t\t\t);\n\t\t\t});\n\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tclass={stepper({\n\t\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\t\tgeneratedOnce: true,\n\t\t\t\t\t})}\n\t\t\t\t\tref={ref => this._setContainerRef(ref)}\n\t\t\t\t>\n\t\t\t\t\t{items}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={stepper({\n\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\tgeneratedOnce: this._generatedOnce,\n\t\t\t\t})}\n\t\t\t\tref={ref => this._setContainerRef(ref)}\n\t\t\t>\n\t\t\t\t<slot onSlotchange={() => this._generateLinesOnce()} />\n\t\t\t</div>\n\t\t);\n\t}\n\n\t@Watch('align')\n\tprotected _onAlignChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\t@Watch('direction')\n\tprotected _onDirectionChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\t@Watch('activeStep')\n\tprotected _onActiveStepChange() {\n\t\tthis._generateLinesOnce();\n\t}\n\n\tprivate _setContainerRef(ref: HTMLDivElement) {\n\t\tthis._containerRef = ref;\n\n\t\tif (this._resizeObserver) {\n\t\t\tthis._resizeObserver.disconnect();\n\t\t}\n\n\t\tthis._resizeObserver = new ResizeObserver(() => this._generateLinesOnce());\n\t\tthis._resizeObserver.observe(this._containerRef);\n\t}\n\n\tprivate _getItem(data: StepperStepItemObj, i: number) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\n\n\t\treturn (\n\t\t\t<p-stepper-item\n\t\t\t\tactive={this.enableAutoStatus ? i === activeStep : data.active}\n\t\t\t\tfinished={this.enableAutoStatus ? i < activeStep : data.finished}\n\t\t\t\tnumber={i + 1}\n\t\t\t\talign={this.direction === 'vertical' ? this.align : 'start'}\n\t\t\t\tcontentPosition={this.contentPosition}\n\t\t\t>\n\t\t\t\t{data.content}\n\t\t\t</p-stepper-item>\n\t\t);\n\t}\n\n\tprivate _getLine(i: number) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\n\t\treturn (\n\t\t\t<p-stepper-line\n\t\t\t\tactive={i < activeStep}\n\t\t\t\tdirection={this.direction}\n\t\t\t/>\n\t\t);\n\t}\n\n\tprivate _checkItems(items: NodeListOf<HTMLPStepperItemElement>) {\n\t\tconst activeStep = this.activeStep - 1 \|\| 0;\n\n\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\tconst item = items.item(i) as any;\n\n\t\t\tif (this.enableAutoStatus) {\n\t\t\t\titem.active = i === activeStep;\n\t\t\t\titem.finished = i < activeStep;\n\t\t\t}\n\n\t\t\titem.number = i + 1;\n\t\t\titem.align = this.direction === 'vertical' ? this.align : 'start';\n\t\t\titem.direction = this.direction;\n\t\t\titem.contentPosition = this.contentPosition;\n\t\t}\n\t}\n\n\tprivate _generateLinesOnce() {\n\t\tif (!this._hasSlotItems) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._generateTimeout) {\n\t\t\tclearTimeout(this._generateTimeout);\n\t\t\tthis._generateTimeout = null;\n\t\t}\n\n\t\tthis._generateTimeout = setTimeout(() => {\n\t\t\tconst items = this._el.querySelectorAll('p-stepper-item');\n\t\t\tthis._checkItems(items);\n\t\t\tthis._generateLines(items);\n\t\t\tthis._generateTimeout = null;\n\t\t}, 50);\n\t}\n\n\tprivate _generateLines(items: NodeListOf<HTMLPStepperItemElement>) {\n\t\tif (!this._el) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet activeStep = this.activeStep - 1 \|\| 0;\n\n\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\tconst item = items.item(i) as any;\n\n\t\t\tif (i < items.length - 1) {\n\t\t\t\tlet nextItem = item.nextElementSibling;\n\n\t\t\t\tif (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-item') {\n\t\t\t\t\tconst stepperLine = document.createElement('p-stepper-line');\n\t\t\t\t\tthis._el.insertBefore(stepperLine, nextItem);\n\t\t\t\t\tthis._setLineData(stepperLine, item, nextItem, i, activeStep);\n\n\t\t\t\t\tconst previous = stepperLine.previousElementSibling;\n\t\t\t\t\tif (previous && previous.tagName.toLowerCase() === 'p-stepper-line') {\n\t\t\t\t\t\tprevious.remove();\n\t\t\t\t\t}\n\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tif (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-line') {\n\t\t\t\t\tconst stepperLine = nextItem;\n\t\t\t\t\tnextItem = nextItem.nextElementSibling;\n\n\t\t\t\t\tif (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-item') {\n\t\t\t\t\t\tthis._setLineData(stepperLine, item, nextItem, i, activeStep);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (i > 0) {\n\t\t\t\tconst previousItem = item.previousElementSibling;\n\t\t\t\tif (\n\t\t\t\t\tpreviousItem &&\n\t\t\t\t\tpreviousItem.tagName.toLowerCase() === 'p-stepper-line'\n\t\t\t\t) {\n\t\t\t\t\tpreviousItem.direction = this.direction;\n\t\t\t\t\tpreviousItem.active = item.active \|\| item.finished;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst lines = this._el.querySelectorAll(\n\t\t\t'p-stepper-line:not(:has(+ p-stepper-item)), p-stepper-line:first-child'\n\t\t);\n\t\tfor (let j = lines.length - 1; j >= 0; j--) {\n\t\t\tconst line = lines.item(j);\n\t\t\tline.remove();\n\t\t}\n\n\t\tif (!this._generatedOnce) {\n\t\t\tthis._generatedOnce = true;\n\t\t}\n\t}\n\n\tprivate _setLineData(\n\t\tstepperLine: HTMLPStepperLineElement,\n\t\titem: HTMLPStepperItemElement,\n\t\tnextItem: HTMLPStepperItemElement,\n\t\ti: number,\n\t\tactiveStep: number\n\t) {\n\t\tlet heightDiff = item.clientHeight - 24;\n\t\tlet heightDiffNext = nextItem.clientHeight - 24;\n\n\t\tif (this.align === 'center') {\n\t\t\theightDiff = heightDiff / 2;\n\t\t\theightDiffNext = heightDiffNext / 2;\n\t\t}\n\n\t\tstepperLine.direction = this.direction;\n\t\tstepperLine.active = i < activeStep;\n\n\t\tif (heightDiff > 0 && this.direction === 'vertical') {\n\t\t\tlet totalHeight = 0;\n\n\t\t\tstepperLine.style.marginTop = '0';\n\t\t\tstepperLine.style.marginBottom = '0';\n\n\t\t\tif (this.align === 'start' \|\| this.align === 'center') {\n\t\t\t\tstepperLine.style.marginTop = `-${heightDiff / 16}rem`;\n\t\t\t\ttotalHeight += heightDiff;\n\t\t\t}\n\n\t\t\tif (this.align === 'center' \|\| this.align === 'end') {\n\t\t\t\tstepperLine.style.marginBottom = `-${heightDiffNext / 16}rem`;\n\t\t\t\ttotalHeight += heightDiffNext;\n\t\t\t}\n\n\t\t\tstepperLine.style.minHeight = `calc(${totalHeight / 16}rem)`;\n\t\t}\n\t}\n}\n"]}

package/dist/components/{p-C9Hyi74u.js → p--h9uYqpp.js} RENAMED Viewed

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h } from './p-tdjn65Lz.js';
 import { c as cva } from './p-CBWjHURv.js';
 import { a as asBoolean } from './p-C5CTp9IA.js';
-const stepperItemComponentCss = "*{box-sizing:border-box}.static{position:static!important}.mt-\\[1px\\]{margin-top:1px!important}.flex{display:flex!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.flex-1{flex:1 1 0%!important}.flex-row-reverse{flex-direction:row-reverse!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!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-dark-teal-400{--tw-border-opacity:1!important;border-color:rgb(51 116 109/var(--tw-border-opacity,1))!important}.bg-dark-teal-400{--tw-bg-opacity:1!important;background-color:rgb(51 116 109/var(--tw-bg-opacity,1))!important}.bg-dark-teal-50{--tw-bg-opacity:1!important;background-color:rgb(229 238 237/var(--tw-bg-opacity,1))!important}.text-center{text-align:center!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-medium{font-weight:500!important}.text-black-teal-400{--tw-text-opacity:1!important;color:rgb(53 85 80/var(--tw-text-opacity,1))!important}.text-black-teal-500{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.text-dark-teal-400{--tw-text-opacity:1!important;color:rgb(51 116 109/var(--tw-text-opacity,1))!important}.text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}";
+const stepperItemComponentCss = "*{box-sizing:border-box}.static{position:static!important}.mt-\\[1px\\]{margin-top:1px!important}.flex{display:flex!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.flex-1{flex:1 1 0%!important}.flex-row-reverse{flex-direction:row-reverse!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!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-dark-teal-400{--tw-border-opacity:1!important;border-color:rgb(51 116 109/var(--tw-border-opacity,1))!important}.bg-dark-teal-400{--tw-bg-opacity:1!important;background-color:rgb(51 116 109/var(--tw-bg-opacity,1))!important}.bg-dark-teal-50{--tw-bg-opacity:1!important;background-color:rgb(229 238 237/var(--tw-bg-opacity,1))!important}.text-center{text-align:center!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-medium{font-weight:500!important}.text-black-teal-400{--tw-text-opacity:1!important;color:rgb(53 85 80/var(--tw-text-opacity,1))!important}.text-black-teal-500{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.text-dark-teal-400{--tw-text-opacity:1!important;color:rgb(51 116 109/var(--tw-text-opacity,1))!important}.text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}@media (min-width:64rem){.desktop-xs\\:inline-block{display:inline-block!important}}";
 const item = cva('flex gap-2', {
     variants: {
@@ -61,6 +61,10 @@ const content = cva('text-sm font-medium flex-1 mt-[1px]', {
             true: null,
             false: null,
         },
+        direction: {
+            horizontal: null,
+            vertical: null,
+        },
     },
     compoundVariants: [
         {
@@ -78,6 +82,11 @@ const content = cva('text-sm font-medium flex-1 mt-[1px]', {
             finished: true,
             class: 'text-black-teal-500',
         },
+        {
+            direction: 'horizontal',
+            active: false,
+            class: 'hidden desktop-xs:inline-block',
+        },
     ],
 });
 const StepperItem = /*@__PURE__*/ proxyCustomElement(class StepperItem extends H {
@@ -90,6 +99,10 @@ const StepperItem = /*@__PURE__*/ proxyCustomElement(class StepperItem extends H
      * The number of the step
      */
     number = 1;
+    /**
+     * The direction of the item
+     */
+    direction = 'horizontal';
     /**
      * The alignment of the content in case of vertical direction
      */
@@ -107,20 +120,22 @@ const StepperItem = /*@__PURE__*/ proxyCustomElement(class StepperItem extends H
      */
     active = false;
     render() {
-        return (h("div", { key: '46db52b42cff8898eb2f537d47708ba768929048', class: item({
+        return (h("div", { key: '60878b54aefa04d789a8f12f5314065422f6e3ae', class: item({
                 align: this.align,
                 contentPosition: this.contentPosition,
-            }) }, h("div", { key: '72a63859b7ebb91e5f08c20956f0abcfc84bbaf6', class: circle({
+            }) }, h("div", { key: 'cde47d61849fb9601a70e65d640d75fecbabd7b1', class: circle({
                 active: asBoolean(this.active),
                 finished: asBoolean(this.finished),
-            }) }, this.number), h("div", { key: '1c836c89f03e5a91de235ba2542954a9dd455fb9', class: content({
+            }) }, this.number), h("div", { key: '206a405e10e0aafc7980cf5df7618d2b096e9760', class: content({
                 active: asBoolean(this.active),
                 finished: asBoolean(this.finished),
-            }) }, h("slot", { key: 'd1a37d6d005c8666c9763ac5e804352f759447ca' }))));
+                direction: this.direction,
+            }) }, h("slot", { key: '56714497055ae6f9889339f45fdb6e44dacd57c1' }))));
     }
     static get style() { return stepperItemComponentCss; }
 }, [1, "p-stepper-item", {
         "number": [2],
+        "direction": [1],
         "align": [1],
         "contentPosition": [1, "content-position"],
         "finished": [4],
@@ -142,6 +157,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { StepperItem as S, defineCustomElement as d };
-//# sourceMappingURL=p-C9Hyi74u.js.map
+//# sourceMappingURL=p--h9uYqpp.js.map
-//# sourceMappingURL=p-C9Hyi74u.js.map
+//# sourceMappingURL=p--h9uYqpp.js.map

package/dist/components/p--h9uYqpp.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p--h9uYqpp.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/atoms/stepper/item/stepper-item.component.css?tag=p-stepper-item&encapsulation=shadow","src/components/atoms/stepper/item/stepper-item.component.tsx"],"sourcesContent":["","import { Component, h, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { asBoolean } from '../../../../utils/as-boolean';\n\nconst item = cva('flex gap-2', {\n\tvariants: {\n\t\talign: {\n\t\t\tstart: 'items-start',\n\t\t\tcenter: 'items-center',\n\t\t\tend: 'items-end',\n\t\t},\n\t\tcontentPosition: {\n\t\t\tstart: 'flex-row-reverse',\n\t\t\tend: null,\n\t\t},\n\t},\n});\n\nconst circle = cva(\n\t[\n\t\t'h-6 w-6 flex items-center justify-center',\n\t\t'text-sm text-center font-medium',\n\t\t'border border-solid border-dark-teal-400',\n\t\t'rounded-full',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tfinished: {\n\t\t\t\ttrue: null,\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tactive: {\n\t\t\t\ttrue: null,\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tfinished: false,\n\t\t\t\tactive: false,\n\t\t\t\tclass: 'text-dark-teal-400 bg-dark-teal-50',\n\t\t\t},\n\t\t\t{\n\t\t\t\tactive: true,\n\t\t\t\tfinished: false,\n\t\t\t\tclass: 'text-white bg-dark-teal-400',\n\t\t\t},\n\t\t\t{\n\t\t\t\tactive: false,\n\t\t\t\tfinished: true,\n\t\t\t\tclass: 'text-white bg-dark-teal-400',\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst content = cva('text-sm font-medium flex-1 mt-[1px]', {\n\tvariants: {\n\t\tfinished: {\n\t\t\ttrue: null,\n\t\t\tfalse: null,\n\t\t},\n\t\tactive: {\n\t\t\ttrue: null,\n\t\t\tfalse: null,\n\t\t},\n\t\tdirection: {\n\t\t\thorizontal: null,\n\t\t\tvertical: null,\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tfinished: false,\n\t\t\tactive: false,\n\t\t\tclass: 'text-black-teal-400',\n\t\t},\n\t\t{\n\t\t\tactive: true,\n\t\t\tfinished: false,\n\t\t\tclass: 'text-black-teal-500',\n\t\t},\n\t\t{\n\t\t\tactive: false,\n\t\t\tfinished: true,\n\t\t\tclass: 'text-black-teal-500',\n\t\t},\n\t\t{\n\t\t\tdirection: 'horizontal',\n\t\t\tactive: false,\n\t\t\tclass: 'hidden desktop-xs:inline-block',\n\t\t},\n\t],\n});\n\n@Component({\n\ttag: 'p-stepper-item',\n\tstyleUrl: 'stepper-item.component.css',\n\tshadow: true,\n})\nexport class StepperItem {\n\t/**\n\t * The number of the step\n\t */\n\t@Prop() number: number = 1;\n\n\t/**\n\t * The direction of the item\n\t */\n\t@Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n\t/**\n\t * The alignment of the content in case of vertical direction\n\t */\n\t@Prop() align: 'start' | 'center' | 'end' = 'center';\n\n\t/**\n\t * The position of the content in case of vertical direction\n\t */\n\t@Prop() contentPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * Wether the step is finished\n\t */\n\t@Prop() finished: boolean = false;\n\n\t/**\n\t * Wether the step is active\n\t */\n\t@Prop() active: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={item({\n\t\t\t\t\talign: this.align,\n\t\t\t\t\tcontentPosition: this.contentPosition,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclass={circle({\n\t\t\t\t\t\tactive: asBoolean(this.active),\n\t\t\t\t\t\tfinished: asBoolean(this.finished),\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{this.number}\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclass={content({\n\t\t\t\t\t\tactive: asBoolean(this.active),\n\t\t\t\t\t\tfinished: asBoolean(this.finished),\n\t\t\t\t\t\tdirection: this.direction,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/{p-Ppklb4qs.js → p-BHO_MniQ.js} RENAMED Viewed

@@ -1,13 +1,13 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-tdjn65Lz.js';
 import { c as cva } from './p-CBWjHURv.js';
-import { d as defineCustomElement$2, a as defaultSize, b as defaultSizeOptions } from './p-C4qAvszO.js';
-import { d as defineCustomElement$b } from './p-CIoY84Y6.js';
+import { d as defineCustomElement$2, a as defaultSize, b as defaultSizeOptions } from './p-DNAQlM-T.js';
+import { d as defineCustomElement$b } from './p-qXjT088h.js';
 import { d as defineCustomElement$a } from './p-C1Fsnz5F.js';
 import { d as defineCustomElement$9 } from './p-C0ZWBE1t.js';
 import { d as defineCustomElement$8 } from './p-CA6-0EkK.js';
-import { d as defineCustomElement$7 } from './p-C9iJS8ET.js';
+import { d as defineCustomElement$7 } from './p-CfilaLs-.js';
 import { d as defineCustomElement$6 } from './p-ZOW6vT-R.js';
-import { d as defineCustomElement$5 } from './p-B60b7s3F.js';
+import { d as defineCustomElement$5 } from './p-CR2m4pAn.js';
 import { d as defineCustomElement$4 } from './p-CJPrTM14.js';
 import { d as defineCustomElement$3 } from './p-D7OHNXA8.js';
 import { d as defineCustomElement$1 } from './p-BuB74H5T.js';
@@ -225,6 +225,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { TableFooter as T, defineCustomElement as d };
-//# sourceMappingURL=p-Ppklb4qs.js.map
+//# sourceMappingURL=p-BHO_MniQ.js.map
-//# sourceMappingURL=p-Ppklb4qs.js.map
+//# sourceMappingURL=p-BHO_MniQ.js.map

package/dist/components/{p-Ppklb4qs.js.map → p-BHO_MniQ.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~Ppklb4qs~~.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/molecules/table/footer/table-footer.component.css?tag=p-table-footer&encapsulation=shadow","src/components/molecules/table/footer/table-footer.component.tsx"],"sourcesContent":[":host {\n\t@apply sticky;\n\t@apply z-[1];\n\n\t--tw-content: '';\n}\n","import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\th,\n\tProp,\n\tElement,\n\tState,\n\tListen,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport {\n\tdefaultSize,\n\tdefaultSizeOptions,\n} from '../../../molecules/pagination/size/constants';\n\nconst footer = cva(\n\t[\n\t\t'justify-center relative',\n\t\t'w-full py-8 px-6',\n\t\t'after:absolute after:top-0 after:left-0 after:z-[0]',\n\t\t'after:w-full after:h-full after:transition-opacity',\n\t\t'after:bg-gradient-to-t after:from-white after:via-white/80 after:to-transparent',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tpinned: {\n\t\t\t\tfalse: 'after:opacity-0',\n\t\t\t\ttrue: 'after:opacity-100',\n\t\t\t},\n\t\t\thidden: {\n\t\t\t\tfalse: 'flex',\n\t\t\t\ttrue: 'hidden',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-table-footer',\n\tstyleUrl: 'table-footer.component.css',\n\tshadow: true,\n})\nexport class TableFooter {\n\t/*\n\t Wether to enable pagination size select\n\t /\n\t@Prop() enablePaginationSize: boolean = true;\n\n\t/\n\t Wether to enable pagination pages\n\t /\n\t@Prop() enablePaginationPages: 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 footer is hidden or nog\n\t /\n\t@Event({\n\t\tbubbles: false,\n\t})\n\thiddenChange: EventEmitter<boolean>;\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@State() private _isPinned = false;\n\t@State() private _hasPaginationPages = true;\n\n\tprivate _hidePageSizeSelect = false;\n\tprivate _hidden = false;\n\n\tcomponentDidLoad() {\n\t\tthis._checkStuck();\n\t}\n\n\tcomponentWillRender() {\n\t\tthis._hidePageSizeSelect =\n\t\t\tthis.hideOnSinglePage && this.total <= this.pageSizeOptions?.[0];\n\n\t\tconst hidden =\n\t\t\t(this._hidePageSizeSelect && !this._hasPaginationPages) \|\|\n\t\t\t(!this.enablePaginationSize && !this.enablePaginationPages);\n\n\t\tif (hidden !== this._hidden) {\n\t\t\tthis._hidden = hidden;\n\t\t\tthis.hiddenChange.emit(hidden);\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={footer({\n\t\t\t\t\tpinned: this._isPinned,\n\t\t\t\t\thidden: this._hidden,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{(this.enablePaginationPages \|\| this.enablePaginationSize) &&\n\t\t\t\t\tthis.total > 0 && (\n\t\t\t\t\t\t<p-pagination\n\t\t\t\t\t\t\tclass='z-[2]'\n\t\t\t\t\t\t\tenablePaginationSize={this.enablePaginationSize}\n\t\t\t\t\t\t\tenablePaginationPages={this.enablePaginationPages}\n\t\t\t\t\t\t\tpageSize={this.pageSize}\n\t\t\t\t\t\t\tpageSizeOptions={this.pageSizeOptions}\n\t\t\t\t\t\t\tonPageSizeChange={({ detail }) => this._changePageSize(detail)}\n\t\t\t\t\t\t\tpage={this.page}\n\t\t\t\t\t\t\thideOnSinglePage={this.hideOnSinglePage}\n\t\t\t\t\t\t\tonPageChange={({ detail }) => this.pageChange.emit(detail)}\n\t\t\t\t\t\t\ttotal={this.total}\n\t\t\t\t\t\t\tonPagesChange={({ detail }) =>\n\t\t\t\t\t\t\t\t(this._hasPaginationPages = detail > 1)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t</div>\n\t\t);\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\tprivate _checkStuck() {\n\t\tconst rect = this._el.getBoundingClientRect();\n\t\tconst modal = this._el.closest('p-modal');\n\t\tconst layout = document.querySelector('p-layout');\n\n\t\tif (modal) {\n\t\t\tconst modalBody = modal.shadowRoot.querySelector('p-modal-body');\n\t\t\tconst innerContent = modalBody.shadowRoot.querySelector('div');\n\n\t\t\tconst innerContentComputed = getComputedStyle(innerContent);\n\n\t\t\tconst modalPaddingBottom = parseInt(\n\t\t\t\tinnerContentComputed.paddingBottom,\n\t\t\t\t10\n\t\t\t);\n\t\t\tthis._el.style.bottom = `-${modalPaddingBottom}px`;\n\t\t\tthis._el.style.marginBottom = `-${modalPaddingBottom - 1}px`;\n\t\t}\n\n\t\tif (layout && !modal) {\n\t\t\tconst innerContent = layout.shadowRoot.querySelector('.content');\n\t\t\tconst innerContentComputed = getComputedStyle(innerContent);\n\n\t\t\tconst layoutPaddingBottom = parseInt(\n\t\t\t\tinnerContentComputed.paddingBottom,\n\t\t\t\t10\n\t\t\t);\n\t\t\tthis._el.style.bottom = `-${layoutPaddingBottom}px`;\n\t\t\tthis._el.style.marginBottom = `-${layoutPaddingBottom - 1}px`;\n\t\t}\n\n\t\tthis._isPinned = window.innerHeight - rect.bottom == 0;\n\t}\n\n\t@Listen('scroll', { target: 'window' })\n\tonScroll() {\n\t\tthis._checkStuck();\n\t}\n}\n"],"version":3}
1	+ {"file":"p-BHO_MniQ.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/molecules/table/footer/table-footer.component.css?tag=p-table-footer&encapsulation=shadow","src/components/molecules/table/footer/table-footer.component.tsx"],"sourcesContent":[":host {\n\t@apply sticky;\n\t@apply z-[1];\n\n\t--tw-content: '';\n}\n","import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\th,\n\tProp,\n\tElement,\n\tState,\n\tListen,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport {\n\tdefaultSize,\n\tdefaultSizeOptions,\n} from '../../../molecules/pagination/size/constants';\n\nconst footer = cva(\n\t[\n\t\t'justify-center relative',\n\t\t'w-full py-8 px-6',\n\t\t'after:absolute after:top-0 after:left-0 after:z-[0]',\n\t\t'after:w-full after:h-full after:transition-opacity',\n\t\t'after:bg-gradient-to-t after:from-white after:via-white/80 after:to-transparent',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tpinned: {\n\t\t\t\tfalse: 'after:opacity-0',\n\t\t\t\ttrue: 'after:opacity-100',\n\t\t\t},\n\t\t\thidden: {\n\t\t\t\tfalse: 'flex',\n\t\t\t\ttrue: 'hidden',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-table-footer',\n\tstyleUrl: 'table-footer.component.css',\n\tshadow: true,\n})\nexport class TableFooter {\n\t/*\n\t Wether to enable pagination size select\n\t /\n\t@Prop() enablePaginationSize: boolean = true;\n\n\t/\n\t Wether to enable pagination pages\n\t /\n\t@Prop() enablePaginationPages: 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 footer is hidden or nog\n\t /\n\t@Event({\n\t\tbubbles: false,\n\t})\n\thiddenChange: EventEmitter<boolean>;\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@State() private _isPinned = false;\n\t@State() private _hasPaginationPages = true;\n\n\tprivate _hidePageSizeSelect = false;\n\tprivate _hidden = false;\n\n\tcomponentDidLoad() {\n\t\tthis._checkStuck();\n\t}\n\n\tcomponentWillRender() {\n\t\tthis._hidePageSizeSelect =\n\t\t\tthis.hideOnSinglePage && this.total <= this.pageSizeOptions?.[0];\n\n\t\tconst hidden =\n\t\t\t(this._hidePageSizeSelect && !this._hasPaginationPages) \|\|\n\t\t\t(!this.enablePaginationSize && !this.enablePaginationPages);\n\n\t\tif (hidden !== this._hidden) {\n\t\t\tthis._hidden = hidden;\n\t\t\tthis.hiddenChange.emit(hidden);\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={footer({\n\t\t\t\t\tpinned: this._isPinned,\n\t\t\t\t\thidden: this._hidden,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{(this.enablePaginationPages \|\| this.enablePaginationSize) &&\n\t\t\t\t\tthis.total > 0 && (\n\t\t\t\t\t\t<p-pagination\n\t\t\t\t\t\t\tclass='z-[2]'\n\t\t\t\t\t\t\tenablePaginationSize={this.enablePaginationSize}\n\t\t\t\t\t\t\tenablePaginationPages={this.enablePaginationPages}\n\t\t\t\t\t\t\tpageSize={this.pageSize}\n\t\t\t\t\t\t\tpageSizeOptions={this.pageSizeOptions}\n\t\t\t\t\t\t\tonPageSizeChange={({ detail }) => this._changePageSize(detail)}\n\t\t\t\t\t\t\tpage={this.page}\n\t\t\t\t\t\t\thideOnSinglePage={this.hideOnSinglePage}\n\t\t\t\t\t\t\tonPageChange={({ detail }) => this.pageChange.emit(detail)}\n\t\t\t\t\t\t\ttotal={this.total}\n\t\t\t\t\t\t\tonPagesChange={({ detail }) =>\n\t\t\t\t\t\t\t\t(this._hasPaginationPages = detail > 1)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t</div>\n\t\t);\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\tprivate _checkStuck() {\n\t\tconst rect = this._el.getBoundingClientRect();\n\t\tconst modal = this._el.closest('p-modal');\n\t\tconst layout = document.querySelector('p-layout');\n\n\t\tif (modal) {\n\t\t\tconst modalBody = modal.shadowRoot.querySelector('p-modal-body');\n\t\t\tconst innerContent = modalBody.shadowRoot.querySelector('div');\n\n\t\t\tconst innerContentComputed = getComputedStyle(innerContent);\n\n\t\t\tconst modalPaddingBottom = parseInt(\n\t\t\t\tinnerContentComputed.paddingBottom,\n\t\t\t\t10\n\t\t\t);\n\t\t\tthis._el.style.bottom = `-${modalPaddingBottom}px`;\n\t\t\tthis._el.style.marginBottom = `-${modalPaddingBottom - 1}px`;\n\t\t}\n\n\t\tif (layout && !modal) {\n\t\t\tconst innerContent = layout.shadowRoot.querySelector('.content');\n\t\t\tconst innerContentComputed = getComputedStyle(innerContent);\n\n\t\t\tconst layoutPaddingBottom = parseInt(\n\t\t\t\tinnerContentComputed.paddingBottom,\n\t\t\t\t10\n\t\t\t);\n\t\t\tthis._el.style.bottom = `-${layoutPaddingBottom}px`;\n\t\t\tthis._el.style.marginBottom = `-${layoutPaddingBottom - 1}px`;\n\t\t}\n\n\t\tthis._isPinned = window.innerHeight - rect.bottom == 0;\n\t}\n\n\t@Listen('scroll', { target: 'window' })\n\tonScroll() {\n\t\tthis._checkStuck();\n\t}\n}\n"],"version":3}

package/dist/components/{p-B60b7s3F.js → p-CR2m4pAn.js} RENAMED Viewed

@@ -1,11 +1,11 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-tdjn65Lz.js';
-import { d as defineCustomElement$2, a as defaultSize, b as defaultSizeOptions } from './p-C4qAvszO.js';
+import { d as defineCustomElement$2, a as defaultSize, b as defaultSizeOptions } from './p-DNAQlM-T.js';
 import { c as cva } from './p-CBWjHURv.js';
-import { d as defineCustomElement$a } from './p-CIoY84Y6.js';
+import { d as defineCustomElement$a } from './p-qXjT088h.js';
 import { d as defineCustomElement$9 } from './p-C1Fsnz5F.js';
 import { d as defineCustomElement$8 } from './p-C0ZWBE1t.js';
 import { d as defineCustomElement$7 } from './p-CA6-0EkK.js';
-import { d as defineCustomElement$6 } from './p-C9iJS8ET.js';
+import { d as defineCustomElement$6 } from './p-CfilaLs-.js';
 import { d as defineCustomElement$5 } from './p-ZOW6vT-R.js';
 import { d as defineCustomElement$4 } from './p-CJPrTM14.js';
 import { d as defineCustomElement$3 } from './p-D7OHNXA8.js';
@@ -172,6 +172,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { Pagination as P, defineCustomElement as d };
-//# sourceMappingURL=p-B60b7s3F.js.map
+//# sourceMappingURL=p-CR2m4pAn.js.map
-//# sourceMappingURL=p-B60b7s3F.js.map
+//# sourceMappingURL=p-CR2m4pAn.js.map

package/dist/components/{p-B60b7s3F.js.map → p-CR2m4pAn.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~B60b7s3F~~.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/molecules/pagination/pagination/pagination.component.css?tag=p-pagination","src/components/molecules/pagination/pagination/pagination.component.tsx"],"sourcesContent":["","import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\tFragment,\n\th,\n\tHost,\n\tProp,\n\tState,\n} from '@stencil/core';\nimport { defaultSize, defaultSizeOptions } from '../size/constants';\nimport { cva } from 'class-variance-authority';\n\nconst pagination = cva(\n\t[\n\t\t'p-pagination',\n\t\t'items-center gap-2',\n\t\t'rounded-full',\n\t\t'bg-off-white-300 border border-off-white-700',\n\t\t'p-1',\n\t],\n\t{\n\t\tvariants: {\n\t\t\thidden: {\n\t\t\t\tfalse: 'flex',\n\t\t\t\ttrue: 'hidden',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-pagination',\n\tstyleUrl: 'pagination.component.css',\n})\nexport class Pagination {\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 Wether to enable pagination size select\n\t /\n\t@Prop() enablePaginationSize: boolean = true;\n\n\t/\n\t Wether to enable pagination pages\n\t /\n\t@Prop() enablePaginationPages: boolean = true;\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 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\tpageChange: EventEmitter<number>;\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 The pages that were generated\n\t */\n\t@Event({ bubbles: false }) pagesChange: EventEmitter<number>;\n\n\t@State() private _hasPaginationPages = true;\n\n\trender() {\n\t\tconst hidePageSizeSelect =\n\t\t\tthis.hideOnSinglePage && this.total <= this.pageSizeOptions?.[0];\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={pagination({\n\t\t\t\t\thidden:\n\t\t\t\t\t\t(hidePageSizeSelect && !this._hasPaginationPages) \|\|\n\t\t\t\t\t\t(!this.enablePaginationSize && !this.enablePaginationPages),\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{this.enablePaginationPages && this.enablePaginationSize && (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t<p-pagination-size\n\t\t\t\t\t\t\thidden={hidePageSizeSelect}\n\t\t\t\t\t\t\tsize={this.pageSize}\n\t\t\t\t\t\t\tsizeOptions={this.pageSizeOptions}\n\t\t\t\t\t\t\tonSizeChange={({ detail }) => this._changePageSize(detail)}\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t{!hidePageSizeSelect &&\n\t\t\t\t\t\t\tthis.hideOnSinglePage &&\n\t\t\t\t\t\t\tthis._hasPaginationPages && (\n\t\t\t\t\t\t\t\t<p-divider\n\t\t\t\t\t\t\t\t\tvariant='vertical'\n\t\t\t\t\t\t\t\t\tclass='mx-0 h-4 text-human-beige-700'\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t</Fragment>\n\t\t\t\t)}\n\n\t\t\t\t{this.enablePaginationPages && (\n\t\t\t\t\t<p-pagination-pages\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\tonPagesChange={({ detail }) => {\n\t\t\t\t\t\t\tthis._hasPaginationPages = detail > 1;\n\t\t\t\t\t\t\tthis.pagesChange.emit(detail);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\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}
1	+ {"file":"p-CR2m4pAn.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/molecules/pagination/pagination/pagination.component.css?tag=p-pagination","src/components/molecules/pagination/pagination/pagination.component.tsx"],"sourcesContent":["","import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\tFragment,\n\th,\n\tHost,\n\tProp,\n\tState,\n} from '@stencil/core';\nimport { defaultSize, defaultSizeOptions } from '../size/constants';\nimport { cva } from 'class-variance-authority';\n\nconst pagination = cva(\n\t[\n\t\t'p-pagination',\n\t\t'items-center gap-2',\n\t\t'rounded-full',\n\t\t'bg-off-white-300 border border-off-white-700',\n\t\t'p-1',\n\t],\n\t{\n\t\tvariants: {\n\t\t\thidden: {\n\t\t\t\tfalse: 'flex',\n\t\t\t\ttrue: 'hidden',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-pagination',\n\tstyleUrl: 'pagination.component.css',\n})\nexport class Pagination {\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 Wether to enable pagination size select\n\t /\n\t@Prop() enablePaginationSize: boolean = true;\n\n\t/\n\t Wether to enable pagination pages\n\t /\n\t@Prop() enablePaginationPages: boolean = true;\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 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\tpageChange: EventEmitter<number>;\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 The pages that were generated\n\t */\n\t@Event({ bubbles: false }) pagesChange: EventEmitter<number>;\n\n\t@State() private _hasPaginationPages = true;\n\n\trender() {\n\t\tconst hidePageSizeSelect =\n\t\t\tthis.hideOnSinglePage && this.total <= this.pageSizeOptions?.[0];\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={pagination({\n\t\t\t\t\thidden:\n\t\t\t\t\t\t(hidePageSizeSelect && !this._hasPaginationPages) \|\|\n\t\t\t\t\t\t(!this.enablePaginationSize && !this.enablePaginationPages),\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{this.enablePaginationPages && this.enablePaginationSize && (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t<p-pagination-size\n\t\t\t\t\t\t\thidden={hidePageSizeSelect}\n\t\t\t\t\t\t\tsize={this.pageSize}\n\t\t\t\t\t\t\tsizeOptions={this.pageSizeOptions}\n\t\t\t\t\t\t\tonSizeChange={({ detail }) => this._changePageSize(detail)}\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t{!hidePageSizeSelect &&\n\t\t\t\t\t\t\tthis.hideOnSinglePage &&\n\t\t\t\t\t\t\tthis._hasPaginationPages && (\n\t\t\t\t\t\t\t\t<p-divider\n\t\t\t\t\t\t\t\t\tvariant='vertical'\n\t\t\t\t\t\t\t\t\tclass='mx-0 h-4 text-human-beige-700'\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t</Fragment>\n\t\t\t\t)}\n\n\t\t\t\t{this.enablePaginationPages && (\n\t\t\t\t\t<p-pagination-pages\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\tonPagesChange={({ detail }) => {\n\t\t\t\t\t\t\tthis._hasPaginationPages = detail > 1;\n\t\t\t\t\t\t\tthis.pagesChange.emit(detail);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\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/{p-C9iJS8ET.js → p-CfilaLs-.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h } from './p-tdjn65Lz.js';
 import { c as cva } from './p-CBWjHURv.js';
 import { a as asBoolean } from './p-C5CTp9IA.js';
-import { d as defineCustomElement$2 } from './p-CIoY84Y6.js';
+import { d as defineCustomElement$2 } from './p-qXjT088h.js';
 import { d as defineCustomElement$1 } from './p-ZOW6vT-R.js';
 const dropdownMenuItemComponentCss = "*{box-sizing:border-box}.block{display:block!important}.flex{display:flex!important}.h-8{height:2rem!important}.w-full{width:100%!important}.max-w-full{max-width:100%!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.rounded-lg{border-radius:.5rem!important}.bg-dark-teal-600{--tw-bg-opacity:1!important;background-color:rgb(0 72 64/var(--tw-bg-opacity,1))!important}.bg-negative-red-100{--tw-bg-opacity:1!important;background-color:rgb(255 221 221/var(--tw-bg-opacity,1))!important}.bg-negative-red-50{--tw-bg-opacity:1!important;background-color:rgb(253 237 237/var(--tw-bg-opacity,1))!important}.bg-supportive-lilac-100{--tw-bg-opacity:1!important;background-color:rgb(246 239 255/var(--tw-bg-opacity,1))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.text-start{text-align:start!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-medium{font-weight:500!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.text-black-teal-100{--tw-text-opacity:1!important;color:rgb(205 212 211/var(--tw-text-opacity,1))!important}.text-black-teal-200{--tw-text-opacity:1!important;color:rgb(154 170 167/var(--tw-text-opacity,1))!important}.text-black-teal-300{--tw-text-opacity:1!important;color:rgb(104 127 124/var(--tw-text-opacity,1))!important}.text-dark-teal-100{--tw-text-opacity:1!important;color:rgb(204 220 218/var(--tw-text-opacity,1))!important}.text-negative-red{--tw-text-opacity:1!important;color:rgb(230 30 30/var(--tw-text-opacity,1))!important}.text-negative-red-100{--tw-text-opacity:1!important;color:rgb(255 221 221/var(--tw-text-opacity,1))!important}.text-negative-red-800{--tw-text-opacity:1!important;color:rgb(141 16 16/var(--tw-text-opacity,1))!important}.text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.opacity-40{opacity:.4!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:96rem){.container{max-width:96rem}}@media (min-width:105rem){.container{max-width:105rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:160rem){.container{max-width:160rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.hover\\:bg-dark-teal-500:hover{--tw-bg-opacity:1!important;background-color:rgb(0 81 72/var(--tw-bg-opacity,1))!important}.hover\\:bg-negative-red-50:hover{--tw-bg-opacity:1!important;background-color:rgb(253 237 237/var(--tw-bg-opacity,1))!important}.hover\\:bg-supportive-lilac-50:hover{--tw-bg-opacity:1!important;background-color:rgb(250 247 255/var(--tw-bg-opacity,1))!important}@keyframes wave{0%{transform:rotate(0deg)}to{transform:rotate(-15deg)}}.group:hover .group-hover\\:animate-wave{animation:wave .5s ease-in-out -.5s infinite alternate forwards!important}.group:hover .group-hover\\:text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.group:hover .group-hover\\:text-negative-red-800{--tw-text-opacity:1!important;color:rgb(141 16 16/var(--tw-text-opacity,1))!important}.group:hover .group-hover\\:text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}";
@@ -247,6 +247,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { DropdownMenuItem as D, defineCustomElement as d };
-//# sourceMappingURL=p-C9iJS8ET.js.map
+//# sourceMappingURL=p-CfilaLs-.js.map
-//# sourceMappingURL=p-C9iJS8ET.js.map
+//# sourceMappingURL=p-CfilaLs-.js.map