Agregando (element link) para estilos (CDN).

lib/adapters/component/create-script.ts

@@ -1,5 +1,6 @@
 import { StatusElement } from '../../interfaces';
 import { CreateElement } from "../../interfaces";
+import { SCRIPT_ELEMENT } from "../../constants";
 
 export class CreateScript implements CreateElement {
 

lib/adapters/styles/create-style.ts

@@ -1,14 +1,31 @@
 import { AdapterServices } from "../../services/adapter.services";
 import { StatusElement } from "../../";
 import { AxiosResponse } from "axios";
+import { LINK_ELEMENT, STYLE_ELEMENT} from "../../constants";
 
 export class CreateStyle {
 
     public build(name: string, code: string): Promise<StatusElement> {
-        const element = document.createElement(STYLE_ELEMENT);
+        const element: HTMLStyleElement = document.createElement( STYLE_ELEMENT );
         element.textContent = code;
+
         this.appendChild(element);
+        return new Promise<StatusElement>((resolve, reject) => {
+            element.onload = (() => resolve({ name, status: true, element: element } ));
+            element.onerror = (() => {
+                reject({ name, status: false, element: element } );
+                element.remove();
+            } );
+        });
+    }
+
+    public createLink(name: string, href: string): Promise<StatusElement> {
+        const element: HTMLLinkElement = document.createElement( LINK_ELEMENT );
+        element.href = href;
+        element.type = "text/css";
+        element.rel = "stylesheet";
 
+        this.appendChild(element);
         return new Promise<StatusElement>((resolve, reject) => {
             element.onload = (() => resolve({ name, status: true, element: element } ));
             element.onerror = (() => {
@@ -18,7 +35,7 @@ export class CreateStyle {
         });
     }
 
-    public appendChild(style: HTMLStyleElement): void {
+    private appendChild(style: HTMLStyleElement | HTMLLinkElement): void {
         const documentHead = document.head;
         documentHead.appendChild(style);
     }
@@ -27,4 +44,6 @@ export class CreateStyle {
         const adapterServices = new AdapterServices();
         return await adapterServices.textContent(src);
     }
+
+
 }

lib/adapters/styles/ui.adapter.ts

@@ -22,6 +22,18 @@ export class UiAdapter {
         })
     }
 
+    public createLink(name: string, src: string): void {
+        const style = new CreateStyle();
+        style.createLink(name, src).then( ( status : StatusElement) => {
+            this.statusStyles.next(status);
+            this.allStyles.push(({name: status.name, element: status.element}));
+        }).catch((e)=> this.statusStyles.next(e))
+    }
+
+    public loadCdn(styles: Array<ElementDescription> = []) {
+        styles.forEach(({ name, src }) => this.createLink(name, src));
+    }
+
     public loadStyles(styles: Array<ElementDescription> = []) {
         styles.forEach(({ name, src }) => this.create(name, src));
     }

lib/constants/index.ts

@@ -1,2 +1,3 @@
-const STYLE_ELEMENT = 'style';
-const SCRIPT_ELEMENT = 'script';
+export const STYLE_ELEMENT = 'style';
+export const SCRIPT_ELEMENT = 'script';
+export const LINK_ELEMENT = 'link';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-adapter-js",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Web Adapter es un paquete que te permite tener una comunicación dinámica con tus Web Componets externos, además podrás cargar tus estilos de forma dinámica.",
   "main": "index.js",
   "scripts": {