npm - @yuuvis/client-framework - Versions diffs - 2.0.0-beta.0 → 2.0.0-beta.10 - Mend

@yuuvis/client-framework 2.0.0-beta.0 → 2.0.0-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (389) hide show

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

	@@ -1 +1 @@
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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"}
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 { YuvIconComponent } from '@yuuvis/client-framework/icons';\nimport { Subscription } from 'rxjs';\nimport { TreeNode } from '../tree.interface';\nimport { TreeService } from '../tree.service';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\n\n@Component({\n selector: 'yuv-tree-node',\n standalone: true,\n imports: [CommonModule, YuvIconComponent, MatTooltipModule],\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()\">\n <yuv-icon [svg]=\"toggleIcon()\"></yuv-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 <yuv-icon class=\"node-icon\" [svg]=\"node().icon!\"></yuv-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 CHANGED Viewed

@@ -2,11 +2,13 @@ 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 * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i4 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';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
 class UploadProgressOverlayComponent {
     constructor() {
@@ -23,11 +25,6 @@ class UploadProgressOverlayComponent {
             return items;
         });
         this.itemClick = output();
-        this.icons = {
-            remove: ICONS.clear,
-            done: YUV_ICONS.check,
-            err: YUV_ICONS.attention
-        };
     }
     #uploadService;
     remove(id) {
@@ -41,12 +38,14 @@ class UploadProgressOverlayComponent {
                 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 }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: UploadProgressOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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 mat-icon-button class=\"remove\" (click)=\"remove(item.id)\">\n        <mat-icon [ngClass]=\"{ err: !!item.err }\">close</mat-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              <mat-icon class=\"error\">warning</mat-icon>\n          }\n          @else {\n            <mat-progress-spinner mode=\"indeterminate\" class=\"ymt-progress-spinner--tiny\"></mat-progress-spinner>\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        <mat-icon class=\"done\">check</mat-icon>\n      }\n    </li>\n  }\n</ul>\n", styles: [":host ul{list-style:none;padding:0;margin:var(--ymt-spacing-xs) 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:var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) var(--ymt-spacing-xs);gap:.5em;margin-block-end:1px;background:linear-gradient(90deg,rgb(from var(--ymt-primary) r g b/.1) 0%,rgb(from var(--ymt-primary) r g b/.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(--ymt-hover-background)}:host li .name{grid-area:result;max-width:35ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host li .name .error{color:var(--ymt-text-color-subtle);display:block;font-style:italic;max-width:35ch}:host li .progress{grid-area:progress}:host li .percentage{font-family:monospace;padding:var(--ymt-spacing-2xs) var(--ymt-spacing-m);font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);align-self:center}:host li .percentage:after{content:\"%\"}:host li mat-icon.done{--icon-size: 18px;fill:var(--ymt-primary)}:host li .remove{grid-area:action}:host li .remove mat-icon{color:var(--ymt-text-color-subtle)}:host .result-items{grid-area:result}:host .result-items .result-item{cursor:pointer}:host mat-icon{--icon-size: 18px;border-radius:4px}:host mat-icon.done{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host mat-icon.error{color:var(--ymt-danger)}\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: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploadProgressOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", 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"] }]
+            args: [{ selector: 'yuv-upload-progress-overlay', standalone: true, imports: [CommonModule,
+                        MatButtonModule,
+                        MatIconModule, TranslateModule, MatProgressSpinner], 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 mat-icon-button class=\"remove\" (click)=\"remove(item.id)\">\n        <mat-icon [ngClass]=\"{ err: !!item.err }\">close</mat-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              <mat-icon class=\"error\">warning</mat-icon>\n          }\n          @else {\n            <mat-progress-spinner mode=\"indeterminate\" class=\"ymt-progress-spinner--tiny\"></mat-progress-spinner>\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        <mat-icon class=\"done\">check</mat-icon>\n      }\n    </li>\n  }\n</ul>\n", styles: [":host ul{list-style:none;padding:0;margin:var(--ymt-spacing-xs) 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:var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) var(--ymt-spacing-xs);gap:.5em;margin-block-end:1px;background:linear-gradient(90deg,rgb(from var(--ymt-primary) r g b/.1) 0%,rgb(from var(--ymt-primary) r g b/.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(--ymt-hover-background)}:host li .name{grid-area:result;max-width:35ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host li .name .error{color:var(--ymt-text-color-subtle);display:block;font-style:italic;max-width:35ch}:host li .progress{grid-area:progress}:host li .percentage{font-family:monospace;padding:var(--ymt-spacing-2xs) var(--ymt-spacing-m);font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);align-self:center}:host li .percentage:after{content:\"%\"}:host li mat-icon.done{--icon-size: 18px;fill:var(--ymt-primary)}:host li .remove{grid-area:action}:host li .remove mat-icon{color:var(--ymt-text-color-subtle)}:host .result-items{grid-area:result}:host .result-items .result-item{cursor:pointer}:host mat-icon{--icon-size: 18px;border-radius:4px}:host mat-icon.done{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host mat-icon.error{color:var(--ymt-danger)}\n"] }]
         }] });
 class UploadProgressComponent {
@@ -54,10 +53,6 @@ class UploadProgressComponent {
         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();
     }
@@ -65,12 +60,12 @@ class UploadProgressComponent {
     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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: UploadProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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 mat-icon-button (click)=\"expanded = !expanded\">\n        <mat-icon class=\"toggle\">keyboard_arrow_down</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"close()\">\n        <mat-icon class=\"toggle\">clear</mat-icon>\n      </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(--ymt-surface-panel);--upload-progress-background-main: var(--ymt-surface-panel);--upload-progress-border-color: var(--ymt-surface-panel);--upload-progress-outline: 4px solid rgb(from var(--ymt-outline-variant) r g b / .9);--upload-progress-border-radius: var(--ymt-spacing-2xs);position:absolute;inset-block-end:var(--ymt-spacing-m);inset-inline-end:var(--ymt-spacing-m);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:var(--ymt-spacing-2xs);background-color:var(--upload-progress-background-header);padding:var(--ymt-spacing-2xs)}:host header h4{margin:0;padding:0 var(--ymt-spacing-xs);flex:1}:host yuv-upload-progress-overlay{overflow-y:auto}@keyframes appear{0%{opacity:0;transform:translateY(var(--ymt-spacing-m))}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", 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"] }]
+            args: [{ selector: 'yuv-upload-progress', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, 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 mat-icon-button (click)=\"expanded = !expanded\">\n        <mat-icon class=\"toggle\">keyboard_arrow_down</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"close()\">\n        <mat-icon class=\"toggle\">clear</mat-icon>\n      </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(--ymt-surface-panel);--upload-progress-background-main: var(--ymt-surface-panel);--upload-progress-border-color: var(--ymt-surface-panel);--upload-progress-outline: 4px solid rgb(from var(--ymt-outline-variant) r g b / .9);--upload-progress-border-radius: var(--ymt-spacing-2xs);position:absolute;inset-block-end:var(--ymt-spacing-m);inset-inline-end:var(--ymt-spacing-m);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:var(--ymt-spacing-2xs);background-color:var(--upload-progress-background-header);padding:var(--ymt-spacing-2xs)}:host header h4{margin:0;padding:0 var(--ymt-spacing-xs);flex:1}:host yuv-upload-progress-overlay{overflow-y:auto}@keyframes appear{0%{opacity:0;transform:translateY(var(--ymt-spacing-m))}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], propDecorators: { expanded: [{
                 type: HostBinding,
                 args: ['class.expanded']

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

	@@ -1 +1 @@
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":"~~;;;;;;;;;;MAaa~~,8BAA8B,CAAA;~~AAP3C~~,IAAA,WAAA,GAAA;~~AAQE~~,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC~~,CAAC~~;~~AACvC~~,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,gBAAgB,CAAC~~,CAAC~~;~~QAErC~~,IAAK,CAAA,KAAA,GAAG,KAAK,EAAwB~~,CAAC~~;~~AACtC~~,QAAA,IAAA,CAAA,MAAM,GAAG,QAAQ,CAAC,MAAK;YACrB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE~~,CAAC~~;~~AACjC~~,YAAA,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AACrB,gBAAA,IAAI,IAAI,CAAC,GAAG,EAAE;AACZ,oBAAA,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,~~CAAC;iBACzD;AACH,~~aAAC,CAAC~~,CAAC~~;~~AACH~~,YAAA,OAAO,KAAK~~,CAAC~~;~~AACf~~,SAAC,CAAC~~,CAAC~~;~~QACH~~,IAAS,CAAA,SAAA,GAAG,MAAM,EAAgB~~,CAAC~~;~~AAEnC,QAAA,IAAA,CAAA,KAAK,GAAG~~;~~YACN~~,~~MAAM,EAAE,KAAK,CAAC,KAAK;YACnB,IAAI,EAAE,SAAS,CAAC,KAAK;YACrB,GAAG,EAAE,SAAS,CAAC,SAAS;SACzB,CAAC;AAcH,KAAA;AAjCC,~~IAAA,cAAc~~,CAAyB~~;~~AAqBvC~~,IAAA,MAAM,CAAC,EAAW,EAAA;AAChB,QAAA,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,CAAC,~~CAAC;KACpC;AAED,~~IAAA,gBAAgB,CAAC,MAAc,EAAA;QAC7B,QAAQ,MAAM;AACZ,YAAA,KAAK,GAAG;gBACN,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,uCAAuC,CAAC~~,CAAC~~;~~AACzE~~,YAAA;gBACE,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,2CAA2C,CAAC,~~CAAC;SAC9E;KACF;+GAjCU,~~8BAA8B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA~~;AAA9B~~,~~IAAA~~,~~SAAA~~,IAAA,~~CAAA~~,~~IAAA~~,~~GAAA~~,EAAA,~~CAAA~~,~~oBAAA~~,~~CAAA~~,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,~~IAAA~~,EAAA,~~8BAA8B~~,~~gQCb3C~~,~~wzCAwCA~~,EAAA,MAAA,EAAA,CAAA,~~urDAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,~~ED/BY~~,YAAY,~~EAAE~~,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,OAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,aAAa,~~8HAAE~~,eAAe,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;~~4FAI3C~~,8BAA8B,EAAA,UAAA,EAAA,CAAA;~~kBAP1C~~,SAAS~~;+BACE~~,~~6BAA6B~~,EAAA,~~UAAA~~,EAC3B,IAAI,EACP,OAAA,EAAA,CAAC,YAAY,~~EAAE~~,aAAa,EAAE,eAAe,CAAC,EAAA,QAAA,EAAA,~~wzCAAA~~,EAAA,MAAA,EAAA,CAAA,~~urDAAA~~,CAAA,EAAA~~,CAAA~~;;;~~MEK5C~~,uBAAuB,CAAA;AAPpC,IAAA,WAAA,GAAA;AAQE,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC~~,CAAC~~;~~AACvC~~,QAAA,IAAA,CAAA,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO~~,CAAC~~;~~AAC9C~~,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa~~,CAAC~~;~~AAEjD~~,~~QAAA,IAAA,CAAA,KAAK,GAAG;YACN,MAAM,EAAE,SAAS,CAAC,SAAS;YAC3B,KAAK,EAAE,KAAK,CAAC,KAAK;SACnB,CAAC;QAE6B,~~IAAQ,CAAA,QAAA,GAAG,IAAI~~,CAAC~~;~~QAC/C~~,IAAe,CAAA,eAAA,GAAG,MAAM,EAAgB~~,CAAC~~;~~AAK1C,KAAA~~;~~AAfC~~,IAAA,cAAc~~,CAAyB~~;~~IAYvC~~,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,~~CAAC;KAClC;+GAfU,~~uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA~~,EAAA~~;mGAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECdpC,~~i0BAqBA~~,~~EDXY~~,MAAA,EAAA,CAAA,~~6zCAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,~~EAAA~~,YAAY,~~mFAAE~~,~~aAAa~~,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,~~KAAA~~,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,IAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,8BAA8B,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,OAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA~~,EAAA~~;;~~4FAI3E~~,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAPnC,SAAS~~;+BACE~~,~~qBAAqB~~,EAAA,~~UAAA~~,EACnB,~~IAAI~~,EAAA,~~OAAA~~,EACP,CAAC,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,8BAA8B,CAAC,EAAA,QAAA,EAAA,~~i0BAAA~~,EAAA,MAAA,EAAA,CAAA,~~6zCAAA~~,CAAA,EAAA~~,CAAA~~;~~8BAcxD~~,QAAQ,EAAA,CAAA;sBAAtC,WAAW;uBAAC,gBAAgB~~,CAAA~~;;;~~AExB~~/B;;AAEG;;;;"}
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 { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { ProgressStatusItem, TranslateModule, TranslateService, UploadResult, UploadService } from '@yuuvis/client-core';\nimport { MatProgressSpinner } from '@angular/material/progress-spinner';\n\n@Component({\n selector: 'yuv-upload-progress-overlay',\n standalone: true,\n imports: [CommonModule,\n MatButtonModule,\n MatIconModule, TranslateModule, MatProgressSpinner],\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 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 mat-icon-button class=\"remove\" (click)=\"remove(item.id)\">\n <mat-icon [ngClass]=\"{ err: !!item.err }\">close</mat-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 <mat-icon class=\"error\">warning</mat-icon>\n }\n @else {\n <mat-progress-spinner mode=\"indeterminate\" class=\"ymt-progress-spinner--tiny\"></mat-progress-spinner>\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 <mat-icon class=\"done\">check</mat-icon>\n }\n </li>\n }\n</ul>\n","import { CommonModule } from '@angular/common';\nimport { Component, HostBinding, inject, output } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { TranslateModule, UploadResult, UploadService } from '@yuuvis/client-core';\nimport { UploadProgressOverlayComponent } from './upload-progress-overlay/upload-progress-overlay.component';\n\n@Component({\n selector: 'yuv-upload-progress',\n standalone: true,\n imports: [CommonModule, MatButtonModule, MatIconModule, 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 @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 mat-icon-button (click)=\"expanded = !expanded\">\n <mat-icon class=\"toggle\">keyboard_arrow_down</mat-icon>\n </button>\n <button mat-icon-button (click)=\"close()\">\n <mat-icon class=\"toggle\">clear</mat-icon>\n </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.mjs CHANGED Viewed

@@ -3,11 +3,11 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 class YuuvisClientFrameworkModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YuuvisClientFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: YuuvisClientFrameworkModule, imports: [CommonModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YuuvisClientFrameworkModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: YuuvisClientFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.11", ngImport: i0, type: YuuvisClientFrameworkModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: YuuvisClientFrameworkModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YuuvisClientFrameworkModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: YuuvisClientFrameworkModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/fesm2022/yuuvis-client-framework.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"yuuvis-client-framework.mjs","sources":["../../../../../libs/yuuvis/client-framework/src/lib/yuuvis-client-framework.module.ts","../../../../../libs/yuuvis/client-framework/src/yuuvis-client-framework.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n imports: [CommonModule],\n})\nexport class YuuvisClientFrameworkModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;MAMa,2BAA2B,CAAA;+GAA3B,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA~~,EAAA~~;AAA3B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,2BAA2B,YAF5B,YAAY,CAAA,EAAA,CAAA,CAAA~~,EAAA~~;AAEX,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,2BAA2B,YAF5B,YAAY,CAAA,EAAA,CAAA,CAAA~~,EAAA~~;;4FAEX,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBAHvC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,YAAY,CAAC;AACxB,iBAAA~~,CAAA~~;;;ACLD;;AAEG;;;;"}
1	+ {"version":3,"file":"yuuvis-client-framework.mjs","sources":["../../../../../libs/yuuvis/client-framework/src/lib/yuuvis-client-framework.module.ts","../../../../../libs/yuuvis/client-framework/src/yuuvis-client-framework.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n imports: [CommonModule],\n})\nexport class YuuvisClientFrameworkModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;MAMa,2BAA2B,CAAA;+GAA3B,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAA3B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,2BAA2B,YAF5B,YAAY,CAAA,EAAA,CAAA,CAAA;AAEX,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,2BAA2B,YAF5B,YAAY,CAAA,EAAA,CAAA,CAAA;;4FAEX,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBAHvC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,YAAY,CAAC;AACxB,iBAAA;;;ACLD;;AAEG;;;;"}

package/forms/index.d.ts CHANGED Viewed

@@ -1,7 +1,13 @@
-export { FormInputComponent } from './lib/form-input/form-input.component';
 export * from './lib/elements';
+export { DatetimeRangeComponent } from './lib/elements/datetime-range/datetime-range.component';
+export { DatetimeComponent } from './lib/elements/datetime/datetime.component';
+export { NumberRangeComponent } from './lib/elements/number-range/number-range.component';
+export { NumberComponent } from './lib/elements/number/number.component';
+export { OrganizationComponent } from './lib/elements/organization/organization.component';
+export { StringComponent } from './lib/elements/string/string.component';
 export * from './lib/forms.module';
 export * from './lib/elements/range-select-date/range-select-date.component';
 export * from './lib/elements/range-select-date/range-select-date.interface';
 export * from './lib/elements/range-select-filesize/range-select-filesize.component';
 export * from './lib/elements/range-select-filesize/range-select-filesize.interface';
+export * from './lib/elements/catalog/catalog.component';

package/forms/lib/elements/catalog/catalog.component.d.ts CHANGED Viewed

@@ -1,68 +1,29 @@
-import { ControlValueAccessor } from '@angular/forms';
-import { SystemService } from '@yuuvis/client-core';
-import { DropdownOption } from '@yuuvis/components/dropdown';
+import { OnDestroy, OnInit } from '@angular/core';
+import { ControlValueAccessor, FormControl } from '@angular/forms';
+import { AbstractMatFormField } from '@yuuvis/client-framework/common';
 import * as i0 from "@angular/core";
-/**
- * Component rendering a simple catalog as form element.
- * There are two ways how to use this component. One is to add options as an array
- * of strings on your own, the second one is to apply a special classification.
- *
- * Classifications are used within form models and rendered as object forms. Elements
- * with a classification of `catalog[Item1, Item2, Item3]` will use this component
- * as well. So you may also choose to set a classification like this in order to
- * apply your options.
- *
- * @example
- * <!-- setting options as string array -->
- * <yuv-catalog [options]="cities" [(ngModel)]="hometown"></yuv-catalog>
- *
- * <!-- setting options using a classification -->
- * <yuv-catalog [classification]="'catalog[Berlin, Chicago, Paris]'" [(ngModel)]="hometown"></yuv-catalog>
- */
-export declare class CatalogComponent implements ControlValueAccessor {
-    private systemService;
-    value?: string | string[];
-    _options: DropdownOption[];
-    getLabel: (value: any) => any;
+export declare class CatalogComponent extends AbstractMatFormField<string | string[]> implements ControlValueAccessor, OnInit, OnDestroy {
+    #private;
+    readonly: import("@angular/core").InputSignal<boolean>;
+    multiple: import("@angular/core").InputSignal<boolean>;
+    _options: import("@angular/core").WritableSignal<string[]>;
+    options: import("@angular/core").InputSignal<string[]>;
     /**
-     * Enable filtering of options
+     * Additional semantics for the form element.
      */
-    filter: boolean;
+    classifications: import("@angular/core").InputSignal<string[]>;
     /**
      * Possibles values are `EDIT` (default),`SEARCH`,`CREATE`. In search situation validation of the form element will be turned off, so you are able to enter search terms that do not meet the elements validators.
      */
     situation?: string;
-    /**
-     * By default a filter panel will shown if the number of options exceeds 10 entries. You could
-     * change this number.
-     */
-    enableFilterWhenOptionsExceed: number;
-    /**
-     * Array of selectable entries
-     */
-    set options(options: (string | any)[]);
-    /**
-     * Indicator that multiple items could be selected
-     */
-    multiselect: boolean;
-    /**
-     * Additional semantics for the form element.
-     */
-    set classifications(c: string[]);
-    /**
-     * Will attch the overlay to this HTMLelement
-     */
-    appendTo: null;
-    /**
-     * Will prevent the input from being changed (default: false)
-     */
-    readonly: boolean;
-    constructor(systemService: SystemService);
+    ngControl: import("@angular/forms").NgControl | null;
+    readonly fc: FormControl<string | string[] | null | undefined>;
     propagateChange: (_: any) => void;
-    writeValue(value: any): void;
+    writeValue(value: string | string[]): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
-    onChange(value: string[] | string | undefined): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CatalogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CatalogComponent, "yuv-catalog", never, { "filter": { "alias": "filter"; "required": false; }; "situation": { "alias": "situation"; "required": false; }; "enableFilterWhenOptionsExceed": { "alias": "enableFilterWhenOptionsExceed"; "required": false; }; "options": { "alias": "options"; "required": false; }; "multiselect": { "alias": "multiselect"; "required": false; }; "classifications": { "alias": "classifications"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CatalogComponent, "yuv-catalog", never, { "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "classifications": { "alias": "classifications"; "required": false; "isSignal": true; }; "situation": { "alias": "situation"; "required": false; }; }, {}, never, never, true, never>;
 }

package/forms/lib/elements/data-grid/edit-table-data/edit-data.component.d.ts CHANGED Viewed

@@ -1,18 +1,19 @@
 import { OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { Situation } from '@yuuvis/client-core';
+import { ObjectTypeField, Situation } from '@yuuvis/client-core';
 import * as i0 from "@angular/core";
 export declare class EditTableDataComponent<T = any> implements OnInit {
     #private;
-    errorMassage: import("@angular/core").WritableSignal<any[] | null>;
+    errorMessage: import("@angular/core").WritableSignal<any[] | null>;
     tableForm: FormGroup;
     isInnerTableForm: import("@angular/core").InputSignal<boolean>;
     formElement: {
         [key: string]: any;
     };
+    columns: ObjectTypeField[];
     situation: Situation;
-    header: string;
-    adding: boolean | undefined;
+    header: any;
+    adding: any;
     cancel(): void;
     submit(): void;
     ngOnInit(): void;

package/forms/lib/elements/datetime/datetime.component.d.ts CHANGED Viewed

@@ -1,25 +1,33 @@
+import { OnInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { DatepickerLabels } from '@yuuvis/components/datepicker';
+import { AbstractMatFormField } from '@yuuvis/client-framework/common';
+import { DatepickerComponent, DatepickerLabels } from '@yuuvis/client-framework/datepicker';
 import * as i0 from "@angular/core";
-export declare class DatetimeComponent implements ControlValueAccessor {
+export declare class DatetimeComponent extends AbstractMatFormField<Date | null> implements ControlValueAccessor, OnInit {
+    #private;
     private translate;
-    value: Date | null;
-    locale: string;
+    pickerCmp: import("@angular/core").Signal<DatepickerComponent>;
     labels?: DatepickerLabels;
+    ngControl: import("@angular/forms").NgControl | null;
+    _locale: import("@angular/core").WritableSignal<string>;
+    locale: import("@angular/core").InputSignal<string>;
     /**
      * Whether or not to allow only values in the future (default: false)
      */
-    onlyFutureDates: boolean;
+    onlyFutureDates: import("@angular/core").InputSignal<boolean>;
     /**
      * Will prevent the input from being changed (default: false)
      */
-    readonly: boolean;
+    readonly: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Whether to show the calendar icon that opens the date picker calendar (default: true)
+     */
+    calendar: import("@angular/core").InputSignal<boolean>;
     /**
      * Enables setting time as well (default: false)
      */
-    withTime: boolean;
-    constructor();
-    private _setLabels;
+    withTime: import("@angular/core").InputSignal<boolean>;
+    openCalendar(): void;
     propagateChange: (fn: () => void) => void;
     validationChange: () => void;
     writeValue(value: any): void;
@@ -27,6 +35,7 @@ export declare class DatetimeComponent implements ControlValueAccessor {
     registerOnValidatorChange?(fn: () => void): void;
     registerOnTouched(): void;
     onValueChange(e: any): void;
+    ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DatetimeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DatetimeComponent, "yuv-datetime", never, { "onlyFutureDates": { "alias": "onlyFutureDates"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "withTime": { "alias": "withTime"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatetimeComponent, "yuv-datetime", never, { "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "onlyFutureDates": { "alias": "onlyFutureDates"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "calendar": { "alias": "calendar"; "required": false; "isSignal": true; }; "withTime": { "alias": "withTime"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/forms/lib/elements/datetime-range/datetime-range.component.d.ts CHANGED Viewed

@@ -1,9 +1,10 @@
-import { OnInit } from '@angular/core';
-import { ControlValueAccessor, FormGroup, Validator } from '@angular/forms';
+import { OnDestroy, OnInit } from '@angular/core';
+import { ControlValueAccessor, FormControl, FormGroup } from '@angular/forms';
 import { Operator, RangeValue } from '@yuuvis/client-core';
+import { AbstractMatFormField } from '@yuuvis/client-framework/common';
 import * as i0 from "@angular/core";
-export declare class DatetimeRangeComponent implements ControlValueAccessor, Validator, OnInit {
-    private fb;
+export declare class DatetimeRangeComponent extends AbstractMatFormField<RangeValue> implements ControlValueAccessor, OnInit, OnDestroy {
+    #private;
     /**
      * Enables setting time as well (default: false)
      */
@@ -14,39 +15,23 @@ export declare class DatetimeRangeComponent implements ControlValueAccessor, Val
     readonly: boolean;
     operator: string;
     situation?: string;
-    rangeForm: FormGroup;
-    value?: RangeValue;
     private _isValid;
+    ngControl: import("@angular/forms").NgControl | null;
     availableSearchOptions: {
         label: string;
         value: Operator;
     }[];
-    searchOption: Operator;
+    rangeForm: FormGroup<{
+        dateValue: FormControl<Date | undefined>;
+        operator: FormControl<Operator>;
+        dateValueFrom: FormControl<Date | undefined>;
+    }>;
     propagateChange: (_: any) => void;
     writeValue(value: RangeValue): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
-    onValueChange(): void;
-    validate(): {
-        datecontrol: {
-            valid: boolean;
-        };
-        daterangeorder?: undefined;
-        daterange?: undefined;
-    } | {
-        daterangeorder: {
-            valid: boolean;
-        };
-        datecontrol?: undefined;
-        daterange?: undefined;
-    } | {
-        daterange: {
-            valid: boolean;
-        };
-        datecontrol?: undefined;
-        daterangeorder?: undefined;
-    } | null;
     ngOnInit(): void;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DatetimeRangeComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DatetimeRangeComponent, "yuv-datetime-range", never, { "withTime": { "alias": "withTime"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "operator": { "alias": "operator"; "required": false; }; "situation": { "alias": "situation"; "required": false; }; }, {}, never, never, true, never>;
 }

package/forms/lib/elements/index.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-export * from './catalog/catalog.component';
 export * from './data-grid/data-grid/data-grid.component';
 export * from './datetime/datetime.component';
 export * from './datetime-range/datetime-range.component';