@4byte/shared-lib 0.0.1 → 0.0.3

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

@@ -1,121 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ContentChild,
-  EventEmitter,
-  Input,
-  Output
-} from '@angular/core';
-
-import { NgTemplateOutlet } from '@angular/common';
-
-import { DialogModule } from 'primeng/dialog';
-
-import {
-  ByteDialogHeaderDirective,
-  ByteDialogFooterDirective
-} from './byte-dialog.directive';
-
-
-@Component({
-  selector: 'byte-dialog',
-
-  imports: [
-    DialogModule,
-
-    NgTemplateOutlet,
-
-    ByteDialogHeaderDirective,
-    ByteDialogFooterDirective
-  ],
-
-  templateUrl: './byte-dialog.html',
-
-  styleUrl: './byte-dialog.css',
-
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ByteDialog {
-
-  // =====================================================
-  // INPUTS
-  // =====================================================
-
-  @Input()
-  visible = false;
-
-  @Input()
-  header = '';
-
-  @Input()
-  modal = true;
-
-  @Input()
-  closable = true;
-
-  @Input()
-  draggable = true;
-
-  @Input()
-  resizable = false;
-
-  @Input()
-  dismissableMask = false;
-
-  @Input()
-  closeOnEscape = true;
-
-  @Input()
-  maximizable = false;
-
-  @Input()
-  blockScroll = true;
-
-  @Input()
-  position: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright' = 'center';
-
-  @Input()
-  style: { [klass: string]: any } | null = null;
-
-  @Input()
-  styleClass = '';
-
-  @Input()
-  contentStyle: { [klass: string]: any } | null = null;
-
-  @Input()
-  breakpoints: { [key: string]: string } | null = null;
-
-
-  // =====================================================
-  // OUTPUTS
-  // =====================================================
-
-  @Output()
-  visibleChange = new EventEmitter<boolean>();
-
-
-  // =====================================================
-  // CUSTOM TEMPLATES
-  // =====================================================
-
-  @ContentChild(ByteDialogHeaderDirective)
-  headerTemplate?: ByteDialogHeaderDirective;
-
-  @ContentChild(ByteDialogFooterDirective)
-  footerTemplate?: ByteDialogFooterDirective;
-
-
-  // =====================================================
-  // CHANGE
-  // =====================================================
-
-  onVisibleChange(value: boolean): void {
-
-    this.visible = value;
-
-    this.visibleChange.emit(value);
-
-  }
-
-}

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

@@ -1,215 +0,0 @@
-import {
-  applicationConfig,
-  moduleMetadata,
-  type Meta,
-  type StoryObj
-} from '@storybook/angular';
-
-import { ByteDialog } from './byte-dialog';
-import { ByteDialogModule } from './byte-dialog.module';
-
-import { provideEmpresaUI } from './../../providers/provide-empresa-ui';
-import { ByteButtonModule } from '../byte-button/byte-button.module';
-
-const meta: Meta<ByteDialog> = {
-  title: 'Components/ByteDialog',
-  component: ByteDialog,
-
-  decorators: [
-    moduleMetadata({
-      imports: [
-        ByteDialogModule,
-        ByteButtonModule
-      ]
-    }),
-
-    (story, context) =>
-      applicationConfig({
-        providers: [
-          provideEmpresaUI({
-            theme: context.globals['theme']
-          })
-        ]
-      })(story, context)
-  ],
-
-  tags: ['autodocs'],
-
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Componente de diálogo modal reutilizable, basado en PrimeNG y compatible con templates personalizados de header y footer.'
-      }
-    }
-  }
-};
-
-export default meta;
-
-type Story = StoryObj<ByteDialog>;
-
-export const Normal: Story = {
-  render: (args) => ({
-    props: {
-      ...args,
-      visible: false,
-      abrir(this: any) {
-        this.visible = true;
-      },
-    },
-
-    template: `
-      <byte-button (click)="abrir()" label="Abrir diálogo"></byte-button>
-
-      <byte-dialog
-        [(visible)]="visible"
-        [header]="header"
-        [modal]="modal"
-      >
-        <p>Este es el contenido del diálogo.</p>
-      </byte-dialog>
-    `
-  }),
-
-  args: {
-    header: 'Título del diálogo',
-    modal: true
-  }
-};
-
-export const NonModal: Story = {
-  render: (args) => ({
-    props: {
-      ...args,
-      visible: false,
-      abrir(this: any) {
-        this.visible = true;
-      }
-    },
-
-    template: `
-      <byte-button (click)="abrir()" label="Abrir diálogo"></byte-button>
-
-      <byte-dialog
-        [(visible)]="visible"
-        [header]="header"
-        [modal]="modal"
-        [dismissableMask]="dismissableMask"
-      >
-        <p>Este diálogo no bloquea la interacción con el resto de la página.</p>
-      </byte-dialog>
-    `
-  }),
-
-  args: {
-    header: 'Diálogo no modal',
-    modal: false,
-    dismissableMask: false
-  }
-};
-
-export const Maximizable: Story = {
-  render: (args) => ({
-    props: {
-      ...args,
-      visible: false,
-      abrir(this: any) {
-        this.visible = true;
-      }
-    },
-
-    template: `
-      <byte-button (click)="abrir()" label="Abrir diálogo"></byte-button>
-
-      <byte-dialog
-        [(visible)]="visible"
-        [header]="header"
-        [modal]="modal"
-        [maximizable]="maximizable"
-      >
-        <p>Este diálogo se puede maximizar con el ícono en la cabecera.</p>
-      </byte-dialog>
-    `
-  }),
-
-  args: {
-    header: 'Diálogo maximizable',
-    modal: true,
-    maximizable: true
-  }
-};
-
-export const WithFooterActions: Story = {
-  render: (args) => ({
-    props: {
-      ...args,
-      visible: false,
-      abrir(this: any) {
-        this.visible = true;
-      },
-      cerrar(this: any) {
-        this.visible = false;
-      }
-    },
-
-    template: `
-      <byte-button (click)="abrir()" label="Eliminar registro"></byte-button>
-
-      <byte-dialog
-        [(visible)]="visible"
-        [header]="header"
-        [modal]="modal"
-      >
-        <p>¿Estás seguro de que deseas eliminar este registro? Esta acción no se puede deshacer.</p>
-
-        <ng-template byteDialogFooter>
-          <byte-button (click)="cerrar()" label="Cancelar" severity="warn"></byte-button>
-          <byte-button (click)="cerrar()" style="font-weight: bold;" label="Eliminar" severity="danger"></byte-button>
-        </ng-template>
-      </byte-dialog>
-    `
-  }),
-
-  args: {
-    header: 'Confirmar eliminación',
-    modal: true
-  }
-};
-
-export const CustomHeader: Story = {
-  render: (args) => ({
-    props: {
-      ...args,
-      visible: false,
-      abrir(this: any) {
-        this.visible = true;
-      }
-    },
-
-    template: `
-      <byte-button (click)="abrir()" label="Abrir diálogo"></byte-button>
-
-      <byte-dialog
-        [(visible)]="visible"
-        [modal]="modal"
-      >
-        <ng-template byteDialogHeader>
-          <div style="display: flex; align-items: center; gap: 8px;">
-            <strong>⚠️ Atención</strong>
-          </div>
-        </ng-template>
-
-        <p>Contenido con encabezado personalizado.</p>
-
-        <ng-template byteDialogFooter>
-          <byte-button (click)="visible = false" label="Entendido"></byte-button>
-        </ng-template>
-      </byte-dialog>
-    `
-  }),
-
-  args: {
-    modal: true
-  }
-};

