@po-ui/ng-components 16.4.1 → 16.6.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, EventEmitter, Output, Injectable, ElementRef, HostListener, ViewChild, ContentChildren, HostBinding, forwardRef, ViewChildren, 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, ContentChildren, HostBinding, forwardRef, ViewChildren, ViewContainerRef, ContentChild, Pipe, inject, 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';
@@ -305,6 +305,25 @@ var PoTagType;
     PoTagType["Neutral"] = "neutral";
 })(PoTagType || (PoTagType = {}));
 
+/**
+ * @docsPrivate
+ *
+ * @description
+ *
+ * Define os ícones disponíveis para o `po-tag`.
+ */
+var PoTagIcon;
+(function (PoTagIcon) {
+    /** Ícone fechar. */
+    PoTagIcon["Danger"] = "po-icon-close";
+    /** Ícone de informação. */
+    PoTagIcon["Info"] = "po-icon-info";
+    /** Ícone que representa confirmação. */
+    PoTagIcon["Success"] = "po-icon-ok";
+    /** Ícone com ponto de exclamação. */
+    PoTagIcon["Warning"] = "po-icon-warning";
+})(PoTagIcon || (PoTagIcon = {}));
+
 /**
  * @docsPrivate
  *
@@ -1013,8 +1032,170 @@ function sortArrayOfObjects(items, key, isAscendingOrder) {
     }
 }
 
+const poDefaultLanguage = 'PO_DEFAULT_LANGUAGE';
+const poLocaleKey = 'PO_USER_LOCALE';
+/**
+ * @docsPrivate
+ *
+ * @description
+ *
+ * Serviço responsável por gerenciar as linguagens da aplicação.
+ */
+class PoLanguageService {
+    constructor() { }
+    set languageDefault(language) {
+        if (language && isLanguage(language)) {
+            localStorage.setItem(poDefaultLanguage, language);
+        }
+    }
+    get languageDefault() {
+        return localStorage.getItem(poDefaultLanguage);
+    }
+    /**
+     * @description
+     *
+     * Método responsável por retornar o idioma ativo.
+     *
+     * A busca do idioma será feita na seguinte ordem:
+     *
+     *   1 - o idioma que foi armazenado no *localStorage*, através do método `setLanguage()` utilizado pelo i18n.
+     *
+     *   2 - o valor inserido nas configurações do módulo do i18n através do parâmetro `config`, sendo o idioma inserido
+     * na propriedade `language` da interface `PoI18nConfigDefault`.
+     *
+     *   3 - o idioma do navegador utilizado.
+     *
+     * > Caso o idioma do navegador não seja suportado pelo PO (`pt`, `en`, `es` ou `ru`), será retornado valor `pt`.
+     *
+     * **Retorno:** `string` com a sigla do idioma ativo.
+     */
+    getLanguage() {
+        const language = localStorage.getItem(poLocaleKey) || this.languageDefault || getBrowserLanguage();
+        return language && language.toLowerCase();
+    }
+    /**
+     * @description
+     *
+     * Método responsável por retornar o idioma *default* da aplicação definido nas configurações do módulo do i18n através
+     * do parâmetro `config`.
+     *
+     * **Retorno:** `string` com a sigla do idioma *default*.
+     */
+    getLanguageDefault() {
+        return this.languageDefault;
+    }
+    /**
+     * @description
+     *
+     * Método responsável por retornar a abreviação do idioma ativo na aplicação.
+     *
+     * @default `pt`
+     *
+     * **Retorno:** `string` com a sigla abreviada do idioma ativo.
+     */
+    getShortLanguage() {
+        const language = this.getLanguage();
+        const shortLanguage = getShortLanguage(language);
+        return poLocales.includes(shortLanguage) ? shortLanguage : poLocaleDefault;
+    }
+    /**
+     * @description
+     *
+     * Método para salvar o idioma da aplicação no *storage*, utilizado pelo serviço do i18n.
+     *
+     * > Ao definir um idioma por este método, todos os módulos da aplicação utilizarão o idioma definido.
+     *
+     * @param language sigla do idioma.
+     *
+     * Esta sigla deve ser composta por duas letras representando o idioma,
+     * podendo ser adicionado outras duas letras representando o país, por exemplo: `pt`, `pt-BR`, `pt-br`, `en` ou `en-US`.
+     *
+     * > Caso seja informado um valor diferente deste padrão, o mesmo será ignorado.
+     */
+    setLanguage(language) {
+        if (!isLanguage(language)) {
+            return;
+        }
+        localStorage.setItem(poLocaleKey, language.toLowerCase());
+    }
+    /**
+     * @description
+     *
+     * Método que define o idioma configurado a partir do parâmetro `config` utilizado pelo módulo do i18n.
+     *
+     * > Ao definir um idioma por este serviço, apenas o módulo do i18n referente a esta configuração utilizará o idioma definido.
+     *
+     * @param language sigla do idioma.
+     *
+     * Esta sigla deve ser composta por duas letras representando o idioma,
+     * podendo ser adicionado outras duas letras representando o país, por exemplo: `pt`, `pt-BR`, `pt-br`, `en` ou `en-US`.
+     *
+     * > Caso seja informado um valor diferente deste padrão, o mesmo será ignorado.
+     */
+    setLanguageDefault(language) {
+        this.languageDefault = language;
+    }
+    /**
+     * @description
+     *
+     * Método que retorna o separador
+     *
+     * @param language sigla do idioma.
+     *
+     * Esta sigla deve ser composta por duas letras representando o idioma
+     *
+     * > Caso seja informado um valor diferente deste padrão, o mesmo será ignorado.
+     */
+    getNumberSeparators(language) {
+        language = language || this.getShortLanguage();
+        const decimal = poLocaleDecimalSeparatorList.find(separator => separator.language === language) ?? {};
+        const thousand = poLocaleThousandSeparatorList.find(separator => separator.language === language) ?? {};
+        const decimalSeparator = decimal.separator ?? ',';
+        const thousandSeparator = thousand.separator ?? '.';
+        return { decimalSeparator, thousandSeparator };
+    }
+    /**
+     * @description
+     *
+     * Método que retorna o separador de datas
+     *
+     * @param language sigla do idioma.
+     *
+     * Esta sigla deve ser composta por duas letras representando o idioma
+     *
+     * > Caso seja informado um valor diferente deste padrão, o mesmo será ignorado.
+     */
+    getDateSeparator(language) {
+        language = language || this.getShortLanguage();
+        const separatorChar = poLocaleDateSeparatorList.find(separator => separator.locale === language) ?? {};
+        return separatorChar.separator ?? '/';
+    }
+    static ɵfac = function PoLanguageService_Factory(t) { return new (t || PoLanguageService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PoLanguageService, factory: PoLanguageService.ɵfac, providedIn: 'root' });
+}
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoLanguageService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], function () { return []; }, null); })();
+
 const poTagColors = Object.values(PoColorPaletteEnum);
 const poTagOrientationDefault = PoTagOrientation.Vertical;
+const PoTagLiteralsDefault = {
+    en: {
+        remove: 'Clear'
+    },
+    es: {
+        remove: 'Eliminar'
+    },
+    pt: {
+        remove: 'Remover'
+    },
+    ru: {
+        remove: 'удалять'
+    }
+};
 /**
  * @description
  *
@@ -1090,6 +1271,8 @@ class PoTagBaseComponent {
     _inverse;
     _orientation = poTagOrientationDefault;
     _type;
+    _literals;
+    language;
     /**
      * @optional
      *
@@ -1271,12 +1454,57 @@ class PoTagBaseComponent {
     get type() {
         return this._type;
     }
-    static ɵfac = function PoTagBaseComponent_Factory(t) { return new (t || PoTagBaseComponent)(); };
-    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoTagBaseComponent, inputs: { label: ["p-label", "label"], removable: ["p-removable", "removable", convertToBoolean], disabled: ["p-disabled", "disabled", convertToBoolean], value: ["p-value", "value"], color: ["p-color", "color"], textColor: ["p-text-color", "textColor"], icon: ["p-icon", "icon"], inverse: ["p-inverse", "inverse"], orientation: ["p-orientation", "orientation"], type: ["p-type", "type"] }, outputs: { click: "p-click", remove: "p-close" }, features: [i0.ɵɵInputTransformsFeature] });
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Objeto com as literais usadas no `po-tag`.
+     *
+     *
+     * Para utilizar, basta passar a literal customizada:
+     *
+     * ```
+     *  const customLiterals: PoTagLiterals = {
+     *    remove: 'Remover itens'
+     *  };
+     * ```
+     *
+     * E para carregar as literais customizadas, basta apenas passar o objeto para o componente:
+     *
+     * ```
+     * <po-tag
+     *   [p-literals]="customLiterals">
+     * </po-tag>
+     * ```
+     *
+     * > 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 = {
+                ...PoTagLiteralsDefault[poLocaleDefault],
+                ...PoTagLiteralsDefault[this.language],
+                ...value
+            };
+        }
+        else {
+            this._literals = PoTagLiteralsDefault[this.language];
+        }
+    }
+    get literals() {
+        return this._literals || PoTagLiteralsDefault[this.language];
+    }
+    constructor(languageService) {
+        this.language = languageService.getShortLanguage();
+    }
+    static ɵfac = function PoTagBaseComponent_Factory(t) { return new (t || PoTagBaseComponent)(i0.ɵɵdirectiveInject(PoLanguageService)); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoTagBaseComponent, inputs: { label: ["p-label", "label"], removable: ["p-removable", "removable", convertToBoolean], disabled: ["p-disabled", "disabled", convertToBoolean], value: ["p-value", "value"], color: ["p-color", "color"], textColor: ["p-text-color", "textColor"], icon: ["p-icon", "icon"], inverse: ["p-inverse", "inverse"], orientation: ["p-orientation", "orientation"], type: ["p-type", "type"], literals: ["p-literals", "literals"] }, outputs: { click: "p-click", remove: "p-close" }, features: [i0.ɵɵInputTransformsFeature] });
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTagBaseComponent, [{
         type: Directive
-    }], null, { label: [{
+    }], function () { return [{ type: PoLanguageService }]; }, { label: [{
             type: Input,
             args: ['p-label']
         }], removable: [{
@@ -1312,190 +1540,11 @@ class PoTagBaseComponent {
         }], type: [{
             type: Input,
             args: ['p-type']
+        }], literals: [{
+            type: Input,
+            args: ['p-literals']
         }] }); })();
 
-/**
- * @docsPrivate
- *
- * @description
- *
- * Define os ícones disponíveis para o `po-tag`.
- */
-var PoTagIcon;
-(function (PoTagIcon) {
-    /** Ícone fechar. */
-    PoTagIcon["Danger"] = "po-icon-close";
-    /** Ícone de informação. */
-    PoTagIcon["Info"] = "po-icon-info";
-    /** Ícone que representa confirmação. */
-    PoTagIcon["Success"] = "po-icon-ok";
-    /** Ícone com ponto de exclamação. */
-    PoTagIcon["Warning"] = "po-icon-warning";
-})(PoTagIcon || (PoTagIcon = {}));
-
-const PoTagLiterals = {
-    en: {
-        remove: 'Remove'
-    },
-    es: {
-        remove: 'Eliminar'
-    },
-    pt: {
-        remove: 'Remover'
-    },
-    ru: {
-        remove: 'удалять'
-    }
-};
-
-const poDefaultLanguage = 'PO_DEFAULT_LANGUAGE';
-const poLocaleKey = 'PO_USER_LOCALE';
-/**
- * @docsPrivate
- *
- * @description
- *
- * Serviço responsável por gerenciar as linguagens da aplicação.
- */
-class PoLanguageService {
-    constructor() { }
-    set languageDefault(language) {
-        if (language && isLanguage(language)) {
-            localStorage.setItem(poDefaultLanguage, language);
-        }
-    }
-    get languageDefault() {
-        return localStorage.getItem(poDefaultLanguage);
-    }
-    /**
-     * @description
-     *
-     * Método responsável por retornar o idioma ativo.
-     *
-     * A busca do idioma será feita na seguinte ordem:
-     *
-     *   1 - o idioma que foi armazenado no *localStorage*, através do método `setLanguage()` utilizado pelo i18n.
-     *
-     *   2 - o valor inserido nas configurações do módulo do i18n através do parâmetro `config`, sendo o idioma inserido
-     * na propriedade `language` da interface `PoI18nConfigDefault`.
-     *
-     *   3 - o idioma do navegador utilizado.
-     *
-     * > Caso o idioma do navegador não seja suportado pelo PO (`pt`, `en`, `es` ou `ru`), será retornado valor `pt`.
-     *
-     * **Retorno:** `string` com a sigla do idioma ativo.
-     */
-    getLanguage() {
-        const language = localStorage.getItem(poLocaleKey) || this.languageDefault || getBrowserLanguage();
-        return language && language.toLowerCase();
-    }
-    /**
-     * @description
-     *
-     * Método responsável por retornar o idioma *default* da aplicação definido nas configurações do módulo do i18n através
-     * do parâmetro `config`.
-     *
-     * **Retorno:** `string` com a sigla do idioma *default*.
-     */
-    getLanguageDefault() {
-        return this.languageDefault;
-    }
-    /**
-     * @description
-     *
-     * Método responsável por retornar a abreviação do idioma ativo na aplicação.
-     *
-     * @default `pt`
-     *
-     * **Retorno:** `string` com a sigla abreviada do idioma ativo.
-     */
-    getShortLanguage() {
-        const language = this.getLanguage();
-        const shortLanguage = getShortLanguage(language);
-        return poLocales.includes(shortLanguage) ? shortLanguage : poLocaleDefault;
-    }
-    /**
-     * @description
-     *
-     * Método para salvar o idioma da aplicação no *storage*, utilizado pelo serviço do i18n.
-     *
-     * > Ao definir um idioma por este método, todos os módulos da aplicação utilizarão o idioma definido.
-     *
-     * @param language sigla do idioma.
-     *
-     * Esta sigla deve ser composta por duas letras representando o idioma,
-     * podendo ser adicionado outras duas letras representando o país, por exemplo: `pt`, `pt-BR`, `pt-br`, `en` ou `en-US`.
-     *
-     * > Caso seja informado um valor diferente deste padrão, o mesmo será ignorado.
-     */
-    setLanguage(language) {
-        if (!isLanguage(language)) {
-            return;
-        }
-        localStorage.setItem(poLocaleKey, language.toLowerCase());
-    }
-    /**
-     * @description
-     *
-     * Método que define o idioma configurado a partir do parâmetro `config` utilizado pelo módulo do i18n.
-     *
-     * > Ao definir um idioma por este serviço, apenas o módulo do i18n referente a esta configuração utilizará o idioma definido.
-     *
-     * @param language sigla do idioma.
-     *
-     * Esta sigla deve ser composta por duas letras representando o idioma,
-     * podendo ser adicionado outras duas letras representando o país, por exemplo: `pt`, `pt-BR`, `pt-br`, `en` ou `en-US`.
-     *
-     * > Caso seja informado um valor diferente deste padrão, o mesmo será ignorado.
-     */
-    setLanguageDefault(language) {
-        this.languageDefault = language;
-    }
-    /**
-     * @description
-     *
-     * Método que retorna o separador
-     *
-     * @param language sigla do idioma.
-     *
-     * Esta sigla deve ser composta por duas letras representando o idioma
-     *
-     * > Caso seja informado um valor diferente deste padrão, o mesmo será ignorado.
-     */
-    getNumberSeparators(language) {
-        language = language || this.getShortLanguage();
-        const decimal = poLocaleDecimalSeparatorList.find(separator => separator.language === language) ?? {};
-        const thousand = poLocaleThousandSeparatorList.find(separator => separator.language === language) ?? {};
-        const decimalSeparator = decimal.separator ?? ',';
-        const thousandSeparator = thousand.separator ?? '.';
-        return { decimalSeparator, thousandSeparator };
-    }
-    /**
-     * @description
-     *
-     * Método que retorna o separador de datas
-     *
-     * @param language sigla do idioma.
-     *
-     * Esta sigla deve ser composta por duas letras representando o idioma
-     *
-     * > Caso seja informado um valor diferente deste padrão, o mesmo será ignorado.
-     */
-    getDateSeparator(language) {
-        language = language || this.getShortLanguage();
-        const separatorChar = poLocaleDateSeparatorList.find(separator => separator.locale === language) ?? {};
-        return separatorChar.separator ?? '/';
-    }
-    static ɵfac = function PoLanguageService_Factory(t) { return new (t || PoLanguageService)(); };
-    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PoLanguageService, factory: PoLanguageService.ɵfac, providedIn: 'root' });
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoLanguageService, [{
-        type: Injectable,
-        args: [{
-                providedIn: 'root'
-            }]
-    }], function () { return []; }, null); })();
-
 // Array de posições.
 const PO_CONTROL_POSITIONS = [
     'right',
@@ -2195,33 +2244,35 @@ class PoTooltipDirective extends PoTooltipBaseDirective {
             args: ['keydown', ['$event']]
         }] }); })();
 
-const _c0$1E = ["tagContainer"];
-function PoTagComponent_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 9)(1, "span", 10);
+const _c0$1D = ["tagContainer"];
+const _c1$F = ["tagClose"];
+const _c2$h = ["poTag"];
+function PoTagComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10)(1, "span", 11);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.tagOrientation ? ctx_r1.label + ":" : ctx_r1.label);
+    i0.ɵɵtextInterpolate(ctx_r0.tagOrientation ? ctx_r0.label + ":" : ctx_r0.label);
 } }
-const _c1$F = function (a0) { return { "color": a0 }; };
+const _c3$d = function (a0) { return { "color": a0 }; };
 function PoTagComponent_po_icon_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "po-icon", 11);
+    i0.ɵɵelement(0, "po-icon", 12);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("p-icon", !ctx_r2.type ? ctx_r2.icon : ctx_r2.iconFromType)("ngStyle", !ctx_r2.tagColor && ctx_r2.inverse && !ctx_r2.customTextColor ? i0.ɵɵpureFunction1(2, _c1$F, ctx_r2.customColor) : !ctx_r2.type && ctx_r2.customTextColor ? i0.ɵɵpureFunction1(4, _c1$F, ctx_r2.customTextColor) : "");
+    i0.ɵɵproperty("p-icon", !ctx_r2.type ? ctx_r2.icon : ctx_r2.iconFromType)("ngStyle", !ctx_r2.tagColor && ctx_r2.inverse && !ctx_r2.customTextColor ? i0.ɵɵpureFunction1(2, _c3$d, ctx_r2.customColor) : !ctx_r2.type && ctx_r2.customTextColor ? i0.ɵɵpureFunction1(4, _c3$d, ctx_r2.customTextColor) : "");
 } }
