@colijnit/corecomponents_v12 254.1.5 → 254.1.7

package/projects/corecomponents/src/lib/components/checkmark-overlay/checkmark-overlay.component.ts

@@ -1,99 +0,0 @@
-import {
-  Component,
-  ElementRef,
-  HostBinding,
-  Input,
-  QueryList, Renderer2,
-  ViewChildren,
-  ViewEncapsulation
-} from "@angular/core";
-import {animate, state, style, transition, trigger} from "@angular/animations";
-
-
-@Component({
-  selector: "co-checkmark-overlay",
-  template: `
-    <div *ngIf="showOverlay">
-      <div class="checkmark-overlay-wrapper" *ngIf="showWrapper" @showHideSaveCancel>
-        <div class="checkmark-buttons-button save" [class.finished]="!visible">
-          <div class="save-button-spinner">
-            <div #animatediv></div>
-            <div #animatediv></div>
-            <div #animatediv></div>
-            <div #animatediv></div>
-          </div>
-          <div class="spinner-checkmark" *ngIf="!visible && successful"></div>
-        </div>
-      </div>
-    </div>
-  `,
-  animations: [
-    trigger('showHideSaveCancel', [
-      state('*', style({transform: 'scaleY(1)', opacity: 1})),
-      state('void', style({transform: 'scaleY(0)', opacity: 0})),
-      transition('void <=> *', animate(200))
-    ]),
-  ],
-  encapsulation: ViewEncapsulation.None
-})
-export class CheckmarkOverlayComponent {
-  @ViewChildren('animatediv', { read: ElementRef }) set content(children) {
-    this.animateDivs = children.toArray();
-    this._checkAnimation();
-  }
-  public animateDivs: QueryList<ElementRef>;
-
-  @Input()
-  public set visible(value: boolean) {
-    if (value) {
-      this.showOverlay = true;
-      this.showWrapper = true;
-    } else {
-      setTimeout(() => this.showOverlay = false, 800);
-      setTimeout(() => this.showWrapper = false, 600);
-    }
-    this._visible = value;
-    this._checkAnimation();
-    this._checkAnimationFinished();
-  }
-
-  public get visible(): boolean {
-    return this._visible;
-  }
-
-  @Input()
-  public successful: boolean;
-
-  @HostBinding("class.co-checkmark-overlay")
-  public showClass() {
-    return true;
-  }
-
-  public showOverlay: boolean = false;
-  public showWrapper: boolean = false;
-
-  private _visible: boolean = false;
-
-  constructor(
-    private _renderer: Renderer2
-  ) { }
-
-  private _checkAnimation(): void {
-    if (this.visible && this.animateDivs) {
-      this.animateDivs.forEach(a => this._renderer.addClass(a.nativeElement, 'animate'));
-    }
-  }
-
-  private _checkAnimationFinished(): void {
-    if (!this.visible && this.animateDivs) {
-      this.animateDivs.forEach(a => {
-        a.nativeElement.addEventListener('animationiteration', this._handleAnimationIteration);
-      });
-    }
-  }
-
-  private _handleAnimationIteration = (event: AnimationEvent) => {
-    this.animateDivs.forEach(a => this._renderer.removeClass(a.nativeElement, 'animate'));
-    event.currentTarget.removeEventListener('animationiteration', this._handleAnimationIteration);
-  }
-}

package/projects/corecomponents/src/lib/components/checkmark-overlay/checkmark-overlay.module.ts

@@ -1,18 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {CheckmarkOverlayComponent} from "./checkmark-overlay.component";
-
-
-@NgModule({
-  imports: [
-    CommonModule
-  ],
-  declarations: [
-    CheckmarkOverlayComponent
-  ],
-  exports: [
-    CheckmarkOverlayComponent
-  ]
-})
-export class CheckmarkOverlayModule {
-}

package/projects/corecomponents/src/lib/components/checkmark-overlay/style/_layout.scss

