@litigiovirtual/ius-design-components 1.0.280 → 1.0.282
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/add-user-container/add-user-container.component.mjs +3 -3
- package/esm2022/lib/button-standard-outline/button-standard-outline.component.mjs +3 -3
- package/esm2022/lib/button-standard-outline/index.mjs +1 -1
- package/esm2022/lib/card-actividad-evento/card-actividad-evento.component.mjs +3 -3
- package/esm2022/lib/card-etapa-subetapa/card-etapa-subetapa.component.mjs +3 -3
- package/esm2022/lib/card-impulso-procesal/card-impulso-procesal.component.mjs +3 -3
- package/esm2022/lib/card-vigilancia-judicial/card-vigilancia-judicial.component.mjs +3 -3
- package/esm2022/lib/create-ticket/create-ticket.component.mjs +3 -3
- package/esm2022/lib/create-ticket/index.mjs +1 -1
- package/esm2022/lib/date-hour-picker/date-hour-picker.component.mjs +75 -4
- package/esm2022/utils/currency-format.pipe.mjs +95 -0
- package/esm2022/utils/date-format.util.mjs +73 -0
- package/esm2022/utils/file-mime.util.mjs +22 -0
- package/esm2022/utils/file-size.util.mjs +11 -0
- package/esm2022/utils/formato-hora.pipe.mjs +44 -0
- package/esm2022/utils/litigiovirtual-ius-design-components-utils.mjs +5 -0
- package/esm2022/utils/public-api.mjs +15 -0
- package/fesm2022/litigiovirtual-ius-design-components-utils.mjs +260 -0
- package/fesm2022/litigiovirtual-ius-design-components-utils.mjs.map +1 -0
- package/fesm2022/litigiovirtual-ius-design-components.mjs +88 -17
- package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
- package/lib/date-hour-picker/date-hour-picker.component.d.ts +25 -1
- package/package.json +7 -1
- package/utils/currency-format.pipe.d.ts +29 -0
- package/utils/date-format.util.d.ts +20 -0
- package/utils/file-mime.util.d.ts +8 -0
- package/utils/file-size.util.d.ts +8 -0
- package/utils/formato-hora.pipe.d.ts +14 -0
- package/utils/index.d.ts +5 -0
- package/utils/public-api.d.ts +5 -0
|
@@ -1282,11 +1282,11 @@ class ButtonStandardOutlineComponent {
|
|
|
1282
1282
|
}
|
|
1283
1283
|
}
|
|
1284
1284
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonStandardOutlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1285
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ButtonStandardOutlineComponent, isStandalone: true, selector: "ius-button-standard-outline", inputs: { disabled: "disabled", iconName: "iconName" }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<button [disabled]=\"disabled\" (click)=\"onClick($event)\" class=\"ius-btn label-large\">\
|
|
1285
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ButtonStandardOutlineComponent, isStandalone: true, selector: "ius-button-standard-outline", inputs: { disabled: "disabled", iconName: "iconName" }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<button [disabled]=\"disabled\" (click)=\"onClick($event)\" class=\"ius-btn label-large\">\n @if(iconName){\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\n }\n <ng-content></ng-content>\n</button>", 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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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:inline-block}.icon-color{color:#7caf25}.ius-btn{width:100%;display:inline-flex;padding:8px 24px;justify-content:center;align-items:center;gap:4px;border-radius:14px;background:#fff;color:#7caf25;border:1px solid #7CAF25;cursor:pointer}.ius-btn:hover:not(:disabled){background:#f9ffe3;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ius-btn:active:not(:disabled){background:#7caf25;color:#fff}.ius-btn:active:not(:disabled) .icon-color{color:#fff}.ius-btn:disabled{border:1px solid #eaeaea;background:#f5f5f5;color:#bfbfbf;cursor:not-allowed}.ius-btn:disabled .icon-color{color:#bfbfbf}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }] }); }
|
|
1286
1286
|
}
|
|
1287
1287
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonStandardOutlineComponent, decorators: [{
|
|
1288
1288
|
type: Component,
|
|
1289
|
-
args: [{ selector: 'ius-button-standard-outline', standalone: true, imports: [IconMdComponent], template: "<button [disabled]=\"disabled\" (click)=\"onClick($event)\" class=\"ius-btn label-large\">\
|
|
1289
|
+
args: [{ selector: 'ius-button-standard-outline', standalone: true, imports: [IconMdComponent], template: "<button [disabled]=\"disabled\" (click)=\"onClick($event)\" class=\"ius-btn label-large\">\n @if(iconName){\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\n }\n <ng-content></ng-content>\n</button>", 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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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:inline-block}.icon-color{color:#7caf25}.ius-btn{width:100%;display:inline-flex;padding:8px 24px;justify-content:center;align-items:center;gap:4px;border-radius:14px;background:#fff;color:#7caf25;border:1px solid #7CAF25;cursor:pointer}.ius-btn:hover:not(:disabled){background:#f9ffe3;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ius-btn:active:not(:disabled){background:#7caf25;color:#fff}.ius-btn:active:not(:disabled) .icon-color{color:#fff}.ius-btn:disabled{border:1px solid #eaeaea;background:#f5f5f5;color:#bfbfbf;cursor:not-allowed}.ius-btn:disabled .icon-color{color:#bfbfbf}\n"] }]
|
|
1290
1290
|
}], propDecorators: { disabled: [{
|
|
1291
1291
|
type: Input
|
|
1292
1292
|
}], iconName: [{
|
|
@@ -2394,6 +2394,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2394
2394
|
}] } });
|
|
2395
2395
|
|
|
2396
2396
|
class DateHourPickerComponent {
|
|
2397
|
+
/**
|
|
2398
|
+
* Valor controlado por el padre. Acepta Date, string (los mismos formatos que emite
|
|
2399
|
+
* este picker) o null/''. Asignar null/'' LIMPIA el valor mostrado. NO dispara
|
|
2400
|
+
* (dateSelected) — solo refleja lo que el padre setea. Sirve para precargar (editar)
|
|
2401
|
+
* o limpiar el campo desde afuera (ej. botón "Borrar filtros").
|
|
2402
|
+
*/
|
|
2403
|
+
set value(v) {
|
|
2404
|
+
if (v === null || v === undefined || v === '') {
|
|
2405
|
+
this.selectedDate = null;
|
|
2406
|
+
this.isAlertText = false;
|
|
2407
|
+
return;
|
|
2408
|
+
}
|
|
2409
|
+
const parsed = this.parseIncomingValue(v);
|
|
2410
|
+
if (!parsed || isNaN(parsed.getTime()))
|
|
2411
|
+
return;
|
|
2412
|
+
this.selectedDate = parsed;
|
|
2413
|
+
this.viewDate = new Date(parsed);
|
|
2414
|
+
this.selectedHour = parsed.getHours() % 12 || 12;
|
|
2415
|
+
this.selectedMinute = parsed.getMinutes();
|
|
2416
|
+
this.selectedPeriod = parsed.getHours() < 12 ? 'AM' : 'PM';
|
|
2417
|
+
this.isAlertText = false;
|
|
2418
|
+
}
|
|
2397
2419
|
constructor(elRef
|
|
2398
2420
|
// private overlay: Overlay
|
|
2399
2421
|
) {
|
|
@@ -2407,6 +2429,12 @@ class DateHourPickerComponent {
|
|
|
2407
2429
|
this.iconHelp = false;
|
|
2408
2430
|
this.isRequired = true;
|
|
2409
2431
|
this.mode = 'date-time';
|
|
2432
|
+
/**
|
|
2433
|
+
* Muestra un botón "X" a la derecha (igual que ius-input-textfield) para limpiar el
|
|
2434
|
+
* valor cuando hay uno seleccionado. Opt-in: por defecto OFF para no cambiar el
|
|
2435
|
+
* comportamiento de los usos existentes (muchos son campos requeridos de un solo valor).
|
|
2436
|
+
*/
|
|
2437
|
+
this.isEnableClear = false;
|
|
2410
2438
|
this.dateSelected = new EventEmitter();
|
|
2411
2439
|
this.onBlurEvent = new EventEmitter();
|
|
2412
2440
|
this.dayLabels = ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'];
|
|
@@ -2462,9 +2490,28 @@ class DateHourPickerComponent {
|
|
|
2462
2490
|
this.calendarOpen = true;
|
|
2463
2491
|
return;
|
|
2464
2492
|
}
|
|
2465
|
-
this.
|
|
2493
|
+
if (this.selectedDate) {
|
|
2494
|
+
this.emitSelection(true);
|
|
2495
|
+
}
|
|
2496
|
+
else {
|
|
2497
|
+
this.calendarOpen = false;
|
|
2498
|
+
}
|
|
2466
2499
|
this.focused = false;
|
|
2467
2500
|
}
|
|
2501
|
+
/**
|
|
2502
|
+
* Limpia el valor seleccionado desde el botón "X". Detiene la propagación para no abrir
|
|
2503
|
+
* el calendario, y EMITE '' (interacción del usuario) para que el padre actualice su estado.
|
|
2504
|
+
*/
|
|
2505
|
+
clearValue(event) {
|
|
2506
|
+
event.stopPropagation();
|
|
2507
|
+
if (this.disabled)
|
|
2508
|
+
return;
|
|
2509
|
+
this.selectedDate = null;
|
|
2510
|
+
this.isAlertText = false;
|
|
2511
|
+
this.calendarOpen = false;
|
|
2512
|
+
this.focused = false;
|
|
2513
|
+
this.dateSelected.emit('');
|
|
2514
|
+
}
|
|
2468
2515
|
goToToday() {
|
|
2469
2516
|
const now = new Date();
|
|
2470
2517
|
this.selectedHour = now.getHours() % 12 || 12;
|
|
@@ -2608,6 +2655,26 @@ class DateHourPickerComponent {
|
|
|
2608
2655
|
// Cualquier otro click (label, fuera del componente, etc.) → cerrar
|
|
2609
2656
|
this.closeCalendar();
|
|
2610
2657
|
}
|
|
2658
|
+
/**
|
|
2659
|
+
* Parsea el valor que entra por [value]. Date -> tal cual. String -> soporta los
|
|
2660
|
+
* formatos que emite este picker. "YYYY-MM-DD" se interpreta como fecha LOCAL para
|
|
2661
|
+
* evitar el corrimiento de -1 día que produce new Date('YYYY-MM-DD') (UTC).
|
|
2662
|
+
*/
|
|
2663
|
+
parseIncomingValue(v) {
|
|
2664
|
+
if (v instanceof Date)
|
|
2665
|
+
return v;
|
|
2666
|
+
const s = String(v).trim();
|
|
2667
|
+
const soloFecha = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
|
|
2668
|
+
if (soloFecha)
|
|
2669
|
+
return new Date(+soloFecha[1], +soloFecha[2] - 1, +soloFecha[3]);
|
|
2670
|
+
const soloHora = /^(\d{2}):(\d{2})(?::(\d{2}))?$/.exec(s);
|
|
2671
|
+
if (soloHora) {
|
|
2672
|
+
const now = new Date();
|
|
2673
|
+
return new Date(now.getFullYear(), now.getMonth(), now.getDate(), +soloHora[1], +soloHora[2]);
|
|
2674
|
+
}
|
|
2675
|
+
const d = new Date(s);
|
|
2676
|
+
return isNaN(d.getTime()) ? null : d;
|
|
2677
|
+
}
|
|
2611
2678
|
buildSelectedDateFromState() {
|
|
2612
2679
|
if (this.mode === 'date-only') {
|
|
2613
2680
|
const base = this.selectedDate ?? this.viewDate;
|
|
@@ -2642,7 +2709,7 @@ class DateHourPickerComponent {
|
|
|
2642
2709
|
}
|
|
2643
2710
|
}
|
|
2644
2711
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateHourPickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2645
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DateHourPickerComponent, isStandalone: true, selector: "ius-date-hour-picker", inputs: { label: "label", placeholder: "placeholder", error: "error", helpText: "helpText", helpTextError: "helpTextError", errorText: "errorText", disabled: "disabled", iconHelp: "iconHelp", isRequired: "isRequired", mode: "mode" }, outputs: { dateSelected: "dateSelected", onBlurEvent: "onBlurEvent" }, host: { listeners: { "document:click": "handleOutsideClick($event)" } }, viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }], ngImport: i0, template: "<div class=\"date-picker\" [class.disabled]=\"disabled\">\r\n <div class=\"text\">\r\n @if (isRequired) {\r\n <div class=\"required\"></div>\r\n }\r\n\r\n <label class=\"label label-base\">{{ label }}</label>\r\n\r\n @if (iconHelp) {\r\n <div class=\"help-icon\">\r\n <ius-icon-md iconName=\"icon-help\"></ius-icon-md>\r\n </div>\r\n }\r\n\r\n <label class=\"label label-base\">:</label>\r\n </div>\r\n\r\n <div class=\"input-wrapper\">\r\n <!-- Origen del overlay -->\r\n <div\r\n class=\"container-textfield\"\r\n [ngClass]=\"{\r\n disabled: disabled,\r\n focused: calendarOpen || focused,\r\n alert: !calendarOpen && (error || isAlertText) && !disabled,\r\n selected: selectedDate\r\n }\"\r\n (click)=\"toggleCalendar()\"\r\n cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"\r\n >\r\n <div class=\"input\">\r\n <input\r\n [placeholder]=\"placeholder\"\r\n [value]=\"selectedDate ? getDisplayValue() : ''\"\r\n readonly\r\n [disabled]=\"disabled\"\r\n />\r\n <div class=\"cnt-icon-right\">\r\n <ius-icon-md iconName=\"icon-calendar-today\"></ius-icon-md>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- ======== OVERLAY (CDK) ======== -->\r\n <ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOpen]=\"calendarOpen\"\r\n [cdkConnectedOverlayOrigin]=\"origin\"\r\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n [cdkConnectedOverlayHasBackdrop]=\"false\"\r\n [cdkConnectedOverlayPush]=\"true\"\r\n [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n [cdkConnectedOverlayPanelClass]=\"'calendar-overlay-panel'\"\r\n >\r\n <div\r\n class=\"calendar-overlay\"\r\n [class.time-only]=\"mode === 'time-only'\"\r\n [class.date-only]=\"mode === 'date-only'\"\r\n >\r\n <div class=\"calendar-content\">\r\n @if (mode !== 'time-only') {\r\n <div class=\"calendar-side\">\r\n <div class=\"calendar-header\">\r\n <ius-button-standard-tertiary\r\n iconName=\"icon-keyboard-arrow-left\"\r\n (buttonClicked)=\"prev()\"\r\n ></ius-button-standard-tertiary>\r\n\r\n <span (click)=\"calendarView = nextView(calendarView)\">\r\n @switch (calendarView) { @case ('day') {\r\n {{ getMonthName(viewDate.getMonth()) }}\r\n {{ viewDate.getFullYear() }}\r\n } @case ('month') {\r\n {{ viewDate.getFullYear() }}\r\n } @case ('year') {\r\n {{ getDecadeStart() }}-{{ getDecadeStart() + 9 }}\r\n } }\r\n </span>\r\n\r\n <ius-button-standard-tertiary\r\n iconName=\"icon-keyboard-arrow-right\"\r\n (buttonClicked)=\"next()\"\r\n ></ius-button-standard-tertiary>\r\n </div>\r\n\r\n <div class=\"calendar-body\">\r\n @switch (calendarView) { @case ('day') {\r\n <div class=\"grid days\">\r\n @for (day of dayLabels; track day) {\r\n <div class=\"header\">{{ day }}</div>\r\n } @for (date of calendarDays; track date) {\r\n <div\r\n class=\"cell\"\r\n [class.selected]=\"\r\n selectedDate && isSameDate(date, selectedDate)\r\n \"\r\n [class.out-of-range]=\"date.getMonth() !== viewDate.getMonth()\"\r\n (click)=\"selectDate(date, true)\"\r\n >\r\n {{ date.getDate() }}\r\n </div>\r\n }\r\n </div>\r\n } @case ('month') {\r\n <div class=\"grid months\">\r\n @for (m of months; track m; let i = $index) {\r\n <div class=\"cell\" (click)=\"setMonth(i)\">{{ m }}</div>\r\n }\r\n </div>\r\n } @case ('year') {\r\n <div class=\"grid years\">\r\n @for (i of yearsArray; track i) {\r\n <div\r\n class=\"cell\"\r\n [class.out-of-range]=\"i === 0 || i === 11\"\r\n (click)=\"setYear(getDecadeStart() - 1 + i)\"\r\n >\r\n {{ getDecadeStart() - 1 + i }}\r\n </div>\r\n }\r\n </div>\r\n } }\r\n </div>\r\n </div>\r\n } @if (mode !== 'date-only') {\r\n <div class=\"time-selector\">\r\n <button class=\"time-title\">\r\n <span>\r\n {{ selectedHour | number : \"2.0\" }}:{{\r\n selectedMinute === 0 ? \"00\" : (selectedMinute | number : \"2.0\")\r\n }}\r\n {{ selectedPeriod }}\r\n </span>\r\n </button>\r\n <ius-simple-divider></ius-simple-divider>\r\n <div class=\"time-columns\">\r\n <div class=\"column scrollable\">\r\n @for (h of hours; track h) {\r\n <div\r\n [class.selected]=\"h === selectedHour\"\r\n (click)=\"\r\n selectedHour = h;\r\n mode === 'time-only'\r\n ? selectTime()\r\n : selectDate(viewDate, true)\r\n \"\r\n >\r\n {{ h | number : \"2.0\" }}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"column scrollable\">\r\n @for (m of minutes; track m) {\r\n <div\r\n [class.selected]=\"m === selectedMinute\"\r\n (click)=\"\r\n selectedMinute = m;\r\n mode === 'time-only'\r\n ? selectTime()\r\n : selectDate(viewDate, true)\r\n \"\r\n >\r\n {{ m | number : \"2.0\" }}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"column\">\r\n <div\r\n [class.selected]=\"'AM' === selectedPeriod\"\r\n (click)=\"\r\n selectedPeriod = 'AM';\r\n mode === 'time-only'\r\n ? selectTime()\r\n : selectDate(viewDate, false)\r\n \"\r\n >\r\n AM\r\n </div>\r\n <div\r\n [class.selected]=\"'PM' === selectedPeriod\"\r\n (click)=\"\r\n selectedPeriod = 'PM';\r\n mode === 'time-only'\r\n ? selectTime()\r\n : selectDate(viewDate, false)\r\n \"\r\n >\r\n PM\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <ius-simple-divider></ius-simple-divider>\r\n <button class=\"today\" (click)=\"goToToday()\">\r\n @if (mode === 'date-only') { Fecha actual } @else if (mode ===\r\n 'time-only') { Hora actual } @else { Fecha y hora actual }\r\n </button>\r\n </div>\r\n </ng-template>\r\n <!-- ======== /OVERLAY (CDK) ======== -->\r\n </div>\r\n @if (helpText && focused && !error && !isAlertText) {\r\n <div class=\"help-text\">\r\n {{ helpText }}\r\n </div>\r\n } @if ((errorText || helpTextError) && (error || isAlertText)) {\r\n <div class=\"help-text-error\">\r\n {{ errorText ?? helpTextError }}\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.required{width:4px;height:4px;aspect-ratio:1/1;border-radius:50%;background-color:#ff4e3a}.text{display:flex;align-items:center;margin-bottom:8px;gap:4px}.cdk-overlay-pane.calendar-overlay-panel{z-index:9000;position:absolute!important}.input-wrapper{position:relative;display:inline-block;width:100%}.date-picker{width:100%;position:relative}.date-picker.disabled{opacity:.6;pointer-events:none}.date-picker .label{color:#333}.date-picker .help-icon{color:#595959}.container-textfield{display:flex;position:relative;align-items:flex-start;gap:4px}.container-textfield .input{width:100%;display:flex;align-items:flex-start;justify-content:center;gap:4px;padding:12px;border-radius:8px;background:#f5f5f5;cursor:pointer;border:none}.container-textfield .input input{flex:1;outline:none;border:none;background:#f5f5f5;color:#8c8c8c;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;font-style:normal;line-height:20px;letter-spacing:.28px;cursor:pointer}.container-textfield .cnt-icon-right{display:flex;align-items:center;justify-content:center;color:#333}.container-textfield:hover .input,.container-textfield:hover .input input{background-color:#edf6ff}.container-textfield:hover .input .cnt-icon-right{color:#061b7a}.container-textfield.focused .input{border:1px solid #0581BC;background:#edf6ff}.container-textfield.focused .input input{background-color:#edf6ff;border:none}.container-textfield.focused .input .cnt-icon-right{color:#061b7a}.container-textfield.alert .input{border-radius:8px;border:1px solid #DB2E2A;background:#fff4f0}.container-textfield.alert .input input{background:#fff4f0}.container-textfield.alert .input .cnt-icon-right{color:#db2e2a}.container-textfield.selected .input{background:#f5f5f5}.container-textfield.selected .input input{background:#f5f5f5;border:none;color:#333;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.container-textfield.selected .input .help-icon{color:#595959}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.disabled .cnt-icon-right{color:#bfbfbf}.calendar-overlay{display:inline-block;border-radius:8px;border:1px solid #f5f5f5;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a}.calendar-overlay.time-only{min-width:200px;width:auto}.calendar-overlay.time-only .calendar-content{flex-direction:column;align-items:center;padding:12px}.calendar-overlay.time-only .time-selector{border-left:none;border-top:1px solid #f0f0f0;padding:12px;min-width:180px;width:100%}.calendar-overlay.time-only .time-selector .time-columns{justify-content:center;gap:8px}.calendar-overlay.time-only .time-selector .column{height:150px}.calendar-overlay.date-only{min-width:280px;width:auto}.calendar-overlay.date-only .calendar-content{flex-direction:column;align-items:center}.calendar-overlay.date-only .calendar-side{min-width:260px;width:100%}.calendar-content{display:flex;flex-direction:row;width:auto;max-width:none;max-height:60vh;overflow:hidden}.calendar-side{padding:12px;flex:1;min-width:260px}.calendar-header{display:flex;align-items:center;align-self:stretch}.calendar-header span{flex:1;display:flex;justify-content:center;align-items:center;color:#333;cursor:pointer;font-family:Roboto;font-size:1rem;font-weight:500;font-style:normal;line-height:22px}.calendar-body{display:flex;flex-direction:column;gap:8px;margin:0 10px}.grid{display:grid;gap:8px}.grid.days{grid-template-columns:repeat(7,1fr)}.grid.months,.grid.years{margin-left:27px;grid-template-columns:repeat(3,1fr)}.grid .header{display:flex;align-items:center;height:30px;padding:2px 4px;gap:16px;color:#333;font-family:Rubik;font-size:.75rem;font-weight:500;font-style:normal;line-height:16px;letter-spacing:.24px}.grid .cell{display:flex;width:24px;height:24px;min-width:24px;min-height:24px;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:1/1;background:#fff;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;font-style:normal;line-height:20px;letter-spacing:.28px;cursor:pointer}.grid .cell:hover{background:#edf6ff}.grid .cell.out-of-range{color:#bfbfbf}.grid .cell.selected{border-radius:100px;border:1px solid #184FDB;background:#2167ff;color:#fff}.today{margin-top:8px;width:100%;padding:8px;border:none;background:transparent;display:flex;justify-content:center;align-items:center;gap:4px;color:#333;cursor:pointer;font-family:Roboto;font-size:1rem;font-weight:500;font-style:normal;line-height:22px}.today:hover{background-color:#edf6ff;border-radius:4px}.calendar-overlay .calendar-content{overflow-x:hidden}.time-selector{border-left:1px solid #f0f0f0;padding:12px 8px;display:flex;flex-direction:column;gap:8px;min-width:150px}.time-selector .time-columns{display:flex;gap:4px;justify-content:center}.time-selector .time-title{display:flex;padding:8px;justify-content:center;align-items:center;gap:4px;align-self:stretch;border-radius:4px;border:none;background-color:#fff}.time-selector .time-title span{color:#333;font-family:Roboto,sans-serif;font-size:1rem;font-style:normal;font-weight:500;line-height:22px}.time-selector .divider{background-color:#b6b4b430;height:100%;width:1px}.time-selector .column{overflow-y:auto;display:flex;height:218px;flex-direction:column;align-items:flex-start;margin:0 2px}.time-selector .column .list{display:flex;padding:4px 8px;justify-content:flex-end;align-items:flex-start;gap:8px;align-self:stretch}.time-selector .column::-webkit-scrollbar{width:4px}.time-selector .column::-webkit-scrollbar-thumb{background-color:#fff;border-radius:4px}.time-selector .column div{display:flex;height:28px;padding:4px 8px;justify-content:flex-end;align-items:flex-start;gap:8px;flex-shrink:0;align-self:stretch;background:#fff;color:#595959;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.time-selector .column div:hover{cursor:pointer}.time-selector .column div.selected{display:flex;padding:4px 8px;justify-content:flex-end;align-items:center;gap:8px;align-self:stretch;border-radius:8px;background:#2167ff;color:#fff}.time-selector .today{margin-top:8px;padding:8px;text-align:center;font-weight:500;color:#333}.help-text{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}.help-text-error{display:flex;position:absolute;margin-top:4px;color:#931224;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: // ✅ CDK Overlay
|
|
2712
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DateHourPickerComponent, isStandalone: true, selector: "ius-date-hour-picker", inputs: { label: "label", placeholder: "placeholder", error: "error", helpText: "helpText", helpTextError: "helpTextError", errorText: "errorText", disabled: "disabled", iconHelp: "iconHelp", isRequired: "isRequired", mode: "mode", isEnableClear: "isEnableClear", value: "value" }, outputs: { dateSelected: "dateSelected", onBlurEvent: "onBlurEvent" }, host: { listeners: { "document:click": "handleOutsideClick($event)" } }, viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }], ngImport: i0, template: "<div class=\"date-picker\" [class.disabled]=\"disabled\">\r\n <div class=\"text\">\r\n @if (isRequired) {\r\n <div class=\"required\"></div>\r\n }\r\n\r\n <label class=\"label label-base\">{{ label }}</label>\r\n\r\n @if (iconHelp) {\r\n <div class=\"help-icon\">\r\n <ius-icon-md iconName=\"icon-help\"></ius-icon-md>\r\n </div>\r\n }\r\n\r\n <label class=\"label label-base\">:</label>\r\n </div>\r\n\r\n <div class=\"input-wrapper\">\r\n <!-- Origen del overlay -->\r\n <div\r\n class=\"container-textfield\"\r\n [ngClass]=\"{\r\n disabled: disabled,\r\n focused: calendarOpen || focused,\r\n alert: !calendarOpen && (error || isAlertText) && !disabled,\r\n selected: selectedDate\r\n }\"\r\n (click)=\"toggleCalendar()\"\r\n cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"\r\n >\r\n <div class=\"input\">\r\n <input\r\n [placeholder]=\"placeholder\"\r\n [value]=\"selectedDate ? getDisplayValue() : ''\"\r\n readonly\r\n [disabled]=\"disabled\"\r\n />\r\n <div class=\"cnt-icon-right\">\r\n @if (!disabled && selectedDate && isEnableClear) {\r\n <button type=\"button\" class=\"button-clear\" (click)=\"clearValue($event)\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\r\n </button>\r\n }\r\n <ius-icon-md iconName=\"icon-calendar-today\"></ius-icon-md>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- ======== OVERLAY (CDK) ======== -->\r\n <ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOpen]=\"calendarOpen\"\r\n [cdkConnectedOverlayOrigin]=\"origin\"\r\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n [cdkConnectedOverlayHasBackdrop]=\"false\"\r\n [cdkConnectedOverlayPush]=\"true\"\r\n [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n [cdkConnectedOverlayPanelClass]=\"'calendar-overlay-panel'\"\r\n >\r\n <div\r\n class=\"calendar-overlay\"\r\n [class.time-only]=\"mode === 'time-only'\"\r\n [class.date-only]=\"mode === 'date-only'\"\r\n >\r\n <div class=\"calendar-content\">\r\n @if (mode !== 'time-only') {\r\n <div class=\"calendar-side\">\r\n <div class=\"calendar-header\">\r\n <ius-button-standard-tertiary\r\n iconName=\"icon-keyboard-arrow-left\"\r\n (buttonClicked)=\"prev()\"\r\n ></ius-button-standard-tertiary>\r\n\r\n <span (click)=\"calendarView = nextView(calendarView)\">\r\n @switch (calendarView) { @case ('day') {\r\n {{ getMonthName(viewDate.getMonth()) }}\r\n {{ viewDate.getFullYear() }}\r\n } @case ('month') {\r\n {{ viewDate.getFullYear() }}\r\n } @case ('year') {\r\n {{ getDecadeStart() }}-{{ getDecadeStart() + 9 }}\r\n } }\r\n </span>\r\n\r\n <ius-button-standard-tertiary\r\n iconName=\"icon-keyboard-arrow-right\"\r\n (buttonClicked)=\"next()\"\r\n ></ius-button-standard-tertiary>\r\n </div>\r\n\r\n <div class=\"calendar-body\">\r\n @switch (calendarView) { @case ('day') {\r\n <div class=\"grid days\">\r\n @for (day of dayLabels; track day) {\r\n <div class=\"header\">{{ day }}</div>\r\n } @for (date of calendarDays; track date) {\r\n <div\r\n class=\"cell\"\r\n [class.selected]=\"\r\n selectedDate && isSameDate(date, selectedDate)\r\n \"\r\n [class.out-of-range]=\"date.getMonth() !== viewDate.getMonth()\"\r\n (click)=\"selectDate(date, true)\"\r\n >\r\n {{ date.getDate() }}\r\n </div>\r\n }\r\n </div>\r\n } @case ('month') {\r\n <div class=\"grid months\">\r\n @for (m of months; track m; let i = $index) {\r\n <div class=\"cell\" (click)=\"setMonth(i)\">{{ m }}</div>\r\n }\r\n </div>\r\n } @case ('year') {\r\n <div class=\"grid years\">\r\n @for (i of yearsArray; track i) {\r\n <div\r\n class=\"cell\"\r\n [class.out-of-range]=\"i === 0 || i === 11\"\r\n (click)=\"setYear(getDecadeStart() - 1 + i)\"\r\n >\r\n {{ getDecadeStart() - 1 + i }}\r\n </div>\r\n }\r\n </div>\r\n } }\r\n </div>\r\n </div>\r\n } @if (mode !== 'date-only') {\r\n <div class=\"time-selector\">\r\n <button class=\"time-title\">\r\n <span>\r\n {{ selectedHour | number : \"2.0\" }}:{{\r\n selectedMinute === 0 ? \"00\" : (selectedMinute | number : \"2.0\")\r\n }}\r\n {{ selectedPeriod }}\r\n </span>\r\n </button>\r\n <ius-simple-divider></ius-simple-divider>\r\n <div class=\"time-columns\">\r\n <div class=\"column scrollable\">\r\n @for (h of hours; track h) {\r\n <div\r\n [class.selected]=\"h === selectedHour\"\r\n (click)=\"\r\n selectedHour = h;\r\n mode === 'time-only'\r\n ? selectTime()\r\n : selectDate(viewDate, true)\r\n \"\r\n >\r\n {{ h | number : \"2.0\" }}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"column scrollable\">\r\n @for (m of minutes; track m) {\r\n <div\r\n [class.selected]=\"m === selectedMinute\"\r\n (click)=\"\r\n selectedMinute = m;\r\n mode === 'time-only'\r\n ? selectTime()\r\n : selectDate(viewDate, true)\r\n \"\r\n >\r\n {{ m | number : \"2.0\" }}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"column\">\r\n <div\r\n [class.selected]=\"'AM' === selectedPeriod\"\r\n (click)=\"\r\n selectedPeriod = 'AM';\r\n mode === 'time-only'\r\n ? selectTime()\r\n : selectDate(viewDate, false)\r\n \"\r\n >\r\n AM\r\n </div>\r\n <div\r\n [class.selected]=\"'PM' === selectedPeriod\"\r\n (click)=\"\r\n selectedPeriod = 'PM';\r\n mode === 'time-only'\r\n ? selectTime()\r\n : selectDate(viewDate, false)\r\n \"\r\n >\r\n PM\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <ius-simple-divider></ius-simple-divider>\r\n <button class=\"today\" (click)=\"goToToday()\">\r\n @if (mode === 'date-only') { Fecha actual } @else if (mode ===\r\n 'time-only') { Hora actual } @else { Fecha y hora actual }\r\n </button>\r\n </div>\r\n </ng-template>\r\n <!-- ======== /OVERLAY (CDK) ======== -->\r\n </div>\r\n @if (helpText && focused && !error && !isAlertText) {\r\n <div class=\"help-text\">\r\n {{ helpText }}\r\n </div>\r\n } @if ((errorText || helpTextError) && (error || isAlertText)) {\r\n <div class=\"help-text-error\">\r\n {{ errorText ?? helpTextError }}\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.required{width:4px;height:4px;aspect-ratio:1/1;border-radius:50%;background-color:#ff4e3a}.text{display:flex;align-items:center;margin-bottom:8px;gap:4px}.cdk-overlay-pane.calendar-overlay-panel{z-index:9000;position:absolute!important}.input-wrapper{position:relative;display:inline-block;width:100%}.date-picker{width:100%;position:relative}.date-picker.disabled{opacity:.6;pointer-events:none}.date-picker .label{color:#333}.date-picker .help-icon{color:#595959}.container-textfield{display:flex;position:relative;align-items:flex-start;gap:4px}.container-textfield .input{width:100%;display:flex;align-items:flex-start;justify-content:center;gap:4px;padding:12px;border-radius:8px;background:#f5f5f5;cursor:pointer;border:none}.container-textfield .input input{flex:1;outline:none;border:none;background:#f5f5f5;color:#8c8c8c;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;font-style:normal;line-height:20px;letter-spacing:.28px;cursor:pointer}.container-textfield .cnt-icon-right{display:flex;align-items:center;justify-content:center;gap:8px;color:#333}.container-textfield .button-clear{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:#595959}.container-textfield .button-clear:hover,.container-textfield .icon-color-cancel{color:#013169}.container-textfield:hover .input,.container-textfield:hover .input input{background-color:#edf6ff}.container-textfield:hover .input .cnt-icon-right{color:#061b7a}.container-textfield.focused .input{border:1px solid #0581BC;background:#edf6ff}.container-textfield.focused .input input{background-color:#edf6ff;border:none}.container-textfield.focused .input .cnt-icon-right{color:#061b7a}.container-textfield.alert .input{border-radius:8px;border:1px solid #DB2E2A;background:#fff4f0}.container-textfield.alert .input input{background:#fff4f0}.container-textfield.alert .input .cnt-icon-right{color:#db2e2a}.container-textfield.selected .input{background:#f5f5f5}.container-textfield.selected .input input{background:#f5f5f5;border:none;color:#333;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.container-textfield.selected .input .help-icon{color:#595959}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.disabled .cnt-icon-right{color:#bfbfbf}.calendar-overlay{display:inline-block;border-radius:8px;border:1px solid #f5f5f5;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a}.calendar-overlay.time-only{min-width:200px;width:auto}.calendar-overlay.time-only .calendar-content{flex-direction:column;align-items:center;padding:12px}.calendar-overlay.time-only .time-selector{border-left:none;border-top:1px solid #f0f0f0;padding:12px;min-width:180px;width:100%}.calendar-overlay.time-only .time-selector .time-columns{justify-content:center;gap:8px}.calendar-overlay.time-only .time-selector .column{height:150px}.calendar-overlay.date-only{min-width:280px;width:auto}.calendar-overlay.date-only .calendar-content{flex-direction:column;align-items:center}.calendar-overlay.date-only .calendar-side{min-width:260px;width:100%}.calendar-content{display:flex;flex-direction:row;width:auto;max-width:none;max-height:60vh;overflow:hidden}.calendar-side{padding:12px;flex:1;min-width:260px}.calendar-header{display:flex;align-items:center;align-self:stretch}.calendar-header span{flex:1;display:flex;justify-content:center;align-items:center;color:#333;cursor:pointer;font-family:Roboto;font-size:1rem;font-weight:500;font-style:normal;line-height:22px}.calendar-body{display:flex;flex-direction:column;gap:8px;margin:0 10px}.grid{display:grid;gap:8px}.grid.days{grid-template-columns:repeat(7,1fr)}.grid.months,.grid.years{margin-left:27px;grid-template-columns:repeat(3,1fr)}.grid .header{display:flex;align-items:center;height:30px;padding:2px 4px;gap:16px;color:#333;font-family:Rubik;font-size:.75rem;font-weight:500;font-style:normal;line-height:16px;letter-spacing:.24px}.grid .cell{display:flex;width:24px;height:24px;min-width:24px;min-height:24px;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:1/1;background:#fff;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;font-style:normal;line-height:20px;letter-spacing:.28px;cursor:pointer}.grid .cell:hover{background:#edf6ff}.grid .cell.out-of-range{color:#bfbfbf}.grid .cell.selected{border-radius:100px;border:1px solid #184FDB;background:#2167ff;color:#fff}.today{margin-top:8px;width:100%;padding:8px;border:none;background:transparent;display:flex;justify-content:center;align-items:center;gap:4px;color:#333;cursor:pointer;font-family:Roboto;font-size:1rem;font-weight:500;font-style:normal;line-height:22px}.today:hover{background-color:#edf6ff;border-radius:4px}.calendar-overlay .calendar-content{overflow-x:hidden}.time-selector{border-left:1px solid #f0f0f0;padding:12px 8px;display:flex;flex-direction:column;gap:8px;min-width:150px}.time-selector .time-columns{display:flex;gap:4px;justify-content:center}.time-selector .time-title{display:flex;padding:8px;justify-content:center;align-items:center;gap:4px;align-self:stretch;border-radius:4px;border:none;background-color:#fff}.time-selector .time-title span{color:#333;font-family:Roboto,sans-serif;font-size:1rem;font-style:normal;font-weight:500;line-height:22px}.time-selector .divider{background-color:#b6b4b430;height:100%;width:1px}.time-selector .column{overflow-y:auto;display:flex;height:218px;flex-direction:column;align-items:flex-start;margin:0 2px}.time-selector .column .list{display:flex;padding:4px 8px;justify-content:flex-end;align-items:flex-start;gap:8px;align-self:stretch}.time-selector .column::-webkit-scrollbar{width:4px}.time-selector .column::-webkit-scrollbar-thumb{background-color:#fff;border-radius:4px}.time-selector .column div{display:flex;height:28px;padding:4px 8px;justify-content:flex-end;align-items:flex-start;gap:8px;flex-shrink:0;align-self:stretch;background:#fff;color:#595959;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.time-selector .column div:hover{cursor:pointer}.time-selector .column div.selected{display:flex;padding:4px 8px;justify-content:flex-end;align-items:center;gap:8px;align-self:stretch;border-radius:8px;background:#2167ff;color:#fff}.time-selector .today{margin-top:8px;padding:8px;text-align:center;font-weight:500;color:#333}.help-text{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}.help-text-error{display:flex;position:absolute;margin-top:4px;color:#931224;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: // ✅ CDK Overlay
|
|
2646
2713
|
IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "component", type: SimpleDividerComponent, selector: "ius-simple-divider" }, { kind: "component", type: ButtonStandardTertiaryComponent, selector: "ius-button-standard-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }] }); }
|
|
2647
2714
|
}
|
|
2648
2715
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateHourPickerComponent, decorators: [{
|
|
@@ -2653,7 +2720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2653
2720
|
IconMdComponent,
|
|
2654
2721
|
SimpleDividerComponent,
|
|
2655
2722
|
ButtonStandardTertiaryComponent,
|
|
2656
|
-
], template: "<div class=\"date-picker\" [class.disabled]=\"disabled\">\r\n <div class=\"text\">\r\n @if (isRequired) {\r\n <div class=\"required\"></div>\r\n }\r\n\r\n <label class=\"label label-base\">{{ label }}</label>\r\n\r\n @if (iconHelp) {\r\n <div class=\"help-icon\">\r\n <ius-icon-md iconName=\"icon-help\"></ius-icon-md>\r\n </div>\r\n }\r\n\r\n <label class=\"label label-base\">:</label>\r\n </div>\r\n\r\n <div class=\"input-wrapper\">\r\n <!-- Origen del overlay -->\r\n <div\r\n class=\"container-textfield\"\r\n [ngClass]=\"{\r\n disabled: disabled,\r\n focused: calendarOpen || focused,\r\n alert: !calendarOpen && (error || isAlertText) && !disabled,\r\n selected: selectedDate\r\n }\"\r\n (click)=\"toggleCalendar()\"\r\n cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"\r\n >\r\n <div class=\"input\">\r\n <input\r\n [placeholder]=\"placeholder\"\r\n [value]=\"selectedDate ? getDisplayValue() : ''\"\r\n readonly\r\n [disabled]=\"disabled\"\r\n />\r\n <div class=\"cnt-icon-right\">\r\n <ius-icon-md iconName=\"icon-calendar-today\"></ius-icon-md>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- ======== OVERLAY (CDK) ======== -->\r\n <ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOpen]=\"calendarOpen\"\r\n [cdkConnectedOverlayOrigin]=\"origin\"\r\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n [cdkConnectedOverlayHasBackdrop]=\"false\"\r\n [cdkConnectedOverlayPush]=\"true\"\r\n [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n [cdkConnectedOverlayPanelClass]=\"'calendar-overlay-panel'\"\r\n >\r\n <div\r\n class=\"calendar-overlay\"\r\n [class.time-only]=\"mode === 'time-only'\"\r\n [class.date-only]=\"mode === 'date-only'\"\r\n >\r\n <div class=\"calendar-content\">\r\n @if (mode !== 'time-only') {\r\n <div class=\"calendar-side\">\r\n <div class=\"calendar-header\">\r\n <ius-button-standard-tertiary\r\n iconName=\"icon-keyboard-arrow-left\"\r\n (buttonClicked)=\"prev()\"\r\n ></ius-button-standard-tertiary>\r\n\r\n <span (click)=\"calendarView = nextView(calendarView)\">\r\n @switch (calendarView) { @case ('day') {\r\n {{ getMonthName(viewDate.getMonth()) }}\r\n {{ viewDate.getFullYear() }}\r\n } @case ('month') {\r\n {{ viewDate.getFullYear() }}\r\n } @case ('year') {\r\n {{ getDecadeStart() }}-{{ getDecadeStart() + 9 }}\r\n } }\r\n </span>\r\n\r\n <ius-button-standard-tertiary\r\n iconName=\"icon-keyboard-arrow-right\"\r\n (buttonClicked)=\"next()\"\r\n ></ius-button-standard-tertiary>\r\n </div>\r\n\r\n <div class=\"calendar-body\">\r\n @switch (calendarView) { @case ('day') {\r\n <div class=\"grid days\">\r\n @for (day of dayLabels; track day) {\r\n <div class=\"header\">{{ day }}</div>\r\n } @for (date of calendarDays; track date) {\r\n <div\r\n class=\"cell\"\r\n [class.selected]=\"\r\n selectedDate && isSameDate(date, selectedDate)\r\n \"\r\n [class.out-of-range]=\"date.getMonth() !== viewDate.getMonth()\"\r\n (click)=\"selectDate(date, true)\"\r\n >\r\n {{ date.getDate() }}\r\n </div>\r\n }\r\n </div>\r\n } @case ('month') {\r\n <div class=\"grid months\">\r\n @for (m of months; track m; let i = $index) {\r\n <div class=\"cell\" (click)=\"setMonth(i)\">{{ m }}</div>\r\n }\r\n </div>\r\n } @case ('year') {\r\n <div class=\"grid years\">\r\n @for (i of yearsArray; track i) {\r\n <div\r\n class=\"cell\"\r\n [class.out-of-range]=\"i === 0 || i === 11\"\r\n (click)=\"setYear(getDecadeStart() - 1 + i)\"\r\n >\r\n {{ getDecadeStart() - 1 + i }}\r\n </div>\r\n }\r\n </div>\r\n } }\r\n </div>\r\n </div>\r\n } @if (mode !== 'date-only') {\r\n <div class=\"time-selector\">\r\n <button class=\"time-title\">\r\n <span>\r\n {{ selectedHour | number : \"2.0\" }}:{{\r\n selectedMinute === 0 ? \"00\" : (selectedMinute | number : \"2.0\")\r\n }}\r\n {{ selectedPeriod }}\r\n </span>\r\n </button>\r\n <ius-simple-divider></ius-simple-divider>\r\n <div class=\"time-columns\">\r\n <div class=\"column scrollable\">\r\n @for (h of hours; track h) {\r\n <div\r\n [class.selected]=\"h === selectedHour\"\r\n (click)=\"\r\n selectedHour = h;\r\n mode === 'time-only'\r\n ? selectTime()\r\n : selectDate(viewDate, true)\r\n \"\r\n >\r\n {{ h | number : \"2.0\" }}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"column scrollable\">\r\n @for (m of minutes; track m) {\r\n <div\r\n [class.selected]=\"m === selectedMinute\"\r\n (click)=\"\r\n selectedMinute = m;\r\n mode === 'time-only'\r\n ? selectTime()\r\n : selectDate(viewDate, true)\r\n \"\r\n >\r\n {{ m | number : \"2.0\" }}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"column\">\r\n <div\r\n [class.selected]=\"'AM' === selectedPeriod\"\r\n (click)=\"\r\n selectedPeriod = 'AM';\r\n mode === 'time-only'\r\n ? selectTime()\r\n : selectDate(viewDate, false)\r\n \"\r\n >\r\n AM\r\n </div>\r\n <div\r\n [class.selected]=\"'PM' === selectedPeriod\"\r\n (click)=\"\r\n selectedPeriod = 'PM';\r\n mode === 'time-only'\r\n ? selectTime()\r\n : selectDate(viewDate, false)\r\n \"\r\n >\r\n PM\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <ius-simple-divider></ius-simple-divider>\r\n <button class=\"today\" (click)=\"goToToday()\">\r\n @if (mode === 'date-only') { Fecha actual } @else if (mode ===\r\n 'time-only') { Hora actual } @else { Fecha y hora actual }\r\n </button>\r\n </div>\r\n </ng-template>\r\n <!-- ======== /OVERLAY (CDK) ======== -->\r\n </div>\r\n @if (helpText && focused && !error && !isAlertText) {\r\n <div class=\"help-text\">\r\n {{ helpText }}\r\n </div>\r\n } @if ((errorText || helpTextError) && (error || isAlertText)) {\r\n <div class=\"help-text-error\">\r\n {{ errorText ?? helpTextError }}\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.required{width:4px;height:4px;aspect-ratio:1/1;border-radius:50%;background-color:#ff4e3a}.text{display:flex;align-items:center;margin-bottom:8px;gap:4px}.cdk-overlay-pane.calendar-overlay-panel{z-index:9000;position:absolute!important}.input-wrapper{position:relative;display:inline-block;width:100%}.date-picker{width:100%;position:relative}.date-picker.disabled{opacity:.6;pointer-events:none}.date-picker .label{color:#333}.date-picker .help-icon{color:#595959}.container-textfield{display:flex;position:relative;align-items:flex-start;gap:4px}.container-textfield .input{width:100%;display:flex;align-items:flex-start;justify-content:center;gap:4px;padding:12px;border-radius:8px;background:#f5f5f5;cursor:pointer;border:none}.container-textfield .input input{flex:1;outline:none;border:none;background:#f5f5f5;color:#8c8c8c;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;font-style:normal;line-height:20px;letter-spacing:.28px;cursor:pointer}.container-textfield .cnt-icon-right{display:flex;align-items:center;justify-content:center;color:#333}.container-textfield:hover .input,.container-textfield:hover .input input{background-color:#edf6ff}.container-textfield:hover .input .cnt-icon-right{color:#061b7a}.container-textfield.focused .input{border:1px solid #0581BC;background:#edf6ff}.container-textfield.focused .input input{background-color:#edf6ff;border:none}.container-textfield.focused .input .cnt-icon-right{color:#061b7a}.container-textfield.alert .input{border-radius:8px;border:1px solid #DB2E2A;background:#fff4f0}.container-textfield.alert .input input{background:#fff4f0}.container-textfield.alert .input .cnt-icon-right{color:#db2e2a}.container-textfield.selected .input{background:#f5f5f5}.container-textfield.selected .input input{background:#f5f5f5;border:none;color:#333;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.container-textfield.selected .input .help-icon{color:#595959}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.disabled .cnt-icon-right{color:#bfbfbf}.calendar-overlay{display:inline-block;border-radius:8px;border:1px solid #f5f5f5;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a}.calendar-overlay.time-only{min-width:200px;width:auto}.calendar-overlay.time-only .calendar-content{flex-direction:column;align-items:center;padding:12px}.calendar-overlay.time-only .time-selector{border-left:none;border-top:1px solid #f0f0f0;padding:12px;min-width:180px;width:100%}.calendar-overlay.time-only .time-selector .time-columns{justify-content:center;gap:8px}.calendar-overlay.time-only .time-selector .column{height:150px}.calendar-overlay.date-only{min-width:280px;width:auto}.calendar-overlay.date-only .calendar-content{flex-direction:column;align-items:center}.calendar-overlay.date-only .calendar-side{min-width:260px;width:100%}.calendar-content{display:flex;flex-direction:row;width:auto;max-width:none;max-height:60vh;overflow:hidden}.calendar-side{padding:12px;flex:1;min-width:260px}.calendar-header{display:flex;align-items:center;align-self:stretch}.calendar-header span{flex:1;display:flex;justify-content:center;align-items:center;color:#333;cursor:pointer;font-family:Roboto;font-size:1rem;font-weight:500;font-style:normal;line-height:22px}.calendar-body{display:flex;flex-direction:column;gap:8px;margin:0 10px}.grid{display:grid;gap:8px}.grid.days{grid-template-columns:repeat(7,1fr)}.grid.months,.grid.years{margin-left:27px;grid-template-columns:repeat(3,1fr)}.grid .header{display:flex;align-items:center;height:30px;padding:2px 4px;gap:16px;color:#333;font-family:Rubik;font-size:.75rem;font-weight:500;font-style:normal;line-height:16px;letter-spacing:.24px}.grid .cell{display:flex;width:24px;height:24px;min-width:24px;min-height:24px;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:1/1;background:#fff;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;font-style:normal;line-height:20px;letter-spacing:.28px;cursor:pointer}.grid .cell:hover{background:#edf6ff}.grid .cell.out-of-range{color:#bfbfbf}.grid .cell.selected{border-radius:100px;border:1px solid #184FDB;background:#2167ff;color:#fff}.today{margin-top:8px;width:100%;padding:8px;border:none;background:transparent;display:flex;justify-content:center;align-items:center;gap:4px;color:#333;cursor:pointer;font-family:Roboto;font-size:1rem;font-weight:500;font-style:normal;line-height:22px}.today:hover{background-color:#edf6ff;border-radius:4px}.calendar-overlay .calendar-content{overflow-x:hidden}.time-selector{border-left:1px solid #f0f0f0;padding:12px 8px;display:flex;flex-direction:column;gap:8px;min-width:150px}.time-selector .time-columns{display:flex;gap:4px;justify-content:center}.time-selector .time-title{display:flex;padding:8px;justify-content:center;align-items:center;gap:4px;align-self:stretch;border-radius:4px;border:none;background-color:#fff}.time-selector .time-title span{color:#333;font-family:Roboto,sans-serif;font-size:1rem;font-style:normal;font-weight:500;line-height:22px}.time-selector .divider{background-color:#b6b4b430;height:100%;width:1px}.time-selector .column{overflow-y:auto;display:flex;height:218px;flex-direction:column;align-items:flex-start;margin:0 2px}.time-selector .column .list{display:flex;padding:4px 8px;justify-content:flex-end;align-items:flex-start;gap:8px;align-self:stretch}.time-selector .column::-webkit-scrollbar{width:4px}.time-selector .column::-webkit-scrollbar-thumb{background-color:#fff;border-radius:4px}.time-selector .column div{display:flex;height:28px;padding:4px 8px;justify-content:flex-end;align-items:flex-start;gap:8px;flex-shrink:0;align-self:stretch;background:#fff;color:#595959;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.time-selector .column div:hover{cursor:pointer}.time-selector .column div.selected{display:flex;padding:4px 8px;justify-content:flex-end;align-items:center;gap:8px;align-self:stretch;border-radius:8px;background:#2167ff;color:#fff}.time-selector .today{margin-top:8px;padding:8px;text-align:center;font-weight:500;color:#333}.help-text{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}.help-text-error{display:flex;position:absolute;margin-top:4px;color:#931224;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}\n"] }]
|
|
2723
|
+
], template: "<div class=\"date-picker\" [class.disabled]=\"disabled\">\r\n <div class=\"text\">\r\n @if (isRequired) {\r\n <div class=\"required\"></div>\r\n }\r\n\r\n <label class=\"label label-base\">{{ label }}</label>\r\n\r\n @if (iconHelp) {\r\n <div class=\"help-icon\">\r\n <ius-icon-md iconName=\"icon-help\"></ius-icon-md>\r\n </div>\r\n }\r\n\r\n <label class=\"label label-base\">:</label>\r\n </div>\r\n\r\n <div class=\"input-wrapper\">\r\n <!-- Origen del overlay -->\r\n <div\r\n class=\"container-textfield\"\r\n [ngClass]=\"{\r\n disabled: disabled,\r\n focused: calendarOpen || focused,\r\n alert: !calendarOpen && (error || isAlertText) && !disabled,\r\n selected: selectedDate\r\n }\"\r\n (click)=\"toggleCalendar()\"\r\n cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"\r\n >\r\n <div class=\"input\">\r\n <input\r\n [placeholder]=\"placeholder\"\r\n [value]=\"selectedDate ? getDisplayValue() : ''\"\r\n readonly\r\n [disabled]=\"disabled\"\r\n />\r\n <div class=\"cnt-icon-right\">\r\n @if (!disabled && selectedDate && isEnableClear) {\r\n <button type=\"button\" class=\"button-clear\" (click)=\"clearValue($event)\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\r\n </button>\r\n }\r\n <ius-icon-md iconName=\"icon-calendar-today\"></ius-icon-md>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- ======== OVERLAY (CDK) ======== -->\r\n <ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOpen]=\"calendarOpen\"\r\n [cdkConnectedOverlayOrigin]=\"origin\"\r\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n [cdkConnectedOverlayHasBackdrop]=\"false\"\r\n [cdkConnectedOverlayPush]=\"true\"\r\n [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n [cdkConnectedOverlayPanelClass]=\"'calendar-overlay-panel'\"\r\n >\r\n <div\r\n class=\"calendar-overlay\"\r\n [class.time-only]=\"mode === 'time-only'\"\r\n [class.date-only]=\"mode === 'date-only'\"\r\n >\r\n <div class=\"calendar-content\">\r\n @if (mode !== 'time-only') {\r\n <div class=\"calendar-side\">\r\n <div class=\"calendar-header\">\r\n <ius-button-standard-tertiary\r\n iconName=\"icon-keyboard-arrow-left\"\r\n (buttonClicked)=\"prev()\"\r\n ></ius-button-standard-tertiary>\r\n\r\n <span (click)=\"calendarView = nextView(calendarView)\">\r\n @switch (calendarView) { @case ('day') {\r\n {{ getMonthName(viewDate.getMonth()) }}\r\n {{ viewDate.getFullYear() }}\r\n } @case ('month') {\r\n {{ viewDate.getFullYear() }}\r\n } @case ('year') {\r\n {{ getDecadeStart() }}-{{ getDecadeStart() + 9 }}\r\n } }\r\n </span>\r\n\r\n <ius-button-standard-tertiary\r\n iconName=\"icon-keyboard-arrow-right\"\r\n (buttonClicked)=\"next()\"\r\n ></ius-button-standard-tertiary>\r\n </div>\r\n\r\n <div class=\"calendar-body\">\r\n @switch (calendarView) { @case ('day') {\r\n <div class=\"grid days\">\r\n @for (day of dayLabels; track day) {\r\n <div class=\"header\">{{ day }}</div>\r\n } @for (date of calendarDays; track date) {\r\n <div\r\n class=\"cell\"\r\n [class.selected]=\"\r\n selectedDate && isSameDate(date, selectedDate)\r\n \"\r\n [class.out-of-range]=\"date.getMonth() !== viewDate.getMonth()\"\r\n (click)=\"selectDate(date, true)\"\r\n >\r\n {{ date.getDate() }}\r\n </div>\r\n }\r\n </div>\r\n } @case ('month') {\r\n <div class=\"grid months\">\r\n @for (m of months; track m; let i = $index) {\r\n <div class=\"cell\" (click)=\"setMonth(i)\">{{ m }}</div>\r\n }\r\n </div>\r\n } @case ('year') {\r\n <div class=\"grid years\">\r\n @for (i of yearsArray; track i) {\r\n <div\r\n class=\"cell\"\r\n [class.out-of-range]=\"i === 0 || i === 11\"\r\n (click)=\"setYear(getDecadeStart() - 1 + i)\"\r\n >\r\n {{ getDecadeStart() - 1 + i }}\r\n </div>\r\n }\r\n </div>\r\n } }\r\n </div>\r\n </div>\r\n } @if (mode !== 'date-only') {\r\n <div class=\"time-selector\">\r\n <button class=\"time-title\">\r\n <span>\r\n {{ selectedHour | number : \"2.0\" }}:{{\r\n selectedMinute === 0 ? \"00\" : (selectedMinute | number : \"2.0\")\r\n }}\r\n {{ selectedPeriod }}\r\n </span>\r\n </button>\r\n <ius-simple-divider></ius-simple-divider>\r\n <div class=\"time-columns\">\r\n <div class=\"column scrollable\">\r\n @for (h of hours; track h) {\r\n <div\r\n [class.selected]=\"h === selectedHour\"\r\n (click)=\"\r\n selectedHour = h;\r\n mode === 'time-only'\r\n ? selectTime()\r\n : selectDate(viewDate, true)\r\n \"\r\n >\r\n {{ h | number : \"2.0\" }}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"column scrollable\">\r\n @for (m of minutes; track m) {\r\n <div\r\n [class.selected]=\"m === selectedMinute\"\r\n (click)=\"\r\n selectedMinute = m;\r\n mode === 'time-only'\r\n ? selectTime()\r\n : selectDate(viewDate, true)\r\n \"\r\n >\r\n {{ m | number : \"2.0\" }}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"column\">\r\n <div\r\n [class.selected]=\"'AM' === selectedPeriod\"\r\n (click)=\"\r\n selectedPeriod = 'AM';\r\n mode === 'time-only'\r\n ? selectTime()\r\n : selectDate(viewDate, false)\r\n \"\r\n >\r\n AM\r\n </div>\r\n <div\r\n [class.selected]=\"'PM' === selectedPeriod\"\r\n (click)=\"\r\n selectedPeriod = 'PM';\r\n mode === 'time-only'\r\n ? selectTime()\r\n : selectDate(viewDate, false)\r\n \"\r\n >\r\n PM\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <ius-simple-divider></ius-simple-divider>\r\n <button class=\"today\" (click)=\"goToToday()\">\r\n @if (mode === 'date-only') { Fecha actual } @else if (mode ===\r\n 'time-only') { Hora actual } @else { Fecha y hora actual }\r\n </button>\r\n </div>\r\n </ng-template>\r\n <!-- ======== /OVERLAY (CDK) ======== -->\r\n </div>\r\n @if (helpText && focused && !error && !isAlertText) {\r\n <div class=\"help-text\">\r\n {{ helpText }}\r\n </div>\r\n } @if ((errorText || helpTextError) && (error || isAlertText)) {\r\n <div class=\"help-text-error\">\r\n {{ errorText ?? helpTextError }}\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.required{width:4px;height:4px;aspect-ratio:1/1;border-radius:50%;background-color:#ff4e3a}.text{display:flex;align-items:center;margin-bottom:8px;gap:4px}.cdk-overlay-pane.calendar-overlay-panel{z-index:9000;position:absolute!important}.input-wrapper{position:relative;display:inline-block;width:100%}.date-picker{width:100%;position:relative}.date-picker.disabled{opacity:.6;pointer-events:none}.date-picker .label{color:#333}.date-picker .help-icon{color:#595959}.container-textfield{display:flex;position:relative;align-items:flex-start;gap:4px}.container-textfield .input{width:100%;display:flex;align-items:flex-start;justify-content:center;gap:4px;padding:12px;border-radius:8px;background:#f5f5f5;cursor:pointer;border:none}.container-textfield .input input{flex:1;outline:none;border:none;background:#f5f5f5;color:#8c8c8c;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;font-style:normal;line-height:20px;letter-spacing:.28px;cursor:pointer}.container-textfield .cnt-icon-right{display:flex;align-items:center;justify-content:center;gap:8px;color:#333}.container-textfield .button-clear{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:#595959}.container-textfield .button-clear:hover,.container-textfield .icon-color-cancel{color:#013169}.container-textfield:hover .input,.container-textfield:hover .input input{background-color:#edf6ff}.container-textfield:hover .input .cnt-icon-right{color:#061b7a}.container-textfield.focused .input{border:1px solid #0581BC;background:#edf6ff}.container-textfield.focused .input input{background-color:#edf6ff;border:none}.container-textfield.focused .input .cnt-icon-right{color:#061b7a}.container-textfield.alert .input{border-radius:8px;border:1px solid #DB2E2A;background:#fff4f0}.container-textfield.alert .input input{background:#fff4f0}.container-textfield.alert .input .cnt-icon-right{color:#db2e2a}.container-textfield.selected .input{background:#f5f5f5}.container-textfield.selected .input input{background:#f5f5f5;border:none;color:#333;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.container-textfield.selected .input .help-icon{color:#595959}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.disabled .cnt-icon-right{color:#bfbfbf}.calendar-overlay{display:inline-block;border-radius:8px;border:1px solid #f5f5f5;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a}.calendar-overlay.time-only{min-width:200px;width:auto}.calendar-overlay.time-only .calendar-content{flex-direction:column;align-items:center;padding:12px}.calendar-overlay.time-only .time-selector{border-left:none;border-top:1px solid #f0f0f0;padding:12px;min-width:180px;width:100%}.calendar-overlay.time-only .time-selector .time-columns{justify-content:center;gap:8px}.calendar-overlay.time-only .time-selector .column{height:150px}.calendar-overlay.date-only{min-width:280px;width:auto}.calendar-overlay.date-only .calendar-content{flex-direction:column;align-items:center}.calendar-overlay.date-only .calendar-side{min-width:260px;width:100%}.calendar-content{display:flex;flex-direction:row;width:auto;max-width:none;max-height:60vh;overflow:hidden}.calendar-side{padding:12px;flex:1;min-width:260px}.calendar-header{display:flex;align-items:center;align-self:stretch}.calendar-header span{flex:1;display:flex;justify-content:center;align-items:center;color:#333;cursor:pointer;font-family:Roboto;font-size:1rem;font-weight:500;font-style:normal;line-height:22px}.calendar-body{display:flex;flex-direction:column;gap:8px;margin:0 10px}.grid{display:grid;gap:8px}.grid.days{grid-template-columns:repeat(7,1fr)}.grid.months,.grid.years{margin-left:27px;grid-template-columns:repeat(3,1fr)}.grid .header{display:flex;align-items:center;height:30px;padding:2px 4px;gap:16px;color:#333;font-family:Rubik;font-size:.75rem;font-weight:500;font-style:normal;line-height:16px;letter-spacing:.24px}.grid .cell{display:flex;width:24px;height:24px;min-width:24px;min-height:24px;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:1/1;background:#fff;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;font-style:normal;line-height:20px;letter-spacing:.28px;cursor:pointer}.grid .cell:hover{background:#edf6ff}.grid .cell.out-of-range{color:#bfbfbf}.grid .cell.selected{border-radius:100px;border:1px solid #184FDB;background:#2167ff;color:#fff}.today{margin-top:8px;width:100%;padding:8px;border:none;background:transparent;display:flex;justify-content:center;align-items:center;gap:4px;color:#333;cursor:pointer;font-family:Roboto;font-size:1rem;font-weight:500;font-style:normal;line-height:22px}.today:hover{background-color:#edf6ff;border-radius:4px}.calendar-overlay .calendar-content{overflow-x:hidden}.time-selector{border-left:1px solid #f0f0f0;padding:12px 8px;display:flex;flex-direction:column;gap:8px;min-width:150px}.time-selector .time-columns{display:flex;gap:4px;justify-content:center}.time-selector .time-title{display:flex;padding:8px;justify-content:center;align-items:center;gap:4px;align-self:stretch;border-radius:4px;border:none;background-color:#fff}.time-selector .time-title span{color:#333;font-family:Roboto,sans-serif;font-size:1rem;font-style:normal;font-weight:500;line-height:22px}.time-selector .divider{background-color:#b6b4b430;height:100%;width:1px}.time-selector .column{overflow-y:auto;display:flex;height:218px;flex-direction:column;align-items:flex-start;margin:0 2px}.time-selector .column .list{display:flex;padding:4px 8px;justify-content:flex-end;align-items:flex-start;gap:8px;align-self:stretch}.time-selector .column::-webkit-scrollbar{width:4px}.time-selector .column::-webkit-scrollbar-thumb{background-color:#fff;border-radius:4px}.time-selector .column div{display:flex;height:28px;padding:4px 8px;justify-content:flex-end;align-items:flex-start;gap:8px;flex-shrink:0;align-self:stretch;background:#fff;color:#595959;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.time-selector .column div:hover{cursor:pointer}.time-selector .column div.selected{display:flex;padding:4px 8px;justify-content:flex-end;align-items:center;gap:8px;align-self:stretch;border-radius:8px;background:#2167ff;color:#fff}.time-selector .today{margin-top:8px;padding:8px;text-align:center;font-weight:500;color:#333}.help-text{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}.help-text-error{display:flex;position:absolute;margin-top:4px;color:#931224;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}\n"] }]
|
|
2657
2724
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
|
|
2658
2725
|
type: Input
|
|
2659
2726
|
}], placeholder: [{
|
|
@@ -2674,6 +2741,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2674
2741
|
type: Input
|
|
2675
2742
|
}], mode: [{
|
|
2676
2743
|
type: Input
|
|
2744
|
+
}], isEnableClear: [{
|
|
2745
|
+
type: Input
|
|
2746
|
+
}], value: [{
|
|
2747
|
+
type: Input
|
|
2677
2748
|
}], dateSelected: [{
|
|
2678
2749
|
type: Output
|
|
2679
2750
|
}], onBlurEvent: [{
|
|
@@ -7119,14 +7190,14 @@ class CardVigilanciaJudicialComponent {
|
|
|
7119
7190
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CardVigilanciaJudicialComponent, isStandalone: true, selector: "ius-card-vigilancia-judicial", inputs: { collapse: "collapse", hasNotificacion: "hasNotificacion", hasAuto: "hasAuto", read: "read", titulo: "titulo", juzgado: "juzgado", fechaPrincipal: "fechaPrincipal", actuaciones: "actuaciones" }, outputs: { onClickButtonCopy: "onClickButtonCopy", onClickButtonRead: "onClickButtonRead", onClickButtonNotificacion: "onClickButtonNotificacion", onClickButtonAuto: "onClickButtonAuto" }, providers: [
|
|
7120
7191
|
{ provide: LOCALE_ID, useValue: 'es' },
|
|
7121
7192
|
DatePipe
|
|
7122
|
-
], ngImport: i0, template: "<div class=\"ctn-gnrl\" (click)=\"toggleCollapse()\">\
|
|
7193
|
+
], ngImport: i0, template: "<div class=\"ctn-gnrl\" (click)=\"toggleCollapse()\">\n <div class=\"ctn-card\">\n <div class=\"ctn-inf\">\n <ius-icon-sm iconName=\"icon-account-balance\" class=\"icon-account\"\n [ngClass]=\"{'priority-tx': hasNotificacion || hasAuto }\"></ius-icon-sm>\n <div class=\"info\">\n <span class=\"caption-sm txt-ter\">Vigilancia Judicial</span>\n <span class=\"body-base-1 txt-pry\" [ngClass]=\"{'title-no-read': read === false}\">{{titulo}}</span>\n <span class=\"body-base-1 txt-sec\">{{juzgado}}</span>\n </div>\n </div>\n <div class=\"ctn-icons\">\n @if (hasNotificacion || hasAuto) {\n <div class=\"row-text-1\">\n @if (hasNotificacion) {\n <ius-icon-sm iconName=\"icon-notification-2\" class=\"txt-sec\"></ius-icon-sm>\n }\n @if (hasAuto) {\n <ius-icon-sm iconName=\"icon-docs-2\" class=\"txt-sec\"></ius-icon-sm>\n }\n </div>\n }\n <div class=\"row-text-2\">\n <div class=\"icon-dot\" [ngClass]=\"{'icon-dot-f': read === true}\"></div>\n <span class=\"body-sm txt-ter fecha\">{{fechaPrincipal | date: 'd MMM y'}}</span>\n <span class=\"buttons-hove\">\n <ius-button-circle-tertiary iconName=\"icon-mark-chat-read\"\n [iusPopoverContent]=\"read ? 'Marcar como no le\u00EDdo' : 'Marcar como le\u00EDdo'\"\n (buttonClicked)=\"clickButtonRead($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-content-copy\"\n iusPopoverContent=\"Copiar informaci\u00F3n\"\n (buttonClicked)=\"clickButtonCopy($event)\"></ius-button-circle-tertiary>\n </span>\n </div>\n <ius-icon-sm [iconName]=\"collapse ? 'icon-keyboard-arrow-down' : 'icon-keyboard-arrow-up'\"\n class=\"txt-pry\"></ius-icon-sm>\n </div>\n </div>\n <div class=\"ctn-collapse-card\" [ngClass]=\"{'collapsed': collapse}\">\n <ius-simple-divider></ius-simple-divider>\n <div class=\"ctn-clp\">\n <div class=\"ctn-info-clp\">\n @for (act of actuaciones; track $index) {\n <div class=\"text-info\">\n <div class=\"row-text-1 body-sm txt-ter\">\n @if (act.fechaIniciaTermino) {\n <span>Inicia t\u00E9rmino: {{act.fechaIniciaTermino | date: 'd MMM y'}}</span>\n } @else {\n <span>Fecha registro: {{act.fechaActuacion | date: 'd MMM y'}}</span>\n }\n @if (act.fechaFinalizaTermino) {\n <span>-</span>\n <span>Finaliza t\u00E9rmino: {{act.fechaFinalizaTermino | date: 'd MMM y'}}</span>\n }\n </div>\n <span class=\"label-base txt-ter\">{{act.actuacion}}</span>\n <span class=\"body-base-1 txt-sec\">{{act.anotacion}}</span>\n </div>\n }\n </div>\n <div class=\"buttons-clp\">\n @if (hasNotificacion) {\n <ius-button-menu-link iconName=\"icon-notificacion\" iconColor=\"#184FDB\"\n iusPopoverContent=\"Ver notificaci\u00F3n\"\n (buttonClicked)=\"clickButtonNotificacion($event)\"></ius-button-menu-link>\n <ius-simple-divider></ius-simple-divider>\n }\n @if (hasAuto) {\n <ius-button-menu-link iconName=\"icon-docs\" iconColor=\"#184FDB\" iusPopoverContent=\"Ver auto\"\n (buttonClicked)=\"clickButtonAuto($event)\"></ius-button-menu-link>\n <ius-simple-divider></ius-simple-divider>\n }\n </div>\n </div>\n </div>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.ctn-gnrl{position:relative;display:flex;flex-direction:column;cursor:pointer;padding:8px 12px;box-sizing:border-box;border-radius:4px;border:1px solid #eaeaea}.ctn-gnrl:hover{border:1px solid #C4DFFF;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ctn-gnrl:hover .fecha{display:none;pointer-events:none}.ctn-gnrl:hover .buttons-hove{display:flex;pointer-events:auto}.ctn-card{position:relative;display:flex;align-items:center;gap:24px;min-height:40px;justify-content:center}.ctn-inf{display:flex;flex:1 0 0;align-items:center;gap:16px}.title-no-read{font-weight:500}.icon-account{color:#8c8c8c}.priority-tx{color:#497610}.info{display:flex;flex:1 0 0;flex-direction:column;align-items:flex-start}.ctn-icons{display:flex;align-items:center;gap:16px}.icon-dot{display:flex;align-items:center;width:8px;height:8px;aspect-ratio:1/1;background-color:#2167ff;border-radius:100px}.icon-dot-f{background-color:transparent}.fecha{width:76px}.buttons-hove{display:none;pointer-events:none;gap:4px;width:76px}.ctn-collapse-card{max-height:1000px;overflow:hidden;transition:max-height .3s ease-in-out}.ctn-collapse-card.collapsed{max-height:0px}.ctn-clp{display:flex;gap:8px}.buttons-clp{display:flex;padding:4px;flex-direction:column;gap:4px}.ctn-info-clp{display:flex;padding:4px 8px;flex-direction:column;gap:12px;flex:1 0 0}.text-info{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}ius-simple-divider{margin:8px 0}.row-text-1{display:flex;align-items:center;gap:8px}.row-text-2{display:flex;align-items:center;gap:4px}.txt-pry{color:#333}.txt-sec{color:#595959}.txt-ter{color:#8c8c8c}\n"], dependencies: [{ kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonCircleTertiaryComponent, selector: "ius-button-circle-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }, { kind: "component", type: SimpleDividerComponent, selector: "ius-simple-divider" }, { kind: "component", type: ButtonMenuLinkComponent, selector: "ius-button-menu-link", inputs: ["disabled", "iconColor", "iconName"], outputs: ["buttonClicked"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: PopoverDirective, selector: "[iusPopover], [iusPopoverTitle], [iusPopoverContent]", inputs: ["iusPopover", "iusPopoverTitle", "iusPopoverContent", "iusPopoverPosition", "iusPopoverOpenDelay", "iusPopoverCloseDelay"] }] }); }
|
|
7123
7194
|
}
|
|
7124
7195
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardVigilanciaJudicialComponent, decorators: [{
|
|
7125
7196
|
type: Component,
|
|
7126
7197
|
args: [{ selector: 'ius-card-vigilancia-judicial', standalone: true, imports: [IconSmComponent, NgClass, ButtonCircleTertiaryComponent, SimpleDividerComponent, ButtonMenuLinkComponent, DatePipe, PopoverDirective], providers: [
|
|
7127
7198
|
{ provide: LOCALE_ID, useValue: 'es' },
|
|
7128
7199
|
DatePipe
|
|
7129
|
-
], template: "<div class=\"ctn-gnrl\" (click)=\"toggleCollapse()\">\
|
|
7200
|
+
], template: "<div class=\"ctn-gnrl\" (click)=\"toggleCollapse()\">\n <div class=\"ctn-card\">\n <div class=\"ctn-inf\">\n <ius-icon-sm iconName=\"icon-account-balance\" class=\"icon-account\"\n [ngClass]=\"{'priority-tx': hasNotificacion || hasAuto }\"></ius-icon-sm>\n <div class=\"info\">\n <span class=\"caption-sm txt-ter\">Vigilancia Judicial</span>\n <span class=\"body-base-1 txt-pry\" [ngClass]=\"{'title-no-read': read === false}\">{{titulo}}</span>\n <span class=\"body-base-1 txt-sec\">{{juzgado}}</span>\n </div>\n </div>\n <div class=\"ctn-icons\">\n @if (hasNotificacion || hasAuto) {\n <div class=\"row-text-1\">\n @if (hasNotificacion) {\n <ius-icon-sm iconName=\"icon-notification-2\" class=\"txt-sec\"></ius-icon-sm>\n }\n @if (hasAuto) {\n <ius-icon-sm iconName=\"icon-docs-2\" class=\"txt-sec\"></ius-icon-sm>\n }\n </div>\n }\n <div class=\"row-text-2\">\n <div class=\"icon-dot\" [ngClass]=\"{'icon-dot-f': read === true}\"></div>\n <span class=\"body-sm txt-ter fecha\">{{fechaPrincipal | date: 'd MMM y'}}</span>\n <span class=\"buttons-hove\">\n <ius-button-circle-tertiary iconName=\"icon-mark-chat-read\"\n [iusPopoverContent]=\"read ? 'Marcar como no le\u00EDdo' : 'Marcar como le\u00EDdo'\"\n (buttonClicked)=\"clickButtonRead($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-content-copy\"\n iusPopoverContent=\"Copiar informaci\u00F3n\"\n (buttonClicked)=\"clickButtonCopy($event)\"></ius-button-circle-tertiary>\n </span>\n </div>\n <ius-icon-sm [iconName]=\"collapse ? 'icon-keyboard-arrow-down' : 'icon-keyboard-arrow-up'\"\n class=\"txt-pry\"></ius-icon-sm>\n </div>\n </div>\n <div class=\"ctn-collapse-card\" [ngClass]=\"{'collapsed': collapse}\">\n <ius-simple-divider></ius-simple-divider>\n <div class=\"ctn-clp\">\n <div class=\"ctn-info-clp\">\n @for (act of actuaciones; track $index) {\n <div class=\"text-info\">\n <div class=\"row-text-1 body-sm txt-ter\">\n @if (act.fechaIniciaTermino) {\n <span>Inicia t\u00E9rmino: {{act.fechaIniciaTermino | date: 'd MMM y'}}</span>\n } @else {\n <span>Fecha registro: {{act.fechaActuacion | date: 'd MMM y'}}</span>\n }\n @if (act.fechaFinalizaTermino) {\n <span>-</span>\n <span>Finaliza t\u00E9rmino: {{act.fechaFinalizaTermino | date: 'd MMM y'}}</span>\n }\n </div>\n <span class=\"label-base txt-ter\">{{act.actuacion}}</span>\n <span class=\"body-base-1 txt-sec\">{{act.anotacion}}</span>\n </div>\n }\n </div>\n <div class=\"buttons-clp\">\n @if (hasNotificacion) {\n <ius-button-menu-link iconName=\"icon-notificacion\" iconColor=\"#184FDB\"\n iusPopoverContent=\"Ver notificaci\u00F3n\"\n (buttonClicked)=\"clickButtonNotificacion($event)\"></ius-button-menu-link>\n <ius-simple-divider></ius-simple-divider>\n }\n @if (hasAuto) {\n <ius-button-menu-link iconName=\"icon-docs\" iconColor=\"#184FDB\" iusPopoverContent=\"Ver auto\"\n (buttonClicked)=\"clickButtonAuto($event)\"></ius-button-menu-link>\n <ius-simple-divider></ius-simple-divider>\n }\n </div>\n </div>\n </div>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.ctn-gnrl{position:relative;display:flex;flex-direction:column;cursor:pointer;padding:8px 12px;box-sizing:border-box;border-radius:4px;border:1px solid #eaeaea}.ctn-gnrl:hover{border:1px solid #C4DFFF;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ctn-gnrl:hover .fecha{display:none;pointer-events:none}.ctn-gnrl:hover .buttons-hove{display:flex;pointer-events:auto}.ctn-card{position:relative;display:flex;align-items:center;gap:24px;min-height:40px;justify-content:center}.ctn-inf{display:flex;flex:1 0 0;align-items:center;gap:16px}.title-no-read{font-weight:500}.icon-account{color:#8c8c8c}.priority-tx{color:#497610}.info{display:flex;flex:1 0 0;flex-direction:column;align-items:flex-start}.ctn-icons{display:flex;align-items:center;gap:16px}.icon-dot{display:flex;align-items:center;width:8px;height:8px;aspect-ratio:1/1;background-color:#2167ff;border-radius:100px}.icon-dot-f{background-color:transparent}.fecha{width:76px}.buttons-hove{display:none;pointer-events:none;gap:4px;width:76px}.ctn-collapse-card{max-height:1000px;overflow:hidden;transition:max-height .3s ease-in-out}.ctn-collapse-card.collapsed{max-height:0px}.ctn-clp{display:flex;gap:8px}.buttons-clp{display:flex;padding:4px;flex-direction:column;gap:4px}.ctn-info-clp{display:flex;padding:4px 8px;flex-direction:column;gap:12px;flex:1 0 0}.text-info{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}ius-simple-divider{margin:8px 0}.row-text-1{display:flex;align-items:center;gap:8px}.row-text-2{display:flex;align-items:center;gap:4px}.txt-pry{color:#333}.txt-sec{color:#595959}.txt-ter{color:#8c8c8c}\n"] }]
|
|
7130
7201
|
}], ctorParameters: () => [{ type: i1$1.DatePipe }], propDecorators: { collapse: [{
|
|
7131
7202
|
type: Input
|
|
7132
7203
|
}], hasNotificacion: [{
|
|
@@ -7346,14 +7417,14 @@ class CardActividadEventoComponent {
|
|
|
7346
7417
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CardActividadEventoComponent, isStandalone: true, selector: "ius-card-actividad-evento", inputs: { read: "read", warning: "warning", collapse: "collapse", done: "done", titulo: "titulo", usuarioAsignado: "usuarioAsignado", fechaProgramacion: "fechaProgramacion", fechaPrincipal: "fechaPrincipal", text1: "text1", estado: "estado", fechaInicio: "fechaInicio", fechaFin: "fechaFin", descripcion: "descripcion", link: "link", mostrarHoraInicio: "mostrarHoraInicio", mostrarHoraFin: "mostrarHoraFin", mostrarHoraProgramacion: "mostrarHoraProgramacion", masiva: "masiva", cantidadProcesos: "cantidadProcesos", procesos: "procesos" }, outputs: { onClickButtonCopy: "onClickButtonCopy", onClickButtonRead: "onClickButtonRead", onClickButtonEdit: "onClickButtonEdit", onClickButtonDelete: "onClickButtonDelete", onClickButtonDone: "onClickButtonDone" }, providers: [
|
|
7347
7418
|
{ provide: LOCALE_ID, useValue: 'es' },
|
|
7348
7419
|
DatePipe
|
|
7349
|
-
], ngImport: i0, template: "<div class=\"ctn-gnrl\" (click)=\"toggleCollapse()\">\r\n <div class=\"ctn-card\">\r\n <div class=\"ctn-inf\">\r\n <ius-icon-sm iconName=\"icon-calendar-clock\" class=\"priority-tx\"\r\n [ngClass]=\"{'icon-calendar-clock': estado === 'Finalizada' }\"></ius-icon-sm>\r\n <div class=\"info\">\r\n <span class=\"caption-sm txt-ter\">Actividades y eventos</span>\r\n <div class=\"row-titulo\">\r\n <span class=\"label-base txt-pry\" [ngClass]=\"{'body-base-1': read}\">{{titulo}}</span>\r\n @if (masiva) {\r\n <span class=\"masiva-badge caption-sm\">\r\n <ius-icon-xs iconName=\"icon-library-add-check\"></ius-icon-xs>\r\n {{ masivaLabel }}\r\n </span>\r\n }\r\n </div>\r\n <div class=\"tx-asig\">\r\n <div class=\"row-text-2\">\r\n <span class=\"caption-sm txt-ter\">Asignado a</span>\r\n <span class=\"body-base-1 txt-sec\">{{usuarioAsignado}}</span>\r\n </div>\r\n <div class=\"row-text-2\">\r\n <span class=\"caption-sm txt-ter\">{{ headerFechaLabel }}</span>\r\n <span class=\"body-base-1 txt-sec\">{{fechaProgramacion | date: formatoFechaProgramacion}}</span>\r\n </div>\r\n </div>\r\n <span class=\"body-base-1 txt-sec\">{{text1}}</span>\r\n </div>\r\n </div>\r\n <div class=\"ctn-icons\">\r\n <div class=\"row-text-2\">\r\n @if (!read) {\r\n <div class=\"icon-dot\"></div>\r\n }\r\n @if (warning && estado !== 'Finalizada') {\r\n <ius-icon-xs iconName=\"icon-emergency-home\" class=\"icon-emergency-home\"></ius-icon-xs>\r\n }\r\n <span class=\"body-sm txt-ter fecha\">{{fechaPrincipal | date: 'd MMM y'}}</span>\r\n <span class=\"buttons-hove\">\r\n <ius-button-circle-tertiary iconName=\"icon-mark-chat-read\"\r\n [iusPopoverContent]=\"read ? 'Marcar como no le\u00EDdo' : 'Marcar como le\u00EDdo'\"\r\n (buttonClicked)=\"clickButtonRead($event)\"></ius-button-circle-tertiary>\r\n <ius-button-circle-tertiary iconName=\"icon-content-copy\"\r\n iusPopoverContent=\"Copiar informaci\u00F3n\"\r\n (buttonClicked)=\"clickButtonCopy($event)\"></ius-button-circle-tertiary>\r\n <ius-button-circle-tertiary iconName=\"icon-done-outline\"\r\n [iusPopoverContent]=\"done ? 'Marcar como abierta' : 'Marcar como hecha'\"\r\n (buttonClicked)=\"clickButtonDone($event)\"></ius-button-circle-tertiary>\r\n <ius-button-circle-tertiary iconName=\"icon-edit\"\r\n iusPopoverContent=\"Editar\"\r\n (buttonClicked)=\"clickButtonEdit($event)\"></ius-button-circle-tertiary>\r\n <ius-button-circle-tertiary iconName=\"icon-delete\"\r\n iusPopoverContent=\"Eliminar\"\r\n (buttonClicked)=\"clickButtonDelete($event)\"></ius-button-circle-tertiary>\r\n </span>\r\n </div>\r\n <ius-icon-sm [iconName]=\"collapse ? 'icon-keyboard-arrow-down' : 'icon-keyboard-arrow-up'\"\r\n class=\"txt-pry\"></ius-icon-sm>\r\n </div>\r\n </div>\r\n <div class=\"ctn-collapse-card\" [ngClass]=\"{'collapsed': collapse}\">\r\n <ius-simple-divider></ius-simple-divider>\r\n <div class=\"ctn-clp\">\r\n <div class=\"ctn-info-clp\">\r\n <div class=\"text-info\">\r\n <span class=\"label-base\" [ngClass]=\"estadoLabelClass\">{{ estadoLabel }}</span>\r\n <div class=\"row-text-1 body-sm txt-ter\">\r\n <span>{{fechaInicio | date: formatoFechaInicio}}</span>\r\n @if (fechaFin) {\r\n <span>-</span>\r\n <span>{{fechaFin | date: formatoFechaFin}}</span>\r\n }\r\n </div>\r\n <span class=\"body-base-1 txt-pry\">{{descripcion}}</span>\r\n @if (link) {\r\n <a class=\"body-sm link-actividad\" (click)=\"openLink($event)\">\r\n <ius-icon-xs iconName=\"icon-link-2\"></ius-icon-xs>\r\n <span>{{ link }}</span>\r\n </a>\r\n }\r\n\r\n @if (masiva && procesos.length > 0) {\r\n <div class=\"ctn-procesos-masiva\">\r\n <span class=\"caption-sm txt-ter\">Procesos vinculados ({{ cantidadProcesos ?? procesos.length }})</span>\r\n <div class=\"procesos-list scrollable\">\r\n @for (p of procesos; track p.actividadID) {\r\n <div class=\"proceso-item\">\r\n <div class=\"proceso-l1\">\r\n @if (p.tipoProceso) {\r\n <span class=\"proceso-tag caption-sm\" [iusPopoverContent]=\"'Tipo de proceso: ' + p.tipoProceso\">{{ p.tipoProceso }}</span>\r\n }\r\n <span class=\"proceso-cod caption-sm\" [iusPopoverContent]=\"(p.codigoInterno ? 'C\u00F3digo interno: ' + p.codigoInterno : '') + (p.codigoInterno && p.radicado23Nit ? ' \u00B7 ' : '') + (p.radicado23Nit ? 'Radicado: ' + p.radicado23Nit : '')\">\r\n @if (p.codigoInterno) { <span class=\"txt-pry\">{{ p.codigoInterno }}</span> }\r\n @if (p.codigoInterno && p.radicado23Nit) { <span class=\"txt-ter\"> \u00B7 </span> }\r\n @if (p.radicado23Nit) { <span class=\"txt-ter\">{{ p.radicado23Nit }}</span> }\r\n </span>\r\n @if (p.warning) {\r\n <ius-icon-xs iconName=\"icon-emergency-home\" class=\"icon-emergency-home\"></ius-icon-xs>\r\n }\r\n </div>\r\n @if (p.parteActiva || p.partePasiva) {\r\n <div class=\"proceso-l2 caption-sm txt-ter\" [iusPopoverContent]=\"(p.parteActiva ? 'Parte activa: ' + p.parteActiva : '') + (p.parteActiva && p.partePasiva ? ' \u2014 ' : '') + (p.partePasiva ? 'Parte pasiva: ' + p.partePasiva : '')\">\r\n @if (p.parteActiva) { <span>{{ p.parteActiva }}</span> }\r\n @if (p.parteActiva && p.partePasiva) { <span> - </span> }\r\n @if (p.partePasiva) { <span>{{ p.partePasiva }}</span> }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.ctn-gnrl{position:relative;display:flex;flex-direction:column;cursor:pointer;padding:8px 12px;box-sizing:border-box;border-radius:4px;border:1px solid #eaeaea}.ctn-gnrl:hover{border:1px solid #C4DFFF;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ctn-gnrl:hover .fecha{display:none;pointer-events:none}.ctn-gnrl:hover .buttons-hove{display:flex;pointer-events:auto}.ctn-card{position:relative;display:flex;align-items:center;gap:24px}.ctn-inf{display:flex;flex:1 0 0;align-items:center;gap:16px}.icon-calendar-clock{color:#8c8c8c!important}.priority-tx{color:#184fdb}.tx-asig{display:flex;gap:24px}.info{display:flex;flex:1 0 0;flex-direction:column;align-items:flex-start}.ctn-icons{display:flex;align-items:center;gap:16px}.icon-dot{display:flex;align-items:center;width:8px;height:8px;aspect-ratio:1/1;background-color:#2167ff;border-radius:100px}.icon-dot-warning{display:flex;align-items:center;width:8px;height:8px;aspect-ratio:1/1;background-color:#ffae00;border-radius:100px}.icon-emergency-home{color:#ffae00}.fecha{width:76px}.buttons-hove{display:none;pointer-events:none;gap:4px}.ctn-collapse-card{max-height:1000px;overflow:hidden;transition:max-height .3s ease-in-out}.ctn-collapse-card.collapsed{max-height:0px}.ctn-clp{display:flex;gap:8px}.ctn-info-clp{display:flex;padding:4px 8px;flex-direction:column;gap:12px;flex:1 0 0}.text-info{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}.tx-read{color:#629219}.tx-warn{color:#db8e00}.tx-info{color:#5892ff}ius-simple-divider{margin:8px 0}.row-text-1{display:flex;align-items:center;gap:8px}.row-text-2{display:flex;align-items:center;gap:4px}.txt-pry{color:#333}.txt-sec{color:#595959}.txt-ter{color:#8c8c8c}.link-actividad{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:4px 8px;border-radius:4px;color:#595959;cursor:pointer;text-decoration:none;word-break:break-all}.link-actividad:hover{background-color:#edf6ff;text-decoration:underline}.row-titulo{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.masiva-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:100px;background:#edf6ff;color:#103ab7;font-weight:500;white-space:nowrap}.ctn-procesos-masiva{display:flex;flex-direction:column;gap:4px;width:100%;margin-top:8px}.procesos-list{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow-y:auto}.proceso-item{display:flex;flex-direction:column;gap:2px;padding:4px 8px;border-radius:4px;border:1px solid #eaeaea;background:#fff}.proceso-l1{display:flex;align-items:center;gap:4px;min-width:0}.proceso-tag{flex-shrink:0;padding:1px 8px;border-radius:100px;background:#edf6ff;color:#103ab7;font-weight:500;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}.proceso-cod{flex:1 0 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.proceso-l2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ellipsis-1{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonCircleTertiaryComponent, selector: "ius-button-circle-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }, { kind: "component", type: SimpleDividerComponent, selector: "ius-simple-divider" }, { kind: "component", type: IconXsComponent, selector: "ius-icon-xs", inputs: ["iconName", "color"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: PopoverDirective, selector: "[iusPopover], [iusPopoverTitle], [iusPopoverContent]", inputs: ["iusPopover", "iusPopoverTitle", "iusPopoverContent", "iusPopoverPosition", "iusPopoverOpenDelay", "iusPopoverCloseDelay"] }] }); }
|
|
7420
|
+
], ngImport: i0, template: "<div class=\"ctn-gnrl\" (click)=\"toggleCollapse()\">\n <div class=\"ctn-card\">\n <div class=\"ctn-inf\">\n <ius-icon-sm iconName=\"icon-calendar-clock\" class=\"priority-tx\"\n [ngClass]=\"{'icon-calendar-clock': estado === 'Finalizada' }\"></ius-icon-sm>\n <div class=\"info\">\n <span class=\"caption-sm txt-ter\">Actividades y eventos</span>\n <div class=\"row-titulo\">\n <span class=\"label-base txt-pry\" [ngClass]=\"{'body-base-1': read}\">{{titulo}}</span>\n @if (masiva) {\n <span class=\"masiva-badge caption-sm\">\n <ius-icon-xs iconName=\"icon-library-add-check\"></ius-icon-xs>\n {{ masivaLabel }}\n </span>\n }\n </div>\n <div class=\"tx-asig\">\n <div class=\"row-text-2\">\n <span class=\"caption-sm txt-ter\">Asignado a</span>\n <span class=\"body-base-1 txt-sec\">{{usuarioAsignado}}</span>\n </div>\n <div class=\"row-text-2\">\n <span class=\"caption-sm txt-ter\">{{ headerFechaLabel }}</span>\n <span class=\"body-base-1 txt-sec\">{{fechaProgramacion | date: formatoFechaProgramacion}}</span>\n </div>\n </div>\n <span class=\"body-base-1 txt-sec\">{{text1}}</span>\n </div>\n </div>\n <div class=\"ctn-icons\">\n <div class=\"row-text-2\">\n @if (!read) {\n <div class=\"icon-dot\"></div>\n }\n @if (warning && estado !== 'Finalizada') {\n <ius-icon-xs iconName=\"icon-emergency-home\" class=\"icon-emergency-home\"></ius-icon-xs>\n }\n <span class=\"body-sm txt-ter fecha\">{{fechaPrincipal | date: 'd MMM y'}}</span>\n <span class=\"buttons-hove\">\n <ius-button-circle-tertiary iconName=\"icon-mark-chat-read\"\n [iusPopoverContent]=\"read ? 'Marcar como no le\u00EDdo' : 'Marcar como le\u00EDdo'\"\n (buttonClicked)=\"clickButtonRead($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-content-copy\"\n iusPopoverContent=\"Copiar informaci\u00F3n\"\n (buttonClicked)=\"clickButtonCopy($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-done-outline\"\n [iusPopoverContent]=\"done ? 'Marcar como abierta' : 'Marcar como hecha'\"\n (buttonClicked)=\"clickButtonDone($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-edit\"\n iusPopoverContent=\"Editar\"\n (buttonClicked)=\"clickButtonEdit($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-delete\"\n iusPopoverContent=\"Eliminar\"\n (buttonClicked)=\"clickButtonDelete($event)\"></ius-button-circle-tertiary>\n </span>\n </div>\n <ius-icon-sm [iconName]=\"collapse ? 'icon-keyboard-arrow-down' : 'icon-keyboard-arrow-up'\"\n class=\"txt-pry\"></ius-icon-sm>\n </div>\n </div>\n <div class=\"ctn-collapse-card\" [ngClass]=\"{'collapsed': collapse}\">\n <ius-simple-divider></ius-simple-divider>\n <div class=\"ctn-clp\">\n <div class=\"ctn-info-clp\">\n <div class=\"text-info\">\n <span class=\"label-base\" [ngClass]=\"estadoLabelClass\">{{ estadoLabel }}</span>\n <div class=\"row-text-1 body-sm txt-ter\">\n <span>{{fechaInicio | date: formatoFechaInicio}}</span>\n @if (fechaFin) {\n <span>-</span>\n <span>{{fechaFin | date: formatoFechaFin}}</span>\n }\n </div>\n <span class=\"body-base-1 txt-pry\">{{descripcion}}</span>\n @if (link) {\n <a class=\"body-sm link-actividad\" (click)=\"openLink($event)\">\n <ius-icon-xs iconName=\"icon-link-2\"></ius-icon-xs>\n <span>{{ link }}</span>\n </a>\n }\n\n @if (masiva && procesos.length > 0) {\n <div class=\"ctn-procesos-masiva\">\n <span class=\"caption-sm txt-ter\">Procesos vinculados ({{ cantidadProcesos ?? procesos.length }})</span>\n <div class=\"procesos-list scrollable\">\n @for (p of procesos; track p.actividadID) {\n <div class=\"proceso-item\">\n <div class=\"proceso-l1\">\n @if (p.tipoProceso) {\n <span class=\"proceso-tag caption-sm\" [iusPopoverContent]=\"'Tipo de proceso: ' + p.tipoProceso\">{{ p.tipoProceso }}</span>\n }\n <span class=\"proceso-cod caption-sm\" [iusPopoverContent]=\"(p.codigoInterno ? 'C\u00F3digo interno: ' + p.codigoInterno : '') + (p.codigoInterno && p.radicado23Nit ? ' \u00B7 ' : '') + (p.radicado23Nit ? 'Radicado: ' + p.radicado23Nit : '')\">\n @if (p.codigoInterno) { <span class=\"txt-pry\">{{ p.codigoInterno }}</span> }\n @if (p.codigoInterno && p.radicado23Nit) { <span class=\"txt-ter\"> \u00B7 </span> }\n @if (p.radicado23Nit) { <span class=\"txt-ter\">{{ p.radicado23Nit }}</span> }\n </span>\n @if (p.warning) {\n <ius-icon-xs iconName=\"icon-emergency-home\" class=\"icon-emergency-home\"></ius-icon-xs>\n }\n </div>\n @if (p.parteActiva || p.partePasiva) {\n <div class=\"proceso-l2 caption-sm txt-ter\" [iusPopoverContent]=\"(p.parteActiva ? 'Parte activa: ' + p.parteActiva : '') + (p.parteActiva && p.partePasiva ? ' \u2014 ' : '') + (p.partePasiva ? 'Parte pasiva: ' + p.partePasiva : '')\">\n @if (p.parteActiva) { <span>{{ p.parteActiva }}</span> }\n @if (p.parteActiva && p.partePasiva) { <span> - </span> }\n @if (p.partePasiva) { <span>{{ p.partePasiva }}</span> }\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n</div>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.ctn-gnrl{position:relative;display:flex;flex-direction:column;cursor:pointer;padding:8px 12px;box-sizing:border-box;border-radius:4px;border:1px solid #eaeaea}.ctn-gnrl:hover{border:1px solid #C4DFFF;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ctn-gnrl:hover .fecha{display:none;pointer-events:none}.ctn-gnrl:hover .buttons-hove{display:flex;pointer-events:auto}.ctn-card{position:relative;display:flex;align-items:center;gap:24px}.ctn-inf{display:flex;flex:1 0 0;align-items:center;gap:16px}.icon-calendar-clock{color:#8c8c8c!important}.priority-tx{color:#184fdb}.tx-asig{display:flex;gap:24px}.info{display:flex;flex:1 0 0;flex-direction:column;align-items:flex-start}.ctn-icons{display:flex;align-items:center;gap:16px}.icon-dot{display:flex;align-items:center;width:8px;height:8px;aspect-ratio:1/1;background-color:#2167ff;border-radius:100px}.icon-dot-warning{display:flex;align-items:center;width:8px;height:8px;aspect-ratio:1/1;background-color:#ffae00;border-radius:100px}.icon-emergency-home{color:#ffae00}.fecha{width:76px}.buttons-hove{display:none;pointer-events:none;gap:4px}.ctn-collapse-card{max-height:1000px;overflow:hidden;transition:max-height .3s ease-in-out}.ctn-collapse-card.collapsed{max-height:0px}.ctn-clp{display:flex;gap:8px}.ctn-info-clp{display:flex;padding:4px 8px;flex-direction:column;gap:12px;flex:1 0 0}.text-info{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}.tx-read{color:#629219}.tx-warn{color:#db8e00}.tx-info{color:#5892ff}ius-simple-divider{margin:8px 0}.row-text-1{display:flex;align-items:center;gap:8px}.row-text-2{display:flex;align-items:center;gap:4px}.txt-pry{color:#333}.txt-sec{color:#595959}.txt-ter{color:#8c8c8c}.link-actividad{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:4px 8px;border-radius:4px;color:#595959;cursor:pointer;text-decoration:none;word-break:break-all}.link-actividad:hover{background-color:#edf6ff;text-decoration:underline}.row-titulo{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.masiva-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:100px;background:#edf6ff;color:#103ab7;font-weight:500;white-space:nowrap}.ctn-procesos-masiva{display:flex;flex-direction:column;gap:4px;width:100%;margin-top:8px}.procesos-list{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow-y:auto}.proceso-item{display:flex;flex-direction:column;gap:2px;padding:4px 8px;border-radius:4px;border:1px solid #eaeaea;background:#fff}.proceso-l1{display:flex;align-items:center;gap:4px;min-width:0}.proceso-tag{flex-shrink:0;padding:1px 8px;border-radius:100px;background:#edf6ff;color:#103ab7;font-weight:500;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}.proceso-cod{flex:1 0 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.proceso-l2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ellipsis-1{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonCircleTertiaryComponent, selector: "ius-button-circle-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }, { kind: "component", type: SimpleDividerComponent, selector: "ius-simple-divider" }, { kind: "component", type: IconXsComponent, selector: "ius-icon-xs", inputs: ["iconName", "color"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: PopoverDirective, selector: "[iusPopover], [iusPopoverTitle], [iusPopoverContent]", inputs: ["iusPopover", "iusPopoverTitle", "iusPopoverContent", "iusPopoverPosition", "iusPopoverOpenDelay", "iusPopoverCloseDelay"] }] }); }
|
|
7350
7421
|
}
|
|
7351
7422
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardActividadEventoComponent, decorators: [{
|
|
7352
7423
|
type: Component,
|
|
7353
7424
|
args: [{ selector: 'ius-card-actividad-evento', standalone: true, imports: [IconSmComponent, NgClass, ButtonCircleTertiaryComponent, SimpleDividerComponent, IconXsComponent, DatePipe, PopoverDirective], providers: [
|
|
7354
7425
|
{ provide: LOCALE_ID, useValue: 'es' },
|
|
7355
7426
|
DatePipe
|
|
7356
|
-
], template: "<div class=\"ctn-gnrl\" (click)=\"toggleCollapse()\">\r\n <div class=\"ctn-card\">\r\n <div class=\"ctn-inf\">\r\n <ius-icon-sm iconName=\"icon-calendar-clock\" class=\"priority-tx\"\r\n [ngClass]=\"{'icon-calendar-clock': estado === 'Finalizada' }\"></ius-icon-sm>\r\n <div class=\"info\">\r\n <span class=\"caption-sm txt-ter\">Actividades y eventos</span>\r\n <div class=\"row-titulo\">\r\n <span class=\"label-base txt-pry\" [ngClass]=\"{'body-base-1': read}\">{{titulo}}</span>\r\n @if (masiva) {\r\n <span class=\"masiva-badge caption-sm\">\r\n <ius-icon-xs iconName=\"icon-library-add-check\"></ius-icon-xs>\r\n {{ masivaLabel }}\r\n </span>\r\n }\r\n </div>\r\n <div class=\"tx-asig\">\r\n <div class=\"row-text-2\">\r\n <span class=\"caption-sm txt-ter\">Asignado a</span>\r\n <span class=\"body-base-1 txt-sec\">{{usuarioAsignado}}</span>\r\n </div>\r\n <div class=\"row-text-2\">\r\n <span class=\"caption-sm txt-ter\">{{ headerFechaLabel }}</span>\r\n <span class=\"body-base-1 txt-sec\">{{fechaProgramacion | date: formatoFechaProgramacion}}</span>\r\n </div>\r\n </div>\r\n <span class=\"body-base-1 txt-sec\">{{text1}}</span>\r\n </div>\r\n </div>\r\n <div class=\"ctn-icons\">\r\n <div class=\"row-text-2\">\r\n @if (!read) {\r\n <div class=\"icon-dot\"></div>\r\n }\r\n @if (warning && estado !== 'Finalizada') {\r\n <ius-icon-xs iconName=\"icon-emergency-home\" class=\"icon-emergency-home\"></ius-icon-xs>\r\n }\r\n <span class=\"body-sm txt-ter fecha\">{{fechaPrincipal | date: 'd MMM y'}}</span>\r\n <span class=\"buttons-hove\">\r\n <ius-button-circle-tertiary iconName=\"icon-mark-chat-read\"\r\n [iusPopoverContent]=\"read ? 'Marcar como no le\u00EDdo' : 'Marcar como le\u00EDdo'\"\r\n (buttonClicked)=\"clickButtonRead($event)\"></ius-button-circle-tertiary>\r\n <ius-button-circle-tertiary iconName=\"icon-content-copy\"\r\n iusPopoverContent=\"Copiar informaci\u00F3n\"\r\n (buttonClicked)=\"clickButtonCopy($event)\"></ius-button-circle-tertiary>\r\n <ius-button-circle-tertiary iconName=\"icon-done-outline\"\r\n [iusPopoverContent]=\"done ? 'Marcar como abierta' : 'Marcar como hecha'\"\r\n (buttonClicked)=\"clickButtonDone($event)\"></ius-button-circle-tertiary>\r\n <ius-button-circle-tertiary iconName=\"icon-edit\"\r\n iusPopoverContent=\"Editar\"\r\n (buttonClicked)=\"clickButtonEdit($event)\"></ius-button-circle-tertiary>\r\n <ius-button-circle-tertiary iconName=\"icon-delete\"\r\n iusPopoverContent=\"Eliminar\"\r\n (buttonClicked)=\"clickButtonDelete($event)\"></ius-button-circle-tertiary>\r\n </span>\r\n </div>\r\n <ius-icon-sm [iconName]=\"collapse ? 'icon-keyboard-arrow-down' : 'icon-keyboard-arrow-up'\"\r\n class=\"txt-pry\"></ius-icon-sm>\r\n </div>\r\n </div>\r\n <div class=\"ctn-collapse-card\" [ngClass]=\"{'collapsed': collapse}\">\r\n <ius-simple-divider></ius-simple-divider>\r\n <div class=\"ctn-clp\">\r\n <div class=\"ctn-info-clp\">\r\n <div class=\"text-info\">\r\n <span class=\"label-base\" [ngClass]=\"estadoLabelClass\">{{ estadoLabel }}</span>\r\n <div class=\"row-text-1 body-sm txt-ter\">\r\n <span>{{fechaInicio | date: formatoFechaInicio}}</span>\r\n @if (fechaFin) {\r\n <span>-</span>\r\n <span>{{fechaFin | date: formatoFechaFin}}</span>\r\n }\r\n </div>\r\n <span class=\"body-base-1 txt-pry\">{{descripcion}}</span>\r\n @if (link) {\r\n <a class=\"body-sm link-actividad\" (click)=\"openLink($event)\">\r\n <ius-icon-xs iconName=\"icon-link-2\"></ius-icon-xs>\r\n <span>{{ link }}</span>\r\n </a>\r\n }\r\n\r\n @if (masiva && procesos.length > 0) {\r\n <div class=\"ctn-procesos-masiva\">\r\n <span class=\"caption-sm txt-ter\">Procesos vinculados ({{ cantidadProcesos ?? procesos.length }})</span>\r\n <div class=\"procesos-list scrollable\">\r\n @for (p of procesos; track p.actividadID) {\r\n <div class=\"proceso-item\">\r\n <div class=\"proceso-l1\">\r\n @if (p.tipoProceso) {\r\n <span class=\"proceso-tag caption-sm\" [iusPopoverContent]=\"'Tipo de proceso: ' + p.tipoProceso\">{{ p.tipoProceso }}</span>\r\n }\r\n <span class=\"proceso-cod caption-sm\" [iusPopoverContent]=\"(p.codigoInterno ? 'C\u00F3digo interno: ' + p.codigoInterno : '') + (p.codigoInterno && p.radicado23Nit ? ' \u00B7 ' : '') + (p.radicado23Nit ? 'Radicado: ' + p.radicado23Nit : '')\">\r\n @if (p.codigoInterno) { <span class=\"txt-pry\">{{ p.codigoInterno }}</span> }\r\n @if (p.codigoInterno && p.radicado23Nit) { <span class=\"txt-ter\"> \u00B7 </span> }\r\n @if (p.radicado23Nit) { <span class=\"txt-ter\">{{ p.radicado23Nit }}</span> }\r\n </span>\r\n @if (p.warning) {\r\n <ius-icon-xs iconName=\"icon-emergency-home\" class=\"icon-emergency-home\"></ius-icon-xs>\r\n }\r\n </div>\r\n @if (p.parteActiva || p.partePasiva) {\r\n <div class=\"proceso-l2 caption-sm txt-ter\" [iusPopoverContent]=\"(p.parteActiva ? 'Parte activa: ' + p.parteActiva : '') + (p.parteActiva && p.partePasiva ? ' \u2014 ' : '') + (p.partePasiva ? 'Parte pasiva: ' + p.partePasiva : '')\">\r\n @if (p.parteActiva) { <span>{{ p.parteActiva }}</span> }\r\n @if (p.parteActiva && p.partePasiva) { <span> - </span> }\r\n @if (p.partePasiva) { <span>{{ p.partePasiva }}</span> }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.ctn-gnrl{position:relative;display:flex;flex-direction:column;cursor:pointer;padding:8px 12px;box-sizing:border-box;border-radius:4px;border:1px solid #eaeaea}.ctn-gnrl:hover{border:1px solid #C4DFFF;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ctn-gnrl:hover .fecha{display:none;pointer-events:none}.ctn-gnrl:hover .buttons-hove{display:flex;pointer-events:auto}.ctn-card{position:relative;display:flex;align-items:center;gap:24px}.ctn-inf{display:flex;flex:1 0 0;align-items:center;gap:16px}.icon-calendar-clock{color:#8c8c8c!important}.priority-tx{color:#184fdb}.tx-asig{display:flex;gap:24px}.info{display:flex;flex:1 0 0;flex-direction:column;align-items:flex-start}.ctn-icons{display:flex;align-items:center;gap:16px}.icon-dot{display:flex;align-items:center;width:8px;height:8px;aspect-ratio:1/1;background-color:#2167ff;border-radius:100px}.icon-dot-warning{display:flex;align-items:center;width:8px;height:8px;aspect-ratio:1/1;background-color:#ffae00;border-radius:100px}.icon-emergency-home{color:#ffae00}.fecha{width:76px}.buttons-hove{display:none;pointer-events:none;gap:4px}.ctn-collapse-card{max-height:1000px;overflow:hidden;transition:max-height .3s ease-in-out}.ctn-collapse-card.collapsed{max-height:0px}.ctn-clp{display:flex;gap:8px}.ctn-info-clp{display:flex;padding:4px 8px;flex-direction:column;gap:12px;flex:1 0 0}.text-info{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}.tx-read{color:#629219}.tx-warn{color:#db8e00}.tx-info{color:#5892ff}ius-simple-divider{margin:8px 0}.row-text-1{display:flex;align-items:center;gap:8px}.row-text-2{display:flex;align-items:center;gap:4px}.txt-pry{color:#333}.txt-sec{color:#595959}.txt-ter{color:#8c8c8c}.link-actividad{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:4px 8px;border-radius:4px;color:#595959;cursor:pointer;text-decoration:none;word-break:break-all}.link-actividad:hover{background-color:#edf6ff;text-decoration:underline}.row-titulo{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.masiva-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:100px;background:#edf6ff;color:#103ab7;font-weight:500;white-space:nowrap}.ctn-procesos-masiva{display:flex;flex-direction:column;gap:4px;width:100%;margin-top:8px}.procesos-list{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow-y:auto}.proceso-item{display:flex;flex-direction:column;gap:2px;padding:4px 8px;border-radius:4px;border:1px solid #eaeaea;background:#fff}.proceso-l1{display:flex;align-items:center;gap:4px;min-width:0}.proceso-tag{flex-shrink:0;padding:1px 8px;border-radius:100px;background:#edf6ff;color:#103ab7;font-weight:500;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}.proceso-cod{flex:1 0 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.proceso-l2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ellipsis-1{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
7427
|
+
], template: "<div class=\"ctn-gnrl\" (click)=\"toggleCollapse()\">\n <div class=\"ctn-card\">\n <div class=\"ctn-inf\">\n <ius-icon-sm iconName=\"icon-calendar-clock\" class=\"priority-tx\"\n [ngClass]=\"{'icon-calendar-clock': estado === 'Finalizada' }\"></ius-icon-sm>\n <div class=\"info\">\n <span class=\"caption-sm txt-ter\">Actividades y eventos</span>\n <div class=\"row-titulo\">\n <span class=\"label-base txt-pry\" [ngClass]=\"{'body-base-1': read}\">{{titulo}}</span>\n @if (masiva) {\n <span class=\"masiva-badge caption-sm\">\n <ius-icon-xs iconName=\"icon-library-add-check\"></ius-icon-xs>\n {{ masivaLabel }}\n </span>\n }\n </div>\n <div class=\"tx-asig\">\n <div class=\"row-text-2\">\n <span class=\"caption-sm txt-ter\">Asignado a</span>\n <span class=\"body-base-1 txt-sec\">{{usuarioAsignado}}</span>\n </div>\n <div class=\"row-text-2\">\n <span class=\"caption-sm txt-ter\">{{ headerFechaLabel }}</span>\n <span class=\"body-base-1 txt-sec\">{{fechaProgramacion | date: formatoFechaProgramacion}}</span>\n </div>\n </div>\n <span class=\"body-base-1 txt-sec\">{{text1}}</span>\n </div>\n </div>\n <div class=\"ctn-icons\">\n <div class=\"row-text-2\">\n @if (!read) {\n <div class=\"icon-dot\"></div>\n }\n @if (warning && estado !== 'Finalizada') {\n <ius-icon-xs iconName=\"icon-emergency-home\" class=\"icon-emergency-home\"></ius-icon-xs>\n }\n <span class=\"body-sm txt-ter fecha\">{{fechaPrincipal | date: 'd MMM y'}}</span>\n <span class=\"buttons-hove\">\n <ius-button-circle-tertiary iconName=\"icon-mark-chat-read\"\n [iusPopoverContent]=\"read ? 'Marcar como no le\u00EDdo' : 'Marcar como le\u00EDdo'\"\n (buttonClicked)=\"clickButtonRead($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-content-copy\"\n iusPopoverContent=\"Copiar informaci\u00F3n\"\n (buttonClicked)=\"clickButtonCopy($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-done-outline\"\n [iusPopoverContent]=\"done ? 'Marcar como abierta' : 'Marcar como hecha'\"\n (buttonClicked)=\"clickButtonDone($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-edit\"\n iusPopoverContent=\"Editar\"\n (buttonClicked)=\"clickButtonEdit($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-delete\"\n iusPopoverContent=\"Eliminar\"\n (buttonClicked)=\"clickButtonDelete($event)\"></ius-button-circle-tertiary>\n </span>\n </div>\n <ius-icon-sm [iconName]=\"collapse ? 'icon-keyboard-arrow-down' : 'icon-keyboard-arrow-up'\"\n class=\"txt-pry\"></ius-icon-sm>\n </div>\n </div>\n <div class=\"ctn-collapse-card\" [ngClass]=\"{'collapsed': collapse}\">\n <ius-simple-divider></ius-simple-divider>\n <div class=\"ctn-clp\">\n <div class=\"ctn-info-clp\">\n <div class=\"text-info\">\n <span class=\"label-base\" [ngClass]=\"estadoLabelClass\">{{ estadoLabel }}</span>\n <div class=\"row-text-1 body-sm txt-ter\">\n <span>{{fechaInicio | date: formatoFechaInicio}}</span>\n @if (fechaFin) {\n <span>-</span>\n <span>{{fechaFin | date: formatoFechaFin}}</span>\n }\n </div>\n <span class=\"body-base-1 txt-pry\">{{descripcion}}</span>\n @if (link) {\n <a class=\"body-sm link-actividad\" (click)=\"openLink($event)\">\n <ius-icon-xs iconName=\"icon-link-2\"></ius-icon-xs>\n <span>{{ link }}</span>\n </a>\n }\n\n @if (masiva && procesos.length > 0) {\n <div class=\"ctn-procesos-masiva\">\n <span class=\"caption-sm txt-ter\">Procesos vinculados ({{ cantidadProcesos ?? procesos.length }})</span>\n <div class=\"procesos-list scrollable\">\n @for (p of procesos; track p.actividadID) {\n <div class=\"proceso-item\">\n <div class=\"proceso-l1\">\n @if (p.tipoProceso) {\n <span class=\"proceso-tag caption-sm\" [iusPopoverContent]=\"'Tipo de proceso: ' + p.tipoProceso\">{{ p.tipoProceso }}</span>\n }\n <span class=\"proceso-cod caption-sm\" [iusPopoverContent]=\"(p.codigoInterno ? 'C\u00F3digo interno: ' + p.codigoInterno : '') + (p.codigoInterno && p.radicado23Nit ? ' \u00B7 ' : '') + (p.radicado23Nit ? 'Radicado: ' + p.radicado23Nit : '')\">\n @if (p.codigoInterno) { <span class=\"txt-pry\">{{ p.codigoInterno }}</span> }\n @if (p.codigoInterno && p.radicado23Nit) { <span class=\"txt-ter\"> \u00B7 </span> }\n @if (p.radicado23Nit) { <span class=\"txt-ter\">{{ p.radicado23Nit }}</span> }\n </span>\n @if (p.warning) {\n <ius-icon-xs iconName=\"icon-emergency-home\" class=\"icon-emergency-home\"></ius-icon-xs>\n }\n </div>\n @if (p.parteActiva || p.partePasiva) {\n <div class=\"proceso-l2 caption-sm txt-ter\" [iusPopoverContent]=\"(p.parteActiva ? 'Parte activa: ' + p.parteActiva : '') + (p.parteActiva && p.partePasiva ? ' \u2014 ' : '') + (p.partePasiva ? 'Parte pasiva: ' + p.partePasiva : '')\">\n @if (p.parteActiva) { <span>{{ p.parteActiva }}</span> }\n @if (p.parteActiva && p.partePasiva) { <span> - </span> }\n @if (p.partePasiva) { <span>{{ p.partePasiva }}</span> }\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n</div>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.ctn-gnrl{position:relative;display:flex;flex-direction:column;cursor:pointer;padding:8px 12px;box-sizing:border-box;border-radius:4px;border:1px solid #eaeaea}.ctn-gnrl:hover{border:1px solid #C4DFFF;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ctn-gnrl:hover .fecha{display:none;pointer-events:none}.ctn-gnrl:hover .buttons-hove{display:flex;pointer-events:auto}.ctn-card{position:relative;display:flex;align-items:center;gap:24px}.ctn-inf{display:flex;flex:1 0 0;align-items:center;gap:16px}.icon-calendar-clock{color:#8c8c8c!important}.priority-tx{color:#184fdb}.tx-asig{display:flex;gap:24px}.info{display:flex;flex:1 0 0;flex-direction:column;align-items:flex-start}.ctn-icons{display:flex;align-items:center;gap:16px}.icon-dot{display:flex;align-items:center;width:8px;height:8px;aspect-ratio:1/1;background-color:#2167ff;border-radius:100px}.icon-dot-warning{display:flex;align-items:center;width:8px;height:8px;aspect-ratio:1/1;background-color:#ffae00;border-radius:100px}.icon-emergency-home{color:#ffae00}.fecha{width:76px}.buttons-hove{display:none;pointer-events:none;gap:4px}.ctn-collapse-card{max-height:1000px;overflow:hidden;transition:max-height .3s ease-in-out}.ctn-collapse-card.collapsed{max-height:0px}.ctn-clp{display:flex;gap:8px}.ctn-info-clp{display:flex;padding:4px 8px;flex-direction:column;gap:12px;flex:1 0 0}.text-info{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}.tx-read{color:#629219}.tx-warn{color:#db8e00}.tx-info{color:#5892ff}ius-simple-divider{margin:8px 0}.row-text-1{display:flex;align-items:center;gap:8px}.row-text-2{display:flex;align-items:center;gap:4px}.txt-pry{color:#333}.txt-sec{color:#595959}.txt-ter{color:#8c8c8c}.link-actividad{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:4px 8px;border-radius:4px;color:#595959;cursor:pointer;text-decoration:none;word-break:break-all}.link-actividad:hover{background-color:#edf6ff;text-decoration:underline}.row-titulo{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.masiva-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:100px;background:#edf6ff;color:#103ab7;font-weight:500;white-space:nowrap}.ctn-procesos-masiva{display:flex;flex-direction:column;gap:4px;width:100%;margin-top:8px}.procesos-list{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow-y:auto}.proceso-item{display:flex;flex-direction:column;gap:2px;padding:4px 8px;border-radius:4px;border:1px solid #eaeaea;background:#fff}.proceso-l1{display:flex;align-items:center;gap:4px;min-width:0}.proceso-tag{flex-shrink:0;padding:1px 8px;border-radius:100px;background:#edf6ff;color:#103ab7;font-weight:500;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}.proceso-cod{flex:1 0 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.proceso-l2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ellipsis-1{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
7357
7428
|
}], ctorParameters: () => [{ type: i1$1.DatePipe }], propDecorators: { read: [{
|
|
7358
7429
|
type: Input
|
|
7359
7430
|
}], warning: [{
|
|
@@ -7480,14 +7551,14 @@ class CardEtapaSubetapaComponent {
|
|
|
7480
7551
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CardEtapaSubetapaComponent, isStandalone: true, selector: "ius-card-etapa-subetapa", inputs: { priority: "priority", hasDocuments: "hasDocuments", read: "read", collapse: "collapse", etapa: "etapa", subEtapa: "subEtapa", text1: "text1", origen: "origen", fechaPrincipal: "fechaPrincipal", descripcion: "descripcion" }, outputs: { onClickButtonCopy: "onClickButtonCopy", onClickButtonRead: "onClickButtonRead", onClickButtonEdit: "onClickButtonEdit", onClickButtonDelete: "onClickButtonDelete", onClickButtonDocs: "onClickButtonDocs" }, providers: [
|
|
7481
7552
|
{ provide: LOCALE_ID, useValue: 'es' },
|
|
7482
7553
|
DatePipe
|
|
7483
|
-
], ngImport: i0, template: "<div class=\"ctn-gnrl\" (click)=\"toggleCollapse()\">\
|
|
7554
|
+
], ngImport: i0, template: "<div class=\"ctn-gnrl\" (click)=\"toggleCollapse()\">\n <div class=\"ctn-card\">\n <div class=\"ctn-inf\">\n <ius-icon-sm iconName=\"icon-book-5\" class=\"icon-book-5\"></ius-icon-sm>\n <div class=\"info\">\n <span class=\"caption-sm txt-ter\">Etapas Procesales</span>\n <div class=\"body-base-1 row-text-1 txt-pry\" [ngClass]=\"{'title-no-read': read === false}\">\n <span>{{etapa}}</span>\n <span>-</span>\n <span>{{subEtapa}}</span>\n </div>\n <div class=\"body-base-1 txt-sec row-text-1\">\n <span>{{text1}}</span>\n @if (origen) {\n <span>-</span>\n <span>{{origen}}</span>\n }\n </div>\n </div>\n </div>\n <div class=\"ctn-icons\">\n @if (hasDocuments) {\n <div class=\"row-text-1\">\n <ius-icon-sm iconName=\"icon-attach-file\" class=\"txt-sec\"></ius-icon-sm>\n </div>\n }\n <div class=\"row-text-2\">\n <div class=\"icon-dot\" [ngClass]=\"{'icon-dot-f': read === false}\"></div>\n <span class=\"body-sm txt-ter fecha\">{{fechaPrincipal | date: 'd MMM yyyy'}}</span>\n <span class=\"buttons-hove\">\n <ius-button-circle-tertiary iconName=\"icon-mark-chat-read\"\n [iusPopoverContent]=\"read ? 'Marcar como no le\u00EDdo' : 'Marcar como le\u00EDdo'\"\n (buttonClicked)=\"clickButtonRead($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-content-copy\"\n iusPopoverContent=\"Copiar informaci\u00F3n\"\n (buttonClicked)=\"clickButtonCopy($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-edit\"\n iusPopoverContent=\"Editar\"\n (buttonClicked)=\"clickButtonEdit($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-delete\"\n iusPopoverContent=\"Eliminar\"\n (buttonClicked)=\"clickButtonDelete($event)\"></ius-button-circle-tertiary>\n </span>\n </div>\n <ius-icon-sm [iconName]=\"collapse ? 'icon-keyboard-arrow-down' : 'icon-keyboard-arrow-up'\"\n class=\"txt-pry\"></ius-icon-sm>\n </div>\n </div>\n <div class=\"ctn-collapse-card\" [ngClass]=\"{'collapsed': collapse}\">\n <ius-simple-divider></ius-simple-divider>\n <div class=\"ctn-clp\">\n <div class=\"ctn-info-clp\">\n <div class=\"text-info\">\n <span class=\"body-base-1 txt-pry\">{{descripcion}}</span>\n </div>\n </div>\n <div class=\"buttons-clp\">\n @if (hasDocuments) {\n <ius-button-menu-link iconName=\"icon-attach-file\" iconColor=\"#184FDB\"\n iusPopoverContent=\"Ver documentos\"\n (buttonClicked)=\"clickButtonDocs($event)\"></ius-button-menu-link>\n }\n </div>\n </div>\n </div>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.ctn-gnrl{position:relative;display:flex;flex-direction:column;cursor:pointer;padding:8px 12px;box-sizing:border-box;border-radius:4px;border:1px solid #eaeaea}.ctn-gnrl:hover{border:1px solid #C4DFFF;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ctn-gnrl:hover .fecha{display:none;pointer-events:none}.ctn-gnrl:hover .buttons-hove{display:flex;pointer-events:auto}.ctn-card{position:relative;display:flex;align-items:center;gap:24px}.ctn-inf{display:flex;flex:1 0 0;align-items:center;gap:16px}.icon-book-5{color:#7caf25}.info{display:flex;flex:1 0 0;flex-direction:column;align-items:flex-start}.ctn-icons{display:flex;align-items:center;gap:16px}.icon-dot{background-color:transparent;display:none;align-items:center;width:8px;height:8px;aspect-ratio:1/1;border-radius:100px}.icon-dot-f{display:flex;background-color:#2167ff}.fecha{width:76px}.buttons-hove{display:none;pointer-events:none;gap:4px}.ctn-collapse-card{max-height:1000px;overflow:hidden;transition:max-height .3s ease-in-out}.ctn-collapse-card.collapsed{max-height:0px}.ctn-clp{display:flex;gap:8px}.buttons-clp{display:flex;padding:4px;flex-direction:column;width:44px;box-sizing:border-box;gap:4px;justify-content:center}.ctn-info-clp{display:flex;padding:4px 8px;flex-direction:column;gap:12px;flex:1 0 0}.text-info{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}ius-simple-divider{margin:8px 0}.row-text-1{display:flex;align-items:center;gap:8px}.title-no-read{font-weight:500}.row-text-2{display:flex;align-items:center;gap:4px}.txt-pry{color:#333}.txt-sec{color:#595959}.txt-ter{color:#8c8c8c}\n"], dependencies: [{ kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonCircleTertiaryComponent, selector: "ius-button-circle-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }, { kind: "component", type: SimpleDividerComponent, selector: "ius-simple-divider" }, { kind: "component", type: ButtonMenuLinkComponent, selector: "ius-button-menu-link", inputs: ["disabled", "iconColor", "iconName"], outputs: ["buttonClicked"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: PopoverDirective, selector: "[iusPopover], [iusPopoverTitle], [iusPopoverContent]", inputs: ["iusPopover", "iusPopoverTitle", "iusPopoverContent", "iusPopoverPosition", "iusPopoverOpenDelay", "iusPopoverCloseDelay"] }] }); }
|
|
7484
7555
|
}
|
|
7485
7556
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardEtapaSubetapaComponent, decorators: [{
|
|
7486
7557
|
type: Component,
|
|
7487
7558
|
args: [{ selector: 'ius-card-etapa-subetapa', standalone: true, imports: [IconSmComponent, NgClass, ButtonCircleTertiaryComponent, SimpleDividerComponent, ButtonMenuLinkComponent, DatePipe, PopoverDirective], providers: [
|
|
7488
7559
|
{ provide: LOCALE_ID, useValue: 'es' },
|
|
7489
7560
|
DatePipe
|
|
7490
|
-
], template: "<div class=\"ctn-gnrl\" (click)=\"toggleCollapse()\">\
|
|
7561
|
+
], template: "<div class=\"ctn-gnrl\" (click)=\"toggleCollapse()\">\n <div class=\"ctn-card\">\n <div class=\"ctn-inf\">\n <ius-icon-sm iconName=\"icon-book-5\" class=\"icon-book-5\"></ius-icon-sm>\n <div class=\"info\">\n <span class=\"caption-sm txt-ter\">Etapas Procesales</span>\n <div class=\"body-base-1 row-text-1 txt-pry\" [ngClass]=\"{'title-no-read': read === false}\">\n <span>{{etapa}}</span>\n <span>-</span>\n <span>{{subEtapa}}</span>\n </div>\n <div class=\"body-base-1 txt-sec row-text-1\">\n <span>{{text1}}</span>\n @if (origen) {\n <span>-</span>\n <span>{{origen}}</span>\n }\n </div>\n </div>\n </div>\n <div class=\"ctn-icons\">\n @if (hasDocuments) {\n <div class=\"row-text-1\">\n <ius-icon-sm iconName=\"icon-attach-file\" class=\"txt-sec\"></ius-icon-sm>\n </div>\n }\n <div class=\"row-text-2\">\n <div class=\"icon-dot\" [ngClass]=\"{'icon-dot-f': read === false}\"></div>\n <span class=\"body-sm txt-ter fecha\">{{fechaPrincipal | date: 'd MMM yyyy'}}</span>\n <span class=\"buttons-hove\">\n <ius-button-circle-tertiary iconName=\"icon-mark-chat-read\"\n [iusPopoverContent]=\"read ? 'Marcar como no le\u00EDdo' : 'Marcar como le\u00EDdo'\"\n (buttonClicked)=\"clickButtonRead($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-content-copy\"\n iusPopoverContent=\"Copiar informaci\u00F3n\"\n (buttonClicked)=\"clickButtonCopy($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-edit\"\n iusPopoverContent=\"Editar\"\n (buttonClicked)=\"clickButtonEdit($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-delete\"\n iusPopoverContent=\"Eliminar\"\n (buttonClicked)=\"clickButtonDelete($event)\"></ius-button-circle-tertiary>\n </span>\n </div>\n <ius-icon-sm [iconName]=\"collapse ? 'icon-keyboard-arrow-down' : 'icon-keyboard-arrow-up'\"\n class=\"txt-pry\"></ius-icon-sm>\n </div>\n </div>\n <div class=\"ctn-collapse-card\" [ngClass]=\"{'collapsed': collapse}\">\n <ius-simple-divider></ius-simple-divider>\n <div class=\"ctn-clp\">\n <div class=\"ctn-info-clp\">\n <div class=\"text-info\">\n <span class=\"body-base-1 txt-pry\">{{descripcion}}</span>\n </div>\n </div>\n <div class=\"buttons-clp\">\n @if (hasDocuments) {\n <ius-button-menu-link iconName=\"icon-attach-file\" iconColor=\"#184FDB\"\n iusPopoverContent=\"Ver documentos\"\n (buttonClicked)=\"clickButtonDocs($event)\"></ius-button-menu-link>\n }\n </div>\n </div>\n </div>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.ctn-gnrl{position:relative;display:flex;flex-direction:column;cursor:pointer;padding:8px 12px;box-sizing:border-box;border-radius:4px;border:1px solid #eaeaea}.ctn-gnrl:hover{border:1px solid #C4DFFF;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ctn-gnrl:hover .fecha{display:none;pointer-events:none}.ctn-gnrl:hover .buttons-hove{display:flex;pointer-events:auto}.ctn-card{position:relative;display:flex;align-items:center;gap:24px}.ctn-inf{display:flex;flex:1 0 0;align-items:center;gap:16px}.icon-book-5{color:#7caf25}.info{display:flex;flex:1 0 0;flex-direction:column;align-items:flex-start}.ctn-icons{display:flex;align-items:center;gap:16px}.icon-dot{background-color:transparent;display:none;align-items:center;width:8px;height:8px;aspect-ratio:1/1;border-radius:100px}.icon-dot-f{display:flex;background-color:#2167ff}.fecha{width:76px}.buttons-hove{display:none;pointer-events:none;gap:4px}.ctn-collapse-card{max-height:1000px;overflow:hidden;transition:max-height .3s ease-in-out}.ctn-collapse-card.collapsed{max-height:0px}.ctn-clp{display:flex;gap:8px}.buttons-clp{display:flex;padding:4px;flex-direction:column;width:44px;box-sizing:border-box;gap:4px;justify-content:center}.ctn-info-clp{display:flex;padding:4px 8px;flex-direction:column;gap:12px;flex:1 0 0}.text-info{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}ius-simple-divider{margin:8px 0}.row-text-1{display:flex;align-items:center;gap:8px}.title-no-read{font-weight:500}.row-text-2{display:flex;align-items:center;gap:4px}.txt-pry{color:#333}.txt-sec{color:#595959}.txt-ter{color:#8c8c8c}\n"] }]
|
|
7491
7562
|
}], ctorParameters: () => [{ type: i1$1.DatePipe }], propDecorators: { priority: [{
|
|
7492
7563
|
type: Input
|
|
7493
7564
|
}], hasDocuments: [{
|
|
@@ -7592,14 +7663,14 @@ class CardImpulsoProcesalComponent {
|
|
|
7592
7663
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CardImpulsoProcesalComponent, isStandalone: true, selector: "ius-card-impulso-procesal", inputs: { priority: "priority", hasDocuments: "hasDocuments", read: "read", collapse: "collapse", titulo: "titulo", text1: "text1", origen: "origen", fechaPrincipal: "fechaPrincipal", descripcion: "descripcion" }, outputs: { onClickButtonCopy: "onClickButtonCopy", onClickButtonRead: "onClickButtonRead", onClickButtonEdit: "onClickButtonEdit", onClickButtonDelete: "onClickButtonDelete", onClickButtonDocs: "onClickButtonDocs" }, providers: [
|
|
7593
7664
|
{ provide: LOCALE_ID, useValue: 'es' },
|
|
7594
7665
|
DatePipe
|
|
7595
|
-
], ngImport: i0, template: "<div class=\"ctn-gnrl\" (click)=\"toggleCollapse()\">\
|
|
7666
|
+
], ngImport: i0, template: "<div class=\"ctn-gnrl\" (click)=\"toggleCollapse()\">\n <div class=\"ctn-card\">\n <div class=\"ctn-inf\">\n <ius-icon-sm iconName=\"icon-article-person\" class=\"icon-article-person\"></ius-icon-sm>\n <div class=\"info\">\n <span class=\"caption-sm txt-ter\">Gesti\u00F3n - Impulso Procesal</span>\n <span class=\"body-base-1\" [ngClass]=\"{'title-no-read': read === false}\">{{titulo}}</span>\n <div class=\"body-base-1 txt-sec row-text-1\">\n <span>{{text1}}</span>\n @if (origen) {\n <span>-</span>\n <span>{{origen}}</span>\n }\n </div>\n </div>\n </div>\n <div class=\"ctn-icons\">\n @if (hasDocuments) {\n <div class=\"row-text-1\">\n <ius-icon-sm iconName=\"icon-attach-file\" class=\"txt-sec\"></ius-icon-sm>\n </div>\n }\n <div class=\"row-text-2\">\n <div class=\"icon-dot\" [ngClass]=\"{'icon-dot-f': read === false}\"></div>\n <span class=\"body-sm txt-ter fecha\">{{fechaPrincipal | date: 'd MMM yyyy'}}</span>\n <span class=\"buttons-hove\">\n <ius-button-circle-tertiary iconName=\"icon-mark-chat-read\"\n [iusPopoverContent]=\"read ? 'Marcar como no le\u00EDdo' : 'Marcar como le\u00EDdo'\"\n (buttonClicked)=\"clickButtonRead($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-content-copy\"\n iusPopoverContent=\"Copiar informaci\u00F3n\"\n (buttonClicked)=\"clickButtonCopy($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-edit\"\n iusPopoverContent=\"Editar\"\n (buttonClicked)=\"clickButtonEdit($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-delete\"\n iusPopoverContent=\"Eliminar\"\n (buttonClicked)=\"clickButtonDelete($event)\"></ius-button-circle-tertiary>\n </span>\n </div>\n <ius-icon-sm [iconName]=\"collapse ? 'icon-keyboard-arrow-down' : 'icon-keyboard-arrow-up'\"\n class=\"txt-pry\"></ius-icon-sm>\n </div>\n </div>\n <div class=\"ctn-collapse-card\" [ngClass]=\"{'collapsed': collapse}\">\n <ius-simple-divider></ius-simple-divider>\n <div class=\"ctn-clp\">\n <div class=\"ctn-info-clp\">\n <div class=\"text-info\">\n <span class=\"body-base-1 txt-pry\">{{descripcion}}</span>\n </div>\n </div>\n <div class=\"buttons-clp\">\n @if (hasDocuments) {\n <ius-button-menu-link iconName=\"icon-attach-file\" iconColor=\"#184FDB\"\n iusPopoverContent=\"Ver documentos\"\n (buttonClicked)=\"clickButtonDocs($event)\"></ius-button-menu-link>\n }\n </div>\n </div>\n </div>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.ctn-gnrl{position:relative;display:flex;flex-direction:column;cursor:pointer;padding:8px 12px;box-sizing:border-box;border-radius:4px;border:1px solid #eaeaea}.ctn-gnrl:hover{border:1px solid #C4DFFF;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ctn-gnrl:hover .fecha{display:none;pointer-events:none}.ctn-gnrl:hover .buttons-hove{display:flex;pointer-events:auto}.ctn-card{position:relative;display:flex;align-items:center;gap:24px}.ctn-inf{display:flex;flex:1 0 0;align-items:center;gap:16px}.icon-article-person{color:#434343}.info{display:flex;flex:1 0 0;flex-direction:column;align-items:flex-start}.title-no-read{font-weight:500}.ctn-icons{display:flex;align-items:center;gap:16px}.icon-dot{background-color:transparent;display:none;align-items:center;width:8px;height:8px;aspect-ratio:1/1;border-radius:100px}.icon-dot-f{display:flex;background-color:#2167ff}.fecha{width:76px}.buttons-hove{display:none;pointer-events:none;gap:4px}.ctn-collapse-card{max-height:1000px;overflow:hidden;transition:max-height .3s ease-in-out}.ctn-collapse-card.collapsed{max-height:0px}.ctn-clp{display:flex;gap:8px}.buttons-clp{display:flex;padding:4px;flex-direction:column;width:44px;box-sizing:border-box;gap:4px;justify-content:center}.ctn-info-clp{display:flex;padding:4px 8px;flex-direction:column;gap:12px;flex:1 0 0}.text-info{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}ius-simple-divider{margin:8px 0}.row-text-1{display:flex;align-items:center;gap:8px}.row-text-2{display:flex;align-items:center;gap:4px}.txt-pry{color:#333}.txt-sec{color:#595959}.txt-ter{color:#8c8c8c}\n"], dependencies: [{ kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonCircleTertiaryComponent, selector: "ius-button-circle-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }, { kind: "component", type: SimpleDividerComponent, selector: "ius-simple-divider" }, { kind: "component", type: ButtonMenuLinkComponent, selector: "ius-button-menu-link", inputs: ["disabled", "iconColor", "iconName"], outputs: ["buttonClicked"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: PopoverDirective, selector: "[iusPopover], [iusPopoverTitle], [iusPopoverContent]", inputs: ["iusPopover", "iusPopoverTitle", "iusPopoverContent", "iusPopoverPosition", "iusPopoverOpenDelay", "iusPopoverCloseDelay"] }] }); }
|
|
7596
7667
|
}
|
|
7597
7668
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardImpulsoProcesalComponent, decorators: [{
|
|
7598
7669
|
type: Component,
|
|
7599
7670
|
args: [{ selector: 'ius-card-impulso-procesal', standalone: true, imports: [IconSmComponent, NgClass, ButtonCircleTertiaryComponent, SimpleDividerComponent, ButtonMenuLinkComponent, DatePipe, PopoverDirective], providers: [
|
|
7600
7671
|
{ provide: LOCALE_ID, useValue: 'es' },
|
|
7601
7672
|
DatePipe
|
|
7602
|
-
], template: "<div class=\"ctn-gnrl\" (click)=\"toggleCollapse()\">\
|
|
7673
|
+
], template: "<div class=\"ctn-gnrl\" (click)=\"toggleCollapse()\">\n <div class=\"ctn-card\">\n <div class=\"ctn-inf\">\n <ius-icon-sm iconName=\"icon-article-person\" class=\"icon-article-person\"></ius-icon-sm>\n <div class=\"info\">\n <span class=\"caption-sm txt-ter\">Gesti\u00F3n - Impulso Procesal</span>\n <span class=\"body-base-1\" [ngClass]=\"{'title-no-read': read === false}\">{{titulo}}</span>\n <div class=\"body-base-1 txt-sec row-text-1\">\n <span>{{text1}}</span>\n @if (origen) {\n <span>-</span>\n <span>{{origen}}</span>\n }\n </div>\n </div>\n </div>\n <div class=\"ctn-icons\">\n @if (hasDocuments) {\n <div class=\"row-text-1\">\n <ius-icon-sm iconName=\"icon-attach-file\" class=\"txt-sec\"></ius-icon-sm>\n </div>\n }\n <div class=\"row-text-2\">\n <div class=\"icon-dot\" [ngClass]=\"{'icon-dot-f': read === false}\"></div>\n <span class=\"body-sm txt-ter fecha\">{{fechaPrincipal | date: 'd MMM yyyy'}}</span>\n <span class=\"buttons-hove\">\n <ius-button-circle-tertiary iconName=\"icon-mark-chat-read\"\n [iusPopoverContent]=\"read ? 'Marcar como no le\u00EDdo' : 'Marcar como le\u00EDdo'\"\n (buttonClicked)=\"clickButtonRead($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-content-copy\"\n iusPopoverContent=\"Copiar informaci\u00F3n\"\n (buttonClicked)=\"clickButtonCopy($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-edit\"\n iusPopoverContent=\"Editar\"\n (buttonClicked)=\"clickButtonEdit($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-delete\"\n iusPopoverContent=\"Eliminar\"\n (buttonClicked)=\"clickButtonDelete($event)\"></ius-button-circle-tertiary>\n </span>\n </div>\n <ius-icon-sm [iconName]=\"collapse ? 'icon-keyboard-arrow-down' : 'icon-keyboard-arrow-up'\"\n class=\"txt-pry\"></ius-icon-sm>\n </div>\n </div>\n <div class=\"ctn-collapse-card\" [ngClass]=\"{'collapsed': collapse}\">\n <ius-simple-divider></ius-simple-divider>\n <div class=\"ctn-clp\">\n <div class=\"ctn-info-clp\">\n <div class=\"text-info\">\n <span class=\"body-base-1 txt-pry\">{{descripcion}}</span>\n </div>\n </div>\n <div class=\"buttons-clp\">\n @if (hasDocuments) {\n <ius-button-menu-link iconName=\"icon-attach-file\" iconColor=\"#184FDB\"\n iusPopoverContent=\"Ver documentos\"\n (buttonClicked)=\"clickButtonDocs($event)\"></ius-button-menu-link>\n }\n </div>\n </div>\n </div>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.ctn-gnrl{position:relative;display:flex;flex-direction:column;cursor:pointer;padding:8px 12px;box-sizing:border-box;border-radius:4px;border:1px solid #eaeaea}.ctn-gnrl:hover{border:1px solid #C4DFFF;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ctn-gnrl:hover .fecha{display:none;pointer-events:none}.ctn-gnrl:hover .buttons-hove{display:flex;pointer-events:auto}.ctn-card{position:relative;display:flex;align-items:center;gap:24px}.ctn-inf{display:flex;flex:1 0 0;align-items:center;gap:16px}.icon-article-person{color:#434343}.info{display:flex;flex:1 0 0;flex-direction:column;align-items:flex-start}.title-no-read{font-weight:500}.ctn-icons{display:flex;align-items:center;gap:16px}.icon-dot{background-color:transparent;display:none;align-items:center;width:8px;height:8px;aspect-ratio:1/1;border-radius:100px}.icon-dot-f{display:flex;background-color:#2167ff}.fecha{width:76px}.buttons-hove{display:none;pointer-events:none;gap:4px}.ctn-collapse-card{max-height:1000px;overflow:hidden;transition:max-height .3s ease-in-out}.ctn-collapse-card.collapsed{max-height:0px}.ctn-clp{display:flex;gap:8px}.buttons-clp{display:flex;padding:4px;flex-direction:column;width:44px;box-sizing:border-box;gap:4px;justify-content:center}.ctn-info-clp{display:flex;padding:4px 8px;flex-direction:column;gap:12px;flex:1 0 0}.text-info{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}ius-simple-divider{margin:8px 0}.row-text-1{display:flex;align-items:center;gap:8px}.row-text-2{display:flex;align-items:center;gap:4px}.txt-pry{color:#333}.txt-sec{color:#595959}.txt-ter{color:#8c8c8c}\n"] }]
|
|
7603
7674
|
}], ctorParameters: () => [{ type: i1$1.DatePipe }], propDecorators: { priority: [{
|
|
7604
7675
|
type: Input
|
|
7605
7676
|
}], hasDocuments: [{
|
|
@@ -8047,7 +8118,7 @@ class CreateTicketComponent {
|
|
|
8047
8118
|
});
|
|
8048
8119
|
}
|
|
8049
8120
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CreateTicketComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8050
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CreateTicketComponent, isStandalone: true, selector: "ius-create-ticket", inputs: { tipos: "tipos", razones: "razones", loading: "loading", lastResult: "lastResult" }, outputs: { submitTicket: "submitTicket", closeForm: "closeForm" }, ngImport: i0, template: "<ius-drawer-container-right [titleDrawer]=\"'Crear Ticket'\" (onDrawerClosed)=\"onClose()\"\
|
|
8121
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CreateTicketComponent, isStandalone: true, selector: "ius-create-ticket", inputs: { tipos: "tipos", razones: "razones", loading: "loading", lastResult: "lastResult" }, outputs: { submitTicket: "submitTicket", closeForm: "closeForm" }, ngImport: i0, template: "<ius-drawer-container-right [titleDrawer]=\"'Crear Ticket'\" (onDrawerClosed)=\"onClose()\"\n [percentProgressBar]=\"percentProgressBar\">\n <div class=\"form between-xs\">\n <div class=\"content\">\n <ius-section-collapse-drawer-parent textTitle=\"Informaci\u00F3n general\" [disabled]=\"false\"\n [isActive]=\"isExpandGeneralInformation\" (buttonClicked)=\"onExpandGeneralInformation()\">\n <div class=\"section\">\n <div class=\"select\">\n <ius-input-select componentId=\"ticketType\" [required]=\"true\" [showHelpText]=\"true\" labelSuperior=\"Tipo de ticket\"\n labelInput=\"Selecciona una opci\u00F3n\" [textInput]=\"typeSelected?.tipo\">\n @for (type of tipos; track type) {\n <ius-option (optionClick)=\"onSetValueType(type)\">\n {{ type.tipo }}\n </ius-option>\n }\n </ius-input-select>\n </div>\n <div class=\"select\">\n <ius-input-select componentId=\"ticketReason\" [required]=\"true\" [showHelpText]=\"true\" labelSuperior=\"Raz\u00F3n del ticket\"\n labelInput=\"Selecciona una opci\u00F3n\" [textInput]=\"reasonSelected?.razon\">\n @for (reason of razones; track reason) {\n <ius-option (optionClick)=\"onSetValueReason(reason)\">\n {{ reason.razon }}\n </ius-option>\n }\n </ius-input-select>\n </div>\n <div class=\"select\">\n <ius-input-textfield componentId=\"tituloTicket\" [initialText]=\"tituloTicket\" [required]=\"true\" [showHelpText]=\"true\"\n labelSuperior=\"Titulo o asunto para el ticket\" labelInput=\"Defina brevemente un asunto o titulo\"\n (onChangesValueEvent)=\"onSetValueTituloTicket($event)\">\n </ius-input-textfield>\n </div>\n <div class=\"select\">\n <ius-input-large componentId=\"descripcionTicket\" [initialText]=\"descripcionTicket\" [required]=\"true\" [showHelpText]=\"true\"\n labelSuperior=\"Descripcion del ticket\" labelInput=\"Describe tu idea o petici\u00F3n para el ticket\"\n (onChangesValueEvent)=\"onSetValueDescripcionTicket($event)\">\n </ius-input-large>\n </div>\n </div>\n </ius-section-collapse-drawer-parent>\n </div>\n\n <div class=\"footer\">\n <div class=\"toolbar\">\n <div class=\"toolbar-btn\">\n <ius-button-dynamic [labelDefault]=\"'Crear ticket'\" [labelSuccess]=\"'Agregando'\" [labelError]=\"'Error'\"\n [loading]=\"loading\" [result]=\"lastResult\" (buttonClicked)=\"createTicket()\">\n </ius-button-dynamic>\n </div>\n <div class=\"toolbar-btn\">\n <ius-button-standard-secondary (buttonClicked)=\"onClose()\">Cancelar</ius-button-standard-secondary>\n </div>\n </div>\n </div>\n </div>\n</ius-drawer-container-right>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.form{display:flex;height:100%;flex-direction:column}.section{display:flex;padding:0 8px;flex-direction:column}.content{display:flex;flex-direction:column}.select{display:flex;padding:8px 16px;flex-direction:column;justify-content:center;gap:8px;align-self:stretch}.footer{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:10px;flex:1 0 0;align-self:stretch}.toolbar{display:flex;padding:12px 16px;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;align-self:stretch}.toolbar-btn{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonDynamicComponent, selector: "ius-button-dynamic", inputs: ["labelDefault", "labelSuccess", "labelError", "disabled", "loading", "result", "autoReset", "autoResetDelay"], outputs: ["buttonClicked"] }, { kind: "component", type: ButtonStandardSecondaryComponent, selector: "ius-button-standard-secondary", inputs: ["disabled"], outputs: ["buttonClicked"] }, { kind: "component", type: DrawerContainerRightComponent, selector: "ius-drawer-container-right", inputs: ["titleDrawer", "percentProgressBar"], outputs: ["onPressedBackEvent", "onDrawerClosed"] }, { kind: "component", type: SectionCollapseDrawerParentComponent, selector: "ius-section-collapse-drawer-parent", inputs: ["isActive", "disabled", "textTitle", "iconName"], outputs: ["buttonClicked"] }, { kind: "component", type: InputSelectComponent, selector: "ius-input-select", inputs: ["componentId", "required", "disabled", "showHelpText", "error", "labelSuperior", "labelInferior", "errorText", "labelInput", "iconInput", "textInput", "maxlenght", "inputType"], outputs: ["onChangesValueEvent", "onEnterKey", "onBlurEvent"] }, { kind: "component", type: InputTextfieldComponent, selector: "ius-input-textfield", inputs: ["textInput", "required", "disabled", "isEnableClearText", "showHelpText", "error", "labelSuperior", "labelInferior", "errorText", "labelInput", "iconInput", "inputType", "maxlenght", "initialText", "isIconRight"], outputs: ["onChangesValueEvent", "onEnterKey", "onBlurEvent"] }, { kind: "component", type: OptionComponent, selector: "ius-option", inputs: ["disabled", "checked", "leadingIcon"], outputs: ["optionClick"] }, { kind: "component", type: InputLargeComponent, selector: "ius-input-large", inputs: ["textInput", "required", "disabled", "showHelpText", "rows", "error", "labelSuperior", "labelInferior", "errorText", "labelInput", "maxlenght", "initialText"], outputs: ["onChangesValueEvent", "onEnterKey", "onBlurEvent"] }] }); }
|
|
8051
8122
|
}
|
|
8052
8123
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CreateTicketComponent, decorators: [{
|
|
8053
8124
|
type: Component,
|
|
@@ -8061,7 +8132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
8061
8132
|
InputTextfieldComponent,
|
|
8062
8133
|
OptionComponent,
|
|
8063
8134
|
InputLargeComponent,
|
|
8064
|
-
], template: "<ius-drawer-container-right [titleDrawer]=\"'Crear Ticket'\" (onDrawerClosed)=\"onClose()\"\
|
|
8135
|
+
], template: "<ius-drawer-container-right [titleDrawer]=\"'Crear Ticket'\" (onDrawerClosed)=\"onClose()\"\n [percentProgressBar]=\"percentProgressBar\">\n <div class=\"form between-xs\">\n <div class=\"content\">\n <ius-section-collapse-drawer-parent textTitle=\"Informaci\u00F3n general\" [disabled]=\"false\"\n [isActive]=\"isExpandGeneralInformation\" (buttonClicked)=\"onExpandGeneralInformation()\">\n <div class=\"section\">\n <div class=\"select\">\n <ius-input-select componentId=\"ticketType\" [required]=\"true\" [showHelpText]=\"true\" labelSuperior=\"Tipo de ticket\"\n labelInput=\"Selecciona una opci\u00F3n\" [textInput]=\"typeSelected?.tipo\">\n @for (type of tipos; track type) {\n <ius-option (optionClick)=\"onSetValueType(type)\">\n {{ type.tipo }}\n </ius-option>\n }\n </ius-input-select>\n </div>\n <div class=\"select\">\n <ius-input-select componentId=\"ticketReason\" [required]=\"true\" [showHelpText]=\"true\" labelSuperior=\"Raz\u00F3n del ticket\"\n labelInput=\"Selecciona una opci\u00F3n\" [textInput]=\"reasonSelected?.razon\">\n @for (reason of razones; track reason) {\n <ius-option (optionClick)=\"onSetValueReason(reason)\">\n {{ reason.razon }}\n </ius-option>\n }\n </ius-input-select>\n </div>\n <div class=\"select\">\n <ius-input-textfield componentId=\"tituloTicket\" [initialText]=\"tituloTicket\" [required]=\"true\" [showHelpText]=\"true\"\n labelSuperior=\"Titulo o asunto para el ticket\" labelInput=\"Defina brevemente un asunto o titulo\"\n (onChangesValueEvent)=\"onSetValueTituloTicket($event)\">\n </ius-input-textfield>\n </div>\n <div class=\"select\">\n <ius-input-large componentId=\"descripcionTicket\" [initialText]=\"descripcionTicket\" [required]=\"true\" [showHelpText]=\"true\"\n labelSuperior=\"Descripcion del ticket\" labelInput=\"Describe tu idea o petici\u00F3n para el ticket\"\n (onChangesValueEvent)=\"onSetValueDescripcionTicket($event)\">\n </ius-input-large>\n </div>\n </div>\n </ius-section-collapse-drawer-parent>\n </div>\n\n <div class=\"footer\">\n <div class=\"toolbar\">\n <div class=\"toolbar-btn\">\n <ius-button-dynamic [labelDefault]=\"'Crear ticket'\" [labelSuccess]=\"'Agregando'\" [labelError]=\"'Error'\"\n [loading]=\"loading\" [result]=\"lastResult\" (buttonClicked)=\"createTicket()\">\n </ius-button-dynamic>\n </div>\n <div class=\"toolbar-btn\">\n <ius-button-standard-secondary (buttonClicked)=\"onClose()\">Cancelar</ius-button-standard-secondary>\n </div>\n </div>\n </div>\n </div>\n</ius-drawer-container-right>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.form{display:flex;height:100%;flex-direction:column}.section{display:flex;padding:0 8px;flex-direction:column}.content{display:flex;flex-direction:column}.select{display:flex;padding:8px 16px;flex-direction:column;justify-content:center;gap:8px;align-self:stretch}.footer{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:10px;flex:1 0 0;align-self:stretch}.toolbar{display:flex;padding:12px 16px;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;align-self:stretch}.toolbar-btn{width:100%}\n"] }]
|
|
8065
8136
|
}], propDecorators: { tipos: [{
|
|
8066
8137
|
type: Input
|
|
8067
8138
|
}], razones: [{
|
|
@@ -8132,11 +8203,11 @@ class AddUserContainerComponent {
|
|
|
8132
8203
|
this.onRemoveEvent.emit();
|
|
8133
8204
|
}
|
|
8134
8205
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddUserContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8135
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AddUserContainerComponent, isStandalone: true, selector: "ius-add-user-container", inputs: { imageUrl: "imageUrl", name: "name", documentType: "documentType", document: "document", email: "email", selected: "selected", maskEmail: "maskEmail", emailVisibleChars: "emailVisibleChars", maskDocument: "maskDocument", documentVisibleChars: "documentVisibleChars" }, outputs: { onSelectEvent: "onSelectEvent", onRemoveEvent: "onRemoveEvent" }, ngImport: i0, template: "<div\n class=\"add-user-container\"\n (click)=\"select()\"\n>\n <ius-avatar-v2\n class=\"avatar\"\n [imageUrl]=\"imageUrl\"\n [name]=\"name\"\n size=\"lg\"\n shape=\"circle\"\n ></ius-avatar-v2>\n\n <div class=\"info\">\n <p class=\"name\">{{ name }}</p>\n @if (documentType && document) {\n <p class=\"detail\">{{ documentType }} {{ displayDocument }}</p>\n }\n @if (email) {\n <p class=\"detail\">{{ displayEmail }}</p>\n }\n </div>\n\n @if (selected) {\n <button\n type=\"button\"\n class=\"remove\"\n aria-label=\"Eliminar\"\n (click)=\"remove($event)\"\n >\n <ius-icon-md iconName=\"icon-cancel\" color=\"black\"></ius-icon-md>\n </button>\n }\n</div>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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{position:relative;width:100%}.add-user-container{display:flex;width:100%;box-sizing:border-box;min-width:0;align-items:center;gap:8px;padding:8px;border-radius:8px;border:.5px solid #bfbfbf;background:#fff;cursor:pointer}.add-user-container:hover{background:#edf6ff;border-color:transparent}.avatar{flex-shrink:0}.info{display:flex;flex-direction:column;gap:0;flex:1 1 0;min-width:0;overflow:hidden}.info p{margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.name{color:#333;font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.detail{color:#595959;font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.24px}.remove{flex-shrink:0;display:flex;justify-content:center;align-items:center;width:32px;height:32px;padding:0;border:none;cursor:pointer;background:transparent}.remove:hover{opacity:.9}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AvatarV2Component, selector: "ius-avatar-v2", inputs: ["imageUrl", "name", "size", "shape", "showEditButton", "backgroundColor", "fallbackIconName"], outputs: ["editClicked"] }, { kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }] }); }
|
|
8206
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AddUserContainerComponent, isStandalone: true, selector: "ius-add-user-container", inputs: { imageUrl: "imageUrl", name: "name", documentType: "documentType", document: "document", email: "email", selected: "selected", maskEmail: "maskEmail", emailVisibleChars: "emailVisibleChars", maskDocument: "maskDocument", documentVisibleChars: "documentVisibleChars" }, outputs: { onSelectEvent: "onSelectEvent", onRemoveEvent: "onRemoveEvent" }, ngImport: i0, template: "<div\r\n class=\"add-user-container\"\r\n (click)=\"select()\"\r\n>\r\n <ius-avatar-v2\r\n class=\"avatar\"\r\n [imageUrl]=\"imageUrl\"\r\n [name]=\"name\"\r\n size=\"lg\"\r\n shape=\"circle\"\r\n ></ius-avatar-v2>\r\n\r\n <div class=\"info\">\r\n <p class=\"name\">{{ name }}</p>\r\n @if (documentType && document) {\r\n <p class=\"detail\">{{ documentType }} {{ displayDocument }}</p>\r\n }\r\n @if (email) {\r\n <p class=\"detail\">{{ displayEmail }}</p>\r\n }\r\n </div>\r\n\r\n @if (selected) {\r\n <button\r\n type=\"button\"\r\n class=\"remove\"\r\n aria-label=\"Eliminar\"\r\n (click)=\"remove($event)\"\r\n >\r\n <ius-icon-md iconName=\"icon-cancel\" color=\"black\"></ius-icon-md>\r\n </button>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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{position:relative;width:100%}.add-user-container{display:flex;width:100%;box-sizing:border-box;min-width:0;align-items:center;gap:8px;padding:8px;border-radius:8px;border:.5px solid #bfbfbf;background:#fff;cursor:pointer}.add-user-container:hover{background:#edf6ff;border-color:transparent}.avatar{flex-shrink:0}.info{display:flex;flex-direction:column;gap:0;flex:1 1 0;min-width:0;overflow:hidden}.info p{margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.name{color:#333;font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.detail{color:#595959;font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.24px}.remove{flex-shrink:0;display:flex;justify-content:center;align-items:center;width:32px;height:32px;padding:0;border:none;cursor:pointer;background:transparent}.remove:hover{opacity:.9}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AvatarV2Component, selector: "ius-avatar-v2", inputs: ["imageUrl", "name", "size", "shape", "showEditButton", "backgroundColor", "fallbackIconName"], outputs: ["editClicked"] }, { kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }] }); }
|
|
8136
8207
|
}
|
|
8137
8208
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddUserContainerComponent, decorators: [{
|
|
8138
8209
|
type: Component,
|
|
8139
|
-
args: [{ selector: 'ius-add-user-container', standalone: true, imports: [CommonModule, AvatarV2Component, IconMdComponent], template: "<div\n class=\"add-user-container\"\n (click)=\"select()\"\n>\n <ius-avatar-v2\n class=\"avatar\"\n [imageUrl]=\"imageUrl\"\n [name]=\"name\"\n size=\"lg\"\n shape=\"circle\"\n ></ius-avatar-v2>\n\n <div class=\"info\">\n <p class=\"name\">{{ name }}</p>\n @if (documentType && document) {\n <p class=\"detail\">{{ documentType }} {{ displayDocument }}</p>\n }\n @if (email) {\n <p class=\"detail\">{{ displayEmail }}</p>\n }\n </div>\n\n @if (selected) {\n <button\n type=\"button\"\n class=\"remove\"\n aria-label=\"Eliminar\"\n (click)=\"remove($event)\"\n >\n <ius-icon-md iconName=\"icon-cancel\" color=\"black\"></ius-icon-md>\n </button>\n }\n</div>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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{position:relative;width:100%}.add-user-container{display:flex;width:100%;box-sizing:border-box;min-width:0;align-items:center;gap:8px;padding:8px;border-radius:8px;border:.5px solid #bfbfbf;background:#fff;cursor:pointer}.add-user-container:hover{background:#edf6ff;border-color:transparent}.avatar{flex-shrink:0}.info{display:flex;flex-direction:column;gap:0;flex:1 1 0;min-width:0;overflow:hidden}.info p{margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.name{color:#333;font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.detail{color:#595959;font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.24px}.remove{flex-shrink:0;display:flex;justify-content:center;align-items:center;width:32px;height:32px;padding:0;border:none;cursor:pointer;background:transparent}.remove:hover{opacity:.9}\n"] }]
|
|
8210
|
+
args: [{ selector: 'ius-add-user-container', standalone: true, imports: [CommonModule, AvatarV2Component, IconMdComponent], template: "<div\r\n class=\"add-user-container\"\r\n (click)=\"select()\"\r\n>\r\n <ius-avatar-v2\r\n class=\"avatar\"\r\n [imageUrl]=\"imageUrl\"\r\n [name]=\"name\"\r\n size=\"lg\"\r\n shape=\"circle\"\r\n ></ius-avatar-v2>\r\n\r\n <div class=\"info\">\r\n <p class=\"name\">{{ name }}</p>\r\n @if (documentType && document) {\r\n <p class=\"detail\">{{ documentType }} {{ displayDocument }}</p>\r\n }\r\n @if (email) {\r\n <p class=\"detail\">{{ displayEmail }}</p>\r\n }\r\n </div>\r\n\r\n @if (selected) {\r\n <button\r\n type=\"button\"\r\n class=\"remove\"\r\n aria-label=\"Eliminar\"\r\n (click)=\"remove($event)\"\r\n >\r\n <ius-icon-md iconName=\"icon-cancel\" color=\"black\"></ius-icon-md>\r\n </button>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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{position:relative;width:100%}.add-user-container{display:flex;width:100%;box-sizing:border-box;min-width:0;align-items:center;gap:8px;padding:8px;border-radius:8px;border:.5px solid #bfbfbf;background:#fff;cursor:pointer}.add-user-container:hover{background:#edf6ff;border-color:transparent}.avatar{flex-shrink:0}.info{display:flex;flex-direction:column;gap:0;flex:1 1 0;min-width:0;overflow:hidden}.info p{margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.name{color:#333;font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.detail{color:#595959;font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.24px}.remove{flex-shrink:0;display:flex;justify-content:center;align-items:center;width:32px;height:32px;padding:0;border:none;cursor:pointer;background:transparent}.remove:hover{opacity:.9}\n"] }]
|
|
8140
8211
|
}], propDecorators: { imageUrl: [{
|
|
8141
8212
|
type: Input
|
|
8142
8213
|
}], name: [{
|