@litigiovirtual/ius-design-components 1.0.248 → 1.0.250
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/avatar-business/avatar-business.component.mjs +1 -1
- package/esm2022/lib/avatar-v2/avatar-v2.component.mjs +1 -1
- package/esm2022/lib/card-list-drag-on/card-list-drag-on.component.mjs +7 -4
- package/esm2022/lib/date-hour-picker/date-hour-picker.component.mjs +3 -3
- package/esm2022/lib/toolbar/toolbar.component.mjs +1 -1
- package/esm2022/lib/toolbar-user-menu/toolbar-user-menu.component.mjs +6 -3
- package/fesm2022/litigiovirtual-ius-design-components.mjs +12 -6
- package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
- package/lib/card-list-drag-on/card-list-drag-on.component.d.ts +2 -1
- package/lib/toolbar/toolbar.component.d.ts +1 -0
- package/lib/toolbar-user-menu/toolbar-user-menu.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -2583,7 +2583,7 @@ class DateHourPickerComponent {
|
|
|
2583
2583
|
}
|
|
2584
2584
|
}
|
|
2585
2585
|
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 }); }
|
|
2586
|
-
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;display:flex;flex-direction:column}.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;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;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
|
|
2586
|
+
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;display:flex;flex-direction:column}.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
|
|
2587
2587
|
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"] }] }); }
|
|
2588
2588
|
}
|
|
2589
2589
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateHourPickerComponent, decorators: [{
|
|
@@ -2594,7 +2594,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2594
2594
|
IconMdComponent,
|
|
2595
2595
|
SimpleDividerComponent,
|
|
2596
2596
|
ButtonStandardTertiaryComponent,
|
|
2597
|
-
], 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;display:flex;flex-direction:column}.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;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;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"] }]
|
|
2597
|
+
], 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;display:flex;flex-direction:column}.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"] }]
|
|
2598
2598
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
|
|
2599
2599
|
type: Input
|
|
2600
2600
|
}], placeholder: [{
|
|
@@ -4082,12 +4082,15 @@ class ToolbarUserMenuComponent {
|
|
|
4082
4082
|
this.clickAgregarAccount.emit();
|
|
4083
4083
|
this.requestClose.emit();
|
|
4084
4084
|
}
|
|
4085
|
+
get hasMultipleServices() {
|
|
4086
|
+
return !!(this.detallesConsumo && this.detallesConsumo.length > 0);
|
|
4087
|
+
}
|
|
4085
4088
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarUserMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4086
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ToolbarUserMenuComponent, isStandalone: true, selector: "ius-toolbar-user-menu", inputs: { object: "object", subscripcionDetalle: "subscripcionDetalle", detallesConsumo: "detallesConsumo", accountList: "accountList" }, outputs: { clickPerfilPreferencias: "clickPerfilPreferencias", clickUsuariosRoles: "clickUsuariosRoles", clickConfiguracion: "clickConfiguracion", clickPagos: "clickPagos", clickSubsServicios: "clickSubsServicios", clickCambiarCuenta: "clickCambiarCuenta", clickCerrarSesion: "clickCerrarSesion", clickReferir: "clickReferir", requestClose: "requestClose", clickAccountSelected: "clickAccountSelected", clickAccountPredeterminada: "clickAccountPredeterminada", clickEditAccount: "clickEditAccount", clickDesvincularAccount: "clickDesvincularAccount", clickAgregarAccount: "clickAgregarAccount" }, ngImport: i0, template: "<div class=\"tbl-menu\">\r\n <div class=\"body-menu scrollable\">\r\n <div class=\"colum-mn-1 text-head-mn\">\r\n <span>Estas navegando en</span>\r\n <div class=\"tx-row-1\">\r\n <ius-icon-sm\r\n iconName=\"icon-account-circle\"\r\n class=\"icon-acc-circle\"\r\n ></ius-icon-sm>\r\n <span class=\"h4 tx-abog\">{{ object.nombreCompany }}</span>\r\n </div>\r\n <div class=\"tx-row-1 id-ct\">\r\n <span>ID Cuenta</span>\r\n <span class=\"tx-id-ct\">{{ object.cuentaID }}</span>\r\n </div>\r\n <div class=\"tx-row-1 tx-rol\">\r\n <span>Tu rol</span>\r\n <span class=\"tx-name-rl\">{{ object.rol }}</span>\r\n </div>\r\n </div>\r\n @if (!showFormSwitchAccount) {\r\n <div class=\"colum-mn-1\">\r\n <div class=\"email-inf\">\r\n <ius-icon-xs\r\n iconName=\"icon-alternate-email\"\r\n class=\"icon-alt-email\"\r\n ></ius-icon-xs>\r\n <span>{{ object.correo }}</span>\r\n </div>\r\n <ius-dropdown-option-item (click)=\"onClickPerfilPreferencias()\"\r\n >Perfil, preferencias y seguridad</ius-dropdown-option-item\r\n >\r\n </div>\r\n <ius-simple-divider></ius-simple-divider>\r\n <div class=\"container-plan\" [ngClass]=\"{ 'show-more': showMore }\">\r\n <div class=\"inf-plan\">\r\n <div class=\"row-plan-1\">\r\n <div class=\"col-plan-1\">\r\n <span class=\"tx-small tx-tipo-plan\">{{\r\n subscripcionDetalle?.tipoServicio\r\n }}</span>\r\n <div class=\"tx-row-1\">\r\n <span class=\"tx-base tx-name-plan\">{{\r\n subscripcionDetalle?.namePlan\r\n }}</span>\r\n <ius-icon-md\r\n iconName=\"icon-help\"\r\n class=\"icon-help\"\r\n ></ius-icon-md>\r\n </div>\r\n <div class=\"tx-row-2 tx-small\">\r\n <div class=\"tx-row-1\">\r\n <span class=\"tx-contador-1\">Total global</span>\r\n <span class=\"tx-contador-2\">{{\r\n subscripcionDetalle?.cantTotal\r\n }}</span>\r\n </div>\r\n <div class=\"tx-row-1\">\r\n <span class=\"tx-contador-1\">Disponible global</span>\r\n <span class=\"tx-contador-2\">{{\r\n subscripcionDetalle?.cantDisponible\r\n }}</span>\r\n </div>\r\n </div>\r\n <span class=\"tx-base tx-estado-plan\">{{\r\n subscripcionDetalle?.estado\r\n }}</span>\r\n </div>\r\n <ius-button-circle-tertiary\r\n iconName=\"icon-discover-tune\"\r\n ></ius-button-circle-tertiary>\r\n </div>\r\n <div style=\"width: 100%\">\r\n <ius-progress-bar\r\n [total]=\"subscripcionDetalle?.cantTotal ?? 0\"\r\n [titleV1]=\"'Judicial'\"\r\n [v1]=\"subscripcionDetalle?.cantJudicial ?? 0\"\r\n [titleV2]=\"'SuperSociedades'\"\r\n [v2]=\"subscripcionDetalle?.cantProcesos2 ?? 0\"\r\n [titleV3]=\"'Procuraduria'\"\r\n [v3]=\"subscripcionDetalle?.cantProcesos3 ?? 0\"\r\n >\r\n </ius-progress-bar>\r\n </div>\r\n <div class=\"legend\">\r\n <div class=\"item-counter tx-small\">\r\n <ius-icon-xs\r\n iconName=\"icon-storage-set\"\r\n class=\"icon-storage-set\"\r\n ></ius-icon-xs>\r\n <span>{{ subscripcionDetalle?.asignados ?? 0 }}</span>\r\n </div>\r\n <div class=\"item-counter tx-small\">\r\n <ius-icon-xs\r\n iconName=\"icon-storage-plus\"\r\n class=\"icon-storage-plus\"\r\n ></ius-icon-xs>\r\n <span>{{\r\n subscripcionDetalle?.cantAsignadaDisponible ?? 0\r\n }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <ius-simple-divider></ius-simple-divider>\r\n @if (detallesConsumo) {\r\n @for (detail of detallesConsumo; track $index) {\r\n <div class=\"inf-plan\">\r\n <div class=\"row-plan-1\">\r\n <div class=\"col-plan-1\">\r\n <span class=\"tx-small tx-tipo-plan\">{{\r\n detail.tipoServicio\r\n }}</span>\r\n <div class=\"tx-row-1\">\r\n <span class=\"tx-base tx-name-plan\">Por consumo</span>\r\n <ius-icon-md\r\n iconName=\"icon-help\"\r\n class=\"icon-help\"\r\n ></ius-icon-md>\r\n </div>\r\n <div class=\"tx-row-2 tx-small\">\r\n <div class=\"tx-row-1\">\r\n <span class=\"tx-contador-1\">Consumo este mes</span>\r\n <span class=\"tx-contador-2\">{{\r\n detail.cantConsumida\r\n }}</span>\r\n </div>\r\n </div>\r\n <span class=\"tx-base tx-estado-plan\">{{\r\n detail.estado\r\n }}</span>\r\n </div>\r\n <ius-button-circle-tertiary\r\n iconName=\"icon-discover-tune\"\r\n ></ius-button-circle-tertiary>\r\n </div>\r\n </div>\r\n <ius-simple-divider></ius-simple-divider>\r\n }\r\n }\r\n </div>\r\n <ius-button-standard-tertiary\r\n class=\"btn-list\"\r\n [iconName]=\"\r\n showMore ? 'icon-keyboard-arrow-up' : 'icon-keyboard-arrow-down'\r\n \"\r\n (buttonClicked)=\"clickShowMore()\"\r\n >\r\n {{ showMore ? \"Mostrar menos\" : \"Mostrar m\u00E1s\" }}\r\n </ius-button-standard-tertiary>\r\n <ius-simple-divider></ius-simple-divider>\r\n <div class=\"ctn-items\">\r\n <ius-menu-item\r\n iconName=\"icon-groups\"\r\n (buttonClicked)=\"onClickUsuariosRoles()\"\r\n >Usuarios y roles</ius-menu-item\r\n >\r\n <ius-menu-item\r\n iconName=\"icon-build\"\r\n (buttonClicked)=\"onClickConfiguracion()\"\r\n >Configuraci\u00F3n de la cuenta</ius-menu-item\r\n >\r\n <ius-menu-item\r\n iconName=\"icon-finance-chip\"\r\n (buttonClicked)=\"onClickPagos()\"\r\n >Pagos y facturaci\u00F3n</ius-menu-item\r\n >\r\n <ius-menu-item\r\n iconName=\"icon-enterprise\"\r\n (buttonClicked)=\"onClickSubsServicios()\"\r\n >Suscripciones y servicios</ius-menu-item\r\n >\r\n <ius-menu-item iconName=\"icon-stream\" (buttonClicked)=\"onClickReferir()\"\r\n >Referir servicio</ius-menu-item\r\n >\r\n </div>\r\n\r\n <ius-simple-divider></ius-simple-divider>\r\n } @else {\r\n <div class=\"container-bottom\">\r\n <span class=\"tx-row-1 tx-rol\">Cambiar a</span>\r\n <div class=\"container-list\">\r\n @for (account of accountList; track account; let i = $index) {\r\n <ius-button-accounts\r\n (accountSelected)=\"onClickAccount(account)\"\r\n (onPressedPredeterminado)=\"\r\n clickAccountPredeterminada.emit(account)\r\n \"\r\n ,\r\n (onPressedEditar)=\"clickEditAccount.emit(account)\"\r\n ,\r\n (onPressedDesvincular)=\"clickDesvincularAccount.emit(account)\"\r\n [account]=\"account\"\r\n [showOptionsFlag]=\"false\"\r\n ></ius-button-accounts>\r\n }\r\n </div>\r\n <ius-button-standard-tertiary [iconName]=\"'icon-add'\" (buttonClicked)=\"addAccount()\">Agregar\r\n nueva cuenta</ius-button-standard-tertiary>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"ctn-items mgt-8\">\r\n <ius-menu-item\r\n iconName=\"{{\r\n !showFormSwitchAccount ? 'icon-cases' : 'icon-arrow-left-alt'\r\n }}\"\r\n (buttonClicked)=\"onClickCambiarCuenta()\"\r\n >{{\r\n !showFormSwitchAccount\r\n ? \"Cambiar de cuenta\"\r\n : \"Volver al menu de usuario\"\r\n }}</ius-menu-item\r\n >\r\n <ius-menu-item\r\n iconName=\"icon-exit-to-app\"\r\n (buttonClicked)=\"onClickCerrarSesion()\"\r\n >Cerrar sesi\u00F3n</ius-menu-item\r\n >\r\n </div>\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-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}.tbl-menu{display:flex;width:390px;height:85vh;padding:16px;flex-direction:column}.body-menu{display:flex;flex:1 0 0;flex-direction:column;padding-right:6px;gap:8px;font-family:Rubik,sans-serif;overflow-y:auto;min-height:0}.colum-mn-1{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.text-head-mn{color:#8c8c8c;font-size:.75rem;line-height:16px;letter-spacing:.24px}.icon-acc-circle{color:#595959}.tx-row-1{display:flex;align-items:center;gap:4px}.tx-abog{color:#333;letter-spacing:.2px}.id-ct{padding:4px;border-radius:4px;border:1px solid #d9d9d9}.tx-id-ct{font-weight:500}.tx-rol{font-size:.875rem;color:#595959;line-height:20px}.tx-name-rl{color:#333;letter-spacing:.28px;font-weight:500}.email-inf{display:flex;padding:8px;align-items:center;gap:4px;color:#595959;font-size:.875rem;line-height:20px;letter-spacing:.28px}.icon-alt-email{color:#7caf25}ius-dropdown-option-item{width:100%}.container-plan{overflow:hidden;max-height:200px;transition:max-height .5s cubic-bezier(.4,0,.2,1);flex-shrink:0}.inf-plan{display:flex;padding:8px;flex-direction:column;align-items:flex-start;gap:8px}.show-more{max-height:10000px;transition:max-height .5s cubic-bezier(.4,0,.2,1)}.tx-small{font-size:.75rem;line-height:16px;letter-spacing:.24px}.tx-base{font-size:.875rem;line-height:20px;letter-spacing:.28px}.row-plan-1{display:flex;gap:12px;width:100%}.col-plan-1{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;flex:1 0 0}.icon-help{color:#8c8c8c}.tx-tipo-plan{color:#595959;font-weight:500}.tx-name-plan{color:#333;font-weight:500}.tx-row-2{display:flex;align-items:center;gap:8px}.tx-contador-1{color:#8c8c8c;font-weight:500}.tx-contador-2{color:#333}.tx-estado-plan{color:#7caf25}.mgt-8{margin-top:8px}.progress-container{width:100%;border-radius:100px;height:23px;overflow:hidden;background:#f0f0f0}.progress-bar{display:flex;height:100%}.segment{height:100%}.tipo-1-color-bar{background:#5892ff}.tipo-1-color{color:#5892ff}.tipo-2-color-bar{background:#103ab7}.tipo-2-color{color:#103ab7}.legend{display:flex;width:100%;align-items:center;gap:8px;flex-wrap:wrap}.legend .icon-storage-set{color:#103ab7}.legend .icon-storage-plus{color:#629219}.item-counter{display:flex;align-items:center;gap:4px;color:#333}.tx-name-serv{color:#595959;font-weight:500}.btn-list{margin-bottom:8px}.ctn-items{display:flex;flex-direction:column;gap:4px}.scrollable{overflow-y:auto;overflow-x:hidden}.scrollable::-webkit-scrollbar{-webkit-appearance:none}.scrollable::-webkit-scrollbar:vertical{width:7px}.scrollable::-webkit-scrollbar-thumb{background-color:#d8d6d6;border-radius:20px}.container-bottom{padding:0 16px;display:flex;flex-direction:column;gap:8px}.container-list{display:flex;flex-direction:column;gap:4px;width:90%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }, { kind: "component", type: IconXsComponent, selector: "ius-icon-xs", inputs: ["iconName", "color"] }, { kind: "component", type: DropdownOptionItemComponent, selector: "ius-dropdown-option-item", inputs: ["iconName", "route"], outputs: ["click"] }, { kind: "component", type: SimpleDividerComponent, selector: "ius-simple-divider" }, { kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "component", type: ButtonCircleTertiaryComponent, selector: "ius-button-circle-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }, { kind: "component", type: ButtonStandardTertiaryComponent, selector: "ius-button-standard-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }, { kind: "component", type: MenuItemComponent, selector: "ius-menu-item", inputs: ["isActive", "iconName", "numberAlerts"], outputs: ["buttonClicked"] }, { kind: "component", type: ProgressBarComponent, selector: "ius-progress-bar", inputs: ["total", "v1", "v2", "v3", "titleV1", "titleV2", "titleV3", "titleV4"] }, { kind: "component", type: ButtonAccountsComponent, selector: "ius-button-accounts", inputs: ["account", "showOptionsFlag"], outputs: ["accountSelected", "onPressedPredeterminado", "onPressedDesvincular", "onPressedEditar"] }] }); }
|
|
4089
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ToolbarUserMenuComponent, isStandalone: true, selector: "ius-toolbar-user-menu", inputs: { object: "object", subscripcionDetalle: "subscripcionDetalle", detallesConsumo: "detallesConsumo", accountList: "accountList" }, outputs: { clickPerfilPreferencias: "clickPerfilPreferencias", clickUsuariosRoles: "clickUsuariosRoles", clickConfiguracion: "clickConfiguracion", clickPagos: "clickPagos", clickSubsServicios: "clickSubsServicios", clickCambiarCuenta: "clickCambiarCuenta", clickCerrarSesion: "clickCerrarSesion", clickReferir: "clickReferir", requestClose: "requestClose", clickAccountSelected: "clickAccountSelected", clickAccountPredeterminada: "clickAccountPredeterminada", clickEditAccount: "clickEditAccount", clickDesvincularAccount: "clickDesvincularAccount", clickAgregarAccount: "clickAgregarAccount" }, ngImport: i0, template: "<div class=\"tbl-menu\">\r\n <div class=\"body-menu scrollable\">\r\n <div class=\"colum-mn-1 text-head-mn\">\r\n <span>Est\u00E1s navegando en</span>\r\n <div class=\"tx-row-1\">\r\n <ius-icon-sm iconName=\"icon-account-circle\" class=\"icon-acc-circle\"></ius-icon-sm>\r\n <span class=\"h4 tx-abog\">{{ object.nombreCompany }}</span>\r\n </div>\r\n <div class=\"tx-row-1 id-ct\">\r\n <span>ID Cuenta</span>\r\n <span class=\"tx-id-ct\">{{ object.cuentaID }}</span>\r\n </div>\r\n <div class=\"tx-row-1 tx-rol\">\r\n <span>Tu rol</span>\r\n <span class=\"tx-name-rl\">{{ object.rol }}</span>\r\n </div>\r\n </div>\r\n @if (!showFormSwitchAccount) {\r\n <div class=\"colum-mn-1\">\r\n <div class=\"email-inf\">\r\n <ius-icon-xs iconName=\"icon-alternate-email\" class=\"icon-alt-email\"></ius-icon-xs>\r\n <span>{{ object.correo }}</span>\r\n </div>\r\n <ius-dropdown-option-item (click)=\"onClickPerfilPreferencias()\">Perfil, preferencias y\r\n seguridad</ius-dropdown-option-item>\r\n </div>\r\n <ius-simple-divider></ius-simple-divider>\r\n <div class=\"container-plan\" [ngClass]=\"{ 'show-more': showMore }\">\r\n <div class=\"inf-plan\">\r\n <div class=\"row-plan-1\">\r\n <div class=\"col-plan-1\">\r\n <span class=\"tx-small tx-tipo-plan\">{{\r\n subscripcionDetalle?.tipoServicio\r\n }}</span>\r\n <div class=\"tx-row-1\">\r\n <span class=\"tx-base tx-name-plan\">{{\r\n subscripcionDetalle?.namePlan\r\n }}</span>\r\n <ius-icon-md iconName=\"icon-help\" class=\"icon-help\"></ius-icon-md>\r\n </div>\r\n <div class=\"tx-row-2 tx-small\">\r\n <div class=\"tx-row-1\">\r\n <span class=\"tx-contador-1\">Total global</span>\r\n <span class=\"tx-contador-2\">{{\r\n subscripcionDetalle?.cantTotal\r\n }}</span>\r\n </div>\r\n <div class=\"tx-row-1\">\r\n <span class=\"tx-contador-1\">Disponible global</span>\r\n <span class=\"tx-contador-2\">{{\r\n subscripcionDetalle?.cantDisponible\r\n }}</span>\r\n </div>\r\n </div>\r\n <span class=\"tx-base tx-estado-plan\">{{\r\n subscripcionDetalle?.estado\r\n }}</span>\r\n @if (subscripcionDetalle?.esPlanGratuito) {\r\n <div class=\"tx-row-1 tx-small tx-prueba\">\r\n <ius-icon-xs iconName=\"icon-schedule\"></ius-icon-xs>\r\n <span>Plan de prueba activo</span>\r\n </div>\r\n }\r\n </div>\r\n <ius-button-circle-tertiary iconName=\"icon-discover-tune\"></ius-button-circle-tertiary>\r\n </div>\r\n <div style=\"width: 100%\">\r\n <ius-progress-bar [total]=\"subscripcionDetalle?.cantTotal ?? 0\" [titleV1]=\"'Judicial'\"\r\n [v1]=\"subscripcionDetalle?.cantJudicial ?? 0\" [titleV2]=\"'SuperSociedades'\"\r\n [v2]=\"subscripcionDetalle?.cantProcesos2 ?? 0\" [titleV3]=\"'Procuraduria'\"\r\n [v3]=\"subscripcionDetalle?.cantProcesos3 ?? 0\">\r\n </ius-progress-bar>\r\n </div>\r\n <div class=\"legend\">\r\n <div class=\"item-counter tx-small\">\r\n <ius-icon-xs iconName=\"icon-storage-set\" class=\"icon-storage-set\"></ius-icon-xs>\r\n <span>{{ subscripcionDetalle?.asignados ?? 0 }}</span>\r\n </div>\r\n <div class=\"item-counter tx-small\">\r\n <ius-icon-xs iconName=\"icon-storage-plus\" class=\"icon-storage-plus\"></ius-icon-xs>\r\n <span>{{\r\n subscripcionDetalle?.cantAsignadaDisponible ?? 0\r\n }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <ius-simple-divider></ius-simple-divider>\r\n @if (detallesConsumo) {\r\n @for (detail of detallesConsumo; track $index) {\r\n <div class=\"inf-plan\">\r\n <div class=\"row-plan-1\">\r\n <div class=\"col-plan-1\">\r\n <span class=\"tx-small tx-tipo-plan\">{{\r\n detail.tipoServicio\r\n }}</span>\r\n <div class=\"tx-row-1\">\r\n <span class=\"tx-base tx-name-plan\">Por consumo</span>\r\n <ius-icon-md iconName=\"icon-help\" class=\"icon-help\"></ius-icon-md>\r\n </div>\r\n <div class=\"tx-row-2 tx-small\">\r\n <div class=\"tx-row-1\">\r\n <span class=\"tx-contador-1\">Consumo este mes</span>\r\n <span class=\"tx-contador-2\">{{\r\n detail.cantConsumida\r\n }}</span>\r\n </div>\r\n </div>\r\n <span class=\"tx-base tx-estado-plan\">{{\r\n detail.estado\r\n }}</span>\r\n </div>\r\n <ius-button-circle-tertiary iconName=\"icon-discover-tune\"></ius-button-circle-tertiary>\r\n </div>\r\n </div>\r\n <ius-simple-divider></ius-simple-divider>\r\n }\r\n }\r\n </div>\r\n @if(hasMultipleServices) {\r\n <ius-button-standard-tertiary class=\"btn-list\" [iconName]=\"\r\n showMore ? 'icon-keyboard-arrow-up' : 'icon-keyboard-arrow-down'\r\n \" (buttonClicked)=\"clickShowMore()\">\r\n {{ showMore ? \"Mostrar menos\" : \"Mostrar m\u00E1s\" }}\r\n </ius-button-standard-tertiary>\r\n }\r\n <ius-simple-divider></ius-simple-divider>\r\n <div class=\"ctn-items\">\r\n <ius-menu-item iconName=\"icon-groups\" (buttonClicked)=\"onClickUsuariosRoles()\">Usuarios y roles</ius-menu-item>\r\n <ius-menu-item iconName=\"icon-build\" (buttonClicked)=\"onClickConfiguracion()\">Configuraci\u00F3n de la\r\n cuenta</ius-menu-item>\r\n <ius-menu-item iconName=\"icon-finance-chip\" (buttonClicked)=\"onClickPagos()\">Pagos y facturaci\u00F3n</ius-menu-item>\r\n <ius-menu-item iconName=\"icon-enterprise\" (buttonClicked)=\"onClickSubsServicios()\">Suscripciones y\r\n servicios</ius-menu-item>\r\n <ius-menu-item iconName=\"icon-stream\" (buttonClicked)=\"onClickReferir()\">Referir servicio</ius-menu-item>\r\n </div>\r\n\r\n <ius-simple-divider></ius-simple-divider>\r\n } @else {\r\n <div class=\"container-bottom\">\r\n <span class=\"tx-row-1 tx-rol\">Cambiar a</span>\r\n <div class=\"container-list\">\r\n @for (account of accountList; track account; let i = $index) {\r\n <ius-button-accounts (accountSelected)=\"onClickAccount(account)\" (onPressedPredeterminado)=\"\r\n clickAccountPredeterminada.emit(account)\r\n \"\r\n ,\r\n (onPressedEditar)=\"clickEditAccount.emit(account)\"\r\n ,\r\n (onPressedDesvincular)=\"clickDesvincularAccount.emit(account)\"\r\n [account]=\"account\"\r\n [showOptionsFlag]=\"false\"\r\n ></ius-button-accounts>\r\n }\r\n </div>\r\n <ius-button-standard-tertiary [iconName]=\"'icon-add'\" (buttonClicked)=\"addAccount()\">Agregar\r\n nueva cuenta</ius-button-standard-tertiary>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"ctn-items mgt-8\">\r\n <ius-menu-item iconName=\"{{\r\n !showFormSwitchAccount ? 'icon-cases' : 'icon-arrow-left-alt'\r\n }}\" (buttonClicked)=\"onClickCambiarCuenta()\">{{\r\n !showFormSwitchAccount\r\n ? \"Cambiar de cuenta\"\r\n : \"Volver al menu de usuario\"\r\n }}</ius-menu-item>\r\n <ius-menu-item iconName=\"icon-exit-to-app\" (buttonClicked)=\"onClickCerrarSesion()\">Cerrar sesi\u00F3n</ius-menu-item>\r\n </div>\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-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}.tbl-menu{display:flex;width:390px;height:85vh;padding:16px;flex-direction:column}.body-menu{display:flex;flex:1 0 0;flex-direction:column;padding-right:6px;gap:8px;font-family:Rubik,sans-serif;overflow-y:auto;min-height:0}.colum-mn-1{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.text-head-mn{color:#8c8c8c;font-size:.75rem;line-height:16px;letter-spacing:.24px}.icon-acc-circle{color:#595959}.tx-row-1{display:flex;align-items:center;gap:4px}.tx-abog{color:#333;letter-spacing:.2px}.id-ct{padding:4px;border-radius:4px;border:1px solid #d9d9d9}.tx-id-ct{font-weight:500}.tx-rol{font-size:.875rem;color:#595959;line-height:20px}.tx-name-rl{color:#333;letter-spacing:.28px;font-weight:500}.email-inf{display:flex;padding:8px;align-items:center;gap:4px;color:#595959;font-size:.875rem;line-height:20px;letter-spacing:.28px}.icon-alt-email{color:#7caf25}ius-dropdown-option-item{width:100%}.container-plan{overflow:hidden;max-height:200px;transition:max-height .5s cubic-bezier(.4,0,.2,1);flex-shrink:0}.inf-plan{display:flex;padding:8px;flex-direction:column;align-items:flex-start;gap:8px}.show-more{max-height:10000px;transition:max-height .5s cubic-bezier(.4,0,.2,1)}.tx-small{font-size:.75rem;line-height:16px;letter-spacing:.24px}.tx-base{font-size:.875rem;line-height:20px;letter-spacing:.28px}.row-plan-1{display:flex;gap:12px;width:100%}.col-plan-1{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;flex:1 0 0}.icon-help{color:#8c8c8c}.tx-tipo-plan{color:#595959;font-weight:500}.tx-name-plan{color:#333;font-weight:500}.tx-row-2{display:flex;align-items:center;gap:8px}.tx-contador-1{color:#8c8c8c;font-weight:500}.tx-contador-2{color:#333}.tx-estado-plan{color:#7caf25}.mgt-8{margin-top:8px}.progress-container{width:100%;border-radius:100px;height:23px;overflow:hidden;background:#f0f0f0}.progress-bar{display:flex;height:100%}.segment{height:100%}.tipo-1-color-bar{background:#5892ff}.tipo-1-color{color:#5892ff}.tipo-2-color-bar{background:#103ab7}.tipo-2-color{color:#103ab7}.legend{display:flex;width:100%;align-items:center;gap:8px;flex-wrap:wrap}.legend .icon-storage-set{color:#103ab7}.legend .icon-storage-plus{color:#629219}.item-counter{display:flex;align-items:center;gap:4px;color:#333}.tx-name-serv{color:#595959;font-weight:500}.btn-list{margin-bottom:8px}.ctn-items{display:flex;flex-direction:column;gap:4px}.scrollable{overflow-y:auto;overflow-x:hidden}.scrollable::-webkit-scrollbar{-webkit-appearance:none}.scrollable::-webkit-scrollbar:vertical{width:7px}.scrollable::-webkit-scrollbar-thumb{background-color:#d8d6d6;border-radius:20px}.container-bottom{padding:0 16px;display:flex;flex-direction:column;gap:8px}.container-list{display:flex;flex-direction:column;gap:4px;width:90%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }, { kind: "component", type: IconXsComponent, selector: "ius-icon-xs", inputs: ["iconName", "color"] }, { kind: "component", type: DropdownOptionItemComponent, selector: "ius-dropdown-option-item", inputs: ["iconName", "route"], outputs: ["click"] }, { kind: "component", type: SimpleDividerComponent, selector: "ius-simple-divider" }, { kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "component", type: ButtonCircleTertiaryComponent, selector: "ius-button-circle-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }, { kind: "component", type: ButtonStandardTertiaryComponent, selector: "ius-button-standard-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }, { kind: "component", type: MenuItemComponent, selector: "ius-menu-item", inputs: ["isActive", "iconName", "numberAlerts"], outputs: ["buttonClicked"] }, { kind: "component", type: ProgressBarComponent, selector: "ius-progress-bar", inputs: ["total", "v1", "v2", "v3", "titleV1", "titleV2", "titleV3", "titleV4"] }, { kind: "component", type: ButtonAccountsComponent, selector: "ius-button-accounts", inputs: ["account", "showOptionsFlag"], outputs: ["accountSelected", "onPressedPredeterminado", "onPressedDesvincular", "onPressedEditar"] }] }); }
|
|
4087
4090
|
}
|
|
4088
4091
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarUserMenuComponent, decorators: [{
|
|
4089
4092
|
type: Component,
|
|
4090
|
-
args: [{ selector: 'ius-toolbar-user-menu', standalone: true, imports: [CommonModule, IconSmComponent, IconXsComponent, DropdownOptionItemComponent, SimpleDividerComponent, IconMdComponent, ButtonCircleTertiaryComponent, ButtonStandardTertiaryComponent, MenuItemComponent, ProgressBarComponent, ButtonAccountsComponent], template: "<div class=\"tbl-menu\">\r\n <div class=\"body-menu scrollable\">\r\n <div class=\"colum-mn-1 text-head-mn\">\r\n <span>Estas navegando en</span>\r\n <div class=\"tx-row-1\">\r\n <ius-icon-sm\r\n iconName=\"icon-account-circle\"\r\n class=\"icon-acc-circle\"\r\n ></ius-icon-sm>\r\n <span class=\"h4 tx-abog\">{{ object.nombreCompany }}</span>\r\n </div>\r\n <div class=\"tx-row-1 id-ct\">\r\n <span>ID Cuenta</span>\r\n <span class=\"tx-id-ct\">{{ object.cuentaID }}</span>\r\n </div>\r\n <div class=\"tx-row-1 tx-rol\">\r\n <span>Tu rol</span>\r\n <span class=\"tx-name-rl\">{{ object.rol }}</span>\r\n </div>\r\n </div>\r\n @if (!showFormSwitchAccount) {\r\n <div class=\"colum-mn-1\">\r\n <div class=\"email-inf\">\r\n <ius-icon-xs\r\n iconName=\"icon-alternate-email\"\r\n class=\"icon-alt-email\"\r\n ></ius-icon-xs>\r\n <span>{{ object.correo }}</span>\r\n </div>\r\n <ius-dropdown-option-item (click)=\"onClickPerfilPreferencias()\"\r\n >Perfil, preferencias y seguridad</ius-dropdown-option-item\r\n >\r\n </div>\r\n <ius-simple-divider></ius-simple-divider>\r\n <div class=\"container-plan\" [ngClass]=\"{ 'show-more': showMore }\">\r\n <div class=\"inf-plan\">\r\n <div class=\"row-plan-1\">\r\n <div class=\"col-plan-1\">\r\n <span class=\"tx-small tx-tipo-plan\">{{\r\n subscripcionDetalle?.tipoServicio\r\n }}</span>\r\n <div class=\"tx-row-1\">\r\n <span class=\"tx-base tx-name-plan\">{{\r\n subscripcionDetalle?.namePlan\r\n }}</span>\r\n <ius-icon-md\r\n iconName=\"icon-help\"\r\n class=\"icon-help\"\r\n ></ius-icon-md>\r\n </div>\r\n <div class=\"tx-row-2 tx-small\">\r\n <div class=\"tx-row-1\">\r\n <span class=\"tx-contador-1\">Total global</span>\r\n <span class=\"tx-contador-2\">{{\r\n subscripcionDetalle?.cantTotal\r\n }}</span>\r\n </div>\r\n <div class=\"tx-row-1\">\r\n <span class=\"tx-contador-1\">Disponible global</span>\r\n <span class=\"tx-contador-2\">{{\r\n subscripcionDetalle?.cantDisponible\r\n }}</span>\r\n </div>\r\n </div>\r\n <span class=\"tx-base tx-estado-plan\">{{\r\n subscripcionDetalle?.estado\r\n }}</span>\r\n </div>\r\n <ius-button-circle-tertiary\r\n iconName=\"icon-discover-tune\"\r\n ></ius-button-circle-tertiary>\r\n </div>\r\n <div style=\"width: 100%\">\r\n <ius-progress-bar\r\n [total]=\"subscripcionDetalle?.cantTotal ?? 0\"\r\n [titleV1]=\"'Judicial'\"\r\n [v1]=\"subscripcionDetalle?.cantJudicial ?? 0\"\r\n [titleV2]=\"'SuperSociedades'\"\r\n [v2]=\"subscripcionDetalle?.cantProcesos2 ?? 0\"\r\n [titleV3]=\"'Procuraduria'\"\r\n [v3]=\"subscripcionDetalle?.cantProcesos3 ?? 0\"\r\n >\r\n </ius-progress-bar>\r\n </div>\r\n <div class=\"legend\">\r\n <div class=\"item-counter tx-small\">\r\n <ius-icon-xs\r\n iconName=\"icon-storage-set\"\r\n class=\"icon-storage-set\"\r\n ></ius-icon-xs>\r\n <span>{{ subscripcionDetalle?.asignados ?? 0 }}</span>\r\n </div>\r\n <div class=\"item-counter tx-small\">\r\n <ius-icon-xs\r\n iconName=\"icon-storage-plus\"\r\n class=\"icon-storage-plus\"\r\n ></ius-icon-xs>\r\n <span>{{\r\n subscripcionDetalle?.cantAsignadaDisponible ?? 0\r\n }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <ius-simple-divider></ius-simple-divider>\r\n @if (detallesConsumo) {\r\n @for (detail of detallesConsumo; track $index) {\r\n <div class=\"inf-plan\">\r\n <div class=\"row-plan-1\">\r\n <div class=\"col-plan-1\">\r\n <span class=\"tx-small tx-tipo-plan\">{{\r\n detail.tipoServicio\r\n }}</span>\r\n <div class=\"tx-row-1\">\r\n <span class=\"tx-base tx-name-plan\">Por consumo</span>\r\n <ius-icon-md\r\n iconName=\"icon-help\"\r\n class=\"icon-help\"\r\n ></ius-icon-md>\r\n </div>\r\n <div class=\"tx-row-2 tx-small\">\r\n <div class=\"tx-row-1\">\r\n <span class=\"tx-contador-1\">Consumo este mes</span>\r\n <span class=\"tx-contador-2\">{{\r\n detail.cantConsumida\r\n }}</span>\r\n </div>\r\n </div>\r\n <span class=\"tx-base tx-estado-plan\">{{\r\n detail.estado\r\n }}</span>\r\n </div>\r\n <ius-button-circle-tertiary\r\n iconName=\"icon-discover-tune\"\r\n ></ius-button-circle-tertiary>\r\n </div>\r\n </div>\r\n <ius-simple-divider></ius-simple-divider>\r\n }\r\n }\r\n </div>\r\n <ius-button-standard-tertiary\r\n class=\"btn-list\"\r\n [iconName]=\"\r\n showMore ? 'icon-keyboard-arrow-up' : 'icon-keyboard-arrow-down'\r\n \"\r\n (buttonClicked)=\"clickShowMore()\"\r\n >\r\n {{ showMore ? \"Mostrar menos\" : \"Mostrar m\u00E1s\" }}\r\n </ius-button-standard-tertiary>\r\n <ius-simple-divider></ius-simple-divider>\r\n <div class=\"ctn-items\">\r\n <ius-menu-item\r\n iconName=\"icon-groups\"\r\n (buttonClicked)=\"onClickUsuariosRoles()\"\r\n >Usuarios y roles</ius-menu-item\r\n >\r\n <ius-menu-item\r\n iconName=\"icon-build\"\r\n (buttonClicked)=\"onClickConfiguracion()\"\r\n >Configuraci\u00F3n de la cuenta</ius-menu-item\r\n >\r\n <ius-menu-item\r\n iconName=\"icon-finance-chip\"\r\n (buttonClicked)=\"onClickPagos()\"\r\n >Pagos y facturaci\u00F3n</ius-menu-item\r\n >\r\n <ius-menu-item\r\n iconName=\"icon-enterprise\"\r\n (buttonClicked)=\"onClickSubsServicios()\"\r\n >Suscripciones y servicios</ius-menu-item\r\n >\r\n <ius-menu-item iconName=\"icon-stream\" (buttonClicked)=\"onClickReferir()\"\r\n >Referir servicio</ius-menu-item\r\n >\r\n </div>\r\n\r\n <ius-simple-divider></ius-simple-divider>\r\n } @else {\r\n <div class=\"container-bottom\">\r\n <span class=\"tx-row-1 tx-rol\">Cambiar a</span>\r\n <div class=\"container-list\">\r\n @for (account of accountList; track account; let i = $index) {\r\n <ius-button-accounts\r\n (accountSelected)=\"onClickAccount(account)\"\r\n (onPressedPredeterminado)=\"\r\n clickAccountPredeterminada.emit(account)\r\n \"\r\n ,\r\n (onPressedEditar)=\"clickEditAccount.emit(account)\"\r\n ,\r\n (onPressedDesvincular)=\"clickDesvincularAccount.emit(account)\"\r\n [account]=\"account\"\r\n [showOptionsFlag]=\"false\"\r\n ></ius-button-accounts>\r\n }\r\n </div>\r\n <ius-button-standard-tertiary [iconName]=\"'icon-add'\" (buttonClicked)=\"addAccount()\">Agregar\r\n nueva cuenta</ius-button-standard-tertiary>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"ctn-items mgt-8\">\r\n <ius-menu-item\r\n iconName=\"{{\r\n !showFormSwitchAccount ? 'icon-cases' : 'icon-arrow-left-alt'\r\n }}\"\r\n (buttonClicked)=\"onClickCambiarCuenta()\"\r\n >{{\r\n !showFormSwitchAccount\r\n ? \"Cambiar de cuenta\"\r\n : \"Volver al menu de usuario\"\r\n }}</ius-menu-item\r\n >\r\n <ius-menu-item\r\n iconName=\"icon-exit-to-app\"\r\n (buttonClicked)=\"onClickCerrarSesion()\"\r\n >Cerrar sesi\u00F3n</ius-menu-item\r\n >\r\n </div>\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-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}.tbl-menu{display:flex;width:390px;height:85vh;padding:16px;flex-direction:column}.body-menu{display:flex;flex:1 0 0;flex-direction:column;padding-right:6px;gap:8px;font-family:Rubik,sans-serif;overflow-y:auto;min-height:0}.colum-mn-1{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.text-head-mn{color:#8c8c8c;font-size:.75rem;line-height:16px;letter-spacing:.24px}.icon-acc-circle{color:#595959}.tx-row-1{display:flex;align-items:center;gap:4px}.tx-abog{color:#333;letter-spacing:.2px}.id-ct{padding:4px;border-radius:4px;border:1px solid #d9d9d9}.tx-id-ct{font-weight:500}.tx-rol{font-size:.875rem;color:#595959;line-height:20px}.tx-name-rl{color:#333;letter-spacing:.28px;font-weight:500}.email-inf{display:flex;padding:8px;align-items:center;gap:4px;color:#595959;font-size:.875rem;line-height:20px;letter-spacing:.28px}.icon-alt-email{color:#7caf25}ius-dropdown-option-item{width:100%}.container-plan{overflow:hidden;max-height:200px;transition:max-height .5s cubic-bezier(.4,0,.2,1);flex-shrink:0}.inf-plan{display:flex;padding:8px;flex-direction:column;align-items:flex-start;gap:8px}.show-more{max-height:10000px;transition:max-height .5s cubic-bezier(.4,0,.2,1)}.tx-small{font-size:.75rem;line-height:16px;letter-spacing:.24px}.tx-base{font-size:.875rem;line-height:20px;letter-spacing:.28px}.row-plan-1{display:flex;gap:12px;width:100%}.col-plan-1{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;flex:1 0 0}.icon-help{color:#8c8c8c}.tx-tipo-plan{color:#595959;font-weight:500}.tx-name-plan{color:#333;font-weight:500}.tx-row-2{display:flex;align-items:center;gap:8px}.tx-contador-1{color:#8c8c8c;font-weight:500}.tx-contador-2{color:#333}.tx-estado-plan{color:#7caf25}.mgt-8{margin-top:8px}.progress-container{width:100%;border-radius:100px;height:23px;overflow:hidden;background:#f0f0f0}.progress-bar{display:flex;height:100%}.segment{height:100%}.tipo-1-color-bar{background:#5892ff}.tipo-1-color{color:#5892ff}.tipo-2-color-bar{background:#103ab7}.tipo-2-color{color:#103ab7}.legend{display:flex;width:100%;align-items:center;gap:8px;flex-wrap:wrap}.legend .icon-storage-set{color:#103ab7}.legend .icon-storage-plus{color:#629219}.item-counter{display:flex;align-items:center;gap:4px;color:#333}.tx-name-serv{color:#595959;font-weight:500}.btn-list{margin-bottom:8px}.ctn-items{display:flex;flex-direction:column;gap:4px}.scrollable{overflow-y:auto;overflow-x:hidden}.scrollable::-webkit-scrollbar{-webkit-appearance:none}.scrollable::-webkit-scrollbar:vertical{width:7px}.scrollable::-webkit-scrollbar-thumb{background-color:#d8d6d6;border-radius:20px}.container-bottom{padding:0 16px;display:flex;flex-direction:column;gap:8px}.container-list{display:flex;flex-direction:column;gap:4px;width:90%}\n"] }]
|
|
4093
|
+
args: [{ selector: 'ius-toolbar-user-menu', standalone: true, imports: [CommonModule, IconSmComponent, IconXsComponent, DropdownOptionItemComponent, SimpleDividerComponent, IconMdComponent, ButtonCircleTertiaryComponent, ButtonStandardTertiaryComponent, MenuItemComponent, ProgressBarComponent, ButtonAccountsComponent], template: "<div class=\"tbl-menu\">\r\n <div class=\"body-menu scrollable\">\r\n <div class=\"colum-mn-1 text-head-mn\">\r\n <span>Est\u00E1s navegando en</span>\r\n <div class=\"tx-row-1\">\r\n <ius-icon-sm iconName=\"icon-account-circle\" class=\"icon-acc-circle\"></ius-icon-sm>\r\n <span class=\"h4 tx-abog\">{{ object.nombreCompany }}</span>\r\n </div>\r\n <div class=\"tx-row-1 id-ct\">\r\n <span>ID Cuenta</span>\r\n <span class=\"tx-id-ct\">{{ object.cuentaID }}</span>\r\n </div>\r\n <div class=\"tx-row-1 tx-rol\">\r\n <span>Tu rol</span>\r\n <span class=\"tx-name-rl\">{{ object.rol }}</span>\r\n </div>\r\n </div>\r\n @if (!showFormSwitchAccount) {\r\n <div class=\"colum-mn-1\">\r\n <div class=\"email-inf\">\r\n <ius-icon-xs iconName=\"icon-alternate-email\" class=\"icon-alt-email\"></ius-icon-xs>\r\n <span>{{ object.correo }}</span>\r\n </div>\r\n <ius-dropdown-option-item (click)=\"onClickPerfilPreferencias()\">Perfil, preferencias y\r\n seguridad</ius-dropdown-option-item>\r\n </div>\r\n <ius-simple-divider></ius-simple-divider>\r\n <div class=\"container-plan\" [ngClass]=\"{ 'show-more': showMore }\">\r\n <div class=\"inf-plan\">\r\n <div class=\"row-plan-1\">\r\n <div class=\"col-plan-1\">\r\n <span class=\"tx-small tx-tipo-plan\">{{\r\n subscripcionDetalle?.tipoServicio\r\n }}</span>\r\n <div class=\"tx-row-1\">\r\n <span class=\"tx-base tx-name-plan\">{{\r\n subscripcionDetalle?.namePlan\r\n }}</span>\r\n <ius-icon-md iconName=\"icon-help\" class=\"icon-help\"></ius-icon-md>\r\n </div>\r\n <div class=\"tx-row-2 tx-small\">\r\n <div class=\"tx-row-1\">\r\n <span class=\"tx-contador-1\">Total global</span>\r\n <span class=\"tx-contador-2\">{{\r\n subscripcionDetalle?.cantTotal\r\n }}</span>\r\n </div>\r\n <div class=\"tx-row-1\">\r\n <span class=\"tx-contador-1\">Disponible global</span>\r\n <span class=\"tx-contador-2\">{{\r\n subscripcionDetalle?.cantDisponible\r\n }}</span>\r\n </div>\r\n </div>\r\n <span class=\"tx-base tx-estado-plan\">{{\r\n subscripcionDetalle?.estado\r\n }}</span>\r\n @if (subscripcionDetalle?.esPlanGratuito) {\r\n <div class=\"tx-row-1 tx-small tx-prueba\">\r\n <ius-icon-xs iconName=\"icon-schedule\"></ius-icon-xs>\r\n <span>Plan de prueba activo</span>\r\n </div>\r\n }\r\n </div>\r\n <ius-button-circle-tertiary iconName=\"icon-discover-tune\"></ius-button-circle-tertiary>\r\n </div>\r\n <div style=\"width: 100%\">\r\n <ius-progress-bar [total]=\"subscripcionDetalle?.cantTotal ?? 0\" [titleV1]=\"'Judicial'\"\r\n [v1]=\"subscripcionDetalle?.cantJudicial ?? 0\" [titleV2]=\"'SuperSociedades'\"\r\n [v2]=\"subscripcionDetalle?.cantProcesos2 ?? 0\" [titleV3]=\"'Procuraduria'\"\r\n [v3]=\"subscripcionDetalle?.cantProcesos3 ?? 0\">\r\n </ius-progress-bar>\r\n </div>\r\n <div class=\"legend\">\r\n <div class=\"item-counter tx-small\">\r\n <ius-icon-xs iconName=\"icon-storage-set\" class=\"icon-storage-set\"></ius-icon-xs>\r\n <span>{{ subscripcionDetalle?.asignados ?? 0 }}</span>\r\n </div>\r\n <div class=\"item-counter tx-small\">\r\n <ius-icon-xs iconName=\"icon-storage-plus\" class=\"icon-storage-plus\"></ius-icon-xs>\r\n <span>{{\r\n subscripcionDetalle?.cantAsignadaDisponible ?? 0\r\n }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <ius-simple-divider></ius-simple-divider>\r\n @if (detallesConsumo) {\r\n @for (detail of detallesConsumo; track $index) {\r\n <div class=\"inf-plan\">\r\n <div class=\"row-plan-1\">\r\n <div class=\"col-plan-1\">\r\n <span class=\"tx-small tx-tipo-plan\">{{\r\n detail.tipoServicio\r\n }}</span>\r\n <div class=\"tx-row-1\">\r\n <span class=\"tx-base tx-name-plan\">Por consumo</span>\r\n <ius-icon-md iconName=\"icon-help\" class=\"icon-help\"></ius-icon-md>\r\n </div>\r\n <div class=\"tx-row-2 tx-small\">\r\n <div class=\"tx-row-1\">\r\n <span class=\"tx-contador-1\">Consumo este mes</span>\r\n <span class=\"tx-contador-2\">{{\r\n detail.cantConsumida\r\n }}</span>\r\n </div>\r\n </div>\r\n <span class=\"tx-base tx-estado-plan\">{{\r\n detail.estado\r\n }}</span>\r\n </div>\r\n <ius-button-circle-tertiary iconName=\"icon-discover-tune\"></ius-button-circle-tertiary>\r\n </div>\r\n </div>\r\n <ius-simple-divider></ius-simple-divider>\r\n }\r\n }\r\n </div>\r\n @if(hasMultipleServices) {\r\n <ius-button-standard-tertiary class=\"btn-list\" [iconName]=\"\r\n showMore ? 'icon-keyboard-arrow-up' : 'icon-keyboard-arrow-down'\r\n \" (buttonClicked)=\"clickShowMore()\">\r\n {{ showMore ? \"Mostrar menos\" : \"Mostrar m\u00E1s\" }}\r\n </ius-button-standard-tertiary>\r\n }\r\n <ius-simple-divider></ius-simple-divider>\r\n <div class=\"ctn-items\">\r\n <ius-menu-item iconName=\"icon-groups\" (buttonClicked)=\"onClickUsuariosRoles()\">Usuarios y roles</ius-menu-item>\r\n <ius-menu-item iconName=\"icon-build\" (buttonClicked)=\"onClickConfiguracion()\">Configuraci\u00F3n de la\r\n cuenta</ius-menu-item>\r\n <ius-menu-item iconName=\"icon-finance-chip\" (buttonClicked)=\"onClickPagos()\">Pagos y facturaci\u00F3n</ius-menu-item>\r\n <ius-menu-item iconName=\"icon-enterprise\" (buttonClicked)=\"onClickSubsServicios()\">Suscripciones y\r\n servicios</ius-menu-item>\r\n <ius-menu-item iconName=\"icon-stream\" (buttonClicked)=\"onClickReferir()\">Referir servicio</ius-menu-item>\r\n </div>\r\n\r\n <ius-simple-divider></ius-simple-divider>\r\n } @else {\r\n <div class=\"container-bottom\">\r\n <span class=\"tx-row-1 tx-rol\">Cambiar a</span>\r\n <div class=\"container-list\">\r\n @for (account of accountList; track account; let i = $index) {\r\n <ius-button-accounts (accountSelected)=\"onClickAccount(account)\" (onPressedPredeterminado)=\"\r\n clickAccountPredeterminada.emit(account)\r\n \"\r\n ,\r\n (onPressedEditar)=\"clickEditAccount.emit(account)\"\r\n ,\r\n (onPressedDesvincular)=\"clickDesvincularAccount.emit(account)\"\r\n [account]=\"account\"\r\n [showOptionsFlag]=\"false\"\r\n ></ius-button-accounts>\r\n }\r\n </div>\r\n <ius-button-standard-tertiary [iconName]=\"'icon-add'\" (buttonClicked)=\"addAccount()\">Agregar\r\n nueva cuenta</ius-button-standard-tertiary>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"ctn-items mgt-8\">\r\n <ius-menu-item iconName=\"{{\r\n !showFormSwitchAccount ? 'icon-cases' : 'icon-arrow-left-alt'\r\n }}\" (buttonClicked)=\"onClickCambiarCuenta()\">{{\r\n !showFormSwitchAccount\r\n ? \"Cambiar de cuenta\"\r\n : \"Volver al menu de usuario\"\r\n }}</ius-menu-item>\r\n <ius-menu-item iconName=\"icon-exit-to-app\" (buttonClicked)=\"onClickCerrarSesion()\">Cerrar sesi\u00F3n</ius-menu-item>\r\n </div>\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-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}.tbl-menu{display:flex;width:390px;height:85vh;padding:16px;flex-direction:column}.body-menu{display:flex;flex:1 0 0;flex-direction:column;padding-right:6px;gap:8px;font-family:Rubik,sans-serif;overflow-y:auto;min-height:0}.colum-mn-1{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.text-head-mn{color:#8c8c8c;font-size:.75rem;line-height:16px;letter-spacing:.24px}.icon-acc-circle{color:#595959}.tx-row-1{display:flex;align-items:center;gap:4px}.tx-abog{color:#333;letter-spacing:.2px}.id-ct{padding:4px;border-radius:4px;border:1px solid #d9d9d9}.tx-id-ct{font-weight:500}.tx-rol{font-size:.875rem;color:#595959;line-height:20px}.tx-name-rl{color:#333;letter-spacing:.28px;font-weight:500}.email-inf{display:flex;padding:8px;align-items:center;gap:4px;color:#595959;font-size:.875rem;line-height:20px;letter-spacing:.28px}.icon-alt-email{color:#7caf25}ius-dropdown-option-item{width:100%}.container-plan{overflow:hidden;max-height:200px;transition:max-height .5s cubic-bezier(.4,0,.2,1);flex-shrink:0}.inf-plan{display:flex;padding:8px;flex-direction:column;align-items:flex-start;gap:8px}.show-more{max-height:10000px;transition:max-height .5s cubic-bezier(.4,0,.2,1)}.tx-small{font-size:.75rem;line-height:16px;letter-spacing:.24px}.tx-base{font-size:.875rem;line-height:20px;letter-spacing:.28px}.row-plan-1{display:flex;gap:12px;width:100%}.col-plan-1{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;flex:1 0 0}.icon-help{color:#8c8c8c}.tx-tipo-plan{color:#595959;font-weight:500}.tx-name-plan{color:#333;font-weight:500}.tx-row-2{display:flex;align-items:center;gap:8px}.tx-contador-1{color:#8c8c8c;font-weight:500}.tx-contador-2{color:#333}.tx-estado-plan{color:#7caf25}.mgt-8{margin-top:8px}.progress-container{width:100%;border-radius:100px;height:23px;overflow:hidden;background:#f0f0f0}.progress-bar{display:flex;height:100%}.segment{height:100%}.tipo-1-color-bar{background:#5892ff}.tipo-1-color{color:#5892ff}.tipo-2-color-bar{background:#103ab7}.tipo-2-color{color:#103ab7}.legend{display:flex;width:100%;align-items:center;gap:8px;flex-wrap:wrap}.legend .icon-storage-set{color:#103ab7}.legend .icon-storage-plus{color:#629219}.item-counter{display:flex;align-items:center;gap:4px;color:#333}.tx-name-serv{color:#595959;font-weight:500}.btn-list{margin-bottom:8px}.ctn-items{display:flex;flex-direction:column;gap:4px}.scrollable{overflow-y:auto;overflow-x:hidden}.scrollable::-webkit-scrollbar{-webkit-appearance:none}.scrollable::-webkit-scrollbar:vertical{width:7px}.scrollable::-webkit-scrollbar-thumb{background-color:#d8d6d6;border-radius:20px}.container-bottom{padding:0 16px;display:flex;flex-direction:column;gap:8px}.container-list{display:flex;flex-direction:column;gap:4px;width:90%}\n"] }]
|
|
4091
4094
|
}], propDecorators: { object: [{
|
|
4092
4095
|
type: Input,
|
|
4093
4096
|
args: [{ required: true }]
|
|
@@ -6680,6 +6683,7 @@ class CardListDragOnComponent {
|
|
|
6680
6683
|
this.subetapas = 0;
|
|
6681
6684
|
this.fecha = '';
|
|
6682
6685
|
this.imageUrl = '';
|
|
6686
|
+
this.userName = '';
|
|
6683
6687
|
this.isUsed = false;
|
|
6684
6688
|
this.isSelected = false;
|
|
6685
6689
|
this.smallText = '';
|
|
@@ -6713,11 +6717,11 @@ class CardListDragOnComponent {
|
|
|
6713
6717
|
this.onClickCard.emit(this.id);
|
|
6714
6718
|
}
|
|
6715
6719
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardListDragOnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6716
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CardListDragOnComponent, isStandalone: true, selector: "ius-card-list-drag-on", inputs: { etapaID: "etapaID", subetapaID: "subetapaID", anotherID: "anotherID", state: "state", name: "name", subetapas: "subetapas", fecha: "fecha", imageUrl: "imageUrl", isUsed: "isUsed", isSelected: "isSelected", smallText: "smallText" }, outputs: { onClickEdit: "onClickEdit", onClickDelete: "onClickDelete", onClickCard: "onClickCard" }, ngImport: i0, template: "<div class=\"general-container\">\r\n <div class=\"container\" [class.isClicked]=\"isSelected\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\"\r\n (click)=\"clickCard($event)\">\r\n <ius-icon-sm [iconName]=\"'icon-drag-indicator'\"></ius-icon-sm>\r\n <div class=\"data-container\">\r\n <div class=\"content\">\r\n <div class=\"general-data\">\r\n <div class=\"data\">\r\n <div class=\"state\">{{ state }}</div>\r\n <div class=\"name\">{{ name }}</div>\r\n <div class=\"small-text\">{{ smallText }}</div>\r\n </div>\r\n </div>\r\n @if(etapaID){\r\n <div class=\"optional-data\">\r\n <div class=\"title-text-container\">\r\n <p class=\"title\">Subetapas</p>\r\n <p class=\"text\">{{ subetapas }}</p>\r\n </div>\r\n @if (hover) {\r\n <div class=\"buttons\">\r\n <div>\r\n <ius-button-squared-tertiary iconName=\"icon-edit\"\r\n (buttonClicked)=\"clickEdit($event)\"></ius-button-squared-tertiary>\r\n </div>\r\n @if (!isUsed) {\r\n <div>\r\n <ius-button-squared-tertiary iconName=\"icon-delete\"\r\n (buttonClicked)=\"clickDelete($event)\"></ius-button-squared-tertiary>\r\n </div>\r\n }\r\n </div>\r\n }@else{\r\n <div class=\"title-text-container\">\r\n <p class=\"title\">Creado/modificado</p>\r\n <div class=\"image-date\">\r\n @if(fecha){\r\n
|
|
6720
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CardListDragOnComponent, isStandalone: true, selector: "ius-card-list-drag-on", inputs: { etapaID: "etapaID", subetapaID: "subetapaID", anotherID: "anotherID", state: "state", name: "name", subetapas: "subetapas", fecha: "fecha", imageUrl: "imageUrl", userName: "userName", isUsed: "isUsed", isSelected: "isSelected", smallText: "smallText" }, outputs: { onClickEdit: "onClickEdit", onClickDelete: "onClickDelete", onClickCard: "onClickCard" }, ngImport: i0, template: "<div class=\"general-container\">\r\n <div class=\"container\" [class.isClicked]=\"isSelected\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\"\r\n (click)=\"clickCard($event)\">\r\n <ius-icon-sm [iconName]=\"'icon-drag-indicator'\"></ius-icon-sm>\r\n <div class=\"data-container\">\r\n <div class=\"content\">\r\n <div class=\"general-data\">\r\n <div class=\"data\">\r\n <div class=\"state\">{{ state }}</div>\r\n <div class=\"name\">{{ name }}</div>\r\n <div class=\"small-text\">{{ smallText }}</div>\r\n </div>\r\n </div>\r\n @if(etapaID){\r\n <div class=\"optional-data\">\r\n <div class=\"title-text-container\">\r\n <p class=\"title\">Subetapas</p>\r\n <p class=\"text\">{{ subetapas }}</p>\r\n </div>\r\n @if (hover) {\r\n <div class=\"buttons\">\r\n <div>\r\n <ius-button-squared-tertiary iconName=\"icon-edit\"\r\n (buttonClicked)=\"clickEdit($event)\"></ius-button-squared-tertiary>\r\n </div>\r\n @if (!isUsed) {\r\n <div>\r\n <ius-button-squared-tertiary iconName=\"icon-delete\"\r\n (buttonClicked)=\"clickDelete($event)\"></ius-button-squared-tertiary>\r\n </div>\r\n }\r\n </div>\r\n }@else{\r\n <div class=\"title-text-container\">\r\n <p class=\"title\">Creado/modificado</p>\r\n <div class=\"image-date\">\r\n @if(fecha){\r\n <ius-avatar-v2 [imageUrl]=\"imageUrl\" [name]=\"userName\" size=\"sm\"></ius-avatar-v2>\r\n }\r\n <p class=\"text\">{{ fecha }}</p>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n } @if (hover && (subetapaID || anotherID) ) {\r\n <div class=\"buttons\">\r\n <div>\r\n <ius-button-squared-tertiary iconName=\"icon-edit\"\r\n (buttonClicked)=\"clickEdit($event)\"></ius-button-squared-tertiary>\r\n </div>\r\n @if (!isUsed) {\r\n <div>\r\n <ius-button-squared-tertiary iconName=\"icon-delete\"\r\n (buttonClicked)=\"clickDelete($event)\"></ius-button-squared-tertiary>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <ius-icon-md [iconName]=\"'icon-keyboard-arrow-right'\"></ius-icon-md>\r\n </div>\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-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}.general-container{position:relative}p{margin:0}.container{display:flex;padding:8px 12px;min-height:58px;box-sizing:border-box;align-items:center;align-content:center;gap:12px 12px;align-self:stretch;border-radius:8px;border:1px solid #eaeaea;background:#fff;cursor:pointer}.container:hover{border:1px solid #C4DFFF;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.data-container{display:flex;align-items:center;gap:24px;flex:1 0 0;min-width:0}.content{display:flex;align-items:center;align-content:center;gap:8px 8px;flex:1 0 0;align-self:stretch;min-width:0}.general-data{display:flex;align-items:center;gap:8px;flex:1 0 0;min-width:0}.data{display:flex;flex-direction:column;align-items:flex-start;gap:0;flex:1 0 0;min-width:0}.state{color:#595959;font-family:Rubik,sans-serif;font-size:.75rem;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.24px}.name{color:#333;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.optional-data{display:flex;align-items:center;align-content:space-between;gap:24px}.title-text-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:0}.title{color:#8c8c8c;font-family:Rubik,sans-serif;font-size:.75rem;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.24px}.text{color:#595959;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.image-date{display:flex;align-items:center;gap:8px}.buttons{display:flex;justify-content:flex-end;align-items:center;gap:8px}.isClicked{border:1px solid #c4dfff!important;background:#edf6ff!important}.small-text{color:var(--ColorText-colorTextTertiary, #8c8c8c);font-family:Rubik;font-size:var(--Text-Size-FontSize-Small, 12px);font-style:normal;font-weight:400;line-height:var(--Text-Size-FontHeight-Small, 16px);letter-spacing:.24px}\n"], dependencies: [{ kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }, { kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "component", type: ButtonSquaredTertiaryComponent, selector: "ius-button-squared-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }, { kind: "component", type: AvatarV2Component, selector: "ius-avatar-v2", inputs: ["imageUrl", "name", "size", "shape", "showEditButton", "backgroundColor", "fallbackIconName"], outputs: ["editClicked"] }] }); }
|
|
6717
6721
|
}
|
|
6718
6722
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardListDragOnComponent, decorators: [{
|
|
6719
6723
|
type: Component,
|
|
6720
|
-
args: [{ selector: 'ius-card-list-drag-on', standalone: true, imports: [IconSmComponent, IconMdComponent, ButtonSquaredTertiaryComponent,
|
|
6724
|
+
args: [{ selector: 'ius-card-list-drag-on', standalone: true, imports: [IconSmComponent, IconMdComponent, ButtonSquaredTertiaryComponent, AvatarV2Component], template: "<div class=\"general-container\">\r\n <div class=\"container\" [class.isClicked]=\"isSelected\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\"\r\n (click)=\"clickCard($event)\">\r\n <ius-icon-sm [iconName]=\"'icon-drag-indicator'\"></ius-icon-sm>\r\n <div class=\"data-container\">\r\n <div class=\"content\">\r\n <div class=\"general-data\">\r\n <div class=\"data\">\r\n <div class=\"state\">{{ state }}</div>\r\n <div class=\"name\">{{ name }}</div>\r\n <div class=\"small-text\">{{ smallText }}</div>\r\n </div>\r\n </div>\r\n @if(etapaID){\r\n <div class=\"optional-data\">\r\n <div class=\"title-text-container\">\r\n <p class=\"title\">Subetapas</p>\r\n <p class=\"text\">{{ subetapas }}</p>\r\n </div>\r\n @if (hover) {\r\n <div class=\"buttons\">\r\n <div>\r\n <ius-button-squared-tertiary iconName=\"icon-edit\"\r\n (buttonClicked)=\"clickEdit($event)\"></ius-button-squared-tertiary>\r\n </div>\r\n @if (!isUsed) {\r\n <div>\r\n <ius-button-squared-tertiary iconName=\"icon-delete\"\r\n (buttonClicked)=\"clickDelete($event)\"></ius-button-squared-tertiary>\r\n </div>\r\n }\r\n </div>\r\n }@else{\r\n <div class=\"title-text-container\">\r\n <p class=\"title\">Creado/modificado</p>\r\n <div class=\"image-date\">\r\n @if(fecha){\r\n <ius-avatar-v2 [imageUrl]=\"imageUrl\" [name]=\"userName\" size=\"sm\"></ius-avatar-v2>\r\n }\r\n <p class=\"text\">{{ fecha }}</p>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n } @if (hover && (subetapaID || anotherID) ) {\r\n <div class=\"buttons\">\r\n <div>\r\n <ius-button-squared-tertiary iconName=\"icon-edit\"\r\n (buttonClicked)=\"clickEdit($event)\"></ius-button-squared-tertiary>\r\n </div>\r\n @if (!isUsed) {\r\n <div>\r\n <ius-button-squared-tertiary iconName=\"icon-delete\"\r\n (buttonClicked)=\"clickDelete($event)\"></ius-button-squared-tertiary>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <ius-icon-md [iconName]=\"'icon-keyboard-arrow-right'\"></ius-icon-md>\r\n </div>\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-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}.general-container{position:relative}p{margin:0}.container{display:flex;padding:8px 12px;min-height:58px;box-sizing:border-box;align-items:center;align-content:center;gap:12px 12px;align-self:stretch;border-radius:8px;border:1px solid #eaeaea;background:#fff;cursor:pointer}.container:hover{border:1px solid #C4DFFF;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.data-container{display:flex;align-items:center;gap:24px;flex:1 0 0;min-width:0}.content{display:flex;align-items:center;align-content:center;gap:8px 8px;flex:1 0 0;align-self:stretch;min-width:0}.general-data{display:flex;align-items:center;gap:8px;flex:1 0 0;min-width:0}.data{display:flex;flex-direction:column;align-items:flex-start;gap:0;flex:1 0 0;min-width:0}.state{color:#595959;font-family:Rubik,sans-serif;font-size:.75rem;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.24px}.name{color:#333;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.optional-data{display:flex;align-items:center;align-content:space-between;gap:24px}.title-text-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:0}.title{color:#8c8c8c;font-family:Rubik,sans-serif;font-size:.75rem;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.24px}.text{color:#595959;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.image-date{display:flex;align-items:center;gap:8px}.buttons{display:flex;justify-content:flex-end;align-items:center;gap:8px}.isClicked{border:1px solid #c4dfff!important;background:#edf6ff!important}.small-text{color:var(--ColorText-colorTextTertiary, #8c8c8c);font-family:Rubik;font-size:var(--Text-Size-FontSize-Small, 12px);font-style:normal;font-weight:400;line-height:var(--Text-Size-FontHeight-Small, 16px);letter-spacing:.24px}\n"] }]
|
|
6721
6725
|
}], propDecorators: { etapaID: [{
|
|
6722
6726
|
type: Input
|
|
6723
6727
|
}], subetapaID: [{
|
|
@@ -6734,6 +6738,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
6734
6738
|
type: Input
|
|
6735
6739
|
}], imageUrl: [{
|
|
6736
6740
|
type: Input
|
|
6741
|
+
}], userName: [{
|
|
6742
|
+
type: Input
|
|
6737
6743
|
}], isUsed: [{
|
|
6738
6744
|
type: Input
|
|
6739
6745
|
}], isSelected: [{
|