@pepperi-addons/ngx-lib 0.5.0-ng15.3 → 0.5.0-ng16.1

package/fesm2015/pepperi-addons-ngx-lib-menu.mjs

@@ -1,403 +0,0 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, ViewChild, Output, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { MatCommonModule } from '@angular/material/core';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i2 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
-import * as i3 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i1$1 from '@pepperi-addons/ngx-lib';
-import { PepScreenSizeType, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
-import * as i1$2 from '@pepperi-addons/ngx-lib/icon';
-import { pepIconArrowRight, pepIconSystemMenu, PepIconModule } from '@pepperi-addons/ngx-lib/icon';
-import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i3$1 from '@angular/cdk/bidi';
-
-class PepMenuItemParent {
-    constructor(data) {
-        this.parent = null;
-        this.key = data.key;
-        this.parent = data.parent;
-    }
-}
-class PepMenuItem {
-    constructor(data) {
-        this.disabled = false;
-        this.hidden = false;
-        this.iconName = null;
-        this.iconPosition = 'before';
-        this.type = 'regular';
-        this.children = null;
-        this.parent = null;
-        Object.assign(this, data);
-    }
-}
-
-class PepInternalMenuItem extends PepMenuItem {
-    constructor() {
-        super(...arguments);
-        this.selected = false;
-    }
-}
-class PepMenuItemComponent {
-    constructor() {
-        this.type = 'action';
-        this.parent = null;
-        this.items = [];
-        this._selectedItem = null;
-        this.xPosition = 'after';
-        this.subMenuIconName = pepIconArrowRight.name;
-        this.menuItemClick = new EventEmitter();
-    }
-    set selectedItem(selectedItem) {
-        this.updateSelectedItem(selectedItem);
-    }
-    get selectedItem() {
-        return this._selectedItem;
-    }
-    ngOnDestroy() {
-        // if (this.menuItemClick) {
-        //     this.menuItemClick.unsubscribe();
-        // }
-    }
-    clearSelectedItem(selectedItem) {
-        if (this.items) {
-            this.items.forEach((item) => {
-                item.selected = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) === item.key;
-                if (item.children) {
-                    item.children.forEach((child) => {
-                        this.clearSelectedChildren(child, selectedItem);
-                    });
-                }
-            });
-        }
-    }
-    clearSelectedChildren(item, selectedItem) {
-        item.selected = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) === item.key;
-        if (item.children) {
-            item.children.forEach((child) => {
-                this.clearSelectedChildren(child, selectedItem);
-            });
-        }
-    }
-    selectParentAndChildren(items, parentsKeys) {
-        if (parentsKeys.length > 0) {
-            const key = parentsKeys.pop();
-            const selectedParent = items.find((item) => item.key === key);
-            if (selectedParent) {
-                selectedParent.selected = true;
-                this.selectParentAndChildren(selectedParent.children, parentsKeys);
-            }
-        }
-    }
-    updateSelectedParent(parentItem, parentsKeys) {
-        parentsKeys.push(parentItem.key);
-        if (parentItem.parent) {
-            this.updateSelectedParent(parentItem.parent, parentsKeys);
-        }
-        else {
-            this.selectParentAndChildren(this.items, parentsKeys);
-        }
-    }
-    updateSelectedItem(selectedItem) {
-        this.clearSelectedItem(selectedItem);
-        this._selectedItem = selectedItem;
-        if (selectedItem && selectedItem.parent) {
-            this.updateSelectedParent(selectedItem.parent, []);
-        }
-    }
-    onChildClicked(click) {
-        // click.source.selected = true;
-        this.menuItemClick.emit(click);
-    }
-    onMenuItemClicked(item) {
-        // item.selected = true;
-        this.menuItemClick.emit({ source: item });
-    }
-}
-PepMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepMenuItemComponent, selector: "pep-menu-item", inputs: { type: "type", parent: "parent", items: "items", selectedItem: "selectedItem", xPosition: "xPosition", subMenuIconName: "subMenuIconName" }, outputs: { menuItemClick: "menuItemClick" }, viewQueries: [{ propertyName: "childMenu", first: true, predicate: ["childMenu"], descendants: true, static: true }], ngImport: i0, template: "<mat-menu #childMenu=\"matMenu\" xPosition=\"{{ xPosition }}\" class=\"pep-{{type}}-menu\">\n    <ng-container *ngFor=\"let menuItem of items\">\n        <ng-container *ngIf=\"!menuItem.hidden\">\n            <ng-container *ngIf=\"menuItem.type === 'splitter'; then splitterBlock; else buttonBlock\"></ng-container>\n            <ng-template #splitterBlock>\n                <div mat-menu-item class=\"splitter\"></div>\n            </ng-template>\n\n            <ng-template #buttonBlock>\n                <ng-container\n                    *ngIf=\"type !== 'select' && menuItem.children?.length > 0; then childrenBlock; else regularBlock\">\n                </ng-container>\n                <ng-template #childrenBlock>\n                    <button mat-menu-item (click)=\"onMenuItemClicked(menuItem)\" [matMenuTriggerFor]=\"menu.childMenu\"\n                        title=\"{{ menuItem.text }}\" pepRtlDirection [disabled]=\"menuItem.disabled\"\n                        [ngClass]=\"{ selected: type === 'action-select' && menuItem.selected, disabled: menuItem.disabled }\">\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {\n                            itemIconName: menuItem.iconName,\n                            itemIconPosition: menuItem.iconPosition,\n                            itemText: menuItem.text,\n                            itemType: menuItem.type,\n                            hasChildren: true\n                        }\"></ng-container>\n                    </button>\n                    <pep-menu-item #menu [type]=\"type\" [items]=\"menuItem.children\" [parent]=\"menuItem\"\n                        (menuItemClick)=\"onChildClicked($event)\">\n                    </pep-menu-item>\n                </ng-template>\n                <ng-template #regularBlock>\n                    <button mat-menu-item (click)=\"onMenuItemClicked(menuItem)\" title=\"{{ menuItem.text }}\"\n                        pepRtlDirection [disabled]=\"menuItem.disabled\"\n                        [ngClass]=\"{ selected: (type === 'select' || type === 'action-select') && menuItem.selected, disabled: menuItem.disabled }\">\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {\n                            itemIconName: menuItem.iconName,\n                            itemIconPosition: menuItem.iconPosition,\n                            itemText: menuItem.text,\n                            itemType: menuItem.type,\n                            hasChildren: false\n                        }\"></ng-container>\n                    </button>\n                </ng-template>\n            </ng-template>\n        </ng-container>\n    </ng-container>\n</mat-menu>\n\n<ng-template #itemTemplate let-itemIconName=\"itemIconName\" let-itemIconPosition=\"itemIconPosition\" let-itemText=\"itemText\" let-itemType=\"itemType\"\n    let-hasChildren=\"hasChildren\">\n    <ng-container>\n        <mat-icon *ngIf=\"itemIconName && itemIconPosition === 'before'\" class=\"pull-left flip\">\n            <pep-icon name=\"{{itemIconName}}\"></pep-icon>\n        </mat-icon>\n        <span *ngIf=\"itemText\" class=\"pull-left flip title ellipsis\"\n            [ngClass]=\"{ 'spacing-from-icon': itemIconName, 'spacing-from-submenu-trigger': hasChildren }\"\n            [title]=\"itemText\">\n            {{ itemText }}\n        </span>\n        <mat-icon *ngIf=\"itemIconName && itemIconPosition === 'after'\" class=\"pull-left flip\">\n            <pep-icon name=\"{{itemIconName}}\"></pep-icon>\n        </mat-icon>\n        <mat-icon *ngIf=\"hasChildren\" class=\"pull-left flip submenu-trigger\"\n            [ngClass]=\"{ 'rotate': xPosition === 'before' }\">\n            <pep-icon name=\"{{ subMenuIconName }}\"></pep-icon>\n        </mat-icon>\n    </ng-container>\n</ng-template>", styles: [".pager-container{display:flex;justify-content:center;align-items:center;height:calc(2rem + calc(var(--pep-spacing-sm, .5rem) * 2));padding:var(--pep-spacing-sm, .5rem)}.pager-container .page-index{min-height:unset;margin-bottom:0}.pager-container .page-index ::ng-deep .mat-form-field-flex,.pager-container .page-index ::ng-deep .mdc-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-input-element,.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-mdc-input-element,.pager-container .page-index ::ng-deep .mdc-form-field-flex .mat-input-element,.pager-container .page-index ::ng-deep .mdc-form-field-flex .mat-mdc-input-element{min-width:1.25rem}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i1$2.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: PepMenuItemComponent, selector: "pep-menu-item", inputs: ["type", "parent", "items", "selectedItem", "xPosition", "subMenuIconName"], outputs: ["menuItemClick"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepMenuItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pep-menu-item', template: "<mat-menu #childMenu=\"matMenu\" xPosition=\"{{ xPosition }}\" class=\"pep-{{type}}-menu\">\n    <ng-container *ngFor=\"let menuItem of items\">\n        <ng-container *ngIf=\"!menuItem.hidden\">\n            <ng-container *ngIf=\"menuItem.type === 'splitter'; then splitterBlock; else buttonBlock\"></ng-container>\n            <ng-template #splitterBlock>\n                <div mat-menu-item class=\"splitter\"></div>\n            </ng-template>\n\n            <ng-template #buttonBlock>\n                <ng-container\n                    *ngIf=\"type !== 'select' && menuItem.children?.length > 0; then childrenBlock; else regularBlock\">\n                </ng-container>\n                <ng-template #childrenBlock>\n                    <button mat-menu-item (click)=\"onMenuItemClicked(menuItem)\" [matMenuTriggerFor]=\"menu.childMenu\"\n                        title=\"{{ menuItem.text }}\" pepRtlDirection [disabled]=\"menuItem.disabled\"\n                        [ngClass]=\"{ selected: type === 'action-select' && menuItem.selected, disabled: menuItem.disabled }\">\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {\n                            itemIconName: menuItem.iconName,\n                            itemIconPosition: menuItem.iconPosition,\n                            itemText: menuItem.text,\n                            itemType: menuItem.type,\n                            hasChildren: true\n                        }\"></ng-container>\n                    </button>\n                    <pep-menu-item #menu [type]=\"type\" [items]=\"menuItem.children\" [parent]=\"menuItem\"\n                        (menuItemClick)=\"onChildClicked($event)\">\n                    </pep-menu-item>\n                </ng-template>\n                <ng-template #regularBlock>\n                    <button mat-menu-item (click)=\"onMenuItemClicked(menuItem)\" title=\"{{ menuItem.text }}\"\n                        pepRtlDirection [disabled]=\"menuItem.disabled\"\n                        [ngClass]=\"{ selected: (type === 'select' || type === 'action-select') && menuItem.selected, disabled: menuItem.disabled }\">\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {\n                            itemIconName: menuItem.iconName,\n                            itemIconPosition: menuItem.iconPosition,\n                            itemText: menuItem.text,\n                            itemType: menuItem.type,\n                            hasChildren: false\n                        }\"></ng-container>\n                    </button>\n                </ng-template>\n            </ng-template>\n        </ng-container>\n    </ng-container>\n</mat-menu>\n\n<ng-template #itemTemplate let-itemIconName=\"itemIconName\" let-itemIconPosition=\"itemIconPosition\" let-itemText=\"itemText\" let-itemType=\"itemType\"\n    let-hasChildren=\"hasChildren\">\n    <ng-container>\n        <mat-icon *ngIf=\"itemIconName && itemIconPosition === 'before'\" class=\"pull-left flip\">\n            <pep-icon name=\"{{itemIconName}}\"></pep-icon>\n        </mat-icon>\n        <span *ngIf=\"itemText\" class=\"pull-left flip title ellipsis\"\n            [ngClass]=\"{ 'spacing-from-icon': itemIconName, 'spacing-from-submenu-trigger': hasChildren }\"\n            [title]=\"itemText\">\n            {{ itemText }}\n        </span>\n        <mat-icon *ngIf=\"itemIconName && itemIconPosition === 'after'\" class=\"pull-left flip\">\n            <pep-icon name=\"{{itemIconName}}\"></pep-icon>\n        </mat-icon>\n        <mat-icon *ngIf=\"hasChildren\" class=\"pull-left flip submenu-trigger\"\n            [ngClass]=\"{ 'rotate': xPosition === 'before' }\">\n            <pep-icon name=\"{{ subMenuIconName }}\"></pep-icon>\n        </mat-icon>\n    </ng-container>\n</ng-template>", styles: [".pager-container{display:flex;justify-content:center;align-items:center;height:calc(2rem + calc(var(--pep-spacing-sm, .5rem) * 2));padding:var(--pep-spacing-sm, .5rem)}.pager-container .page-index{min-height:unset;margin-bottom:0}.pager-container .page-index ::ng-deep .mat-form-field-flex,.pager-container .page-index ::ng-deep .mdc-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-input-element,.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-mdc-input-element,.pager-container .page-index ::ng-deep .mdc-form-field-flex .mat-input-element,.pager-container .page-index ::ng-deep .mdc-form-field-flex .mat-mdc-input-element{min-width:1.25rem}\n"] }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], parent: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], selectedItem: [{
-                type: Input
-            }], xPosition: [{
-                type: Input
-            }], subMenuIconName: [{
-                type: Input
-            }], childMenu: [{
-                type: ViewChild,
-                args: ['childMenu', { static: true }]
-            }], menuItemClick: [{
-                type: Output
-            }] } });
-
-class PepMenuComponent {
-    set items(items) {
-        this.setItemsParent(items);
-        this._items = items;
-    }
-    get items() {
-        return this._items;
-    }
-    constructor(layoutService) {
-        this.layoutService = layoutService;
-        this.text = '';
-        /**
-         * The icon name to show on the menu, look in (@link icon -> All icons), default icon `system_menu`
-         *
-         * @type {PepIconType} See {@link PepIconType}
-         * @memberof PepMenuComponent
-         */
-        this.iconName = pepIconSystemMenu.name || 'system_menu';
-        this.iconPosition = 'after';
-        this.type = 'action';
-        this.styleType = 'weak';
-        this.sizeType = 'md';
-        this.classNames = '';
-        this.xPosition = 'after';
-        this.hideOnEmptyItems = false;
-        this._items = null;
-        this.selectedItem = null;
-        this.disabled = false;
-        this.stateChange = new EventEmitter();
-        this.menuItemClick = new EventEmitter();
-        this.menuClick = new EventEmitter();
-        this.state = 'hidden';
-        this.PepScreenSizeType = PepScreenSizeType;
-        this.displayText = null;
-        this.layoutService.onResize$.subscribe((size) => {
-            this.screenSize = size;
-        });
-    }
-    setChildrenParent(item, parent) {
-        item.parent = parent;
-        if (item.children && item.children.length > 0) {
-            item.children.forEach((child) => {
-                this.setChildrenParent(child, new PepMenuItemParent(item));
-            });
-        }
-    }
-    setItemsParent(items) {
-        if (items) {
-            items.forEach((item) => {
-                item.parent = null;
-                if (item.children && item.children.length > 0) {
-                    item.children.forEach((child) => {
-                        this.setChildrenParent(child, new PepMenuItemParent(item));
-                    });
-                }
-            });
-        }
-    }
-    updateText() {
-        if (this.type === 'select' || this.type === 'action-select') {
-            this.displayText = this.selectedItem
-                ? this.selectedItem.text
-                : this.text;
-        }
-        else {
-            this.displayText = this.text;
-        }
-    }
-    ngOnChanges(changes) {
-        if (this.hideOnEmptyItems) {
-            this.state =
-                !this.disabled &&
-                    this.items &&
-                    this.items.filter((item) => !item.disabled).length > 0
-                    ? 'visible'
-                    : 'hidden';
-        }
-        else {
-            this.state = 'visible';
-        }
-        if (this.type === 'select') {
-            if (this.selectedItem === null &&
-                this.items &&
-                this.items.length > 0) {
-                this.selectedItem = this.items[0];
-            }
-        }
-        this.updateText();
-    }
-    ngOnDestroy() {
-        // if (this.menuItemClick) {
-        //     this.menuItemClick.unsubscribe();
-        // }
-    }
-    onMenuClicked(event) {
-        this.menuClick.emit();
-    }
-    // private manipulateData(menuItem: PepMenuItem) {
-    //     menuItem.children = null;
-    //     if (menuItem.parent) {
-    //         menuItem.parent = new PepMenuItem(menuItem.parent);
-    //         this.manipulateData(menuItem.parent);
-    //     }
-    // }
-    onMenuItemClicked(click) {
-        this.selectedItem = click.source;
-        this.updateText();
-        // Manipulate click data because the data is dupplicate in parent.children
-        // const tmp = new PepMenuItem(click.source);
-        // this.manipulateData(tmp);
-        // click.source = tmp;
-        this.menuItemClick.emit(click);
-    }
-    animationDone() {
-        if (this.state === 'hidden') {
-            setTimeout(() => {
-                this.stateChange.emit({ state: this.state });
-            }, 500);
-        }
-    }
-    animationStart() {
-        if (this.state === 'visible') {
-            this.stateChange.emit({ state: this.state });
-        }
-    }
-    onMenuOpened() {
-        this.state = 'visible';
-        this.stateChange.emit({ state: this.state });
-    }
-    onMenuClosed() {
-        this.state = 'hidden';
-        this.stateChange.emit({ state: this.state });
-    }
-}
-PepMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepMenuComponent, deps: [{ token: i1$1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-PepMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepMenuComponent, selector: "pep-menu", inputs: { text: "text", iconName: "iconName", iconPosition: "iconPosition", type: "type", styleType: "styleType", sizeType: "sizeType", classNames: "classNames", xPosition: "xPosition", hideOnEmptyItems: "hideOnEmptyItems", items: "items", selectedItem: "selectedItem", disabled: "disabled" }, outputs: { stateChange: "stateChange", menuItemClick: "menuItemClick", menuClick: "menuClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"menu-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n\n    <ng-container *ngIf=\"hideOnEmptyItems then animationTemplate else regularTemplate\">\n    </ng-container>\n    <ng-template #animationTemplate>\n        <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n            [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS  }\"\n            pepRtlDirection pepMenuBlur (click)=\"onMenuClicked($event)\" [@slideInOut]=\"state\"\n            (@slideInOut.done)=\"animationDone()\" (@slideInOut.start)=\"animationStart()\"\n            [matMenuTriggerFor]=\"menu.childMenu\">\n            <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n            </ng-container>\n        </button>\n        <pep-menu-item #menu [type]=\"type\" [items]=\"items\" [selectedItem]=\"selectedItem\" [xPosition]=\"xPosition\"\n            (menuItemClick)=\"onMenuItemClicked($event)\">\n        </pep-menu-item>\n    </ng-template>\n    <ng-template #regularTemplate>\n        <ng-container *ngIf=\"items then menuTemplate else buttonTemplate\"></ng-container>\n        <ng-template #menuTemplate>\n            <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n                [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS, disabled: disabled }\"\n                pepRtlDirection pepMenuBlur [matMenuTriggerFor]=\"menu.childMenu\" [disabled]=\"disabled\"\n                (menuClick)=\"onMenuClicked($event)\" (menuOpened)=\"onMenuOpened()\" (menuClosed)=\"onMenuClosed()\">\n                <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n                </ng-container>\n            </button>\n            <pep-menu-item #menu [type]=\"type\" [items]=\"items\" [selectedItem]=\"selectedItem\" [xPosition]=\"xPosition\"\n                (menuItemClick)=\"onMenuItemClicked($event)\" ></pep-menu-item>\n        </ng-template>\n        <ng-template #buttonTemplate>\n            <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n                [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS, disabled: disabled }\"\n                pepRtlDirection pepMenuBlur (menuClick)=\"onMenuClicked($event)\" [disabled]=\"disabled\">\n                <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n                </ng-container>\n            </button>\n        </ng-template>\n    </ng-template>\n</div>\n\n<ng-template #triggerTemplate>\n    <mat-icon *ngIf=\"iconName && iconPosition === 'before'\">\n        <pep-icon name=\"{{ iconName }}\"></pep-icon>\n    </mat-icon>\n    <span *ngIf=\"displayText && screenSize <= PepScreenSizeType.SM\" class=\"ellipsis\"\n        [ngClass]=\"{ 'button-title-with-icon': iconName, 'icon-before': iconPosition === 'before' }\" [title]=\"displayText\">\n        {{ displayText }}\n    </span>\n    <mat-icon *ngIf=\"iconName  && iconPosition === 'after'\">\n        <pep-icon name=\"{{ iconName }}\"></pep-icon>\n    </mat-icon>\n</ng-template>", styles: [".menu-container .pep-button{display:flex;align-items:center;justify-content:center}\n"], 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: i3$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.PepMenuBlurDirective, selector: "[pepMenuBlur]" }, { kind: "directive", type: i1$1.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i1$2.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: PepMenuItemComponent, selector: "pep-menu-item", inputs: ["type", "parent", "items", "selectedItem", "xPosition", "subMenuIconName"], outputs: ["menuItemClick"] }], animations: [
-        trigger('slideInOut', [
-            state('hidden', style({
-                width: '0px',
-                padding: '0',
-                margin: '0',
-                minWidth: '0px',
-                opacity: 0,
-            })),
-            state('visible', style({
-                width: 'inherit',
-                opacity: 1,
-            })),
-            transition('close => open', animate('500ms ease-in')),
-            transition('open => close', animate('500ms ease-out')),
-        ]),
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pep-menu', animations: [
-                        trigger('slideInOut', [
-                            state('hidden', style({
-                                width: '0px',
-                                padding: '0',
-                                margin: '0',
-                                minWidth: '0px',
-                                opacity: 0,
-                            })),
-                            state('visible', style({
-                                width: 'inherit',
-                                opacity: 1,
-                            })),
-                            transition('close => open', animate('500ms ease-in')),
-                            transition('open => close', animate('500ms ease-out')),
-                        ]),
-                    ], template: "<div class=\"menu-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n\n    <ng-container *ngIf=\"hideOnEmptyItems then animationTemplate else regularTemplate\">\n    </ng-container>\n    <ng-template #animationTemplate>\n        <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n            [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS  }\"\n            pepRtlDirection pepMenuBlur (click)=\"onMenuClicked($event)\" [@slideInOut]=\"state\"\n            (@slideInOut.done)=\"animationDone()\" (@slideInOut.start)=\"animationStart()\"\n            [matMenuTriggerFor]=\"menu.childMenu\">\n            <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n            </ng-container>\n        </button>\n        <pep-menu-item #menu [type]=\"type\" [items]=\"items\" [selectedItem]=\"selectedItem\" [xPosition]=\"xPosition\"\n            (menuItemClick)=\"onMenuItemClicked($event)\">\n        </pep-menu-item>\n    </ng-template>\n    <ng-template #regularTemplate>\n        <ng-container *ngIf=\"items then menuTemplate else buttonTemplate\"></ng-container>\n        <ng-template #menuTemplate>\n            <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n                [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS, disabled: disabled }\"\n                pepRtlDirection pepMenuBlur [matMenuTriggerFor]=\"menu.childMenu\" [disabled]=\"disabled\"\n                (menuClick)=\"onMenuClicked($event)\" (menuOpened)=\"onMenuOpened()\" (menuClosed)=\"onMenuClosed()\">\n                <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n                </ng-container>\n            </button>\n            <pep-menu-item #menu [type]=\"type\" [items]=\"items\" [selectedItem]=\"selectedItem\" [xPosition]=\"xPosition\"\n                (menuItemClick)=\"onMenuItemClicked($event)\" ></pep-menu-item>\n        </ng-template>\n        <ng-template #buttonTemplate>\n            <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n                [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS, disabled: disabled }\"\n                pepRtlDirection pepMenuBlur (menuClick)=\"onMenuClicked($event)\" [disabled]=\"disabled\">\n                <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n                </ng-container>\n            </button>\n        </ng-template>\n    </ng-template>\n</div>\n\n<ng-template #triggerTemplate>\n    <mat-icon *ngIf=\"iconName && iconPosition === 'before'\">\n        <pep-icon name=\"{{ iconName }}\"></pep-icon>\n    </mat-icon>\n    <span *ngIf=\"displayText && screenSize <= PepScreenSizeType.SM\" class=\"ellipsis\"\n        [ngClass]=\"{ 'button-title-with-icon': iconName, 'icon-before': iconPosition === 'before' }\" [title]=\"displayText\">\n        {{ displayText }}\n    </span>\n    <mat-icon *ngIf=\"iconName  && iconPosition === 'after'\">\n        <pep-icon name=\"{{ iconName }}\"></pep-icon>\n    </mat-icon>\n</ng-template>", styles: [".menu-container .pep-button{display:flex;align-items:center;justify-content:center}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.PepLayoutService }]; }, propDecorators: { text: [{
-                type: Input
-            }], iconName: [{
-                type: Input
-            }], iconPosition: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], styleType: [{
-                type: Input
-            }], sizeType: [{
-                type: Input
-            }], classNames: [{
-                type: Input
-            }], xPosition: [{
-                type: Input
-            }], hideOnEmptyItems: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], selectedItem: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], stateChange: [{
-                type: Output
-            }], menuItemClick: [{
-                type: Output
-            }], menuClick: [{
-                type: Output
-            }] } });
-
-class PepMenuModule {
-    constructor(pepIconRegistry) {
-        this.pepIconRegistry = pepIconRegistry;
-        this.pepIconRegistry.registerIcons([
-            pepIconSystemMenu,
-            pepIconArrowRight,
-        ]);
-    }
-}
-PepMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepMenuModule, deps: [{ token: i1$2.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
-PepMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PepMenuModule, declarations: [PepMenuComponent, PepMenuItemComponent], imports: [CommonModule,
-        // Material modules,
-        MatCommonModule,
-        MatFormFieldModule,
-        MatMenuModule,
-        MatIconModule,
-        // ngx-lib modules
-        PepNgxLibModule,
-        PepIconModule], exports: [PepMenuComponent] });
-PepMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepMenuModule, imports: [CommonModule,
-        // Material modules,
-        MatCommonModule,
-        MatFormFieldModule,
-        MatMenuModule,
-        MatIconModule,
-        // ngx-lib modules
-        PepNgxLibModule,
-        PepIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepMenuModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        // Material modules,
-                        MatCommonModule,
-                        MatFormFieldModule,
-                        MatMenuModule,
-                        MatIconModule,
-                        // ngx-lib modules
-                        PepNgxLibModule,
-                        PepIconModule,
-                    ],
-                    exports: [PepMenuComponent],
-                    declarations: [PepMenuComponent, PepMenuItemComponent],
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.PepIconRegistry }]; } });
-
-/*
- * Public API Surface of ngx-lib/menu
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { PepMenuComponent, PepMenuItem, PepMenuItemParent, PepMenuModule };
-//# sourceMappingURL=pepperi-addons-ngx-lib-menu.mjs.map

package/fesm2015/pepperi-addons-ngx-lib-page-layout.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"pepperi-addons-ngx-lib-page-layout.mjs","sources":["../../../projects/ngx-lib/page-layout/page-layout.component.ts","../../../projects/ngx-lib/page-layout/page-layout.component.html","../../../projects/ngx-lib/page-layout/page-layout.module.ts","../../../projects/ngx-lib/page-layout/public-api.ts","../../../projects/ngx-lib/page-layout/pepperi-addons-ngx-lib-page-layout.ts"],"sourcesContent":["import {\n    AfterContentInit,\n    ChangeDetectorRef,\n    ContentChild,\n    ElementRef,\n    Renderer2,\n    ViewChild,\n} from '@angular/core';\nimport {\n    AfterViewInit,\n    Component,\n    EventEmitter,\n    Input,\n    Output,\n} from '@angular/core';\nimport {\n    PepCustomizationService,\n    PepLayoutService,\n    PepScreenSizeType,\n} from '@pepperi-addons/ngx-lib';\n\n@Component({\n    selector: 'pep-page-layout',\n    templateUrl: './page-layout.component.html',\n    styleUrls: ['./page-layout.component.scss', './page-layout.component.theme.scss'],\n})\nexport class PepPageLayoutComponent implements AfterViewInit, AfterContentInit {\n    @Input() addPadding = false;\n    @Input() showShadow = false;\n    \n    screenSize: PepScreenSizeType;\n\n    constructor(\n        public customizationService: PepCustomizationService,\n        public layoutService: PepLayoutService,\n        private cdRef: ChangeDetectorRef,\n        private hostElement: ElementRef,\n        private renderer: Renderer2,\n    ) {\n        this.renderer.addClass(this.hostElement.nativeElement, 'pep-page-layout');\n    }\n\n    ngAfterViewInit(): void {\n        this.layoutService.onResize$.subscribe((size: PepScreenSizeType) => {\n            this.screenSize = size;\n        });\n\n    }\n\n    ngAfterContentInit() {\n        //\n    }\n\n}\n","<div class=\"pep-page-header-layout\">\n    <ng-content select=\"[pep-header-area]\"></ng-content>\n</div>\n<div class=\"pep-page-side-layout\" [ngClass]=\"{ 'show-shadow': showShadow }\">\n    <ng-content select=\"pep-side-bar\"></ng-content>\n    <ng-content select=\"[pep-side-area]\"></ng-content>\n</div>\n<div class=\"pep-page-side-layout side-layout-end\" [ngClass]=\"{ 'show-shadow': showShadow }\">\n    <ng-content select=\"pep-side-bar[position='end']\"></ng-content>\n    <ng-content select=\"[pep-side-area-end]\"></ng-content>\n</div>\n<div class=\"pep-page-main-layout\" [ngClass]=\"{ 'add-padding': addPadding }\">\n    <div class=\"pep-top-area\">\n        <ng-content select=\"[pep-top-area]\"></ng-content>\n    </div>\n    <div class=\"pep-main-area\">\n        <ng-content select=\"[pep-main-area]\"></ng-content>\n    </div>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\n\nimport { PepPageLayoutComponent } from './page-layout.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        // Material modules,\n        MatCommonModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n    ],\n    exports: [PepPageLayoutComponent],\n    declarations: [PepPageLayoutComponent],\n})\nexport class PepPageLayoutModule { }\n","/*\n * Public API Surface of ngx-lib/page-layout\n */\nexport * from './page-layout.module';\nexport * from './page-layout.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}