@litigiovirtual/ius-design-components 1.0.240 → 1.0.242

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.
@@ -843,6 +843,16 @@ const ICONS = {
843
843
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
844
844
  <path d="M12.019 13.9755L7.32176 18.6917C7.03909 18.9744 6.70251 19.1126 6.31201 19.1062C5.92134 19.0999 5.58676 18.9554 5.30826 18.6727C5.03826 18.3902 4.90643 18.061 4.91276 17.685C4.91909 17.3092 5.05726 16.9799 5.32726 16.6972L10.0055 12L5.30826 7.25875C5.03826 6.97608 4.90326 6.64683 4.90326 6.271C4.90326 5.895 5.03826 5.56575 5.30826 5.28325C5.58676 5.00058 5.92134 4.85608 6.31201 4.84975C6.70251 4.84342 7.03909 4.98158 7.32176 5.26425L12.019 9.9805L16.6783 5.26425C16.9609 4.98158 17.2975 4.84342 17.688 4.84975C18.0787 4.85608 18.4133 5.00058 18.6918 5.28325C18.9618 5.56575 19.0936 5.895 19.0873 6.271C19.0809 6.64683 18.9428 6.97608 18.6728 7.25875L13.9945 12L18.6728 16.6972C18.9428 16.9672 19.0809 17.2933 19.0873 17.6755C19.0936 18.0578 18.9618 18.3902 18.6918 18.6727C18.4133 18.9554 18.0787 19.0999 17.688 19.1062C17.2975 19.1126 16.9609 18.9744 16.6783 18.6917L12.019 13.9755Z" fill="currentColor"/>
845
845
  </svg>
846
+ `,
847
+ 'icon-link': `
848
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
849
+ <path d="M11.0805 17.7575H6.87402C5.27852 17.7575 3.92002 17.1965 2.79852 16.0745C1.67702 14.9523 1.11627 13.5931 1.11627 11.9967C1.11627 10.4004 1.67702 9.04225 2.79852 7.92225C3.92002 6.80242 5.27852 6.2425 6.87402 6.2425H11.0805V9.07175H6.87652C6.05836 9.07175 5.36536 9.35642 4.79752 9.92575C4.22969 10.4953 3.94577 11.1867 3.94577 12C3.94577 12.8133 4.22969 13.5048 4.79752 14.0743C5.36536 14.6436 6.05836 14.9283 6.87652 14.9283H11.0805V17.7575ZM7.47827 13.306V10.656H16.5218V13.306H7.47827ZM12.9195 17.7575V14.9283H17.1235C17.9417 14.9283 18.6347 14.6436 19.2025 14.0743C19.7704 13.5048 20.0543 12.8133 20.0543 12C20.0543 11.1867 19.7704 10.4953 19.2025 9.92575C18.6347 9.35642 17.9417 9.07175 17.1235 9.07175H12.9195V6.2425H17.126C18.7215 6.2425 20.08 6.8035 21.2015 7.9255C22.323 9.04767 22.8838 10.4069 22.8838 12.0033C22.8838 13.5996 22.323 14.9578 21.2015 16.0778C20.08 17.1976 18.7215 17.7575 17.126 17.7575H12.9195Z" fill="currentColor"/>
850
+ </svg>
851
+ `,
852
+ 'icon-link-2': `
853
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
854
+ <path d="M7.91425 21.2033C6.49975 21.2033 5.29317 20.704 4.2945 19.7055C3.296 18.7068 2.79675 17.5003 2.79675 16.0858C2.79675 15.3993 2.92575 14.745 3.18375 14.123C3.44175 13.5012 3.812 12.9489 4.2945 12.4663L7.6805 9.1055L9.27175 10.6968L5.88575 14.0768C5.61442 14.3481 5.40992 14.6579 5.27225 15.0063C5.13459 15.3546 5.06575 15.7144 5.06575 16.0858C5.06575 16.8746 5.34325 17.5466 5.89825 18.1018C6.45342 18.6568 7.12542 18.9343 7.91425 18.9343C8.28559 18.9343 8.64859 18.8644 9.00325 18.7248C9.35792 18.5851 9.671 18.3796 9.9425 18.1083L13.3033 14.7283L14.9195 16.3445L11.5338 19.7055C11.0511 20.188 10.4988 20.5583 9.877 20.8163C9.255 21.0743 8.60075 21.2033 7.91425 21.2033ZM9.907 15.7093L8.29075 14.093L14.099 8.29075L15.7093 9.907L9.907 15.7093ZM16.3255 14.9135L14.7283 13.3033L18.1143 9.9425C18.3856 9.671 18.5859 9.36725 18.7153 9.03125C18.8446 8.69525 18.9093 8.3415 18.9093 7.97C18.9093 7.16467 18.6349 6.48025 18.0863 5.91675C17.5374 5.35342 16.8623 5.07175 16.0608 5.07175C15.6894 5.07175 15.3306 5.14059 14.9843 5.27825C14.6379 5.41592 14.329 5.62042 14.0575 5.89175L10.6968 9.27175L9.0865 7.6805L12.4663 4.3005C12.9489 3.818 13.5012 3.44675 14.123 3.18675C14.745 2.92675 15.3993 2.79675 16.0858 2.79675C17.5003 2.79675 18.7037 3.297 19.696 4.2975C20.6882 5.298 21.1843 6.51192 21.1843 7.93925C21.1843 8.61309 21.0584 9.26 20.8068 9.88C20.5551 10.4998 20.188 11.0511 19.7055 11.5338L16.3255 14.9135Z" fill="currentColor"/>
855
+ </svg>
846
856
  `,
847
857
  'icon-folder-shared': `
848
858
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
@@ -7010,10 +7020,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
7010
7020
 
7011
7021
  registerLocaleData(localeEs);
7012
7022
  class CardActividadEventoComponent {
7013
- constructor() {
7023
+ constructor(datePipe) {
7024
+ this.datePipe = datePipe;
7014
7025
  this.read = true;
7015
7026
  this.warning = false;
7016
7027
  this.collapse = true;
7028
+ this.done = false;
7017
7029
  this.onClickButtonCopy = new EventEmitter();
7018
7030
  this.onClickButtonRead = new EventEmitter();
7019
7031
  this.onClickButtonEdit = new EventEmitter();
@@ -7021,11 +7033,78 @@ class CardActividadEventoComponent {
7021
7033
  this.onClickButtonDone = new EventEmitter();
7022
7034
  }
7023
7035
  toggleCollapse() {
7036
+ const wasCollapsed = this.collapse;
7024
7037
  this.collapse = !this.collapse;
7038
+ if (wasCollapsed && !this.read) {
7039
+ this.onClickButtonRead.emit(new Event('autoExpand'));
7040
+ }
7025
7041
  }
7026
- clickButtonCopy(event) {
7042
+ get headerFechaLabel() {
7043
+ return this.estado === 'FINALIZADA' ? 'Realizada el' : 'Programada para el';
7044
+ }
7045
+ get estadoLabel() {
7046
+ if (this.estado === 'FINALIZADA')
7047
+ return 'Finalizada';
7048
+ if (this.warning)
7049
+ return 'Sin reporte de asistencia';
7050
+ return 'Programada';
7051
+ }
7052
+ get estadoLabelClass() {
7053
+ if (this.estado === 'FINALIZADA')
7054
+ return 'txt-ter';
7055
+ if (this.warning)
7056
+ return 'tx-warn';
7057
+ return 'tx-read';
7058
+ }
7059
+ async clickButtonCopy(event) {
7027
7060
  event.stopImmediatePropagation();
7028
- this.onClickButtonCopy.emit(event);
7061
+ try {
7062
+ await navigator.clipboard.writeText(this.getCardSummary());
7063
+ this.onClickButtonCopy.emit(event);
7064
+ }
7065
+ catch {
7066
+ // clipboard write failed; no emit
7067
+ }
7068
+ }
7069
+ getCardSummary() {
7070
+ const lines = [];
7071
+ lines.push('Actividades y eventos');
7072
+ if (this.titulo)
7073
+ lines.push(`Título: ${this.titulo}`);
7074
+ if (this.usuarioAsignado)
7075
+ lines.push(`Asignado a: ${this.usuarioAsignado}`);
7076
+ if (this.fechaProgramacion)
7077
+ lines.push(`${this.headerFechaLabel}: ${this.formatDateTime(this.fechaProgramacion)}`);
7078
+ if (this.text1)
7079
+ lines.push(this.text1);
7080
+ lines.push(`Estado: ${this.estadoLabel}`);
7081
+ if (this.fechaInicio || this.fechaFin) {
7082
+ const partes = [];
7083
+ if (this.fechaInicio)
7084
+ partes.push(this.formatDateTime(this.fechaInicio));
7085
+ if (this.fechaFin)
7086
+ partes.push(this.formatDateTime(this.fechaFin));
7087
+ lines.push(`Rango: ${partes.join(' - ')}`);
7088
+ }
7089
+ if (this.descripcion) {
7090
+ lines.push('');
7091
+ lines.push('Descripción:');
7092
+ lines.push(this.descripcion);
7093
+ }
7094
+ if (this.link) {
7095
+ lines.push('');
7096
+ lines.push(`Link: ${this.link}`);
7097
+ }
7098
+ return lines.join('\n');
7099
+ }
7100
+ openLink(event) {
7101
+ event.stopImmediatePropagation();
7102
+ if (this.link) {
7103
+ window.open(this.link, '_blank', 'noopener,noreferrer');
7104
+ }
7105
+ }
7106
+ formatDateTime(d) {
7107
+ return this.datePipe.transform(d, 'dd MMM yyyy h:mm a') ?? '';
7029
7108
  }
7030
7109
  clickButtonRead(event) {
7031
7110
  event.stopImmediatePropagation();
@@ -7043,22 +7122,26 @@ class CardActividadEventoComponent {
7043
7122
  event.stopImmediatePropagation();
7044
7123
  this.onClickButtonDone.emit(event);
7045
7124
  }
7046
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardActividadEventoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7047
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CardActividadEventoComponent, isStandalone: true, selector: "ius-card-actividad-evento", inputs: { read: "read", warning: "warning", collapse: "collapse", titulo: "titulo", usuarioAsignado: "usuarioAsignado", fechaProgramacion: "fechaProgramacion", fechaPrincipal: "fechaPrincipal", text1: "text1", estado: "estado", fechaInicio: "fechaInicio", fechaFin: "fechaFin", descripcion: "descripcion" }, outputs: { onClickButtonCopy: "onClickButtonCopy", onClickButtonRead: "onClickButtonRead", onClickButtonEdit: "onClickButtonEdit", onClickButtonDelete: "onClickButtonDelete", onClickButtonDone: "onClickButtonDone" }, providers: [
7048
- { provide: LOCALE_ID, useValue: 'es' }
7049
- ], ngImport: i0, template: "<div class=\"ctn-gnrl\" (click)=\"toggleCollapse()\">\r\n <div class=\"ctn-card\">\r\n <div class=\"ctn-inf\">\r\n <ius-icon-sm iconName=\"icon-calendar-clock\" class=\"priority-tx\"\r\n [ngClass]=\"{'icon-calendar-clock': read }\"></ius-icon-sm>\r\n <div class=\"info\">\r\n <span class=\"caption-sm txt-ter\">Actividades y eventos</span>\r\n <span class=\"label-base txt-pry\" [ngClass]=\"{'body-base-1': read}\">{{titulo}}</span>\r\n <div class=\"tx-asig\">\r\n <div class=\"row-text-2\">\r\n <span class=\"caption-sm txt-ter\">Asignado a</span>\r\n <span class=\"body-base-1 txt-sec\">{{usuarioAsignado}}</span>\r\n </div>\r\n <div class=\"row-text-2\">\r\n <span class=\"caption-sm txt-ter\">Programada para el</span>\r\n <span class=\"body-base-1 txt-sec\">{{fechaProgramacion | date: 'dd MMM yyyy h:mm a'}}</span>\r\n </div>\r\n </div>\r\n <span class=\"body-base-1 txt-sec\">{{text1}}</span>\r\n </div>\r\n </div>\r\n <div class=\"ctn-icons\">\r\n <div class=\"row-text-2\">\r\n @if (warning && !read) {\r\n <div class=\"icon-dot-warning\"></div>\r\n <ius-icon-xs iconName=\"icon-emergency-home\" class=\"icon-emergency-home\"></ius-icon-xs>\r\n }@else if(!warning && !read){\r\n <div class=\"icon-dot\"></div>\r\n }\r\n <span class=\"body-sm txt-ter fecha\">{{fechaPrincipal | date: 'd MMM y'}}</span>\r\n <span class=\"buttons-hove\">\r\n <ius-button-circle-tertiary iconName=\"icon-mark-chat-read\"\r\n (click)=\"clickButtonRead($event)\"></ius-button-circle-tertiary>\r\n <ius-button-circle-tertiary iconName=\"icon-content-copy\"\r\n (click)=\"clickButtonCopy($event)\"></ius-button-circle-tertiary>\r\n <ius-button-circle-tertiary iconName=\"icon-done-outline\" [disabled]=\"read\"\r\n (click)=\"clickButtonDone($event)\"></ius-button-circle-tertiary>\r\n <ius-button-circle-tertiary iconName=\"icon-edit\"\r\n (click)=\"clickButtonEdit($event)\"></ius-button-circle-tertiary>\r\n <ius-button-circle-tertiary iconName=\"icon-delete\"\r\n (click)=\"clickButtonDelete($event)\"></ius-button-circle-tertiary>\r\n </span>\r\n </div>\r\n <ius-icon-sm [iconName]=\"collapse ? 'icon-keyboard-arrow-down' : 'icon-keyboard-arrow-up'\"\r\n class=\"txt-pry\"></ius-icon-sm>\r\n </div>\r\n </div>\r\n <div class=\"ctn-collapse-card\" [ngClass]=\"{'collapsed': collapse}\">\r\n <ius-simple-divider></ius-simple-divider>\r\n <div class=\"ctn-clp\">\r\n <div class=\"ctn-info-clp\">\r\n <div class=\"text-info\">\r\n @if (warning && !read) {\r\n <span class=\"label-base tx-warn\">{{estado}}</span>\r\n }@else if(!warning && !read){\r\n <span class=\"label-base tx-read\">{{estado}}</span>\r\n } @else {\r\n <span class=\"label-base txt-ter\">{{estado}}</span>\r\n }\r\n <div class=\"row-text-1 body-sm txt-ter\">\r\n <span>{{fechaInicio | date: 'dd MMM yyyy'}}</span>\r\n @if (fechaFin) {\r\n <span>-</span>\r\n <span>{{fechaFin | date: 'dd MMM yyyy'}}</span>\r\n }\r\n </div>\r\n <span class=\"body-base-1 txt-pry\">{{descripcion}}</span>\r\n </div>\r\n </div>\r\n </div>\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}.ctn-gnrl{position:relative;display:flex;flex-direction:column;cursor:pointer;padding:8px 12px;box-sizing:border-box;border-radius:4px;border:1px solid #eaeaea}.ctn-gnrl:hover{border:1px solid #C4DFFF;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ctn-gnrl:hover .fecha{display:none;pointer-events:none}.ctn-gnrl:hover .buttons-hove{display:flex;pointer-events:auto}.ctn-card{position:relative;display:flex;align-items:center;gap:24px}.ctn-inf{display:flex;flex:1 0 0;align-items:center;gap:16px}.icon-calendar-clock{color:#8c8c8c!important}.priority-tx{color:#184fdb}.tx-asig{display:flex;gap:24px}.info{display:flex;flex:1 0 0;flex-direction:column;align-items:flex-start}.ctn-icons{display:flex;align-items:center;gap:16px}.icon-dot{display:flex;align-items:center;width:8px;height:8px;aspect-ratio:1/1;background-color:#2167ff;border-radius:100px}.icon-dot-warning{display:flex;align-items:center;width:8px;height:8px;aspect-ratio:1/1;background-color:#ffae00;border-radius:100px}.icon-emergency-home{color:#ffae00}.fecha{width:76px}.buttons-hove{display:none;pointer-events:none;gap:4px}.ctn-collapse-card{max-height:1000px;overflow:hidden;transition:max-height .3s ease-in-out}.ctn-collapse-card.collapsed{max-height:0px}.ctn-clp{display:flex;gap:8px}.ctn-info-clp{display:flex;padding:4px 8px;flex-direction:column;gap:12px;flex:1 0 0}.text-info{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}.tx-read{color:#629219}.tx-warn{color:#db8e00}ius-simple-divider{margin:8px 0}.row-text-1{display:flex;align-items:center;gap:8px}.row-text-2{display:flex;align-items:center;gap:4px}.txt-pry{color:#333}.txt-sec{color:#595959}.txt-ter{color:#8c8c8c}\n"], dependencies: [{ kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonCircleTertiaryComponent, selector: "ius-button-circle-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }, { kind: "component", type: SimpleDividerComponent, selector: "ius-simple-divider" }, { kind: "component", type: IconXsComponent, selector: "ius-icon-xs", inputs: ["iconName", "color"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
7125
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardActividadEventoComponent, deps: [{ token: i1$1.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
7126
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CardActividadEventoComponent, isStandalone: true, selector: "ius-card-actividad-evento", inputs: { read: "read", warning: "warning", collapse: "collapse", done: "done", titulo: "titulo", usuarioAsignado: "usuarioAsignado", fechaProgramacion: "fechaProgramacion", fechaPrincipal: "fechaPrincipal", text1: "text1", estado: "estado", fechaInicio: "fechaInicio", fechaFin: "fechaFin", descripcion: "descripcion", link: "link" }, outputs: { onClickButtonCopy: "onClickButtonCopy", onClickButtonRead: "onClickButtonRead", onClickButtonEdit: "onClickButtonEdit", onClickButtonDelete: "onClickButtonDelete", onClickButtonDone: "onClickButtonDone" }, providers: [
7127
+ { provide: LOCALE_ID, useValue: 'es' },
7128
+ DatePipe
7129
+ ], ngImport: i0, template: "<div class=\"ctn-gnrl\" (click)=\"toggleCollapse()\">\n <div class=\"ctn-card\">\n <div class=\"ctn-inf\">\n <ius-icon-sm iconName=\"icon-calendar-clock\" class=\"priority-tx\"\n [ngClass]=\"{'icon-calendar-clock': estado === 'FINALIZADA' }\"></ius-icon-sm>\n <div class=\"info\">\n <span class=\"caption-sm txt-ter\">Actividades y eventos</span>\n <span class=\"label-base txt-pry\" [ngClass]=\"{'body-base-1': read}\">{{titulo}}</span>\n <div class=\"tx-asig\">\n <div class=\"row-text-2\">\n <span class=\"caption-sm txt-ter\">Asignado a</span>\n <span class=\"body-base-1 txt-sec\">{{usuarioAsignado}}</span>\n </div>\n <div class=\"row-text-2\">\n <span class=\"caption-sm txt-ter\">{{ headerFechaLabel }}</span>\n <span class=\"body-base-1 txt-sec\">{{fechaProgramacion | date: 'dd MMM yyyy h:mm a'}}</span>\n </div>\n </div>\n <span class=\"body-base-1 txt-sec\">{{text1}}</span>\n </div>\n </div>\n <div class=\"ctn-icons\">\n <div class=\"row-text-2\">\n @if (!read) {\n <div class=\"icon-dot\"></div>\n }\n @if (warning && estado !== 'FINALIZADA') {\n <ius-icon-xs iconName=\"icon-emergency-home\" class=\"icon-emergency-home\"></ius-icon-xs>\n }\n <span class=\"body-sm txt-ter fecha\">{{fechaPrincipal | date: 'd MMM y'}}</span>\n <span class=\"buttons-hove\">\n <ius-button-circle-tertiary iconName=\"icon-mark-chat-read\"\n [iusPopoverContent]=\"read ? 'Marcar como no le\u00EDdo' : 'Marcar como le\u00EDdo'\"\n (buttonClicked)=\"clickButtonRead($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-content-copy\"\n iusPopoverContent=\"Copiar informaci\u00F3n\"\n (buttonClicked)=\"clickButtonCopy($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-done-outline\"\n [iusPopoverContent]=\"done ? 'Marcar como abierta' : 'Marcar como hecha'\"\n (buttonClicked)=\"clickButtonDone($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-edit\"\n iusPopoverContent=\"Editar\"\n (buttonClicked)=\"clickButtonEdit($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-delete\"\n iusPopoverContent=\"Eliminar\"\n (buttonClicked)=\"clickButtonDelete($event)\"></ius-button-circle-tertiary>\n </span>\n </div>\n <ius-icon-sm [iconName]=\"collapse ? 'icon-keyboard-arrow-down' : 'icon-keyboard-arrow-up'\"\n class=\"txt-pry\"></ius-icon-sm>\n </div>\n </div>\n <div class=\"ctn-collapse-card\" [ngClass]=\"{'collapsed': collapse}\">\n <ius-simple-divider></ius-simple-divider>\n <div class=\"ctn-clp\">\n <div class=\"ctn-info-clp\">\n <div class=\"text-info\">\n <span class=\"label-base\" [ngClass]=\"estadoLabelClass\">{{ estadoLabel }}</span>\n <div class=\"row-text-1 body-sm txt-ter\">\n <span>{{fechaInicio | date: 'dd MMM yyyy h:mm a'}}</span>\n @if (fechaFin) {\n <span>-</span>\n <span>{{fechaFin | date: 'dd MMM yyyy h:mm a'}}</span>\n }\n </div>\n <span class=\"body-base-1 txt-pry\">{{descripcion}}</span>\n @if (link) {\n <a class=\"body-sm link-actividad\" (click)=\"openLink($event)\">\n <ius-icon-xs iconName=\"icon-link-2\"></ius-icon-xs>\n <span>{{ link }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.ctn-gnrl{position:relative;display:flex;flex-direction:column;cursor:pointer;padding:8px 12px;box-sizing:border-box;border-radius:4px;border:1px solid #eaeaea}.ctn-gnrl:hover{border:1px solid #C4DFFF;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ctn-gnrl:hover .fecha{display:none;pointer-events:none}.ctn-gnrl:hover .buttons-hove{display:flex;pointer-events:auto}.ctn-card{position:relative;display:flex;align-items:center;gap:24px}.ctn-inf{display:flex;flex:1 0 0;align-items:center;gap:16px}.icon-calendar-clock{color:#8c8c8c!important}.priority-tx{color:#184fdb}.tx-asig{display:flex;gap:24px}.info{display:flex;flex:1 0 0;flex-direction:column;align-items:flex-start}.ctn-icons{display:flex;align-items:center;gap:16px}.icon-dot{display:flex;align-items:center;width:8px;height:8px;aspect-ratio:1/1;background-color:#2167ff;border-radius:100px}.icon-dot-warning{display:flex;align-items:center;width:8px;height:8px;aspect-ratio:1/1;background-color:#ffae00;border-radius:100px}.icon-emergency-home{color:#ffae00}.fecha{width:76px}.buttons-hove{display:none;pointer-events:none;gap:4px}.ctn-collapse-card{max-height:1000px;overflow:hidden;transition:max-height .3s ease-in-out}.ctn-collapse-card.collapsed{max-height:0px}.ctn-clp{display:flex;gap:8px}.ctn-info-clp{display:flex;padding:4px 8px;flex-direction:column;gap:12px;flex:1 0 0}.text-info{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}.tx-read{color:#629219}.tx-warn{color:#db8e00}ius-simple-divider{margin:8px 0}.row-text-1{display:flex;align-items:center;gap:8px}.row-text-2{display:flex;align-items:center;gap:4px}.txt-pry{color:#333}.txt-sec{color:#595959}.txt-ter{color:#8c8c8c}.link-actividad{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:4px 8px;border-radius:4px;color:#595959;cursor:pointer;text-decoration:none;word-break:break-all}.link-actividad:hover{background-color:#edf6ff;text-decoration:underline}\n"], dependencies: [{ kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonCircleTertiaryComponent, selector: "ius-button-circle-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }, { kind: "component", type: SimpleDividerComponent, selector: "ius-simple-divider" }, { kind: "component", type: IconXsComponent, selector: "ius-icon-xs", inputs: ["iconName", "color"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: PopoverDirective, selector: "[iusPopover], [iusPopoverTitle], [iusPopoverContent]", inputs: ["iusPopover", "iusPopoverTitle", "iusPopoverContent", "iusPopoverPosition", "iusPopoverOpenDelay", "iusPopoverCloseDelay"] }] }); }
7050
7130
  }
7051
7131
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardActividadEventoComponent, decorators: [{
7052
7132
  type: Component,
7053
- args: [{ selector: 'ius-card-actividad-evento', standalone: true, imports: [IconSmComponent, NgClass, ButtonCircleTertiaryComponent, SimpleDividerComponent, IconXsComponent, DatePipe], providers: [
7054
- { provide: LOCALE_ID, useValue: 'es' }
7055
- ], template: "<div class=\"ctn-gnrl\" (click)=\"toggleCollapse()\">\r\n <div class=\"ctn-card\">\r\n <div class=\"ctn-inf\">\r\n <ius-icon-sm iconName=\"icon-calendar-clock\" class=\"priority-tx\"\r\n [ngClass]=\"{'icon-calendar-clock': read }\"></ius-icon-sm>\r\n <div class=\"info\">\r\n <span class=\"caption-sm txt-ter\">Actividades y eventos</span>\r\n <span class=\"label-base txt-pry\" [ngClass]=\"{'body-base-1': read}\">{{titulo}}</span>\r\n <div class=\"tx-asig\">\r\n <div class=\"row-text-2\">\r\n <span class=\"caption-sm txt-ter\">Asignado a</span>\r\n <span class=\"body-base-1 txt-sec\">{{usuarioAsignado}}</span>\r\n </div>\r\n <div class=\"row-text-2\">\r\n <span class=\"caption-sm txt-ter\">Programada para el</span>\r\n <span class=\"body-base-1 txt-sec\">{{fechaProgramacion | date: 'dd MMM yyyy h:mm a'}}</span>\r\n </div>\r\n </div>\r\n <span class=\"body-base-1 txt-sec\">{{text1}}</span>\r\n </div>\r\n </div>\r\n <div class=\"ctn-icons\">\r\n <div class=\"row-text-2\">\r\n @if (warning && !read) {\r\n <div class=\"icon-dot-warning\"></div>\r\n <ius-icon-xs iconName=\"icon-emergency-home\" class=\"icon-emergency-home\"></ius-icon-xs>\r\n }@else if(!warning && !read){\r\n <div class=\"icon-dot\"></div>\r\n }\r\n <span class=\"body-sm txt-ter fecha\">{{fechaPrincipal | date: 'd MMM y'}}</span>\r\n <span class=\"buttons-hove\">\r\n <ius-button-circle-tertiary iconName=\"icon-mark-chat-read\"\r\n (click)=\"clickButtonRead($event)\"></ius-button-circle-tertiary>\r\n <ius-button-circle-tertiary iconName=\"icon-content-copy\"\r\n (click)=\"clickButtonCopy($event)\"></ius-button-circle-tertiary>\r\n <ius-button-circle-tertiary iconName=\"icon-done-outline\" [disabled]=\"read\"\r\n (click)=\"clickButtonDone($event)\"></ius-button-circle-tertiary>\r\n <ius-button-circle-tertiary iconName=\"icon-edit\"\r\n (click)=\"clickButtonEdit($event)\"></ius-button-circle-tertiary>\r\n <ius-button-circle-tertiary iconName=\"icon-delete\"\r\n (click)=\"clickButtonDelete($event)\"></ius-button-circle-tertiary>\r\n </span>\r\n </div>\r\n <ius-icon-sm [iconName]=\"collapse ? 'icon-keyboard-arrow-down' : 'icon-keyboard-arrow-up'\"\r\n class=\"txt-pry\"></ius-icon-sm>\r\n </div>\r\n </div>\r\n <div class=\"ctn-collapse-card\" [ngClass]=\"{'collapsed': collapse}\">\r\n <ius-simple-divider></ius-simple-divider>\r\n <div class=\"ctn-clp\">\r\n <div class=\"ctn-info-clp\">\r\n <div class=\"text-info\">\r\n @if (warning && !read) {\r\n <span class=\"label-base tx-warn\">{{estado}}</span>\r\n }@else if(!warning && !read){\r\n <span class=\"label-base tx-read\">{{estado}}</span>\r\n } @else {\r\n <span class=\"label-base txt-ter\">{{estado}}</span>\r\n }\r\n <div class=\"row-text-1 body-sm txt-ter\">\r\n <span>{{fechaInicio | date: 'dd MMM yyyy'}}</span>\r\n @if (fechaFin) {\r\n <span>-</span>\r\n <span>{{fechaFin | date: 'dd MMM yyyy'}}</span>\r\n }\r\n </div>\r\n <span class=\"body-base-1 txt-pry\">{{descripcion}}</span>\r\n </div>\r\n </div>\r\n </div>\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}.ctn-gnrl{position:relative;display:flex;flex-direction:column;cursor:pointer;padding:8px 12px;box-sizing:border-box;border-radius:4px;border:1px solid #eaeaea}.ctn-gnrl:hover{border:1px solid #C4DFFF;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ctn-gnrl:hover .fecha{display:none;pointer-events:none}.ctn-gnrl:hover .buttons-hove{display:flex;pointer-events:auto}.ctn-card{position:relative;display:flex;align-items:center;gap:24px}.ctn-inf{display:flex;flex:1 0 0;align-items:center;gap:16px}.icon-calendar-clock{color:#8c8c8c!important}.priority-tx{color:#184fdb}.tx-asig{display:flex;gap:24px}.info{display:flex;flex:1 0 0;flex-direction:column;align-items:flex-start}.ctn-icons{display:flex;align-items:center;gap:16px}.icon-dot{display:flex;align-items:center;width:8px;height:8px;aspect-ratio:1/1;background-color:#2167ff;border-radius:100px}.icon-dot-warning{display:flex;align-items:center;width:8px;height:8px;aspect-ratio:1/1;background-color:#ffae00;border-radius:100px}.icon-emergency-home{color:#ffae00}.fecha{width:76px}.buttons-hove{display:none;pointer-events:none;gap:4px}.ctn-collapse-card{max-height:1000px;overflow:hidden;transition:max-height .3s ease-in-out}.ctn-collapse-card.collapsed{max-height:0px}.ctn-clp{display:flex;gap:8px}.ctn-info-clp{display:flex;padding:4px 8px;flex-direction:column;gap:12px;flex:1 0 0}.text-info{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}.tx-read{color:#629219}.tx-warn{color:#db8e00}ius-simple-divider{margin:8px 0}.row-text-1{display:flex;align-items:center;gap:8px}.row-text-2{display:flex;align-items:center;gap:4px}.txt-pry{color:#333}.txt-sec{color:#595959}.txt-ter{color:#8c8c8c}\n"] }]
7056
- }], propDecorators: { read: [{
7133
+ args: [{ selector: 'ius-card-actividad-evento', standalone: true, imports: [IconSmComponent, NgClass, ButtonCircleTertiaryComponent, SimpleDividerComponent, IconXsComponent, DatePipe, PopoverDirective], providers: [
7134
+ { provide: LOCALE_ID, useValue: 'es' },
7135
+ DatePipe
7136
+ ], template: "<div class=\"ctn-gnrl\" (click)=\"toggleCollapse()\">\n <div class=\"ctn-card\">\n <div class=\"ctn-inf\">\n <ius-icon-sm iconName=\"icon-calendar-clock\" class=\"priority-tx\"\n [ngClass]=\"{'icon-calendar-clock': estado === 'FINALIZADA' }\"></ius-icon-sm>\n <div class=\"info\">\n <span class=\"caption-sm txt-ter\">Actividades y eventos</span>\n <span class=\"label-base txt-pry\" [ngClass]=\"{'body-base-1': read}\">{{titulo}}</span>\n <div class=\"tx-asig\">\n <div class=\"row-text-2\">\n <span class=\"caption-sm txt-ter\">Asignado a</span>\n <span class=\"body-base-1 txt-sec\">{{usuarioAsignado}}</span>\n </div>\n <div class=\"row-text-2\">\n <span class=\"caption-sm txt-ter\">{{ headerFechaLabel }}</span>\n <span class=\"body-base-1 txt-sec\">{{fechaProgramacion | date: 'dd MMM yyyy h:mm a'}}</span>\n </div>\n </div>\n <span class=\"body-base-1 txt-sec\">{{text1}}</span>\n </div>\n </div>\n <div class=\"ctn-icons\">\n <div class=\"row-text-2\">\n @if (!read) {\n <div class=\"icon-dot\"></div>\n }\n @if (warning && estado !== 'FINALIZADA') {\n <ius-icon-xs iconName=\"icon-emergency-home\" class=\"icon-emergency-home\"></ius-icon-xs>\n }\n <span class=\"body-sm txt-ter fecha\">{{fechaPrincipal | date: 'd MMM y'}}</span>\n <span class=\"buttons-hove\">\n <ius-button-circle-tertiary iconName=\"icon-mark-chat-read\"\n [iusPopoverContent]=\"read ? 'Marcar como no le\u00EDdo' : 'Marcar como le\u00EDdo'\"\n (buttonClicked)=\"clickButtonRead($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-content-copy\"\n iusPopoverContent=\"Copiar informaci\u00F3n\"\n (buttonClicked)=\"clickButtonCopy($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-done-outline\"\n [iusPopoverContent]=\"done ? 'Marcar como abierta' : 'Marcar como hecha'\"\n (buttonClicked)=\"clickButtonDone($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-edit\"\n iusPopoverContent=\"Editar\"\n (buttonClicked)=\"clickButtonEdit($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-delete\"\n iusPopoverContent=\"Eliminar\"\n (buttonClicked)=\"clickButtonDelete($event)\"></ius-button-circle-tertiary>\n </span>\n </div>\n <ius-icon-sm [iconName]=\"collapse ? 'icon-keyboard-arrow-down' : 'icon-keyboard-arrow-up'\"\n class=\"txt-pry\"></ius-icon-sm>\n </div>\n </div>\n <div class=\"ctn-collapse-card\" [ngClass]=\"{'collapsed': collapse}\">\n <ius-simple-divider></ius-simple-divider>\n <div class=\"ctn-clp\">\n <div class=\"ctn-info-clp\">\n <div class=\"text-info\">\n <span class=\"label-base\" [ngClass]=\"estadoLabelClass\">{{ estadoLabel }}</span>\n <div class=\"row-text-1 body-sm txt-ter\">\n <span>{{fechaInicio | date: 'dd MMM yyyy h:mm a'}}</span>\n @if (fechaFin) {\n <span>-</span>\n <span>{{fechaFin | date: 'dd MMM yyyy h:mm a'}}</span>\n }\n </div>\n <span class=\"body-base-1 txt-pry\">{{descripcion}}</span>\n @if (link) {\n <a class=\"body-sm link-actividad\" (click)=\"openLink($event)\">\n <ius-icon-xs iconName=\"icon-link-2\"></ius-icon-xs>\n <span>{{ link }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.ctn-gnrl{position:relative;display:flex;flex-direction:column;cursor:pointer;padding:8px 12px;box-sizing:border-box;border-radius:4px;border:1px solid #eaeaea}.ctn-gnrl:hover{border:1px solid #C4DFFF;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ctn-gnrl:hover .fecha{display:none;pointer-events:none}.ctn-gnrl:hover .buttons-hove{display:flex;pointer-events:auto}.ctn-card{position:relative;display:flex;align-items:center;gap:24px}.ctn-inf{display:flex;flex:1 0 0;align-items:center;gap:16px}.icon-calendar-clock{color:#8c8c8c!important}.priority-tx{color:#184fdb}.tx-asig{display:flex;gap:24px}.info{display:flex;flex:1 0 0;flex-direction:column;align-items:flex-start}.ctn-icons{display:flex;align-items:center;gap:16px}.icon-dot{display:flex;align-items:center;width:8px;height:8px;aspect-ratio:1/1;background-color:#2167ff;border-radius:100px}.icon-dot-warning{display:flex;align-items:center;width:8px;height:8px;aspect-ratio:1/1;background-color:#ffae00;border-radius:100px}.icon-emergency-home{color:#ffae00}.fecha{width:76px}.buttons-hove{display:none;pointer-events:none;gap:4px}.ctn-collapse-card{max-height:1000px;overflow:hidden;transition:max-height .3s ease-in-out}.ctn-collapse-card.collapsed{max-height:0px}.ctn-clp{display:flex;gap:8px}.ctn-info-clp{display:flex;padding:4px 8px;flex-direction:column;gap:12px;flex:1 0 0}.text-info{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}.tx-read{color:#629219}.tx-warn{color:#db8e00}ius-simple-divider{margin:8px 0}.row-text-1{display:flex;align-items:center;gap:8px}.row-text-2{display:flex;align-items:center;gap:4px}.txt-pry{color:#333}.txt-sec{color:#595959}.txt-ter{color:#8c8c8c}.link-actividad{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:4px 8px;border-radius:4px;color:#595959;cursor:pointer;text-decoration:none;word-break:break-all}.link-actividad:hover{background-color:#edf6ff;text-decoration:underline}\n"] }]
7137
+ }], ctorParameters: () => [{ type: i1$1.DatePipe }], propDecorators: { read: [{
7057
7138
  type: Input
7058
7139
  }], warning: [{
7059
7140
  type: Input
7060
7141
  }], collapse: [{
7061
7142
  type: Input
7143
+ }], done: [{
7144
+ type: Input
7062
7145
  }], titulo: [{
7063
7146
  type: Input
7064
7147
  }], usuarioAsignado: [{
@@ -7077,6 +7160,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
7077
7160
  type: Input
7078
7161
  }], descripcion: [{
7079
7162
  type: Input
7163
+ }], link: [{
7164
+ type: Input
7080
7165
  }], onClickButtonCopy: [{
7081
7166
  type: Output
7082
7167
  }], onClickButtonRead: [{