@po-ui/ng-components 6.6.0 → 6.7.0

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

@@ -6652,6 +6652,7 @@ const poColorPalette = Object.values(PoColorPaletteEnum);
 class PoColorService {
     constructor() {
         this.defaultColors = [];
+        this.colorBlack = '#000000';
     }
     /**
      * Avalia a propriedade `color` na lista de items passada. Caso sim, trata se é decimal ou string `po-color`. Caso não haja, retorna a cor default.
@@ -6665,7 +6666,7 @@ class PoColorService {
                 dataItem.color = this.verifyIfIsPoColorPalette(dataItem.color);
                 return dataItem;
             }
-            const color = this.defaultColors[index];
+            const color = this.defaultColors[index] === undefined ? this.colorBlack : this.defaultColors[index];
             return Object.assign(Object.assign({}, dataItem), { color });
         });
     }
@@ -20017,7 +20018,7 @@ PoComboComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoComboCom
                 useExisting: forwardRef(() => PoComboComponent),
                 multi: true
             }
-        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 21, vars: 23, consts: [[3, "p-label", "p-help", "p-optional"], [1, "po-field-container-content"], ["class", "po-field-icon-container-left", 4, "ngIf"], ["autocomplete", "off", "type", "text", 1, "po-input", "po-combo-input", 3, "ngClass", "disabled", "placeholder", "required", "click", "keyup", "blur", "keyup.enter", "keydown"], ["inp", ""], [1, "po-field-icon-container-right"], [3, "p-element-ref", "p-change-event", 4, "ngIf"], [3, "click"], ["iconArrow", ""], [1, "po-combo-container", 3, "hidden"], ["containerElement", ""], [4, "ngIf", "ngIfThen", "ngIfElse"], ["loadingTemplate", ""], ["optionsTemplate", ""], ["visibleOptionsTemplate", ""], ["noDataTemplate", ""], [1, "po-field-icon-container-left"], [1, "po-field-icon", 3, "p-icon"], [3, "p-element-ref", "p-change-event"], [1, "po-combo-container-loading"], [1, "po-combo-container-content"], ["contentElement", ""], [3, "po-combo-item-selected", "click", 4, "ngFor", "ngForOf"], ["defaultOptionTemplate", ""], ["optionTemplate", ""], ["class", "po-combo-item-title", 4, "ngIf", "ngIfElse"], ["optionLink", ""], [1, "po-combo-item-title"], [1, "po-combo-item"], [3, "innerHTML"], ["optionsGroupTemplate", ""], ["defaultOptionsTemplate", ""], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "po-combo-container-no-data"], [1, "po-combo-no-data", "po-text-center"]], template: function PoComboComponent_Template(rf, ctx) {
+        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 21, vars: 23, consts: [[3, "p-label", "p-help", "p-optional"], [1, "po-field-container-content"], ["class", "po-field-icon-container-left", 4, "ngIf"], ["autocomplete", "off", "type", "text", 1, "po-input", "po-combo-input", 3, "ngClass", "disabled", "placeholder", "required", "click", "keyup", "blur", "keyup.enter", "keydown"], ["inp", ""], [1, "po-field-icon-container-right"], [3, "p-element-ref", "p-change-event", 4, "ngIf"], [3, "click"], ["iconArrow", ""], [1, "po-combo-container", 3, "hidden"], ["containerElement", ""], [4, "ngIf", "ngIfThen", "ngIfElse"], ["loadingTemplate", ""], ["optionsTemplate", ""], ["visibleOptionsTemplate", ""], ["noDataTemplate", ""], [1, "po-field-icon-container-left"], [1, "po-field-icon", 3, "p-icon"], [3, "p-element-ref", "p-change-event"], [1, "po-combo-container-loading"], [1, "po-combo-container-content"], ["contentElement", ""], [3, "po-combo-item-selected", "click", 4, "ngFor", "ngForOf"], ["defaultOptionTemplate", ""], ["optionTemplate", ""], ["class", "po-combo-item-title", 4, "ngIf", "ngIfElse"], ["optionLink", ""], [1, "po-combo-item-title"], [1, "po-combo-item"], [2, "pointer-events", "none", 3, "innerHTML"], ["optionsGroupTemplate", ""], ["defaultOptionsTemplate", ""], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "po-combo-container-no-data"], [1, "po-combo-no-data", "po-text-center"]], template: function PoComboComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1);
             i0.ɵɵtemplate(2, PoComboComponent_div_2_Template, 2, 3, "div", 2);
@@ -20077,7 +20078,7 @@ PoComboComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoComboCom
                             useExisting: forwardRef(() => PoComboComponent),
                             multi: true
                         }
-                    ], template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon class=\"po-field-icon\" [class.po-field-icon-disabled]=\"disabled\" [p-icon]=\"icon\"></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input po-combo-input\"\n      [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n      [class.po-input-icon-left]=\"icon\"\n      autocomplete=\"off\"\n      type=\"text\"\n      [attr.name]=\"name\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      (click)=\"toggleComboVisibility()\"\n      (keyup)=\"onKeyUp($event)\"\n      (blur)=\"onBlur()\"\n      (keyup.enter)=\"searchOnEnter($event.target.value)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean *ngIf=\"clean && !disabled\" (p-change-event)=\"clear($event)\" [p-element-ref]=\"inputEl\"> </po-clean>\n      <span\n        #iconArrow\n        class=\"po-icon po-field-icon {{ comboIcon }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon]=\"!disabled\"\n        (click)=\"toggleComboVisibility()\"\n      >\n      </span>\n    </div>\n  </div>\n\n  <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n    <ng-container *ngIf=\"isServerSearching; then loadingTemplate; else optionsTemplate\"> </ng-container>\n  </div>\n\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n\n<ng-template #loadingTemplate>\n  <div class=\"po-combo-container-loading\">\n    <po-loading></po-loading>\n  </div>\n</ng-template>\n\n<ng-template #optionsTemplate>\n  <ng-container *ngIf=\"visibleOptions.length; then visibleOptionsTemplate; else noDataTemplate\"> </ng-container>\n</ng-template>\n\n<ng-template #visibleOptionsTemplate>\n  <ul #contentElement class=\"po-combo-container-content\">\n    <li\n      *ngFor=\"let option of visibleOptions\"\n      [class.po-combo-item-selected]=\"compareObjects(selectedView, option)\"\n      (click)=\"option?.options ? undefined : onOptionClick(option, $event)\"\n    >\n      <ng-container *ngIf=\"comboOptionTemplate; then optionTemplate; else defaultOptionTemplate\"></ng-container>\n\n      <ng-template #defaultOptionTemplate>\n        <label *ngIf=\"option?.options; else optionLink\" class=\"po-combo-item-title\">{{ option.label }}</label>\n        <ng-template #optionLink>\n          <a class=\"po-combo-item\">\n            <span [innerHTML]=\"getLabelFormatted(option?.label)\"></span>\n          </a>\n        </ng-template>\n      </ng-template>\n\n      <ng-template #optionTemplate>\n        <ng-container *ngIf=\"isOptionGroupList; then optionsGroupTemplate; else defaultOptionsTemplate\"></ng-container>\n\n        <ng-template #optionsGroupTemplate>\n          <ng-template\n            [ngTemplateOutlet]=\"comboOptionTemplate?.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: option, selected: compareObjects(selectedView, option) }\"\n          >\n          </ng-template>\n        </ng-template>\n\n        <ng-template #defaultOptionsTemplate>\n          <a class=\"po-combo-item\">\n            <ng-template\n              [ngTemplateOutlet]=\"comboOptionTemplate?.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: option }\"\n            >\n            </ng-template>\n          </a>\n        </ng-template>\n      </ng-template>\n    </li>\n  </ul>\n</ng-template>\n\n<ng-template #noDataTemplate>\n  <div class=\"po-combo-container-no-data\">\n    <div class=\"po-combo-no-data po-text-center\">\n      <span>\n        {{ literals.noData }}\n      </span>\n    </div>\n  </div>\n</ng-template>\n" }]
+                    ], template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon class=\"po-field-icon\" [class.po-field-icon-disabled]=\"disabled\" [p-icon]=\"icon\"></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input po-combo-input\"\n      [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n      [class.po-input-icon-left]=\"icon\"\n      autocomplete=\"off\"\n      type=\"text\"\n      [attr.name]=\"name\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      (click)=\"toggleComboVisibility()\"\n      (keyup)=\"onKeyUp($event)\"\n      (blur)=\"onBlur()\"\n      (keyup.enter)=\"searchOnEnter($event.target.value)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean *ngIf=\"clean && !disabled\" (p-change-event)=\"clear($event)\" [p-element-ref]=\"inputEl\"> </po-clean>\n      <span\n        #iconArrow\n        class=\"po-icon po-field-icon {{ comboIcon }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon]=\"!disabled\"\n        (click)=\"toggleComboVisibility()\"\n      >\n      </span>\n    </div>\n  </div>\n\n  <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n    <ng-container *ngIf=\"isServerSearching; then loadingTemplate; else optionsTemplate\"> </ng-container>\n  </div>\n\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n\n<ng-template #loadingTemplate>\n  <div class=\"po-combo-container-loading\">\n    <po-loading></po-loading>\n  </div>\n</ng-template>\n\n<ng-template #optionsTemplate>\n  <ng-container *ngIf=\"visibleOptions.length; then visibleOptionsTemplate; else noDataTemplate\"> </ng-container>\n</ng-template>\n\n<ng-template #visibleOptionsTemplate>\n  <ul #contentElement class=\"po-combo-container-content\">\n    <li\n      *ngFor=\"let option of visibleOptions\"\n      [class.po-combo-item-selected]=\"compareObjects(selectedView, option)\"\n      (click)=\"option?.options ? undefined : onOptionClick(option, $event)\"\n    >\n      <ng-container *ngIf=\"comboOptionTemplate; then optionTemplate; else defaultOptionTemplate\"></ng-container>\n\n      <ng-template #defaultOptionTemplate>\n        <label *ngIf=\"option?.options; else optionLink\" class=\"po-combo-item-title\">{{ option.label }}</label>\n        <ng-template #optionLink>\n          <a class=\"po-combo-item\">\n            <span style=\"pointer-events: none\" [innerHTML]=\"getLabelFormatted(option?.label)\"></span>\n          </a>\n        </ng-template>\n      </ng-template>\n\n      <ng-template #optionTemplate>\n        <ng-container *ngIf=\"isOptionGroupList; then optionsGroupTemplate; else defaultOptionsTemplate\"></ng-container>\n\n        <ng-template #optionsGroupTemplate>\n          <ng-template\n            [ngTemplateOutlet]=\"comboOptionTemplate?.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: option, selected: compareObjects(selectedView, option) }\"\n          >\n          </ng-template>\n        </ng-template>\n\n        <ng-template #defaultOptionsTemplate>\n          <a class=\"po-combo-item\">\n            <ng-template\n              [ngTemplateOutlet]=\"comboOptionTemplate?.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: option }\"\n            >\n            </ng-template>\n          </a>\n        </ng-template>\n      </ng-template>\n    </li>\n  </ul>\n</ng-template>\n\n<ng-template #noDataTemplate>\n  <div class=\"po-combo-container-no-data\">\n    <div class=\"po-combo-no-data po-text-center\">\n      <span>\n        {{ literals.noData }}\n      </span>\n    </div>\n  </div>\n</ng-template>\n" }]
         }], function () { return [{ type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: PoComboFilterService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: PoControlPositionService }, { type: i3$1.DomSanitizer }, { type: PoLanguageService }]; }, { comboOptionTemplate: [{
                 type: ContentChild,
                 args: [PoComboOptionTemplateDirective, { static: true }]
@@ -29483,8 +29484,10 @@ function PoRichTextToolbarComponent_div_4_Template(rf, ctx) {
         const ctx_r1 = i0.ɵɵnextContext();
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("disabled", ctx_r1.readonly)("p-tooltip", ctx_r1.literals.textColor);
+        i0.ɵɵattribute("aria-label", ctx_r1.literals.textColor);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("disabled", ctx_r1.readonly);
+        i0.ɵɵattribute("aria-label", ctx_r1.literals.textColor);
     }
 }
 const poRichTextDefaultColor = '#000000';
@@ -29647,7 +29650,7 @@ PoRichTextToolbarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             i0.ɵɵelementStart(0, "div", 0, 1)(2, "div", 2);
             i0.ɵɵelement(3, "po-button-group", 3);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(4, PoRichTextToolbarComponent_div_4_Template, 5, 3, "div", 4);
+            i0.ɵɵtemplate(4, PoRichTextToolbarComponent_div_4_Template, 5, 5, "div", 4);
             i0.ɵɵelementStart(5, "div", 2);
             i0.ɵɵelement(6, "po-button-group", 5);
             i0.ɵɵelementEnd();
@@ -29685,7 +29688,7 @@ PoRichTextToolbarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (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      >\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        />\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-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" }]
         }], function () { return [{ type: PoLanguageService }]; }, { colorPickerInput: [{
                 type: ViewChild,
                 args: ['colorPickerInput', { read: ElementRef }]