@po-ui/ng-components 16.7.0 → 16.8.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, TemplateRef, Injectable, EventEmitter, Output, ElementRef, HostListener, ViewChild, ViewChildren, ContentChildren, HostBinding, forwardRef, ViewContainerRef, ContentChild, Pipe, inject, Injector, Inject, InjectionToken, APP_INITIALIZER } from '@angular/core';
+import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, TemplateRef, Injectable, EventEmitter, Output, ElementRef, HostListener, ViewChild, ViewChildren, ContentChildren, HostBinding, forwardRef, ViewContainerRef, ContentChild, inject, Pipe, Injector, Inject, InjectionToken, APP_INITIALIZER } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DecimalPipe, NgOptimizedImage, CurrencyPipe, DatePipe, TitleCasePipe } from '@angular/common';
 import * as i2$3 from '@angular/animations';
@@ -16234,6 +16234,21 @@ class PoModalModule {
     }], null, null); })();
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(PoModalModule, { declarations: [PoModalComponent, PoModalFooterComponent], imports: [CommonModule, PoButtonModule, PoIconModule], exports: [PoModalComponent, PoModalFooterComponent] }); })();
 
+function PoProgressBarComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵelement(1, "div", 3)(2, "div", 4);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("aria-valuenow", ctx_r0.value);
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("left", "-" + (100 - ctx_r0.value) + "%");
+} }
+function PoProgressBarComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵelement(1, "div", 6);
+    i0.ɵɵelementEnd();
+} }
 class PoProgressBarComponent {
     indeterminate;
     value;
@@ -16241,19 +16256,18 @@ class PoProgressBarComponent {
         return `${this.value / 100}`;
     }
     static ɵfac = function PoProgressBarComponent_Factory(t) { return new (t || PoProgressBarComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoProgressBarComponent, selectors: [["po-progress-bar"]], inputs: { indeterminate: ["p-indeterminate", "indeterminate"], value: ["p-value", "value"] }, decls: 3, vars: 4, consts: [[1, "po-progress-bar-element", "po-progress-bar-primary"], [1, "po-progress-bar-element", "po-progress-bar-secondary"]], template: function PoProgressBarComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div");
-            i0.ɵɵelement(1, "div", 0)(2, "div", 1);
-            i0.ɵɵelementEnd();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoProgressBarComponent, selectors: [["po-progress-bar"]], inputs: { indeterminate: ["p-indeterminate", "indeterminate"], value: ["p-value", "value"] }, decls: 2, vars: 2, consts: [["role", "progressbar", "aria-valuemin", "0", "aria-valuemax", "100", "aria-live", "polite", "class", "po-progress-bar-default", 4, "ngIf"], ["class", "po-progress-bar-indeterminate-track", 4, "ngIf"], ["role", "progressbar", "aria-valuemin", "0", "aria-valuemax", "100", "aria-live", "polite", 1, "po-progress-bar-default"], [1, "po-progress-bar-element", "po-progress-bar-primary"], [1, "po-progress-bar-element", "po-progress-bar-secondary"], [1, "po-progress-bar-indeterminate-track"], [1, "po-progress-bar-indeterminate-track-bar"]], template: function PoProgressBarComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, PoProgressBarComponent_div_0_Template, 3, 3, "div", 0);
+            i0.ɵɵtemplate(1, PoProgressBarComponent_div_1_Template, 2, 0, "div", 1);
         } if (rf & 2) {
-            i0.ɵɵclassProp("po-progress-bar-indeterminate", ctx.indeterminate);
+            i0.ɵɵproperty("ngIf", !ctx.indeterminate);
             i0.ɵɵadvance(1);
-            i0.ɵɵstyleProp("transform", "scaleX(" + ctx.valueScale + ")");
-        } }, encapsulation: 2, changeDetection: 0 });
+            i0.ɵɵproperty("ngIf", ctx.indeterminate);
+        } }, dependencies: [i1.NgIf], encapsulation: 2, changeDetection: 0 });
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoProgressBarComponent, [{
         type: Component,
-        args: [{ selector: 'po-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class.po-progress-bar-indeterminate]=\"indeterminate\">\n  <div class=\"po-progress-bar-element po-progress-bar-primary\" [style.transform]=\"'scaleX(' + valueScale + ')'\"></div>\n  <div class=\"po-progress-bar-element po-progress-bar-secondary\"></div>\n</div>\n" }]
+        args: [{ selector: 'po-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"!indeterminate\"\n  role=\"progressbar\"\n  [attr.aria-valuenow]=\"value\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  aria-live=\"polite\"\n  class=\"po-progress-bar-default\"\n>\n  <div class=\"po-progress-bar-element po-progress-bar-primary\"></div>\n  <div class=\"po-progress-bar-element po-progress-bar-secondary\" [style.left]=\"'-' + (100 - value) + '%'\"></div>\n</div>\n\n<div *ngIf=\"indeterminate\" class=\"po-progress-bar-indeterminate-track\">\n  <div class=\"po-progress-bar-indeterminate-track-bar\"></div>\n</div>\n" }]
     }], null, { indeterminate: [{
             type: Input,
             args: ['p-indeterminate']
@@ -16279,6 +16293,19 @@ var PoProgressStatus;
     PoProgressStatus["Success"] = "success";
 })(PoProgressStatus || (PoProgressStatus = {}));
 
+/**
+ * @usedBy PoProgressComponent
+ *
+ * @description
+ *
+ * *Enum* `PoProgressSize` para o tamanho da altura da barra de progresso.
+ */
+var PoProgressSize;
+(function (PoProgressSize) {
+    PoProgressSize["medium"] = "medium";
+    PoProgressSize["large"] = "large";
+})(PoProgressSize || (PoProgressSize = {}));
+
 const poProgressMaxValue = 100;
 const poProgressMinValue = 0;
 /**
@@ -16352,6 +16379,7 @@ class PoProgressBaseComponent {
     retry = new EventEmitter();
     _indeterminate;
     _value = 0;
+    _size = 'large';
     /**
      * @optional
      *
@@ -16390,11 +16418,40 @@ class PoProgressBaseComponent {
     get value() {
         return this._value;
     }
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Definição do tamanho da altura da barra de progresso.
+     *
+     * Valores válidos:
+     *  - `medium`: tamanho médio
+     *  - `large`: tamanho grande
+     *
+     * @default `large`
+     */
+    set size(value) {
+        this._size = PoProgressSize[value] ? PoProgressSize[value] : PoProgressSize.large;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Ativa a exibição da porcentagem atual da barra de progresso.
+     *
+     * @default `false`
+     */
+    showPercentage = false;
     isProgressRangeValue(value) {
         return value >= poProgressMinValue && value <= poProgressMaxValue;
     }
     static ɵfac = function PoProgressBaseComponent_Factory(t) { return new (t || PoProgressBaseComponent)(); };
-    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoProgressBaseComponent, inputs: { info: ["p-info", "info"], infoIcon: ["p-info-icon", "infoIcon"], status: ["p-status", "status"], text: ["p-text", "text"], indeterminate: ["p-indeterminate", "indeterminate"], value: ["p-value", "value"] }, outputs: { cancel: "p-cancel", retry: "p-retry" } });
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoProgressBaseComponent, inputs: { info: ["p-info", "info"], infoIcon: ["p-info-icon", "infoIcon"], status: ["p-status", "status"], text: ["p-text", "text"], indeterminate: ["p-indeterminate", "indeterminate"], value: ["p-value", "value"], size: ["p-size", "size"], showPercentage: ["p-show-percentage", "showPercentage", convertToBoolean] }, outputs: { cancel: "p-cancel", retry: "p-retry" }, features: [i0.ɵɵInputTransformsFeature] });
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoProgressBaseComponent, [{
         type: Directive
@@ -16422,70 +16479,88 @@ class PoProgressBaseComponent {
         }], value: [{
             type: Input,
             args: ['p-value']
+        }], size: [{
+            type: Input,
+            args: ['p-size']
+        }], showPercentage: [{
+            type: Input,
+            args: [{ alias: 'p-show-percentage', transform: convertToBoolean }]
         }] }); })();
 
