@po-ui/ng-components 6.9.0 → 6.10.0

package/fesm2020/po-ui-ng-components.mjs

@@ -2530,7 +2530,7 @@ PoButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoButtonC
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.buttonElement = _t.first);
-    } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 14, consts: [["type", "button", 1, "po-button", "po-text-ellipsis", 3, "disabled", "click"], ["button", ""], ["class", "po-button-loading-icon", 4, "ngIf"], ["class", "po-button-icon", 3, "p-icon", 4, "ngIf"], ["class", "po-button-label", 4, "ngIf"], [1, "po-button-loading-icon"], ["p-neutral-color", ""], [1, "po-button-icon", 3, "p-icon"], [1, "po-button-label"]], template: function PoButtonComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 16, consts: [["type", "button", 1, "po-button", "po-text-ellipsis", 3, "disabled", "click"], ["button", ""], ["class", "po-button-loading-icon", 4, "ngIf"], ["class", "po-button-icon", 3, "p-icon", 4, "ngIf"], ["class", "po-button-label", 4, "ngIf"], [1, "po-button-loading-icon"], ["p-neutral-color", ""], [1, "po-button-icon", 3, "p-icon"], [1, "po-button-label"]], template: function PoButtonComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "button", 0, 1);
         i0.ɵɵlistener("click", function PoButtonComponent_Template_button_click_0_listener() { return ctx.onClick(); });
         i0.ɵɵtemplate(2, PoButtonComponent_div_2_Template, 2, 0, "div", 2);
