@dropi/ui-components 1.0.0

package/src/lib/bootstrap.ts

@@ -0,0 +1,28 @@
+/**
+ * Archivo de bootstrap para uso standalone de Web Components
+ *
+ * Este archivo puede ser cargado directamente en el navegador vía script tag
+ * para auto-registrar todos los componentes Dropi como custom elements
+ */
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { DropiElementsModule } from './elements.module';
+
+/**
+ * Bootstrap automático de los componentes
+ *
+ * Cuando este archivo se carga, automáticamente inicializa Angular
+ * y registra todos los custom elements
+ */
+platformBrowserDynamic()
+  .bootstrapModule(DropiElementsModule)
+  .then(() => {
+    console.log('🚀 Dropi UI Elements cargado y registrado exitosamente');
+  })
+  .catch((err) => {
+    console.error('❌ Error cargando Dropi UI Elements:', err);
+  });
+
+// Exportar para uso programático
+export { DropiElementsModule } from './elements.module';
+export { registerDropiElements, getRegisteredComponents } from './elements-registry';

package/src/lib/dropi-ui-elements/dropi-ui-elements.component.html

@@ -0,0 +1 @@
+<p>DropiUiElements works!</p>

package/src/lib/dropi-ui-elements/dropi-ui-elements.component.spec.ts

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

package/src/lib/dropi-ui-elements/dropi-ui-elements.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'dropi-dropi-ui-elements',
+  imports: [],
+  templateUrl: './dropi-ui-elements.component.html',
+  styleUrl: './dropi-ui-elements.component.scss',
+})
+export class DropiUiElementsComponent {}

package/src/lib/elements-registry.ts

@@ -0,0 +1,66 @@
+/**
+ * Registro de elementos personalizados (Web Components)
+ *
+ * Este archivo contiene la función que registra todos los componentes Angular
+ * como Custom Elements del navegador usando Angular Elements.
+ */
+
+import { Injector, Type } from '@angular/core';
+import { createCustomElement } from '@angular/elements';
+
+/**
+ * Interface para definición de componentes
+ */
+interface ComponentDefinition {
+  selector: string;
+  component: Type<any>;
+  description: string;
+}
+
+/**
+ * Registra todos los componentes Dropi como custom elements
+ *
+ * @param injector - El injector de Angular necesario para createCustomElement
+ * @param components - Array de componentes a registrar
+ *
+ * @example
+ * ```typescript
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ * import { registerDropiElements } from '@oropi/ui-elements';
+ * import { ButtonComponent } from '@app/ui';
+ *
+ * const components = [
+ *   { selector: 'dropi-button', component: ButtonComponent }
+ * ];
+ *
+ * platformBrowserDynamic().bootstrapModule(AppModule)
+ *   .then((ref) => {
+ *     const injector = ref.injector;
+ *     registerDropiElements(injector, components);
+ *   });
+ * ```
+ */
+export function registerDropiElements(injector: Injector, components: ComponentDefinition[]): void {
+  // Registrar cada componente como custom element
+  components.forEach(({ selector, component, description }) => {
+    try {
+      // Verificar si el custom element ya está definido
+      if (!customElements.get(selector)) {
+        const element = createCustomElement(component, { injector });
+        customElements.define(selector, element);
+        console.log(`✅ Web Component registrado: <${selector}> - ${description}`);
+      } else {
+        console.warn(`⚠️ Custom element <${selector}> ya está definido`);
+      }
+    } catch (error) {
+      console.error(`❌ Error registrando <${selector}>:`, error);
+    }
+  });
+}
+
+/**
+ * Función auxiliar para verificar si un componente está registrado
+ */
+export function isComponentRegistered(selector: string): boolean {
+  return customElements.get(selector) !== undefined;
+}

package/src/lib/elements.module.ts

@@ -0,0 +1,22 @@
+/**
+ * Módulo principal de Dropi UI Elements
+ *
+ * Este módulo proporciona funciones auxiliares para convertir
+ * componentes Angular en Web Components
+ */
+
+import { NgModule } from '@angular/core';
+
+/**
+ * Módulo auxiliar de Angular Elements
+ *
+ * Este es un módulo vacío que sirve como punto de entrada
+ * La conversión a Web Components se hace mediante la función
+ * registerDropiElements
+ */
+@NgModule({
+  imports: [],
+  declarations: [],
+  exports: [],
+})
+export class DropiElementsModule {}

package/src/styles.scss

