@colijnit/corecomponents_v12 254.1.4 → 254.1.5

package/projects/corecomponents/src/lib/components/co-dialog-wizard/style/_layout.scss

@@ -0,0 +1,51 @@
+@include export-module('co-dialog-wizard-layout') {
+  .co-dialog-wizard {
+    font-family: $cc-co-dialog-wizard-font-family;
+    font-size: $cc-co-dialog-wizard-font-size;
+    .co-dialog-wizard-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 800;
+    }
+    .co-dialog-wizard-wrapper {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      min-width: $cc-co-dialog-wizard-min-width;
+      max-width: 100vw;
+      z-index: 801;
+      height: auto;
+      width: auto;
+      border-radius: $cc-co-dialog-wizard-border-radius;
+    }
+    .dialog-header {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      font-family: $cc-co-dialog-wizard-header-font-family;
+      font-size: $cc-co-dialog-wizard-header-font-size;
+      padding: $cc-co-dialog-wizard-header-padding;
+      border-radius: $cc-co-dialog-wizard-header-border-radius;
+      margin: $cc-co-dialog-wizard-header-margin;
+    }
+    .dialog-content {
+      font-family: $cc-co-dialog-wizard-content-font-family;
+      font-size: $cc-co-dialog-wizard-content-font-size;
+      padding: $cc-co-dialog-wizard-content-padding;
+      border-radius: $cc-co-dialog-wizard-content-border-radius;
+    }
+    .dialog-close-button {
+      cursor: pointer;
+    }
+    .co-dialog-wizard-divider {
+      margin: $cc-co-dialog-wizard-header-divider-margin;
+      border: none;
+      border-top: $cc-co-dialog-wizard-header-divider-border-top;
+    }
+  }
+}

package/projects/corecomponents/src/lib/components/co-dialog-wizard/style/_material-definition.scss

@@ -0,0 +1,25 @@
+$cc-co-dialog-wizard-font-family: $cc-font-family !default;
+$cc-co-dialog-wizard-font-size: $cc-font-size-default !default;
+$cc-co-dialog-wizard-header-font-family: $cc-font-family !default;
+$cc-co-dialog-wizard-header-font-size: $cc-font-size-default !default;
+$cc-co-dialog-wizard-header-text-color: $cc-color-dark !default;
+$cc-co-dialog-wizard-header-background-color: $cc-color-light-accent !default;
+$cc-co-dialog-wizard-header-padding: 10px !default;
+$cc-co-dialog-wizard-header-divider-margin: 0 10px 0 10px !default;
+$cc-co-dialog-wizard-header-divider-border-top: 1px solid $cc-color-light-accent !default;
+$cc-co-dialog-wizard-header-border-radius: 20px 20px 0 0 !default;
+$cc-co-dialog-wizard-header-margin: 0 0 0 10px !default;
+$cc-co-dialog-wizard-min-width: 250px !default;
+$cc-co-dialog-wizard-border-radius: 20px !default;
+$cc-co-dialog-wizard-background-color: $cc-color-light !default;
+$cc-co-dialog-wizard-box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5) !default;
+$cc-co-dialog-wizard-overlay-background-color: rgba(0, 0, 0, 0.3) !default;
+$cc-co-dialog-wizard-overlay-backdrop-filter: blur(2px) !default;
+$cc-co-dialog-wizard-content-padding: 10px !default;
+$cc-co-dialog-wizard-content-border-radius: 20px !default;
+$cc-co-dialog-wizard-content-font-family: $cc-font-family !default;
+$cc-co-dialog-wizard-content-font-size: $cc-font-size-default !default;
+$cc-co-dialog-wizard-content-text-color: $cc-color-dark !default;
+$cc-co-dialog-wizard-content-background-color: $cc-color-light !default;
+
+

package/projects/corecomponents/src/lib/components/co-dialog-wizard/style/_theme.scss

