sapenlinea-components 0.0.6 → 0.0.8

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.
Files changed (4) hide show
  1. package/fesm2022/sapenlinea-components.mjs +42 -2
  2. package/fesm2022/sapenlinea-components.mjs.map +1 -1
  3. package/index.d.ts +33 -1
  4. package/package.json +1 -1
package/fesm2022/sapenlinea-components.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Component, EventEmitter, signal, computed, Output, Input } from '@angular/core';
2
+ import { Component, EventEmitter, signal, computed, Output, Input, input, output, HostListener } from '@angular/core';
3
3
  import * as i1 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
5
 
@@ -71,6 +71,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
71
71
  type: Output
72
72
  }] } });
73
73
 
74
+ class Table {
75
+ columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
76
+ data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
77
+ actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : []));
78
+ openedMenu = signal(null, ...(ngDevMode ? [{ debugName: "openedMenu" }] : []));
79
+ selectedRow = signal(null, ...(ngDevMode ? [{ debugName: "selectedRow" }] : []));
80
+ optionSelected = output();
81
+ toggleMenu(index) {
82
+ this.openedMenu.set(this.openedMenu() === index ? null : index);
83
+ }
84
+ onOptionClick(option, row) {
85
+ this.optionSelected.emit({ action: option.label, row });
86
+ this.openedMenu.set(null);
87
+ }
88
+ openModal(row, event) {
89
+ event?.stopPropagation();
90
+ if (this.selectedRow()?.['id'] === row['id']) {
91
+ this.selectedRow.set(null);
92
+ }
93
+ else {
94
+ this.selectedRow.set(row);
95
+ }
96
+ }
97
+ onClickOutside(event) {
98
+ const target = event.target;
99
+ if (!target.closest('.menu-acciones')) {
100
+ this.selectedRow.set(null);
101
+ }
102
+ }
103
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
104
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: Table, isStandalone: true, selector: "lib-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<div class=\"table-wrapper\">\r\n <table class=\"inner-table\">\r\n <thead>\r\n <tr>\r\n @for (col of columns(); track col.key) {\r\n <th>{{ col.label }}</th>\r\n }\r\n\r\n <!-- columna para acciones -->\r\n <th></th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n @for (row of data(); track $index) {\r\n <tr>\r\n @for (col of columns(); track col.key) {\r\n <td>{{ row[col.key] }}</td>\r\n }\r\n\r\n <!-- Celda de acciones -->\r\n <td class=\"acciones-cell\">\r\n <div class=\"menu-acciones\">\r\n <button class=\"icon-button\" (click)=\"openModal(row)\">\r\n <div class=\"content\">\r\n <div class=\"state-layer\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"more-vert\"\r\n width=\"20\"\r\n height=\"20\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <circle cx=\"12\" cy=\"5\" r=\"1\" />\r\n <circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n <circle cx=\"12\" cy=\"19\" r=\"1\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </button>\r\n @if(selectedRow()?.['id'] === row['id']){\r\n <div class=\"modal-options\" (click)=\"$event.stopPropagation()\">\r\n \r\n <div class=\"modal-content\">\r\n <ul>\r\n @for (option of actions(); track $index) {\r\n <li\r\n class=\"option-item\"\r\n [style.color]=\"option.color\"\r\n (click)=\"onOptionClick(option, row)\"\r\n >\r\n <span class=\"icon\" [class]=\"option.icon\"></span>\r\n <span class=\"label\">{{ option.label }}</span>\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n \r\n </div>\r\n }\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n</div>", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:left;padding:12px 16px;font-weight:600;color:#3a3a3a}.inner-table td{padding:12px 16px;color:#4a4a4a;border-top:1px solid #c7c7ad}.acciones-cell{text-align:center;padding:6px;position:relative}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item:hover{background-color:#0000001a}.option-item:active{background-color:#dee58f}.icon{margin-right:8px}.option-item .label{font-weight:500;font-size:16px}\n"] });
105
+ }
106
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: Table, decorators: [{
107
+ type: Component,
108
+ args: [{ selector: 'lib-table', imports: [], standalone: true, template: "<div class=\"table-wrapper\">\r\n <table class=\"inner-table\">\r\n <thead>\r\n <tr>\r\n @for (col of columns(); track col.key) {\r\n <th>{{ col.label }}</th>\r\n }\r\n\r\n <!-- columna para acciones -->\r\n <th></th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n @for (row of data(); track $index) {\r\n <tr>\r\n @for (col of columns(); track col.key) {\r\n <td>{{ row[col.key] }}</td>\r\n }\r\n\r\n <!-- Celda de acciones -->\r\n <td class=\"acciones-cell\">\r\n <div class=\"menu-acciones\">\r\n <button class=\"icon-button\" (click)=\"openModal(row)\">\r\n <div class=\"content\">\r\n <div class=\"state-layer\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"more-vert\"\r\n width=\"20\"\r\n height=\"20\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <circle cx=\"12\" cy=\"5\" r=\"1\" />\r\n <circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n <circle cx=\"12\" cy=\"19\" r=\"1\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </button>\r\n @if(selectedRow()?.['id'] === row['id']){\r\n <div class=\"modal-options\" (click)=\"$event.stopPropagation()\">\r\n \r\n <div class=\"modal-content\">\r\n <ul>\r\n @for (option of actions(); track $index) {\r\n <li\r\n class=\"option-item\"\r\n [style.color]=\"option.color\"\r\n (click)=\"onOptionClick(option, row)\"\r\n >\r\n <span class=\"icon\" [class]=\"option.icon\"></span>\r\n <span class=\"label\">{{ option.label }}</span>\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n \r\n </div>\r\n }\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n</div>", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:left;padding:12px 16px;font-weight:600;color:#3a3a3a}.inner-table td{padding:12px 16px;color:#4a4a4a;border-top:1px solid #c7c7ad}.acciones-cell{text-align:center;padding:6px;position:relative}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item:hover{background-color:#0000001a}.option-item:active{background-color:#dee58f}.icon{margin-right:8px}.option-item .label{font-weight:500;font-size:16px}\n"] }]
109
+ }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], onClickOutside: [{
110
+ type: HostListener,
111
+ args: ['document:click', ['$event']]
112
+ }] } });
113
+
74
114
  // src/app/components/public-api.ts
