catarina 20.3.4 → 20.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +43 -53
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,72 +1,72 @@
|
|
|
1
|
-
## Catarina – Design System
|
|
1
|
+
## Catarina – Design System for Angular
|
|
2
2
|
|
|
3
|
-
**Catarina**
|
|
4
|
-
|
|
3
|
+
**Catarina** is a UI component library for Angular 20.3.x.
|
|
4
|
+
It includes buttons, icons, form controls, panels, and utilities related to _theming_ and icons.
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
The library is published under the name:
|
|
7
7
|
|
|
8
|
-
- **
|
|
9
|
-
- **
|
|
8
|
+
- **npm package**: `catarina`
|
|
9
|
+
- **Version**: `1.0.1`
|
|
10
10
|
|
|
11
11
|
---
|
|
12
12
|
|
|
13
|
-
##
|
|
13
|
+
## Requirements
|
|
14
14
|
|
|
15
|
-
`catarina`
|
|
15
|
+
`catarina` declares the following _peerDependencies_:
|
|
16
16
|
|
|
17
17
|
- `@angular/core`: `^20.3.0`
|
|
18
18
|
- `@angular/common`: `^20.3.0`
|
|
19
|
-
- `@angular/cdk`: `^20.2.0` (
|
|
19
|
+
- `@angular/cdk`: `^20.2.0` (required for Dialog and Drawer components)
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
And depends on:
|
|
22
22
|
|
|
23
23
|
- `tslib`: `^2.3.0`
|
|
24
24
|
|
|
25
25
|
---
|
|
26
26
|
|
|
27
|
-
##
|
|
27
|
+
## Installation
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
In an Angular 20 project:
|
|
30
30
|
|
|
31
31
|
```bash
|
|
32
32
|
npm install catarina @angular/cdk
|
|
33
33
|
```
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
It can also be installed with `pnpm` or `yarn` using the same package name.
|
|
36
36
|
|
|
37
|
-
**
|
|
37
|
+
**Note**: `@angular/cdk` is required if you plan to use the `Dialog` or `Drawer` components. These components use CDK Overlay internally to automatically manage overlays, z-index, and scroll.
|
|
38
38
|
|
|
39
39
|
---
|
|
40
40
|
|
|
41
|
-
## API
|
|
41
|
+
## Public API
|
|
42
42
|
|
|
43
|
-
|
|
43
|
+
The `public-api.ts` file exposes the main elements of the design system:
|
|
44
44
|
|
|
45
|
-
- **
|
|
45
|
+
- **Design components**:
|
|
46
46
|
- `Icon` (`cat-icon`)
|
|
47
47
|
- `Button` (`cat-button`)
|
|
48
|
-
-
|
|
49
|
-
- **
|
|
48
|
+
- Panels (`card`, `accordion`, `accordion-group`)
|
|
49
|
+
- **Form components**:
|
|
50
50
|
- `cat-input`, `color-input`, `select-input`, `date-input`, `file-input`,
|
|
51
51
|
`password-input`, `range-input`, `text-area-input`, `time-input`
|
|
52
52
|
- **Overlays**:
|
|
53
53
|
- `dialog`
|
|
54
|
-
- **
|
|
55
|
-
-
|
|
56
|
-
-
|
|
54
|
+
- **Services and directives**:
|
|
55
|
+
- Drag directive (`drag`)
|
|
56
|
+
- Theming utilities
|
|
57
57
|
- **Tokens**:
|
|
58
58
|
- `ICON_PROVIDER`
|
|
59
|
-
- **
|
|
59
|
+
- **Icon utilities**:
|
|
60
60
|
- `getIconPath`, `iconList`, `IconName`, `ICON_BASE_PATH`
|
|
61
61
|
|
|
62
|
-
|
|
62
|
+
All these symbols are imported directly from the `catarina` package.
|
|
63
63
|
|
|
64
64
|
---
|
|
65
65
|
|
|
66
|
-
##
|
|
66
|
+
## Icon configuration
|
|
67
67
|
|
|
68
|
-
`catarina`
|
|
69
|
-
|
|
68
|
+
`catarina` uses the `ICON_PROVIDER` token to resolve icon paths.
|
|
69
|
+
This token can be configured using the integrated utilities in `catarina`:
|
|
70
70
|
|
|
71
71
|
```ts
|
|
72
72
|
// app.config.ts
|
|
@@ -86,16 +86,16 @@ export const appConfig: ApplicationConfig = {
|
|
|
86
86
|
};
|
|
87
87
|
```
|
|
88
88
|
|
|
89
|
-
|
|
89
|
+
With this configuration, `catarina` components that use icons resolve paths using the integrated utilities.
|
|
90
90
|
|
|
91
|
-
###
|
|
91
|
+
### Assets configuration in `angular.json`
|
|
92
92
|
|
|
93
|
-
|
|
93
|
+
To use external SVG icons, you need to add the following entry in the `assets` section of `angular.json` so that SVG files are copied to the output directory:
|
|
94
94
|
|
|
95
95
|
```json
|
|
96
96
|
{
|
|
97
97
|
"projects": {
|
|
98
|
-
"
|
|
98
|
+
"your-project": {
|
|
99
99
|
"architect": {
|
|
100
100
|
"build": {
|
|
101
101
|
"options": {
|
|
@@ -116,13 +116,13 @@ Para usar iconos SVG externos, es necesario añadir la siguiente entrada en la s
|
|
|
116
116
|
}
|
|
117
117
|
```
|
|
118
118
|
|
|
119
|
-
**
|
|
119
|
+
**Note**: If you use the `safirial-icons` package from npm, this configuration copies SVG files from `node_modules/safirial-icons/assets` to the `safirial-icons` folder in the output directory. The utilities `getIconPath` and `iconList` are available directly from `catarina` without needing to install `safirial-icons`.
|
|
120
120
|
|
|
121
121
|
---
|
|
122
122
|
|
|
123
|
-
##
|
|
123
|
+
## Basic component usage
|
|
124
124
|
|
|
125
|
-
|
|
125
|
+
Example usage of `cat-button` and `Icon` within an application component:
|
|
126
126
|
|
|
127
127
|
```ts
|
|
128
128
|
// app.component.ts
|
|
@@ -134,7 +134,7 @@ import { Button as CatarinaButton, Icon as CatarinaIcon } from 'catarina';
|
|
|
134
134
|
imports: [CatarinaButton, CatarinaIcon],
|
|
135
135
|
template: `
|
|
136
136
|
<cat-button variant="primary" size="md" iconLeft="home">
|
|
137
|
-
|
|
137
|
+
Catarina Button
|
|
138
138
|
</cat-button>
|
|
139
139
|
|
|
140
140
|
<cat-icon name="sun" [size]="'32px'"></cat-icon>
|
|
@@ -143,7 +143,7 @@ import { Button as CatarinaButton, Icon as CatarinaIcon } from 'catarina';
|
|
|
143
143
|
export class AppComponent {}
|
|
144
144
|
```
|
|
145
145
|
|
|
146
|
-
|
|
146
|
+
Icon `name` values must match the names defined in the `iconList` exported from `catarina`. You can import `iconList` for autocomplete and validation:
|
|
147
147
|
|
|
148
148
|
```ts
|
|
149
149
|
import { iconList, IconName } from 'catarina';
|
|
@@ -151,21 +151,21 @@ import { iconList, IconName } from 'catarina';
|
|
|
151
151
|
|
|
152
152
|
---
|
|
153
153
|
|
|
154
|
-
##
|
|
154
|
+
## Building and publishing
|
|
155
155
|
|
|
156
|
-
|
|
156
|
+
To compile the library from the workspace:
|
|
157
157
|
|
|
158
158
|
```bash
|
|
159
159
|
ng build catarina
|
|
160
160
|
```
|
|
161
161
|
|
|
162
|
-
|
|
162
|
+
The output is generated in:
|
|
163
163
|
|
|
164
164
|
```bash
|
|
165
165
|
dist/catarina
|
|
166
166
|
```
|
|
167
167
|
|
|
168
|
-
|
|
168
|
+
To publish to npm (from the workspace):
|
|
169
169
|
|
|
170
170
|
```bash
|
|
171
171
|
ng build catarina
|
|
@@ -175,19 +175,9 @@ npm publish
|
|
|
175
175
|
|
|
176
176
|
---
|
|
177
177
|
|
|
178
|
-
##
|
|
178
|
+
## Language / Idioma
|
|
179
179
|
|
|
180
|
-
|
|
180
|
+
This documentation is available in English. For the Spanish version, see [README.en.md](./README.en.md).
|
|
181
181
|
|
|
182
|
-
|
|
182
|
+
Esta documentación está disponible en inglés. Para la versión en español, consulta [README.en.md](./README.en.md).
|
|
183
183
|
|
|
184
|
-
---
|
|
185
|
-
|
|
186
|
-
## Nota sobre la documentación
|
|
187
|
-
|
|
188
|
-
Esta documentación fue generada usando **Cursor** con los siguientes parámetros:
|
|
189
|
-
|
|
190
|
-
- **Herramienta**: Cursor IDE
|
|
191
|
-
- **Modelo**: Auto (agente router de Cursor)
|
|
192
|
-
- **Idioma**: Español
|
|
193
|
-
- **Instrucciones**: Analizar todos los proyectos del workspace y actualizar la documentación para consumo, sin incluir errores, mejoras ni sugerencias, solo información factual sobre instalación, configuración y uso de las librerías.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "catarina",
|
|
3
|
-
"version": "20.3.
|
|
3
|
+
"version": "20.3.5",
|
|
4
4
|
"description": "Angular 20.3.0 UI Design System, preview: https://jpcn-portfolio.vercel.app/catarina-preview",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"@angular/common": "^20.3.0",
|
|
24
24
|
"@angular/core": "^20.3.0",
|
|
25
|
-
"@angular/cdk": "^20.2.
|
|
25
|
+
"@angular/cdk": "^20.2.14"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"tslib": "^2.3.0"
|