@pepperi-addons/ngx-lib 0.2.60 → 0.2.61-query-builder.1

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

@@ -46,8 +46,8 @@ class PepGroupButtonsComponent {
 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:.25rem;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{-webkit-margin-end:1px;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:.25rem 0 0 .25rem;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 .25rem .25rem 0;border-radius:0 var(--pep-border-radius-md,.25rem) var(--pep-border-radius-md,.25rem) 0}.group-buttons-container .dropdown-buttons .pep-button,.group-buttons-container .dropdown-buttons .pepperi-button,.group-buttons-container .split-buttons .pep-button,.group-buttons-container .split-buttons .pepperi-button,.group-buttons-container .toggle-buttons .pep-button,.group-buttons-container .toggle-buttons .pepperi-button{margin-top:0!important}.group-buttons-container .dropdown-buttons .pep-button.cdk-focused,.group-buttons-container .dropdown-buttons .pepperi-button.cdk-focused,.group-buttons-container .split-buttons .pep-button.cdk-focused,.group-buttons-container .split-buttons .pepperi-button.cdk-focused,.group-buttons-container .toggle-buttons .pep-button.cdk-focused,.group-buttons-container .toggle-buttons .pepperi-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}.group-buttons-container .split-buttons .first-button,.group-buttons-container .toggle-buttons .first-button{-webkit-margin-end:-1px;margin-inline-end:-1px}.group-buttons-container .split-buttons .middle-button,.group-buttons-container .toggle-buttons .middle-button{border-radius:0;-webkit-margin-end:-1px;margin-inline-end:-1px}"]