-function PoTagComponent_span_9_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 12);
-    i0.ɵɵlistener("click", function PoTagComponent_span_9_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onClose()); })("keydown.enter", function PoTagComponent_span_9_Template_span_keydown_enter_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.onClose()); });
+function PoTagComponent_span_10_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 13, 14);
+    i0.ɵɵlistener("click", function PoTagComponent_span_10_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.onClose()); })("keydown.enter", function PoTagComponent_span_10_Template_span_keydown_enter_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.onClose("enter")); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("po-clickable", !ctx_r3.disabled);
-    i0.ɵɵproperty("tabindex", !ctx_r3.disabled ? 0 : -1);
-    i0.ɵɵattribute("aria-label", ctx_r3.setAriaLabel())("role", !ctx_r3.disabled ? "button" : "");
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("po-clickable", !ctx_r4.disabled);
+    i0.ɵɵproperty("p-tooltip", ctx_r4.literals.remove)("tabindex", !ctx_r4.disabled ? 0 : -1);
+    i0.ɵɵattribute("aria-label", ctx_r4.setAriaLabel())("role", !ctx_r4.disabled ? "button" : "");
 } }
 const poTagTypeDefault = 'po-tag-' + PoTagType.Info;
 /**
@@ -2246,18 +2297,13 @@ const poTagTypeDefault = 'po-tag-' + PoTagType.Info;
  */
 class PoTagComponent extends PoTagBaseComponent {
     el;
-    languageService;
     tagContainer;
+    tagClose;
+    poTag;
     isClickable;
-    literals;
     constructor(el, languageService) {
-        super();
+        super(languageService);
         this.el = el;
-        this.languageService = languageService;
-        const language = this.languageService.getShortLanguage();
-        this.literals = {
-            ...PoTagLiterals[language]
-        };
     }
     ngOnInit() {
         this.isClickable = this.click.observers.length > 0;
@@ -2288,22 +2334,23 @@ class PoTagComponent extends PoTagBaseComponent {
     get tagOrientation() {
         return this.orientation === this.poTagOrientation.Horizontal;
     }
-    onClick() {
+    onClick(event = 'click') {
         if (!this.removable && !this.disabled) {
-            const submittedTagItem = { value: this.value, type: this.type };
+            const submittedTagItem = { value: this.value, type: this.type, event: event };
             this.click.emit(submittedTagItem);
         }
     }
-    onClose() {
+    onClose(event = 'click') {
         if (!this.disabled) {
-            this.click.emit(null);
+            this.click.emit(event);
             this.onRemove();
+            this.remove.emit(event);
         }
     }
     onKeyPressed(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.onClick();
+        this.onClick('enter');
     }
     styleTag() {
         if (!this.tagColor && !this.inverse && !this.removable) {
@@ -2332,34 +2379,39 @@ class PoTagComponent extends PoTagBaseComponent {
     }
     static ɵfac = function PoTagComponent_Factory(t) { return new (t || PoTagComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(PoLanguageService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTagComponent, selectors: [["po-tag"]], viewQuery: function PoTagComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1E, 7);
+            i0.ɵɵviewQuery(_c0$1D, 7);
+            i0.ɵɵviewQuery(_c1$F, 7);
+            i0.ɵɵviewQuery(_c2$h, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tagContainer = _t.first);
-        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 24, consts: [["p-tooltip-position", "top", 1, "po-tag-container", 3, "p-tooltip"], ["tagContainer", ""], ["class", "po-tag-title po-text-nowrap", 4, "ngIf"], [1, "po-tag-sub-container"], [1, "po-tag", 3, "ngClass", "ngStyle", "tabindex", "click", "keydown.enter", "keydown.space", "keyup.space"], ["class", "po-tag-icon", 3, "p-icon", "ngStyle", 4, "ngIf"], [1, "po-tag-value"], [3, "ngStyle"], ["class", "po-tag-remove po-icon po-icon-close", 3, "po-clickable", "tabindex", "click", "keydown.enter", 4, "ngIf"], [1, "po-tag-title", "po-text-nowrap"], [1, "po-tag-label"], [1, "po-tag-icon", 3, "p-icon", "ngStyle"], [1, "po-tag-remove", "po-icon", "po-icon-close", 3, "tabindex", "click", "keydown.enter"]], template: function PoTagComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0, 1);
-            i0.ɵɵtemplate(2, PoTagComponent_div_2_Template, 3, 1, "div", 2);
-            i0.ɵɵelementStart(3, "div", 3)(4, "div", 4);
-            i0.ɵɵlistener("click", function PoTagComponent_Template_div_click_4_listener() { return ctx.onClick(); })("keydown.enter", function PoTagComponent_Template_div_keydown_enter_4_listener($event) { return ctx.onKeyPressed($event); })("keydown.space", function PoTagComponent_Template_div_keydown_space_4_listener($event) { return $event.preventDefault(); })("keyup.space", function PoTagComponent_Template_div_keyup_space_4_listener($event) { return ctx.onKeyPressed($event); });
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tagClose = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.poTag = _t.first);
+        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 11, vars: 24, consts: [[1, "po-tag-container"], ["class", "po-tag-title po-text-nowrap", 4, "ngIf"], [1, "po-tag-sub-container"], [1, "po-tag", 3, "ngClass", "ngStyle", "tabindex", "click", "keydown.enter", "keydown.space", "keyup.space"], ["poTag", ""], ["class", "po-tag-icon", 3, "p-icon", "ngStyle", 4, "ngIf"], ["p-tooltip-position", "top", 1, "po-tag-value", 3, "p-tooltip"], ["tagContainer", ""], [3, "ngStyle"], ["p-tooltip-position", "top", "class", "po-tag-remove po-icon po-icon-close", 3, "p-tooltip", "po-clickable", "tabindex", "click", "keydown.enter", 4, "ngIf"], [1, "po-tag-title", "po-text-nowrap"], [1, "po-tag-label"], [1, "po-tag-icon", 3, "p-icon", "ngStyle"], ["p-tooltip-position", "top", 1, "po-tag-remove", "po-icon", "po-icon-close", 3, "p-tooltip", "tabindex", "click", "keydown.enter"], ["tagClose", ""]], template: function PoTagComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵtemplate(1, PoTagComponent_div_1_Template, 3, 1, "div", 1);
+            i0.ɵɵelementStart(2, "div", 2)(3, "div", 3, 4);
+            i0.ɵɵlistener("click", function PoTagComponent_Template_div_click_3_listener() { return ctx.onClick(); })("keydown.enter", function PoTagComponent_Template_div_keydown_enter_3_listener($event) { return ctx.onKeyPressed($event); })("keydown.space", function PoTagComponent_Template_div_keydown_space_3_listener($event) { return $event.preventDefault(); })("keyup.space", function PoTagComponent_Template_div_keyup_space_3_listener($event) { return ctx.onKeyPressed($event); });
             i0.ɵɵtemplate(5, PoTagComponent_po_icon_5_Template, 1, 6, "po-icon", 5);
-            i0.ɵɵelementStart(6, "div", 6)(7, "span", 7);
-            i0.ɵɵtext(8);
+            i0.ɵɵelementStart(6, "div", 6, 7)(8, "span", 8);
+            i0.ɵɵtext(9);
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(9, PoTagComponent_span_9_Template, 1, 5, "span", 8);
+            i0.ɵɵtemplate(10, PoTagComponent_span_10_Template, 2, 6, "span", 9);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵclassProp("po-tag-container-horizontal", ctx.tagOrientation);
-            i0.ɵɵproperty("p-tooltip", ctx.getWidthTag() ? ctx.value : "");
-            i0.ɵɵadvance(2);
+            i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.label);
             i0.ɵɵadvance(2);
             i0.ɵɵclassProp("po-clickable", ctx.isClickable && !ctx.disabled && !ctx.removable)("po-tag-inverse", ctx.inverse && !ctx.type && !ctx.customTextColor && !ctx.removable)("po-tag-removable", ctx.removable)("po-tag-disabled", ctx.disabled && ctx.removable);
             i0.ɵɵproperty("ngClass", ctx.tagColor)("ngStyle", ctx.styleTag())("tabindex", ctx.isClickable && !ctx.removable ? 0 : -1);
             i0.ɵɵattribute("role", ctx.isClickable && !ctx.disabled ? "button" : "");
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.icon && !ctx.removable);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("p-tooltip", ctx.getWidthTag() ? ctx.value : "");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngStyle", !ctx.tagColor && ctx.inverse && !ctx.customTextColor ? i0.ɵɵpureFunction1(20, _c1$F, ctx.customColor) : !ctx.type && ctx.customTextColor && !ctx.removable ? i0.ɵɵpureFunction1(22, _c1$F, ctx.customTextColor) : "");
+            i0.ɵɵproperty("ngStyle", !ctx.tagColor && ctx.inverse && !ctx.customTextColor ? i0.ɵɵpureFunction1(20, _c3$d, ctx.customColor) : !ctx.type && ctx.customTextColor && !ctx.removable ? i0.ɵɵpureFunction1(22, _c3$d, ctx.customTextColor) : "");
             i0.ɵɵadvance(1);
             i0.ɵɵtextInterpolate(ctx.value);
             i0.ɵɵadvance(1);
@@ -2368,10 +2420,16 @@ class PoTagComponent extends PoTagBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTagComponent, [{
         type: Component,
-        args: [{ selector: 'po-tag', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #tagContainer\n  class=\"po-tag-container\"\n  [class.po-tag-container-horizontal]=\"tagOrientation\"\n  [p-tooltip]=\"getWidthTag() ? value : ''\"\n  p-tooltip-position=\"top\"\n>\n  <div *ngIf=\"label\" class=\"po-tag-title po-text-nowrap\">\n    <span class=\"po-tag-label\">{{ tagOrientation ? label + ':' : label }}</span>\n  </div>\n\n  <div class=\"po-tag-sub-container\">\n    <div\n      class=\"po-tag\"\n      [attr.role]=\"isClickable && !disabled ? 'button' : ''\"\n      [class.po-clickable]=\"isClickable && !disabled && !removable\"\n      [class.po-tag-inverse]=\"inverse && !type && !customTextColor && !removable\"\n      [class.po-tag-removable]=\"removable\"\n      [class.po-tag-disabled]=\"disabled && removable\"\n      [ngClass]=\"tagColor\"\n      [ngStyle]=\"styleTag()\"\n      [tabindex]=\"isClickable && !removable ? 0 : -1\"\n      (click)=\"onClick()\"\n      (keydown.enter)=\"onKeyPressed($event)\"\n      (keydown.space)=\"$event.preventDefault()\"\n      (keyup.space)=\"onKeyPressed($event)\"\n    >\n      <po-icon\n        *ngIf=\"icon && !removable\"\n        class=\"po-tag-icon\"\n        [p-icon]=\"!type ? icon : iconFromType\"\n        [ngStyle]=\"\n          !tagColor && inverse && !customTextColor\n            ? { 'color': customColor }\n            : !type && customTextColor\n            ? { 'color': customTextColor }\n            : ''\n        \"\n      >\n      </po-icon>\n\n      <div class=\"po-tag-value\">\n        <span\n          [ngStyle]=\"\n            !tagColor && inverse && !customTextColor\n              ? { 'color': customColor }\n              : !type && customTextColor && !removable\n              ? { 'color': customTextColor }\n              : ''\n          \"\n          >{{ value }}</span\n        >\n      </div>\n\n      <span\n        *ngIf=\"removable\"\n        [attr.aria-label]=\"setAriaLabel()\"\n        class=\"po-tag-remove po-icon po-icon-close\"\n        [class.po-clickable]=\"!disabled\"\n        [tabindex]=\"!disabled ? 0 : -1\"\n        [attr.role]=\"!disabled ? 'button' : ''\"\n        (click)=\"onClose()\"\n        (keydown.enter)=\"onClose()\"\n      >\n      </span>\n    </div>\n  </div>\n</div>\n" }]
+        args: [{ selector: 'po-tag', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-tag-container\" [class.po-tag-container-horizontal]=\"tagOrientation\">\n  <div *ngIf=\"label\" class=\"po-tag-title po-text-nowrap\">\n    <span class=\"po-tag-label\">{{ tagOrientation ? label + ':' : label }}</span>\n  </div>\n\n  <div class=\"po-tag-sub-container\">\n    <div\n      #poTag\n      class=\"po-tag\"\n      [attr.role]=\"isClickable && !disabled ? 'button' : ''\"\n      [class.po-clickable]=\"isClickable && !disabled && !removable\"\n      [class.po-tag-inverse]=\"inverse && !type && !customTextColor && !removable\"\n      [class.po-tag-removable]=\"removable\"\n      [class.po-tag-disabled]=\"disabled && removable\"\n      [ngClass]=\"tagColor\"\n      [ngStyle]=\"styleTag()\"\n      [tabindex]=\"isClickable && !removable ? 0 : -1\"\n      (click)=\"onClick()\"\n      (keydown.enter)=\"onKeyPressed($event)\"\n      (keydown.space)=\"$event.preventDefault()\"\n      (keyup.space)=\"onKeyPressed($event)\"\n    >\n      <po-icon\n        *ngIf=\"icon && !removable\"\n        class=\"po-tag-icon\"\n        [p-icon]=\"!type ? icon : iconFromType\"\n        [ngStyle]=\"\n          !tagColor && inverse && !customTextColor\n            ? { 'color': customColor }\n            : !type && customTextColor\n            ? { 'color': customTextColor }\n            : ''\n        \"\n      >\n      </po-icon>\n\n      <div #tagContainer class=\"po-tag-value\" [p-tooltip]=\"getWidthTag() ? value : ''\" p-tooltip-position=\"top\">\n        <span\n          [ngStyle]=\"\n            !tagColor && inverse && !customTextColor\n              ? { 'color': customColor }\n              : !type && customTextColor && !removable\n              ? { 'color': customTextColor }\n              : ''\n          \"\n          >{{ value }}</span\n        >\n      </div>\n\n      <span\n        #tagClose\n        *ngIf=\"removable\"\n        p-tooltip-position=\"top\"\n        [p-tooltip]=\"literals.remove\"\n        [attr.aria-label]=\"setAriaLabel()\"\n        class=\"po-tag-remove po-icon po-icon-close\"\n        [class.po-clickable]=\"!disabled\"\n        [tabindex]=\"!disabled ? 0 : -1\"\n        [attr.role]=\"!disabled ? 'button' : ''\"\n        (click)=\"onClose()\"\n        (keydown.enter)=\"onClose('enter')\"\n      >\n      </span>\n    </div>\n  </div>\n</div>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: PoLanguageService }]; }, { tagContainer: [{
             type: ViewChild,
             args: ['tagContainer', { static: true }]
+        }], tagClose: [{
+            type: ViewChild,
+            args: ['tagClose', { static: true }]
+        }], poTag: [{
+            type: ViewChild,
+            args: ['poTag', { static: true }]
         }] }); })();
 
 /**
@@ -2423,11 +2481,11 @@ function PoAccordionItemBodyComponent_div_0_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     i0.ɵɵproperty("@toggleBody", undefined);
 } }
-const _c0$1D = ["*"];
+const _c0$1C = ["*"];
 class PoAccordionItemBodyComponent {
     expanded = false;
     static ɵfac = function PoAccordionItemBodyComponent_Factory(t) { return new (t || PoAccordionItemBodyComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoAccordionItemBodyComponent, selectors: [["po-accordion-item-body"]], inputs: { expanded: ["p-expanded", "expanded"] }, ngContentSelectors: _c0$1D, decls: 1, vars: 1, consts: [["class", "po-accordion-item-body", 4, "ngIf"], [1, "po-accordion-item-body"], [1, "po-accordion-item-body-content"]], template: function PoAccordionItemBodyComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoAccordionItemBodyComponent, selectors: [["po-accordion-item-body"]], inputs: { expanded: ["p-expanded", "expanded"] }, ngContentSelectors: _c0$1C, decls: 1, vars: 1, consts: [["class", "po-accordion-item-body", 4, "ngIf"], [1, "po-accordion-item-body"], [1, "po-accordion-item-body-content"]], template: function PoAccordionItemBodyComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵtemplate(0, PoAccordionItemBodyComponent_div_0_Template, 3, 1, "div", 0);
         } if (rf & 2) {
@@ -2562,7 +2620,7 @@ class PoAccordionService {
 function PoAccordionItemComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵprojection(0);
 } }
-const _c0$1C = ["*"];
+const _c0$1B = ["*"];
 /**
  * @description
  *
@@ -2691,7 +2749,7 @@ class PoAccordionItemComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templateRef = _t.first);
-        } }, inputs: { label: ["p-label", "label"], labelTag: ["p-label-tag", "labelTag"], disabledItem: ["p-disabled", "disabledItem", convertToBoolean], typeTag: ["p-type-tag", "typeTag"] }, outputs: { expandEvent: "p-expand", collapseEvent: "p-collapse" }, features: [i0.ɵɵInputTransformsFeature], ngContentSelectors: _c0$1C, decls: 1, vars: 0, template: function PoAccordionItemComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { label: ["p-label", "label"], labelTag: ["p-label-tag", "labelTag"], disabledItem: ["p-disabled", "disabledItem", convertToBoolean], typeTag: ["p-type-tag", "typeTag"] }, outputs: { expandEvent: "p-expand", collapseEvent: "p-collapse" }, features: [i0.ɵɵInputTransformsFeature], ngContentSelectors: _c0$1B, decls: 1, vars: 0, template: function PoAccordionItemComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵtemplate(0, PoAccordionItemComponent_ng_template_0_Template, 1, 0, "ng-template");
         } }, encapsulation: 2 });
@@ -4555,6 +4613,10 @@ var PoKeyCodeEnum;
     PoKeyCodeEnum[PoKeyCodeEnum["space"] = 32] = "space";
     /** Tab */
     PoKeyCodeEnum[PoKeyCodeEnum["tab"] = 9] = "tab";
+    /** Arrow Left */
+    PoKeyCodeEnum[PoKeyCodeEnum["left"] = 37] = "left";
+    /** Arrow Right */
+    PoKeyCodeEnum[PoKeyCodeEnum["right"] = 39] = "right";
 })(PoKeyCodeEnum || (PoKeyCodeEnum = {}));
 
 /**
@@ -4818,7 +4880,7 @@ class PoLabelComponent {
             args: ['p-requirement']
         }] }); })();
 
-const _c0$1B = ["checkboxLabel"];
+const _c0$1A = ["checkboxLabel"];
 function PoCheckboxComponent_po_label_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "po-label", 5);
 } if (rf & 2) {
@@ -4901,7 +4963,7 @@ class PoCheckboxComponent extends PoCheckboxBaseComponent {
     }
     static ɵfac = function PoCheckboxComponent_Factory(t) { return new (t || PoCheckboxComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoCheckboxComponent, selectors: [["po-checkbox"]], viewQuery: function PoCheckboxComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1B, 7);
+            i0.ɵɵviewQuery(_c0$1A, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.checkboxLabel = _t.first);
@@ -4944,7 +5006,7 @@ class PoCheckboxComponent extends PoCheckboxBaseComponent {
             args: ['checkboxLabel', { static: true }]
         }] }); })();
 
-const _c0$1A = ["itemList"];
+const _c0$1z = ["itemList"];
 function PoItemListComponent_div_1_po_icon_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "po-icon", 8);
 } if (rf & 2) {
@@ -5098,7 +5160,7 @@ class PoItemListComponent extends PoItemListBaseComponent {
     }
     static ɵfac = function PoItemListComponent_Factory(t) { return new (t || PoItemListComponent)(i0.ɵɵdirectiveInject(i1$1.DomSanitizer)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoItemListComponent, selectors: [["po-item-list"]], viewQuery: function PoItemListComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1A, 7);
+            i0.ɵɵviewQuery(_c0$1z, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemList = _t.first);
@@ -5119,13 +5181,13 @@ class PoItemListComponent extends PoItemListBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoItemListComponent, [{
         type: Component,
-        args: [{ selector: 'po-item-list', template: "<ng-container [ngSwitch]=\"type\" (keydown)=\"onCheckboxItemEmit($event)\">\n  <div\n    *ngSwitchDefault\n    #itemList\n    [class.po-item-list__separator]=\"separator\"\n    [class.po-item-list__disabled]=\"disabled || !visible\"\n    [class.po-item-list__selected]=\"selected && !disabled\"\n    [attr.aria-disabled]=\"disabled || !visible\"\n    [attr.aria-label]=\"label\"\n    [class.po-item-list__danger]=\"danger\"\n    class=\"po-item-list po-item-list__action\"\n  >\n    <po-icon *ngIf=\"icon\" class=\"po-popup-icon-item po-icon\" [p-icon]=\"icon\"></po-icon>\n    <span class=\"po-item-list-label\">{{ label }}</span>\n  </div>\n  <div\n    *ngSwitchCase=\"'option'\"\n    #itemList\n    class=\"po-item-list po-item-list__option\"\n    [class.po-item-list__separator]=\"separator\"\n    [class.po-item-list__selected]=\"selected && !disabled\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-label]=\"label\"\n    (click)=\"onComboItem(item, $event)\"\n  >\n    <span *ngIf=\"!template\" class=\"po-item-list-label\" [innerHTML]=\"getLabelFormatted(label)\"></span>\n\n    <ng-template [ngTemplateOutlet]=\"template?.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: templateContext }\">\n    </ng-template>\n  </div>\n\n  <div\n    *ngSwitchCase=\"'check'\"\n    class=\"po-item-list po-item-list__check\"\n    [class.po-item-list__separator]=\"separator\"\n    [class.po-item-list__selected]=\"selected && !disabled\"\n    [class.po-item-list__disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-label]=\"label\"\n    (click)=\"onCheckboxItem()\"\n    (keydown)=\"onCheckboxItemEmit($event)\"\n    (keyup)=\"onCheckboxItemEmit($event)\"\n  >\n    <po-checkbox\n      [p-disabled-tabindex]=\"true\"\n      [p-checkboxValue]=\"checkboxValue === null ? 'mixed' : checkboxValue\"\n      [p-disabled]=\"disabled\"\n      (p-change)=\"onSelectItem({label})\"\n    ></po-checkbox>\n\n    <span class=\"po-item-list__label\" *ngIf=\"!template\">{{ label }}</span>\n\n    <ng-template [ngTemplateOutlet]=\"template?.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: templateContext }\">\n    </ng-template>\n  </div>\n</ng-container>\n" }]
+        args: [{ selector: 'po-item-list', template: "<ng-container [ngSwitch]=\"type\" (keydown)=\"onCheckboxItemEmit($event)\">\n  <div\n    *ngSwitchDefault\n    #itemList\n    [class.po-item-list__separator]=\"separator\"\n    [class.po-item-list__disabled]=\"disabled || !visible\"\n    [class.po-item-list__selected]=\"selected && !disabled\"\n    [attr.aria-disabled]=\"disabled || !visible\"\n    [attr.aria-label]=\"label\"\n    [class.po-item-list__danger]=\"danger\"\n    class=\"po-item-list po-item-list__action\"\n  >\n    <po-icon *ngIf=\"icon\" class=\"po-popup-icon-item po-icon\" [p-icon]=\"icon\"></po-icon>\n    <span class=\"po-item-list-label\">{{ label }}</span>\n  </div>\n\n  <div\n    *ngSwitchCase=\"'option'\"\n    #itemList\n    class=\"po-item-list po-item-list__option\"\n    [class.po-item-list__separator]=\"separator\"\n    [class.po-item-list__selected]=\"selected && !disabled\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-label]=\"label\"\n    (click)=\"onComboItem(item, $event)\"\n  >\n    <span *ngIf=\"!template\" class=\"po-item-list-label\" [innerHTML]=\"getLabelFormatted(label)\"></span>\n\n    <ng-template [ngTemplateOutlet]=\"template?.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: templateContext }\">\n    </ng-template>\n  </div>\n\n  <div\n    *ngSwitchCase=\"'check'\"\n    class=\"po-item-list po-item-list__check\"\n    [class.po-item-list__separator]=\"separator\"\n    [class.po-item-list__selected]=\"selected && !disabled\"\n    [class.po-item-list__disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-label]=\"label\"\n    (click)=\"onCheckboxItem()\"\n    (keydown)=\"onCheckboxItemEmit($event)\"\n    (keyup)=\"onCheckboxItemEmit($event)\"\n  >\n    <po-checkbox\n      [p-disabled-tabindex]=\"true\"\n      [p-checkboxValue]=\"checkboxValue === null ? 'mixed' : checkboxValue\"\n      [p-disabled]=\"disabled\"\n      (p-change)=\"onSelectItem({label})\"\n    ></po-checkbox>\n\n    <span class=\"po-item-list__label\" *ngIf=\"!template\">{{ label }}</span>\n\n    <ng-template [ngTemplateOutlet]=\"template?.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: templateContext }\">\n    </ng-template>\n  </div>\n</ng-container>\n" }]
     }], function () { return [{ type: i1$1.DomSanitizer }]; }, { itemList: [{
             type: ViewChild,
             args: ['itemList', { static: true }]
         }] }); })();
 
-const _c0$1z = ["inputElement"];
+const _c0$1y = ["inputElement"];
 /**
  * @docsPrivate
  *
@@ -5181,7 +5243,7 @@ class PoSearchListComponent {
     }
     static ɵfac = function PoSearchListComponent_Factory(t) { return new (t || PoSearchListComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoSearchListComponent, selectors: [["po-search-list"]], viewQuery: function PoSearchListComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1z, 7, ElementRef);
+            i0.ɵɵviewQuery(_c0$1y, 7, ElementRef);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputElement = _t.first);
@@ -5217,7 +5279,7 @@ class PoSearchListComponent {
             args: ['p-placeholder']
         }] }); })();
 
-const _c0$1y = ["listbox"];
+const _c0$1x = ["listbox"];
 const _c1$D = ["listboxItemList"];
 const _c2$g = ["searchElement"];
 function PoListBoxComponent_po_search_list_3_Template(rf, ctx) { if (rf & 1) {
@@ -5272,6 +5334,7 @@ function PoListBoxComponent_ng_container_4_li_4_Template(rf, ctx) { if (rf & 1)
 } if (rf & 2) {
     const item_r19 = ctx.$implicit;
     const ctx_r15 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("po-listbox-item", ctx_r15.visible);
     i0.ɵɵproperty("cdkOption", item_r19[ctx_r15.fieldLabel])("cdkOptionDisabled", ctx_r15.returnBooleanValue(item_r19, "disabled") || ctx_r15.returnBooleanValue(item_r19, "visible") === false || item_r19.options);
     i0.ɵɵattribute("aria-selected", ctx_r15.isSelectedItem(item_r19) || item_r19.selected);
     i0.ɵɵadvance(1);
@@ -5283,7 +5346,7 @@ function PoListBoxComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵelementStart(1, "ul", 10, 11);
     i0.ɵɵtemplate(3, PoListBoxComponent_ng_container_4_li_3_Template, 2, 4, "li", 12);
-    i0.ɵɵtemplate(4, PoListBoxComponent_ng_container_4_li_4_Template, 3, 5, "li", 13);
+    i0.ɵɵtemplate(4, PoListBoxComponent_ng_container_4_li_4_Template, 3, 7, "li", 13);
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
@@ -5490,7 +5553,7 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
     }
     static ɵfac = function PoListBoxComponent_Factory(t) { return new (t || PoListBoxComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(PoLanguageService), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoListBoxComponent, selectors: [["po-listbox"]], viewQuery: function PoListBoxComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1y, 7);
+            i0.ɵɵviewQuery(_c0$1x, 7);
             i0.ɵɵviewQuery(_c1$D, 5);
             i0.ɵɵviewQuery(_c2$g, 5);
         } if (rf & 2) {
@@ -5498,7 +5561,7 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.listbox = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.listboxItemList = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchElement = _t.first);
-        } }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c4$5, decls: 12, vars: 8, consts: [[1, "po-listbox", 3, "hidden"], ["listbox", ""], [3, "p-literals", "p-field-value", "p-placeholder", "p-change", 4, "ngIf"], [4, "ngIf", "ngIfElse"], ["class", "po-text-center", 4, "ngIf"], ["scrollLoadingTemplate", ""], ["defaultLoadingTemplate", ""], ["noDataTemplate", ""], [3, "p-literals", "p-field-value", "p-placeholder", "p-change"], ["searchElement", ""], ["cdkListbox", "", 1, "po-listbox-list", 3, "cdkListboxMultiple"], ["listboxItemList", ""], ["cdkOption", "selectAll", 3, "click", "keydown", 4, "ngIf"], ["class", "po-listbox-item", 3, "cdkOption", "cdkOptionDisabled", "click", "keydown", 4, "ngFor", "ngForOf"], ["cdkOption", "selectAll", 3, "click", "keydown"], ["p-type", "check", "p-value", "selectAll", 3, "p-selected", "p-label", "p-checkbox-value"], [1, "po-listbox-item", 3, "cdkOption", "cdkOptionDisabled", "click", "keydown"], ["class", "po-combo-item-title", 4, "ngIf"], [3, "p-disabled", "p-visible", "p-checkbox-value", "p-label", "p-value", "p-selected", "p-separator", "p-danger", "p-icon", "p-type", "p-item", "p-field-value", "p-field-label", "p-template", "p-template-context", "p-search-value", "p-filter-mode", "p-filtering", "p-should-mark-letter", "p-compare-cache", "p-combo-service", "p-selectcheckbox-item", "p-selectcombo-item", "p-select-item", 4, "ngIf"], [1, "po-combo-item-title"], [3, "p-disabled", "p-visible", "p-checkbox-value", "p-label", "p-value", "p-selected", "p-separator", "p-danger", "p-icon", "p-type", "p-item", "p-field-value", "p-field-label", "p-template", "p-template-context", "p-search-value", "p-filter-mode", "p-filtering", "p-should-mark-letter", "p-compare-cache", "p-combo-service", "p-selectcheckbox-item", "p-selectcombo-item", "p-select-item"], [1, "po-text-center"], [4, "ngIf", "ngIfThen", "ngIfElse"], [1, "po-listbox-container-loading-scroll"], [1, "po-listbox-container-loading-default"], ["class", "po-listbox-container-no-data po-text-center", 4, "ngIf"], [1, "po-listbox-container-no-data", "po-text-center"]], template: function PoListBoxComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c4$5, decls: 12, vars: 8, consts: [[1, "po-listbox", 3, "hidden"], ["listbox", ""], [3, "p-literals", "p-field-value", "p-placeholder", "p-change", 4, "ngIf"], [4, "ngIf", "ngIfElse"], ["class", "po-text-center", 4, "ngIf"], ["scrollLoadingTemplate", ""], ["defaultLoadingTemplate", ""], ["noDataTemplate", ""], [3, "p-literals", "p-field-value", "p-placeholder", "p-change"], ["searchElement", ""], ["cdkListbox", "", 1, "po-listbox-list", 3, "cdkListboxMultiple"], ["listboxItemList", ""], ["cdkOption", "selectAll", 3, "click", "keydown", 4, "ngIf"], [3, "po-listbox-item", "cdkOption", "cdkOptionDisabled", "click", "keydown", 4, "ngFor", "ngForOf"], ["cdkOption", "selectAll", 3, "click", "keydown"], ["p-type", "check", "p-value", "selectAll", 3, "p-selected", "p-label", "p-checkbox-value"], [3, "cdkOption", "cdkOptionDisabled", "click", "keydown"], ["class", "po-combo-item-title", 4, "ngIf"], [3, "p-disabled", "p-visible", "p-checkbox-value", "p-label", "p-value", "p-selected", "p-separator", "p-danger", "p-icon", "p-type", "p-item", "p-field-value", "p-field-label", "p-template", "p-template-context", "p-search-value", "p-filter-mode", "p-filtering", "p-should-mark-letter", "p-compare-cache", "p-combo-service", "p-selectcheckbox-item", "p-selectcombo-item", "p-select-item", 4, "ngIf"], [1, "po-combo-item-title"], [3, "p-disabled", "p-visible", "p-checkbox-value", "p-label", "p-value", "p-selected", "p-separator", "p-danger", "p-icon", "p-type", "p-item", "p-field-value", "p-field-label", "p-template", "p-template-context", "p-search-value", "p-filter-mode", "p-filtering", "p-should-mark-letter", "p-compare-cache", "p-combo-service", "p-selectcheckbox-item", "p-selectcombo-item", "p-select-item"], [1, "po-text-center"], [4, "ngIf", "ngIfThen", "ngIfElse"], [1, "po-listbox-container-loading-scroll"], [1, "po-listbox-container-loading-default"], ["class", "po-listbox-container-no-data po-text-center", 4, "ngIf"], [1, "po-listbox-container-no-data", "po-text-center"]], template: function PoListBoxComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c3$c);
             i0.ɵɵelementStart(0, "div", 0, 1);
             i0.ɵɵprojection(2);
@@ -5524,7 +5587,7 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoListBoxComponent, [{
         type: Component,
-        args: [{ selector: 'po-listbox', template: "<div\n  #listbox\n  class=\"po-listbox\"\n  [class.po-listbox-check]=\"type === 'check' || type === 'option'\"\n  [attr.data-type]=\"type\"\n  [hidden]=\"visible\"\n>\n  <ng-content select=\"[p-popup-header-template]\"></ng-content>\n\n  <po-search-list\n    #searchElement\n    *ngIf=\"!hideSearch && type === 'check'\"\n    (p-change)=\"callChangeSearch($event)\"\n    [p-literals]=\"literalSearch\"\n    [p-field-value]=\"fieldValueSearch\"\n    [p-placeholder]=\"placeholderSearch\"\n  ></po-search-list>\n\n  <ng-container *ngIf=\"checkTemplate(); else noDataTemplate\">\n    <ul #listboxItemList cdkListbox [cdkListboxMultiple]=\"type === 'check'\" class=\"po-listbox-list\">\n      <li\n        cdkOption=\"selectAll\"\n        *ngIf=\"type === 'check' && items.length && !searchElement?.inputValue && !hideSelectAll\"\n        [attr.aria-checked]=\"checkboxAllValue === null ? 'mixed' : checkboxAllValue\"\n        (click)=\"changeAll.emit()\"\n        (keydown)=\"changeAllEmit($event)\"\n      >\n        <po-item-list\n          [p-selected]=\"checkboxAllValue\"\n          p-type=\"check\"\n          [p-label]=\"literals.selectAll\"\n          p-value=\"selectAll\"\n          [p-checkbox-value]=\"checkboxAllValue\"\n        >\n        </po-item-list>\n      </li>\n      <li\n        class=\"po-listbox-item\"\n        *ngFor=\"let item of items\"\n        [cdkOption]=\"item[fieldLabel]\"\n        [cdkOptionDisabled]=\"\n          returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\n        \"\n        [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n        (click)=\"onSelectItem(item)\"\n        (keydown)=\"onKeyDown(item, $event)\"\n      >\n        <label *ngIf=\"item.options\" class=\"po-combo-item-title\">\n          {{ item.label }}\n        </label>\n        <po-item-list\n          *ngIf=\"returnBooleanValue(item, 'visible') !== false && !item.options\"\n          [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n          [p-visible]=\"returnBooleanValue(item, 'visible')\"\n          [p-checkbox-value]=\"isSelectedItem(item)\"\n          [attr.data-item-list]=\"item | json\"\n          [p-label]=\"item[fieldLabel]\"\n          [p-value]=\"item[fieldValue]\"\n          [p-selected]=\"isSelectedItem(item) || item.selected\"\n          [p-separator]=\"item.separator\"\n          [p-danger]=\"item.danger || item.type === 'danger'\"\n          [p-icon]=\"item.icon\"\n          [p-type]=\"type\"\n          [p-item]=\"item\"\n          [p-field-value]=\"fieldValue\"\n          [p-field-label]=\"fieldLabel\"\n          [p-template]=\"template\"\n          [p-template-context]=\"item\"\n          (p-selectcheckbox-item)=\"checkboxClicked($event)\"\n          (p-selectcombo-item)=\"optionClicked($event)\"\n          (p-select-item)=\"onSelectCheckBoxItem(item)\"\n          [p-search-value]=\"searchValue\"\n          [p-filter-mode]=\"filterMode\"\n          [p-filtering]=\"isFiltering\"\n          [p-should-mark-letter]=\"shouldMarkLetters\"\n          [p-compare-cache]=\"compareCache\"\n          [p-combo-service]=\"comboService\"\n        ></po-item-list>\n      </li>\n    </ul>\n  </ng-container>\n\n  <div *ngIf=\"isServerSearching && type !== 'action'\" class=\"po-text-center\">\n    <ng-container *ngIf=\"infiniteLoading; then scrollLoadingTemplate; else defaultLoadingTemplate\"></ng-container>\n  </div>\n\n  <ng-template #scrollLoadingTemplate>\n    <po-loading-overlay class=\"po-listbox-container-loading-scroll\"></po-loading-overlay>\n  </ng-template>\n\n  <ng-template #defaultLoadingTemplate>\n    <po-loading class=\"po-listbox-container-loading-default\"></po-loading>\n  </ng-template>\n\n  <ng-template #noDataTemplate>\n    <div\n      *ngIf=\"!items.length && !isServerSearching && type !== 'action'\"\n      class=\"po-listbox-container-no-data po-text-center\"\n    >\n      <span> {{ literals.noItems }}</span>\n    </div>\n  </ng-template>\n</div>\n" }]
+        args: [{ selector: 'po-listbox', template: "<div\n  #listbox\n  class=\"po-listbox\"\n  [class.po-listbox-check]=\"type === 'check' || type === 'option'\"\n  [attr.data-type]=\"type\"\n  [hidden]=\"visible\"\n>\n  <ng-content select=\"[p-popup-header-template]\"></ng-content>\n\n  <po-search-list\n    #searchElement\n    *ngIf=\"!hideSearch && type === 'check'\"\n    (p-change)=\"callChangeSearch($event)\"\n    [p-literals]=\"literalSearch\"\n    [p-field-value]=\"fieldValueSearch\"\n    [p-placeholder]=\"placeholderSearch\"\n  ></po-search-list>\n\n  <ng-container *ngIf=\"checkTemplate(); else noDataTemplate\">\n    <ul #listboxItemList cdkListbox [cdkListboxMultiple]=\"type === 'check'\" class=\"po-listbox-list\">\n      <li\n        cdkOption=\"selectAll\"\n        *ngIf=\"type === 'check' && items.length && !searchElement?.inputValue && !hideSelectAll\"\n        [attr.aria-checked]=\"checkboxAllValue === null ? 'mixed' : checkboxAllValue\"\n        (click)=\"changeAll.emit()\"\n        (keydown)=\"changeAllEmit($event)\"\n      >\n        <po-item-list\n          [p-selected]=\"checkboxAllValue\"\n          p-type=\"check\"\n          [p-label]=\"literals.selectAll\"\n          p-value=\"selectAll\"\n          [p-checkbox-value]=\"checkboxAllValue\"\n        >\n        </po-item-list>\n      </li>\n      <li\n        [class.po-listbox-item]=\"visible\"\n        *ngFor=\"let item of items\"\n        [cdkOption]=\"item[fieldLabel]\"\n        [cdkOptionDisabled]=\"\n          returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\n        \"\n        [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n        (click)=\"onSelectItem(item)\"\n        (keydown)=\"onKeyDown(item, $event)\"\n      >\n        <label *ngIf=\"item.options\" class=\"po-combo-item-title\">\n          {{ item.label }}\n        </label>\n        <po-item-list\n          *ngIf=\"returnBooleanValue(item, 'visible') !== false && !item.options\"\n          [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n          [p-visible]=\"returnBooleanValue(item, 'visible')\"\n          [p-checkbox-value]=\"isSelectedItem(item)\"\n          [attr.data-item-list]=\"item | json\"\n          [p-label]=\"item[fieldLabel]\"\n          [p-value]=\"item[fieldValue]\"\n          [p-selected]=\"isSelectedItem(item) || item.selected\"\n          [p-separator]=\"item.separator\"\n          [p-danger]=\"item.danger || item.type === 'danger'\"\n          [p-icon]=\"item.icon\"\n          [p-type]=\"type\"\n          [p-item]=\"item\"\n          [p-field-value]=\"fieldValue\"\n          [p-field-label]=\"fieldLabel\"\n          [p-template]=\"template\"\n          [p-template-context]=\"item\"\n          (p-selectcheckbox-item)=\"checkboxClicked($event)\"\n          (p-selectcombo-item)=\"optionClicked($event)\"\n          (p-select-item)=\"onSelectCheckBoxItem(item)\"\n          [p-search-value]=\"searchValue\"\n          [p-filter-mode]=\"filterMode\"\n          [p-filtering]=\"isFiltering\"\n          [p-should-mark-letter]=\"shouldMarkLetters\"\n          [p-compare-cache]=\"compareCache\"\n          [p-combo-service]=\"comboService\"\n        ></po-item-list>\n      </li>\n    </ul>\n  </ng-container>\n\n  <div *ngIf=\"isServerSearching && type !== 'action'\" class=\"po-text-center\">\n    <ng-container *ngIf=\"infiniteLoading; then scrollLoadingTemplate; else defaultLoadingTemplate\"></ng-container>\n  </div>\n\n  <ng-template #scrollLoadingTemplate>\n    <po-loading-overlay class=\"po-listbox-container-loading-scroll\"></po-loading-overlay>\n  </ng-template>\n\n  <ng-template #defaultLoadingTemplate>\n    <po-loading class=\"po-listbox-container-loading-default\"></po-loading>\n  </ng-template>\n\n  <ng-template #noDataTemplate>\n    <div\n      *ngIf=\"!items.length && !isServerSearching && type !== 'action'\"\n      class=\"po-listbox-container-no-data po-text-center\"\n    >\n      <span> {{ literals.noItems }}</span>\n    </div>\n  </ng-template>\n</div>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: PoLanguageService }, { type: i2.Router }, { type: i0.ChangeDetectorRef }]; }, { listbox: [{
             type: ViewChild,
             args: ['listbox', { static: true }]
@@ -5536,7 +5599,7 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
             args: ['searchElement']
         }] }); })();
 
-const _c0$1x = ["popupRef"];
+const _c0$1w = ["popupRef"];
 const _c1$C = ["listbox"];
 const _c2$f = ["poListBoxRef"];
 function PoPopupComponent_div_0_div_2_Template(rf, ctx) { if (rf & 1) {
@@ -5727,7 +5790,7 @@ class PoPopupComponent extends PoPopupBaseComponent {
     }
     static ɵfac = function PoPopupComponent_Factory(t) { return new (t || PoPopupComponent)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(PoControlPositionService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPopupComponent, selectors: [["po-popup"]], viewQuery: function PoPopupComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1x, 5, ElementRef);
+            i0.ɵɵviewQuery(_c0$1w, 5, ElementRef);
             i0.ɵɵviewQuery(_c1$C, 5, ElementRef);
             i0.ɵɵviewQuery(_c2$f, 5);
         } if (rf & 2) {
@@ -5928,7 +5991,7 @@ class PoBreadcrumbFavoriteComponent {
             args: ['p-hidden-literal']
         }] }); })();
 
-const _c0$1w = ["breadcrumb"];
+const _c0$1v = ["breadcrumb"];
 const _c1$B = ["dropdownIcon"];
 const _c2$e = ["target"];
 const _c3$a = ["popup"];
@@ -6198,7 +6261,7 @@ class PoBreadcrumbComponent extends PoBreadcrumbBaseComponent {
     }
     static ɵfac = function PoBreadcrumbComponent_Factory(t) { return new (t || PoBreadcrumbComponent)(i0.ɵɵdirectiveInject(i0.IterableDiffers), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(PoLanguageService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoBreadcrumbComponent, selectors: [["po-breadcrumb"]], viewQuery: function PoBreadcrumbComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1w, 7, ElementRef);
+            i0.ɵɵviewQuery(_c0$1v, 7, ElementRef);
             i0.ɵɵviewQuery(_c1$B, 5, ElementRef);
             i0.ɵɵviewQuery(_c2$e, 5, ElementRef);
             i0.ɵɵviewQuery(_c3$a, 5);
@@ -6626,7 +6689,7 @@ class PoButtonBaseComponent {
             args: ['p-aria-label']
         }] }); })();
 
-const _c0$1v = ["button"];
+const _c0$1u = ["button"];
 function PoButtonComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 5);
     i0.ɵɵelement(1, "po-loading-icon", 6);
@@ -6700,7 +6763,7 @@ class PoButtonComponent extends PoButtonBaseComponent {
     }
     static ɵfac = /*@__PURE__*/ function () { let ɵPoButtonComponent_BaseFactory; return function PoButtonComponent_Factory(t) { return (ɵPoButtonComponent_BaseFactory || (ɵPoButtonComponent_BaseFactory = i0.ɵɵgetInheritedFactory(PoButtonComponent)))(t || PoButtonComponent); }; }();
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoButtonComponent, selectors: [["po-button"]], viewQuery: function PoButtonComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1v, 7);
+            i0.ɵɵviewQuery(_c0$1u, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.buttonElement = _t.first);
@@ -7626,7 +7689,7 @@ function PoCalendarHeaderComponent_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵlistener("click", function PoCalendarHeaderComponent_span_4_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.next.emit()); });
     i0.ɵɵelementEnd();
 } }
