@4byte/shared-lib 0.0.1 → 0.0.2

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

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

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

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

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

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

@@ -1,22 +0,0 @@
-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();
-  });
-});