@yuuvis/client-framework 0.6.5

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

@@ -0,0 +1,519 @@
+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 { 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 { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { OrganizationComponent, FormInputComponent, StringComponent, YuvFormsModule } 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() {
+        this.#overlay = inject(YvcOverlayService);
+        this.translate = inject(TranslateService);
+        this.tplCalendar = viewChild.required('tplCalendar');
+        this.disabled = input(false);
+        this.calendarValue = null;
+        this.icons = {
+            calendar: ICONS.calendar,
+            clear: ICONS.clear
+        };
+        this.#locale = this.translate.currentLang;
+        this.options = signal({
+            withTime: true,
+            // onlyFutureDates: true
+        });
+        this.propagateChange = (_) => { };
+    }
+    #overlay;
+    #oRef;
+    #labels;
+    #locale;
+    #setOptions() {
+        this.options.update((v) => {
+            return {
+                ...v,
+                labels: {
+                    calendarApply: this.translate.instant('yuv.form.element.datetime.calendar.select'),
+                    calendarCancel: this.translate.instant('yuv.form.element.datetime.calendar.cancel'),
+                    shortcut: { today: this.translate.instant('yuv.form.element.datetime.calendar.today') }
+                },
+                locale: this.translate.currentLang
+            };
+        });
+    }
+    openCalendar() {
+        if (!this.calendarValue)
+            this.calendarValue = new Date();
+        this.#oRef = this.#overlay.open(this.tplCalendar(), null, {
+            focusHandled: true
+        });
+    }
+    closeCalendar() {
+        this.#oRef?.close();
+    }
+    onCalendarDateApply(date) {
+        this.calendarValue = date;
+        this.value = this.calendarValue;
+        this.propagateChange(this.value);
+        this.closeCalendar();
+    }
+    clear() {
+        this.value = undefined;
+        this.propagateChange(this.value);
+    }
+    registerOnTouched() { }
+    writeValue(value) {
+        this.value = value;
+        this.calendarValue = value || null;
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    ngOnInit() {
+        this.#setOptions();
+        this.translate.onLangChange.subscribe((e) => {
+            this.#setOptions();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DueDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DueDatePickerComponent, isStandalone: true, selector: "yuv-due-date-picker", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DueDatePickerComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "tplCalendar", first: true, predicate: ["tplCalendar"], descendants: true, isSignal: true }], ngImport: i0, template: "<button type=\"button\" class=\"calender secondary\" [disabled]=\"disabled()\" (click)=\"openCalendar()\">\n  <yvc-icon [svg]=\"icons.calendar\"></yvc-icon>\n  @if (value) {\n    <span>{{ value | localeDate }}</span>\n  }\n</button>\n@if (value) {\n  <button type=\"button\" class=\"clear\" (click)=\"this.clear()\"><yvc-icon [svg]=\"icons.clear\"></yvc-icon></button>\n}\n<ng-template #tplCalendar>\n  <yvc-datepicker-calendar\n    [date]=\"calendarValue\"\n    [options]=\"options()\"\n    (cancel)=\"closeCalendar()\"\n    (apply)=\"onCalendarDateApply($event)\"\n  ></yvc-datepicker-calendar>\n</ng-template>\n", styles: [":host{display:flex;align-items:center;gap:calc(var(--app-pane-padding) / 4)}:host button{padding:0}:host button:not(.clear){padding:calc(var(--app-pane-padding) / 8)}:host button:not(.clear) span{padding:0 calc(var(--app-pane-padding) / 4)}:host button:not(.clear) yvc-icon{color:var(--text-color-caption)}:host button yvc-icon{--icon-size: 16px;color:var(--text-color-hint)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: YvcDatepickerModule }, { kind: "component", type: i1.DatepickerCalendarComponent, selector: "yvc-datepicker-calendar", inputs: ["date", "options"], outputs: ["apply", "cancel"] }, { kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i2.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DueDatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-due-date-picker', standalone: true, imports: [CommonModule, YvcDatepickerModule, YvcIconModule, LocaleDatePipe], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DueDatePickerComponent),
+                            multi: true
+                        }
+                    ], template: "<button type=\"button\" class=\"calender secondary\" [disabled]=\"disabled()\" (click)=\"openCalendar()\">\n  <yvc-icon [svg]=\"icons.calendar\"></yvc-icon>\n  @if (value) {\n    <span>{{ value | localeDate }}</span>\n  }\n</button>\n@if (value) {\n  <button type=\"button\" class=\"clear\" (click)=\"this.clear()\"><yvc-icon [svg]=\"icons.clear\"></yvc-icon></button>\n}\n<ng-template #tplCalendar>\n  <yvc-datepicker-calendar\n    [date]=\"calendarValue\"\n    [options]=\"options()\"\n    (cancel)=\"closeCalendar()\"\n    (apply)=\"onCalendarDateApply($event)\"\n  ></yvc-datepicker-calendar>\n</ng-template>\n", styles: [":host{display:flex;align-items:center;gap:calc(var(--app-pane-padding) / 4)}:host button{padding:0}:host button:not(.clear){padding:calc(var(--app-pane-padding) / 8)}:host button:not(.clear) span{padding:0 calc(var(--app-pane-padding) / 4)}:host button:not(.clear) yvc-icon{color:var(--text-color-caption)}:host button yvc-icon{--icon-size: 16px;color:var(--text-color-hint)}\n"] }]
+        }] });
+
+/**
+ * Task sequence list.
+ */
+class SequenceListComponent {
+    #fb;
+    get formItemArray() {
+        return this.sequenceForm.controls.items;
+    }
+    constructor() {
+        this.#fb = inject(NonNullableFormBuilder);
+        /**
+         * Maximum number of sequence items (defaults to 100).
+         */
+        this.maxLength = input(100);
+        this.maxLengthExceeded = false;
+        this.icons = {
+            delete: ICONS.clear,
+            add: YUV_ICONS.add
+        };
+        // dynamic form for sequence items
+        this.sequenceForm = this.#fb.group({
+            items: this.#fb.array([this.#generateSequenceItem()])
+        });
+        this.entries = [];
+        this.propagateChange = (_) => { };
+        this.sequenceForm.valueChanges.pipe(takeUntilDestroyed()).subscribe(() => {
+            this.#propagate();
+        });
+    }
+    #generateSequenceItem(sequenceItem) {
+        return this.#fb.group({
+            title: [sequenceItem?.title || '', Validators.required],
+            nextAssignee: [sequenceItem?.nextAssignee.id || '', Validators.required],
+            expiryDatetime: [sequenceItem?.expiryDatetime || undefined]
+        });
+    }
+    addItem() {
+        this.sequenceForm.controls.items.push(this.#generateSequenceItem());
+        this.#updateState();
+    }
+    addItemAt(idx) {
+        this.sequenceForm.controls.items.insert(idx, this.#generateSequenceItem());
+        this.#updateState();
+    }
+    removeItem(idx) {
+        this.sequenceForm.controls.items.removeAt(idx);
+        this.#updateState();
+    }
+    #updateState() {
+        const ml = this.maxLength();
+        this.maxLengthExceeded = ml !== undefined && this.formItemArray.length >= ml;
+    }
+    registerOnTouched() { }
+    #propagate() {
+        const res = [];
+        (this.sequenceForm.value.items || []).forEach((item) => {
+            const i = {
+                title: item.title,
+                nextAssignee: item.nextAssignee
+            };
+            if (item.expiryDatetime) {
+                i.expiryDatetime = item.expiryDatetime;
+            }
+            res.push(i);
+        });
+        this.propagateChange(res);
+    }
+    writeValue(value) {
+        this.entries = value || [];
+        this.entries.forEach((entry) => {
+            this.formItemArray.push(this.#generateSequenceItem(entry));
+        });
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    validate() {
+        const ml = this.maxLength();
+        const mlExceeded = ml !== undefined && this.formItemArray.length > ml;
+        const valid = this.sequenceForm.valid && !mlExceeded;
+        return !valid
+            ? {
+                sequencelist: {
+                    invalid: this.sequenceForm.invalid,
+                    maxLengthExceeded: mlExceeded
+                }
+            }
+            : null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SequenceListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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),
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                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"] }] }); }
+}
+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: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SequenceListComponent),
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => SequenceListComponent),
+                            multi: true
+                        }
+                    ], 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"] }]
+        }], 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 };
+//# sourceMappingURL=yuuvis-client-framework-sequence-list.mjs.map