-const _c0$1u = ["*"];
+const _c0$1t = ["*"];
 class PoCalendarHeaderComponent {
     hidePrevious = false;
     hideNext = false;
@@ -7634,7 +7697,7 @@ class PoCalendarHeaderComponent {
     next = new EventEmitter();
     constructor() { }
     static ɵfac = function PoCalendarHeaderComponent_Factory(t) { return new (t || PoCalendarHeaderComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoCalendarHeaderComponent, selectors: [["po-calendar-header"]], inputs: { hidePrevious: ["p-hide-previous", "hidePrevious"], hideNext: ["p-hide-next", "hideNext"] }, outputs: { previous: "p-previous", next: "p-next" }, ngContentSelectors: _c0$1u, decls: 5, vars: 2, consts: [[1, "po-calendar-header"], ["class", "po-calendar-header-left po-icon po-icon-arrow-left", 3, "click", 4, "ngIf"], ["attr-calendar", "", 1, "po-calendar-header-title"], ["class", "po-calendar-header-right po-icon po-icon-arrow-right", 3, "click", 4, "ngIf"], [1, "po-calendar-header-left", "po-icon", "po-icon-arrow-left", 3, "click"], [1, "po-calendar-header-right", "po-icon", "po-icon-arrow-right", 3, "click"]], template: function PoCalendarHeaderComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoCalendarHeaderComponent, selectors: [["po-calendar-header"]], inputs: { hidePrevious: ["p-hide-previous", "hidePrevious"], hideNext: ["p-hide-next", "hideNext"] }, outputs: { previous: "p-previous", next: "p-next" }, ngContentSelectors: _c0$1t, decls: 5, vars: 2, consts: [[1, "po-calendar-header"], ["class", "po-calendar-header-left po-icon po-icon-arrow-left", 3, "click", 4, "ngIf"], ["attr-calendar", "", 1, "po-calendar-header-title"], ["class", "po-calendar-header-right po-icon po-icon-arrow-right", 3, "click", 4, "ngIf"], [1, "po-calendar-header-left", "po-icon", "po-icon-arrow-left", 3, "click"], [1, "po-calendar-header-right", "po-icon", "po-icon-arrow-right", 3, "click"]], template: function PoCalendarHeaderComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵtemplate(1, PoCalendarHeaderComponent_span_1_Template, 1, 0, "span", 1);
@@ -8139,7 +8202,7 @@ function PoCalendarComponent_ng_template_1_ng_container_1_Template(rf, ctx) { if
 function PoCalendarComponent_ng_template_1_ng_container_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-const _c0$1t = function () { return { partType: "end" }; };
+const _c0$1s = function () { return { partType: "end" }; };
 function PoCalendarComponent_ng_template_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵtemplate(1, PoCalendarComponent_ng_template_1_ng_container_2_ng_container_1_Template, 1, 0, "ng-container", 5);
@@ -8148,7 +8211,7 @@ function PoCalendarComponent_ng_template_1_ng_container_2_Template(rf, ctx) { if
     i0.ɵɵnextContext(2);
     const _r5 = i0.ɵɵreference(6);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", _r5)("ngTemplateOutletContext", i0.ɵɵpureFunction0(2, _c0$1t));
+    i0.ɵɵproperty("ngTemplateOutlet", _r5)("ngTemplateOutletContext", i0.ɵɵpureFunction0(2, _c0$1s));
 } }
 const _c1$A = function () { return { partType: "start" }; };
 function PoCalendarComponent_ng_template_1_Template(rf, ctx) { if (rf & 1) {
@@ -8602,7 +8665,7 @@ class PoChartMathsService {
             }]
     }], null, null); })();
 
-const _c0$1s = ["chartLine"];
+const _c0$1r = ["chartLine"];
 class PoChartLineBaseComponent {
     mathsService;
     renderer;
@@ -8741,7 +8804,7 @@ class PoChartLineBaseComponent {
     }
     static ɵfac = function PoChartLineBaseComponent_Factory(t) { return new (t || PoChartLineBaseComponent)(i0.ɵɵdirectiveInject(PoChartMathsService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoChartLineBaseComponent, viewQuery: function PoChartLineBaseComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1s, 5);
+            i0.ɵɵviewQuery(_c0$1r, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartLine = _t.first);
@@ -8781,7 +8844,7 @@ class PoChartLineBaseComponent {
             args: ['p-series']
         }] }); })();
 
-const _c0$1r = ["chartPath"];
+const _c0$1q = ["chartPath"];
 const _c1$z = ["po-chart-path", ""];
 const pathDashoffsetDefaultWidth = 0;
 class PoChartPathComponent {
@@ -8827,7 +8890,7 @@ class PoChartPathComponent {
     }
     static ɵfac = function PoChartPathComponent_Factory(t) { return new (t || PoChartPathComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartPathComponent, selectors: [["", "po-chart-path", ""]], viewQuery: function PoChartPathComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1r, 7);
+            i0.ɵɵviewQuery(_c0$1q, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartPath = _t.first);
@@ -8863,7 +8926,7 @@ class PoChartPathComponent {
             args: ['p-animate']
         }] }); })();
 
-const _c0$1q = ["po-chart-series-point", ""];
+const _c0$1p = ["po-chart-series-point", ""];
 function PoChartSeriesPointComponent__svg_circle_0_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
@@ -8949,7 +9012,7 @@ class PoChartSeriesPointComponent {
         }
     }
     static ɵfac = function PoChartSeriesPointComponent_Factory(t) { return new (t || PoChartSeriesPointComponent)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartSeriesPointComponent, selectors: [["", "po-chart-series-point", ""]], inputs: { animate: ["p-animate", "animate"], isActive: ["p-is-active", "isActive", convertToBoolean], chartLine: ["p-chart-line", "chartLine", convertToBoolean], relativeTo: ["p-relative-to", "relativeTo"], color: ["p-color", "color"], coordinates: ["p-coordinates", "coordinates"] }, outputs: { pointClick: "p-point-click", pointHover: "p-point-hover" }, features: [i0.ɵɵInputTransformsFeature], attrs: _c0$1q, decls: 2, vars: 4, consts: [["p-tooltip-position", "top", "class", "po-chart-line-point", 3, "p-tooltip", "p-append-in-body", "p-display-tooltip", "class", "po-chart-active-point", "click", "mouseenter", "mouseleave", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["p-tooltip-position", "top", 1, "po-chart-line-point", 3, "p-tooltip", "p-append-in-body", "p-display-tooltip", "click", "mouseenter", "mouseleave"]], template: function PoChartSeriesPointComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartSeriesPointComponent, selectors: [["", "po-chart-series-point", ""]], inputs: { animate: ["p-animate", "animate"], isActive: ["p-is-active", "isActive", convertToBoolean], chartLine: ["p-chart-line", "chartLine", convertToBoolean], relativeTo: ["p-relative-to", "relativeTo"], color: ["p-color", "color"], coordinates: ["p-coordinates", "coordinates"] }, outputs: { pointClick: "p-point-click", pointHover: "p-point-hover" }, features: [i0.ɵɵInputTransformsFeature], attrs: _c0$1p, decls: 2, vars: 4, consts: [["p-tooltip-position", "top", "class", "po-chart-line-point", 3, "p-tooltip", "p-append-in-body", "p-display-tooltip", "class", "po-chart-active-point", "click", "mouseenter", "mouseleave", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["p-tooltip-position", "top", 1, "po-chart-line-point", 3, "p-tooltip", "p-append-in-body", "p-display-tooltip", "click", "mouseenter", "mouseleave"]], template: function PoChartSeriesPointComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, PoChartSeriesPointComponent__svg_circle_0_Template, 1, 11, "circle", 0);
             i0.ɵɵpipe(1, "async");
         } if (rf & 2) {
@@ -8985,7 +9048,7 @@ class PoChartSeriesPointComponent {
             args: ['p-coordinates']
         }] }); })();
 
-const _c0$1p = ["po-chart-area", ""];
+const _c0$1o = ["po-chart-area", ""];
 function PoChartAreaComponent__svg_g_2_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
@@ -9072,7 +9135,7 @@ class PoChartAreaComponent extends PoChartLineBaseComponent {
         return undefined;
     }
     static ɵfac = function PoChartAreaComponent_Factory(t) { return new (t || PoChartAreaComponent)(i0.ɵɵdirectiveInject(PoChartMathsService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartAreaComponent, selectors: [["", "po-chart-area", ""]], features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$1p, decls: 3, vars: 2, consts: [["chartLine", ""], [3, "class", "mouseenter", "mouseleave", 4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "mouseenter", "mouseleave"], ["po-chart-path", "", 3, "p-chart-line", "p-animate", "p-color", "p-coordinates", "p-is-active"], ["po-chart-series-point", "", 3, "p-animate", "p-chart-line", "p-color", "p-coordinates", "p-is-active", "p-relative-to", "p-point-click", "p-point-hover"]], template: function PoChartAreaComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartAreaComponent, selectors: [["", "po-chart-area", ""]], features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$1o, decls: 3, vars: 2, consts: [["chartLine", ""], [3, "class", "mouseenter", "mouseleave", 4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "mouseenter", "mouseleave"], ["po-chart-path", "", 3, "p-chart-line", "p-animate", "p-color", "p-coordinates", "p-is-active"], ["po-chart-series-point", "", 3, "p-animate", "p-chart-line", "p-color", "p-coordinates", "p-is-active", "p-relative-to", "p-point-click", "p-point-hover"]], template: function PoChartAreaComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(0, "g", null, 0);
             i0.ɵɵtemplate(2, PoChartAreaComponent__svg_g_2_Template, 3, 15, "g", 1);
@@ -9087,7 +9150,7 @@ class PoChartAreaComponent extends PoChartLineBaseComponent {
         args: [{ selector: '[po-chart-area]', template: "<svg:g #chartLine>\n\n  <svg:g *ngFor=\"let item of seriesPathsCoordinates; let i = index; trackBy: trackBy\"\n    [class]=\"'po-chart-line-path-group-' + i\"\n    (mouseenter)=\"onEnter(i)\"\n    (mouseleave)=\"onLeave(i)\"\n  >\n    <!-- SERIES PATHS -->\n    <svg:g po-chart-path\n      [p-chart-line]=\"chartType === 'line'\"\n      [attr.key]=\"'po-chart-line-path-' + i\"\n      [p-animate]=\"animate\"\n      [p-color]=\"item.color\" \n      [p-coordinates]=\"item?.coordinates\"\n      [p-is-active]=\"item.isActive\"\n      >\n      </svg:g>\n\n    <!-- SERIES POINTS -->\n    <svg:g po-chart-series-point\n      [p-animate]=\"animate\"\n      [p-chart-line]=\"chartType === 'line'\"\n      [p-color]=\"item.color\"\n      [p-coordinates]=\"seriesPointsCoordinates[i]\"\n      [p-is-active]=\"activeTooltip\"\n      [p-relative-to]=\"'po-chart-line-path-group-' + i\" \n      [attr.key]=\"'po-chart-line-path-points-group-' + i\"\n      (p-point-click)=\"onSeriePointClick($event)\"\n      (p-point-hover)=\"onSeriePointHover($event)\"\n      ></svg:g>\n  </svg:g>\n\n</svg:g>" }]
     }], function () { return [{ type: PoChartMathsService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, null); })();
 
-const _c0$1o = ["po-chart-axis-path", ""];
+const _c0$1n = ["po-chart-axis-path", ""];
 function PoChartAxisPathComponent__svg_path_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelement(0, "path", 1);
@@ -9110,7 +9173,7 @@ class PoChartAxisPathComponent {
         return index;
     }
     static ɵfac = function PoChartAxisPathComponent_Factory(t) { return new (t || PoChartAxisPathComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartAxisPathComponent, selectors: [["", "po-chart-axis-path", ""]], inputs: { axisXCoordinates: ["p-axis-x-coordinates", "axisXCoordinates"], axisYCoordinates: ["p-axis-y-coordinates", "axisYCoordinates"] }, attrs: _c0$1o, decls: 4, vars: 4, consts: [["class", "po-chart-axis-path", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-chart-axis-path"]], template: function PoChartAxisPathComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartAxisPathComponent, selectors: [["", "po-chart-axis-path", ""]], inputs: { axisXCoordinates: ["p-axis-x-coordinates", "axisXCoordinates"], axisYCoordinates: ["p-axis-y-coordinates", "axisYCoordinates"] }, attrs: _c0$1n, decls: 4, vars: 4, consts: [["class", "po-chart-axis-path", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-chart-axis-path"]], template: function PoChartAxisPathComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(0, "g");
             i0.ɵɵtemplate(1, PoChartAxisPathComponent__svg_path_1_Template, 1, 1, "path", 0);
@@ -9136,7 +9199,7 @@ class PoChartAxisPathComponent {
             args: ['p-axis-y-coordinates']
         }] }); })();
 
-const _c0$1n = ["po-chart-axis-label", ""];
+const _c0$1m = ["po-chart-axis-label", ""];
 function PoChartAxisLabelComponent__svg_text_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(0, "text", 2);
@@ -9171,7 +9234,7 @@ class PoChartAxisLabelComponent {
         return index;
     }
     static ɵfac = function PoChartAxisLabelComponent_Factory(t) { return new (t || PoChartAxisLabelComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartAxisLabelComponent, selectors: [["", "po-chart-axis-label", ""]], inputs: { alignByTheCorners: ["p-align-by-the-corners", "alignByTheCorners"], axisXLabelCoordinates: ["p-axis-x-label-coordinates", "axisXLabelCoordinates"], axisYLabelCoordinates: ["p-axis-y-label-coordinates", "axisYLabelCoordinates"], type: ["p-type", "type"] }, attrs: _c0$1n, decls: 4, vars: 4, consts: [["class", "po-chart-axis-x-label", "dominant-baseline", "middle", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "po-chart-axis-y-label", 3, "po-chart-centered-label", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["dominant-baseline", "middle", 1, "po-chart-axis-x-label"], [1, "po-chart-axis-y-label"]], template: function PoChartAxisLabelComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartAxisLabelComponent, selectors: [["", "po-chart-axis-label", ""]], inputs: { alignByTheCorners: ["p-align-by-the-corners", "alignByTheCorners"], axisXLabelCoordinates: ["p-axis-x-label-coordinates", "axisXLabelCoordinates"], axisYLabelCoordinates: ["p-axis-y-label-coordinates", "axisYLabelCoordinates"], type: ["p-type", "type"] }, attrs: _c0$1m, decls: 4, vars: 4, consts: [["class", "po-chart-axis-x-label", "dominant-baseline", "middle", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "po-chart-axis-y-label", 3, "po-chart-centered-label", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["dominant-baseline", "middle", 1, "po-chart-axis-x-label"], [1, "po-chart-axis-y-label"]], template: function PoChartAxisLabelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(0, "g");
             i0.ɵɵtemplate(1, PoChartAxisLabelComponent__svg_text_1_Template, 2, 3, "text", 0);
@@ -9203,7 +9266,7 @@ class PoChartAxisLabelComponent {
             args: ['p-type']
         }] }); })();
 
-const _c0$1m = ["po-chart-axis", ""];
+const _c0$1l = ["po-chart-axis", ""];
 class PoChartAxisComponent {
     mathsService;
     alignByTheCorners = false;
@@ -9475,7 +9538,7 @@ class PoChartAxisComponent {
         });
     }
     static ɵfac = function PoChartAxisComponent_Factory(t) { return new (t || PoChartAxisComponent)(i0.ɵɵdirectiveInject(PoChartMathsService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartAxisComponent, selectors: [["", "po-chart-axis", ""]], inputs: { alignByTheCorners: ["p-align-by-the-corners", "alignByTheCorners"], type: ["p-type", "type"], range: ["p-range", "range"], series: ["p-series", "series"], categories: ["p-categories", "categories"], containerSize: ["p-container-size", "containerSize"], axisOptions: ["p-options", "axisOptions"] }, outputs: { categoriesCoordinates: "p-categories-coordinates" }, attrs: _c0$1m, decls: 2, vars: 6, consts: [["po-chart-axis-path", "", 3, "p-axis-x-coordinates", "p-axis-y-coordinates"], ["po-chart-axis-label", "", 3, "p-align-by-the-corners", "p-axis-x-label-coordinates", "p-axis-y-label-coordinates", "p-type"]], template: function PoChartAxisComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartAxisComponent, selectors: [["", "po-chart-axis", ""]], inputs: { alignByTheCorners: ["p-align-by-the-corners", "alignByTheCorners"], type: ["p-type", "type"], range: ["p-range", "range"], series: ["p-series", "series"], categories: ["p-categories", "categories"], containerSize: ["p-container-size", "containerSize"], axisOptions: ["p-options", "axisOptions"] }, outputs: { categoriesCoordinates: "p-categories-coordinates" }, attrs: _c0$1l, decls: 2, vars: 6, consts: [["po-chart-axis-path", "", 3, "p-axis-x-coordinates", "p-axis-y-coordinates"], ["po-chart-axis-label", "", 3, "p-align-by-the-corners", "p-axis-x-label-coordinates", "p-axis-y-label-coordinates", "p-type"]], template: function PoChartAxisComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelement(0, "g", 0)(1, "g", 1);
         } if (rf & 2) {
@@ -9617,7 +9680,7 @@ class PoChartBarBaseComponent {
             args: ['p-series']
         }] }); })();
 
-const _c0$1l = ["po-chart-bar-path", ""];
+const _c0$1k = ["po-chart-bar-path", ""];
 function PoChartBarPathComponent__svg_path_0_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
@@ -9650,7 +9713,7 @@ class PoChartBarPathComponent {
         this.barHover.emit(selectedItem);
     }
     static ɵfac = function PoChartBarPathComponent_Factory(t) { return new (t || PoChartBarPathComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartBarPathComponent, selectors: [["", "po-chart-bar-path", ""]], inputs: { color: ["p-color", "color"], coordinates: ["p-coordinates", "coordinates"], tooltipPosition: ["p-tooltip-position", "tooltipPosition"] }, outputs: { barClick: "p-bar-click", barHover: "p-bar-hover" }, attrs: _c0$1l, decls: 1, vars: 2, consts: [["class", "po-chart-bar-path", 3, "p-tooltip", "p-tooltip-position", "p-append-in-body", "class", "mouseenter", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-chart-bar-path", 3, "p-tooltip", "p-tooltip-position", "p-append-in-body", "mouseenter", "click"]], template: function PoChartBarPathComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartBarPathComponent, selectors: [["", "po-chart-bar-path", ""]], inputs: { color: ["p-color", "color"], coordinates: ["p-coordinates", "coordinates"], tooltipPosition: ["p-tooltip-position", "tooltipPosition"] }, outputs: { barClick: "p-bar-click", barHover: "p-bar-hover" }, attrs: _c0$1k, decls: 1, vars: 2, consts: [["class", "po-chart-bar-path", 3, "p-tooltip", "p-tooltip-position", "p-append-in-body", "class", "mouseenter", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-chart-bar-path", 3, "p-tooltip", "p-tooltip-position", "p-append-in-body", "mouseenter", "click"]], template: function PoChartBarPathComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, PoChartBarPathComponent__svg_path_0_Template, 1, 7, "path", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngForOf", ctx.coordinates)("ngForTrackBy", ctx.trackBy);
@@ -9676,7 +9739,7 @@ class PoChartBarPathComponent {
             args: ['p-bar-hover']
         }] }); })();
 
-const _c0$1k = ["po-chart-bar", ""];
+const _c0$1j = ["po-chart-bar", ""];
 function PoChartBarComponent__svg_g_1_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
@@ -9737,7 +9800,7 @@ class PoChartBarComponent extends PoChartBarBaseComponent {
         return { y1, y2 };
     }
     static ɵfac = function PoChartBarComponent_Factory(t) { return new (t || PoChartBarComponent)(i0.ɵɵdirectiveInject(PoChartMathsService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartBarComponent, selectors: [["", "po-chart-bar", ""]], features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$1k, decls: 2, vars: 2, consts: [[3, "class", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["po-chart-bar-path", "", 3, "p-color", "p-coordinates", "p-tooltip-position", "p-bar-click", "p-bar-hover"]], template: function PoChartBarComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartBarComponent, selectors: [["", "po-chart-bar", ""]], features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$1j, decls: 2, vars: 2, consts: [[3, "class", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["po-chart-bar-path", "", 3, "p-color", "p-coordinates", "p-tooltip-position", "p-bar-click", "p-bar-hover"]], template: function PoChartBarComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(0, "g");
             i0.ɵɵtemplate(1, PoChartBarComponent__svg_g_1_Template, 2, 6, "g", 0);
@@ -9752,7 +9815,7 @@ class PoChartBarComponent extends PoChartBarBaseComponent {
         args: [{ selector: '[po-chart-bar]', template: "<svg:g>\n  <svg:g *ngFor=\"let item of seriesPathsCoordinates; let i = index; trackBy: trackBy\"\n    [class]=\"'po-chart-bar-group-' + i\"\n  >\n    <!-- SERIES PATHS -->\n    <svg:g po-chart-bar-path\n      [attr.key]=\"'po-chart-bar-path-' + i\"\n      [p-color]=\"item[0]?.color\" \n      [p-coordinates]=\"item\"\n      [p-tooltip-position]=\"tooltipPosition\"\n      (p-bar-click)=\"onSerieBarClick($event)\"\n      (p-bar-hover)=\"onSerieBarHover($event)\"\n      >\n      </svg:g>\n  </svg:g>\n</svg:g>" }]
     }], function () { return [{ type: PoChartMathsService }]; }, null); })();
 
-const _c0$1j = ["po-chart-column", ""];
+const _c0$1i = ["po-chart-column", ""];
 function PoChartColumnComponent__svg_g_1_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
@@ -9814,7 +9877,7 @@ class PoChartColumnComponent extends PoChartBarBaseComponent {
         return { y1, y2 };
     }
     static ɵfac = function PoChartColumnComponent_Factory(t) { return new (t || PoChartColumnComponent)(i0.ɵɵdirectiveInject(PoChartMathsService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartColumnComponent, selectors: [["", "po-chart-column", ""]], features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$1j, decls: 2, vars: 2, consts: [[3, "class", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["po-chart-bar-path", "", 3, "p-color", "p-coordinates", "p-tooltip-position", "p-bar-click", "p-bar-hover"]], template: function PoChartColumnComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartColumnComponent, selectors: [["", "po-chart-column", ""]], features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$1i, decls: 2, vars: 2, consts: [[3, "class", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["po-chart-bar-path", "", 3, "p-color", "p-coordinates", "p-tooltip-position", "p-bar-click", "p-bar-hover"]], template: function PoChartColumnComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(0, "g");
             i0.ɵɵtemplate(1, PoChartColumnComponent__svg_g_1_Template, 2, 6, "g", 0);
@@ -10248,7 +10311,7 @@ class PoChartSvgContainerService {
             }]
     }], function () { return []; }, null); })();
 
