@yuuvis/client-framework 2.3.3 → 2.3.5

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

@@ -135,6 +135,7 @@ class ListComponent {
             });
         });
         this._selection = [];
+        this.preventChangeUntil = input(() => false);
         /**
          * If `true`, multiple items can be selected at once.
          */
@@ -268,6 +269,9 @@ class ListComponent {
         });
     }
     #emitSelection() {
+        const shouldPrevent = this.preventChangeUntil();
+        if (shouldPrevent())
+            return;
         this.itemSelect.emit(this._selection);
     }
     #preselectItem() {
@@ -283,7 +287,7 @@ class ListComponent {
         if (items.length < 1)
             return;
         // Find the first item that has the "selected"-attribute and is not disabled
-        itemIndexToSelect = items.findIndex((item) => (item.selected() && !item.disabled));
+        itemIndexToSelect = items.findIndex((item) => item.selected() && !item.disabled);
         // If no valid item index is given, but autoSelect is true, select the first item
         if (itemIndexToSelect === -1 && autoSelect) {
             itemIndexToSelect = 0;
@@ -300,7 +304,7 @@ class ListComponent {
         this._keyManager?.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", type: ListComponent, isStandalone: true, selector: "yuv-list", inputs: { multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, selfHandleSelection: { classPropertyName: "selfHandleSelection", publicName: "selfHandleSelection", isSignal: true, isRequired: false, transformFunction: null }, autoSelect: { classPropertyName: "autoSelect", publicName: "autoSelect", isSignal: true, isRequired: false, transformFunction: null }, disableSelection: { classPropertyName: "disableSelection", publicName: "disableSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", itemFocus: "itemFocus" }, host: { attributes: { "role": "listbox", "tabindex": "0" }, listeners: { "keydown": "onKeydown($event)", "focus": "onFocus()" }, properties: { "class.self-handle-selection": "selfHandleSelection()" } }, queries: [{ propertyName: "items", predicate: ListItemDirective, isSignal: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["yuv-list{display:block;max-height:100%;overflow-y:auto;outline:none}yuv-list:not(.self-handle-selection) [yuvListItem]{position:relative;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease}yuv-list:not(.self-handle-selection) [yuvListItem]:hover,yuv-list:not(.self-handle-selection) [yuvListItem][aria-current=true]{background-color:var(--ymt-focus-background);color:var(--ymt-on-focus-background)}yuv-list:not(.self-handle-selection) [yuvListItem][aria-selected=true]{background-color:var(--ymt-selection-background);color:var(--ymt-on-selection-background);font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: A11yModule }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", type: ListComponent, isStandalone: true, selector: "yuv-list", inputs: { preventChangeUntil: { classPropertyName: "preventChangeUntil", publicName: "preventChangeUntil", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, selfHandleSelection: { classPropertyName: "selfHandleSelection", publicName: "selfHandleSelection", isSignal: true, isRequired: false, transformFunction: null }, autoSelect: { classPropertyName: "autoSelect", publicName: "autoSelect", isSignal: true, isRequired: false, transformFunction: null }, disableSelection: { classPropertyName: "disableSelection", publicName: "disableSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", itemFocus: "itemFocus" }, host: { attributes: { "role": "listbox", "tabindex": "0" }, listeners: { "keydown": "onKeydown($event)", "focus": "onFocus()" }, properties: { "class.self-handle-selection": "selfHandleSelection()" } }, queries: [{ propertyName: "items", predicate: ListItemDirective, isSignal: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["yuv-list{display:block;max-height:100%;overflow-y:auto;outline:none}yuv-list:not(.self-handle-selection) [yuvListItem]{position:relative;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease}yuv-list:not(.self-handle-selection) [yuvListItem]:hover,yuv-list:not(.self-handle-selection) [yuvListItem][aria-current=true]{background-color:var(--ymt-focus-background);color:var(--ymt-on-focus-background)}yuv-list:not(.self-handle-selection) [yuvListItem][aria-selected=true]{background-color:var(--ymt-selection-background);color:var(--ymt-on-selection-background);font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: A11yModule }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,

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

@@ -1 +1 @@
-{"version":3,"file":"yuuvis-client-framework-list.mjs","sources":["../../../../../libs/yuuvis/client-framework/list/src/lib/list-item.directive.ts","../../../../../libs/yuuvis/client-framework/list/src/lib/list.component.ts","../../../../../libs/yuuvis/client-framework/list/src/lib/list.module.ts","../../../../../libs/yuuvis/client-framework/list/src/yuuvis-client-framework-list.ts"],"sourcesContent":["import { Highlightable } from '@angular/cdk/a11y';\nimport { Directive, ElementRef, HostListener, inject, input, Input, linkedSignal } from '@angular/core';\n\n/**\n * Directive for list items. It is used in the `yuvList` component\n * to keep track of active and selected items. Every element with this\n * directive will be treated as a list item and can be selected and focused.\n * \n *```html\n * <yuv-list (itemSelect)=\"itemSelected($event)\">\n *   <div yuvListItem>Entry #1</div>\n *   <div yuvListItem>Entry #2</div>\n * </yuv-list>\n * ```\n */\n@Directive({\n  selector: '[yuvListItem]',\n  standalone: true,\n  host: {\n    '[attr.aria-current]': 'activeInput()',\n    '[attr.aria-selected]': 'selectedInput()'\n  }\n})\nexport class ListItemDirective implements Highlightable {\n  #elRef = inject(ElementRef);\n\n  onClick?: (evt: MouseEvent) => void;\n\n  // TO SATISFY THE HIGHLIGHTABLE INTERFACE\n  @Input() disabled?: boolean | undefined;\n\n  /**\n   * Whether the item is active or not. \n   */\n  active = input<boolean>(false);\n  /**\n   * Whether the item is selected or not. \n   */\n  selected = input<boolean>(false);\n\n  selectedInput = linkedSignal({\n    source: this.selected,\n    computation: (newOptions: any, previous: any) => (newOptions !== previous ? newOptions : previous)\n  });\n\n  activeInput = linkedSignal({\n    source: this.active,\n    computation: (newOptions: any, previous: any) => (newOptions !== previous ? newOptions : previous)\n  });\n\n  @HostListener('click', ['$event']) onHostClick(evt: MouseEvent) {\n    if (!this.disabled && this.onClick) {\n      this.#elRef.nativeElement.parentElement.focus();\n      this.onClick(evt);\n    }\n  }\n\n  setActiveStyles(): void {\n    this.activeInput.set(true);\n    this.#scrollIntoView();\n  }\n\n  setInactiveStyles(): void {\n    this.activeInput.set(false);\n  }\n\n  #scrollIntoView() {\n    const el = this.#elRef.nativeElement as HTMLElement;\n    const { bottom, top, left, right } = el.getBoundingClientRect();\n    const containerRect = this.#elRef.nativeElement.parentElement.getBoundingClientRect();\n\n    const offsetY =\n      top <= containerRect.top\n        ? containerRect.top - top > 0\n          ? (containerRect.top - top) * -1\n          : 0\n        : bottom - containerRect.bottom > 0\n          ? bottom - containerRect.bottom\n          : 0;\n    const offsetX =\n      left <= containerRect.left\n        ? containerRect.left - left > 0\n          ? (containerRect.left - left) * -1\n          : 0\n        : right - containerRect.right > 0\n          ? right - containerRect.right\n          : 0;\n\n    if (offsetX || offsetY) (this.#elRef.nativeElement.parentElement as HTMLElement).scrollBy(offsetX, offsetY);\n  }\n}\n","import { A11yModule, ActiveDescendantKeyManager } from '@angular/cdk/a11y';\nimport { Directionality } from '@angular/cdk/bidi';\nimport { CommonModule } from '@angular/common';\nimport {\n  Component,\n  ElementRef,\n  HostAttributeToken,\n  HostListener,\n  OnDestroy,\n  ViewEncapsulation,\n  contentChildren,\n  effect,\n  inject,\n  input,\n  output,\n  untracked, AfterContentInit\n} from '@angular/core';\nimport { ListItemDirective } from './list-item.directive';\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\n\n/**\n * Component rendering a simple list of items. It supports keyboard\n * navigation as well as accessibility. To create a list just wrap\n * `yuvListItem` elements into this component:\n *\n * ```html\n * <yuv-list (itemSelect)=\"itemSelected($event)\">\n *   <div yuvListItem>Entry #1</div>\n *   <div yuvListItem>Entry #2</div>\n * </yuv-list>\n * ```\n */\n@Component({\n  selector: 'yuv-list',\n  standalone: true,\n  imports: [CommonModule, A11yModule],\n  template: '<ng-content></ng-content>',\n  styleUrl: './list.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    role: 'listbox',\n    tabindex: '0',\n    '[class.self-handle-selection]': 'selfHandleSelection()'\n  }\n})\nexport class ListComponent implements AfterContentInit, OnDestroy {\n  #dir = inject(Directionality);\n  #elRef = inject(ElementRef);\n\n  @HostListener('keydown', ['$event']) onKeydown(event: KeyboardEvent) {\n    if (this.disableSelection()) return;\n    if (event.code === 'Escape') {\n      this.clear();\n    }\n\n    if (event.code === 'Space' || (this.selectOnEnter && event.code === 'Enter')) {\n      // prevent default behavior of space in scroll environments\n      event.preventDefault();\n      const aii: number = this._keyManager.activeItemIndex !== null ? this._keyManager.activeItemIndex : -1;\n      if (aii >= 0) {\n        this.#select(aii);\n        this.#emitSelection();\n      }\n    } else this._keyManager?.onKeydown(event);\n  }\n\n  @HostListener('focus') onFocus() {\n    // set timeout to check if the focus is coming from an item being clicked\n    setTimeout(() => {\n      // if there already is an active item, we do not want to set the focus again\n      if (this._keyManager.activeItemIndex === -1 && this.items().length > 0) {\n        const indexToFocus = this._selection.length > 0 ? this._selection[0] : 0;\n        this._keyManager.setActiveItem(indexToFocus);\n        this.itemFocus.emit(indexToFocus);\n        this.#updateActiveItemState();\n      }\n    }, 200);\n\n    // if (this.items().length > 0) {\n    //   const indexToFocus = this._selection.length > 0 ? this._selection[0] : 0;\n    //   this._keyManager.setActiveItem(indexToFocus);\n    //   this.itemFocus.emit(indexToFocus);\n    //   this.#updateActiveItemState();\n    // }\n  }\n\n  items = contentChildren(ListItemDirective);\n\n  #itemsEffect = effect(() => {\n    const items = this.items();\n\n    if (this._keyManager) this._keyManager.destroy();\n\n    untracked(() => {\n      this._keyManager = this.horizontal\n        ? new ActiveDescendantKeyManager(items).withWrap().withHorizontalOrientation(this.#dir.value)\n        : new ActiveDescendantKeyManager(items).withWrap();\n\n      this._keyManager.change.subscribe((activeIndex) => {\n        if (activeIndex !== null) {\n          this.#updateActiveItemState();\n          this.itemFocus.emit(activeIndex);\n        }\n      });\n\n      items.forEach((item, index) => {\n        item.onClick = (evt: MouseEvent) => {\n          this.select(index, evt.shiftKey, evt.ctrlKey);\n        };\n        item.activeInput.set(false);\n      });\n      if (this._lastSelection !== undefined && this._lastSelection <= items.length) {\n        this.select(this._lastSelection);\n      }\n    });\n  });\n\n  private _keyManager!: ActiveDescendantKeyManager<ListItemDirective>;\n  private _selection: number[] = [];\n  private _lastSelection?: number;\n\n  /**\n   * If `true`, multiple items can be selected at once.\n   */\n  multiselect = input<boolean>(false);\n  /**\n   * If `true`, the component will handle selection itself. This means that\n   * the parent component will be responsible for styling the selected and\n   * focused items. If `false`, the component will take care of visualizing\n   * the selection and focus states.\n   * @default false\n   */\n  selfHandleSelection = input<boolean>(false);\n  \n  autoSelect = input<boolean, BooleanInput>(false, { transform: (value: BooleanInput) => coerceBooleanProperty(value) });\n\n  /**\n   * Emits the selected items indices.\n   * @type {output<number[]>}\n   */\n  itemSelect = output<number[]>();\n  /**\n   * Emits the index of the item that has focus.\n   * @type {output<number>}\n   */\n  itemFocus = output<number>();\n\n  // autoselectFirst: boolean = (inject(new HostAttributeToken('autoselectFirst'), { optional: true }) || 'false') === 'true';\n  selectOnEnter: boolean = (inject(new HostAttributeToken('selectOnEnter'), { optional: true }) || 'false') === 'true';\n  horizontal: boolean = (inject(new HostAttributeToken('horizontal'), { optional: true }) || 'false') === 'true';\n\n  /**\n   * If `true`, the list will not allow selection of items.\n   * This is useful for lists that are used for display purposes only.\n   */\n  disableSelection = input<boolean>(false);\n\n  focus() {\n    this.#elRef.nativeElement.focus();\n  }\n\n  select(index: number, shiftKey = false, ctrlKey = false) {\n    if (this.disableSelection() || index < 0) return;\n    if (index >= this.items().length) index = this.items().length - 1;\n    if (this._keyManager) this._keyManager.setActiveItem(index);\n\n    this.#select(index, shiftKey, ctrlKey);\n    this.#emitSelection();\n  }\n\n  /**\n   * Clear the current selection.\n   * @param silent If `true`, the `itemSelect` event will not be emitted.\n   */\n  clear(silent = false) {\n    if (this._selection.length !== 0) {\n      this.#select(-1);\n      this._keyManager.setActiveItem(-1);\n      if (!silent) this.#emitSelection();\n    }\n  }\n\n  #select(index: number, shiftKey = false, ctrlKey = false) {\n    if (index === -1) this._selection = [];\n    else {\n      if (this.multiselect()) {\n        this._selection = this._selection.filter((i) => i !== index);\n        if (ctrlKey) {\n          this._selection.push(index);\n        } else if (shiftKey) {\n          if (this._lastSelection) {\n            for (let i = this._lastSelection < index ? this._lastSelection : index; i < (this._lastSelection > index ? this._lastSelection : index); i++) {\n              this._selection.push(i);\n            }\n          } else {\n            this._selection = [index];\n          }\n        } else {\n          this._selection = [index];\n        }\n      } else this._selection = [index];\n    }\n    this._lastSelection = this._selection.length === 0 ? undefined : index;\n    this._selection.sort();\n\n    this.items().forEach((item: ListItemDirective, i: number) => item.selectedInput.set(this._selection.includes(i)));\n  }\n\n  #updateActiveItemState() {\n    const activeIndex = this._keyManager.activeItemIndex;\n    this.items().forEach((item: ListItemDirective, i: number) => {\n      item.activeInput.set(i === activeIndex);\n    });\n  }\n\n  #emitSelection() {\n    this.itemSelect.emit(this._selection);\n  }\n  \n  #preselectItem() {\n    /**\n     * Initially select the first item that has the \"selected\"-attribute\n     * and is not disabled. If no such item exists, select the first item\n     * if `autoSelect` is true.\n     */\n    const items = this.items();\n    const autoSelect = this.autoSelect();\n    let itemIndexToSelect = -1;\n    \n    // If the list has no items, do nothing.\n    if (items.length < 1) return;\n    \n    // Find the first item that has the \"selected\"-attribute and is not disabled\n    itemIndexToSelect = items.findIndex((item) => (item.selected() && !item.disabled));\n    \n    // If no valid item index is given, but autoSelect is true, select the first item\n    if (itemIndexToSelect === -1 && autoSelect) {\n      itemIndexToSelect = 0;\n    }\n    \n    // If there is a valid item index, select that item, otherwise do nothing\n    if (itemIndexToSelect !== -1) {\n      this.select(itemIndexToSelect);\n    }\n  }\n  \n  ngAfterContentInit(): void {this.#preselectItem();\n  }\n  \n  ngOnDestroy(): void {\n    this._keyManager?.destroy();\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { ListItemDirective } from './list-item.directive';\nimport { ListComponent } from './list.component';\n\n@NgModule({\n  imports: [ListComponent, ListItemDirective],\n  exports: [ListComponent, ListItemDirective]\n})\nexport class YuvListModule {}\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-list.mjs","sources":["../../../../../libs/yuuvis/client-framework/list/src/lib/list-item.directive.ts","../../../../../libs/yuuvis/client-framework/list/src/lib/list.component.ts","../../../../../libs/yuuvis/client-framework/list/src/lib/list.module.ts","../../../../../libs/yuuvis/client-framework/list/src/yuuvis-client-framework-list.ts"],"sourcesContent":["import { Highlightable } from '@angular/cdk/a11y';\nimport { Directive, ElementRef, HostListener, inject, input, Input, linkedSignal } from '@angular/core';\n\n/**\n * Directive for list items. It is used in the `yuvList` component\n * to keep track of active and selected items. Every element with this\n * directive will be treated as a list item and can be selected and focused.\n * \n *```html\n * <yuv-list (itemSelect)=\"itemSelected($event)\">\n *   <div yuvListItem>Entry #1</div>\n *   <div yuvListItem>Entry #2</div>\n * </yuv-list>\n * ```\n */\n@Directive({\n  selector: '[yuvListItem]',\n  standalone: true,\n  host: {\n    '[attr.aria-current]': 'activeInput()',\n    '[attr.aria-selected]': 'selectedInput()'\n  }\n})\nexport class ListItemDirective implements Highlightable {\n  #elRef = inject(ElementRef);\n\n  onClick?: (evt: MouseEvent) => void;\n\n  // TO SATISFY THE HIGHLIGHTABLE INTERFACE\n  @Input() disabled?: boolean | undefined;\n\n  /**\n   * Whether the item is active or not. \n   */\n  active = input<boolean>(false);\n  /**\n   * Whether the item is selected or not. \n   */\n  selected = input<boolean>(false);\n\n  selectedInput = linkedSignal({\n    source: this.selected,\n    computation: (newOptions: any, previous: any) => (newOptions !== previous ? newOptions : previous)\n  });\n\n  activeInput = linkedSignal({\n    source: this.active,\n    computation: (newOptions: any, previous: any) => (newOptions !== previous ? newOptions : previous)\n  });\n\n  @HostListener('click', ['$event']) onHostClick(evt: MouseEvent) {\n    if (!this.disabled && this.onClick) {\n      this.#elRef.nativeElement.parentElement.focus();\n      this.onClick(evt);\n    }\n  }\n\n  setActiveStyles(): void {\n    this.activeInput.set(true);\n    this.#scrollIntoView();\n  }\n\n  setInactiveStyles(): void {\n    this.activeInput.set(false);\n  }\n\n  #scrollIntoView() {\n    const el = this.#elRef.nativeElement as HTMLElement;\n    const { bottom, top, left, right } = el.getBoundingClientRect();\n    const containerRect = this.#elRef.nativeElement.parentElement.getBoundingClientRect();\n\n    const offsetY =\n      top <= containerRect.top\n        ? containerRect.top - top > 0\n          ? (containerRect.top - top) * -1\n          : 0\n        : bottom - containerRect.bottom > 0\n          ? bottom - containerRect.bottom\n          : 0;\n    const offsetX =\n      left <= containerRect.left\n        ? containerRect.left - left > 0\n          ? (containerRect.left - left) * -1\n          : 0\n        : right - containerRect.right > 0\n          ? right - containerRect.right\n          : 0;\n\n    if (offsetX || offsetY) (this.#elRef.nativeElement.parentElement as HTMLElement).scrollBy(offsetX, offsetY);\n  }\n}\n","import { A11yModule, ActiveDescendantKeyManager } from '@angular/cdk/a11y';\nimport { Directionality } from '@angular/cdk/bidi';\nimport { CommonModule } from '@angular/common';\nimport {\n  Component,\n  ElementRef,\n  HostAttributeToken,\n  HostListener,\n  OnDestroy,\n  ViewEncapsulation,\n  contentChildren,\n  effect,\n  inject,\n  input,\n  output,\n  untracked,\n  AfterContentInit\n} from '@angular/core';\nimport { ListItemDirective } from './list-item.directive';\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\n\n/**\n * Component rendering a simple list of items. It supports keyboard\n * navigation as well as accessibility. To create a list just wrap\n * `yuvListItem` elements into this component:\n *\n * ```html\n * <yuv-list (itemSelect)=\"itemSelected($event)\">\n *   <div yuvListItem>Entry #1</div>\n *   <div yuvListItem>Entry #2</div>\n * </yuv-list>\n * ```\n */\n@Component({\n  selector: 'yuv-list',\n  standalone: true,\n  imports: [CommonModule, A11yModule],\n  template: '<ng-content></ng-content>',\n  styleUrl: './list.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    role: 'listbox',\n    tabindex: '0',\n    '[class.self-handle-selection]': 'selfHandleSelection()'\n  }\n})\nexport class ListComponent implements AfterContentInit, OnDestroy {\n  #dir = inject(Directionality);\n  #elRef = inject(ElementRef);\n\n  @HostListener('keydown', ['$event']) onKeydown(event: KeyboardEvent) {\n    if (this.disableSelection()) return;\n    if (event.code === 'Escape') {\n      this.clear();\n    }\n\n    if (event.code === 'Space' || (this.selectOnEnter && event.code === 'Enter')) {\n      // prevent default behavior of space in scroll environments\n      event.preventDefault();\n      const aii: number = this._keyManager.activeItemIndex !== null ? this._keyManager.activeItemIndex : -1;\n      if (aii >= 0) {\n        this.#select(aii);\n        this.#emitSelection();\n      }\n    } else this._keyManager?.onKeydown(event);\n  }\n\n  @HostListener('focus') onFocus() {\n    // set timeout to check if the focus is coming from an item being clicked\n    setTimeout(() => {\n      // if there already is an active item, we do not want to set the focus again\n      if (this._keyManager.activeItemIndex === -1 && this.items().length > 0) {\n        const indexToFocus = this._selection.length > 0 ? this._selection[0] : 0;\n        this._keyManager.setActiveItem(indexToFocus);\n        this.itemFocus.emit(indexToFocus);\n        this.#updateActiveItemState();\n      }\n    }, 200);\n\n    // if (this.items().length > 0) {\n    //   const indexToFocus = this._selection.length > 0 ? this._selection[0] : 0;\n    //   this._keyManager.setActiveItem(indexToFocus);\n    //   this.itemFocus.emit(indexToFocus);\n    //   this.#updateActiveItemState();\n    // }\n  }\n\n  items = contentChildren(ListItemDirective);\n\n  #itemsEffect = effect(() => {\n    const items = this.items();\n\n    if (this._keyManager) this._keyManager.destroy();\n\n    untracked(() => {\n      this._keyManager = this.horizontal\n        ? new ActiveDescendantKeyManager(items).withWrap().withHorizontalOrientation(this.#dir.value)\n        : new ActiveDescendantKeyManager(items).withWrap();\n\n      this._keyManager.change.subscribe((activeIndex) => {\n        if (activeIndex !== null) {\n          this.#updateActiveItemState();\n          this.itemFocus.emit(activeIndex);\n        }\n      });\n\n      items.forEach((item, index) => {\n        item.onClick = (evt: MouseEvent) => {\n          this.select(index, evt.shiftKey, evt.ctrlKey);\n        };\n        item.activeInput.set(false);\n      });\n      if (this._lastSelection !== undefined && this._lastSelection <= items.length) {\n        this.select(this._lastSelection);\n      }\n    });\n  });\n\n  private _keyManager!: ActiveDescendantKeyManager<ListItemDirective>;\n  private _selection: number[] = [];\n  private _lastSelection?: number;\n\n  preventChangeUntil = input<() => boolean>(() => false);\n  /**\n   * If `true`, multiple items can be selected at once.\n   */\n  multiselect = input<boolean>(false);\n  /**\n   * If `true`, the component will handle selection itself. This means that\n   * the parent component will be responsible for styling the selected and\n   * focused items. If `false`, the component will take care of visualizing\n   * the selection and focus states.\n   * @default false\n   */\n  selfHandleSelection = input<boolean>(false);\n\n  autoSelect = input<boolean, BooleanInput>(false, { transform: (value: BooleanInput) => coerceBooleanProperty(value) });\n\n  /**\n   * Emits the selected items indices.\n   * @type {output<number[]>}\n   */\n  itemSelect = output<number[]>();\n  /**\n   * Emits the index of the item that has focus.\n   * @type {output<number>}\n   */\n  itemFocus = output<number>();\n\n  // autoselectFirst: boolean = (inject(new HostAttributeToken('autoselectFirst'), { optional: true }) || 'false') === 'true';\n  selectOnEnter: boolean = (inject(new HostAttributeToken('selectOnEnter'), { optional: true }) || 'false') === 'true';\n  horizontal: boolean = (inject(new HostAttributeToken('horizontal'), { optional: true }) || 'false') === 'true';\n\n  /**\n   * If `true`, the list will not allow selection of items.\n   * This is useful for lists that are used for display purposes only.\n   */\n  disableSelection = input<boolean>(false);\n\n  focus() {\n    this.#elRef.nativeElement.focus();\n  }\n\n  select(index: number, shiftKey = false, ctrlKey = false) {\n    if (this.disableSelection() || index < 0) return;\n    if (index >= this.items().length) index = this.items().length - 1;\n    if (this._keyManager) this._keyManager.setActiveItem(index);\n\n    this.#select(index, shiftKey, ctrlKey);\n    this.#emitSelection();\n  }\n\n  /**\n   * Clear the current selection.\n   * @param silent If `true`, the `itemSelect` event will not be emitted.\n   */\n  clear(silent = false) {\n    if (this._selection.length !== 0) {\n      this.#select(-1);\n      this._keyManager.setActiveItem(-1);\n      if (!silent) this.#emitSelection();\n    }\n  }\n\n  #select(index: number, shiftKey = false, ctrlKey = false) {\n    if (index === -1) this._selection = [];\n    else {\n      if (this.multiselect()) {\n        this._selection = this._selection.filter((i) => i !== index);\n        if (ctrlKey) {\n          this._selection.push(index);\n        } else if (shiftKey) {\n          if (this._lastSelection) {\n            for (let i = this._lastSelection < index ? this._lastSelection : index; i < (this._lastSelection > index ? this._lastSelection : index); i++) {\n              this._selection.push(i);\n            }\n          } else {\n            this._selection = [index];\n          }\n        } else {\n          this._selection = [index];\n        }\n      } else this._selection = [index];\n    }\n    this._lastSelection = this._selection.length === 0 ? undefined : index;\n    this._selection.sort();\n\n    this.items().forEach((item: ListItemDirective, i: number) => item.selectedInput.set(this._selection.includes(i)));\n  }\n\n  #updateActiveItemState() {\n    const activeIndex = this._keyManager.activeItemIndex;\n    this.items().forEach((item: ListItemDirective, i: number) => {\n      item.activeInput.set(i === activeIndex);\n    });\n  }\n\n  #emitSelection() {\n    const shouldPrevent = this.preventChangeUntil();\n    if (shouldPrevent()) return;\n    this.itemSelect.emit(this._selection);\n  }\n\n  #preselectItem() {\n    /**\n     * Initially select the first item that has the \"selected\"-attribute\n     * and is not disabled. If no such item exists, select the first item\n     * if `autoSelect` is true.\n     */\n    const items = this.items();\n    const autoSelect = this.autoSelect();\n    let itemIndexToSelect = -1;\n\n    // If the list has no items, do nothing.\n    if (items.length < 1) return;\n\n    // Find the first item that has the \"selected\"-attribute and is not disabled\n    itemIndexToSelect = items.findIndex((item) => item.selected() && !item.disabled);\n\n    // If no valid item index is given, but autoSelect is true, select the first item\n    if (itemIndexToSelect === -1 && autoSelect) {\n      itemIndexToSelect = 0;\n    }\n\n    // If there is a valid item index, select that item, otherwise do nothing\n    if (itemIndexToSelect !== -1) {\n      this.select(itemIndexToSelect);\n    }\n  }\n\n  ngAfterContentInit(): void {\n    this.#preselectItem();\n  }\n\n  ngOnDestroy(): void {\n    this._keyManager?.destroy();\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { ListItemDirective } from './list-item.directive';\nimport { ListComponent } from './list.component';\n\n@NgModule({\n  imports: [ListComponent, ListItemDirective],\n  exports: [ListComponent, ListItemDirective]\n})\nexport class YuvListModule {}\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-master-details.mjs

@@ -1,11 +1,13 @@
 import * as i0 from '@angular/core';
-import { contentChild, model, input, Input, HostBinding, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { inject, ChangeDetectorRef, contentChild, viewChild, model, effect, untracked, input, Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@yuuvis/client-framework/popout';
 import { YuvPopoutModule } from '@yuuvis/client-framework/popout';
 import * as i2 from '@yuuvis/client-framework/split-view';
 import { YuvSplitViewModule } from '@yuuvis/client-framework/split-view';
+import { DeviceService } from '@yuuvis/client-core';
+import { MatDialog } from '@angular/material/dialog';
 
 /**
  * Component rendering a master/details view.
@@ -17,20 +19,14 @@ import { YuvSplitViewModule } from '@yuuvis/client-framework/split-view';
  * </yuv-master-details>
  */
 class YuvMasterDetailsComponent {
-    /**
-     * Layout options to be applied.
-     */
-    set layoutOptions(lo) {
-        this._layoutOptions = lo ? { ...this._defaultLayoutOptions, ...lo } : this._defaultLayoutOptions;
-    }
-    get layoutOptions() {
-        return this._layoutOptions;
-    }
-    constructor(elRef, cd) {
-        this.elRef = elRef;
-        this.cd = cd;
+    constructor() {
+        this.#device = inject(DeviceService);
+        this.#dialog = inject(MatDialog);
+        this.#cd = inject(ChangeDetectorRef);
         this.masterPane = contentChild.required('yuvMasterPane');
         this.detailsPane = contentChild.required('yuvDetailsPane');
+        this.detailsPaneTplateRef = viewChild.required('tplDetailsPanel');
+        this.#detailsPaneDialogRef = null;
         this._defaultLayoutOptions = {
             masterSize: 80,
             masterMinSize: undefined,
@@ -42,6 +38,36 @@ class YuvMasterDetailsComponent {
          * Enable/disable details pane (also use as two-way-bound variable: [(detailsActive)])
          */
         this.detailsActive = model(false);
+        this.#detailsActiveEffect = effect(() => {
+            const da = this.detailsActive();
+            untracked(() => {
+                if (this.#detailsPaneDialogRef)
+                    this.#detailsPaneDialogRef.close();
+                if (this.smallScreenLayout() && da) {
+                    this.#detailsPaneDialogRef = this.#dialog.open(this.detailsPaneTplateRef(), {
+                        width: '90vw',
+                        height: '95vh',
+                    });
+                    this.#detailsPaneDialogRef.afterClosed().subscribe((silent) => {
+                        if (!silent) {
+                            this.detailsActive.set(false);
+                        }
+                        this.#detailsPaneDialogRef = null;
+                    });
+                }
+            });
+        });
+        this.smallScreenLayout = this.#device.smallScreenLayout;
+        this.#smallScreenLayoutEffect = effect(() => {
+            const ssl = this.smallScreenLayout();
+            if (this.#detailsPaneDialogRef)
+                this.#detailsPaneDialogRef.close(true);
+            untracked(() => {
+                const da = this.detailsActive();
+                if (ssl && da)
+                    this.detailsActive.set(false);
+            });
+        });
         this._layoutOptions = this._defaultLayoutOptions;
         this.undockableDetails = input(false);
         /**
@@ -52,39 +78,43 @@ class YuvMasterDetailsComponent {
          * Size of the gutter in Pixel.
          */
         this.gutterSize = input(undefined);
-        /**
-         * The mode od how to render the details pane. By default it will be rendered next to the master
-         * pane (resizable by split view). Choosing 'ontop' mode will overlay the details over the master pane
-         * which may be a good choice for smaller screens.
-         */
-        this.mode = 'aside';
+    }
+    #device;
+    #dialog;
+    #cd;
+    #detailsPaneDialogRef;
+    #detailsActiveEffect;
+    #smallScreenLayoutEffect;
+    /**
+     * Layout options to be applied.
+     */
+    set layoutOptions(lo) {
+        this._layoutOptions = lo ? { ...this._defaultLayoutOptions, ...lo } : this._defaultLayoutOptions;
+    }
+    get layoutOptions() {
+        return this._layoutOptions;
     }
     onPopIn() {
         this.detailsActive.set(true);
-        this.cd.detectChanges();
+        this.#cd.detectChanges();
     }
     ngAfterViewInit() {
         if (!this.masterPane() || !this.detailsPane()) {
             console.error('MasterDetailsComponent is supposed to contain a master and a details pane.');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YuvMasterDetailsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: YuvMasterDetailsComponent, isStandalone: true, selector: "yuv-master-details", inputs: { detailsActive: { classPropertyName: "detailsActive", publicName: "detailsActive", isSignal: true, isRequired: false, transformFunction: null }, layoutSettingsID: { classPropertyName: "layoutSettingsID", publicName: "layoutSettingsID", isSignal: false, isRequired: false, transformFunction: null }, layoutOptions: { classPropertyName: "layoutOptions", publicName: "layoutOptions", isSignal: false, isRequired: false, transformFunction: null }, undockableDetails: { classPropertyName: "undockableDetails", publicName: "undockableDetails", isSignal: true, isRequired: false, transformFunction: null }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: true, isRequired: false, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { detailsActive: "detailsActiveChange" }, host: { attributes: { "class.detailsActive": "detailsActive()" }, properties: { "attr.data-mode": "this.mode" } }, queries: [{ propertyName: "masterPane", first: true, predicate: ["yuvMasterPane"], descendants: true, isSignal: true }, { propertyName: "detailsPane", first: true, predicate: ["yuvDetailsPane"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (mode === 'aside') {\n  <yuv-split-view [disabled]=\"!layoutOptions.resizable\" [gutterSize]=\"gutterSize() || 1\"\n    [layoutSettingsID]=\"layoutSettingsID\">\n    <ng-template yuvSplitArea [size]=\"layoutOptions.masterSize\" [minSize]=\"layoutOptions.masterMinSize\">\n      <div class=\"yuv-md-panel master\" [ngStyle]=\"panelStyle()\">\n        <ng-container *ngTemplateOutlet=\"masterPane()\"></ng-container>\n      </div>\n    </ng-template>\n    <ng-template yuvSplitArea [size]=\"layoutOptions.detailsSize\" [minSize]=\"layoutOptions.detailsMinSize\"\n      [visible]=\"detailsActive()\">\n      <div class=\"yuv-md-panel details\" [ngStyle]=\"panelStyle()\">\n        @if (undockableDetails()) {\n          <yuv-popout (popIn)=\"onPopIn()\" (popOut)=\"detailsActive.set(false)\"><ng-container\n          *ngTemplateOutlet=\"tplDetailsPanel\"></ng-container></yuv-popout>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"tplDetailsPanel\"></ng-container>\n        }\n      </div>\n    </ng-template>\n  </yuv-split-view>\n} @else {\n  <div class=\"yuvMasterPane\"><ng-container *ngTemplateOutlet=\"masterPane()\"></ng-container></div>\n  <div class=\"yuvDetailsPane\" [hidden]=\"!detailsActive()\"><ng-container *ngTemplateOutlet=\"detailsPane()\"></ng-container>\n</div>\n}\n\n\n<ng-template #tplDetailsPanel>\n  <ng-container *ngTemplateOutlet=\"detailsPane()\"></ng-container>\n</ng-template>\n\n", styles: [":host{display:grid;grid-template-rows:1fr;grid-template-columns:1fr}:host ::ng-deep .yuv-md-panel{height:100%;box-sizing:border-box;overflow:auto}:host ::ng-deep .yuv-md-panel>yuv-popout .popoutWrapper,:host ::ng-deep .yuv-md-panel>yuv-popout .innerWrapper{height:100%}:host[data-mode=ontop].detailsActive .yuvMasterPane{display:none}:host[data-mode=ontop] .yuvMasterPane,:host[data-mode=ontop] .yuvDetailsPane{grid-row:1;grid-column:1;overflow:hidden;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: YuvSplitViewModule }, { kind: "directive", type: i2.SplitAreaDirective, selector: "[yuvSplitArea]", inputs: ["size", "minSize", "maxSize", "panelClass", "visible"] }, { kind: "component", type: i2.SplitViewComponent, selector: "yuv-split-view", inputs: ["direction", "gutterSize", "restrictMove", "disabled", "layoutSettingsID"], outputs: ["layoutSettingsChange", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"] }, { kind: "ngmodule", type: YuvPopoutModule }, { kind: "component", type: i3.PopoutComponent, selector: "yuv-popout", inputs: ["triggerPosition", "triggerIcon", "triggerTooltip", "popoutWindowConfig", "disabled"], outputs: ["popOut", "popIn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YuvMasterDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: YuvMasterDetailsComponent, isStandalone: true, selector: "yuv-master-details", inputs: { detailsActive: { classPropertyName: "detailsActive", publicName: "detailsActive", isSignal: true, isRequired: false, transformFunction: null }, layoutSettingsID: { classPropertyName: "layoutSettingsID", publicName: "layoutSettingsID", isSignal: false, isRequired: false, transformFunction: null }, layoutOptions: { classPropertyName: "layoutOptions", publicName: "layoutOptions", isSignal: false, isRequired: false, transformFunction: null }, undockableDetails: { classPropertyName: "undockableDetails", publicName: "undockableDetails", isSignal: true, isRequired: false, transformFunction: null }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: true, isRequired: false, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { detailsActive: "detailsActiveChange" }, host: { attributes: { "class.detailsActive": "detailsActive()" } }, queries: [{ propertyName: "masterPane", first: true, predicate: ["yuvMasterPane"], descendants: true, isSignal: true }, { propertyName: "detailsPane", first: true, predicate: ["yuvDetailsPane"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "detailsPaneTplateRef", first: true, predicate: ["tplDetailsPanel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!smallScreenLayout()) {\n  <yuv-split-view [disabled]=\"!layoutOptions.resizable\" [gutterSize]=\"gutterSize() || 1\"\n    [layoutSettingsID]=\"layoutSettingsID\">\n    <ng-template yuvSplitArea [size]=\"layoutOptions.masterSize\" [minSize]=\"layoutOptions.masterMinSize\">\n      <div class=\"yuv-md-panel master\" [ngStyle]=\"panelStyle()\">\n        <ng-container *ngTemplateOutlet=\"masterPane()\"></ng-container>\n      </div>\n    </ng-template>\n    <ng-template yuvSplitArea [size]=\"layoutOptions.detailsSize\" [minSize]=\"layoutOptions.detailsMinSize\"\n      [visible]=\"detailsActive()\">\n      <div class=\"yuv-md-panel details\" [ngStyle]=\"panelStyle()\">\n        @if (undockableDetails()) {\n          <yuv-popout (popIn)=\"onPopIn()\" (popOut)=\"detailsActive.set(false)\"><ng-container\n          *ngTemplateOutlet=\"tplDetailsPanel\"></ng-container></yuv-popout>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"tplDetailsPanel\"></ng-container>\n        }\n      </div>\n    </ng-template>\n  </yuv-split-view>\n} @else {\n  <div class=\"yuvMasterPane\"><ng-container *ngTemplateOutlet=\"masterPane()\"></ng-container></div>\n}\n\n\n<ng-template #tplDetailsPanel>\n  <ng-container *ngTemplateOutlet=\"detailsPane()\"></ng-container>\n</ng-template>\n\n", styles: [":host{display:grid;grid-template-rows:1fr;grid-template-columns:1fr}:host ::ng-deep .yuv-md-panel{height:100%;box-sizing:border-box;overflow:auto}:host ::ng-deep .yuv-md-panel>yuv-popout .popoutWrapper,:host ::ng-deep .yuv-md-panel>yuv-popout .innerWrapper{height:100%}:host[data-mode=ontop].detailsActive .yuvMasterPane{display:none}:host[data-mode=ontop] .yuvMasterPane,:host[data-mode=ontop] .yuvDetailsPane{grid-row:1;grid-column:1;overflow:hidden;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: YuvSplitViewModule }, { kind: "directive", type: i2.SplitAreaDirective, selector: "[yuvSplitArea]", inputs: ["size", "minSize", "maxSize", "panelClass", "visible"] }, { kind: "component", type: i2.SplitViewComponent, selector: "yuv-split-view", inputs: ["direction", "gutterSize", "restrictMove", "disabled", "layoutSettingsID"], outputs: ["layoutSettingsChange", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"] }, { kind: "ngmodule", type: YuvPopoutModule }, { kind: "component", type: i3.PopoutComponent, selector: "yuv-popout", inputs: ["triggerPosition", "triggerIcon", "triggerTooltip", "popoutWindowConfig", "disabled"], outputs: ["popOut", "popIn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YuvMasterDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-master-details', standalone: true, imports: [CommonModule, YuvSplitViewModule, YuvPopoutModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class.detailsActive': 'detailsActive()'
-                    }, template: "@if (mode === 'aside') {\n  <yuv-split-view [disabled]=\"!layoutOptions.resizable\" [gutterSize]=\"gutterSize() || 1\"\n    [layoutSettingsID]=\"layoutSettingsID\">\n    <ng-template yuvSplitArea [size]=\"layoutOptions.masterSize\" [minSize]=\"layoutOptions.masterMinSize\">\n      <div class=\"yuv-md-panel master\" [ngStyle]=\"panelStyle()\">\n        <ng-container *ngTemplateOutlet=\"masterPane()\"></ng-container>\n      </div>\n    </ng-template>\n    <ng-template yuvSplitArea [size]=\"layoutOptions.detailsSize\" [minSize]=\"layoutOptions.detailsMinSize\"\n      [visible]=\"detailsActive()\">\n      <div class=\"yuv-md-panel details\" [ngStyle]=\"panelStyle()\">\n        @if (undockableDetails()) {\n          <yuv-popout (popIn)=\"onPopIn()\" (popOut)=\"detailsActive.set(false)\"><ng-container\n          *ngTemplateOutlet=\"tplDetailsPanel\"></ng-container></yuv-popout>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"tplDetailsPanel\"></ng-container>\n        }\n      </div>\n    </ng-template>\n  </yuv-split-view>\n} @else {\n  <div class=\"yuvMasterPane\"><ng-container *ngTemplateOutlet=\"masterPane()\"></ng-container></div>\n  <div class=\"yuvDetailsPane\" [hidden]=\"!detailsActive()\"><ng-container *ngTemplateOutlet=\"detailsPane()\"></ng-container>\n</div>\n}\n\n\n<ng-template #tplDetailsPanel>\n  <ng-container *ngTemplateOutlet=\"detailsPane()\"></ng-container>\n</ng-template>\n\n", styles: [":host{display:grid;grid-template-rows:1fr;grid-template-columns:1fr}:host ::ng-deep .yuv-md-panel{height:100%;box-sizing:border-box;overflow:auto}:host ::ng-deep .yuv-md-panel>yuv-popout .popoutWrapper,:host ::ng-deep .yuv-md-panel>yuv-popout .innerWrapper{height:100%}:host[data-mode=ontop].detailsActive .yuvMasterPane{display:none}:host[data-mode=ontop] .yuvMasterPane,:host[data-mode=ontop] .yuvDetailsPane{grid-row:1;grid-column:1;overflow:hidden;height:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { layoutSettingsID: [{
+                    }, template: "@if (!smallScreenLayout()) {\n  <yuv-split-view [disabled]=\"!layoutOptions.resizable\" [gutterSize]=\"gutterSize() || 1\"\n    [layoutSettingsID]=\"layoutSettingsID\">\n    <ng-template yuvSplitArea [size]=\"layoutOptions.masterSize\" [minSize]=\"layoutOptions.masterMinSize\">\n      <div class=\"yuv-md-panel master\" [ngStyle]=\"panelStyle()\">\n        <ng-container *ngTemplateOutlet=\"masterPane()\"></ng-container>\n      </div>\n    </ng-template>\n    <ng-template yuvSplitArea [size]=\"layoutOptions.detailsSize\" [minSize]=\"layoutOptions.detailsMinSize\"\n      [visible]=\"detailsActive()\">\n      <div class=\"yuv-md-panel details\" [ngStyle]=\"panelStyle()\">\n        @if (undockableDetails()) {\n          <yuv-popout (popIn)=\"onPopIn()\" (popOut)=\"detailsActive.set(false)\"><ng-container\n          *ngTemplateOutlet=\"tplDetailsPanel\"></ng-container></yuv-popout>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"tplDetailsPanel\"></ng-container>\n        }\n      </div>\n    </ng-template>\n  </yuv-split-view>\n} @else {\n  <div class=\"yuvMasterPane\"><ng-container *ngTemplateOutlet=\"masterPane()\"></ng-container></div>\n}\n\n\n<ng-template #tplDetailsPanel>\n  <ng-container *ngTemplateOutlet=\"detailsPane()\"></ng-container>\n</ng-template>\n\n", styles: [":host{display:grid;grid-template-rows:1fr;grid-template-columns:1fr}:host ::ng-deep .yuv-md-panel{height:100%;box-sizing:border-box;overflow:auto}:host ::ng-deep .yuv-md-panel>yuv-popout .popoutWrapper,:host ::ng-deep .yuv-md-panel>yuv-popout .innerWrapper{height:100%}:host[data-mode=ontop].detailsActive .yuvMasterPane{display:none}:host[data-mode=ontop] .yuvMasterPane,:host[data-mode=ontop] .yuvDetailsPane{grid-row:1;grid-column:1;overflow:hidden;height:100%}\n"] }]
+        }], propDecorators: { layoutSettingsID: [{
                 type: Input
             }], layoutOptions: [{
                 type: Input
-            }], mode: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-mode']
             }] } });
 
 class YuvMasterDetailsModule {

package/fesm2022/yuuvis-client-framework-master-details.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"yuuvis-client-framework-master-details.mjs","sources":["../../../../../libs/yuuvis/client-framework/master-details/src/lib/master-details.component.ts","../../../../../libs/yuuvis/client-framework/master-details/src/lib/master-details.component.html","../../../../../libs/yuuvis/client-framework/master-details/src/lib/master-details.module.ts","../../../../../libs/yuuvis/client-framework/master-details/src/yuuvis-client-framework-master-details.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  contentChild,\n  ElementRef,\n  HostBinding,\n  input,\n  Input,\n  model,\n  TemplateRef\n} from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\nimport { YuvPopoutModule } from '@yuuvis/client-framework/popout';\nimport { YuvSplitViewModule } from '@yuuvis/client-framework/split-view';\nimport { MasterDetailsLayoutOptions } from './master-details.interface';\n\n/**\n * Component rendering a master/details view.\n *\n * @example\n * <yuv-master-details [(detailsActive)]=\"detailsActive\">\n *   <ng-template #yuvMasterPane>Main Pane</ng-template>\n *   <ng-template #yuvDetailsPane>Details Pane</ng-template>\n * </yuv-master-details>\n */\n@Component({\n  selector: 'yuv-master-details',\n  templateUrl: './master-details.component.html',\n  styleUrls: ['./master-details.component.scss'],\n  standalone: true,\n  imports: [CommonModule, YuvSplitViewModule, YuvPopoutModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class.detailsActive': 'detailsActive()'\n  }\n})\nexport class YuvMasterDetailsComponent implements AfterViewInit {\n  masterPane = contentChild.required<TemplateRef<any>>('yuvMasterPane');\n  detailsPane = contentChild.required<TemplateRef<any>>('yuvDetailsPane');\n\n  private _defaultLayoutOptions: MasterDetailsLayoutOptions = {\n    masterSize: 80,\n    masterMinSize: undefined,\n    detailsSize: 20,\n    detailsMinSize: undefined,\n    resizable: true\n  };\n  /**\n   * Enable/disable details pane (also use as two-way-bound variable: [(detailsActive)])\n   */\n  detailsActive = model<boolean>(false);\n  /**\n   * Layout settings is the state of the master details that could be persisted.\n   * Setting a `layoutSettingsID` will save the current state (details area visibilkity and\n   * split area sizes etc.) to the local storage. If the component is created, it will load\n   * those settings and re-apply them.\n   */\n  @Input() layoutSettingsID?: string;\n  private _layoutOptions: MasterDetailsLayoutOptions = this._defaultLayoutOptions;\n  /**\n   * Layout options to be applied.\n   */\n  @Input() set layoutOptions(lo: Partial<MasterDetailsLayoutOptions>) {\n    this._layoutOptions = lo ? { ...this._defaultLayoutOptions, ...lo } : this._defaultLayoutOptions;\n  }\n  get layoutOptions(): MasterDetailsLayoutOptions {\n    return this._layoutOptions;\n  }\n  undockableDetails = input<boolean>(false);\n  /**\n   * Styles tp be applied to the panels\n   */\n  panelStyle = input<{ [key: string]: string } | undefined>(undefined);\n  /**\n   * Size of the gutter in Pixel.\n   */\n  gutterSize = input<number | undefined>(undefined);\n\n  /**\n   * The mode od how to render the details pane. By default it will be rendered next to the master\n   * pane (resizable by split view). Choosing 'ontop' mode will overlay the details over the master pane\n   * which may be a good choice for smaller screens.\n   */\n  @Input() @HostBinding('attr.data-mode') mode: 'aside' | 'ontop' = 'aside';\n\n  constructor(\n    private elRef: ElementRef,\n    private cd: ChangeDetectorRef\n  ) {}\n\n  onPopIn() {\n    this.detailsActive.set(true);\n    this.cd.detectChanges();\n  }\n\n  ngAfterViewInit() {\n    if (!this.masterPane() || !this.detailsPane()) {\n      console.error('MasterDetailsComponent is supposed to contain a master and a details pane.');\n    }\n  }\n}\n","@if (mode === 'aside') {\n  <yuv-split-view [disabled]=\"!layoutOptions.resizable\" [gutterSize]=\"gutterSize() || 1\"\n    [layoutSettingsID]=\"layoutSettingsID\">\n    <ng-template yuvSplitArea [size]=\"layoutOptions.masterSize\" [minSize]=\"layoutOptions.masterMinSize\">\n      <div class=\"yuv-md-panel master\" [ngStyle]=\"panelStyle()\">\n        <ng-container *ngTemplateOutlet=\"masterPane()\"></ng-container>\n      </div>\n    </ng-template>\n    <ng-template yuvSplitArea [size]=\"layoutOptions.detailsSize\" [minSize]=\"layoutOptions.detailsMinSize\"\n      [visible]=\"detailsActive()\">\n      <div class=\"yuv-md-panel details\" [ngStyle]=\"panelStyle()\">\n        @if (undockableDetails()) {\n          <yuv-popout (popIn)=\"onPopIn()\" (popOut)=\"detailsActive.set(false)\"><ng-container\n          *ngTemplateOutlet=\"tplDetailsPanel\"></ng-container></yuv-popout>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"tplDetailsPanel\"></ng-container>\n        }\n      </div>\n    </ng-template>\n  </yuv-split-view>\n} @else {\n  <div class=\"yuvMasterPane\"><ng-container *ngTemplateOutlet=\"masterPane()\"></ng-container></div>\n  <div class=\"yuvDetailsPane\" [hidden]=\"!detailsActive()\"><ng-container *ngTemplateOutlet=\"detailsPane()\"></ng-container>\n</div>\n}\n\n\n<ng-template #tplDetailsPanel>\n  <ng-container *ngTemplateOutlet=\"detailsPane()\"></ng-container>\n</ng-template>\n\n","import { NgModule } from '@angular/core';\nimport { YuvMasterDetailsComponent } from './master-details.component';\n\n@NgModule({\n  imports: [YuvMasterDetailsComponent],\n  exports: [YuvMasterDetailsComponent]\n})\nexport class YuvMasterDetailsModule {}\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-master-details.mjs","sources":["../../../../../libs/yuuvis/client-framework/master-details/src/lib/master-details.component.ts","../../../../../libs/yuuvis/client-framework/master-details/src/lib/master-details.component.html","../../../../../libs/yuuvis/client-framework/master-details/src/lib/master-details.module.ts","../../../../../libs/yuuvis/client-framework/master-details/src/yuuvis-client-framework-master-details.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  contentChild,\n  effect,\n  ElementRef,\n  HostBinding,\n  inject,\n  input,\n  Input,\n  model,\n  TemplateRef,\n  untracked,\n  viewChild\n} from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\nimport { YuvPopoutModule } from '@yuuvis/client-framework/popout';\nimport { YuvSplitViewModule } from '@yuuvis/client-framework/split-view';\nimport { MasterDetailsLayoutOptions } from './master-details.interface';\nimport { DeviceService } from '@yuuvis/client-core';\nimport { MatDialog, MatDialogRef } from '@angular/material/dialog';\n\n/**\n * Component rendering a master/details view.\n *\n * @example\n * <yuv-master-details [(detailsActive)]=\"detailsActive\">\n *   <ng-template #yuvMasterPane>Main Pane</ng-template>\n *   <ng-template #yuvDetailsPane>Details Pane</ng-template>\n * </yuv-master-details>\n */\n@Component({\n  selector: 'yuv-master-details',\n  templateUrl: './master-details.component.html',\n  styleUrls: ['./master-details.component.scss'],\n  standalone: true,\n  imports: [CommonModule, YuvSplitViewModule, YuvPopoutModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class.detailsActive': 'detailsActive()'\n  }\n})\nexport class YuvMasterDetailsComponent implements AfterViewInit {\n  #device = inject(DeviceService);\n  #dialog = inject(MatDialog);\n  #cd = inject(ChangeDetectorRef);\n\n  masterPane = contentChild.required<TemplateRef<any>>('yuvMasterPane');\n  detailsPane = contentChild.required<TemplateRef<any>>('yuvDetailsPane');\n  detailsPaneTplateRef = viewChild.required<TemplateRef<any>>('tplDetailsPanel');\n  #detailsPaneDialogRef: MatDialogRef<any> | null = null;\n\n  private _defaultLayoutOptions: MasterDetailsLayoutOptions = {\n    masterSize: 80,\n    masterMinSize: undefined,\n    detailsSize: 20,\n    detailsMinSize: undefined,\n    resizable: true\n  };\n  /**\n   * Enable/disable details pane (also use as two-way-bound variable: [(detailsActive)])\n   */\n  detailsActive = model<boolean>(false);\n  #detailsActiveEffect = effect(() => {\n    const da = this.detailsActive();\n    untracked(() => {\n      if (this.#detailsPaneDialogRef) this.#detailsPaneDialogRef.close();\n      if (this.smallScreenLayout() && da) {\n        this.#detailsPaneDialogRef = this.#dialog.open(this.detailsPaneTplateRef(), {\n          width: '90vw',\n          height: '95vh',\n        });\n        this.#detailsPaneDialogRef.afterClosed().subscribe((silent: boolean) => {\n          if (!silent) {\n            this.detailsActive.set(false);\n          }\n          this.#detailsPaneDialogRef = null;\n        });\n      }\n    });\n  });\n\n  smallScreenLayout = this.#device.smallScreenLayout;\n  #smallScreenLayoutEffect = effect(() => {\n    const ssl = this.smallScreenLayout();\n    if (this.#detailsPaneDialogRef) this.#detailsPaneDialogRef.close(true);\n    untracked(() => {\n      const da = this.detailsActive();\n      if (ssl && da) this.detailsActive.set(false);\n    });\n  });\n\n  /**\n   * Layout settings is the state of the master details that could be persisted.\n   * Setting a `layoutSettingsID` will save the current state (details area visibilkity and\n   * split area sizes etc.) to the local storage. If the component is created, it will load\n   * those settings and re-apply them.\n   */\n  @Input() layoutSettingsID?: string;\n  private _layoutOptions: MasterDetailsLayoutOptions = this._defaultLayoutOptions;\n  /**\n   * Layout options to be applied.\n   */\n  @Input() set layoutOptions(lo: Partial<MasterDetailsLayoutOptions>) {\n    this._layoutOptions = lo ? { ...this._defaultLayoutOptions, ...lo } : this._defaultLayoutOptions;\n  }\n  get layoutOptions(): MasterDetailsLayoutOptions {\n    return this._layoutOptions;\n  }\n  undockableDetails = input<boolean>(false);\n  /**\n   * Styles tp be applied to the panels\n   */\n  panelStyle = input<{ [key: string]: string } | undefined>(undefined);\n  /**\n   * Size of the gutter in Pixel.\n   */\n  gutterSize = input<number | undefined>(undefined);\n\n  onPopIn() {\n    this.detailsActive.set(true);\n    this.#cd.detectChanges();\n  }\n\n  ngAfterViewInit() {\n    if (!this.masterPane() || !this.detailsPane()) {\n      console.error('MasterDetailsComponent is supposed to contain a master and a details pane.');\n    }\n  }\n}\n","@if (!smallScreenLayout()) {\n  <yuv-split-view [disabled]=\"!layoutOptions.resizable\" [gutterSize]=\"gutterSize() || 1\"\n    [layoutSettingsID]=\"layoutSettingsID\">\n    <ng-template yuvSplitArea [size]=\"layoutOptions.masterSize\" [minSize]=\"layoutOptions.masterMinSize\">\n      <div class=\"yuv-md-panel master\" [ngStyle]=\"panelStyle()\">\n        <ng-container *ngTemplateOutlet=\"masterPane()\"></ng-container>\n      </div>\n    </ng-template>\n    <ng-template yuvSplitArea [size]=\"layoutOptions.detailsSize\" [minSize]=\"layoutOptions.detailsMinSize\"\n      [visible]=\"detailsActive()\">\n      <div class=\"yuv-md-panel details\" [ngStyle]=\"panelStyle()\">\n        @if (undockableDetails()) {\n          <yuv-popout (popIn)=\"onPopIn()\" (popOut)=\"detailsActive.set(false)\"><ng-container\n          *ngTemplateOutlet=\"tplDetailsPanel\"></ng-container></yuv-popout>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"tplDetailsPanel\"></ng-container>\n        }\n      </div>\n    </ng-template>\n  </yuv-split-view>\n} @else {\n  <div class=\"yuvMasterPane\"><ng-container *ngTemplateOutlet=\"masterPane()\"></ng-container></div>\n}\n\n\n<ng-template #tplDetailsPanel>\n  <ng-container *ngTemplateOutlet=\"detailsPane()\"></ng-container>\n</ng-template>\n\n","import { NgModule } from '@angular/core';\nimport { YuvMasterDetailsComponent } from './master-details.component';\n\n@NgModule({\n  imports: [YuvMasterDetailsComponent],\n  exports: [YuvMasterDetailsComponent]\n})\nexport class YuvMasterDetailsModule {}\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-object-details.mjs

@@ -468,6 +468,7 @@ class ObjectMetadataComponent {
             if (object) {
                 this.#initialData = structuredClone(object.data);
             }
+            this._dmsObject = object;
         });
         /**
          * @deprecated This input will be removed in the future.
@@ -640,6 +641,7 @@ class ObjectMetadataComponent {
         });
     }
     save() {
+        // TODO: this._dmsObject should be this.dmsObject() once this.#init() is removed
         if (this._dmsObject && this.combinedFormState) {
             this.busySaving.set(true);
             this.#dmsService.updateDmsObject(this._dmsObject.id, this.combinedFormState.data).subscribe({
@@ -687,7 +689,7 @@ class ObjectMetadataComponent {
         this.#formSubscriptions.forEach((s) => s.unsubscribe());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ObjectMetadataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ObjectMetadataComponent, isStandalone: true, selector: "yuv-object-metadata", inputs: { disableControls: { classPropertyName: "disableControls", publicName: "disableControls", isSignal: true, isRequired: false, transformFunction: null }, disableBasicMetadata: { classPropertyName: "disableBasicMetadata", publicName: "disableBasicMetadata", isSignal: true, isRequired: false, transformFunction: null }, elementExtensions: { classPropertyName: "elementExtensions", publicName: "elementExtensions", isSignal: true, isRequired: false, transformFunction: null }, situation: { classPropertyName: "situation", publicName: "situation", isSignal: false, isRequired: false, transformFunction: null }, formDisabled: { classPropertyName: "formDisabled", publicName: "formDisabled", isSignal: false, isRequired: false, transformFunction: null }, dmsObject: { classPropertyName: "dmsObject", publicName: "dmsObject", isSignal: true, isRequired: false, transformFunction: null }, flavoredDmsObject: { classPropertyName: "flavoredDmsObject", publicName: "flavoredDmsObject", isSignal: true, isRequired: false, transformFunction: null }, flavors: { classPropertyName: "flavors", publicName: "flavors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexDataSaved: "indexDataSaved", statusChanged: "statusChanged" }, host: { properties: { "class.empty": "empty()", "class.loading": "busyLoading()" } }, viewQueries: [{ propertyName: "objectForms", predicate: ObjectFormComponent, descendants: true, isSignal: true }, { propertyName: "objectMetadataSectionForms", predicate: ObjectMetadataSectionComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<main [yuvBusyOverlay]=\"busySaving() || busyLoading() || mainFormOptionsIsLoading()\">\n  @if (empty()) {\n    <p>{{ 'yuv.object-metadata.empty.message' | translate }}</p>\n  }\n  @if (!mainFormOptions()) {\n    <yuv-object-form\n      [formOptions]=\"mainFormOptions()\"\n      [elementExtensions]=\"elementExtensions()\"\n      (statusChanged)=\"onFormStatusChanged('main', $event)\"\n    ></yuv-object-form>\n  }\n  @for (fo of flavorFormOptions(); track $index) {\n    <yuv-object-metadata-section\n      [section]=\"fo\"\n      [elementExtensions]=\"elementExtensions()\"\n      [expanded]=\"$index === 0\"\n      (statusChanged)=\"onFormStatusChanged(fo.id, $event)\"\n    ></yuv-object-metadata-section>\n  }\n\n  <!-- base data -->\n  @if (_dmsObject && !disableBasicMetadata()) {\n    <yuv-object-summary-data [dmsObject]=\"_dmsObject\"></yuv-object-summary-data>\n  }\n</main>\n\n<footer [attr.inert]=\"disableControls() || !controlsVisible() || null\">\n  <div class=\"container\">\n    <button\n      ymtButton=\"secondary\"\n      button-size=\"small\"\n      [disabled]=\"busySaving() || busyLoading()\"\n      (click)=\"resetForm()\"\n      [hidden]=\"!combinedFormState?.dirty\"\n      [disabled]=\"!combinedFormState?.dirty\"\n    >\n      {{ 'yuv.object-metadata.button.reset' | translate }}\n    </button>\n    <button\n      ymtButton=\"primary\"\n      button-size=\"small\"\n      (click)=\"save()\"\n      [disabled]=\"!combinedFormState?.dirty || combinedFormState?.invalid || busySaving() || busyLoading()\"\n    >\n      {{ 'yuv.object-metadata.button.save' | translate }}\n    </button>\n  </div>\n</footer>\n", styles: [":host{--_object-metadata-panel-background: var(--object-metadata-panel-background, var(--ymt-surface-container-low));--_object-metadata-section-background: var(--object-metadata-section-background, var(--ymt-surface));--_object-metadata-section-corner: var(--object-metadata-section-corner, var(--ymt-corner-m));--_object-metadata-footer-background: var(--object-metadata-footer-background, var(--ymt-surface-container));--_object-metadata-footer-height: 4rem;display:grid;grid-template-rows:1fr auto;grid-template-columns:1fr;height:100%;overflow:hidden;position:relative;background-color:var(--_object-metadata-panel-background)}:host.empty main{justify-content:center;align-items:center}:host.loading main>*{opacity:0}:host main{grid-row:1/span 3;grid-column:1;overflow-y:auto;width:100%;display:flex;flex-flow:column;padding:var(--ymt-spacing-3xl) var(--ymt-spacing-l) var(--_object-metadata-footer-height) var(--ymt-spacing-l)}:host footer{grid-row:-1;grid-column:1;padding:var(--ymt-spacing-l);opacity:0;z-index:1}:host footer .container{background:var(--_object-metadata-footer-background);padding:var(--ymt-spacing-s);display:flex;align-items:center;justify-content:end;gap:var(--ymt-spacing-s);border-radius:var(--ymt-corner-full)}:host footer:not([inert]){animation:controlsAppear .2s ease-in-out forwards}:host main yuv-object-metadata-section{margin-block-end:var(--ymt-spacing-m)}:host main yuv-object-summary-data{background-color:var(--_object-metadata-section-background);border:1px solid var(--ymt-outline-variant);border-radius:var(--_object-metadata-section-corner);padding:var(--ymt-spacing-m)}@keyframes controlsAppear{0%{opacity:0;translate:0 var(--ymt-spacing-m)}to{opacity:1;translate:0 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ObjectFormComponent, selector: "yuv-object-form", inputs: ["formOptions", "inert", "elementExtensions", "isInnerTableForm"], outputs: ["statusChanged", "onFormReady"] }, { kind: "component", type: ObjectSummaryDataComponent, selector: "yuv-object-summary-data", inputs: ["dmsObject", "flavors", "showAppliedFlavors"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ObjectMetadataSectionComponent, selector: "yuv-object-metadata-section", inputs: ["section", "expanded", "elementExtensions"], outputs: ["statusChanged"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ObjectMetadataComponent, isStandalone: true, selector: "yuv-object-metadata", inputs: { disableControls: { classPropertyName: "disableControls", publicName: "disableControls", isSignal: true, isRequired: false, transformFunction: null }, disableBasicMetadata: { classPropertyName: "disableBasicMetadata", publicName: "disableBasicMetadata", isSignal: true, isRequired: false, transformFunction: null }, elementExtensions: { classPropertyName: "elementExtensions", publicName: "elementExtensions", isSignal: true, isRequired: false, transformFunction: null }, situation: { classPropertyName: "situation", publicName: "situation", isSignal: false, isRequired: false, transformFunction: null }, formDisabled: { classPropertyName: "formDisabled", publicName: "formDisabled", isSignal: false, isRequired: false, transformFunction: null }, dmsObject: { classPropertyName: "dmsObject", publicName: "dmsObject", isSignal: true, isRequired: false, transformFunction: null }, flavoredDmsObject: { classPropertyName: "flavoredDmsObject", publicName: "flavoredDmsObject", isSignal: true, isRequired: false, transformFunction: null }, flavors: { classPropertyName: "flavors", publicName: "flavors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexDataSaved: "indexDataSaved", statusChanged: "statusChanged" }, host: { properties: { "class.empty": "empty()", "class.loading": "busyLoading()" } }, viewQueries: [{ propertyName: "objectForms", predicate: ObjectFormComponent, descendants: true, isSignal: true }, { propertyName: "objectMetadataSectionForms", predicate: ObjectMetadataSectionComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<main [yuvBusyOverlay]=\"busySaving() || busyLoading() || mainFormOptionsIsLoading()\">\n  @if (empty()) {\n    <p>{{ 'yuv.object-metadata.empty.message' | translate }}</p>\n  }\n  @if (!mainFormOptions()) {\n    <yuv-object-form\n      [formOptions]=\"mainFormOptions()\"\n      [elementExtensions]=\"elementExtensions()\"\n      (statusChanged)=\"onFormStatusChanged('main', $event)\"\n    ></yuv-object-form>\n  }\n  @for (fo of flavorFormOptions(); track $index) {\n    <yuv-object-metadata-section\n      [section]=\"fo\"\n      [elementExtensions]=\"elementExtensions()\"\n      [expanded]=\"$index === 0\"\n      (statusChanged)=\"onFormStatusChanged(fo.id, $event)\"\n    ></yuv-object-metadata-section>\n  }\n\n  <!-- base data -->\n  @let object = dmsObject() ?? _dmsObject;\n  @if (object && !disableBasicMetadata()) {\n    <yuv-object-summary-data [dmsObject]=\"object\"></yuv-object-summary-data>\n  }\n</main>\n\n<footer [attr.inert]=\"disableControls() || !controlsVisible() || null\">\n  <div class=\"container\">\n    <button\n      ymtButton=\"secondary\"\n      button-size=\"small\"\n      [disabled]=\"busySaving() || busyLoading()\"\n      (click)=\"resetForm()\"\n      [hidden]=\"!combinedFormState?.dirty\"\n      [disabled]=\"!combinedFormState?.dirty\"\n    >\n      {{ 'yuv.object-metadata.button.reset' | translate }}\n    </button>\n    <button\n      ymtButton=\"primary\"\n      button-size=\"small\"\n      (click)=\"save()\"\n      [disabled]=\"!combinedFormState?.dirty || combinedFormState?.invalid || busySaving() || busyLoading()\"\n    >\n      {{ 'yuv.object-metadata.button.save' | translate }}\n    </button>\n  </div>\n</footer>\n", styles: [":host{--_object-metadata-panel-background: var(--object-metadata-panel-background, var(--ymt-surface-container-low));--_object-metadata-section-background: var(--object-metadata-section-background, var(--ymt-surface));--_object-metadata-section-corner: var(--object-metadata-section-corner, var(--ymt-corner-m));--_object-metadata-footer-background: var(--object-metadata-footer-background, var(--ymt-surface-container));--_object-metadata-footer-height: 4rem;display:grid;grid-template-rows:1fr auto;grid-template-columns:1fr;height:100%;overflow:hidden;position:relative;background-color:var(--_object-metadata-panel-background)}:host.empty main{justify-content:center;align-items:center}:host.loading main>*{opacity:0}:host main{grid-row:1/span 3;grid-column:1;overflow-y:auto;width:100%;display:flex;flex-flow:column;padding:var(--ymt-spacing-3xl) var(--ymt-spacing-l) var(--_object-metadata-footer-height) var(--ymt-spacing-l)}:host footer{grid-row:-1;grid-column:1;padding:var(--ymt-spacing-l);opacity:0;z-index:1}:host footer .container{background:var(--_object-metadata-footer-background);padding:var(--ymt-spacing-s);display:flex;align-items:center;justify-content:end;gap:var(--ymt-spacing-s);border-radius:var(--ymt-corner-full)}:host footer:not([inert]){animation:controlsAppear .2s ease-in-out forwards}:host main yuv-object-metadata-section{margin-block-end:var(--ymt-spacing-m)}:host main yuv-object-summary-data{background-color:var(--_object-metadata-section-background);border:1px solid var(--ymt-outline-variant);border-radius:var(--_object-metadata-section-corner);padding:var(--ymt-spacing-m)}@keyframes controlsAppear{0%{opacity:0;translate:0 var(--ymt-spacing-m)}to{opacity:1;translate:0 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ObjectFormComponent, selector: "yuv-object-form", inputs: ["formOptions", "inert", "elementExtensions", "isInnerTableForm"], outputs: ["statusChanged", "onFormReady"] }, { kind: "component", type: ObjectSummaryDataComponent, selector: "yuv-object-summary-data", inputs: ["dmsObject", "flavors", "showAppliedFlavors"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ObjectMetadataSectionComponent, selector: "yuv-object-metadata-section", inputs: ["section", "expanded", "elementExtensions"], outputs: ["statusChanged"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ObjectMetadataComponent, decorators: [{
             type: Component,
@@ -705,7 +707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     ], host: {
                         '[class.empty]': 'empty()',
                         '[class.loading]': 'busyLoading()'
-                    }, template: "<main [yuvBusyOverlay]=\"busySaving() || busyLoading() || mainFormOptionsIsLoading()\">\n  @if (empty()) {\n    <p>{{ 'yuv.object-metadata.empty.message' | translate }}</p>\n  }\n  @if (!mainFormOptions()) {\n    <yuv-object-form\n      [formOptions]=\"mainFormOptions()\"\n      [elementExtensions]=\"elementExtensions()\"\n      (statusChanged)=\"onFormStatusChanged('main', $event)\"\n    ></yuv-object-form>\n  }\n  @for (fo of flavorFormOptions(); track $index) {\n    <yuv-object-metadata-section\n      [section]=\"fo\"\n      [elementExtensions]=\"elementExtensions()\"\n      [expanded]=\"$index === 0\"\n      (statusChanged)=\"onFormStatusChanged(fo.id, $event)\"\n    ></yuv-object-metadata-section>\n  }\n\n  <!-- base data -->\n  @if (_dmsObject && !disableBasicMetadata()) {\n    <yuv-object-summary-data [dmsObject]=\"_dmsObject\"></yuv-object-summary-data>\n  }\n</main>\n\n<footer [attr.inert]=\"disableControls() || !controlsVisible() || null\">\n  <div class=\"container\">\n    <button\n      ymtButton=\"secondary\"\n      button-size=\"small\"\n      [disabled]=\"busySaving() || busyLoading()\"\n      (click)=\"resetForm()\"\n      [hidden]=\"!combinedFormState?.dirty\"\n      [disabled]=\"!combinedFormState?.dirty\"\n    >\n      {{ 'yuv.object-metadata.button.reset' | translate }}\n    </button>\n    <button\n      ymtButton=\"primary\"\n      button-size=\"small\"\n      (click)=\"save()\"\n      [disabled]=\"!combinedFormState?.dirty || combinedFormState?.invalid || busySaving() || busyLoading()\"\n    >\n      {{ 'yuv.object-metadata.button.save' | translate }}\n    </button>\n  </div>\n</footer>\n", styles: [":host{--_object-metadata-panel-background: var(--object-metadata-panel-background, var(--ymt-surface-container-low));--_object-metadata-section-background: var(--object-metadata-section-background, var(--ymt-surface));--_object-metadata-section-corner: var(--object-metadata-section-corner, var(--ymt-corner-m));--_object-metadata-footer-background: var(--object-metadata-footer-background, var(--ymt-surface-container));--_object-metadata-footer-height: 4rem;display:grid;grid-template-rows:1fr auto;grid-template-columns:1fr;height:100%;overflow:hidden;position:relative;background-color:var(--_object-metadata-panel-background)}:host.empty main{justify-content:center;align-items:center}:host.loading main>*{opacity:0}:host main{grid-row:1/span 3;grid-column:1;overflow-y:auto;width:100%;display:flex;flex-flow:column;padding:var(--ymt-spacing-3xl) var(--ymt-spacing-l) var(--_object-metadata-footer-height) var(--ymt-spacing-l)}:host footer{grid-row:-1;grid-column:1;padding:var(--ymt-spacing-l);opacity:0;z-index:1}:host footer .container{background:var(--_object-metadata-footer-background);padding:var(--ymt-spacing-s);display:flex;align-items:center;justify-content:end;gap:var(--ymt-spacing-s);border-radius:var(--ymt-corner-full)}:host footer:not([inert]){animation:controlsAppear .2s ease-in-out forwards}:host main yuv-object-metadata-section{margin-block-end:var(--ymt-spacing-m)}:host main yuv-object-summary-data{background-color:var(--_object-metadata-section-background);border:1px solid var(--ymt-outline-variant);border-radius:var(--_object-metadata-section-corner);padding:var(--ymt-spacing-m)}@keyframes controlsAppear{0%{opacity:0;translate:0 var(--ymt-spacing-m)}to{opacity:1;translate:0 0}}\n"] }]
+                    }, template: "<main [yuvBusyOverlay]=\"busySaving() || busyLoading() || mainFormOptionsIsLoading()\">\n  @if (empty()) {\n    <p>{{ 'yuv.object-metadata.empty.message' | translate }}</p>\n  }\n  @if (!mainFormOptions()) {\n    <yuv-object-form\n      [formOptions]=\"mainFormOptions()\"\n      [elementExtensions]=\"elementExtensions()\"\n      (statusChanged)=\"onFormStatusChanged('main', $event)\"\n    ></yuv-object-form>\n  }\n  @for (fo of flavorFormOptions(); track $index) {\n    <yuv-object-metadata-section\n      [section]=\"fo\"\n      [elementExtensions]=\"elementExtensions()\"\n      [expanded]=\"$index === 0\"\n      (statusChanged)=\"onFormStatusChanged(fo.id, $event)\"\n    ></yuv-object-metadata-section>\n  }\n\n  <!-- base data -->\n  @let object = dmsObject() ?? _dmsObject;\n  @if (object && !disableBasicMetadata()) {\n    <yuv-object-summary-data [dmsObject]=\"object\"></yuv-object-summary-data>\n  }\n</main>\n\n<footer [attr.inert]=\"disableControls() || !controlsVisible() || null\">\n  <div class=\"container\">\n    <button\n      ymtButton=\"secondary\"\n      button-size=\"small\"\n      [disabled]=\"busySaving() || busyLoading()\"\n      (click)=\"resetForm()\"\n      [hidden]=\"!combinedFormState?.dirty\"\n      [disabled]=\"!combinedFormState?.dirty\"\n    >\n      {{ 'yuv.object-metadata.button.reset' | translate }}\n    </button>\n    <button\n      ymtButton=\"primary\"\n      button-size=\"small\"\n      (click)=\"save()\"\n      [disabled]=\"!combinedFormState?.dirty || combinedFormState?.invalid || busySaving() || busyLoading()\"\n    >\n      {{ 'yuv.object-metadata.button.save' | translate }}\n    </button>\n  </div>\n</footer>\n", styles: [":host{--_object-metadata-panel-background: var(--object-metadata-panel-background, var(--ymt-surface-container-low));--_object-metadata-section-background: var(--object-metadata-section-background, var(--ymt-surface));--_object-metadata-section-corner: var(--object-metadata-section-corner, var(--ymt-corner-m));--_object-metadata-footer-background: var(--object-metadata-footer-background, var(--ymt-surface-container));--_object-metadata-footer-height: 4rem;display:grid;grid-template-rows:1fr auto;grid-template-columns:1fr;height:100%;overflow:hidden;position:relative;background-color:var(--_object-metadata-panel-background)}:host.empty main{justify-content:center;align-items:center}:host.loading main>*{opacity:0}:host main{grid-row:1/span 3;grid-column:1;overflow-y:auto;width:100%;display:flex;flex-flow:column;padding:var(--ymt-spacing-3xl) var(--ymt-spacing-l) var(--_object-metadata-footer-height) var(--ymt-spacing-l)}:host footer{grid-row:-1;grid-column:1;padding:var(--ymt-spacing-l);opacity:0;z-index:1}:host footer .container{background:var(--_object-metadata-footer-background);padding:var(--ymt-spacing-s);display:flex;align-items:center;justify-content:end;gap:var(--ymt-spacing-s);border-radius:var(--ymt-corner-full)}:host footer:not([inert]){animation:controlsAppear .2s ease-in-out forwards}:host main yuv-object-metadata-section{margin-block-end:var(--ymt-spacing-m)}:host main yuv-object-summary-data{background-color:var(--_object-metadata-section-background);border:1px solid var(--ymt-outline-variant);border-radius:var(--_object-metadata-section-corner);padding:var(--ymt-spacing-m)}@keyframes controlsAppear{0%{opacity:0;translate:0 var(--ymt-spacing-m)}to{opacity:1;translate:0 0}}\n"] }]
         }], propDecorators: { situation: [{
                 type: Input
             }], formDisabled: [{
@@ -732,16 +734,6 @@ class ObjectDetailsComponent {
                 untracked(() => this.#odShellService.setDmsObject(o));
         });
         this.dmsObject = this.#odShellService.dmsObject;
-        this.flavoredDmsObject = computed(() => {
-            const o = this.dmsObject();
-            const f = this.flavors();
-            return o
-                ? {
-                    object: o,
-                    flavors: f
-                }
-                : undefined;
-        });
         /**
          * Flavors to take into account. These flavors define for example the metadata
          * of an object.