@po-ui/ng-components 5.20.0 → 5.22.2

package/bundles/po-ui-ng-components.umd.js

@@ -9341,6 +9341,14 @@
              * @description
              *
              * Função para atualizar o `ngModel` do componente, necessário quando não for utilizado dentro da tag form.
+             *
+             * Na versão 12.2.0 do Angular a verificação `strictTemplates` vem true como default. Portanto, para utilizar
+             * two-way binding no componente deve se utilizar da seguinte forma:
+             *
+             * ```
+             * <po-checkbox-group ... [ngModel]="checkboxgroupModel" (ngModelChange)="checkboxgroupModel = $event"> </po-checkbox-group>
+             * ```
+             *
              */
             this.ngModelChange = new i0.EventEmitter();
             /**
@@ -11074,7 +11082,8 @@
                             multi: true
                         },
                         PoControlPositionService
-                    ]
+                    ],
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     PoDatepickerComponent.ctorParameters = function () { return [
@@ -15660,6 +15669,14 @@
              * @description
              *
              * Função para atualizar o ngModel do componente, necessário quando não for utilizado dentro da tag form.
+             *
+             * Na versão 12.2.0 do Angular a verificação `strictTemplates` vem true como default. Portanto, para utilizar
+             * two-way binding no componente deve se utilizar da seguinte forma:
+             *
+             * ```
+             * <po-combo ... [ngModel]="comboModel" (ngModelChange)="comboModel = $event"> </po-combo>
+             * ```
+             *
              */
             this.ngModelChange = new i0.EventEmitter();
             this.cacheOptions = [];
