@kms-ngx-ui/presentational 16.3.0 → 16.3.2

package/src/lib/ui/flyout/flyout.component.html

@@ -0,0 +1,35 @@
+<div class="flyout"
+    [ngClass]="{'is-active': isDropdownOpened}"
+>
+    <div class="flyout-header" (click)="toggleDropdownHeader()" [ngClass]="headerCssClass">
+        <span [innerHtml]="headerTitle | kmsSafeHtml"></span>
+        <span [innerHtml]="headerText | kmsSafeHtml"></span>
+
+        <ng-content select="[header]"></ng-content>
+
+        <div *ngIf="hasButtonForMore" (click)="toggleDropdown()" class="flyout-header-more">
+            <span *ngIf="!isDropdownOpened">
+                {{ moreText }}
+            </span>
+            <span *ngIf="isDropdownOpened">
+                {{ lessText }}
+            </span>
+            <kms-icon [icon]="'chevron-down'"
+                  [iconClass]="{'size-16': true, 'is-rotating180': isDropdownOpened}" >
+            </kms-icon>
+        </div>
+    </div>
+    <div 
+        class="flyout-body"
+        [ngClass]="bodyCssClass"
+        tabindex="0"
+        [@dropdownAnimation]="{value: isDropdownOpened, params: {targetHeight: targetHeight, animationTime: '500'}}"
+        getMaxHeight="inner"
+        (sumOfHeight)="setDropdownListHeight($event)"
+        #flyoutHeader>
+        <div class="inner" #content>
+            <ng-content ></ng-content>
+        </div>
+    </div>
+
+</div>

package/src/lib/ui/flyout/flyout.component.spec.ts.BAK