@@ -2538,7 +2538,7 @@ PoButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoButtonC
         i0.ɵɵtemplate(4, PoButtonComponent_span_4_Template, 2, 1, "span", 4);
         i0.ɵɵelementEnd();
     } if (rf & 2) {
-        i0.ɵɵclassProp("po-button-danger", ctx.type === "danger")("po-button-link", ctx.type === "link")("po-button-primary", ctx.type === "primary")("po-button-sm", ctx.small)("po-clickable", ctx.type === "link");
+        i0.ɵɵclassProp("po-button-default", ctx.type === "default")("po-button-danger", ctx.type === "danger")("po-button-link", ctx.type === "link")("po-button-primary", ctx.type === "primary")("po-button-sm", ctx.small)("po-clickable", ctx.type === "link");
         i0.ɵɵproperty("disabled", ctx.disabled || ctx.loading);
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", ctx.loading);
@@ -2549,7 +2549,7 @@ PoButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoButtonC
     } }, directives: [i1.NgIf, PoLoadingIconComponent, PoIconComponent], encapsulation: 2, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoButtonComponent, [{
         type: Component,
-        args: [{ selector: 'po-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #button\n  class=\"po-button po-text-ellipsis\"\n  type=\"button\"\n  [class.po-button-danger]=\"type === 'danger'\"\n  [class.po-button-link]=\"type === 'link'\"\n  [class.po-button-primary]=\"type === 'primary'\"\n  [class.po-button-sm]=\"small\"\n  [class.po-clickable]=\"type === 'link'\"\n  [disabled]=\"disabled || loading\"\n  (click)=\"onClick()\"\n>\n  <div *ngIf=\"loading\" class=\"po-button-loading-icon\">\n    <po-loading-icon p-neutral-color></po-loading-icon>\n  </div>\n\n  <po-icon *ngIf=\"icon\" class=\"po-button-icon\" [p-icon]=\"icon\"></po-icon>\n  <span *ngIf=\"label\" class=\"po-button-label\">{{ label }}</span>\n</button>\n" }]
+        args: [{ selector: 'po-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #button\n  class=\"po-button po-text-ellipsis\"\n  type=\"button\"\n  [class.po-button-default]=\"type === 'default'\"\n  [class.po-button-danger]=\"type === 'danger'\"\n  [class.po-button-link]=\"type === 'link'\"\n  [class.po-button-primary]=\"type === 'primary'\"\n  [class.po-button-sm]=\"small\"\n  [class.po-clickable]=\"type === 'link'\"\n  [disabled]=\"disabled || loading\"\n  (click)=\"onClick()\"\n>\n  <div *ngIf=\"loading\" class=\"po-button-loading-icon\">\n    <po-loading-icon p-neutral-color></po-loading-icon>\n  </div>\n\n  <po-icon *ngIf=\"icon\" class=\"po-button-icon\" [p-icon]=\"icon\"></po-icon>\n  <span *ngIf=\"label\" class=\"po-button-label\">{{ label }}</span>\n</button>\n" }]
     }], null, { buttonElement: [{
             type: ViewChild,
             args: ['button', { static: true }]
@@ -18196,6 +18196,7 @@ class PoComboBaseComponent {
      * - A lista deve seguir as definições descritas nas respectivas interfaces, caso contrário não exibirá a(as) opção(ões) fora dos padrões.
      * - O componente interpretará o formato da lista de acordo com a interface utilizada e só exibirá as opções correspondentes à ela.
      * - Um agrupamento só será exibido se houver pelo menos uma opção válida.
+     * - Aconselha-se utilizar valores distintos no `label` e `value` dos itens.
      */
     set options(options) {
         this._options = Array.isArray(options) ? options : [];
@@ -18532,8 +18533,12 @@ class PoComboBaseComponent {
         return labelA < labelB ? -1 : labelA > labelB ? 1 : 0;
     }
     hasDuplicatedOption(options, currentOption, accumulatedGroupOptions) {
-        return (options.some(option => option.label === currentOption) ||
-            (accumulatedGroupOptions && accumulatedGroupOptions.some(option => option.label === currentOption)));
+        if (accumulatedGroupOptions) {
+            return accumulatedGroupOptions.some(option => option.label === currentOption);
+        }
+        else {
+            return options.some(option => option.value === currentOption);
+        }
     }
     listingComboOptions(comboOptions) {
         const comboOptionsList = comboOptions.concat();
@@ -18559,7 +18564,7 @@ class PoComboBaseComponent {
     verifyComboOptions(comboOptions, verifyingOptionsGroup = false, accumulatedGroupOptions) {
         return comboOptions.reduce((accumulatedOptions, currentOption) => {
             if (!this.verifyIfHasLabel(currentOption) ||
-                this.hasDuplicatedOption(accumulatedOptions, currentOption.label, accumulatedGroupOptions) ||
+                this.hasDuplicatedOption(accumulatedOptions, currentOption['value'] || currentOption['label'], accumulatedGroupOptions) ||
                 !this.validateValue(currentOption, verifyingOptionsGroup)) {
                 return accumulatedOptions;
             }
@@ -21337,16 +21342,27 @@ class PoDecimalComponent extends PoInputBaseComponent {
         this.controlChangeEmitter();
     }
     extraValidation(abstractControl) {
+        const value = abstractControl.value;
+        const thousandValue = Math.trunc(value);
         // Verifica se já possui algum error pattern padrão.
         this.errorPattern = this.errorPattern !== 'Valor Inválido' ? this.errorPattern : '';
-        if (minFailed(this.min, abstractControl.value)) {
+        if (minFailed(this.min, value)) {
             return {
                 min: {
                     valid: false
                 }
             };
         }
-        if (maxFailed(this.max, abstractControl.value)) {
+        if (maxFailed(this.max, value)) {
+            return {
+                max: {
+                    valid: false
+                }
+            };
+        }
+        if ((maxlengpoailed(this.thousandMaxlength, thousandValue) &&
+            this.thousandMaxlength < poDecimalDefaultThousandMaxlength) ||
+            maxlengpoailed(poDecimalTotalLengthLimit, value)) {
             return {
                 max: {
                     valid: false
@@ -28916,7 +28932,7 @@ PoRichTextToolbarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.toolbarElement = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.richTextImageModal = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.richTextLinkModal = _t.first);
-    } }, inputs: { readonly: ["p-readonly", "readonly"] }, outputs: { command: "p-command", modal: "p-modal", linkEditing: "p-link-editing" }, decls: 17, vars: 6, consts: [[1, "po-rich-text-toolbar"], ["toolbarElement", ""], [1, "po-rich-text-toolbar-button-align"], ["p-toggle", "multiple", 3, "p-buttons"], ["class", "po-rich-text-toolbar-button-align", 4, "ngIf"], ["p-toggle", "single", 3, "p-buttons"], [3, "p-buttons"], [3, "p-command"], ["richTextImageModal", ""], [3, "p-command", "p-link-editing"], ["richTextLinkModal", ""], [1, "po-rich-text-toolbar-color-picker-container"], [1, "po-button", "po-text-ellipsis", "po-rich-text-toolbar-color-picker-button", 3, "disabled", "p-tooltip"], ["type", "color", 1, "po-rich-text-toolbar-color-picker-input", 3, "disabled", "change"], ["colorPickerInput", ""]], template: function PoRichTextToolbarComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { readonly: ["p-readonly", "readonly"] }, outputs: { command: "p-command", modal: "p-modal", linkEditing: "p-link-editing" }, decls: 17, vars: 11, consts: [[1, "po-rich-text-toolbar"], ["toolbarElement", ""], [1, "po-rich-text-toolbar-button-align"], ["p-toggle", "multiple", 3, "p-small", "p-buttons"], ["class", "po-rich-text-toolbar-button-align", 4, "ngIf"], ["p-toggle", "single", 3, "p-small", "p-buttons"], [3, "p-small", "p-buttons"], [3, "p-command"], ["richTextImageModal", ""], [3, "p-command", "p-link-editing"], ["richTextLinkModal", ""], [1, "po-rich-text-toolbar-color-picker-container"], [1, "po-button", "po-button-default", "po-button-sm", "po-text-ellipsis", "po-rich-text-toolbar-color-picker-button", 3, "disabled", "p-tooltip"], ["type", "color", 1, "po-rich-text-toolbar-color-picker-input", 3, "disabled", "change"], ["colorPickerInput", ""]], template: function PoRichTextToolbarComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0, 1)(2, "div", 2);
         i0.ɵɵelement(3, "po-button-group", 3);
         i0.ɵɵelementEnd();
@@ -28941,21 +28957,21 @@ PoRichTextToolbarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵadvance(3);
-        i0.ɵɵproperty("p-buttons", ctx.formatButtons);
+        i0.ɵɵproperty("p-small", true)("p-buttons", ctx.formatButtons);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", !ctx.isInternetExplorer);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("p-buttons", ctx.alignButtons);
+        i0.ɵɵproperty("p-small", true)("p-buttons", ctx.alignButtons);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("p-buttons", ctx.listButtons);
+        i0.ɵɵproperty("p-small", true)("p-buttons", ctx.listButtons);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("p-buttons", ctx.linkButtons);
+        i0.ɵɵproperty("p-small", true)("p-buttons", ctx.linkButtons);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("p-buttons", ctx.mediaButtons);
+        i0.ɵɵproperty("p-small", true)("p-buttons", ctx.mediaButtons);
     } }, directives: [PoButtonGroupComponent, i1.NgIf, PoTooltipDirective, PoRichTextImageModalComponent, PoRichTextLinkModalComponent], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoRichTextToolbarComponent, [{
         type: Component,
-        args: [{ selector: 'po-rich-text-toolbar', template: "<div class=\"po-rich-text-toolbar\" #toolbarElement>\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group p-toggle=\"multiple\" [p-buttons]=\"formatButtons\"> </po-button-group>\n  </div>\n\n  <div *ngIf=\"!isInternetExplorer\" class=\"po-rich-text-toolbar-button-align\">\n    <div class=\"po-rich-text-toolbar-color-picker-container\">\n      <button\n        class=\"po-button po-text-ellipsis po-rich-text-toolbar-color-picker-button\"\n        [disabled]=\"readonly\"\n        [p-tooltip]=\"literals.textColor\"\n        [attr.aria-label]=\"literals.textColor\"\n      >\n        <input\n          #colorPickerInput\n          class=\"po-rich-text-toolbar-color-picker-input\"\n          type=\"color\"\n          [disabled]=\"readonly\"\n          (change)=\"changeTextColor($event.target.value)\"\n          [attr.aria-label]=\"literals.textColor\"\n        />\n      </button>\n    </div>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group p-toggle=\"single\" [p-buttons]=\"alignButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group p-toggle=\"single\" [p-buttons]=\"listButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group [p-buttons]=\"linkButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group [p-buttons]=\"mediaButtons\"> </po-button-group>\n  </div>\n</div>\n\n<po-rich-text-image-modal #richTextImageModal (p-command)=\"emitCommand($event)\"> </po-rich-text-image-modal>\n\n<po-rich-text-link-modal\n  #richTextLinkModal\n  (p-command)=\"emitCommand($event)\"\n  (p-link-editing)=\"emitLinkEditing($event)\"\n>\n</po-rich-text-link-modal>\n" }]
+        args: [{ selector: 'po-rich-text-toolbar', template: "<div class=\"po-rich-text-toolbar\" #toolbarElement>\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group p-toggle=\"multiple\" [p-small]=\"true\" [p-buttons]=\"formatButtons\"> </po-button-group>\n  </div>\n\n  <div *ngIf=\"!isInternetExplorer\" class=\"po-rich-text-toolbar-button-align\">\n    <div class=\"po-rich-text-toolbar-color-picker-container\">\n      <button\n        class=\"po-button po-button-default po-button-sm po-text-ellipsis po-rich-text-toolbar-color-picker-button\"\n        [disabled]=\"readonly\"\n        [p-tooltip]=\"literals.textColor\"\n        [attr.aria-label]=\"literals.textColor\"\n      >\n        <input\n          #colorPickerInput\n          class=\"po-rich-text-toolbar-color-picker-input\"\n          type=\"color\"\n          [disabled]=\"readonly\"\n          (change)=\"changeTextColor($event.target.value)\"\n          [attr.aria-label]=\"literals.textColor\"\n        />\n      </button>\n    </div>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group p-toggle=\"single\" [p-small]=\"true\" [p-buttons]=\"alignButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group p-toggle=\"single\" [p-small]=\"true\" [p-buttons]=\"listButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group [p-small]=\"true\" [p-buttons]=\"linkButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group [p-small]=\"true\" [p-buttons]=\"mediaButtons\"> </po-button-group>\n  </div>\n</div>\n\n<po-rich-text-image-modal #richTextImageModal (p-command)=\"emitCommand($event)\"> </po-rich-text-image-modal>\n\n<po-rich-text-link-modal\n  #richTextLinkModal\n  (p-command)=\"emitCommand($event)\"\n  (p-link-editing)=\"emitLinkEditing($event)\"\n>\n</po-rich-text-link-modal>\n" }]
     }], function () { return [{ type: PoLanguageService }]; }, { colorPickerInput: [{
             type: ViewChild,
             args: ['colorPickerInput', { read: ElementRef }]