@4byte/shared-lib 0.0.1

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

@@ -0,0 +1,101 @@
+<p-select
+  [options]="options"
+  [optionLabel]="optionLabel"
+  [optionValue]="optionValue"
+  [placeholder]="placeholder"
+  [disabled]="disabled"
+  [inputId]="inputId"
+  [name]="name"
+  [filter]="filter"
+  [filterBy]="filterBy"
+  [showClear]="showClear"
+  [ngModel]="value"
+  (ngModelChange)="onValueChange($event)"
+  appendTo="body"
+>
+
+  @if (selectedItemTemplate) {
+
+    <ng-template
+      pTemplate="selectedItem"
+      let-selectedOption
+    >
+
+      <ng-container
+        [ngTemplateOutlet]="selectedItemTemplate.template"
+        [ngTemplateOutletContext]="{
+          $implicit: selectedOption
+        }"
+      />
+
+    </ng-template>
+
+  }
+
+  @if (itemTemplate) {
+
+    <ng-template
+      pTemplate="item"
+      let-option
+    >
+
+      <ng-container
+        [ngTemplateOutlet]="itemTemplate.template"
+        [ngTemplateOutletContext]="{
+          $implicit: option
+        }"
+      />
+
+    </ng-template>
+
+  }
+
+  @if (headerTemplate) {
+
+    <ng-template pTemplate="header">
+
+      <ng-container
+        [ngTemplateOutlet]="headerTemplate.template"
+      />
+
+    </ng-template>
+
+  }
+
+  @if (footerTemplate) {
+
+    <ng-template pTemplate="footer">
+
+      <ng-container
+        [ngTemplateOutlet]="footerTemplate.template"
+      />
+
+    </ng-template>
+
+  }
+
+  @if (emptyTemplate) {
+
+    <ng-template pTemplate="empty">
+
+      <ng-container
+        [ngTemplateOutlet]="emptyTemplate.template"
+      />
+
+    </ng-template>
+
+  } 
+
+  @if (emptyFilterTemplate) {
+
+    <ng-template pTemplate="emptyfilter">
+
+      <ng-container
+        [ngTemplateOutlet]="emptyFilterTemplate.template"
+      />
+
+    </ng-template>
+
+  }
+
+</p-select>

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

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+
+import { ByteSelect } from './byte-select';
+import { ByteSelectEmptyDirective, ByteSelectEmptyFilterDirective, ByteSelectFooterDirective, ByteSelectHeaderDirective, ByteSelectItemDirective, ByteSelectSelectedItemDirective } from './byte-select.directive';
+
+@NgModule({
+  imports: [
+    ByteSelect,
+    ByteSelectEmptyDirective,
+    ByteSelectEmptyFilterDirective,
+    ByteSelectFooterDirective,
+    ByteSelectHeaderDirective,
+    ByteSelectItemDirective,
+    ByteSelectSelectedItemDirective
+  ],
+  exports: [
+    ByteSelect,
+    ByteSelectEmptyDirective,
+    ByteSelectEmptyFilterDirective,
+    ByteSelectFooterDirective,
+    ByteSelectHeaderDirective,
+    ByteSelectItemDirective,
+    ByteSelectSelectedItemDirective
+  ]
+})
+export class ByteSelectModule {}

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

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

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

