@c80/ui 1.0.27 → 1.0.29
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.
|
@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
|
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export class CardLevelComponent {
|
|
5
5
|
cardLevelData = input.required();
|
|
6
|
+
size = input(1); // Multiplicador del tamaño base (220px)
|
|
6
7
|
_generatedId;
|
|
7
8
|
get generatedId() {
|
|
8
9
|
if (!this._generatedId) {
|
|
@@ -12,11 +13,16 @@ export class CardLevelComponent {
|
|
|
12
13
|
}
|
|
13
14
|
return this._generatedId;
|
|
14
15
|
}
|
|
16
|
+
get cardWidth() {
|
|
17
|
+
const baseWidth = 140;
|
|
18
|
+
const calculatedWidth = baseWidth * this.size();
|
|
19
|
+
return `${calculatedWidth}px`;
|
|
20
|
+
}
|
|
15
21
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CardLevelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CardLevelComponent, isStandalone: true, selector: "
|
|
22
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.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\r\n <label [for]=\"generatedId\">\r\n\r\n <strong>{{ cardLevelData().label }}</strong>\r\n\r\n <span class=\"value-display\">\r\n\r\n <meter [id]=\"generatedId\" [optimum]=\"cardLevelData().optimum\" [min]=\"cardLevelData().min\" [max]=\"cardLevelData().max\" [low]=\"cardLevelData().low\" [high]=\"cardLevelData().high\" [value]=\"cardLevelData().value\"> </meter>\r\n\r\n {{ cardLevelData().value }}{{ cardLevelData().unit }}\r\n\r\n </span>\r\n\r\n </label>\r\n\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;transition:all .8s ease}.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 meter{width:100%;border-radius:5px;border:none;background:#e2e8f0}.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;transition:all .3s ease}.card-level-container label meter::-webkit-meter-suboptimum-value{background:linear-gradient(90deg,#ed8936,#dd6b20);border-radius:12px;transition:all .3s ease}.card-level-container label meter::-webkit-meter-even-less-good-value{background:linear-gradient(90deg,#f56565,#e53e3e);border-radius:12px;transition:all .3s ease}.card-level-container label meter::-moz-meter-bar{background:linear-gradient(90deg,#48bb78,#38a169);border-radius:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
17
23
|
}
|
|
18
24
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CardLevelComponent, decorators: [{
|
|
19
25
|
type: Component,
|
|
20
|
-
args: [{ selector: '
|
|
26
|
+
args: [{ selector: 'c80-card-level', standalone: true, imports: [CommonModule], template: "<div class=\"card-level-container\" [style.width]=\"cardWidth\">\r\n\r\n <label [for]=\"generatedId\">\r\n\r\n <strong>{{ cardLevelData().label }}</strong>\r\n\r\n <span class=\"value-display\">\r\n\r\n <meter [id]=\"generatedId\" [optimum]=\"cardLevelData().optimum\" [min]=\"cardLevelData().min\" [max]=\"cardLevelData().max\" [low]=\"cardLevelData().low\" [high]=\"cardLevelData().high\" [value]=\"cardLevelData().value\"> </meter>\r\n\r\n {{ cardLevelData().value }}{{ cardLevelData().unit }}\r\n\r\n </span>\r\n\r\n </label>\r\n\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;transition:all .8s ease}.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 meter{width:100%;border-radius:5px;border:none;background:#e2e8f0}.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;transition:all .3s ease}.card-level-container label meter::-webkit-meter-suboptimum-value{background:linear-gradient(90deg,#ed8936,#dd6b20);border-radius:12px;transition:all .3s ease}.card-level-container label meter::-webkit-meter-even-less-good-value{background:linear-gradient(90deg,#f56565,#e53e3e);border-radius:12px;transition:all .3s ease}.card-level-container label meter::-moz-meter-bar{background:linear-gradient(90deg,#48bb78,#38a169);border-radius:12px}\n"] }]
|
|
21
27
|
}] });
|
|
22
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
28
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC1sZXZlbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL3VpL3NyYy9saWIvY2FyZC1sZXZlbC9jYXJkLWxldmVsLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2xpYnMvdWkvc3JjL2xpYi9jYXJkLWxldmVsL2NhcmQtbGV2ZWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDOztBQVUvQyxNQUFNLE9BQU8sa0JBQWtCO0lBQzdCLGFBQWEsR0FBRyxLQUFLLENBQUMsUUFBUSxFQUFpQixDQUFDO0lBQ2hELElBQUksR0FBRyxLQUFLLENBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQyx3Q0FBd0M7SUFFekQsWUFBWSxDQUFVO0lBRTlCLElBQUksV0FBVztRQUNiLElBQUksQ0FBQyxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7WUFDdkIsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDLEtBQUssQ0FBQyxXQUFXLEVBQUUsQ0FBQyxPQUFPLENBQUMsTUFBTSxFQUFFLEdBQUcsQ0FBQyxDQUFDO1lBQzVFLE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxHQUFHLEtBQUssQ0FBQyxDQUFDO1lBQ3BELElBQUksQ0FBQyxZQUFZLEdBQUcsR0FBRyxLQUFLLElBQUksU0FBUyxFQUFFLENBQUM7UUFDOUMsQ0FBQztRQUNELE9BQU8sSUFBSSxDQUFDLFlBQVksQ0FBQztJQUMzQixDQUFDO0lBRUQsSUFBSSxTQUFTO1FBQ1gsTUFBTSxTQUFTLEdBQUcsR0FBRyxDQUFDO1FBQ3RCLE1BQU0sZUFBZSxHQUFHLFNBQVMsR0FBRyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDaEQsT0FBTyxHQUFHLGVBQWUsSUFBSSxDQUFDO0lBQ2hDLENBQUM7d0dBbkJVLGtCQUFrQjs0RkFBbEIsa0JBQWtCLDBWQ1gvQixzakJBZ0JNLHE1Q0RUTSxZQUFZOzs0RkFJWCxrQkFBa0I7a0JBUDlCLFNBQVM7K0JBQ0UsZ0JBQWdCLGNBQ2QsSUFBSSxXQUNQLENBQUMsWUFBWSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBDYXJkTGV2ZWxEYXRhIH0gZnJvbSAnLi9jYXJkLWxldmVsLmludGVyZmFjZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2M4MC1jYXJkLWxldmVsJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9jYXJkLWxldmVsLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vY2FyZC1sZXZlbC5jb21wb25lbnQuc2NzcydcclxufSlcclxuZXhwb3J0IGNsYXNzIENhcmRMZXZlbENvbXBvbmVudCB7XHJcbiAgY2FyZExldmVsRGF0YSA9IGlucHV0LnJlcXVpcmVkPENhcmRMZXZlbERhdGE+KCk7XHJcbiAgc2l6ZSA9IGlucHV0PG51bWJlcj4oMSk7IC8vIE11bHRpcGxpY2Fkb3IgZGVsIHRhbWHDsW8gYmFzZSAoMjIwcHgpXHJcblxyXG4gIHByaXZhdGUgX2dlbmVyYXRlZElkPzogc3RyaW5nO1xyXG5cclxuICBnZXQgZ2VuZXJhdGVkSWQoKTogc3RyaW5nIHtcclxuICAgIGlmICghdGhpcy5fZ2VuZXJhdGVkSWQpIHtcclxuICAgICAgY29uc3QgbGFiZWwgPSB0aGlzLmNhcmRMZXZlbERhdGEoKS5sYWJlbC50b0xvd2VyQ2FzZSgpLnJlcGxhY2UoL1xccysvZywgJy0nKTtcclxuICAgICAgY29uc3QgcmFuZG9tTnVtID0gTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogMTAwMDApO1xyXG4gICAgICB0aGlzLl9nZW5lcmF0ZWRJZCA9IGAke2xhYmVsfS0ke3JhbmRvbU51bX1gO1xyXG4gICAgfVxyXG4gICAgcmV0dXJuIHRoaXMuX2dlbmVyYXRlZElkO1xyXG4gIH1cclxuXHJcbiAgZ2V0IGNhcmRXaWR0aCgpOiBzdHJpbmcge1xyXG4gICAgY29uc3QgYmFzZVdpZHRoID0gMTQwO1xyXG4gICAgY29uc3QgY2FsY3VsYXRlZFdpZHRoID0gYmFzZVdpZHRoICogdGhpcy5zaXplKCk7XHJcbiAgICByZXR1cm4gYCR7Y2FsY3VsYXRlZFdpZHRofXB4YDtcclxuICB9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cImNhcmQtbGV2ZWwtY29udGFpbmVyXCIgW3N0eWxlLndpZHRoXT1cImNhcmRXaWR0aFwiPlxyXG5cclxuICA8bGFiZWwgW2Zvcl09XCJnZW5lcmF0ZWRJZFwiPlxyXG5cclxuICAgIDxzdHJvbmc+e3sgY2FyZExldmVsRGF0YSgpLmxhYmVsIH19PC9zdHJvbmc+XHJcblxyXG4gICAgPHNwYW4gY2xhc3M9XCJ2YWx1ZS1kaXNwbGF5XCI+XHJcblxyXG4gICAgICA8bWV0ZXIgW2lkXT1cImdlbmVyYXRlZElkXCIgW29wdGltdW1dPVwiY2FyZExldmVsRGF0YSgpLm9wdGltdW1cIiBbbWluXT1cImNhcmRMZXZlbERhdGEoKS5taW5cIiBbbWF4XT1cImNhcmRMZXZlbERhdGEoKS5tYXhcIiBbbG93XT1cImNhcmRMZXZlbERhdGEoKS5sb3dcIiBbaGlnaF09XCJjYXJkTGV2ZWxEYXRhKCkuaGlnaFwiIFt2YWx1ZV09XCJjYXJkTGV2ZWxEYXRhKCkudmFsdWVcIj4gPC9tZXRlcj5cclxuXHJcbiAgICAgIHt7IGNhcmRMZXZlbERhdGEoKS52YWx1ZSB9fXt7IGNhcmRMZXZlbERhdGEoKS51bml0IH19XHJcblxyXG4gICAgPC9zcGFuPlxyXG5cclxuICA8L2xhYmVsPlxyXG5cclxuPC9kaXY+Il19
|
|
@@ -2,8 +2,10 @@ import { CardLevelData } from './card-level.interface';
|
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export declare class CardLevelComponent {
|
|
4
4
|
cardLevelData: import("@angular/core").InputSignal<CardLevelData>;
|
|
5
|
+
size: import("@angular/core").InputSignal<number>;
|
|
5
6
|
private _generatedId?;
|
|
6
7
|
get generatedId(): string;
|
|
8
|
+
get cardWidth(): string;
|
|
7
9
|
static ɵfac: i0.ɵɵFactoryDeclaration<CardLevelComponent, never>;
|
|
8
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<CardLevelComponent, "
|
|
10
|
+
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>;
|
|
9
11
|
}
|