sapenlinea-components 0.0.4 → 0.0.6

package/fesm2022/sapenlinea-components.mjs

@@ -0,0 +1,82 @@
+import * as i0 from '@angular/core';
+import { Component, EventEmitter, signal, computed, Output, Input } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class MyComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: MyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: MyComponent, isStandalone: true, selector: "lib-my-component", ngImport: i0, template: "<p>my-component works!</p>\r\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: MyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-my-component', imports: [], template: "<p>my-component works!</p>\r\n" }]
+        }] });
+
+class PaginationComponent {
+    page = 1;
+    pageSize = 10;
+    totalItems = 0;
+    showPageSizeSelector = false;
+    pageSizeOptions = [5, 10, 20, 50];
+    pageChange = new EventEmitter();
+    pageSizeChange = new EventEmitter();
+    pageSizeValue = signal(this.pageSize, ...(ngDevMode ? [{ debugName: "pageSizeValue" }] : []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    showPageSizeMenu = signal(false, ...(ngDevMode ? [{ debugName: "showPageSizeMenu" }] : []));
+    totalPages = computed(() => {
+        const size = this.pageSizeValue();
+        const total = this.totalItems;
+        return size > 0 ? Math.ceil(total / size) : 1;
+    }, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+    pages = computed(() => {
+        const tp = this.totalPages();
+        return Array.from({ length: tp }, (_, i) => i + 1);
+    }, ...(ngDevMode ? [{ debugName: "pages" }] : []));
+    selectedPageSize = computed(() => this.pageSizeValue(), ...(ngDevMode ? [{ debugName: "selectedPageSize" }] : []));
+    goToPage(p) {
+        if (p < 1 || p > this.totalPages())
+            return;
+        this.pageChange.emit(p);
+    }
+    togglePageSizeMenu() {
+        this.isOpen.update(v => !v);
+        this.showPageSizeMenu.update(v => !v);
+    }
+    selectPageSize(size) {
+        this.pageSizeValue.set(size);
+        this.pageSizeChange.emit(size);
+        this.showPageSizeMenu.set(false);
+        this.isOpen.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: PaginationComponent, isStandalone: true, selector: "app-pagination", inputs: { page: "page", pageSize: "pageSize", totalItems: "totalItems", showPageSizeSelector: "showPageSizeSelector", pageSizeOptions: "pageSizeOptions" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<div class=\"pagination-container\">\r\n  <div class=\"pagination\">\r\n    <!-- Bot\u00F3n doble atr\u00E1s -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(1)\" [disabled]=\"page === 1\">\r\n      \u00AB\u00AB\r\n    </button>\r\n\r\n    <!-- Bot\u00F3n atr\u00E1s -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(page - 1)\" [disabled]=\"page === 1\">\r\n      \u00AB\r\n    </button>\r\n\r\n    <!-- N\u00FAmeros de p\u00E1gina -->\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\u00F3n siguiente -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(page + 1)\" [disabled]=\"page === totalPages()\">\r\n      \u00BB\r\n    </button>\r\n\r\n    <!-- Bot\u00F3n doble adelante -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(totalPages())\" [disabled]=\"page === totalPages()\">\r\n      \u00BB\u00BB\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Selector Items por p\u00E1gina -->\r\n  <div *ngIf=\"showPageSizeSelector\">\r\n    <div class=\"pagination-v-4\">\r\n      <div class=\"label-pagination\">Items por p\u00E1gina</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\u00FA 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", styles: [".pagination-container{display:flex;flex-direction:row;justify-content:center;width:100%;padding:8px 0;position:relative}.pagination{display:flex;align-items:center;gap:12px;padding:12px;justify-content:center;flex:1}.icon-button{width:40px;height:40px;border-radius:50%;background:var(--primary, #596300);color:var(--surface, #ffffff);border:none;cursor:pointer;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px #00000026;transition:background .2s ease,transform .1s ease}.icon-button:disabled{background:#969696;color:var(--on-surface, #171c1f);opacity:.45;cursor:not-allowed}.pages{display:flex;gap:4px;overflow:hidden;border-radius:20px}.page-btn{background:var(--secondary-container, #dee58f);width:40px;height:40px;border:none;cursor:pointer;padding:8px 14px;font-size:14px;color:var(--schemes-on-surface, #3a3a3a);font-family:Roboto,sans-serif;border-radius:8px;transition:background .2s ease}.page-btn:hover:not(.active){background:var(--schemes-on-secondary-container, #61661f);color:var(--schemes-secondary-container, #dee58f)}.page-btn.active{background:var(--schemes-primary, #596300);color:var(--schemes-on-primary, #ffffff);font-weight:600;border-radius:20px}.pagination-v-4{display:flex;gap:10px;align-items:center;margin-left:auto}.label-pagination{font-size:14px;font-weight:600;color:var(--schemes-on-surface)}.elements-pagination{position:relative;display:flex;gap:4px;border-radius:20px}.split-button{display:flex;cursor:pointer;border-radius:20px;overflow:hidden}.leading-button{background:var(--schemes-secondary-container);border-radius:20px 4px 4px 20px;display:flex;align-items:center;height:40px}.state-layer{padding:10px 16px;background-color:#dee58f;margin-right:4px;border-radius:8px}.state-layer:open{color:#f5f5e0;background-color:#596300}.label{font-size:14px;font-weight:500;color:var(--schemes-on-secondary-container)}.trailing-button{background:var(--secondary-container, #dee58f);padding-left:12px;padding-right:12px;border:none;cursor:pointer;font-size:14px;color:var(--schemes-on-surface, #3a3a3a);font-family:Roboto,sans-serif;border-radius:8px;transition:background .2s ease;align-items:center;align-content:center}.arrow{width:20px;height:20px;color:#171c1f;transition:transform .25s ease}.arrow.open{transform:rotate(180deg)}.page-size-menu{background:#f5f5e0;position:absolute;min-width:100px;border-radius:4px;box-shadow:0 2px 8px #0003;overflow:hidden;z-index:999;bottom:50px;right:0;transform-origin:top right}.menu-option{padding:8px 12px;cursor:pointer}.menu-option:hover{background:#dee58f5b}.menu-option.active{background:#dee58f;color:#61661f}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-pagination', standalone: true, imports: [CommonModule], template: "<div class=\"pagination-container\">\r\n  <div class=\"pagination\">\r\n    <!-- Bot\u00F3n doble atr\u00E1s -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(1)\" [disabled]=\"page === 1\">\r\n      \u00AB\u00AB\r\n    </button>\r\n\r\n    <!-- Bot\u00F3n atr\u00E1s -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(page - 1)\" [disabled]=\"page === 1\">\r\n      \u00AB\r\n    </button>\r\n\r\n    <!-- N\u00FAmeros de p\u00E1gina -->\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\u00F3n siguiente -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(page + 1)\" [disabled]=\"page === totalPages()\">\r\n      \u00BB\r\n    </button>\r\n\r\n    <!-- Bot\u00F3n doble adelante -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(totalPages())\" [disabled]=\"page === totalPages()\">\r\n      \u00BB\u00BB\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Selector Items por p\u00E1gina -->\r\n  <div *ngIf=\"showPageSizeSelector\">\r\n    <div class=\"pagination-v-4\">\r\n      <div class=\"label-pagination\">Items por p\u00E1gina</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\u00FA 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", styles: [".pagination-container{display:flex;flex-direction:row;justify-content:center;width:100%;padding:8px 0;position:relative}.pagination{display:flex;align-items:center;gap:12px;padding:12px;justify-content:center;flex:1}.icon-button{width:40px;height:40px;border-radius:50%;background:var(--primary, #596300);color:var(--surface, #ffffff);border:none;cursor:pointer;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px #00000026;transition:background .2s ease,transform .1s ease}.icon-button:disabled{background:#969696;color:var(--on-surface, #171c1f);opacity:.45;cursor:not-allowed}.pages{display:flex;gap:4px;overflow:hidden;border-radius:20px}.page-btn{background:var(--secondary-container, #dee58f);width:40px;height:40px;border:none;cursor:pointer;padding:8px 14px;font-size:14px;color:var(--schemes-on-surface, #3a3a3a);font-family:Roboto,sans-serif;border-radius:8px;transition:background .2s ease}.page-btn:hover:not(.active){background:var(--schemes-on-secondary-container, #61661f);color:var(--schemes-secondary-container, #dee58f)}.page-btn.active{background:var(--schemes-primary, #596300);color:var(--schemes-on-primary, #ffffff);font-weight:600;border-radius:20px}.pagination-v-4{display:flex;gap:10px;align-items:center;margin-left:auto}.label-pagination{font-size:14px;font-weight:600;color:var(--schemes-on-surface)}.elements-pagination{position:relative;display:flex;gap:4px;border-radius:20px}.split-button{display:flex;cursor:pointer;border-radius:20px;overflow:hidden}.leading-button{background:var(--schemes-secondary-container);border-radius:20px 4px 4px 20px;display:flex;align-items:center;height:40px}.state-layer{padding:10px 16px;background-color:#dee58f;margin-right:4px;border-radius:8px}.state-layer:open{color:#f5f5e0;background-color:#596300}.label{font-size:14px;font-weight:500;color:var(--schemes-on-secondary-container)}.trailing-button{background:var(--secondary-container, #dee58f);padding-left:12px;padding-right:12px;border:none;cursor:pointer;font-size:14px;color:var(--schemes-on-surface, #3a3a3a);font-family:Roboto,sans-serif;border-radius:8px;transition:background .2s ease;align-items:center;align-content:center}.arrow{width:20px;height:20px;color:#171c1f;transition:transform .25s ease}.arrow.open{transform:rotate(180deg)}.page-size-menu{background:#f5f5e0;position:absolute;min-width:100px;border-radius:4px;box-shadow:0 2px 8px #0003;overflow:hidden;z-index:999;bottom:50px;right:0;transform-origin:top right}.menu-option{padding:8px 12px;cursor:pointer}.menu-option:hover{background:#dee58f5b}.menu-option.active{background:#dee58f;color:#61661f}\n"] }]
+        }], propDecorators: { page: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], totalItems: [{
+                type: Input
+            }], showPageSizeSelector: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }], pageSizeChange: [{
+                type: Output
+            }] } });
+
+// src/app/components/public-api.ts
+// Exportar el componente
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MyComponent, PaginationComponent };
+//# sourceMappingURL=sapenlinea-components.mjs.map

