@kms-ngx-ui/presentational 16.3.0 → 16.3.2

package/jest.config.js

@@ -0,0 +1,27 @@
+module.exports = {
+  displayName: "kms-ngx-ui-presentational",
+  preset: "../../jest.preset.js",
+  setupFilesAfterEnv: ["<rootDir>/src/test-setup.ts"],
+  globals: {
+    "ts-jest": {
+      tsconfig: "<rootDir>/tsconfig.spec.json",
+      stringifyContentPathRegex: "\\.(html|svg)$",
+    },
+  },
+  coverageDirectory: "../../coverage/libs/kms-ngx-ui-presentational",
+  transform: { "^.+.(ts|mjs|js|html)$": "jest-preset-angular" },
+  // transformIgnorePatterns: ["node_modules/(?!.*.mjs$)"],
+  // resolver: "@nrwl/jest/plugins/resolver",
+  testEnvironment: "jsdom",
+  reporters: [
+    "default",
+    ["jest-junit", { outputName: "kms-ngx-ui-presentational-test-report.xml" }],
+  ],
+  coverageReporters: ["lcovonly"],
+  collectCoverageFrom: ["src/**/*.{ts,html}"],
+  snapshotSerializers: [
+    "jest-preset-angular/build/serializers/no-ng-attributes",
+    "jest-preset-angular/build/serializers/ng-snapshot",
+    "jest-preset-angular/build/serializers/html-comment",
+  ],
+};

package/ng-package.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/@kms-ngx-ui/presentational",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": [
+    "./src/styles/*.*",
+    "./assets/**/styles.css",
+    "./src/lib/**/*.scss"
+    ],
+    "allowedNonPeerDependencies": ["."]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kms-ngx-ui/presentational",
-  "version": "16.3.0",
+  "version": "16.3.2",
   "peerDependencies": {
     "@angular/cdk": "16.2.12",
     "@angular/common": "16.2.12",
@@ -14,19 +14,5 @@
   "dependencies": {
     "ngx-translate": "0.0.1-security",
     "tslib": "^2.4.1"
-  },
-  "module": "fesm2022/kms-ngx-ui-presentational.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/kms-ngx-ui-presentational.mjs",
-      "esm": "./esm2022/kms-ngx-ui-presentational.mjs",
-      "default": "./fesm2022/kms-ngx-ui-presentational.mjs"
-    }
-  },
-  "sideEffects": false
-}
+  }
+}

package/src/lib/directives/directives.module.ts