-const _c0$1i = ["po-chart-line", ""];
+const _c0$1h = ["po-chart-line", ""];
 function PoChartLineComponent__svg_g_2_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
@@ -10298,7 +10361,7 @@ class PoChartLineComponent extends PoChartLineBaseComponent {
         this.renderer.appendChild(this.chartLine.nativeElement, pathGroupElement[0]);
     }
     static ɵfac = function PoChartLineComponent_Factory(t) { return new (t || PoChartLineComponent)(i0.ɵɵdirectiveInject(PoChartMathsService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartLineComponent, selectors: [["", "po-chart-line", ""]], features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$1i, decls: 3, vars: 2, consts: [["chartLine", ""], [3, "class", "mouseenter", "mouseleave", 4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "mouseenter", "mouseleave"], ["po-chart-path", "", 3, "p-chart-line", "p-animate", "p-color", "p-coordinates", "p-is-active"], ["po-chart-series-point", "", 3, "p-animate", "p-chart-line", "p-color", "p-coordinates", "p-is-active", "p-relative-to", "p-point-click", "p-point-hover"]], template: function PoChartLineComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartLineComponent, selectors: [["", "po-chart-line", ""]], features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$1h, decls: 3, vars: 2, consts: [["chartLine", ""], [3, "class", "mouseenter", "mouseleave", 4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "mouseenter", "mouseleave"], ["po-chart-path", "", 3, "p-chart-line", "p-animate", "p-color", "p-coordinates", "p-is-active"], ["po-chart-series-point", "", 3, "p-animate", "p-chart-line", "p-color", "p-coordinates", "p-is-active", "p-relative-to", "p-point-click", "p-point-hover"]], template: function PoChartLineComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(0, "g", null, 0);
             i0.ɵɵtemplate(2, PoChartLineComponent__svg_g_2_Template, 3, 15, "g", 1);
@@ -10313,7 +10376,7 @@ class PoChartLineComponent extends PoChartLineBaseComponent {
         args: [{ selector: '[po-chart-line]', template: "<svg:g #chartLine>\n\n  <svg:g *ngFor=\"let item of seriesPathsCoordinates; let i = index; trackBy: trackBy\"\n    [class]=\"'po-chart-line-path-group-' + i\"\n    (mouseenter)=\"onEnter(i)\"\n    (mouseleave)=\"onLeave(i)\"\n  >\n    <!-- SERIES PATHS -->\n    <svg:g po-chart-path\n      [p-chart-line]=\"chartType === 'line'\"\n      [attr.key]=\"'po-chart-line-path-' + i\"\n      [p-animate]=\"animate\"\n      [p-color]=\"item.color\" \n      [p-coordinates]=\"item?.coordinates\"\n      [p-is-active]=\"item.isActive\"\n      >\n      </svg:g>\n\n    <!-- SERIES POINTS -->\n    <svg:g po-chart-series-point\n      [p-animate]=\"animate\"\n      [p-chart-line]=\"chartType === 'line'\"\n      [p-color]=\"item.color\"\n      [p-coordinates]=\"seriesPointsCoordinates[i]\"\n      [p-is-active]=\"activeTooltip\"\n      [p-relative-to]=\"'po-chart-line-path-group-' + i\" \n      [attr.key]=\"'po-chart-line-path-points-group-' + i\"\n      (p-point-click)=\"onSeriePointClick($event)\"\n      (p-point-hover)=\"onSeriePointHover($event)\"\n      ></svg:g>\n  </svg:g>\n\n</svg:g>" }]
     }], function () { return [{ type: PoChartMathsService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, null); })();
 
-const _c0$1h = ["svgPaths"];
+const _c0$1g = ["svgPaths"];
 const _c1$y = ["svgLabels"];
 class PoChartCircularComponent {
     ngZone;
@@ -10449,7 +10512,7 @@ class PoChartCircularComponent {
     }
     static ɵfac = function PoChartCircularComponent_Factory(t) { return new (t || PoChartCircularComponent)(i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoChartCircularComponent, viewQuery: function PoChartCircularComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1h, 5);
+            i0.ɵɵviewQuery(_c0$1g, 5);
             i0.ɵɵviewQuery(_c1$y, 5);
         } if (rf & 2) {
             let _t;
@@ -10575,7 +10638,7 @@ class PoChartTooltipDirective {
             args: ['mousemove', ['$event']]
         }] }); })();
 
-const _c0$1g = ["svgPath"];
+const _c0$1f = ["svgPath"];
 const _c1$x = ["po-chart-circular-path", ""];
 class PoChartCircularPathComponent {
     renderer;
@@ -10599,7 +10662,7 @@ class PoChartCircularPathComponent {
     }
     static ɵfac = function PoChartCircularPathComponent_Factory(t) { return new (t || PoChartCircularPathComponent)(i0.ɵɵdirectiveInject(i0.Renderer2)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartCircularPathComponent, selectors: [["", "po-chart-circular-path", ""]], viewQuery: function PoChartCircularPathComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1g, 5, ElementRef);
+            i0.ɵɵviewQuery(_c0$1f, 5, ElementRef);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.svgPath = _t.first);
@@ -10631,7 +10694,7 @@ class PoChartCircularPathComponent {
             args: ['svgPath', { read: ElementRef }]
         }] }); })();
 
-const _c0$1f = ["svgLabel"];
+const _c0$1e = ["svgLabel"];
 const _c1$w = ["po-chart-circular-label", ""];
 class PoChartCircularLabelComponent {
     changeDetection;
@@ -10651,7 +10714,7 @@ class PoChartCircularLabelComponent {
     }
     static ɵfac = function PoChartCircularLabelComponent_Factory(t) { return new (t || PoChartCircularLabelComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.Renderer2)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartCircularLabelComponent, selectors: [["", "po-chart-circular-label", ""]], viewQuery: function PoChartCircularLabelComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1f, 5, ElementRef);
+            i0.ɵɵviewQuery(_c0$1e, 5, ElementRef);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.svgLabel = _t.first);
@@ -10681,7 +10744,7 @@ class PoChartCircularLabelComponent {
             args: ['svgLabel', { read: ElementRef }]
         }] }); })();
 
-const _c0$1e = ["po-chart-pie", ""];
+const _c0$1d = ["po-chart-pie", ""];
 function PoChartPieComponent__svg_g_1_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
@@ -10762,7 +10825,7 @@ class PoChartPieComponent extends PoChartCircularComponent {
         return tooltipLabel || `${dataLabel}${dataValue}`;
     }
     static ɵfac = function PoChartPieComponent_Factory(t) { return new (t || PoChartPieComponent)(i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartPieComponent, selectors: [["", "po-chart-pie", ""]], features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], attrs: _c0$1e, decls: 3, vars: 2, consts: [[4, "ngFor", "ngForOf"], [4, "ngIf"], ["po-chart-circular-path", "", 3, "p-serie", "p-on-click", "p-on-hover"], ["svgPaths", ""], ["po-chart-circular-label", "", 3, "p-serie", "p-show-label"], ["svgLabels", ""]], template: function PoChartPieComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartPieComponent, selectors: [["", "po-chart-pie", ""]], features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], attrs: _c0$1d, decls: 3, vars: 2, consts: [[4, "ngFor", "ngForOf"], [4, "ngIf"], ["po-chart-circular-path", "", 3, "p-serie", "p-on-click", "p-on-hover"], ["svgPaths", ""], ["po-chart-circular-label", "", 3, "p-serie", "p-show-label"], ["svgLabels", ""]], template: function PoChartPieComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(0, "g");
             i0.ɵɵtemplate(1, PoChartPieComponent__svg_g_1_Template, 3, 2, "g", 0);
@@ -10780,7 +10843,7 @@ class PoChartPieComponent extends PoChartCircularComponent {
         args: [{ selector: '[po-chart-pie]', template: "<svg:g>\n  <!-- SERIES PATHS -->\n  <svg:g *ngFor=\"let item of seriesList; let i = index\">\n    <svg:g #svgPaths po-chart-circular-path\n      [attr.key]=\"'po-chart-circular-path-' + i\"\n      [p-serie]=\"item\"\n      (p-on-click)=\"onSerieClick($event)\"\n      (p-on-hover)=\"onSerieHover($event)\">\n    </svg:g>\n  </svg:g>\n\n  <!-- SERIES LABELS -->\n  <svg:g *ngIf=\"canDisplayLabels\">\n    <svg:g *ngFor=\"let item of seriesLabels; let i = index\">\n      <svg:g #svgLabels po-chart-circular-label\n        [attr.key]=\"'po-chart-circular-label-' + i\"\n        [p-serie]=\"item\"\n        [p-show-label]=\"showLabels\">\n      </svg:g>\n    </svg:g>\n  </svg:g>\n</svg:g>\n\n" }]
     }], function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, null); })();
 
-const _c0$1d = ["po-chart-donut", ""];
+const _c0$1c = ["po-chart-donut", ""];
 function PoChartDonutComponent__svg_g_1_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
@@ -10916,7 +10979,7 @@ class PoChartDonutComponent extends PoChartCircularComponent {
         this.canDisplayLabels = radius - innerRadius >= radius - (radius - PoChartDonutDefaultThickness);
     }
     static ɵfac = function PoChartDonutComponent_Factory(t) { return new (t || PoChartDonutComponent)(i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartDonutComponent, selectors: [["", "po-chart-donut", ""]], features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], attrs: _c0$1d, decls: 3, vars: 2, consts: [[4, "ngFor", "ngForOf"], [4, "ngIf"], ["po-chart-circular-path", "", 3, "p-serie", "p-on-click", "p-on-hover"], ["svgPaths", ""], ["po-chart-circular-label", "", 3, "p-serie", "p-show-label"], ["svgLabels", ""]], template: function PoChartDonutComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartDonutComponent, selectors: [["", "po-chart-donut", ""]], features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], attrs: _c0$1c, decls: 3, vars: 2, consts: [[4, "ngFor", "ngForOf"], [4, "ngIf"], ["po-chart-circular-path", "", 3, "p-serie", "p-on-click", "p-on-hover"], ["svgPaths", ""], ["po-chart-circular-label", "", 3, "p-serie", "p-show-label"], ["svgLabels", ""]], template: function PoChartDonutComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(0, "g");
             i0.ɵɵtemplate(1, PoChartDonutComponent__svg_g_1_Template, 3, 2, "g", 0);
@@ -10934,7 +10997,7 @@ class PoChartDonutComponent extends PoChartCircularComponent {
         args: [{ selector: '[po-chart-donut]', template: "<svg:g>\n  <!-- SERIES PATHS -->\n  <svg:g *ngFor=\"let item of seriesList; let i = index\">\n    <svg:g #svgPaths po-chart-circular-path\n      [attr.key]=\"'po-chart-circular-path-' + i\"\n      [p-serie]=\"item\"\n      (p-on-click)=\"onSerieClick($event)\"\n      (p-on-hover)=\"onSerieHover($event)\">\n    </svg:g>\n  </svg:g>\n\n  <!-- SERIES LABELS -->\n  <svg:g *ngIf=\"canDisplayLabels\">\n    <svg:g *ngFor=\"let item of seriesLabels; let i = index\">\n      <svg:g #svgLabels po-chart-circular-label\n        [attr.key]=\"'po-chart-circular-label-' + i\"\n        [p-serie]=\"item\"\n        [p-show-label]=\"showLabels\">\n      </svg:g>\n    </svg:g>\n  </svg:g>\n</svg:g>\n\n" }]
     }], function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, null); })();
 
-const _c0$1c = ["svgELement"];
+const _c0$1b = ["svgELement"];
 function PoChartContainerComponent__svg_g_2_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
@@ -11116,7 +11179,7 @@ class PoChartContainerComponent {
     }
     static ɵfac = function PoChartContainerComponent_Factory(t) { return new (t || PoChartContainerComponent)(i0.ɵɵdirectiveInject(PoChartMathsService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartContainerComponent, selectors: [["po-chart-container"]], viewQuery: function PoChartContainerComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1c, 7);
+            i0.ɵɵviewQuery(_c0$1b, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.svgELement = _t.first);
@@ -11266,7 +11329,7 @@ class PoResizeObserverDirective {
             args: ['p-resize-observer']
         }] }); })();
 
-const _c0$1b = ["chartContainer"];
+const _c0$1a = ["chartContainer"];
 const _c1$v = ["chartHeader"];
 const _c2$d = ["chartLegend"];
 const _c3$9 = ["chartWrapper"];
@@ -11462,7 +11525,7 @@ class PoChartComponent extends PoChartBaseComponent {
     }
     static ɵfac = function PoChartComponent_Factory(t) { return new (t || PoChartComponent)(i0.ɵɵdirectiveInject(PoColorService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(PoChartSvgContainerService), i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(PoChartMathsService), i0.ɵɵdirectiveInject(i0.Renderer2)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartComponent, selectors: [["po-chart"]], viewQuery: function PoChartComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1b, 7, ViewContainerRef);
+            i0.ɵɵviewQuery(_c0$1a, 7, ViewContainerRef);
             i0.ɵɵviewQuery(_c1$v, 7);
             i0.ɵɵviewQuery(_c2$d, 5, ElementRef);
             i0.ɵɵviewQuery(_c3$9, 7);
@@ -11665,7 +11728,7 @@ class PoContainerBaseComponent {
             args: ['p-no-shadow']
         }] }); })();
 
-const _c0$1a = ["*"];
+const _c0$19 = ["*"];
 /**
  * @docsExtends PoContainerBaseComponent
  *
@@ -11689,7 +11752,7 @@ const _c0$1a = ["*"];
  */
 class PoContainerComponent extends PoContainerBaseComponent {
     static ɵfac = /*@__PURE__*/ function () { let ɵPoContainerComponent_BaseFactory; return function PoContainerComponent_Factory(t) { return (ɵPoContainerComponent_BaseFactory || (ɵPoContainerComponent_BaseFactory = i0.ɵɵgetInheritedFactory(PoContainerComponent)))(t || PoContainerComponent); }; }();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoContainerComponent, selectors: [["po-container"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1a, decls: 2, vars: 6, consts: [[1, "po-container"]], template: function PoContainerComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoContainerComponent, selectors: [["po-container"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$19, decls: 2, vars: 6, consts: [[1, "po-container"]], template: function PoContainerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵprojection(1);
@@ -11845,7 +11908,7 @@ class PoDisclaimerBaseComponent {
             args: ['p-type']
         }] }); })();
 
-const _c0$19 = ["disclaimerContainer"];
+const _c0$18 = ["disclaimerContainer"];
 function PoDisclaimerComponent_div_2_span_4_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "span", 7);
@@ -11897,7 +11960,7 @@ class PoDisclaimerComponent extends PoDisclaimerBaseComponent {
     }
     static ɵfac = /*@__PURE__*/ function () { let ɵPoDisclaimerComponent_BaseFactory; return function PoDisclaimerComponent_Factory(t) { return (ɵPoDisclaimerComponent_BaseFactory || (ɵPoDisclaimerComponent_BaseFactory = i0.ɵɵgetInheritedFactory(PoDisclaimerComponent)))(t || PoDisclaimerComponent); }; }();
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDisclaimerComponent, selectors: [["po-disclaimer"]], viewQuery: function PoDisclaimerComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$19, 7);
+            i0.ɵɵviewQuery(_c0$18, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.disclaimerContainer = _t.first);
@@ -12355,7 +12418,7 @@ class PoDropdownBaseComponent {
             args: ['p-disabled']
         }] }); })();
 
-const _c0$18 = ["dropdownRef"];
+const _c0$17 = ["dropdownRef"];
 const _c1$u = ["popupRef"];
 const _c2$c = function (a0, a1) { return { "po-dropdown-button-disabled": a0, "po-dropdown-button-open": a1 }; };
 const _c3$8 = function () { return ["bottom-left", "top-left"]; };
@@ -12445,7 +12508,7 @@ class PoDropdownComponent extends PoDropdownBaseComponent {
     }
     static ɵfac = function PoDropdownComponent_Factory(t) { return new (t || PoDropdownComponent)(i0.ɵɵdirectiveInject(i0.Renderer2)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDropdownComponent, selectors: [["po-dropdown"]], viewQuery: function PoDropdownComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$18, 7, ElementRef);
+            i0.ɵɵviewQuery(_c0$17, 7, ElementRef);
             i0.ɵɵviewQuery(_c1$u, 5);
         } if (rf & 2) {
             let _t;
@@ -12601,7 +12664,7 @@ function PoFieldContainerComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(ctx_r1.help);
 } }
-const _c0$17 = ["*"];
+const _c0$16 = ["*"];
 /**
  * @docsPrivate
  *
@@ -12664,7 +12727,7 @@ class PoFieldContainerComponent {
         }
     }
     static ɵfac = function PoFieldContainerComponent_Factory(t) { return new (t || PoFieldContainerComponent)(i0.ɵɵdirectiveInject(PoLanguageService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoFieldContainerComponent, selectors: [["po-field-container"]], inputs: { disabled: ["p-disabled", "disabled"], id: ["p-id", "id"], label: ["p-label", "label"], help: ["p-help", "help"], optional: ["p-optional", "optional"], required: ["p-required", "required"], showRequired: ["p-show-required", "showRequired"] }, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0$17, decls: 5, vars: 2, consts: [[1, "po-field-container"], [1, "po-field-container-title"], ["p-field", "true", 3, "p-disabled", "p-for", "p-label", "p-requirement", 4, "ngIf"], ["class", "po-field-help", 4, "ngIf"], ["p-field", "true", 3, "p-disabled", "p-for", "p-label", "p-requirement"], [1, "po-field-help"]], template: function PoFieldContainerComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoFieldContainerComponent, selectors: [["po-field-container"]], inputs: { disabled: ["p-disabled", "disabled"], id: ["p-id", "id"], label: ["p-label", "label"], help: ["p-help", "help"], optional: ["p-optional", "optional"], required: ["p-required", "required"], showRequired: ["p-show-required", "showRequired"] }, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0$16, decls: 5, vars: 2, consts: [[1, "po-field-container"], [1, "po-field-container-title"], ["p-field", "true", 3, "p-disabled", "p-for", "p-label", "p-requirement", 4, "ngIf"], ["class", "po-field-help", 4, "ngIf"], ["p-field", "true", 3, "p-disabled", "p-for", "p-label", "p-requirement"], [1, "po-field-help"]], template: function PoFieldContainerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
             i0.ɵɵtemplate(2, PoFieldContainerComponent_po_label_2_Template, 1, 4, "po-label", 2);
@@ -13111,7 +13174,7 @@ class PoCheckboxGroupBaseComponent {
             args: ['p-show-required']
         }] }); })();
 
-const _c0$16 = ["checkboxLabel"];
+const _c0$15 = ["checkboxLabel"];
 function PoCheckboxGroupComponent_li_3_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li")(1, "po-checkbox", 4, 5);
@@ -13197,7 +13260,7 @@ class PoCheckboxGroupComponent extends PoCheckboxGroupBaseComponent {
     }
     static ɵfac = function PoCheckboxGroupComponent_Factory(t) { return new (t || PoCheckboxGroupComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoCheckboxGroupComponent, selectors: [["po-checkbox-group"]], viewQuery: function PoCheckboxGroupComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$16, 5);
+            i0.ɵɵviewQuery(_c0$15, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.checkboxLabels = _t);
@@ -13596,7 +13659,7 @@ var PoRadioSize;
     PoRadioSize["Large"] = "large";
 })(PoRadioSize || (PoRadioSize = {}));
 
-const _c0$15 = ["radio"];
+const _c0$14 = ["radio"];
 const _c1$t = ["radioInput"];
 function PoRadioComponent_po_label_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "po-label", 6);
@@ -13701,7 +13764,7 @@ class PoRadioComponent extends PoFieldModel {
     }
     static ɵfac = function PoRadioComponent_Factory(t) { return new (t || PoRadioComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.Renderer2)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoRadioComponent, selectors: [["po-radio"]], viewQuery: function PoRadioComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$15, 7);
+            i0.ɵɵviewQuery(_c0$14, 7);
             i0.ɵɵviewQuery(_c1$t, 7);
         } if (rf & 2) {
             let _t;
@@ -13772,7 +13835,7 @@ class PoRadioComponent extends PoFieldModel {
             args: ['keydown', ['$event.target']]
         }] }); })();
 
-const _c0$14 = ["inp"];
+const _c0$13 = ["inp"];
 const _c1$s = ["inputRadio"];
 function PoRadioGroupComponent_div_4_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -13885,7 +13948,7 @@ class PoRadioGroupComponent extends PoRadioGroupBaseComponent {
     }
     static ɵfac = function PoRadioGroupComponent_Factory(t) { return new (t || PoRadioGroupComponent)(i0.ɵɵdirectiveInject(i0.IterableDiffers), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoRadioGroupComponent, selectors: [["po-radio-group"]], viewQuery: function PoRadioGroupComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$14, 7, ElementRef);
+            i0.ɵɵviewQuery(_c0$13, 7, ElementRef);
             i0.ɵɵviewQuery(_c1$s, 5);
         } if (rf & 2) {
             let _t;
@@ -15066,7 +15129,7 @@ const PoDatepickerLiterals = {
     }
 };
 
-const _c0$13 = ["calendar"];
+const _c0$12 = ["calendar"];
 const _c1$r = ["dialogPicker"];
 const _c2$b = ["iconDatepicker"];
 const _c3$7 = ["inp"];
@@ -15417,7 +15480,7 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
     }
     static ɵfac = function PoDatepickerComponent_Factory(t) { return new (t || PoDatepickerComponent)(i0.ɵɵdirectiveInject(PoLanguageService), i0.ɵɵdirectiveInject(PoControlPositionService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDatepickerComponent, selectors: [["po-datepicker"]], viewQuery: function PoDatepickerComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$13, 7);
+            i0.ɵɵviewQuery(_c0$12, 7);
             i0.ɵɵviewQuery(_c1$r, 7, ElementRef);
             i0.ɵɵviewQuery(_c2$b, 5);
             i0.ɵɵviewQuery(_c3$7, 7, ElementRef);
@@ -15729,7 +15792,7 @@ class PoModalBaseComponent {
             args: ['p-icon']
         }] }); })();
 
-const _c0$12 = ["*"];
+const _c0$11 = ["*"];
 /**
  * @description
  *
@@ -15760,7 +15823,7 @@ class PoModalFooterComponent {
      */
     disabledAlign = false;
     static ɵfac = function PoModalFooterComponent_Factory(t) { return new (t || PoModalFooterComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoModalFooterComponent, selectors: [["po-modal-footer"]], inputs: { disabledAlign: ["p-disabled-align", "disabledAlign"] }, ngContentSelectors: _c0$12, decls: 2, vars: 2, consts: [[1, "po-modal-footer"]], template: function PoModalFooterComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoModalFooterComponent, selectors: [["po-modal-footer"]], inputs: { disabledAlign: ["p-disabled-align", "disabledAlign"] }, ngContentSelectors: _c0$11, decls: 2, vars: 2, consts: [[1, "po-modal-footer"]], template: function PoModalFooterComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵprojection(1);
@@ -15789,7 +15852,7 @@ class PoActiveOverlayService {
             }]
     }], null, null); })();
 
-const _c0$11 = ["modalContent"];
+const _c0$10 = ["modalContent"];
 const _c1$q = ["modalContainer"];
 function PoModalComponent_div_0_po_icon_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "po-icon", 16);
@@ -15973,7 +16036,7 @@ class PoModalComponent extends PoModalBaseComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalFooter = _t.first);
         } }, viewQuery: function PoModalComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$11, 5, ElementRef);
+            i0.ɵɵviewQuery(_c0$10, 5, ElementRef);
             i0.ɵɵviewQuery(_c1$q, 5, ElementRef);
         } if (rf & 2) {
             let _t;
@@ -16848,7 +16911,7 @@ var PoToasterType;
     PoToasterType[PoToasterType["Warning"] = 3] = "Warning";
 })(PoToasterType || (PoToasterType = {}));
 
-const _c0$10 = ["toaster"];
+const _c0$$ = ["toaster"];
 const _c1$p = ["buttonClose"];
 function PoToasterComponent_po_button_8_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -17001,7 +17064,7 @@ class PoToasterComponent extends PoToasterBaseComponent {
     }
     static ɵfac = function PoToasterComponent_Factory(t) { return new (t || PoToasterComponent)(i0.ɵɵdirectiveInject(PoLanguageService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.Renderer2)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoToasterComponent, selectors: [["po-toaster"]], viewQuery: function PoToasterComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$10, 5);
+            i0.ɵɵviewQuery(_c0$$, 5);
             i0.ɵɵviewQuery(_c1$p, 5);
         } if (rf & 2) {
             let _t;
@@ -17292,7 +17355,7 @@ class PoPopoverBaseComponent {
             args: ['p-trigger']
         }] }); })();
 
-const _c0$$ = ["popoverElement"];
+const _c0$_ = ["popoverElement"];
 function PoPopoverComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div");
 } if (rf & 2) {
@@ -17436,7 +17499,7 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
     }
     static ɵfac = function PoPopoverComponent_Factory(t) { return new (t || PoPopoverComponent)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(PoControlPositionService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPopoverComponent, selectors: [["po-popover"]], viewQuery: function PoPopoverComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$$, 7, ElementRef);
+            i0.ɵɵviewQuery(_c0$_, 7, ElementRef);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.popoverElement = _t.first);
@@ -17718,7 +17781,7 @@ class PoPageSlideBaseComponent {
             args: ['p-size']
         }] }); })();
 
-const _c0$_ = ["pageContent"];
+const _c0$Z = ["pageContent"];
 function PoPageSlideComponent_div_0_div_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 10);
     i0.ɵɵtext(1);
@@ -17853,7 +17916,7 @@ class PoPageSlideComponent extends PoPageSlideBaseComponent {
     }
     static ɵfac = function PoPageSlideComponent_Factory(t) { return new (t || PoPageSlideComponent)(i0.ɵɵdirectiveInject(PoActiveOverlayService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPageSlideComponent, selectors: [["po-page-slide"]], viewQuery: function PoPageSlideComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$_, 5, ElementRef);
+            i0.ɵɵviewQuery(_c0$Z, 5, ElementRef);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.pageContent = _t.first);
@@ -17917,7 +17980,7 @@ class PoPageSlideModule {
     }], null, null); })();
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(PoPageSlideModule, { declarations: [PoPageSlideComponent], imports: [CommonModule, FormsModule, PoButtonModule], exports: [PoPageSlideComponent] }); })();
 