@@ -0,0 +1,16 @@
+@include export-module('co-dialog-wizard-theme') {
+  .co-dialog-wizard {
+    .co-dialog-wizard-overlay {
+      background-color: $cc-co-dialog-wizard-overlay-background-color;
+      backdrop-filter: $cc-co-dialog-wizard-overlay-backdrop-filter;
+    }
+    .co-dialog-wizard-wrapper {
+      background-color: $cc-co-dialog-wizard-background-color;
+      box-shadow: $cc-co-dialog-wizard-box-shadow;
+    }
+    .dialog-content {
+      color: $cc-co-dialog-wizard-content-text-color;
+      background-color: $cc-co-dialog-wizard-content-background-color;
+    }
+  }
+}

package/projects/corecomponents/src/lib/components/co-dialog-wizard/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";

package/projects/corecomponents/src/lib/components/collapsible/collapsible.component.ts

@@ -0,0 +1,114 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  HostListener,
+  Input,
+  OnDestroy,
+  Output, TemplateRef,
+  ViewEncapsulation
+} from "@angular/core";
+import { SafeHtml } from "@angular/platform-browser";
+import { animate, state, style, transition, trigger } from "@angular/animations";
+import {InputBoolean} from "../../core/decorator/input-boolean.decorator";
+
+@Component({
+  selector: "co-collapsible",
+  template: `
+    <div class="collapsible-header" [class.end]="expandButtonLast" (click)="changeExpanded()">
+      <div class="collapsible-header-start">
+        <div class="expand-icon-wrapper" [class.expanded]="expanded" *ngIf="!expandButtonLast">
+          <co-icon class="expand-icon" [iconData]="iconData"></co-icon>
+        </div>
+        <div class="collapsible-title" *ngIf="customHeaderContent">
+          <ng-container *ngTemplateOutlet="headerContent"></ng-container>
+        </div>
+        <div *ngIf="!customHeaderContent" class="collapsible-title" [textContent]="headerTitle"></div>
+      </div>
+      <div class="collapsible-header-end">
+        <div class="collapsible-button-wrapper" *ngIf="showButton !== undefined" (click)="$event.stopPropagation()">
+          <button class="collapsible-button" *ngIf="showButton" [textContent]="buttonText"
+                  (click)="onButtonClick()"></button>
+        </div>
+        <div class="expand-icon-wrapper" [class.expanded]="expanded" *ngIf="expandButtonLast">
+          <co-icon class="expand-icon" [iconData]="iconData"></co-icon>
+        </div>
+      </div>
+    </div>
+    <div class="collapsible-content" *ngIf="expanded" @showHideContent>
+      <ng-content></ng-content>
+    </div>
+  `,
+  animations: [
+    trigger('showHideContent', [
+      state('*', style({height: '*'})),
+      state('void', style({height: 0})),
+      transition('void <=> *', animate(200))
+    ]),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
+})
+export class CollapsibleComponent implements OnDestroy {
+  @Input()
+  public headerContent: TemplateRef<any>;
+
+  @Input()
+  @InputBoolean()
+  public customHeaderContent: boolean = false;
+
+  @Input()
+  public headerTitle: string;
+
+  @Input()
+  public buttonText: string;
+
+  @Input()
+  public iconData: SafeHtml | undefined;
+
+  @Input()
+  public expandButtonLast: boolean = false;
+
+  @Input()
+  public showButton: boolean;
+
+  @Input()
+  public expanded: boolean = false;
+
+  @Output()
+  public expandedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  @Output()
+  public buttonClicked: EventEmitter<void> = new EventEmitter<void>();
+
+  @HostBinding("class.co-collapsible")
+  public showClass() {
+    return true;
+  }
+
+  @HostListener("click", ["$event"])
+  public onHostClick(event: MouseEvent): void {
+
+  }
+
+  constructor(private _elementRef: ElementRef) {}
+
+  public ngOnDestroy(): void {
+    this._elementRef = undefined;
+  }
+
+  public focus(): void {
+    this._elementRef.nativeElement.focus();
+  }
+
+  public changeExpanded(): void {
+    this.expanded = !this.expanded;
+    this.expandedChange.next(this.expanded);
+  }
+
+  public onButtonClick(): void {
+    this.buttonClicked.emit();
+  }
+}

package/projects/corecomponents/src/lib/components/collapsible/collapsible.module.ts

@@ -0,0 +1,17 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import { ButtonModule } from "../button/button.module";
+import {IconModule} from "../icon/icon.module";
+import {CollapsibleComponent} from "./collapsible.component";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IconModule,
+    ButtonModule
+  ],
+    declarations: [CollapsibleComponent],
+    exports: [CollapsibleComponent]
+})
+export class CollapsibleModule {
+}

