@yuuvis/client-framework 1.0.3 → 2.0.0-beta.2

package/fesm2022/yuuvis-client-framework-app-bar.mjs

@@ -1,11 +1,10 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { TemplateRef, ElementRef, Component, ViewChild, HostBinding, ContentChild, Input } from '@angular/core';
-import * as i3 from '@angular/router';
+import { ElementRef, TemplateRef, Input, ContentChild, HostBinding, ViewChild, Component } from '@angular/core';
+import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i2 from '@yuuvis/components/icon';
-import { YvcIconModule } from '@yuuvis/components/icon';
+import { YuvIconComponent } from '@yuuvis/client-framework/icons';
 
 /**
  * Application bar for yuuvis Momentum apps.
@@ -59,12 +58,12 @@ class AppBarComponent {
             this.dialogElement?.nativeElement.close();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AppBarComponent, isStandalone: true, selector: "yuv-app-bar", inputs: { menuIcon: "menuIcon", appTitle: "appTitle", appTitleRoute: "appTitleRoute" }, host: { properties: { "class.has-menu": "this.appBarSideNav" } }, queries: [{ propertyName: "appBarSideNav", first: true, predicate: ["appBarSideNav"], descendants: true, read: TemplateRef }, { propertyName: "appBarActions", first: true, predicate: ["appBarActions"], descendants: true, read: TemplateRef }, { propertyName: "appBarPrimaryActions", first: true, predicate: ["appBarPrimaryActions"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialogEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (!!appBarSideNav) {\n  <button class=\"menuIcon\" (click)=\"toggleSideNav()\">\n    <yvc-icon [svg]=\"menuIcon\"></yvc-icon>\n  </button>\n} @else {\n  <a class=\"app-title\" [routerLink]=\"appTitleRoute\">\n    <yvc-icon [svg]=\"menuIcon\"></yvc-icon>\n  </a>\n}\n<a class=\"app-title\" [routerLink]=\"appTitleRoute\">{{ appTitle }}</a>\n\n<div class=\"primary-actions\">\n  <ng-container *ngTemplateOutlet=\"appBarPrimaryActions\"></ng-container>\n</div>\n<div class=\"actions\">\n  <ng-container *ngTemplateOutlet=\"appBarActions\"></ng-container>\n</div>\n\n<dialog #dialogEl (click)=\"onDialogClick($event)\">\n  <section>\n    <ng-container *ngTemplateOutlet=\"appBarSideNav\"></ng-container>\n  </section>\n</dialog>\n", styles: [":host{--app-bar-icon-size: 24px;--app-bar-button-padding: calc(var(--app-pane-padding) * .75);--app-bar-sidenav-margin-start: 0;display:flex;gap:var(--app-pane-padding);align-items:center;background-color:var(--panel-background)}:host:not(.has-menu){min-height:calc(var(--app-bar-icon-size) + var(--app-bar-button-padding) * 2);padding-inline-start:var(--app-pane-padding)}:host:not(.has-menu) .menuIcon{display:none}:host:not(.has-menu) .sidenav{display:none}:host .menuIcon{border:0;padding:var(--app-bar-button-padding);flex:0 0 auto}:host .menuIcon yvc-icon{--icon-size: var(--app-bar-icon-size)}:host a.app-title{display:flex;align-items:center;justify-content:center;color:var(--text-color-body);text-decoration:none;flex:0 0 auto;border-radius:2px}:host a.app-title:active,:host a.app-title:focus-visible{outline:1px solid var(--text-color-hint);outline-offset:.25em}:host .primary-actions{flex:0;display:flex;margin-inline:var(--app-pane-padding)}:host .actions{flex:1;display:flex;margin-inline-end:var(--app-pane-padding);justify-content:flex-end}:host dialog{max-height:100%;width:max-content;height:100%;inset-inline-start:var(--app-bar-sidenav-margin-start);margin:0;padding:0;box-sizing:border-box;outline:0;border:0}:host dialog::backdrop{background-color:var(--main-background);opacity:.8;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}:host dialog>section{height:100%;overflow-y:auto;background-color:var(--main-background);color:var(--text-color-body);border-inline-end:1px solid var(--panel-divider-color)}:host dialog[open]{animation:dialogAppear .2s ease-in-out}@keyframes dialogAppear{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i2.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AppBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AppBarComponent, isStandalone: true, selector: "yuv-app-bar", inputs: { menuIcon: "menuIcon", appTitle: "appTitle", appTitleRoute: "appTitleRoute" }, host: { properties: { "class.has-menu": "this.appBarSideNav" } }, queries: [{ propertyName: "appBarSideNav", first: true, predicate: ["appBarSideNav"], descendants: true, read: TemplateRef }, { propertyName: "appBarActions", first: true, predicate: ["appBarActions"], descendants: true, read: TemplateRef }, { propertyName: "appBarPrimaryActions", first: true, predicate: ["appBarPrimaryActions"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialogEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (!!appBarSideNav) {\n  <button class=\"menuIcon\" (click)=\"toggleSideNav()\">\n    <yuv-icon [svg]=\"menuIcon\"></yuv-icon>\n  </button>\n} @else {\n  <a class=\"app-title\" [routerLink]=\"appTitleRoute\">\n    <yuv-icon [svg]=\"menuIcon\"></yuv-icon>\n  </a>\n}\n<a class=\"app-title\" [routerLink]=\"appTitleRoute\">{{ appTitle }}</a>\n\n<div class=\"primary-actions\">\n  <ng-container *ngTemplateOutlet=\"appBarPrimaryActions\"></ng-container>\n</div>\n<div class=\"actions\">\n  <ng-container *ngTemplateOutlet=\"appBarActions\"></ng-container>\n</div>\n\n<dialog #dialogEl (click)=\"onDialogClick($event)\">\n  <section>\n    <ng-container *ngTemplateOutlet=\"appBarSideNav\"></ng-container>\n  </section>\n</dialog>\n", styles: [":host{--app-bar-icon-size: 24px;--app-bar-button-padding: var(--ymt-spacing-s);--app-bar-sidenav-margin-start: 0;display:flex;gap:var(--ymt-spacing-m);align-items:center;background-color:var(--ymt-surface-panel)}:host:not(.has-menu){min-height:calc(var(--app-bar-icon-size) + var(--app-bar-button-padding) * 2);padding-inline-start:var(--ymt-spacing-m)}:host:not(.has-menu) .menuIcon{display:none}:host:not(.has-menu) .sidenav{display:none}:host .menuIcon{border:0;padding:var(--app-bar-button-padding);flex:0 0 auto}:host a.app-title{display:flex;align-items:center;justify-content:center;color:var(--ymt-text-color);text-decoration:none;flex:0 0 auto;border-radius:2px}:host a.app-title:active,:host a.app-title:focus-visible{outline:1px solid var(--ymt-text-color-subtle);outline-offset:.25em}:host .primary-actions{flex:0;display:flex;margin-inline:var(--ymt-spacing-m)}:host .actions{flex:1;display:flex;margin-inline-end:var(--ymt-spacing-m);justify-content:flex-end}:host dialog{max-height:100%;width:max-content;height:100%;inset-inline-start:var(--app-bar-sidenav-margin-start);margin:0;padding:0;box-sizing:border-box;outline:0;border:0}:host dialog::backdrop{background-color:var(--ymt-surface);opacity:.8;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}:host dialog>section{height:100%;overflow-y:auto;background-color:var(--ymt-surface);color:var(--ymt-text-color);border-inline-end:1px solid var(--ymt-outline-variant)}:host dialog[open]{animation:dialogAppear .2s ease-in-out}@keyframes dialogAppear{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: YuvIconComponent, selector: "yuv-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AppBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-app-bar', standalone: true, imports: [CommonModule, YvcIconModule, RouterModule], template: "@if (!!appBarSideNav) {\n  <button class=\"menuIcon\" (click)=\"toggleSideNav()\">\n    <yvc-icon [svg]=\"menuIcon\"></yvc-icon>\n  </button>\n} @else {\n  <a class=\"app-title\" [routerLink]=\"appTitleRoute\">\n    <yvc-icon [svg]=\"menuIcon\"></yvc-icon>\n  </a>\n}\n<a class=\"app-title\" [routerLink]=\"appTitleRoute\">{{ appTitle }}</a>\n\n<div class=\"primary-actions\">\n  <ng-container *ngTemplateOutlet=\"appBarPrimaryActions\"></ng-container>\n</div>\n<div class=\"actions\">\n  <ng-container *ngTemplateOutlet=\"appBarActions\"></ng-container>\n</div>\n\n<dialog #dialogEl (click)=\"onDialogClick($event)\">\n  <section>\n    <ng-container *ngTemplateOutlet=\"appBarSideNav\"></ng-container>\n  </section>\n</dialog>\n", styles: [":host{--app-bar-icon-size: 24px;--app-bar-button-padding: calc(var(--app-pane-padding) * .75);--app-bar-sidenav-margin-start: 0;display:flex;gap:var(--app-pane-padding);align-items:center;background-color:var(--panel-background)}:host:not(.has-menu){min-height:calc(var(--app-bar-icon-size) + var(--app-bar-button-padding) * 2);padding-inline-start:var(--app-pane-padding)}:host:not(.has-menu) .menuIcon{display:none}:host:not(.has-menu) .sidenav{display:none}:host .menuIcon{border:0;padding:var(--app-bar-button-padding);flex:0 0 auto}:host .menuIcon yvc-icon{--icon-size: var(--app-bar-icon-size)}:host a.app-title{display:flex;align-items:center;justify-content:center;color:var(--text-color-body);text-decoration:none;flex:0 0 auto;border-radius:2px}:host a.app-title:active,:host a.app-title:focus-visible{outline:1px solid var(--text-color-hint);outline-offset:.25em}:host .primary-actions{flex:0;display:flex;margin-inline:var(--app-pane-padding)}:host .actions{flex:1;display:flex;margin-inline-end:var(--app-pane-padding);justify-content:flex-end}:host dialog{max-height:100%;width:max-content;height:100%;inset-inline-start:var(--app-bar-sidenav-margin-start);margin:0;padding:0;box-sizing:border-box;outline:0;border:0}:host dialog::backdrop{background-color:var(--main-background);opacity:.8;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}:host dialog>section{height:100%;overflow-y:auto;background-color:var(--main-background);color:var(--text-color-body);border-inline-end:1px solid var(--panel-divider-color)}:host dialog[open]{animation:dialogAppear .2s ease-in-out}@keyframes dialogAppear{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}\n"] }]
+            args: [{ selector: 'yuv-app-bar', standalone: true, imports: [CommonModule, YuvIconComponent, RouterModule], template: "@if (!!appBarSideNav) {\n  <button class=\"menuIcon\" (click)=\"toggleSideNav()\">\n    <yuv-icon [svg]=\"menuIcon\"></yuv-icon>\n  </button>\n} @else {\n  <a class=\"app-title\" [routerLink]=\"appTitleRoute\">\n    <yuv-icon [svg]=\"menuIcon\"></yuv-icon>\n  </a>\n}\n<a class=\"app-title\" [routerLink]=\"appTitleRoute\">{{ appTitle }}</a>\n\n<div class=\"primary-actions\">\n  <ng-container *ngTemplateOutlet=\"appBarPrimaryActions\"></ng-container>\n</div>\n<div class=\"actions\">\n  <ng-container *ngTemplateOutlet=\"appBarActions\"></ng-container>\n</div>\n\n<dialog #dialogEl (click)=\"onDialogClick($event)\">\n  <section>\n    <ng-container *ngTemplateOutlet=\"appBarSideNav\"></ng-container>\n  </section>\n</dialog>\n", styles: [":host{--app-bar-icon-size: 24px;--app-bar-button-padding: var(--ymt-spacing-s);--app-bar-sidenav-margin-start: 0;display:flex;gap:var(--ymt-spacing-m);align-items:center;background-color:var(--ymt-surface-panel)}:host:not(.has-menu){min-height:calc(var(--app-bar-icon-size) + var(--app-bar-button-padding) * 2);padding-inline-start:var(--ymt-spacing-m)}:host:not(.has-menu) .menuIcon{display:none}:host:not(.has-menu) .sidenav{display:none}:host .menuIcon{border:0;padding:var(--app-bar-button-padding);flex:0 0 auto}:host a.app-title{display:flex;align-items:center;justify-content:center;color:var(--ymt-text-color);text-decoration:none;flex:0 0 auto;border-radius:2px}:host a.app-title:active,:host a.app-title:focus-visible{outline:1px solid var(--ymt-text-color-subtle);outline-offset:.25em}:host .primary-actions{flex:0;display:flex;margin-inline:var(--ymt-spacing-m)}:host .actions{flex:1;display:flex;margin-inline-end:var(--ymt-spacing-m);justify-content:flex-end}:host dialog{max-height:100%;width:max-content;height:100%;inset-inline-start:var(--app-bar-sidenav-margin-start);margin:0;padding:0;box-sizing:border-box;outline:0;border:0}:host dialog::backdrop{background-color:var(--ymt-surface);opacity:.8;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}:host dialog>section{height:100%;overflow-y:auto;background-color:var(--ymt-surface);color:var(--ymt-text-color);border-inline-end:1px solid var(--ymt-outline-variant)}:host dialog[open]{animation:dialogAppear .2s ease-in-out}@keyframes dialogAppear{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}\n"] }]
         }], propDecorators: { dialogElement: [{
                 type: ViewChild,
                 args: ['dialogEl', { read: ElementRef }]

package/fesm2022/yuuvis-client-framework-app-bar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"yuuvis-client-framework-app-bar.mjs","sources":["../../../../../libs/yuuvis/client-framework/app-bar/src/lib/app-bar.component.ts","../../../../../libs/yuuvis/client-framework/app-bar/src/lib/app-bar.component.html","../../../../../libs/yuuvis/client-framework/app-bar/src/yuuvis-client-framework-app-bar.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, ContentChild, ElementRef, HostBinding, Input, TemplateRef, ViewChild } from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport { YvcIconModule } from '@yuuvis/components/icon';\n\n/**\n * Application bar for yuuvis Momentum apps.\n *\n * Adding a `#appBarSideNav` template to the components body will show a menu icon\n * that opens its content in a sidenav element.\n *\n * Adding a `#appBarActions` template to the component will add its content to\n * the actions section (at the end of the app bar).\n *\n * @example\n * <yuv-app-bar title=\"MyMomentumApp\">\n *   <ng-template #appBarSideNav>\n *     ... content supposed to end up in a sidenav ...\n *   </ng-template>\n *   <ng-template #appBarPrimaryActions>\n *     ... content supposed to end up in the app bars primary actions section ...\n *   </ng-template>\n *   <ng-template #appBarActions>\n *     ... content supposed to end up in the app bars actions section ...\n *   </ng-template>\n * </yuv-app-bar>\n */\n@Component({\n  selector: 'yuv-app-bar',\n  standalone: true,\n  imports: [CommonModule, YvcIconModule, RouterModule],\n  templateUrl: './app-bar.component.html',\n  styleUrls: ['./app-bar.component.scss']\n})\nexport class AppBarComponent {\n  @ViewChild('dialogEl', { read: ElementRef }) dialogElement: ElementRef<HTMLDialogElement> | null = null;\n  @HostBinding('class.has-menu')\n  @ContentChild('appBarSideNav', { read: TemplateRef })\n  appBarSideNav: TemplateRef<any> | null = null;\n  @ContentChild('appBarActions', { read: TemplateRef }) appBarActions: TemplateRef<any> | null = null;\n  @ContentChild('appBarPrimaryActions', { read: TemplateRef }) appBarPrimaryActions: TemplateRef<any> | null = null;\n\n  /**\n   * Menu icon SVG. By default this will be the hamburger menu icon\n   */\n  @Input() menuIcon =\n    '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 -960 960 960\" width=\"24\"><path d=\"M140.001-254.616v-59.999h679.998v59.999H140.001Zm0-195.385v-59.998h679.998v59.998H140.001Zm0-195.384v-59.999h679.998v59.999H140.001Z\"/></svg>';\n  /**\n   * App title visible in the app beside the menu\n   */\n  @Input() appTitle?: string;\n  /**\n   * Where to route to, when the title is clicked. Defaults to '/'\n   */\n  @Input() appTitleRoute?: string = './';\n\n  sidenavVisible = false;\n\n  toggleSideNav() {\n    const dialogEl = this.dialogElement!.nativeElement;\n    if (!dialogEl.hasAttribute('open')) dialogEl.showModal();\n    else dialogEl.close();\n\n    // this.dialogElement!.nativeElement.showModal()\n    // this.sidenavVisible = !this.sidenavVisible\n  }\n\n  onDialogClick(e: MouseEvent) {\n    if ((e.target as HTMLElement).nodeName === 'DIALOG') {\n      this.dialogElement?.nativeElement.close();\n    }\n  }\n}\n","@if (!!appBarSideNav) {\n  <button class=\"menuIcon\" (click)=\"toggleSideNav()\">\n    <yvc-icon [svg]=\"menuIcon\"></yvc-icon>\n  </button>\n} @else {\n  <a class=\"app-title\" [routerLink]=\"appTitleRoute\">\n    <yvc-icon [svg]=\"menuIcon\"></yvc-icon>\n  </a>\n}\n<a class=\"app-title\" [routerLink]=\"appTitleRoute\">{{ appTitle }}</a>\n\n<div class=\"primary-actions\">\n  <ng-container *ngTemplateOutlet=\"appBarPrimaryActions\"></ng-container>\n</div>\n<div class=\"actions\">\n  <ng-container *ngTemplateOutlet=\"appBarActions\"></ng-container>\n</div>\n\n<dialog #dialogEl (click)=\"onDialogClick($event)\">\n  <section>\n    <ng-container *ngTemplateOutlet=\"appBarSideNav\"></ng-container>\n  </section>\n</dialog>\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-app-bar.mjs","sources":["../../../../../libs/yuuvis/client-framework/app-bar/src/lib/app-bar.component.ts","../../../../../libs/yuuvis/client-framework/app-bar/src/lib/app-bar.component.html","../../../../../libs/yuuvis/client-framework/app-bar/src/yuuvis-client-framework-app-bar.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, ContentChild, ElementRef, HostBinding, Input, TemplateRef, ViewChild } from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport { YuvIconComponent } from '@yuuvis/client-framework/icons';\n\n/**\n * Application bar for yuuvis Momentum apps.\n *\n * Adding a `#appBarSideNav` template to the components body will show a menu icon\n * that opens its content in a sidenav element.\n *\n * Adding a `#appBarActions` template to the component will add its content to\n * the actions section (at the end of the app bar).\n *\n * @example\n * <yuv-app-bar title=\"MyMomentumApp\">\n *   <ng-template #appBarSideNav>\n *     ... content supposed to end up in a sidenav ...\n *   </ng-template>\n *   <ng-template #appBarPrimaryActions>\n *     ... content supposed to end up in the app bars primary actions section ...\n *   </ng-template>\n *   <ng-template #appBarActions>\n *     ... content supposed to end up in the app bars actions section ...\n *   </ng-template>\n * </yuv-app-bar>\n */\n@Component({\n  selector: 'yuv-app-bar',\n  standalone: true,\n  imports: [CommonModule, YuvIconComponent, RouterModule],\n  templateUrl: './app-bar.component.html',\n  styleUrls: ['./app-bar.component.scss']\n})\nexport class AppBarComponent {\n  @ViewChild('dialogEl', { read: ElementRef }) dialogElement: ElementRef<HTMLDialogElement> | null = null;\n  @HostBinding('class.has-menu')\n  @ContentChild('appBarSideNav', { read: TemplateRef })\n  appBarSideNav: TemplateRef<any> | null = null;\n  @ContentChild('appBarActions', { read: TemplateRef }) appBarActions: TemplateRef<any> | null = null;\n  @ContentChild('appBarPrimaryActions', { read: TemplateRef }) appBarPrimaryActions: TemplateRef<any> | null = null;\n\n  /**\n   * Menu icon SVG. By default this will be the hamburger menu icon\n   */\n  @Input() menuIcon =\n    '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 -960 960 960\" width=\"24\"><path d=\"M140.001-254.616v-59.999h679.998v59.999H140.001Zm0-195.385v-59.998h679.998v59.998H140.001Zm0-195.384v-59.999h679.998v59.999H140.001Z\"/></svg>';\n  /**\n   * App title visible in the app beside the menu\n   */\n  @Input() appTitle?: string;\n  /**\n   * Where to route to, when the title is clicked. Defaults to '/'\n   */\n  @Input() appTitleRoute?: string = './';\n\n  sidenavVisible = false;\n\n  toggleSideNav() {\n    const dialogEl = this.dialogElement!.nativeElement;\n    if (!dialogEl.hasAttribute('open')) dialogEl.showModal();\n    else dialogEl.close();\n\n    // this.dialogElement!.nativeElement.showModal()\n    // this.sidenavVisible = !this.sidenavVisible\n  }\n\n  onDialogClick(e: MouseEvent) {\n    if ((e.target as HTMLElement).nodeName === 'DIALOG') {\n      this.dialogElement?.nativeElement.close();\n    }\n  }\n}\n","@if (!!appBarSideNav) {\n  <button class=\"menuIcon\" (click)=\"toggleSideNav()\">\n    <yuv-icon [svg]=\"menuIcon\"></yuv-icon>\n  </button>\n} @else {\n  <a class=\"app-title\" [routerLink]=\"appTitleRoute\">\n    <yuv-icon [svg]=\"menuIcon\"></yuv-icon>\n  </a>\n}\n<a class=\"app-title\" [routerLink]=\"appTitleRoute\">{{ appTitle }}</a>\n\n<div class=\"primary-actions\">\n  <ng-container *ngTemplateOutlet=\"appBarPrimaryActions\"></ng-container>\n</div>\n<div class=\"actions\">\n  <ng-container *ngTemplateOutlet=\"appBarActions\"></ng-container>\n</div>\n\n<dialog #dialogEl (click)=\"onDialogClick($event)\">\n  <section>\n    <ng-container *ngTemplateOutlet=\"appBarSideNav\"></ng-container>\n  </section>\n</dialog>\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-autocomplete.mjs

@@ -0,0 +1,210 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, input, viewChild, contentChild, TemplateRef, signal, effect, output, computed, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { ENTER, COMMA } from '@angular/cdk/keycodes';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i7 from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import * as i6 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i2 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i4 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i5 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { AbstractMatFormField, injectNgControl } from '@yuuvis/client-framework/common';
+import { filter, debounceTime } from 'rxjs/operators';
+
+class AutocompleteComponent extends AbstractMatFormField {
+    constructor() {
+        super(...arguments);
+        this.#dRef = inject(DestroyRef);
+        this.ariaLabel = input('');
+        this.matAutocomplete = viewChild.required('auto');
+        /**
+         * Template to be used for rendering selected items in multiselect (multiple="true") mode
+         */
+        this.chipTemplate = contentChild('chipTemplate', { read: TemplateRef });
+        this.optionTemplate = contentChild('optionTemplate', { read: TemplateRef });
+        /**
+         * Show a loading spinner
+         */
+        this.busy = input(false);
+        /**
+         * Enable multiple values
+         */
+        this.multiple = input(false);
+        /**
+         * Force distinct values  (only applicable for multiselect)
+         */
+        this.distinctValues = input(true);
+        /**
+         * Add user inputs to the list of values when the user leaves the
+         * control without entering (only applicable for multiselect)
+         */
+        this.addOnBlur = input(false);
+        /**
+         * Minimum number of characters entered to trigger suggestions
+         */
+        this.minLength = input(2);
+        /**
+         * Maximum number of items when multiple is true. -1 means no limit.
+         */
+        this.maxItems = input(-1);
+        /**
+         * Setting this to `true` will not allow values that are not contained in the suggestions list. The input
+         * will be cleared on blur if no value from the list has been selected. Also values are only emitted when a
+         * list item has been selected (usually every key stroke is changing the form controls value)
+         */
+        this.forceSelection = input(false);
+        this._acValues = signal([]);
+        this.autocompleteValues = input([]);
+        this.#acValueEffect = effect(() => {
+            const acv = this.multiple() && this.distinctValues()
+                ? this.autocompleteValues().filter((v) => !(this.value || []).some((i) => i.label === v.label))
+                : this.autocompleteValues();
+            this._acValues.set(acv);
+        });
+        this.autocompleteFnc = output();
+        // value = signal<AutocompleteItem[]>([]);
+        this.chipsInputDisabled = computed(() => this.multiple() && this.maxItems() !== -1 && this.value && this.value.length >= this.maxItems());
+        this.chipsControl = new FormControl([]);
+        this.inputControl = new FormControl('', {
+            nonNullable: true
+        });
+        this.ngControl = injectNgControl(this);
+        this.#activeAutocompleteValue = signal(null);
+        // multiple selection
+        this.separatorKeysCodes = [ENTER, COMMA];
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this._onChange = () => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this._onTouched = () => { };
+    }
+    #dRef;
+    #acValueEffect;
+    displayFn(i) {
+        return i?.label;
+    }
+    #activeAutocompleteValue;
+    acOptionSelected(event) {
+        if (this.multiple()) {
+            this.value = [...(this.value || []), event.option.value];
+            this.inputControl.setValue('');
+        }
+        else {
+            this.value = event.option.value;
+        }
+        this._onChange(this.value);
+        event.option.deselect();
+        this._acValues.set([]);
+    }
+    acOptionActivated(event) {
+        if (event.option)
+            this.#activeAutocompleteValue.set(event.option.value);
+    }
+    acPanelClosed() {
+        this.#activeAutocompleteValue.set(null);
+        this._acValues.set([]);
+    }
+    // triggered when the user presses enter or comma
+    add(event) {
+        if (this.#activeAutocompleteValue())
+            return;
+        const value = (event.value || '').trim();
+        const isDistinct = !(this.value || []).some((i) => i.label === value);
+        if ((!this.distinctValues() || isDistinct) && value.length > 0) {
+            this.value = [...(this.value || []), { label: value, value }];
+            this._onChange(this.value);
+        }
+        // Clear the input value
+        this.inputControl.setValue('');
+        this.matAutocomplete().showPanel = false;
+    }
+    onInputBlur() {
+        if (!this.multiple())
+            return;
+        // need to timeout because clicking on the option will trigger the blur event before the click event
+        // and the input value will be cleared before the option is selected
+        setTimeout(() => {
+            const iv = this.inputControl.value;
+            if (iv && iv.length > 0 && this.addOnBlur()) {
+                const match = this.autocompleteValues().find((i) => i.label === iv);
+                if (this.forceSelection() && match) {
+                    this.value = this.multiple() ? [...(this.value || []), match] : [match];
+                    this._onChange(this.value);
+                }
+                else if (!this.forceSelection()) {
+                    const v = { label: iv, value: iv };
+                    this.value = this.multiple() ? [...(this.value || []), v] : [v];
+                    this._onChange(this.value);
+                }
+            }
+            this.inputControl.setValue('');
+            this._acValues.set([]);
+        }, 500);
+    }
+    removeItem(item) {
+        this.value = (this.value || []).filter((i) => i !== item);
+        this._onChange(this.value);
+    }
+    writeValue(value) {
+        if (!this.multiple()) {
+            this.value = [value];
+            this.inputControl.patchValue(value, { emitEvent: false });
+        }
+        else {
+            this.value = structuredClone(value);
+        }
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    ngOnInit() {
+        this.inputControl.valueChanges
+            .pipe(filter((value) => !!value && value.length >= this.minLength()), debounceTime(300), takeUntilDestroyed(this.#dRef))
+            .subscribe((value) => {
+            this.autocompleteFnc.emit(value || '');
+        });
+    }
+    ngOnDestroy() {
+        super.onNgOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AutocompleteComponent, isStandalone: true, selector: "yuv-autocomplete", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, distinctValues: { classPropertyName: "distinctValues", publicName: "distinctValues", isSignal: true, isRequired: false, transformFunction: null }, addOnBlur: { classPropertyName: "addOnBlur", publicName: "addOnBlur", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, forceSelection: { classPropertyName: "forceSelection", publicName: "forceSelection", isSignal: true, isRequired: false, transformFunction: null }, autocompleteValues: { classPropertyName: "autocompleteValues", publicName: "autocompleteValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { autocompleteFnc: "autocompleteFnc" }, host: { attributes: { "attr.aria-disabled": "disabled" } }, providers: [{ provide: MatFormFieldControl, useExisting: AutocompleteComponent }], queries: [{ propertyName: "chipTemplate", first: true, predicate: ["chipTemplate"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (multiple()) {\n  <mat-chip-grid #chipGrid [attr.aria-label]=\"ariaLabel()\" [formControl]=\"chipsControl\">\n    @for (v of value; track $index) {\n      <mat-chip-row (removed)=\"removeItem(v)\">\n        {{ v.label || v.value || v }}\n        <button matChipRemove>\n          <mat-icon>cancel</mat-icon>\n        </button>\n      </mat-chip-row>\n    }\n  </mat-chip-grid>\n\n  <input\n    [disabled]=\"!!chipsInputDisabled()\"\n    type=\"text\"\n    (blur)=\"onInputBlur()\"\n    [placeholder]=\"placeholder || ''\"\n    [formControl]=\"inputControl\"\n    [matAutocomplete]=\"auto\"\n    [matChipInputFor]=\"chipGrid\"\n    [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n    (matChipInputTokenEnd)=\"add($event)\"\n  />\n} @else {\n  <input type=\"text\" matInput [placeholder]=\"placeholder || ''\" [attr.aria-label]=\"ariaLabel()\" [formControl]=\"inputControl\" [matAutocomplete]=\"auto\" />\n}\n@if (busy()) {\n  <mat-spinner [diameter]=\"16\"></mat-spinner>\n}\n<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  (optionSelected)=\"acOptionSelected($event)\"\n  (optionActivated)=\"acOptionActivated($event)\"\n  (closed)=\"acPanelClosed()\"\n  [displayWith]=\"displayFn\"\n>\n  @for (option of _acValues(); track option.label) {\n    <mat-option [value]=\"option\">\n      <ng-container *ngTemplateOutlet=\"optionTemplate() || null; context: { $implicit: option }\"></ng-container>\n      @if (!optionTemplate()) {\n        {{ option.label }}\n      }\n    </mat-option>\n  }\n</mat-autocomplete>\n", styles: [":host{display:inline-flex;position:relative}:host input{background-color:transparent;border:0;width:100%;font-family:var(--mdc-chip-label-text-font, var(--mat-sys-label-large-font));line-height:var(--mdc-chip-label-text-line-height, var(--mat-sys-label-large-line-height));font-size:var(--mdc-chip-label-text-size, var(--mat-sys-label-large-size));font-weight:var(--mdc-chip-label-text-weight, var(--mat-sys-label-large-weight));letter-spacing:var(--mdc-chip-label-text-tracking, var(--mat-sys-label-large-tracking))}:host mat-spinner{align-self:center;position:absolute;inset-inline-end:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-autocomplete', imports: [CommonModule, MatChipsModule, MatIconModule, MatInputModule, MatProgressSpinnerModule, MatAutocompleteModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: MatFormFieldControl, useExisting: AutocompleteComponent }], host: {
+                        'attr.aria-disabled': 'disabled'
+                    }, template: "@if (multiple()) {\n  <mat-chip-grid #chipGrid [attr.aria-label]=\"ariaLabel()\" [formControl]=\"chipsControl\">\n    @for (v of value; track $index) {\n      <mat-chip-row (removed)=\"removeItem(v)\">\n        {{ v.label || v.value || v }}\n        <button matChipRemove>\n          <mat-icon>cancel</mat-icon>\n        </button>\n      </mat-chip-row>\n    }\n  </mat-chip-grid>\n\n  <input\n    [disabled]=\"!!chipsInputDisabled()\"\n    type=\"text\"\n    (blur)=\"onInputBlur()\"\n    [placeholder]=\"placeholder || ''\"\n    [formControl]=\"inputControl\"\n    [matAutocomplete]=\"auto\"\n    [matChipInputFor]=\"chipGrid\"\n    [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n    (matChipInputTokenEnd)=\"add($event)\"\n  />\n} @else {\n  <input type=\"text\" matInput [placeholder]=\"placeholder || ''\" [attr.aria-label]=\"ariaLabel()\" [formControl]=\"inputControl\" [matAutocomplete]=\"auto\" />\n}\n@if (busy()) {\n  <mat-spinner [diameter]=\"16\"></mat-spinner>\n}\n<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  (optionSelected)=\"acOptionSelected($event)\"\n  (optionActivated)=\"acOptionActivated($event)\"\n  (closed)=\"acPanelClosed()\"\n  [displayWith]=\"displayFn\"\n>\n  @for (option of _acValues(); track option.label) {\n    <mat-option [value]=\"option\">\n      <ng-container *ngTemplateOutlet=\"optionTemplate() || null; context: { $implicit: option }\"></ng-container>\n      @if (!optionTemplate()) {\n        {{ option.label }}\n      }\n    </mat-option>\n  }\n</mat-autocomplete>\n", styles: [":host{display:inline-flex;position:relative}:host input{background-color:transparent;border:0;width:100%;font-family:var(--mdc-chip-label-text-font, var(--mat-sys-label-large-font));line-height:var(--mdc-chip-label-text-line-height, var(--mat-sys-label-large-line-height));font-size:var(--mdc-chip-label-text-size, var(--mat-sys-label-large-size));font-weight:var(--mdc-chip-label-text-weight, var(--mat-sys-label-large-weight));letter-spacing:var(--mdc-chip-label-text-tracking, var(--mat-sys-label-large-tracking))}:host mat-spinner{align-self:center;position:absolute;inset-inline-end:0}\n"] }]
+        }] });
+
+class YuvAutocompleteModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: YuvAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: YuvAutocompleteModule, imports: [AutocompleteComponent], exports: [AutocompleteComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: YuvAutocompleteModule, imports: [AutocompleteComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: YuvAutocompleteModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [AutocompleteComponent],
+                    exports: [AutocompleteComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AutocompleteComponent, YuvAutocompleteModule };
+//# sourceMappingURL=yuuvis-client-framework-autocomplete.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"yuuvis-client-framework-autocomplete.mjs","sources":["../../../../../libs/yuuvis/client-framework/autocomplete/src/lib/autocomplete.component.ts","../../../../../libs/yuuvis/client-framework/autocomplete/src/lib/autocomplete.component.html","../../../../../libs/yuuvis/client-framework/autocomplete/src/lib/autocomplete.module.ts","../../../../../libs/yuuvis/client-framework/autocomplete/src/yuuvis-client-framework-autocomplete.ts"],"sourcesContent":["import { COMMA, ENTER } from '@angular/cdk/keycodes';\nimport { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  DestroyRef,\n  effect,\n  inject,\n  input,\n  OnDestroy,\n  OnInit,\n  output,\n  signal,\n  TemplateRef,\n  viewChild\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor, FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MatAutocomplete, MatAutocompleteActivatedEvent, MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';\nimport { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';\nimport { MatFormFieldControl } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\nimport { AbstractMatFormField, injectNgControl } from '@yuuvis/client-framework/common';\nimport { debounceTime, filter } from 'rxjs/operators';\nimport { AutocompleteItem } from './autocomplete.interface';\n\n@Component({\n  selector: 'yuv-autocomplete',\n  imports: [CommonModule, MatChipsModule, MatIconModule, MatInputModule, MatProgressSpinnerModule, MatAutocompleteModule, ReactiveFormsModule],\n  templateUrl: './autocomplete.component.html',\n  styleUrl: './autocomplete.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: MatFormFieldControl, useExisting: AutocompleteComponent }],\n  host: {\n    'attr.aria-disabled': 'disabled'\n  }\n})\nexport class AutocompleteComponent extends AbstractMatFormField<AutocompleteItem[]> implements ControlValueAccessor, OnInit, OnDestroy {\n  #dRef = inject(DestroyRef);\n\n  ariaLabel = input<string>('');\n\n  matAutocomplete = viewChild.required<MatAutocomplete>('auto');\n  /**\n   * Template to be used for rendering selected items in multiselect (multiple=\"true\") mode\n   */\n  chipTemplate = contentChild('chipTemplate', { read: TemplateRef });\n  optionTemplate = contentChild('optionTemplate', { read: TemplateRef });\n\n  /**\n   * Show a loading spinner\n   */\n  busy = input<boolean>(false);\n  /**\n   * Enable multiple values\n   */\n  multiple = input<boolean>(false);\n  /**\n   * Force distinct values  (only applicable for multiselect)\n   */\n  distinctValues = input<boolean>(true);\n  /**\n   * Add user inputs to the list of values when the user leaves the\n   * control without entering (only applicable for multiselect)\n   */\n  addOnBlur = input<boolean>(false);\n  /**\n   * Minimum number of characters entered to trigger suggestions\n   */\n  minLength = input<number>(2);\n  /**\n   * Maximum number of items when multiple is true. -1 means no limit.\n   */\n  maxItems = input<number>(-1);\n  /**\n   * Setting this to `true` will not allow values that are not contained in the suggestions list. The input\n   * will be cleared on blur if no value from the list has been selected. Also values are only emitted when a\n   * list item has been selected (usually every key stroke is changing the form controls value)\n   */\n  forceSelection = input<boolean>(false);\n\n  _acValues = signal<AutocompleteItem[]>([]);\n  autocompleteValues = input<AutocompleteItem[]>([]);\n  #acValueEffect = effect(() => {\n    const acv =\n      this.multiple() && this.distinctValues()\n        ? this.autocompleteValues().filter((v) => !(this.value || []).some((i) => i.label === v.label))\n        : this.autocompleteValues();\n    this._acValues.set(acv);\n  });\n  autocompleteFnc = output<string>();\n\n  // value = signal<AutocompleteItem[]>([]);\n  chipsInputDisabled = computed(() => this.multiple() && this.maxItems() !== -1 && this.value && this.value.length >= this.maxItems());\n  chipsControl = new FormControl<AutocompleteItem[]>([]);\n  inputControl = new FormControl<AutocompleteItem | string>('', {\n    nonNullable: true\n  });\n\n  override ngControl = injectNgControl(this);\n\n  displayFn(i: AutocompleteItem): string {\n    return i?.label;\n  }\n\n  #activeAutocompleteValue = signal<AutocompleteItem | null>(null);\n\n  acOptionSelected(event: MatAutocompleteSelectedEvent): void {\n    if (this.multiple()) {\n      this.value = [...(this.value || []), event.option.value];\n      this.inputControl.setValue('');\n    } else {\n      this.value = event.option.value;\n    }\n    this._onChange(this.value);\n    event.option.deselect();\n    this._acValues.set([]);\n  }\n\n  acOptionActivated(event: MatAutocompleteActivatedEvent): void {\n    if (event.option) this.#activeAutocompleteValue.set(event.option.value);\n  }\n\n  acPanelClosed() {\n    this.#activeAutocompleteValue.set(null);\n    this._acValues.set([]);\n  }\n\n  // multiple selection\n  readonly separatorKeysCodes: number[] = [ENTER, COMMA];\n\n  // triggered when the user presses enter or comma\n  add(event: MatChipInputEvent): void {\n    if (this.#activeAutocompleteValue()) return;\n\n    const value = (event.value || '').trim();\n    const isDistinct = !(this.value || []).some((i) => i.label === value);\n    if ((!this.distinctValues() || isDistinct) && value.length > 0) {\n      this.value = [...(this.value || []), { label: value, value }];\n      this._onChange(this.value);\n    }\n    // Clear the input value\n    this.inputControl.setValue('');\n    this.matAutocomplete().showPanel = false;\n  }\n\n  onInputBlur() {\n    if (!this.multiple()) return;\n    // need to timeout because clicking on the option will trigger the blur event before the click event\n    // and the input value will be cleared before the option is selected\n    setTimeout(() => {\n      const iv = this.inputControl.value as string;\n      if (iv && iv.length > 0 && this.addOnBlur()) {\n        const match = this.autocompleteValues().find((i) => i.label === iv);\n        if (this.forceSelection() && match) {\n          this.value = this.multiple() ? [...(this.value || []), match] : [match];\n          this._onChange(this.value);\n        } else if (!this.forceSelection()) {\n          const v = { label: iv, value: iv };\n          this.value = this.multiple() ? [...(this.value || []), v] : [v];\n          this._onChange(this.value);\n        }\n      }\n      this.inputControl.setValue('');\n      this._acValues.set([]);\n    }, 500);\n  }\n\n  removeItem(item: AutocompleteItem) {\n    this.value = (this.value || []).filter((i) => i !== item);\n    this._onChange(this.value);\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private _onChange: (value: readonly AutocompleteItem[] | null) => void = () => {};\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private _onTouched = () => {};\n\n  writeValue(value: readonly AutocompleteItem[] | AutocompleteItem): void {\n    if (!this.multiple()) {\n      this.value = [value as AutocompleteItem];\n      this.inputControl.patchValue(value as AutocompleteItem, { emitEvent: false });\n    } else {\n      this.value = structuredClone(value) as AutocompleteItem[];\n    }\n  }\n  registerOnChange(fn: (value: readonly AutocompleteItem[] | null) => void): void {\n    this._onChange = fn;\n  }\n  // eslint-disable-next-line @typescript-eslint/ban-types\n  registerOnTouched(fn: () => {}): void {\n    this._onTouched = fn;\n  }\n\n  ngOnInit(): void {\n    this.inputControl.valueChanges\n      .pipe(\n        filter((value) => !!value && (value as string).length >= this.minLength()),\n        debounceTime(300),\n        takeUntilDestroyed(this.#dRef)\n      )\n      .subscribe((value) => {\n        this.autocompleteFnc.emit((value as string) || '');\n      });\n  }\n\n  ngOnDestroy(): void {\n    super.onNgOnDestroy();\n  }\n}\n","@if (multiple()) {\n  <mat-chip-grid #chipGrid [attr.aria-label]=\"ariaLabel()\" [formControl]=\"chipsControl\">\n    @for (v of value; track $index) {\n      <mat-chip-row (removed)=\"removeItem(v)\">\n        {{ v.label || v.value || v }}\n        <button matChipRemove>\n          <mat-icon>cancel</mat-icon>\n        </button>\n      </mat-chip-row>\n    }\n  </mat-chip-grid>\n\n  <input\n    [disabled]=\"!!chipsInputDisabled()\"\n    type=\"text\"\n    (blur)=\"onInputBlur()\"\n    [placeholder]=\"placeholder || ''\"\n    [formControl]=\"inputControl\"\n    [matAutocomplete]=\"auto\"\n    [matChipInputFor]=\"chipGrid\"\n    [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n    (matChipInputTokenEnd)=\"add($event)\"\n  />\n} @else {\n  <input type=\"text\" matInput [placeholder]=\"placeholder || ''\" [attr.aria-label]=\"ariaLabel()\" [formControl]=\"inputControl\" [matAutocomplete]=\"auto\" />\n}\n@if (busy()) {\n  <mat-spinner [diameter]=\"16\"></mat-spinner>\n}\n<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  (optionSelected)=\"acOptionSelected($event)\"\n  (optionActivated)=\"acOptionActivated($event)\"\n  (closed)=\"acPanelClosed()\"\n  [displayWith]=\"displayFn\"\n>\n  @for (option of _acValues(); track option.label) {\n    <mat-option [value]=\"option\">\n      <ng-container *ngTemplateOutlet=\"optionTemplate() || null; context: { $implicit: option }\"></ng-container>\n      @if (!optionTemplate()) {\n        {{ option.label }}\n      }\n    </mat-option>\n  }\n</mat-autocomplete>\n","import { NgModule } from '@angular/core';\nimport { AutocompleteComponent } from './autocomplete.component';\n\n@NgModule({\n  imports: [AutocompleteComponent],\n  exports: [AutocompleteComponent]\n})\nexport class YuvAutocompleteModule {}\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-clipboard.mjs

@@ -1,11 +1,11 @@
+import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, DestroyRef, input, output, Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import * as i1 from '@yuuvis/client-core';
-import { ClipboardService, TranslateService, TranslateModule } from '@yuuvis/client-core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { YvcIconModule } from '@yuuvis/components/icon';
 import { marker } from '@colsen1991/ngx-translate-extract-marker';
+import * as i1 from '@yuuvis/client-core';
+import { ClipboardService, TranslateService, TranslateModule } from '@yuuvis/client-core';
+import { MatButton } from '@angular/material/button';
 
 marker('yuv.clipboard.text.copy.single');
 marker('yuv.clipboard.text.copy.multiple');
@@ -37,14 +37,14 @@ class ClipboardComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ClipboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ClipboardComponent, isStandalone: true, selector: "yuv-clipboard", inputs: { enablePaste: { classPropertyName: "enablePaste", publicName: "enablePaste", isSignal: true, isRequired: false, transformFunction: null }, bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { paste: "paste" }, host: { properties: { "attr.inert": "(clipboardData?.objects?.length > 0) ? null : true" } }, ngImport: i0, template: "@if (clipboardData?.objects?.length) {\n  <div class=\"clipboard\">\n    <span>{{ label }}</span>\n    <button (click)=\"clearClipboard()\">{{ 'yuv.clipboard.button.cancel' | translate }}</button>\n    @if (enablePaste()) {\n      <button class=\"primary\" (click)=\"paste.emit()\">{{ 'yuv.clipboard.button.paste' | translate }}</button>\n    }\n  </div>\n}\n", styles: [":host{--_clipboard-background-color: var(--clipboard-background-color, var(--color-warning));--_clipboard-border-radius: var(--clipboard-border-radius, .25rem);display:flex;justify-content:stretch}:host .clipboard{display:flex;align-items:center;flex:1;line-height:1em;background-color:var(--_clipboard-background-color);border-radius:var(--_clipboard-border-radius);padding:.2rem .3rem;gap:.5rem;color:var(--text-color-body)}:host .clipboard span{flex:1;padding-inline:.5rem}:host .clipboard button{padding:.25rem .5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: YvcIconModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ClipboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: ClipboardComponent, isStandalone: true, selector: "yuv-clipboard", inputs: { enablePaste: { classPropertyName: "enablePaste", publicName: "enablePaste", isSignal: true, isRequired: false, transformFunction: null }, bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { paste: "paste" }, host: { properties: { "attr.inert": "(clipboardData?.objects?.length > 0) ? null : true" } }, ngImport: i0, template: "@if (clipboardData?.objects?.length) {\n  <div class=\"clipboard\">\n    <p class=\"clipboard__label\"> {{ label }}</p>\n    <button mat-stroked-button (click)=\"clearClipboard()\">{{ 'yuv.clipboard.button.cancel' | translate }}</button>\n    @if (enablePaste()) {\n      <button mat-flat-button (click)=\"paste.emit()\">{{ 'yuv.clipboard.button.paste' | translate }}</button>\n    }\n  </div>\n}\n", styles: [":host{display:flex;justify-content:stretch}:host .clipboard{display:flex;align-items:center;flex:1;line-height:1;background-color:var(--ymt-surface-container-high);border-radius:var(--ymt-corner-s);padding:var(--ymt-spacing-xs);gap:var(--ymt-spacing-xs);color:var(--ymt-on-surface)}:host .clipboard__label{margin:0;flex:1;font:var(--ymt-font-body)}:host .clipboard{--mdc-text-button-container-height: 28px}:host .clipboard{--mdc-filled-button-container-height: 28px}:host .clipboard{--mdc-protected-button-container-height: 28px}:host .clipboard{--mdc-outlined-button-container-height: 28px}:host .clipboard{--mat-text-button-touch-target-display: none}:host .clipboard{--mat-filled-button-touch-target-display: none}:host .clipboard{--mat-protected-button-touch-target-display: none}:host .clipboard{--mat-outlined-button-touch-target-display: none}:host .clipboard{--mdc-filled-button-label-text-size: var(--mat-sys-label-medium-size)}:host .clipboard{--mdc-outlined-button-label-text-size: var(--mat-sys-label-medium-size)}:host .clipboard{--mat-filled-button-horizontal-padding: 16px}:host .clipboard{--mat-outlined-button-horizontal-padding: 16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ClipboardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ClipboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-clipboard', standalone: true, imports: [CommonModule, YvcIconModule, TranslateModule], host: {
+            args: [{ selector: 'yuv-clipboard', standalone: true, imports: [CommonModule, TranslateModule, MatButton], host: {
                         '[attr.inert]': '(clipboardData?.objects?.length > 0) ? null : true'
-                    }, template: "@if (clipboardData?.objects?.length) {\n  <div class=\"clipboard\">\n    <span>{{ label }}</span>\n    <button (click)=\"clearClipboard()\">{{ 'yuv.clipboard.button.cancel' | translate }}</button>\n    @if (enablePaste()) {\n      <button class=\"primary\" (click)=\"paste.emit()\">{{ 'yuv.clipboard.button.paste' | translate }}</button>\n    }\n  </div>\n}\n", styles: [":host{--_clipboard-background-color: var(--clipboard-background-color, var(--color-warning));--_clipboard-border-radius: var(--clipboard-border-radius, .25rem);display:flex;justify-content:stretch}:host .clipboard{display:flex;align-items:center;flex:1;line-height:1em;background-color:var(--_clipboard-background-color);border-radius:var(--_clipboard-border-radius);padding:.2rem .3rem;gap:.5rem;color:var(--text-color-body)}:host .clipboard span{flex:1;padding-inline:.5rem}:host .clipboard button{padding:.25rem .5rem}\n"] }]
+                    }, template: "@if (clipboardData?.objects?.length) {\n  <div class=\"clipboard\">\n    <p class=\"clipboard__label\"> {{ label }}</p>\n    <button mat-stroked-button (click)=\"clearClipboard()\">{{ 'yuv.clipboard.button.cancel' | translate }}</button>\n    @if (enablePaste()) {\n      <button mat-flat-button (click)=\"paste.emit()\">{{ 'yuv.clipboard.button.paste' | translate }}</button>\n    }\n  </div>\n}\n", styles: [":host{display:flex;justify-content:stretch}:host .clipboard{display:flex;align-items:center;flex:1;line-height:1;background-color:var(--ymt-surface-container-high);border-radius:var(--ymt-corner-s);padding:var(--ymt-spacing-xs);gap:var(--ymt-spacing-xs);color:var(--ymt-on-surface)}:host .clipboard__label{margin:0;flex:1;font:var(--ymt-font-body)}:host .clipboard{--mdc-text-button-container-height: 28px}:host .clipboard{--mdc-filled-button-container-height: 28px}:host .clipboard{--mdc-protected-button-container-height: 28px}:host .clipboard{--mdc-outlined-button-container-height: 28px}:host .clipboard{--mat-text-button-touch-target-display: none}:host .clipboard{--mat-filled-button-touch-target-display: none}:host .clipboard{--mat-protected-button-touch-target-display: none}:host .clipboard{--mat-outlined-button-touch-target-display: none}:host .clipboard{--mdc-filled-button-label-text-size: var(--mat-sys-label-medium-size)}:host .clipboard{--mdc-outlined-button-label-text-size: var(--mat-sys-label-medium-size)}:host .clipboard{--mat-filled-button-horizontal-padding: 16px}:host .clipboard{--mat-outlined-button-horizontal-padding: 16px}\n"] }]
         }] });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"yuuvis-client-framework-clipboard.mjs","sources":["../../../../../libs/yuuvis/client-framework/clipboard/src/lib/clipboard.component.ts","../../../../../libs/yuuvis/client-framework/clipboard/src/lib/clipboard.component.html","../../../../../libs/yuuvis/client-framework/clipboard/src/yuuvis-client-framework-clipboard.ts"],"sourcesContent":["import { Component, DestroyRef, inject, input, OnInit, output } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ClipboardData, ClipboardService, TranslateModule, TranslateService } from '@yuuvis/client-core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ACTION_ICON } from '@yuuvis/client-framework/actions';\nimport { ICONS, YvcIconModule } from '@yuuvis/components/icon';\nimport { marker } from '@colsen1991/ngx-translate-extract-marker';\n\nmarker('yuv.clipboard.text.copy.single');\nmarker('yuv.clipboard.text.copy.multiple');\nmarker('yuv.clipboard.text.cut.single');\nmarker('yuv.clipboard.text.cut.multiple');\n\n@Component({\n  selector: 'yuv-clipboard',\n  standalone: true,\n  imports: [CommonModule, YvcIconModule, TranslateModule],\n  templateUrl: './clipboard.component.html',\n  styleUrl: './clipboard.component.scss',\n  host: {\n    '[attr.inert]': '(clipboardData?.objects?.length > 0) ? null : true'\n  }\n})\nexport class ClipboardComponent implements OnInit {\n  #clipboard = inject(ClipboardService);\n  #destroyRef = inject(DestroyRef);\n  translate = inject(TranslateService);\n\n  clipboardData?: ClipboardData;\n\n  label?: string;\n  enablePaste = input<boolean>(false);\n\n  bucket = input<string>();\n  paste = output();\n\n  clearClipboard() {\n    this.#clipboard.clear(this.bucket());\n  }\n\n  ngOnInit() {\n    this.#clipboard\n      .clipboard$(this.bucket())\n      .pipe(takeUntilDestroyed(this.#destroyRef))\n      .subscribe((cd: ClipboardData | undefined) => {\n        this.clipboardData = cd;\n        if (cd?.mode && cd.objects?.length) {\n          const key = `yuv.clipboard.text.${cd?.mode}.${cd.objects.length === 1 ? 'single' : 'multiple'}`;\n          this.label = this.translate.instant(key, { count: cd?.objects.length });\n        }\n      });\n  }\n}\n","@if (clipboardData?.objects?.length) {\n  <div class=\"clipboard\">\n    <span>{{ label }}</span>\n    <button (click)=\"clearClipboard()\">{{ 'yuv.clipboard.button.cancel' | translate }}</button>\n    @if (enablePaste()) {\n      <button class=\"primary\" (click)=\"paste.emit()\">{{ 'yuv.clipboard.button.paste' | translate }}</button>\n    }\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAQA,MAAM,CAAC,gCAAgC,CAAC,CAAC;AACzC,MAAM,CAAC,kCAAkC,CAAC,CAAC;AAC3C,MAAM,CAAC,+BAA+B,CAAC,CAAC;AACxC,MAAM,CAAC,iCAAiC,CAAC,CAAC;MAY7B,kBAAkB,CAAA;AAV/B,IAAA,WAAA,GAAA;AAWE,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;AACtC,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;AACjC,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAKrC,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAU,KAAK,CAAC,CAAC;QAEpC,IAAM,CAAA,MAAA,GAAG,KAAK,EAAU,CAAC;QACzB,IAAK,CAAA,KAAA,GAAG,MAAM,EAAE,CAAC;AAkBlB,KAAA;AA5BC,IAAA,UAAU,CAA4B;AACtC,IAAA,WAAW,CAAsB;IAWjC,cAAc,GAAA;QACZ,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;KACtC;IAED,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,UAAU;AACZ,aAAA,UAAU,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;AACzB,aAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;AAC1C,aAAA,SAAS,CAAC,CAAC,EAA6B,KAAI;AAC3C,YAAA,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;YACxB,IAAI,EAAE,EAAE,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE;gBAClC,MAAM,GAAG,GAAG,CAAsB,mBAAA,EAAA,EAAE,EAAE,IAAI,CAAA,CAAA,EAAI,EAAE,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,GAAG,QAAQ,GAAG,UAAU,CAAA,CAAE,CAAC;gBAChG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;aACzE;AACH,SAAC,CAAC,CAAC;KACN;+GA5BU,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,kBAAkB,qdCvB/B,yWASA,EAAA,MAAA,EAAA,CAAA,6gBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDOY,YAAY,EAAE,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,aAAa,8BAAE,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;4FAO3C,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAV9B,SAAS;+BACE,eAAe,EAAA,UAAA,EACb,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,aAAa,EAAE,eAAe,CAAC,EAGjD,IAAA,EAAA;AACJ,wBAAA,cAAc,EAAE,oDAAoD;AACrE,qBAAA,EAAA,QAAA,EAAA,yWAAA,EAAA,MAAA,EAAA,CAAA,6gBAAA,CAAA,EAAA,CAAA;;;AErBH;;AAEG;;;;"}
+{"version":3,"file":"yuuvis-client-framework-clipboard.mjs","sources":["../../../../../libs/yuuvis/client-framework/clipboard/src/lib/clipboard.component.ts","../../../../../libs/yuuvis/client-framework/clipboard/src/lib/clipboard.component.html","../../../../../libs/yuuvis/client-framework/clipboard/src/yuuvis-client-framework-clipboard.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, DestroyRef, inject, input, OnInit, output } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { marker } from '@colsen1991/ngx-translate-extract-marker';\nimport { ClipboardData, ClipboardService, TranslateModule, TranslateService } from '@yuuvis/client-core';\nimport { MatButton } from '@angular/material/button';\n\nmarker('yuv.clipboard.text.copy.single');\nmarker('yuv.clipboard.text.copy.multiple');\nmarker('yuv.clipboard.text.cut.single');\nmarker('yuv.clipboard.text.cut.multiple');\n\n@Component({\n  selector: 'yuv-clipboard',\n  standalone: true,\n  imports: [CommonModule, TranslateModule, MatButton],\n  templateUrl: './clipboard.component.html',\n  styleUrl: './clipboard.component.scss',\n  host: {\n    '[attr.inert]': '(clipboardData?.objects?.length > 0) ? null : true'\n  }\n})\nexport class ClipboardComponent implements OnInit {\n  #clipboard = inject(ClipboardService);\n  #destroyRef = inject(DestroyRef);\n  translate = inject(TranslateService);\n\n  clipboardData?: ClipboardData;\n\n  label?: string;\n  enablePaste = input<boolean>(false);\n\n  bucket = input<string>();\n  paste = output();\n\n  clearClipboard() {\n    this.#clipboard.clear(this.bucket());\n  }\n\n  ngOnInit() {\n    this.#clipboard\n      .clipboard$(this.bucket())\n      .pipe(takeUntilDestroyed(this.#destroyRef))\n      .subscribe((cd: ClipboardData | undefined) => {\n        this.clipboardData = cd;\n        if (cd?.mode && cd.objects?.length) {\n          const key = `yuv.clipboard.text.${cd?.mode}.${cd.objects.length === 1 ? 'single' : 'multiple'}`;\n          this.label = this.translate.instant(key, { count: cd?.objects.length });\n        }\n      });\n  }\n}\n","@if (clipboardData?.objects?.length) {\n  <div class=\"clipboard\">\n    <p class=\"clipboard__label\"> {{ label }}</p>\n    <button mat-stroked-button (click)=\"clearClipboard()\">{{ 'yuv.clipboard.button.cancel' | translate }}</button>\n    @if (enablePaste()) {\n      <button mat-flat-button (click)=\"paste.emit()\">{{ 'yuv.clipboard.button.paste' | translate }}</button>\n    }\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAOA,MAAM,CAAC,gCAAgC,CAAC;AACxC,MAAM,CAAC,kCAAkC,CAAC;AAC1C,MAAM,CAAC,+BAA+B,CAAC;AACvC,MAAM,CAAC,iCAAiC,CAAC;MAY5B,kBAAkB,CAAA;AAV/B,IAAA,WAAA,GAAA;AAWE,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,gBAAgB,CAAC;AACrC,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;AAChC,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAKpC,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAU,KAAK,CAAC;QAEnC,IAAM,CAAA,MAAA,GAAG,KAAK,EAAU;QACxB,IAAK,CAAA,KAAA,GAAG,MAAM,EAAE;AAkBjB;AA5BC,IAAA,UAAU;AACV,IAAA,WAAW;IAWX,cAAc,GAAA;QACZ,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;;IAGtC,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC;AACF,aAAA,UAAU,CAAC,IAAI,CAAC,MAAM,EAAE;AACxB,aAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC;AACzC,aAAA,SAAS,CAAC,CAAC,EAA6B,KAAI;AAC3C,YAAA,IAAI,CAAC,aAAa,GAAG,EAAE;YACvB,IAAI,EAAE,EAAE,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE;gBAClC,MAAM,GAAG,GAAG,CAAsB,mBAAA,EAAA,EAAE,EAAE,IAAI,CAAA,CAAA,EAAI,EAAE,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,GAAG,QAAQ,GAAG,UAAU,CAAA,CAAE;gBAC/F,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,CAAC,MAAM,EAAE,CAAC;;AAE3E,SAAC,CAAC;;8GA3BK,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,qdCtB/B,gZASA,EAAA,MAAA,EAAA,CAAA,ooCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDMY,YAAY,EAAE,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,eAAe,4FAAE,SAAS,EAAA,QAAA,EAAA,6GAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAOvC,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAV9B,SAAS;+BACE,eAAe,EAAA,UAAA,EACb,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,eAAe,EAAE,SAAS,CAAC,EAG7C,IAAA,EAAA;AACJ,wBAAA,cAAc,EAAE;AACjB,qBAAA,EAAA,QAAA,EAAA,gZAAA,EAAA,MAAA,EAAA,CAAA,ooCAAA,CAAA,EAAA;;;AEpBH;;AAEG;;;;"}