@yuuvis/client-framework 0.6.5

package/fesm2022/yuuvis-client-framework-tree.mjs

@@ -0,0 +1,307 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, inject, input, effect, Component, HostBinding, ElementRef, HostAttributeToken, output, Input, HostListener } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2 from '@yuuvis/components/icon';
+import { YvcIconModule } from '@yuuvis/components/icon';
+import { ReplaySubject, Subject } from 'rxjs';
+
+class TreeService {
+    constructor() {
+        this._selection = [];
+        this._selectionSource = new ReplaySubject();
+        this.selection$ = this._selectionSource.asObservable();
+        this._nodeClickSource = new Subject();
+        this.nodeClick$ = this._nodeClickSource.asObservable();
+        this._nodeFocusSource = new ReplaySubject();
+        this.nodeFocus$ = this._nodeFocusSource.asObservable();
+        this.multiselect = false;
+    }
+    setTree(tree) {
+        this._tree = tree;
+    }
+    focusNode(id) {
+        this._nodeFocusSource.next(id);
+    }
+    toggleNode(id) {
+        if (id) {
+            const node = this._getNodeById(id);
+            if (node)
+                node.expanded = !node.expanded;
+        }
+    }
+    selectNodeByID(id, ctrlKey = false) {
+        const node = this._getNodeById(id);
+        if (node)
+            this.selectNode(node, ctrlKey);
+    }
+    /**
+     * Select a tree node. If the node has already been selected it'll be
+     * removed from the selection. Otherwise it will be added. By default selection
+     * will only contain a single node. If `multiselect` is set to true and CTRL is
+     * pressed the current collection will be extended.
+     * @param node The tree node to be added/removed
+     * @param ctrlKey Whether or not the CTRL key has been pressed
+     * @returns The updated list of selected tree nodes
+     */
+    selectNode(node, ctrlKey = false) {
+        if (node.selectable) {
+            if (!this.multiselect || !ctrlKey) {
+                this._selection = [node];
+            }
+            else {
+                const ids = this._selection.map((n) => n.id);
+                if (ids.includes(node.id))
+                    this._selection = this._selection.filter((n) => n.id !== node.id);
+                else
+                    this._selection.push(node);
+            }
+            this._selectionSource.next(this._selection);
+        }
+        this._nodeClickSource.next(node);
+    }
+    setSelection(nodeIds) {
+        this._resolveSelectedNodes(nodeIds);
+        this._selectionSource.next(this._selection);
+    }
+    _getNodeById(id) {
+        return this._tree ? this._getChildNodeById(id, this._tree.nodes) : undefined;
+    }
+    _getChildNodeById(id, nodes) {
+        let match;
+        nodes.forEach((n) => {
+            if (n.id === id)
+                match = n;
+            if (!match && n.children)
+                match = this._getChildNodeById(id, n.children);
+        });
+        return match;
+    }
+    _resolveSelectedNodes(nodeIDs) {
+        this._selection = [];
+        if (!this._tree)
+            return;
+        this._resolveChildren(nodeIDs, this._tree.nodes);
+    }
+    _resolveChildren(nodeIDs, nodes) {
+        nodes.forEach((n) => {
+            if (nodeIDs.includes(n.id))
+                this._selection.push(n);
+            if (n.children?.length)
+                this._resolveChildren(nodeIDs, n.children);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeService, decorators: [{
+            type: Injectable
+        }] });
+
+class TreeNodeComponent {
+    constructor() {
+        this.treeService = inject(TreeService);
+        this.node = input.required();
+        this.toggleIcon = input('<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="18px"><path d="M522-480 333-669l51-51 240 240-240 240-51-51 189-189Z"/></svg>');
+        this.focused = false;
+        this.selected = false;
+        this.expanded = false;
+        this._selectedNodes = [];
+        this._subs = [];
+        this.treeSelectEffect = effect(() => {
+            this._setSelection();
+            this.expanded = !!this.node().expanded;
+        });
+    }
+    select(evt) {
+        this.treeService.selectNode(this.node(), evt.ctrlKey);
+    }
+    toggleExpanded() {
+        this.node().expanded = !this.node().expanded;
+        this.expanded = !!this.node().expanded;
+    }
+    _setSelection() {
+        if (!this.node())
+            return;
+        this.selected = this._selectedNodes.includes(this.node().id);
+    }
+    ngOnInit() {
+        this._subs.push(this.treeService.selection$.subscribe((selection) => {
+            this._selectedNodes = selection.map((n) => n.id);
+            this._setSelection();
+        }));
+        this._subs.push(this.treeService.nodeFocus$.subscribe((id) => {
+            this.focused = this.node().id === id;
+        }));
+    }
+    ngOnDestroy() {
+        this._subs.forEach((s) => s.unsubscribe());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TreeNodeComponent, isStandalone: true, selector: "yuv-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, toggleIcon: { classPropertyName: "toggleIcon", publicName: "toggleIcon", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "treeitem" }, properties: { "class.focused": "this.focused", "attr.aria-selected": "this.selected", "attr.aria-expanded": "this.expanded" } }, ngImport: i0, template: "@if (node().children?.length) {\n  <!-- toggle children button-->\n  <!-- TODO: title should be i18n -->\n  <button class=\"toggle\" (click)=\"toggleExpanded()\" title=\"toggle Expand\">\n    <yvc-icon [svg]=\"toggleIcon()\"></yvc-icon>\n  </button>\n}\n<div class=\"node-label\" [attr.node-id]=\"node().id\" [ngClass]=\"{ selectable: node().selectable }\" (click)=\"select($event)\">\n  @if (node().icon) {\n    <yvc-icon class=\"node-icon\" [svg]=\"node().icon!\"></yvc-icon>\n  }\n  <div class=\"label\">{{ node().label }}</div>\n</div>\n\n@if (node().expanded) {\n  <div class=\"children\">\n    @for (childNode of node().children; track $index) {\n      <yuv-tree-node [toggleIcon]=\"toggleIcon()\" [node]=\"childNode\"></yuv-tree-node>\n    }\n  </div>\n}\n", styles: [":host-context(:focus).focused>.node-label{background-color:var(--item-focus-background-color);outline:1px solid var(--text-color-hint);outline-offset:-3px}:host-context([selectable])[aria-selected=true]>.node-label{background-color:var(--item-selected-background-color)}:host-context([selectable])[aria-selected=true]>.node-label:hover{background-color:var(--item-selected-background-color)}:host{display:grid;grid-template-rows:auto auto;grid-template-columns:var(--toggle-icon-size) 1fr;grid-template-areas:\"toggle label\" \"child child\";align-items:center}:host .node-label{grid-area:label;display:flex;flex-flow:row nowrap;align-items:center}:host .node-label.selectable{cursor:pointer}:host .node-label:hover{background-color:var(--item-focus-background-color)}:host .node-label .label{padding:var(--node-padding);text-align:start;color:var(--text-color-body);background-color:transparent;-webkit-user-select:none;user-select:none;flex:1}:host .node-label .node-icon{color:var(--text-color-caption)}:host .children{grid-area:child;padding-inline-start:var(--node-indent)}:host[aria-expanded=true] button.toggle{rotate:90deg}:host button.toggle{grid-area:toggle;border:0;padding:2px;border-radius:50%;justify-self:center;align-self:center}:host button.toggle yvc-icon{--icon-size: var(--toggle-icon-size)}\n"], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "yuv-tree-node", inputs: ["node", "toggleIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i2.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-tree-node', standalone: true, imports: [CommonModule, YvcIconModule], host: {
+                        role: 'treeitem'
+                    }, template: "@if (node().children?.length) {\n  <!-- toggle children button-->\n  <!-- TODO: title should be i18n -->\n  <button class=\"toggle\" (click)=\"toggleExpanded()\" title=\"toggle Expand\">\n    <yvc-icon [svg]=\"toggleIcon()\"></yvc-icon>\n  </button>\n}\n<div class=\"node-label\" [attr.node-id]=\"node().id\" [ngClass]=\"{ selectable: node().selectable }\" (click)=\"select($event)\">\n  @if (node().icon) {\n    <yvc-icon class=\"node-icon\" [svg]=\"node().icon!\"></yvc-icon>\n  }\n  <div class=\"label\">{{ node().label }}</div>\n</div>\n\n@if (node().expanded) {\n  <div class=\"children\">\n    @for (childNode of node().children; track $index) {\n      <yuv-tree-node [toggleIcon]=\"toggleIcon()\" [node]=\"childNode\"></yuv-tree-node>\n    }\n  </div>\n}\n", styles: [":host-context(:focus).focused>.node-label{background-color:var(--item-focus-background-color);outline:1px solid var(--text-color-hint);outline-offset:-3px}:host-context([selectable])[aria-selected=true]>.node-label{background-color:var(--item-selected-background-color)}:host-context([selectable])[aria-selected=true]>.node-label:hover{background-color:var(--item-selected-background-color)}:host{display:grid;grid-template-rows:auto auto;grid-template-columns:var(--toggle-icon-size) 1fr;grid-template-areas:\"toggle label\" \"child child\";align-items:center}:host .node-label{grid-area:label;display:flex;flex-flow:row nowrap;align-items:center}:host .node-label.selectable{cursor:pointer}:host .node-label:hover{background-color:var(--item-focus-background-color)}:host .node-label .label{padding:var(--node-padding);text-align:start;color:var(--text-color-body);background-color:transparent;-webkit-user-select:none;user-select:none;flex:1}:host .node-label .node-icon{color:var(--text-color-caption)}:host .children{grid-area:child;padding-inline-start:var(--node-indent)}:host[aria-expanded=true] button.toggle{rotate:90deg}:host button.toggle{grid-area:toggle;border:0;padding:2px;border-radius:50%;justify-self:center;align-self:center}:host button.toggle yvc-icon{--icon-size: var(--toggle-icon-size)}\n"] }]
+        }], propDecorators: { focused: [{
+                type: HostBinding,
+                args: ['class.focused']
+            }], selected: [{
+                type: HostBinding,
+                args: ['attr.aria-selected']
+            }], expanded: [{
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }] } });
+
+/**
+ * Component rendering a tree.
+ */
+class TreeComponent {
+    set _focusedIndex(idx) {
+        this.__focusedIndex = idx;
+        this.treeService.focusNode(this.items?.item(idx).getAttribute('node-id'));
+    }
+    get _focusedIndex() {
+        return this.__focusedIndex;
+    }
+    /**
+     * IDs of nodes that should be set 'selected'.
+     */
+    set selectedNodes(nodeIds) {
+        this.treeService.setSelection(nodeIds);
+    }
+    onKeydown(event) {
+        switch (event.code) {
+            case 'ArrowDown': {
+                if ((this.items && this._focusedIndex === this.items.length - 1) || this.__focusedIndex === -1) {
+                    this._focusedIndex = 0;
+                }
+                else
+                    this._focusedIndex++;
+                break;
+            }
+            case 'ArrowUp': {
+                if (this.items && (this._focusedIndex === 0 || this.__focusedIndex === -1)) {
+                    this._focusedIndex = this.items.length - 1;
+                }
+                else
+                    this._focusedIndex--;
+                break;
+            }
+            case 'ArrowRight': {
+                this._toggle();
+                break;
+            }
+            case 'ArrowLeft': {
+                this._toggle();
+                break;
+            }
+            case 'Space': {
+                this._selectFocusedNode(event.ctrlKey);
+                break;
+            }
+            case 'Enter': {
+                this._selectFocusedNode(event.ctrlKey);
+                break;
+            }
+        }
+    }
+    constructor() {
+        this.treeService = inject(TreeService);
+        this.elRef = inject(ElementRef);
+        this._observer = new MutationObserver(() => {
+            this._getVisibleNodes();
+        });
+        /**
+         * The tree to be rendered
+         */
+        this.tree = input.required();
+        /**
+         * Whether or not multiple nodes should be selectable. Only works when selection is enableed by
+         * setting 'selectable' attribute:
+         *
+         * ```html
+         * <yuv-tree selectable [multiselect]="true"></yuv-tree
+         * ```
+         */
+        this.multiselect = input(false);
+        /**
+         * Host attribute to enable persistent selection of nodes.
+         */
+        this.selectable = inject(new HostAttributeToken('selectable'), { optional: true });
+        this.__focusedIndex = -1;
+        /**
+         * Emitted when selection changes
+         */
+        this.selectionChange = output();
+        this.tabindex = '0';
+        this.setTreeEffect = effect(() => {
+            this.treeService.setTree(this.tree());
+            // if (this.tree()) this.selectedNodes = [];
+        });
+        this.setTreeMultiselectEffect = effect(() => (this.treeService.multiselect = this.multiselect()));
+        this.treeService.nodeClick$.pipe(takeUntilDestroyed()).subscribe((node) => {
+            const idx = Array.from(this.items || []).findIndex((i) => i.getAttribute('node-id') === node.id);
+            if (idx !== -1)
+                this._focusedIndex = idx;
+        });
+        this.treeService.selection$.pipe(takeUntilDestroyed()).subscribe((selection) => {
+            this.selectionChange.emit(selection);
+        });
+    }
+    _toggle() {
+        this.treeService.toggleNode(this._getFocusedNodeId());
+    }
+    _selectFocusedNode(ctrlKey = false) {
+        const fid = this._getFocusedNodeId();
+        if (fid)
+            this.treeService.selectNodeByID(fid, ctrlKey);
+    }
+    _getFocusedNodeId() {
+        return Array.from(this.items || [])[this.__focusedIndex].getAttribute('node-id');
+    }
+    _getVisibleNodes() {
+        this.items = this.elRef.nativeElement.querySelectorAll('.node-label');
+    }
+    ngAfterViewInit() {
+        this._getVisibleNodes();
+        this._observer.observe(this.elRef.nativeElement, {
+            childList: true,
+            subtree: true
+        });
+    }
+    ngOnDestroy() {
+        this._observer.disconnect();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TreeComponent, isStandalone: true, selector: "yuv-tree", inputs: { tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: true, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, selectedNodes: { classPropertyName: "selectedNodes", publicName: "selectedNodes", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { attributes: { "role": "tree" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "class.selectable": "this.selectable", "attr.tabindex": "this.tabindex" }, classAttribute: "yuv-tree" }, providers: [TreeService], ngImport: i0, template: "@for (node of tree().nodes; track node.id) {\n  <yuv-tree-node [node]=\"node\"></yuv-tree-node>\n}\n", styles: [":host{--toggle-icon-size: 18px;--node-padding: calc(var(--app-pane-padding) / 2);--node-indent: var(--toggle-icon-size)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TreeNodeComponent, selector: "yuv-tree-node", inputs: ["node", "toggleIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-tree', standalone: true, imports: [CommonModule, TreeNodeComponent], providers: [TreeService], host: {
+                        class: 'yuv-tree',
+                        role: 'tree'
+                    }, template: "@for (node of tree().nodes; track node.id) {\n  <yuv-tree-node [node]=\"node\"></yuv-tree-node>\n}\n", styles: [":host{--toggle-icon-size: 18px;--node-padding: calc(var(--app-pane-padding) / 2);--node-indent: var(--toggle-icon-size)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { selectable: [{
+                type: HostBinding,
+                args: ['class.selectable']
+            }], selectedNodes: [{
+                type: Input
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TreeComponent };
+//# sourceMappingURL=yuuvis-client-framework-tree.mjs.map

package/fesm2022/yuuvis-client-framework-tree.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"yuuvis-client-framework-tree.mjs","sources":["../../../../../libs/yuuvis/client-framework/tree/src/lib/tree.service.ts","../../../../../libs/yuuvis/client-framework/tree/src/lib/tree-node/tree-node.component.ts","../../../../../libs/yuuvis/client-framework/tree/src/lib/tree-node/tree-node.component.html","../../../../../libs/yuuvis/client-framework/tree/src/lib/tree.component.ts","../../../../../libs/yuuvis/client-framework/tree/src/lib/tree.component.html","../../../../../libs/yuuvis/client-framework/tree/src/yuuvis-client-framework-tree.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { Observable, ReplaySubject, Subject } from 'rxjs';\nimport { Tree, TreeNode } from './tree.interface';\n\n@Injectable()\nexport class TreeService {\n  private _tree?: Tree;\n  private _selection: TreeNode[] = [];\n  private _selectionSource = new ReplaySubject<TreeNode[]>();\n  selection$: Observable<TreeNode[]> = this._selectionSource.asObservable();\n\n  private _nodeClickSource = new Subject<TreeNode>();\n  nodeClick$: Observable<TreeNode> = this._nodeClickSource.asObservable();\n\n  private _nodeFocusSource = new ReplaySubject<string | null | undefined>();\n  nodeFocus$: Observable<string | null | undefined> = this._nodeFocusSource.asObservable();\n\n  multiselect = false;\n\n  setTree(tree: Tree) {\n    this._tree = tree;\n  }\n\n  focusNode(id: string | null | undefined) {\n    this._nodeFocusSource.next(id);\n  }\n\n  toggleNode(id: string | null) {\n    if (id) {\n      const node = this._getNodeById(id);\n      if (node) node.expanded = !node.expanded;\n    }\n  }\n\n  selectNodeByID(id: string, ctrlKey = false) {\n    const node = this._getNodeById(id);\n    if (node) this.selectNode(node, ctrlKey);\n  }\n\n  /**\n   * Select a tree node. If the node has already been selected it'll be\n   * removed from the selection. Otherwise it will be added. By default selection\n   * will only contain a single node. If `multiselect` is set to true and CTRL is\n   * pressed the current collection will be extended.\n   * @param node The tree node to be added/removed\n   * @param ctrlKey Whether or not the CTRL key has been pressed\n   * @returns The updated list of selected tree nodes\n   */\n  selectNode(node: TreeNode, ctrlKey = false): void {\n    if (node.selectable) {\n      if (!this.multiselect || !ctrlKey) {\n        this._selection = [node];\n      } else {\n        const ids = this._selection.map((n) => n.id);\n        if (ids.includes(node.id)) this._selection = this._selection.filter((n) => n.id !== node.id);\n        else this._selection.push(node);\n      }\n      this._selectionSource.next(this._selection);\n    }\n    this._nodeClickSource.next(node);\n  }\n\n  setSelection(nodeIds: string[]) {\n    this._resolveSelectedNodes(nodeIds);\n    this._selectionSource.next(this._selection);\n  }\n\n  private _getNodeById(id: string): TreeNode | undefined {\n    return this._tree ? this._getChildNodeById(id, this._tree.nodes) : undefined;\n  }\n  private _getChildNodeById(id: string, nodes: TreeNode[]): TreeNode | undefined {\n    let match: TreeNode | undefined;\n    nodes.forEach((n) => {\n      if (n.id === id) match = n;\n      if (!match && n.children) match = this._getChildNodeById(id, n.children);\n    });\n    return match;\n  }\n\n  private _resolveSelectedNodes(nodeIDs: string[]): void {\n    this._selection = [];\n    if (!this._tree) return;\n    this._resolveChildren(nodeIDs, this._tree.nodes);\n  }\n\n  private _resolveChildren(nodeIDs: string[], nodes: TreeNode[]): void {\n    nodes.forEach((n) => {\n      if (nodeIDs.includes(n.id)) this._selection.push(n);\n      if (n.children?.length) this._resolveChildren(nodeIDs, n.children);\n    });\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { Component, HostBinding, OnDestroy, OnInit, effect, inject, input } from '@angular/core';\nimport { YvcIconModule } from '@yuuvis/components/icon';\nimport { Subscription } from 'rxjs';\nimport { TreeNode } from '../tree.interface';\nimport { TreeService } from '../tree.service';\n\n@Component({\n  selector: 'yuv-tree-node',\n  standalone: true,\n  imports: [CommonModule, YvcIconModule],\n  templateUrl: './tree-node.component.html',\n  styleUrl: './tree-node.component.scss',\n  host: {\n    role: 'treeitem'\n  }\n})\nexport class TreeNodeComponent implements OnInit, OnDestroy {\n  private treeService = inject(TreeService);\n\n  node = input.required<TreeNode>();\n  toggleIcon = input<string>(\n    '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"18px\" viewBox=\"0 -960 960 960\" width=\"18px\"><path d=\"M522-480 333-669l51-51 240 240-240 240-51-51 189-189Z\"/></svg>'\n  );\n  @HostBinding('class.focused') focused = false;\n  @HostBinding('attr.aria-selected') selected = false;\n  @HostBinding('attr.aria-expanded') expanded = false;\n\n  private _selectedNodes: string[] = [];\n  private _subs: Subscription[] = [];\n\n  treeSelectEffect = effect(() => {\n    this._setSelection();\n    this.expanded = !!this.node().expanded;\n  });\n\n  select(evt: MouseEvent | KeyboardEvent) {\n    this.treeService.selectNode(this.node(), evt.ctrlKey);\n  }\n\n  toggleExpanded() {\n    this.node().expanded = !this.node().expanded;\n    this.expanded = !!this.node().expanded;\n  }\n\n  private _setSelection() {\n    if (!this.node()) return;\n    this.selected = this._selectedNodes.includes(this.node().id);\n  }\n\n  ngOnInit(): void {\n    this._subs.push(\n      this.treeService.selection$.subscribe((selection: TreeNode[]) => {\n        this._selectedNodes = selection.map((n) => n.id);\n        this._setSelection();\n      })\n    );\n    this._subs.push(\n      this.treeService.nodeFocus$.subscribe((id: string | null | undefined) => {\n        this.focused = this.node().id === id;\n      })\n    );\n  }\n\n  ngOnDestroy(): void {\n    this._subs.forEach((s) => s.unsubscribe());\n  }\n}\n","@if (node().children?.length) {\n  <!-- toggle children button-->\n  <!-- TODO: title should be i18n -->\n  <button class=\"toggle\" (click)=\"toggleExpanded()\" title=\"toggle Expand\">\n    <yvc-icon [svg]=\"toggleIcon()\"></yvc-icon>\n  </button>\n}\n<div class=\"node-label\" [attr.node-id]=\"node().id\" [ngClass]=\"{ selectable: node().selectable }\" (click)=\"select($event)\">\n  @if (node().icon) {\n    <yvc-icon class=\"node-icon\" [svg]=\"node().icon!\"></yvc-icon>\n  }\n  <div class=\"label\">{{ node().label }}</div>\n</div>\n\n@if (node().expanded) {\n  <div class=\"children\">\n    @for (childNode of node().children; track $index) {\n      <yuv-tree-node [toggleIcon]=\"toggleIcon()\" [node]=\"childNode\"></yuv-tree-node>\n    }\n  </div>\n}\n","import { CommonModule } from '@angular/common';\nimport {\n  AfterViewInit,\n  Component,\n  ElementRef,\n  HostAttributeToken,\n  HostBinding,\n  HostListener,\n  Input,\n  OnDestroy,\n  effect,\n  inject,\n  input,\n  output\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { TreeNodeComponent } from './tree-node/tree-node.component';\nimport { Tree, TreeNode } from './tree.interface';\nimport { TreeService } from './tree.service';\n\n/**\n * Component rendering a tree. \n */\n@Component({\n  selector: 'yuv-tree',\n  standalone: true,\n  imports: [CommonModule, TreeNodeComponent],\n  providers: [TreeService],\n  templateUrl: './tree.component.html',\n  styleUrl: './tree.component.scss',\n  host: {\n    class: 'yuv-tree',\n    role: 'tree'\n  }\n})\nexport class TreeComponent implements AfterViewInit, OnDestroy {\n  private treeService = inject(TreeService);\n  private elRef = inject(ElementRef);\n\n  private items?: NodeListOf<HTMLElement>;\n\n  private _observer = new MutationObserver(() => {\n    this._getVisibleNodes();\n  });\n\n  /**\n   * The tree to be rendered\n   */\n  tree = input.required<Tree>();\n\n  /**\n   * Whether or not multiple nodes should be selectable. Only works when selection is enableed by \n   * setting 'selectable' attribute:\n   * \n   * ```html\n   * <yuv-tree selectable [multiselect]=\"true\"></yuv-tree\n   * ```\n   */\n  multiselect = input<boolean>(false);\n\n  /**\n   * Host attribute to enable persistent selection of nodes. \n   */\n  @HostBinding('class.selectable')\n  selectable: string | null = inject(new HostAttributeToken('selectable'), { optional: true });\n\n  private __focusedIndex = -1;\n  private set _focusedIndex(idx: number) {\n    this.__focusedIndex = idx;\n    this.treeService.focusNode(this.items?.item(idx).getAttribute('node-id'));\n  }\n  get _focusedIndex() {\n    return this.__focusedIndex;\n  }\n\n  /**\n   * IDs of nodes that should be set 'selected'.\n   */\n  @Input() set selectedNodes(nodeIds: string[]) {\n    this.treeService.setSelection(nodeIds);\n  }\n\n  /**\n   * Emitted when selection changes\n   */\n  selectionChange = output<TreeNode[]>();\n\n  @HostBinding('attr.tabindex') readonly tabindex = '0';\n  @HostListener('keydown', ['$event']) onKeydown(event: KeyboardEvent) {\n    switch (event.code) {\n      case 'ArrowDown': {\n        if ((this.items && this._focusedIndex === this.items.length - 1) || this.__focusedIndex === -1) {\n          this._focusedIndex = 0;\n        } else this._focusedIndex++;\n        break;\n      }\n      case 'ArrowUp': {\n        if (this.items && (this._focusedIndex === 0 || this.__focusedIndex === -1)) {\n          this._focusedIndex = this.items.length - 1;\n        } else this._focusedIndex--;\n        break;\n      }\n      case 'ArrowRight': {\n        this._toggle();\n        break;\n      }\n      case 'ArrowLeft': {\n        this._toggle();\n        break;\n      }\n      case 'Space': {\n        this._selectFocusedNode(event.ctrlKey);\n        break;\n      }\n      case 'Enter': {\n        this._selectFocusedNode(event.ctrlKey);\n        break;\n      }\n    }\n  }\n  setTreeEffect = effect(() => {\n    this.treeService.setTree(this.tree());\n    // if (this.tree()) this.selectedNodes = [];\n  });\n  setTreeMultiselectEffect = effect(() => (this.treeService.multiselect = this.multiselect()));\n\n  constructor() {\n    this.treeService.nodeClick$.pipe(takeUntilDestroyed()).subscribe((node) => {\n      const idx = Array.from(this.items || []).findIndex((i) => i.getAttribute('node-id') === node.id);\n      if (idx !== -1) this._focusedIndex = idx;\n    });\n    this.treeService.selection$.pipe(takeUntilDestroyed()).subscribe((selection) => {\n      this.selectionChange.emit(selection);\n    });\n  }\n\n  private _toggle() {\n    this.treeService.toggleNode(this._getFocusedNodeId());\n  }\n\n  private _selectFocusedNode(ctrlKey = false) {\n    const fid = this._getFocusedNodeId();\n    if (fid) this.treeService.selectNodeByID(fid, ctrlKey);\n  }\n\n  private _getFocusedNodeId(): string | null {\n    return Array.from(this.items || [])[this.__focusedIndex].getAttribute('node-id');\n  }\n\n  private _getVisibleNodes() {\n    this.items = (this.elRef.nativeElement as HTMLElement).querySelectorAll<HTMLElement>('.node-label');\n  }\n\n  ngAfterViewInit(): void {\n    this._getVisibleNodes();\n    this._observer.observe(this.elRef.nativeElement, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  ngOnDestroy(): void {\n    this._observer.disconnect();\n  }\n}\n","@for (node of tree().nodes; track node.id) {\n  <yuv-tree-node [node]=\"node\"></yuv-tree-node>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/yuuvis-client-framework-upload-progress.mjs

@@ -0,0 +1,84 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, input, computed, output, Component, HostBinding } from '@angular/core';
+import * as i3 from '@yuuvis/client-core';
+import { UploadService, TranslateService, TranslateModule } from '@yuuvis/client-core';
+import { YUV_ICONS } from '@yuuvis/client-framework/icons';
+import * as i2 from '@yuuvis/components/icon';
+import { ICONS, YvcIconModule } from '@yuuvis/components/icon';
+
+class UploadProgressOverlayComponent {
+    constructor() {
+        this.#uploadService = inject(UploadService);
+        this.translate = inject(TranslateService);
+        this.items = input();
+        this._items = computed(() => {
+            const items = this.items() || [];
+            items.forEach((item) => {
+                if (item.err) {
+                    item.err.message = this.#getErrorMessage(item.err.code);
+                }
+            });
+            return items;
+        });
+        this.itemClick = output();
+        this.icons = {
+            remove: ICONS.clear,
+            done: YUV_ICONS.check,
+            err: YUV_ICONS.attention
+        };
+    }
+    #uploadService;
+    remove(id) {
+        this.#uploadService.cancelItem(id);
+    }
+    #getErrorMessage(status) {
+        switch (status) {
+            case 403:
+                return this.translate.instant('yuv.upload-progress-overlay.error.403');
+            default:
+                return this.translate.instant('yuv.upload-progress-overlay.error.default');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploadProgressOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: UploadProgressOverlayComponent, isStandalone: true, selector: "yuv-upload-progress-overlay", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<ul>\n  @for (item of _items(); track item.id) {\n    @let progress = item.progress | async;\n    <li [ngClass]=\"{ err: !!item.err, done: !!item.result }\" [style.--progress]=\"progress + '%'\">\n      <button class=\"remove\" (click)=\"remove(item.id)\">\n        <yvc-icon [svg]=\"icons.remove\" [ngClass]=\"{ err: !!item.err }\"></yvc-icon>\n      </button>\n\n      @if (!item.result) {\n        <div class=\"name\">{{ item.filename }}\n          @if(item.err) {\n            <span class=\"error\">{{item.err.message}}</span>\n          }\n        </div>\n        <div class=\"progress\">\n        @if (progress && progress < 100) {\n          <div class=\"percentage\">{{ progress }}</div>\n        } \n        @else if(item.err) {\n            <yvc-icon class=\"error\" [svg]=\"icons.err\"></yvc-icon>\n        }\n        @else {\n          <div class=\"yuv-loader-straight\"></div>\n        }\n    </div>\n      } @else {\n        <div class=\"result-items\">\n          @for (res of item.result; track $index) {\n            <div class=\"result-item\">\n              <div class=\"name\" (click)=\"itemClick.emit(res)\">\n                {{ res.label }}\n              </div>\n            </div>\n          }\n        </div>\n        <yvc-icon class=\"done\" [svg]=\"icons.done\"></yvc-icon>\n      }\n    </li>\n  }\n</ul>\n", styles: [":host ul{list-style:none;padding:0;margin:calc(var(--app-pane-padding) / 2) 0}:host li{--hover-background: transparent;display:grid;grid-template-columns:1fr auto auto;grid-template-rows:auto;cursor:default;grid-template-areas:\"result progress action\";align-items:center;padding:calc(var(--app-pane-padding) / 4) calc(var(--app-pane-padding) / 4) calc(var(--app-pane-padding) / 4) calc(var(--app-pane-padding) / 2);gap:.5em;margin-block-end:1px;background:linear-gradient(90deg,rgba(var(--color-accent-rgb),.1) 0%,rgba(var(--color-accent-rgb),.3) var(--progress),var(--hover-background) var(--progress));transition:background-color .3s ease-in-out}:host li.done{background:var(--hover-background)}:host li:hover{--hover-background: var(--item-focus-background-color)}:host li .name{grid-area:result;max-width:35ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host li .name .error{color:var(--text-color-caption);display:block;font-style:italic;max-width:35ch}:host li .yuv-loader-straight{scale:-.5}:host li .progress{grid-area:progress}:host li .percentage{font-family:monospace;padding:calc(var(--app-pane-padding) / 4) var(--app-pane-padding);font-size:var(--font-hint);color:var(--text-color-caption);align-self:center}:host li .percentage:after{content:\"%\"}:host li yvc-icon.done{--icon-size: 18px;fill:var(--color-accent)}:host li .remove{grid-area:action;padding:0}:host li .remove yvc-icon{color:var(--text-color-hint)}:host .result-items{grid-area:result}:host .result-items .result-item{cursor:pointer}:host yvc-icon{--icon-size: 18px;border-radius:4px}:host yvc-icon.done{background-color:var(--color-accent);color:var(--color-accent-tone)}:host yvc-icon.error{color:var(--color-error)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i2.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "ngmodule", type: TranslateModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploadProgressOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-upload-progress-overlay', standalone: true, imports: [CommonModule, YvcIconModule, TranslateModule], template: "<ul>\n  @for (item of _items(); track item.id) {\n    @let progress = item.progress | async;\n    <li [ngClass]=\"{ err: !!item.err, done: !!item.result }\" [style.--progress]=\"progress + '%'\">\n      <button class=\"remove\" (click)=\"remove(item.id)\">\n        <yvc-icon [svg]=\"icons.remove\" [ngClass]=\"{ err: !!item.err }\"></yvc-icon>\n      </button>\n\n      @if (!item.result) {\n        <div class=\"name\">{{ item.filename }}\n          @if(item.err) {\n            <span class=\"error\">{{item.err.message}}</span>\n          }\n        </div>\n        <div class=\"progress\">\n        @if (progress && progress < 100) {\n          <div class=\"percentage\">{{ progress }}</div>\n        } \n        @else if(item.err) {\n            <yvc-icon class=\"error\" [svg]=\"icons.err\"></yvc-icon>\n        }\n        @else {\n          <div class=\"yuv-loader-straight\"></div>\n        }\n    </div>\n      } @else {\n        <div class=\"result-items\">\n          @for (res of item.result; track $index) {\n            <div class=\"result-item\">\n              <div class=\"name\" (click)=\"itemClick.emit(res)\">\n                {{ res.label }}\n              </div>\n            </div>\n          }\n        </div>\n        <yvc-icon class=\"done\" [svg]=\"icons.done\"></yvc-icon>\n      }\n    </li>\n  }\n</ul>\n", styles: [":host ul{list-style:none;padding:0;margin:calc(var(--app-pane-padding) / 2) 0}:host li{--hover-background: transparent;display:grid;grid-template-columns:1fr auto auto;grid-template-rows:auto;cursor:default;grid-template-areas:\"result progress action\";align-items:center;padding:calc(var(--app-pane-padding) / 4) calc(var(--app-pane-padding) / 4) calc(var(--app-pane-padding) / 4) calc(var(--app-pane-padding) / 2);gap:.5em;margin-block-end:1px;background:linear-gradient(90deg,rgba(var(--color-accent-rgb),.1) 0%,rgba(var(--color-accent-rgb),.3) var(--progress),var(--hover-background) var(--progress));transition:background-color .3s ease-in-out}:host li.done{background:var(--hover-background)}:host li:hover{--hover-background: var(--item-focus-background-color)}:host li .name{grid-area:result;max-width:35ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host li .name .error{color:var(--text-color-caption);display:block;font-style:italic;max-width:35ch}:host li .yuv-loader-straight{scale:-.5}:host li .progress{grid-area:progress}:host li .percentage{font-family:monospace;padding:calc(var(--app-pane-padding) / 4) var(--app-pane-padding);font-size:var(--font-hint);color:var(--text-color-caption);align-self:center}:host li .percentage:after{content:\"%\"}:host li yvc-icon.done{--icon-size: 18px;fill:var(--color-accent)}:host li .remove{grid-area:action;padding:0}:host li .remove yvc-icon{color:var(--text-color-hint)}:host .result-items{grid-area:result}:host .result-items .result-item{cursor:pointer}:host yvc-icon{--icon-size: 18px;border-radius:4px}:host yvc-icon.done{background-color:var(--color-accent);color:var(--color-accent-tone)}:host yvc-icon.error{color:var(--color-error)}\n"] }]
+        }] });
+
+class UploadProgressComponent {
+    constructor() {
+        this.#uploadService = inject(UploadService);
+        this.progressStatus$ = this.#uploadService.status$;
+        this.completedUp$ = this.#uploadService.uploadStatus$;
+        this.icons = {
+            toggle: YUV_ICONS.arrowDown,
+            close: ICONS.clear
+        };
+        this.expanded = true;
+        this.resultItemClick = output();
+    }
+    #uploadService;
+    close() {
+        this.#uploadService.cancelItem();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploadProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: UploadProgressComponent, isStandalone: true, selector: "yuv-upload-progress", outputs: { resultItemClick: "resultItemClick" }, host: { properties: { "class.expanded": "this.expanded" } }, ngImport: i0, template: "@let ps = progressStatus$ | async;\n@if (ps && ps.items.length) {\n  @let completed = completedUp$ | async;\n\n  <div class=\"upload-progress\">\n    <header>\n      <h4>\n        @if (!completed) {\n          {{ 'yuv.upload-progress.header.uploading' | translate: { count: ps.items.length } }}\n        } @else {\n          {{ 'yuv.upload-progress.header.uploaded' | translate: { count: ps.items.length } }}\n        }\n      </h4>\n      <button (click)=\"expanded = !expanded\"><yvc-icon class=\"toggle\" [svg]=\"icons.toggle\"></yvc-icon></button>\n      <button (click)=\"close()\"><yvc-icon [svg]=\"icons.close\"></yvc-icon></button>\n    </header>\n    @if (expanded) {\n      <yuv-upload-progress-overlay [items]=\"ps.items\" (itemClick)=\"resultItemClick.emit($event)\"></yuv-upload-progress-overlay>\n    }\n  </div>\n}\n", styles: [":host{--upload-progress-background-header: var(--panel-background-grey);--upload-progress-background-main: var(--panel-background);--upload-progress-border-color: var(--panel-background);--upload-progress-outline: 4px solid rgb(from var(--panel-divider-color) r g b / .9);--upload-progress-border-radius: calc(var(--app-pane-padding) / 4);position:absolute;inset-block-end:var(--app-pane-padding);inset-inline-end:var(--app-pane-padding);z-index:1000}:host .upload-progress{display:flex;flex-flow:column;background-color:var(--upload-progress-background-main);border:1px solid var(--upload-progress-border-color);border-radius:var(--upload-progress-border-radius);outline:var(--upload-progress-outline);min-width:250px;max-height:30vh;overflow:hidden;animation:appear .3s ease-in-out}:host .toggle{rotate:180deg}:host.expanded .toggle{rotate:0deg}:host header{display:flex;align-items:center;gap:calc(var(--app-pane-padding) / 4);background-color:var(--upload-progress-background-header);padding:calc(var(--app-pane-padding) / 4)}:host header h4{margin:0;padding:0 calc(var(--app-pane-padding) / 2);flex:1}:host header button{padding:0;border-radius:4px;--icon-size: 18px}:host yuv-upload-progress-overlay{overflow-y:auto}@keyframes appear{0%{opacity:0;transform:translateY(var(--app-pane-padding))}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i2.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: UploadProgressOverlayComponent, selector: "yuv-upload-progress-overlay", inputs: ["items"], outputs: ["itemClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploadProgressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-upload-progress', standalone: true, imports: [CommonModule, YvcIconModule, TranslateModule, UploadProgressOverlayComponent], template: "@let ps = progressStatus$ | async;\n@if (ps && ps.items.length) {\n  @let completed = completedUp$ | async;\n\n  <div class=\"upload-progress\">\n    <header>\n      <h4>\n        @if (!completed) {\n          {{ 'yuv.upload-progress.header.uploading' | translate: { count: ps.items.length } }}\n        } @else {\n          {{ 'yuv.upload-progress.header.uploaded' | translate: { count: ps.items.length } }}\n        }\n      </h4>\n      <button (click)=\"expanded = !expanded\"><yvc-icon class=\"toggle\" [svg]=\"icons.toggle\"></yvc-icon></button>\n      <button (click)=\"close()\"><yvc-icon [svg]=\"icons.close\"></yvc-icon></button>\n    </header>\n    @if (expanded) {\n      <yuv-upload-progress-overlay [items]=\"ps.items\" (itemClick)=\"resultItemClick.emit($event)\"></yuv-upload-progress-overlay>\n    }\n  </div>\n}\n", styles: [":host{--upload-progress-background-header: var(--panel-background-grey);--upload-progress-background-main: var(--panel-background);--upload-progress-border-color: var(--panel-background);--upload-progress-outline: 4px solid rgb(from var(--panel-divider-color) r g b / .9);--upload-progress-border-radius: calc(var(--app-pane-padding) / 4);position:absolute;inset-block-end:var(--app-pane-padding);inset-inline-end:var(--app-pane-padding);z-index:1000}:host .upload-progress{display:flex;flex-flow:column;background-color:var(--upload-progress-background-main);border:1px solid var(--upload-progress-border-color);border-radius:var(--upload-progress-border-radius);outline:var(--upload-progress-outline);min-width:250px;max-height:30vh;overflow:hidden;animation:appear .3s ease-in-out}:host .toggle{rotate:180deg}:host.expanded .toggle{rotate:0deg}:host header{display:flex;align-items:center;gap:calc(var(--app-pane-padding) / 4);background-color:var(--upload-progress-background-header);padding:calc(var(--app-pane-padding) / 4)}:host header h4{margin:0;padding:0 calc(var(--app-pane-padding) / 2);flex:1}:host header button{padding:0;border-radius:4px;--icon-size: 18px}:host yuv-upload-progress-overlay{overflow-y:auto}@keyframes appear{0%{opacity:0;transform:translateY(var(--app-pane-padding))}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], propDecorators: { expanded: [{
+                type: HostBinding,
+                args: ['class.expanded']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UploadProgressComponent };
+//# sourceMappingURL=yuuvis-client-framework-upload-progress.mjs.map

package/fesm2022/yuuvis-client-framework-upload-progress.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"yuuvis-client-framework-upload-progress.mjs","sources":["../../../../../libs/yuuvis/client-framework/upload-progress/src/lib/upload-progress/upload-progress-overlay/upload-progress-overlay.component.ts","../../../../../libs/yuuvis/client-framework/upload-progress/src/lib/upload-progress/upload-progress-overlay/upload-progress-overlay.component.html","../../../../../libs/yuuvis/client-framework/upload-progress/src/lib/upload-progress/upload-progress.component.ts","../../../../../libs/yuuvis/client-framework/upload-progress/src/lib/upload-progress/upload-progress.component.html","../../../../../libs/yuuvis/client-framework/upload-progress/src/yuuvis-client-framework-upload-progress.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, computed, inject, input, output } from '@angular/core';\nimport { ProgressStatusItem, TranslateModule, TranslateService, UploadResult, UploadService } from '@yuuvis/client-core';\nimport { YUV_ICONS } from '@yuuvis/client-framework/icons';\nimport { ICONS, YvcIconModule } from '@yuuvis/components/icon';\n\n@Component({\n  selector: 'yuv-upload-progress-overlay',\n  standalone: true,\n  imports: [CommonModule, YvcIconModule, TranslateModule],\n  templateUrl: './upload-progress-overlay.component.html',\n  styleUrl: './upload-progress-overlay.component.scss'\n})\nexport class UploadProgressOverlayComponent {\n  #uploadService = inject(UploadService);\n  translate = inject(TranslateService);\n\n  items = input<ProgressStatusItem[]>();\n  _items = computed(() => {\n    const items = this.items() || [];\n    items.forEach((item) => {\n      if (item.err) {\n        item.err.message = this.#getErrorMessage(item.err.code);\n      }\n    });\n    return items;\n  });\n  itemClick = output<UploadResult>();\n\n  icons = {\n    remove: ICONS.clear,\n    done: YUV_ICONS.check,\n    err: YUV_ICONS.attention\n  };\n\n  remove(id?: string) {\n    this.#uploadService.cancelItem(id);\n  }\n\n  #getErrorMessage(status: number): string {\n    switch (status) {\n      case 403:\n        return this.translate.instant('yuv.upload-progress-overlay.error.403');\n      default:\n        return this.translate.instant('yuv.upload-progress-overlay.error.default');\n    }\n  }\n}\n","<ul>\n  @for (item of _items(); track item.id) {\n    @let progress = item.progress | async;\n    <li [ngClass]=\"{ err: !!item.err, done: !!item.result }\" [style.--progress]=\"progress + '%'\">\n      <button class=\"remove\" (click)=\"remove(item.id)\">\n        <yvc-icon [svg]=\"icons.remove\" [ngClass]=\"{ err: !!item.err }\"></yvc-icon>\n      </button>\n\n      @if (!item.result) {\n        <div class=\"name\">{{ item.filename }}\n          @if(item.err) {\n            <span class=\"error\">{{item.err.message}}</span>\n          }\n        </div>\n        <div class=\"progress\">\n        @if (progress && progress < 100) {\n          <div class=\"percentage\">{{ progress }}</div>\n        } \n        @else if(item.err) {\n            <yvc-icon class=\"error\" [svg]=\"icons.err\"></yvc-icon>\n        }\n        @else {\n          <div class=\"yuv-loader-straight\"></div>\n        }\n    </div>\n      } @else {\n        <div class=\"result-items\">\n          @for (res of item.result; track $index) {\n            <div class=\"result-item\">\n              <div class=\"name\" (click)=\"itemClick.emit(res)\">\n                {{ res.label }}\n              </div>\n            </div>\n          }\n        </div>\n        <yvc-icon class=\"done\" [svg]=\"icons.done\"></yvc-icon>\n      }\n    </li>\n  }\n</ul>\n","import { CommonModule } from '@angular/common';\nimport { Component, HostBinding, inject, output } from '@angular/core';\nimport { TranslateModule, UploadResult, UploadService } from '@yuuvis/client-core';\nimport { YUV_ICONS } from '@yuuvis/client-framework/icons';\nimport { ICONS, YvcIconModule } from '@yuuvis/components/icon';\nimport { UploadProgressOverlayComponent } from './upload-progress-overlay/upload-progress-overlay.component';\n\n@Component({\n  selector: 'yuv-upload-progress',\n  standalone: true,\n  imports: [CommonModule, YvcIconModule, TranslateModule, UploadProgressOverlayComponent],\n  templateUrl: './upload-progress.component.html',\n  styleUrl: './upload-progress.component.scss'\n})\nexport class UploadProgressComponent {\n  #uploadService = inject(UploadService);\n  progressStatus$ = this.#uploadService.status$;\n  completedUp$ = this.#uploadService.uploadStatus$;\n\n  icons = {\n    toggle: YUV_ICONS.arrowDown,\n    close: ICONS.clear\n  };\n\n  @HostBinding('class.expanded') expanded = true;\n  resultItemClick = output<UploadResult>();\n\n  close() {\n    this.#uploadService.cancelItem();\n  }\n}\n","@let ps = progressStatus$ | async;\n@if (ps && ps.items.length) {\n  @let completed = completedUp$ | async;\n\n  <div class=\"upload-progress\">\n    <header>\n      <h4>\n        @if (!completed) {\n          {{ 'yuv.upload-progress.header.uploading' | translate: { count: ps.items.length } }}\n        } @else {\n          {{ 'yuv.upload-progress.header.uploaded' | translate: { count: ps.items.length } }}\n        }\n      </h4>\n      <button (click)=\"expanded = !expanded\"><yvc-icon class=\"toggle\" [svg]=\"icons.toggle\"></yvc-icon></button>\n      <button (click)=\"close()\"><yvc-icon [svg]=\"icons.close\"></yvc-icon></button>\n    </header>\n    @if (expanded) {\n      <yuv-upload-progress-overlay [items]=\"ps.items\" (itemClick)=\"resultItemClick.emit($event)\"></yuv-upload-progress-overlay>\n    }\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/yuuvis-client-framework-user-avatar.mjs

@@ -0,0 +1,96 @@
+import * as i0 from '@angular/core';
+import { Component, Input, HostBinding, NgModule } from '@angular/core';
+import * as i1 from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+
+/**
+ * Component rendering a users avatar. If there is no avatar image availbale, the
+ * component will render the initials of the user, but only if we can fetch a first-
+ * and lastname. Otherwise there will be a fallback image.
+ *
+ * [Screenshot](../assets/images/yuv-user-avatar.gif)
+ *
+ *
+ *
+ */
+class UserAvatarComponent {
+    /**
+     * The user to display the avatar image for.
+     */
+    set user(u) {
+        if (!!u && !this.currentUserId || u?.id !== this.currentUserId) {
+            this.getUserImage(u);
+        }
+        this.currentUserId = u?.id;
+    }
+    constructor(sanitizer, elRef, renderer) {
+        this.sanitizer = sanitizer;
+        this.elRef = elRef;
+        this.renderer = renderer;
+        this.defaultUserImage = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="rgba(0,0,0,.2)"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>';
+        this.img = null;
+        this.setDefaulUserImage();
+    }
+    getUserImage(user) {
+        if (user && user.image) {
+            this.img = this.sanitizer.bypassSecurityTrustStyle(`url('${user.image}')`);
+        }
+        else if (user && !user.image && user.firstname && user.lastname) {
+            this.img = null;
+            this.elRef.nativeElement.classList.add('initials');
+            const initials = document.createElement('div');
+            // scale initials font-size based on the containers size
+            const rect = this.elRef.nativeElement.getBoundingClientRect();
+            // when rendered invisible the width will be 0px
+            if (rect.width > 0) {
+                initials.style.fontSize = `${rect.width * 0.5}px`;
+            }
+            initials.innerText = `${user.firstname.substr(0, 1)}${user.lastname.substr(0, 1)}`;
+            this.renderer.appendChild(this.elRef.nativeElement, initials);
+        }
+        else {
+            this.setDefaulUserImage();
+        }
+    }
+    setDefaulUserImage() {
+        this.img = this.sanitizer.bypassSecurityTrustStyle(`url('${this.defaultUserImage}')`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAvatarComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserAvatarComponent, selector: "yuv-user-avatar", inputs: { user: "user" }, host: { properties: { "style.backgroundImage": "this.img" }, classAttribute: "yuv-user-avatar" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:flex;flex-flow:column;align-items:center;justify-content:center;height:100%;box-sizing:border-box;background-repeat:no-repeat;background-size:cover;background-position:center center}:host.initials{background-color:var(--color-accent);color:var(--color-accent-tone)}:host.initials>div{font-weight:var(--font-weight-bold);opacity:.8}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-user-avatar', template: '', host: { class: 'yuv-user-avatar' }, styles: [":host{display:flex;flex-flow:column;align-items:center;justify-content:center;height:100%;box-sizing:border-box;background-repeat:no-repeat;background-size:cover;background-position:center center}:host.initials{background-color:var(--color-accent);color:var(--color-accent-tone)}:host.initials>div{font-weight:var(--font-weight-bold);opacity:.8}\n"] }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { user: [{
+                type: Input
+            }], img: [{
+                type: HostBinding,
+                args: ['style.backgroundImage']
+            }] } });
+
+class YuvUserAvatarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YuvUserAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: YuvUserAvatarModule, declarations: [UserAvatarComponent], imports: [CommonModule], exports: [UserAvatarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YuvUserAvatarModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YuvUserAvatarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        UserAvatarComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        UserAvatarComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UserAvatarComponent, YuvUserAvatarModule };
+//# sourceMappingURL=yuuvis-client-framework-user-avatar.mjs.map

package/fesm2022/yuuvis-client-framework-user-avatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"yuuvis-client-framework-user-avatar.mjs","sources":["../../../../../libs/yuuvis/client-framework/user-avatar/src/lib/user-avatar.component.ts","../../../../../libs/yuuvis/client-framework/user-avatar/src/lib/user-avatar.module.ts","../../../../../libs/yuuvis/client-framework/user-avatar/src/yuuvis-client-framework-user-avatar.ts"],"sourcesContent":["import { Component, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';\nimport { DomSanitizer, SafeStyle } from '@angular/platform-browser';\n// import { YuvUser } from '@yuuvis/client-core';\n\n\nexport interface YuvUser {\n  id: string;\n  username: string;\n  firstname: string;\n  lastname: string;\n  title: string;\n  email: string;\n  image: string;\n  tenant: string;\n  domain: string;\n  authorities: string[];\n  substituteOf: string[];\n  enabled: boolean;\n}\n\n/**\n * Component rendering a users avatar. If there is no avatar image availbale, the\n * component will render the initials of the user, but only if we can fetch a first-\n * and lastname. Otherwise there will be a fallback image.\n *\n * [Screenshot](../assets/images/yuv-user-avatar.gif)\n *\n *\n *\n */\n@Component({\n  selector: 'yuv-user-avatar',\n  template: '',\n  styleUrls: ['./user-avatar.component.scss'],\n  host: { class: 'yuv-user-avatar' }\n})\nexport class UserAvatarComponent {\n  private currentUserId?: string;\n  private defaultUserImage =\n    'data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"rgba(0,0,0,.2)\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"/></svg>';\n\n  /**\n   * The user to display the avatar image for.\n   */\n  @Input()\n  set user(u: YuvUser | undefined) {\n    if (!!u && !this.currentUserId || u?.id !== this.currentUserId) {\n      this.getUserImage(u!);\n    }\n    this.currentUserId = u?.id;\n  }\n  @HostBinding('style.backgroundImage') img: SafeStyle | null = null;\n\n  constructor(private sanitizer: DomSanitizer, private elRef: ElementRef, private renderer: Renderer2) {\n    this.setDefaulUserImage();\n  }\n\n  getUserImage(user: YuvUser) {\n    if (user && user.image) {\n      this.img = this.sanitizer.bypassSecurityTrustStyle(`url('${user.image}')`);\n    } else if (user && !user.image && user.firstname && user.lastname) {\n      this.img = null;\n      this.elRef.nativeElement.classList.add('initials');\n      const initials: HTMLElement = document.createElement('div');\n      // scale initials font-size based on the containers size\n      const rect = this.elRef.nativeElement.getBoundingClientRect();\n      // when rendered invisible the width will be 0px\n      if (rect.width > 0) {\n        initials.style.fontSize = `${rect.width * 0.5}px`;\n      }\n      initials.innerText = `${user.firstname.substr(0, 1)}${user.lastname.substr(0, 1)}`;\n      this.renderer.appendChild(this.elRef.nativeElement, initials);\n    } else {\n      this.setDefaulUserImage();\n    }\n  }\n\n  private setDefaulUserImage() {\n    this.img = this.sanitizer.bypassSecurityTrustStyle(`url('${this.defaultUserImage}')`);\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { UserAvatarComponent } from './user-avatar.component';\n\n@NgModule({\n  declarations: [\n    UserAvatarComponent\n  ],\n  imports: [\n    CommonModule\n  ],\n  exports: [\n    UserAvatarComponent\n  ]\n})\nexport class YuvUserAvatarModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}