primeng 15.3.0 → 15.4.1

package/fesm2020/primeng-panelmenu.mjs

@@ -1,13 +1,18 @@
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, Input, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { Component, ViewEncapsulation, Input, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { PrimeTemplate, SharedModule } from 'primeng/api';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i3 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
 import { DomHandler } from 'primeng/dom';
+import { AngleDownIcon } from 'primeng/icons/angledown';
+import { ChevronDownIcon } from 'primeng/icons/chevrondown';
+import { AngleRightIcon } from 'primeng/icons/angleright';
+import { ChevronRightIcon } from 'primeng/icons/chevronright';
 
 class BasePanelMenuItem {
     constructor(ref) {
@@ -32,8 +37,9 @@ class BasePanelMenuItem {
     }
 }
 class PanelMenuSub extends BasePanelMenuItem {
-    constructor(ref) {
+    constructor(ref, panelMenu) {
         super(ref);
+        this.panelMenu = panelMenu;
     }
     onItemKeyDown(event) {
         let listItem = event.currentTarget;
@@ -53,7 +59,7 @@ class PanelMenuSub extends BasePanelMenuItem {
         return this.expanded ? { value: 'visible', params: { transitionParams: this.transitionOptions, height: '*' } } : { value: 'hidden', params: { transitionParams: this.transitionOptions, height: '0' } };
     }
 }
-PanelMenuSub.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: PanelMenuSub, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PanelMenuSub.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: PanelMenuSub, deps: [{ token: i0.ChangeDetectorRef }, { token: PanelMenu }], target: i0.ɵɵFactoryTarget.Component });
 PanelMenuSub.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.4", type: PanelMenuSub, selector: "p-panelMenuSub", inputs: { item: "item", expanded: "expanded", parentExpanded: "parentExpanded", transitionOptions: "transitionOptions", root: "root" }, host: { classAttribute: "p-element" }, usesInheritance: true, ngImport: i0, template: `
         <ul [ngClass]="{ 'p-submenu-list': true, 'p-panelmenu-root-submenu': root, 'p-submenu-expanded': expanded }" [@submenu]="getAnimation()" role="tree">
             <ng-template ngFor let-child [ngForOf]="item.items">
@@ -73,7 +79,13 @@ PanelMenuSub.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
                         [target]="child.target"
                         [attr.title]="child.title"
                     >
-                        <span class="p-panelmenu-icon pi pi-fw" [ngClass]="{ 'pi-angle-right': !child.expanded, 'pi-angle-down': child.expanded }" *ngIf="child.items" [ngStyle]="child.iconStyle"></span>
+                        <ng-container *ngIf="child.items">
+                            <ng-container *ngIf="!panelMenu.submenuIconTemplate">
+                                <AngleDownIcon [styleClass]="'p-panelmenu-icon'" *ngIf="child.expanded" [ngStyle]="child.iconStyle"/>
+                                <AngleRightIcon [styleClass]="'p-panelmenu-icon'" *ngIf="!child.expanded" [ngStyle]="child.iconStyle"/>
+                            </ng-container>
+                            <ng-template *ngTemplateOutlet="panelMenu.submenuIconTemplate"></ng-template>
+                        </ng-container>
                         <span class="p-menuitem-icon" [ngClass]="child.icon" *ngIf="child.icon" [ngStyle]="child.iconStyle"></span>
                         <span class="p-menuitem-text" *ngIf="child.escape !== false; else htmlLabel">{{ child.label }}</span>
                         <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="child.label"></span></ng-template>
@@ -102,7 +114,13 @@ PanelMenuSub.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
                         [replaceUrl]="child.replaceUrl"
                         [state]="child.state"
                     >
-                        <span class="p-panelmenu-icon pi pi-fw" [ngClass]="{ 'pi-angle-right': !child.expanded, 'pi-angle-down': child.expanded }" *ngIf="child.items" [ngStyle]="child.iconStyle"></span>
+                        <ng-container *ngIf="child.items">
+                            <ng-container *ngIf="!panelMenu.submenuIconTemplate">
+                                <AngleDownIcon *ngIf="child.expanded" [styleClass]="'p-panelmenu-icon'" [ngStyle]="child.iconStyle"/>
+                                <AngleRightIcon *ngIf="!child.expanded" [styleClass]="'p-panelmenu-icon'" [ngStyle]="child.iconStyle"/>
+                            </ng-container>
+                            <ng-template *ngTemplateOutlet="panelMenu.submenuIconTemplate"></ng-template>
+                        </ng-container>
                         <span class="p-menuitem-icon" [ngClass]="child.icon" *ngIf="child.icon" [ngStyle]="child.iconStyle"></span>
                         <span class="p-menuitem-text" *ngIf="child.escape !== false; else htmlRouteLabel">{{ child.label }}</span>
                         <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="child.label"></span></ng-template>
@@ -112,7 +130,7 @@ PanelMenuSub.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
                 </li>
             </ng-template>
         </ul>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: PanelMenuSub, selector: "p-panelMenuSub", inputs: ["item", "expanded", "parentExpanded", "transitionOptions", "root"] }], animations: [
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.RouterLink; }), selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.RouterLinkActive; }), selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.Tooltip; }), selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i0.forwardRef(function () { return AngleDownIcon; }), selector: "AngleDownIcon" }, { kind: "component", type: i0.forwardRef(function () { return AngleRightIcon; }), selector: "AngleRightIcon" }, { kind: "component", type: i0.forwardRef(function () { return PanelMenuSub; }), selector: "p-panelMenuSub", inputs: ["item", "expanded", "parentExpanded", "transitionOptions", "root"] }], animations: [
         trigger('submenu', [
             state('hidden', style({
                 height: '0'
@@ -147,7 +165,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImpor
                         [target]="child.target"
                         [attr.title]="child.title"
                     >
-                        <span class="p-panelmenu-icon pi pi-fw" [ngClass]="{ 'pi-angle-right': !child.expanded, 'pi-angle-down': child.expanded }" *ngIf="child.items" [ngStyle]="child.iconStyle"></span>
+                        <ng-container *ngIf="child.items">
+                            <ng-container *ngIf="!panelMenu.submenuIconTemplate">
+                                <AngleDownIcon [styleClass]="'p-panelmenu-icon'" *ngIf="child.expanded" [ngStyle]="child.iconStyle"/>
+                                <AngleRightIcon [styleClass]="'p-panelmenu-icon'" *ngIf="!child.expanded" [ngStyle]="child.iconStyle"/>
+                            </ng-container>
+                            <ng-template *ngTemplateOutlet="panelMenu.submenuIconTemplate"></ng-template>
+                        </ng-container>
                         <span class="p-menuitem-icon" [ngClass]="child.icon" *ngIf="child.icon" [ngStyle]="child.iconStyle"></span>
                         <span class="p-menuitem-text" *ngIf="child.escape !== false; else htmlLabel">{{ child.label }}</span>
                         <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="child.label"></span></ng-template>
@@ -176,7 +200,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImpor
                         [replaceUrl]="child.replaceUrl"
                         [state]="child.state"
                     >
-                        <span class="p-panelmenu-icon pi pi-fw" [ngClass]="{ 'pi-angle-right': !child.expanded, 'pi-angle-down': child.expanded }" *ngIf="child.items" [ngStyle]="child.iconStyle"></span>
+                        <ng-container *ngIf="child.items">
+                            <ng-container *ngIf="!panelMenu.submenuIconTemplate">
+                                <AngleDownIcon *ngIf="child.expanded" [styleClass]="'p-panelmenu-icon'" [ngStyle]="child.iconStyle"/>
+                                <AngleRightIcon *ngIf="!child.expanded" [styleClass]="'p-panelmenu-icon'" [ngStyle]="child.iconStyle"/>
+                            </ng-container>
+                            <ng-template *ngTemplateOutlet="panelMenu.submenuIconTemplate"></ng-template>
+                        </ng-container>
                         <span class="p-menuitem-icon" [ngClass]="child.icon" *ngIf="child.icon" [ngStyle]="child.iconStyle"></span>
                         <span class="p-menuitem-text" *ngIf="child.escape !== false; else htmlRouteLabel">{{ child.label }}</span>
                         <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="child.label"></span></ng-template>
@@ -204,7 +234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImpor
                         class: 'p-element'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { item: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: PanelMenu }]; }, propDecorators: { item: [{
                 type: Input
             }], expanded: [{
                 type: Input
@@ -221,6 +251,15 @@ class PanelMenu extends BasePanelMenuItem {
         this.multiple = true;
         this.transitionOptions = '400ms cubic-bezier(0.86, 0, 0.07, 1)';
     }
+    ngAfterContentInit() {
+        this.templates.forEach((item) => {
+            switch (item.getType()) {
+                case 'submenuicon':
+                    this.submenuIconTemplate = item.template;
+                    break;
+            }
+        });
+    }
     collapseAll() {
         for (let item of this.model) {
             if (item.expanded) {
@@ -264,7 +303,7 @@ class PanelMenu extends BasePanelMenuItem {
     }
 }
 PanelMenu.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: PanelMenu, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PanelMenu.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.4", type: PanelMenu, selector: "p-panelMenu", inputs: { model: "model", style: "style", styleClass: "styleClass", multiple: "multiple", transitionOptions: "transitionOptions" }, host: { classAttribute: "p-element" }, usesInheritance: true, ngImport: i0, template: `
+PanelMenu.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.4", type: PanelMenu, selector: "p-panelMenu", inputs: { model: "model", style: "style", styleClass: "styleClass", multiple: "multiple", transitionOptions: "transitionOptions" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
         <div [class]="styleClass" [ngStyle]="style" [ngClass]="'p-panelmenu p-component'">
             <ng-container *ngFor="let item of model; let f = first; let l = last">
                 <div class="p-panelmenu-panel" *ngIf="visible(item)">
@@ -283,7 +322,16 @@ PanelMenu.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15
                             [attr.id]="item.id + '_header'"
                             [attr.aria-controls]="item.id + '_content'"
                         >
-                            <span *ngIf="item.items" class="p-panelmenu-icon pi" [ngClass]="{ 'pi-chevron-right': !item.expanded, 'pi-chevron-down': item.expanded }"></span>
+                            <!--
+                                <span *ngIf="item.items" class="p-panelmenu-icon pi" [ngClass]="{ 'pi-chevron-right': !item.expanded, 'pi-chevron-down': item.expanded }"></span>
+                             -->
+                            <ng-container *ngIf="item.items">
+                                <ng-container *ngIf="!submenuIconTemplate">
+                                    <ChevronDownIcon [styleClass]="'p-panelmenu-icon'" *ngIf="item.expanded" />
+                                    <ChevronRightIcon [styleClass]="'p-panelmenu-icon'" *ngIf="!item.expanded" />
+                                </ng-container>
+                                <ng-template *ngTemplateOutlet="submenuIconTemplate"></ng-template>
+                            </ng-container>
                             <span class="p-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon" [ngStyle]="item.iconStyle"></span>
                             <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlLabel">{{ item.label }}</span>
                             <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
@@ -309,7 +357,17 @@ PanelMenu.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15
                             [replaceUrl]="item.replaceUrl"
                             [state]="item.state"
                         >
-                            <span *ngIf="item.items" class="p-panelmenu-icon pi" [ngClass]="{ 'pi-chevron-right': !item.expanded, 'pi-chevron-down': item.expanded }"></span>
+
+                            <!-- 
+                                <span *ngIf="item.items" class="p-panelmenu-icon pi" [ngClass]="{ 'pi-chevron-right': !item.expanded, 'pi-chevron-down': item.expanded }"></span>
+                            -->
+                            <ng-container *ngIf="item.items">
+                                <ng-container *ngIf="!submenuIconTemplate">
+                                    <ChevronDownIcon [styleClass]="'p-panelmenu-icon'" *ngIf="item.expanded" />
+                                    <ChevronRightIcon [styleClass]="'p-panelmenu-icon'" *ngIf="!item.expanded" />
+                                </ng-container>
+                                <ng-template *ngTemplateOutlet="submenuIconTemplate"></ng-template>
+                            </ng-container>
                             <span class="p-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon" [ngStyle]="item.iconStyle"></span>
                             <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlRouteLabel">{{ item.label }}</span>
                             <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
@@ -324,7 +382,7 @@ PanelMenu.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15
                 </div>
             </ng-container>
         </div>
-    `, isInline: true, styles: [".p-panelmenu .p-panelmenu-header-link{display:flex;align-items:center;-webkit-user-select:none;user-select:none;cursor:pointer;position:relative;text-decoration:none}.p-panelmenu .p-panelmenu-header-link:focus{z-index:1}.p-panelmenu .p-submenu-list{margin:0;padding:0;list-style:none}.p-panelmenu .p-menuitem-link{display:flex;align-items:center;-webkit-user-select:none;user-select:none;cursor:pointer;text-decoration:none}.p-panelmenu .p-menuitem-text{line-height:1}.p-panelmenu-expanded.p-toggleable-content:not(.ng-animating),.p-panelmenu .p-submenu-expanded:not(.ng-animating){overflow:visible}.p-panelmenu .p-toggleable-content,.p-panelmenu .p-submenu-list{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: PanelMenuSub, selector: "p-panelMenuSub", inputs: ["item", "expanded", "parentExpanded", "transitionOptions", "root"] }], animations: [
+    `, isInline: true, styles: [".p-panelmenu .p-panelmenu-header-link{display:flex;align-items:center;-webkit-user-select:none;user-select:none;cursor:pointer;position:relative;text-decoration:none}.p-panelmenu .p-panelmenu-header-link:focus{z-index:1}.p-panelmenu .p-submenu-list{margin:0;padding:0;list-style:none}.p-panelmenu .p-menuitem-link{display:flex;align-items:center;-webkit-user-select:none;user-select:none;cursor:pointer;text-decoration:none}.p-panelmenu .p-menuitem-text{line-height:1}.p-panelmenu-expanded.p-toggleable-content:not(.ng-animating),.p-panelmenu .p-submenu-expanded:not(.ng-animating){overflow:visible}.p-panelmenu .p-toggleable-content,.p-panelmenu .p-submenu-list{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.RouterLink; }), selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.RouterLinkActive; }), selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.Tooltip; }), selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i0.forwardRef(function () { return ChevronDownIcon; }), selector: "ChevronDownIcon" }, { kind: "component", type: i0.forwardRef(function () { return ChevronRightIcon; }), selector: "ChevronRightIcon" }, { kind: "component", type: i0.forwardRef(function () { return PanelMenuSub; }), selector: "p-panelMenuSub", inputs: ["item", "expanded", "parentExpanded", "transitionOptions", "root"] }], animations: [
         trigger('rootItem', [
             state('hidden', style({
                 height: '0'
@@ -357,7 +415,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImpor
                             [attr.id]="item.id + '_header'"
                             [attr.aria-controls]="item.id + '_content'"
                         >
-                            <span *ngIf="item.items" class="p-panelmenu-icon pi" [ngClass]="{ 'pi-chevron-right': !item.expanded, 'pi-chevron-down': item.expanded }"></span>
+                            <!--
+                                <span *ngIf="item.items" class="p-panelmenu-icon pi" [ngClass]="{ 'pi-chevron-right': !item.expanded, 'pi-chevron-down': item.expanded }"></span>
+                             -->
+                            <ng-container *ngIf="item.items">
+                                <ng-container *ngIf="!submenuIconTemplate">
+                                    <ChevronDownIcon [styleClass]="'p-panelmenu-icon'" *ngIf="item.expanded" />
+                                    <ChevronRightIcon [styleClass]="'p-panelmenu-icon'" *ngIf="!item.expanded" />
+                                </ng-container>
+                                <ng-template *ngTemplateOutlet="submenuIconTemplate"></ng-template>
+                            </ng-container>
                             <span class="p-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon" [ngStyle]="item.iconStyle"></span>
                             <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlLabel">{{ item.label }}</span>
                             <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
@@ -383,7 +450,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImpor
                             [replaceUrl]="item.replaceUrl"
                             [state]="item.state"
                         >
-                            <span *ngIf="item.items" class="p-panelmenu-icon pi" [ngClass]="{ 'pi-chevron-right': !item.expanded, 'pi-chevron-down': item.expanded }"></span>
+
+                            <!-- 
+                                <span *ngIf="item.items" class="p-panelmenu-icon pi" [ngClass]="{ 'pi-chevron-right': !item.expanded, 'pi-chevron-down': item.expanded }"></span>
+                            -->
+                            <ng-container *ngIf="item.items">
+                                <ng-container *ngIf="!submenuIconTemplate">
+                                    <ChevronDownIcon [styleClass]="'p-panelmenu-icon'" *ngIf="item.expanded" />
+                                    <ChevronRightIcon [styleClass]="'p-panelmenu-icon'" *ngIf="!item.expanded" />
+                                </ng-container>
+                                <ng-template *ngTemplateOutlet="submenuIconTemplate"></ng-template>
+                            </ng-container>
                             <span class="p-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon" [ngStyle]="item.iconStyle"></span>
                             <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlRouteLabel">{{ item.label }}</span>
                             <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
@@ -422,17 +499,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImpor
                 type: Input
             }], transitionOptions: [{
                 type: Input
+            }], templates: [{
+                type: ContentChildren,
+                args: [PrimeTemplate]
             }] } });
 class PanelMenuModule {
 }
 PanelMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: PanelMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PanelMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.4", ngImport: i0, type: PanelMenuModule, declarations: [PanelMenu, PanelMenuSub], imports: [CommonModule, RouterModule, TooltipModule], exports: [PanelMenu, RouterModule, TooltipModule] });
-PanelMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: PanelMenuModule, imports: [CommonModule, RouterModule, TooltipModule, RouterModule, TooltipModule] });
+PanelMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.4", ngImport: i0, type: PanelMenuModule, declarations: [PanelMenu, PanelMenuSub], imports: [CommonModule, RouterModule, TooltipModule, SharedModule, AngleDownIcon, AngleRightIcon, ChevronDownIcon, ChevronRightIcon], exports: [PanelMenu, RouterModule, TooltipModule, SharedModule] });
+PanelMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: PanelMenuModule, imports: [CommonModule, RouterModule, TooltipModule, SharedModule, AngleDownIcon, AngleRightIcon, ChevronDownIcon, ChevronRightIcon, RouterModule, TooltipModule, SharedModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: PanelMenuModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, RouterModule, TooltipModule],
-                    exports: [PanelMenu, RouterModule, TooltipModule],
+                    imports: [CommonModule, RouterModule, TooltipModule, SharedModule, AngleDownIcon, AngleRightIcon, ChevronDownIcon, ChevronRightIcon],
+                    exports: [PanelMenu, RouterModule, TooltipModule, SharedModule],
                     declarations: [PanelMenu, PanelMenuSub]
                 }]
         }] });

package/fesm2020/primeng-panelmenu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"primeng-panelmenu.mjs","sources":["../../src/app/components/panelmenu/panelmenu.ts","../../src/app/components/panelmenu/primeng-panelmenu.ts"],"sourcesContent":["import { NgModule, Component, Input, ChangeDetectorRef, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';\nimport { trigger, state, style, transition, animate } from '@angular/animations';\nimport { CommonModule } from '@angular/common';\nimport { MenuItem } from 'primeng/api';\nimport { RouterModule } from '@angular/router';\nimport { TooltipModule } from 'primeng/tooltip';\nimport { DomHandler } from 'primeng/dom';\n\nexport class BasePanelMenuItem {\n    constructor(private ref: ChangeDetectorRef) {}\n\n    handleClick(event, item) {\n        if (item.disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        item.expanded = !item.expanded;\n        this.ref.detectChanges();\n\n        if (!item.url && !item.routerLink) {\n            event.preventDefault();\n        }\n\n        if (item.command) {\n            item.command({\n                originalEvent: event,\n                item: item\n            });\n        }\n    }\n}\n\n@Component({\n    selector: 'p-panelMenuSub',\n    template: `\n        <ul [ngClass]=\"{ 'p-submenu-list': true, 'p-panelmenu-root-submenu': root, 'p-submenu-expanded': expanded }\" [@submenu]=\"getAnimation()\" role=\"tree\">\n            <ng-template ngFor let-child [ngForOf]=\"item.items\">\n                <li *ngIf=\"child.separator\" class=\"p-menu-separator\" role=\"separator\"></li>\n                <li *ngIf=\"!child.separator\" class=\"p-menuitem\" [ngClass]=\"child.styleClass\" [class.p-hidden]=\"child.visible === false\" [ngStyle]=\"child.style\" pTooltip [tooltipOptions]=\"child.tooltipOptions\">\n                    <a\n                        *ngIf=\"!child.routerLink\"\n                        (keydown)=\"onItemKeyDown($event)\"\n                        [attr.href]=\"child.url\"\n                        class=\"p-menuitem-link\"\n                        [attr.tabindex]=\"!item.expanded || !parentExpanded ? null : child.disabled ? null : '0'\"\n                        [attr.id]=\"child.id\"\n                        [ngClass]=\"{ 'p-disabled': child.disabled }\"\n                        role=\"treeitem\"\n                        [attr.aria-expanded]=\"child.expanded\"\n                        (click)=\"handleClick($event, child)\"\n                        [target]=\"child.target\"\n                        [attr.title]=\"child.title\"\n                    >\n                        <span class=\"p-panelmenu-icon pi pi-fw\" [ngClass]=\"{ 'pi-angle-right': !child.expanded, 'pi-angle-down': child.expanded }\" *ngIf=\"child.items\" [ngStyle]=\"child.iconStyle\"></span>\n                        <span class=\"p-menuitem-icon\" [ngClass]=\"child.icon\" *ngIf=\"child.icon\" [ngStyle]=\"child.iconStyle\"></span>\n                        <span class=\"p-menuitem-text\" *ngIf=\"child.escape !== false; else htmlLabel\">{{ child.label }}</span>\n                        <ng-template #htmlLabel><span class=\"p-menuitem-text\" [innerHTML]=\"child.label\"></span></ng-template>\n                        <span class=\"p-menuitem-badge\" *ngIf=\"child.badge\" [ngClass]=\"child.badgeStyleClass\">{{ child.badge }}</span>\n                    </a>\n                    <a\n                        *ngIf=\"child.routerLink\"\n                        (keydown)=\"onItemKeyDown($event)\"\n                        [routerLink]=\"child.routerLink\"\n                        [queryParams]=\"child.queryParams\"\n                        [routerLinkActive]=\"'p-menuitem-link-active'\"\n                        [routerLinkActiveOptions]=\"child.routerLinkActiveOptions || { exact: false }\"\n                        class=\"p-menuitem-link\"\n                        [ngClass]=\"{ 'p-disabled': child.disabled }\"\n                        [attr.tabindex]=\"!item.expanded || !parentExpanded ? null : child.disabled ? null : '0'\"\n                        [attr.id]=\"child.id\"\n                        role=\"treeitem\"\n                        [attr.aria-expanded]=\"child.expanded\"\n                        (click)=\"handleClick($event, child)\"\n                        [target]=\"child.target\"\n                        [attr.title]=\"child.title\"\n                        [fragment]=\"child.fragment\"\n                        [queryParamsHandling]=\"child.queryParamsHandling\"\n                        [preserveFragment]=\"child.preserveFragment\"\n                        [skipLocationChange]=\"child.skipLocationChange\"\n                        [replaceUrl]=\"child.replaceUrl\"\n                        [state]=\"child.state\"\n                    >\n                        <span class=\"p-panelmenu-icon pi pi-fw\" [ngClass]=\"{ 'pi-angle-right': !child.expanded, 'pi-angle-down': child.expanded }\" *ngIf=\"child.items\" [ngStyle]=\"child.iconStyle\"></span>\n                        <span class=\"p-menuitem-icon\" [ngClass]=\"child.icon\" *ngIf=\"child.icon\" [ngStyle]=\"child.iconStyle\"></span>\n                        <span class=\"p-menuitem-text\" *ngIf=\"child.escape !== false; else htmlRouteLabel\">{{ child.label }}</span>\n                        <ng-template #htmlRouteLabel><span class=\"p-menuitem-text\" [innerHTML]=\"child.label\"></span></ng-template>\n                        <span class=\"p-menuitem-badge\" *ngIf=\"child.badge\" [ngClass]=\"child.badgeStyleClass\">{{ child.badge }}</span>\n                    </a>\n                    <p-panelMenuSub [item]=\"child\" [parentExpanded]=\"expanded && parentExpanded\" [expanded]=\"child.expanded\" [transitionOptions]=\"transitionOptions\" *ngIf=\"child.items\"></p-panelMenuSub>\n                </li>\n            </ng-template>\n        </ul>\n    `,\n    animations: [\n        trigger('submenu', [\n            state(\n                'hidden',\n                style({\n                    height: '0'\n                })\n            ),\n            state(\n                'visible',\n                style({\n                    height: '*'\n                })\n            ),\n            transition('visible <=> hidden', [animate('{{transitionParams}}')]),\n            transition('void => *', animate(0))\n        ])\n    ],\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'p-element'\n    }\n})\nexport class PanelMenuSub extends BasePanelMenuItem {\n    @Input() item: MenuItem;\n\n    @Input() expanded: boolean;\n\n    @Input() parentExpanded: boolean;\n\n    @Input() transitionOptions: string;\n\n    @Input() root: boolean;\n\n    constructor(ref: ChangeDetectorRef) {\n        super(ref);\n    }\n\n    onItemKeyDown(event) {\n        let listItem = event.currentTarget;\n\n        switch (event.code) {\n            case 'Space':\n            case 'Enter':\n                if (listItem && !DomHandler.hasClass(listItem, 'p-disabled')) {\n                    listItem.click();\n                }\n\n                event.preventDefault();\n                break;\n\n            default:\n                break;\n        }\n    }\n\n    getAnimation() {\n        return this.expanded ? { value: 'visible', params: { transitionParams: this.transitionOptions, height: '*' } } : { value: 'hidden', params: { transitionParams: this.transitionOptions, height: '0' } };\n    }\n}\n\n@Component({\n    selector: 'p-panelMenu',\n    template: `\n        <div [class]=\"styleClass\" [ngStyle]=\"style\" [ngClass]=\"'p-panelmenu p-component'\">\n            <ng-container *ngFor=\"let item of model; let f = first; let l = last\">\n                <div class=\"p-panelmenu-panel\" *ngIf=\"visible(item)\">\n                    <div [ngClass]=\"{ 'p-component p-panelmenu-header': true, 'p-highlight': item.expanded, 'p-disabled': item.disabled }\" [class]=\"item.styleClass\" [ngStyle]=\"item.style\" pTooltip [tooltipOptions]=\"item.tooltipOptions\">\n                        <a\n                            *ngIf=\"!item.routerLink\"\n                            [attr.href]=\"item.url\"\n                            (click)=\"handleClick($event, item)\"\n                            (keydown)=\"onItemKeyDown($event)\"\n                            [attr.tabindex]=\"item.disabled ? null : '0'\"\n                            [attr.id]=\"item.id\"\n                            [target]=\"item.target\"\n                            [attr.title]=\"item.title\"\n                            class=\"p-panelmenu-header-link\"\n                            [attr.aria-expanded]=\"item.expanded\"\n                            [attr.id]=\"item.id + '_header'\"\n                            [attr.aria-controls]=\"item.id + '_content'\"\n                        >\n                            <span *ngIf=\"item.items\" class=\"p-panelmenu-icon pi\" [ngClass]=\"{ 'pi-chevron-right': !item.expanded, 'pi-chevron-down': item.expanded }\"></span>\n                            <span class=\"p-menuitem-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon\" [ngStyle]=\"item.iconStyle\"></span>\n                            <span class=\"p-menuitem-text\" *ngIf=\"item.escape !== false; else htmlLabel\">{{ item.label }}</span>\n                            <ng-template #htmlLabel><span class=\"p-menuitem-text\" [innerHTML]=\"item.label\"></span></ng-template>\n                            <span class=\"p-menuitem-badge\" *ngIf=\"item.badge\" [ngClass]=\"item.badgeStyleClass\">{{ item.badge }}</span>\n                        </a>\n                        <a\n                            *ngIf=\"item.routerLink\"\n                            [routerLink]=\"item.routerLink\"\n                            [queryParams]=\"item.queryParams\"\n                            [routerLinkActive]=\"'p-menuitem-link-active'\"\n                            [routerLinkActiveOptions]=\"item.routerLinkActiveOptions || { exact: false }\"\n                            (click)=\"handleClick($event, item)\"\n                            (keydown)=\"onItemKeyDown($event)\"\n                            [target]=\"item.target\"\n                            [attr.title]=\"item.title\"\n                            class=\"p-panelmenu-header-link\"\n                            [attr.id]=\"item.id\"\n                            [attr.tabindex]=\"item.disabled ? null : '0'\"\n                            [fragment]=\"item.fragment\"\n                            [queryParamsHandling]=\"item.queryParamsHandling\"\n                            [preserveFragment]=\"item.preserveFragment\"\n                            [skipLocationChange]=\"item.skipLocationChange\"\n                            [replaceUrl]=\"item.replaceUrl\"\n                            [state]=\"item.state\"\n                        >\n                            <span *ngIf=\"item.items\" class=\"p-panelmenu-icon pi\" [ngClass]=\"{ 'pi-chevron-right': !item.expanded, 'pi-chevron-down': item.expanded }\"></span>\n                            <span class=\"p-menuitem-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon\" [ngStyle]=\"item.iconStyle\"></span>\n                            <span class=\"p-menuitem-text\" *ngIf=\"item.escape !== false; else htmlRouteLabel\">{{ item.label }}</span>\n                            <ng-template #htmlRouteLabel><span class=\"p-menuitem-text\" [innerHTML]=\"item.label\"></span></ng-template>\n                            <span class=\"p-menuitem-badge\" *ngIf=\"item.badge\" [ngClass]=\"item.badgeStyleClass\">{{ item.badge }}</span>\n                        </a>\n                    </div>\n                    <div *ngIf=\"item.items\" class=\"p-toggleable-content\" [ngClass]=\"{ 'p-panelmenu-expanded': item.expanded }\" [@rootItem]=\"getAnimation(item)\" (@rootItem.done)=\"onToggleDone()\">\n                        <div class=\"p-panelmenu-content\" role=\"region\" [attr.id]=\"item.id + '_content'\" [attr.aria-labelledby]=\"item.id + '_header'\">\n                            <p-panelMenuSub [item]=\"item\" [parentExpanded]=\"item.expanded\" [expanded]=\"true\" [transitionOptions]=\"transitionOptions\" [root]=\"true\"></p-panelMenuSub>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    `,\n    animations: [\n        trigger('rootItem', [\n            state(\n                'hidden',\n                style({\n                    height: '0'\n                })\n            ),\n            state(\n                'visible',\n                style({\n                    height: '*'\n                })\n            ),\n            transition('visible <=> hidden', [animate('{{transitionParams}}')]),\n            transition('void => *', animate(0))\n        ])\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./panelmenu.css'],\n    host: {\n        class: 'p-element'\n    }\n})\nexport class PanelMenu extends BasePanelMenuItem {\n    @Input() model: MenuItem[];\n\n    @Input() style: any;\n\n    @Input() styleClass: string;\n\n    @Input() multiple: boolean = true;\n\n    @Input() transitionOptions: string = '400ms cubic-bezier(0.86, 0, 0.07, 1)';\n\n    public animating: boolean;\n\n    constructor(ref: ChangeDetectorRef) {\n        super(ref);\n    }\n\n    collapseAll() {\n        for (let item of this.model) {\n            if (item.expanded) {\n                item.expanded = false;\n            }\n        }\n    }\n\n    handleClick(event, item) {\n        if (!this.multiple) {\n            for (let modelItem of this.model) {\n                if (item !== modelItem && modelItem.expanded) {\n                    modelItem.expanded = false;\n                }\n            }\n        }\n\n        this.animating = true;\n        super.handleClick(event, item);\n    }\n\n    onToggleDone() {\n        this.animating = false;\n    }\n\n    onItemKeyDown(event) {\n        let listItem = event.currentTarget;\n\n        switch (event.code) {\n            case 'Space':\n            case 'Enter':\n                if (listItem && !DomHandler.hasClass(listItem, 'p-disabled')) {\n                    listItem.click();\n                }\n\n                event.preventDefault();\n                break;\n\n            default:\n                break;\n        }\n    }\n\n    visible(item) {\n        return item.visible !== false;\n    }\n\n    getAnimation(item) {\n        return item.expanded ? { value: 'visible', params: { transitionParams: this.animating ? this.transitionOptions : '0ms', height: '*' } } : { value: 'hidden', params: { transitionParams: this.transitionOptions, height: '0' } };\n    }\n}\n\n@NgModule({\n    imports: [CommonModule, RouterModule, TooltipModule],\n    exports: [PanelMenu, RouterModule, TooltipModule],\n    declarations: [PanelMenu, PanelMenuSub]\n})\nexport class PanelMenuModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"primeng-panelmenu.mjs","sources":["../../src/app/components/panelmenu/panelmenu.ts","../../src/app/components/panelmenu/primeng-panelmenu.ts"],"sourcesContent":["import { NgModule, Component, Input, ChangeDetectorRef, ChangeDetectionStrategy, ViewEncapsulation, TemplateRef, AfterContentInit, ContentChildren, QueryList } from '@angular/core';\nimport { trigger, state, style, transition, animate } from '@angular/animations';\nimport { CommonModule } from '@angular/common';\nimport { MenuItem, PrimeTemplate, SharedModule } from 'primeng/api';\nimport { RouterModule } from '@angular/router';\nimport { TooltipModule } from 'primeng/tooltip';\nimport { DomHandler } from 'primeng/dom';\nimport { AngleDownIcon } from 'primeng/icons/angledown';\nimport { ChevronDownIcon } from 'primeng/icons/chevrondown';\nimport { AngleRightIcon } from 'primeng/icons/angleright';\nimport { ChevronRightIcon } from 'primeng/icons/chevronright';\n\nexport class BasePanelMenuItem {\n    constructor(private ref: ChangeDetectorRef) {}\n\n    handleClick(event, item) {\n        if (item.disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        item.expanded = !item.expanded;\n        this.ref.detectChanges();\n\n        if (!item.url && !item.routerLink) {\n            event.preventDefault();\n        }\n\n        if (item.command) {\n            item.command({\n                originalEvent: event,\n                item: item\n            });\n        }\n    }\n}\n\n@Component({\n    selector: 'p-panelMenuSub',\n    template: `\n        <ul [ngClass]=\"{ 'p-submenu-list': true, 'p-panelmenu-root-submenu': root, 'p-submenu-expanded': expanded }\" [@submenu]=\"getAnimation()\" role=\"tree\">\n            <ng-template ngFor let-child [ngForOf]=\"item.items\">\n                <li *ngIf=\"child.separator\" class=\"p-menu-separator\" role=\"separator\"></li>\n                <li *ngIf=\"!child.separator\" class=\"p-menuitem\" [ngClass]=\"child.styleClass\" [class.p-hidden]=\"child.visible === false\" [ngStyle]=\"child.style\" pTooltip [tooltipOptions]=\"child.tooltipOptions\">\n                    <a\n                        *ngIf=\"!child.routerLink\"\n                        (keydown)=\"onItemKeyDown($event)\"\n                        [attr.href]=\"child.url\"\n                        class=\"p-menuitem-link\"\n                        [attr.tabindex]=\"!item.expanded || !parentExpanded ? null : child.disabled ? null : '0'\"\n                        [attr.id]=\"child.id\"\n                        [ngClass]=\"{ 'p-disabled': child.disabled }\"\n                        role=\"treeitem\"\n                        [attr.aria-expanded]=\"child.expanded\"\n                        (click)=\"handleClick($event, child)\"\n                        [target]=\"child.target\"\n                        [attr.title]=\"child.title\"\n                    >\n                        <ng-container *ngIf=\"child.items\">\n                            <ng-container *ngIf=\"!panelMenu.submenuIconTemplate\">\n                                <AngleDownIcon [styleClass]=\"'p-panelmenu-icon'\" *ngIf=\"child.expanded\" [ngStyle]=\"child.iconStyle\"/>\n                                <AngleRightIcon [styleClass]=\"'p-panelmenu-icon'\" *ngIf=\"!child.expanded\" [ngStyle]=\"child.iconStyle\"/>\n                            </ng-container>\n                            <ng-template *ngTemplateOutlet=\"panelMenu.submenuIconTemplate\"></ng-template>\n                        </ng-container>\n                        <span class=\"p-menuitem-icon\" [ngClass]=\"child.icon\" *ngIf=\"child.icon\" [ngStyle]=\"child.iconStyle\"></span>\n                        <span class=\"p-menuitem-text\" *ngIf=\"child.escape !== false; else htmlLabel\">{{ child.label }}</span>\n                        <ng-template #htmlLabel><span class=\"p-menuitem-text\" [innerHTML]=\"child.label\"></span></ng-template>\n                        <span class=\"p-menuitem-badge\" *ngIf=\"child.badge\" [ngClass]=\"child.badgeStyleClass\">{{ child.badge }}</span>\n                    </a>\n                    <a\n                        *ngIf=\"child.routerLink\"\n                        (keydown)=\"onItemKeyDown($event)\"\n                        [routerLink]=\"child.routerLink\"\n                        [queryParams]=\"child.queryParams\"\n                        [routerLinkActive]=\"'p-menuitem-link-active'\"\n                        [routerLinkActiveOptions]=\"child.routerLinkActiveOptions || { exact: false }\"\n                        class=\"p-menuitem-link\"\n                        [ngClass]=\"{ 'p-disabled': child.disabled }\"\n                        [attr.tabindex]=\"!item.expanded || !parentExpanded ? null : child.disabled ? null : '0'\"\n                        [attr.id]=\"child.id\"\n                        role=\"treeitem\"\n                        [attr.aria-expanded]=\"child.expanded\"\n                        (click)=\"handleClick($event, child)\"\n                        [target]=\"child.target\"\n                        [attr.title]=\"child.title\"\n                        [fragment]=\"child.fragment\"\n                        [queryParamsHandling]=\"child.queryParamsHandling\"\n                        [preserveFragment]=\"child.preserveFragment\"\n                        [skipLocationChange]=\"child.skipLocationChange\"\n                        [replaceUrl]=\"child.replaceUrl\"\n                        [state]=\"child.state\"\n                    >\n                        <ng-container *ngIf=\"child.items\">\n                            <ng-container *ngIf=\"!panelMenu.submenuIconTemplate\">\n                                <AngleDownIcon *ngIf=\"child.expanded\" [styleClass]=\"'p-panelmenu-icon'\" [ngStyle]=\"child.iconStyle\"/>\n                                <AngleRightIcon *ngIf=\"!child.expanded\" [styleClass]=\"'p-panelmenu-icon'\" [ngStyle]=\"child.iconStyle\"/>\n                            </ng-container>\n                            <ng-template *ngTemplateOutlet=\"panelMenu.submenuIconTemplate\"></ng-template>\n                        </ng-container>\n                        <span class=\"p-menuitem-icon\" [ngClass]=\"child.icon\" *ngIf=\"child.icon\" [ngStyle]=\"child.iconStyle\"></span>\n                        <span class=\"p-menuitem-text\" *ngIf=\"child.escape !== false; else htmlRouteLabel\">{{ child.label }}</span>\n                        <ng-template #htmlRouteLabel><span class=\"p-menuitem-text\" [innerHTML]=\"child.label\"></span></ng-template>\n                        <span class=\"p-menuitem-badge\" *ngIf=\"child.badge\" [ngClass]=\"child.badgeStyleClass\">{{ child.badge }}</span>\n                    </a>\n                    <p-panelMenuSub [item]=\"child\" [parentExpanded]=\"expanded && parentExpanded\" [expanded]=\"child.expanded\" [transitionOptions]=\"transitionOptions\" *ngIf=\"child.items\"></p-panelMenuSub>\n                </li>\n            </ng-template>\n        </ul>\n    `,\n    animations: [\n        trigger('submenu', [\n            state(\n                'hidden',\n                style({\n                    height: '0'\n                })\n            ),\n            state(\n                'visible',\n                style({\n                    height: '*'\n                })\n            ),\n            transition('visible <=> hidden', [animate('{{transitionParams}}')]),\n            transition('void => *', animate(0))\n        ])\n    ],\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'p-element'\n    }\n})\nexport class PanelMenuSub extends BasePanelMenuItem {\n    @Input() item: MenuItem;\n\n    @Input() expanded: boolean;\n\n    @Input() parentExpanded: boolean;\n\n    @Input() transitionOptions: string;\n\n    @Input() root: boolean;\n\n    constructor(ref: ChangeDetectorRef, public panelMenu: PanelMenu) {\n        super(ref);\n    }\n\n    onItemKeyDown(event) {\n        let listItem = event.currentTarget;\n\n        switch (event.code) {\n            case 'Space':\n            case 'Enter':\n                if (listItem && !DomHandler.hasClass(listItem, 'p-disabled')) {\n                    listItem.click();\n                }\n\n                event.preventDefault();\n                break;\n\n            default:\n                break;\n        }\n    }\n\n    getAnimation() {\n        return this.expanded ? { value: 'visible', params: { transitionParams: this.transitionOptions, height: '*' } } : { value: 'hidden', params: { transitionParams: this.transitionOptions, height: '0' } };\n    }\n}\n\n@Component({\n    selector: 'p-panelMenu',\n    template: `\n        <div [class]=\"styleClass\" [ngStyle]=\"style\" [ngClass]=\"'p-panelmenu p-component'\">\n            <ng-container *ngFor=\"let item of model; let f = first; let l = last\">\n                <div class=\"p-panelmenu-panel\" *ngIf=\"visible(item)\">\n                    <div [ngClass]=\"{ 'p-component p-panelmenu-header': true, 'p-highlight': item.expanded, 'p-disabled': item.disabled }\" [class]=\"item.styleClass\" [ngStyle]=\"item.style\" pTooltip [tooltipOptions]=\"item.tooltipOptions\">\n                        <a\n                            *ngIf=\"!item.routerLink\"\n                            [attr.href]=\"item.url\"\n                            (click)=\"handleClick($event, item)\"\n                            (keydown)=\"onItemKeyDown($event)\"\n                            [attr.tabindex]=\"item.disabled ? null : '0'\"\n                            [attr.id]=\"item.id\"\n                            [target]=\"item.target\"\n                            [attr.title]=\"item.title\"\n                            class=\"p-panelmenu-header-link\"\n                            [attr.aria-expanded]=\"item.expanded\"\n                            [attr.id]=\"item.id + '_header'\"\n                            [attr.aria-controls]=\"item.id + '_content'\"\n                        >\n                            <!--\n                                <span *ngIf=\"item.items\" class=\"p-panelmenu-icon pi\" [ngClass]=\"{ 'pi-chevron-right': !item.expanded, 'pi-chevron-down': item.expanded }\"></span>\n                             -->\n                            <ng-container *ngIf=\"item.items\">\n                                <ng-container *ngIf=\"!submenuIconTemplate\">\n                                    <ChevronDownIcon [styleClass]=\"'p-panelmenu-icon'\" *ngIf=\"item.expanded\" />\n                                    <ChevronRightIcon [styleClass]=\"'p-panelmenu-icon'\" *ngIf=\"!item.expanded\" />\n                                </ng-container>\n                                <ng-template *ngTemplateOutlet=\"submenuIconTemplate\"></ng-template>\n                            </ng-container>\n                            <span class=\"p-menuitem-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon\" [ngStyle]=\"item.iconStyle\"></span>\n                            <span class=\"p-menuitem-text\" *ngIf=\"item.escape !== false; else htmlLabel\">{{ item.label }}</span>\n                            <ng-template #htmlLabel><span class=\"p-menuitem-text\" [innerHTML]=\"item.label\"></span></ng-template>\n                            <span class=\"p-menuitem-badge\" *ngIf=\"item.badge\" [ngClass]=\"item.badgeStyleClass\">{{ item.badge }}</span>\n                        </a>\n                        <a\n                            *ngIf=\"item.routerLink\"\n                            [routerLink]=\"item.routerLink\"\n                            [queryParams]=\"item.queryParams\"\n                            [routerLinkActive]=\"'p-menuitem-link-active'\"\n                            [routerLinkActiveOptions]=\"item.routerLinkActiveOptions || { exact: false }\"\n                            (click)=\"handleClick($event, item)\"\n                            (keydown)=\"onItemKeyDown($event)\"\n                            [target]=\"item.target\"\n                            [attr.title]=\"item.title\"\n                            class=\"p-panelmenu-header-link\"\n                            [attr.id]=\"item.id\"\n                            [attr.tabindex]=\"item.disabled ? null : '0'\"\n                            [fragment]=\"item.fragment\"\n                            [queryParamsHandling]=\"item.queryParamsHandling\"\n                            [preserveFragment]=\"item.preserveFragment\"\n                            [skipLocationChange]=\"item.skipLocationChange\"\n                            [replaceUrl]=\"item.replaceUrl\"\n                            [state]=\"item.state\"\n                        >\n\n                            <!-- \n                                <span *ngIf=\"item.items\" class=\"p-panelmenu-icon pi\" [ngClass]=\"{ 'pi-chevron-right': !item.expanded, 'pi-chevron-down': item.expanded }\"></span>\n                            -->\n                            <ng-container *ngIf=\"item.items\">\n                                <ng-container *ngIf=\"!submenuIconTemplate\">\n                                    <ChevronDownIcon [styleClass]=\"'p-panelmenu-icon'\" *ngIf=\"item.expanded\" />\n                                    <ChevronRightIcon [styleClass]=\"'p-panelmenu-icon'\" *ngIf=\"!item.expanded\" />\n                                </ng-container>\n                                <ng-template *ngTemplateOutlet=\"submenuIconTemplate\"></ng-template>\n                            </ng-container>\n                            <span class=\"p-menuitem-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon\" [ngStyle]=\"item.iconStyle\"></span>\n                            <span class=\"p-menuitem-text\" *ngIf=\"item.escape !== false; else htmlRouteLabel\">{{ item.label }}</span>\n                            <ng-template #htmlRouteLabel><span class=\"p-menuitem-text\" [innerHTML]=\"item.label\"></span></ng-template>\n                            <span class=\"p-menuitem-badge\" *ngIf=\"item.badge\" [ngClass]=\"item.badgeStyleClass\">{{ item.badge }}</span>\n                        </a>\n                    </div>\n                    <div *ngIf=\"item.items\" class=\"p-toggleable-content\" [ngClass]=\"{ 'p-panelmenu-expanded': item.expanded }\" [@rootItem]=\"getAnimation(item)\" (@rootItem.done)=\"onToggleDone()\">\n                        <div class=\"p-panelmenu-content\" role=\"region\" [attr.id]=\"item.id + '_content'\" [attr.aria-labelledby]=\"item.id + '_header'\">\n                            <p-panelMenuSub [item]=\"item\" [parentExpanded]=\"item.expanded\" [expanded]=\"true\" [transitionOptions]=\"transitionOptions\" [root]=\"true\"></p-panelMenuSub>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    `,\n    animations: [\n        trigger('rootItem', [\n            state(\n                'hidden',\n                style({\n                    height: '0'\n                })\n            ),\n            state(\n                'visible',\n                style({\n                    height: '*'\n                })\n            ),\n            transition('visible <=> hidden', [animate('{{transitionParams}}')]),\n            transition('void => *', animate(0))\n        ])\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./panelmenu.css'],\n    host: {\n        class: 'p-element'\n    }\n})\nexport class PanelMenu extends BasePanelMenuItem implements AfterContentInit {\n    @Input() model: MenuItem[];\n\n    @Input() style: any;\n\n    @Input() styleClass: string;\n\n    @Input() multiple: boolean = true;\n\n    @Input() transitionOptions: string = '400ms cubic-bezier(0.86, 0, 0.07, 1)';\n\n    @ContentChildren(PrimeTemplate) templates: QueryList<any>;\n\n    submenuIconTemplate: TemplateRef<any>;\n\n    public animating: boolean;\n\n    constructor(ref: ChangeDetectorRef) {\n        super(ref);\n    }\n\n    ngAfterContentInit() {\n        this.templates.forEach((item) => {\n            switch (item.getType()) {\n                case 'submenuicon':\n                    this.submenuIconTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    collapseAll() {\n        for (let item of this.model) {\n            if (item.expanded) {\n                item.expanded = false;\n            }\n        }\n    }\n\n    handleClick(event, item) {\n        if (!this.multiple) {\n            for (let modelItem of this.model) {\n                if (item !== modelItem && modelItem.expanded) {\n                    modelItem.expanded = false;\n                }\n            }\n        }\n\n        this.animating = true;\n        super.handleClick(event, item);\n    }\n\n    onToggleDone() {\n        this.animating = false;\n    }\n\n    onItemKeyDown(event) {\n        let listItem = event.currentTarget;\n\n        switch (event.code) {\n            case 'Space':\n            case 'Enter':\n                if (listItem && !DomHandler.hasClass(listItem, 'p-disabled')) {\n                    listItem.click();\n                }\n\n                event.preventDefault();\n                break;\n\n            default:\n                break;\n        }\n    }\n\n    visible(item) {\n        return item.visible !== false;\n    }\n\n    getAnimation(item) {\n        return item.expanded ? { value: 'visible', params: { transitionParams: this.animating ? this.transitionOptions : '0ms', height: '*' } } : { value: 'hidden', params: { transitionParams: this.transitionOptions, height: '0' } };\n    }\n}\n\n@NgModule({\n    imports: [CommonModule, RouterModule, TooltipModule, SharedModule, AngleDownIcon, AngleRightIcon, ChevronDownIcon, ChevronRightIcon],\n    exports: [PanelMenu, RouterModule, TooltipModule, SharedModule],\n    declarations: [PanelMenu, PanelMenuSub]\n})\nexport class PanelMenuModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2020/primeng-password.mjs

@@ -10,6 +10,9 @@ import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
 import * as i3 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import { ZIndexUtils } from 'primeng/utils';
+import { TimesIcon } from 'primeng/icons/times';
+import { EyeSlashIcon } from 'primeng/icons/eyeslash';
+import { EyeIcon } from 'primeng/icons/eye';
 
 class PasswordDirective {
     constructor(document, platformId, renderer, el, zone) {
@@ -289,6 +292,15 @@ class Password {
                 case 'footer':
                     this.footerTemplate = item.template;
                     break;
+                case 'clearicon':
+                    this.clearIconTemplate = item.template;
+                    break;
+                case 'hideicon':
+                    this.hideIconTemplate = item.template;
+                    break;
+                case 'showicon':
+                    this.showIconTemplate = item.template;
+                    break;
                 default:
                     this.contentTemplate = item.template;
                     break;
@@ -489,9 +501,6 @@ class Password {
     inputFieldClass(disabled) {
         return { 'p-password-input': true, 'p-disabled': disabled };
     }
-    toggleIconClass(unmasked) {
-        return unmasked ? 'pi pi-eye-slash' : 'pi pi-eye';
-    }
     strengthClass(meter) {
         return `p-password-strength ${meter ? meter.strength : ''}`;
     }
@@ -569,8 +578,28 @@ Password.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.
                 (keydown)="onKeyDown($event)"
                 [attr.maxlength]="maxLength"
             />
-            <i *ngIf="showClear && value != null" class="p-password-clear-icon pi pi-times" (click)="clear()"></i>
-            <i *ngIf="toggleMask" [ngClass]="unmasked | mapper: toggleIconClass" (click)="onMaskToggle()"></i>
+            <ng-container *ngIf="showClear && value != null">
+                <TimesIcon *ngIf="!clearIconTemplate" [styleClass]="'p-password-clear-icon'" (click)="clear()" />
+                <span (click)="clear()" class="p-password-clear-icon">
+                    <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
+                </span>    
+            </ng-container>
+
+            <ng-container *ngIf="toggleMask">
+                <ng-container *ngIf="unmasked">
+                    <EyeSlashIcon *ngIf="!hideIconTemplate" (click)="onMaskToggle()"/>
+                    <span *ngIf="hideIconTemplate" (click)="onMaskToggle()">
+                        <ng-template *ngTemplateOutlet="hideIconTemplate"></ng-template>
+                    </span>
+                </ng-container>
+                <ng-container *ngIf="!unmasked">
+                    <EyeIcon *ngIf="!showIconTemplate" (click)="onMaskToggle()"/>
+                    <span *ngIf="showIconTemplate" (click)="onMaskToggle()">
+                        <ng-template *ngTemplateOutlet="showIconTemplate"></ng-template>
+                    </span>
+                </ng-container>
+            </ng-container>
+
             <div
                 #overlay
                 *ngIf="overlayVisible"
@@ -593,7 +622,7 @@ Password.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.
                 <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
             </div>
         </div>
-    `, isInline: true, styles: [".p-password{position:relative;display:inline-flex}.p-password-panel{position:absolute;top:0;left:0}.p-password .p-password-panel{min-width:100%}.p-password-meter{height:10px}.p-password-strength{height:100%;width:0%;transition:width 1s ease-in-out}.p-fluid .p-password{display:flex}.p-password-input::-ms-reveal,.p-password-input::-ms-clear{display:none}.p-password-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.p-password-clearable{position:relative}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.InputText, selector: "[pInputText]" }, { kind: "pipe", type: MapperPipe, name: "mapper" }], animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')]), transition(':leave', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, styles: [".p-password{position:relative;display:inline-flex}.p-password-panel{position:absolute;top:0;left:0}.p-password .p-password-panel{min-width:100%}.p-password-meter{height:10px}.p-password-strength{height:100%;width:0%;transition:width 1s ease-in-out}.p-fluid .p-password{display:flex}.p-password-input::-ms-reveal,.p-password-input::-ms-clear{display:none}.p-password-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.p-password-clearable{position:relative}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i2.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.InputText; }), selector: "[pInputText]" }, { kind: "component", type: i0.forwardRef(function () { return TimesIcon; }), selector: "TimesIcon" }, { kind: "component", type: i0.forwardRef(function () { return EyeSlashIcon; }), selector: "EyeSlashIcon" }, { kind: "component", type: i0.forwardRef(function () { return EyeIcon; }), selector: "EyeIcon" }, { kind: "pipe", type: i0.forwardRef(function () { return MapperPipe; }), name: "mapper" }], animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')]), transition(':leave', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: Password, decorators: [{
             type: Component,
             args: [{ selector: 'p-password', template: `
@@ -618,8 +647,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImpor
                 (keydown)="onKeyDown($event)"
                 [attr.maxlength]="maxLength"
             />
-            <i *ngIf="showClear && value != null" class="p-password-clear-icon pi pi-times" (click)="clear()"></i>
-            <i *ngIf="toggleMask" [ngClass]="unmasked | mapper: toggleIconClass" (click)="onMaskToggle()"></i>
+            <ng-container *ngIf="showClear && value != null">
+                <TimesIcon *ngIf="!clearIconTemplate" [styleClass]="'p-password-clear-icon'" (click)="clear()" />
+                <span (click)="clear()" class="p-password-clear-icon">
+                    <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
+                </span>    
+            </ng-container>
+
+            <ng-container *ngIf="toggleMask">
+                <ng-container *ngIf="unmasked">
+                    <EyeSlashIcon *ngIf="!hideIconTemplate" (click)="onMaskToggle()"/>
+                    <span *ngIf="hideIconTemplate" (click)="onMaskToggle()">
+                        <ng-template *ngTemplateOutlet="hideIconTemplate"></ng-template>
+                    </span>
+                </ng-container>
+                <ng-container *ngIf="!unmasked">
+                    <EyeIcon *ngIf="!showIconTemplate" (click)="onMaskToggle()"/>
+                    <span *ngIf="showIconTemplate" (click)="onMaskToggle()">
+                        <ng-template *ngTemplateOutlet="showIconTemplate"></ng-template>
+                    </span>
+                </ng-container>
+            </ng-container>
+
             <div
                 #overlay
                 *ngIf="overlayVisible"
@@ -721,12 +770,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImpor
 class PasswordModule {
 }
 PasswordModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: PasswordModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PasswordModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.4", ngImport: i0, type: PasswordModule, declarations: [PasswordDirective, Password, MapperPipe], imports: [CommonModule, InputTextModule], exports: [PasswordDirective, Password, SharedModule] });
-PasswordModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: PasswordModule, imports: [CommonModule, InputTextModule, SharedModule] });
+PasswordModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.4", ngImport: i0, type: PasswordModule, declarations: [PasswordDirective, Password, MapperPipe], imports: [CommonModule, InputTextModule, TimesIcon, EyeSlashIcon, EyeIcon], exports: [PasswordDirective, Password, SharedModule] });
+PasswordModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: PasswordModule, imports: [CommonModule, InputTextModule, TimesIcon, EyeSlashIcon, EyeIcon, SharedModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: PasswordModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, InputTextModule],
+                    imports: [CommonModule, InputTextModule, TimesIcon, EyeSlashIcon, EyeIcon],
                     exports: [PasswordDirective, Password, SharedModule],
                     declarations: [PasswordDirective, Password, MapperPipe]
                 }]