@colijnit/corecomponents_v12 255.1.1 → 255.1.3

package/projects/corecomponents/src/lib/modules/drag-drop/drag-drop-container.css

@@ -1,34 +0,0 @@
-/* Included by main.scss in src/style root */
-
-co-drag-drop-container {
-    position: relative;
-}
-
-co-drag-drop-container.is-dragged {
-    cursor: grabbing;
-    cursor: -moz-grabbing;
-    cursor: -webkit-grabbing;
-    opacity: 0.2;
-}
-
-co-drag-drop-container.is-dragged > div {
-    opacity: 0.2;
-}
-
-.ghost-image {
-    position: fixed;
-    opacity: 0.8;
-    z-index: 51;
-    display: none !important;
-}
-
-.ghost-image.ghost-image.hide {
-    display: none !important;
-}
-
-.no-select {
-    -webkit-user-select: none !important;
-    -moz-user-select: none !important;
-    -ms-user-select: none !important;
-    user-select: none !important;
-}

package/projects/corecomponents/src/lib/modules/drag-drop/drag-drop-manager.service.ts

@@ -1,414 +0,0 @@
-import {Injectable, Renderer2} from "@angular/core";
-import {Subject} from "rxjs";
-import {CoDragEvent} from "./model/co-drag-event";
-import {CoDropEvent} from "./model/co-drop-event";
-import {DragDropContainer} from "./model/drag-drop-container";
-import {DragDropContainerElement} from "./model/drag-drop-container-element";
-import {CoOrientation} from "../../core/enum/co-orientation";
-import {ArrayUtils} from "../../core/utils/array-utils";
-
-@Injectable()
-export class DragDropManagerService {
-    public set renderer(value: Renderer2) {
-        this._renderer = value;
-        this._setEvents();
-    }
-
-    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() {
-    }
-
-    public addContainer(container: DragDropContainer): void {
-        let 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);
-    }
-
-    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 _setEvents(): void {
-        this._handleEventListener(document, 'mousedown', this._handleMouseDown);
-        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.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++) {
-            let 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 index of element
-     */
-    private _getElementOfContainer(element: any): DragDropContainerElement {
-        for (let i: number = 0, len1: number = this._containers.length; i < len1; i++) {
-            let 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 null if there are no siblings left
-     */
-    private _getNextElementInContainer(element: HTMLElement): DragDropContainerElement {
-        let 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) {
-            let validHandleClicked: boolean = this._getDragHandleClicked(element);
-            if (!validHandleClicked) {
-                return undefined;
-            }
-        }
-        while (element) {
-            let 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 {
-        let 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
-        let 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');
-        // this._dragInContainer.parentNode.appendChild(this._ghostDragImage);
-        document.body.appendChild(this._ghostDragImage);
-    }
-
-    private _destroyGhostImage(): void {
-        if (this._ghostDragImage) {
-            this._renderer.removeClass(document.activeElement, 'no-select');
-            // this._dragInContainer.parentNode.removeChild(this._ghostDragImage);
-            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) {
-        if (document.activeElement.clientHeight) {
-          return document.activeElement[scrollProp];
-        }
-      }
-        return document.body[scrollProp];
-    }
-
-    private _getOffset(): ClientRect {
-        let rect: ClientRect = this._dragElement.element.getBoundingClientRect();
-        let scrollLeft: number = 0;
-        let 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 {
-        let 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 Top level element
-     */
-    private _getHoveredElement(x: number, y: number): any {
-        this._setElementClass(this._ghostDragImage, 'ghost-image-hide');
-        let 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;
-        }
-        let transitionStyle: string = "opacity " + transitionTime + "s ease-in-out";
-        let 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 {
-        let transitionTime: number = 0.2;
-        // this._animateVisibility(target, transitionTime, "1", "0").then(() => {
-        if (down) { // insert element before
-            parent.insertBefore(dropTargetElement.element, dragElement.element);
-        } else { // insert after
-            parent.insertBefore(dropTargetElement.element, dragElement.element.nextSibling);
-        }
-        //     setTimeout(() => {
-        //         this._animateVisibility(target, transitionTime, "0", "1");
-        //     }, transitionTime * 1000);
-        // });
-    }
-
-    // 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;
-        }
-        let element: any = event.target ? event.target : event.srcElement;
-        let 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;
-        let 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);
-
-        let x: number = event.clientX;
-        let y: number = event.clientY;
-        let hoveredElement: any = this._getHoveredElement(x, y);
-        this._determineDroptarget(hoveredElement, x, y);
-        if (this._dropTargetElement) {
-            let 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/corecomponents/src/lib/modules/drag-drop/drag-drop.module.ts

@@ -1,20 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-
-import {DragDropContainerComponent} from "./drag-drop-container.component";
-import {DraggableDirective} from "./draggable.directive";
-import {DragDropManagerService} from "./drag-drop-manager.service";
-
-// todo properly implement ghost image
-@NgModule({
-    imports: [
-        CommonModule
-    ],
-    providers: [
-        DragDropManagerService
-    ],
-    declarations: [DragDropContainerComponent, DraggableDirective],
-    exports: [DragDropContainerComponent, DraggableDirective]
-})
-export class DragDropModule {
-}

package/projects/corecomponents/src/lib/modules/drag-drop/draggable.directive.ts

@@ -1,70 +0,0 @@
-import {Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, Renderer2} from "@angular/core";
-import {DragDropManagerService} from "./drag-drop-manager.service";
-
-@Directive({
-    selector: '[co-draggable]',
-})
-export class DraggableDirective {
-    /**
-     * id/index of the draggable element
-     * null value means that draggable is disabled
-     */
-    @Input('coDraggable')
-    public set draggable(value: any) {
-        if (value) {
-            this.id = value;
-            this.setElementDraggable();
-        }
-    }
-
-    @Input('coDraggableObject')
-    public set draggableObject(value: any) {
-        if (value) {
-            this.object = value;
-            this.setElementDraggable();
-        }
-    }
-
-    @Input()
-    public horizontalDrag: boolean = true;
-
-    @Input()
-    public verticalDrag: boolean = true;
-
-    @Output()
-    public onDrag: EventEmitter<any> = new EventEmitter<any>();
-
-    @Output()
-    public onDragEnd: EventEmitter<any> = new EventEmitter<any>();
-
-    @HostBinding('class.is-dragged') get getIdDragging(): boolean {
-        return this.dragging;
-    }
-
-    public id: any;
-    public object: any;
-    public dragging: boolean = false;
-
-    constructor(private _elementRef: ElementRef, private _renderer: Renderer2, private _dragService: DragDropManagerService) {
-    }
-
-    @HostListener('dragstart', ['$event'])
-    public dragStart(event: any): void {
-        // event.dataTransfer.effectAllowed = 'move';
-        event.dataTransfer.setData('text', this.id.toString());
-        this._dragService.dragData = this.object;
-        this.dragging = true;
-        this.onDrag.emit({sourceId: this.id, object: this.object});
-    }
-
-    @HostListener('dragend', ['$event'])
-    public dragEnd(event: any): void {
-        event.preventDefault();
-        this.dragging = false;
-        this.onDragEnd.emit({sourceId: this.id, object: this.object});
-    }
-
-    public setElementDraggable(): void {
-        this._renderer.setProperty(this._elementRef.nativeElement, 'draggable', true);
-    }
-}

package/projects/corecomponents/src/lib/modules/drag-drop/model/co-drag-event.ts

@@ -1,5 +0,0 @@
-export interface CoDragEvent {
-    element: any,
-    elementIndex: number,
-    source: any
-}

package/projects/corecomponents/src/lib/modules/drag-drop/model/co-drop-event.ts

@@ -1,9 +0,0 @@
-import {DragDropContainer} from "./drag-drop-container";
-
-export interface CoDropEvent {
-    element: HTMLElement,
-    elementIndex: number,
-    container: DragDropContainer,
-    target: HTMLElement,
-    targetIndex: number
-}

package/projects/corecomponents/src/lib/modules/drag-drop/model/drag-drop-container-element.ts

@@ -1,7 +0,0 @@
-import {DragDropContainer} from "./drag-drop-container";
-
-export interface DragDropContainerElement {
-    container: DragDropContainer;
-    element: HTMLElement;
-    elementIdx: number;
-}

package/projects/corecomponents/src/lib/modules/drag-drop/model/drag-drop-container.ts

@@ -1,9 +0,0 @@
-import {CoOrientation} from "../../../core/enum/co-orientation";
-
-// For dragdropservice
-export class DragDropContainer {
-    constructor(
-        public element: HTMLElement,
-        public direction: CoOrientation) {
-    }
-}

package/projects/corecomponents/src/lib/modules/media-monitor/flex-layout-breakpoint.enum.ts

@@ -1,5 +0,0 @@
-//  All different breakpoints we use of the flex-layout lib.
-export enum FlexLayoutBreakpointName {
-    Small = "sm",
-    ExtraSmall = "xs"
-}

package/projects/corecomponents/src/lib/modules/media-monitor/media-monitor.module.ts

@@ -1,14 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {MediaMonitorService} from "./media-monitor.service";
-
-@NgModule({
-    imports: [
-        CommonModule
-    ],
-    providers: [
-        MediaMonitorService
-    ],
-})
-export class MediaMonitorModule {
-}

package/projects/corecomponents/src/lib/modules/media-monitor/media-monitor.service.ts

@@ -1,36 +0,0 @@
-import {Injectable, OnDestroy} from "@angular/core";
-import {Subscription} from "rxjs";
-import {MediaChange, MediaObserver} from "@angular/flex-layout";
-import {BehaviorSubject} from "rxjs";
-import {FlexLayoutBreakpointName} from "./flex-layout-breakpoint.enum";
-
-/**
- * Service monitors media changes in conjunction with FlexLayout
- */
-@Injectable()
-export class MediaMonitorService implements OnDestroy {
-    public readonly mediaChanged: BehaviorSubject<MediaChange> = new BehaviorSubject<MediaChange>(undefined);
-
-    public activeMedia: FlexLayoutBreakpointName;
-
-    public mediaChangeSub: Subscription;
-
-    constructor(private _media: MediaObserver) {
-        this.mediaChangeSub = _media.media$.subscribe((change: MediaChange) => {
-            this.activeMedia = <FlexLayoutBreakpointName>(change ? change.mqAlias : "");
-            this.mediaChanged.next(change);
-        });
-    }
-
-    ngOnDestroy(): void {
-        this.mediaChangeSub.unsubscribe();
-    }
-
-    public isExtraSmall(): boolean {
-        return this.activeMedia === FlexLayoutBreakpointName.ExtraSmall;
-    }
-
-    public isSmall(): boolean {
-        return this.activeMedia === FlexLayoutBreakpointName.Small;
-    }
-}