ngx-edu-sharing-ui 0.7.0 → 9.0.1

package/src/lib/directives/drag-nodes/nodes-drag.directive.ts

@@ -1,43 +0,0 @@
-import { CdkDrag } from '@angular/cdk/drag-drop';
-import { Directive } from '@angular/core';
-import { Node } from 'ngx-edu-sharing-api';
-import { NodesDragDropService } from '../../services/nodes-drag-drop.service';
-
-/**
- * A draggable node.
- *
- * Use in combination with `cdkDrag`, setting `cdkDragData` to the array of nodes to be dragged.
- */
-@Directive({
-    selector: '[esNodesDrag]',
-})
-export class NodesDragDirective {
-    constructor(private cdkDrag: CdkDrag<Node[]>, private nodesDragDrop: NodesDragDropService) {
-        this.cdkDrag.started.subscribe((event) => {
-            this.nodesDragDrop.draggedNodes = event.source.data;
-            // Position the preview element (the one being dragged around) next to the cursor to
-            // avoid covering possible drop targets with the preview.
-            event.source._dragRef['_pickupPositionInElement'] = { x: 0, y: 0 };
-        });
-        this.cdkDrag.released.subscribe(() => {
-            if (this.nodesDragDrop.canDrop?.accept) {
-                this.inhibitPreviewAnimation();
-            }
-        });
-        this.cdkDrag.dropped.subscribe(() => {
-            this.nodesDragDrop.onDropped(this.cdkDrag.data);
-            this.nodesDragDrop.draggedNodes = null;
-        });
-    }
-
-    private inhibitPreviewAnimation() {
-        const style = document.createElement('style');
-        document.body.appendChild(style);
-        style.innerHTML = `.cdk-drag-preview { transition: none !important; }`;
-        // Don't need to go outside ng zone because `cdkDrag.released` already runs outside the
-        // zone.
-        setTimeout(() => {
-            document.body.removeChild(style);
-        });
-    }
-}

package/src/lib/directives/drag-nodes/nodes-drop-target.directive.ts

