@dropi/ui-components 1.0.3 → 1.0.6
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/dropi-tokens.css +152 -0
- 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 +9 -6
- package/scripts/init.js +65 -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
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
/* ============================================
|
|
2
|
+
DROPI WEB COMPONENTS - GLOBAL TOKENS
|
|
3
|
+
============================================
|
|
4
|
+
Este archivo contiene SOLO las variables CSS
|
|
5
|
+
necesarias para los Web Components.
|
|
6
|
+
Se incluye automáticamente en el bundle.
|
|
7
|
+
============================================ */
|
|
8
|
+
|
|
9
|
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
|
|
10
|
+
|
|
11
|
+
:root {
|
|
12
|
+
/* ===== NEUTRAL ===== */
|
|
13
|
+
--White: #ffffff;
|
|
14
|
+
--Neutral-White: #ffffff;
|
|
15
|
+
--Black: #000000;
|
|
16
|
+
|
|
17
|
+
/* ===== GRAY ===== */
|
|
18
|
+
--Gray-50: #f7f8fa;
|
|
19
|
+
--Gray-Gray-50: #f7f8fa;
|
|
20
|
+
--Gray-100: #e6eaf2;
|
|
21
|
+
--Gray-200: #c3c9d9;
|
|
22
|
+
--Gray-gray-200: #c3c9d9;
|
|
23
|
+
--Gray-300: #a3abbf;
|
|
24
|
+
--Gray-Gray-300: #a3abbf;
|
|
25
|
+
--Gray-400: #858ea6;
|
|
26
|
+
--Gray-500: #69738c;
|
|
27
|
+
--Gray-Gray-500: #69738c;
|
|
28
|
+
--Gray-600: #475066;
|
|
29
|
+
--Gray-700: #32394d;
|
|
30
|
+
--Gray-800: #1f2433;
|
|
31
|
+
--Gray-900: #0e111a;
|
|
32
|
+
|
|
33
|
+
/* ===== PRIMARY ===== */
|
|
34
|
+
--Primary-Primary-50: #fef8f2;
|
|
35
|
+
--Primary-Primary-100: #ffecda;
|
|
36
|
+
--Primary-Primary-200: #fcddbd;
|
|
37
|
+
--Primary-Primary-300: #f2bc85;
|
|
38
|
+
--Primary-Primary-400: #f7b46f;
|
|
39
|
+
--Primary-Primary-500: #f49a3d;
|
|
40
|
+
--Primary-Primary-600: #e58017;
|
|
41
|
+
--Primary-Primary-700: #99540f;
|
|
42
|
+
--Primary-Primary-800: #66380a;
|
|
43
|
+
--Primary-Primary-900: #331c05;
|
|
44
|
+
|
|
45
|
+
/* ===== SECONDARY ===== */
|
|
46
|
+
--Secondary-Secondary-50: #f0fafc;
|
|
47
|
+
--Secondary-Secondary-100: #cee8f2;
|
|
48
|
+
--Secondary-Secondary-200: #95d0e5;
|
|
49
|
+
--Secondary-Secondary-300: #62bad9;
|
|
50
|
+
--Secondary-Secondary-400: #33a4cc;
|
|
51
|
+
--Secondary-Secondary-500: #008dbf;
|
|
52
|
+
--Secondary-Secondary-600: #007199;
|
|
53
|
+
--Secondary-Secondary-700: #005573;
|
|
54
|
+
--Secondary-Secondary-800: #00384d;
|
|
55
|
+
--Secondary-Secondary-900: #001c26;
|
|
56
|
+
|
|
57
|
+
/* ===== FEEDBACK ===== */
|
|
58
|
+
--Success-Success-50: #e7f8f3;
|
|
59
|
+
--Success-Success-100: #b3eada;
|
|
60
|
+
--Success-Success-200: #8ee0c8;
|
|
61
|
+
--Success-Success-300: #5bd1af;
|
|
62
|
+
--Success-Success-400: #3bc99f;
|
|
63
|
+
--Success-Success-500: #0abb87;
|
|
64
|
+
--Success-Success-600: #09aa7b;
|
|
65
|
+
--Success-Success-700: #078560;
|
|
66
|
+
--Success-Success-800: #06674a;
|
|
67
|
+
--Success-Success-900: #044f39;
|
|
68
|
+
|
|
69
|
+
--Error-Error-50: #fef0f0;
|
|
70
|
+
--Error-Error-100: #fcd1d1;
|
|
71
|
+
--Error-Error-200: #fababb;
|
|
72
|
+
--Error-Error-300: #f89b9c;
|
|
73
|
+
--Error-Error-400: #f68889;
|
|
74
|
+
--Error-Error-500: #f46a6b;
|
|
75
|
+
--Error-Error-600: #de6061;
|
|
76
|
+
--Error-Error-700: #ad4b4c;
|
|
77
|
+
--Error-Error-800: #863a3b;
|
|
78
|
+
--Error-Error-900: #662d2d;
|
|
79
|
+
|
|
80
|
+
--Info-Info-50: #eef6fe;
|
|
81
|
+
--Info-Info-100: #c9e3fb;
|
|
82
|
+
--Info-Info-200: #afd6f9;
|
|
83
|
+
--Info-Info-300: #8ac3f6;
|
|
84
|
+
--Info-Info-400: #73b7f4;
|
|
85
|
+
--Info-Info-500: #50a5f1;
|
|
86
|
+
--Info-Info-600: #4996db;
|
|
87
|
+
--Info-Info-700: #3975ab;
|
|
88
|
+
--Info-Info-800: #2c5b85;
|
|
89
|
+
--Info-Info-900: #224565;
|
|
90
|
+
|
|
91
|
+
--Warning-Warning-50: #fef8ed;
|
|
92
|
+
--Warning-Warning-100: #fbe8c8;
|
|
93
|
+
--Warning-Warning-200: #f9ddad;
|
|
94
|
+
--Warning-Warning-300: #f6cd87;
|
|
95
|
+
--Warning-Warning-400: #f4c370;
|
|
96
|
+
--Warning-Warning-500: #f1b44c;
|
|
97
|
+
--Warning-Warning-600: #dba445;
|
|
98
|
+
--Warning-Warning-700: #ab8036;
|
|
99
|
+
--Warning-Warning-800: #85632a;
|
|
100
|
+
--Warning-Warning-900: #654c20;
|
|
101
|
+
|
|
102
|
+
/* ===== BORDERS ===== */
|
|
103
|
+
--Border-1: 4px;
|
|
104
|
+
--Border-2: 8px;
|
|
105
|
+
--Border-3: 12px;
|
|
106
|
+
--Border-4: 24px;
|
|
107
|
+
--Border-5: 32px;
|
|
108
|
+
|
|
109
|
+
/* ===== SPACING ===== */
|
|
110
|
+
--Size-1: 4px;
|
|
111
|
+
--Size-2: 8px;
|
|
112
|
+
--Size-3: 12px;
|
|
113
|
+
--Size-4: 16px;
|
|
114
|
+
--Size-5: 24px;
|
|
115
|
+
--Size-6: 32px;
|
|
116
|
+
--Size-7: 40px;
|
|
117
|
+
--Size-8: 48px;
|
|
118
|
+
--Size-9: 56px;
|
|
119
|
+
--Size-10: 64px;
|
|
120
|
+
|
|
121
|
+
/* ===== TYPOGRAPHY ===== */
|
|
122
|
+
--font-family-01: 'Inter', sans-serif;
|
|
123
|
+
--font-size-xxxxl: 36px;
|
|
124
|
+
--font-size-xxxl: 30px;
|
|
125
|
+
--font-size-xxl: 24px;
|
|
126
|
+
--font-size-xl: 20px;
|
|
127
|
+
--font-size-l: 18px;
|
|
128
|
+
--font-size-m: 16px;
|
|
129
|
+
--font-size-s: 14px;
|
|
130
|
+
--font-size-xs: 12px;
|
|
131
|
+
--font-size-xxs: 10px;
|
|
132
|
+
|
|
133
|
+
--lineheight-simple: 110%;
|
|
134
|
+
--lineheight-large: 150%;
|
|
135
|
+
|
|
136
|
+
--font-weight-bold: 700;
|
|
137
|
+
--font-weight-semibold: 600;
|
|
138
|
+
--font-weight-medium: 500;
|
|
139
|
+
--font-weight-regular: 400;
|
|
140
|
+
--font-weight-light: 300;
|
|
141
|
+
|
|
142
|
+
/* ===== SHADOWS ===== */
|
|
143
|
+
--Shadow-small: 0px 0px 12px rgba(0, 0, 0, 0.04);
|
|
144
|
+
--Shadow-medium: 0.5px 4px 8px rgba(0, 0, 0, 0.08);
|
|
145
|
+
--Shadow-large: 0px 4px 16px rgba(0, 0, 0, 0.16);
|
|
146
|
+
--Shadow-icon: 0px 0px 4px rgba(0, 0, 0, 0.16);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
/* Reset básico para asegurar consistencia */
|
|
150
|
+
* {
|
|
151
|
+
box-sizing: border-box;
|
|
152
|
+
}
|
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
|