@pepperi-addons/ngx-lib 0.3.9-beta.21 → 0.3.9-beta.22

package/bundles/pepperi-addons-ngx-lib-bread-crumbs.umd.js

@@ -4,135 +4,135 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['pepperi-addons'] = global['pepperi-addons'] || {}, global['pepperi-addons']['ngx-lib'] = global['pepperi-addons']['ngx-lib'] || {}, global['pepperi-addons']['ngx-lib']['bread-crumbs'] = {}), global.ng.core, global.ng.common, global.ng.material.icon, global.ng.material.menu, global['pepperi-addons']['ngx-lib'], global['pepperi-addons']['ngx-lib'].icon));
 }(this, (function (exports, core, common, icon$1, menu, ngxLib, icon) { 'use strict';
 
-    var PepBreadCrumbsComponent = /** @class */ (function () {
-        function PepBreadCrumbsComponent(layoutService) {
-            this.layoutService = layoutService;
-            this._items = [];
-            this._displayType = 'label';
-            this.addSpacing = false;
-            this.itemClick = new core.EventEmitter();
-            this.charSeparator = ' / ';
-            this.iconSeparator = icon.pepIconArrowRight.name;
-            this.shrinkItems = false;
-        }
-        Object.defineProperty(PepBreadCrumbsComponent.prototype, "items", {
-            get: function () {
-                return this._items;
-            },
-            set: function (value) {
-                this._items = value;
-                this.setupShrinkItems();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepBreadCrumbsComponent.prototype, "displayType", {
-            get: function () {
-                return this._displayType;
-            },
-            set: function (value) {
-                this._displayType = value;
-                this.setupShrinkItems();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PepBreadCrumbsComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.layoutService.onResize$.pipe().subscribe(function (size) {
-                _this.screenSize = size;
-                _this.setupShrinkItems();
-            });
-            if (this.layoutService.isRtl()) {
-                this.charSeparator = ' \\ ';
-                this.iconSeparator = icon.pepIconArrowLeft.name;
-            }
-        };
-        PepBreadCrumbsComponent.prototype.setupShrinkItems = function () {
-            if (this.displayType === 'items' && this.items.length > 1) {
-                this.shrinkItems = this.screenSize > ngxLib.PepScreenSizeType.SM;
-            }
-        };
-        PepBreadCrumbsComponent.prototype.getLabelTitle = function () {
-            var labelTitle = '';
-            if (this.items && this.items.length > 0) {
-                for (var index = 0; index < this.items.length; index++) {
-                    if (index < this.items.length - 1) {
-                        if (index > 0) {
-                            labelTitle += this.charSeparator;
-                        }
-                        labelTitle += this.items[index].text;
-                    }
-                }
-            }
-            return labelTitle;
-        };
-        PepBreadCrumbsComponent.prototype.onBreadCrumbItemClick = function (item) {
-            this.itemClick.emit({ source: item });
-        };
-        return PepBreadCrumbsComponent;
-    }());
-    PepBreadCrumbsComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'pep-bread-crumbs',
-                    template: "<ng-container *ngIf=\"displayType === 'label'; then labelTemplate; else itemsTemplate\">\n</ng-container>\n<ng-template #labelTemplate>\n    <div *ngIf=\"items?.length > 0\" class=\"bread-crumbs-label ellipsis\" [ngClass]=\"{ 'pep-spacing-element': addSpacing }\"\n        [title]=\"getLabelTitle()\">\n        <div class=\"body-xs ellipsis\">\n            <ng-container *ngFor=\"let item of items; let isFirst = first; let isLast = last\">\n                <span *ngIf=\"!isFirst && !isLast\">&nbsp;{{ charSeparator }}&nbsp;</span>\n                <span *ngIf=\"!isLast\">{{ item.text }}</span>\n            </ng-container>\n        </div>\n        <div class=\" title-md ellipsis current\" title=\"{{ items[items.length - 1]?.text }}\">\n            <span>{{ items[items.length - 1]?.text }}</span>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #itemsTemplate>\n    <ul *ngIf=\"items?.length > 0\" class=\"bread-crumbs-items body-sm ellipsis\">\n        <ng-container *ngIf=\"shrinkItems; then shrinkTemplate; else regularTemplate\">\n        </ng-container>\n\n        <ng-template #shrinkTemplate>\n            <li>\n                <a class=\"color-link\" [matMenuTriggerFor]=\"menu\" href=\"javascript:void(0)\">...</a>\n                <mat-menu #menu=\"matMenu\">\n                    <ng-container *ngFor=\"let menuItem of items; let isLast = last\">\n                        <button mat-menu-item *ngIf=\"!isLast\" (click)=\"onBreadCrumbItemClick(menuItem)\"\n                            [title]=\"menuItem.title || menuItem.text\" [disabled]=\"menuItem.disabled\"\n                            [ngClass]=\"{ disabled: menuItem.disabled }\">\n                            <span>\n                                {{ menuItem.text }}\n                            </span>\n                        </button>\n                    </ng-container>\n                </mat-menu>\n            </li>\n            <li>\n                <mat-icon class=\"seperator pep-spacing-element\">\n                    <pep-icon [name]=\"iconSeparator\">\n                    </pep-icon>\n                </mat-icon>\n            </li>\n            <li>\n                <span [title]=\"items[items.length - 1]?.title || items[items.length - 1]?.text\">\n                    {{ items[items.length - 1]?.text }}\n                </span>\n            </li>\n        </ng-template>\n        <ng-template #regularTemplate>\n            <ng-container *ngFor=\"let item of items; let isFirst = first; let isLast = last\">\n                <li>\n                    <a *ngIf=\"!item.disabled\" [title]=\"item.title || item.text\" href=\"javascript:void(0)\"\n                        class=\" color-link\" (click)=\"onBreadCrumbItemClick(item)\">{{ item.text }}</a>\n                    <span *ngIf=\"item.disabled\" [title]=\"item.title || item.text\">{{ item.text }}</span>\n                </li>\n                <li *ngIf=\"!isLast\">\n                    <mat-icon class=\"seperator pep-spacing-element\">\n                        <pep-icon [name]=\"iconSeparator\">\n                        </pep-icon>\n                    </mat-icon>\n                </li>\n            </ng-container>\n        </ng-template>\n    </ul>\n</ng-template>",
-                    styles: [":host{display:grid}.bread-crumbs-label{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;flex-flow:wrap;align-items:center}ul.bread-crumbs-items{padding:0;margin:0;list-style-type:none;display:flex;align-items:center}ul.bread-crumbs-items li{display:inline-flex}ul.bread-crumbs-items li .seperator{height:1rem;width:1rem}ul.bread-crumbs-items li a{text-decoration:unset}", ".bread-crumbs-label{color:rgba(26,26,26,.7);color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.7)}.bread-crumbs-label .current{color:#1a1a1a;color:hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))}"]
-                },] },
-        { type: core.Injectable }
-    ];
-    PepBreadCrumbsComponent.ctorParameters = function () { return [
-        { type: ngxLib.PepLayoutService }
-    ]; };
-    PepBreadCrumbsComponent.propDecorators = {
-        items: [{ type: core.Input }],
-        displayType: [{ type: core.Input }],
-        addSpacing: [{ type: core.Input }],
-        itemClick: [{ type: core.Output }]
+    var PepBreadCrumbsComponent = /** @class */ (function () {
+        function PepBreadCrumbsComponent(layoutService) {
+            this.layoutService = layoutService;
+            this._items = [];
+            this._displayType = 'label';
+            this.addSpacing = false;
+            this.itemClick = new core.EventEmitter();
+            this.charSeparator = ' / ';
+            this.iconSeparator = icon.pepIconArrowRight.name;
+            this.shrinkItems = false;
+        }
+        Object.defineProperty(PepBreadCrumbsComponent.prototype, "items", {
+            get: function () {
+                return this._items;
+            },
+            set: function (value) {
+                this._items = value;
+                this.setupShrinkItems();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepBreadCrumbsComponent.prototype, "displayType", {
+            get: function () {
+                return this._displayType;
+            },
+            set: function (value) {
+                this._displayType = value;
+                this.setupShrinkItems();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepBreadCrumbsComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.layoutService.onResize$.pipe().subscribe(function (size) {
+                _this.screenSize = size;
+                _this.setupShrinkItems();
+            });
+            if (this.layoutService.isRtl()) {
+                this.charSeparator = ' \\ ';
+                this.iconSeparator = icon.pepIconArrowLeft.name;
+            }
+        };
+        PepBreadCrumbsComponent.prototype.setupShrinkItems = function () {
+            if (this.displayType === 'items' && this.items.length > 1) {
+                this.shrinkItems = this.screenSize > ngxLib.PepScreenSizeType.SM;
+            }
+        };
+        PepBreadCrumbsComponent.prototype.getLabelTitle = function () {
+            var labelTitle = '';
+            if (this.items && this.items.length > 0) {
+                for (var index = 0; index < this.items.length; index++) {
+                    if (index < this.items.length - 1) {
+                        if (index > 0) {
+                            labelTitle += this.charSeparator;
+                        }
+                        labelTitle += this.items[index].text;
+                    }
+                }
+            }
+            return labelTitle;
+        };
+        PepBreadCrumbsComponent.prototype.onBreadCrumbItemClick = function (item) {
+            this.itemClick.emit({ source: item });
+        };
+        return PepBreadCrumbsComponent;
+    }());
+    PepBreadCrumbsComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'pep-bread-crumbs',
+                    template: "<ng-container *ngIf=\"displayType === 'label'; then labelTemplate; else itemsTemplate\">\n</ng-container>\n<ng-template #labelTemplate>\n    <div *ngIf=\"items?.length > 0\" class=\"bread-crumbs-label ellipsis\" [ngClass]=\"{ 'pep-spacing-element': addSpacing }\"\n        [title]=\"getLabelTitle()\">\n        <div class=\"body-xs ellipsis\">\n            <ng-container *ngFor=\"let item of items; let isFirst = first; let isLast = last\">\n                <span *ngIf=\"!isFirst && !isLast\">&nbsp;{{ charSeparator }}&nbsp;</span>\n                <span *ngIf=\"!isLast\">{{ item.text }}</span>\n            </ng-container>\n        </div>\n        <div class=\" title-md ellipsis current\" title=\"{{ items[items.length - 1]?.text }}\">\n            <span>{{ items[items.length - 1]?.text }}</span>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #itemsTemplate>\n    <ul *ngIf=\"items?.length > 0\" class=\"bread-crumbs-items body-sm ellipsis\">\n        <ng-container *ngIf=\"shrinkItems; then shrinkTemplate; else regularTemplate\">\n        </ng-container>\n\n        <ng-template #shrinkTemplate>\n            <li>\n                <a class=\"color-link\" [matMenuTriggerFor]=\"menu\" href=\"javascript:void(0)\">...</a>\n                <mat-menu #menu=\"matMenu\">\n                    <ng-container *ngFor=\"let menuItem of items; let isLast = last\">\n                        <button mat-menu-item *ngIf=\"!isLast\" (click)=\"onBreadCrumbItemClick(menuItem)\"\n                            [title]=\"menuItem.title || menuItem.text\" [disabled]=\"menuItem.disabled\"\n                            [ngClass]=\"{ disabled: menuItem.disabled }\">\n                            <span>\n                                {{ menuItem.text }}\n                            </span>\n                        </button>\n                    </ng-container>\n                </mat-menu>\n            </li>\n            <li>\n                <mat-icon class=\"seperator pep-spacing-element\">\n                    <pep-icon [name]=\"iconSeparator\">\n                    </pep-icon>\n                </mat-icon>\n            </li>\n            <li>\n                <span [title]=\"items[items.length - 1]?.title || items[items.length - 1]?.text\">\n                    {{ items[items.length - 1]?.text }}\n                </span>\n            </li>\n        </ng-template>\n        <ng-template #regularTemplate>\n            <ng-container *ngFor=\"let item of items; let isFirst = first; let isLast = last\">\n                <li>\n                    <a *ngIf=\"!item.disabled\" [title]=\"item.title || item.text\" href=\"javascript:void(0)\"\n                        class=\" color-link\" (click)=\"onBreadCrumbItemClick(item)\">{{ item.text }}</a>\n                    <span *ngIf=\"item.disabled\" [title]=\"item.title || item.text\">{{ item.text }}</span>\n                </li>\n                <li *ngIf=\"!isLast\">\n                    <mat-icon class=\"seperator pep-spacing-element\">\n                        <pep-icon [name]=\"iconSeparator\">\n                        </pep-icon>\n                    </mat-icon>\n                </li>\n            </ng-container>\n        </ng-template>\n    </ul>\n</ng-template>",
+                    styles: [":host{display:grid}.bread-crumbs-label{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;flex-flow:wrap;align-items:center}ul.bread-crumbs-items{padding:0;margin:0;list-style-type:none;display:flex;align-items:center}ul.bread-crumbs-items li{display:inline-flex}ul.bread-crumbs-items li .seperator{height:1rem;width:1rem}ul.bread-crumbs-items li a{text-decoration:unset}", ".bread-crumbs-label{color:rgba(26,26,26,.7);color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.7)}.bread-crumbs-label .current{color:#1a1a1a;color:hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))}"]
+                },] },
+        { type: core.Injectable }
+    ];
+    PepBreadCrumbsComponent.ctorParameters = function () { return [
+        { type: ngxLib.PepLayoutService }
+    ]; };
+    PepBreadCrumbsComponent.propDecorators = {
+        items: [{ type: core.Input }],
+        displayType: [{ type: core.Input }],
+        addSpacing: [{ type: core.Input }],
+        itemClick: [{ type: core.Output }]
     };
 
-    var PepBreadCrumbsModule = /** @class */ (function () {
-        function PepBreadCrumbsModule(pepIconRegistry) {
-            this.pepIconRegistry = pepIconRegistry;
-            this.pepIconRegistry.registerIcons([
-                icon.pepIconArrowRight,
-                icon.pepIconArrowLeft,
-            ]);
-        }
-        return PepBreadCrumbsModule;
-    }());
-    PepBreadCrumbsModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        // Material modules
-                        icon$1.MatIconModule,
-                        menu.MatMenuModule,
-                        // ngx-lib modules
-                        ngxLib.PepNgxLibModule,
-                        icon.PepIconModule
-                    ],
-                    exports: [PepBreadCrumbsComponent],
-                    declarations: [PepBreadCrumbsComponent]
-                },] }
-    ];
-    PepBreadCrumbsModule.ctorParameters = function () { return [
-        { type: icon.PepIconRegistry }
+    var PepBreadCrumbsModule = /** @class */ (function () {
+        function PepBreadCrumbsModule(pepIconRegistry) {
+            this.pepIconRegistry = pepIconRegistry;
+            this.pepIconRegistry.registerIcons([
+                icon.pepIconArrowRight,
+                icon.pepIconArrowLeft,
+            ]);
+        }
+        return PepBreadCrumbsModule;
+    }());
+    PepBreadCrumbsModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        // Material modules
+                        icon$1.MatIconModule,
+                        menu.MatMenuModule,
+                        // ngx-lib modules
+                        ngxLib.PepNgxLibModule,
+                        icon.PepIconModule
+                    ],
+                    exports: [PepBreadCrumbsComponent],
+                    declarations: [PepBreadCrumbsComponent]
+                },] }
+    ];
+    PepBreadCrumbsModule.ctorParameters = function () { return [
+        { type: icon.PepIconRegistry }
     ]; };
 
