@colijnit/sharedcomponents 261.1.0 → 261.1.2

package/projects/sharedcomponents/src/lib/service/app-absolute-overlay-outlet.service.ts

@@ -0,0 +1,20 @@
+import {Injectable, TemplateRef} from "@angular/core";
+import {Subject} from "rxjs";
+
+// App-wide service to place and remove template refs into the global absolute overlay outlet component.
+@Injectable()
+export class AppAbsoluteOverlayOutletService {
+    public readonly templateCreateRequest: Subject<TemplateRef<any>> = new Subject<TemplateRef<any>>();
+    public readonly templateDestroyRequest: Subject<TemplateRef<any>> = new Subject<TemplateRef<any>>();
+
+    constructor() {
+    }
+
+    public placeTemplateIntoOverlay(template: TemplateRef<any>): void {
+        this.templateCreateRequest.next(template);
+    }
+
+    public removeTemplateFromOverlay(template: TemplateRef<any>): void {
+        this.templateDestroyRequest.next(template);
+    }
+}

package/projects/sharedcomponents/src/lib/service/drag-drop.service.ts

@@ -0,0 +1,423 @@
+import {Directive, Injectable, OnDestroy, Renderer2} from "@angular/core";
+import {Subject} from "rxjs";
+import {CoDropEvent} from "../event/co-drop-event";
+import {CoDragEvent} from "../event/co-drag-event";
+import {DragDropContainer} from "../businessobject/drag-drop-container";
+import {ArrayUtils} from "../utils/array-utils";
+import {CoOrientation} from "@colijnit/corecomponents_v12";
+import {DragDropContainerElement} from "../businessobject/drag-drop-container-element";
+
+/**
+ * Handles drag and drop elements
+ */
+@Injectable({
+  providedIn: "root"
+})
+export class DragDropService implements OnDestroy {
+    public set renderer(value: Renderer2) {
+        this._renderer = value;
+        this._setEvents();
+    }
+
+    // ToDo: use drag and drop Subjects instead and track origin and target components
+    public dragData: any;
+
+    public drag: Subject<CoDragEvent> = new Subject<CoDragEvent>();
+    public drop: Subject<CoDropEvent> = new Subject<CoDropEvent>();
+
+    private _renderer: Renderer2;
+    // Container(s) holding the elements to be dragged.
+    private _containers: DragDropContainer[] = [];
+
+    private _disabledContainers: DragDropContainer[] = [];
+
+    private _dropTargetElement: DragDropContainerElement;
+
+    // Drag handle(s) that contains the classes of the handles.
+    private _dragHandles: any[] = [];
+    private _isdragging: boolean = false;
+    private _dragElement: DragDropContainerElement;
+    private _dragInContainer: any;
+    private _lastDropTarget: DragDropContainerElement;
+    /**
+     * Ghost image of the element being dragged
+     */
+    private _ghostDragImage: any;
+
+    private _clickCounter: number = 0;
+
+    private set ghostLeft(value: number) {
+        this._ghostLeft = value;
+        this._positionGhostImage();
+    }
+
+    private set ghostTop(value: number) {
+        this._ghostTop = value;
+        this._positionGhostImage();
+    }
+
+    private _ghostLeft: number = 0;
+    private _ghostTop: number = 0;
+
+    private _mouseDown: boolean = false;
+
+    private _currentMousePosition: any = {x: 0, y: 0};
+    private _currentMouseOffset: any = {x: 0, y: 0};
+
+    constructor() {
+    }
+
+    ngOnDestroy(): void {
+        this._removeListeners();
+    }
+
+    public addContainer(container: DragDropContainer): void {
+        const direction: CoOrientation =
+            (getComputedStyle(container.element).flexDirection === "row" && getComputedStyle(container.element).display === "flex")
+                ? CoOrientation.Horizontal
+                : CoOrientation.Vertical;
+        container.direction = direction;
+        this._containers.push(container);
+    }
+
+    public addDragHandle(handle: any): void {
+        this._dragHandles.push(handle);
+    }
+
+    public removeContainer(container: DragDropContainer): void {
+        ArrayUtils.RemoveElement(container, this._containers);
+        ArrayUtils.RemoveElement(container, this._disabledContainers);
+        if (!this._containers || this._containers.length === 0) {
+            this._removeListeners();
+        }
+    }
+
+    public removeDragHandle(handle: any): void {
+        ArrayUtils.RemoveElement(handle, this._dragHandles);
+    }
+
+    public enableContainer(container: DragDropContainer): void {
+        ArrayUtils.RemoveElement(container, this._disabledContainers);
+    }
+
+    public disableContainer(container: DragDropContainer): void {
+        this._disabledContainers.push(container);
+    }
+
+    private _removeListeners(): void {
+        this._handleEventListener(document, "mouseup", this._handleMouseUp, false);
+        this._handleEventListener(document, "mousemove", this._handleMouseMove, false);
+    }
+
+    private _setEvents(): void {
+        this._handleEventListener(document, "mousedown", this._handleMouseDown); //TODO: mousedown only within given containers
+        this._handleEventListener(document, "mouseup", this._handleMouseUp);
+    }
+
+    private _setElementClass(element: any, elementClass: string): void {
+        if (!this._renderer) {
+            return;
+        }
+        this._renderer.addClass(element, elementClass);
+    }
+
+    private _handleEventListener(element: any, event: string, handler: any, add: boolean = true): void {
+        if (add) {
+            element.removeEventListener(event, handler);
+            element.addEventListener(event, handler);
+        } else {
+            element.removeEventListener(event, handler);
+        }
+    }
+
+    // Returns the container that holds given element.
+    private _getContainerOfElement(element: HTMLElement): DragDropContainer {
+        for (let i: number = 0, len1: number = this._containers.length; i < len1; i++) {
+            const container: DragDropContainer = this._containers[i];
+            for (let ii: number = 0, len2: number = container.element.children.length; ii < len2; ii++) {
+                if (container.element.children[ii] === element) {
+                    return container;
+                }
+            }
+        }
+    }
+
+    /**
+     * Checks if given element is a child of container(s)
+     * @param element
+     * @returns {number} index of element
+     */
+    private _getElementOfContainer(element: any): DragDropContainerElement {
+        for (let i: number = 0, len1: number = this._containers.length; i < len1; i++) {
+            const container: DragDropContainer = this._containers[i];
+            for (let ii: number = 0, len2: number = container.element.children.length; ii < len2; ii++) {
+                if (container.element.children[ii] === element) {
+                    return {container: container, element: element, elementIdx: ii};
+                }
+            }
+        }
+        return {container: undefined, element: undefined, elementIdx: -1};
+    }
+
+    /**
+     * Returns next sibling of container that contains given element.
+     * @param element
+     * @returns {any} null if there are no siblings left
+     */
+    private _getNextElementInContainer(element: HTMLElement): DragDropContainerElement {
+        const container: DragDropContainer = this._getContainerOfElement(element);
+        for (let i: number = 0, len: number = container.element.children.length; i < len; i++) {
+            if (container.element.children[i] === element) {
+                return i < (len - 1) ? {container: container, element: <HTMLElement>container.element.children[i + 1], elementIdx: i} : null;
+            }
+        }
+    }
+
+    private _getDragHandleClicked(element: any): boolean {
+        if (this._dragHandles && this._dragHandles.length > 0) { // check if handle clicked
+            while (element) {
+                for (let i: number = 0, len: number = this._dragHandles.length; i < len; i++) {
+                    if (element.classList && element.classList.length > 0 && !!this._dragHandles[i]) {
+                        if (element.classList.contains(this._dragHandles[i])) {
+                            return true;
+                        }
+                    }
+                }
+                element = element.parentNode === document ? null : element.parentNode;
+            }
+            return false;
+        } else {
+            return true;
+        }
+    }
+
+    // Returns element when it's a valid drop target, false otherwise.
+    private _getValidDragDropElement(element: any, checkHandle: boolean = false): DragDropContainerElement {
+        if (checkHandle) {
+            const validHandleClicked: boolean = this._getDragHandleClicked(element);
+            if (!validHandleClicked) {
+                return undefined;
+            }
+        }
+        while (element) {
+            const elementOfContainer: DragDropContainerElement = this._getElementOfContainer(element);
+            if (elementOfContainer.elementIdx > -1) {
+                return elementOfContainer;
+            }
+            element = element.parentNode === document ? null : element.parentNode;
+        }
+        return undefined;
+    }
+
+    private _getNextSibling(element: HTMLElement): DragDropContainerElement {
+        return this._getNextElementInContainer(element);
+    }
+
+    // Returns the current index of element within its container.
+    private _indexOf(element: any): number {
+        const elementOfContainer: DragDropContainerElement = this._getElementOfContainer(element.hasOwnProperty("element") ? element.element : element);
+        return elementOfContainer ? elementOfContainer.elementIdx : -1;
+    }
+
+    // Creates a ghost image/element of the element being dragged.
+    private _createGhostImage(): void {
+        if (this._ghostDragImage) {
+            return;
+        }
+        // create ghost drag image
+        const offsetRect: any = this._getOffset();
+        this._ghostDragImage = this._dragElement.element.cloneNode(true);
+        this._ghostDragImage.style.width = offsetRect.width + "px";
+        this._ghostDragImage.style.height = offsetRect.height + "px";
+        this.ghostLeft = offsetRect.left;
+        this.ghostTop = offsetRect.top;
+        this._setElementClass(this._ghostDragImage, "ghost-image");
+        this._setElementClass(document.activeElement, "no-select");
+        document.body.appendChild(this._ghostDragImage);
+    }
+
+    private _destroyGhostImage(): void {
+        if (this._ghostDragImage) {
+            this._renderer.removeClass(document.activeElement, "no-select");
+            document.body.removeChild(this._ghostDragImage);
+            this._ghostDragImage = undefined;
+        }
+    }
+
+    // Positions the ghost image at the given coordinates.
+    private _positionGhostImage(): void {
+        if (!this._ghostDragImage) {
+            return;
+        }
+        this._ghostDragImage.style.left = this._ghostLeft + "px";
+        this._ghostDragImage.style.top = this._ghostTop + "px";
+    }
+
+    private _getScroll(scrollProp: string, offsetProp: string): any {
+        if (document.activeElement.clientHeight) {
+            return document.activeElement[scrollProp];
+        }
+        return document.body[scrollProp];
+    }
+
+    private _getOffset(): ClientRect {
+        const rect: ClientRect = this._dragElement.element.getBoundingClientRect();
+        const scrollLeft: number = 0;
+        const scrollTop: number = 0;
+        return {
+            bottom: rect.bottom,
+            height: rect.height,
+            left: rect.left + scrollLeft,
+            right: rect.right,
+            top: rect.top + scrollTop,
+            width: rect.width
+        };
+    }
+
+    private _determineDroptarget(element: any, x: number, y: number): void {
+        const dropElement: DragDropContainerElement = this._getValidDragDropElement(element);
+        if (dropElement) {
+            if (dropElement.element !== this._dragElement.element) {
+                this._dropTargetElement = dropElement;
+                return;
+            }
+        }
+        this._dropTargetElement = null;
+    }
+
+    /**
+     * Briefly hides the ghost image to be able to determine which element is under mouse.
+     * @param x
+     * @param y
+     * @returns {Element} Top level element
+     */
+    private _getHoveredElement(x: number, y: number): any {
+        this._setElementClass(this._ghostDragImage, "ghost-image-hide");
+        const elm: any = document.elementFromPoint(x, y);
+        this._renderer.removeClass(this._ghostDragImage, "ghost-image-hide");
+        return elm;
+    }
+
+    private _animateVisibility(element: any, transitionTime: number = 0.2, start: string = "0", end: string = "1"): Promise<void> {
+        if (!element) {
+            return;
+        }
+        const transitionStyle: string = "opacity " + transitionTime + "s ease-in-out";
+        const transition: string = element.style.transition;
+        element.style.transition = transition + (transition ? "," : "") + transitionStyle;
+        element.style.opacity = start;
+        element.style.opacity = end;
+        return new Promise<void>((resolve: Function) => {
+            setTimeout(() => {
+                resolve();
+            }, transitionTime * 1000);
+        });
+    }
+
+    private _animateMove(parent: HTMLElement, dragElement: DragDropContainerElement, dropTargetElement: DragDropContainerElement, down: boolean): void {
+        if (down) { // insert element before
+            parent.insertBefore(dragElement.element, dropTargetElement.element);
+        } else { // insert after
+            parent.insertBefore(dragElement.element, dropTargetElement.element.nextSibling);
+        }
+    }
+
+    // Handles the mouse down event. Saves the current mouse position.
+    private _handleMouseDown: Function = (event: MouseEvent): void => {
+        this._currentMousePosition.x = event.screenX;
+        this._currentMousePosition.y = event.screenY;
+        if (event.buttons !== 1 || event.metaKey || event.ctrlKey) {
+            return;
+        }
+        const element: any = event.target ? event.target : event.srcElement;
+        const dragElement: DragDropContainerElement = this._getValidDragDropElement(element, true);
+        if (!dragElement) {
+            return;
+        }
+        if (this._disabledContainers.indexOf(dragElement.container) !== -1) {
+            return;
+        }
+        this._dragElement = dragElement;
+        this._dragInContainer = dragElement.container.element;
+        const offset: any = this._getOffset();
+        this._currentMouseOffset.x = event.clientX - offset.left;
+        this._currentMouseOffset.y = event.clientY - offset.top;
+        this._mouseDown = true;
+        this._handleEventListener(document, "mousemove", this._handleMouseMove);
+        this._clickCounter++;
+    }
+
+    private _handleMouseUp: Function = (event: MouseEvent): void => {
+        this._mouseDown = false;
+        this._handleEventListener(document, "mousemove", this._handleMouseMove, false);
+        this._clickCounter--;
+
+        if (this._isdragging) {
+            this._endDrag();
+        }
+    }
+
+    private _handleMouseMove: Function = (event: MouseEvent): void => {
+        // nothing to drag?
+        if (!this._dragElement) {
+            return;
+        }
+        // only drag when mouse down and there actually is movement
+        if (!this._mouseDown || (this._currentMousePosition.x === event.screenX && this._currentMousePosition.y === event.screenY)) {
+            return;
+        }
+        this._isdragging = true;
+        this._startDrag();
+        this._drag(event);
+        this._currentMousePosition.x = event.screenX;
+        this._currentMousePosition.y = event.screenY;
+    }
+
+    private _startDrag(): void {
+        this._createGhostImage();
+        this._setElementClass(this._dragElement.element, "is-dragged");
+    }
+
+    private _drag(event: MouseEvent): void {
+        this.ghostLeft = this._ghostLeft + (event.screenX - this._currentMousePosition.x);
+        this.ghostTop = this._ghostTop + (event.screenY - this._currentMousePosition.y);
+
+        const x: number = event.clientX;
+        const y: number = event.clientY;
+        const hoveredElement: any = this._getHoveredElement(x, y);
+        this._determineDroptarget(hoveredElement, x, y);
+        if (this._dropTargetElement) {
+            const down: boolean =
+                (this._dropTargetElement.container.direction === CoOrientation.Vertical && event.screenY > this._currentMousePosition.y) ||
+                (this._dropTargetElement.container.direction === CoOrientation.Horizontal && event.screenX > this._currentMousePosition.x);
+            this._animateMove(this._dropTargetElement.container.element, this._dragElement, this._dropTargetElement, down);
+            this.drag.next({
+                element: this._dragElement,
+                elementIndex: this._dragElement.elementIdx,
+                source: this._dropTargetElement.container.element
+            });
+            this._lastDropTarget = this._dropTargetElement;
+        }
+    }
+
+    // element is dropped
+    private _endDrag(): void {
+        this._renderer.removeClass(this._dragElement.element, "is-dragged");
+        this._destroyGhostImage();
+        this.drop.next({
+            element: this._dragElement.element,
+            elementIndex: this._dragElement.elementIdx,
+            target: this._lastDropTarget ? this._lastDropTarget.element : null,
+            targetIndex: this._lastDropTarget ? this._lastDropTarget.elementIdx : -1, // items are already shifted so subtract 1 from target index
+            container: this._lastDropTarget ? this._lastDropTarget.container : null
+        });
+        this._resetDrag();
+    }
+
+    private _resetDrag(): void {
+        this._dragElement = null;
+        this._dragInContainer = null;
+        this._lastDropTarget = null;
+        this._isdragging = false;
+    }
+}

