@4byte/shared-lib 0.0.1 → 0.0.2

package/src/lib/components/byte-table/byte-table.stories.ts

@@ -1,296 +0,0 @@
-import {
-  applicationConfig,
-  moduleMetadata,
-  type Meta,
-  type StoryObj
-} from '@storybook/angular';
-
-import { ByteTable } from './byte-table';
-import { ByteTableModule } from './byte-table.module';
-
-import { provideEmpresaUI } from './../../providers/provide-empresa-ui';
-
-const meta: Meta<ByteTable> = {
-  title: 'Components/ByteTable',
-  component: ByteTable,
-
-  decorators: [
-    moduleMetadata({
-      imports: [
-        ByteTableModule
-      ]
-    }),
-
-    (story, context) =>
-      applicationConfig({
-        providers: [
-          provideEmpresaUI({
-            theme: context.globals['theme']
-          })
-        ]
-      })(story, context)
-  ],
-
-  tags: ['autodocs'],
-
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Componente de tabla reutilizable para listados, basado en PrimeNG y compatible con templates personalizados.'
-      }
-    }
-  }
-};
-
-export default meta;
-
-type Story = StoryObj<ByteTable>;
-
-const ciudades = [
-  { name: 'Lima', code: 'LIM', poblacion: 9674755 },
-  { name: 'Arequipa', code: 'AQP', poblacion: 1080635 },
-  { name: 'Cusco', code: 'CUS', poblacion: 447588 },
-  { name: 'Trujillo', code: 'TRU', poblacion: 970736 },
-  { name: 'Piura', code: 'PIU', poblacion: 802067 }
-];
-
-const columnas = [
-  { field: 'name', header: 'Ciudad' },
-  { field: 'code', header: 'Código' },
-  { field: 'poblacion', header: 'Población' }
-];
-
-export const Normal: Story = {
-  render: (args) => ({
-    props: args,
-
-    template: `
-      <byte-table
-        [value]="value"
-        [columns]="columns"
-      >
-
-        <ng-template byteTableHeader let-columns>
-          <tr>
-            @for (col of columns; track col.field) {
-              <th>{{ col.header }}</th>
-            }
-          </tr>
-        </ng-template>
-
-        <ng-template byteTableBody let-rowData let-columns="columns">
-          <tr>
-            <td>{{ rowData.name }}</td>
-            <td>{{ rowData.code }}</td>
-            <td>{{ rowData.poblacion }}</td>
-            <!--@for (col of columns; track col.field) {
-              <td>{{ rowData[col.field] }}</td>
-            }-->
-          </tr>
-        </ng-template>
-
-      </byte-table>
-    `
-  }),
-
-  args: {
-    value: ciudades,
-    columns: columnas
-  }
-};
-
-export const Pagination: Story = {
-  render: (args) => ({
-    props: args,
-
-    template: `
-      <byte-table
-        [value]="value"
-        [columns]="columns"
-        [paginator]="paginator"
-        [rows]="rows"
-        [rowsPerPageOptions]="rowsPerPageOptions"
-      >
-
-        <ng-template byteTableHeader let-columns>
-          <tr>
-            @for (col of columns; track col.field) {
-              <th>{{ col.header }}</th>
-            }
-          </tr>
-        </ng-template>
-
-        <ng-template byteTableBody let-rowData let-columns="columns">
-          <tr>
-            @for (col of columns; track col.field) {
-              <td>{{ rowData[col.field] }}</td>
-            }
-          </tr>
-        </ng-template>
-
-      </byte-table>
-    `
-  }),
-
-  args: {
-    value: ciudades,
-    columns: columnas,
-    paginator: true,
-    rows: 2,
-    rowsPerPageOptions: [2, 5, 10]
-  }
-};
-
-export const Selection: Story = {
-  render: (args) => ({
-    props: args,
-
-    template: `
-      <byte-table
-        [value]="value"
-        [columns]="columns"
-        [selectionMode]="selectionMode"
-        [(ngModel)]="selection"
-      >
-
-        <ng-template byteTableHeader let-columns>
-          <tr>
-            <th style="width: 3rem"></th>
-            @for (col of columns; track col.field) {
-              <th>{{ col.header }}</th>
-            }
-          </tr>
-        </ng-template>
-
-        <ng-template byteTableBody let-rowData let-columns="columns">
-          <tr>
-            <td>
-              <p-tableCheckbox [value]="rowData" />
-            </td>
-            @for (col of columns; track col.field) {
-              <td>{{ rowData[col.field] }}</td>
-            }
-          </tr>
-        </ng-template>
-
-      </byte-table>
-    `
-  }),
-
-  args: {
-    value: ciudades,
-    columns: columnas,
-    selectionMode: 'multiple'
-  }
-};
-
-export const CustomBody: Story = {
-  render: (args) => ({
-    props: args,
-
-    template: `
-      <byte-table
-        [value]="value"
-        [columns]="columns"
-      >
-
-        <ng-template byteTableHeader let-columns>
-          <tr>
-            @for (col of columns; track col.field) {
-              <th>{{ col.header }}</th>
-            }
-          </tr>
-        </ng-template>
-
-        <ng-template byteTableBody let-rowData let-columns="columns">
-          <tr>
-            @for (col of columns; track col.field) {
-              <td>
-                @if (col.field === 'poblacion') {
-                  <strong>{{ rowData[col.field] | number }}</strong>
-                } @else {
-                  {{ rowData[col.field] }}
-                }
-              </td>
-            }
-          </tr>
-        </ng-template>
-
-      </byte-table>
-    `
-  }),
-
-  args: {
-    value: ciudades,
-    columns: columnas
-  }
-};
-
-export const AllTemplates: Story = {
-  render: (args) => ({
-    props: args,
-
-    template: `
-      <byte-table
-        [value]="value"
-        [columns]="columns"
-        [paginator]="paginator"
-        [rows]="rows"
-      >
-
-        <ng-template byteTableCaption>
-          <div style="font-weight: bold;">
-            Ciudades del Perú
-          </div>
-        </ng-template>
-
-        <ng-template byteTableHeader let-columns>
-          <tr>
-            @for (col of columns; track col.field) {
-              <th>{{ col.header }}</th>
-            }
-          </tr>
-        </ng-template>
-
-        <ng-template byteTableBody let-rowData let-columns="columns">
-          <tr>
-            @for (col of columns; track col.field) {
-              <td>{{ rowData[col.field] }}</td>
-            }
-          </tr>
-        </ng-template>
-
-        <ng-template byteTableFooter let-columns>
-          <tr>
-            <td [attr.colspan]="columns.length">
-              Total: {{ value.length }} ciudades
-            </td>
-          </tr>
-        </ng-template>
-
-        <ng-template byteTableEmptyMessage>
-          <tr>
-            <td colspan="3">
-              No hay ciudades disponibles
-            </td>
-          </tr>
-        </ng-template>
-
-        <ng-template byteTableSummary>
-          <div>
-            {{ value.length }} registros en total
-          </div>
-        </ng-template>
-
-      </byte-table>
-    `
-  }),
-
-  args: {
-    value: ciudades,
-    columns: columnas,
-    paginator: true,
-    rows: 3
-  }
-};