-function PoProgressComponent_label_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "label", 5);
-    i0.ɵɵtext(1);
+const poProgressLiterals = {
+    en: {
+        cancel: 'Cancel',
+        retry: 'Retry'
+    },
+    es: {
+        cancel: 'Cancelar',
+        retry: 'Procesar de nuevo'
+    },
+    pt: {
+        cancel: 'Cancelar',
+        retry: 'Tentar Novamente'
+    },
+    ru: {
+        cancel: 'Отмена',
+        retry: 'Повторить попытку'
+    }
+};
+
+function PoProgressComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵelement(1, "po-label", 13);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.text, " ");
+    i0.ɵɵproperty("p-label", ctx_r0.text);
 } }
-function PoProgressComponent_div_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 6)(1, "label", 7);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd()();
+function PoProgressComponent_po_icon_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "po-icon", 14);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.text, " ");
+    i0.ɵɵclassProp("po-progress-info-icon-error", ctx_r1.status === "error");
+    i0.ɵɵproperty("p-icon", ctx_r1.infoIcon);
 } }
-function PoProgressComponent_div_4_span_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span");
+function PoProgressComponent_po_icon_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "po-icon", 15);
+} }
+function PoProgressComponent_span_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 16);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassMapInterpolate1("po-progress-info-icon po-icon ", ctx_r3.infoIcon, "");
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("po-progress-info-text-error", ctx_r3.status === "error");
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate(ctx_r3.info);
 } }
-function PoProgressComponent_div_4_span_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 13);
+function PoProgressComponent_span_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r4 = i0.ɵɵnextContext(2);
+    const ctx_r4 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r4.info);
+    i0.ɵɵtextInterpolate1("", ctx_r4.value, "%");
 } }
-function PoProgressComponent_div_4_button_3_Template(rf, ctx) { if (rf & 1) {
+function PoProgressComponent_po_button_10_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 14);
-    i0.ɵɵlistener("click", function PoProgressComponent_div_4_button_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r7.emitRetry()); });
+    i0.ɵɵelementStart(0, "po-button", 17);
+    i0.ɵɵlistener("p-click", function PoProgressComponent_po_button_10_Template_po_button_p_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.emitRetry()); });
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r5 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("p-aria-label", ctx_r5.literals.retry);
 } }
