@4byte/shared-lib 0.0.1

package/src/lib/components/calendar/calendar.ts

@@ -0,0 +1,89 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  forwardRef,
+  Input
+} from '@angular/core';
+
+import {
+  ControlValueAccessor,
+  FormsModule,
+  NG_VALUE_ACCESSOR
+} from '@angular/forms';
+
+import { DatePickerModule } from 'primeng/datepicker';
+
+@Component({
+  selector: 'byte-calendar',
+  standalone: true,
+  imports: [
+    FormsModule,
+    DatePickerModule
+  ],
+  templateUrl: './calendar.html',
+  styleUrl: './calendar.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => Calendar),
+      multi: true
+    }
+  ]
+})
+export class Calendar implements ControlValueAccessor {
+
+  @Input() dateFormat = 'dd/mm/yy';
+
+  @Input() placeholder = 'dd/mm/yyyy';
+
+  @Input() showIcon = true;
+
+  @Input() disabled = false;
+
+  @Input() minDate?: Date;
+
+  @Input() maxDate?: Date;
+
+  @Input() readonlyInput = false;
+
+  @Input() showClear = false;
+
+  @Input() inputId = '';
+
+  @Input() name = '';
+
+  value: Date | null = null;
+
+  private onChange: (value: Date | null) => void = () => {};
+
+  private onTouched: () => void = () => {};
+
+  writeValue(value: Date | null): void {
+    this.value = value;
+  }
+
+  registerOnChange(
+    fn: (value: Date | null) => void
+  ): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(
+    fn: () => void
+  ): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  onValueChange(value: Date | null): void {
+    this.value = value;
+
+    this.onChange(value);
+    this.onTouched();
+  }
+}

package/src/lib/components/select/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/select/select.html

@@ -0,0 +1,14 @@
+<p-select
+  [options]="options"
+  [optionLabel]="optionLabel"
+  [optionValue]="optionValue"
+  [placeholder]="placeholder"
+  [disabled]="disabled"
+  [inputId]="inputId"
+  [name]="name"
+  [ngModel]="value"
+
+  [filter]="filter" [filterBy]="filterBy"
+  
+  (ngModelChange)="onValueChange($event)"
+/>

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

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

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

@@ -0,0 +1,73 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  forwardRef,
+  Input
+} from '@angular/core';
+
+import {
+  ControlValueAccessor,
+  FormsModule,
+  NG_VALUE_ACCESSOR
+} from '@angular/forms';
+
+import { SelectModule } from 'primeng/select';
+
+@Component({
+  selector: 'shared-select',
+   imports: [
+    FormsModule,
+    SelectModule
+  ],
+  templateUrl: './select.html',
+  styleUrl: './select.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => Select),
+      multi: true
+    }
+  ]
+})
+export class Select {
+  @Input() options: any[] = [];
+  @Input() optionLabel = '';
+  @Input() optionValue = '';
+  @Input() placeholder = 'Seleccione';
+  @Input() disabled = false;
+  @Input() inputId = '';
+  @Input() name = '';
+
+  // Nuevos inputs 
+  @Input() filter = false;
+  @Input() filterBy = '';
+
+  value: any = null;
+
+  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;
+  }
+
+  onValueChange(value: any): void {
+    this.value = value;
+    this.onChange(value);
+    this.onTouched();
+  }
+}

package/src/lib/config/empresa-ui.token.ts

@@ -0,0 +1,5 @@
+import { InjectionToken } from '@angular/core';
+import { EmpresaUIConfig } from '../providers/empresa-ui-config';
+
+export const EMPRESA_UI_CONFIG =
+  new InjectionToken<EmpresaUIConfig>('EMPRESA_UI_CONFIG');

package/src/lib/providers/empresa-ui-config.ts

@@ -0,0 +1,8 @@
+export type EmpresaUITheme =
+  'aura'
+  | 'crm';
+
+
+export interface EmpresaUIConfig {
+  theme?: EmpresaUITheme;
+}

package/src/lib/providers/provide-empresa-ui.ts

@@ -0,0 +1,42 @@
+import {
+  makeEnvironmentProviders,
+  provideEnvironmentInitializer
+} from '@angular/core';
+
+import { providePrimeNG } from 'primeng/config';
+
+import { EMPRESA_UI_CONFIG } from '../config/empresa-ui.token';
+import { EmpresaUIConfig } from './empresa-ui-config';
+
+import { EMPRESA_THEMES } from '../themes/registry';
+import { injectPrimeIconsStylesheet } from '../utils/inject-prime-icons';
+
+
+export function provideEmpresaUI(
+  config: EmpresaUIConfig = {}
+) {
+  const theme =
+    EMPRESA_THEMES[config.theme ?? 'crm'];
+
+
+  return makeEnvironmentProviders([
+
+    providePrimeNG({
+      theme: {
+        preset: theme,
+        options: {
+            darkModeSelector: false
+        }
+      }
+    }),
+
+    {
+      provide: EMPRESA_UI_CONFIG,
+      useValue: config
+    },
+
+    provideEnvironmentInitializer(() => injectPrimeIconsStylesheet()),
+
+  ]);
+
+}

