@testgorilla/tgo-ui 2.31.3-beta.3 → 2.31.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.
|
@@ -79,11 +79,11 @@ export class BadgeComponent {
|
|
|
79
79
|
return this.applicationTheme === 'classic';
|
|
80
80
|
}
|
|
81
81
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
82
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BadgeComponent, selector: "ui-badge", inputs: { label: "label", icon: "icon", color: "color", variant: "variant", notificationsAmount: "notificationsAmount", applicationTheme: "applicationTheme", rebrandColor: "rebrandColor", truncateLabel: "truncateLabel" }, ngImport: i0, template: "<div [class]=\"'badge badge-container-' + variant\"\n [attr.aria-label]=\"label\"\n [attr.theme]=\"applicationTheme\"\n [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n [matTooltip]=\"(label.length > 25) ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n>\n <ng-container [ngSwitch]=\"variant\">\n <ng-container *ngSwitchCase=\"badgeVariant.PRIMARY\">\n <ui-icon *ngIf=\"icon\" class=\"badge-icon\" [name]=\"icon\" [color]=\"iconColor\" ></ui-icon>\n </ng-container>\n <div *ngSwitchCase=\"badgeVariant.SECONDARY\" class=\"point\" [attr.color]=\"isClassicTheme ? color : rebrandColor\"></div>\n <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n </ng-container>\n <div class=\"label\" *ngIf=\"label && variant !== badgeVariant.NOTIFICATION\">{{ label.length > 25 && truncateLabel ? (label | slice : 0 : 25) + '...' : label }}</div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:block}:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{width:fit-content}:host .badge-container-primary,:host .badge-container-secondary{height:24px;padding:0 8px;border-radius:21px;color:#fff;line-height:10px}:host .badge-container-primary .label,:host .badge-container-secondary .label{font-size:12px;line-height:14px}:host .badge-container-primary .badge-icon,:host .badge-container-secondary .badge-icon{margin-right:8px}:host .badge-container-secondary .point{border-radius:50%;width:8px;height:8px;margin-right:8px}:host .badge-container-secondary .label{color:#000!important;width:100%}:host .badge-container-secondary[theme=dark],:host .badge-container-secondary[theme=light]{color:#242424}:host .badge-container-notification{width:20px;height:20px;border-radius:50%;color:#fff;line-height:10px}:host .badge-container-notification .label{font-size:12px}:host .badge-container-notification[theme=dark],:host .badge-container-notification[theme=light]{background:#242424!important;color:#fff!important;border-color:1px solid #ffffff}:host .badge{width:100%!important;max-width:fit-content!important}:host .badge .label{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;box-sizing:border-box!important}.flex-center,:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host .badge-container-secondary [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host .badge-container-secondary [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#e0e0e0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host .badge-container-secondary [color=teal].point,:host [color=teal].badge-container-notification{background:#46a997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host .badge-container-secondary [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host .badge-container-secondary [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host .badge-container-secondary [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#b5ddd5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host .badge-container-secondary [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#e9f0f1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host .badge-container-secondary [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#a9c2c9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host .badge-container-secondary [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888}.background-colors[color=success],:host [color=success].badge-container-primary,:host .badge-container-secondary [color=success].point,:host [color=success].badge-container-notification{background:#aae47a;color:#242424}.background-colors[color=warning],:host [color=warning].badge-container-primary,:host .badge-container-secondary [color=warning].point,:host [color=warning].badge-container-notification{background:#ffe1b3;color:#242424}.background-colors[color=negative],:host [color=negative].badge-container-primary,:host .badge-container-secondary [color=negative].point,:host [color=negative].badge-container-notification{background:#ffac9a;color:#242424}.background-colors[color=info],:host [color=info].badge-container-primary,:host .badge-container-secondary [color=info].point,:host [color=info].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=brand],:host [color=brand].badge-container-primary,:host .badge-container-secondary [color=brand].point,:host [color=brand].badge-container-notification{background:#ffe6fa;color:#242424}.background-colors[color=neutral],:host [color=neutral].badge-container-primary,:host .badge-container-secondary [color=neutral].point,:host [color=neutral].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=blue-20],:host [color=blue-20].badge-container-primary,:host .badge-container-secondary [color=blue-20].point,:host [color=blue-20].badge-container-notification{background:#99c1fe;color:#242424}.background-colors[color=blue-30],:host [color=blue-30].badge-container-primary,:host .badge-container-secondary [color=blue-30].point,:host [color=blue-30].badge-container-notification{background:#277cfd;color:#fff}.background-colors[color=blue-40],:host [color=blue-40].badge-container-primary,:host .badge-container-secondary [color=blue-40].point,:host [color=blue-40].badge-container-notification{background:#0165fc;color:#fff}.background-colors[color=pink-30],:host [color=pink-30].badge-container-primary,:host .badge-container-secondary [color=pink-30].point,:host [color=pink-30].badge-container-notification{background:#ffb3ee;color:#242424}.background-colors[color=blue-10],:host [color=blue-10].badge-container-primary,:host .badge-container-secondary [color=blue-10].point,:host [color=blue-10].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=grey-30],:host [color=grey-30].badge-container-primary,:host .badge-container-secondary [color=grey-30].point,:host [color=grey-30].badge-container-notification{background:#d3d3d3;color:#242424}.background-colors[color=grey-10],:host [color=grey-10].badge-container-primary,:host .badge-container-secondary [color=grey-10].point,:host [color=grey-10].badge-container-notification{background:#f4f4f4;color:#242424}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] }); }
|
|
82
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BadgeComponent, selector: "ui-badge", inputs: { label: "label", icon: "icon", color: "color", variant: "variant", notificationsAmount: "notificationsAmount", applicationTheme: "applicationTheme", rebrandColor: "rebrandColor", truncateLabel: "truncateLabel" }, ngImport: i0, template: "<div [class]=\"'badge badge-container-' + variant\"\n [attr.aria-label]=\"label\"\n [attr.theme]=\"applicationTheme\"\n [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n [matTooltip]=\"(label.length > 25) ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n>\n <ng-container [ngSwitch]=\"variant\">\n <ng-container *ngSwitchCase=\"badgeVariant.PRIMARY\">\n <ui-icon *ngIf=\"icon\" class=\"badge-icon\" [name]=\"icon\" [color]=\"iconColor\" ></ui-icon>\n </ng-container>\n <div *ngSwitchCase=\"badgeVariant.SECONDARY\" class=\"point\" [attr.color]=\"isClassicTheme ? color : rebrandColor\"></div>\n <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n </ng-container>\n <div class=\"label\" *ngIf=\"label && variant !== badgeVariant.NOTIFICATION\">{{ label.length > 25 && truncateLabel ? (label | slice : 0 : 25) + '...' : label }}</div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:block}:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{width:fit-content}:host .badge-container-primary,:host .badge-container-secondary{height:24px;padding:0 8px;border-radius:21px;color:#fff;line-height:10px}:host .badge-container-primary .label,:host .badge-container-secondary .label{font-size:12px;line-height:14px}:host .badge-container-primary .badge-icon,:host .badge-container-secondary .badge-icon{margin-right:8px}:host .badge-container-secondary .point{border-radius:50%;width:8px;height:8px;margin-right:8px}:host .badge-container-secondary .label{color:#000!important;width:100%}:host .badge-container-secondary[theme=dark],:host .badge-container-secondary[theme=light]{color:#242424}:host .badge-container-notification{min-width:20px;height:20px;border-radius:50%;color:#fff;line-height:10px}:host .badge-container-notification .label{font-size:12px}:host .badge-container-notification[theme=dark],:host .badge-container-notification[theme=light]{background:#242424!important;color:#fff!important;border-color:1px solid #ffffff}:host .badge{width:100%!important;max-width:fit-content!important}:host .badge .label{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;box-sizing:border-box!important}.flex-center,:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host .badge-container-secondary [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host .badge-container-secondary [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#e0e0e0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host .badge-container-secondary [color=teal].point,:host [color=teal].badge-container-notification{background:#46a997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host .badge-container-secondary [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host .badge-container-secondary [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host .badge-container-secondary [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#b5ddd5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host .badge-container-secondary [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#e9f0f1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host .badge-container-secondary [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#a9c2c9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host .badge-container-secondary [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888}.background-colors[color=success],:host [color=success].badge-container-primary,:host .badge-container-secondary [color=success].point,:host [color=success].badge-container-notification{background:#aae47a;color:#242424}.background-colors[color=warning],:host [color=warning].badge-container-primary,:host .badge-container-secondary [color=warning].point,:host [color=warning].badge-container-notification{background:#ffe1b3;color:#242424}.background-colors[color=negative],:host [color=negative].badge-container-primary,:host .badge-container-secondary [color=negative].point,:host [color=negative].badge-container-notification{background:#ffac9a;color:#242424}.background-colors[color=info],:host [color=info].badge-container-primary,:host .badge-container-secondary [color=info].point,:host [color=info].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=brand],:host [color=brand].badge-container-primary,:host .badge-container-secondary [color=brand].point,:host [color=brand].badge-container-notification{background:#ffe6fa;color:#242424}.background-colors[color=neutral],:host [color=neutral].badge-container-primary,:host .badge-container-secondary [color=neutral].point,:host [color=neutral].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=blue-20],:host [color=blue-20].badge-container-primary,:host .badge-container-secondary [color=blue-20].point,:host [color=blue-20].badge-container-notification{background:#99c1fe;color:#242424}.background-colors[color=blue-30],:host [color=blue-30].badge-container-primary,:host .badge-container-secondary [color=blue-30].point,:host [color=blue-30].badge-container-notification{background:#277cfd;color:#fff}.background-colors[color=blue-40],:host [color=blue-40].badge-container-primary,:host .badge-container-secondary [color=blue-40].point,:host [color=blue-40].badge-container-notification{background:#0165fc;color:#fff}.background-colors[color=pink-30],:host [color=pink-30].badge-container-primary,:host .badge-container-secondary [color=pink-30].point,:host [color=pink-30].badge-container-notification{background:#ffb3ee;color:#242424}.background-colors[color=blue-10],:host [color=blue-10].badge-container-primary,:host .badge-container-secondary [color=blue-10].point,:host [color=blue-10].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=grey-30],:host [color=grey-30].badge-container-primary,:host .badge-container-secondary [color=grey-30].point,:host [color=grey-30].badge-container-notification{background:#d3d3d3;color:#242424}.background-colors[color=grey-10],:host [color=grey-10].badge-container-primary,:host .badge-container-secondary [color=grey-10].point,:host [color=grey-10].badge-container-notification{background:#f4f4f4;color:#242424}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] }); }
|
|
83
83
|
}
|
|
84
84
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
85
85
|
type: Component,
|
|
86
|
-
args: [{ selector: 'ui-badge', template: "<div [class]=\"'badge badge-container-' + variant\"\n [attr.aria-label]=\"label\"\n [attr.theme]=\"applicationTheme\"\n [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n [matTooltip]=\"(label.length > 25) ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n>\n <ng-container [ngSwitch]=\"variant\">\n <ng-container *ngSwitchCase=\"badgeVariant.PRIMARY\">\n <ui-icon *ngIf=\"icon\" class=\"badge-icon\" [name]=\"icon\" [color]=\"iconColor\" ></ui-icon>\n </ng-container>\n <div *ngSwitchCase=\"badgeVariant.SECONDARY\" class=\"point\" [attr.color]=\"isClassicTheme ? color : rebrandColor\"></div>\n <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n </ng-container>\n <div class=\"label\" *ngIf=\"label && variant !== badgeVariant.NOTIFICATION\">{{ label.length > 25 && truncateLabel ? (label | slice : 0 : 25) + '...' : label }}</div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:block}:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{width:fit-content}:host .badge-container-primary,:host .badge-container-secondary{height:24px;padding:0 8px;border-radius:21px;color:#fff;line-height:10px}:host .badge-container-primary .label,:host .badge-container-secondary .label{font-size:12px;line-height:14px}:host .badge-container-primary .badge-icon,:host .badge-container-secondary .badge-icon{margin-right:8px}:host .badge-container-secondary .point{border-radius:50%;width:8px;height:8px;margin-right:8px}:host .badge-container-secondary .label{color:#000!important;width:100%}:host .badge-container-secondary[theme=dark],:host .badge-container-secondary[theme=light]{color:#242424}:host .badge-container-notification{width:20px;height:20px;border-radius:50%;color:#fff;line-height:10px}:host .badge-container-notification .label{font-size:12px}:host .badge-container-notification[theme=dark],:host .badge-container-notification[theme=light]{background:#242424!important;color:#fff!important;border-color:1px solid #ffffff}:host .badge{width:100%!important;max-width:fit-content!important}:host .badge .label{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;box-sizing:border-box!important}.flex-center,:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host .badge-container-secondary [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host .badge-container-secondary [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#e0e0e0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host .badge-container-secondary [color=teal].point,:host [color=teal].badge-container-notification{background:#46a997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host .badge-container-secondary [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host .badge-container-secondary [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host .badge-container-secondary [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#b5ddd5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host .badge-container-secondary [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#e9f0f1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host .badge-container-secondary [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#a9c2c9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host .badge-container-secondary [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888}.background-colors[color=success],:host [color=success].badge-container-primary,:host .badge-container-secondary [color=success].point,:host [color=success].badge-container-notification{background:#aae47a;color:#242424}.background-colors[color=warning],:host [color=warning].badge-container-primary,:host .badge-container-secondary [color=warning].point,:host [color=warning].badge-container-notification{background:#ffe1b3;color:#242424}.background-colors[color=negative],:host [color=negative].badge-container-primary,:host .badge-container-secondary [color=negative].point,:host [color=negative].badge-container-notification{background:#ffac9a;color:#242424}.background-colors[color=info],:host [color=info].badge-container-primary,:host .badge-container-secondary [color=info].point,:host [color=info].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=brand],:host [color=brand].badge-container-primary,:host .badge-container-secondary [color=brand].point,:host [color=brand].badge-container-notification{background:#ffe6fa;color:#242424}.background-colors[color=neutral],:host [color=neutral].badge-container-primary,:host .badge-container-secondary [color=neutral].point,:host [color=neutral].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=blue-20],:host [color=blue-20].badge-container-primary,:host .badge-container-secondary [color=blue-20].point,:host [color=blue-20].badge-container-notification{background:#99c1fe;color:#242424}.background-colors[color=blue-30],:host [color=blue-30].badge-container-primary,:host .badge-container-secondary [color=blue-30].point,:host [color=blue-30].badge-container-notification{background:#277cfd;color:#fff}.background-colors[color=blue-40],:host [color=blue-40].badge-container-primary,:host .badge-container-secondary [color=blue-40].point,:host [color=blue-40].badge-container-notification{background:#0165fc;color:#fff}.background-colors[color=pink-30],:host [color=pink-30].badge-container-primary,:host .badge-container-secondary [color=pink-30].point,:host [color=pink-30].badge-container-notification{background:#ffb3ee;color:#242424}.background-colors[color=blue-10],:host [color=blue-10].badge-container-primary,:host .badge-container-secondary [color=blue-10].point,:host [color=blue-10].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=grey-30],:host [color=grey-30].badge-container-primary,:host .badge-container-secondary [color=grey-30].point,:host [color=grey-30].badge-container-notification{background:#d3d3d3;color:#242424}.background-colors[color=grey-10],:host [color=grey-10].badge-container-primary,:host .badge-container-secondary [color=grey-10].point,:host [color=grey-10].badge-container-notification{background:#f4f4f4;color:#242424}\n"] }]
|
|
86
|
+
args: [{ selector: 'ui-badge', template: "<div [class]=\"'badge badge-container-' + variant\"\n [attr.aria-label]=\"label\"\n [attr.theme]=\"applicationTheme\"\n [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n [matTooltip]=\"(label.length > 25) ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n>\n <ng-container [ngSwitch]=\"variant\">\n <ng-container *ngSwitchCase=\"badgeVariant.PRIMARY\">\n <ui-icon *ngIf=\"icon\" class=\"badge-icon\" [name]=\"icon\" [color]=\"iconColor\" ></ui-icon>\n </ng-container>\n <div *ngSwitchCase=\"badgeVariant.SECONDARY\" class=\"point\" [attr.color]=\"isClassicTheme ? color : rebrandColor\"></div>\n <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n </ng-container>\n <div class=\"label\" *ngIf=\"label && variant !== badgeVariant.NOTIFICATION\">{{ label.length > 25 && truncateLabel ? (label | slice : 0 : 25) + '...' : label }}</div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:block}:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{width:fit-content}:host .badge-container-primary,:host .badge-container-secondary{height:24px;padding:0 8px;border-radius:21px;color:#fff;line-height:10px}:host .badge-container-primary .label,:host .badge-container-secondary .label{font-size:12px;line-height:14px}:host .badge-container-primary .badge-icon,:host .badge-container-secondary .badge-icon{margin-right:8px}:host .badge-container-secondary .point{border-radius:50%;width:8px;height:8px;margin-right:8px}:host .badge-container-secondary .label{color:#000!important;width:100%}:host .badge-container-secondary[theme=dark],:host .badge-container-secondary[theme=light]{color:#242424}:host .badge-container-notification{min-width:20px;height:20px;border-radius:50%;color:#fff;line-height:10px}:host .badge-container-notification .label{font-size:12px}:host .badge-container-notification[theme=dark],:host .badge-container-notification[theme=light]{background:#242424!important;color:#fff!important;border-color:1px solid #ffffff}:host .badge{width:100%!important;max-width:fit-content!important}:host .badge .label{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;box-sizing:border-box!important}.flex-center,:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host .badge-container-secondary [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host .badge-container-secondary [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#e0e0e0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host .badge-container-secondary [color=teal].point,:host [color=teal].badge-container-notification{background:#46a997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host .badge-container-secondary [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host .badge-container-secondary [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host .badge-container-secondary [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#b5ddd5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host .badge-container-secondary [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#e9f0f1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host .badge-container-secondary [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#a9c2c9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host .badge-container-secondary [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888}.background-colors[color=success],:host [color=success].badge-container-primary,:host .badge-container-secondary [color=success].point,:host [color=success].badge-container-notification{background:#aae47a;color:#242424}.background-colors[color=warning],:host [color=warning].badge-container-primary,:host .badge-container-secondary [color=warning].point,:host [color=warning].badge-container-notification{background:#ffe1b3;color:#242424}.background-colors[color=negative],:host [color=negative].badge-container-primary,:host .badge-container-secondary [color=negative].point,:host [color=negative].badge-container-notification{background:#ffac9a;color:#242424}.background-colors[color=info],:host [color=info].badge-container-primary,:host .badge-container-secondary [color=info].point,:host [color=info].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=brand],:host [color=brand].badge-container-primary,:host .badge-container-secondary [color=brand].point,:host [color=brand].badge-container-notification{background:#ffe6fa;color:#242424}.background-colors[color=neutral],:host [color=neutral].badge-container-primary,:host .badge-container-secondary [color=neutral].point,:host [color=neutral].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=blue-20],:host [color=blue-20].badge-container-primary,:host .badge-container-secondary [color=blue-20].point,:host [color=blue-20].badge-container-notification{background:#99c1fe;color:#242424}.background-colors[color=blue-30],:host [color=blue-30].badge-container-primary,:host .badge-container-secondary [color=blue-30].point,:host [color=blue-30].badge-container-notification{background:#277cfd;color:#fff}.background-colors[color=blue-40],:host [color=blue-40].badge-container-primary,:host .badge-container-secondary [color=blue-40].point,:host [color=blue-40].badge-container-notification{background:#0165fc;color:#fff}.background-colors[color=pink-30],:host [color=pink-30].badge-container-primary,:host .badge-container-secondary [color=pink-30].point,:host [color=pink-30].badge-container-notification{background:#ffb3ee;color:#242424}.background-colors[color=blue-10],:host [color=blue-10].badge-container-primary,:host .badge-container-secondary [color=blue-10].point,:host [color=blue-10].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=grey-30],:host [color=grey-30].badge-container-primary,:host .badge-container-secondary [color=grey-30].point,:host [color=grey-30].badge-container-notification{background:#d3d3d3;color:#242424}.background-colors[color=grey-10],:host [color=grey-10].badge-container-primary,:host .badge-container-secondary [color=grey-10].point,:host [color=grey-10].badge-container-notification{background:#f4f4f4;color:#242424}\n"] }]
|
|
87
87
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
88
88
|
type: Optional
|
|
89
89
|
}, {
|
|
@@ -1302,11 +1302,11 @@ class BadgeComponent {
|
|
|
1302
1302
|
return this.applicationTheme === 'classic';
|
|
1303
1303
|
}
|
|
1304
1304
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1305
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BadgeComponent, selector: "ui-badge", inputs: { label: "label", icon: "icon", color: "color", variant: "variant", notificationsAmount: "notificationsAmount", applicationTheme: "applicationTheme", rebrandColor: "rebrandColor", truncateLabel: "truncateLabel" }, ngImport: i0, template: "<div [class]=\"'badge badge-container-' + variant\"\n [attr.aria-label]=\"label\"\n [attr.theme]=\"applicationTheme\"\n [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n [matTooltip]=\"(label.length > 25) ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n>\n <ng-container [ngSwitch]=\"variant\">\n <ng-container *ngSwitchCase=\"badgeVariant.PRIMARY\">\n <ui-icon *ngIf=\"icon\" class=\"badge-icon\" [name]=\"icon\" [color]=\"iconColor\" ></ui-icon>\n </ng-container>\n <div *ngSwitchCase=\"badgeVariant.SECONDARY\" class=\"point\" [attr.color]=\"isClassicTheme ? color : rebrandColor\"></div>\n <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n </ng-container>\n <div class=\"label\" *ngIf=\"label && variant !== badgeVariant.NOTIFICATION\">{{ label.length > 25 && truncateLabel ? (label | slice : 0 : 25) + '...' : label }}</div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:block}:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{width:fit-content}:host .badge-container-primary,:host .badge-container-secondary{height:24px;padding:0 8px;border-radius:21px;color:#fff;line-height:10px}:host .badge-container-primary .label,:host .badge-container-secondary .label{font-size:12px;line-height:14px}:host .badge-container-primary .badge-icon,:host .badge-container-secondary .badge-icon{margin-right:8px}:host .badge-container-secondary .point{border-radius:50%;width:8px;height:8px;margin-right:8px}:host .badge-container-secondary .label{color:#000!important;width:100%}:host .badge-container-secondary[theme=dark],:host .badge-container-secondary[theme=light]{color:#242424}:host .badge-container-notification{width:20px;height:20px;border-radius:50%;color:#fff;line-height:10px}:host .badge-container-notification .label{font-size:12px}:host .badge-container-notification[theme=dark],:host .badge-container-notification[theme=light]{background:#242424!important;color:#fff!important;border-color:1px solid #ffffff}:host .badge{width:100%!important;max-width:fit-content!important}:host .badge .label{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;box-sizing:border-box!important}.flex-center,:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host .badge-container-secondary [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host .badge-container-secondary [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#e0e0e0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host .badge-container-secondary [color=teal].point,:host [color=teal].badge-container-notification{background:#46a997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host .badge-container-secondary [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host .badge-container-secondary [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host .badge-container-secondary [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#b5ddd5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host .badge-container-secondary [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#e9f0f1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host .badge-container-secondary [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#a9c2c9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host .badge-container-secondary [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888}.background-colors[color=success],:host [color=success].badge-container-primary,:host .badge-container-secondary [color=success].point,:host [color=success].badge-container-notification{background:#aae47a;color:#242424}.background-colors[color=warning],:host [color=warning].badge-container-primary,:host .badge-container-secondary [color=warning].point,:host [color=warning].badge-container-notification{background:#ffe1b3;color:#242424}.background-colors[color=negative],:host [color=negative].badge-container-primary,:host .badge-container-secondary [color=negative].point,:host [color=negative].badge-container-notification{background:#ffac9a;color:#242424}.background-colors[color=info],:host [color=info].badge-container-primary,:host .badge-container-secondary [color=info].point,:host [color=info].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=brand],:host [color=brand].badge-container-primary,:host .badge-container-secondary [color=brand].point,:host [color=brand].badge-container-notification{background:#ffe6fa;color:#242424}.background-colors[color=neutral],:host [color=neutral].badge-container-primary,:host .badge-container-secondary [color=neutral].point,:host [color=neutral].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=blue-20],:host [color=blue-20].badge-container-primary,:host .badge-container-secondary [color=blue-20].point,:host [color=blue-20].badge-container-notification{background:#99c1fe;color:#242424}.background-colors[color=blue-30],:host [color=blue-30].badge-container-primary,:host .badge-container-secondary [color=blue-30].point,:host [color=blue-30].badge-container-notification{background:#277cfd;color:#fff}.background-colors[color=blue-40],:host [color=blue-40].badge-container-primary,:host .badge-container-secondary [color=blue-40].point,:host [color=blue-40].badge-container-notification{background:#0165fc;color:#fff}.background-colors[color=pink-30],:host [color=pink-30].badge-container-primary,:host .badge-container-secondary [color=pink-30].point,:host [color=pink-30].badge-container-notification{background:#ffb3ee;color:#242424}.background-colors[color=blue-10],:host [color=blue-10].badge-container-primary,:host .badge-container-secondary [color=blue-10].point,:host [color=blue-10].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=grey-30],:host [color=grey-30].badge-container-primary,:host .badge-container-secondary [color=grey-30].point,:host [color=grey-30].badge-container-notification{background:#d3d3d3;color:#242424}.background-colors[color=grey-10],:host [color=grey-10].badge-container-primary,:host .badge-container-secondary [color=grey-10].point,:host [color=grey-10].badge-container-notification{background:#f4f4f4;color:#242424}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] }); }
|
|
1305
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BadgeComponent, selector: "ui-badge", inputs: { label: "label", icon: "icon", color: "color", variant: "variant", notificationsAmount: "notificationsAmount", applicationTheme: "applicationTheme", rebrandColor: "rebrandColor", truncateLabel: "truncateLabel" }, ngImport: i0, template: "<div [class]=\"'badge badge-container-' + variant\"\n [attr.aria-label]=\"label\"\n [attr.theme]=\"applicationTheme\"\n [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n [matTooltip]=\"(label.length > 25) ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n>\n <ng-container [ngSwitch]=\"variant\">\n <ng-container *ngSwitchCase=\"badgeVariant.PRIMARY\">\n <ui-icon *ngIf=\"icon\" class=\"badge-icon\" [name]=\"icon\" [color]=\"iconColor\" ></ui-icon>\n </ng-container>\n <div *ngSwitchCase=\"badgeVariant.SECONDARY\" class=\"point\" [attr.color]=\"isClassicTheme ? color : rebrandColor\"></div>\n <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n </ng-container>\n <div class=\"label\" *ngIf=\"label && variant !== badgeVariant.NOTIFICATION\">{{ label.length > 25 && truncateLabel ? (label | slice : 0 : 25) + '...' : label }}</div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:block}:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{width:fit-content}:host .badge-container-primary,:host .badge-container-secondary{height:24px;padding:0 8px;border-radius:21px;color:#fff;line-height:10px}:host .badge-container-primary .label,:host .badge-container-secondary .label{font-size:12px;line-height:14px}:host .badge-container-primary .badge-icon,:host .badge-container-secondary .badge-icon{margin-right:8px}:host .badge-container-secondary .point{border-radius:50%;width:8px;height:8px;margin-right:8px}:host .badge-container-secondary .label{color:#000!important;width:100%}:host .badge-container-secondary[theme=dark],:host .badge-container-secondary[theme=light]{color:#242424}:host .badge-container-notification{min-width:20px;height:20px;border-radius:50%;color:#fff;line-height:10px}:host .badge-container-notification .label{font-size:12px}:host .badge-container-notification[theme=dark],:host .badge-container-notification[theme=light]{background:#242424!important;color:#fff!important;border-color:1px solid #ffffff}:host .badge{width:100%!important;max-width:fit-content!important}:host .badge .label{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;box-sizing:border-box!important}.flex-center,:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host .badge-container-secondary [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host .badge-container-secondary [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#e0e0e0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host .badge-container-secondary [color=teal].point,:host [color=teal].badge-container-notification{background:#46a997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host .badge-container-secondary [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host .badge-container-secondary [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host .badge-container-secondary [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#b5ddd5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host .badge-container-secondary [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#e9f0f1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host .badge-container-secondary [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#a9c2c9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host .badge-container-secondary [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888}.background-colors[color=success],:host [color=success].badge-container-primary,:host .badge-container-secondary [color=success].point,:host [color=success].badge-container-notification{background:#aae47a;color:#242424}.background-colors[color=warning],:host [color=warning].badge-container-primary,:host .badge-container-secondary [color=warning].point,:host [color=warning].badge-container-notification{background:#ffe1b3;color:#242424}.background-colors[color=negative],:host [color=negative].badge-container-primary,:host .badge-container-secondary [color=negative].point,:host [color=negative].badge-container-notification{background:#ffac9a;color:#242424}.background-colors[color=info],:host [color=info].badge-container-primary,:host .badge-container-secondary [color=info].point,:host [color=info].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=brand],:host [color=brand].badge-container-primary,:host .badge-container-secondary [color=brand].point,:host [color=brand].badge-container-notification{background:#ffe6fa;color:#242424}.background-colors[color=neutral],:host [color=neutral].badge-container-primary,:host .badge-container-secondary [color=neutral].point,:host [color=neutral].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=blue-20],:host [color=blue-20].badge-container-primary,:host .badge-container-secondary [color=blue-20].point,:host [color=blue-20].badge-container-notification{background:#99c1fe;color:#242424}.background-colors[color=blue-30],:host [color=blue-30].badge-container-primary,:host .badge-container-secondary [color=blue-30].point,:host [color=blue-30].badge-container-notification{background:#277cfd;color:#fff}.background-colors[color=blue-40],:host [color=blue-40].badge-container-primary,:host .badge-container-secondary [color=blue-40].point,:host [color=blue-40].badge-container-notification{background:#0165fc;color:#fff}.background-colors[color=pink-30],:host [color=pink-30].badge-container-primary,:host .badge-container-secondary [color=pink-30].point,:host [color=pink-30].badge-container-notification{background:#ffb3ee;color:#242424}.background-colors[color=blue-10],:host [color=blue-10].badge-container-primary,:host .badge-container-secondary [color=blue-10].point,:host [color=blue-10].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=grey-30],:host [color=grey-30].badge-container-primary,:host .badge-container-secondary [color=grey-30].point,:host [color=grey-30].badge-container-notification{background:#d3d3d3;color:#242424}.background-colors[color=grey-10],:host [color=grey-10].badge-container-primary,:host .badge-container-secondary [color=grey-10].point,:host [color=grey-10].badge-container-notification{background:#f4f4f4;color:#242424}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] }); }
|
|
1306
1306
|
}
|
|
1307
1307
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
1308
1308
|
type: Component,
|
|
1309
|
-
args: [{ selector: 'ui-badge', template: "<div [class]=\"'badge badge-container-' + variant\"\n [attr.aria-label]=\"label\"\n [attr.theme]=\"applicationTheme\"\n [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n [matTooltip]=\"(label.length > 25) ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n>\n <ng-container [ngSwitch]=\"variant\">\n <ng-container *ngSwitchCase=\"badgeVariant.PRIMARY\">\n <ui-icon *ngIf=\"icon\" class=\"badge-icon\" [name]=\"icon\" [color]=\"iconColor\" ></ui-icon>\n </ng-container>\n <div *ngSwitchCase=\"badgeVariant.SECONDARY\" class=\"point\" [attr.color]=\"isClassicTheme ? color : rebrandColor\"></div>\n <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n </ng-container>\n <div class=\"label\" *ngIf=\"label && variant !== badgeVariant.NOTIFICATION\">{{ label.length > 25 && truncateLabel ? (label | slice : 0 : 25) + '...' : label }}</div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:block}:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{width:fit-content}:host .badge-container-primary,:host .badge-container-secondary{height:24px;padding:0 8px;border-radius:21px;color:#fff;line-height:10px}:host .badge-container-primary .label,:host .badge-container-secondary .label{font-size:12px;line-height:14px}:host .badge-container-primary .badge-icon,:host .badge-container-secondary .badge-icon{margin-right:8px}:host .badge-container-secondary .point{border-radius:50%;width:8px;height:8px;margin-right:8px}:host .badge-container-secondary .label{color:#000!important;width:100%}:host .badge-container-secondary[theme=dark],:host .badge-container-secondary[theme=light]{color:#242424}:host .badge-container-notification{width:20px;height:20px;border-radius:50%;color:#fff;line-height:10px}:host .badge-container-notification .label{font-size:12px}:host .badge-container-notification[theme=dark],:host .badge-container-notification[theme=light]{background:#242424!important;color:#fff!important;border-color:1px solid #ffffff}:host .badge{width:100%!important;max-width:fit-content!important}:host .badge .label{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;box-sizing:border-box!important}.flex-center,:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host .badge-container-secondary [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host .badge-container-secondary [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#e0e0e0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host .badge-container-secondary [color=teal].point,:host [color=teal].badge-container-notification{background:#46a997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host .badge-container-secondary [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host .badge-container-secondary [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host .badge-container-secondary [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#b5ddd5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host .badge-container-secondary [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#e9f0f1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host .badge-container-secondary [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#a9c2c9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host .badge-container-secondary [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888}.background-colors[color=success],:host [color=success].badge-container-primary,:host .badge-container-secondary [color=success].point,:host [color=success].badge-container-notification{background:#aae47a;color:#242424}.background-colors[color=warning],:host [color=warning].badge-container-primary,:host .badge-container-secondary [color=warning].point,:host [color=warning].badge-container-notification{background:#ffe1b3;color:#242424}.background-colors[color=negative],:host [color=negative].badge-container-primary,:host .badge-container-secondary [color=negative].point,:host [color=negative].badge-container-notification{background:#ffac9a;color:#242424}.background-colors[color=info],:host [color=info].badge-container-primary,:host .badge-container-secondary [color=info].point,:host [color=info].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=brand],:host [color=brand].badge-container-primary,:host .badge-container-secondary [color=brand].point,:host [color=brand].badge-container-notification{background:#ffe6fa;color:#242424}.background-colors[color=neutral],:host [color=neutral].badge-container-primary,:host .badge-container-secondary [color=neutral].point,:host [color=neutral].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=blue-20],:host [color=blue-20].badge-container-primary,:host .badge-container-secondary [color=blue-20].point,:host [color=blue-20].badge-container-notification{background:#99c1fe;color:#242424}.background-colors[color=blue-30],:host [color=blue-30].badge-container-primary,:host .badge-container-secondary [color=blue-30].point,:host [color=blue-30].badge-container-notification{background:#277cfd;color:#fff}.background-colors[color=blue-40],:host [color=blue-40].badge-container-primary,:host .badge-container-secondary [color=blue-40].point,:host [color=blue-40].badge-container-notification{background:#0165fc;color:#fff}.background-colors[color=pink-30],:host [color=pink-30].badge-container-primary,:host .badge-container-secondary [color=pink-30].point,:host [color=pink-30].badge-container-notification{background:#ffb3ee;color:#242424}.background-colors[color=blue-10],:host [color=blue-10].badge-container-primary,:host .badge-container-secondary [color=blue-10].point,:host [color=blue-10].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=grey-30],:host [color=grey-30].badge-container-primary,:host .badge-container-secondary [color=grey-30].point,:host [color=grey-30].badge-container-notification{background:#d3d3d3;color:#242424}.background-colors[color=grey-10],:host [color=grey-10].badge-container-primary,:host .badge-container-secondary [color=grey-10].point,:host [color=grey-10].badge-container-notification{background:#f4f4f4;color:#242424}\n"] }]
|
|
1309
|
+
args: [{ selector: 'ui-badge', template: "<div [class]=\"'badge badge-container-' + variant\"\n [attr.aria-label]=\"label\"\n [attr.theme]=\"applicationTheme\"\n [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n [matTooltip]=\"(label.length > 25) ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n>\n <ng-container [ngSwitch]=\"variant\">\n <ng-container *ngSwitchCase=\"badgeVariant.PRIMARY\">\n <ui-icon *ngIf=\"icon\" class=\"badge-icon\" [name]=\"icon\" [color]=\"iconColor\" ></ui-icon>\n </ng-container>\n <div *ngSwitchCase=\"badgeVariant.SECONDARY\" class=\"point\" [attr.color]=\"isClassicTheme ? color : rebrandColor\"></div>\n <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n </ng-container>\n <div class=\"label\" *ngIf=\"label && variant !== badgeVariant.NOTIFICATION\">{{ label.length > 25 && truncateLabel ? (label | slice : 0 : 25) + '...' : label }}</div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:block}:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{width:fit-content}:host .badge-container-primary,:host .badge-container-secondary{height:24px;padding:0 8px;border-radius:21px;color:#fff;line-height:10px}:host .badge-container-primary .label,:host .badge-container-secondary .label{font-size:12px;line-height:14px}:host .badge-container-primary .badge-icon,:host .badge-container-secondary .badge-icon{margin-right:8px}:host .badge-container-secondary .point{border-radius:50%;width:8px;height:8px;margin-right:8px}:host .badge-container-secondary .label{color:#000!important;width:100%}:host .badge-container-secondary[theme=dark],:host .badge-container-secondary[theme=light]{color:#242424}:host .badge-container-notification{min-width:20px;height:20px;border-radius:50%;color:#fff;line-height:10px}:host .badge-container-notification .label{font-size:12px}:host .badge-container-notification[theme=dark],:host .badge-container-notification[theme=light]{background:#242424!important;color:#fff!important;border-color:1px solid #ffffff}:host .badge{width:100%!important;max-width:fit-content!important}:host .badge .label{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;box-sizing:border-box!important}.flex-center,:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host .badge-container-secondary [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host .badge-container-secondary [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#e0e0e0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host .badge-container-secondary [color=teal].point,:host [color=teal].badge-container-notification{background:#46a997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host .badge-container-secondary [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host .badge-container-secondary [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host .badge-container-secondary [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#b5ddd5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host .badge-container-secondary [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#e9f0f1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host .badge-container-secondary [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#a9c2c9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host .badge-container-secondary [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888}.background-colors[color=success],:host [color=success].badge-container-primary,:host .badge-container-secondary [color=success].point,:host [color=success].badge-container-notification{background:#aae47a;color:#242424}.background-colors[color=warning],:host [color=warning].badge-container-primary,:host .badge-container-secondary [color=warning].point,:host [color=warning].badge-container-notification{background:#ffe1b3;color:#242424}.background-colors[color=negative],:host [color=negative].badge-container-primary,:host .badge-container-secondary [color=negative].point,:host [color=negative].badge-container-notification{background:#ffac9a;color:#242424}.background-colors[color=info],:host [color=info].badge-container-primary,:host .badge-container-secondary [color=info].point,:host [color=info].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=brand],:host [color=brand].badge-container-primary,:host .badge-container-secondary [color=brand].point,:host [color=brand].badge-container-notification{background:#ffe6fa;color:#242424}.background-colors[color=neutral],:host [color=neutral].badge-container-primary,:host .badge-container-secondary [color=neutral].point,:host [color=neutral].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=blue-20],:host [color=blue-20].badge-container-primary,:host .badge-container-secondary [color=blue-20].point,:host [color=blue-20].badge-container-notification{background:#99c1fe;color:#242424}.background-colors[color=blue-30],:host [color=blue-30].badge-container-primary,:host .badge-container-secondary [color=blue-30].point,:host [color=blue-30].badge-container-notification{background:#277cfd;color:#fff}.background-colors[color=blue-40],:host [color=blue-40].badge-container-primary,:host .badge-container-secondary [color=blue-40].point,:host [color=blue-40].badge-container-notification{background:#0165fc;color:#fff}.background-colors[color=pink-30],:host [color=pink-30].badge-container-primary,:host .badge-container-secondary [color=pink-30].point,:host [color=pink-30].badge-container-notification{background:#ffb3ee;color:#242424}.background-colors[color=blue-10],:host [color=blue-10].badge-container-primary,:host .badge-container-secondary [color=blue-10].point,:host [color=blue-10].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=grey-30],:host [color=grey-30].badge-container-primary,:host .badge-container-secondary [color=grey-30].point,:host [color=grey-30].badge-container-notification{background:#d3d3d3;color:#242424}.background-colors[color=grey-10],:host [color=grey-10].badge-container-primary,:host .badge-container-secondary [color=grey-10].point,:host [color=grey-10].badge-container-notification{background:#f4f4f4;color:#242424}\n"] }]
|
|
1310
1310
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1311
1311
|
type: Optional
|
|
1312
1312
|
}, {
|