npm - @pepperi-addons/ngx-lib - Versions diffs - 0.4.0-angular14.9 → 0.4.0-beta.3 - Mend

@pepperi-addons/ngx-lib 0.4.0-angular14.9 → 0.4.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (234) hide show

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

@@ -24,6 +24,7 @@ class PepGroupButtonsComponent {
         this.sizeType = 'md';
         this.buttons = [];
         this.buttonsDisabled = false;
+        this.supportUnselect = false;
         this.selectedButtonKey = '';
         this.stretch = false;
         this.buttonClick = new EventEmitter();
@@ -37,9 +38,10 @@ class PepGroupButtonsComponent {
         // }
     }
     onButtonClicked(event, button) {
-        this.selectedButtonKey = button === null || button === void 0 ? void 0 : button.key;
+        const unselect = this.supportUnselect && this.selectedButtonKey === (button === null || button === void 0 ? void 0 : button.key);
+        this.selectedButtonKey = unselect ? '' : button === null || button === void 0 ? void 0 : button.key;
         const buttonClick = {
-            source: button,
+            source: unselect ? null : button,
             event,
         };
         if (button === null || button === void 0 ? void 0 : button.callback) {
@@ -51,7 +53,7 @@ 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", selectedButtonKey: "selectedButtonKey", stretch: "stretch" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<div class=\"group-buttons-container\" pepRtlDirection>\n    <ng-container *ngIf=\"viewType === 'regular'\">\n        <button *ngFor=\"let button of buttons\" [pepDataQa]=\"button?.value\"\n            class=\"pep-button pep-spacing-element pull-left flip first-button {{ sizeType }} {{ styleType }}\"\n            [disabled]=\"buttonsDisabled || button.disabled\" mat-button (click)=\"onButtonClicked($event, button)\">\n            <span [title]=\"button?.value\">{{ button?.value }}</span>\n        </button>\n    </ng-container>\n\n    <div *ngIf=\"viewType === 'dropdown'\" class=\"dropdown-buttons pep-spacing-element\"\n        [ngClass]=\"{dropup: screenSize >= PepScreenSizeType.MD}\">\n        <button [pepDataQa]=\"buttons[0]?.value\"\n            class=\"pep-button pull-left flip first-button {{ sizeType }} {{ styleType }}\"\n            (click)=\"onButtonClicked($event, buttons[0])\" [disabled]=\"buttonsDisabled || buttons[0].disabled\"\n            mat-button>\n            <span class=\"ellipsis\" [title]=\"buttons[0]?.value\">{{ buttons[0]?.value }}</span>\n        </button>\n        <button class=\"pep-button icon-button pull-right flip last-button {{ sizeType }} {{ styleType }}\"\n            [matMenuTriggerFor]=\"actionsMenu\" [disabled]=\"buttonsDisabled\" pepMenuBlur mat-button>\n            <mat-icon>\n                <pep-icon name=\"{{ screenSize < PepScreenSizeType.MD ? 'arrow_down' : 'arrow_up' }}\">\n                </pep-icon>\n            </mat-icon>\n        </button>\n\n        <mat-menu #actionsMenu=\"matMenu\" xPosition=\"before\">\n            <ng-container *ngFor=\"let button of buttons; let i = index; first as isFirst\">\n                <button *ngIf=\"!isFirst\" mat-menu-item [pepDataQa]=\"button?.value\"\n                    (click)=\"onButtonClicked($event, button)\">\n                    <span [title]=\"button?.value\">{{ button?.value }}</span>\n                </button>\n            </ng-container>\n        </mat-menu>\n    </div>\n\n    <div *ngIf=\"viewType === 'split'\" class=\"split-buttons\">\n        <button *ngFor=\"let button of buttons; let index; let isFirst = first; let isLast = last\"\n            [pepDataQa]=\"button?.value\" mat-button pepButtonBlur\n            class=\"pep-button {{ sizeType }} {{ styleType }} {{ button?.classNames }} pull-left flip\"\n            [disabled]=\"buttonsDisabled || button.disabled\" [ngClass]=\"{\n                'first-button': isFirst, \n                'middle-button': !isFirst && !isLast, \n                'last-button': isLast, \n                'icon-button': button?.iconName && !button?.value}\" (click)=\"onButtonClicked($event, button)\">\n\n            <ng-container *ngTemplateOutlet=\"contentTemplate; context: {button: button}\"></ng-container>\n        </button>\n    </div>\n\n    <div *ngIf=\"viewType === 'toggle'\" class=\"toggle-buttons\" [ngClass]=\"{ 'stretch': stretch }\">\n        <button *ngFor=\"let button of buttons; let index; let isFirst = first; let isLast = last\"\n            [pepDataQa]=\"button?.value\" mat-button pepButtonBlur\n            class=\"pep-button {{ sizeType }} {{ styleType }} {{ button?.classNames }} pull-left flip\"\n            [disabled]=\"buttonsDisabled || button.disabled\" [ngClass]=\"{\n                'first-button': isFirst && !isLast, \n                'middle-button': !isFirst && !isLast, \n                'last-button': isLast && !isFirst,\n                'icon-button': button?.iconName && !button?.value,\n                'is-selected': button?.key !== '' && button?.key === selectedButtonKey}\"\n            (click)=\"onButtonClicked($event, button)\">\n            <ng-container *ngTemplateOutlet=\"contentTemplate; context: {button: button}\"></ng-container>\n        </button>\n    </div>\n</div>\n\n<ng-template #contentTemplate let-button=\"button\">\n    <mat-icon *ngIf=\"button.iconName && (!button.iconPosition || button.iconPosition === 'start')\"\n        [ngClass]=\"{ 'pull-left flip': button.value }\">\n        <pep-icon name=\"{{button.iconName}}\"></pep-icon>\n    </mat-icon>\n    <span *ngIf=\"button.value\" class=\"ellipsis pull-left flip\"\n        [ngClass]=\"{ 'button-title-with-icon': button.iconName, 'icon-before': button.iconPosition === 'start' }\"\n        [title]=\"button.value\">\n        {{button.value}}\n    </span>\n    <mat-icon *ngIf=\"button.iconName && button.iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': button.value }\">\n        <pep-icon name=\"{{button.iconName}}\"></pep-icon>\n    </mat-icon>\n</ng-template>", styles: [".group-buttons-container{display:flex;border-radius:var(--pep-border-radius-md, .25rem)}.group-buttons-container .dropdown-buttons .first-button,.group-buttons-container .split-buttons .first-button,.group-buttons-container .toggle-buttons .first-button{margin-inline-end:1px}.group-buttons-container .dropdown-buttons .first-button,.group-buttons-container .dropdown-buttons .first-button:after,.group-buttons-container .split-buttons .first-button,.group-buttons-container .split-buttons .first-button:after,.group-buttons-container .toggle-buttons .first-button,.group-buttons-container .toggle-buttons .first-button:after{border-radius:var(--pep-border-radius-md, .25rem) 0 0 var(--pep-border-radius-md, .25rem)}.group-buttons-container .dropdown-buttons .last-button,.group-buttons-container .dropdown-buttons .last-button:after,.group-buttons-container .split-buttons .last-button,.group-buttons-container .split-buttons .last-button:after,.group-buttons-container .toggle-buttons .last-button,.group-buttons-container .toggle-buttons .last-button:after{border-radius:0 var(--pep-border-radius-md, .25rem) var(--pep-border-radius-md, .25rem) 0}.group-buttons-container .dropdown-buttons .pepperi-button,.group-buttons-container .dropdown-buttons .pep-button,.group-buttons-container .split-buttons .pepperi-button,.group-buttons-container .split-buttons .pep-button,.group-buttons-container .toggle-buttons .pepperi-button,.group-buttons-container .toggle-buttons .pep-button{margin-top:0!important}.group-buttons-container .dropdown-buttons .pepperi-button.cdk-focused,.group-buttons-container .dropdown-buttons .pep-button.cdk-focused,.group-buttons-container .split-buttons .pepperi-button.cdk-focused,.group-buttons-container .split-buttons .pep-button.cdk-focused,.group-buttons-container .toggle-buttons .pepperi-button.cdk-focused,.group-buttons-container .toggle-buttons .pep-button.cdk-focused{z-index:2}@media (max-width: 599px){.group-buttons-container .dropdown-buttons.dropup .first-button,.group-buttons-container .split-buttons.dropup .first-button,.group-buttons-container .toggle-buttons.dropup .first-button{max-width:200px;padding:0 .25rem}.group-buttons-container .dropdown-buttons.dropup .last-button,.group-buttons-container .split-buttons.dropup .last-button,.group-buttons-container .toggle-buttons.dropup .last-button{padding:0}}.group-buttons-container .split-buttons,.group-buttons-container .toggle-buttons{display:grid;grid-auto-flow:column}.group-buttons-container .split-buttons.stretch,.group-buttons-container .toggle-buttons.stretch{width:100%}.group-buttons-container .split-buttons .pep-button,.group-buttons-container .toggle-buttons .pep-button{max-width:unset;padding-inline:var(--pep-spacing-xs, .25rem)}.group-buttons-container .split-buttons .first-button,.group-buttons-container .toggle-buttons .first-button{margin-inline-end:-1px}.group-buttons-container .split-buttons .middle-button,.group-buttons-container .toggle-buttons .middle-button{border-radius:0;margin-inline-end:-1px}\n", ".group-buttons-container .toggle-buttons .is-selected.weak{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.group-buttons-container .toggle-buttons .is-selected.weak:hover{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 20%))}.group-buttons-container .toggle-buttons .is-selected.weak:focus{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.group-buttons-container .toggle-buttons .is-selected.weak:active{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%))}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%)!important;box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)!important;border:1px solid hsla(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%),.08)}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled):after{border:unset}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled) .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.group-buttons-container .toggle-buttons .is-selected.regular{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.group-buttons-container .toggle-buttons .is-selected.regular:hover{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}.group-buttons-container .toggle-buttons .is-selected.regular:focus{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative;box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.group-buttons-container .toggle-buttons .is-selected.regular:focus:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.group-buttons-container .toggle-buttons .is-selected.regular:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right: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;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04)!important}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled):after{border:unset}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled) .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.PepButtonBlurDirective, selector: "[pepButtonBlur]" }, { kind: "directive", type: i1.PepMenuBlurDirective, selector: "[pepMenuBlur]" }, { kind: "directive", type: i1.PepDataQaDirective, selector: "[pepDataQa]", inputs: ["pepDataQa"] }, { kind: "directive", type: i1.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
+PepGroupButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: { viewType: "viewType", styleType: "styleType", sizeType: "sizeType", buttons: "buttons", buttonsDisabled: "buttonsDisabled", supportUnselect: "supportUnselect", selectedButtonKey: "selectedButtonKey", stretch: "stretch" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<div class=\"group-buttons-container\" pepRtlDirection>\n    <ng-container *ngIf=\"viewType === 'regular'\">\n        <button *ngFor=\"let button of buttons\" [pepDataQa]=\"button?.value\"\n            class=\"pep-button pep-spacing-element pull-left flip first-button {{ sizeType }} {{ styleType }}\"\n            [disabled]=\"buttonsDisabled || button.disabled\" mat-button (click)=\"onButtonClicked($event, button)\">\n            <span [title]=\"button?.value\">{{ button?.value }}</span>\n        </button>\n    </ng-container>\n\n    <div *ngIf=\"viewType === 'dropdown'\" class=\"dropdown-buttons pep-spacing-element\"\n        [ngClass]=\"{dropup: screenSize >= PepScreenSizeType.MD}\">\n        <button [pepDataQa]=\"buttons[0]?.value\"\n            class=\"pep-button pull-left flip first-button {{ sizeType }} {{ styleType }}\"\n            (click)=\"onButtonClicked($event, buttons[0])\" [disabled]=\"buttonsDisabled || buttons[0].disabled\"\n            mat-button>\n            <span class=\"ellipsis\" [title]=\"buttons[0]?.value\">{{ buttons[0]?.value }}</span>\n        </button>\n        <button class=\"pep-button icon-button pull-right flip last-button {{ sizeType }} {{ styleType }}\"\n            [matMenuTriggerFor]=\"actionsMenu\" [disabled]=\"buttonsDisabled\" pepMenuBlur mat-button>\n            <mat-icon>\n                <pep-icon name=\"{{ screenSize < PepScreenSizeType.MD ? 'arrow_down' : 'arrow_up' }}\">\n                </pep-icon>\n            </mat-icon>\n        </button>\n\n        <mat-menu #actionsMenu=\"matMenu\" xPosition=\"before\">\n            <ng-container *ngFor=\"let button of buttons; let i = index; first as isFirst\">\n                <button *ngIf=\"!isFirst\" mat-menu-item [pepDataQa]=\"button?.value\"\n                    (click)=\"onButtonClicked($event, button)\">\n                    <span [title]=\"button?.value\">{{ button?.value }}</span>\n                </button>\n            </ng-container>\n        </mat-menu>\n    </div>\n\n    <div *ngIf=\"viewType === 'split'\" class=\"split-buttons\">\n        <button *ngFor=\"let button of buttons; let index; let isFirst = first; let isLast = last\"\n            [pepDataQa]=\"button?.value\" mat-button pepButtonBlur\n            class=\"pep-button {{ sizeType }} {{ styleType }} {{ button?.classNames }} pull-left flip\"\n            [disabled]=\"buttonsDisabled || button.disabled\" [ngClass]=\"{\n                'first-button': isFirst, \n                'middle-button': !isFirst && !isLast, \n                'last-button': isLast, \n                'icon-button': button?.iconName && !button?.value}\" (click)=\"onButtonClicked($event, button)\">\n\n            <ng-container *ngTemplateOutlet=\"contentTemplate; context: {button: button}\"></ng-container>\n        </button>\n    </div>\n\n    <div *ngIf=\"viewType === 'toggle'\" class=\"toggle-buttons\" [ngClass]=\"{ 'stretch': stretch }\">\n        <button *ngFor=\"let button of buttons; let index; let isFirst = first; let isLast = last\"\n            [pepDataQa]=\"button?.value\" mat-button pepButtonBlur\n            class=\"pep-button {{ sizeType }} {{ styleType }} {{ button?.classNames }} pull-left flip\"\n            [disabled]=\"buttonsDisabled || button.disabled\" [ngClass]=\"{\n                'first-button': isFirst && !isLast, \n                'middle-button': !isFirst && !isLast, \n                'last-button': isLast && !isFirst,\n                'icon-button': button?.iconName && !button?.value,\n                'is-selected': button?.key !== '' && button?.key === selectedButtonKey}\"\n            (click)=\"onButtonClicked($event, button)\">\n            <ng-container *ngTemplateOutlet=\"contentTemplate; context: {button: button}\"></ng-container>\n        </button>\n    </div>\n</div>\n\n<ng-template #contentTemplate let-button=\"button\">\n    <mat-icon *ngIf=\"button.iconName && (!button.iconPosition || button.iconPosition === 'start')\"\n        [ngClass]=\"{ 'pull-left flip': button.value }\">\n        <pep-icon name=\"{{button.iconName}}\"></pep-icon>\n    </mat-icon>\n    <span *ngIf=\"button.value\" class=\"ellipsis pull-left flip\"\n        [ngClass]=\"{ 'button-title-with-icon': button.iconName, 'icon-before': button.iconPosition === 'start' }\"\n        [title]=\"button.value\">\n        {{button.value}}\n    </span>\n    <mat-icon *ngIf=\"button.iconName && button.iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': button.value }\">\n        <pep-icon name=\"{{button.iconName}}\"></pep-icon>\n    </mat-icon>\n</ng-template>", styles: [".group-buttons-container{display:flex;border-radius:var(--pep-border-radius-md, .25rem)}.group-buttons-container .dropdown-buttons .first-button,.group-buttons-container .split-buttons .first-button,.group-buttons-container .toggle-buttons .first-button{margin-inline-end:1px}.group-buttons-container .dropdown-buttons .first-button,.group-buttons-container .dropdown-buttons .first-button:after,.group-buttons-container .split-buttons .first-button,.group-buttons-container .split-buttons .first-button:after,.group-buttons-container .toggle-buttons .first-button,.group-buttons-container .toggle-buttons .first-button:after{border-radius:var(--pep-border-radius-md, .25rem) 0 0 var(--pep-border-radius-md, .25rem)}.group-buttons-container .dropdown-buttons .last-button,.group-buttons-container .dropdown-buttons .last-button:after,.group-buttons-container .split-buttons .last-button,.group-buttons-container .split-buttons .last-button:after,.group-buttons-container .toggle-buttons .last-button,.group-buttons-container .toggle-buttons .last-button:after{border-radius:0 var(--pep-border-radius-md, .25rem) var(--pep-border-radius-md, .25rem) 0}.group-buttons-container .dropdown-buttons .pepperi-button,.group-buttons-container .dropdown-buttons .pep-button,.group-buttons-container .split-buttons .pepperi-button,.group-buttons-container .split-buttons .pep-button,.group-buttons-container .toggle-buttons .pepperi-button,.group-buttons-container .toggle-buttons .pep-button{margin-top:0!important}.group-buttons-container .dropdown-buttons .pepperi-button.cdk-focused,.group-buttons-container .dropdown-buttons .pep-button.cdk-focused,.group-buttons-container .split-buttons .pepperi-button.cdk-focused,.group-buttons-container .split-buttons .pep-button.cdk-focused,.group-buttons-container .toggle-buttons .pepperi-button.cdk-focused,.group-buttons-container .toggle-buttons .pep-button.cdk-focused{z-index:2}@media (max-width: 599px){.group-buttons-container .dropdown-buttons.dropup .first-button,.group-buttons-container .split-buttons.dropup .first-button,.group-buttons-container .toggle-buttons.dropup .first-button{max-width:200px;padding:0 .25rem}.group-buttons-container .dropdown-buttons.dropup .last-button,.group-buttons-container .split-buttons.dropup .last-button,.group-buttons-container .toggle-buttons.dropup .last-button{padding:0}}.group-buttons-container .split-buttons,.group-buttons-container .toggle-buttons{display:grid;grid-auto-flow:column}.group-buttons-container .split-buttons.stretch,.group-buttons-container .toggle-buttons.stretch{width:100%}.group-buttons-container .split-buttons .pep-button,.group-buttons-container .toggle-buttons .pep-button{max-width:unset;padding-inline:var(--pep-spacing-xs, .25rem)}.group-buttons-container .split-buttons .first-button,.group-buttons-container .toggle-buttons .first-button{margin-inline-end:-1px}.group-buttons-container .split-buttons .middle-button,.group-buttons-container .toggle-buttons .middle-button{border-radius:0;margin-inline-end:-1px}\n", ".group-buttons-container .toggle-buttons .is-selected.weak{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.group-buttons-container .toggle-buttons .is-selected.weak:hover{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 20%))}.group-buttons-container .toggle-buttons .is-selected.weak:focus{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.group-buttons-container .toggle-buttons .is-selected.weak:active{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%))}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%)!important;box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)!important;border:1px solid hsla(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%),.08)}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled):after{border:unset}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled) .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.group-buttons-container .toggle-buttons .is-selected.regular{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.group-buttons-container .toggle-buttons .is-selected.regular:hover{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}.group-buttons-container .toggle-buttons .is-selected.regular:focus{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative;box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.group-buttons-container .toggle-buttons .is-selected.regular:focus:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.group-buttons-container .toggle-buttons .is-selected.regular:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right: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;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04)!important}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled):after{border:unset}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled) .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.PepButtonBlurDirective, selector: "[pepButtonBlur]" }, { kind: "directive", type: i1.PepMenuBlurDirective, selector: "[pepMenuBlur]" }, { kind: "directive", type: i1.PepDataQaDirective, selector: "[pepDataQa]", inputs: ["pepDataQa"] }, { kind: "directive", type: i1.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGroupButtonsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-group-buttons', template: "<div class=\"group-buttons-container\" pepRtlDirection>\n    <ng-container *ngIf=\"viewType === 'regular'\">\n        <button *ngFor=\"let button of buttons\" [pepDataQa]=\"button?.value\"\n            class=\"pep-button pep-spacing-element pull-left flip first-button {{ sizeType }} {{ styleType }}\"\n            [disabled]=\"buttonsDisabled || button.disabled\" mat-button (click)=\"onButtonClicked($event, button)\">\n            <span [title]=\"button?.value\">{{ button?.value }}</span>\n        </button>\n    </ng-container>\n\n    <div *ngIf=\"viewType === 'dropdown'\" class=\"dropdown-buttons pep-spacing-element\"\n        [ngClass]=\"{dropup: screenSize >= PepScreenSizeType.MD}\">\n        <button [pepDataQa]=\"buttons[0]?.value\"\n            class=\"pep-button pull-left flip first-button {{ sizeType }} {{ styleType }}\"\n            (click)=\"onButtonClicked($event, buttons[0])\" [disabled]=\"buttonsDisabled || buttons[0].disabled\"\n            mat-button>\n            <span class=\"ellipsis\" [title]=\"buttons[0]?.value\">{{ buttons[0]?.value }}</span>\n        </button>\n        <button class=\"pep-button icon-button pull-right flip last-button {{ sizeType }} {{ styleType }}\"\n            [matMenuTriggerFor]=\"actionsMenu\" [disabled]=\"buttonsDisabled\" pepMenuBlur mat-button>\n            <mat-icon>\n                <pep-icon name=\"{{ screenSize < PepScreenSizeType.MD ? 'arrow_down' : 'arrow_up' }}\">\n                </pep-icon>\n            </mat-icon>\n        </button>\n\n        <mat-menu #actionsMenu=\"matMenu\" xPosition=\"before\">\n            <ng-container *ngFor=\"let button of buttons; let i = index; first as isFirst\">\n                <button *ngIf=\"!isFirst\" mat-menu-item [pepDataQa]=\"button?.value\"\n                    (click)=\"onButtonClicked($event, button)\">\n                    <span [title]=\"button?.value\">{{ button?.value }}</span>\n                </button>\n            </ng-container>\n        </mat-menu>\n    </div>\n\n    <div *ngIf=\"viewType === 'split'\" class=\"split-buttons\">\n        <button *ngFor=\"let button of buttons; let index; let isFirst = first; let isLast = last\"\n            [pepDataQa]=\"button?.value\" mat-button pepButtonBlur\n            class=\"pep-button {{ sizeType }} {{ styleType }} {{ button?.classNames }} pull-left flip\"\n            [disabled]=\"buttonsDisabled || button.disabled\" [ngClass]=\"{\n                'first-button': isFirst, \n                'middle-button': !isFirst && !isLast, \n                'last-button': isLast, \n                'icon-button': button?.iconName && !button?.value}\" (click)=\"onButtonClicked($event, button)\">\n\n            <ng-container *ngTemplateOutlet=\"contentTemplate; context: {button: button}\"></ng-container>\n        </button>\n    </div>\n\n    <div *ngIf=\"viewType === 'toggle'\" class=\"toggle-buttons\" [ngClass]=\"{ 'stretch': stretch }\">\n        <button *ngFor=\"let button of buttons; let index; let isFirst = first; let isLast = last\"\n            [pepDataQa]=\"button?.value\" mat-button pepButtonBlur\n            class=\"pep-button {{ sizeType }} {{ styleType }} {{ button?.classNames }} pull-left flip\"\n            [disabled]=\"buttonsDisabled || button.disabled\" [ngClass]=\"{\n                'first-button': isFirst && !isLast, \n                'middle-button': !isFirst && !isLast, \n                'last-button': isLast && !isFirst,\n                'icon-button': button?.iconName && !button?.value,\n                'is-selected': button?.key !== '' && button?.key === selectedButtonKey}\"\n            (click)=\"onButtonClicked($event, button)\">\n            <ng-container *ngTemplateOutlet=\"contentTemplate; context: {button: button}\"></ng-container>\n        </button>\n    </div>\n</div>\n\n<ng-template #contentTemplate let-button=\"button\">\n    <mat-icon *ngIf=\"button.iconName && (!button.iconPosition || button.iconPosition === 'start')\"\n        [ngClass]=\"{ 'pull-left flip': button.value }\">\n        <pep-icon name=\"{{button.iconName}}\"></pep-icon>\n    </mat-icon>\n    <span *ngIf=\"button.value\" class=\"ellipsis pull-left flip\"\n        [ngClass]=\"{ 'button-title-with-icon': button.iconName, 'icon-before': button.iconPosition === 'start' }\"\n        [title]=\"button.value\">\n        {{button.value}}\n    </span>\n    <mat-icon *ngIf=\"button.iconName && button.iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': button.value }\">\n        <pep-icon name=\"{{button.iconName}}\"></pep-icon>\n    </mat-icon>\n</ng-template>", styles: [".group-buttons-container{display:flex;border-radius:var(--pep-border-radius-md, .25rem)}.group-buttons-container .dropdown-buttons .first-button,.group-buttons-container .split-buttons .first-button,.group-buttons-container .toggle-buttons .first-button{margin-inline-end:1px}.group-buttons-container .dropdown-buttons .first-button,.group-buttons-container .dropdown-buttons .first-button:after,.group-buttons-container .split-buttons .first-button,.group-buttons-container .split-buttons .first-button:after,.group-buttons-container .toggle-buttons .first-button,.group-buttons-container .toggle-buttons .first-button:after{border-radius:var(--pep-border-radius-md, .25rem) 0 0 var(--pep-border-radius-md, .25rem)}.group-buttons-container .dropdown-buttons .last-button,.group-buttons-container .dropdown-buttons .last-button:after,.group-buttons-container .split-buttons .last-button,.group-buttons-container .split-buttons .last-button:after,.group-buttons-container .toggle-buttons .last-button,.group-buttons-container .toggle-buttons .last-button:after{border-radius:0 var(--pep-border-radius-md, .25rem) var(--pep-border-radius-md, .25rem) 0}.group-buttons-container .dropdown-buttons .pepperi-button,.group-buttons-container .dropdown-buttons .pep-button,.group-buttons-container .split-buttons .pepperi-button,.group-buttons-container .split-buttons .pep-button,.group-buttons-container .toggle-buttons .pepperi-button,.group-buttons-container .toggle-buttons .pep-button{margin-top:0!important}.group-buttons-container .dropdown-buttons .pepperi-button.cdk-focused,.group-buttons-container .dropdown-buttons .pep-button.cdk-focused,.group-buttons-container .split-buttons .pepperi-button.cdk-focused,.group-buttons-container .split-buttons .pep-button.cdk-focused,.group-buttons-container .toggle-buttons .pepperi-button.cdk-focused,.group-buttons-container .toggle-buttons .pep-button.cdk-focused{z-index:2}@media (max-width: 599px){.group-buttons-container .dropdown-buttons.dropup .first-button,.group-buttons-container .split-buttons.dropup .first-button,.group-buttons-container .toggle-buttons.dropup .first-button{max-width:200px;padding:0 .25rem}.group-buttons-container .dropdown-buttons.dropup .last-button,.group-buttons-container .split-buttons.dropup .last-button,.group-buttons-container .toggle-buttons.dropup .last-button{padding:0}}.group-buttons-container .split-buttons,.group-buttons-container .toggle-buttons{display:grid;grid-auto-flow:column}.group-buttons-container .split-buttons.stretch,.group-buttons-container .toggle-buttons.stretch{width:100%}.group-buttons-container .split-buttons .pep-button,.group-buttons-container .toggle-buttons .pep-button{max-width:unset;padding-inline:var(--pep-spacing-xs, .25rem)}.group-buttons-container .split-buttons .first-button,.group-buttons-container .toggle-buttons .first-button{margin-inline-end:-1px}.group-buttons-container .split-buttons .middle-button,.group-buttons-container .toggle-buttons .middle-button{border-radius:0;margin-inline-end:-1px}\n", ".group-buttons-container .toggle-buttons .is-selected.weak{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.group-buttons-container .toggle-buttons .is-selected.weak:hover{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 20%))}.group-buttons-container .toggle-buttons .is-selected.weak:focus{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.group-buttons-container .toggle-buttons .is-selected.weak:active{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%))}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%)!important;box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)!important;border:1px solid hsla(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%),.08)}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled):after{border:unset}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled) .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.group-buttons-container .toggle-buttons .is-selected.regular{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.group-buttons-container .toggle-buttons .is-selected.regular:hover{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}.group-buttons-container .toggle-buttons .is-selected.regular:focus{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative;box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.group-buttons-container .toggle-buttons .is-selected.regular:focus:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.group-buttons-container .toggle-buttons .is-selected.regular:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right: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;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04)!important}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled):after{border:unset}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled) .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}\n"] }]
@@ -65,6 +67,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }], buttonsDisabled: [{
                 type: Input
+            }], supportUnselect: [{
+                type: Input
             }], selectedButtonKey: [{
                 type: Input
             }], stretch: [{

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

	@@ -1 +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() 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","<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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"}
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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"}

package/fesm2015/pepperi-addons-ngx-lib-icon.mjs CHANGED Viewed

@@ -43,11 +43,15 @@ const allIcons = {
     shopping_paper: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2a5 5 0 015 5v1h2a2 2 0 012 2v8a4 4 0 01-4 4H7a4 4 0 01-4-4v-8a2 2 0 012-2h2V7a5 5 0 015-5zm6 8H6a1 1 0 00-1 1v7a2 2 0 002 2h10a2 2 0 002-2v-7a1 1 0 00-1-1zm-6-6a3 3 0 00-3 3v1h6V7a3 3 0 00-3-3z"/></svg>',
     system_attach: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M10.86 14.378l2.787-2.786a.985.985 0 00-1.393-1.393l-2.786 2.786a2.955 2.955 0 104.179 4.18l2.786-2.787a4.925 4.925 0 00-6.965-6.965L6.68 10.199a.985.985 0 01-1.393-1.393L8.075 6.02a6.896 6.896 0 019.75 9.751l-2.785 2.786a4.925 4.925 0 01-6.965-6.965l2.786-2.786a2.955 2.955 0 114.179 4.18l-2.786 2.785a.985.985 0 01-1.393-1.393z"/></svg>',
     system_avatar: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M5.873 20C5.317 18.835 5 17.562 5 16.333c0-2.407 1.215-4.078 3.066-4.997C7.706 10.393 7.5 9.37 7.5 8.4 7.5 5.362 9.515 4 12 4s4.5 1.362 4.5 4.4c0 .97-.205 1.993-.566 2.936 1.85.919 3.066 2.59 3.066 4.997 0 1.23-.317 2.502-.873 3.667h-1.244c-1.16 0-1.16-.629-.999-.966.392-.816.616-1.705.616-2.534 0-1.482-.716-2.44-1.821-2.974C13.93 14.42 13.004 15 12 15c-1.004 0-1.93-.58-2.679-1.474C8.216 14.06 7.5 15.018 7.5 16.5c0 .827.223 1.712.612 2.525.163.34.163.975-.966.975H5.873zM12 12.5c1.105 0 2-2.2 2-3.857S13.105 6.5 12 6.5s-2 .486-2 2.143c0 1.657.895 3.857 2 3.857z"/></svg>',
+    system_bell_on: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path fill="#000" fill-rule="nonzero" d="M12 2a6.004 6.004 0 015.982 5.538l.013.224L18 8v3.667l2.8 3.733a1 1 0 01.167.346l.025.126L21 16l-.001 2a1 1 0 01-.884.992L20 19H15a3 3 0 01-5.995.176L9 19H4a1 1 0 01-.993-.883L3 18v-2a1 1 0 01.13-.492l.07-.108L6 11.667V7.979l.006-.239A6 6 0 0112 2zm0 2C9.856 4 8.095 5.691 8.004 7.804L8 8v4a1 1 0 01-.2.6L5 16.333V17h13.999l.001-.667-2.8-3.733a1 1 0 01-.192-.471L16 12V8.021l-.004-.195A4 4 0 0012 4z"/><circle cx="19" cy="5" r="5" fill="#E62600"/></g></svg>',
+    system_bell: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M4 19a1 1 0 01-1-1v-2a1 1 0 01.2-.6L6 11.667V7.979l.006-.239a6 6 0 0111.99.022L18 8v3.667l2.8 3.733a1 1 0 01.192.472L21 16l-.001 2a1 1 0 01-1 .999H15a3 3 0 01-6 0zm8-15a4 4 0 013.996 3.826L16 8.02V12l.008.129a1 1 0 00.192.471l2.8 3.733-.001.667H5v-.667L7.8 12.6A1 1 0 008 12V8l.004-.196C8.094 5.691 9.856 4 12 4z"/></svg>',
     system_bin: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M9 7V6a1 1 0 011-1h4a1 1 0 011 1v.999l.913.001H17a1 1 0 010 2h-.167l-.757 9.083a1 1 0 01-.996.917H8.92a1 1 0 01-.996-.917L7.166 9H7a1 1 0 110-2h2zm5.76 2l-5.525.005L9.79 17h4.42l.55-8z"/></svg>',
     system_bolt: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M10.612 19.84a.33.33 0 01-.279.16.332.332 0 01-.128-.026.362.362 0 01-.199-.402l1.25-6.568H7.333c-.103 0-.2-.05-.263-.137a.374.374 0 01-.06-.305l2-8.293A.336.336 0 019.333 4h6c.122 0 .235.07.294.185a.377.377 0 01-.012.362L12.943 9h3.723c.122 0 .235.064.294.18a.387.387 0 01-.015.37l-6.333 10.29z"/></svg>',
+    system_boolean: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M6 17A5 5 0 016 7h12a5 5 0 01.217 9.995L18 17H6zm8.007-8H6a3 3 0 00-.176 5.995L6 15h8.007a4.968 4.968 0 010-6z"/></svg>',
     system_chat: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M11.5 4a7.5 7.5 0 016.755 10.764L20 20l-5.236-1.745A7.5 7.5 0 1111.5 4zm0 2a5.5 5.5 0 102.392 10.454l.732-.354 2.214.738-.738-2.214.354-.732A5.5 5.5 0 0011.5 6zm-2 4a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm4 0a1.5 1.5 0 110 3 1.5 1.5 0 010-3z"/></svg>',
     system_circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill-rule="evenodd"/></svg>',
     system_close: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18.39 5.61a2.085 2.085 0 010 2.95L14.948 12l3.44 3.44c.774.774.813 2.004.116 2.823l-.116.126a2.085 2.085 0 01-2.949 0L12 14.95l-3.44 3.44a2.085 2.085 0 11-2.95-2.949L9.052 12l-3.44-3.44a2.085 2.085 0 01-.116-2.823l.116-.126a2.085 2.085 0 012.949 0L12 9.05l3.44-3.44a2.085 2.085 0 012.95 0z"/></svg>',
+    system_copy: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M21 2a1 1 0 011 1v14a1 1 0 01-1 1h-3v3a1 1 0 01-1 1H3a1 1 0 01-1-1V7a1 1 0 011-1l3-.001V3a1 1 0 011-1h14zm-5.5 6h-11a.5.5 0 00-.5.5v11a.5.5 0 00.5.5h11a.5.5 0 00.5-.5v-11a.5.5 0 00-.5-.5zM10 10a1 1 0 011 1v1.999L13 13a1 1 0 010 2l-2-.001V17a1 1 0 01-2 0v-2.001L7 15a1 1 0 010-2l2-.001V11a1 1 0 011-1zm9.5-6h-11a.5.5 0 00-.5.5v1.499L17 6a1 1 0 011 1v9h1.5a.5.5 0 00.5-.5v-11a.5.5 0 00-.5-.5z"/></svg>',
     system_doc: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M13.172 4a1 1 0 01.707.293l3.828 3.828a1 1 0 01.293.707V19a1 1 0 01-1 1H7a1 1 0 01-1-1V5a1 1 0 011-1h6.172zM11 6H9a1 1 0 00-1 1v10a1 1 0 001 1h6a1 1 0 001-1v-6a1 1 0 00-1-1h-2a1 1 0 01-1-1V7a1 1 0 00-1-1z"/></svg>',
     system_door: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M19 16.7a2 2 0 01-1.188 1.828l-7.109 3.16A.5.5 0 0110 21.23V10.3a2 2 0 011.188-1.828l5.579-2.48L7 5.959V17a1 1 0 01-2 0V5a1 1 0 011-1h12a1 1 0 011 1v11.7z"/></svg>',
     system_dot_ellipsis: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill-rule="evenodd" transform="translate(5 17)"><circle cx="1.5" cy="1.5" r="1.5"/><circle cx="7.5" cy="1.5" r="1.5"/><circle cx="13.5" cy="1.5" r="1.5"/></g></svg>',
@@ -79,6 +83,7 @@ const allIcons = {
     system_print: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M15 7a1 1 0 00-1-1h-4a1 1 0 00-.993.883L9 7v1H7V6a2 2 0 012-2h6a2 2 0 012 2v2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2v2a2 2 0 01-2 2H9a2 2 0 01-2-2v-2H5a2 2 0 01-2-2v-4a2 2 0 012-2h10V7zm0 7H9v3a1 1 0 00.883.993L10 18h4a1 1 0 00.993-.883L15 17v-3zm3-4H6a1 1 0 00-.993.883L5 11v2a1 1 0 00.883.993L6 14h1v-2h10v2h1a1 1 0 00.993-.883L19 13v-2a1 1 0 00-1-1z"/></svg>',
     system_processing: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 12a1 1 0 012 0 8 8 0 01-11.955 6.955l-1.338 1.338A1 1 0 015 19.586V16a1 1 0 011-1h3.586a1 1 0 01.707 1.707l-.763.763A6 6 0 0018 12zM4 12a8 8 0 0111.955-6.955l1.338-1.338A1 1 0 0119 4.414V8a1 1 0 01-1 1h-3.586a1 1 0 01-.707-1.707l.763-.763A6 6 0 006 12a1 1 0 01-2 0z" fill-rule="evenodd"/></svg>',
     system_question: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3a9 9 0 110 18 9 9 0 010-18zm0 2a7 7 0 100 14 7 7 0 000-14zm-.004 9a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-.087-7c2.565 0 3.814 1.075 3.814 2.575 0 .93-.665 1.713-1.25 2.022-.774.409-1.213.678-1.268 1.27l-.006.133h-2.703c0-1.421.199-1.866 1.118-2.285.782-.358 1.38-.656 1.38-1.14 0-.432-.493-.726-1.11-.726-.62 0-1.156.305-1.225.75l-.007.097H8.21C8.235 7.795 9.511 7 11.91 7z" fill-rule="evenodd"/></svg>',
+    system_radio_btn: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 3a9 9 0 110 18 9 9 0 010-18zm0 2a7 7 0 100 14 7 7 0 000-14zm0 3a4 4 0 110 8 4 4 0 010-8z"/></svg>',
     system_rotate_device: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18.707 4.293A1 1 0 0119 5v3.586a1 1 0 01-1 1h-3.586a1 1 0 01-.707-1.707l.763-.763A6 6 0 006 12.561V16.5A1.5 1.5 0 007.5 18h9a1.5 1.5 0 001.5-1.5V13a1 1 0 012 0v4a3 3 0 01-3 3H7a3 3 0 01-3-3v-5h.021a8 8 0 0111.934-6.37l1.338-1.337a1 1 0 011.414 0zM12 11a2 2 0 011.001 3.732L13 16a1 1 0 01-2 0v-1.268A2 2 0 0112 11z"/></svg>',
     system_search: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M10.5 4a6.5 6.5 0 015.533 9.912l3.538 3.538a1 1 0 010 1.414l-.707.707a1 1 0 01-1.414 0l-3.538-3.538A6.5 6.5 0 1110.5 4zm0 2.5a4 4 0 100 8 4 4 0 000-8z"/></svg>',
     system_select: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M16.153 4l-1.944 2H6a1 1 0 00-1 1v11h14v-7.039c.66-.69 1.322-1.38 2-2.073V19a1 1 0 01-1 1H4a1 1 0 01-1-1V5a1 1 0 011-1h12.153zm3.358 0a1.447 1.447 0 011.055 2.48c-2.542 2.548-4.874 5.11-7.476 7.718-.52.524-1.351.572-1.93.113l-3.617-2.894a1.449 1.449 0 011.809-2.261l2.585 2.072c2.199-2.246 4.29-4.495 6.58-6.79.262-.27.618-.427.994-.437z"/></svg>',
@@ -92,6 +97,8 @@ const allIcons = {
     text_align_center: '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15 17a1 1 0 010 2H9a1 1 0 010-2zm6-4a1 1 0 010 2H3a1 1 0 010-2zm-2-4a1 1 0 010 2H5a1 1 0 010-2zm3-4a1 1 0 010 2H2a1 1 0 110-2z" fill-rule="evenodd"/></svg>',
     text_align_left: '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22 17a1 1 0 010 2h-6a1 1 0 010-2zm0-4a1 1 0 010 2H4a1 1 0 010-2zm0-4a1 1 0 010 2H8a1 1 0 010-2zm0-4a1 1 0 010 2H2a1 1 0 110-2z" fill-rule="evenodd"/></svg>',
     text_align_right: '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 17a1 1 0 010 2H2a1 1 0 010-2zm12-4a1 1 0 010 2H2a1 1 0 010-2zm-4-4a1 1 0 010 2H2a1 1 0 010-2zm6-4a1 1 0 010 2H2a1 1 0 110-2z" fill-rule="evenodd"/></svg>',
+    text_long_text: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M14 17H2a1 1 0 000 2h12a1 1 0 000-2zm7-4h-6a1 1 0 000 2h6a1 1 0 000-2zm-10 0H2a1 1 0 000 2h9a1 1 0 000-2zM5 9H2a1 1 0 100 2h3a1 1 0 000-2zm13 0H9a1 1 0 100 2h9a1 1 0 000-2zm-8-4H2a1 1 0 100 2h8a1 1 0 000-2zm12 0h-8a1 1 0 000 2h8a1 1 0 000-2z"/></svg>',
+    text_short_text: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M4.5 13h-2a1.5 1.5 0 000 3h2a1.5 1.5 0 000-3zm13 0h-8a1.5 1.5 0 000 3h8a1.5 1.5 0 000-3zm-8-5h-7a1.5 1.5 0 000 3h7a1.5 1.5 0 000-3zm12 0h-7a1.5 1.5 0 000 3h7a1.5 1.5 0 000-3z"/></svg>',
     time_cal: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M16 3a1 1 0 011 1v1h1a2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h1V4a1 1 0 01.883-.993L8 3a1 1 0 011 1v1h2V4a1 1 0 01.883-.993L12 3a1 1 0 011 1v1h2V4a1 1 0 01.883-.993zm2 8H6v6a1 1 0 001 1h10a1 1 0 001-1v-6zM7.983 7H7a1 1 0 00-1 1v1h12V8a1 1 0 00-1-1l-.983-.001L16 7h-.017l-3.966-.001L12 7h-.017l-3.966-.001L8 7h-.017z"/></svg>',
     time_datetime: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M16 3a1 1 0 011 1v1h1a2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h1V4a1 1 0 01.883-.993L8 3a1 1 0 011 1v1h2V4a1 1 0 01.883-.993L12 3a1 1 0 011 1v1h2V4a1 1 0 01.883-.993zm1 4H7a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V8a1 1 0 00-1-1zm-5 1a1 1 0 011 1v3.585l1.828 1.83a1 1 0 11-1.414 1.413l-2.121-2.12-.073-.083a1.003 1.003 0 01-.007-.008l.08.09A1.008 1.008 0 0111 13.02 1 1 0 0111 13V9a1 1 0 011-1z"/></svg>',
     time_duration: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M16 3a1 1 0 011 1v1h1a2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h1V4a1 1 0 01.883-.993L8 3a1 1 0 011 1v1h2V4a1 1 0 01.883-.993L12 3a1 1 0 011 1v1h2V4a1 1 0 01.883-.993zM7.983 7H7a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V8a1 1 0 00-1-1l-.983-.001L16 7h-.017l-3.966-.001L12 7h-.017l-3.966-.001L8 7h-.017zm3.724 1.793l2.829 2.828a.998.998 0 01.289.793.998.998 0 01-.29.793l-2.828 2.829a1 1 0 01-1.414-1.415l2.206-2.207-2.206-2.207a1 1 0 011.414-1.414z"/></svg>',
@@ -257,6 +264,14 @@ const pepIconSystemAvatar = {
     name: 'system_avatar',
     data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M5.873 20C5.317 18.835 5 17.562 5 16.333c0-2.407 1.215-4.078 3.066-4.997C7.706 10.393 7.5 9.37 7.5 8.4 7.5 5.362 9.515 4 12 4s4.5 1.362 4.5 4.4c0 .97-.205 1.993-.566 2.936 1.85.919 3.066 2.59 3.066 4.997 0 1.23-.317 2.502-.873 3.667h-1.244c-1.16 0-1.16-.629-.999-.966.392-.816.616-1.705.616-2.534 0-1.482-.716-2.44-1.821-2.974C13.93 14.42 13.004 15 12 15c-1.004 0-1.93-.58-2.679-1.474C8.216 14.06 7.5 15.018 7.5 16.5c0 .827.223 1.712.612 2.525.163.34.163.975-.966.975H5.873zM12 12.5c1.105 0 2-2.2 2-3.857S13.105 6.5 12 6.5s-2 .486-2 2.143c0 1.657.895 3.857 2 3.857z"/></svg>`
 };
+const pepIconSystemBellOn = {
+    name: 'system_bell_on',
+    data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path fill="#000" fill-rule="nonzero" d="M12 2a6.004 6.004 0 015.982 5.538l.013.224L18 8v3.667l2.8 3.733a1 1 0 01.167.346l.025.126L21 16l-.001 2a1 1 0 01-.884.992L20 19H15a3 3 0 01-5.995.176L9 19H4a1 1 0 01-.993-.883L3 18v-2a1 1 0 01.13-.492l.07-.108L6 11.667V7.979l.006-.239A6 6 0 0112 2zm0 2C9.856 4 8.095 5.691 8.004 7.804L8 8v4a1 1 0 01-.2.6L5 16.333V17h13.999l.001-.667-2.8-3.733a1 1 0 01-.192-.471L16 12V8.021l-.004-.195A4 4 0 0012 4z"/><circle cx="19" cy="5" r="5" fill="#E62600"/></g></svg>`
+};
+const pepIconSystemBell = {
+    name: 'system_bell',
+    data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M4 19a1 1 0 01-1-1v-2a1 1 0 01.2-.6L6 11.667V7.979l.006-.239a6 6 0 0111.99.022L18 8v3.667l2.8 3.733a1 1 0 01.192.472L21 16l-.001 2a1 1 0 01-1 .999H15a3 3 0 01-6 0zm8-15a4 4 0 013.996 3.826L16 8.02V12l.008.129a1 1 0 00.192.471l2.8 3.733-.001.667H5v-.667L7.8 12.6A1 1 0 008 12V8l.004-.196C8.094 5.691 9.856 4 12 4z"/></svg>`
+};
 const pepIconSystemBin = {
     name: 'system_bin',
     data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M9 7V6a1 1 0 011-1h4a1 1 0 011 1v.999l.913.001H17a1 1 0 010 2h-.167l-.757 9.083a1 1 0 01-.996.917H8.92a1 1 0 01-.996-.917L7.166 9H7a1 1 0 110-2h2zm5.76 2l-5.525.005L9.79 17h4.42l.55-8z"/></svg>`
@@ -265,6 +280,10 @@ const pepIconSystemBolt = {
     name: 'system_bolt',
     data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M10.612 19.84a.33.33 0 01-.279.16.332.332 0 01-.128-.026.362.362 0 01-.199-.402l1.25-6.568H7.333c-.103 0-.2-.05-.263-.137a.374.374 0 01-.06-.305l2-8.293A.336.336 0 019.333 4h6c.122 0 .235.07.294.185a.377.377 0 01-.012.362L12.943 9h3.723c.122 0 .235.064.294.18a.387.387 0 01-.015.37l-6.333 10.29z"/></svg>`
 };
+const pepIconSystemBoolean = {
+    name: 'system_boolean',
+    data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M6 17A5 5 0 016 7h12a5 5 0 01.217 9.995L18 17H6zm8.007-8H6a3 3 0 00-.176 5.995L6 15h8.007a4.968 4.968 0 010-6z"/></svg>`
+};
 const pepIconSystemChat = {
     name: 'system_chat',
     data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M11.5 4a7.5 7.5 0 016.755 10.764L20 20l-5.236-1.745A7.5 7.5 0 1111.5 4zm0 2a5.5 5.5 0 102.392 10.454l.732-.354 2.214.738-.738-2.214.354-.732A5.5 5.5 0 0011.5 6zm-2 4a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm4 0a1.5 1.5 0 110 3 1.5 1.5 0 010-3z"/></svg>`
@@ -277,6 +296,10 @@ const pepIconSystemClose = {
     name: 'system_close',
     data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18.39 5.61a2.085 2.085 0 010 2.95L14.948 12l3.44 3.44c.774.774.813 2.004.116 2.823l-.116.126a2.085 2.085 0 01-2.949 0L12 14.95l-3.44 3.44a2.085 2.085 0 11-2.95-2.949L9.052 12l-3.44-3.44a2.085 2.085 0 01-.116-2.823l.116-.126a2.085 2.085 0 012.949 0L12 9.05l3.44-3.44a2.085 2.085 0 012.95 0z"/></svg>`
 };
+const pepIconSystemCopy = {
+    name: 'system_copy',
+    data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M21 2a1 1 0 011 1v14a1 1 0 01-1 1h-3v3a1 1 0 01-1 1H3a1 1 0 01-1-1V7a1 1 0 011-1l3-.001V3a1 1 0 011-1h14zm-5.5 6h-11a.5.5 0 00-.5.5v11a.5.5 0 00.5.5h11a.5.5 0 00.5-.5v-11a.5.5 0 00-.5-.5zM10 10a1 1 0 011 1v1.999L13 13a1 1 0 010 2l-2-.001V17a1 1 0 01-2 0v-2.001L7 15a1 1 0 010-2l2-.001V11a1 1 0 011-1zm9.5-6h-11a.5.5 0 00-.5.5v1.499L17 6a1 1 0 011 1v9h1.5a.5.5 0 00.5-.5v-11a.5.5 0 00-.5-.5z"/></svg>`
+};
 const pepIconSystemDoc = {
     name: 'system_doc',
     data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M13.172 4a1 1 0 01.707.293l3.828 3.828a1 1 0 01.293.707V19a1 1 0 01-1 1H7a1 1 0 01-1-1V5a1 1 0 011-1h6.172zM11 6H9a1 1 0 00-1 1v10a1 1 0 001 1h6a1 1 0 001-1v-6a1 1 0 00-1-1h-2a1 1 0 01-1-1V7a1 1 0 00-1-1z"/></svg>`
@@ -401,6 +424,10 @@ const pepIconSystemQuestion = {
     name: 'system_question',
     data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3a9 9 0 110 18 9 9 0 010-18zm0 2a7 7 0 100 14 7 7 0 000-14zm-.004 9a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-.087-7c2.565 0 3.814 1.075 3.814 2.575 0 .93-.665 1.713-1.25 2.022-.774.409-1.213.678-1.268 1.27l-.006.133h-2.703c0-1.421.199-1.866 1.118-2.285.782-.358 1.38-.656 1.38-1.14 0-.432-.493-.726-1.11-.726-.62 0-1.156.305-1.225.75l-.007.097H8.21C8.235 7.795 9.511 7 11.91 7z" fill-rule="evenodd"/></svg>`
 };
+const pepIconSystemRadioBtn = {
+    name: 'system_radio_btn',
+    data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 3a9 9 0 110 18 9 9 0 010-18zm0 2a7 7 0 100 14 7 7 0 000-14zm0 3a4 4 0 110 8 4 4 0 010-8z"/></svg>`
+};
 const pepIconSystemRotateDevice = {
     name: 'system_rotate_device',
     data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18.707 4.293A1 1 0 0119 5v3.586a1 1 0 01-1 1h-3.586a1 1 0 01-.707-1.707l.763-.763A6 6 0 006 12.561V16.5A1.5 1.5 0 007.5 18h9a1.5 1.5 0 001.5-1.5V13a1 1 0 012 0v4a3 3 0 01-3 3H7a3 3 0 01-3-3v-5h.021a8 8 0 0111.934-6.37l1.338-1.337a1 1 0 011.414 0zM12 11a2 2 0 011.001 3.732L13 16a1 1 0 01-2 0v-1.268A2 2 0 0112 11z"/></svg>`
@@ -453,6 +480,14 @@ const pepIconTextAlignRight = {
     name: 'text_align_right',
     data: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 17a1 1 0 010 2H2a1 1 0 010-2zm12-4a1 1 0 010 2H2a1 1 0 010-2zm-4-4a1 1 0 010 2H2a1 1 0 010-2zm6-4a1 1 0 010 2H2a1 1 0 110-2z" fill-rule="evenodd"/></svg>`
 };
+const pepIconTextLongText = {
+    name: 'text_long_text',
+    data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M14 17H2a1 1 0 000 2h12a1 1 0 000-2zm7-4h-6a1 1 0 000 2h6a1 1 0 000-2zm-10 0H2a1 1 0 000 2h9a1 1 0 000-2zM5 9H2a1 1 0 100 2h3a1 1 0 000-2zm13 0H9a1 1 0 100 2h9a1 1 0 000-2zm-8-4H2a1 1 0 100 2h8a1 1 0 000-2zm12 0h-8a1 1 0 000 2h8a1 1 0 000-2z"/></svg>`
+};
+const pepIconTextShortText = {
+    name: 'text_short_text',
+    data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M4.5 13h-2a1.5 1.5 0 000 3h2a1.5 1.5 0 000-3zm13 0h-8a1.5 1.5 0 000 3h8a1.5 1.5 0 000-3zm-8-5h-7a1.5 1.5 0 000 3h7a1.5 1.5 0 000-3zm12 0h-7a1.5 1.5 0 000 3h7a1.5 1.5 0 000-3z"/></svg>`
+};
 const pepIconTimeCal = {
     name: 'time_cal',
     data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M16 3a1 1 0 011 1v1h1a2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h1V4a1 1 0 01.883-.993L8 3a1 1 0 011 1v1h2V4a1 1 0 01.883-.993L12 3a1 1 0 011 1v1h2V4a1 1 0 01.883-.993zm2 8H6v6a1 1 0 001 1h10a1 1 0 001-1v-6zM7.983 7H7a1 1 0 00-1 1v1h12V8a1 1 0 00-1-1l-.983-.001L16 7h-.017l-3.966-.001L12 7h-.017l-3.966-.001L8 7h-.017z"/></svg>`
@@ -657,5 +692,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
-export { PepIconComponent, PepIconModule, PepIconRegistry, PepIconService, allIcons, pepIconArrowBack, pepIconArrowBackLeft, pepIconArrowBackRight, pepIconArrowDown, pepIconArrowDownAlt, pepIconArrowEither, pepIconArrowLeft, pepIconArrowLeftAlt, pepIconArrowRight, pepIconArrowRightAlt, pepIconArrowTwoWaysHorL, pepIconArrowTwoWaysHorR, pepIconArrowTwoWaysVerB, pepIconArrowTwoWaysVerT, pepIconArrowUp, pepIconArrowUpAlt, pepIconBarndPepperi, pepIconDeviceDesktop, pepIconDeviceMobile, pepIconDeviceResponsive, pepIconDeviceTablet, pepIconIndicatorDotPlaceholder, pepIconMiscExcel, pepIconNoImage, pepIconNoImage2, pepIconNumberCoins, pepIconNumberDecimal, pepIconNumberDollar, pepIconNumberEuro, pepIconNumberMinus, pepIconNumberNumber, pepIconNumberPercent, pepIconNumberPlus, pepIconRipplesTransparent, pepIconShoppingCart, pepIconShoppingPaper, pepIconSystemAttach, pepIconSystemAvatar, pepIconSystemBin, pepIconSystemBolt, pepIconSystemChat, pepIconSystemCircle, pepIconSystemClose, pepIconSystemDoc, pepIconSystemDoor, pepIconSystemDotEllipsis, pepIconSystemEdit, pepIconSystemEducation, pepIconSystemEmail, pepIconSystemFileDownload, pepIconSystemFileUpload, pepIconSystemFileUploadCloud, pepIconSystemFilter, pepIconSystemFilter2, pepIconSystemFolder, pepIconSystemFullScreen, pepIconSystemHeart, pepIconSystemHome, pepIconSystemInfo, pepIconSystemInventory, pepIconSystemLink, pepIconSystemMap, pepIconSystemMenu, pepIconSystemMenuDots, pepIconSystemMove, pepIconSystemMust, pepIconSystemOffLine, pepIconSystemOk, pepIconSystemPause, pepIconSystemPhone, pepIconSystemPlay, pepIconSystemPrint, pepIconSystemProcessing, pepIconSystemQuestion, pepIconSystemRotateDevice, pepIconSystemSearch, pepIconSystemSelect, pepIconSystemSettings, pepIconSystemSignature, pepIconSystemSpinner, pepIconSystemSupport, pepIconSystemTexterea, pepIconSystemTool, pepIconSystemView, pepIconTextAlignCenter, pepIconTextAlignLeft, pepIconTextAlignRight, pepIconTimeCal, pepIconTimeDatetime, pepIconTimeDuration, pepIconTimeTime, pepIconViewCardLg, pepIconViewCardMd, pepIconViewCardSm, pepIconViewLine, pepIconViewMatrix, pepIconViewTable };
+export { PepIconComponent, PepIconModule, PepIconRegistry, PepIconService, allIcons, pepIconArrowBack, pepIconArrowBackLeft, pepIconArrowBackRight, pepIconArrowDown, pepIconArrowDownAlt, pepIconArrowEither, pepIconArrowLeft, pepIconArrowLeftAlt, pepIconArrowRight, pepIconArrowRightAlt, pepIconArrowTwoWaysHorL, pepIconArrowTwoWaysHorR, pepIconArrowTwoWaysVerB, pepIconArrowTwoWaysVerT, pepIconArrowUp, pepIconArrowUpAlt, pepIconBarndPepperi, pepIconDeviceDesktop, pepIconDeviceMobile, pepIconDeviceResponsive, pepIconDeviceTablet, pepIconIndicatorDotPlaceholder, pepIconMiscExcel, pepIconNoImage, pepIconNoImage2, pepIconNumberCoins, pepIconNumberDecimal, pepIconNumberDollar, pepIconNumberEuro, pepIconNumberMinus, pepIconNumberNumber, pepIconNumberPercent, pepIconNumberPlus, pepIconRipplesTransparent, pepIconShoppingCart, pepIconShoppingPaper, pepIconSystemAttach, pepIconSystemAvatar, pepIconSystemBell, pepIconSystemBellOn, pepIconSystemBin, pepIconSystemBolt, pepIconSystemBoolean, pepIconSystemChat, pepIconSystemCircle, pepIconSystemClose, pepIconSystemCopy, pepIconSystemDoc, pepIconSystemDoor, pepIconSystemDotEllipsis, pepIconSystemEdit, pepIconSystemEducation, pepIconSystemEmail, pepIconSystemFileDownload, pepIconSystemFileUpload, pepIconSystemFileUploadCloud, pepIconSystemFilter, pepIconSystemFilter2, pepIconSystemFolder, pepIconSystemFullScreen, pepIconSystemHeart, pepIconSystemHome, pepIconSystemInfo, pepIconSystemInventory, pepIconSystemLink, pepIconSystemMap, pepIconSystemMenu, pepIconSystemMenuDots, pepIconSystemMove, pepIconSystemMust, pepIconSystemOffLine, pepIconSystemOk, pepIconSystemPause, pepIconSystemPhone, pepIconSystemPlay, pepIconSystemPrint, pepIconSystemProcessing, pepIconSystemQuestion, pepIconSystemRadioBtn, pepIconSystemRotateDevice, pepIconSystemSearch, pepIconSystemSelect, pepIconSystemSettings, pepIconSystemSignature, pepIconSystemSpinner, pepIconSystemSupport, pepIconSystemTexterea, pepIconSystemTool, pepIconSystemView, pepIconTextAlignCenter, pepIconTextAlignLeft, pepIconTextAlignRight, pepIconTextLongText, pepIconTextShortText, pepIconTimeCal, pepIconTimeDatetime, pepIconTimeDuration, pepIconTimeTime, pepIconViewCardLg, pepIconViewCardMd, pepIconViewCardSm, pepIconViewLine, pepIconViewMatrix, pepIconViewTable };
 //# sourceMappingURL=pepperi-addons-ngx-lib-icon.mjs.map