@pepperi-addons/ngx-composite-lib 0.4.2-beta.49 → 0.4.2-beta.50
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.
- package/esm2020/show-if-badge/show-if-badge.component.mjs +22 -3
- package/fesm2015/pepperi-addons-ngx-composite-lib-show-if-badge.mjs +20 -2
- package/fesm2015/pepperi-addons-ngx-composite-lib-show-if-badge.mjs.map +1 -1
- package/fesm2020/pepperi-addons-ngx-composite-lib-show-if-badge.mjs +20 -2
- package/fesm2020/pepperi-addons-ngx-composite-lib-show-if-badge.mjs.map +1 -1
- package/package.json +1 -1
- package/show-if-badge/show-if-badge.component.d.ts +11 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Component, Input } from '@angular/core';
|
|
2
|
+
import { pepIconSystemView } from '@pepperi-addons/ngx-lib/icon';
|
|
2
3
|
import * as i0 from "@angular/core";
|
|
3
4
|
import * as i1 from "@pepperi-addons/ngx-lib";
|
|
4
5
|
import * as i2 from "@angular/common";
|
|
@@ -8,16 +9,34 @@ export class ShowIfBadgeComponent {
|
|
|
8
9
|
constructor(layoutService) {
|
|
9
10
|
this.layoutService = layoutService;
|
|
10
11
|
this.showIf = false;
|
|
12
|
+
/**
|
|
13
|
+
* If you want to show an icon in the button then select an icon form the provided icon list
|
|
14
|
+
*
|
|
15
|
+
* @type {PepIconType} See {@link PepIconType}
|
|
16
|
+
* @memberof PepButtonComponent
|
|
17
|
+
*/
|
|
18
|
+
this.iconName = pepIconSystemView.name;
|
|
19
|
+
this.backgroundColor = 'hsl(0,0%,0%)';
|
|
11
20
|
this.isRtl = false;
|
|
12
21
|
this.isRtl = this.layoutService.isRtl();
|
|
13
22
|
}
|
|
23
|
+
ngOnInit() {
|
|
24
|
+
setTimeout(() => {
|
|
25
|
+
const badge = document.getElementsByClassName("mat-badge-content")[0];
|
|
26
|
+
badge.setAttribute('style', 'background-color:' + this.backgroundColor + '!important');
|
|
27
|
+
}, 0);
|
|
28
|
+
}
|
|
14
29
|
}
|
|
15
30
|
ShowIfBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ShowIfBadgeComponent, deps: [{ token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
|
|
16
|
-
ShowIfBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ShowIfBadgeComponent, selector: "pep-show-if-badge", inputs: { showIf: "showIf" }, ngImport: i0, template: "<div *ngIf=\"showIf\" class=\"show-if-badge\" [ngClass]=\"{ 'rtl-direction': isRtl }\">\n <mat-icon class=\"mat-badge-content\">\n <pep-icon name=\"
|
|
31
|
+
ShowIfBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ShowIfBadgeComponent, selector: "pep-show-if-badge", inputs: { showIf: "showIf", iconName: "iconName", backgroundColor: "backgroundColor" }, ngImport: i0, template: "<div *ngIf=\"showIf\" class=\"show-if-badge\" [ngClass]=\"{ 'rtl-direction': isRtl }\">\n <mat-icon class=\"mat-badge-content\">\n <pep-icon [name]=\"iconName\"></pep-icon>\n </mat-icon>\n</div>", styles: [".show-if-badge{position:relative;right:0}.show-if-badge .mat-badge-content{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);color: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%));background-color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important;box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.show-if-badge .mat-badge-content .svg-icon{fill: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%))}.show-if-badge .mat-badge-content .svg-icon.stroke{fill:unset;stroke: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%))}.show-if-badge.rtl-direction{right:unset;left:0}.show-if-badge .mat-icon{right:0;height:2.5rem;width:2.5rem;margin-top:-1rem;margin-right:-1.25rem}.show-if-badge .mat-icon ::ng-deep .svg-icon{fill: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%));width:1.75rem;height:1.75rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
17
32
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ShowIfBadgeComponent, decorators: [{
|
|
18
33
|
type: Component,
|
|
19
|
-
args: [{ selector: 'pep-show-if-badge', template: "<div *ngIf=\"showIf\" class=\"show-if-badge\" [ngClass]=\"{ 'rtl-direction': isRtl }\">\n <mat-icon class=\"mat-badge-content\">\n <pep-icon name=\"
|
|
34
|
+
args: [{ selector: 'pep-show-if-badge', template: "<div *ngIf=\"showIf\" class=\"show-if-badge\" [ngClass]=\"{ 'rtl-direction': isRtl }\">\n <mat-icon class=\"mat-badge-content\">\n <pep-icon [name]=\"iconName\"></pep-icon>\n </mat-icon>\n</div>", styles: [".show-if-badge{position:relative;right:0}.show-if-badge .mat-badge-content{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);color: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%));background-color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important;box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.show-if-badge .mat-badge-content .svg-icon{fill: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%))}.show-if-badge .mat-badge-content .svg-icon.stroke{fill:unset;stroke: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%))}.show-if-badge.rtl-direction{right:unset;left:0}.show-if-badge .mat-icon{right:0;height:2.5rem;width:2.5rem;margin-top:-1rem;margin-right:-1.25rem}.show-if-badge .mat-icon ::ng-deep .svg-icon{fill: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%));width:1.75rem;height:1.75rem}\n"] }]
|
|
20
35
|
}], ctorParameters: function () { return [{ type: i1.PepLayoutService }]; }, propDecorators: { showIf: [{
|
|
21
36
|
type: Input
|
|
37
|
+
}], iconName: [{
|
|
38
|
+
type: Input
|
|
39
|
+
}], backgroundColor: [{
|
|
40
|
+
type: Input
|
|
22
41
|
}] } });
|
|
23
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
42
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hvdy1pZi1iYWRnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtY29tcG9zaXRlLWxpYi9zaG93LWlmLWJhZGdlL3Nob3ctaWYtYmFkZ2UuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWNvbXBvc2l0ZS1saWIvc2hvdy1pZi1iYWRnZS9zaG93LWlmLWJhZGdlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBR3pELE9BQU8sRUFBZSxpQkFBaUIsRUFBRSxNQUFNLDhCQUE4QixDQUFDOzs7Ozs7QUFVOUUsTUFBTSxPQUFPLG9CQUFvQjtJQWU3QixZQUFzQixhQUErQjtRQUEvQixrQkFBYSxHQUFiLGFBQWEsQ0FBa0I7UUFkNUMsV0FBTSxHQUFHLEtBQUssQ0FBQztRQUV2Qjs7Ozs7VUFLRTtRQUNLLGFBQVEsR0FBZ0IsaUJBQWlCLENBQUMsSUFBSSxDQUFDO1FBQy9DLG9CQUFlLEdBQUcsY0FBYyxDQUFDO1FBRy9CLFVBQUssR0FBRyxLQUFLLENBQUM7UUFHcEIsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQzVDLENBQUM7SUFFRCxRQUFRO1FBQ0osVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNaLE1BQU0sS0FBSyxHQUFHLFFBQVEsQ0FBQyxzQkFBc0IsQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDLENBQUMsQ0FBZ0IsQ0FBQztZQUNyRixLQUFLLENBQUMsWUFBWSxDQUFDLE9BQU8sRUFBRSxtQkFBbUIsR0FBRSxJQUFJLENBQUMsZUFBZSxHQUFHLFlBQVksQ0FBQyxDQUFDO1FBQ3hGLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztJQUNaLENBQUM7O2lIQXhCUSxvQkFBb0I7cUdBQXBCLG9CQUFvQixpSkNiakMsaU5BSU07MkZEU08sb0JBQW9CO2tCQU5oQyxTQUFTOytCQUNJLG1CQUFtQjt1R0FNcEIsTUFBTTtzQkFBZCxLQUFLO2dCQVFFLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBQZXBMYXlvdXRTZXJ2aWNlIH0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1saWInO1xuaW1wb3J0IHsgUGVwSWNvblR5cGUsIHBlcEljb25TeXN0ZW1WaWV3IH0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1saWIvaWNvbic7XG5pbXBvcnQgeyBQZXBDb2xvclNldHRpbmdzIH0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1jb21wb3NpdGUtbGliL2NvbG9yLXNldHRpbmdzJztcblxuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3BlcC1zaG93LWlmLWJhZGdlJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vc2hvdy1pZi1iYWRnZS5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vc2hvdy1pZi1iYWRnZS5jb21wb25lbnQuc2NzcyddXG59KVxuXG5leHBvcnQgY2xhc3MgU2hvd0lmQmFkZ2VDb21wb25lbnQge1xuICAgIEBJbnB1dCgpIHNob3dJZiA9IGZhbHNlO1xuICAgXG4gICAgIC8qKlxuICAgICAqIElmIHlvdSB3YW50IHRvIHNob3cgYW4gaWNvbiBpbiB0aGUgYnV0dG9uIHRoZW4gc2VsZWN0IGFuIGljb24gZm9ybSB0aGUgcHJvdmlkZWQgaWNvbiBsaXN0XG4gICAgICpcbiAgICAgKiBAdHlwZSB7UGVwSWNvblR5cGV9IFNlZSB7QGxpbmsgUGVwSWNvblR5cGV9XG4gICAgICogQG1lbWJlcm9mIFBlcEJ1dHRvbkNvbXBvbmVudFxuICAgICAqL1xuICAgQElucHV0KCkgaWNvbk5hbWU6IFBlcEljb25UeXBlID0gcGVwSWNvblN5c3RlbVZpZXcubmFtZTtcbiAgIEBJbnB1dCgpIGJhY2tncm91bmRDb2xvciA9ICdoc2woMCwwJSwwJSknO1xuICAgXG4gICAgXG4gICAgcHJvdGVjdGVkIGlzUnRsID0gZmFsc2U7XG4gICAgXG4gICAgY29uc3RydWN0b3IocHJvdGVjdGVkIGxheW91dFNlcnZpY2U6IFBlcExheW91dFNlcnZpY2UpIHsgXG4gICAgICAgIHRoaXMuaXNSdGwgPSB0aGlzLmxheW91dFNlcnZpY2UuaXNSdGwoKTtcbiAgICB9XG5cbiAgICBuZ09uSW5pdCgpe1xuICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgICAgIGNvbnN0IGJhZGdlID0gZG9jdW1lbnQuZ2V0RWxlbWVudHNCeUNsYXNzTmFtZShcIm1hdC1iYWRnZS1jb250ZW50XCIpWzBdIGFzIEhUTUxFbGVtZW50O1xuICAgICAgICAgICAgYmFkZ2Uuc2V0QXR0cmlidXRlKCdzdHlsZScsICdiYWNrZ3JvdW5kLWNvbG9yOicrIHRoaXMuYmFja2dyb3VuZENvbG9yICsgJyFpbXBvcnRhbnQnKTtcbiAgICAgICAgICB9LCAwKTtcbiAgICB9XG59XG4iLCI8ZGl2ICpuZ0lmPVwic2hvd0lmXCIgY2xhc3M9XCJzaG93LWlmLWJhZGdlXCIgW25nQ2xhc3NdPVwieyAncnRsLWRpcmVjdGlvbic6IGlzUnRsIH1cIj5cbiAgICA8bWF0LWljb24gY2xhc3M9XCJtYXQtYmFkZ2UtY29udGVudFwiPlxuICAgICAgICA8cGVwLWljb24gW25hbWVdPVwiaWNvbk5hbWVcIj48L3BlcC1pY29uPlxuICAgIDwvbWF0LWljb24+XG48L2Rpdj4iXX0=
|
|
@@ -16,17 +16,35 @@ class ShowIfBadgeComponent {
|
|
|
16
16
|
constructor(layoutService) {
|
|
17
17
|
this.layoutService = layoutService;
|
|
18
18
|
this.showIf = false;
|
|
19
|
+
/**
|
|
20
|
+
* If you want to show an icon in the button then select an icon form the provided icon list
|
|
21
|
+
*
|
|
22
|
+
* @type {PepIconType} See {@link PepIconType}
|
|
23
|
+
* @memberof PepButtonComponent
|
|
24
|
+
*/
|
|
25
|
+
this.iconName = pepIconSystemView.name;
|
|
26
|
+
this.backgroundColor = 'hsl(0,0%,0%)';
|
|
19
27
|
this.isRtl = false;
|
|
20
28
|
this.isRtl = this.layoutService.isRtl();
|
|
21
29
|
}
|
|
30
|
+
ngOnInit() {
|
|
31
|
+
setTimeout(() => {
|
|
32
|
+
const badge = document.getElementsByClassName("mat-badge-content")[0];
|
|
33
|
+
badge.setAttribute('style', 'background-color:' + this.backgroundColor + '!important');
|
|
34
|
+
}, 0);
|
|
35
|
+
}
|
|
22
36
|
}
|
|
23
37
|
ShowIfBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ShowIfBadgeComponent, deps: [{ token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
|
|
24
|
-
ShowIfBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ShowIfBadgeComponent, selector: "pep-show-if-badge", inputs: { showIf: "showIf" }, ngImport: i0, template: "<div *ngIf=\"showIf\" class=\"show-if-badge\" [ngClass]=\"{ 'rtl-direction': isRtl }\">\n <mat-icon class=\"mat-badge-content\">\n <pep-icon name=\"
|
|
38
|
+
ShowIfBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ShowIfBadgeComponent, selector: "pep-show-if-badge", inputs: { showIf: "showIf", iconName: "iconName", backgroundColor: "backgroundColor" }, ngImport: i0, template: "<div *ngIf=\"showIf\" class=\"show-if-badge\" [ngClass]=\"{ 'rtl-direction': isRtl }\">\n <mat-icon class=\"mat-badge-content\">\n <pep-icon [name]=\"iconName\"></pep-icon>\n </mat-icon>\n</div>", styles: [".show-if-badge{position:relative;right:0}.show-if-badge .mat-badge-content{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);color: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%));background-color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important;box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.show-if-badge .mat-badge-content .svg-icon{fill: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%))}.show-if-badge .mat-badge-content .svg-icon.stroke{fill:unset;stroke: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%))}.show-if-badge.rtl-direction{right:unset;left:0}.show-if-badge .mat-icon{right:0;height:2.5rem;width:2.5rem;margin-top:-1rem;margin-right:-1.25rem}.show-if-badge .mat-icon ::ng-deep .svg-icon{fill: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%));width:1.75rem;height:1.75rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
25
39
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ShowIfBadgeComponent, decorators: [{
|
|
26
40
|
type: Component,
|
|
27
|
-
args: [{ selector: 'pep-show-if-badge', template: "<div *ngIf=\"showIf\" class=\"show-if-badge\" [ngClass]=\"{ 'rtl-direction': isRtl }\">\n <mat-icon class=\"mat-badge-content\">\n <pep-icon name=\"
|
|
41
|
+
args: [{ selector: 'pep-show-if-badge', template: "<div *ngIf=\"showIf\" class=\"show-if-badge\" [ngClass]=\"{ 'rtl-direction': isRtl }\">\n <mat-icon class=\"mat-badge-content\">\n <pep-icon [name]=\"iconName\"></pep-icon>\n </mat-icon>\n</div>", styles: [".show-if-badge{position:relative;right:0}.show-if-badge .mat-badge-content{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);color: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%));background-color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important;box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.show-if-badge .mat-badge-content .svg-icon{fill: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%))}.show-if-badge .mat-badge-content .svg-icon.stroke{fill:unset;stroke: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%))}.show-if-badge.rtl-direction{right:unset;left:0}.show-if-badge .mat-icon{right:0;height:2.5rem;width:2.5rem;margin-top:-1rem;margin-right:-1.25rem}.show-if-badge .mat-icon ::ng-deep .svg-icon{fill: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%));width:1.75rem;height:1.75rem}\n"] }]
|
|
28
42
|
}], ctorParameters: function () { return [{ type: i1.PepLayoutService }]; }, propDecorators: { showIf: [{
|
|
29
43
|
type: Input
|
|
44
|
+
}], iconName: [{
|
|
45
|
+
type: Input
|
|
46
|
+
}], backgroundColor: [{
|
|
47
|
+
type: Input
|
|
30
48
|
}] } });
|
|
31
49
|
|
|
32
50
|
const pepIcons = [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pepperi-addons-ngx-composite-lib-show-if-badge.mjs","sources":["../../../projects/ngx-composite-lib/show-if-badge/show-if-badge.component.ts","../../../projects/ngx-composite-lib/show-if-badge/show-if-badge.component.html","../../../projects/ngx-composite-lib/show-if-badge/show-if-badge.module.ts","../../../projects/ngx-composite-lib/show-if-badge/public-api.ts","../../../projects/ngx-composite-lib/show-if-badge/pepperi-addons-ngx-composite-lib-show-if-badge.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\nimport { PepLayoutService } from '@pepperi-addons/ngx-lib';\n\n@Component({\n selector: 'pep-show-if-badge',\n templateUrl: './show-if-badge.component.html',\n styleUrls: ['./show-if-badge.component.scss']\n})\n\nexport class ShowIfBadgeComponent {\n @Input() showIf = false;\n \n protected isRtl = false;\n \n constructor(
|
|
1
|
+
{"version":3,"file":"pepperi-addons-ngx-composite-lib-show-if-badge.mjs","sources":["../../../projects/ngx-composite-lib/show-if-badge/show-if-badge.component.ts","../../../projects/ngx-composite-lib/show-if-badge/show-if-badge.component.html","../../../projects/ngx-composite-lib/show-if-badge/show-if-badge.module.ts","../../../projects/ngx-composite-lib/show-if-badge/public-api.ts","../../../projects/ngx-composite-lib/show-if-badge/pepperi-addons-ngx-composite-lib-show-if-badge.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\n\nimport { PepLayoutService } from '@pepperi-addons/ngx-lib';\nimport { PepIconType, pepIconSystemView } from '@pepperi-addons/ngx-lib/icon';\nimport { PepColorSettings } from '@pepperi-addons/ngx-composite-lib/color-settings';\n\n\n@Component({\n selector: 'pep-show-if-badge',\n templateUrl: './show-if-badge.component.html',\n styleUrls: ['./show-if-badge.component.scss']\n})\n\nexport class ShowIfBadgeComponent {\n @Input() showIf = false;\n \n /**\n * If you want to show an icon in the button then select an icon form the provided icon list\n *\n * @type {PepIconType} See {@link PepIconType}\n * @memberof PepButtonComponent\n */\n @Input() iconName: PepIconType = pepIconSystemView.name;\n @Input() backgroundColor = 'hsl(0,0%,0%)';\n \n \n protected isRtl = false;\n \n constructor(protected layoutService: PepLayoutService) { \n this.isRtl = this.layoutService.isRtl();\n }\n\n ngOnInit(){\n setTimeout(() => {\n const badge = document.getElementsByClassName(\"mat-badge-content\")[0] as HTMLElement;\n badge.setAttribute('style', 'background-color:'+ this.backgroundColor + '!important');\n }, 0);\n }\n}\n","<div *ngIf=\"showIf\" class=\"show-if-badge\" [ngClass]=\"{ 'rtl-direction': isRtl }\">\n <mat-icon class=\"mat-badge-content\">\n <pep-icon [name]=\"iconName\"></pep-icon>\n </mat-icon>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { PepNgxLibModule, PepAddonService } from '@pepperi-addons/ngx-lib';\nimport { PepIconModule, PepIconRegistry, pepIconSystemView} from '@pepperi-addons/ngx-lib/icon';\n\nimport { TranslateModule } from '@ngx-translate/core';\n\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatBadgeModule } from '@angular/material/badge';\n\nimport { ShowIfBadgeComponent } from './show-if-badge.component';\n\nconst pepIcons = [\n pepIconSystemView\n];\n\n@NgModule({\n declarations: [\n ShowIfBadgeComponent\n ],\n imports: [\n CommonModule,\n PepNgxLibModule,\n PepIconModule,\n MatIconModule,\n MatBadgeModule,\n TranslateModule.forChild(),\n ],\n exports: [ShowIfBadgeComponent]\n})\nexport class PepShowIfBadgeModule { \n\nconstructor(\n private pepIconRegistry: PepIconRegistry\n ) {\n this.pepIconRegistry.registerIcons(pepIcons);\n }\n}\n","/*\n * Public API Surface of ngx-composite-lib/flow-picker-button\n */\nexport * from './show-if-badge.module';\nexport * from './show-if-badge.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i3","i1"],"mappings":";;;;;;;;;;;;;;MAaa,oBAAoB,CAAA;AAe7B,IAAA,WAAA,CAAsB,aAA+B,EAAA;AAA/B,QAAA,IAAa,CAAA,aAAA,GAAb,aAAa,CAAkB;AAd5C,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;AAEvB;;;;;AAKE;AACK,QAAA,IAAA,CAAA,QAAQ,GAAgB,iBAAiB,CAAC,IAAI,CAAC;AAC/C,QAAA,IAAe,CAAA,eAAA,GAAG,cAAc,CAAC;AAG/B,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK,CAAC;QAGpB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;KAC3C;IAED,QAAQ,GAAA;QACJ,UAAU,CAAC,MAAK;YACZ,MAAM,KAAK,GAAG,QAAQ,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAgB,CAAC;AACrF,YAAA,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,mBAAmB,GAAE,IAAI,CAAC,eAAe,GAAG,YAAY,CAAC,CAAC;SACvF,EAAE,CAAC,CAAC,CAAC;KACX;;iHAxBQ,oBAAoB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,oBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,iJCbjC,iNAIM,EAAA,MAAA,EAAA,CAAA,soDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDSO,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBANhC,SAAS;+BACI,mBAAmB,EAAA,QAAA,EAAA,iNAAA,EAAA,MAAA,EAAA,CAAA,soDAAA,CAAA,EAAA,CAAA;uGAMpB,MAAM,EAAA,CAAA;sBAAd,KAAK;gBAQE,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,eAAe,EAAA,CAAA;sBAAvB,KAAK;;;AEVT,MAAM,QAAQ,GAAG;IACb,iBAAiB;CACpB,CAAC;MAgBW,oBAAoB,CAAA;AAEjC,IAAA,WAAA,CACY,eAAgC,EAAA;AAAhC,QAAA,IAAe,CAAA,eAAA,GAAf,eAAe,CAAiB;AAEpC,QAAA,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;KAChD;;iHANQ,oBAAoB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAC,IAAA,CAAA,eAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;kHAApB,oBAAoB,EAAA,YAAA,EAAA,CAZzB,oBAAoB,CAAA,EAAA,OAAA,EAAA,CAGpB,YAAY;QACZ,eAAe;QACf,aAAa;QACb,aAAa;AACb,QAAA,cAAc,mCAGR,oBAAoB,CAAA,EAAA,CAAA,CAAA;AAErB,oBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,YATzB,YAAY;QACZ,eAAe;QACf,aAAa;QACb,aAAa;QACb,cAAc;AACd,QAAA,eAAe,CAAC,QAAQ,EAAE,CAAA,EAAA,CAAA,CAAA;2FAIrB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAdhC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,YAAY,EAAE;wBACV,oBAAoB;AACvB,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACL,YAAY;wBACZ,eAAe;wBACf,aAAa;wBACb,aAAa;wBACb,cAAc;wBACd,eAAe,CAAC,QAAQ,EAAE;AAC7B,qBAAA;oBACD,OAAO,EAAE,CAAC,oBAAoB,CAAC;iBAClC,CAAA;;;AC9BD;;AAEG;;ACFH;;AAEG;;;;"}
|
|
@@ -16,17 +16,35 @@ class ShowIfBadgeComponent {
|
|
|
16
16
|
constructor(layoutService) {
|
|
17
17
|
this.layoutService = layoutService;
|
|
18
18
|
this.showIf = false;
|
|
19
|
+
/**
|
|
20
|
+
* If you want to show an icon in the button then select an icon form the provided icon list
|
|
21
|
+
*
|
|
22
|
+
* @type {PepIconType} See {@link PepIconType}
|
|
23
|
+
* @memberof PepButtonComponent
|
|
24
|
+
*/
|
|
25
|
+
this.iconName = pepIconSystemView.name;
|
|
26
|
+
this.backgroundColor = 'hsl(0,0%,0%)';
|
|
19
27
|
this.isRtl = false;
|
|
20
28
|
this.isRtl = this.layoutService.isRtl();
|
|
21
29
|
}
|
|
30
|
+
ngOnInit() {
|
|
31
|
+
setTimeout(() => {
|
|
32
|
+
const badge = document.getElementsByClassName("mat-badge-content")[0];
|
|
33
|
+
badge.setAttribute('style', 'background-color:' + this.backgroundColor + '!important');
|
|
34
|
+
}, 0);
|
|
35
|
+
}
|
|
22
36
|
}
|
|
23
37
|
ShowIfBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ShowIfBadgeComponent, deps: [{ token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
|
|
24
|
-
ShowIfBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ShowIfBadgeComponent, selector: "pep-show-if-badge", inputs: { showIf: "showIf" }, ngImport: i0, template: "<div *ngIf=\"showIf\" class=\"show-if-badge\" [ngClass]=\"{ 'rtl-direction': isRtl }\">\n <mat-icon class=\"mat-badge-content\">\n <pep-icon name=\"
|
|
38
|
+
ShowIfBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ShowIfBadgeComponent, selector: "pep-show-if-badge", inputs: { showIf: "showIf", iconName: "iconName", backgroundColor: "backgroundColor" }, ngImport: i0, template: "<div *ngIf=\"showIf\" class=\"show-if-badge\" [ngClass]=\"{ 'rtl-direction': isRtl }\">\n <mat-icon class=\"mat-badge-content\">\n <pep-icon [name]=\"iconName\"></pep-icon>\n </mat-icon>\n</div>", styles: [".show-if-badge{position:relative;right:0}.show-if-badge .mat-badge-content{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);color: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%));background-color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important;box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.show-if-badge .mat-badge-content .svg-icon{fill: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%))}.show-if-badge .mat-badge-content .svg-icon.stroke{fill:unset;stroke: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%))}.show-if-badge.rtl-direction{right:unset;left:0}.show-if-badge .mat-icon{right:0;height:2.5rem;width:2.5rem;margin-top:-1rem;margin-right:-1.25rem}.show-if-badge .mat-icon ::ng-deep .svg-icon{fill: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%));width:1.75rem;height:1.75rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
25
39
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ShowIfBadgeComponent, decorators: [{
|
|
26
40
|
type: Component,
|
|
27
|
-
args: [{ selector: 'pep-show-if-badge', template: "<div *ngIf=\"showIf\" class=\"show-if-badge\" [ngClass]=\"{ 'rtl-direction': isRtl }\">\n <mat-icon class=\"mat-badge-content\">\n <pep-icon name=\"
|
|
41
|
+
args: [{ selector: 'pep-show-if-badge', template: "<div *ngIf=\"showIf\" class=\"show-if-badge\" [ngClass]=\"{ 'rtl-direction': isRtl }\">\n <mat-icon class=\"mat-badge-content\">\n <pep-icon [name]=\"iconName\"></pep-icon>\n </mat-icon>\n</div>", styles: [".show-if-badge{position:relative;right:0}.show-if-badge .mat-badge-content{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);color: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%));background-color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important;box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.show-if-badge .mat-badge-content .svg-icon{fill: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%))}.show-if-badge .mat-badge-content .svg-icon.stroke{fill:unset;stroke: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%))}.show-if-badge.rtl-direction{right:unset;left:0}.show-if-badge .mat-icon{right:0;height:2.5rem;width:2.5rem;margin-top:-1rem;margin-right:-1.25rem}.show-if-badge .mat-icon ::ng-deep .svg-icon{fill: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%));width:1.75rem;height:1.75rem}\n"] }]
|
|
28
42
|
}], ctorParameters: function () { return [{ type: i1.PepLayoutService }]; }, propDecorators: { showIf: [{
|
|
29
43
|
type: Input
|
|
44
|
+
}], iconName: [{
|
|
45
|
+
type: Input
|
|
46
|
+
}], backgroundColor: [{
|
|
47
|
+
type: Input
|
|
30
48
|
}] } });
|
|
31
49
|
|
|
32
50
|
const pepIcons = [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pepperi-addons-ngx-composite-lib-show-if-badge.mjs","sources":["../../../projects/ngx-composite-lib/show-if-badge/show-if-badge.component.ts","../../../projects/ngx-composite-lib/show-if-badge/show-if-badge.component.html","../../../projects/ngx-composite-lib/show-if-badge/show-if-badge.module.ts","../../../projects/ngx-composite-lib/show-if-badge/public-api.ts","../../../projects/ngx-composite-lib/show-if-badge/pepperi-addons-ngx-composite-lib-show-if-badge.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\nimport { PepLayoutService } from '@pepperi-addons/ngx-lib';\n\n@Component({\n selector: 'pep-show-if-badge',\n templateUrl: './show-if-badge.component.html',\n styleUrls: ['./show-if-badge.component.scss']\n})\n\nexport class ShowIfBadgeComponent {\n @Input() showIf = false;\n \n protected isRtl = false;\n \n constructor(
|
|
1
|
+
{"version":3,"file":"pepperi-addons-ngx-composite-lib-show-if-badge.mjs","sources":["../../../projects/ngx-composite-lib/show-if-badge/show-if-badge.component.ts","../../../projects/ngx-composite-lib/show-if-badge/show-if-badge.component.html","../../../projects/ngx-composite-lib/show-if-badge/show-if-badge.module.ts","../../../projects/ngx-composite-lib/show-if-badge/public-api.ts","../../../projects/ngx-composite-lib/show-if-badge/pepperi-addons-ngx-composite-lib-show-if-badge.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\n\nimport { PepLayoutService } from '@pepperi-addons/ngx-lib';\nimport { PepIconType, pepIconSystemView } from '@pepperi-addons/ngx-lib/icon';\nimport { PepColorSettings } from '@pepperi-addons/ngx-composite-lib/color-settings';\n\n\n@Component({\n selector: 'pep-show-if-badge',\n templateUrl: './show-if-badge.component.html',\n styleUrls: ['./show-if-badge.component.scss']\n})\n\nexport class ShowIfBadgeComponent {\n @Input() showIf = false;\n \n /**\n * If you want to show an icon in the button then select an icon form the provided icon list\n *\n * @type {PepIconType} See {@link PepIconType}\n * @memberof PepButtonComponent\n */\n @Input() iconName: PepIconType = pepIconSystemView.name;\n @Input() backgroundColor = 'hsl(0,0%,0%)';\n \n \n protected isRtl = false;\n \n constructor(protected layoutService: PepLayoutService) { \n this.isRtl = this.layoutService.isRtl();\n }\n\n ngOnInit(){\n setTimeout(() => {\n const badge = document.getElementsByClassName(\"mat-badge-content\")[0] as HTMLElement;\n badge.setAttribute('style', 'background-color:'+ this.backgroundColor + '!important');\n }, 0);\n }\n}\n","<div *ngIf=\"showIf\" class=\"show-if-badge\" [ngClass]=\"{ 'rtl-direction': isRtl }\">\n <mat-icon class=\"mat-badge-content\">\n <pep-icon [name]=\"iconName\"></pep-icon>\n </mat-icon>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { PepNgxLibModule, PepAddonService } from '@pepperi-addons/ngx-lib';\nimport { PepIconModule, PepIconRegistry, pepIconSystemView} from '@pepperi-addons/ngx-lib/icon';\n\nimport { TranslateModule } from '@ngx-translate/core';\n\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatBadgeModule } from '@angular/material/badge';\n\nimport { ShowIfBadgeComponent } from './show-if-badge.component';\n\nconst pepIcons = [\n pepIconSystemView\n];\n\n@NgModule({\n declarations: [\n ShowIfBadgeComponent\n ],\n imports: [\n CommonModule,\n PepNgxLibModule,\n PepIconModule,\n MatIconModule,\n MatBadgeModule,\n TranslateModule.forChild(),\n ],\n exports: [ShowIfBadgeComponent]\n})\nexport class PepShowIfBadgeModule { \n\nconstructor(\n private pepIconRegistry: PepIconRegistry\n ) {\n this.pepIconRegistry.registerIcons(pepIcons);\n }\n}\n","/*\n * Public API Surface of ngx-composite-lib/flow-picker-button\n */\nexport * from './show-if-badge.module';\nexport * from './show-if-badge.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i3","i1"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,10 +1,20 @@
|
|
|
1
1
|
import { PepLayoutService } from '@pepperi-addons/ngx-lib';
|
|
2
|
+
import { PepIconType } from '@pepperi-addons/ngx-lib/icon';
|
|
2
3
|
import * as i0 from "@angular/core";
|
|
3
4
|
export declare class ShowIfBadgeComponent {
|
|
4
5
|
protected layoutService: PepLayoutService;
|
|
5
6
|
showIf: boolean;
|
|
7
|
+
/**
|
|
8
|
+
* If you want to show an icon in the button then select an icon form the provided icon list
|
|
9
|
+
*
|
|
10
|
+
* @type {PepIconType} See {@link PepIconType}
|
|
11
|
+
* @memberof PepButtonComponent
|
|
12
|
+
*/
|
|
13
|
+
iconName: PepIconType;
|
|
14
|
+
backgroundColor: string;
|
|
6
15
|
protected isRtl: boolean;
|
|
7
16
|
constructor(layoutService: PepLayoutService);
|
|
17
|
+
ngOnInit(): void;
|
|
8
18
|
static ɵfac: i0.ɵɵFactoryDeclaration<ShowIfBadgeComponent, never>;
|
|
9
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<ShowIfBadgeComponent, "pep-show-if-badge", never, { "showIf": "showIf"; }, {}, never, never, false>;
|
|
19
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ShowIfBadgeComponent, "pep-show-if-badge", never, { "showIf": "showIf"; "iconName": "iconName"; "backgroundColor": "backgroundColor"; }, {}, never, never, false>;
|
|
10
20
|
}
|