@po-ui/ng-components 5.13.1 → 5.14.0

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

@@ -17878,7 +17878,8 @@
      *
      */
     var PoInputBaseComponent = /** @class */ (function () {
-        function PoInputBaseComponent() {
+        function PoInputBaseComponent(cd) {
+            this.cd = cd;
             /**
              * @optional
              *
@@ -18146,7 +18147,9 @@
         // Função implementada do ControlValueAccessor
         // Usada para interceptar os estados de habilitado via forms api
         PoInputBaseComponent.prototype.setDisabledState = function (isDisabled) {
+            var _a;
             this.disabled = isDisabled;
+            (_a = this.cd) === null || _a === void 0 ? void 0 : _a.markForCheck();
         };
         // Função implementada do ControlValueAccessor
         // Usada para interceptar as mudanças e não atualizar automaticamente o Model
@@ -18201,7 +18204,9 @@
         };
         // Função implementada do ControlValueAccessor
         PoInputBaseComponent.prototype.writeValue = function (value) {
+            var _a;
             this.writeValueModel(value);
+            (_a = this.cd) === null || _a === void 0 ? void 0 : _a.markForCheck();
         };
         PoInputBaseComponent.prototype.validateModel = function () {
             if (this.validatorChange) {
@@ -18223,6 +18228,9 @@
     PoInputBaseComponent.decorators = [
         { type: i0.Directive }
     ];
+    PoInputBaseComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
     PoInputBaseComponent.propDecorators = {
         autoFocus: [{ type: i0.Input, args: ['p-auto-focus',] }],
         icon: [{ type: i0.Input, args: ['p-icon',] }],
@@ -18879,8 +18887,8 @@
     /* eslint-disable @angular-eslint/directive-class-suffix */
     var PoInputGeneric = /** @class */ (function (_super) {
         __extends(PoInputGeneric, _super);
-        function PoInputGeneric(el) {
-            var _this = _super.call(this) || this;
+        function PoInputGeneric(el, cd) {
+            var _this = _super.call(this, cd) || this;
             _this.type = 'text';
             _this.el = el;
             return _this;
@@ -19061,7 +19069,8 @@
         { type: i0.Directive }
     ];
     PoInputGeneric.ctorParameters = function () { return [
-        { type: i0.ElementRef }
+        { type: i0.ElementRef },
+        { type: i0.ChangeDetectorRef }
     ]; };
     PoInputGeneric.propDecorators = {
         inputEl: [{ type: i0.ViewChild, args: ['inp', { read: i0.ElementRef, static: true },] }],
@@ -20778,6 +20787,8 @@
             this.options = [];
             /** Propriedade que recebe a lista de opções que deverão ser criadas no dropdown. */
             this.visibleOptions = [];
+            /** Propriedade que indica se o campo "Selecionar todos" deverá ser escondido. */
+            this.hideSelectAll = false;
             /** Evento disparado a cada tecla digitada na pesquisa. */
             this.changeSearch = new i0.EventEmitter();
             /** Evento disparado a cada alteração na lista das opções selecionadas. */
@@ -20816,6 +20827,19 @@
                 this.searchElement.setFocus();
             }
         };
+        PoMultiselectDropdownComponent.prototype.onClickSelectAll = function () {
+            var selectedValues = this.selectedOptions.map(function (_b) {
+                var value = _b.value;
+                return value;
+            });
+            if (this.everyVisibleOptionsSelected(selectedValues)) {
+                this.selectedOptions = [];
+            }
+            else {
+                this.selectedOptions = this.uniqueSelectedOptions(selectedValues);
+            }
+            this.change.emit(this.selectedOptions);
+        };
         PoMultiselectDropdownComponent.prototype.updateSelectedValues = function (checked, option) {
             if (checked) {
                 this.selectedOptions.push(option);
@@ -20825,6 +20849,27 @@
             }
             this.change.emit(this.selectedOptions);
         };
+        PoMultiselectDropdownComponent.prototype.everyVisibleOptionsSelected = function (selectedValues) {
+            return this.visibleOptions.every(function (visibleOption) { return selectedValues.includes(visibleOption.value); });
+        };
+        PoMultiselectDropdownComponent.prototype.someVisibleOptionsSelected = function (selectedValues) {
+            return this.visibleOptions.some(function (visibleOption) { return selectedValues.includes(visibleOption.value); });
+        };
+        PoMultiselectDropdownComponent.prototype.getStateSelectAll = function () {
+            var selectedValues = this.selectedOptions.map(function (_b) {
+                var value = _b.value;
+                return value;
+            });
+            if (this.everyVisibleOptionsSelected(selectedValues)) {
+                return true;
+            }
+            else if (this.someVisibleOptionsSelected(selectedValues)) {
+                return null;
+            }
+            else {
+                return false;
+            }
+        };
         PoMultiselectDropdownComponent.prototype.callChangeSearch = function (event) {
             this.changeSearch.emit(event);
         };
@@ -20838,12 +20883,32 @@
                 }
             });
         };
+        PoMultiselectDropdownComponent.prototype.uniqueSelectedOptions = function (selectedValues) {
+            var e_1, _b;
+            var newSelectedOptions = __spreadArray([], __read(this.selectedOptions));
+            try {
+                for (var _c = __values(this.visibleOptions), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var visibleOption = _d.value;
+                    if (!selectedValues.includes(visibleOption.value)) {
+                        newSelectedOptions.push(visibleOption);
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return newSelectedOptions;
+        };
         return PoMultiselectDropdownComponent;
     }());
     PoMultiselectDropdownComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'po-multiselect-dropdown',
-                    template: "<div #container class=\"po-multiselect-container\" [hidden]=\"!show\">\n  <po-multiselect-search\n    #searchElement\n    *ngIf=\"!hideSearch\"\n    [p-literals]=\"literals\"\n    [p-placeholder]=\"placeholderSearch\"\n    (p-change)=\"callChangeSearch($event)\"\n  >\n  </po-multiselect-search>\n\n  <ul class=\"po-multiselect-items-container\" [scrollTop]=\"scrollTop\" #ulElement>\n    <div *ngIf=\"!visibleOptions.length && !isServerSearching\" class=\"po-multiselect-container-no-data po-text-center\">\n      <span> {{ literals.noData }}</span>\n    </div>\n\n    <div *ngIf=\"isServerSearching\" class=\"po-multiselect-container-loading po-text-center\">\n      <po-loading></po-loading>\n    </div>\n\n    <ng-container *ngIf=\"!isServerSearching\">\n      <po-multiselect-item\n        *ngFor=\"let option of visibleOptions\"\n        [p-label]=\"option.label\"\n        [p-selected]=\"isSelectedItem(option)\"\n        (p-change)=\"clickItem($event, option)\"\n      >\n      </po-multiselect-item>\n    </ng-container>\n  </ul>\n</div>\n"
+                    template: "<div #container class=\"po-multiselect-container\" [hidden]=\"!show\">\n  <po-multiselect-search\n    #searchElement\n    *ngIf=\"!hideSearch\"\n    [p-literals]=\"literals\"\n    [p-placeholder]=\"placeholderSearch\"\n    (p-change)=\"callChangeSearch($event)\"\n  >\n  </po-multiselect-search>\n\n  <ul class=\"po-multiselect-items-container\" [scrollTop]=\"scrollTop\" #ulElement>\n    <div *ngIf=\"!visibleOptions.length && !isServerSearching\" class=\"po-multiselect-container-no-data po-text-center\">\n      <span> {{ literals.noData }}</span>\n    </div>\n\n    <div *ngIf=\"isServerSearching\" class=\"po-multiselect-container-loading po-text-center\">\n      <po-loading></po-loading>\n    </div>\n\n    <ng-container *ngIf=\"!isServerSearching\">\n      <po-multiselect-item\n        *ngIf=\"!searchElement?.inputValue && visibleOptions.length && !hideSelectAll\"\n        [p-label]=\"literals?.selectAll\"\n        [p-selected]=\"getStateSelectAll()\"\n        (p-change)=\"onClickSelectAll()\"\n      >\n      </po-multiselect-item>\n\n      <po-multiselect-item\n        *ngFor=\"let option of visibleOptions\"\n        [p-label]=\"option.label\"\n        [p-selected]=\"isSelectedItem(option)\"\n        (p-change)=\"clickItem($event, option)\"\n      >\n      </po-multiselect-item>\n    </ng-container>\n  </ul>\n</div>\n"
                 },] }
     ];
     PoMultiselectDropdownComponent.propDecorators = {
@@ -20854,6 +20919,7 @@
         selectedOptions: [{ type: i0.Input, args: ['p-selected-options',] }],
         options: [{ type: i0.Input, args: ['p-options',] }],
         visibleOptions: [{ type: i0.Input, args: ['p-visible-options',] }],
+        hideSelectAll: [{ type: i0.Input, args: ['p-hide-select-all',] }],
         changeSearch: [{ type: i0.Output, args: ['p-change-search',] }],
         change: [{ type: i0.Output, args: ['p-change',] }],
         closeDropdown: [{ type: i0.Output, args: ['p-close-dropdown',] }],
@@ -20886,19 +20952,23 @@
     var poMultiselectLiteralsDefault = {
         en: {
             noData: 'No data found',
-            placeholderSearch: 'Search'
+            placeholderSearch: 'Search',
+            selectAll: 'Select all'
         },
         es: {
             noData: 'Datos no encontrados',
-            placeholderSearch: 'Busca'
+            placeholderSearch: 'Busca',
+            selectAll: 'Seleccionar todo'
         },
         pt: {
             noData: 'Nenhum dado encontrado',
-            placeholderSearch: 'Buscar'
+            placeholderSearch: 'Buscar',
+            selectAll: 'Selecionar todos'
         },
         ru: {
             noData: 'Данные не найдены',
-            placeholderSearch: 'искать'
+            placeholderSearch: 'искать',
+            selectAll: 'Выбрать все'
         }
     };
     /**
@@ -21363,6 +21433,9 @@
                 });
                 this.visibleOptionsDropdown = newOptions_1;
             }
+            else {
+                this.visibleOptionsDropdown = __spreadArray([], __read(options));
+            }
         };
         PoMultiselectBaseComponent.prototype.compareMethod = function (search, option, filterMode) {
             switch (filterMode) {
@@ -21463,6 +21536,7 @@
         placeholder: [{ type: i0.Input, args: ['p-placeholder',] }],
         placeholderSearch: [{ type: i0.Input, args: ['p-placeholder-search',] }],
         name: [{ type: i0.Input, args: ['name',] }],
+        hideSelectAll: [{ type: i0.Input, args: ['p-hide-select-all',] }],
         change: [{ type: i0.Output, args: ['p-change',] }],
         filterService: [{ type: i0.Input, args: ['p-filter-service',] }],
         autoHeight: [{ type: i0.Input, args: ['p-auto-height',] }],
@@ -21480,6 +21554,9 @@
     __decorate([
         InputBoolean()
     ], PoMultiselectBaseComponent.prototype, "autoFocus", void 0);
+    __decorate([
+        InputBoolean()
+    ], PoMultiselectBaseComponent.prototype, "hideSelectAll", void 0);
     __decorate([
         InputBoolean()
     ], PoMultiselectBaseComponent.prototype, "autoHeight", null);
@@ -21879,7 +21956,7 @@
     PoMultiselectComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'po-multiselect',
-                    template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\" [class.po-multiselect-show]=\"dropdownOpen\">\n    <div\n      #inputElement\n      [tabindex]=\"disabled ? -1 : 0\"\n      class=\"po-input po-input-icon-right po-multiselect-input po-clickable\"\n      [class.po-multiselect-input-auto]=\"autoHeight\"\n      [class.po-multiselect-input-static]=\"!autoHeight\"\n      [class.po-multiselect-input-disabled]=\"disabled\"\n      (keyup.enter)=\"toggleDropdownVisibility()\"\n      (keydown)=\"onKeyDown($event)\"\n      (click)=\"toggleDropdownVisibility()\"\n      (blur)=\"onBlur()\"\n    >\n      <span *ngIf=\"placeholder && !visibleDisclaimers?.length\" class=\"po-multiselect-input-placeholder\">\n        {{ placeholder }}\n      </span>\n\n      <po-disclaimer\n        *ngFor=\"let disclaimer of visibleDisclaimers\"\n        class=\"po-multiselect-input-disclaimer\"\n        [p-label]=\"disclaimer.label\"\n        [p-value]=\"disclaimer.value\"\n        [p-hide-close]=\"disclaimer.value === '' || disabled\"\n        [class.po-clickable]=\"disclaimer.value === '' && !disabled\"\n        (click)=\"openDropdown(disclaimer.value === '')\"\n        (p-close-action)=\"closeDisclaimer(disclaimer.value)\"\n      >\n      </po-disclaimer>\n\n      <div class=\"po-field-icon-container-right\">\n        <span\n          #iconElement\n          class=\"po-icon po-field-icon {{ dropdownIcon }}\"\n          [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n        >\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <po-multiselect-dropdown\n    #dropdownElement\n    [p-searching]=\"isServerSearching\"\n    [p-hide-search]=\"hideSearch\"\n    [p-literals]=\"literals\"\n    [p-options]=\"options\"\n    [p-visible-options]=\"visibleOptionsDropdown\"\n    [p-selected-options]=\"selectedOptions\"\n    [p-placeholder-search]=\"placeholderSearch\"\n    (p-change)=\"changeItems($event)\"\n    (p-change-search)=\"changeSearch($event)\"\n    (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n  >\n  </po-multiselect-dropdown>\n\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n",
+                    template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\" [class.po-multiselect-show]=\"dropdownOpen\">\n    <div\n      #inputElement\n      [tabindex]=\"disabled ? -1 : 0\"\n      class=\"po-input po-input-icon-right po-multiselect-input po-clickable\"\n      [class.po-multiselect-input-auto]=\"autoHeight\"\n      [class.po-multiselect-input-static]=\"!autoHeight\"\n      [class.po-multiselect-input-disabled]=\"disabled\"\n      (keyup.enter)=\"toggleDropdownVisibility()\"\n      (keydown)=\"onKeyDown($event)\"\n      (click)=\"toggleDropdownVisibility()\"\n      (blur)=\"onBlur()\"\n    >\n      <span *ngIf=\"placeholder && !visibleDisclaimers?.length\" class=\"po-multiselect-input-placeholder\">\n        {{ placeholder }}\n      </span>\n\n      <po-disclaimer\n        *ngFor=\"let disclaimer of visibleDisclaimers\"\n        class=\"po-multiselect-input-disclaimer\"\n        [p-label]=\"disclaimer.label\"\n        [p-value]=\"disclaimer.value\"\n        [p-hide-close]=\"disclaimer.value === '' || disabled\"\n        [class.po-clickable]=\"disclaimer.value === '' && !disabled\"\n        (click)=\"openDropdown(disclaimer.value === '')\"\n        (p-close-action)=\"closeDisclaimer(disclaimer.value)\"\n      >\n      </po-disclaimer>\n\n      <div class=\"po-field-icon-container-right\">\n        <span\n          #iconElement\n          class=\"po-icon po-field-icon {{ dropdownIcon }}\"\n          [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n        >\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <po-multiselect-dropdown\n    #dropdownElement\n    [p-searching]=\"isServerSearching\"\n    [p-hide-search]=\"hideSearch\"\n    [p-hide-select-all]=\"hideSelectAll\"\n    [p-literals]=\"literals\"\n    [p-options]=\"options\"\n    [p-visible-options]=\"visibleOptionsDropdown\"\n    [p-selected-options]=\"selectedOptions\"\n    [p-placeholder-search]=\"placeholderSearch\"\n    (p-change)=\"changeItems($event)\"\n    (p-change-search)=\"changeSearch($event)\"\n    (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n  >\n  </po-multiselect-dropdown>\n\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n",
                     providers: providers$1
                 },] }
     ];
@@ -21907,7 +21984,7 @@
      */
     var PoMultiselectItemComponent = /** @class */ (function () {
         function PoMultiselectItemComponent() {
-            /** Esta propriedade indica se o campo está selecionado ou não. */
+            /** Esta propriedade indica se o campo está selecionado, indenterminate ou não. */
             this.selected = false;
             /** Evento que será disparado toda vez que o usuário marcar ou desmarcar um item. */
             this.change = new i0.EventEmitter();
@@ -21921,7 +21998,7 @@
     PoMultiselectItemComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'po-multiselect-item',
-                    template: "<li [class.po-multiselect-item-selected]=\"selected\" (click)=\"itemClicked()\">\n  <a class=\"po-multiselect-item\">\n    <input\n      [checked]=\"selected\"\n      class=\"po-multiselect-checkbox-input\"\n      [class.po-multiselect-checkbox-input-checked]=\"selected\"\n      type=\"checkbox\"\n    />\n\n    <label class=\"po-multiselect-checkbox-label po-clickable\">\n      {{ label }}\n    </label>\n  </a>\n</li>\n",
+                    template: "<li [class.po-multiselect-item-selected]=\"selected\" (click)=\"itemClicked()\">\n  <a class=\"po-multiselect-item\">\n    <input\n      [checked]=\"selected\"\n      class=\"po-multiselect-checkbox-input\"\n      [class.po-multiselect-checkbox-input-indeterminate]=\"selected === null\"\n      [class.po-multiselect-checkbox-input-checked]=\"selected\"\n      type=\"checkbox\"\n    />\n\n    <label class=\"po-multiselect-checkbox-label po-clickable\">\n      {{ label }}\n    </label>\n  </a>\n</li>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
@@ -21964,6 +22041,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(PoMultiselectSearchComponent.prototype, "inputValue", {
+            get: function () {
+                return this.inputElement.nativeElement.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         PoMultiselectSearchComponent.prototype.onChange = function (event) {
             this.change.emit({ event: event, value: this.inputElement.nativeElement.value });
         };
@@ -23192,8 +23276,8 @@
     var PoInputComponent = /** @class */ (function (_super) {
         __extends(PoInputComponent, _super);
         /* istanbul ignore next */
-        function PoInputComponent(el) {
-            return _super.call(this, el) || this;
+        function PoInputComponent(el, cd) {
+            return _super.call(this, el, cd) || this;
         }
         PoInputComponent.prototype.extraValidation = function (c) {
             return null;
@@ -23215,11 +23299,13 @@
                             useExisting: i0.forwardRef(function () { return PoInputComponent; }),
                             multi: true
                         }
-                    ]
+                    ],
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     PoInputComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef }
+        { type: i0.ElementRef },
+        { type: i0.ChangeDetectorRef }
     ]; };
 
     var PoNumberBaseComponent = /** @class */ (function (_super) {