@@ -0,0 +1,194 @@
+import {
+  applicationConfig,
+  moduleMetadata,
+  type Meta,
+  type StoryObj
+} from '@storybook/angular';
+
+import { ByteSelect } from './byte-select';
+import { ByteSelectModule } from './byte-select.module';
+
+import { provideEmpresaUI } from './../../providers/provide-empresa-ui';
+
+const meta: Meta<ByteSelect> = {
+  title: 'Components/ByteSelect',
+  component: ByteSelect,
+
+  decorators: [
+    moduleMetadata({
+      imports: [
+        ByteSelectModule
+      ]
+    }),
+
+    (story, context) =>
+      applicationConfig({
+        providers: [
+          provideEmpresaUI({
+            theme: context.globals['theme']
+          })
+        ]
+      })(story, context)
+  ],
+
+  tags: ['autodocs'],
+
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Componente de selección reutilizable para formularios, basado en PrimeNG y compatible con templates personalizados.'
+      }
+    }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<ByteSelect>;
+
+export const Normal: Story = {
+  args: {
+    options: [
+      { name: 'Lima', code: 'LIM' },
+      { name: 'Arequipa', code: 'AQP' },
+      { name: 'Cusco', code: 'CUS' },
+      { name: 'Trujillo', code: 'TRU' }
+    ],
+    optionLabel: 'name',
+    optionValue: 'code',
+    placeholder: 'Seleccione una ciudad'
+  }
+};
+
+export const Filter: Story = {
+  args: {
+    options: [
+      { name: 'Lima', code: 'LIM' },
+      { name: 'Arequipa', code: 'AQP' },
+      { name: 'Cusco', code: 'CUS' },
+      { name: 'Trujillo', code: 'TRU' },
+      { name: 'Piura', code: 'PIU' }
+    ],
+    optionLabel: 'name',
+    optionValue: 'code',
+    placeholder: 'Seleccione una ciudad',
+    filter: true,
+    filterBy: 'name'
+  }
+};
+
+export const CustomItem: Story = {
+  render: (args) => ({
+    props: args,
+
+    template: `
+      <byte-select
+        [options]="options"
+        [optionLabel]="optionLabel"
+        [optionValue]="optionValue"
+        [placeholder]="placeholder"
+      >
+
+        <ng-template
+          byteSelectItem
+          let-option
+        >
+          <div>
+            <strong>{{ option.name }}</strong>
+            <small style="display: block;">
+              Código: {{ option.code }}
+            </small>
+          </div>
+        </ng-template>
+
+      </byte-select>
+    `
+  }),
+
+  args: {
+    options: [
+      { name: 'Lima', code: 'LIM' },
+      { name: 'Arequipa', code: 'AQP' },
+      { name: 'Cusco', code: 'CUS' }
+    ],
+    optionLabel: 'name',
+    optionValue: 'code',
+    placeholder: 'Seleccione una ciudad'
+  }
+};
+
+export const AllTemplates: Story = {
+  render: (args) => ({
+    props: args,
+
+    template: `
+      <byte-select
+        [options]="options"
+        [optionLabel]="optionLabel"
+        [optionValue]="optionValue"
+        [placeholder]="placeholder"
+        [filter]="filter"
+        [filterBy]="filterBy"
+        [showClear]="showClear"
+      >
+
+        <ng-template byteSelectSelectedItem let-option>
+          @if (option) {
+            <span>📍 {{ option.name }}</span>
+          }
+        </ng-template>
+
+        <ng-template byteSelectItem let-option>
+          <div>
+            <strong>{{ option.name }}</strong>
+            <small style="display: block;">
+              Código: {{ option.code }}
+            </small>
+          </div>
+        </ng-template>
+
+        <ng-template byteSelectHeader>
+          <div style="padding: 8px; font-weight: bold;">
+            Seleccione una ciudad
+          </div>
+        </ng-template>
+
+        <ng-template byteSelectFooter>
+          <div style="padding: 8px;">
+            {{ options.length }} ciudades disponibles
+          </div>
+        </ng-template>
+
+        <ng-template byteSelectEmpty>
+          <div style="padding: 10px;">
+            No hay ciudades disponibles
+          </div>
+        </ng-template>
+
+        <ng-template byteSelectEmptyFilter>
+          <div style="padding: 10px;">
+            No se encontraron resultados
+          </div>
+        </ng-template>
+
+      </byte-select>
+    `
+  }),
+
+  args: {
+    options: [
+      { name: 'Lima', code: 'LIM' },
+      { name: 'Arequipa', code: 'AQP' },
+      { name: 'Cusco', code: 'CUS' },
+      { name: 'Trujillo', code: 'TRU' },
+      { name: 'Piura', code: 'PIU' }
+    ],
+    optionLabel: 'name',
+    optionValue: 'code',
+    placeholder: 'Seleccione una ciudad',
+    filter: true,
+    filterBy: 'name',
+    showClear: true
+  }
+};

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