-const _c0$Z = function (a0, a1) { return { "po-clickable": a0, "po-table-icon-disabled": a1 }; };
+const _c0$Y = function (a0, a1) { return { "po-clickable": a0, "po-table-icon-disabled": a1 }; };
 /**
  * @docsPrivate
  *
@@ -17962,7 +18025,7 @@ class PoTableIconComponent {
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵclassMapInterpolate1("po-table-icon-content ", ctx.disabled ? "" : ctx.color, "");
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c0$Z, ctx.clickable, ctx.disabled))("p-icon", ctx.icon)("p-tooltip", ctx.tooltip)("p-append-in-body", true);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c0$Y, ctx.clickable, ctx.disabled))("p-icon", ctx.icon)("p-tooltip", ctx.tooltip)("p-append-in-body", true);
         } }, dependencies: [i1.NgClass, PoTooltipDirective, PoIconComponent], encapsulation: 2, changeDetection: 0 });
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableIconComponent, [{
@@ -18136,7 +18199,7 @@ function PoTableColumnLinkComponent_po_link_4_Template(rf, ctx) { if (rf & 1) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("p-label", ctx_r2.value)("p-open-new-tab", ctx_r2.openNewTab)("p-url", ctx_r2.link);
 } }
-const _c0$Y = function (a0) { return { "po-table-link-disabled": a0 }; };
+const _c0$X = function (a0) { return { "po-table-link-disabled": a0 }; };
 /**
  * @docsPrivate
  *
@@ -18167,7 +18230,7 @@ class PoTableColumnLinkComponent {
             i0.ɵɵelementContainerEnd();
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c0$Y, ctx.disabled));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c0$X, ctx.disabled));
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngSwitch", ctx.type);
             i0.ɵɵadvance(1);
@@ -18216,7 +18279,7 @@ var PoSwitchLabelPosition;
     PoSwitchLabelPosition[PoSwitchLabelPosition["Left"] = 1] = "Left";
 })(PoSwitchLabelPosition || (PoSwitchLabelPosition = {}));
 
-const _c0$X = ["switchContainer"];
+const _c0$W = ["switchContainer"];
 function PoSwitchComponent_po_icon_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "po-icon", 10);
 } }
@@ -18423,7 +18486,7 @@ class PoSwitchComponent extends PoFieldModel {
     }
     static ɵfac = function PoSwitchComponent_Factory(t) { return new (t || PoSwitchComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoSwitchComponent, selectors: [["po-switch"]], viewQuery: function PoSwitchComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$X, 7);
+            i0.ɵɵviewQuery(_c0$W, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.switchContainer = _t.first);
@@ -18494,7 +18557,7 @@ class PoSwitchComponent extends PoFieldModel {
 function PoTableListManagerComponent_section_0_ng_container_3_ng_container_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-const _c0$W = function (a0) { return { $implicit: a0 }; };
+const _c0$V = function (a0) { return { $implicit: a0 }; };
 function PoTableListManagerComponent_section_0_ng_container_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵelementStart(1, "li", 8);
@@ -18508,7 +18571,7 @@ function PoTableListManagerComponent_section_0_ng_container_3_ng_container_1_Tem
     i0.ɵɵadvance(1);
     i0.ɵɵclassProp("po-checkbox-group-item-disabled", option_r9.disabled || ctx_r10.disabled);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", _r2)("ngTemplateOutletContext", i0.ɵɵpureFunction1(4, _c0$W, option_r9));
+    i0.ɵɵproperty("ngTemplateOutlet", _r2)("ngTemplateOutletContext", i0.ɵɵpureFunction1(4, _c0$V, option_r9));
 } }
 function PoTableListManagerComponent_section_0_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -18545,7 +18608,7 @@ function PoTableListManagerComponent_ng_container_4_ng_container_1_ng_container_
     i0.ɵɵnextContext();
     const _r2 = i0.ɵɵreference(6);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", _r2)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0$W, option_r13));
+    i0.ɵɵproperty("ngTemplateOutlet", _r2)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0$V, option_r13));
 } }
 function PoTableListManagerComponent_ng_container_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -18779,7 +18842,7 @@ class PoTableListManagerComponent extends PoCheckboxGroupComponent {
             args: [{ alias: 'p-hide-action-fixed-columns', transform: convertToBoolean }]
         }] }); })();
 
-const _c0$V = ["pageSlideColumnsManager"];
+const _c0$U = ["pageSlideColumnsManager"];
 const PoTableColumnManagerMaxColumnsDefault = 99999;
 const poTableColumnManagerLiteralsDefault = {
     en: {
@@ -19086,7 +19149,7 @@ class PoTableColumnManagerComponent {
     static ɵfac = function PoTableColumnManagerComponent_Factory(t) { return new (t || PoTableColumnManagerComponent)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(PoLanguageService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTableColumnManagerComponent, selectors: [["po-table-column-manager"]], viewQuery: function PoTableColumnManagerComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(PoPopoverComponent, 5);
-            i0.ɵɵviewQuery(_c0$V, 5);
+            i0.ɵɵviewQuery(_c0$U, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.popover = _t.first);
@@ -19577,9 +19640,9 @@ class PoTableBaseComponent {
      *
      * Permite que as ações em lote, responsável por excluir e exibir a quantidade de itens, sejam escondidas.
      *
-     * @default `false`
+     * @default `true`
      */
-    hideBatchActions = false;
+    hideBatchActions = true;
     /**
      * @optional
      *
@@ -19605,9 +19668,9 @@ class PoTableBaseComponent {
      *
      * Permite que o campo de pesquisa seja escondido.
      *
-     * @default `false`
+     * @default `true`
      */
-    hideTableSearch = false;
+    hideTableSearch = true;
     /**
      * @optional
      *
@@ -21021,7 +21084,7 @@ class PoTableRowTemplateDirective {
             args: ['p-table-row-template-arrow-direction']
         }] }); })();
 
-const _c0$U = ["noColumnsHeader"];
+const _c0$T = ["noColumnsHeader"];
 const _c1$m = ["popup"];
 const _c2$9 = ["tableFooter"];
 const _c3$5 = ["tableWrapper"];
@@ -23178,7 +23241,7 @@ class PoTableComponent extends PoTableBaseComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tableCellTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tableColumnTemplates = _t);
         } }, viewQuery: function PoTableComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$U, 5, ElementRef);
+            i0.ɵɵviewQuery(_c0$T, 5, ElementRef);
             i0.ɵɵviewQuery(_c1$m, 5);
             i0.ɵɵviewQuery(PoModalComponent, 7);
             i0.ɵɵviewQuery(_c2$9, 5, ElementRef);
@@ -24071,19 +24134,23 @@ class PoComboOptionTemplateDirective {
 const poComboLiteralsDefault = {
     en: {
         noData: 'No data found',
-        chooseOption: 'Choose an option'
+        chooseOption: 'Choose an option',
+        clear: 'Clear'
     },
     es: {
         noData: 'Datos no encontrados',
-        chooseOption: 'Elija una opción'
+        chooseOption: 'Elija una opción',
+        clear: 'limpia'
     },
     pt: {
         noData: 'Nenhum dado encontrado',
-        chooseOption: 'Escolha uma opção'
+        chooseOption: 'Escolha uma opção',
+        clear: 'Apagar'
     },
     ru: {
         noData: 'Данные не найдены',
-        chooseOption: 'Выберите опцию'
+        chooseOption: 'Выберите опцию',
+        clear: 'чистый'
     }
 };
 
@@ -24848,6 +24915,9 @@ class PoComboBaseComponent {
         this.updateComboList();
         this.initInputObservable();
         this.updateHasNext();
+        if (this.service || this.filterService) {
+            this.keyupSubscribe.unsubscribe();
+        }
     }
     configAfterSetFilterService(service) {
         if (service) {
@@ -25182,7 +25252,7 @@ class PoComboFilterService {
         type: Injectable
     }], function () { return [{ type: i1$2.HttpClient }]; }, null); })();
 
-const _c0$T = ["containerElement"];
+const _c0$S = ["containerElement"];
 const _c1$l = ["contentElement"];
 const _c2$8 = ["iconArrow"];
 const _c3$4 = ["inp"];
@@ -25197,14 +25267,17 @@ function PoComboComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵclassProp("po-field-icon-disabled", ctx_r1.disabled);
     i0.ɵɵproperty("p-icon", ctx_r1.icon);
 } }
-function PoComboComponent_po_clean_7_Template(rf, ctx) { if (rf & 1) {
+function PoComboComponent_div_7_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "po-clean", 17);
-    i0.ɵɵlistener("p-change-event", function PoComboComponent_po_clean_7_Template_po_clean_p_change_event_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.clear($event)); });
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵlistener("click", function PoComboComponent_div_7_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(); ctx_r12.clear(null); return i0.ɵɵresetView($event.preventDefault()); })("keydown.enter", function PoComboComponent_div_7_Template_div_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r14 = i0.ɵɵnextContext(); ctx_r14.clearAndFocus(); return i0.ɵɵresetView($event.preventDefault()); });
+    i0.ɵɵelement(1, "span", 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("p-element-ref", ctx_r3.inputEl);
+    i0.ɵɵattribute("aria-label", ctx_r3.literals.clean);
+    i0.ɵɵadvance(1);
+    i0.ɵɵclassProp("po-border-focused", !ctx_r3.disabled && ctx_r3.comboOpen);
 } }
 function PoComboComponent_ng_container_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -25213,7 +25286,7 @@ function PoComboComponent_ng_template_11_ng_container_0_Template(rf, ctx) { if (
     i0.ɵɵelementContainer(0);
 } }
 function PoComboComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PoComboComponent_ng_template_11_ng_container_0_Template, 1, 0, "ng-container", 18);
+    i0.ɵɵtemplate(0, PoComboComponent_ng_template_11_ng_container_0_Template, 1, 0, "ng-container", 19);
 } if (rf & 2) {
     i0.ɵɵnextContext();
     const _r10 = i0.ɵɵreference(17);
@@ -25223,23 +25296,23 @@ function PoComboComponent_ng_template_13_ng_template_0_ng_container_0_Template(r
     i0.ɵɵelementContainer(0);
 } }
 function PoComboComponent_ng_template_13_ng_template_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PoComboComponent_ng_template_13_ng_template_0_ng_container_0_Template, 1, 0, "ng-container", 18);
+    i0.ɵɵtemplate(0, PoComboComponent_ng_template_13_ng_template_0_ng_container_0_Template, 1, 0, "ng-container", 19);
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
     const _r10 = i0.ɵɵreference(17);
     i0.ɵɵproperty("ngTemplateOutlet", _r10);
 } }
 function PoComboComponent_ng_template_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PoComboComponent_ng_template_13_ng_template_0_Template, 1, 1, "ng-template", 19);
+    i0.ɵɵtemplate(0, PoComboComponent_ng_template_13_ng_template_0_Template, 1, 1, "ng-template", 20);
 } if (rf & 2) {
     i0.ɵɵnextContext();
     const _r0 = i0.ɵɵreference(2);
     i0.ɵɵproperty("cdkConnectedOverlayOrigin", _r0)("cdkConnectedOverlayOpen", true);
 } }
 function PoComboComponent_ng_template_16_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 20, 21)(2, "po-listbox", 22, 23);
-    i0.ɵɵlistener("p-selectcombo-item", function PoComboComponent_ng_template_16_Template_po_listbox_p_selectcombo_item_2_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r20 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r20.onOptionClick($event, $event.event)); })("p-update-infinite-scroll", function PoComboComponent_ng_template_16_Template_po_listbox_p_update_infinite_scroll_2_listener() { i0.ɵɵrestoreView(_r21); const ctx_r22 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r22.showMoreInfiniteScroll()); })("p-close", function PoComboComponent_ng_template_16_Template_po_listbox_p_close_2_listener() { i0.ɵɵrestoreView(_r21); const ctx_r23 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r23.onCloseCombo()); });
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 21, 22)(2, "po-listbox", 23, 24);
+    i0.ɵɵlistener("p-selectcombo-item", function PoComboComponent_ng_template_16_Template_po_listbox_p_selectcombo_item_2_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r21 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r21.onOptionClick($event, $event.event)); })("p-update-infinite-scroll", function PoComboComponent_ng_template_16_Template_po_listbox_p_update_infinite_scroll_2_listener() { i0.ɵɵrestoreView(_r22); const ctx_r23 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r23.showMoreInfiniteScroll()); })("p-close", function PoComboComponent_ng_template_16_Template_po_listbox_p_close_2_listener() { i0.ɵɵrestoreView(_r22); const ctx_r24 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r24.onCloseCombo()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r11 = i0.ɵɵnextContext();
@@ -25322,6 +25395,7 @@ class PoComboComponent extends PoComboBaseComponent {
     shouldMarkLetters = true;
     infiniteLoading = false;
     _isServerSearching = false;
+    lastKey;
     clickoutListener;
     eventResizeListener;
     filterSubscription;
@@ -25412,8 +25486,8 @@ class PoComboComponent extends PoComboBaseComponent {
         }
         if (key === PoKeyCodeEnum.arrowDown) {
             event.preventDefault();
-            if (!this.service) {
-                this.poListbox?.setFocus();
+            if (this.visibleOptions.length) {
+                this.focusItem();
             }
             this.controlComboVisibility(true);
             this.isFiltering = this.changeOnEnter ? this.isFiltering : false;
@@ -25433,11 +25507,28 @@ class PoComboComponent extends PoComboBaseComponent {
         if (key === PoKeyCodeEnum.enter) {
             this.controlComboVisibility(true);
         }
+        if (key === PoKeyCodeEnum.esc) {
+            if (key === this.lastKey) {
+                this.lastKey = '';
+                if (this.selectedValue) {
+                    this.clearAndFocus();
+                }
+                return;
+            }
+            else {
+                this.onCloseCombo();
+            }
+        }
+        this.lastKey = event.keyCode;
     }
     onKeyUp(event) {
         const key = event.keyCode || event.which;
         const inputValue = event.target.value;
-        const isValidKey = key !== PoKeyCodeEnum.arrowUp && key !== PoKeyCodeEnum.arrowDown && key !== PoKeyCodeEnum.enter;
+        const isValidKey = key !== PoKeyCodeEnum.arrowUp &&
+            key !== PoKeyCodeEnum.arrowDown &&
+            key !== PoKeyCodeEnum.enter &&
+            key !== PoKeyCodeEnum.esc &&
+            key !== PoKeyCodeEnum.tab;
         if (isValidKey) {
             if (inputValue) {
                 if (!this.service && this.previousSearchValue !== inputValue) {
@@ -25480,24 +25571,29 @@ class PoComboComponent extends PoComboBaseComponent {
             });
         }
     }
-    controlApplyFilter(value) {
+    controlApplyFilter(value, isArrowDown) {
         if ((!this.isProcessingValueByTab && (!this.selectedOption || value !== this.selectedOption[this.dynamicLabel])) ||
             !this.cache) {
             this.defaultService.hasNext = true;
             this.page = this.setPage();
             this.options = [];
-            this.applyFilter(value, true);
+            this.applyFilter(value, true, isArrowDown);
         }
         this.isProcessingValueByTab = false;
     }
-    applyFilter(value, reset = false) {
+    applyFilter(value, reset = false, isArrowDown) {
         if (this.defaultService.hasNext) {
             this.controlComboVisibility(false, reset);
             this.isServerSearching = true;
             const param = this.infiniteScroll
                 ? { property: this.fieldLabel, value, page: this.page, pageSize: this.pageSize }
                 : { property: this.fieldLabel, value };
-            this.filterSubscription = this.service.getFilteredData(param, this.filterParams).subscribe(items => this.setOptionsByApplyFilter(value, items, reset), error => this.onErrorFilteredData());
+            this.filterSubscription = this.service.getFilteredData(param, this.filterParams).subscribe(items => {
+                this.setOptionsByApplyFilter(value, items, reset);
+                if (isArrowDown) {
+                    this.focusItem();
+                }
+            }, error => this.onErrorFilteredData());
         }
     }
     setOptionsByApplyFilter(value, items, reset = false) {
@@ -25531,14 +25627,14 @@ class PoComboComponent extends PoComboBaseComponent {
             this.isProcessingValueByTab = false;
         }, this.debounceTime);
     }
-    toggleComboVisibility() {
+    toggleComboVisibility(isButton) {
         if (this.disabled) {
             return;
         }
         if (this.service && !this.disabledInitFilter) {
             this.applyFilterInFirstClick();
         }
-        this.controlComboVisibility(!this.comboOpen);
+        this.controlComboVisibility(!this.comboOpen, false, isButton);
     }
     applyFilterInFirstClick() {
         if (this.isFirstFilter && !this.selectedValue) {
@@ -25547,8 +25643,8 @@ class PoComboComponent extends PoComboBaseComponent {
             this.applyFilter('', scrollingControl);
         }
     }
-    controlComboVisibility(toOpen, reset = false) {
-        toOpen ? this.open(reset) : this.close(reset);
+    controlComboVisibility(toOpen, reset = false, isButton) {
+        toOpen ? this.open(reset, isButton) : this.close(reset);
     }
     onCloseCombo() {
         this.controlComboVisibility(false);
@@ -25567,6 +25663,7 @@ class PoComboComponent extends PoComboBaseComponent {
             this.updateComboList([...this.cacheStaticOptions]);
         }
         this.previousSearchValue = this.selectedView[this.dynamicLabel];
+        this.inputEl.nativeElement.focus();
     }
     calculateScrollTop(selectedItem, index) {
         if (!selectedItem.length || index <= 1) {
@@ -25614,9 +25711,12 @@ class PoComboComponent extends PoComboBaseComponent {
             keyCode !== 40 && // seta
             keyCode !== 93); // windows menu
     }
-    searchOnEnter(value) {
-        if (this.service && !this.selectedView && value.length >= this.filterMinlength) {
-            this.controlApplyFilter(value);
+    searchOnEnterOrArrow(event, value) {
+        if ((event.key === 'ArrowDown' || event.key === 'Enter') &&
+            this.service &&
+            !this.selectedView &&
+            value.length >= this.filterMinlength) {
+            this.controlApplyFilter(value, event.key === 'ArrowDown');
         }
     }
     showMoreInfiniteScroll() {
@@ -25626,6 +25726,10 @@ class PoComboComponent extends PoComboBaseComponent {
         this.page++;
         this.applyFilter('', true);
     }
+    clearAndFocus() {
+        this.clear(null);
+        this.inputEl.nativeElement.focus();
+    }
     adjustContainerPosition() {
         this.controlPosition.adjustPosition(poComboContainerPositionDefault);
     }
@@ -25644,6 +25748,7 @@ class PoComboComponent extends PoComboBaseComponent {
         this.comboIcon = 'po-icon-arrow-down';
         this.removeListeners();
         this.isFiltering = false;
+        this.renderer.removeClass(this.inputEl.nativeElement, 'po-combo-input-focus');
     }
     initializeListeners() {
         this.removeListeners();
@@ -25667,7 +25772,7 @@ class PoComboComponent extends PoComboBaseComponent {
         this.updateComboList([]);
         this.controlComboVisibility(true);
     }
-    open(reset) {
+    open(reset, isButton) {
         this.comboOpen = true;
         if (!reset && this.infiniteScroll) {
             if (!this.getInputValue()) {
@@ -25678,7 +25783,9 @@ class PoComboComponent extends PoComboBaseComponent {
         this.changeDetector.detectChanges();
         this.comboIcon = 'po-icon-arrow-up';
         this.initializeListeners();
-        this.inputEl.nativeElement.focus();
+        isButton
+            ? this.renderer.addClass(this.inputEl.nativeElement, 'po-combo-input-focus')
+            : this.inputEl.nativeElement.focus();
         this.setContainerPosition();
     }
     removeListeners() {
@@ -25706,6 +25813,20 @@ class PoComboComponent extends PoComboBaseComponent {
     setScrollingControl() {
         return this.infiniteScroll ? true : false;
     }
+    focusItem() {
+        this.poListbox?.listboxItemList?.nativeElement.focus();
+        setTimeout(() => {
+            let item;
+            if (this.selectedValue) {
+                item = document.querySelector('.po-listbox-item[aria-selected="true"]');
+            }
+            else {
+                item = document.querySelectorAll('.po-listbox-item')[0];
+            }
+            this.poListbox?.listboxItemList?.nativeElement.focus();
+            item?.focus();
+        });
+    }
     static ɵfac = function PoComboComponent_Factory(t) { return new (t || PoComboComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.IterableDiffers), i0.ɵɵdirectiveInject(PoComboFilterService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(PoControlPositionService), i0.ɵɵdirectiveInject(PoLanguageService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoComboComponent, selectors: [["po-combo"]], contentQueries: function PoComboComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuery(dirIndex, PoComboOptionTemplateDirective, 7);
@@ -25713,7 +25834,7 @@ class PoComboComponent extends PoComboBaseComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.comboOptionTemplate = _t.first);
         } }, viewQuery: function PoComboComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$T, 5, ElementRef);
+            i0.ɵɵviewQuery(_c0$S, 5, ElementRef);
             i0.ɵɵviewQuery(_c1$l, 5, ElementRef);
             i0.ɵɵviewQuery(_c2$8, 7, ElementRef);
             i0.ɵɵviewQuery(_c3$4, 7, ElementRef);
@@ -25738,16 +25859,16 @@ class PoComboComponent extends PoComboBaseComponent {
                     useExisting: forwardRef(() => PoComboComponent),
                     multi: true
                 }
-            ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 18, vars: 28, consts: [[3, "p-disabled", "p-id", "p-label", "p-optional", "p-required", "p-show-required"], ["cdkOverlayOrigin", "", 1, "po-field-container-content"], ["trigger", "cdkOverlayOrigin"], ["class", "po-field-icon-container-left", 4, "ngIf"], ["autocomplete", "off", "type", "text", 1, "po-input", "po-combo-input", 3, "ngClass", "disabled", "id", "placeholder", "required", "click", "keyup", "blur", "keyup.enter", "keydown"], ["inp", ""], [1, "po-field-icon-container-right"], ["class", "po-icon-input", 3, "p-element-ref", "p-change-event", 4, "ngIf"], [3, "click"], ["iconArrow", ""], [4, "ngIf", "ngIfThen", "ngIfElse"], ["dropdownDefault", ""], ["dropdownCDK", ""], [3, "p-help", "p-disabled"], ["dropdownListbox", ""], [1, "po-field-icon-container-left"], [1, "po-field-icon", "po-icon-input", 3, "p-icon"], [1, "po-icon-input", 3, "p-element-ref", "p-change-event"], [4, "ngTemplateOutlet"], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen"], [1, "po-combo-container", 3, "hidden"], ["containerElement", ""], ["p-type", "option", 3, "p-items", "p-field-value", "p-field-label", "p-template", "p-search-value", "p-infinite-loading", "p-infinite-scroll", "p-filtering", "p-cache", "p-filter-mode", "p-visible", "p-is-searching", "p-should-mark-letter", "p-compare-cache", "p-combo-service", "p-infinite-scroll-distance", "p-selectcombo-item", "p-update-infinite-scroll", "p-close"], ["poListbox", "", "contentElement", ""]], template: function PoComboComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 18, vars: 33, consts: [[3, "p-disabled", "p-id", "p-label", "p-optional", "p-required", "p-show-required"], ["cdkOverlayOrigin", "", 1, "po-field-container-content", "po-combo-container-content"], ["trigger", "cdkOverlayOrigin"], ["class", "po-field-icon-container-left", 4, "ngIf"], ["autocomplete", "off", "type", "text", 1, "po-combo-input", 3, "ngClass", "disabled", "id", "placeholder", "required", "click", "keyup", "blur", "keydown"], ["inp", ""], [1, "po-field-icon-container-right"], ["tabindex", "0", "role", "button", "class", "po-combo-clean", 3, "click", "keydown.enter", 4, "ngIf"], [1, "po-icon", "po-field-icon", "po-icon-input", 3, "click"], ["iconArrow", ""], [4, "ngIf", "ngIfThen", "ngIfElse"], ["dropdownDefault", ""], ["dropdownCDK", ""], [3, "p-help", "p-disabled"], ["dropdownListbox", ""], [1, "po-field-icon-container-left"], [1, "po-field-icon", "po-icon-input", 3, "p-icon"], ["tabindex", "0", "role", "button", 1, "po-combo-clean", 3, "click", "keydown.enter"], [1, "po-icon", "po-field-icon", "po-icon-clear-content"], [4, "ngTemplateOutlet"], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen"], [1, "po-combo-container", 3, "hidden"], ["containerElement", ""], ["p-type", "option", 3, "p-items", "p-field-value", "p-field-label", "p-template", "p-search-value", "p-infinite-loading", "p-infinite-scroll", "p-filtering", "p-cache", "p-filter-mode", "p-visible", "p-is-searching", "p-should-mark-letter", "p-compare-cache", "p-combo-service", "p-infinite-scroll-distance", "p-selectcombo-item", "p-update-infinite-scroll", "p-close"], ["poListbox", "", "contentElement", ""]], template: function PoComboComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1, 2);
             i0.ɵɵtemplate(3, PoComboComponent_div_3_Template, 2, 3, "div", 3);
             i0.ɵɵelementStart(4, "input", 4, 5);
-            i0.ɵɵlistener("click", function PoComboComponent_Template_input_click_4_listener() { return ctx.toggleComboVisibility(); })("keyup", function PoComboComponent_Template_input_keyup_4_listener($event) { return ctx.onKeyUp($event); })("blur", function PoComboComponent_Template_input_blur_4_listener() { return ctx.onBlur(); })("keyup.enter", function PoComboComponent_Template_input_keyup_enter_4_listener($event) { return ctx.searchOnEnter($event.target.value); })("keydown", function PoComboComponent_Template_input_keydown_4_listener($event) { return ctx.onKeyDown($event); });
+            i0.ɵɵlistener("click", function PoComboComponent_Template_input_click_4_listener() { return ctx.toggleComboVisibility(); })("keyup", function PoComboComponent_Template_input_keyup_4_listener($event) { return ctx.onKeyUp($event); })("blur", function PoComboComponent_Template_input_blur_4_listener() { return ctx.onBlur(); })("keyup", function PoComboComponent_Template_input_keyup_4_listener($event) { return ctx.searchOnEnterOrArrow($event, $event.target.value); })("keydown", function PoComboComponent_Template_input_keydown_4_listener($event) { return ctx.onKeyDown($event); });
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(6, "div", 6);
-            i0.ɵɵtemplate(7, PoComboComponent_po_clean_7_Template, 1, 1, "po-clean", 7);
+            i0.ɵɵtemplate(7, PoComboComponent_div_7_Template, 2, 3, "div", 7);
             i0.ɵɵelementStart(8, "span", 8, 9);
-            i0.ɵɵlistener("click", function PoComboComponent_Template_span_click_8_listener() { return ctx.toggleComboVisibility(); });
+            i0.ɵɵlistener("click", function PoComboComponent_Template_span_click_8_listener() { return ctx.toggleComboVisibility(true); });
             i0.ɵɵelementEnd()()();
             i0.ɵɵtemplate(10, PoComboComponent_ng_container_10_Template, 1, 0, "ng-container", 10);
             i0.ɵɵtemplate(11, PoComboComponent_ng_template_11_Template, 1, 1, "ng-template", null, 11, i0.ɵɵtemplateRefExtractor);
@@ -25767,15 +25888,14 @@ class PoComboComponent extends PoComboBaseComponent {
             i0.ɵɵproperty("ngClass", ctx.clean && _r2.value ? "po-input-double-icon-right" : "po-input-icon-right")("disabled", ctx.disabled)("id", ctx.id)("placeholder", ctx.disabled ? "" : ctx.placeholder)("required", ctx.required);
             i0.ɵɵattribute("name", ctx.name);
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngIf", ctx.clean && !ctx.disabled);
+            i0.ɵɵproperty("ngIf", ctx.clean && !ctx.disabled && _r2.value);
             i0.ɵɵadvance(1);
-            i0.ɵɵclassMapInterpolate1("po-icon po-field-icon ", ctx.comboIcon, " po-icon-input");
-            i0.ɵɵclassProp("po-field-icon-disabled", ctx.disabled)("po-field-icon", !ctx.disabled);
+            i0.ɵɵclassProp("po-field-icon-disabled", ctx.disabled)("po-icon-arrow-up", ctx.comboOpen)("po-icon-arrow-down", !ctx.comboOpen)("po-field-icon", !ctx.disabled)("po-combo-default-border", !ctx.disabled && _r2.value)("po-combo-background-arrow-up", !ctx.disabled && ctx.comboOpen);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.appendBox)("ngIfThen", _r8)("ngIfElse", _r6);
             i0.ɵɵadvance(5);
             i0.ɵɵproperty("p-help", ctx.help)("p-disabled", ctx.disabled);
-        } }, dependencies: [i1.NgClass, i1.NgIf, i1.NgTemplateOutlet, i5.CdkConnectedOverlay, i5.CdkOverlayOrigin, PoCleanComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoIconComponent, PoListBoxComponent], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [i1.NgClass, i1.NgIf, i1.NgTemplateOutlet, i5.CdkConnectedOverlay, i5.CdkOverlayOrigin, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoIconComponent, PoListBoxComponent], encapsulation: 2, changeDetection: 0 });
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoComboComponent, [{
         type: Component,
@@ -25792,7 +25912,7 @@ class PoComboComponent extends PoComboBaseComponent {
                         useExisting: forwardRef(() => PoComboComponent),
                         multi: true
                     }
-                ], template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon class=\"po-field-icon po-icon-input\" [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      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : 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\n        class=\"po-icon-input\"\n        *ngIf=\"clean && !disabled\"\n        (p-change-event)=\"clear($event)\"\n        [p-element-ref]=\"inputEl\"\n      >\n      </po-clean>\n      <span\n        #iconArrow\n        class=\"po-icon po-field-icon {{ comboIcon }} po-icon-input\"\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  <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n  <ng-template #dropdownDefault>\n    <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n  </ng-template>\n\n  <ng-template #dropdownCDK>\n    <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"true\">\n      <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n    </ng-template>\n  </ng-template>\n\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\n</po-field-container>\n\n<ng-template #dropdownListbox>\n  <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n    <po-listbox\n      #poListbox\n      #contentElement\n      p-type=\"option\"\n      [p-items]=\"visibleOptions\"\n      [p-field-value]=\"dynamicValue\"\n      [p-field-label]=\"dynamicLabel\"\n      [p-template]=\"comboOptionTemplate\"\n      [p-search-value]=\"getInputValue()\"\n      [p-infinite-loading]=\"infiniteLoading\"\n      [p-infinite-scroll]=\"infiniteScroll\"\n      [p-filtering]=\"isFiltering\"\n      [p-cache]=\"cache\"\n      (p-selectcombo-item)=\"onOptionClick($event, $event.event)\"\n      [p-filter-mode]=\"filterMode\"\n      [p-visible]=\"comboOpen\"\n      [p-is-searching]=\"isServerSearching\"\n      [p-should-mark-letter]=\"shouldMarkLetters\"\n      [p-compare-cache]=\"compareObjects(cacheOptions, visibleOptions)\"\n      [p-combo-service]=\"service\"\n      [p-infinite-scroll-distance]=\"infiniteScrollDistance\"\n      (p-update-infinite-scroll)=\"showMoreInfiniteScroll()\"\n      (p-close)=\"onCloseCombo()\"\n    ></po-listbox>\n  </div>\n</ng-template>\n" }]
+                ], template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" class=\"po-field-container-content po-combo-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon class=\"po-field-icon po-icon-input\" [class.po-field-icon-disabled]=\"disabled\" [p-icon]=\"icon\"></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"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      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [required]=\"required\"\n      (click)=\"toggleComboVisibility()\"\n      (keyup)=\"onKeyUp($event)\"\n      (blur)=\"onBlur()\"\n      (keyup)=\"searchOnEnterOrArrow($event, $event.target.value)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <div\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"literals.clean\"\n        *ngIf=\"clean && !disabled && inp.value\"\n        class=\"po-combo-clean\"\n        (click)=\"clear(null); $event.preventDefault()\"\n        (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n      >\n        <span\n          [class.po-border-focused]=\"!disabled && comboOpen\"\n          class=\"po-icon po-field-icon po-icon-clear-content\"\n        ></span>\n      </div>\n      <span\n        #iconArrow\n        class=\"po-icon po-field-icon po-icon-input\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-icon-arrow-up]=\"comboOpen\"\n        [class.po-icon-arrow-down]=\"!comboOpen\"\n        [class.po-field-icon]=\"!disabled\"\n        [class.po-combo-default-border]=\"!disabled && inp.value\"\n        [class.po-combo-background-arrow-up]=\"!disabled && comboOpen\"\n        (click)=\"toggleComboVisibility(true)\"\n      >\n      </span>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n  <ng-template #dropdownDefault>\n    <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n  </ng-template>\n\n  <ng-template #dropdownCDK>\n    <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"true\">\n      <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n    </ng-template>\n  </ng-template>\n\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\n</po-field-container>\n\n<ng-template #dropdownListbox>\n  <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n    <po-listbox\n      #poListbox\n      #contentElement\n      p-type=\"option\"\n      [p-items]=\"visibleOptions\"\n      [p-field-value]=\"dynamicValue\"\n      [p-field-label]=\"dynamicLabel\"\n      [p-template]=\"comboOptionTemplate\"\n      [p-search-value]=\"getInputValue()\"\n      [p-infinite-loading]=\"infiniteLoading\"\n      [p-infinite-scroll]=\"infiniteScroll\"\n      [p-filtering]=\"isFiltering\"\n      [p-cache]=\"cache\"\n      (p-selectcombo-item)=\"onOptionClick($event, $event.event)\"\n      [p-filter-mode]=\"filterMode\"\n      [p-visible]=\"comboOpen\"\n      [p-is-searching]=\"isServerSearching\"\n      [p-should-mark-letter]=\"shouldMarkLetters\"\n      [p-compare-cache]=\"compareObjects(cacheOptions, visibleOptions)\"\n      [p-combo-service]=\"service\"\n      [p-infinite-scroll-distance]=\"infiniteScrollDistance\"\n      (p-update-infinite-scroll)=\"showMoreInfiniteScroll()\"\n      (p-close)=\"onCloseCombo()\"\n    ></po-listbox>\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: PoLanguageService }]; }, { comboOptionTemplate: [{
             type: ContentChild,
             args: [PoComboOptionTemplateDirective, { static: true }]
@@ -26421,7 +26541,7 @@ class PoDatepickerRangeBaseComponent {
             args: ['p-locale']
         }] }); })();
 
-const _c0$S = ["dateRangeField"];
+const _c0$R = ["dateRangeField"];
 const _c1$k = ["endDateInput"];
 const _c2$7 = ["startDateInput"];
 const _c3$3 = ["iconCalendar"];
@@ -26866,7 +26986,7 @@ class PoDatepickerRangeComponent extends PoDatepickerRangeBaseComponent {
     }
     static ɵfac = function PoDatepickerRangeComponent_Factory(t) { return new (t || PoDatepickerRangeComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(PoControlPositionService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(PoLanguageService), i0.ɵɵdirectiveInject(PoDateService), i0.ɵɵdirectiveInject(i0.ElementRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDatepickerRangeComponent, selectors: [["po-datepicker-range"]], viewQuery: function PoDatepickerRangeComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$S, 7, ElementRef);
+            i0.ɵɵviewQuery(_c0$R, 7, ElementRef);
             i0.ɵɵviewQuery(_c1$k, 7, ElementRef);
             i0.ɵɵviewQuery(_c2$7, 7, ElementRef);
             i0.ɵɵviewQuery(_c3$3, 7, ElementRef);
@@ -27410,7 +27530,7 @@ class PoInputBaseComponent {
             args: ['p-mask-format-model']
         }] }); })();
 
-const _c0$R = ["inp"];
+const _c0$Q = ["inp"];
 function PoDecimalComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 8);
     i0.ɵɵelement(1, "po-icon", 9);
@@ -28022,7 +28142,7 @@ class PoDecimalComponent extends PoInputBaseComponent {
     }
     static ɵfac = function PoDecimalComponent_Factory(t) { return new (t || PoDecimalComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(PoLanguageService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDecimalComponent, selectors: [["po-decimal"]], viewQuery: function PoDecimalComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$R, 7, ElementRef);
+            i0.ɵɵviewQuery(_c0$Q, 7, ElementRef);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
@@ -28096,7 +28216,7 @@ class PoDecimalComponent extends PoInputBaseComponent {
             args: ['p-max']
         }] }); })();
 
-const _c0$Q = ["inp"];
+const _c0$P = ["inp"];
 /* eslint-disable @angular-eslint/directive-class-suffix */
 class PoInputGeneric extends PoInputBaseComponent {
     inputEl;
@@ -28296,7 +28416,7 @@ class PoInputGeneric extends PoInputBaseComponent {
     }
     static ɵfac = function PoInputGeneric_Factory(t) { return new (t || PoInputGeneric)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoInputGeneric, viewQuery: function PoInputGeneric_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$Q, 7, ElementRef);
+            i0.ɵɵviewQuery(_c0$P, 7, ElementRef);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
@@ -28459,7 +28579,7 @@ class PoEmailComponent extends PoInputGeneric {
         args: [{ selector: 'po-email', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$4, template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [p-icon]=\"icon\"\n      ></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-right]=\"clean\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean\n        class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        *ngIf=\"clean && !disabled && !readonly\"\n        [p-element-ref]=\"inputEl\"\n        (p-change-event)=\"clear($event)\"\n      >\n      </po-clean>\n    </div>\n  </div>\n\n  <po-field-container-bottom\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-pattern]=\"getErrorPattern()\"\n  ></po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, null); })();
 
-const _c0$P = ["inp"];
+const _c0$O = ["inp"];
 function PoInputComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 8);
     i0.ɵɵelement(1, "po-icon", 9);
@@ -28513,7 +28633,7 @@ class PoInputComponent extends PoInputGeneric {
     }
     static ɵfac = function PoInputComponent_Factory(t) { return new (t || PoInputComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoInputComponent, selectors: [["po-input"]], viewQuery: function PoInputComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$P, 7);
+            i0.ɵɵviewQuery(_c0$O, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inp = _t.first);
@@ -29518,7 +29638,7 @@ class PoDynamicFormValidationService extends PoDynamicFormOperation {
         type: Injectable
     }], function () { return [{ type: i1$2.HttpClient }]; }, null); })();
 
