@sotoa-ui/dynamic-form 0.0.10 → 0.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -805,11 +805,11 @@ class MatFieldSelectComponent extends AbstractControlFieldComponent {
|
|
|
805
805
|
}
|
|
806
806
|
}
|
|
807
807
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
808
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldSelectComponent, isStandalone: true, selector: "sot-mat-field-select", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-select\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\">\r\n <mat-form-field>\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n <mat-select\r\n [id]=\"uuid\"\r\n [formControlName]=\"field.name\"\r\n panelClass=\"sot-formfield-select-panel\">\r\n @if (field.resetOption) {\r\n <mat-option [value]=\"undefined\">\r\n {{ field.resetOptionLabel }}\r\n </mat-option>\r\n }\r\n @if (field.options) {\r\n @if (field.groupLabelKey) {\r\n @for (group of options; track group) {\r\n <mat-optgroup [label]=\"field.groupLabelKey ? group[field.groupLabelKey] : ''\">\r\n @if (field.groupOptionsKey && group[field.groupOptionsKey]) {\r\n @for (item of group[field.groupOptionsKey]; track item) {\r\n <mat-option [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </mat-option>\r\n }\r\n }\r\n </mat-optgroup>\r\n }\r\n } @else {\r\n @for (item of options; track item) {\r\n <mat-option [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </mat-option>\r\n }\r\n }\r\n }\r\n </mat-select>\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 @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n <mat-error>\r\n @if (control && !control.untouched && control.invalid) {\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 }\r\n </mat-error>\r\n </mat-form-field>\r\n</div>\r\n", styles: [".sot-formfield-select mat-form-field{width:100%}.sot-formfield-select mat-form-field[hidden]{display:none}::ng-deep .sot-formfield-select-panel .mdc-list-item__primary-text{width:100%}.sot-formfield-select-prefix,.sot-formfield-select-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.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: MatSelectModule }, { kind: "component", type: i3$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$2.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }] });
|
|
808
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldSelectComponent, isStandalone: true, selector: "sot-mat-field-select", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-select\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\">\r\n <mat-form-field>\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n <mat-select\r\n [id]=\"uuid\"\r\n [formControlName]=\"field.name\"\r\n [multiple]=\"field.multiple\"\r\n panelClass=\"sot-formfield-select-panel\">\r\n @if (field.resetOption) {\r\n <mat-option [value]=\"undefined\">\r\n {{ field.resetOptionLabel }}\r\n </mat-option>\r\n }\r\n @if (field.options) {\r\n @if (field.groupLabelKey) {\r\n @for (group of options; track group) {\r\n <mat-optgroup [label]=\"field.groupLabelKey ? group[field.groupLabelKey] : ''\">\r\n @if (field.groupOptionsKey && group[field.groupOptionsKey]) {\r\n @for (item of group[field.groupOptionsKey]; track item) {\r\n <mat-option [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </mat-option>\r\n }\r\n }\r\n </mat-optgroup>\r\n }\r\n } @else {\r\n @for (item of options; track item) {\r\n <mat-option [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </mat-option>\r\n }\r\n }\r\n }\r\n </mat-select>\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 @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n <mat-error>\r\n @if (control && !control.untouched && control.invalid) {\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 }\r\n </mat-error>\r\n </mat-form-field>\r\n</div>\r\n", styles: [".sot-formfield-select mat-form-field{width:100%}.sot-formfield-select mat-form-field[hidden]{display:none}::ng-deep .sot-formfield-select-panel .mdc-list-item__primary-text{width:100%}.sot-formfield-select-prefix,.sot-formfield-select-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.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: MatSelectModule }, { kind: "component", type: i3$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$2.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }] });
|
|
809
809
|
}
|
|
810
810
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldSelectComponent, decorators: [{
|
|
811
811
|
type: Component,
|
|
812
|
-
args: [{ selector: 'sot-mat-field-select', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatSelectModule], template: "<div class=\"sot-formfield sot-formfield-select\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\">\r\n <mat-form-field>\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n <mat-select\r\n [id]=\"uuid\"\r\n [formControlName]=\"field.name\"\r\n panelClass=\"sot-formfield-select-panel\">\r\n @if (field.resetOption) {\r\n <mat-option [value]=\"undefined\">\r\n {{ field.resetOptionLabel }}\r\n </mat-option>\r\n }\r\n @if (field.options) {\r\n @if (field.groupLabelKey) {\r\n @for (group of options; track group) {\r\n <mat-optgroup [label]=\"field.groupLabelKey ? group[field.groupLabelKey] : ''\">\r\n @if (field.groupOptionsKey && group[field.groupOptionsKey]) {\r\n @for (item of group[field.groupOptionsKey]; track item) {\r\n <mat-option [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </mat-option>\r\n }\r\n }\r\n </mat-optgroup>\r\n }\r\n } @else {\r\n @for (item of options; track item) {\r\n <mat-option [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </mat-option>\r\n }\r\n }\r\n }\r\n </mat-select>\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 @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n <mat-error>\r\n @if (control && !control.untouched && control.invalid) {\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 }\r\n </mat-error>\r\n </mat-form-field>\r\n</div>\r\n", styles: [".sot-formfield-select mat-form-field{width:100%}.sot-formfield-select mat-form-field[hidden]{display:none}::ng-deep .sot-formfield-select-panel .mdc-list-item__primary-text{width:100%}.sot-formfield-select-prefix,.sot-formfield-select-suffix{padding:0 .5rem}\n"] }]
|
|
812
|
+
args: [{ selector: 'sot-mat-field-select', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatSelectModule], template: "<div class=\"sot-formfield sot-formfield-select\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\">\r\n <mat-form-field>\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n <mat-select\r\n [id]=\"uuid\"\r\n [formControlName]=\"field.name\"\r\n [multiple]=\"field.multiple\"\r\n panelClass=\"sot-formfield-select-panel\">\r\n @if (field.resetOption) {\r\n <mat-option [value]=\"undefined\">\r\n {{ field.resetOptionLabel }}\r\n </mat-option>\r\n }\r\n @if (field.options) {\r\n @if (field.groupLabelKey) {\r\n @for (group of options; track group) {\r\n <mat-optgroup [label]=\"field.groupLabelKey ? group[field.groupLabelKey] : ''\">\r\n @if (field.groupOptionsKey && group[field.groupOptionsKey]) {\r\n @for (item of group[field.groupOptionsKey]; track item) {\r\n <mat-option [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </mat-option>\r\n }\r\n }\r\n </mat-optgroup>\r\n }\r\n } @else {\r\n @for (item of options; track item) {\r\n <mat-option [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </mat-option>\r\n }\r\n }\r\n }\r\n </mat-select>\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 @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n <mat-error>\r\n @if (control && !control.untouched && control.invalid) {\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 }\r\n </mat-error>\r\n </mat-form-field>\r\n</div>\r\n", styles: [".sot-formfield-select mat-form-field{width:100%}.sot-formfield-select mat-form-field[hidden]{display:none}::ng-deep .sot-formfield-select-panel .mdc-list-item__primary-text{width:100%}.sot-formfield-select-prefix,.sot-formfield-select-suffix{padding:0 .5rem}\n"] }]
|
|
813
813
|
}] });
|
|
814
814
|
|
|
815
815
|
class MatFieldTextareaComponent extends AbstractControlFieldComponent {
|
|
@@ -1701,11 +1701,11 @@ class AcFieldSelectComponent extends AbstractControlFieldComponent {
|
|
|
1701
1701
|
}
|
|
1702
1702
|
}
|
|
1703
1703
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1704
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcFieldSelectComponent, isStandalone: true, selector: "sot-dsfr-field-select", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-select\" [ngClass]=\"field.className\">\r\n <div\r\n [formGroup]=\"group\"\r\n class=\"fr-select-group\"\r\n [ngClass]=\"{\r\n 'fr-select-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n 'fr-select-group--valid': control && !control.untouched && control.valid,\r\n 'fr-select-group--disabled': control && control.disabled,\r\n }\">\r\n <label\r\n class=\"fr-label\"\r\n [ngClass]=\"field.labelClassName\"\r\n [attr.for]=\"'sot-select-' + uuid\">\r\n {{ field.label }}\r\n @if (required) {\r\n <span class=\"sot-label-required\">*</span>\r\n }\r\n @if (field.description) {\r\n <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n }\r\n </label>\r\n <div class=\"fr-input-wrap fr-input-wrap--addon\">\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 class=\"fr-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 <select\r\n class=\"fr-select\"\r\n [ngClass]=\"{\r\n 'fr-select--error': control && !control.untouched && !control.valid && !control.disabled,\r\n 'fr-select--valid': control && !control.untouched && control.valid,\r\n 'fr-select--disabled': control && control.disabled,\r\n }\"\r\n [attr.id]=\"'sot-select-' + uuid\"\r\n [formControlName]=\"field.name\">\r\n @if (field.resetOption) {\r\n <option [ngValue]=\"undefined\">\r\n {{ field.resetOptionLabel }}\r\n </option>\r\n }\r\n\r\n @if (field.options) {\r\n @if (field.groupLabelKey) {\r\n @for (group of options; track group) {\r\n <optgroup [label]=\"field.groupLabelKey ? group[field.groupLabelKey] : ''\">\r\n @if (field.groupOptionsKey && group[field.groupOptionsKey]) {\r\n @for (item of group[field.groupOptionsKey]; track item) {\r\n <option\r\n [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </option>\r\n }\r\n }\r\n </optgroup>\r\n }\r\n } @else {\r\n @for (item of options; track item) {\r\n <option\r\n [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </option>\r\n }\r\n }\r\n\r\n }\r\n </select>\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (suffix.action) {\r\n <button type=\"button\"\r\n class=\"fr-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 </div>\r\n <div\r\n class=\"fr-messages-group\"\r\n [attr.id]=\"'sot-select-' + uuid + '-error'\"\r\n 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 class=\"fr-message fr-message--error\">\r\n {{ validation.message }}\r\n </p>\r\n }\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".sot-formfield-select mat-form-field{width:100%}.sot-formfield-select mat-form-field[hidden]{display:none}::ng-deep .sot-formfield-select-panel .mdc-list-item__primary-text{width:100%}.sot-formfield-select-prefix,.sot-formfield-select-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.
|
|
1704
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcFieldSelectComponent, isStandalone: true, selector: "sot-dsfr-field-select", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-select\" [ngClass]=\"field.className\">\r\n <div\r\n [formGroup]=\"group\"\r\n class=\"fr-select-group\"\r\n [ngClass]=\"{\r\n 'fr-select-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n 'fr-select-group--valid': control && !control.untouched && control.valid,\r\n 'fr-select-group--disabled': control && control.disabled,\r\n }\">\r\n <label\r\n class=\"fr-label\"\r\n [ngClass]=\"field.labelClassName\"\r\n [attr.for]=\"'sot-select-' + uuid\">\r\n {{ field.label }}\r\n @if (required) {\r\n <span class=\"sot-label-required\">*</span>\r\n }\r\n @if (field.description) {\r\n <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n }\r\n </label>\r\n <div class=\"fr-input-wrap fr-input-wrap--addon\">\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 class=\"fr-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 <select\r\n class=\"fr-select\"\r\n [multiple]=\"field.multiple\"\r\n [ngClass]=\"{\r\n 'fr-select--error': control && !control.untouched && !control.valid && !control.disabled,\r\n 'fr-select--valid': control && !control.untouched && control.valid,\r\n 'fr-select--disabled': control && control.disabled,\r\n }\"\r\n [attr.id]=\"'sot-select-' + uuid\"\r\n [formControlName]=\"field.name\">\r\n @if (field.resetOption) {\r\n <option [ngValue]=\"undefined\">\r\n {{ field.resetOptionLabel }}\r\n </option>\r\n }\r\n\r\n @if (field.options) {\r\n @if (field.groupLabelKey) {\r\n @for (group of options; track group) {\r\n <optgroup [label]=\"field.groupLabelKey ? group[field.groupLabelKey] : ''\">\r\n @if (field.groupOptionsKey && group[field.groupOptionsKey]) {\r\n @for (item of group[field.groupOptionsKey]; track item) {\r\n <option\r\n [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </option>\r\n }\r\n }\r\n </optgroup>\r\n }\r\n } @else {\r\n @for (item of options; track item) {\r\n <option\r\n [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </option>\r\n }\r\n }\r\n\r\n }\r\n </select>\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (suffix.action) {\r\n <button type=\"button\"\r\n class=\"fr-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 </div>\r\n <div\r\n class=\"fr-messages-group\"\r\n [attr.id]=\"'sot-select-' + uuid + '-error'\"\r\n 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 class=\"fr-message fr-message--error\">\r\n {{ validation.message }}\r\n </p>\r\n }\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".sot-formfield-select mat-form-field{width:100%}.sot-formfield-select mat-form-field[hidden]{display:none}::ng-deep .sot-formfield-select-panel .mdc-list-item__primary-text{width:100%}.sot-formfield-select-prefix,.sot-formfield-select-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { 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.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: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatSelectModule }] });
|
|
1705
1705
|
}
|
|
1706
1706
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldSelectComponent, decorators: [{
|
|
1707
1707
|
type: Component,
|
|
1708
|
-
args: [{ selector: 'sot-dsfr-field-select', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatSelectModule], template: "<div class=\"sot-formfield sot-formfield-select\" [ngClass]=\"field.className\">\r\n <div\r\n [formGroup]=\"group\"\r\n class=\"fr-select-group\"\r\n [ngClass]=\"{\r\n 'fr-select-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n 'fr-select-group--valid': control && !control.untouched && control.valid,\r\n 'fr-select-group--disabled': control && control.disabled,\r\n }\">\r\n <label\r\n class=\"fr-label\"\r\n [ngClass]=\"field.labelClassName\"\r\n [attr.for]=\"'sot-select-' + uuid\">\r\n {{ field.label }}\r\n @if (required) {\r\n <span class=\"sot-label-required\">*</span>\r\n }\r\n @if (field.description) {\r\n <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n }\r\n </label>\r\n <div class=\"fr-input-wrap fr-input-wrap--addon\">\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 class=\"fr-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 <select\r\n class=\"fr-select\"\r\n [ngClass]=\"{\r\n 'fr-select--error': control && !control.untouched && !control.valid && !control.disabled,\r\n 'fr-select--valid': control && !control.untouched && control.valid,\r\n 'fr-select--disabled': control && control.disabled,\r\n }\"\r\n [attr.id]=\"'sot-select-' + uuid\"\r\n [formControlName]=\"field.name\">\r\n @if (field.resetOption) {\r\n <option [ngValue]=\"undefined\">\r\n {{ field.resetOptionLabel }}\r\n </option>\r\n }\r\n\r\n @if (field.options) {\r\n @if (field.groupLabelKey) {\r\n @for (group of options; track group) {\r\n <optgroup [label]=\"field.groupLabelKey ? group[field.groupLabelKey] : ''\">\r\n @if (field.groupOptionsKey && group[field.groupOptionsKey]) {\r\n @for (item of group[field.groupOptionsKey]; track item) {\r\n <option\r\n [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </option>\r\n }\r\n }\r\n </optgroup>\r\n }\r\n } @else {\r\n @for (item of options; track item) {\r\n <option\r\n [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </option>\r\n }\r\n }\r\n\r\n }\r\n </select>\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (suffix.action) {\r\n <button type=\"button\"\r\n class=\"fr-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 </div>\r\n <div\r\n class=\"fr-messages-group\"\r\n [attr.id]=\"'sot-select-' + uuid + '-error'\"\r\n 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 class=\"fr-message fr-message--error\">\r\n {{ validation.message }}\r\n </p>\r\n }\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".sot-formfield-select mat-form-field{width:100%}.sot-formfield-select mat-form-field[hidden]{display:none}::ng-deep .sot-formfield-select-panel .mdc-list-item__primary-text{width:100%}.sot-formfield-select-prefix,.sot-formfield-select-suffix{padding:0 .5rem}\n"] }]
|
|
1708
|
+
args: [{ selector: 'sot-dsfr-field-select', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatSelectModule], template: "<div class=\"sot-formfield sot-formfield-select\" [ngClass]=\"field.className\">\r\n <div\r\n [formGroup]=\"group\"\r\n class=\"fr-select-group\"\r\n [ngClass]=\"{\r\n 'fr-select-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n 'fr-select-group--valid': control && !control.untouched && control.valid,\r\n 'fr-select-group--disabled': control && control.disabled,\r\n }\">\r\n <label\r\n class=\"fr-label\"\r\n [ngClass]=\"field.labelClassName\"\r\n [attr.for]=\"'sot-select-' + uuid\">\r\n {{ field.label }}\r\n @if (required) {\r\n <span class=\"sot-label-required\">*</span>\r\n }\r\n @if (field.description) {\r\n <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n }\r\n </label>\r\n <div class=\"fr-input-wrap fr-input-wrap--addon\">\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 class=\"fr-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 <select\r\n class=\"fr-select\"\r\n [multiple]=\"field.multiple\"\r\n [ngClass]=\"{\r\n 'fr-select--error': control && !control.untouched && !control.valid && !control.disabled,\r\n 'fr-select--valid': control && !control.untouched && control.valid,\r\n 'fr-select--disabled': control && control.disabled,\r\n }\"\r\n [attr.id]=\"'sot-select-' + uuid\"\r\n [formControlName]=\"field.name\">\r\n @if (field.resetOption) {\r\n <option [ngValue]=\"undefined\">\r\n {{ field.resetOptionLabel }}\r\n </option>\r\n }\r\n\r\n @if (field.options) {\r\n @if (field.groupLabelKey) {\r\n @for (group of options; track group) {\r\n <optgroup [label]=\"field.groupLabelKey ? group[field.groupLabelKey] : ''\">\r\n @if (field.groupOptionsKey && group[field.groupOptionsKey]) {\r\n @for (item of group[field.groupOptionsKey]; track item) {\r\n <option\r\n [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </option>\r\n }\r\n }\r\n </optgroup>\r\n }\r\n } @else {\r\n @for (item of options; track item) {\r\n <option\r\n [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </option>\r\n }\r\n }\r\n\r\n }\r\n </select>\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (suffix.action) {\r\n <button type=\"button\"\r\n class=\"fr-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 </div>\r\n <div\r\n class=\"fr-messages-group\"\r\n [attr.id]=\"'sot-select-' + uuid + '-error'\"\r\n 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 class=\"fr-message fr-message--error\">\r\n {{ validation.message }}\r\n </p>\r\n }\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".sot-formfield-select mat-form-field{width:100%}.sot-formfield-select mat-form-field[hidden]{display:none}::ng-deep .sot-formfield-select-panel .mdc-list-item__primary-text{width:100%}.sot-formfield-select-prefix,.sot-formfield-select-suffix{padding:0 .5rem}\n"] }]
|
|
1709
1709
|
}] });
|
|
1710
1710
|
|
|
1711
1711
|
class DsfrFieldTextareaComponent extends AbstractControlFieldComponent {
|
|
@@ -2121,11 +2121,11 @@ class ClassicFieldSelectComponent extends AbstractControlFieldComponent {
|
|
|
2121
2121
|
}
|
|
2122
2122
|
}
|
|
2123
2123
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2124
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicFieldSelectComponent, isStandalone: true, selector: "sot-classic-field-select", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-select\" [ngClass]=\"field.className\">\r\n <div\r\n [formGroup]=\"group\"\r\n class=\"sot-formfield-wrapper\"\r\n [ngClass]=\"{\r\n 'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n 'sot-formfield--valid': control && !control.untouched && control.valid,\r\n 'sot-formfield--disabled': control && control.disabled,\r\n }\">\r\n <label\r\n class=\"sot-label\"\r\n [ngClass]=\"field.labelClassName\"\r\n [attr.for]=\"'sot-select-' + uuid\">\r\n <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n @if (required) {\r\n <span class=\"sot-label-required\">*</span>\r\n }\r\n @if (field.description) {\r\n <span class=\"sot-label-description\">{{ field.description }}</span>\r\n }\r\n </label>\r\n <div class=\"sot-input-wrapper\">\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\">\r\n @if (prefix.action) {\r\n <button type=\"button\"\r\n class=\"sot-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 <select\r\n class=\"sot-select\"\r\n [ngClass]=\"{\r\n 'sot-select--error': control && !control.untouched && !control.valid && !control.disabled,\r\n 'sot-select--valid': control && !control.untouched && control.valid,\r\n 'sot-select--disabled': control && control.disabled,\r\n }\"\r\n [attr.id]=\"'sot-select-' + uuid\"\r\n [formControlName]=\"field.name\">\r\n @if (field.resetOption) {\r\n <option [ngValue]=\"undefined\">\r\n {{ field.resetOptionLabel }}\r\n </option>\r\n }\r\n\r\n @if (field.options) {\r\n @if (field.groupLabelKey) {\r\n @for (group of options; track group) {\r\n <optgroup [label]=\"field.groupLabelKey ? group[field.groupLabelKey] : ''\">\r\n @if (field.groupOptionsKey && group[field.groupOptionsKey]) {\r\n @for (item of group[field.groupOptionsKey]; track item) {\r\n <option\r\n [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </option>\r\n }\r\n }\r\n </optgroup>\r\n }\r\n } @else {\r\n @for (item of options; track item) {\r\n <option\r\n [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </option>\r\n }\r\n }\r\n\r\n }\r\n </select>\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\">\r\n @if (suffix.action) {\r\n <button type=\"button\"\r\n class=\"sot-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 </div>\r\n <div\r\n class=\"sot-messages-group\"\r\n [attr.id]=\"'sot-select-' + uuid + '-error'\"\r\n 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 class=\"sot-message sot-message--error\">\r\n {{ validation.message }}\r\n </p>\r\n }\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".sot-formfield-select{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.
|
|
2124
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicFieldSelectComponent, isStandalone: true, selector: "sot-classic-field-select", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-select\" [ngClass]=\"field.className\">\r\n <div\r\n [formGroup]=\"group\"\r\n class=\"sot-formfield-wrapper\"\r\n [ngClass]=\"{\r\n 'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n 'sot-formfield--valid': control && !control.untouched && control.valid,\r\n 'sot-formfield--disabled': control && control.disabled,\r\n }\">\r\n <label\r\n class=\"sot-label\"\r\n [ngClass]=\"field.labelClassName\"\r\n [attr.for]=\"'sot-select-' + uuid\">\r\n <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n @if (required) {\r\n <span class=\"sot-label-required\">*</span>\r\n }\r\n @if (field.description) {\r\n <span class=\"sot-label-description\">{{ field.description }}</span>\r\n }\r\n </label>\r\n <div class=\"sot-input-wrapper\">\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\">\r\n @if (prefix.action) {\r\n <button type=\"button\"\r\n class=\"sot-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 <select\r\n class=\"sot-select\"\r\n [multiple]=\"field.multiple\"\r\n [ngClass]=\"{\r\n 'sot-select--error': control && !control.untouched && !control.valid && !control.disabled,\r\n 'sot-select--valid': control && !control.untouched && control.valid,\r\n 'sot-select--disabled': control && control.disabled,\r\n }\"\r\n [attr.id]=\"'sot-select-' + uuid\"\r\n [formControlName]=\"field.name\">\r\n @if (field.resetOption) {\r\n <option [ngValue]=\"undefined\">\r\n {{ field.resetOptionLabel }}\r\n </option>\r\n }\r\n\r\n @if (field.options) {\r\n @if (field.groupLabelKey) {\r\n @for (group of options; track group) {\r\n <optgroup [label]=\"field.groupLabelKey ? group[field.groupLabelKey] : ''\">\r\n @if (field.groupOptionsKey && group[field.groupOptionsKey]) {\r\n @for (item of group[field.groupOptionsKey]; track item) {\r\n <option\r\n [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </option>\r\n }\r\n }\r\n </optgroup>\r\n }\r\n } @else {\r\n @for (item of options; track item) {\r\n <option\r\n [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </option>\r\n }\r\n }\r\n\r\n }\r\n </select>\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\">\r\n @if (suffix.action) {\r\n <button type=\"button\"\r\n class=\"sot-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 </div>\r\n <div\r\n class=\"sot-messages-group\"\r\n [attr.id]=\"'sot-select-' + uuid + '-error'\"\r\n 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 class=\"sot-message sot-message--error\">\r\n {{ validation.message }}\r\n </p>\r\n }\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".sot-formfield-select{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { 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.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"] }] });
|
|
2125
2125
|
}
|
|
2126
2126
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldSelectComponent, decorators: [{
|
|
2127
2127
|
type: Component,
|
|
2128
|
-
args: [{ selector: 'sot-classic-field-select', standalone: true, imports: [ReactiveFormsModule, NgClass], template: "<div class=\"sot-formfield sot-formfield-select\" [ngClass]=\"field.className\">\r\n <div\r\n [formGroup]=\"group\"\r\n class=\"sot-formfield-wrapper\"\r\n [ngClass]=\"{\r\n 'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n 'sot-formfield--valid': control && !control.untouched && control.valid,\r\n 'sot-formfield--disabled': control && control.disabled,\r\n }\">\r\n <label\r\n class=\"sot-label\"\r\n [ngClass]=\"field.labelClassName\"\r\n [attr.for]=\"'sot-select-' + uuid\">\r\n <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n @if (required) {\r\n <span class=\"sot-label-required\">*</span>\r\n }\r\n @if (field.description) {\r\n <span class=\"sot-label-description\">{{ field.description }}</span>\r\n }\r\n </label>\r\n <div class=\"sot-input-wrapper\">\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\">\r\n @if (prefix.action) {\r\n <button type=\"button\"\r\n class=\"sot-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 <select\r\n class=\"sot-select\"\r\n [ngClass]=\"{\r\n 'sot-select--error': control && !control.untouched && !control.valid && !control.disabled,\r\n 'sot-select--valid': control && !control.untouched && control.valid,\r\n 'sot-select--disabled': control && control.disabled,\r\n }\"\r\n [attr.id]=\"'sot-select-' + uuid\"\r\n [formControlName]=\"field.name\">\r\n @if (field.resetOption) {\r\n <option [ngValue]=\"undefined\">\r\n {{ field.resetOptionLabel }}\r\n </option>\r\n }\r\n\r\n @if (field.options) {\r\n @if (field.groupLabelKey) {\r\n @for (group of options; track group) {\r\n <optgroup [label]=\"field.groupLabelKey ? group[field.groupLabelKey] : ''\">\r\n @if (field.groupOptionsKey && group[field.groupOptionsKey]) {\r\n @for (item of group[field.groupOptionsKey]; track item) {\r\n <option\r\n [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </option>\r\n }\r\n }\r\n </optgroup>\r\n }\r\n } @else {\r\n @for (item of options; track item) {\r\n <option\r\n [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </option>\r\n }\r\n }\r\n\r\n }\r\n </select>\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\">\r\n @if (suffix.action) {\r\n <button type=\"button\"\r\n class=\"sot-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 </div>\r\n <div\r\n class=\"sot-messages-group\"\r\n [attr.id]=\"'sot-select-' + uuid + '-error'\"\r\n 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 class=\"sot-message sot-message--error\">\r\n {{ validation.message }}\r\n </p>\r\n }\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".sot-formfield-select{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"] }]
|
|
2128
|
+
args: [{ selector: 'sot-classic-field-select', standalone: true, imports: [ReactiveFormsModule, NgClass], template: "<div class=\"sot-formfield sot-formfield-select\" [ngClass]=\"field.className\">\r\n <div\r\n [formGroup]=\"group\"\r\n class=\"sot-formfield-wrapper\"\r\n [ngClass]=\"{\r\n 'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n 'sot-formfield--valid': control && !control.untouched && control.valid,\r\n 'sot-formfield--disabled': control && control.disabled,\r\n }\">\r\n <label\r\n class=\"sot-label\"\r\n [ngClass]=\"field.labelClassName\"\r\n [attr.for]=\"'sot-select-' + uuid\">\r\n <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n @if (required) {\r\n <span class=\"sot-label-required\">*</span>\r\n }\r\n @if (field.description) {\r\n <span class=\"sot-label-description\">{{ field.description }}</span>\r\n }\r\n </label>\r\n <div class=\"sot-input-wrapper\">\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\">\r\n @if (prefix.action) {\r\n <button type=\"button\"\r\n class=\"sot-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 <select\r\n class=\"sot-select\"\r\n [multiple]=\"field.multiple\"\r\n [ngClass]=\"{\r\n 'sot-select--error': control && !control.untouched && !control.valid && !control.disabled,\r\n 'sot-select--valid': control && !control.untouched && control.valid,\r\n 'sot-select--disabled': control && control.disabled,\r\n }\"\r\n [attr.id]=\"'sot-select-' + uuid\"\r\n [formControlName]=\"field.name\">\r\n @if (field.resetOption) {\r\n <option [ngValue]=\"undefined\">\r\n {{ field.resetOptionLabel }}\r\n </option>\r\n }\r\n\r\n @if (field.options) {\r\n @if (field.groupLabelKey) {\r\n @for (group of options; track group) {\r\n <optgroup [label]=\"field.groupLabelKey ? group[field.groupLabelKey] : ''\">\r\n @if (field.groupOptionsKey && group[field.groupOptionsKey]) {\r\n @for (item of group[field.groupOptionsKey]; track item) {\r\n <option\r\n [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </option>\r\n }\r\n }\r\n </optgroup>\r\n }\r\n } @else {\r\n @for (item of options; track item) {\r\n <option\r\n [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </option>\r\n }\r\n }\r\n\r\n }\r\n </select>\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\">\r\n @if (suffix.action) {\r\n <button type=\"button\"\r\n class=\"sot-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 </div>\r\n <div\r\n class=\"sot-messages-group\"\r\n [attr.id]=\"'sot-select-' + uuid + '-error'\"\r\n 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 class=\"sot-message sot-message--error\">\r\n {{ validation.message }}\r\n </p>\r\n }\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".sot-formfield-select{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"] }]
|
|
2129
2129
|
}] });
|
|
2130
2130
|
|
|
2131
2131
|
class ClassicFieldToggleComponent extends AbstractControlFieldComponent {
|