@colijnit/corecomponents_v12 12.0.13 → 12.0.16

package/src/lib/components/button/button.component.ts

@@ -1,94 +0,0 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    ElementRef,
-    EventEmitter,
-    HostBinding,
-    HostListener,
-    Input,
-    OnDestroy,
-    Output
-} from '@angular/core';
-import {SafeHtml} from "@angular/platform-browser";
-import {EventUtils} from "../../core/utils/event-utils";
-
-@Component({
-    selector: 'co-button',
-    template: `
-        <co-icon *ngIf="!!iconData" [iconData]="iconData" [class]="iconClass"></co-icon>
-        <span *ngIf="!!label" class="label">{{ label }}</span>
-        <div class="rippler" md-ripple [mdRippleDisabled]="disabled"></div>
-    `,
-    styleUrls: [
-        'button.scss'
-    ],
-    host: {
-        tabindex: "0"
-    },
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ButtonComponent implements OnDestroy {
-    @Input()
-    public label: string;
-
-    @Input()
-    public iconData: SafeHtml | undefined;
-
-    // The string containing the class(es) of the icon.
-    @Input()
-    public iconClass: string = 'light';
-
-    @Input()
-    public isToggleButton: boolean;
-
-    @Input()
-    @HostBinding("class.toggled")
-    public isToggled: boolean;
-
-    @Input()
-    @HostBinding("class.co-hidden")
-    public hidden: boolean = false;
-
-    @Input()
-    @HostBinding("class.disabled")
-    public disabled: boolean = false;
-
-    @Output()
-    public readonly onClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
-
-    @Output()
-    public readonly clickedWhileDisabled: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
-
-    @Output()
-    public readonly isToggledChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-    @HostBinding("class.has-icon")
-    public get hasIcon(): boolean {
-        return !!this.iconData;
-    }
-
-    @HostListener("click", ['$event'])
-    public onHostClick(event: MouseEvent): void {
-        if (this.disabled) {
-            this.clickedWhileDisabled.emit(event);
-            EventUtils.KillEvent(event);
-        } else {
-            this.onClick.emit(event);
-            if (this.isToggleButton) {
-                this.isToggled = !this.isToggled;
-                this.isToggledChange.emit(this.isToggled);
-            }
-        }
-    }
-
-    constructor(private _elementRef: ElementRef) {
-    }
-
-    ngOnDestroy(): void {
-        this._elementRef = undefined;
-    }
-
-    public focus(): void {
-        this._elementRef.nativeElement.focus();
-    }
-}

package/src/lib/components/button/button.module.ts

@@ -1,18 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-
-import {IconModule} from "../icon/icon.module";
-import {RippleModule} from "../../directives/ripple/ripple.module";
-import {ButtonComponent} from "./button.component";
-
-@NgModule({
-    imports: [
-        CommonModule,
-        IconModule,
-        RippleModule
-    ],
-    declarations: [ButtonComponent],
-    exports: [ButtonComponent]
-})
-export class ButtonModule {
-}

package/src/lib/components/button/button.scss

@@ -1,111 +0,0 @@
-@import "../../style/variables";
-@import "../../style/input.mixins";
-
-%transparent-button {
-    background-color: transparent;
-    &:not(.disabled).action-hover {
-        &:hover {
-            color: $color-light;
-            background-color: $color-action !important;
-        }
-    }
-}
-
-:host {
-    position: relative;
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    flex-grow: 0;
-    height: 40px;
-    border-radius: 20px;
-    outline: none;
-    color: #FFF;
-    background-color: #2b60a7;
-    z-index: 0; /* to keep ripple effect inside button */
-    overflow: hidden;
-    padding: 0 20px;
-    font-size: 14px;
-}
-
-:host.toggled {
-    background-color: #8faba6;
-}
-
-:host.white.toggled {
-    background-color: #8faba6;
-    border: 1px solid #8faba6;
-    color: white;
-}
-
-:host.white.toggled co-icon ::ng-deep [fill] {
-    fill: #FFF;
-}
-
-:host.smaller {
-    transform: scale(0.8);
-}
-
-:host.small {
-    transform: scale(0.6);
-}
-
-:host.mini {
-    transform: scale(0.4);
-}
-
-:host.has-icon {
-    padding-left: 10px;
-}
-
-:host.circle {
-    padding: 0;
-    width: 40px;
-}
-
-:host.circle > co-icon {
-    position: relative;
-    left: 5px;
-}
-
-:host.disabled {
-    filter: opacity(50%);
-}
-
-:host.white {
-    background-color: rgba(255, 255, 255, 0.85);
-    border: 1px solid $color_border;
-    color: #484F60;
-}
-
-:host.white:hover {
-    background-color: #2b60a7;
-    border: 1px solid #2b60a7;
-    color: #FFF;
-}
-
-:host.white co-icon ::ng-deep [fill] {
-    fill: #22313C;
-}
-
-:host.white:hover co-icon ::ng-deep [fill] {
-    fill: #FFF;
-}
-
-:host.transparent {
-    @extend %transparent-button;
-    &:hover:not(.disabled):not(.no-hover) {
-        ::ng-deep > co-icon {
-            @include icon-fill($color-light);
-        }
-    }
-}
-
-div.rippler {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1;
-}

package/src/lib/components/button-drop-down/button-drop-down.component.scss

@@ -1,19 +0,0 @@
-.e-dropdown-popup {
-  background-color:transparent;
-}
-
-.e-btn.e-active, .e-btn:hover {
-  background-color: transparent;
-}
-
-.e-dropdown-popup ul .e-item:hover {
-  background-color: transparent;
-}
-
-.e-dropdown-popup ul {
-  box-shadow: none;
-}
-
-.e-description::before {
-  content: '\e30d';
-}

package/src/lib/components/button-drop-down/button-drop-down.component.ts

@@ -1,53 +0,0 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {ItemModel} from "@syncfusion/ej2-angular-splitbuttons";
-import {SplitButtonIconPosition} from "@syncfusion/ej2-splitbuttons/src/common/common";
-
-@Component({
-  selector: 'button-drop-down',
-  template: `
-    <button ejs-dropdownbutton
-            [content]="content"
-            [items]="items"
-            [iconCss]="iconCss"
-            [iconPosition]="iconPosition"
-            [cssClass]="cssClass"
-            [ngClass] = "{
-                '.e-dropdown-popup': isTransparent,
-                '.e-btn.e-active, .e-btn:hover': isTransparent
-            }"
-            (select)="select.emit($event)"></button>
-  `,
-  styleUrls: ['./button-drop-down.component.scss']
-})
-export class ButtonDropDownComponent implements OnInit {
-
-  @Input()
-  public content: string;
-
-  @Input()
-  public items: ItemModel[];
-
-  @Input()
-  public iconCss: string
-
-  @Input()
-  public iconPosition: SplitButtonIconPosition = "Left";
-
-  @Input()
-  public cssClass: string;
-
-  @Input()
-  public transparent: boolean = false;
-
-  @Output()
-  public readonly select: EventEmitter<any> = new EventEmitter<any>();
-
-  public get isTransparent(): boolean {
-    return this.transparent;
-  }
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-}

package/src/lib/components/button-drop-down/button-drop-down.module.ts

@@ -1,17 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {ButtonDropDownComponent} from "./button-drop-down.component";
-import {DropDownButtonModule} from "@syncfusion/ej2-angular-splitbuttons";
-
-@NgModule({
-  declarations: [
-    ButtonDropDownComponent],
-  imports: [
-    CommonModule,
-    DropDownButtonModule
-  ],
-  exports: [
-    ButtonDropDownComponent
-  ]
-})
-export class ButtonDropDownModule { }

package/src/lib/components/card/card.component.ts

@@ -1,92 +0,0 @@
-import {
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    EventEmitter,
-    HostBinding,
-    HostListener,
-    Input,
-    Output
-} from '@angular/core';
-
-import {IconCacheService} from "../icon/icon-cache.service";
-import {CoreComponentsIcon} from "../../core/enum/core-components-icon.enum";
-import {LevelIndicatorLevel} from "../level-indicator/level-indicator-level.enum";
-
-@Component({
-    selector: "co-card",
-    template: `
-        <div class="co-card-wrapper">
-            <div class="content-wrapper">
-                <co-icon *ngIf="isSelected" [iconData]="icons.getIcon(Icons.Check)" class="check light circle"></co-icon>
-                <co-button *ngIf="hasMagnifierButton" [iconData]="icons.getIcon(Icons.MagnifierPlus)" class="magnify white small circle"
-                           [stopClick]="true" (click)="magnifierButtonClick.emit($event)"></co-button>
-                <div class="image">
-                    <co-image [source]="imageData"></co-image>
-                    <ng-content select="[over-image]"></ng-content>
-                </div>
-                <co-level-indicator class="co-level-indicator" *ngIf="!!level" [model]="level"></co-level-indicator>
-                <co-button *ngIf="hasInfoButton" [iconData]="icons.getIcon(Icons.Information)" class="info white small circle"
-                           [class.small]="!isSmallModus" [stopClick]="true" [class.mini]="isSmallModus"
-                           (click)="infoButtonClick.emit($event)"></co-button>
-            </div>
-            <div class="description-wrapper">
-                <span *ngIf="!!description" class="description" [innerText]="description"></span>
-                <span *ngIf="!!price" class="price" [innerText]="price | priceDisplay"></span>
-                <ng-content></ng-content>
-            </div>
-        </div>
-    `,
-    styleUrls: [
-        "card.scss"
-    ],
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class CardComponent {
-    @Input()
-    public imageData: string;
-
-    @Input()
-    public description: string;
-
-    @Input()
-    public price: number | string;
-
-    @Input()
-    public level: LevelIndicatorLevel;
-
-    @Input()
-    public isSelected: boolean = false;
-
-    @Input() @HostBinding("class.small-modus")
-    public isSmallModus: boolean = false;
-
-    @Input()
-    public hasMagnifierButton: boolean = false;
-
-    @Input()
-    public hasInfoButton: boolean = false;
-
-    // does not emit when you click one of the predefined buttons, but emits on a click on any of our other content
-    @Output()
-    public readonly contentClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
-
-    @Output()
-    public readonly infoButtonClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
-
-    @Output()
-    public readonly magnifierButtonClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
-
-    public readonly Icons: any = CoreComponentsIcon;
-
-    public heightCard: number = 150;
-
-    @HostListener("click", ["$event"])
-    public onHostClick(event: MouseEvent): void {
-        this.contentClick.emit(event);
-    }
-
-    constructor(public icons: IconCacheService, private _changeDetector: ChangeDetectorRef) {
-    }
-
-}

package/src/lib/components/card/card.module.ts

@@ -1,34 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {HttpClientModule} from "@angular/common/http";
-
-import {CardComponent} from "./card.component";
-import {IconModule} from "../icon/icon.module";
-import {ButtonModule} from "../button/button.module";
-import {ImageModule} from "../image/image.module";
-import {StopClickModule} from "../../directives/stopclick/stop-click.module";
-import {LevelIndicatorModule} from "../level-indicator/level-indicator.module";
-import {PriceDisplayPipeModule} from "../../pipes/price-display-pipe.module";
-import { TileModule } from '../tile/tile.module';
-import { IconCacheService } from '../icon/icon-cache.service';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        HttpClientModule,
-        IconModule,
-        ButtonModule,
-        ImageModule,
-        StopClickModule,
-        LevelIndicatorModule,
-        PriceDisplayPipeModule,
-        TileModule
-    ],
-    declarations: [CardComponent],
-    providers: [
-        IconCacheService
-    ],
-    exports: [CardComponent]
-})
-export class CardModule {
-}

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

@@ -1,88 +0,0 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild,
-  ViewEncapsulation
-} from '@angular/core';
-import {DialogComponent,
-        PositionDataModel} from "@syncfusion/ej2-angular-popups";
-import { EmitType } from '@syncfusion/ej2-base';
-
-@Component({
-  selector: 'co-dialog',
-  template: `
-      <ejs-dialog #template 
-                  [showCloseIcon]='showCloseIcon'
-                  [target]='targetElement' 
-                  [width]='width'
-                  [position]="position"
-                  [isModal]="modal"
-                  [visible]="visible"
-                  (overlayClick)="onOverlayClick()"
-                  (close)="onCloseClick()"
-      >
-        <ng-template #footerTemplate>
-          <ng-content select="[footer]"></ng-content>
-        </ng-template>
-        <ng-template #content>
-          <ng-content></ng-content>
-        </ng-template>
-        <ng-template #header>
-          <ng-content select="[header]"></ng-content>
-        </ng-template>
-      </ejs-dialog>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  styleUrls: ['./co-dialog.component.scss']
-})
-export class CoDialogComponent {
-  @ViewChild('template')
-  public coDialog: DialogComponent;
-
-  @Input()
-  public targetElement: HTMLElement = null;
-
-  @Input()
-  public showCloseIcon: boolean = true;
-
-  @Input()
-  public width: string = "50%";
-
-  @Input()
-  public visible: boolean = false;
-
-  @Input()
-  public position: PositionDataModel = {X: 'center', Y: 'center'};
-
-  @Input()
-  public modal: boolean = true;
-
-  @Output()
-  public readonly closeClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
-
-  @Output()
-  public readonly overlayClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
-
-  constructor() {}
-
-  public open(): void {
-    this.coDialog.show();
-  }
-
-  public close(): void {
-    this.coDialog.hide();
-  }
-
-  public onOverlayClick: EmitType<object> = () => {
-    this.coDialog.hide();
-    this.overlayClick.emit();
-  }
-
-  public onCloseClick: EmitType<object> = () => {
-    this.coDialog.hide();
-    this.closeClick.emit();
-  }
-
-}

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

@@ -1,15 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CoDialogComponent} from "./co-dialog.component";
-import {DialogModule} from "@syncfusion/ej2-angular-popups";
-
-@NgModule({
-    imports: [
-        DialogModule
-    ],
-    declarations: [CoDialogComponent],
-    providers: [
-    ],
-    exports: [CoDialogComponent]
-})
-export class CoDialogModule {
-}

package/src/lib/components/co-dialog-prompt/co-dialog-prompt.component.ts

@@ -1,70 +0,0 @@
-import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
-import {DialogComponent} from "@syncfusion/ej2-angular-popups";
-import { EmitType } from '@syncfusion/ej2-base';
-
-@Component({
-  selector: 'co-dialog-prompt',
-  template: `
-    <div #coDialogPromptRootContainer class='co-dialog-prompt-root-container'></div>
-    <ejs-dialog #coDialogPrompt 
-                [buttons]="buttons" 
-                [header]="header"
-                [content]="content" 
-                [showCloseIcon]="showCloseIcon" 
-                [target]="target"
-                [visible]="visible"
-                [width]="width"
-                (close)="onCloseClick()"
-    >
-    </ejs-dialog>
-  `,
-  styleUrls: ['./co-dialog-prompt.component.scss']
-})
-export class CoDialogPromptComponent {
-  @ViewChild('coDialogPrompt')
-  public coDialogPrompt: DialogComponent;
-
-  @Input()
-  public header: string = "header";
-
-  @Input()
-  public content: string = "content";
-
-  @Input()
-  public visible: boolean = false;
-
-  @Input()
-  public width: string = "50%";
-
-  @Input()
-  public showCloseIcon: boolean = true;
-
-  @Output()
-  public readonly closeClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
-
-  public target: string = '.co-dialog-prompt-root-container';
-  public buttons: Object[] = [
-      { click: this.buttonClick.bind(this), buttonModel: { content: 'Ja', isPrimary: 'true' } },
-      { click: this.buttonClick.bind(this), buttonModel: { content: 'Nee' } }
-    ];
-
-  constructor() {}
-
-  public open(): void {
-    this.coDialogPrompt.show();
-  }
-
-  public close(): void {
-    this.coDialogPrompt.hide();
-  }
-
-  public buttonClick(): void {
-    this.close();
-  }
-
-  public onCloseClick: EmitType<object> = () => {
-    this.close();
-    this.closeClick.emit();
-  }
-
-}

package/src/lib/components/co-dialog-prompt/co-dialog-prompt.module.ts

@@ -1,15 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CoDialogPromptComponent} from "./co-dialog-prompt.component";
-import {DialogModule} from "@syncfusion/ej2-angular-popups";
-
-@NgModule({
-    imports: [
-        DialogModule
-    ],
-    declarations: [CoDialogPromptComponent],
-    providers: [
-    ],
-    exports: [CoDialogPromptComponent]
-})
-export class CoDialogPromptModule {
-}