@colijnit/corecomponents_v12 262.1.2 → 262.1.4

package/fesm2022/colijnit-corecomponents_v12.mjs

@@ -7823,7 +7823,11 @@ class InputTextComponent extends BaseInputComponent {
                 event.preventDefault();
             }
         }
-        if (this.type === 'number' && this.model?.length === this.maxLength && /^\d$/.test(key)) {
+        const value = String(this.model ?? "");
+        if (this.type === "number" &&
+            this.maxLength > 0 &&
+            value.length >= this.maxLength &&
+            /^\d$/.test(key)) {
             event.preventDefault();
         }
     }
@@ -13942,9 +13946,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
+class LovUtils {
+    static getDisplayValue(model, displayField) {
+        if (!model || !displayField) {
+            return '';
+        }
+        return displayField
+            .split('|')
+            .map(field => model[field.trim()])
+            .filter(val => val != null && val !== '')
+            .join(' - ');
+    }
+}
+
 class ListOfValuesPopupComponent {
     iconCacheService;
     _elementRef;
+    lovUtils = LovUtils;
     set lovItems(children) {
         this._lovItems = children.toArray();
         this._scrollIntoView();
@@ -14075,7 +14093,7 @@ class ListOfValuesPopupComponent {
             this.selectNextOption();
         }
         if (!this.model && this.searchTerm) {
-            const wishModel = this.viewModelsMain.find(vmm => vmm.model[this.displayField] === this.searchTerm);
+            const wishModel = this.viewModelsMain.find(vmm => LovUtils.getDisplayValue(vmm.model, this.displayField) === this.searchTerm);
             if (wishModel) {
                 this.selectViewModel(wishModel);
             }
@@ -14148,8 +14166,8 @@ class ListOfValuesPopupComponent {
         }
         if (!this.model)
             return false;
-        const selected = this.model?.[this.displayField];
-        const current = vm.model?.[this.displayField];
+        const selected = LovUtils.getDisplayValue(this.model, this.displayField);
+        const current = LovUtils.getDisplayValue(vm.model, this.displayField);
         return selected != null && current != null && selected === current;
     }
     _prepareViewModelsMain() {
@@ -14198,102 +14216,102 @@ class ListOfValuesPopupComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListOfValuesPopupComponent, deps: [{ token: IconCacheService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ListOfValuesPopupComponent, isStandalone: false, selector: "co-list-of-values-popup", inputs: { model: "model", multiselect: "multiselect", showToggleAll: "showToggleAll", displayField: "displayField", searchPlaceholder: "searchPlaceholder", customCssClass: "customCssClass", searchDisabled: "searchDisabled", parentForOverlay: "parentForOverlay", optionIcon: "optionIcon", collection: "collection" }, outputs: { modelChange: "modelChange", closePopup: "closePopup", keyDown: "keyDown" }, host: { properties: { "class.co-list-of-values-popup": "this.showClass", "class.lov-anim": "this.animBase", "class.lov-anim--open": "this.isOpen" } }, viewQueries: [{ propertyName: "dropDownList", first: true, predicate: ["dropDownList"], descendants: true, read: ElementRef }, { propertyName: "inputSearch", first: true, predicate: InputSearchComponent, descendants: true }, { propertyName: "lovItems", predicate: ["lovItem"], descendants: true, read: ElementRef }], ngImport: i0, template: `
-      <div class="lov-options" [overlay]="parentForOverlay" [inheritWidth]="true" [ngClass]="customCssClass"
-        id="lov-popup"
-        role="listbox" [tabindex]="-1"
-        (clickOutside)="closePopup.emit($event)">
-        @if (multiselect) {
-          <co-input-search
-            tabindex="-1"
-            [(model)]="searchTerm"
-            [placeholder]="searchPlaceholder"
-            (keydown)="handleInputKeyDown($event)"
-          (modelChange)="filterViewModels()"></co-input-search>
-        }
-        @if (showToggleAll && multiselect) {
-          <div class="row gap">
-            <co-input-checkbox [model]="allSelected" (modelChange)="toggleAll()"></co-input-checkbox>
-            <span [textContent]="'DESELECT_ALL' | coreLocalize" (click)="toggleAll()"></span>
-          </div>
-        }
-        <ul class="dropdown-list" #dropDownList>
-          @for (viewModel of viewModels; track viewModel; let index = $index) {
-            <li
-              #lovItem
-              [class.selected]="viewModel === highLightModel || viewModels.length === 1"
-              [class.active]="isActive(viewModel)"
-              [class.highlighted]="viewModel === highLightModel"
-              [attr.aria-selected]="isActive(viewModel)"
-              (click)="selectViewModel(viewModel, !multiselect)"
-              role="option">
-              @if (!multiselect) {
-                @if (viewModel.model[optionIcon]) {
-                  <co-icon class="input-text-left-icon" [iconData]="iconCacheService.getIcon(viewModel.model[optionIcon])">
-                  </co-icon>
+        <div class="lov-options" [overlay]="parentForOverlay" [inheritWidth]="true" [ngClass]="customCssClass"
+             id="lov-popup"
+             role="listbox" [tabindex]="-1"
+             (clickOutside)="closePopup.emit($event)">
+            @if (multiselect) {
+                <co-input-search
+                        tabindex="-1"
+                        [(model)]="searchTerm"
+                        [placeholder]="searchPlaceholder"
+                        (keydown)="handleInputKeyDown($event)"
+                        (modelChange)="filterViewModels()"></co-input-search>
+            }
+            @if (showToggleAll && multiselect) {
+                <div class="row gap">
+                    <co-input-checkbox [model]="allSelected" (modelChange)="toggleAll()"></co-input-checkbox>
+                    <span [textContent]="'DESELECT_ALL' | coreLocalize" (click)="toggleAll()"></span>
+                </div>
+            }
+            <ul class="dropdown-list" #dropDownList>
+                @for (viewModel of viewModels; track viewModel; let index = $index) {
+                    <li
+                            #lovItem
+                            [class.selected]="viewModel === highLightModel || viewModels.length === 1"
+                            [class.active]="isActive(viewModel)"
+                            [class.highlighted]="viewModel === highLightModel"
+                            [attr.aria-selected]="isActive(viewModel)"
+                            (click)="selectViewModel(viewModel, !multiselect)"
+                            role="option">
+                        @if (!multiselect) {
+                            @if (viewModel.model[optionIcon]) {
+                                <co-icon class="input-text-left-icon" [iconData]="iconCacheService.getIcon(viewModel.model[optionIcon])">
+                                </co-icon>
+                            }
+                            <span class="lov-options-text" [textContent]="lovUtils.getDisplayValue(viewModel.model, displayField)"></span>
+                        }
+                        @if (multiselect) {
+                            <co-input-checkbox [model]="viewModel.checked"
+                                               (modelChange)="selectViewModel(viewModel, false)"></co-input-checkbox>
+                            <span class="lov-options-text" [textContent]="lovUtils.getDisplayValue(viewModel.model, displayField)"></span>
+                        }
+                    </li>
                 }
-                <span class="lov-options-text" [textContent]="viewModel.model[displayField]"></span>
-              }
-              @if (multiselect) {
-                <co-input-checkbox [model]="viewModel.checked"
-                (modelChange)="selectViewModel(viewModel, false)"></co-input-checkbox>
-                <span class="lov-options-text" [textContent]="viewModel.model[displayField]"></span>
-              }
-            </li>
-          }
-        </ul>
-      </div>
-      `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputCheckboxComponent, selector: "co-input-checkbox", inputs: ["cssClass", "clickableLabel"], outputs: ["modelChange"] }, { kind: "directive", type: OverlayDirective, selector: "[overlay]", inputs: ["overlay", "view", "inline", "keepInView", "inheritWidth", "rightAlign", "fullSize"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutside", "alwaysTrigger"], outputs: ["clickOutside"], exportAs: ["clickOutside"] }, { kind: "component", type: IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: InputSearchComponent, selector: "co-input-search", inputs: ["placeholder", "handleKeydown", "useLeftIcon", "useRightIcon", "leftIconData", "rightIconData", "centerLabel"], outputs: ["search", "isFocused", "leftIconClick", "rightIconClick"] }, { kind: "pipe", type: CoreLocalizePipe, name: "coreLocalize" }], encapsulation: i0.ViewEncapsulation.None });
+            </ul>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputCheckboxComponent, selector: "co-input-checkbox", inputs: ["cssClass", "clickableLabel"], outputs: ["modelChange"] }, { kind: "directive", type: OverlayDirective, selector: "[overlay]", inputs: ["overlay", "view", "inline", "keepInView", "inheritWidth", "rightAlign", "fullSize"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutside", "alwaysTrigger"], outputs: ["clickOutside"], exportAs: ["clickOutside"] }, { kind: "component", type: IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: InputSearchComponent, selector: "co-input-search", inputs: ["placeholder", "handleKeydown", "useLeftIcon", "useRightIcon", "leftIconData", "rightIconData", "centerLabel"], outputs: ["search", "isFocused", "leftIconClick", "rightIconClick"] }, { kind: "pipe", type: CoreLocalizePipe, name: "coreLocalize" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListOfValuesPopupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'co-list-of-values-popup',
                     template: `
-      <div class="lov-options" [overlay]="parentForOverlay" [inheritWidth]="true" [ngClass]="customCssClass"
-        id="lov-popup"
-        role="listbox" [tabindex]="-1"
-        (clickOutside)="closePopup.emit($event)">
-        @if (multiselect) {
-          <co-input-search
-            tabindex="-1"
-            [(model)]="searchTerm"
-            [placeholder]="searchPlaceholder"
-            (keydown)="handleInputKeyDown($event)"
-          (modelChange)="filterViewModels()"></co-input-search>
-        }
-        @if (showToggleAll && multiselect) {
-          <div class="row gap">
-            <co-input-checkbox [model]="allSelected" (modelChange)="toggleAll()"></co-input-checkbox>
-            <span [textContent]="'DESELECT_ALL' | coreLocalize" (click)="toggleAll()"></span>
-          </div>
-        }
-        <ul class="dropdown-list" #dropDownList>
-          @for (viewModel of viewModels; track viewModel; let index = $index) {
-            <li
-              #lovItem
-              [class.selected]="viewModel === highLightModel || viewModels.length === 1"
-              [class.active]="isActive(viewModel)"
-              [class.highlighted]="viewModel === highLightModel"
-              [attr.aria-selected]="isActive(viewModel)"
-              (click)="selectViewModel(viewModel, !multiselect)"
-              role="option">
-              @if (!multiselect) {
-                @if (viewModel.model[optionIcon]) {
-                  <co-icon class="input-text-left-icon" [iconData]="iconCacheService.getIcon(viewModel.model[optionIcon])">
-                  </co-icon>
+        <div class="lov-options" [overlay]="parentForOverlay" [inheritWidth]="true" [ngClass]="customCssClass"
+             id="lov-popup"
+             role="listbox" [tabindex]="-1"
+             (clickOutside)="closePopup.emit($event)">
+            @if (multiselect) {
+                <co-input-search
+                        tabindex="-1"
+                        [(model)]="searchTerm"
+                        [placeholder]="searchPlaceholder"
+                        (keydown)="handleInputKeyDown($event)"
+                        (modelChange)="filterViewModels()"></co-input-search>
+            }
+            @if (showToggleAll && multiselect) {
+                <div class="row gap">
+                    <co-input-checkbox [model]="allSelected" (modelChange)="toggleAll()"></co-input-checkbox>
+                    <span [textContent]="'DESELECT_ALL' | coreLocalize" (click)="toggleAll()"></span>
+                </div>
+            }
+            <ul class="dropdown-list" #dropDownList>
+                @for (viewModel of viewModels; track viewModel; let index = $index) {
+                    <li
+                            #lovItem
+                            [class.selected]="viewModel === highLightModel || viewModels.length === 1"
+                            [class.active]="isActive(viewModel)"
+                            [class.highlighted]="viewModel === highLightModel"
+                            [attr.aria-selected]="isActive(viewModel)"
+                            (click)="selectViewModel(viewModel, !multiselect)"
+                            role="option">
+                        @if (!multiselect) {
+                            @if (viewModel.model[optionIcon]) {
+                                <co-icon class="input-text-left-icon" [iconData]="iconCacheService.getIcon(viewModel.model[optionIcon])">
+                                </co-icon>
+                            }
+                            <span class="lov-options-text" [textContent]="lovUtils.getDisplayValue(viewModel.model, displayField)"></span>
+                        }
+                        @if (multiselect) {
+                            <co-input-checkbox [model]="viewModel.checked"
+                                               (modelChange)="selectViewModel(viewModel, false)"></co-input-checkbox>
+                            <span class="lov-options-text" [textContent]="lovUtils.getDisplayValue(viewModel.model, displayField)"></span>
+                        }
+                    </li>
                 }
-                <span class="lov-options-text" [textContent]="viewModel.model[displayField]"></span>
-              }
-              @if (multiselect) {
-                <co-input-checkbox [model]="viewModel.checked"
-                (modelChange)="selectViewModel(viewModel, false)"></co-input-checkbox>
-                <span class="lov-options-text" [textContent]="viewModel.model[displayField]"></span>
-              }
-            </li>
-          }
-        </ul>
-      </div>
-      `,
+            </ul>
+        </div>
+    `,
                     encapsulation: ViewEncapsulation.None,
                     standalone: false
                 }]
@@ -14352,6 +14370,7 @@ class ListOfValuesComponent extends BaseInputComponent {
     ngZoneWrapper;
     elementRef;
     icons = CoreComponentsIcon;
+    lovUtils = LovUtils;
     set model(value) {
         super.model = value;
         this._setSelectedModel();
@@ -14526,12 +14545,12 @@ class ListOfValuesComponent extends BaseInputComponent {
     optionChosen(option) {
         if (option) {
             if (this.multiselect) {
-                this.selectedModels = option.map(o => o[this.displayField]);
+                this.selectedModels = option.map(o => LovUtils.getDisplayValue(o, this.displayField));
             }
             else {
-                this.selectedModel = option[this.displayField];
+                this.selectedModel = LovUtils.getDisplayValue(option, this.displayField);
                 if (this.largeCollection) {
-                    this.filterText = option[this.displayField];
+                    this.filterText = LovUtils.getDisplayValue(option, this.displayField);
                 }
             }
         }
@@ -14556,7 +14575,7 @@ class ListOfValuesComponent extends BaseInputComponent {
     }
     checkModel() {
         if (!this.multiselect && this.selectedModel && this.collection) {
-            const model = this.collection.find(c => c[this.displayField] === this.selectedModel);
+            const model = this.collection.find(c => LovUtils.getDisplayValue(c, this.displayField) === this.selectedModel);
             if (model) {
                 this.model = model;
             }
@@ -14571,7 +14590,7 @@ class ListOfValuesComponent extends BaseInputComponent {
             if (this.model) {
                 this.selectedModels.length = 0;
                 this.model.forEach(m => {
-                    this.selectedModels.push(m[this.displayField]);
+                    this.selectedModels.push(LovUtils.getDisplayValue(m, this.displayField));
                 });
             }
             else {
@@ -14580,9 +14599,9 @@ class ListOfValuesComponent extends BaseInputComponent {
         }
         else {
             if (this.model) {
-                this.selectedModel = this.model[this.displayField];
+                this.selectedModel = LovUtils.getDisplayValue(this.model, this.displayField);
                 if (this.largeCollection) {
-                    this.filterText = this.model[this.displayField];
+                    this.filterText = LovUtils.getDisplayValue(this.model, this.displayField);
                 }
             }
             else {
@@ -14632,8 +14651,8 @@ class ListOfValuesComponent extends BaseInputComponent {
             <div class="multiselect-chips-wrapper">
               @for (chip of model; track chip) {
                 <div class="chips">
-                  <span class="chips-description" [textContent]="chip[displayField]"></span>
-                  <co-icon class="remove-chip-icon" [icon]="icons.CrossSkinny" (click)="removeOptionFromModel(chip)"></co-icon>
+                    <span class="chips-description" [textContent]="lovUtils.getDisplayValue(chip, displayField)"></span>
+                    <co-icon class="remove-chip-icon" [icon]="icons.CrossSkinny" (click)="removeOptionFromModel(chip)"></co-icon>
                 </div>
               }
             </div>
@@ -14696,8 +14715,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             <div class="multiselect-chips-wrapper">
               @for (chip of model; track chip) {
                 <div class="chips">
-                  <span class="chips-description" [textContent]="chip[displayField]"></span>
-                  <co-icon class="remove-chip-icon" [icon]="icons.CrossSkinny" (click)="removeOptionFromModel(chip)"></co-icon>
+                    <span class="chips-description" [textContent]="lovUtils.getDisplayValue(chip, displayField)"></span>
+                    <co-icon class="remove-chip-icon" [icon]="icons.CrossSkinny" (click)="removeOptionFromModel(chip)"></co-icon>
                 </div>
               }
             </div>
@@ -16419,6 +16438,7 @@ class FilterItemComponent {
             this.mode === this.modes.Slider;
         const canApplyDefaults = (modeWithoutCollection || (!modeWithoutCollection && this.collection && this.collection.length > 0)) &&
             this.defaultValue &&
+            !this.hidden &&
             !(this._model?.length || this._model > 0);
         if (!canApplyDefaults) {
             return;