npm - @yuuvis/client-framework - Versions diffs - 2.20.1 → 3.0.0-beta.20.0 - Mend

@yuuvis/client-framework 2.20.1 → 3.0.0-beta.20.0

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

Files changed (379) hide show

package/fesm2022/yuuvis-client-framework-sequence-list.mjs CHANGED Viewed

@@ -1,21 +1,19 @@
-import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, input, signal, forwardRef, ViewChild, Component } from '@angular/core';
+import { inject, viewChild, input, signal, forwardRef, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i4 from '@angular/forms';
+import * as i3 from '@angular/forms';
 import { NonNullableFormBuilder, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
-import * as i2 from '@angular/material/button';
+import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i3 from '@angular/material/icon';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i1 from '@yuuvis/client-core';
-import { TranslateModule } from '@yuuvis/client-core';
-import { OrganizationComponent } from '@yuuvis/client-framework/forms';
-import * as i5 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i6 from '@angular/material/input';
+import * as i5 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i4 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslatePipe } from '@yuuvis/client-core';
+import { OrganizationComponent } from '@yuuvis/client-framework/forms';
 import { YmtIconButtonDirective } from '@yuuvis/material';
 /**
@@ -28,12 +26,13 @@ class SequenceListComponent {
     }
     constructor() {
         this.#fb = inject(NonNullableFormBuilder);
+        this.orgComponent = viewChild.required(OrganizationComponent);
         /**
          * Maximum number of sequence items (defaults to 100).
          */
-        this.maxLength = input(100);
-        this.maxLengthExceeded = signal(false);
-        this.controlCount = signal(0);
+        this.maxLength = input(100, ...(ngDevMode ? [{ debugName: "maxLength" }] : []));
+        this.maxLengthExceeded = signal(false, ...(ngDevMode ? [{ debugName: "maxLengthExceeded" }] : []));
+        this.controlCount = signal(0, ...(ngDevMode ? [{ debugName: "controlCount" }] : []));
         // dynamic form for sequence items
         this.sequenceForm = this.#fb.group({
             items: this.#fb.array([this.#generateSequenceItem()])
@@ -112,8 +111,8 @@ class SequenceListComponent {
             }
             : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SequenceListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SequenceListComponent, isStandalone: true, selector: "yuv-sequence-list", inputs: { maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SequenceListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: SequenceListComponent, isStandalone: true, selector: "yuv-sequence-list", inputs: { maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SequenceListComponent),
@@ -124,13 +123,12 @@ class SequenceListComponent {
                 useExisting: forwardRef(() => SequenceListComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "orgComponent", first: true, predicate: OrganizationComponent, descendants: true }], ngImport: i0, template: "<form [formGroup]=\"sequenceForm\">\n  <section formArrayName=\"items\">\n    @for (item of sequenceForm.controls.items.controls; track item; let itemIndex = $index) {\n      <div class=\"item\" [formGroup]=\"item\">\n        <button mat-icon-button class=\"add before\" type=\"button\" [disabled]=\"maxLengthExceeded()\" (click)=\"addItemAt($index)\">\n          <mat-icon>add</mat-icon>\n        </button>\n        <span class=\"index\" [attr.data-index]=\"itemIndex + 1\"></span>\n\n        <div class=\"item-form\">\n          <button ymtIconButton icon-button-size=\"small\" class=\"remove hidden\" [class.hidden]=\"controlCount() < 2\" type=\"button\" (click)=\"removeItem($index)\" [disabled]=\"controlCount() < 2\">\n            <mat-icon>close</mat-icon>\n          </button>\n          <mat-form-field>\n            <mat-label>{{ 'yuv.sequence-list.form.task' | translate }}</mat-label>\n            <input matInput [maxLength]=\"128\" formControlName=\"title\" />\n          </mat-form-field>\n          <mat-form-field>\n            <mat-label>{{ 'yuv.sequence-list.form.nextAssignee' | translate }}</mat-label>\n            <yuv-organization [classifications]=\"['id:organization:set[user,role]']\"\n                              [matTooltip]=\"'yuv.sequence-list.form.nextAssignee' | translate\"\n                              [multiselect]=\"true\"\n                              [withMetadata]=\"true\"\n                              [required]=\"true\"\n                              formControlName=\"nextAssignee\">\n            </yuv-organization>\n          </mat-form-field>\n        </div>\n        @if ($last) {\n          <button mat-icon-button class=\"add after\" type=\"button\" [disabled]=\"maxLengthExceeded()\" (click)=\"addItem()\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n      </div>\n    }\n  </section>\n</form>\n", styles: [":host{--_sequence-list-item-background: var(--sequence-list-item-background, var(--ymt-surface-panel));--_sequence-list-item-border-color: var(--sequence-list-item-border-color, var(--ymt-outline-variant));--_sequence-list-item-border-radius: var(--sequence-list-item-border-radius, var(--ymt-spacing-xs));--_sequence-list-line-color: var(--sequence-list-line-color, var(--ymt-text-color-subtle));--_sequence-list-line-width: var(--sequence-list-line-width, 2px);--_sequence-list-line-item-background: var(--sequence-list-line-item-background, var(--ymt-surface-panel));--_sequence-list-line-item-border-radius: var(--sequence-list-line-item-border-radius, .25em)}:host form section{margin-inline-end:4px}:host form section button.add{--icon-size: 18px;border-radius:var(--_sequence-list-line-item-border-radius);padding:0;display:flex;align-items:center;justify-content:center;background-color:var(--_sequence-list-line-item-background);border:var(--_sequence-list-line-width) solid var(--_sequence-list-line-color)}:host form section button.add:focus{outline:2px solid rgb(from var(--ymt-primary) r g b/.5);outline-offset:-2px;border-color:var(--ymt-primary)}:host form section .item{display:grid;grid-template-columns:6ch 1fr;grid-template-rows:auto auto;column-gap:1em;grid-template-areas:\"addBefore .\" \"index form\" \"addAfter .\"}:host form section .item.ng-invalid.ng-dirty .item-form{border-color:var(--ymt-danger);outline:3px solid rgb(from var(--ymt-danger) r g b/.5)}:host form section .item .add.before{grid-area:addBefore;justify-self:center}:host form section .item .add.after{grid-area:addAfter;justify-self:center}:host form section .item .index{grid-area:index;display:grid;align-items:center;justify-content:center}:host form section .item .index:after{content:attr(data-index);grid-row:1;grid-column:1;background-color:var(--_sequence-list-line-item-background);font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);font-weight:700;border:var(--_sequence-list-line-width) solid var(--_sequence-list-line-color);border-radius:var(--_sequence-list-line-item-border-radius);line-height:1em;padding:1px .25em;outline:3px solid rgb(from var(--_sequence-list-line-color) r g b/.1)}:host form section .item .index:before{content:\"\";grid-row:1;grid-column:1;height:100%;width:calc(50% + var(--_sequence-list-line-width) / 2);border-inline-end:var(--_sequence-list-line-width) solid var(--_sequence-list-line-color)}:host form section .item .item-form{grid-area:form;background-color:var(--_sequence-list-item-background);border:1px solid var(--_sequence-list-item-border-color);border-radius:var(--_sequence-list-item-border-radius);padding:var(--ymt-spacing-xs);display:grid;column-gap:var(--ymt-spacing-m);row-gap:4px;grid-template-columns:1fr auto;grid-template-rows:repeat(3,auto);grid-template-areas:\"task remove\" \"user user\" \"date date\"}:host form section .item .item-form input{border:1px solid transparent;border-radius:calc(var(--_sequence-list-item-border-radius) / 2);grid-area:task;outline-offset:0;line-height:1em;padding:var(--ymt-spacing-2xs);background-color:transparent;color:var(--ymt-text-color)}:host form section .item .item-form input:focus{border-color:var(--yvc-form-element-focus-border-color);outline:var(--yvc-form-element-focus-outline-with) solid var(--yvc-form-element-focus-outline-color)}:host form section .item .item-form yvc-datepicker{--form-element-border-color: transparent;grid-area:date;padding:0}:host form section .item .item-form yuv-organization{--form-element-border-color: transparent;border-radius:calc(var(--_sequence-list-item-border-radius) / 2);border:1px solid var(--form-element-border-color);grid-area:user}:host form section .item .item-form .remove{--icon-size: 18px;padding:var(--ymt-spacing-2xs);grid-area:remove;padding:0}:host form section .item .item-form .remove.hidden{visibility:hidden}:host mat-form-field{margin-block-start:var(--ymt-spacing-s)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: OrganizationComponent, selector: "yuv-organization", inputs: ["situation", "multiselect", "classifications", "readonly", "excludeMe", "withMetadata"] }, { 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: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.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: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }] }); }
+        ], viewQueries: [{ propertyName: "orgComponent", first: true, predicate: OrganizationComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<form [formGroup]=\"sequenceForm\">\n  <section formArrayName=\"items\">\n    @for (item of sequenceForm.controls.items.controls; track item; let itemIndex = $index) {\n      <div class=\"item\" [formGroup]=\"item\">\n        <button mat-icon-button class=\"add before\" type=\"button\" [disabled]=\"maxLengthExceeded()\" (click)=\"addItemAt($index)\">\n          <mat-icon>add</mat-icon>\n        </button>\n        <span class=\"index\" [attr.data-index]=\"itemIndex + 1\"></span>\n\n        <div class=\"item-form\">\n          <button ymtIconButton icon-button-size=\"small\" class=\"remove hidden\" [class.hidden]=\"controlCount() < 2\" type=\"button\" (click)=\"removeItem($index)\" [disabled]=\"controlCount() < 2\">\n            <mat-icon>close</mat-icon>\n          </button>\n          <mat-form-field>\n            <mat-label>{{ 'yuv.sequence-list.form.task' | translate }}</mat-label>\n            <input matInput [maxLength]=\"128\" formControlName=\"title\" />\n          </mat-form-field>\n          <mat-form-field>\n            <mat-label>{{ 'yuv.sequence-list.form.nextAssignee' | translate }}</mat-label>\n            <yuv-organization [classifications]=\"['id:organization:set[user,role]']\"\n                              [matTooltip]=\"'yuv.sequence-list.form.nextAssignee' | translate\"\n                              [multiselect]=\"true\"\n                              [withMetadata]=\"true\"\n                              [required]=\"true\"\n                              formControlName=\"nextAssignee\">\n            </yuv-organization>\n          </mat-form-field>\n        </div>\n        @if ($last) {\n          <button mat-icon-button class=\"add after\" type=\"button\" [disabled]=\"maxLengthExceeded()\" (click)=\"addItem()\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n      </div>\n    }\n  </section>\n</form>\n", styles: [":host{--_sequence-list-item-background: var(--sequence-list-item-background, var(--ymt-surface-panel));--_sequence-list-item-border-color: var(--sequence-list-item-border-color, var(--ymt-outline-variant));--_sequence-list-item-border-radius: var(--sequence-list-item-border-radius, var(--ymt-spacing-xs));--_sequence-list-line-color: var(--sequence-list-line-color, var(--ymt-text-color-subtle));--_sequence-list-line-width: var(--sequence-list-line-width, 2px);--_sequence-list-line-item-background: var(--sequence-list-line-item-background, var(--ymt-surface-panel));--_sequence-list-line-item-border-radius: var(--sequence-list-line-item-border-radius, .25em)}:host form section{margin-inline-end:4px}:host form section button.add{--icon-size: 18px;border-radius:var(--_sequence-list-line-item-border-radius);padding:0;display:flex;align-items:center;justify-content:center;background-color:var(--_sequence-list-line-item-background);border:var(--_sequence-list-line-width) solid var(--_sequence-list-line-color)}:host form section button.add:focus{outline:2px solid rgb(from var(--ymt-primary) r g b/.5);outline-offset:-2px;border-color:var(--ymt-primary)}:host form section .item{display:grid;grid-template-columns:6ch 1fr;grid-template-rows:auto auto;column-gap:1em;grid-template-areas:\"addBefore .\" \"index form\" \"addAfter .\"}:host form section .item.ng-invalid.ng-dirty .item-form{border-color:var(--ymt-danger);outline:3px solid rgb(from var(--ymt-danger) r g b/.5)}:host form section .item .add.before{grid-area:addBefore;justify-self:center}:host form section .item .add.after{grid-area:addAfter;justify-self:center}:host form section .item .index{grid-area:index;display:grid;align-items:center;justify-content:center}:host form section .item .index:after{content:attr(data-index);grid-row:1;grid-column:1;background-color:var(--_sequence-list-line-item-background);font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);font-weight:700;border:var(--_sequence-list-line-width) solid var(--_sequence-list-line-color);border-radius:var(--_sequence-list-line-item-border-radius);line-height:1em;padding:1px .25em;outline:3px solid rgb(from var(--_sequence-list-line-color) r g b/.1)}:host form section .item .index:before{content:\"\";grid-row:1;grid-column:1;height:100%;width:calc(50% + var(--_sequence-list-line-width) / 2);border-inline-end:var(--_sequence-list-line-width) solid var(--_sequence-list-line-color)}:host form section .item .item-form{grid-area:form;background-color:var(--_sequence-list-item-background);border:1px solid var(--_sequence-list-item-border-color);border-radius:var(--_sequence-list-item-border-radius);padding:var(--ymt-spacing-xs);display:grid;column-gap:var(--ymt-spacing-m);row-gap:4px;grid-template-columns:1fr auto;grid-template-rows:repeat(3,auto);grid-template-areas:\"task remove\" \"user user\" \"date date\"}:host form section .item .item-form input{border:1px solid transparent;border-radius:calc(var(--_sequence-list-item-border-radius) / 2);grid-area:task;outline-offset:0;line-height:1em;padding:var(--ymt-spacing-2xs);background-color:transparent;color:var(--ymt-text-color)}:host form section .item .item-form input:focus{border-color:var(--yvc-form-element-focus-border-color);outline:var(--yvc-form-element-focus-outline-with) solid var(--yvc-form-element-focus-outline-color)}:host form section .item .item-form yvc-datepicker{--form-element-border-color: transparent;grid-area:date;padding:0}:host form section .item .item-form yuv-organization{--form-element-border-color: transparent;border-radius:calc(var(--_sequence-list-item-border-radius) / 2);border:1px solid var(--form-element-border-color);grid-area:user}:host form section .item .item-form .remove{--icon-size: 18px;padding:var(--ymt-spacing-2xs);grid-area:remove;padding:0}:host form section .item .item-form .remove.hidden{visibility:hidden}:host mat-form-field{margin-block-start:var(--ymt-spacing-s)}\n"], dependencies: [{ kind: "component", type: OrganizationComponent, selector: "yuv-organization", inputs: ["situation", "multiselect", "classifications", "readonly", "excludeMe", "withMetadata"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SequenceListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SequenceListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-sequence-list', standalone: true, imports: [
-                        CommonModule,
-                        TranslateModule,
+                        TranslatePipe,
                         OrganizationComponent,
                         MatButtonModule,
                         MatIconModule,
@@ -153,10 +151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     ], host: {
                         tabindex: '0'
                     }, template: "<form [formGroup]=\"sequenceForm\">\n  <section formArrayName=\"items\">\n    @for (item of sequenceForm.controls.items.controls; track item; let itemIndex = $index) {\n      <div class=\"item\" [formGroup]=\"item\">\n        <button mat-icon-button class=\"add before\" type=\"button\" [disabled]=\"maxLengthExceeded()\" (click)=\"addItemAt($index)\">\n          <mat-icon>add</mat-icon>\n        </button>\n        <span class=\"index\" [attr.data-index]=\"itemIndex + 1\"></span>\n\n        <div class=\"item-form\">\n          <button ymtIconButton icon-button-size=\"small\" class=\"remove hidden\" [class.hidden]=\"controlCount() < 2\" type=\"button\" (click)=\"removeItem($index)\" [disabled]=\"controlCount() < 2\">\n            <mat-icon>close</mat-icon>\n          </button>\n          <mat-form-field>\n            <mat-label>{{ 'yuv.sequence-list.form.task' | translate }}</mat-label>\n            <input matInput [maxLength]=\"128\" formControlName=\"title\" />\n          </mat-form-field>\n          <mat-form-field>\n            <mat-label>{{ 'yuv.sequence-list.form.nextAssignee' | translate }}</mat-label>\n            <yuv-organization [classifications]=\"['id:organization:set[user,role]']\"\n                              [matTooltip]=\"'yuv.sequence-list.form.nextAssignee' | translate\"\n                              [multiselect]=\"true\"\n                              [withMetadata]=\"true\"\n                              [required]=\"true\"\n                              formControlName=\"nextAssignee\">\n            </yuv-organization>\n          </mat-form-field>\n        </div>\n        @if ($last) {\n          <button mat-icon-button class=\"add after\" type=\"button\" [disabled]=\"maxLengthExceeded()\" (click)=\"addItem()\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n      </div>\n    }\n  </section>\n</form>\n", styles: [":host{--_sequence-list-item-background: var(--sequence-list-item-background, var(--ymt-surface-panel));--_sequence-list-item-border-color: var(--sequence-list-item-border-color, var(--ymt-outline-variant));--_sequence-list-item-border-radius: var(--sequence-list-item-border-radius, var(--ymt-spacing-xs));--_sequence-list-line-color: var(--sequence-list-line-color, var(--ymt-text-color-subtle));--_sequence-list-line-width: var(--sequence-list-line-width, 2px);--_sequence-list-line-item-background: var(--sequence-list-line-item-background, var(--ymt-surface-panel));--_sequence-list-line-item-border-radius: var(--sequence-list-line-item-border-radius, .25em)}:host form section{margin-inline-end:4px}:host form section button.add{--icon-size: 18px;border-radius:var(--_sequence-list-line-item-border-radius);padding:0;display:flex;align-items:center;justify-content:center;background-color:var(--_sequence-list-line-item-background);border:var(--_sequence-list-line-width) solid var(--_sequence-list-line-color)}:host form section button.add:focus{outline:2px solid rgb(from var(--ymt-primary) r g b/.5);outline-offset:-2px;border-color:var(--ymt-primary)}:host form section .item{display:grid;grid-template-columns:6ch 1fr;grid-template-rows:auto auto;column-gap:1em;grid-template-areas:\"addBefore .\" \"index form\" \"addAfter .\"}:host form section .item.ng-invalid.ng-dirty .item-form{border-color:var(--ymt-danger);outline:3px solid rgb(from var(--ymt-danger) r g b/.5)}:host form section .item .add.before{grid-area:addBefore;justify-self:center}:host form section .item .add.after{grid-area:addAfter;justify-self:center}:host form section .item .index{grid-area:index;display:grid;align-items:center;justify-content:center}:host form section .item .index:after{content:attr(data-index);grid-row:1;grid-column:1;background-color:var(--_sequence-list-line-item-background);font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);font-weight:700;border:var(--_sequence-list-line-width) solid var(--_sequence-list-line-color);border-radius:var(--_sequence-list-line-item-border-radius);line-height:1em;padding:1px .25em;outline:3px solid rgb(from var(--_sequence-list-line-color) r g b/.1)}:host form section .item .index:before{content:\"\";grid-row:1;grid-column:1;height:100%;width:calc(50% + var(--_sequence-list-line-width) / 2);border-inline-end:var(--_sequence-list-line-width) solid var(--_sequence-list-line-color)}:host form section .item .item-form{grid-area:form;background-color:var(--_sequence-list-item-background);border:1px solid var(--_sequence-list-item-border-color);border-radius:var(--_sequence-list-item-border-radius);padding:var(--ymt-spacing-xs);display:grid;column-gap:var(--ymt-spacing-m);row-gap:4px;grid-template-columns:1fr auto;grid-template-rows:repeat(3,auto);grid-template-areas:\"task remove\" \"user user\" \"date date\"}:host form section .item .item-form input{border:1px solid transparent;border-radius:calc(var(--_sequence-list-item-border-radius) / 2);grid-area:task;outline-offset:0;line-height:1em;padding:var(--ymt-spacing-2xs);background-color:transparent;color:var(--ymt-text-color)}:host form section .item .item-form input:focus{border-color:var(--yvc-form-element-focus-border-color);outline:var(--yvc-form-element-focus-outline-with) solid var(--yvc-form-element-focus-outline-color)}:host form section .item .item-form yvc-datepicker{--form-element-border-color: transparent;grid-area:date;padding:0}:host form section .item .item-form yuv-organization{--form-element-border-color: transparent;border-radius:calc(var(--_sequence-list-item-border-radius) / 2);border:1px solid var(--form-element-border-color);grid-area:user}:host form section .item .item-form .remove{--icon-size: 18px;padding:var(--ymt-spacing-2xs);grid-area:remove;padding:0}:host form section .item .item-form .remove.hidden{visibility:hidden}:host mat-form-field{margin-block-start:var(--ymt-spacing-s)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { orgComponent: [{
-                type: ViewChild,
-                args: [OrganizationComponent]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { orgComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => OrganizationComponent), { isSignal: true }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }] } });
 /**
  * Generated bundle index. Do not edit.

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

	@@ -1 +1 @@
1	- {"version":3,"file":"yuuvis-client-framework-sequence-list.mjs","sources":["../../../../../libs/yuuvis/client-framework/sequence-list/src/lib/sequence-list.component.ts","../../../../../libs/yuuvis/client-framework/sequence-list/src/lib/sequence-list.component.html","../../../../../libs/yuuvis/client-framework/sequence-list/src/yuuvis-client-framework-sequence-list.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, ViewChild, computed, forwardRef, inject, input, signal } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n ControlValueAccessor,\n FormArray,\n FormControl,\n FormGroup,\n NG_VALIDATORS,\n NG_VALUE_ACCESSOR,\n NonNullableFormBuilder,\n ReactiveFormsModule,\n ValidationErrors,\n Validator,\n Validators\n} from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { TranslateModule } from '@yuuvis/client-core';\nimport { OrganizationComponent } from '@yuuvis/client-framework/forms';\nimport { SequenceItem, SequenceListAssignee } from './sequence-list.interface';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { DASHLET_MESSAGE_EVENTS } from '@yuuvis/media-viewer';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { YmtIconButtonDirective } from '@yuuvis/material';\n\ntype SequenceFormItem = FormGroup<{\n title: FormControl<string>;\n nextAssignee: FormControl<SequenceListAssignee[]>;\n expiryDatetime: FormControl<any>;\n}>;\ntype SequenceForm = FormGroup<{\n items: FormArray<SequenceFormItem>;\n}>;\n\n/*\n Task sequence list.\n /\n@Component({\n selector: 'yuv-sequence-list',\n standalone: true,\n imports: [\n CommonModule,\n TranslateModule,\n OrganizationComponent,\n MatButtonModule,\n MatIconModule,\n ReactiveFormsModule,\n MatTooltipModule,\n MatInputModule,\n MatFormFieldModule,\n YmtIconButtonDirective\n ],\n templateUrl: './sequence-list.component.html',\n styleUrl: './sequence-list.component.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SequenceListComponent),\n multi: true\n },\n {\n provide: NG_VALIDATORS,\n useExisting: forwardRef(() => SequenceListComponent),\n multi: true\n }\n ],\n host: {\n tabindex: '0'\n }\n})\nexport class SequenceListComponent implements ControlValueAccessor, Validator {\n #fb = inject(NonNullableFormBuilder);\n\n @ViewChild(OrganizationComponent) orgComponent!: OrganizationComponent;\n\n /\n Maximum number of sequence items (defaults to 100).\n /\n maxLength = input<number>(100);\n maxLengthExceeded = signal<boolean>(false);\n readonly controlCount = signal<number>(0);\n\n // dynamic form for sequence items\n sequenceForm: SequenceForm = this.#fb.group({\n items: this.#fb.array<SequenceFormItem>([this.#generateSequenceItem()])\n });\n\n entries: SequenceItem[] = [];\n\n get formItemArray(): FormArray<SequenceFormItem> {\n return this.sequenceForm.controls.items as FormArray<SequenceFormItem>;\n }\n\n constructor() {\n this.#updateState();\n this.sequenceForm.valueChanges.pipe(takeUntilDestroyed()).subscribe(() => {\n this.#propagate();\n });\n }\n\n #generateSequenceItem(sequenceItem?: SequenceItem): SequenceFormItem {\n return this.#fb.group({\n title: [sequenceItem?.title \|\| '', Validators.required],\n nextAssignee: [sequenceItem?.nextAssignee \|\| [], Validators.required],\n expiryDatetime: [sequenceItem?.expiryDatetime \|\| undefined]\n });\n }\n\n addItem() {\n this.sequenceForm.controls.items.push(this.#generateSequenceItem());\n this.#updateState();\n }\n\n addItemAt(idx: number) {\n this.sequenceForm.controls.items.insert(idx, this.#generateSequenceItem());\n this.#updateState();\n }\n\n removeItem(idx: number) {\n this.sequenceForm.controls.items.removeAt(idx);\n this.#updateState();\n }\n\n #updateState() {\n const ml = this.maxLength();\n this.maxLengthExceeded.set(ml !== undefined && this.formItemArray.length >= ml);\n this.controlCount.set(this.sequenceForm.controls.items.length);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n propagateChange = (_: any) => {};\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n registerOnTouched(): void {}\n\n #propagate() {\n const res: SequenceItem[] = [];\n (this.sequenceForm.value.items \|\| []).forEach((item: any) => {\n const i: SequenceItem = {\n title: item.title,\n nextAssignee: item.nextAssignee\n };\n if (item.expiryDatetime) {\n i.expiryDatetime = item.expiryDatetime;\n }\n res.push(i);\n });\n\n this.propagateChange(res);\n }\n\n writeValue(value: SequenceItem[]): void {\n this.entries = value \|\| [];\n this.formItemArray.clear();\n if (this.entries.length === 0) this.addItem();\n this.entries.forEach((entry) => {\n this.formItemArray.push(this.#generateSequenceItem(entry));\n });\n this.#updateState();\n }\n\n registerOnChange(fn: any): void {\n this.propagateChange = fn;\n }\n\n validate(): ValidationErrors \| null {\n const ml = this.maxLength();\n const mlExceeded = ml !== undefined && this.formItemArray.length > ml;\n const valid = this.sequenceForm.valid && !mlExceeded;\n\n return !valid\n ? {\n sequencelist: {\n invalid: this.sequenceForm.invalid,\n maxLengthExceeded: mlExceeded\n }\n }\n : null;\n }\n}\n","<form [formGroup]=\"sequenceForm\">\n <section formArrayName=\"items\">\n @for (item of sequenceForm.controls.items.controls; track item; let itemIndex = $index) {\n <div class=\"item\" [formGroup]=\"item\">\n <button mat-icon-button class=\"add before\" type=\"button\" [disabled]=\"maxLengthExceeded()\" (click)=\"addItemAt($index)\">\n <mat-icon>add</mat-icon>\n </button>\n <span class=\"index\" [attr.data-index]=\"itemIndex + 1\"></span>\n\n <div class=\"item-form\">\n <button ymtIconButton icon-button-size=\"small\" class=\"remove hidden\" [class.hidden]=\"controlCount() < 2\" type=\"button\" (click)=\"removeItem($index)\" [disabled]=\"controlCount() < 2\">\n <mat-icon>close</mat-icon>\n </button>\n <mat-form-field>\n <mat-label>{{ 'yuv.sequence-list.form.task' \| translate }}</mat-label>\n <input matInput [maxLength]=\"128\" formControlName=\"title\" />\n </mat-form-field>\n <mat-form-field>\n <mat-label>{{ 'yuv.sequence-list.form.nextAssignee' \| translate }}</mat-label>\n <yuv-organization [classifications]=\"['id:organization:set[user,role]']\"\n [matTooltip]=\"'yuv.sequence-list.form.nextAssignee' \| translate\"\n [multiselect]=\"true\"\n [withMetadata]=\"true\"\n [required]=\"true\"\n formControlName=\"nextAssignee\">\n </yuv-organization>\n </mat-form-field>\n </div>\n @if ($last) {\n <button mat-icon-button class=\"add after\" type=\"button\" [disabled]=\"maxLengthExceeded()\" (click)=\"addItem()\">\n <mat-icon>add</mat-icon>\n </button>\n }\n </div>\n }\n </section>\n</form>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"yuuvis-client-framework-sequence-list.mjs","sources":["../../../../../libs/yuuvis/client-framework/sequence-list/src/lib/sequence-list.component.ts","../../../../../libs/yuuvis/client-framework/sequence-list/src/lib/sequence-list.component.html","../../../../../libs/yuuvis/client-framework/sequence-list/src/yuuvis-client-framework-sequence-list.ts"],"sourcesContent":["import { Component, forwardRef, inject, input, signal, viewChild } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n ControlValueAccessor,\n FormArray,\n FormControl,\n FormGroup,\n NG_VALIDATORS,\n NG_VALUE_ACCESSOR,\n NonNullableFormBuilder,\n ReactiveFormsModule,\n ValidationErrors,\n Validator,\n Validators\n} from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { TranslatePipe } from '@yuuvis/client-core';\nimport { OrganizationComponent } from '@yuuvis/client-framework/forms';\nimport { YmtIconButtonDirective } from '@yuuvis/material';\nimport { SequenceItem, SequenceListAssignee } from './sequence-list.interface';\n\ntype SequenceFormItem = FormGroup<{\n title: FormControl<string>;\n nextAssignee: FormControl<SequenceListAssignee[]>;\n expiryDatetime: FormControl<any>;\n}>;\ntype SequenceForm = FormGroup<{\n items: FormArray<SequenceFormItem>;\n}>;\n\n/*\n Task sequence list.\n /\n@Component({\n selector: 'yuv-sequence-list',\n standalone: true,\n imports: [\n TranslatePipe,\n OrganizationComponent,\n MatButtonModule,\n MatIconModule,\n ReactiveFormsModule,\n MatTooltipModule,\n MatInputModule,\n MatFormFieldModule,\n YmtIconButtonDirective\n ],\n templateUrl: './sequence-list.component.html',\n styleUrl: './sequence-list.component.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SequenceListComponent),\n multi: true\n },\n {\n provide: NG_VALIDATORS,\n useExisting: forwardRef(() => SequenceListComponent),\n multi: true\n }\n ],\n host: {\n tabindex: '0'\n }\n})\nexport class SequenceListComponent implements ControlValueAccessor, Validator {\n #fb = inject(NonNullableFormBuilder);\n\n readonly orgComponent = viewChild.required(OrganizationComponent);\n\n /\n Maximum number of sequence items (defaults to 100).\n /\n maxLength = input<number>(100);\n maxLengthExceeded = signal<boolean>(false);\n readonly controlCount = signal<number>(0);\n\n // dynamic form for sequence items\n sequenceForm: SequenceForm = this.#fb.group({\n items: this.#fb.array<SequenceFormItem>([this.#generateSequenceItem()])\n });\n\n entries: SequenceItem[] = [];\n\n get formItemArray(): FormArray<SequenceFormItem> {\n return this.sequenceForm.controls.items as FormArray<SequenceFormItem>;\n }\n\n constructor() {\n this.#updateState();\n this.sequenceForm.valueChanges.pipe(takeUntilDestroyed()).subscribe(() => {\n this.#propagate();\n });\n }\n\n #generateSequenceItem(sequenceItem?: SequenceItem): SequenceFormItem {\n return this.#fb.group({\n title: [sequenceItem?.title \|\| '', Validators.required],\n nextAssignee: [sequenceItem?.nextAssignee \|\| [], Validators.required],\n expiryDatetime: [sequenceItem?.expiryDatetime \|\| undefined]\n });\n }\n\n addItem() {\n this.sequenceForm.controls.items.push(this.#generateSequenceItem());\n this.#updateState();\n }\n\n addItemAt(idx: number) {\n this.sequenceForm.controls.items.insert(idx, this.#generateSequenceItem());\n this.#updateState();\n }\n\n removeItem(idx: number) {\n this.sequenceForm.controls.items.removeAt(idx);\n this.#updateState();\n }\n\n #updateState() {\n const ml = this.maxLength();\n this.maxLengthExceeded.set(ml !== undefined && this.formItemArray.length >= ml);\n this.controlCount.set(this.sequenceForm.controls.items.length);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n propagateChange = (_: any) => {};\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n registerOnTouched(): void {}\n\n #propagate() {\n const res: SequenceItem[] = [];\n (this.sequenceForm.value.items \|\| []).forEach((item: any) => {\n const i: SequenceItem = {\n title: item.title,\n nextAssignee: item.nextAssignee\n };\n if (item.expiryDatetime) {\n i.expiryDatetime = item.expiryDatetime;\n }\n res.push(i);\n });\n\n this.propagateChange(res);\n }\n\n writeValue(value: SequenceItem[]): void {\n this.entries = value \|\| [];\n this.formItemArray.clear();\n if (this.entries.length === 0) this.addItem();\n this.entries.forEach((entry) => {\n this.formItemArray.push(this.#generateSequenceItem(entry));\n });\n this.#updateState();\n }\n\n registerOnChange(fn: any): void {\n this.propagateChange = fn;\n }\n\n validate(): ValidationErrors \| null {\n const ml = this.maxLength();\n const mlExceeded = ml !== undefined && this.formItemArray.length > ml;\n const valid = this.sequenceForm.valid && !mlExceeded;\n\n return !valid\n ? {\n sequencelist: {\n invalid: this.sequenceForm.invalid,\n maxLengthExceeded: mlExceeded\n }\n }\n : null;\n }\n}\n","<form [formGroup]=\"sequenceForm\">\n <section formArrayName=\"items\">\n @for (item of sequenceForm.controls.items.controls; track item; let itemIndex = $index) {\n <div class=\"item\" [formGroup]=\"item\">\n <button mat-icon-button class=\"add before\" type=\"button\" [disabled]=\"maxLengthExceeded()\" (click)=\"addItemAt($index)\">\n <mat-icon>add</mat-icon>\n </button>\n <span class=\"index\" [attr.data-index]=\"itemIndex + 1\"></span>\n\n <div class=\"item-form\">\n <button ymtIconButton icon-button-size=\"small\" class=\"remove hidden\" [class.hidden]=\"controlCount() < 2\" type=\"button\" (click)=\"removeItem($index)\" [disabled]=\"controlCount() < 2\">\n <mat-icon>close</mat-icon>\n </button>\n <mat-form-field>\n <mat-label>{{ 'yuv.sequence-list.form.task' \| translate }}</mat-label>\n <input matInput [maxLength]=\"128\" formControlName=\"title\" />\n </mat-form-field>\n <mat-form-field>\n <mat-label>{{ 'yuv.sequence-list.form.nextAssignee' \| translate }}</mat-label>\n <yuv-organization [classifications]=\"['id:organization:set[user,role]']\"\n [matTooltip]=\"'yuv.sequence-list.form.nextAssignee' \| translate\"\n [multiselect]=\"true\"\n [withMetadata]=\"true\"\n [required]=\"true\"\n formControlName=\"nextAssignee\">\n </yuv-organization>\n </mat-form-field>\n </div>\n @if ($last) {\n <button mat-icon-button class=\"add after\" type=\"button\" [disabled]=\"maxLengthExceeded()\" (click)=\"addItem()\">\n <mat-icon>add</mat-icon>\n </button>\n }\n </div>\n }\n </section>\n</form>\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-simple-search.mjs CHANGED Viewed

@@ -1,16 +1,15 @@
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, EventEmitter, ViewChild, Output, Input, Component } from '@angular/core';
+import { inject, DestroyRef, output, viewChild, Input, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormField, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-import * as i3 from '@angular/material/icon';
+import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i4 from '@angular/material/input';
+import * as i3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i2 from '@yuuvis/client-core';
-import { TranslateService, SearchService, SystemService, Utils, BaseObjectTypeField, TranslateModule } from '@yuuvis/client-core';
+import { TranslateService, SearchService, SystemService, Utils, BaseObjectTypeField, TranslatePipe } from '@yuuvis/client-core';
 import { YmtIconButtonDirective } from '@yuuvis/material';
 import { debounceTime, tap } from 'rxjs';
@@ -25,17 +24,18 @@ class SimpleSearchComponent {
         /**
          * Emitted once the user submits the search
          */
-        this.querySubmit = new EventEmitter();
+        this.querySubmit = output();
         /**
          * Emitted once the user hits clear input button
          */
-        this.clearInput = new EventEmitter();
+        this.clearInput = output();
         /**
          * Emitted once selected targets change
          */
-        this.targetSelectionChanged = new EventEmitter();
-        this.queryChange = new EventEmitter();
-        this.typeAggregation = new EventEmitter();
+        this.targetSelectionChanged = output();
+        this.queryChange = output();
+        this.typeAggregation = output();
+        this.searchInput = viewChild.required('searchInput');
         //#endregion
         //#region Properties
         this.form = this.#fb.group({
@@ -101,8 +101,9 @@ class SimpleSearchComponent {
             .pipe(debounceTime(500), takeUntilDestroyed(this.#destroyRef), tap((value) => {
             this._query.term = value.term;
             this.queryChange.emit(this._query);
-            if (this.typeAggregation.observed)
-                this.aggregate();
+            // TODO: decide if we want to trigger aggregation on search term change, if yes uncomment the following line
+            // and Find out why `observed` is removed from type aggregations.
+            // if (this.typeAggregation.observed) this.aggregate();
         }))
             .subscribe();
     }
@@ -110,7 +111,9 @@ class SimpleSearchComponent {
     //#region Utilities
     aggregate(all) {
         if (all || this._query.term) {
-            this.#searchService.aggregate(structuredClone(this._query), [BaseObjectTypeField.OBJECT_TYPE_ID]).subscribe(this.handleAggregateResult);
+            this.#searchService
+                .aggregate(structuredClone(this._query), [BaseObjectTypeField.OBJECT_TYPE_ID])
+                .subscribe(this.handleAggregateResult);
         }
     }
     //#endregion
@@ -126,24 +129,32 @@ class SimpleSearchComponent {
             this.form.controls['term'].setValue(null);
             this.clearInput.emit();
             setTimeout(() => {
-                this.searchInput.nativeElement.focus();
+                this.searchInput().nativeElement.focus();
             });
         }
         $event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SimpleSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: SimpleSearchComponent, isStandalone: true, selector: "yuv-simple-search", inputs: { query: "query" }, outputs: { querySubmit: "querySubmit", clearInput: "clearInput", targetSelectionChanged: "targetSelectionChanged", queryChange: "queryChange", typeAggregation: "typeAggregation" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SimpleSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.19", type: SimpleSearchComponent, isStandalone: true, selector: "yuv-simple-search", inputs: { query: "query" }, outputs: { querySubmit: "querySubmit", clearInput: "clearInput", targetSelectionChanged: "targetSelectionChanged", queryChange: "queryChange", typeAggregation: "typeAggregation" }, providers: [
             {
                 provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
                 useValue: {
                     subscriptSizing: 'dynamic'
                 }
             }
-        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<form role=\"search\" class=\"search-form\" [formGroup]=\"form\" (ngSubmit)=\"onSearch()\">\n  <!-- Todo: String Translations-->\n  <mat-form-field appearance=\"outline\">\n    <label>\n      <span class=\"ymt-hide-sr\">{{ 'yuv.simple-search.label' | translate }}</span>\n      <input\n        #searchInput\n        matInput\n        type=\"text\"\n        autocomplete=\"off\"\n        name=\"{{ 'yuv.simple-search.label' | translate }}\"\n        formControlName=\"term\"\n        [placeholder]=\"'yuv.simple-search.label' | translate\"\n      />\n    </label>\n\n    <button\n      ymtIconButton\n      matSuffix\n      type=\"button\"\n      [attr.aria-label]=\"'yuv.simple-search.clear' | translate\"\n      [attr.title]=\"'yuv.simple-search.clear' | translate\"\n      [attr.inert]=\"form.get('term')?.value ? null : true\"\n      (click)=\"onClear($event)\"\n    >\n      <mat-icon aria-hidden=\"true\">close</mat-icon>\n    </button>\n\n    <button ymtIconButton matSuffix type=\"submit\" [attr.aria-label]=\"'yuv.simple-search.submit' | translate\" [disabled]=\"form.invalid\">\n      <mat-icon aria-hidden=\"true\">search</mat-icon>\n    </button>\n  </mat-form-field>\n</form>\n", styles: [":host{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--ymt-spacing-xs)}:host [inert=true]{opacity:0}:host [type=submit]{margin-inline-end:var(--ymt-spacing-xs)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }] }); }
+        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<form role=\"search\" class=\"search-form\" [formGroup]=\"form\" (ngSubmit)=\"onSearch()\">\n  <!-- Todo: String Translations-->\n  <mat-form-field appearance=\"outline\">\n    <label>\n      <span class=\"ymt-hide-sr\">{{ 'yuv.simple-search.label' | translate }}</span>\n      <input\n        #searchInput\n        matInput\n        type=\"text\"\n        autocomplete=\"off\"\n        name=\"{{ 'yuv.simple-search.label' | translate }}\"\n        formControlName=\"term\"\n        [placeholder]=\"'yuv.simple-search.label' | translate\"\n      />\n    </label>\n\n    <button\n      ymtIconButton\n      matSuffix\n      type=\"button\"\n      [attr.aria-label]=\"'yuv.simple-search.clear' | translate\"\n      [attr.title]=\"'yuv.simple-search.clear' | translate\"\n      [attr.inert]=\"form.get('term')?.value ? null : true\"\n      (click)=\"onClear($event)\"\n    >\n      <mat-icon aria-hidden=\"true\">close</mat-icon>\n    </button>\n\n    <button ymtIconButton matSuffix type=\"submit\" [attr.aria-label]=\"'yuv.simple-search.submit' | translate\" [disabled]=\"form.invalid\">\n      <mat-icon aria-hidden=\"true\">search</mat-icon>\n    </button>\n  </mat-form-field>\n</form>\n", styles: [":host{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--ymt-spacing-xs)}:host [inert=true]{opacity:0}:host [type=submit]{margin-inline-end:var(--ymt-spacing-xs)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SimpleSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SimpleSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-simple-search', standalone: true, imports: [ReactiveFormsModule, TranslateModule, MatIconModule, MatButtonModule, MatFormField, MatInputModule, YmtIconButtonDirective], providers: [
+            args: [{ selector: 'yuv-simple-search', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        TranslatePipe,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatFormField,
+                        MatInputModule,
+                        YmtIconButtonDirective
+                    ], providers: [
                         {
                             provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
                             useValue: {
@@ -153,20 +164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     ], template: "<form role=\"search\" class=\"search-form\" [formGroup]=\"form\" (ngSubmit)=\"onSearch()\">\n  <!-- Todo: String Translations-->\n  <mat-form-field appearance=\"outline\">\n    <label>\n      <span class=\"ymt-hide-sr\">{{ 'yuv.simple-search.label' | translate }}</span>\n      <input\n        #searchInput\n        matInput\n        type=\"text\"\n        autocomplete=\"off\"\n        name=\"{{ 'yuv.simple-search.label' | translate }}\"\n        formControlName=\"term\"\n        [placeholder]=\"'yuv.simple-search.label' | translate\"\n      />\n    </label>\n\n    <button\n      ymtIconButton\n      matSuffix\n      type=\"button\"\n      [attr.aria-label]=\"'yuv.simple-search.clear' | translate\"\n      [attr.title]=\"'yuv.simple-search.clear' | translate\"\n      [attr.inert]=\"form.get('term')?.value ? null : true\"\n      (click)=\"onClear($event)\"\n    >\n      <mat-icon aria-hidden=\"true\">close</mat-icon>\n    </button>\n\n    <button ymtIconButton matSuffix type=\"submit\" [attr.aria-label]=\"'yuv.simple-search.submit' | translate\" [disabled]=\"form.invalid\">\n      <mat-icon aria-hidden=\"true\">search</mat-icon>\n    </button>\n  </mat-form-field>\n</form>\n", styles: [":host{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--ymt-spacing-xs)}:host [inert=true]{opacity:0}:host [type=submit]{margin-inline-end:var(--ymt-spacing-xs)}\n"] }]
         }], propDecorators: { query: [{
                 type: Input
-            }], querySubmit: [{
-                type: Output
-            }], clearInput: [{
-                type: Output
-            }], targetSelectionChanged: [{
-                type: Output
-            }], queryChange: [{
-                type: Output
-            }], typeAggregation: [{
-                type: Output
-            }], searchInput: [{
-                type: ViewChild,
-                args: ['searchInput', { static: false }]
-            }] } });
+            }], querySubmit: [{ type: i0.Output, args: ["querySubmit"] }], clearInput: [{ type: i0.Output, args: ["clearInput"] }], targetSelectionChanged: [{ type: i0.Output, args: ["targetSelectionChanged"] }], queryChange: [{ type: i0.Output, args: ["queryChange"] }], typeAggregation: [{ type: i0.Output, args: ["typeAggregation"] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
 /**
  * Generated bundle index. Do not edit.

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

	@@ -1 +1 @@
1	- {"version":3,"file":"yuuvis-client-framework-simple-search.mjs","sources":["../../../../../libs/yuuvis/client-framework/simple-search/src/lib/simple-search/simple-search.component.ts","../../../../../libs/yuuvis/client-framework/simple-search/src/lib/simple-search/simple-search.component.html","../../../../../libs/yuuvis/client-framework/simple-search/src/yuuvis-client-framework-simple-search.ts"],"sourcesContent":["import { AfterViewInit, Component, DestroyRef, ElementRef, EventEmitter, Input, Output, ViewChild, inject } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormField } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatInputModule } from '@angular/material/input';\nimport { AggregateResult, BaseObjectTypeField, SearchQuery, SearchService, SystemService, TranslateModule, TranslateService, Utils } from '@yuuvis/client-core';\nimport { YmtIconButtonDirective } from '@yuuvis/material';\nimport { debounceTime, tap } from 'rxjs';\nimport { ObjectTypeAggregation } from '../models';\n\n@Component({\n selector: 'yuv-simple-search',\n standalone: true,\n imports: [ReactiveFormsModule, TranslateModule, MatIconModule, MatButtonModule, MatFormField, MatInputModule, YmtIconButtonDirective],\n templateUrl: './simple-search.component.html',\n styleUrls: ['./simple-search.component.scss'],\n providers: [\n {\n provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,\n useValue: {\n subscriptSizing: 'dynamic'\n }\n }\n ]\n})\nexport class SimpleSearchComponent implements AfterViewInit {\n //#region Dependencies\n\n #fb = inject(FormBuilder);\n #destroyRef = inject(DestroyRef);\n readonly translate = inject(TranslateService);\n #searchService = inject(SearchService);\n #systemService = inject(SystemService);\n\n //#endregion\n\n //#region Angular stuff\n\n /*\n The search query\n /\n @Input() set query(q: SearchQuery \| null) {\n this._query = structuredClone(q) \|\| {};\n if (this._query.term) {\n this.form.patchValue({ term: this._query.term });\n // this.aggregate();\n } else this.form.reset();\n }\n\n get query() {\n return this._query;\n }\n\n /\n Emitted once the user submits the search\n /\n @Output() querySubmit = new EventEmitter<SearchQuery>();\n\n /\n Emitted once the user hits clear input button\n /\n @Output() clearInput = new EventEmitter<void>();\n /\n Emitted once selected targets change\n /\n @Output() targetSelectionChanged = new EventEmitter<(string \| number)[]>();\n @Output() queryChange = new EventEmitter<SearchQuery>();\n @Output() typeAggregation = new EventEmitter<ObjectTypeAggregation[]>();\n\n @ViewChild('searchInput', { static: false }) searchInput!: ElementRef<HTMLInputElement>;\n\n //#endregion\n\n //#region Properties\n\n public form: FormGroup = this.#fb.group({\n term: [''],\n targets: []\n });\n\n private _query: SearchQuery = {};\n\n //#endregion\n\n //#region Lifecycle Hooks\n\n public ngAfterViewInit(): void {\n this.subscribeToTargetsChanges();\n this.subscribeToSearchFormChanges();\n }\n\n //#endregion\n\n //#region Subscription\n\n private subscribeToTargetsChanges(): void {\n this.form.controls['targets'].valueChanges.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((value) => {\n this._query.types = value;\n this.targetSelectionChanged.emit(value);\n });\n }\n\n private subscribeToSearchFormChanges(): void {\n this.form.valueChanges\n .pipe(\n debounceTime(500),\n takeUntilDestroyed(this.#destroyRef),\n tap((value: any) => {\n this._query.term = value.term;\n this.queryChange.emit(this._query);\n if (this.typeAggregation.observed) this.aggregate();\n })\n )\n .subscribe();\n }\n\n //#endregion\n\n //#region Utilities\n\n private aggregate(all?: boolean): void {\n if (all \|\| this._query.term) {\n this.#searchService.aggregate(structuredClone(this._query), [BaseObjectTypeField.OBJECT_TYPE_ID]).subscribe(this.handleAggregateResult);\n }\n }\n\n //#endregion\n\n //#region UI Methods\n\n public onSearch(): void {\n if (this.form.valid) {\n this._query.term = this.form.value.term;\n this.querySubmit.emit(this._query);\n }\n }\n\n public onClear($event: Event): void {\n if (this.form.value.term) {\n this.form.controls['term'].setValue(null);\n this.clearInput.emit();\n setTimeout(() => {\n this.searchInput.nativeElement.focus();\n });\n }\n $event.stopPropagation();\n }\n\n //#endregion\n\n //#region Handlers\n\n private handleAggregateResult = (result: AggregateResult) => {\n if (result.aggregations && result.aggregations.length) {\n this.typeAggregation.emit(\n result.aggregations[0].entries\n .map((result) => ({\n objectTypeId: result.key,\n label: this.#systemService.getLocalizedLabel(result.key) \|\| result.key,\n count: result.count\n }))\n .sort(Utils.sortValues('label'))\n );\n } else {\n this.typeAggregation.emit([]);\n }\n };\n\n //#endregion\n}\n","<form role=\"search\" class=\"search-form\" [formGroup]=\"form\" (ngSubmit)=\"onSearch()\">\n <!-- Todo: String Translations-->\n <mat-form-field appearance=\"outline\">\n <label>\n <span class=\"ymt-hide-sr\">{{ 'yuv.simple-search.label' \| translate }}</span>\n <input\n #searchInput\n matInput\n type=\"text\"\n autocomplete=\"off\"\n name=\"{{ 'yuv.simple-search.label' \| translate }}\"\n formControlName=\"term\"\n [placeholder]=\"'yuv.simple-search.label' \| translate\"\n />\n </label>\n\n <button\n ymtIconButton\n matSuffix\n type=\"button\"\n [attr.aria-label]=\"'yuv.simple-search.clear' \| translate\"\n [attr.title]=\"'yuv.simple-search.clear' \| translate\"\n [attr.inert]=\"form.get('term')?.value ? null : true\"\n (click)=\"onClear($event)\"\n >\n <mat-icon aria-hidden=\"true\">close</mat-icon>\n </button>\n\n <button ymtIconButton matSuffix type=\"submit\" [attr.aria-label]=\"'yuv.simple-search.submit' \| translate\" [disabled]=\"form.invalid\">\n <mat-icon aria-hidden=\"true\">search</mat-icon>\n </button>\n </mat-form-field>\n</form>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"yuuvis-client-framework-simple-search.mjs","sources":["../../../../../libs/yuuvis/client-framework/simple-search/src/lib/simple-search/simple-search.component.ts","../../../../../libs/yuuvis/client-framework/simple-search/src/lib/simple-search/simple-search.component.html","../../../../../libs/yuuvis/client-framework/simple-search/src/yuuvis-client-framework-simple-search.ts"],"sourcesContent":["import { AfterViewInit, Component, DestroyRef, ElementRef, Input, inject, output, viewChild } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormField } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatInputModule } from '@angular/material/input';\nimport {\n AggregateResult,\n BaseObjectTypeField,\n SearchQuery,\n SearchService,\n SystemService,\n TranslatePipe,\n TranslateService,\n Utils\n} from '@yuuvis/client-core';\nimport { YmtIconButtonDirective } from '@yuuvis/material';\nimport { debounceTime, tap } from 'rxjs';\nimport { ObjectTypeAggregation } from '../models';\n\n@Component({\n selector: 'yuv-simple-search',\n standalone: true,\n imports: [\n ReactiveFormsModule,\n TranslatePipe,\n MatIconModule,\n MatButtonModule,\n MatFormField,\n MatInputModule,\n YmtIconButtonDirective\n ],\n templateUrl: './simple-search.component.html',\n styleUrls: ['./simple-search.component.scss'],\n providers: [\n {\n provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,\n useValue: {\n subscriptSizing: 'dynamic'\n }\n }\n ]\n})\nexport class SimpleSearchComponent implements AfterViewInit {\n //#region Dependencies\n\n #fb = inject(FormBuilder);\n #destroyRef = inject(DestroyRef);\n readonly translate = inject(TranslateService);\n #searchService = inject(SearchService);\n #systemService = inject(SystemService);\n\n //#endregion\n\n //#region Angular stuff\n\n /*\n The search query\n /\n @Input() set query(q: SearchQuery \| null) {\n this._query = structuredClone(q) \|\| {};\n if (this._query.term) {\n this.form.patchValue({ term: this._query.term });\n // this.aggregate();\n } else this.form.reset();\n }\n\n get query() {\n return this._query;\n }\n\n /\n Emitted once the user submits the search\n /\n readonly querySubmit = output<SearchQuery>();\n\n /\n Emitted once the user hits clear input button\n /\n readonly clearInput = output<void>();\n /\n Emitted once selected targets change\n /\n readonly targetSelectionChanged = output<(string \| number)[]>();\n readonly queryChange = output<SearchQuery>();\n readonly typeAggregation = output<ObjectTypeAggregation[]>();\n\n readonly searchInput = viewChild.required<ElementRef<HTMLInputElement>>('searchInput');\n\n //#endregion\n\n //#region Properties\n\n public form: FormGroup = this.#fb.group({\n term: [''],\n targets: []\n });\n\n private _query: SearchQuery = {};\n\n //#endregion\n\n //#region Lifecycle Hooks\n\n public ngAfterViewInit(): void {\n this.subscribeToTargetsChanges();\n this.subscribeToSearchFormChanges();\n }\n\n //#endregion\n\n //#region Subscription\n\n private subscribeToTargetsChanges(): void {\n this.form.controls['targets'].valueChanges.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((value) => {\n this._query.types = value;\n this.targetSelectionChanged.emit(value);\n });\n }\n\n private subscribeToSearchFormChanges(): void {\n this.form.valueChanges\n .pipe(\n debounceTime(500),\n takeUntilDestroyed(this.#destroyRef),\n tap((value: any) => {\n this._query.term = value.term;\n this.queryChange.emit(this._query);\n // TODO: decide if we want to trigger aggregation on search term change, if yes uncomment the following line\n // and Find out why `observed` is removed from type aggregations.\n // if (this.typeAggregation.observed) this.aggregate();\n })\n )\n .subscribe();\n }\n\n //#endregion\n\n //#region Utilities\n\n private aggregate(all?: boolean): void {\n if (all \|\| this._query.term) {\n this.#searchService\n .aggregate(structuredClone(this._query), [BaseObjectTypeField.OBJECT_TYPE_ID])\n .subscribe(this.handleAggregateResult);\n }\n }\n\n //#endregion\n\n //#region UI Methods\n\n public onSearch(): void {\n if (this.form.valid) {\n this._query.term = this.form.value.term;\n this.querySubmit.emit(this._query);\n }\n }\n\n public onClear($event: Event): void {\n if (this.form.value.term) {\n this.form.controls['term'].setValue(null);\n this.clearInput.emit();\n setTimeout(() => {\n this.searchInput().nativeElement.focus();\n });\n }\n $event.stopPropagation();\n }\n\n //#endregion\n\n //#region Handlers\n\n private handleAggregateResult = (result: AggregateResult) => {\n if (result.aggregations && result.aggregations.length) {\n this.typeAggregation.emit(\n result.aggregations[0].entries\n .map((result) => ({\n objectTypeId: result.key,\n label: this.#systemService.getLocalizedLabel(result.key) \|\| result.key,\n count: result.count\n }))\n .sort(Utils.sortValues('label'))\n );\n } else {\n this.typeAggregation.emit([]);\n }\n };\n\n //#endregion\n}\n","<form role=\"search\" class=\"search-form\" [formGroup]=\"form\" (ngSubmit)=\"onSearch()\">\n <!-- Todo: String Translations-->\n <mat-form-field appearance=\"outline\">\n <label>\n <span class=\"ymt-hide-sr\">{{ 'yuv.simple-search.label' \| translate }}</span>\n <input\n #searchInput\n matInput\n type=\"text\"\n autocomplete=\"off\"\n name=\"{{ 'yuv.simple-search.label' \| translate }}\"\n formControlName=\"term\"\n [placeholder]=\"'yuv.simple-search.label' \| translate\"\n />\n </label>\n\n <button\n ymtIconButton\n matSuffix\n type=\"button\"\n [attr.aria-label]=\"'yuv.simple-search.clear' \| translate\"\n [attr.title]=\"'yuv.simple-search.clear' \| translate\"\n [attr.inert]=\"form.get('term')?.value ? null : true\"\n (click)=\"onClear($event)\"\n >\n <mat-icon aria-hidden=\"true\">close</mat-icon>\n </button>\n\n <button ymtIconButton matSuffix type=\"submit\" [attr.aria-label]=\"'yuv.simple-search.submit' \| translate\" [disabled]=\"form.invalid\">\n <mat-icon aria-hidden=\"true\">search</mat-icon>\n </button>\n </mat-form-field>\n</form>\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-sort.mjs CHANGED Viewed

@@ -8,7 +8,7 @@ import { MatIconModule } from '@angular/material/icon';
 import * as i2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltip } from '@angular/material/tooltip';
-import { SystemService, TranslateService, TranslateModule } from '@yuuvis/client-core';
+import { SystemService, TranslateService, TranslatePipe } from '@yuuvis/client-core';
 import { YmtIconButtonDirective } from '@yuuvis/material';
 const MATERIAL_MODULES = [MatTooltip, MatIconModule, MatMenuModule, MatButtonModule, MatDivider];
@@ -19,17 +19,17 @@ class SortComponent {
     constructor() {
         this.#systemService = inject(SystemService);
         this.translate = inject(TranslateService);
-        this.tooltip = signal(this.translate.instant('yuv.sort.tooltip'));
-        this.sortOptions = input([]);
-        this.selectedSortOption = input(undefined);
-        this.storageKey = input();
+        this.tooltip = signal(this.translate.instant('yuv.sort.tooltip'), ...(ngDevMode ? [{ debugName: "tooltip" }] : []));
+        this.sortOptions = input([], ...(ngDevMode ? [{ debugName: "sortOptions" }] : []));
+        this.selectedSortOption = input(undefined, ...(ngDevMode ? [{ debugName: "selectedSortOption" }] : []));
+        this.storageKey = input(...(ngDevMode ? [undefined, { debugName: "storageKey" }] : []));
         // If true, renders a smaller icon button
-        this.small = input(false);
+        this.small = input(false, ...(ngDevMode ? [{ debugName: "small" }] : []));
         this.sortChanged = output();
         this.orderOptions = signal([
             { label: this.translate.instant('yuv.sort.ascending'), value: 'asc', type: 'order', selected: true },
             { label: this.translate.instant('yuv.sort.descending'), value: 'desc', type: 'order', selected: false }
-        ]);
+        ], ...(ngDevMode ? [{ debugName: "orderOptions" }] : []));
         this.#rememberSort = effect(() => {
             const storageKey = this.storageKey();
             if (storageKey) {
@@ -59,31 +59,51 @@ class SortComponent {
                     }
                 }
             }
-        });
-        this.#reEvaluate = signal(null);
-        this.sortFields = linkedSignal({
-            source: () => ({
-                sortOptions: this.sortOptions(),
-                orderOptions: this.orderOptions(),
-                selectedSortOption: this.selectedSortOption(),
-                evaluate: this.#reEvaluate()
-            }),
-            computation: ({ sortOptions, orderOptions, selectedSortOption }) => {
-                // Ensure selectedSortOption.field is present in sortOptions
-                if (selectedSortOption?.field && !sortOptions.includes(selectedSortOption.order)) {
-                    orderOptions = orderOptions.map((order) => order.value === selectedSortOption.order ? { ...order, selected: true } : { ...order, selected: false });
+        }, ...(ngDevMode ? [{ debugName: "#rememberSort" }] : []));
+        this.#reEvaluate = signal(null, ...(ngDevMode ? [{ debugName: "#reEvaluate" }] : []));
+        this.sortFields = linkedSignal(...(ngDevMode ? [{ debugName: "sortFields", source: () => ({
+                    sortOptions: this.sortOptions(),
+                    orderOptions: this.orderOptions(),
+                    selectedSortOption: this.selectedSortOption(),
+                    evaluate: this.#reEvaluate()
+                }),
+                computation: ({ sortOptions, orderOptions, selectedSortOption }) => {
+                    // Ensure selectedSortOption.field is present in sortOptions
+                    if (selectedSortOption?.field && !sortOptions.includes(selectedSortOption.order)) {
+                        orderOptions = orderOptions.map((order) => order.value === selectedSortOption.order ? { ...order, selected: true } : { ...order, selected: false });
+                    }
+                    return [
+                        ...sortOptions.map((value, index) => ({
+                            value,
+                            label: this.#systemService.getLocalizedLabel(value) || value,
+                            type: 'sort',
+                            selected: index === 0 // first sort option is default
+                        })),
+                        ...orderOptions
+                    ];
+                } }] : [{
+                source: () => ({
+                    sortOptions: this.sortOptions(),
+                    orderOptions: this.orderOptions(),
+                    selectedSortOption: this.selectedSortOption(),
+                    evaluate: this.#reEvaluate()
+                }),
+                computation: ({ sortOptions, orderOptions, selectedSortOption }) => {
+                    // Ensure selectedSortOption.field is present in sortOptions
+                    if (selectedSortOption?.field && !sortOptions.includes(selectedSortOption.order)) {
+                        orderOptions = orderOptions.map((order) => order.value === selectedSortOption.order ? { ...order, selected: true } : { ...order, selected: false });
+                    }
+                    return [
+                        ...sortOptions.map((value, index) => ({
+                            value,
+                            label: this.#systemService.getLocalizedLabel(value) || value,
+                            type: 'sort',
+                            selected: index === 0 // first sort option is default
+                        })),
+                        ...orderOptions
+                    ];
                 }
-                return [
-                    ...sortOptions.map((value, index) => ({
-                        value,
-                        label: this.#systemService.getLocalizedLabel(value) || value,
-                        type: 'sort',
-                        selected: index === 0 // first sort option is default
-                    })),
-                    ...orderOptions
-                ];
-            }
-        });
+            }]));
         this.translate.onLangChange.pipe(takeUntilDestroyed()).subscribe({ next: () => this.#reEvaluate.set(new Date()) });
     }
     selectSort(option) {
@@ -100,8 +120,8 @@ class SortComponent {
         storageKey && localStorage.setItem(storageKey, JSON.stringify(fields));
         this.sortChanged.emit(fields);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SortComponent, isStandalone: true, selector: "yuv-sort", inputs: { sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: false, transformFunction: null }, selectedSortOption: { classPropertyName: "selectedSortOption", publicName: "selectedSortOption", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChanged: "sortChanged" }, ngImport: i0, template: `<button
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: SortComponent, isStandalone: true, selector: "yuv-sort", inputs: { sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: false, transformFunction: null }, selectedSortOption: { classPropertyName: "selectedSortOption", publicName: "selectedSortOption", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChanged: "sortChanged" }, ngImport: i0, template: `<button
       ymt-icon-button
       [icon-button-size]="small() ? 'small' : 'medium'"
       [matTooltip]="tooltip()"
@@ -130,11 +150,11 @@ class SortComponent {
           <mat-divider />
         }
       }
-    </mat-menu>`, isInline: true, styles: [":host{display:block}.mat-mdc-menu-item.sort-menu-item.selected .mat-icon{scale:.5}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    </mat-menu>`, isInline: true, styles: [":host{display:block}.mat-mdc-menu-item.sort-menu-item.selected .mat-icon{scale:.5}\n"], dependencies: [{ kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SortComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SortComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-sort', imports: [TranslateModule, YmtIconButtonDirective, ...MATERIAL_MODULES], template: `<button
+            args: [{ selector: 'yuv-sort', imports: [TranslatePipe, YmtIconButtonDirective, ...MATERIAL_MODULES], template: `<button
       ymt-icon-button
       [icon-button-size]="small() ? 'small' : 'medium'"
       [matTooltip]="tooltip()"
@@ -164,7 +184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         }
       }
     </mat-menu>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.mat-mdc-menu-item.sort-menu-item.selected .mat-icon{scale:.5}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { sortOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOptions", required: false }] }], selectedSortOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedSortOption", required: false }] }], storageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "storageKey", required: false }] }], small: [{ type: i0.Input, args: [{ isSignal: true, alias: "small", required: false }] }], sortChanged: [{ type: i0.Output, args: ["sortChanged"] }] } });
 /**
  * Generated bundle index. Do not edit.