package/projects/sharedcomponents/src/lib/service/icon-cache.service.ts

@@ -0,0 +1,51 @@
+import {Injectable} from "@angular/core";
+import {DomSanitizer, SafeHtml} from "@angular/platform-browser";
+import {Icon} from "../enum/icon.enum";
+import {IconSvg} from "../model/icon-svg";
+
+@Injectable({
+  providedIn: "root"
+})
+export class IconCacheService {
+  /**
+   * All the icons as a large JSON object, from the all-icons.json file.
+   * The object has property keys that are the icon names, and property values with the data string of the actual svg icon.
+   */
+  public get iconCache(): { [iconName: string]: SafeHtml } {
+    return this._iconCache;
+  }
+
+  private _iconCache: { [iconName: string]: SafeHtml } = {};
+
+  constructor(
+    private _sanitizer: DomSanitizer
+  ) {
+    this.setIconCache();
+  }
+
+  public getIcon(iconName: Icon | string): SafeHtml {
+    if (iconName) {
+      return this._iconCache[iconName.toLowerCase()];
+    }
+  }
+
+  public getIconAsBase64(iconName: Icon): SafeHtml {
+    const icon: string = IconSvg[iconName];
+    const base64Data: string = window.btoa(icon);
+    return this._sanitizer.bypassSecurityTrustUrl(`data:image/svg+xml;base64,${base64Data}`);
+  }
+
+  public getRawIcon(iconName: Icon): string {
+    if (iconName) {
+      return IconSvg[iconName.toLowerCase()];
+    }
+  }
+
+  public setIconCache(): void {
+    for (const key in IconSvg) {
+      if (IconSvg.hasOwnProperty(key) && typeof IconSvg[key] !== "function") {
+        this._iconCache[key.toLowerCase()] = this._sanitizer.bypassSecurityTrustHtml(IconSvg[key]);
+      }
+    }
+  }
+}