-function PoProgressComponent_div_4_button_4_Template(rf, ctx) { if (rf & 1) {
+function PoProgressComponent_po_button_11_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 15);
-    i0.ɵɵlistener("click", function PoProgressComponent_div_4_button_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r9.emitCancellation()); });
-    i0.ɵɵelementEnd();
-} }
-function PoProgressComponent_div_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵtemplate(1, PoProgressComponent_div_4_span_1_Template, 1, 3, "span", 9);
-    i0.ɵɵtemplate(2, PoProgressComponent_div_4_span_2_Template, 2, 1, "span", 10);
-    i0.ɵɵtemplate(3, PoProgressComponent_div_4_button_3_Template, 1, 0, "button", 11);
-    i0.ɵɵtemplate(4, PoProgressComponent_div_4_button_4_Template, 1, 0, "button", 12);
+    i0.ɵɵelementStart(0, "po-button", 18);
+    i0.ɵɵlistener("p-click", function PoProgressComponent_po_button_11_Template_po_button_p_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.emitCancellation()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r2.infoIcon);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r2.info);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r2.isAllowRetry);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r2.isAllowCancel);
+    const ctx_r6 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("p-aria-label", ctx_r6.literals.cancel)("p-danger", true);
 } }
 /**
  * @docsExtends PoProgressBaseComponent
@@ -16507,11 +16582,13 @@ function PoProgressComponent_div_4_Template(rf, ctx) { if (rf & 1) {
  * </example>
  */
 class PoProgressComponent extends PoProgressBaseComponent {
+    language;
+    literals;
     get isAllowCancel() {
         return !!this.cancel.observers.length && this.status !== PoProgressStatus.Success;
     }
-    get isAllowProgressInfo() {
-        return !!(this.info || this.infoIcon || this.isAllowCancel || this.isAllowRetry);
+    get isAllowInfoError() {
+        return !!(!this.infoIcon && this.info && this.status === PoProgressStatus.Error);
     }
     get isAllowRetry() {
         return !!this.retry.observers.length && this.status === PoProgressStatus.Error;
@@ -16525,6 +16602,13 @@ class PoProgressComponent extends PoProgressBaseComponent {
         }
         return 'po-progress-default';
     }
+    poLanguageService = inject(PoLanguageService);
+    ngOnInit() {
+        this.language = this.poLanguageService.getShortLanguage();
+        this.literals = {
+            ...poProgressLiterals[this.language]
+        };
+    }
     emitCancellation() {
         this.cancel.emit(this.status);
     }
@@ -16532,28 +16616,44 @@ class PoProgressComponent extends PoProgressBaseComponent {
         this.retry.emit();
     }
     static ɵfac = /*@__PURE__*/ function () { let ɵPoProgressComponent_BaseFactory; return function PoProgressComponent_Factory(t) { return (ɵPoProgressComponent_BaseFactory || (ɵPoProgressComponent_BaseFactory = i0.ɵɵgetInheritedFactory(PoProgressComponent)))(t || PoProgressComponent); }; }();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoProgressComponent, selectors: [["po-progress"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 6, consts: [[1, "po-progress", 3, "ngClass"], ["class", "po-progress-description-mobile po-progress-description-text", 4, "ngIf"], [1, "po-progress-bar", 3, "p-indeterminate", "p-value"], ["class", "po-progress-description", 4, "ngIf"], ["class", "po-progress-info", 4, "ngIf"], [1, "po-progress-description-mobile", "po-progress-description-text"], [1, "po-progress-description"], [1, "po-progress-description-text"], [1, "po-progress-info"], [3, "class", 4, "ngIf"], ["class", "po-progress-info-text", 4, "ngIf"], ["class", "po-progress-info-icon-action po-icon po-icon-refresh po-clickable", 3, "click", 4, "ngIf"], ["class", "po-progress-info-icon-action po-icon po-icon-close po-clickable", 3, "click", 4, "ngIf"], [1, "po-progress-info-text"], [1, "po-progress-info-icon-action", "po-icon", "po-icon-refresh", "po-clickable", 3, "click"], [1, "po-progress-info-icon-action", "po-icon", "po-icon-close", "po-clickable", 3, "click"]], template: function PoProgressComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoProgressComponent, selectors: [["po-progress"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 12, vars: 13, consts: [[1, "po-progress", 3, "ngClass"], ["class", "po-progress-description", 4, "ngIf"], [3, "p-indeterminate", "p-value"], [1, "po-progress-info"], [1, "po-progress-info-left"], [3, "p-icon", "po-progress-info-icon-error", 4, "ngIf"], ["p-icon", "po-icon-exclamation", "class", "po-progress-info-icon-error", 4, "ngIf"], ["class", "po-progress-info-text", 3, "po-progress-info-text-error", 4, "ngIf"], [1, "po-progress-info-right"], [4, "ngIf"], ["p-icon", "po-icon-refresh", "p-kind", "tertiary", 3, "p-aria-label", "p-click", 4, "ngIf"], ["p-icon", "po-icon-close", "p-kind", "secondary", 3, "p-aria-label", "p-danger", "p-click", 4, "ngIf"], [1, "po-progress-description"], [3, "p-label"], [3, "p-icon"], ["p-icon", "po-icon-exclamation", 1, "po-progress-info-icon-error"], [1, "po-progress-info-text"], ["p-icon", "po-icon-refresh", "p-kind", "tertiary", 3, "p-aria-label", "p-click"], ["p-icon", "po-icon-close", "p-kind", "secondary", 3, "p-aria-label", "p-danger", "p-click"]], template: function PoProgressComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵtemplate(1, PoProgressComponent_label_1_Template, 2, 1, "label", 1);
+            i0.ɵɵtemplate(1, PoProgressComponent_div_1_Template, 2, 1, "div", 1);
             i0.ɵɵelement(2, "po-progress-bar", 2);
-            i0.ɵɵtemplate(3, PoProgressComponent_div_3_Template, 3, 1, "div", 3);
-            i0.ɵɵtemplate(4, PoProgressComponent_div_4_Template, 5, 4, "div", 4);
+            i0.ɵɵelementStart(3, "div", 3)(4, "div", 4);
+            i0.ɵɵtemplate(5, PoProgressComponent_po_icon_5_Template, 1, 3, "po-icon", 5);
+            i0.ɵɵtemplate(6, PoProgressComponent_po_icon_6_Template, 1, 0, "po-icon", 6);
+            i0.ɵɵtemplate(7, PoProgressComponent_span_7_Template, 2, 3, "span", 7);
             i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "div", 8);
+            i0.ɵɵtemplate(9, PoProgressComponent_span_9_Template, 2, 1, "span", 9);
+            i0.ɵɵtemplate(10, PoProgressComponent_po_button_10_Template, 1, 1, "po-button", 10);
+            i0.ɵɵtemplate(11, PoProgressComponent_po_button_11_Template, 1, 2, "po-button", 11);
+            i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.statusClass);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.text);
             i0.ɵɵadvance(1);
+            i0.ɵɵclassMapInterpolate1("po-progress-bar po-progress-bar-", ctx.size, "");
             i0.ɵɵproperty("p-indeterminate", ctx.indeterminate)("p-value", ctx.value);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngIf", ctx.infoIcon);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.text);
+            i0.ɵɵproperty("ngIf", ctx.isAllowInfoError);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.isAllowProgressInfo);
-        } }, dependencies: [i1.NgClass, i1.NgIf, PoProgressBarComponent], encapsulation: 2, changeDetection: 0 });
+            i0.ɵɵproperty("ngIf", ctx.info);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.showPercentage && !ctx.indeterminate);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.isAllowRetry);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.isAllowCancel);
+        } }, dependencies: [i1.NgClass, i1.NgIf, PoButtonComponent, PoIconComponent, PoLabelComponent, PoProgressBarComponent], encapsulation: 2, changeDetection: 0 });
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoProgressComponent, [{
         type: Component,
-        args: [{ selector: 'po-progress', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-progress\" [ngClass]=\"statusClass\">\n  <label *ngIf=\"text\" class=\"po-progress-description-mobile po-progress-description-text\">\n    {{ text }}\n  </label>\n\n  <po-progress-bar class=\"po-progress-bar\" [p-indeterminate]=\"indeterminate\" [p-value]=\"value\"> </po-progress-bar>\n\n  <div *ngIf=\"text\" class=\"po-progress-description\">\n    <label class=\"po-progress-description-text\">\n      {{ text }}\n    </label>\n  </div>\n\n  <div *ngIf=\"isAllowProgressInfo\" class=\"po-progress-info\">\n    <span *ngIf=\"infoIcon\" class=\"po-progress-info-icon po-icon {{ infoIcon }}\"></span>\n    <span *ngIf=\"info\" class=\"po-progress-info-text\">{{ info }}</span>\n\n    <button\n      *ngIf=\"isAllowRetry\"\n      class=\"po-progress-info-icon-action po-icon po-icon-refresh po-clickable\"\n      (click)=\"emitRetry()\"\n    ></button>\n\n    <button\n      *ngIf=\"isAllowCancel\"\n      class=\"po-progress-info-icon-action po-icon po-icon-close po-clickable\"\n      (click)=\"emitCancellation()\"\n    ></button>\n  </div>\n</div>\n" }]
+        args: [{ selector: 'po-progress', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-progress\" [ngClass]=\"statusClass\">\n  <div *ngIf=\"text\" class=\"po-progress-description\">\n    <po-label [p-label]=\"text\"></po-label>\n  </div>\n\n  <po-progress-bar\n    class=\"po-progress-bar po-progress-bar-{{ size }}\"\n    [p-indeterminate]=\"indeterminate\"\n    [p-value]=\"value\"\n  >\n  </po-progress-bar>\n\n  <div class=\"po-progress-info\">\n    <div class=\"po-progress-info-left\">\n      <po-icon *ngIf=\"infoIcon\" [p-icon]=\"infoIcon\" [class.po-progress-info-icon-error]=\"status === 'error'\"></po-icon>\n      <po-icon *ngIf=\"isAllowInfoError\" p-icon=\"po-icon-exclamation\" class=\"po-progress-info-icon-error\"></po-icon>\n      <span *ngIf=\"info\" class=\"po-progress-info-text\" [class.po-progress-info-text-error]=\"status === 'error'\">{{\n        info\n      }}</span>\n    </div>\n    <div class=\"po-progress-info-right\">\n      <span *ngIf=\"showPercentage && !indeterminate\">{{ value }}%</span>\n      <po-button\n        *ngIf=\"isAllowRetry\"\n        p-icon=\"po-icon-refresh\"\n        (p-click)=\"emitRetry()\"\n        [p-aria-label]=\"literals.retry\"\n        p-kind=\"tertiary\"\n      ></po-button>\n\n      <po-button\n        *ngIf=\"isAllowCancel\"\n        p-icon=\"po-icon-close\"\n        (p-click)=\"emitCancellation()\"\n        p-kind=\"secondary\"\n        [p-aria-label]=\"literals.cancel\"\n        [p-danger]=\"true\"\n      ></po-button>\n    </div>\n  </div>\n</div>\n" }]
     }], null, null); })();
 
 /**
@@ -16564,17 +16664,17 @@ class PoProgressComponent extends PoProgressBaseComponent {
 class PoProgressModule {
     static ɵfac = function PoProgressModule_Factory(t) { return new (t || PoProgressModule)(); };
     static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: PoProgressModule });
-    static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule] });
+    static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, PoButtonModule, PoIconModule, PoLabelModule] });
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoProgressModule, [{
         type: NgModule,
         args: [{
-                imports: [CommonModule],
+                imports: [CommonModule, PoButtonModule, PoIconModule, PoLabelModule],
                 exports: [PoProgressComponent],
                 declarations: [PoProgressBarComponent, PoProgressComponent]
             }]
     }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(PoProgressModule, { declarations: [PoProgressBarComponent, PoProgressComponent], imports: [CommonModule], exports: [PoProgressComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(PoProgressModule, { declarations: [PoProgressBarComponent, PoProgressComponent], imports: [CommonModule, PoButtonModule, PoIconModule, PoLabelModule], exports: [PoProgressComponent] }); })();
 
 /**
  * @description
@@ -19572,17 +19672,17 @@ var PoTableRowTemplateArrowDirection;
  *
  * @description
  *
- * Define o tipo de busca usado no po-seach.
+ * Define o tipo de busca usado no po-search.
  */
