@koalarx/ui 12.4.10 → 12.6.0

package/form/koalarx-ui-form.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"BtnSubmitComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"koala-submit","template":"<button\n\t*ngIf=\"!iconButton else btnIcon\"\n\t[color]=\"color\"\n\t[disabled]=\"(disabled | async) || fg.invalid || fg.pending\"\n\tmat-raised-button\n\ttype=\"submit\">\n  <span>{{btnLabel}}</span>\n  <mat-spinner *ngIf=\"loader | async\" diameter=\"20\"></mat-spinner>\n</button>\n<ng-template #btnIcon>\n  <button\n\t  [color]=\"color\"\n\t  [disabled]=\"(disabled | async) || fg.invalid || fg.pending\"\n\t  class=\"koala-icon-button\"\n\t  mat-icon-button\n\t  type=\"submit\">\n    <mat-spinner *ngIf=\"loader | async\" [color]=\"color\" diameter=\"20\"></mat-spinner>\n    <mat-icon *ngIf=\"!(loader | async)\">{{icon}}</mat-icon>\n  </button>\n</ng-template>\n","styles":[".mat-spinner{display:inline-block;margin-left:8px}.koala-button{padding:2px 8px}.koala-icon-button mat-spinner{position:relative;display:inline-flex;margin:0}\n"]}]}],"members":{"fg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"btnLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"btnSubmitDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"loader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"iconButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"iconColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"KoalaDynamicFormValidatorType":{"__symbolic":"interface"},"KoalaDynamicFormService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":17,"character":1},"arguments":[{"providedIn":"any"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":21,"character":18},{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorService","line":22,"character":29}]}],"build":[{"__symbolic":"method"}],"updateValidator":[{"__symbolic":"method"}],"emitData":[{"__symbolic":"method"}],"resetForm":[{"__symbolic":"method"}],"setValuesInMoreItemsForm":[{"__symbolic":"method"}],"autocompleteFilterOnServer":[{"__symbolic":"method"}],"showFields":[{"__symbolic":"method"}],"getValueByStringPath":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"DynamicFormTypeFieldEnum":{"text":1,"password":2,"cpf":3,"cnpj":4,"datetime":5,"email":6,"phone":7,"number":8,"valueList":9,"textarea":10,"time":11,"hoursAndMinutes":12,"checkbox":13,"select":14,"coin":15,"percent":16,"moreItems":17,"id":18,"textLogs":19,"file":20,"autocomplete":21,"color":22,"dynamicForm":23,"date":24,"radio":25,"float":26,"stringNumber":27,"selectMultipleNative":28,"month":29,"competenceDate":30,"stringWithCustomMasc":31},"KoalaDynamicFormFieldInterface":{"__symbolic":"interface"},"KoalaDynamicFormMoreItensShowFieldConfigInterface":{"__symbolic":"interface"},"KoalaDynamicFormAutocompleteMultipleConfigInterface":{"__symbolic":"interface"},"KoalaDynamicAutocompleteOptionsInterface":{"__symbolic":"interface"},"KoalaDynamicSetValueInterface":{"__symbolic":"interface"},"KoalaDynamicFormConfigInterface":{"__symbolic":"interface"},"ValidationHelper":{"__symbolic":"class","members":{}},"CpfValidator":{"__symbolic":"function"},"CnpjValidator":{"__symbolic":"function"},"AutocompleteSelectedValidator":{"__symbolic":"function"},"KoalaDynamicFormValidatorResultHelper":{"__symbolic":"class","members":{},"statics":{"generate":{"__symbolic":"function","parameters":["errorMessage"],"value":{"customError":{"message":{"__symbolic":"reference","name":"errorMessage"}}}}}},"DynamicFormComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"FormAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":24,"character":1},"arguments":[{"selector":"koala-dynamic-form","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":28,"character":19},"member":"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=\"off\"\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=\"off\"\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=\"off\"\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\t\t      [mat-autosize]=\"true\"\n\t\t      [matAutosizeMaxRows]=\"8\"\n\t\t      [matAutosizeMinRows]=\"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\t\t      [mat-autosize]=\"true\"\n\t\t      [matAutosizeMaxRows]=\"8\"\n\t\t      [matAutosizeMinRows]=\"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áx.: {{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\t          <mat-chip\n\t\t          (removed)=\"removeOptionOnAutocomplete(i, option)\"\n\t\t          *ngFor=\"let option of propriedade.get('autocompleteSelectedValue').value\"\n\t\t          [color]=\"getColorChip(propriedade.get('autocompleteMultipleConfig').value | async)\"\n\t\t          [removable]=\"true\"\n\t\t          [selectable]=\"true\">\n\t            {{display(option)}}\n\t\t          <mat-icon matChipRemove>cancel</mat-icon>\n\t          </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\t\t          formControlName=\"value\"\n\t\t          matInput\n\t\t          type=\"text\"\n\t\t          placeholder=\"Selecione um ou mais opções...\">\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\t\t\t      formControlName=\"value\"\n\t\t\t      matInput\n\t\t\t      placeholder=\"Selecione uma opção...\"\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=\"(propriedade.get('autocompleteOptionsFiltered').value | 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(propriedade.get('dynamicFormConfig').value | 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:bold;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"]}]}],"members":{"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"formConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"showFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"showFieldsMoreItensConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"setValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"tabIndexStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"autocompleteInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":42,"character":3},"arguments":["autocompleteInput"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":45,"character":16},{"__symbolic":"reference","name":"KoalaDynamicFormService"}]}],"ngOnInit":[{"__symbolic":"method"}],"hoursAndMinutesApplyMask":[{"__symbolic":"method"}],"passwordView":[{"__symbolic":"method"}],"addMoreItem":[{"__symbolic":"method"}],"removeMoreItem":[{"__symbolic":"method"}],"clearAutocomplete":[{"__symbolic":"method"}],"display":[{"__symbolic":"method"}],"removeOptionOnAutocomplete":[{"__symbolic":"method"}],"getColorChip":[{"__symbolic":"method"}],"newControl":[{"__symbolic":"method"}],"setValuesOnFields":[{"__symbolic":"method"}],"changeVisibilityFields":[{"__symbolic":"method"}],"autocompleteFilter":[{"__symbolic":"method"}],"setValueByProp":[{"__symbolic":"method"}],"setConfigDynamicForm":[{"__symbolic":"method"}]}},"KoalaAutofocusDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[koalaAutoFocus]"}]}],"members":{"koalaAutoFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":6,"character":2}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":8,"character":32}]}],"ngAfterContentInit":[{"__symbolic":"method"}]}},"ShowInvalidFields":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}],"isErrorState":[{"__symbolic":"method"}]}},"KoalaFormModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":22,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"BtnSubmitComponent"},{"__symbolic":"reference","name":"DynamicFormComponent"},{"__symbolic":"reference","name":"KoalaAutofocusDirective"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":29,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":30,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":31,"character":4},{"__symbolic":"reference","module":"ng2-currency-mask","name":"CurrencyMaskModule","line":32,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"ngx-mask","name":"NgxMaskModule","line":33,"character":4},"member":"forRoot"},"arguments":[{"__symbolic":"reference","module":"@koalarx/ui/core","name":"maskOptions","line":33,"character":26}]},{"__symbolic":"reference","module":"@koalarx/ui/file-button","name":"KoalaFileButtonModule","line":34,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":35,"character":4},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":36,"character":4},{"__symbolic":"reference","module":"@angular/material/radio","name":"MatRadioModule","line":37,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":38,"character":4},{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteModule","line":39,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":40,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":41,"character":4},{"__symbolic":"reference","module":"@angular/material/expansion","name":"MatExpansionModule","line":42,"character":4},{"__symbolic":"reference","module":"@angular/material/chips","name":"MatChipsModule","line":43,"character":4},{"__symbolic":"reference","module":"@koalarx/ui/button","name":"KoalaButtonModule","line":44,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":45,"character":4}],"exports":[{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":48,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":49,"character":4},{"__symbolic":"reference","name":"KoalaAutofocusDirective"},{"__symbolic":"reference","module":"ngx-mask","name":"NgxMaskModule","line":51,"character":4},{"__symbolic":"reference","module":"@koalarx/ui/file-button","name":"KoalaFileButtonModule","line":52,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":53,"character":4},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":54,"character":4},{"__symbolic":"reference","module":"@angular/material/radio","name":"MatRadioModule","line":55,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":56,"character":4},{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteModule","line":57,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":58,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":59,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":60,"character":4},{"__symbolic":"reference","name":"BtnSubmitComponent"},{"__symbolic":"reference","name":"DynamicFormComponent"}]}]}],"members":{}},"FormAbstract":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":11,"character":46,"module":"./lib/form.abstract"}]}],"selecionarAutocomplete":[{"__symbolic":"method"}],"btnClickGetData":[{"__symbolic":"method"}],"enableShowInvalidFields":[{"__symbolic":"method"}],"loading":[{"__symbolic":"method"}]}}},"origins":{"BtnSubmitComponent":"./lib/btn-submit/btn-submit.component","KoalaDynamicFormValidatorType":"./lib/dynamic-form/koala.dynamic-form.service","KoalaDynamicFormService":"./lib/dynamic-form/koala.dynamic-form.service","DynamicFormTypeFieldEnum":"./lib/dynamic-form/enums/dynamic-form-type-field.enum","KoalaDynamicFormFieldInterface":"./lib/dynamic-form/interfaces/koala.dynamic-form-field.interface","KoalaDynamicFormMoreItensShowFieldConfigInterface":"./lib/dynamic-form/interfaces/koala.dynamic-form-more-itens-show-field-config.interface","KoalaDynamicFormAutocompleteMultipleConfigInterface":"./lib/dynamic-form/interfaces/koala.dynamic-form-autocomplete-multiple-config.interface","KoalaDynamicAutocompleteOptionsInterface":"./lib/dynamic-form/interfaces/koala.dynamic-autocomplete-options.interface","KoalaDynamicSetValueInterface":"./lib/dynamic-form/interfaces/koala.dynamic-set-value.interface","KoalaDynamicFormConfigInterface":"./lib/dynamic-form/interfaces/koala.dynamic-form-config.interface","ValidationHelper":"./lib/dynamic-form/validators/validation.helper","CpfValidator":"./lib/dynamic-form/validators/cpf.validator","CnpjValidator":"./lib/dynamic-form/validators/cnpj.validator","AutocompleteSelectedValidator":"./lib/dynamic-form/validators/autocomplete-selected.validator","KoalaDynamicFormValidatorResultHelper":"./lib/dynamic-form/validators/koala-dynamic-form-validator-result.helper","DynamicFormComponent":"./lib/dynamic-form/dynamic-form.component","KoalaAutofocusDirective":"./lib/directives/koala-autofocus.directive","ShowInvalidFields":"./lib/show-invalid-fields/show-invalid-fields","KoalaFormModule":"./lib/koala.form.module","FormAbstract":"./lib/form.abstract"},"importAs":"@koalarx/ui/form"}
+{"__symbolic":"module","version":4,"metadata":{"BtnSubmitComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"koala-submit","template":"<button\n\t*ngIf=\"!iconButton else btnIcon\"\n\t[color]=\"color\"\n\t[disabled]=\"(disabled | async) || fg.invalid || fg.pending\"\n\tmat-raised-button\n\ttype=\"submit\">\n  <span>{{btnLabel}}</span>\n  <mat-spinner *ngIf=\"loader | async\" diameter=\"20\"></mat-spinner>\n</button>\n<ng-template #btnIcon>\n  <button\n\t  [color]=\"color\"\n\t  [disabled]=\"(disabled | async) || fg.invalid || fg.pending\"\n\t  class=\"koala-icon-button\"\n\t  mat-icon-button\n\t  type=\"submit\">\n    <mat-spinner *ngIf=\"loader | async\" [color]=\"color\" diameter=\"20\"></mat-spinner>\n    <mat-icon *ngIf=\"!(loader | async)\">{{icon}}</mat-icon>\n  </button>\n</ng-template>\n","styles":[".mat-spinner{display:inline-block;margin-left:8px}.koala-button{padding:2px 8px}.koala-icon-button mat-spinner{position:relative;display:inline-flex;margin:0}\n"]}]}],"members":{"fg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"btnLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"btnSubmitDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"loader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"iconButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"iconColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"KoalaDynamicFormValidatorType":{"__symbolic":"interface"},"KoalaDynamicFormService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":17,"character":1},"arguments":[{"providedIn":"any"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":21,"character":18},{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorService","line":22,"character":29}]}],"build":[{"__symbolic":"method"}],"updateValidator":[{"__symbolic":"method"}],"emitData":[{"__symbolic":"method"}],"resetForm":[{"__symbolic":"method"}],"setValuesInMoreItemsForm":[{"__symbolic":"method"}],"autocompleteFilterOnServer":[{"__symbolic":"method"}],"showFields":[{"__symbolic":"method"}],"getValueByStringPath":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"DynamicFormTypeFieldEnum":{"text":1,"password":2,"cpf":3,"cnpj":4,"datetime":5,"email":6,"phone":7,"number":8,"valueList":9,"textarea":10,"time":11,"hoursAndMinutes":12,"checkbox":13,"select":14,"coin":15,"percent":16,"moreItems":17,"id":18,"textLogs":19,"file":20,"autocomplete":21,"color":22,"dynamicForm":23,"date":24,"radio":25,"float":26,"stringNumber":27,"selectMultipleNative":28,"month":29,"competenceDate":30,"stringWithCustomMasc":31},"KoalaDynamicFormFieldInterface":{"__symbolic":"interface"},"KoalaDynamicFormMoreItensShowFieldConfigInterface":{"__symbolic":"interface"},"KoalaDynamicFormAutocompleteMultipleConfigInterface":{"__symbolic":"interface"},"KoalaDynamicAutocompleteOptionsInterface":{"__symbolic":"interface"},"KoalaDynamicSetValueInterface":{"__symbolic":"interface"},"KoalaDynamicFormConfigInterface":{"__symbolic":"interface"},"ValidationHelper":{"__symbolic":"class","members":{}},"CpfValidator":{"__symbolic":"function"},"CnpjValidator":{"__symbolic":"function"},"AutocompleteSelectedValidator":{"__symbolic":"function"},"KoalaDynamicFormValidatorResultHelper":{"__symbolic":"class","members":{},"statics":{"generate":{"__symbolic":"function","parameters":["errorMessage"],"value":{"customError":{"message":{"__symbolic":"reference","name":"errorMessage"}}}}}},"DynamicFormComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"FormAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":24,"character":1},"arguments":[{"selector":"koala-dynamic-form","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":28,"character":19},"member":"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=\"off\"\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=\"off\"\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=\"off\"\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\t\t      [mat-autosize]=\"true\"\n\t\t      [matAutosizeMaxRows]=\"8\"\n\t\t      [matAutosizeMinRows]=\"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\t\t      [mat-autosize]=\"true\"\n\t\t      [matAutosizeMaxRows]=\"8\"\n\t\t      [matAutosizeMinRows]=\"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áx.: {{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\t          <mat-chip\n\t\t          (removed)=\"removeOptionOnAutocomplete(i, option)\"\n\t\t          *ngFor=\"let option of propriedade.get('autocompleteSelectedValue').value\"\n\t\t          [color]=\"getColorChip(propriedade.get('autocompleteMultipleConfig').value | async)\"\n\t\t          [removable]=\"true\"\n\t\t          [selectable]=\"true\">\n\t            {{display(option)}}\n\t\t          <mat-icon matChipRemove>cancel</mat-icon>\n\t          </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\t\t          formControlName=\"value\"\n\t\t          matInput\n\t\t          type=\"text\"\n\t\t          placeholder=\"Selecione um ou mais opções...\">\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\t\t\t      formControlName=\"value\"\n\t\t\t      matInput\n\t\t\t      placeholder=\"Selecione uma opção...\"\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=\"(propriedade.get('autocompleteOptionsFiltered').value | 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(propriedade.get('dynamicFormConfig').value | 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:bold;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"]}]}],"members":{"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"formConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"showFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"showFieldsMoreItensConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"setValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"tabIndexStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"autocompleteInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":42,"character":3},"arguments":["autocompleteInput"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":45,"character":16},{"__symbolic":"reference","name":"KoalaDynamicFormService"}]}],"ngOnInit":[{"__symbolic":"method"}],"hoursAndMinutesApplyMask":[{"__symbolic":"method"}],"passwordView":[{"__symbolic":"method"}],"addMoreItem":[{"__symbolic":"method"}],"removeMoreItem":[{"__symbolic":"method"}],"clearAutocomplete":[{"__symbolic":"method"}],"display":[{"__symbolic":"method"}],"removeOptionOnAutocomplete":[{"__symbolic":"method"}],"getColorChip":[{"__symbolic":"method"}],"newControl":[{"__symbolic":"method"}],"setValuesOnFields":[{"__symbolic":"method"}],"changeVisibilityFields":[{"__symbolic":"method"}],"autocompleteFilter":[{"__symbolic":"method"}],"setValueByProp":[{"__symbolic":"method"}],"setConfigDynamicForm":[{"__symbolic":"method"}]}},"KoalaAutofocusDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[koalaAutoFocus]"}]}],"members":{"koalaAutoFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":6,"character":2}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":8,"character":32}]}],"ngAfterContentInit":[{"__symbolic":"method"}]}},"ShowInvalidFields":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}],"isErrorState":[{"__symbolic":"method"}]}},"KoalaFormModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":22,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"BtnSubmitComponent"},{"__symbolic":"reference","name":"DynamicFormComponent"},{"__symbolic":"reference","name":"KoalaAutofocusDirective"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":29,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":30,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":31,"character":4},{"__symbolic":"reference","module":"ng2-currency-mask","name":"CurrencyMaskModule","line":32,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"ngx-mask","name":"NgxMaskModule","line":33,"character":4},"member":"forRoot"},"arguments":[{"__symbolic":"reference","module":"@koalarx/ui/common","name":"maskOptions","line":33,"character":26}]},{"__symbolic":"reference","module":"@koalarx/ui/file-button","name":"KoalaFileButtonModule","line":34,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":35,"character":4},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":36,"character":4},{"__symbolic":"reference","module":"@angular/material/radio","name":"MatRadioModule","line":37,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":38,"character":4},{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteModule","line":39,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":40,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":41,"character":4},{"__symbolic":"reference","module":"@angular/material/expansion","name":"MatExpansionModule","line":42,"character":4},{"__symbolic":"reference","module":"@angular/material/chips","name":"MatChipsModule","line":43,"character":4},{"__symbolic":"reference","module":"@koalarx/ui/button","name":"KoalaButtonModule","line":44,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":45,"character":4}],"exports":[{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":48,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":49,"character":4},{"__symbolic":"reference","name":"KoalaAutofocusDirective"},{"__symbolic":"reference","module":"ngx-mask","name":"NgxMaskModule","line":51,"character":4},{"__symbolic":"reference","module":"@koalarx/ui/file-button","name":"KoalaFileButtonModule","line":52,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":53,"character":4},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":54,"character":4},{"__symbolic":"reference","module":"@angular/material/radio","name":"MatRadioModule","line":55,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":56,"character":4},{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteModule","line":57,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":58,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":59,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":60,"character":4},{"__symbolic":"reference","name":"BtnSubmitComponent"},{"__symbolic":"reference","name":"DynamicFormComponent"}]}]}],"members":{}},"FormAbstract":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":11,"character":46,"module":"./lib/form.abstract"}]}],"selecionarAutocomplete":[{"__symbolic":"method"}],"btnClickGetData":[{"__symbolic":"method"}],"enableShowInvalidFields":[{"__symbolic":"method"}],"loading":[{"__symbolic":"method"}]}}},"origins":{"BtnSubmitComponent":"./lib/btn-submit/btn-submit.component","KoalaDynamicFormValidatorType":"./lib/dynamic-form/koala.dynamic-form.service","KoalaDynamicFormService":"./lib/dynamic-form/koala.dynamic-form.service","DynamicFormTypeFieldEnum":"./lib/dynamic-form/enums/dynamic-form-type-field.enum","KoalaDynamicFormFieldInterface":"./lib/dynamic-form/interfaces/koala.dynamic-form-field.interface","KoalaDynamicFormMoreItensShowFieldConfigInterface":"./lib/dynamic-form/interfaces/koala.dynamic-form-more-itens-show-field-config.interface","KoalaDynamicFormAutocompleteMultipleConfigInterface":"./lib/dynamic-form/interfaces/koala.dynamic-form-autocomplete-multiple-config.interface","KoalaDynamicAutocompleteOptionsInterface":"./lib/dynamic-form/interfaces/koala.dynamic-autocomplete-options.interface","KoalaDynamicSetValueInterface":"./lib/dynamic-form/interfaces/koala.dynamic-set-value.interface","KoalaDynamicFormConfigInterface":"./lib/dynamic-form/interfaces/koala.dynamic-form-config.interface","ValidationHelper":"./lib/dynamic-form/validators/validation.helper","CpfValidator":"./lib/dynamic-form/validators/cpf.validator","CnpjValidator":"./lib/dynamic-form/validators/cnpj.validator","AutocompleteSelectedValidator":"./lib/dynamic-form/validators/autocomplete-selected.validator","KoalaDynamicFormValidatorResultHelper":"./lib/dynamic-form/validators/koala-dynamic-form-validator-result.helper","DynamicFormComponent":"./lib/dynamic-form/dynamic-form.component","KoalaAutofocusDirective":"./lib/directives/koala-autofocus.directive","ShowInvalidFields":"./lib/show-invalid-fields/show-invalid-fields","KoalaFormModule":"./lib/koala.form.module","FormAbstract":"./lib/form.abstract"},"importAs":"@koalarx/ui/form"}

