@yuuvis/client-framework 0.8.0 → 0.9.0

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

@@ -1,21 +1,18 @@
 import * as i0 from '@angular/core';
-import { inject, viewChild, input, signal, forwardRef, Component, ViewChild, output } from '@angular/core';
-import * as i1$1 from '@angular/common';
+import { inject, viewChild, input, signal, forwardRef, Component, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@yuuvis/components/datepicker';
 import { YvcDatepickerModule } from '@yuuvis/components/datepicker';
 import * as i2 from '@yuuvis/components/icon';
 import { ICONS, YvcIconModule } from '@yuuvis/components/icon';
-import { YvcOverlayService, YvcOverlayModule } from '@yuuvis/components/overlay';
-import * as i2$2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, NonNullableFormBuilder, Validators, NG_VALIDATORS, ReactiveFormsModule, FormBuilder, FormsModule } from '@angular/forms';
-import * as i2$1 from '@yuuvis/client-core';
-import { TranslateService, LocaleDatePipe, TranslateModule, BackendService, PendingChangesService, Utils, Sort } from '@yuuvis/client-core';
+import { YvcOverlayService } from '@yuuvis/components/overlay';
+import * as i2$1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NonNullableFormBuilder, Validators, NG_VALIDATORS, ReactiveFormsModule } from '@angular/forms';
+import * as i1$1 from '@yuuvis/client-core';
+import { TranslateService, LocaleDatePipe, TranslateModule } from '@yuuvis/client-core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { OrganizationComponent, FormInputComponent, StringComponent, YuvFormsModule } from '@yuuvis/client-framework/forms';
+import { OrganizationComponent } from '@yuuvis/client-framework/forms';
 import { YUV_ICONS } from '@yuuvis/client-framework/icons';