@@ -0,0 +1,168 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  forwardRef,
+  Input
+} from '@angular/core';
+
+import {
+  FormsModule,
+  NG_VALUE_ACCESSOR
+} from '@angular/forms';
+
+import { SelectModule } from 'primeng/select';
+
+import {
+  ByteSelectEmptyDirective,
+  ByteSelectEmptyFilterDirective,
+  ByteSelectFooterDirective,
+  ByteSelectHeaderDirective,
+  ByteSelectItemDirective,
+  ByteSelectSelectedItemDirective
+} from './byte-select.directive';
+import { NgTemplateOutlet } from '@angular/common';
+
+
+@Component({
+  selector: 'byte-select',
+
+  imports: [
+    FormsModule,
+    SelectModule,
+
+    NgTemplateOutlet,
+
+    ByteSelectSelectedItemDirective,
+    ByteSelectItemDirective,
+    ByteSelectHeaderDirective,
+    ByteSelectFooterDirective,
+    ByteSelectEmptyDirective,
+    ByteSelectEmptyFilterDirective
+  ],
+
+  templateUrl: './byte-select.html',
+
+  styleUrl: './byte-select.css',
+
+  changeDetection: ChangeDetectionStrategy.OnPush,
+
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ByteSelect),
+      multi: true
+    }
+  ]
+})
+export class ByteSelect {
+
+  // =====================================================
+  // INPUTS
+  // =====================================================
+
+  @Input()
+  options: any[] = [];
+
+  @Input()
+  optionLabel = '';
+
+  @Input()
+  optionValue = '';
+
+  @Input()
+  placeholder = 'Seleccione';
+
+  @Input()
+  disabled = false;
+
+  @Input()
+  inputId = '';
+
+  @Input()
+  name = '';
+
+  @Input()
+  filter = false;
+
+  @Input()
+  filterBy = '';
+
+  @Input()
+  showClear = false;
+
+
+  // =====================================================
+  // CUSTOM TEMPLATES
+  // =====================================================
+
+  @ContentChild(ByteSelectSelectedItemDirective)
+  selectedItemTemplate?: ByteSelectSelectedItemDirective;
+
+  @ContentChild(ByteSelectItemDirective)
+  itemTemplate?: ByteSelectItemDirective;
+
+  @ContentChild(ByteSelectHeaderDirective)
+  headerTemplate?: ByteSelectHeaderDirective;
+
+  @ContentChild(ByteSelectFooterDirective)
+  footerTemplate?: ByteSelectFooterDirective;
+
+  @ContentChild(ByteSelectEmptyDirective)
+  emptyTemplate?: ByteSelectEmptyDirective;
+
+  @ContentChild(ByteSelectEmptyFilterDirective)
+  emptyFilterTemplate?: ByteSelectEmptyFilterDirective;
+
+
+  // =====================================================
+  // VALUE
+  // =====================================================
+
+  value: any = null;
+
+
+  // =====================================================
+  // CONTROL VALUE ACCESSOR
+  // =====================================================
+
+  private onChange: (value: any) => void = () => {};
+
+  private onTouched: () => void = () => {};
+
+
+  writeValue(value: any): void {
+    this.value = value;
+  }
+
+
+  registerOnChange(fn: (value: any) => void): void {
+    this.onChange = fn;
+  }
+
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+
+  // =====================================================
+  // CHANGE
+  // =====================================================
+
+  onValueChange(value: any): void {
+
+    this.value = value;
+
+    this.onChange(value);
+
+    this.onTouched();
+
+  }
+
+}

package/src/lib/components/byte-select/index.ts

@@ -0,0 +1,3 @@
+export * from './byte-select';
+export * from './byte-select.directive';
+export * from './byte-select.module';

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

@@ -0,0 +1,11 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: 'ng-template[byteSidebarHeader]',
+  standalone: true
+})
+export class ByteSidebarHeaderDirective {
+  constructor(
+    public template: TemplateRef<any>
+  ) {}
+}

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

@@ -0,0 +1,31 @@
+<p-drawer
+  [visible]="visible"
+  (visibleChange)="onVisibleChange($event)"
+  [position]="position"
+  [modal]="modal"
+  [dismissible]="dismissible"
+  [closeOnEscape]="closeOnEscape"
+  [showCloseIcon]="showCloseIcon"
+  [blockScroll]="blockScroll"
+  [style]="style"
+  [styleClass]="styleClass"
+  [autoZIndex]="autoZIndex"
+  [baseZIndex]="baseZIndex"
+  appendTo="body"
+>
+
+  @if (headerTemplate) {
+
+    <ng-template pTemplate="header">
+
+      <ng-container
+        [ngTemplateOutlet]="headerTemplate.template"
+      />
+
+    </ng-template>
+
+  }
+
+  <ng-content></ng-content>
+
+</p-drawer>

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

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+
+import { ByteSidebar } from './byte-sidebar';
+import { ByteSidebarHeaderDirective } from './byte-sidebar.directive';
+
+@NgModule({
+  imports: [
+    ByteSidebar,
+    ByteSidebarHeaderDirective
+  ],
+  exports: [
+    ByteSidebar,
+    ByteSidebarHeaderDirective
+  ]
+})
+export class ByteSidebarModule {}

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

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