@sotoa-ui/dynamic-form 0.0.8 → 0.0.10
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.
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, inject, DestroyRef, Component, forwardRef, ChangeDetectorRef, ViewContainerRef, EnvironmentInjector, input, EventEmitter, Output, Optional, Host, SkipSelf, Directive, ViewChild,
|
|
2
|
+
import { Injectable, inject, DestroyRef, Component, forwardRef, ChangeDetectorRef, ViewContainerRef, EnvironmentInjector, input, EventEmitter, Output, Optional, Host, SkipSelf, Directive, computed, output, ViewChild, model, signal, effect } from '@angular/core';
|
|
3
3
|
import { distinctUntilChanged, isObservable, take } from 'rxjs';
|
|
4
4
|
import * as i1 from '@angular/forms';
|
|
5
|
-
import { FormBuilder, Validators, ReactiveFormsModule, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
5
|
+
import { FormBuilder, Validators, ReactiveFormsModule, NgControl, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
6
6
|
import * as _ from 'lodash-es';
|
|
7
7
|
import { isArray } from 'lodash-es';
|
|
8
8
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
@@ -16,9 +16,9 @@ import * as i3$1 from '@angular/material/icon';
|
|
|
16
16
|
import { MatIconModule, MatIcon } from '@angular/material/icon';
|
|
17
17
|
import * as i3 from '@angular/material/input';
|
|
18
18
|
import { MatInputModule } from '@angular/material/input';
|
|
19
|
-
import * as
|
|
19
|
+
import * as i4 from '@angular/material/button';
|
|
20
20
|
import { MatButtonModule, MatButton, MatIconButton, MatFabButton, MatMiniFabButton } from '@angular/material/button';
|
|
21
|
-
import * as i1$
|
|
21
|
+
import * as i1$1 from '@angular/material/expansion';
|
|
22
22
|
import { MatAccordion, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, MatExpansionModule } from '@angular/material/expansion';
|
|
23
23
|
import { MatCardModule } from '@angular/material/card';
|
|
24
24
|
import * as i2$2 from '@angular/material/radio';
|
|
@@ -28,10 +28,20 @@ import * as i3$2 from '@angular/material/select';
|
|
|
28
28
|
import { MatSelectModule } from '@angular/material/select';
|
|
29
29
|
import * as i2$3 from '@angular/material/slide-toggle';
|
|
30
30
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
31
|
+
import * as i1$2 from '@angular/material/dialog';
|
|
32
|
+
import { MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogRef } from '@angular/material/dialog';
|
|
31
33
|
import { MatBadge } from '@angular/material/badge';
|
|
32
34
|
import { MatMenuItem } from '@angular/material/menu';
|
|
33
|
-
import * as
|
|
34
|
-
import {
|
|
35
|
+
import * as i5 from '@angular/material/chips';
|
|
36
|
+
import { MatChipsModule } from '@angular/material/chips';
|
|
37
|
+
import * as i6 from '@angular/material/autocomplete';
|
|
38
|
+
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
39
|
+
import { LiveAnnouncer } from '@angular/cdk/a11y';
|
|
40
|
+
import { ENTER, COMMA } from '@angular/cdk/keycodes';
|
|
41
|
+
import * as i3$3 from '@angular/material/datepicker';
|
|
42
|
+
import { MatDatepickerIntl, MatDatepickerModule } from '@angular/material/datepicker';
|
|
43
|
+
import { DateAdapter } from '@angular/material/core';
|
|
44
|
+
import { provideLuxonDateAdapter } from '@angular/material-luxon-adapter';
|
|
35
45
|
|
|
36
46
|
class ConditionsService {
|
|
37
47
|
constructor() {
|
|
@@ -381,6 +391,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
381
391
|
args: [{ standalone: true, template: '' }]
|
|
382
392
|
}] });
|
|
383
393
|
|
|
394
|
+
class AcCustomComponentField {
|
|
395
|
+
field;
|
|
396
|
+
group;
|
|
397
|
+
registerOnChange(fn) {
|
|
398
|
+
}
|
|
399
|
+
registerOnTouched(fn) {
|
|
400
|
+
}
|
|
401
|
+
writeValue(obj) {
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
|
|
384
405
|
/**
|
|
385
406
|
* Liste des valeurs possible pour l'attribut autocomplete
|
|
386
407
|
* (https://accessibilite.numerique.gouv.fr/methode/glossaire/#liste-des-valeurs-possibles-pour-l-attribut-autocomplete)
|
|
@@ -565,7 +586,7 @@ class MatFieldInputComponent extends AbstractControlFieldComponent {
|
|
|
565
586
|
}
|
|
566
587
|
}
|
|
567
588
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
568
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldInputComponent, isStandalone: true, selector: "sot-mat-field-input", usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"sot-formfield sot-formfield-input\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\"\r\n>\r\n <mat-form-field>\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n <input matInput\r\n [id]=\"uuid\"\r\n [formControlName]=\"field.name\"\r\n [required]=\"!!required\"\r\n [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n [type]=\"inputType\"\r\n [readonly]=\"field.readonly\"\r\n [maxlength]=\"field.maxlength ?? 100000000\"\r\n >\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (prefix.action) {\r\n <button type=\"button\"\r\n [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n (click)=\"buttonAction(prefix)\"\r\n >{{prefix.label}}</button>\r\n } @else {\r\n <span [innerHTML]=\"prefix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\" matSuffix>\r\n @if (suffix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n (click)=\"buttonAction(suffix)\"\r\n >{{suffix.label}}</button>\r\n } @else {\r\n <span [innerHTML]=\"suffix.label\"></span>\r\n }\r\n </span>\r\n }\r\n\r\n @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n\r\n @if (control && !control.untouched && control.invalid) {\r\n <mat-error>\r\n @for (validation of field.validations; track validation) {\r\n @if (control.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type:
|
|
589
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldInputComponent, isStandalone: true, selector: "sot-mat-field-input", usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"sot-formfield sot-formfield-input\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\"\r\n>\r\n <mat-form-field>\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n <input matInput\r\n [id]=\"uuid\"\r\n [formControlName]=\"field.name\"\r\n [required]=\"!!required\"\r\n [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n [type]=\"inputType\"\r\n [readonly]=\"field.readonly\"\r\n [maxlength]=\"field.maxlength ?? 100000000\"\r\n >\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (prefix.action) {\r\n <button type=\"button\"\r\n [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n (click)=\"buttonAction(prefix)\"\r\n >{{prefix.label}}</button>\r\n } @else {\r\n <span [innerHTML]=\"prefix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\" matSuffix>\r\n @if (suffix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n (click)=\"buttonAction(suffix)\"\r\n >{{suffix.label}}</button>\r\n } @else {\r\n <span [innerHTML]=\"suffix.label\"></span>\r\n }\r\n </span>\r\n }\r\n\r\n @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n\r\n @if (control && !control.untouched && control.invalid) {\r\n <mat-error>\r\n @for (validation of field.validations; track validation) {\r\n @if (control.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
|
|
569
590
|
}
|
|
570
591
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldInputComponent, decorators: [{
|
|
571
592
|
type: Component,
|
|
@@ -628,7 +649,7 @@ class MatArrayComponent extends AbstractControlFieldComponent {
|
|
|
628
649
|
this.ref.detectChanges();
|
|
629
650
|
}
|
|
630
651
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
631
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatArrayComponent, isStandalone: true, selector: "sot-mat-array", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field.className\">\n <fieldset class=\"sot-formfield-wrapper sot-fieldset\">\n @if (field.accordion) {\n <mat-accordion class=\"sot-formfield-array-accordion\" multi>\n <mat-expansion-panel [expanded]=\"field.opened\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n </mat-panel-title>\n </mat-expansion-panel-header>\n @if (field.description) {\n <p [innerHTML]=\"field.description\"></p>\n }\n <div *ngTemplateOutlet=\"groupFields\"></div>\n </mat-expansion-panel>\n </mat-accordion>\n } @else {\n <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n @if (field.description) {\n <p [innerHTML]=\"field.description\"></p>\n }\n <div class=\"sot-formfield-array-content\">\n <div *ngTemplateOutlet=\"groupFields\"></div>\n </div>\n }\n </fieldset>\n</div>\n\n<ng-template #groupFields>\n <div class=\"sot-formfield-array\" [formGroup]=\"group\">\n <div [formArrayName]=\"field.name\">\n @for (inst of field.instances; track inst; let i = $index) {\n <fieldset class=\"sot-formfield-array-element\"\n [ngClass]=\"field.elementClassName\">\n <legend class=\"sot-formfield-array-element-label\">\n {{ field.itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n </legend>\n <div class=\"sot-formfield-array-element-content\"\n [ngClass]=\"field.elementContentClassName\">\n @for (f of inst.fields; track f.name + f.type) {\n <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n <ng-container matDynamicField\n [type]=\"f.type\"\n [path]=\"path + '.' + f.name\"\n [field]=\"f\"\n [group]=\"inst.group\"\n [instancePath]=\"path + '[' + inst.number + ']'\"\n ></ng-container>\n </div>\n }\n </div>\n <div class=\"sot-formfield-array-element-action\">\n @if (!field.disabled && (!field.minNbRow || field.minNbRow < array.controls.length)) {\n <button type=\"button\" mat-raised-button (click)=\"deleteItem(i, inst)\">\n @if (field.deleteButton && field.deleteButton.matIcon) {\n <mat-icon [title]=\"field.deleteButton!.title ? field.deleteButton!.title : ''\">\n {{ field.deleteButton!.matIcon }}\n </mat-icon>\n }\n {{ field.deleteButton ? field.deleteButton!.label : 'Supprimer' }}\n </button>\n }\n </div>\n </fieldset>\n }\n @if (!field.disabled && (!field.maxNbRow || field.maxNbRow > array.controls.length)) {\n <div class=\"sot-formfield-array-add-button\">\n <button mat-raised-button\n color=\"primary\"\n type=\"button\"\n (click)=\"addItem()\"\n >\n @if (field.addButton && field.addButton.matIcon) {\n <mat-icon [title]=\"field.addButton!.title ? field.addButton!.title : ''\">\n {{ field.addButton!.matIcon }}\n </mat-icon>\n }\n {{ field.addButton ? field.addButton.label : 'Ajouter' }}\n </button>\n </div>\n }\n <mat-error>\n @for (validation of field.validations; track validation) {\n @if (array && !array.untouched && array.hasError(validation.name)) {\n {{ validation.message }}\n }\n }\n </mat-error>\n </div>\n </div>\n</ng-template>\n", styles: ["fieldset.dynamic-field-array{border:none;padding:0;margin:0}.dynamic-field-array-add-button{padding:2rem 0}.dynamic-field-array{margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => AcDynamicFieldDirective), selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatExpansionModule) }, { kind: "directive", type: i0.forwardRef(() => i1$
|
|
652
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatArrayComponent, isStandalone: true, selector: "sot-mat-array", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field.className\">\n <fieldset class=\"sot-formfield-wrapper sot-fieldset\">\n @if (field.accordion) {\n <mat-accordion class=\"sot-formfield-array-accordion\" multi>\n <mat-expansion-panel [expanded]=\"field.opened\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n </mat-panel-title>\n </mat-expansion-panel-header>\n @if (field.description) {\n <p [innerHTML]=\"field.description\"></p>\n }\n <div *ngTemplateOutlet=\"groupFields\"></div>\n </mat-expansion-panel>\n </mat-accordion>\n } @else {\n <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n @if (field.description) {\n <p [innerHTML]=\"field.description\"></p>\n }\n <div class=\"sot-formfield-array-content\">\n <div *ngTemplateOutlet=\"groupFields\"></div>\n </div>\n }\n </fieldset>\n</div>\n\n<ng-template #groupFields>\n <div class=\"sot-formfield-array\" [formGroup]=\"group\">\n <div [formArrayName]=\"field.name\">\n @for (inst of field.instances; track inst; let i = $index) {\n <fieldset class=\"sot-formfield-array-element\"\n [ngClass]=\"field.elementClassName\">\n <legend class=\"sot-formfield-array-element-label\">\n {{ field.itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n </legend>\n <div class=\"sot-formfield-array-element-content\"\n [ngClass]=\"field.elementContentClassName\">\n @for (f of inst.fields; track f.name + f.type) {\n <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n <ng-container matDynamicField\n [type]=\"f.type\"\n [path]=\"path + '.' + f.name\"\n [field]=\"f\"\n [group]=\"inst.group\"\n [instancePath]=\"path + '[' + inst.number + ']'\"\n ></ng-container>\n </div>\n }\n </div>\n <div class=\"sot-formfield-array-element-action\">\n @if (!field.disabled && (!field.minNbRow || field.minNbRow < array.controls.length)) {\n <button type=\"button\" mat-raised-button (click)=\"deleteItem(i, inst)\">\n @if (field.deleteButton && field.deleteButton.matIcon) {\n <mat-icon [title]=\"field.deleteButton!.title ? field.deleteButton!.title : ''\">\n {{ field.deleteButton!.matIcon }}\n </mat-icon>\n }\n {{ field.deleteButton ? field.deleteButton!.label : 'Supprimer' }}\n </button>\n }\n </div>\n </fieldset>\n }\n @if (!field.disabled && (!field.maxNbRow || field.maxNbRow > array.controls.length)) {\n <div class=\"sot-formfield-array-add-button\">\n <button mat-raised-button\n color=\"primary\"\n type=\"button\"\n (click)=\"addItem()\"\n >\n @if (field.addButton && field.addButton.matIcon) {\n <mat-icon [title]=\"field.addButton!.title ? field.addButton!.title : ''\">\n {{ field.addButton!.matIcon }}\n </mat-icon>\n }\n {{ field.addButton ? field.addButton.label : 'Ajouter' }}\n </button>\n </div>\n }\n <mat-error>\n @for (validation of field.validations; track validation) {\n @if (array && !array.untouched && array.hasError(validation.name)) {\n {{ validation.message }}\n }\n }\n </mat-error>\n </div>\n </div>\n</ng-template>\n", styles: ["fieldset.dynamic-field-array{border:none;padding:0;margin:0}.dynamic-field-array-add-button{padding:2rem 0}.dynamic-field-array{margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => AcDynamicFieldDirective), selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatExpansionModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.MatAccordion), selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i0.forwardRef(() => i1$1.MatExpansionPanel), selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i0.forwardRef(() => i1$1.MatExpansionPanelHeader), selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.MatExpansionPanelTitle), selector: "mat-panel-title" }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i0.forwardRef(() => MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => MatButton), selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatCardModule) }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i1.FormArrayName), selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i0.forwardRef(() => MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
632
653
|
}
|
|
633
654
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatArrayComponent, decorators: [{
|
|
634
655
|
type: Component,
|
|
@@ -749,7 +770,7 @@ class MatFieldPasswordComponent extends AbstractControlFieldComponent {
|
|
|
749
770
|
}
|
|
750
771
|
}
|
|
751
772
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldPasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
752
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldPasswordComponent, isStandalone: true, selector: "sot-mat-field-password", usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"sot-formfield sot-formfield-password\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\"\r\n>\r\n <mat-form-field>\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n <input matInput\r\n [id]=\"uuid\"\r\n [formControlName]=\"field.name\"\r\n [required]=\"!!required\"\r\n [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n [type]=\"inputType\"\r\n [aria-describedby]=\"uuid + '-description'\"\r\n >\r\n <button type=\"button\" mat-icon-button matSuffix (click)=\"tooglePassword()\"\r\n [attr.aria-label]=\"inputType === 'password' ? showPasswordLabel : hidePasswordLabel\"\r\n [attr.aria-pressed]=\"inputType === 'password'\">\r\n <mat-icon>{{ inputType === 'password' ? 'visibility_off' : 'visibility' }}</mat-icon>\r\n </button>\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (prefix.action) {\r\n <button type=\"button\"\r\n [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n (click)=\"buttonAction(prefix)\"\r\n >{{prefix.label}}</button>\r\n } @else {\r\n <span [innerHTML]=\"prefix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\" matSuffix>\r\n @if (suffix.action) {\r\n <button type=\"button\"\r\n [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n (click)=\"buttonAction(suffix)\"\r\n >{{suffix.label}}</button>\r\n } @else {\r\n <span [innerHTML]=\"suffix.label\"></span>\r\n }\r\n </span>\r\n }\r\n\r\n @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n\r\n @if (control && !control.untouched && control.invalid) {\r\n <mat-error>\r\n @for (validation of field.validations; track validation) {\r\n @if (control.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n\r\n <ul class=\"password-description\" [id]=\"uuid + '-description'\">\r\n @if (field.minlength) {\r\n <li [ngClass]=\"{ 'text-success': minLengthValid, 'text-error': !minLengthValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"minLengthValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.minlength ?? \"Must be at least 8 characters long\" }}\r\n </li>\r\n }\r\n @if (field.maxlength) {\r\n <li [ngClass]=\"{ 'text-success': maxLengthValid, 'text-error': !maxLengthValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"maxLengthValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.maxlength ?? \"Must be at most 8 characters long\" }}\r\n </li>\r\n }\r\n @if (field.requiresDigit) {\r\n <li [ngClass]=\"{ 'text-success': requiresDigitValid, 'text-error': !requiresDigitValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"requiresDigitValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.requiresDigit ?? \"Must contain at least 1 digit\" }}\r\n </li>\r\n }\r\n @if (field.requiresUppercase) {\r\n <li\r\n [ngClass]=\"{ 'text-success': requiresUppercaseValid, 'text-error': !requiresUppercaseValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"requiresUppercaseValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.requiresUppercase ?? \"Must contain at least 1 uppercase character\" }}\r\n </li>\r\n }\r\n @if (field.requiresLowercase) {\r\n <li\r\n [ngClass]=\"{ 'text-success': requiresLowercaseValid, 'text-error': !requiresLowercaseValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"requiresLowercaseValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.requiresLowercase ?? \"Must contain at least 1 lowercase character\" }}\r\n </li>\r\n }\r\n @if (field.requiresSpecialChars) {\r\n <li\r\n [ngClass]=\"{ 'text-success': requiresSpecialCharsValid, 'text-error': !requiresSpecialCharsValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"requiresSpecialCharsValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.requiresSpecialChars ?? \"Must contain at least 1 special character\" }}\r\n </li>\r\n }\r\n </ul>\r\n</div>\r\n\r\n", styles: [".sot-formfield-password mat-form-field{width:100%}.sot-formfield-password mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}.password-description{list-style-type:none;margin-block-start:0}.password-description li{display:flex;flex-direction:row;align-items:center}.password-description li mat-icon{margin-right:.5rem}.password-description li.text-error{color:var(--mat-form-field-error-text-color, var(--mat-app-error))}\n"], dependencies: [{ 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type:
|
|
773
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldPasswordComponent, isStandalone: true, selector: "sot-mat-field-password", usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"sot-formfield sot-formfield-password\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\"\r\n>\r\n <mat-form-field>\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n <input matInput\r\n [id]=\"uuid\"\r\n [formControlName]=\"field.name\"\r\n [required]=\"!!required\"\r\n [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n [type]=\"inputType\"\r\n [aria-describedby]=\"uuid + '-description'\"\r\n >\r\n <button type=\"button\" mat-icon-button matSuffix (click)=\"tooglePassword()\"\r\n [attr.aria-label]=\"inputType === 'password' ? showPasswordLabel : hidePasswordLabel\"\r\n [attr.aria-pressed]=\"inputType === 'password'\">\r\n <mat-icon>{{ inputType === 'password' ? 'visibility_off' : 'visibility' }}</mat-icon>\r\n </button>\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (prefix.action) {\r\n <button type=\"button\"\r\n [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n (click)=\"buttonAction(prefix)\"\r\n >{{prefix.label}}</button>\r\n } @else {\r\n <span [innerHTML]=\"prefix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\" matSuffix>\r\n @if (suffix.action) {\r\n <button type=\"button\"\r\n [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n (click)=\"buttonAction(suffix)\"\r\n >{{suffix.label}}</button>\r\n } @else {\r\n <span [innerHTML]=\"suffix.label\"></span>\r\n }\r\n </span>\r\n }\r\n\r\n @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n\r\n @if (control && !control.untouched && control.invalid) {\r\n <mat-error>\r\n @for (validation of field.validations; track validation) {\r\n @if (control.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n\r\n <ul class=\"password-description\" [id]=\"uuid + '-description'\">\r\n @if (field.minlength) {\r\n <li [ngClass]=\"{ 'text-success': minLengthValid, 'text-error': !minLengthValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"minLengthValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.minlength ?? \"Must be at least 8 characters long\" }}\r\n </li>\r\n }\r\n @if (field.maxlength) {\r\n <li [ngClass]=\"{ 'text-success': maxLengthValid, 'text-error': !maxLengthValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"maxLengthValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.maxlength ?? \"Must be at most 8 characters long\" }}\r\n </li>\r\n }\r\n @if (field.requiresDigit) {\r\n <li [ngClass]=\"{ 'text-success': requiresDigitValid, 'text-error': !requiresDigitValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"requiresDigitValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.requiresDigit ?? \"Must contain at least 1 digit\" }}\r\n </li>\r\n }\r\n @if (field.requiresUppercase) {\r\n <li\r\n [ngClass]=\"{ 'text-success': requiresUppercaseValid, 'text-error': !requiresUppercaseValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"requiresUppercaseValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.requiresUppercase ?? \"Must contain at least 1 uppercase character\" }}\r\n </li>\r\n }\r\n @if (field.requiresLowercase) {\r\n <li\r\n [ngClass]=\"{ 'text-success': requiresLowercaseValid, 'text-error': !requiresLowercaseValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"requiresLowercaseValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.requiresLowercase ?? \"Must contain at least 1 lowercase character\" }}\r\n </li>\r\n }\r\n @if (field.requiresSpecialChars) {\r\n <li\r\n [ngClass]=\"{ 'text-success': requiresSpecialCharsValid, 'text-error': !requiresSpecialCharsValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"requiresSpecialCharsValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.requiresSpecialChars ?? \"Must contain at least 1 special character\" }}\r\n </li>\r\n }\r\n </ul>\r\n</div>\r\n\r\n", styles: [".sot-formfield-password mat-form-field{width:100%}.sot-formfield-password mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}.password-description{list-style-type:none;margin-block-start:0}.password-description li{display:flex;flex-direction:row;align-items:center}.password-description li mat-icon{margin-right:.5rem}.password-description li.text-error{color:var(--mat-form-field-error-text-color, var(--mat-app-error))}\n"], dependencies: [{ 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
|
|
753
774
|
}
|
|
754
775
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldPasswordComponent, decorators: [{
|
|
755
776
|
type: Component,
|
|
@@ -906,8 +927,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
906
927
|
args: [{ selector: "ac-mat-field-custom", standalone: true, imports: [ReactiveFormsModule, NgClass, AcFieldCustomDirective], template: "<div class=\"ac-form-field ac-form-field-custom\"\n [ngClass]=\"field.className\"\n [formGroup]=\"group\" >\n <ng-container fieldCustom [field]=\"field\" [group]=\"group\" > </ng-container>\n</div>\n" }]
|
|
907
928
|
}] });
|
|
908
929
|
|
|
930
|
+
class ConfirmDialogComponent {
|
|
931
|
+
data = inject(MAT_DIALOG_DATA);
|
|
932
|
+
title;
|
|
933
|
+
message;
|
|
934
|
+
confirmLabel;
|
|
935
|
+
cancelLabel;
|
|
936
|
+
constructor() {
|
|
937
|
+
}
|
|
938
|
+
ngOnInit() {
|
|
939
|
+
this.title = this.data.title ? this.data.title : "Confirmation";
|
|
940
|
+
this.message = this.data.message ? this.data.message : "Do you confirm this action ?";
|
|
941
|
+
this.confirmLabel = this.data.confirmLabel ? this.data.confirmLabel : "Yes";
|
|
942
|
+
this.cancelLabel = this.data.cancelLabel ? this.data.cancelLabel : "No";
|
|
943
|
+
}
|
|
944
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
945
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ConfirmDialogComponent, isStandalone: true, selector: "sot-confirm-dialog", ngImport: i0, template: "<div class=\"modal-close-button\">\n <button mat-button color=\"primary\" mat-dialog-close>\n <mat-icon title=\"Fermer\">close</mat-icon>\n Fermer\n </button>\n</div>\n\n<h2 class=\"modal-title\" matDialogTitle>{{ title }}</h2>\n\n<div matDialogContent>\n <div [innerHtml]=\"message\"></div>\n</div>\n\n<div matDialogActions>\n <div class=\"modal-action-buttons\">\n <button mat-stroked-button color=\"primary\" mat-dialog-close>\n {{ cancelLabel }}\n </button>\n <button mat-raised-button color=\"primary\" [mat-dialog-close]=\"true\">\n {{ confirmLabel }}\n </button>\n </div>\n</div>\n", styles: [".modal-close-button{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
|
|
946
|
+
}
|
|
947
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
|
|
948
|
+
type: Component,
|
|
949
|
+
args: [{ selector: "sot-confirm-dialog", imports: [MatIcon, MatButton, MatDialogModule], template: "<div class=\"modal-close-button\">\n <button mat-button color=\"primary\" mat-dialog-close>\n <mat-icon title=\"Fermer\">close</mat-icon>\n Fermer\n </button>\n</div>\n\n<h2 class=\"modal-title\" matDialogTitle>{{ title }}</h2>\n\n<div matDialogContent>\n <div [innerHtml]=\"message\"></div>\n</div>\n\n<div matDialogActions>\n <div class=\"modal-action-buttons\">\n <button mat-stroked-button color=\"primary\" mat-dialog-close>\n {{ cancelLabel }}\n </button>\n <button mat-raised-button color=\"primary\" [mat-dialog-close]=\"true\">\n {{ confirmLabel }}\n </button>\n </div>\n</div>\n", styles: [".modal-close-button{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
|
|
950
|
+
}], ctorParameters: () => [] });
|
|
951
|
+
|
|
952
|
+
class MaterialButton {
|
|
953
|
+
type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
954
|
+
matType = input(...(ngDevMode ? [undefined, { debugName: "matType" }] : []));
|
|
955
|
+
disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
|
|
956
|
+
disableRipple = input(...(ngDevMode ? [undefined, { debugName: "disableRipple" }] : []));
|
|
957
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
958
|
+
className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
|
|
959
|
+
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
960
|
+
matIcon = input(...(ngDevMode ? [undefined, { debugName: "matIcon" }] : []));
|
|
961
|
+
badge = input(...(ngDevMode ? [undefined, { debugName: "badge" }] : []));
|
|
962
|
+
badgeOptions = input(...(ngDevMode ? [undefined, { debugName: "badgeOptions" }] : []));
|
|
963
|
+
ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
964
|
+
buttonMatType = computed(() => (this.type() === 'link' ? 'link-' : 'button-') + (this.matType() ?? 'basic'), ...(ngDevMode ? [{ debugName: "buttonMatType" }] : []));
|
|
965
|
+
buttonClick = output();
|
|
966
|
+
clickButton(event) {
|
|
967
|
+
event.stopPropagation();
|
|
968
|
+
this.buttonClick.emit();
|
|
969
|
+
}
|
|
970
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
971
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MaterialButton, isStandalone: true, selector: "sot-mat-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, matType: { classPropertyName: "matType", publicName: "matType", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, matIcon: { classPropertyName: "matIcon", publicName: "matIcon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeOptions: { classPropertyName: "badgeOptions", publicName: "badgeOptions", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "@switch (buttonMatType()) {\r\n @case ('button-basic') {\r\n <button matButton\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-basic') {\r\n <a type=\"link\" matButton\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-outlined') {\r\n <button matButton=\"outlined\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-outlined') {\r\n <a type=\"link\" matButton=\"outlined\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-elevated') {\r\n <button matButton=\"elevated\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-elevated') {\r\n <a type=\"link\" matButton=\"elevated\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-filled') {\r\n <button matButton=\"filled\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-filled') {\r\n <a type=\"link\" matButton=\"filled\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-tonal') {\r\n <button matButton=\"tonal\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-tonal') {\r\n <a type=\"link\" matButton=\"tonal\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-icon') {\r\n <button matIconButton\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-icon') {\r\n <a type=\"link\" matIconButton\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-fab') {\r\n <button matFab\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-fab') {\r\n <a type=\"link\" matFab\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-mini-fab') {\r\n <button matMiniFab\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-mini-fab') {\r\n <a type=\"link\" matMiniFab\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-menu') {\r\n <button mat-menu-item\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-menu') {\r\n <a type=\"link\" mat-menu-item\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n\r\n}\r\n\r\n<ng-template #buttonContent>\r\n @if (matIcon()) {\r\n <mat-icon\r\n aria-hidden=\"true\"\r\n [fontIcon]=\"matIcon()!\"\r\n ></mat-icon>\r\n }\r\n <span [innerHTML]=\"label()\"></span>\r\n</ng-template>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
972
|
+
}
|
|
973
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialButton, decorators: [{
|
|
974
|
+
type: Component,
|
|
975
|
+
args: [{ selector: 'sot-mat-button', imports: [
|
|
976
|
+
NgClass,
|
|
977
|
+
MatBadge,
|
|
978
|
+
MatButton,
|
|
979
|
+
MatIconButton,
|
|
980
|
+
MatFabButton,
|
|
981
|
+
MatMiniFabButton,
|
|
982
|
+
MatMenuItem,
|
|
983
|
+
MatIcon,
|
|
984
|
+
NgTemplateOutlet
|
|
985
|
+
], template: "@switch (buttonMatType()) {\r\n @case ('button-basic') {\r\n <button matButton\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-basic') {\r\n <a type=\"link\" matButton\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-outlined') {\r\n <button matButton=\"outlined\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-outlined') {\r\n <a type=\"link\" matButton=\"outlined\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-elevated') {\r\n <button matButton=\"elevated\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-elevated') {\r\n <a type=\"link\" matButton=\"elevated\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-filled') {\r\n <button matButton=\"filled\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-filled') {\r\n <a type=\"link\" matButton=\"filled\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-tonal') {\r\n <button matButton=\"tonal\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-tonal') {\r\n <a type=\"link\" matButton=\"tonal\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-icon') {\r\n <button matIconButton\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-icon') {\r\n <a type=\"link\" matIconButton\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-fab') {\r\n <button matFab\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-fab') {\r\n <a type=\"link\" matFab\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-mini-fab') {\r\n <button matMiniFab\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-mini-fab') {\r\n <a type=\"link\" matMiniFab\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-menu') {\r\n <button mat-menu-item\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-menu') {\r\n <a type=\"link\" mat-menu-item\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n\r\n}\r\n\r\n<ng-template #buttonContent>\r\n @if (matIcon()) {\r\n <mat-icon\r\n aria-hidden=\"true\"\r\n [fontIcon]=\"matIcon()!\"\r\n ></mat-icon>\r\n }\r\n <span [innerHTML]=\"label()\"></span>\r\n</ng-template>\r\n\r\n" }]
|
|
986
|
+
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], matType: [{ type: i0.Input, args: [{ isSignal: true, alias: "matType", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], matIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "matIcon", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeOptions", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }] } });
|
|
987
|
+
|
|
909
988
|
class MatInputFileComponent {
|
|
910
|
-
|
|
989
|
+
dialog = inject(MatDialog);
|
|
911
990
|
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
912
991
|
group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
|
|
913
992
|
fileInput;
|
|
@@ -923,7 +1002,6 @@ class MatInputFileComponent {
|
|
|
923
1002
|
}
|
|
924
1003
|
ngOnInit() {
|
|
925
1004
|
const value = this.group().get(this.field().name)?.value;
|
|
926
|
-
console.log(value);
|
|
927
1005
|
if (value) {
|
|
928
1006
|
if (!this.field().multiple) {
|
|
929
1007
|
this.fichier = { file: value, srcUrl: null };
|
|
@@ -958,9 +1036,7 @@ class MatInputFileComponent {
|
|
|
958
1036
|
}
|
|
959
1037
|
onSelectFile(event) {
|
|
960
1038
|
if (event && event.target && event.target.files && event.target.files.length > 0) {
|
|
961
|
-
console.log(event.target.files);
|
|
962
1039
|
for (let i = 0; i < event.target.files.length; i++) {
|
|
963
|
-
console.log(i, event.target.files[i]);
|
|
964
1040
|
const fichier = { file: event.target.files[i], srcUrl: null };
|
|
965
1041
|
this.readFile(fichier, fichier.file);
|
|
966
1042
|
if (!this.field().multiple) {
|
|
@@ -980,7 +1056,6 @@ class MatInputFileComponent {
|
|
|
980
1056
|
}
|
|
981
1057
|
}
|
|
982
1058
|
addMultipleFile(file) {
|
|
983
|
-
console.log(file.file.name);
|
|
984
1059
|
if (file) {
|
|
985
1060
|
if (!this.fileList) {
|
|
986
1061
|
this.fileList = [];
|
|
@@ -992,6 +1067,26 @@ class MatInputFileComponent {
|
|
|
992
1067
|
}
|
|
993
1068
|
this.writeValue(this.fileList.map((f) => f.file));
|
|
994
1069
|
}
|
|
1070
|
+
confirmDeleteFile(file) {
|
|
1071
|
+
if (this.field().confirmDelete) {
|
|
1072
|
+
const data = {
|
|
1073
|
+
title: this.field().confirmDeleteData?.title ?? "Deletion",
|
|
1074
|
+
message: this.field().confirmDeleteData?.message ?? "Do you confirm this deletion ?",
|
|
1075
|
+
confirmLabel: this.field().confirmDeleteData?.confirmLabel ?? "Confirm",
|
|
1076
|
+
cancelLabel: this.field().confirmDeleteData?.cancelLabel ?? "Cancel",
|
|
1077
|
+
closeLabel: this.field().confirmDeleteData?.closeLabel ?? "Close",
|
|
1078
|
+
};
|
|
1079
|
+
const dialogRef = this.dialog.open(ConfirmDialogComponent, { data, width: "70%" });
|
|
1080
|
+
dialogRef.afterClosed().subscribe((resp) => {
|
|
1081
|
+
if (resp) {
|
|
1082
|
+
this.deleteFile(file);
|
|
1083
|
+
}
|
|
1084
|
+
});
|
|
1085
|
+
}
|
|
1086
|
+
else {
|
|
1087
|
+
this.deleteFile(file);
|
|
1088
|
+
}
|
|
1089
|
+
}
|
|
995
1090
|
deleteFile(file) {
|
|
996
1091
|
if (!this.field().multiple) {
|
|
997
1092
|
this.fichier = null;
|
|
@@ -1021,17 +1116,17 @@ class MatInputFileComponent {
|
|
|
1021
1116
|
multi: true,
|
|
1022
1117
|
useExisting: forwardRef(() => MatInputFileComponent),
|
|
1023
1118
|
},
|
|
1024
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"sot-file-wrapper\">\n <label [ngClass]=\"field()?.labelClassName\"
|
|
1119
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"sot-file-wrapper\">\n <label [ngClass]=\"field()?.labelClassName\"\n [for]=\"'file-upload-' + field().id\">{{ field().label }}</label>\n <div class=\"sot-file-list\">\n @if (field().multiple) {\n <ul>\n @for (item of fileList; track item) {\n <li class=\"file-list-item\">\n <div>\n <div>\n @if (item.srcUrl) {\n <img [src]=\"item.srcUrl\" [alt]=\"item!.file.name\"/>\n } @else {\n {{ item.file.name }}\n }\n </div>\n </div>\n <div>\n @if (!field().disabled) {\n <button mat-icon-button\n type=\"button\"\n (click)=\"deleteFile(item)\"\n title=\"Supprimer\">\n <mat-icon>delete</mat-icon>\n </button>\n }\n </div>\n </li>\n }\n </ul>\n } @else {\n @if (fichier) {\n <div class=\"file-list-item\">\n <div>\n @if (fichier.srcUrl) {\n <img [src]=\"fichier.srcUrl\" [alt]=\"fichier.file.name\"/>\n } @else {\n {{ fichier.file.name }}\n }\n </div>\n @if (!field().disabled) {\n <sot-mat-button\n type=\"button\"\n [className]=\"field().deleteButton?.className\"\n [matType]=\"field().deleteButton?.matButtonType\"\n [matIcon]=\"field().deleteButton?.matIcon\"\n [label]=\"field().deleteButton?.label ?? 'Delete'\"\n [title]=\"field().deleteButton?.title\"\n [ariaLabel]=\"field().deleteButton?.ariaLabel\"\n (buttonClick)=\"confirmDeleteFile(fichier!)\"\n ></sot-mat-button>\n }\n </div>\n }\n }\n </div>\n <div class=\"sot-file-button\">\n <sot-mat-button\n type=\"button\"\n [className]=\"field().addButton?.className\"\n [matType]=\"field().addButton?.matButtonType\"\n [matIcon]=\"field().addButton?.matIcon\"\n [label]=\"field().addButton?.label ?? 'Select a file'\"\n [title]=\"field().addButton?.title\"\n [ariaLabel]=\"field().addButton?.ariaLabel\"\n [disabled]=\"field().disabled\"\n (buttonClick)=\"fileInput.click()\"\n ></sot-mat-button>\n <input\n #fileInput\n hidden\n type=\"file\"\n [attr.id]=\"'file-upload-' + field().id\"\n name=\"file-upload\"\n (change)=\"onSelectFile($event)\"\n [accept]=\"field().accept ? field().accept : '*/*'\"\n [multiple]=\"field().multiple\"\n />\n </div>\n</div>\n", styles: [".file-list-item{display:flex;flex-direction:row;gap:1rem;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MaterialButton, selector: "sot-mat-button", inputs: ["type", "matType", "disabled", "disableRipple", "label", "className", "title", "matIcon", "badge", "badgeOptions", "ariaLabel"], outputs: ["buttonClick"] }] });
|
|
1025
1120
|
}
|
|
1026
1121
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatInputFileComponent, decorators: [{
|
|
1027
1122
|
type: Component,
|
|
1028
|
-
args: [{ selector: 'sot-mat-input-file', standalone: true, imports: [ReactiveFormsModule, MatButtonModule, MatIconModule, NgClass], providers: [
|
|
1123
|
+
args: [{ selector: 'sot-mat-input-file', standalone: true, imports: [ReactiveFormsModule, MatButtonModule, MatIconModule, NgClass, MaterialButton], providers: [
|
|
1029
1124
|
{
|
|
1030
1125
|
provide: NG_VALUE_ACCESSOR,
|
|
1031
1126
|
multi: true,
|
|
1032
1127
|
useExisting: forwardRef(() => MatInputFileComponent),
|
|
1033
1128
|
},
|
|
1034
|
-
], template: "<div class=\"sot-file-wrapper\">\n <label [ngClass]=\"field()?.labelClassName\"
|
|
1129
|
+
], template: "<div class=\"sot-file-wrapper\">\n <label [ngClass]=\"field()?.labelClassName\"\n [for]=\"'file-upload-' + field().id\">{{ field().label }}</label>\n <div class=\"sot-file-list\">\n @if (field().multiple) {\n <ul>\n @for (item of fileList; track item) {\n <li class=\"file-list-item\">\n <div>\n <div>\n @if (item.srcUrl) {\n <img [src]=\"item.srcUrl\" [alt]=\"item!.file.name\"/>\n } @else {\n {{ item.file.name }}\n }\n </div>\n </div>\n <div>\n @if (!field().disabled) {\n <button mat-icon-button\n type=\"button\"\n (click)=\"deleteFile(item)\"\n title=\"Supprimer\">\n <mat-icon>delete</mat-icon>\n </button>\n }\n </div>\n </li>\n }\n </ul>\n } @else {\n @if (fichier) {\n <div class=\"file-list-item\">\n <div>\n @if (fichier.srcUrl) {\n <img [src]=\"fichier.srcUrl\" [alt]=\"fichier.file.name\"/>\n } @else {\n {{ fichier.file.name }}\n }\n </div>\n @if (!field().disabled) {\n <sot-mat-button\n type=\"button\"\n [className]=\"field().deleteButton?.className\"\n [matType]=\"field().deleteButton?.matButtonType\"\n [matIcon]=\"field().deleteButton?.matIcon\"\n [label]=\"field().deleteButton?.label ?? 'Delete'\"\n [title]=\"field().deleteButton?.title\"\n [ariaLabel]=\"field().deleteButton?.ariaLabel\"\n (buttonClick)=\"confirmDeleteFile(fichier!)\"\n ></sot-mat-button>\n }\n </div>\n }\n }\n </div>\n <div class=\"sot-file-button\">\n <sot-mat-button\n type=\"button\"\n [className]=\"field().addButton?.className\"\n [matType]=\"field().addButton?.matButtonType\"\n [matIcon]=\"field().addButton?.matIcon\"\n [label]=\"field().addButton?.label ?? 'Select a file'\"\n [title]=\"field().addButton?.title\"\n [ariaLabel]=\"field().addButton?.ariaLabel\"\n [disabled]=\"field().disabled\"\n (buttonClick)=\"fileInput.click()\"\n ></sot-mat-button>\n <input\n #fileInput\n hidden\n type=\"file\"\n [attr.id]=\"'file-upload-' + field().id\"\n name=\"file-upload\"\n (change)=\"onSelectFile($event)\"\n [accept]=\"field().accept ? field().accept : '*/*'\"\n [multiple]=\"field().multiple\"\n />\n </div>\n</div>\n", styles: [".file-list-item{display:flex;flex-direction:row;gap:1rem;align-items:center}\n"] }]
|
|
1035
1130
|
}], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], fileInput: [{
|
|
1036
1131
|
type: ViewChild,
|
|
1037
1132
|
args: ['fileInput']
|
|
@@ -1046,6 +1141,128 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1046
1141
|
args: [{ selector: 'sot-mat-field-file', standalone: true, imports: [ReactiveFormsModule, NgClass, MatError, MatInputFileComponent], template: "<div class=\"sot-formfield sot-formfield-file\" [ngClass]=\"field.className\" [formGroup]=\"group\">\n <sot-mat-input-file [formControlName]=\"field.name\" [field]=\"field\"\n [group]=\"group\"></sot-mat-input-file>\n @for (validation of field.validations; track validation) {\n @if (control && !control.untouched && control.hasError(validation.name)) {\n <mat-error>{{ validation.message }}</mat-error>\n }\n }\n</div>\n" }]
|
|
1047
1142
|
}] });
|
|
1048
1143
|
|
|
1144
|
+
class MatFieldChipsComponent extends AbstractControlFieldComponent {
|
|
1145
|
+
inputType = 'chips';
|
|
1146
|
+
separatorKeysCodes = [ENTER, COMMA];
|
|
1147
|
+
announcer = inject(LiveAnnouncer);
|
|
1148
|
+
options = [];
|
|
1149
|
+
currentOption = model('', ...(ngDevMode ? [{ debugName: "currentOption" }] : []));
|
|
1150
|
+
values = signal([], ...(ngDevMode ? [{ debugName: "values" }] : []));
|
|
1151
|
+
filteredOptions = computed(() => {
|
|
1152
|
+
const list = this.options.filter(item => !this.values().includes(item));
|
|
1153
|
+
const currentOption = this.currentOption().toLowerCase();
|
|
1154
|
+
return currentOption
|
|
1155
|
+
? list.filter(option => option.toLowerCase().includes(currentOption))
|
|
1156
|
+
: list.slice();
|
|
1157
|
+
}, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
|
|
1158
|
+
constructor() {
|
|
1159
|
+
super();
|
|
1160
|
+
effect(() => {
|
|
1161
|
+
this.group.get(this.field.name)?.setValue(this.values());
|
|
1162
|
+
});
|
|
1163
|
+
}
|
|
1164
|
+
buttonAction(b) {
|
|
1165
|
+
if (b.action && this.field && this.group) {
|
|
1166
|
+
b.action(this.field, this.group, this.dynamicFormService.data);
|
|
1167
|
+
}
|
|
1168
|
+
}
|
|
1169
|
+
ngOnInit() {
|
|
1170
|
+
super.ngOnInit();
|
|
1171
|
+
if (this.field.options) {
|
|
1172
|
+
this.options = this.field.options;
|
|
1173
|
+
}
|
|
1174
|
+
if (this.field.value) {
|
|
1175
|
+
this.values.set(this.field.value);
|
|
1176
|
+
}
|
|
1177
|
+
const control = this.group.get(this.field.name);
|
|
1178
|
+
if (control) {
|
|
1179
|
+
control.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
|
|
1180
|
+
if (JSON.stringify(value) !== JSON.stringify(this.values())) {
|
|
1181
|
+
//this.values.set(value);
|
|
1182
|
+
console.log(true);
|
|
1183
|
+
}
|
|
1184
|
+
console.log(value, this.values());
|
|
1185
|
+
});
|
|
1186
|
+
}
|
|
1187
|
+
}
|
|
1188
|
+
add(event) {
|
|
1189
|
+
console.log(event);
|
|
1190
|
+
const value = (event.value || '').trim();
|
|
1191
|
+
// Add our option
|
|
1192
|
+
if (value) {
|
|
1193
|
+
this.values.update(values => [...values, value]);
|
|
1194
|
+
}
|
|
1195
|
+
// Clear the input value
|
|
1196
|
+
this.currentOption.set('');
|
|
1197
|
+
}
|
|
1198
|
+
remove(option) {
|
|
1199
|
+
this.values.update(values => {
|
|
1200
|
+
const index = values.indexOf(option);
|
|
1201
|
+
if (index < 0) {
|
|
1202
|
+
return values;
|
|
1203
|
+
}
|
|
1204
|
+
values.splice(index, 1);
|
|
1205
|
+
this.announcer.announce(`Removed ${option}`);
|
|
1206
|
+
return [...values];
|
|
1207
|
+
});
|
|
1208
|
+
}
|
|
1209
|
+
selected(event) {
|
|
1210
|
+
this.values.update(values => [...values, event.option.viewValue]);
|
|
1211
|
+
this.currentOption.set('');
|
|
1212
|
+
event.option.deselect();
|
|
1213
|
+
}
|
|
1214
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1215
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldChipsComponent, isStandalone: true, selector: "sot-mat-field-chips", inputs: { currentOption: { classPropertyName: "currentOption", publicName: "currentOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentOption: "currentOptionChange" }, usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"sot-formfield sot-formfield-input\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\"\r\n>\r\n <mat-form-field>\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n\r\n <mat-chip-grid #chipGrid aria-label=\"option selection\">\r\n @for (option of values(); track $index) {\r\n <mat-chip-row (removed)=\"remove(option)\">\r\n {{ option }}\r\n <button matChipRemove [attr.aria-label]=\"'remove ' + option\">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n </mat-chip-grid>\r\n\r\n <input\r\n #chipsInput\r\n [id]=\"uuid\"\r\n name=\"option\"\r\n [(ngModel)]=\"currentOption\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n [required]=\"!!required\"\r\n [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n [type]=\"inputType\"\r\n [readonly]=\"field.readonly\"\r\n [matChipInputFor]=\"chipGrid\"\r\n [matAutocomplete]=\"auto\"\r\n [matChipInputSeparatorKeyCodes]=\"field.separatorKeysCodes ?? separatorKeysCodes\"\r\n (matChipInputTokenEnd)=\"add($event); chipsInput.value = ''\"\r\n >\r\n <mat-autocomplete #auto=\"matAutocomplete\"\r\n (optionSelected)=\"selected($event); chipsInput.value = ''\">\r\n @for (option of filteredOptions(); track option) {\r\n <mat-option [value]=\"option\">{{ option }}</mat-option>\r\n }\r\n </mat-autocomplete>\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (prefix.action) {\r\n <button type=\"button\"\r\n [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n (click)=\"buttonAction(prefix)\"\r\n >{{ prefix.label }}</button>\r\n } @else {\r\n <span [innerHTML]=\"prefix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\" matSuffix>\r\n @if (suffix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n (click)=\"buttonAction(suffix)\"\r\n >{{ suffix.label }}</button>\r\n } @else {\r\n <span [innerHTML]=\"suffix.label\"></span>\r\n }\r\n </span>\r\n }\r\n\r\n @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n\r\n @if (control && !control.untouched && control.invalid) {\r\n <mat-error>\r\n @for (validation of field.validations; track validation) {\r\n @if (control.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
1216
|
+
}
|
|
1217
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldChipsComponent, decorators: [{
|
|
1218
|
+
type: Component,
|
|
1219
|
+
args: [{ selector: 'sot-mat-field-chips', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatIconModule, MatButtonModule, MatChipsModule, MatAutocompleteModule, FormsModule], template: "<div\r\n class=\"sot-formfield sot-formfield-input\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\"\r\n>\r\n <mat-form-field>\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n\r\n <mat-chip-grid #chipGrid aria-label=\"option selection\">\r\n @for (option of values(); track $index) {\r\n <mat-chip-row (removed)=\"remove(option)\">\r\n {{ option }}\r\n <button matChipRemove [attr.aria-label]=\"'remove ' + option\">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n </mat-chip-grid>\r\n\r\n <input\r\n #chipsInput\r\n [id]=\"uuid\"\r\n name=\"option\"\r\n [(ngModel)]=\"currentOption\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n [required]=\"!!required\"\r\n [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n [type]=\"inputType\"\r\n [readonly]=\"field.readonly\"\r\n [matChipInputFor]=\"chipGrid\"\r\n [matAutocomplete]=\"auto\"\r\n [matChipInputSeparatorKeyCodes]=\"field.separatorKeysCodes ?? separatorKeysCodes\"\r\n (matChipInputTokenEnd)=\"add($event); chipsInput.value = ''\"\r\n >\r\n <mat-autocomplete #auto=\"matAutocomplete\"\r\n (optionSelected)=\"selected($event); chipsInput.value = ''\">\r\n @for (option of filteredOptions(); track option) {\r\n <mat-option [value]=\"option\">{{ option }}</mat-option>\r\n }\r\n </mat-autocomplete>\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (prefix.action) {\r\n <button type=\"button\"\r\n [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n (click)=\"buttonAction(prefix)\"\r\n >{{ prefix.label }}</button>\r\n } @else {\r\n <span [innerHTML]=\"prefix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\" matSuffix>\r\n @if (suffix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n (click)=\"buttonAction(suffix)\"\r\n >{{ suffix.label }}</button>\r\n } @else {\r\n <span [innerHTML]=\"suffix.label\"></span>\r\n }\r\n </span>\r\n }\r\n\r\n @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n\r\n @if (control && !control.untouched && control.invalid) {\r\n <mat-error>\r\n @for (validation of field.validations; track validation) {\r\n @if (control.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"] }]
|
|
1220
|
+
}], ctorParameters: () => [], propDecorators: { currentOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentOption", required: false }] }, { type: i0.Output, args: ["currentOptionChange"] }] } });
|
|
1221
|
+
|
|
1222
|
+
class MatFieldDateComponent extends AbstractControlFieldComponent {
|
|
1223
|
+
_adapter = inject(DateAdapter);
|
|
1224
|
+
_intl = inject(MatDatepickerIntl);
|
|
1225
|
+
dateFormatString;
|
|
1226
|
+
locale;
|
|
1227
|
+
ngOnInit() {
|
|
1228
|
+
super.ngOnInit();
|
|
1229
|
+
this.locale = this.field.locale ?? 'en';
|
|
1230
|
+
this._adapter.setLocale(this.locale);
|
|
1231
|
+
this.dateFormatString = this.field.format ?? 'YYYY/MM/DD';
|
|
1232
|
+
this.updateCloseButtonLabel();
|
|
1233
|
+
const control = this.group.get(this.field.name);
|
|
1234
|
+
if (control) {
|
|
1235
|
+
if (typeof control.value === 'string') {
|
|
1236
|
+
//TODO control.setValue(moment(control.value, this.field.format));
|
|
1237
|
+
}
|
|
1238
|
+
}
|
|
1239
|
+
}
|
|
1240
|
+
buttonAction(b) {
|
|
1241
|
+
if (b.action && this.field && this.group) {
|
|
1242
|
+
b.action(this.field, this.group, this.dynamicFormService.data);
|
|
1243
|
+
}
|
|
1244
|
+
}
|
|
1245
|
+
filterDate = (d) => {
|
|
1246
|
+
return this.field.filter ? this.field.filter(d, this.field, this.group) : true;
|
|
1247
|
+
};
|
|
1248
|
+
updateCloseButtonLabel() {
|
|
1249
|
+
if (this.field.closeCalendarLabel) {
|
|
1250
|
+
this._intl.closeCalendarLabel = this.field.closeCalendarLabel;
|
|
1251
|
+
}
|
|
1252
|
+
this._intl.changes.next();
|
|
1253
|
+
}
|
|
1254
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1255
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldDateComponent, isStandalone: true, selector: "sot-field-date", providers: [
|
|
1256
|
+
provideLuxonDateAdapter(),
|
|
1257
|
+
], usesInheritance: true, ngImport: i0, template: "<div\n class=\"ac-form-field ac-form-field-date\"\n [ngClass]=\"field.className\"\n [formGroup]=\"group\"\n>\n <mat-form-field>\n <mat-label>\n {{ field.label }}\n </mat-label>\n <input matInput\n type=\"text\"\n [id]=\"uuid\"\n [matDatepicker]=\"picker\"\n [formControlName]=\"field.name\"\n [required]=\"!!required\"\n [readonly]=\"field.readonly\"\n [min]=\"field.minDate ? field.minDate : null\"\n [max]=\"field.maxDate ? field.maxDate : null\"\n [matDatepickerFilter]=\"filterDate\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker [touchUi]=\"!!field.touchUi\"></mat-datepicker>\n\n @for (prefix of field.prefixes; track prefix) {\n <span class=\"sot-formfield-prefix\" matPrefix>\n @if (prefix.action) {\n <button type=\"button\"\n [attr.aria-label]=\"prefix.actionAriaLabel\"\n (click)=\"buttonAction(prefix)\"\n >{{prefix.label}}</button>\n } @else {\n <span [innerHTML]=\"prefix.label\"></span>\n }\n </span>\n }\n @for (suffix of field.suffixes; track suffix) {\n <span class=\"sot-formfield-suffix\" matSuffix>\n @if (suffix.action) {\n <button type=\"button\" matButton\n [attr.aria-label]=\"suffix.actionAriaLabel\"\n (click)=\"buttonAction(suffix)\"\n >{{suffix.label}}</button>\n } @else {\n <span [innerHTML]=\"suffix.label\"></span>\n }\n </span>\n }\n\n @if (field.description) {\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\n }\n @if (control && !control.untouched && control.invalid) {\n <mat-error>\n @for (validation of field.validations; track validation) {\n @if (control.hasError(validation.name)) {\n {{ validation.message }}\n }\n }\n </mat-error>\n }\n </mat-form-field>\n</div>\n", styles: [".ac-form-field-date mat-form-field{width:100%}.ac-form-field-date mat-form-field[hidden]{display:none}.ac-form-field-date-prefix,.ac-form-field-date-suffix{padding:0 .5rem}\n"], dependencies: [{ 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
|
|
1258
|
+
}
|
|
1259
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldDateComponent, decorators: [{
|
|
1260
|
+
type: Component,
|
|
1261
|
+
args: [{ selector: 'sot-field-date', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatDatepickerModule, MatInputModule, MatButtonModule], providers: [
|
|
1262
|
+
provideLuxonDateAdapter(),
|
|
1263
|
+
], template: "<div\n class=\"ac-form-field ac-form-field-date\"\n [ngClass]=\"field.className\"\n [formGroup]=\"group\"\n>\n <mat-form-field>\n <mat-label>\n {{ field.label }}\n </mat-label>\n <input matInput\n type=\"text\"\n [id]=\"uuid\"\n [matDatepicker]=\"picker\"\n [formControlName]=\"field.name\"\n [required]=\"!!required\"\n [readonly]=\"field.readonly\"\n [min]=\"field.minDate ? field.minDate : null\"\n [max]=\"field.maxDate ? field.maxDate : null\"\n [matDatepickerFilter]=\"filterDate\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker [touchUi]=\"!!field.touchUi\"></mat-datepicker>\n\n @for (prefix of field.prefixes; track prefix) {\n <span class=\"sot-formfield-prefix\" matPrefix>\n @if (prefix.action) {\n <button type=\"button\"\n [attr.aria-label]=\"prefix.actionAriaLabel\"\n (click)=\"buttonAction(prefix)\"\n >{{prefix.label}}</button>\n } @else {\n <span [innerHTML]=\"prefix.label\"></span>\n }\n </span>\n }\n @for (suffix of field.suffixes; track suffix) {\n <span class=\"sot-formfield-suffix\" matSuffix>\n @if (suffix.action) {\n <button type=\"button\" matButton\n [attr.aria-label]=\"suffix.actionAriaLabel\"\n (click)=\"buttonAction(suffix)\"\n >{{suffix.label}}</button>\n } @else {\n <span [innerHTML]=\"suffix.label\"></span>\n }\n </span>\n }\n\n @if (field.description) {\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\n }\n @if (control && !control.untouched && control.invalid) {\n <mat-error>\n @for (validation of field.validations; track validation) {\n @if (control.hasError(validation.name)) {\n {{ validation.message }}\n }\n }\n </mat-error>\n }\n </mat-form-field>\n</div>\n", styles: [".ac-form-field-date mat-form-field{width:100%}.ac-form-field-date mat-form-field[hidden]{display:none}.ac-form-field-date-prefix,.ac-form-field-date-suffix{padding:0 .5rem}\n"] }]
|
|
1264
|
+
}] });
|
|
1265
|
+
|
|
1049
1266
|
const components$2 = {
|
|
1050
1267
|
text: MatDivTextComponent,
|
|
1051
1268
|
group: MatGroupComponent,
|
|
@@ -1060,6 +1277,8 @@ const components$2 = {
|
|
|
1060
1277
|
toggle: MatFieldToggleComponent,
|
|
1061
1278
|
customField: MatFieldCustomComponent,
|
|
1062
1279
|
file: MatFieldFileComponent,
|
|
1280
|
+
chips: MatFieldChipsComponent,
|
|
1281
|
+
date: MatFieldDateComponent
|
|
1063
1282
|
/*
|
|
1064
1283
|
date: AcFieldDateComponent,
|
|
1065
1284
|
autocomplete: AcFieldAutocompleteComponent,
|
|
@@ -1105,42 +1324,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1105
1324
|
}]
|
|
1106
1325
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: true }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], instancePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "instancePath", required: false }] }] } });
|
|
1107
1326
|
|
|
1108
|
-
class MaterialButton {
|
|
1109
|
-
type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
1110
|
-
matType = input(...(ngDevMode ? [undefined, { debugName: "matType" }] : []));
|
|
1111
|
-
disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
|
|
1112
|
-
disableRipple = input(...(ngDevMode ? [undefined, { debugName: "disableRipple" }] : []));
|
|
1113
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1114
|
-
className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
|
|
1115
|
-
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
1116
|
-
matIcon = input(...(ngDevMode ? [undefined, { debugName: "matIcon" }] : []));
|
|
1117
|
-
badge = input(...(ngDevMode ? [undefined, { debugName: "badge" }] : []));
|
|
1118
|
-
badgeOptions = input(...(ngDevMode ? [undefined, { debugName: "badgeOptions" }] : []));
|
|
1119
|
-
ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
1120
|
-
buttonMatType = computed(() => (this.type() === 'link' ? 'link-' : 'button-') + (this.matType() ?? 'basic'), ...(ngDevMode ? [{ debugName: "buttonMatType" }] : []));
|
|
1121
|
-
buttonClick = output();
|
|
1122
|
-
clickButton(event) {
|
|
1123
|
-
event.stopPropagation();
|
|
1124
|
-
this.buttonClick.emit();
|
|
1125
|
-
}
|
|
1126
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1127
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MaterialButton, isStandalone: true, selector: "sot-mat-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, matType: { classPropertyName: "matType", publicName: "matType", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, matIcon: { classPropertyName: "matIcon", publicName: "matIcon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeOptions: { classPropertyName: "badgeOptions", publicName: "badgeOptions", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "@switch (buttonMatType()) {\r\n @case ('button-basic') {\r\n <button matButton\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-basic') {\r\n <a type=\"link\" matButton\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-outlined') {\r\n <button matButton=\"outlined\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-outlined') {\r\n <a type=\"link\" matButton=\"outlined\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-elevated') {\r\n <button matButton=\"elevated\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-elevated') {\r\n <a type=\"link\" matButton=\"elevated\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-filled') {\r\n <button matButton=\"filled\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-filled') {\r\n <a type=\"link\" matButton=\"filled\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-tonal') {\r\n <button matButton=\"tonal\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-tonal') {\r\n <a type=\"link\" matButton=\"tonal\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-icon') {\r\n <button matIconButton\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-icon') {\r\n <a type=\"link\" matIconButton\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-fab') {\r\n <button matFab\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-fab') {\r\n <a type=\"link\" matFab\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-mini-fab') {\r\n <button matMiniFab\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-mini-fab') {\r\n <a type=\"link\" matMiniFab\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-menu') {\r\n <button mat-menu-item\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-menu') {\r\n <a type=\"link\" mat-menu-item\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n\r\n}\r\n\r\n<ng-template #buttonContent>\r\n @if (matIcon()) {\r\n <mat-icon\r\n aria-hidden=\"true\"\r\n [fontIcon]=\"matIcon()!\"\r\n ></mat-icon>\r\n }\r\n <span [innerHTML]=\"label()\"></span>\r\n</ng-template>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
1128
|
-
}
|
|
1129
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialButton, decorators: [{
|
|
1130
|
-
type: Component,
|
|
1131
|
-
args: [{ selector: 'sot-mat-button', imports: [
|
|
1132
|
-
NgClass,
|
|
1133
|
-
MatBadge,
|
|
1134
|
-
MatButton,
|
|
1135
|
-
MatIconButton,
|
|
1136
|
-
MatFabButton,
|
|
1137
|
-
MatMiniFabButton,
|
|
1138
|
-
MatMenuItem,
|
|
1139
|
-
MatIcon,
|
|
1140
|
-
NgTemplateOutlet
|
|
1141
|
-
], template: "@switch (buttonMatType()) {\r\n @case ('button-basic') {\r\n <button matButton\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-basic') {\r\n <a type=\"link\" matButton\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-outlined') {\r\n <button matButton=\"outlined\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-outlined') {\r\n <a type=\"link\" matButton=\"outlined\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-elevated') {\r\n <button matButton=\"elevated\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-elevated') {\r\n <a type=\"link\" matButton=\"elevated\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-filled') {\r\n <button matButton=\"filled\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-filled') {\r\n <a type=\"link\" matButton=\"filled\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-tonal') {\r\n <button matButton=\"tonal\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-tonal') {\r\n <a type=\"link\" matButton=\"tonal\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-icon') {\r\n <button matIconButton\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-icon') {\r\n <a type=\"link\" matIconButton\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-fab') {\r\n <button matFab\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-fab') {\r\n <a type=\"link\" matFab\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-mini-fab') {\r\n <button matMiniFab\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-mini-fab') {\r\n <a type=\"link\" matMiniFab\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-menu') {\r\n <button mat-menu-item\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-menu') {\r\n <a type=\"link\" mat-menu-item\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n\r\n}\r\n\r\n<ng-template #buttonContent>\r\n @if (matIcon()) {\r\n <mat-icon\r\n aria-hidden=\"true\"\r\n [fontIcon]=\"matIcon()!\"\r\n ></mat-icon>\r\n }\r\n <span [innerHTML]=\"label()\"></span>\r\n</ng-template>\r\n\r\n" }]
|
|
1142
|
-
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], matType: [{ type: i0.Input, args: [{ isSignal: true, alias: "matType", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], matIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "matIcon", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeOptions", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }] } });
|
|
1143
|
-
|
|
1144
1327
|
class MaterialDynamicFormComponent {
|
|
1145
1328
|
dynamicFormService = inject(DynamicFormService);
|
|
1146
1329
|
destroyRef = inject(DestroyRef);
|
|
@@ -1149,6 +1332,7 @@ class MaterialDynamicFormComponent {
|
|
|
1149
1332
|
formCancel = output();
|
|
1150
1333
|
formSubmit = output();
|
|
1151
1334
|
formChange = output();
|
|
1335
|
+
formInit = output();
|
|
1152
1336
|
get form() {
|
|
1153
1337
|
return this.dynamicFormService.form;
|
|
1154
1338
|
}
|
|
@@ -1176,7 +1360,7 @@ class MaterialDynamicFormComponent {
|
|
|
1176
1360
|
}
|
|
1177
1361
|
createForm() {
|
|
1178
1362
|
this.dynamicFormService.createForm(this.config().fields, this.config().validations, this.config().updateOn, this.initialValues());
|
|
1179
|
-
this.
|
|
1363
|
+
this.formInit.emit(this.form);
|
|
1180
1364
|
this.form.valueChanges
|
|
1181
1365
|
.pipe(distinctUntilChanged(), debounceTime(this.config().debounceTime ?? 0), takeUntilDestroyed(this.destroyRef))
|
|
1182
1366
|
.subscribe(() => {
|
|
@@ -1218,12 +1402,12 @@ class MaterialDynamicFormComponent {
|
|
|
1218
1402
|
// TODO
|
|
1219
1403
|
}
|
|
1220
1404
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1221
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MaterialDynamicFormComponent, isStandalone: true, selector: "sot-material-dynamic-form", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, initialValues: { classPropertyName: "initialValues", publicName: "initialValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formCancel: "formCancel", formSubmit: "formSubmit", formChange: "formChange" }, providers: [DynamicFormService], exportAs: ["dynamicForm"], ngImport: i0, template: "@if (form && config()) {\r\n <form class=\"dynamic-form\"\r\n [formGroup]=\"form\"\r\n (submit)=\"handleSubmit($event)\"\r\n [ngClass]=\"config()!.className?.form\">\r\n @if (this.config()!.fields) {\r\n <div class=\"dynamic-form-content\"\r\n [ngClass]=\"config()!.className?.formContent\">\r\n @for (field of config()!.fields; track field.type + field.name) {\r\n <div [hidden]=\"!!field.hidden\"\r\n [ngClass]=\"field.hostClassName\">\r\n <ng-container\r\n matDynamicField\r\n [path]=\"field.name\"\r\n [type]=\"field.type\"\r\n [field]=\"field\"\r\n [group]=\"form\"\r\n >\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- TODO Revoir l'affichage des erreurs -->\r\n @if (config()!.validations && form && !form.untouched && form.invalid) {\r\n <mat-error class=\"dynamic-form-error\">\r\n @for (validation of config()!.validations!; track validation) {\r\n @if (form.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n </mat-error>\r\n }\r\n @if (config()!.buttons) {\r\n <div class=\"dynamic-form-buttons\" [ngClass]=\"config()!.className?.formButtons\">\r\n @for (button of config()!.buttons; track $index) {\r\n <sot-mat-button\r\n [type]=\"button.type\"\r\n [className]=\"button.className\"\r\n [matType]=\"button.matButtonType\"\r\n [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n [matIcon]=\"button.matIcon\"\r\n [label]=\"button.label\"\r\n [title]=\"button.title\"\r\n [ariaLabel]=\"button.ariaLabel\"\r\n (buttonClick)=\"onClickButton(button)\"\r\n ></sot-mat-button>\r\n }\r\n </div>\r\n }\r\n </form>\r\n}\r\n", styles: [".dynamic-form-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}.dynamic-form-buttons{display:flex;flex-direction:row;gap:2rem;margin-bottom:2rem}.dynamic-form-error{margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: AcDynamicFieldDirective, selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: MaterialButton, selector: "sot-mat-button", inputs: ["type", "matType", "disabled", "disableRipple", "label", "className", "title", "matIcon", "badge", "badgeOptions", "ariaLabel"], outputs: ["buttonClick"] }] });
|
|
1405
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MaterialDynamicFormComponent, isStandalone: true, selector: "sot-material-dynamic-form", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, initialValues: { classPropertyName: "initialValues", publicName: "initialValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formCancel: "formCancel", formSubmit: "formSubmit", formChange: "formChange", formInit: "formInit" }, providers: [DynamicFormService], exportAs: ["dynamicForm"], ngImport: i0, template: "@if (form && config()) {\r\n <form class=\"dynamic-form\"\r\n [formGroup]=\"form\"\r\n (submit)=\"handleSubmit($event)\"\r\n [ngClass]=\"config()!.className?.form\">\r\n @if (this.config()!.fields) {\r\n <div class=\"dynamic-form-content\"\r\n [ngClass]=\"config()!.className?.formContent\">\r\n @for (field of config()!.fields; track field.type + field.name) {\r\n <div [hidden]=\"!!field.hidden\"\r\n [ngClass]=\"field.hostClassName\">\r\n <ng-container\r\n matDynamicField\r\n [path]=\"field.name\"\r\n [type]=\"field.type\"\r\n [field]=\"field\"\r\n [group]=\"form\"\r\n >\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- TODO Revoir l'affichage des erreurs -->\r\n @if (config()!.validations && form && !form.untouched && form.invalid) {\r\n <mat-error class=\"dynamic-form-error\">\r\n @for (validation of config()!.validations!; track validation) {\r\n @if (form.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n </mat-error>\r\n }\r\n @if (config()!.buttons) {\r\n <div class=\"dynamic-form-buttons\" [ngClass]=\"config()!.className?.formButtons\">\r\n @for (button of config()!.buttons; track $index) {\r\n <sot-mat-button\r\n [type]=\"button.type\"\r\n [className]=\"button.className\"\r\n [matType]=\"button.matButtonType\"\r\n [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n [matIcon]=\"button.matIcon\"\r\n [label]=\"button.label\"\r\n [title]=\"button.title\"\r\n [ariaLabel]=\"button.ariaLabel\"\r\n (buttonClick)=\"onClickButton(button)\"\r\n ></sot-mat-button>\r\n }\r\n </div>\r\n }\r\n </form>\r\n}\r\n", styles: [".dynamic-form-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}.dynamic-form-buttons{display:flex;flex-direction:row;gap:2rem;margin-bottom:2rem}.dynamic-form-error{margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: AcDynamicFieldDirective, selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: MaterialButton, selector: "sot-mat-button", inputs: ["type", "matType", "disabled", "disableRipple", "label", "className", "title", "matIcon", "badge", "badgeOptions", "ariaLabel"], outputs: ["buttonClick"] }] });
|
|
1222
1406
|
}
|
|
1223
1407
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialDynamicFormComponent, decorators: [{
|
|
1224
1408
|
type: Component,
|
|
1225
1409
|
args: [{ exportAs: 'dynamicForm', selector: 'sot-material-dynamic-form', standalone: true, imports: [AcDynamicFieldDirective, NgClass, ReactiveFormsModule, MatError, MatIconModule, MatButtonModule, MaterialButton], providers: [DynamicFormService], template: "@if (form && config()) {\r\n <form class=\"dynamic-form\"\r\n [formGroup]=\"form\"\r\n (submit)=\"handleSubmit($event)\"\r\n [ngClass]=\"config()!.className?.form\">\r\n @if (this.config()!.fields) {\r\n <div class=\"dynamic-form-content\"\r\n [ngClass]=\"config()!.className?.formContent\">\r\n @for (field of config()!.fields; track field.type + field.name) {\r\n <div [hidden]=\"!!field.hidden\"\r\n [ngClass]=\"field.hostClassName\">\r\n <ng-container\r\n matDynamicField\r\n [path]=\"field.name\"\r\n [type]=\"field.type\"\r\n [field]=\"field\"\r\n [group]=\"form\"\r\n >\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- TODO Revoir l'affichage des erreurs -->\r\n @if (config()!.validations && form && !form.untouched && form.invalid) {\r\n <mat-error class=\"dynamic-form-error\">\r\n @for (validation of config()!.validations!; track validation) {\r\n @if (form.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n </mat-error>\r\n }\r\n @if (config()!.buttons) {\r\n <div class=\"dynamic-form-buttons\" [ngClass]=\"config()!.className?.formButtons\">\r\n @for (button of config()!.buttons; track $index) {\r\n <sot-mat-button\r\n [type]=\"button.type\"\r\n [className]=\"button.className\"\r\n [matType]=\"button.matButtonType\"\r\n [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n [matIcon]=\"button.matIcon\"\r\n [label]=\"button.label\"\r\n [title]=\"button.title\"\r\n [ariaLabel]=\"button.ariaLabel\"\r\n (buttonClick)=\"onClickButton(button)\"\r\n ></sot-mat-button>\r\n }\r\n </div>\r\n }\r\n </form>\r\n}\r\n", styles: [".dynamic-form-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}.dynamic-form-buttons{display:flex;flex-direction:row;gap:2rem;margin-bottom:2rem}.dynamic-form-error{margin-bottom:2rem}\n"] }]
|
|
1226
|
-
}], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], initialValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValues", required: false }] }], formCancel: [{ type: i0.Output, args: ["formCancel"] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }], formChange: [{ type: i0.Output, args: ["formChange"] }] } });
|
|
1410
|
+
}], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], initialValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValues", required: false }] }], formCancel: [{ type: i0.Output, args: ["formCancel"] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }], formChange: [{ type: i0.Output, args: ["formChange"] }], formInit: [{ type: i0.Output, args: ["formInit"] }] } });
|
|
1227
1411
|
|
|
1228
1412
|
class MaterialDynamicFormModalComponent {
|
|
1229
1413
|
dialogRef = inject((MatDialogRef));
|
|
@@ -1256,7 +1440,7 @@ class MaterialDynamicFormModalComponent {
|
|
|
1256
1440
|
}
|
|
1257
1441
|
}
|
|
1258
1442
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialDynamicFormModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1259
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MaterialDynamicFormModalComponent, isStandalone: true, selector: "ac-dynamic-form-modal", providers: [DynamicFormService], ngImport: i0, template: "<h2 class=\"modal-title\" matDialogTitle> {{ data.title }}</h2>\r\n\r\n<div matDialogContent>\r\n @if (data.description) {\r\n <p [innerHTML]=\"data.description\"></p>\r\n }\r\n @if (form) {\r\n <form class=\"dynamic-form\"\r\n [formGroup]=\"form\"\r\n [ngClass]=\"data.className?.form\">\r\n <div class=\"dynamic-form-content\"\r\n [ngClass]=\"data.className?.formContent\">\r\n @for (field of data.fields; track field) {\r\n <div\r\n [hidden]=\"!!field.hidden\"\r\n [ngClass]=\"field.hostClassName\">\r\n <ng-container\r\n matDynamicField\r\n [path]=\"field.name\"\r\n [type]=\"field.type\"\r\n [field]=\"field\"\r\n [group]=\"form\"\r\n >\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n </form>\r\n }\r\n @if (message) {\r\n <div [innerHTML]=\"message\"\r\n [ngClass]=\"{'message-success': status === 'OK', 'message-error': status === 'ERROR'}\"\r\n ></div>\r\n }\r\n</div>\r\n\r\n<div matDialogActions>\r\n <div class=\"modal-action-buttons\" [ngClass]=\"data.className?.formButtons\">\r\n @for (button of data.buttons; track $index) {\r\n <sot-mat-button\r\n [className]=\"button.className\"\r\n [matType]=\"button.matButtonType\"\r\n [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n [matIcon]=\"button.matIcon\"\r\n [label]=\"button.label\"\r\n [title]=\"button.title\"\r\n [ariaLabel]=\"button.ariaLabel\"\r\n (buttonClick)=\"onClickButton(button)\"\r\n ></sot-mat-button>\r\n }\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type:
|
|
1443
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MaterialDynamicFormModalComponent, isStandalone: true, selector: "ac-dynamic-form-modal", providers: [DynamicFormService], ngImport: i0, template: "<h2 class=\"modal-title\" matDialogTitle> {{ data.title }}</h2>\r\n\r\n<div matDialogContent>\r\n @if (data.description) {\r\n <p [innerHTML]=\"data.description\"></p>\r\n }\r\n @if (form) {\r\n <form class=\"dynamic-form\"\r\n [formGroup]=\"form\"\r\n [ngClass]=\"data.className?.form\">\r\n <div class=\"dynamic-form-content\"\r\n [ngClass]=\"data.className?.formContent\">\r\n @for (field of data.fields; track field) {\r\n <div\r\n [hidden]=\"!!field.hidden\"\r\n [ngClass]=\"field.hostClassName\">\r\n <ng-container\r\n matDynamicField\r\n [path]=\"field.name\"\r\n [type]=\"field.type\"\r\n [field]=\"field\"\r\n [group]=\"form\"\r\n >\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n </form>\r\n }\r\n @if (message) {\r\n <div [innerHTML]=\"message\"\r\n [ngClass]=\"{'message-success': status === 'OK', 'message-error': status === 'ERROR'}\"\r\n ></div>\r\n }\r\n</div>\r\n\r\n<div matDialogActions>\r\n <div class=\"modal-action-buttons\" [ngClass]=\"data.className?.formButtons\">\r\n @for (button of data.buttons; track $index) {\r\n <sot-mat-button\r\n [className]=\"button.className\"\r\n [matType]=\"button.matButtonType\"\r\n [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n [matIcon]=\"button.matIcon\"\r\n [label]=\"button.label\"\r\n [title]=\"button.title\"\r\n [ariaLabel]=\"button.ariaLabel\"\r\n (buttonClick)=\"onClickButton(button)\"\r\n ></sot-mat-button>\r\n }\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: AcDynamicFieldDirective, selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "component", type: MaterialButton, selector: "sot-mat-button", inputs: ["type", "matType", "disabled", "disableRipple", "label", "className", "title", "matIcon", "badge", "badgeOptions", "ariaLabel"], outputs: ["buttonClick"] }] });
|
|
1260
1444
|
}
|
|
1261
1445
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialDynamicFormModalComponent, decorators: [{
|
|
1262
1446
|
type: Component,
|
|
@@ -2115,5 +2299,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
2115
2299
|
* Generated bundle index. Do not edit.
|
|
2116
2300
|
*/
|
|
2117
2301
|
|
|
2118
|
-
export { AbstractControlFieldComponent, AbstractFieldComponent, AutocompleteAttribute, ClassicDynamicFormComponent, ConditionsService, DsfrDynamicFormComponent, DynamicFormService, MaterialDynamicFormComponent, MaterialDynamicFormModalComponent };
|
|
2302
|
+
export { AbstractControlFieldComponent, AbstractFieldComponent, AcCustomComponentField, AutocompleteAttribute, ClassicDynamicFormComponent, ConditionsService, DsfrDynamicFormComponent, DynamicFormService, MaterialDynamicFormComponent, MaterialDynamicFormModalComponent };
|
|
2119
2303
|
//# sourceMappingURL=sotoa-ui-dynamic-form.mjs.map
|