@sotoa-ui/dynamic-form 0.0.1 → 0.0.3
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, Directive, output, effect } from '@angular/core';
|
|
3
|
-
import { distinctUntilChanged, isObservable } from 'rxjs';
|
|
2
|
+
import { Injectable, inject, DestroyRef, Component, forwardRef, ChangeDetectorRef, ViewContainerRef, EnvironmentInjector, input, EventEmitter, Output, Optional, Host, SkipSelf, Directive, computed, output, effect } from '@angular/core';
|
|
3
|
+
import { distinctUntilChanged, isObservable, take } from 'rxjs';
|
|
4
4
|
import * as i1 from '@angular/forms';
|
|
5
|
-
import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
|
|
5
|
+
import { FormBuilder, Validators, ReactiveFormsModule, NgControl } from '@angular/forms';
|
|
6
6
|
import * as _ from 'lodash-es';
|
|
7
7
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
8
8
|
import { debounceTime } from 'rxjs/operators';
|
|
@@ -16,7 +16,7 @@ import { MatIconModule, MatIcon } from '@angular/material/icon';
|
|
|
16
16
|
import * as i3 from '@angular/material/input';
|
|
17
17
|
import { MatInputModule } from '@angular/material/input';
|
|
18
18
|
import * as i5 from '@angular/material/button';
|
|
19
|
-
import { MatButtonModule, MatButton } from '@angular/material/button';
|
|
19
|
+
import { MatButtonModule, MatButton, MatIconButton, MatFabButton, MatMiniFabButton } from '@angular/material/button';
|
|
20
20
|
import * as i1$1 from '@angular/material/expansion';
|
|
21
21
|
import { MatAccordion, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, MatExpansionModule } from '@angular/material/expansion';
|
|
22
22
|
import { MatCardModule } from '@angular/material/card';
|
|
@@ -27,6 +27,10 @@ import * as i3$2 from '@angular/material/select';
|
|
|
27
27
|
import { MatSelectModule } from '@angular/material/select';
|
|
28
28
|
import * as i2$3 from '@angular/material/slide-toggle';
|
|
29
29
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
30
|
+
import { MatBadge } from '@angular/material/badge';
|
|
31
|
+
import { MatMenuItem } from '@angular/material/menu';
|
|
32
|
+
import * as i2$4 from '@angular/material/dialog';
|
|
33
|
+
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
|
30
34
|
|
|
31
35
|
class ConditionsService {
|
|
32
36
|
constructor() {
|
|
@@ -809,6 +813,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
809
813
|
args: [{ selector: 'sot-field-toggle', standalone: true, imports: [ReactiveFormsModule, NgClass, MatCheckboxModule, MatError, MatSlideToggleModule], template: "<div class=\"sot-formfield sot-formfield-toggle\" [ngClass]=\"field.className\">\r\n <div [formGroup]=\"group\">\r\n <mat-slide-toggle\r\n [formControlName]=\"field.name\"\r\n [attr.id]=\"'toggle-' + field.name\"\r\n [labelPosition]=\"field.labelPosition ?? 'after'\"\r\n >\r\n {{ field.label }}\r\n @if (required) {\r\n <span class=\"red\">*</span>\r\n }\r\n </mat-slide-toggle>\r\n\r\n <div class=\"messages-group\" [attr.id]=\"'toggle-' + field.name + '-error'\" aria-live=\"assertive\">\r\n @for (validation of field.validations; track validation) {\r\n @if (control && !control.untouched && control.hasError(validation.name)) {\r\n <p>{{ validation.message }}</p>\r\n }\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n" }]
|
|
810
814
|
}] });
|
|
811
815
|
|
|
816
|
+
class AcFieldCustomDirective extends NgControl {
|
|
817
|
+
parent;
|
|
818
|
+
container = inject(ViewContainerRef);
|
|
819
|
+
injector = inject(EnvironmentInjector);
|
|
820
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
821
|
+
group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
|
|
822
|
+
component;
|
|
823
|
+
// tslint:disable-next-line:no-output-rename
|
|
824
|
+
update = new EventEmitter();
|
|
825
|
+
pcontrol;
|
|
826
|
+
constructor(parent) {
|
|
827
|
+
super();
|
|
828
|
+
this.parent = parent;
|
|
829
|
+
}
|
|
830
|
+
ngOnChanges() {
|
|
831
|
+
if (this.component) {
|
|
832
|
+
this.component.instance.field = this.field();
|
|
833
|
+
this.component.instance.group = this.group();
|
|
834
|
+
}
|
|
835
|
+
}
|
|
836
|
+
ngOnInit() {
|
|
837
|
+
if (!this.field().component) {
|
|
838
|
+
throw new Error(`Trying to use an empty component`);
|
|
839
|
+
}
|
|
840
|
+
this.name = this.field().name;
|
|
841
|
+
this.container.clear();
|
|
842
|
+
this.component = this.container.createComponent(this.field().component, {
|
|
843
|
+
environmentInjector: this.injector
|
|
844
|
+
});
|
|
845
|
+
this.valueAccessor = this.component.instance;
|
|
846
|
+
this.component.instance.field = this.field();
|
|
847
|
+
this.component.instance.group = this.group();
|
|
848
|
+
if (this.formDirective) {
|
|
849
|
+
this.pcontrol = this.formDirective.addControl(this);
|
|
850
|
+
}
|
|
851
|
+
}
|
|
852
|
+
get path() {
|
|
853
|
+
// @ts-ignore
|
|
854
|
+
return [...this.parent.path, this.name];
|
|
855
|
+
}
|
|
856
|
+
get formDirective() {
|
|
857
|
+
return this.parent ? this.parent.formDirective : null;
|
|
858
|
+
}
|
|
859
|
+
get control() {
|
|
860
|
+
return this.pcontrol;
|
|
861
|
+
}
|
|
862
|
+
get validator() {
|
|
863
|
+
return null;
|
|
864
|
+
}
|
|
865
|
+
get asyncValidator() {
|
|
866
|
+
return null;
|
|
867
|
+
}
|
|
868
|
+
viewToModelUpdate(newValue) {
|
|
869
|
+
this.update.emit(newValue);
|
|
870
|
+
}
|
|
871
|
+
ngOnDestroy() {
|
|
872
|
+
if (this.formDirective) {
|
|
873
|
+
this.formDirective.removeControl(this);
|
|
874
|
+
}
|
|
875
|
+
if (this.component) {
|
|
876
|
+
this.component.destroy();
|
|
877
|
+
}
|
|
878
|
+
}
|
|
879
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldCustomDirective, deps: [{ token: i1.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
880
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: AcFieldCustomDirective, isStandalone: true, selector: "[fieldCustom]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { update: "ngModelChange" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
881
|
+
}
|
|
882
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldCustomDirective, decorators: [{
|
|
883
|
+
type: Directive,
|
|
884
|
+
args: [{
|
|
885
|
+
selector: '[fieldCustom]',
|
|
886
|
+
standalone: true,
|
|
887
|
+
}]
|
|
888
|
+
}], ctorParameters: () => [{ type: i1.ControlContainer, decorators: [{
|
|
889
|
+
type: Optional
|
|
890
|
+
}, {
|
|
891
|
+
type: Host
|
|
892
|
+
}, {
|
|
893
|
+
type: SkipSelf
|
|
894
|
+
}] }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], update: [{
|
|
895
|
+
type: Output,
|
|
896
|
+
args: ['ngModelChange']
|
|
897
|
+
}] } });
|
|
898
|
+
|
|
899
|
+
class AcFieldCustomComponent extends AbstractControlFieldComponent {
|
|
900
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldCustomComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
901
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: AcFieldCustomComponent, isStandalone: true, selector: "ac-field-custom", usesInheritance: true, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: AcFieldCustomDirective, selector: "[fieldCustom]", inputs: ["field", "group"], outputs: ["ngModelChange"] }] });
|
|
902
|
+
}
|
|
903
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldCustomComponent, decorators: [{
|
|
904
|
+
type: Component,
|
|
905
|
+
args: [{ selector: "ac-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" }]
|
|
906
|
+
}] });
|
|
907
|
+
|
|
812
908
|
const components$2 = {
|
|
813
909
|
text: AcDivTextComponent$2,
|
|
814
910
|
group: AcGroupComponent$2,
|
|
@@ -821,13 +917,12 @@ const components$2 = {
|
|
|
821
917
|
select: AcFieldSelectComponent$2,
|
|
822
918
|
textarea: AcFieldTextareaComponent$2,
|
|
823
919
|
toggle: AcFieldToggleComponent$2,
|
|
920
|
+
customField: AcFieldCustomComponent,
|
|
824
921
|
/*
|
|
825
922
|
date: AcFieldDateComponent,
|
|
826
923
|
autocomplete: AcFieldAutocompleteComponent,
|
|
827
|
-
customField: AcFieldCustomComponent,
|
|
828
924
|
tabs: AcTabsComponent,
|
|
829
925
|
file: AcFieldFileComponent,
|
|
830
|
-
|
|
831
926
|
*/
|
|
832
927
|
};
|
|
833
928
|
let AcDynamicFieldDirective$2 = class AcDynamicFieldDirective {
|
|
@@ -869,6 +964,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
869
964
|
}]
|
|
870
965
|
}], 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 }] }] } });
|
|
871
966
|
|
|
967
|
+
class MaterialButton {
|
|
968
|
+
type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
969
|
+
matType = input(...(ngDevMode ? [undefined, { debugName: "matType" }] : []));
|
|
970
|
+
disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
|
|
971
|
+
disableRipple = input(...(ngDevMode ? [undefined, { debugName: "disableRipple" }] : []));
|
|
972
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
973
|
+
className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
|
|
974
|
+
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
975
|
+
matIcon = input(...(ngDevMode ? [undefined, { debugName: "matIcon" }] : []));
|
|
976
|
+
badge = input(...(ngDevMode ? [undefined, { debugName: "badge" }] : []));
|
|
977
|
+
badgeOptions = input(...(ngDevMode ? [undefined, { debugName: "badgeOptions" }] : []));
|
|
978
|
+
ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
979
|
+
buttonMatType = computed(() => (this.type() === 'link' ? 'link-' : 'button-') + (this.matType() ?? 'basic'), ...(ngDevMode ? [{ debugName: "buttonMatType" }] : []));
|
|
980
|
+
buttonClick = output();
|
|
981
|
+
clickButton(event) {
|
|
982
|
+
event.stopPropagation();
|
|
983
|
+
this.buttonClick.emit();
|
|
984
|
+
}
|
|
985
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
986
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MaterialButton, isStandalone: true, selector: "sot-material-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"] }] });
|
|
987
|
+
}
|
|
988
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialButton, decorators: [{
|
|
989
|
+
type: Component,
|
|
990
|
+
args: [{ selector: 'sot-material-button', imports: [
|
|
991
|
+
NgClass,
|
|
992
|
+
MatBadge,
|
|
993
|
+
MatButton,
|
|
994
|
+
MatIconButton,
|
|
995
|
+
MatFabButton,
|
|
996
|
+
MatMiniFabButton,
|
|
997
|
+
MatMenuItem,
|
|
998
|
+
MatIcon
|
|
999
|
+
], 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" }]
|
|
1000
|
+
}], 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"] }] } });
|
|
1001
|
+
|
|
872
1002
|
class AcMaterialDynamicFormComponent {
|
|
873
1003
|
dynamicFormService = inject(DynamicFormService);
|
|
874
1004
|
destroyRef = inject(DestroyRef);
|
|
@@ -946,13 +1076,51 @@ class AcMaterialDynamicFormComponent {
|
|
|
946
1076
|
// TODO
|
|
947
1077
|
}
|
|
948
1078
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcMaterialDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
949
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcMaterialDynamicFormComponent, 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 sotDynamicField\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
|
|
1079
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcMaterialDynamicFormComponent, 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 sotDynamicField\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-material-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-material-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$2, selector: "[sotDynamicField]", 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-material-button", inputs: ["type", "matType", "disabled", "disableRipple", "label", "className", "title", "matIcon", "badge", "badgeOptions", "ariaLabel"], outputs: ["buttonClick"] }] });
|
|
950
1080
|
}
|
|
951
1081
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcMaterialDynamicFormComponent, decorators: [{
|
|
952
1082
|
type: Component,
|
|
953
|
-
args: [{ exportAs: 'dynamicForm', selector: 'sot-material-dynamic-form', standalone: true, imports: [AcDynamicFieldDirective$2, NgClass, ReactiveFormsModule, MatError, MatIconModule, MatButtonModule], 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 sotDynamicField\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
|
|
1083
|
+
args: [{ exportAs: 'dynamicForm', selector: 'sot-material-dynamic-form', standalone: true, imports: [AcDynamicFieldDirective$2, 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 sotDynamicField\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-material-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-material-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"] }]
|
|
954
1084
|
}], 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"] }] } });
|
|
955
1085
|
|
|
1086
|
+
class AcMaterialDynamicFormModalComponent {
|
|
1087
|
+
dialogRef = inject((MatDialogRef));
|
|
1088
|
+
dynamicFormService = inject(DynamicFormService);
|
|
1089
|
+
data = inject(MAT_DIALOG_DATA);
|
|
1090
|
+
status;
|
|
1091
|
+
message;
|
|
1092
|
+
get form() {
|
|
1093
|
+
return this.dynamicFormService.form;
|
|
1094
|
+
}
|
|
1095
|
+
constructor() {
|
|
1096
|
+
this.dynamicFormService.createForm(this.data.fields, this.data.validations, this.data.updateOn ?? "change", this.data.initialObject);
|
|
1097
|
+
}
|
|
1098
|
+
ngOnInit() {
|
|
1099
|
+
}
|
|
1100
|
+
onClickButton(button) {
|
|
1101
|
+
if (button.type === 'reset') {
|
|
1102
|
+
this.dialogRef.close();
|
|
1103
|
+
}
|
|
1104
|
+
if (button.action) {
|
|
1105
|
+
button.action(this.form, this.data.initialObject).pipe(take(1)).subscribe((resp) => {
|
|
1106
|
+
if (resp === true) {
|
|
1107
|
+
this.dialogRef.close();
|
|
1108
|
+
}
|
|
1109
|
+
else if (resp) {
|
|
1110
|
+
this.message = resp.message;
|
|
1111
|
+
this.status = resp.status;
|
|
1112
|
+
}
|
|
1113
|
+
});
|
|
1114
|
+
}
|
|
1115
|
+
}
|
|
1116
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcMaterialDynamicFormModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1117
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcMaterialDynamicFormModalComponent, 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 sotDynamicField\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-material-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-material-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: i2$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: AcDynamicFieldDirective$2, selector: "[sotDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "component", type: MaterialButton, selector: "sot-material-button", inputs: ["type", "matType", "disabled", "disableRipple", "label", "className", "title", "matIcon", "badge", "badgeOptions", "ariaLabel"], outputs: ["buttonClick"] }] });
|
|
1118
|
+
}
|
|
1119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcMaterialDynamicFormModalComponent, decorators: [{
|
|
1120
|
+
type: Component,
|
|
1121
|
+
args: [{ selector: "ac-dynamic-form-modal", standalone: true, imports: [NgClass, ReactiveFormsModule, MatIconModule, MatButtonModule, MatDialogModule, AcDynamicFieldDirective$2, MaterialButton], providers: [DynamicFormService], 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 sotDynamicField\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-material-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-material-button>\r\n }\r\n </div>\r\n</div>\r\n" }]
|
|
1122
|
+
}], ctorParameters: () => [] });
|
|
1123
|
+
|
|
956
1124
|
let AcDivTextComponent$1 = class AcDivTextComponent extends AbstractFieldComponent {
|
|
957
1125
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcDivTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
958
1126
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcDivTextComponent, isStandalone: true, selector: "sot-div-text", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-text\" [ngClass]=\"field.className\">\n <div [innerHTML]=\"field.label\"></div>\n @if(field.description) {\n <p [innerHTML]=\"field.description\"></p>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
@@ -1808,5 +1976,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1808
1976
|
* Generated bundle index. Do not edit.
|
|
1809
1977
|
*/
|
|
1810
1978
|
|
|
1811
|
-
export { AbstractControlFieldComponent, AbstractFieldComponent, AcClassicDynamicFormComponent, AcDsfrDynamicFormComponent, AcMaterialDynamicFormComponent, AutocompleteAttribute, ConditionsService, DynamicFormService };
|
|
1979
|
+
export { AbstractControlFieldComponent, AbstractFieldComponent, AcClassicDynamicFormComponent, AcDsfrDynamicFormComponent, AcMaterialDynamicFormComponent, AcMaterialDynamicFormModalComponent, AutocompleteAttribute, ConditionsService, DynamicFormService };
|
|
1812
1980
|
//# sourceMappingURL=sotoa-ui-dynamic-form.mjs.map
|