@colijnit/corecomponents_v12 12.2.19 → 12.2.20

package/projects/corecomponents/src/lib/directives/ripple/ripple-renderer.ts

@@ -1,217 +0,0 @@
-// NOTE: Copied and adapted to CoreComponents from iOneJS on 9-may-2018.
-
-import {ElementRef, NgZone} from '@angular/core';
-
-import {CoRippleRef, CoRippleState} from "./ripple-ref";
-import {CoViewportRulerService} from "./viewport-ruler.service";
-
-/** Fade-in duration for the ripples. Can be modified with the speedFactor option. */
-export const RIPPLE_FADE_IN_DURATION = 450;
-
-/** Fade-out duration for the ripples in milliseconds. This can't be modified by the speedFactor. */
-export const RIPPLE_FADE_OUT_DURATION = 400;
-
-export type CoRippleConfig = {
-    color?: string;
-    centered?: boolean;
-    radius?: number;
-    speedFactor?: number;
-    persistent?: boolean;
-};
-
-/**
- * Helper service that performs DOM manipulations. Not intended to be used outside this module.
- * The constructor takes a reference to the ripple directive's host element and a map of DOM
- * event handlers to be installed on the element that triggers ripple animations.
- * This will eventually become a custom renderer once Angular support exists.
- * @docs-private
- */
-export class CoRippleRenderer {
-
-    /** Element where the ripples are being added to. */
-    private _containerElement: HTMLElement;
-
-    /** Element which triggers the ripple elements on mouse events. */
-    private _triggerElement: HTMLElement;
-
-    /** Whether the mouse is currently down or not. */
-    private _isMousedown: boolean = false;
-
-    /** Events to be registered on the trigger element. */
-    private _triggerEvents = new Map<string, any>();
-
-    /** Set of currently active ripple references. */
-    private _activeRipples = new Set<CoRippleRef>();
-
-    /** Ripple config for all ripples created by events. */
-    rippleConfig: CoRippleConfig = {};
-
-    /** Whether mouse ripples should be created or not. */
-    rippleDisabled: boolean = false;
-
-    constructor(_elementRef: ElementRef, private _ngZone: NgZone, private _ruler: CoViewportRulerService) {
-        this._containerElement = _elementRef.nativeElement;
-
-        // Specify events which need to be registered on the trigger.
-        this._triggerEvents.set('mousedown', this.onMousedown.bind(this));
-        this._triggerEvents.set('mouseup', this.onMouseup.bind(this));
-        this._triggerEvents.set('mouseleave', this.onMouseLeave.bind(this));
-
-        // By default use the host element as trigger element.
-        this.setTriggerElement(this._containerElement);
-    }
-
-    /** Fades in a ripple at the given coordinates. */
-    fadeInRipple(pageX: number, pageY: number, config: CoRippleConfig = {}): CoRippleRef {
-        let containerRect = this._containerElement.getBoundingClientRect();
-
-        if (config.centered) {
-            pageX = containerRect.left + containerRect.width / 2;
-            pageY = containerRect.top + containerRect.height / 2;
-        } else {
-            // Subtract scroll values from the coordinates because calculations below
-            // are always relative to the viewport rectangle.
-            let scrollPosition = this._ruler.getViewportScrollPosition();
-            pageX -= scrollPosition.left;
-            pageY -= scrollPosition.top;
-        }
-
-        let radius = config.radius || distanceToFurthestCorner(pageX, pageY, containerRect);
-        let duration = RIPPLE_FADE_IN_DURATION * (1 / (config.speedFactor || 1));
-        let offsetX = pageX - containerRect.left;
-        let offsetY = pageY - containerRect.top;
-
-        let ripple = document.createElement('div');
-        ripple.classList.add('mat-ripple-element');
-
-        ripple.style.left = `${offsetX - radius}px`;
-        ripple.style.top = `${offsetY - radius}px`;
-        ripple.style.height = `${radius * 2}px`;
-        ripple.style.width = `${radius * 2}px`;
-
-        // If the color is not set, the default CSS color will be used.
-        ripple.style.backgroundColor = config.color;
-        ripple.style.transitionDuration = `${duration}ms`;
-
-        this._containerElement.appendChild(ripple);
-
-        // By default the browser does not recalculate the styles of dynamically created
-        // ripple elements. This is critical because then the `scale` would not animate properly.
-        enforceStyleRecalculation(ripple);
-
-        ripple.style.transform = 'scale(1)';
-
-        // Exposed reference to the ripple that will be returned.
-        let rippleRef = new CoRippleRef(this, ripple, config);
-
-        rippleRef.state = CoRippleState.FADING_IN;
-
-        // Add the ripple reference to the list of all active ripples.
-        this._activeRipples.add(rippleRef);
-
-        // Wait for the ripple element to be completely faded in.
-        // Once it's faded in, the ripple can be hidden immediately if the mouse is released.
-        this.runTimeoutOutsideZone(() => {
-            rippleRef.state = CoRippleState.VISIBLE;
-
-            if (!config.persistent && !this._isMousedown) {
-                rippleRef.fadeOut();
-            }
-        }, duration);
-
-        return rippleRef;
-    }
-
-    /** Fades out a ripple reference. */
-    fadeOutRipple(rippleRef: CoRippleRef) {
-        // For ripples that are not active anymore, don't re-un the fade-out animation.
-        if (!this._activeRipples.delete(rippleRef)) {
-            return;
-        }
-
-        let rippleEl = rippleRef.element;
-
-        rippleEl.style.transitionDuration = `${RIPPLE_FADE_OUT_DURATION}ms`;
-        rippleEl.style.opacity = '0';
-
-        rippleRef.state = CoRippleState.FADING_OUT;
-
-        // Once the ripple faded out, the ripple can be safely removed from the DOM.
-        this.runTimeoutOutsideZone(() => {
-            rippleRef.state = CoRippleState.HIDDEN;
-            rippleEl.parentNode.removeChild(rippleEl);
-        }, RIPPLE_FADE_OUT_DURATION);
-    }
-
-    /** Fades out all currently active ripples. */
-    fadeOutAll() {
-        this._activeRipples.forEach(ripple => ripple.fadeOut());
-    }
-
-    /** Sets the trigger element and registers the mouse events. */
-    setTriggerElement(element: HTMLElement) {
-        // Remove all previously register event listeners from the trigger element.
-        if (this._triggerElement) {
-            this._triggerEvents.forEach((fn, type) => this._triggerElement.removeEventListener(type, fn));
-        }
-
-        if (element) {
-            // If the element is not null, register all event listeners on the trigger element.
-            this._ngZone.runOutsideAngular(() => {
-                this._triggerEvents.forEach((fn, type) => element.addEventListener(type, fn));
-            });
-        }
-
-        this._triggerElement = element;
-    }
-
-    /** Listener being called on mousedown event. */
-    private onMousedown(event: MouseEvent) {
-        if (!this.rippleDisabled) {
-            this._isMousedown = true;
-            this.fadeInRipple(event.pageX, event.pageY, this.rippleConfig);
-        }
-    }
-
-    /** Listener being called on mouseup event. */
-    private onMouseup() {
-        this._isMousedown = false;
-
-        // Fade-out all ripples that are completely visible and not persistent.
-        this._activeRipples.forEach(ripple => {
-            if (!ripple.config.persistent && ripple.state === CoRippleState.VISIBLE) {
-                ripple.fadeOut();
-            }
-        });
-    }
-
-    /** Listener being called on mouseleave event. */
-    private onMouseLeave() {
-        if (this._isMousedown) {
-            this.onMouseup();
-        }
-    }
-
-    /** Runs a timeout outside of the Angular zone to avoid triggering the change detection. */
-    private runTimeoutOutsideZone(fn: Function, delay: number = 0): void {
-        this._ngZone.runOutsideAngular(() => setTimeout(fn, delay));
-    }
-
-}
-
-/** Enforces a style recalculation of a DOM element by computing its styles. */
-function enforceStyleRecalculation(element: HTMLElement) {
-    // Enforce a style recalculation by calling `getComputedStyle` and accessing any property.
-    // Calling `getPropertyValue` is important to let optimizers know that this is not a noop.
-    // See: https://gist.github.com/paulirish/5d52fb081b3570c81e3a
-    window.getComputedStyle(element).getPropertyValue('opacity');
-}
-
-/**
- * Returns the distance from the point (x, y) to the furthest corner of a rectangle.
- */
-function distanceToFurthestCorner(x: number, y: number, rect: ClientRect) {
-    const distX = Math.max(Math.abs(x - rect.left), Math.abs(x - rect.right));
-    const distY = Math.max(Math.abs(y - rect.top), Math.abs(y - rect.bottom));
-    return Math.sqrt(distX * distX + distY * distY);
-}

