@4byte/shared-lib 0.0.1 → 0.0.3

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

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

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

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

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

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

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

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

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

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

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

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