package/src/lib/components/byte-input/byte-input.css

@@ -1,29 +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%;
-}
-
-.byte-input-label{
-  display: block;
-  margin-bottom: 0.5rem;
-  font-size: 0.88rem;
-}
-
-.byte-input-error {
-  display: block;
-  margin-top: 0.5rem;
-  font-size: 0.70rem;
-  color: var(--p-red-500, #ef4444);
-}

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

@@ -1,58 +0,0 @@
-@if (label) {
-  <label [for]="inputId" class="byte-input-label">
-    {{ label }}
-
-    @if (required) {
-      <span>*</span>
-    }
-  </label>
-}
-
-@if (typeInput === 'text') {
-
-  <input
-    pInputText
-    [id]="inputId"
-    [name]="name"
-    [placeholder]="placeholder"
-    [disabled]="disabled"
-    [required]="required"
-    [ngModel]="value"
-    (ngModelChange)="onValueChange($event)"
-  />
-
-} @else if (typeInput === 'number') {
-
-  <p-inputnumber
-    [inputId]="inputId"
-    [name]="name"
-    [placeholder]="placeholder"
-    [disabled]="disabled"
-    [min]="min"
-    [max]="max"
-    [step]="step"
-    [ngModel]="value"
-    (ngModelChange)="onValueChange($event)"
-  />
-
-} @else if (typeInput === 'area') {
-
-  <textarea
-    pTextarea
-    [id]="inputId"
-    [name]="name"
-    [placeholder]="placeholder"
-    [disabled]="disabled"
-    [required]="required"
-    [rows]="rows"
-    [ngModel]="value"
-    (ngModelChange)="onValueChange($event)"
-  ></textarea>
-
-}
-
-@if (error) {
-  <small class="byte-input-error">
-    {{ error }}
-  </small>
-}

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

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

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

@@ -1,60 +0,0 @@
-import { applicationConfig, type Meta, type StoryObj } from '@storybook/angular';
-
-import { ByteInput } from './byte-input';
-
-import {provideEmpresaUI} from './../../providers/provide-empresa-ui';
-
-const meta: Meta<ByteInput> = {
-  title: 'Components/ByteInput',
-  component: ByteInput,
-  decorators: [
-    (story, context) => applicationConfig({
-      providers: [
-        provideEmpresaUI({
-          theme: context.globals['theme']
-        })
-      ]
-    })(story, context)
-  ],
-  tags: ['autodocs'],
-
-    parameters: {
-      forceRemount: true,
-      docs: {
-        description: {
-          component: `Componente de entrada para formularios.`
-        }
-      }
-    }
-};
-
-export default meta;
-
-type Story = StoryObj<ByteInput>;
-
-export const Text: Story = {
-    args:{
-        typeInput: 'text'
-    }
-};
-
-export const Number: Story = {
-    args:{
-        typeInput: 'number'
-    }
-};
-
-export const Area: Story = {
-    args:{
-        typeInput: 'area'
-    }
-};
-
-export const Forms: Story = {
-    args:{
-      typeInput: 'text',
-      label: 'Ingrese nombre',
-      error: 'Error al escribir el nombre',
-      inputId: 'name'
-    }
-};

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

@@ -1,97 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  forwardRef,
-  Input
-} from '@angular/core';
-
-import {
-  ControlValueAccessor,
-  FormsModule,
-  NG_VALUE_ACCESSOR
-} from '@angular/forms';
-
-import { InputNumberModule } from 'primeng/inputnumber';
-import { InputTextModule } from 'primeng/inputtext';
-import { TextareaModule } from 'primeng/textarea';
-
-export type InputType = 'text' | 'number' | 'area';
-
-@Component({
-  selector: 'byte-input',
-  standalone: true,
-  imports: [
-    FormsModule,
-    InputTextModule,
-    InputNumberModule,
-    TextareaModule
-  ],
-  templateUrl: './byte-input.html',
-  styleUrl: './byte-input.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => ByteInput),
-      multi: true
-    }
-  ]
-})
-export class ByteInput implements ControlValueAccessor {
-
-  @Input() typeInput: InputType = 'text';
-
-  @Input() label = '';
-
-  @Input() error = '';
-
-  @Input() placeholder = '';
-
-  @Input() disabled = false;
-
-  @Input() required = false;
-
-  @Input() inputId = '';
-
-  @Input() name = '';
-
-  @Input() rows = 3;
-
-  @Input() min?: number;
-
-  @Input() max?: number;
-
-  @Input() step = 1;
-
-  value: string | number | null = null;
-
-  private onChange: (value: string | number | null) => void = () => {};
-
-  private onTouched: () => void = () => {};
-
-  writeValue(value: string | number | null): void {
-    this.value = value;
-  }
-
-  registerOnChange(
-    fn: (value: string | number | null) => void
-  ): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-
-  onValueChange(value: string | number | null): void {
-    this.value = value;
-
-    this.onChange(value);
-    this.onTouched();
-  }
-}

