@pepperi-addons/ngx-lib 0.3.15-beta.19 → 0.3.15-beta.21

package/fesm2015/pepperi-addons-ngx-lib-bread-crumbs.js

@@ -5,123 +5,123 @@ import { MatMenuModule } from '@angular/material/menu';
 import { PepScreenSizeType, PepLayoutService, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
 import { pepIconArrowRight, pepIconArrowLeft, PepIconModule, PepIconRegistry } from '@pepperi-addons/ngx-lib/icon';
 
-class PepBreadCrumbsComponent {
-    constructor(layoutService) {
-        this.layoutService = layoutService;
-        this._items = [];
-        this._displayType = 'label';
-        this.addSpacing = false;
-        this.itemClick = new EventEmitter();
-        this.charSeparator = ' / ';
-        this.iconSeparator = pepIconArrowRight.name;
-        this.shrinkItems = false;
-    }
-    set items(value) {
-        this._items = value;
-        this.setupShrinkItems();
-    }
-    get items() {
-        return this._items;
-    }
-    set displayType(value) {
-        this._displayType = value;
-        this.setupShrinkItems();
-    }
-    get displayType() {
-        return this._displayType;
-    }
-    ngOnInit() {
-        this.layoutService.onResize$.pipe().subscribe((size) => {
-            this.screenSize = size;
-            this.setupShrinkItems();
-        });
-        if (this.layoutService.isRtl()) {
-            this.charSeparator = ' \\ ';
-            this.iconSeparator = pepIconArrowLeft.name;
-        }
-    }
-    setupShrinkItems() {
-        if (this.displayType === 'items' && this.items.length > 1) {
-            this.shrinkItems = this.screenSize > PepScreenSizeType.SM;
-        }
-    }
-    getLabelTitle() {
-        let labelTitle = '';
-        if (this.items && this.items.length > 0) {
-            for (let 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;
-    }
-    onBreadCrumbItemClick(item) {
-        this.itemClick.emit({ source: item });
-    }
-}
-PepBreadCrumbsComponent.decorators = [
-    { type: 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: Injectable }
-];
-PepBreadCrumbsComponent.ctorParameters = () => [
-    { type: PepLayoutService }
-];
-PepBreadCrumbsComponent.propDecorators = {
-    items: [{ type: Input }],
-    displayType: [{ type: Input }],
-    addSpacing: [{ type: Input }],
-    itemClick: [{ type: Output }]
+class PepBreadCrumbsComponent {
+    constructor(layoutService) {
+        this.layoutService = layoutService;
+        this._items = [];
+        this._displayType = 'label';
+        this.addSpacing = false;
+        this.itemClick = new EventEmitter();
+        this.charSeparator = ' / ';
+        this.iconSeparator = pepIconArrowRight.name;
+        this.shrinkItems = false;
+    }
+    set items(value) {
+        this._items = value;
+        this.setupShrinkItems();
+    }
+    get items() {
+        return this._items;
+    }
+    set displayType(value) {
+        this._displayType = value;
+        this.setupShrinkItems();
+    }
+    get displayType() {
+        return this._displayType;
+    }
+    ngOnInit() {
+        this.layoutService.onResize$.pipe().subscribe((size) => {
+            this.screenSize = size;
+            this.setupShrinkItems();
+        });
+        if (this.layoutService.isRtl()) {
+            this.charSeparator = ' \\ ';
+            this.iconSeparator = pepIconArrowLeft.name;
+        }
+    }
+    setupShrinkItems() {
+        if (this.displayType === 'items' && this.items.length > 1) {
+            this.shrinkItems = this.screenSize > PepScreenSizeType.SM;
+        }
+    }
+    getLabelTitle() {
+        let labelTitle = '';
+        if (this.items && this.items.length > 0) {
+            for (let 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;
+    }
+    onBreadCrumbItemClick(item) {
+        this.itemClick.emit({ source: item });
+    }
+}
+PepBreadCrumbsComponent.decorators = [
+    { type: 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: Injectable }
+];
+PepBreadCrumbsComponent.ctorParameters = () => [
+    { type: PepLayoutService }
+];
+PepBreadCrumbsComponent.propDecorators = {
+    items: [{ type: Input }],
+    displayType: [{ type: Input }],
+    addSpacing: [{ type: Input }],
+    itemClick: [{ type: Output }]
 };
 
-class PepBreadCrumbsModule {
-    constructor(pepIconRegistry) {
-        this.pepIconRegistry = pepIconRegistry;
-        this.pepIconRegistry.registerIcons([
-            pepIconArrowRight,
-            pepIconArrowLeft,
-        ]);
-    }
-}
-PepBreadCrumbsModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    // Material modules
-                    MatIconModule,
-                    MatMenuModule,
-                    // ngx-lib modules
-                    PepNgxLibModule,
-                    PepIconModule
-                ],
-                exports: [PepBreadCrumbsComponent],
-                declarations: [PepBreadCrumbsComponent]
-            },] }
-];
-PepBreadCrumbsModule.ctorParameters = () => [
-    { type: PepIconRegistry }
+class PepBreadCrumbsModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons([
+            pepIconArrowRight,
+            pepIconArrowLeft,
+        ]);
+    }
+}
+PepBreadCrumbsModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    // Material modules
+                    MatIconModule,
+                    MatMenuModule,
+                    // ngx-lib modules
+                    PepNgxLibModule,
+                    PepIconModule
+                ],
+                exports: [PepBreadCrumbsComponent],
+                declarations: [PepBreadCrumbsComponent]
+            },] }
+];
+PepBreadCrumbsModule.ctorParameters = () => [
+    { type: PepIconRegistry }
 ];
 
