@colijnit/corecomponents_v12 254.1.10 → 255.1.1

package/projects/corecomponents/src/lib/components/level-indicator/level-indicator.component.ts

@@ -0,0 +1,42 @@
+import {ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation} from '@angular/core';
+
+import {LevelIndicatorLevel} from './level-indicator-level.enum';
+
+@Component({
+    selector: "co-level-indicator",
+    template: `
+        <div [ngClass]="modelAsString">
+            <div class="square-1"></div>
+            <div class="square-2"></div>
+            <div class="square-3"></div>
+        </div>
+    `,
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LevelIndicatorComponent {
+    @Input()
+    set model(value: LevelIndicatorLevel) {
+        this._model = value;
+        this._modelAsString = "" + value;
+    }
+
+    get model(): LevelIndicatorLevel {
+        return this._model;
+    }
+
+    @HostBinding('class.co-level-indicator')
+    public showClass: boolean = true;
+
+    get modelAsString(): string {
+        return this._modelAsString;
+    }
+
+    private _model: LevelIndicatorLevel;
+
+    // to prevent hard crashes on [ngClass] when this component was given a non-string model @Input
+    private _modelAsString: string;
+
+    constructor() {
+    }
+}

package/projects/corecomponents/src/lib/components/level-indicator/level-indicator.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {LevelIndicatorComponent} from "./level-indicator.component";
+
+@NgModule({
+    imports: [
+        CommonModule
+    ],
+    declarations: [LevelIndicatorComponent],
+    exports: [LevelIndicatorComponent]
+})
+export class LevelIndicatorModule {
+}

package/projects/corecomponents/src/lib/components/list-of-icons/list-of-icons.component.ts

@@ -0,0 +1,68 @@
+import {Component, EventEmitter, HostBinding, Input, OnInit, Output, ViewEncapsulation} from "@angular/core";
+import {CoreComponentsIcon} from "../../core/enum/core-components-icon.enum";
+import {IconCacheService} from "../icon/icon-cache.service";
+import {IconListItem} from "../../model/icon-list-item";
+
+@Component({
+  selector: 'co-list-of-icons',
+  template: `
+    <div class="icon-item active" [class.menu-opened]="showMenu" (click)="toggleMenu()">
+      <co-icon [iconData]="activeItem.icon" [style.width.px]="iconSize" [style.height.px]="iconSize"></co-icon>
+      <co-icon class="drop-arrow" [iconData]="icons.getIcon(Icon.ArrowPointDown)"></co-icon>
+    </div>
+    <div class="dropdown-menu" *ngIf="showMenu" (clickOutside)="showMenu = false">
+      <div class="icon-item" *ngFor="let item of collection" (click)="selectItem(item)" [class.active]="item === activeItem">
+        <co-icon [iconData]="item.icon" [style.width.px]="iconSize" [style.height.px]="iconSize"></co-icon>
+        <div class="label">{{ item.label }}</div>
+      </div>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None,
+})
+export class ListOfIconsComponent implements OnInit {
+  @Input()
+  public set collection(value: IconListItem[]) {
+    this._collection = value || [];
+  }
+
+  public get collection(): IconListItem[] {
+    return this._collection;
+  }
+
+  @Input()
+  public iconSize: number = 25;
+
+  @Input()
+  public activeItem?: IconListItem;
+
+  @Output()
+  public itemSelected: EventEmitter<IconListItem> = new EventEmitter<IconListItem>();
+
+  @HostBinding('class.co-list-of-icons')
+  public showClass() {
+    return true;
+  }
+
+  public readonly Icon: any = CoreComponentsIcon;
+  public showMenu: boolean = false;
+  private _collection: IconListItem[] = [];
+
+  constructor(public icons: IconCacheService) {
+  }
+
+  public ngOnInit(): void {
+    if (this.activeItem === undefined) {
+      this.activeItem = this.collection[0];
+    }
+  }
+
+  public toggleMenu(): void {
+    this.showMenu = !this.showMenu;
+  }
+
+  public selectItem(item: IconListItem): void {
+    this.activeItem = item;
+    this.showMenu = false;
+    this.itemSelected.emit(this.activeItem);
+  }
+}

package/projects/corecomponents/src/lib/components/list-of-icons/list-of-icons.module.ts

@@ -0,0 +1,22 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {FormsModule} from "@angular/forms";
+import {ListOfIconsComponent} from "./list-of-icons.component";
+import {IconModule} from "../icon/icon.module";
+import {ClickoutsideModule} from "../../directives/clickoutside/clickoutside.module";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IconModule,
+    ClickoutsideModule
+  ],
+  declarations: [
+    ListOfIconsComponent
+  ],
+  exports: [
+    ListOfIconsComponent
+  ]
+})
+export class ListOfIconsModule {}

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

@@ -0,0 +1,132 @@
+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/projects/corecomponents/src/lib/components/list-of-values/list-of-values-popup.component.ts

@@ -0,0 +1,291 @@
+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 || viewModels.length === 1"
+          (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.viewModels.length === 1) {
+      this.selectNextOption();
+    }
+
+    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);
+    }
+  }
+}