@@ -1,116 +0,0 @@
-import {
-    Directive,
-    ElementRef,
-    EventEmitter,
-    Input,
-    NgZone,
-    OnDestroy,
-    Output,
-} from '@angular/core';
-import { BehaviorSubject, Observable, Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { CanDrop, DragData, DropTargetState } from '../../types/drag-drop';
-import { NodesDragDropService } from '../../services/nodes-drag-drop.service';
-
-const ACTIVE_DROP_TARGET_ACCEPT_CLASS = 'es-nodes-active-drop-target-accept';
-const ACTIVE_DROP_TARGET_DENY_CLASS = 'es-nodes-active-drop-target-deny';
-
-@Directive({
-    selector: '[esNodesDropTarget]',
-    exportAs: 'esNodesDropTarget',
-})
-export class NodesDropTargetDirective<T = unknown> implements OnDestroy {
-    @Input('esNodesDropTarget') target: T;
-    @Input() canDropNodes: (dragData: DragData<T>) => CanDrop;
-    @Output() nodeDropped = new EventEmitter<DragData<T>>();
-
-    get active() {
-        return this.activeDropTargetSubject.value;
-    }
-
-    private activeDropTargetSubject = new BehaviorSubject<DropTargetState | null>(null);
-    private destroyed = new Subject<void>();
-
-    constructor(
-        private ngZone: NgZone,
-        private elementRef: ElementRef<HTMLElement>,
-        private nodesDragDrop: NodesDragDropService,
-    ) {
-        this.registerMouseEnterLeave();
-        this.registerActiveDropTarget();
-    }
-
-    ngOnDestroy(): void {
-        this.destroyed.next();
-        this.destroyed.complete();
-    }
-
-    _setActiveDropTarget(value: DropTargetState | null) {
-        this.activeDropTargetSubject.next(value);
-    }
-
-    private registerMouseEnterLeave() {
-        this.ngZone.runOutsideAngular(() => {
-            this.elementRef.nativeElement.addEventListener('mouseenter', () =>
-                this.nodesDragDrop.onMouseEnter(this),
-            );
-            this.elementRef.nativeElement.addEventListener('mouseleave', () =>
-                this.nodesDragDrop.onMouseLeave(this),
-            );
-            // Firefox does not fire a mouseleave event when the element is removed from the DOM
-            // while being hovered. When an element is dragged, it will be replaced with a
-            // placeholder. If the element was also a drop target, we would think that we are still
-            // hovering the element.
-            observeRemovedFromParent(this.elementRef.nativeElement)
-                .pipe(takeUntil(this.destroyed))
-                .subscribe(() => this.nodesDragDrop.onMouseLeave(this));
-        });
-    }
-
-    private registerActiveDropTarget() {
-        this.activeDropTargetSubject
-            .pipe(takeUntil(this.destroyed))
-            .subscribe((dropTargetState) => {
-                const canDrop = dropTargetState?.canDrop;
-                const classList = this.elementRef.nativeElement.classList;
-                classList.remove(ACTIVE_DROP_TARGET_ACCEPT_CLASS, ACTIVE_DROP_TARGET_DENY_CLASS);
-                if (canDrop?.accept) {
-                    classList.add(ACTIVE_DROP_TARGET_ACCEPT_CLASS);
-                } else if (canDrop?.denyExplicit) {
-                    classList.add(ACTIVE_DROP_TARGET_DENY_CLASS);
-                }
-            });
-    }
-}
-
-function observeRemovedFromParent(element: HTMLElement): Observable<void> {
-    return new Observable((subscriber) => {
-        const observer = new MutationObserver((event) => {
-            for (const mutation of event) {
-                // @ts-ignore
-                if ([...mutation.removedNodes].includes(element)) {
-                    subscriber.next();
-                }
-            }
-        });
-        // Wait for `element` to be attached to the DOM.
-        let timeout = setTimeout(() => {
-            timeout = null;
-            observer.observe(element.parentNode, { childList: true, subtree: false });
-        });
-        return () => {
-            // In case the element was destroyed before we attached the mutation observer, we cancel
-            // the observable returned by this function and don't attach the mutation observer.
-            if (timeout !== null) {
-                // TODO: Investigate elements that trigger the following warning.
-                //
-                // console.warn(
-                //     'Possible performance leak: the element got destroyed before it could be added to the DOM.',
-                //     element,
-                // );
-                clearTimeout(timeout);
-            }
-            observer.disconnect();
-        };
-    });
-}

package/src/lib/directives/focus-state.directive.ts

@@ -1,34 +0,0 @@
-import { Directive, HostListener } from '@angular/core';
-
-@Directive({
-    selector: '[esFocusState]',
-    exportAs: 'esFocusState',
-})
-export class FocusStateDirective {
-    /** Either the element or one of its descendants has focus. */
-    hasFocus = false;
-    /** The element is being hovered with the cursor. */
-    hovering = false;
-
-    constructor() {}
-
-    @HostListener('focusin')
-    onFocusIn() {
-        this.hasFocus = true;
-    }
-
-    @HostListener('focusout')
-    onFocusOut() {
-        this.hasFocus = false;
-    }
-
-    @HostListener('mouseenter')
-    onMouseOver() {
-        this.hovering = true;
-    }
-
-    @HostListener('mouseleave')
-    onMouseOut() {
-        this.hovering = false;
-    }
-}

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

@@ -1,142 +0,0 @@
-/**
- * Created by Torsten on 13.01.2017.
- */
-
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { Directive, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { ConfigService } from 'ngx-edu-sharing-api';
-import { take } from 'rxjs/operators';
-
-/**
- * Replaces the element's content with an icon.
- *
- * Example: `<i esIcon="save"></i>`
- *
- * Optionally, a translated `aria-label` can be attached by setting `aria` to a truthy value: `<i
- * esIcon="save" aria="true"></i>`. Otherwise, `aria-hidden` will be set.
- *
- * For backwards compatibility, the directive is also activated on elements that set
- * `class="material-icons"`. This is mainly to set the `aria-hidden` attribute. Occurrences should
- * be updated to the syntax above.
- */
-@Directive({
-    selector: 'i[esIcon], i.material-icons',
-})
-export class IconDirective implements OnInit, OnDestroy {
-    private _id: string;
-    private _aria: boolean;
-    private iconsConfig: Array<{ original: string; replace?: string; cssClass?: string }>;
-    private altTextSpan: HTMLElement;
-    private isReady = false;
-
-    /**
-     * An alt text to show to screen readers.
-     *
-     * If omitted, the icon will be invisible to screen readers.
-     *
-     * @see https://material.angular.io/components/icon/overview#indicator-icons
-     */
-    @Input() set altText(altText: string) {
-        this.setAltText(altText);
-    }
-
-    /** If true, an alt text (see above) will be set based on the icon. */
-    @Input() set aria(aria: boolean) {
-        aria = coerceBooleanProperty(aria);
-        if (aria !== this._aria) {
-            this._aria = aria;
-            if (this.isReady) {
-                this.updateAria();
-            }
-        }
-    }
-
-    @Input() set esIcon(id: string) {
-        this.setIcon(id);
-    }
-
-    constructor(
-        private element: ElementRef<HTMLElement>,
-        private translate: TranslateService,
-        private config: ConfigService,
-    ) {}
-
-    async ngOnInit() {
-        this.isReady = true;
-        this.element.nativeElement.setAttribute('aria-hidden', 'true');
-        this.updateAria();
-
-        // FIXME: This might resolve after `setIcon` was called and mappings might be ignored.
-        await this.config.observeConfig().pipe(take(1)).toPromise();
-        this.iconsConfig = this.config.instant('icons', null);
-    }
-
-    ngOnDestroy(): void {
-        if (this.altTextSpan) {
-            this.altTextSpan.remove();
-        }
-    }
-
-    private setIcon(id: string) {
-        if (this._id) {
-            this.element.nativeElement.classList.remove(
-                'edu-icons',
-                'custom-icons',
-                'material-icons',
-            );
-        }
-        let customClass: string = null;
-        const mapping = this.iconsConfig?.filter((i) => i.original === id);
-        if (mapping?.length === 1) {
-            id = mapping[0].replace || '';
-            customClass = mapping[0].cssClass;
-        }
-        this._id = id;
-        if (this._aria) {
-            this.updateAria();
-        }
-        let cssClass: string;
-        if (id?.startsWith('edu-') && !customClass) {
-            cssClass = 'edu-icons';
-            id = id.substr(4);
-        } else if (id?.startsWith('custom-') || customClass) {
-            cssClass = 'custom-icons';
-            id = id.substr(7);
-        } else {
-            cssClass = 'material-icons';
-        }
-        this.element.nativeElement.classList.add(cssClass);
-        if (customClass) {
-            this.element.nativeElement.classList.add(customClass);
-        }
-        this.element.nativeElement.innerText = id;
-    }
-
-    private updateAria() {
-        if (this._aria !== undefined) {
-            if (this._aria && this._id) {
-                this.translate.get('ICON_LABELS.' + this._id).subscribe((lang) => {
-                    this.setAltText(lang);
-                });
-            } else {
-                this.setAltText(null);
-            }
-        }
-    }
-
-    private setAltText(altText: string): void {
-        if (altText && !this.altTextSpan) {
-            this.insertAltTextSpan();
-        }
-        if (this.altTextSpan) {
-            this.altTextSpan.innerText = altText;
-        }
-    }
-
-    private insertAltTextSpan(): void {
-        this.altTextSpan = document.createElement('span');
-        this.altTextSpan.classList.add('cdk-visually-hidden');
-        this.element.nativeElement.insertAdjacentElement('afterend', this.altTextSpan);
-    }
-}

package/src/lib/directives/nodes-drop-target-legacy.directive.ts

@@ -1,155 +0,0 @@
-import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
-import {
-    DragDataLegacy,
-    dragNodesTransferType,
-    DropActionLegacy,
-    readDraggedNodes,
-} from './drag-nodes/drag-nodes';
-
-/**
- * Handle dragging and dropping of nodes onto an element.
- *
- * Use in combination with `NodesDragSourceDirective`.
- *
- * When an element that sets `NodesDragSourceDirective` is dragged onto an
- * element that sets this directive, drag events are passed as output events.
- * Some of these output events provide data about the dragged nodes. Passed
- * events are filtered to not trigger unnecessarily.
- */
-@Directive({
-    selector: '[esLegacyNodesDropTarget]',
-})
-export class NodesDropTargetLegacyDirective {
-    /**
-     * The last node that some (other) node(s) were dragged over.
-     *
-     * One of two mechanisms to determine if we entered the element, i.e., if
-     * the cursor -- while dragging node(s) -- is moved from outside onto this
-     * node.
-     *
-     * If the cursor was over another node before, we know it just entered this
-     * one.
-     *
-     * This fails when the cursor is moved from this node to a place other than
-     * a node and back again.
-     */
-    private static last: NodesDropTargetLegacyDirective;
-
-    /**
-     * A function to determine whether this element is a valid drop target for
-     * the dragged nodes.
-     *
-     * Output events are *only* fired, when this function evaluates to `true`.
-     */
-    @Input('esLegacyNodesDropTarget') canDrop: boolean | ((dragData: DragDataLegacy) => boolean);
-    @Input() nodesDragAllowedActions: DropActionLegacy[] = ['move', 'copy'];
-
-    @Output() nodesDragEnter = new EventEmitter<DragEvent>();
-    @Output() nodesDragLeave = new EventEmitter<DragEvent>();
-    /**
-     * Indicates whether the cursor is hovering over the element, holding one or more nodes.
-     */
-    @Output() nodesHoveringChange = new EventEmitter<boolean>();
-    /**
-     * Triggered when one or more nodes are dropped onto the element.
-     */
-    @Output() nodesDrop = new EventEmitter<DragDataLegacy>();
-
-    /**
-     * Difference of enter- and leave events.
-     *
-     * One of two mechanisms to determine if we entered the element, i.e., if
-     * the cursor -- while dragging node(s) -- is moved from outside onto this
-     * node.
-     *
-     * If we enter this node a second time without having left it once, we
-     * probably just stayed on it.
-     *
-     * This fails when a leave event fails to fire, e.g., when the DOM element
-     * was repositioned while the curser was dragged over it.
-     */
-    private enterCount = 0;
-    private canDropCurrent: boolean;
-    private dropAction: DropActionLegacy;
-
-    constructor() {}
-
-    @HostListener('dragenter', ['$event']) onDragEnter(event: DragEvent) {
-        if (!event.dataTransfer.types.includes(dragNodesTransferType)) {
-            return;
-        }
-        if (this.enterCount === 0 || NodesDropTargetLegacyDirective.last !== this) {
-            NodesDropTargetLegacyDirective.last = this;
-            this.enterCount = 0;
-            this.canDropCurrent = this.getCanDrop(event);
-            if (this.canDropCurrent) {
-                this.nodesHoveringChange.emit(true);
-                this.nodesDragEnter.emit(event);
-            }
-        }
-        if (this.canDropCurrent) {
-            event.preventDefault();
-        }
-        this.enterCount++;
-    }
-
-    @HostListener('dragleave', ['$event']) onDragLeave(event: DragEvent) {
-        if (!event.dataTransfer.types.includes(dragNodesTransferType)) {
-            return;
-        }
-        this.enterCount--;
-        if (this.canDropCurrent) {
-            if (this.enterCount === 0) {
-                this.nodesDragLeave.emit(event);
-                this.nodesHoveringChange.emit(false);
-            }
-        }
-    }
-
-    @HostListener('dragover', ['$event']) onDragOver(event: DragEvent) {
-        if (!event.dataTransfer.types.includes(dragNodesTransferType)) {
-            return;
-        }
-        if (this.canDropCurrent) {
-            event.preventDefault();
-            this.dropAction = this.getDropAction(event);
-            event.dataTransfer.dropEffect = this.dropAction;
-        }
-    }
-
-    @HostListener('drop', ['$event']) onDrop(event: DragEvent) {
-        if (!event.dataTransfer.types.includes(dragNodesTransferType)) {
-            return;
-        }
-        if (this.canDropCurrent) {
-            event.preventDefault();
-            const nodes = readDraggedNodes();
-            this.nodesDrop.emit({
-                event,
-                nodes,
-                dropAction: this.getDropAction(event),
-            });
-            this.nodesHoveringChange.emit(false);
-        }
-        this.enterCount = 0;
-        NodesDropTargetLegacyDirective.last = null;
-    }
-
-    private getCanDrop(event: DragEvent): boolean {
-        if (typeof this.canDrop === 'function') {
-            const nodes = readDraggedNodes();
-            return this.canDrop({ event, nodes, dropAction: this.getDropAction(event) });
-        }
-        return this.canDrop;
-    }
-
-    private getDropAction(event: DragEvent): DropActionLegacy {
-        if (this.nodesDragAllowedActions.includes('copy') && event.ctrlKey) {
-            return 'copy';
-        } else if (this.nodesDragAllowedActions.includes('link') && event.altKey) {
-            return 'link';
-        } else {
-            return 'move';
-        }
-    }
-}

package/src/lib/dropdown/dropdown.component.html

@@ -1,32 +0,0 @@
-<mat-menu
-  #dropdown="matMenu"
-  class="mat-dropdown-menu"
-  [class]="menuClass"
-  backdropClass="mat-dropdown-menu"
-  [xPosition]="position === 'right' ? 'after' : 'before'"
->
-  <!-- MatMenu has role="menu", so the only meaningful role of descendants is "menuitem" -->
-  <ul role="none">
-    <ng-container *ngFor="let option of _options; let i = index">
-      <li *ngIf="option.isEnabled || showDisabled" role="none">
-        <button
-          mat-menu-item
-          class="mat-menu-item collection-item-{{
-            option.name | replaceChars : { search: '.', replace: '-' }
-          }}"
-          matTooltip="{{ option | optionTooltip }}"
-          matTooltipPosition="right"
-          matTooltipTouchGestures="off"
-          [class.mat-menu-item-separate]="option.isSeparate || isNewGroup(i)"
-          [class.mat-menu-item-selected]="option.isSelected"
-          [disabled]="!option.isEnabled"
-          (click)="click(option)"
-          attr.data-test="menu-item-{{ option.name }}"
-        >
-          <i [esIcon]="option.icon"></i> {{ option.name | translate }}
-        </button>
-      </li>
-    </ng-container>
-  </ul>
-</mat-menu>
-<div #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu" class="display-none"></div>