-import * as i4 from '@yuuvis/components/common';
-import { YvcCommonModule } from '@yuuvis/components/common';
 
 class DueDatePickerComponent {
     constructor() {
@@ -130,6 +127,7 @@ class SequenceListComponent {
             items: this.#fb.array([this.#generateSequenceItem()])
         });
         this.entries = [];
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.propagateChange = (_) => { };
         this.sequenceForm.valueChanges.pipe(takeUntilDestroyed()).subscribe(() => {
             this.#propagate();
@@ -138,7 +136,7 @@ class SequenceListComponent {
     #generateSequenceItem(sequenceItem) {
         return this.#fb.group({
             title: [sequenceItem?.title || '', Validators.required],
-            nextAssignee: [sequenceItem?.nextAssignee.id || '', Validators.required],
+            nextAssignee: [sequenceItem?.nextAssignee || '', Validators.required],
             expiryDatetime: [sequenceItem?.expiryDatetime || undefined]
         });
     }
@@ -158,6 +156,7 @@ class SequenceListComponent {
         const ml = this.maxLength();
         this.maxLengthExceeded = ml !== undefined && this.formItemArray.length >= ml;
     }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     registerOnTouched() { }
     #propagate() {
         const res = [];
@@ -175,6 +174,9 @@ class SequenceListComponent {
     }
     writeValue(value) {
         this.entries = value || [];
+        this.formItemArray.clear();
+        if (this.entries.length === 0)
+            this.addItem();
         this.entries.forEach((entry) => {
             this.formItemArray.push(this.#generateSequenceItem(entry));
         });
@@ -207,20 +209,11 @@ 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 itemIndex; let itemIndex = $index) {\n      <div class=\"item\" [formGroup]=\"item\">\n        <button class=\"add before\" type=\"button\" [disabled]=\"maxLengthExceeded\" (click)=\"addItemAt($index)\"><yvc-icon [svg]=\"icons.add\"></yvc-icon></button>\n        <span class=\"index\" [attr.data-index]=\"itemIndex + 1\"></span>\n\n        <div class=\"item-form\">\n          <button class=\"remove\" type=\"button\" (click)=\"removeItem($index)\"\n          [disabled]=\"sequenceForm.controls.items.controls.length === 1\"><yvc-icon [svg]=\"icons.delete\"></yvc-icon></button>\n          <input [placeholder]=\"'yuv.sequence-list.form.task' | translate\" [maxLength]=\"128\" formControlName=\"title\" />\n          <yuv-organization\n          [title]=\"'yuv.sequence-list.form.nextAssignee' | translate\"\n          [withMetadata]=\"true\"\n          formControlName=\"nextAssignee\"> </yuv-organization>\n          \n          <!-- <yuv-due-date-picker \n          [title]=\"'yuv.sequence-list.form.expiryDatetime' | translate\"\n          formControlName=\"expiryDatetime\"></yuv-due-date-picker>           -->\n        </div>\n        @if ($last) {\n          <button class=\"add after\" type=\"button\" \n          [disabled]=\"maxLengthExceeded\"\n          (click)=\"addItem()\"><yvc-icon [svg]=\"icons.add\"></yvc-icon></button>\n        }\n      </div>\n    }\n  </section>\n</form>\n", styles: [":host{--yvc-form-element-border-color: var(--form-element-border-color, var(--text-color-hint));--yvc-form-element-focus-border-color: var(--form-element-focus-border-color, var(--color-accent));--yvc-form-element-focus-outline-color: var(--form-element-focus-outline-color, rgba(var(--color-accent-rgb), .3));--yvc-form-element-focus-outline-with: var(--form-element-focus-outline-with, 2px);--yvc-form-element-disabled-background-color: var(--form-element-disabled-background-color, rgba(from var(--text-color-body) r g b / .1));--yvc-form-element-disabled-opacity: var(--form-element-disabled-opacity, .8);--_sequence-list-item-background: var(--sequence-list-item-background, var(--panel-background));--_sequence-list-item-border-color: var(--sequence-list-item-border-color, var(--panel-divider-color));--_sequence-list-item-border-radius: var(--sequence-list-item-border-radius, calc(var(--app-pane-padding) / 2));--_sequence-list-line-color: var(--sequence-list-line-color, var(--text-color-hint));--_sequence-list-line-width: var(--sequence-list-line-width, 2px);--_sequence-list-line-item-background: var(--sequence-list-line-item-background, var(--panel-background-lightgrey));--_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(--color-accent) r g b/.5);outline-offset:-2px;border-color:var(--color-accent)}: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(--color-error);outline:3px solid rgb(from var(--color-error) 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-size:var(--font-hint);color:var(--text-color-caption);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:calc(var(--app-pane-padding) / 2);display:grid;column-gap:var(--app-pane-padding);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:calc(var(--app-pane-padding) / 4);background-color:transparent;color:var(--text-color-body)}: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;flex-flow:row-reverse}: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;flex-flow:row-reverse}:host form section .item .item-form yuv-organization:focus-within{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 .remove{--icon-size: 18px;padding:calc(var(--app-pane-padding) / 4);grid-area:remove;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: OrganizationComponent, selector: "yuv-organization", inputs: ["placeholder", "situation", "multiselect", "classifications", "readonly", "autofocus", "appendTo", "excludeMe", "withMetadata"], outputs: ["userSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i2.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }] }); }
+        ], 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 itemIndex; let itemIndex = $index) {\n      <div class=\"item\" [formGroup]=\"item\">\n        <button class=\"add before\" type=\"button\" [disabled]=\"maxLengthExceeded\" (click)=\"addItemAt($index)\"><yvc-icon [svg]=\"icons.add\"></yvc-icon></button>\n        <span class=\"index\" [attr.data-index]=\"itemIndex + 1\"></span>\n\n        <div class=\"item-form\">\n          <button class=\"remove\" type=\"button\" (click)=\"removeItem($index)\" [disabled]=\"sequenceForm.controls.items.controls.length === 1\">\n            <yvc-icon [svg]=\"icons.delete\"></yvc-icon>\n          </button>\n          <input [placeholder]=\"'yuv.sequence-list.form.task' | translate\" [maxLength]=\"128\" formControlName=\"title\" />\n          <yuv-organization [title]=\"'yuv.sequence-list.form.nextAssignee' | translate\" [withMetadata]=\"true\" formControlName=\"nextAssignee\">\n          </yuv-organization>\n        </div>\n        @if ($last) {\n          <button class=\"add after\" type=\"button\" [disabled]=\"maxLengthExceeded\" (click)=\"addItem()\"><yvc-icon [svg]=\"icons.add\"></yvc-icon></button>\n        }\n      </div>\n    }\n  </section>\n</form>\n", styles: [":host{--yvc-form-element-border-color: var(--form-element-border-color, var(--text-color-hint));--yvc-form-element-focus-border-color: var(--form-element-focus-border-color, var(--color-accent));--yvc-form-element-focus-outline-color: var(--form-element-focus-outline-color, rgba(var(--color-accent-rgb), .3));--yvc-form-element-focus-outline-with: var(--form-element-focus-outline-with, 2px);--yvc-form-element-disabled-background-color: var(--form-element-disabled-background-color, rgba(from var(--text-color-body) r g b / .1));--yvc-form-element-disabled-opacity: var(--form-element-disabled-opacity, .8);--_sequence-list-item-background: var(--sequence-list-item-background, var(--panel-background));--_sequence-list-item-border-color: var(--sequence-list-item-border-color, var(--panel-divider-color));--_sequence-list-item-border-radius: var(--sequence-list-item-border-radius, calc(var(--app-pane-padding) / 2));--_sequence-list-line-color: var(--sequence-list-line-color, var(--text-color-hint));--_sequence-list-line-width: var(--sequence-list-line-width, 2px);--_sequence-list-line-item-background: var(--sequence-list-line-item-background, var(--panel-background-lightgrey));--_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(--color-accent) r g b/.5);outline-offset:-2px;border-color:var(--color-accent)}: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(--color-error);outline:3px solid rgb(from var(--color-error) 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-size:var(--font-hint);color:var(--text-color-caption);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:calc(var(--app-pane-padding) / 2);display:grid;column-gap:var(--app-pane-padding);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:calc(var(--app-pane-padding) / 4);background-color:transparent;color:var(--text-color-body)}: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;flex-flow:row-reverse}: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;flex-flow:row-reverse}:host form section .item .item-form yuv-organization:focus-within{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 .remove{--icon-size: 18px;padding:calc(var(--app-pane-padding) / 4);grid-area:remove;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "component", type: OrganizationComponent, selector: "yuv-organization", inputs: ["placeholder", "situation", "multiselect", "classifications", "readonly", "autofocus", "appendTo", "excludeMe", "withMetadata"], outputs: ["userSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i2.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SequenceListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-sequence-list', standalone: true, imports: [
-                        CommonModule,
-                        TranslateModule,
-                        FormInputComponent,
-                        StringComponent,
-                        OrganizationComponent,
-                        DueDatePickerComponent,
-                        ReactiveFormsModule,
-                        YvcIconModule
-                    ], providers: [
+            args: [{ selector: 'yuv-sequence-list', standalone: true, imports: [CommonModule, TranslateModule, OrganizationComponent, ReactiveFormsModule, YvcIconModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SequenceListComponent),
@@ -233,287 +226,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         }
                     ], host: {
                         tabindex: '0'
-                    }, template: "<form [formGroup]=\"sequenceForm\">\n  <section formArrayName=\"items\">\n    @for (item of sequenceForm.controls.items.controls; track itemIndex; let itemIndex = $index) {\n      <div class=\"item\" [formGroup]=\"item\">\n        <button class=\"add before\" type=\"button\" [disabled]=\"maxLengthExceeded\" (click)=\"addItemAt($index)\"><yvc-icon [svg]=\"icons.add\"></yvc-icon></button>\n        <span class=\"index\" [attr.data-index]=\"itemIndex + 1\"></span>\n\n        <div class=\"item-form\">\n          <button class=\"remove\" type=\"button\" (click)=\"removeItem($index)\"\n          [disabled]=\"sequenceForm.controls.items.controls.length === 1\"><yvc-icon [svg]=\"icons.delete\"></yvc-icon></button>\n          <input [placeholder]=\"'yuv.sequence-list.form.task' | translate\" [maxLength]=\"128\" formControlName=\"title\" />\n          <yuv-organization\n          [title]=\"'yuv.sequence-list.form.nextAssignee' | translate\"\n          [withMetadata]=\"true\"\n          formControlName=\"nextAssignee\"> </yuv-organization>\n          \n          <!-- <yuv-due-date-picker \n          [title]=\"'yuv.sequence-list.form.expiryDatetime' | translate\"\n          formControlName=\"expiryDatetime\"></yuv-due-date-picker>           -->\n        </div>\n        @if ($last) {\n          <button class=\"add after\" type=\"button\" \n          [disabled]=\"maxLengthExceeded\"\n          (click)=\"addItem()\"><yvc-icon [svg]=\"icons.add\"></yvc-icon></button>\n        }\n      </div>\n    }\n  </section>\n</form>\n", styles: [":host{--yvc-form-element-border-color: var(--form-element-border-color, var(--text-color-hint));--yvc-form-element-focus-border-color: var(--form-element-focus-border-color, var(--color-accent));--yvc-form-element-focus-outline-color: var(--form-element-focus-outline-color, rgba(var(--color-accent-rgb), .3));--yvc-form-element-focus-outline-with: var(--form-element-focus-outline-with, 2px);--yvc-form-element-disabled-background-color: var(--form-element-disabled-background-color, rgba(from var(--text-color-body) r g b / .1));--yvc-form-element-disabled-opacity: var(--form-element-disabled-opacity, .8);--_sequence-list-item-background: var(--sequence-list-item-background, var(--panel-background));--_sequence-list-item-border-color: var(--sequence-list-item-border-color, var(--panel-divider-color));--_sequence-list-item-border-radius: var(--sequence-list-item-border-radius, calc(var(--app-pane-padding) / 2));--_sequence-list-line-color: var(--sequence-list-line-color, var(--text-color-hint));--_sequence-list-line-width: var(--sequence-list-line-width, 2px);--_sequence-list-line-item-background: var(--sequence-list-line-item-background, var(--panel-background-lightgrey));--_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(--color-accent) r g b/.5);outline-offset:-2px;border-color:var(--color-accent)}: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(--color-error);outline:3px solid rgb(from var(--color-error) 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-size:var(--font-hint);color:var(--text-color-caption);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:calc(var(--app-pane-padding) / 2);display:grid;column-gap:var(--app-pane-padding);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:calc(var(--app-pane-padding) / 4);background-color:transparent;color:var(--text-color-body)}: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;flex-flow:row-reverse}: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;flex-flow:row-reverse}:host form section .item .item-form yuv-organization:focus-within{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 .remove{--icon-size: 18px;padding:calc(var(--app-pane-padding) / 4);grid-area:remove;padding:0}\n"] }]
+                    }, template: "<form [formGroup]=\"sequenceForm\">\n  <section formArrayName=\"items\">\n    @for (item of sequenceForm.controls.items.controls; track itemIndex; let itemIndex = $index) {\n      <div class=\"item\" [formGroup]=\"item\">\n        <button class=\"add before\" type=\"button\" [disabled]=\"maxLengthExceeded\" (click)=\"addItemAt($index)\"><yvc-icon [svg]=\"icons.add\"></yvc-icon></button>\n        <span class=\"index\" [attr.data-index]=\"itemIndex + 1\"></span>\n\n        <div class=\"item-form\">\n          <button class=\"remove\" type=\"button\" (click)=\"removeItem($index)\" [disabled]=\"sequenceForm.controls.items.controls.length === 1\">\n            <yvc-icon [svg]=\"icons.delete\"></yvc-icon>\n          </button>\n          <input [placeholder]=\"'yuv.sequence-list.form.task' | translate\" [maxLength]=\"128\" formControlName=\"title\" />\n          <yuv-organization [title]=\"'yuv.sequence-list.form.nextAssignee' | translate\" [withMetadata]=\"true\" formControlName=\"nextAssignee\">\n          </yuv-organization>\n        </div>\n        @if ($last) {\n          <button class=\"add after\" type=\"button\" [disabled]=\"maxLengthExceeded\" (click)=\"addItem()\"><yvc-icon [svg]=\"icons.add\"></yvc-icon></button>\n        }\n      </div>\n    }\n  </section>\n</form>\n", styles: [":host{--yvc-form-element-border-color: var(--form-element-border-color, var(--text-color-hint));--yvc-form-element-focus-border-color: var(--form-element-focus-border-color, var(--color-accent));--yvc-form-element-focus-outline-color: var(--form-element-focus-outline-color, rgba(var(--color-accent-rgb), .3));--yvc-form-element-focus-outline-with: var(--form-element-focus-outline-with, 2px);--yvc-form-element-disabled-background-color: var(--form-element-disabled-background-color, rgba(from var(--text-color-body) r g b / .1));--yvc-form-element-disabled-opacity: var(--form-element-disabled-opacity, .8);--_sequence-list-item-background: var(--sequence-list-item-background, var(--panel-background));--_sequence-list-item-border-color: var(--sequence-list-item-border-color, var(--panel-divider-color));--_sequence-list-item-border-radius: var(--sequence-list-item-border-radius, calc(var(--app-pane-padding) / 2));--_sequence-list-line-color: var(--sequence-list-line-color, var(--text-color-hint));--_sequence-list-line-width: var(--sequence-list-line-width, 2px);--_sequence-list-line-item-background: var(--sequence-list-line-item-background, var(--panel-background-lightgrey));--_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(--color-accent) r g b/.5);outline-offset:-2px;border-color:var(--color-accent)}: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(--color-error);outline:3px solid rgb(from var(--color-error) 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-size:var(--font-hint);color:var(--text-color-caption);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:calc(var(--app-pane-padding) / 2);display:grid;column-gap:var(--app-pane-padding);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:calc(var(--app-pane-padding) / 4);background-color:transparent;color:var(--text-color-body)}: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;flex-flow:row-reverse}: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;flex-flow:row-reverse}:host form section .item .item-form yuv-organization:focus-within{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 .remove{--icon-size: 18px;padding:calc(var(--app-pane-padding) / 4);grid-area:remove;padding:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { orgComponent: [{
                 type: ViewChild,
                 args: [OrganizationComponent]
             }] } });
 