package/projects/sharedcomponents/src/lib/service/options.service.ts

@@ -0,0 +1,43 @@
+import {Injectable} from "@angular/core";
+import {BehaviorSubject} from "rxjs";
+import {SharedSettings} from '../model/settings';
+import {SharedComponentsDictionaryService} from '../translation/shared-components-dictionary.service';
+
+@Injectable({
+  providedIn: "root"
+})
+export class OptionsService {
+
+  public optionsInitialized: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
+  public set options(value: any) {
+    this._options = value;
+  }
+
+  public get options(): any {
+    return this._options;
+  }
+
+  public optionsLoaded: BehaviorSubject<boolean> = new BehaviorSubject(false);
+
+  private _options: any;
+
+  constructor(private _dictionary: SharedComponentsDictionaryService) {
+  }
+
+  public async createSettingsFromObject(obj: any): Promise<void> {
+    if (!this.options) {
+      this.options = new SharedSettings();
+    }
+    this.options = Object.assign(this.options, obj);
+    this.optionsLoaded.next(true);
+  }
+
+  public async initialize(options: any): Promise<void> {
+    if (options) {
+      await this.createSettingsFromObject(options);
+      await this._dictionary.setDictionary(this.options.languageCode);
+      this.optionsInitialized.next(true);
+    }
+  }
+}