@yuuvis/client-framework 2.13.0 → 2.15.0

package/fesm2022/yuuvis-client-framework-forms.mjs

@@ -22,7 +22,7 @@ import { RendererDirective } from '@yuuvis/client-framework/renderer';
 import { YmtButtonDirective, YmtIconButtonDirective } from '@yuuvis/material';
 import { map, timer, take, of, forkJoin } from 'rxjs';
 import { MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
-import { FormTranslateService, DialogComponent, AbstractMatFormField, injectNgControl } from '@yuuvis/client-framework/common';
+import { FormTranslateService, DialogComponent, AbstractMatFormField, injectNgControl, ScrollButtonsComponent } from '@yuuvis/client-framework/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatInputModule } from '@angular/material/input';
@@ -1334,7 +1334,9 @@ class OrganizationSetComponent extends AbstractMatFormField {
             const types = this.types();
             if (c?.length) {
                 const classifications = this.#system.getClassifications(c);
-                return classifications.has(Classification.STRING_ORGANIZATION_SET) ? classifications.get(Classification.STRING_ORGANIZATION_SET).options : [];
+                return classifications.has(Classification.STRING_ORGANIZATION_SET)
+                    ? classifications.get(Classification.STRING_ORGANIZATION_SET).options
+                    : [];
             }
             else if (types) {
                 return types;
@@ -1354,7 +1356,11 @@ class OrganizationSetComponent extends AbstractMatFormField {
     #dRef;
     #targetTypes;
     writeValue(value) {
-        const val = Array.isArray(value) ? value.map((v) => (typeof v === 'string' ? JSON.parse(v) : v)) : value ? [JSON.parse(value)] : [];
+        const val = Array.isArray(value)
+            ? value.map((v) => (typeof v === 'string' ? JSON.parse(v) : v))
+            : value
+                ? [JSON.parse(value)]
+                : [];
         this.innerValue = val;
         this.value = val.map((v) => JSON.stringify(v));
         if (!this.multiselect) {
@@ -1391,8 +1397,6 @@ class OrganizationSetComponent extends AbstractMatFormField {
     }
     autocompleteFn(query) {
         if (query.length >= this.autocompleteMinLength()) {
-            console.log(this.#targetTypes());
-            console.log(query);
             this.#idmService.queryOrganizationEntity(query, this.#targetTypes()).subscribe({
                 next: (entries) => {
                     this.autocompleteRes = entries
@@ -1436,7 +1440,15 @@ class OrganizationSetComponent extends AbstractMatFormField {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: OrganizationSetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-organization-set', imports: [CommonModule, FormsModule, YuvAutocompleteModule, MatTooltipModule, MatIconModule, ReactiveFormsModule, TranslateModule$1], providers: [{ provide: MatFormFieldControl, useExisting: OrganizationSetComponent }], template: "<yuv-autocomplete\n  [busy]=\"busy()\"\n  [formControl]=\"acFormControl\"\n  #autocomplete\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly()\"\n  [autocompleteValues]=\"autocompleteRes\"\n  [forceSelection]=\"true\"\n  (autocompleteFnc)=\"autocompleteFn($event)\"\n  [multiple]=\"true\"\n  [maxItems]=\"multiselect() ? -1 : 1\"\n>\n  <!-- template for item inside the dropdown -->\n  <ng-template #optionTemplate let-item>\n    <span class=\"chip\">{{ item.value.title }}</span>\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    <span class=\"chip\">\n      {{ item.value.title || '...' }}\n    </span>\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.organization-set.classify.icon.title' | translate\">\n  {{ multiselect() ? 'group' : 'person' }}\n</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host yuv-autocomplete{flex:1}:host mat-icon{color:var(--ymt-text-color-subtle)}\n"] }]
+            args: [{ selector: 'yuv-organization-set', imports: [
+                        CommonModule,
+                        FormsModule,
+                        YuvAutocompleteModule,
+                        MatTooltipModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        TranslateModule$1
+                    ], providers: [{ provide: MatFormFieldControl, useExisting: OrganizationSetComponent }], template: "<yuv-autocomplete\n  [busy]=\"busy()\"\n  [formControl]=\"acFormControl\"\n  #autocomplete\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly()\"\n  [autocompleteValues]=\"autocompleteRes\"\n  [forceSelection]=\"true\"\n  (autocompleteFnc)=\"autocompleteFn($event)\"\n  [multiple]=\"true\"\n  [maxItems]=\"multiselect() ? -1 : 1\"\n>\n  <!-- template for item inside the dropdown -->\n  <ng-template #optionTemplate let-item>\n    <span class=\"chip\">{{ item.value.title }}</span>\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    <span class=\"chip\">\n      {{ item.value.title || '...' }}\n    </span>\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.organization-set.classify.icon.title' | translate\">\n  {{ multiselect() ? 'group' : 'person' }}\n</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host yuv-autocomplete{flex:1}:host mat-icon{color:var(--ymt-text-color-subtle)}\n"] }]
         }] });
 
 class DateRangePickerComponent {
@@ -1986,13 +1998,13 @@ class StringComponent extends AbstractMatFormField {
         super.onNgOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: StringComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: StringComponent, isStandalone: true, selector: "yuv-string", inputs: { multiselect: "multiselect", rows: "rows", readonly: "readonly", autofocus: "autofocus", classifications: "classifications", situation: "situation", regex: "regex", minLength: "minLength", maxLength: "maxLength" }, host: { properties: { "class.readonly": "readonly" } }, providers: [{ provide: MatFormFieldControl, useExisting: StringComponent }], usesInheritance: true, ngImport: i0, template: "@if ((!rows || rows <= 1) && !multiselect) {\n  <input matInput type=\"text\" (blur)=\"onBlur()\" [readonly]=\"readonly\" [formControl]=\"fc\" />\n} @else if ((!rows || rows <= 1) && multiselect) {\n  <!-- single line input with multiselect-->\n  <mat-chip-grid #chipGrid [formControl]=\"fc\">\n    @for (v of value; track v) {\n      <mat-chip-row (removed)=\"chipsRemove(v)\" [editable]=\"true\" (edited)=\"chipsEdit(v, $event)\">\n        {{ v }}\n        <button matChipRemove>\n          <mat-icon>cancel</mat-icon>\n        </button>\n      </mat-chip-row>\n    }\n    <input\n      [matChipInputFor]=\"chipGrid\"\n      [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n      [matChipInputAddOnBlur]=\"true\"\n      (matChipInputTokenEnd)=\"chipsAdd($event)\"\n    />\n  </mat-chip-grid>\n} @else if (rows && rows > 1) {\n  <!-- multi line text inputs -->\n  <textarea matInput class=\"input-textarea\" (blur)=\"onBlur()\" [rows]=\"rows\" [readonly]=\"readonly\" [formControl]=\"fc\"></textarea>\n}\n\n@if (classify) {\n  <div class=\"classify\">\n    @if (value && !validationErrors.length && (classify.hrefPrefix !== '' || !multiselect || value.length <= 1)) {\n      <a href=\"{{ classify.hrefPrefix + formatedValue }}\">\n        <mat-icon>{{ classify.icon }}</mat-icon>\n      </a>\n    } @else {\n      <mat-icon>{{ classify.icon }}</mat-icon>\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-flow:row nowrap;flex:1;align-items:center}:host:has(mat-chip-grid){overflow-x:auto;scrollbar-width:none}:host mat-chip-grid{flex:1}:host textarea.input-textarea{width:100%;resize:none;background-color:transparent;border:0;outline:0}:host input{display:flex;flex-wrap:wrap;align-items:center;width:100%;border:0;outline:0;background:transparent}:host.readonly .classify{pointer-events:all}:host .classify a{color:var(--ymt-text-color-subtle);text-decoration:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: StringComponent, isStandalone: true, selector: "yuv-string", inputs: { multiselect: "multiselect", rows: "rows", readonly: "readonly", autofocus: "autofocus", classifications: "classifications", situation: "situation", regex: "regex", minLength: "minLength", maxLength: "maxLength" }, host: { properties: { "class.readonly": "readonly" } }, providers: [{ provide: MatFormFieldControl, useExisting: StringComponent }], usesInheritance: true, ngImport: i0, template: "@if ((!rows || rows <= 1) && !multiselect) {\n  <input matInput type=\"text\" (blur)=\"onBlur()\" [readonly]=\"readonly\" [formControl]=\"fc\" />\n} @else if ((!rows || rows <= 1) && multiselect) {\n  <!-- single line input with multiselect-->\n  <yuv-scroll-buttons>\n    <mat-chip-grid #chipGrid [formControl]=\"fc\">\n      @for (v of value; track v) {\n        <mat-chip-row (removed)=\"chipsRemove(v)\" [editable]=\"true\" (edited)=\"chipsEdit(v, $event)\">\n          {{ v }}\n          <button matChipRemove>\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </mat-chip-row>\n      }\n      <input\n        [matChipInputFor]=\"chipGrid\"\n        [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n        [matChipInputAddOnBlur]=\"true\"\n        (matChipInputTokenEnd)=\"chipsAdd($event)\"\n      />\n    </mat-chip-grid>\n  </yuv-scroll-buttons>\n} @else if (rows && rows > 1) {\n  <!-- multi line text inputs -->\n  <textarea matInput class=\"input-textarea\" (blur)=\"onBlur()\" [rows]=\"rows\" [readonly]=\"readonly\" [formControl]=\"fc\"></textarea>\n}\n\n@if (classify) {\n  <div class=\"classify\">\n    @if (value && !validationErrors.length && (classify.hrefPrefix !== '' || !multiselect || value.length <= 1)) {\n      <a href=\"{{ classify.hrefPrefix + formatedValue }}\">\n        <mat-icon>{{ classify.icon }}</mat-icon>\n      </a>\n    } @else {\n      <mat-icon>{{ classify.icon }}</mat-icon>\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-flow:row nowrap;flex:1;align-items:center}:host:has(mat-chip-grid){min-width:0}:host mat-chip-grid{flex:1}:host textarea.input-textarea{width:100%;resize:none;background-color:transparent;border:0;outline:0}:host input{display:flex;flex-wrap:wrap;align-items:center;width:100%;border:0;outline:0;background:transparent}:host.readonly .classify{pointer-events:all}:host .classify a{color:var(--ymt-text-color-subtle);text-decoration:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ScrollButtonsComponent, selector: "yuv-scroll-buttons", inputs: ["scrollAmount"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: StringComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-string', standalone: true, imports: [CommonModule, MatChipsModule, MatIconModule, ReactiveFormsModule, FormsModule], providers: [{ provide: MatFormFieldControl, useExisting: StringComponent }], host: {
+            args: [{ selector: 'yuv-string', standalone: true, imports: [CommonModule, MatChipsModule, MatIconModule, ReactiveFormsModule, FormsModule, ScrollButtonsComponent], providers: [{ provide: MatFormFieldControl, useExisting: StringComponent }], host: {
                         '[class.readonly]': 'readonly'
-                    }, template: "@if ((!rows || rows <= 1) && !multiselect) {\n  <input matInput type=\"text\" (blur)=\"onBlur()\" [readonly]=\"readonly\" [formControl]=\"fc\" />\n} @else if ((!rows || rows <= 1) && multiselect) {\n  <!-- single line input with multiselect-->\n  <mat-chip-grid #chipGrid [formControl]=\"fc\">\n    @for (v of value; track v) {\n      <mat-chip-row (removed)=\"chipsRemove(v)\" [editable]=\"true\" (edited)=\"chipsEdit(v, $event)\">\n        {{ v }}\n        <button matChipRemove>\n          <mat-icon>cancel</mat-icon>\n        </button>\n      </mat-chip-row>\n    }\n    <input\n      [matChipInputFor]=\"chipGrid\"\n      [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n      [matChipInputAddOnBlur]=\"true\"\n      (matChipInputTokenEnd)=\"chipsAdd($event)\"\n    />\n  </mat-chip-grid>\n} @else if (rows && rows > 1) {\n  <!-- multi line text inputs -->\n  <textarea matInput class=\"input-textarea\" (blur)=\"onBlur()\" [rows]=\"rows\" [readonly]=\"readonly\" [formControl]=\"fc\"></textarea>\n}\n\n@if (classify) {\n  <div class=\"classify\">\n    @if (value && !validationErrors.length && (classify.hrefPrefix !== '' || !multiselect || value.length <= 1)) {\n      <a href=\"{{ classify.hrefPrefix + formatedValue }}\">\n        <mat-icon>{{ classify.icon }}</mat-icon>\n      </a>\n    } @else {\n      <mat-icon>{{ classify.icon }}</mat-icon>\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-flow:row nowrap;flex:1;align-items:center}:host:has(mat-chip-grid){overflow-x:auto;scrollbar-width:none}:host mat-chip-grid{flex:1}:host textarea.input-textarea{width:100%;resize:none;background-color:transparent;border:0;outline:0}:host input{display:flex;flex-wrap:wrap;align-items:center;width:100%;border:0;outline:0;background:transparent}:host.readonly .classify{pointer-events:all}:host .classify a{color:var(--ymt-text-color-subtle);text-decoration:none}\n"] }]
+                    }, template: "@if ((!rows || rows <= 1) && !multiselect) {\n  <input matInput type=\"text\" (blur)=\"onBlur()\" [readonly]=\"readonly\" [formControl]=\"fc\" />\n} @else if ((!rows || rows <= 1) && multiselect) {\n  <!-- single line input with multiselect-->\n  <yuv-scroll-buttons>\n    <mat-chip-grid #chipGrid [formControl]=\"fc\">\n      @for (v of value; track v) {\n        <mat-chip-row (removed)=\"chipsRemove(v)\" [editable]=\"true\" (edited)=\"chipsEdit(v, $event)\">\n          {{ v }}\n          <button matChipRemove>\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </mat-chip-row>\n      }\n      <input\n        [matChipInputFor]=\"chipGrid\"\n        [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n        [matChipInputAddOnBlur]=\"true\"\n        (matChipInputTokenEnd)=\"chipsAdd($event)\"\n      />\n    </mat-chip-grid>\n  </yuv-scroll-buttons>\n} @else if (rows && rows > 1) {\n  <!-- multi line text inputs -->\n  <textarea matInput class=\"input-textarea\" (blur)=\"onBlur()\" [rows]=\"rows\" [readonly]=\"readonly\" [formControl]=\"fc\"></textarea>\n}\n\n@if (classify) {\n  <div class=\"classify\">\n    @if (value && !validationErrors.length && (classify.hrefPrefix !== '' || !multiselect || value.length <= 1)) {\n      <a href=\"{{ classify.hrefPrefix + formatedValue }}\">\n        <mat-icon>{{ classify.icon }}</mat-icon>\n      </a>\n    } @else {\n      <mat-icon>{{ classify.icon }}</mat-icon>\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-flow:row nowrap;flex:1;align-items:center}:host:has(mat-chip-grid){min-width:0}:host mat-chip-grid{flex:1}:host textarea.input-textarea{width:100%;resize:none;background-color:transparent;border:0;outline:0}:host input{display:flex;flex-wrap:wrap;align-items:center;width:100%;border:0;outline:0;background:transparent}:host.readonly .classify{pointer-events:all}:host .classify a{color:var(--ymt-text-color-subtle);text-decoration:none}\n"] }]
         }], propDecorators: { multiselect: [{
                 type: Input
             }], rows: [{