@caribeng/ui 22.5.0 → 22.6.0
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 +105 -103
- package/fesm2022/caribeng-ui.mjs +4 -4
- package/package.json +1 -1
- package/types/caribeng-ui.d.ts +2 -2
package/README.md
CHANGED
|
@@ -1,64 +1,66 @@
|
|
|
1
1
|
<h1 align="center">CaribeNG</h1>
|
|
2
2
|
|
|
3
3
|
<p align="center">
|
|
4
|
-
<strong>
|
|
5
|
-
Standalone, Signals, OnPush,
|
|
4
|
+
<strong>Design system and component library for Angular.</strong><br />
|
|
5
|
+
Standalone, Signals, OnPush, CSS tokens and WCAG 2.2 AA accessibility.
|
|
6
6
|
</p>
|
|
7
7
|
|
|
8
8
|
<p align="center">
|
|
9
9
|
<img alt="Angular 22" src="https://img.shields.io/badge/Angular-22-dd0031.svg?style=flat-square" />
|
|
10
10
|
<img alt="Entry points" src="https://img.shields.io/badge/entry%20points-173-10b981.svg?style=flat-square" />
|
|
11
|
-
<img alt="
|
|
11
|
+
<img alt="MIT license" src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" />
|
|
12
12
|
</p>
|
|
13
13
|
|
|
14
|
+
<p align="center">📖 Documentation: <a href="https://caribeng.devmike.site">caribeng.devmike.site</a></p>
|
|
15
|
+
|
|
14
16
|
---
|
|
15
17
|
|
|
16
|
-
## ✨
|
|
18
|
+
## ✨ Features
|
|
17
19
|
|
|
18
|
-
- **225
|
|
19
|
-
- **Angular
|
|
20
|
-
- **
|
|
21
|
-
- **
|
|
22
|
-
- **
|
|
23
|
-
- **
|
|
24
|
-
- **
|
|
20
|
+
- **225 standalone components and directives** (186 components + 39 directives), packaged in **173 entry points** (`@caribeng/ui/button`, `@caribeng/ui/table`…): ship only what you import.
|
|
21
|
+
- **Modern Angular:** `input()` / `model()` / `output()` with Signals, `ChangeDetectionStrategy.OnPush` and zoneless-ready.
|
|
22
|
+
- **Frictionless forms:** `ControlValueAccessor` on every control; the error and required indicator sync automatically with Angular Forms.
|
|
23
|
+
- **Accessible:** ARIA roles and attributes, keyboard support and focus management (WCAG 2.2 AA).
|
|
24
|
+
- **Themable:** `--cb-*` CSS tokens, light/dark mode and color presets that switch live.
|
|
25
|
+
- **Icons included:** 363 core icons ready to use and an optional catalog of 1891 icons.
|
|
26
|
+
- **PrimeNG migration:** a schematic translates imports, templates and icons and leaves a report of what remains ([see more](#migrating-from-primeng)).
|
|
25
27
|
|
|
26
|
-
## 🖥
|
|
28
|
+
## 🖥 Compatibility
|
|
27
29
|
|
|
28
|
-
|
|
30
|
+
CaribeNG's major version matches Angular's, just like Angular Material, PrimeNG and NG-ZORRO. Install the version that corresponds to your project:
|
|
29
31
|
|
|
30
|
-
| CaribeNG | Angular |
|
|
32
|
+
| CaribeNG | Angular | Status |
|
|
31
33
|
| --- | --- | --- |
|
|
32
|
-
| `22.x` | `^22.0.0` |
|
|
33
|
-
| `21.x` | `^21.0.0` |
|
|
34
|
+
| `22.x` | `^22.0.0` | Active: new features and fixes |
|
|
35
|
+
| `21.x` | `^21.0.0` | Maintenance: fixes only |
|
|
34
36
|
|
|
35
|
-
|
|
37
|
+
Browsers: the same ones [Angular supports](https://angular.dev/reference/versions#browser-support).
|
|
36
38
|
|
|
37
|
-
## 📦
|
|
39
|
+
## 📦 Installation
|
|
38
40
|
|
|
39
|
-
###
|
|
41
|
+
### Requirements
|
|
40
42
|
|
|
41
|
-
-
|
|
42
|
-
- `@angular/cdk`
|
|
43
|
-
- npm, yarn
|
|
43
|
+
- An **Angular 22** project with `@angular/forms` (any project created with `ng new` includes it).
|
|
44
|
+
- `@angular/cdk` is installed automatically as a dependency (overlays and accessibility).
|
|
45
|
+
- npm, yarn or pnpm.
|
|
44
46
|
|
|
45
|
-
###
|
|
47
|
+
### Quick install (recommended)
|
|
46
48
|
|
|
47
49
|
```bash
|
|
48
50
|
ng add @caribeng/ui
|
|
49
51
|
```
|
|
50
52
|
|
|
51
|
-
|
|
53
|
+
It asks for the language, theme and primary color, and leaves the project ready:
|
|
52
54
|
|
|
53
|
-
-
|
|
54
|
-
-
|
|
55
|
-
-
|
|
55
|
+
- installs `@caribeng/ui` (and `@angular/cdk`),
|
|
56
|
+
- registers `provideCaribeNG({ locale, theme, preset })` in `app.config.ts` (or in `AppModule`),
|
|
57
|
+
- adds `@caribeng/ui/styles.css` to the `angular.json` styles.
|
|
56
58
|
|
|
57
|
-
|
|
59
|
+
You can run it without prompts: `ng add @caribeng/ui --locale=en --theme=system --preset=ocean --skip-confirmation`. Re-running it duplicates nothing.
|
|
58
60
|
|
|
59
|
-
|
|
61
|
+
Then jump to [3. Verify the installation](#3-verify-the-installation).
|
|
60
62
|
|
|
61
|
-
###
|
|
63
|
+
### Manual installation
|
|
62
64
|
|
|
63
65
|
```bash
|
|
64
66
|
# npm
|
|
@@ -71,48 +73,48 @@ yarn add @caribeng/ui
|
|
|
71
73
|
pnpm add @caribeng/ui
|
|
72
74
|
```
|
|
73
75
|
|
|
74
|
-
###
|
|
76
|
+
### Migrating from PrimeNG
|
|
75
77
|
|
|
76
|
-
|
|
78
|
+
In a project with PrimeNG 18 or higher, install CaribeNG and run the migrator:
|
|
77
79
|
|
|
78
80
|
```bash
|
|
79
81
|
npm install @caribeng/ui@22
|
|
80
82
|
ng generate @caribeng/ui:migrate-from-primeng
|
|
81
83
|
```
|
|
82
84
|
|
|
83
|
-
>
|
|
85
|
+
> Commit (or copy) before running it so you can review the changes with `git diff`. With `--dry-run` you can see which files it would change without writing anything. Running `ng add @caribeng/ui` in a project that has PrimeNG reminds you of this command.
|
|
84
86
|
|
|
85
87
|
```html
|
|
86
|
-
<!--
|
|
87
|
-
<p-button label="
|
|
88
|
+
<!-- Before -->
|
|
89
|
+
<p-button label="Save" icon="pi pi-check" [outlined]="true" (onClick)="save()" />
|
|
88
90
|
<input pInputText id="email" [(ngModel)]="email" />
|
|
89
|
-
<p-dialog header="
|
|
91
|
+
<p-dialog header="Edit" [(visible)]="open" [modal]="true" [style]="{ width: '25rem' }">…</p-dialog>
|
|
90
92
|
|
|
91
|
-
<!--
|
|
92
|
-
<cb-button variant="outlined" (click)="
|
|
93
|
+
<!-- After -->
|
|
94
|
+
<cb-button variant="outlined" (click)="save()"><cb-icon name="check" />Save</cb-button>
|
|
93
95
|
<cb-input inputId="email" [(ngModel)]="email" />
|
|
94
|
-
<cb-dialog header="
|
|
96
|
+
<cb-dialog header="Edit" [(visible)]="open" width="25rem">…</cb-dialog>
|
|
95
97
|
```
|
|
96
98
|
|
|
97
|
-
|
|
99
|
+
What it does:
|
|
98
100
|
|
|
99
|
-
-
|
|
100
|
-
-
|
|
101
|
-
-
|
|
102
|
-
-
|
|
103
|
-
-
|
|
104
|
-
-
|
|
101
|
+
- swaps PrimeNG imports for CaribeNG ones (`ButtonModule` → `CbButton`, `providePrimeNG()` → `provideCaribeNG()`) and adds to each component the ones its template uses,
|
|
102
|
+
- translates templates with their inputs and events (`[outlined]` → `variant`, `size="small"` → `size="sm"`, `(onClick)` → `(click)`, `subheader` → `subtitle`…), including the Dialog and Card footer (`#footer` → `<div cb-dialog-footer>` / `<div cb-card-footer>`),
|
|
103
|
+
- replaces `MessageService` with `CbToastService`: translates messages (`severity: 'error'` → `'danger'`, `'warn'` → `'warning'`, `sticky: true` → `life: 0`) and removes it from `providers`, because `CbToastService` is a singleton for the whole app,
|
|
104
|
+
- converts `pi pi-*` icons into `<cb-icon>` and registers with `provideCbIcons` the ones that are not in the core set,
|
|
105
|
+
- removes PrimeIcons from `angular.json` and stylesheets, and adds `@caribeng/ui/styles.css`,
|
|
106
|
+
- removes `primeng`, `primeicons` and `@primeuix/*` from `package.json` **only when no reference remains**; until then both libraries coexist.
|
|
105
107
|
|
|
106
|
-
|
|
108
|
+
What it cannot translate safely (an input without an equivalent, a custom `#header` template, a `pButton` on a link…) is marked with a comment next to the code, keeping the original attribute:
|
|
107
109
|
|
|
108
110
|
```html
|
|
109
|
-
<!-- TODO(caribeng): [rounded]="true" — cb-button no
|
|
110
|
-
<cb-button severity="danger">
|
|
111
|
+
<!-- TODO(caribeng): [rounded]="true" — cb-button has no rounded variant; use your own class or <cb-icon-button>. -->
|
|
112
|
+
<cb-button severity="danger">Delete</cb-button>
|
|
111
113
|
```
|
|
112
114
|
|
|
113
|
-
|
|
115
|
+
All warnings, remaining PrimeNG references (for example components the migrator does not translate yet) and imports that must be added by hand are summarized in `caribeng-migration-report.md`, with file and line.
|
|
114
116
|
|
|
115
|
-
**
|
|
117
|
+
**Components it translates today:**
|
|
116
118
|
|
|
117
119
|
| PrimeNG | CaribeNG |
|
|
118
120
|
|---|---|
|
|
@@ -128,37 +130,37 @@ Todos los avisos, las referencias a PrimeNG que aún quedan (por ejemplo compone
|
|
|
128
130
|
| `<p-confirmdialog>` + `ConfirmationService` | `<cb-confirm-dialog service>` + `CbConfirmationService` |
|
|
129
131
|
| `<p-confirmpopup>` | `<cb-confirm-popup service>` |
|
|
130
132
|
| `<p-menu>`, `<p-menubar>`, `<p-tieredmenu>`, `<p-panelmenu>`, `<p-breadcrumb>`, `<p-tabmenu>` | `<cb-menu>`, `<cb-menubar>`, `<cb-tieredmenu>`, `<cb-panelmenu>`, `<cb-breadcrumb>`, `<cb-tabmenu>` |
|
|
131
|
-
| `MenuItem[]` (`icon`, `command`, `routerLink`…) |
|
|
133
|
+
| `MenuItem[]` (`icon`, `command`, `routerLink`…) | the item type of the menu that receives it (`CbMenubarItem[]`…) |
|
|
132
134
|
| `<p-splitbutton>` | `<cb-split-button>` |
|
|
133
|
-
| `<p-table>` (
|
|
134
|
-
| `<p-tabs>` (
|
|
135
|
-
| `<p-accordion>` (
|
|
135
|
+
| `<p-table>` (columns written in `#header`/`#body` or dynamic with `@for`) | `<cb-table [columns]>` + a `cbTableCell` per custom cell |
|
|
136
|
+
| `<p-tabs>` (and `<p-tabView>`) | `<cb-tabs>` + `<cb-tab label="…">` |
|
|
137
|
+
| `<p-accordion>` (and `<p-accordionTab>`) | `<cb-accordion>` + `<cb-accordion-panel header="…">` |
|
|
136
138
|
| `<p-tag>` | `<cb-tag>` |
|
|
137
139
|
| `<p-toast>` + `MessageService` | `<cb-toast>` + `CbToastService` |
|
|
138
140
|
| `<p-card>` | `<cb-card>` |
|
|
139
|
-
| `pTooltip` (
|
|
141
|
+
| `pTooltip` (on any element) | `cbTooltip` |
|
|
140
142
|
| `<p-checkbox>` | `<cb-checkbox>` |
|
|
141
143
|
| `<i class="pi pi-*">` | `<cb-icon>` |
|
|
142
144
|
|
|
143
|
-
|
|
145
|
+
In menus, `MenuItem` arrays change type according to the menu that receives them in the template; `icon: 'pi pi-plus'` becomes `'plus'`, `command` and `visible` are kept, and `routerLink: '/x'` becomes `url` (`routerLink` with parameters is flagged). In tables, each `<th>`/`<td>` becomes a column of `[columns]` (`pSortableColumn` → `sortable`, `<p-columnFilter>` → `filter`, `pFrozenColumn` → `frozen`); cells that are not just `{{ row.field }}` become a `<ng-template cbTableCell>` with their migrated content, and checkbox and expand columns disappear because `cb-table` adds them itself. With dynamic columns (`[columns]="cols"` + `@for`), `cols` is passed directly to `[columns]`: the migrator adds `sortable: true` / `filter: true` if the header applied them to all, and the `@if (col.field === '…')` or `@switch (col.field)` branches of the body become a `cbTableCell` per field. Tables with generic-logic cells, several rows per record or templates without an equivalent are flagged and keep `TableModule`, so they keep compiling. PrimeNG 18+ tabs and accordions are restructured (the header becomes `label`/`header`); if they are generated with `@for` or the header has icons, they are flagged.
|
|
144
146
|
|
|
145
|
-
|
|
147
|
+
Radios (`<p-radiobutton>`) and context menus (`<p-contextmenu>`) are flagged but not converted, because the page structure changes: in CaribeNG the radio model lives in a `<cb-radio-group>` that wraps the options, and `<cb-contextmenu>` wraps the area it opens on instead of pointing to it with `[target]`. The remaining components appear in the report to migrate by hand; they will be added in future versions.
|
|
146
148
|
|
|
147
|
-
|
|
|
149
|
+
| Option | Use |
|
|
148
150
|
|---|---|
|
|
149
|
-
| `--path=src/app/
|
|
150
|
-
| `--remove-primeng=false` |
|
|
151
|
-
| `--report=false` |
|
|
152
|
-
| `--skip-install` |
|
|
153
|
-
| `--force` |
|
|
151
|
+
| `--path=src/app/sales` | Migrate only one folder (partial migration). |
|
|
152
|
+
| `--remove-primeng=false` | Do not touch `package.json` dependencies. |
|
|
153
|
+
| `--report=false` | Do not write the report. |
|
|
154
|
+
| `--skip-install` | Do not install dependencies when finished. |
|
|
155
|
+
| `--force` | Migrate even if `@caribeng/ui` is missing or the PrimeNG version is older than 18. |
|
|
154
156
|
|
|
155
|
-
## 🔨
|
|
157
|
+
## 🔨 Usage
|
|
156
158
|
|
|
157
|
-
>
|
|
159
|
+
> With `ng add @caribeng/ui`, steps 1 and 2 are already done.
|
|
158
160
|
|
|
159
|
-
### 1.
|
|
161
|
+
### 1. Provider
|
|
160
162
|
|
|
161
|
-
|
|
163
|
+
Add `provideCaribeNG()` to your `app.config.ts` providers. All options are optional:
|
|
162
164
|
|
|
163
165
|
```ts
|
|
164
166
|
import { ApplicationConfig } from '@angular/core';
|
|
@@ -167,18 +169,18 @@ import { provideCaribeNG } from '@caribeng/ui';
|
|
|
167
169
|
export const appConfig: ApplicationConfig = {
|
|
168
170
|
providers: [
|
|
169
171
|
provideCaribeNG({
|
|
170
|
-
theme: 'system', // 'light' (
|
|
172
|
+
theme: 'system', // 'light' (default) | 'dark' | 'system'
|
|
171
173
|
preset: 'emerald', // 'emerald' | 'ocean' | 'coral' | 'amber' | 'violet' | 'rose'
|
|
172
|
-
persistTheme: true, //
|
|
174
|
+
persistTheme: true, // remembers the user's choice
|
|
173
175
|
requiredIndicator: 'none', // 'asterisk' | 'text' | 'optional' | 'none'
|
|
174
176
|
}),
|
|
175
177
|
],
|
|
176
178
|
};
|
|
177
179
|
```
|
|
178
180
|
|
|
179
|
-
### 2.
|
|
181
|
+
### 2. Styles
|
|
180
182
|
|
|
181
|
-
|
|
183
|
+
Add the stylesheet (`--cb-*` tokens, theme and utilities) in `angular.json`:
|
|
182
184
|
|
|
183
185
|
```diff
|
|
184
186
|
"styles": [
|
|
@@ -187,16 +189,16 @@ Agrega la hoja de estilos (tokens `--cb-*`, tema y utilidades) en `angular.json`
|
|
|
187
189
|
]
|
|
188
190
|
```
|
|
189
191
|
|
|
190
|
-
|
|
192
|
+
or import it from your global stylesheet:
|
|
191
193
|
|
|
192
194
|
```css
|
|
193
195
|
/* src/styles.css */
|
|
194
196
|
@import '@caribeng/ui/styles.css';
|
|
195
197
|
```
|
|
196
198
|
|
|
197
|
-
### 3.
|
|
199
|
+
### 3. Verify the installation
|
|
198
200
|
|
|
199
|
-
|
|
201
|
+
Import the components you use from their entry point. Each component's import path appears on its documentation page.
|
|
200
202
|
|
|
201
203
|
```ts
|
|
202
204
|
import { Component, signal } from '@angular/core';
|
|
@@ -207,41 +209,41 @@ import { CbInput } from '@caribeng/ui/input';
|
|
|
207
209
|
selector: 'app-root',
|
|
208
210
|
imports: [CbButton, CbInput],
|
|
209
211
|
template: `
|
|
210
|
-
<cb-input label="
|
|
211
|
-
<cb-button (click)="
|
|
212
|
+
<cb-input label="Email" type="email" [(value)]="email" />
|
|
213
|
+
<cb-button (click)="send()">Continue</cb-button>
|
|
212
214
|
`,
|
|
213
215
|
})
|
|
214
216
|
export class App {
|
|
215
217
|
readonly email = signal('');
|
|
216
218
|
|
|
217
|
-
|
|
219
|
+
send(): void {
|
|
218
220
|
console.log(this.email());
|
|
219
221
|
}
|
|
220
222
|
}
|
|
221
223
|
```
|
|
222
224
|
|
|
223
|
-
|
|
225
|
+
If you see the field and the button styled, CaribeNG is ready.
|
|
224
226
|
|
|
225
|
-
###
|
|
227
|
+
### Forms
|
|
226
228
|
|
|
227
|
-
|
|
229
|
+
Every control works with Reactive Forms and template-driven forms. The error shows only when the control is invalid and the user touched it; the message is optional:
|
|
228
230
|
|
|
229
231
|
```html
|
|
230
|
-
<cb-input label="
|
|
232
|
+
<cb-input label="Email" formControlName="email" error="Enter a valid email" />
|
|
231
233
|
```
|
|
232
234
|
|
|
233
|
-
## 🌐
|
|
235
|
+
## 🌐 Language (i18n)
|
|
234
236
|
|
|
235
|
-
|
|
237
|
+
The components' UI texts (accessible labels, buttons, placeholders and messages) come in **English** (default) and **Spanish**:
|
|
236
238
|
|
|
237
239
|
```ts
|
|
238
240
|
provideCaribeNG({
|
|
239
|
-
locale: 'en', // 'es' | 'en' |
|
|
240
|
-
translation: { noResults: 'Nothing here yet' }, //
|
|
241
|
+
locale: 'en', // 'es' | 'en' | your own CbTranslation object
|
|
242
|
+
translation: { noResults: 'Nothing here yet' }, // overrides individual texts
|
|
241
243
|
});
|
|
242
244
|
```
|
|
243
245
|
|
|
244
|
-
|
|
246
|
+
Switch at runtime, without reloading:
|
|
245
247
|
|
|
246
248
|
```ts
|
|
247
249
|
import { inject } from '@angular/core';
|
|
@@ -250,9 +252,9 @@ import { CbLocaleService } from '@caribeng/ui';
|
|
|
250
252
|
inject(CbLocaleService).use('en');
|
|
251
253
|
```
|
|
252
254
|
|
|
253
|
-
|
|
255
|
+
A text passed as an input (for example `placeholder` or `emptyMessage`) always takes priority over the language.
|
|
254
256
|
|
|
255
|
-
## 🎨
|
|
257
|
+
## 🎨 Light/dark theme and presets
|
|
256
258
|
|
|
257
259
|
```ts
|
|
258
260
|
import { inject } from '@angular/core';
|
|
@@ -261,25 +263,25 @@ import { CbThemeService } from '@caribeng/ui';
|
|
|
261
263
|
export class Header {
|
|
262
264
|
private readonly theme = inject(CbThemeService);
|
|
263
265
|
|
|
264
|
-
|
|
266
|
+
toggleTheme(): void {
|
|
265
267
|
this.theme.toggle(); // 'light' <-> 'dark'
|
|
266
268
|
}
|
|
267
269
|
|
|
268
|
-
|
|
270
|
+
useOcean(): void {
|
|
269
271
|
this.theme.setPreset('ocean');
|
|
270
272
|
}
|
|
271
273
|
}
|
|
272
274
|
```
|
|
273
275
|
|
|
274
|
-
## 🔣
|
|
276
|
+
## 🔣 Icons
|
|
275
277
|
|
|
276
|
-
|
|
278
|
+
The 363 core icons register themselves:
|
|
277
279
|
|
|
278
280
|
```html
|
|
279
281
|
<cb-icon name="house" [size]="20" />
|
|
280
282
|
```
|
|
281
283
|
|
|
282
|
-
|
|
284
|
+
To use others from the full catalog (1891 icons derived from Lucide), register them in the providers; only the ones you import are bundled:
|
|
283
285
|
|
|
284
286
|
```ts
|
|
285
287
|
import { provideCbIcons } from '@caribeng/ui/icon';
|
|
@@ -288,7 +290,7 @@ import { heartPulse, rocket } from '@caribeng/ui/icons';
|
|
|
288
290
|
providers: [provideCbIcons({ 'heart-pulse': heartPulse, rocket })];
|
|
289
291
|
```
|
|
290
292
|
|
|
291
|
-
## 📚
|
|
293
|
+
## 📚 Catalog
|
|
292
294
|
|
|
293
295
|
- **Form:** `autocomplete`, `button`, `button-group`, `cascadeselect`, `checkbox`, `chips`, `colorpicker`, `datepicker`, `editor`, `fab-menu`, `fileupload`, `floatlabel`, `icon-button`, `iconfield`, `input`, `input-number`, `input-search`, `input-token`, `inputgroup`, `inputmask`, `inputotp`, `keyfilter`, `knob`, `listbox`, `mentions`, `multiselect`, `password`, `phone-input`, `radio`, `rating`, `repeater`, `select`, `selectbutton`, `slider`, `tag-button`, `textarea`, `toggle`, `togglebutton`, `treeselect`.
|
|
294
296
|
- **Data:** `dataview`, `descriptions`, `kanban`, `orderlist`, `organizationchart`, `paginator`, `picklist`, `statistic`, `table`, `timeline`, `tracker`, `tree`, `treetable`, `virtualscroller`.
|
|
@@ -297,15 +299,15 @@ providers: [provideCbIcons({ 'heart-pulse': heartPulse, rocket })];
|
|
|
297
299
|
- **Menu:** `anchor`, `breadcrumb`, `contextmenu`, `dock`, `float-menu`, `megamenu`, `menu`, `menubar`, `panelmenu`, `sidebar`, `speeddial`, `splitbutton`, `steps`, `tabmenu`, `tieredmenu`.
|
|
298
300
|
- **Panel:** `accordion`, `card`, `card-content`, `card-move`, `card-primary`, `card-select`, `divider`, `expansion-panel`, `fieldset`, `footer`, `header`, `panel`, `scrollpanel`, `scrolltop`, `splitter`, `stepper`, `tabs`, `toolbar`.
|
|
299
301
|
- **Media:** `animation-lottie`, `avatar`, `avatargroup`, `carousel`, `galleria`, `illustration`, `image`, `logo`, `pdfviewer`, `qrcode`.
|
|
300
|
-
- **
|
|
301
|
-
- **Misc
|
|
302
|
+
- **Files and pricing:** `file-card`, `file-download`, `folder-card`, `pricing`.
|
|
303
|
+
- **Misc and directives:** `animateonscroll`, `autofocus`, `blockui`, `chart`, `code-block`, `copy-button`, `dots-indicator`, `focustrap`, `icon`, `icons`, `inplace`, `kbd`, `link`, `metergroup`, `progressbar`, `ripple`, `shortcut`, `skeleton`, `spinner`, `status`, `step-indicator`, `styleclass`, `terminal`, `themetoggle`.
|
|
302
304
|
|
|
303
|
-
## 🧭
|
|
305
|
+
## 🧭 Next steps
|
|
304
306
|
|
|
305
|
-
-
|
|
306
|
-
-
|
|
307
|
-
-
|
|
307
|
+
- Explore every component, with HTML and TypeScript examples, on the documentation site (showcase).
|
|
308
|
+
- Customize colors and tokens in the Theming guide.
|
|
309
|
+
- Check each version's news on the Changelog page of the documentation site.
|
|
308
310
|
|
|
309
|
-
## ☀️
|
|
311
|
+
## ☀️ License
|
|
310
312
|
|
|
311
|
-
MIT © CaribeNG Contributors.
|
|
313
|
+
MIT © CaribeNG Contributors. Icons derived from Lucide (ISC); see `THIRD-PARTY-NOTICES.md`.
|
package/fesm2022/caribeng-ui.mjs
CHANGED
|
@@ -91,7 +91,7 @@ const CB_DEFAULT_CONFIG = {
|
|
|
91
91
|
persistTheme: false,
|
|
92
92
|
storageKey: 'caribeng-theme',
|
|
93
93
|
requiredIndicator: 'none',
|
|
94
|
-
locale: '
|
|
94
|
+
locale: 'en',
|
|
95
95
|
};
|
|
96
96
|
/** Token de inyección con la configuración resuelta de CaribeNG. */
|
|
97
97
|
const CB_CONFIG = new InjectionToken('CB_CONFIG', {
|
|
@@ -337,7 +337,7 @@ function cbVisibleItems(items) {
|
|
|
337
337
|
return result;
|
|
338
338
|
}
|
|
339
339
|
|
|
340
|
-
/** Español
|
|
340
|
+
/** Español. */
|
|
341
341
|
const CB_LOCALE_ES = {
|
|
342
342
|
intlLocale: 'es',
|
|
343
343
|
close: 'Cerrar',
|
|
@@ -2399,8 +2399,8 @@ function injectCbTranslation() {
|
|
|
2399
2399
|
}
|
|
2400
2400
|
function resolve(locale) {
|
|
2401
2401
|
if (!locale)
|
|
2402
|
-
return CB_LOCALES.
|
|
2403
|
-
return typeof locale === 'string' ? (CB_LOCALES[locale] ?? CB_LOCALES.
|
|
2402
|
+
return CB_LOCALES.en;
|
|
2403
|
+
return typeof locale === 'string' ? (CB_LOCALES[locale] ?? CB_LOCALES.en) : locale;
|
|
2404
2404
|
}
|
|
2405
2405
|
|
|
2406
2406
|
/** Control vacío con el que se evalúa si los validadores incluyen `required`. */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@caribeng/ui",
|
|
3
|
-
"version": "22.
|
|
3
|
+
"version": "22.6.0",
|
|
4
4
|
"description": "CaribeNG — sistema de diseño y librería de componentes para Angular 22+ (standalone, signals, OnPush, zoneless). 162 entry points tree-shakeables, accesibles (WCAG 2.2 AA) y tematizables.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
package/types/caribeng-ui.d.ts
CHANGED
|
@@ -1218,7 +1218,7 @@ interface CbTranslation {
|
|
|
1218
1218
|
flowReadonlyHint: string;
|
|
1219
1219
|
flowEdgeHint: string;
|
|
1220
1220
|
}
|
|
1221
|
-
/** Español
|
|
1221
|
+
/** Español. */
|
|
1222
1222
|
declare const CB_LOCALE_ES: CbTranslation;
|
|
1223
1223
|
/** Inglés. */
|
|
1224
1224
|
declare const CB_LOCALE_EN: CbTranslation;
|
|
@@ -1269,7 +1269,7 @@ interface CaribeNgConfig {
|
|
|
1269
1269
|
optionalText?: string;
|
|
1270
1270
|
/**
|
|
1271
1271
|
* Idioma de los textos de interfaz (etiquetas accesibles, botones, mensajes
|
|
1272
|
-
* por defecto): `'
|
|
1272
|
+
* por defecto): `'en'` (por defecto), `'es'` o un objeto `CbTranslation` propio.
|
|
1273
1273
|
*/
|
|
1274
1274
|
locale?: CbLocaleCode | CbTranslation;
|
|
1275
1275
|
/** Textos sueltos que sobrescriben los del idioma, p. ej. `{ close: 'Salir' }`. */
|