sapenlinea-components 0.0.4

package/README.md

@@ -0,0 +1,63 @@
+# SapenlineaComponents
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build sapenlinea-components
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/sapenlinea-components
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/ng-package.json

@@ -0,0 +1,15 @@
+{
+  "$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/package.json

@@ -0,0 +1,12 @@
+{
+  "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
+}

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

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

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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,181 @@
+.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

@@ -0,0 +1,70 @@
+<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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,6 @@
+// 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

@@ -0,0 +1,18 @@
+/* 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

@@ -0,0 +1,11 @@
+/* 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

@@ -0,0 +1,15 @@
+/* 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"
+  ]
+}