@@ -0,0 +1,28 @@
+/**
+ * @copyright KMS GmbH
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { MouseWheelDirective } from './mousewheel.directive';
+import { GetMaxHeightDirective } from './sum-of-height.directive';
+import { SwipeDirective } from './swipe.directive';
+import { TooltipDirective } from './tooltip.directive';
+
+@NgModule({
+  declarations: [
+    SwipeDirective,
+    MouseWheelDirective,
+    GetMaxHeightDirective,
+    TooltipDirective,
+  ],
+  imports: [CommonModule],
+  exports: [
+    SwipeDirective,
+    MouseWheelDirective,
+    GetMaxHeightDirective,
+    TooltipDirective,
+  ],
+})
+export class DirectivesModule {}

package/src/lib/directives/mousewheel.directive.ts

@@ -0,0 +1,43 @@
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+
+import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
+
+@Directive({ selector: '[mouseWheel]' })
+export class MouseWheelDirective {
+    @Output() mouseWheelUp = new EventEmitter();
+    @Output() mouseWheelDown = new EventEmitter();
+
+    
+    @HostListener('mousewheel', ['$event']) onMouseWheelChrome(event: any) {
+        this.mouseWheelFunc(event);
+    }
+
+    
+    @HostListener('DOMMouseScroll', ['$event']) onMouseWheelFirefox(event: any) {
+        this.mouseWheelFunc(event);
+    }
+
+        @HostListener('onmousewheel', ['$event']) onMouseWheelIE(event: any) {
+        this.mouseWheelFunc(event);
+    }
+
+    
+    mouseWheelFunc(event: any) {
+        event = window.event || event; // old IE support
+        
+        const delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
+        if (delta > 0) {
+            this.mouseWheelUp.emit(event);
+        } else if (delta < 0) {
+            this.mouseWheelDown.emit(event);
+        }
+        // for IE
+        event.returnValue = false;
+        // for Chrome and Firefox
+        if (event.preventDefault) {
+            event.preventDefault();
+        }
+    }
+}

package/src/lib/directives/sum-of-height.directive.ts

@@ -0,0 +1,73 @@
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+
+// ng
+import { AfterContentChecked, Directive, ElementRef, EventEmitter, Input, Output } from '@angular/core';
+
+/**
+ * Directive to calc the height of all inner elements
+ */
+@Directive({
+    
+    selector: '[getMaxHeight]',
+})
+export class GetMaxHeightDirective implements AfterContentChecked {
+    /**
+     * CSS class name of the child items (markup elements) that should be checked for their height.
+     * This is mandatory.
+     */
+    @Input('getMaxHeight') cssClassName = '';
+
+    /**
+     * Event that will pass the height of the tallest child inside the container.
+     * Useful to calculate the target height of containers with different content (like accordion) for animations.
+     */
+    @Output() public maxHeightChanged: EventEmitter<number> = new EventEmitter();
+
+    /**
+     * Event that will pass the complete sum of all height values from each child.
+     * Useful to calculate the full target height of a container (like dropdown) for animations.
+     */
+    @Output() public sumOfHeight: EventEmitter<number> = new EventEmitter();
+
+    constructor(private el: ElementRef) {}
+
+    ngAfterContentChecked(): void {
+        this.checkHeightOfChildren(this.el.nativeElement, this.cssClassName);
+    }
+
+    private checkHeightOfChildren(parent: HTMLElement, cssClassName: string) {
+        if (!parent) {
+            return;
+        }
+
+        // find all the child elements with the selected class name
+        const children = parent.getElementsByClassName(cssClassName);
+
+        // failsafe
+        if (!children) {
+            return;
+        }
+
+        // get all the child elements heights
+        const itemHeights = Array.from(children).map((x) => x.getBoundingClientRect().height);
+
+        // failsafe
+        if (itemHeights.length === 0) {
+            return;
+        }
+
+        // find out the tallest element
+        const maxHeight = itemHeights.reduce((prev, curr) => {
+            return curr > prev ? curr : prev;
+        }, 0);
+
+        // get sum of heights
+        const sumOfHeight = itemHeights.reduce((pv, cv) => pv + cv, 0);
+
+        // inform
+        this.maxHeightChanged.emit(maxHeight);
+        this.sumOfHeight.emit(sumOfHeight);
+    }
+}

package/src/lib/directives/swipe.directive.ts

