@pepperi-addons/ngx-lib 0.4.2-beta.321 → 0.4.2-beta.323

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

@@ -16,8 +16,9 @@ import * as i1$1 from '@pepperi-addons/ngx-lib/icon';
 import { pepIconArrowUp, pepIconArrowDown, PepIconModule } from '@pepperi-addons/ngx-lib/icon';
 
 class PepGroupButtonsComponent {
-    constructor(layoutService) {
+    constructor(layoutService, changeDetectorRef) {
         this.layoutService = layoutService;
+        this.changeDetectorRef = changeDetectorRef;
         this.PepScreenSizeType = PepScreenSizeType;
         this.viewType = 'regular';
         this.styleType = 'weak';
@@ -37,6 +38,18 @@ class PepGroupButtonsComponent {
         //     this.buttonClick.unsubscribe();
         // }
     }
+    // MatMenu's own trigger sets its internal `_panelAnimationState` to 'enter' synchronously
+    // right after this click is handled (see MatMenuTrigger.openMenu()), but MatMenu is an
+    // OnPush component, so that mutation alone never schedules a re-check of its view when this
+    // whole tree is bootstrapped via Angular Elements (createCustomElement) rather than a
+    // normally-bootstrapped app — the panel gets created and correctly positioned by CDK Overlay,
+    // but stays rendered at its initial 'void' (opacity: 0, scale(0.8)) keyframe forever. A plain
+    // Angular app happens to pick up the change through other CD activity elsewhere in the tree;
+    // Angular Elements doesn't, so nudge it explicitly, once the current synchronous click
+    // dispatch (which is what flips the animation state) has finished.
+    onMenuTriggerClicked() {
+        setTimeout(() => this.changeDetectorRef.detectChanges());
+    }
     onButtonClicked(event, button) {
         const unselect = this.supportUnselect && this.selectedButtonKey === button?.key;
         this.selectedButtonKey = unselect ? '' : button?.key;
@@ -52,12 +65,12 @@ class PepGroupButtonsComponent {
         }
     }
 }
-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-md, .75rem)}.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;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.weak:disabled:not(.ignore-disabled):not(.disabled-no-background-no-color){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}.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%),.08)}.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}.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)}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled):not(.disabled-no-background-no-color){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}\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"] }] });
+PepGroupButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGroupButtonsComponent, deps: [{ token: i1.PepLayoutService }, { token: i0.ChangeDetectorRef }], 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            (click)=\"onMenuTriggerClicked()\">\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-md, .75rem)}.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;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.weak:disabled:not(.ignore-disabled):not(.disabled-no-background-no-color){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}.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%),.08)}.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}.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)}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled):not(.disabled-no-background-no-color){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}\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-md, .75rem)}.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;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.weak:disabled:not(.ignore-disabled):not(.disabled-no-background-no-color){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}.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%),.08)}.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}.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)}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled):not(.disabled-no-background-no-color){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}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.PepLayoutService }]; }, propDecorators: { viewType: [{
+            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            (click)=\"onMenuTriggerClicked()\">\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-md, .75rem)}.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;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.weak:disabled:not(.ignore-disabled):not(.disabled-no-background-no-color){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}.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%),.08)}.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}.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)}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled):not(.disabled-no-background-no-color){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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.PepLayoutService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { viewType: [{
                 type: Input
             }], styleType: [{
                 type: Input

package/fesm2020/pepperi-addons-ngx-lib-group-buttons.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-lib-group-buttons.mjs","sources":["../../../projects/ngx-lib/group-buttons/group-buttons.component.ts","../../../projects/ngx-lib/group-buttons/group-buttons.component.html","../../../projects/ngx-lib/group-buttons/group-buttons.module.ts","../../../projects/ngx-lib/group-buttons/public-api.ts","../../../projects/ngx-lib/group-buttons/pepperi-addons-ngx-lib-group-buttons.ts"],"sourcesContent":["import {\n    Component,\n    OnDestroy,\n    Input,\n    Output,\n    EventEmitter,\n} from '@angular/core';\nimport {\n    PepLayoutService, PepScreenSizeType, PepStyleType, PepSizeType\n} from '@pepperi-addons/ngx-lib';\nimport {\n    PepButton,\n    IPepButtonClickEvent,\n} from '@pepperi-addons/ngx-lib/button';\n\nexport type PepGroupButtonsViewType = 'regular' | 'dropdown' | 'split' | 'toggle';\n@Component({\n    selector: 'pep-group-buttons',\n    templateUrl: './group-buttons.component.html',\n    styleUrls: ['./group-buttons.component.scss', './group-buttons.component.theme.scss'],\n})\nexport class PepGroupButtonsComponent implements OnDestroy {\n    PepScreenSizeType = PepScreenSizeType;\n    screenSize: PepScreenSizeType;\n\n    @Input() viewType: PepGroupButtonsViewType = 'regular';\n    @Input() styleType: PepStyleType = 'weak';\n    @Input() sizeType: PepSizeType = 'md';\n    @Input() buttons: Array<PepButton> = [];\n    @Input() buttonsDisabled = false;\n    @Input() supportUnselect = false;\n    @Input() selectedButtonKey = '';\n    @Input() stretch = false;\n\n    @Output()\n    buttonClick: EventEmitter<IPepButtonClickEvent> = new EventEmitter<IPepButtonClickEvent>();\n\n\n    constructor(public layoutService: PepLayoutService) {\n        this.layoutService.onResize$.subscribe((size) => {\n            this.screenSize = size;\n        });\n    }\n\n    ngOnDestroy(): void {\n        // if (this.buttonClick) {\n        //     this.buttonClick.unsubscribe();\n        // }\n    }\n\n    onButtonClicked(event: Event, button: PepButton): void {       \n        const unselect: boolean = this.supportUnselect && this.selectedButtonKey === button?.key;\n\n        this.selectedButtonKey = unselect ? '' : button?.key;\n        \n        const buttonClick = {\n            source: unselect ? null : button, \n            event,\n        };\n\n        if (button?.callback) {\n            button.callback(buttonClick);\n        } else {\n            this.buttonClick.emit(buttonClick);\n        }\n    }\n}\n","<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>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n    PepIconModule,\n    PepIconRegistry,\n    pepIconArrowUp,\n    pepIconArrowDown,\n} from '@pepperi-addons/ngx-lib/icon';\n\nimport { PepGroupButtonsComponent } from './group-buttons.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        // Material modules\n        MatCommonModule,\n        MatFormFieldModule,\n        MatButtonModule,\n        MatMenuModule,\n        MatIconModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepIconModule,\n    ],\n    exports: [PepGroupButtonsComponent],\n    declarations: [PepGroupButtonsComponent],\n})\nexport class PepGroupButtonsModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons([pepIconArrowUp, pepIconArrowDown]);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/group-buttons\n */\nexport * from './group-buttons.module';\nexport * from './group-buttons.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i6","i1"],"mappings":"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"}
+{"version":3,"file":"pepperi-addons-ngx-lib-group-buttons.mjs","sources":["../../../projects/ngx-lib/group-buttons/group-buttons.component.ts","../../../projects/ngx-lib/group-buttons/group-buttons.component.html","../../../projects/ngx-lib/group-buttons/group-buttons.module.ts","../../../projects/ngx-lib/group-buttons/public-api.ts","../../../projects/ngx-lib/group-buttons/pepperi-addons-ngx-lib-group-buttons.ts"],"sourcesContent":["import {\n    Component,\n    OnDestroy,\n    Input,\n    Output,\n    EventEmitter,\n    ChangeDetectorRef,\n} from '@angular/core';\nimport {\n    PepLayoutService, PepScreenSizeType, PepStyleType, PepSizeType\n} from '@pepperi-addons/ngx-lib';\nimport {\n    PepButton,\n    IPepButtonClickEvent,\n} from '@pepperi-addons/ngx-lib/button';\n\nexport type PepGroupButtonsViewType = 'regular' | 'dropdown' | 'split' | 'toggle';\n@Component({\n    selector: 'pep-group-buttons',\n    templateUrl: './group-buttons.component.html',\n    styleUrls: ['./group-buttons.component.scss', './group-buttons.component.theme.scss'],\n})\nexport class PepGroupButtonsComponent implements OnDestroy {\n    PepScreenSizeType = PepScreenSizeType;\n    screenSize: PepScreenSizeType;\n\n    @Input() viewType: PepGroupButtonsViewType = 'regular';\n    @Input() styleType: PepStyleType = 'weak';\n    @Input() sizeType: PepSizeType = 'md';\n    @Input() buttons: Array<PepButton> = [];\n    @Input() buttonsDisabled = false;\n    @Input() supportUnselect = false;\n    @Input() selectedButtonKey = '';\n    @Input() stretch = false;\n\n    @Output()\n    buttonClick: EventEmitter<IPepButtonClickEvent> = new EventEmitter<IPepButtonClickEvent>();\n\n\n    constructor(public layoutService: PepLayoutService, private changeDetectorRef: ChangeDetectorRef) {\n        this.layoutService.onResize$.subscribe((size) => {\n            this.screenSize = size;\n        });\n    }\n\n    ngOnDestroy(): void {\n        // if (this.buttonClick) {\n        //     this.buttonClick.unsubscribe();\n        // }\n    }\n\n    // MatMenu's own trigger sets its internal `_panelAnimationState` to 'enter' synchronously\n    // right after this click is handled (see MatMenuTrigger.openMenu()), but MatMenu is an\n    // OnPush component, so that mutation alone never schedules a re-check of its view when this\n    // whole tree is bootstrapped via Angular Elements (createCustomElement) rather than a\n    // normally-bootstrapped app — the panel gets created and correctly positioned by CDK Overlay,\n    // but stays rendered at its initial 'void' (opacity: 0, scale(0.8)) keyframe forever. A plain\n    // Angular app happens to pick up the change through other CD activity elsewhere in the tree;\n    // Angular Elements doesn't, so nudge it explicitly, once the current synchronous click\n    // dispatch (which is what flips the animation state) has finished.\n    onMenuTriggerClicked(): void {\n        setTimeout(() => this.changeDetectorRef.detectChanges());\n    }\n\n    onButtonClicked(event: Event, button: PepButton): void {       \n        const unselect: boolean = this.supportUnselect && this.selectedButtonKey === button?.key;\n\n        this.selectedButtonKey = unselect ? '' : button?.key;\n        \n        const buttonClick = {\n            source: unselect ? null : button, \n            event,\n        };\n\n        if (button?.callback) {\n            button.callback(buttonClick);\n        } else {\n            this.buttonClick.emit(buttonClick);\n        }\n    }\n}\n","<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            (click)=\"onMenuTriggerClicked()\">\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>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n    PepIconModule,\n    PepIconRegistry,\n    pepIconArrowUp,\n    pepIconArrowDown,\n} from '@pepperi-addons/ngx-lib/icon';\n\nimport { PepGroupButtonsComponent } from './group-buttons.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        // Material modules\n        MatCommonModule,\n        MatFormFieldModule,\n        MatButtonModule,\n        MatMenuModule,\n        MatIconModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepIconModule,\n    ],\n    exports: [PepGroupButtonsComponent],\n    declarations: [PepGroupButtonsComponent],\n})\nexport class PepGroupButtonsModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons([pepIconArrowUp, pepIconArrowDown]);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/group-buttons\n */\nexport * from './group-buttons.module';\nexport * from './group-buttons.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i6","i1"],"mappings":"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"}

package/fesm2020/pepperi-addons-ngx-lib-list.mjs

@@ -1627,7 +1627,7 @@ class PepListComponent {
                 cf.Layout.XAlignment = 3;
             }
         });
-        if (!this.cd['destroyed']) {
+        if (!this.cd.destroyed) {
             this.cd.detectChanges();
         }
         // Set the container width.
@@ -1924,6 +1924,7 @@ class PepListComponent {
         this.hostElement.nativeElement.getItemDataByID = this.getItemDataByID.bind(this);
         this.hostElement.nativeElement.setSelectedIds = this.setSelectedIds.bind(this);
         this.hostElement.nativeElement.setIsAllSelected = this.setIsAllSelected.bind(this);
+        this.hostElement.nativeElement.getSelectionSnapshot = this.getSelectionSnapshot.bind(this);
     }
     // For refresh the UI when change the is selectable for action on item.
     getisItemDisabled(item) {
@@ -2230,7 +2231,9 @@ class PepListComponent {
                 this.itemsCounter += 1;
             }
         }
-        this.toggleLoadingItemsFropApi(false);
+        this.zone.run(() => {
+            this.toggleLoadingItemsFropApi(false);
+        });
     }
     updatePage(items, event) {
         if (!event) {
@@ -2250,7 +2253,9 @@ class PepListComponent {
             }
         }
         this.updateCurrentPageItems(startIndex, endIndex);
-        this.toggleLoadingItemsFropApi(false);
+        this.zone.run(() => {
+            this.toggleLoadingItemsFropApi(false);
+        });
     }
     updateItem(data) {
         const index = this.items.findIndex((i) => i && i?.UID === data?.UID);
@@ -2345,6 +2350,16 @@ class PepListComponent {
     getItemDataByID(uid) {
         return this.items.find((item) => item?.UID.toString() === uid);
     }
+    // Snapshot of selection state for consumers (e.g. React) that need to run selection-
+    // dependent logic (like package/non-package selection constraints) without direct access
+    // to this component's internal fields.
+    getSelectionSnapshot() {
+        return {
+            items: this.items ?? [],
+            selectedItemIds: Array.from(this.selectedItems.keys()),
+            isAllSelected: this.isAllSelected,
+        };
+    }
     refresh(refreshCompletedCallback = undefined) {
         this.virtualScroller?.refresh(refreshCompletedCallback);
     }
@@ -2485,8 +2500,10 @@ class PepListComponent {
         }
         else {
             setTimeout(() => {
-                this.updateCurrentPageItems(startIndex, endIndex);
-                this.scrollToTop();
+                this.zone.run(() => {
+                    this.updateCurrentPageItems(startIndex, endIndex);
+                    this.scrollToTop();
+                });
             }, this.scrollAnimationTime);
         }
     }