-    var PepBreadCrumbItem = /** @class */ (function () {
-        function PepBreadCrumbItem(data) {
-            this.disabled = false;
-            Object.assign(this, data);
-        }
-        return PepBreadCrumbItem;
+    var PepBreadCrumbItem = /** @class */ (function () {
+        function PepBreadCrumbItem(data) {
+            this.disabled = false;
+            Object.assign(this, data);
+        }
+        return PepBreadCrumbItem;
     }());
 
-    /*
-     * Public API Surface of ngx-lib/bread-crumbs
+    /*
+     * Public API Surface of ngx-lib/bread-crumbs
      */
 
-    /**
-     * Generated bundle index. Do not edit.
+    /**
+     * Generated bundle index. Do not edit.
      */
 
     exports.PepBreadCrumbItem = PepBreadCrumbItem;

package/bundles/pepperi-addons-ngx-lib-button.umd.js

@@ -4,172 +4,172 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['pepperi-addons'] = global['pepperi-addons'] || {}, global['pepperi-addons']['ngx-lib'] = global['pepperi-addons']['ngx-lib'] || {}, global['pepperi-addons']['ngx-lib'].button = {}), global.ng.core, global.ng.common, global.ng.material.core, global.ng.material.button, global.ng.material.icon, global['pepperi-addons']['ngx-lib'].icon, global['pepperi-addons']['ngx-lib']));
 }(this, (function (exports, core, common, core$1, button, icon, icon$1, ngxLib) { 'use strict';
 
-    var PepButton = /** @class */ (function () {
-        function PepButton(data) {
-            Object.assign(this, data);
-        }
-        return PepButton;
+    var PepButton = /** @class */ (function () {
+        function PepButton(data) {
+            Object.assign(this, data);
+        }
+        return PepButton;
     }());
 
-    /**
-     * This is a button component that support pepperi theme
-     * style & state & sizes
-     *
-     * @export
-     * @class PepButtonComponent
-     * @implements {OnDestroy}
-     */
-    var PepButtonComponent = /** @class */ (function () {
-        function PepButtonComponent(renderer, element) {
-            this.renderer = renderer;
-            this.element = element;
-            /**
-             * The style of the button.
-             *
-             * @type {PepStyleType}
-             * @memberof PepButtonComponent
-             */
-            this.styleType = 'weak';
-            /**
-             * The style state of the button.
-             *
-             * @type {PepStyleStateType}
-             * @memberof PepButtonComponent
-             */
-            this.styleStateType = 'system';
-            /**
-             * The size of the button.
-             *
-             * @type {PepSizeType}
-             * @memberof PepButtonComponent
-             */
-            this.sizeType = 'md';
-            /**
-             * Class names that should be on the button element tag like classNames="class1 class2"
-             *
-             * @memberof PepButtonComponent
-             */
-            this.classNames = '';
-            /**
-             * If the button is disable or not.
-             *
-             * @type {boolean}
-             * @memberof PepButtonComponent
-             */
-            this.disabled = false;
-            /**
-             * The icon position.
-             *
-             * @type {('start' | 'end')}
-             * @memberof PepButtonComponent
-             */
-            this.iconPosition = 'end';
-            this._visible = true;
-            /**
-             * The button click event.
-             *
-             * @type {EventEmitter<IPepButtonClickEvent>}
-             * @memberof PepButtonComponent
-             */
-            this.buttonClick = new core.EventEmitter();
-        }
-        Object.defineProperty(PepButtonComponent.prototype, "visible", {
-            get: function () {
-                return this._visible;
-            },
-            /**
-             * If the button is visible or not.
-             *
-             * @memberof PepButtonComponent
-             */
-            set: function (visible) {
-                if (visible !== undefined) {
-                    this._visible = !!visible;
-                    if (visible) {
-                        this.renderer.removeClass(this.element.nativeElement, 'hidden-element');
-                    }
-                    else {
-                        this.renderer.addClass(this.element.nativeElement, 'hidden-element');
-                    }
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PepButtonComponent.prototype.ngOnDestroy = function () {
-            // if (this.buttonClick) {
-            //     this.buttonClick.unsubscribe();
-            // }
-        };
-        /**
-         * The button click
-         */
-        PepButtonComponent.prototype.onButtonClicked = function (event) {
-            var button = new PepButton({
-                key: this.key,
-                value: this.value,
-            });
-            var buttonClick = {
-                source: button,
-                event: event,
-            };
-            this.buttonClick.emit(buttonClick);
-        };
-        return PepButtonComponent;
-    }());
-    PepButtonComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'pep-button',
-                    template: "<button mat-button [pepDataQa]=\"key ? key : value\"\n    class=\"pep-button {{ sizeType }} {{ styleType }} {{ styleStateType }} {{ classNames }}\"\n    [ngClass]=\"{ 'icon-button': iconName && !value }\" [disabled]=\"disabled\" (click)=\"onButtonClicked($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTemplate\">\n    </ng-container>\n</button>\n\n<ng-template #contentTemplate>\n    <mat-icon *ngIf=\"iconName && iconPosition === 'start'\" [ngClass]=\"{ 'pull-left flip': value }\">\n        <pep-icon name=\"{{iconName}}\"></pep-icon>\n    </mat-icon>\n    <span *ngIf=\"value\" class=\"ellipsis pull-left flip\"\n        [ngClass]=\"{ 'button-title-with-icon': iconName, 'icon-before': iconPosition === 'start' }\" [title]=\"value\">\n        {{value}}\n    </span>\n    <mat-icon *ngIf=\"iconName && iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': value }\">\n        <pep-icon name=\"{{iconName}}\"></pep-icon>\n    </mat-icon>\n</ng-template>",
-                    styles: [":host{display:grid}", ""]
-                },] }
-    ];
-    PepButtonComponent.ctorParameters = function () { return [
-        { type: core.Renderer2 },
-        { type: core.ElementRef }
-    ]; };
-    PepButtonComponent.propDecorators = {
-        key: [{ type: core.Input }],
-        value: [{ type: core.Input }],
-        styleType: [{ type: core.Input }],
-        styleStateType: [{ type: core.Input }],
-        sizeType: [{ type: core.Input }],
-        classNames: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        iconName: [{ type: core.Input }],
-        iconPosition: [{ type: core.Input }],
-        visible: [{ type: core.Input }],
-        buttonClick: [{ type: core.Output }]
+    /**
+     * This is a button component that support pepperi theme
+     * style & state & sizes
+     *
+     * @export
+     * @class PepButtonComponent
+     * @implements {OnDestroy}
+     */
+    var PepButtonComponent = /** @class */ (function () {
+        function PepButtonComponent(renderer, element) {
+            this.renderer = renderer;
+            this.element = element;
+            /**
+             * The style of the button.
+             *
+             * @type {PepStyleType}
+             * @memberof PepButtonComponent
+             */
+            this.styleType = 'weak';
+            /**
+             * The style state of the button.
+             *
+             * @type {PepStyleStateType}
+             * @memberof PepButtonComponent
+             */
+            this.styleStateType = 'system';
+            /**
+             * The size of the button.
+             *
+             * @type {PepSizeType}
+             * @memberof PepButtonComponent
+             */
+            this.sizeType = 'md';
+            /**
+             * Class names that should be on the button element tag like classNames="class1 class2"
+             *
+             * @memberof PepButtonComponent
+             */
+            this.classNames = '';
+            /**
+             * If the button is disable or not.
+             *
+             * @type {boolean}
+             * @memberof PepButtonComponent
+             */
+            this.disabled = false;
+            /**
+             * The icon position.
+             *
+             * @type {('start' | 'end')}
+             * @memberof PepButtonComponent
+             */
+            this.iconPosition = 'end';
+            this._visible = true;
+            /**
+             * The button click event.
+             *
+             * @type {EventEmitter<IPepButtonClickEvent>}
+             * @memberof PepButtonComponent
+             */
+            this.buttonClick = new core.EventEmitter();
+        }
+        Object.defineProperty(PepButtonComponent.prototype, "visible", {
+            get: function () {
+                return this._visible;
+            },
+            /**
+             * If the button is visible or not.
+             *
+             * @memberof PepButtonComponent
+             */
+            set: function (visible) {
+                if (visible !== undefined) {
+                    this._visible = !!visible;
+                    if (visible) {
+                        this.renderer.removeClass(this.element.nativeElement, 'hidden-element');
+                    }
+                    else {
+                        this.renderer.addClass(this.element.nativeElement, 'hidden-element');
+                    }
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepButtonComponent.prototype.ngOnDestroy = function () {
+            // if (this.buttonClick) {
+            //     this.buttonClick.unsubscribe();
+            // }
+        };
+        /**
+         * The button click
+         */
+        PepButtonComponent.prototype.onButtonClicked = function (event) {
+            var button = new PepButton({
+                key: this.key,
+                value: this.value,
+            });
+            var buttonClick = {
+                source: button,
+                event: event,
+            };
+            this.buttonClick.emit(buttonClick);
+        };
+        return PepButtonComponent;
+    }());
+    PepButtonComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'pep-button',
+                    template: "<button mat-button [pepDataQa]=\"key ? key : value\"\n    class=\"pep-button {{ sizeType }} {{ styleType }} {{ styleStateType }} {{ classNames }}\"\n    [ngClass]=\"{ 'icon-button': iconName && !value }\" [disabled]=\"disabled\" (click)=\"onButtonClicked($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTemplate\">\n    </ng-container>\n</button>\n\n<ng-template #contentTemplate>\n    <mat-icon *ngIf=\"iconName && iconPosition === 'start'\" [ngClass]=\"{ 'pull-left flip': value }\">\n        <pep-icon name=\"{{iconName}}\"></pep-icon>\n    </mat-icon>\n    <span *ngIf=\"value\" class=\"ellipsis pull-left flip\"\n        [ngClass]=\"{ 'button-title-with-icon': iconName, 'icon-before': iconPosition === 'start' }\" [title]=\"value\">\n        {{value}}\n    </span>\n    <mat-icon *ngIf=\"iconName && iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': value }\">\n        <pep-icon name=\"{{iconName}}\"></pep-icon>\n    </mat-icon>\n</ng-template>",
+                    styles: [":host{display:grid}", ""]
+                },] }
+    ];
+    PepButtonComponent.ctorParameters = function () { return [
+        { type: core.Renderer2 },
+        { type: core.ElementRef }
+    ]; };
+    PepButtonComponent.propDecorators = {
+        key: [{ type: core.Input }],
+        value: [{ type: core.Input }],
+        styleType: [{ type: core.Input }],
+        styleStateType: [{ type: core.Input }],
+        sizeType: [{ type: core.Input }],
+        classNames: [{ type: core.Input }],
+        disabled: [{ type: core.Input }],
+        iconName: [{ type: core.Input }],
+        iconPosition: [{ type: core.Input }],
+        visible: [{ type: core.Input }],
+        buttonClick: [{ type: core.Output }]
     };
 
-    var PepButtonModule = /** @class */ (function () {
-        function PepButtonModule() {
-        }
-        return PepButtonModule;
-    }());
-    PepButtonModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        // Material modules
-                        core$1.MatCommonModule,
-                        button.MatButtonModule,
-                        icon.MatIconModule,
-                        // ngx-lib modules
-                        ngxLib.PepNgxLibModule,
-                        icon$1.PepIconModule,
-                    ],
-                    exports: [PepButtonComponent],
-                    declarations: [PepButtonComponent],
-                },] }
+    var PepButtonModule = /** @class */ (function () {
+        function PepButtonModule() {
+        }
+        return PepButtonModule;
+    }());
+    PepButtonModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        // Material modules
+                        core$1.MatCommonModule,
+                        button.MatButtonModule,
+                        icon.MatIconModule,
+                        // ngx-lib modules
+                        ngxLib.PepNgxLibModule,
+                        icon$1.PepIconModule,
+                    ],
+                    exports: [PepButtonComponent],
+                    declarations: [PepButtonComponent],
+                },] }
     ];
 
-    /*
-     * Public API Surface of ngx-lib/button
+    /*
+     * Public API Surface of ngx-lib/button
      */
 
-    /**
-     * Generated bundle index. Do not edit.
+    /**
+     * Generated bundle index. Do not edit.
      */
 
     exports.PepButton = PepButton;