@colijnit/corecomponents_v12 261.20.14 → 261.20.16

package/fesm2022/colijnit-corecomponents_v12.mjs

@@ -1,6 +1,6 @@
 import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { Input, Injectable, HostBinding, ViewEncapsulation, Component, Directive, ElementRef, Pipe, EventEmitter, Output, ViewChildren, ViewContainerRef, HostListener, ViewChild, Optional, NgModule, SkipSelf, InjectionToken, Inject, forwardRef, ChangeDetectionStrategy, ContentChildren, NO_ERRORS_SCHEMA, Injector } from '@angular/core';
+import { Input, Injectable, HostBinding, ViewEncapsulation, Component, Directive, ElementRef, Pipe, EventEmitter, Output, ViewChildren, ViewContainerRef, HostListener, ViewChild, Optional, NgModule, SkipSelf, InjectionToken, Inject, forwardRef, ChangeDetectionStrategy, ContentChildren, NO_ERRORS_SCHEMA, Injector, QueryList } from '@angular/core';
 import * as i5 from '@angular/forms';
 import { NgModel, UntypedFormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@angular/platform-browser';
@@ -9577,6 +9577,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 class InputSearchComponent extends BaseInputComponent {
     searchIcon = CoreComponentsIcon.Magnifier;
+    inputSearchText;
     placeholder;
     handleKeydown = true;
     search = new EventEmitter();
@@ -9608,14 +9609,18 @@ class InputSearchComponent extends BaseInputComponent {
         this.model = model;
         this.modelChange.next(this.model);
     }
+    requestFocus() {
+        this.inputSearchText.requestFocus();
+    }
     isMobileDevice() {
         return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: InputSearchComponent, isStandalone: false, selector: "co-input-search", inputs: { placeholder: "placeholder", handleKeydown: "handleKeydown", useLeftIcon: "useLeftIcon", useRightIcon: "useRightIcon", leftIconData: "leftIconData", rightIconData: "rightIconData", centerLabel: "centerLabel" }, outputs: { search: "search", isFocused: "isFocused", leftIconClick: "leftIconClick", rightIconClick: "rightIconClick" }, host: { properties: { "class.center-label": "this.centerLabel", "class.co-input-search": "this.showClass" } }, providers: [
             OverlayService
-        ], usesInheritance: true, ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "inputSearchText", first: true, predicate: ["inputText"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <co-input-text
+      #inputText
       [ngClass]="customCssClass"
       [model]="model"
       [leftIcon]="useLeftIcon ? searchIcon : null"
@@ -9645,6 +9650,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     selector: 'co-input-search',
                     template: `
     <co-input-text
+      #inputText
       [ngClass]="customCssClass"
       [model]="model"
       [leftIcon]="useLeftIcon ? searchIcon : null"
@@ -9668,7 +9674,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     encapsulation: ViewEncapsulation.None,
                     standalone: false
                 }]
-        }], propDecorators: { placeholder: [{
+        }], propDecorators: { inputSearchText: [{
+                type: ViewChild,
+                args: ['inputText']
+            }], placeholder: [{
                 type: Input
             }], handleKeydown: [{
                 type: Input
@@ -13380,6 +13389,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
+// Represents the enumeration of color sequence names; the different color sequences stored in db.
+var ColorSequenceName;
+(function (ColorSequenceName) {
+    ColorSequenceName["Regular"] = "REGULAR";
+    ColorSequenceName["Variant"] = "VARIANT";
+})(ColorSequenceName || (ColorSequenceName = {}));
+
 // The different view modes for content, e.g. list, grid, ..
 var ContentViewMode;
 (function (ContentViewMode) {
@@ -16819,6 +16835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 class InputScannerComponent {
     _scannerService;
+    inputSearch;
     model;
     placeholder;
     centerLabel = false;
@@ -16869,6 +16886,9 @@ class InputScannerComponent {
         this.barCodeScanned.next(this.model);
         this._blockEnterKeydown = false;
     }
+    requestFocus() {
+        this.inputSearch.requestFocus();
+    }
     _clearTimeout() {
         clearTimeout(this._keyDownTimeout);
         this._keyDownTimeout = undefined;
@@ -16877,43 +16897,45 @@ class InputScannerComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: InputScannerComponent, isStandalone: false, selector: "co-input-scanner", inputs: { model: "model", placeholder: "placeholder", centerLabel: "centerLabel", useLeftIcon: "useLeftIcon", useRightIcon: "useRightIcon", leftIconData: "leftIconData", rightIconData: "rightIconData", customCssClass: "customCssClass", scannerDisabled: "scannerDisabled" }, outputs: { modelChange: "modelChange", leftIconClick: "leftIconClick", rightIconClick: "rightIconClick", search: "search", isFocused: "isFocused", barCodeScanned: "barCodeScanned" }, host: { listeners: { "keydown": "handleKeyDown($event)" }, properties: { "class.co-input-scanner": "this.showClass" } }, providers: [
             ScannerService,
             OverlayService
-        ], ngImport: i0, template: `
-    <co-input-search
-      [(model)]="model"
-      [handleKeydown]="false"
-      [customCssClass]="customCssClass"
-      [placeholder]="placeholder"
-      [centerLabel]="centerLabel"
-      [useLeftIcon]="useLeftIcon"
-      [leftIconData]="leftIconData"
-      [useRightIcon]="useRightIcon"
-      [rightIconData]="rightIconData"
-      (leftIconClick)="leftIconClick.emit($event)"
-      (rightIconClick)="rightIconClick.emit($event)"
-      (isFocused)="isFocused.emit($event)"
-    ></co-input-search>
-  `, isInline: true, dependencies: [{ kind: "component", type: InputSearchComponent, selector: "co-input-search", inputs: ["placeholder", "handleKeydown", "useLeftIcon", "useRightIcon", "leftIconData", "rightIconData", "centerLabel"], outputs: ["search", "isFocused", "leftIconClick", "rightIconClick"] }], encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true }], ngImport: i0, template: `
+      <co-input-search
+              #inputSearch
+              [(model)]="model"
+              [handleKeydown]="false"
+              [customCssClass]="customCssClass"
+              [placeholder]="placeholder"
+              [centerLabel]="centerLabel"
+              [useLeftIcon]="useLeftIcon"
+              [leftIconData]="leftIconData"
+              [useRightIcon]="useRightIcon"
+              [rightIconData]="rightIconData"
+              (leftIconClick)="leftIconClick.emit($event)"
+              (rightIconClick)="rightIconClick.emit($event)"
+              (isFocused)="isFocused.emit($event)"
+      ></co-input-search>
+    `, isInline: true, dependencies: [{ kind: "component", type: InputSearchComponent, selector: "co-input-search", inputs: ["placeholder", "handleKeydown", "useLeftIcon", "useRightIcon", "leftIconData", "rightIconData", "centerLabel"], outputs: ["search", "isFocused", "leftIconClick", "rightIconClick"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputScannerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'co-input-scanner',
                     template: `
-    <co-input-search
-      [(model)]="model"
-      [handleKeydown]="false"
-      [customCssClass]="customCssClass"
-      [placeholder]="placeholder"
-      [centerLabel]="centerLabel"
-      [useLeftIcon]="useLeftIcon"
-      [leftIconData]="leftIconData"
-      [useRightIcon]="useRightIcon"
-      [rightIconData]="rightIconData"
-      (leftIconClick)="leftIconClick.emit($event)"
-      (rightIconClick)="rightIconClick.emit($event)"
-      (isFocused)="isFocused.emit($event)"
-    ></co-input-search>
-  `,
+      <co-input-search
+              #inputSearch
+              [(model)]="model"
+              [handleKeydown]="false"
+              [customCssClass]="customCssClass"
+              [placeholder]="placeholder"
+              [centerLabel]="centerLabel"
+              [useLeftIcon]="useLeftIcon"
+              [leftIconData]="leftIconData"
+              [useRightIcon]="useRightIcon"
+              [rightIconData]="rightIconData"
+              (leftIconClick)="leftIconClick.emit($event)"
+              (rightIconClick)="rightIconClick.emit($event)"
+              (isFocused)="isFocused.emit($event)"
+      ></co-input-search>
+    `,
                     providers: [
                         ScannerService,
                         OverlayService
@@ -16921,7 +16943,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     encapsulation: ViewEncapsulation.None,
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: ScannerService }], propDecorators: { model: [{
+        }], ctorParameters: () => [{ type: ScannerService }], propDecorators: { inputSearch: [{
+                type: ViewChild,
+                args: ['inputSearch']
+            }], model: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -18733,13 +18758,6 @@ class ColorSequence {
     }
 }
 
-// Represents the enumeration of color sequence names; the different color sequences stored in db.
-var ColorSequenceName;
-(function (ColorSequenceName) {
-    ColorSequenceName["Regular"] = "REGULAR";
-    ColorSequenceName["Variant"] = "VARIANT";
-})(ColorSequenceName || (ColorSequenceName = {}));
-
 class ColorSequenceService {
     colors = new Map();
     _colorSequences = [];
@@ -20476,6 +20494,396 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
+class ChipRenderComponent {
+    text;
+    icon = CoreComponentsIcon.CrossSkinny;
+    iconClass = "light";
+    noPointerHover = false;
+    bgCssColor;
+    textClick = new EventEmitter();
+    iconClick = new EventEmitter();
+    get isPointerHover() {
+        return !this.noPointerHover;
+    }
+    showClass = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChipRenderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ChipRenderComponent, isStandalone: false, selector: "co-chip-render", inputs: { text: "text", icon: "icon", iconClass: "iconClass", noPointerHover: "noPointerHover", bgCssColor: "bgCssColor" }, outputs: { textClick: "textClick", iconClick: "iconClick" }, host: { properties: { "style.background-color": "this.bgCssColor", "class.pointer-hover": "this.isPointerHover", "class.co-chip-render": "this.showClass" } }, ngImport: i0, template: `
+      <span class="text" (click)="textClick.emit($event)" [textContent]="text"></span>
+      <co-icon [icon]="icon" [class]="iconClass" (click)="iconClick.emit($event)"></co-icon>
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+__decorate([
+    InputBoolean()
+], ChipRenderComponent.prototype, "noPointerHover", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChipRenderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'co-chip-render',
+                    template: `
+      <span class="text" (click)="textClick.emit($event)" [textContent]="text"></span>
+      <co-icon [icon]="icon" [class]="iconClass" (click)="iconClick.emit($event)"></co-icon>
+  `,
+                    standalone: false,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], noPointerHover: [{
+                type: Input
+            }], bgCssColor: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ["style.background-color"]
+            }], textClick: [{
+                type: Output
+            }], iconClick: [{
+                type: Output
+            }], isPointerHover: [{
+                type: HostBinding,
+                args: ["class.pointer-hover"]
+            }], showClass: [{
+                type: HostBinding,
+                args: ["class.co-chip-render"]
+            }] } });
+
+class InputTextChipsComponent extends BaseInputComponent {
+    formComponent;
+    changeDetector;
+    overlayService;
+    _colorService;
+    iconCacheService;
+    formUserChangeListener;
+    ngZoneWrapper;
+    elementRef;
+    icons = CoreComponentsIcon;
+    inputTextComp;
+    chipRenderComps = new QueryList();
+    // @Input()
+    // public model: string[] = [];
+    placeholder = '';
+    colorSeqName = ColorSequenceName.Regular;
+    toggleModel;
+    toggleBoxLabel;
+    extraIcon = this.icons.Magnifier;
+    extraIconClicked = new EventEmitter();
+    // @Output()
+    // public modelChange: EventEmitter<string[]> = new EventEmitter<string[]>();
+    submit = new EventEmitter();
+    toggleModelChange = new EventEmitter();
+    textMode = false;
+    showClass = true;
+    customHeight = true;
+    // text that's shown live in input-text component
+    inputTextModel = '';
+    colorSequence;
+    // key: chip index, value: colorCss for chips with that text
+    chipColors = [];
+    _noChipsWrapClickFocus;
+    constructor(formComponent, changeDetector, overlayService, _colorService, iconCacheService, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, overlayService, formUserChangeListener, ngZoneWrapper, elementRef);
+        this.formComponent = formComponent;
+        this.changeDetector = changeDetector;
+        this.overlayService = overlayService;
+        this._colorService = _colorService;
+        this.iconCacheService = iconCacheService;
+        this.formUserChangeListener = formUserChangeListener;
+        this.ngZoneWrapper = ngZoneWrapper;
+        this.elementRef = elementRef;
+        super._markAsOnPush();
+    }
+    ngAfterViewInit() {
+        this._prepareModel();
+        this.colorSequence = this._colorService.getColorSequenceByName(this.colorSeqName);
+    }
+    activateTextMode() {
+        this.textMode = true;
+        this._prepareModel();
+    }
+    activateChipsMode() {
+        this.textMode = false;
+        this._setValueByText(this.inputTextModel);
+        // this.inputTextModel = '';
+    }
+    getChipColorCss(index) {
+        if (this.chipColors[index]) {
+            return this.chipColors[index];
+        }
+        else if (this.colorSequence) {
+            return this.colorSequence.getColor(index).cssColor;
+        }
+        else {
+            return '';
+        }
+    }
+    requestFocus() {
+        if (this.inputTextComp) {
+            this.inputTextComp.requestFocus();
+        }
+    }
+    onChipsWrapClick() {
+        if (!this._noChipsWrapClickFocus) {
+            this.requestFocus();
+        }
+    }
+    onChipTextClick(chipIndex) {
+        const chipsModel = StringUtils.CloneStringArray(this.model);
+        // this._ngZone.setTimeoutOutsideAngular(() => {
+        //   if (this.inputTextComp) {
+        //     this.inputTextComp.setSelectionRange(this.getSelectionRangeForChipWithIndex(chipIndex, chipsModel));
+        //   }
+        // });
+    }
+    onChipRemoveIconClick(event, chipIndex) {
+        EventUtils.KillEvent(event);
+        this._triggerNoChipsWrapClickFocus(); // because that's what I wanted StopEvent() to do, but it doesn't do that ;)
+        this.removeChipByIndex(chipIndex);
+        this._blurAndSubmit();
+    }
+    onRightInBetweenClick(chipIndex) {
+        return this.onChipTextClick(chipIndex);
+    }
+    onKeyDown(event) {
+        if (event.key === KeyboardKey.Enter) {
+            this._blurAndSubmit();
+        }
+    }
+    onClearIconClick() {
+        this.inputTextModel = '';
+        this.resetValue();
+        this.chipColors.length = 0;
+        this._blurAndSubmit();
+    }
+    handleFocus(focused) {
+        this.focused = focused;
+        if (this.focused) {
+            this.activateTextMode();
+            this.focus.emit();
+        }
+        else {
+            this.activateChipsMode();
+            this.blur.emit();
+        }
+    }
+    onExtraIconClick() {
+        this._blurAndSubmit();
+        this.extraIconClicked.emit();
+    }
+    onInputTextModelChange(txtModel) {
+        if (!txtModel) {
+            this.chipColors.length = 0;
+        }
+    }
+    // Returns the selection range for the original full string inside <input-text> that corresponds with the chip of given index.
+    // protected getSelectionRangeForChipWithIndex(chipIndex: number, chipsModel: string[]): NumericalRange {
+    //   if (!chipsModel) {
+    //     return undefined;
+    //   }
+    //   const selectionRange: NumericalRange = new NumericalRange();
+    //   selectionRange.lowerBound = 0;
+    //   for (let i: number = 0, len: number = chipsModel.length; i < len && i < chipIndex; i++) {
+    //     // add the text and its space to lowerbound
+    //     selectionRange.lowerBound += chipsModel[i].length + 1;
+    //   }
+    //   selectionRange.upperBound = selectionRange.lowerBound + chipsModel[chipIndex].length;
+    //   return selectionRange;
+    // }
+    removeChipByIndex(index) {
+        this.beforeRemoveChip();
+        ArrayUtils.RemoveElementAtIndex(index, this.model);
+        this.modelChange.emit(this.model);
+        ArrayUtils.RemoveElementAtIndex(index, this.chipColors);
+        if (this.model && this.model.length === 0) {
+            this.chipColors.length = 0;
+        }
+    }
+    resetValue() {
+        if (this.model) {
+            this.model.length = 0;
+        }
+        else {
+            this.model = [];
+        }
+        this.modelChange.emit(this.model);
+    }
+    beforeRemoveChip() {
+        // staticize all current chips
+        this.chipRenderComps.forEach((chipComp, idx) => {
+            this.chipColors[idx] = chipComp.bgCssColor;
+        });
+    }
+    _setValueByText(text) {
+        if (!text) {
+            this.resetValue();
+        }
+        this.model = StringUtils.StringToStringArray(text);
+        this.modelChange.emit(this.model);
+    }
+    _prepareModel() {
+        if (this.model) {
+            let inpTxt = '';
+            for (let i = 0, len = this.model.length; i < len; i++) {
+                inpTxt += this.model[i] + ' ';
+            }
+            this.inputTextModel = inpTxt.trim();
+        }
+    }
+    _blurAndSubmit() {
+        this.inputTextComp.doBlur();
+        this.submit.emit(this.model);
+    }
+    _triggerNoChipsWrapClickFocus() {
+        // this._noChipsWrapClickFocus = true;
+        // this._ngZone.setTimeoutOutsideAngular(() => {
+        //   this._noChipsWrapClickFocus = false;
+        // });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputTextChipsComponent, deps: [{ token: FormComponent, optional: true }, { token: i0.ChangeDetectorRef }, { token: OverlayService }, { token: ColorSequenceService }, { token: IconCacheService }, { token: FormInputUserModelChangeListenerService }, { token: NgZoneWrapperService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: InputTextChipsComponent, isStandalone: false, selector: "co-input-text-chips", inputs: { placeholder: "placeholder", colorSeqName: "colorSeqName", toggleModel: "toggleModel", toggleBoxLabel: "toggleBoxLabel", extraIcon: "extraIcon" }, outputs: { extraIconClicked: "extraIconClicked", submit: "submit", toggleModelChange: "toggleModelChange" }, host: { properties: { "class.text-mode": "this.textMode", "class.co-input-text-chips": "this.showClass" } }, providers: [
+            OverlayService, {
+                provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
+                useExisting: forwardRef(() => InputTextChipsComponent)
+            }, {
+                provide: BaseInputComponent,
+                useExisting: InputTextChipsComponent
+            }
+        ], viewQueries: [{ propertyName: "inputTextComp", first: true, predicate: InputTextComponent, descendants: true, static: true }, { propertyName: "chipRenderComps", predicate: ChipRenderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+      <co-input-text class="custom-height no-focus-line no-hover-line"
+                     [(model)]="inputTextModel"
+                     [useContent]="!textMode"
+                     [label]="label"
+                     [initFocus]="initFocus"
+                     [placeholder]="placeholder"
+                     [noClickFocus]="noClickFocus"
+                     [excludeUserModelChange]="excludeUserModelChange"
+                     [rightIconData]="iconCacheService.getIcon(extraIcon)"
+                     (clearIconClick)="onClearIconClick()"
+                     (keydown)="onKeyDown($event)"
+                     (isFocused)="handleFocus($event)"
+                     (rightIconClick)="onExtraIconClick()"
+                     (modelChange)="onInputTextModelChange($event)"
+                     [fullWidth]="true" [noValidation]="true">
+          <div class="chips-wrap" (click)="onChipsWrapClick()">
+              @for (txt of model; track txt; let index = $index) {
+                  <co-chip-render [text]="txt"
+                                  [bgCssColor]="getChipColorCss(index)"
+                                  (iconClick)="onChipRemoveIconClick($event, index)"
+                                  (textClick)="onChipTextClick(index)">
+                  </co-chip-render>
+                  <div class="right-in-between" (click)="onRightInBetweenClick(index)"></div>
+              }
+          </div>
+      </co-input-text>
+  `, isInline: true, dependencies: [{ kind: "component", type: InputTextComponent, selector: "co-input-text", inputs: ["useContent", "placeholder", "align", "type", "formatPipe", "min", "max", "pattern", "digitsOnly", "excludePlusMinus", "showClearButton", "keyDownWhiteList", "showPlaceholderOnFocus", "leftIcon", "rightIcon", "leftIconData", "rightIconData", "selectOnFocus", "emptyPlace", "firstDayOfWeek", "noStyle", "hideArrowButtons", "model"], outputs: ["leftIconClick", "leftIconMouseDown", "leftIconMouseUp", "rightIconClick", "rightIconMouseDown", "rightIconMouseUp", "clearIconClick", "isFocused"] }, { kind: "component", type: ChipRenderComponent, selector: "co-chip-render", inputs: ["text", "icon", "iconClass", "noPointerHover", "bgCssColor"], outputs: ["textClick", "iconClick"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputTextChipsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'co-input-text-chips',
+                    template: `
+      <co-input-text class="custom-height no-focus-line no-hover-line"
+                     [(model)]="inputTextModel"
+                     [useContent]="!textMode"
+                     [label]="label"
+                     [initFocus]="initFocus"
+                     [placeholder]="placeholder"
+                     [noClickFocus]="noClickFocus"
+                     [excludeUserModelChange]="excludeUserModelChange"
+                     [rightIconData]="iconCacheService.getIcon(extraIcon)"
+                     (clearIconClick)="onClearIconClick()"
+                     (keydown)="onKeyDown($event)"
+                     (isFocused)="handleFocus($event)"
+                     (rightIconClick)="onExtraIconClick()"
+                     (modelChange)="onInputTextModelChange($event)"
+                     [fullWidth]="true" [noValidation]="true">
+          <div class="chips-wrap" (click)="onChipsWrapClick()">
+              @for (txt of model; track txt; let index = $index) {
+                  <co-chip-render [text]="txt"
+                                  [bgCssColor]="getChipColorCss(index)"
+                                  (iconClick)="onChipRemoveIconClick($event, index)"
+                                  (textClick)="onChipTextClick(index)">
+                  </co-chip-render>
+                  <div class="right-in-between" (click)="onRightInBetweenClick(index)"></div>
+              }
+          </div>
+      </co-input-text>
+  `,
+                    providers: [
+                        OverlayService, {
+                            provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
+                            useExisting: forwardRef(() => InputTextChipsComponent)
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputTextChipsComponent
+                        }
+                    ],
+                    standalone: false,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: () => [{ type: FormComponent, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }, { type: OverlayService }, { type: ColorSequenceService }, { type: IconCacheService }, { type: FormInputUserModelChangeListenerService }, { type: NgZoneWrapperService }, { type: i0.ElementRef }], propDecorators: { inputTextComp: [{
+                type: ViewChild,
+                args: [InputTextComponent, { static: true }]
+            }], chipRenderComps: [{
+                type: ViewChildren,
+                args: [ChipRenderComponent]
+            }], placeholder: [{
+                type: Input
+            }], colorSeqName: [{
+                type: Input
+            }], toggleModel: [{
+                type: Input
+            }], toggleBoxLabel: [{
+                type: Input
+            }], extraIcon: [{
+                type: Input
+            }], extraIconClicked: [{
+                type: Output
+            }], submit: [{
+                type: Output
+            }], toggleModelChange: [{
+                type: Output
+            }], textMode: [{
+                type: HostBinding,
+                args: ['class.text-mode']
+            }], showClass: [{
+                type: HostBinding,
+                args: ['class.co-input-text-chips']
+            }] } });
+
+class InputTextChipsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputTextChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: InputTextChipsModule, declarations: [InputTextChipsComponent,
+            ChipRenderComponent], imports: [CommonModule,
+            IconModule,
+            InputTextModule], exports: [InputTextChipsComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputTextChipsModule, imports: [CommonModule,
+            IconModule,
+            InputTextModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputTextChipsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        IconModule,
+                        InputTextModule
+                    ],
+                    declarations: [
+                        InputTextChipsComponent,
+                        ChipRenderComponent
+                    ],
+                    exports: [
+                        InputTextChipsComponent
+                    ]
+                }]
+        }] });
+
 /*
  * Public API Surface of corecomponents
  */
@@ -20484,5 +20892,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AlignWithDirective, AlignWithModule, AppendPipe, AppendPipeModule, ArticleTileComponent, ArticleTileModule, BaseInputComponent, BaseInputDatePickerDirective, BaseModuleScreenConfigService, BaseModuleService, ButtonComponent, ButtonModule, CalendarComponent, CalendarModule, CalendarTemplateComponent, CardComponent, CardModule, CarouselComponent, CarouselHammerConfig, CarouselModule, CheckmarkOverlayComponent, CheckmarkOverlayModule, ClickOutsideDirective, ClickoutsideModule, CoCurrencyPipe, CoCurrencyPipeModule, CoDialogComponent, CoDialogModule, CoDialogWizardComponent, CoDialogWizardModule, CoDirection, CoOrientation, CollapsibleComponent, CollapsibleModule, ColorPickerComponent, ColorPickerModule, ColorSequenceService, ColumnAlign, ContentViewMode, CoreComponentsIcon, CoreComponentsTranslationModule, CoreComponentsTranslationService, CoreDialogModule, CoreDialogService, CoreLocalizePipe, DoubleCalendarComponent, DoubleCalendarModule, DragDropContainer, DragDropContainerComponent, DragDropManagerService, DragDropModule, DraggableDirective, ElementPosition, FilterItemComponent, FilterItemMode, FilterItemModule, FilterItemViewmodel, FilterPipe, FilterPipeModule, FilterViewmodel, FormComponent, FormInputUserModelChangeListenerService, FormMasterService, FormModule, GridToolbarButtonComponent, GridToolbarButtonModule, GridToolbarComponent, GridToolbarModule, HourSchedulingComponent, HourSchedulingComponentModule, HourSchedulingExpandableComponent, HourSchedulingExpandableComponentModule, HourSchedulingExpandableTemplateComponent, HourSchedulingExpandableTemplateModule, HourSchedulingTestObjectComponent, IconCacheService, IconCollapseHandleComponent, IconCollapseHandleModule, IconComponent, IconModule, ImageComponent, ImageModule, InputCheckboxComponent, InputCheckboxModule, InputDatePickerComponent, InputDatePickerModule, InputDateRangePickerComponent, InputDateRangePickerModule, InputNumberPickerComponent, InputNumberPickerModule, InputRadioButtonComponent, InputRadioButtonModule, InputScannerComponent, InputScannerModule, InputSearchComponent, InputSearchModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, InputTimeComponent, InputTimeModule, LevelIndicatorComponent, LevelIndicatorModule, ListOfIconsComponent, ListOfIconsModule, ListOfValuesComponent, ListOfValuesModule, ListOfValuesPopupComponent, LoaderComponent, LoaderModule, NgZoneWrapperService, ObserveVisibilityDirective, ObserveVisibilityModule, OrientationOfDirection, OverlayDirective, OverlayModule, OverlayParentDirective, OverlayService, PaginatePipe, PaginationBarComponent, PaginationBarModule, PaginationComponent, PaginationModule, PopupButtonsComponent, PopupMessageDisplayComponent, PopupModule, PopupWindowShellComponent, PrependPipe, PrependPipeModule, PriceDisplayPipe, PriceDisplayPipeModule, PromptService, ResponsiveTextComponent, ResponsiveTextModule, SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, ScreenConfigurationDirective, ScreenConfigurationModule, ScrollContainerComponent, ScrollContainerModule, ScrollDirection, SimpleGridCellComponent, SimpleGridColumnDirective, SimpleGridColumnTemplateDirective, SimpleGridColumnTemplateType, SimpleGridComponent, SimpleGridModule, TemplateWrapperDirective, TemplateWrapperModule, TextInputPopupComponent, TileComponent, TileModule, TileSelectComponent, TileSelectModule, TooltipDirective, TooltipDirectiveModule, ViewModeButtonsComponent, ViewModeButtonsModule, emailValidator, equalValidator, getValidatePasswordErrorString, maxStringLengthValidator, passwordValidator, precisionScaleValidator, requiredValidator, showHideDialog };
+export { AlignWithDirective, AlignWithModule, AppendPipe, AppendPipeModule, ArticleTileComponent, ArticleTileModule, BaseInputComponent, BaseInputDatePickerDirective, BaseModuleScreenConfigService, BaseModuleService, ButtonComponent, ButtonModule, CalendarComponent, CalendarModule, CalendarTemplateComponent, CardComponent, CardModule, CarouselComponent, CarouselHammerConfig, CarouselModule, CheckmarkOverlayComponent, CheckmarkOverlayModule, ClickOutsideDirective, ClickoutsideModule, CoCurrencyPipe, CoCurrencyPipeModule, CoDialogComponent, CoDialogModule, CoDialogWizardComponent, CoDialogWizardModule, CoDirection, CoOrientation, CollapsibleComponent, CollapsibleModule, Color, ColorPickerComponent, ColorPickerModule, ColorSequence, ColorSequenceName, ColorSequenceService, ColumnAlign, ContentViewMode, CoreComponentsIcon, CoreComponentsTranslationModule, CoreComponentsTranslationService, CoreDialogModule, CoreDialogService, CoreLocalizePipe, DoubleCalendarComponent, DoubleCalendarModule, DragDropContainer, DragDropContainerComponent, DragDropManagerService, DragDropModule, DraggableDirective, ElementPosition, FilterItemComponent, FilterItemMode, FilterItemModule, FilterItemViewmodel, FilterPipe, FilterPipeModule, FilterViewmodel, FormComponent, FormInputUserModelChangeListenerService, FormMasterService, FormModule, GridToolbarButtonComponent, GridToolbarButtonModule, GridToolbarComponent, GridToolbarModule, HourSchedulingComponent, HourSchedulingComponentModule, HourSchedulingExpandableComponent, HourSchedulingExpandableComponentModule, HourSchedulingExpandableTemplateComponent, HourSchedulingExpandableTemplateModule, HourSchedulingTestObjectComponent, IconCacheService, IconCollapseHandleComponent, IconCollapseHandleModule, IconComponent, IconModule, ImageComponent, ImageModule, InputCheckboxComponent, InputCheckboxModule, InputDatePickerComponent, InputDatePickerModule, InputDateRangePickerComponent, InputDateRangePickerModule, InputNumberPickerComponent, InputNumberPickerModule, InputRadioButtonComponent, InputRadioButtonModule, InputScannerComponent, InputScannerModule, InputSearchComponent, InputSearchModule, InputTextChipsComponent, InputTextChipsModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, InputTimeComponent, InputTimeModule, LevelIndicatorComponent, LevelIndicatorModule, ListOfIconsComponent, ListOfIconsModule, ListOfValuesComponent, ListOfValuesModule, ListOfValuesPopupComponent, LoaderComponent, LoaderModule, NgZoneWrapperService, ObserveVisibilityDirective, ObserveVisibilityModule, OrientationOfDirection, OverlayDirective, OverlayModule, OverlayParentDirective, OverlayService, PaginatePipe, PaginationBarComponent, PaginationBarModule, PaginationComponent, PaginationModule, PopupButtonsComponent, PopupMessageDisplayComponent, PopupModule, PopupWindowShellComponent, PrependPipe, PrependPipeModule, PriceDisplayPipe, PriceDisplayPipeModule, PromptService, ResponsiveTextComponent, ResponsiveTextModule, SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, ScreenConfigurationDirective, ScreenConfigurationModule, ScrollContainerComponent, ScrollContainerModule, ScrollDirection, SimpleGridCellComponent, SimpleGridColumnDirective, SimpleGridColumnTemplateDirective, SimpleGridColumnTemplateType, SimpleGridComponent, SimpleGridModule, TemplateWrapperDirective, TemplateWrapperModule, TextInputPopupComponent, TileComponent, TileModule, TileSelectComponent, TileSelectModule, TooltipDirective, TooltipDirectiveModule, ViewModeButtonsComponent, ViewModeButtonsModule, emailValidator, equalValidator, getValidatePasswordErrorString, maxStringLengthValidator, passwordValidator, precisionScaleValidator, requiredValidator, showHideDialog };
 //# sourceMappingURL=colijnit-corecomponents_v12.mjs.map