@@ -0,0 +1,193 @@
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+
+import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
+
+import { SwipeMoveEvent, SwipeOptions, SwipeReleaseEvent } from './swipe.model';
+
+@Directive({
+    selector: '[swipeDirective]',
+})
+export class SwipeDirective {
+    /**
+     * Output Event that is emitted during swipe process (mouse move or touch move event).
+     * Can be used for calculation purposes.
+     */
+    @Output() public moveEvent = new EventEmitter<SwipeMoveEvent>();
+
+    /**
+     * Output Event that is emitted when swipe process end (mouse up or touch end event).
+     * Can be used for calculation purposes.
+     */
+    @Output() public releaseEvent = new EventEmitter<SwipeReleaseEvent>();
+
+    private _swipeOptions: SwipeOptions | undefined;
+
+    private _moveEventData: SwipeMoveEvent | undefined;
+    private _startPosition = -1;
+
+    private _lastPosX = 0;
+
+    private _thresholdWasReached = false;
+
+    private _isMobile: boolean | undefined;
+
+    private _timeStart = 0;
+
+    /**
+     * Needed config that defines swipe behaviour.
+     * @param options SwipeOptions
+     */
+    @Input('swipeDirective')
+    set config(options: SwipeOptions) {
+        if (options) {
+            this._swipeOptions = options;
+        }
+    }
+
+    @HostListener('mousedown', ['$event'])
+    @HostListener('touchstart', ['$event'])
+    onMouseDown(event: any) {
+        this.calculateStartPosition(event);
+    }
+
+    @HostListener('mousemove', ['$event'])
+    @HostListener('touchmove', ['$event'])
+    onMove(event: any) {
+        this.move(event);
+    }
+
+    @HostListener('mouseup', ['$event'])
+    @HostListener('mouseleave', ['$event'])
+    @HostListener('touchend', ['$event'])
+    onRelease(event: any) {
+        this.release(event);
+        this.reset();
+    }
+
+    // ** PRIVATE ** //
+
+    /**
+     * Function checks if the current moving delta is inside the defined threshold.
+     * Sets the flag to true if the threshold was reached once.
+     */
+    private checkThreshold(moveEvent: SwipeMoveEvent) {
+        const percentage = this._swipeOptions && this._swipeOptions.swipeThresholdType === '%';
+
+        if (!percentage && this._swipeOptions && moveEvent.swipeDistanceTotal < this._swipeOptions.swipeThreshold) {
+            return;
+        } else if (
+            percentage &&
+            this._swipeOptions &&
+            moveEvent.swipeDistancePercentage < this._swipeOptions.swipeThreshold / 100
+        ) {
+            return;
+        } else {
+            this._thresholdWasReached = true;
+        }
+    }
+
+    private calculateStartPosition(event?: any) {
+        // detect if touch or click
+        this._isMobile = event.type === 'touchstart';
+
+        // save start position
+
+        if (this._swipeOptions && this._swipeOptions.swipeLocalPosition) {
+            if (this._isMobile) {
+                const touch: Touch = event.touches[0];
+                this._startPosition = this._swipeOptions.swipeLocalPosition ? touch.clientX : touch.pageX;
+            } else {
+                this._startPosition = this._swipeOptions.swipeLocalPosition ? event.offsetX : event.pageX;
+            }
+        }
+
+        this._lastPosX = this._startPosition;
+        this._timeStart = event.timeStamp;
+        this._thresholdWasReached = false;
+    }
+
+    private move(event: any) {
+        // failsafe
+        if (typeof event === 'undefined') {
+            return;
+        }
+
+        let posX = 0;
+
+        if (this._swipeOptions) {
+            if (this._isMobile && event.type === 'touchmove') {
+                const touch: Touch = event.touches[0];
+                posX = this._swipeOptions.swipeLocalPosition ? touch.clientX : touch.pageX;
+            } else {
+                posX = this._swipeOptions.swipeLocalPosition ? event.offsetX : event.pageX;
+            }
+        }
+
+        const offsetPerFrame: number = posX - this._lastPosX;
+        const swipeDistanceTotal: number = Math.abs(posX - this._startPosition);
+        const swipeDistancePercentage: number = Math.abs(swipeDistanceTotal / event.target.clientWidth);
+        const timeDuration: number = Math.abs(event.timeStamp - this._timeStart);
+
+        let direction: number;
+        let speed: number = 1 - swipeDistanceTotal / timeDuration;
+        speed = Math.max(0.1, speed);
+
+        if (posX - this._startPosition > 0) {
+            direction = 1; // a.k.a LTR
+        } else {
+            direction = -1; // a.k.a RTL
+        }
+
+        this._moveEventData = {
+            position: posX,
+            offsetPerFrame: offsetPerFrame,
+            swipeDistanceTotal: swipeDistanceTotal,
+            swipeDistancePercentage: swipeDistancePercentage,
+            direction: direction,
+            speed: speed,
+            thresholdWasReached: this._thresholdWasReached,
+        };
+
+        this.checkThreshold(this._moveEventData);
+
+        // update move delta
+        this._lastPosX = posX;
+
+        // inform
+        this.moveEvent.emit(this._moveEventData);
+    }
+
+    private release(event: any) {
+        // case: just a click/touch
+
+        if (!this._moveEventData) {
+            return;
+        }
+
+        const releaseEventData: SwipeReleaseEvent = {
+            thresholdWasReached: this._thresholdWasReached,
+            direction: this._moveEventData.direction,
+            speed: this._moveEventData.speed,
+            easingType: this.getEasingCurve(this._moveEventData.speed),
+            target: event.currentTarget,
+        };
+
+        // inform
+        this.releaseEvent.emit(releaseEventData);
+    }
+
+    private getEasingCurve(speed: number): string {
+        return speed > 0.5 ? 'ease-in' : 'ease-out';
+    }
+
+    private reset() {
+        this._startPosition = -1;
+        this._thresholdWasReached = false;
+
+        if (this._moveEventData) {
+            this._moveEventData = undefined;
+        }
+    }
+}

