@4byte/shared-lib 0.0.1

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,61 @@
+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>
+  ) {}
+}