@colijnit/corecomponents_v12 12.2.21 → 12.2.22

package/src/lib/components/list-of-values/list-of-values-multiselect-popup.component.ts

@@ -1,132 +0,0 @@
-import {
-  Component,
-  ElementRef,
-  EventEmitter,
-  HostBinding,
-  Input,
-  OnInit,
-  Output,
-  ViewEncapsulation
-} from '@angular/core';
-import {BaseInputComponent} from "../base/base-input.component";
-import {CoreComponentsIcon} from "../../core/enum/core-components-icon.enum";
-
-@Component({
-  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,
-})
-export class ListOfValuesMultiselectPopupComponent extends BaseInputComponent<any> implements OnInit {
-  public readonly icons: typeof CoreComponentsIcon = CoreComponentsIcon;
-
-  @HostBinding("class.co-list-of-values-multiselect-popup")
-  public showClass() {
-    return true;
-  }
-
-  @Output()
-  public chosenCollection: EventEmitter<any[]> = new EventEmitter<any[]>();
-
-  @Output()
-  public closePopup: EventEmitter<any> = new EventEmitter<any>();
-
-  @Input()
-  public returnChosenCollection: any[];
-
-  @Input()
-  public parentForOverlay: ElementRef;
-
-
-  @Input()
-  public displayField: string = 'description';
-
-  @Input()
-  public set collection(value: any[]) {
-    this._collection = value || [];
-    this.searchCollection();
-  }
-
-  public get collection(): any[] {
-    return this._collection;
-  }
-
-  public selectedCollection: any[] = [];
-  public selectedOptions: any[] = [];
-  public allOptionsSelected: boolean = false;
-  public searchTerm = '';
-
-  private _collection: any[] = [];
-
-  public get filteredCollection(): any {
-    if (this.searchTerm.trim() === '') {
-      return this.collection;
-    }
-    return this.collection.filter((option: any) =>
-      option.label.toLowerCase().includes(this.searchTerm.toLowerCase())
-    );
-  }
-
-  ngOnInit() {
-    if(this.returnChosenCollection) {
-      this.selectedCollection = this.returnChosenCollection;
-    }
-  }
-
-  public onOptionClick(option: any): void {
-    const index = this.selectedCollection.findIndex((selectedOption) => selectedOption.value === option.value);
-    if (index !== -1) {
-      this.selectedCollection.splice(index, 1);
-    } else {
-      this.selectedCollection.push(option);
-    }
-  }
-
-  public okClicked(): void {
-    this.chosenCollection.emit(this.selectedCollection);
-    this.closePopup.emit();
-  }
-
-  public onToggleSelectAll(): void {
-    if (this.allOptionsSelected) {
-      this.selectedCollection = [];
-      this.allOptionsSelected = false;
-    } else {
-      this.selectedCollection = [...this.collection];
-      this.allOptionsSelected = true;
-    }
-  }
-
-  public searchCollection(): void {
-    this.selectedOptions = this.selectedOptions.filter((option) => {
-      if (this.collection) {
-        return this.searchTerm.includes(option.label);
-      } else {
-        return this.searchTerm.includes(option.value);
-      }
-    });
-  }
-}

package/src/lib/components/list-of-values/list-of-values-popup.component.ts

