@colijnit/corecomponents_v12 12.1.2 → 12.1.4

package/fesm2015/colijnit-corecomponents_v12.js

@@ -4387,7 +4387,7 @@ CoDialogComponent.decorators = [
                     <ng-container [ngTemplateOutlet]="headerTemplate"></ng-container>
                 </div>
                 <div class="dialog-close-button" *ngIf="showCloseIcon" (click)="handleCloseDialog($event)">
-                    <co-icon [icon]="icons.Cancel"></co-icon>
+                    <co-icon [icon]="icons.CrossSkinny"></co-icon>
                 </div>
             </div>
             <div class="dialog-content" [ngClass]="customCssClass ? customCssClass : undefined">
@@ -5640,7 +5640,7 @@ InputTextComponent.decorators = [
       <co-icon *ngIf="leftIcon || leftIconData" class="input-text-left-icon" [icon]="leftIcon" [iconData]="leftIconData"
                (click)="handleLeftIconClick($event)" (mousedown)="handleLeftIconMouseDown($event)"
                (mouseup)="handleLeftIconMouseUp($event)"></co-icon>
-      <div *ngIf="leftIcon || leftIconData" class="spacer"></div>
+      <div *ngIf="leftIcon || leftIconData" class="spacer left-icon"></div>
       <div class="input-wrapper">
         <label *ngIf="showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)"
                [textContent]="placeholder"></label>
@@ -5660,7 +5660,7 @@ InputTextComponent.decorators = [
         <co-icon [class.show]="showClearButton && hasValue && focused && !readonly" class="input-text-clear-button" [icon]="icons.CrossSkinny" (click)="clearInput($event)"></co-icon>
         <div class="required-indicator"></div>
       </div>
-      <div *ngIf="rightIcon || rightIconData" class="spacer"></div>
+      <div *ngIf="rightIcon || rightIconData" class="spacer right-icon"></div>
       <co-icon *ngIf="rightIcon || rightIconData" class="input-text-right-icon" [icon]="rightIcon" [iconData]="rightIconData"
                (click)="handleRightIconClick($event)" (mousedown)="handleRightIconMouseDown($event)" (mouseup)="handleRightIconMouseUp($event)"></co-icon>
     </div>
@@ -6576,6 +6576,9 @@ class InputDateRangePickerComponent extends BaseInputDatePickerDirective {
             this.toggleCalendar();
         }
     }
+    clearDate(index) {
+        this.model[index] = undefined;
+    }
     toggleCalendar() {
         if (this.readonly) {
             return;
@@ -6643,6 +6646,7 @@ InputDateRangePickerComponent.decorators = [
                        [leftIconData]="leftIconData"
                        [placeholder]="placeholder"
                        (blur)="handleFirstDateChanged(firstDateAsString)"
+                       (clearIconClick)="clearDate(0)"
         ></co-input-text>
         <co-input-text class="no-focus-line custom-height"
                        [(model)]= "secondDateAsString"
@@ -6652,6 +6656,7 @@ InputDateRangePickerComponent.decorators = [
                        [rightIcon]="rightIcon"
                        (rightIconClick)="toggleCalendar()"
                        (blur)="handleSecondDateChanged(secondDateAsString)"
+                       (clearIconClick)="clearDate(1)"
         ></co-input-text>
       </div>
     `,
@@ -10230,7 +10235,6 @@ class ListOfValuesPopupComponent {
         this._collection = [];
         this._searchTerm = '';
         this._lovItems = [];
-        this._activeIndex = -1;
     }
     set lovItems(children) {
         this._lovItems = children.toArray();
@@ -10256,6 +10260,8 @@ class ListOfValuesPopupComponent {
     }
     set searchTerm(value) {
         this._searchTerm = value;
+        this.model = undefined;
+        this.highLightModel = undefined;
         this.filterViewModels();
     }
     get searchTerm() {
@@ -10264,7 +10270,6 @@ class ListOfValuesPopupComponent {
     ngOnInit() {
         if (this.model) {
             if (!this.multiselect) {
-                this._activeIndex = this.viewModelsMain.findIndex(v => v.model === this.model);
                 this._scrollIntoView();
             }
             else {
@@ -10277,52 +10282,87 @@ class ListOfValuesPopupComponent {
             }
         }
     }
+    handleInputKeyDown(event) {
+        if (event) {
+            switch (event.code) {
+                case KeyboardKey.Down:
+                    this.selectNextOption();
+                    return false;
+                case KeyboardKey.Up:
+                    this.selectNextOption(true);
+                    return false;
+                case KeyboardKey.SpaceBar:
+                    if (this.highLightModel) {
+                        this.selectViewModel(this.highLightModel, false);
+                        return false;
+                    }
+            }
+        }
+    }
     filterViewModels() {
         if (!this.collection) {
             return;
         }
         this._prepareViewModels();
     }
-    selectViewModel(viewModel) {
-        const idx = this.viewModelsMain.findIndex(vm => vm === viewModel);
+    selectViewModel(viewModel, closePopup = true) {
         if (!this.multiselect) {
-            this._activeIndex = idx;
-            this.selectOptionByActiveIndex();
+            this.selectModelByViewModel(viewModel, closePopup);
         }
         else {
-            this.viewModelsMain[idx].checked = !this.viewModelsMain[idx].checked;
+            const idx = this.viewModels.findIndex(vm => vm === viewModel);
+            this.viewModels[idx].checked = !this.viewModels[idx].checked;
             this.selectOptions();
         }
     }
+    selectModelByViewModel(viewModel, closePopup = true) {
+        this.model = this.viewModelsMain.find(vm => vm === viewModel).model;
+        this.modelChange.emit(this.model);
+        this._scrollIntoView();
+        if (closePopup) {
+            this.closePopup.emit();
+        }
+    }
     // for single select
-    selectOptionByActiveIndex(closePopup = true) {
-        if (this._activeIndex > -1) {
-            this.model = this.viewModelsMain[this._activeIndex].model;
-            this.modelChange.emit(this.model);
-            this._scrollIntoView();
-            if (closePopup) {
-                this.closePopup.emit();
+    selectOptionAndClosePopup() {
+        if (!this.model && this.searchTerm) {
+            const wishModel = this.viewModelsMain.find(vmm => vmm.model[this.displayField] === this.searchTerm);
+            if (wishModel) {
+                this.selectViewModel(wishModel);
+            }
+            else {
+                this.model = undefined;
+                this.modelChange.emit(this.model);
+                this.searchTerm = '';
             }
         }
+        else {
+            this.closePopup.emit();
+        }
     }
     // for multi select
     selectOptions() {
         this.model = this.viewModelsMain.filter(v => v.checked).map(m => m.model);
         this.modelChange.emit(this.model);
     }
-    selectNextOption() {
-        if (!this._lovItems || this._activeIndex >= this._lovItems.length - 1) {
-            return;
+    selectNextOption(back = false) {
+        let nextModel;
+        if (!this.highLightModel) {
+            nextModel = this.viewModels[back ? this.viewModels.length - 1 : 0];
         }
-        this._activeIndex++;
-        this.selectOptionByActiveIndex(false);
-    }
-    selectPreviousOption() {
-        if (this._activeIndex <= 0) {
-            return;
+        else {
+            const currentViewModelIdx = this.viewModels.findIndex(vm => vm === this.highLightModel);
+            if (back) {
+                nextModel = this.viewModels[currentViewModelIdx <= 0 ? this.viewModels.length - 1 : currentViewModelIdx - 1];
+            }
+            else {
+                nextModel = this.viewModels[currentViewModelIdx >= this.viewModels.length - 1 ? 0 : currentViewModelIdx + 1];
+            }
+        }
+        this.highLightModel = nextModel;
+        if (!this.multiselect) {
+            this.selectViewModel(nextModel, false);
         }
-        this._activeIndex--;
-        this.selectOptionByActiveIndex(false);
     }
     _prepareViewModelsMain() {
         this.viewModelsMain.length = 0;
@@ -10335,10 +10375,11 @@ class ListOfValuesPopupComponent {
         this.viewModels = this.viewModelsMain.filter(vm => vm.model[this.displayField] && vm.model[this.displayField].toLowerCase().includes(this.searchTerm ? this.searchTerm.toLowerCase() : ""));
     }
     _scrollIntoView() {
-        if (!this._lovItems || this._lovItems.length <= 0 || this._activeIndex < 0 || !this._lovItems[this._activeIndex] || !this.dropDownList) {
+        const activeIndex = this.viewModels.findIndex(vmm => vmm === this.highLightModel);
+        if (!this._lovItems || this._lovItems.length <= 0 || activeIndex < 0 || !this.dropDownList) {
             return;
         }
-        const activeItem = this._lovItems[this._activeIndex].nativeElement ? this._lovItems[this._activeIndex].nativeElement : undefined;
+        const activeItem = this._lovItems[activeIndex].nativeElement ? this._lovItems[activeIndex].nativeElement : undefined;
         const scrollParent = this.dropDownList.nativeElement ? this.dropDownList.nativeElement : undefined;
         this._scrollActiveItemIntoView(activeItem, scrollParent);
     }
@@ -10362,18 +10403,22 @@ ListOfValuesPopupComponent.decorators = [
     { type: Component, args: [{
                 selector: 'co-list-of-values-popup',
                 template: `
-        <div class="lov-options" #dropDownList [overlay]="parentForOverlay" [inheritWidth]="true" [ngClass]="customCssClass" id="lov-popup"
+        <div class="lov-options" [overlay]="parentForOverlay" [inheritWidth]="true" [ngClass]="customCssClass" id="lov-popup"
              [tabIndex]="-1" role="listbox"
              (clickOutside)="closePopup.emit($event)">
-            <co-input-search *ngIf="multiselect" [(model)]="searchTerm" (modelChange)="filterViewModels()" [placeholder]="searchPlaceholder"></co-input-search>
-            <ul class="dropdown-list">
-                <li #lovItem *ngFor="let viewModel of viewModels; let index = index" [class.selected]="viewModel.model === model"
-                    (click)="selectViewModel(viewModel)" role="option">
+            <co-input-search *ngIf="multiselect" 
+                             [(model)]="searchTerm"
+                             [placeholder]="searchPlaceholder"
+                             (keydown)="handleInputKeyDown($event)"
+                             (modelChange)="filterViewModels()"></co-input-search>
+            <ul class="dropdown-list" #dropDownList>
+                <li #lovItem *ngFor="let viewModel of viewModels; let index = index" [class.selected]="viewModel === highLightModel"
+                    (click)="selectViewModel(viewModel, false)" role="option">
                     <ng-container *ngIf="!multiselect">
                         <span class="lov-options-text" [textContent]="viewModel.model[displayField]"></span>
                     </ng-container>
                     <ng-container *ngIf="multiselect">
-                        <co-input-checkbox [model]="viewModel.checked" (modelChange)="selectViewModel(viewModel)"></co-input-checkbox>
+                        <co-input-checkbox [model]="viewModel.checked" (modelChange)="selectViewModel(viewModel, false)"></co-input-checkbox>
                         <span class="lov-options-text" [textContent]="viewModel.model[displayField]"></span>
                     </ng-container>
                 </li>
@@ -10436,6 +10481,7 @@ class ListOfValuesComponent extends BaseInputComponent {
         if (this._lovPopupComponentRef) {
             this._lovPopupComponentRef.instance.searchTerm = model;
         }
+        this.selectedModel = model;
     }
     handleInputKeyDown(event) {
         if (event) {
@@ -10449,13 +10495,13 @@ class ListOfValuesComponent extends BaseInputComponent {
                         this._lovPopupComponentRef.instance.selectNextOption();
                         return false;
                     case KeyboardKey.Up:
-                        this._lovPopupComponentRef.instance.selectPreviousOption();
+                        this._lovPopupComponentRef.instance.selectNextOption(true);
                         return false;
                     case KeyboardKey.Enter:
-                        this._lovPopupComponentRef.instance.selectOptionByActiveIndex();
+                        this._lovPopupComponentRef.instance.selectOptionAndClosePopup();
                         return false;
                     case KeyboardKey.Tab:
-                        this._lovPopupComponentRef.instance.selectOptionByActiveIndex();
+                        this._lovPopupComponentRef.instance.selectOptionAndClosePopup();
                 }
             }
         }
@@ -10503,11 +10549,13 @@ class ListOfValuesComponent extends BaseInputComponent {
         }
     }
     optionChosen(option) {
-        if (this.multiselect) {
-            this.selectedModels = option.map(o => o[this.displayField]);
-        }
-        else {
-            this.selectedModel = option[this.displayField];
+        if (option) {
+            if (this.multiselect) {
+                this.selectedModels = option.map(o => o[this.displayField]);
+            }
+            else {
+                this.selectedModel = option[this.displayField];
+            }
         }
         this.model = option;
         this.modelChange.emit(this.model);
@@ -10518,6 +10566,18 @@ class ListOfValuesComponent extends BaseInputComponent {
         this._lovPopupComponentRef = undefined;
         this.focused = false;
     }
+    checkModel() {
+        if (!this.multiselect && this.selectedModel && this.collection) {
+            const model = this.collection.find(c => c[this.displayField] === this.selectedModel);
+            if (model) {
+                this.model = model;
+            }
+            else {
+                this.model = undefined;
+            }
+            this.modelChange.emit(this.model);
+        }
+    }
     _setSelectedModel() {
         if (this.multiselect) {
             if (this.model) {
@@ -10563,6 +10623,7 @@ ListOfValuesComponent.decorators = [
                        (rightIconClick)="toggleSelect()"
                        (keydown)="handleInputKeyDown($event)"
                        (clearIconClick)="clearModel($event)"
+                       (blur)="checkModel()"
         >
         </co-input-text>
         <ng-container *ngIf="multiselect">
@@ -10729,6 +10790,45 @@ ListOfValuesModule.decorators = [
             },] }
 ];
 
+class ResponsiveTextComponent {
+    showClass() {
+        return true;
+    }
+}
+ResponsiveTextComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'co-responsive-text',
+                template: `
+        <svg viewBox="0 0 100 100">
+            <foreignObject height="100%" width="100%">
+                <div class="text" [textContent]="text"></div>
+            </foreignObject>            
+        </svg>
+    `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+ResponsiveTextComponent.propDecorators = {
+    text: [{ type: Input }],
+    showClass: [{ type: HostBinding, args: ['class.co-responsive-text',] }]
+};
+
+class ResponsiveTextModule {
+}
+ResponsiveTextModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule
+                ],
+                declarations: [
+                    ResponsiveTextComponent
+                ],
+                exports: [
+                    ResponsiveTextComponent
+                ]
+            },] }
+];
+
 class FilterPipe {
     transform(items, field, value) {
         if (!items || !field) {
@@ -11517,5 +11617,5 @@ ColorSequenceService.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { ArticleTileComponent, ArticleTileModule, BaseInputComponent, BaseInputDatePickerDirective, ButtonComponent, ButtonModule, CalendarComponent, CalendarModule, CardComponent, CardModule, Carousel3dComponent, Carousel3dModule, CarouselComponent, CarouselHammerConfig, CarouselModule, CheckmarkOverlayModule, ClickoutsideModule, CoDialogComponent, CoDialogModule, CoDialogWizardComponent, CoDialogWizardModule, CoDirection, CoOrientation, CollapsibleComponent, CollapsibleModule, ColorSequenceService, ColumnAlign, ContentViewMode, CoreComponentsIcon, CoreComponentsTranslationModule, CoreComponentsTranslationService, DoubleCalendarComponent, DoubleCalendarModule, FilterItemComponent, FilterItemModule, FilterItemViewmodel, FilterPipe, FilterPipeModule, FilterViewmodel, FormComponent, FormInputUserModelChangeListenerService, FormMasterService, FormModule, GridToolbarButtonComponent, GridToolbarButtonModule, GridToolbarComponent, GridToolbarModule, IconCacheService, IconCollapseHandleComponent, IconCollapseHandleModule, IconComponent, IconModule, ImageComponent, ImageModule, InputCheckboxComponent, InputCheckboxModule, InputDatePickerComponent, InputDatePickerModule, InputDateRangePickerComponent, InputDateRangePickerModule, InputNumberPickerComponent, InputNumberPickerModule, InputRadioButtonComponent, InputRadioButtonModule, InputSearchComponent, InputSearchModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, LevelIndicatorComponent, LevelIndicatorModule, ListOfValuesComponent, ListOfValuesModule, ListOfValuesPopupComponent, NgZoneWrapperService, 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, emailValidator, equalValidator, getValidatePasswordErrorString, maxStringLengthValidator, passwordValidator, precisionScaleValidator, requiredValidator, showHideDialog, InputBoolean as ɵa, RippleModule as ɵb, PaginationService as ɵba, PaginatePipe as ɵbb, SimpleGridCellComponent as ɵbc, ListOfValuesMultiselectPopupComponent as ɵbd, PrependPipeModule as ɵbe, PrependPipe as ɵbf, TooltipModule as ɵbg, TooltipComponent as ɵbh, TooltipDirective as ɵbi, CheckmarkOverlayComponent as ɵbj, ScreenConfigurationDirective as ɵbk, ScreenConfigComponentWrapper as ɵbl, MD_RIPPLE_GLOBAL_OPTIONS as ɵc, CoRippleDirective as ɵd, CoViewportRulerService as ɵe, CoScrollDispatcherService as ɵf, CoScrollableDirective as ɵg, StopClickModule as ɵh, StopClickDirective as ɵi, BaseModule as ɵj, AppendPipeModule as ɵk, AppendPipe as ɵl, ValidationErrorModule as ɵm, OverlayDirective as ɵn, OverlayParentDirective as ɵo, LocalizePipe as ɵp, DictionaryService as ɵq, ValidationErrorComponent as ɵr, CommitButtonsModule as ɵs, CommitButtonsComponent as ɵt, ClickOutsideDirective as ɵu, ClickOutsideMasterService as ɵv, CalendarTemplateComponent as ɵw, PopupShowerService as ɵx, BaseSimpleGridComponent as ɵy, ObserveVisibilityDirective as ɵz };
+export { ArticleTileComponent, ArticleTileModule, BaseInputComponent, BaseInputDatePickerDirective, ButtonComponent, ButtonModule, CalendarComponent, CalendarModule, CardComponent, CardModule, Carousel3dComponent, Carousel3dModule, CarouselComponent, CarouselHammerConfig, CarouselModule, CheckmarkOverlayModule, ClickoutsideModule, CoDialogComponent, CoDialogModule, CoDialogWizardComponent, CoDialogWizardModule, CoDirection, CoOrientation, CollapsibleComponent, CollapsibleModule, ColorSequenceService, ColumnAlign, ContentViewMode, CoreComponentsIcon, CoreComponentsTranslationModule, CoreComponentsTranslationService, DoubleCalendarComponent, DoubleCalendarModule, FilterItemComponent, FilterItemModule, FilterItemViewmodel, FilterPipe, FilterPipeModule, FilterViewmodel, FormComponent, FormInputUserModelChangeListenerService, FormMasterService, FormModule, GridToolbarButtonComponent, GridToolbarButtonModule, GridToolbarComponent, GridToolbarModule, IconCacheService, IconCollapseHandleComponent, IconCollapseHandleModule, IconComponent, IconModule, ImageComponent, ImageModule, InputCheckboxComponent, InputCheckboxModule, InputDatePickerComponent, InputDatePickerModule, InputDateRangePickerComponent, InputDateRangePickerModule, InputNumberPickerComponent, InputNumberPickerModule, InputRadioButtonComponent, InputRadioButtonModule, InputSearchComponent, InputSearchModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, LevelIndicatorComponent, LevelIndicatorModule, ListOfValuesComponent, ListOfValuesModule, ListOfValuesPopupComponent, NgZoneWrapperService, ObserveVisibilityModule, OrientationOfDirection, OverlayModule, OverlayService, PaginationBarComponent, PaginationBarModule, PaginationComponent, PaginationModule, PopupButtonsComponent, PopupMessageDisplayComponent, PopupModule, PopupWindowShellComponent, PriceDisplayPipe, PriceDisplayPipeModule, PromptService, ResponsiveTextComponent, ResponsiveTextModule, SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, ScreenConfigurationModule, SimpleGridColumnDirective, SimpleGridComponent, SimpleGridModule, TextInputPopupComponent, TileComponent, TileModule, TooltipDirectiveModule, ViewModeButtonsComponent, ViewModeButtonsModule, emailValidator, equalValidator, getValidatePasswordErrorString, maxStringLengthValidator, passwordValidator, precisionScaleValidator, requiredValidator, showHideDialog, InputBoolean as ɵa, RippleModule as ɵb, PaginationService as ɵba, PaginatePipe as ɵbb, SimpleGridCellComponent as ɵbc, ListOfValuesMultiselectPopupComponent as ɵbd, PrependPipeModule as ɵbe, PrependPipe as ɵbf, TooltipModule as ɵbg, TooltipComponent as ɵbh, TooltipDirective as ɵbi, CheckmarkOverlayComponent as ɵbj, ScreenConfigurationDirective as ɵbk, ScreenConfigComponentWrapper as ɵbl, MD_RIPPLE_GLOBAL_OPTIONS as ɵc, CoRippleDirective as ɵd, CoViewportRulerService as ɵe, CoScrollDispatcherService as ɵf, CoScrollableDirective as ɵg, StopClickModule as ɵh, StopClickDirective as ɵi, BaseModule as ɵj, AppendPipeModule as ɵk, AppendPipe as ɵl, ValidationErrorModule as ɵm, OverlayDirective as ɵn, OverlayParentDirective as ɵo, LocalizePipe as ɵp, DictionaryService as ɵq, ValidationErrorComponent as ɵr, CommitButtonsModule as ɵs, CommitButtonsComponent as ɵt, ClickOutsideDirective as ɵu, ClickOutsideMasterService as ɵv, CalendarTemplateComponent as ɵw, PopupShowerService as ɵx, BaseSimpleGridComponent as ɵy, ObserveVisibilityDirective as ɵz };
 //# sourceMappingURL=colijnit-corecomponents_v12.js.map