-class PepBreadCrumbItem {
-    constructor(data) {
-        this.disabled = false;
-        Object.assign(this, data);
-    }
+class PepBreadCrumbItem {
+    constructor(data) {
+        this.disabled = false;
+        Object.assign(this, data);
+    }
 }
 
-/*
- * 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.
  */
 
 export { PepBreadCrumbItem, PepBreadCrumbsComponent, PepBreadCrumbsModule };

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

@@ -6,163 +6,163 @@ import { MatIconModule } from '@angular/material/icon';
 import { PepIconModule } from '@pepperi-addons/ngx-lib/icon';
 import { PepNgxLibModule } from '@pepperi-addons/ngx-lib';
 
-class PepButton {
-    constructor(data) {
-        Object.assign(this, data);
-    }
+class PepButton {
+    constructor(data) {
+        Object.assign(this, data);
+    }
 }
 
-/**
- * This is a button component that support pepperi theme
- * style & state & sizes
- *
- * @export
- * @class PepButtonComponent
- * @implements {OnDestroy}
- */
-class PepButtonComponent {
-    constructor(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 EventEmitter();
-    }
-    /**
-     * If the button is visible or not.
-     *
-     * @memberof PepButtonComponent
-     */
-    set visible(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');
-            }
-        }
-    }
-    get visible() {
-        return this._visible;
-    }
-    ngOnDestroy() {
-        // if (this.buttonClick) {
-        //     this.buttonClick.unsubscribe();
-        // }
-    }
-    /**
-     * The button click
-     */
-    onButtonClicked(event) {
-        const button = new PepButton({
-            key: this.key,
-            value: this.value,
-        });
-        const buttonClick = {
-            source: button,
-            event,
-        };
-        this.buttonClick.emit(buttonClick);
-    }
-}
-PepButtonComponent.decorators = [
-    { type: 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 = () => [
-    { type: Renderer2 },
-    { type: ElementRef }
-];
-PepButtonComponent.propDecorators = {
-    key: [{ type: Input }],
-    value: [{ type: Input }],
-    styleType: [{ type: Input }],
-    styleStateType: [{ type: Input }],
-    sizeType: [{ type: Input }],
-    classNames: [{ type: Input }],
-    disabled: [{ type: Input }],
-    iconName: [{ type: Input }],
-    iconPosition: [{ type: Input }],
-    visible: [{ type: Input }],
-    buttonClick: [{ type: Output }]
+/**
+ * This is a button component that support pepperi theme
+ * style & state & sizes
+ *
+ * @export
+ * @class PepButtonComponent
+ * @implements {OnDestroy}
+ */
+class PepButtonComponent {
+    constructor(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 EventEmitter();
+    }
+    /**
+     * If the button is visible or not.
+     *
+     * @memberof PepButtonComponent
+     */
+    set visible(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');
+            }
+        }
+    }
+    get visible() {
+        return this._visible;
+    }
+    ngOnDestroy() {
+        // if (this.buttonClick) {
+        //     this.buttonClick.unsubscribe();
+        // }
+    }
+    /**
+     * The button click
+     */
+    onButtonClicked(event) {
+        const button = new PepButton({
+            key: this.key,
+            value: this.value,
+        });
+        const buttonClick = {
+            source: button,
+            event,
+        };
+        this.buttonClick.emit(buttonClick);
+    }
+}
+PepButtonComponent.decorators = [
+    { type: 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 = () => [
+    { type: Renderer2 },
+    { type: ElementRef }
+];
+PepButtonComponent.propDecorators = {
+    key: [{ type: Input }],
+    value: [{ type: Input }],
+    styleType: [{ type: Input }],
+    styleStateType: [{ type: Input }],
+    sizeType: [{ type: Input }],
+    classNames: [{ type: Input }],
+    disabled: [{ type: Input }],
+    iconName: [{ type: Input }],
+    iconPosition: [{ type: Input }],
+    visible: [{ type: Input }],
+    buttonClick: [{ type: Output }]
 };
 
-class PepButtonModule {
-}
-PepButtonModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    // Material modules
-                    MatCommonModule,
-                    MatButtonModule,
-                    MatIconModule,
-                    // ngx-lib modules
-                    PepNgxLibModule,
-                    PepIconModule,
-                ],
-                exports: [PepButtonComponent],
-                declarations: [PepButtonComponent],
-            },] }
+class PepButtonModule {
+}
+PepButtonModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    // Material modules
+                    MatCommonModule,
+                    MatButtonModule,
+                    MatIconModule,
+                    // ngx-lib modules
+                    PepNgxLibModule,
+                    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.
  */
 
 export { PepButton, PepButtonComponent, PepButtonModule };