package/{lib/directives/swipe.model.d.ts → src/lib/directives/swipe.model.ts}

@@ -1,6 +1,7 @@
 /*!
  * @copyright FLYACTS GmbH 2019
  */
+
 /**
  * Input behaviour options
  */
@@ -10,6 +11,7 @@ export interface SwipeOptions {
      * Example: 500px or 10% (depends on swipeThresholdType)
      */
     swipeThreshold: number;
+
     /**
      * Allowed values: '%' or 'px'
      * Defines together with the value of swipeThreshold the way how the threshold is calculated:
@@ -19,12 +21,14 @@ export interface SwipeOptions {
      * for instance skip to next slide.
      */
     swipeThresholdType: string;
+
     /**
      * note: Defines if the local position of the element should be used for calculation or the global.
      * For a slider the global is needed.
      */
     swipeLocalPosition: boolean;
 }
+
 /**
  * Swipe move event information
  */
@@ -37,6 +41,7 @@ export interface SwipeMoveEvent {
     speed: number;
     thresholdWasReached: boolean;
 }
+
 /**
  * Swipe release event information
  */
@@ -45,5 +50,6 @@ export interface SwipeReleaseEvent {
     direction: number;
     speed: number;
     easingType: string;
+    
     target: any;
 }

package/src/lib/directives/tooltip.directive.spec.ts.BAK

@@ -0,0 +1,8 @@
+import { describe, it } from '@jest/globals';
+
+describe('Directive: Tooltip', () => {
+    it('should create an instance', () => {
+        // const directive = new TooltipDirective();
+        // expect(directive).toBeTruthy();
+    });
+});

package/src/lib/directives/tooltip.directive.ts

