primeng 18.0.0-beta.1 → 18.0.0-beta.2

package/fesm2022/primeng-megamenu.mjs

@@ -405,6 +405,86 @@ class MegaMenuStyle extends BaseStyle {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: MegaMenuStyle, decorators: [{
             type: Injectable
         }] });
+/**
+ *
+ * MegaMenu is navigation component that displays submenus together.
+ *
+ * [Live Demo](https://www.primeng.org/megamenu/)
+ *
+ * @module megamenustyle
+ *
+ */
+var MegaMenuClasses;
+(function (MegaMenuClasses) {
+    /**
+     * Class name of the root element
+     */
+    MegaMenuClasses["root"] = "p-megamenu";
+    /**
+     * Class name of the start element
+     */
+    MegaMenuClasses["start"] = "p-megamenu-start";
+    /**
+     * Class name of the button element
+     */
+    MegaMenuClasses["button"] = "p-megamenu-button";
+    /**
+     * Class name of the root list element
+     */
+    MegaMenuClasses["rootList"] = "p-megamenu-root-list";
+    /**
+     * Class name of the submenu item element
+     */
+    MegaMenuClasses["submenuItem"] = "p-megamenu-submenu-item";
+    /**
+     * Class name of the item element
+     */
+    MegaMenuClasses["item"] = "p-megamenu-item";
+    /**
+     * Class name of the item content element
+     */
+    MegaMenuClasses["itemContent"] = "p-megamenu-item-content";
+    /**
+     * Class name of the item link element
+     */
+    MegaMenuClasses["itemLink"] = "p-megamenu-item-link";
+    /**
+     * Class name of the item icon element
+     */
+    MegaMenuClasses["itemIcon"] = "p-megamenu-item-icon";
+    /**
+     * Class name of the item label element
+     */
+    MegaMenuClasses["itemLabel"] = "p-megamenu-item-label";
+    /**
+     * Class name of the submenu icon element
+     */
+    MegaMenuClasses["submenuIcon"] = "p-megamenu-submenu-icon";
+    /**
+     * Class name of the panel element
+     */
+    MegaMenuClasses["panel"] = "p-megamenu-panel";
+    /**
+     * Class name of the grid element
+     */
+    MegaMenuClasses["grid"] = "p-megamenu-grid";
+    /**
+     * Class name of the submenu element
+     */
+    MegaMenuClasses["submenu"] = "p-megamenu-submenu";
+    /**
+     * Class name of the submenu item label element
+     */
+    MegaMenuClasses["submenuItemLabel"] = "p-megamenu-submenu-item-label";
+    /**
+     * Class name of the separator element
+     */
+    MegaMenuClasses["separator"] = "p-megamenu-separator";
+    /**
+     * Class name of the end element
+     */
+    MegaMenuClasses["end"] = "p-megamenu-end";
+})(MegaMenuClasses || (MegaMenuClasses = {}));
 
 class MegaMenuSub {
     el;
@@ -532,7 +612,7 @@ class MegaMenuSub {
         this.itemMouseEnter.emit({ originalEvent: event, processedItem });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: MegaMenuSub, deps: [{ token: i0.ElementRef }, { token: forwardRef(() => MegaMenu) }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: MegaMenuSub, selector: "p-megaMenuSub", inputs: { id: "id", items: "items", itemTemplate: "itemTemplate", menuId: "menuId", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", level: ["level", "level", numberAttribute], focusedItemId: "focusedItemId", disabled: ["disabled", "disabled", booleanAttribute], orientation: "orientation", activeItem: "activeItem", submenu: "submenu", tabindex: ["tabindex", "tabindex", numberAttribute], root: ["root", "root", booleanAttribute] }, outputs: { itemClick: "itemClick", itemMouseEnter: "itemMouseEnter", menuFocus: "menuFocus", menuBlur: "menuBlur", menuKeydown: "menuKeydown" }, viewQueries: [{ propertyName: "menubarViewChild", first: true, predicate: ["menubar"], descendants: true, static: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: MegaMenuSub, selector: "p-megaMenuSub, p-megamenu-sub", inputs: { id: "id", items: "items", itemTemplate: "itemTemplate", menuId: "menuId", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", level: ["level", "level", numberAttribute], focusedItemId: "focusedItemId", disabled: ["disabled", "disabled", booleanAttribute], orientation: "orientation", activeItem: "activeItem", submenu: "submenu", tabindex: ["tabindex", "tabindex", numberAttribute], root: ["root", "root", booleanAttribute] }, outputs: { itemClick: "itemClick", itemMouseEnter: "itemMouseEnter", menuFocus: "menuFocus", menuBlur: "menuBlur", menuKeydown: "menuKeydown" }, viewQueries: [{ propertyName: "menubarViewChild", first: true, predicate: ["menubar"], descendants: true, static: true }], ngImport: i0, template: `
         <ul
             *ngIf="isSubmenuVisible(submenu)"
             #menubar
@@ -728,7 +808,7 @@ class MegaMenuSub {
                     >
                         <div class="p-megamenu-grid" [attr.data-pc-section]="'grid'">
                             <div *ngFor="let col of processedItem.items" [ngClass]="getColumnClass(processedItem)">
-                                <p-megaMenuSub
+                                <p-megamenu-sub
                                     *ngFor="let submenu of col"
                                     [id]="getSubListId(submenu)"
                                     [submenu]="submenu"
@@ -741,19 +821,19 @@ class MegaMenuSub {
                                     (itemClick)="itemClick.emit($event)"
                                     (itemMouseEnter)="onItemMouseEnter($event)"
                                 >
-                                </p-megaMenuSub>
+                                </p-megamenu-sub>
                             </div>
                         </div>
                     </div>
                 </li>
             </ng-template>
         </ul>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i2.RouterLink), selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i0.forwardRef(() => i2.RouterLinkActive), selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i0.forwardRef(() => i3.Ripple), selector: "[pRipple]" }, { kind: "directive", type: i0.forwardRef(() => i4.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(() => AngleDownIcon), selector: "AngleDownIcon" }, { kind: "component", type: i0.forwardRef(() => AngleRightIcon), selector: "AngleRightIcon" }, { kind: "component", type: i0.forwardRef(() => i5.Badge), selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "component", type: i0.forwardRef(() => MegaMenuSub), selector: "p-megaMenuSub", inputs: ["id", "items", "itemTemplate", "menuId", "ariaLabel", "ariaLabelledBy", "level", "focusedItemId", "disabled", "orientation", "activeItem", "submenu", "tabindex", "root"], outputs: ["itemClick", "itemMouseEnter", "menuFocus", "menuBlur", "menuKeydown"] }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i2.RouterLink), selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i0.forwardRef(() => i2.RouterLinkActive), selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i0.forwardRef(() => i3.Ripple), selector: "[pRipple]" }, { kind: "directive", type: i0.forwardRef(() => i4.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(() => AngleDownIcon), selector: "AngleDownIcon" }, { kind: "component", type: i0.forwardRef(() => AngleRightIcon), selector: "AngleRightIcon" }, { kind: "component", type: i0.forwardRef(() => i5.Badge), selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "component", type: i0.forwardRef(() => MegaMenuSub), selector: "p-megaMenuSub, p-megamenu-sub", inputs: ["id", "items", "itemTemplate", "menuId", "ariaLabel", "ariaLabelledBy", "level", "focusedItemId", "disabled", "orientation", "activeItem", "submenu", "tabindex", "root"], outputs: ["itemClick", "itemMouseEnter", "menuFocus", "menuBlur", "menuKeydown"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: MegaMenuSub, decorators: [{
             type: Component,
             args: [{
-                    selector: 'p-megaMenuSub',
+                    selector: 'p-megaMenuSub, p-megamenu-sub',
                     template: `
         <ul
             *ngIf="isSubmenuVisible(submenu)"
@@ -950,7 +1030,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     >
                         <div class="p-megamenu-grid" [attr.data-pc-section]="'grid'">
                             <div *ngFor="let col of processedItem.items" [ngClass]="getColumnClass(processedItem)">
-                                <p-megaMenuSub
+                                <p-megamenu-sub
                                     *ngFor="let submenu of col"
                                     [id]="getSubListId(submenu)"
                                     [submenu]="submenu"
@@ -963,7 +1043,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                                     (itemClick)="itemClick.emit($event)"
                                     (itemMouseEnter)="onItemMouseEnter($event)"
                                 >
-                                </p-megaMenuSub>
+                                </p-megamenu-sub>
                             </div>
                         </div>
                     </div>
@@ -1609,7 +1689,7 @@ class MegaMenu extends BaseComponent {
         super.ngOnDestroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: MegaMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: MegaMenu, selector: "p-megaMenu", inputs: { model: "model", style: "style", styleClass: "styleClass", orientation: "orientation", id: "id", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", disabled: ["disabled", "disabled", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute] }, providers: [MegaMenuStyle], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "menubutton", first: true, predicate: ["menubutton"], descendants: true }, { propertyName: "rootmenu", first: true, predicate: ["rootmenu"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: MegaMenu, selector: "p-megaMenu, p-megamenu", inputs: { model: "model", style: "style", styleClass: "styleClass", orientation: "orientation", id: "id", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", disabled: ["disabled", "disabled", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute] }, providers: [MegaMenuStyle], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "menubutton", first: true, predicate: ["menubutton"], descendants: true }, { propertyName: "rootmenu", first: true, predicate: ["rootmenu"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <div
             [ngClass]="{
                 'p-megamenu p-component': true,
@@ -1625,7 +1705,7 @@ class MegaMenu extends BaseComponent {
             <div class="p-megamenu-start" *ngIf="startTemplate">
                 <ng-container *ngTemplateOutlet="startTemplate"></ng-container>
             </div>
-            <p-megaMenuSub
+            <p-megamenu-sub
                 #rootmenu
                 [itemTemplate]="itemTemplate"
                 [items]="processedItems"
@@ -1645,7 +1725,7 @@ class MegaMenu extends BaseComponent {
                 (menuBlur)="onMenuBlur($event)"
                 (menuKeydown)="onKeyDown($event)"
                 (itemMouseEnter)="onItemMouseEnter($event)"
-            ></p-megaMenuSub>
+            ></p-megamenu-sub>
             <div class="p-megamenu-end" *ngIf="endTemplate; else legacy">
                 <ng-container *ngTemplateOutlet="endTemplate"></ng-container>
             </div>
@@ -1655,12 +1735,12 @@ class MegaMenu extends BaseComponent {
                 </div>
             </ng-template>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MegaMenuSub, selector: "p-megaMenuSub", inputs: ["id", "items", "itemTemplate", "menuId", "ariaLabel", "ariaLabelledBy", "level", "focusedItemId", "disabled", "orientation", "activeItem", "submenu", "tabindex", "root"], outputs: ["itemClick", "itemMouseEnter", "menuFocus", "menuBlur", "menuKeydown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MegaMenuSub, selector: "p-megaMenuSub, p-megamenu-sub", inputs: ["id", "items", "itemTemplate", "menuId", "ariaLabel", "ariaLabelledBy", "level", "focusedItemId", "disabled", "orientation", "activeItem", "submenu", "tabindex", "root"], outputs: ["itemClick", "itemMouseEnter", "menuFocus", "menuBlur", "menuKeydown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: MegaMenu, decorators: [{
             type: Component,
             args: [{
-                    selector: 'p-megaMenu',
+                    selector: 'p-megaMenu, p-megamenu',
                     template: `
         <div
             [ngClass]="{
@@ -1677,7 +1757,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             <div class="p-megamenu-start" *ngIf="startTemplate">
                 <ng-container *ngTemplateOutlet="startTemplate"></ng-container>
             </div>
-            <p-megaMenuSub
+            <p-megamenu-sub
                 #rootmenu
                 [itemTemplate]="itemTemplate"
                 [items]="processedItems"
@@ -1697,7 +1777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                 (menuBlur)="onMenuBlur($event)"
                 (menuKeydown)="onKeyDown($event)"
                 (itemMouseEnter)="onItemMouseEnter($event)"
-            ></p-megaMenuSub>
+            ></p-megamenu-sub>
             <div class="p-megamenu-end" *ngIf="endTemplate; else legacy">
                 <ng-container *ngTemplateOutlet="endTemplate"></ng-container>
             </div>