infinite-menu
Version:
Infinite Menu helps you to create a menu with infinite number of sub menus
361 lines (353 loc) • 27.7 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Output, Input, Component, NgModule } from '@angular/core';
import * as i1 from '@angular/platform-browser';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i4 from '@angular/cdk/menu';
import { CdkMenuModule } from '@angular/cdk/menu';
class InfiniteMenuService {
constructor(sanitizer) {
this.sanitizer = sanitizer;
}
static { this.LoadedIcons = {}; }
GetFluentUiIconsSvgName(iconName) {
let finalName = "https://rohanpatel4846.github.io/FluentIconsV1/Icons/" + iconName + ".svg";
let uniq = 'icon-' + iconName;
if (!InfiniteMenuService.LoadedIcons[uniq]) {
InfiniteMenuService.LoadedIcons[uniq] = " ";
var xhr = new XMLHttpRequest();
var url = finalName;
xhr.open("GET", url, true);
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
InfiniteMenuService.LoadedIcons[uniq] = this.sanitizer.bypassSecurityTrustHtml(xhr.responseText);
}
};
xhr.send();
}
return InfiniteMenuService.LoadedIcons[uniq];
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: InfiniteMenuService, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: InfiniteMenuService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: InfiniteMenuService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [{ type: i1.DomSanitizer }] });
var IconType;
(function (IconType) {
IconType[IconType["SVG"] = 0] = "SVG";
IconType[IconType["FluentIcons"] = 1] = "FluentIcons";
IconType[IconType["Image"] = 2] = "Image";
})(IconType || (IconType = {}));
class MenuItemComponent {
constructor(sanitizer, _InfiniteMenu) {
this.sanitizer = sanitizer;
this._InfiniteMenu = _InfiniteMenu;
this.MenuModel = [];
this.RGB = { r: 0, g: 21, b: 40 };
this.ShadeMultiplier = 1;
this.ShowOpenForAll = false;
this.IconHeight = '25px';
this.IconWidth = '25px';
this.MenuStyles = [];
this.ShowOnlyIcon = false;
this.SingleMenuHeight = 45;
this.ContextMenuTemplate = null;
this.MenuSelected = new EventEmitter();
this.MenuOpenCloseChanged = new EventEmitter();
this.MenuItemOnContextMenu = new EventEmitter();
}
get IconType() {
return IconType;
}
GetDomSanitizeredImage(image) {
return this.sanitizer.bypassSecurityTrustResourceUrl(image);
}
ToggleOption(Id) {
if (Id) {
var menu = this.MenuModel.find((x) => x.Id == Id);
if (menu) {
menu.IsOpen = !menu.IsOpen;
}
this.MenuOpenCloseChanged.emit(menu);
}
}
GetBackgoundColor(MenuData) {
let Loc = MenuData.MenuLoc;
let localRGB = structuredClone(this.RGB);
if (!Loc)
Loc = 1;
localRGB.r = localRGB.r * (Loc * this.ShadeMultiplier);
localRGB.g = localRGB.g * (Loc * this.ShadeMultiplier);
localRGB.b = localRGB.b * (Loc * this.ShadeMultiplier);
let currentMenuStyle = structuredClone(this.MenuStyles.find((x) => x.Location == Loc));
if (currentMenuStyle && currentMenuStyle.BackgroundColor) {
return currentMenuStyle.BackgroundColor;
}
return `rgb(${localRGB.r}, ${localRGB.g}, ${localRGB.b})`;
}
GetTextColor(MenuData) {
let currentMenuStyle = structuredClone(this.MenuStyles.find((x) => x.Location == MenuData.MenuLoc));
if (currentMenuStyle && currentMenuStyle.TextColor) {
return currentMenuStyle.TextColor;
}
return `inherit`;
}
GetPadding(Loc) {
let currentMenuStyle = structuredClone(this.MenuStyles.find((x) => x.Location == Loc));
if (currentMenuStyle && currentMenuStyle.PaddingLeft) {
return currentMenuStyle.PaddingLeft;
}
return `0px`;
}
GetOnHoverBackgroundColor(Loc) {
let currentMenuStyle = structuredClone(this.MenuStyles.find((x) => x.Location == Loc));
if (currentMenuStyle && currentMenuStyle.OnHoverBackgroundColor) {
return currentMenuStyle.OnHoverBackgroundColor;
}
return `inherit`;
}
GetOnHoverTextColor(Loc) {
let currentMenuStyle = structuredClone(this.MenuStyles.find((x) => x.Location == Loc));
if (currentMenuStyle && currentMenuStyle.OnHoverTextColor) {
return currentMenuStyle.OnHoverTextColor;
}
return `inherit`;
}
GetMenuTitleWidth(MenuData) {
let widthString = `calc(100% - (${this.IconWidth}px + 10px))`;
return widthString;
}
GetMenuHeadWithWithOUtArrow(MenuData) {
let paddingLeft = this.GetPadding(MenuData.MenuLoc);
let widthString = `calc(100% - (20px + ${paddingLeft} + 40px))`;
return widthString;
}
GetOptionBodyHeight(MenuData) {
if (MenuData.IsOpen) {
var toReturn = this.GetChildBodyHeight(MenuData) + 'px';
return toReturn;
}
return '0px';
}
GetChildBodyHeight(MenuData) {
if (MenuData.IsOpen) {
let total = 45;
MenuData.Children.forEach((Menu) => {
total += this.GetChildBodyHeight(Menu);
});
return total;
}
return 45;
}
_MenuSelected(MenuData) {
if (MenuData.OpenSubOnAnyClick) {
this.ToggleOption(MenuData.Id);
}
else {
this.MenuSelected.emit(MenuData);
}
}
_MenuOpenCloseChanged(MenuData) {
this.MenuOpenCloseChanged.emit(MenuData);
}
ByPassSecurityTrustHtml(Data) {
return this.sanitizer.bypassSecurityTrustHtml(Data);
}
HoverOnMenu_MouseEnter(MenuData, Element) {
var rect = Element.getBoundingClientRect();
var tooltip = document.createElement('div');
tooltip.innerHTML = MenuData.Title;
tooltip.style.position = 'fixed';
tooltip.style.backgroundColor = '#00000096';
tooltip.style.height = 'max-content';
tooltip.style.width = 'max-content';
tooltip.classList.add(MenuData.Id + 'ElementId');
tooltip.classList.add('Tooltip_InfiniteMenu');
tooltip.style.top = rect.top + 'px';
tooltip.style.left = rect.left + Element.offsetWidth + 10 + 'px';
tooltip.style.color = 'white';
tooltip.style.padding = '10px';
tooltip.style.borderRadius = '5px';
document.getElementsByTagName('body')[0].appendChild(tooltip);
Element.style.backgroundColor = this.GetOnHoverBackgroundColor(MenuData.MenuLoc);
Element.style.color = this.GetOnHoverTextColor(MenuData.MenuLoc);
}
HoverOnMenu_MouseLeave(MenuData, Element) {
let elementsAll = document.getElementsByClassName('Tooltip_InfiniteMenu');
for (let index = 0; index < elementsAll.length; index++) {
const element = elementsAll[index];
if (element)
element.remove();
}
let elements = document.getElementsByClassName(MenuData.Id + 'ElementId');
for (let index = 0; index < elements.length; index++) {
const element = elements[index];
if (element)
element.remove();
}
Element.style.backgroundColor = this.GetBackgoundColor(MenuData);
Element.style.color = this.GetTextColor(MenuData);
}
_MenuItemOnContextMenu(EventData, MenuModel) {
var Data = {
EventData: EventData,
MenuModel: MenuModel,
};
this.MenuItemOnContextMenu.emit(Data);
}
_MenuItemOnContextMenu2(EventData) {
this.MenuItemOnContextMenu.emit(EventData);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: MenuItemComponent, deps: [{ token: i1.DomSanitizer }, { token: InfiniteMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.2", type: MenuItemComponent, isStandalone: false, selector: "menu-item", inputs: { MenuModel: "MenuModel", RGB: "RGB", ShadeMultiplier: "ShadeMultiplier", ShowOpenForAll: "ShowOpenForAll", IconHeight: "IconHeight", IconWidth: "IconWidth", MenuStyles: "MenuStyles", ShowOnlyIcon: "ShowOnlyIcon", SingleMenuHeight: "SingleMenuHeight", ContextMenuTemplate: "ContextMenuTemplate" }, outputs: { MenuSelected: "MenuSelected", MenuOpenCloseChanged: "MenuOpenCloseChanged", MenuItemOnContextMenu: "MenuItemOnContextMenu" }, ngImport: i0, template: "<ng-container *ngIf=\"MenuModel\">\r\n <div [ngClass]=\"{'open': Menu.IsOpen}\" class=\"OptionContainer\" *ngFor=\"let Menu of MenuModel\" #OptionContainer\r\n [ngStyle]=\"{'background-color': GetBackgoundColor(Menu)}\">\r\n <ng-template #ContextMenuTemplateLocal>\r\n <div cdkMenu>\r\n <ng-container *ngTemplateOutlet=\"ContextMenuTemplate; context: { Menu: Menu }\">\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n <div [cdkContextMenuTriggerFor]=\"ContextMenuTemplateLocal\" (contextmenu)=\"_MenuItemOnContextMenu($event, Menu)\"\r\n class=\"OptionHead\" #OptionHead [ngStyle]=\"{'color': GetTextColor(Menu) }\"\r\n (mouseenter)=\"HoverOnMenu_MouseEnter(Menu, OptionHead)\"\r\n (mouseleave)=\"HoverOnMenu_MouseLeave(Menu, OptionHead)\">\r\n <div class=\"TitleOuterContainer\" (click)=\"_MenuSelected(Menu)\"\r\n [ngStyle]=\"{'padding-left': 'calc(10px + ' + GetPadding(Menu.MenuLoc) +')', 'width': GetMenuHeadWithWithOUtArrow(Menu)}\">\r\n <div class=\"IconsContainer\" [ngClass]=\"{'ShowOnlyIcon': ShowOnlyIcon}\">\r\n <ng-container *ngIf=\"Menu.IconType == IconType.SVG && Menu.Icon\">\r\n <div [innerHTML]=\"ByPassSecurityTrustHtml(Menu.Icon)\"\r\n [ngStyle]=\"{ 'height': IconHeight, 'width': IconWidth }\"></div>\r\n </ng-container>\r\n <ng-container *ngIf=\"Menu.IconType == IconType.FluentIcons && Menu.Icon\">\r\n <div [innerHTML]=\"_InfiniteMenu.GetFluentUiIconsSvgName(Menu.Icon)\"\r\n [ngStyle]=\"{ 'height': IconHeight, 'width': IconWidth }\"></div>\r\n </ng-container>\r\n <ng-container *ngIf=\"Menu.IconType == IconType.Image && Menu.Icon\">\r\n <img [src]=\"GetDomSanitizeredImage(Menu.Icon)\" class=\"MenuIcon\"\r\n [ngStyle]=\"{ 'height': IconHeight, 'width': IconWidth }\">\r\n </ng-container>\r\n <ng-container *ngIf=\"!Menu.Icon && ShowOnlyIcon\">\r\n <b>{{Menu.Title[0].toUpperCase()}}</b>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"!ShowOnlyIcon\" class=\"MenuTitleContainer\" [ngStyle]=\"{'width': GetMenuTitleWidth(Menu)}\">\r\n <span>{{Menu.Title}}</span>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"Menu.Children.length > 0 || ShowOpenForAll\">\r\n <div style=\"padding: 10px; display: flex; justify-content: center;align-items: center;\"\r\n (click)=\"ToggleOption(Menu.Id)\"><svg class=\"ArrowIcon\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\"\r\n y=\"0px\" width=\"20\" height=\"20\" viewBox=\"0 0 30 30\">\r\n <path\r\n d=\"M 24.990234 8.9863281 A 1.0001 1.0001 0 0 0 24.292969 9.2929688 L 15 18.585938 L 5.7070312 9.2929688 A 1.0001 1.0001 0 0 0 4.9902344 8.9902344 A 1.0001 1.0001 0 0 0 4.2929688 10.707031 L 14.292969 20.707031 A 1.0001 1.0001 0 0 0 15.707031 20.707031 L 25.707031 10.707031 A 1.0001 1.0001 0 0 0 24.990234 8.9863281 z\">\r\n </path>\r\n </svg></div>\r\n </ng-container>\r\n </div>\r\n <div class=\"OptionBody\" [ngStyle]=\"{'max-height': GetOptionBodyHeight(Menu)}\">\r\n <menu-item [MenuModel]=\"Menu.Children\" [RGB]=\"RGB\" [ShadeMultiplier]=\"ShadeMultiplier\"\r\n [ShowOpenForAll]=\"ShowOpenForAll\" [IconHeight]=\"IconHeight\" [IconWidth]=\"IconWidth\"\r\n [MenuStyles]=\"MenuStyles\" [ShowOnlyIcon]=\"ShowOnlyIcon\" [SingleMenuHeight]=\"SingleMenuHeight\"\r\n (MenuSelected)=\"_MenuSelected($event)\" (MenuOpenCloseChanged)=\"_MenuOpenCloseChanged($event)\"\r\n (MenuItemOnContextMenu)=\"_MenuItemOnContextMenu2($event)\"\r\n [ContextMenuTemplate]=\"ContextMenuTemplate\"></menu-item>\r\n </div>\r\n </div>\r\n</ng-container>", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i4.CdkContextMenuTrigger, selector: "[cdkContextMenuTriggerFor]", inputs: ["cdkContextMenuTriggerFor", "cdkContextMenuPosition", "cdkContextMenuTriggerData", "cdkContextMenuDisabled"], outputs: ["cdkContextMenuOpened", "cdkContextMenuClosed"], exportAs: ["cdkContextMenuTriggerFor"] }, { kind: "component", type: MenuItemComponent, selector: "menu-item", inputs: ["MenuModel", "RGB", "ShadeMultiplier", "ShowOpenForAll", "IconHeight", "IconWidth", "MenuStyles", "ShowOnlyIcon", "SingleMenuHeight", "ContextMenuTemplate"], outputs: ["MenuSelected", "MenuOpenCloseChanged", "MenuItemOnContextMenu"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: MenuItemComponent, decorators: [{
type: Component,
args: [{ selector: 'menu-item', standalone: false, template: "<ng-container *ngIf=\"MenuModel\">\r\n <div [ngClass]=\"{'open': Menu.IsOpen}\" class=\"OptionContainer\" *ngFor=\"let Menu of MenuModel\" #OptionContainer\r\n [ngStyle]=\"{'background-color': GetBackgoundColor(Menu)}\">\r\n <ng-template #ContextMenuTemplateLocal>\r\n <div cdkMenu>\r\n <ng-container *ngTemplateOutlet=\"ContextMenuTemplate; context: { Menu: Menu }\">\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n <div [cdkContextMenuTriggerFor]=\"ContextMenuTemplateLocal\" (contextmenu)=\"_MenuItemOnContextMenu($event, Menu)\"\r\n class=\"OptionHead\" #OptionHead [ngStyle]=\"{'color': GetTextColor(Menu) }\"\r\n (mouseenter)=\"HoverOnMenu_MouseEnter(Menu, OptionHead)\"\r\n (mouseleave)=\"HoverOnMenu_MouseLeave(Menu, OptionHead)\">\r\n <div class=\"TitleOuterContainer\" (click)=\"_MenuSelected(Menu)\"\r\n [ngStyle]=\"{'padding-left': 'calc(10px + ' + GetPadding(Menu.MenuLoc) +')', 'width': GetMenuHeadWithWithOUtArrow(Menu)}\">\r\n <div class=\"IconsContainer\" [ngClass]=\"{'ShowOnlyIcon': ShowOnlyIcon}\">\r\n <ng-container *ngIf=\"Menu.IconType == IconType.SVG && Menu.Icon\">\r\n <div [innerHTML]=\"ByPassSecurityTrustHtml(Menu.Icon)\"\r\n [ngStyle]=\"{ 'height': IconHeight, 'width': IconWidth }\"></div>\r\n </ng-container>\r\n <ng-container *ngIf=\"Menu.IconType == IconType.FluentIcons && Menu.Icon\">\r\n <div [innerHTML]=\"_InfiniteMenu.GetFluentUiIconsSvgName(Menu.Icon)\"\r\n [ngStyle]=\"{ 'height': IconHeight, 'width': IconWidth }\"></div>\r\n </ng-container>\r\n <ng-container *ngIf=\"Menu.IconType == IconType.Image && Menu.Icon\">\r\n <img [src]=\"GetDomSanitizeredImage(Menu.Icon)\" class=\"MenuIcon\"\r\n [ngStyle]=\"{ 'height': IconHeight, 'width': IconWidth }\">\r\n </ng-container>\r\n <ng-container *ngIf=\"!Menu.Icon && ShowOnlyIcon\">\r\n <b>{{Menu.Title[0].toUpperCase()}}</b>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"!ShowOnlyIcon\" class=\"MenuTitleContainer\" [ngStyle]=\"{'width': GetMenuTitleWidth(Menu)}\">\r\n <span>{{Menu.Title}}</span>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"Menu.Children.length > 0 || ShowOpenForAll\">\r\n <div style=\"padding: 10px; display: flex; justify-content: center;align-items: center;\"\r\n (click)=\"ToggleOption(Menu.Id)\"><svg class=\"ArrowIcon\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\"\r\n y=\"0px\" width=\"20\" height=\"20\" viewBox=\"0 0 30 30\">\r\n <path\r\n d=\"M 24.990234 8.9863281 A 1.0001 1.0001 0 0 0 24.292969 9.2929688 L 15 18.585938 L 5.7070312 9.2929688 A 1.0001 1.0001 0 0 0 4.9902344 8.9902344 A 1.0001 1.0001 0 0 0 4.2929688 10.707031 L 14.292969 20.707031 A 1.0001 1.0001 0 0 0 15.707031 20.707031 L 25.707031 10.707031 A 1.0001 1.0001 0 0 0 24.990234 8.9863281 z\">\r\n </path>\r\n </svg></div>\r\n </ng-container>\r\n </div>\r\n <div class=\"OptionBody\" [ngStyle]=\"{'max-height': GetOptionBodyHeight(Menu)}\">\r\n <menu-item [MenuModel]=\"Menu.Children\" [RGB]=\"RGB\" [ShadeMultiplier]=\"ShadeMultiplier\"\r\n [ShowOpenForAll]=\"ShowOpenForAll\" [IconHeight]=\"IconHeight\" [IconWidth]=\"IconWidth\"\r\n [MenuStyles]=\"MenuStyles\" [ShowOnlyIcon]=\"ShowOnlyIcon\" [SingleMenuHeight]=\"SingleMenuHeight\"\r\n (MenuSelected)=\"_MenuSelected($event)\" (MenuOpenCloseChanged)=\"_MenuOpenCloseChanged($event)\"\r\n (MenuItemOnContextMenu)=\"_MenuItemOnContextMenu2($event)\"\r\n [ContextMenuTemplate]=\"ContextMenuTemplate\"></menu-item>\r\n </div>\r\n </div>\r\n</ng-container>" }]
}], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: InfiniteMenuService }], propDecorators: { MenuModel: [{
type: Input
}], RGB: [{
type: Input
}], ShadeMultiplier: [{
type: Input
}], ShowOpenForAll: [{
type: Input
}], IconHeight: [{
type: Input
}], IconWidth: [{
type: Input
}], MenuStyles: [{
type: Input
}], ShowOnlyIcon: [{
type: Input
}], SingleMenuHeight: [{
type: Input
}], ContextMenuTemplate: [{
type: Input
}], MenuSelected: [{
type: Output
}], MenuOpenCloseChanged: [{
type: Output
}], MenuItemOnContextMenu: [{
type: Output
}] } });
class InfiniteMenuComponent {
constructor() {
this.MenuModel = [];
this.RGB = { r: 0, g: 21, b: 40 };
this.ShadeMultiplier = 1;
this.ShowOpenForAll = false;
this.IconHeight = '25px';
this.IconWidth = '25px';
this.MenuStyles = [];
this.Loading = false;
this.ShowOnlyIcon = false;
this.SingleMenuHeight = 45;
this.ContextMenuTemplate = null;
this.MenuModelChange = new EventEmitter();
this.MenuSelected = new EventEmitter();
this.MenuOpenCloseChanged = new EventEmitter();
this.MenuItemOnContextMenu = new EventEmitter();
}
ngOnInit() {
this.SetUpMenuModel();
}
ngOnChanges(changes) {
this.SetUpMenuModel();
}
SetUpMenuModel() {
this.MenuModel.forEach((element) => {
this.UpdateIDandLocForMenu(element, 1);
});
}
UpdateIDandLocForMenu(MenuData, Loc) {
if (!MenuData.Id) {
MenuData.Id =
'id' + new Date().getTime() + Math.random().toString(16).slice(2);
}
MenuData.MenuLoc = Loc;
MenuData.Children.forEach((element) => {
this.UpdateIDandLocForMenu(element, Loc + 1);
});
}
_MenuSelected(MenuData) {
this.MenuSelected.emit(MenuData);
}
_MenuOpenCloseChanged(MenuData) {
this.MenuOpenCloseChanged.emit(MenuData);
}
UnselectAll() {
this.MenuModel.forEach((MenuData) => {
this._UnselectAll(MenuData);
});
}
_UnselectAll(MenuData) {
MenuData.Children.forEach((_MenuData) => {
this._UnselectAll(_MenuData);
});
}
_MenuItemOnContextMenu(EventData) {
this.MenuItemOnContextMenu.emit(EventData);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: InfiniteMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.2", type: InfiniteMenuComponent, isStandalone: false, selector: "InfiniteMenu", inputs: { MenuModel: "MenuModel", RGB: "RGB", ShadeMultiplier: "ShadeMultiplier", ShowOpenForAll: "ShowOpenForAll", IconHeight: "IconHeight", IconWidth: "IconWidth", MenuStyles: "MenuStyles", Loading: "Loading", ShowOnlyIcon: "ShowOnlyIcon", SingleMenuHeight: "SingleMenuHeight", ContextMenuTemplate: "ContextMenuTemplate" }, outputs: { MenuModelChange: "MenuModelChange", MenuSelected: "MenuSelected", MenuOpenCloseChanged: "MenuOpenCloseChanged", MenuItemOnContextMenu: "MenuItemOnContextMenu" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"MenuContainer\">\r\n <div class=\"OuterLoaderContainer\" [ngClass]=\"{'show': Loading}\">\r\n <div class=\"LoaderContainer\">\r\n <div class=\"horizontalLinesLoader\">\r\n <span></span>\r\n <span></span>\r\n <span></span>\r\n <span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <menu-item [MenuModel]=\"MenuModel\" [RGB]=\"RGB\" [ShadeMultiplier]=\"ShadeMultiplier\" [ShowOpenForAll]=\"ShowOpenForAll\"\r\n [IconHeight]=\"IconHeight\" [IconWidth]=\"IconWidth\" [MenuStyles]=\"MenuStyles\" [ShowOnlyIcon]=\"ShowOnlyIcon\"\r\n [SingleMenuHeight]=\"SingleMenuHeight\" (MenuSelected)=\"_MenuSelected($event)\"\r\n (MenuOpenCloseChanged)=\"_MenuOpenCloseChanged($event)\" (MenuItemOnContextMenu)=\"_MenuItemOnContextMenu($event)\"\r\n [ContextMenuTemplate]=\"ContextMenuTemplate\"></menu-item>\r\n</div>", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MenuItemComponent, selector: "menu-item", inputs: ["MenuModel", "RGB", "ShadeMultiplier", "ShowOpenForAll", "IconHeight", "IconWidth", "MenuStyles", "ShowOnlyIcon", "SingleMenuHeight", "ContextMenuTemplate"], outputs: ["MenuSelected", "MenuOpenCloseChanged", "MenuItemOnContextMenu"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: InfiniteMenuComponent, decorators: [{
type: Component,
args: [{ selector: 'InfiniteMenu', standalone: false, template: "<div class=\"MenuContainer\">\r\n <div class=\"OuterLoaderContainer\" [ngClass]=\"{'show': Loading}\">\r\n <div class=\"LoaderContainer\">\r\n <div class=\"horizontalLinesLoader\">\r\n <span></span>\r\n <span></span>\r\n <span></span>\r\n <span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <menu-item [MenuModel]=\"MenuModel\" [RGB]=\"RGB\" [ShadeMultiplier]=\"ShadeMultiplier\" [ShowOpenForAll]=\"ShowOpenForAll\"\r\n [IconHeight]=\"IconHeight\" [IconWidth]=\"IconWidth\" [MenuStyles]=\"MenuStyles\" [ShowOnlyIcon]=\"ShowOnlyIcon\"\r\n [SingleMenuHeight]=\"SingleMenuHeight\" (MenuSelected)=\"_MenuSelected($event)\"\r\n (MenuOpenCloseChanged)=\"_MenuOpenCloseChanged($event)\" (MenuItemOnContextMenu)=\"_MenuItemOnContextMenu($event)\"\r\n [ContextMenuTemplate]=\"ContextMenuTemplate\"></menu-item>\r\n</div>" }]
}], ctorParameters: () => [], propDecorators: { MenuModel: [{
type: Input
}], RGB: [{
type: Input
}], ShadeMultiplier: [{
type: Input
}], ShowOpenForAll: [{
type: Input
}], IconHeight: [{
type: Input
}], IconWidth: [{
type: Input
}], MenuStyles: [{
type: Input
}], Loading: [{
type: Input
}], ShowOnlyIcon: [{
type: Input
}], SingleMenuHeight: [{
type: Input
}], ContextMenuTemplate: [{
type: Input
}], MenuModelChange: [{
type: Output
}], MenuSelected: [{
type: Output
}], MenuOpenCloseChanged: [{
type: Output
}], MenuItemOnContextMenu: [{
type: Output
}] } });
class InfiniteMenuModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: InfiniteMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.2", ngImport: i0, type: InfiniteMenuModule, declarations: [InfiniteMenuComponent, MenuItemComponent], imports: [CommonModule, CdkMenuModule], exports: [InfiniteMenuComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: InfiniteMenuModule, imports: [CommonModule, CdkMenuModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: InfiniteMenuModule, decorators: [{
type: NgModule,
args: [{
declarations: [InfiniteMenuComponent, MenuItemComponent],
imports: [CommonModule, CdkMenuModule],
exports: [InfiniteMenuComponent],
}]
}] });
/*
* Public API Surface of infinite-menu
*/
/**
* Generated bundle index. Do not edit.
*/
export { IconType, InfiniteMenuComponent, InfiniteMenuModule, InfiniteMenuService };
//# sourceMappingURL=infinite-menu.mjs.map