@yuuvis/client-framework 2.3.11 → 2.3.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -35,7 +35,6 @@ class SequenceListComponent {
35
35
  });
36
36
  this.entries = [];
37
37
  // eslint-disable-next-line @typescript-eslint/no-empty-function
38
- // eslint-disable-next-line @typescript-eslint/no-empty-function
39
38
  this.propagateChange = (_) => { };
40
39
  this.sequenceForm.valueChanges.pipe(takeUntilDestroyed()).subscribe(() => {
41
40
  this.#propagate();
@@ -65,7 +64,6 @@ class SequenceListComponent {
65
64
  this.maxLengthExceeded = ml !== undefined && this.formItemArray.length >= ml;
66
65
  }
67
66
  // eslint-disable-next-line @typescript-eslint/no-empty-function
68
- // eslint-disable-next-line @typescript-eslint/no-empty-function
69
67
  registerOnTouched() { }
70
68
  #propagate() {
71
69
  const res = [];
@@ -118,19 +116,11 @@ class SequenceListComponent {
118
116
  useExisting: forwardRef(() => SequenceListComponent),
119
117
  multi: true
120
118
  }
121
- ], 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 mat-icon-button class=\"add before\" type=\"button\" [disabled]=\"maxLengthExceeded\" (click)=\"addItemAt($index)\">\n <mat-icon>add</mat-icon>\n </button>\n <span class=\"index\" [attr.data-index]=\"itemIndex + 1\"></span>\n\n <div class=\"item-form\">\n <button mat-icon-button class=\"remove\" type=\"button\" (click)=\"removeItem($index)\" [disabled]=\"sequenceForm.controls.items.controls.length === 1\">\n <mat-icon>close</mat-icon>\n </button>\n <input [placeholder]=\"'yuv.sequence-list.form.task' | translate\" [maxLength]=\"128\" formControlName=\"title\" />\n <yuv-organization [matTooltip]=\"'yuv.sequence-list.form.nextAssignee' | translate\" [withMetadata]=\"true\" formControlName=\"nextAssignee\">\n </yuv-organization>\n </div>\n @if ($last) {\n <button mat-icon-button class=\"add after\" type=\"button\" [disabled]=\"maxLengthExceeded\" (click)=\"addItem()\">\n <mat-icon>add</mat-icon>\n </button>\n }\n </div>\n }\n </section>\n</form>\n", styles: [":host{--_sequence-list-item-background: var(--sequence-list-item-background, var(--ymt-surface-panel));--_sequence-list-item-border-color: var(--sequence-list-item-border-color, var(--ymt-outline-variant));--_sequence-list-item-border-radius: var(--sequence-list-item-border-radius, var(--ymt-spacing-xs));--_sequence-list-line-color: var(--sequence-list-line-color, var(--ymt-text-color-subtle));--_sequence-list-line-width: var(--sequence-list-line-width, 2px);--_sequence-list-line-item-background: var(--sequence-list-line-item-background, var(--ymt-surface-panel));--_sequence-list-line-item-border-radius: var(--sequence-list-line-item-border-radius, .25em)}:host form section{margin-inline-end:4px}:host form section button.add{--icon-size: 18px;border-radius:var(--_sequence-list-line-item-border-radius);padding:0;display:flex;align-items:center;justify-content:center;background-color:var(--_sequence-list-line-item-background);border:var(--_sequence-list-line-width) solid var(--_sequence-list-line-color)}:host form section button.add:focus{outline:2px solid rgb(from var(--ymt-primary) r g b/.5);outline-offset:-2px;border-color:var(--ymt-primary)}:host form section .item{display:grid;grid-template-columns:6ch 1fr;grid-template-rows:auto auto;column-gap:1em;grid-template-areas:\"addBefore .\" \"index form\" \"addAfter .\"}:host form section .item.ng-invalid.ng-dirty .item-form{border-color:var(--ymt-danger);outline:3px solid rgb(from var(--ymt-danger) r g b/.5)}:host form section .item .add.before{grid-area:addBefore;justify-self:center}:host form section .item .add.after{grid-area:addAfter;justify-self:center}:host form section .item .index{grid-area:index;display:grid;align-items:center;justify-content:center}:host form section .item .index:after{content:attr(data-index);grid-row:1;grid-column:1;background-color:var(--_sequence-list-line-item-background);font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);font-weight:700;border:var(--_sequence-list-line-width) solid var(--_sequence-list-line-color);border-radius:var(--_sequence-list-line-item-border-radius);line-height:1em;padding:1px .25em;outline:3px solid rgb(from var(--_sequence-list-line-color) r g b/.1)}:host form section .item .index:before{content:\"\";grid-row:1;grid-column:1;height:100%;width:calc(50% - var(--_sequence-list-line-width) / 2);border-inline-end:var(--_sequence-list-line-width) solid var(--_sequence-list-line-color)}:host form section .item .item-form{grid-area:form;background-color:var(--_sequence-list-item-background);border:1px solid var(--_sequence-list-item-border-color);border-radius:var(--_sequence-list-item-border-radius);padding:var(--ymt-spacing-xs);display:grid;column-gap:var(--ymt-spacing-m);row-gap:4px;grid-template-columns:1fr auto;grid-template-rows:repeat(3,auto);grid-template-areas:\"task remove\" \"user user\" \"date date\"}:host form section .item .item-form input{border:1px solid transparent;border-radius:calc(var(--_sequence-list-item-border-radius) / 2);grid-area:task;outline-offset:0;line-height:1em;padding:var(--ymt-spacing-2xs);background-color:transparent;color:var(--ymt-text-color)}:host form section .item .item-form input:focus{border-color:var(--yvc-form-element-focus-border-color);outline:var(--yvc-form-element-focus-outline-with) solid var(--yvc-form-element-focus-outline-color)}:host form section .item .item-form yvc-datepicker{--form-element-border-color: transparent;grid-area:date;padding:0;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:var(--ymt-spacing-2xs);grid-area:remove;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: OrganizationComponent, selector: "yuv-organization", inputs: ["situation", "multiselect", "classifications", "readonly", "excludeMe", "withMetadata"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
119
+ ], viewQueries: [{ propertyName: "orgComponent", first: true, predicate: OrganizationComponent, descendants: true }], ngImport: i0, template: "<form [formGroup]=\"sequenceForm\">\n <section formArrayName=\"items\">\n @for (item of sequenceForm.controls.items.controls; track item; let itemIndex = $index) {\n <div class=\"item\" [formGroup]=\"item\">\n <button mat-icon-button class=\"add before\" type=\"button\" [disabled]=\"maxLengthExceeded\" (click)=\"addItemAt($index)\">\n <mat-icon>add</mat-icon>\n </button>\n <span class=\"index\" [attr.data-index]=\"itemIndex + 1\"></span>\n\n <div class=\"item-form\">\n <button mat-icon-button class=\"remove\" type=\"button\" (click)=\"removeItem($index)\" [disabled]=\"sequenceForm.controls.items.controls.length === 1\">\n <mat-icon>close</mat-icon>\n </button>\n <input [placeholder]=\"'yuv.sequence-list.form.task' | translate\" [maxLength]=\"128\" formControlName=\"title\" />\n <yuv-organization [matTooltip]=\"'yuv.sequence-list.form.nextAssignee' | translate\" [withMetadata]=\"true\" formControlName=\"nextAssignee\">\n </yuv-organization>\n </div>\n @if ($last) {\n <button mat-icon-button class=\"add after\" type=\"button\" [disabled]=\"maxLengthExceeded\" (click)=\"addItem()\">\n <mat-icon>add</mat-icon>\n </button>\n }\n </div>\n }\n </section>\n</form>\n", styles: [":host{--_sequence-list-item-background: var(--sequence-list-item-background, var(--ymt-surface-panel));--_sequence-list-item-border-color: var(--sequence-list-item-border-color, var(--ymt-outline-variant));--_sequence-list-item-border-radius: var(--sequence-list-item-border-radius, var(--ymt-spacing-xs));--_sequence-list-line-color: var(--sequence-list-line-color, var(--ymt-text-color-subtle));--_sequence-list-line-width: var(--sequence-list-line-width, 2px);--_sequence-list-line-item-background: var(--sequence-list-line-item-background, var(--ymt-surface-panel));--_sequence-list-line-item-border-radius: var(--sequence-list-line-item-border-radius, .25em)}:host form section{margin-inline-end:4px}:host form section button.add{--icon-size: 18px;border-radius:var(--_sequence-list-line-item-border-radius);padding:0;display:flex;align-items:center;justify-content:center;background-color:var(--_sequence-list-line-item-background);border:var(--_sequence-list-line-width) solid var(--_sequence-list-line-color)}:host form section button.add:focus{outline:2px solid rgb(from var(--ymt-primary) r g b/.5);outline-offset:-2px;border-color:var(--ymt-primary)}:host form section .item{display:grid;grid-template-columns:6ch 1fr;grid-template-rows:auto auto;column-gap:1em;grid-template-areas:\"addBefore .\" \"index form\" \"addAfter .\"}:host form section .item.ng-invalid.ng-dirty .item-form{border-color:var(--ymt-danger);outline:3px solid rgb(from var(--ymt-danger) r g b/.5)}:host form section .item .add.before{grid-area:addBefore;justify-self:center}:host form section .item .add.after{grid-area:addAfter;justify-self:center}:host form section .item .index{grid-area:index;display:grid;align-items:center;justify-content:center}:host form section .item .index:after{content:attr(data-index);grid-row:1;grid-column:1;background-color:var(--_sequence-list-line-item-background);font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);font-weight:700;border:var(--_sequence-list-line-width) solid var(--_sequence-list-line-color);border-radius:var(--_sequence-list-line-item-border-radius);line-height:1em;padding:1px .25em;outline:3px solid rgb(from var(--_sequence-list-line-color) r g b/.1)}:host form section .item .index:before{content:\"\";grid-row:1;grid-column:1;height:100%;width:calc(50% - var(--_sequence-list-line-width) / 2);border-inline-end:var(--_sequence-list-line-width) solid var(--_sequence-list-line-color)}:host form section .item .item-form{grid-area:form;background-color:var(--_sequence-list-item-background);border:1px solid var(--_sequence-list-item-border-color);border-radius:var(--_sequence-list-item-border-radius);padding:var(--ymt-spacing-xs);display:grid;column-gap:var(--ymt-spacing-m);row-gap:4px;grid-template-columns:1fr auto;grid-template-rows:repeat(3,auto);grid-template-areas:\"task remove\" \"user user\" \"date date\"}:host form section .item .item-form input{border:1px solid transparent;border-radius:calc(var(--_sequence-list-item-border-radius) / 2);grid-area:task;outline-offset:0;line-height:1em;padding:var(--ymt-spacing-2xs);background-color:transparent;color:var(--ymt-text-color)}:host form section .item .item-form input:focus{border-color:var(--yvc-form-element-focus-border-color);outline:var(--yvc-form-element-focus-outline-with) solid var(--yvc-form-element-focus-outline-color)}:host form section .item .item-form yvc-datepicker{--form-element-border-color: transparent;grid-area:date;padding:0;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:var(--ymt-spacing-2xs);grid-area:remove;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: OrganizationComponent, selector: "yuv-organization", inputs: ["situation", "multiselect", "classifications", "readonly", "excludeMe", "withMetadata"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
122
120
  }
123
121
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SequenceListComponent, decorators: [{
124
122
  type: Component,
125
- args: [{ selector: 'yuv-sequence-list', standalone: true, imports: [
126
- CommonModule,
127
- TranslateModule,
128
- OrganizationComponent,
129
- MatButtonModule,
130
- MatIconModule,
131
- ReactiveFormsModule,
132
- MatTooltipModule
133
- ], providers: [
123
+ args: [{ selector: 'yuv-sequence-list', standalone: true, imports: [CommonModule, TranslateModule, OrganizationComponent, MatButtonModule, MatIconModule, ReactiveFormsModule, MatTooltipModule], providers: [
134
124
  {
135
125
  provide: NG_VALUE_ACCESSOR,
136
126
  useExisting: forwardRef(() => SequenceListComponent),
@@ -143,7 +133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
143
133
  }
144
134
  ], host: {
145
135
  tabindex: '0'
146
- }, 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 mat-icon-button class=\"add before\" type=\"button\" [disabled]=\"maxLengthExceeded\" (click)=\"addItemAt($index)\">\n <mat-icon>add</mat-icon>\n </button>\n <span class=\"index\" [attr.data-index]=\"itemIndex + 1\"></span>\n\n <div class=\"item-form\">\n <button mat-icon-button class=\"remove\" type=\"button\" (click)=\"removeItem($index)\" [disabled]=\"sequenceForm.controls.items.controls.length === 1\">\n <mat-icon>close</mat-icon>\n </button>\n <input [placeholder]=\"'yuv.sequence-list.form.task' | translate\" [maxLength]=\"128\" formControlName=\"title\" />\n <yuv-organization [matTooltip]=\"'yuv.sequence-list.form.nextAssignee' | translate\" [withMetadata]=\"true\" formControlName=\"nextAssignee\">\n </yuv-organization>\n </div>\n @if ($last) {\n <button mat-icon-button class=\"add after\" type=\"button\" [disabled]=\"maxLengthExceeded\" (click)=\"addItem()\">\n <mat-icon>add</mat-icon>\n </button>\n }\n </div>\n }\n </section>\n</form>\n", styles: [":host{--_sequence-list-item-background: var(--sequence-list-item-background, var(--ymt-surface-panel));--_sequence-list-item-border-color: var(--sequence-list-item-border-color, var(--ymt-outline-variant));--_sequence-list-item-border-radius: var(--sequence-list-item-border-radius, var(--ymt-spacing-xs));--_sequence-list-line-color: var(--sequence-list-line-color, var(--ymt-text-color-subtle));--_sequence-list-line-width: var(--sequence-list-line-width, 2px);--_sequence-list-line-item-background: var(--sequence-list-line-item-background, var(--ymt-surface-panel));--_sequence-list-line-item-border-radius: var(--sequence-list-line-item-border-radius, .25em)}:host form section{margin-inline-end:4px}:host form section button.add{--icon-size: 18px;border-radius:var(--_sequence-list-line-item-border-radius);padding:0;display:flex;align-items:center;justify-content:center;background-color:var(--_sequence-list-line-item-background);border:var(--_sequence-list-line-width) solid var(--_sequence-list-line-color)}:host form section button.add:focus{outline:2px solid rgb(from var(--ymt-primary) r g b/.5);outline-offset:-2px;border-color:var(--ymt-primary)}:host form section .item{display:grid;grid-template-columns:6ch 1fr;grid-template-rows:auto auto;column-gap:1em;grid-template-areas:\"addBefore .\" \"index form\" \"addAfter .\"}:host form section .item.ng-invalid.ng-dirty .item-form{border-color:var(--ymt-danger);outline:3px solid rgb(from var(--ymt-danger) r g b/.5)}:host form section .item .add.before{grid-area:addBefore;justify-self:center}:host form section .item .add.after{grid-area:addAfter;justify-self:center}:host form section .item .index{grid-area:index;display:grid;align-items:center;justify-content:center}:host form section .item .index:after{content:attr(data-index);grid-row:1;grid-column:1;background-color:var(--_sequence-list-line-item-background);font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);font-weight:700;border:var(--_sequence-list-line-width) solid var(--_sequence-list-line-color);border-radius:var(--_sequence-list-line-item-border-radius);line-height:1em;padding:1px .25em;outline:3px solid rgb(from var(--_sequence-list-line-color) r g b/.1)}:host form section .item .index:before{content:\"\";grid-row:1;grid-column:1;height:100%;width:calc(50% - var(--_sequence-list-line-width) / 2);border-inline-end:var(--_sequence-list-line-width) solid var(--_sequence-list-line-color)}:host form section .item .item-form{grid-area:form;background-color:var(--_sequence-list-item-background);border:1px solid var(--_sequence-list-item-border-color);border-radius:var(--_sequence-list-item-border-radius);padding:var(--ymt-spacing-xs);display:grid;column-gap:var(--ymt-spacing-m);row-gap:4px;grid-template-columns:1fr auto;grid-template-rows:repeat(3,auto);grid-template-areas:\"task remove\" \"user user\" \"date date\"}:host form section .item .item-form input{border:1px solid transparent;border-radius:calc(var(--_sequence-list-item-border-radius) / 2);grid-area:task;outline-offset:0;line-height:1em;padding:var(--ymt-spacing-2xs);background-color:transparent;color:var(--ymt-text-color)}:host form section .item .item-form input:focus{border-color:var(--yvc-form-element-focus-border-color);outline:var(--yvc-form-element-focus-outline-with) solid var(--yvc-form-element-focus-outline-color)}:host form section .item .item-form yvc-datepicker{--form-element-border-color: transparent;grid-area:date;padding:0;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:var(--ymt-spacing-2xs);grid-area:remove;padding:0}\n"] }]
136
+ }, template: "<form [formGroup]=\"sequenceForm\">\n <section formArrayName=\"items\">\n @for (item of sequenceForm.controls.items.controls; track item; let itemIndex = $index) {\n <div class=\"item\" [formGroup]=\"item\">\n <button mat-icon-button class=\"add before\" type=\"button\" [disabled]=\"maxLengthExceeded\" (click)=\"addItemAt($index)\">\n <mat-icon>add</mat-icon>\n </button>\n <span class=\"index\" [attr.data-index]=\"itemIndex + 1\"></span>\n\n <div class=\"item-form\">\n <button mat-icon-button class=\"remove\" type=\"button\" (click)=\"removeItem($index)\" [disabled]=\"sequenceForm.controls.items.controls.length === 1\">\n <mat-icon>close</mat-icon>\n </button>\n <input [placeholder]=\"'yuv.sequence-list.form.task' | translate\" [maxLength]=\"128\" formControlName=\"title\" />\n <yuv-organization [matTooltip]=\"'yuv.sequence-list.form.nextAssignee' | translate\" [withMetadata]=\"true\" formControlName=\"nextAssignee\">\n </yuv-organization>\n </div>\n @if ($last) {\n <button mat-icon-button class=\"add after\" type=\"button\" [disabled]=\"maxLengthExceeded\" (click)=\"addItem()\">\n <mat-icon>add</mat-icon>\n </button>\n }\n </div>\n }\n </section>\n</form>\n", styles: [":host{--_sequence-list-item-background: var(--sequence-list-item-background, var(--ymt-surface-panel));--_sequence-list-item-border-color: var(--sequence-list-item-border-color, var(--ymt-outline-variant));--_sequence-list-item-border-radius: var(--sequence-list-item-border-radius, var(--ymt-spacing-xs));--_sequence-list-line-color: var(--sequence-list-line-color, var(--ymt-text-color-subtle));--_sequence-list-line-width: var(--sequence-list-line-width, 2px);--_sequence-list-line-item-background: var(--sequence-list-line-item-background, var(--ymt-surface-panel));--_sequence-list-line-item-border-radius: var(--sequence-list-line-item-border-radius, .25em)}:host form section{margin-inline-end:4px}:host form section button.add{--icon-size: 18px;border-radius:var(--_sequence-list-line-item-border-radius);padding:0;display:flex;align-items:center;justify-content:center;background-color:var(--_sequence-list-line-item-background);border:var(--_sequence-list-line-width) solid var(--_sequence-list-line-color)}:host form section button.add:focus{outline:2px solid rgb(from var(--ymt-primary) r g b/.5);outline-offset:-2px;border-color:var(--ymt-primary)}:host form section .item{display:grid;grid-template-columns:6ch 1fr;grid-template-rows:auto auto;column-gap:1em;grid-template-areas:\"addBefore .\" \"index form\" \"addAfter .\"}:host form section .item.ng-invalid.ng-dirty .item-form{border-color:var(--ymt-danger);outline:3px solid rgb(from var(--ymt-danger) r g b/.5)}:host form section .item .add.before{grid-area:addBefore;justify-self:center}:host form section .item .add.after{grid-area:addAfter;justify-self:center}:host form section .item .index{grid-area:index;display:grid;align-items:center;justify-content:center}:host form section .item .index:after{content:attr(data-index);grid-row:1;grid-column:1;background-color:var(--_sequence-list-line-item-background);font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);font-weight:700;border:var(--_sequence-list-line-width) solid var(--_sequence-list-line-color);border-radius:var(--_sequence-list-line-item-border-radius);line-height:1em;padding:1px .25em;outline:3px solid rgb(from var(--_sequence-list-line-color) r g b/.1)}:host form section .item .index:before{content:\"\";grid-row:1;grid-column:1;height:100%;width:calc(50% - var(--_sequence-list-line-width) / 2);border-inline-end:var(--_sequence-list-line-width) solid var(--_sequence-list-line-color)}:host form section .item .item-form{grid-area:form;background-color:var(--_sequence-list-item-background);border:1px solid var(--_sequence-list-item-border-color);border-radius:var(--_sequence-list-item-border-radius);padding:var(--ymt-spacing-xs);display:grid;column-gap:var(--ymt-spacing-m);row-gap:4px;grid-template-columns:1fr auto;grid-template-rows:repeat(3,auto);grid-template-areas:\"task remove\" \"user user\" \"date date\"}:host form section .item .item-form input{border:1px solid transparent;border-radius:calc(var(--_sequence-list-item-border-radius) / 2);grid-area:task;outline-offset:0;line-height:1em;padding:var(--ymt-spacing-2xs);background-color:transparent;color:var(--ymt-text-color)}:host form section .item .item-form input:focus{border-color:var(--yvc-form-element-focus-border-color);outline:var(--yvc-form-element-focus-outline-with) solid var(--yvc-form-element-focus-outline-color)}:host form section .item .item-form yvc-datepicker{--form-element-border-color: transparent;grid-area:date;padding:0;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:var(--ymt-spacing-2xs);grid-area:remove;padding:0}\n"] }]
147
137
  }], ctorParameters: () => [], propDecorators: { orgComponent: [{
148
138
  type: ViewChild,
149
139
  args: [OrganizationComponent]
@@ -1 +1 @@
1
- {"version":3,"file":"yuuvis-client-framework-sequence-list.mjs","sources":["../../../../../libs/yuuvis/client-framework/sequence-list/src/lib/sequence-list.component.ts","../../../../../libs/yuuvis/client-framework/sequence-list/src/lib/sequence-list.component.html","../../../../../libs/yuuvis/client-framework/sequence-list/src/yuuvis-client-framework-sequence-list.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, ViewChild, forwardRef, inject, input } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n ControlValueAccessor,\n FormArray,\n FormControl,\n FormGroup,\n NG_VALIDATORS,\n NG_VALUE_ACCESSOR,\n NonNullableFormBuilder,\n ReactiveFormsModule,\n ValidationErrors,\n Validator,\n Validators\n} from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { TranslateModule } from '@yuuvis/client-core';\nimport { OrganizationComponent } from '@yuuvis/client-framework/forms';\nimport { SequenceItem, SequenceListAssignee } from './sequence-list.interface';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\ntype SequenceFormItem = FormGroup<{\n title: FormControl<string>;\n nextAssignee: FormControl<SequenceListAssignee | string>;\n expiryDatetime: FormControl<any>;\n}>;\ntype SequenceForm = FormGroup<{\n items: FormArray<SequenceFormItem>;\n}>;\n\n/**\n * Task sequence list.\n */\n@Component({\n selector: 'yuv-sequence-list',\n standalone: true,\n imports: [\n CommonModule,\n TranslateModule,\n OrganizationComponent,\n MatButtonModule,\n MatIconModule,\n ReactiveFormsModule,\n MatTooltipModule\n ],\n templateUrl: './sequence-list.component.html',\n styleUrl: './sequence-list.component.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SequenceListComponent),\n multi: true\n },\n {\n provide: NG_VALIDATORS,\n useExisting: forwardRef(() => SequenceListComponent),\n multi: true\n }\n ],\n host: {\n tabindex: '0'\n }\n})\nexport class SequenceListComponent implements ControlValueAccessor, Validator {\n #fb = inject(NonNullableFormBuilder);\n\n @ViewChild(OrganizationComponent) orgComponent!: OrganizationComponent;\n\n /**\n * Maximum number of sequence items (defaults to 100).\n */\n maxLength = input<number>(100);\n maxLengthExceeded = false;\n\n // dynamic form for sequence items\n sequenceForm: SequenceForm = this.#fb.group({\n items: this.#fb.array<SequenceFormItem>([this.#generateSequenceItem()])\n });\n\n entries: SequenceItem[] = [];\n\n get formItemArray(): FormArray<SequenceFormItem> {\n return this.sequenceForm.controls.items as FormArray<SequenceFormItem>;\n }\n\n constructor() {\n this.sequenceForm.valueChanges.pipe(takeUntilDestroyed()).subscribe(() => {\n this.#propagate();\n });\n }\n\n #generateSequenceItem(sequenceItem?: SequenceItem): SequenceFormItem {\n return this.#fb.group({\n title: [sequenceItem?.title || '', Validators.required],\n nextAssignee: [sequenceItem?.nextAssignee || '', Validators.required],\n expiryDatetime: [sequenceItem?.expiryDatetime || undefined]\n });\n }\n\n addItem() {\n this.sequenceForm.controls.items.push(this.#generateSequenceItem());\n this.#updateState();\n }\n\n addItemAt(idx: number) {\n this.sequenceForm.controls.items.insert(idx, this.#generateSequenceItem());\n this.#updateState();\n }\n\n removeItem(idx: number) {\n this.sequenceForm.controls.items.removeAt(idx);\n this.#updateState();\n }\n\n #updateState() {\n const ml = this.maxLength();\n this.maxLengthExceeded = ml !== undefined && this.formItemArray.length >= ml;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n propagateChange = (_: any) => {};\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n registerOnTouched(): void {}\n\n #propagate() {\n const res: SequenceItem[] = [];\n (this.sequenceForm.value.items || []).forEach((item: any) => {\n const i: SequenceItem = {\n title: item.title,\n nextAssignee: item.nextAssignee\n };\n if (item.expiryDatetime) {\n i.expiryDatetime = item.expiryDatetime;\n }\n res.push(i);\n });\n\n this.propagateChange(res);\n }\n\n writeValue(value: SequenceItem[]): void {\n this.entries = value || [];\n this.formItemArray.clear();\n if (this.entries.length === 0) this.addItem();\n this.entries.forEach((entry) => {\n this.formItemArray.push(this.#generateSequenceItem(entry));\n });\n }\n\n registerOnChange(fn: any): void {\n this.propagateChange = fn;\n }\n\n validate(): ValidationErrors | null {\n const ml = this.maxLength();\n const mlExceeded = ml !== undefined && this.formItemArray.length > ml;\n const valid = this.sequenceForm.valid && !mlExceeded;\n\n return !valid\n ? {\n sequencelist: {\n invalid: this.sequenceForm.invalid,\n maxLengthExceeded: mlExceeded\n }\n }\n : null;\n }\n}\n","<form [formGroup]=\"sequenceForm\">\n <section formArrayName=\"items\">\n @for (item of sequenceForm.controls.items.controls; track itemIndex; let itemIndex = $index) {\n <div class=\"item\" [formGroup]=\"item\">\n <button mat-icon-button class=\"add before\" type=\"button\" [disabled]=\"maxLengthExceeded\" (click)=\"addItemAt($index)\">\n <mat-icon>add</mat-icon>\n </button>\n <span class=\"index\" [attr.data-index]=\"itemIndex + 1\"></span>\n\n <div class=\"item-form\">\n <button mat-icon-button class=\"remove\" type=\"button\" (click)=\"removeItem($index)\" [disabled]=\"sequenceForm.controls.items.controls.length === 1\">\n <mat-icon>close</mat-icon>\n </button>\n <input [placeholder]=\"'yuv.sequence-list.form.task' | translate\" [maxLength]=\"128\" formControlName=\"title\" />\n <yuv-organization [matTooltip]=\"'yuv.sequence-list.form.nextAssignee' | translate\" [withMetadata]=\"true\" formControlName=\"nextAssignee\">\n </yuv-organization>\n </div>\n @if ($last) {\n <button mat-icon-button class=\"add after\" type=\"button\" [disabled]=\"maxLengthExceeded\" (click)=\"addItem()\">\n <mat-icon>add</mat-icon>\n </button>\n }\n </div>\n }\n </section>\n</form>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"yuuvis-client-framework-sequence-list.mjs","sources":["../../../../../libs/yuuvis/client-framework/sequence-list/src/lib/sequence-list.component.ts","../../../../../libs/yuuvis/client-framework/sequence-list/src/lib/sequence-list.component.html","../../../../../libs/yuuvis/client-framework/sequence-list/src/yuuvis-client-framework-sequence-list.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, ViewChild, forwardRef, inject, input } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n ControlValueAccessor,\n FormArray,\n FormControl,\n FormGroup,\n NG_VALIDATORS,\n NG_VALUE_ACCESSOR,\n NonNullableFormBuilder,\n ReactiveFormsModule,\n ValidationErrors,\n Validator,\n Validators\n} from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { TranslateModule } from '@yuuvis/client-core';\nimport { OrganizationComponent } from '@yuuvis/client-framework/forms';\nimport { SequenceItem, SequenceListAssignee } from './sequence-list.interface';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { DASHLET_MESSAGE_EVENTS } from '@yuuvis/media-viewer';\n\ntype SequenceFormItem = FormGroup<{\n title: FormControl<string>;\n nextAssignee: FormControl<SequenceListAssignee | string>;\n expiryDatetime: FormControl<any>;\n}>;\ntype SequenceForm = FormGroup<{\n items: FormArray<SequenceFormItem>;\n}>;\n\n/**\n * Task sequence list.\n */\n@Component({\n selector: 'yuv-sequence-list',\n standalone: true,\n imports: [CommonModule, TranslateModule, OrganizationComponent, MatButtonModule, MatIconModule, ReactiveFormsModule, MatTooltipModule],\n templateUrl: './sequence-list.component.html',\n styleUrl: './sequence-list.component.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SequenceListComponent),\n multi: true\n },\n {\n provide: NG_VALIDATORS,\n useExisting: forwardRef(() => SequenceListComponent),\n multi: true\n }\n ],\n host: {\n tabindex: '0'\n }\n})\nexport class SequenceListComponent implements ControlValueAccessor, Validator {\n #fb = inject(NonNullableFormBuilder);\n\n @ViewChild(OrganizationComponent) orgComponent!: OrganizationComponent;\n\n /**\n * Maximum number of sequence items (defaults to 100).\n */\n maxLength = input<number>(100);\n maxLengthExceeded = false;\n\n // dynamic form for sequence items\n sequenceForm: SequenceForm = this.#fb.group({\n items: this.#fb.array<SequenceFormItem>([this.#generateSequenceItem()])\n });\n\n entries: SequenceItem[] = [];\n\n get formItemArray(): FormArray<SequenceFormItem> {\n return this.sequenceForm.controls.items as FormArray<SequenceFormItem>;\n }\n\n constructor() {\n this.sequenceForm.valueChanges.pipe(takeUntilDestroyed()).subscribe(() => {\n this.#propagate();\n });\n }\n\n #generateSequenceItem(sequenceItem?: SequenceItem): SequenceFormItem {\n return this.#fb.group({\n title: [sequenceItem?.title || '', Validators.required],\n nextAssignee: [sequenceItem?.nextAssignee || '', Validators.required],\n expiryDatetime: [sequenceItem?.expiryDatetime || undefined]\n });\n }\n\n addItem() {\n this.sequenceForm.controls.items.push(this.#generateSequenceItem());\n this.#updateState();\n }\n\n addItemAt(idx: number) {\n this.sequenceForm.controls.items.insert(idx, this.#generateSequenceItem());\n this.#updateState();\n }\n\n removeItem(idx: number) {\n this.sequenceForm.controls.items.removeAt(idx);\n this.#updateState();\n }\n\n #updateState() {\n const ml = this.maxLength();\n this.maxLengthExceeded = ml !== undefined && this.formItemArray.length >= ml;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n propagateChange = (_: any) => {};\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n registerOnTouched(): void {}\n\n #propagate() {\n const res: SequenceItem[] = [];\n (this.sequenceForm.value.items || []).forEach((item: any) => {\n const i: SequenceItem = {\n title: item.title,\n nextAssignee: item.nextAssignee\n };\n if (item.expiryDatetime) {\n i.expiryDatetime = item.expiryDatetime;\n }\n res.push(i);\n });\n\n this.propagateChange(res);\n }\n\n writeValue(value: SequenceItem[]): void {\n this.entries = value || [];\n this.formItemArray.clear();\n if (this.entries.length === 0) this.addItem();\n this.entries.forEach((entry) => {\n this.formItemArray.push(this.#generateSequenceItem(entry));\n });\n }\n\n registerOnChange(fn: any): void {\n this.propagateChange = fn;\n }\n\n validate(): ValidationErrors | null {\n const ml = this.maxLength();\n const mlExceeded = ml !== undefined && this.formItemArray.length > ml;\n const valid = this.sequenceForm.valid && !mlExceeded;\n\n return !valid\n ? {\n sequencelist: {\n invalid: this.sequenceForm.invalid,\n maxLengthExceeded: mlExceeded\n }\n }\n : null;\n }\n}\n","<form [formGroup]=\"sequenceForm\">\n <section formArrayName=\"items\">\n @for (item of sequenceForm.controls.items.controls; track item; let itemIndex = $index) {\n <div class=\"item\" [formGroup]=\"item\">\n <button mat-icon-button class=\"add before\" type=\"button\" [disabled]=\"maxLengthExceeded\" (click)=\"addItemAt($index)\">\n <mat-icon>add</mat-icon>\n </button>\n <span class=\"index\" [attr.data-index]=\"itemIndex + 1\"></span>\n\n <div class=\"item-form\">\n <button mat-icon-button class=\"remove\" type=\"button\" (click)=\"removeItem($index)\" [disabled]=\"sequenceForm.controls.items.controls.length === 1\">\n <mat-icon>close</mat-icon>\n </button>\n <input [placeholder]=\"'yuv.sequence-list.form.task' | translate\" [maxLength]=\"128\" formControlName=\"title\" />\n <yuv-organization [matTooltip]=\"'yuv.sequence-list.form.nextAssignee' | translate\" [withMetadata]=\"true\" formControlName=\"nextAssignee\">\n </yuv-organization>\n </div>\n @if ($last) {\n <button mat-icon-button class=\"add after\" type=\"button\" [disabled]=\"maxLengthExceeded\" (click)=\"addItem()\">\n <mat-icon>add</mat-icon>\n </button>\n }\n </div>\n }\n </section>\n</form>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
@@ -94,7 +94,7 @@ class WidgetGridRegistry {
94
94
  return {
95
95
  id: 'noop',
96
96
  label: this.translate.instant('yuv.widget-grid.widget.noop.label'),
97
- widgetComponent: NoopComponent,
97
+ widgetComponent: NoopComponent
98
98
  };
99
99
  }
100
100
  /**
@@ -135,7 +135,7 @@ class WidgetGridRegistry {
135
135
  registerGridWidget(widget, buckets) {
136
136
  const existingWidget = this.registeredWidgets.find((w) => w.id === widget.id);
137
137
  if (!existingWidget)
138
- this.registeredWidgets.push(this.#translateLabel(widget));
138
+ this.registeredWidgets.push(widget);
139
139
  if (buckets?.length) {
140
140
  buckets.forEach((b) => {
141
141
  this._addToBucket(b, widget.id);
@@ -151,15 +151,14 @@ class WidgetGridRegistry {
151
151
  registerGridWidgets(widgets, buckets) {
152
152
  const alreadyRegisteredWidgetNames = this.registeredWidgets.map((w) => w.id);
153
153
  const widgetsToRegister = widgets.filter((w) => !alreadyRegisteredWidgetNames.includes(w.id));
154
- this.registeredWidgets = [...this.registeredWidgets, ...widgetsToRegister.map(w => this.#translateLabel(w))];
154
+ this.registeredWidgets = [...this.registeredWidgets, ...widgetsToRegister.map((w) => this.#translateLabel(w))];
155
155
  if (buckets?.length) {
156
156
  buckets.forEach((b) => widgets.forEach((w) => this._addToBucket(b, w.id)));
157
157
  }
158
158
  }
159
159
  #translateLabel(widget) {
160
160
  const translatedLabel = this.translate.instant(widget.label);
161
- return { ...widget, label: (translatedLabel && !translatedLabel.startsWith('!missing')) ? translatedLabel : widget.label
162
- };
161
+ return { ...widget, label: translatedLabel && !translatedLabel.startsWith('!missing') ? translatedLabel : widget.label };
163
162
  }
164
163
  _addToBucket(bucket, widgetName) {
165
164
  if (!this.widgetBuckets[bucket])
@@ -200,13 +199,10 @@ class WidgetGridRegistry {
200
199
  bucketWidgetNames[widgetName] = 0;
201
200
  }));
202
201
  const widgetNames = Object.keys(bucketWidgetNames);
203
- return this.registeredWidgets.filter((w) => widgetNames.includes(w.id));
202
+ return this.registeredWidgets.filter((w) => widgetNames.includes(w.id)).map((w) => this.#translateLabel(w));
204
203
  }
205
204
  else
206
- return this.registeredWidgets;
207
- // return this.registeredWidgets.filter((w: GridWidget) => {
208
- // return !buckets || buckets.includes(w.name)
209
- // });
205
+ return this.registeredWidgets.map((w) => this.#translateLabel(w));
210
206
  }
211
207
  _wildcardMatch(text, pattern) {
212
208
  const regexPattern = new RegExp('^' + pattern.replace(/\?/g, '.').replace(/\*/g, '.*') + '$');
@@ -218,7 +214,7 @@ class WidgetGridRegistry {
218
214
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WidgetGridRegistry, decorators: [{
219
215
  type: Injectable,
220
216
  args: [{
221
- providedIn: 'root',
217
+ providedIn: 'root'
222
218
  }]
223
219
  }] });
224
220