@litigiovirtual/ius-design-components 1.0.73 → 1.0.75
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 +1 -1
- package/esm2022/lib/charts-bar-grouped/charts-bar-grouped.component.mjs +234 -0
- package/esm2022/lib/charts-bar-grouped/index.mjs +2 -0
- package/esm2022/lib/charts-donut/charts-donut.component.mjs +3 -3
- package/esm2022/lib/input-select/input-select.component.mjs +11 -3
- package/esm2022/lib/input-textfield/input-textfield.component.mjs +11 -3
- package/esm2022/lib/search-bar/search-bar.component.mjs +11 -3
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/litigiovirtual-ius-design-components.mjs +264 -10
- package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
- package/lib/button-dynamic/button-dynamic.component.d.ts +1 -1
- package/lib/charts-bar-grouped/charts-bar-grouped.component.d.ts +94 -0
- package/lib/charts-bar-grouped/index.d.ts +1 -0
- package/lib/input-select/input-select.component.d.ts +2 -0
- package/lib/input-textfield/input-textfield.component.d.ts +2 -0
- package/lib/search-bar/search-bar.component.d.ts +2 -0
- 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, signal, computed } from '@angular/core';
|
|
2
|
+
import { Input, Component, EventEmitter, Output, HostListener, ViewChildren, HostBinding, inject, ViewContainerRef, ElementRef, Directive, signal, computed, ViewChild } 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';
|
|
@@ -2298,12 +2298,20 @@ class SearchBarComponent {
|
|
|
2298
2298
|
this.textInput = '';
|
|
2299
2299
|
this.onChangesValueEvent.emit(this.textInput);
|
|
2300
2300
|
}
|
|
2301
|
+
onDropBlock(event) {
|
|
2302
|
+
// Evita que se dropee contenido en el input
|
|
2303
|
+
event.preventDefault();
|
|
2304
|
+
}
|
|
2305
|
+
onDragOverBlock(event) {
|
|
2306
|
+
// Evita que se permita arrastrar texto sobre el input
|
|
2307
|
+
event.preventDefault();
|
|
2308
|
+
}
|
|
2301
2309
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2302
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SearchBarComponent, isStandalone: true, selector: "ius-search-bar", inputs: { labelInput: "labelInput", disabled: "disabled", initialText: "initialText", showSearchIcon: "showSearchIcon" }, outputs: { onChangesValueEvent: "onChangesValueEvent", enterSearchEvent: "enterSearchEvent" }, ngImport: i0, template: "<div class=\"container-general\">\r\n <div class=\"container-search\" [ngClass]=\"{\r\n 'disabled': disabled,\r\n 'focused': isFocused\r\n }\">\r\n <div class=\"container-input\">\r\n <input type=\"text\" [(ngModel)]=\"textInput\" [disabled]=\"disabled\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n (input)=\"onInput()\" (keyup.enter)=\"performSearch($event)\">\r\n @if (textInput === '') {\r\n <label class=\"input-label\">{{labelInput}}</label>\r\n }\r\n\r\n @if (!disabled && textInput) {\r\n <button class=\"button-delete\" (click)=\"clearSearch()\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\r\n </button>\r\n }\r\n\r\n </div>\r\n @if (showSearchIcon) {\r\n <div class=\"container-icon\">\r\n <ius-icon-md iconName=\"icon-search\" class=\"icon-color\"></ius-icon-md>\r\n </div>\r\n }\r\n </div>\r\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-search{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px;color:#8c8c8c;display:flex;height:44px;padding:0 8px 0 24px;align-items:center;gap:12px;border-radius:14px;border:1px solid #f5f5f5;background:#f5f5f5}.container-search:hover:not(.disabled):not(.focused){background:#f0f0f0}.container-search.focused{border:1px solid #eaeaea;background:#fff}.container-search.focused .icon-color{color:#0581bc}.container-search.disabled{background:#fafafa;color:#bfbfbf}.container-search.disabled .icon-color{color:#bfbfbf}.container-icon{display:flex;padding:0 12px;align-items:center;align-self:stretch}.icon-color{color:#595959}.container-input{display:flex;flex:1;min-width:120px;padding:12px 0;align-items:center;gap:8px;position:relative}input{border:none;outline:none;background-color:transparent;width:100%;font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.button-delete{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;color:#595959}.button-delete:hover{color:#013169}.input-label{position:absolute;left:0;pointer-events:none}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] }); }
|
|
2310
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SearchBarComponent, isStandalone: true, selector: "ius-search-bar", inputs: { labelInput: "labelInput", disabled: "disabled", initialText: "initialText", showSearchIcon: "showSearchIcon" }, outputs: { onChangesValueEvent: "onChangesValueEvent", enterSearchEvent: "enterSearchEvent" }, ngImport: i0, template: "<div class=\"container-general\">\r\n <div class=\"container-search\" [ngClass]=\"{\r\n 'disabled': disabled,\r\n 'focused': isFocused\r\n }\">\r\n <div class=\"container-input\">\r\n <input type=\"text\" [(ngModel)]=\"textInput\" [disabled]=\"disabled\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n (input)=\"onInput()\" (keyup.enter)=\"performSearch($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n @if (textInput === '') {\r\n <label class=\"input-label\">{{labelInput}}</label>\r\n }\r\n\r\n @if (!disabled && textInput) {\r\n <button class=\"button-delete\" (click)=\"clearSearch()\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\r\n </button>\r\n }\r\n\r\n </div>\r\n @if (showSearchIcon) {\r\n <div class=\"container-icon\">\r\n <ius-icon-md iconName=\"icon-search\" class=\"icon-color\"></ius-icon-md>\r\n </div>\r\n }\r\n </div>\r\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-search{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px;color:#8c8c8c;display:flex;height:44px;padding:0 8px 0 24px;align-items:center;gap:12px;border-radius:14px;border:1px solid #f5f5f5;background:#f5f5f5}.container-search:hover:not(.disabled):not(.focused){background:#f0f0f0}.container-search.focused{border:1px solid #eaeaea;background:#fff}.container-search.focused .icon-color{color:#0581bc}.container-search.disabled{background:#fafafa;color:#bfbfbf}.container-search.disabled .icon-color{color:#bfbfbf}.container-icon{display:flex;padding:0 12px;align-items:center;align-self:stretch}.icon-color{color:#595959}.container-input{display:flex;flex:1;min-width:120px;padding:12px 0;align-items:center;gap:8px;position:relative}input{border:none;outline:none;background-color:transparent;width:100%;font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.button-delete{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;color:#595959}.button-delete:hover{color:#013169}.input-label{position:absolute;left:0;pointer-events:none}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] }); }
|
|
2303
2311
|
}
|
|
2304
2312
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchBarComponent, decorators: [{
|
|
2305
2313
|
type: Component,
|
|
2306
|
-
args: [{ selector: 'ius-search-bar', standalone: true, imports: [IconMdComponent, CommonModule, FormsModule], template: "<div class=\"container-general\">\r\n <div class=\"container-search\" [ngClass]=\"{\r\n 'disabled': disabled,\r\n 'focused': isFocused\r\n }\">\r\n <div class=\"container-input\">\r\n <input type=\"text\" [(ngModel)]=\"textInput\" [disabled]=\"disabled\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n (input)=\"onInput()\" (keyup.enter)=\"performSearch($event)\">\r\n @if (textInput === '') {\r\n <label class=\"input-label\">{{labelInput}}</label>\r\n }\r\n\r\n @if (!disabled && textInput) {\r\n <button class=\"button-delete\" (click)=\"clearSearch()\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\r\n </button>\r\n }\r\n\r\n </div>\r\n @if (showSearchIcon) {\r\n <div class=\"container-icon\">\r\n <ius-icon-md iconName=\"icon-search\" class=\"icon-color\"></ius-icon-md>\r\n </div>\r\n }\r\n </div>\r\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-search{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px;color:#8c8c8c;display:flex;height:44px;padding:0 8px 0 24px;align-items:center;gap:12px;border-radius:14px;border:1px solid #f5f5f5;background:#f5f5f5}.container-search:hover:not(.disabled):not(.focused){background:#f0f0f0}.container-search.focused{border:1px solid #eaeaea;background:#fff}.container-search.focused .icon-color{color:#0581bc}.container-search.disabled{background:#fafafa;color:#bfbfbf}.container-search.disabled .icon-color{color:#bfbfbf}.container-icon{display:flex;padding:0 12px;align-items:center;align-self:stretch}.icon-color{color:#595959}.container-input{display:flex;flex:1;min-width:120px;padding:12px 0;align-items:center;gap:8px;position:relative}input{border:none;outline:none;background-color:transparent;width:100%;font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.button-delete{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;color:#595959}.button-delete:hover{color:#013169}.input-label{position:absolute;left:0;pointer-events:none}\n"] }]
|
|
2314
|
+
args: [{ selector: 'ius-search-bar', standalone: true, imports: [IconMdComponent, CommonModule, FormsModule], template: "<div class=\"container-general\">\r\n <div class=\"container-search\" [ngClass]=\"{\r\n 'disabled': disabled,\r\n 'focused': isFocused\r\n }\">\r\n <div class=\"container-input\">\r\n <input type=\"text\" [(ngModel)]=\"textInput\" [disabled]=\"disabled\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n (input)=\"onInput()\" (keyup.enter)=\"performSearch($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n @if (textInput === '') {\r\n <label class=\"input-label\">{{labelInput}}</label>\r\n }\r\n\r\n @if (!disabled && textInput) {\r\n <button class=\"button-delete\" (click)=\"clearSearch()\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\r\n </button>\r\n }\r\n\r\n </div>\r\n @if (showSearchIcon) {\r\n <div class=\"container-icon\">\r\n <ius-icon-md iconName=\"icon-search\" class=\"icon-color\"></ius-icon-md>\r\n </div>\r\n }\r\n </div>\r\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-search{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px;color:#8c8c8c;display:flex;height:44px;padding:0 8px 0 24px;align-items:center;gap:12px;border-radius:14px;border:1px solid #f5f5f5;background:#f5f5f5}.container-search:hover:not(.disabled):not(.focused){background:#f0f0f0}.container-search.focused{border:1px solid #eaeaea;background:#fff}.container-search.focused .icon-color{color:#0581bc}.container-search.disabled{background:#fafafa;color:#bfbfbf}.container-search.disabled .icon-color{color:#bfbfbf}.container-icon{display:flex;padding:0 12px;align-items:center;align-self:stretch}.icon-color{color:#595959}.container-input{display:flex;flex:1;min-width:120px;padding:12px 0;align-items:center;gap:8px;position:relative}input{border:none;outline:none;background-color:transparent;width:100%;font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.button-delete{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;color:#595959}.button-delete:hover{color:#013169}.input-label{position:absolute;left:0;pointer-events:none}\n"] }]
|
|
2307
2315
|
}], propDecorators: { labelInput: [{
|
|
2308
2316
|
type: Input
|
|
2309
2317
|
}], disabled: [{
|
|
@@ -2370,12 +2378,20 @@ class InputTextfieldComponent {
|
|
|
2370
2378
|
this.textInput = '';
|
|
2371
2379
|
}
|
|
2372
2380
|
}
|
|
2381
|
+
onDropBlock(event) {
|
|
2382
|
+
// Evita que se dropee contenido en el input
|
|
2383
|
+
event.preventDefault();
|
|
2384
|
+
}
|
|
2385
|
+
onDragOverBlock(event) {
|
|
2386
|
+
// Evita que se permita arrastrar texto sobre el input
|
|
2387
|
+
event.preventDefault();
|
|
2388
|
+
}
|
|
2373
2389
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputTextfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2374
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputTextfieldComponent, isStandalone: true, selector: "ius-input-textfield", inputs: { textInput: "textInput", required: "required", disabled: "disabled", isEnableClearText: "isEnableClearText", showHelpText: "showHelpText", labelSuperior: "labelSuperior", labelInferior: "labelInferior", labelInput: "labelInput", iconInput: "iconInput", inputType: "inputType", initialText: "initialText" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onAddText: "onAddText" }, ngImport: i0, template: "<div class=\"container-general\">\r\n @if (labelSuperior) {\r\n <div class=\"container-label-sup\" [ngClass]=\"{\r\n 'disabled': disabled\r\n }\">\r\n @if(!disabled && required){\r\n <div class=\"icon-dot\"></div>\r\n }\r\n <span class=\"\">{{labelSuperior}}</span>\r\n @if(!disabled && showHelpText){\r\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\r\n }\r\n <span>:</span>\r\n </div>\r\n }\r\n <div class=\"container-textfield\" [ngClass]=\"{\r\n 'disabled': disabled,\r\n 'focused': isFocused,\r\n 'alert': !isFocused && isAlertText && !disabled\r\n }\">\r\n @if (iconInput) {\r\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\r\n }\r\n <input [type]=\"inputType\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\r\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($event)\">\r\n @if (!disabled && textInput && isEnableClearText) {\r\n <button class=\"button-delete\" (click)=\"clearSearch()\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\r\n </button>\r\n }\r\n </div>\r\n @if (labelInferior && isFocused) {\r\n <span class=\"label-inf\">{{labelInferior}}</span>\r\n }\r\n @if (labelInferior && !isFocused && isAlertText) {\r\n <span class=\"label-inf\" [ngClass]=\"{\r\n 'alert': !isFocused && isAlertText && !disabled\r\n }\">{{labelInferior}}</span>\r\n }\r\n\r\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;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;transition:all .2s ease-in-out}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled .icon-color{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.icon-color{color:#595959}.icon-color-cancel{color:#013169}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}.button-delete{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;color:#595959}.button-delete:hover{color:#013169}.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}\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"] }] }); }
|
|
2390
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputTextfieldComponent, isStandalone: true, selector: "ius-input-textfield", inputs: { textInput: "textInput", required: "required", disabled: "disabled", isEnableClearText: "isEnableClearText", showHelpText: "showHelpText", labelSuperior: "labelSuperior", labelInferior: "labelInferior", labelInput: "labelInput", iconInput: "iconInput", inputType: "inputType", initialText: "initialText" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onAddText: "onAddText" }, ngImport: i0, template: "<div class=\"container-general\">\r\n @if (labelSuperior) {\r\n <div class=\"container-label-sup\" [ngClass]=\"{\r\n 'disabled': disabled\r\n }\">\r\n @if(!disabled && required){\r\n <div class=\"icon-dot\"></div>\r\n }\r\n <span class=\"\">{{labelSuperior}}</span>\r\n @if(!disabled && showHelpText){\r\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\r\n }\r\n <span>:</span>\r\n </div>\r\n }\r\n <div class=\"container-textfield\" [ngClass]=\"{\r\n 'disabled': disabled,\r\n 'focused': isFocused,\r\n 'alert': !isFocused && isAlertText && !disabled\r\n }\">\r\n @if (iconInput) {\r\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\r\n }\r\n <input [type]=\"inputType\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\r\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n @if (!disabled && textInput && isEnableClearText) {\r\n <button class=\"button-delete\" (click)=\"clearSearch()\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\r\n </button>\r\n }\r\n </div>\r\n @if (labelInferior && isFocused) {\r\n <span class=\"label-inf\">{{labelInferior}}</span>\r\n }\r\n @if (labelInferior && !isFocused && isAlertText) {\r\n <span class=\"label-inf\" [ngClass]=\"{\r\n 'alert': !isFocused && isAlertText && !disabled\r\n }\">{{labelInferior}}</span>\r\n }\r\n\r\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;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;transition:all .2s ease-in-out}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled .icon-color{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.icon-color{color:#595959}.icon-color-cancel{color:#013169}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}.button-delete{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;color:#595959}.button-delete:hover{color:#013169}.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}\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"] }] }); }
|
|
2375
2391
|
}
|
|
2376
2392
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputTextfieldComponent, decorators: [{
|
|
2377
2393
|
type: Component,
|
|
2378
|
-
args: [{ selector: 'ius-input-textfield', standalone: true, imports: [IconMdComponent, FormsModule, CommonModule], template: "<div class=\"container-general\">\r\n @if (labelSuperior) {\r\n <div class=\"container-label-sup\" [ngClass]=\"{\r\n 'disabled': disabled\r\n }\">\r\n @if(!disabled && required){\r\n <div class=\"icon-dot\"></div>\r\n }\r\n <span class=\"\">{{labelSuperior}}</span>\r\n @if(!disabled && showHelpText){\r\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\r\n }\r\n <span>:</span>\r\n </div>\r\n }\r\n <div class=\"container-textfield\" [ngClass]=\"{\r\n 'disabled': disabled,\r\n 'focused': isFocused,\r\n 'alert': !isFocused && isAlertText && !disabled\r\n }\">\r\n @if (iconInput) {\r\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\r\n }\r\n <input [type]=\"inputType\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\r\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($event)\">\r\n @if (!disabled && textInput && isEnableClearText) {\r\n <button class=\"button-delete\" (click)=\"clearSearch()\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\r\n </button>\r\n }\r\n </div>\r\n @if (labelInferior && isFocused) {\r\n <span class=\"label-inf\">{{labelInferior}}</span>\r\n }\r\n @if (labelInferior && !isFocused && isAlertText) {\r\n <span class=\"label-inf\" [ngClass]=\"{\r\n 'alert': !isFocused && isAlertText && !disabled\r\n }\">{{labelInferior}}</span>\r\n }\r\n\r\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;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;transition:all .2s ease-in-out}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled .icon-color{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.icon-color{color:#595959}.icon-color-cancel{color:#013169}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}.button-delete{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;color:#595959}.button-delete:hover{color:#013169}.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}\n"] }]
|
|
2394
|
+
args: [{ selector: 'ius-input-textfield', standalone: true, imports: [IconMdComponent, FormsModule, CommonModule], template: "<div class=\"container-general\">\r\n @if (labelSuperior) {\r\n <div class=\"container-label-sup\" [ngClass]=\"{\r\n 'disabled': disabled\r\n }\">\r\n @if(!disabled && required){\r\n <div class=\"icon-dot\"></div>\r\n }\r\n <span class=\"\">{{labelSuperior}}</span>\r\n @if(!disabled && showHelpText){\r\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\r\n }\r\n <span>:</span>\r\n </div>\r\n }\r\n <div class=\"container-textfield\" [ngClass]=\"{\r\n 'disabled': disabled,\r\n 'focused': isFocused,\r\n 'alert': !isFocused && isAlertText && !disabled\r\n }\">\r\n @if (iconInput) {\r\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\r\n }\r\n <input [type]=\"inputType\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\r\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n @if (!disabled && textInput && isEnableClearText) {\r\n <button class=\"button-delete\" (click)=\"clearSearch()\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\r\n </button>\r\n }\r\n </div>\r\n @if (labelInferior && isFocused) {\r\n <span class=\"label-inf\">{{labelInferior}}</span>\r\n }\r\n @if (labelInferior && !isFocused && isAlertText) {\r\n <span class=\"label-inf\" [ngClass]=\"{\r\n 'alert': !isFocused && isAlertText && !disabled\r\n }\">{{labelInferior}}</span>\r\n }\r\n\r\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;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;transition:all .2s ease-in-out}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled .icon-color{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.icon-color{color:#595959}.icon-color-cancel{color:#013169}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}.button-delete{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;color:#595959}.button-delete:hover{color:#013169}.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}\n"] }]
|
|
2379
2395
|
}], propDecorators: { textInput: [{
|
|
2380
2396
|
type: Input
|
|
2381
2397
|
}], required: [{
|
|
@@ -2485,12 +2501,20 @@ class InputSelectComponent {
|
|
|
2485
2501
|
this.showList = false;
|
|
2486
2502
|
this.isAlertText = false;
|
|
2487
2503
|
}
|
|
2504
|
+
onDropBlock(event) {
|
|
2505
|
+
// Evita que se dropee contenido en el input
|
|
2506
|
+
event.preventDefault();
|
|
2507
|
+
}
|
|
2508
|
+
onDragOverBlock(event) {
|
|
2509
|
+
// Evita que se permita arrastrar texto sobre el input
|
|
2510
|
+
event.preventDefault();
|
|
2511
|
+
}
|
|
2488
2512
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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"] }] }); }
|
|
2513
|
+
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)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($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"] }] }); }
|
|
2490
2514
|
}
|
|
2491
2515
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectComponent, decorators: [{
|
|
2492
2516
|
type: Component,
|
|
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"] }]
|
|
2517
|
+
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)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($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"] }]
|
|
2494
2518
|
}], propDecorators: { componentId: [{
|
|
2495
2519
|
type: Input,
|
|
2496
2520
|
args: [{ required: true }]
|
|
@@ -3936,11 +3960,11 @@ class ChartsDonutComponent {
|
|
|
3936
3960
|
return `Gráfica de dona. Total ${this.total()}. ${parts.join('. ')}`;
|
|
3937
3961
|
}
|
|
3938
3962
|
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"] }] }); }
|
|
3963
|
+
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;justify-content:center;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
3964
|
}
|
|
3941
3965
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChartsDonutComponent, decorators: [{
|
|
3942
3966
|
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"] }]
|
|
3967
|
+
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;justify-content:center;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
3968
|
}], propDecorators: { data: [{
|
|
3945
3969
|
type: Input
|
|
3946
3970
|
}], size: [{
|
|
@@ -3961,9 +3985,239 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3961
3985
|
type: Output
|
|
3962
3986
|
}] } });
|
|
3963
3987
|
|
|
3988
|
+
class IusChartsBarGroupedComponent {
|
|
3989
|
+
constructor(zone) {
|
|
3990
|
+
this.zone = zone;
|
|
3991
|
+
this.data = [];
|
|
3992
|
+
this.legendPosition = 'bottom';
|
|
3993
|
+
// Márgenes (left = ancho panel eje Y)
|
|
3994
|
+
this.margin = { top: 24, right: 16, bottom: 34, left: 40 };
|
|
3995
|
+
// Layout X fijo
|
|
3996
|
+
this.barWidth = 11;
|
|
3997
|
+
this.barGap = 2;
|
|
3998
|
+
this.groupGap = 40;
|
|
3999
|
+
this.outerGap = 18;
|
|
4000
|
+
// Estilo barra
|
|
4001
|
+
this.barRadius = 5;
|
|
4002
|
+
this.ticks = 5;
|
|
4003
|
+
// Fallbacks si no hay tamaño CSS externo
|
|
4004
|
+
this.width = 640;
|
|
4005
|
+
this.size = 320;
|
|
4006
|
+
this.maxLabelChars = 10;
|
|
4007
|
+
this.barClick = new EventEmitter();
|
|
4008
|
+
// Estado
|
|
4009
|
+
this._bars = signal([]);
|
|
4010
|
+
this._groups = signal([]);
|
|
4011
|
+
this._series = signal([]);
|
|
4012
|
+
this._colors = signal({});
|
|
4013
|
+
this._yMax = signal(0);
|
|
4014
|
+
this._paneH = signal(0); // alto real del panel superior
|
|
4015
|
+
this._plotW = signal(0); // ancho visible del plot
|
|
4016
|
+
this._plotWidth = signal(0); // ancho virtual del SVG derecho
|
|
4017
|
+
this._groupCenters = signal([]);
|
|
4018
|
+
this._barStripes = signal([]);
|
|
4019
|
+
this.bars = computed(() => this._bars());
|
|
4020
|
+
this.groups = computed(() => this._groups());
|
|
4021
|
+
this.series = computed(() => this._series());
|
|
4022
|
+
this.colors = computed(() => this._colors());
|
|
4023
|
+
this.yScaleMax = computed(() => this._yMax());
|
|
4024
|
+
this.chartHeight = computed(() => this._paneH() || this.size); // ← altura para ambos SVG
|
|
4025
|
+
this.plotWidth = computed(() => this._plotWidth());
|
|
4026
|
+
this.groupCenters = computed(() => this._groupCenters());
|
|
4027
|
+
this.barStripes = computed(() => this._barStripes());
|
|
4028
|
+
this.innerHeight = computed(() => Math.max(this.chartHeight() - this.margin.top - this.margin.bottom, 0));
|
|
4029
|
+
// viewBox por SVG
|
|
4030
|
+
this.axisViewBox = computed(() => `0 0 ${this.margin.left} ${this.chartHeight()}`);
|
|
4031
|
+
this.plotViewBox = computed(() => `0 0 ${this.plotWidth()} ${this.chartHeight()}`);
|
|
4032
|
+
this.Math = Math;
|
|
4033
|
+
}
|
|
4034
|
+
ngAfterViewInit() {
|
|
4035
|
+
// Medición inicial SIN esperar al primer tick del RO
|
|
4036
|
+
this.measureNow();
|
|
4037
|
+
// Observa alto (panes) y ancho visible (plotCtn)
|
|
4038
|
+
this.ro = new ResizeObserver(() => {
|
|
4039
|
+
this.zone.run(() => {
|
|
4040
|
+
const changed = this.measureNow();
|
|
4041
|
+
if (changed)
|
|
4042
|
+
this.recalc();
|
|
4043
|
+
});
|
|
4044
|
+
});
|
|
4045
|
+
this.ro.observe(this.panesRef.nativeElement);
|
|
4046
|
+
this.ro.observe(this.plotCtn.nativeElement);
|
|
4047
|
+
// Primer cálculo
|
|
4048
|
+
this.recalc();
|
|
4049
|
+
}
|
|
4050
|
+
ngOnDestroy() { this.ro?.disconnect(); }
|
|
4051
|
+
ngOnChanges() { this.recalc(); }
|
|
4052
|
+
// Devuelve true si cambió algo.
|
|
4053
|
+
measureNow() {
|
|
4054
|
+
const paneH = Math.floor(this.panesRef?.nativeElement?.clientHeight || 0);
|
|
4055
|
+
const plotW = Math.floor(this.plotCtn?.nativeElement?.clientWidth || 0);
|
|
4056
|
+
let changed = false;
|
|
4057
|
+
if (paneH && paneH !== this._paneH()) {
|
|
4058
|
+
this._paneH.set(paneH);
|
|
4059
|
+
changed = true;
|
|
4060
|
+
}
|
|
4061
|
+
if (plotW && plotW !== this._plotW()) {
|
|
4062
|
+
this._plotW.set(plotW);
|
|
4063
|
+
changed = true;
|
|
4064
|
+
}
|
|
4065
|
+
// Si no hay valores aún (por render temprano), usa fallbacks para no quedarte en 0
|
|
4066
|
+
if (!this._paneH()) {
|
|
4067
|
+
this._paneH.set(this.size);
|
|
4068
|
+
changed = true;
|
|
4069
|
+
}
|
|
4070
|
+
if (!this._plotW()) {
|
|
4071
|
+
this._plotW.set(this.width - this.margin.left);
|
|
4072
|
+
changed = true;
|
|
4073
|
+
}
|
|
4074
|
+
return changed;
|
|
4075
|
+
}
|
|
4076
|
+
recalc() {
|
|
4077
|
+
const cleaned = (this.data ?? []).map(g => ({
|
|
4078
|
+
label: g.label,
|
|
4079
|
+
items: (g.items ?? []).filter(i => Number(i?.value) >= 0)
|
|
4080
|
+
})).filter(x => x.items.length > 0);
|
|
4081
|
+
const groups = cleaned.map(g => g.label);
|
|
4082
|
+
// series + orden
|
|
4083
|
+
const seriesSet = new Set();
|
|
4084
|
+
for (const g of cleaned)
|
|
4085
|
+
for (const it of g.items)
|
|
4086
|
+
seriesSet.add(it.label);
|
|
4087
|
+
let series = Array.from(seriesSet);
|
|
4088
|
+
if (this.seriesOrder?.length) {
|
|
4089
|
+
const order = new Map(this.seriesOrder.map((k, idx) => [k, idx]));
|
|
4090
|
+
series.sort((a, b) => (order.get(a) ?? 1e9) - (order.get(b) ?? 1e9));
|
|
4091
|
+
}
|
|
4092
|
+
// colores por serie
|
|
4093
|
+
const palette = [
|
|
4094
|
+
'#2167FF', // Info-500
|
|
4095
|
+
'#0A2893', // Info-800
|
|
4096
|
+
'#40CAE9', // Primary-400
|
|
4097
|
+
'#5892FF', // Info-400
|
|
4098
|
+
'#08A6DB', // Primary-500
|
|
4099
|
+
'#C4DFFF', // Info-200
|
|
4100
|
+
];
|
|
4101
|
+
const colorMap = {};
|
|
4102
|
+
series.forEach((s, i) => colorMap[s] = palette[i % palette.length]);
|
|
4103
|
+
// normalizar
|
|
4104
|
+
const normalized = cleaned.map(g => {
|
|
4105
|
+
const map = new Map(g.items.map(i => [i.label, i]));
|
|
4106
|
+
const items = series.map(s => {
|
|
4107
|
+
const i = map.get(s);
|
|
4108
|
+
return { label: s, value: i?.value ?? 0, color: i?.color ?? colorMap[s] };
|
|
4109
|
+
});
|
|
4110
|
+
return { label: g.label, items };
|
|
4111
|
+
});
|
|
4112
|
+
// Y máx
|
|
4113
|
+
const maxValue = Math.max(0, ...normalized.flatMap(g => g.items.map(i => i.value)));
|
|
4114
|
+
const yMax = this.yMax && this.yMax > 0 ? this.yMax : this.niceMax(maxValue);
|
|
4115
|
+
this._yMax.set(yMax);
|
|
4116
|
+
// dimensiones visibles del panel derecho
|
|
4117
|
+
const visibleW = this._plotW() || (this.width - this.margin.left);
|
|
4118
|
+
// ===== Layout X con outerGap =====
|
|
4119
|
+
const G = normalized.length;
|
|
4120
|
+
const S = series.length;
|
|
4121
|
+
const groupInnerWidth = S * this.barWidth + Math.max(0, S - 1) * this.barGap;
|
|
4122
|
+
const innerNaturalWidth = Math.max(0, (this.outerGap * 2) + G * groupInnerWidth + Math.max(0, G - 1) * this.groupGap);
|
|
4123
|
+
const innerVisibleWidth = Math.max(visibleW - this.margin.right, 0);
|
|
4124
|
+
const innerVirtualWidth = Math.max(innerVisibleWidth, innerNaturalWidth);
|
|
4125
|
+
const plotWidth = innerVirtualWidth + this.margin.right; // solo margen derecho en el SVG derecho
|
|
4126
|
+
this._plotWidth.set(plotWidth);
|
|
4127
|
+
// rects + franjas
|
|
4128
|
+
const ih = this.innerHeight();
|
|
4129
|
+
const bars = [];
|
|
4130
|
+
const centers = [];
|
|
4131
|
+
const stripes = [];
|
|
4132
|
+
let cursor = this.outerGap;
|
|
4133
|
+
normalized.forEach(g => {
|
|
4134
|
+
const startX = cursor;
|
|
4135
|
+
const center = startX + groupInnerWidth / 2;
|
|
4136
|
+
centers.push(center);
|
|
4137
|
+
g.items.forEach((it, si) => {
|
|
4138
|
+
const x = startX + si * (this.barWidth + this.barGap);
|
|
4139
|
+
// franja por barra
|
|
4140
|
+
stripes.push({ x, width: this.barWidth });
|
|
4141
|
+
const h = it.value <= 0 ? 0 : (it.value / yMax) * ih;
|
|
4142
|
+
const y = this.margin.top + ih - h;
|
|
4143
|
+
bars.push({
|
|
4144
|
+
groupLabel: g.label,
|
|
4145
|
+
seriesLabel: it.label,
|
|
4146
|
+
value: it.value,
|
|
4147
|
+
x, y,
|
|
4148
|
+
width: this.barWidth,
|
|
4149
|
+
height: h,
|
|
4150
|
+
color: it.color ?? colorMap[it.label]
|
|
4151
|
+
});
|
|
4152
|
+
});
|
|
4153
|
+
cursor += groupInnerWidth + this.groupGap;
|
|
4154
|
+
});
|
|
4155
|
+
this._bars.set(bars);
|
|
4156
|
+
this._groups.set(groups);
|
|
4157
|
+
this._series.set(series);
|
|
4158
|
+
this._colors.set(colorMap);
|
|
4159
|
+
this._groupCenters.set(centers);
|
|
4160
|
+
this._barStripes.set(stripes);
|
|
4161
|
+
}
|
|
4162
|
+
niceMax(maxVal) {
|
|
4163
|
+
if (maxVal <= 0)
|
|
4164
|
+
return 1;
|
|
4165
|
+
const exp = Math.floor(Math.log10(maxVal));
|
|
4166
|
+
const base = Math.pow(10, exp);
|
|
4167
|
+
const n = Math.ceil(maxVal / base);
|
|
4168
|
+
const nice = n <= 2 ? 2 : n <= 5 ? 5 : 10;
|
|
4169
|
+
return nice * base;
|
|
4170
|
+
}
|
|
4171
|
+
getY(value) {
|
|
4172
|
+
const ih = this.innerHeight();
|
|
4173
|
+
const max = this.yScaleMax();
|
|
4174
|
+
return this.margin.top + ih - (value / max) * ih;
|
|
4175
|
+
}
|
|
4176
|
+
get yTicksArr() {
|
|
4177
|
+
const max = this.yScaleMax();
|
|
4178
|
+
const n = Math.max(2, this.ticks | 0);
|
|
4179
|
+
const step = max / n;
|
|
4180
|
+
const arr = [];
|
|
4181
|
+
for (let i = 0; i <= n; i++)
|
|
4182
|
+
arr.push(+((i * step)).toFixed(2));
|
|
4183
|
+
return arr;
|
|
4184
|
+
}
|
|
4185
|
+
shortLabel(lbl) {
|
|
4186
|
+
return lbl.length > this.maxLabelChars ? (lbl.slice(0, this.maxLabelChars - 1) + '…') : lbl;
|
|
4187
|
+
}
|
|
4188
|
+
formatTooltip(b) {
|
|
4189
|
+
return `${b.groupLabel} — ${b.seriesLabel}: ${b.value}`;
|
|
4190
|
+
}
|
|
4191
|
+
onBarClick(b) {
|
|
4192
|
+
this.barClick.emit({ group: b.groupLabel, series: b.seriesLabel, value: b.value });
|
|
4193
|
+
}
|
|
4194
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IusChartsBarGroupedComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4195
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: IusChartsBarGroupedComponent, isStandalone: true, selector: "ius-charts-bar-grouped", inputs: { data: "data", legendPosition: "legendPosition", seriesOrder: "seriesOrder", maxLabelChars: "maxLabelChars" }, outputs: { barClick: "barClick" }, viewQueries: [{ propertyName: "panesRef", first: true, predicate: ["panes"], descendants: true, static: true }, { propertyName: "plotCtn", first: true, predicate: ["plotCtn"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-wrapper\" [class.bottom]=\"legendPosition === 'bottom'\">\r\n <div class=\"panes\" #panes>\r\n <div class=\"axis-ctn\">\r\n <svg class=\"chart-axis\"\r\n [attr.viewBox]=\"axisViewBox()\"\r\n preserveAspectRatio=\"xMinYMin meet\"\r\n [style.width.px]=\"margin.left\"\r\n [style.height.px]=\"chartHeight()\">\r\n @for (t of yTicksArr; track t) {\r\n <text class=\"y-tick body-sm\"\r\n [attr.x]=\"margin.left - 6\"\r\n [attr.y]=\"getY(t)\"\r\n text-anchor=\"end\"\r\n dominant-baseline=\"middle\">\r\n {{ t }}\r\n </text>\r\n }\r\n </svg>\r\n </div>\r\n\r\n <div class=\"plot-ctn scrollable-small\" #plotCtn>\r\n <svg class=\"chart\"\r\n [attr.viewBox]=\"plotViewBox()\"\r\n preserveAspectRatio=\"xMinYMin meet\"\r\n [style.width.px]=\"plotWidth()\"\r\n [style.height.px]=\"chartHeight()\">\r\n\r\n @for (s of barStripes(); track s.x) {\r\n <rect class=\"bar-stripe\"\r\n [attr.x]=\"s.x\"\r\n [attr.y]=\"margin.top\"\r\n [attr.width]=\"s.width\"\r\n [attr.height]=\"innerHeight()\"></rect>\r\n }\r\n\r\n @for (t of yTicksArr; track t) {\r\n <line class=\"grid-line\"\r\n [attr.x1]=\"0\"\r\n [attr.x2]=\"plotWidth() - margin.right\"\r\n [attr.y1]=\"getY(t)\" [attr.y2]=\"getY(t)\"/>\r\n }\r\n\r\n @for (g of groups(); track g; let i = $index) {\r\n <text class=\"x-label body-sm\"\r\n [attr.x]=\"groupCenters()[i]\"\r\n [attr.y]=\"chartHeight() - margin.bottom + 22\"\r\n text-anchor=\"middle\">\r\n {{ shortLabel(g) }} <title>{{ g }}</title>\r\n </text>\r\n }\r\n\r\n @for (b of bars(); track b.groupLabel + '_' + b.seriesLabel) {\r\n <rect class=\"bar\"\r\n [attr.x]=\"b.x\"\r\n [attr.y]=\"b.y\"\r\n [attr.width]=\"b.width\"\r\n [attr.height]=\"Math.max(b.height, 0)\"\r\n [attr.fill]=\"b.color\"\r\n [attr.rx]=\"barRadius\"\r\n [attr.ry]=\"barRadius\"\r\n [iusPopoverContent]=\"formatTooltip(b)\"\r\n (click)=\"onBarClick(b)\"/>\r\n }\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Leyenda -->\r\n <div class=\"legend\" [class.bottom]=\"legendPosition === 'bottom'\">\r\n @for (s of series(); track s) {\r\n <div class=\"legend-item\">\r\n <span class=\"dot\" [style.background]=\"colors()[s]\"></span>\r\n <span class=\"label caption-sm\">{{ s }}</span>\r\n </div>\r\n }\r\n </div>\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%;min-height:0}.chart-wrapper{display:grid;grid-template-columns:1fr auto;column-gap:16px;height:100%;min-height:0;align-items:start}.chart-wrapper.bottom{grid-template-columns:1fr;grid-template-rows:1fr auto;row-gap:12px}.panes{display:grid;grid-template-columns:auto 1fr;height:100%;min-height:0}.axis-ctn{height:100%;min-height:0;overflow:hidden}.plot-ctn{width:100%;height:100%;min-height:0;overflow-x:auto;overflow-y:hidden}.chart-wrapper,.panes,.axis-ctn,.plot-ctn{min-height:0}.chart,.chart-axis{display:block}.grid-line{stroke:#1f293729;stroke-width:1;stroke-dasharray:3 3}.y-tick,.x-label{fill:#000000b3}.bar-stripe{fill:#d6dbed66;pointer-events:none}.bar{cursor:pointer;transition:opacity .15s ease,transform .15s ease;pointer-events:all}.bar:hover{opacity:.9}.bar:focus{outline:none;filter:drop-shadow(0 0 2px rgba(0,0,0,.2))}.legend{display:flex;justify-content:center;flex-direction:column;gap:8px;min-width:0}.legend.bottom{flex-direction:row;flex-wrap:wrap}.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}.plot-ctn.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.plot-ctn.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.plot-ctn.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.plot-ctn.scrollable-small::-webkit-scrollbar-thumb{background-color:#bfbfbf;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: PopoverDirective, selector: "[iusPopover], [iusPopoverTitle], [iusPopoverContent]", inputs: ["iusPopover", "iusPopoverTitle", "iusPopoverContent", "iusPopoverPosition", "iusPopoverOpenDelay", "iusPopoverCloseDelay"] }] }); }
|
|
4196
|
+
}
|
|
4197
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IusChartsBarGroupedComponent, decorators: [{
|
|
4198
|
+
type: Component,
|
|
4199
|
+
args: [{ selector: 'ius-charts-bar-grouped', standalone: true, imports: [CommonModule, PopoverDirective], template: "<div class=\"chart-wrapper\" [class.bottom]=\"legendPosition === 'bottom'\">\r\n <div class=\"panes\" #panes>\r\n <div class=\"axis-ctn\">\r\n <svg class=\"chart-axis\"\r\n [attr.viewBox]=\"axisViewBox()\"\r\n preserveAspectRatio=\"xMinYMin meet\"\r\n [style.width.px]=\"margin.left\"\r\n [style.height.px]=\"chartHeight()\">\r\n @for (t of yTicksArr; track t) {\r\n <text class=\"y-tick body-sm\"\r\n [attr.x]=\"margin.left - 6\"\r\n [attr.y]=\"getY(t)\"\r\n text-anchor=\"end\"\r\n dominant-baseline=\"middle\">\r\n {{ t }}\r\n </text>\r\n }\r\n </svg>\r\n </div>\r\n\r\n <div class=\"plot-ctn scrollable-small\" #plotCtn>\r\n <svg class=\"chart\"\r\n [attr.viewBox]=\"plotViewBox()\"\r\n preserveAspectRatio=\"xMinYMin meet\"\r\n [style.width.px]=\"plotWidth()\"\r\n [style.height.px]=\"chartHeight()\">\r\n\r\n @for (s of barStripes(); track s.x) {\r\n <rect class=\"bar-stripe\"\r\n [attr.x]=\"s.x\"\r\n [attr.y]=\"margin.top\"\r\n [attr.width]=\"s.width\"\r\n [attr.height]=\"innerHeight()\"></rect>\r\n }\r\n\r\n @for (t of yTicksArr; track t) {\r\n <line class=\"grid-line\"\r\n [attr.x1]=\"0\"\r\n [attr.x2]=\"plotWidth() - margin.right\"\r\n [attr.y1]=\"getY(t)\" [attr.y2]=\"getY(t)\"/>\r\n }\r\n\r\n @for (g of groups(); track g; let i = $index) {\r\n <text class=\"x-label body-sm\"\r\n [attr.x]=\"groupCenters()[i]\"\r\n [attr.y]=\"chartHeight() - margin.bottom + 22\"\r\n text-anchor=\"middle\">\r\n {{ shortLabel(g) }} <title>{{ g }}</title>\r\n </text>\r\n }\r\n\r\n @for (b of bars(); track b.groupLabel + '_' + b.seriesLabel) {\r\n <rect class=\"bar\"\r\n [attr.x]=\"b.x\"\r\n [attr.y]=\"b.y\"\r\n [attr.width]=\"b.width\"\r\n [attr.height]=\"Math.max(b.height, 0)\"\r\n [attr.fill]=\"b.color\"\r\n [attr.rx]=\"barRadius\"\r\n [attr.ry]=\"barRadius\"\r\n [iusPopoverContent]=\"formatTooltip(b)\"\r\n (click)=\"onBarClick(b)\"/>\r\n }\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Leyenda -->\r\n <div class=\"legend\" [class.bottom]=\"legendPosition === 'bottom'\">\r\n @for (s of series(); track s) {\r\n <div class=\"legend-item\">\r\n <span class=\"dot\" [style.background]=\"colors()[s]\"></span>\r\n <span class=\"label caption-sm\">{{ s }}</span>\r\n </div>\r\n }\r\n </div>\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%;min-height:0}.chart-wrapper{display:grid;grid-template-columns:1fr auto;column-gap:16px;height:100%;min-height:0;align-items:start}.chart-wrapper.bottom{grid-template-columns:1fr;grid-template-rows:1fr auto;row-gap:12px}.panes{display:grid;grid-template-columns:auto 1fr;height:100%;min-height:0}.axis-ctn{height:100%;min-height:0;overflow:hidden}.plot-ctn{width:100%;height:100%;min-height:0;overflow-x:auto;overflow-y:hidden}.chart-wrapper,.panes,.axis-ctn,.plot-ctn{min-height:0}.chart,.chart-axis{display:block}.grid-line{stroke:#1f293729;stroke-width:1;stroke-dasharray:3 3}.y-tick,.x-label{fill:#000000b3}.bar-stripe{fill:#d6dbed66;pointer-events:none}.bar{cursor:pointer;transition:opacity .15s ease,transform .15s ease;pointer-events:all}.bar:hover{opacity:.9}.bar:focus{outline:none;filter:drop-shadow(0 0 2px rgba(0,0,0,.2))}.legend{display:flex;justify-content:center;flex-direction:column;gap:8px;min-width:0}.legend.bottom{flex-direction:row;flex-wrap:wrap}.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}.plot-ctn.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.plot-ctn.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.plot-ctn.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.plot-ctn.scrollable-small::-webkit-scrollbar-thumb{background-color:#bfbfbf;border-radius:4px}\n"] }]
|
|
4200
|
+
}], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { data: [{
|
|
4201
|
+
type: Input
|
|
4202
|
+
}], legendPosition: [{
|
|
4203
|
+
type: Input
|
|
4204
|
+
}], seriesOrder: [{
|
|
4205
|
+
type: Input
|
|
4206
|
+
}], maxLabelChars: [{
|
|
4207
|
+
type: Input
|
|
4208
|
+
}], barClick: [{
|
|
4209
|
+
type: Output
|
|
4210
|
+
}], panesRef: [{
|
|
4211
|
+
type: ViewChild,
|
|
4212
|
+
args: ['panes', { static: true }]
|
|
4213
|
+
}], plotCtn: [{
|
|
4214
|
+
type: ViewChild,
|
|
4215
|
+
args: ['plotCtn', { static: true }]
|
|
4216
|
+
}] } });
|
|
4217
|
+
|
|
3964
4218
|
/**
|
|
3965
4219
|
* Generated bundle index. Do not edit.
|
|
3966
4220
|
*/
|
|
3967
4221
|
|
|
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 };
|
|
4222
|
+
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, IusChartsBarGroupedComponent, LinearProgressBarComponent, LoadingCircleComponent, MenuItemComponent, NavRailComponent, OptionComponent, PopoverDirective, SearchBarComponent, SectionCollapseDrawerChildComponent, SectionCollapseDrawerParentComponent, SimpleDividerComponent, SlideToggleComponent, SnackbarComponent, ToolbarComponent, ToolbarUserMenuComponent };
|
|
3969
4223
|
//# sourceMappingURL=litigiovirtual-ius-design-components.mjs.map
|