@dropi/ui-components 1.0.4 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +44 -97
- package/dist/README.md +44 -97
- package/dist/esm2022/index.mjs +2 -2
- package/dist/esm2022/lib/elements-registry.mjs +29 -2
- package/dist/fesm2022/dropi-ui-components.mjs +25 -22
- package/dist/fesm2022/dropi-ui-components.mjs.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/lib/elements-registry.d.ts +7 -23
- package/package.json +11 -5
- package/scripts/init.js +89 -0
- package/src/components-source/alert/alert.component.ts +56 -40
- package/src/components-source/dropi-search/dropi-search.component.ts +83 -63
- package/src/components-source/dropi-switch/dropi-switch.component.ts +8 -11
- package/src/components-source/dropi-tag/dropi-tag.component.ts +45 -35
- package/src/components-source/input/input.component.ts +21 -14
- package/src/index.ts +1 -0
- package/src/lib/elements-registry.ts +44 -4
- package/src/libreria work space.code-workspace +11 -0
package/README.md
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
> Framework-agnostic Web Components library built with Angular Elements
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/@dropi/ui-components)
|
|
6
|
-
[](./LICENSE)
|
|
7
6
|
|
|
8
7
|
## 📦 Installation
|
|
9
8
|
|
|
@@ -13,113 +12,72 @@ npm install @dropi/ui-components
|
|
|
13
12
|
yarn add @dropi/ui-components
|
|
14
13
|
```
|
|
15
14
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
### HTML / Vanilla JS
|
|
19
|
-
|
|
20
|
-
```html
|
|
21
|
-
<!DOCTYPE html>
|
|
22
|
-
<html>
|
|
23
|
-
<head>
|
|
24
|
-
<link
|
|
25
|
-
rel="stylesheet"
|
|
26
|
-
href="node_modules/@dropi/ui-components/dropi-tokens.css"
|
|
27
|
-
/>
|
|
28
|
-
<script
|
|
29
|
-
src="node_modules/@dropi/ui-components/index.js"
|
|
30
|
-
type="module"
|
|
31
|
-
></script>
|
|
32
|
-
</head>
|
|
33
|
-
<body>
|
|
34
|
-
<dropi-button type="primary" text="Click Me"></dropi-button>
|
|
35
|
-
<dropi-alert state="success" message="Success!"></dropi-alert>
|
|
36
|
-
</body>
|
|
37
|
-
</html>
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
### React
|
|
15
|
+
---
|
|
41
16
|
|
|
42
|
-
|
|
43
|
-
import "@dropi/ui-components/dropi-tokens.css";
|
|
44
|
-
import "@dropi/ui-components";
|
|
17
|
+
## 🚀 Quick Start
|
|
45
18
|
|
|
46
|
-
|
|
47
|
-
return (
|
|
48
|
-
<>
|
|
49
|
-
<dropi-button type="primary" text="React Button" />
|
|
50
|
-
<dropi-alert state="info" message="Works in React!" />
|
|
51
|
-
</>
|
|
52
|
-
);
|
|
53
|
-
}
|
|
54
|
-
```
|
|
19
|
+
### 1. Import Styles
|
|
55
20
|
|
|
56
|
-
|
|
21
|
+
**Crucial:** You must import the CSS tokens for the components to look right.
|
|
57
22
|
|
|
58
|
-
|
|
59
|
-
<template>
|
|
60
|
-
<dropi-button type="primary" text="Vue Button" />
|
|
61
|
-
<dropi-alert state="success" message="Works in Vue!" />
|
|
62
|
-
</template>
|
|
23
|
+
**Angular (`angular.json`):**
|
|
63
24
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
25
|
+
```json
|
|
26
|
+
"styles": [
|
|
27
|
+
"node_modules/@dropi/ui-components/dist/dropi-tokens.css",
|
|
28
|
+
"src/styles.scss"
|
|
29
|
+
]
|
|
68
30
|
```
|
|
69
31
|
|
|
70
|
-
**
|
|
32
|
+
**React / Vue / Native:**
|
|
71
33
|
|
|
72
34
|
```javascript
|
|
73
|
-
|
|
74
|
-
plugins: [
|
|
75
|
-
vue({
|
|
76
|
-
template: {
|
|
77
|
-
compilerOptions: {
|
|
78
|
-
isCustomElement: (tag) => tag.startsWith("dropi-"),
|
|
79
|
-
},
|
|
80
|
-
},
|
|
81
|
-
}),
|
|
82
|
-
],
|
|
83
|
-
};
|
|
35
|
+
import "@dropi/ui-components/dist/dropi-tokens.css";
|
|
84
36
|
```
|
|
85
37
|
|
|
86
|
-
### Angular
|
|
38
|
+
### 2. Usage (Angular)
|
|
87
39
|
|
|
88
|
-
|
|
89
|
-
// main.ts or app.module.ts
|
|
90
|
-
import '@dropi/ui-components/dropi-tokens.css';
|
|
91
|
-
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
40
|
+
**Component (`login.component.ts`):**
|
|
92
41
|
|
|
93
|
-
|
|
94
|
-
|
|
42
|
+
```typescript
|
|
43
|
+
import { Component } from "@angular/core";
|
|
44
|
+
import { ButtonComponent, AlertComponent } from "@dropi/ui-components";
|
|
45
|
+
|
|
46
|
+
@Component({
|
|
47
|
+
selector: "app-login",
|
|
48
|
+
standalone: true,
|
|
49
|
+
imports: [ButtonComponent, AlertComponent],
|
|
50
|
+
templateUrl: "./login.component.html",
|
|
95
51
|
})
|
|
52
|
+
export class LoginComponent {}
|
|
96
53
|
```
|
|
97
54
|
|
|
98
|
-
|
|
55
|
+
**Template (`login.component.html`):**
|
|
99
56
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
- `<dropi-input>` - Text input with validation
|
|
104
|
-
- `<dropi-search>` - Search input
|
|
105
|
-
- `<dropi-switch>` - Toggle switch
|
|
106
|
-
- [See all 33 components →](https://ui.dropi.co)
|
|
57
|
+
```html
|
|
58
|
+
<dropi-wc-button [type]="'primary'" [text]="'Login'" (onClick)="handleLogin()">
|
|
59
|
+
</dropi-wc-button>
|
|
107
60
|
|
|
108
|
-
|
|
61
|
+
<dropi-wc-alert [state]="'error'" [message]="'Invalid credentials'">
|
|
62
|
+
</dropi-wc-alert>
|
|
63
|
+
```
|
|
109
64
|
|
|
110
|
-
|
|
65
|
+
---
|
|
111
66
|
|
|
112
|
-
|
|
113
|
-
// ✅ CORRECT
|
|
114
|
-
import "@dropi/ui-components/dropi-tokens.css"; // First
|
|
115
|
-
import "@dropi/ui-components"; // Second
|
|
116
|
-
```
|
|
67
|
+
## 📚 Components
|
|
117
68
|
|
|
118
|
-
|
|
69
|
+
All components use the prefix `dropi-wc-`.
|
|
119
70
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
-
|
|
71
|
+
| Component | Selector | Description |
|
|
72
|
+
| ---------- | ------------------- | ------------------------------- |
|
|
73
|
+
| **Button** | `<dropi-wc-button>` | Primary/Secondary/Ghost buttons |
|
|
74
|
+
| **Alert** | `<dropi-wc-alert>` | Success/Error/Info alerts |
|
|
75
|
+
| **Input** | `<dropi-wc-input>` | Text inputs with validation |
|
|
76
|
+
| **Tag** | `<dropi-wc-tag>` | Status tags (primary/secondary) |
|
|
77
|
+
| **Switch** | `<dropi-wc-switch>` | Toggle switches |
|
|
78
|
+
| **Search** | `<dropi-wc-search>` | Search bar with autocomplete |
|
|
79
|
+
|
|
80
|
+
---
|
|
123
81
|
|
|
124
82
|
## 🛠️ Development
|
|
125
83
|
|
|
@@ -133,14 +91,3 @@ npm run build:complete
|
|
|
133
91
|
# Watch mode
|
|
134
92
|
npm run watch
|
|
135
93
|
```
|
|
136
|
-
|
|
137
|
-
## 📄 License
|
|
138
|
-
|
|
139
|
-
Proprietary - Dropi
|
|
140
|
-
|
|
141
|
-
## 🤝 Contributing
|
|
142
|
-
|
|
143
|
-
This is a private package for Dropi projects. For issues or questions, contact the UI team.
|
|
144
|
-
# ui-components
|
|
145
|
-
# ui-components
|
|
146
|
-
# ui-components
|
package/dist/README.md
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
> Framework-agnostic Web Components library built with Angular Elements
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/@dropi/ui-components)
|
|
6
|
-
[](./LICENSE)
|
|
7
6
|
|
|
8
7
|
## 📦 Installation
|
|
9
8
|
|
|
@@ -13,113 +12,72 @@ npm install @dropi/ui-components
|
|
|
13
12
|
yarn add @dropi/ui-components
|
|
14
13
|
```
|
|
15
14
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
### HTML / Vanilla JS
|
|
19
|
-
|
|
20
|
-
```html
|
|
21
|
-
<!DOCTYPE html>
|
|
22
|
-
<html>
|
|
23
|
-
<head>
|
|
24
|
-
<link
|
|
25
|
-
rel="stylesheet"
|
|
26
|
-
href="node_modules/@dropi/ui-components/dropi-tokens.css"
|
|
27
|
-
/>
|
|
28
|
-
<script
|
|
29
|
-
src="node_modules/@dropi/ui-components/index.js"
|
|
30
|
-
type="module"
|
|
31
|
-
></script>
|
|
32
|
-
</head>
|
|
33
|
-
<body>
|
|
34
|
-
<dropi-button type="primary" text="Click Me"></dropi-button>
|
|
35
|
-
<dropi-alert state="success" message="Success!"></dropi-alert>
|
|
36
|
-
</body>
|
|
37
|
-
</html>
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
### React
|
|
15
|
+
---
|
|
41
16
|
|
|
42
|
-
|
|
43
|
-
import "@dropi/ui-components/dropi-tokens.css";
|
|
44
|
-
import "@dropi/ui-components";
|
|
17
|
+
## 🚀 Quick Start
|
|
45
18
|
|
|
46
|
-
|
|
47
|
-
return (
|
|
48
|
-
<>
|
|
49
|
-
<dropi-button type="primary" text="React Button" />
|
|
50
|
-
<dropi-alert state="info" message="Works in React!" />
|
|
51
|
-
</>
|
|
52
|
-
);
|
|
53
|
-
}
|
|
54
|
-
```
|
|
19
|
+
### 1. Import Styles
|
|
55
20
|
|
|
56
|
-
|
|
21
|
+
**Crucial:** You must import the CSS tokens for the components to look right.
|
|
57
22
|
|
|
58
|
-
|
|
59
|
-
<template>
|
|
60
|
-
<dropi-button type="primary" text="Vue Button" />
|
|
61
|
-
<dropi-alert state="success" message="Works in Vue!" />
|
|
62
|
-
</template>
|
|
23
|
+
**Angular (`angular.json`):**
|
|
63
24
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
25
|
+
```json
|
|
26
|
+
"styles": [
|
|
27
|
+
"node_modules/@dropi/ui-components/dist/dropi-tokens.css",
|
|
28
|
+
"src/styles.scss"
|
|
29
|
+
]
|
|
68
30
|
```
|
|
69
31
|
|
|
70
|
-
**
|
|
32
|
+
**React / Vue / Native:**
|
|
71
33
|
|
|
72
34
|
```javascript
|
|
73
|
-
|
|
74
|
-
plugins: [
|
|
75
|
-
vue({
|
|
76
|
-
template: {
|
|
77
|
-
compilerOptions: {
|
|
78
|
-
isCustomElement: (tag) => tag.startsWith("dropi-"),
|
|
79
|
-
},
|
|
80
|
-
},
|
|
81
|
-
}),
|
|
82
|
-
],
|
|
83
|
-
};
|
|
35
|
+
import "@dropi/ui-components/dist/dropi-tokens.css";
|
|
84
36
|
```
|
|
85
37
|
|
|
86
|
-
### Angular
|
|
38
|
+
### 2. Usage (Angular)
|
|
87
39
|
|
|
88
|
-
|
|
89
|
-
// main.ts or app.module.ts
|
|
90
|
-
import '@dropi/ui-components/dropi-tokens.css';
|
|
91
|
-
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
40
|
+
**Component (`login.component.ts`):**
|
|
92
41
|
|
|
93
|
-
|
|
94
|
-
|
|
42
|
+
```typescript
|
|
43
|
+
import { Component } from "@angular/core";
|
|
44
|
+
import { ButtonComponent, AlertComponent } from "@dropi/ui-components";
|
|
45
|
+
|
|
46
|
+
@Component({
|
|
47
|
+
selector: "app-login",
|
|
48
|
+
standalone: true,
|
|
49
|
+
imports: [ButtonComponent, AlertComponent],
|
|
50
|
+
templateUrl: "./login.component.html",
|
|
95
51
|
})
|
|
52
|
+
export class LoginComponent {}
|
|
96
53
|
```
|
|
97
54
|
|
|
98
|
-
|
|
55
|
+
**Template (`login.component.html`):**
|
|
99
56
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
- `<dropi-input>` - Text input with validation
|
|
104
|
-
- `<dropi-search>` - Search input
|
|
105
|
-
- `<dropi-switch>` - Toggle switch
|
|
106
|
-
- [See all 33 components →](https://ui.dropi.co)
|
|
57
|
+
```html
|
|
58
|
+
<dropi-wc-button [type]="'primary'" [text]="'Login'" (onClick)="handleLogin()">
|
|
59
|
+
</dropi-wc-button>
|
|
107
60
|
|
|
108
|
-
|
|
61
|
+
<dropi-wc-alert [state]="'error'" [message]="'Invalid credentials'">
|
|
62
|
+
</dropi-wc-alert>
|
|
63
|
+
```
|
|
109
64
|
|
|
110
|
-
|
|
65
|
+
---
|
|
111
66
|
|
|
112
|
-
|
|
113
|
-
// ✅ CORRECT
|
|
114
|
-
import "@dropi/ui-components/dropi-tokens.css"; // First
|
|
115
|
-
import "@dropi/ui-components"; // Second
|
|
116
|
-
```
|
|
67
|
+
## 📚 Components
|
|
117
68
|
|
|
118
|
-
|
|
69
|
+
All components use the prefix `dropi-wc-`.
|
|
119
70
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
-
|
|
71
|
+
| Component | Selector | Description |
|
|
72
|
+
| ---------- | ------------------- | ------------------------------- |
|
|
73
|
+
| **Button** | `<dropi-wc-button>` | Primary/Secondary/Ghost buttons |
|
|
74
|
+
| **Alert** | `<dropi-wc-alert>` | Success/Error/Info alerts |
|
|
75
|
+
| **Input** | `<dropi-wc-input>` | Text inputs with validation |
|
|
76
|
+
| **Tag** | `<dropi-wc-tag>` | Status tags (primary/secondary) |
|
|
77
|
+
| **Switch** | `<dropi-wc-switch>` | Toggle switches |
|
|
78
|
+
| **Search** | `<dropi-wc-search>` | Search bar with autocomplete |
|
|
79
|
+
|
|
80
|
+
---
|
|
123
81
|
|
|
124
82
|
## 🛠️ Development
|
|
125
83
|
|
|
@@ -133,14 +91,3 @@ npm run build:complete
|
|
|
133
91
|
# Watch mode
|
|
134
92
|
npm run watch
|
|
135
93
|
```
|
|
136
|
-
|
|
137
|
-
## 📄 License
|
|
138
|
-
|
|
139
|
-
Proprietary - Dropi
|
|
140
|
-
|
|
141
|
-
## 🤝 Contributing
|
|
142
|
-
|
|
143
|
-
This is a private package for Dropi projects. For issues or questions, contact the UI team.
|
|
144
|
-
# ui-components
|
|
145
|
-
# ui-components
|
|
146
|
-
# ui-components
|
package/dist/esm2022/index.mjs
CHANGED
|
@@ -6,7 +6,7 @@ export { ButtonComponent } from "./components-source/dropi-button/dropi-button.c
|
|
|
6
6
|
// Exportar el módulo de elementos
|
|
7
7
|
export { DropiElementsModule } from "./lib/elements.module";
|
|
8
8
|
// Exportar funciones de registro
|
|
9
|
-
export { registerDropiElements, isComponentRegistered, } from "./lib/elements-registry";
|
|
9
|
+
export { registerDropiElements, defineCustomElements, isComponentRegistered, } from "./lib/elements-registry";
|
|
10
10
|
// Información de versión
|
|
11
11
|
export const DROPI_ELEMENTS_VERSION = "1.0.0";
|
|
12
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
12
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCw0REFBNEQ7QUFDNUQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHlEQUF5RCxDQUFDO0FBRTFGLGtDQUFrQztBQUNsQyxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUU1RCxpQ0FBaUM7QUFDakMsT0FBTyxFQUNMLHFCQUFxQixFQUNyQixvQkFBb0IsRUFDcEIscUJBQXFCLEdBQ3RCLE1BQU0seUJBQXlCLENBQUM7QUFFakMseUJBQXlCO0FBQ3pCLE1BQU0sQ0FBQyxNQUFNLHNCQUFzQixHQUFHLE9BQU8sQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogUHVibGljIEFQSSBTdXJmYWNlIGRlIEBkcm9waS91aS1jb21wb25lbnRzXG4gKi9cblxuLy8gRXhwb3J0YXIgY29tcG9uZW50ZXMgaW5kaXZpZHVhbGVzIGRlc2RlIGNvbXBvbmVudHMtc291cmNlXG5leHBvcnQgeyBCdXR0b25Db21wb25lbnQgfSBmcm9tIFwiLi9jb21wb25lbnRzLXNvdXJjZS9kcm9waS1idXR0b24vZHJvcGktYnV0dG9uLmNvbXBvbmVudFwiO1xuXG4vLyBFeHBvcnRhciBlbCBtw7NkdWxvIGRlIGVsZW1lbnRvc1xuZXhwb3J0IHsgRHJvcGlFbGVtZW50c01vZHVsZSB9IGZyb20gXCIuL2xpYi9lbGVtZW50cy5tb2R1bGVcIjtcblxuLy8gRXhwb3J0YXIgZnVuY2lvbmVzIGRlIHJlZ2lzdHJvXG5leHBvcnQge1xuICByZWdpc3RlckRyb3BpRWxlbWVudHMsXG4gIGRlZmluZUN1c3RvbUVsZW1lbnRzLFxuICBpc0NvbXBvbmVudFJlZ2lzdGVyZWQsXG59IGZyb20gXCIuL2xpYi9lbGVtZW50cy1yZWdpc3RyeVwiO1xuXG4vLyBJbmZvcm1hY2nDs24gZGUgdmVyc2nDs25cbmV4cG9ydCBjb25zdCBEUk9QSV9FTEVNRU5UU19WRVJTSU9OID0gXCIxLjAuMFwiO1xuIl19
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Este archivo contiene la función que registra todos los componentes Angular
|
|
5
5
|
* como Custom Elements del navegador usando Angular Elements.
|
|
6
6
|
*/
|
|
7
|
-
import { createCustomElement } from
|
|
7
|
+
import { createCustomElement } from "@angular/elements";
|
|
8
8
|
/**
|
|
9
9
|
* Registra todos los componentes Dropi como custom elements
|
|
10
10
|
*
|
|
@@ -28,6 +28,18 @@ import { createCustomElement } from '@angular/elements';
|
|
|
28
28
|
* });
|
|
29
29
|
* ```
|
|
30
30
|
*/
|
|
31
|
+
import { createApplication } from "@angular/platform-browser";
|
|
32
|
+
import { ButtonComponent } from "../components-source/dropi-button/dropi-button.component";
|
|
33
|
+
/**
|
|
34
|
+
* Lista interna de todos los componentes disponibles para registro automático
|
|
35
|
+
*/
|
|
36
|
+
const ALL_COMPONENTS = [
|
|
37
|
+
{
|
|
38
|
+
selector: "dropi-wc-button",
|
|
39
|
+
component: ButtonComponent,
|
|
40
|
+
description: "Button Component",
|
|
41
|
+
},
|
|
42
|
+
];
|
|
31
43
|
export function registerDropiElements(injector, components) {
|
|
32
44
|
// Registrar cada componente como custom element
|
|
33
45
|
components.forEach(({ selector, component, description }) => {
|
|
@@ -47,10 +59,25 @@ export function registerDropiElements(injector, components) {
|
|
|
47
59
|
}
|
|
48
60
|
});
|
|
49
61
|
}
|
|
62
|
+
/**
|
|
63
|
+
* Inicializa el entorno de Angular y registra todos los Web Components automáticamente.
|
|
64
|
+
* Ideal para uso en frameworks como React, Vue, o Vanilla JS.
|
|
65
|
+
*/
|
|
66
|
+
export function defineCustomElements(config) {
|
|
67
|
+
const appConfig = config && config.providers
|
|
68
|
+
? { providers: config.providers }
|
|
69
|
+
: { providers: [] };
|
|
70
|
+
return createApplication(appConfig)
|
|
71
|
+
.then((appRef) => {
|
|
72
|
+
registerDropiElements(appRef.injector, ALL_COMPONENTS);
|
|
73
|
+
console.log("🚀 Dropi UI Elements initialized successfully");
|
|
74
|
+
})
|
|
75
|
+
.catch((err) => console.error("❌ Error initializing Dropi UI Elements", err));
|
|
76
|
+
}
|
|
50
77
|
/**
|
|
51
78
|
* Función auxiliar para verificar si un componente está registrado
|
|
52
79
|
*/
|
|
53
80
|
export function isComponentRegistered(selector) {
|
|
54
81
|
return customElements.get(selector) !== undefined;
|
|
55
82
|
}
|
|
56
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
83
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxlbWVudHMtcmVnaXN0cnkuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL2VsZW1lbnRzLXJlZ2lzdHJ5LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7OztHQUtHO0FBR0gsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFXeEQ7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FzQkc7QUFDSCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUM5RCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sMERBQTBELENBQUM7QUFFM0Y7O0dBRUc7QUFDSCxNQUFNLGNBQWMsR0FBMEI7SUFDNUM7UUFDRSxRQUFRLEVBQUUsaUJBQWlCO1FBQzNCLFNBQVMsRUFBRSxlQUFlO1FBQzFCLFdBQVcsRUFBRSxrQkFBa0I7S0FDaEM7Q0FDRixDQUFDO0FBRUYsTUFBTSxVQUFVLHFCQUFxQixDQUNuQyxRQUFrQixFQUNsQixVQUFpQztJQUVqQyxnREFBZ0Q7SUFDaEQsVUFBVSxDQUFDLE9BQU8sQ0FBQyxDQUFDLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsRUFBRSxFQUFFO1FBQzFELElBQUksQ0FBQztZQUNILGtEQUFrRDtZQUNsRCxJQUFJLENBQUMsY0FBYyxDQUFDLEdBQUcsQ0FBQyxRQUFRLENBQUMsRUFBRSxDQUFDO2dCQUNsQyxNQUFNLE9BQU8sR0FBRyxtQkFBbUIsQ0FBQyxTQUFTLEVBQUUsRUFBRSxRQUFRLEVBQUUsQ0FBQyxDQUFDO2dCQUM3RCxjQUFjLENBQUMsTUFBTSxDQUFDLFFBQVEsRUFBRSxPQUFPLENBQUMsQ0FBQztnQkFDekMsT0FBTyxDQUFDLEdBQUcsQ0FDVCxnQ0FBZ0MsUUFBUSxPQUFPLFdBQVcsRUFBRSxDQUM3RCxDQUFDO1lBQ0osQ0FBQztpQkFBTSxDQUFDO2dCQUNOLE9BQU8sQ0FBQyxJQUFJLENBQUMsc0JBQXNCLFFBQVEsb0JBQW9CLENBQUMsQ0FBQztZQUNuRSxDQUFDO1FBQ0gsQ0FBQztRQUFDLE9BQU8sS0FBSyxFQUFFLENBQUM7WUFDZixPQUFPLENBQUMsS0FBSyxDQUFDLHdCQUF3QixRQUFRLElBQUksRUFBRSxLQUFLLENBQUMsQ0FBQztRQUM3RCxDQUFDO0lBQ0gsQ0FBQyxDQUFDLENBQUM7QUFDTCxDQUFDO0FBRUQ7OztHQUdHO0FBQ0gsTUFBTSxVQUFVLG9CQUFvQixDQUFDLE1BRXBDO0lBQ0MsTUFBTSxTQUFTLEdBQ2IsTUFBTSxJQUFJLE1BQU0sQ0FBQyxTQUFTO1FBQ3hCLENBQUMsQ0FBQyxFQUFFLFNBQVMsRUFBRSxNQUFNLENBQUMsU0FBUyxFQUFFO1FBQ2pDLENBQUMsQ0FBQyxFQUFFLFNBQVMsRUFBRSxFQUFFLEVBQUUsQ0FBQztJQUN4QixPQUFPLGlCQUFpQixDQUFDLFNBQVMsQ0FBQztTQUNoQyxJQUFJLENBQUMsQ0FBQyxNQUFzQixFQUFFLEVBQUU7UUFDL0IscUJBQXFCLENBQUMsTUFBTSxDQUFDLFFBQVEsRUFBRSxjQUFjLENBQUMsQ0FBQztRQUN2RCxPQUFPLENBQUMsR0FBRyxDQUFDLCtDQUErQyxDQUFDLENBQUM7SUFDL0QsQ0FBQyxDQUFDO1NBQ0QsS0FBSyxDQUFDLENBQUMsR0FBUSxFQUFFLEVBQUUsQ0FDbEIsT0FBTyxDQUFDLEtBQUssQ0FBQyx3Q0FBd0MsRUFBRSxHQUFHLENBQUMsQ0FDN0QsQ0FBQztBQUNOLENBQUM7QUFFRDs7R0FFRztBQUNILE1BQU0sVUFBVSxxQkFBcUIsQ0FBQyxRQUFnQjtJQUNwRCxPQUFPLGNBQWMsQ0FBQyxHQUFHLENBQUMsUUFBUSxDQUFDLEtBQUssU0FBUyxDQUFDO0FBQ3BELENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIFJlZ2lzdHJvIGRlIGVsZW1lbnRvcyBwZXJzb25hbGl6YWRvcyAoV2ViIENvbXBvbmVudHMpXG4gKlxuICogRXN0ZSBhcmNoaXZvIGNvbnRpZW5lIGxhIGZ1bmNpw7NuIHF1ZSByZWdpc3RyYSB0b2RvcyBsb3MgY29tcG9uZW50ZXMgQW5ndWxhclxuICogY29tbyBDdXN0b20gRWxlbWVudHMgZGVsIG5hdmVnYWRvciB1c2FuZG8gQW5ndWxhciBFbGVtZW50cy5cbiAqL1xuXG5pbXBvcnQgeyBJbmplY3RvciwgVHlwZSwgQXBwbGljYXRpb25SZWYgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgY3JlYXRlQ3VzdG9tRWxlbWVudCB9IGZyb20gXCJAYW5ndWxhci9lbGVtZW50c1wiO1xuXG4vKipcbiAqIEludGVyZmFjZSBwYXJhIGRlZmluaWNpw7NuIGRlIGNvbXBvbmVudGVzXG4gKi9cbmludGVyZmFjZSBDb21wb25lbnREZWZpbml0aW9uIHtcbiAgc2VsZWN0b3I6IHN0cmluZztcbiAgY29tcG9uZW50OiBUeXBlPGFueT47XG4gIGRlc2NyaXB0aW9uOiBzdHJpbmc7XG59XG5cbi8qKlxuICogUmVnaXN0cmEgdG9kb3MgbG9zIGNvbXBvbmVudGVzIERyb3BpIGNvbW8gY3VzdG9tIGVsZW1lbnRzXG4gKlxuICogQHBhcmFtIGluamVjdG9yIC0gRWwgaW5qZWN0b3IgZGUgQW5ndWxhciBuZWNlc2FyaW8gcGFyYSBjcmVhdGVDdXN0b21FbGVtZW50XG4gKiBAcGFyYW0gY29tcG9uZW50cyAtIEFycmF5IGRlIGNvbXBvbmVudGVzIGEgcmVnaXN0cmFyXG4gKlxuICogQGV4YW1wbGVcbiAqIGBgYHR5cGVzY3JpcHRcbiAqIGltcG9ydCB7IHBsYXRmb3JtQnJvd3NlckR5bmFtaWMgfSBmcm9tICdAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyLWR5bmFtaWMnO1xuICogaW1wb3J0IHsgcmVnaXN0ZXJEcm9waUVsZW1lbnRzIH0gZnJvbSAnQG9yb3BpL3VpLWVsZW1lbnRzJztcbiAqIGltcG9ydCB7IEJ1dHRvbkNvbXBvbmVudCB9IGZyb20gJ0BhcHAvdWknO1xuICpcbiAqIGNvbnN0IGNvbXBvbmVudHMgPSBbXG4gKiAgIHsgc2VsZWN0b3I6ICdkcm9waS1idXR0b24nLCBjb21wb25lbnQ6IEJ1dHRvbkNvbXBvbmVudCB9XG4gKiBdO1xuICpcbiAqIHBsYXRmb3JtQnJvd3NlckR5bmFtaWMoKS5ib290c3RyYXBNb2R1bGUoQXBwTW9kdWxlKVxuICogICAudGhlbigocmVmKSA9PiB7XG4gKiAgICAgY29uc3QgaW5qZWN0b3IgPSByZWYuaW5qZWN0b3I7XG4gKiAgICAgcmVnaXN0ZXJEcm9waUVsZW1lbnRzKGluamVjdG9yLCBjb21wb25lbnRzKTtcbiAqICAgfSk7XG4gKiBgYGBcbiAqL1xuaW1wb3J0IHsgY3JlYXRlQXBwbGljYXRpb24gfSBmcm9tIFwiQGFuZ3VsYXIvcGxhdGZvcm0tYnJvd3NlclwiO1xuaW1wb3J0IHsgQnV0dG9uQ29tcG9uZW50IH0gZnJvbSBcIi4uL2NvbXBvbmVudHMtc291cmNlL2Ryb3BpLWJ1dHRvbi9kcm9waS1idXR0b24uY29tcG9uZW50XCI7XG5cbi8qKlxuICogTGlzdGEgaW50ZXJuYSBkZSB0b2RvcyBsb3MgY29tcG9uZW50ZXMgZGlzcG9uaWJsZXMgcGFyYSByZWdpc3RybyBhdXRvbcOhdGljb1xuICovXG5jb25zdCBBTExfQ09NUE9ORU5UUzogQ29tcG9uZW50RGVmaW5pdGlvbltdID0gW1xuICB7XG4gICAgc2VsZWN0b3I6IFwiZHJvcGktd2MtYnV0dG9uXCIsXG4gICAgY29tcG9uZW50OiBCdXR0b25Db21wb25lbnQsXG4gICAgZGVzY3JpcHRpb246IFwiQnV0dG9uIENvbXBvbmVudFwiLFxuICB9LFxuXTtcblxuZXhwb3J0IGZ1bmN0aW9uIHJlZ2lzdGVyRHJvcGlFbGVtZW50cyhcbiAgaW5qZWN0b3I6IEluamVjdG9yLFxuICBjb21wb25lbnRzOiBDb21wb25lbnREZWZpbml0aW9uW10sXG4pOiB2b2lkIHtcbiAgLy8gUmVnaXN0cmFyIGNhZGEgY29tcG9uZW50ZSBjb21vIGN1c3RvbSBlbGVtZW50XG4gIGNvbXBvbmVudHMuZm9yRWFjaCgoeyBzZWxlY3RvciwgY29tcG9uZW50LCBkZXNjcmlwdGlvbiB9KSA9PiB7XG4gICAgdHJ5IHtcbiAgICAgIC8vIFZlcmlmaWNhciBzaSBlbCBjdXN0b20gZWxlbWVudCB5YSBlc3TDoSBkZWZpbmlkb1xuICAgICAgaWYgKCFjdXN0b21FbGVtZW50cy5nZXQoc2VsZWN0b3IpKSB7XG4gICAgICAgIGNvbnN0IGVsZW1lbnQgPSBjcmVhdGVDdXN0b21FbGVtZW50KGNvbXBvbmVudCwgeyBpbmplY3RvciB9KTtcbiAgICAgICAgY3VzdG9tRWxlbWVudHMuZGVmaW5lKHNlbGVjdG9yLCBlbGVtZW50KTtcbiAgICAgICAgY29uc29sZS5sb2coXG4gICAgICAgICAgYOKchSBXZWIgQ29tcG9uZW50IHJlZ2lzdHJhZG86IDwke3NlbGVjdG9yfT4gLSAke2Rlc2NyaXB0aW9ufWAsXG4gICAgICAgICk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICBjb25zb2xlLndhcm4oYOKaoO+4jyBDdXN0b20gZWxlbWVudCA8JHtzZWxlY3Rvcn0+IHlhIGVzdMOhIGRlZmluaWRvYCk7XG4gICAgICB9XG4gICAgfSBjYXRjaCAoZXJyb3IpIHtcbiAgICAgIGNvbnNvbGUuZXJyb3IoYOKdjCBFcnJvciByZWdpc3RyYW5kbyA8JHtzZWxlY3Rvcn0+OmAsIGVycm9yKTtcbiAgICB9XG4gIH0pO1xufVxuXG4vKipcbiAqIEluaWNpYWxpemEgZWwgZW50b3JubyBkZSBBbmd1bGFyIHkgcmVnaXN0cmEgdG9kb3MgbG9zIFdlYiBDb21wb25lbnRzIGF1dG9tw6F0aWNhbWVudGUuXG4gKiBJZGVhbCBwYXJhIHVzbyBlbiBmcmFtZXdvcmtzIGNvbW8gUmVhY3QsIFZ1ZSwgbyBWYW5pbGxhIEpTLlxuICovXG5leHBvcnQgZnVuY3Rpb24gZGVmaW5lQ3VzdG9tRWxlbWVudHMoY29uZmlnPzoge1xuICBwcm92aWRlcnM/OiBhbnlbXTtcbn0pOiBQcm9taXNlPHZvaWQ+IHtcbiAgY29uc3QgYXBwQ29uZmlnID1cbiAgICBjb25maWcgJiYgY29uZmlnLnByb3ZpZGVyc1xuICAgICAgPyB7IHByb3ZpZGVyczogY29uZmlnLnByb3ZpZGVycyB9XG4gICAgICA6IHsgcHJvdmlkZXJzOiBbXSB9O1xuICByZXR1cm4gY3JlYXRlQXBwbGljYXRpb24oYXBwQ29uZmlnKVxuICAgIC50aGVuKChhcHBSZWY6IEFwcGxpY2F0aW9uUmVmKSA9PiB7XG4gICAgICByZWdpc3RlckRyb3BpRWxlbWVudHMoYXBwUmVmLmluamVjdG9yLCBBTExfQ09NUE9ORU5UUyk7XG4gICAgICBjb25zb2xlLmxvZyhcIvCfmoAgRHJvcGkgVUkgRWxlbWVudHMgaW5pdGlhbGl6ZWQgc3VjY2Vzc2Z1bGx5XCIpO1xuICAgIH0pXG4gICAgLmNhdGNoKChlcnI6IGFueSkgPT5cbiAgICAgIGNvbnNvbGUuZXJyb3IoXCLinYwgRXJyb3IgaW5pdGlhbGl6aW5nIERyb3BpIFVJIEVsZW1lbnRzXCIsIGVyciksXG4gICAgKTtcbn1cblxuLyoqXG4gKiBGdW5jacOzbiBhdXhpbGlhciBwYXJhIHZlcmlmaWNhciBzaSB1biBjb21wb25lbnRlIGVzdMOhIHJlZ2lzdHJhZG9cbiAqL1xuZXhwb3J0IGZ1bmN0aW9uIGlzQ29tcG9uZW50UmVnaXN0ZXJlZChzZWxlY3Rvcjogc3RyaW5nKTogYm9vbGVhbiB7XG4gIHJldHVybiBjdXN0b21FbGVtZW50cy5nZXQoc2VsZWN0b3IpICE9PSB1bmRlZmluZWQ7XG59XG4iXX0=
|
|
@@ -3,6 +3,7 @@ import { Component, Input, EventEmitter, Output, NgModule } from '@angular/core'
|
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import { createCustomElement } from '@angular/elements';
|
|
6
|
+
import { createApplication } from '@angular/platform-browser';
|
|
6
7
|
|
|
7
8
|
class IconComponent {
|
|
8
9
|
el;
|
|
@@ -165,28 +166,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
165
166
|
* como Custom Elements del navegador usando Angular Elements.
|
|
166
167
|
*/
|
|
167
168
|
/**
|
|
168
|
-
*
|
|
169
|
-
*
|
|
170
|
-
* @param injector - El injector de Angular necesario para createCustomElement
|
|
171
|
-
* @param components - Array de componentes a registrar
|
|
172
|
-
*
|
|
173
|
-
* @example
|
|
174
|
-
* ```typescript
|
|
175
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
176
|
-
* import { registerDropiElements } from '@oropi/ui-elements';
|
|
177
|
-
* import { ButtonComponent } from '@app/ui';
|
|
178
|
-
*
|
|
179
|
-
* const components = [
|
|
180
|
-
* { selector: 'dropi-button', component: ButtonComponent }
|
|
181
|
-
* ];
|
|
182
|
-
*
|
|
183
|
-
* platformBrowserDynamic().bootstrapModule(AppModule)
|
|
184
|
-
* .then((ref) => {
|
|
185
|
-
* const injector = ref.injector;
|
|
186
|
-
* registerDropiElements(injector, components);
|
|
187
|
-
* });
|
|
188
|
-
* ```
|
|
169
|
+
* Lista interna de todos los componentes disponibles para registro automático
|
|
189
170
|
*/
|
|
171
|
+
const ALL_COMPONENTS = [
|
|
172
|
+
{
|
|
173
|
+
selector: "dropi-wc-button",
|
|
174
|
+
component: ButtonComponent,
|
|
175
|
+
description: "Button Component",
|
|
176
|
+
},
|
|
177
|
+
];
|
|
190
178
|
function registerDropiElements(injector, components) {
|
|
191
179
|
// Registrar cada componente como custom element
|
|
192
180
|
components.forEach(({ selector, component, description }) => {
|
|
@@ -206,6 +194,21 @@ function registerDropiElements(injector, components) {
|
|
|
206
194
|
}
|
|
207
195
|
});
|
|
208
196
|
}
|
|
197
|
+
/**
|
|
198
|
+
* Inicializa el entorno de Angular y registra todos los Web Components automáticamente.
|
|
199
|
+
* Ideal para uso en frameworks como React, Vue, o Vanilla JS.
|
|
200
|
+
*/
|
|
201
|
+
function defineCustomElements(config) {
|
|
202
|
+
const appConfig = config && config.providers
|
|
203
|
+
? { providers: config.providers }
|
|
204
|
+
: { providers: [] };
|
|
205
|
+
return createApplication(appConfig)
|
|
206
|
+
.then((appRef) => {
|
|
207
|
+
registerDropiElements(appRef.injector, ALL_COMPONENTS);
|
|
208
|
+
console.log("🚀 Dropi UI Elements initialized successfully");
|
|
209
|
+
})
|
|
210
|
+
.catch((err) => console.error("❌ Error initializing Dropi UI Elements", err));
|
|
211
|
+
}
|
|
209
212
|
/**
|
|
210
213
|
* Función auxiliar para verificar si un componente está registrado
|
|
211
214
|
*/
|
|
@@ -224,5 +227,5 @@ const DROPI_ELEMENTS_VERSION = "1.0.0";
|
|
|
224
227
|
* Generated bundle index. Do not edit.
|
|
225
228
|
*/
|
|
226
229
|
|
|
227
|
-
export { ButtonComponent, DROPI_ELEMENTS_VERSION, DropiElementsModule, isComponentRegistered, registerDropiElements };
|
|
230
|
+
export { ButtonComponent, DROPI_ELEMENTS_VERSION, DropiElementsModule, defineCustomElements, isComponentRegistered, registerDropiElements };
|
|
228
231
|
//# sourceMappingURL=dropi-ui-components.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropi-ui-components.mjs","sources":["../../src/components-source/icon/icon.component.ts","../../src/components-source/icon/icon.component.html","../../src/components-source/dropi-button/dropi-button.component.ts","../../src/components-source/dropi-button/dropi-button.component.html","../../src/lib/elements.module.ts","../../src/lib/elements-registry.ts","../../src/index.ts","../../src/dropi-ui-components.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n Component,\n Input,\n ElementRef,\n Renderer2,\n OnInit,\n OnChanges,\n SimpleChanges,\n} from '@angular/core';\n\n@Component({\n selector: 'app-icon',\n standalone: true,\n templateUrl: './icon.component.html',\n styleUrls: ['./icon.component.scss'],\n imports: [CommonModule],\n})\nexport class IconComponent implements OnInit, OnChanges {\n // Nombre del ícono, debe coincidir con el \"id\" en el sprite SVG\n @Input() name: string = '';\n // Atributos opcionales para controlar el tamaño y color\n @Input() width: string = '24px';\n @Input() height: string = '24px';\n @Input() color: string = 'currentColor';\n constructor(\n private el: ElementRef,\n private renderer: Renderer2,\n ) {}\n\n ngOnInit() {\n this.setColors();\n }\n\n ngOnChanges(changes: SimpleChanges) {\n if (changes['color'] && !changes['color'].firstChange) this.setColors();\n }\n\n setColors() {\n if (!this.color) {\n // Si no hay color, no hacer nada\n return;\n }\n\n if (this.color.startsWith('#')) {\n // Si es un color directo (ej: \"#ff0000\"), lo usa normal\n this.renderer.setStyle(this.el.nativeElement, 'fill', this.color);\n } else {\n // Si el color es un token, usa la variable CSS\n this.renderer.setStyle(this.el.nativeElement, 'fill', `var(--${this.color})`);\n }\n }\n}\n","<svg [attr.width]=\"width\" [attr.height]=\"height\" [ngClass]=\"{ spin: name === 'Spinner' }\">\n <use [attr.xlink:href]=\"'assets/icons/symbol/svg/sprite.css.svg#' + name\"></use>\n</svg>\n","import { Component, EventEmitter, Input, Output } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { IconComponent } from \"../icon/icon.component\";\n\nexport type ButtonType =\n | \"legacy\"\n | \"default\"\n | \"success\"\n | \"info\"\n | \"error\"\n | \"warning\"\n | \"dropdown\";\nexport type ButtonSeverity = \"primary\" | \"secondary\" | \"tertiary\";\nexport type ButtonSize = \"large\" | \"normal\" | \"small\";\nexport type ButtonState = \"default\" | \"disabled\" | \"loading\";\n\n// @figma-node 2-381\n@Component({\n selector: \"dropi-wc-button\",\n standalone: true,\n imports: [CommonModule, IconComponent],\n templateUrl: \"./dropi-button.component.html\",\n styleUrls: [\"./dropi-button.component.scss\"],\n host: { \"data-figma-node\": \"2-381\" },\n})\nexport class ButtonComponent {\n @Input() type: ButtonType = \"default\";\n @Input() severity: ButtonSeverity = \"primary\";\n @Input() size: ButtonSize = \"normal\";\n @Input() state: ButtonState = \"default\";\n @Input() preIcon: string = \"\";\n @Input() postIcon: string = \"\";\n @Input() text: string = \"\";\n @Output() onClick = new EventEmitter<Event>();\n\n colorload = \"var(--Primary-Primary-500)\";\n\n colorMap: { [key: string]: string } = {\n default: \"Primary-Primary-\",\n success: \"Success-Success-\",\n error: \"Error-Error-\",\n info: \"Info-Info-\",\n legacy: \"Secondary-Secondary-\",\n warning: \"Warning-Warning-\",\n };\n\n get iconSize(): string {\n switch (this.size) {\n case \"large\":\n return \"24px\";\n case \"small\":\n return \"16px\";\n default:\n return \"18px\"; // Tamaño por defecto (normal)\n }\n }\n\n get color() {\n let intensity = this.state === \"disabled\" ? \"300\" : \"500\";\n return this.colorMap[this.type] + intensity;\n }\n\n get fontColor(): string {\n switch (this.severity) {\n case \"tertiary\":\n return this.type === \"default\" || this.type === \"legacy\"\n ? \"Gray-Gray-500\"\n : this.color;\n case \"secondary\":\n return this.color;\n default:\n return \"Neutral-White\";\n }\n }\n\n get svgColor(): string {\n return `var(--${this.fontColor})`;\n }\n handleClick(event: Event) {\n if (this.state !== \"disabled\" && this.state !== \"loading\") {\n this.onClick.emit(event);\n }\n }\n}\n","<button\n class=\"btn\"\n [ngClass]=\"[!text ? 'without-text' : '', severity, type, size, state]\"\n [disabled]=\"state === 'disabled' || state === 'loading'\"\n (click)=\"handleClick($event)\"\n>\n <app-icon\n *ngIf=\"preIcon !== ''\"\n [name]=\"preIcon\"\n [width]=\"iconSize\"\n [height]=\"iconSize\"\n [color]=\"fontColor\"\n ></app-icon>\n <span *ngIf=\"text !== ''\" class=\"text\">{{ text }}</span>\n <app-icon\n *ngIf=\"postIcon !== '' || type === 'dropdown'\"\n [name]=\"type == 'dropdown' ? 'Dropdown-down' : postIcon\"\n [width]=\"iconSize\"\n [height]=\"iconSize\"\n [color]=\"fontColor\"\n ></app-icon>\n <svg\n *ngIf=\"state === 'loading'\"\n class=\"spin\"\n [attr.width]=\"iconSize\"\n [attr.height]=\"iconSize\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M22.8 12C23.4627 12 24.0062 11.4614 23.9401 10.802C23.8232 9.6371 23.5362 8.49339 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913445C15.5066 0.463778 14.3629 0.17683 13.198 0.0599502C12.5386 -0.00621439 12 0.537258 12 1.2C12 1.86274 12.5393 2.39227 13.1969 2.4749C14.0463 2.58164 14.8795 2.80176 15.6738 3.13076C16.8385 3.6132 17.8968 4.32033 18.7882 5.21177C19.6797 6.10322 20.3868 7.16151 20.8692 8.32624C21.1982 9.12051 21.4184 9.95367 21.5251 10.8031C21.6077 11.4607 22.1373 12 22.8 12Z\"\n [attr.fill]=\"svgColor\"\n />\n </svg>\n <ng-content></ng-content>\n</button>\n","/**\n * Módulo principal de Dropi UI Elements\n *\n * Este módulo proporciona funciones auxiliares para convertir\n * componentes Angular en Web Components\n */\n\nimport { NgModule } from '@angular/core';\n\n/**\n * Módulo auxiliar de Angular Elements\n *\n * Este es un módulo vacío que sirve como punto de entrada\n * La conversión a Web Components se hace mediante la función\n * registerDropiElements\n */\n@NgModule({\n imports: [],\n declarations: [],\n exports: [],\n})\nexport class DropiElementsModule {}\n","/**\n * Registro de elementos personalizados (Web Components)\n *\n * Este archivo contiene la función que registra todos los componentes Angular\n * como Custom Elements del navegador usando Angular Elements.\n */\n\nimport { Injector, Type } from '@angular/core';\nimport { createCustomElement } from '@angular/elements';\n\n/**\n * Interface para definición de componentes\n */\ninterface ComponentDefinition {\n selector: string;\n component: Type<any>;\n description: string;\n}\n\n/**\n * Registra todos los componentes Dropi como custom elements\n *\n * @param injector - El injector de Angular necesario para createCustomElement\n * @param components - Array de componentes a registrar\n *\n * @example\n * ```typescript\n * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n * import { registerDropiElements } from '@oropi/ui-elements';\n * import { ButtonComponent } from '@app/ui';\n *\n * const components = [\n * { selector: 'dropi-button', component: ButtonComponent }\n * ];\n *\n * platformBrowserDynamic().bootstrapModule(AppModule)\n * .then((ref) => {\n * const injector = ref.injector;\n * registerDropiElements(injector, components);\n * });\n * ```\n */\nexport function registerDropiElements(injector: Injector, components: ComponentDefinition[]): void {\n // Registrar cada componente como custom element\n components.forEach(({ selector, component, description }) => {\n try {\n // Verificar si el custom element ya está definido\n if (!customElements.get(selector)) {\n const element = createCustomElement(component, { injector });\n customElements.define(selector, element);\n console.log(`✅ Web Component registrado: <${selector}> - ${description}`);\n } else {\n console.warn(`⚠️ Custom element <${selector}> ya está definido`);\n }\n } catch (error) {\n console.error(`❌ Error registrando <${selector}>:`, error);\n }\n });\n}\n\n/**\n * Función auxiliar para verificar si un componente está registrado\n */\nexport function isComponentRegistered(selector: string): boolean {\n return customElements.get(selector) !== undefined;\n}\n","/**\n * Public API Surface de @dropi/ui-components\n */\n\n// Exportar componentes individuales desde components-source\nexport { ButtonComponent } from \"./components-source/dropi-button/dropi-button.component\";\n\n// Exportar el módulo de elementos\nexport { DropiElementsModule } from \"./lib/elements.module\";\n\n// Exportar funciones de registro\nexport {\n registerDropiElements,\n isComponentRegistered,\n} from \"./lib/elements-registry\";\n\n// Información de versión\nexport const DROPI_ELEMENTS_VERSION = \"1.0.0\";\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAkBa,aAAa,CAAA;AAQd,IAAA,EAAA,CAAA;AACA,IAAA,QAAA,CAAA;;IAPD,IAAI,GAAW,EAAE,CAAC;;IAElB,KAAK,GAAW,MAAM,CAAC;IACvB,MAAM,GAAW,MAAM,CAAC;IACxB,KAAK,GAAW,cAAc,CAAC;IACxC,WACU,CAAA,EAAc,EACd,QAAmB,EAAA;QADnB,IAAE,CAAA,EAAA,GAAF,EAAE,CAAY;QACd,IAAQ,CAAA,QAAA,GAAR,QAAQ,CAAW;KACzB;IAEJ,QAAQ,GAAA;QACN,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;AAED,IAAA,WAAW,CAAC,OAAsB,EAAA;QAChC,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,WAAW;YAAE,IAAI,CAAC,SAAS,EAAE,CAAC;KACzE;IAED,SAAS,GAAA;AACP,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;;YAEf,OAAO;SACR;QAED,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;;AAE9B,YAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;SACnE;aAAM;;AAEL,YAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,CAAS,MAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAA,CAAG,CAAC,CAAC;SAC/E;KACF;wGAjCU,aAAa,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;4FAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClB1B,kMAGA,EAAA,MAAA,EAAA,CAAA,4CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDaY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAEX,aAAa,EAAA,UAAA,EAAA,CAAA;kBAPzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EACR,UAAA,EAAA,IAAI,EAGP,OAAA,EAAA,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,kMAAA,EAAA,MAAA,EAAA,CAAA,4CAAA,CAAA,EAAA,CAAA;uGAId,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAEG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,MAAM,EAAA,CAAA;sBAAd,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;;;AERR;MASa,eAAe,CAAA;IACjB,IAAI,GAAe,SAAS,CAAC;IAC7B,QAAQ,GAAmB,SAAS,CAAC;IACrC,IAAI,GAAe,QAAQ,CAAC;IAC5B,KAAK,GAAgB,SAAS,CAAC;IAC/B,OAAO,GAAW,EAAE,CAAC;IACrB,QAAQ,GAAW,EAAE,CAAC;IACtB,IAAI,GAAW,EAAE,CAAC;AACjB,IAAA,OAAO,GAAG,IAAI,YAAY,EAAS,CAAC;IAE9C,SAAS,GAAG,4BAA4B,CAAC;AAEzC,IAAA,QAAQ,GAA8B;AACpC,QAAA,OAAO,EAAE,kBAAkB;AAC3B,QAAA,OAAO,EAAE,kBAAkB;AAC3B,QAAA,KAAK,EAAE,cAAc;AACrB,QAAA,IAAI,EAAE,YAAY;AAClB,QAAA,MAAM,EAAE,sBAAsB;AAC9B,QAAA,OAAO,EAAE,kBAAkB;KAC5B,CAAC;AAEF,IAAA,IAAI,QAAQ,GAAA;AACV,QAAA,QAAQ,IAAI,CAAC,IAAI;AACf,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,MAAM,CAAC;AAChB,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,MAAM,CAAC;AAChB,YAAA;gBACE,OAAO,MAAM,CAAC;SACjB;KACF;AAED,IAAA,IAAI,KAAK,GAAA;AACP,QAAA,IAAI,SAAS,GAAG,IAAI,CAAC,KAAK,KAAK,UAAU,GAAG,KAAK,GAAG,KAAK,CAAC;QAC1D,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;KAC7C;AAED,IAAA,IAAI,SAAS,GAAA;AACX,QAAA,QAAQ,IAAI,CAAC,QAAQ;AACnB,YAAA,KAAK,UAAU;gBACb,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ;AACtD,sBAAE,eAAe;AACjB,sBAAE,IAAI,CAAC,KAAK,CAAC;AACjB,YAAA,KAAK,WAAW;gBACd,OAAO,IAAI,CAAC,KAAK,CAAC;AACpB,YAAA;AACE,gBAAA,OAAO,eAAe,CAAC;SAC1B;KACF;AAED,IAAA,IAAI,QAAQ,GAAA;AACV,QAAA,OAAO,CAAS,MAAA,EAAA,IAAI,CAAC,SAAS,GAAG,CAAC;KACnC;AACD,IAAA,WAAW,CAAC,KAAY,EAAA;AACtB,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,UAAU,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;AACzD,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC1B;KACF;wGAzDU,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,ECzB5B,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,UAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,qgDAqCA,EDjBY,MAAA,EAAA,CAAA,ivLAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,iOAAE,aAAa,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,QAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAK1B,eAAe,EAAA,UAAA,EAAA,CAAA;kBAR3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EACf,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,CAAC,YAAY,EAAE,aAAa,CAAC,EAGhC,IAAA,EAAA,EAAE,iBAAiB,EAAE,OAAO,EAAE,EAAA,QAAA,EAAA,qgDAAA,EAAA,MAAA,EAAA,CAAA,ivLAAA,CAAA,EAAA,CAAA;8BAG3B,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACI,OAAO,EAAA,CAAA;sBAAhB,MAAM;;;AEjCT;;;;;AAKG;AAIH;;;;;;AAMG;MAMU,mBAAmB,CAAA;wGAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;yGAAnB,mBAAmB,EAAA,CAAA,CAAA;yGAAnB,mBAAmB,EAAA,CAAA,CAAA;;4FAAnB,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAL/B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,EAAE;AACX,oBAAA,YAAY,EAAE,EAAE;AAChB,oBAAA,OAAO,EAAE,EAAE;AACZ,iBAAA,CAAA;;;ACpBD;;;;;AAKG;AAcH;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACa,SAAA,qBAAqB,CAAC,QAAkB,EAAE,UAAiC,EAAA;;AAEzF,IAAA,UAAU,CAAC,OAAO,CAAC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,KAAI;AAC1D,QAAA,IAAI;;YAEF,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;gBACjC,MAAM,OAAO,GAAG,mBAAmB,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC;AAC7D,gBAAA,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;gBACzC,OAAO,CAAC,GAAG,CAAC,CAAA,6BAAA,EAAgC,QAAQ,CAAO,IAAA,EAAA,WAAW,CAAE,CAAA,CAAC,CAAC;aAC3E;iBAAM;AACL,gBAAA,OAAO,CAAC,IAAI,CAAC,sBAAsB,QAAQ,CAAA,kBAAA,CAAoB,CAAC,CAAC;aAClE;SACF;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,CAAA,qBAAA,EAAwB,QAAQ,CAAI,EAAA,CAAA,EAAE,KAAK,CAAC,CAAC;SAC5D;AACH,KAAC,CAAC,CAAC;AACL,CAAC;AAED;;AAEG;AACG,SAAU,qBAAqB,CAAC,QAAgB,EAAA;IACpD,OAAO,cAAc,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,SAAS,CAAC;AACpD;;ACjEA;;AAEG;AAEH;AAYA;AACO,MAAM,sBAAsB,GAAG;;ACjBtC;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"dropi-ui-components.mjs","sources":["../../src/components-source/icon/icon.component.ts","../../src/components-source/icon/icon.component.html","../../src/components-source/dropi-button/dropi-button.component.ts","../../src/components-source/dropi-button/dropi-button.component.html","../../src/lib/elements.module.ts","../../src/lib/elements-registry.ts","../../src/index.ts","../../src/dropi-ui-components.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n Component,\n Input,\n ElementRef,\n Renderer2,\n OnInit,\n OnChanges,\n SimpleChanges,\n} from '@angular/core';\n\n@Component({\n selector: 'app-icon',\n standalone: true,\n templateUrl: './icon.component.html',\n styleUrls: ['./icon.component.scss'],\n imports: [CommonModule],\n})\nexport class IconComponent implements OnInit, OnChanges {\n // Nombre del ícono, debe coincidir con el \"id\" en el sprite SVG\n @Input() name: string = '';\n // Atributos opcionales para controlar el tamaño y color\n @Input() width: string = '24px';\n @Input() height: string = '24px';\n @Input() color: string = 'currentColor';\n constructor(\n private el: ElementRef,\n private renderer: Renderer2,\n ) {}\n\n ngOnInit() {\n this.setColors();\n }\n\n ngOnChanges(changes: SimpleChanges) {\n if (changes['color'] && !changes['color'].firstChange) this.setColors();\n }\n\n setColors() {\n if (!this.color) {\n // Si no hay color, no hacer nada\n return;\n }\n\n if (this.color.startsWith('#')) {\n // Si es un color directo (ej: \"#ff0000\"), lo usa normal\n this.renderer.setStyle(this.el.nativeElement, 'fill', this.color);\n } else {\n // Si el color es un token, usa la variable CSS\n this.renderer.setStyle(this.el.nativeElement, 'fill', `var(--${this.color})`);\n }\n }\n}\n","<svg [attr.width]=\"width\" [attr.height]=\"height\" [ngClass]=\"{ spin: name === 'Spinner' }\">\n <use [attr.xlink:href]=\"'assets/icons/symbol/svg/sprite.css.svg#' + name\"></use>\n</svg>\n","import { Component, EventEmitter, Input, Output } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { IconComponent } from \"../icon/icon.component\";\n\nexport type ButtonType =\n | \"legacy\"\n | \"default\"\n | \"success\"\n | \"info\"\n | \"error\"\n | \"warning\"\n | \"dropdown\";\nexport type ButtonSeverity = \"primary\" | \"secondary\" | \"tertiary\";\nexport type ButtonSize = \"large\" | \"normal\" | \"small\";\nexport type ButtonState = \"default\" | \"disabled\" | \"loading\";\n\n// @figma-node 2-381\n@Component({\n selector: \"dropi-wc-button\",\n standalone: true,\n imports: [CommonModule, IconComponent],\n templateUrl: \"./dropi-button.component.html\",\n styleUrls: [\"./dropi-button.component.scss\"],\n host: { \"data-figma-node\": \"2-381\" },\n})\nexport class ButtonComponent {\n @Input() type: ButtonType = \"default\";\n @Input() severity: ButtonSeverity = \"primary\";\n @Input() size: ButtonSize = \"normal\";\n @Input() state: ButtonState = \"default\";\n @Input() preIcon: string = \"\";\n @Input() postIcon: string = \"\";\n @Input() text: string = \"\";\n @Output() onClick = new EventEmitter<Event>();\n\n colorload = \"var(--Primary-Primary-500)\";\n\n colorMap: { [key: string]: string } = {\n default: \"Primary-Primary-\",\n success: \"Success-Success-\",\n error: \"Error-Error-\",\n info: \"Info-Info-\",\n legacy: \"Secondary-Secondary-\",\n warning: \"Warning-Warning-\",\n };\n\n get iconSize(): string {\n switch (this.size) {\n case \"large\":\n return \"24px\";\n case \"small\":\n return \"16px\";\n default:\n return \"18px\"; // Tamaño por defecto (normal)\n }\n }\n\n get color() {\n let intensity = this.state === \"disabled\" ? \"300\" : \"500\";\n return this.colorMap[this.type] + intensity;\n }\n\n get fontColor(): string {\n switch (this.severity) {\n case \"tertiary\":\n return this.type === \"default\" || this.type === \"legacy\"\n ? \"Gray-Gray-500\"\n : this.color;\n case \"secondary\":\n return this.color;\n default:\n return \"Neutral-White\";\n }\n }\n\n get svgColor(): string {\n return `var(--${this.fontColor})`;\n }\n handleClick(event: Event) {\n if (this.state !== \"disabled\" && this.state !== \"loading\") {\n this.onClick.emit(event);\n }\n }\n}\n","<button\n class=\"btn\"\n [ngClass]=\"[!text ? 'without-text' : '', severity, type, size, state]\"\n [disabled]=\"state === 'disabled' || state === 'loading'\"\n (click)=\"handleClick($event)\"\n>\n <app-icon\n *ngIf=\"preIcon !== ''\"\n [name]=\"preIcon\"\n [width]=\"iconSize\"\n [height]=\"iconSize\"\n [color]=\"fontColor\"\n ></app-icon>\n <span *ngIf=\"text !== ''\" class=\"text\">{{ text }}</span>\n <app-icon\n *ngIf=\"postIcon !== '' || type === 'dropdown'\"\n [name]=\"type == 'dropdown' ? 'Dropdown-down' : postIcon\"\n [width]=\"iconSize\"\n [height]=\"iconSize\"\n [color]=\"fontColor\"\n ></app-icon>\n <svg\n *ngIf=\"state === 'loading'\"\n class=\"spin\"\n [attr.width]=\"iconSize\"\n [attr.height]=\"iconSize\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M22.8 12C23.4627 12 24.0062 11.4614 23.9401 10.802C23.8232 9.6371 23.5362 8.49339 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913445C15.5066 0.463778 14.3629 0.17683 13.198 0.0599502C12.5386 -0.00621439 12 0.537258 12 1.2C12 1.86274 12.5393 2.39227 13.1969 2.4749C14.0463 2.58164 14.8795 2.80176 15.6738 3.13076C16.8385 3.6132 17.8968 4.32033 18.7882 5.21177C19.6797 6.10322 20.3868 7.16151 20.8692 8.32624C21.1982 9.12051 21.4184 9.95367 21.5251 10.8031C21.6077 11.4607 22.1373 12 22.8 12Z\"\n [attr.fill]=\"svgColor\"\n />\n </svg>\n <ng-content></ng-content>\n</button>\n","/**\n * Módulo principal de Dropi UI Elements\n *\n * Este módulo proporciona funciones auxiliares para convertir\n * componentes Angular en Web Components\n */\n\nimport { NgModule } from '@angular/core';\n\n/**\n * Módulo auxiliar de Angular Elements\n *\n * Este es un módulo vacío que sirve como punto de entrada\n * La conversión a Web Components se hace mediante la función\n * registerDropiElements\n */\n@NgModule({\n imports: [],\n declarations: [],\n exports: [],\n})\nexport class DropiElementsModule {}\n","/**\n * Registro de elementos personalizados (Web Components)\n *\n * Este archivo contiene la función que registra todos los componentes Angular\n * como Custom Elements del navegador usando Angular Elements.\n */\n\nimport { Injector, Type, ApplicationRef } from \"@angular/core\";\nimport { createCustomElement } from \"@angular/elements\";\n\n/**\n * Interface para definición de componentes\n */\ninterface ComponentDefinition {\n selector: string;\n component: Type<any>;\n description: string;\n}\n\n/**\n * Registra todos los componentes Dropi como custom elements\n *\n * @param injector - El injector de Angular necesario para createCustomElement\n * @param components - Array de componentes a registrar\n *\n * @example\n * ```typescript\n * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n * import { registerDropiElements } from '@oropi/ui-elements';\n * import { ButtonComponent } from '@app/ui';\n *\n * const components = [\n * { selector: 'dropi-button', component: ButtonComponent }\n * ];\n *\n * platformBrowserDynamic().bootstrapModule(AppModule)\n * .then((ref) => {\n * const injector = ref.injector;\n * registerDropiElements(injector, components);\n * });\n * ```\n */\nimport { createApplication } from \"@angular/platform-browser\";\nimport { ButtonComponent } from \"../components-source/dropi-button/dropi-button.component\";\n\n/**\n * Lista interna de todos los componentes disponibles para registro automático\n */\nconst ALL_COMPONENTS: ComponentDefinition[] = [\n {\n selector: \"dropi-wc-button\",\n component: ButtonComponent,\n description: \"Button Component\",\n },\n];\n\nexport function registerDropiElements(\n injector: Injector,\n components: ComponentDefinition[],\n): void {\n // Registrar cada componente como custom element\n components.forEach(({ selector, component, description }) => {\n try {\n // Verificar si el custom element ya está definido\n if (!customElements.get(selector)) {\n const element = createCustomElement(component, { injector });\n customElements.define(selector, element);\n console.log(\n `✅ Web Component registrado: <${selector}> - ${description}`,\n );\n } else {\n console.warn(`⚠️ Custom element <${selector}> ya está definido`);\n }\n } catch (error) {\n console.error(`❌ Error registrando <${selector}>:`, error);\n }\n });\n}\n\n/**\n * Inicializa el entorno de Angular y registra todos los Web Components automáticamente.\n * Ideal para uso en frameworks como React, Vue, o Vanilla JS.\n */\nexport function defineCustomElements(config?: {\n providers?: any[];\n}): Promise<void> {\n const appConfig =\n config && config.providers\n ? { providers: config.providers }\n : { providers: [] };\n return createApplication(appConfig)\n .then((appRef: ApplicationRef) => {\n registerDropiElements(appRef.injector, ALL_COMPONENTS);\n console.log(\"🚀 Dropi UI Elements initialized successfully\");\n })\n .catch((err: any) =>\n console.error(\"❌ Error initializing Dropi UI Elements\", err),\n );\n}\n\n/**\n * Función auxiliar para verificar si un componente está registrado\n */\nexport function isComponentRegistered(selector: string): boolean {\n return customElements.get(selector) !== undefined;\n}\n","/**\n * Public API Surface de @dropi/ui-components\n */\n\n// Exportar componentes individuales desde components-source\nexport { ButtonComponent } from \"./components-source/dropi-button/dropi-button.component\";\n\n// Exportar el módulo de elementos\nexport { DropiElementsModule } from \"./lib/elements.module\";\n\n// Exportar funciones de registro\nexport {\n registerDropiElements,\n defineCustomElements,\n isComponentRegistered,\n} from \"./lib/elements-registry\";\n\n// Información de versión\nexport const DROPI_ELEMENTS_VERSION = \"1.0.0\";\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -3,5 +3,5 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export { ButtonComponent } from "./components-source/dropi-button/dropi-button.component";
|
|
5
5
|
export { DropiElementsModule } from "./lib/elements.module";
|
|
6
|
-
export { registerDropiElements, isComponentRegistered, } from "./lib/elements-registry";
|
|
6
|
+
export { registerDropiElements, defineCustomElements, isComponentRegistered, } from "./lib/elements-registry";
|
|
7
7
|
export declare const DROPI_ELEMENTS_VERSION = "1.0.0";
|