@@ -17667,11 +17684,12 @@
      */
     var PoDatepickerRangeComponent = /** @class */ (function (_super) {
         __extends(PoDatepickerRangeComponent, _super);
-        function PoDatepickerRangeComponent(changeDetector, controlPosition, renderer, poDateService, poDatepickerRangeElement, poLanguageService) {
+        function PoDatepickerRangeComponent(changeDetector, controlPosition, renderer, cd, poDateService, poDatepickerRangeElement, poLanguageService) {
             var _this = _super.call(this, poDateService, poLanguageService) || this;
             _this.changeDetector = changeDetector;
             _this.controlPosition = controlPosition;
             _this.renderer = renderer;
+            _this.cd = cd;
             _this.isCalendarVisible = false;
             _this.onScroll = function () {
                 if (_this.isCalendarVisible) {
@@ -17818,7 +17836,10 @@
             this.updateScreenByModel({ start: start || '', end: end || '' });
             this.updateModelByScreen(isStartDateTargetEvent, start || '', end || '');
             if (start && end) {
-                setTimeout(function () { return (_this.isCalendarVisible = false); }, 300);
+                setTimeout(function () {
+                    _this.isCalendarVisible = false;
+                    _this.cd.markForCheck();
+                }, 300);
             }
         };
         PoDatepickerRangeComponent.prototype.onFocus = function (event) {
@@ -18068,6 +18089,7 @@
                 !this.hasAttrCalendar(event.target)) {
                 this.isCalendarVisible = false;
             }
+            this.cd.markForCheck();
         };
         return PoDatepickerRangeComponent;
     }(PoDatepickerRangeBaseComponent));
@@ -18075,13 +18097,15 @@
         { type: i0.Component, args: [{
                     selector: 'po-datepicker-range',
                     template: "<po-field-container [p-help]=\"help\" [p-label]=\"label\" [p-optional]=\"!required && optional\">\n  <div #dateRangeField class=\"po-datepicker-range-field po-input\" [class.po-datepicker-range-field-disabled]=\"disabled\">\n    <div class=\"po-datepicker-range-start-date\">\n      <input\n        #startDateInput\n        class=\"po-datepicker-range-input\"\n        maxlength=\"10\"\n        type=\"text\"\n        [autocomplete]=\"autocomplete\"\n        [disabled]=\"disabled\"\n        [name]=\"startDateInputName\"\n        [readonly]=\"readonly\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (keyup)=\"onKeyup($event)\"\n        (click)=\"eventOnClick($event)\"\n      />\n    </div>\n\n    <div class=\"po-datepicker-range-separator\">-</div>\n\n    <div class=\"po-datepicker-range-end-date\">\n      <input\n        #endDateInput\n        class=\"po-datepicker-range-input\"\n        maxlength=\"10\"\n        type=\"text\"\n        [autocomplete]=\"autocomplete\"\n        [disabled]=\"disabled\"\n        [name]=\"endDateInputName\"\n        [readonly]=\"readonly\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (keyup)=\"onKeyup($event)\"\n        (click)=\"eventOnClick($event)\"\n      />\n    </div>\n\n    <div class=\"po-datepicker-range-icon\">\n      <po-clean *ngIf=\"enableCleaner\" (p-change-event)=\"clear()\"></po-clean>\n    </div>\n\n    <div class=\"po-datepicker-range-icon\">\n      <span\n        #iconCalendar\n        class=\"po-icon po-field-icon po-icon-calendar\"\n        [class.po-clickable]=\"!disabled && !readonly\"\n        [class.po-field-icon-disabled]=\"disabled || readonly\"\n        (click)=\"toggleCalendar()\"\n      >\n      </span>\n    </div>\n  </div>\n\n  <po-field-container-bottom [p-error-pattern]=\"getErrorMessage\"></po-field-container-bottom>\n</po-field-container>\n\n<ng-container *ngIf=\"isCalendarVisible\">\n  <div #calendarPicker class=\"po-calendar-range-picker\">\n    <po-calendar\n      p-mode=\"range\"\n      [ngModel]=\"dateRange\"\n      [p-max-date]=\"maxDate\"\n      [p-min-date]=\"minDate\"\n      (ngModelChange)=\"onCalendarChange($event)\"\n    ></po-calendar>\n  </div>\n</ng-container>\n",
-                    providers: providers$5
+                    providers: providers$5,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     PoDatepickerRangeComponent.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef },
         { type: PoControlPositionService },
         { type: i0.Renderer2 },
+        { type: i0.ChangeDetectorRef },
         { type: PoDateService },
         { type: i0.ElementRef },
         { type: PoLanguageService }
@@ -19904,6 +19928,7 @@
             }
         };
         PoLookupBaseComponent.prototype.cleanViewValue = function () {
+            this.setDisclaimers([]);
             this.setViewValue('', {});
             this.oldValue = '';
             this.valueToModel = null;
@@ -20954,6 +20979,11 @@
             // eslint-disable-next-line
             useExisting: i0.forwardRef(function () { return PoLookupComponent; }),
             multi: true
+        },
+        {
+            provide: forms.NgControl,
+            useExisting: i0.forwardRef(function () { return PoLookupComponent; }),
+            multi: false
         }
     ];
     /**
@@ -21590,9 +21620,11 @@
              *
              */
             set: function (value) {
-                this._filterService = value;
-                this.autoHeight = this.autoHeightInitialValue !== undefined ? this.autoHeightInitialValue : true;
-                this.options = [];
+                if (value) {
+                    this._filterService = value;
+                    this.autoHeight = this.autoHeightInitialValue !== undefined ? this.autoHeightInitialValue : true;
+                    this.options = [];
+                }
             },
             enumerable: false,
             configurable: true
@@ -21990,6 +22022,9 @@
             var _this = this;
             if (options === void 0) { options = this.options; }
             this.selectedOptions = [];
+            if (newOptions.length === 0) {
+                this.lastLengthModel = 0;
+            }
             if (this.filterService) {
                 this.selectedOptions = newOptions;
             }
@@ -24737,6 +24772,13 @@
              * @description
              *
              * Função para atualizar o ngModel do componente, necessário quando não for utilizado dentro da tag form.
+             *
+             * Na versão 12.2.0 do Angular a verificação `strictTemplates` vem true como default. Portanto, para utilizar
+             * two-way binding no componente deve se utilizar da seguinte forma:
+             *
+             * ```
+             * <po-select ... [ngModel]="selectModel" (ngModelChange)="selectModel = $event"> </po-select>
+             * ```
              */
             _this.ngModelChange = new i0.EventEmitter();
             /**
@@ -26227,6 +26269,14 @@
              * @description
              *
              * Função para atualizar o ngModel do componente, necessário quando não for utilizado dentro da *tag* `form`.
+             *
+             * Na versão 12.2.0 do Angular a verificação `strictTemplates` vem true como default. Portanto, para utilizar
+             * two-way binding no componente deve se utilizar da seguinte forma:
+             *
+             * ```
+             * <po-upload ... [ngModel]="UploadModel" (ngModelChange)="uploadModel = $event"> </po-upload>
+             * ```
+             *
              */
             this.ngModelChange = new i0.EventEmitter();
             this.extensionNotAllowed = 0;
@@ -28349,7 +28399,7 @@
         };
         PoDynamicFormFieldsBaseComponent.prototype.isMultiselect = function (field) {
             var optionsService = field.optionsService, optionsMulti = field.optionsMulti, options = field.options;
-            return !optionsService && optionsMulti && !!options && options.length > 3;
+            return optionsMulti && (!!optionsService || (!!options && options.length > 3));
         };
         PoDynamicFormFieldsBaseComponent.prototype.isNumberType = function (field, type) {
             var mask = field.mask, pattern = field.pattern;
@@ -28527,7 +28577,7 @@
     PoDynamicFormFieldsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'po-dynamic-form-fields',
-                    template: "<div class=\"po-row\" *ngIf=\"visibleFields && visibleFields.length > 0\">\n  <ng-container *ngFor=\"let field of visibleFields; trackBy: trackBy\">\n    <po-divider *ngIf=\"field?.divider?.trim()\" class=\"po-sm-12\" [p-label]=\"field.divider\"> </po-divider>\n\n    <po-datepicker\n      #component\n      *ngIf=\"compareTo(field.control, 'datepicker')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-format]=\"field.format\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-locale]=\"field.locale\"\n      [p-max-date]=\"field.maxValue\"\n      [p-min-date]=\"field.minValue\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-datepicker>\n\n    <po-datepicker-range\n      #component\n      *ngIf=\"compareTo(field.control, 'datepickerrange')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-datepicker-range>\n\n    <po-input\n      #component\n      *ngIf=\"compareTo(field.control, 'input')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-mask-format-model]=\"field.maskFormatModel\"\n      [p-mask]=\"field.mask\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-optional]=\"field.optional\"\n      [p-pattern]=\"field.pattern\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-input>\n\n    <po-number\n      #component\n      *ngIf=\"compareTo(field.control, 'number')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-min]=\"field.minValue\"\n      [p-max]=\"field.maxValue\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-number>\n\n    <po-decimal\n      #component\n      *ngIf=\"compareTo(field.control, 'decimal')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-decimals-length]=\"field.decimalsLength\"\n      [p-thousand-maxlength]=\"field.thousandMaxlength\"\n      [p-icon]=\"field.icon\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-locale]=\"field.locale\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-decimal>\n\n    <po-select\n      #component\n      *ngIf=\"compareTo(field.control, 'select')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-select>\n\n    <po-radio-group\n      #component\n      *ngIf=\"compareTo(field.control, 'radioGroup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-columns=\"3\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-radio-group>\n\n    <po-switch\n      #component\n      *ngIf=\"compareTo(field.control, 'switch')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-label-off]=\"field.booleanFalse\"\n      [p-label-on]=\"field.booleanTrue\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-switch>\n\n    <po-combo\n      #component\n      *ngIf=\"compareTo(field.control, 'combo')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-emit-object-value\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-filter-params]=\"field.params\"\n      [p-filter-service]=\"field.optionsService\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field, $event)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-combo>\n\n    <po-lookup\n      #component\n      *ngIf=\"compareTo(field.control, 'lookup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      p-field-label=\"label\"\n      p-field-value=\"value\"\n      [ngClass]=\"field.componentClass\"\n      [p-columns]=\"field.columns\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-field-label]=\"field.fieldLabel || 'label'\"\n      [p-field-value]=\"field.fieldValue || 'value'\"\n      [p-filter-params]=\"field.params\"\n      [p-filter-service]=\"field.searchService\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-field-format]=\"field.format\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-lookup>\n\n    <po-checkbox-group\n      #component\n      *ngIf=\"compareTo(field.control, 'checkboxGroup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-columns=\"3\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-checkbox-group>\n\n    <po-multiselect\n      #component\n      *ngIf=\"compareTo(field.control, 'multiselect')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-multiselect>\n\n    <po-textarea\n      #component\n      *ngIf=\"compareTo(field.control, 'textarea')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      [p-rows]=\"field.rows\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-textarea>\n\n    <po-password\n      #component\n      *ngIf=\"compareTo(field.control, 'password')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-optional]=\"field.optional\"\n      [p-pattern]=\"field.pattern\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-password>\n  </ng-container>\n</div>\n",
+                    template: "<div class=\"po-row\" *ngIf=\"visibleFields && visibleFields.length > 0\">\n  <ng-container *ngFor=\"let field of visibleFields; trackBy: trackBy\">\n    <po-divider *ngIf=\"field?.divider?.trim()\" class=\"po-sm-12\" [p-label]=\"field.divider\"> </po-divider>\n\n    <po-datepicker\n      #component\n      *ngIf=\"compareTo(field.control, 'datepicker')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-format]=\"field.format\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-locale]=\"field.locale\"\n      [p-max-date]=\"field.maxValue\"\n      [p-min-date]=\"field.minValue\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-datepicker>\n\n    <po-datepicker-range\n      #component\n      *ngIf=\"compareTo(field.control, 'datepickerrange')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-datepicker-range>\n\n    <po-input\n      #component\n      *ngIf=\"compareTo(field.control, 'input')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-mask-format-model]=\"field.maskFormatModel\"\n      [p-mask]=\"field.mask\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-optional]=\"field.optional\"\n      [p-pattern]=\"field.pattern\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-input>\n\n    <po-number\n      #component\n      *ngIf=\"compareTo(field.control, 'number')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-min]=\"field.minValue\"\n      [p-max]=\"field.maxValue\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-number>\n\n    <po-decimal\n      #component\n      *ngIf=\"compareTo(field.control, 'decimal')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-decimals-length]=\"field.decimalsLength\"\n      [p-thousand-maxlength]=\"field.thousandMaxlength\"\n      [p-icon]=\"field.icon\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-locale]=\"field.locale\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-decimal>\n\n    <po-select\n      #component\n      *ngIf=\"compareTo(field.control, 'select')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-select>\n\n    <po-radio-group\n      #component\n      *ngIf=\"compareTo(field.control, 'radioGroup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-columns=\"3\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-radio-group>\n\n    <po-switch\n      #component\n      *ngIf=\"compareTo(field.control, 'switch')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-label-off]=\"field.booleanFalse\"\n      [p-label-on]=\"field.booleanTrue\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-switch>\n\n    <po-combo\n      #component\n      *ngIf=\"compareTo(field.control, 'combo')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-emit-object-value\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-filter-params]=\"field.params\"\n      [p-filter-service]=\"field.optionsService\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field, $event)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-combo>\n\n    <po-lookup\n      #component\n      *ngIf=\"compareTo(field.control, 'lookup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      p-field-label=\"label\"\n      p-field-value=\"value\"\n      [ngClass]=\"field.componentClass\"\n      [p-columns]=\"field.columns\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-field-label]=\"field.fieldLabel || 'label'\"\n      [p-field-value]=\"field.fieldValue || 'value'\"\n      [p-filter-params]=\"field.params\"\n      [p-filter-service]=\"field.searchService\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-field-format]=\"field.format\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-lookup>\n\n    <po-checkbox-group\n      #component\n      *ngIf=\"compareTo(field.control, 'checkboxGroup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-columns=\"3\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-checkbox-group>\n\n    <po-multiselect\n      #component\n      *ngIf=\"compareTo(field.control, 'multiselect')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-filter-service]=\"field.optionsService\"\n    >\n    </po-multiselect>\n\n    <po-textarea\n      #component\n      *ngIf=\"compareTo(field.control, 'textarea')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      [p-rows]=\"field.rows\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-textarea>\n\n    <po-password\n      #component\n      *ngIf=\"compareTo(field.control, 'password')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-optional]=\"field.optional\"\n      [p-pattern]=\"field.pattern\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-password>\n  </ng-container>\n</div>\n",
                     viewProviders: [{ provide: forms.ControlContainer, useExisting: forms.NgForm }],
                     providers: [PoDynamicFormValidationService]
                 },] }