@@ -0,0 +1,30 @@
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FlyoutComponent } from './flyout.component';
+
+describe('FlyoutComponent', () => {
+    let component: FlyoutComponent;
+    let fixture: ComponentFixture<FlyoutComponent>;
+
+    beforeEach(async(() => {
+        
+        TestBed.configureTestingModule({
+            declarations: [FlyoutComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(FlyoutComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

package/src/lib/ui/flyout/flyout.component.ts

@@ -0,0 +1,95 @@
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+
+import { state, style, trigger } from '@angular/animations';
+import {
+    Component,
+    ElementRef,
+    Input,
+    ViewChild,
+} from '@angular/core';
+
+@Component({
+    
+    selector: 'kms-flyout',
+    templateUrl: './flyout.component.html',
+    styleUrls: ['./flyout.component.scss'],
+    animations: [
+        trigger('dropdownAnimation', [
+            state(
+                'true',
+                style({
+                    height: '{{targetHeight}}',
+                    transition: 'height {{animationTime}}ms ease-in-out',
+                }),
+                {
+                    params: {
+                        targetHeight: '300px',
+                        animationTime: 3000,
+                    },
+                },
+            ),
+            state(
+                'false',
+                style({
+                    height: 0,
+                    transition: 'height {{animationTime}}ms ease-in-out',
+                }),
+                {
+                    params: {
+                        targetHeight: '300px',
+                        opacity: 0,
+                        animationTime: 3000,
+                    },
+                },
+            ),
+        ]),
+    ],
+})
+export class FlyoutComponent {
+
+    @Input() icon = 'filter';
+
+    isDropdownOpened = false;
+    targetHeight = '0';
+    animationTime = 5000;
+
+    @Input() headerCssClass = '';
+    @Input() bodyCssClass = '';
+
+    @Input() headerTitle = '';
+    @Input() headerText  = '';
+    @Input() hasButtonForMore = false;
+    @Input() moreText = '';
+    @Input() lessText = '';
+
+    
+    @ViewChild('content') content: ElementRef | undefined;
+    
+    @ViewChild('flyoutHeader') flyoutHeader: ElementRef | undefined;
+
+    /**
+     * Open/close dropdown if click on header.
+     * Except, if mode is set to hasButtonForMore. When there is a extra button to open/close
+     */
+    toggleDropdownHeader() {
+        if (!this.hasButtonForMore) {
+            this.toggleDropdown();
+        }
+    }
+
+    /**
+     * Open or close the dropdown
+     */
+    toggleDropdown() {
+        this.isDropdownOpened = !this.isDropdownOpened;
+    }
+
+    /**
+     * Set the height of the dropdown list items dynamic - needed for the animation
+     */
+    setDropdownListHeight(contentHeight: number) {
+        this.targetHeight = `${contentHeight}px`;
+    }
+}

package/src/lib/ui/generic-dialog/generic-dialog.component.html

@@ -0,0 +1,24 @@
+<div mat-dialog-title class="mat-dialog-title">
+    <h3>{{ data.title }}</h3>
+</div>
+<div mat-dialog-content class="mat-dialog-content">
+    {{ data.message }}
+</div>
+<div mat-dialog-actions class="custom-dialog-actions">
+    <button
+        mat-flat-button
+        class="test_secondary_button"
+         color="accent"
+        (click)="onClickAction(ButtonResponseType.secondary)"
+    >
+        {{ buttons.secondary }}
+    </button>
+    <button
+        mat-flat-button
+        class="test_primary_button"
+        color="primary"
+        (click)="onClickAction(ButtonResponseType.primary)"
+    >
+        {{ buttons.primary }}
+    </button>
+</div>

package/src/lib/ui/generic-dialog/generic-dialog.component.spec.ts.BAK

@@ -0,0 +1,43 @@
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+
+import { GenericDialogComponent } from './generic-dialog.component';
+
+describe('GenericDialogComponent', () => {
+    let component: GenericDialogComponent;
+    let fixture: ComponentFixture<GenericDialogComponent>;
+
+    beforeEach(async(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [GenericDialogComponent],
+            imports: [
+                MatDialogModule,
+            ],
+            providers: [{
+                provide: MatDialogRef,
+                useValue: {},
+            },
+            { provide: MAT_DIALOG_DATA, useValue: {} },
+            ],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(GenericDialogComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should set buttons', () => {
+        expect(component.buttons).toStrictEqual({ primary: 'Yes', secondary: 'No' });
+    });
+});

package/src/lib/ui/generic-dialog/generic-dialog.component.ts

@@ -0,0 +1,54 @@
+/**
+ * @copyright KMS GmbH
+ */
+
+import { Component, Inject, NgZone } from '@angular/core';
+import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { isValue } from '../../models';
+import { ButtonResponseType } from '../button-with-confirm-dialog/button-response-types.enum';
+import { DialogData, DialogDataButtons } from '../button-with-confirm-dialog/dialog-data.model';
+
+/**
+ * A generic dialog component
+ */
+@Component({
+    selector: 'kms-generic-dialog',
+    templateUrl: './generic-dialog.component.html',
+    styleUrls: ['./generic-dialog.component.scss'],
+})
+export class GenericDialogComponent {
+
+    ButtonResponseType = ButtonResponseType;
+
+    public buttons: DialogDataButtons
+
+    public constructor(
+        public dialogRef: MatDialogRef<GenericDialogComponent>,
+        public zone: NgZone,
+        @Inject(MAT_DIALOG_DATA) public data: DialogData
+    ) {
+        if (isValue(data.buttons)) {
+            this.buttons = data.buttons;
+        } else {
+            this.buttons = { primary: 'Yes', secondary: 'No' } as DialogDataButtons;
+        }
+    }
+
+    /**
+     * Action called when clicked
+     * @param clickedButton Whether the primary or secondary button was clicked
+     */
+    public onClickAction(clickedButton: ButtonResponseType): void {
+        this.zone.run(() => {
+            this.dialogRef.close(clickedButton);
+            this.dialogRef.afterClosed().subscribe(() => {
+                const buttonList = document.querySelectorAll('.mat-flat-button, .mat-button');
+                let i = 0;
+                for (i; i < buttonList.length; i++) {
+                    buttonList[i].classList.remove('cdk-focused');
+                    buttonList[i].classList.remove('cdk-program-focused');
+                }
+            });
+        });
+    }
+}

package/src/lib/ui/icon/icon.component.html

@@ -0,0 +1,22 @@
+<ng-container *ngIf="icon !== 'none' && dontUseSprite === false">
+  <span class="icon {{ iconSize }}" [ngClass]="iconClass" [ngStyle]="iconStyle">
+    <svg>
+      <use
+        [attr.xlink:href]="
+          'assets/sprite.svg?Version=' + Version + '#' + iconToShow
+        "
+      ></use>
+    </svg>
+  </span>
+</ng-container>
+<ng-container *ngIf="icon !== 'none' && dontUseSprite === true">
+  <object
+    [data]="
+      sanitizer.bypassSecurityTrustResourceUrl('assets/icons/' + icon + '')
+    "
+    type="image/svg+xml"
+    class="icon {{ iconSize }}"
+    [ngClass]="iconClass"
+    [ngStyle]="iconStyle"
+  ></object>
+</ng-container>

package/src/lib/ui/icon/icon.component.spec.ts.BAK

@@ -0,0 +1,31 @@
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IconComponent } from './icon.component';
+
+describe('IconComponent', () => {
+    let component: IconComponent;
+    let fixture: ComponentFixture<IconComponent>;
+
+    beforeEach(async(() => {
+        
+        TestBed.configureTestingModule({
+            declarations: [IconComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(IconComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

package/src/lib/ui/icon/icon.component.ts

@@ -0,0 +1,67 @@
+/**
+ * @copyright KMS GmbH
+ */
+
+import { Component, Input, OnInit, VERSION } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+import { IconSize } from './iconSize.enum';
+
+@Component({
+    
+    selector: 'kms-icon',
+    templateUrl: './icon.component.html',
+    styleUrls: ['./icon.component.scss'],
+})
+export class IconComponent implements OnInit {
+
+    /**
+     * Required: Name of the SVG icon inside your sprite sheet file with name 'icons.svg'.
+     * Pass 'none' if no icon should be rendered.
+     */
+    @Input() icon!: string | '';
+
+    /**
+     * Optional: Different appearance via CSS class defined in this component´s style sheet.
+     */
+    @Input() iconClass!: string | '';
+
+    /**
+     * Optional: Different appearance via CSS inline style.
+     */
+    
+    @Input() iconStyle: any;
+
+    /**
+     * Optional: Different size via CSS inline style.
+     */
+    @Input() iconSize: IconSize = IconSize.FULLSIZE;
+
+    /**
+     * Dont use icon sprite
+     */
+    
+    @Input() dontUseSprite = false;
+
+    IconSize = IconSize;
+    Version = VERSION.full;
+
+    public timestamp = 0;
+
+    /**
+     * Renders this icon from SVG sprite sheet
+     */
+    public iconToShow!: string | '';
+
+    constructor(public sanitizer: DomSanitizer) {
+        this.iconToShow = this.icon;
+    }
+
+    ngOnInit() {
+        this.iconToShow = this.icon;
+        const d = new Date();
+        const n = d.getTime();
+        this.timestamp = n;
+    }
+
+}

package/src/lib/ui/icon/iconSize.enum.ts

@@ -0,0 +1,17 @@
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+
+export enum IconSize {
+    FULLSIZE = 'size-full',
+    TINY = 'size-16',
+    SMALLER = 'size-20',
+    SMALL = 'size-32',
+    MEDIUM = 'size-64',
+    LARGE = 'size-128',
+    XL = 'size-256',
+    XXL = 'size-512',
+    XXXL = 'size-1024',
+    NONE = 'NONE',
+}
+

package/src/lib/ui/image-slider/image-slider.component.html

@@ -0,0 +1,54 @@
+<div class="all-wrapper">
+    <!--(swiperight)="previousSlide()" (swipeleft)="nextSlide()"-->
+    <div 
+        class="swiper-bigImage"
+        [style.backgroundImage]="selectedSlideImage"
+        [swipeDirective]="swipeConfig"
+        (moveEvent)="handleMoveEvent($event)"
+        (releaseEvent)="handleReleaseEvent($event)"
+        (mouseup)="lastClicked()"
+        (mouseout)="noLastClicked()" >
+    </div>
+
+    <ng-content select="[description]"></ng-content>
+
+    <div class="swiper-holder">
+        <!--
+        (mouseWheelUp)="scrollLeft($event)"
+        (mouseWheelDown)="scrollRight($event)"
+        -->
+
+        <swiper [config]="config" #usefulSwiper>
+            <div class="swiper-wrapper" 
+                cdkDropList (cdkDropListDropped)="drop($event)" 
+                cdkDropListOrientation="horizontal">                
+                <div class="swiper-slide" 
+                    *ngFor="let slide of slides; let index = index" 
+                    cdkDrag [cdkDragDisabled]="!editMode">
+                    <button mat-menu-item *ngIf="editMode" (click)="deleteImage(index)"> 
+                        <kms-icon icon="trash"></kms-icon>
+                    </button>
+                    <div class="img" (click)="openSlide(index)"
+                        [style.backgroundImage]="sanitizer.bypassSecurityTrustStyle('url(' + slide + ')')"
+                        [ngClass]="{'active': index === selectedSlide}">
+                    </div>
+                    
+                    <div class="default-image">{{"common.defaultImage" | translate}} </div>
+                </div>
+            </div>
+        </swiper>
+
+        <div class="swiper-button-next" *ngIf="slides?.length > 3"></div>
+        <div class="swiper-button-prev" *ngIf="slides?.length > 3"></div>
+
+        <div class="swiper-button-next2" *ngIf="slides?.length > 1" (click)="nextSlide()">
+            <kms-icon icon="chevron-right" [iconClass]="{'color-disabled': selectedSlide == slides?.length - 1, 'color-primary': true}"></kms-icon>
+        </div>
+        <div class="swiper-button-prev2" *ngIf="slides?.length > 1" (click)="previousSlide()">
+            <kms-icon icon="chevron-left" [iconClass]="{'color-disabled': selectedSlide == 0, 'color-primary': true}"></kms-icon>
+        </div>
+
+    </div>
+
+    <ng-content></ng-content>
+</div>

package/src/lib/ui/image-slider/image-slider.component.ts

@@ -0,0 +1,205 @@
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+
+import {
+    Component,
+    EventEmitter,
+    HostListener,
+    Input,
+    OnChanges,
+    OnInit,
+    Output,
+    SimpleChanges,
+    ViewChild,
+} from '@angular/core';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
+
+import { SwiperComponent } from 'ngx-useful-swiper';
+import { SwiperOptions } from 'swiper';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { ImageSnippet } from '../../models/image-snippet.model';
+import { SwipeMoveEvent, SwipeOptions, SwipeReleaseEvent } from '../../directives/swipe.model';
+
+
+@Component({
+    selector: 'kms-image-slider',
+    templateUrl: './image-slider.component.html',
+    styleUrls: ['./image-slider.component.scss'],
+})
+export class ImageSliderComponent implements OnInit, OnChanges {
+    @Input() slides: string[] | undefined;
+    @Input() editMode = false;
+    @Input() imagesTOSave: ImageSnippet[] | undefined;
+    @Output() orderChanged: EventEmitter<ImageSnippet[]> = new EventEmitter();
+    @Output() deleteImageEvent: EventEmitter<number> = new EventEmitter();
+
+    /**
+     * Optional: Define Swipe behaviour configuration.
+     * Default is 10% for the threshold definition until a swipe triggers next/previous slide.
+     */
+    @Input() swipeConfig: SwipeOptions = {
+        swipeThreshold: 5,
+        swipeThresholdType: '%',
+        swipeLocalPosition: true,
+    };
+
+    public selectedSlide = 0;
+    public checkedImageIndex?: number;
+
+    public selectedSlideImage: SafeStyle | undefined;
+    public isLastClickedInSliderImage = false;
+
+    @ViewChild('usefulSwiper') usefulSwiper: SwiperComponent | undefined;
+
+    config: SwiperOptions = {
+        initialSlide: 0,
+        slidesPerView: 3,
+        navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev',
+        },
+        watchOverflow: true,
+        autoHeight: true,
+        allowTouchMove: false,
+        spaceBetween: 30,
+        on: {
+            slideChange: () => {
+                // do something
+            },
+            slideChangeTransitionEnd: () => {
+                // do something
+            },
+        },
+    };
+
+    constructor(public sanitizer: DomSanitizer) {}
+
+    ngOnInit() {
+        if (this.slides) {
+            // TODO use Pipe safeStyle
+
+            this.selectedSlideImage = this.sanitizer.bypassSecurityTrustStyle('url(' + this.slides[0] + ')');
+        }
+    }
+
+    // !TODO
+    @HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
+        if (event.key === 'ArrowRight') {
+            this.nextSlide();
+        }
+        if (event.key === 'ArrowLeft') {
+            this.previousSlide();
+        }
+    }
+
+    /**
+     * Slide follows the finger or mouse according to it´s move delta.
+     * @param event SwipeMoveEvent
+     */
+    handleMoveEvent(event: SwipeMoveEvent) {
+        // certain move threshold needs to be reached
+        if (!event.thresholdWasReached) {
+            return;
+        }
+        this.config.direction = event.direction === 1 ? 'horizontal' : 'vertical';
+    }
+
+    /**
+     * Mouse up or slide container was left.
+     * @param event SwipeReleaseEvent
+     */
+    handleReleaseEvent(event: SwipeReleaseEvent) {
+        if (!event.thresholdWasReached) {
+            return;
+        }
+        // Just do if user clicked to slide on image and not on arrow or other element
+        if (!this.isLastClickedInSliderImage) {
+            return;
+        }
+        if (event.direction === 1) {
+            this.previousSlide();
+        } else {
+            this.nextSlide();
+        }
+    }
+
+    lastClicked() {
+        this.isLastClickedInSliderImage = true;
+    }
+
+    noLastClicked() {
+        this.isLastClickedInSliderImage = false;
+    }
+
+    scrollLeft() {
+        this.previousSlide();
+    }
+
+    scrollRight() {
+        this.nextSlide();
+    }
+
+    nextSlide() {
+        if (this.slides && this.selectedSlide < this.slides.length - 1) {
+            if (this.usefulSwiper) {
+                this.usefulSwiper.swiper.slideNext();
+            }
+            this.openSlide(this.selectedSlide + 1);
+        }
+        this.isLastClickedInSliderImage = false;
+    }
+
+    previousSlide() {
+        if (this.selectedSlide > 0) {
+            if (this.usefulSwiper) {
+                this.usefulSwiper.swiper.slidePrev();
+            }
+            this.openSlide(this.selectedSlide - 1);
+        }
+        this.isLastClickedInSliderImage = false;
+    }
+
+    slideTo(index: number) {
+        if (this.usefulSwiper) {
+            this.usefulSwiper.swiper.slideTo(index);
+        }
+    }
+
+    openSlide(number: number) {
+        if (this.slides && number < this.slides.length && number >= 0) {
+            this.selectedSlide = number;
+            // TODO use Pipe safeStyle
+
+            this.selectedSlideImage = this.sanitizer.bypassSecurityTrustStyle('url(' + this.slides[number] || ')');
+        }
+    }
+
+    ngOnChanges(_changes: SimpleChanges) {
+        if (_changes.slides) {
+            if (this.slides) {
+                // TODO use Pipe safeStyle
+
+                this.selectedSlideImage = this.sanitizer.bypassSecurityTrustStyle('url(' + this.slides[0] + ')');
+            }
+        }
+    }
+
+    /**
+     * Re-order slides and notify parent component
+     */
+    drop(event: CdkDragDrop<string[]>) {
+        if (this.slides && this.imagesTOSave) {
+            moveItemInArray(this.slides, event.previousIndex, event.currentIndex);
+            moveItemInArray(this.imagesTOSave, event.previousIndex, event.currentIndex);
+            this.orderChanged.emit(this.imagesTOSave);
+        }
+    }
+
+    /**
+     * Send image index to parent to perform delete
+     */
+    deleteImage(index: number) {
+        this.deleteImageEvent.emit(index);
+    }
+}