package/projects/corecomponents/src/lib/directives/ripple/ripple.directive.ts

@@ -1,116 +0,0 @@
-// NOTE: Copied from iOneJS and adapted to CoreComponents on 9-may-2018.
-
-import {Directive, ElementRef, Inject, InjectionToken, Input, NgZone, OnChanges, OnDestroy, Optional, SimpleChanges} from '@angular/core';
-import {CoRippleConfig, CoRippleRenderer} from "./ripple-renderer";
-import {CoRippleRef} from "./ripple-ref";
-import {CoViewportRulerService} from "./viewport-ruler.service";
-
-/** OpaqueToken that can be used to specify the global ripple options. */
-export const MD_RIPPLE_GLOBAL_OPTIONS: InjectionToken<CoRippleGlobalOptions> = new InjectionToken('CoRippleGlobalOptions');
-
-export type CoRippleGlobalOptions = {
-    disabled?: boolean;
-    baseSpeedFactor?: number;
-};
-
-@Directive({
-    selector: '[md-ripple], [mat-ripple], [mdRipple], [matRipple]',
-    exportAs: 'mdRipple',
-    host: {
-        '[class.mat-ripple]': 'true',
-        '[class.mat-ripple-unbounded]': 'unbounded'
-    }
-})
-export class CoRippleDirective implements OnChanges, OnDestroy {
-
-    /**
-     * The element that triggers the ripple when click events are received. Defaults to the
-     * directive's host element.
-     */
-        // Prevent TS metadata emit from referencing HTMLElement in ripple.js
-        // Otherwise running this code in a Node environment (e.g Universal) will not work.
-    @Input('mdRippleTrigger') trigger: HTMLElement | HTMLElement;
-
-    /**
-     * Whether the ripple always originates from the center of the host element's bounds, rather
-     * than originating from the location of the click event.
-     */
-    @Input('mdRippleCentered') centered: boolean;
-
-    /**
-     * Whether click events will not trigger the ripple. It can still be triggered by manually
-     * calling createRipple()
-     */
-    @Input('mdRippleDisabled') disabled: boolean;
-
-    /**
-     * If set, the radius in pixels of foreground ripples when fully expanded. If unset, the radius
-     * will be the distance from the center of the ripple to the furthest corner of the host element's
-     * bounding rectangle.
-     */
-    @Input('mdRippleRadius') radius: number = 0;
-
-    /**
-     * If set, the normal duration of ripple animations is divided by this value. For example,
-     * setting it to 0.5 will cause the animations to take twice as long.
-     * A changed speedFactor will not modify the fade-out duration of the ripples.
-     */
-    @Input('mdRippleSpeedFactor') speedFactor: number = 1;
-
-    /** Custom color for ripples. */
-    @Input('mdRippleColor') color: string;
-
-    /** Whether foreground ripples should be visible outside the component's bounds. */
-    @Input('mdRippleUnbounded') unbounded: boolean;
-
-    /** Renderer for the ripple DOM manipulations. */
-    private _rippleRenderer: CoRippleRenderer;
-
-    /** Options that are set globally for all ripples. */
-    private _globalOptions: CoRippleGlobalOptions;
-
-    constructor(
-        elementRef: ElementRef,
-        ngZone: NgZone,
-        ruler: CoViewportRulerService,
-        // Type needs to be `any` because of https://github.com/angular/angular/issues/12631
-        @Optional() @Inject(MD_RIPPLE_GLOBAL_OPTIONS) globalOptions: any
-    ) {
-        this._rippleRenderer = new CoRippleRenderer(elementRef, ngZone, ruler);
-        this._globalOptions = globalOptions ? globalOptions : {};
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        if (changes['trigger'] && this.trigger) {
-            this._rippleRenderer.setTriggerElement(this.trigger);
-        }
-
-        this._rippleRenderer.rippleDisabled = this._globalOptions.disabled || this.disabled;
-        this._rippleRenderer.rippleConfig = this.rippleConfig;
-    }
-
-    ngOnDestroy(): void {
-        // Set the trigger element to null to cleanup all listeners.
-        this._rippleRenderer.setTriggerElement(null);
-    }
-
-    /** Launches a manual ripple at the specified position. */
-    launch(pageX: number, pageY: number, config: CoRippleConfig = this.rippleConfig): CoRippleRef {
-        return this._rippleRenderer.fadeInRipple(pageX, pageY, config);
-    }
-
-    /** Fades out all currently showing ripple elements. */
-    fadeOutAll(): void {
-        this._rippleRenderer.fadeOutAll();
-    }
-
-    /** Ripple configuration from the directive's input values. */
-    get rippleConfig(): CoRippleConfig {
-        return {
-            centered: this.centered,
-            speedFactor: this.speedFactor * (this._globalOptions.baseSpeedFactor || 1),
-            radius: this.radius,
-            color: this.color
-        };
-    }
-}