package/list/bundles/koalarx-ui-list.umd.js

@@ -677,6 +677,7 @@
         function ListComponent(fb, dynamicFormService, deviceService) {
             var _this = _super_1.call(this, function () { var _a, _b; return (_b = (_a = _this.config) === null || _a === void 0 ? void 0 : _a.request) !== null && _b !== void 0 ? _b : new rxjs.Observable(); }, function (response) {
                 var _a, _b, _c, _d, _e, _f, _g;
+                _this.responseRequest = response;
                 _this.dataSource.data = ((_a = _this.config) === null || _a === void 0 ? void 0 : _a.responseIndexName)
                     ? (_this.config.responseIndexName
                         ? response[_this.config.responseIndexName]
@@ -780,6 +781,9 @@
             return this.itemsMenuListOptions.filter(function (option) { return option.havePermission && (!option.showByItemList ||
                 option.showByItemList(item)); }).length > 0;
         };
+        ListComponent.prototype.hasFooter = function () {
+            return !!this.itemsList.find(function (item) { return !!item.footer; });
+        };
         ListComponent.prototype.initConfig = function () {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             this.columnSort = (_a = this.config.columnSort) !== null && _a !== void 0 ? _a : null;
@@ -819,9 +823,9 @@
     ListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'koala-list',
-                    template: "<div class=\"list-container\">\n  <div *ngIf=\"filterFormConfig\" class=\"list-filter\">\n    <form (ngSubmit)=\"filterSubmit()\" [formGroup]=\"formFilter\">\n      <div class=\"main\">\n        <koala-dynamic-form\n          *ngIf=\"filterFormConfig.main\"\n          [form]=\"filterFormConfig.main.form\"\n          [formConfig]=\"filterFormConfig.main.formConfig\"\n          [setValues]=\"filterFormConfig.main.setValues\"\n          [showFields]=\"filterFormConfig.main.showFields\">\n        </koala-dynamic-form>\n        <ul>\n          <li *ngIf=\"filterFormConfig.advanced\" class=\"option\">\n            <button (click)=\"toogleFilter()\" color=\"primary\" mat-icon-button matTooltip=\"Filtro Avan\u00E7ado\"\n                    matTooltipPosition=\"below\" type=\"button\">\n              <mat-icon>tune</mat-icon>\n            </button>\n          </li>\n          <li *ngIf=\"filterFormConfig.checkAndSearch\" class=\"checkbox-filter\">\n            <mat-checkbox (click)=\"filterSubmit()\"\n                          [formControlName]=\"filterFormConfig.checkAndSearch.formControlName\">\n              {{filterFormConfig.checkAndSearch.label}}\n            </mat-checkbox>\n          </li>\n          <li class=\"option\">\n            <koala-submit\n              [btnSubmitDisabled]=\"btnSubmitDisabled\"\n              [fg]=\"formFilter\"\n              [iconButton]=\"true\"\n              [loader]=\"loader\"\n              icon=\"search\">\n            </koala-submit>\n          </li>\n        </ul>\n      </div>\n      <div *ngIf=\"filterFormConfig.advanced\" [ngClass]=\"{'show': showAdvancedFilter}\" class=\"advanced\">\n        <div class=\"container-filter\">\n          <koala-dynamic-form\n            [form]=\"filterFormConfig.advanced.form\"\n            [formConfig]=\"filterFormConfig.advanced.formConfig\"\n            [setValues]=\"filterFormConfig.advanced.setValues\"\n            [showFields]=\"filterFormConfig.advanced.showFields\">\n          </koala-dynamic-form>\n        </div>\n      </div>\n    </form>\n  </div>\n  <nav class=\"menu-list\">\n    <ul class=\"menu\">\n      <li *ngIf=\"selection.hasValue()\">\n        <ng-content select=\"[itemsSelectList]\"></ng-content>\n      </li>\n      <li *ngIf=\"selection.hasValue()\" class=\"text-center\">|</li>\n      <li>\n        <ng-content select=\"[itemsList]\"></ng-content>\n      </li>\n    </ul>\n  </nav>\n  <div *ngIf=\"loader | async\" class=\"spinner-container\" [ngClass]=\"{\n    'no-filter': !filterFormConfig\n  }\">\n    <mat-spinner diameter=\"40\"></mat-spinner>\n  </div>\n  <div class=\"list\">\n    <table\n      *ngIf=\"!emptyListComponent || (emptyListComponent && dataSource?.data?.length > 0) else emptyList\"\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"columnSort\"\n      class=\"table-hover\"\n      mat-table\n      matSort\n      [matSortDirection]=\"sortDirection\" matSortDisableClear>\n      <ng-container matColumnDef=\"select\">\n        <th *matHeaderCellDef mat-header-cell>\n          <mat-checkbox (change)=\"$event ? selectAll() : null\"\n                        [checked]=\"selection.hasValue() && allSelected$ | async\"\n                        [indeterminate]=\"selection.hasValue() && !(allSelected$ | async)\">\n          </mat-checkbox>\n        </th>\n        <td *matCellDef=\"let item\" mat-cell>\n          <mat-checkbox *ngIf=\"disabledCheckboxItemList ? !disabledCheckboxItemList(item) : true\"\n                        (change)=\"$event ? selection.toggle(item) : null\"\n                        (click)=\"$event.stopPropagation(); selectItem();\"\n                        [checked]=\"selection.isSelected(item)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n\n      <ng-container *ngFor=\"let itemList of itemsList\" [matColumnDef]=\"itemList.columnDef\">\n        <th *matHeaderCellDef [mat-sort-header]=\"itemList.sortHeader\" [disabled]=\"!itemList.sortHeader\" mat-header-cell>{{itemList.label}}</th>\n        <td (dblclick)=\"itemList.dblClick(item)\" *matCellDef=\"let item\" mat-cell>\n\t        <koala-dynamic-component *ngIf=\"itemList.itemComponent else itemText\"\n\t                                 [dynamicComponent]=\"itemList.itemComponent(item)\"></koala-dynamic-component>\n\t        <ng-template #itemText>\n\t          {{itemList.itemNameProperty(item)}}\n\t        </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"options\">\n        <th *matHeaderCellDef mat-header-cell></th>\n        <td *matCellDef=\"let item\" mat-cell>\n          <div *ngIf=\"haveOptionsOnItemLine(item)\">\n            <button [matMenuTriggerFor]=\"options\" mat-icon-button type=\"button\">\n              <i class='material-icons'>more_vert</i>\n            </button>\n            <mat-menu #options=\"matMenu\" class=\"menu-list\" yPosition=\"below\">\n\t            <div *ngFor=\"let option of itemsMenuListOptions\">\n\t              <button\n\t\t              (click)=\"option.action(item)\"\n\t\t              *ngIf=\"option.havePermission && (\n\t\t                !option.showByItemList ||\n\t\t                option.showByItemList(item)\n\t                )\"\n\t\t              mat-menu-item>\n\t                <mat-icon>{{option.icon}}</mat-icon>\n\t                <span>{{option.name}}</span>\n\t              </button>\n\t            </div>\n            </mat-menu>\n          </div>\n        </td>\n      </ng-container>\n      <tr *matHeaderRowDef=\"columnsToShowInList; sticky: true\" mat-header-row></tr>\n      <tr *matRowDef=\"let item; columns: columnsToShowInList;\" mat-row></tr>\n    </table>\n    <ng-template #emptyList>\n      <koala-dynamic-component *ngIf=\"!(filterError$ | async) else errorList\" [dynamicComponent]=\"emptyListComponent\"></koala-dynamic-component>\n      <ng-template #errorList>\n        <koala-dynamic-component [dynamicComponent]=\"errorListComponent\"></koala-dynamic-component>\n      </ng-template>\n    </ng-template>\n  </div>\n  <div class=\"content-paginator\">\n    <mat-paginator\n      [length]=\"qtdListResult\"\n      [pageSizeOptions]=\"limitOptions\"\n      [pageSize]=\"pageSize\"\n      showFirstLastButtons>\n    </mat-paginator>\n  </div>\n</div>\n",
+                    template: "<div class=\"list-container\">\n  <div *ngIf=\"filterFormConfig\" class=\"list-filter\">\n    <form (ngSubmit)=\"filterSubmit()\" [formGroup]=\"formFilter\">\n      <div class=\"main\">\n        <koala-dynamic-form\n          *ngIf=\"filterFormConfig.main\"\n          [form]=\"filterFormConfig.main.form\"\n          [formConfig]=\"filterFormConfig.main.formConfig\"\n          [setValues]=\"filterFormConfig.main.setValues\"\n          [showFields]=\"filterFormConfig.main.showFields\">\n        </koala-dynamic-form>\n        <ul>\n          <li *ngIf=\"filterFormConfig.advanced\" class=\"option\">\n            <button (click)=\"toogleFilter()\" color=\"primary\" mat-icon-button matTooltip=\"Filtro Avan\u00E7ado\"\n                    matTooltipPosition=\"below\" type=\"button\">\n              <mat-icon>tune</mat-icon>\n            </button>\n          </li>\n          <li *ngIf=\"filterFormConfig.checkAndSearch\" class=\"checkbox-filter\">\n            <mat-checkbox (click)=\"filterSubmit()\"\n                          [formControlName]=\"filterFormConfig.checkAndSearch.formControlName\">\n              {{filterFormConfig.checkAndSearch.label}}\n            </mat-checkbox>\n          </li>\n          <li class=\"option\">\n            <koala-submit\n              [btnSubmitDisabled]=\"btnSubmitDisabled\"\n              [fg]=\"formFilter\"\n              [iconButton]=\"true\"\n              [loader]=\"loader\"\n              icon=\"search\">\n            </koala-submit>\n          </li>\n        </ul>\n      </div>\n      <div *ngIf=\"filterFormConfig.advanced\" [ngClass]=\"{'show': showAdvancedFilter}\" class=\"advanced\">\n        <div class=\"container-filter\">\n          <koala-dynamic-form\n            [form]=\"filterFormConfig.advanced.form\"\n            [formConfig]=\"filterFormConfig.advanced.formConfig\"\n            [setValues]=\"filterFormConfig.advanced.setValues\"\n            [showFields]=\"filterFormConfig.advanced.showFields\">\n          </koala-dynamic-form>\n        </div>\n      </div>\n    </form>\n  </div>\n  <nav class=\"menu-list\">\n    <ul class=\"menu\">\n      <li *ngIf=\"selection.hasValue()\">\n        <ng-content select=\"[itemsSelectList]\"></ng-content>\n      </li>\n      <li *ngIf=\"selection.hasValue()\" class=\"text-center\">|</li>\n      <li>\n        <ng-content select=\"[itemsList]\"></ng-content>\n      </li>\n    </ul>\n  </nav>\n  <div *ngIf=\"loader | async\" class=\"spinner-container\" [ngClass]=\"{\n    'no-filter': !filterFormConfig\n  }\">\n    <mat-spinner diameter=\"40\"></mat-spinner>\n  </div>\n  <div class=\"list\">\n    <table\n      *ngIf=\"!emptyListComponent || (emptyListComponent && dataSource?.data?.length > 0) else emptyList\"\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"columnSort\"\n      class=\"table-hover\"\n      mat-table\n      matSort\n      [matSortDirection]=\"sortDirection\" matSortDisableClear>\n      <ng-container matColumnDef=\"select\">\n        <th *matHeaderCellDef mat-header-cell>\n          <mat-checkbox (change)=\"$event ? selectAll() : null\"\n                        [checked]=\"selection.hasValue() && allSelected$ | async\"\n                        [indeterminate]=\"selection.hasValue() && !(allSelected$ | async)\">\n          </mat-checkbox>\n        </th>\n        <td *matCellDef=\"let item\" mat-cell>\n          <mat-checkbox *ngIf=\"disabledCheckboxItemList ? !disabledCheckboxItemList(item) : true\"\n                        (change)=\"$event ? selection.toggle(item) : null\"\n                        (click)=\"$event.stopPropagation(); selectItem();\"\n                        [checked]=\"selection.isSelected(item)\">\n          </mat-checkbox>\n        </td>\n        <td *matFooterCellDef mat-footer-cell></td>\n      </ng-container>\n\n      <ng-container *ngFor=\"let itemList of itemsList\" [matColumnDef]=\"itemList.columnDef\">\n        <th *matHeaderCellDef [mat-sort-header]=\"itemList.sortHeader\" [disabled]=\"!itemList.sortHeader\" mat-header-cell>{{itemList.label}}</th>\n        <td (dblclick)=\"itemList.dblClick(item)\" *matCellDef=\"let item\" mat-cell>\n\t        <koala-dynamic-component *ngIf=\"itemList.itemComponent else itemText\"\n\t                                 [dynamicComponent]=\"itemList.itemComponent(item)\"></koala-dynamic-component>\n\t        <ng-template #itemText>\n\t          {{itemList.itemNameProperty(item)}}\n\t        </ng-template>\n        </td>\n        <td *matFooterCellDef mat-footer-cell>\n          <koala-dynamic-component *ngIf=\"itemList.footer?.itemComponent else itemFooterText\"\n                                   [dynamicComponent]=\"itemList.footer?.itemComponent(responseRequest)\"></koala-dynamic-component>\n          <ng-template #itemFooterText>\n            {{itemList.footer?.itemNameProperty(responseRequest)}}\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"options\">\n        <th *matHeaderCellDef mat-header-cell></th>\n        <td *matCellDef=\"let item\" mat-cell>\n          <div *ngIf=\"haveOptionsOnItemLine(item)\">\n            <button [matMenuTriggerFor]=\"options\" mat-icon-button type=\"button\">\n              <i class='material-icons'>more_vert</i>\n            </button>\n            <mat-menu #options=\"matMenu\" class=\"menu-list\" yPosition=\"below\">\n\t            <div *ngFor=\"let option of itemsMenuListOptions\">\n\t              <button\n\t\t              (click)=\"option.action(item)\"\n\t\t              *ngIf=\"option.havePermission && (\n\t\t                !option.showByItemList ||\n\t\t                option.showByItemList(item)\n\t                )\"\n\t\t              mat-menu-item>\n\t                <mat-icon>{{option.icon}}</mat-icon>\n\t                <span>{{option.name}}</span>\n\t              </button>\n\t            </div>\n            </mat-menu>\n          </div>\n        </td>\n        <td *matFooterCellDef mat-footer-cell></td>\n      </ng-container>\n      <tr *matHeaderRowDef=\"columnsToShowInList; sticky: true\" mat-header-row></tr>\n      <tr *matRowDef=\"let item; columns: columnsToShowInList;\" mat-row></tr>\n      <ng-container *ngIf=\"hasFooter()\">\n        <tr *matFooterRowDef=\"columnsToShowInList; sticky: true\" mat-footer-row></tr>\n      </ng-container>\n    </table>\n    <ng-template #emptyList>\n      <koala-dynamic-component *ngIf=\"!(filterError$ | async) else errorList\" [dynamicComponent]=\"emptyListComponent\"></koala-dynamic-component>\n      <ng-template #errorList>\n        <koala-dynamic-component [dynamicComponent]=\"errorListComponent\"></koala-dynamic-component>\n      </ng-template>\n    </ng-template>\n  </div>\n  <div class=\"content-paginator\">\n    <mat-paginator\n      [length]=\"qtdListResult\"\n      [pageSizeOptions]=\"limitOptions\"\n      [pageSize]=\"pageSize\"\n      showFirstLastButtons>\n    </mat-paginator>\n  </div>\n</div>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [".list-container{border-radius:10px;margin:0 auto;overflow-x:hidden;width:calc(100% - 40px);position:relative}.list-container .spinner-container{position:absolute;width:100%;height:calc(100vh - 320px);top:100px;left:0;background:rgba(0,0,0,.15);z-index:2;display:flex;align-items:center;justify-content:center}.list-container .spinner-container.no-filter{top:40px}.list-container .list{display:block;height:calc(100vh - 320px);overflow-y:auto;position:relative;top:0;width:100%;z-index:1}.list-container .list table:not(.table-not-selection) .mat-header-cell:first-child,.list-container .list .mat-header-cell:last-child{width:5%}.list-container .list .mat-header-cell:last-child{text-align:center}.list-container .list .mat-header-row,.list-container .list .mat-row{height:35px}.list-container .list .mat-row .mat-icon-button{height:35px;line-height:35px;width:35px}.list-container .list tr.detail-row:not(.expanded-row){height:0}.list-container .list .element-detail{display:flex;overflow:hidden}.list-container .list table{position:relative;width:100%;font-family:OpenSans,sans-serif;font-size:1em}.list-container .list table.table-hover tr{cursor:pointer;transition:.2s}.list-container .list table th:first-child,.list-container .list table td:first-child{padding:0 8px 0 20px}.list-container .list table th{font-size:.7em;padding:0 8px;font-family:\"OpenSans\",sans-serif;line-height:1em}.list-container .list table td{font-size:.8em;padding:0 8px;font-family:OpenSans,sans-serif}.list-container .list table th:last-child,.list-container .list table td:last-child{padding:0 20px 0 8px}.list-container .list .mat-list-item-content,.list-container .list .mat-list-item-content .mat-list-text{padding:0}.list-container .list-filter{box-shadow:0 1px 3px #0000004d;height:60px;position:relative;z-index:3}.list-container .list-filter .main{display:flex;justify-content:space-between;font-size:1.05em;height:60px;overflow:hidden;padding-left:2.5px;position:relative;width:100%}.list-container .list-filter .main koala-dynamic-form{width:100%}.list-container .list-filter .main mat-form-field{display:inline-block}.list-container .list-filter .main .mat-form-field-appearance-fill .mat-form-field-flex{background:transparent}.list-container .list-filter .main .mat-form-field .mat-form-field-wrapper{padding-bottom:0}.list-container .list-filter .main .mat-form-field-underline{display:none}.list-container .list-filter .main .mat-form-field-appearance-legacy .mat-form-field-subscript-wrapper{display:none}.list-container .list-filter .main .mat-form-field-wrapper .mat-form-field-subscript-wrapper{display:none}.list-container .list-filter ul{display:flex;align-items:center;font-size:0;list-style:none;margin:0;padding:0 15px 0 0;position:relative;text-align:right}.list-container .list-filter ul li{display:inline-block;font-size:14px;padding:5px;position:relative}.list-container .list-filter ul li.option button{transition:.2s}.list-container .list-filter ul li.option button:hover{background:rgba(0,0,0,.1)}.list-container .list-filter ul li.checkbox-filter{text-align:center}.list-container .list-filter ul li.checkbox-filter .checkbox-inline{top:-5px}.list-container .list-filter ul li.checkbox-filter input[type=checkbox]{margin-left:0}.list-container .list-filter ul li.checkbox-filter label{padding:0!important;width:auto}.list-container .list-filter .advanced{border-top:1px solid #dddddd;box-shadow:0 3px 10px #0000004d;height:0;overflow-x:hidden;overflow-y:auto;position:absolute;top:60px;transition:.2s;width:100%;z-index:1}.list-container .list-filter .advanced .container-filter{padding:15px}.list-container .list-filter .advanced.show{height:360px}.list-container nav.menu-list{height:40px;margin:0;padding:3px 0;position:relative;transition:.2s;width:100%;z-index:2;box-sizing:border-box}.list-container nav.menu-list ul.menu{float:left;font-size:0;list-style:none;margin:0;padding:0 10px;position:relative;text-align:left}.list-container nav.menu-list ul.menu li{color:#616161;display:inline-block;font-size:16px;padding:0 4px}.list-container nav.menu-list ul.menu li button.mat-button,.list-container nav.menu-list ul.menu li button.koala-icon-button{display:inline-block}.list-container .content-paginator mat-paginator .mat-paginator-container{height:40px!important;min-height:40px!important}.list-container .content-paginator mat-paginator .mat-paginator-container .mat-paginator-page-size-select{height:40px;margin-top:0!important}.list-container .content-paginator mat-paginator .mat-paginator-container .mat-paginator-range-label{margin-top:3px}.list-container .content-paginator{position:relative;background:transparent!important;z-index:2;box-shadow:-3px 1px 3px #0000004d}@media (max-width: 900px){.list-container{width:100%;box-shadow:none!important;padding:15px 10px 15px 15px;box-sizing:border-box}.list-container .list{height:auto;overflow:unset}.list-container .list-filter .main{justify-content:flex-end}}\n"]
+                    styles: [".list-container{border-radius:10px;margin:0 auto;overflow-x:hidden;width:calc(100% - 40px);position:relative}.list-container .spinner-container{position:absolute;width:100%;height:calc(100vh - 320px);top:100px;left:0;background:rgba(0,0,0,.15);z-index:2;display:flex;align-items:center;justify-content:center}.list-container .spinner-container.no-filter{top:40px}.list-container .list{display:block;height:calc(100vh - 320px);overflow-y:auto;position:relative;top:0;width:100%;z-index:1}.list-container .list table:not(.table-not-selection) .mat-header-cell:first-child,.list-container .list .mat-header-cell:last-child{width:5%}.list-container .list .mat-header-cell:last-child{text-align:center}.list-container .list .mat-header-row,.list-container .list .mat-row,.list-container .list .mat-footer-row{height:35px}.list-container .list .mat-row .mat-icon-button{height:35px;line-height:35px;width:35px}.list-container .list tr.detail-row:not(.expanded-row){height:0}.list-container .list .element-detail{display:flex;overflow:hidden}.list-container .list table{position:relative;width:100%;font-family:OpenSans,sans-serif;font-size:1em}.list-container .list table.table-hover tr{cursor:pointer;transition:.2s}.list-container .list table th:first-child,.list-container .list table td:first-child{padding:0 8px 0 20px}.list-container .list table th{font-size:.7em;padding:0 8px;font-family:\"OpenSans\",sans-serif;line-height:1em}.list-container .list table td{font-size:.8em;padding:0 8px;font-family:OpenSans,sans-serif}.list-container .list table th:last-child,.list-container .list table td:last-child{padding:0 20px 0 8px}.list-container .list .mat-list-item-content,.list-container .list .mat-list-item-content .mat-list-text{padding:0}.list-container .list-filter{box-shadow:0 1px 3px #0000004d;height:60px;position:relative;z-index:3}.list-container .list-filter .main{display:flex;justify-content:space-between;font-size:1.05em;height:60px;overflow:hidden;padding-left:2.5px;position:relative;width:100%}.list-container .list-filter .main koala-dynamic-form{width:100%}.list-container .list-filter .main mat-form-field{display:inline-block}.list-container .list-filter .main .mat-form-field-appearance-fill .mat-form-field-flex{background:transparent}.list-container .list-filter .main .mat-form-field .mat-form-field-wrapper{padding-bottom:0}.list-container .list-filter .main .mat-form-field-underline{display:none}.list-container .list-filter .main .mat-form-field-appearance-legacy .mat-form-field-subscript-wrapper{display:none}.list-container .list-filter .main .mat-form-field-wrapper .mat-form-field-subscript-wrapper{display:none}.list-container .list-filter ul{display:flex;align-items:center;font-size:0;list-style:none;margin:0;padding:0 15px 0 0;position:relative;text-align:right}.list-container .list-filter ul li{display:inline-block;font-size:14px;padding:5px;position:relative}.list-container .list-filter ul li.option button{transition:.2s}.list-container .list-filter ul li.option button:hover{background:rgba(0,0,0,.1)}.list-container .list-filter ul li.checkbox-filter{text-align:center}.list-container .list-filter ul li.checkbox-filter .checkbox-inline{top:-5px}.list-container .list-filter ul li.checkbox-filter input[type=checkbox]{margin-left:0}.list-container .list-filter ul li.checkbox-filter label{padding:0!important;width:auto}.list-container .list-filter .advanced{border-top:1px solid #dddddd;box-shadow:0 3px 10px #0000004d;height:0;overflow-x:hidden;overflow-y:auto;position:absolute;top:60px;transition:.2s;width:100%;z-index:1}.list-container .list-filter .advanced .container-filter{padding:15px}.list-container .list-filter .advanced.show{height:360px}.list-container nav.menu-list{height:40px;margin:0;padding:3px 0;position:relative;transition:.2s;width:100%;z-index:2;box-sizing:border-box}.list-container nav.menu-list ul.menu{float:left;font-size:0;list-style:none;margin:0;padding:0 10px;position:relative;text-align:left}.list-container nav.menu-list ul.menu li{color:#616161;display:inline-block;font-size:16px;padding:0 4px}.list-container nav.menu-list ul.menu li button.mat-button,.list-container nav.menu-list ul.menu li button.koala-icon-button{display:inline-block}.list-container .content-paginator mat-paginator .mat-paginator-container{height:40px!important;min-height:40px!important}.list-container .content-paginator mat-paginator .mat-paginator-container .mat-paginator-page-size-select{height:40px;margin-top:0!important}.list-container .content-paginator mat-paginator .mat-paginator-container .mat-paginator-range-label{margin-top:3px}.list-container .content-paginator{position:relative;background:transparent!important;z-index:2;box-shadow:-3px 1px 3px #0000004d}@media (max-width: 900px){.list-container{width:100%;box-shadow:none!important;padding:15px 10px 15px 15px;box-sizing:border-box}.list-container .list{height:auto;overflow:unset}.list-container .list-filter .main{justify-content:flex-end}}\n"]
                 },] }
     ];
     ListComponent.ctorParameters = function () { return [