package/fesm2022/sapenlinea-components.mjs.map

@@ -0,0 +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":"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"}

package/index.d.ts

@@ -0,0 +1,31 @@
+import * as _angular_core from '@angular/core';
+import { EventEmitter } from '@angular/core';
+
+declare class MyComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MyComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MyComponent, "lib-my-component", never, {}, {}, never, never, true, never>;
+}
+
+declare class PaginationComponent {
+    page: number;
+    pageSize: number;
+    totalItems: number;
+    showPageSizeSelector: boolean;
+    pageSizeOptions: number[];
+    pageChange: EventEmitter<number>;
+    pageSizeChange: EventEmitter<number>;
+    pageSizeValue: _angular_core.WritableSignal<number>;
+    isOpen: _angular_core.WritableSignal<boolean>;
+    isDisabled: _angular_core.WritableSignal<boolean>;
+    showPageSizeMenu: _angular_core.WritableSignal<boolean>;
+    totalPages: _angular_core.Signal<number>;
+    pages: _angular_core.Signal<number[]>;
+    selectedPageSize: _angular_core.Signal<number>;
+    goToPage(p: number): void;
+    togglePageSizeMenu(): void;
+    selectPageSize(size: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PaginationComponent, never>;
+    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>;
+}
+
+export { MyComponent, PaginationComponent };

package/package.json

@@ -1,12 +1,23 @@
-{
-  "name": "sapenlinea-components",
-  "version": "0.0.4",
-  "peerDependencies": {
-    "@angular/common": "^20.3.0",
-    "@angular/core": "^20.3.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false
-}
+{
+  "name": "sapenlinea-components",
+  "version": "0.0.6",
+  "peerDependencies": {
+    "@angular/common": "^20.3.0",
+    "@angular/core": "^20.3.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/sapenlinea-components.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/sapenlinea-components.mjs"
+    }
+  }
+}

package/ng-package.json

@@ -1,15 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/sapenlinea-components",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  },
-  "allowedNonPeerDependencies": [
-    "@angular/common",
-    "@angular/core",
-    "@angular/forms",
-    "@angular/platform-browser",
-    "@angular/platform-browser-dynamic",
-    "@angular/router"
-  ]
-}