@@ -0,0 +1,121 @@
+import { Directive, Input, ElementRef, HostListener, Renderer2 } from '@angular/core';
+
+@Directive({
+    selector: '[kmsTooltip]'
+})
+export class TooltipDirective {
+    @Input('tooltipTitle') tooltipTitle = "";
+    @Input('tooltipText') tooltipText = "";
+    @Input('tooltipLinkText') tooltipLinkText = "";
+    @Input('tooltipLinkUrl') tooltipLinkUrl = "";
+    @Input('tooltipPlacement') tooltipPlacement = "bottom";
+    @Input('tooltipDelay') tooltipDelay = 1000;
+    @Input('tooltipPlaceIntoHost') tooltipPlaceIntoHost = false;
+    @Input('tooltipOnlyonclick') tooltipOnlyonclick = false;
+
+    tooltipElem?: HTMLElement | undefined;
+    tooltipLinkElem?: HTMLElement | undefined;
+    tooltipTitleElem?: HTMLElement | undefined;
+    tooltipTextElem?: HTMLElement | undefined;
+    offset = 0;
+
+    constructor(private el: ElementRef, private renderer: Renderer2) {
+
+    }
+
+    @HostListener('mouseenter') onMouseEnter() {
+        if (!this.tooltipOnlyonclick) { this.show(); }
+    }
+
+    @HostListener('click') onClick() {
+        if (this.tooltipOnlyonclick) { this.show(); }
+    }
+
+    @HostListener('mouseleave') onMouseLeave() {
+        if (this.tooltipElem) { this.hide(); }
+    }
+
+    show() {
+        if (!this.tooltipElem){
+            this.create();
+            this.setPosition();
+        }
+        this.renderer.addClass(this.tooltipElem, 'tooltip-show');
+    }
+
+    hide() {
+        this.renderer.removeClass(this.tooltipElem, 'tooltip-show');
+        window.setTimeout(() => {
+        }, this.tooltipDelay);
+    }
+
+    create() {
+        this.tooltipElem = this.renderer.createElement('kms-tooltip-element');
+
+        this.tooltipTitleElem = this.renderer.createElement('b');
+        this.renderer.appendChild(this.tooltipTitleElem, this.renderer.createText(this.tooltipTitle));
+        this.renderer.appendChild(this.tooltipElem, this.tooltipTitleElem);
+        
+        this.tooltipTextElem = this.renderer.createElement('div');
+        this.renderer.appendChild(this.tooltipTextElem, this.renderer.createText(this.tooltipText));
+        this.renderer.appendChild(this.tooltipElem, this.tooltipTextElem);
+        
+        this.tooltipLinkElem = this.renderer.createElement('a');
+        this.renderer.setAttribute(this.tooltipLinkElem, 'href', this.tooltipLinkUrl);
+        this.renderer.appendChild(this.tooltipLinkElem, this.renderer.createText(this.tooltipLinkText));
+        this.renderer.appendChild(this.tooltipElem, this.tooltipLinkElem);
+
+        if(this.tooltipPlaceIntoHost){
+            this.renderer.appendChild(this.el.nativeElement, this.tooltipElem);
+        }else{
+            this.renderer.appendChild(document.body, this.tooltipElem);
+        }
+
+        this.renderer.addClass(this.tooltipElem, 'tooltip');
+        this.renderer.addClass(this.tooltipElem, `tooltip-${this.tooltipPlacement}`);
+        this.renderer.setStyle(this.tooltipElem, '-webkit-transition', `opacity ${this.tooltipDelay}ms`);
+        this.renderer.setStyle(this.tooltipElem, '-moz-transition', `opacity ${this.tooltipDelay}ms`);
+        this.renderer.setStyle(this.tooltipElem, '-o-transition', `opacity ${this.tooltipDelay}ms`);
+        this.renderer.setStyle(this.tooltipElem, 'transition', `opacity ${this.tooltipDelay}ms`);
+    }
+
+    setPosition() {
+        if(this.tooltipElem){
+            const hostPos = this.el.nativeElement.getBoundingClientRect();
+            const tooltipPos = this.tooltipElem.getBoundingClientRect();
+
+            let top, left;
+
+            if(this.tooltipPlaceIntoHost){
+                left = 0;
+                top = hostPos.height; 
+            } else {
+                const scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+
+                if (this.tooltipPlacement === 'top') {
+                    top = hostPos.top - tooltipPos.height - this.offset;
+                    left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+                }
+
+                if (!this.tooltipPlacement || this.tooltipPlacement === 'bottom') {
+                    top = hostPos.bottom + this.offset;
+                    left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+                }
+
+                if (this.tooltipPlacement === 'left') {
+                    top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+                    left = hostPos.left - tooltipPos.width - this.offset;
+                }
+
+                if (this.tooltipPlacement === 'right') {
+                    top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+                    left = hostPos.right + this.offset;
+                }
+                top += scrollPos;
+            }
+
+            this.renderer.setStyle(this.tooltipElem, 'top', `${top}px`);
+            this.renderer.setStyle(this.tooltipElem, 'left', `${left}px`);
+        }
+    }
+}

package/src/lib/kms-ngx-ui-presentational.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KmsUiPresentationalComponent } from './kms-ngx-ui-presentational.component';
+
+describe('KmsUiPresentationalComponent', () => {
+  let component: KmsUiPresentationalComponent;
+  let fixture: ComponentFixture<KmsUiPresentationalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ KmsUiPresentationalComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(KmsUiPresentationalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/kms-ngx-ui-presentational.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-kms-ngx-ui-presentational',
+  template: `
+    <p>
+      kms-ngx-ui-presentational works!
+    </p>
+  `,
+  styles: [
+  ]
+})
+export class KmsUiPresentationalComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}