@colijnit/corecomponents_v12 12.0.104 → 12.0.106

package/fesm2015/colijnit-corecomponents_v12.js

@@ -4064,6 +4064,7 @@ class BaseInputComponent {
         this.formUserChangeListener = formUserChangeListener;
         this.ngZoneWrapper = ngZoneWrapper;
         this.elementRef = elementRef;
+        this.icons = CoreComponentsIcon;
         this.showSaveCancel = false;
         this.noValidation = false;
         this.forceRequired = false; // a force outside of [cfgName]'s influence
@@ -7393,6 +7394,9 @@ class InputTextComponent extends BaseInputComponent {
         event.stopPropagation();
         this.rightIconClick.emit(event);
     }
+    clearInput() {
+        this.model = null;
+    }
 }
 InputTextComponent.decorators = [
     { type: Component, args: [{
@@ -7415,6 +7419,9 @@ InputTextComponent.decorators = [
                        (ngModelChange)="modelChange.emit($event)"
                        (keydown)="digitsOnly ? excludeNonDigitChars($event) : true"
                 >
+              <div *ngIf="showClearButton && model" class="input-text-clear-button" (click)="clearInput()">
+                <co-icon [icon]="icons.CrossSkinny"></co-icon>
+              </div>
             </div>
             <div *ngIf="rightIcon" class="spacer"></div>
             <co-icon *ngIf="rightIcon" class="input-text-right-icon" [icon]="rightIcon" [iconData]="rightIconData"
@@ -10761,7 +10768,7 @@ ListOfValuesPopupComponent.decorators = [
             <co-input-text *ngIf="!searchDisabled" [(model)]="searchTerm" [placeholder]="searchPlaceholder" (modelChange)="filterOptions()"></co-input-text>
             <ul>
               <li *ngFor="let option of filteredOptions" [class.selected]="option === model" (click)="onOptionClick(option)">
-                <span [textContent]="option[displayField]"></span>
+                <span class="lov-options-text" [textContent]="option[displayField]"></span>
               </li>
             </ul>
           </div>
@@ -10785,6 +10792,115 @@ ListOfValuesPopupComponent.propDecorators = {
     collection: [{ type: Input }]
 };
 
+class ListOfValuesMultiselectPopupComponent extends BaseInputComponent {
+    constructor() {
+        super(...arguments);
+        this.icons = CoreComponentsIcon;
+        this.chosenCollection = new EventEmitter();
+        this.closePopup = new EventEmitter();
+        this.displayField = 'description';
+        this.selectedCollection = [];
+        this.selectedOptions = [];
+        this.allOptionsSelected = false;
+        this.searchTerm = '';
+        this._collection = [];
+    }
+    showClass() {
+        return true;
+    }
+    set collection(value) {
+        this._collection = value || [];
+        this.searchCollection();
+    }
+    get collection() {
+        return this._collection;
+    }
+    get filteredCollection() {
+        if (this.searchTerm.trim() === '') {
+            return this.collection;
+        }
+        return this.collection.filter((option) => option.label.toLowerCase().includes(this.searchTerm.toLowerCase()));
+    }
+    ngOnInit() {
+        if (this.returnChosenCollection) {
+            this.selectedCollection = this.returnChosenCollection;
+        }
+    }
+    onOptionClick(option) {
+        const index = this.selectedCollection.findIndex((selectedOption) => selectedOption.value === option.value);
+        if (index !== -1) {
+            this.selectedCollection.splice(index, 1);
+        }
+        else {
+            this.selectedCollection.push(option);
+        }
+    }
+    okClicked() {
+        this.chosenCollection.emit(this.selectedCollection);
+        this.closePopup.emit();
+    }
+    onToggleSelectAll() {
+        if (this.allOptionsSelected) {
+            this.selectedCollection = [];
+            this.allOptionsSelected = false;
+        }
+        else {
+            this.selectedCollection = [...this.collection];
+            this.allOptionsSelected = true;
+        }
+    }
+    searchCollection() {
+        this.selectedOptions = this.selectedOptions.filter((option) => {
+            if (this.collection) {
+                return this.searchTerm.includes(option.label);
+            }
+            else {
+                return this.searchTerm.includes(option.value);
+            }
+        });
+    }
+}
+ListOfValuesMultiselectPopupComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-list-of-values-multiselect-popup",
+                template: `
+    <div class="co-list-of-values-multiselect-popup" [overlay]="parentForOverlay" [inheritWidth]="true">
+      <div class="list-of-values-multiselect-search-input-text">
+        <co-input-text [placeholder]="'Zoeken...'" [(model)]="searchTerm" (input)="searchCollection()"></co-input-text>
+      </div>
+      <div class="list-of-values-multiselect-options">
+        <div class="list-of-values-multiselect-search-deselect" (click)="onToggleSelectAll()">
+          <span [textContent]="'(De)selecteer alles'"></span>
+          <co-icon [icon]="icons.CheckRound"></co-icon>
+        </div>
+        <div class="list-of-values-multiselect-list">
+          <ul>
+            <li *ngFor="let option of filteredCollection" (click)="onOptionClick(option)">
+              <co-input-checkbox class="lov-options-checkbox" (modelChange)="onOptionClick(option)" [model]="selectedCollection.includes(option)"></co-input-checkbox>
+              <span>{{ option[displayField] }}</span>
+            </li>
+          </ul>
+        </div>
+        <div class="list-of-values-multiselect-ok-button" (click)="okClicked()">
+          <span [textContent]="'Ok'"></span>
+          <co-icon [icon]="icons.Check"></co-icon>
+        </div>
+      </div>
+    </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+ListOfValuesMultiselectPopupComponent.propDecorators = {
+    showClass: [{ type: HostBinding, args: ["class.co-list-of-values-multiselect-popup",] }],
+    chosenCollection: [{ type: Output }],
+    closePopup: [{ type: Output }],
+    returnChosenCollection: [{ type: Input }],
+    parentForOverlay: [{ type: Input }],
+    displayField: [{ type: Input }],
+    collection: [{ type: Input }]
+};
+
 class ListOfValuesComponent extends BaseInputComponent {
     constructor() {
         super(...arguments);
@@ -10880,9 +10996,27 @@ class ListOfValuesComponent extends BaseInputComponent {
     }
     openMultiselectSearch() {
         this.searchClicked = true;
+        if (this.searchClicked) {
+            this.overlayService.createComponent(ListOfValuesMultiselectPopupComponent, {
+                parentForOverlay: this.parentForOverlay,
+                customCssClass: this.customCssClass,
+                searchDisabled: this.searchDisabled,
+                searchPlaceholder: this.searchPlaceholder,
+                displayField: this.displayField,
+                collection: this.collection
+            }, {
+                chosenCollection: (value) => this.optionChosen(value),
+                closePopup: () => this.closePopup()
+            });
+        }
+        else {
+            this.overlayService.removeComponent();
+        }
     }
     optionChosen(option) {
         this.selectedModel = option[this.displayField];
+        this.model = option;
+        this.modelChange.emit(this.model);
     }
     closePopup() {
         this.overlayService.removeComponent();
@@ -10892,6 +11026,7 @@ ListOfValuesComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-list-of-values",
                 template: `
+<!--Single select component-->
       <div class="lov-container">
         <div class="lov-container-child" *ngIf="!multiselect">
           <div class="search-wrapper" overlayParent #parentForOverlay="overlayParent">
@@ -10905,14 +11040,14 @@ ListOfValuesComponent.decorators = [
                            [rightIcon]="icons.ArrowPointDown"
                            (click)="toggleSelect()"
                            (rightIconClick)="toggleSelect()"
+                           [showClearButton]="true"
             ></co-input-text>
           </div>
-
-
-
         </div>
+
+<!--Multiselect component-->
         <div *ngIf="multiselect">
-          <div class="search-wrapper-multiselect" (click)="openMultiselectSearch()" *ngIf="!searchClicked">
+          <div class="search-wrapper-multiselect" (click)="openMultiselectSearch()" overlayParent #parentForOverlay="overlayParent">
             <div class="tag-wrapper">
               <ul class="tag-ul-wrapper">
                 <li class="tag" *ngFor="let tags of multiselectTags">
@@ -10921,9 +11056,6 @@ ListOfValuesComponent.decorators = [
               </ul>
             </div>
           </div>
-          <div *ngIf="searchClicked">
-            <co-list-of-values-multiselect-search [collection]="filteredOptions" [returnChosenCollection]="multiselectTags" (okButtonClicked)="multiselectOkClick()" (chosenCollection)="createMultiSelectTags($event)"></co-list-of-values-multiselect-search>
-          </div>
         </div>
       </div>
     `,
@@ -11163,123 +11295,6 @@ ClickoutsideModule.decorators = [
             },] }
 ];
 
-class ListOfValuesMultiselectSearch extends BaseInputComponent {
-    constructor() {
-        super(...arguments);
-        this.icons = CoreComponentsIcon;
-        this.chosenCollection = new EventEmitter();
-        this.okButtonClicked = new EventEmitter();
-        this.selectedCollection = [];
-        this.selectedOptions = [];
-        this.allOptionsSelected = false;
-        this.searchTerm = '';
-    }
-    showClass() {
-        return true;
-    }
-    get filteredCollection() {
-        if (this.searchTerm.trim() === '') {
-            return this.collection;
-        }
-        return this.collection.filter((option) => option.label.toLowerCase().includes(this.searchTerm.toLowerCase()));
-    }
-    ngOnInit() {
-        if (this.returnChosenCollection) {
-            this.selectedCollection = this.returnChosenCollection;
-        }
-    }
-    onOptionClick(option) {
-        const index = this.selectedCollection.findIndex((selectedOption) => selectedOption.value === option.value);
-        if (index !== -1) {
-            this.selectedCollection.splice(index, 1);
-        }
-        else {
-            this.selectedCollection.push(option);
-        }
-    }
-    okClicked() {
-        this.chosenCollection.emit(this.selectedCollection);
-        this.okButtonClicked.emit();
-    }
-    onToggleSelectAll() {
-        if (this.allOptionsSelected) {
-            this.selectedCollection = [];
-            this.allOptionsSelected = false;
-        }
-        else {
-            this.selectedCollection = [...this.collection];
-            this.allOptionsSelected = true;
-        }
-    }
-    searchCollection() {
-        this.selectedOptions = this.selectedOptions.filter((option) => {
-            if (this.collection) {
-                return this.searchTerm.includes(option.label);
-            }
-            else {
-                return this.searchTerm.includes(option.value);
-            }
-        });
-    }
-}
-ListOfValuesMultiselectSearch.decorators = [
-    { type: Component, args: [{
-                selector: "co-list-of-values-multiselect-search",
-                template: `
-        <div class="co-list-of-values-multiselect-search">
-          <div class="list-of-values-multiselect-search-input-text">
-            <co-input-text [placeholder]="'Zoeken...'" [(model)]="searchTerm" (input)="searchCollection()"></co-input-text>
-          </div>
-          <div class="list-of-values-multiselect-options">
-            <div class="list-of-values-multiselect-search-deselect" (click)="onToggleSelectAll()">
-              <span [textContent]="'(De)selecteer alles'"></span>
-              <co-icon [icon]="icons.CheckRound"></co-icon>
-            </div>
-            <div class="list-of-values-multiselect-list">
-              <ul>
-                <li *ngFor="let option of filteredCollection" (click)="onOptionClick(option)">
-                  <co-input-checkbox class="lov-options-checkbox" (modelChange)="onOptionClick(option)" [model]="selectedCollection.includes(option)"></co-input-checkbox>
-                  <span>{{ option.label }}</span>
-                </li>
-              </ul>
-            </div>
-            <div class="list-of-values-multiselect-ok-button" (click)="okClicked()">
-              <span [textContent]="'Ok'"></span>
-              <co-icon [icon]="icons.Check"></co-icon>
-            </div>
-          </div>
-        </div>
-    `,
-                encapsulation: ViewEncapsulation.None
-            },] }
-];
-ListOfValuesMultiselectSearch.propDecorators = {
-    showClass: [{ type: HostBinding, args: ["class.co-list-of-values-multiselect-search",] }],
-    collection: [{ type: Input }],
-    returnChosenCollection: [{ type: Input }],
-    chosenCollection: [{ type: Output }],
-    okButtonClicked: [{ type: Output }]
-};
-
-class ListOfValuesMultiselectSearchModule {
-}
-ListOfValuesMultiselectSearchModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    InputTextModule,
-                    IconModule,
-                    InputCheckboxModule,
-                ],
-                declarations: [
-                    ListOfValuesMultiselectSearch
-                ],
-                exports: [
-                    ListOfValuesMultiselectSearch
-                ]
-            },] }
-];
-
 class ListOfValuesModule {
 }
 ListOfValuesModule.decorators = [
@@ -11291,11 +11306,12 @@ ListOfValuesModule.decorators = [
                     InputCheckboxModule,
                     OverlayModule,
                     ClickoutsideModule,
-                    ListOfValuesMultiselectSearchModule
+                    IconModule
                 ],
                 declarations: [
                     ListOfValuesComponent,
-                    ListOfValuesPopupComponent
+                    ListOfValuesPopupComponent,
+                    ListOfValuesMultiselectPopupComponent
                 ],
                 exports: [
                     ListOfValuesComponent
@@ -12040,5 +12056,5 @@ ColorSequenceService.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { ArticleTileComponent, ArticleTileModule, ButtonComponent, ButtonDropDownComponent, ButtonDropDownModule, ButtonModule, CardComponent, CardModule, Carousel3dComponent, Carousel3dModule, CarouselComponent, CarouselHammerConfig, CarouselModule, CheckmarkOverlayModule, ClickoutsideModule, CoDialogComponent, CoDialogModule, CoDialogWizardComponent, CoDialogWizardModule, CoDirection, CoGridComponent, CoGridModule, CoKanbanComponent, CoKanbanModule, CoOrientation, CoPivotComponent, CoPivotModule, CoScheduleComponent, CoScheduleModule, CoSidebarComponent, CoSidebarModule, CoToggleComponent, CoToggleModule, CollapsibleComponent, CollapsibleModule, ColorSequenceService, ColumnAlign, ContentViewMode, CoreComponentsIcon, DropDownListComponent, DropDownModule, FilterItemComponent, FilterItemModule, FilterItemViewmodel, FilterPipe, FilterPipeModule, FilterViewmodel, FormComponent, FormMasterService, FormModule, GridToolbarButtonComponent, GridToolbarButtonModule, GridToolbarComponent, GridToolbarModule, IconCacheService, IconCollapseHandleComponent, IconCollapseHandleModule, IconComponent, IconModule, ImageComponent, ImageModule, InputCheckboxComponent, InputCheckboxModule, InputCheckboxMultiSelectComponent, InputCheckboxMultiSelectModule, InputComboBoxComponent, InputComboBoxModule, InputDatePickerComponent, InputDatePickerModule, InputDateRangePickerComponent, InputDateRangePickerModule, InputListboxComponent, InputListboxModule, InputNumberPickerComponent, InputNumberPickerModule, InputRadioButtonComponent, InputRadioButtonModule, InputSearchComponent, InputSearchModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, LevelIndicatorComponent, LevelIndicatorModule, ListOfValuesComponent, ListOfValuesModule, ListOfValuesMultiselectSearch, ListOfValuesMultiselectSearchModule, MultiSelectListComponent, MultiSelectListModule, ObserveVisibilityModule, OrientationOfDirection, OverlayModule, OverlayService, PaginationBarComponent, PaginationBarModule, PaginationComponent, PaginationModule, PopupButtonsComponent, PopupMessageDisplayComponent, PopupModule, PopupWindowShellComponent, PriceDisplayPipe, PriceDisplayPipeModule, PromptService, SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, ScreenConfigurationModule, SimpleGridColumnDirective, SimpleGridComponent, SimpleGridModule, TextInputPopupComponent, TileComponent, TileModule, TooltipDirectiveModule, ViewModeButtonsComponent, ViewModeButtonsModule, showHideDialogAnimation, RippleModule as ɵa, MD_RIPPLE_GLOBAL_OPTIONS as ɵb, BaseSimpleGridComponent as ɵba, ObserveVisibilityDirective as ɵbb, PaginationService as ɵbc, PaginatePipe as ɵbd, SimpleGridCellComponent as ɵbe, ClickOutsideDirective as ɵbf, ClickOutsideMasterService as ɵbg, ListOfValuesPopupComponent as ɵbh, PrependPipeModule as ɵbi, PrependPipe as ɵbj, TooltipModule as ɵbk, TooltipComponent as ɵbl, TooltipDirective as ɵbm, CheckmarkOverlayComponent as ɵbn, ScreenConfigurationDirective as ɵbo, ScreenConfigComponentWrapper as ɵbp, CoRippleDirective as ɵc, CoViewportRulerService as ɵd, CoScrollDispatcherService as ɵe, CoScrollableDirective as ɵf, StopClickModule as ɵg, StopClickDirective as ɵh, InputBoolean as ɵi, BaseModule as ɵj, FormInputUserModelChangeListenerService as ɵk, NgZoneWrapperService as ɵl, BaseInputComponent as ɵm, BaseSelectionGridComponent as ɵn, BaseInlineEditGridComponent as ɵo, BaseToolbarGridComponent as ɵp, BaseGridComponent as ɵq, AppendPipeModule as ɵr, AppendPipe as ɵs, CommitButtonsModule as ɵt, CommitButtonsComponent as ɵu, ValidationErrorModule as ɵv, OverlayDirective as ɵw, OverlayParentDirective as ɵx, ValidationErrorComponent as ɵy, PopupShowerService as ɵz };
+export { ArticleTileComponent, ArticleTileModule, ButtonComponent, ButtonDropDownComponent, ButtonDropDownModule, ButtonModule, CardComponent, CardModule, Carousel3dComponent, Carousel3dModule, CarouselComponent, CarouselHammerConfig, CarouselModule, CheckmarkOverlayModule, ClickoutsideModule, CoDialogComponent, CoDialogModule, CoDialogWizardComponent, CoDialogWizardModule, CoDirection, CoGridComponent, CoGridModule, CoKanbanComponent, CoKanbanModule, CoOrientation, CoPivotComponent, CoPivotModule, CoScheduleComponent, CoScheduleModule, CoSidebarComponent, CoSidebarModule, CoToggleComponent, CoToggleModule, CollapsibleComponent, CollapsibleModule, ColorSequenceService, ColumnAlign, ContentViewMode, CoreComponentsIcon, DropDownListComponent, DropDownModule, FilterItemComponent, FilterItemModule, FilterItemViewmodel, FilterPipe, FilterPipeModule, FilterViewmodel, FormComponent, FormMasterService, FormModule, GridToolbarButtonComponent, GridToolbarButtonModule, GridToolbarComponent, GridToolbarModule, IconCacheService, IconCollapseHandleComponent, IconCollapseHandleModule, IconComponent, IconModule, ImageComponent, ImageModule, InputCheckboxComponent, InputCheckboxModule, InputCheckboxMultiSelectComponent, InputCheckboxMultiSelectModule, InputComboBoxComponent, InputComboBoxModule, InputDatePickerComponent, InputDatePickerModule, InputDateRangePickerComponent, InputDateRangePickerModule, InputListboxComponent, InputListboxModule, InputNumberPickerComponent, InputNumberPickerModule, InputRadioButtonComponent, InputRadioButtonModule, InputSearchComponent, InputSearchModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, LevelIndicatorComponent, LevelIndicatorModule, ListOfValuesComponent, ListOfValuesModule, ListOfValuesPopupComponent, MultiSelectListComponent, MultiSelectListModule, ObserveVisibilityModule, OrientationOfDirection, OverlayModule, OverlayService, PaginationBarComponent, PaginationBarModule, PaginationComponent, PaginationModule, PopupButtonsComponent, PopupMessageDisplayComponent, PopupModule, PopupWindowShellComponent, PriceDisplayPipe, PriceDisplayPipeModule, PromptService, SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, ScreenConfigurationModule, SimpleGridColumnDirective, SimpleGridComponent, SimpleGridModule, TextInputPopupComponent, TileComponent, TileModule, TooltipDirectiveModule, ViewModeButtonsComponent, ViewModeButtonsModule, showHideDialogAnimation, RippleModule as ɵa, MD_RIPPLE_GLOBAL_OPTIONS as ɵb, BaseSimpleGridComponent as ɵba, ObserveVisibilityDirective as ɵbb, PaginationService as ɵbc, PaginatePipe as ɵbd, SimpleGridCellComponent as ɵbe, ClickOutsideDirective as ɵbf, ClickOutsideMasterService as ɵbg, ListOfValuesMultiselectPopupComponent as ɵbh, PrependPipeModule as ɵbi, PrependPipe as ɵbj, TooltipModule as ɵbk, TooltipComponent as ɵbl, TooltipDirective as ɵbm, CheckmarkOverlayComponent as ɵbn, ScreenConfigurationDirective as ɵbo, ScreenConfigComponentWrapper as ɵbp, CoRippleDirective as ɵc, CoViewportRulerService as ɵd, CoScrollDispatcherService as ɵe, CoScrollableDirective as ɵf, StopClickModule as ɵg, StopClickDirective as ɵh, InputBoolean as ɵi, BaseModule as ɵj, FormInputUserModelChangeListenerService as ɵk, NgZoneWrapperService as ɵl, BaseInputComponent as ɵm, BaseSelectionGridComponent as ɵn, BaseInlineEditGridComponent as ɵo, BaseToolbarGridComponent as ɵp, BaseGridComponent as ɵq, AppendPipeModule as ɵr, AppendPipe as ɵs, CommitButtonsModule as ɵt, CommitButtonsComponent as ɵu, ValidationErrorModule as ɵv, OverlayDirective as ɵw, OverlayParentDirective as ɵx, ValidationErrorComponent as ɵy, PopupShowerService as ɵz };
 //# sourceMappingURL=colijnit-corecomponents_v12.js.map