-class SequenceListTemplateManageComponent {
-    set selectedTemplate(s) {
-        if (!this.pendingChanges.check()) {
-            this.pendingTaskId = undefined;
-            this._selectedTemplate = s ? { ...s } : undefined;
-            if (this._selectedTemplate)
-                this.form.patchValue({
-                    templateName: this._selectedTemplate.id === this.CURRENT_ENTRIES_ID ? '' : this._selectedTemplate.name,
-                    sequence: [...this._selectedTemplate.sequence]
-                }, { emitEvent: false });
-            this.form.markAsPristine();
-        }
-    }
-    get selectedTemplate() {
-        return this._selectedTemplate;
-    }
-    get formErrors() {
-        const errors = this.form.get('templateName')?.errors;
-        return errors ? Object.keys(errors).map((k) => this.labels.errors[k]) : [];
-    }
-    constructor() {
-        this.backend = inject(BackendService);
-        this.overlay = inject(YvcOverlayService);
-        this.pendingChanges = inject(PendingChangesService);
-        this.fb = inject(FormBuilder);
-        this.translate = inject(TranslateService);
-        this.DEFAULT_TEMPLATE_STORAGE_SECTION = 'sequencelist';
-        this.CURRENT_ENTRIES_ID = 'current';
-        this.TEMPLATE_NAME_MAX_LENGTH = 128;
-        this.disableSubmit = false;
-        this.templates = [];
-        this.filterTerm = null;
-        this.busy = false;
-        this.form = this.fb.group({
-            templateName: ['', [Validators.required, Validators.maxLength(this.TEMPLATE_NAME_MAX_LENGTH), this.forbiddenNameValidator()]],
-            sequence: [[], Validators.required]
-        });
-        /**
-         * Name of the section to store templates in user service (usersettings)
-         */
-        this.storageSection = input(this.DEFAULT_TEMPLATE_STORAGE_SECTION);
-        this.currentEntries = input([]);
-        // emitted once a template has been selected
-        this.templateSelect = output();
-        this.cancel = output();
-        this.labels = {
-            save: this.translate.instant('yuv.sequence-list.template.button.save'),
-            saveNew: this.translate.instant('yuv.sequence-list.template.button.saveNew'),
-            headline: this.translate.instant('yuv.sequence-list.template.headline'),
-            headlineNew: this.translate.instant('yuv.sequence-list.template.headlineNew'),
-            errors: {
-                maxlength: this.translate.instant('yuv.object-form-element.error.maxlength', { maxLength: this.TEMPLATE_NAME_MAX_LENGTH }),
-                forbiddenName: this.translate.instant('yuv.sequence-list.template.errors.forbiddenName')
-            }
-        };
-        this.form.statusChanges.pipe(takeUntilDestroyed()).subscribe((res) => {
-            if (this.form.dirty && !this.pendingChanges.hasPendingTask(this.pendingTaskId || ' ')) {
-                this.pendingTaskId = this.pendingChanges.startTask(this.translate.instant('yuv.sequence-list.template.pending-changes.alert'));
-            }
-        });
-    }
-    forbiddenNameValidator() {
-        return (control) => {
-            const forbidden = this.templates
-                .filter((t) => t.id !== this.selectedTemplate.id)
-                .map((t) => t.name)
-                .includes(control.value);
-            return forbidden ? { forbiddenName: { value: control.value } } : null;
-        };
-    }
-    selectCurrentEntries() {
-        this.selectedTemplate = {
-            id: this.CURRENT_ENTRIES_ID,
-            name: this.translate.instant('yuv.sequence-list.template.headlineNew'),
-            sequence: this.currentEntries() || []
-        };
-    }
-    applyTemplate() {
-        if (this.selectedTemplate)
-            this.templateSelect.emit(this.selectedTemplate.sequence);
-    }
-    deleteTemplate() {
-        this.overlay
-            .confirm({
-            message: this.translate.instant('yuv.sequence-list.template.remove.confirm.message', {
-                template: this.selectedTemplate.name
-            })
-        })
-            .subscribe((confirmed) => {
-            if (confirmed) {
-                this.templates = this.templates.filter((t) => t.id !== this.selectedTemplate.id);
-                this.saveTemplates();
-            }
-        });
-    }
-    submit() {
-        if (this.selectedTemplate) {
-            let selectAfterSave;
-            if (this.selectedTemplate.id === this.CURRENT_ENTRIES_ID) {
-                // save current list as new template
-                const id = Utils.uuid();
-                this.templates.push({
-                    id,
-                    name: this.form.value.templateName,
-                    sequence: this.form.value.sequence
-                });
-                selectAfterSave = id;
-            }
-            else {
-                // update existing template
-                const i = this.templates.findIndex((e) => e.id === this.selectedTemplate.id);
-                if (i !== -1) {
-                    this.templates[i] = {
-                        id: this.selectedTemplate.id,
-                        name: this.form.value.templateName,
-                        sequence: this.form.value.sequence
-                    };
-                    selectAfterSave = this.selectedTemplate.id;
-                }
-            }
-            this.saveTemplates(selectAfterSave);
-        }
-    }
-    saveTemplates(templateToBeSelectedAfterSave) {
-        this.busy = true;
-        this.templates.sort(Utils.sortValues('name', Sort.ASC));
-        return this.backend.post(`/users/settings/${this.storageSection}`, { templates: this.templates }).subscribe((res) => {
-            this.busy = false;
-            this.form.markAsPristine();
-            if (this.pendingTaskId)
-                this.pendingChanges.finishTask(this.pendingTaskId);
-            if (!templateToBeSelectedAfterSave) {
-                this.selectedTemplate = undefined;
-            }
-            else if (templateToBeSelectedAfterSave !== this.selectedTemplate.id) {
-                this.selectedTemplate = this.templates.find((t) => templateToBeSelectedAfterSave === t.id);
-            }
-        }, (err) => (this.busy = false));
-    }
-    loadTemplates() {
-        this.backend.get(`/users/settings/${this.storageSection()}`).subscribe((res) => {
-            this.templates = res ? res.templates || [] : [];
-            this.templates.sort(Utils.sortValues('name', Sort.ASC));
-            this.selectCurrentEntries();
-        });
-    }
-    ngOnInit() {
-        this.loadTemplates();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SequenceListTemplateManageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SequenceListTemplateManageComponent, isStandalone: true, selector: "yuv-sequence-list-template-manage", inputs: { storageSection: { classPropertyName: "storageSection", publicName: "storageSection", isSignal: true, isRequired: false, transformFunction: null }, currentEntries: { classPropertyName: "currentEntries", publicName: "currentEntries", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { templateSelect: "templateSelect", cancel: "cancel" }, ngImport: i0, template: "<div class=\"template-list\">\n  <header>{{ 'yuv.sequence-list.template-list.headline' | translate }}</header>\n\n  <!-- current entries -->\n  <div class=\"currententries item\" (click)=\"selectCurrentEntries()\" [ngClass]=\"{ current: selectedTemplate?.id === CURRENT_ENTRIES_ID }\">\n    {{ 'yuv.sequence-list.template.headlineNew' | translate }}\n  </div>\n\n  <div class=\"filter\">\n    <yuv-form-input [label]=\"'yuv.sequence-list.form.filter' | translate\">\n      <yuv-string [(ngModel)]=\"filterTerm\"> </yuv-string>\n    </yuv-form-input>\n  </div>\n\n  <div class=\"templates\">\n    @for (tpl of templates | filter: filterTerm : 'name'; track $index) {\n      <div class=\"item\" (click)=\"selectedTemplate = tpl\" [ngClass]=\"{ current: selectedTemplate?.id === tpl.id }\">\n        {{ tpl.name }}\n      </div>\n    }\n  </div>\n</div>\n\n@if (selectedTemplate) {\n  <form class=\"template\" [formGroup]=\"form\">\n    <header>{{ selectedTemplate.id !== CURRENT_ENTRIES_ID ? labels.headline : labels.headlineNew }}</header>\n\n    <yuv-form-input [label]=\"'yuv.sequence-list.form.templateName' | translate\" [required]=\"true\" [invalid]=\"!!formErrors.length\">\n      <yuv-string [autofocus]=\"true\" [required]=\"true\" formControlName=\"templateName\"> </yuv-string>\n    </yuv-form-input>\n    @for (e of formErrors; track $index) {\n      <div class=\"errors\">{{ e }}</div>\n    }\n    <yuv-sequence-list disable-duedate=\"true\" formControlName=\"sequence\"> </yuv-sequence-list>\n  </form>\n}\n\n<div class=\"buttons\">\n  <div class=\"left\">\n    <button type=\"button\" class=\"secondary\" (click)=\"cancel.emit()\">{{ 'yuv.sequence-list.template.cancel' | translate }}</button>\n  </div>\n\n  @if (selectedTemplate) {\n    <div class=\"right\">\n      @if (selectedTemplate.id !== CURRENT_ENTRIES_ID) {\n        <button class=\"secondary delete\" type=\"button\" (click)=\"deleteTemplate()\">\n          {{ 'yuv.sequence-list.template.button.delete' | translate }}\n        </button>\n\n        <button class=\"primary apply\" type=\"button\" [disabled]=\"disableSubmit || form.invalid || form.dirty\" (click)=\"applyTemplate()\">\n          {{ 'yuv.sequence-list.template.button.apply' | translate }}\n        </button>\n      }\n\n      <!-- save -->\n      <button\n        class=\"{{ selectedTemplate.id !== CURRENT_ENTRIES_ID ? 'primary' : 'primary' }} save\"\n        (click)=\"submit()\"\n        type=\"button\"\n        [disabled]=\"disableSubmit || form.invalid || form.pristine\"\n      >\n        {{ selectedTemplate.id !== CURRENT_ENTRIES_ID ? labels.save : labels.saveNew }}\n      </button>\n    </div>\n  }\n</div>\n", styles: [":host{display:grid;height:100%;grid-template-rows:1fr auto;grid-template-columns:200px 1fr;grid-template-areas:\"list template\" \"buttons buttons\"}:host header{font-weight:700;padding:var(--app-pane-padding);border-bottom:1px solid var(--panel-divider-color)}:host .template-list{grid-area:list;display:grid;height:100%;grid-template-rows:auto auto auto 1fr;grid-template-columns:1fr;grid-template-areas:\"header\" \"current\" \"filter\" \"templates\";border-right:1px solid var(--panel-divider-color);overflow:hidden}:host .template-list header{grid-area:header}:host .template-list .filter{grid-area:filter;padding:var(--app-pane-padding);border:1px solid var(--panel-divider-color);border-width:1px 0;background-color:var(--panel-background-lightgrey)}:host .template-list .currententries{grid-area:current}:host .template-list .templates{grid-area:templates;overflow-y:auto}:host .template-list .item{padding:var(--app-pane-padding);cursor:pointer}:host .template-list .item:not(.currententries){border-bottom:1px solid var(--panel-divider-color)}:host .template-list .item:not(.current):hover{background-color:var(--item-focus-background-color)}:host .template-list .item.current{background-color:var(--item-selected-background-color)}:host .template{grid-area:template;display:grid;height:100%;overflow-y:auto;grid-template-rows:auto auto auto 1fr;grid-template-columns:1fr;grid-template-areas:\"headline\" \"name\" \"errors\" \"sequence\"}:host .template h2{grid-area:headline}:host .template yuv-form-input{grid-area:name;margin:var(--app-pane-padding);margin-bottom:calc(var(--app-pane-padding) / 2)}:host .template .errors{grid-area:errors;margin:0 var(--app-pane-padding);color:var(--color-error)}:host .template yuv-sequence-list{grid-area:sequence;margin:var(--app-pane-padding);box-shadow:0 0 1.2em #0000001a}:host .buttons{grid-area:buttons;overflow-x:auto;display:flex;padding:calc(var(--app-pane-padding) / 2) calc(var(--app-pane-padding) / 2 - 2px);border-top:1px solid var(--panel-divider-color)}:host .buttons .left{display:flex}:host .buttons .right{flex:1;display:flex;justify-content:flex-end}:host .buttons .right .save{order:2}:host .buttons .right .delete{order:1}:host .buttons .right .apply{order:3}:host .buttons button{margin:0 2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: YvcOverlayModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: FormInputComponent, selector: "yuv-form-input", inputs: ["label", "tag", "description", "invalid", "disabled", "required"] }, { kind: "component", type: StringComponent, selector: "yuv-string", inputs: ["multiselect", "rows", "readonly", "autofocus", "classifications", "situation", "regex", "minLength", "maxLength"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SequenceListComponent, selector: "yuv-sequence-list", inputs: ["maxLength"] }, { kind: "ngmodule", type: YuvFormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: YvcCommonModule }, { kind: "pipe", type: i4.FilterPipe, name: "filter" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SequenceListTemplateManageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-sequence-list-template-manage', standalone: true, imports: [
-                        CommonModule,
-                        YvcOverlayModule,
-                        TranslateModule,
-                        FormInputComponent,
-                        StringComponent,
-                        FormsModule,
-                        CommonModule,
-                        SequenceListComponent,
-                        YuvFormsModule,
-                        ReactiveFormsModule,
-                        YvcCommonModule
-                    ], template: "<div class=\"template-list\">\n  <header>{{ 'yuv.sequence-list.template-list.headline' | translate }}</header>\n\n  <!-- current entries -->\n  <div class=\"currententries item\" (click)=\"selectCurrentEntries()\" [ngClass]=\"{ current: selectedTemplate?.id === CURRENT_ENTRIES_ID }\">\n    {{ 'yuv.sequence-list.template.headlineNew' | translate }}\n  </div>\n\n  <div class=\"filter\">\n    <yuv-form-input [label]=\"'yuv.sequence-list.form.filter' | translate\">\n      <yuv-string [(ngModel)]=\"filterTerm\"> </yuv-string>\n    </yuv-form-input>\n  </div>\n\n  <div class=\"templates\">\n    @for (tpl of templates | filter: filterTerm : 'name'; track $index) {\n      <div class=\"item\" (click)=\"selectedTemplate = tpl\" [ngClass]=\"{ current: selectedTemplate?.id === tpl.id }\">\n        {{ tpl.name }}\n      </div>\n    }\n  </div>\n</div>\n\n@if (selectedTemplate) {\n  <form class=\"template\" [formGroup]=\"form\">\n    <header>{{ selectedTemplate.id !== CURRENT_ENTRIES_ID ? labels.headline : labels.headlineNew }}</header>\n\n    <yuv-form-input [label]=\"'yuv.sequence-list.form.templateName' | translate\" [required]=\"true\" [invalid]=\"!!formErrors.length\">\n      <yuv-string [autofocus]=\"true\" [required]=\"true\" formControlName=\"templateName\"> </yuv-string>\n    </yuv-form-input>\n    @for (e of formErrors; track $index) {\n      <div class=\"errors\">{{ e }}</div>\n    }\n    <yuv-sequence-list disable-duedate=\"true\" formControlName=\"sequence\"> </yuv-sequence-list>\n  </form>\n}\n\n<div class=\"buttons\">\n  <div class=\"left\">\n    <button type=\"button\" class=\"secondary\" (click)=\"cancel.emit()\">{{ 'yuv.sequence-list.template.cancel' | translate }}</button>\n  </div>\n\n  @if (selectedTemplate) {\n    <div class=\"right\">\n      @if (selectedTemplate.id !== CURRENT_ENTRIES_ID) {\n        <button class=\"secondary delete\" type=\"button\" (click)=\"deleteTemplate()\">\n          {{ 'yuv.sequence-list.template.button.delete' | translate }}\n        </button>\n\n        <button class=\"primary apply\" type=\"button\" [disabled]=\"disableSubmit || form.invalid || form.dirty\" (click)=\"applyTemplate()\">\n          {{ 'yuv.sequence-list.template.button.apply' | translate }}\n        </button>\n      }\n\n      <!-- save -->\n      <button\n        class=\"{{ selectedTemplate.id !== CURRENT_ENTRIES_ID ? 'primary' : 'primary' }} save\"\n        (click)=\"submit()\"\n        type=\"button\"\n        [disabled]=\"disableSubmit || form.invalid || form.pristine\"\n      >\n        {{ selectedTemplate.id !== CURRENT_ENTRIES_ID ? labels.save : labels.saveNew }}\n      </button>\n    </div>\n  }\n</div>\n", styles: [":host{display:grid;height:100%;grid-template-rows:1fr auto;grid-template-columns:200px 1fr;grid-template-areas:\"list template\" \"buttons buttons\"}:host header{font-weight:700;padding:var(--app-pane-padding);border-bottom:1px solid var(--panel-divider-color)}:host .template-list{grid-area:list;display:grid;height:100%;grid-template-rows:auto auto auto 1fr;grid-template-columns:1fr;grid-template-areas:\"header\" \"current\" \"filter\" \"templates\";border-right:1px solid var(--panel-divider-color);overflow:hidden}:host .template-list header{grid-area:header}:host .template-list .filter{grid-area:filter;padding:var(--app-pane-padding);border:1px solid var(--panel-divider-color);border-width:1px 0;background-color:var(--panel-background-lightgrey)}:host .template-list .currententries{grid-area:current}:host .template-list .templates{grid-area:templates;overflow-y:auto}:host .template-list .item{padding:var(--app-pane-padding);cursor:pointer}:host .template-list .item:not(.currententries){border-bottom:1px solid var(--panel-divider-color)}:host .template-list .item:not(.current):hover{background-color:var(--item-focus-background-color)}:host .template-list .item.current{background-color:var(--item-selected-background-color)}:host .template{grid-area:template;display:grid;height:100%;overflow-y:auto;grid-template-rows:auto auto auto 1fr;grid-template-columns:1fr;grid-template-areas:\"headline\" \"name\" \"errors\" \"sequence\"}:host .template h2{grid-area:headline}:host .template yuv-form-input{grid-area:name;margin:var(--app-pane-padding);margin-bottom:calc(var(--app-pane-padding) / 2)}:host .template .errors{grid-area:errors;margin:0 var(--app-pane-padding);color:var(--color-error)}:host .template yuv-sequence-list{grid-area:sequence;margin:var(--app-pane-padding);box-shadow:0 0 1.2em #0000001a}:host .buttons{grid-area:buttons;overflow-x:auto;display:flex;padding:calc(var(--app-pane-padding) / 2) calc(var(--app-pane-padding) / 2 - 2px);border-top:1px solid var(--panel-divider-color)}:host .buttons .left{display:flex}:host .buttons .right{flex:1;display:flex;justify-content:flex-end}:host .buttons .right .save{order:2}:host .buttons .right .delete{order:1}:host .buttons .right .apply{order:3}:host .buttons button{margin:0 2px}\n"] }]
-        }], ctorParameters: () => [] });
-
-/**
- * Task sequence list including templates for sequence lists.
- * Templates are preconfigured lists of tasks and recipients.
- */
-class SequenceListTemplatesComponent {
-    get entries() {
-        return this._entries;
-    }
-    constructor() {
-        this.fb = inject(FormBuilder);
-        this.pendingChanges = inject(PendingChangesService);
-        this.overlay = inject(YvcOverlayService);
-        this.tplTemplateManager = viewChild('tplTemplateManager');
-        this.form = this.fb.group({
-            sequence: [[]]
-        });
-        this._entries = [];
-        this.title = input();
-        this.maxLength = input(100);
-        this.templateStorageSection = input.required();
-        this.itemEdit = output();
-        // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
-        this.propagateChange = (_) => { };
-        this.form.valueChanges.pipe(takeUntilDestroyed()).subscribe((res) => {
-            this.setEntries(res.sequence, false);
-            this.propagate();
-        });
-    }
-    setEntries(e, patch) {
-        this._entries = e;
-        if (patch)
-            this.form.patchValue({
-                sequence: e || []
-            });
-    }
-    propagate() {
-        this.propagateChange(this.entries);
-    }
-    writeValue(value) {
-        this.setEntries(value || [], true);
-    }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
-    registerOnTouched(fn) { }
-    // TEMPLATES
-    openTemplateManager() {
-        this.oRef = this.overlay.open(this.tplTemplateManager(), {
-            width: '55%',
-            height: '70%'
-        });
-        this.oRef.preventClose = () => this.pendingChanges.check();
-    }
-    templateManagerCancel() {
-        if (this.oRef)
-            this.oRef.close();
-    }
-    templateManagerSelect(entries) {
-        this.setEntries(entries, true);
-        if (this.oRef)
-            this.oRef.close();
-    }
-    validate() {
-        return this.form.invalid
-            ? {
-                sequencelist: { invalid: true }
-            }
-            : null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SequenceListTemplatesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SequenceListTemplatesComponent, isStandalone: true, selector: "yuv-sequence-list-templates", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, templateStorageSection: { classPropertyName: "templateStorageSection", publicName: "templateStorageSection", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { itemEdit: "itemEdit" }, host: { attributes: { "tabindex": "0" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => SequenceListTemplatesComponent),
-                multi: true
-            },
-            {
-                provide: NG_VALIDATORS,
-                useExisting: forwardRef(() => SequenceListTemplatesComponent),
-                multi: true
-            }
-        ], viewQueries: [{ propertyName: "tplTemplateManager", first: true, predicate: ["tplTemplateManager"], descendants: true, isSignal: true }], ngImport: i0, template: "<form [formGroup]=\"form\">\n  <yuv-sequence-list formControlName=\"sequence\" [maxLength]=\"maxLength()\">\n  \n    @if (!!templateStorageSection) {\n      <button class=\"btn-templates secondary\" (click)=\"openTemplateManager()\">{{ 'yuv.sequence-list.button.templates' | translate }}</button>\n    }\n  </yuv-sequence-list>\n</form>\n\n<!-- template manager overlay -->\n<ng-template #tplTemplateManager>\n  <yuv-sequence-list-template-manage\n    (cancel)=\"oRef?.close()\"\n    (templateSelect)=\"templateManagerSelect($event)\"\n    [storageSection]=\"templateStorageSection()    \"\n    [currentEntries]=\"entries\"\n  >\n  </yuv-sequence-list-template-manage>\n</ng-template>\n", styles: [":host{display:block;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SequenceListComponent, selector: "yuv-sequence-list", inputs: ["maxLength"] }, { kind: "component", type: SequenceListTemplateManageComponent, selector: "yuv-sequence-list-template-manage", inputs: ["storageSection", "currentEntries"], outputs: ["templateSelect", "cancel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SequenceListTemplatesComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-sequence-list-templates', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule,
-                        SequenceListComponent, SequenceListTemplateManageComponent, TranslateModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => SequenceListTemplatesComponent),
-                            multi: true
-                        },
-                        {
-                            provide: NG_VALIDATORS,
-                            useExisting: forwardRef(() => SequenceListTemplatesComponent),
-                            multi: true
-                        }
-                    ], host: {
-                        tabindex: '0'
-                    }, template: "<form [formGroup]=\"form\">\n  <yuv-sequence-list formControlName=\"sequence\" [maxLength]=\"maxLength()\">\n  \n    @if (!!templateStorageSection) {\n      <button class=\"btn-templates secondary\" (click)=\"openTemplateManager()\">{{ 'yuv.sequence-list.button.templates' | translate }}</button>\n    }\n  </yuv-sequence-list>\n</form>\n\n<!-- template manager overlay -->\n<ng-template #tplTemplateManager>\n  <yuv-sequence-list-template-manage\n    (cancel)=\"oRef?.close()\"\n    (templateSelect)=\"templateManagerSelect($event)\"\n    [storageSection]=\"templateStorageSection()    \"\n    [currentEntries]=\"entries\"\n  >\n  </yuv-sequence-list-template-manage>\n</ng-template>\n", styles: [":host{display:block;overflow-y:auto}\n"] }]
-        }], ctorParameters: () => [] });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DueDatePickerComponent, SequenceListComponent, SequenceListTemplateManageComponent, SequenceListTemplatesComponent };
+export { DueDatePickerComponent, SequenceListComponent };
 //# sourceMappingURL=yuuvis-client-framework-sequence-list.mjs.map