@litigiovirtual/ius-design-components 1.0.71 → 1.0.73
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/button-dynamic/button-dynamic.component.mjs +10 -4
- package/esm2022/lib/charts-donut/charts-donut.component.mjs +137 -0
- package/esm2022/lib/charts-donut/index.mjs +2 -0
- package/esm2022/lib/input-select/input-select.component.mjs +7 -4
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/litigiovirtual-ius-design-components.mjs +150 -8
- package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
- package/lib/button-dynamic/button-dynamic.component.d.ts +3 -2
- package/lib/charts-donut/charts-donut.component.d.ts +47 -0
- package/lib/charts-donut/index.d.ts +1 -0
- package/lib/input-select/input-select.component.d.ts +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, Component, EventEmitter, Output, HostListener, ViewChildren, HostBinding, inject, ViewContainerRef, ElementRef, Directive } from '@angular/core';
|
|
2
|
+
import { Input, Component, EventEmitter, Output, HostListener, ViewChildren, HostBinding, inject, ViewContainerRef, ElementRef, Directive, signal, computed } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/platform-browser';
|
|
@@ -1234,9 +1234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1234
1234
|
|
|
1235
1235
|
class ButtonDynamicComponent {
|
|
1236
1236
|
constructor() {
|
|
1237
|
-
this.labelDefault = '
|
|
1238
|
-
this.labelSuccess = 'Guardado';
|
|
1239
|
-
this.labelError = 'Error';
|
|
1237
|
+
this.labelDefault = 'Label';
|
|
1240
1238
|
this.disabled = false;
|
|
1241
1239
|
this.loading = false;
|
|
1242
1240
|
this.autoReset = true;
|
|
@@ -1244,6 +1242,14 @@ class ButtonDynamicComponent {
|
|
|
1244
1242
|
this.buttonClicked = new EventEmitter();
|
|
1245
1243
|
this.state = 'default';
|
|
1246
1244
|
}
|
|
1245
|
+
ngOnInit() {
|
|
1246
|
+
if (!this.labelSuccess) {
|
|
1247
|
+
this.labelSuccess = this.labelDefault;
|
|
1248
|
+
}
|
|
1249
|
+
if (!this.labelError) {
|
|
1250
|
+
this.labelError = this.labelDefault;
|
|
1251
|
+
}
|
|
1252
|
+
}
|
|
1247
1253
|
ngOnChanges(changes) {
|
|
1248
1254
|
// 1) disabled manda todo a 'disabled'
|
|
1249
1255
|
if (this.disabled) {
|
|
@@ -2424,7 +2430,10 @@ class InputSelectComponent {
|
|
|
2424
2430
|
this.closeList();
|
|
2425
2431
|
}
|
|
2426
2432
|
}
|
|
2427
|
-
closeList() {
|
|
2433
|
+
closeList(event) {
|
|
2434
|
+
if (event) {
|
|
2435
|
+
event.stopImmediatePropagation();
|
|
2436
|
+
}
|
|
2428
2437
|
this.isFocused = false;
|
|
2429
2438
|
this.showList = false;
|
|
2430
2439
|
if (!this.selected && !this.showList) {
|
|
@@ -2477,11 +2486,11 @@ class InputSelectComponent {
|
|
|
2477
2486
|
this.isAlertText = false;
|
|
2478
2487
|
}
|
|
2479
2488
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2480
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputSelectComponent, isStandalone: true, selector: "ius-input-select", inputs: { componentId: "componentId", required: "required", disabled: "disabled", showHelpText: "showHelpText", labelSuperior: "labelSuperior", labelInferior: "labelInferior", labelInput: "labelInput", iconInput: "iconInput", textInput: "textInput" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onAddText: "onAddText" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<div class=\"container-general\" [id]=\"componentId\">\n @if (labelSuperior) {\n <div class=\"container-label-sup\" [ngClass]=\"{\n 'disabled': disabled\n }\">\n @if(!disabled && required){\n <div class=\"icon-dot\"></div>\n }\n <span class=\"\">{{labelSuperior}}</span>\n @if(!disabled && showHelpText){\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\n }\n <span>:</span>\n </div>\n }\n <div class=\"container-textfield\" [ngClass]=\"{\n 'disabled': disabled,\n 'focused': isFocused,\n 'alert': !isFocused && isAlertText && !disabled\n }\" (click)=\"onFocus()\">\n @if (iconInput) {\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\n }\n <input type=\"text\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($event)\">\n <div class=\"cnt-icon-right\">\n @if(!showList){\n <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\n }@else{\n <div (click)=\"closeList()\" style=\"height: 20px;\">\n <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\n </div>\n }\n </div>\n </div>\n @if (labelInferior && isFocused) {\n <span class=\"label-inf\">{{labelInferior}}</span>\n }\n @if (labelInferior && !isFocused && isAlertText) {\n <span class=\"label-inf\" [ngClass]=\"{\n 'alert': !isFocused && isAlertText && !disabled\n }\">{{labelInferior}}</span>\n }\n @if (showList) {\n <div class=\"container-list scrollable-small\">\n <div (click)=\"onSelectOption()\">\n <ng-content selector=\"ius-option\"></ng-content>\n </div>\n </div>\n }\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;cursor:pointer;border:1px solid #f5f5f5;border-radius:8px;background:#f5f5f5;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{cursor:default;background:#f5f5f5}.container-textfield.disabled .icon-color,.container-textfield.disabled .icon-arrows,.container-textfield.disabled input{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.container-textfield .icon-arrows{pointer-events:none}.container-textfield .icon-arrows svg{pointer-events:none}.icon-color{color:#595959}.icon-arrows{color:#333}input{display:flex;align-items:center;flex:1 0 0;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.cnt-icon-right{display:flex;align-items:center;justify-content:center;background:none;padding:0;color:#333}.container-label-sup{display:flex;align-items:center;gap:4px;margin-bottom:8px;color:#333;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.container-label-sup.disabled{color:#bfbfbf}.icon-dot{display:flex;align-items:center;width:4px;height:4px;aspect-ratio:1/1;background-color:#db2e2a;border-radius:100px}.icon-color-help{color:#8c8c8c}.label-inf{display:flex;position:absolute;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.label-inf.alert{color:#931224}.container-list{position:absolute;max-height:144px;width:100%;display:flex;flex-direction:column;margin-top:4px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;z-index:1000;overflow-y:auto}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
2489
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputSelectComponent, isStandalone: true, selector: "ius-input-select", inputs: { componentId: "componentId", required: "required", disabled: "disabled", showHelpText: "showHelpText", labelSuperior: "labelSuperior", labelInferior: "labelInferior", labelInput: "labelInput", iconInput: "iconInput", textInput: "textInput" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onAddText: "onAddText" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<div class=\"container-general\" [id]=\"componentId\">\n @if (labelSuperior) {\n <div class=\"container-label-sup\" [ngClass]=\"{\n 'disabled': disabled\n }\">\n @if(!disabled && required){\n <div class=\"icon-dot\"></div>\n }\n <span class=\"\">{{labelSuperior}}</span>\n @if(!disabled && showHelpText){\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\n }\n <span>:</span>\n </div>\n }\n <div class=\"container-textfield\" [ngClass]=\"{\n 'disabled': disabled,\n 'focused': isFocused,\n 'alert': !isFocused && isAlertText && !disabled\n }\" (click)=\"onFocus()\">\n @if (iconInput) {\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\n }\n <input type=\"text\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($event)\">\n <div class=\"cnt-icon-right\">\n @if(!showList){\n <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\n }@else{\n <div (click)=\"closeList($event)\" style=\"height: 20px;\">\n <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\n </div>\n }\n </div>\n </div>\n @if (labelInferior && isFocused) {\n <span class=\"label-inf\">{{labelInferior}}</span>\n }\n @if (labelInferior && !isFocused && isAlertText) {\n <span class=\"label-inf\" [ngClass]=\"{\n 'alert': !isFocused && isAlertText && !disabled\n }\">{{labelInferior}}</span>\n }\n @if (showList) {\n <div class=\"container-list scrollable-small\">\n <div (click)=\"onSelectOption()\">\n <ng-content selector=\"ius-option\"></ng-content>\n </div>\n </div>\n }\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;cursor:pointer;border:1px solid #f5f5f5;border-radius:8px;background:#f5f5f5;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{cursor:default;background:#f5f5f5}.container-textfield.disabled .icon-color,.container-textfield.disabled .icon-arrows,.container-textfield.disabled input{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.container-textfield .icon-arrows{pointer-events:none}.container-textfield .icon-arrows svg{pointer-events:none}.icon-color{color:#595959}.icon-arrows{color:#333}input{display:flex;align-items:center;flex:1 0 0;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.cnt-icon-right{display:flex;align-items:center;justify-content:center;background:none;padding:0;color:#333}.container-label-sup{display:flex;align-items:center;gap:4px;margin-bottom:8px;color:#333;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.container-label-sup.disabled{color:#bfbfbf}.icon-dot{display:flex;align-items:center;width:4px;height:4px;aspect-ratio:1/1;background-color:#db2e2a;border-radius:100px}.icon-color-help{color:#8c8c8c}.label-inf{display:flex;position:absolute;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.label-inf.alert{color:#931224}.container-list{position:absolute;max-height:144px;width:100%;display:flex;flex-direction:column;margin-top:4px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;z-index:1000;overflow-y:auto}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
2481
2490
|
}
|
|
2482
2491
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectComponent, decorators: [{
|
|
2483
2492
|
type: Component,
|
|
2484
|
-
args: [{ selector: 'ius-input-select', standalone: true, imports: [IconMdComponent, FormsModule, CommonModule], template: "<div class=\"container-general\" [id]=\"componentId\">\n @if (labelSuperior) {\n <div class=\"container-label-sup\" [ngClass]=\"{\n 'disabled': disabled\n }\">\n @if(!disabled && required){\n <div class=\"icon-dot\"></div>\n }\n <span class=\"\">{{labelSuperior}}</span>\n @if(!disabled && showHelpText){\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\n }\n <span>:</span>\n </div>\n }\n <div class=\"container-textfield\" [ngClass]=\"{\n 'disabled': disabled,\n 'focused': isFocused,\n 'alert': !isFocused && isAlertText && !disabled\n }\" (click)=\"onFocus()\">\n @if (iconInput) {\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\n }\n <input type=\"text\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($event)\">\n <div class=\"cnt-icon-right\">\n @if(!showList){\n <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\n }@else{\n <div (click)=\"closeList()\" style=\"height: 20px;\">\n <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\n </div>\n }\n </div>\n </div>\n @if (labelInferior && isFocused) {\n <span class=\"label-inf\">{{labelInferior}}</span>\n }\n @if (labelInferior && !isFocused && isAlertText) {\n <span class=\"label-inf\" [ngClass]=\"{\n 'alert': !isFocused && isAlertText && !disabled\n }\">{{labelInferior}}</span>\n }\n @if (showList) {\n <div class=\"container-list scrollable-small\">\n <div (click)=\"onSelectOption()\">\n <ng-content selector=\"ius-option\"></ng-content>\n </div>\n </div>\n }\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;cursor:pointer;border:1px solid #f5f5f5;border-radius:8px;background:#f5f5f5;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{cursor:default;background:#f5f5f5}.container-textfield.disabled .icon-color,.container-textfield.disabled .icon-arrows,.container-textfield.disabled input{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.container-textfield .icon-arrows{pointer-events:none}.container-textfield .icon-arrows svg{pointer-events:none}.icon-color{color:#595959}.icon-arrows{color:#333}input{display:flex;align-items:center;flex:1 0 0;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.cnt-icon-right{display:flex;align-items:center;justify-content:center;background:none;padding:0;color:#333}.container-label-sup{display:flex;align-items:center;gap:4px;margin-bottom:8px;color:#333;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.container-label-sup.disabled{color:#bfbfbf}.icon-dot{display:flex;align-items:center;width:4px;height:4px;aspect-ratio:1/1;background-color:#db2e2a;border-radius:100px}.icon-color-help{color:#8c8c8c}.label-inf{display:flex;position:absolute;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.label-inf.alert{color:#931224}.container-list{position:absolute;max-height:144px;width:100%;display:flex;flex-direction:column;margin-top:4px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;z-index:1000;overflow-y:auto}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}\n"] }]
|
|
2493
|
+
args: [{ selector: 'ius-input-select', standalone: true, imports: [IconMdComponent, FormsModule, CommonModule], template: "<div class=\"container-general\" [id]=\"componentId\">\n @if (labelSuperior) {\n <div class=\"container-label-sup\" [ngClass]=\"{\n 'disabled': disabled\n }\">\n @if(!disabled && required){\n <div class=\"icon-dot\"></div>\n }\n <span class=\"\">{{labelSuperior}}</span>\n @if(!disabled && showHelpText){\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\n }\n <span>:</span>\n </div>\n }\n <div class=\"container-textfield\" [ngClass]=\"{\n 'disabled': disabled,\n 'focused': isFocused,\n 'alert': !isFocused && isAlertText && !disabled\n }\" (click)=\"onFocus()\">\n @if (iconInput) {\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\n }\n <input type=\"text\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($event)\">\n <div class=\"cnt-icon-right\">\n @if(!showList){\n <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\n }@else{\n <div (click)=\"closeList($event)\" style=\"height: 20px;\">\n <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\n </div>\n }\n </div>\n </div>\n @if (labelInferior && isFocused) {\n <span class=\"label-inf\">{{labelInferior}}</span>\n }\n @if (labelInferior && !isFocused && isAlertText) {\n <span class=\"label-inf\" [ngClass]=\"{\n 'alert': !isFocused && isAlertText && !disabled\n }\">{{labelInferior}}</span>\n }\n @if (showList) {\n <div class=\"container-list scrollable-small\">\n <div (click)=\"onSelectOption()\">\n <ng-content selector=\"ius-option\"></ng-content>\n </div>\n </div>\n }\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;cursor:pointer;border:1px solid #f5f5f5;border-radius:8px;background:#f5f5f5;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{cursor:default;background:#f5f5f5}.container-textfield.disabled .icon-color,.container-textfield.disabled .icon-arrows,.container-textfield.disabled input{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.container-textfield .icon-arrows{pointer-events:none}.container-textfield .icon-arrows svg{pointer-events:none}.icon-color{color:#595959}.icon-arrows{color:#333}input{display:flex;align-items:center;flex:1 0 0;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.cnt-icon-right{display:flex;align-items:center;justify-content:center;background:none;padding:0;color:#333}.container-label-sup{display:flex;align-items:center;gap:4px;margin-bottom:8px;color:#333;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.container-label-sup.disabled{color:#bfbfbf}.icon-dot{display:flex;align-items:center;width:4px;height:4px;aspect-ratio:1/1;background-color:#db2e2a;border-radius:100px}.icon-color-help{color:#8c8c8c}.label-inf{display:flex;position:absolute;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.label-inf.alert{color:#931224}.container-list{position:absolute;max-height:144px;width:100%;display:flex;flex-direction:column;margin-top:4px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;z-index:1000;overflow-y:auto}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}\n"] }]
|
|
2485
2494
|
}], propDecorators: { componentId: [{
|
|
2486
2495
|
type: Input,
|
|
2487
2496
|
args: [{ required: true }]
|
|
@@ -3819,9 +3828,142 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3819
3828
|
args: ['focusout']
|
|
3820
3829
|
}] } });
|
|
3821
3830
|
|
|
3831
|
+
class ChartsDonutComponent {
|
|
3832
|
+
constructor() {
|
|
3833
|
+
this.data = [];
|
|
3834
|
+
this.size = 180; // width/height del SVG
|
|
3835
|
+
this.thickness = 18; // grosor del anillo
|
|
3836
|
+
this.gapDegrees = 0; // separación entre segmentos (grados)
|
|
3837
|
+
this.showLegend = true;
|
|
3838
|
+
this.legendPosition = 'right';
|
|
3839
|
+
this.sort = false; // ordena segmentos por valor (desc)
|
|
3840
|
+
this.sliceClick = new EventEmitter();
|
|
3841
|
+
// señales para recalcular
|
|
3842
|
+
this._slices = signal([]);
|
|
3843
|
+
this._total = signal(0);
|
|
3844
|
+
this._circ = signal(0);
|
|
3845
|
+
this._radius = signal(0);
|
|
3846
|
+
this.slices = computed(() => this._slices());
|
|
3847
|
+
this.total = computed(() => this._total());
|
|
3848
|
+
this.radius = computed(() => this._radius());
|
|
3849
|
+
this.circumference = computed(() => this._circ());
|
|
3850
|
+
this.viewBox = computed(() => `0 0 ${this.size} ${this.size}`);
|
|
3851
|
+
}
|
|
3852
|
+
ngOnChanges() {
|
|
3853
|
+
const cleaned = (this.data ?? []).filter(d => Number(d?.value) > 0);
|
|
3854
|
+
const total = cleaned.reduce((a, b) => a + b.value, 0);
|
|
3855
|
+
const radius = this.size / 2 - this.thickness / 2;
|
|
3856
|
+
const circumference = 2 * Math.PI * radius;
|
|
3857
|
+
this._radius.set(radius);
|
|
3858
|
+
this._circ.set(circumference);
|
|
3859
|
+
// sin datos válidos
|
|
3860
|
+
if (total <= 0) {
|
|
3861
|
+
this._slices.set([]);
|
|
3862
|
+
this._total.set(0);
|
|
3863
|
+
return;
|
|
3864
|
+
}
|
|
3865
|
+
// paleta (rota si no alcanza)
|
|
3866
|
+
const palette = [
|
|
3867
|
+
'#2167FF', // Info-500
|
|
3868
|
+
'#0A2893', // Info-800
|
|
3869
|
+
'#40CAE9', // Primary-400
|
|
3870
|
+
'#5892FF', // Info-400
|
|
3871
|
+
'#08A6DB', // Primary-500
|
|
3872
|
+
'#C4DFFF', // Info-200
|
|
3873
|
+
];
|
|
3874
|
+
let pIndex = 0;
|
|
3875
|
+
const base = cleaned.map(d => ({
|
|
3876
|
+
...d,
|
|
3877
|
+
color: d.color ?? palette[pIndex++ % palette.length]
|
|
3878
|
+
}));
|
|
3879
|
+
// orden opcional
|
|
3880
|
+
const dataOrdered = this.sort ? [...base].sort((a, b) => b.value - a.value) : base;
|
|
3881
|
+
// geometría angular
|
|
3882
|
+
const cx = this.size / 2;
|
|
3883
|
+
const cy = this.size / 2;
|
|
3884
|
+
const n = dataOrdered.length;
|
|
3885
|
+
const gap = Math.max(this.gapDegrees, 0);
|
|
3886
|
+
const usefulDeg = Math.max(360 - n * gap, 0); // evita negativos
|
|
3887
|
+
let current = -90; // arranca a las 12 en punto
|
|
3888
|
+
const slices = dataOrdered.map(d => {
|
|
3889
|
+
const fraction = d.value / total;
|
|
3890
|
+
const sweep = usefulDeg * fraction;
|
|
3891
|
+
// dejamos medio gap antes y después del arco
|
|
3892
|
+
const startDeg = current + gap / 2;
|
|
3893
|
+
const endDeg = startDeg + sweep;
|
|
3894
|
+
const pathD = this.arcPath(cx, cy, radius, startDeg, endDeg);
|
|
3895
|
+
const midDeg = startDeg + sweep / 2;
|
|
3896
|
+
const mid = this.polarToCartesian(cx, cy, radius, midDeg);
|
|
3897
|
+
// avanza el cursor angular para el siguiente slice
|
|
3898
|
+
current = endDeg + gap / 2;
|
|
3899
|
+
return {
|
|
3900
|
+
...d,
|
|
3901
|
+
percentage: +(fraction * 100).toFixed(2),
|
|
3902
|
+
pathD,
|
|
3903
|
+
midX: mid.x,
|
|
3904
|
+
midY: mid.y
|
|
3905
|
+
};
|
|
3906
|
+
});
|
|
3907
|
+
this._slices.set(slices);
|
|
3908
|
+
this._total.set(total);
|
|
3909
|
+
}
|
|
3910
|
+
// === helpers de geometría ===
|
|
3911
|
+
polarToCartesian(cx, cy, r, deg) {
|
|
3912
|
+
const rad = (deg * Math.PI) / 180;
|
|
3913
|
+
return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
|
|
3914
|
+
}
|
|
3915
|
+
arcPath(cx, cy, r, startDeg, endDeg) {
|
|
3916
|
+
const start = this.polarToCartesian(cx, cy, r, startDeg);
|
|
3917
|
+
const end = this.polarToCartesian(cx, cy, r, endDeg);
|
|
3918
|
+
const sweep = endDeg - startDeg;
|
|
3919
|
+
const largeArcFlag = sweep > 180 ? 1 : 0;
|
|
3920
|
+
// arco horario (sweep-flag=1)
|
|
3921
|
+
return `M ${start.x} ${start.y} A ${r} ${r} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`;
|
|
3922
|
+
}
|
|
3923
|
+
// eventos / utilidades
|
|
3924
|
+
onSliceClick(s) {
|
|
3925
|
+
this.sliceClick.emit({ label: s.label, value: s.value, color: s.color });
|
|
3926
|
+
}
|
|
3927
|
+
get centerLabel() {
|
|
3928
|
+
return `${this.centerText ?? this.total()}`;
|
|
3929
|
+
}
|
|
3930
|
+
getPopoverText(s) {
|
|
3931
|
+
return `${s.label}: ${s.value} (${s.percentage}%)`;
|
|
3932
|
+
}
|
|
3933
|
+
// accesibilidad: describe la dona
|
|
3934
|
+
get ariaLabel() {
|
|
3935
|
+
const parts = this.slices().map(s => `${s.label}: ${s.value} (${s.percentage}%)`);
|
|
3936
|
+
return `Gráfica de dona. Total ${this.total()}. ${parts.join('. ')}`;
|
|
3937
|
+
}
|
|
3938
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChartsDonutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3939
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ChartsDonutComponent, isStandalone: true, selector: "ius-charts-donut", inputs: { data: "data", size: "size", thickness: "thickness", gapDegrees: "gapDegrees", showLegend: "showLegend", legendPosition: "legendPosition", centerText: "centerText", sort: "sort" }, outputs: { sliceClick: "sliceClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"donut-wrapper\" [class.bottom]=\"legendPosition === 'bottom'\">\r\n <svg\r\n class=\"donut\"\r\n role=\"img\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [attr.width]=\"size\"\r\n [attr.height]=\"size\"\r\n [attr.viewBox]=\"viewBox()\">\r\n <!-- pista -->\r\n <circle\r\n class=\"track\"\r\n [attr.cx]=\"size/2\"\r\n [attr.cy]=\"size/2\"\r\n [attr.r]=\"radius()\"\r\n [attr.stroke-width]=\"thickness\"\r\n ></circle>\r\n\r\n <!-- slices como PATH (cada uno es su arco real) -->\r\n @for (s of slices(); track s.label) {\r\n <path\r\n class=\"slice\"\r\n [attr.d]=\"s.pathD\"\r\n fill=\"none\"\r\n [attr.stroke]=\"s.color\"\r\n [attr.stroke-width]=\"thickness\"\r\n stroke-linecap=\"butt\"\r\n [iusPopoverContent]=\"getPopoverText(s)\"\r\n (click)=\"onSliceClick(s)\"\r\n tabindex=\"0\"\r\n >\r\n </path>\r\n }\r\n\r\n <!-- centro -->\r\n <g>\r\n <text\r\n [attr.x]=\"size/2\"\r\n [attr.y]=\"size/2\"\r\n text-anchor=\"middle\"\r\n alignment-baseline=\"middle\"\r\n class=\"center-text\">\r\n {{ centerLabel }}\r\n </text>\r\n </g>\r\n </svg>\r\n\r\n @if (showLegend && slices().length) {\r\n <div class=\"legend scrollable-small\" [class.bottom]=\"legendPosition === 'bottom'\">\r\n @for (s of slices(); track s.label) {\r\n <div class=\"legend-item\">\r\n <span class=\"dot\" [style.background]=\"s.color\"></span>\r\n <span class=\"label caption-sm\" [iusPopoverContent]=\"s.value.toString() + ' - ' + s.label\">{{s.value}} - {{s.label}}</span>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}:host{display:block;max-width:100%;height:100%}.donut-wrapper{display:grid;grid-template-columns:auto 1fr;column-gap:16px;height:100%;align-items:stretch}.donut-wrapper.bottom{grid-template-columns:1fr;grid-template-rows:auto 1fr;row-gap:12px;align-items:stretch}.donut{display:block;max-width:100%;height:auto;align-self:center}.track{fill:none;stroke:#eef2f6}.slice{pointer-events:stroke;cursor:pointer;transition:opacity .15s ease,transform .15s ease}.slice:focus{outline:none;filter:drop-shadow(0 0 2px rgba(0,0,0,.2))}.slice:hover{opacity:.9}.center-text{fill:#595959;font-family:Rubik,sans-serif;font-size:1.5rem;font-weight:600}.legend{display:flex;flex-direction:column;gap:8px;padding-right:4px;min-width:0;overflow-x:hidden;overflow-y:auto;align-self:stretch;max-height:100%;min-height:0}.legend.bottom{flex-direction:row;flex-wrap:wrap;overflow-y:auto}.legend .legend-item{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}.legend .dot{width:8px;height:8px;border-radius:8px;flex:0 0 8px}.legend .label{color:#595959;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: PopoverDirective, selector: "[iusPopover], [iusPopoverTitle], [iusPopoverContent]", inputs: ["iusPopover", "iusPopoverTitle", "iusPopoverContent", "iusPopoverPosition", "iusPopoverOpenDelay", "iusPopoverCloseDelay"] }] }); }
|
|
3940
|
+
}
|
|
3941
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChartsDonutComponent, decorators: [{
|
|
3942
|
+
type: Component,
|
|
3943
|
+
args: [{ selector: 'ius-charts-donut', standalone: true, imports: [CommonModule, PopoverDirective], template: "<div class=\"donut-wrapper\" [class.bottom]=\"legendPosition === 'bottom'\">\r\n <svg\r\n class=\"donut\"\r\n role=\"img\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [attr.width]=\"size\"\r\n [attr.height]=\"size\"\r\n [attr.viewBox]=\"viewBox()\">\r\n <!-- pista -->\r\n <circle\r\n class=\"track\"\r\n [attr.cx]=\"size/2\"\r\n [attr.cy]=\"size/2\"\r\n [attr.r]=\"radius()\"\r\n [attr.stroke-width]=\"thickness\"\r\n ></circle>\r\n\r\n <!-- slices como PATH (cada uno es su arco real) -->\r\n @for (s of slices(); track s.label) {\r\n <path\r\n class=\"slice\"\r\n [attr.d]=\"s.pathD\"\r\n fill=\"none\"\r\n [attr.stroke]=\"s.color\"\r\n [attr.stroke-width]=\"thickness\"\r\n stroke-linecap=\"butt\"\r\n [iusPopoverContent]=\"getPopoverText(s)\"\r\n (click)=\"onSliceClick(s)\"\r\n tabindex=\"0\"\r\n >\r\n </path>\r\n }\r\n\r\n <!-- centro -->\r\n <g>\r\n <text\r\n [attr.x]=\"size/2\"\r\n [attr.y]=\"size/2\"\r\n text-anchor=\"middle\"\r\n alignment-baseline=\"middle\"\r\n class=\"center-text\">\r\n {{ centerLabel }}\r\n </text>\r\n </g>\r\n </svg>\r\n\r\n @if (showLegend && slices().length) {\r\n <div class=\"legend scrollable-small\" [class.bottom]=\"legendPosition === 'bottom'\">\r\n @for (s of slices(); track s.label) {\r\n <div class=\"legend-item\">\r\n <span class=\"dot\" [style.background]=\"s.color\"></span>\r\n <span class=\"label caption-sm\" [iusPopoverContent]=\"s.value.toString() + ' - ' + s.label\">{{s.value}} - {{s.label}}</span>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}:host{display:block;max-width:100%;height:100%}.donut-wrapper{display:grid;grid-template-columns:auto 1fr;column-gap:16px;height:100%;align-items:stretch}.donut-wrapper.bottom{grid-template-columns:1fr;grid-template-rows:auto 1fr;row-gap:12px;align-items:stretch}.donut{display:block;max-width:100%;height:auto;align-self:center}.track{fill:none;stroke:#eef2f6}.slice{pointer-events:stroke;cursor:pointer;transition:opacity .15s ease,transform .15s ease}.slice:focus{outline:none;filter:drop-shadow(0 0 2px rgba(0,0,0,.2))}.slice:hover{opacity:.9}.center-text{fill:#595959;font-family:Rubik,sans-serif;font-size:1.5rem;font-weight:600}.legend{display:flex;flex-direction:column;gap:8px;padding-right:4px;min-width:0;overflow-x:hidden;overflow-y:auto;align-self:stretch;max-height:100%;min-height:0}.legend.bottom{flex-direction:row;flex-wrap:wrap;overflow-y:auto}.legend .legend-item{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}.legend .dot{width:8px;height:8px;border-radius:8px;flex:0 0 8px}.legend .label{color:#595959;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}\n"] }]
|
|
3944
|
+
}], propDecorators: { data: [{
|
|
3945
|
+
type: Input
|
|
3946
|
+
}], size: [{
|
|
3947
|
+
type: Input
|
|
3948
|
+
}], thickness: [{
|
|
3949
|
+
type: Input
|
|
3950
|
+
}], gapDegrees: [{
|
|
3951
|
+
type: Input
|
|
3952
|
+
}], showLegend: [{
|
|
3953
|
+
type: Input
|
|
3954
|
+
}], legendPosition: [{
|
|
3955
|
+
type: Input
|
|
3956
|
+
}], centerText: [{
|
|
3957
|
+
type: Input
|
|
3958
|
+
}], sort: [{
|
|
3959
|
+
type: Input
|
|
3960
|
+
}], sliceClick: [{
|
|
3961
|
+
type: Output
|
|
3962
|
+
}] } });
|
|
3963
|
+
|
|
3822
3964
|
/**
|
|
3823
3965
|
* Generated bundle index. Do not edit.
|
|
3824
3966
|
*/
|
|
3825
3967
|
|
|
3826
|
-
export { AvatarIconComponent, BadgeComponent, ButtonAuthComponent, ButtonCircleSecondaryComponent, ButtonCircleTertiaryComponent, ButtonDynamicComponent, ButtonSquaredSecondaryComponent, ButtonSquaredTertiaryComponent, ButtonStandardPrimaryComponent, ButtonStandardSecondaryComponent, ButtonStandardTertiaryComponent, ButtonStandardTertiarySmallComponent, CardDynamicContentComponent, CardListMovimientosComponent, CategoriesComponent, ChipUserComponent, CustomDropdownComponent, DateHourPickerComponent, DatePickerComponent, DoubleDatePickerComponent, DrawerContainerRightComponent, DropdownComponent, DropdownOptionItemComponent, DropdownUserMenuComponent, IconLgComponent, IconMdComponent, IconSmComponent, IconXlComponent, IconXsComponent, IconXxlComponent, InputOtpComponent, InputPasswordComponent, InputSelectComponent, InputSelectNumberComponent, InputTextfieldComponent, LinearProgressBarComponent, LoadingCircleComponent, MenuItemComponent, NavRailComponent, OptionComponent, PopoverDirective, SearchBarComponent, SectionCollapseDrawerChildComponent, SectionCollapseDrawerParentComponent, SimpleDividerComponent, SlideToggleComponent, SnackbarComponent, ToolbarComponent, ToolbarUserMenuComponent };
|
|
3968
|
+
export { AvatarIconComponent, BadgeComponent, ButtonAuthComponent, ButtonCircleSecondaryComponent, ButtonCircleTertiaryComponent, ButtonDynamicComponent, ButtonSquaredSecondaryComponent, ButtonSquaredTertiaryComponent, ButtonStandardPrimaryComponent, ButtonStandardSecondaryComponent, ButtonStandardTertiaryComponent, ButtonStandardTertiarySmallComponent, CardDynamicContentComponent, CardListMovimientosComponent, CategoriesComponent, ChartsDonutComponent, ChipUserComponent, CustomDropdownComponent, DateHourPickerComponent, DatePickerComponent, DoubleDatePickerComponent, DrawerContainerRightComponent, DropdownComponent, DropdownOptionItemComponent, DropdownUserMenuComponent, IconLgComponent, IconMdComponent, IconSmComponent, IconXlComponent, IconXsComponent, IconXxlComponent, InputOtpComponent, InputPasswordComponent, InputSelectComponent, InputSelectNumberComponent, InputTextfieldComponent, LinearProgressBarComponent, LoadingCircleComponent, MenuItemComponent, NavRailComponent, OptionComponent, PopoverDirective, SearchBarComponent, SectionCollapseDrawerChildComponent, SectionCollapseDrawerParentComponent, SimpleDividerComponent, SlideToggleComponent, SnackbarComponent, ToolbarComponent, ToolbarUserMenuComponent };
|
|
3827
3969
|
//# sourceMappingURL=litigiovirtual-ius-design-components.mjs.map
|