sapenlinea-components 0.0.42 → 0.0.43

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.
@@ -2676,67 +2676,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
2676
2676
  type: Output
2677
2677
  }] } });
2678
2678
 
2679
- class NotificationModal {
2680
- messageInput;
2681
- mode = 'list';
2682
- messageControl = new FormControl('', { nonNullable: true });
2683
- titulo = 'Notificar a este Agente';
2684
- buttonClick = new EventEmitter();
2685
- itemLabel = '¡URGENTE!';
2686
- btnLabel = 'Personalizado';
2687
- defaultMessages = [
2688
- '¡URGENTE!',
2689
- '¡ALERTA!',
2690
- '¡EMERGENCIA!'
2691
- ];
2692
- selectDefaultMessage(message) {
2693
- this.mode = 'edit';
2694
- this.messageControl.setValue(message);
2695
- setTimeout(() => {
2696
- const el = this.messageInput.nativeElement;
2697
- el.focus();
2698
- el.setSelectionRange(message.length, message.length);
2699
- });
2700
- }
2701
- customMessage() {
2702
- this.mode = 'edit';
2703
- this.messageControl.reset('');
2704
- setTimeout(() => {
2705
- this.messageInput.nativeElement.focus();
2706
- });
2707
- }
2708
- btnClick() {
2709
- const value = this.messageControl.value.trim();
2710
- if (!value)
2711
- return;
2712
- this.buttonClick.emit(value);
2713
- }
2714
- backToList() {
2715
- this.mode = 'list';
2716
- this.messageControl.reset('');
2717
- }
2718
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
2719
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: NotificationModal, isStandalone: true, selector: "lib-notification-modal", inputs: { titulo: "titulo" }, outputs: { buttonClick: "buttonClick" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }], ngImport: i0, template: "<div class=\"notification-modal-container\">\r\n <div class=\"notification-modal-header\">\r\n <h3>{{ titulo }}</h3>\r\n </div>\r\n <div class=\"notification-modal-body\">\r\n <!-- LISTA DE MENSAJES -->\r\n @if (mode === 'list') {\r\n <div class=\"default-message-list\">\r\n @for (msg of defaultMessages; track msg) {\r\n <div class=\"default-message-item\" (click)=\"selectDefaultMessage(msg)\">\r\n <span>{{ msg }}</span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-send-2\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path\r\n d=\"M4.698 4.034 21 12 4.698 19.966a.5.5 0 0 1-.546-.124.56.56 0 0 1-.12-.568L6.5 12 4.032 4.726a.56.56 0 0 1 .12-.568.5.5 0 0 1 .546-.124M6.5 12H21\" />\r\n </svg>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- EDICI\u00D3N -->\r\n @if (mode === 'edit') {\r\n <div class=\"text-area-wrapper\">\r\n <textarea #messageInput class=\"message-textarea\" rows=\"5\" placeholder=\"Mensaje...\" [formControl]=\"messageControl\"></textarea>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"notification-modal-actions\">\r\n @if (mode === 'edit') {\r\n <button class=\"btn-back\" (click)=\"backToList()\">\r\n Volver\r\n </button>\r\n <button class=\"btn-custom\" [disabled]=\"!messageControl.value.trim()\" (click)=\"btnClick()\">\r\n Notificar\r\n </button>\r\n } @else {\r\n <button class=\"btn-custom\" (click)=\"customMessage()\">\r\n Personalizado\r\n </button>\r\n }\r\n </div>\r\n</div>", styles: [".notification-modal-container{width:100%;min-width:300px;max-width:320px;display:flex;flex-direction:column;border-radius:12px;background-color:#f0f0db}.notification-modal-header{padding:16px}.notification-modal-header h3{font-size:1.6rem;font-weight:700;color:#454733;text-transform:uppercase}.notification-modal-body{display:flex;flex-direction:column;gap:12px;overflow:hidden;padding:0 6px}.icon{color:#596300}.notification-modal-actions{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:16px}.default-message-item{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;cursor:pointer;border-radius:6px}.default-message-item:hover{background:#dee58f}.default-message-item .span{font-size:1.4rem;color:#454733}.text-area-wrapper{position:relative;width:100%;padding:0 10px}.message-textarea{width:100%;resize:none;border-radius:6px;border:1px solid #787861;background:transparent;padding:6px 12px}button{border:none;background-color:transparent}.btn-custom,.btn-back{color:#596300;font-weight:500;font-size:1.4rem;padding:6px 12px;cursor:pointer;border-radius:50px}.btn-custom:hover{background-color:#596300;color:#f0f0db}.btn-back:hover{background-color:#dee58f;color:#596300}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
2720
- }
2721
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationModal, decorators: [{
2722
- type: Component,
2723
- args: [{ selector: 'lib-notification-modal', imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"notification-modal-container\">\r\n <div class=\"notification-modal-header\">\r\n <h3>{{ titulo }}</h3>\r\n </div>\r\n <div class=\"notification-modal-body\">\r\n <!-- LISTA DE MENSAJES -->\r\n @if (mode === 'list') {\r\n <div class=\"default-message-list\">\r\n @for (msg of defaultMessages; track msg) {\r\n <div class=\"default-message-item\" (click)=\"selectDefaultMessage(msg)\">\r\n <span>{{ msg }}</span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-send-2\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path\r\n d=\"M4.698 4.034 21 12 4.698 19.966a.5.5 0 0 1-.546-.124.56.56 0 0 1-.12-.568L6.5 12 4.032 4.726a.56.56 0 0 1 .12-.568.5.5 0 0 1 .546-.124M6.5 12H21\" />\r\n </svg>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- EDICI\u00D3N -->\r\n @if (mode === 'edit') {\r\n <div class=\"text-area-wrapper\">\r\n <textarea #messageInput class=\"message-textarea\" rows=\"5\" placeholder=\"Mensaje...\" [formControl]=\"messageControl\"></textarea>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"notification-modal-actions\">\r\n @if (mode === 'edit') {\r\n <button class=\"btn-back\" (click)=\"backToList()\">\r\n Volver\r\n </button>\r\n <button class=\"btn-custom\" [disabled]=\"!messageControl.value.trim()\" (click)=\"btnClick()\">\r\n Notificar\r\n </button>\r\n } @else {\r\n <button class=\"btn-custom\" (click)=\"customMessage()\">\r\n Personalizado\r\n </button>\r\n }\r\n </div>\r\n</div>", styles: [".notification-modal-container{width:100%;min-width:300px;max-width:320px;display:flex;flex-direction:column;border-radius:12px;background-color:#f0f0db}.notification-modal-header{padding:16px}.notification-modal-header h3{font-size:1.6rem;font-weight:700;color:#454733;text-transform:uppercase}.notification-modal-body{display:flex;flex-direction:column;gap:12px;overflow:hidden;padding:0 6px}.icon{color:#596300}.notification-modal-actions{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:16px}.default-message-item{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;cursor:pointer;border-radius:6px}.default-message-item:hover{background:#dee58f}.default-message-item .span{font-size:1.4rem;color:#454733}.text-area-wrapper{position:relative;width:100%;padding:0 10px}.message-textarea{width:100%;resize:none;border-radius:6px;border:1px solid #787861;background:transparent;padding:6px 12px}button{border:none;background-color:transparent}.btn-custom,.btn-back{color:#596300;font-weight:500;font-size:1.4rem;padding:6px 12px;cursor:pointer;border-radius:50px}.btn-custom:hover{background-color:#596300;color:#f0f0db}.btn-back:hover{background-color:#dee58f;color:#596300}\n"] }]
2724
- }], propDecorators: { messageInput: [{
2725
- type: ViewChild,
2726
- args: ['messageInput']
2727
- }], titulo: [{
2728
- type: Input$1
2729
- }], buttonClick: [{
2730
- type: Output
2731
- }] } });
2732
-
2733
2679
  class SideCardDetail {
2734
2680
  wrapper;
2735
2681
  isFloating = true;
2736
2682
  isCompact = false;
2737
2683
  nowLabel = 'Ahora mismo';
2738
2684
  agoLabel = 'Hace';
2739
- showMessageModal = false;
2685
+ // showMessageModal = false;
2740
2686
  // Header
2741
2687
  title = 'Titulo';
2742
2688
  subtitle = 'Subtitulo';
@@ -2770,10 +2716,10 @@ class SideCardDetail {
2770
2716
  : 'status-chip-inactive';
2771
2717
  }
2772
2718
  buttonClickIcon(type) {
2773
- if (type === 'message') {
2774
- this.showMessageModal = !this.showMessageModal;
2775
- return;
2776
- }
2719
+ /* if (type === 'message') {
2720
+ this.showMessageModal = !this.showMessageModal;
2721
+ return;
2722
+ } */
2777
2723
  this.btnClickIcon.emit(type);
2778
2724
  }
2779
2725
  setTab(tab) {
@@ -2823,16 +2769,12 @@ class SideCardDetail {
2823
2769
  width <= 312 ||
2824
2770
  height <= 460;
2825
2771
  }
2826
- onNotify(message) {
2827
- console.log('Mensaje recibido:', message);
2828
- this.showMessageModal = false;
2829
- }
2830
2772
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SideCardDetail, deps: [], target: i0.ɵɵFactoryTarget.Component });
2831
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SideCardDetail, isStandalone: true, selector: "lib-side-card-detail", inputs: { isFloating: "isFloating", title: "title", subtitle: "subtitle", statusValue: "statusValue", sections: "sections" }, outputs: { btnClickIcon: "btnClickIcon", statusChange: "statusChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["SideCard"], descendants: true, static: true }], ngImport: i0, template: "<div #SideCard class=\"side-card-wrapper\">\r\n <div class=\"side-card\" [class.floating]=\"isFloating\" [class.compact]=\"isCompact\">\r\n <div class=\"element-header\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-arrow-left\" (click)=\"buttonClickIcon('back')\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M5 12l12 0\" />\r\n <path d=\"M5 12l4 5\" />\r\n <path d=\"M5 12l4 -5\" />\r\n </svg>\r\n\r\n <div class=\"text-container\">\r\n <span class=\"title\"> {{ title }} </span>\r\n <span class=\"subtitle\"> {{ subtitle }} </span>\r\n <div class=\"container-chip\">\r\n <span #statusChip class=\"status-chip\" [ngClass]=\"statusClass\">\r\n {{ statusLabel }}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"right-icons\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\r\n class=\"icon icon-tabler icons-tabler-filled icon-tabler-current-location\"\r\n (click)=\"buttonClickIcon('location')\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path\r\n d=\"M12 1a1 1 0 0 1 1 1v1.055a9.004 9.004 0 0 1 7.946 7.945h1.054a1 1 0 0 1 0 2h-1.055a9.004 9.004 0 0 1 -7.944 7.945l-.001 1.055a1 1 0 0 1 -2 0v-1.055a9.004 9.004 0 0 1 -7.945 -7.944l-1.055 -.001a1 1 0 0 1 0 -2h1.055a9.004 9.004 0 0 1 7.945 -7.945v-1.055a1 1 0 0 1 1 -1m0 4a7 7 0 1 0 0 14a7 7 0 0 0 0 -14m0 3a4 4 0 1 1 -4 4l.005 -.2a4 4 0 0 1 3.995 -3.8\" />\r\n </svg>\r\n\r\n <!-- message + modal -->\r\n <div class=\"message-icon-wrapper\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-message-circle\"\r\n (click)=\"buttonClickIcon('message')\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path\r\n d=\"M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1\" />\r\n </svg>\r\n\r\n @if (showMessageModal) {\r\n <div class=\"message-modal-anchor\">\r\n <lib-notification-modal (buttonClick)=\"onNotify($event)\" />\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"side-tabs\">\r\n <div class=\"tab\" [class.active]=\"activeTab === 'principal'\" (click)=\"setTab('principal')\">\r\n Principal\r\n </div>\r\n\r\n <div class=\"tab\" [class.active]=\"activeTab === 'historial'\" (click)=\"setTab('historial')\">\r\n Historial\r\n </div>\r\n\r\n <div class=\"tab-indicator\" [style.left]=\"getIndicatorLeft()\"></div>\r\n </div>\r\n <div class=\"body-content\">\r\n @for (section of sections; track section.title) {\r\n <div class=\"element-section\">\r\n <h3>{{ section.title }}</h3>\r\n\r\n <div class=\"element-content\">\r\n @if (section.items?.length) { @for (item of section.items; track\r\n item.key) {\r\n <div class=\"element-item\">\r\n <span class=\"label\">{{ item.label }}</span>\r\n <span class=\"value\">{{ isDateValue(item.value) ? getRelativeTime(item.value) : item.value }}</span>\r\n </div>\r\n } }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [".side-card-wrapper{position:relative;width:100%;height:100%}.side-card{width:354px;max-width:368px;min-width:240px;height:auto;max-height:90vh;background:#ebe8d6b0;border-radius:8px;padding:16px;font-size:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 12px #00000026;z-index:10;overflow:hidden;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.side-card.floating{position:absolute;top:16px;right:16px}.button-group{display:flex;gap:8px;justify-content:center;margin-bottom:12px}.btn-type{flex:1;padding:10px 12px;background-color:transparent;color:#61661f;border:2px solid #61661f;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer}.btn-type:hover{background-color:#dee58f;color:#61661f;border:none}.btn-type:active{background-color:#61661f;color:#fff;border-color:none}.active{background-color:#596300;color:#fff;border-color:none}.element-header{width:100%;display:flex;gap:12px}.text-container{flex:1;display:flex;flex-direction:column;gap:8px}.title{font-size:2rem;font-weight:700;text-transform:capitalize;max-lines:2}.subtitle{font-size:1.5rem;font-weight:300;color:#454733;text-transform:capitalize}.right-icons{display:flex;flex-direction:column;gap:8px}.icon{color:#1c1c1c;cursor:pointer}.icon.icon-tabler-current-location{color:#d3d936}.icon.icon-tabler-current-location:hover{color:#d3d93666}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1.2rem;font-weight:600;white-space:nowrap;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;margin-bottom:12px}.status-chip-active{background-color:#78db5c;color:#0f5e00}.status-chip-inactive{background-color:#a60321;color:#fafae8}.icon:hover{color:#1c1c1c66}.side-tabs{position:relative;display:flex;width:100%;border-bottom:2px solid #C7C7AD;margin-bottom:8px}.tab{flex:1;text-align:center;padding:12px 0;font-size:1.4rem;font-weight:500;cursor:pointer;color:#454733;transition:color .3s ease;text-transform:uppercase}.tab.active{background-color:transparent;color:#596300;font-weight:600}.tab:hover{color:#6a7500}.tab-indicator{position:absolute;bottom:-2px;left:0;width:50%;height:4px;background-color:#596300;border-radius:4px 4px 0 0;transition:left .3s ease}.body-content{flex:1;display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent}.body-content::-webkit-scrollbar{width:6px}.body-content::-webkit-scrollbar-track{background:transparent}.body-content::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.body-content::-webkit-scrollbar-thumb:hover{background:#00000080}.element-section{display:flex;flex-direction:column;gap:8px}.element-section h3{margin:0;font-size:1.6rem;font-weight:500;color:#1c1c12;text-transform:uppercase}.element-content{display:flex;flex-direction:column;gap:10px;padding:10px 0;background-color:transparent}.element-item{display:flex;justify-content:space-between}.element-item .label,.element-item .value{font-size:1.5rem;color:#454733;font-weight:300;text-transform:uppercase}.side-card.compact{font-size:13px;padding:12px;gap:10px}.side-card.compact *{margin-bottom:0}.side-card.compact{gap:10px}.side-card.compact .element-section,.side-card.compact .element-content{gap:6px}.side-card.compact .title{font-size:1.6rem;line-height:1.2}.side-card.compact .subtitle{font-size:1.3rem}.side-card.compact .icon{width:22px;height:22px}.side-card.compact svg.icon{width:22px;height:22px}.side-card.compact h3{font-size:1.2rem}.side-card.compact .label,.side-card.compact .value{font-size:1.1rem}.side-card.compact .status-chip{font-size:.9rem;padding:.5rem .8rem;margin-bottom:6px}.side-card.compact .tab{padding:8px 0;font-size:1.1rem}.side-card.compact .tab-indicator{height:3px}.side-card.compact .element-header{gap:8px}.side-card.compact .right-icons{gap:4px}.side-card.compact{max-width:312px;max-height:460px;overflow-y:auto}.side-card.floating.compact{top:9px;right:9px}.message-icon-wrapper{position:relative;display:inline-flex}.message-modal-anchor{position:absolute;top:36px;right:0;z-index:20}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NotificationModal, selector: "lib-notification-modal", inputs: ["titulo"], outputs: ["buttonClick"] }] });
2773
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SideCardDetail, isStandalone: true, selector: "lib-side-card-detail", inputs: { isFloating: "isFloating", title: "title", subtitle: "subtitle", statusValue: "statusValue", sections: "sections" }, outputs: { btnClickIcon: "btnClickIcon", statusChange: "statusChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["SideCard"], descendants: true, static: true }], ngImport: i0, template: "<div #SideCard class=\"side-card-wrapper\">\r\n <div class=\"side-card\" [class.floating]=\"isFloating\" [class.compact]=\"isCompact\">\r\n <div class=\"element-header\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-arrow-left\" (click)=\"buttonClickIcon('back')\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M5 12l12 0\" />\r\n <path d=\"M5 12l4 5\" />\r\n <path d=\"M5 12l4 -5\" />\r\n </svg>\r\n\r\n <div class=\"text-container\">\r\n <span class=\"title\"> {{ title }} </span>\r\n <span class=\"subtitle\"> {{ subtitle }} </span>\r\n <div class=\"container-chip\">\r\n <span #statusChip class=\"status-chip\" [ngClass]=\"statusClass\">\r\n {{ statusLabel }}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"right-icons\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\r\n class=\"icon icon-tabler icons-tabler-filled icon-tabler-current-location\"\r\n (click)=\"buttonClickIcon('location')\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path\r\n d=\"M12 1a1 1 0 0 1 1 1v1.055a9.004 9.004 0 0 1 7.946 7.945h1.054a1 1 0 0 1 0 2h-1.055a9.004 9.004 0 0 1 -7.944 7.945l-.001 1.055a1 1 0 0 1 -2 0v-1.055a9.004 9.004 0 0 1 -7.945 -7.944l-1.055 -.001a1 1 0 0 1 0 -2h1.055a9.004 9.004 0 0 1 7.945 -7.945v-1.055a1 1 0 0 1 1 -1m0 4a7 7 0 1 0 0 14a7 7 0 0 0 0 -14m0 3a4 4 0 1 1 -4 4l.005 -.2a4 4 0 0 1 3.995 -3.8\" />\r\n </svg>\r\n\r\n <!-- message + modal -->\r\n <div class=\"message-icon-wrapper\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-message-circle\"\r\n (click)=\"buttonClickIcon('message')\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path\r\n d=\"M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1\" />\r\n </svg>\r\n\r\n <!-- @if (showMessageModal) {\r\n <div class=\"message-modal-anchor\">\r\n <lib-notification-modal (buttonClick)=\"onNotify($event)\" />\r\n </div>\r\n } -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"side-tabs\">\r\n <div class=\"tab\" [class.active]=\"activeTab === 'principal'\" (click)=\"setTab('principal')\">\r\n Principal\r\n </div>\r\n\r\n <div class=\"tab\" [class.active]=\"activeTab === 'historial'\" (click)=\"setTab('historial')\">\r\n Historial\r\n </div>\r\n\r\n <div class=\"tab-indicator\" [style.left]=\"getIndicatorLeft()\"></div>\r\n </div>\r\n <div class=\"body-content\">\r\n @for (section of sections; track section.title) {\r\n <div class=\"element-section\">\r\n <h3>{{ section.title }}</h3>\r\n\r\n <div class=\"element-content\">\r\n @if (section.items?.length) { @for (item of section.items; track\r\n item.key) {\r\n <div class=\"element-item\">\r\n <span class=\"label\">{{ item.label }}</span>\r\n <span class=\"value\">{{ isDateValue(item.value) ? getRelativeTime(item.value) : item.value }}</span>\r\n </div>\r\n } }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [".side-card-wrapper{position:relative;width:100%;height:100%}.side-card{width:354px;max-width:368px;min-width:240px;height:auto;max-height:90vh;background:#ebe8d6b0;border-radius:8px;padding:16px;font-size:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 12px #00000026;z-index:10;overflow:hidden;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.side-card.floating{position:absolute;top:16px;right:16px}.button-group{display:flex;gap:8px;justify-content:center;margin-bottom:12px}.btn-type{flex:1;padding:10px 12px;background-color:transparent;color:#61661f;border:2px solid #61661f;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer}.btn-type:hover{background-color:#dee58f;color:#61661f;border:none}.btn-type:active{background-color:#61661f;color:#fff;border-color:none}.active{background-color:#596300;color:#fff;border-color:none}.element-header{width:100%;display:flex;gap:12px}.text-container{flex:1;display:flex;flex-direction:column;gap:8px}.title{font-size:2rem;font-weight:700;text-transform:capitalize;max-lines:2}.subtitle{font-size:1.5rem;font-weight:300;color:#454733;text-transform:capitalize}.right-icons{display:flex;flex-direction:column;gap:8px}.icon{color:#1c1c1c;cursor:pointer}.icon.icon-tabler-current-location{color:#d3d936}.icon.icon-tabler-current-location:hover{color:#d3d93666}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1.2rem;font-weight:600;white-space:nowrap;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;margin-bottom:12px}.status-chip-active{background-color:#78db5c;color:#0f5e00}.status-chip-inactive{background-color:#a60321;color:#fafae8}.icon:hover{color:#1c1c1c66}.side-tabs{position:relative;display:flex;width:100%;border-bottom:2px solid #C7C7AD;margin-bottom:8px}.tab{flex:1;text-align:center;padding:12px 0;font-size:1.4rem;font-weight:500;cursor:pointer;color:#454733;transition:color .3s ease;text-transform:uppercase}.tab.active{background-color:transparent;color:#596300;font-weight:600}.tab:hover{color:#6a7500}.tab-indicator{position:absolute;bottom:-2px;left:0;width:50%;height:4px;background-color:#596300;border-radius:4px 4px 0 0;transition:left .3s ease}.body-content{flex:1;display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent}.body-content::-webkit-scrollbar{width:6px}.body-content::-webkit-scrollbar-track{background:transparent}.body-content::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.body-content::-webkit-scrollbar-thumb:hover{background:#00000080}.element-section{display:flex;flex-direction:column;gap:8px}.element-section h3{margin:0;font-size:1.6rem;font-weight:500;color:#1c1c12;text-transform:uppercase}.element-content{display:flex;flex-direction:column;gap:10px;padding:0 0 10px;background-color:transparent}.element-item{display:flex;justify-content:space-between}.element-item .label,.element-item .value{font-size:1.5rem;color:#454733;font-weight:300;text-transform:uppercase}.side-card.compact{font-size:13px;padding:12px;gap:10px}.side-card.compact *{margin-bottom:0}.side-card.compact{gap:10px}.side-card.compact .element-section,.side-card.compact .element-content{gap:6px}.side-card.compact .title{font-size:1.6rem;line-height:1.2}.side-card.compact .subtitle{font-size:1.3rem}.side-card.compact .icon{width:22px;height:22px}.side-card.compact svg.icon{width:22px;height:22px}.side-card.compact h3{font-size:1.2rem}.side-card.compact .label,.side-card.compact .value{font-size:1.1rem}.side-card.compact .status-chip{font-size:.9rem;padding:.5rem .8rem;margin-bottom:6px}.side-card.compact .tab{padding:8px 0;font-size:1.1rem}.side-card.compact .tab-indicator{height:3px}.side-card.compact .element-header{gap:8px}.side-card.compact .right-icons{gap:4px}.side-card.compact{max-width:312px;max-height:460px;overflow-y:auto}.side-card.floating.compact{top:9px;right:9px}.message-icon-wrapper{position:relative;display:inline-flex}.message-modal-anchor{position:absolute;top:36px;right:0;z-index:20}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
2832
2774
  }
2833
2775
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SideCardDetail, decorators: [{
2834
2776
  type: Component,
2835
- args: [{ selector: 'lib-side-card-detail', imports: [CommonModule, NotificationModal], template: "<div #SideCard class=\"side-card-wrapper\">\r\n <div class=\"side-card\" [class.floating]=\"isFloating\" [class.compact]=\"isCompact\">\r\n <div class=\"element-header\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-arrow-left\" (click)=\"buttonClickIcon('back')\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M5 12l12 0\" />\r\n <path d=\"M5 12l4 5\" />\r\n <path d=\"M5 12l4 -5\" />\r\n </svg>\r\n\r\n <div class=\"text-container\">\r\n <span class=\"title\"> {{ title }} </span>\r\n <span class=\"subtitle\"> {{ subtitle }} </span>\r\n <div class=\"container-chip\">\r\n <span #statusChip class=\"status-chip\" [ngClass]=\"statusClass\">\r\n {{ statusLabel }}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"right-icons\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\r\n class=\"icon icon-tabler icons-tabler-filled icon-tabler-current-location\"\r\n (click)=\"buttonClickIcon('location')\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path\r\n d=\"M12 1a1 1 0 0 1 1 1v1.055a9.004 9.004 0 0 1 7.946 7.945h1.054a1 1 0 0 1 0 2h-1.055a9.004 9.004 0 0 1 -7.944 7.945l-.001 1.055a1 1 0 0 1 -2 0v-1.055a9.004 9.004 0 0 1 -7.945 -7.944l-1.055 -.001a1 1 0 0 1 0 -2h1.055a9.004 9.004 0 0 1 7.945 -7.945v-1.055a1 1 0 0 1 1 -1m0 4a7 7 0 1 0 0 14a7 7 0 0 0 0 -14m0 3a4 4 0 1 1 -4 4l.005 -.2a4 4 0 0 1 3.995 -3.8\" />\r\n </svg>\r\n\r\n <!-- message + modal -->\r\n <div class=\"message-icon-wrapper\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-message-circle\"\r\n (click)=\"buttonClickIcon('message')\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path\r\n d=\"M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1\" />\r\n </svg>\r\n\r\n @if (showMessageModal) {\r\n <div class=\"message-modal-anchor\">\r\n <lib-notification-modal (buttonClick)=\"onNotify($event)\" />\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"side-tabs\">\r\n <div class=\"tab\" [class.active]=\"activeTab === 'principal'\" (click)=\"setTab('principal')\">\r\n Principal\r\n </div>\r\n\r\n <div class=\"tab\" [class.active]=\"activeTab === 'historial'\" (click)=\"setTab('historial')\">\r\n Historial\r\n </div>\r\n\r\n <div class=\"tab-indicator\" [style.left]=\"getIndicatorLeft()\"></div>\r\n </div>\r\n <div class=\"body-content\">\r\n @for (section of sections; track section.title) {\r\n <div class=\"element-section\">\r\n <h3>{{ section.title }}</h3>\r\n\r\n <div class=\"element-content\">\r\n @if (section.items?.length) { @for (item of section.items; track\r\n item.key) {\r\n <div class=\"element-item\">\r\n <span class=\"label\">{{ item.label }}</span>\r\n <span class=\"value\">{{ isDateValue(item.value) ? getRelativeTime(item.value) : item.value }}</span>\r\n </div>\r\n } }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [".side-card-wrapper{position:relative;width:100%;height:100%}.side-card{width:354px;max-width:368px;min-width:240px;height:auto;max-height:90vh;background:#ebe8d6b0;border-radius:8px;padding:16px;font-size:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 12px #00000026;z-index:10;overflow:hidden;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.side-card.floating{position:absolute;top:16px;right:16px}.button-group{display:flex;gap:8px;justify-content:center;margin-bottom:12px}.btn-type{flex:1;padding:10px 12px;background-color:transparent;color:#61661f;border:2px solid #61661f;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer}.btn-type:hover{background-color:#dee58f;color:#61661f;border:none}.btn-type:active{background-color:#61661f;color:#fff;border-color:none}.active{background-color:#596300;color:#fff;border-color:none}.element-header{width:100%;display:flex;gap:12px}.text-container{flex:1;display:flex;flex-direction:column;gap:8px}.title{font-size:2rem;font-weight:700;text-transform:capitalize;max-lines:2}.subtitle{font-size:1.5rem;font-weight:300;color:#454733;text-transform:capitalize}.right-icons{display:flex;flex-direction:column;gap:8px}.icon{color:#1c1c1c;cursor:pointer}.icon.icon-tabler-current-location{color:#d3d936}.icon.icon-tabler-current-location:hover{color:#d3d93666}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1.2rem;font-weight:600;white-space:nowrap;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;margin-bottom:12px}.status-chip-active{background-color:#78db5c;color:#0f5e00}.status-chip-inactive{background-color:#a60321;color:#fafae8}.icon:hover{color:#1c1c1c66}.side-tabs{position:relative;display:flex;width:100%;border-bottom:2px solid #C7C7AD;margin-bottom:8px}.tab{flex:1;text-align:center;padding:12px 0;font-size:1.4rem;font-weight:500;cursor:pointer;color:#454733;transition:color .3s ease;text-transform:uppercase}.tab.active{background-color:transparent;color:#596300;font-weight:600}.tab:hover{color:#6a7500}.tab-indicator{position:absolute;bottom:-2px;left:0;width:50%;height:4px;background-color:#596300;border-radius:4px 4px 0 0;transition:left .3s ease}.body-content{flex:1;display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent}.body-content::-webkit-scrollbar{width:6px}.body-content::-webkit-scrollbar-track{background:transparent}.body-content::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.body-content::-webkit-scrollbar-thumb:hover{background:#00000080}.element-section{display:flex;flex-direction:column;gap:8px}.element-section h3{margin:0;font-size:1.6rem;font-weight:500;color:#1c1c12;text-transform:uppercase}.element-content{display:flex;flex-direction:column;gap:10px;padding:10px 0;background-color:transparent}.element-item{display:flex;justify-content:space-between}.element-item .label,.element-item .value{font-size:1.5rem;color:#454733;font-weight:300;text-transform:uppercase}.side-card.compact{font-size:13px;padding:12px;gap:10px}.side-card.compact *{margin-bottom:0}.side-card.compact{gap:10px}.side-card.compact .element-section,.side-card.compact .element-content{gap:6px}.side-card.compact .title{font-size:1.6rem;line-height:1.2}.side-card.compact .subtitle{font-size:1.3rem}.side-card.compact .icon{width:22px;height:22px}.side-card.compact svg.icon{width:22px;height:22px}.side-card.compact h3{font-size:1.2rem}.side-card.compact .label,.side-card.compact .value{font-size:1.1rem}.side-card.compact .status-chip{font-size:.9rem;padding:.5rem .8rem;margin-bottom:6px}.side-card.compact .tab{padding:8px 0;font-size:1.1rem}.side-card.compact .tab-indicator{height:3px}.side-card.compact .element-header{gap:8px}.side-card.compact .right-icons{gap:4px}.side-card.compact{max-width:312px;max-height:460px;overflow-y:auto}.side-card.floating.compact{top:9px;right:9px}.message-icon-wrapper{position:relative;display:inline-flex}.message-modal-anchor{position:absolute;top:36px;right:0;z-index:20}\n"] }]
2777
+ args: [{ selector: 'lib-side-card-detail', imports: [CommonModule], template: "<div #SideCard class=\"side-card-wrapper\">\r\n <div class=\"side-card\" [class.floating]=\"isFloating\" [class.compact]=\"isCompact\">\r\n <div class=\"element-header\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-arrow-left\" (click)=\"buttonClickIcon('back')\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M5 12l12 0\" />\r\n <path d=\"M5 12l4 5\" />\r\n <path d=\"M5 12l4 -5\" />\r\n </svg>\r\n\r\n <div class=\"text-container\">\r\n <span class=\"title\"> {{ title }} </span>\r\n <span class=\"subtitle\"> {{ subtitle }} </span>\r\n <div class=\"container-chip\">\r\n <span #statusChip class=\"status-chip\" [ngClass]=\"statusClass\">\r\n {{ statusLabel }}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"right-icons\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\r\n class=\"icon icon-tabler icons-tabler-filled icon-tabler-current-location\"\r\n (click)=\"buttonClickIcon('location')\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path\r\n d=\"M12 1a1 1 0 0 1 1 1v1.055a9.004 9.004 0 0 1 7.946 7.945h1.054a1 1 0 0 1 0 2h-1.055a9.004 9.004 0 0 1 -7.944 7.945l-.001 1.055a1 1 0 0 1 -2 0v-1.055a9.004 9.004 0 0 1 -7.945 -7.944l-1.055 -.001a1 1 0 0 1 0 -2h1.055a9.004 9.004 0 0 1 7.945 -7.945v-1.055a1 1 0 0 1 1 -1m0 4a7 7 0 1 0 0 14a7 7 0 0 0 0 -14m0 3a4 4 0 1 1 -4 4l.005 -.2a4 4 0 0 1 3.995 -3.8\" />\r\n </svg>\r\n\r\n <!-- message + modal -->\r\n <div class=\"message-icon-wrapper\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-message-circle\"\r\n (click)=\"buttonClickIcon('message')\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path\r\n d=\"M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1\" />\r\n </svg>\r\n\r\n <!-- @if (showMessageModal) {\r\n <div class=\"message-modal-anchor\">\r\n <lib-notification-modal (buttonClick)=\"onNotify($event)\" />\r\n </div>\r\n } -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"side-tabs\">\r\n <div class=\"tab\" [class.active]=\"activeTab === 'principal'\" (click)=\"setTab('principal')\">\r\n Principal\r\n </div>\r\n\r\n <div class=\"tab\" [class.active]=\"activeTab === 'historial'\" (click)=\"setTab('historial')\">\r\n Historial\r\n </div>\r\n\r\n <div class=\"tab-indicator\" [style.left]=\"getIndicatorLeft()\"></div>\r\n </div>\r\n <div class=\"body-content\">\r\n @for (section of sections; track section.title) {\r\n <div class=\"element-section\">\r\n <h3>{{ section.title }}</h3>\r\n\r\n <div class=\"element-content\">\r\n @if (section.items?.length) { @for (item of section.items; track\r\n item.key) {\r\n <div class=\"element-item\">\r\n <span class=\"label\">{{ item.label }}</span>\r\n <span class=\"value\">{{ isDateValue(item.value) ? getRelativeTime(item.value) : item.value }}</span>\r\n </div>\r\n } }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [".side-card-wrapper{position:relative;width:100%;height:100%}.side-card{width:354px;max-width:368px;min-width:240px;height:auto;max-height:90vh;background:#ebe8d6b0;border-radius:8px;padding:16px;font-size:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 12px #00000026;z-index:10;overflow:hidden;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.side-card.floating{position:absolute;top:16px;right:16px}.button-group{display:flex;gap:8px;justify-content:center;margin-bottom:12px}.btn-type{flex:1;padding:10px 12px;background-color:transparent;color:#61661f;border:2px solid #61661f;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer}.btn-type:hover{background-color:#dee58f;color:#61661f;border:none}.btn-type:active{background-color:#61661f;color:#fff;border-color:none}.active{background-color:#596300;color:#fff;border-color:none}.element-header{width:100%;display:flex;gap:12px}.text-container{flex:1;display:flex;flex-direction:column;gap:8px}.title{font-size:2rem;font-weight:700;text-transform:capitalize;max-lines:2}.subtitle{font-size:1.5rem;font-weight:300;color:#454733;text-transform:capitalize}.right-icons{display:flex;flex-direction:column;gap:8px}.icon{color:#1c1c1c;cursor:pointer}.icon.icon-tabler-current-location{color:#d3d936}.icon.icon-tabler-current-location:hover{color:#d3d93666}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1.2rem;font-weight:600;white-space:nowrap;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;margin-bottom:12px}.status-chip-active{background-color:#78db5c;color:#0f5e00}.status-chip-inactive{background-color:#a60321;color:#fafae8}.icon:hover{color:#1c1c1c66}.side-tabs{position:relative;display:flex;width:100%;border-bottom:2px solid #C7C7AD;margin-bottom:8px}.tab{flex:1;text-align:center;padding:12px 0;font-size:1.4rem;font-weight:500;cursor:pointer;color:#454733;transition:color .3s ease;text-transform:uppercase}.tab.active{background-color:transparent;color:#596300;font-weight:600}.tab:hover{color:#6a7500}.tab-indicator{position:absolute;bottom:-2px;left:0;width:50%;height:4px;background-color:#596300;border-radius:4px 4px 0 0;transition:left .3s ease}.body-content{flex:1;display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent}.body-content::-webkit-scrollbar{width:6px}.body-content::-webkit-scrollbar-track{background:transparent}.body-content::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.body-content::-webkit-scrollbar-thumb:hover{background:#00000080}.element-section{display:flex;flex-direction:column;gap:8px}.element-section h3{margin:0;font-size:1.6rem;font-weight:500;color:#1c1c12;text-transform:uppercase}.element-content{display:flex;flex-direction:column;gap:10px;padding:0 0 10px;background-color:transparent}.element-item{display:flex;justify-content:space-between}.element-item .label,.element-item .value{font-size:1.5rem;color:#454733;font-weight:300;text-transform:uppercase}.side-card.compact{font-size:13px;padding:12px;gap:10px}.side-card.compact *{margin-bottom:0}.side-card.compact{gap:10px}.side-card.compact .element-section,.side-card.compact .element-content{gap:6px}.side-card.compact .title{font-size:1.6rem;line-height:1.2}.side-card.compact .subtitle{font-size:1.3rem}.side-card.compact .icon{width:22px;height:22px}.side-card.compact svg.icon{width:22px;height:22px}.side-card.compact h3{font-size:1.2rem}.side-card.compact .label,.side-card.compact .value{font-size:1.1rem}.side-card.compact .status-chip{font-size:.9rem;padding:.5rem .8rem;margin-bottom:6px}.side-card.compact .tab{padding:8px 0;font-size:1.1rem}.side-card.compact .tab-indicator{height:3px}.side-card.compact .element-header{gap:8px}.side-card.compact .right-icons{gap:4px}.side-card.compact{max-width:312px;max-height:460px;overflow-y:auto}.side-card.floating.compact{top:9px;right:9px}.message-icon-wrapper{position:relative;display:inline-flex}.message-modal-anchor{position:absolute;top:36px;right:0;z-index:20}\n"] }]
2836
2778
  }], propDecorators: { wrapper: [{
2837
2779
  type: ViewChild,
2838
2780
  args: ['SideCard', { static: true }]
@@ -3071,6 +3013,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
3071
3013
  args: ['submitBtn', { read: ElementRef }]
3072
3014
  }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], filtersConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersConfig", required: false }] }], filtersChange: [{ type: i0.Output, args: ["filtersChange"] }], applyFilters: [{ type: i0.Output, args: ["applyFilters"] }], clearFilters: [{ type: i0.Output, args: ["clearFilters"] }], buttonMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonMode", required: false }] }], filterButtonClicked: [{ type: i0.Output, args: ["filterButtonClicked"] }] } });
3073
3015
 
3016
+ class NotificationModal {
3017
+ messageInput;
3018
+ mode = 'list';
3019
+ messageControl = new FormControl('', { nonNullable: true });
3020
+ titulo = 'Notificar a este Agente';
3021
+ buttonClick = new EventEmitter();
3022
+ itemLabel = '¡URGENTE!';
3023
+ btnLabel = 'Personalizado';
3024
+ defaultMessages = [
3025
+ '¡URGENTE!',
3026
+ '¡ALERTA!',
3027
+ '¡EMERGENCIA!'
3028
+ ];
3029
+ selectDefaultMessage(message) {
3030
+ this.mode = 'edit';
3031
+ this.messageControl.setValue(message);
3032
+ setTimeout(() => {
3033
+ const el = this.messageInput.nativeElement;
3034
+ el.focus();
3035
+ el.setSelectionRange(message.length, message.length);
3036
+ });
3037
+ }
3038
+ customMessage() {
3039
+ this.mode = 'edit';
3040
+ this.messageControl.reset('');
3041
+ setTimeout(() => {
3042
+ this.messageInput.nativeElement.focus();
3043
+ });
3044
+ }
3045
+ btnClick() {
3046
+ const value = this.messageControl.value.trim();
3047
+ if (!value)
3048
+ return;
3049
+ this.buttonClick.emit(value);
3050
+ }
3051
+ backToList() {
3052
+ this.mode = 'list';
3053
+ this.messageControl.reset('');
3054
+ }
3055
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
3056
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: NotificationModal, isStandalone: true, selector: "lib-notification-modal", inputs: { titulo: "titulo" }, outputs: { buttonClick: "buttonClick" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }], ngImport: i0, template: "<div class=\"notification-modal-container\">\r\n <div class=\"notification-modal-header\">\r\n <h3>{{ titulo }}</h3>\r\n </div>\r\n <div class=\"notification-modal-body\">\r\n <!-- LISTA DE MENSAJES -->\r\n @if (mode === 'list') {\r\n <div class=\"default-message-list\">\r\n @for (msg of defaultMessages; track msg) {\r\n <div class=\"default-message-item\" (click)=\"selectDefaultMessage(msg)\">\r\n <span>{{ msg }}</span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-send-2\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path\r\n d=\"M4.698 4.034 21 12 4.698 19.966a.5.5 0 0 1-.546-.124.56.56 0 0 1-.12-.568L6.5 12 4.032 4.726a.56.56 0 0 1 .12-.568.5.5 0 0 1 .546-.124M6.5 12H21\" />\r\n </svg>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- EDICI\u00D3N -->\r\n @if (mode === 'edit') {\r\n <div class=\"text-area-wrapper\">\r\n <textarea #messageInput class=\"message-textarea\" rows=\"5\" placeholder=\"Mensaje...\" [formControl]=\"messageControl\"></textarea>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"notification-modal-actions\">\r\n @if (mode === 'edit') {\r\n <button class=\"btn-back\" (click)=\"backToList()\">\r\n Volver\r\n </button>\r\n <button class=\"btn-custom\" [disabled]=\"!messageControl.value.trim()\" (click)=\"btnClick()\">\r\n Notificar\r\n </button>\r\n } @else {\r\n <button class=\"btn-custom\" (click)=\"customMessage()\">\r\n Personalizado\r\n </button>\r\n }\r\n </div>\r\n</div>", styles: [".notification-modal-container{width:100%;min-width:300px;max-width:320px;display:flex;flex-direction:column;border-radius:12px;background-color:#f0f0db}.notification-modal-header{padding:16px}.notification-modal-header h3{font-size:1.6rem;font-weight:700;color:#454733;text-transform:uppercase}.notification-modal-body{display:flex;flex-direction:column;gap:12px;overflow:hidden;padding:0 6px}.icon{color:#596300}.notification-modal-actions{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:16px}.default-message-item{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;cursor:pointer;border-radius:6px}.default-message-item:hover{background:#dee58f}.default-message-item .span{font-size:1.4rem;color:#454733}.text-area-wrapper{position:relative;width:100%;padding:0 10px}.message-textarea{width:100%;resize:none;border-radius:6px;border:1px solid #787861;background:transparent;padding:6px 12px}button{border:none;background-color:transparent}.btn-custom,.btn-back{color:#596300;font-weight:500;font-size:1.4rem;padding:6px 12px;cursor:pointer;border-radius:50px}.btn-custom:hover{background-color:#596300;color:#f0f0db}.btn-back:hover{background-color:#dee58f;color:#596300}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
3057
+ }
3058
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationModal, decorators: [{
3059
+ type: Component,
3060
+ args: [{ selector: 'lib-notification-modal', imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"notification-modal-container\">\r\n <div class=\"notification-modal-header\">\r\n <h3>{{ titulo }}</h3>\r\n </div>\r\n <div class=\"notification-modal-body\">\r\n <!-- LISTA DE MENSAJES -->\r\n @if (mode === 'list') {\r\n <div class=\"default-message-list\">\r\n @for (msg of defaultMessages; track msg) {\r\n <div class=\"default-message-item\" (click)=\"selectDefaultMessage(msg)\">\r\n <span>{{ msg }}</span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-send-2\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path\r\n d=\"M4.698 4.034 21 12 4.698 19.966a.5.5 0 0 1-.546-.124.56.56 0 0 1-.12-.568L6.5 12 4.032 4.726a.56.56 0 0 1 .12-.568.5.5 0 0 1 .546-.124M6.5 12H21\" />\r\n </svg>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- EDICI\u00D3N -->\r\n @if (mode === 'edit') {\r\n <div class=\"text-area-wrapper\">\r\n <textarea #messageInput class=\"message-textarea\" rows=\"5\" placeholder=\"Mensaje...\" [formControl]=\"messageControl\"></textarea>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"notification-modal-actions\">\r\n @if (mode === 'edit') {\r\n <button class=\"btn-back\" (click)=\"backToList()\">\r\n Volver\r\n </button>\r\n <button class=\"btn-custom\" [disabled]=\"!messageControl.value.trim()\" (click)=\"btnClick()\">\r\n Notificar\r\n </button>\r\n } @else {\r\n <button class=\"btn-custom\" (click)=\"customMessage()\">\r\n Personalizado\r\n </button>\r\n }\r\n </div>\r\n</div>", styles: [".notification-modal-container{width:100%;min-width:300px;max-width:320px;display:flex;flex-direction:column;border-radius:12px;background-color:#f0f0db}.notification-modal-header{padding:16px}.notification-modal-header h3{font-size:1.6rem;font-weight:700;color:#454733;text-transform:uppercase}.notification-modal-body{display:flex;flex-direction:column;gap:12px;overflow:hidden;padding:0 6px}.icon{color:#596300}.notification-modal-actions{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:16px}.default-message-item{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;cursor:pointer;border-radius:6px}.default-message-item:hover{background:#dee58f}.default-message-item .span{font-size:1.4rem;color:#454733}.text-area-wrapper{position:relative;width:100%;padding:0 10px}.message-textarea{width:100%;resize:none;border-radius:6px;border:1px solid #787861;background:transparent;padding:6px 12px}button{border:none;background-color:transparent}.btn-custom,.btn-back{color:#596300;font-weight:500;font-size:1.4rem;padding:6px 12px;cursor:pointer;border-radius:50px}.btn-custom:hover{background-color:#596300;color:#f0f0db}.btn-back:hover{background-color:#dee58f;color:#596300}\n"] }]
3061
+ }], propDecorators: { messageInput: [{
3062
+ type: ViewChild,
3063
+ args: ['messageInput']
3064
+ }], titulo: [{
3065
+ type: Input$1
3066
+ }], buttonClick: [{
3067
+ type: Output
3068
+ }] } });
3069
+
3074
3070
  class Footer {
3075
3071
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Footer, deps: [], target: i0.ɵɵFactoryTarget.Component });
3076
3072
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: Footer, isStandalone: true, selector: "app-footer", ngImport: i0, template: "<footer class=\"footer\">\r\n \u00A9 2026 <span>PAICO \u00B7 Sistemas y Aplicaciones en L\u00EDnea.</span> Todos los derechos reservados.\r\n</footer>\r\n", styles: ["footer{background-color:#f0f0db;color:#787861;padding:20px 30px;border-radius:16px;display:flex;gap:6px;justify-content:center;align-items:center;position:fixed;bottom:16px;left:32px;right:32px;font-size:1.2rem}span{font-weight:700}\n"] });