@koalarx/ui 14.0.1 → 14.0.2
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.
- package/form/esm2020/lib/dynamic-form/dynamic-form.component.mjs +8 -9
- package/form/fesm2015/koalarx-ui-form.mjs +7 -8
- package/form/fesm2015/koalarx-ui-form.mjs.map +1 -1
- package/form/fesm2020/koalarx-ui-form.mjs +7 -8
- package/form/fesm2020/koalarx-ui-form.mjs.map +1 -1
- package/form/lib/dynamic-form/dynamic-form.component.d.ts +2 -2
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Input, Injectable, Directive, ChangeDetectionStrategy,
|
|
2
|
+
import { Component, Input, Injectable, Directive, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
|
3
3
|
import { BehaviorSubject, Observable } from 'rxjs';
|
|
4
4
|
import { KoalaLanguageHelper } from '@koalarx/ui/core';
|
|
5
5
|
import * as i3 from '@angular/common';
|
|
@@ -925,6 +925,7 @@ class DynamicFormComponent extends FormAbstract {
|
|
|
925
925
|
this.typeField = DynamicFormTypeFieldEnum;
|
|
926
926
|
this.hoursAndMinutesMask = '00:000';
|
|
927
927
|
this.errorMessage = KoalaLanguageHelper;
|
|
928
|
+
this.formId = randomString(25, { lowercase: true, uppercase: true, numbers: true });
|
|
928
929
|
}
|
|
929
930
|
ngOnInit() {
|
|
930
931
|
var _a;
|
|
@@ -982,8 +983,9 @@ class DynamicFormComponent extends FormAbstract {
|
|
|
982
983
|
newFormGroup.get('autocompleteSelectedValue').value.push(value);
|
|
983
984
|
}
|
|
984
985
|
}
|
|
985
|
-
|
|
986
|
-
|
|
986
|
+
const autocompleteInput = document.querySelector(`#${this.formId} input#autocomplete-${(_a = newFormGroup.get('name')) === null || _a === void 0 ? void 0 : _a.value}`);
|
|
987
|
+
if (autocompleteInput) {
|
|
988
|
+
autocompleteInput.value = '';
|
|
987
989
|
}
|
|
988
990
|
}
|
|
989
991
|
else {
|
|
@@ -1457,10 +1459,10 @@ class DynamicFormComponent extends FormAbstract {
|
|
|
1457
1459
|
}
|
|
1458
1460
|
}
|
|
1459
1461
|
DynamicFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: DynamicFormComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: KoalaDynamicFormService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1460
|
-
DynamicFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: DynamicFormComponent, selector: "koala-dynamic-form", inputs: { form: "form", formConfig: "formConfig", showFields: "showFields", showFieldsMoreItensConfig: "showFieldsMoreItensConfig", setValues: "setValues", tabIndexStart: "tabIndexStart" }, viewQueries: [{ propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"p-relative w-100\">\n <div *ngFor=\"let propriedade of controls?.controls; let i = index;\"\n [ngClass]=\"(propriedade.get('show').value | async) ? propriedade.get('class').value : 'd-none'\"\n formArrayName=\"formData\">\n\t <div *ngIf=\"propriedade.get('show').value | async\">\n\t <mat-form-field\n\t\t *ngIf=\"propriedade.get('type').value == typeField.text ||\n\t propriedade.get('type').value == typeField.password ||\n\t propriedade.get('type').value == typeField.cpf ||\n\t propriedade.get('type').value == typeField.cnpj ||\n\t propriedade.get('type').value == typeField.datetime ||\n\t propriedade.get('type').value == typeField.email ||\n\t propriedade.get('type').value == typeField.number ||\n\t propriedade.get('type').value == typeField.stringNumber ||\n\t propriedade.get('type').value == typeField.time ||\n\t propriedade.get('type').value == typeField.date ||\n\t propriedade.get('type').value == typeField.hoursAndMinutes ||\n\t propriedade.get('type').value == typeField.phone ||\n\t propriedade.get('type').value == typeField.percent ||\n\t propriedade.get('type').value == typeField.color ||\n\t propriedade.get('type').value == typeField.month ||\n\t propriedade.get('type').value == typeField.competenceDate ||\n propriedade.get('type').value == typeField.stringWithCustomMasc\"\n\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t [formGroupName]=\"i\"\n\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t <input\n\t\t [dropSpecialCharacters]=\"false\"\n\t\t [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t (keyup)=\"hoursAndMinutesApplyMask(i, $event)\"\n\t\t [required]=\"propriedade.get('required').value\"\n\t\t [tabIndex]=\"tabIndexStart + i\"\n\t\t [mask]=\"((propriedade.get('type').value == typeField.competenceDate) ? '00/0000' : null) ||\n\t\t ((propriedade.get('type').value == typeField.phone) ? '(00)0000-0000?0' : null) ||\n\t\t ((propriedade.get('type').value == typeField.stringNumber) ? '0{'+propriedade.get('maxLength').value+'}' : null) ||\n ((propriedade.get('type').value == typeField.cpf) ? '000.000.000-00' : null) ||\n ((propriedade.get('type').value == typeField.cnpj) ? '00.000.000/0000-00' : null) ||\n ((propriedade.get('type').value == typeField.percent) ? 'percent' : null) ||\n\t\t\t\t\t\t\t\t\t((propriedade.get('type').value == typeField.hoursAndMinutes) ? hoursAndMinutesMask : null) ||\n\t\t\t\t\t\t\t\t\t((propriedade.get('type').value == typeField.stringWithCustomMasc) ? propriedade.get('customMasc').value : null)\"\n\t\t [validation]=\"\n\t (propriedade.get('type').value == typeField.cpf && propriedade.get('value').errors?.cpfInvalid) ||\n\t (propriedade.get('type').value == typeField.cnpj && propriedade.get('value').errors?.cnpjInvalid)\"\n\t\t [type]=\"((propriedade.get('type').value == typeField.cpf ||\n propriedade.get('type').value == typeField.cnpj ||\n propriedade.get('type').value == typeField.phone ||\n propriedade.get('type').value == typeField.percent\n )) ? 'tel' : (\n propriedade.get('type').value == typeField.month ?\n 'month' : (\n propriedade.get('type').value == typeField.date ?\n 'date' : (\n propriedade.get('type').value == typeField.datetime ?\n 'datetime-local' : (\n propriedade.get('type').value == typeField.email ?\n 'email' : (\n propriedade.get('type').value == typeField.number ?\n 'number' : (\n propriedade.get('type').value == typeField.time ?\n 'time' : (\n propriedade.get('type').value == typeField.password ?\n 'password' : (\n propriedade.get('type').value == typeField.color ?\n 'color' : 'text'))))))))\"\n [min]=\"propriedade.get('min').value\"\n [max]=\"propriedade.get('max').value\"\n [minLength]=\"propriedade.get('minLength').value\"\n [maxLength]=\"propriedade.get('maxLength').value\"\n [thousandSeparator]=\"propriedade.get('customMascThousandSeparator').value\"\n [suffix]=\"propriedade.get('customMascSuffix').value\"\n [prefix]=\"propriedade.get('customMascPrefix').value\"\n separatorLimit=\"0\"\n [autocomplete]=\"getRandomString()\"\n\t\t formControlName=\"value\"\n\t\t matInput/>\n\t <button\n\t\t (click)=\"passwordView(i)\"\n\t\t *ngIf=\"propriedade.get('hidePassword').value !== null\"\n\t\t [attr.aria-label]=\"'Hide password'\"\n\t\t [attr.aria-pressed]=\"propriedade.get('hidePassword').value\"\n\t\t mat-icon-button matSuffix tabindex=\"-1\" type=\"button\">\n\t <mat-icon>{{propriedade.get('hidePassword').value ? 'visibility_off' : 'visibility'}}</mat-icon>\n\t </button>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.cpfInvalid\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getInvalidMessage(propriedade.get('label').value)}}\n\t </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.cnpjInvalid\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getInvalidMessage(propriedade.get('label').value)}}\n\t </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.email\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getInvalidMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.min\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinMessage(propriedade.get('min').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.max\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxMessage(propriedade.get('max').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.dateMin\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getDateMinMessage()}}\n {{propriedade.get('min').value | date:\"shortDate\"}}.\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.dateMax\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getDateMaxMessage()}}\n {{propriedade.get('max').value | date:\"shortDate\"}}.\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t </mat-form-field>\n\t <mat-form-field\n\t\t *ngIf=\"propriedade.get('type').value == typeField.coin\"\n\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t [formGroupName]=\"i\"\n\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t <input\n\t\t [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\"\n [min]=\"propriedade.get('min').value\"\n [max]=\"propriedade.get('max').value\"\n [minLength]=\"propriedade.get('minLength').value\"\n [maxLength]=\"propriedade.get('maxLength').value\"\n [autocomplete]=\"getRandomString()\"\n\t\t currencyMask\n\t\t formControlName=\"value\"\n\t\t matInput\n\t\t type=\"tel\"/>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n <mat-error *ngIf=\"propriedade.get('value').errors?.min\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinMessage(propriedade.get('min').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.max\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxMessage(propriedade.get('max').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t </mat-form-field>\n <mat-form-field\n *ngIf=\"propriedade.get('type').value == typeField.float\"\n [appearance]=\"propriedade.get('appearance').value\"\n [floatLabel]=\"propriedade.get('floatLabel').value\"\n [formGroupName]=\"i\"\n [ngClass]=\"propriedade.get('fieldClass').value\">\n <mat-label>{{propriedade.get('label').value}}</mat-label>\n <input\n [koalaAutoFocus]=\"propriedade.get('focus').value\"\n [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\"\n [min]=\"propriedade.get('min').value\"\n [max]=\"propriedade.get('max').value\"\n [minLength]=\"propriedade.get('minLength').value\"\n [maxLength]=\"propriedade.get('maxLength').value\"\n [autocomplete]=\"getRandomString()\"\n currencyMask\n [options]=\"{prefix: ''}\"\n formControlName=\"value\"\n matInput\n type=\"tel\"/>\n <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n <mat-icon>info</mat-icon>\n {{propriedade.get('textHint').value}}\n </mat-hint>\n <mat-error *ngIf=\"propriedade.get('value').errors?.min\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinMessage(propriedade.get('min').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.max\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxMessage(propriedade.get('max').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n </mat-form-field>\n\t <mat-form-field\n\t\t *ngIf=\"propriedade.get('type').value == typeField.valueList ||\n\t propriedade.get('type').value == typeField.textarea\"\n\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t [formGroupName]=\"i\"\n\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t <textarea\n #textarea\n\t\t [koalaAutoFocus]=\"propriedade.get('focus').value\"\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n\t\t [cdkAutosizeMaxRows]=\"8\"\n\t\t [cdkAutosizeMinRows]=\"3\"\n\t\t [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\"\n [minLength]=\"propriedade.get('minLength').value\"\n [maxLength]=\"propriedade.get('maxLength').value\"\n\t\t formControlName=\"value\"\n\t\t matInput>\n </textarea>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n <mat-hint align=\"end\" *ngIf=\"propriedade.get('maxLength').value\">\n {{textarea.value.length}}/{{propriedade.get('maxLength').value}}\n </mat-hint>\n <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t </mat-form-field>\n\t\t <mat-form-field\n\t\t\t *ngIf=\"propriedade.get('type').value == typeField.textLogs\"\n\t\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t\t [formGroupName]=\"i\"\n\t\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t <div [innerHTML]=\"propriedade.get('textLogs').value\" class=\"text-obs\"></div>\n\t <textarea\n #textarea\n\t\t [koalaAutoFocus]=\"propriedade.get('focus').value\"\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n\t\t [cdkAutosizeMaxRows]=\"8\"\n\t\t [cdkAutosizeMinRows]=\"3\"\n\t\t [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\"\n [minLength]=\"propriedade.get('minLength').value\"\n [maxLength]=\"propriedade.get('maxLength').value\"\n\t\t formControlName=\"value\"\n\t\t matInput>\n\t </textarea>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n <mat-hint align=\"end\" *ngIf=\"propriedade.get('maxLength').value\">\n {{textarea.value.length}}/{{propriedade.get('maxLength').value}}\n </mat-hint>\n <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t </mat-form-field>\n\t <mat-form-field\n\t\t *ngIf=\"propriedade.get('type').value == typeField.select\"\n\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t [formGroupName]=\"i\"\n\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t <mat-select [multiple]=\"propriedade.get('multiple').value\" [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\" formControlName=\"value\">\n\t <mat-option *ngFor=\"let options of propriedade.get('opcoesSelect').value\" [value]=\"options.value\">\n\t {{options.name}}\n\t </mat-option>\n\t </mat-select>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t </mat-form-field>\n <mat-form-field\n class=\"select-multiple-native\"\n *ngIf=\"propriedade.get('type').value == typeField.selectMultipleNative\"\n [appearance]=\"propriedade.get('appearance').value\"\n [floatLabel]=\"propriedade.get('floatLabel').value\"\n [formGroupName]=\"i\"\n [ngClass]=\"propriedade.get('fieldClass').value\">\n <mat-label>{{propriedade.get('label').value}}</mat-label>\n <select\n matNativeControl\n formControlName=\"value\"\n multiple\n [tabIndex]=\"tabIndexStart + i\"\n [required]=\"propriedade.get('required').value\">\n <option *ngFor=\"let options of propriedade.get('opcoesSelect').value\" [value]=\"options.value\">\n {{options.name}}\n </option>\n </select>\n <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n <mat-icon>info</mat-icon>\n {{propriedade.get('textHint').value}}\n </mat-hint>\n <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n </mat-form-field>\n\t <div\n\t\t *ngIf=\"propriedade.get('type').value == typeField.checkbox\"\n\t\t [formGroupName]=\"i\"\n\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-checkbox\n [tabIndex]=\"tabIndexStart + i\"\n\t\t formControlName=\"value\"\n\t\t value=\"true\">\n\t {{propriedade.get('label').value}}\n\t </mat-checkbox>\n\t </div>\n\t\t <div\n\t\t\t *ngIf=\"propriedade.get('type').value == typeField.moreItems\"\n\t\t\t [formGroupName]=\"i\"\n\t\t\t [ngClass]=\"propriedade.get('fieldClass').value\"\n\t\t\t class=\"more-items-content\">\n\t\t\t <fieldset>\n\t\t\t\t <legend>\n\t\t\t\t\t <koala-button\n\t\t\t\t\t\t (click)=\"addMoreItem(i)\"\n\t\t\t\t\t\t [disabled]=\"propriedade.get('moreItemsConfig').value.length === propriedade.get('moreItemsMaxItems').value\"\n\t\t\t\t\t\t [tooltip]=\"propriedade.get('moreItemsButtonIconAddlabel').value\"\n\t\t\t\t\t\t [backgroundColor]=\"propriedade.get('moreItemsIconBackgroundColor').value\"\n [color]=\"propriedade.get('moreItemsIconFontColor').value\"\n\t\t\t\t\t\t class=\"btn-add-more-items\"\n\t\t\t\t\t\t icon=\"add\">\n\t\t\t\t\t </koala-button>\n\t\t\t\t\t {{propriedade.get('label').value}} (Min.: {{propriedade.get('moreItemsMinItems').value}}\n\t\t\t\t\t | M\u00E1x.: {{propriedade.get('moreItemsMaxItems').value}})\n\t\t\t\t </legend>\n\t\t\t\t <mat-accordion class=\"items\" multi>\n\t\t\t\t\t <mat-expansion-panel\n\t\t\t\t\t\t *ngFor=\"let item of propriedade.get('moreItemsConfig').value.slice().reverse(); index as indexMoreItems\"\n\t\t\t\t\t\t expanded>\n\t\t\t\t\t\t <mat-expansion-panel-header>\n\t\t\t\t\t\t\t\t<mat-panel-title class=\"titleForm\">#\n\t\t\t\t\t\t\t\t\t{{propriedade.get('moreItemsConfig').value.length - 1 - indexMoreItems + 1}}</mat-panel-title>\n\t\t\t\t\t\t\t\t<mat-panel-description class=\"titleForm\">\n\t\t\t\t\t\t\t\t\t{{propriedade.get('label').value}}\n\t\t\t\t\t\t\t\t\t<mat-icon>{{propriedade.get('moreItemsIcon').value}}</mat-icon>\n\t\t\t\t\t\t\t\t</mat-panel-description>\n\t\t\t\t\t\t\t</mat-expansion-panel-header>\n\t\t\t\t\t\t <koala-dynamic-form\n\t\t\t\t\t\t\t [showFieldsMoreItensConfig]=\"item.showFieldsMoreItensConfig\"\n\t\t\t\t\t\t\t [showFields]=\"item.showFields\"\n\t\t\t\t\t\t\t [formConfig]=\"item.formConfig\"\n\t\t\t\t\t\t\t [form]=\"item.form\"\n [tabIndexStart]=\"tabIndexStart + i\">\n\t\t\t\t\t\t </koala-dynamic-form>\n\t\t\t\t\t <mat-action-row\n\t\t\t\t\t\t *ngIf=\"propriedade.get('moreItemsConfig').value.length > propriedade.get('moreItemsMinItems').value\">\n\t\t\t\t\t <button\n\t\t\t\t\t\t (click)=\"removeMoreItem(i, propriedade.get('moreItemsConfig').value.length - 1 - indexMoreItems)\"\n\t\t\t\t\t\t mat-icon-button>\n\t\t\t\t\t\t <mat-icon>delete</mat-icon>\n\t\t\t\t\t </button>\n\t\t\t\t\t </mat-action-row>\n\t\t\t\t\t </mat-expansion-panel>\n\t\t\t\t </mat-accordion>\n\t\t\t </fieldset>\n\t\t </div>\n\t\t <mat-form-field\n\t\t\t *ngIf=\"propriedade.get('type').value == typeField.autocomplete\"\n\t\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t\t [formGroupName]=\"i\"\n\t\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}} {{propriedade.get('multiple').value &&\n\t propriedade.get('required').value ? '*' : ''}}</mat-label>\n\t\t\t <div *ngIf=\"propriedade.get('multiple').value else single\">\n\t <mat-chip-list #chipList>\n <mat-chip\n (removed)=\"removeOptionOnAutocomplete(i, option)\"\n *ngFor=\"let option of propriedade.get('autocompleteSelectedValue').value\"\n [color]=\"getColorChip(propriedade.get('autocompleteMultipleConfig').value | async)\"\n [removable]=\"true\"\n [selectable]=\"true\">\n {{display(option)}}\n <mat-icon *ngIf=\"!propriedade.get('disabled').value\" matChipRemove>cancel</mat-icon>\n </mat-chip>\n\t <input\n\t\t #autocompleteInput\n [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t [required]=\"propriedade.get('required').value\"\n\t\t [matAutocomplete]=\"auto\"\n\t\t [matChipInputFor]=\"chipList\"\n [tabIndex]=\"tabIndexStart + i\"\n [autocomplete]=\"getRandomString()\"\n\t\t formControlName=\"value\"\n\t\t matInput\n\t\t type=\"text\"\n\t\t placeholder=\"Selecione um ou mais op\u00E7\u00F5es...\">\n\t </mat-chip-list>\n\t </div>\n\t <ng-template #single>\n\t\t <input\n\t\t\t [matAutocomplete]=\"auto\"\n [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t\t [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\"\n [autocomplete]=\"getRandomString()\"\n\t\t\t formControlName=\"value\"\n\t\t\t matInput\n\t\t\t placeholder=\"Selecione uma op\u00E7\u00E3o...\"\n\t\t\t type=\"text\">\n\t </ng-template>\n\t <mat-spinner *ngIf=\"propriedade.get('autocompleteLoading').value | async\" color=\"primary\"\n\t matSuffix></mat-spinner>\n\t <button\n\t\t (click)=\"clearAutocomplete(i)\"\n\t\t *ngIf=\"\n\t !(propriedade.get('autocompleteLoading').value | async) &&\n\t !propriedade.get('disabled').value\"\n\t\t color=\"warn\"\n\t\t mat-icon-button\n\t\t matSuffix\n\t\t type=\"button\">\n\t <mat-icon>close</mat-icon>\n\t </button>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required || propriedade.get('value').errors?.autocompleteSelected\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getAutocompleteMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t <mat-autocomplete\n\t\t #auto=\"matAutocomplete\"\n\t\t [displayWith]=\"display\" autoActiveFirstOption>\n\t\t <div *ngIf=\"(getAutocompleteOptions(propriedade) | async) as options\">\n\t\t <mat-option *ngFor=\"let option of options\" [value]=\"option\">\n\t\t {{option.name}}\n\t\t </mat-option>\n\t\t </div>\n\t </mat-autocomplete>\n\t </mat-form-field>\n\t\t <div *ngIf=\"propriedade.get('type').value == typeField.file\">\n\t\t\t <koala-file-button\n\t\t\t\t (getFiles)=\"propriedade.get('value').setValue($event)\"\n\t\t\t\t [accept]=\"propriedade.get('fileButtonConfig').value.accept\"\n\t\t\t\t [backgroundColor]=\"propriedade.get('fileButtonConfig').value.backgroundColor\"\n\t\t\t\t [color]=\"propriedade.get('fileButtonConfig').value.color\"\n\t\t\t\t [disabled]=\"propriedade.get('disabled').value\"\n\t\t\t\t [icon]=\"propriedade.get('fileButtonConfig').value.icon\"\n\t\t\t\t [multiple]=\"propriedade.get('multiple').value\"\n\t\t\t\t [text]=\"propriedade.get('fileButtonConfig').value.text\">\n\t\t\t </koala-file-button>\n\t\t </div>\n\t\t <div *ngIf=\"\n\t\t propriedade.get('type').value == typeField.dynamicForm &&\n\t\t\t\t(getDynamicFormConfig(propriedade) | async) as dynamicFormConfig\">\n\t\t\t <fieldset *ngIf=\"propriedade.get('label').value else dynamicFormWithoutLabel\">\n\t\t\t\t <legend>{{propriedade.get('label').value}}</legend>\n\t\t\t\t <koala-dynamic-form\n\t\t\t\t\t [formConfig]=\"dynamicFormConfig.formConfig\"\n\t\t\t\t\t [form]=\"dynamicFormConfig.form\"\n\t\t\t\t\t [setValues]=\"dynamicFormConfig.setValues\"\n\t\t\t\t\t [showFields]=\"dynamicFormConfig.showFields\"\n [tabIndexStart]=\"tabIndexStart + i\">\n\t\t\t\t </koala-dynamic-form>\n\t\t\t </fieldset>\n\t\t\t <ng-template #dynamicFormWithoutLabel>\n\t\t\t\t <koala-dynamic-form\n\t\t\t\t\t [formConfig]=\"dynamicFormConfig.formConfig\"\n\t\t\t\t\t [form]=\"dynamicFormConfig.form\"\n\t\t\t\t\t [setValues]=\"dynamicFormConfig.setValues\"\n\t\t\t\t\t [showFields]=\"dynamicFormConfig.showFields\"\n [tabIndexStart]=\"tabIndexStart + i\">\n\t\t\t\t </koala-dynamic-form>\n\t\t\t </ng-template>\n\t\t </div>\n <div\n class=\"radio-btn-group\"\n *ngIf=\"propriedade.get('type').value == typeField.radio\"\n [formGroupName]=\"i\"\n [ngClass]=\"propriedade.get('fieldClass').value\">\n <mat-radio-group formControlName=\"value\">\n <label *ngIf=\"propriedade.get('label').value\">{{propriedade.get('label').value}}</label>\n <mat-radio-button\n [tabIndex]=\"tabIndexStart + i\"\n *ngFor=\"let options of propriedade.get('opcoesSelect').value\"\n [value]=\"options.value\">\n {{options.name}}\n </mat-radio-button>\n </mat-radio-group>\n </div>\n\t </div>\n </div>\n <ng-content select=\"[btn-submit]\"></ng-content>\n</div>\n", styles: [".more-items-content fieldset{border:1px solid #cccccc;padding:16px}.more-items-content fieldset legend{font-family:Josefin Sans,sans-serif;font-size:11px;font-weight:700;padding:0 8px}.more-items-content .items .titleForm{color:#616161}.more-items-content .items .mat-expansion-panel-header-title,.more-items-content .items .mat-expansion-panel-header-description{flex-basis:0}.more-items-content .items .mat-expansion-panel-header-description{align-items:center;justify-content:space-between}.more-items-content .items .mat-form-field+.mat-form-field{margin-left:8px}.radio-btn-group label{position:relative;display:block;padding:10px 0}.text-obs{background:#eeeeee;border-radius:5px;color:#212121;font-family:OpenSansLight,sans-serif;height:150px;margin:0 auto 10px;overflow-y:auto;padding:10px;position:relative;width:calc(100% - 27px)}.select-multiple-native{margin-bottom:15px}.select-multiple-native select{width:100%;height:150px;background:transparent;border:none}.select-multiple-native select:focus,.select-multiple-native select:active{outline:none}.select-multiple-native select option{padding:5px 10px;font-family:JosefinSans,sans-serif}.select-multiple-native select option:checked{background:#f1f1f1!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.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],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i4$1.CurrencyMaskDirective, selector: "[currencyMask]", inputs: ["max", "min", "options"] }, { kind: "directive", type: i5.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "triggerOnMaskChange"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: i6.FileButtonComponent, selector: "koala-file-button", inputs: ["color", "backgroundColor", "icon", "text", "tooltip", "disabled", "multiple", "accept", "setFile", "updateFileList", "autoclear"], outputs: ["getFiles"] }, { kind: "directive", type: i7.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i8.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i12.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i12.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i13.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i14.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i14.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i17.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i17.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i17.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i17.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i17.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i17.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i18.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i18.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i18.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i18.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i19.ButtonComponent, selector: "koala-button", inputs: ["color", "backgroundColor", "icon", "text", "tooltip", "disabled", "koalaIcon", "koalaIconSize"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: DynamicFormComponent, selector: "koala-dynamic-form", inputs: ["form", "formConfig", "showFields", "showFieldsMoreItensConfig", "setValues", "tabIndexStart"] }, { kind: "directive", type: KoalaAutofocusDirective, selector: "[koalaAutoFocus]", inputs: ["koalaAutoFocus"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1462
|
+
DynamicFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: DynamicFormComponent, selector: "koala-dynamic-form", inputs: { form: "form", formConfig: "formConfig", showFields: "showFields", showFieldsMoreItensConfig: "showFieldsMoreItensConfig", setValues: "setValues", tabIndexStart: "tabIndexStart" }, usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"p-relative w-100\" [id]=\"formId\">\n <div *ngFor=\"let propriedade of controls?.controls; let i = index;\"\n [ngClass]=\"(propriedade.get('show').value | async) ? propriedade.get('class').value : 'd-none'\"\n formArrayName=\"formData\">\n\t <div *ngIf=\"propriedade.get('show').value | async\">\n\t <mat-form-field\n\t\t *ngIf=\"propriedade.get('type').value == typeField.text ||\n\t propriedade.get('type').value == typeField.password ||\n\t propriedade.get('type').value == typeField.cpf ||\n\t propriedade.get('type').value == typeField.cnpj ||\n\t propriedade.get('type').value == typeField.datetime ||\n\t propriedade.get('type').value == typeField.email ||\n\t propriedade.get('type').value == typeField.number ||\n\t propriedade.get('type').value == typeField.stringNumber ||\n\t propriedade.get('type').value == typeField.time ||\n\t propriedade.get('type').value == typeField.date ||\n\t propriedade.get('type').value == typeField.hoursAndMinutes ||\n\t propriedade.get('type').value == typeField.phone ||\n\t propriedade.get('type').value == typeField.percent ||\n\t propriedade.get('type').value == typeField.color ||\n\t propriedade.get('type').value == typeField.month ||\n\t propriedade.get('type').value == typeField.competenceDate ||\n propriedade.get('type').value == typeField.stringWithCustomMasc\"\n\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t [formGroupName]=\"i\"\n\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t <input\n\t\t [dropSpecialCharacters]=\"false\"\n\t\t [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t (keyup)=\"hoursAndMinutesApplyMask(i, $event)\"\n\t\t [required]=\"propriedade.get('required').value\"\n\t\t [tabIndex]=\"tabIndexStart + i\"\n\t\t [mask]=\"((propriedade.get('type').value == typeField.competenceDate) ? '00/0000' : null) ||\n\t\t ((propriedade.get('type').value == typeField.phone) ? '(00)0000-0000?0' : null) ||\n\t\t ((propriedade.get('type').value == typeField.stringNumber) ? '0{'+propriedade.get('maxLength').value+'}' : null) ||\n ((propriedade.get('type').value == typeField.cpf) ? '000.000.000-00' : null) ||\n ((propriedade.get('type').value == typeField.cnpj) ? '00.000.000/0000-00' : null) ||\n ((propriedade.get('type').value == typeField.percent) ? 'percent' : null) ||\n\t\t\t\t\t\t\t\t\t((propriedade.get('type').value == typeField.hoursAndMinutes) ? hoursAndMinutesMask : null) ||\n\t\t\t\t\t\t\t\t\t((propriedade.get('type').value == typeField.stringWithCustomMasc) ? propriedade.get('customMasc').value : null)\"\n\t\t [validation]=\"\n\t (propriedade.get('type').value == typeField.cpf && propriedade.get('value').errors?.cpfInvalid) ||\n\t (propriedade.get('type').value == typeField.cnpj && propriedade.get('value').errors?.cnpjInvalid)\"\n\t\t [type]=\"((propriedade.get('type').value == typeField.cpf ||\n propriedade.get('type').value == typeField.cnpj ||\n propriedade.get('type').value == typeField.phone ||\n propriedade.get('type').value == typeField.percent\n )) ? 'tel' : (\n propriedade.get('type').value == typeField.month ?\n 'month' : (\n propriedade.get('type').value == typeField.date ?\n 'date' : (\n propriedade.get('type').value == typeField.datetime ?\n 'datetime-local' : (\n propriedade.get('type').value == typeField.email ?\n 'email' : (\n propriedade.get('type').value == typeField.number ?\n 'number' : (\n propriedade.get('type').value == typeField.time ?\n 'time' : (\n propriedade.get('type').value == typeField.password ?\n 'password' : (\n propriedade.get('type').value == typeField.color ?\n 'color' : 'text'))))))))\"\n [min]=\"propriedade.get('min').value\"\n [max]=\"propriedade.get('max').value\"\n [minLength]=\"propriedade.get('minLength').value\"\n [maxLength]=\"propriedade.get('maxLength').value\"\n [thousandSeparator]=\"propriedade.get('customMascThousandSeparator').value\"\n [suffix]=\"propriedade.get('customMascSuffix').value\"\n [prefix]=\"propriedade.get('customMascPrefix').value\"\n separatorLimit=\"0\"\n [autocomplete]=\"getRandomString()\"\n\t\t formControlName=\"value\"\n\t\t matInput/>\n\t <button\n\t\t (click)=\"passwordView(i)\"\n\t\t *ngIf=\"propriedade.get('hidePassword').value !== null\"\n\t\t [attr.aria-label]=\"'Hide password'\"\n\t\t [attr.aria-pressed]=\"propriedade.get('hidePassword').value\"\n\t\t mat-icon-button matSuffix tabindex=\"-1\" type=\"button\">\n\t <mat-icon>{{propriedade.get('hidePassword').value ? 'visibility_off' : 'visibility'}}</mat-icon>\n\t </button>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.cpfInvalid\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getInvalidMessage(propriedade.get('label').value)}}\n\t </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.cnpjInvalid\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getInvalidMessage(propriedade.get('label').value)}}\n\t </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.email\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getInvalidMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.min\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinMessage(propriedade.get('min').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.max\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxMessage(propriedade.get('max').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.dateMin\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getDateMinMessage()}}\n {{propriedade.get('min').value | date:\"shortDate\"}}.\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.dateMax\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getDateMaxMessage()}}\n {{propriedade.get('max').value | date:\"shortDate\"}}.\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t </mat-form-field>\n\t <mat-form-field\n\t\t *ngIf=\"propriedade.get('type').value == typeField.coin\"\n\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t [formGroupName]=\"i\"\n\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t <input\n\t\t [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\"\n [min]=\"propriedade.get('min').value\"\n [max]=\"propriedade.get('max').value\"\n [minLength]=\"propriedade.get('minLength').value\"\n [maxLength]=\"propriedade.get('maxLength').value\"\n [autocomplete]=\"getRandomString()\"\n\t\t currencyMask\n\t\t formControlName=\"value\"\n\t\t matInput\n\t\t type=\"tel\"/>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n <mat-error *ngIf=\"propriedade.get('value').errors?.min\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinMessage(propriedade.get('min').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.max\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxMessage(propriedade.get('max').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t </mat-form-field>\n <mat-form-field\n *ngIf=\"propriedade.get('type').value == typeField.float\"\n [appearance]=\"propriedade.get('appearance').value\"\n [floatLabel]=\"propriedade.get('floatLabel').value\"\n [formGroupName]=\"i\"\n [ngClass]=\"propriedade.get('fieldClass').value\">\n <mat-label>{{propriedade.get('label').value}}</mat-label>\n <input\n [koalaAutoFocus]=\"propriedade.get('focus').value\"\n [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\"\n [min]=\"propriedade.get('min').value\"\n [max]=\"propriedade.get('max').value\"\n [minLength]=\"propriedade.get('minLength').value\"\n [maxLength]=\"propriedade.get('maxLength').value\"\n [autocomplete]=\"getRandomString()\"\n currencyMask\n [options]=\"{prefix: ''}\"\n formControlName=\"value\"\n matInput\n type=\"tel\"/>\n <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n <mat-icon>info</mat-icon>\n {{propriedade.get('textHint').value}}\n </mat-hint>\n <mat-error *ngIf=\"propriedade.get('value').errors?.min\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinMessage(propriedade.get('min').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.max\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxMessage(propriedade.get('max').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n </mat-form-field>\n\t <mat-form-field\n\t\t *ngIf=\"propriedade.get('type').value == typeField.valueList ||\n\t propriedade.get('type').value == typeField.textarea\"\n\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t [formGroupName]=\"i\"\n\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t <textarea\n #textarea\n\t\t [koalaAutoFocus]=\"propriedade.get('focus').value\"\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n\t\t [cdkAutosizeMaxRows]=\"8\"\n\t\t [cdkAutosizeMinRows]=\"3\"\n\t\t [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\"\n [minLength]=\"propriedade.get('minLength').value\"\n [maxLength]=\"propriedade.get('maxLength').value\"\n\t\t formControlName=\"value\"\n\t\t matInput>\n </textarea>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n <mat-hint align=\"end\" *ngIf=\"propriedade.get('maxLength').value\">\n {{textarea.value.length}}/{{propriedade.get('maxLength').value}}\n </mat-hint>\n <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t </mat-form-field>\n\t\t <mat-form-field\n\t\t\t *ngIf=\"propriedade.get('type').value == typeField.textLogs\"\n\t\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t\t [formGroupName]=\"i\"\n\t\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t <div [innerHTML]=\"propriedade.get('textLogs').value\" class=\"text-obs\"></div>\n\t <textarea\n #textarea\n\t\t [koalaAutoFocus]=\"propriedade.get('focus').value\"\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n\t\t [cdkAutosizeMaxRows]=\"8\"\n\t\t [cdkAutosizeMinRows]=\"3\"\n\t\t [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\"\n [minLength]=\"propriedade.get('minLength').value\"\n [maxLength]=\"propriedade.get('maxLength').value\"\n\t\t formControlName=\"value\"\n\t\t matInput>\n\t </textarea>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n <mat-hint align=\"end\" *ngIf=\"propriedade.get('maxLength').value\">\n {{textarea.value.length}}/{{propriedade.get('maxLength').value}}\n </mat-hint>\n <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t </mat-form-field>\n\t <mat-form-field\n\t\t *ngIf=\"propriedade.get('type').value == typeField.select\"\n\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t [formGroupName]=\"i\"\n\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t <mat-select [multiple]=\"propriedade.get('multiple').value\" [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\" formControlName=\"value\">\n\t <mat-option *ngFor=\"let options of propriedade.get('opcoesSelect').value\" [value]=\"options.value\">\n\t {{options.name}}\n\t </mat-option>\n\t </mat-select>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t </mat-form-field>\n <mat-form-field\n class=\"select-multiple-native\"\n *ngIf=\"propriedade.get('type').value == typeField.selectMultipleNative\"\n [appearance]=\"propriedade.get('appearance').value\"\n [floatLabel]=\"propriedade.get('floatLabel').value\"\n [formGroupName]=\"i\"\n [ngClass]=\"propriedade.get('fieldClass').value\">\n <mat-label>{{propriedade.get('label').value}}</mat-label>\n <select\n matNativeControl\n formControlName=\"value\"\n multiple\n [tabIndex]=\"tabIndexStart + i\"\n [required]=\"propriedade.get('required').value\">\n <option *ngFor=\"let options of propriedade.get('opcoesSelect').value\" [value]=\"options.value\">\n {{options.name}}\n </option>\n </select>\n <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n <mat-icon>info</mat-icon>\n {{propriedade.get('textHint').value}}\n </mat-hint>\n <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n </mat-form-field>\n\t <div\n\t\t *ngIf=\"propriedade.get('type').value == typeField.checkbox\"\n\t\t [formGroupName]=\"i\"\n\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-checkbox\n [tabIndex]=\"tabIndexStart + i\"\n\t\t formControlName=\"value\"\n\t\t value=\"true\">\n\t {{propriedade.get('label').value}}\n\t </mat-checkbox>\n\t </div>\n\t\t <div\n\t\t\t *ngIf=\"propriedade.get('type').value == typeField.moreItems\"\n\t\t\t [formGroupName]=\"i\"\n\t\t\t [ngClass]=\"propriedade.get('fieldClass').value\"\n\t\t\t class=\"more-items-content\">\n\t\t\t <fieldset>\n\t\t\t\t <legend>\n\t\t\t\t\t <koala-button\n\t\t\t\t\t\t (click)=\"addMoreItem(i)\"\n\t\t\t\t\t\t [disabled]=\"propriedade.get('moreItemsConfig').value.length === propriedade.get('moreItemsMaxItems').value\"\n\t\t\t\t\t\t [tooltip]=\"propriedade.get('moreItemsButtonIconAddlabel').value\"\n\t\t\t\t\t\t [backgroundColor]=\"propriedade.get('moreItemsIconBackgroundColor').value\"\n [color]=\"propriedade.get('moreItemsIconFontColor').value\"\n\t\t\t\t\t\t class=\"btn-add-more-items\"\n\t\t\t\t\t\t icon=\"add\">\n\t\t\t\t\t </koala-button>\n\t\t\t\t\t {{propriedade.get('label').value}} (Min.: {{propriedade.get('moreItemsMinItems').value}}\n\t\t\t\t\t | M\u00E1x.: {{propriedade.get('moreItemsMaxItems').value}})\n\t\t\t\t </legend>\n\t\t\t\t <mat-accordion class=\"items\" multi>\n\t\t\t\t\t <mat-expansion-panel\n\t\t\t\t\t\t *ngFor=\"let item of propriedade.get('moreItemsConfig').value.slice().reverse(); index as indexMoreItems\"\n\t\t\t\t\t\t expanded>\n\t\t\t\t\t\t <mat-expansion-panel-header>\n\t\t\t\t\t\t\t\t<mat-panel-title class=\"titleForm\">#\n\t\t\t\t\t\t\t\t\t{{propriedade.get('moreItemsConfig').value.length - 1 - indexMoreItems + 1}}</mat-panel-title>\n\t\t\t\t\t\t\t\t<mat-panel-description class=\"titleForm\">\n\t\t\t\t\t\t\t\t\t{{propriedade.get('label').value}}\n\t\t\t\t\t\t\t\t\t<mat-icon>{{propriedade.get('moreItemsIcon').value}}</mat-icon>\n\t\t\t\t\t\t\t\t</mat-panel-description>\n\t\t\t\t\t\t\t</mat-expansion-panel-header>\n\t\t\t\t\t\t <koala-dynamic-form\n\t\t\t\t\t\t\t [showFieldsMoreItensConfig]=\"item.showFieldsMoreItensConfig\"\n\t\t\t\t\t\t\t [showFields]=\"item.showFields\"\n\t\t\t\t\t\t\t [formConfig]=\"item.formConfig\"\n\t\t\t\t\t\t\t [form]=\"item.form\"\n [tabIndexStart]=\"tabIndexStart + i\">\n\t\t\t\t\t\t </koala-dynamic-form>\n\t\t\t\t\t <mat-action-row\n\t\t\t\t\t\t *ngIf=\"propriedade.get('moreItemsConfig').value.length > propriedade.get('moreItemsMinItems').value\">\n\t\t\t\t\t <button\n\t\t\t\t\t\t (click)=\"removeMoreItem(i, propriedade.get('moreItemsConfig').value.length - 1 - indexMoreItems)\"\n\t\t\t\t\t\t mat-icon-button>\n\t\t\t\t\t\t <mat-icon>delete</mat-icon>\n\t\t\t\t\t </button>\n\t\t\t\t\t </mat-action-row>\n\t\t\t\t\t </mat-expansion-panel>\n\t\t\t\t </mat-accordion>\n\t\t\t </fieldset>\n\t\t </div>\n\t\t <mat-form-field\n\t\t\t *ngIf=\"propriedade.get('type').value == typeField.autocomplete\"\n\t\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t\t [formGroupName]=\"i\"\n\t\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}} {{propriedade.get('multiple').value &&\n\t propriedade.get('required').value ? '*' : ''}}</mat-label>\n\t\t\t <div *ngIf=\"propriedade.get('multiple').value else single\">\n\t <mat-chip-list #chipList>\n <mat-chip\n (removed)=\"removeOptionOnAutocomplete(i, option)\"\n *ngFor=\"let option of propriedade.get('autocompleteSelectedValue').value\"\n [color]=\"getColorChip(propriedade.get('autocompleteMultipleConfig').value | async)\"\n [removable]=\"true\"\n [selectable]=\"true\">\n {{display(option)}}\n <mat-icon *ngIf=\"!propriedade.get('disabled').value\" matChipRemove>cancel</mat-icon>\n </mat-chip>\n\t <input\n [id]=\"'autocomplete-' + propriedade.get('name').value\"\n [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t [required]=\"propriedade.get('required').value\"\n\t\t [matAutocomplete]=\"auto\"\n\t\t [matChipInputFor]=\"chipList\"\n [tabIndex]=\"tabIndexStart + i\"\n [autocomplete]=\"getRandomString()\"\n\t\t formControlName=\"value\"\n\t\t matInput\n\t\t type=\"text\"\n\t\t placeholder=\"Selecione um ou mais op\u00E7\u00F5es...\">\n\t </mat-chip-list>\n\t </div>\n\t <ng-template #single>\n\t\t <input\n\t\t\t [matAutocomplete]=\"auto\"\n [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t\t [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\"\n [autocomplete]=\"getRandomString()\"\n\t\t\t formControlName=\"value\"\n\t\t\t matInput\n\t\t\t placeholder=\"Selecione uma op\u00E7\u00E3o...\"\n\t\t\t type=\"text\">\n\t </ng-template>\n\t <mat-spinner *ngIf=\"propriedade.get('autocompleteLoading').value | async\" color=\"primary\"\n\t matSuffix></mat-spinner>\n\t <button\n\t\t (click)=\"clearAutocomplete(i)\"\n\t\t *ngIf=\"\n\t !(propriedade.get('autocompleteLoading').value | async) &&\n\t !propriedade.get('disabled').value\"\n\t\t color=\"warn\"\n\t\t mat-icon-button\n\t\t matSuffix\n\t\t type=\"button\">\n\t <mat-icon>close</mat-icon>\n\t </button>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required || propriedade.get('value').errors?.autocompleteSelected\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getAutocompleteMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t <mat-autocomplete\n\t\t #auto=\"matAutocomplete\"\n\t\t [displayWith]=\"display\" autoActiveFirstOption>\n\t\t <div *ngIf=\"(getAutocompleteOptions(propriedade) | async) as options\">\n\t\t <mat-option *ngFor=\"let option of options\" [value]=\"option\">\n\t\t {{option.name}}\n\t\t </mat-option>\n\t\t </div>\n\t </mat-autocomplete>\n\t </mat-form-field>\n\t\t <div *ngIf=\"propriedade.get('type').value == typeField.file\">\n\t\t\t <koala-file-button\n\t\t\t\t (getFiles)=\"propriedade.get('value').setValue($event)\"\n\t\t\t\t [accept]=\"propriedade.get('fileButtonConfig').value.accept\"\n\t\t\t\t [backgroundColor]=\"propriedade.get('fileButtonConfig').value.backgroundColor\"\n\t\t\t\t [color]=\"propriedade.get('fileButtonConfig').value.color\"\n\t\t\t\t [disabled]=\"propriedade.get('disabled').value\"\n\t\t\t\t [icon]=\"propriedade.get('fileButtonConfig').value.icon\"\n\t\t\t\t [multiple]=\"propriedade.get('multiple').value\"\n\t\t\t\t [text]=\"propriedade.get('fileButtonConfig').value.text\">\n\t\t\t </koala-file-button>\n\t\t </div>\n\t\t <div *ngIf=\"\n\t\t propriedade.get('type').value == typeField.dynamicForm &&\n\t\t\t\t(getDynamicFormConfig(propriedade) | async) as dynamicFormConfig\">\n\t\t\t <fieldset *ngIf=\"propriedade.get('label').value else dynamicFormWithoutLabel\">\n\t\t\t\t <legend>{{propriedade.get('label').value}}</legend>\n\t\t\t\t <koala-dynamic-form\n\t\t\t\t\t [formConfig]=\"dynamicFormConfig.formConfig\"\n\t\t\t\t\t [form]=\"dynamicFormConfig.form\"\n\t\t\t\t\t [setValues]=\"dynamicFormConfig.setValues\"\n\t\t\t\t\t [showFields]=\"dynamicFormConfig.showFields\"\n [tabIndexStart]=\"tabIndexStart + i\">\n\t\t\t\t </koala-dynamic-form>\n\t\t\t </fieldset>\n\t\t\t <ng-template #dynamicFormWithoutLabel>\n\t\t\t\t <koala-dynamic-form\n\t\t\t\t\t [formConfig]=\"dynamicFormConfig.formConfig\"\n\t\t\t\t\t [form]=\"dynamicFormConfig.form\"\n\t\t\t\t\t [setValues]=\"dynamicFormConfig.setValues\"\n\t\t\t\t\t [showFields]=\"dynamicFormConfig.showFields\"\n [tabIndexStart]=\"tabIndexStart + i\">\n\t\t\t\t </koala-dynamic-form>\n\t\t\t </ng-template>\n\t\t </div>\n <div\n class=\"radio-btn-group\"\n *ngIf=\"propriedade.get('type').value == typeField.radio\"\n [formGroupName]=\"i\"\n [ngClass]=\"propriedade.get('fieldClass').value\">\n <mat-radio-group formControlName=\"value\">\n <label *ngIf=\"propriedade.get('label').value\">{{propriedade.get('label').value}}</label>\n <mat-radio-button\n [tabIndex]=\"tabIndexStart + i\"\n *ngFor=\"let options of propriedade.get('opcoesSelect').value\"\n [value]=\"options.value\">\n {{options.name}}\n </mat-radio-button>\n </mat-radio-group>\n </div>\n\t </div>\n </div>\n <ng-content select=\"[btn-submit]\"></ng-content>\n</div>\n", styles: [".more-items-content fieldset{border:1px solid #cccccc;padding:16px}.more-items-content fieldset legend{font-family:Josefin Sans,sans-serif;font-size:11px;font-weight:700;padding:0 8px}.more-items-content .items .titleForm{color:#616161}.more-items-content .items .mat-expansion-panel-header-title,.more-items-content .items .mat-expansion-panel-header-description{flex-basis:0}.more-items-content .items .mat-expansion-panel-header-description{align-items:center;justify-content:space-between}.more-items-content .items .mat-form-field+.mat-form-field{margin-left:8px}.radio-btn-group label{position:relative;display:block;padding:10px 0}.text-obs{background:#eeeeee;border-radius:5px;color:#212121;font-family:OpenSansLight,sans-serif;height:150px;margin:0 auto 10px;overflow-y:auto;padding:10px;position:relative;width:calc(100% - 27px)}.select-multiple-native{margin-bottom:15px}.select-multiple-native select{width:100%;height:150px;background:transparent;border:none}.select-multiple-native select:focus,.select-multiple-native select:active{outline:none}.select-multiple-native select option{padding:5px 10px;font-family:JosefinSans,sans-serif}.select-multiple-native select option:checked{background:#f1f1f1!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.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],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i4$1.CurrencyMaskDirective, selector: "[currencyMask]", inputs: ["max", "min", "options"] }, { kind: "directive", type: i5.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "triggerOnMaskChange"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: i6.FileButtonComponent, selector: "koala-file-button", inputs: ["color", "backgroundColor", "icon", "text", "tooltip", "disabled", "multiple", "accept", "setFile", "updateFileList", "autoclear"], outputs: ["getFiles"] }, { kind: "directive", type: i7.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i8.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i12.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i12.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i13.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i14.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i14.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i17.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i17.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i17.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i17.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i17.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i17.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i18.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i18.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i18.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i18.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i19.ButtonComponent, selector: "koala-button", inputs: ["color", "backgroundColor", "icon", "text", "tooltip", "disabled", "koalaIcon", "koalaIconSize"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: DynamicFormComponent, selector: "koala-dynamic-form", inputs: ["form", "formConfig", "showFields", "showFieldsMoreItensConfig", "setValues", "tabIndexStart"] }, { kind: "directive", type: KoalaAutofocusDirective, selector: "[koalaAutoFocus]", inputs: ["koalaAutoFocus"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1461
1463
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: DynamicFormComponent, decorators: [{
|
|
1462
1464
|
type: Component,
|
|
1463
|
-
args: [{ selector: 'koala-dynamic-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"form\" class=\"p-relative w-100\">\n <div *ngFor=\"let propriedade of controls?.controls; let i = index;\"\n [ngClass]=\"(propriedade.get('show').value | async) ? propriedade.get('class').value : 'd-none'\"\n formArrayName=\"formData\">\n\t <div *ngIf=\"propriedade.get('show').value | async\">\n\t <mat-form-field\n\t\t *ngIf=\"propriedade.get('type').value == typeField.text ||\n\t propriedade.get('type').value == typeField.password ||\n\t propriedade.get('type').value == typeField.cpf ||\n\t propriedade.get('type').value == typeField.cnpj ||\n\t propriedade.get('type').value == typeField.datetime ||\n\t propriedade.get('type').value == typeField.email ||\n\t propriedade.get('type').value == typeField.number ||\n\t propriedade.get('type').value == typeField.stringNumber ||\n\t propriedade.get('type').value == typeField.time ||\n\t propriedade.get('type').value == typeField.date ||\n\t propriedade.get('type').value == typeField.hoursAndMinutes ||\n\t propriedade.get('type').value == typeField.phone ||\n\t propriedade.get('type').value == typeField.percent ||\n\t propriedade.get('type').value == typeField.color ||\n\t propriedade.get('type').value == typeField.month ||\n\t propriedade.get('type').value == typeField.competenceDate ||\n propriedade.get('type').value == typeField.stringWithCustomMasc\"\n\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t [formGroupName]=\"i\"\n\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t <input\n\t\t [dropSpecialCharacters]=\"false\"\n\t\t [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t (keyup)=\"hoursAndMinutesApplyMask(i, $event)\"\n\t\t [required]=\"propriedade.get('required').value\"\n\t\t [tabIndex]=\"tabIndexStart + i\"\n\t\t [mask]=\"((propriedade.get('type').value == typeField.competenceDate) ? '00/0000' : null) ||\n\t\t ((propriedade.get('type').value == typeField.phone) ? '(00)0000-0000?0' : null) ||\n\t\t ((propriedade.get('type').value == typeField.stringNumber) ? '0{'+propriedade.get('maxLength').value+'}' : null) ||\n ((propriedade.get('type').value == typeField.cpf) ? '000.000.000-00' : null) ||\n ((propriedade.get('type').value == typeField.cnpj) ? '00.000.000/0000-00' : null) ||\n ((propriedade.get('type').value == typeField.percent) ? 'percent' : null) ||\n\t\t\t\t\t\t\t\t\t((propriedade.get('type').value == typeField.hoursAndMinutes) ? hoursAndMinutesMask : null) ||\n\t\t\t\t\t\t\t\t\t((propriedade.get('type').value == typeField.stringWithCustomMasc) ? propriedade.get('customMasc').value : null)\"\n\t\t [validation]=\"\n\t (propriedade.get('type').value == typeField.cpf && propriedade.get('value').errors?.cpfInvalid) ||\n\t (propriedade.get('type').value == typeField.cnpj && propriedade.get('value').errors?.cnpjInvalid)\"\n\t\t [type]=\"((propriedade.get('type').value == typeField.cpf ||\n propriedade.get('type').value == typeField.cnpj ||\n propriedade.get('type').value == typeField.phone ||\n propriedade.get('type').value == typeField.percent\n )) ? 'tel' : (\n propriedade.get('type').value == typeField.month ?\n 'month' : (\n propriedade.get('type').value == typeField.date ?\n 'date' : (\n propriedade.get('type').value == typeField.datetime ?\n 'datetime-local' : (\n propriedade.get('type').value == typeField.email ?\n 'email' : (\n propriedade.get('type').value == typeField.number ?\n 'number' : (\n propriedade.get('type').value == typeField.time ?\n 'time' : (\n propriedade.get('type').value == typeField.password ?\n 'password' : (\n propriedade.get('type').value == typeField.color ?\n 'color' : 'text'))))))))\"\n [min]=\"propriedade.get('min').value\"\n [max]=\"propriedade.get('max').value\"\n [minLength]=\"propriedade.get('minLength').value\"\n [maxLength]=\"propriedade.get('maxLength').value\"\n [thousandSeparator]=\"propriedade.get('customMascThousandSeparator').value\"\n [suffix]=\"propriedade.get('customMascSuffix').value\"\n [prefix]=\"propriedade.get('customMascPrefix').value\"\n separatorLimit=\"0\"\n [autocomplete]=\"getRandomString()\"\n\t\t formControlName=\"value\"\n\t\t matInput/>\n\t <button\n\t\t (click)=\"passwordView(i)\"\n\t\t *ngIf=\"propriedade.get('hidePassword').value !== null\"\n\t\t [attr.aria-label]=\"'Hide password'\"\n\t\t [attr.aria-pressed]=\"propriedade.get('hidePassword').value\"\n\t\t mat-icon-button matSuffix tabindex=\"-1\" type=\"button\">\n\t <mat-icon>{{propriedade.get('hidePassword').value ? 'visibility_off' : 'visibility'}}</mat-icon>\n\t </button>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.cpfInvalid\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getInvalidMessage(propriedade.get('label').value)}}\n\t </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.cnpjInvalid\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getInvalidMessage(propriedade.get('label').value)}}\n\t </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.email\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getInvalidMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.min\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinMessage(propriedade.get('min').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.max\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxMessage(propriedade.get('max').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.dateMin\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getDateMinMessage()}}\n {{propriedade.get('min').value | date:\"shortDate\"}}.\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.dateMax\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getDateMaxMessage()}}\n {{propriedade.get('max').value | date:\"shortDate\"}}.\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t </mat-form-field>\n\t <mat-form-field\n\t\t *ngIf=\"propriedade.get('type').value == typeField.coin\"\n\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t [formGroupName]=\"i\"\n\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t <input\n\t\t [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\"\n [min]=\"propriedade.get('min').value\"\n [max]=\"propriedade.get('max').value\"\n [minLength]=\"propriedade.get('minLength').value\"\n [maxLength]=\"propriedade.get('maxLength').value\"\n [autocomplete]=\"getRandomString()\"\n\t\t currencyMask\n\t\t formControlName=\"value\"\n\t\t matInput\n\t\t type=\"tel\"/>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n <mat-error *ngIf=\"propriedade.get('value').errors?.min\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinMessage(propriedade.get('min').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.max\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxMessage(propriedade.get('max').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t </mat-form-field>\n <mat-form-field\n *ngIf=\"propriedade.get('type').value == typeField.float\"\n [appearance]=\"propriedade.get('appearance').value\"\n [floatLabel]=\"propriedade.get('floatLabel').value\"\n [formGroupName]=\"i\"\n [ngClass]=\"propriedade.get('fieldClass').value\">\n <mat-label>{{propriedade.get('label').value}}</mat-label>\n <input\n [koalaAutoFocus]=\"propriedade.get('focus').value\"\n [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\"\n [min]=\"propriedade.get('min').value\"\n [max]=\"propriedade.get('max').value\"\n [minLength]=\"propriedade.get('minLength').value\"\n [maxLength]=\"propriedade.get('maxLength').value\"\n [autocomplete]=\"getRandomString()\"\n currencyMask\n [options]=\"{prefix: ''}\"\n formControlName=\"value\"\n matInput\n type=\"tel\"/>\n <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n <mat-icon>info</mat-icon>\n {{propriedade.get('textHint').value}}\n </mat-hint>\n <mat-error *ngIf=\"propriedade.get('value').errors?.min\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinMessage(propriedade.get('min').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.max\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxMessage(propriedade.get('max').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n </mat-form-field>\n\t <mat-form-field\n\t\t *ngIf=\"propriedade.get('type').value == typeField.valueList ||\n\t propriedade.get('type').value == typeField.textarea\"\n\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t [formGroupName]=\"i\"\n\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t <textarea\n #textarea\n\t\t [koalaAutoFocus]=\"propriedade.get('focus').value\"\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n\t\t [cdkAutosizeMaxRows]=\"8\"\n\t\t [cdkAutosizeMinRows]=\"3\"\n\t\t [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\"\n [minLength]=\"propriedade.get('minLength').value\"\n [maxLength]=\"propriedade.get('maxLength').value\"\n\t\t formControlName=\"value\"\n\t\t matInput>\n </textarea>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n <mat-hint align=\"end\" *ngIf=\"propriedade.get('maxLength').value\">\n {{textarea.value.length}}/{{propriedade.get('maxLength').value}}\n </mat-hint>\n <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t </mat-form-field>\n\t\t <mat-form-field\n\t\t\t *ngIf=\"propriedade.get('type').value == typeField.textLogs\"\n\t\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t\t [formGroupName]=\"i\"\n\t\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t <div [innerHTML]=\"propriedade.get('textLogs').value\" class=\"text-obs\"></div>\n\t <textarea\n #textarea\n\t\t [koalaAutoFocus]=\"propriedade.get('focus').value\"\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n\t\t [cdkAutosizeMaxRows]=\"8\"\n\t\t [cdkAutosizeMinRows]=\"3\"\n\t\t [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\"\n [minLength]=\"propriedade.get('minLength').value\"\n [maxLength]=\"propriedade.get('maxLength').value\"\n\t\t formControlName=\"value\"\n\t\t matInput>\n\t </textarea>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n <mat-hint align=\"end\" *ngIf=\"propriedade.get('maxLength').value\">\n {{textarea.value.length}}/{{propriedade.get('maxLength').value}}\n </mat-hint>\n <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t </mat-form-field>\n\t <mat-form-field\n\t\t *ngIf=\"propriedade.get('type').value == typeField.select\"\n\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t [formGroupName]=\"i\"\n\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t <mat-select [multiple]=\"propriedade.get('multiple').value\" [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\" formControlName=\"value\">\n\t <mat-option *ngFor=\"let options of propriedade.get('opcoesSelect').value\" [value]=\"options.value\">\n\t {{options.name}}\n\t </mat-option>\n\t </mat-select>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t </mat-form-field>\n <mat-form-field\n class=\"select-multiple-native\"\n *ngIf=\"propriedade.get('type').value == typeField.selectMultipleNative\"\n [appearance]=\"propriedade.get('appearance').value\"\n [floatLabel]=\"propriedade.get('floatLabel').value\"\n [formGroupName]=\"i\"\n [ngClass]=\"propriedade.get('fieldClass').value\">\n <mat-label>{{propriedade.get('label').value}}</mat-label>\n <select\n matNativeControl\n formControlName=\"value\"\n multiple\n [tabIndex]=\"tabIndexStart + i\"\n [required]=\"propriedade.get('required').value\">\n <option *ngFor=\"let options of propriedade.get('opcoesSelect').value\" [value]=\"options.value\">\n {{options.name}}\n </option>\n </select>\n <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n <mat-icon>info</mat-icon>\n {{propriedade.get('textHint').value}}\n </mat-hint>\n <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n </mat-form-field>\n\t <div\n\t\t *ngIf=\"propriedade.get('type').value == typeField.checkbox\"\n\t\t [formGroupName]=\"i\"\n\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-checkbox\n [tabIndex]=\"tabIndexStart + i\"\n\t\t formControlName=\"value\"\n\t\t value=\"true\">\n\t {{propriedade.get('label').value}}\n\t </mat-checkbox>\n\t </div>\n\t\t <div\n\t\t\t *ngIf=\"propriedade.get('type').value == typeField.moreItems\"\n\t\t\t [formGroupName]=\"i\"\n\t\t\t [ngClass]=\"propriedade.get('fieldClass').value\"\n\t\t\t class=\"more-items-content\">\n\t\t\t <fieldset>\n\t\t\t\t <legend>\n\t\t\t\t\t <koala-button\n\t\t\t\t\t\t (click)=\"addMoreItem(i)\"\n\t\t\t\t\t\t [disabled]=\"propriedade.get('moreItemsConfig').value.length === propriedade.get('moreItemsMaxItems').value\"\n\t\t\t\t\t\t [tooltip]=\"propriedade.get('moreItemsButtonIconAddlabel').value\"\n\t\t\t\t\t\t [backgroundColor]=\"propriedade.get('moreItemsIconBackgroundColor').value\"\n [color]=\"propriedade.get('moreItemsIconFontColor').value\"\n\t\t\t\t\t\t class=\"btn-add-more-items\"\n\t\t\t\t\t\t icon=\"add\">\n\t\t\t\t\t </koala-button>\n\t\t\t\t\t {{propriedade.get('label').value}} (Min.: {{propriedade.get('moreItemsMinItems').value}}\n\t\t\t\t\t | M\u00E1x.: {{propriedade.get('moreItemsMaxItems').value}})\n\t\t\t\t </legend>\n\t\t\t\t <mat-accordion class=\"items\" multi>\n\t\t\t\t\t <mat-expansion-panel\n\t\t\t\t\t\t *ngFor=\"let item of propriedade.get('moreItemsConfig').value.slice().reverse(); index as indexMoreItems\"\n\t\t\t\t\t\t expanded>\n\t\t\t\t\t\t <mat-expansion-panel-header>\n\t\t\t\t\t\t\t\t<mat-panel-title class=\"titleForm\">#\n\t\t\t\t\t\t\t\t\t{{propriedade.get('moreItemsConfig').value.length - 1 - indexMoreItems + 1}}</mat-panel-title>\n\t\t\t\t\t\t\t\t<mat-panel-description class=\"titleForm\">\n\t\t\t\t\t\t\t\t\t{{propriedade.get('label').value}}\n\t\t\t\t\t\t\t\t\t<mat-icon>{{propriedade.get('moreItemsIcon').value}}</mat-icon>\n\t\t\t\t\t\t\t\t</mat-panel-description>\n\t\t\t\t\t\t\t</mat-expansion-panel-header>\n\t\t\t\t\t\t <koala-dynamic-form\n\t\t\t\t\t\t\t [showFieldsMoreItensConfig]=\"item.showFieldsMoreItensConfig\"\n\t\t\t\t\t\t\t [showFields]=\"item.showFields\"\n\t\t\t\t\t\t\t [formConfig]=\"item.formConfig\"\n\t\t\t\t\t\t\t [form]=\"item.form\"\n [tabIndexStart]=\"tabIndexStart + i\">\n\t\t\t\t\t\t </koala-dynamic-form>\n\t\t\t\t\t <mat-action-row\n\t\t\t\t\t\t *ngIf=\"propriedade.get('moreItemsConfig').value.length > propriedade.get('moreItemsMinItems').value\">\n\t\t\t\t\t <button\n\t\t\t\t\t\t (click)=\"removeMoreItem(i, propriedade.get('moreItemsConfig').value.length - 1 - indexMoreItems)\"\n\t\t\t\t\t\t mat-icon-button>\n\t\t\t\t\t\t <mat-icon>delete</mat-icon>\n\t\t\t\t\t </button>\n\t\t\t\t\t </mat-action-row>\n\t\t\t\t\t </mat-expansion-panel>\n\t\t\t\t </mat-accordion>\n\t\t\t </fieldset>\n\t\t </div>\n\t\t <mat-form-field\n\t\t\t *ngIf=\"propriedade.get('type').value == typeField.autocomplete\"\n\t\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t\t [formGroupName]=\"i\"\n\t\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}} {{propriedade.get('multiple').value &&\n\t propriedade.get('required').value ? '*' : ''}}</mat-label>\n\t\t\t <div *ngIf=\"propriedade.get('multiple').value else single\">\n\t <mat-chip-list #chipList>\n <mat-chip\n (removed)=\"removeOptionOnAutocomplete(i, option)\"\n *ngFor=\"let option of propriedade.get('autocompleteSelectedValue').value\"\n [color]=\"getColorChip(propriedade.get('autocompleteMultipleConfig').value | async)\"\n [removable]=\"true\"\n [selectable]=\"true\">\n {{display(option)}}\n <mat-icon *ngIf=\"!propriedade.get('disabled').value\" matChipRemove>cancel</mat-icon>\n </mat-chip>\n\t <input\n\t\t #autocompleteInput\n [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t [required]=\"propriedade.get('required').value\"\n\t\t [matAutocomplete]=\"auto\"\n\t\t [matChipInputFor]=\"chipList\"\n [tabIndex]=\"tabIndexStart + i\"\n [autocomplete]=\"getRandomString()\"\n\t\t formControlName=\"value\"\n\t\t matInput\n\t\t type=\"text\"\n\t\t placeholder=\"Selecione um ou mais op\u00E7\u00F5es...\">\n\t </mat-chip-list>\n\t </div>\n\t <ng-template #single>\n\t\t <input\n\t\t\t [matAutocomplete]=\"auto\"\n [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t\t [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\"\n [autocomplete]=\"getRandomString()\"\n\t\t\t formControlName=\"value\"\n\t\t\t matInput\n\t\t\t placeholder=\"Selecione uma op\u00E7\u00E3o...\"\n\t\t\t type=\"text\">\n\t </ng-template>\n\t <mat-spinner *ngIf=\"propriedade.get('autocompleteLoading').value | async\" color=\"primary\"\n\t matSuffix></mat-spinner>\n\t <button\n\t\t (click)=\"clearAutocomplete(i)\"\n\t\t *ngIf=\"\n\t !(propriedade.get('autocompleteLoading').value | async) &&\n\t !propriedade.get('disabled').value\"\n\t\t color=\"warn\"\n\t\t mat-icon-button\n\t\t matSuffix\n\t\t type=\"button\">\n\t <mat-icon>close</mat-icon>\n\t </button>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required || propriedade.get('value').errors?.autocompleteSelected\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getAutocompleteMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t <mat-autocomplete\n\t\t #auto=\"matAutocomplete\"\n\t\t [displayWith]=\"display\" autoActiveFirstOption>\n\t\t <div *ngIf=\"(getAutocompleteOptions(propriedade) | async) as options\">\n\t\t <mat-option *ngFor=\"let option of options\" [value]=\"option\">\n\t\t {{option.name}}\n\t\t </mat-option>\n\t\t </div>\n\t </mat-autocomplete>\n\t </mat-form-field>\n\t\t <div *ngIf=\"propriedade.get('type').value == typeField.file\">\n\t\t\t <koala-file-button\n\t\t\t\t (getFiles)=\"propriedade.get('value').setValue($event)\"\n\t\t\t\t [accept]=\"propriedade.get('fileButtonConfig').value.accept\"\n\t\t\t\t [backgroundColor]=\"propriedade.get('fileButtonConfig').value.backgroundColor\"\n\t\t\t\t [color]=\"propriedade.get('fileButtonConfig').value.color\"\n\t\t\t\t [disabled]=\"propriedade.get('disabled').value\"\n\t\t\t\t [icon]=\"propriedade.get('fileButtonConfig').value.icon\"\n\t\t\t\t [multiple]=\"propriedade.get('multiple').value\"\n\t\t\t\t [text]=\"propriedade.get('fileButtonConfig').value.text\">\n\t\t\t </koala-file-button>\n\t\t </div>\n\t\t <div *ngIf=\"\n\t\t propriedade.get('type').value == typeField.dynamicForm &&\n\t\t\t\t(getDynamicFormConfig(propriedade) | async) as dynamicFormConfig\">\n\t\t\t <fieldset *ngIf=\"propriedade.get('label').value else dynamicFormWithoutLabel\">\n\t\t\t\t <legend>{{propriedade.get('label').value}}</legend>\n\t\t\t\t <koala-dynamic-form\n\t\t\t\t\t [formConfig]=\"dynamicFormConfig.formConfig\"\n\t\t\t\t\t [form]=\"dynamicFormConfig.form\"\n\t\t\t\t\t [setValues]=\"dynamicFormConfig.setValues\"\n\t\t\t\t\t [showFields]=\"dynamicFormConfig.showFields\"\n [tabIndexStart]=\"tabIndexStart + i\">\n\t\t\t\t </koala-dynamic-form>\n\t\t\t </fieldset>\n\t\t\t <ng-template #dynamicFormWithoutLabel>\n\t\t\t\t <koala-dynamic-form\n\t\t\t\t\t [formConfig]=\"dynamicFormConfig.formConfig\"\n\t\t\t\t\t [form]=\"dynamicFormConfig.form\"\n\t\t\t\t\t [setValues]=\"dynamicFormConfig.setValues\"\n\t\t\t\t\t [showFields]=\"dynamicFormConfig.showFields\"\n [tabIndexStart]=\"tabIndexStart + i\">\n\t\t\t\t </koala-dynamic-form>\n\t\t\t </ng-template>\n\t\t </div>\n <div\n class=\"radio-btn-group\"\n *ngIf=\"propriedade.get('type').value == typeField.radio\"\n [formGroupName]=\"i\"\n [ngClass]=\"propriedade.get('fieldClass').value\">\n <mat-radio-group formControlName=\"value\">\n <label *ngIf=\"propriedade.get('label').value\">{{propriedade.get('label').value}}</label>\n <mat-radio-button\n [tabIndex]=\"tabIndexStart + i\"\n *ngFor=\"let options of propriedade.get('opcoesSelect').value\"\n [value]=\"options.value\">\n {{options.name}}\n </mat-radio-button>\n </mat-radio-group>\n </div>\n\t </div>\n </div>\n <ng-content select=\"[btn-submit]\"></ng-content>\n</div>\n", styles: [".more-items-content fieldset{border:1px solid #cccccc;padding:16px}.more-items-content fieldset legend{font-family:Josefin Sans,sans-serif;font-size:11px;font-weight:700;padding:0 8px}.more-items-content .items .titleForm{color:#616161}.more-items-content .items .mat-expansion-panel-header-title,.more-items-content .items .mat-expansion-panel-header-description{flex-basis:0}.more-items-content .items .mat-expansion-panel-header-description{align-items:center;justify-content:space-between}.more-items-content .items .mat-form-field+.mat-form-field{margin-left:8px}.radio-btn-group label{position:relative;display:block;padding:10px 0}.text-obs{background:#eeeeee;border-radius:5px;color:#212121;font-family:OpenSansLight,sans-serif;height:150px;margin:0 auto 10px;overflow-y:auto;padding:10px;position:relative;width:calc(100% - 27px)}.select-multiple-native{margin-bottom:15px}.select-multiple-native select{width:100%;height:150px;background:transparent;border:none}.select-multiple-native select:focus,.select-multiple-native select:active{outline:none}.select-multiple-native select option{padding:5px 10px;font-family:JosefinSans,sans-serif}.select-multiple-native select option:checked{background:#f1f1f1!important}\n"] }]
|
|
1465
|
+
args: [{ selector: 'koala-dynamic-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"form\" class=\"p-relative w-100\" [id]=\"formId\">\n <div *ngFor=\"let propriedade of controls?.controls; let i = index;\"\n [ngClass]=\"(propriedade.get('show').value | async) ? propriedade.get('class').value : 'd-none'\"\n formArrayName=\"formData\">\n\t <div *ngIf=\"propriedade.get('show').value | async\">\n\t <mat-form-field\n\t\t *ngIf=\"propriedade.get('type').value == typeField.text ||\n\t propriedade.get('type').value == typeField.password ||\n\t propriedade.get('type').value == typeField.cpf ||\n\t propriedade.get('type').value == typeField.cnpj ||\n\t propriedade.get('type').value == typeField.datetime ||\n\t propriedade.get('type').value == typeField.email ||\n\t propriedade.get('type').value == typeField.number ||\n\t propriedade.get('type').value == typeField.stringNumber ||\n\t propriedade.get('type').value == typeField.time ||\n\t propriedade.get('type').value == typeField.date ||\n\t propriedade.get('type').value == typeField.hoursAndMinutes ||\n\t propriedade.get('type').value == typeField.phone ||\n\t propriedade.get('type').value == typeField.percent ||\n\t propriedade.get('type').value == typeField.color ||\n\t propriedade.get('type').value == typeField.month ||\n\t propriedade.get('type').value == typeField.competenceDate ||\n propriedade.get('type').value == typeField.stringWithCustomMasc\"\n\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t [formGroupName]=\"i\"\n\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t <input\n\t\t [dropSpecialCharacters]=\"false\"\n\t\t [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t (keyup)=\"hoursAndMinutesApplyMask(i, $event)\"\n\t\t [required]=\"propriedade.get('required').value\"\n\t\t [tabIndex]=\"tabIndexStart + i\"\n\t\t [mask]=\"((propriedade.get('type').value == typeField.competenceDate) ? '00/0000' : null) ||\n\t\t ((propriedade.get('type').value == typeField.phone) ? '(00)0000-0000?0' : null) ||\n\t\t ((propriedade.get('type').value == typeField.stringNumber) ? '0{'+propriedade.get('maxLength').value+'}' : null) ||\n ((propriedade.get('type').value == typeField.cpf) ? '000.000.000-00' : null) ||\n ((propriedade.get('type').value == typeField.cnpj) ? '00.000.000/0000-00' : null) ||\n ((propriedade.get('type').value == typeField.percent) ? 'percent' : null) ||\n\t\t\t\t\t\t\t\t\t((propriedade.get('type').value == typeField.hoursAndMinutes) ? hoursAndMinutesMask : null) ||\n\t\t\t\t\t\t\t\t\t((propriedade.get('type').value == typeField.stringWithCustomMasc) ? propriedade.get('customMasc').value : null)\"\n\t\t [validation]=\"\n\t (propriedade.get('type').value == typeField.cpf && propriedade.get('value').errors?.cpfInvalid) ||\n\t (propriedade.get('type').value == typeField.cnpj && propriedade.get('value').errors?.cnpjInvalid)\"\n\t\t [type]=\"((propriedade.get('type').value == typeField.cpf ||\n propriedade.get('type').value == typeField.cnpj ||\n propriedade.get('type').value == typeField.phone ||\n propriedade.get('type').value == typeField.percent\n )) ? 'tel' : (\n propriedade.get('type').value == typeField.month ?\n 'month' : (\n propriedade.get('type').value == typeField.date ?\n 'date' : (\n propriedade.get('type').value == typeField.datetime ?\n 'datetime-local' : (\n propriedade.get('type').value == typeField.email ?\n 'email' : (\n propriedade.get('type').value == typeField.number ?\n 'number' : (\n propriedade.get('type').value == typeField.time ?\n 'time' : (\n propriedade.get('type').value == typeField.password ?\n 'password' : (\n propriedade.get('type').value == typeField.color ?\n 'color' : 'text'))))))))\"\n [min]=\"propriedade.get('min').value\"\n [max]=\"propriedade.get('max').value\"\n [minLength]=\"propriedade.get('minLength').value\"\n [maxLength]=\"propriedade.get('maxLength').value\"\n [thousandSeparator]=\"propriedade.get('customMascThousandSeparator').value\"\n [suffix]=\"propriedade.get('customMascSuffix').value\"\n [prefix]=\"propriedade.get('customMascPrefix').value\"\n separatorLimit=\"0\"\n [autocomplete]=\"getRandomString()\"\n\t\t formControlName=\"value\"\n\t\t matInput/>\n\t <button\n\t\t (click)=\"passwordView(i)\"\n\t\t *ngIf=\"propriedade.get('hidePassword').value !== null\"\n\t\t [attr.aria-label]=\"'Hide password'\"\n\t\t [attr.aria-pressed]=\"propriedade.get('hidePassword').value\"\n\t\t mat-icon-button matSuffix tabindex=\"-1\" type=\"button\">\n\t <mat-icon>{{propriedade.get('hidePassword').value ? 'visibility_off' : 'visibility'}}</mat-icon>\n\t </button>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.cpfInvalid\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getInvalidMessage(propriedade.get('label').value)}}\n\t </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.cnpjInvalid\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getInvalidMessage(propriedade.get('label').value)}}\n\t </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.email\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getInvalidMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.min\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinMessage(propriedade.get('min').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.max\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxMessage(propriedade.get('max').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.dateMin\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getDateMinMessage()}}\n {{propriedade.get('min').value | date:\"shortDate\"}}.\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.dateMax\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getDateMaxMessage()}}\n {{propriedade.get('max').value | date:\"shortDate\"}}.\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t </mat-form-field>\n\t <mat-form-field\n\t\t *ngIf=\"propriedade.get('type').value == typeField.coin\"\n\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t [formGroupName]=\"i\"\n\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t <input\n\t\t [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\"\n [min]=\"propriedade.get('min').value\"\n [max]=\"propriedade.get('max').value\"\n [minLength]=\"propriedade.get('minLength').value\"\n [maxLength]=\"propriedade.get('maxLength').value\"\n [autocomplete]=\"getRandomString()\"\n\t\t currencyMask\n\t\t formControlName=\"value\"\n\t\t matInput\n\t\t type=\"tel\"/>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n <mat-error *ngIf=\"propriedade.get('value').errors?.min\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinMessage(propriedade.get('min').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.max\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxMessage(propriedade.get('max').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t </mat-form-field>\n <mat-form-field\n *ngIf=\"propriedade.get('type').value == typeField.float\"\n [appearance]=\"propriedade.get('appearance').value\"\n [floatLabel]=\"propriedade.get('floatLabel').value\"\n [formGroupName]=\"i\"\n [ngClass]=\"propriedade.get('fieldClass').value\">\n <mat-label>{{propriedade.get('label').value}}</mat-label>\n <input\n [koalaAutoFocus]=\"propriedade.get('focus').value\"\n [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\"\n [min]=\"propriedade.get('min').value\"\n [max]=\"propriedade.get('max').value\"\n [minLength]=\"propriedade.get('minLength').value\"\n [maxLength]=\"propriedade.get('maxLength').value\"\n [autocomplete]=\"getRandomString()\"\n currencyMask\n [options]=\"{prefix: ''}\"\n formControlName=\"value\"\n matInput\n type=\"tel\"/>\n <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n <mat-icon>info</mat-icon>\n {{propriedade.get('textHint').value}}\n </mat-hint>\n <mat-error *ngIf=\"propriedade.get('value').errors?.min\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinMessage(propriedade.get('min').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.max\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxMessage(propriedade.get('max').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n </mat-form-field>\n\t <mat-form-field\n\t\t *ngIf=\"propriedade.get('type').value == typeField.valueList ||\n\t propriedade.get('type').value == typeField.textarea\"\n\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t [formGroupName]=\"i\"\n\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t <textarea\n #textarea\n\t\t [koalaAutoFocus]=\"propriedade.get('focus').value\"\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n\t\t [cdkAutosizeMaxRows]=\"8\"\n\t\t [cdkAutosizeMinRows]=\"3\"\n\t\t [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\"\n [minLength]=\"propriedade.get('minLength').value\"\n [maxLength]=\"propriedade.get('maxLength').value\"\n\t\t formControlName=\"value\"\n\t\t matInput>\n </textarea>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n <mat-hint align=\"end\" *ngIf=\"propriedade.get('maxLength').value\">\n {{textarea.value.length}}/{{propriedade.get('maxLength').value}}\n </mat-hint>\n <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t </mat-form-field>\n\t\t <mat-form-field\n\t\t\t *ngIf=\"propriedade.get('type').value == typeField.textLogs\"\n\t\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t\t [formGroupName]=\"i\"\n\t\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t <div [innerHTML]=\"propriedade.get('textLogs').value\" class=\"text-obs\"></div>\n\t <textarea\n #textarea\n\t\t [koalaAutoFocus]=\"propriedade.get('focus').value\"\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n\t\t [cdkAutosizeMaxRows]=\"8\"\n\t\t [cdkAutosizeMinRows]=\"3\"\n\t\t [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\"\n [minLength]=\"propriedade.get('minLength').value\"\n [maxLength]=\"propriedade.get('maxLength').value\"\n\t\t formControlName=\"value\"\n\t\t matInput>\n\t </textarea>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n <mat-hint align=\"end\" *ngIf=\"propriedade.get('maxLength').value\">\n {{textarea.value.length}}/{{propriedade.get('maxLength').value}}\n </mat-hint>\n <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n </mat-error>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t </mat-form-field>\n\t <mat-form-field\n\t\t *ngIf=\"propriedade.get('type').value == typeField.select\"\n\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t [formGroupName]=\"i\"\n\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t <mat-select [multiple]=\"propriedade.get('multiple').value\" [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\" formControlName=\"value\">\n\t <mat-option *ngFor=\"let options of propriedade.get('opcoesSelect').value\" [value]=\"options.value\">\n\t {{options.name}}\n\t </mat-option>\n\t </mat-select>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t </mat-form-field>\n <mat-form-field\n class=\"select-multiple-native\"\n *ngIf=\"propriedade.get('type').value == typeField.selectMultipleNative\"\n [appearance]=\"propriedade.get('appearance').value\"\n [floatLabel]=\"propriedade.get('floatLabel').value\"\n [formGroupName]=\"i\"\n [ngClass]=\"propriedade.get('fieldClass').value\">\n <mat-label>{{propriedade.get('label').value}}</mat-label>\n <select\n matNativeControl\n formControlName=\"value\"\n multiple\n [tabIndex]=\"tabIndexStart + i\"\n [required]=\"propriedade.get('required').value\">\n <option *ngFor=\"let options of propriedade.get('opcoesSelect').value\" [value]=\"options.value\">\n {{options.name}}\n </option>\n </select>\n <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n <mat-icon>info</mat-icon>\n {{propriedade.get('textHint').value}}\n </mat-hint>\n <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n <mat-icon>error</mat-icon>\n {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n </mat-form-field>\n\t <div\n\t\t *ngIf=\"propriedade.get('type').value == typeField.checkbox\"\n\t\t [formGroupName]=\"i\"\n\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-checkbox\n [tabIndex]=\"tabIndexStart + i\"\n\t\t formControlName=\"value\"\n\t\t value=\"true\">\n\t {{propriedade.get('label').value}}\n\t </mat-checkbox>\n\t </div>\n\t\t <div\n\t\t\t *ngIf=\"propriedade.get('type').value == typeField.moreItems\"\n\t\t\t [formGroupName]=\"i\"\n\t\t\t [ngClass]=\"propriedade.get('fieldClass').value\"\n\t\t\t class=\"more-items-content\">\n\t\t\t <fieldset>\n\t\t\t\t <legend>\n\t\t\t\t\t <koala-button\n\t\t\t\t\t\t (click)=\"addMoreItem(i)\"\n\t\t\t\t\t\t [disabled]=\"propriedade.get('moreItemsConfig').value.length === propriedade.get('moreItemsMaxItems').value\"\n\t\t\t\t\t\t [tooltip]=\"propriedade.get('moreItemsButtonIconAddlabel').value\"\n\t\t\t\t\t\t [backgroundColor]=\"propriedade.get('moreItemsIconBackgroundColor').value\"\n [color]=\"propriedade.get('moreItemsIconFontColor').value\"\n\t\t\t\t\t\t class=\"btn-add-more-items\"\n\t\t\t\t\t\t icon=\"add\">\n\t\t\t\t\t </koala-button>\n\t\t\t\t\t {{propriedade.get('label').value}} (Min.: {{propriedade.get('moreItemsMinItems').value}}\n\t\t\t\t\t | M\u00E1x.: {{propriedade.get('moreItemsMaxItems').value}})\n\t\t\t\t </legend>\n\t\t\t\t <mat-accordion class=\"items\" multi>\n\t\t\t\t\t <mat-expansion-panel\n\t\t\t\t\t\t *ngFor=\"let item of propriedade.get('moreItemsConfig').value.slice().reverse(); index as indexMoreItems\"\n\t\t\t\t\t\t expanded>\n\t\t\t\t\t\t <mat-expansion-panel-header>\n\t\t\t\t\t\t\t\t<mat-panel-title class=\"titleForm\">#\n\t\t\t\t\t\t\t\t\t{{propriedade.get('moreItemsConfig').value.length - 1 - indexMoreItems + 1}}</mat-panel-title>\n\t\t\t\t\t\t\t\t<mat-panel-description class=\"titleForm\">\n\t\t\t\t\t\t\t\t\t{{propriedade.get('label').value}}\n\t\t\t\t\t\t\t\t\t<mat-icon>{{propriedade.get('moreItemsIcon').value}}</mat-icon>\n\t\t\t\t\t\t\t\t</mat-panel-description>\n\t\t\t\t\t\t\t</mat-expansion-panel-header>\n\t\t\t\t\t\t <koala-dynamic-form\n\t\t\t\t\t\t\t [showFieldsMoreItensConfig]=\"item.showFieldsMoreItensConfig\"\n\t\t\t\t\t\t\t [showFields]=\"item.showFields\"\n\t\t\t\t\t\t\t [formConfig]=\"item.formConfig\"\n\t\t\t\t\t\t\t [form]=\"item.form\"\n [tabIndexStart]=\"tabIndexStart + i\">\n\t\t\t\t\t\t </koala-dynamic-form>\n\t\t\t\t\t <mat-action-row\n\t\t\t\t\t\t *ngIf=\"propriedade.get('moreItemsConfig').value.length > propriedade.get('moreItemsMinItems').value\">\n\t\t\t\t\t <button\n\t\t\t\t\t\t (click)=\"removeMoreItem(i, propriedade.get('moreItemsConfig').value.length - 1 - indexMoreItems)\"\n\t\t\t\t\t\t mat-icon-button>\n\t\t\t\t\t\t <mat-icon>delete</mat-icon>\n\t\t\t\t\t </button>\n\t\t\t\t\t </mat-action-row>\n\t\t\t\t\t </mat-expansion-panel>\n\t\t\t\t </mat-accordion>\n\t\t\t </fieldset>\n\t\t </div>\n\t\t <mat-form-field\n\t\t\t *ngIf=\"propriedade.get('type').value == typeField.autocomplete\"\n\t\t\t [appearance]=\"propriedade.get('appearance').value\"\n\t\t\t [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t\t [formGroupName]=\"i\"\n\t\t\t [ngClass]=\"propriedade.get('fieldClass').value\">\n\t <mat-label>{{propriedade.get('label').value}} {{propriedade.get('multiple').value &&\n\t propriedade.get('required').value ? '*' : ''}}</mat-label>\n\t\t\t <div *ngIf=\"propriedade.get('multiple').value else single\">\n\t <mat-chip-list #chipList>\n <mat-chip\n (removed)=\"removeOptionOnAutocomplete(i, option)\"\n *ngFor=\"let option of propriedade.get('autocompleteSelectedValue').value\"\n [color]=\"getColorChip(propriedade.get('autocompleteMultipleConfig').value | async)\"\n [removable]=\"true\"\n [selectable]=\"true\">\n {{display(option)}}\n <mat-icon *ngIf=\"!propriedade.get('disabled').value\" matChipRemove>cancel</mat-icon>\n </mat-chip>\n\t <input\n [id]=\"'autocomplete-' + propriedade.get('name').value\"\n [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t [required]=\"propriedade.get('required').value\"\n\t\t [matAutocomplete]=\"auto\"\n\t\t [matChipInputFor]=\"chipList\"\n [tabIndex]=\"tabIndexStart + i\"\n [autocomplete]=\"getRandomString()\"\n\t\t formControlName=\"value\"\n\t\t matInput\n\t\t type=\"text\"\n\t\t placeholder=\"Selecione um ou mais op\u00E7\u00F5es...\">\n\t </mat-chip-list>\n\t </div>\n\t <ng-template #single>\n\t\t <input\n\t\t\t [matAutocomplete]=\"auto\"\n [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t\t [required]=\"propriedade.get('required').value\"\n [tabIndex]=\"tabIndexStart + i\"\n [autocomplete]=\"getRandomString()\"\n\t\t\t formControlName=\"value\"\n\t\t\t matInput\n\t\t\t placeholder=\"Selecione uma op\u00E7\u00E3o...\"\n\t\t\t type=\"text\">\n\t </ng-template>\n\t <mat-spinner *ngIf=\"propriedade.get('autocompleteLoading').value | async\" color=\"primary\"\n\t matSuffix></mat-spinner>\n\t <button\n\t\t (click)=\"clearAutocomplete(i)\"\n\t\t *ngIf=\"\n\t !(propriedade.get('autocompleteLoading').value | async) &&\n\t !propriedade.get('disabled').value\"\n\t\t color=\"warn\"\n\t\t mat-icon-button\n\t\t matSuffix\n\t\t type=\"button\">\n\t <mat-icon>close</mat-icon>\n\t </button>\n\t <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t <mat-icon>info</mat-icon>\n\t\t {{propriedade.get('textHint').value}}\n\t </mat-hint>\n\t <mat-error *ngIf=\"propriedade.get('value').errors?.required || propriedade.get('value').errors?.autocompleteSelected\">\n\t <mat-icon>error</mat-icon>\n {{errorMessage.getAutocompleteMessage(propriedade.get('label').value)}}\n\t </mat-error>\n <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n <mat-icon>error</mat-icon>\n {{propriedade.get('value').errors?.customError.message}}.\n </mat-error>\n\t <mat-autocomplete\n\t\t #auto=\"matAutocomplete\"\n\t\t [displayWith]=\"display\" autoActiveFirstOption>\n\t\t <div *ngIf=\"(getAutocompleteOptions(propriedade) | async) as options\">\n\t\t <mat-option *ngFor=\"let option of options\" [value]=\"option\">\n\t\t {{option.name}}\n\t\t </mat-option>\n\t\t </div>\n\t </mat-autocomplete>\n\t </mat-form-field>\n\t\t <div *ngIf=\"propriedade.get('type').value == typeField.file\">\n\t\t\t <koala-file-button\n\t\t\t\t (getFiles)=\"propriedade.get('value').setValue($event)\"\n\t\t\t\t [accept]=\"propriedade.get('fileButtonConfig').value.accept\"\n\t\t\t\t [backgroundColor]=\"propriedade.get('fileButtonConfig').value.backgroundColor\"\n\t\t\t\t [color]=\"propriedade.get('fileButtonConfig').value.color\"\n\t\t\t\t [disabled]=\"propriedade.get('disabled').value\"\n\t\t\t\t [icon]=\"propriedade.get('fileButtonConfig').value.icon\"\n\t\t\t\t [multiple]=\"propriedade.get('multiple').value\"\n\t\t\t\t [text]=\"propriedade.get('fileButtonConfig').value.text\">\n\t\t\t </koala-file-button>\n\t\t </div>\n\t\t <div *ngIf=\"\n\t\t propriedade.get('type').value == typeField.dynamicForm &&\n\t\t\t\t(getDynamicFormConfig(propriedade) | async) as dynamicFormConfig\">\n\t\t\t <fieldset *ngIf=\"propriedade.get('label').value else dynamicFormWithoutLabel\">\n\t\t\t\t <legend>{{propriedade.get('label').value}}</legend>\n\t\t\t\t <koala-dynamic-form\n\t\t\t\t\t [formConfig]=\"dynamicFormConfig.formConfig\"\n\t\t\t\t\t [form]=\"dynamicFormConfig.form\"\n\t\t\t\t\t [setValues]=\"dynamicFormConfig.setValues\"\n\t\t\t\t\t [showFields]=\"dynamicFormConfig.showFields\"\n [tabIndexStart]=\"tabIndexStart + i\">\n\t\t\t\t </koala-dynamic-form>\n\t\t\t </fieldset>\n\t\t\t <ng-template #dynamicFormWithoutLabel>\n\t\t\t\t <koala-dynamic-form\n\t\t\t\t\t [formConfig]=\"dynamicFormConfig.formConfig\"\n\t\t\t\t\t [form]=\"dynamicFormConfig.form\"\n\t\t\t\t\t [setValues]=\"dynamicFormConfig.setValues\"\n\t\t\t\t\t [showFields]=\"dynamicFormConfig.showFields\"\n [tabIndexStart]=\"tabIndexStart + i\">\n\t\t\t\t </koala-dynamic-form>\n\t\t\t </ng-template>\n\t\t </div>\n <div\n class=\"radio-btn-group\"\n *ngIf=\"propriedade.get('type').value == typeField.radio\"\n [formGroupName]=\"i\"\n [ngClass]=\"propriedade.get('fieldClass').value\">\n <mat-radio-group formControlName=\"value\">\n <label *ngIf=\"propriedade.get('label').value\">{{propriedade.get('label').value}}</label>\n <mat-radio-button\n [tabIndex]=\"tabIndexStart + i\"\n *ngFor=\"let options of propriedade.get('opcoesSelect').value\"\n [value]=\"options.value\">\n {{options.name}}\n </mat-radio-button>\n </mat-radio-group>\n </div>\n\t </div>\n </div>\n <ng-content select=\"[btn-submit]\"></ng-content>\n</div>\n", styles: [".more-items-content fieldset{border:1px solid #cccccc;padding:16px}.more-items-content fieldset legend{font-family:Josefin Sans,sans-serif;font-size:11px;font-weight:700;padding:0 8px}.more-items-content .items .titleForm{color:#616161}.more-items-content .items .mat-expansion-panel-header-title,.more-items-content .items .mat-expansion-panel-header-description{flex-basis:0}.more-items-content .items .mat-expansion-panel-header-description{align-items:center;justify-content:space-between}.more-items-content .items .mat-form-field+.mat-form-field{margin-left:8px}.radio-btn-group label{position:relative;display:block;padding:10px 0}.text-obs{background:#eeeeee;border-radius:5px;color:#212121;font-family:OpenSansLight,sans-serif;height:150px;margin:0 auto 10px;overflow-y:auto;padding:10px;position:relative;width:calc(100% - 27px)}.select-multiple-native{margin-bottom:15px}.select-multiple-native select{width:100%;height:150px;background:transparent;border:none}.select-multiple-native select:focus,.select-multiple-native select:active{outline:none}.select-multiple-native select option{padding:5px 10px;font-family:JosefinSans,sans-serif}.select-multiple-native select option:checked{background:#f1f1f1!important}\n"] }]
|
|
1464
1466
|
}], ctorParameters: function () { return [{ type: i1.UntypedFormBuilder }, { type: KoalaDynamicFormService }]; }, propDecorators: { form: [{
|
|
1465
1467
|
type: Input
|
|
1466
1468
|
}], formConfig: [{
|
|
@@ -1473,9 +1475,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
1473
1475
|
type: Input
|
|
1474
1476
|
}], tabIndexStart: [{
|
|
1475
1477
|
type: Input
|
|
1476
|
-
}], autocompleteInput: [{
|
|
1477
|
-
type: ViewChild,
|
|
1478
|
-
args: ['autocompleteInput', { static: false }]
|
|
1479
1478
|
}] } });
|
|
1480
1479
|
|
|
1481
1480
|
class KoalaFormModule {
|