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

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

@@ -0,0 +1,212 @@
+import * as i0 from '@angular/core';
+import { inject, Renderer2, ChangeDetectorRef, viewChild, input, output, HostListener, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i4 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+var PopoutTriggerPosition;
+(function (PopoutTriggerPosition) {
+    PopoutTriggerPosition["TOP_LEFT"] = "tl";
+    PopoutTriggerPosition["TOP_RIGHT"] = "tr";
+    PopoutTriggerPosition["BOTTOM_LEFT"] = "bl";
+    PopoutTriggerPosition["BOTTOM_RIGHT"] = "br";
+})(PopoutTriggerPosition || (PopoutTriggerPosition = {}));
+
+// based upon: https://github.com/GIimmer/angular-opinionated-popout-window
+/**
+ * Component that enables the wrapped content to be 'popped out' as new window.
+ * It will place a button (icon) to trigger popout on top of the wrapped content. You
+ * can place this trigger element setting the 'triggerPosition' input.
+ *
+ * Providing a 'popoutWindowConfig' will also enable you to influence the appearance of
+ * the spawned window.
+ *
+ */
+class PopoutComponent {
+    constructor() {
+        this.#renderer2 = inject(Renderer2);
+        this.#cd = inject(ChangeDetectorRef);
+        this.innerWrapper = viewChild.required('innerWrapper');
+        this.popoutWrapper = viewChild.required('popoutWrapper');
+        /**
+         * Where the popout trigger should be located on the component
+         */
+        this.triggerPosition = input(PopoutTriggerPosition.TOP_RIGHT);
+        /**
+         * Icon to be redered inside the trigger
+         */
+        this.triggerIcon = input('open_in_new');
+        /**
+         * Tooltip text for the trigger button
+         */
+        this.triggerTooltip = input();
+        /**
+         * configuration of the popped out window
+         */
+        this.popoutWindowConfig = input();
+        /**
+         * Whether or not to disable the undock feature
+         */
+        this.disabled = input();
+        /**
+         * Emitted when the child component is popped out
+         */
+        this.popOut = output();
+        /**
+         * Emitted when the child component is popped in again
+         */
+        this.popIn = output();
+    }
+    #renderer2;
+    #cd;
+    beforeunloadHandler() {
+        this._close();
+    }
+    #popoutWindow;
+    #observer;
+    get isPoppedOut() {
+        return !!this.#popoutWindow;
+    }
+    pop(e) {
+        if (this.isPoppedOut)
+            this._popIn();
+        else
+            this._popOut(e);
+    }
+    _popIn() {
+        this.#renderer2.appendChild(this.popoutWrapper().nativeElement, this.innerWrapper().nativeElement);
+        this._close();
+        this.#cd.detectChanges();
+    }
+    _popOut(event) {
+        if (!this.#popoutWindow) {
+            this.#popoutWindow = this._createPopoutWindow(event);
+            if (!this.#popoutWindow) {
+                // The window wasn't allowed to open
+                // This is likely caused by built-in popup blockers.
+                alert('Could not open new window. This is likely caused by built-in popup blockers.');
+                return;
+            }
+            this._cloneStylesToPopoutWindow();
+            this._observeFutureStyleChanges();
+            this.#renderer2.appendChild(this.#popoutWindow.document.body, this.innerWrapper().nativeElement);
+            this.#popoutWindow.addEventListener('unload', () => this._popIn());
+            this.#cd.detectChanges();
+            this.popOut.emit(true);
+        }
+        else {
+            this.#popoutWindow.focus();
+        }
+    }
+    _createPopoutWindow(mouseEvent) {
+        const elmRect = this.innerWrapper().nativeElement.getBoundingClientRect();
+        const [winLeft, winTop] = this._getWindowPositioning(elmRect, mouseEvent);
+        const pwc = this.popoutWindowConfig();
+        const winWidth = pwc?.size?.width ? pwc.size.width : elmRect.width;
+        const winHeight = pwc?.size?.height ? pwc.size.height : elmRect.height + 1;
+        const win = window.open('', `popoutWindow${Date.now()}`, ` popup,
+        width=${winWidth},
+        height=${winHeight},
+        left=${winLeft},
+        top=${winTop}`);
+        if (win) {
+            win.document.title = this.popoutWindowConfig()?.title || window.document.title;
+            win.document.body.style.margin = '0';
+        }
+        return win;
+    }
+    _getWindowPositioning(elmRect, mouseEvent) {
+        let winTop, winLeft;
+        const pwc = this.popoutWindowConfig()?.position;
+        if (pwc) {
+            winTop = pwc.blockStart || winTop;
+            winLeft = pwc.inlineStart || winLeft;
+        }
+        else {
+            const navHeight = window.outerHeight - window.innerHeight;
+            const navWidth = (window.outerWidth - window.innerWidth) / 2;
+            winTop = window.screenY + navHeight + elmRect.top - 60;
+            winLeft = window.screenX + navWidth + elmRect.left;
+            // Position window titleBar under mouse
+            if (mouseEvent) {
+                winTop = mouseEvent.clientY + navHeight - 7;
+                winLeft += 120;
+            }
+        }
+        return [winLeft, winTop];
+    }
+    _close() {
+        if (this.#popoutWindow) {
+            this.#popoutWindow.close();
+            this.#popoutWindow = null;
+            this.popIn.emit(true);
+        }
+    }
+    _cloneStylesToPopoutWindow() {
+        if (window.navigator.userAgent.indexOf('Firefox') === -1) {
+            document.fonts.forEach((node) => {
+                this.#popoutWindow.document.fonts.add(node);
+            });
+        }
+        document.head.querySelectorAll('link[rel="stylesheet"]').forEach((node) => {
+            this.#popoutWindow.document.head.insertAdjacentHTML('beforeend', `<link rel="stylesheet" type="${node.type}" href="${node.href}">`);
+        });
+        document.head.querySelectorAll('style').forEach((node) => {
+            this.#popoutWindow.document.head.appendChild(node.cloneNode(true));
+        });
+    }
+    _observeFutureStyleChanges() {
+        const headEle = document.querySelector('head');
+        this.#observer?.disconnect();
+        this.#observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                mutation.addedNodes.forEach((node) => {
+                    if (node.nodeName === 'STYLE') {
+                        this.#popoutWindow.document.head.appendChild(node.cloneNode(true));
+                    }
+                });
+            });
+        });
+        this.#observer.observe(headEle, { childList: true });
+    }
+    ngOnDestroy() {
+        this.#observer?.disconnect();
+        this._close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: PopoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.1", type: PopoutComponent, isStandalone: true, selector: "yuv-popout", inputs: { triggerPosition: { classPropertyName: "triggerPosition", publicName: "triggerPosition", isSignal: true, isRequired: false, transformFunction: null }, triggerIcon: { classPropertyName: "triggerIcon", publicName: "triggerIcon", isSignal: true, isRequired: false, transformFunction: null }, triggerTooltip: { classPropertyName: "triggerTooltip", publicName: "triggerTooltip", isSignal: true, isRequired: false, transformFunction: null }, popoutWindowConfig: { classPropertyName: "popoutWindowConfig", publicName: "popoutWindowConfig", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { popOut: "popOut", popIn: "popIn" }, host: { attributes: { "attr.data-pos": "triggerPosition()" }, listeners: { "window:beforeunload": "beforeunloadHandler()" } }, viewQueries: [{ propertyName: "innerWrapper", first: true, predicate: ["innerWrapper"], descendants: true, isSignal: true }, { propertyName: "popoutWrapper", first: true, predicate: ["popoutWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #popoutWrapper class=\"popoutWrapper\" [ngClass]=\"{disabled: disabled()}\" \n[attr.data-pos]=\"triggerPosition()\">\n    <button mat-icon-button type=\"button\" class=\"trigger\" (click)=\"pop($event)\" \n    [matTooltip]=\"triggerTooltip()\"\n    [ngClass]=\"{poppedOut: isPoppedOut}\">\n      <mat-icon>{{triggerIcon()}}</mat-icon>\n    </button>\n    <div #innerWrapper class=\"innerWrapper\">\n      <ng-content></ng-content>\n    </div>\n  </div>", styles: ["div.popoutWrapper{--trigger-size: 20px;--trigger-margin-block: var(--ymt-spacing-xs);--trigger-margin-inline: var(--ymt-spacing-xs);--trigger-color: white;--trigger-background-color: black;position:relative;min-height:calc(var(--trigger-size) + var(--trigger-margin-block))}div.popoutWrapper[data-pos=tr]>button.trigger{inset-block-end:unset;inset-block-start:var(--trigger-margin-block);inset-inline-start:unset;inset-inline-end:var(--trigger-margin-inline)}div.popoutWrapper[data-pos=tl]>button.trigger{inset-block-end:unset;inset-block-start:var(--trigger-margin-block);inset-inline-end:unset;inset-inline-start:var(--trigger-margin-inline)}div.popoutWrapper[data-pos=bl]>button.trigger{inset-block-start:unset;inset-block-end:var(--trigger-margin-block);inset-inline-end:unset;inset-inline-start:var(--trigger-margin-inline)}div.popoutWrapper[data-pos=br]>button.trigger{inset-block-start:unset;inset-block-end:var(--trigger-margin-block);inset-inline-start:unset;inset-inline-end:var(--trigger-margin-inline)}div.popoutWrapper.disabled>button.trigger{display:none;pointer-events:none}div.popoutWrapper>button.trigger{width:var(--trigger-size);height:var(--trigger-size);padding:0;background-color:var(--trigger-background-color);color:var(--trigger-color);position:absolute}div.popoutWrapper>button.trigger.poppedOut{transform:rotate(180deg)}div.popoutWrapper div.innerWrapper{flex:1;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: PopoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-popout', imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        ['attr.data-pos']: 'triggerPosition()'
+                    }, template: "<div #popoutWrapper class=\"popoutWrapper\" [ngClass]=\"{disabled: disabled()}\" \n[attr.data-pos]=\"triggerPosition()\">\n    <button mat-icon-button type=\"button\" class=\"trigger\" (click)=\"pop($event)\" \n    [matTooltip]=\"triggerTooltip()\"\n    [ngClass]=\"{poppedOut: isPoppedOut}\">\n      <mat-icon>{{triggerIcon()}}</mat-icon>\n    </button>\n    <div #innerWrapper class=\"innerWrapper\">\n      <ng-content></ng-content>\n    </div>\n  </div>", styles: ["div.popoutWrapper{--trigger-size: 20px;--trigger-margin-block: var(--ymt-spacing-xs);--trigger-margin-inline: var(--ymt-spacing-xs);--trigger-color: white;--trigger-background-color: black;position:relative;min-height:calc(var(--trigger-size) + var(--trigger-margin-block))}div.popoutWrapper[data-pos=tr]>button.trigger{inset-block-end:unset;inset-block-start:var(--trigger-margin-block);inset-inline-start:unset;inset-inline-end:var(--trigger-margin-inline)}div.popoutWrapper[data-pos=tl]>button.trigger{inset-block-end:unset;inset-block-start:var(--trigger-margin-block);inset-inline-end:unset;inset-inline-start:var(--trigger-margin-inline)}div.popoutWrapper[data-pos=bl]>button.trigger{inset-block-start:unset;inset-block-end:var(--trigger-margin-block);inset-inline-end:unset;inset-inline-start:var(--trigger-margin-inline)}div.popoutWrapper[data-pos=br]>button.trigger{inset-block-start:unset;inset-block-end:var(--trigger-margin-block);inset-inline-start:unset;inset-inline-end:var(--trigger-margin-inline)}div.popoutWrapper.disabled>button.trigger{display:none;pointer-events:none}div.popoutWrapper>button.trigger{width:var(--trigger-size);height:var(--trigger-size);padding:0;background-color:var(--trigger-background-color);color:var(--trigger-color);position:absolute}div.popoutWrapper>button.trigger.poppedOut{transform:rotate(180deg)}div.popoutWrapper div.innerWrapper{flex:1;overflow:auto}\n"] }]
+        }], propDecorators: { beforeunloadHandler: [{
+                type: HostListener,
+                args: ['window:beforeunload']
+            }] } });
+
+class YuvPopoutModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: YuvPopoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: YuvPopoutModule, imports: [PopoutComponent], exports: [PopoutComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: YuvPopoutModule, imports: [PopoutComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: YuvPopoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [PopoutComponent],
+                    exports: [PopoutComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PopoutComponent, PopoutTriggerPosition, YuvPopoutModule };
+//# sourceMappingURL=yuuvis-client-framework-popout.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"yuuvis-client-framework-popout.mjs","sources":["../../../../../libs/yuuvis/client-framework/popout/src/lib/popout.interface.ts","../../../../../libs/yuuvis/client-framework/popout/src/lib/popout.component.ts","../../../../../libs/yuuvis/client-framework/popout/src/lib/popout.component.html","../../../../../libs/yuuvis/client-framework/popout/src/lib/popout.module.ts","../../../../../libs/yuuvis/client-framework/popout/src/yuuvis-client-framework-popout.ts"],"sourcesContent":["export enum PopoutTriggerPosition {\n  TOP_LEFT = 'tl',\n  TOP_RIGHT = 'tr',\n  BOTTOM_LEFT = 'bl',\n  BOTTOM_RIGHT = 'br',\n}\n\nexport interface PopoutWindowConfig {\n  // title of the window opened by popout\n  title?: string;\n  position?: {\n    // 'top' position in px\n    blockStart?: number;\n    // 'left' position in px\n    inlineStart?: number;\n  };\n  // set the size of the poped out window\n  // If no size is set the window will resize to\n  // the size of the rendered content (if measurable)\n  size?: {\n    // width in px\n    width?: number;\n    // height in px\n    height?: number;\n  };\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostListener, inject, input, OnDestroy, output, Renderer2, viewChild } from '@angular/core';\nimport { PopoutTriggerPosition, PopoutWindowConfig } from './popout.interface';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\n// based upon: https://github.com/GIimmer/angular-opinionated-popout-window\n\n/**\n * Component that enables the wrapped content to be 'popped out' as new window.\n * It will place a button (icon) to trigger popout on top of the wrapped content. You\n * can place this trigger element setting the 'triggerPosition' input.\n *\n * Providing a 'popoutWindowConfig' will also enable you to influence the appearance of\n * the spawned window.\n *\n */\n@Component({\n  selector: 'yuv-popout',\n  imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule],\n  templateUrl: './popout.component.html',\n  styleUrl: './popout.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    ['attr.data-pos']: 'triggerPosition()'\n  }\n})\nexport class PopoutComponent implements OnDestroy {\n  #renderer2 = inject(Renderer2);\n  #cd = inject(ChangeDetectorRef);\n\n  @HostListener('window:beforeunload') beforeunloadHandler(): void {\n    this._close();\n  }\n\n  innerWrapper = viewChild.required<ElementRef>('innerWrapper');\n  popoutWrapper = viewChild.required<ElementRef>('popoutWrapper');\n\n  /**\n   * Where the popout trigger should be located on the component\n   */\n  triggerPosition = input<PopoutTriggerPosition>(PopoutTriggerPosition.TOP_RIGHT);\n  /**\n   * Icon to be redered inside the trigger\n   */\n  triggerIcon = input<string>('open_in_new');\n  /**\n   * Tooltip text for the trigger button\n   */\n  triggerTooltip = input<string>();\n\n  /**\n   * configuration of the popped out window\n   */\n  popoutWindowConfig = input<PopoutWindowConfig>();\n  /**\n   * Whether or not to disable the undock feature\n   */\n  disabled = input<boolean>();\n\n  /**\n   * Emitted when the child component is popped out\n   */\n  popOut = output<boolean>();\n  /**\n   * Emitted when the child component is popped in again\n   */\n  popIn = output<boolean>();\n\n  #popoutWindow?: Window | null;\n  #observer?: MutationObserver;\n\n\n\n  get isPoppedOut() {\n    return !!this.#popoutWindow;\n  }\n\n  pop(e: MouseEvent) {\n    if (this.isPoppedOut) this._popIn();\n    else this._popOut(e);\n  }\n\n  private _popIn(): void {\n    this.#renderer2.appendChild(this.popoutWrapper().nativeElement, this.innerWrapper().nativeElement);\n    this._close();\n    this.#cd.detectChanges();\n  }\n\n  private _popOut(event?: MouseEvent): void {\n    if (!this.#popoutWindow) {\n      this.#popoutWindow = this._createPopoutWindow(event);\n\n      if (!this.#popoutWindow) {\n        // The window wasn't allowed to open\n        // This is likely caused by built-in popup blockers.\n        alert('Could not open new window. This is likely caused by built-in popup blockers.');\n        return;\n      }\n      this._cloneStylesToPopoutWindow();\n      this._observeFutureStyleChanges();\n\n      this.#renderer2.appendChild(this.#popoutWindow.document.body, this.innerWrapper().nativeElement);\n      this.#popoutWindow.addEventListener('unload', () => this._popIn());\n      this.#cd.detectChanges();\n      this.popOut.emit(true);\n    } else {\n      this.#popoutWindow.focus();\n    }\n  }\n\n  private _createPopoutWindow(mouseEvent?: MouseEvent): Window | null {\n    const elmRect = this.innerWrapper().nativeElement.getBoundingClientRect();\n    const [winLeft, winTop] = this._getWindowPositioning(elmRect, mouseEvent);\n    const pwc = this.popoutWindowConfig();\n    const winWidth = pwc?.size?.width ? pwc.size.width : elmRect.width;\n    const winHeight = pwc?.size?.height ? pwc.size.height : elmRect.height + 1;\n\n    const win = window.open(\n      '',\n      `popoutWindow${Date.now()}`,\n      ` popup,\n        width=${winWidth},\n        height=${winHeight},\n        left=${winLeft},\n        top=${winTop}`\n    );\n    if (win) {\n      win.document.title = this.popoutWindowConfig()?.title || window.document.title;\n      win.document.body.style.margin = '0';\n    }\n    return win;\n  }\n\n  private _getWindowPositioning(elmRect: DOMRect, mouseEvent?: MouseEvent) {\n    let winTop, winLeft;\n\n    const pwc = this.popoutWindowConfig()?.position;\n    if (pwc) {\n      winTop = pwc.blockStart || winTop;\n      winLeft = pwc.inlineStart || winLeft;\n    } else {\n      const navHeight = window.outerHeight - window.innerHeight;\n      const navWidth = (window.outerWidth - window.innerWidth) / 2;\n\n      winTop = window.screenY + navHeight + elmRect.top - 60;\n      winLeft = window.screenX + navWidth + elmRect.left;\n\n      // Position window titleBar under mouse\n      if (mouseEvent) {\n        winTop = mouseEvent.clientY + navHeight - 7;\n        winLeft += 120;\n      }\n    }\n    return [winLeft, winTop];\n  }\n\n  private _close(): void {\n    if (this.#popoutWindow) {\n      this.#popoutWindow.close();\n      this.#popoutWindow = null;\n      this.popIn.emit(true);\n    }\n  }\n\n  private _cloneStylesToPopoutWindow() {\n    if (window.navigator.userAgent.indexOf('Firefox') === -1) {\n      document.fonts.forEach((node) => {\n        (this.#popoutWindow!.document as any).fonts.add(node);\n      });\n    }\n    document.head.querySelectorAll('link[rel=\"stylesheet\"]').forEach((node) => {\n      this.#popoutWindow!.document.head.insertAdjacentHTML(\n        'beforeend',\n        `<link rel=\"stylesheet\" type=\"${(node as HTMLLinkElement).type}\" href=\"${(node as HTMLLinkElement).href}\">`\n      );\n    });\n    document.head.querySelectorAll('style').forEach((node) => {\n      this.#popoutWindow!.document.head.appendChild(node.cloneNode(true));\n    });\n  }\n\n  private _observeFutureStyleChanges() {\n    const headEle = document.querySelector('head');\n    this.#observer?.disconnect();\n    this.#observer = new MutationObserver((mutations) => {\n      mutations.forEach((mutation) => {\n        mutation.addedNodes.forEach((node) => {\n          if (node.nodeName === 'STYLE') {\n            this.#popoutWindow!.document.head.appendChild(node.cloneNode(true));\n          }\n        });\n      });\n    });\n    this.#observer.observe(headEle!, { childList: true });\n  }\n\n  ngOnDestroy(): void {\n    this.#observer?.disconnect();\n    this._close();\n  }\n}\n","<div #popoutWrapper class=\"popoutWrapper\" [ngClass]=\"{disabled: disabled()}\" \n[attr.data-pos]=\"triggerPosition()\">\n    <button mat-icon-button type=\"button\" class=\"trigger\" (click)=\"pop($event)\" \n    [matTooltip]=\"triggerTooltip()\"\n    [ngClass]=\"{poppedOut: isPoppedOut}\">\n      <mat-icon>{{triggerIcon()}}</mat-icon>\n    </button>\n    <div #innerWrapper class=\"innerWrapper\">\n      <ng-content></ng-content>\n    </div>\n  </div>","import { NgModule } from '@angular/core';\nimport { PopoutComponent } from './popout.component';\n\n@NgModule({\n  imports: [PopoutComponent],\n  exports: [PopoutComponent]\n})\nexport class YuvPopoutModule {}\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-renderer.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { inject, input, Component, computed, signal, Injectable, ViewContainerRef, Injector, runInInjectionContext, Directive, Input } from '@angular/core';
+import { inject, input, Component, computed, effect, signal, Injectable, ViewContainerRef, Injector, runInInjectionContext, Directive } from '@angular/core';
 import { SystemService, LocaleDatePipe, FileSizePipe, InternalFieldType, ContentStreamField } from '@yuuvis/client-core';
-import * as i1 from '@yuuvis/components/icon';
-import { YvcIconModule } from '@yuuvis/components/icon';
+import { MatIconRegistry, MatIcon } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
 import { ObjectTypeIconComponent } from '@yuuvis/client-framework/icons';
 
 /**
@@ -19,10 +19,10 @@ class AbstractRendererComponent {
     getProperty() {
         return this.#system.system?.allFields[this.propertyName()];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: AbstractRendererComponent, isStandalone: true, selector: "yuv-abstract-renderer", inputs: { propertyName: { classPropertyName: "propertyName", publicName: "propertyName", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AbstractRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: AbstractRendererComponent, isStandalone: true, selector: "yuv-abstract-renderer", inputs: { propertyName: { classPropertyName: "propertyName", publicName: "propertyName", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AbstractRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'yuv-abstract-renderer',
@@ -32,19 +32,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 
 class DateTimeRendererComponent extends AbstractRendererComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateTimeRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DateTimeRendererComponent, isStandalone: true, selector: "yuv-datetime-renderer", usesInheritance: true, ngImport: i0, template: '{{(value() || undefined) | localeDate}}', isInline: true, styles: [":host{display:inline-block;padding:var(--tile-slot-padding)}\n"], dependencies: [{ kind: "pipe", type: LocaleDatePipe, name: "localeDate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DateTimeRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: DateTimeRendererComponent, isStandalone: true, selector: "yuv-datetime-renderer", usesInheritance: true, ngImport: i0, template: '{{(value() || undefined) | localeDate}}', isInline: true, styles: [":host{display:inline-block;padding:var(--tile-slot-padding)}\n"], dependencies: [{ kind: "pipe", type: LocaleDatePipe, name: "localeDate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateTimeRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DateTimeRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-datetime-renderer', standalone: true, imports: [LocaleDatePipe], template: '{{(value() || undefined) | localeDate}}', styles: [":host{display:inline-block;padding:var(--tile-slot-padding)}\n"] }]
         }] });
 
 class DecimalRendererComponent extends AbstractRendererComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DecimalRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DecimalRendererComponent, isStandalone: true, selector: "yuv-decimal-renderer", usesInheritance: true, ngImport: i0, template: '{{value()}}', isInline: true, styles: [":host{display:inline-block;padding:var(--tile-slot-padding)}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DecimalRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: DecimalRendererComponent, isStandalone: true, selector: "yuv-decimal-renderer", usesInheritance: true, ngImport: i0, template: '{{value()}}', isInline: true, styles: [":host{display:inline-block;padding:var(--tile-slot-padding)}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DecimalRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DecimalRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-decimal-renderer', standalone: true, template: '{{value()}}', styles: [":host{display:inline-block;padding:var(--tile-slot-padding)}\n"] }]
         }] });
@@ -65,36 +65,63 @@ class FileSizeRendererComponent extends AbstractRendererComponent {
             return n;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileSizeRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FileSizeRendererComponent, isStandalone: true, selector: "yuv-string-renderer", usesInheritance: true, ngImport: i0, template: '{{parsedValue() | fileSize}}', isInline: true, styles: [":host{display:inline-block;padding:var(--tile-slot-padding)}\n"], dependencies: [{ kind: "pipe", type: FileSizePipe, name: "fileSize" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FileSizeRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: FileSizeRendererComponent, isStandalone: true, selector: "yuv-string-renderer", usesInheritance: true, ngImport: i0, template: '{{parsedValue() | fileSize}}', isInline: true, styles: [":host{display:inline-block;padding:var(--tile-slot-padding)}\n"], dependencies: [{ kind: "pipe", type: FileSizePipe, name: "fileSize" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileSizeRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FileSizeRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-string-renderer', imports: [FileSizePipe], standalone: true, template: '{{parsedValue() | fileSize}}', styles: [":host{display:inline-block;padding:var(--tile-slot-padding)}\n"] }]
         }] });
 
 class IconRendererComponent extends AbstractRendererComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: IconRendererComponent, isStandalone: true, selector: "yuv-icon-renderer", usesInheritance: true, ngImport: i0, template: ` @if (propertyName() !== 'custom') {
-      <yuv-object-type-icon [objectTypeId]="value() || ''"></yuv-object-type-icon>
-    } @else if (value() !== null) {
-      <yvc-icon [svg]="value()!"></yvc-icon>
-    }`, isInline: true, styles: [":host{display:flex;align-items:center;justify-content:center;padding:var(--tile-slot-padding)}:host :is(yvc-icon,yuv-object-type-icon){--icon-size: var(--icon-renderer-icon-size);width:var(--icon-size);height:var(--icon-size)}\n"], dependencies: [{ kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i1.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "component", type: ObjectTypeIconComponent, selector: "yuv-object-type-icon", inputs: ["objectTypeId"] }] }); }
+    constructor() {
+        super(...arguments);
+        this.#iconRegistry = inject(MatIconRegistry);
+        this.#sanitizer = inject(DomSanitizer);
+        this.customId = crypto.randomUUID();
+        this.#registerIconsEffect = effect(async () => {
+            const meta = this.meta();
+            this.propertyName() === 'custom' &&
+                !(meta && meta['isFontIcon']) &&
+                this.#iconRegistry.addSvgIconLiteral(this.customId, this.#sanitizer.bypassSecurityTrustHtml(this.value()));
+        });
+    }
+    #iconRegistry;
+    #sanitizer;
+    #registerIconsEffect;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: IconRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: IconRendererComponent, isStandalone: true, selector: "yuv-icon-renderer", usesInheritance: true, ngImport: i0, template: ` @let icon = value();
+    @if (propertyName() !== 'custom') {
+      <yuv-object-type-icon [objectTypeId]="icon || ''"></yuv-object-type-icon>
+    } @else if (icon !== null) {
+      @let metaData = meta();
+      @if (metaData && metaData['isFontIcon']) {
+        <mat-icon>{{ icon }}</mat-icon>
+      } @else {
+        <mat-icon [svgIcon]="customId"></mat-icon>
+      }
+    }`, isInline: true, styles: [":host{display:flex;align-items:center;justify-content:center;padding:var(--tile-slot-padding)}:host yuv-icon,:host yuv-object-type-icon{--icon-size: var(--icon-renderer-icon-size);width:var(--icon-size);height:var(--icon-size)}\n"], dependencies: [{ kind: "component", type: ObjectTypeIconComponent, selector: "yuv-object-type-icon", inputs: ["objectTypeId"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: IconRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-icon-renderer', standalone: true, imports: [YvcIconModule, ObjectTypeIconComponent], template: ` @if (propertyName() !== 'custom') {
-      <yuv-object-type-icon [objectTypeId]="value() || ''"></yuv-object-type-icon>
-    } @else if (value() !== null) {
-      <yvc-icon [svg]="value()!"></yvc-icon>
-    }`, styles: [":host{display:flex;align-items:center;justify-content:center;padding:var(--tile-slot-padding)}:host :is(yvc-icon,yuv-object-type-icon){--icon-size: var(--icon-renderer-icon-size);width:var(--icon-size);height:var(--icon-size)}\n"] }]
+            args: [{ selector: 'yuv-icon-renderer', standalone: true, imports: [ObjectTypeIconComponent, MatIcon], template: ` @let icon = value();
+    @if (propertyName() !== 'custom') {
+      <yuv-object-type-icon [objectTypeId]="icon || ''"></yuv-object-type-icon>
+    } @else if (icon !== null) {
+      @let metaData = meta();
+      @if (metaData && metaData['isFontIcon']) {
+        <mat-icon>{{ icon }}</mat-icon>
+      } @else {
+        <mat-icon [svgIcon]="customId"></mat-icon>
+      }
+    }`, styles: [":host{display:flex;align-items:center;justify-content:center;padding:var(--tile-slot-padding)}:host yuv-icon,:host yuv-object-type-icon{--icon-size: var(--icon-renderer-icon-size);width:var(--icon-size);height:var(--icon-size)}\n"] }]
         }] });
 
 class IntegerRendererComponent extends AbstractRendererComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IntegerRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: IntegerRendererComponent, isStandalone: true, selector: "yuv-integer-renderer", usesInheritance: true, ngImport: i0, template: '{{value()}}', isInline: true, styles: [":host{display:inline-block;padding:var(--tile-slot-padding)}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: IntegerRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: IntegerRendererComponent, isStandalone: true, selector: "yuv-integer-renderer", usesInheritance: true, ngImport: i0, template: '{{value()}}', isInline: true, styles: [":host{display:inline-block;padding:var(--tile-slot-padding)}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IntegerRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: IntegerRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-integer-renderer', standalone: true, template: '{{value()}}', styles: [":host{display:inline-block;padding:var(--tile-slot-padding)}\n"] }]
         }] });
@@ -107,28 +134,28 @@ class OrganizationRendererComponent extends AbstractRendererComponent {
             return (m ? m['title'] : this.value() || '');
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrganizationRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OrganizationRendererComponent, isStandalone: true, selector: "yuv-organization-renderer", usesInheritance: true, ngImport: i0, template: '{{resolvedValue()}}', isInline: true, styles: [":host{display:inline-block;padding:var(--tile-slot-padding)}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: OrganizationRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: OrganizationRendererComponent, isStandalone: true, selector: "yuv-organization-renderer", usesInheritance: true, ngImport: i0, template: '{{resolvedValue()}}', isInline: true, styles: [":host{display:inline-block;padding:var(--tile-slot-padding)}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrganizationRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: OrganizationRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-organization-renderer', imports: [], standalone: true, template: '{{resolvedValue()}}', styles: [":host{display:inline-block;padding:var(--tile-slot-padding)}\n"] }]
         }] });
 
 class StringRendererComponent extends AbstractRendererComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StringRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StringRendererComponent, isStandalone: true, selector: "yuv-string-renderer", usesInheritance: true, ngImport: i0, template: '{{value()}}', isInline: true, styles: [":host{display:inline-block;padding:var(--tile-slot-padding)}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: StringRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: StringRendererComponent, isStandalone: true, selector: "yuv-string-renderer", usesInheritance: true, ngImport: i0, template: '{{value()}}', isInline: true, styles: [":host{display:inline-block;padding:var(--tile-slot-padding)}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StringRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: StringRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-string-renderer', standalone: true, template: '{{value()}}', styles: [":host{display:inline-block;padding:var(--tile-slot-padding)}\n"] }]
         }] });
 
 class UnknownRendererComponent extends AbstractRendererComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnknownRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UnknownRendererComponent, isStandalone: true, selector: "yuv-unknown-renderer", usesInheritance: true, ngImport: i0, template: '{{value()}}', isInline: true, styles: [":host{display:inline-block;padding:var(--tile-slot-padding)}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: UnknownRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: UnknownRendererComponent, isStandalone: true, selector: "yuv-unknown-renderer", usesInheritance: true, ngImport: i0, template: '{{value()}}', isInline: true, styles: [":host{display:inline-block;padding:var(--tile-slot-padding)}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnknownRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: UnknownRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-unknown-renderer', standalone: true, imports: [], template: '{{value()}}', styles: [":host{display:inline-block;padding:var(--tile-slot-padding)}\n"] }]
         }] });
@@ -165,7 +192,7 @@ class RendererService {
         if (!r) {
             // not special renderer found so we'll try to get one for the internal type
             // of the given property
-            const srf = this.system.system.allFields[propertyName];
+            const srf = this.system.system && this.system.system.allFields[propertyName];
             if (srf) {
                 r = this.getRendererByType(this.system.getInternalFormElementType(srf.propertyType, srf.classifications));
             }
@@ -192,14 +219,13 @@ class RendererService {
     // Generate the unique key for a renderer
     _getKey(propertyName, typeName) {
         const k = [propertyName];
-        if (typeName)
-            k.push(typeName);
+        typeName && k.push(typeName);
         return k.join('-');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RendererService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RendererService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RendererService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RendererService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RendererService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RendererService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -214,45 +240,46 @@ class RendererDirective {
         this.rendererService = inject(RendererService);
         this.containerRef = inject(ViewContainerRef);
         this.injector = inject(Injector);
-    }
-    set yuvRenderer(i) {
-        if (i && !this._alreadyRendered(i)) {
-            this._rendererInput = i;
-            if (i) {
-                if (this.component)
+        this.yuvRenderer = input(undefined);
+        this.#yuvRendererEffect = effect(() => {
+            const i = this.yuvRenderer();
+            if (i && !this._alreadyRendered(i)) {
+                this._rendererInput = i;
+                if (i) {
+                    if (this.component)
+                        this.containerRef.clear();
+                    const cmp = i.rendererType
+                        ? this.rendererService.getRendererByType(i.rendererType)
+                        : this.rendererService.getRenderer(i.propertyName);
+                    this.component = this.containerRef.createComponent(cmp);
+                    // pass inputs to the renderer. As they are signals they need an injection context
+                    runInInjectionContext(this.injector, () => {
+                        this.component.setInput('propertyName', i.propertyName);
+                        this.component.setInput('value', i.value);
+                        if (i.meta)
+                            this.component.setInput('meta', i.meta);
+                    });
+                }
+                else {
                     this.containerRef.clear();
-                const cmp = i.rendererType
-                    ? this.rendererService.getRendererByType(i.rendererType)
-                    : this.rendererService.getRenderer(i.propertyName);
-                this.component = this.containerRef.createComponent(cmp);
-                // pass inputs to the renderer. As they are signals they need an injection context
-                runInInjectionContext(this.injector, () => {
-                    this.component.setInput('propertyName', i.propertyName);
-                    this.component.setInput('value', i.value);
-                    if (i.meta)
-                        this.component.setInput('meta', i.meta);
-                });
-            }
-            else {
-                this.containerRef.clear();
+                }
             }
-        }
+        });
     }
+    #yuvRendererEffect;
     _alreadyRendered(i) {
         return !!this._rendererInput && JSON.stringify(this._rendererInput) === JSON.stringify(i);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RendererDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: RendererDirective, isStandalone: true, selector: "[yuvRenderer]", inputs: { yuvRenderer: "yuvRenderer" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RendererDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.1", type: RendererDirective, isStandalone: true, selector: "[yuvRenderer]", inputs: { yuvRenderer: { classPropertyName: "yuvRenderer", publicName: "yuvRenderer", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RendererDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RendererDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[yuvRenderer]',
                     standalone: true
                 }]
-        }], propDecorators: { yuvRenderer: [{
-                type: Input
-            }] } });
+        }] });
 
 /**
  * Generated bundle index. Do not edit.