@paperless/core 3.6.6 → 3.7.1

package/dist/collection/components/molecules/select/select.component.js

@@ -21,10 +21,7 @@ const multiItem = cva([
 const textContainer = cva('block w-full overflow-hidden text-start', {
     variants: {
         variant: {
-            placeholder: `
-     text-storm-400
-     dark:text-white
-   `,
+            placeholder: 'text-storm-400',
             default: null,
         },
         enableTextWrap: {
@@ -32,14 +29,26 @@ const textContainer = cva('block w-full overflow-hidden text-start', {
             false: 'text-ellipsis whitespace-nowrap',
         },
         error: {
-            true: `
+            true: false,
+            false: 'dark:text-white',
+        },
+    },
+    compoundVariants: [
+        {
+            variant: 'placeholder',
+            error: true,
+            class: `
      text-negative-red-700
      group-hover/button:text-negative-red-800
      dark:text-negative-red-alternative
    `,
-            false: null,
         },
-    },
+        {
+            variant: 'default',
+            error: true,
+            class: 'dark:text-negative-red-alternative',
+        },
+    ],
 });
 export class Select {
     /**
@@ -253,7 +262,10 @@ export class Select {
         return this._getParsedItems();
     }
     get _displayValue() {
-        const placeholder = (h("div", { class: textContainer({ variant: 'placeholder' }) }, this.placeholder));
+        const placeholder = (h("div", { class: textContainer({
+                variant: 'placeholder',
+                error: !!this.error?.length,
+            }) }, this.placeholder));
         if (!this._selectedItem) {
             return placeholder;
         }
@@ -329,8 +341,8 @@ export class Select {
         if (this.error?.length) {
             buttonIcon = 'warning';
         }
-        return (h(ThemedHost, { key: 'b7c7d91e9c103eb283a19e6d61bd8a1ccdfcb1ae' }, h("p-field-container", { key: 'ce39c71781d71950eb8f0ec439e70508a801d4bd', error: this.error, forceShowTooltip: !!this.error?.length && !this._showDropdown, helper: this.helper, label: this.label, prefix: this.prefix, required: this.required, showOptional: this.showOptional, variant: 'write' }, h("p-dropdown", { key: '172741cbe636fa4b59cbac4445fdff1c8ade7ca7', applyChevron: false, applyFullWidth: true, applyMaxWidth: false, "disable-trigger-click": this.disabled, insideClick: true, manual: true, manualChevron: true, scrollable: this.enableAutocomplete ? 'large' : true, show: this._showDropdown, slot: 'content', strategy: this.strategy, onIsOpen: ev => this._onDropdownOpen(ev) }, h("p-button", { key: '9fda8191122e870eda211c58b30a6de022b629eb', active: this._showDropdown, chevron: this.showChevron ? (this._showDropdown ? 'up' : 'down') : false, class: 'w-full', error: !!this.error?.length, icon: buttonIcon, iconClass: this.applyClassOnSelectedItem &&
-                this._selectedItem?.[this.iconClassKey], size: this.size, slot: 'trigger', variant: 'secondary', onClick: ev => this._onClick(ev) }, h("div", { key: '1d08bb324241e1db8698678be35a1fd57f00603f', class: 'relative min-w-0 flex-1', ref: ref => (this._inputRef = ref) }, this._displayValue)), this.loading ? this._getLoadingItems() : this._getItems(), this.showAddItem && this._getAddItem()))));
+        return (h(ThemedHost, { key: 'c15b8ad5b4581bc9d73caec74094d05a5eccdc87' }, h("p-field-container", { key: '79a06c8be8884124cccdb17baf8d386d34f01e47', error: this.error, forceShowTooltip: !!this.error?.length && !this._showDropdown, helper: this.helper, label: this.label, prefix: this.prefix, required: this.required, showOptional: this.showOptional, variant: 'write' }, h("p-dropdown", { key: '9844250bac67e239336290deb4203ae6ecf62be4', applyChevron: false, applyFullWidth: true, applyMaxWidth: false, "disable-trigger-click": this.disabled, insideClick: true, manual: true, manualChevron: true, scrollable: this.enableAutocomplete ? 'large' : true, show: this._showDropdown, slot: 'content', strategy: this.strategy, onIsOpen: ev => this._onDropdownOpen(ev) }, h("p-button", { key: 'c33d47717e74742095e0bb6597ed74393782924a', active: this._showDropdown, chevron: this.showChevron ? (this._showDropdown ? 'up' : 'down') : false, class: 'w-full', error: !!this.error?.length, icon: buttonIcon, iconClass: this.applyClassOnSelectedItem &&
+                this._selectedItem?.[this.iconClassKey], size: this.size, slot: 'trigger', variant: 'secondary', onClick: ev => this._onClick(ev) }, h("div", { key: 'b8153f212f6fbcaf9654f71cd15cfe274b95125c', class: 'relative min-w-0 flex-1', ref: ref => (this._inputRef = ref) }, this._displayValue)), this.loading ? this._getLoadingItems() : this._getItems(), this.showAddItem && this._getAddItem()))));
     }
     documentClickHandler(event) {
         if (!this._showDropdown || childOfComposed(event, this._el)) {
@@ -571,7 +583,7 @@ export class Select {
     _getDisplay(item, isSelection = false, isSelectedInMenu = false) {
         let content = (h("div", { class: textContainer({
                 variant: 'default',
-                error: !!this.error?.length,
+                error: !!this.error?.length && isSelection,
                 enableTextWrap: this.enableTextWrap && !isSelection,
             }) }, item[isSelection
             ? (this.selectionDisplayKey ?? this.displayKey)
@@ -579,7 +591,7 @@ export class Select {
         if (this.avatarKey) {
             content = (h("span", { class: 'flex items-center gap-2' }, h("p-avatar", { letters: item[this.avatarLettersKey], size: 'sm', src: item[this.avatarKey] }), h("div", { class: textContainer({
                     variant: 'default',
-                    error: !!this.error?.length,
+                    error: !!this.error?.length && isSelection,
                     enableTextWrap: this.enableTextWrap && !isSelection,
                 }) }, item[this.dropdownDisplayKey ?? this.displayKey])));
         }
@@ -592,7 +604,7 @@ export class Select {
                     ? (item?.[this.iconClassKey] ?? '')
                     : ''), variant: item[this.iconKey] })), h("div", { class: textContainer({
                     variant: 'default',
-                    error: !!this.error?.length,
+                    error: !!this.error?.length && isSelection,
                     enableTextWrap: this.enableTextWrap && !isSelection,
                 }) }, item[this.dropdownDisplayKey ?? this.displayKey])));
         }