@dropi/ui-components 1.0.4 → 1.0.6

package/src/components-source/dropi-tag/dropi-tag.component.ts

@@ -1,43 +1,52 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
-import { IconComponent } from '../icon/icon.component';
-import { trigger, transition, style, animate } from '@angular/animations';
+import { CommonModule } from "@angular/common";
+import { Component, Input, OnInit } from "@angular/core";
+import { IconComponent } from "../icon/icon.component";
+import { trigger, transition, style, animate } from "@angular/animations";
 
-export type tagStates = 'default' | 'success' | 'info' | 'warning' | 'error' | 'legacy';
-export type tagTypes = 'primary' | 'secondary';
+export type tagStates =
+  | "default"
+  | "success"
+  | "info"
+  | "warning"
+  | "error"
+  | "legacy";
+export type tagTypes = "primary" | "secondary";
 
 @Component({
-  selector: 'app-dropi-tag',
-  templateUrl: './dropi-tag.component.html',
-  styleUrls: ['./dropi-tag.component.scss'],
+  selector: "dropi-wc-tag",
+  templateUrl: "./dropi-tag.component.html",
+  styleUrls: ["./dropi-tag.component.scss"],
   standalone: true,
   imports: [CommonModule, IconComponent],
   animations: [
-    trigger('fade', [
-      transition(':enter', [
-        style({ opacity: 0, transform: 'scale(0.8)' }),
-        animate('200ms ease-out', style({ opacity: 1, transform: 'scale(1)' })),
+    trigger("fade", [
+      transition(":enter", [
+        style({ opacity: 0, transform: "scale(0.8)" }),
+        animate("200ms ease-out", style({ opacity: 1, transform: "scale(1)" })),
       ]),
-      transition(':leave', [
-        animate('150ms ease-in', style({ opacity: 0, transform: 'scale(0.8)' })),
+      transition(":leave", [
+        animate(
+          "150ms ease-in",
+          style({ opacity: 0, transform: "scale(0.8)" }),
+        ),
       ]),
     ]),
   ],
 })
 export class DropiTagComponent implements OnInit {
-  @Input() type: tagTypes = 'primary';
-  @Input() state: tagStates = 'default';
+  @Input() type: tagTypes = "primary";
+  @Input() state: tagStates = "default";
   @Input() showIcon: boolean = false;
-  @Input() icon: string = '';
-  @Input() text: string = '';
+  @Input() icon: string = "";
+  @Input() text: string = "";
 
   colorMap: { [key: string]: string } = {
-    default: 'Primary-Primary',
-    success: 'Success-Success',
-    info: 'Info-Info',
-    warning: 'Warning-Warning',
-    error: 'Error-Error',
-    legacy: 'Gray-Gray',
+    default: "Primary-Primary",
+    success: "Success-Success",
+    info: "Info-Info",
+    warning: "Warning-Warning",
+    error: "Error-Error",
+    legacy: "Gray-Gray",
   };
 
   fontColor: string;
@@ -54,17 +63,17 @@ export class DropiTagComponent implements OnInit {
     let stylesTags = {
       primary: {
         bgc: `var(--${this.colorMap[this.state]}-500)`,
-        cl: 'var(--Neutral-White)',
+        cl: "var(--Neutral-White)",
       },
       secondary: {
-        bgc: `var(--${this.colorMap[this.state]}${this.state == 'default' || this.state == 'legacy' ? '-100' : '-50'})`,
-        cl: `var(--${this.colorMap[this.state]}${this.state == 'default' ? '-500' : '-700'})`,
+        bgc: `var(--${this.colorMap[this.state]}${this.state == "default" || this.state == "legacy" ? "-100" : "-50"})`,
+        cl: `var(--${this.colorMap[this.state]}${this.state == "default" ? "-500" : "-700"})`,
       },
     };
 
     let styleToApply: {
-      'background-color': any;
-      'border-radius': any;
+      "background-color": any;
+      "border-radius": any;
       color: any;
     };
 
@@ -72,15 +81,16 @@ export class DropiTagComponent implements OnInit {
       const selectedStyle = stylesTags[this.type];
 
       styleToApply = {
-        'background-color': selectedStyle.bgc,
-        'border-radius': 'var(--Border-5)',
+        "background-color": selectedStyle.bgc,
+        "border-radius": "var(--Border-5)",
         color: selectedStyle.cl,
       };
 
       this.fontColor =
-        this.type == 'primary'
-          ? 'Neutral-White'
-          : this.colorMap[this.state] + (this.state == 'default' ? '-500' : '-700');
+        this.type == "primary"
+          ? "Neutral-White"
+          : this.colorMap[this.state] +
+            (this.state == "default" ? "-500" : "-700");
 
       return styleToApply;
     }

package/src/components-source/input/input.component.ts

@@ -1,15 +1,22 @@
-import { Component, Input, OnChanges, OnInit, SimpleChanges, SimpleChange } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { InputProperties } from '@app/utilities/interfaces/ui/input-interface';
-import { Validators, ReactiveFormsModule } from '@angular/forms';
-import { IconComponent } from '../icon/icon.component';
-import { ThousandSeparatorDirective } from '@app/utilities/directives/thousand-separator.directive';
-import { TranslateModule } from '@ngx-translate/core';
-import { OnlyNumbersDirective } from '@app/utilities/directives/only-numbers.directive';
-import { OnlyLettersDirective } from '@app/utilities/directives/only-letters.directive';
+import {
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+  SimpleChange,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { InputProperties } from "@app/utilities/interfaces/ui/input-interface";
+import { Validators, ReactiveFormsModule } from "@angular/forms";
+import { IconComponent } from "../icon/icon.component";
+import { ThousandSeparatorDirective } from "@app/utilities/directives/thousand-separator.directive";
+import { TranslateModule } from "@ngx-translate/core";
+import { OnlyNumbersDirective } from "@app/utilities/directives/only-numbers.directive";
+import { OnlyLettersDirective } from "@app/utilities/directives/only-letters.directive";
 
 @Component({
-  selector: 'app-input',
+  selector: "dropi-wc-input",
   standalone: true,
   imports: [
     CommonModule,
@@ -20,8 +27,8 @@ import { OnlyLettersDirective } from '@app/utilities/directives/only-letters.dir
     OnlyNumbersDirective,
     OnlyLettersDirective,
   ],
-  templateUrl: './input.component.html',
-  styleUrls: ['./input.component.scss'],
+  templateUrl: "./input.component.html",
+  styleUrls: ["./input.component.scss"],
 })
 export class InputComponent implements OnInit, OnChanges {
   /**
@@ -91,8 +98,8 @@ export class InputComponent implements OnInit, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes['disabled']) {
-      const disabledChange = changes['disabled'];
+    if (changes["disabled"]) {
+      const disabledChange = changes["disabled"];
     }
   }
 

package/src/index.ts

@@ -11,6 +11,7 @@ export { DropiElementsModule } from "./lib/elements.module";
 // Exportar funciones de registro
 export {
   registerDropiElements,
+  defineCustomElements,
   isComponentRegistered,
 } from "./lib/elements-registry";
 

package/src/lib/elements-registry.ts

@@ -5,8 +5,8 @@
  * como Custom Elements del navegador usando Angular Elements.
  */
 
-import { Injector, Type } from '@angular/core';
-import { createCustomElement } from '@angular/elements';
+import { Injector, Type, ApplicationRef } from "@angular/core";
+import { createCustomElement } from "@angular/elements";
 
 /**
  * Interface para definición de componentes
@@ -40,7 +40,24 @@ interface ComponentDefinition {
  *   });
  * ```
  */
-export function registerDropiElements(injector: Injector, components: ComponentDefinition[]): void {
+import { createApplication } from "@angular/platform-browser";
+import { ButtonComponent } from "../components-source/dropi-button/dropi-button.component";
+
+/**
+ * Lista interna de todos los componentes disponibles para registro automático
+ */
+const ALL_COMPONENTS: ComponentDefinition[] = [
+  {
+    selector: "dropi-wc-button",
+    component: ButtonComponent,
+    description: "Button Component",
+  },
+];
+
+export function registerDropiElements(
+  injector: Injector,
+  components: ComponentDefinition[],
+): void {
   // Registrar cada componente como custom element
   components.forEach(({ selector, component, description }) => {
     try {
@@ -48,7 +65,9 @@ export function registerDropiElements(injector: Injector, components: ComponentD
       if (!customElements.get(selector)) {
         const element = createCustomElement(component, { injector });
         customElements.define(selector, element);
-        console.log(`✅ Web Component registrado: <${selector}> - ${description}`);
+        console.log(
+          `✅ Web Component registrado: <${selector}> - ${description}`,
+        );
       } else {
         console.warn(`⚠️ Custom element <${selector}> ya está definido`);
       }
@@ -58,6 +77,27 @@ export function registerDropiElements(injector: Injector, components: ComponentD
   });
 }
 
+/**
+ * Inicializa el entorno de Angular y registra todos los Web Components automáticamente.
+ * Ideal para uso en frameworks como React, Vue, o Vanilla JS.
+ */
+export function defineCustomElements(config?: {
+  providers?: any[];
+}): Promise<void> {
+  const appConfig =
+    config && config.providers
+      ? { providers: config.providers }
+      : { providers: [] };
+  return createApplication(appConfig)
+    .then((appRef: ApplicationRef) => {
+      registerDropiElements(appRef.injector, ALL_COMPONENTS);
+      console.log("🚀 Dropi UI Elements initialized successfully");
+    })
+    .catch((err: any) =>
+      console.error("❌ Error initializing Dropi UI Elements", err),
+    );
+}
+
 /**
  * Función auxiliar para verificar si un componente está registrado
  */

package/src/libreria work space.code-workspace

@@ -0,0 +1,11 @@
+{
+  "folders": [
+	{
+		"path": "../../../Documents/react prueba"
+	},
+	{
+		"path": ".."
+	}
+],
+  "settings": {}
+}