package/src/lib/components/byte-table/byte-table.ts

@@ -1,162 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ContentChild,
-  forwardRef,
-  Input
-} from '@angular/core';
-
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-
-import { TableModule } from 'primeng/table';
-import { NgTemplateOutlet } from '@angular/common';
-
-import {
-  ByteTableCaptionDirective,
-  ByteTableHeaderDirective,
-  ByteTableBodyDirective,
-  ByteTableFooterDirective,
-  ByteTableEmptyMessageDirective,
-  ByteTableSummaryDirective
-} from './byte-table.directive';
-
-
-@Component({
-  selector: 'byte-table',
-
-  imports: [
-    TableModule,
-
-    NgTemplateOutlet,
-
-    ByteTableCaptionDirective,
-    ByteTableHeaderDirective,
-    ByteTableBodyDirective,
-    ByteTableFooterDirective,
-    ByteTableEmptyMessageDirective,
-    ByteTableSummaryDirective
-  ],
-
-  templateUrl: './byte-table.html',
-
-  styleUrl: './byte-table.css',
-
-  changeDetection: ChangeDetectionStrategy.OnPush,
-
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => ByteTable),
-      multi: true
-    }
-  ]
-})
-export class ByteTable {
-
-  // =====================================================
-  // INPUTS
-  // =====================================================
-
-  @Input()
-  value: any[] = [];
-
-  @Input()
-  columns: any[] = [];
-
-  @Input()
-  paginator = false;
-
-  @Input()
-  rows = 10;
-
-  @Input()
-  rowsPerPageOptions: number[] = [10, 25, 50];
-
-  @Input()
-  loading = false;
-
-  @Input()
-  sortField = '';
-
-  @Input()
-  sortOrder = 1;
-
-  @Input()
-  selectionMode: 'single' | 'multiple' | null = null;
-
-  @Input()
-  dataKey = '';
-
-  @Input()
-  scrollable = false;
-
-  @Input()
-  tableStyle: { [klass: string]: any } | null = null;
-
-
-  // =====================================================
-  // CUSTOM TEMPLATES
-  // =====================================================
-
-  @ContentChild(ByteTableCaptionDirective)
-  captionTemplate?: ByteTableCaptionDirective;
-
-  @ContentChild(ByteTableHeaderDirective)
-  headerTemplate?: ByteTableHeaderDirective;
-
-  @ContentChild(ByteTableBodyDirective)
-  bodyTemplate?: ByteTableBodyDirective;
-
-  @ContentChild(ByteTableFooterDirective)
-  footerTemplate?: ByteTableFooterDirective;
-
-  @ContentChild(ByteTableEmptyMessageDirective)
-  emptyMessageTemplate?: ByteTableEmptyMessageDirective;
-
-  @ContentChild(ByteTableSummaryDirective)
-  summaryTemplate?: ByteTableSummaryDirective;
-
-
-  // =====================================================
-  // SELECTION (CVA)
-  // =====================================================
-
-  selection: any = null;
-
-  private onChange: (value: any) => void = () => {};
-
-  private onTouched: () => void = () => {};
-
-
-  writeValue(value: any): void {
-    this.selection = value;
-  }
-
-
-  registerOnChange(fn: (value: any) => void): void {
-    this.onChange = fn;
-  }
-
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-
-  setDisabledState(isDisabled: boolean): void {
-    // p-table no tiene un "disabled" nativo global; se puede usar
-    // para deshabilitar selección si lo necesitas más adelante.
-  }
-
-
-  onSelectionChange(value: any): void {
-
-    this.selection = value;
-
-    this.onChange(value);
-
-    this.onTouched();
-
-  }
-
-}