-const _c0$O = ["fieldsComponent"];
+const _c0$N = ["fieldsComponent"];
 const _c1$j = ["dynamicForm"];
 function PoDynamicFormComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -29694,7 +29814,7 @@ class PoDynamicFormComponent extends PoDynamicFormBaseComponent {
     }
     static ɵfac = function PoDynamicFormComponent_Factory(t) { return new (t || PoDynamicFormComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(PoDynamicFormLoadService), i0.ɵɵdirectiveInject(PoDynamicFormValidationService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDynamicFormComponent, selectors: [["po-dynamic-form"]], viewQuery: function PoDynamicFormComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$O, 5);
+            i0.ɵɵviewQuery(_c0$N, 5);
             i0.ɵɵviewQuery(_c1$j, 5);
         } if (rf & 2) {
             let _t;
@@ -29721,7 +29841,7 @@ class PoDynamicFormComponent extends PoDynamicFormBaseComponent {
             args: ['dynamicForm']
         }] }); })();
 
-const _c0$N = ["inpsearch"];
+const _c0$M = ["inpsearch"];
 const _c1$i = ["container"];
 function PoLookupModalComponent_div_9_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
@@ -29852,13 +29972,13 @@ class PoLookupModalComponent extends PoLookupModalBaseComponent {
     }
     static ɵfac = function PoLookupModalComponent_Factory(t) { return new (t || PoLookupModalComponent)(i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver), i0.ɵɵdirectiveInject(PoLanguageService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoLookupModalComponent, selectors: [["po-lookup-modal"]], viewQuery: function PoLookupModalComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$N, 5);
+            i0.ɵɵviewQuery(_c0$M, 5);
             i0.ɵɵviewQuery(_c1$i, 5, ViewContainerRef);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputSearchEl = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.container = _t.first);
-        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 18, vars: 27, consts: [["p-click-out", "false", "p-hide-close", "false", "p-size", "lg", 3, "p-primary-action", "p-secondary-action", "p-title"], [3, "hidden"], [1, "po-lookup-header", "po-pull-right", 3, "p-optional"], [1, "po-lookup-filter-content"], [1, "po-field-icon-container-right"], [1, "po-icon", "po-field-icon", "po-icon-search", "po-icon-input", 3, "click"], ["iconLookup", ""], ["name", "contentSearch", "type", "text", 1, "po-input", "po-input-icon-right", 3, "ngModel", "placeholder", "ngModelChange"], ["inpsearch", ""], ["class", "po-lookup-advanced-search", 4, "ngIf"], ["class", "po-md-12", 3, "p-disclaimers", "p-title", "p-change", 4, "ngIf"], [1, "po-row", "po-lookup-container-table"], [1, "po-md-12", 3, "p-selectable", "p-hide-detail", "p-single-select", "p-hide-action-fixed-columns", "p-sort", "p-hide-table-search", "p-columns", "p-height", "p-hide-columns-manager", "p-items", "p-literals", "p-loading", "p-show-more-disabled", "p-infinite-scroll", "p-hide-batch-actions", "p-selected", "p-unselected", "p-all-selected", "p-all-unselected", "p-show-more", "p-sort-by", "p-change-visible-columns", "p-restore-column-manager"], ["poTable", ""], ["class", "po-md-12", 3, "p-disclaimers", "p-remove", "p-remove-all", 4, "ngIf"], ["container", ""], [1, "po-lookup-advanced-search"], ["tabindex", "0", 1, "po-lookup-advanced-search-link", "po-icon-input", 3, "click", "keydown.enter"], [1, "po-md-12", 3, "p-disclaimers", "p-title", "p-change"], [1, "po-md-12", 3, "p-disclaimers", "p-remove", "p-remove-all"]], template: function PoLookupModalComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 18, vars: 25, consts: [["p-click-out", "false", "p-hide-close", "false", "p-size", "lg", 3, "p-primary-action", "p-secondary-action", "p-title"], [3, "hidden"], [1, "po-lookup-header", "po-pull-right", 3, "p-optional"], [1, "po-lookup-filter-content"], [1, "po-field-icon-container-right"], [1, "po-icon", "po-field-icon", "po-icon-search", "po-icon-input", 3, "click"], ["iconLookup", ""], ["name", "contentSearch", "type", "text", 1, "po-input", "po-input-icon-right", 3, "ngModel", "placeholder", "ngModelChange"], ["inpsearch", ""], ["class", "po-lookup-advanced-search", 4, "ngIf"], ["class", "po-md-12", 3, "p-disclaimers", "p-title", "p-change", 4, "ngIf"], [1, "po-row", "po-lookup-container-table"], [1, "po-md-12", 3, "p-selectable", "p-hide-detail", "p-single-select", "p-hide-action-fixed-columns", "p-sort", "p-columns", "p-height", "p-hide-columns-manager", "p-items", "p-literals", "p-loading", "p-show-more-disabled", "p-infinite-scroll", "p-selected", "p-unselected", "p-all-selected", "p-all-unselected", "p-show-more", "p-sort-by", "p-change-visible-columns", "p-restore-column-manager"], ["poTable", ""], ["class", "po-md-12", 3, "p-disclaimers", "p-remove", "p-remove-all", 4, "ngIf"], ["container", ""], [1, "po-lookup-advanced-search"], ["tabindex", "0", 1, "po-lookup-advanced-search-link", "po-icon-input", 3, "click", "keydown.enter"], [1, "po-md-12", 3, "p-disclaimers", "p-title", "p-change"], [1, "po-md-12", 3, "p-disclaimers", "p-remove", "p-remove-all"]], template: function PoLookupModalComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "po-modal", 0)(1, "div", 1)(2, "po-field-container", 2)(3, "div", 3)(4, "div", 4)(5, "span", 5, 6);
             i0.ɵɵlistener("click", function PoLookupModalComponent_Template_span_click_5_listener() { return ctx.search(); });
             i0.ɵɵelementEnd()();
@@ -29891,7 +30011,7 @@ class PoLookupModalComponent extends PoLookupModalBaseComponent {
             i0.ɵɵadvance(1);
             i0.ɵɵattribute("data-multiple", ctx.multiple);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("p-selectable", true)("p-hide-detail", true)("p-single-select", !ctx.multiple)("p-hide-action-fixed-columns", true)("p-sort", true)("p-hide-table-search", true)("p-columns", ctx.columns)("p-height", ctx.tableHeight)("p-hide-columns-manager", ctx.hideColumnsManager)("p-items", ctx.items)("p-literals", ctx.tableLiterals)("p-loading", ctx.isLoading)("p-show-more-disabled", !ctx.hasNext)("p-infinite-scroll", ctx.infiniteScroll)("p-hide-batch-actions", true);
+            i0.ɵɵproperty("p-selectable", true)("p-hide-detail", true)("p-single-select", !ctx.multiple)("p-hide-action-fixed-columns", true)("p-sort", true)("p-columns", ctx.columns)("p-height", ctx.tableHeight)("p-hide-columns-manager", ctx.hideColumnsManager)("p-items", ctx.items)("p-literals", ctx.tableLiterals)("p-loading", ctx.isLoading)("p-show-more-disabled", !ctx.hasNext)("p-infinite-scroll", ctx.infiniteScroll);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.multiple);
             i0.ɵɵadvance(1);