package/projects/corecomponents/src/lib/components/collapsible/style/_layout.scss

@@ -0,0 +1,69 @@
+@include export-module('cc-collapsible-layout') {
+  .co-collapsible {
+    font-family: $cc-collapsible-font-family;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    flex-grow: 0;
+    outline: none;
+    overflow: hidden;
+    font-size: $cc-collapsible-font-size;
+
+    .collapsible-header {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      column-gap: 5px;
+      height: $cc-collapsible-height;
+      align-items: center;
+      cursor: pointer;
+      user-select: none;
+      border-bottom: $cc-collapsible-border-bottom;
+    }
+
+    .collapsible-title {
+      font-weight: $cc-collapsible-title-font-weight;
+    }
+
+    .collapsible-header-start, .collapsible-header-end {
+      display: flex;
+      flex-direction: row;
+    }
+
+    .expand-icon-wrapper {
+      display: flex;
+      transition: .3s ease-in-out;
+      .expand-icon {
+        height: $cc-collapsible-icon-size;
+        width: $cc-collapsible-icon-size;
+      }
+      &.expanded {
+        transform: rotate(180deg);
+      }
+    }
+
+    .collapsible-button-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      padding-left: $cc-collapsible-button-wrapper-padding-left;
+      min-width: $cc-collapsible-button-wrapper-min-width;
+      cursor: default;
+    }
+
+    .collapsible-button {
+      border: $cc-collapsible-button-border;
+      border-radius: $cc-collapsible-button-border-radius;
+      padding: $cc-collapsible-button-padding;
+      cursor: pointer;
+      font-family: $cc-collapsible-font-family;
+      font-size: $cc-collapsible-font-size;
+    }
+
+    .collapsible-content {
+      overflow: hidden;
+      padding: $cc-collapsible-content-padding;
+    }
+  }
+}

package/projects/corecomponents/src/lib/components/collapsible/style/_material-definition.scss

@@ -0,0 +1,17 @@
+$cc-collapsible-font-family: $cc-font-family !default;
+$cc-collapsible-font-size: $cc-font-size-default !default;
+$cc-collapsible-color: $cc-color-action !default;
+$cc-collapsible-text-color: #000000 !default;
+$cc-collapsible-height: 40px !default;
+$cc-collapsible-icon-size: 20px !default;
+$cc-collapsible-border-bottom: 1px solid gray !default;
+$cc-collapsible-button-background-color: white !default;
+$cc-collapsible-button-background-color-hover:  #F7FAFA !default;
+$cc-collapsible-button-padding: 5px 12px !default;
+$cc-collapsible-button-border: 1px solid gray !default;
+$cc-collapsible-button-border-radius: 10px !default;
+$cc-collapsible-button-wrapper-padding-left: 10px !default;
+$cc-collapsible-button-wrapper-min-width: 50px !default;
+$cc-collapsible-icon-margin-right: 15px !default;
+$cc-collapsible-title-font-weight: bold !default;
+$cc-collapsible-content-padding: 10px 0px 0px 10px !default;

package/projects/corecomponents/src/lib/components/collapsible/style/_theme.scss