package/projects/corecomponents/src/lib/directives/ripple/ripple.module.ts

@@ -1,24 +0,0 @@
-// NOTE: Copied from iOneJS and adapted to CoreComponents on 9-may-2018.
-
-import {NgModule} from "@angular/core";
-
-import {CoViewportRulerService} from "./viewport-ruler.service";
-import {CoRippleDirective} from "./ripple.directive";
-import {CoScrollableDirective} from "./scrollable.directive";
-import {CoScrollDispatcherService} from "./scroll-dispatcher.service";
-
-@NgModule({
-    declarations: [
-        CoRippleDirective,
-        CoScrollableDirective
-    ],
-    providers: [
-        CoScrollDispatcherService,
-        CoViewportRulerService
-    ],
-    exports: [
-        CoRippleDirective
-    ]
-})
-export class RippleModule {
-}

package/projects/corecomponents/src/lib/directives/ripple/scroll-dispatcher.service.ts

@@ -1,129 +0,0 @@
-// NOTE: Copied and adapted to iOneJS from https://github.com/angular/material2/blob/master/src/lib/core on 14-march-2017.
-import { ElementRef, Injectable, Optional, SkipSelf } from '@angular/core';
-import { fromEvent, merge, Observable, Subject, Subscription } from 'rxjs';
-
-import { CoScrollableDirective } from './scrollable.directive';
-import { auditTime } from 'rxjs/operators';
-
-/** Time in ms to throttle the scrolling events by default. */
-export const DEFAULT_SCROLL_TIME = 20;
-
-/**
- * Service contained all registered Scrollable references and emits an event when any one of the
- * Scrollable references emit a scrolled event.
- */
-@Injectable()
-export class CoScrollDispatcherService {
-    /** Subject for notifying that a registered scrollable reference element has been scrolled. */
-    _scrolled: Subject<void> = new Subject<void>();
-
-    /** Keeps track of the global `scroll` and `resize` subscriptions. */
-    _globalSubscription: Subscription = null;
-
-    /** Keeps track of the amount of subscriptions to `scrolled`. Used for cleaning up afterwards. */
-    private _scrolledCount = 0;
-
-    /**
-     * Map of all the scrollable references that are registered with the service and their
-     * scroll event subscriptions.
-     */
-    scrollableReferences: Map<CoScrollableDirective, Subscription> = new Map();
-
-    /**
-     * Registers a Scrollable with the service and listens for its scrolled events. When the
-     * scrollable is scrolled, the service emits the event in its scrolled observable.
-     * @param scrollable Scrollable instance to be registered.
-     */
-    register(scrollable: CoScrollableDirective): void {
-        const scrollSubscription = scrollable.elementScrolled().subscribe(() => this._notify());
-
-        this.scrollableReferences.set(scrollable, scrollSubscription);
-    }
-
-    /**
-     * Deregisters a Scrollable reference and unsubscribes from its scroll event observable.
-     * @param scrollable Scrollable instance to be deregistered.
-     */
-    deregister(scrollable: CoScrollableDirective): void {
-        if (this.scrollableReferences.has(scrollable)) {
-            this.scrollableReferences.get(scrollable).unsubscribe();
-            this.scrollableReferences.delete(scrollable);
-        }
-    }
-
-    /**
-     * Subscribes to an observable that emits an event whenever any of the registered Scrollable
-     * references (or window, document, or body) fire a scrolled event. Can provide a time in ms
-     * to override the default "throttle" time.
-     */
-    scrolled(auditTimeInMs: number = DEFAULT_SCROLL_TIME, callback: () => any): Subscription {
-        // In the case of a 0ms delay, use an observable without auditTime
-        // since it does add a perceptible delay in processing overhead.
-        let observable: any = auditTimeInMs > 0 ?
-            auditTime(auditTimeInMs) :
-            this._scrolled.asObservable();
-
-        this._scrolledCount++;
-
-        if (!this._globalSubscription) {
-            this._globalSubscription = merge(
-                fromEvent(window.document, 'scroll'),
-                fromEvent(window, 'resize')
-            ).subscribe(() => this._notify());
-        }
-
-        // Note that we need to do the subscribing from here, in order to be able to remove
-        // the global event listeners once there are no more subscriptions.
-        return observable.subscribe(callback).add(() => {
-            this._scrolledCount--;
-
-            if (this._globalSubscription && !this.scrollableReferences.size && !this._scrolledCount) {
-                this._globalSubscription.unsubscribe();
-                this._globalSubscription = null;
-            }
-        });
-    }
-
-    /** Returns all registered Scrollables that contain the provided element. */
-    getScrollContainers(elementRef: ElementRef): CoScrollableDirective[] {
-        const scrollingContainers: CoScrollableDirective[] = [];
-
-        this.scrollableReferences.forEach((subscription: Subscription, scrollable: CoScrollableDirective) => {
-            if (this.scrollableContainsElement(scrollable, elementRef)) {
-                scrollingContainers.push(scrollable);
-            }
-        });
-
-        return scrollingContainers;
-    }
-
-    /** Returns true if the element is contained within the provided Scrollable. */
-    scrollableContainsElement(scrollable: CoScrollableDirective, elementRef: ElementRef): boolean {
-        let element = elementRef.nativeElement;
-        let scrollableElement = scrollable.getElementRef().nativeElement;
-
-        // Traverse through the element parents until we reach null, checking if any of the elements
-        // are the scrollable's element.
-        do {
-            if (element == scrollableElement) {
-                return true;
-            }
-        } while (element = element.parentElement);
-    }
-
-    /** Sends a notification that a scroll event has been fired. */
-    _notify() {
-        this._scrolled.next();
-    }
-}
-
-export function SCROLL_DISPATCHER_PROVIDER_FACTORY(parentDispatcher: CoScrollDispatcherService) {
-    return parentDispatcher || new CoScrollDispatcherService();
-}
-
-export const SCROLL_DISPATCHER_PROVIDER = {
-    // If there is already a ScrollDispatcher available, use that. Otherwise, provide a new one.
-    provide: CoScrollDispatcherService,
-    deps: [[new Optional(), new SkipSelf(), CoScrollDispatcherService]],
-    useFactory: SCROLL_DISPATCHER_PROVIDER_FACTORY
-};