+                template: "<div class=\"group-buttons-container\" pepRtlDirection>\r\n    <ng-container *ngIf=\"viewType === 'regular'\">\r\n        <button *ngFor=\"let button of buttons\" [pepDataQa]=\"button?.value\"\r\n            class=\"pep-button pep-spacing-element pull-left flip first-button {{ sizeType }} {{ styleType }}\"\r\n            [disabled]=\"buttonsDisabled || button.disabled\" mat-button (click)=\"onButtonClicked($event, button)\">\r\n            <span [title]=\"button?.value\">{{ button?.value }}</span>\r\n        </button>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"viewType === 'dropdown'\" class=\"dropdown-buttons pep-spacing-element\"\r\n        [ngClass]=\"{dropup: screenSize >= PepScreenSizeType.MD}\">\r\n        <button [pepDataQa]=\"buttons[0]?.value\"\r\n            class=\"pep-button pull-left flip first-button {{ sizeType }} {{ styleType }}\"\r\n            (click)=\"onButtonClicked($event, buttons[0])\" [disabled]=\"buttonsDisabled || buttons[0].disabled\"\r\n            mat-button>\r\n            <span class=\"ellipsis\" [title]=\"buttons[0]?.value\">{{ buttons[0]?.value }}</span>\r\n        </button>\r\n        <button class=\"pep-button icon-button pull-right flip last-button {{ sizeType }} {{ styleType }}\"\r\n            [matMenuTriggerFor]=\"actionsMenu\" [disabled]=\"buttonsDisabled\" pepMenuBlur mat-button>\r\n            <mat-icon>\r\n                <pep-icon name=\"{{ screenSize < PepScreenSizeType.MD ? 'arrow_down' : 'arrow_up' }}\">\r\n                </pep-icon>\r\n            </mat-icon>\r\n        </button>\r\n\r\n        <mat-menu #actionsMenu=\"matMenu\" xPosition=\"before\">\r\n            <ng-container *ngFor=\"let button of buttons; let i = index; first as isFirst\">\r\n                <button *ngIf=\"!isFirst\" mat-menu-item [pepDataQa]=\"button?.value\"\r\n                    (click)=\"onButtonClicked($event, button)\">\r\n                    <span [title]=\"button?.value\">{{ button?.value }}</span>\r\n                </button>\r\n            </ng-container>\r\n        </mat-menu>\r\n    </div>\r\n\r\n    <div *ngIf=\"viewType === 'split'\" class=\"split-buttons\">\r\n        <button *ngFor=\"let button of buttons; let index; let isFirst = first; let isLast = last\"\r\n            [pepDataQa]=\"button?.value\" mat-button pepButtonBlur\r\n            class=\"pep-button {{ sizeType }} {{ styleType }} {{ button?.classNames }} pull-left flip\"\r\n            [disabled]=\"buttonsDisabled || button.disabled\" [ngClass]=\"{\r\n                'first-button': isFirst, \r\n                'middle-button': !isFirst && !isLast, \r\n                'last-button': isLast, \r\n                'icon-button': button?.iconName && !button?.value}\" (click)=\"onButtonClicked($event, button)\">\r\n\r\n            <ng-container *ngTemplateOutlet=\"contentTemplate; context: {button: button}\"></ng-container>\r\n        </button>\r\n    </div>\r\n\r\n    <div *ngIf=\"viewType === 'toggle'\" class=\"toggle-buttons\" [ngClass]=\"{ 'stretch': stretch }\">\r\n        <button *ngFor=\"let button of buttons; let index; let isFirst = first; let isLast = last\"\r\n            [pepDataQa]=\"button?.value\" mat-button pepButtonBlur\r\n            class=\"pep-button {{ sizeType }} {{ styleType }} {{ button?.classNames }} pull-left flip\"\r\n            [disabled]=\"buttonsDisabled || button.disabled\" [ngClass]=\"{\r\n                'first-button': isFirst && !isLast, \r\n                'middle-button': !isFirst && !isLast, \r\n                'last-button': isLast && !isFirst,\r\n                'icon-button': button?.iconName && !button?.value,\r\n                'is-selected': button?.key !== '' && button?.key === selectedButtonKey}\"\r\n            (click)=\"onButtonClicked($event, button)\">\r\n            <ng-container *ngTemplateOutlet=\"contentTemplate; context: {button: button}\"></ng-container>\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #contentTemplate let-button=\"button\">\r\n    <mat-icon *ngIf=\"button.iconName && (!button.iconPosition || button.iconPosition === 'start')\"\r\n        [ngClass]=\"{ 'pull-left flip': button.value }\">\r\n        <pep-icon name=\"{{button.iconName}}\"></pep-icon>\r\n    </mat-icon>\r\n    <span *ngIf=\"button.value\" class=\"ellipsis pull-left flip\"\r\n        [ngClass]=\"{ 'button-title-with-icon': button.iconName, 'icon-before': button.iconPosition === 'start' }\"\r\n        [title]=\"button.value\">\r\n        {{button.value}}\r\n    </span>\r\n    <mat-icon *ngIf=\"button.iconName && button.iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': button.value }\">\r\n        <pep-icon name=\"{{button.iconName}}\"></pep-icon>\r\n    </mat-icon>\r\n</ng-template>",
+                styles: [".group-buttons-container{display:flex;border-radius:.25rem;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{-webkit-margin-end:1px;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:.25rem 0 0 .25rem;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 .25rem .25rem 0;border-radius:0 var(--pep-border-radius-md,.25rem) var(--pep-border-radius-md,.25rem) 0}.group-buttons-container .dropdown-buttons .pep-button,.group-buttons-container .dropdown-buttons .pepperi-button,.group-buttons-container .split-buttons .pep-button,.group-buttons-container .split-buttons .pepperi-button,.group-buttons-container .toggle-buttons .pep-button,.group-buttons-container .toggle-buttons .pepperi-button{margin-top:0!important}.group-buttons-container .dropdown-buttons .pep-button.cdk-focused,.group-buttons-container .dropdown-buttons .pepperi-button.cdk-focused,.group-buttons-container .split-buttons .pep-button.cdk-focused,.group-buttons-container .split-buttons .pepperi-button.cdk-focused,.group-buttons-container .toggle-buttons .pep-button.cdk-focused,.group-buttons-container .toggle-buttons .pepperi-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}.group-buttons-container .split-buttons .first-button,.group-buttons-container .toggle-buttons .first-button{-webkit-margin-end:-1px;margin-inline-end:-1px}.group-buttons-container .split-buttons .middle-button,.group-buttons-container .toggle-buttons .middle-button{border-radius:0;-webkit-margin-end:-1px;margin-inline-end:-1px}", ".group-buttons-container .toggle-buttons .is-selected.weak{background:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);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(0,0%,calc(10% + 30%));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:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.16);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(0,0%,calc(10% + 20%));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{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.16);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);box-shadow:0 0 0 .25rem rgba(23,102,166,.5);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,.group-buttons-container .toggle-buttons .is-selected.weak:focus{background:#e0e0e0;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),88%);border:1px solid #1a1a1a;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:active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.32);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)}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:rgba(26,26,26,.35)!important;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:#e0e0e0!important;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),88%)!important;box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.04)!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 rgba(26,26,26,.08);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:rgba(26,26,26,.35);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:rgba(26,26,26,.35);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:rgba(26,26,26,.12);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:rgba(26,26,26,.16);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:0 .125rem .25rem 0 rgba(26,26,26,.08);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 .25rem rgba(23,102,166,.5);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:#fff;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;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;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:0 .125rem .25rem 0 rgba(26,26,26,.08);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:#fff;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;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;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:rgba(26,26,26,.35)!important;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:rgba(26,26,26,.04)!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:rgba(26,26,26,.35);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:rgba(26,26,26,.35);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}"]
             },] }
 ];
 PepGroupButtonsComponent.ctorParameters = () => [

package/fesm2015/pepperi-addons-ngx-lib-group-buttons.js.map

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-lib-group-buttons.js","sources":["../../../projects/ngx-lib/group-buttons/group-buttons.component.ts","../../../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'],\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() 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        this.selectedButtonKey = button?.key;\n\n        const buttonClick = {\n            source: button,\n            event,\n        };\n\n        if (button?.callback) {\n            button.callback(buttonClick);\n        } else {\n            this.buttonClick.emit(buttonClick);\n        }\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { 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":[],"mappings":";;;;;;;;;;MAqBa,wBAAwB;IAgBjC,YAAmB,aAA+B;QAA/B,kBAAa,GAAb,aAAa,CAAkB;QAflD,sBAAiB,GAAG,iBAAiB,CAAC;QAG7B,aAAQ,GAA4B,SAAS,CAAC;QAC9C,cAAS,GAAiB,MAAM,CAAC;QACjC,aAAQ,GAAgB,IAAI,CAAC;QAC7B,YAAO,GAAqB,EAAE,CAAC;QAC/B,oBAAe,GAAG,KAAK,CAAC;QACxB,sBAAiB,GAAG,EAAE,CAAC;QACvB,YAAO,GAAG,KAAK,CAAC;QAGzB,gBAAW,GAAuC,IAAI,YAAY,EAAwB,CAAC;QAIvF,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,IAAI;YACxC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SAC1B,CAAC,CAAC;KACN;IAED,WAAW;;;;KAIV;IAED,eAAe,CAAC,KAAY,EAAE,MAAiB;QAC3C,IAAI,CAAC,iBAAiB,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,GAAG,CAAC;QAErC,MAAM,WAAW,GAAG;YAChB,MAAM,EAAE,MAAM;YACd,KAAK;SACR,CAAC;QAEF,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,EAAE;YAClB,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;SAChC;aAAM;YACH,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SACtC;KACJ;;;YA9CJ,SAAS,SAAC;gBACP,QAAQ,EAAE,mBAAmB;gBAC7B,i+IAA6C;;aAEhD;;;YAZG,gBAAgB;;;uBAiBf,KAAK;wBACL,KAAK;uBACL,KAAK;sBACL,KAAK;8BACL,KAAK;gCACL,KAAK;sBACL,KAAK;0BAEL,MAAM;;;MCEE,qBAAqB;IAC9B,YAAoB,eAAgC;QAAhC,oBAAe,GAAf,eAAe,CAAiB;QAChD,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC,CAAC;KAC1E;;;YAnBJ,QAAQ,SAAC;gBACN,OAAO,EAAE;oBACL,YAAY;;oBAEZ,eAAe;oBACf,kBAAkB;oBAClB,eAAe;oBACf,aAAa;oBACb,aAAa;;oBAEb,eAAe;oBACf,aAAa;iBAChB;gBACD,OAAO,EAAE,CAAC,wBAAwB,CAAC;gBACnC,YAAY,EAAE,CAAC,wBAAwB,CAAC;aAC3C;;;YAtBG,eAAe;;;ACZnB;;;;ACAA;;;;;;"}
+{"version":3,"file":"pepperi-addons-ngx-lib-group-buttons.js","sources":["../../../projects/ngx-lib/group-buttons/group-buttons.component.ts","../../../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 {\r\n    Component,\r\n    OnDestroy,\r\n    Input,\r\n    Output,\r\n    EventEmitter,\r\n} from '@angular/core';\r\nimport {\r\n    PepLayoutService, PepScreenSizeType, PepStyleType, PepSizeType\r\n} from '@pepperi-addons/ngx-lib';\r\nimport {\r\n    PepButton,\r\n    IPepButtonClickEvent,\r\n} from '@pepperi-addons/ngx-lib/button';\r\n\r\nexport type PepGroupButtonsViewType = 'regular' | 'dropdown' | 'split' | 'toggle';\r\n@Component({\r\n    selector: 'pep-group-buttons',\r\n    templateUrl: './group-buttons.component.html',\r\n    styleUrls: ['./group-buttons.component.scss', './group-buttons.component.theme.scss'],\r\n})\r\nexport class PepGroupButtonsComponent implements OnDestroy {\r\n    PepScreenSizeType = PepScreenSizeType;\r\n    screenSize: PepScreenSizeType;\r\n\r\n    @Input() viewType: PepGroupButtonsViewType = 'regular';\r\n    @Input() styleType: PepStyleType = 'weak';\r\n    @Input() sizeType: PepSizeType = 'md';\r\n    @Input() buttons: Array<PepButton> = [];\r\n    @Input() buttonsDisabled = false;\r\n    @Input() selectedButtonKey = '';\r\n    @Input() stretch = false;\r\n\r\n    @Output()\r\n    buttonClick: EventEmitter<IPepButtonClickEvent> = new EventEmitter<IPepButtonClickEvent>();\r\n\r\n\r\n    constructor(public layoutService: PepLayoutService) {\r\n        this.layoutService.onResize$.subscribe((size) => {\r\n            this.screenSize = size;\r\n        });\r\n    }\r\n\r\n    ngOnDestroy(): void {\r\n        // if (this.buttonClick) {\r\n        //     this.buttonClick.unsubscribe();\r\n        // }\r\n    }\r\n\r\n    onButtonClicked(event: Event, button: PepButton): void {\r\n        this.selectedButtonKey = button?.key;\r\n\r\n        const buttonClick = {\r\n            source: button,\r\n            event,\r\n        };\r\n\r\n        if (button?.callback) {\r\n            button.callback(buttonClick);\r\n        } else {\r\n            this.buttonClick.emit(buttonClick);\r\n        }\r\n    }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\nimport { MatCommonModule } from '@angular/material/core';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatMenuModule } from '@angular/material/menu';\r\nimport { MatIconModule } from '@angular/material/icon';\r\n\r\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\r\nimport {\r\n    PepIconModule,\r\n    PepIconRegistry,\r\n    pepIconArrowUp,\r\n    pepIconArrowDown,\r\n} from '@pepperi-addons/ngx-lib/icon';\r\n\r\nimport { PepGroupButtonsComponent } from './group-buttons.component';\r\n\r\n@NgModule({\r\n    imports: [\r\n        CommonModule,\r\n        // Material modules\r\n        MatCommonModule,\r\n        MatFormFieldModule,\r\n        MatButtonModule,\r\n        MatMenuModule,\r\n        MatIconModule,\r\n        // ngx-lib modules\r\n        PepNgxLibModule,\r\n        PepIconModule,\r\n    ],\r\n    exports: [PepGroupButtonsComponent],\r\n    declarations: [PepGroupButtonsComponent],\r\n})\r\nexport class PepGroupButtonsModule {\r\n    constructor(private pepIconRegistry: PepIconRegistry) {\r\n        this.pepIconRegistry.registerIcons([pepIconArrowUp, pepIconArrowDown]);\r\n    }\r\n}\r\n","/*\r\n * Public API Surface of ngx-lib/group-buttons\r\n */\r\nexport * from './group-buttons.module';\r\nexport * from './group-buttons.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;MAqBa,wBAAwB;IAgBjC,YAAmB,aAA+B;QAA/B,kBAAa,GAAb,aAAa,CAAkB;QAflD,sBAAiB,GAAG,iBAAiB,CAAC;QAG7B,aAAQ,GAA4B,SAAS,CAAC;QAC9C,cAAS,GAAiB,MAAM,CAAC;QACjC,aAAQ,GAAgB,IAAI,CAAC;QAC7B,YAAO,GAAqB,EAAE,CAAC;QAC/B,oBAAe,GAAG,KAAK,CAAC;QACxB,sBAAiB,GAAG,EAAE,CAAC;QACvB,YAAO,GAAG,KAAK,CAAC;QAGzB,gBAAW,GAAuC,IAAI,YAAY,EAAwB,CAAC;QAIvF,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,IAAI;YACxC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SAC1B,CAAC,CAAC;KACN;IAED,WAAW;;;;KAIV;IAED,eAAe,CAAC,KAAY,EAAE,MAAiB;QAC3C,IAAI,CAAC,iBAAiB,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,GAAG,CAAC;QAErC,MAAM,WAAW,GAAG;YAChB,MAAM,EAAE,MAAM;YACd,KAAK;SACR,CAAC;QAEF,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,EAAE;YAClB,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;SAChC;aAAM;YACH,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SACtC;KACJ;;;YA9CJ,SAAS,SAAC;gBACP,QAAQ,EAAE,mBAAmB;gBAC7B,6nJAA6C;;aAEhD;;;YAZG,gBAAgB;;;uBAiBf,KAAK;wBACL,KAAK;uBACL,KAAK;sBACL,KAAK;8BACL,KAAK;gCACL,KAAK;sBACL,KAAK;0BAEL,MAAM;;;MCEE,qBAAqB;IAC9B,YAAoB,eAAgC;QAAhC,oBAAe,GAAf,eAAe,CAAiB;QAChD,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC,CAAC;KAC1E;;;YAnBJ,QAAQ,SAAC;gBACN,OAAO,EAAE;oBACL,YAAY;;oBAEZ,eAAe;oBACf,kBAAkB;oBAClB,eAAe;oBACf,aAAa;oBACb,aAAa;;oBAEb,eAAe;oBACf,aAAa;iBAChB;gBACD,OAAO,EAAE,CAAC,wBAAwB,CAAC;gBACnC,YAAY,EAAE,CAAC,wBAAwB,CAAC;aAC3C;;;YAtBG,eAAe;;;ACZnB;;;;ACAA;;;;;;"}

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

@@ -498,7 +498,7 @@ class PepIconRegistry {
     }
     getIcon(iconName) {
         if (!this.registry.has(iconName)) {
-            console.warn(`We could not find the Icon with the name ${iconName},
+            console.warn(`We could not find the Icon with the name ${iconName},
                 did you add it to the Icon registry?`);
         }
         return this.registry.get(iconName);