@@ -29900,7 +30020,7 @@ class PoLookupModalComponent extends PoLookupModalBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoLookupModalComponent, [{
         type: Component,
-        args: [{ selector: 'po-lookup-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-modal\n  p-click-out=\"false\"\n  p-hide-close=\"false\"\n  p-size=\"lg\"\n  [p-primary-action]=\"isAdvancedFilter ? primaryActionAdvancedFilter : primaryAction\"\n  [p-secondary-action]=\"isAdvancedFilter ? secondaryActionAdvancedFilter : secondaryAction\"\n  [p-title]=\"isAdvancedFilter ? advancedFilterModalTitle : title\"\n>\n  <div [hidden]=\"isAdvancedFilter\">\n    <po-field-container class=\"po-lookup-header po-pull-right\" [p-optional]=\"false\">\n      <div class=\"po-lookup-filter-content\">\n        <div class=\"po-field-icon-container-right\">\n          <span #iconLookup class=\"po-icon po-field-icon po-icon-search po-icon-input\" (click)=\"search()\"> </span>\n        </div>\n\n        <input\n          #inpsearch\n          class=\"po-input po-input-icon-right\"\n          name=\"contentSearch\"\n          [(ngModel)]=\"searchValue\"\n          [placeholder]=\"literals.modalPlaceholder\"\n          type=\"text\"\n        />\n      </div>\n\n      <div *ngIf=\"advancedFilters && advancedFilters.length > 0\" class=\"po-lookup-advanced-search\">\n        <span\n          class=\"po-lookup-advanced-search-link po-icon-input\"\n          tabindex=\"0\"\n          (click)=\"onAdvancedFilter()\"\n          (keydown.enter)=\"onAdvancedFilter()\"\n        >\n          {{ literals.modalAdvancedSearch }}\n        </span>\n      </div>\n    </po-field-container>\n\n    <!-- DISCLAIMER -->\n    <po-disclaimer-group\n      *ngIf=\"!!disclaimerGroup\"\n      class=\"po-md-12\"\n      [p-disclaimers]=\"disclaimerGroup?.disclaimers\"\n      [p-title]=\"disclaimerGroup?.title\"\n      (p-change)=\"onChangeDisclaimerGroup()\"\n    >\n    </po-disclaimer-group>\n\n    <div class=\"po-row po-lookup-container-table\" [attr.data-multiple]=\"multiple\">\n      <po-table\n        #poTable\n        class=\"po-md-12\"\n        [p-selectable]=\"true\"\n        [p-hide-detail]=\"true\"\n        [p-single-select]=\"!multiple\"\n        [p-hide-action-fixed-columns]=\"true\"\n        [p-sort]=\"true\"\n        [p-hide-table-search]=\"true\"\n        [p-columns]=\"columns\"\n        [p-height]=\"tableHeight\"\n        [p-hide-columns-manager]=\"hideColumnsManager\"\n        [p-items]=\"items\"\n        [p-literals]=\"tableLiterals\"\n        [p-loading]=\"isLoading\"\n        [p-show-more-disabled]=\"!hasNext\"\n        [p-infinite-scroll]=\"infiniteScroll\"\n        [p-hide-batch-actions]=\"true\"\n        (p-selected)=\"onSelect($event)\"\n        (p-unselected)=\"onUnselect($event)\"\n        (p-all-selected)=\"onAllSelected($event)\"\n        (p-all-unselected)=\"onAllUnselected($event)\"\n        (p-show-more)=\"showMoreEvent()\"\n        (p-sort-by)=\"sortBy($event)\"\n        (p-change-visible-columns)=\"changeVisibleColumns.emit($event)\"\n        (p-restore-column-manager)=\"columnRestoreManager.emit($event)\"\n      >\n      </po-table>\n    </div>\n\n    <!-- DISCLAIMER -->\n    <po-disclaimer-group\n      *ngIf=\"multiple\"\n      class=\"po-md-12\"\n      [p-disclaimers]=\"selecteds\"\n      (p-remove)=\"onUnselectFromDisclaimer($event.removedDisclaimer)\"\n      (p-remove-all)=\"onAllUnselected($event)\"\n    >\n    </po-disclaimer-group>\n  </div>\n  <div [hidden]=\"!isAdvancedFilter\">\n    <ng-container #container> </ng-container>\n  </div>\n</po-modal>\n" }]
+        args: [{ selector: 'po-lookup-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-modal\n  p-click-out=\"false\"\n  p-hide-close=\"false\"\n  p-size=\"lg\"\n  [p-primary-action]=\"isAdvancedFilter ? primaryActionAdvancedFilter : primaryAction\"\n  [p-secondary-action]=\"isAdvancedFilter ? secondaryActionAdvancedFilter : secondaryAction\"\n  [p-title]=\"isAdvancedFilter ? advancedFilterModalTitle : title\"\n>\n  <div [hidden]=\"isAdvancedFilter\">\n    <po-field-container class=\"po-lookup-header po-pull-right\" [p-optional]=\"false\">\n      <div class=\"po-lookup-filter-content\">\n        <div class=\"po-field-icon-container-right\">\n          <span #iconLookup class=\"po-icon po-field-icon po-icon-search po-icon-input\" (click)=\"search()\"> </span>\n        </div>\n\n        <input\n          #inpsearch\n          class=\"po-input po-input-icon-right\"\n          name=\"contentSearch\"\n          [(ngModel)]=\"searchValue\"\n          [placeholder]=\"literals.modalPlaceholder\"\n          type=\"text\"\n        />\n      </div>\n\n      <div *ngIf=\"advancedFilters && advancedFilters.length > 0\" class=\"po-lookup-advanced-search\">\n        <span\n          class=\"po-lookup-advanced-search-link po-icon-input\"\n          tabindex=\"0\"\n          (click)=\"onAdvancedFilter()\"\n          (keydown.enter)=\"onAdvancedFilter()\"\n        >\n          {{ literals.modalAdvancedSearch }}\n        </span>\n      </div>\n    </po-field-container>\n\n    <!-- DISCLAIMER -->\n    <po-disclaimer-group\n      *ngIf=\"!!disclaimerGroup\"\n      class=\"po-md-12\"\n      [p-disclaimers]=\"disclaimerGroup?.disclaimers\"\n      [p-title]=\"disclaimerGroup?.title\"\n      (p-change)=\"onChangeDisclaimerGroup()\"\n    >\n    </po-disclaimer-group>\n\n    <div class=\"po-row po-lookup-container-table\" [attr.data-multiple]=\"multiple\">\n      <po-table\n        #poTable\n        class=\"po-md-12\"\n        [p-selectable]=\"true\"\n        [p-hide-detail]=\"true\"\n        [p-single-select]=\"!multiple\"\n        [p-hide-action-fixed-columns]=\"true\"\n        [p-sort]=\"true\"\n        [p-columns]=\"columns\"\n        [p-height]=\"tableHeight\"\n        [p-hide-columns-manager]=\"hideColumnsManager\"\n        [p-items]=\"items\"\n        [p-literals]=\"tableLiterals\"\n        [p-loading]=\"isLoading\"\n        [p-show-more-disabled]=\"!hasNext\"\n        [p-infinite-scroll]=\"infiniteScroll\"\n        (p-selected)=\"onSelect($event)\"\n        (p-unselected)=\"onUnselect($event)\"\n        (p-all-selected)=\"onAllSelected($event)\"\n        (p-all-unselected)=\"onAllUnselected($event)\"\n        (p-show-more)=\"showMoreEvent()\"\n        (p-sort-by)=\"sortBy($event)\"\n        (p-change-visible-columns)=\"changeVisibleColumns.emit($event)\"\n        (p-restore-column-manager)=\"columnRestoreManager.emit($event)\"\n      >\n      </po-table>\n    </div>\n\n    <!-- DISCLAIMER -->\n    <po-disclaimer-group\n      *ngIf=\"multiple\"\n      class=\"po-md-12\"\n      [p-disclaimers]=\"selecteds\"\n      (p-remove)=\"onUnselectFromDisclaimer($event.removedDisclaimer)\"\n      (p-remove-all)=\"onAllUnselected($event)\"\n    >\n    </po-disclaimer-group>\n  </div>\n  <div [hidden]=\"!isAdvancedFilter\">\n    <ng-container #container> </ng-container>\n  </div>\n</po-modal>\n" }]
     }], function () { return [{ type: i0.ComponentFactoryResolver }, { type: PoLanguageService }, { type: i0.ChangeDetectorRef }]; }, { inputSearchEl: [{
             type: ViewChild,
             args: ['inpsearch']
@@ -30738,7 +30858,7 @@ class PoLookupBaseComponent {
             args: ['p-disabled']
         }] }); })();
 
-const _c0$M = ["inp"];
+const _c0$L = ["inp"];
 function PoLookupComponent_div_1_po_clean_4_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "po-clean", 11);
@@ -31138,7 +31258,7 @@ class PoLookupComponent extends PoLookupBaseComponent {
     }
     static ɵfac = function PoLookupComponent_Factory(t) { return new (t || PoLookupComponent)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(PoLookupFilterService), i0.ɵɵdirectiveInject(PoLookupModalService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.Injector)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoLookupComponent, selectors: [["po-lookup"]], viewQuery: function PoLookupComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$M, 5, ElementRef);
+            i0.ɵɵviewQuery(_c0$L, 5, ElementRef);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
@@ -31236,22 +31356,26 @@ const poMultiselectLiteralsDefault = {
     en: {
         noData: 'No data found',
         placeholderSearch: 'Search',
-        selectAll: 'Select all'
+        selectAll: 'Select all',
+        selectItem: 'Select items'
     },
     es: {
         noData: 'Datos no encontrados',
         placeholderSearch: 'Busca',
-        selectAll: 'Seleccionar todo'
+        selectAll: 'Seleccionar todo',
+        selectItem: 'Seleccionar items'
     },
     pt: {
         noData: 'Nenhum dado encontrado',
         placeholderSearch: 'Buscar',
-        selectAll: 'Selecionar todos'
+        selectAll: 'Selecionar todos',
+        selectItem: 'Selecionar itens'
     },
     ru: {
         noData: 'Данные не найдены',
         placeholderSearch: 'искать',
-        selectAll: 'Выбрать все'
+        selectAll: 'Выбрать все',
+        selectItem: 'Выбрать элементы'
     }
 };
 /**
@@ -31267,6 +31391,23 @@ const poMultiselectLiteralsDefault = {
  * po-select, po-combo ou po-radio-group.
  *
  * Com ele também é possível definir uma lista à partir da requisição de um serviço definido em `p-filter-service`.
+ *
+ * #### Boas práticas
+ *
+ * - Caso a lista apresente menos de 5 itens, considere utilizar outro componente;
+ * - Não utilize o multiselect caso o usuário possa selecionar apenas uma opção. Para esse caso, opte por utilizar po-radio ou po-select;
+ * - Sempre que possível, agrupe as opções e use labels curtas para descrever o conteúdo. Exemplo: em uma combinação de alimentos,
+ * as opções podem ser agrupadas por Vegetais, Frutas, etc;
+ *
+ * #### 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:
+ *
+ * - Quando em foco, o multiselect abre o listbox usando as teclas de Espaço ou Enter do teclado.
+ * - Utilize as teclas Arrow Up [seta para cima] ou Arrow Down [seta para baixo] do teclado para navegar entre os itens do listbox.
+ * - Utilize a tecla Esc do teclado para fechar o listbox.
+ * - Quando um item estiver em foco, utilize as teclas Arrow Right [seta para direita] ou Arrow Left [seta para esquerda] do teclado para navegar entre eles.
+ * - Quando em foco e havendo um item ou mais já selecionado, utilize a tecla Arrow Down [seta para baixo] do teclado para abrir o listbox.
  */
 class PoMultiselectBaseComponent {
     /**
@@ -31346,7 +31487,7 @@ class PoMultiselectBaseComponent {
     appendBox = false;
     selectedOptions = [];
     visibleOptionsDropdown = [];
-    visibleDisclaimers = [];
+    visibleTags = [];
     isServerSearching = false;
     isFirstFilter = true;
     filterSubject = new Subject();
@@ -31459,7 +31600,9 @@ class PoMultiselectBaseComponent {
      * ```
      *  const customLiterals: PoMultiselectLiterals = {
      *    noData: 'Nenhum dado encontrado',
-     *    placeholderSearch: 'Buscar'
+     *    placeholderSearch: 'Buscar',
+     *    selectAll: 'Select all',
+     *    selectItem: 'Select items'
      *  };
      * ```
      *
@@ -31968,7 +32111,7 @@ class PoMultiselectFilterService {
         type: Injectable
     }], function () { return [{ type: i1$2.HttpClient }]; }, null); })();
 
-const _c0$L = ["dropdownElement"];
+const _c0$K = ["dropdownElement"];
 const _c1$h = ["iconElement"];
 const _c2$6 = ["inputElement"];
 function PoMultiselectComponent_span_5_Template(rf, ctx) { if (rf & 1) {
@@ -31978,18 +32121,19 @@ function PoMultiselectComponent_span_5_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.placeholder, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.placeholder ? ctx_r2.placeholder : ctx_r2.literals.selectItem, " ");
 } }
-function PoMultiselectComponent_po_disclaimer_6_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "po-disclaimer", 16);
-    i0.ɵɵlistener("click", function PoMultiselectComponent_po_disclaimer_6_Template_po_disclaimer_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r14); const disclaimer_r12 = restoredCtx.$implicit; const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.openDropdown(disclaimer_r12[ctx_r13.fieldValue] === "")); })("p-close-action", function PoMultiselectComponent_po_disclaimer_6_Template_po_disclaimer_p_close_action_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r14); const disclaimer_r12 = restoredCtx.$implicit; const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.closeDisclaimer(disclaimer_r12[ctx_r15.fieldValue])); });
+function PoMultiselectComponent_po_tag_6_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "po-tag", 16);
+    i0.ɵɵlistener("p-close", function PoMultiselectComponent_po_tag_6_Template_po_tag_p_close_0_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r15); const tag_r12 = restoredCtx.$implicit; const ctx_r14 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r14.closeTag(tag_r12[ctx_r14.fieldValue], $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const disclaimer_r12 = ctx.$implicit;
+    const tag_r12 = ctx.$implicit;
+    const i_r13 = ctx.index;
     const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("po-clickable", disclaimer_r12[ctx_r3.fieldValue] === "" && !ctx_r3.disabled);
-    i0.ɵɵproperty("p-label", disclaimer_r12[ctx_r3.fieldLabel])("p-value", disclaimer_r12[ctx_r3.fieldValue])("p-hide-close", disclaimer_r12[ctx_r3.fieldValue] === "" || ctx_r3.disabled);
+    i0.ɵɵclassProp("po-clickable", tag_r12[ctx_r3.fieldValue] === "" && !ctx_r3.disabled);
+    i0.ɵɵproperty("p-value", tag_r12[ctx_r3.fieldLabel])("p-literals", i_r13 + 1 === ctx_r3.visibleTags.length && ctx_r3.hasMoreTag ? ctx_r3.literalsTag : undefined)("p-removable", true)("p-disabled", ctx_r3.disabled);
 } }
 function PoMultiselectComponent_ng_container_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -32024,7 +32168,7 @@ function PoMultiselectComponent_ng_template_13_Template(rf, ctx) { if (rf & 1) {
 function PoMultiselectComponent_ng_template_16_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "po-multiselect-dropdown", 19, 20);
-    i0.ɵɵlistener("p-change", function PoMultiselectComponent_ng_template_16_Template_po_multiselect_dropdown_p_change_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r20 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r20.changeItems($event)); })("p-change-search", function PoMultiselectComponent_ng_template_16_Template_po_multiselect_dropdown_p_change_search_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r22 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r22.changeSearch($event)); })("p-close-dropdown", function PoMultiselectComponent_ng_template_16_Template_po_multiselect_dropdown_p_close_dropdown_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r23 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r23.controlDropdownVisibility(false)); });
+    i0.ɵɵlistener("p-change", function PoMultiselectComponent_ng_template_16_Template_po_multiselect_dropdown_p_change_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r20 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r20.changeItems($event)); })("p-change-search", function PoMultiselectComponent_ng_template_16_Template_po_multiselect_dropdown_p_change_search_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r22 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r22.changeSearch($event)); })("p-close-dropdown", function PoMultiselectComponent_ng_template_16_Template_po_multiselect_dropdown_p_close_dropdown_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r23 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r23.controlDropdownVisibility(false)); })("keydown", function PoMultiselectComponent_ng_template_16_Template_po_multiselect_dropdown_keydown_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r24 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r24.onKeyDownDropdown($event, 0)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r11 = i0.ɵɵnextContext();
@@ -32032,6 +32176,22 @@ function PoMultiselectComponent_ng_template_16_Template(rf, ctx) { if (rf & 1) {
 } }
 const poMultiselectContainerOffset = 8;
 const poMultiselectContainerPositionDefault = 'bottom';
+const poMultiselectInputPaddingRight = 52;
+const poMultiselectSpaceBetweenTags = 8;
+const literalsTagRemoveOthers = {
+    pt: {
+        remove: 'Remover todos os itens selecionados'
+    },
+    ru: {
+        remove: 'Удалить все выбранные элементы'
+    },
+    es: {
+        remove: 'Eliminar todos los elementos seleccionados'
+    },
+    en: {
+        remove: 'Clear all selected items'
+    }
+};
 /* istanbul ignore next */
 const providers$1 = [
     PoMultiselectFilterService,
@@ -32102,13 +32262,16 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
     dropdown;
     iconElement;
     inputElement;
-    disclaimerOffset = 0;
+    literalsTag;
     dropdownIcon = 'po-icon-arrow-down';
     dropdownOpen = false;
     initialized = false;
-    positionDisclaimerExtra;
+    hasMoreTag;
     timeoutResize;
     visibleElement = false;
+    subscription = new Subscription();
+    enterCloseTag = false;
+    initCalculateItems = true;
     isCalculateVisibleItems = true;
     cacheOptions;
     constructor(renderer, changeDetector, el, controlPosition, defaultService, languageService) {
@@ -32118,6 +32281,11 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         this.el = el;
         this.controlPosition = controlPosition;
         this.defaultService = defaultService;
+        const language = languageService.getShortLanguage();
+        this.literalsTag = {
+            ...literalsTagRemoveOthers[poLocaleDefault],
+            ...literalsTagRemoveOthers[language]
+        };
     }
     ngAfterViewInit() {
         if (this.autoFocus) {
@@ -32132,7 +32300,7 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
     }
     ngDoCheck() {
         const inputWidth = this.inputElement.nativeElement.offsetWidth;
-        // Permite que os disclaimers sejam calculados na primeira vez que o componente torna-se visível,
+        // Permite que as tags sejam calculadas na primeira vez que o componente torna-se visível,
         // evitando com isso, problemas com Tabs ou Divs que iniciem escondidas.
         if ((inputWidth && !this.visibleElement && this.initialized) || (inputWidth && this.isCalculateVisibleItems)) {
             this.debounceResize();
@@ -32143,6 +32311,7 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         this.removeListeners();
         this.getObjectsByValuesSubscription?.unsubscribe();
         this.filterSubject?.unsubscribe();
+        this.subscription.unsubscribe();
     }
     /**
      * Função que atribui foco ao componente.
@@ -32167,46 +32336,54 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         }
     }
     getInputWidth() {
-        return this.el.nativeElement.querySelector('.po-input').offsetWidth - 40;
+        return this.el.nativeElement.querySelector('.po-multiselect-input').offsetWidth - poMultiselectInputPaddingRight;
     }
-    getDisclaimersWidth() {
-        const disclaimers = this.el.nativeElement.querySelectorAll('po-disclaimer');
-        return Array.from(disclaimers).map(disclaimer => disclaimer['offsetWidth']);
+    getTagsWidth() {
+        const tags = this.el.nativeElement.querySelectorAll('po-tag');
+        return Array.from(tags).map(tag => tag['offsetWidth']);
     }
     calculateVisibleItems() {
-        const disclaimersWidth = this.getDisclaimersWidth();
+        this.hasMoreTag = false;
+        const tagsWidth = this.getTagsWidth();
         const inputWidth = this.getInputWidth();
-        const extraDisclaimerSize = 38;
-        const disclaimersVisible = disclaimersWidth[0];
-        this.visibleDisclaimers = [];
+        const extraTagSize = 63;
+        const tagsVisible = tagsWidth[0];
+        this.visibleTags = [];
         if (inputWidth > 0) {
             let sum = 0;
             let i = 0;
             for (i = 0; i < this.selectedOptions.length; i++) {
-                sum += disclaimersWidth[i];
-                this.visibleDisclaimers.push(this.selectedOptions[i]);
+                sum += tagsWidth[i] + poMultiselectSpaceBetweenTags;
+                this.visibleTags.push(this.selectedOptions[i]);
                 if (sum > inputWidth) {
-                    sum -= disclaimersWidth[i];
+                    sum -= tagsWidth[i];
                     this.isCalculateVisibleItems = false;
                     break;
                 }
             }
-            if (disclaimersVisible || !this.selectedOptions.length) {
+            if (tagsVisible || !this.selectedOptions.length) {
                 if (i === this.selectedOptions.length) {
                     this.isCalculateVisibleItems = false;
                     return;
                 }
-                if (sum + extraDisclaimerSize > inputWidth) {
-                    this.visibleDisclaimers.splice(-2, 2);
+                this.hasMoreTag = true;
+                if (sum + extraTagSize > inputWidth) {
+                    this.visibleTags.splice(-2, 2);
                     const label = '+' + (this.selectedOptions.length + 1 - i).toString();
-                    this.visibleDisclaimers.push({ [this.fieldValue]: '', [this.fieldLabel]: label });
+                    this.visibleTags.push({ [this.fieldValue]: '', [this.fieldLabel]: label });
                 }
                 else {
-                    this.visibleDisclaimers.splice(-1, 1);
+                    this.visibleTags.splice(-1, 1);
                     const label = '+' + (this.selectedOptions.length - i).toString();
-                    this.visibleDisclaimers.push({ [this.fieldValue]: '', [this.fieldLabel]: label });
+                    this.visibleTags.push({ [this.fieldValue]: '', [this.fieldLabel]: label });
                 }
             }
+            if (this.initCalculateItems) {
+                setTimeout(() => {
+                    this.handleKeyboardNavigationTag();
+                }, 300);
+            }
+            this.initCalculateItems = false;
         }
         this.changeDetector.markForCheck();
     }
@@ -32217,10 +32394,13 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
             this.changeDetector.detectChanges();
             this.adjustContainerPosition();
         }
+        setTimeout(() => {
+            this.handleKeyboardNavigationTag();
+        }, 300);
     }
     updateVisibleItems() {
         if (this.selectedOptions) {
-            this.visibleDisclaimers = [].concat(this.selectedOptions);
+            this.visibleTags = [].concat(this.selectedOptions);
         }
         this.debounceResize();
         // quando estiver dentro de modal
@@ -32238,17 +32418,45 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         this.changeDetector.markForCheck();
     }
     onBlur() {
+        if (typeof this.inputElement.nativeElement.getAttribute('aria-label') === 'string' &&
+            this.inputElement.nativeElement.getAttribute('aria-label').includes('Unselected')) {
+            this.inputElement.nativeElement.setAttribute('aria-label', this.label ? this.label : '');
+        }
         this.onModelTouched?.();
     }
     onKeyDown(event) {
-        if (event.keyCode === PoKeyCodeEnum.arrowUp || event.keyCode === PoKeyCodeEnum.arrowDown) {
+        if ((event.keyCode === PoKeyCodeEnum.tab && this.visibleTags.length > 1) ||
+            (event.keyCode === PoKeyCodeEnum.tab && this.visibleTags.length < 1)) {
+            return;
+        }
+        if (event.keyCode === PoKeyCodeEnum.esc) {
+            event.preventDefault();
+            this.controlDropdownVisibility(false);
+            return;
+        }
+        if (event.keyCode === PoKeyCodeEnum.arrowDown && this.visibleTags.length > 0) {
             event.preventDefault();
             this.controlDropdownVisibility(true);
+            this.dropdown?.listbox?.setFocus();
             return;
         }
-        if (event.keyCode === PoKeyCodeEnum.tab) {
-            this.controlDropdownVisibility(false);
+        if (event.keyCode === PoKeyCodeEnum.enter && !this.enterCloseTag) {
+            if (this.visibleTags.length === 0) {
+                this.toggleDropdownVisibility();
+                this.focus();
+                return;
+            }
+            else {
+                event.preventDefault();
+                this.toggleDropdownVisibility();
+                return;
+            }
+        }
+        if (event.keyCode === PoKeyCodeEnum.space) {
+            event.preventDefault();
+            this.toggleDropdownVisibility();
         }
+        this.enterCloseTag = false;
     }
     toggleDropdownVisibility() {
         if (this.disabled) {
@@ -32259,6 +32467,13 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         }
         this.controlDropdownVisibility(!this.dropdownOpen);
     }
+    onKeyDownDropdown(event, index) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.controlDropdownVisibility(false);
+            this.inputElement.nativeElement.focus();
+        }
+    }
     openDropdown(toOpen) {
         if (toOpen && !this.disabled) {
             this.controlDropdownVisibility(true);
@@ -32292,11 +32507,29 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         // timeout necessário para reposicionar corretamente quando dropdown estiver pra cima do input e realizar busca no input
         setTimeout(() => this.adjustContainerPosition());
     }
-    closeDisclaimer(value) {
-        const index = this.selectedOptions.findIndex(option => option[this.fieldValue] === value);
-        this.selectedOptions.splice(index, 1);
-        this.updateVisibleItems();
-        this.callOnChange(this.selectedOptions);
+    closeTag(value, event) {
+        let index;
+        this.enterCloseTag = true;
+        if (!value || (typeof value === 'string' && value.includes('+'))) {
+            index = null;
+            const itemsNotInVisibleTags = this.selectedOptions.filter(option => !this.visibleTags.includes(option));
+            for (const option of this.visibleTags) {
+                if (!this.selectedOptions.includes(option)) {
+                    this.selectedOptions.splice(this.visibleTags.length - 1, itemsNotInVisibleTags.length);
+                    this.updateVisibleItems();
+                    this.callOnChange(this.selectedOptions);
+                }
+            }
+        }
+        else {
+            index = this.selectedOptions.findIndex(option => option[this.fieldValue] === value);
+            this.selectedOptions.splice(index, 1);
+            this.updateVisibleItems();
+            this.callOnChange(this.selectedOptions);
+        }
+        setTimeout(() => {
+            this.focusOnNextTag(index, event);
+        }, 300);
     }
     wasClickedOnToggle(event) {
         if (this.dropdownOpen &&
@@ -32345,6 +32578,84 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         this.setVisibleOptionsDropdown(this.options);
         this.removeListeners();
     }
+    focusOnNextTag(indexClosed, clickOrEnter) {
+        if (clickOrEnter === 'enter') {
+            const tagRemoveElements = this.el.nativeElement.querySelectorAll('.po-tag-remove');
+            indexClosed = indexClosed || indexClosed === 0 ? indexClosed : tagRemoveElements.length;
+            if (tagRemoveElements.length === 0) {
+                this.inputElement.nativeElement.focus();
+                this.inputElement.nativeElement.setAttribute('aria-label', `Unselected items ${this.label}`);
+                this.controlDropdownVisibility(true);
+            }
+            this.focusOnRemoveTag(tagRemoveElements, indexClosed);
+        }
+        else {
+            indexClosed = 0;
+        }
+        this.handleKeyboardNavigationTag(indexClosed);
+    }
+    focusOnRemoveTag(tag, indexClosed) {
+        if (tag.length === indexClosed) {
+            tag[indexClosed - 1]?.focus();
+        }
+        else {
+            tag[indexClosed]?.focus();
+        }
+    }
+    handleKeyboardNavigationTag(initialIndex = 0) {
+        this.subscription.unsubscribe();
+        this.subscription = new Subscription();
+        const tagRemoveElements = this.el.nativeElement.querySelectorAll('.po-tag-remove');
+        this.initializeTagRemoveElements(tagRemoveElements, initialIndex);
+    }
+    setTabIndex(element, tabIndex) {
+        element.setAttribute('tabindex', tabIndex);
+    }
+    handleArrowLeft(tagRemoveElements, index) {
+        if (index > 0) {
+            this.setTabIndex(tagRemoveElements[index], -1);
+            tagRemoveElements[index - 1].focus();
+            this.setTabIndex(tagRemoveElements[index - 1], 0);
+        }
+    }
+    handleArrowRight(tagRemoveElements, index) {
+        if (index < tagRemoveElements.length - 1) {
+            this.setTabIndex(tagRemoveElements[index], -1);
+            tagRemoveElements[index + 1].focus();
+            this.setTabIndex(tagRemoveElements[index + 1], 0);
+        }
+    }
+    handleKeyDown(event, tagRemoveElements, index) {
+        const KEY_SPACE = 'Space';
+        const KEY_ARROW_LEFT = 'ArrowLeft';
+        const KEY_ARROW_RIGHT = 'ArrowRight';
+        if (event.code === KEY_SPACE) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        if (event.key === KEY_ARROW_LEFT) {
+            this.handleArrowLeft(tagRemoveElements, index);
+        }
+        else if (event.key === KEY_ARROW_RIGHT) {
+            this.handleArrowRight(tagRemoveElements, index);
+        }
+    }
+    initializeTagRemoveElements(tagRemoveElements, initialIndex) {
+        tagRemoveElements.forEach((tagRemoveElement, index) => {
+            if (index === initialIndex) {
+                this.setTabIndex(tagRemoveElements[initialIndex], 0);
+            }
+            else if (tagRemoveElements.length === initialIndex) {
+                this.setTabIndex(tagRemoveElements[initialIndex - 1], 0);
+            }
+            else {
+                this.setTabIndex(tagRemoveElement, -1);
+            }
+            this.subscription.add(fromEvent(tagRemoveElement, 'keydown').subscribe((event) => {
+                this.handleKeyDown(event, tagRemoveElements, index);
+            }));
+        });
+    }
     initializeListeners() {
         this.clickOutListener = this.renderer.listen('document', 'click', (event) => {
             this.wasClickedOnToggle(event);
@@ -32389,8 +32700,8 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.multiselectOptionTemplate = _t.first);
         } }, viewQuery: function PoMultiselectComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$L, 5, ElementRef);
-            i0.ɵɵviewQuery(_c0$L, 5);
+            i0.ɵɵviewQuery(_c0$K, 5, ElementRef);
+            i0.ɵɵviewQuery(_c0$K, 5);
             i0.ɵɵviewQuery(_c1$h, 7, ElementRef);
             i0.ɵɵviewQuery(_c2$6, 7, ElementRef);
         } if (rf & 2) {
@@ -32399,11 +32710,11 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdown = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.iconElement = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputElement = _t.first);
-        } }, features: [i0.ɵɵProvidersFeature(providers$1), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 18, vars: 28, consts: [[3, "p-disabled", "p-label", "p-optional", "p-required", "p-show-required"], ["cdkOverlayOrigin", "", 1, "po-field-container-content"], ["trigger", "cdkOverlayOrigin"], [1, "po-input", "po-input-icon-right", "po-multiselect-input", "po-clickable", 3, "tabindex", "keyup.enter", "keydown", "click", "blur"], ["inputElement", ""], ["class", "po-multiselect-input-placeholder", 4, "ngIf"], ["class", "po-multiselect-input-disclaimer", 3, "p-label", "p-value", "p-hide-close", "po-clickable", "click", "p-close-action", 4, "ngFor", "ngForOf"], [1, "po-field-icon-container-right"], [3, "ngClass"], ["iconElement", ""], [4, "ngIf", "ngIfThen", "ngIfElse"], ["dropdownDefault", ""], ["dropdownCDK", ""], [3, "p-help", "p-disabled"], ["dropdownListbox", ""], [1, "po-multiselect-input-placeholder"], [1, "po-multiselect-input-disclaimer", 3, "p-label", "p-value", "p-hide-close", "click", "p-close-action"], [4, "ngTemplateOutlet"], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen"], [3, "p-searching", "p-hide-search", "p-hide-select-all", "p-literals", "p-options", "p-visible-options", "p-selected-options", "p-placeholder-search", "p-field-value", "p-field-label", "p-multiselect-template", "p-change", "p-change-search", "p-close-dropdown"], ["dropdownElement", ""]], template: function PoMultiselectComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, features: [i0.ɵɵProvidersFeature(providers$1), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 18, vars: 30, consts: [[3, "p-disabled", "p-label", "p-optional", "p-required", "p-show-required"], ["cdkOverlayOrigin", "", 1, "po-field-container-content"], ["trigger", "cdkOverlayOrigin"], [1, "po-input-icon-right", "po-multiselect-input", 3, "tabindex", "keydown", "click", "blur"], ["inputElement", ""], ["class", "po-multiselect-input-placeholder", "aria-hidden", "true", 4, "ngIf"], [3, "p-value", "p-literals", "p-removable", "po-clickable", "p-disabled", "p-close", 4, "ngFor", "ngForOf"], [1, "po-field-icon-container-right"], [3, "ngClass"], ["iconElement", ""], [4, "ngIf", "ngIfThen", "ngIfElse"], ["dropdownDefault", ""], ["dropdownCDK", ""], [3, "p-help", "p-disabled"], ["dropdownListbox", ""], ["aria-hidden", "true", 1, "po-multiselect-input-placeholder"], [3, "p-value", "p-literals", "p-removable", "p-disabled", "p-close"], [4, "ngTemplateOutlet"], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen"], [3, "p-searching", "p-hide-search", "p-hide-select-all", "p-literals", "p-options", "p-visible-options", "p-selected-options", "p-placeholder-search", "p-field-value", "p-field-label", "p-multiselect-template", "p-change", "p-change-search", "p-close-dropdown", "keydown"], ["dropdownElement", ""]], template: function PoMultiselectComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1, 2)(3, "div", 3, 4);
-            i0.ɵɵlistener("keyup.enter", function PoMultiselectComponent_Template_div_keyup_enter_3_listener() { return ctx.toggleDropdownVisibility(); })("keydown", function PoMultiselectComponent_Template_div_keydown_3_listener($event) { return ctx.onKeyDown($event); })("click", function PoMultiselectComponent_Template_div_click_3_listener() { return ctx.toggleDropdownVisibility(); })("blur", function PoMultiselectComponent_Template_div_blur_3_listener() { return ctx.onBlur(); });
+            i0.ɵɵlistener("keydown", function PoMultiselectComponent_Template_div_keydown_3_listener($event) { return ctx.onKeyDown($event); })("click", function PoMultiselectComponent_Template_div_click_3_listener() { return ctx.toggleDropdownVisibility(); })("blur", function PoMultiselectComponent_Template_div_blur_3_listener() { return ctx.onBlur(); });
             i0.ɵɵtemplate(5, PoMultiselectComponent_span_5_Template, 2, 1, "span", 5);
-            i0.ɵɵtemplate(6, PoMultiselectComponent_po_disclaimer_6_Template, 1, 5, "po-disclaimer", 6);
+            i0.ɵɵtemplate(6, PoMultiselectComponent_po_tag_6_Template, 1, 6, "po-tag", 6);
             i0.ɵɵelementStart(7, "div", 7);
             i0.ɵɵelement(8, "span", 8, 9);
             i0.ɵɵelementEnd()()();
@@ -32420,13 +32731,13 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
             i0.ɵɵadvance(1);
             i0.ɵɵclassProp("po-multiselect-show", ctx.dropdownOpen);
             i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("po-multiselect-input-auto", ctx.autoHeight)("po-multiselect-input-static", !ctx.autoHeight)("po-multiselect-input-disabled", ctx.disabled);
+            i0.ɵɵclassProp("po-multiselect-input-auto", ctx.autoHeight)("po-multiselect-input-static", !ctx.autoHeight)("po-multiselect-input-disabled", ctx.disabled)("po-multiselect-input-font", !ctx.disabled && !(ctx.visibleTags == null ? null : ctx.visibleTags.length));
             i0.ɵɵproperty("tabindex", ctx.disabled ? -1 : 0);
             i0.ɵɵattribute("disabled", ctx.disabled)("aria-label", ctx.label);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.placeholder && !ctx.disabled && !(ctx.visibleDisclaimers == null ? null : ctx.visibleDisclaimers.length));
+            i0.ɵɵproperty("ngIf", !ctx.disabled && !(ctx.visibleTags == null ? null : ctx.visibleTags.length));
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngForOf", ctx.visibleDisclaimers);
+            i0.ɵɵproperty("ngForOf", ctx.visibleTags);
             i0.ɵɵadvance(2);
             i0.ɵɵclassMapInterpolate2("po-icon po-field-icon ", ctx.dropdownIcon, " ", ctx.disabled ? "po-icon-input-disabled" : "po-icon-input", "");
             i0.ɵɵproperty("ngClass", ctx.disabled ? "po-field-icon-disabled" : "");
@@ -32438,7 +32749,7 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMultiselectComponent, [{
         type: Component,
-        args: [{ selector: 'po-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$1, template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"po-field-container-content\"\n    [class.po-multiselect-show]=\"dropdownOpen\"\n  >\n    <div\n      #inputElement\n      [tabindex]=\"disabled ? -1 : 0\"\n      [attr.disabled]=\"disabled\"\n      [attr.aria-label]=\"label\"\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 && !disabled && !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[fieldLabel]\"\n        [p-value]=\"disclaimer[fieldValue]\"\n        [p-hide-close]=\"disclaimer[fieldValue] === '' || disabled\"\n        [class.po-clickable]=\"disclaimer[fieldValue] === '' && !disabled\"\n        (click)=\"openDropdown(disclaimer[fieldValue] === '')\"\n        (p-close-action)=\"closeDisclaimer(disclaimer[fieldValue])\"\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 }} {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n        >\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n  <ng-template #dropdownDefault>\n    <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n  </ng-template>\n\n  <ng-template #dropdownCDK>\n    <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"true\">\n      <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n    </ng-template>\n  </ng-template>\n\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\n</po-field-container>\n\n<ng-template #dropdownListbox>\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-field-value]=\"fieldValue\"\n    [p-field-label]=\"fieldLabel\"\n    [p-multiselect-template]=\"multiselectOptionTemplate\"\n    (p-change)=\"changeItems($event)\"\n    (p-change-search)=\"changeSearch($event)\"\n    (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n  >\n  </po-multiselect-dropdown>\n</ng-template>\n" }]
+        args: [{ selector: 'po-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$1, template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"po-field-container-content\"\n    [class.po-multiselect-show]=\"dropdownOpen\"\n  >\n    <div\n      #inputElement\n      [tabindex]=\"disabled ? -1 : 0\"\n      [attr.disabled]=\"disabled\"\n      [attr.aria-label]=\"label\"\n      class=\"po-input-icon-right po-multiselect-input\"\n      [class.po-multiselect-input-auto]=\"autoHeight\"\n      [class.po-multiselect-input-static]=\"!autoHeight\"\n      [class.po-multiselect-input-disabled]=\"disabled\"\n      [class.po-multiselect-input-font]=\"!disabled && !visibleTags?.length\"\n      (keydown)=\"onKeyDown($event)\"\n      (click)=\"toggleDropdownVisibility()\"\n      (blur)=\"onBlur()\"\n    >\n      <span *ngIf=\"!disabled && !visibleTags?.length\" class=\"po-multiselect-input-placeholder\" aria-hidden=\"true\">\n        {{ placeholder ? placeholder : literals.selectItem }}\n      </span>\n\n      <po-tag\n        *ngFor=\"let tag of visibleTags; index as i\"\n        [p-value]=\"tag[fieldLabel]\"\n        [p-literals]=\"i + 1 === visibleTags.length && hasMoreTag ? literalsTag : undefined\"\n        [p-removable]=\"true\"\n        [class.po-clickable]=\"tag[fieldValue] === '' && !disabled\"\n        [p-disabled]=\"disabled\"\n        (p-close)=\"closeTag(tag[fieldValue], $event)\"\n      ></po-tag>\n\n      <div class=\"po-field-icon-container-right\">\n        <span\n          #iconElement\n          class=\"po-icon po-field-icon {{ dropdownIcon }} {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n        >\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n  <ng-template #dropdownDefault>\n    <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n  </ng-template>\n\n  <ng-template #dropdownCDK>\n    <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"true\">\n      <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n    </ng-template>\n  </ng-template>\n\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\n</po-field-container>\n\n<ng-template #dropdownListbox>\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-field-value]=\"fieldValue\"\n    [p-field-label]=\"fieldLabel\"\n    [p-multiselect-template]=\"multiselectOptionTemplate\"\n    (p-change)=\"changeItems($event)\"\n    (p-change-search)=\"changeSearch($event)\"\n    (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n    (keydown)=\"onKeyDownDropdown($event, 0)\"\n  >\n  </po-multiselect-dropdown>\n</ng-template>\n" }]
     }], function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: PoControlPositionService }, { type: PoMultiselectFilterService }, { type: PoLanguageService }]; }, { multiselectOptionTemplate: [{
             type: ContentChild,
             args: [PoMultiselectOptionTemplateDirective, { static: true }]
@@ -33165,7 +33476,7 @@ class PoRichTextBaseComponent {
             args: ['p-show-required']
         }] }); })();
 
-const _c0$K = ["bodyElement"];
+const _c0$J = ["bodyElement"];
 const poRichTextBodyCommands = [
     'bold',
     'italic',
@@ -33463,7 +33774,7 @@ class PoRichTextBodyComponent {
     }
     static ɵfac = function PoRichTextBodyComponent_Factory(t) { return new (t || PoRichTextBodyComponent)(i0.ɵɵdirectiveInject(PoRichTextService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoRichTextBodyComponent, selectors: [["po-rich-text-body"]], viewQuery: function PoRichTextBodyComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$K, 7);
+            i0.ɵɵviewQuery(_c0$J, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.bodyElement = _t.first);
@@ -34473,7 +34784,7 @@ class PoUploadBaseComponent {
             args: ['p-show-required']
         }] }); })();
 
-const _c0$J = ["selectFilesLink"];
+const _c0$I = ["selectFilesLink"];
 function PoUploadDragDropAreaComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
@@ -34525,7 +34836,7 @@ class PoUploadDragDropAreaComponent {
     }
     static ɵfac = function PoUploadDragDropAreaComponent_Factory(t) { return new (t || PoUploadDragDropAreaComponent)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoUploadDragDropAreaComponent, selectors: [["po-upload-drag-drop-area"]], viewQuery: function PoUploadDragDropAreaComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$J, 5);
+            i0.ɵɵviewQuery(_c0$I, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selectFilesLinkElement = _t.first);
@@ -34753,7 +35064,7 @@ class PoUploadDragDropDirective {
             args: ['document:drop', ['$event']]
         }] }); })();
 
-const _c0$I = ["DragDropAreaFixed"];
+const _c0$H = ["DragDropAreaFixed"];
 class PoUploadDragDropAreaOverlayComponent {
     renderer;
     DragDropAreaFixed;
@@ -34781,7 +35092,7 @@ class PoUploadDragDropAreaOverlayComponent {
     }
     static ɵfac = function PoUploadDragDropAreaOverlayComponent_Factory(t) { return new (t || PoUploadDragDropAreaOverlayComponent)(i0.ɵɵdirectiveInject(i0.Renderer2)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoUploadDragDropAreaOverlayComponent, selectors: [["po-upload-drag-drop-area-overlay"]], viewQuery: function PoUploadDragDropAreaOverlayComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$I, 7, ElementRef);
+            i0.ɵɵviewQuery(_c0$H, 7, ElementRef);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.DragDropAreaFixed = _t.first);
@@ -34817,7 +35128,7 @@ class PoUploadDragDropAreaOverlayComponent {
             args: ['p-area-element']
         }] }); })();
 
-const _c0$H = ["dragDropOverlay"];
+const _c0$G = ["dragDropOverlay"];
 function PoUploadDragDropComponent_po_upload_drag_drop_area_overlay_0_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "po-upload-drag-drop-area-overlay", 2, 3);
@@ -34871,7 +35182,7 @@ class PoUploadDragDropComponent {
     }
     static ɵfac = function PoUploadDragDropComponent_Factory(t) { return new (t || PoUploadDragDropComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoUploadDragDropComponent, selectors: [["po-upload-drag-drop"]], viewQuery: function PoUploadDragDropComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$H, 5, ElementRef);
+            i0.ɵɵviewQuery(_c0$G, 5, ElementRef);
             i0.ɵɵviewQuery(PoUploadDragDropAreaComponent, 7);
         } if (rf & 2) {
             let _t;
@@ -34937,7 +35248,7 @@ function PoUploadFileRestrictionsComponent_p_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r1.literals == null ? null : ctx_r1.literals.allowedFormats, ctx_r1.allowedExtensions), "\n");
 } }
-const _c0$G = function (a0, a1) { return [a0, a1]; };
+const _c0$F = function (a0, a1) { return [a0, a1]; };
 function PoUploadFileRestrictionsComponent_p_2_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
@@ -34946,7 +35257,7 @@ function PoUploadFileRestrictionsComponent_p_2_span_3_Template(rf, ctx) { if (rf
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r3.literals == null ? null : ctx_r3.literals.allowedFileSizeRange, i0.ɵɵpureFunction2(4, _c0$G, ctx_r3.minFileSize, ctx_r3.maxFileSize)), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r3.literals == null ? null : ctx_r3.literals.allowedFileSizeRange, i0.ɵɵpureFunction2(4, _c0$F, ctx_r3.minFileSize, ctx_r3.maxFileSize)), " ");
 } }
 function PoUploadFileRestrictionsComponent_p_2_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -35066,7 +35377,7 @@ class PoUploadFileRestrictionsComponent {
             args: ['p-min-file-size']
         }] }); })();
 
-const _c0$F = ["inputFile"];
+const _c0$E = ["inputFile"];
 const _c1$f = ["uploadButton"];
 function PoUploadComponent_po_upload_drag_drop_5_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
@@ -35427,7 +35738,7 @@ class PoUploadComponent extends PoUploadBaseComponent {
     }
     static ɵfac = function PoUploadComponent_Factory(t) { return new (t || PoUploadComponent)(i0.ɵɵdirectiveInject(PoUploadService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(PoI18nPipe), i0.ɵɵdirectiveInject(PoNotificationService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(PoLanguageService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoUploadComponent, selectors: [["po-upload"]], viewQuery: function PoUploadComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$F, 7, ElementRef);
+            i0.ɵɵviewQuery(_c0$E, 7, ElementRef);
             i0.ɵɵviewQuery(PoUploadDragDropComponent, 5);
             i0.ɵɵviewQuery(_c1$f, 5);
         } if (rf & 2) {
@@ -35639,7 +35950,7 @@ class PoUrlComponent extends PoInputGeneric {
                 ], template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [p-icon]=\"icon\"\n      ></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-right]=\"clean\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean\n        class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        *ngIf=\"clean && !disabled && !readonly\"\n        [p-element-ref]=\"inputEl\"\n        (p-change-event)=\"clear($event)\"\n      >\n      </po-clean>\n    </div>\n  </div>\n\n  <po-field-container-bottom\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-pattern]=\"getErrorPattern()\"\n  ></po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, null); })();
 
-const _c0$E = ["modal"];
+const _c0$D = ["modal"];
 const _c1$e = ["modalImageForm"];
 const _c2$3 = ["upload"];
 const uploadRestrictions = ['.apng', '.bmp', '.gif', '.ico', '.jpeg', '.jpg', '.png', '.svg'];
@@ -35726,7 +36037,7 @@ class PoRichTextImageModalComponent {
     }
     static ɵfac = function PoRichTextImageModalComponent_Factory(t) { return new (t || PoRichTextImageModalComponent)(i0.ɵɵdirectiveInject(PoLanguageService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoRichTextImageModalComponent, selectors: [["po-rich-text-image-modal"]], viewQuery: function PoRichTextImageModalComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$E, 7);
+            i0.ɵɵviewQuery(_c0$D, 7);
             i0.ɵɵviewQuery(_c1$e, 5);
             i0.ɵɵviewQuery(_c2$3, 7);
         } if (rf & 2) {
@@ -35767,7 +36078,7 @@ class PoRichTextImageModalComponent {
             args: ['p-command']
         }] }); })();
 
-const _c0$D = ["modal"];
+const _c0$C = ["modal"];
 const _c1$d = ["modalLinkForm"];
 class PoRichTextLinkModalComponent {
     languageService;
@@ -35912,7 +36223,7 @@ class PoRichTextLinkModalComponent {
     }
     static ɵfac = function PoRichTextLinkModalComponent_Factory(t) { return new (t || PoRichTextLinkModalComponent)(i0.ɵɵdirectiveInject(PoLanguageService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoRichTextLinkModalComponent, selectors: [["po-rich-text-link-modal"]], viewQuery: function PoRichTextLinkModalComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$D, 7);
+            i0.ɵɵviewQuery(_c0$C, 7);
             i0.ɵɵviewQuery(_c1$d, 5);
         } if (rf & 2) {
             let _t;
@@ -35950,7 +36261,7 @@ class PoRichTextLinkModalComponent {
             args: ['p-link-editing']
         }] }); })();
 
-const _c0$C = ["colorPickerInput"];
+const _c0$B = ["colorPickerInput"];
 const _c1$c = ["toolbarElement"];
 function PoRichTextToolbarComponent_div_4_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
@@ -36138,7 +36449,7 @@ class PoRichTextToolbarComponent {
     }
     static ɵfac = function PoRichTextToolbarComponent_Factory(t) { return new (t || PoRichTextToolbarComponent)(i0.ɵɵdirectiveInject(PoLanguageService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoRichTextToolbarComponent, selectors: [["po-rich-text-toolbar"]], viewQuery: function PoRichTextToolbarComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$C, 5, ElementRef);
+            i0.ɵɵviewQuery(_c0$B, 5, ElementRef);
             i0.ɵɵviewQuery(_c1$c, 7);
             i0.ɵɵviewQuery(PoRichTextImageModalComponent, 7);
             i0.ɵɵviewQuery(PoRichTextLinkModalComponent, 7);
@@ -36148,7 +36459,7 @@ class PoRichTextToolbarComponent {
             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: { disabledTextAlign: ["p-disabled-text-align", "disabledTextAlign"], readonly: ["p-readonly", "readonly"] }, outputs: { command: "p-command", modal: "p-modal", linkEditing: "p-link-editing" }, decls: 16, vars: 6, consts: [[1, "po-rich-text-toolbar"], ["toolbarElement", ""], ["data-rich-text-toolbar", "format", 1, "po-rich-text-toolbar-button-align"], ["p-toggle", "multiple", 3, "p-buttons"], ["class", "po-rich-text-toolbar-button-align", "data-rich-text-toolbar", "color", 4, "ngIf"], ["class", "po-rich-text-toolbar-button-align", "data-rich-text-toolbar", "align", 4, "ngIf"], ["data-rich-text-toolbar", "list", 1, "po-rich-text-toolbar-button-align"], ["p-toggle", "single", 3, "p-buttons"], ["data-rich-text-toolbar", "link", 1, "po-rich-text-toolbar-button-align"], [3, "p-buttons"], ["data-rich-text-toolbar", "media", 1, "po-rich-text-toolbar-button-align"], [3, "p-command"], ["richTextImageModal", ""], [3, "p-command", "p-link-editing"], ["richTextLinkModal", ""], ["data-rich-text-toolbar", "color", 1, "po-rich-text-toolbar-button-align"], [1, "po-rich-text-toolbar-color-picker-container"], [1, "po-button", "po-button-default", "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", ""], ["data-rich-text-toolbar", "align", 1, "po-rich-text-toolbar-button-align"]], template: function PoRichTextToolbarComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { disabledTextAlign: ["p-disabled-text-align", "disabledTextAlign"], readonly: ["p-readonly", "readonly"] }, outputs: { command: "p-command", modal: "p-modal", linkEditing: "p-link-editing" }, decls: 16, vars: 6, consts: [[1, "po-rich-text-toolbar"], ["toolbarElement", ""], ["data-rich-text-toolbar", "format", 1, "po-rich-text-toolbar-button-align"], ["p-toggle", "multiple", 3, "p-buttons"], ["class", "po-rich-text-toolbar-button-align", "data-rich-text-toolbar", "color", 4, "ngIf"], ["class", "po-rich-text-toolbar-button-align", "data-rich-text-toolbar", "align", 4, "ngIf"], ["data-rich-text-toolbar", "list", 1, "po-rich-text-toolbar-button-align"], ["p-toggle", "single", 3, "p-buttons"], ["data-rich-text-toolbar", "link", 1, "po-rich-text-toolbar-button-align"], [3, "p-buttons"], ["data-rich-text-toolbar", "media", 1, "po-rich-text-toolbar-button-align"], [3, "p-command"], ["richTextImageModal", ""], [3, "p-command", "p-link-editing"], ["richTextLinkModal", ""], ["data-rich-text-toolbar", "color", 1, "po-rich-text-toolbar-button-align"], [1, "po-rich-text-toolbar-color-picker-container"], ["type", "button", 1, "po-button", "po-button-default", "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", ""], ["data-rich-text-toolbar", "align", 1, "po-rich-text-toolbar-button-align"]], 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();
@@ -36186,7 +36497,7 @@ class PoRichTextToolbarComponent {
 }
 (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\" data-rich-text-toolbar=\"format\">\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\" data-rich-text-toolbar=\"color\">\n    <div class=\"po-rich-text-toolbar-color-picker-container\">\n      <button\n        class=\"po-button po-button-default 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 *ngIf=\"!disabledTextAlign\" class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"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\" data-rich-text-toolbar=\"list\">\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\" data-rich-text-toolbar=\"link\">\n    <po-button-group [p-buttons]=\"linkButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"media\">\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\" data-rich-text-toolbar=\"format\">\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\" data-rich-text-toolbar=\"color\">\n    <div class=\"po-rich-text-toolbar-color-picker-container\">\n      <button\n        type=\"button\"\n        class=\"po-button po-button-default 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 *ngIf=\"!disabledTextAlign\" class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"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\" data-rich-text-toolbar=\"list\">\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\" data-rich-text-toolbar=\"link\">\n    <po-button-group [p-buttons]=\"linkButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"media\">\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 }]
@@ -36448,7 +36759,7 @@ class PoFieldValidateModel extends PoFieldModel {
             args: ['p-show-required']
         }] }); })();
 
-const _c0$B = ["select"];
+const _c0$A = ["select"];
 function PoSelectComponent_option_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "option", 8);
     i0.ɵɵtext(1);
@@ -36838,7 +37149,7 @@ class PoSelectComponent extends PoFieldValidateModel {
     }
     static ɵfac = function PoSelectComponent_Factory(t) { return new (t || PoSelectComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.Renderer2)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoSelectComponent, selectors: [["po-select"]], viewQuery: function PoSelectComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$B, 7, ElementRef);
+            i0.ɵɵviewQuery(_c0$A, 7, ElementRef);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selectElement = _t.first);
@@ -37256,7 +37567,7 @@ class PoTextareaBaseComponent {
             args: ['p-rows']
         }] }); })();
 
-const _c0$A = ["inp"];
+const _c0$z = ["inp"];
 /**
  * @docsExtends PoTextareaBaseComponent
  *
@@ -37361,7 +37672,7 @@ class PoTextareaComponent extends PoTextareaBaseComponent {
     }
     static ɵfac = function PoTextareaComponent_Factory(t) { return new (t || PoTextareaComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTextareaComponent, selectors: [["po-textarea"]], viewQuery: function PoTextareaComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$A, 7, ElementRef);
+            i0.ɵɵviewQuery(_c0$z, 7, ElementRef);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
@@ -37446,7 +37757,7 @@ class PoSearchBaseComponent {
             args: ['p-filter']
         }] }); })();
 
-const _c0$z = ["poSearchInput"];
+const _c0$y = ["poSearchInput"];
 function PoSearchComponent_po_icon_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "po-icon", 7);
 } }
@@ -37529,7 +37840,7 @@ class PoSearchComponent extends PoSearchBaseComponent {
     }
     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) {
-            i0.ɵɵviewQuery(_c0$z, 7, ElementRef);
+            i0.ɵɵviewQuery(_c0$y, 7, ElementRef);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.poSearchInput = _t.first);
@@ -37714,7 +38025,7 @@ i0.ɵɵsetComponentScope(PoTableComponent, [i1.NgClass, i1.NgForOf, i1.NgIf, i1.
     PoTableSubtitleFooterComponent,
     PoTableColumnFrozenDirective], [i1.LowerCasePipe, i1.TitleCasePipe, i1.CurrencyPipe, i1.DatePipe, PoTimePipe]);
 
-const _c0$y = ["container"];
+const _c0$x = ["container"];
 const _c1$b = ["divElement"];
 const _c2$2 = ["listbox"];
 /**
@@ -37843,7 +38154,7 @@ class PoMultiselectDropdownComponent {
     }
     static ɵfac = function PoMultiselectDropdownComponent_Factory(t) { return new (t || PoMultiselectDropdownComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoMultiselectDropdownComponent, selectors: [["po-multiselect-dropdown"]], viewQuery: function PoMultiselectDropdownComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$y, 7, ElementRef);
+            i0.ɵɵviewQuery(_c0$x, 7, ElementRef);
             i0.ɵɵviewQuery(_c1$b, 7, ElementRef);
             i0.ɵɵviewQuery(_c2$2, 5);
         } if (rf & 2) {
@@ -37851,11 +38162,11 @@ class PoMultiselectDropdownComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.container = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.divElement = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.listbox = _t.first);
-        } }, inputs: { isServerSearching: ["p-searching", "isServerSearching"], hideSearch: ["p-hide-search", "hideSearch"], literals: ["p-literals", "literals"], placeholderSearch: ["p-placeholder-search", "placeholderSearch"], selectedOptions: ["p-selected-options", "selectedOptions"], options: ["p-options", "options"], visibleOptions: ["p-visible-options", "visibleOptions"], hideSelectAll: ["p-hide-select-all", "hideSelectAll"], fieldValue: ["p-field-value", "fieldValue"], fieldLabel: ["p-field-label", "fieldLabel"], multiselectTemplate: ["p-multiselect-template", "multiselectTemplate"] }, outputs: { changeSearch: "p-change-search", change: "p-change", closeDropdown: "p-close-dropdown" }, decls: 7, vars: 15, consts: [[1, "po-multiselect-container", 3, "hidden"], ["container", ""], [3, "scrollTop"], ["divElement", ""], ["p-type", "check", 3, "p-items", "p-selected-options", "p-checkboxAllValue", "p-field-value", "p-field-value-search", "p-field-label", "p-literal-search", "p-literals", "p-is-searching", "p-hide-search", "p-hide-select-all", "p-template", "p-placeholder-search", "p-change", "p-change-all", "p-change-search"], ["listbox", ""]], template: function PoMultiselectDropdownComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { isServerSearching: ["p-searching", "isServerSearching"], hideSearch: ["p-hide-search", "hideSearch"], literals: ["p-literals", "literals"], placeholderSearch: ["p-placeholder-search", "placeholderSearch"], selectedOptions: ["p-selected-options", "selectedOptions"], options: ["p-options", "options"], visibleOptions: ["p-visible-options", "visibleOptions"], hideSelectAll: ["p-hide-select-all", "hideSelectAll"], fieldValue: ["p-field-value", "fieldValue"], fieldLabel: ["p-field-label", "fieldLabel"], multiselectTemplate: ["p-multiselect-template", "multiselectTemplate"] }, outputs: { changeSearch: "p-change-search", change: "p-change", closeDropdown: "p-close-dropdown" }, decls: 7, vars: 15, consts: [[1, "po-multiselect-container", 3, "hidden"], ["container", ""], [3, "scrollTop"], ["divElement", ""], ["p-type", "check", 3, "p-items", "p-selected-options", "p-checkboxAllValue", "p-field-value", "p-field-value-search", "p-field-label", "p-literal-search", "p-literals", "p-is-searching", "p-hide-search", "p-hide-select-all", "p-template", "p-placeholder-search", "p-change", "p-change-all", "p-change-search", "p-close"], ["listbox", ""]], template: function PoMultiselectDropdownComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0, 1)(2, "div", 2, 3);
             i0.ɵɵelementContainerStart(4);
             i0.ɵɵelementStart(5, "po-listbox", 4, 5);
-            i0.ɵɵlistener("p-change", function PoMultiselectDropdownComponent_Template_po_listbox_p_change_5_listener($event) { return ctx.clickItem($event); })("p-change-all", function PoMultiselectDropdownComponent_Template_po_listbox_p_change_all_5_listener() { return ctx.onClickSelectAll(); })("p-change-search", function PoMultiselectDropdownComponent_Template_po_listbox_p_change_search_5_listener($event) { return ctx.callChangeSearch($event); });
+            i0.ɵɵlistener("p-change", function PoMultiselectDropdownComponent_Template_po_listbox_p_change_5_listener($event) { return ctx.clickItem($event); })("p-change-all", function PoMultiselectDropdownComponent_Template_po_listbox_p_change_all_5_listener() { return ctx.onClickSelectAll(); })("p-change-search", function PoMultiselectDropdownComponent_Template_po_listbox_p_change_search_5_listener($event) { return ctx.callChangeSearch($event); })("p-close", function PoMultiselectDropdownComponent_Template_po_listbox_p_close_5_listener() { return ctx.closeDropdown.emit(); });
             i0.ɵɵelementEnd();
             i0.ɵɵelementContainerEnd();
             i0.ɵɵelementEnd()();
@@ -37869,7 +38180,7 @@ class PoMultiselectDropdownComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMultiselectDropdownComponent, [{
         type: Component,
-        args: [{ selector: 'po-multiselect-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #container class=\"po-multiselect-container\" [hidden]=\"!show\">\n  <div [scrollTop]=\"scrollTop\" #divElement>\n    <ng-container>\n      <po-listbox\n        #listbox\n        p-type=\"check\"\n        [p-items]=\"visibleOptions\"\n        [p-selected-options]=\"selectedOptions\"\n        [p-checkboxAllValue]=\"getStateSelectAll()\"\n        [p-field-value]=\"fieldValue\"\n        [p-field-value-search]=\"fieldValue\"\n        [p-field-label]=\"fieldLabel\"\n        [p-literal-search]=\"literals\"\n        [p-literals]=\"literals\"\n        [p-is-searching]=\"isServerSearching\"\n        [p-hide-search]=\"hideSearch\"\n        [p-hide-select-all]=\"hideSelectAll\"\n        [p-template]=\"multiselectTemplate\"\n        [p-placeholder-search]=\"placeholderSearch\"\n        (p-change)=\"clickItem($event)\"\n        (p-change-all)=\"onClickSelectAll()\"\n        (p-change-search)=\"callChangeSearch($event)\"\n      >\n      </po-listbox>\n    </ng-container>\n  </div>\n</div>\n" }]
+        args: [{ selector: 'po-multiselect-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #container class=\"po-multiselect-container\" [hidden]=\"!show\">\n  <div [scrollTop]=\"scrollTop\" #divElement>\n    <ng-container>\n      <po-listbox\n        #listbox\n        p-type=\"check\"\n        [p-items]=\"visibleOptions\"\n        [p-selected-options]=\"selectedOptions\"\n        [p-checkboxAllValue]=\"getStateSelectAll()\"\n        [p-field-value]=\"fieldValue\"\n        [p-field-value-search]=\"fieldValue\"\n        [p-field-label]=\"fieldLabel\"\n        [p-literal-search]=\"literals\"\n        [p-literals]=\"literals\"\n        [p-is-searching]=\"isServerSearching\"\n        [p-hide-search]=\"hideSearch\"\n        [p-hide-select-all]=\"hideSelectAll\"\n        [p-template]=\"multiselectTemplate\"\n        [p-placeholder-search]=\"placeholderSearch\"\n        (p-change)=\"clickItem($event)\"\n        (p-change-all)=\"onClickSelectAll()\"\n        (p-change-search)=\"callChangeSearch($event)\"\n        (p-close)=\"closeDropdown.emit()\"\n      >\n      </po-listbox>\n    </ng-container>\n  </div>\n</div>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { isServerSearching: [{
             type: Input,
             args: ['p-searching']
@@ -37923,94 +38234,6 @@ class PoMultiselectDropdownComponent {
             args: ['listbox']
         }] }); })();
 
-const _c0$x = ["inputElement"];
-/**
- * @docsPrivate
- *
- * @description
- *
- * Componente de pesquisa que será criado dentro do dropdown do `po-multiselect`.
- */
-class PoMultiselectSearchComponent {
-    cd;
-    inputElement;
-    /** Propriedade que recebe as literais definidas no `po-multiselect`. */
-    literals;
-    fieldValue;
-    /** Evento que será disparado a cada tecla digitada no campo de busca. */
-    change = new EventEmitter();
-    _placeholder;
-    constructor(cd) {
-        this.cd = cd;
-    }
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Placeholder do campo de pesquisa.
-     *
-     * > Caso o mesmo não seja informado, o valor padrão será traduzido com base no idioma do navegador (pt, es e en).
-     *
-     * @default `Buscar`
-     */
-    set placeholder(placeholder) {
-        this._placeholder = placeholder && isTypeof(placeholder, 'string') ? placeholder : this.literals.placeholderSearch;
-    }
-    get placeholder() {
-        return this._placeholder || this.literals.placeholderSearch;
-    }
-    get inputValue() {
-        return this.inputElement.nativeElement.value;
-    }
-    onChange(event) {
-        this.change.emit({ event: event, [this.fieldValue]: this.inputElement.nativeElement.value });
-    }
-    setFocus() {
-        this.inputElement.nativeElement.focus();
-    }
-    clean() {
-        this.inputElement.nativeElement.value = '';
-        this.cd.markForCheck();
-    }
-    static ɵfac = function PoMultiselectSearchComponent_Factory(t) { return new (t || PoMultiselectSearchComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoMultiselectSearchComponent, selectors: [["po-multiselect-search"]], viewQuery: function PoMultiselectSearchComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$x, 7, ElementRef);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputElement = _t.first);
-        } }, inputs: { literals: ["p-literals", "literals"], fieldValue: ["p-field-value", "fieldValue"], placeholder: ["p-placeholder", "placeholder"] }, outputs: { change: "p-change" }, decls: 5, vars: 1, consts: [[1, "po-field-container-content", "po-multiselect-container-search"], [1, "po-field-icon-container-left"], [1, "po-icon", "po-icon-search", "po-field-icon", "po-icon-input"], ["type", "text", 1, "po-input", "po-input-icon-left", "po-multiselect-search-input", 3, "placeholder", "keyup"], ["inputElement", ""]], template: function PoMultiselectSearchComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-            i0.ɵɵelement(2, "span", 2);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "input", 3, 4);
-            i0.ɵɵlistener("keyup", function PoMultiselectSearchComponent_Template_input_keyup_3_listener($event) { return ctx.onChange($event); });
-            i0.ɵɵelementEnd()();
-        } if (rf & 2) {
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("placeholder", ctx.placeholder);
-        } }, encapsulation: 2, changeDetection: 0 });
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMultiselectSearchComponent, [{
-        type: Component,
-        args: [{ selector: 'po-multiselect-search', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-field-container-content po-multiselect-container-search\">\n  <div class=\"po-field-icon-container-left\">\n    <span class=\"po-icon po-icon-search po-field-icon po-icon-input\"></span>\n  </div>\n\n  <input\n    #inputElement\n    class=\"po-input po-input-icon-left po-multiselect-search-input\"\n    type=\"text\"\n    [placeholder]=\"placeholder\"\n    (keyup)=\"onChange($event)\"\n  />\n</div>\n" }]
-    }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { inputElement: [{
-            type: ViewChild,
-            args: ['inputElement', { read: ElementRef, static: true }]
-        }], literals: [{
-            type: Input,
-            args: ['p-literals']
-        }], fieldValue: [{
-            type: Input,
-            args: ['p-field-value']
-        }], change: [{
-            type: Output,
-            args: ['p-change']
-        }], placeholder: [{
-            type: Input,
-            args: ['p-placeholder']
-        }] }); })();
-
 /**
  * @description
  *
@@ -38052,7 +38275,8 @@ class PoFieldModule {
             PoRadioModule,
             PoLabelModule,
             PoListBoxModule,
-            PoSwitchModule, PoCheckboxGroupModule,
+            PoSwitchModule,
+            PoTagModule, PoCheckboxGroupModule,
             PoRadioGroupModule,
             PoCleanModule,
             PoDatepickerModule,
@@ -38060,7 +38284,8 @@ class PoFieldModule {
             PoCheckboxModule,
             PoRadioModule,
             PoLabelModule,
-            PoSwitchModule] });
+            PoSwitchModule,
+            PoTagModule] });
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoFieldModule, [{
         type: NgModule,
@@ -38094,7 +38319,8 @@ class PoFieldModule {
                     PoRadioModule,
                     PoLabelModule,
                     PoListBoxModule,
-                    PoSwitchModule
+                    PoSwitchModule,
+                    PoTagModule
                 ],
                 exports: [
                     PoCheckboxGroupModule,
@@ -38123,7 +38349,8 @@ class PoFieldModule {
                     PoCheckboxModule,
                     PoRadioModule,
                     PoLabelModule,
-                    PoSwitchModule
+                    PoSwitchModule,
+                    PoTagModule
                 ],
                 declarations: [
                     PoComboComponent,
@@ -38138,7 +38365,6 @@ class PoFieldModule {
                     PoLookupModalComponent,
                     PoMultiselectComponent,
                     PoMultiselectDropdownComponent,
-                    PoMultiselectSearchComponent,
                     PoNumberComponent,
                     PoPasswordComponent,
                     PoRichTextBodyComponent,
@@ -38171,7 +38397,6 @@ class PoFieldModule {
         PoLookupModalComponent,
         PoMultiselectComponent,
         PoMultiselectDropdownComponent,
-        PoMultiselectSearchComponent,
         PoNumberComponent,
         PoPasswordComponent,
         PoRichTextBodyComponent,
@@ -38211,7 +38436,8 @@ class PoFieldModule {
         PoRadioModule,
         PoLabelModule,
         PoListBoxModule,
-        PoSwitchModule], exports: [PoCheckboxGroupModule,
+        PoSwitchModule,
+        PoTagModule], exports: [PoCheckboxGroupModule,
         PoRadioGroupModule,
         PoCleanModule,
         PoDatepickerModule,
@@ -38237,9 +38463,10 @@ class PoFieldModule {
         PoCheckboxModule,
         PoRadioModule,
         PoLabelModule,
-        PoSwitchModule] }); })();
+        PoSwitchModule,
+        PoTagModule] }); })();
 i0.ɵɵsetComponentScope(PoLookupModalComponent, function () { return [i1.NgIf, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.NgModel, PoDisclaimerGroupComponent, PoFieldContainerComponent, PoModalComponent, PoTableComponent]; }, []);
-i0.ɵɵsetComponentScope(PoMultiselectComponent, function () { return [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i5.CdkConnectedOverlay, i5.CdkOverlayOrigin, PoDisclaimerComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoMultiselectDropdownComponent]; }, []);
+i0.ɵɵsetComponentScope(PoMultiselectComponent, function () { return [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i5.CdkConnectedOverlay, i5.CdkOverlayOrigin, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoTagComponent, PoMultiselectDropdownComponent]; }, []);
 
 /**
  * @usedBy PoInfoComponent