package/src/lib/components/calendar/calendar.css

@@ -1,16 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-}
-
-:host ::ng-deep .p-inputtext,
-:host ::ng-deep .p-inputnumber,
-:host ::ng-deep .p-textarea,
-:host ::ng-deep .p-datepicker,
-:host ::ng-deep .p-select {
-  width: 100%;
-}
-
-:host ::ng-deep .p-inputnumber-input {
-  width: 100%;
-}

package/src/lib/components/calendar/calendar.html

@@ -1,15 +0,0 @@
-<p-datepicker
-  [(ngModel)]="value"
-  [dateFormat]="dateFormat"
-  [placeholder]="placeholder"
-  [showIcon]="showIcon"
-  [disabled]="disabled"
-  [minDate]="minDate"
-  [maxDate]="maxDate"
-  [readonlyInput]="readonlyInput"
-  [showClear]="showClear"
-  [inputId]="inputId"
-  [name]="name"
-  (ngModelChange)="onValueChange($event)"
-  appendTo="body"
-/>

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

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

package/src/lib/components/calendar/calendar.stories.ts

@@ -1,153 +0,0 @@
-import { applicationConfig, type Meta, type StoryObj } from '@storybook/angular';
-
-import { Calendar } from './calendar';
-import { provideEmpresaUI } from './../../providers/provide-empresa-ui';
-
-const meta: Meta<Calendar> = {
-  title: 'Components/ByteCalendar',
-  component: Calendar,
-
-  decorators: [
-    (story, context) =>
-      applicationConfig({
-        providers: [
-          provideEmpresaUI({
-            theme: context.globals['theme'],
-          }),
-        ],
-      })(story, context),
-  ],
-
-  tags: ['autodocs'],
-
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Componente de calendario reutilizable basado en PrimeNG. Compatible con formularios mediante ControlValueAccessor.',
-      },
-    },
-  },
-
-  argTypes: {
-    dateFormat: {
-      control: 'text',
-      description: 'Formato utilizado para mostrar la fecha.',
-      table: {
-        defaultValue: { summary: 'dd/mm/yy' },
-      },
-    },
-
-    placeholder: {
-      control: 'text',
-      description: 'Texto mostrado cuando no se ha seleccionado una fecha.',
-      table: {
-        defaultValue: { summary: 'dd/mm/yyyy' },
-      },
-    },
-
-    showIcon: {
-      control: 'boolean',
-      description: 'Muestra u oculta el icono del calendario.',
-    },
-
-    disabled: {
-      control: 'boolean',
-      description: 'Deshabilita el calendario.',
-    },
-
-    minDate: {
-      control: 'date',
-      description: 'Fecha mínima que puede seleccionarse.',
-    },
-
-    maxDate: {
-      control: 'date',
-      description: 'Fecha máxima que puede seleccionarse.',
-    },
-
-    readonlyInput: {
-      control: 'boolean',
-      description: 'Impide escribir directamente en el input.',
-    },
-
-    showClear: {
-      control: 'boolean',
-      description: 'Muestra el botón para limpiar la fecha.',
-    },
-
-    inputId: {
-      control: 'text',
-      description: 'Identificador del input.',
-    },
-
-    name: {
-      control: 'text',
-      description: 'Nombre del campo.',
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<Calendar>;
-
-export const Default: Story = {
-  args: {
-    dateFormat: 'dd/mm/yy',
-    placeholder: 'dd/mm/yyyy',
-    showIcon: true,
-    disabled: false,
-    readonlyInput: false,
-    showClear: false,
-  },
-};
-
-export const WithDate: Story = {
-  args: {
-    dateFormat: 'dd/mm/yy',
-    placeholder: 'dd/mm/yyyy',
-    showIcon: true,
-    value: new Date(),
-  },
-};
-
-export const WithoutIcon: Story = {
-  args: {
-    placeholder: 'Seleccione una fecha',
-    showIcon: false,
-  },
-};
-
-export const WithClear: Story = {
-  args: {
-    placeholder: 'Seleccione una fecha',
-    showIcon: true,
-    showClear: true,
-  },
-};
-
-export const Readonly: Story = {
-  args: {
-    placeholder: 'Seleccione una fecha',
-    showIcon: true,
-    readonlyInput: false,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    placeholder: 'Seleccione una fecha',
-    showIcon: true,
-    disabled: true,
-  },
-};
-
-export const DateRange: Story = {
-  args: {
-    placeholder: 'Seleccione una fecha',
-    showIcon: true,
-    minDate: new Date(2026, 0, 1),
-    maxDate: new Date(2026, 11, 31),
-  },
-};