@paperless/core 2.0.1-beta.33 → 2.0.1-beta.35

package/dist/collection/components/atoms/checkbox/checkbox.component.js

@@ -57,12 +57,12 @@ export class Checkbox {
      */
     indeterminateChange;
     render() {
-        return (h(Host, { key: 'e2efce30f2d5a1f955c2a8ddefb2b229eca1cfd5', class: 'p-checkbox' }, h("label", { key: 'd26d81c88cb2f2a941cd9539e8060fbf60aa634f', htmlFor: this.id ?? this._nonce, class: 'flex items-center justify-start gap-2 text-black-teal' }, h("div", { key: 'd59c67ca2cbccdd8c91f860f5aa7561f34f79120', class: 'relative flex flex-shrink-0 items-center' }, h("input", { key: '6a8317350b7f60e3fdb7665d7d68d3f1a2ce9868', class: checkbox({
+        return (h(Host, { key: '86e48a4761975d08008dbe80286421f8ace94a14', class: 'p-checkbox' }, h("label", { key: '56e3ba1e34c1461046edfa6c236efe1866e4e165', htmlFor: this.id ?? this._nonce, class: 'flex items-center justify-start gap-2 text-black-teal' }, h("div", { key: 'ff66cb62635b55c344f64fe3b06581e02ff7ea04', class: 'relative flex flex-shrink-0 items-center' }, h("input", { key: '5d7f5f220bc733dcd447af518394b88564e35a40', class: checkbox({
                 size: this.size,
                 disabled: this.disabled,
-            }), type: 'checkbox', id: this.id ?? this._nonce, name: this.name, required: this.required, checked: !!this.checked, indeterminate: this.indeterminate, disabled: this.disabled, onChange: ev => this._onChange(ev) }), h("div", { key: 'b9010adaa74914c00b8018566b0c31808cc63b33', class: icon({
+            }), type: 'checkbox', id: this.id ?? this._nonce, name: this.name, required: this.required, checked: !!this.checked, indeterminate: this.indeterminate, disabled: this.disabled, onChange: ev => this._onChange(ev) }), h("div", { key: 'e9687793559790686028ff6c0514dfd4a041ced0', class: icon({
                 disabled: this.disabled,
-            }) }, h("p-icon", { key: '3d760b5e7ee1b76b79dae46beff4094dc00fe8b0', size: this.size, class: 'drop-shadow-black-teal-10%', variant: !!this.indeterminate ? 'minus' : 'checkmark' }))), h("slot", { key: '17f8e47facc7b631494534b68986eebe5aa96fa0' }))));
+            }) }, h("p-icon", { key: '0797f5f8dfcd65840aa0df73fa0b3908961cc0f5', size: this.size, class: 'drop-shadow-black-teal-10%', variant: !!this.indeterminate ? 'minus' : 'checkmarkThick' }))), h("slot", { key: '6f038780fb2c1816048533d57e8704f69d0da552' }))));
     }
     _onChange(ev) {
         if (this.disabled) {

package/dist/collection/components/atoms/checkbox/checkbox.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/checkbox/checkbox.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\tHost,\n\tProp,\n\tState,\n\th,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { nonce } from '../../../utils/nonce';\n\nconst checkbox = cva(\n\t[\n\t\t'peer appearance-none m-0 outline-none flex-shrink-0',\n\t\t'border border-inset border-solid ',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: 'rounded w-4 h-4',\n\t\t\t\tbase: 'rounded-lg w-6 h-6',\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\tfalse: [\n\t\t\t\t\t'cursor-pointer shadow-1',\n\t\t\t\t\t'bg-white border-black-teal-100',\n\t\t\t\t\t'hover:bg-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\t'indeterminate:bg-supportive-lilac-700 indeterminate:border-black-teal/20',\n\t\t\t\t\t'indeterminate:ring-2 indeterminate:ring-supportive-lilac-100',\n\t\t\t\t\t'indeterminate:hover:bg-supportive-lilac indeterminate: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 icon = cva(\n\t[\n\t\t'hidden peer-indeterminate:flex peer-checked:flex',\n\t\t'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tdisabled: {\n\t\t\t\tfalse: 'text-white',\n\t\t\t\ttrue: 'text-black-teal-200',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-checkbox',\n\tstyleUrl: 'checkbox.component.css',\n})\nexport class Checkbox {\n\t/**\n\t * Wether the checkbox is checked\n\t */\n\t@Prop() checked: boolean;\n\n\t/**\n\t * Wether the checkbox is in indeterminate state\n\t */\n\t@Prop() indeterminate: boolean;\n\n\t/**\n\t * The size of the checkbox\n\t */\n\t@Prop() size: 'sm' | 'base' = 'base';\n\n\t/**\n\t * Wether the checkbox is disabled\n\t */\n\t@Prop({ reflect: true }) disabled: boolean = false;\n\n\t/**\n\t * Wether the checkbox is required\n\t */\n\t@Prop({ reflect: true }) required: boolean = true;\n\n\t/**\n\t * The id of the checkbox button\n\t */\n\t@Prop({ reflect: true }) id: string;\n\n\t/**\n\t * The name of the checkbox button\n\t */\n\t@Prop({ reflect: true }) name: string;\n\n\t/**\n\t * Event whenever the checked changes\n\t */\n\t@Event() checkedChange: EventEmitter<boolean>;\n\t/**\n\t * Event whenever the indeterminate changes\n\t */\n\t@Event() indeterminateChange: EventEmitter<boolean>;\n\n\t@State() private _nonce = nonce(5);\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-checkbox'>\n\t\t\t\t<label\n\t\t\t\t\thtmlFor={this.id ?? this._nonce}\n\t\t\t\t\tclass='flex items-center justify-start gap-2 text-black-teal'\n\t\t\t\t>\n\t\t\t\t\t<div class='relative flex flex-shrink-0 items-center'>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclass={checkbox({\n\t\t\t\t\t\t\t\tsize: this.size,\n\t\t\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\ttype='checkbox'\n\t\t\t\t\t\t\tid={this.id ?? this._nonce}\n\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\t\tchecked={!!this.checked}\n\t\t\t\t\t\t\tindeterminate={this.indeterminate}\n\t\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\t\tonChange={ev => this._onChange(ev)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass={icon({\n\t\t\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<p-icon\n\t\t\t\t\t\t\t\tsize={this.size}\n\t\t\t\t\t\t\t\tclass='drop-shadow-black-teal-10%'\n\t\t\t\t\t\t\t\tvariant={!!this.indeterminate ? 'minus' : 'checkmark'}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</label>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _onChange(ev: Event) {\n\t\tif (this.disabled) {\n\t\t\tev.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tconst checked = (ev.target as HTMLInputElement).checked;\n\t\tconst indeterminate = (ev.target as HTMLInputElement).indeterminate;\n\n\t\tif (checked != this.checked) {\n\t\t\tthis.checked = checked;\n\t\t\tthis.checkedChange.emit(checked);\n\t\t}\n\n\t\tif (indeterminate != this.indeterminate) {\n\t\t\tthis.indeterminate = indeterminate;\n\t\t\tthis.indeterminateChange.emit(indeterminate);\n\t\t}\n\t}\n}\n"]}
+{"version":3,"file":"checkbox.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/checkbox/checkbox.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\tHost,\n\tProp,\n\tState,\n\th,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { nonce } from '../../../utils/nonce';\n\nconst checkbox = cva(\n\t[\n\t\t'peer appearance-none m-0 outline-none flex-shrink-0',\n\t\t'border border-inset border-solid ',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: 'rounded w-4 h-4',\n\t\t\t\tbase: 'rounded-lg w-6 h-6',\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\tfalse: [\n\t\t\t\t\t'cursor-pointer shadow-1',\n\t\t\t\t\t'bg-white border-black-teal-100',\n\t\t\t\t\t'hover:bg-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\t'indeterminate:bg-supportive-lilac-700 indeterminate:border-black-teal/20',\n\t\t\t\t\t'indeterminate:ring-2 indeterminate:ring-supportive-lilac-100',\n\t\t\t\t\t'indeterminate:hover:bg-supportive-lilac indeterminate: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 icon = cva(\n\t[\n\t\t'hidden peer-indeterminate:flex peer-checked:flex',\n\t\t'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tdisabled: {\n\t\t\t\tfalse: 'text-white',\n\t\t\t\ttrue: 'text-black-teal-200',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-checkbox',\n\tstyleUrl: 'checkbox.component.css',\n})\nexport class Checkbox {\n\t/**\n\t * Wether the checkbox is checked\n\t */\n\t@Prop() checked: boolean;\n\n\t/**\n\t * Wether the checkbox is in indeterminate state\n\t */\n\t@Prop() indeterminate: boolean;\n\n\t/**\n\t * The size of the checkbox\n\t */\n\t@Prop() size: 'sm' | 'base' = 'base';\n\n\t/**\n\t * Wether the checkbox is disabled\n\t */\n\t@Prop({ reflect: true }) disabled: boolean = false;\n\n\t/**\n\t * Wether the checkbox is required\n\t */\n\t@Prop({ reflect: true }) required: boolean = true;\n\n\t/**\n\t * The id of the checkbox button\n\t */\n\t@Prop({ reflect: true }) id: string;\n\n\t/**\n\t * The name of the checkbox button\n\t */\n\t@Prop({ reflect: true }) name: string;\n\n\t/**\n\t * Event whenever the checked changes\n\t */\n\t@Event() checkedChange: EventEmitter<boolean>;\n\t/**\n\t * Event whenever the indeterminate changes\n\t */\n\t@Event() indeterminateChange: EventEmitter<boolean>;\n\n\t@State() private _nonce = nonce(5);\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-checkbox'>\n\t\t\t\t<label\n\t\t\t\t\thtmlFor={this.id ?? this._nonce}\n\t\t\t\t\tclass='flex items-center justify-start gap-2 text-black-teal'\n\t\t\t\t>\n\t\t\t\t\t<div class='relative flex flex-shrink-0 items-center'>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclass={checkbox({\n\t\t\t\t\t\t\t\tsize: this.size,\n\t\t\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\ttype='checkbox'\n\t\t\t\t\t\t\tid={this.id ?? this._nonce}\n\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\t\tchecked={!!this.checked}\n\t\t\t\t\t\t\tindeterminate={this.indeterminate}\n\t\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\t\tonChange={ev => this._onChange(ev)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass={icon({\n\t\t\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<p-icon\n\t\t\t\t\t\t\t\tsize={this.size}\n\t\t\t\t\t\t\t\tclass='drop-shadow-black-teal-10%'\n\t\t\t\t\t\t\t\tvariant={!!this.indeterminate ? 'minus' : 'checkmarkThick'}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</label>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _onChange(ev: Event) {\n\t\tif (this.disabled) {\n\t\t\tev.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tconst checked = (ev.target as HTMLInputElement).checked;\n\t\tconst indeterminate = (ev.target as HTMLInputElement).indeterminate;\n\n\t\tif (checked != this.checked) {\n\t\t\tthis.checked = checked;\n\t\t\tthis.checkedChange.emit(checked);\n\t\t}\n\n\t\tif (indeterminate != this.indeterminate) {\n\t\t\tthis.indeterminate = indeterminate;\n\t\t\tthis.indeterminateChange.emit(indeterminate);\n\t\t}\n\t}\n}\n"]}

package/dist/collection/components/atoms/counter/counter.component.js

@@ -5,7 +5,7 @@ export class Counter {
         this.size = 'default';
     }
     render() {
-        return (h(Host, { key: '9f55a1fa108d8a6704cdd1a3d9064b4658747ec0', class: `p-counter variant-${this.variant} size-${this.size}` }, h("slot", { key: 'f51ab888a6ad87a2639072cb8a13268a057ab496' })));
+        return (h(Host, { key: '0bcd879c285b9494e03599c77a0015519d7541db', class: `p-counter variant-${this.variant} size-${this.size}` }, h("slot", { key: '60cb85332859453927489da13981084db3cffd8d' })));
     }
     static get is() { return "p-counter"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/divider/divider.component.js

@@ -9,7 +9,7 @@ export class Divider {
     _el;
     render() {
         const hasSlotted = !!this._el.innerHTML?.length;
-        return (h(Host, { key: '8bc01a98862c6c97060ef52dc3bb1ed1af040e51', class: 'p-divider' }, h("div", { key: '15be02fc701029e4a5903dd0cd3d0cc37dae8f82', class: 'content' }, h("div", { key: '3a326034595c671ae8177480372e2ec5b41277b6', class: `flex items-center ${hasSlotted && 'px-2'} text-xs font-semibold uppercase text-storm-light` }, h("slot", { key: '1cd6af0b816d06dcc363cf2a6e679b80fbdac142' })))));
+        return (h(Host, { key: '2f5ece00b30f0983d8b45790bf5e3b80f20b639e', class: 'p-divider' }, h("div", { key: '51f28368c170afb7bf5cf427bc60c78ba87c3a9f', class: 'content' }, h("div", { key: '9afa0cb9998e81a3c4f42165ed358031b6808d19', class: `flex items-center ${hasSlotted && 'px-2'} text-xs font-semibold uppercase text-storm-light` }, h("slot", { key: '38434b8c2007d97e13eeb487a7af10bbb107945e' })))));
     }
     static get is() { return "p-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/drawer-body/drawer-body.component.js

@@ -4,7 +4,7 @@ export class ModalBody {
         this.variant = 'default';
     }
     render() {
-        return (h(Host, { key: 'f64516662a47c6af37cd5252f680034303e5d53b', class: `p-drawer-body variant-${this.variant}` }, h("slot", { key: '12839b91a0a1c6f0f0ca17a3d1416ae99d9bdf6b' })));
+        return (h(Host, { key: 'e5d1cb239fcdf768cbee8d8e2535f96c3986ee39', class: `p-drawer-body variant-${this.variant}` }, h("slot", { key: 'fdd6be1de819accb8e62ad9d0379110782b2d41f' })));
     }
     static get is() { return "p-drawer-body"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/drawer-container/drawer-container.component.js

@@ -9,7 +9,7 @@ export class ModalContainer {
         this.closing = false;
     }
     render() {
-        return (h(Host, { key: '6592422471e0dee3fcafa7f67f287aec507efadf', class: `p-drawer-container ${this.closing && 'closing'}` }, h("slot", { key: '6040e86276aa241295eff3c3015a124ce297a16c' })));
+        return (h(Host, { key: '1e83da125ac254f3f929492411f899504ede61b9', class: `p-drawer-container ${this.closing && 'closing'}` }, h("slot", { key: '5bbf994ddb8f3426dba93c28439d6ff7d913680d' })));
     }
     static get is() { return "p-drawer-container"; }
     static get originalStyleUrls() {

package/dist/collection/components/atoms/drawer-header/drawer-header.component.js

@@ -8,7 +8,7 @@ export class ModalHeader {
      */
     close;
     render() {
-        return (h(Host, { key: '6851cefd3c95acfd5b61f6564c515eb92fbbc438', class: 'p-drawer-header' }, this.showClose && (h("p-button", { key: '3e22ec23f39ac10f2dd9610e769a201e0b2888b7', variant: 'secondary', icon: 'negative', iconOnly: true, onClick: () => this.close.emit(), size: 'sm' })), h("slot", { key: 'c23369be2268f7fb5bb62219183fc1efb83001c4' })));
+        return (h(Host, { key: '52848fc893686c0e7e85e8b3d6cbe9731dfb03c8', class: 'p-drawer-header' }, this.showClose && (h("p-button", { key: 'ce2841335f8e03516a27996a60cd50cc4f747ffe', variant: 'secondary', icon: 'negative', iconOnly: true, onClick: () => this.close.emit(), size: 'sm' })), h("slot", { key: '83f78bbf3fac9eca7755526e3f1c10f0bad8faac' })));
     }
     static get is() { return "p-drawer-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/dropdown-menu-container/dropdown-menu-container.component.css

@@ -1 +1 @@
-*{box-sizing:border-box}.static{position:static!important}.z-10{z-index:10!important}.flex{display:flex!important}.max-h-\[11\.5rem\]{max-height:11.5rem!important}.max-h-\[13\.875rem\]{max-height:13.875rem!important}.max-h-\[20rem\]{max-height:20rem!important}.w-auto{width:auto!important}.w-full{width:100%!important}.max-w-\[13\.875rem\]{max-width:13.875rem!important}.flex-col{flex-direction:column!important}.gap-\[1px\]{gap:1px!important}.overflow-y-auto{overflow-y:auto!important}.overflow-x-hidden{overflow-x:hidden!important}.rounded-lg{border-radius:.5rem!important}.border{border-width:1px!important}.border-black-teal-100{--tw-border-opacity:1!important;border-color:rgb(205 212 211/var(--tw-border-opacity,1))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.p-1{padding:.25rem!important}.drop-shadow-2{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.04)) drop-shadow(0 2px 2px rgba(0,2,2,.04)) drop-shadow(0 4px 4px rgba(0,2,2,.04))!important;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}
+*{box-sizing:border-box}.static{position:static!important}.z-10{z-index:10!important}.flex{display:flex!important}.max-h-\[11\.5rem\]{max-height:11.5rem!important}.max-h-\[13\.875rem\]{max-height:13.875rem!important}.max-h-\[20rem\]{max-height:20rem!important}.w-auto{width:auto!important}.w-full{width:100%!important}.max-w-\[13\.875rem\]{max-width:13.875rem!important}.flex-col{flex-direction:column!important}.gap-\[1px\]{gap:1px!important}.overflow-y-auto{overflow-y:auto!important}.overflow-x-hidden{overflow-x:hidden!important}.rounded-lg{border-radius:.5rem!important}.border{border-width:1px!important}.border-black-teal-100{--tw-border-opacity:1!important;border-color:rgb(205 212 211/var(--tw-border-opacity,1))!important}.border-dark-teal-600{--tw-border-opacity:1!important;border-color:rgb(0 72 64/var(--tw-border-opacity,1))!important}.bg-dark-teal-600{--tw-bg-opacity:1!important;background-color:rgb(0 72 64/var(--tw-bg-opacity,1))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.p-1{padding:.25rem!important}.drop-shadow-2{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.04)) drop-shadow(0 2px 2px rgba(0,2,2,.04)) drop-shadow(0 4px 4px rgba(0,2,2,.04))!important}.drop-shadow-2,.drop-shadow-3{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.drop-shadow-3{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.08)) drop-shadow(0 2px 2px rgba(0,2,2,.08)) drop-shadow(0 4px 4px rgba(0,2,2,.08))!important}

package/dist/collection/components/atoms/dropdown-menu-container/dropdown-menu-container.component.js

@@ -1,12 +1,11 @@
 import { h, Host } from "@stencil/core";
 import { cva } from "class-variance-authority";
-const dropdownMenuContainer = cva([
-    'p-dropdown-menu-container',
-    'p-1',
-    'bg-white rounded-lg z-10 drop-shadow-2',
-    'border border-black-teal-100',
-], {
+const dropdownMenuContainer = cva(['p-dropdown-menu-container', 'p-1', 'rounded-lg z-10', 'border'], {
     variants: {
+        variant: {
+            default: 'bg-white border-black-teal-100 drop-shadow-2',
+            'dark-teal': 'bg-dark-teal-600 drop-shadow-3 border-dark-teal-600',
+        },
         fullWidth: {
             false: null,
             true: 'w-full',
@@ -29,6 +28,7 @@ const dropdownMenuContainer = cva([
 });
 export class DropdownMenuContainer {
     constructor() {
+        this.variant = 'default';
         this.maxWidth = true;
         this.class = undefined;
         this.fullWidth = true;
@@ -41,13 +41,14 @@ export class DropdownMenuContainer {
             : this.scrollable === true
                 ? 'default'
                 : this.scrollable;
-        return (h(Host, { key: 'd20e54bf6ae67b8c235bd6db39226c90532e43bc', class: dropdownMenuContainer({
+        return (h(Host, { key: '04e1181dd9274ed1668002ddf4f63e4739cf5282', class: dropdownMenuContainer({
                 class: this.class,
+                variant: this.variant,
                 fullWidth: this.fullWidth,
                 allowOverflow: this.allowOverflow,
                 scrollable,
                 maxWidth: this.maxWidth,
-            }) }, h("div", { key: '199e355596adf1c91c977490b0130e0dc5399bed', class: 'flex w-full flex-col gap-[1px]' }, h("slot", { key: '44d455cb277b45795ec17f79c5dfbba7bf65cc4c' }))));
+            }) }, h("div", { key: 'a8c270e32fd7b89953e923e99574d561e3bfdb21', class: 'flex w-full flex-col gap-[1px]' }, h("slot", { key: '520a112ce75a4dad3fafbbe233db1b87344bf480' }))));
     }
     static get is() { return "p-dropdown-menu-container"; }
     static get originalStyleUrls() {
@@ -62,6 +63,26 @@ export class DropdownMenuContainer {
     }
     static get properties() {
         return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'dark-teal'",
+                    "resolved": "\"dark-teal\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant of the container"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
             "maxWidth": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/atoms/dropdown-menu-container/dropdown-menu-container.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu-container.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/dropdown-menu-container/dropdown-menu-container.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,qBAAqB,GAAG,GAAG,CAChC;IACC,2BAA2B;IAC3B,KAAK;IACL,wCAAwC;IACxC,8BAA8B;CAC9B,EACD;IACC,QAAQ,EAAE;QACT,SAAS,EAAE;YACV,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,QAAQ;SACd;QACD,aAAa,EAAE;YACd,KAAK,EAAE,mCAAmC;YAC1C,IAAI,EAAE,IAAI;SACV;QACD,UAAU,EAAE;YACX,IAAI,EAAE,IAAI;YACV,OAAO,EAAE,iBAAiB;YAC1B,KAAK,EAAE,mBAAmB;YAC1B,MAAM,EAAE,eAAe;SACvB;QACD,QAAQ,EAAE;YACT,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,0BAA0B;SAChC;KACD;CACD,CACD,CAAC;AAMF,MAAM,OAAO,qBAAqB;;wBAIL,IAAI;;yBAUH,IAAI;6BAKA,KAAK;0BAKyB,KAAK;;IAEpE,MAAM;QACL,MAAM,UAAU,GACf,IAAI,CAAC,UAAU,KAAK,KAAK;YACxB,CAAC,CAAC,MAAM;YACR,CAAC,CAAC,IAAI,CAAC,UAAU,KAAK,IAAI;gBAC1B,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC;QAEpB,OAAO,CACN,EAAC,IAAI,qDACJ,KAAK,EAAE,qBAAqB,CAAC;gBAC5B,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,aAAa,EAAE,IAAI,CAAC,aAAa;gBACjC,UAAU;gBACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACvB,CAAC;YAEF,4DAAK,KAAK,EAAC,gCAAgC;gBAC1C,8DAAQ,CACH,CACA,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst dropdownMenuContainer = cva(\n\t[\n\t\t'p-dropdown-menu-container',\n\t\t'p-1',\n\t\t'bg-white rounded-lg z-10 drop-shadow-2',\n\t\t'border border-black-teal-100',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tfullWidth: {\n\t\t\t\tfalse: null,\n\t\t\t\ttrue: 'w-full',\n\t\t\t},\n\t\t\tallowOverflow: {\n\t\t\t\tfalse: 'overflow-y-auto overflow-x-hidden',\n\t\t\t\ttrue: null,\n\t\t\t},\n\t\t\tscrollable: {\n\t\t\t\tnone: null,\n\t\t\t\tdefault: 'max-h-[11.5rem]',\n\t\t\t\tlarge: 'max-h-[13.875rem]',\n\t\t\t\txlarge: 'max-h-[20rem]',\n\t\t\t},\n\t\t\tmaxWidth: {\n\t\t\t\tfalse: null,\n\t\t\t\ttrue: 'w-auto max-w-[13.875rem]',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-dropdown-menu-container',\n\tstyleUrl: 'dropdown-menu-container.component.css',\n})\nexport class DropdownMenuContainer {\n\t/**\n\t * Wether the container applies it's max width\n\t */\n\t@Prop() maxWidth: boolean = true;\n\n\t/**\n\t * The class of the container passed by parent\n\t */\n\t@Prop() class: string;\n\n\t/**\n\t * Wether the container should all available space\n\t */\n\t@Prop() fullWidth: boolean = true;\n\n\t/**\n\t * Wether to allow overflow\n\t */\n\t@Prop() allowOverflow: boolean = false;\n\n\t/**\n\t * Wether the container should be scrollable when the threshold is met.\n\t */\n\t@Prop() scrollable: boolean | 'default' | 'large' | 'xlarge' = false;\n\n\trender() {\n\t\tconst scrollable =\n\t\t\tthis.scrollable === false\n\t\t\t\t? 'none'\n\t\t\t\t: this.scrollable === true\n\t\t\t\t? 'default'\n\t\t\t\t: this.scrollable;\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={dropdownMenuContainer({\n\t\t\t\t\tclass: this.class,\n\t\t\t\t\tfullWidth: this.fullWidth,\n\t\t\t\t\tallowOverflow: this.allowOverflow,\n\t\t\t\t\tscrollable,\n\t\t\t\t\tmaxWidth: this.maxWidth,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<div class='flex w-full flex-col gap-[1px]'>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"dropdown-menu-container.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/dropdown-menu-container/dropdown-menu-container.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,qBAAqB,GAAG,GAAG,CAChC,CAAC,2BAA2B,EAAE,KAAK,EAAE,iBAAiB,EAAE,QAAQ,CAAC,EACjE;IACC,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,OAAO,EAAE,8CAA8C;YACvD,WAAW,EAAE,qDAAqD;SAClE;QACD,SAAS,EAAE;YACV,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,QAAQ;SACd;QACD,aAAa,EAAE;YACd,KAAK,EAAE,mCAAmC;YAC1C,IAAI,EAAE,IAAI;SACV;QACD,UAAU,EAAE;YACX,IAAI,EAAE,IAAI;YACV,OAAO,EAAE,iBAAiB;YAC1B,KAAK,EAAE,mBAAmB;YAC1B,MAAM,EAAE,eAAe;SACvB;QACD,QAAQ,EAAE;YACT,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,0BAA0B;SAChC;KACD;CACD,CACD,CAAC;AAMF,MAAM,OAAO,qBAAqB;;uBAIU,SAAS;wBAKxB,IAAI;;yBAUH,IAAI;6BAKA,KAAK;0BAKyB,KAAK;;IAEpE,MAAM;QACL,MAAM,UAAU,GACf,IAAI,CAAC,UAAU,KAAK,KAAK;YACxB,CAAC,CAAC,MAAM;YACR,CAAC,CAAC,IAAI,CAAC,UAAU,KAAK,IAAI;gBAC1B,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC;QAEpB,OAAO,CACN,EAAC,IAAI,qDACJ,KAAK,EAAE,qBAAqB,CAAC;gBAC5B,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,aAAa,EAAE,IAAI,CAAC,aAAa;gBACjC,UAAU;gBACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACvB,CAAC;YAEF,4DAAK,KAAK,EAAC,gCAAgC;gBAC1C,8DAAQ,CACH,CACA,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst dropdownMenuContainer = cva(\n\t['p-dropdown-menu-container', 'p-1', 'rounded-lg z-10', 'border'],\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: 'bg-white border-black-teal-100 drop-shadow-2',\n\t\t\t\t'dark-teal': 'bg-dark-teal-600 drop-shadow-3 border-dark-teal-600',\n\t\t\t},\n\t\t\tfullWidth: {\n\t\t\t\tfalse: null,\n\t\t\t\ttrue: 'w-full',\n\t\t\t},\n\t\t\tallowOverflow: {\n\t\t\t\tfalse: 'overflow-y-auto overflow-x-hidden',\n\t\t\t\ttrue: null,\n\t\t\t},\n\t\t\tscrollable: {\n\t\t\t\tnone: null,\n\t\t\t\tdefault: 'max-h-[11.5rem]',\n\t\t\t\tlarge: 'max-h-[13.875rem]',\n\t\t\t\txlarge: 'max-h-[20rem]',\n\t\t\t},\n\t\t\tmaxWidth: {\n\t\t\t\tfalse: null,\n\t\t\t\ttrue: 'w-auto max-w-[13.875rem]',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-dropdown-menu-container',\n\tstyleUrl: 'dropdown-menu-container.component.css',\n})\nexport class DropdownMenuContainer {\n\t/**\n\t * The variant of the container\n\t */\n\t@Prop() variant: 'default' | 'dark-teal' = 'default';\n\n\t/**\n\t * Wether the container applies it's max width\n\t */\n\t@Prop() maxWidth: boolean = true;\n\n\t/**\n\t * The class of the container passed by parent\n\t */\n\t@Prop() class: string;\n\n\t/**\n\t * Wether the container should all available space\n\t */\n\t@Prop() fullWidth: boolean = true;\n\n\t/**\n\t * Wether to allow overflow\n\t */\n\t@Prop() allowOverflow: boolean = false;\n\n\t/**\n\t * Wether the container should be scrollable when the threshold is met.\n\t */\n\t@Prop() scrollable: boolean | 'default' | 'large' | 'xlarge' = false;\n\n\trender() {\n\t\tconst scrollable =\n\t\t\tthis.scrollable === false\n\t\t\t\t? 'none'\n\t\t\t\t: this.scrollable === true\n\t\t\t\t? 'default'\n\t\t\t\t: this.scrollable;\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={dropdownMenuContainer({\n\t\t\t\t\tclass: this.class,\n\t\t\t\t\tvariant: this.variant,\n\t\t\t\t\tfullWidth: this.fullWidth,\n\t\t\t\t\tallowOverflow: this.allowOverflow,\n\t\t\t\t\tscrollable,\n\t\t\t\t\tmaxWidth: this.maxWidth,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<div class='flex w-full flex-col gap-[1px]'>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/atoms/dropdown-menu-item/dropdown-menu-item.component.css

@@ -1 +1 @@
-*{box-sizing:border-box}.static{position:static!important}.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-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-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}.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}.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}
+*{box-sizing:border-box}.static{position:static!important}.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-400{--tw-bg-opacity:1!important;background-color:rgb(51 116 109/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}.hover\:bg-dark-teal-400:hover{--tw-bg-opacity:1!important;background-color:rgb(51 116 109/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}.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}

package/dist/collection/components/atoms/dropdown-menu-item/dropdown-menu-item.component.js

@@ -6,6 +6,7 @@ const dropdownMenuItem = cva([
     variants: {
         variant: {
             default: null,
+            'dark-teal': null,
             negative: null,
         },
         active: {
@@ -46,6 +47,29 @@ const dropdownMenuItem = cva([
             active: true,
             class: 'bg-supportive-lilac-100',
         },
+        {
+            variant: 'dark-teal',
+            active: false,
+            enableHover: true,
+            class: 'text-white',
+        },
+        {
+            variant: 'dark-teal',
+            active: false,
+            enableHover: true,
+            disabled: false,
+            class: 'hover:bg-dark-teal-400',
+        },
+        {
+            variant: 'dark-teal',
+            active: true,
+            class: 'text-white bg-dark-teal-400',
+        },
+        {
+            variant: 'dark-teal',
+            disabled: true,
+            class: 'opacity-40',
+        },
         {
             variant: 'negative',
             active: false,
@@ -81,6 +105,7 @@ const dropdownMenuItemIcon = cva(['text-base'], {
     variants: {
         variant: {
             default: null,
+            'dark-teal': null,
             negative: null,
         },
         active: {
@@ -99,6 +124,12 @@ const dropdownMenuItemIcon = cva(['text-base'], {
             disabled: false,
             class: 'text-black-teal-300 group-hover:text-black-teal',
         },
+        {
+            variant: 'dark-teal',
+            active: false,
+            disabled: false,
+            class: 'text-dark-teal-100 group-hover:text-white',
+        },
         {
             variant: 'negative',
             active: false,
@@ -124,16 +155,16 @@ export class DropdownMenuItem {
         this.useContainer = true;
     }
     render() {
-        return (h(Host, { key: '08d46e7573279d9cc222d1209d14b1488d70ff5e', class: dropdownMenuItem({
+        return (h(Host, { key: '32964bd59857a3a902c7e27641dfe04040e71cf8', class: dropdownMenuItem({
                 variant: this.variant,
                 active: this.active,
                 enableHover: this.enableHover,
                 disabled: this.disabled,
-            }) }, this.icon && (h("p-icon", { key: '56cf5ed28c52cc447db03bd1776d11bb23538197', class: dropdownMenuItemIcon({
+            }) }, this.icon && (h("p-icon", { key: '2dcd2db6b8bced38d21fe16cecc8d76b9298dec0', class: dropdownMenuItemIcon({
                 variant: this.variant,
                 active: this.active,
                 disabled: this.disabled,
-            }), variant: this.icon })), this.checkbox && (h("p-checkbox", { key: 'db105260f7c292a11a8b4cbec38bddef960bf8bf', size: 'sm', checked: this.active, disabled: this.disabled })), this.useContainer ? (h("div", { class: 'block w-full overflow-hidden text-ellipsis whitespace-nowrap text-start' }, h("slot", null))) : (h("slot", null))));
+            }), variant: this.icon })), this.checkbox && (h("p-checkbox", { key: '084c1a2b222ab215cffe1272de6e24d691252aee', size: 'sm', checked: this.active, disabled: this.disabled })), this.useContainer ? (h("div", { class: 'block w-full overflow-hidden text-ellipsis whitespace-nowrap text-start' }, h("slot", null))) : (h("slot", null))));
     }
     static get is() { return "p-dropdown-menu-item"; }
     static get originalStyleUrls() {
@@ -192,8 +223,8 @@ export class DropdownMenuItem {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'negative'",
-                    "resolved": "\"default\" | \"negative\"",
+                    "original": "'default' | 'dark-teal' | 'negative'",
+                    "resolved": "\"dark-teal\" | \"default\" | \"negative\"",
                     "references": {}
                 },
                 "required": false,
@@ -253,7 +284,7 @@ export class DropdownMenuItem {
                 "mutable": false,
                 "complexType": {
                     "original": "IconVariant",
-                    "resolved": "\"caret\" | \"double-caret\" | \"arrow\" | \"double-arrow\" | \"bell\" | \"chat\" | \"check-circle\" | \"cross-circle\" | \"error-circle\" | \"info-circle\" | \"phone\" | \"question-circle\" | \"headset\" | \"warning\" | \"attachment\" | \"description\" | \"document\" | \"folder\" | \"pdf\" | \"xls\" | \"bank\" | \"bread\" | \"cake\" | \"calculator\" | \"camera\" | \"car\" | \"certified\" | \"chair\" | \"checkmark\" | \"city\" | \"companies\" | \"company\" | \"credit-card\" | \"cutlery\" | \"department\" | \"diamond\" | \"docter\" | \"download\" | \"envelope\" | \"euro\" | \"exam\" | \"filter\" | \"flower\" | \"globe\" | \"globe-2\" | \"hash\" | \"hat\" | \"home\" | \"integration\" | \"language\" | \"laptop\" | \"location\" | \"mail\" | \"medal\" | \"menu\" | \"menu-arrow\" | \"minus\" | \"more\" | \"negative\" | \"other\" | \"pay\" | \"pencil\" | \"percent\" | \"pie-chart\" | \"placeholder\" | \"plus\" | \"power\" | \"receipt\" | \"reset\" | \"search\" | \"send\" | \"settings\" | \"shuffle\" | \"sick\" | \"signature\" | \"sparkle\" | \"star\" | \"stroller\" | \"tag\" | \"tasks\" | \"tools\" | \"tooth\" | \"train\" | \"trash\" | \"upload\" | \"wave\" | \"zipcode\" | \"eye\" | \"eye-closed\" | \"key\" | \"lock\" | \"unlocked\" | \"alarm\" | \"calendar\" | \"calendar-multi\" | \"calendar-free\" | \"calendar-not-free\" | \"clock\" | \"female\" | \"id\" | \"id-two\" | \"male\" | \"user\" | \"users\"",
+                    "resolved": "\"caret\" | \"double-caret\" | \"arrow\" | \"double-arrow\" | \"bell\" | \"chat\" | \"check-circle\" | \"cross-circle\" | \"error-circle\" | \"info-circle\" | \"phone\" | \"question-circle\" | \"headset\" | \"warning\" | \"attachment\" | \"description\" | \"document\" | \"folder\" | \"pdf\" | \"xls\" | \"bank\" | \"bread\" | \"cake\" | \"calculator\" | \"camera\" | \"car\" | \"certified\" | \"chair\" | \"checkmark\" | \"city\" | \"companies\" | \"company\" | \"credit-card\" | \"cutlery\" | \"department\" | \"diamond\" | \"docter\" | \"download\" | \"envelope\" | \"euro\" | \"exam\" | \"filter\" | \"flower\" | \"globe\" | \"globe-2\" | \"hash\" | \"hat\" | \"home\" | \"integration\" | \"language\" | \"laptop\" | \"location\" | \"mail\" | \"medal\" | \"menu\" | \"menu-arrow\" | \"minus\" | \"more\" | \"negative\" | \"other\" | \"pay\" | \"pencil\" | \"percent\" | \"pie-chart\" | \"placeholder\" | \"plus\" | \"power\" | \"receipt\" | \"reset\" | \"search\" | \"send\" | \"settings\" | \"shuffle\" | \"sick\" | \"signature\" | \"sparkle\" | \"star\" | \"stroller\" | \"tag\" | \"tasks\" | \"tools\" | \"tooth\" | \"train\" | \"trash\" | \"upload\" | \"wave\" | \"zipcode\" | \"eye\" | \"eye-closed\" | \"key\" | \"lock\" | \"unlocked\" | \"alarm\" | \"calendar\" | \"calendar-multi\" | \"calendar-free\" | \"calendar-not-free\" | \"clock\" | \"female\" | \"id\" | \"id-two\" | \"male\" | \"user\" | \"users\" | \"checkmarkThick\"",
                     "references": {
                         "IconVariant": {
                             "location": "import",

package/dist/collection/components/atoms/dropdown-menu-item/dropdown-menu-item.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu-item.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/dropdown-menu-item/dropdown-menu-item.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { IconVariant } from '../icon/icon.component';\nimport { cva } from 'class-variance-authority';\n\nconst dropdownMenuItem = cva(\n\t[\n\t\t'p-dropdown-menu-item flex px-2 py-1 gap-2 text-sm font-medium group rounded-lg items-center h-8 max-w-full',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: null,\n\t\t\t\tnegative: null,\n\t\t\t},\n\t\t\tactive: {\n\t\t\t\tfalse: null,\n\t\t\t\ttrue: null,\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\tfalse: 'cursor-pointer',\n\t\t\t\ttrue: 'cursor-not-allowed',\n\t\t\t},\n\t\t\tenableHover: {\n\t\t\t\tfalse: null,\n\t\t\t\ttrue: null,\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tvariant: 'default',\n\t\t\t\tactive: false,\n\t\t\t\tenableHover: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'text-black-teal hover:bg-supportive-lilac-50',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'default',\n\t\t\t\tactive: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'bg-supportive-lilac-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'default',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'text-black-teal-200',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'default',\n\t\t\t\tdisabled: true,\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'bg-supportive-lilac-100',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: 'negative',\n\t\t\t\tactive: false,\n\t\t\t\tenableHover: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'text-negative-red hover:bg-negative-red-50',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'negative',\n\t\t\t\tactive: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'bg-negative-red-100 text-negative-red',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'negative',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'text-negative-red-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'negative',\n\t\t\t\tdisabled: true,\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'bg-negative-red-50',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tenableHover: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'cursor-pointer',\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst dropdownMenuItemIcon = cva(['text-base'], {\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: null,\n\t\t\tnegative: null,\n\t\t},\n\t\tactive: {\n\t\t\tfalse: null,\n\t\t\ttrue: null,\n\t\t},\n\t\tdisabled: {\n\t\t\tfalse: null,\n\t\t\ttrue: 'text-black-teal-100',\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tvariant: 'default',\n\t\t\tactive: false,\n\t\t\tdisabled: false,\n\t\t\tclass: 'text-black-teal-300 group-hover:text-black-teal',\n\t\t},\n\n\t\t{\n\t\t\tvariant: 'negative',\n\t\t\tactive: false,\n\t\t\tdisabled: false,\n\t\t\tclass: 'text-negative-red group-hover:text-negative-red-800',\n\t\t},\n\t\t{\n\t\t\tvariant: 'negative',\n\t\t\tactive: true,\n\t\t\tdisabled: false,\n\t\t\tclass: 'text-negative-red-800',\n\t\t},\n\t],\n});\n\n@Component({\n\ttag: 'p-dropdown-menu-item',\n\tstyleUrl: 'dropdown-menu-item.component.css',\n})\nexport class DropdownMenuItem {\n\t/**\n\t * Wether the dropdown menu item is active\n\t */\n\t@Prop() active: boolean = false;\n\n\t/**\n\t * Wether the dropdown menu item has a checkbox\n\t */\n\t@Prop() checkbox: boolean = false;\n\n\t/**\n\t * The variant of the item\n\t */\n\t@Prop() variant: 'default' | 'negative' = 'default';\n\n\t/**\n\t * Wether to enable the hover state\n\t */\n\t@Prop() enableHover: boolean = true;\n\n\t/**\n\t * Wether the item is disabled\n\t */\n\t@Prop() disabled: boolean = false;\n\n\t/**\n\t * Icon of the navigation item\n\t */\n\t@Prop() icon: IconVariant;\n\n\t/**\n\t *  wether to use the container for text\n\t */\n\t@Prop() useContainer = true;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={dropdownMenuItem({\n\t\t\t\t\tvariant: this.variant,\n\t\t\t\t\tactive: this.active,\n\t\t\t\t\tenableHover: this.enableHover,\n\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{/* class={`p-dropdown-menu-item ${this.active && 'active'} ${ */}\n\t\t\t\t{/* \tthis.enableHover && 'hover' */}\n\t\t\t\t{/* }`} */}\n\t\t\t\t{this.icon && (\n\t\t\t\t\t<p-icon\n\t\t\t\t\t\tclass={dropdownMenuItemIcon({\n\t\t\t\t\t\t\tvariant: this.variant,\n\t\t\t\t\t\t\tactive: this.active,\n\t\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tvariant={this.icon}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{this.checkbox && (\n\t\t\t\t\t<p-checkbox\n\t\t\t\t\t\tsize='sm'\n\t\t\t\t\t\tchecked={this.active}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{this.useContainer ? (\n\t\t\t\t\t<div class='block w-full overflow-hidden text-ellipsis whitespace-nowrap text-start'>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<slot />\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"dropdown-menu-item.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/dropdown-menu-item/dropdown-menu-item.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { IconVariant } from '../icon/icon.component';\nimport { cva } from 'class-variance-authority';\n\nconst dropdownMenuItem = cva(\n\t[\n\t\t'p-dropdown-menu-item flex px-2 py-1 gap-2 text-sm font-medium group rounded-lg items-center h-8 max-w-full',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: null,\n\t\t\t\t'dark-teal': null,\n\t\t\t\tnegative: null,\n\t\t\t},\n\t\t\tactive: {\n\t\t\t\tfalse: null,\n\t\t\t\ttrue: null,\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\tfalse: 'cursor-pointer',\n\t\t\t\ttrue: 'cursor-not-allowed',\n\t\t\t},\n\t\t\tenableHover: {\n\t\t\t\tfalse: null,\n\t\t\t\ttrue: null,\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tvariant: 'default',\n\t\t\t\tactive: false,\n\t\t\t\tenableHover: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'text-black-teal hover:bg-supportive-lilac-50',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'default',\n\t\t\t\tactive: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'bg-supportive-lilac-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'default',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'text-black-teal-200',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'default',\n\t\t\t\tdisabled: true,\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'bg-supportive-lilac-100',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: 'dark-teal',\n\t\t\t\tactive: false,\n\t\t\t\tenableHover: true,\n\t\t\t\tclass: 'text-white',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'dark-teal',\n\t\t\t\tactive: false,\n\t\t\t\tenableHover: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'hover:bg-dark-teal-400',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'dark-teal',\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'text-white bg-dark-teal-400',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'dark-teal',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'opacity-40',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: 'negative',\n\t\t\t\tactive: false,\n\t\t\t\tenableHover: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'text-negative-red hover:bg-negative-red-50',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'negative',\n\t\t\t\tactive: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'bg-negative-red-100 text-negative-red',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'negative',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'text-negative-red-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'negative',\n\t\t\t\tdisabled: true,\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'bg-negative-red-50',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tenableHover: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'cursor-pointer',\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst dropdownMenuItemIcon = cva(['text-base'], {\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: null,\n\t\t\t'dark-teal': null,\n\t\t\tnegative: null,\n\t\t},\n\t\tactive: {\n\t\t\tfalse: null,\n\t\t\ttrue: null,\n\t\t},\n\t\tdisabled: {\n\t\t\tfalse: null,\n\t\t\ttrue: 'text-black-teal-100',\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tvariant: 'default',\n\t\t\tactive: false,\n\t\t\tdisabled: false,\n\t\t\tclass: 'text-black-teal-300 group-hover:text-black-teal',\n\t\t},\n\n\t\t{\n\t\t\tvariant: 'dark-teal',\n\t\t\tactive: false,\n\t\t\tdisabled: false,\n\t\t\tclass: 'text-dark-teal-100 group-hover:text-white',\n\t\t},\n\n\t\t{\n\t\t\tvariant: 'negative',\n\t\t\tactive: false,\n\t\t\tdisabled: false,\n\t\t\tclass: 'text-negative-red group-hover:text-negative-red-800',\n\t\t},\n\t\t{\n\t\t\tvariant: 'negative',\n\t\t\tactive: true,\n\t\t\tdisabled: false,\n\t\t\tclass: 'text-negative-red-800',\n\t\t},\n\t],\n});\n\n@Component({\n\ttag: 'p-dropdown-menu-item',\n\tstyleUrl: 'dropdown-menu-item.component.css',\n})\nexport class DropdownMenuItem {\n\t/**\n\t * Wether the dropdown menu item is active\n\t */\n\t@Prop() active: boolean = false;\n\n\t/**\n\t * Wether the dropdown menu item has a checkbox\n\t */\n\t@Prop() checkbox: boolean = false;\n\n\t/**\n\t * The variant of the item\n\t */\n\t@Prop() variant: 'default' | 'dark-teal' | 'negative' = 'default';\n\n\t/**\n\t * Wether to enable the hover state\n\t */\n\t@Prop() enableHover: boolean = true;\n\n\t/**\n\t * Wether the item is disabled\n\t */\n\t@Prop() disabled: boolean = false;\n\n\t/**\n\t * Icon of the navigation item\n\t */\n\t@Prop() icon: IconVariant;\n\n\t/**\n\t *  wether to use the container for text\n\t */\n\t@Prop() useContainer = true;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={dropdownMenuItem({\n\t\t\t\t\tvariant: this.variant,\n\t\t\t\t\tactive: this.active,\n\t\t\t\t\tenableHover: this.enableHover,\n\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{/* class={`p-dropdown-menu-item ${this.active && 'active'} ${ */}\n\t\t\t\t{/* \tthis.enableHover && 'hover' */}\n\t\t\t\t{/* }`} */}\n\t\t\t\t{this.icon && (\n\t\t\t\t\t<p-icon\n\t\t\t\t\t\tclass={dropdownMenuItemIcon({\n\t\t\t\t\t\t\tvariant: this.variant,\n\t\t\t\t\t\t\tactive: this.active,\n\t\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tvariant={this.icon}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{this.checkbox && (\n\t\t\t\t\t<p-checkbox\n\t\t\t\t\t\tsize='sm'\n\t\t\t\t\t\tchecked={this.active}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{this.useContainer ? (\n\t\t\t\t\t<div class='block w-full overflow-hidden text-ellipsis whitespace-nowrap text-start'>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<slot />\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/atoms/floating-menu-container/floating-menu-container.component.css

@@ -1 +1 @@
-.z-floating-menu{z-index:190!important}.flex{display:flex!important}.h-12{height:3rem!important}.animate-none{animation:none!important}.items-center{align-items:center!important}.gap-4{gap:1rem!important}.rounded-2xl{border-radius:1rem!important}.bg-storm-dark{--tw-bg-opacity:1!important;background-color:rgb(39 40 56/var(--tw-bg-opacity,1))!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-3{padding-bottom:.75rem!important;padding-top:.75rem!important}.text-storm-vague{--tw-text-opacity:1!important;color:rgb(152 154 183/var(--tw-text-opacity,1))!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;--tw-text-opacity:1;--tw-shadow:0 1px 1px rgba(0,2,2,.04),0 2px 2px rgba(0,2,2,.04),0 4px 4px rgba(0,2,2,.04);--tw-shadow-colored:0 1px 1px var(--tw-shadow-color),0 2px 2px var(--tw-shadow-color),0 4px 4px var(--tw-shadow-color);align-items:center;background-color:rgb(39 40 56/var(--tw-bg-opacity,1));border-radius:1rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:rgb(152 154 183/var(--tw-text-opacity,1));display:flex;gap:1rem;height:3rem;padding:.75rem 1rem;z-index:190}:host(.preload){animation:none!important}.static{position:static!important}
+*{box-sizing:border-box}:host(.preload){animation:none}.static{position:static!important}.z-floating-menu{z-index:190!important}.mx-0{margin-left:0!important;margin-right:0!important}.ml-auto{margin-left:auto!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.h-4{height:1rem!important}.w-auto{width:auto!important}.min-w-0{min-width:0!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}.text-nowrap{text-wrap: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}.p-2{padding:.5rem!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.pl-3{padding-left:.75rem!important}.pr-1{padding-right:.25rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-black-teal-400{--tw-text-opacity:1!important;color:rgb(53 85 80/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-dark-teal-300{--tw-text-opacity:1!important;color:rgb(102 151 145/var(--tw-text-opacity,1))!important}.shadow-3{--tw-shadow:0 1px 1px rgba(0,2,2,.08),0 2px 2px rgba(0,2,2,.08),0 4px 4px rgba(0,2,2,.08)!important;--tw-shadow-colored:0 1px 1px var(--tw-shadow-color),0 2px 2px var(--tw-shadow-color),0 4px 4px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.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\:text-dark-teal-100:hover{--tw-text-opacity:1!important;color:rgb(204 220 218/var(--tw-text-opacity,1))!important}

package/dist/collection/components/atoms/floating-menu-container/floating-menu-container.component.js

@@ -1,16 +1,61 @@
-import { Host, h } from "@stencil/core";
+import { Fragment, Host, h, } from "@stencil/core";
+import { cva } from "class-variance-authority";
+import { formatTranslation, getLocaleComponentStrings } from "../../../utils";
+const container = cva([
+    'floating-menu-container z-floating-menu',
+    'bg-dark-teal-600 shadow-3',
+    'h-10 py-1 w-auto',
+    'rounded-lg',
+    'text-sm',
+    'flex items-center gap-2',
+], {
+    variants: {
+        enableAmountSelected: {
+            false: 'px-1',
+            true: 'pl-3 pr-1',
+        },
+    },
+});
+const amountSelected = cva([
+    'text-dark-teal-100',
+    'min-w-0',
+    'overflow-hidden text-ellipsis text-nowrap',
+]);
 export class FloatingMenuContainer {
     constructor() {
         this.usedInTable = false;
+        this.enableAmountSelected = true;
+        this.amount = 0;
+        this.enableClose = true;
+        this.amountSelectedTemplate = (amount) => formatTranslation((amount === 1
+            ? this._locales.amount_selected
+            : this._locales.amount_selected_plural)?.replace('{{amount}}', amount));
+        this._locales = {};
+    }
+    /**
+     * Event whenever the close button is clicked
+     */
+    close;
+    /**
+     * The host element
+     */
+    _el;
+    componentWillLoad() {
+        this._setLocales();
     }
     render() {
-        return (h(Host, { key: 'f3f243096001eb624f7280f914a0f52a412dc25e', class: "p-floating-menu-container" }, this.usedInTable ? (h("slot", { name: "floating-menu-item" })) : (h("slot", null))));
+        return (h(Host, { key: 'e653fe503f27c3a0d7e0a90070c630b80ee5a7cc' }, h("div", { key: '287a711e046eece0bea4525a2e601ca9a1368e95', class: container({
+                enableAmountSelected: this.enableAmountSelected,
+            }) }, this.enableAmountSelected && (h(Fragment, { key: 'c5c11a8269651ea92a911feb26a8be52988f57a2' }, h("p", { key: 'edc2f9fbb9adef44731a1d8c8b81762f0248ee7b', class: amountSelected() }, this.amountSelectedTemplate(this.amount)), h("p-divider", { key: 'c89c60984a56f48ab2c6f3c1cd3a4e909288cdda', class: 'mx-0 h-4 text-black-teal-400', variant: 'vertical' }))), this.usedInTable ? h("slot", { name: 'floating-menu-item' }) : h("slot", null), this.enableClose && (h("div", { key: 'f231e9ddc59510cf67c0651b0ec6b5ae33b38e47', class: 'ml-auto cursor-pointer p-2 text-dark-teal-300 hover:text-dark-teal-100', onClick: ev => this.close.emit(ev) }, h("p-icon", { key: '4561b5337606c3897307cff554e347b3eb34f4b6', variant: 'negative' }))))));
+    }
+    async _setLocales() {
+        this._locales = await getLocaleComponentStrings(this._el);
     }
     static get is() { return "p-floating-menu-container"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["floating-menu-container.component.scss"]
+            "$": ["floating-menu-container.component.css"]
         };
     }
     static get styleUrls() {
@@ -32,15 +77,137 @@ export class FloatingMenuContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Weather the container is used in the table"
+                    "text": "Wether the container is used in the table"
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "used-in-table",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "enableAmountSelected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to show the amount selected"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "enable-amount-selected",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "amount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The amount selected"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "amount",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "enableClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to enablethe close button"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "enable-close",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "amountSelectedTemplate": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "amountSelectedTemplateFunc",
+                    "resolved": "(amount: number) => string",
+                    "references": {
+                        "amountSelectedTemplateFunc": {
+                            "location": "local",
+                            "path": "/home/runner/work/Paperless/Paperless/packages/core/src/components/atoms/floating-menu-container/floating-menu-container.component.tsx",
+                            "id": "src/components/atoms/floating-menu-container/floating-menu-container.component.tsx::amountSelectedTemplateFunc"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The template for amount selected"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "(\n\t\tamount: number\n\t) =>\n\t\tformatTranslation(\n\t\t\t(amount === 1\n\t\t\t\t? this._locales.amount_selected\n\t\t\t\t: this._locales.amount_selected_plural\n\t\t\t)?.replace('{{amount}}', amount)\n\t\t)"
             }
         };
     }
+    static get states() {
+        return {
+            "_locales": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event whenever the close button is clicked"
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "_el"; }
+    static get listeners() {
+        return [{
+                "name": "localeChanged",
+                "method": "_setLocales",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=floating-menu-container.component.js.map

package/dist/collection/components/atoms/floating-menu-container/floating-menu-container.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"floating-menu-container.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/floating-menu-container/floating-menu-container.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,qBAAqB;;2BAIF,KAAK;;IAEpC,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDAAC,KAAK,EAAC,2BAA2B,IACrC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CACnB,YAAM,IAAI,EAAC,oBAAoB,GAAG,CAClC,CAAC,CAAC,CAAC,CACH,eAAQ,CACR,CACK,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n\ttag: 'p-floating-menu-container',\n\tstyleUrl: 'floating-menu-container.component.scss',\n\tshadow: true,\n})\nexport class FloatingMenuContainer {\n\t/**\n\t * Weather the container is used in the table\n\t */\n\t@Prop() usedInTable: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-floating-menu-container\">\n\t\t\t\t{this.usedInTable ? (\n\t\t\t\t\t<slot name=\"floating-menu-item\" />\n\t\t\t\t) : (\n\t\t\t\t\t<slot />\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"floating-menu-container.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/floating-menu-container/floating-menu-container.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,KAAK,EAEL,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,CAAC,EACD,OAAO,EACP,KAAK,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAE9E,MAAM,SAAS,GAAG,GAAG,CACpB;IACC,yCAAyC;IACzC,2BAA2B;IAC3B,kBAAkB;IAClB,YAAY;IACZ,SAAS;IACT,yBAAyB;CACzB,EACD;IACC,QAAQ,EAAE;QACT,oBAAoB,EAAE;YACrB,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,WAAW;SACjB;KACD;CACD,CACD,CAAC;AAEF,MAAM,cAAc,GAAG,GAAG,CAAC;IAC1B,oBAAoB;IACpB,SAAS;IACT,2CAA2C;CAC3C,CAAC,CAAC;AASH,MAAM,OAAO,qBAAqB;;2BAIF,KAAK;oCAKL,IAAI;sBAKlB,CAAC;2BAKI,IAAI;sCAKmC,CAC5D,MAAc,EACb,EAAE,CACH,iBAAiB,CAChB,CAAC,MAAM,KAAK,CAAC;YACZ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,eAAe;YAC/B,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,sBAAsB,CACtC,EAAE,OAAO,CAAC,YAAY,EAAE,MAAM,CAAC,CAChC;wBAe+B,EAAE;;IAbnC;;OAEG;IACM,KAAK,CAA2B;IAEzC;;OAEG;IACgB,GAAG,CAAc;IAOpC,iBAAiB;QAChB,IAAI,CAAC,WAAW,EAAE,CAAC;IACpB,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI;YACJ,4DACC,KAAK,EAAE,SAAS,CAAC;oBAChB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB;iBAC/C,CAAC;gBAED,IAAI,CAAC,oBAAoB,IAAI,CAC7B,EAAC,QAAQ;oBACR,0DAAG,KAAK,EAAE,cAAc,EAAE,IACxB,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,CACtC;oBAEJ,kEACC,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAC,UAAU,GACjB,CACQ,CACX;gBAEA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,oBAAoB,GAAG,CAAC,CAAC,CAAC,eAAQ;gBAEhE,IAAI,CAAC,WAAW,IAAI,CACpB,4DACC,KAAK,EAAC,wEAAwE,EAC9E,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;oBAElC,+DAAQ,OAAO,EAAC,UAAU,GAAG,CACxB,CACN,CACI,CACA,CACP,CAAC;IACH,CAAC;IAGO,KAAK,CAAC,WAAW;QACxB,IAAI,CAAC,QAAQ,GAAG,MAAM,yBAAyB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC3D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\tFragment,\n\tHost,\n\tListen,\n\tProp,\n\th,\n\tElement,\n\tState,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { formatTranslation, getLocaleComponentStrings } from '../../../utils';\n\nconst container = cva(\n\t[\n\t\t'floating-menu-container z-floating-menu',\n\t\t'bg-dark-teal-600 shadow-3',\n\t\t'h-10 py-1 w-auto',\n\t\t'rounded-lg',\n\t\t'text-sm',\n\t\t'flex items-center gap-2',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tenableAmountSelected: {\n\t\t\t\tfalse: 'px-1',\n\t\t\t\ttrue: 'pl-3 pr-1',\n\t\t\t},\n\t\t},\n\t}\n);\n\nconst amountSelected = cva([\n\t'text-dark-teal-100',\n\t'min-w-0',\n\t'overflow-hidden text-ellipsis text-nowrap',\n]);\n\nexport type amountSelectedTemplateFunc = (amount: number) => string;\n\n@Component({\n\ttag: 'p-floating-menu-container',\n\tstyleUrl: 'floating-menu-container.component.css',\n\tshadow: true,\n})\nexport class FloatingMenuContainer {\n\t/**\n\t * Wether the container is used in the table\n\t */\n\t@Prop() usedInTable: boolean = false;\n\n\t/**\n\t * Wether to show the amount selected\n\t */\n\t@Prop() enableAmountSelected = true;\n\n\t/**\n\t * The amount selected\n\t */\n\t@Prop() amount = 0;\n\n\t/**\n\t * Wether to enablethe close button\n\t */\n\t@Prop() enableClose = true;\n\n\t/**\n\t * The template for amount selected\n\t */\n\t@Prop() amountSelectedTemplate: amountSelectedTemplateFunc = (\n\t\tamount: number\n\t) =>\n\t\tformatTranslation(\n\t\t\t(amount === 1\n\t\t\t\t? this._locales.amount_selected\n\t\t\t\t: this._locales.amount_selected_plural\n\t\t\t)?.replace('{{amount}}', amount)\n\t\t);\n\n\t/**\n\t * Event whenever the close button is clicked\n\t */\n\t@Event() close: EventEmitter<MouseEvent>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t/**\n\t * Locales used for this component\n\t */\n\t@State() private _locales: any = {};\n\n\tcomponentWillLoad() {\n\t\tthis._setLocales();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tclass={container({\n\t\t\t\t\t\tenableAmountSelected: this.enableAmountSelected,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{this.enableAmountSelected && (\n\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t<p class={amountSelected()}>\n\t\t\t\t\t\t\t\t{this.amountSelectedTemplate(this.amount)}\n\t\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t\t<p-divider\n\t\t\t\t\t\t\t\tclass='mx-0 h-4 text-black-teal-400'\n\t\t\t\t\t\t\t\tvariant='vertical'\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{this.usedInTable ? <slot name='floating-menu-item' /> : <slot />}\n\n\t\t\t\t\t{this.enableClose && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass='ml-auto cursor-pointer p-2 text-dark-teal-300 hover:text-dark-teal-100'\n\t\t\t\t\t\t\tonClick={ev => this.close.emit(ev)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<p-icon variant='negative' />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('localeChanged', { target: 'body' })\n\tprivate async _setLocales(): Promise<void> {\n\t\tthis._locales = await getLocaleComponentStrings(this._el);\n\t}\n}\n"]}