75
115
  // Exportar el componente
76
116
 
@@ -78,5 +118,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
78
118
  * Generated bundle index. Do not edit.
79
119
  */
80
120
 
81
- export { MyComponent, PaginationComponent };
121
+ export { MyComponent, PaginationComponent, Table };
82
122
  //# sourceMappingURL=sapenlinea-components.mjs.map
package/fesm2022/sapenlinea-components.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sapenlinea-components.mjs","sources":["../../../projects/sapenlinea-components/src/lib/components/my-component/my-component.ts","../../../projects/sapenlinea-components/src/lib/components/my-component/my-component.html","../../../projects/sapenlinea-components/src/lib/components/pagination/pagination.ts","../../../projects/sapenlinea-components/src/lib/components/pagination/pagination.html","../../../projects/sapenlinea-components/src/public-api.ts","../../../projects/sapenlinea-components/src/sapenlinea-components.ts"],"sourcesContent":["import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'lib-my-component',\r\n imports: [],\r\n templateUrl: './my-component.html',\r\n styleUrl: './my-component.css',\r\n})\r\nexport class MyComponent {\r\n\r\n}\r\n","<p>my-component works!</p>\r\n","import { Component, Input, Output, EventEmitter, computed, signal } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\n@Component({\r\n selector: 'app-pagination',\r\n standalone: true,\r\n imports: [CommonModule],\r\n templateUrl: './pagination.html',\r\n styleUrls: ['./pagination.css']\r\n})\r\nexport class PaginationComponent {\r\n @Input() page = 1;\r\n @Input() pageSize = 10;\r\n @Input() totalItems = 0;\r\n\r\n @Input() showPageSizeSelector = false;\r\n @Input() pageSizeOptions: number[] = [5, 10, 20, 50];\r\n\r\n @Output() pageChange = new EventEmitter<number>();\r\n @Output() pageSizeChange = new EventEmitter<number>();\r\n\r\n pageSizeValue = signal(this.pageSize);\r\n isOpen = signal(false);\r\n isDisabled = signal(false);\r\n showPageSizeMenu = signal(false);\r\n\r\n totalPages = computed(() => {\r\n const size = this.pageSizeValue();\r\n const total = this.totalItems;\r\n return size > 0 ? Math.ceil(total / size) : 1;\r\n });\r\n\r\n pages = computed(() => {\r\n const tp = this.totalPages();\r\n return Array.from({ length: tp }, (_, i) => i + 1);\r\n });\r\n\r\n selectedPageSize = computed(() => this.pageSizeValue());\r\n\r\n goToPage(p: number) {\r\n if (p < 1 || p > this.totalPages()) return;\r\n this.pageChange.emit(p);\r\n }\r\n\r\n togglePageSizeMenu() {\r\n this.isOpen.update(v => !v);\r\n this.showPageSizeMenu.update(v => !v);\r\n }\r\n\r\n selectPageSize(size: number) {\r\n this.pageSizeValue.set(size);\r\n this.pageSizeChange.emit(size);\r\n this.showPageSizeMenu.set(false);\r\n this.isOpen.set(false);\r\n }\r\n}\r\n","<div class=\"pagination-container\">\r\n <div class=\"pagination\">\r\n <!-- Botón doble atrás -->\r\n <button class=\"icon-button\" (click)=\"goToPage(1)\" [disabled]=\"page === 1\">\r\n ««\r\n </button>\r\n\r\n <!-- Botón atrás -->\r\n <button class=\"icon-button\" (click)=\"goToPage(page - 1)\" [disabled]=\"page === 1\">\r\n «\r\n </button>\r\n\r\n <!-- Números de página -->\r\n <div class=\"pages\">\r\n <button\r\n class=\"page-btn\"\r\n *ngFor=\"let p of pages(); let idx = index\"\r\n [class.active]=\"page === idx + 1\"\r\n (click)=\"goToPage(idx + 1)\"\r\n >\r\n {{ idx + 1 }}\r\n </button>\r\n </div>\r\n\r\n <!-- Botón siguiente -->\r\n <button class=\"icon-button\" (click)=\"goToPage(page + 1)\" [disabled]=\"page === totalPages()\">\r\n »\r\n </button>\r\n\r\n <!-- Botón doble adelante -->\r\n <button class=\"icon-button\" (click)=\"goToPage(totalPages())\" [disabled]=\"page === totalPages()\">\r\n »»\r\n </button>\r\n </div>\r\n\r\n <!-- Selector Items por página -->\r\n <div *ngIf=\"showPageSizeSelector\">\r\n <div class=\"pagination-v-4\">\r\n <div class=\"label-pagination\">Items por página</div>\r\n <div class=\"elements-pagination\">\r\n <div class=\"split-button\" (click)=\"togglePageSizeMenu()\">\r\n <div class=\"leading-button\">\r\n <div class=\"state-layer\">\r\n <div class=\"label\">{{ pageSizeValue() }}</div>\r\n </div>\r\n </div>\r\n <div class=\"trailing-button\">\r\n <div class=\"arrow\" [class.open]=\"isOpen()\">\r\n <svg class=\"arrow\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\">\r\n <polyline points=\"6 9 12 15 18 9\"></polyline>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Menú desplegable -->\r\n <div class=\"page-size-menu\" *ngIf=\"showPageSizeMenu()\">\r\n <div\r\n class=\"menu-option\"\r\n *ngFor=\"let opt of pageSizeOptions\"\r\n [class.active]=\"opt === pageSizeValue()\"\r\n (click)=\"selectPageSize(opt)\"\r\n >\r\n {{ opt }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n","// src/app/components/public-api.ts\r\n\r\n// Exportar el componente\r\nexport * from './lib/components/my-component/my-component';\r\nexport * from './lib/components/pagination/pagination';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAQa,WAAW,CAAA;wGAAX,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAX,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,WAAW,4ECRxB,gCACA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;4FDOa,WAAW,EAAA,UAAA,EAAA,CAAA;kBANvB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,WACnB,EAAE,EAAA,QAAA,EAAA,gCAAA,EAAA;;;MEMA,mBAAmB,CAAA;IACrB,IAAI,GAAG,CAAC;IACR,QAAQ,GAAG,EAAE;IACb,UAAU,GAAG,CAAC;IAEd,oBAAoB,GAAG,KAAK;IAC5B,eAAe,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAE1C,IAAA,UAAU,GAAG,IAAI,YAAY,EAAU;AACvC,IAAA,cAAc,GAAG,IAAI,YAAY,EAAU;AAErD,IAAA,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,yDAAC;AACrC,IAAA,MAAM,GAAG,MAAM,CAAC,KAAK,kDAAC;AACtB,IAAA,UAAU,GAAG,MAAM,CAAC,KAAK,sDAAC;AAC1B,IAAA,gBAAgB,GAAG,MAAM,CAAC,KAAK,4DAAC;AAEhC,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAK;AACzB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE;AACjC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU;AAC7B,QAAA,OAAO,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;AAC/C,IAAA,CAAC,sDAAC;AAEF,IAAA,KAAK,GAAG,QAAQ,CAAC,MAAK;AACpB,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;QAC5B,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AACpD,IAAA,CAAC,iDAAC;IAEF,gBAAgB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,kBAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;AAEvD,IAAA,QAAQ,CAAC,CAAS,EAAA;QAChB,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE;YAAE;AACpC,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;IACzB;IAEA,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC3B,QAAA,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IACvC;AAEA,IAAA,cAAc,CAAC,IAAY,EAAA;AACzB,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC;AAC5B,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;AAC9B,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC;AAChC,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;IACxB;wGA5CW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAnB,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,UAAA,EAAA,YAAA,EAAA,oBAAA,EAAA,sBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECVhC,u7EAsEA,EAAA,MAAA,EAAA,CAAA,8lFAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDhEY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;4FAIX,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAP/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,UAAA,EACd,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,u7EAAA,EAAA,MAAA,EAAA,CAAA,8lFAAA,CAAA,EAAA;;sBAKtB;;sBACA;;sBACA;;sBAEA;;sBACA;;sBAEA;;sBACA;;;AEnBH;AAEA;;ACFA;;AAEG;;;;"}
1
+ {"version":3,"file":"sapenlinea-components.mjs","sources":["../../../projects/sapenlinea-components/src/lib/components/my-component/my-component.ts","../../../projects/sapenlinea-components/src/lib/components/my-component/my-component.html","../../../projects/sapenlinea-components/src/lib/components/pagination/pagination.ts","../../../projects/sapenlinea-components/src/lib/components/pagination/pagination.html","../../../projects/sapenlinea-components/src/lib/components/table/table.ts","../../../projects/sapenlinea-components/src/lib/components/table/table.html","../../../projects/sapenlinea-components/src/public-api.ts","../../../projects/sapenlinea-components/src/sapenlinea-components.ts"],"sourcesContent":["import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'lib-my-component',\r\n imports: [],\r\n templateUrl: './my-component.html',\r\n styleUrl: './my-component.css',\r\n})\r\nexport class MyComponent {\r\n\r\n}\r\n","<p>my-component works!</p>\r\n","import { Component, Input, Output, EventEmitter, computed, signal } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\n@Component({\r\n selector: 'app-pagination',\r\n standalone: true,\r\n imports: [CommonModule],\r\n templateUrl: './pagination.html',\r\n styleUrls: ['./pagination.css']\r\n})\r\nexport class PaginationComponent {\r\n @Input() page = 1;\r\n @Input() pageSize = 10;\r\n @Input() totalItems = 0;\r\n\r\n @Input() showPageSizeSelector = false;\r\n @Input() pageSizeOptions: number[] = [5, 10, 20, 50];\r\n\r\n @Output() pageChange = new EventEmitter<number>();\r\n @Output() pageSizeChange = new EventEmitter<number>();\r\n\r\n pageSizeValue = signal(this.pageSize);\r\n isOpen = signal(false);\r\n isDisabled = signal(false);\r\n showPageSizeMenu = signal(false);\r\n\r\n totalPages = computed(() => {\r\n const size = this.pageSizeValue();\r\n const total = this.totalItems;\r\n return size > 0 ? Math.ceil(total / size) : 1;\r\n });\r\n\r\n pages = computed(() => {\r\n const tp = this.totalPages();\r\n return Array.from({ length: tp }, (_, i) => i + 1);\r\n });\r\n\r\n selectedPageSize = computed(() => this.pageSizeValue());\r\n\r\n goToPage(p: number) {\r\n if (p < 1 || p > this.totalPages()) return;\r\n this.pageChange.emit(p);\r\n }\r\n\r\n togglePageSizeMenu() {\r\n this.isOpen.update(v => !v);\r\n this.showPageSizeMenu.update(v => !v);\r\n }\r\n\r\n selectPageSize(size: number) {\r\n this.pageSizeValue.set(size);\r\n this.pageSizeChange.emit(size);\r\n this.showPageSizeMenu.set(false);\r\n this.isOpen.set(false);\r\n }\r\n}\r\n","<div class=\"pagination-container\">\r\n <div class=\"pagination\">\r\n <!-- Botón doble atrás -->\r\n <button class=\"icon-button\" (click)=\"goToPage(1)\" [disabled]=\"page === 1\">\r\n ««\r\n </button>\r\n\r\n <!-- Botón atrás -->\r\n <button class=\"icon-button\" (click)=\"goToPage(page - 1)\" [disabled]=\"page === 1\">\r\n «\r\n </button>\r\n\r\n <!-- Números de página -->\r\n <div class=\"pages\">\r\n <button\r\n class=\"page-btn\"\r\n *ngFor=\"let p of pages(); let idx = index\"\r\n [class.active]=\"page === idx + 1\"\r\n (click)=\"goToPage(idx + 1)\"\r\n >\r\n {{ idx + 1 }}\r\n </button>\r\n </div>\r\n\r\n <!-- Botón siguiente -->\r\n <button class=\"icon-button\" (click)=\"goToPage(page + 1)\" [disabled]=\"page === totalPages()\">\r\n »\r\n </button>\r\n\r\n <!-- Botón doble adelante -->\r\n <button class=\"icon-button\" (click)=\"goToPage(totalPages())\" [disabled]=\"page === totalPages()\">\r\n »»\r\n </button>\r\n </div>\r\n\r\n <!-- Selector Items por página -->\r\n <div *ngIf=\"showPageSizeSelector\">\r\n <div class=\"pagination-v-4\">\r\n <div class=\"label-pagination\">Items por página</div>\r\n <div class=\"elements-pagination\">\r\n <div class=\"split-button\" (click)=\"togglePageSizeMenu()\">\r\n <div class=\"leading-button\">\r\n <div class=\"state-layer\">\r\n <div class=\"label\">{{ pageSizeValue() }}</div>\r\n </div>\r\n </div>\r\n <div class=\"trailing-button\">\r\n <div class=\"arrow\" [class.open]=\"isOpen()\">\r\n <svg class=\"arrow\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\">\r\n <polyline points=\"6 9 12 15 18 9\"></polyline>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Menú desplegable -->\r\n <div class=\"page-size-menu\" *ngIf=\"showPageSizeMenu()\">\r\n <div\r\n class=\"menu-option\"\r\n *ngFor=\"let opt of pageSizeOptions\"\r\n [class.active]=\"opt === pageSizeValue()\"\r\n (click)=\"selectPageSize(opt)\"\r\n >\r\n {{ opt }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n","import { Component, HostListener, input, output, signal } from '@angular/core';\r\nimport { TableAction, TableColumn, TableRow } from '../../interfaces/table';\r\n\r\n@Component({\r\n selector: 'lib-table',\r\n imports: [],\r\n standalone: true,\r\n templateUrl: './table.html',\r\n styleUrl: './table.css',\r\n})\r\nexport class Table {\r\n columns = input<TableColumn[]>([]);\r\n data = input<TableRow[]>([]);\r\n actions = input<TableAction[]>([]);\r\n\r\n openedMenu = signal<number | null>(null);\r\n selectedRow = signal<TableRow | null>(null);\r\n \r\n optionSelected = output<{ action: string; row: TableRow }>();\r\n\r\n toggleMenu(index: number) {\r\n this.openedMenu.set(this.openedMenu() === index ? null : index);\r\n }\r\n\r\n onOptionClick(option: TableAction, row: TableRow) {\r\n this.optionSelected.emit({ action: option.label, row });\r\n this.openedMenu.set(null);\r\n }\r\n\r\n openModal(row: TableRow, event?: MouseEvent) {\r\n event?.stopPropagation();\r\n\r\n if (this.selectedRow()?.['id'] === row['id']) {\r\n this.selectedRow.set(null);\r\n } else {\r\n this.selectedRow.set(row);\r\n }\r\n }\r\n\r\n @HostListener('document:click', ['$event'])\r\n onClickOutside(event: MouseEvent) {\r\n const target = event.target as HTMLElement;\r\n if (!target.closest('.menu-acciones')) {\r\n this.selectedRow.set(null);\r\n }\r\n }\r\n}\r\n","<div class=\"table-wrapper\">\r\n <table class=\"inner-table\">\r\n <thead>\r\n <tr>\r\n @for (col of columns(); track col.key) {\r\n <th>{{ col.label }}</th>\r\n }\r\n\r\n <!-- columna para acciones -->\r\n <th></th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n @for (row of data(); track $index) {\r\n <tr>\r\n @for (col of columns(); track col.key) {\r\n <td>{{ row[col.key] }}</td>\r\n }\r\n\r\n <!-- Celda de acciones -->\r\n <td class=\"acciones-cell\">\r\n <div class=\"menu-acciones\">\r\n <button class=\"icon-button\" (click)=\"openModal(row)\">\r\n <div class=\"content\">\r\n <div class=\"state-layer\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"more-vert\"\r\n width=\"20\"\r\n height=\"20\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <circle cx=\"12\" cy=\"5\" r=\"1\" />\r\n <circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n <circle cx=\"12\" cy=\"19\" r=\"1\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </button>\r\n @if(selectedRow()?.['id'] === row['id']){\r\n <div class=\"modal-options\" (click)=\"$event.stopPropagation()\">\r\n \r\n <div class=\"modal-content\">\r\n <ul>\r\n @for (option of actions(); track $index) {\r\n <li\r\n class=\"option-item\"\r\n [style.color]=\"option.color\"\r\n (click)=\"onOptionClick(option, row)\"\r\n >\r\n <span class=\"icon\" [class]=\"option.icon\"></span>\r\n <span class=\"label\">{{ option.label }}</span>\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n \r\n </div>\r\n }\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n</div>","// src/app/components/public-api.ts\r\n\r\n// Exportar el componente\r\nexport * from './lib/components/my-component/my-component';\r\nexport * from './lib/components/pagination/pagination';\r\nexport * from './lib/components/table/table';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/index.d.ts CHANGED
@@ -28,4 +28,36 @@ declare class PaginationComponent {
28
28
  static ɵcmp: _angular_core.ɵɵComponentDeclaration<PaginationComponent, "app-pagination", never, { "page": { "alias": "page"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "totalItems": { "alias": "totalItems"; "required": false; }; "showPageSizeSelector": { "alias": "showPageSizeSelector"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; }, never, never, true, never>;
29
29
  }
30
30
 
31
- export { MyComponent, PaginationComponent };
31
+ interface TableColumn {
32
+ key: string;
33
+ label: string;
34
+ }
35
+ interface TableRow {
36
+ [key: string]: any;
37
+ }
38
+ interface TableAction {
39
+ icon: string;
40
+ label: string;
41
+ color?: string;
42
+ action: string;
43
+ }
44
+
45
+ declare class Table {
46
+ columns: _angular_core.InputSignal<TableColumn[]>;
47
+ data: _angular_core.InputSignal<TableRow[]>;
48
+ actions: _angular_core.InputSignal<TableAction[]>;
49
+ openedMenu: _angular_core.WritableSignal<number | null>;
50
+ selectedRow: _angular_core.WritableSignal<TableRow | null>;
51
+ optionSelected: _angular_core.OutputEmitterRef<{
52
+ action: string;
53
+ row: TableRow;
54
+ }>;
55
+ toggleMenu(index: number): void;
56
+ onOptionClick(option: TableAction, row: TableRow): void;
57
+ openModal(row: TableRow, event?: MouseEvent): void;
58
+ onClickOutside(event: MouseEvent): void;
59
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<Table, never>;
60
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<Table, "lib-table", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; }, { "optionSelected": "optionSelected"; }, never, never, true, never>;
61
+ }
62
+
63
+ export { MyComponent, PaginationComponent, Table };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sapenlinea-components",
3
- "version": "0.0.6",
3
+ "version": "0.0.8",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^20.3.0",
6
6
  "@angular/core": "^20.3.0"