@c80/ui 1.0.33 → 1.0.34
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, input } from '@angular/core';
|
|
1
|
+
import { Component, input, computed } from '@angular/core';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export class CardLevelComponent {
|
|
@@ -7,7 +7,7 @@ export class CardLevelComponent {
|
|
|
7
7
|
_generatedId;
|
|
8
8
|
get generatedId() {
|
|
9
9
|
if (!this._generatedId) {
|
|
10
|
-
const label = this.cardLevelData().label.toLowerCase().
|
|
10
|
+
const label = this.cardLevelData().label.toLowerCase().replaceAll(/\s+/g, '-');
|
|
11
11
|
const randomNum = Math.floor(Math.random() * 10000);
|
|
12
12
|
this._generatedId = `${label}-${randomNum}`;
|
|
13
13
|
}
|
|
@@ -18,11 +18,40 @@ export class CardLevelComponent {
|
|
|
18
18
|
const calculatedWidth = baseWidth * this.size();
|
|
19
19
|
return `${calculatedWidth}px`;
|
|
20
20
|
}
|
|
21
|
+
// Detecta si el rango es bidireccional (min negativo, max positivo)
|
|
22
|
+
isBidirectional = computed(() => {
|
|
23
|
+
const data = this.cardLevelData();
|
|
24
|
+
return data.min < 0 && data.max > 0;
|
|
25
|
+
});
|
|
26
|
+
// Calcula el porcentaje de fill para barras bidireccionales
|
|
27
|
+
bidirectionalFillPercent = computed(() => {
|
|
28
|
+
const data = this.cardLevelData();
|
|
29
|
+
const totalRange = data.max - data.min;
|
|
30
|
+
return Math.abs(data.value / totalRange) * 100;
|
|
31
|
+
});
|
|
32
|
+
// Determina la dirección del fill (left/right)
|
|
33
|
+
fillDirection = computed(() => {
|
|
34
|
+
return this.cardLevelData().value >= 0 ? 'right' : 'left';
|
|
35
|
+
});
|
|
36
|
+
// Color según el valor y umbrales
|
|
37
|
+
fillColor = computed(() => {
|
|
38
|
+
const data = this.cardLevelData();
|
|
39
|
+
const absValue = Math.abs(data.value);
|
|
40
|
+
const absHigh = Math.abs(data.high);
|
|
41
|
+
const absLow = Math.abs(data.low);
|
|
42
|
+
if (absValue >= absHigh) {
|
|
43
|
+
return 'var(--color-danger)';
|
|
44
|
+
}
|
|
45
|
+
if (absValue >= absLow) {
|
|
46
|
+
return 'var(--color-warning)';
|
|
47
|
+
}
|
|
48
|
+
return 'var(--color-success)';
|
|
49
|
+
});
|
|
21
50
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CardLevelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
22
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
51
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CardLevelComponent, isStandalone: true, selector: "c80-card-level", inputs: { cardLevelData: { classPropertyName: "cardLevelData", publicName: "cardLevelData", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"card-level-container\" [style.width]=\"cardWidth\">\r\n <label [for]=\"generatedId\">\r\n <strong>{{ cardLevelData().label }}</strong>\r\n\r\n <span class=\"value-display\">\r\n @if (isBidirectional()) {\r\n <!-- Barra bidireccional desde el centro -->\r\n <div class=\"bidirectional-meter\">\r\n <div class=\"meter-track\">\r\n <div class=\"center-line\"></div>\r\n <div class=\"meter-fill\" [class.fill-left]=\"fillDirection() === 'left'\" [class.fill-right]=\"fillDirection() === 'right'\" [style.width.%]=\"bidirectionalFillPercent()\" [style.background]=\"fillColor()\">\r\n </div>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Meter est\u00E1ndar para rangos unidireccionales -->\r\n <meter [id]=\"generatedId\" [optimum]=\"cardLevelData().optimum\" [min]=\"cardLevelData().min\" [max]=\"cardLevelData().max\" [low]=\"cardLevelData().low\" [high]=\"cardLevelData().high\" [value]=\"cardLevelData().value\">\r\n </meter>\r\n }\r\n\r\n {{ cardLevelData().value }}{{ cardLevelData().unit }}\r\n </span>\r\n </label>\r\n</div>", styles: [".card-level-container{background:#fff;border-radius:5px;padding:8px;margin:4px;box-shadow:0 4px 6px #0000001a,0 1px 3px #00000014;min-width:100px;flex:1}.card-level-container label{display:flex;flex-direction:column;margin:0}.card-level-container label strong{font-size:12px;font-weight:600;color:#2d3748;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.card-level-container label .value-display{font-size:12px;font-weight:600;color:#1a202c;text-align:center;padding:0 5px;background:#4299e11a;border-radius:5px}.card-level-container label .bidirectional-meter{width:100%;margin-bottom:4px}.card-level-container label .bidirectional-meter .meter-track{position:relative;width:100%;height:10px;background:#e2e8f0;border-radius:12px;box-shadow:inset 0 2px 4px #0000001a;overflow:hidden}.card-level-container label .bidirectional-meter .meter-track .center-line{position:absolute;left:50%;top:0;bottom:0;width:4px;background:#4a5568;transform:translate(-50%);z-index:1}.card-level-container label .bidirectional-meter .meter-track .meter-fill{position:absolute;top:0;bottom:0;border-radius:5px}.card-level-container label .bidirectional-meter .meter-track .meter-fill.fill-right{left:50%}.card-level-container label .bidirectional-meter .meter-track .meter-fill.fill-left{right:50%}.card-level-container label meter{width:100%;border-radius:12px;border:none;background:#e2e8f0;margin-bottom:4px}.card-level-container label meter::-webkit-meter-bar{background:#e2e8f0;border-radius:12px;box-shadow:inset 0 2px 4px #0000001a}.card-level-container label meter::-webkit-meter-optimum-value{background:linear-gradient(90deg,#48bb78,#38a169);border-radius:12px}.card-level-container label meter::-webkit-meter-suboptimum-value{background:linear-gradient(90deg,#ed8936,#dd6b20);border-radius:12px}.card-level-container label meter::-webkit-meter-even-less-good-value{background:linear-gradient(90deg,#f56565,#e53e3e);border-radius:12px}.card-level-container label meter::-moz-meter-bar{background:linear-gradient(90deg,#48bb78,#38a169);border-radius:12px}:host{--color-success: linear-gradient(90deg, #48bb78, #38a169);--color-warning: linear-gradient(90deg, #ed8936, #dd6b20);--color-danger: linear-gradient(90deg, #f56565, #e53e3e)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
23
52
|
}
|
|
24
53
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CardLevelComponent, decorators: [{
|
|
25
54
|
type: Component,
|
|
26
|
-
args: [{ selector: 'c80-card-level', standalone: true, imports: [CommonModule], template: "<div class=\"card-level-container\" [style.width]=\"cardWidth\">\r\n
|
|
55
|
+
args: [{ selector: 'c80-card-level', standalone: true, imports: [CommonModule], template: "<div class=\"card-level-container\" [style.width]=\"cardWidth\">\r\n <label [for]=\"generatedId\">\r\n <strong>{{ cardLevelData().label }}</strong>\r\n\r\n <span class=\"value-display\">\r\n @if (isBidirectional()) {\r\n <!-- Barra bidireccional desde el centro -->\r\n <div class=\"bidirectional-meter\">\r\n <div class=\"meter-track\">\r\n <div class=\"center-line\"></div>\r\n <div class=\"meter-fill\" [class.fill-left]=\"fillDirection() === 'left'\" [class.fill-right]=\"fillDirection() === 'right'\" [style.width.%]=\"bidirectionalFillPercent()\" [style.background]=\"fillColor()\">\r\n </div>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Meter est\u00E1ndar para rangos unidireccionales -->\r\n <meter [id]=\"generatedId\" [optimum]=\"cardLevelData().optimum\" [min]=\"cardLevelData().min\" [max]=\"cardLevelData().max\" [low]=\"cardLevelData().low\" [high]=\"cardLevelData().high\" [value]=\"cardLevelData().value\">\r\n </meter>\r\n }\r\n\r\n {{ cardLevelData().value }}{{ cardLevelData().unit }}\r\n </span>\r\n </label>\r\n</div>", styles: [".card-level-container{background:#fff;border-radius:5px;padding:8px;margin:4px;box-shadow:0 4px 6px #0000001a,0 1px 3px #00000014;min-width:100px;flex:1}.card-level-container label{display:flex;flex-direction:column;margin:0}.card-level-container label strong{font-size:12px;font-weight:600;color:#2d3748;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.card-level-container label .value-display{font-size:12px;font-weight:600;color:#1a202c;text-align:center;padding:0 5px;background:#4299e11a;border-radius:5px}.card-level-container label .bidirectional-meter{width:100%;margin-bottom:4px}.card-level-container label .bidirectional-meter .meter-track{position:relative;width:100%;height:10px;background:#e2e8f0;border-radius:12px;box-shadow:inset 0 2px 4px #0000001a;overflow:hidden}.card-level-container label .bidirectional-meter .meter-track .center-line{position:absolute;left:50%;top:0;bottom:0;width:4px;background:#4a5568;transform:translate(-50%);z-index:1}.card-level-container label .bidirectional-meter .meter-track .meter-fill{position:absolute;top:0;bottom:0;border-radius:5px}.card-level-container label .bidirectional-meter .meter-track .meter-fill.fill-right{left:50%}.card-level-container label .bidirectional-meter .meter-track .meter-fill.fill-left{right:50%}.card-level-container label meter{width:100%;border-radius:12px;border:none;background:#e2e8f0;margin-bottom:4px}.card-level-container label meter::-webkit-meter-bar{background:#e2e8f0;border-radius:12px;box-shadow:inset 0 2px 4px #0000001a}.card-level-container label meter::-webkit-meter-optimum-value{background:linear-gradient(90deg,#48bb78,#38a169);border-radius:12px}.card-level-container label meter::-webkit-meter-suboptimum-value{background:linear-gradient(90deg,#ed8936,#dd6b20);border-radius:12px}.card-level-container label meter::-webkit-meter-even-less-good-value{background:linear-gradient(90deg,#f56565,#e53e3e);border-radius:12px}.card-level-container label meter::-moz-meter-bar{background:linear-gradient(90deg,#48bb78,#38a169);border-radius:12px}:host{--color-success: linear-gradient(90deg, #48bb78, #38a169);--color-warning: linear-gradient(90deg, #ed8936, #dd6b20);--color-danger: linear-gradient(90deg, #f56565, #e53e3e)}\n"] }]
|
|
27
56
|
}] });
|
|
28
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
57
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC1sZXZlbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL3VpL3NyYy9saWIvY2FyZC1sZXZlbC9jYXJkLWxldmVsLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2xpYnMvdWkvc3JjL2xpYi9jYXJkLWxldmVsL2NhcmQtbGV2ZWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzNELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7QUFXL0MsTUFBTSxPQUFPLGtCQUFrQjtJQUM3QixhQUFhLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBaUIsQ0FBQztJQUNoRCxJQUFJLEdBQUcsS0FBSyxDQUFTLENBQUMsQ0FBQyxDQUFDLENBQUMsd0NBQXdDO0lBRXpELFlBQVksQ0FBVTtJQUU5QixJQUFJLFdBQVc7UUFDYixJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1lBQ3ZCLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQyxLQUFLLENBQUMsV0FBVyxFQUFFLENBQUMsVUFBVSxDQUFDLE1BQU0sRUFBRSxHQUFHLENBQUMsQ0FBQztZQUMvRSxNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsR0FBRyxLQUFLLENBQUMsQ0FBQztZQUNwRCxJQUFJLENBQUMsWUFBWSxHQUFHLEdBQUcsS0FBSyxJQUFJLFNBQVMsRUFBRSxDQUFDO1FBQzlDLENBQUM7UUFDRCxPQUFPLElBQUksQ0FBQyxZQUFZLENBQUM7SUFDM0IsQ0FBQztJQUVELElBQUksU0FBUztRQUNYLE1BQU0sU0FBUyxHQUFHLEdBQUcsQ0FBQztRQUN0QixNQUFNLGVBQWUsR0FBRyxTQUFTLEdBQUcsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ2hELE9BQU8sR0FBRyxlQUFlLElBQUksQ0FBQztJQUNoQyxDQUFDO0lBRUQsb0VBQW9FO0lBQ3BFLGVBQWUsR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFO1FBQzlCLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztRQUNsQyxPQUFPLElBQUksQ0FBQyxHQUFHLEdBQUcsQ0FBQyxJQUFJLElBQUksQ0FBQyxHQUFHLEdBQUcsQ0FBQyxDQUFDO0lBQ3RDLENBQUMsQ0FBQyxDQUFDO0lBRUgsNERBQTREO0lBQzVELHdCQUF3QixHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUU7UUFDdkMsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQ2xDLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQztRQUN2QyxPQUFPLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssR0FBRyxVQUFVLENBQUMsR0FBRyxHQUFHLENBQUM7SUFDakQsQ0FBQyxDQUFDLENBQUM7SUFFSCwrQ0FBK0M7SUFDL0MsYUFBYSxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUU7UUFDNUIsT0FBTyxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUMsS0FBSyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUM7SUFDNUQsQ0FBQyxDQUFDLENBQUM7SUFFSCxrQ0FBa0M7SUFDbEMsU0FBUyxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUU7UUFDeEIsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQ2xDLE1BQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3RDLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3BDLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBRWxDLElBQUksUUFBUSxJQUFJLE9BQU8sRUFBRSxDQUFDO1lBQ3hCLE9BQU8scUJBQXFCLENBQUM7UUFDL0IsQ0FBQztRQUNELElBQUksUUFBUSxJQUFJLE1BQU0sRUFBRSxDQUFDO1lBQ3ZCLE9BQU8sc0JBQXNCLENBQUM7UUFDaEMsQ0FBQztRQUNELE9BQU8sc0JBQXNCLENBQUM7SUFDaEMsQ0FBQyxDQUFDLENBQUM7d0dBckRRLGtCQUFrQjs0RkFBbEIsa0JBQWtCLDBWQ1ovQix3bkNBdUJNLDB2RURmTSxZQUFZOzs0RkFJWCxrQkFBa0I7a0JBUjlCLFNBQVM7K0JBRUUsZ0JBQWdCLGNBQ2QsSUFBSSxXQUNQLENBQUMsWUFBWSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBpbnB1dCwgY29tcHV0ZWQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgQ2FyZExldmVsRGF0YSB9IGZyb20gJy4vY2FyZC1sZXZlbC5pbnRlcmZhY2UnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9jb21wb25lbnQtc2VsZWN0b3JcclxuICBzZWxlY3RvcjogJ2M4MC1jYXJkLWxldmVsJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9jYXJkLWxldmVsLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vY2FyZC1sZXZlbC5jb21wb25lbnQuc2NzcydcclxufSlcclxuZXhwb3J0IGNsYXNzIENhcmRMZXZlbENvbXBvbmVudCB7XHJcbiAgY2FyZExldmVsRGF0YSA9IGlucHV0LnJlcXVpcmVkPENhcmRMZXZlbERhdGE+KCk7XHJcbiAgc2l6ZSA9IGlucHV0PG51bWJlcj4oMSk7IC8vIE11bHRpcGxpY2Fkb3IgZGVsIHRhbWHDsW8gYmFzZSAoMjIwcHgpXHJcblxyXG4gIHByaXZhdGUgX2dlbmVyYXRlZElkPzogc3RyaW5nO1xyXG5cclxuICBnZXQgZ2VuZXJhdGVkSWQoKTogc3RyaW5nIHtcclxuICAgIGlmICghdGhpcy5fZ2VuZXJhdGVkSWQpIHtcclxuICAgICAgY29uc3QgbGFiZWwgPSB0aGlzLmNhcmRMZXZlbERhdGEoKS5sYWJlbC50b0xvd2VyQ2FzZSgpLnJlcGxhY2VBbGwoL1xccysvZywgJy0nKTtcclxuICAgICAgY29uc3QgcmFuZG9tTnVtID0gTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogMTAwMDApO1xyXG4gICAgICB0aGlzLl9nZW5lcmF0ZWRJZCA9IGAke2xhYmVsfS0ke3JhbmRvbU51bX1gO1xyXG4gICAgfVxyXG4gICAgcmV0dXJuIHRoaXMuX2dlbmVyYXRlZElkO1xyXG4gIH1cclxuXHJcbiAgZ2V0IGNhcmRXaWR0aCgpOiBzdHJpbmcge1xyXG4gICAgY29uc3QgYmFzZVdpZHRoID0gMTQwO1xyXG4gICAgY29uc3QgY2FsY3VsYXRlZFdpZHRoID0gYmFzZVdpZHRoICogdGhpcy5zaXplKCk7XHJcbiAgICByZXR1cm4gYCR7Y2FsY3VsYXRlZFdpZHRofXB4YDtcclxuICB9XHJcblxyXG4gIC8vIERldGVjdGEgc2kgZWwgcmFuZ28gZXMgYmlkaXJlY2Npb25hbCAobWluIG5lZ2F0aXZvLCBtYXggcG9zaXRpdm8pXHJcbiAgaXNCaWRpcmVjdGlvbmFsID0gY29tcHV0ZWQoKCkgPT4ge1xyXG4gICAgY29uc3QgZGF0YSA9IHRoaXMuY2FyZExldmVsRGF0YSgpO1xyXG4gICAgcmV0dXJuIGRhdGEubWluIDwgMCAmJiBkYXRhLm1heCA+IDA7XHJcbiAgfSk7XHJcblxyXG4gIC8vIENhbGN1bGEgZWwgcG9yY2VudGFqZSBkZSBmaWxsIHBhcmEgYmFycmFzIGJpZGlyZWNjaW9uYWxlc1xyXG4gIGJpZGlyZWN0aW9uYWxGaWxsUGVyY2VudCA9IGNvbXB1dGVkKCgpID0+IHtcclxuICAgIGNvbnN0IGRhdGEgPSB0aGlzLmNhcmRMZXZlbERhdGEoKTtcclxuICAgIGNvbnN0IHRvdGFsUmFuZ2UgPSBkYXRhLm1heCAtIGRhdGEubWluO1xyXG4gICAgcmV0dXJuIE1hdGguYWJzKGRhdGEudmFsdWUgLyB0b3RhbFJhbmdlKSAqIDEwMDtcclxuICB9KTtcclxuXHJcbiAgLy8gRGV0ZXJtaW5hIGxhIGRpcmVjY2nDs24gZGVsIGZpbGwgKGxlZnQvcmlnaHQpXHJcbiAgZmlsbERpcmVjdGlvbiA9IGNvbXB1dGVkKCgpID0+IHtcclxuICAgIHJldHVybiB0aGlzLmNhcmRMZXZlbERhdGEoKS52YWx1ZSA+PSAwID8gJ3JpZ2h0JyA6ICdsZWZ0JztcclxuICB9KTtcclxuXHJcbiAgLy8gQ29sb3Igc2Vnw7puIGVsIHZhbG9yIHkgdW1icmFsZXNcclxuICBmaWxsQ29sb3IgPSBjb21wdXRlZCgoKSA9PiB7XHJcbiAgICBjb25zdCBkYXRhID0gdGhpcy5jYXJkTGV2ZWxEYXRhKCk7XHJcbiAgICBjb25zdCBhYnNWYWx1ZSA9IE1hdGguYWJzKGRhdGEudmFsdWUpO1xyXG4gICAgY29uc3QgYWJzSGlnaCA9IE1hdGguYWJzKGRhdGEuaGlnaCk7XHJcbiAgICBjb25zdCBhYnNMb3cgPSBNYXRoLmFicyhkYXRhLmxvdyk7XHJcblxyXG4gICAgaWYgKGFic1ZhbHVlID49IGFic0hpZ2gpIHtcclxuICAgICAgcmV0dXJuICd2YXIoLS1jb2xvci1kYW5nZXIpJztcclxuICAgIH1cclxuICAgIGlmIChhYnNWYWx1ZSA+PSBhYnNMb3cpIHtcclxuICAgICAgcmV0dXJuICd2YXIoLS1jb2xvci13YXJuaW5nKSc7XHJcbiAgICB9XHJcbiAgICByZXR1cm4gJ3ZhcigtLWNvbG9yLXN1Y2Nlc3MpJztcclxuICB9KTtcclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiY2FyZC1sZXZlbC1jb250YWluZXJcIiBbc3R5bGUud2lkdGhdPVwiY2FyZFdpZHRoXCI+XHJcbiAgPGxhYmVsIFtmb3JdPVwiZ2VuZXJhdGVkSWRcIj5cclxuICAgIDxzdHJvbmc+e3sgY2FyZExldmVsRGF0YSgpLmxhYmVsIH19PC9zdHJvbmc+XHJcblxyXG4gICAgPHNwYW4gY2xhc3M9XCJ2YWx1ZS1kaXNwbGF5XCI+XHJcbiAgICAgIEBpZiAoaXNCaWRpcmVjdGlvbmFsKCkpIHtcclxuICAgICAgPCEtLSBCYXJyYSBiaWRpcmVjY2lvbmFsIGRlc2RlIGVsIGNlbnRybyAtLT5cclxuICAgICAgPGRpdiBjbGFzcz1cImJpZGlyZWN0aW9uYWwtbWV0ZXJcIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwibWV0ZXItdHJhY2tcIj5cclxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJjZW50ZXItbGluZVwiPjwvZGl2PlxyXG4gICAgICAgICAgPGRpdiBjbGFzcz1cIm1ldGVyLWZpbGxcIiBbY2xhc3MuZmlsbC1sZWZ0XT1cImZpbGxEaXJlY3Rpb24oKSA9PT0gJ2xlZnQnXCIgW2NsYXNzLmZpbGwtcmlnaHRdPVwiZmlsbERpcmVjdGlvbigpID09PSAncmlnaHQnXCIgW3N0eWxlLndpZHRoLiVdPVwiYmlkaXJlY3Rpb25hbEZpbGxQZXJjZW50KClcIiBbc3R5bGUuYmFja2dyb3VuZF09XCJmaWxsQ29sb3IoKVwiPlxyXG4gICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgIDwvZGl2PlxyXG4gICAgICB9IEBlbHNlIHtcclxuICAgICAgPCEtLSBNZXRlciBlc3TDoW5kYXIgcGFyYSByYW5nb3MgdW5pZGlyZWNjaW9uYWxlcyAtLT5cclxuICAgICAgPG1ldGVyIFtpZF09XCJnZW5lcmF0ZWRJZFwiIFtvcHRpbXVtXT1cImNhcmRMZXZlbERhdGEoKS5vcHRpbXVtXCIgW21pbl09XCJjYXJkTGV2ZWxEYXRhKCkubWluXCIgW21heF09XCJjYXJkTGV2ZWxEYXRhKCkubWF4XCIgW2xvd109XCJjYXJkTGV2ZWxEYXRhKCkubG93XCIgW2hpZ2hdPVwiY2FyZExldmVsRGF0YSgpLmhpZ2hcIiBbdmFsdWVdPVwiY2FyZExldmVsRGF0YSgpLnZhbHVlXCI+XHJcbiAgICAgIDwvbWV0ZXI+XHJcbiAgICAgIH1cclxuXHJcbiAgICAgIHt7IGNhcmRMZXZlbERhdGEoKS52YWx1ZSB9fXt7IGNhcmRMZXZlbERhdGEoKS51bml0IH19XHJcbiAgICA8L3NwYW4+XHJcbiAgPC9sYWJlbD5cclxuPC9kaXY+Il19
|
|
@@ -6,6 +6,10 @@ export declare class CardLevelComponent {
|
|
|
6
6
|
private _generatedId?;
|
|
7
7
|
get generatedId(): string;
|
|
8
8
|
get cardWidth(): string;
|
|
9
|
+
isBidirectional: import("@angular/core").Signal<boolean>;
|
|
10
|
+
bidirectionalFillPercent: import("@angular/core").Signal<number>;
|
|
11
|
+
fillDirection: import("@angular/core").Signal<"right" | "left">;
|
|
12
|
+
fillColor: import("@angular/core").Signal<"var(--color-danger)" | "var(--color-warning)" | "var(--color-success)">;
|
|
9
13
|
static ɵfac: i0.ɵɵFactoryDeclaration<CardLevelComponent, never>;
|
|
10
14
|
static ɵcmp: i0.ɵɵComponentDeclaration<CardLevelComponent, "c80-card-level", never, { "cardLevelData": { "alias": "cardLevelData"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
11
15
|
}
|