@po-ui/ng-components 20.12.0 → 20.13.0

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

@@ -3473,6 +3473,7 @@ const poAccordionLiteralsDefault = {
 class PoAccordionBaseComponent {
     language = poLocaleDefault;
     _literals;
+    _size = undefined;
     /**
      * @optional
      *
@@ -3544,6 +3545,26 @@ class PoAccordionBaseComponent {
      * @default `false`
      */
     allowExpandItems = false;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o tamanho do componente:
+     * - `small`: altura de 32px (disponível apenas para acessibilidade AA).
+     * - `medium`: altura de 44px.
+     *
+     * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido.
+     * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme).
+     *
+     * @default `medium`
+     */
+    set size(value) {
+        this._size = validateSizeFn(value, PoFieldSize);
+    }
+    get size() {
+        return this._size ?? getDefaultSizeFn(PoFieldSize);
+    }
     /**
      * @optional
      *
@@ -3566,7 +3587,7 @@ class PoAccordionBaseComponent {
         this.language = languageService.getShortLanguage();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoAccordionBaseComponent, deps: [{ token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.7", type: PoAccordionBaseComponent, isStandalone: true, inputs: { literals: ["p-literals", "literals"], showManagerAccordion: ["p-show-manager-accordion", "showManagerAccordion", convertToBoolean], allowExpandItems: ["p-allow-expand-all-items", "allowExpandItems", convertToBoolean] }, outputs: { expandAllEvent: "p-expand-all", collapseAllEvent: "p-collapse-all" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.7", type: PoAccordionBaseComponent, isStandalone: true, inputs: { literals: ["p-literals", "literals"], showManagerAccordion: ["p-show-manager-accordion", "showManagerAccordion", convertToBoolean], allowExpandItems: ["p-allow-expand-all-items", "allowExpandItems", convertToBoolean], size: ["p-size", "size"] }, outputs: { expandAllEvent: "p-expand-all", collapseAllEvent: "p-collapse-all" }, host: { properties: { "attr.p-size": "this.size" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoAccordionBaseComponent, decorators: [{
             type: Directive
@@ -3579,6 +3600,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             }], allowExpandItems: [{
                 type: Input,
                 args: [{ alias: 'p-allow-expand-all-items', transform: convertToBoolean }]
+            }], size: [{
+                type: HostBinding,
+                args: ['attr.p-size']
+            }, {
+                type: Input,
+                args: ['p-size']
             }], expandAllEvent: [{
                 type: Output,
                 args: ['p-expand-all']
@@ -24674,9 +24701,9 @@ const poSearchLiteralsDefaultExecute = {
  *
  */
 class PoSearchBaseComponent {
+    language;
     _literals;
     _ariaLabel;
-    language;
     _filterSelect;
     _size = undefined;
     _keysLabel = [];
@@ -24798,6 +24825,8 @@ class PoSearchBaseComponent {
      * ```
      */
     icon;
+    // Propriedade de uso interno.
+    id;
     /**
      * @optional
      *
@@ -24872,6 +24901,24 @@ class PoSearchBaseComponent {
      * > Compatível com a propriedade `p-search-type` do tipo `locate`.
      */
     locateSummary = { currentIndex: 0, total: 0 };
+    /**
+     * @optional
+     *
+     * @description
+     * Nome e identificador do campo.
+     *
+     */
+    name;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define a propriedade nativa `autocomplete` do campo como `off`.
+     *
+     * @default `false`
+     */
+    noAutocomplete = false;
     /**
      * @optional
      *
@@ -25045,7 +25092,7 @@ class PoSearchBaseComponent {
         return _values.map(value => (typeof value === 'object' ? value : { label: value, value }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoSearchBaseComponent, deps: [{ token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.7", type: PoSearchBaseComponent, isStandalone: true, inputs: { ariaLabel: ["p-aria-label", "ariaLabel"], disabled: ["p-disabled", "disabled", convertToBoolean], filterKeys: ["p-filter-keys", "filterKeys"], filterSelect: ["p-filter-select", "filterSelect"], filterType: ["p-filter-type", "filterType"], icon: ["p-icon", "icon"], items: ["p-items", "items"], literals: ["p-literals", "literals"], locateSummary: ["p-locate-summary", "locateSummary"], type: ["p-search-type", "type"], showListbox: ["p-show-listbox", "showListbox", convertToBoolean], size: ["p-size", "size"], keysLabel: ["p-keys-label", "keysLabel"] }, outputs: { blur: "p-blur", changeModel: "p-change-model", filter: "p-filter", filteredItemsChange: "p-filtered-items-change", focusEvent: "p-focus", keydown: "p-keydown", listboxOnClick: "p-listbox-onclick", locateNext: "p-locate-next", locatePrevious: "p-locate-previous", footerAction: "p-footer-action-listbox" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.7", type: PoSearchBaseComponent, isStandalone: true, inputs: { ariaLabel: ["p-aria-label", "ariaLabel"], disabled: ["p-disabled", "disabled", convertToBoolean], filterKeys: ["p-filter-keys", "filterKeys"], filterSelect: ["p-filter-select", "filterSelect"], filterType: ["p-filter-type", "filterType"], icon: ["p-icon", "icon"], id: ["p-id", "id"], items: ["p-items", "items"], literals: ["p-literals", "literals"], locateSummary: ["p-locate-summary", "locateSummary"], name: "name", noAutocomplete: ["p-no-autocomplete", "noAutocomplete", convertToBoolean], type: ["p-search-type", "type"], showListbox: ["p-show-listbox", "showListbox", convertToBoolean], size: ["p-size", "size"], keysLabel: ["p-keys-label", "keysLabel"] }, outputs: { blur: "p-blur", changeModel: "p-change-model", filter: "p-filter", filteredItemsChange: "p-filtered-items-change", focusEvent: "p-focus", keydown: "p-keydown", listboxOnClick: "p-listbox-onclick", locateNext: "p-locate-next", locatePrevious: "p-locate-previous", footerAction: "p-footer-action-listbox" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoSearchBaseComponent, decorators: [{
             type: Directive
@@ -25067,6 +25114,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             }], icon: [{
                 type: Input,
                 args: ['p-icon']
+            }], id: [{
+                type: Input,
+                args: ['p-id']
             }], items: [{
                 type: Input,
                 args: ['p-items']
@@ -25076,6 +25126,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             }], locateSummary: [{
                 type: Input,
                 args: ['p-locate-summary']
+            }], name: [{
+                type: Input,
+                args: ['name']
+            }], noAutocomplete: [{
+                type: Input,
+                args: [{ alias: 'p-no-autocomplete', transform: convertToBoolean }]
             }], type: [{
                 type: Input,
                 args: ['p-search-type']
@@ -25373,6 +25429,9 @@ class PoSearchComponent extends PoSearchBaseComponent {
             .map(value => ({ label: value, value }))
             .filter((obj, index, self) => index === self.findIndex(o => o.label === obj.label && o.value === obj.value));
     }
+    get autocomplete() {
+        return this.noAutocomplete ? 'off' : 'on';
+    }
     onCloseListbox() {
         this.poSearchInput.nativeElement.focus();
         this.closeListbox();
@@ -25621,11 +25680,11 @@ class PoSearchComponent extends PoSearchBaseComponent {
         this.placeholderListbox = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoSearchComponent, isStandalone: false, selector: "po-search", providers: [PoControlPositionService], viewQueries: [{ propertyName: "locateCounter", first: true, predicate: ["locateCounter"], descendants: true }, { propertyName: "poSearchInput", first: true, predicate: ["poSearchInput"], descendants: true, read: ElementRef, static: true }, { propertyName: "poListboxContainerElement", first: true, predicate: ["poListboxContainerElement"], descendants: true, read: ElementRef }, { propertyName: "poListboxElement", first: true, predicate: ["poListboxElement"], descendants: true, read: ElementRef }, { propertyName: "poListbox", first: true, predicate: ["poListbox"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"po-search\"\n  [class.po-search-disabled]=\"disabled\"\n  [class.po-search-filter-locate]=\"type === 'locate'\"\n  [attr.p-search-type]=\"type === 'locate'\"\n  [attr.p-size]=\"size\"\n>\n  @if (filterSelect && type !== 'locate') {\n    <div class=\"po-search-select\">\n      <po-dropdown\n        [p-label]=\"searchFilterSelectLabel\"\n        [p-disabled]=\"disabled\"\n        [p-actions]=\"searchFilterSelectActions\"\n        [p-size]=\"size\"\n      >\n      </po-dropdown>\n    </div>\n  }\n\n  @if (type === 'action' || type === 'locate' || type === 'execute') {\n    <div class=\"po-search-icon\">\n      <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"></po-icon>\n    </div>\n  }\n\n  <input\n    #poSearchInput\n    class=\"po-search-input\"\n    type=\"text\"\n    [ariaLabel]=\"ariaLabel\"\n    [class.po-search-input-clean]=\"!!poSearchInput.value && !disabled && type !== 'locate'\"\n    [class.po-search-input-trigger]=\"type === 'trigger'\"\n    [style.padding-right.px]=\"dynamicPaddingRight\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"literals.search\"\n    (input)=\"onInputHandler($event.target.value)\"\n    (keyup.enter)=\"onEnterKey($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n  />\n\n  <div class=\"po-search-buttons\">\n    @if (type === 'locate' && poSearchInput.value && !disabled) {\n      <span\n        #locateCounter\n        class=\"po-search-locate-counter\"\n        id=\"summary\"\n        [attr.aria-label]=\"\n          literals.result +\n          ' ' +\n          (locateSummary?.currentIndex ?? 0) +\n          ' ' +\n          literals.of +\n          ' ' +\n          (locateSummary?.total ?? 0)\n        \"\n      >\n        {{ locateSummary?.currentIndex ?? 0 }}/{{ locateSummary?.total ?? 0 }}\n      </span>\n    }\n\n    @if (!!poSearchInput.value && !disabled) {\n      <div [id]=\"idSearchButtonClean\">\n        <button\n          class=\"po-search-button po-search-button-clean\"\n          type=\"button\"\n          [ariaLabel]=\"literals.clean\"\n          (click)=\"clearSearch()\"\n          (keydown.enter)=\"clearSearch()\"\n          (keydown)=\"onCleanKeydown($event)\"\n        >\n          <po-clean class=\"po-icon-input\" [p-size]=\"size\"></po-clean>\n        </button>\n      </div>\n    }\n\n    @if (type === 'trigger') {\n      <button\n        class=\"po-search-button po-search-button-trigger\"\n        type=\"button\"\n        [ariaLabel]=\"literals.search\"\n        [disabled]=\"disabled\"\n        (click)=\"onSearchChange(poSearchInput.value, true, true)\"\n        (keydown.enter)=\"onSearchChange(poSearchInput.value, true, true)\"\n      >\n        <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"> </po-icon>\n      </button>\n    }\n\n    @if (showSearchLocateControls) {\n      <div class=\"po-search-locate-controls\">\n        <div class=\"po-search-divider\"></div>\n        <button\n          name=\"btnArrowUp\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.next\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locateNext.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_DOWN\"> </po-icon>\n        </button>\n\n        <button\n          name=\"btnArrowDown\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.previous\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locatePrevious.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_UP\"> </po-icon>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n\n@if (type !== 'locate') {\n  <div #poListboxContainerElement class=\"po-search-listbox-container\" [hidden]=\"!listboxOpen\">\n    <po-listbox\n      #poListbox\n      #poListboxElement\n      p-type=\"option\"\n      [p-items]=\"listboxFilteredItems\"\n      (p-selectcombo-item)=\"onListboxClick($event, $event.event)\"\n      [p-visible]=\"listboxOpen\"\n      [p-filter-mode]=\"filterType\"\n      [p-should-mark-letter]=\"shouldMarkLetters\"\n      [p-filtering]=\"isFiltering\"\n      [p-search-value]=\"getInputValue()\"\n      [p-size]=\"size\"\n      (p-close)=\"onCloseListbox()\"\n      [p-literals]=\"literals\"\n      [p-separator]=\"showSeparator\"\n      [p-keys-label]=\"keysLabel\"\n      [p-footer-action-listbox]=\"showFooterActionListbox\"\n      (p-footer-action-listbox-event)=\"handlerFooterActionListbox()\"\n      [p-placeholder-listbox]=\"placeholderListbox\"\n    ></po-listbox>\n  </div>\n}\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox" }, { kind: "component", type: PoDropdownComponent, selector: "po-dropdown" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoSearchComponent, isStandalone: false, selector: "po-search", providers: [PoControlPositionService], viewQueries: [{ propertyName: "locateCounter", first: true, predicate: ["locateCounter"], descendants: true }, { propertyName: "poSearchInput", first: true, predicate: ["poSearchInput"], descendants: true, read: ElementRef, static: true }, { propertyName: "poListboxContainerElement", first: true, predicate: ["poListboxContainerElement"], descendants: true, read: ElementRef }, { propertyName: "poListboxElement", first: true, predicate: ["poListboxElement"], descendants: true, read: ElementRef }, { propertyName: "poListbox", first: true, predicate: ["poListbox"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"po-search\"\n  [class.po-search-disabled]=\"disabled\"\n  [class.po-search-filter-locate]=\"type === 'locate'\"\n  [attr.p-search-type]=\"type === 'locate'\"\n  [attr.p-size]=\"size\"\n>\n  @if (filterSelect && type !== 'locate') {\n    <div class=\"po-search-select\">\n      <po-dropdown\n        [p-label]=\"searchFilterSelectLabel\"\n        [p-disabled]=\"disabled\"\n        [p-actions]=\"searchFilterSelectActions\"\n        [p-size]=\"size\"\n      >\n      </po-dropdown>\n    </div>\n  }\n\n  @if (type === 'action' || type === 'locate' || type === 'execute') {\n    <div class=\"po-search-icon\">\n      <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"></po-icon>\n    </div>\n  }\n\n  <input\n    #poSearchInput\n    class=\"po-search-input\"\n    type=\"text\"\n    [attr.id]=\"id || null\"\n    [autocomplete]=\"autocomplete\"\n    [attr.name]=\"name\"\n    [ariaLabel]=\"ariaLabel\"\n    [class.po-search-input-clean]=\"!!poSearchInput.value && !disabled && type !== 'locate'\"\n    [class.po-search-input-trigger]=\"type === 'trigger'\"\n    [style.padding-right.px]=\"dynamicPaddingRight\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"literals.search\"\n    (input)=\"onInputHandler($event.target.value)\"\n    (keyup.enter)=\"onEnterKey($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n  />\n\n  <div class=\"po-search-buttons\">\n    @if (type === 'locate' && poSearchInput.value && !disabled) {\n      <span\n        #locateCounter\n        class=\"po-search-locate-counter\"\n        id=\"summary\"\n        [attr.aria-label]=\"\n          literals.result +\n          ' ' +\n          (locateSummary?.currentIndex ?? 0) +\n          ' ' +\n          literals.of +\n          ' ' +\n          (locateSummary?.total ?? 0)\n        \"\n      >\n        {{ locateSummary?.currentIndex ?? 0 }}/{{ locateSummary?.total ?? 0 }}\n      </span>\n    }\n\n    @if (!!poSearchInput.value && !disabled) {\n      <div [id]=\"idSearchButtonClean\">\n        <button\n          class=\"po-search-button po-search-button-clean\"\n          type=\"button\"\n          [ariaLabel]=\"literals.clean\"\n          (click)=\"clearSearch()\"\n          (keydown.enter)=\"clearSearch()\"\n          (keydown)=\"onCleanKeydown($event)\"\n        >\n          <po-clean class=\"po-icon-input\" [p-size]=\"size\"></po-clean>\n        </button>\n      </div>\n    }\n\n    @if (type === 'trigger') {\n      <button\n        class=\"po-search-button po-search-button-trigger\"\n        type=\"button\"\n        [ariaLabel]=\"literals.search\"\n        [disabled]=\"disabled\"\n        (click)=\"onSearchChange(poSearchInput.value, true, true)\"\n        (keydown.enter)=\"onSearchChange(poSearchInput.value, true, true)\"\n      >\n        <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"> </po-icon>\n      </button>\n    }\n\n    @if (showSearchLocateControls) {\n      <div class=\"po-search-locate-controls\">\n        <div class=\"po-search-divider\"></div>\n        <button\n          name=\"btnArrowUp\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.next\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locateNext.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_DOWN\"> </po-icon>\n        </button>\n\n        <button\n          name=\"btnArrowDown\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.previous\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locatePrevious.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_UP\"> </po-icon>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n\n@if (type !== 'locate') {\n  <div #poListboxContainerElement class=\"po-search-listbox-container\" [hidden]=\"!listboxOpen\">\n    <po-listbox\n      #poListbox\n      #poListboxElement\n      p-type=\"option\"\n      [p-items]=\"listboxFilteredItems\"\n      (p-selectcombo-item)=\"onListboxClick($event, $event.event)\"\n      [p-visible]=\"listboxOpen\"\n      [p-filter-mode]=\"filterType\"\n      [p-should-mark-letter]=\"shouldMarkLetters\"\n      [p-filtering]=\"isFiltering\"\n      [p-search-value]=\"getInputValue()\"\n      [p-size]=\"size\"\n      (p-close)=\"onCloseListbox()\"\n      [p-literals]=\"literals\"\n      [p-separator]=\"showSeparator\"\n      [p-keys-label]=\"keysLabel\"\n      [p-footer-action-listbox]=\"showFooterActionListbox\"\n      (p-footer-action-listbox-event)=\"handlerFooterActionListbox()\"\n      [p-placeholder-listbox]=\"placeholderListbox\"\n    ></po-listbox>\n  </div>\n}\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox" }, { kind: "component", type: PoDropdownComponent, selector: "po-dropdown" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-search', providers: [PoControlPositionService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  class=\"po-search\"\n  [class.po-search-disabled]=\"disabled\"\n  [class.po-search-filter-locate]=\"type === 'locate'\"\n  [attr.p-search-type]=\"type === 'locate'\"\n  [attr.p-size]=\"size\"\n>\n  @if (filterSelect && type !== 'locate') {\n    <div class=\"po-search-select\">\n      <po-dropdown\n        [p-label]=\"searchFilterSelectLabel\"\n        [p-disabled]=\"disabled\"\n        [p-actions]=\"searchFilterSelectActions\"\n        [p-size]=\"size\"\n      >\n      </po-dropdown>\n    </div>\n  }\n\n  @if (type === 'action' || type === 'locate' || type === 'execute') {\n    <div class=\"po-search-icon\">\n      <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"></po-icon>\n    </div>\n  }\n\n  <input\n    #poSearchInput\n    class=\"po-search-input\"\n    type=\"text\"\n    [ariaLabel]=\"ariaLabel\"\n    [class.po-search-input-clean]=\"!!poSearchInput.value && !disabled && type !== 'locate'\"\n    [class.po-search-input-trigger]=\"type === 'trigger'\"\n    [style.padding-right.px]=\"dynamicPaddingRight\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"literals.search\"\n    (input)=\"onInputHandler($event.target.value)\"\n    (keyup.enter)=\"onEnterKey($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n  />\n\n  <div class=\"po-search-buttons\">\n    @if (type === 'locate' && poSearchInput.value && !disabled) {\n      <span\n        #locateCounter\n        class=\"po-search-locate-counter\"\n        id=\"summary\"\n        [attr.aria-label]=\"\n          literals.result +\n          ' ' +\n          (locateSummary?.currentIndex ?? 0) +\n          ' ' +\n          literals.of +\n          ' ' +\n          (locateSummary?.total ?? 0)\n        \"\n      >\n        {{ locateSummary?.currentIndex ?? 0 }}/{{ locateSummary?.total ?? 0 }}\n      </span>\n    }\n\n    @if (!!poSearchInput.value && !disabled) {\n      <div [id]=\"idSearchButtonClean\">\n        <button\n          class=\"po-search-button po-search-button-clean\"\n          type=\"button\"\n          [ariaLabel]=\"literals.clean\"\n          (click)=\"clearSearch()\"\n          (keydown.enter)=\"clearSearch()\"\n          (keydown)=\"onCleanKeydown($event)\"\n        >\n          <po-clean class=\"po-icon-input\" [p-size]=\"size\"></po-clean>\n        </button>\n      </div>\n    }\n\n    @if (type === 'trigger') {\n      <button\n        class=\"po-search-button po-search-button-trigger\"\n        type=\"button\"\n        [ariaLabel]=\"literals.search\"\n        [disabled]=\"disabled\"\n        (click)=\"onSearchChange(poSearchInput.value, true, true)\"\n        (keydown.enter)=\"onSearchChange(poSearchInput.value, true, true)\"\n      >\n        <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"> </po-icon>\n      </button>\n    }\n\n    @if (showSearchLocateControls) {\n      <div class=\"po-search-locate-controls\">\n        <div class=\"po-search-divider\"></div>\n        <button\n          name=\"btnArrowUp\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.next\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locateNext.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_DOWN\"> </po-icon>\n        </button>\n\n        <button\n          name=\"btnArrowDown\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.previous\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locatePrevious.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_UP\"> </po-icon>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n\n@if (type !== 'locate') {\n  <div #poListboxContainerElement class=\"po-search-listbox-container\" [hidden]=\"!listboxOpen\">\n    <po-listbox\n      #poListbox\n      #poListboxElement\n      p-type=\"option\"\n      [p-items]=\"listboxFilteredItems\"\n      (p-selectcombo-item)=\"onListboxClick($event, $event.event)\"\n      [p-visible]=\"listboxOpen\"\n      [p-filter-mode]=\"filterType\"\n      [p-should-mark-letter]=\"shouldMarkLetters\"\n      [p-filtering]=\"isFiltering\"\n      [p-search-value]=\"getInputValue()\"\n      [p-size]=\"size\"\n      (p-close)=\"onCloseListbox()\"\n      [p-literals]=\"literals\"\n      [p-separator]=\"showSeparator\"\n      [p-keys-label]=\"keysLabel\"\n      [p-footer-action-listbox]=\"showFooterActionListbox\"\n      (p-footer-action-listbox-event)=\"handlerFooterActionListbox()\"\n      [p-placeholder-listbox]=\"placeholderListbox\"\n    ></po-listbox>\n  </div>\n}\n" }]
+            args: [{ selector: 'po-search', providers: [PoControlPositionService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  class=\"po-search\"\n  [class.po-search-disabled]=\"disabled\"\n  [class.po-search-filter-locate]=\"type === 'locate'\"\n  [attr.p-search-type]=\"type === 'locate'\"\n  [attr.p-size]=\"size\"\n>\n  @if (filterSelect && type !== 'locate') {\n    <div class=\"po-search-select\">\n      <po-dropdown\n        [p-label]=\"searchFilterSelectLabel\"\n        [p-disabled]=\"disabled\"\n        [p-actions]=\"searchFilterSelectActions\"\n        [p-size]=\"size\"\n      >\n      </po-dropdown>\n    </div>\n  }\n\n  @if (type === 'action' || type === 'locate' || type === 'execute') {\n    <div class=\"po-search-icon\">\n      <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"></po-icon>\n    </div>\n  }\n\n  <input\n    #poSearchInput\n    class=\"po-search-input\"\n    type=\"text\"\n    [attr.id]=\"id || null\"\n    [autocomplete]=\"autocomplete\"\n    [attr.name]=\"name\"\n    [ariaLabel]=\"ariaLabel\"\n    [class.po-search-input-clean]=\"!!poSearchInput.value && !disabled && type !== 'locate'\"\n    [class.po-search-input-trigger]=\"type === 'trigger'\"\n    [style.padding-right.px]=\"dynamicPaddingRight\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"literals.search\"\n    (input)=\"onInputHandler($event.target.value)\"\n    (keyup.enter)=\"onEnterKey($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n  />\n\n  <div class=\"po-search-buttons\">\n    @if (type === 'locate' && poSearchInput.value && !disabled) {\n      <span\n        #locateCounter\n        class=\"po-search-locate-counter\"\n        id=\"summary\"\n        [attr.aria-label]=\"\n          literals.result +\n          ' ' +\n          (locateSummary?.currentIndex ?? 0) +\n          ' ' +\n          literals.of +\n          ' ' +\n          (locateSummary?.total ?? 0)\n        \"\n      >\n        {{ locateSummary?.currentIndex ?? 0 }}/{{ locateSummary?.total ?? 0 }}\n      </span>\n    }\n\n    @if (!!poSearchInput.value && !disabled) {\n      <div [id]=\"idSearchButtonClean\">\n        <button\n          class=\"po-search-button po-search-button-clean\"\n          type=\"button\"\n          [ariaLabel]=\"literals.clean\"\n          (click)=\"clearSearch()\"\n          (keydown.enter)=\"clearSearch()\"\n          (keydown)=\"onCleanKeydown($event)\"\n        >\n          <po-clean class=\"po-icon-input\" [p-size]=\"size\"></po-clean>\n        </button>\n      </div>\n    }\n\n    @if (type === 'trigger') {\n      <button\n        class=\"po-search-button po-search-button-trigger\"\n        type=\"button\"\n        [ariaLabel]=\"literals.search\"\n        [disabled]=\"disabled\"\n        (click)=\"onSearchChange(poSearchInput.value, true, true)\"\n        (keydown.enter)=\"onSearchChange(poSearchInput.value, true, true)\"\n      >\n        <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"> </po-icon>\n      </button>\n    }\n\n    @if (showSearchLocateControls) {\n      <div class=\"po-search-locate-controls\">\n        <div class=\"po-search-divider\"></div>\n        <button\n          name=\"btnArrowUp\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.next\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locateNext.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_DOWN\"> </po-icon>\n        </button>\n\n        <button\n          name=\"btnArrowDown\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.previous\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locatePrevious.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_UP\"> </po-icon>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n\n@if (type !== 'locate') {\n  <div #poListboxContainerElement class=\"po-search-listbox-container\" [hidden]=\"!listboxOpen\">\n    <po-listbox\n      #poListbox\n      #poListboxElement\n      p-type=\"option\"\n      [p-items]=\"listboxFilteredItems\"\n      (p-selectcombo-item)=\"onListboxClick($event, $event.event)\"\n      [p-visible]=\"listboxOpen\"\n      [p-filter-mode]=\"filterType\"\n      [p-should-mark-letter]=\"shouldMarkLetters\"\n      [p-filtering]=\"isFiltering\"\n      [p-search-value]=\"getInputValue()\"\n      [p-size]=\"size\"\n      (p-close)=\"onCloseListbox()\"\n      [p-literals]=\"literals\"\n      [p-separator]=\"showSeparator\"\n      [p-keys-label]=\"keysLabel\"\n      [p-footer-action-listbox]=\"showFooterActionListbox\"\n      (p-footer-action-listbox-event)=\"handlerFooterActionListbox()\"\n      [p-placeholder-listbox]=\"placeholderListbox\"\n    ></po-listbox>\n  </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { locateCounter: [{
                 type: ViewChild,
                 args: ['locateCounter', { static: false }]
@@ -48032,11 +48091,11 @@ class PoMenuItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoMenuItemComponent, isStandalone: false, selector: "po-menu-item", inputs: { action: ["p-action", "action"], badgeAlert: ["p-badge-alert", "badgeAlert"], badgeColor: ["p-badge-color", "badgeColor"], collapsedMenu: ["p-collapsed-menu", "collapsedMenu"], icon: ["p-icon", "icon"], id: ["p-id", "id"], isOpened: ["p-is-opened", "isOpened"], label: ["p-label", "label"], level: ["p-level", "level"], link: ["p-link", "link"], shortLabel: ["p-short-label", "shortLabel"], type: ["p-type", "type"], badgeValue: ["p-badge-value", "badgeValue"], isSelected: ["p-is-selected", "isSelected"], isSubItem: ["p-is-sub-item", "isSubItem"], subItems: ["p-sub-items", "subItems"] }, viewQueries: [{ propertyName: "menuSubItems", first: true, predicate: ["menuSubItems"], descendants: true }], ngImport: i0, template: "<!-- menu com link interno -->\n@if (type === 'internalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [routerLink]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu com link externo -->\n@if (type === 'externalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [href]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem link -->\n@if (type === 'noLink') {\n  <a\n    class=\"po-menu-item-link\"\n    href=\"javascript:;\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem dados -->\n@if (type === 'noData') {\n  <div class=\"po-menu-item-link\" role=\"none\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </div>\n}\n<!-- menu com sub itens -->\n@if (type === 'subItems') {\n  <div class=\"po-menu-item-link po-clickable\" role=\"menuitem\" [attr.aria-expanded]=\"isOpened ? true : false\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n    <div\n      #menuSubItems\n      class=\"po-menu-sub-items\"\n      [hidden]=\"collapsedMenu || !isOpened\"\n      [attr.aria-expanded]=\"isOpened ? true : false\"\n      [attr.aria-hidden]=\"!isOpened ? true : false\"\n      role=\"group\"\n      [style.maxHeight.px]=\"maxHeight\"\n    >\n      <ul class=\"po-menu-sub-items-list\">\n        @for (subItem of subItems; track subItem) {\n          <li class=\"po-menu-sub-items-list-item\" [attr.aria-level]=\"subItem.level\">\n            <po-menu-item\n              p-is-sub-item\n              [p-action]=\"subItem.action\"\n              [p-badge-alert]=\"subItem.badgeAlert\"\n              [p-badge-color]=\"subItem.badge ? subItem.badge.color : undefined\"\n              [p-badge-value]=\"subItem.badge ? subItem.badge.value : undefined\"\n              [p-id]=\"subItem.id\"\n              [p-label]=\"subItem.label\"\n              [p-level]=\"subItem.level\"\n              [p-link]=\"subItem.link\"\n              [p-sub-items]=\"subItem.subItems\"\n              [p-type]=\"subItem.type\"\n            ></po-menu-item>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n}\n\n<ng-template #menuItemTemplate>\n  <div\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"type === 'subItems' && collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n    class=\"po-menu-item\"\n    [tabindex]=\"type === 'subItems' ? 0 : -1\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-hidden]=\"type === 'subItems' ? false : true\"\n    [attr.role]=\"type === 'subItems' ? 'menuitem' : undefined\"\n    [class.po-menu-icon-container]=\"level === 1 && icon\"\n    [class.po-menu-item-selected]=\"isSelected\"\n    [class.po-menu-item-level-two]=\"level === 2\"\n    [class.po-menu-item-level-three]=\"level === 3\"\n    [class.po-menu-item-level-four]=\"level === 4\"\n    [class.po-menu-item-grouper-up]=\"type === 'subItems' && isOpened\"\n    [class.po-menu-item-grouper-down]=\"type === 'subItems' && !isOpened\"\n    [class.po-menu-item-no-data]=\"type === 'noData'\"\n    [class.po-menu-sub-item-selected]=\"isSelectedSubItem\"\n    (click)=\"clickMenuItem($event)\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n  >\n    @if (level === 1 && icon) {\n      <po-icon aria-hidden=\"true\" class=\"po-menu-icon-item\" [p-icon]=\"icon\"></po-icon>\n    }\n\n    @if (type === 'subItems' && !collapsedMenu) {\n      <po-icon\n        class=\"po-menu-group-icon\"\n        [p-icon]=\"isOpened ? 'ICON_ARROW_UP po-field-icon' : 'ICON_ARROW_DOWN po-field-icon'\"\n      ></po-icon>\n    }\n\n    <span [class.po-menu-icon-label]=\"level === 1 && icon\">\n      {{ label }}\n    </span>\n\n    @if (canShowBadge) {\n      <po-badge\n        aria-hidden=\"true\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-align' : 'po-menu-badge-align-collapsed'\"\n        [p-color]=\"badgeColor\"\n        [p-value]=\"badgeValue\"\n      ></po-badge>\n    }\n\n    @if (badgeAlert) {\n      <span\n        aria-hidden=\"true\"\n        class=\"po-color-07\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-alert' : 'po-menu-badge-alert-collapsed'\"\n      ></span>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PoBadgeComponent, selector: "po-badge" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoMenuItemComponent, selector: "po-menu-item", inputs: ["p-action", "p-badge-alert", "p-badge-color", "p-collapsed-menu", "p-icon", "p-id", "p-is-opened", "p-label", "p-level", "p-link", "p-short-label", "p-type", "p-badge-value", "p-is-selected", "p-is-sub-item", "p-sub-items"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoMenuItemComponent, isStandalone: false, selector: "po-menu-item", inputs: { action: ["p-action", "action"], badgeAlert: ["p-badge-alert", "badgeAlert"], badgeColor: ["p-badge-color", "badgeColor"], collapsedMenu: ["p-collapsed-menu", "collapsedMenu"], icon: ["p-icon", "icon"], id: ["p-id", "id"], isOpened: ["p-is-opened", "isOpened"], label: ["p-label", "label"], level: ["p-level", "level"], link: ["p-link", "link"], shortLabel: ["p-short-label", "shortLabel"], type: ["p-type", "type"], badgeValue: ["p-badge-value", "badgeValue"], isSelected: ["p-is-selected", "isSelected"], isSubItem: ["p-is-sub-item", "isSubItem"], subItems: ["p-sub-items", "subItems"] }, viewQueries: [{ propertyName: "menuSubItems", first: true, predicate: ["menuSubItems"], descendants: true }], ngImport: i0, template: "<!-- menu com link interno -->\n@if (type === 'internalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [routerLink]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu com link externo -->\n@if (type === 'externalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [href]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem link -->\n@if (type === 'noLink') {\n  <a\n    class=\"po-menu-item-link\"\n    href=\"javascript:;\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem dados -->\n@if (type === 'noData') {\n  <div class=\"po-menu-item-link\" role=\"none\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </div>\n}\n<!-- menu com sub itens -->\n@if (type === 'subItems') {\n  <div class=\"po-menu-item-link po-clickable\" role=\"menuitem\" [attr.aria-expanded]=\"isOpened ? true : false\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n    <div\n      #menuSubItems\n      class=\"po-menu-sub-items\"\n      [hidden]=\"collapsedMenu || !isOpened\"\n      [attr.aria-expanded]=\"isOpened ? true : false\"\n      [attr.aria-hidden]=\"!isOpened ? true : false\"\n      role=\"group\"\n      [style.maxHeight.px]=\"maxHeight\"\n    >\n      <ul class=\"po-menu-sub-items-list\">\n        @for (subItem of subItems; track subItem) {\n          <li class=\"po-menu-sub-items-list-item\" [attr.aria-level]=\"subItem.level\">\n            <po-menu-item\n              p-is-sub-item\n              [p-action]=\"subItem.action\"\n              [p-badge-alert]=\"subItem.badgeAlert\"\n              [p-badge-color]=\"subItem.badge ? subItem.badge.color : undefined\"\n              [p-badge-value]=\"subItem.badge ? subItem.badge.value : undefined\"\n              [p-id]=\"subItem.id\"\n              [p-label]=\"subItem.label\"\n              [p-level]=\"subItem.level\"\n              [p-link]=\"subItem.link\"\n              [p-sub-items]=\"subItem.subItems\"\n              [p-type]=\"subItem.type\"\n            ></po-menu-item>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n}\n\n<ng-template #menuItemTemplate>\n  <div\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"type === 'subItems' && collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n    class=\"po-menu-item\"\n    [tabindex]=\"type === 'subItems' ? 0 : -1\"\n    [attr.aria-label]=\"label\"\n    [attr.role]=\"type === 'subItems' ? 'menuitem' : undefined\"\n    [class.po-menu-icon-container]=\"level === 1 && icon\"\n    [class.po-menu-item-selected]=\"isSelected\"\n    [class.po-menu-item-level-two]=\"level === 2\"\n    [class.po-menu-item-level-three]=\"level === 3\"\n    [class.po-menu-item-level-four]=\"level === 4\"\n    [class.po-menu-item-grouper-up]=\"type === 'subItems' && isOpened\"\n    [class.po-menu-item-grouper-down]=\"type === 'subItems' && !isOpened\"\n    [class.po-menu-item-no-data]=\"type === 'noData'\"\n    [class.po-menu-sub-item-selected]=\"isSelectedSubItem\"\n    (click)=\"clickMenuItem($event)\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n  >\n    @if (level === 1 && icon) {\n      <po-icon aria-hidden=\"true\" class=\"po-menu-icon-item\" [p-icon]=\"icon\"></po-icon>\n    }\n\n    @if (type === 'subItems' && !collapsedMenu) {\n      <po-icon\n        class=\"po-menu-group-icon\"\n        [p-icon]=\"isOpened ? 'ICON_ARROW_UP po-field-icon' : 'ICON_ARROW_DOWN po-field-icon'\"\n      ></po-icon>\n    }\n\n    <span [class.po-menu-icon-label]=\"level === 1 && icon\">\n      {{ label }}\n    </span>\n\n    @if (canShowBadge) {\n      <po-badge\n        aria-hidden=\"true\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-align' : 'po-menu-badge-align-collapsed'\"\n        [p-color]=\"badgeColor\"\n        [p-value]=\"badgeValue\"\n      ></po-badge>\n    }\n\n    @if (badgeAlert) {\n      <span\n        aria-hidden=\"true\"\n        class=\"po-color-07\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-alert' : 'po-menu-badge-alert-collapsed'\"\n      ></span>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PoBadgeComponent, selector: "po-badge" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoMenuItemComponent, selector: "po-menu-item", inputs: ["p-action", "p-badge-alert", "p-badge-color", "p-collapsed-menu", "p-icon", "p-id", "p-is-opened", "p-label", "p-level", "p-link", "p-short-label", "p-type", "p-badge-value", "p-is-selected", "p-is-sub-item", "p-sub-items"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-menu-item', standalone: false, template: "<!-- menu com link interno -->\n@if (type === 'internalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [routerLink]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu com link externo -->\n@if (type === 'externalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [href]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem link -->\n@if (type === 'noLink') {\n  <a\n    class=\"po-menu-item-link\"\n    href=\"javascript:;\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem dados -->\n@if (type === 'noData') {\n  <div class=\"po-menu-item-link\" role=\"none\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </div>\n}\n<!-- menu com sub itens -->\n@if (type === 'subItems') {\n  <div class=\"po-menu-item-link po-clickable\" role=\"menuitem\" [attr.aria-expanded]=\"isOpened ? true : false\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n    <div\n      #menuSubItems\n      class=\"po-menu-sub-items\"\n      [hidden]=\"collapsedMenu || !isOpened\"\n      [attr.aria-expanded]=\"isOpened ? true : false\"\n      [attr.aria-hidden]=\"!isOpened ? true : false\"\n      role=\"group\"\n      [style.maxHeight.px]=\"maxHeight\"\n    >\n      <ul class=\"po-menu-sub-items-list\">\n        @for (subItem of subItems; track subItem) {\n          <li class=\"po-menu-sub-items-list-item\" [attr.aria-level]=\"subItem.level\">\n            <po-menu-item\n              p-is-sub-item\n              [p-action]=\"subItem.action\"\n              [p-badge-alert]=\"subItem.badgeAlert\"\n              [p-badge-color]=\"subItem.badge ? subItem.badge.color : undefined\"\n              [p-badge-value]=\"subItem.badge ? subItem.badge.value : undefined\"\n              [p-id]=\"subItem.id\"\n              [p-label]=\"subItem.label\"\n              [p-level]=\"subItem.level\"\n              [p-link]=\"subItem.link\"\n              [p-sub-items]=\"subItem.subItems\"\n              [p-type]=\"subItem.type\"\n            ></po-menu-item>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n}\n\n<ng-template #menuItemTemplate>\n  <div\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"type === 'subItems' && collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n    class=\"po-menu-item\"\n    [tabindex]=\"type === 'subItems' ? 0 : -1\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-hidden]=\"type === 'subItems' ? false : true\"\n    [attr.role]=\"type === 'subItems' ? 'menuitem' : undefined\"\n    [class.po-menu-icon-container]=\"level === 1 && icon\"\n    [class.po-menu-item-selected]=\"isSelected\"\n    [class.po-menu-item-level-two]=\"level === 2\"\n    [class.po-menu-item-level-three]=\"level === 3\"\n    [class.po-menu-item-level-four]=\"level === 4\"\n    [class.po-menu-item-grouper-up]=\"type === 'subItems' && isOpened\"\n    [class.po-menu-item-grouper-down]=\"type === 'subItems' && !isOpened\"\n    [class.po-menu-item-no-data]=\"type === 'noData'\"\n    [class.po-menu-sub-item-selected]=\"isSelectedSubItem\"\n    (click)=\"clickMenuItem($event)\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n  >\n    @if (level === 1 && icon) {\n      <po-icon aria-hidden=\"true\" class=\"po-menu-icon-item\" [p-icon]=\"icon\"></po-icon>\n    }\n\n    @if (type === 'subItems' && !collapsedMenu) {\n      <po-icon\n        class=\"po-menu-group-icon\"\n        [p-icon]=\"isOpened ? 'ICON_ARROW_UP po-field-icon' : 'ICON_ARROW_DOWN po-field-icon'\"\n      ></po-icon>\n    }\n\n    <span [class.po-menu-icon-label]=\"level === 1 && icon\">\n      {{ label }}\n    </span>\n\n    @if (canShowBadge) {\n      <po-badge\n        aria-hidden=\"true\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-align' : 'po-menu-badge-align-collapsed'\"\n        [p-color]=\"badgeColor\"\n        [p-value]=\"badgeValue\"\n      ></po-badge>\n    }\n\n    @if (badgeAlert) {\n      <span\n        aria-hidden=\"true\"\n        class=\"po-color-07\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-alert' : 'po-menu-badge-alert-collapsed'\"\n      ></span>\n    }\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'po-menu-item', standalone: false, template: "<!-- menu com link interno -->\n@if (type === 'internalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [routerLink]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu com link externo -->\n@if (type === 'externalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [href]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem link -->\n@if (type === 'noLink') {\n  <a\n    class=\"po-menu-item-link\"\n    href=\"javascript:;\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem dados -->\n@if (type === 'noData') {\n  <div class=\"po-menu-item-link\" role=\"none\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </div>\n}\n<!-- menu com sub itens -->\n@if (type === 'subItems') {\n  <div class=\"po-menu-item-link po-clickable\" role=\"menuitem\" [attr.aria-expanded]=\"isOpened ? true : false\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n    <div\n      #menuSubItems\n      class=\"po-menu-sub-items\"\n      [hidden]=\"collapsedMenu || !isOpened\"\n      [attr.aria-expanded]=\"isOpened ? true : false\"\n      [attr.aria-hidden]=\"!isOpened ? true : false\"\n      role=\"group\"\n      [style.maxHeight.px]=\"maxHeight\"\n    >\n      <ul class=\"po-menu-sub-items-list\">\n        @for (subItem of subItems; track subItem) {\n          <li class=\"po-menu-sub-items-list-item\" [attr.aria-level]=\"subItem.level\">\n            <po-menu-item\n              p-is-sub-item\n              [p-action]=\"subItem.action\"\n              [p-badge-alert]=\"subItem.badgeAlert\"\n              [p-badge-color]=\"subItem.badge ? subItem.badge.color : undefined\"\n              [p-badge-value]=\"subItem.badge ? subItem.badge.value : undefined\"\n              [p-id]=\"subItem.id\"\n              [p-label]=\"subItem.label\"\n              [p-level]=\"subItem.level\"\n              [p-link]=\"subItem.link\"\n              [p-sub-items]=\"subItem.subItems\"\n              [p-type]=\"subItem.type\"\n            ></po-menu-item>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n}\n\n<ng-template #menuItemTemplate>\n  <div\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"type === 'subItems' && collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n    class=\"po-menu-item\"\n    [tabindex]=\"type === 'subItems' ? 0 : -1\"\n    [attr.aria-label]=\"label\"\n    [attr.role]=\"type === 'subItems' ? 'menuitem' : undefined\"\n    [class.po-menu-icon-container]=\"level === 1 && icon\"\n    [class.po-menu-item-selected]=\"isSelected\"\n    [class.po-menu-item-level-two]=\"level === 2\"\n    [class.po-menu-item-level-three]=\"level === 3\"\n    [class.po-menu-item-level-four]=\"level === 4\"\n    [class.po-menu-item-grouper-up]=\"type === 'subItems' && isOpened\"\n    [class.po-menu-item-grouper-down]=\"type === 'subItems' && !isOpened\"\n    [class.po-menu-item-no-data]=\"type === 'noData'\"\n    [class.po-menu-sub-item-selected]=\"isSelectedSubItem\"\n    (click)=\"clickMenuItem($event)\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n  >\n    @if (level === 1 && icon) {\n      <po-icon aria-hidden=\"true\" class=\"po-menu-icon-item\" [p-icon]=\"icon\"></po-icon>\n    }\n\n    @if (type === 'subItems' && !collapsedMenu) {\n      <po-icon\n        class=\"po-menu-group-icon\"\n        [p-icon]=\"isOpened ? 'ICON_ARROW_UP po-field-icon' : 'ICON_ARROW_DOWN po-field-icon'\"\n      ></po-icon>\n    }\n\n    <span [class.po-menu-icon-label]=\"level === 1 && icon\">\n      {{ label }}\n    </span>\n\n    @if (canShowBadge) {\n      <po-badge\n        aria-hidden=\"true\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-align' : 'po-menu-badge-align-collapsed'\"\n        [p-color]=\"badgeColor\"\n        [p-value]=\"badgeValue\"\n      ></po-badge>\n    }\n\n    @if (badgeAlert) {\n      <span\n        aria-hidden=\"true\"\n        class=\"po-color-07\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-alert' : 'po-menu-badge-alert-collapsed'\"\n      ></span>\n    }\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { action: [{
                 type: Input,
                 args: ['p-action']