package/projects/corecomponents/src/lib/directives/ripple/scrollable.directive.ts

@@ -1,37 +0,0 @@
-// NOTE: Copied and adapted to TwoDSelector from iOneJS on 9-may-2018.
-import { Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
-
-import { CoScrollDispatcherService } from './scroll-dispatcher.service';
-import { fromEvent, Observable } from 'rxjs';
-
-/**
- * Sends an event when the directive's element is scrolled. Registers itself with the
- * ScrollDispatcher service to include itself as part of its collection of scrolling events that it
- * can be listened to through the service.
- */
-@Directive({
-    selector: '[cdk-scrollable]'
-})
-export class CoScrollableDirective implements OnInit, OnDestroy {
-    constructor(private _elementRef: ElementRef, private _scroll: CoScrollDispatcherService) {
-    }
-
-    ngOnInit(): void {
-        this._scroll.register(this);
-    }
-
-    ngOnDestroy(): void {
-        this._scroll.deregister(this);
-    }
-
-    /**
-     * Returns observable that emits when a scroll event is fired on the host element.
-     */
-    elementScrolled(): Observable<any> {
-        return fromEvent(this._elementRef.nativeElement, 'scroll');
-    }
-
-    getElementRef(): ElementRef {
-        return this._elementRef;
-    }
-}

package/projects/corecomponents/src/lib/directives/ripple/viewport-ruler.service.ts

@@ -1,84 +0,0 @@
-// NOTE: Copied and adapted to TwoDSelector from iOneJS on 9-may-2018.
-import {Injectable, Optional, SkipSelf} from '@angular/core';
-
-import {CoScrollDispatcherService} from "./scroll-dispatcher.service";
-
-/**
- * Simple utility for getting the bounds of the browser viewport.
- * @docs-private
- */
-@Injectable()
-export class CoViewportRulerService {
-
-    /** Cached document client rectangle. */
-    private _documentRect?: ClientRect;
-
-    constructor(scrollDispatcher: CoScrollDispatcherService) {
-        // Initially cache the document rectangle.
-        this._cacheViewportGeometry();
-
-        // Subscribe to scroll and resize events and update the document rectangle on changes.
-        scrollDispatcher.scrolled(null, () => this._cacheViewportGeometry());
-    }
-
-    /** Gets a ClientRect for the viewport's bounds. */
-    getViewportRect(documentRect = this._documentRect): ClientRect {
-        // Use the document element's bounding rect rather than the window scroll properties
-        // (e.g. pageYOffset, scrollY) due to in issue in Chrome and IE where window scroll
-        // properties and client coordinates (boundingClientRect, clientX/Y, etc.) are in different
-        // conceptual viewports. Under most circumstances these viewports are equivalent, but they
-        // can disagree when the page is pinch-zoomed (on devices that support touch).
-        // See https://bugs.chromium.org/p/chromium/issues/detail?id=489206#c4
-        // We use the documentElement instead of the body because, by default (without a css reset)
-        // browsers typically give the document body an 8px margin, which is not included in
-        // getBoundingClientRect().
-        const scrollPosition = this.getViewportScrollPosition(documentRect);
-        const height = window.innerHeight;
-        const width = window.innerWidth;
-
-        return {
-            top: scrollPosition.top,
-            left: scrollPosition.left,
-            bottom: scrollPosition.top + height,
-            right: scrollPosition.left + width,
-            height,
-            width,
-        };
-    }
-
-
-    /**
-     * Gets the (top, left) scroll position of the viewport.
-     * @param documentRect
-     */
-    getViewportScrollPosition(documentRect = this._documentRect) {
-        // The top-left-corner of the viewport is determined by the scroll position of the document
-        // body, normally just (scrollLeft, scrollTop). However, Chrome and Firefox disagree about
-        // whether `document.body` or `document.documentElement` is the scrolled element, so reading
-        // `scrollTop` and `scrollLeft` is inconsistent. However, using the bounding rect of
-        // `document.documentElement` works consistently, where the `top` and `left` values will
-        // equal negative the scroll position.
-        const top = -documentRect.top || document.body.scrollTop || window.scrollY || 0;
-        const left = -documentRect.left || document.body.scrollLeft || window.scrollX || 0;
-
-        return {top, left};
-    }
-
-    /** Caches the latest client rectangle of the document element. */
-    _cacheViewportGeometry() {
-        this._documentRect = document.documentElement.getBoundingClientRect();
-    }
-
-}
-
-export function VIEWPORT_RULER_PROVIDER_FACTORY(parentRuler: CoViewportRulerService,
-    scrollDispatcher: CoScrollDispatcherService) {
-    return parentRuler || new CoViewportRulerService(scrollDispatcher);
-}
-
-export const VIEWPORT_RULER_PROVIDER = {
-    // If there is already a ViewportRuler available, use that. Otherwise, provide a new one.
-    provide: CoViewportRulerService,
-    deps: [[new Optional(), new SkipSelf(), CoViewportRulerService], CoScrollDispatcherService],
-    useFactory: VIEWPORT_RULER_PROVIDER_FACTORY
-};