@4byte/shared-lib 0.0.1

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

@@ -0,0 +1,190 @@
+import {
+  applicationConfig,
+  moduleMetadata,
+  type Meta,
+  type StoryObj
+} from '@storybook/angular';
+
+import { ByteSidebar } from './byte-sidebar';
+import { ByteSidebarModule } from './byte-sidebar.module';
+
+import { provideEmpresaUI } from './../../providers/provide-empresa-ui';
+import { ByteButton } from '../byte-button/byte-button';
+
+const meta: Meta<ByteSidebar> = {
+  title: 'Components/ByteSidebar',
+  component: ByteSidebar,
+
+  decorators: [
+    moduleMetadata({
+      imports: [
+        ByteButton,
+        ByteSidebarModule
+      ]
+    }),
+
+    (story, context) =>
+      applicationConfig({
+        providers: [
+          provideEmpresaUI({
+            theme: context.globals['theme']
+          })
+        ]
+      })(story, context)
+  ],
+
+  tags: ['autodocs'],
+
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Panel lateral desplegable (overlay), basado en PrimeNG y compatible con un template personalizado de header.'
+      }
+    }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<ByteSidebar>;
+
+export const Normal: Story = {
+  render: (args) => ({
+    props: {
+      ...args,
+      visible: false
+    },
+
+    template: `
+      <byte-button (click)="visible = true" label="Abrir sidebar"></byte-button>
+
+      <byte-sidebar
+        [(visible)]="visible"
+        [position]="position"
+      >
+        <h3>Contenido del sidebar</h3>
+        <p>Aquí va lo que necesites mostrar dentro del panel.</p>
+      </byte-sidebar>
+    `
+  }),
+
+  args: {
+    position: 'left'
+  }
+};
+
+export const Right: Story = {
+  render: (args) => ({
+    props: {
+      ...args,
+      visible: false
+    },
+
+    template: `
+      <byte-button (click)="visible = true" label="Abrir desde la derecha"></byte-button>
+
+      <byte-sidebar
+        [(visible)]="visible"
+        [position]="position"
+      >
+        <h3>Panel derecho</h3>
+        <p>Ideal para filtros o detalles contextuales.</p>
+      </byte-sidebar>
+    `
+  }),
+
+  args: {
+    position: 'right'
+  }
+};
+
+export const TopBottom: Story = {
+  render: (args) => ({
+    props: {
+      ...args,
+      visibleTop: false,
+      visibleBottom: false
+    },
+
+    template: `
+      <div style="display:flex; gap:10px">
+        <byte-button (click)="visibleTop = true" label="Abrir arriba"></byte-button>
+        <byte-button (click)="visibleBottom = true" label="Abrir abajo"></byte-button>
+      </div>
+
+      <byte-sidebar
+        [(visible)]="visibleTop"
+        position="top"
+      >
+        <p>Sidebar desde arriba.</p>
+      </byte-sidebar>
+
+      <byte-sidebar
+        [(visible)]="visibleBottom"
+        position="bottom"
+      >
+        <p>Sidebar desde abajo.</p>
+      </byte-sidebar>
+    `
+  }),
+
+  args: {}
+};
+
+export const NonModal: Story = {
+  render: (args) => ({
+    props: {
+      ...args,
+      visible: false
+    },
+
+    template: `
+      <byte-button (click)="visible = true" label="Abrir sidebar no modal"></byte-button>
+
+      <byte-sidebar
+        [(visible)]="visible"
+        [position]="position"
+        [modal]="modal"
+      >
+        <h3>Sidebar no modal</h3>
+        <p>No bloquea la interacción con el resto de la página.</p>
+      </byte-sidebar>
+    `
+  }),
+
+  args: {
+    position: 'left',
+    modal: false
+  }
+};
+
+export const CustomHeader: Story = {
+  render: (args) => ({
+    props: {
+      ...args,
+      visible: false
+    },
+
+    template: `
+      <byte-button (click)="visible = true" label="Abrir sidebar"></byte-button>
+
+      <byte-sidebar
+        [(visible)]="visible"
+        [position]="position"
+      >
+        <ng-template byteSidebarHeader>
+          <div style="display: flex; align-items: center; gap: 8px;">
+            <strong>⚙️ Configuración</strong>
+          </div>
+        </ng-template>
+
+        <p>Contenido con encabezado personalizado.</p>
+      </byte-sidebar>
+    `
+  }),
+
+  args: {
+    position: 'right'
+  }
+};

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