@@ -1,118 +0,0 @@
-$checkMarkWidth: calc(0.3 * #{$cc-co-checkmark-overlay-checkmark-size});
-$checkMarkHeight: calc(0.5 * #{$cc-co-checkmark-overlay-checkmark-size});
-$checkMarkThickness: 3px;
-
-$spinnerSize: $cc-co-checkmark-overlay-checkmark-size;
-$spinnerDivSize: calc(#{$cc-co-checkmark-overlay-checkmark-size} - (.2 * #{$cc-co-checkmark-overlay-checkmark-size}));
-$spinnerPadding: calc((#{$spinnerSize} - #{$spinnerDivSize}) / 2);
-
-@include export-module('cc-checkmark-overlay-layout') {
-  .co-checkmark-overlay {
-
-    .checkmark-overlay-wrapper {
-      position: absolute;
-      left: calc(50% - #{$cc-co-checkmark-overlay-checkmark-size} / 2);
-      top: calc(50% - #{$cc-co-checkmark-overlay-checkmark-size} / 2);
-      z-index: 999;
-
-      .checkmark-buttons-button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        height: $cc-co-checkmark-overlay-checkmark-size;
-        width: $cc-co-checkmark-overlay-checkmark-size;
-
-        &.save {
-          .save-button-spinner .animate {
-            animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-          }
-
-          &.finished {
-            //.spinner-checkmark {
-            //  animation-duration: 800ms;
-            //  animation-timing-function: ease;
-            //  animation-name: checkmark;
-            //  //animation-delay: 2.2s;
-            //}
-          }
-
-          .save-button-spinner {
-            display: inline-block;
-            position: relative;
-            width: $spinnerSize;
-            height: $spinnerSize;
-            padding: $spinnerPadding;
-
-            div {
-              position: absolute;
-              display: block;
-              box-sizing: border-box;
-              height: $spinnerDivSize;
-              width: $spinnerDivSize;
-              border-width: 2px;
-              border-style: solid;
-              border-radius: 50%;
-            }
-
-            //border-color: $cc-co-checkmark-buttons-checkmark-color;
-            div:nth-child(1) {
-              animation-delay: -0.45s;
-            }
-
-            div:nth-child(2) {
-              animation-delay: -0.3s;
-            }
-
-            div:nth-child(3) {
-              animation-delay: -0.15s;
-            }
-          }
-
-          .spinner-checkmark {
-            position: absolute;
-            opacity: 1;
-            transform: scaleX(-1) translate(85%, -5%) rotate(135deg);
-            height: $checkMarkHeight;
-            width: $checkMarkWidth;
-            transform-origin: left top;
-            content: '';
-            left: 50%;
-            top: 50%;
-          }
-        }
-      }
-    }
-
-    @keyframes spinner {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-    @keyframes checkmark {
-      0% {
-        height: 0;
-        width: 0;
-        opacity: 1;
-      }
-      20% {
-        height: 0;
-        width: $checkMarkWidth;
-        opacity: 1;
-      }
-      40% {
-        height: $checkMarkHeight;
-        width: $checkMarkWidth;
-        opacity: 1;
-      }
-      100% {
-        height: $checkMarkHeight;
-        width: $checkMarkWidth;
-        opacity: 1;
-      }
-    }
-  }
-}

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

@@ -1,2 +0,0 @@
-$cc-co-checkmark-overlay-checkmark-size: 30px !default;
-$cc-co-checkmark-overlay-checkmark-color: green !default;

package/projects/corecomponents/src/lib/components/checkmark-overlay/style/_theme.scss

@@ -1,20 +0,0 @@
-@include export-module('cc-checkmark-overlay-theme') {
-  .co-checkmark-overlay {
-    .checkmark-buttons-button {
-      &.save {
-        .save-button-spinner .animate {
-          border-color: $cc-co-checkmark-overlay-checkmark-color transparent transparent transparent;
-        }
-        .save-button-spinner {
-          div {
-            border-color: $cc-co-checkmark-overlay-checkmark-color;
-          }
-        }
-        .spinner-checkmark {
-          border-right: $checkMarkThickness solid $cc-co-checkmark-overlay-checkmark-color;
-          border-top: $checkMarkThickness solid $cc-co-checkmark-overlay-checkmark-color;
-        }
-      }
-    }
-  }
-}

package/projects/corecomponents/src/lib/components/checkmark-overlay/style/material.scss

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

package/projects/corecomponents/src/lib/components/co-dialog/animation.ts

@@ -1,2 +0,0 @@
-import {animate, AnimationTriggerMetadata, state, style, transition, trigger} from '@angular/animations';
-

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

@@ -1,130 +0,0 @@
-import {Component, EventEmitter, HostBinding, HostListener, Input, OnInit, Output, TemplateRef, ViewEncapsulation} from '@angular/core';
-import {CoreComponentsIcon} from '../../core/enum/core-components-icon.enum';
-import {animate, animateChild, AnimationTriggerMetadata, query, state, style, transition, trigger} from '@angular/animations';
-
-export const showHideDialog = [
-    window.innerWidth > 700 ?
-        trigger('showHideDialog', [
-            state('*', style({opacity: 1})),
-            state('void', style({opacity: 0})),
-            transition('void <=> *', animate(200))
-        ]) :
-        trigger('showHideDialog', [
-            state('*', style({bottom: 0})),
-            state('void', style({bottom: '-100%'})),
-            transition('void <=> *', animate(200))
-        ])
-]
-
-@Component({
-    selector: 'co-dialog',
-    template: `
-        <div class="co-dialog-overlay" (click)="handleOverlayClick($event)"></div>
-        <div class="co-dialog-placeholder">
-            <div class="co-dialog-wrapper" [ngClass]="customCssClass ? customCssClass : undefined" @showHideDialog cdkDrag>
-                <div *ngIf="!borderless" class="dialog-drag-handle" cdkDragHandle></div>
-                <div class="dialog-header" *ngIf="!borderless">
-                    <div class="dialog-header-caption" *ngIf="headerTemplate">
-                        <ng-container [ngTemplateOutlet]="headerTemplate"></ng-container>
-                    </div>
-                    <div class="dialog-close-button" *ngIf="showCloseIcon" (click)="handleCloseDialog($event)">
-                        <co-icon [icon]="icons.CrossSkinny"></co-icon>
-                    </div>
-                </div>
-                <div class="dialog-content co-small-scrollbar" [ngClass]="customCssClass ? customCssClass : undefined">
-                    <ng-content></ng-content>
-                </div>
-                <div class="dialog-footer" *ngIf="footerTemplate">
-                    <ng-container [ngTemplateOutlet]="footerTemplate"></ng-container>
-                </div>
-            </div>
-        </div>
-    `,
-    animations: [
-        trigger('showHideCoDialog', [
-            transition('void => *', [
-                query('.co-dialog-overlay', style({opacity: 0})),
-                // query('.co-dialog-wrapper', style({bottom: '-100%'})),
-                query('.co-dialog-overlay', animate(200, style({opacity: 1}))),
-                query('@showHideDialog', animateChild())
-
-            ]),
-            transition('* => void', [
-                // query('.co-dialog-wrapper', style({bottom: 0})),
-                query('@showHideDialog', animateChild()),
-                query('.co-dialog-overlay', animate(200, style({opacity: 0})))
-            ]),
-        ]),
-        showHideDialog
-    ],
-    encapsulation: ViewEncapsulation.None
-})
-export class CoDialogComponent implements OnInit {
-    public readonly icons: typeof CoreComponentsIcon = CoreComponentsIcon;
-
-    @Input()
-    public customCssClass: string;
-
-    @Input()
-    public headerTemplate: TemplateRef<any>;
-
-    @Input()
-    public footerTemplate: TemplateRef<any>;
-
-    @Input()
-    public showCloseIcon: boolean = true;
-
-    @Input()
-    public modal: boolean = false;
-
-    @HostBinding('class.borderless')
-    @Input()
-    public borderless: boolean = false;
-
-    @Output()
-    public readonly closeClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
-
-    @HostBinding('class.co-dialog')
-    public showClass(): boolean {
-        return true;
-    }
-
-    @HostListener('window:keydown', ['$event'])
-    public handleKeyDown(event: KeyboardEvent): void {
-        switch (event.code) {
-            case 'Escape':
-                this.handleCloseDialog();
-        }
-    }
-
-    @HostBinding('class.is-touch')
-    public isTouch: boolean = false;
-
-    @HostBinding('class.is-mobile')
-    public mobile: boolean = false;
-
-    public state: string = 'closed';
-
-    @HostBinding('@showHideCoDialog')
-
-    ngOnInit(): void {
-        this._checkDevice();
-    }
-
-    public handleCloseDialog(event?: MouseEvent): void {
-        this.closeClick.emit(event);
-    }
-
-    public handleOverlayClick(event: MouseEvent): void {
-        if (!this.modal) {
-            this.closeClick.emit(event);
-        }
-    }
-
-    private _checkDevice(): void {
-        this.isTouch = ('ontouchstart' in window) ||
-            (navigator.maxTouchPoints > 0) ||
-            (navigator.msMaxTouchPoints > 0);
-        this.mobile = window.innerWidth < 700;
-    }
-}

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

@@ -1,17 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CoDialogComponent} from "./co-dialog.component";
-import {IconModule} from "../icon/icon.module";
-import {CommonModule} from "@angular/common";
-import {DragDropModule} from '@angular/cdk/drag-drop';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        IconModule,
-        DragDropModule
-    ],
-    declarations: [CoDialogComponent],
-    exports: [CoDialogComponent]
-})
-export class CoDialogModule {
-}

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

@@ -1,128 +0,0 @@
-@include export-module('co-dialog-layout') {
-  .co-dialog {
-    font-family: $cc-co-dialog-font-family;
-    font-size: $cc-co-dialog-font-size;
-    .co-dialog-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 800;
-      min-height: 100vh;
-    }
-    .co-dialog-placeholder {
-      position: fixed;
-      z-index: 801;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .co-dialog-wrapper {
-      position: fixed;
-      left: 0;
-      display: flex;
-      flex-direction: column;
-      border-radius: $cc-co-dialog-border-radius;
-      max-width: 100vw;
-      z-index: 801;
-      height: auto;
-      width: 100%;
-      max-height: 80vh;
-      padding: $cc-co-dialog-padding;
-    }
-    &:not(.is-mobile) {
-      .co-dialog-wrapper {
-        position: relative;
-        //top: 50%;
-        //left: 50%;
-        min-width: $cc-co-dialog-min-width;
-        //transform: translate(-50%, -50%);
-        width: 50vw;
-      }
-    }
-    .dialog-drag-handle {
-      display: flex;
-      width: 100%;
-      height: $cc-co-dialog-drag-handle-height;
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-    .dialog-header {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      font-family: $cc-co-dialog-header-font-family;
-      font-size: $cc-co-dialog-header-font-size;
-      padding: $cc-co-dialog-header-padding;
-      .dialog-header-caption {
-        width: 100%;
-        font-weight: $cc-co-dialog-header-font-weight;
-        margin: $cc-co-dialog-header-margin;
-        border-style: $cc-co-dialog-header-border-style;
-        border-width: $cc-co-dialog-header-border-width;
-      }
-      .dialog-close-button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: $cc-co-dialog-header-close-button-size;
-        height: $cc-co-dialog-header-close-button-size;
-        border-radius: 5px;
-        position: absolute;
-        right: $cc-co-dialog-header-close-button-right;
-        top: $cc-co-dialog-header-close-button-top;
-        background: $cc-co-dialog-header-close-button-background-color;
-      }
-    }
-    .dialog-content {
-      font-family: $cc-co-dialog-content-font-family;
-      font-size: $cc-co-dialog-content-font-size;
-      padding: $cc-co-dialog-content-padding;
-      max-height: 80vh;
-      overflow: auto;
-      overscroll-behavior: contain; // prevent body to scroll when scrolled to the end
-    }
-    .dialog-footer {
-      font-family: $cc-co-dialog-footer-font-family;
-      font-size: $cc-co-dialog-footer-font-size;
-      padding: $cc-co-dialog-footer-padding;
-      margin: $cc-co-dialog-footer-margin;
-      border-style: $cc-co-dialog-footer-border-style;
-      border-width: $cc-co-dialog-footer-border-width;
-      co-button ::ng-deep {
-        cursor: pointer;
-        &.ok-click  {
-          co-icon {
-            svg {
-              path {
-                fill: #5FDCB3;
-              }
-            }
-          }
-        }
-        &.cancel-click {
-          co-icon {
-            svg {
-              path {
-                fill: #6b6e8a;
-              }
-            }
-          }
-        }
-      }
-    }
-    .dialog-close-button {
-      cursor: pointer;
-    }
-  }
-  .disable-scroll {
-    pointer-events: none;
-  }
-}

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

@@ -1,39 +0,0 @@
-$cc-co-dialog-font-family: $cc-font-family !default;
-$cc-co-dialog-font-size: $cc-font-size-default !default;
-$cc-co-dialog-padding: 30px !default;
-$cc-co-dialog-drag-handle-height: 30px !default;
-$cc-co-dialog-header-font-family: $cc-font-family !default;
-$cc-co-dialog-header-font-size: $cc-font-size-default !default;
-$cc-co-dialog-header-font-weight: normal !default;
-$cc-co-dialog-header-text-color: $cc-color-dark !default;
-$cc-co-dialog-header-background-color: $cc-color-background !default;
-$cc-co-dialog-header-padding: 0 0 10px 0 !default;
-$cc-co-dialog-header-margin: 0 0 10px 0 !default;
-$cc-co-dialog-header-border-style: solid !default;
-$cc-co-dialog-header-border-color: $cc-color-border !default;
-$cc-co-dialog-header-border-width: 0 0 1px 0 !default;
-$cc-co-dialog-header-close-button-background-color: transparent !default;
-$cc-co-dialog-header-close-button-right: 20px !default;
-$cc-co-dialog-header-close-button-top: 10px !default;
-$cc-co-dialog-header-close-button-size: 30px !default;
-$cc-co-dialog-min-width: 250px !default;
-$cc-co-dialog-background-color: $cc-color-background !default;
-$cc-co-dialog-box-shadow: 0 0 10px #484f6040 !default;
-$cc-co-dialog-border-radius: 5px !default;
-$cc-co-dialog-overlay-background-color: rgba(0, 0, 0, 0.3) !default;
-$cc-co-dialog-overlay-backdrop-filter: blur(2px) !default;
-$cc-co-dialog-content-padding: 0 !default;
-$cc-co-dialog-content-font-family: $cc-font-family !default;
-$cc-co-dialog-content-font-size: $cc-font-size-default !default;
-$cc-co-dialog-content-text-color: $cc-color-dark !default;
-$cc-co-dialog-content-background-color: $cc-color-background !default;
-$cc-co-dialog-footer-padding: 20px 0 0 0 !default;
-$cc-co-dialog-footer-margin: 10px 0 0 0 !default;
-$cc-co-dialog-footer-font-family: $cc-font-family !default;
-$cc-co-dialog-footer-font-size: $cc-font-size-default !default;
-$cc-co-dialog-footer-text-color: $cc-color-dark !default;
-$cc-co-dialog-footer-background-color: $cc-color-background !default;
-$cc-co-dialog-footer-border-style: solid !default;
-$cc-co-dialog-footer-border-color: $cc-color-border-light !default;
-$cc-co-dialog-footer-border-width: 2px 0 0 0 !default;
-

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

@@ -1,31 +0,0 @@
-@include export-module('co-dialog-theme') {
-  .co-dialog {
-    .co-dialog-overlay {
-      background-color: $cc-co-dialog-overlay-background-color;
-      backdrop-filter: $cc-co-dialog-overlay-backdrop-filter;
-    }
-    &:not(.borderless) .co-dialog-wrapper {
-      background-color: $cc-co-dialog-background-color;
-      box-shadow: $cc-co-dialog-box-shadow;
-    }
-    .dialog-header {
-      color: $cc-co-dialog-header-text-color;
-      background-color: $cc-co-dialog-header-background-color;
-      .dialog-header-caption {
-        border-color: $cc-co-dialog-header-border-color;
-      }
-      .dialog-close-button {
-        background: $cc-co-dialog-header-close-button-background-color;
-      }
-    }
-    .dialog-content {
-      color: $cc-co-dialog-content-text-color;
-      background-color: $cc-co-dialog-content-background-color;
-    }
-    .dialog-footer {
-      color: $cc-co-dialog-footer-text-color;
-      background-color: $cc-co-dialog-footer-background-color;
-      border-color: $cc-co-dialog-footer-border-color;
-    }
-  }
-}

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

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

package/projects/corecomponents/src/lib/components/co-dialog-wizard/co-dialog-wizard.component.ts

@@ -1,50 +0,0 @@
-import {Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation} from "@angular/core";
-import {CoreComponentsIcon} from "../../core/enum/core-components-icon.enum";
-import {animate, state, style, transition, trigger} from "@angular/animations";
-
-@Component({
-  selector: 'co-dialog-wizard',
-  template: `
-    <div class="co-dialog-wizard-wrapper" [@showHideDialog]="animation">
-      <div class="dialog-header">
-        <ng-content select="[header]"></ng-content>
-        <div class="dialog-close-button" *ngIf="showCloseIcon" (click)="closeClick.emit($event)">
-          <co-icon [icon]="icons.Cancel"></co-icon>
-        </div>
-      </div>
-
-      <hr class="co-dialog-wizard-divider">
-
-      <div class="dialog-content">
-        <ng-content></ng-content>
-      </div>
-    </div>
-  `,
-  animations: [
-    trigger('showHideDialog', [
-      state('*', style({opacity: 1})),
-      state('void', style({opacity: 0})),
-      transition('void => *', animate('200ms 200ms')),
-      transition('* => void', animate(200))
-    ])
-  ],
-  encapsulation: ViewEncapsulation.None
-})
-export class CoDialogWizardComponent {
-  public readonly icons: typeof CoreComponentsIcon = CoreComponentsIcon;
-
-  @Input()
-  public showCloseIcon: boolean = true;
-
-  @Input()
-  public animation: boolean = true;
-
-  @Output()
-  public readonly closeClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
-
-  @HostBinding("class.co-dialog-wizard")
-  public showClass(): boolean {
-    return true;
-  }
-
-}