-var PoFilterMode;
-(function (PoFilterMode) {
+var PoSearchFilterMode;
+(function (PoSearchFilterMode) {
     /** Verifica se o texto *inicia* com o valor pesquisado. */
-    PoFilterMode[PoFilterMode["startsWith"] = 0] = "startsWith";
+    PoSearchFilterMode[PoSearchFilterMode["startsWith"] = 0] = "startsWith";
     /** Verifica se o texto *contém* o valor pesquisado. */
-    PoFilterMode[PoFilterMode["contains"] = 1] = "contains";
+    PoSearchFilterMode[PoSearchFilterMode["contains"] = 1] = "contains";
     /** Verifica se o texto *finaliza* com o valor pesquisado. */
-    PoFilterMode[PoFilterMode["endsWith"] = 2] = "endsWith";
-})(PoFilterMode || (PoFilterMode = {}));
+    PoSearchFilterMode[PoSearchFilterMode["endsWith"] = 2] = "endsWith";
+})(PoSearchFilterMode || (PoSearchFilterMode = {}));
 
 /**
  * @usedBy PoTableComponent
@@ -19933,7 +20033,7 @@ class PoTableBaseComponent {
      *
      * @default `startsWith`
      */
-    filterType = PoFilterMode.startsWith;
+    filterType = PoSearchFilterMode.startsWith;
     /**
      * @optional
      *
@@ -37882,34 +37982,217 @@ class PoTextareaComponent extends PoTextareaBaseComponent {
             args: ['inp', { read: ElementRef, static: true }]
         }] }); })();
 
+const poSearchLiteralsDefault = {
+    en: {
+        search: 'Search',
+        clean: 'Clean'
+    },
+    es: {
+        search: 'Buscar',
+        clean: 'limpiar'
+    },
+    pt: {
+        search: 'Pesquisar',
+        clean: 'Apagar'
+    },
+    ru: {
+        search: 'Поиск',
+        clean: 'чистый'
+    }
+};
+
+/**
+ * @description
+ *
+ * O componente search, também conhecido como barra de pesquisa, é utilizado para ajudar os usuários a localizar um determinado conteúdo
+ *
+ * Normalmente localizado no canto superior direito, junto com o ícone de lupa, uma vez que este ícone é amplamente reconhecido.
+ *
+ * Portanto, é de extrema importância que, ao utilizar este componente, as pessoas responsáveis por seu desenvolvimento considerem os seguintes critérios.
+ *
+ * #### Boas práticas
+ *
+ * Foram estruturados os padrões de usabilidade para auxiliar na utilização do componente e garantir uma boa experiência aos usuários. Por isso, é muito importante que ao utilizar este componente, as pessoas que o projetarem devem levar em consideração os seguintes critérios:
+ * - Utilize labels para apresentar resultados que estão sendo exibidos e apresente os resultados mais relevantes primeiro.
+ * - Exiba uma mensagem clara quando não forem encontrados resultados para busca e sempre que possível ofereça outras sugestões de busca.
+ * - Mantenha o texto original no campo de input, que facilita a ação do usuário caso queira fazer uma nova busca com alguma modificação na pesquisa.
+ * - Caso seja possível detectar um erro de digitação, mostre os resultados para a palavra "corrigida", isso evita a frustração de não obter resultados e não força o usuário a realizar uma nova busca.
+ * - Quando apropriado, destaque os termos da busca nos resultados.
+ * - A entrada do campo de pesquisa deve caber em uma linha. Não use entradas de pesquisa de várias linhas.
+ * - Recomenda-se ter apenas uma pesquisa por página. Se você precisar de várias pesquisas, rotule-as claramente para indicar sua finalidade.
+ * - Se possível, forneça sugestões de pesquisa, seja em um helptext ou sugestão de pesquisa que é um autocomplete. Isso ajuda os usuários a encontrar o que estão procurando, especialmente se os itens pesquisáveis forem complexos.
+ *
+ * #### Acessibilidade tratada no componente
+ *
+ *  Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas pelo proprietário do conteúdo. São elas:
+ *
+ * - Permitir a interação via teclado (2.1.1: Keyboard (A));
+ * - Alteração entre os estados precisa ser indicada por mais de um elemento além da cor (1.4.1: Use of Color);
+ */
 class PoSearchBaseComponent {
+    _literals;
+    _ariaLabel;
+    language;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Desabilita o po-search e não permite que o usuário interaja com o mesmo.
+     *
+     * @default `false`
+     */
     disabled;
-    loading;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Lista de itens que serão utilizados para pesquisa
+     */
     items = [];
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define um aria-label para o po-search.
+     *
+     * > Devido o componente não possuir uma label assim como outros campos de texto, o `aria-label` é utilizado para acessibilidade.
+     */
+    set ariaLabel(value) {
+        this._ariaLabel = value;
+        if (value !== this.literals.search) {
+            this._ariaLabel = `${this._ariaLabel} ${this.literals.search}`;
+        }
+    }
+    get ariaLabel() {
+        return this._ariaLabel;
+    }
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente (p-items), esta propriedade será responsável pelo texto de apresentação de cada item da lista.
+     */
     filterKeys = [];
-    filterType = PoFilterMode.startsWith;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente (p-items), esta propriedade será responsável pelo texto de apresentação de cada item da lista.
+     */
+    icon;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Objeto com as literais usadas no `po-search`.
+     *
+     * Para utilizar basta passar a literal que deseja customizar:
+     *
+     * ```
+     *  const customLiterals: PoSearchLiterals = {
+     *    search: 'Pesquisar',
+     *    clean: 'Limpar',
+     *  };
+     * ```
+     *
+     * E para carregar a literal customizada, basta apenas passar o objeto para o componente.
+     *
+     * ```
+     * <po-search
+     *   [p-literals]="customLiterals">
+     * </po-search>
+     * ```
+     *
+     * > O objeto padrão de literais será traduzido de acordo com o idioma do
+     * [`PoI18nService`](/documentation/po-i18n) ou do browser.
+     */
+    set literals(value) {
+        if (value instanceof Object && !(value instanceof Array)) {
+            this._literals = {
+                ...poSearchLiteralsDefault[poLocaleDefault],
+                ...poSearchLiteralsDefault[this.language],
+                ...value
+            };
+        }
+        else {
+            this._literals = poSearchLiteralsDefault[this.language];
+        }
+    }
+    get literals() {
+        return this._literals || poSearchLiteralsDefault[this.language];
+    }
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o modo de pesquisa utilizado no campo de busca, quando habilitado. Valores definidos no enum: PoSearchFilterMode
+     *
+     * @default `startsWith`
+     */
+    filterType = PoSearchFilterMode.startsWith;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento disparado ao alterar valor do model.
+     */
+    changeModel = new EventEmitter();
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Pode ser informada uma função que será disparada quando houver alterações no input.
+     */
     filteredItemsChange = new EventEmitter();
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Pode ser informada uma função que será disparada quando houver alterações nos filtros.
+     */
     filter = new EventEmitter();
-    static ɵfac = function PoSearchBaseComponent_Factory(t) { return new (t || PoSearchBaseComponent)(); };
-    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoSearchBaseComponent, inputs: { disabled: ["p-disabled", "disabled", convertToBoolean], loading: ["p-loading", "loading"], items: ["p-items", "items"], filterKeys: ["p-filter-keys", "filterKeys"], filterType: ["p-filter-type", "filterType"] }, outputs: { filteredItemsChange: "p-filtered-items-change", filter: "p-filter" }, features: [i0.ɵɵInputTransformsFeature] });
+    constructor(languageService) {
+        this.language = languageService.getShortLanguage();
+    }
+    static ɵfac = function PoSearchBaseComponent_Factory(t) { return new (t || PoSearchBaseComponent)(i0.ɵɵdirectiveInject(PoLanguageService)); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoSearchBaseComponent, inputs: { disabled: ["p-disabled", "disabled", convertToBoolean], items: ["p-items", "items"], ariaLabel: ["p-aria-label", "ariaLabel"], filterKeys: ["p-filter-keys", "filterKeys"], icon: ["p-icon", "icon"], literals: ["p-literals", "literals"], filterType: ["p-filter-type", "filterType"] }, outputs: { changeModel: "p-change-model", filteredItemsChange: "p-filtered-items-change", filter: "p-filter" }, features: [i0.ɵɵInputTransformsFeature] });
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoSearchBaseComponent, [{
         type: Directive
-    }], null, { disabled: [{
+    }], function () { return [{ type: PoLanguageService }]; }, { disabled: [{
             type: Input,
             args: [{ alias: 'p-disabled', transform: convertToBoolean }]
-        }], loading: [{
-            type: Input,
-            args: ['p-loading']
         }], items: [{
             type: Input,
             args: ['p-items']
+        }], ariaLabel: [{
+            type: Input,
+            args: ['p-aria-label']
         }], filterKeys: [{
             type: Input,
             args: ['p-filter-keys']
+        }], icon: [{
+            type: Input,
+            args: ['p-icon']
+        }], literals: [{
+            type: Input,
+            args: ['p-literals']
         }], filterType: [{
             type: Input,
             args: ['p-filter-type']
+        }], changeModel: [{
+            type: Output,
+            args: ['p-change-model']
         }], filteredItemsChange: [{
             type: Output,
             args: ['p-filtered-items-change']
@@ -37919,52 +38202,58 @@ class PoSearchBaseComponent {
         }] }); })();
 
 const _c0$y = ["poSearchInput"];