@@ -0,0 +1,108 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  EventEmitter,
+  Input,
+  Output
+} from '@angular/core';
+
+import { NgTemplateOutlet } from '@angular/common';
+
+import { DrawerModule } from 'primeng/drawer';
+
+import { ByteSidebarHeaderDirective } from './byte-sidebar.directive';
+
+
+@Component({
+  selector: 'byte-sidebar',
+
+  imports: [
+    DrawerModule,
+
+    NgTemplateOutlet,
+
+    ByteSidebarHeaderDirective
+  ],
+
+  templateUrl: './byte-sidebar.html',
+
+  styleUrl: './byte-sidebar.css',
+
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ByteSidebar {
+
+  constructor(private cdRef: ChangeDetectorRef) {}
+
+
+  // =====================================================
+  // INPUTS
+  // =====================================================
+
+  @Input()
+  visible = false;
+
+  @Input()
+  position: 'left' | 'right' | 'top' | 'bottom' | 'full' = 'left';
+
+  @Input()
+  modal = true;
+
+  @Input()
+  dismissible = true;
+
+  @Input()
+  closeOnEscape = true;
+
+  @Input()
+  showCloseIcon = true;
+
+  @Input()
+  blockScroll = false;
+
+  @Input()
+  style: { [klass: string]: any } | null = null;
+
+  @Input()
+  styleClass = '';
+
+  @Input()
+  autoZIndex = true;
+
+  @Input()
+  baseZIndex = 0;
+
+
+  // =====================================================
+  // OUTPUTS
+  // =====================================================
+
+  @Output()
+  visibleChange = new EventEmitter<boolean>();
+
+
+  // =====================================================
+  // CUSTOM TEMPLATES
+  // =====================================================
+
+  @ContentChild(ByteSidebarHeaderDirective)
+  headerTemplate?: ByteSidebarHeaderDirective;
+
+
+  // =====================================================
+  // CHANGE
+  // =====================================================
+
+  onVisibleChange(value: boolean): void {
+
+    this.visible = value;
+
+    this.visibleChange.emit(value);
+
+    this.cdRef.markForCheck();
+
+  }
+
+}

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

@@ -0,0 +1,49 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: 'ng-template[byteTableCaption]',
+  standalone: true
+})
+export class ByteTableCaptionDirective {
+  constructor(public template: TemplateRef<any>) {}
+}
+
+@Directive({
+  selector: 'ng-template[byteTableHeader]',
+  standalone: true
+})
+export class ByteTableHeaderDirective {
+  constructor(public template: TemplateRef<any>) {}
+}
+
+@Directive({
+  selector: 'ng-template[byteTableBody]',
+  standalone: true
+})
+export class ByteTableBodyDirective {
+  constructor(public template: TemplateRef<any>) {}
+}
+
+@Directive({
+  selector: 'ng-template[byteTableFooter]',
+  standalone: true
+})
+export class ByteTableFooterDirective {
+  constructor(public template: TemplateRef<any>) {}
+}
+
+@Directive({
+  selector: 'ng-template[byteTableEmptyMessage]',
+  standalone: true
+})
+export class ByteTableEmptyMessageDirective {
+  constructor(public template: TemplateRef<any>) {}
+}
+
+@Directive({
+  selector: 'ng-template[byteTableSummary]',
+  standalone: true
+})
+export class ByteTableSummaryDirective {
+  constructor(public template: TemplateRef<any>) {}
+}

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

@@ -0,0 +1,102 @@
+<p-table
+  [value]="value"
+  [columns]="columns"
+  [paginator]="paginator"
+  [rows]="rows"
+  [rowsPerPageOptions]="rowsPerPageOptions"
+  [loading]="loading"
+  [sortField]="sortField"
+  [sortOrder]="sortOrder"
+  [selectionMode]="selectionMode"
+  [(selection)]="selection"
+  (selectionChange)="onSelectionChange($event)"
+  [dataKey]="dataKey"
+  [scrollable]="scrollable"
+  [tableStyle]="tableStyle"
+>
+
+  @if (captionTemplate) {
+
+    <ng-template pTemplate="caption">
+
+      <ng-container [ngTemplateOutlet]="captionTemplate.template" />
+
+    </ng-template>
+
+  }
+
+  @if (headerTemplate) {
+
+    <ng-template
+      pTemplate="header"
+      let-columns
+    >
+
+      <ng-container
+        [ngTemplateOutlet]="headerTemplate.template"
+        [ngTemplateOutletContext]="{ $implicit: columns }"
+      />
+
+    </ng-template>
+
+  }
+
+  @if (bodyTemplate) {
+
+    <ng-template
+      pTemplate="body"
+      let-rowData
+      let-columns="columns"
+      let-rowIndex="rowIndex"
+    >
+
+      <ng-container
+        [ngTemplateOutlet]="bodyTemplate.template"
+        [ngTemplateOutletContext]="{
+          $implicit: rowData,
+          columns: columns,
+          rowIndex: rowIndex
+        }"
+      />
+
+    </ng-template>
+
+  }
+
+  @if (footerTemplate) {
+
+    <ng-template
+      pTemplate="footer"
+      let-columns
+    >
+
+      <ng-container
+        [ngTemplateOutlet]="footerTemplate.template"
+        [ngTemplateOutletContext]="{ $implicit: columns }"
+      />
+
+    </ng-template>
+
+  }
+
+  @if (emptyMessageTemplate) {
+
+    <ng-template pTemplate="emptymessage">
+
+      <ng-container [ngTemplateOutlet]="emptyMessageTemplate.template" />
+
+    </ng-template>
+
+  }
+
+  @if (summaryTemplate) {
+
+    <ng-template pTemplate="summary">
+
+      <ng-container [ngTemplateOutlet]="summaryTemplate.template" />
+
+    </ng-template>
+
+  }
+
+</p-table>

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

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+
+import { ByteTable } from './byte-table';
+import {
+  ByteTableCaptionDirective,
+  ByteTableHeaderDirective,
+  ByteTableBodyDirective,
+  ByteTableFooterDirective,
+  ByteTableEmptyMessageDirective,
+  ByteTableSummaryDirective
+} from './byte-table.directive';
+
+@NgModule({
+  imports: [
+    ByteTable,
+    ByteTableCaptionDirective,
+    ByteTableHeaderDirective,
+    ByteTableBodyDirective,
+    ByteTableFooterDirective,
+    ByteTableEmptyMessageDirective,
+    ByteTableSummaryDirective
+  ],
+  exports: [
+    ByteTable,
+    ByteTableCaptionDirective,
+    ByteTableHeaderDirective,
+    ByteTableBodyDirective,
+    ByteTableFooterDirective,
+    ByteTableEmptyMessageDirective,
+    ByteTableSummaryDirective
+  ]
+})
+export class ByteTableModule {}

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

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