@@ -0,0 +1,21 @@
+@include export-module('cc-collapsible-theme') {
+  .co-collapsible {
+    color: $cc-collapsible-text-color;
+
+    .collapsible-header {
+      padding: 0 10px;
+    }
+
+    .co-input-text {
+      padding: 0;
+    }
+
+    .collapsible-button {
+      background-color: $cc-collapsible-button-background-color;
+
+      &:hover {
+        background-color: $cc-collapsible-button-background-color-hover;
+      }
+    }
+  }
+}

package/projects/corecomponents/src/lib/components/collapsible/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";

package/projects/corecomponents/src/lib/components/color-picker/color-picker.component.ts

@@ -0,0 +1,40 @@
+import {
+  Component, forwardRef, HostBinding, Input,
+  ViewEncapsulation
+} from "@angular/core";
+import {OverlayService} from "../../service/overlay.service";
+import {
+  SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME
+} from "../../interfaces/screen-config-adapter-component-interface-name";
+import {BaseInputComponent} from "../base/base-input.component";
+
+@Component({
+  selector: "co-color-picker",
+  template: `
+    <div class="dual-calendar-wrapper">
+        <label *ngIf="label.length > 0" for="head" [textContent]="label"></label>
+        <input type="color" id="head" name="head"
+               [ngModel]="model"
+               (ngModelChange)="handleModelChange($event)"/>
+    </div>
+  `,
+  providers: [
+    OverlayService, {
+      provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: forwardRef(() => ColorPickerComponent)
+    }, {
+      provide: BaseInputComponent,
+      useExisting: ColorPickerComponent
+    }],
+  encapsulation: ViewEncapsulation.None
+})
+export class ColorPickerComponent extends BaseInputComponent<any> {
+  @HostBinding('class.co-color-picker')
+  public showClass:boolean = true;
+
+  @Input()
+  public label: string = "";
+
+  public handleModelChange(value: string): void {
+    this.setModel(value);
+  }
+}

package/projects/corecomponents/src/lib/components/color-picker/color-picker.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from "@angular/core";
+import {ColorPickerComponent} from "./color-picker.component";
+import {FormsModule} from "@angular/forms";
+import {CommonModule} from "@angular/common";
+
+@NgModule({
+    imports: [
+        FormsModule,
+        CommonModule
+    ],
+  declarations: [
+    ColorPickerComponent,
+  ],
+  exports: [
+    ColorPickerComponent
+  ]
+})
+export class ColorPickerModule {
+}

package/projects/corecomponents/src/lib/components/color-picker/style/_layout.scss

@@ -0,0 +1,4 @@
+@include export-module('cc-color-picker') {
+  .co-color-picker {
+  }
+}

package/projects/corecomponents/src/lib/components/color-picker/style/_theme.scss

@@ -0,0 +1,4 @@
+@include export-module('cc-color-picker-theme') {
+  .co-color-picker {
+  }
+}

package/projects/corecomponents/src/lib/components/color-picker/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

package/projects/corecomponents/src/lib/components/core-dialog/confirmation-dialog/confirmation-dialog.component.ts