package/src/lib/themes/CRM-Theme.ts

@@ -0,0 +1,34 @@
+import { definePreset } from '@primeuix/themes';
+import Aura from '@primeuix/themes/aura';
+
+export const CRMTheme = definePreset(Aura, {
+  semantic: {
+    primary: {
+      50: '#EEF4FF',
+      100: '#DCE8FF',
+      200: '#B9D1FF',
+      300: '#8FB4FF',
+      400: '#5F91F5',
+      500: '#2F6FE4',
+      600: '#1F58C4',
+      700: '#18489D',
+      800: '#123574',
+      900: '#0A2453',
+      950: '#00011F'
+    }
+
+    /* secondary: {
+      50: '#F8FAFC',
+      100: '#F1F5F9',
+      200: '#E2E8F0',
+      300: '#CBD5E1',
+      400: '#94A3B8',
+      500: '#64748B',
+      600: '#475569',
+      700: '#334155',
+      800: '#1E293B',
+      900: '#0F172A',
+      950: '#020617'
+    } */
+  }
+});

package/src/lib/themes/aura.ts

@@ -0,0 +1,3 @@
+import Aura from '@primeuix/themes/aura';
+
+export const AuraTheme = Aura;

package/src/lib/themes/index.ts

@@ -0,0 +1,2 @@
+export * from './aura';
+export * from './CRM-Theme';

package/src/lib/themes/registry.ts

@@ -0,0 +1,9 @@
+import {
+  AuraTheme,
+  CRMTheme,
+} from './';
+
+export const EMPRESA_THEMES = {
+  aura: AuraTheme,
+  crm: CRMTheme,
+};

package/src/lib/utils/inject-prime-icons.ts

@@ -0,0 +1,12 @@
+const PRIME_ICONS_LINK_ID = 'empresa-ui-prime-icons';
+const PRIME_ICONS_VERSION = '7.0.0';
+
+export function injectPrimeIconsStylesheet(): void {
+  if (document.getElementById(PRIME_ICONS_LINK_ID)) return;
+
+  const link = document.createElement('link');
+  link.id = PRIME_ICONS_LINK_ID;
+  link.rel = 'stylesheet';
+  link.href = `https://cdn.jsdelivr.net/npm/primeicons@${PRIME_ICONS_VERSION}/primeicons.css`;
+  document.head.appendChild(link);
+}

package/src/public-api.ts

@@ -0,0 +1,30 @@
+/*
+ * Public API Surface of shared-ui
+ */
+
+//export * from './lib/shared-ui';
+export * from './lib/providers/provide-empresa-ui';
+export * from './lib/providers/empresa-ui-config';
+
+//COMPONENTES
+export * from './lib/components/calendar/calendar';
+export * from './lib/components/byte-select';
+export * from './lib/components/byte-input/byte-input';
+
+
+export * from './lib/components/byte-button/byte-button';
+export * from './lib/components/byte-button/byte-button-group/byte-button-group';
+export * from './lib/components/byte-button/byte-button.directive';
+export * from './lib/components/byte-button/byte-button.module';
+
+export * from './lib/components/byte-table/byte-table';
+export * from './lib/components/byte-table/byte-table.directive';
+export * from './lib/components/byte-table/byte-table.module';
+
+export * from './lib/components/byte-sidebar/byte-sidebar';
+export * from './lib/components/byte-sidebar/byte-sidebar.directive';
+export * from './lib/components/byte-sidebar/byte-sidebar.module';
+
+export * from './lib/components/byte-dialog/byte-dialog';
+export * from './lib/components/byte-dialog/byte-dialog.directive';
+export * from './lib/components/byte-dialog/byte-dialog.module';

package/tsconfig.json

@@ -0,0 +1,45 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "paths": {
+      "shared-ui": ["./dist/shared-ui"]
+    },
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./projects/shared-ui/tsconfig.lib.json"
+    },
+    {
+      "path": "./projects/shared-ui/tsconfig.spec.json"
+    },
+    {
+      "path": "./projects/demo/tsconfig.app.json"
+    },
+    {
+      "path": "./projects/demo/tsconfig.spec.json"
+    },
+    {
+      "path": "./projects/storybook-host/tsconfig.app.json"
+    }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["**/*.spec.ts"]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": ["vitest/globals"]
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.spec.ts"]
+}