@@ -1,281 +0,0 @@
-import {
-    Component,
-    ElementRef,
-    EventEmitter,
-    HostBinding,
-    Input,
-    OnInit,
-    Output,
-    ViewChild,
-    ViewChildren,
-    ViewEncapsulation
-} from '@angular/core';
-import {InputSearchComponent} from '../input-search/input-search.component';
-import {KeyboardKey} from '../../core/enum/keyboard-key.enum';
-
-export interface lovViewModel {
-    checked: boolean
-    model: any
-}
-
-@Component({
-    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)">
-            <co-input-search *ngIf="multiselect"
-                             tabindex="-1"
-                             [(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, !multiselect)" 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, false)"></co-input-checkbox>
-                        <span class="lov-options-text" [textContent]="viewModel.model[displayField]"></span>
-                    </ng-container>
-                </li>
-            </ul>
-        </div>
-    `,
-    encapsulation: ViewEncapsulation.None,
-})
-export class ListOfValuesPopupComponent implements OnInit {
-    @ViewChildren('lovItem', { read: ElementRef }) set lovItems(children) {
-        this._lovItems = children.toArray();
-        this._scrollIntoView();
-    }
-
-    @ViewChild('dropDownList', { read: ElementRef })
-    public dropDownList: ElementRef;
-
-    @ViewChild(InputSearchComponent) set inputSearch(component: InputSearchComponent) {
-        this._searchInput = component;
-        if (this._searchInput) {
-            this._searchInput.requestFocus();
-        }
-    }
-
-    @Input()
-    public model: any;
-
-    @Input()
-    public multiselect: boolean = false;
-
-    @Input()
-    public displayField: string = 'description';
-
-    @Input()
-    public searchPlaceholder: string;
-
-    @Input()
-    public customCssClass: string;
-
-    @Input()
-    public searchDisabled: boolean = false;
-
-    @Input()
-    public parentForOverlay: ElementRef;
-
-    @Input()
-    public set collection(value: any[]) {
-        this._collection = value || [];
-        this._prepareViewModelsMain();
-        this._prepareViewModels();
-        this.filterViewModels();
-    }
-
-    public get collection(): any[] {
-        return this._collection;
-    }
-
-    @Output()
-    public modelChange: EventEmitter<any> = new EventEmitter<any>();
-
-    @Output()
-    public closePopup: EventEmitter<Event> = new EventEmitter<Event>();
-
-    @Output()
-    public keyDown: EventEmitter<KeyboardEvent> = new EventEmitter<KeyboardEvent>();
-
-    @HostBinding('class.co-list-of-values-popup')
-    public showClass() {
-        return true;
-    }
-
-    public set searchTerm(value: string) {
-        this._searchTerm = value;
-        this.model = undefined;
-        this.highLightModel = undefined;
-        this.filterViewModels();
-    }
-
-    public get searchTerm(): string {
-        return this._searchTerm;
-    }
-
-    public viewModels: lovViewModel[] = [];
-    public viewModelsMain: lovViewModel[] = [];
-    public highLightModel: lovViewModel;
-
-    private _collection: any[] = [];
-    private _searchTerm: string = '';
-    private _lovItems: ElementRef[] = [];
-    private _searchInput: InputSearchComponent;
-
-    constructor(private _elementRef: ElementRef) {
-    }
-
-    ngOnInit() {
-        if (this.model) {
-            if (!this.multiselect) {
-                this._scrollIntoView();
-            } else {
-                for (let i = 0; i < this.model.length; i++) {
-                    const viewModel: lovViewModel = this.viewModelsMain.find(v => JSON.stringify(v.model) === JSON.stringify(this.model[i]));
-                    if (viewModel) {
-                        viewModel.checked = true;
-                    }
-                }
-            }
-        }
-    }
-
-    public handleInputKeyDown(event: KeyboardEvent): boolean {
-        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);
-                    } else {
-                        this.keyDown.next(event);
-                    }
-                    return false;
-                default:
-                    this.keyDown.next(event);
-                    return true;
-            }
-        }
-    }
-
-    public filterViewModels(): void {
-        if (!this.collection) {
-            return;
-        }
-        this._prepareViewModels();
-    }
-
-    public selectViewModel(viewModel: lovViewModel, closePopup: boolean = true): void {
-        if (!this.multiselect) {
-            this.selectModelByViewModel(viewModel, closePopup);
-        } else {
-            const idx: number = this.viewModels.findIndex(vm => vm === viewModel);
-            this.viewModels[idx].checked = !this.viewModels[idx].checked;
-            this.selectOptions();
-        }
-    }
-
-    public selectModelByViewModel(viewModel: lovViewModel, closePopup: boolean = true): void {
-        this.model = this.viewModelsMain.find(vm => vm === viewModel).model;
-        this.modelChange.emit(this.model);
-        this._scrollIntoView();
-        if (closePopup) {
-            this.closePopup.emit();
-        }
-    }
-
-    // for single select
-    public selectOptionAndClosePopup(): void {
-        if (!this.model && this.searchTerm) {
-            const wishModel: lovViewModel = 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
-    public selectOptions(): void {
-        this.model = this.viewModelsMain.filter(v => v.checked).map(m => m.model);
-        this.modelChange.emit(this.model);
-    }
-
-    public selectNextOption(back: boolean = false): void {
-        let nextModel: any;
-        if (!this.highLightModel) {
-            nextModel = this.viewModels[back ? this.viewModels.length - 1 : 0];
-        } else {
-            const currentViewModelIdx: number = 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);
-        } else {
-            this._scrollIntoView();
-        }
-    }
-
-    private _prepareViewModelsMain(): void {
-        this.viewModelsMain.length = 0;
-        this.collection.forEach(m => {
-            this.viewModelsMain.push({checked: false, model: m});
-        })
-    }
-
-    private _prepareViewModels(): void {
-        this.viewModels.length = 0;
-        this.viewModels = this.viewModelsMain.filter(
-            vm => vm.model[this.displayField] && vm.model[this.displayField].toLowerCase().includes(this.searchTerm ? this.searchTerm.toLowerCase() : ""))
-    }
-
-    private _scrollIntoView(): void {
-        const activeIndex: number = this.viewModels.findIndex(vmm => vmm === this.highLightModel);
-        if (!this._lovItems || this._lovItems.length <= 0 || activeIndex < 0 || !this.dropDownList) {
-            return;
-        }
-        const activeItem = this._lovItems[activeIndex].nativeElement ? this._lovItems[activeIndex].nativeElement : undefined;
-        const scrollParent = this.dropDownList.nativeElement ? this.dropDownList.nativeElement : undefined;
-        this._scrollActiveItemIntoView(activeItem, scrollParent);
-    }
-
-    private _scrollActiveItemIntoView(activeItem: any, scrollParent: any): void {
-        if (!activeItem || !scrollParent) {
-            return;
-        }
-        let { offsetHeight, offsetTop } = activeItem;
-        let { offsetHeight: parentOffsetHeight, scrollTop, offsetTop: parentOffsetTop } = scrollParent;
-        offsetTop = offsetTop - parentOffsetTop;
-
-        const isAbove = offsetTop < scrollTop;
-        const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
-
-        if (isAbove) {
-            scrollParent.scrollTo(0, offsetTop);
-        } else if (isBelow) {
-            scrollParent.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight);
-        }
-    }
-}

package/src/lib/components/list-of-values/list-of-values.component.ts

@@ -1,257 +0,0 @@
-import {Component, ComponentRef, ElementRef, forwardRef, HostBinding, Input, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
-import {BaseInputComponent} from '../base/base-input.component';
-import {CoreComponentsIcon} from '../../core/enum/core-components-icon.enum';
-import {OverlayService} from '../../service/overlay.service';
-import {ListOfValuesPopupComponent} from './list-of-values-popup.component';
-import {KeyboardKey} from '../../core/enum/keyboard-key.enum';
-import {SafeHtml} from '@angular/platform-browser';
-import {SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME} from '../../interfaces/screen-config-adapter-component-interface-name';
-
-@Component({
-    selector: 'co-list-of-values',
-    template: `
-        <co-input-text aria-haspopup="listbox" [attr.aria-expanded]="isSelectOpen" aria-controls="lov-popup" role="combobox"
-                       class="no-focus-line"
-                       overlayParent
-                       #parentForOverlay="overlayParent" type="text" [id]="label"
-                       [model]="multiselect ? selectedModels : selectedModel"
-                       [placeholder]="label"
-                       [readonly]="readonly"
-                       [disabled]="disabled"
-                       [required]="required"
-                       [noClickFocus]="false"
-                       [leftIconData]="leftIconData"
-                       [rightIcon]="isSelectOpen ? icons.ChevronUpRegular : icons.ChevronDownRegular"
-                       [showClearButton]="true"
-                       [useContent]="multiselect"
-                       [customHeight]="multiselect"
-                       [keepFocussed]="keepFocussed"
-                       (modelChange)="handleInputModelChange($event)"
-                       (click)="openPopup()"
-                       (rightIconClick)="toggleSelect()"
-                       (keydown)="handleInputKeyDown($event)"
-                       (clearIconClick)="clearModel($event)"
-                       (blur)="checkModel()"
-        >
-            <ng-container *ngIf="multiselect">
-                <div class="multiselect-chips-wrapper">
-                    <div class="chips" *ngFor="let chip of model">
-                        <span class="chips-description" [textContent]="chip[displayField]"></span>
-                        <co-icon class="remove-chip-icon" [icon]="icons.CrossSkinny" (click)="removeOptionFromModel(chip)"></co-icon>
-                    </div>
-                </div>
-            </ng-container>
-        </co-input-text>
-    `,
-    providers: [
-        OverlayService,
-        {
-            provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
-            useExisting: forwardRef(() => ListOfValuesComponent)
-        }
-    ],
-    encapsulation: ViewEncapsulation.None,
-})
-export class ListOfValuesComponent extends BaseInputComponent<any> implements OnInit {
-    public readonly icons: typeof CoreComponentsIcon = CoreComponentsIcon;
-
-    @Input()
-    public set model(value: any) {
-        super.model = value;
-        this._setSelectedModel();
-    }
-
-    public get model(): any {
-        return super.model;
-    }
-
-    @ViewChild('parentForOverlay', {read: ElementRef})
-    public parentForOverlay: ElementRef;
-
-    @HostBinding('class.custom-height')
-    @HostBinding('class.multi-select')
-    @Input()
-    public multiselect: boolean = false;
-
-    @Input()
-    public displayField: string = 'description';
-
-    @Input()
-    public set collection(value: any[]) {
-        this._collection = value || [];
-    }
-
-    public get collection(): any[] {
-        return this._collection;
-    }
-
-    @Input()
-    public leftIconData: SafeHtml | undefined;
-
-    @Input()
-    public searchPlaceholder: string;
-
-    @Input()
-    public label: string;
-
-    @Input()
-    public customCssClass: string;
-
-    @Input()
-    public searchDisabled: boolean = false;
-
-    @HostBinding('class.co-list-of-values')
-    public showClass() {
-        return true;
-    }
-
-    public isSelectOpen: boolean = false;
-    public state: string = 'default';
-    public selectedModel: string;
-    public selectedModels: string[] = [];
-
-    private _collection: any[] = [];
-
-    private _lovPopupComponentRef: ComponentRef<any>;
-
-    ngOnInit() {
-        super.ngOnInit();
-        this._setSelectedModel();
-    }
-
-    public handleInputModelChange(model: string): void {
-        if (this._lovPopupComponentRef) {
-            this._lovPopupComponentRef.instance.searchTerm = model;
-        } else {
-            if (!this.selectedModel && model) {
-                this.openPopup();
-                this._lovPopupComponentRef.instance.searchTerm = model;
-            }
-        }
-        this.selectedModel = model;
-    }
-
-    public handleInputKeyDown(event: KeyboardEvent): boolean {
-        if (event) {
-            if (event.altKey && event.code === KeyboardKey.Down && !this._lovPopupComponentRef) {
-                this.openPopup();
-                return false;
-            }
-            if (this._lovPopupComponentRef) {
-                switch (event.code) {
-                    case KeyboardKey.Down:
-                        this._lovPopupComponentRef.instance.selectNextOption();
-                        return false;
-                    case KeyboardKey.Up:
-                        this._lovPopupComponentRef.instance.selectNextOption(true);
-                        return false;
-                    case KeyboardKey.Enter:
-                        this._lovPopupComponentRef.instance.selectOptionAndClosePopup();
-                        return false;
-                    case KeyboardKey.Tab:
-                        this._lovPopupComponentRef.instance.selectOptionAndClosePopup();
-                }
-            }
-        }
-    }
-
-    public clearModel(event: MouseEvent): void {
-        this.setModel(undefined);
-    }
-
-    public toggleSelect(): void {
-        if (this.readonly) {
-            return;
-        }
-        this.isSelectOpen = !this.isSelectOpen;
-        if (this.isSelectOpen) {
-            this.openPopup();
-        } else {
-            this.closePopup();
-        }
-        this.state = (this.state === 'default' ? 'rotated' : 'default');
-    }
-
-    public openPopup(): void {
-        if (this.readonly) {
-            return;
-        }
-        this.isSelectOpen = true;
-        this._lovPopupComponentRef = this.overlayService.createComponent(ListOfValuesPopupComponent, {
-            parentForOverlay: this.elementRef,
-            customCssClass: this.customCssClass,
-            searchDisabled: this.searchDisabled,
-            searchPlaceholder: this.searchPlaceholder,
-            displayField: this.displayField,
-            multiselect: this.multiselect,
-            model: this.model,
-            collection: this.collection
-        }, {
-            modelChange: (value) => this.optionChosen(value),
-            closePopup: () => this.closePopup(),
-            keyDown: (event: KeyboardEvent) => this.handleInputKeyDown(event)
-        });
-        this.keepFocussed = true;
-    }
-
-    public removeOptionFromModel(chip: any): void {
-        if (this.multiselect) {
-            const idx: number = this.model.findIndex(m => m === chip);
-            this.model.splice(idx, 1);
-            this.modelChange.emit(this.model);
-        }
-    }
-
-    public optionChosen(option: any): void {
-        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);
-        this.detectChanges();
-    }
-
-    public closePopup(): void {
-        this.keepFocussed = false;
-        this.isSelectOpen = false;
-        this.overlayService.removeComponent(this._lovPopupComponentRef);
-        this._lovPopupComponentRef = undefined;
-        this.focused = false;
-    }
-
-    public checkModel(): void {
-        if (!this.multiselect && this.selectedModel && this.collection) {
-            const model: any = this.collection.find(c => c[this.displayField] === this.selectedModel);
-            if (model) {
-                this.model = model;
-            } else {
-                this.model = undefined;
-            }
-            this.modelChange.emit(this.model);
-        }
-    }
-
-    private _setSelectedModel(): void {
-        if (this.multiselect) {
-            if (this.model) {
-                this.selectedModels.length = 0;
-                this.model.forEach(m => {
-                    this.selectedModels.push(m[this.displayField]);
-                });
-            } else {
-                this.selectedModels.length = 0;
-            }
-        } else {
-            if (this.model) {
-                this.selectedModel = this.model[this.displayField];
-            } else {
-                this.selectedModel = '';
-            }
-        }
-    }
-
-}

package/src/lib/components/list-of-values/list-of-values.module.ts

@@ -1,35 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {ListOfValuesComponent} from "./list-of-values.component";
-import {FormsModule} from "@angular/forms";
-import {InputTextModule} from "../input-text/input-text.module";
-import {InputCheckboxModule} from "../input-checkbox/input-checkbox.module";
-import {OverlayModule} from "../../directives/overlay/overlay.module";
-import {ClickoutsideModule} from "../../directives/clickoutside/clickoutside.module";
-import {ListOfValuesPopupComponent} from "./list-of-values-popup.component";
-import {ListOfValuesMultiselectPopupComponent} from "./list-of-values-multiselect-popup.component";
-import {IconModule} from "../icon/icon.module";
-import {InputSearchModule} from '../input-search/input-search.module';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        InputTextModule,
-        InputCheckboxModule,
-        OverlayModule,
-        ClickoutsideModule,
-        IconModule,
-        InputTextModule,
-        InputSearchModule
-    ],
-  declarations: [
-    ListOfValuesComponent,
-    ListOfValuesPopupComponent,
-    ListOfValuesMultiselectPopupComponent
-  ],
-  exports: [
-    ListOfValuesComponent
-  ]
-})
-export class ListOfValuesModule {}