package/src/lib/dropdown/dropdown.component.scss

@@ -1,67 +0,0 @@
-@import '../../../assets/scss/mixins';
-
-// We cannot use `:host` here, since the `mat-menu` elements are rearranged
-// outside of the original container. Hence we rely on the `.mat-dropdown-menu`
-// selector to not bleed into other components.
-::ng-deep .mat-dropdown-menu {
-    .mat-mdc-menu-content {
-        min-width: 200px;
-        > ul > li > button {
-            &:not(:disabled) > span {
-                color: var(--primary);
-            }
-            display: flex;
-            align-items: center;
-            > i {
-                width: 35px;
-            }
-        }
-        &:not(:empty) {
-            padding: 0 !important;
-        }
-    }
-
-    ul {
-        margin: 0;
-        list-style: none;
-        padding-left: 0;
-        li {
-            .mat-mdc-menu-item {
-                .mat-mdc-menu-item-text {
-                    display: flex;
-                    align-items: center;
-                    i {
-                        margin-right: 10px;
-                    }
-                }
-                &:hover:not([disabled]),
-                &.cdk-focused {
-                    color: var(--itemSelectedTextColor);
-                    background-color: var(--listItemSelectedBackground);
-                }
-                &.cdk-keyboard-focused {
-                    @include setGlobalKeyboardFocus('border');
-                }
-            }
-
-            .mat-menu-item-separate {
-                border-top: 1px solid #ccc;
-            }
-
-            // Mobile menus at bottom
-            @media screen and (max-width: (calc(var(--mobileWidth) - var(--mobileStage) * 1))) {
-                &.cdk-overlay-backdrop {
-                    background: rgba(0, 0, 0, 0.8);
-                }
-                &.mat-menu-panel {
-                    position: fixed;
-                    bottom: 0;
-                    left: 0;
-                    max-width: 100%;
-                    width: 100%;
-                    border-radius: 0;
-                }
-            }
-        }
-    }
-}

