@pepperi-addons/ngx-lib 0.4.1-beta.54 → 0.4.1-beta.56

package/fesm2015/pepperi-addons-ngx-lib-group-buttons.mjs

@@ -15,121 +15,121 @@ import { PepScreenSizeType, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
 import * as i1$1 from '@pepperi-addons/ngx-lib/icon';
 import { pepIconArrowUp, pepIconArrowDown, PepIconModule } from '@pepperi-addons/ngx-lib/icon';
 
-class PepGroupButtonsComponent {
-    constructor(layoutService) {
-        this.layoutService = layoutService;
-        this.PepScreenSizeType = PepScreenSizeType;
-        this.viewType = 'regular';
-        this.styleType = 'weak';
-        this.sizeType = 'md';
-        this.buttons = [];
-        this.buttonsDisabled = false;
-        this.supportUnselect = false;
-        this.selectedButtonKey = '';
-        this.stretch = false;
-        this.buttonClick = new EventEmitter();
-        this.layoutService.onResize$.subscribe((size) => {
-            this.screenSize = size;
-        });
-    }
-    ngOnDestroy() {
-        // if (this.buttonClick) {
-        //     this.buttonClick.unsubscribe();
-        // }
-    }
-    onButtonClicked(event, button) {
-        const unselect = this.supportUnselect && this.selectedButtonKey === (button === null || button === void 0 ? void 0 : button.key);
-        this.selectedButtonKey = unselect ? '' : button === null || button === void 0 ? void 0 : button.key;
-        const buttonClick = {
-            source: unselect ? null : button,
-            event,
-        };
-        if (button === null || button === void 0 ? void 0 : button.callback) {
-            button.callback(buttonClick);
-        }
-        else {
-            this.buttonClick.emit(buttonClick);
-        }
-    }
-}
-PepGroupButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGroupButtonsComponent, deps: [{ token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-PepGroupButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: { viewType: "viewType", styleType: "styleType", sizeType: "sizeType", buttons: "buttons", buttonsDisabled: "buttonsDisabled", supportUnselect: "supportUnselect", selectedButtonKey: "selectedButtonKey", stretch: "stretch" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<div class=\"group-buttons-container\" pepRtlDirection>\n    <ng-container *ngIf=\"viewType === 'regular'\">\n        <button *ngFor=\"let button of buttons\" [pepDataQa]=\"button?.value\"\n            class=\"pep-button pep-spacing-element pull-left flip first-button {{ sizeType }} {{ styleType }}\"\n            [disabled]=\"buttonsDisabled || button.disabled\" mat-button (click)=\"onButtonClicked($event, button)\">\n            <span [title]=\"button?.value\">{{ button?.value }}</span>\n        </button>\n    </ng-container>\n\n    <div *ngIf=\"viewType === 'dropdown'\" class=\"dropdown-buttons pep-spacing-element\"\n        [ngClass]=\"{dropup: screenSize >= PepScreenSizeType.MD}\">\n        <button [pepDataQa]=\"buttons[0]?.value\"\n            class=\"pep-button pull-left flip first-button {{ sizeType }} {{ styleType }}\"\n            (click)=\"onButtonClicked($event, buttons[0])\" [disabled]=\"buttonsDisabled || buttons[0].disabled\"\n            mat-button>\n            <span class=\"ellipsis\" [title]=\"buttons[0]?.value\">{{ buttons[0]?.value }}</span>\n        </button>\n        <button class=\"pep-button icon-button pull-right flip last-button {{ sizeType }} {{ styleType }}\"\n            [matMenuTriggerFor]=\"actionsMenu\" [disabled]=\"buttonsDisabled\" pepMenuBlur mat-button>\n            <mat-icon>\n                <pep-icon name=\"{{ screenSize < PepScreenSizeType.MD ? 'arrow_down' : 'arrow_up' }}\">\n                </pep-icon>\n            </mat-icon>\n        </button>\n\n        <mat-menu #actionsMenu=\"matMenu\" xPosition=\"before\">\n            <ng-container *ngFor=\"let button of buttons; let i = index; first as isFirst\">\n                <button *ngIf=\"!isFirst\" mat-menu-item [pepDataQa]=\"button?.value\"\n                    (click)=\"onButtonClicked($event, button)\">\n                    <span [title]=\"button?.value\">{{ button?.value }}</span>\n                </button>\n            </ng-container>\n        </mat-menu>\n    </div>\n\n    <div *ngIf=\"viewType === 'split'\" class=\"split-buttons\">\n        <button *ngFor=\"let button of buttons; let index; let isFirst = first; let isLast = last\"\n            [pepDataQa]=\"button?.value\" mat-button pepButtonBlur\n            class=\"pep-button {{ sizeType }} {{ styleType }} {{ button?.classNames }} pull-left flip\"\n            [disabled]=\"buttonsDisabled || button.disabled\" [ngClass]=\"{\n                'first-button': isFirst, \n                'middle-button': !isFirst && !isLast, \n                'last-button': isLast, \n                'icon-button': button?.iconName && !button?.value}\" (click)=\"onButtonClicked($event, button)\">\n\n            <ng-container *ngTemplateOutlet=\"contentTemplate; context: {button: button}\"></ng-container>\n        </button>\n    </div>\n\n    <div *ngIf=\"viewType === 'toggle'\" class=\"toggle-buttons\" [ngClass]=\"{ 'stretch': stretch }\">\n        <button *ngFor=\"let button of buttons; let index; let isFirst = first; let isLast = last\"\n            [pepDataQa]=\"button?.value\" mat-button pepButtonBlur\n            class=\"pep-button {{ sizeType }} {{ styleType }} {{ button?.classNames }} pull-left flip\"\n            [disabled]=\"buttonsDisabled || button.disabled\" [ngClass]=\"{\n                'first-button': isFirst && !isLast, \n                'middle-button': !isFirst && !isLast, \n                'last-button': isLast && !isFirst,\n                'icon-button': button?.iconName && !button?.value,\n                'is-selected': button?.key !== '' && button?.key === selectedButtonKey}\"\n            (click)=\"onButtonClicked($event, button)\">\n            <ng-container *ngTemplateOutlet=\"contentTemplate; context: {button: button}\"></ng-container>\n        </button>\n    </div>\n</div>\n\n<ng-template #contentTemplate let-button=\"button\">\n    <mat-icon *ngIf=\"button.iconName && (!button.iconPosition || button.iconPosition === 'start')\"\n        [ngClass]=\"{ 'pull-left flip': button.value }\">\n        <pep-icon name=\"{{button.iconName}}\"></pep-icon>\n    </mat-icon>\n    <span *ngIf=\"button.value\" class=\"ellipsis pull-left flip\"\n        [ngClass]=\"{ 'button-title-with-icon': button.iconName, 'icon-before': button.iconPosition === 'start' }\"\n        [title]=\"button.value\">\n        {{button.value}}\n    </span>\n    <mat-icon *ngIf=\"button.iconName && button.iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': button.value }\">\n        <pep-icon name=\"{{button.iconName}}\"></pep-icon>\n    </mat-icon>\n</ng-template>", styles: [".group-buttons-container{display:flex;border-radius:var(--pep-border-radius-md, .25rem)}.group-buttons-container .dropdown-buttons .first-button,.group-buttons-container .split-buttons .first-button,.group-buttons-container .toggle-buttons .first-button{margin-inline-end:1px}.group-buttons-container .dropdown-buttons .first-button,.group-buttons-container .dropdown-buttons .first-button:after,.group-buttons-container .split-buttons .first-button,.group-buttons-container .split-buttons .first-button:after,.group-buttons-container .toggle-buttons .first-button,.group-buttons-container .toggle-buttons .first-button:after{border-radius:var(--pep-border-radius-md, .25rem) 0 0 var(--pep-border-radius-md, .25rem)}.group-buttons-container .dropdown-buttons .last-button,.group-buttons-container .dropdown-buttons .last-button:after,.group-buttons-container .split-buttons .last-button,.group-buttons-container .split-buttons .last-button:after,.group-buttons-container .toggle-buttons .last-button,.group-buttons-container .toggle-buttons .last-button:after{border-radius:0 var(--pep-border-radius-md, .25rem) var(--pep-border-radius-md, .25rem) 0}.group-buttons-container .dropdown-buttons .pepperi-button,.group-buttons-container .dropdown-buttons .pep-button,.group-buttons-container .split-buttons .pepperi-button,.group-buttons-container .split-buttons .pep-button,.group-buttons-container .toggle-buttons .pepperi-button,.group-buttons-container .toggle-buttons .pep-button{margin-top:0!important}.group-buttons-container .dropdown-buttons .pepperi-button.cdk-focused,.group-buttons-container .dropdown-buttons .pep-button.cdk-focused,.group-buttons-container .split-buttons .pepperi-button.cdk-focused,.group-buttons-container .split-buttons .pep-button.cdk-focused,.group-buttons-container .toggle-buttons .pepperi-button.cdk-focused,.group-buttons-container .toggle-buttons .pep-button.cdk-focused{z-index:2}@media (max-width: 599px){.group-buttons-container .dropdown-buttons.dropup .first-button,.group-buttons-container .split-buttons.dropup .first-button,.group-buttons-container .toggle-buttons.dropup .first-button{max-width:200px;padding:0 .25rem}.group-buttons-container .dropdown-buttons.dropup .last-button,.group-buttons-container .split-buttons.dropup .last-button,.group-buttons-container .toggle-buttons.dropup .last-button{padding:0}}.group-buttons-container .split-buttons,.group-buttons-container .toggle-buttons{display:grid;grid-auto-flow:column}.group-buttons-container .split-buttons.stretch,.group-buttons-container .toggle-buttons.stretch{width:100%}.group-buttons-container .split-buttons .pep-button,.group-buttons-container .toggle-buttons .pep-button{max-width:unset;padding-inline:var(--pep-spacing-xs, .25rem)}.group-buttons-container .split-buttons .first-button,.group-buttons-container .toggle-buttons .first-button{margin-inline-end:-1px}.group-buttons-container .split-buttons .middle-button,.group-buttons-container .toggle-buttons .middle-button{border-radius:0;margin-inline-end:-1px}\n", ".group-buttons-container .toggle-buttons .is-selected.weak{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.group-buttons-container .toggle-buttons .is-selected.weak:hover{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 20%))}.group-buttons-container .toggle-buttons .is-selected.weak:focus{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.group-buttons-container .toggle-buttons .is-selected.weak:active{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%))}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%)!important;box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)!important;border:1px solid hsla(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%),.08)}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled):after{border:unset}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled) .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.group-buttons-container .toggle-buttons .is-selected.regular{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.group-buttons-container .toggle-buttons .is-selected.regular:hover{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}.group-buttons-container .toggle-buttons .is-selected.regular:focus{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative;box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.group-buttons-container .toggle-buttons .is-selected.regular:focus:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.group-buttons-container .toggle-buttons .is-selected.regular:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.group-buttons-container .toggle-buttons .is-selected.regular:active{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative}.group-buttons-container .toggle-buttons .is-selected.regular:active:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.group-buttons-container .toggle-buttons .is-selected.regular:active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04)!important}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled):after{border:unset}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled) .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.PepButtonBlurDirective, selector: "[pepButtonBlur]" }, { kind: "directive", type: i1.PepMenuBlurDirective, selector: "[pepMenuBlur]" }, { kind: "directive", type: i1.PepDataQaDirective, selector: "[pepDataQa]", inputs: ["pepDataQa"] }, { kind: "directive", type: i1.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGroupButtonsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pep-group-buttons', template: "<div class=\"group-buttons-container\" pepRtlDirection>\n    <ng-container *ngIf=\"viewType === 'regular'\">\n        <button *ngFor=\"let button of buttons\" [pepDataQa]=\"button?.value\"\n            class=\"pep-button pep-spacing-element pull-left flip first-button {{ sizeType }} {{ styleType }}\"\n            [disabled]=\"buttonsDisabled || button.disabled\" mat-button (click)=\"onButtonClicked($event, button)\">\n            <span [title]=\"button?.value\">{{ button?.value }}</span>\n        </button>\n    </ng-container>\n\n    <div *ngIf=\"viewType === 'dropdown'\" class=\"dropdown-buttons pep-spacing-element\"\n        [ngClass]=\"{dropup: screenSize >= PepScreenSizeType.MD}\">\n        <button [pepDataQa]=\"buttons[0]?.value\"\n            class=\"pep-button pull-left flip first-button {{ sizeType }} {{ styleType }}\"\n            (click)=\"onButtonClicked($event, buttons[0])\" [disabled]=\"buttonsDisabled || buttons[0].disabled\"\n            mat-button>\n            <span class=\"ellipsis\" [title]=\"buttons[0]?.value\">{{ buttons[0]?.value }}</span>\n        </button>\n        <button class=\"pep-button icon-button pull-right flip last-button {{ sizeType }} {{ styleType }}\"\n            [matMenuTriggerFor]=\"actionsMenu\" [disabled]=\"buttonsDisabled\" pepMenuBlur mat-button>\n            <mat-icon>\n                <pep-icon name=\"{{ screenSize < PepScreenSizeType.MD ? 'arrow_down' : 'arrow_up' }}\">\n                </pep-icon>\n            </mat-icon>\n        </button>\n\n        <mat-menu #actionsMenu=\"matMenu\" xPosition=\"before\">\n            <ng-container *ngFor=\"let button of buttons; let i = index; first as isFirst\">\n                <button *ngIf=\"!isFirst\" mat-menu-item [pepDataQa]=\"button?.value\"\n                    (click)=\"onButtonClicked($event, button)\">\n                    <span [title]=\"button?.value\">{{ button?.value }}</span>\n                </button>\n            </ng-container>\n        </mat-menu>\n    </div>\n\n    <div *ngIf=\"viewType === 'split'\" class=\"split-buttons\">\n        <button *ngFor=\"let button of buttons; let index; let isFirst = first; let isLast = last\"\n            [pepDataQa]=\"button?.value\" mat-button pepButtonBlur\n            class=\"pep-button {{ sizeType }} {{ styleType }} {{ button?.classNames }} pull-left flip\"\n            [disabled]=\"buttonsDisabled || button.disabled\" [ngClass]=\"{\n                'first-button': isFirst, \n                'middle-button': !isFirst && !isLast, \n                'last-button': isLast, \n                'icon-button': button?.iconName && !button?.value}\" (click)=\"onButtonClicked($event, button)\">\n\n            <ng-container *ngTemplateOutlet=\"contentTemplate; context: {button: button}\"></ng-container>\n        </button>\n    </div>\n\n    <div *ngIf=\"viewType === 'toggle'\" class=\"toggle-buttons\" [ngClass]=\"{ 'stretch': stretch }\">\n        <button *ngFor=\"let button of buttons; let index; let isFirst = first; let isLast = last\"\n            [pepDataQa]=\"button?.value\" mat-button pepButtonBlur\n            class=\"pep-button {{ sizeType }} {{ styleType }} {{ button?.classNames }} pull-left flip\"\n            [disabled]=\"buttonsDisabled || button.disabled\" [ngClass]=\"{\n                'first-button': isFirst && !isLast, \n                'middle-button': !isFirst && !isLast, \n                'last-button': isLast && !isFirst,\n                'icon-button': button?.iconName && !button?.value,\n                'is-selected': button?.key !== '' && button?.key === selectedButtonKey}\"\n            (click)=\"onButtonClicked($event, button)\">\n            <ng-container *ngTemplateOutlet=\"contentTemplate; context: {button: button}\"></ng-container>\n        </button>\n    </div>\n</div>\n\n<ng-template #contentTemplate let-button=\"button\">\n    <mat-icon *ngIf=\"button.iconName && (!button.iconPosition || button.iconPosition === 'start')\"\n        [ngClass]=\"{ 'pull-left flip': button.value }\">\n        <pep-icon name=\"{{button.iconName}}\"></pep-icon>\n    </mat-icon>\n    <span *ngIf=\"button.value\" class=\"ellipsis pull-left flip\"\n        [ngClass]=\"{ 'button-title-with-icon': button.iconName, 'icon-before': button.iconPosition === 'start' }\"\n        [title]=\"button.value\">\n        {{button.value}}\n    </span>\n    <mat-icon *ngIf=\"button.iconName && button.iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': button.value }\">\n        <pep-icon name=\"{{button.iconName}}\"></pep-icon>\n    </mat-icon>\n</ng-template>", styles: [".group-buttons-container{display:flex;border-radius:var(--pep-border-radius-md, .25rem)}.group-buttons-container .dropdown-buttons .first-button,.group-buttons-container .split-buttons .first-button,.group-buttons-container .toggle-buttons .first-button{margin-inline-end:1px}.group-buttons-container .dropdown-buttons .first-button,.group-buttons-container .dropdown-buttons .first-button:after,.group-buttons-container .split-buttons .first-button,.group-buttons-container .split-buttons .first-button:after,.group-buttons-container .toggle-buttons .first-button,.group-buttons-container .toggle-buttons .first-button:after{border-radius:var(--pep-border-radius-md, .25rem) 0 0 var(--pep-border-radius-md, .25rem)}.group-buttons-container .dropdown-buttons .last-button,.group-buttons-container .dropdown-buttons .last-button:after,.group-buttons-container .split-buttons .last-button,.group-buttons-container .split-buttons .last-button:after,.group-buttons-container .toggle-buttons .last-button,.group-buttons-container .toggle-buttons .last-button:after{border-radius:0 var(--pep-border-radius-md, .25rem) var(--pep-border-radius-md, .25rem) 0}.group-buttons-container .dropdown-buttons .pepperi-button,.group-buttons-container .dropdown-buttons .pep-button,.group-buttons-container .split-buttons .pepperi-button,.group-buttons-container .split-buttons .pep-button,.group-buttons-container .toggle-buttons .pepperi-button,.group-buttons-container .toggle-buttons .pep-button{margin-top:0!important}.group-buttons-container .dropdown-buttons .pepperi-button.cdk-focused,.group-buttons-container .dropdown-buttons .pep-button.cdk-focused,.group-buttons-container .split-buttons .pepperi-button.cdk-focused,.group-buttons-container .split-buttons .pep-button.cdk-focused,.group-buttons-container .toggle-buttons .pepperi-button.cdk-focused,.group-buttons-container .toggle-buttons .pep-button.cdk-focused{z-index:2}@media (max-width: 599px){.group-buttons-container .dropdown-buttons.dropup .first-button,.group-buttons-container .split-buttons.dropup .first-button,.group-buttons-container .toggle-buttons.dropup .first-button{max-width:200px;padding:0 .25rem}.group-buttons-container .dropdown-buttons.dropup .last-button,.group-buttons-container .split-buttons.dropup .last-button,.group-buttons-container .toggle-buttons.dropup .last-button{padding:0}}.group-buttons-container .split-buttons,.group-buttons-container .toggle-buttons{display:grid;grid-auto-flow:column}.group-buttons-container .split-buttons.stretch,.group-buttons-container .toggle-buttons.stretch{width:100%}.group-buttons-container .split-buttons .pep-button,.group-buttons-container .toggle-buttons .pep-button{max-width:unset;padding-inline:var(--pep-spacing-xs, .25rem)}.group-buttons-container .split-buttons .first-button,.group-buttons-container .toggle-buttons .first-button{margin-inline-end:-1px}.group-buttons-container .split-buttons .middle-button,.group-buttons-container .toggle-buttons .middle-button{border-radius:0;margin-inline-end:-1px}\n", ".group-buttons-container .toggle-buttons .is-selected.weak{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.group-buttons-container .toggle-buttons .is-selected.weak:hover{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 20%))}.group-buttons-container .toggle-buttons .is-selected.weak:focus{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.group-buttons-container .toggle-buttons .is-selected.weak:active{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%))}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%)!important;box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)!important;border:1px solid hsla(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%),.08)}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled):after{border:unset}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled) .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.group-buttons-container .toggle-buttons .is-selected.regular{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.group-buttons-container .toggle-buttons .is-selected.regular:hover{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}.group-buttons-container .toggle-buttons .is-selected.regular:focus{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative;box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.group-buttons-container .toggle-buttons .is-selected.regular:focus:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.group-buttons-container .toggle-buttons .is-selected.regular:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.group-buttons-container .toggle-buttons .is-selected.regular:active{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative}.group-buttons-container .toggle-buttons .is-selected.regular:active:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.group-buttons-container .toggle-buttons .is-selected.regular:active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04)!important}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled):after{border:unset}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled) .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.PepLayoutService }]; }, propDecorators: { viewType: [{
-                type: Input
-            }], styleType: [{
-                type: Input
-            }], sizeType: [{
-                type: Input
-            }], buttons: [{
-                type: Input
-            }], buttonsDisabled: [{
-                type: Input
-            }], supportUnselect: [{
-                type: Input
-            }], selectedButtonKey: [{
-                type: Input
-            }], stretch: [{
-                type: Input
-            }], buttonClick: [{
-                type: Output
+class PepGroupButtonsComponent {
+    constructor(layoutService) {
+        this.layoutService = layoutService;
+        this.PepScreenSizeType = PepScreenSizeType;
+        this.viewType = 'regular';
+        this.styleType = 'weak';
+        this.sizeType = 'md';
+        this.buttons = [];
+        this.buttonsDisabled = false;
+        this.supportUnselect = false;
+        this.selectedButtonKey = '';
+        this.stretch = false;
+        this.buttonClick = new EventEmitter();
+        this.layoutService.onResize$.subscribe((size) => {
+            this.screenSize = size;
+        });
+    }
+    ngOnDestroy() {
+        // if (this.buttonClick) {
+        //     this.buttonClick.unsubscribe();
+        // }
+    }
+    onButtonClicked(event, button) {
+        const unselect = this.supportUnselect && this.selectedButtonKey === (button === null || button === void 0 ? void 0 : button.key);
+        this.selectedButtonKey = unselect ? '' : button === null || button === void 0 ? void 0 : button.key;
+        const buttonClick = {
+            source: unselect ? null : button,
+            event,
+        };
+        if (button === null || button === void 0 ? void 0 : button.callback) {
+            button.callback(buttonClick);
+        }
+        else {
+            this.buttonClick.emit(buttonClick);
+        }
+    }
+}
+PepGroupButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGroupButtonsComponent, deps: [{ token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
+PepGroupButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: { viewType: "viewType", styleType: "styleType", sizeType: "sizeType", buttons: "buttons", buttonsDisabled: "buttonsDisabled", supportUnselect: "supportUnselect", selectedButtonKey: "selectedButtonKey", stretch: "stretch" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<div class=\"group-buttons-container\" pepRtlDirection>\n    <ng-container *ngIf=\"viewType === 'regular'\">\n        <button *ngFor=\"let button of buttons\" [pepDataQa]=\"button?.value\"\n            class=\"pep-button pep-spacing-element pull-left flip first-button {{ sizeType }} {{ styleType }}\"\n            [disabled]=\"buttonsDisabled || button.disabled\" mat-button (click)=\"onButtonClicked($event, button)\">\n            <span [title]=\"button?.value\">{{ button?.value }}</span>\n        </button>\n    </ng-container>\n\n    <div *ngIf=\"viewType === 'dropdown'\" class=\"dropdown-buttons pep-spacing-element\"\n        [ngClass]=\"{dropup: screenSize >= PepScreenSizeType.MD}\">\n        <button [pepDataQa]=\"buttons[0]?.value\"\n            class=\"pep-button pull-left flip first-button {{ sizeType }} {{ styleType }}\"\n            (click)=\"onButtonClicked($event, buttons[0])\" [disabled]=\"buttonsDisabled || buttons[0].disabled\"\n            mat-button>\n            <span class=\"ellipsis\" [title]=\"buttons[0]?.value\">{{ buttons[0]?.value }}</span>\n        </button>\n        <button class=\"pep-button icon-button pull-right flip last-button {{ sizeType }} {{ styleType }}\"\n            [matMenuTriggerFor]=\"actionsMenu\" [disabled]=\"buttonsDisabled\" pepMenuBlur mat-button>\n            <mat-icon>\n                <pep-icon name=\"{{ screenSize < PepScreenSizeType.MD ? 'arrow_down' : 'arrow_up' }}\">\n                </pep-icon>\n            </mat-icon>\n        </button>\n\n        <mat-menu #actionsMenu=\"matMenu\" xPosition=\"before\">\n            <ng-container *ngFor=\"let button of buttons; let i = index; first as isFirst\">\n                <button *ngIf=\"!isFirst\" mat-menu-item [pepDataQa]=\"button?.value\"\n                    (click)=\"onButtonClicked($event, button)\">\n                    <span [title]=\"button?.value\">{{ button?.value }}</span>\n                </button>\n            </ng-container>\n        </mat-menu>\n    </div>\n\n    <div *ngIf=\"viewType === 'split'\" class=\"split-buttons\">\n        <button *ngFor=\"let button of buttons; let index; let isFirst = first; let isLast = last\"\n            [pepDataQa]=\"button?.value\" mat-button pepButtonBlur\n            class=\"pep-button {{ sizeType }} {{ styleType }} {{ button?.classNames }} pull-left flip\"\n            [disabled]=\"buttonsDisabled || button.disabled\" [ngClass]=\"{\n                'first-button': isFirst, \n                'middle-button': !isFirst && !isLast, \n                'last-button': isLast, \n                'icon-button': button?.iconName && !button?.value}\" (click)=\"onButtonClicked($event, button)\">\n\n            <ng-container *ngTemplateOutlet=\"contentTemplate; context: {button: button}\"></ng-container>\n        </button>\n    </div>\n\n    <div *ngIf=\"viewType === 'toggle'\" class=\"toggle-buttons\" [ngClass]=\"{ 'stretch': stretch }\">\n        <button *ngFor=\"let button of buttons; let index; let isFirst = first; let isLast = last\"\n            [pepDataQa]=\"button?.value\" mat-button pepButtonBlur\n            class=\"pep-button {{ sizeType }} {{ styleType }} {{ button?.classNames }} pull-left flip\"\n            [disabled]=\"buttonsDisabled || button.disabled\" [ngClass]=\"{\n                'first-button': isFirst && !isLast, \n                'middle-button': !isFirst && !isLast, \n                'last-button': isLast && !isFirst,\n                'icon-button': button?.iconName && !button?.value,\n                'is-selected': button?.key !== '' && button?.key === selectedButtonKey}\"\n            (click)=\"onButtonClicked($event, button)\">\n            <ng-container *ngTemplateOutlet=\"contentTemplate; context: {button: button}\"></ng-container>\n        </button>\n    </div>\n</div>\n\n<ng-template #contentTemplate let-button=\"button\">\n    <mat-icon *ngIf=\"button.iconName && (!button.iconPosition || button.iconPosition === 'start')\"\n        [ngClass]=\"{ 'pull-left flip': button.value }\">\n        <pep-icon name=\"{{button.iconName}}\"></pep-icon>\n    </mat-icon>\n    <span *ngIf=\"button.value\" class=\"ellipsis pull-left flip\"\n        [ngClass]=\"{ 'button-title-with-icon': button.iconName, 'icon-before': button.iconPosition === 'start' }\"\n        [title]=\"button.value\">\n        {{button.value}}\n    </span>\n    <mat-icon *ngIf=\"button.iconName && button.iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': button.value }\">\n        <pep-icon name=\"{{button.iconName}}\"></pep-icon>\n    </mat-icon>\n</ng-template>", styles: [".group-buttons-container{display:flex;border-radius:var(--pep-border-radius-md, .25rem)}.group-buttons-container .dropdown-buttons .first-button,.group-buttons-container .split-buttons .first-button,.group-buttons-container .toggle-buttons .first-button{margin-inline-end:1px}.group-buttons-container .dropdown-buttons .first-button,.group-buttons-container .dropdown-buttons .first-button:after,.group-buttons-container .split-buttons .first-button,.group-buttons-container .split-buttons .first-button:after,.group-buttons-container .toggle-buttons .first-button,.group-buttons-container .toggle-buttons .first-button:after{border-radius:var(--pep-border-radius-md, .25rem) 0 0 var(--pep-border-radius-md, .25rem)}.group-buttons-container .dropdown-buttons .last-button,.group-buttons-container .dropdown-buttons .last-button:after,.group-buttons-container .split-buttons .last-button,.group-buttons-container .split-buttons .last-button:after,.group-buttons-container .toggle-buttons .last-button,.group-buttons-container .toggle-buttons .last-button:after{border-radius:0 var(--pep-border-radius-md, .25rem) var(--pep-border-radius-md, .25rem) 0}.group-buttons-container .dropdown-buttons .pepperi-button,.group-buttons-container .dropdown-buttons .pep-button,.group-buttons-container .split-buttons .pepperi-button,.group-buttons-container .split-buttons .pep-button,.group-buttons-container .toggle-buttons .pepperi-button,.group-buttons-container .toggle-buttons .pep-button{margin-top:0!important}.group-buttons-container .dropdown-buttons .pepperi-button.cdk-focused,.group-buttons-container .dropdown-buttons .pep-button.cdk-focused,.group-buttons-container .split-buttons .pepperi-button.cdk-focused,.group-buttons-container .split-buttons .pep-button.cdk-focused,.group-buttons-container .toggle-buttons .pepperi-button.cdk-focused,.group-buttons-container .toggle-buttons .pep-button.cdk-focused{z-index:2}@media (max-width: 599px){.group-buttons-container .dropdown-buttons.dropup .first-button,.group-buttons-container .split-buttons.dropup .first-button,.group-buttons-container .toggle-buttons.dropup .first-button{max-width:200px;padding:0 .25rem}.group-buttons-container .dropdown-buttons.dropup .last-button,.group-buttons-container .split-buttons.dropup .last-button,.group-buttons-container .toggle-buttons.dropup .last-button{padding:0}}.group-buttons-container .split-buttons,.group-buttons-container .toggle-buttons{display:grid;grid-auto-flow:column}.group-buttons-container .split-buttons.stretch,.group-buttons-container .toggle-buttons.stretch{width:100%}.group-buttons-container .split-buttons .pep-button,.group-buttons-container .toggle-buttons .pep-button{max-width:unset;padding-inline:var(--pep-spacing-xs, .25rem)}.group-buttons-container .split-buttons .first-button,.group-buttons-container .toggle-buttons .first-button{margin-inline-end:-1px}.group-buttons-container .split-buttons .middle-button,.group-buttons-container .toggle-buttons .middle-button{border-radius:0;margin-inline-end:-1px}\n", ".group-buttons-container .toggle-buttons .is-selected.weak{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.group-buttons-container .toggle-buttons .is-selected.weak:hover{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 20%))}.group-buttons-container .toggle-buttons .is-selected.weak:focus{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.group-buttons-container .toggle-buttons .is-selected.weak:active{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%))}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%)!important;box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)!important;border:1px solid hsla(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%),.08)}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled):after{border:unset}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled) .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.group-buttons-container .toggle-buttons .is-selected.regular{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.group-buttons-container .toggle-buttons .is-selected.regular:hover{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}.group-buttons-container .toggle-buttons .is-selected.regular:focus{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative;box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.group-buttons-container .toggle-buttons .is-selected.regular:focus:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.group-buttons-container .toggle-buttons .is-selected.regular:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.group-buttons-container .toggle-buttons .is-selected.regular:active{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative}.group-buttons-container .toggle-buttons .is-selected.regular:active:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.group-buttons-container .toggle-buttons .is-selected.regular:active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04)!important}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled):after{border:unset}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled) .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.PepButtonBlurDirective, selector: "[pepButtonBlur]" }, { kind: "directive", type: i1.PepMenuBlurDirective, selector: "[pepMenuBlur]" }, { kind: "directive", type: i1.PepDataQaDirective, selector: "[pepDataQa]", inputs: ["pepDataQa"] }, { kind: "directive", type: i1.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGroupButtonsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-group-buttons', template: "<div class=\"group-buttons-container\" pepRtlDirection>\n    <ng-container *ngIf=\"viewType === 'regular'\">\n        <button *ngFor=\"let button of buttons\" [pepDataQa]=\"button?.value\"\n            class=\"pep-button pep-spacing-element pull-left flip first-button {{ sizeType }} {{ styleType }}\"\n            [disabled]=\"buttonsDisabled || button.disabled\" mat-button (click)=\"onButtonClicked($event, button)\">\n            <span [title]=\"button?.value\">{{ button?.value }}</span>\n        </button>\n    </ng-container>\n\n    <div *ngIf=\"viewType === 'dropdown'\" class=\"dropdown-buttons pep-spacing-element\"\n        [ngClass]=\"{dropup: screenSize >= PepScreenSizeType.MD}\">\n        <button [pepDataQa]=\"buttons[0]?.value\"\n            class=\"pep-button pull-left flip first-button {{ sizeType }} {{ styleType }}\"\n            (click)=\"onButtonClicked($event, buttons[0])\" [disabled]=\"buttonsDisabled || buttons[0].disabled\"\n            mat-button>\n            <span class=\"ellipsis\" [title]=\"buttons[0]?.value\">{{ buttons[0]?.value }}</span>\n        </button>\n        <button class=\"pep-button icon-button pull-right flip last-button {{ sizeType }} {{ styleType }}\"\n            [matMenuTriggerFor]=\"actionsMenu\" [disabled]=\"buttonsDisabled\" pepMenuBlur mat-button>\n            <mat-icon>\n                <pep-icon name=\"{{ screenSize < PepScreenSizeType.MD ? 'arrow_down' : 'arrow_up' }}\">\n                </pep-icon>\n            </mat-icon>\n        </button>\n\n        <mat-menu #actionsMenu=\"matMenu\" xPosition=\"before\">\n            <ng-container *ngFor=\"let button of buttons; let i = index; first as isFirst\">\n                <button *ngIf=\"!isFirst\" mat-menu-item [pepDataQa]=\"button?.value\"\n                    (click)=\"onButtonClicked($event, button)\">\n                    <span [title]=\"button?.value\">{{ button?.value }}</span>\n                </button>\n            </ng-container>\n        </mat-menu>\n    </div>\n\n    <div *ngIf=\"viewType === 'split'\" class=\"split-buttons\">\n        <button *ngFor=\"let button of buttons; let index; let isFirst = first; let isLast = last\"\n            [pepDataQa]=\"button?.value\" mat-button pepButtonBlur\n            class=\"pep-button {{ sizeType }} {{ styleType }} {{ button?.classNames }} pull-left flip\"\n            [disabled]=\"buttonsDisabled || button.disabled\" [ngClass]=\"{\n                'first-button': isFirst, \n                'middle-button': !isFirst && !isLast, \n                'last-button': isLast, \n                'icon-button': button?.iconName && !button?.value}\" (click)=\"onButtonClicked($event, button)\">\n\n            <ng-container *ngTemplateOutlet=\"contentTemplate; context: {button: button}\"></ng-container>\n        </button>\n    </div>\n\n    <div *ngIf=\"viewType === 'toggle'\" class=\"toggle-buttons\" [ngClass]=\"{ 'stretch': stretch }\">\n        <button *ngFor=\"let button of buttons; let index; let isFirst = first; let isLast = last\"\n            [pepDataQa]=\"button?.value\" mat-button pepButtonBlur\n            class=\"pep-button {{ sizeType }} {{ styleType }} {{ button?.classNames }} pull-left flip\"\n            [disabled]=\"buttonsDisabled || button.disabled\" [ngClass]=\"{\n                'first-button': isFirst && !isLast, \n                'middle-button': !isFirst && !isLast, \n                'last-button': isLast && !isFirst,\n                'icon-button': button?.iconName && !button?.value,\n                'is-selected': button?.key !== '' && button?.key === selectedButtonKey}\"\n            (click)=\"onButtonClicked($event, button)\">\n            <ng-container *ngTemplateOutlet=\"contentTemplate; context: {button: button}\"></ng-container>\n        </button>\n    </div>\n</div>\n\n<ng-template #contentTemplate let-button=\"button\">\n    <mat-icon *ngIf=\"button.iconName && (!button.iconPosition || button.iconPosition === 'start')\"\n        [ngClass]=\"{ 'pull-left flip': button.value }\">\n        <pep-icon name=\"{{button.iconName}}\"></pep-icon>\n    </mat-icon>\n    <span *ngIf=\"button.value\" class=\"ellipsis pull-left flip\"\n        [ngClass]=\"{ 'button-title-with-icon': button.iconName, 'icon-before': button.iconPosition === 'start' }\"\n        [title]=\"button.value\">\n        {{button.value}}\n    </span>\n    <mat-icon *ngIf=\"button.iconName && button.iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': button.value }\">\n        <pep-icon name=\"{{button.iconName}}\"></pep-icon>\n    </mat-icon>\n</ng-template>", styles: [".group-buttons-container{display:flex;border-radius:var(--pep-border-radius-md, .25rem)}.group-buttons-container .dropdown-buttons .first-button,.group-buttons-container .split-buttons .first-button,.group-buttons-container .toggle-buttons .first-button{margin-inline-end:1px}.group-buttons-container .dropdown-buttons .first-button,.group-buttons-container .dropdown-buttons .first-button:after,.group-buttons-container .split-buttons .first-button,.group-buttons-container .split-buttons .first-button:after,.group-buttons-container .toggle-buttons .first-button,.group-buttons-container .toggle-buttons .first-button:after{border-radius:var(--pep-border-radius-md, .25rem) 0 0 var(--pep-border-radius-md, .25rem)}.group-buttons-container .dropdown-buttons .last-button,.group-buttons-container .dropdown-buttons .last-button:after,.group-buttons-container .split-buttons .last-button,.group-buttons-container .split-buttons .last-button:after,.group-buttons-container .toggle-buttons .last-button,.group-buttons-container .toggle-buttons .last-button:after{border-radius:0 var(--pep-border-radius-md, .25rem) var(--pep-border-radius-md, .25rem) 0}.group-buttons-container .dropdown-buttons .pepperi-button,.group-buttons-container .dropdown-buttons .pep-button,.group-buttons-container .split-buttons .pepperi-button,.group-buttons-container .split-buttons .pep-button,.group-buttons-container .toggle-buttons .pepperi-button,.group-buttons-container .toggle-buttons .pep-button{margin-top:0!important}.group-buttons-container .dropdown-buttons .pepperi-button.cdk-focused,.group-buttons-container .dropdown-buttons .pep-button.cdk-focused,.group-buttons-container .split-buttons .pepperi-button.cdk-focused,.group-buttons-container .split-buttons .pep-button.cdk-focused,.group-buttons-container .toggle-buttons .pepperi-button.cdk-focused,.group-buttons-container .toggle-buttons .pep-button.cdk-focused{z-index:2}@media (max-width: 599px){.group-buttons-container .dropdown-buttons.dropup .first-button,.group-buttons-container .split-buttons.dropup .first-button,.group-buttons-container .toggle-buttons.dropup .first-button{max-width:200px;padding:0 .25rem}.group-buttons-container .dropdown-buttons.dropup .last-button,.group-buttons-container .split-buttons.dropup .last-button,.group-buttons-container .toggle-buttons.dropup .last-button{padding:0}}.group-buttons-container .split-buttons,.group-buttons-container .toggle-buttons{display:grid;grid-auto-flow:column}.group-buttons-container .split-buttons.stretch,.group-buttons-container .toggle-buttons.stretch{width:100%}.group-buttons-container .split-buttons .pep-button,.group-buttons-container .toggle-buttons .pep-button{max-width:unset;padding-inline:var(--pep-spacing-xs, .25rem)}.group-buttons-container .split-buttons .first-button,.group-buttons-container .toggle-buttons .first-button{margin-inline-end:-1px}.group-buttons-container .split-buttons .middle-button,.group-buttons-container .toggle-buttons .middle-button{border-radius:0;margin-inline-end:-1px}\n", ".group-buttons-container .toggle-buttons .is-selected.weak{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.group-buttons-container .toggle-buttons .is-selected.weak:hover{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 20%))}.group-buttons-container .toggle-buttons .is-selected.weak:focus{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.group-buttons-container .toggle-buttons .is-selected.weak:active{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%))}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%)!important;box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)!important;border:1px solid hsla(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%),.08)}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled):after{border:unset}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled) .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.group-buttons-container .toggle-buttons .is-selected.regular{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.group-buttons-container .toggle-buttons .is-selected.regular:hover{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}.group-buttons-container .toggle-buttons .is-selected.regular:focus{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative;box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.group-buttons-container .toggle-buttons .is-selected.regular:focus:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.group-buttons-container .toggle-buttons .is-selected.regular:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.group-buttons-container .toggle-buttons .is-selected.regular:active{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative}.group-buttons-container .toggle-buttons .is-selected.regular:active:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.group-buttons-container .toggle-buttons .is-selected.regular:active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04)!important}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled):after{border:unset}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled) .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.PepLayoutService }]; }, propDecorators: { viewType: [{
+                type: Input
+            }], styleType: [{
+                type: Input
+            }], sizeType: [{
+                type: Input
+            }], buttons: [{
+                type: Input
+            }], buttonsDisabled: [{
+                type: Input
+            }], supportUnselect: [{
+                type: Input
+            }], selectedButtonKey: [{
+                type: Input
+            }], stretch: [{
+                type: Input
+            }], buttonClick: [{
+                type: Output
             }] } });
 
-class PepGroupButtonsModule {
-    constructor(pepIconRegistry) {
-        this.pepIconRegistry = pepIconRegistry;
-        this.pepIconRegistry.registerIcons([pepIconArrowUp, pepIconArrowDown]);
-    }
-}
-PepGroupButtonsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGroupButtonsModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
-PepGroupButtonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepGroupButtonsModule, declarations: [PepGroupButtonsComponent], imports: [CommonModule,
-        // Material modules
-        MatCommonModule,
-        MatFormFieldModule,
-        MatButtonModule,
-        MatMenuModule,
-        MatIconModule,
-        // ngx-lib modules
-        PepNgxLibModule,
-        PepIconModule], exports: [PepGroupButtonsComponent] });
-PepGroupButtonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGroupButtonsModule, imports: [CommonModule,
-        // Material modules
-        MatCommonModule,
-        MatFormFieldModule,
-        MatButtonModule,
-        MatMenuModule,
-        MatIconModule,
-        // ngx-lib modules
-        PepNgxLibModule,
-        PepIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGroupButtonsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        // Material modules
-                        MatCommonModule,
-                        MatFormFieldModule,
-                        MatButtonModule,
-                        MatMenuModule,
-                        MatIconModule,
-                        // ngx-lib modules
-                        PepNgxLibModule,
-                        PepIconModule,
-                    ],
-                    exports: [PepGroupButtonsComponent],
-                    declarations: [PepGroupButtonsComponent],
-                }]
+class PepGroupButtonsModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons([pepIconArrowUp, pepIconArrowDown]);
+    }
+}
+PepGroupButtonsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGroupButtonsModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+PepGroupButtonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepGroupButtonsModule, declarations: [PepGroupButtonsComponent], imports: [CommonModule,
+        // Material modules
+        MatCommonModule,
+        MatFormFieldModule,
+        MatButtonModule,
+        MatMenuModule,
+        MatIconModule,
+        // ngx-lib modules
+        PepNgxLibModule,
+        PepIconModule], exports: [PepGroupButtonsComponent] });
+PepGroupButtonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGroupButtonsModule, imports: [CommonModule,
+        // Material modules
+        MatCommonModule,
+        MatFormFieldModule,
+        MatButtonModule,
+        MatMenuModule,
+        MatIconModule,
+        // ngx-lib modules
+        PepNgxLibModule,
+        PepIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGroupButtonsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        // Material modules
+                        MatCommonModule,
+                        MatFormFieldModule,
+                        MatButtonModule,
+                        MatMenuModule,
+                        MatIconModule,
+                        // ngx-lib modules
+                        PepNgxLibModule,
+                        PepIconModule,
+                    ],
+                    exports: [PepGroupButtonsComponent],
+                    declarations: [PepGroupButtonsComponent],
+                }]
         }], ctorParameters: function () { return [{ type: i1$1.PepIconRegistry }]; } });
 
-/*
- * Public API Surface of ngx-lib/group-buttons
+/*
+ * Public API Surface of ngx-lib/group-buttons
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { PepGroupButtonsComponent, PepGroupButtonsModule };