package/src/lib/components/byte-select/byte-select.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/byte-select/byte-select.directive.ts

@@ -1,61 +0,0 @@
-import { Directive, TemplateRef } from '@angular/core';
-
-@Directive({
-  selector: 'ng-template[byteSelectSelectedItem]',
-  standalone: true
-})
-export class ByteSelectSelectedItemDirective {
-  constructor(
-    public template: TemplateRef<any>
-  ) {}
-}
-
-@Directive({
-  selector: 'ng-template[byteSelectItem]',
-  standalone: true
-})
-export class ByteSelectItemDirective {
-  constructor(
-    public template: TemplateRef<any>
-  ) {}
-}
-
-@Directive({
-  selector: 'ng-template[byteSelectHeader]',
-  standalone: true
-})
-export class ByteSelectHeaderDirective {
-  constructor(
-    public template: TemplateRef<any>
-  ) {}
-}
-
-@Directive({
-  selector: 'ng-template[byteSelectFooter]',
-  standalone: true
-})
-export class ByteSelectFooterDirective {
-  constructor(
-    public template: TemplateRef<any>
-  ) {}
-}
-
-@Directive({
-  selector: 'ng-template[byteSelectEmpty]',
-  standalone: true
-})
-export class ByteSelectEmptyDirective {
-  constructor(
-    public template: TemplateRef<any>
-  ) {}
-}
-
-@Directive({
-  selector: 'ng-template[byteSelectEmptyFilter]',
-  standalone: true
-})
-export class ByteSelectEmptyFilterDirective {
-  constructor(
-    public template: TemplateRef<any>
-  ) {}
-}