package/src/lib/dropdown/dropdown.component.ts

@@ -1,71 +0,0 @@
-import { Component, Input, ViewChild } from '@angular/core';
-import { MatMenu, MatMenuContent, MatMenuTrigger } from '@angular/material/menu';
-import { OptionItem } from '../types/option-item';
-import { Helper } from '../util/helper';
-import { UIService } from '../services/ui.service';
-
-/**
- * The dropdown is one base component of the action bar (showing more actions),
- * but can also be used standalone.
- */
-@Component({
-    selector: 'es-dropdown',
-    templateUrl: 'dropdown.component.html',
-    styleUrls: ['dropdown.component.scss'],
-})
-export class DropdownComponent {
-    @ViewChild('dropdown', { static: true }) menu: MatMenu;
-    @ViewChild('menuTrigger') menuTrigger: MatMenuTrigger;
-
-    @Input() position: 'left' | 'right' = 'left';
-
-    @Input() set options(options: OptionItem[]) {
-        this._options = this.ui.filterValidOptions(Helper.deepCopyArray(options));
-    }
-
-    /**
-     * The object that should be returned via the option's callback.
-     *
-     * Can be null
-     */
-    @Input() callbackObject: any;
-
-    /**
-     * Should disabled ("greyed out") options be shown or hidden?
-     */
-    @Input() showDisabled = true;
-
-    /**
-     * An additional class to add to the `mat-menu` instance.
-     *
-     * This is needed to customize the menu styling since the menu contents are
-     * taken out of the host container by angular.
-     */
-    @Input() menuClass: string;
-
-    _options: OptionItem[];
-
-    constructor(private ui: UIService) {}
-
-    click(option: OptionItem) {
-        if (!option.isEnabled) {
-            return;
-        }
-        setTimeout(() => option.callback(this.callbackObject));
-    }
-
-    isNewGroup(i: number) {
-        if (i > 0) {
-            return this._options[i].group !== this._options[i - 1].group;
-        }
-        return false;
-    }
-
-    /** Whether there are any enabled options so we can open the menu. */
-    canShowDropdown(): boolean {
-        // We can only open the dropdown menu, when there is at least one enabled option. Even when
-        // there are options with `showDisabled: true`, showing a menu with no selectable option
-        // causes a11y issues.
-        return this._options?.some((o) => o.isEnabled);
-    }
-}