@@ -0,0 +1,86 @@
+import {Component, HostBinding, Input, ViewEncapsulation} from '@angular/core';
+import {IconCacheService} from '../../icon/icon-cache.service';
+import {CoreComponentsIcon} from '../../../core/enum/core-components-icon.enum';
+import {AppPopupType} from '../../../model/enum/app-popup-type.enum';
+import {AppPopupButtonType} from '../../../model/enum/app-button-type.enum';
+import {DialogBaseComponent} from '../../base/dialog-base.component';
+
+@Component({
+  selector: "co-confirmation-dialog",
+  template: `
+    <co-dialog [showCloseIcon]="false" [headerTemplate]="headerTemplate" [footerTemplate]="footerTemplate">
+      <div class="confirmation-dialog-wrapper">
+        <div class="text" [innerHTML]="text"></div>
+        <co-collapsible [headerTitle]="'DETAILS' | coreLocalize" [iconData]="iconCacheService.getIcon(icons.TriangleDown)" *ngIf="details">
+          <div class="dialog-details" [innerHTML]="details"></div>
+        </co-collapsible>
+      </div>
+    </co-dialog>
+    <ng-template #headerTemplate>
+      <div class="co-dialog-header-title" [textContent]="title"></div>
+    </ng-template>
+    <ng-template #footerTemplate>
+      <div class="co-dialog-footer-button-wrapper">
+        <ng-container *ngIf="type === ptype.Confirmation">
+          <co-button class="save-button"
+                     [label]="'YES' | coreLocalize"
+                     (click)="handleYesClick($event)"></co-button>
+          <co-button class="close-button"
+                     [label]="'NO' | coreLocalize"
+                     (click)="handleNoClick($event)"></co-button>
+        </ng-container>
+        <ng-container *ngIf="type === ptype.Information || type === ptype.Error || type === ptype.Warning">
+          <co-button class="save-button"
+                     [iconData]="iconCacheService.getIcon(icons.CheckDuotone)"
+                     (click)="handleYesClick($event)"></co-button>
+        </ng-container>
+      </div>
+      <ng-container *ngIf="showRememberCheckbox">
+        <co-input-checkbox [label]="'REMEMBER_CHOICE' | coreLocalize" [(model)]="rememberChoice"></co-input-checkbox>
+      </ng-container>
+    </ng-template>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class ConfirmationDialogComponent extends DialogBaseComponent {
+  public readonly icons: typeof CoreComponentsIcon = CoreComponentsIcon;
+  public readonly ptype: typeof AppPopupType = AppPopupType;
+
+  @Input()
+  public title: string;
+
+  @Input()
+  public text: string;
+
+  @Input()
+  public details: string;
+
+  @Input()
+  public type: AppPopupType
+
+  @Input()
+  public showRememberCheckbox: boolean = false;
+
+  @HostBinding("class.co-confirmation-dialog")
+  public showClass(): boolean {
+    return true;
+  }
+
+  public rememberChoice: boolean = false;
+
+  constructor(public iconCacheService: IconCacheService) {
+    super();
+  }
+
+  public handleYesClick(event: MouseEvent): void {
+    this.onClose(AppPopupButtonType.Yes, undefined, this.rememberChoice);
+  }
+
+  public handleNoClick(event: MouseEvent): void {
+    this.onClose(AppPopupButtonType.No, undefined, this.rememberChoice);
+  }
+
+  public handleOkClick(event: MouseEvent): void {
+    this.onClose(AppPopupButtonType.Ok, undefined, this.rememberChoice);
+  }
+}

package/projects/corecomponents/src/lib/components/core-dialog/confirmation-dialog/style/_layout.scss

@@ -0,0 +1,30 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-confirmation-dialog-layout') {
+  .co-confirmation-dialog {
+    .confirmation-dialog-wrapper {
+      font-family: $co-confirmation-dialog-font-family;
+      font-size: $co-confirmation-dialog-font-size;
+      display: flex;
+      flex-direction: column;
+      row-gap: 20px;
+    }
+    .title {
+    }
+    .button-wrapper {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      column-gap: 5px;
+    }
+    .dialog-error-wrapper {
+      padding: 10px 0;
+    }
+    .dialog-error-collapseable-label {
+      margin-top: 20px;
+      .dialog-error-collapseable-content {
+        height: 0;
+      }
+    }
+  }
+}

package/projects/corecomponents/src/lib/components/core-dialog/confirmation-dialog/style/_material-definition.scss

@@ -0,0 +1,2 @@
+$co-confirmation-dialog-font-family: $co-font-family !default;
+$co-confirmation-dialog-font-size: $co-font-size !default;

package/projects/corecomponents/src/lib/components/core-dialog/confirmation-dialog/style/_theme.scss

@@ -0,0 +1,6 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-confirmation-dialog-theme') {
+  .co-confirmation-dialog {
+  }
+}

package/projects/corecomponents/src/lib/components/core-dialog/confirmation-dialog/style/material.scss

@@ -0,0 +1,4 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "../../../co-dialog/style/material";

package/projects/corecomponents/src/lib/components/core-dialog/core-dialog.module.ts

@@ -0,0 +1,37 @@
+import {ModuleWithProviders, NgModule} from '@angular/core';
+import {CoreDialogService} from './core-dialog.service';
+import {ConfirmationDialogComponent} from './confirmation-dialog/confirmation-dialog.component';
+import {CoDialogModule} from '../co-dialog/co-dialog.module';
+import {CollapsibleModule} from '../collapsible/collapsible.module';
+import {CoreComponentsTranslationModule} from '../../translation/core-components-translation.module';
+import {ButtonModule} from '../button/button.module';
+import {InputCheckboxModule} from '../input-checkbox/input-checkbox.module';
+import {CommonModule} from '@angular/common';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CoDialogModule,
+    CollapsibleModule,
+    CoreComponentsTranslationModule,
+    ButtonModule,
+    InputCheckboxModule
+  ],
+  declarations: [
+    ConfirmationDialogComponent
+  ],
+  providers: [
+    CoreDialogService
+  ],
+  exports: []
+})
+export class CoreDialogModule {
+  static forRoot(): ModuleWithProviders<CoreDialogModule> {
+    return {
+      ngModule: CoreDialogModule,
+      providers: [
+        CoreDialogService
+      ]
+    };
+  }
+}

package/projects/corecomponents/src/lib/components/core-dialog/core-dialog.service.ts

@@ -0,0 +1,61 @@
+import {ApplicationRef, ComponentFactoryResolver, Injectable, Injector} from '@angular/core';
+import {CoreDynamicComponentService} from './core-dynamic-component.service';
+import {DialogResponseInterface} from '../../interfaces/dialog-response.interface';
+import {AppPopupType} from '../../model/enum/app-popup-type.enum';
+import {ConfirmationDialogComponent} from './confirmation-dialog/confirmation-dialog.component';
+
+@Injectable({
+  providedIn: "root"
+})
+export class CoreDialogService {
+
+  private _componentRefs: any[] = [];
+
+  constructor(
+    private _compFactoryResolver: ComponentFactoryResolver,
+    private appRef: ApplicationRef,
+    private injector: Injector,
+    private dynamicComponentService: CoreDynamicComponentService
+  ) {
+  }
+
+  public async showYesNo(title: string, text: string, showRememberChoice: boolean = false): Promise<DialogResponseInterface> {
+    const data: {} = {
+      title: title,
+      text: text,
+      type: AppPopupType.Confirmation,
+      showRememberCheckbox: showRememberChoice
+    };
+    return this.dynamicComponentService.createComponent(ConfirmationDialogComponent, data);
+  }
+
+  public showError(message: string, details?: string): Promise<any> {
+    const data: any = {
+      title: 'ERROR',
+      text: message,
+      type: AppPopupType.Error
+    };
+    if (details) {
+      data.details = details;
+    }
+    return this.dynamicComponentService.createComponent(ConfirmationDialogComponent, data);
+  }
+
+  public showInformation(message: string): Promise<any> {
+    const data: {} = {
+      title: 'INFORMATION',
+      text: message,
+      type: AppPopupType.Information
+    };
+    return this.dynamicComponentService.createComponent(ConfirmationDialogComponent, data);
+  }
+
+  public showWarning(message: string): Promise<any> {
+    const data: {} = {
+      title: 'WARNING',
+      text: message,
+      type: AppPopupType.Warning
+    };
+    return this.dynamicComponentService.createComponent(ConfirmationDialogComponent, data);
+  }
+}