@colijnit/sharedcomponents 261.1.2 → 261.20.0

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

@@ -1,20 +0,0 @@
-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

@@ -1,423 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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);
-    }
-  }
-}