package/src/lib/components/my-component/my-component.html

@@ -1 +0,0 @@
-<p>my-component works!</p>

package/src/lib/components/my-component/my-component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MyComponent } from './my-component';
-
-describe('MyComponent', () => {
-  let component: MyComponent;
-  let fixture: ComponentFixture<MyComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MyComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(MyComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/my-component/my-component.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'lib-my-component',
-  imports: [],
-  templateUrl: './my-component.html',
-  styleUrl: './my-component.css',
-})
-export class MyComponent {
-
-}

package/src/lib/components/pagination/pagination.css

@@ -1,181 +0,0 @@
-.pagination-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  width: 100%;
-  padding: 8px 0;
-  position: relative;
-}
-
-.pagination {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px;
-  justify-content: center;
-  flex: 1;  
-}
-
-.icon-button {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: var(--primary, #596300);
-  color: var(--surface, #ffffff);
-  border: none;
-  cursor: pointer;
-  font-size: 16px;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-  transition: background 0.2s ease, transform 0.1s ease;
-}
-
-.icon-button:disabled {
-  background: #969696;
-  color: var(--on-surface, #171c1f);
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.pages {
-  display: flex;
-  gap: 4px;
-  overflow: hidden;
-  border-radius: 20px;
-}
-
-.page-btn {
-  background: var(--secondary-container, #dee58f);
-  width: 40px;
-  height: 40px;
-  border: none;
-  cursor: pointer;
-  padding: 8px 14px;
-  font-size: 14px;
-  color: var(--schemes-on-surface, #3a3a3a);
-  font-family: "Roboto", sans-serif;
-  border-radius: 8px;
-  transition: background 0.2s ease;
-}
-
-.page-btn:hover:not(.active) {
-  background: var(--schemes-on-secondary-container, #61661f);
-  color: var(--schemes-secondary-container, #dee58f);
-}
-
-.page-btn.active {
-  background: var(--schemes-primary, #596300);
-  color: var(--schemes-on-primary, #ffffff);
-  font-weight: 600;
-  border-radius: 20px;
-}
-
-.pagination-v-4 {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  margin-left: auto;
-}
-
-.label-pagination {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--schemes-on-surface);
-}
-
-.elements-pagination {
-    position: relative;
-  display: flex;
-  gap: 4px;
-  border-radius: 20px;
-}
-
-.split-button {
-  display: flex;
-  cursor: pointer;
-  border-radius: 20px;
-  overflow: hidden;
-}
-
-.leading-button {
-  background: var(--schemes-secondary-container);
-  border-radius: 20px 4px 4px 20px;
-  display: flex;
-  align-items: center;
-  height: 40px;
-}
-
-.state-layer {
-  padding: 10px 16px;
-  background-color: #dee58f;
-  margin-right: 4px;
-  border-radius: 8px;
-}
-
-.state-layer:open {
-    color: #f5f5e0;
-  background-color: #596300;
-}
-
-.label {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--schemes-on-secondary-container);
-}
-
-.trailing-button {
-  background: var(--secondary-container, #dee58f);
-  padding-left: 12px;
-  padding-right: 12px;
-  border: none;
-  cursor: pointer;
-  font-size: 14px;
-  color: var(--schemes-on-surface, #3a3a3a);
-  font-family: "Roboto", sans-serif;
-  border-radius: 8px;
-  transition: background 0.2s ease;
-  align-items: center;
-  align-content: center;
-}
-
-.arrow {
-  width: 20px;
-  height: 20px;
-  color: #171c1f;
-  transition: transform 0.25s ease;
-}
-
-.arrow.open {
-  transform: rotate(180deg);
-}
-
-.page-size-menu {
-  background: #f5f5e0;
-  position: absolute;
-  min-width: 100px;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
-  overflow: hidden;
-  z-index: 999;
-  bottom: 50px;
-  right: 0;
-  transform-origin: top right;
-}
-
-.menu-option {
-  padding: 8px 12px;
-  cursor: pointer;
-}
-
-.menu-option:hover {
-  background: #dee58f5b;
-}
-
-.menu-option.active {
-  background: #dee58f;
-  color: #61661f;
-}

package/src/lib/components/pagination/pagination.html

@@ -1,70 +0,0 @@
-<div class="pagination-container">
-  <div class="pagination">
-    <!-- Botón doble atrás -->
-    <button class="icon-button" (click)="goToPage(1)" [disabled]="page === 1">
-      ««
-    </button>
-
-    <!-- Botón atrás -->
-    <button class="icon-button" (click)="goToPage(page - 1)" [disabled]="page === 1">
-      «
-    </button>
-
-    <!-- Números de página -->
-    <div class="pages">
-      <button
-        class="page-btn"
-        *ngFor="let p of pages(); let idx = index"
-        [class.active]="page === idx + 1"
-        (click)="goToPage(idx + 1)"
-      >
-        {{ idx + 1 }}
-      </button>
-    </div>
-
-    <!-- Botón siguiente -->
-    <button class="icon-button" (click)="goToPage(page + 1)" [disabled]="page === totalPages()">
-      »
-    </button>
-
-    <!-- Botón doble adelante -->
-    <button class="icon-button" (click)="goToPage(totalPages())" [disabled]="page === totalPages()">
-      »»
-    </button>
-  </div>
-
-  <!-- Selector Items por página -->
-  <div *ngIf="showPageSizeSelector">
-    <div class="pagination-v-4">
-      <div class="label-pagination">Items por página</div>
-      <div class="elements-pagination">
-        <div class="split-button" (click)="togglePageSizeMenu()">
-          <div class="leading-button">
-            <div class="state-layer">
-              <div class="label">{{ pageSizeValue() }}</div>
-            </div>
-          </div>
-          <div class="trailing-button">
-            <div class="arrow" [class.open]="isOpen()">
-              <svg class="arrow" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">
-                <polyline points="6 9 12 15 18 9"></polyline>
-              </svg>
-            </div>
-          </div>
-        </div>
-
-        <!-- Menú desplegable -->
-        <div class="page-size-menu" *ngIf="showPageSizeMenu()">
-          <div
-            class="menu-option"
-            *ngFor="let opt of pageSizeOptions"
-            [class.active]="opt === pageSizeValue()"
-            (click)="selectPageSize(opt)"
-          >
-            {{ opt }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

package/src/lib/components/pagination/pagination.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { Pagination } from './pagination';
-
-describe('Pagination', () => {
-  let component: Pagination;
-  let fixture: ComponentFixture<Pagination>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Pagination]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(Pagination);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/pagination/pagination.ts

@@ -1,56 +0,0 @@
-import { Component, Input, Output, EventEmitter, computed, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'app-pagination',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './pagination.html',
-  styleUrls: ['./pagination.css']
-})
-export class PaginationComponent {
-  @Input() page = 1;
-  @Input() pageSize = 10;
-  @Input() totalItems = 0;
-
-  @Input() showPageSizeSelector = false;
-  @Input() pageSizeOptions: number[] = [5, 10, 20, 50];
-
-  @Output() pageChange = new EventEmitter<number>();
-  @Output() pageSizeChange = new EventEmitter<number>();
-
-  pageSizeValue = signal(this.pageSize);
-  isOpen = signal(false);
-  isDisabled = signal(false);
-  showPageSizeMenu = signal(false);
-
-  totalPages = computed(() => {
-    const size = this.pageSizeValue();
-    const total = this.totalItems;
-    return size > 0 ? Math.ceil(total / size) : 1;
-  });
-
-  pages = computed(() => {
-    const tp = this.totalPages();
-    return Array.from({ length: tp }, (_, i) => i + 1);
-  });
-
-  selectedPageSize = computed(() => this.pageSizeValue());
-
-  goToPage(p: number) {
-    if (p < 1 || p > this.totalPages()) return;
-    this.pageChange.emit(p);
-  }
-
-  togglePageSizeMenu() {
-    this.isOpen.update(v => !v);
-    this.showPageSizeMenu.update(v => !v);
-  }
-
-  selectPageSize(size: number) {
-    this.pageSizeValue.set(size);
-    this.pageSizeChange.emit(size);
-    this.showPageSizeMenu.set(false);
-    this.isOpen.set(false);
-  }
-}

package/src/lib/sapenlinea-components.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SapenlineaComponents } from './sapenlinea-components';
-
-describe('SapenlineaComponents', () => {
-  let component: SapenlineaComponents;
-  let fixture: ComponentFixture<SapenlineaComponents>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [SapenlineaComponents]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(SapenlineaComponents);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/sapenlinea-components.ts

@@ -1,15 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'lib-sapenlinea-components',
-  imports: [],
-  template: `
-    <p>
-      sapenlinea-components works!
-    </p>
-  `,
-  styles: ``,
-})
-export class SapenlineaComponents {
-
-}

package/src/public-api.ts

@@ -1,6 +0,0 @@
-// src/app/components/public-api.ts
-
-// Exportar el componente
-export * from './lib/components/my-component/my-component';
-export * from './lib/components/pagination/pagination';
-

package/tsconfig.lib.json

@@ -1,18 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "**/*.spec.ts"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,11 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,15 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "include": [
-    "src/**/*.d.ts",
-    "src/**/*.spec.ts"
-  ]
-}