@yuuvis/client-framework 2.12.4 → 2.14.0

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

@@ -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 { 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 tabindex=\"0\" [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    if(this.__focusedIndex !== -1) {\n      return Array.from(this.items || [])[this.__focusedIndex].getAttribute('node-id');\n    }\n    return null;\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 tabindex=\"0\" [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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"}
+{"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 tabindex=\"0\" [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    if(this.__focusedIndex !== -1) {\n      return Array.from(this.items || [])[this.__focusedIndex].getAttribute('node-id');\n    }\n    return null;\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 tabindex=\"0\" [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

@@ -1,7 +1,8 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, input, computed, output, Component, HostBinding, NgModule } from '@angular/core';
+import { inject, input, computed, output, Component, HostBinding, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i3 from '@angular/material/icon';
@@ -38,10 +39,10 @@ class UploadProgressOverlayComponent {
                 return this.translate.instant('yuv.upload-progress-overlay.error.default');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UploadProgressOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UploadProgressOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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: "19.2.15", ngImport: i0, type: UploadProgressOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UploadProgressOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-upload-progress-overlay', standalone: true, imports: [CommonModule,
                         MatButtonModule,
@@ -50,22 +51,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 class UploadProgressComponent {
     constructor() {
+        //#region Dependencies
         this.#uploadService = inject(UploadService);
-        this.progressStatus$ = this.#uploadService.status$;
-        this.completedUp$ = this.#uploadService.uploadStatus$;
+        //#endregion
+        //#region Angular stuff
         this.expanded = true;
         this.resultItemClick = output();
+        /**
+         * Optional list of scope identifiers this component instance should respond to.
+         *
+         * When provided, the component will display upload progress only for uploads
+         * that were initiated with a matching scope via `UploadService.uploadFile()` or
+         * `UploadService.multipartUpload()`. This allows multiple `UploadProgressComponent`
+         * instances to coexist in different sections of the UI, each showing only the uploads
+         * relevant to its own context.
+         *
+         * If omitted, the component responds to all uploads regardless of scope.
+         *
+         * @example
+         * ```html
+         * <!-- Shows only uploads tagged with scope 'mail-editor' or 'attachments-panel' -->
+         * <yuv-upload-progress [scopes]="['mail-editor', 'attachments-panel']" />
+         *
+         * <!-- Shows all uploads (no scope filter) -->
+         * <yuv-upload-progress />
+         * ```
+         */
+        this.scopes = input();
+        //#endregion
+        //#region Properties
+        this.completedUp$ = this.#uploadService.uploadStatus$;
+        this.#status = toSignal(this.#uploadService.status$);
+        this.filteredItems = computed(() => {
+            const items = this.#status()?.items ?? [];
+            const scopes = this.scopes();
+            return scopes?.length ? items.filter((item) => item.scope && scopes.includes(item.scope)) : items;
+        });
     }
+    //#region Dependencies
     #uploadService;
+    #status;
+    //#endregion
+    //#region UI Methods
     close() {
-        this.#uploadService.cancelItem();
+        this.filteredItems().forEach((item) => this.#uploadService.cancelItem(item.id));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UploadProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UploadProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: UploadProgressComponent, isStandalone: true, selector: "yuv-upload-progress", inputs: { scopes: { classPropertyName: "scopes", publicName: "scopes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resultItemClick: "resultItemClick" }, host: { properties: { "class.expanded": "this.expanded" } }, ngImport: i0, template: "@let items = filteredItems();\n@if (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: items.length } }}\n        } @else {\n          {{ 'yuv.upload-progress.header.uploaded' | translate: { count: 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]=\"items\" (itemClick)=\"resultItemClick.emit($event)\" />\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UploadProgressComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UploadProgressComponent, decorators: [{
             type: Component,
-            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"] }]
+            args: [{ selector: 'yuv-upload-progress', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, TranslateModule, UploadProgressOverlayComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let items = filteredItems();\n@if (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: items.length } }}\n        } @else {\n          {{ 'yuv.upload-progress.header.uploaded' | translate: { count: 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]=\"items\" (itemClick)=\"resultItemClick.emit($event)\" />\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']
@@ -75,11 +111,11 @@ const cmp = [
     UploadProgressComponent
 ];
 class YuvUploadProgressModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YuvUploadProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: YuvUploadProgressModule, imports: [UploadProgressComponent], exports: [UploadProgressComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YuvUploadProgressModule, imports: [cmp] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuvUploadProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: YuvUploadProgressModule, imports: [UploadProgressComponent], exports: [UploadProgressComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuvUploadProgressModule, imports: [cmp] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YuvUploadProgressModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuvUploadProgressModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [cmp],

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

@@ -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/lib/upload-progress/upload-progress.module.ts","../../../../../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","import { NgModule } from \"@angular/core\";\nimport { UploadProgressComponent } from \"./upload-progress.component\";\n\n\nconst cmp = [\n    UploadProgressComponent\n]\n\n@NgModule({\n    imports: [cmp],\n    exports: [cmp]\n  })\n  export class YuvUploadProgressModule {}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"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/lib/upload-progress/upload-progress.module.ts","../../../../../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 { ChangeDetectionStrategy, Component, HostBinding, computed, inject, input, output } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\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  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class UploadProgressComponent {\n  //#region Dependencies\n\n  #uploadService = inject(UploadService);\n\n  //#endregion\n\n  //#region Angular stuff\n\n  @HostBinding('class.expanded') expanded = true;\n  resultItemClick = output<UploadResult>();\n\n  /**\n   * Optional list of scope identifiers this component instance should respond to.\n   *\n   * When provided, the component will display upload progress only for uploads\n   * that were initiated with a matching scope via `UploadService.uploadFile()` or\n   * `UploadService.multipartUpload()`. This allows multiple `UploadProgressComponent`\n   * instances to coexist in different sections of the UI, each showing only the uploads\n   * relevant to its own context.\n   *\n   * If omitted, the component responds to all uploads regardless of scope.\n   *\n   * @example\n   * ```html\n   * <!-- Shows only uploads tagged with scope 'mail-editor' or 'attachments-panel' -->\n   * <yuv-upload-progress [scopes]=\"['mail-editor', 'attachments-panel']\" />\n   *\n   * <!-- Shows all uploads (no scope filter) -->\n   * <yuv-upload-progress />\n   * ```\n   */\n  scopes = input<string[]>();\n  //#endregion\n\n  //#region Properties\n\n  completedUp$ = this.#uploadService.uploadStatus$;\n\n  #status = toSignal(this.#uploadService.status$);\n\n  filteredItems = computed(() => {\n    const items = this.#status()?.items ?? [];\n    const scopes = this.scopes();\n    return scopes?.length ? items.filter((item) => item.scope && scopes.includes(item.scope)) : items;\n  });\n\n  //#endregion\n\n  //#region UI Methods\n\n  close(): void {\n    this.filteredItems().forEach((item) => this.#uploadService.cancelItem(item.id));\n  }\n\n  //#endregion\n}\n","@let items = filteredItems();\n@if (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: items.length } }}\n        } @else {\n          {{ 'yuv.upload-progress.header.uploaded' | translate: { count: 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]=\"items\" (itemClick)=\"resultItemClick.emit($event)\" />\n    }\n  </div>\n}\n","import { NgModule } from \"@angular/core\";\nimport { UploadProgressComponent } from \"./upload-progress.component\";\n\n\nconst cmp = [\n    UploadProgressComponent\n]\n\n@NgModule({\n    imports: [cmp],\n    exports: [cmp]\n  })\n  export class YuvUploadProgressModule {}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;MAgBa,8BAA8B,CAAA;AAT3C,IAAA,WAAA,GAAA;AAUE,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC;AACtC,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,gBAAgB,CAAC;QAEpC,IAAA,CAAA,KAAK,GAAG,KAAK,EAAwB;AACrC,QAAA,IAAA,CAAA,MAAM,GAAG,QAAQ,CAAC,MAAK;YACrB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE;AAChC,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;gBACzD;AACF,YAAA,CAAC,CAAC;AACF,YAAA,OAAO,KAAK;AACd,QAAA,CAAC,CAAC;QACF,IAAA,CAAA,SAAS,GAAG,MAAM,EAAgB;AAcnC,IAAA;AA3BC,IAAA,cAAc;AAed,IAAA,MAAM,CAAC,EAAW,EAAA;AAChB,QAAA,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,CAAC;IACpC;AAEA,IAAA,gBAAgB,CAAC,MAAc,EAAA;QAC7B,QAAQ,MAAM;AACZ,YAAA,KAAK,GAAG;gBACN,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,uCAAuC,CAAC;AACxE,YAAA;gBACE,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,2CAA2C,CAAC;;IAEhF;+GA3BW,8BAA8B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAA9B,8BAA8B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChB3C,82CAwCA,EAAA,MAAA,EAAA,CAAA,6kDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED9BY,YAAY,EAAA,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,EACpB,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACf,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,kBAAkB,EAAA,QAAA,EAAA,mCAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAIzC,8BAA8B,EAAA,UAAA,EAAA,CAAA;kBAT1C,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,6BAA6B,EAAA,UAAA,EAC3B,IAAI,EAAA,OAAA,EACP,CAAC,YAAY;wBACpB,eAAe;AACf,wBAAA,aAAa,EAAE,eAAe,EAAE,kBAAkB,CAAC,EAAA,QAAA,EAAA,82CAAA,EAAA,MAAA,EAAA,CAAA,6kDAAA,CAAA,EAAA;;;MEI1C,uBAAuB,CAAA;AARpC,IAAA,WAAA,GAAA;;AAWE,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC;;;QAMP,IAAA,CAAA,QAAQ,GAAG,IAAI;QAC9C,IAAA,CAAA,eAAe,GAAG,MAAM,EAAgB;AAExC;;;;;;;;;;;;;;;;;;;AAmBG;QACH,IAAA,CAAA,MAAM,GAAG,KAAK,EAAY;;;AAK1B,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa;QAEhD,IAAA,CAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC;AAE/C,QAAA,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;YAC5B,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI,EAAE;AACzC,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;AAC5B,YAAA,OAAO,MAAM,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK;AACnG,QAAA,CAAC,CAAC;AAWH,IAAA;;AArDC,IAAA,cAAc;AAoCd,IAAA,OAAO;;;IAYP,KAAK,GAAA;QACH,IAAI,CAAC,aAAa,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACjF;+GArDW,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,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,EChBpC,80BAyBA,EAAA,MAAA,EAAA,CAAA,msCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDdY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,OAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,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,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAK5F,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBARnC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,qBAAqB,cACnB,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,eAAe,EAAE,8BAA8B,CAAC,EAAA,eAAA,EAGvF,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,80BAAA,EAAA,MAAA,EAAA,CAAA,msCAAA,CAAA,EAAA;8BAWhB,QAAQ,EAAA,CAAA;sBAAtC,WAAW;uBAAC,gBAAgB;;;AErB/B,MAAM,GAAG,GAAG;IACR;CACH;MAMc,uBAAuB,CAAA;+GAAvB,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;gHAAvB,uBAAuB,EAAA,OAAA,EAAA,CAPlC,uBAAuB,CAAA,EAAA,OAAA,EAAA,CAAvB,uBAAuB,CAAA,EAAA,CAAA,CAAA;AAOZ,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,uBAAuB,YAHxB,GAAG,CAAA,EAAA,CAAA,CAAA;;4FAGF,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAJrC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,GAAG,CAAC;oBACd,OAAO,EAAE,CAAC,GAAG;AACd,iBAAA;;;ACXH;;AAEG;;;;"}