@dropi/ui-components 1.0.2 → 1.0.3

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.
Files changed (15) hide show
  1. package/dist/README.md +146 -0
  2. package/dist/components-source/dropi-button/dropi-button.component.d.ts +27 -0
  3. package/dist/components-source/icon/icon.component.d.ts +16 -0
  4. package/dist/esm2022/components-source/dropi-button/dropi-button.component.mjs +82 -0
  5. package/dist/esm2022/components-source/icon/icon.component.mjs +54 -0
  6. package/dist/esm2022/dropi-ui-components.mjs +5 -0
  7. package/dist/esm2022/index.mjs +12 -0
  8. package/dist/esm2022/lib/elements-registry.mjs +56 -0
  9. package/dist/esm2022/lib/elements.module.mjs +29 -0
  10. package/dist/fesm2022/dropi-ui-components.mjs +228 -0
  11. package/dist/fesm2022/dropi-ui-components.mjs.map +1 -0
  12. package/dist/index.d.ts +7 -0
  13. package/dist/lib/elements-registry.d.ts +44 -0
  14. package/dist/lib/elements.module.d.ts +13 -0
  15. package/package.json +1 -1
package/dist/README.md ADDED
@@ -0,0 +1,146 @@
1
+ # @dropi/ui-components
2
+
3
+ > Framework-agnostic Web Components library built with Angular Elements
4
+
5
+ [![npm version](https://img.shields.io/npm/v/@dropi/ui-components.svg)](https://www.npmjs.com/package/@dropi/ui-components)
6
+ [![License](https://img.shields.io/npm/l/@dropi/ui-components.svg)](./LICENSE)
7
+
8
+ ## 📦 Installation
9
+
10
+ ```bash
11
+ npm install @dropi/ui-components
12
+ # or
13
+ yarn add @dropi/ui-components
14
+ ```
15
+
16
+ ## 🚀 Quick Start
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
41
+
42
+ ```jsx
43
+ import "@dropi/ui-components/dropi-tokens.css";
44
+ import "@dropi/ui-components";
45
+
46
+ function App() {
47
+ return (
48
+ <>
49
+ <dropi-button type="primary" text="React Button" />
50
+ <dropi-alert state="info" message="Works in React!" />
51
+ </>
52
+ );
53
+ }
54
+ ```
55
+
56
+ ### Vue 3
57
+
58
+ ```vue
59
+ <template>
60
+ <dropi-button type="primary" text="Vue Button" />
61
+ <dropi-alert state="success" message="Works in Vue!" />
62
+ </template>
63
+
64
+ <script setup>
65
+ import "@dropi/ui-components/dropi-tokens.css";
66
+ import "@dropi/ui-components";
67
+ </script>
68
+ ```
69
+
70
+ **vite.config.js:**
71
+
72
+ ```javascript
73
+ export default {
74
+ plugins: [
75
+ vue({
76
+ template: {
77
+ compilerOptions: {
78
+ isCustomElement: (tag) => tag.startsWith("dropi-"),
79
+ },
80
+ },
81
+ }),
82
+ ],
83
+ };
84
+ ```
85
+
86
+ ### Angular
87
+
88
+ ```typescript
89
+ // main.ts or app.module.ts
90
+ import '@dropi/ui-components/dropi-tokens.css';
91
+ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
92
+
93
+ @NgModule({
94
+ schemas: [CUSTOM_ELEMENTS_SCHEMA]
95
+ })
96
+ ```
97
+
98
+ ## 📚 Components
99
+
100
+ - `<dropi-button>` - Button with variants
101
+ - `<dropi-alert>` - Alerts (success/info/warning/error)
102
+ - `<dropi-tag>` - Tags with colors
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)
107
+
108
+ ## ⚠️ Important
109
+
110
+ Always import `dropi-tokens.css` **before** the JavaScript:
111
+
112
+ ```javascript
113
+ // ✅ CORRECT
114
+ import "@dropi/ui-components/dropi-tokens.css"; // First
115
+ import "@dropi/ui-components"; // Second
116
+ ```
117
+
118
+ ## 📖 Documentation
119
+
120
+ - [Full Documentation](https://ui.dropi.co)
121
+ - [Storybook](https://ui.dropi.co)
122
+ - [Migration Guide](./MIGRATION.md)
123
+
124
+ ## 🛠️ Development
125
+
126
+ ```bash
127
+ # Install dependencies
128
+ npm install
129
+
130
+ # Build library
131
+ npm run build:complete
132
+
133
+ # Watch mode
134
+ npm run watch
135
+ ```
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/components-source/dropi-button/dropi-button.component.d.ts ADDED
@@ -0,0 +1,27 @@
1
+ import { EventEmitter } from "@angular/core";
2
+ import * as i0 from "@angular/core";
3
+ export type ButtonType = "legacy" | "default" | "success" | "info" | "error" | "warning" | "dropdown";
4
+ export type ButtonSeverity = "primary" | "secondary" | "tertiary";
5
+ export type ButtonSize = "large" | "normal" | "small";
6
+ export type ButtonState = "default" | "disabled" | "loading";
7
+ export declare class ButtonComponent {
8
+ type: ButtonType;
9
+ severity: ButtonSeverity;
10
+ size: ButtonSize;
11
+ state: ButtonState;
12
+ preIcon: string;
13
+ postIcon: string;
14
+ text: string;
15
+ onClick: EventEmitter<Event>;
16
+ colorload: string;
17
+ colorMap: {
18
+ [key: string]: string;
19
+ };
20
+ get iconSize(): string;
21
+ get color(): string;
22
+ get fontColor(): string;
23
+ get svgColor(): string;
24
+ handleClick(event: Event): void;
25
+ static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
26
+ static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "dropi-wc-button", never, { "type": { "alias": "type"; "required": false; }; "severity": { "alias": "severity"; "required": false; }; "size": { "alias": "size"; "required": false; }; "state": { "alias": "state"; "required": false; }; "preIcon": { "alias": "preIcon"; "required": false; }; "postIcon": { "alias": "postIcon"; "required": false; }; "text": { "alias": "text"; "required": false; }; }, { "onClick": "onClick"; }, never, ["*"], true, never>;
27
+ }
package/dist/components-source/icon/icon.component.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import { ElementRef, Renderer2, OnInit, OnChanges, SimpleChanges } from '@angular/core';
2
+ import * as i0 from "@angular/core";
3
+ export declare class IconComponent implements OnInit, OnChanges {
4
+ private el;
5
+ private renderer;
6
+ name: string;
7
+ width: string;
8
+ height: string;
9
+ color: string;
10
+ constructor(el: ElementRef, renderer: Renderer2);
11
+ ngOnInit(): void;
12
+ ngOnChanges(changes: SimpleChanges): void;
13
+ setColors(): void;
14
+ static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, never>;
15
+ static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "app-icon", never, { "name": { "alias": "name"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;
16
+ }
package/dist/esm2022/components-source/dropi-button/dropi-button.component.mjs ADDED
@@ -0,0 +1,82 @@
1
+ import { Component, EventEmitter, Input, Output } from "@angular/core";
2
+ import { CommonModule } from "@angular/common";
3
+ import { IconComponent } from "../icon/icon.component";
4
+ import * as i0 from "@angular/core";
5
+ import * as i1 from "@angular/common";
6
+ // @figma-node 2-381
7
+ export class ButtonComponent {
8
+ type = "default";
9
+ severity = "primary";
10
+ size = "normal";
11
+ state = "default";
12
+ preIcon = "";
13
+ postIcon = "";
14
+ text = "";
15
+ onClick = new EventEmitter();
16
+ colorload = "var(--Primary-Primary-500)";
17
+ colorMap = {
18
+ default: "Primary-Primary-",
19
+ success: "Success-Success-",
20
+ error: "Error-Error-",
21
+ info: "Info-Info-",
22
+ legacy: "Secondary-Secondary-",
23
+ warning: "Warning-Warning-",
24
+ };
25
+ get iconSize() {
26
+ switch (this.size) {
27
+ case "large":
28
+ return "24px";
29
+ case "small":
30
+ return "16px";
31
+ default:
32
+ return "18px"; // Tamaño por defecto (normal)
33
+ }
34
+ }
35
+ get color() {
36
+ let intensity = this.state === "disabled" ? "300" : "500";
37
+ return this.colorMap[this.type] + intensity;
38
+ }
39
+ get fontColor() {
40
+ switch (this.severity) {
41
+ case "tertiary":
42
+ return this.type === "default" || this.type === "legacy"
43
+ ? "Gray-Gray-500"
44
+ : this.color;
45
+ case "secondary":
46
+ return this.color;
47
+ default:
48
+ return "Neutral-White";
49
+ }
50
+ }
51
+ get svgColor() {
52
+ return `var(--${this.fontColor})`;
53
+ }
54
+ handleClick(event) {
55
+ if (this.state !== "disabled" && this.state !== "loading") {
56
+ this.onClick.emit(event);
57
+ }
58
+ }
59
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
60
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "dropi-wc-button", inputs: { type: "type", severity: "severity", size: "size", state: "state", preIcon: "preIcon", postIcon: "postIcon", text: "text" }, outputs: { onClick: "onClick" }, host: { attributes: { "data-figma-node": "2-381" } }, ngImport: i0, template: "<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", styles: [".without-text{gap:0!important}.btn{box-sizing:border-box!important;all:unset;display:inline-flex;align-items:center;justify-content:center;gap:var(--Size-1);border-radius:var(--Border-2);font-weight:700;min-width:33px;line-height:110%;cursor:pointer;white-space:nowrap;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}.btn:active{transition:transform .01s ease-out;transform:scale(.98)}.btn:hover:not(:active){transform:scale(1.01)}.btn.disabled,.btn.loading{cursor:not-allowed;pointer-events:none}.btn.large{padding:var(--Size-4);font-size:var(--Size-4);height:48px}.btn.normal{padding:var(--Size-3);font-size:var(--font-size-s);height:40px}.btn.small{padding:var(--Size-2);font-size:var(--Size-3);height:29px}.btn.primary.disabled.default{background:var(--Primary-Primary-300);color:var(--Neutral-White)}.btn.primary.disabled.success{background:var(--Success-Success-300);color:var(--Neutral-White)}.btn.primary.disabled.info{background:var(--Info-Info-300);color:var(--Neutral-White)}.btn.primary.disabled.error{background:var(--Error-Error-300);color:var(--Neutral-White)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300);color:var(--Neutral-White)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300);color:var(--Neutral-White)}.btn.primary.default{background:var(--Primary-Primary-500);color:var(--Neutral-White)}.btn.primary.default:hover{background:var(--Primary-Primary-600)}.btn.primary.success{background:var(--Success-Success-500);color:var(--Neutral-White)}.btn.primary.success:hover{background:var(--Success-Success-600)}.btn.primary.info{background:var(--Info-Info-500);color:var(--Neutral-White)}.btn.primary.info:hover{background:var(--Info-Info-600)}.btn.primary.error{background:var(--Error-Error-500);color:var(--Neutral-White)}.btn.primary.error:hover{background:var(--Error-Error-600)}.btn.primary.warning{background:var(--Warning-Warning-500);color:var(--Neutral-White)}.btn.primary.warning:hover{background:var(--Warning-Warning-600)}.btn.primary.legacy{background:var(--Secondary-Secondary-500);color:var(--Neutral-White)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600)}.btn.secondary{background:var(--Neutral-White);border:1px solid}.btn.secondary.disabled{background:var(--Neutral-White)}.btn.secondary.disabled.default{border-color:var(--Primary-Primary-300);color:var(--Primary-Primary-300)}.btn.secondary.disabled.success{border-color:var(--Success-Success-300);color:var(--Success-Success-300)}.btn.secondary.disabled.info{border-color:var(--Info-Info-300);color:var(--Info-Info-300)}.btn.secondary.disabled.error{border-color:var(--Error-Error-300);color:var(--Error-Error-300)}.btn.secondary.disabled.warning{border-color:var(--Warning-Warning-300);color:var(--Warning-Warning-300)}.btn.secondary.disabled.legacy{border-color:var(--Secondary-Secondary-300);color:var(--Secondary-Secondary-300)}.btn.secondary.default{border-color:var(--Primary-Primary-500);color:var(--Primary-Primary-500)}.btn.secondary.default:hover{color:var(--Primary-Primary-600);border-color:var(--Primary-Primary-600)}.btn.secondary.success{border-color:var(--Success-Success-500);color:var(--Success-Success-500)}.btn.secondary.success:hover{color:var(--Success-Success-600);border-color:var(--Success-Success-600)}.btn.secondary.info{border-color:var(--Info-Info-500);color:var(--Info-Info-500)}.btn.secondary.info:hover{color:var(--Info-Info-600);border-color:var(--Info-Info-600)}.btn.secondary.error{border-color:var(--Error-Error-500);color:var(--Error-Error-500)}.btn.secondary.error:hover{color:var(--Error-Error-600);border-color:var(--Error-Error-600)}.btn.secondary.warning{border-color:var(--Warning-Warning-500);color:var(--Warning-Warning-500)}.btn.secondary.warning:hover{color:var(--Warning-Warning-600);border-color:var(--Warning-Warning-600)}.btn.secondary.legacy{border-color:var(--Secondary-Secondary-500);color:var(--Secondary-Secondary-500)}.btn.secondary.legacy:hover{color:var(--Secondary-Secondary-600);border-color:var(--Secondary-Secondary-600)}.btn.tertiary{background:none!important;border:none}.btn.tertiary.disabled{background:none!important}.btn.tertiary.disabled.default{color:var(--Primary-Primary-300)}.btn.tertiary.disabled.success{color:var(--Success-Success-300)}.btn.tertiary.disabled.info{color:var(--Info-Info-300)}.btn.tertiary.disabled.error{color:var(--Error-Error-300)}.btn.tertiary.disabled.warning{color:var(--Warning-Warning-300)}.btn.tertiary.disabled.legacy{color:var(--Secondary-Secondary-300)}.btn.tertiary.disabled.default,.btn.tertiary.disabled.legacy{border:1px solid var(--Gray-Gray-200);color:var(--Gray-Gray-400)}.btn.tertiary.default,.btn.tertiary.legacy{border:1px solid var(--Gray-Gray-200);color:var(--Gray-Gray-500)}.btn.tertiary.default:hover,.btn.tertiary.legacy:hover{border:1px solid var(--Gray-Gray-400);color:var(--Gray-Gray-600)}.btn.tertiary.success{color:var(--Success-Success-500);border:none}.btn.tertiary.success:hover{background:var(--Success-Success-50);color:var(--Success-Success-500);border:none}.btn.tertiary.info{color:var(--Info-Info-500);border:none}.btn.tertiary.info:hover{background:var(--Info-Info-50);color:var(--Info-Info-500);border:none}.btn.tertiary.error{color:var(--Error-Error-500);border:none}.btn.tertiary.error:hover{background:var(--Error-Error-50);color:var(--Error-Error-500);border:none}.btn.tertiary.warning{color:var(--Warning-Warning-500);border:none}.btn.tertiary.warning:hover{background:var(--Warning-Warning-50);color:var(--Warning-Warning-500);border:none}.btn.tertiary.dropdown{color:var(--Gray-Gray-500);border:none;background:transparent;font-weight:400;font-size:14px}.btn.tertiary.dropdown:hover{color:var(--Gray-Gray-500);border:none}.btn .spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }] });
61
+ }
62
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
63
+ type: Component,
64
+ args: [{ selector: "dropi-wc-button", standalone: true, imports: [CommonModule, IconComponent], host: { "data-figma-node": "2-381" }, template: "<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", styles: [".without-text{gap:0!important}.btn{box-sizing:border-box!important;all:unset;display:inline-flex;align-items:center;justify-content:center;gap:var(--Size-1);border-radius:var(--Border-2);font-weight:700;min-width:33px;line-height:110%;cursor:pointer;white-space:nowrap;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}.btn:active{transition:transform .01s ease-out;transform:scale(.98)}.btn:hover:not(:active){transform:scale(1.01)}.btn.disabled,.btn.loading{cursor:not-allowed;pointer-events:none}.btn.large{padding:var(--Size-4);font-size:var(--Size-4);height:48px}.btn.normal{padding:var(--Size-3);font-size:var(--font-size-s);height:40px}.btn.small{padding:var(--Size-2);font-size:var(--Size-3);height:29px}.btn.primary.disabled.default{background:var(--Primary-Primary-300);color:var(--Neutral-White)}.btn.primary.disabled.success{background:var(--Success-Success-300);color:var(--Neutral-White)}.btn.primary.disabled.info{background:var(--Info-Info-300);color:var(--Neutral-White)}.btn.primary.disabled.error{background:var(--Error-Error-300);color:var(--Neutral-White)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300);color:var(--Neutral-White)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300);color:var(--Neutral-White)}.btn.primary.default{background:var(--Primary-Primary-500);color:var(--Neutral-White)}.btn.primary.default:hover{background:var(--Primary-Primary-600)}.btn.primary.success{background:var(--Success-Success-500);color:var(--Neutral-White)}.btn.primary.success:hover{background:var(--Success-Success-600)}.btn.primary.info{background:var(--Info-Info-500);color:var(--Neutral-White)}.btn.primary.info:hover{background:var(--Info-Info-600)}.btn.primary.error{background:var(--Error-Error-500);color:var(--Neutral-White)}.btn.primary.error:hover{background:var(--Error-Error-600)}.btn.primary.warning{background:var(--Warning-Warning-500);color:var(--Neutral-White)}.btn.primary.warning:hover{background:var(--Warning-Warning-600)}.btn.primary.legacy{background:var(--Secondary-Secondary-500);color:var(--Neutral-White)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600)}.btn.secondary{background:var(--Neutral-White);border:1px solid}.btn.secondary.disabled{background:var(--Neutral-White)}.btn.secondary.disabled.default{border-color:var(--Primary-Primary-300);color:var(--Primary-Primary-300)}.btn.secondary.disabled.success{border-color:var(--Success-Success-300);color:var(--Success-Success-300)}.btn.secondary.disabled.info{border-color:var(--Info-Info-300);color:var(--Info-Info-300)}.btn.secondary.disabled.error{border-color:var(--Error-Error-300);color:var(--Error-Error-300)}.btn.secondary.disabled.warning{border-color:var(--Warning-Warning-300);color:var(--Warning-Warning-300)}.btn.secondary.disabled.legacy{border-color:var(--Secondary-Secondary-300);color:var(--Secondary-Secondary-300)}.btn.secondary.default{border-color:var(--Primary-Primary-500);color:var(--Primary-Primary-500)}.btn.secondary.default:hover{color:var(--Primary-Primary-600);border-color:var(--Primary-Primary-600)}.btn.secondary.success{border-color:var(--Success-Success-500);color:var(--Success-Success-500)}.btn.secondary.success:hover{color:var(--Success-Success-600);border-color:var(--Success-Success-600)}.btn.secondary.info{border-color:var(--Info-Info-500);color:var(--Info-Info-500)}.btn.secondary.info:hover{color:var(--Info-Info-600);border-color:var(--Info-Info-600)}.btn.secondary.error{border-color:var(--Error-Error-500);color:var(--Error-Error-500)}.btn.secondary.error:hover{color:var(--Error-Error-600);border-color:var(--Error-Error-600)}.btn.secondary.warning{border-color:var(--Warning-Warning-500);color:var(--Warning-Warning-500)}.btn.secondary.warning:hover{color:var(--Warning-Warning-600);border-color:var(--Warning-Warning-600)}.btn.secondary.legacy{border-color:var(--Secondary-Secondary-500);color:var(--Secondary-Secondary-500)}.btn.secondary.legacy:hover{color:var(--Secondary-Secondary-600);border-color:var(--Secondary-Secondary-600)}.btn.tertiary{background:none!important;border:none}.btn.tertiary.disabled{background:none!important}.btn.tertiary.disabled.default{color:var(--Primary-Primary-300)}.btn.tertiary.disabled.success{color:var(--Success-Success-300)}.btn.tertiary.disabled.info{color:var(--Info-Info-300)}.btn.tertiary.disabled.error{color:var(--Error-Error-300)}.btn.tertiary.disabled.warning{color:var(--Warning-Warning-300)}.btn.tertiary.disabled.legacy{color:var(--Secondary-Secondary-300)}.btn.tertiary.disabled.default,.btn.tertiary.disabled.legacy{border:1px solid var(--Gray-Gray-200);color:var(--Gray-Gray-400)}.btn.tertiary.default,.btn.tertiary.legacy{border:1px solid var(--Gray-Gray-200);color:var(--Gray-Gray-500)}.btn.tertiary.default:hover,.btn.tertiary.legacy:hover{border:1px solid var(--Gray-Gray-400);color:var(--Gray-Gray-600)}.btn.tertiary.success{color:var(--Success-Success-500);border:none}.btn.tertiary.success:hover{background:var(--Success-Success-50);color:var(--Success-Success-500);border:none}.btn.tertiary.info{color:var(--Info-Info-500);border:none}.btn.tertiary.info:hover{background:var(--Info-Info-50);color:var(--Info-Info-500);border:none}.btn.tertiary.error{color:var(--Error-Error-500);border:none}.btn.tertiary.error:hover{background:var(--Error-Error-50);color:var(--Error-Error-500);border:none}.btn.tertiary.warning{color:var(--Warning-Warning-500);border:none}.btn.tertiary.warning:hover{background:var(--Warning-Warning-50);color:var(--Warning-Warning-500);border:none}.btn.tertiary.dropdown{color:var(--Gray-Gray-500);border:none;background:transparent;font-weight:400;font-size:14px}.btn.tertiary.dropdown:hover{color:var(--Gray-Gray-500);border:none}.btn .spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
65
+ }], propDecorators: { type: [{
66
+ type: Input
67
+ }], severity: [{
68
+ type: Input
69
+ }], size: [{
70
+ type: Input
71
+ }], state: [{
72
+ type: Input
73
+ }], preIcon: [{
74
+ type: Input
75
+ }], postIcon: [{
76
+ type: Input
77
+ }], text: [{
78
+ type: Input
79
+ }], onClick: [{
80
+ type: Output
81
+ }] } });
82
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGktYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzLXNvdXJjZS9kcm9waS1idXR0b24vZHJvcGktYnV0dG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzLXNvdXJjZS9kcm9waS1idXR0b24vZHJvcGktYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQzs7O0FBY3ZELG9CQUFvQjtBQVNwQixNQUFNLE9BQU8sZUFBZTtJQUNqQixJQUFJLEdBQWUsU0FBUyxDQUFDO0lBQzdCLFFBQVEsR0FBbUIsU0FBUyxDQUFDO0lBQ3JDLElBQUksR0FBZSxRQUFRLENBQUM7SUFDNUIsS0FBSyxHQUFnQixTQUFTLENBQUM7SUFDL0IsT0FBTyxHQUFXLEVBQUUsQ0FBQztJQUNyQixRQUFRLEdBQVcsRUFBRSxDQUFDO0lBQ3RCLElBQUksR0FBVyxFQUFFLENBQUM7SUFDakIsT0FBTyxHQUFHLElBQUksWUFBWSxFQUFTLENBQUM7SUFFOUMsU0FBUyxHQUFHLDRCQUE0QixDQUFDO0lBRXpDLFFBQVEsR0FBOEI7UUFDcEMsT0FBTyxFQUFFLGtCQUFrQjtRQUMzQixPQUFPLEVBQUUsa0JBQWtCO1FBQzNCLEtBQUssRUFBRSxjQUFjO1FBQ3JCLElBQUksRUFBRSxZQUFZO1FBQ2xCLE1BQU0sRUFBRSxzQkFBc0I7UUFDOUIsT0FBTyxFQUFFLGtCQUFrQjtLQUM1QixDQUFDO0lBRUYsSUFBSSxRQUFRO1FBQ1YsUUFBUSxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7WUFDbEIsS0FBSyxPQUFPO2dCQUNWLE9BQU8sTUFBTSxDQUFDO1lBQ2hCLEtBQUssT0FBTztnQkFDVixPQUFPLE1BQU0sQ0FBQztZQUNoQjtnQkFDRSxPQUFPLE1BQU0sQ0FBQyxDQUFDLDhCQUE4QjtRQUNqRCxDQUFDO0lBQ0gsQ0FBQztJQUVELElBQUksS0FBSztRQUNQLElBQUksU0FBUyxHQUFHLElBQUksQ0FBQyxLQUFLLEtBQUssVUFBVSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQztRQUMxRCxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLFNBQVMsQ0FBQztJQUM5QyxDQUFDO0lBRUQsSUFBSSxTQUFTO1FBQ1gsUUFBUSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDdEIsS0FBSyxVQUFVO2dCQUNiLE9BQU8sSUFBSSxDQUFDLElBQUksS0FBSyxTQUFTLElBQUksSUFBSSxDQUFDLElBQUksS0FBSyxRQUFRO29CQUN0RCxDQUFDLENBQUMsZUFBZTtvQkFDakIsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUM7WUFDakIsS0FBSyxXQUFXO2dCQUNkLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQztZQUNwQjtnQkFDRSxPQUFPLGVBQWUsQ0FBQztRQUMzQixDQUFDO0lBQ0gsQ0FBQztJQUVELElBQUksUUFBUTtRQUNWLE9BQU8sU0FBUyxJQUFJLENBQUMsU0FBUyxHQUFHLENBQUM7SUFDcEMsQ0FBQztJQUNELFdBQVcsQ0FBQyxLQUFZO1FBQ3RCLElBQUksSUFBSSxDQUFDLEtBQUssS0FBSyxVQUFVLElBQUksSUFBSSxDQUFDLEtBQUssS0FBSyxTQUFTLEVBQUUsQ0FBQztZQUMxRCxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUMzQixDQUFDO0lBQ0gsQ0FBQzt3R0F6RFUsZUFBZTs0RkFBZixlQUFlLHdTQ3pCNUIscWdEQXFDQSx3eUxEakJZLFlBQVksaU9BQUUsYUFBYTs7NEZBSzFCLGVBQWU7a0JBUjNCLFNBQVM7K0JBQ0UsaUJBQWlCLGNBQ2YsSUFBSSxXQUNQLENBQUMsWUFBWSxFQUFFLGFBQWEsQ0FBQyxRQUdoQyxFQUFFLGlCQUFpQixFQUFFLE9BQU8sRUFBRTs4QkFHM0IsSUFBSTtzQkFBWixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0ksT0FBTztzQkFBaEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gXCJAYW5ndWxhci9jb21tb25cIjtcbmltcG9ydCB7IEljb25Db21wb25lbnQgfSBmcm9tIFwiLi4vaWNvbi9pY29uLmNvbXBvbmVudFwiO1xuXG5leHBvcnQgdHlwZSBCdXR0b25UeXBlID1cbiAgfCBcImxlZ2FjeVwiXG4gIHwgXCJkZWZhdWx0XCJcbiAgfCBcInN1Y2Nlc3NcIlxuICB8IFwiaW5mb1wiXG4gIHwgXCJlcnJvclwiXG4gIHwgXCJ3YXJuaW5nXCJcbiAgfCBcImRyb3Bkb3duXCI7XG5leHBvcnQgdHlwZSBCdXR0b25TZXZlcml0eSA9IFwicHJpbWFyeVwiIHwgXCJzZWNvbmRhcnlcIiB8IFwidGVydGlhcnlcIjtcbmV4cG9ydCB0eXBlIEJ1dHRvblNpemUgPSBcImxhcmdlXCIgfCBcIm5vcm1hbFwiIHwgXCJzbWFsbFwiO1xuZXhwb3J0IHR5cGUgQnV0dG9uU3RhdGUgPSBcImRlZmF1bHRcIiB8IFwiZGlzYWJsZWRcIiB8IFwibG9hZGluZ1wiO1xuXG4vLyBAZmlnbWEtbm9kZSAyLTM4MVxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcImRyb3BpLXdjLWJ1dHRvblwiLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBJY29uQ29tcG9uZW50XSxcbiAgdGVtcGxhdGVVcmw6IFwiLi9kcm9waS1idXR0b24uY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXCIuL2Ryb3BpLWJ1dHRvbi5jb21wb25lbnQuc2Nzc1wiXSxcbiAgaG9zdDogeyBcImRhdGEtZmlnbWEtbm9kZVwiOiBcIjItMzgxXCIgfSxcbn0pXG5leHBvcnQgY2xhc3MgQnV0dG9uQ29tcG9uZW50IHtcbiAgQElucHV0KCkgdHlwZTogQnV0dG9uVHlwZSA9IFwiZGVmYXVsdFwiO1xuICBASW5wdXQoKSBzZXZlcml0eTogQnV0dG9uU2V2ZXJpdHkgPSBcInByaW1hcnlcIjtcbiAgQElucHV0KCkgc2l6ZTogQnV0dG9uU2l6ZSA9IFwibm9ybWFsXCI7XG4gIEBJbnB1dCgpIHN0YXRlOiBCdXR0b25TdGF0ZSA9IFwiZGVmYXVsdFwiO1xuICBASW5wdXQoKSBwcmVJY29uOiBzdHJpbmcgPSBcIlwiO1xuICBASW5wdXQoKSBwb3N0SWNvbjogc3RyaW5nID0gXCJcIjtcbiAgQElucHV0KCkgdGV4dDogc3RyaW5nID0gXCJcIjtcbiAgQE91dHB1dCgpIG9uQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPEV2ZW50PigpO1xuXG4gIGNvbG9ybG9hZCA9IFwidmFyKC0tUHJpbWFyeS1QcmltYXJ5LTUwMClcIjtcblxuICBjb2xvck1hcDogeyBba2V5OiBzdHJpbmddOiBzdHJpbmcgfSA9IHtcbiAgICBkZWZhdWx0OiBcIlByaW1hcnktUHJpbWFyeS1cIixcbiAgICBzdWNjZXNzOiBcIlN1Y2Nlc3MtU3VjY2Vzcy1cIixcbiAgICBlcnJvcjogXCJFcnJvci1FcnJvci1cIixcbiAgICBpbmZvOiBcIkluZm8tSW5mby1cIixcbiAgICBsZWdhY3k6IFwiU2Vjb25kYXJ5LVNlY29uZGFyeS1cIixcbiAgICB3YXJuaW5nOiBcIldhcm5pbmctV2FybmluZy1cIixcbiAgfTtcblxuICBnZXQgaWNvblNpemUoKTogc3RyaW5nIHtcbiAgICBzd2l0Y2ggKHRoaXMuc2l6ZSkge1xuICAgICAgY2FzZSBcImxhcmdlXCI6XG4gICAgICAgIHJldHVybiBcIjI0cHhcIjtcbiAgICAgIGNhc2UgXCJzbWFsbFwiOlxuICAgICAgICByZXR1cm4gXCIxNnB4XCI7XG4gICAgICBkZWZhdWx0OlxuICAgICAgICByZXR1cm4gXCIxOHB4XCI7IC8vIFRhbWHDsW8gcG9yIGRlZmVjdG8gKG5vcm1hbClcbiAgICB9XG4gIH1cblxuICBnZXQgY29sb3IoKSB7XG4gICAgbGV0IGludGVuc2l0eSA9IHRoaXMuc3RhdGUgPT09IFwiZGlzYWJsZWRcIiA/IFwiMzAwXCIgOiBcIjUwMFwiO1xuICAgIHJldHVybiB0aGlzLmNvbG9yTWFwW3RoaXMudHlwZV0gKyBpbnRlbnNpdHk7XG4gIH1cblxuICBnZXQgZm9udENvbG9yKCk6IHN0cmluZyB7XG4gICAgc3dpdGNoICh0aGlzLnNldmVyaXR5KSB7XG4gICAgICBjYXNlIFwidGVydGlhcnlcIjpcbiAgICAgICAgcmV0dXJuIHRoaXMudHlwZSA9PT0gXCJkZWZhdWx0XCIgfHwgdGhpcy50eXBlID09PSBcImxlZ2FjeVwiXG4gICAgICAgICAgPyBcIkdyYXktR3JheS01MDBcIlxuICAgICAgICAgIDogdGhpcy5jb2xvcjtcbiAgICAgIGNhc2UgXCJzZWNvbmRhcnlcIjpcbiAgICAgICAgcmV0dXJuIHRoaXMuY29sb3I7XG4gICAgICBkZWZhdWx0OlxuICAgICAgICByZXR1cm4gXCJOZXV0cmFsLVdoaXRlXCI7XG4gICAgfVxuICB9XG5cbiAgZ2V0IHN2Z0NvbG9yKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIGB2YXIoLS0ke3RoaXMuZm9udENvbG9yfSlgO1xuICB9XG4gIGhhbmRsZUNsaWNrKGV2ZW50OiBFdmVudCkge1xuICAgIGlmICh0aGlzLnN0YXRlICE9PSBcImRpc2FibGVkXCIgJiYgdGhpcy5zdGF0ZSAhPT0gXCJsb2FkaW5nXCIpIHtcbiAgICAgIHRoaXMub25DbGljay5lbWl0KGV2ZW50KTtcbiAgICB9XG4gIH1cbn1cbiIsIjxidXR0b25cbiAgY2xhc3M9XCJidG5cIlxuICBbbmdDbGFzc109XCJbIXRleHQgPyAnd2l0aG91dC10ZXh0JyA6ICcnLCBzZXZlcml0eSwgdHlwZSwgc2l6ZSwgc3RhdGVdXCJcbiAgW2Rpc2FibGVkXT1cInN0YXRlID09PSAnZGlzYWJsZWQnIHx8IHN0YXRlID09PSAnbG9hZGluZydcIlxuICAoY2xpY2spPVwiaGFuZGxlQ2xpY2soJGV2ZW50KVwiXG4+XG4gIDxhcHAtaWNvblxuICAgICpuZ0lmPVwicHJlSWNvbiAhPT0gJydcIlxuICAgIFtuYW1lXT1cInByZUljb25cIlxuICAgIFt3aWR0aF09XCJpY29uU2l6ZVwiXG4gICAgW2hlaWdodF09XCJpY29uU2l6ZVwiXG4gICAgW2NvbG9yXT1cImZvbnRDb2xvclwiXG4gID48L2FwcC1pY29uPlxuICA8c3BhbiAqbmdJZj1cInRleHQgIT09ICcnXCIgY2xhc3M9XCJ0ZXh0XCI+e3sgdGV4dCB9fTwvc3Bhbj5cbiAgPGFwcC1pY29uXG4gICAgKm5nSWY9XCJwb3N0SWNvbiAhPT0gJycgfHwgdHlwZSA9PT0gJ2Ryb3Bkb3duJ1wiXG4gICAgW25hbWVdPVwidHlwZSA9PSAnZHJvcGRvd24nID8gJ0Ryb3Bkb3duLWRvd24nIDogcG9zdEljb25cIlxuICAgIFt3aWR0aF09XCJpY29uU2l6ZVwiXG4gICAgW2hlaWdodF09XCJpY29uU2l6ZVwiXG4gICAgW2NvbG9yXT1cImZvbnRDb2xvclwiXG4gID48L2FwcC1pY29uPlxuICA8c3ZnXG4gICAgKm5nSWY9XCJzdGF0ZSA9PT0gJ2xvYWRpbmcnXCJcbiAgICBjbGFzcz1cInNwaW5cIlxuICAgIFthdHRyLndpZHRoXT1cImljb25TaXplXCJcbiAgICBbYXR0ci5oZWlnaHRdPVwiaWNvblNpemVcIlxuICAgIHZpZXdCb3g9XCIwIDAgMjQgMjRcIlxuICAgIGZpbGw9XCJub25lXCJcbiAgICB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCJcbiAgPlxuICAgIDxwYXRoXG4gICAgICBkPVwiTTIyLjggMTJDMjMuNDYyNyAxMiAyNC4wMDYyIDExLjQ2MTQgMjMuOTQwMSAxMC44MDJDMjMuODIzMiA5LjYzNzEgMjMuNTM2MiA4LjQ5MzM5IDIzLjA4NjYgNy40MDc4QzIyLjQ4MzUgNS45NTE4OSAyMS41OTk2IDQuNjI5MDIgMjAuNDg1MyAzLjUxNDcyQzE5LjM3MSAyLjQwMDQyIDE4LjA0ODEgMS41MTY1IDE2LjU5MjIgMC45MTM0NDVDMTUuNTA2NiAwLjQ2Mzc3OCAxNC4zNjI5IDAuMTc2ODMgMTMuMTk4IDAuMDU5OTUwMkMxMi41Mzg2IC0wLjAwNjIxNDM5IDEyIDAuNTM3MjU4IDEyIDEuMkMxMiAxLjg2Mjc0IDEyLjUzOTMgMi4zOTIyNyAxMy4xOTY5IDIuNDc0OUMxNC4wNDYzIDIuNTgxNjQgMTQuODc5NSAyLjgwMTc2IDE1LjY3MzggMy4xMzA3NkMxNi44Mzg1IDMuNjEzMiAxNy44OTY4IDQuMzIwMzMgMTguNzg4MiA1LjIxMTc3QzE5LjY3OTcgNi4xMDMyMiAyMC4zODY4IDcuMTYxNTEgMjAuODY5MiA4LjMyNjI0QzIxLjE5ODIgOS4xMjA1MSAyMS40MTg0IDkuOTUzNjcgMjEuNTI1MSAxMC44MDMxQzIxLjYwNzcgMTEuNDYwNyAyMi4xMzczIDEyIDIyLjggMTJaXCJcbiAgICAgIFthdHRyLmZpbGxdPVwic3ZnQ29sb3JcIlxuICAgIC8+XG4gIDwvc3ZnPlxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L2J1dHRvbj5cbiJdfQ==
package/dist/esm2022/components-source/icon/icon.component.mjs ADDED
@@ -0,0 +1,54 @@
1
+ import { CommonModule } from '@angular/common';
2
+ import { Component, Input, } from '@angular/core';
3
+ import * as i0 from "@angular/core";
4
+ import * as i1 from "@angular/common";
5
+ export class IconComponent {
6
+ el;
7
+ renderer;
8
+ // Nombre del ícono, debe coincidir con el "id" en el sprite SVG
9
+ name = '';
10
+ // Atributos opcionales para controlar el tamaño y color
11
+ width = '24px';
12
+ height = '24px';
13
+ color = 'currentColor';
14
+ constructor(el, renderer) {
15
+ this.el = el;
16
+ this.renderer = renderer;
17
+ }
18
+ ngOnInit() {
19
+ this.setColors();
20
+ }
21
+ ngOnChanges(changes) {
22
+ if (changes['color'] && !changes['color'].firstChange)
23
+ this.setColors();
24
+ }
25
+ setColors() {
26
+ if (!this.color) {
27
+ // Si no hay color, no hacer nada
28
+ return;
29
+ }
30
+ if (this.color.startsWith('#')) {
31
+ // Si es un color directo (ej: "#ff0000"), lo usa normal
32
+ this.renderer.setStyle(this.el.nativeElement, 'fill', this.color);
33
+ }
34
+ else {
35
+ // Si el color es un token, usa la variable CSS
36
+ this.renderer.setStyle(this.el.nativeElement, 'fill', `var(--${this.color})`);
37
+ }
38
+ }
39
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
40
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IconComponent, isStandalone: true, selector: "app-icon", inputs: { name: "name", width: "width", height: "height", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<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", styles: [".spin{animation:spin 1s linear infinite}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
41
+ }
42
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconComponent, decorators: [{
43
+ type: Component,
44
+ args: [{ selector: 'app-icon', standalone: true, imports: [CommonModule], template: "<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", styles: [".spin{animation:spin 1s linear infinite}\n"] }]
45
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { name: [{
46
+ type: Input
47
+ }], width: [{
48
+ type: Input
49
+ }], height: [{
50
+ type: Input
51
+ }], color: [{
52
+ type: Input
53
+ }] } });
54
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy1zb3VyY2UvaWNvbi9pY29uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzLXNvdXJjZS9pY29uL2ljb24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxHQU1OLE1BQU0sZUFBZSxDQUFDOzs7QUFTdkIsTUFBTSxPQUFPLGFBQWE7SUFRZDtJQUNBO0lBUlYsZ0VBQWdFO0lBQ3ZELElBQUksR0FBVyxFQUFFLENBQUM7SUFDM0Isd0RBQXdEO0lBQy9DLEtBQUssR0FBVyxNQUFNLENBQUM7SUFDdkIsTUFBTSxHQUFXLE1BQU0sQ0FBQztJQUN4QixLQUFLLEdBQVcsY0FBYyxDQUFDO0lBQ3hDLFlBQ1UsRUFBYyxFQUNkLFFBQW1CO1FBRG5CLE9BQUUsR0FBRixFQUFFLENBQVk7UUFDZCxhQUFRLEdBQVIsUUFBUSxDQUFXO0lBQzFCLENBQUM7SUFFSixRQUFRO1FBQ04sSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ25CLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLENBQUMsV0FBVztZQUFFLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUMxRSxDQUFDO0lBRUQsU0FBUztRQUNQLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDaEIsaUNBQWlDO1lBQ2pDLE9BQU87UUFDVCxDQUFDO1FBRUQsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLFVBQVUsQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDO1lBQy9CLHdEQUF3RDtZQUN4RCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxNQUFNLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3BFLENBQUM7YUFBTSxDQUFDO1lBQ04sK0NBQStDO1lBQy9DLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLE1BQU0sRUFBRSxTQUFTLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDO1FBQ2hGLENBQUM7SUFDSCxDQUFDO3dHQWpDVSxhQUFhOzRGQUFiLGFBQWEscUtDbEIxQixrTUFHQSxtR0RhWSxZQUFZOzs0RkFFWCxhQUFhO2tCQVB6QixTQUFTOytCQUNFLFVBQVUsY0FDUixJQUFJLFdBR1AsQ0FBQyxZQUFZLENBQUM7dUdBSWQsSUFBSTtzQkFBWixLQUFLO2dCQUVHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgSW5wdXQsXG4gIEVsZW1lbnRSZWYsXG4gIFJlbmRlcmVyMixcbiAgT25Jbml0LFxuICBPbkNoYW5nZXMsXG4gIFNpbXBsZUNoYW5nZXMsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtaWNvbicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHRlbXBsYXRlVXJsOiAnLi9pY29uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vaWNvbi5jb21wb25lbnQuc2NzcyddLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbn0pXG5leHBvcnQgY2xhc3MgSWNvbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25DaGFuZ2VzIHtcbiAgLy8gTm9tYnJlIGRlbCDDrWNvbm8sIGRlYmUgY29pbmNpZGlyIGNvbiBlbCBcImlkXCIgZW4gZWwgc3ByaXRlIFNWR1xuICBASW5wdXQoKSBuYW1lOiBzdHJpbmcgPSAnJztcbiAgLy8gQXRyaWJ1dG9zIG9wY2lvbmFsZXMgcGFyYSBjb250cm9sYXIgZWwgdGFtYcOxbyB5IGNvbG9yXG4gIEBJbnB1dCgpIHdpZHRoOiBzdHJpbmcgPSAnMjRweCc7XG4gIEBJbnB1dCgpIGhlaWdodDogc3RyaW5nID0gJzI0cHgnO1xuICBASW5wdXQoKSBjb2xvcjogc3RyaW5nID0gJ2N1cnJlbnRDb2xvcic7XG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgZWw6IEVsZW1lbnRSZWYsXG4gICAgcHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyLFxuICApIHt9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5zZXRDb2xvcnMoKTtcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpIHtcbiAgICBpZiAoY2hhbmdlc1snY29sb3InXSAmJiAhY2hhbmdlc1snY29sb3InXS5maXJzdENoYW5nZSkgdGhpcy5zZXRDb2xvcnMoKTtcbiAgfVxuXG4gIHNldENvbG9ycygpIHtcbiAgICBpZiAoIXRoaXMuY29sb3IpIHtcbiAgICAgIC8vIFNpIG5vIGhheSBjb2xvciwgbm8gaGFjZXIgbmFkYVxuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIGlmICh0aGlzLmNvbG9yLnN0YXJ0c1dpdGgoJyMnKSkge1xuICAgICAgLy8gU2kgZXMgdW4gY29sb3IgZGlyZWN0byAoZWo6IFwiI2ZmMDAwMFwiKSwgbG8gdXNhIG5vcm1hbFxuICAgICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsICdmaWxsJywgdGhpcy5jb2xvcik7XG4gICAgfSBlbHNlIHtcbiAgICAgIC8vIFNpIGVsIGNvbG9yIGVzIHVuIHRva2VuLCB1c2EgbGEgdmFyaWFibGUgQ1NTXG4gICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ2ZpbGwnLCBgdmFyKC0tJHt0aGlzLmNvbG9yfSlgKTtcbiAgICB9XG4gIH1cbn1cbiIsIjxzdmcgW2F0dHIud2lkdGhdPVwid2lkdGhcIiBbYXR0ci5oZWlnaHRdPVwiaGVpZ2h0XCIgW25nQ2xhc3NdPVwieyBzcGluOiBuYW1lID09PSAnU3Bpbm5lcicgfVwiPlxuICA8dXNlIFthdHRyLnhsaW5rOmhyZWZdPVwiJ2Fzc2V0cy9pY29ucy9zeW1ib2wvc3ZnL3Nwcml0ZS5jc3Muc3ZnIycgKyBuYW1lXCI+PC91c2U+XG48L3N2Zz5cbiJdfQ==
package/dist/esm2022/dropi-ui-components.mjs ADDED
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Generated bundle index. Do not edit.
3
+ */
4
+ export * from './index';
5
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGktdWktY29tcG9uZW50cy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9kcm9waS11aS1jb21wb25lbnRzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19
package/dist/esm2022/index.mjs ADDED
@@ -0,0 +1,12 @@
1
+ /**
2
+ * Public API Surface de @dropi/ui-components
3
+ */
4
+ // Exportar componentes individuales desde components-source
5
+ export { ButtonComponent } from "./components-source/dropi-button/dropi-button.component";
6
+ // Exportar el módulo de elementos
7
+ export { DropiElementsModule } from "./lib/elements.module";
8
+ // Exportar funciones de registro
9
+ export { registerDropiElements, isComponentRegistered, } from "./lib/elements-registry";
10
+ // Información de versión
11
+ export const DROPI_ELEMENTS_VERSION = "1.0.0";
12
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCw0REFBNEQ7QUFDNUQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHlEQUF5RCxDQUFDO0FBRTFGLGtDQUFrQztBQUNsQyxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUU1RCxpQ0FBaUM7QUFDakMsT0FBTyxFQUNMLHFCQUFxQixFQUNyQixxQkFBcUIsR0FDdEIsTUFBTSx5QkFBeUIsQ0FBQztBQUVqQyx5QkFBeUI7QUFDekIsTUFBTSxDQUFDLE1BQU0sc0JBQXNCLEdBQUcsT0FBTyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2UgZGUgQGRyb3BpL3VpLWNvbXBvbmVudHNcbiAqL1xuXG4vLyBFeHBvcnRhciBjb21wb25lbnRlcyBpbmRpdmlkdWFsZXMgZGVzZGUgY29tcG9uZW50cy1zb3VyY2VcbmV4cG9ydCB7IEJ1dHRvbkNvbXBvbmVudCB9IGZyb20gXCIuL2NvbXBvbmVudHMtc291cmNlL2Ryb3BpLWJ1dHRvbi9kcm9waS1idXR0b24uY29tcG9uZW50XCI7XG5cbi8vIEV4cG9ydGFyIGVsIG3Ds2R1bG8gZGUgZWxlbWVudG9zXG5leHBvcnQgeyBEcm9waUVsZW1lbnRzTW9kdWxlIH0gZnJvbSBcIi4vbGliL2VsZW1lbnRzLm1vZHVsZVwiO1xuXG4vLyBFeHBvcnRhciBmdW5jaW9uZXMgZGUgcmVnaXN0cm9cbmV4cG9ydCB7XG4gIHJlZ2lzdGVyRHJvcGlFbGVtZW50cyxcbiAgaXNDb21wb25lbnRSZWdpc3RlcmVkLFxufSBmcm9tIFwiLi9saWIvZWxlbWVudHMtcmVnaXN0cnlcIjtcblxuLy8gSW5mb3JtYWNpw7NuIGRlIHZlcnNpw7NuXG5leHBvcnQgY29uc3QgRFJPUElfRUxFTUVOVFNfVkVSU0lPTiA9IFwiMS4wLjBcIjtcbiJdfQ==
package/dist/esm2022/lib/elements-registry.mjs ADDED
@@ -0,0 +1,56 @@
1
+ /**
2
+ * Registro de elementos personalizados (Web Components)
3
+ *
4
+ * Este archivo contiene la función que registra todos los componentes Angular
5
+ * como Custom Elements del navegador usando Angular Elements.
6
+ */
7
+ import { createCustomElement } from '@angular/elements';
8
+ /**
9
+ * Registra todos los componentes Dropi como custom elements
10
+ *
11
+ * @param injector - El injector de Angular necesario para createCustomElement
12
+ * @param components - Array de componentes a registrar
13
+ *
14
+ * @example
15
+ * ```typescript
16
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
17
+ * import { registerDropiElements } from '@oropi/ui-elements';
18
+ * import { ButtonComponent } from '@app/ui';
19
+ *
20
+ * const components = [
21
+ * { selector: 'dropi-button', component: ButtonComponent }
22
+ * ];
23
+ *
24
+ * platformBrowserDynamic().bootstrapModule(AppModule)
25
+ * .then((ref) => {
26
+ * const injector = ref.injector;
27
+ * registerDropiElements(injector, components);
28
+ * });
29
+ * ```
30
+ */
31
+ export function registerDropiElements(injector, components) {
32
+ // Registrar cada componente como custom element
33
+ components.forEach(({ selector, component, description }) => {
34
+ try {
35
+ // Verificar si el custom element ya está definido
36
+ if (!customElements.get(selector)) {
37
+ const element = createCustomElement(component, { injector });
38
+ customElements.define(selector, element);
39
+ console.log(`✅ Web Component registrado: <${selector}> - ${description}`);
40
+ }
41
+ else {
42
+ console.warn(`⚠️ Custom element <${selector}> ya está definido`);
43
+ }
44
+ }
45
+ catch (error) {
46
+ console.error(`❌ Error registrando <${selector}>:`, error);
47
+ }
48
+ });
49
+ }
50
+ /**
51
+ * Función auxiliar para verificar si un componente está registrado
52
+ */
53
+ export function isComponentRegistered(selector) {
54
+ return customElements.get(selector) !== undefined;
55
+ }
56
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxlbWVudHMtcmVnaXN0cnkuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL2VsZW1lbnRzLXJlZ2lzdHJ5LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7OztHQUtHO0FBR0gsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFXeEQ7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FzQkc7QUFDSCxNQUFNLFVBQVUscUJBQXFCLENBQUMsUUFBa0IsRUFBRSxVQUFpQztJQUN6RixnREFBZ0Q7SUFDaEQsVUFBVSxDQUFDLE9BQU8sQ0FBQyxDQUFDLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsRUFBRSxFQUFFO1FBQzFELElBQUksQ0FBQztZQUNILGtEQUFrRDtZQUNsRCxJQUFJLENBQUMsY0FBYyxDQUFDLEdBQUcsQ0FBQyxRQUFRLENBQUMsRUFBRSxDQUFDO2dCQUNsQyxNQUFNLE9BQU8sR0FBRyxtQkFBbUIsQ0FBQyxTQUFTLEVBQUUsRUFBRSxRQUFRLEVBQUUsQ0FBQyxDQUFDO2dCQUM3RCxjQUFjLENBQUMsTUFBTSxDQUFDLFFBQVEsRUFBRSxPQUFPLENBQUMsQ0FBQztnQkFDekMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxnQ0FBZ0MsUUFBUSxPQUFPLFdBQVcsRUFBRSxDQUFDLENBQUM7WUFDNUUsQ0FBQztpQkFBTSxDQUFDO2dCQUNOLE9BQU8sQ0FBQyxJQUFJLENBQUMsc0JBQXNCLFFBQVEsb0JBQW9CLENBQUMsQ0FBQztZQUNuRSxDQUFDO1FBQ0gsQ0FBQztRQUFDLE9BQU8sS0FBSyxFQUFFLENBQUM7WUFDZixPQUFPLENBQUMsS0FBSyxDQUFDLHdCQUF3QixRQUFRLElBQUksRUFBRSxLQUFLLENBQUMsQ0FBQztRQUM3RCxDQUFDO0lBQ0gsQ0FBQyxDQUFDLENBQUM7QUFDTCxDQUFDO0FBRUQ7O0dBRUc7QUFDSCxNQUFNLFVBQVUscUJBQXFCLENBQUMsUUFBZ0I7SUFDcEQsT0FBTyxjQUFjLENBQUMsR0FBRyxDQUFDLFFBQVEsQ0FBQyxLQUFLLFNBQVMsQ0FBQztBQUNwRCxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBSZWdpc3RybyBkZSBlbGVtZW50b3MgcGVyc29uYWxpemFkb3MgKFdlYiBDb21wb25lbnRzKVxuICpcbiAqIEVzdGUgYXJjaGl2byBjb250aWVuZSBsYSBmdW5jacOzbiBxdWUgcmVnaXN0cmEgdG9kb3MgbG9zIGNvbXBvbmVudGVzIEFuZ3VsYXJcbiAqIGNvbW8gQ3VzdG9tIEVsZW1lbnRzIGRlbCBuYXZlZ2Fkb3IgdXNhbmRvIEFuZ3VsYXIgRWxlbWVudHMuXG4gKi9cblxuaW1wb3J0IHsgSW5qZWN0b3IsIFR5cGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IGNyZWF0ZUN1c3RvbUVsZW1lbnQgfSBmcm9tICdAYW5ndWxhci9lbGVtZW50cyc7XG5cbi8qKlxuICogSW50ZXJmYWNlIHBhcmEgZGVmaW5pY2nDs24gZGUgY29tcG9uZW50ZXNcbiAqL1xuaW50ZXJmYWNlIENvbXBvbmVudERlZmluaXRpb24ge1xuICBzZWxlY3Rvcjogc3RyaW5nO1xuICBjb21wb25lbnQ6IFR5cGU8YW55PjtcbiAgZGVzY3JpcHRpb246IHN0cmluZztcbn1cblxuLyoqXG4gKiBSZWdpc3RyYSB0b2RvcyBsb3MgY29tcG9uZW50ZXMgRHJvcGkgY29tbyBjdXN0b20gZWxlbWVudHNcbiAqXG4gKiBAcGFyYW0gaW5qZWN0b3IgLSBFbCBpbmplY3RvciBkZSBBbmd1bGFyIG5lY2VzYXJpbyBwYXJhIGNyZWF0ZUN1c3RvbUVsZW1lbnRcbiAqIEBwYXJhbSBjb21wb25lbnRzIC0gQXJyYXkgZGUgY29tcG9uZW50ZXMgYSByZWdpc3RyYXJcbiAqXG4gKiBAZXhhbXBsZVxuICogYGBgdHlwZXNjcmlwdFxuICogaW1wb3J0IHsgcGxhdGZvcm1Ccm93c2VyRHluYW1pYyB9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXItZHluYW1pYyc7XG4gKiBpbXBvcnQgeyByZWdpc3RlckRyb3BpRWxlbWVudHMgfSBmcm9tICdAb3JvcGkvdWktZWxlbWVudHMnO1xuICogaW1wb3J0IHsgQnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnQGFwcC91aSc7XG4gKlxuICogY29uc3QgY29tcG9uZW50cyA9IFtcbiAqICAgeyBzZWxlY3RvcjogJ2Ryb3BpLWJ1dHRvbicsIGNvbXBvbmVudDogQnV0dG9uQ29tcG9uZW50IH1cbiAqIF07XG4gKlxuICogcGxhdGZvcm1Ccm93c2VyRHluYW1pYygpLmJvb3RzdHJhcE1vZHVsZShBcHBNb2R1bGUpXG4gKiAgIC50aGVuKChyZWYpID0+IHtcbiAqICAgICBjb25zdCBpbmplY3RvciA9IHJlZi5pbmplY3RvcjtcbiAqICAgICByZWdpc3RlckRyb3BpRWxlbWVudHMoaW5qZWN0b3IsIGNvbXBvbmVudHMpO1xuICogICB9KTtcbiAqIGBgYFxuICovXG5leHBvcnQgZnVuY3Rpb24gcmVnaXN0ZXJEcm9waUVsZW1lbnRzKGluamVjdG9yOiBJbmplY3RvciwgY29tcG9uZW50czogQ29tcG9uZW50RGVmaW5pdGlvbltdKTogdm9pZCB7XG4gIC8vIFJlZ2lzdHJhciBjYWRhIGNvbXBvbmVudGUgY29tbyBjdXN0b20gZWxlbWVudFxuICBjb21wb25lbnRzLmZvckVhY2goKHsgc2VsZWN0b3IsIGNvbXBvbmVudCwgZGVzY3JpcHRpb24gfSkgPT4ge1xuICAgIHRyeSB7XG4gICAgICAvLyBWZXJpZmljYXIgc2kgZWwgY3VzdG9tIGVsZW1lbnQgeWEgZXN0w6EgZGVmaW5pZG9cbiAgICAgIGlmICghY3VzdG9tRWxlbWVudHMuZ2V0KHNlbGVjdG9yKSkge1xuICAgICAgICBjb25zdCBlbGVtZW50ID0gY3JlYXRlQ3VzdG9tRWxlbWVudChjb21wb25lbnQsIHsgaW5qZWN0b3IgfSk7XG4gICAgICAgIGN1c3RvbUVsZW1lbnRzLmRlZmluZShzZWxlY3RvciwgZWxlbWVudCk7XG4gICAgICAgIGNvbnNvbGUubG9nKGDinIUgV2ViIENvbXBvbmVudCByZWdpc3RyYWRvOiA8JHtzZWxlY3Rvcn0+IC0gJHtkZXNjcmlwdGlvbn1gKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIGNvbnNvbGUud2Fybihg4pqg77iPIEN1c3RvbSBlbGVtZW50IDwke3NlbGVjdG9yfT4geWEgZXN0w6EgZGVmaW5pZG9gKTtcbiAgICAgIH1cbiAgICB9IGNhdGNoIChlcnJvcikge1xuICAgICAgY29uc29sZS5lcnJvcihg4p2MIEVycm9yIHJlZ2lzdHJhbmRvIDwke3NlbGVjdG9yfT46YCwgZXJyb3IpO1xuICAgIH1cbiAgfSk7XG59XG5cbi8qKlxuICogRnVuY2nDs24gYXV4aWxpYXIgcGFyYSB2ZXJpZmljYXIgc2kgdW4gY29tcG9uZW50ZSBlc3TDoSByZWdpc3RyYWRvXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiBpc0NvbXBvbmVudFJlZ2lzdGVyZWQoc2VsZWN0b3I6IHN0cmluZyk6IGJvb2xlYW4ge1xuICByZXR1cm4gY3VzdG9tRWxlbWVudHMuZ2V0KHNlbGVjdG9yKSAhPT0gdW5kZWZpbmVkO1xufVxuIl19
package/dist/esm2022/lib/elements.module.mjs ADDED
@@ -0,0 +1,29 @@
1
+ /**
2
+ * Módulo principal de Dropi UI Elements
3
+ *
4
+ * Este módulo proporciona funciones auxiliares para convertir
5
+ * componentes Angular en Web Components
6
+ */
7
+ import { NgModule } from '@angular/core';
8
+ import * as i0 from "@angular/core";
9
+ /**
10
+ * Módulo auxiliar de Angular Elements
11
+ *
12
+ * Este es un módulo vacío que sirve como punto de entrada
13
+ * La conversión a Web Components se hace mediante la función
14
+ * registerDropiElements
15
+ */
16
+ export class DropiElementsModule {
17
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiElementsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
18
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: DropiElementsModule });
19
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiElementsModule });
20
+ }
21
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiElementsModule, decorators: [{
22
+ type: NgModule,
23
+ args: [{
24
+ imports: [],
25
+ declarations: [],
26
+ exports: [],
27
+ }]
28
+ }] });
29
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxlbWVudHMubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2xpYi9lbGVtZW50cy5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7O0dBS0c7QUFFSCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQUV6Qzs7Ozs7O0dBTUc7QUFNSCxNQUFNLE9BQU8sbUJBQW1CO3dHQUFuQixtQkFBbUI7eUdBQW5CLG1CQUFtQjt5R0FBbkIsbUJBQW1COzs0RkFBbkIsbUJBQW1CO2tCQUwvQixRQUFRO21CQUFDO29CQUNSLE9BQU8sRUFBRSxFQUFFO29CQUNYLFlBQVksRUFBRSxFQUFFO29CQUNoQixPQUFPLEVBQUUsRUFBRTtpQkFDWiIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogTcOzZHVsbyBwcmluY2lwYWwgZGUgRHJvcGkgVUkgRWxlbWVudHNcbiAqXG4gKiBFc3RlIG3Ds2R1bG8gcHJvcG9yY2lvbmEgZnVuY2lvbmVzIGF1eGlsaWFyZXMgcGFyYSBjb252ZXJ0aXJcbiAqIGNvbXBvbmVudGVzIEFuZ3VsYXIgZW4gV2ViIENvbXBvbmVudHNcbiAqL1xuXG5pbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG4vKipcbiAqIE3Ds2R1bG8gYXV4aWxpYXIgZGUgQW5ndWxhciBFbGVtZW50c1xuICpcbiAqIEVzdGUgZXMgdW4gbcOzZHVsbyB2YWPDrW8gcXVlIHNpcnZlIGNvbW8gcHVudG8gZGUgZW50cmFkYVxuICogTGEgY29udmVyc2nDs24gYSBXZWIgQ29tcG9uZW50cyBzZSBoYWNlIG1lZGlhbnRlIGxhIGZ1bmNpw7NuXG4gKiByZWdpc3RlckRyb3BpRWxlbWVudHNcbiAqL1xuQE5nTW9kdWxlKHtcbiAgaW1wb3J0czogW10sXG4gIGRlY2xhcmF0aW9uczogW10sXG4gIGV4cG9ydHM6IFtdLFxufSlcbmV4cG9ydCBjbGFzcyBEcm9waUVsZW1lbnRzTW9kdWxlIHt9XG4iXX0=
package/dist/fesm2022/dropi-ui-components.mjs ADDED
@@ -0,0 +1,228 @@
1
+ import * as i0 from '@angular/core';
2
+ import { Component, Input, EventEmitter, Output, NgModule } from '@angular/core';
3
+ import * as i1 from '@angular/common';
4
+ import { CommonModule } from '@angular/common';
5
+ import { createCustomElement } from '@angular/elements';
6
+
7
+ class IconComponent {
8
+ el;
9
+ renderer;
10
+ // Nombre del ícono, debe coincidir con el "id" en el sprite SVG
11
+ name = '';
12
+ // Atributos opcionales para controlar el tamaño y color
13
+ width = '24px';
14
+ height = '24px';
15
+ color = 'currentColor';
16
+ constructor(el, renderer) {
17
+ this.el = el;
18
+ this.renderer = renderer;
19
+ }
20
+ ngOnInit() {
21
+ this.setColors();
22
+ }
23
+ ngOnChanges(changes) {
24
+ if (changes['color'] && !changes['color'].firstChange)
25
+ this.setColors();
26
+ }
27
+ setColors() {
28
+ if (!this.color) {
29
+ // Si no hay color, no hacer nada
30
+ return;
31
+ }
32
+ if (this.color.startsWith('#')) {
33
+ // Si es un color directo (ej: "#ff0000"), lo usa normal
34
+ this.renderer.setStyle(this.el.nativeElement, 'fill', this.color);
35
+ }
36
+ else {
37
+ // Si el color es un token, usa la variable CSS
38
+ this.renderer.setStyle(this.el.nativeElement, 'fill', `var(--${this.color})`);
39
+ }
40
+ }
41
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
42
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IconComponent, isStandalone: true, selector: "app-icon", inputs: { name: "name", width: "width", height: "height", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<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", styles: [".spin{animation:spin 1s linear infinite}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
43
+ }
44
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconComponent, decorators: [{
45
+ type: Component,
46
+ args: [{ selector: 'app-icon', standalone: true, imports: [CommonModule], template: "<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", styles: [".spin{animation:spin 1s linear infinite}\n"] }]
47
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { name: [{
48
+ type: Input
49
+ }], width: [{
50
+ type: Input
51
+ }], height: [{
52
+ type: Input
53
+ }], color: [{
54
+ type: Input
55
+ }] } });
56
+
57
+ // @figma-node 2-381
58
+ class ButtonComponent {
59
+ type = "default";
60
+ severity = "primary";
61
+ size = "normal";
62
+ state = "default";
63
+ preIcon = "";
64
+ postIcon = "";
65
+ text = "";
66
+ onClick = new EventEmitter();
67
+ colorload = "var(--Primary-Primary-500)";
68
+ colorMap = {
69
+ default: "Primary-Primary-",
70
+ success: "Success-Success-",
71
+ error: "Error-Error-",
72
+ info: "Info-Info-",
73
+ legacy: "Secondary-Secondary-",
74
+ warning: "Warning-Warning-",
75
+ };
76
+ get iconSize() {
77
+ switch (this.size) {
78
+ case "large":
79
+ return "24px";
80
+ case "small":
81
+ return "16px";
82
+ default:
83
+ return "18px"; // Tamaño por defecto (normal)
84
+ }
85
+ }
86
+ get color() {
87
+ let intensity = this.state === "disabled" ? "300" : "500";
88
+ return this.colorMap[this.type] + intensity;
89
+ }
90
+ get fontColor() {
91
+ switch (this.severity) {
92
+ case "tertiary":
93
+ return this.type === "default" || this.type === "legacy"
94
+ ? "Gray-Gray-500"
95
+ : this.color;
96
+ case "secondary":
97
+ return this.color;
98
+ default:
99
+ return "Neutral-White";
100
+ }
101
+ }
102
+ get svgColor() {
103
+ return `var(--${this.fontColor})`;
104
+ }
105
+ handleClick(event) {
106
+ if (this.state !== "disabled" && this.state !== "loading") {
107
+ this.onClick.emit(event);
108
+ }
109
+ }
110
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
111
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "dropi-wc-button", inputs: { type: "type", severity: "severity", size: "size", state: "state", preIcon: "preIcon", postIcon: "postIcon", text: "text" }, outputs: { onClick: "onClick" }, host: { attributes: { "data-figma-node": "2-381" } }, ngImport: i0, template: "<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", styles: [".without-text{gap:0!important}.btn{box-sizing:border-box!important;all:unset;display:inline-flex;align-items:center;justify-content:center;gap:var(--Size-1);border-radius:var(--Border-2);font-weight:700;min-width:33px;line-height:110%;cursor:pointer;white-space:nowrap;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}.btn:active{transition:transform .01s ease-out;transform:scale(.98)}.btn:hover:not(:active){transform:scale(1.01)}.btn.disabled,.btn.loading{cursor:not-allowed;pointer-events:none}.btn.large{padding:var(--Size-4);font-size:var(--Size-4);height:48px}.btn.normal{padding:var(--Size-3);font-size:var(--font-size-s);height:40px}.btn.small{padding:var(--Size-2);font-size:var(--Size-3);height:29px}.btn.primary.disabled.default{background:var(--Primary-Primary-300);color:var(--Neutral-White)}.btn.primary.disabled.success{background:var(--Success-Success-300);color:var(--Neutral-White)}.btn.primary.disabled.info{background:var(--Info-Info-300);color:var(--Neutral-White)}.btn.primary.disabled.error{background:var(--Error-Error-300);color:var(--Neutral-White)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300);color:var(--Neutral-White)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300);color:var(--Neutral-White)}.btn.primary.default{background:var(--Primary-Primary-500);color:var(--Neutral-White)}.btn.primary.default:hover{background:var(--Primary-Primary-600)}.btn.primary.success{background:var(--Success-Success-500);color:var(--Neutral-White)}.btn.primary.success:hover{background:var(--Success-Success-600)}.btn.primary.info{background:var(--Info-Info-500);color:var(--Neutral-White)}.btn.primary.info:hover{background:var(--Info-Info-600)}.btn.primary.error{background:var(--Error-Error-500);color:var(--Neutral-White)}.btn.primary.error:hover{background:var(--Error-Error-600)}.btn.primary.warning{background:var(--Warning-Warning-500);color:var(--Neutral-White)}.btn.primary.warning:hover{background:var(--Warning-Warning-600)}.btn.primary.legacy{background:var(--Secondary-Secondary-500);color:var(--Neutral-White)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600)}.btn.secondary{background:var(--Neutral-White);border:1px solid}.btn.secondary.disabled{background:var(--Neutral-White)}.btn.secondary.disabled.default{border-color:var(--Primary-Primary-300);color:var(--Primary-Primary-300)}.btn.secondary.disabled.success{border-color:var(--Success-Success-300);color:var(--Success-Success-300)}.btn.secondary.disabled.info{border-color:var(--Info-Info-300);color:var(--Info-Info-300)}.btn.secondary.disabled.error{border-color:var(--Error-Error-300);color:var(--Error-Error-300)}.btn.secondary.disabled.warning{border-color:var(--Warning-Warning-300);color:var(--Warning-Warning-300)}.btn.secondary.disabled.legacy{border-color:var(--Secondary-Secondary-300);color:var(--Secondary-Secondary-300)}.btn.secondary.default{border-color:var(--Primary-Primary-500);color:var(--Primary-Primary-500)}.btn.secondary.default:hover{color:var(--Primary-Primary-600);border-color:var(--Primary-Primary-600)}.btn.secondary.success{border-color:var(--Success-Success-500);color:var(--Success-Success-500)}.btn.secondary.success:hover{color:var(--Success-Success-600);border-color:var(--Success-Success-600)}.btn.secondary.info{border-color:var(--Info-Info-500);color:var(--Info-Info-500)}.btn.secondary.info:hover{color:var(--Info-Info-600);border-color:var(--Info-Info-600)}.btn.secondary.error{border-color:var(--Error-Error-500);color:var(--Error-Error-500)}.btn.secondary.error:hover{color:var(--Error-Error-600);border-color:var(--Error-Error-600)}.btn.secondary.warning{border-color:var(--Warning-Warning-500);color:var(--Warning-Warning-500)}.btn.secondary.warning:hover{color:var(--Warning-Warning-600);border-color:var(--Warning-Warning-600)}.btn.secondary.legacy{border-color:var(--Secondary-Secondary-500);color:var(--Secondary-Secondary-500)}.btn.secondary.legacy:hover{color:var(--Secondary-Secondary-600);border-color:var(--Secondary-Secondary-600)}.btn.tertiary{background:none!important;border:none}.btn.tertiary.disabled{background:none!important}.btn.tertiary.disabled.default{color:var(--Primary-Primary-300)}.btn.tertiary.disabled.success{color:var(--Success-Success-300)}.btn.tertiary.disabled.info{color:var(--Info-Info-300)}.btn.tertiary.disabled.error{color:var(--Error-Error-300)}.btn.tertiary.disabled.warning{color:var(--Warning-Warning-300)}.btn.tertiary.disabled.legacy{color:var(--Secondary-Secondary-300)}.btn.tertiary.disabled.default,.btn.tertiary.disabled.legacy{border:1px solid var(--Gray-Gray-200);color:var(--Gray-Gray-400)}.btn.tertiary.default,.btn.tertiary.legacy{border:1px solid var(--Gray-Gray-200);color:var(--Gray-Gray-500)}.btn.tertiary.default:hover,.btn.tertiary.legacy:hover{border:1px solid var(--Gray-Gray-400);color:var(--Gray-Gray-600)}.btn.tertiary.success{color:var(--Success-Success-500);border:none}.btn.tertiary.success:hover{background:var(--Success-Success-50);color:var(--Success-Success-500);border:none}.btn.tertiary.info{color:var(--Info-Info-500);border:none}.btn.tertiary.info:hover{background:var(--Info-Info-50);color:var(--Info-Info-500);border:none}.btn.tertiary.error{color:var(--Error-Error-500);border:none}.btn.tertiary.error:hover{background:var(--Error-Error-50);color:var(--Error-Error-500);border:none}.btn.tertiary.warning{color:var(--Warning-Warning-500);border:none}.btn.tertiary.warning:hover{background:var(--Warning-Warning-50);color:var(--Warning-Warning-500);border:none}.btn.tertiary.dropdown{color:var(--Gray-Gray-500);border:none;background:transparent;font-weight:400;font-size:14px}.btn.tertiary.dropdown:hover{color:var(--Gray-Gray-500);border:none}.btn .spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }] });
112
+ }
113
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
114
+ type: Component,
115
+ args: [{ selector: "dropi-wc-button", standalone: true, imports: [CommonModule, IconComponent], host: { "data-figma-node": "2-381" }, template: "<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", styles: [".without-text{gap:0!important}.btn{box-sizing:border-box!important;all:unset;display:inline-flex;align-items:center;justify-content:center;gap:var(--Size-1);border-radius:var(--Border-2);font-weight:700;min-width:33px;line-height:110%;cursor:pointer;white-space:nowrap;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}.btn:active{transition:transform .01s ease-out;transform:scale(.98)}.btn:hover:not(:active){transform:scale(1.01)}.btn.disabled,.btn.loading{cursor:not-allowed;pointer-events:none}.btn.large{padding:var(--Size-4);font-size:var(--Size-4);height:48px}.btn.normal{padding:var(--Size-3);font-size:var(--font-size-s);height:40px}.btn.small{padding:var(--Size-2);font-size:var(--Size-3);height:29px}.btn.primary.disabled.default{background:var(--Primary-Primary-300);color:var(--Neutral-White)}.btn.primary.disabled.success{background:var(--Success-Success-300);color:var(--Neutral-White)}.btn.primary.disabled.info{background:var(--Info-Info-300);color:var(--Neutral-White)}.btn.primary.disabled.error{background:var(--Error-Error-300);color:var(--Neutral-White)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300);color:var(--Neutral-White)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300);color:var(--Neutral-White)}.btn.primary.default{background:var(--Primary-Primary-500);color:var(--Neutral-White)}.btn.primary.default:hover{background:var(--Primary-Primary-600)}.btn.primary.success{background:var(--Success-Success-500);color:var(--Neutral-White)}.btn.primary.success:hover{background:var(--Success-Success-600)}.btn.primary.info{background:var(--Info-Info-500);color:var(--Neutral-White)}.btn.primary.info:hover{background:var(--Info-Info-600)}.btn.primary.error{background:var(--Error-Error-500);color:var(--Neutral-White)}.btn.primary.error:hover{background:var(--Error-Error-600)}.btn.primary.warning{background:var(--Warning-Warning-500);color:var(--Neutral-White)}.btn.primary.warning:hover{background:var(--Warning-Warning-600)}.btn.primary.legacy{background:var(--Secondary-Secondary-500);color:var(--Neutral-White)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600)}.btn.secondary{background:var(--Neutral-White);border:1px solid}.btn.secondary.disabled{background:var(--Neutral-White)}.btn.secondary.disabled.default{border-color:var(--Primary-Primary-300);color:var(--Primary-Primary-300)}.btn.secondary.disabled.success{border-color:var(--Success-Success-300);color:var(--Success-Success-300)}.btn.secondary.disabled.info{border-color:var(--Info-Info-300);color:var(--Info-Info-300)}.btn.secondary.disabled.error{border-color:var(--Error-Error-300);color:var(--Error-Error-300)}.btn.secondary.disabled.warning{border-color:var(--Warning-Warning-300);color:var(--Warning-Warning-300)}.btn.secondary.disabled.legacy{border-color:var(--Secondary-Secondary-300);color:var(--Secondary-Secondary-300)}.btn.secondary.default{border-color:var(--Primary-Primary-500);color:var(--Primary-Primary-500)}.btn.secondary.default:hover{color:var(--Primary-Primary-600);border-color:var(--Primary-Primary-600)}.btn.secondary.success{border-color:var(--Success-Success-500);color:var(--Success-Success-500)}.btn.secondary.success:hover{color:var(--Success-Success-600);border-color:var(--Success-Success-600)}.btn.secondary.info{border-color:var(--Info-Info-500);color:var(--Info-Info-500)}.btn.secondary.info:hover{color:var(--Info-Info-600);border-color:var(--Info-Info-600)}.btn.secondary.error{border-color:var(--Error-Error-500);color:var(--Error-Error-500)}.btn.secondary.error:hover{color:var(--Error-Error-600);border-color:var(--Error-Error-600)}.btn.secondary.warning{border-color:var(--Warning-Warning-500);color:var(--Warning-Warning-500)}.btn.secondary.warning:hover{color:var(--Warning-Warning-600);border-color:var(--Warning-Warning-600)}.btn.secondary.legacy{border-color:var(--Secondary-Secondary-500);color:var(--Secondary-Secondary-500)}.btn.secondary.legacy:hover{color:var(--Secondary-Secondary-600);border-color:var(--Secondary-Secondary-600)}.btn.tertiary{background:none!important;border:none}.btn.tertiary.disabled{background:none!important}.btn.tertiary.disabled.default{color:var(--Primary-Primary-300)}.btn.tertiary.disabled.success{color:var(--Success-Success-300)}.btn.tertiary.disabled.info{color:var(--Info-Info-300)}.btn.tertiary.disabled.error{color:var(--Error-Error-300)}.btn.tertiary.disabled.warning{color:var(--Warning-Warning-300)}.btn.tertiary.disabled.legacy{color:var(--Secondary-Secondary-300)}.btn.tertiary.disabled.default,.btn.tertiary.disabled.legacy{border:1px solid var(--Gray-Gray-200);color:var(--Gray-Gray-400)}.btn.tertiary.default,.btn.tertiary.legacy{border:1px solid var(--Gray-Gray-200);color:var(--Gray-Gray-500)}.btn.tertiary.default:hover,.btn.tertiary.legacy:hover{border:1px solid var(--Gray-Gray-400);color:var(--Gray-Gray-600)}.btn.tertiary.success{color:var(--Success-Success-500);border:none}.btn.tertiary.success:hover{background:var(--Success-Success-50);color:var(--Success-Success-500);border:none}.btn.tertiary.info{color:var(--Info-Info-500);border:none}.btn.tertiary.info:hover{background:var(--Info-Info-50);color:var(--Info-Info-500);border:none}.btn.tertiary.error{color:var(--Error-Error-500);border:none}.btn.tertiary.error:hover{background:var(--Error-Error-50);color:var(--Error-Error-500);border:none}.btn.tertiary.warning{color:var(--Warning-Warning-500);border:none}.btn.tertiary.warning:hover{background:var(--Warning-Warning-50);color:var(--Warning-Warning-500);border:none}.btn.tertiary.dropdown{color:var(--Gray-Gray-500);border:none;background:transparent;font-weight:400;font-size:14px}.btn.tertiary.dropdown:hover{color:var(--Gray-Gray-500);border:none}.btn .spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
116
+ }], propDecorators: { type: [{
117
+ type: Input
118
+ }], severity: [{
119
+ type: Input
120
+ }], size: [{
121
+ type: Input
122
+ }], state: [{
123
+ type: Input
124
+ }], preIcon: [{
125
+ type: Input
126
+ }], postIcon: [{
127
+ type: Input
128
+ }], text: [{
129
+ type: Input
130
+ }], onClick: [{
131
+ type: Output
132
+ }] } });
133
+
134
+ /**
135
+ * Módulo principal de Dropi UI Elements
136
+ *
137
+ * Este módulo proporciona funciones auxiliares para convertir
138
+ * componentes Angular en Web Components
139
+ */
140
+ /**
141
+ * Módulo auxiliar de Angular Elements
142
+ *
143
+ * Este es un módulo vacío que sirve como punto de entrada
144
+ * La conversión a Web Components se hace mediante la función
145
+ * registerDropiElements
146
+ */
147
+ class DropiElementsModule {
148
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiElementsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
149
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: DropiElementsModule });
150
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiElementsModule });
151
+ }
152
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiElementsModule, decorators: [{
153
+ type: NgModule,
154
+ args: [{
155
+ imports: [],
156
+ declarations: [],
157
+ exports: [],
158
+ }]
159
+ }] });
160
+
161
+ /**
162
+ * Registro de elementos personalizados (Web Components)
163
+ *
164
+ * Este archivo contiene la función que registra todos los componentes Angular
165
+ * como Custom Elements del navegador usando Angular Elements.
166
+ */
167
+ /**
168
+ * Registra todos los componentes Dropi como custom elements
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
+ * ```
189
+ */
190
+ function registerDropiElements(injector, components) {
191
+ // Registrar cada componente como custom element
192
+ components.forEach(({ selector, component, description }) => {
193
+ try {
194
+ // Verificar si el custom element ya está definido
195
+ if (!customElements.get(selector)) {
196
+ const element = createCustomElement(component, { injector });
197
+ customElements.define(selector, element);
198
+ console.log(`✅ Web Component registrado: <${selector}> - ${description}`);
199
+ }
200
+ else {
201
+ console.warn(`⚠️ Custom element <${selector}> ya está definido`);
202
+ }
203
+ }
204
+ catch (error) {
205
+ console.error(`❌ Error registrando <${selector}>:`, error);
206
+ }
207
+ });
208
+ }
209
+ /**
210
+ * Función auxiliar para verificar si un componente está registrado
211
+ */
212
+ function isComponentRegistered(selector) {
213
+ return customElements.get(selector) !== undefined;
214
+ }
215
+
216
+ /**
217
+ * Public API Surface de @dropi/ui-components
218
+ */
219
+ // Exportar componentes individuales desde components-source
220
+ // Información de versión
221
+ const DROPI_ELEMENTS_VERSION = "1.0.0";
222
+
223
+ /**
224
+ * Generated bundle index. Do not edit.
225
+ */
226
+
227
+ export { ButtonComponent, DROPI_ELEMENTS_VERSION, DropiElementsModule, isComponentRegistered, registerDropiElements };
228
+ //# sourceMappingURL=dropi-ui-components.mjs.map
package/dist/fesm2022/dropi-ui-components.mjs.map ADDED
@@ -0,0 +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;;;;"}
package/dist/index.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Public API Surface de @dropi/ui-components
3
+ */
4
+ export { ButtonComponent } from "./components-source/dropi-button/dropi-button.component";
5
+ export { DropiElementsModule } from "./lib/elements.module";
6
+ export { registerDropiElements, isComponentRegistered, } from "./lib/elements-registry";
7
+ export declare const DROPI_ELEMENTS_VERSION = "1.0.0";
package/dist/lib/elements-registry.d.ts ADDED
@@ -0,0 +1,44 @@
1
+ /**
2
+ * Registro de elementos personalizados (Web Components)
3
+ *
4
+ * Este archivo contiene la función que registra todos los componentes Angular
5
+ * como Custom Elements del navegador usando Angular Elements.
6
+ */
7
+ import { Injector, Type } from '@angular/core';
8
+ /**
9
+ * Interface para definición de componentes
10
+ */
11
+ interface ComponentDefinition {
12
+ selector: string;
13
+ component: Type<any>;
14
+ description: string;
15
+ }
16
+ /**
17
+ * Registra todos los componentes Dropi como custom elements
18
+ *
19
+ * @param injector - El injector de Angular necesario para createCustomElement
20
+ * @param components - Array de componentes a registrar
21
+ *
22
+ * @example
23
+ * ```typescript
24
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
25
+ * import { registerDropiElements } from '@oropi/ui-elements';
26
+ * import { ButtonComponent } from '@app/ui';
27
+ *
28
+ * const components = [
29
+ * { selector: 'dropi-button', component: ButtonComponent }
30
+ * ];
31
+ *
32
+ * platformBrowserDynamic().bootstrapModule(AppModule)
33
+ * .then((ref) => {
34
+ * const injector = ref.injector;
35
+ * registerDropiElements(injector, components);
36
+ * });
37
+ * ```
38
+ */
39
+ export declare function registerDropiElements(injector: Injector, components: ComponentDefinition[]): void;
40
+ /**
41
+ * Función auxiliar para verificar si un componente está registrado
42
+ */
43
+ export declare function isComponentRegistered(selector: string): boolean;
44
+ export {};
package/dist/lib/elements.module.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import * as i0 from "@angular/core";
2
+ /**
3
+ * Módulo auxiliar de Angular Elements
4
+ *
5
+ * Este es un módulo vacío que sirve como punto de entrada
6
+ * La conversión a Web Components se hace mediante la función
7
+ * registerDropiElements
8
+ */
9
+ export declare class DropiElementsModule {
10
+ static ɵfac: i0.ɵɵFactoryDeclaration<DropiElementsModule, never>;
11
+ static ɵmod: i0.ɵɵNgModuleDeclaration<DropiElementsModule, never, never, never>;
12
+ static ɵinj: i0.ɵɵInjectorDeclaration<DropiElementsModule>;
13
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dropi/ui-components",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
4
4
  "description": "Dropi UI Components - Framework-agnostic Web Components library built with Angular Elements",
5
5
  "keywords": [
6
6
  "web-components",