-function PoSearchComponent_po_icon_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "po-icon", 7);
-} }
-function PoSearchComponent_po_loading_icon_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "po-loading-icon", 8);
-} }
-function PoSearchComponent_div_6_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 9)(1, "po-clean", 10);
-    i0.ɵɵlistener("p-change-event", function PoSearchComponent_div_6_Template_po_clean_p_change_event_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.clearSearch()); });
+function PoSearchComponent_div_5_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 6)(1, "button", 7);
+    i0.ɵɵlistener("click", function PoSearchComponent_div_5_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clearSearch()); })("keydown.enter", function PoSearchComponent_div_5_Template_button_keydown_enter_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.clearSearch()); });
+    i0.ɵɵelement(2, "po-icon", 8);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    const _r2 = i0.ɵɵreference(5);
-    i0.ɵɵproperty("tabindex", !ctx_r3.disabled ? 0 : -1);
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("p-element-ref", _r2);
+    i0.ɵɵproperty("ariaLabel", ctx_r1.literals.clean);
 } }
-const poSearchLiteralsDefault = {
-    en: { search: 'Search' },
-    es: { search: 'Buscar' },
-    pt: { search: 'Pesquisar' },
-    ru: { search: 'Поиск' }
-};
+/**
+ * @docsExtends PoSearchBaseComponent
+ *
+ * @example
+ *
+ * <example name="po-search-basic" title="PO Search Basic">
+ *  <file name="sample-po-search-basic/sample-po-search-basic.component.html"> </file>
+ *  <file name="sample-po-search-basic/sample-po-search-basic.component.ts"> </file>
+ * </example>
+ *
+ * <example name="po-search-labs" title="PO Search Labs">
+ *  <file name="sample-po-search-labs/sample-po-search-labs.component.html"> </file>
+ *  <file name="sample-po-search-labs/sample-po-search-labs.component.ts"> </file>
+ *  <file name="sample-po-search-labs/sample-po-search-labs.service.ts"> </file>
+ * </example>
+ *
+ * <example name="po-search-find-people" title="PO Search Find People">
+ *  <file name="sample-po-search-find-people/sample-po-search-find-people.component.html"> </file>
+ *  <file name="sample-po-search-find-people/sample-po-search-find-people.component.ts"> </file>
+ *  <file name="sample-po-search-find-people/sample-po-search-find-people.service.ts"> </file>
+ * </example>
+ *
+ */
 class PoSearchComponent extends PoSearchBaseComponent {
     languageService;
     renderer;
     poSearchInput;
     filteredItems = [];
-    literals;
     constructor(languageService, renderer) {
-        super();
+        super(languageService);
         this.languageService = languageService;
         this.renderer = renderer;
     }
     ngOnInit() {
-        this.literals = {
-            ...poSearchLiteralsDefault[this.languageService?.getLanguageDefault()],
-            ...poSearchLiteralsDefault[this.languageService?.getShortLanguage()]
-        };
         this.filteredItems = this.items;
     }
     clearSearch() {
         this.poSearchInput.nativeElement.value = '';
         this.onSearchChange('');
         this.filteredItemsChange.emit(this.items);
+        this.poSearchInput.nativeElement.focus();
     }
     onBlur() {
         this.renderer.removeClass(this.poSearchInput.nativeElement.parentElement, 'po-search-focused');
@@ -37981,13 +38270,13 @@ class PoSearchComponent extends PoSearchBaseComponent {
                     value = value != null ? value.toString() : null;
                 }
                 value = value != null ? value.toLowerCase() : null;
-                if (this.filterType === PoFilterMode.startsWith) {
+                if (this.filterType === PoSearchFilterMode.startsWith) {
                     return value != null && value.startsWith(searchText);
                 }
-                else if (this.filterType === PoFilterMode.contains) {
+                else if (this.filterType === PoSearchFilterMode.contains) {
                     return value != null && value.includes(searchText);
                 }
-                else if (this.filterType === PoFilterMode.endsWith) {
+                else if (this.filterType === PoSearchFilterMode.endsWith) {
                     return value != null && value.endsWith(searchText);
                 }
                 return false;
@@ -37998,6 +38287,7 @@ class PoSearchComponent extends PoSearchBaseComponent {
             this.filteredItems = [];
             this.filteredItemsChange.emit(this.filteredItems);
         }
+        this.changeModel.emit(searchText);
     }
     static ɵfac = function PoSearchComponent_Factory(t) { return new (t || PoSearchComponent)(i0.ɵɵdirectiveInject(PoLanguageService), i0.ɵɵdirectiveInject(i0.Renderer2)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoSearchComponent, selectors: [["po-search"]], viewQuery: function PoSearchComponent_Query(rf, ctx) { if (rf & 1) {
@@ -38005,31 +38295,30 @@ class PoSearchComponent extends PoSearchBaseComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.poSearchInput = _t.first);
-        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 7, vars: 5, consts: [[1, "po-search"], [1, "po-search-icon"], ["p-icon", "po-icon-search", 4, "ngIf"], ["p-size", "sm", 4, "ngIf"], ["type", "text", 3, "disabled", "placeholder", "blur", "focus", "input"], ["poSearchInput", ""], ["class", "po-search-clean", 3, "tabindex", 4, "ngIf"], ["p-icon", "po-icon-search"], ["p-size", "sm"], [1, "po-search-clean", 3, "tabindex"], [3, "p-element-ref", "p-change-event"]], template: function PoSearchComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 6, vars: 9, consts: [[1, "po-search"], [1, "po-search-icon"], [3, "p-icon"], ["type", "text", 1, "po-search-input", 3, "ariaLabel", "disabled", "placeholder", "blur", "focus", "input"], ["poSearchInput", ""], ["class", "po-search-container-clean", 4, "ngIf"], [1, "po-search-container-clean"], [1, "po-search-clean", 3, "ariaLabel", "click", "keydown.enter"], ["p-icon", "po-icon-clear-content"]], template: function PoSearchComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-            i0.ɵɵtemplate(2, PoSearchComponent_po_icon_2_Template, 1, 0, "po-icon", 2);
-            i0.ɵɵtemplate(3, PoSearchComponent_po_loading_icon_3_Template, 1, 0, "po-loading-icon", 3);
+            i0.ɵɵelement(2, "po-icon", 2);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "input", 4, 5);
-            i0.ɵɵlistener("blur", function PoSearchComponent_Template_input_blur_4_listener() { return ctx.onBlur(); })("focus", function PoSearchComponent_Template_input_focus_4_listener() { return ctx.onFocus(); })("input", function PoSearchComponent_Template_input_input_4_listener($event) { return ctx.onSearchChange($event.target.value); });
+            i0.ɵɵelementStart(3, "input", 3, 4);
+            i0.ɵɵlistener("blur", function PoSearchComponent_Template_input_blur_3_listener() { return ctx.onBlur(); })("focus", function PoSearchComponent_Template_input_focus_3_listener() { return ctx.onFocus(); })("input", function PoSearchComponent_Template_input_input_3_listener($event) { return ctx.onSearchChange($event.target.value); });
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(6, PoSearchComponent_div_6_Template, 2, 2, "div", 6);
+            i0.ɵɵtemplate(5, PoSearchComponent_div_5_Template, 3, 1, "div", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            const _r2 = i0.ɵɵreference(5);
+            const _r0 = i0.ɵɵreference(4);
+            i0.ɵɵclassProp("po-search-disabled", ctx.disabled);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", !ctx.loading);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.loading);
+            i0.ɵɵproperty("p-icon", ctx.icon ? ctx.icon : "po-icon-search");
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("disabled", ctx.disabled)("placeholder", ctx.literals.search);
+            i0.ɵɵclassProp("po-search-icon-right", !!_r0.value && !ctx.disabled);
+            i0.ɵɵproperty("ariaLabel", ctx.ariaLabel)("disabled", ctx.disabled)("placeholder", ctx.literals.search);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", !!_r2.value && !ctx.disabled);
-        } }, dependencies: [i1.NgIf, PoCleanComponent, PoIconComponent, PoLoadingIconComponent], encapsulation: 2 });
+            i0.ɵɵproperty("ngIf", !!_r0.value && !ctx.disabled);
+        } }, dependencies: [i1.NgIf, PoIconComponent], encapsulation: 2 });
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoSearchComponent, [{
         type: Component,
-        args: [{ selector: 'po-search', template: "<div class=\"po-search\">\n  <div class=\"po-search-icon\">\n    <po-icon *ngIf=\"!loading\" p-icon=\"po-icon-search\"></po-icon>\n    <po-loading-icon *ngIf=\"loading\" p-size=\"sm\"></po-loading-icon>\n  </div>\n\n  <input\n    #poSearchInput\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"literals.search\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n    (input)=\"onSearchChange($event.target.value)\"\n  />\n\n  <div *ngIf=\"!!poSearchInput.value && !disabled\" class=\"po-search-clean\" [tabindex]=\"!disabled ? 0 : -1\">\n    <po-clean [p-element-ref]=\"poSearchInput\" (p-change-event)=\"clearSearch()\"></po-clean>\n  </div>\n</div>\n" }]
+        args: [{ selector: 'po-search', template: "<div class=\"po-search\" [class.po-search-disabled]=\"disabled\">\n  <div class=\"po-search-icon\">\n    <po-icon [p-icon]=\"icon ? icon : 'po-icon-search'\"></po-icon>\n  </div>\n\n  <input\n    #poSearchInput\n    type=\"text\"\n    class=\"po-search-input\"\n    [ariaLabel]=\"ariaLabel\"\n    [class.po-search-icon-right]=\"!!poSearchInput.value && !disabled\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"literals.search\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n    (input)=\"onSearchChange($event.target.value)\"\n  />\n\n  <div *ngIf=\"!!poSearchInput.value && !disabled\" class=\"po-search-container-clean\">\n    <button\n      class=\"po-search-clean\"\n      [ariaLabel]=\"literals.clean\"\n      (click)=\"clearSearch()\"\n      (keydown.enter)=\"clearSearch()\"\n    >\n      <po-icon p-icon=\"po-icon-clear-content\"></po-icon>\n    </button>\n  </div>\n</div>\n" }]
     }], function () { return [{ type: PoLanguageService }, { type: i0.Renderer2 }]; }, { poSearchInput: [{
             type: ViewChild,
             args: ['poSearchInput', { read: ElementRef, static: true }]
@@ -53501,5 +53790,5 @@ function initializeLanguageDefault(config, languageService) {
  * Generated bundle index. Do not edit.
  */
 
-export { ForceBooleanComponentEnum, ForceOptionComponentEnum, I18N_CONFIG, InputBoolean, InputRequired, PO_CONTROL_POSITIONS, PoAccordionComponent, PoAccordionItemComponent, PoAccordionModule, PoActiveOverlayModule, PoActiveOverlayService, PoAvatarComponent, PoAvatarModule, PoBreadcrumbComponent, PoBreadcrumbModule, PoButtonComponent, PoButtonGroupComponent, PoButtonGroupModule, PoButtonGroupToggle, PoButtonModule, PoCalendarComponent, PoCalendarMode, PoCalendarModule, PoChartComponent, PoChartModule, PoChartType, PoCheckboxComponent, PoCheckboxGroupComponent, PoCheckboxGroupModule, PoCheckboxModule, PoCheckboxSize, PoCleanComponent, PoCleanModule, PoColorPaletteModule, PoColorPaletteService, PoComboComponent, PoComboFilterMode, PoComboOptionTemplateDirective, PoComponentInjectorModule, PoComponentInjectorService, PoComponentsModule, PoContainerComponent, PoContainerModule, PoControlPositionModule, PoDateService, PoDateTimeModule, PoDatepickerComponent, PoDatepickerIsoFormat, PoDatepickerModule, PoDatepickerRangeComponent, PoDecimalComponent, PoDialogComponent, PoDialogModule, PoDialogService, PoDialogType, PoDirectivesModule, PoDisclaimerComponent, PoDisclaimerGroupComponent, PoDisclaimerGroupModule, PoDisclaimerModule, PoDividerComponent, PoDividerModule, PoDividerSize, PoDropdownComponent, PoDropdownModule, PoDynamicFieldType, PoDynamicFormComponent, PoDynamicModule, PoDynamicViewComponent, PoEmailComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoFieldContainerModule, PoFieldModule, PoFilterMode, PoGaugeComponent, PoGaugeModule, PoGridComponent, PoGridModule, PoGuardsModule, PoHttpInterceptorModule, PoHttpInterceptorService, PoHttpRequestInterceptorService, PoHttpRequestModule, PoI18nModule, PoI18nPipe, PoI18nService, PoIconComponent, PoIconModule, PoImageComponent, PoImageModule, PoInfoComponent, PoInfoModule, PoInfoOrientation, PoInputComponent, PoInterceptorsModule, PoItemListComponent, PoLabelComponent, PoLabelModule, PoLanguageModule, PoLanguageService, PoLinkComponent, PoLinkModule, PoListBoxComponent, PoListBoxModule, PoListViewComponent, PoListViewContentTemplateDirective, PoListViewDetailTemplateDirective, PoListViewModule, PoLoadingComponent, PoLoadingIconComponent, PoLoadingModule, PoLoadingOverlayComponent, PoLoginComponent, PoLogoComponent, PoLogoModule, PoLookupComponent, PoLookupModalComponent, PoMenuComponent, PoMenuGlobalService, PoMenuHeaderTemplateDirective, PoMenuModule, PoMenuPanelComponent, PoMenuPanelModule, PoModalComponent, PoModalFooterComponent, PoModalModule, PoModule, PoMultiselectComponent, PoMultiselectFilterMode, PoMultiselectOptionTemplateDirective, PoNavbarComponent, PoNavbarModule, PoNotificationModule, PoNotificationService, PoNumberComponent, PoOverlayComponent, PoOverlayModule, PoPageDefaultComponent, PoPageDetailComponent, PoPageEditComponent, PoPageListComponent, PoPageModule, PoPageSlideComponent, PoPageSlideModule, PoPasswordComponent, PoPipesModule, PoPopoverComponent, PoPopoverModule, PoPopupComponent, PoPopupModule, PoProgressComponent, PoProgressModule, PoProgressStatus, PoRadioComponent, PoRadioGroupComponent, PoRadioGroupModule, PoRadioModule, PoRichTextComponent, PoSearchComponent, PoSearchListComponent, PoSearchModule, PoSelectComponent, PoServicesModule, PoSlideComponent, PoSlideContentTemplateDirective, PoSlideModule, PoStepComponent, PoStepperComponent, PoStepperModule, PoStepperOrientation, PoStepperStatus, PoSwitchComponent, PoSwitchLabelPosition, PoSwitchModule, PoTabComponent, PoTableCellTemplateDirective, PoTableColumnFrozenDirective, PoTableColumnSortType, PoTableColumnSpacing, PoTableColumnTemplateDirective, PoTableComponent, PoTableModule, PoTableRowTemplateArrowDirection, PoTableRowTemplateDirective, PoTabsComponent, PoTabsModule, PoTagComponent, PoTagModule, PoTagOrientation, PoTagType, PoTextareaComponent, PoTimeModule, PoTimePipe, PoToasterOrientation, PoToasterType, PoToolbarComponent, PoToolbarModule, PoTooltipDirective, PoTooltipModule, PoTreeViewComponent, PoTreeViewModule, PoUploadComponent, PoUploadFile, PoUploadStatus, PoUrlComponent, PoWidgetComponent, PoWidgetModule, initializeLanguageDefault, poBreadcrumbLiterals, poDialogAlertLiteralsDefault, poDialogConfirmLiteralsDefault, poLanguageDefault, poLocaleDateSeparatorList, poLocaleDecimalSeparatorList, poLocaleDefault, poLocaleThousandSeparatorList, poLocales, poSearchLiteralsDefault, poTabsLiterals, returnPoI18nService };
+export { ForceBooleanComponentEnum, ForceOptionComponentEnum, I18N_CONFIG, InputBoolean, InputRequired, PO_CONTROL_POSITIONS, PoAccordionComponent, PoAccordionItemComponent, PoAccordionModule, PoActiveOverlayModule, PoActiveOverlayService, PoAvatarComponent, PoAvatarModule, PoBreadcrumbComponent, PoBreadcrumbModule, PoButtonComponent, PoButtonGroupComponent, PoButtonGroupModule, PoButtonGroupToggle, PoButtonModule, PoCalendarComponent, PoCalendarMode, PoCalendarModule, PoChartComponent, PoChartModule, PoChartType, PoCheckboxComponent, PoCheckboxGroupComponent, PoCheckboxGroupModule, PoCheckboxModule, PoCheckboxSize, PoCleanComponent, PoCleanModule, PoColorPaletteModule, PoColorPaletteService, PoComboComponent, PoComboFilterMode, PoComboOptionTemplateDirective, PoComponentInjectorModule, PoComponentInjectorService, PoComponentsModule, PoContainerComponent, PoContainerModule, PoControlPositionModule, PoDateService, PoDateTimeModule, PoDatepickerComponent, PoDatepickerIsoFormat, PoDatepickerModule, PoDatepickerRangeComponent, PoDecimalComponent, PoDialogComponent, PoDialogModule, PoDialogService, PoDialogType, PoDirectivesModule, PoDisclaimerComponent, PoDisclaimerGroupComponent, PoDisclaimerGroupModule, PoDisclaimerModule, PoDividerComponent, PoDividerModule, PoDividerSize, PoDropdownComponent, PoDropdownModule, PoDynamicFieldType, PoDynamicFormComponent, PoDynamicModule, PoDynamicViewComponent, PoEmailComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoFieldContainerModule, PoFieldModule, PoGaugeComponent, PoGaugeModule, PoGridComponent, PoGridModule, PoGuardsModule, PoHttpInterceptorModule, PoHttpInterceptorService, PoHttpRequestInterceptorService, PoHttpRequestModule, PoI18nModule, PoI18nPipe, PoI18nService, PoIconComponent, PoIconModule, PoImageComponent, PoImageModule, PoInfoComponent, PoInfoModule, PoInfoOrientation, PoInputComponent, PoInterceptorsModule, PoItemListComponent, PoLabelComponent, PoLabelModule, PoLanguageModule, PoLanguageService, PoLinkComponent, PoLinkModule, PoListBoxComponent, PoListBoxModule, PoListViewComponent, PoListViewContentTemplateDirective, PoListViewDetailTemplateDirective, PoListViewModule, PoLoadingComponent, PoLoadingIconComponent, PoLoadingModule, PoLoadingOverlayComponent, PoLoginComponent, PoLogoComponent, PoLogoModule, PoLookupComponent, PoLookupModalComponent, PoMenuComponent, PoMenuGlobalService, PoMenuHeaderTemplateDirective, PoMenuModule, PoMenuPanelComponent, PoMenuPanelModule, PoModalComponent, PoModalFooterComponent, PoModalModule, PoModule, PoMultiselectComponent, PoMultiselectFilterMode, PoMultiselectOptionTemplateDirective, PoNavbarComponent, PoNavbarModule, PoNotificationModule, PoNotificationService, PoNumberComponent, PoOverlayComponent, PoOverlayModule, PoPageDefaultComponent, PoPageDetailComponent, PoPageEditComponent, PoPageListComponent, PoPageModule, PoPageSlideComponent, PoPageSlideModule, PoPasswordComponent, PoPipesModule, PoPopoverComponent, PoPopoverModule, PoPopupComponent, PoPopupModule, PoProgressComponent, PoProgressModule, PoProgressSize, PoProgressStatus, PoRadioComponent, PoRadioGroupComponent, PoRadioGroupModule, PoRadioModule, PoRichTextComponent, PoSearchComponent, PoSearchFilterMode, PoSearchListComponent, PoSearchModule, PoSelectComponent, PoServicesModule, PoSlideComponent, PoSlideContentTemplateDirective, PoSlideModule, PoStepComponent, PoStepperComponent, PoStepperModule, PoStepperOrientation, PoStepperStatus, PoSwitchComponent, PoSwitchLabelPosition, PoSwitchModule, PoTabComponent, PoTableCellTemplateDirective, PoTableColumnFrozenDirective, PoTableColumnSortType, PoTableColumnSpacing, PoTableColumnTemplateDirective, PoTableComponent, PoTableModule, PoTableRowTemplateArrowDirection, PoTableRowTemplateDirective, PoTabsComponent, PoTabsModule, PoTagComponent, PoTagModule, PoTagOrientation, PoTagType, PoTextareaComponent, PoTimeModule, PoTimePipe, PoToasterOrientation, PoToasterType, PoToolbarComponent, PoToolbarModule, PoTooltipDirective, PoTooltipModule, PoTreeViewComponent, PoTreeViewModule, PoUploadComponent, PoUploadFile, PoUploadStatus, PoUrlComponent, PoWidgetComponent, PoWidgetModule, initializeLanguageDefault, poBreadcrumbLiterals, poDialogAlertLiteralsDefault, poDialogConfirmLiteralsDefault, poLanguageDefault, poLocaleDateSeparatorList, poLocaleDecimalSeparatorList, poLocaleDefault, poLocaleThousandSeparatorList, poLocales, poTabsLiterals, returnPoI18nService };
 //# sourceMappingURL=po-ui-ng-components.mjs.map