@pepperi-addons/ngx-lib 0.2.59-query-builder.7 → 0.2.61

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

@@ -155,7 +155,7 @@ class PepMenuComponent {
 PepMenuComponent.decorators = [
     { type: Component, args: [{
                 selector: 'pep-menu',
-                template: "<div class=\"menu-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\r\n\r\n    <ng-container *ngIf=\"hideOnEmptyItems then animationTemplate else regularTemplate\">\r\n    </ng-container>\r\n    <ng-template #animationTemplate>\r\n        <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\r\n            [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS  }\"\r\n            pepRtlDirection pepMenuBlur (click)=\"onMenuClicked($event)\" [@slideInOut]=\"state\"\r\n            (@slideInOut.done)=\"animationDone()\" (@slideInOut.start)=\"animationStart()\"\r\n            [matMenuTriggerFor]=\"menu.childMenu\">\r\n            <ng-container *ngTemplateOutlet=\"triggerTemplate\">\r\n            </ng-container>\r\n        </button>\r\n        <pep-menu-item #menu [type]=\"type\" [items]=\"items\" [selectedItem]=\"selectedItem\" [xPosition]=\"xPosition\"\r\n            (menuItemClick)=\"onMenuItemClicked($event)\">\r\n        </pep-menu-item>\r\n    </ng-template>\r\n    <ng-template #regularTemplate>\r\n        <ng-container *ngIf=\"items then menuTemplate else buttonTemplate\"></ng-container>\r\n        <ng-template #menuTemplate>\r\n            <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\r\n                [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS, disabled: disabled }\"\r\n                pepRtlDirection pepMenuBlur (menuClick)=\"onMenuClicked($event)\" [disabled]=\"disabled\"\r\n                [matMenuTriggerFor]=\"menu.childMenu\">\r\n                <ng-container *ngTemplateOutlet=\"triggerTemplate\">\r\n                </ng-container>\r\n            </button>\r\n            <pep-menu-item #menu [type]=\"type\" [items]=\"items\" [selectedItem]=\"selectedItem\" [xPosition]=\"xPosition\"\r\n                (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu-item>\r\n        </ng-template>\r\n        <ng-template #buttonTemplate>\r\n            <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\r\n                [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS, disabled: disabled }\"\r\n                pepRtlDirection pepMenuBlur (menuClick)=\"onMenuClicked($event)\" [disabled]=\"disabled\">\r\n                <ng-container *ngTemplateOutlet=\"triggerTemplate\">\r\n                </ng-container>\r\n            </button>\r\n        </ng-template>\r\n    </ng-template>\r\n</div>\r\n\r\n<ng-template #triggerTemplate>\r\n    <span *ngIf=\"displayText && screenSize <= PepScreenSizeType.SM\" class=\"ellipsis\"\r\n        [ngClass]=\"{ 'button-title-with-icon': iconName }\" [title]=\"displayText\">\r\n        {{ displayText }}\r\n    </span>\r\n    <mat-icon *ngIf=\"iconName\">\r\n        <pep-icon name=\"{{ iconName }}\"></pep-icon>\r\n    </mat-icon>\r\n</ng-template>",
+                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 (menuClick)=\"onMenuClicked($event)\" [disabled]=\"disabled\"\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)\"></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    <span *ngIf=\"displayText && screenSize <= PepScreenSizeType.SM\" class=\"ellipsis\"\n        [ngClass]=\"{ 'button-title-with-icon': iconName }\" [title]=\"displayText\">\n        {{ displayText }}\n    </span>\n    <mat-icon *ngIf=\"iconName\">\n        <pep-icon name=\"{{ iconName }}\"></pep-icon>\n    </mat-icon>\n</ng-template>",
                 animations: [
                     trigger('slideInOut', [
                         state('hidden', style({
@@ -281,7 +281,7 @@ class PepMenuItemComponent {
 PepMenuItemComponent.decorators = [
     { type: Component, args: [{
                 selector: 'pep-menu-item',
-                template: "<mat-menu #childMenu=\"matMenu\" xPosition=\"{{ xPosition }}\" class=\"pep-{{type}}-menu\">\r\n    <ng-container *ngFor=\"let menuItem of items\">\r\n        <ng-container *ngIf=\"!menuItem.hidden\">\r\n            <ng-container *ngIf=\"menuItem.type === 'splitter'; then splitterBlock; else buttonBlock\"></ng-container>\r\n            <ng-template #splitterBlock>\r\n                <div mat-menu-item class=\"splitter\"></div>\r\n            </ng-template>\r\n\r\n            <ng-template #buttonBlock>\r\n                <ng-container\r\n                    *ngIf=\"type !== 'select' && menuItem.children?.length > 0; then childrenBlock; else regularBlock\">\r\n                </ng-container>\r\n                <ng-template #childrenBlock>\r\n                    <button mat-menu-item (click)=\"onMenuItemClicked(menuItem)\" [matMenuTriggerFor]=\"menu.childMenu\"\r\n                        title=\"{{ menuItem.text }}\" pepRtlDirection [disabled]=\"menuItem.disabled\"\r\n                        [ngClass]=\"{ selected: type === 'action-select' && menuItem.selected, disabled: menuItem.disabled }\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {\r\n                            itemIconName: menuItem.iconName,\r\n                            itemText: menuItem.text,\r\n                            itemType: menuItem.type,\r\n                            hasChildren: true\r\n                        }\"></ng-container>\r\n                    </button>\r\n                    <pep-menu-item #menu [type]=\"type\" [items]=\"menuItem.children\" [parent]=\"menuItem\"\r\n                        (menuItemClick)=\"onChildClicked($event)\">\r\n                    </pep-menu-item>\r\n                </ng-template>\r\n                <ng-template #regularBlock>\r\n                    <button mat-menu-item (click)=\"onMenuItemClicked(menuItem)\" title=\"{{ menuItem.text }}\"\r\n                        pepRtlDirection [disabled]=\"menuItem.disabled\"\r\n                        [ngClass]=\"{ selected: (type === 'select' || type === 'action-select') && menuItem.selected, disabled: menuItem.disabled }\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {\r\n                            itemIconName: menuItem.iconName,\r\n                            itemText: menuItem.text,\r\n                            itemType: menuItem.type,\r\n                            hasChildren: false\r\n                        }\"></ng-container>\r\n                    </button>\r\n                </ng-template>\r\n            </ng-template>\r\n        </ng-container>\r\n    </ng-container>\r\n</mat-menu>\r\n\r\n<ng-template #itemTemplate let-itemIconName=\"itemIconName\" let-itemText=\"itemText\" let-itemType=\"itemType\"\r\n    let-hasChildren=\"hasChildren\">\r\n    <ng-container>\r\n        <mat-icon *ngIf=\"itemIconName\" class=\"pull-left flip\">\r\n            <pep-icon name=\"{{itemIconName}}\"></pep-icon>\r\n        </mat-icon>\r\n        <span *ngIf=\"itemText\" class=\"pull-left flip title ellipsis\"\r\n            [ngClass]=\"{ 'spacing-from-icon': itemIconName, 'spacing-from-submenu-trigger': hasChildren }\"\r\n            [title]=\"itemText\">\r\n            {{ itemText }}\r\n        </span>\r\n        <mat-icon *ngIf=\"hasChildren\" class=\"pull-left flip submenu-trigger\"\r\n            [ngClass]=\"{ 'rotate': xPosition === 'before' }\">\r\n            <pep-icon name=\"{{ subMenuIconName }}\"></pep-icon>\r\n        </mat-icon>\r\n    </ng-container>\r\n</ng-template>",
+                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                            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                            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-itemText=\"itemText\" let-itemType=\"itemType\"\n    let-hasChildren=\"hasChildren\">\n    <ng-container>\n        <mat-icon *ngIf=\"itemIconName\" 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=\"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: [".mat-menu-item-submenu-trigger:after{display:none}.mat-menu-item .title{margin:0 .25rem;margin:0 var(--pep-spacing-xs,.25rem)}.mat-menu-item .title.spacing-from-icon{margin:0 .5rem;margin:0 var(--pep-spacing-sm,.5rem)}.mat-menu-item .title.spacing-from-submenu-trigger{-webkit-padding-end:1rem;padding-inline-end:1rem;-webkit-padding-end:var(--pep-spacing-lg,1rem);padding-inline-end:var(--pep-spacing-lg,1rem)}.mat-menu-item .mat-icon{margin:0}.mat-menu-item .submenu-trigger{position:absolute;right:.5rem;right:var(--pep-spacing-sm,.5rem);width:1rem}.mat-menu-item .submenu-trigger.rotate{transform:rotate(180deg)}.mat-menu-item.splitter{height:1px!important;margin:.5rem 0;margin:var(--pep-spacing-sm,.5rem) 0}.mat-menu-item[dir=rtl] .submenu-trigger{right:unset;left:.5rem;left:var(--pep-spacing-sm,.5rem);transform:rotate(180deg)}.mat-menu-item[dir=rtl] .submenu-trigger.rotate{transform:rotate(0deg)}.mat-menu-item-submenu-trigger:after{width:unset;height:unset;transform:unset}"]
             },] }
 ];

package/fesm2015/pepperi-addons-ngx-lib-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-lib-menu.js","sources":["../../../projects/ngx-lib/menu/menu.model.ts","../../../projects/ngx-lib/menu/menu.component.ts","../../../projects/ngx-lib/menu/menu-item.component.ts","../../../projects/ngx-lib/menu/menu.module.ts","../../../projects/ngx-lib/menu/public-api.ts","../../../projects/ngx-lib/menu/pepperi-addons-ngx-lib-menu.ts"],"sourcesContent":["export type PepMenuType = 'action' | 'action-select' | 'select';\r\n\r\nexport type PepMenuItemType = 'regular' | 'splitter';\r\n\r\nexport type PepMenuStateType = 'visible' | 'hidden';\r\n\r\nexport class PepMenuItemParent {\r\n    key: string;\r\n    parent?: PepMenuItemParent = null;\r\n\r\n    constructor(data: PepMenuItem) {\r\n        this.key = data.key;\r\n        this.parent = data.parent;\r\n    }\r\n}\r\nexport class PepMenuItem {\r\n    key: string;\r\n    text?: string;\r\n    disabled?: boolean = false;\r\n    hidden?: boolean = false;\r\n    iconName?: string = null;\r\n    type?: PepMenuItemType = 'regular';\r\n    children?: Array<PepMenuItem> = null;\r\n    parent?: PepMenuItemParent = null;\r\n\r\n    constructor(data: Partial<PepMenuItem>) {\r\n        Object.assign(this, data);\r\n    }\r\n}\r\n\r\nexport interface IPepMenuItemClickEvent {\r\n    source: PepMenuItem;\r\n}\r\n\r\nexport interface IPepMenuStateChangeEvent {\r\n    state: PepMenuStateType;\r\n}\r\n","import {\r\n    Component,\r\n    Input,\r\n    Output,\r\n    EventEmitter,\r\n    OnChanges,\r\n    OnDestroy,\r\n} from '@angular/core';\r\nimport {\r\n    trigger,\r\n    state,\r\n    style,\r\n    transition,\r\n    animate,\r\n} from '@angular/animations';\r\nimport {\r\n    PepLayoutService,\r\n    PepStyleType,\r\n    PepSizeType,\r\n    PepScreenSizeType,\r\n} from '@pepperi-addons/ngx-lib';\r\nimport { pepIconSystemMenu, PepIconType } from '@pepperi-addons/ngx-lib/icon';\r\nimport {\r\n    PepMenuItem,\r\n    IPepMenuItemClickEvent,\r\n    IPepMenuStateChangeEvent,\r\n    PepMenuStateType,\r\n    PepMenuType,\r\n    PepMenuItemParent,\r\n} from './menu.model';\r\n\r\n@Component({\r\n    selector: 'pep-menu',\r\n    templateUrl: './menu.component.html',\r\n    styleUrls: ['./menu.component.scss'],\r\n    animations: [\r\n        trigger('slideInOut', [\r\n            state(\r\n                'hidden',\r\n                style({\r\n                    width: '0px',\r\n                    padding: '0',\r\n                    margin: '0',\r\n                    minWidth: '0px',\r\n                    opacity: 0,\r\n                })\r\n            ),\r\n            state(\r\n                'visible',\r\n                style({\r\n                    width: 'inherit',\r\n                    opacity: 1,\r\n                })\r\n            ),\r\n            transition('close => open', animate('500ms ease-in')),\r\n            transition('open => close', animate('500ms ease-out')),\r\n        ]),\r\n    ],\r\n})\r\nexport class PepMenuComponent implements OnChanges, OnDestroy {\r\n    @Input() text: string = null;\r\n    /**\r\n     * The icon name to show on the menu. look in (@link icon -> All icons)\r\n     *\r\n     * @type {PepIconType} See {@link PepIconType}\r\n     * @memberof PepMenuComponent\r\n     */\r\n    @Input() iconName: PepIconType = pepIconSystemMenu.name;\r\n    @Input() type: PepMenuType = 'action';\r\n    @Input() styleType: PepStyleType = 'weak';\r\n    @Input() sizeType: PepSizeType = 'md';\r\n    @Input() classNames = '';\r\n    @Input() xPosition: 'before' | 'after' = 'after';\r\n    @Input() hideOnEmptyItems = false;\r\n\r\n    private _items: Array<PepMenuItem> = null;\r\n    @Input()\r\n    set items(items: Array<PepMenuItem>) {\r\n        this.setItemsParent(items);\r\n        this._items = items;\r\n    }\r\n    get items(): Array<PepMenuItem> {\r\n        return this._items;\r\n    }\r\n\r\n    @Input() selectedItem: PepMenuItem = null;\r\n    @Input() disabled = false;\r\n\r\n    @Output()\r\n    stateChange: EventEmitter<IPepMenuStateChangeEvent> = new EventEmitter<IPepMenuStateChangeEvent>();\r\n    @Output()\r\n    menuItemClick: EventEmitter<IPepMenuItemClickEvent> = new EventEmitter<IPepMenuItemClickEvent>();\r\n    @Output() menuClick: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n    state: PepMenuStateType = 'hidden';\r\n\r\n    PepScreenSizeType = PepScreenSizeType;\r\n    screenSize: PepScreenSizeType;\r\n\r\n    displayText: string = null;\r\n\r\n    constructor(public layoutService: PepLayoutService) {\r\n        this.layoutService.onResize$.subscribe((size) => {\r\n            this.screenSize = size;\r\n        });\r\n    }\r\n\r\n    private setChildrenParent(\r\n        item: PepMenuItem,\r\n        parent: PepMenuItemParent\r\n    ): void {\r\n        item.parent = parent;\r\n\r\n        if (item.children && item.children.length > 0) {\r\n            item.children.forEach((child) => {\r\n                this.setChildrenParent(child, new PepMenuItemParent(item));\r\n            });\r\n        }\r\n    }\r\n\r\n    private setItemsParent(items: Array<PepMenuItem>): void {\r\n        if (items) {\r\n            items.forEach((item) => {\r\n                item.parent = null;\r\n\r\n                if (item.children && item.children.length > 0) {\r\n                    item.children.forEach((child) => {\r\n                        this.setChildrenParent(\r\n                            child,\r\n                            new PepMenuItemParent(item)\r\n                        );\r\n                    });\r\n                }\r\n            });\r\n        }\r\n    }\r\n\r\n    private updateText(): void {\r\n        if (this.type === 'select' || this.type === 'action-select') {\r\n            this.displayText = this.selectedItem\r\n                ? this.selectedItem.text\r\n                : this.text;\r\n        } else {\r\n            this.displayText = this.text;\r\n        }\r\n    }\r\n\r\n    ngOnChanges(changes): void {\r\n        if (this.hideOnEmptyItems) {\r\n            this.state =\r\n                !this.disabled &&\r\n                    this.items &&\r\n                    this.items.filter((item) => !item.disabled).length > 0\r\n                    ? 'visible'\r\n                    : 'hidden';\r\n        } else {\r\n            this.state = 'visible';\r\n        }\r\n\r\n        if (this.type === 'select') {\r\n            if (\r\n                this.selectedItem === null &&\r\n                this.items &&\r\n                this.items.length > 0\r\n            ) {\r\n                this.selectedItem = this.items[0];\r\n            }\r\n        }\r\n\r\n        this.updateText();\r\n    }\r\n\r\n    ngOnDestroy(): void {\r\n        // if (this.menuItemClick) {\r\n        //     this.menuItemClick.unsubscribe();\r\n        // }\r\n    }\r\n\r\n    onMenuClicked(event): void {\r\n        this.menuClick.emit();\r\n    }\r\n\r\n    // private manipulateData(menuItem: PepMenuItem) {\r\n    //     menuItem.children = null;\r\n\r\n    //     if (menuItem.parent) {\r\n    //         menuItem.parent = new PepMenuItem(menuItem.parent);\r\n    //         this.manipulateData(menuItem.parent);\r\n    //     }\r\n    // }\r\n\r\n    onMenuItemClicked(click: IPepMenuItemClickEvent): void {\r\n        this.selectedItem = click.source;\r\n        this.updateText();\r\n\r\n        // Manipulate click data because the data is dupplicate in parent.children\r\n        // const tmp = new PepMenuItem(click.source);\r\n        // this.manipulateData(tmp);\r\n        // click.source = tmp;\r\n\r\n        this.menuItemClick.emit(click);\r\n    }\r\n\r\n    animationDone(): void {\r\n        if (this.state === 'hidden') {\r\n            setTimeout(() => {\r\n                this.stateChange.emit({ state: this.state });\r\n            }, 500);\r\n        }\r\n    }\r\n\r\n    animationStart(): void {\r\n        if (this.state === 'visible') {\r\n            this.stateChange.emit({ state: this.state });\r\n        }\r\n    }\r\n}\r\n","import {\r\n    Component,\r\n    Input,\r\n    Output,\r\n    EventEmitter,\r\n    OnDestroy,\r\n    ViewChild,\r\n} from '@angular/core';\r\nimport { pepIconArrowRight } from '@pepperi-addons/ngx-lib/icon';\r\nimport {\r\n    PepMenuItem,\r\n    IPepMenuItemClickEvent,\r\n    PepMenuType,\r\n    PepMenuItemParent,\r\n} from './menu.model';\r\n\r\nexport class PepInternalMenuItem extends PepMenuItem {\r\n    selected?: boolean = false;\r\n}\r\n\r\n@Component({\r\n    selector: 'pep-menu-item',\r\n    templateUrl: './menu-item.component.html',\r\n    styleUrls: ['./menu-item.component.scss'],\r\n})\r\nexport class PepMenuItemComponent implements OnDestroy {\r\n    @Input() type: PepMenuType = 'action';\r\n\r\n    @Input() parent: PepMenuItemParent = null;\r\n    @Input() items: Array<PepInternalMenuItem> = [];\r\n\r\n    private _selectedItem: PepInternalMenuItem = null;\r\n    @Input()\r\n    set selectedItem(selectedItem: PepInternalMenuItem) {\r\n        this.updateSelectedItem(selectedItem);\r\n    }\r\n    get selectedItem(): PepInternalMenuItem {\r\n        return this._selectedItem;\r\n    }\r\n\r\n    @Input() xPosition: 'before' | 'after' = 'after';\r\n    @Input() subMenuIconName: string = pepIconArrowRight.name;\r\n\r\n    @ViewChild('childMenu', { static: true }) public childMenu: any;\r\n\r\n    @Output()\r\n    menuItemClick: EventEmitter<IPepMenuItemClickEvent> = new EventEmitter<IPepMenuItemClickEvent>();\r\n\r\n    ngOnDestroy(): void {\r\n        // if (this.menuItemClick) {\r\n        //     this.menuItemClick.unsubscribe();\r\n        // }\r\n    }\r\n\r\n    private clearSelectedItem(selectedItem: PepInternalMenuItem): void {\r\n        if (this.items) {\r\n            this.items.forEach((item) => {\r\n                item.selected = selectedItem?.key === item.key;\r\n\r\n                if (item.children) {\r\n                    item.children.forEach((child) => {\r\n                        this.clearSelectedChildren(child, selectedItem);\r\n                    });\r\n                }\r\n            });\r\n        }\r\n    }\r\n\r\n    private clearSelectedChildren(\r\n        item: PepInternalMenuItem,\r\n        selectedItem: PepInternalMenuItem\r\n    ): void {\r\n        item.selected = selectedItem?.key === item.key;\r\n\r\n        if (item.children) {\r\n            item.children.forEach((child) => {\r\n                this.clearSelectedChildren(child, selectedItem);\r\n            });\r\n        }\r\n    }\r\n\r\n    private selectParentAndChildren(\r\n        items: Array<PepInternalMenuItem>,\r\n        parentsKeys: Array<string>\r\n    ) {\r\n        if (parentsKeys.length > 0) {\r\n            const key = parentsKeys.pop();\r\n            const selectedParent = items.find((item) => item.key === key);\r\n\r\n            if (selectedParent) {\r\n                selectedParent.selected = true;\r\n                this.selectParentAndChildren(\r\n                    selectedParent.children,\r\n                    parentsKeys\r\n                );\r\n            }\r\n        }\r\n    }\r\n\r\n    private updateSelectedParent(\r\n        parentItem: PepMenuItemParent,\r\n        parentsKeys: Array<string>\r\n    ) {\r\n        parentsKeys.push(parentItem.key);\r\n\r\n        if (parentItem.parent) {\r\n            this.updateSelectedParent(parentItem.parent, parentsKeys);\r\n        } else {\r\n            this.selectParentAndChildren(this.items, parentsKeys);\r\n        }\r\n    }\r\n\r\n    private updateSelectedItem(selectedItem: PepInternalMenuItem) {\r\n        this.clearSelectedItem(selectedItem);\r\n        this._selectedItem = selectedItem;\r\n\r\n        if (selectedItem && selectedItem.parent) {\r\n            this.updateSelectedParent(selectedItem.parent, []);\r\n        }\r\n    }\r\n\r\n    onChildClicked(click: IPepMenuItemClickEvent): void {\r\n        // click.source.selected = true;\r\n        this.menuItemClick.emit(click);\r\n    }\r\n\r\n    onMenuItemClicked(item: PepMenuItem): void {\r\n        // item.selected = true;\r\n        this.menuItemClick.emit({ source: item });\r\n    }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\nimport { MatCommonModule } from '@angular/material/core';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatMenuModule } from '@angular/material/menu';\r\nimport { MatIconModule } from '@angular/material/icon';\r\n\r\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\r\nimport {\r\n    PepIconModule,\r\n    PepIconRegistry,\r\n    pepIconSystemMenu,\r\n    pepIconArrowRight,\r\n} from '@pepperi-addons/ngx-lib/icon';\r\n\r\nimport { PepMenuComponent } from './menu.component';\r\nimport { PepMenuItemComponent } from './menu-item.component';\r\n\r\n@NgModule({\r\n    imports: [\r\n        CommonModule,\r\n        // Material modules,\r\n        MatCommonModule,\r\n        MatFormFieldModule,\r\n        MatMenuModule,\r\n        MatIconModule,\r\n        // ngx-lib modules\r\n        PepNgxLibModule,\r\n        PepIconModule,\r\n    ],\r\n    exports: [PepMenuComponent],\r\n    declarations: [PepMenuComponent, PepMenuItemComponent],\r\n})\r\nexport class PepMenuModule {\r\n    constructor(private pepIconRegistry: PepIconRegistry) {\r\n        this.pepIconRegistry.registerIcons([\r\n            pepIconSystemMenu,\r\n            pepIconArrowRight,\r\n        ]);\r\n    }\r\n}\r\n","/*\r\n * Public API Surface of ngx-lib/menu\r\n */\r\nexport * from './menu.module';\r\nexport * from './menu.model';\r\nexport * from './menu.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n\nexport {PepMenuItemComponent as ɵa} from './menu-item.component';"],"names":[],"mappings":"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"}
+{"version":3,"file":"pepperi-addons-ngx-lib-menu.js","sources":["../../../projects/ngx-lib/menu/menu.model.ts","../../../projects/ngx-lib/menu/menu.component.ts","../../../projects/ngx-lib/menu/menu-item.component.ts","../../../projects/ngx-lib/menu/menu.module.ts","../../../projects/ngx-lib/menu/public-api.ts","../../../projects/ngx-lib/menu/pepperi-addons-ngx-lib-menu.ts"],"sourcesContent":["export type PepMenuType = 'action' | 'action-select' | 'select';\n\nexport type PepMenuItemType = 'regular' | 'splitter';\n\nexport type PepMenuStateType = 'visible' | 'hidden';\n\nexport class PepMenuItemParent {\n    key: string;\n    parent?: PepMenuItemParent = null;\n\n    constructor(data: PepMenuItem) {\n        this.key = data.key;\n        this.parent = data.parent;\n    }\n}\nexport class PepMenuItem {\n    key: string;\n    text?: string;\n    disabled?: boolean = false;\n    hidden?: boolean = false;\n    iconName?: string = null;\n    type?: PepMenuItemType = 'regular';\n    children?: Array<PepMenuItem> = null;\n    parent?: PepMenuItemParent = null;\n\n    constructor(data: Partial<PepMenuItem>) {\n        Object.assign(this, data);\n    }\n}\n\nexport interface IPepMenuItemClickEvent {\n    source: PepMenuItem;\n}\n\nexport interface IPepMenuStateChangeEvent {\n    state: PepMenuStateType;\n}\n","import {\n    Component,\n    Input,\n    Output,\n    EventEmitter,\n    OnChanges,\n    OnDestroy,\n} from '@angular/core';\nimport {\n    trigger,\n    state,\n    style,\n    transition,\n    animate,\n} from '@angular/animations';\nimport {\n    PepLayoutService,\n    PepStyleType,\n    PepSizeType,\n    PepScreenSizeType,\n} from '@pepperi-addons/ngx-lib';\nimport { pepIconSystemMenu, PepIconType } from '@pepperi-addons/ngx-lib/icon';\nimport {\n    PepMenuItem,\n    IPepMenuItemClickEvent,\n    IPepMenuStateChangeEvent,\n    PepMenuStateType,\n    PepMenuType,\n    PepMenuItemParent,\n} from './menu.model';\n\n@Component({\n    selector: 'pep-menu',\n    templateUrl: './menu.component.html',\n    styleUrls: ['./menu.component.scss'],\n    animations: [\n        trigger('slideInOut', [\n            state(\n                'hidden',\n                style({\n                    width: '0px',\n                    padding: '0',\n                    margin: '0',\n                    minWidth: '0px',\n                    opacity: 0,\n                })\n            ),\n            state(\n                'visible',\n                style({\n                    width: 'inherit',\n                    opacity: 1,\n                })\n            ),\n            transition('close => open', animate('500ms ease-in')),\n            transition('open => close', animate('500ms ease-out')),\n        ]),\n    ],\n})\nexport class PepMenuComponent implements OnChanges, OnDestroy {\n    @Input() text: string = null;\n    /**\n     * The icon name to show on the menu. look in (@link icon -> All icons)\n     *\n     * @type {PepIconType} See {@link PepIconType}\n     * @memberof PepMenuComponent\n     */\n    @Input() iconName: PepIconType = pepIconSystemMenu.name;\n    @Input() type: PepMenuType = 'action';\n    @Input() styleType: PepStyleType = 'weak';\n    @Input() sizeType: PepSizeType = 'md';\n    @Input() classNames = '';\n    @Input() xPosition: 'before' | 'after' = 'after';\n    @Input() hideOnEmptyItems = false;\n\n    private _items: Array<PepMenuItem> = null;\n    @Input()\n    set items(items: Array<PepMenuItem>) {\n        this.setItemsParent(items);\n        this._items = items;\n    }\n    get items(): Array<PepMenuItem> {\n        return this._items;\n    }\n\n    @Input() selectedItem: PepMenuItem = null;\n    @Input() disabled = false;\n\n    @Output()\n    stateChange: EventEmitter<IPepMenuStateChangeEvent> = new EventEmitter<IPepMenuStateChangeEvent>();\n    @Output()\n    menuItemClick: EventEmitter<IPepMenuItemClickEvent> = new EventEmitter<IPepMenuItemClickEvent>();\n    @Output() menuClick: EventEmitter<void> = new EventEmitter<void>();\n\n    state: PepMenuStateType = 'hidden';\n\n    PepScreenSizeType = PepScreenSizeType;\n    screenSize: PepScreenSizeType;\n\n    displayText: string = null;\n\n    constructor(public layoutService: PepLayoutService) {\n        this.layoutService.onResize$.subscribe((size) => {\n            this.screenSize = size;\n        });\n    }\n\n    private setChildrenParent(\n        item: PepMenuItem,\n        parent: PepMenuItemParent\n    ): void {\n        item.parent = parent;\n\n        if (item.children && item.children.length > 0) {\n            item.children.forEach((child) => {\n                this.setChildrenParent(child, new PepMenuItemParent(item));\n            });\n        }\n    }\n\n    private setItemsParent(items: Array<PepMenuItem>): void {\n        if (items) {\n            items.forEach((item) => {\n                item.parent = null;\n\n                if (item.children && item.children.length > 0) {\n                    item.children.forEach((child) => {\n                        this.setChildrenParent(\n                            child,\n                            new PepMenuItemParent(item)\n                        );\n                    });\n                }\n            });\n        }\n    }\n\n    private updateText(): void {\n        if (this.type === 'select' || this.type === 'action-select') {\n            this.displayText = this.selectedItem\n                ? this.selectedItem.text\n                : this.text;\n        } else {\n            this.displayText = this.text;\n        }\n    }\n\n    ngOnChanges(changes): void {\n        if (this.hideOnEmptyItems) {\n            this.state =\n                !this.disabled &&\n                    this.items &&\n                    this.items.filter((item) => !item.disabled).length > 0\n                    ? 'visible'\n                    : 'hidden';\n        } else {\n            this.state = 'visible';\n        }\n\n        if (this.type === 'select') {\n            if (\n                this.selectedItem === null &&\n                this.items &&\n                this.items.length > 0\n            ) {\n                this.selectedItem = this.items[0];\n            }\n        }\n\n        this.updateText();\n    }\n\n    ngOnDestroy(): void {\n        // if (this.menuItemClick) {\n        //     this.menuItemClick.unsubscribe();\n        // }\n    }\n\n    onMenuClicked(event): void {\n        this.menuClick.emit();\n    }\n\n    // private manipulateData(menuItem: PepMenuItem) {\n    //     menuItem.children = null;\n\n    //     if (menuItem.parent) {\n    //         menuItem.parent = new PepMenuItem(menuItem.parent);\n    //         this.manipulateData(menuItem.parent);\n    //     }\n    // }\n\n    onMenuItemClicked(click: IPepMenuItemClickEvent): void {\n        this.selectedItem = click.source;\n        this.updateText();\n\n        // Manipulate click data because the data is dupplicate in parent.children\n        // const tmp = new PepMenuItem(click.source);\n        // this.manipulateData(tmp);\n        // click.source = tmp;\n\n        this.menuItemClick.emit(click);\n    }\n\n    animationDone(): void {\n        if (this.state === 'hidden') {\n            setTimeout(() => {\n                this.stateChange.emit({ state: this.state });\n            }, 500);\n        }\n    }\n\n    animationStart(): void {\n        if (this.state === 'visible') {\n            this.stateChange.emit({ state: this.state });\n        }\n    }\n}\n","import {\n    Component,\n    Input,\n    Output,\n    EventEmitter,\n    OnDestroy,\n    ViewChild,\n} from '@angular/core';\nimport { pepIconArrowRight } from '@pepperi-addons/ngx-lib/icon';\nimport {\n    PepMenuItem,\n    IPepMenuItemClickEvent,\n    PepMenuType,\n    PepMenuItemParent,\n} from './menu.model';\n\nexport class PepInternalMenuItem extends PepMenuItem {\n    selected?: boolean = false;\n}\n\n@Component({\n    selector: 'pep-menu-item',\n    templateUrl: './menu-item.component.html',\n    styleUrls: ['./menu-item.component.scss'],\n})\nexport class PepMenuItemComponent implements OnDestroy {\n    @Input() type: PepMenuType = 'action';\n\n    @Input() parent: PepMenuItemParent = null;\n    @Input() items: Array<PepInternalMenuItem> = [];\n\n    private _selectedItem: PepInternalMenuItem = null;\n    @Input()\n    set selectedItem(selectedItem: PepInternalMenuItem) {\n        this.updateSelectedItem(selectedItem);\n    }\n    get selectedItem(): PepInternalMenuItem {\n        return this._selectedItem;\n    }\n\n    @Input() xPosition: 'before' | 'after' = 'after';\n    @Input() subMenuIconName: string = pepIconArrowRight.name;\n\n    @ViewChild('childMenu', { static: true }) public childMenu: any;\n\n    @Output()\n    menuItemClick: EventEmitter<IPepMenuItemClickEvent> = new EventEmitter<IPepMenuItemClickEvent>();\n\n    ngOnDestroy(): void {\n        // if (this.menuItemClick) {\n        //     this.menuItemClick.unsubscribe();\n        // }\n    }\n\n    private clearSelectedItem(selectedItem: PepInternalMenuItem): void {\n        if (this.items) {\n            this.items.forEach((item) => {\n                item.selected = selectedItem?.key === item.key;\n\n                if (item.children) {\n                    item.children.forEach((child) => {\n                        this.clearSelectedChildren(child, selectedItem);\n                    });\n                }\n            });\n        }\n    }\n\n    private clearSelectedChildren(\n        item: PepInternalMenuItem,\n        selectedItem: PepInternalMenuItem\n    ): void {\n        item.selected = selectedItem?.key === item.key;\n\n        if (item.children) {\n            item.children.forEach((child) => {\n                this.clearSelectedChildren(child, selectedItem);\n            });\n        }\n    }\n\n    private selectParentAndChildren(\n        items: Array<PepInternalMenuItem>,\n        parentsKeys: Array<string>\n    ) {\n        if (parentsKeys.length > 0) {\n            const key = parentsKeys.pop();\n            const selectedParent = items.find((item) => item.key === key);\n\n            if (selectedParent) {\n                selectedParent.selected = true;\n                this.selectParentAndChildren(\n                    selectedParent.children,\n                    parentsKeys\n                );\n            }\n        }\n    }\n\n    private updateSelectedParent(\n        parentItem: PepMenuItemParent,\n        parentsKeys: Array<string>\n    ) {\n        parentsKeys.push(parentItem.key);\n\n        if (parentItem.parent) {\n            this.updateSelectedParent(parentItem.parent, parentsKeys);\n        } else {\n            this.selectParentAndChildren(this.items, parentsKeys);\n        }\n    }\n\n    private updateSelectedItem(selectedItem: PepInternalMenuItem) {\n        this.clearSelectedItem(selectedItem);\n        this._selectedItem = selectedItem;\n\n        if (selectedItem && selectedItem.parent) {\n            this.updateSelectedParent(selectedItem.parent, []);\n        }\n    }\n\n    onChildClicked(click: IPepMenuItemClickEvent): void {\n        // click.source.selected = true;\n        this.menuItemClick.emit(click);\n    }\n\n    onMenuItemClicked(item: PepMenuItem): void {\n        // item.selected = true;\n        this.menuItemClick.emit({ source: item });\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n    PepIconModule,\n    PepIconRegistry,\n    pepIconSystemMenu,\n    pepIconArrowRight,\n} from '@pepperi-addons/ngx-lib/icon';\n\nimport { PepMenuComponent } from './menu.component';\nimport { PepMenuItemComponent } from './menu-item.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        // Material modules,\n        MatCommonModule,\n        MatFormFieldModule,\n        MatMenuModule,\n        MatIconModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepIconModule,\n    ],\n    exports: [PepMenuComponent],\n    declarations: [PepMenuComponent, PepMenuItemComponent],\n})\nexport class PepMenuModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons([\n            pepIconSystemMenu,\n            pepIconArrowRight,\n        ]);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/menu\n */\nexport * from './menu.module';\nexport * from './menu.model';\nexport * from './menu.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n\nexport {PepMenuItemComponent as ɵa} from './menu-item.component';"],"names":[],"mappings":"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"}

package/fesm2015/pepperi-addons-ngx-lib-page-layout.js

@@ -26,7 +26,7 @@ class PepPageLayoutComponent {
 PepPageLayoutComponent.decorators = [
     { type: Component, args: [{
                 selector: 'pep-page-layout',
-                template: "<div class=\"pep-page-header-layout\">\r\n    <ng-content select=\"[pep-header-area]\"></ng-content>\r\n</div>\r\n<div class=\"pep-page-side-layout\" [ngClass]=\"{ 'show-shadow': showShadow }\">\r\n    <ng-content select=\"pep-side-bar\"></ng-content>\r\n    <ng-content select=\"[pep-side-area]\"></ng-content>\r\n</div>\r\n<div class=\"pep-page-main-layout\" [ngClass]=\"{ 'add-padding': addPadding }\">\r\n    <div class=\"pep-top-area\">\r\n        <ng-content select=\"[pep-top-area]\"></ng-content>\r\n    </div>\r\n    <div class=\"pep-main-area\">\r\n        <ng-content select=\"[pep-main-area]\"></ng-content>\r\n    </div>\r\n</div>",
+                template: "<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-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>",
                 styles: [":host.pep-page-layout{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:\"header-layout  header-layout\" \"side-layout    main-layout\";height:100%;width:100%;overflow:hidden}:host.pep-page-layout .pep-page-header-layout{grid-area:header-layout;z-index:10}:host.pep-page-layout .pep-page-side-layout{grid-area:side-layout;overflow:hidden;height:100%;z-index:5}:host.pep-page-layout .pep-page-side-layout.show-shadow{-webkit-padding-end:1rem;padding-inline-end:1rem;-webkit-padding-end:var(--pep-spacing-lg,1rem);padding-inline-end:var(--pep-spacing-lg,1rem)}:host.pep-page-layout .pep-page-main-layout{grid-area:main-layout;overflow:hidden;height:100%;z-index:1;padding-bottom:4.5rem;padding-bottom:var(--pep-footer-bar-height,4.5rem);display:grid;grid-template-rows:auto 1fr;grid-template-areas:\"top-area\" \"main-area\"}:host.pep-page-layout .pep-page-main-layout.add-padding{padding-inline:1rem;padding-inline:var(--pep-spacing-lg,1rem)}:host.pep-page-layout .pep-page-main-layout .pep-top-area{grid-area:top-area}:host.pep-page-layout .pep-page-main-layout .pep-main-area{grid-area:main-area;overflow:auto;height:100%;display:block}:host.pep-page-layout .pep-page-main-layout .pep-main-area>*{height:inherit}"]
             },] }
 ];

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

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-lib-page-layout.js","sources":["../../../projects/ngx-lib/page-layout/page-layout.component.ts","../../../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 {\r\n    AfterContentInit,\r\n    ChangeDetectorRef,\r\n    ContentChild,\r\n    ElementRef,\r\n    Renderer2,\r\n    ViewChild,\r\n} from '@angular/core';\r\nimport {\r\n    AfterViewInit,\r\n    Component,\r\n    EventEmitter,\r\n    Input,\r\n    Output,\r\n} from '@angular/core';\r\nimport {\r\n    PepCustomizationService,\r\n    PepLayoutService,\r\n    PepScreenSizeType,\r\n} from '@pepperi-addons/ngx-lib';\r\n\r\n@Component({\r\n    selector: 'pep-page-layout',\r\n    templateUrl: './page-layout.component.html',\r\n    styleUrls: ['./page-layout.component.scss'],\r\n})\r\nexport class PepPageLayoutComponent implements AfterViewInit, AfterContentInit {\r\n    @Input() addPadding = true;\r\n    @Input() showShadow = false;\r\n\r\n    screenSize: PepScreenSizeType;\r\n\r\n    constructor(\r\n        public customizationService: PepCustomizationService,\r\n        public layoutService: PepLayoutService,\r\n        private cdRef: ChangeDetectorRef,\r\n        private hostElement: ElementRef,\r\n        private renderer: Renderer2,\r\n    ) {\r\n        this.renderer.addClass(this.hostElement.nativeElement, 'pep-page-layout');\r\n    }\r\n\r\n    ngAfterViewInit(): void {\r\n        this.layoutService.onResize$.subscribe((size: PepScreenSizeType) => {\r\n            this.screenSize = size;\r\n        });\r\n\r\n    }\r\n\r\n    ngAfterContentInit() {\r\n        //\r\n    }\r\n\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\nimport { MatCommonModule } from '@angular/material/core';\r\n\r\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\r\n\r\nimport { PepPageLayoutComponent } from './page-layout.component';\r\n\r\n@NgModule({\r\n    imports: [\r\n        CommonModule,\r\n        // Material modules,\r\n        MatCommonModule,\r\n        // ngx-lib modules\r\n        PepNgxLibModule,\r\n    ],\r\n    exports: [PepPageLayoutComponent],\r\n    declarations: [PepPageLayoutComponent],\r\n})\r\nexport class PepPageLayoutModule { }\r\n","/*\r\n * Public API Surface of ngx-lib/page-layout\r\n */\r\nexport * from './page-layout.module';\r\nexport * from './page-layout.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MA0Ba,sBAAsB;IAM/B,YACW,oBAA6C,EAC7C,aAA+B,EAC9B,KAAwB,EACxB,WAAuB,EACvB,QAAmB;QAJpB,yBAAoB,GAApB,oBAAoB,CAAyB;QAC7C,kBAAa,GAAb,aAAa,CAAkB;QAC9B,UAAK,GAAL,KAAK,CAAmB;QACxB,gBAAW,GAAX,WAAW,CAAY;QACvB,aAAQ,GAAR,QAAQ,CAAW;QAVtB,eAAU,GAAG,IAAI,CAAC;QAClB,eAAU,GAAG,KAAK,CAAC;QAWxB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;KAC7E;IAED,eAAe;QACX,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,IAAuB;YAC3D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SAC1B,CAAC,CAAC;KAEN;IAED,kBAAkB;;KAEjB;;;YA9BJ,SAAS,SAAC;gBACP,QAAQ,EAAE,iBAAiB;gBAC3B,+oBAA2C;;aAE9C;;;YATG,uBAAuB;YACvB,gBAAgB;YAfhB,iBAAiB;YAEjB,UAAU;YACV,SAAS;;;yBAsBR,KAAK;yBACL,KAAK;;;MCRG,mBAAmB;;;YAX/B,QAAQ,SAAC;gBACN,OAAO,EAAE;oBACL,YAAY;;oBAEZ,eAAe;;oBAEf,eAAe;iBAClB;gBACD,OAAO,EAAE,CAAC,sBAAsB,CAAC;gBACjC,YAAY,EAAE,CAAC,sBAAsB,CAAC;aACzC;;;ACnBD;;;;ACAA;;;;;;"}
+{"version":3,"file":"pepperi-addons-ngx-lib-page-layout.js","sources":["../../../projects/ngx-lib/page-layout/page-layout.component.ts","../../../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'],\n})\nexport class PepPageLayoutComponent implements AfterViewInit, AfterContentInit {\n    @Input() addPadding = true;\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","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":";;;;;MA0Ba,sBAAsB;IAM/B,YACW,oBAA6C,EAC7C,aAA+B,EAC9B,KAAwB,EACxB,WAAuB,EACvB,QAAmB;QAJpB,yBAAoB,GAApB,oBAAoB,CAAyB;QAC7C,kBAAa,GAAb,aAAa,CAAkB;QAC9B,UAAK,GAAL,KAAK,CAAmB;QACxB,gBAAW,GAAX,WAAW,CAAY;QACvB,aAAQ,GAAR,QAAQ,CAAW;QAVtB,eAAU,GAAG,IAAI,CAAC;QAClB,eAAU,GAAG,KAAK,CAAC;QAWxB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;KAC7E;IAED,eAAe;QACX,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,IAAuB;YAC3D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SAC1B,CAAC,CAAC;KAEN;IAED,kBAAkB;;KAEjB;;;YA9BJ,SAAS,SAAC;gBACP,QAAQ,EAAE,iBAAiB;gBAC3B,mnBAA2C;;aAE9C;;;YATG,uBAAuB;YACvB,gBAAgB;YAfhB,iBAAiB;YAEjB,UAAU;YACV,SAAS;;;yBAsBR,KAAK;yBACL,KAAK;;;MCRG,mBAAmB;;;YAX/B,QAAQ,SAAC;gBACN,OAAO,EAAE;oBACL,YAAY;;oBAEZ,eAAe;;oBAEf,eAAe;iBAClB;gBACD,OAAO,EAAE,CAAC,sBAAsB,CAAC;gBACjC,YAAY,EAAE,CAAC,sBAAsB,CAAC;aACzC;;;ACnBD;;;;ACAA;;;;;;"}

package/fesm2015/pepperi-addons-ngx-lib-quantity-selector.js

@@ -40,7 +40,6 @@ class PepQuantitySelectorComponent {
         this.controlType = 'qs';
         this.form = null;
         this.showTitle = true;
-        this.renderTitle = true;
         this.layoutType = 'form';
         this.isActive = false;
         // Get default style from theme.
@@ -180,9 +179,6 @@ class PepQuantitySelectorComponent {
             this.standAlone = true;
             this.setForm();
             this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
-            if (!this.renderTitle) {
-                this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME);
-            }
         }
         this.qsWidthSubject
             .asObservable()
@@ -415,7 +411,7 @@ PepQuantitySelectorComponent.MINUS = '[-]';
 PepQuantitySelectorComponent.decorators = [
     { type: Component, args: [{
                 selector: 'pep-quantity-selector',
-                template: "<ng-container [formGroup]=\"form\">\r\n    <ng-template #pepTemplate>\r\n        <div #QSCont class=\"pep-quantity-selector-container {{ styleType }}\" [ngClass]=\"{\r\n                'hide-qs-actions' : layoutType === 'card' && rowSpan <= 1,\r\n                'pep-table-quantity-selector': layoutType === 'table',\r\n                'one-row': rowSpan === 1,\r\n                caution: isCaution,\r\n                'matrix-qs': type === 'qsForMatrix',\r\n                'zero-quantity': formattedValue === '0'\r\n            }\">\r\n            <pep-field-title *ngIf=\"renderTitle && layoutType !== 'table' && layoutType !== 'card'\" [label]=\"label\"\r\n                [mandatory]=\"mandatory\" [disabled]=\"disabled\" [showTitle]=\"showTitle\" [xAlignment]=\"xAlignment\">\r\n            </pep-field-title>\r\n\r\n            <ng-container *ngIf=\"type == 'qs'\">\r\n                <ng-container *ngIf=\"readonly; then readonlyBlock; else editableQSBlock\"></ng-container>\r\n                <ng-template #readonlyBlock>\r\n                    <button [id]=\"key\" mat-button class=\"pep-button {{ styleType }} disable \"\r\n                        [ngClass]=\"{caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1}\"\r\n                        title=\"{{ formattedValue }}\" disabled=\"true\">\r\n                        <span class=\"ellipsis\">\r\n                            {{ formattedValue }}\r\n                        </span>\r\n                    </button>\r\n                </ng-template>\r\n                <ng-template #editableQSBlock>\r\n                    <mat-form-field appearance=\"outline\">\r\n                        <input pepQsValidation [allowDecimal]=\"allowDecimal\" type=\"decimalNumber\" inputmode=\"decimal\"\r\n                            matInput #QSInput name=\"{{ key }}\" class=\"body-lg ellipsis\" title=\"{{ formattedValue }}\"\r\n                            autocomplete=\"off\" [id]=\"key\" [formControlName]=\"key\" [value]=\"displayValue\"\r\n                            (click)=\"$event.target.setSelectionRange(0, 999)\" (keydown)=\"onKeydown($event)\"\r\n                            (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" />\r\n                        <button *ngIf=\"showQsBtn\" mat-button matPrefix (click)=\"decrement($event)\"\r\n                            class=\"pep-button icon-button sm weak qs-action\" [disabled]=\"disabled\" [ngClass]=\"{ disable: disabled, caution: isCaution && styleType !== 'strong',\r\n                                'keep-background-on-focus': styleType === 'strong'}\">\r\n                            <mat-icon>\r\n                                <pep-icon name=\"number_minus\">\r\n                                </pep-icon>\r\n                            </mat-icon>\r\n                        </button>\r\n                        <button *ngIf=\"showQsBtn\" mat-button matSuffix (click)=\"increment($event)\"\r\n                            class=\"pep-button icon-button sm weak qs-action\" [disabled]=\"disabled\" [ngClass]=\"{ disable: disabled, caution: isCaution && styleType !== 'strong',\r\n                                'keep-background-on-focus': styleType === 'strong'}\">\r\n                            <mat-icon>\r\n                                <pep-icon name=\"number_plus\">\r\n                                </pep-icon>\r\n                            </mat-icon>\r\n                        </button>\r\n                        <mat-error *ngIf=\"messages?.length > 0\">\r\n                            <span class=\"qs-error body-xs\" *ngFor=\"let msg of messages\"> {{ msg.Key | translate }} :\r\n                                {{ msg.Value }} </span>\r\n                        </mat-error>\r\n                    </mat-form-field>\r\n                </ng-template>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"type == 'qsForMatrix'\">\r\n                <ng-container *ngIf=\"readonly; then readonlyBlock; else editableQSBlock\"></ng-container>\r\n                <ng-template #readonlyBlock>\r\n                    <button [id]=\"key\" mat-button class=\"pep-button {{ styleType }} disable\" disabled=\"true\"\r\n                        [ngClass]=\"{caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1}\">\r\n                        X\r\n                    </button>\r\n                </ng-template>\r\n                <ng-template #editableQSBlock>\r\n                    <span *ngIf=\" xAlignment=='right'\" class=\" body-sm additional-value prefix\"\r\n                        matBadge=\"{{ additionalValue }}\" matBadgePosition=\"before\"\r\n                        matBadgeSize=\"rowSpan === 1 ? small : medium\" [@showHide]=\"getAdditionalValue\"></span>\r\n\r\n                    <mat-form-field appearance=\"outline\" (mouseleave)=\"!isInFocus ? onMatrixMouseleave($event) : null\">\r\n                        <input pepQsValidation [allowDecimal]=\"allowDecimal\" type=\"decimalNumber\" inputmode=\"decimal\"\r\n                            matInput #QSInput name=\"{{ key }}\" title=\"{{ formattedValue }}\" class=\"body-sm ellipsis\"\r\n                            autocomplete=\"off\" [id]=\"key\" [formControlName]=\"key\" [value]=\"displayValue\"\r\n                            (click)=\"onMatrixClick($event); $event.target.setSelectionRange(0, 999)\"\r\n                            (keydown)=\"onKeydown($event)\" (blur)=\"onMatrixBlur($event)\"\r\n                            (focus)=\"onMatrixMouseEnter($event); onFocus($event)\"\r\n                            (mouseenter)=\"onMatrixMouseEnter($event)\" />\r\n\r\n                        <mat-error *ngIf=\"messages?.length > 0\">\r\n                            <span class=\"qs-error body-xs\" *ngFor=\"let msg of messages\"> {{ msg.Key | translate }} :\r\n                                {{ msg.Value }} </span>\r\n                        </mat-error>\r\n                    </mat-form-field>\r\n\r\n                    <span *ngIf=\"xAlignment != 'right'\" class=\"body-sm additional-value suffix\"\r\n                        matBadge=\"{{ additionalValue }}\" matBadgePosition=\"before\"\r\n                        matBadgeSize=\"rowSpan === 1 ? small : medium\" [@showHide]=\"getAdditionalValue\"></span>\r\n                </ng-template>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"type == 'button'\">\r\n                <ng-container *ngIf=\"(value | pepToNumber) == 0; then regularBlock; else withBadgeBlock\">\r\n                </ng-container>\r\n                <ng-template #regularBlock>\r\n                    <button mat-button [disabled]=\"disabled\" class=\"pep-button {{ styleType }} \" [id]=\"key\"\r\n                        name=\"{{ key }}\"\r\n                        [ngClass]=\"{ disable: disabled, caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1}\"\r\n                        [title]=\"'QS.ORDER' | translate\" (click)=\"enterChildren($event)\">\r\n                        <span class=\"ellipsis\">\r\n                            {{ 'QS.ORDER' | translate }}\r\n                        </span>\r\n                    </button>\r\n                </ng-template>\r\n                <ng-template #withBadgeBlock>\r\n                    <button mat-button matBadge=\"{{ formattedValue }}\"\r\n                        matBadgePosition=\"{{xAlignment == 'right' ? 'before' : 'after'}}\"\r\n                        [matBadgeSize]=\"layoutType === 'card' && rowSpan === 1 ? 'small' : 'medium'\"\r\n                        class=\"pep-button {{ styleType }} \" [id]=\"key\" name=\"{{ key }}\" [ngClass]=\"{ disable: disabled, caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1,\r\n                            'right-alignment': xAlignment == 'right', 'left-alignment': xAlignment != 'right'}\"\r\n                        [title]=\"'QS.ORDER' | translate\" (click)=\"enterChildren($event)\" [disabled]=\"disabled\">\r\n                        <span class=\"ellipsis\">\r\n                            {{ 'QS.ORDER' | translate }}\r\n                        </span>\r\n                    </button>\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"type == 'packageButton'\">\r\n                <button mat-button class=\"pep-button {{ styleType }} \" [id]=\"key\" name=\"{{ key }}\"\r\n                    [ngClass]=\"{ disable: disabled, caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1}\"\r\n                    [title]=\"'QS.ORDER' | translate\" (click)=\"enterPackage($event)\" [disabled]=\"disabled\">\r\n                    <span class=\"ellipsis\">\r\n                        {{ 'QS.ORDER' | translate }} &#40;{{ formattedValue }}&#41;\r\n                    </span>\r\n                </button>\r\n            </ng-container>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'form'\">\r\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'card'\">\r\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'table'\">\r\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\r\n    </ng-container>\r\n</ng-container>",
+                template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate>\n        <div #QSCont class=\"pep-quantity-selector-container {{ styleType }}\" [ngClass]=\"{\n                'hide-qs-actions' : layoutType === 'card' && rowSpan <= 1,\n                'pep-table-quantity-selector': layoutType === 'table',\n                'one-row': rowSpan === 1,\n                caution: isCaution,\n                'matrix-qs': type === 'qsForMatrix',\n                'zero-quantity': formattedValue === '0'\n            }\">\n            <pep-field-title *ngIf=\"layoutType !== 'table' && layoutType !== 'card'\" [label]=\"label\"\n                [mandatory]=\"mandatory\" [disabled]=\"disabled\" [showTitle]=\"showTitle\" [xAlignment]=\"xAlignment\">\n            </pep-field-title>\n\n            <ng-container *ngIf=\"type == 'qs'\">\n                <ng-container *ngIf=\"readonly; then readonlyBlock; else editableQSBlock\"></ng-container>\n                <ng-template #readonlyBlock>\n                    <button [id]=\"key\" mat-button class=\"pep-button {{ styleType }} disable \"\n                        [ngClass]=\"{caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1}\"\n                        title=\"{{ formattedValue }}\" disabled=\"true\">\n                        <span class=\"ellipsis\">\n                            {{ formattedValue }}\n                        </span>\n                    </button>\n                </ng-template>\n                <ng-template #editableQSBlock>\n                    <mat-form-field appearance=\"outline\">\n                        <input pepQsValidation [allowDecimal]=\"allowDecimal\" type=\"decimalNumber\" inputmode=\"decimal\"\n                            matInput #QSInput name=\"{{ key }}\" class=\"body-lg ellipsis\" title=\"{{ formattedValue }}\"\n                            autocomplete=\"off\" [id]=\"key\" [formControlName]=\"key\" [value]=\"displayValue\"\n                            (click)=\"$event.target.setSelectionRange(0, 999)\" (keydown)=\"onKeydown($event)\"\n                            (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" />\n                        <button *ngIf=\"showQsBtn\" mat-button matPrefix (click)=\"decrement($event)\"\n                            class=\"pep-button icon-button sm weak qs-action\" [disabled]=\"disabled\" [ngClass]=\"{ disable: disabled, caution: isCaution && styleType !== 'strong',\n                                'keep-background-on-focus': styleType === 'strong'}\">\n                            <mat-icon>\n                                <pep-icon name=\"number_minus\">\n                                </pep-icon>\n                            </mat-icon>\n                        </button>\n                        <button *ngIf=\"showQsBtn\" mat-button matSuffix (click)=\"increment($event)\"\n                            class=\"pep-button icon-button sm weak qs-action\" [disabled]=\"disabled\" [ngClass]=\"{ disable: disabled, caution: isCaution && styleType !== 'strong',\n                                'keep-background-on-focus': styleType === 'strong'}\">\n                            <mat-icon>\n                                <pep-icon name=\"number_plus\">\n                                </pep-icon>\n                            </mat-icon>\n                        </button>\n                        <mat-error *ngIf=\"messages?.length > 0\">\n                            <span class=\"qs-error body-xs\" *ngFor=\"let msg of messages\"> {{ msg.Key | translate }} :\n                                {{ msg.Value }} </span>\n                        </mat-error>\n                    </mat-form-field>\n                </ng-template>\n            </ng-container>\n\n            <ng-container *ngIf=\"type == 'qsForMatrix'\">\n                <ng-container *ngIf=\"readonly; then readonlyBlock; else editableQSBlock\"></ng-container>\n                <ng-template #readonlyBlock>\n                    <button [id]=\"key\" mat-button class=\"pep-button {{ styleType }} disable\" disabled=\"true\"\n                        [ngClass]=\"{caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1}\">\n                        X\n                    </button>\n                </ng-template>\n                <ng-template #editableQSBlock>\n                    <span *ngIf=\" xAlignment=='right'\" class=\" body-sm additional-value prefix\"\n                        matBadge=\"{{ additionalValue }}\" matBadgePosition=\"before\"\n                        matBadgeSize=\"rowSpan === 1 ? small : medium\" [@showHide]=\"getAdditionalValue\"></span>\n\n                    <mat-form-field appearance=\"outline\" (mouseleave)=\"!isInFocus ? onMatrixMouseleave($event) : null\">\n                        <input pepQsValidation [allowDecimal]=\"allowDecimal\" type=\"decimalNumber\" inputmode=\"decimal\"\n                            matInput #QSInput name=\"{{ key }}\" title=\"{{ formattedValue }}\" class=\"body-sm ellipsis\"\n                            autocomplete=\"off\" [id]=\"key\" [formControlName]=\"key\" [value]=\"displayValue\"\n                            (click)=\"onMatrixClick($event); $event.target.setSelectionRange(0, 999)\"\n                            (keydown)=\"onKeydown($event)\" (blur)=\"onMatrixBlur($event)\"\n                            (focus)=\"onMatrixMouseEnter($event); onFocus($event)\"\n                            (mouseenter)=\"onMatrixMouseEnter($event)\" />\n\n                        <mat-error *ngIf=\"messages?.length > 0\">\n                            <span class=\"qs-error body-xs\" *ngFor=\"let msg of messages\"> {{ msg.Key | translate }} :\n                                {{ msg.Value }} </span>\n                        </mat-error>\n                    </mat-form-field>\n\n                    <span *ngIf=\"xAlignment != 'right'\" class=\"body-sm additional-value suffix\"\n                        matBadge=\"{{ additionalValue }}\" matBadgePosition=\"before\"\n                        matBadgeSize=\"rowSpan === 1 ? small : medium\" [@showHide]=\"getAdditionalValue\"></span>\n                </ng-template>\n            </ng-container>\n\n            <ng-container *ngIf=\"type == 'button'\">\n                <ng-container *ngIf=\"(value | pepToNumber) == 0; then regularBlock; else withBadgeBlock\">\n                </ng-container>\n                <ng-template #regularBlock>\n                    <button mat-button [disabled]=\"disabled\" class=\"pep-button {{ styleType }} \" [id]=\"key\"\n                        name=\"{{ key }}\"\n                        [ngClass]=\"{ disable: disabled, caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1}\"\n                        [title]=\"'QS.ORDER' | translate\" (click)=\"enterChildren($event)\">\n                        <span class=\"ellipsis\">\n                            {{ 'QS.ORDER' | translate }}\n                        </span>\n                    </button>\n                </ng-template>\n                <ng-template #withBadgeBlock>\n                    <button mat-button matBadge=\"{{ formattedValue }}\"\n                        matBadgePosition=\"{{xAlignment == 'right' ? 'before' : 'after'}}\"\n                        [matBadgeSize]=\"layoutType === 'card' && rowSpan === 1 ? 'small' : 'medium'\"\n                        class=\"pep-button {{ styleType }} \" [id]=\"key\" name=\"{{ key }}\" [ngClass]=\"{ disable: disabled, caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1,\n                            'right-alignment': xAlignment == 'right', 'left-alignment': xAlignment != 'right'}\"\n                        [title]=\"'QS.ORDER' | translate\" (click)=\"enterChildren($event)\" [disabled]=\"disabled\">\n                        <span class=\"ellipsis\">\n                            {{ 'QS.ORDER' | translate }}\n                        </span>\n                    </button>\n                </ng-template>\n            </ng-container>\n            <ng-container *ngIf=\"type == 'packageButton'\">\n                <button mat-button class=\"pep-button {{ styleType }} \" [id]=\"key\" name=\"{{ key }}\"\n                    [ngClass]=\"{ disable: disabled, caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1}\"\n                    [title]=\"'QS.ORDER' | translate\" (click)=\"enterPackage($event)\" [disabled]=\"disabled\">\n                    <span class=\"ellipsis\">\n                        {{ 'QS.ORDER' | translate }} &#40;{{ formattedValue }}&#41;\n                    </span>\n                </button>\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n</ng-container>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 animations: [
                     trigger('showHide', [
@@ -460,7 +456,6 @@ PepQuantitySelectorComponent.propDecorators = {
     visible: [{ type: Input }],
     form: [{ type: Input }],
     showTitle: [{ type: Input }],
-    renderTitle: [{ type: Input }],
     layoutType: [{ type: Input }],
     isActive: [{ type: Input }],
     styleType: [{ type: Input }],

package/fesm2015/pepperi-addons-ngx-lib-quantity-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-lib-quantity-selector.js","sources":["../../../projects/ngx-lib/quantity-selector/quantity-selector.component.ts","../../../projects/ngx-lib/quantity-selector/quantity-selector-validation.directive.ts","../../../projects/ngx-lib/quantity-selector/quantity-selector.pipes.ts","../../../projects/ngx-lib/quantity-selector/quantity-selector.module.ts","../../../projects/ngx-lib/quantity-selector/public-api.ts","../../../projects/ngx-lib/quantity-selector/pepperi-addons-ngx-lib-quantity-selector.ts"],"sourcesContent":["import {\r\n    Component,\r\n    OnInit,\r\n    OnChanges,\r\n    OnDestroy,\r\n    Input,\r\n    Output,\r\n    EventEmitter,\r\n    ViewChild,\r\n    ElementRef,\r\n    ChangeDetectorRef,\r\n    ChangeDetectionStrategy,\r\n    Renderer2,\r\n    AfterViewInit,\r\n} from '@angular/core';\r\nimport { FormGroup } from '@angular/forms';\r\nimport {\r\n    trigger,\r\n    state,\r\n    style,\r\n    animate,\r\n    transition,\r\n} from '@angular/animations';\r\nimport {\r\n    PepLayoutType,\r\n    PepStyleType,\r\n    PepCustomizationService,\r\n    PepHorizontalAlignment,\r\n    DEFAULT_HORIZONTAL_ALIGNMENT,\r\n    IPepFieldClickEvent,\r\n    PepQuantitySelectorFieldType,\r\n    PepQuantitySelectorField,\r\n    PepUtilitiesService,\r\n} from '@pepperi-addons/ngx-lib';\r\nimport { BehaviorSubject, fromEvent, Subject } from 'rxjs';\r\nimport { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';\r\nimport { TranslateService } from '@ngx-translate/core';\r\n\r\n@Component({\r\n    selector: 'pep-quantity-selector',\r\n    templateUrl: './quantity-selector.component.html',\r\n    styleUrls: ['./quantity-selector.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    animations: [\r\n        trigger('showHide', [\r\n            state(\r\n                'show',\r\n                style({\r\n                    opacity: 1,\r\n                    transform: 'scale(1)',\r\n                })\r\n            ),\r\n            state(\r\n                'hide',\r\n                style({\r\n                    opacity: 0,\r\n                    transform: 'scale(0)',\r\n                })\r\n            ),\r\n            transition('show => hide', animate('250ms ease-out')),\r\n            transition('hide => show', animate('250ms ease-in')),\r\n        ]),\r\n    ],\r\n})\r\nexport class PepQuantitySelectorComponent\r\n    implements OnChanges, OnInit, AfterViewInit, OnDestroy {\r\n    public static ENTER_CHILDREN = '[EnterChildren]';\r\n    public static ENTER_PACKAGE = '[EnterPackage]';\r\n    public static PLUS = '[+]';\r\n    public static MINUS = '[-]';\r\n\r\n    @Input() key = '';\r\n\r\n    private _value = null;\r\n    @Input()\r\n    set value(value: string) {\r\n        if (!value) {\r\n            value = '';\r\n        }\r\n\r\n        this._value = value;\r\n\r\n        if (this._calculateFormattedValue) {\r\n            this.setFormattedValue(value);\r\n        }\r\n    }\r\n    get value(): string {\r\n        return this._value;\r\n    }\r\n\r\n    private _formattedValue = null;\r\n    @Input()\r\n    set formattedValue(value: string) {\r\n        if (!value) {\r\n            value = '';\r\n        }\r\n\r\n        if (this._calculateFormattedValue) {\r\n            this._calculateFormattedValue = false;\r\n        }\r\n\r\n        this.setFormattedValue(value);\r\n    }\r\n    get formattedValue(): string {\r\n        return this._formattedValue;\r\n    }\r\n\r\n    @Input() label = '';\r\n    @Input() type: PepQuantitySelectorFieldType = 'qs';\r\n    @Input() mandatory = false;\r\n    @Input() disabled = false;\r\n    @Input() readonly = false;\r\n\r\n    private _textColor = '';\r\n    @Input()\r\n    set textColor(value: string) {\r\n        this._textColor = value;\r\n        this.isCaution = value === '#FF0000';\r\n    }\r\n    get textColor(): string {\r\n        return this._textColor;\r\n    }\r\n\r\n    @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\r\n    @Input() rowSpan = 1;\r\n    @Input() allowDecimal = false;\r\n    @Input() additionalValue = '';\r\n\r\n    private _notificationInfo: any;\r\n    @Input()\r\n    set notificationInfo(value: any) {\r\n        this._notificationInfo = value;\r\n\r\n        const messages = value && value > 0 ? JSON.parse(value).Messages : '';\r\n        if (messages && messages.length > 0) {\r\n            // Replace the msg keys.\r\n            for (const msg of messages) {\r\n                if (msg.Key === 'Inventory_Limit_Msg') {\r\n                    msg.Key = 'MESSAGES.ERROR_INVENTORY_LIMIT';\r\n                } else if (msg.Key === 'Case_Quantity_Limit_Msg') {\r\n                    msg.Key = 'MESSAGES.ERROR_CASE_QUANTITY_LIMIT';\r\n                } else if (msg.Key === 'Min_Quantity_Limit_Msg') {\r\n                    msg.Key = 'MESSAGES.ERROR_MIN_QUANTITY_LIMIT';\r\n                } else if (msg.Key === 'Max_Quantity_Limit_Msg') {\r\n                    msg.Key = 'MESSAGES.ERROR_MAX_QUANTITY_LIMIT';\r\n                }\r\n            }\r\n\r\n            this.messages = messages;\r\n\r\n            const fieldControl = this.form.controls[this.key];\r\n            fieldControl.setErrors({\r\n                serverError: 'Error',\r\n            });\r\n\r\n            this.sameElementInTheWantedRow = null;\r\n            setTimeout(() => {\r\n                if (this.QSInput && this.QSInput.nativeElement) {\r\n                    this.QSInput.nativeElement.focus();\r\n                }\r\n            }, 150);\r\n        }\r\n    }\r\n    get notificationInfo(): any {\r\n        return this._notificationInfo;\r\n    }\r\n\r\n    private _visible = true;\r\n    @Input()\r\n    set visible(visible: boolean) {\r\n        this._visible = visible;\r\n        if (visible) {\r\n            this.renderer.removeClass(\r\n                this.element.nativeElement,\r\n                'hidden-element'\r\n            );\r\n        } else {\r\n            this.renderer.addClass(\r\n                this.element.nativeElement,\r\n                'hidden-element'\r\n            );\r\n        }\r\n    }\r\n    get visible(): boolean {\r\n        return this._visible;\r\n    }\r\n\r\n    controlType = 'qs';\r\n\r\n    @Input() form: FormGroup = null;\r\n    @Input() showTitle = true;\r\n    @Input() renderTitle = true;\r\n    @Input() layoutType: PepLayoutType = 'form';\r\n    @Input() isActive = false;\r\n\r\n    // Get default style from theme.\r\n    @Input()\r\n    styleType: PepStyleType = document.documentElement.style.getPropertyValue(\r\n        PepCustomizationService.STYLE_QS_KEY\r\n    ) as PepStyleType; //'strong';\r\n\r\n    @Output()\r\n    valueChange: EventEmitter<string> = new EventEmitter<string>();\r\n\r\n    @Output()\r\n    elementClick: EventEmitter<IPepFieldClickEvent> = new EventEmitter<IPepFieldClickEvent>();\r\n\r\n    @ViewChild('QSCont') QSCont: ElementRef;\r\n    @ViewChild('QSInput') QSInput: ElementRef;\r\n\r\n    private _calculateFormattedValue = true;\r\n    get calculateFormattedValue(): boolean {\r\n        return this._calculateFormattedValue;\r\n    }\r\n\r\n    private readonly _destroyed: Subject<void>;\r\n    private qsWidthSubject: BehaviorSubject<number>;\r\n    lastQsContClientWidth = 0;\r\n    showQsBtn = true;\r\n\r\n    standAlone = false;\r\n    isInFocus = false;\r\n    isMatrixFocus = false;\r\n\r\n    isCaution = false;\r\n    messages: Array<any> = null;\r\n\r\n    sameElementInTheWantedRow = null;\r\n\r\n    isEmptyKey = false;\r\n\r\n    constructor(\r\n        private cd: ChangeDetectorRef,\r\n        private customizationService: PepCustomizationService,\r\n        private renderer: Renderer2,\r\n        private element: ElementRef,\r\n        private translate: TranslateService,\r\n        private utilitiesService: PepUtilitiesService\r\n    ) {\r\n        this._destroyed = new Subject();\r\n        this.qsWidthSubject = new BehaviorSubject(0);\r\n    }\r\n\r\n    setForm() {\r\n        const pepField = new PepQuantitySelectorField({\r\n            key: this.key,\r\n            value: this.value,\r\n            mandatory: this.mandatory,\r\n            readonly: this.readonly,\r\n            disabled: this.disabled,\r\n        });\r\n        this.form = this.customizationService.getDefaultFromGroup(pepField);\r\n    }\r\n\r\n    private setFormattedValue(value: string) {\r\n        if (this._calculateFormattedValue) {\r\n            this._formattedValue = this.utilitiesService.formatNumber(value);\r\n        } else {\r\n            this._formattedValue = value;\r\n        }\r\n\r\n        this.updateFormFieldValue();\r\n    }\r\n\r\n    private updateFormFieldValue() {\r\n        this.customizationService.updateFormFieldValue(\r\n            this.form,\r\n            this.key,\r\n            this.formattedValue\r\n        );\r\n    }\r\n\r\n    get displayValue(): string {\r\n        const res = this.isInFocus\r\n            ? parseFloat(this.value).toString()\r\n            : this.formattedValue;\r\n        return res;\r\n    }\r\n\r\n    protected getDestroyer() {\r\n        return takeUntil(this._destroyed);\r\n    }\r\n\r\n    ngOnInit(): void {\r\n        if (this.form === null) {\r\n            if (this.key === '') {\r\n                this.isEmptyKey = true;\r\n            }\r\n\r\n            this.standAlone = true;\r\n            this.setForm();\r\n\r\n            this.renderer.addClass(\r\n                this.element.nativeElement,\r\n                PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME\r\n            );\r\n\r\n            if (!this.renderTitle) {\r\n                this.renderer.addClass(\r\n                    this.element.nativeElement,\r\n                    PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME\r\n                );\r\n            }\r\n        }\r\n\r\n        this.qsWidthSubject\r\n            .asObservable()\r\n            .pipe(this.getDestroyer(), distinctUntilChanged())\r\n            .subscribe((qsWidth: number) => {\r\n                this.setupQsButtons(qsWidth);\r\n            });\r\n\r\n        this.updateFormFieldValue();\r\n    }\r\n\r\n    ngAfterViewInit() {\r\n        //\r\n    }\r\n\r\n    ngAfterViewChecked(): void {\r\n        this.setQsView();\r\n    }\r\n\r\n    ngOnChanges(changes: any): void {\r\n        // Bug fix for addons when the key is '' in the ngOnInit for some reson\r\n        if (this.isEmptyKey && this.key !== '') {\r\n            this.setForm();\r\n        }\r\n\r\n        setTimeout(() => {\r\n            this.focusToTheSameElementInTheWantedRow();\r\n        }, 150);\r\n    }\r\n\r\n    ngOnDestroy(): void {\r\n        this._destroyed.next();\r\n        this._destroyed.complete();\r\n    }\r\n\r\n    get getAdditionalValue(): string {\r\n        return this.additionalValue.length > 0 ? 'show' : 'hide';\r\n    }\r\n\r\n    getParentByClass(el, parentSelector /* optional */): any {\r\n        // If no parentSelector defined will bubble up all the way to *document*\r\n        if (parentSelector === undefined) {\r\n            parentSelector = document;\r\n        }\r\n\r\n        let p = el.parentNode;\r\n\r\n        while (\r\n            p &&\r\n            !p?.classList?.contains(parentSelector) &&\r\n            parentSelector !== document\r\n        ) {\r\n            const o = p;\r\n            p = o?.parentNode || null;\r\n        }\r\n\r\n        return p?.className.indexOf(parentSelector) > -1 ? p : null;\r\n    }\r\n\r\n    getSameElementInTheWantedRowByClassName(event: any, isNext = true): any {\r\n        const eventTarget = event.target || event.srcElement;\r\n        let sameElementInTheWantedRowByClassName;\r\n\r\n        let parentSelector;\r\n        if (this.layoutType === 'table') {\r\n            parentSelector = this.getParentByClass(eventTarget, 'table-row');\r\n        } else if (this.layoutType === 'card') {\r\n            parentSelector = this.getParentByClass(eventTarget, 'card-view');\r\n            if (!parentSelector) {\r\n                parentSelector = this.getParentByClass(\r\n                    eventTarget,\r\n                    'line-view'\r\n                );\r\n            }\r\n        }\r\n\r\n        if (\r\n            parentSelector.nextElementSibling === null &&\r\n            parentSelector.previousElementSibling === null\r\n        ) {\r\n            sameElementInTheWantedRowByClassName = null;\r\n        } else {\r\n            if (isNext) {\r\n                if (parentSelector.nextElementSibling === null) {\r\n                    sameElementInTheWantedRowByClassName = parentSelector.parentElement.querySelectorAll(\r\n                        '[name=' + this.key + ']'\r\n                    )[0];\r\n                } else {\r\n                    sameElementInTheWantedRowByClassName = parentSelector.nextElementSibling.querySelectorAll(\r\n                        '[name=' + this.key + ']'\r\n                    )[0];\r\n                }\r\n            } else {\r\n                if (parentSelector.previousElementSibling === null) {\r\n                    const elementsList = parentSelector.parentElement.querySelectorAll(\r\n                        '[name=' + this.key + ']'\r\n                    );\r\n                    sameElementInTheWantedRowByClassName =\r\n                        elementsList[elementsList.length - 1];\r\n                } else {\r\n                    sameElementInTheWantedRowByClassName = parentSelector.previousElementSibling.querySelectorAll(\r\n                        '[name=' + this.key + ']'\r\n                    )[0];\r\n                }\r\n            }\r\n        }\r\n\r\n        return sameElementInTheWantedRowByClassName;\r\n    }\r\n\r\n    setSameElementInTheWantedRow(event: any, isNext = true): void {\r\n        // Navigate to the QS in the next row.\r\n        if (this.layoutType === 'card' || this.layoutType === 'table') {\r\n            this.sameElementInTheWantedRow = this.getSameElementInTheWantedRowByClassName(\r\n                event,\r\n                isNext\r\n            );\r\n        }\r\n\r\n        this.QSInput.nativeElement.blur();\r\n    }\r\n\r\n    focusToTheSameElementInTheWantedRow(): void {\r\n        if (this.sameElementInTheWantedRow) {\r\n            const elem = this.sameElementInTheWantedRow;\r\n            // If this is regular item (qs and not button) .\r\n            if (elem instanceof HTMLInputElement && elem.type === 'text') {\r\n                elem.click();\r\n                elem.select();\r\n            } else {\r\n                const parentElem = elem.parentNode;\r\n                parentElem.click();\r\n                elem.focus();\r\n            }\r\n            this.sameElementInTheWantedRow = null;\r\n        }\r\n    }\r\n\r\n    cleanError(): void {\r\n        const fieldControl = this.form.controls[this.key];\r\n\r\n        // Clean the error message\r\n        if (this.messages && this.messages.length > 0) {\r\n            this.messages = this.notificationInfo = null;\r\n            fieldControl.setErrors(null);\r\n        }\r\n    }\r\n\r\n    onMatrixMouseEnter(event: any): void {\r\n        this.isMatrixFocus = true;\r\n    }\r\n\r\n    onMatrixMouseleave(event: any): void {\r\n        this.isMatrixFocus = false;\r\n    }\r\n\r\n    onMatrixClick(event: any): void {\r\n        this.isInFocus = true;\r\n\r\n        if (this.QSInput && this.QSInput.nativeElement) {\r\n            this.QSInput.nativeElement.focus();\r\n        }\r\n    }\r\n\r\n    onMatrixBlur(event: any): void {\r\n        if (\r\n            !event.relatedTarget ||\r\n            event.relatedTarget.className.indexOf('qs') < 0\r\n        ) {\r\n            this.isMatrixFocus = false;\r\n        }\r\n\r\n        this.onBlur(event);\r\n    }\r\n\r\n    onFocus(event: any): void {\r\n        this.isInFocus = true;\r\n    }\r\n\r\n    isDifferentValue(value: string): boolean {\r\n        let res = false;\r\n\r\n        const currentValue = this.utilitiesService.coerceNumberProperty(\r\n            this.value\r\n        );\r\n        const newValue = this.utilitiesService.coerceNumberProperty(value);\r\n\r\n        res = currentValue !== newValue;\r\n\r\n        return res;\r\n    }\r\n\r\n    onBlur(event: any): void {\r\n        this.isInFocus = false;\r\n        this.cleanError();\r\n        const value = event.target ? event.target.value : event;\r\n\r\n        if (value !== this.value && this.isDifferentValue(value)) {\r\n            this.value = value;\r\n\r\n            // If the user is setting the formatted value then set the value till the user format it and return it back.\r\n            if (!this._calculateFormattedValue) {\r\n                this._formattedValue = value;\r\n            }\r\n\r\n            this.valueChange.emit(this.value);\r\n        } else {\r\n            this.focusToTheSameElementInTheWantedRow();\r\n        }\r\n    }\r\n\r\n    onKeydown(event): any {\r\n        const keyboardEvent = event as KeyboardEvent;\r\n\r\n        if (keyboardEvent.key === 'Enter') {\r\n            this.setSameElementInTheWantedRow(\r\n                keyboardEvent,\r\n                !keyboardEvent.shiftKey\r\n            );\r\n            return true;\r\n        }\r\n    }\r\n\r\n    increment(event): void {\r\n        if (this.standAlone) {\r\n            this.value = this.utilitiesService.incrementNumber(this.value);\r\n        }\r\n\r\n        this.elementClick.emit({\r\n            key: this.key,\r\n            value: PepQuantitySelectorComponent.PLUS,\r\n            controlType: this.controlType,\r\n            eventWhich: event.which,\r\n        });\r\n        event.stopPropagation();\r\n    }\r\n\r\n    decrement(event): void {\r\n        if (this.standAlone) {\r\n            this.value = this.utilitiesService.decrementNumber(this.value);\r\n        }\r\n\r\n        this.elementClick.emit({\r\n            key: this.key,\r\n            value: PepQuantitySelectorComponent.MINUS,\r\n            controlType: this.controlType,\r\n            eventWhich: event.which,\r\n        });\r\n        event.stopPropagation();\r\n    }\r\n\r\n    enterChildren(event): void {\r\n        this.elementClick.emit({\r\n            key: this.key,\r\n            value: PepQuantitySelectorComponent.ENTER_CHILDREN,\r\n            controlType: this.controlType,\r\n            eventWhich: event.which,\r\n        });\r\n    }\r\n\r\n    enterPackage(event): void {\r\n        this.elementClick.emit({\r\n            key: this.key,\r\n            value: PepQuantitySelectorComponent.ENTER_PACKAGE,\r\n            controlType: this.controlType,\r\n            eventWhich: event.which,\r\n            otherData: this.notificationInfo,\r\n        });\r\n    }\r\n\r\n    setupQsButtons(qsWidth: number) {\r\n        this.showQsBtn = qsWidth > 120;\r\n\r\n        if (!this.cd['destroyed']) {\r\n            this.cd.detectChanges();\r\n        }\r\n    }\r\n\r\n    setQsView(): void {\r\n        if (\r\n            this.QSCont &&\r\n            this.QSCont.nativeElement &&\r\n            this.QSCont.nativeElement.clientWidth > 0\r\n        ) {\r\n            setTimeout(() => {\r\n                this.qsWidthSubject.next(this.QSCont.nativeElement.clientWidth);\r\n            }, 0);\r\n        }\r\n    }\r\n}\r\n","import { getLocaleNumberSymbol, NumberSymbol } from '@angular/common';\r\nimport {\r\n    Directive,\r\n    ElementRef,\r\n    HostListener,\r\n    Input,\r\n    OnInit,\r\n} from '@angular/core';\r\nimport { PepValidatorService } from '@pepperi-addons/ngx-lib';\r\n\r\n@Directive({\r\n    selector: '[pepQsValidation]',\r\n})\r\nexport class PepQuantitySelectorValidationDirective implements OnInit {\r\n    @Input() allowDecimal: boolean;\r\n\r\n    previousValue = '';\r\n\r\n    constructor(\r\n        private hostElement: ElementRef,\r\n        private validatorService: PepValidatorService\r\n    ) {}\r\n\r\n    ngOnInit() {\r\n        //\r\n    }\r\n\r\n    @HostListener('change', ['$event'])\r\n    onChange(e) {\r\n        this.validateValue(this.hostElement.nativeElement.value);\r\n    }\r\n\r\n    @HostListener('keydown', ['$event'])\r\n    onKeyDown(e: KeyboardEvent) {\r\n        const originalValue: string = e.target['value'];\r\n\r\n        // save value before keydown event\r\n        this.previousValue = originalValue;\r\n\r\n        const isNumber = this.validatorService.isNumber(e, this.allowDecimal);\r\n        if (isNumber) return;\r\n        else e.preventDefault();\r\n    }\r\n\r\n    validateValue(value: string): void {\r\n        const newValue = this.validatorService.validateNumber(\r\n            value,\r\n            this.allowDecimal\r\n        );\r\n        this.hostElement.nativeElement['value'] = newValue ? newValue : 0;\r\n    }\r\n}\r\n","import { Pipe, PipeTransform } from '@angular/core';\r\n\r\n@Pipe({ name: 'pepQuantitySelectorNumber' })\r\nexport class PepQuantitySelectorNumberPipe implements PipeTransform {\r\n    transform(value: string, allowDecimal: boolean): string {\r\n        const tmpValue = parseFloat(value);\r\n\r\n        if (tmpValue === 0) {\r\n            return '0';\r\n        } else if (allowDecimal) {\r\n            return tmpValue.toString();\r\n        } else {\r\n            return parseInt(value).toString();\r\n        }\r\n    }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { ReactiveFormsModule } from '@angular/forms';\r\n\r\nimport { MatCommonModule } from '@angular/material/core';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatBadgeModule } from '@angular/material/badge';\r\nimport { MatIconModule } from '@angular/material/icon';\r\n\r\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\r\nimport {\r\n    PepIconModule,\r\n    PepIconRegistry,\r\n    pepIconNumberMinus,\r\n    pepIconNumberPlus,\r\n} from '@pepperi-addons/ngx-lib/icon';\r\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\r\n\r\nimport { PepQuantitySelectorComponent } from './quantity-selector.component';\r\nimport { PepQuantitySelectorValidationDirective } from './quantity-selector-validation.directive';\r\nimport { PepQuantitySelectorNumberPipe } from './quantity-selector.pipes';\r\n\r\n@NgModule({\r\n    imports: [\r\n        CommonModule,\r\n        ReactiveFormsModule,\r\n        // Material modules\r\n        MatCommonModule,\r\n        MatFormFieldModule,\r\n        MatInputModule,\r\n        MatButtonModule,\r\n        MatBadgeModule,\r\n        MatIconModule,\r\n        // ngx-lib modules\r\n        PepNgxLibModule,\r\n        PepIconModule,\r\n        PepFieldTitleModule,\r\n    ],\r\n    exports: [PepQuantitySelectorComponent],\r\n    declarations: [\r\n        PepQuantitySelectorComponent,\r\n        PepQuantitySelectorNumberPipe,\r\n        PepQuantitySelectorValidationDirective,\r\n    ],\r\n})\r\nexport class PepQuantitySelectorModule {\r\n    constructor(private pepIconRegistry: PepIconRegistry) {\r\n        this.pepIconRegistry.registerIcons([\r\n            pepIconNumberMinus,\r\n            pepIconNumberPlus,\r\n        ]);\r\n    }\r\n}\r\n","/*\r\n * Public API Surface of ngx-lib/quantity-selector\r\n */\r\nexport * from './quantity-selector.module';\r\nexport * from './quantity-selector.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n\nexport {PepQuantitySelectorValidationDirective as ɵb} from './quantity-selector-validation.directive';\nexport {PepQuantitySelectorNumberPipe as ɵa} from './quantity-selector.pipes';"],"names":[],"mappings":"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"}
+{"version":3,"file":"pepperi-addons-ngx-lib-quantity-selector.js","sources":["../../../projects/ngx-lib/quantity-selector/quantity-selector.component.ts","../../../projects/ngx-lib/quantity-selector/quantity-selector-validation.directive.ts","../../../projects/ngx-lib/quantity-selector/quantity-selector.pipes.ts","../../../projects/ngx-lib/quantity-selector/quantity-selector.module.ts","../../../projects/ngx-lib/quantity-selector/public-api.ts","../../../projects/ngx-lib/quantity-selector/pepperi-addons-ngx-lib-quantity-selector.ts"],"sourcesContent":["import {\n    Component,\n    OnInit,\n    OnChanges,\n    OnDestroy,\n    Input,\n    Output,\n    EventEmitter,\n    ViewChild,\n    ElementRef,\n    ChangeDetectorRef,\n    ChangeDetectionStrategy,\n    Renderer2,\n    AfterViewInit,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport {\n    trigger,\n    state,\n    style,\n    animate,\n    transition,\n} from '@angular/animations';\nimport {\n    PepLayoutType,\n    PepStyleType,\n    PepCustomizationService,\n    PepHorizontalAlignment,\n    DEFAULT_HORIZONTAL_ALIGNMENT,\n    IPepFieldClickEvent,\n    PepQuantitySelectorFieldType,\n    PepQuantitySelectorField,\n    PepUtilitiesService,\n} from '@pepperi-addons/ngx-lib';\nimport { BehaviorSubject, fromEvent, Subject } from 'rxjs';\nimport { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';\nimport { TranslateService } from '@ngx-translate/core';\n\n@Component({\n    selector: 'pep-quantity-selector',\n    templateUrl: './quantity-selector.component.html',\n    styleUrls: ['./quantity-selector.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    animations: [\n        trigger('showHide', [\n            state(\n                'show',\n                style({\n                    opacity: 1,\n                    transform: 'scale(1)',\n                })\n            ),\n            state(\n                'hide',\n                style({\n                    opacity: 0,\n                    transform: 'scale(0)',\n                })\n            ),\n            transition('show => hide', animate('250ms ease-out')),\n            transition('hide => show', animate('250ms ease-in')),\n        ]),\n    ],\n})\nexport class PepQuantitySelectorComponent\n    implements OnChanges, OnInit, AfterViewInit, OnDestroy {\n    public static ENTER_CHILDREN = '[EnterChildren]';\n    public static ENTER_PACKAGE = '[EnterPackage]';\n    public static PLUS = '[+]';\n    public static MINUS = '[-]';\n\n    @Input() key = '';\n\n    private _value = null;\n    @Input()\n    set value(value: string) {\n        if (!value) {\n            value = '';\n        }\n\n        this._value = value;\n\n        if (this._calculateFormattedValue) {\n            this.setFormattedValue(value);\n        }\n    }\n    get value(): string {\n        return this._value;\n    }\n\n    private _formattedValue = null;\n    @Input()\n    set formattedValue(value: string) {\n        if (!value) {\n            value = '';\n        }\n\n        if (this._calculateFormattedValue) {\n            this._calculateFormattedValue = false;\n        }\n\n        this.setFormattedValue(value);\n    }\n    get formattedValue(): string {\n        return this._formattedValue;\n    }\n\n    @Input() label = '';\n    @Input() type: PepQuantitySelectorFieldType = 'qs';\n    @Input() mandatory = false;\n    @Input() disabled = false;\n    @Input() readonly = false;\n\n    private _textColor = '';\n    @Input()\n    set textColor(value: string) {\n        this._textColor = value;\n        this.isCaution = value === '#FF0000';\n    }\n    get textColor(): string {\n        return this._textColor;\n    }\n\n    @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n    @Input() rowSpan = 1;\n    @Input() allowDecimal = false;\n    @Input() additionalValue = '';\n\n    private _notificationInfo: any;\n    @Input()\n    set notificationInfo(value: any) {\n        this._notificationInfo = value;\n\n        const messages = value && value > 0 ? JSON.parse(value).Messages : '';\n        if (messages && messages.length > 0) {\n            // Replace the msg keys.\n            for (const msg of messages) {\n                if (msg.Key === 'Inventory_Limit_Msg') {\n                    msg.Key = 'MESSAGES.ERROR_INVENTORY_LIMIT';\n                } else if (msg.Key === 'Case_Quantity_Limit_Msg') {\n                    msg.Key = 'MESSAGES.ERROR_CASE_QUANTITY_LIMIT';\n                } else if (msg.Key === 'Min_Quantity_Limit_Msg') {\n                    msg.Key = 'MESSAGES.ERROR_MIN_QUANTITY_LIMIT';\n                } else if (msg.Key === 'Max_Quantity_Limit_Msg') {\n                    msg.Key = 'MESSAGES.ERROR_MAX_QUANTITY_LIMIT';\n                }\n            }\n\n            this.messages = messages;\n\n            const fieldControl = this.form.controls[this.key];\n            fieldControl.setErrors({\n                serverError: 'Error',\n            });\n\n            this.sameElementInTheWantedRow = null;\n            setTimeout(() => {\n                if (this.QSInput && this.QSInput.nativeElement) {\n                    this.QSInput.nativeElement.focus();\n                }\n            }, 150);\n        }\n    }\n    get notificationInfo(): any {\n        return this._notificationInfo;\n    }\n\n    private _visible = true;\n    @Input()\n    set visible(visible: boolean) {\n        this._visible = visible;\n        if (visible) {\n            this.renderer.removeClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        } else {\n            this.renderer.addClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        }\n    }\n    get visible(): boolean {\n        return this._visible;\n    }\n\n    controlType = 'qs';\n\n    @Input() form: FormGroup = null;\n    @Input() showTitle = true;\n    @Input() layoutType: PepLayoutType = 'form';\n    @Input() isActive = false;\n\n    // Get default style from theme.\n    @Input()\n    styleType: PepStyleType = document.documentElement.style.getPropertyValue(\n        PepCustomizationService.STYLE_QS_KEY\n    ) as PepStyleType; //'strong';\n\n    @Output()\n    valueChange: EventEmitter<string> = new EventEmitter<string>();\n\n    @Output()\n    elementClick: EventEmitter<IPepFieldClickEvent> = new EventEmitter<IPepFieldClickEvent>();\n\n    @ViewChild('QSCont') QSCont: ElementRef;\n    @ViewChild('QSInput') QSInput: ElementRef;\n\n    private _calculateFormattedValue = true;\n    get calculateFormattedValue(): boolean {\n        return this._calculateFormattedValue;\n    }\n\n    private readonly _destroyed: Subject<void>;\n    private qsWidthSubject: BehaviorSubject<number>;\n    lastQsContClientWidth = 0;\n    showQsBtn = true;\n\n    standAlone = false;\n    isInFocus = false;\n    isMatrixFocus = false;\n\n    isCaution = false;\n    messages: Array<any> = null;\n\n    sameElementInTheWantedRow = null;\n\n    isEmptyKey = false;\n\n    constructor(\n        private cd: ChangeDetectorRef,\n        private customizationService: PepCustomizationService,\n        private renderer: Renderer2,\n        private element: ElementRef,\n        private translate: TranslateService,\n        private utilitiesService: PepUtilitiesService\n    ) {\n        this._destroyed = new Subject();\n        this.qsWidthSubject = new BehaviorSubject(0);\n    }\n\n    setForm() {\n        const pepField = new PepQuantitySelectorField({\n            key: this.key,\n            value: this.value,\n            mandatory: this.mandatory,\n            readonly: this.readonly,\n            disabled: this.disabled,\n        });\n        this.form = this.customizationService.getDefaultFromGroup(pepField);\n    }\n\n    private setFormattedValue(value: string) {\n        if (this._calculateFormattedValue) {\n            this._formattedValue = this.utilitiesService.formatNumber(value);\n        } else {\n            this._formattedValue = value;\n        }\n\n        this.updateFormFieldValue();\n    }\n\n    private updateFormFieldValue() {\n        this.customizationService.updateFormFieldValue(\n            this.form,\n            this.key,\n            this.formattedValue\n        );\n    }\n\n    get displayValue(): string {\n        const res = this.isInFocus\n            ? parseFloat(this.value).toString()\n            : this.formattedValue;\n        return res;\n    }\n\n    protected getDestroyer() {\n        return takeUntil(this._destroyed);\n    }\n\n    ngOnInit(): void {\n        if (this.form === null) {\n            if (this.key === '') {\n                this.isEmptyKey = true;\n            }\n\n            this.standAlone = true;\n            this.setForm();\n\n            this.renderer.addClass(\n                this.element.nativeElement,\n                PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME\n            );\n        }\n\n        this.qsWidthSubject\n            .asObservable()\n            .pipe(this.getDestroyer(), distinctUntilChanged())\n            .subscribe((qsWidth: number) => {\n                this.setupQsButtons(qsWidth);\n            });\n\n        this.updateFormFieldValue();\n    }\n\n    ngAfterViewInit() {\n        //\n    }\n\n    ngAfterViewChecked(): void {\n        this.setQsView();\n    }\n\n    ngOnChanges(changes: any): void {\n        // Bug fix for addons when the key is '' in the ngOnInit for some reson\n        if (this.isEmptyKey && this.key !== '') {\n            this.setForm();\n        }\n\n        setTimeout(() => {\n            this.focusToTheSameElementInTheWantedRow();\n        }, 150);\n    }\n\n    ngOnDestroy(): void {\n        this._destroyed.next();\n        this._destroyed.complete();\n    }\n\n    get getAdditionalValue(): string {\n        return this.additionalValue.length > 0 ? 'show' : 'hide';\n    }\n\n    getParentByClass(el, parentSelector /* optional */): any {\n        // If no parentSelector defined will bubble up all the way to *document*\n        if (parentSelector === undefined) {\n            parentSelector = document;\n        }\n\n        let p = el.parentNode;\n\n        while (\n            p &&\n            !p?.classList?.contains(parentSelector) &&\n            parentSelector !== document\n        ) {\n            const o = p;\n            p = o?.parentNode || null;\n        }\n\n        return p?.className.indexOf(parentSelector) > -1 ? p : null;\n    }\n\n    getSameElementInTheWantedRowByClassName(event: any, isNext = true): any {\n        const eventTarget = event.target || event.srcElement;\n        let sameElementInTheWantedRowByClassName;\n\n        let parentSelector;\n        if (this.layoutType === 'table') {\n            parentSelector = this.getParentByClass(eventTarget, 'table-row');\n        } else if (this.layoutType === 'card') {\n            parentSelector = this.getParentByClass(eventTarget, 'card-view');\n            if (!parentSelector) {\n                parentSelector = this.getParentByClass(\n                    eventTarget,\n                    'line-view'\n                );\n            }\n        }\n\n        if (\n            parentSelector.nextElementSibling === null &&\n            parentSelector.previousElementSibling === null\n        ) {\n            sameElementInTheWantedRowByClassName = null;\n        } else {\n            if (isNext) {\n                if (parentSelector.nextElementSibling === null) {\n                    sameElementInTheWantedRowByClassName = parentSelector.parentElement.querySelectorAll(\n                        '[name=' + this.key + ']'\n                    )[0];\n                } else {\n                    sameElementInTheWantedRowByClassName = parentSelector.nextElementSibling.querySelectorAll(\n                        '[name=' + this.key + ']'\n                    )[0];\n                }\n            } else {\n                if (parentSelector.previousElementSibling === null) {\n                    const elementsList = parentSelector.parentElement.querySelectorAll(\n                        '[name=' + this.key + ']'\n                    );\n                    sameElementInTheWantedRowByClassName =\n                        elementsList[elementsList.length - 1];\n                } else {\n                    sameElementInTheWantedRowByClassName = parentSelector.previousElementSibling.querySelectorAll(\n                        '[name=' + this.key + ']'\n                    )[0];\n                }\n            }\n        }\n\n        return sameElementInTheWantedRowByClassName;\n    }\n\n    setSameElementInTheWantedRow(event: any, isNext = true): void {\n        // Navigate to the QS in the next row.\n        if (this.layoutType === 'card' || this.layoutType === 'table') {\n            this.sameElementInTheWantedRow = this.getSameElementInTheWantedRowByClassName(\n                event,\n                isNext\n            );\n        }\n\n        this.QSInput.nativeElement.blur();\n    }\n\n    focusToTheSameElementInTheWantedRow(): void {\n        if (this.sameElementInTheWantedRow) {\n            const elem = this.sameElementInTheWantedRow;\n            // If this is regular item (qs and not button) .\n            if (elem instanceof HTMLInputElement && elem.type === 'text') {\n                elem.click();\n                elem.select();\n            } else {\n                const parentElem = elem.parentNode;\n                parentElem.click();\n                elem.focus();\n            }\n            this.sameElementInTheWantedRow = null;\n        }\n    }\n\n    cleanError(): void {\n        const fieldControl = this.form.controls[this.key];\n\n        // Clean the error message\n        if (this.messages && this.messages.length > 0) {\n            this.messages = this.notificationInfo = null;\n            fieldControl.setErrors(null);\n        }\n    }\n\n    onMatrixMouseEnter(event: any): void {\n        this.isMatrixFocus = true;\n    }\n\n    onMatrixMouseleave(event: any): void {\n        this.isMatrixFocus = false;\n    }\n\n    onMatrixClick(event: any): void {\n        this.isInFocus = true;\n\n        if (this.QSInput && this.QSInput.nativeElement) {\n            this.QSInput.nativeElement.focus();\n        }\n    }\n\n    onMatrixBlur(event: any): void {\n        if (\n            !event.relatedTarget ||\n            event.relatedTarget.className.indexOf('qs') < 0\n        ) {\n            this.isMatrixFocus = false;\n        }\n\n        this.onBlur(event);\n    }\n\n    onFocus(event: any): void {\n        this.isInFocus = true;\n    }\n\n    isDifferentValue(value: string): boolean {\n        let res = false;\n\n        const currentValue = this.utilitiesService.coerceNumberProperty(\n            this.value\n        );\n        const newValue = this.utilitiesService.coerceNumberProperty(value);\n\n        res = currentValue !== newValue;\n\n        return res;\n    }\n\n    onBlur(event: any): void {\n        this.isInFocus = false;\n        this.cleanError();\n        const value = event.target ? event.target.value : event;\n\n        if (value !== this.value && this.isDifferentValue(value)) {\n            this.value = value;\n\n            // If the user is setting the formatted value then set the value till the user format it and return it back.\n            if (!this._calculateFormattedValue) {\n                this._formattedValue = value;\n            }\n\n            this.valueChange.emit(this.value);\n        } else {\n            this.focusToTheSameElementInTheWantedRow();\n        }\n    }\n\n    onKeydown(event): any {\n        const keyboardEvent = event as KeyboardEvent;\n\n        if (keyboardEvent.key === 'Enter') {\n            this.setSameElementInTheWantedRow(\n                keyboardEvent,\n                !keyboardEvent.shiftKey\n            );\n            return true;\n        }\n    }\n\n    increment(event): void {\n        if (this.standAlone) {\n            this.value = this.utilitiesService.incrementNumber(this.value);\n        }\n\n        this.elementClick.emit({\n            key: this.key,\n            value: PepQuantitySelectorComponent.PLUS,\n            controlType: this.controlType,\n            eventWhich: event.which,\n        });\n        event.stopPropagation();\n    }\n\n    decrement(event): void {\n        if (this.standAlone) {\n            this.value = this.utilitiesService.decrementNumber(this.value);\n        }\n\n        this.elementClick.emit({\n            key: this.key,\n            value: PepQuantitySelectorComponent.MINUS,\n            controlType: this.controlType,\n            eventWhich: event.which,\n        });\n        event.stopPropagation();\n    }\n\n    enterChildren(event): void {\n        this.elementClick.emit({\n            key: this.key,\n            value: PepQuantitySelectorComponent.ENTER_CHILDREN,\n            controlType: this.controlType,\n            eventWhich: event.which,\n        });\n    }\n\n    enterPackage(event): void {\n        this.elementClick.emit({\n            key: this.key,\n            value: PepQuantitySelectorComponent.ENTER_PACKAGE,\n            controlType: this.controlType,\n            eventWhich: event.which,\n            otherData: this.notificationInfo,\n        });\n    }\n\n    setupQsButtons(qsWidth: number) {\n        this.showQsBtn = qsWidth > 120;\n\n        if (!this.cd['destroyed']) {\n            this.cd.detectChanges();\n        }\n    }\n\n    setQsView(): void {\n        if (\n            this.QSCont &&\n            this.QSCont.nativeElement &&\n            this.QSCont.nativeElement.clientWidth > 0\n        ) {\n            setTimeout(() => {\n                this.qsWidthSubject.next(this.QSCont.nativeElement.clientWidth);\n            }, 0);\n        }\n    }\n}\n","import { getLocaleNumberSymbol, NumberSymbol } from '@angular/common';\nimport {\n    Directive,\n    ElementRef,\n    HostListener,\n    Input,\n    OnInit,\n} from '@angular/core';\nimport { PepValidatorService } from '@pepperi-addons/ngx-lib';\n\n@Directive({\n    selector: '[pepQsValidation]',\n})\nexport class PepQuantitySelectorValidationDirective implements OnInit {\n    @Input() allowDecimal: boolean;\n\n    previousValue = '';\n\n    constructor(\n        private hostElement: ElementRef,\n        private validatorService: PepValidatorService\n    ) {}\n\n    ngOnInit() {\n        //\n    }\n\n    @HostListener('change', ['$event'])\n    onChange(e) {\n        this.validateValue(this.hostElement.nativeElement.value);\n    }\n\n    @HostListener('keydown', ['$event'])\n    onKeyDown(e: KeyboardEvent) {\n        const originalValue: string = e.target['value'];\n\n        // save value before keydown event\n        this.previousValue = originalValue;\n\n        const isNumber = this.validatorService.isNumber(e, this.allowDecimal);\n        if (isNumber) return;\n        else e.preventDefault();\n    }\n\n    validateValue(value: string): void {\n        const newValue = this.validatorService.validateNumber(\n            value,\n            this.allowDecimal\n        );\n        this.hostElement.nativeElement['value'] = newValue ? newValue : 0;\n    }\n}\n","import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({ name: 'pepQuantitySelectorNumber' })\nexport class PepQuantitySelectorNumberPipe implements PipeTransform {\n    transform(value: string, allowDecimal: boolean): string {\n        const tmpValue = parseFloat(value);\n\n        if (tmpValue === 0) {\n            return '0';\n        } else if (allowDecimal) {\n            return tmpValue.toString();\n        } else {\n            return parseInt(value).toString();\n        }\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatBadgeModule } from '@angular/material/badge';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n    PepIconModule,\n    PepIconRegistry,\n    pepIconNumberMinus,\n    pepIconNumberPlus,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\n\nimport { PepQuantitySelectorComponent } from './quantity-selector.component';\nimport { PepQuantitySelectorValidationDirective } from './quantity-selector-validation.directive';\nimport { PepQuantitySelectorNumberPipe } from './quantity-selector.pipes';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,\n        // Material modules\n        MatCommonModule,\n        MatFormFieldModule,\n        MatInputModule,\n        MatButtonModule,\n        MatBadgeModule,\n        MatIconModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepIconModule,\n        PepFieldTitleModule,\n    ],\n    exports: [PepQuantitySelectorComponent],\n    declarations: [\n        PepQuantitySelectorComponent,\n        PepQuantitySelectorNumberPipe,\n        PepQuantitySelectorValidationDirective,\n    ],\n})\nexport class PepQuantitySelectorModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons([\n            pepIconNumberMinus,\n            pepIconNumberPlus,\n        ]);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/quantity-selector\n */\nexport * from './quantity-selector.module';\nexport * from './quantity-selector.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n\nexport {PepQuantitySelectorValidationDirective as ɵb} from './quantity-selector-validation.directive';\nexport {PepQuantitySelectorNumberPipe as ɵa} from './quantity-selector.pipes';"],"names":[],"mappings":"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"}

package/fesm2015/pepperi-addons-ngx-lib-rich-html-textarea.js

@@ -36,7 +36,6 @@ class PepRichHtmlTextareaComponent {
         this.form = null;
         this.isActive = false;
         this.showTitle = true;
-        this.renderTitle = true;
         this._layoutType = 'form';
         this.inlineMode = false;
         this.valueChange = new EventEmitter();
@@ -101,9 +100,6 @@ class PepRichHtmlTextareaComponent {
             this.setFieldHeight();
             this.setDefaultForm();
             this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
-            if (!this.renderTitle) {
-                this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME);
-            }
         }
         this.quillContent = this.value;
     }
@@ -198,7 +194,7 @@ class PepRichHtmlTextareaComponent {
 PepRichHtmlTextareaComponent.decorators = [
     { type: Component, args: [{
                 selector: 'pep-rich-html-textarea',
-                template: "<ng-container [formGroup]=\"form\">\r\n    <ng-template #pepTemplate let-isFormView=\"isFormView\">\r\n        <div class=\"pep-textarea-container pep-report-textarea\" [ngClass]=\"{ 'stand-alone': standAlone,\r\n            'right-alignment': xAlignment == 'right', 'one-row': !isFormView && rowSpan === 1,\r\n            'pep-textarea-card-container': layoutType === 'card'}\">\r\n            <pep-field-title *ngIf=\"renderTitle && isFormView\" [label]=\"label\" [mandatory]=\"mandatory\"\r\n                [disabled]=\"disabled\"\r\n                [maxFieldCharacters]=\"inlineMode && !disabled && !readonly ? maxFieldCharacters : 0\"\r\n                [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\" [inputLength]=\"quillContent?.length\">\r\n            </pep-field-title>\r\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\r\n                [ngClass]=\"{ 'pep-table-textarea': layoutType === 'table', 'active': active, 'ignore-disabled': disabled }\">\r\n                <textarea [hidden]=\"true\" matInput [formControlName]=\"key\"></textarea>\r\n\r\n                <ng-container *ngIf=\"inlineMode; then inlineBlock; else notInlineBlock\"></ng-container>\r\n\r\n                <ng-template #inlineBlock>\r\n                    <ng-container *ngTemplateOutlet=\"quilTemplate; context: {inDialog: false}\"></ng-container>\r\n                </ng-template>\r\n                <ng-template #notInlineBlock>\r\n\r\n                    <!-- We can use the quill-view-html\r\n                    <quill-view-html class=\"body-sm rich-text-cont \"\r\n                    [ngStyle]=\"{ 'text-align': xAlignment == 'right' ? 'right' : 'left' }\" [content]=\"value | pepSafeHtml\"\r\n                    theme=\"snow\" [style.height]=\"fieldHeight\"></quill-view-html> \r\n                -->\r\n\r\n                    <div class=\"body-sm rich-text-cont \"\r\n                        [ngStyle]=\"{ 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\r\n                        [innerHtml]=\"value | pepSafeHtml\" [style.height]=\"fieldHeight\">\r\n                    </div>\r\n                </ng-template>\r\n                <pep-textbox-icon matSuffix [value]=\"value\" [label]=\"label\" [type]=\"controlType\"\r\n                    [disabled]=\"disabled || readonly\"\r\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\"\r\n                    (iconClick)=\"openDialog()\">\r\n                </pep-textbox-icon>\r\n                <mat-error>\r\n                    <span class=\"body-xs\"\r\n                        [title]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"\r\n                        [innerText]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"></span>\r\n                </mat-error>\r\n\r\n            </mat-form-field>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'form'\">\r\n        <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true }\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'card'\">\r\n        <div class=\"pep-textarea-card-container card-flex-container\"\r\n            [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\r\n            [ngStyle]=\"{ '-webkit-line-clamp': rowSpan }\" [class]=\"'text-align-' + xAlignment\"\r\n            (click)=\"!disabled ? cardTemplateClicked($event) : ''\" [style.height]=\"fieldHeight\">\r\n            <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title no-shrink\" title=\"{{ label }}\">{{ label\r\n                }}:&nbsp;</span>\r\n            <span [id]=\"key\" class=\"body-sm value wrap\" [innerHtml]=\"value | pepSafeHtml\"></span>\r\n            <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button self-start\"\r\n                [ngClass]=\"{'self-end' : value && value !== ''}\" mat-button>\r\n                <mat-icon>\r\n                    <pep-icon name=\"system_edit\">\r\n                    </pep-icon>\r\n                </mat-icon>\r\n            </button>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'table'\">\r\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\r\n        <ng-template #selectedBlock>\r\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\r\n        </ng-template>\r\n        <ng-template #notSelectedBlock>\r\n            <ng-container *ngIf=\"value?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\r\n            <ng-template #notEmptyBlock>\r\n                <div class=\"pep-textarea-card-container card-flex-container one-row\">\r\n                    <span [id]=\"key\" class=\"wrap\" [innerHtml]=\"value | pepSafeHtml\"></span>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template #emptyBlock>\r\n                <span>&nbsp;</span>\r\n            </ng-template>\r\n        </ng-template>\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #richTextEditorDialogTemplate>\r\n    <div class=\"rich-text-editor-container\">\r\n        <button mat-button [mat-dialog-close]=\"null\" class=\"pep-button icon-button md weak pull-right flip\">\r\n            <mat-icon>\r\n                <pep-icon name=\"system_close\">\r\n                </pep-icon>\r\n            </mat-icon>\r\n        </button>\r\n        <ng-container *ngTemplateOutlet=\"quilTemplate; context: {inDialog: true}\"></ng-container>\r\n        <div mat-dialog-actions class=\" pep-border-top\">\r\n            <div class=\"pep-spacing-element-negative\">\r\n                <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\r\n                    {{'ACTIONS.CANCEL' | translate}}\r\n                </button>\r\n                <button mat-button [mat-dialog-close]=\"quillContentDialog || ''\" [disabled]=\"disabled\"\r\n                    class=\"pep-spacing-element pep-button md strong \">\r\n                    {{'ACTIONS.SAVE' | translate}}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #quilTemplate let-inDialog=\"inDialog\">\r\n    <quill-editor id=\"{{inDialog ? 'quill-editor-dialog' : 'quill-editor-inline'}}\"\r\n        [class]=\"inDialog ? 'dialog-quill' : 'inline-quill'\" [ngClass]=\"{ 'rich-text-cont': !inDialog }\"\r\n        placeholder=\"{{'RICH_TEXTAREA.HINT' | translate}}\" [ngModel]=\"inDialog ? quillContentDialog : quillContent\"\r\n        [sanitize]=\"true\" [readOnly]=\"disabled\" [maxLength]=\"maxFieldCharacters\" [required]=\"mandatory\"\r\n        (onEditorCreated)=\"onEditorCreated($event, inDialog)\" (onContentChanged)=\"onContentChanged($event, inDialog)\"\r\n        (onBlur)=\"onBlur($event, inDialog)\" (onFocus)=\"onFocus($event, inDialog)\" theme=\"\">\r\n        <div *ngIf=\"!disabled\" quill-editor-toolbar>\r\n            <div class=\"pep-spacing-element-negative\">\r\n                <span class=\"ql-formats\">\r\n                    <select *ngIf=\"toolbarOptions?.font\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-font select-arrow\">\r\n                        <option selected></option>\r\n                        <option value=\"serif\"></option>\r\n                        <option value=\"monospace\"></option>\r\n                    </select>\r\n                    <select *ngIf=\"toolbarOptions?.size\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-size select-arrow\">\r\n                        <option value=\"small\"></option>\r\n                        <option selected></option>\r\n                        <option value=\"large\"></option>\r\n                        <option value=\"huge\"></option>\r\n                    </select>\r\n                </span>\r\n                <span class=\"ql-formats\">\r\n                    <select *ngIf=\"toolbarOptions?.header\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-header select-arrow\">\r\n                        <option value=\"1\"></option>\r\n                        <option value=\"2\"></option>\r\n                        <option value=\"3\"></option>\r\n                        <!-- \r\n                        <option value=\"4\"></option>\r\n                        <option value=\"5\"></option>\r\n                        <option value=\"6\"></option> \r\n                        -->\r\n                        <option value=\"false\" selected></option>\r\n                    </select>\r\n                </span>\r\n                <!-- <hr class=\"vertical-separator\" /> -->\r\n                <span class=\"ql-formats\">\r\n                    <button mat-button *ngIf=\"toolbarOptions?.bold\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-bold\"></button>\r\n                    <button mat-button *ngIf=\"toolbarOptions?.italic\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-italic\"></button>\r\n                    <button mat-button *ngIf=\"toolbarOptions?.underline\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-underline\"></button>\r\n                    <button mat-button *ngIf=\"toolbarOptions?.strike\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-strike\"></button>\r\n                </span>\r\n                <span class=\"ql-formats\">\r\n                    <button mat-button *ngIf=\"toolbarOptions?.link\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-link\"></button>\r\n                    <button mat-button *ngIf=\"toolbarOptions?.image\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-image\"></button>\r\n                </span>\r\n                <!-- <hr class=\"vertical-separator\" /> -->\r\n                <span class=\"ql-formats\">\r\n                    <button mat-button *ngIf=\"toolbarOptions?.ordered\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-list\" value=\"ordered\"></button>\r\n                    <button mat-button *ngIf=\"toolbarOptions?.bullet\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-list\" value=\"bullet\"></button>\r\n                </span>\r\n                <!-- <hr class=\"vertical-separator\" /> -->\r\n                <span class=\"ql-formats\">\r\n                    <select *ngIf=\"toolbarOptions?.color\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-color\"></select>\r\n                    <select *ngIf=\"toolbarOptions?.background\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-background\"></select>\r\n                </span>\r\n                <span class=\"ql-formats\">\r\n                    <select *ngIf=\"toolbarOptions?.align\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-align\">\r\n                        <option selected></option>\r\n                        <option value=\"center\"></option>\r\n                        <option value=\"right\"></option>\r\n                        <option value=\"justify\"></option>\r\n                    </select>\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </quill-editor>\r\n</ng-template>",
+                template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\">\n        <div class=\"pep-textarea-container pep-report-textarea\" [ngClass]=\"{ 'stand-alone': standAlone,\n            'right-alignment': xAlignment == 'right', 'one-row': !isFormView && rowSpan === 1,\n            'pep-textarea-card-container': layoutType === 'card'}\">\n            <pep-field-title *ngIf=\"isFormView\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n                [maxFieldCharacters]=\"inlineMode && !disabled && !readonly ? maxFieldCharacters : 0\"\n                [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\" [inputLength]=\"quillContent?.length\">\n            </pep-field-title>\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                [ngClass]=\"{ 'pep-table-textarea': layoutType === 'table', 'active': active, 'ignore-disabled': disabled }\">\n                <textarea [hidden]=\"true\" matInput [formControlName]=\"key\"></textarea>\n\n                <ng-container *ngIf=\"inlineMode; then inlineBlock; else notInlineBlock\"></ng-container>\n\n                <ng-template #inlineBlock>\n                    <ng-container *ngTemplateOutlet=\"quilTemplate; context: {inDialog: false}\"></ng-container>\n                </ng-template>\n                <ng-template #notInlineBlock>\n\n                    <!-- We can use the quill-view-html\n                    <quill-view-html class=\"body-sm rich-text-cont \"\n                    [ngStyle]=\"{ 'text-align': xAlignment == 'right' ? 'right' : 'left' }\" [content]=\"value | pepSafeHtml\"\n                    theme=\"snow\" [style.height]=\"fieldHeight\"></quill-view-html> \n                -->\n\n                    <div class=\"body-sm rich-text-cont \"\n                        [ngStyle]=\"{ 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                        [innerHtml]=\"value | pepSafeHtml\" [style.height]=\"fieldHeight\">\n                    </div>\n                </ng-template>\n                <pep-textbox-icon matSuffix [value]=\"value\" [label]=\"label\" [type]=\"controlType\"\n                    [disabled]=\"disabled || readonly\"\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\"\n                    (iconClick)=\"openDialog()\">\n                </pep-textbox-icon>\n                <mat-error>\n                    <span class=\"body-xs\"\n                        [title]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"\n                        [innerText]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"></span>\n                </mat-error>\n\n            </mat-form-field>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true }\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <div class=\"pep-textarea-card-container card-flex-container\"\n            [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n            [ngStyle]=\"{ '-webkit-line-clamp': rowSpan }\" [class]=\"'text-align-' + xAlignment\"\n            (click)=\"!disabled ? cardTemplateClicked($event) : ''\" [style.height]=\"fieldHeight\">\n            <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title no-shrink\" title=\"{{ label }}\">{{ label\n                }}:&nbsp;</span>\n            <span [id]=\"key\" class=\"body-sm value wrap\" [innerHtml]=\"value | pepSafeHtml\"></span>\n            <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button self-start\"\n                [ngClass]=\"{'self-end' : value && value !== ''}\" mat-button>\n                <mat-icon>\n                    <pep-icon name=\"system_edit\">\n                    </pep-icon>\n                </mat-icon>\n            </button>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"value?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <div class=\"pep-textarea-card-container card-flex-container one-row\">\n                    <span [id]=\"key\" class=\"wrap\" [innerHtml]=\"value | pepSafeHtml\"></span>\n                </div>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span>&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n</ng-container>\n\n<ng-template #richTextEditorDialogTemplate>\n    <div class=\"rich-text-editor-container\">\n        <button mat-button [mat-dialog-close]=\"null\" class=\"pep-button icon-button md weak pull-right flip\">\n            <mat-icon>\n                <pep-icon name=\"system_close\">\n                </pep-icon>\n            </mat-icon>\n        </button>\n        <ng-container *ngTemplateOutlet=\"quilTemplate; context: {inDialog: true}\"></ng-container>\n        <div mat-dialog-actions class=\" pep-border-top\">\n            <div class=\"pep-spacing-element-negative\">\n                <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\n                    {{'ACTIONS.CANCEL' | translate}}\n                </button>\n                <button mat-button [mat-dialog-close]=\"quillContentDialog || ''\" [disabled]=\"disabled\"\n                    class=\"pep-spacing-element pep-button md strong \">\n                    {{'ACTIONS.SAVE' | translate}}\n                </button>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #quilTemplate let-inDialog=\"inDialog\">\n    <quill-editor id=\"{{inDialog ? 'quill-editor-dialog' : 'quill-editor-inline'}}\"\n        [class]=\"inDialog ? 'dialog-quill' : 'inline-quill'\" [ngClass]=\"{ 'rich-text-cont': !inDialog }\"\n        placeholder=\"{{'RICH_TEXTAREA.HINT' | translate}}\" [ngModel]=\"inDialog ? quillContentDialog : quillContent\"\n        [sanitize]=\"true\" [readOnly]=\"disabled\" [maxLength]=\"maxFieldCharacters\" [required]=\"mandatory\"\n        (onEditorCreated)=\"onEditorCreated($event, inDialog)\" (onContentChanged)=\"onContentChanged($event, inDialog)\"\n        (onBlur)=\"onBlur($event, inDialog)\" (onFocus)=\"onFocus($event, inDialog)\" theme=\"\">\n        <div *ngIf=\"!disabled\" quill-editor-toolbar>\n            <div class=\"pep-spacing-element-negative\">\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.font\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-font select-arrow\">\n                        <option selected></option>\n                        <option value=\"serif\"></option>\n                        <option value=\"monospace\"></option>\n                    </select>\n                    <select *ngIf=\"toolbarOptions?.size\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-size select-arrow\">\n                        <option value=\"small\"></option>\n                        <option selected></option>\n                        <option value=\"large\"></option>\n                        <option value=\"huge\"></option>\n                    </select>\n                </span>\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.header\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-header select-arrow\">\n                        <option value=\"1\"></option>\n                        <option value=\"2\"></option>\n                        <option value=\"3\"></option>\n                        <!-- \n                        <option value=\"4\"></option>\n                        <option value=\"5\"></option>\n                        <option value=\"6\"></option> \n                        -->\n                        <option value=\"false\" selected></option>\n                    </select>\n                </span>\n                <!-- <hr class=\"vertical-separator\" /> -->\n                <span class=\"ql-formats\">\n                    <button mat-button *ngIf=\"toolbarOptions?.bold\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-bold\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.italic\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-italic\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.underline\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-underline\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.strike\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-strike\"></button>\n                </span>\n                <span class=\"ql-formats\">\n                    <button mat-button *ngIf=\"toolbarOptions?.link\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-link\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.image\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-image\"></button>\n                </span>\n                <!-- <hr class=\"vertical-separator\" /> -->\n                <span class=\"ql-formats\">\n                    <button mat-button *ngIf=\"toolbarOptions?.ordered\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-list\" value=\"ordered\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.bullet\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-list\" value=\"bullet\"></button>\n                </span>\n                <!-- <hr class=\"vertical-separator\" /> -->\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.color\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-color\"></select>\n                    <select *ngIf=\"toolbarOptions?.background\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-background\"></select>\n                </span>\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.align\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-align\">\n                        <option selected></option>\n                        <option value=\"center\"></option>\n                        <option value=\"right\"></option>\n                        <option value=\"justify\"></option>\n                    </select>\n                </span>\n            </div>\n        </div>\n    </quill-editor>\n</ng-template>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [":host{height:inherit;display:block}.pep-textarea-container ::ng-deep.mat-form-field-infix,.pepperi-textarea-container ::ng-deep.mat-form-field-infix{margin-left:calc(.75rem * -1);margin-left:calc(var(--pep-spacing-md, .75rem) * -1)}.pep-textarea-container.right-alignment ::ng-deep.mat-form-field-infix,.pepperi-textarea-container.right-alignment ::ng-deep.mat-form-field-infix{margin-left:unset;margin-right:calc(.75rem * -1);margin-right:calc(var(--pep-spacing-md, .75rem) * -1)}.vertical-separator{display:none}"]
             },] }
@@ -224,7 +220,6 @@ PepRichHtmlTextareaComponent.propDecorators = {
     form: [{ type: Input }],
     isActive: [{ type: Input }],
     showTitle: [{ type: Input }],
-    renderTitle: [{ type: Input }],
     layoutType: [{ type: Input }],
     inlineMode: [{ type: Input }],
     toolbarOptions: [{ type: Input }],