@@ -0,0 +1,152 @@
+/* ============================================
+   DROPI WEB COMPONENTS - GLOBAL TOKENS
+   ============================================
+   Este archivo contiene SOLO las variables CSS
+   necesarias para los Web Components.
+   Se incluye automáticamente en el bundle.
+   ============================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+
+:root {
+  /* ===== NEUTRAL ===== */
+  --White: #ffffff;
+  --Neutral-White: #ffffff;
+  --Black: #000000;
+
+  /* ===== GRAY ===== */
+  --Gray-50: #f7f8fa;
+  --Gray-Gray-50: #f7f8fa;
+  --Gray-100: #e6eaf2;
+  --Gray-200: #c3c9d9;
+  --Gray-gray-200: #c3c9d9;
+  --Gray-300: #a3abbf;
+  --Gray-Gray-300: #a3abbf;
+  --Gray-400: #858ea6;
+  --Gray-500: #69738c;
+  --Gray-Gray-500: #69738c;
+  --Gray-600: #475066;
+  --Gray-700: #32394d;
+  --Gray-800: #1f2433;
+  --Gray-900: #0e111a;
+
+  /* ===== PRIMARY ===== */
+  --Primary-Primary-50: #fef8f2;
+  --Primary-Primary-100: #ffecda;
+  --Primary-Primary-200: #fcddbd;
+  --Primary-Primary-300: #f2bc85;
+  --Primary-Primary-400: #f7b46f;
+  --Primary-Primary-500: #f49a3d;
+  --Primary-Primary-600: #e58017;
+  --Primary-Primary-700: #99540f;
+  --Primary-Primary-800: #66380a;
+  --Primary-Primary-900: #331c05;
+
+  /* ===== SECONDARY ===== */
+  --Secondary-Secondary-50: #f0fafc;
+  --Secondary-Secondary-100: #cee8f2;
+  --Secondary-Secondary-200: #95d0e5;
+  --Secondary-Secondary-300: #62bad9;
+  --Secondary-Secondary-400: #33a4cc;
+  --Secondary-Secondary-500: #008dbf;
+  --Secondary-Secondary-600: #007199;
+  --Secondary-Secondary-700: #005573;
+  --Secondary-Secondary-800: #00384d;
+  --Secondary-Secondary-900: #001c26;
+
+  /* ===== FEEDBACK ===== */
+  --Success-Success-50: #e7f8f3;
+  --Success-Success-100: #b3eada;
+  --Success-Success-200: #8ee0c8;
+  --Success-Success-300: #5bd1af;
+  --Success-Success-400: #3bc99f;
+  --Success-Success-500: #0abb87;
+  --Success-Success-600: #09aa7b;
+  --Success-Success-700: #078560;
+  --Success-Success-800: #06674a;
+  --Success-Success-900: #044f39;
+
+  --Error-Error-50: #fef0f0;
+  --Error-Error-100: #fcd1d1;
+  --Error-Error-200: #fababb;
+  --Error-Error-300: #f89b9c;
+  --Error-Error-400: #f68889;
+  --Error-Error-500: #f46a6b;
+  --Error-Error-600: #de6061;
+  --Error-Error-700: #ad4b4c;
+  --Error-Error-800: #863a3b;
+  --Error-Error-900: #662d2d;
+
+  --Info-Info-50: #eef6fe;
+  --Info-Info-100: #c9e3fb;
+  --Info-Info-200: #afd6f9;
+  --Info-Info-300: #8ac3f6;
+  --Info-Info-400: #73b7f4;
+  --Info-Info-500: #50a5f1;
+  --Info-Info-600: #4996db;
+  --Info-Info-700: #3975ab;
+  --Info-Info-800: #2c5b85;
+  --Info-Info-900: #224565;
+
+  --Warning-Warning-50: #fef8ed;
+  --Warning-Warning-100: #fbe8c8;
+  --Warning-Warning-200: #f9ddad;
+  --Warning-Warning-300: #f6cd87;
+  --Warning-Warning-400: #f4c370;
+  --Warning-Warning-500: #f1b44c;
+  --Warning-Warning-600: #dba445;
+  --Warning-Warning-700: #ab8036;
+  --Warning-Warning-800: #85632a;
+  --Warning-Warning-900: #654c20;
+
+  /* ===== BORDERS ===== */
+  --Border-1: 4px;
+  --Border-2: 8px;
+  --Border-3: 12px;
+  --Border-4: 24px;
+  --Border-5: 32px;
+
+  /* ===== SPACING ===== */
+  --Size-1: 4px;
+  --Size-2: 8px;
+  --Size-3: 12px;
+  --Size-4: 16px;
+  --Size-5: 24px;
+  --Size-6: 32px;
+  --Size-7: 40px;
+  --Size-8: 48px;
+  --Size-9: 56px;
+  --Size-10: 64px;
+
+  /* ===== TYPOGRAPHY ===== */
+  --font-family-01: 'Inter', sans-serif;
+  --font-size-xxxxl: 36px;
+  --font-size-xxxl: 30px;
+  --font-size-xxl: 24px;
+  --font-size-xl: 20px;
+  --font-size-l: 18px;
+  --font-size-m: 16px;
+  --font-size-s: 14px;
+  --font-size-xs: 12px;
+  --font-size-xxs: 10px;
+
+  --lineheight-simple: 110%;
+  --lineheight-large: 150%;
+
+  --font-weight-bold: 700;
+  --font-weight-semibold: 600;
+  --font-weight-medium: 500;
+  --font-weight-regular: 400;
+  --font-weight-light: 300;
+
+  /* ===== SHADOWS ===== */
+  --Shadow-small: 0px 0px 12px rgba(0, 0, 0, 0.04);
+  --Shadow-medium: 0.5px 4px 8px rgba(0, 0, 0, 0.08);
+  --Shadow-large: 0px 4px 16px rgba(0, 0, 0, 0.16);
+  --Shadow-icon: 0px 0px 4px rgba(0, 0, 0, 0.16);
+}
+
+/* Reset básico para asegurar consistencia */
+* {
+  box-sizing: border-box;
+}

package/src/test-setup.ts

@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+  errorOnUnknownElements: true,
+  errorOnUnknownProperties: true,
+});

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,18 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "jest.config.ts",
+    "jest.config.cts",
+    "src/test-setup.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,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"],
+    "moduleResolution": "node10"
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"]
+}