npm - shirkasoft-ui-components - Versions diffs - 1.0.23 → 1.0.24 - Mend

shirkasoft-ui-components 1.0.23 → 1.0.24

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 (4) hide show

package/README.md +115 -108
package/fesm2022/shirkasoft-ui-components.mjs +3 -1
package/fesm2022/shirkasoft-ui-components.mjs.map +1 -1
package/package.json +2 -2

package/README.md CHANGED Viewed

@@ -1,22 +1,29 @@
 # Shirkasoft UI Components
 <p align="center">
-  Creado por <a href="https://shirkasoft.com" target="_blank"><strong>Shirkasoft</strong></a>
+  <a href="https://github.com/Ansem13/shirkasoft-ui-components/releases"><img src="https://img.shields.io/npm/v/shirkasoft-ui-components?style=flat&logo=npm&label=version" alt="npm version" /></a>
+  <a href="https://github.com/Ansem13/shirkasoft-ui-components/issues"><img src="https://img.shields.io/github/issues/Ansem13/shirkasoft-ui-components?style=flat&logo=github" alt="GitHub issues" /></a>
+  <a href="https://github.com/Ansem13/shirkasoft-ui-components"><img src="https://img.shields.io/badge/source-github-181717?style=flat&logo=github" alt="GitHub source" /></a>
+  <a href="https://ansem13.github.io/shirkasoft-ui-components/"><img src="https://img.shields.io/badge/showcase-online-10b981?style=flat&logo=githubpages" alt="Showcase" /></a>
 </p>
-Librería de componentes UI para Angular 21+ con **Tailwind CSS**, **standalone components**, señales (Angular signals) y soporte de **tema claro/oscuro** mediante CSS custom properties.
+<p align="center">
+  Created by <a href="https://shirkasoft.com" target="_blank"><strong>Shirkasoft</strong></a>
+</p>
+Angular 21+ UI components library built with **Tailwind CSS**, **standalone components**, **Angular signals**, and **light/dark theme** support via CSS custom properties.
-## Instalación
+## Installation
 ```bash
 pnpm add shirkasoft-ui-components
-# o
+# or
 npm install shirkasoft-ui-components
 ```
-### Dependencias pares
+### Peer Dependencies
-| Paquete | Versión mínima |
+| Package | Minimum version |
 |---|---|
 | @angular/common | ^21.2.0 |
 | @angular/core | ^21.2.0 |
@@ -26,15 +33,15 @@ npm install shirkasoft-ui-components
 | @lucide/angular | ^1.17.0 |
 | chart.js | ^4.4.0 |
-## Configuración del tema
+## Theme Setup
-Importar el tema en `styles.css` global:
+Import the theme in your global `styles.css`:
 ```css
 @import '@shirkasoft/ui-components/theme.css';
 ```
-El tema se basa en variables CSS `--shk-*`. Para personalizar colores, sobrescribí las variables en `:root` (modo claro) y `.dark` (modo oscuro):
+The theme is based on `--shk-*` CSS variables. To customize colors, override the variables in `:root` (light mode) and `.dark` (dark mode):
 ```css
 :root {
@@ -46,7 +53,7 @@ El tema se basa en variables CSS `--shk-*`. Para personalizar colores, sobrescri
 ### Dark mode
-Agregá la clase `dark` al elemento `<html>` para activar el modo oscuro.
+Add the `dark` class to the `<html>` element to enable dark mode.
 ```typescript
 document.documentElement.classList.toggle('dark');
@@ -54,9 +61,9 @@ document.documentElement.classList.toggle('dark');
 ---
-## Componentes
+## Components
-| # | Componente | Selector | ControlValueAccessor | Servicio asociado |
+| # | Component | Selector | ControlValueAccessor | Associated service |
 |---|---|---|---|---|
 | 1 | TextField | `shk-text-field` | ✅ | — |
 | 2 | Toggle | `shk-toggle` | ✅ | — |
@@ -75,23 +82,23 @@ document.documentElement.classList.toggle('dark');
 ### TextField (`shk-text-field`)
-Campo de texto con soporte para input, textarea, password, búsqueda, formato de tarjeta de crédito, y validación de errores. Implementa `ControlValueAccessor`.
+Text input with support for input, textarea, password, search, credit card formatting, and error validation. Implements `ControlValueAccessor`.
 ```html
 <shk-text-field
-  [label]="'Nombre'"
+  [label]="'Name'"
   [control]="myControl"
   [type]="'text'"
-  [placeholder]="'Ingresá tu nombre'"
+  [placeholder]="'Enter your name'"
   [disabled]="false"
-  [errorMessages]="{ required: 'Campo obligatorio' }"
+  [errorMessages]="{ required: 'This field is required' }"
   [isTextArea]="false"
   [searchMode]="false"
   (searchButtonClick)="onSearch()"
 />
 ```
-| Input | Tipo | Default |
+| Input | Type | Default |
 |---|---|---|
 | `id` | `string` | `''` |
 | `label` | `string` | `''` |
@@ -114,30 +121,30 @@ Campo de texto con soporte para input, textarea, password, búsqueda, formato de
 | `displayValue` | `string` | `''` |
 | `autocomplete` | `string` | `'new-password'` |
-> También expone `inputElement` y `textareaElement` como `viewChild`.
+> Also exposes `inputElement` and `textareaElement` as `viewChild`.
 ---
 ### Toggle (`shk-toggle`)
-Switch o checkbox. Implementa `ControlValueAccessor`.
+Switch or checkbox. Implements `ControlValueAccessor`.
 ```html
 <shk-toggle
-  [label]="'Activar notificaciones'"
+  [label]="'Enable notifications'"
   [mode]="'toggle'"
   [(checked)]="isChecked"
   (checkedChange)="onChange($event)"
 />
 ```
-| Input | Tipo | Default |
+| Input | Type | Default |
 |---|---|---|
 | `label` | `string` | `''` |
 | `mode` | `'toggle' \| 'checkbox'` | `'toggle'` |
 | `checked` | `boolean` | `undefined` |
-| Output | Tipo |
+| Output | Type |
 |---|---|
 | `checkedChange` | `boolean` |
@@ -145,19 +152,19 @@ Switch o checkbox. Implementa `ControlValueAccessor`.
 ### Select (`shk-select`)
-Dropdown seleccionable con búsqueda, paginación, selección múltiple, opciones personalizadas y validación. Implementa `ControlValueAccessor`.
+Searchable dropdown with pagination, multiple selection, custom options, and validation. Implements `ControlValueAccessor`.
 ```html
 <shk-select
   [options]="options"
-  [label]="'País'"
+  [label]="'Country'"
   [control]="countryControl"
   [multiple]="false"
   [isSearchable]="true"
   [usePagination]="true"
   [itemsPerPage]="10"
   [allowCustomEntries]="false"
-  [placeholder]="'Seleccionar...'"
+  [placeholder]="'Select...'"
   [isLoading]="false"
   (selectionChange)="onSelect($event)"
   (search)="onSearch($event)"
@@ -172,11 +179,11 @@ interface SelectOption {
 }
 ```
-| Input | Tipo | Default |
+| Input | Type | Default |
 |---|---|---|
 | `options` | `SelectOption[]` | `[]` |
 | `label` | `string` | `undefined` |
-| `placeholder` | `string` | `'Seleccionar...'` |
+| `placeholder` | `string` | `'Select...'` |
 | `disabled` | `boolean` | `false` |
 | `control` | `FormControl` | `undefined` |
 | `formGroup` | `FormGroup` | `undefined` |
@@ -192,9 +199,9 @@ interface SelectOption {
 | `showEmptyOption` | `boolean` | `true` |
 | `emptyMessageKey` | `string` | `'common.no_records'` |
 | `validCombinations` | `string[][]` | `undefined` |
-| `errorMessages` | `{ [key: string]: string }` | `{ required: 'Este campo es requerido' }` |
+| `errorMessages` | `{ [key: string]: string }` | `{ required: 'This field is required' }` |
-| Output | Tipo |
+| Output | Type |
 |---|---|
 | `selectionChange` | `any` |
 | `search` | `string` |
@@ -203,11 +210,11 @@ interface SelectOption {
 ### DatePicker (`shk-date-picker`)
-Selector de fecha, mes o año. Implementa `ControlValueAccessor`. Soporta formatos `'date'`, `'month'`, `'year'`.
+Date, month, or year picker. Implements `ControlValueAccessor`. Supports `'date'`, `'month'`, `'year'` views.
 ```html
 <shk-date-picker
-  [label]="'Fecha de inicio'"
+  [label]="'Start date'"
   [control]="dateControl"
   [view]="'date'"
   [locale]="'es'"
@@ -216,7 +223,7 @@ Selector de fecha, mes o año. Implementa `ControlValueAccessor`. Soporta format
 />
 ```
-| Input | Tipo | Default |
+| Input | Type | Default |
 |---|---|---|
 | `id` | `string` | `''` |
 | `label` | `string` | `''` |
@@ -231,31 +238,31 @@ Selector de fecha, mes o año. Implementa `ControlValueAccessor`. Soporta format
 | `maxValue` | `string` | `''` |
 | `locale` | `string` | `'es'` |
-**Valor devuelto** según el `view`:
+**Return value** depends on `view`:
 - `'date'` → `'YYYY-MM-DD'`
 - `'month'` → `'YYYY-MM'`
 - `'year'` → `'YYYY'`
 ---
-### PriceInput (`shk-price-input`
+### PriceInput (`shk-price-input`)
-Input numérico con toggle entre modo monto (`$`) y porcentaje (`%`). Usa `model()` para doble vinculación.
+Numeric input with toggle between amount (`$`) and percentage (`%`). Uses Angular `model()` for two-way binding.
 ```html
 <shk-price-input
   [(value)]="price"
   [(isPercentage)]="isPercent"
-  [label]="'Precio'"
+  [label]="'Price'"
   [min]="0"
   [max]="10000"
   [required]="true"
   [showError]="hasError"
-  [errorMessage]="'Valor inválido'"
+  [errorMessage]="'Invalid value'"
 />
 ```
-| Input | Tipo | Default |
+| Input | Type | Default |
 |---|---|---|
 | `value` | `model<number>` | **required** |
 | `isPercentage` | `model<boolean>` | `false` |
@@ -272,11 +279,11 @@ Input numérico con toggle entre modo monto (`$`) y porcentaje (`%`). Usa `model
 ### FileUpload (`shk-file-upload`)
-Subida de archivos con arrastrar y soltar, vista previa de imágenes, validación de tipo y tamaño.
+File upload with drag & drop, image preview, file type and size validation.
 ```html
 <shk-file-upload
-  [label]="'Subí tu foto'"
+  [label]="'Upload your photo'"
   [accept]="'image/*'"
   [maxFileSize]="5 * 1024 * 1024"
   [maxFiles]="3"
@@ -295,18 +302,18 @@ interface FileUploadError {
 }
 ```
-| Input | Tipo | Default |
+| Input | Type | Default |
 |---|---|---|
-| `label` | `string` | `'Cargar archivo'` |
+| `label` | `string` | `'Upload file'` |
 | `accept` | `string` | `'image/*'` |
 | `maxFileSize` | `number` | `2 * 1024 * 1024` (2MB) |
-| `maxFiles` | `number` | `0` (sin límite) |
+| `maxFiles` | `number` | `0` (unlimited) |
 | `multiple` | `boolean` | `false` |
-| `fileUploadText` | `string` | `'Seleccionar archivo'` |
-| `changeFilesText` | `string` | `'Cambiar archivos'` |
+| `fileUploadText` | `string` | `'Select file'` |
+| `changeFilesText` | `string` | `'Change files'` |
 | `fileRecommendation` | `string` | `''` |
-| Output | Tipo |
+| Output | Type |
 |---|---|
 | `fileSelected` | `File[]` |
 | `fileRemoved` | `void` |
@@ -317,7 +324,7 @@ interface FileUploadError {
 ### Table (`shk-table`)
-Tabla de datos con ordenamiento, filtros por columna, búsqueda global, paginación, acciones por fila y acciones de cabecera. Soporta modo cliente y servidor.
+Data table with sorting, column filters, global search, pagination, row actions, and header actions. Supports client and server-side mode.
 ```html
 <shk-table
@@ -384,7 +391,7 @@ interface FilterChangeEvent {
 }
 ```
-| Input | Tipo | Default |
+| Input | Type | Default |
 |---|---|---|
 | `data` | `any[]` | `[]` |
 | `columns` | `Column[]` | `[]` |
@@ -406,7 +413,7 @@ interface FilterChangeEvent {
 | `activeFilter` | `string` | `''` |
 | `customTemplates` | `{ [key: string]: any }` | `{}` |
-| Output | Tipo |
+| Output | Type |
 |---|---|
 | `pageChange` | `PageChangeEvent` |
 | `filterChange` | `FilterChangeEvent` |
@@ -418,7 +425,7 @@ interface FilterChangeEvent {
 ### Modal (`shk-modal`)
-Modal dinámico que carga componentes a partir de un `ModalService`. Soporta formularios, expansión a pantalla completa y botones de aceptar/cancelar.
+Dynamic modal that loads components via `ModalService`. Supports forms, fullscreen expansion, and accept/cancel buttons.
 ```html
 <shk-modal />
@@ -438,19 +445,19 @@ interface ModalConfig {
 }
 ```
-El componente inyectado **debe** exponer:
-- `form?: FormGroup` (opcional, para validación)
-- `onSubmit()` → llama `submitSuccess` o `submitError`
-- `submitSuccess?: EventEmitter<void>` (opcional)
-- `submitError?: EventEmitter<void>` (opcional)
-- `handleCancel?: () => void` (opcional)
+The injected component **must** expose:
+- `form?: FormGroup` (optional, for validation)
+- `onSubmit()` → calls `submitSuccess` or `submitError`
+- `submitSuccess?: EventEmitter<void>` (optional)
+- `submitError?: EventEmitter<void>` (optional)
+- `handleCancel?: () => void` (optional)
 ```typescript
 constructor(private modalSrv: ModalService) {}
 openModal() {
   this.modalSrv.open({
-    title: 'Editar usuario',
+    title: 'Edit user',
     component: EditUserComponent,
     data: { userId: 123 },
     width: '600px',
@@ -464,20 +471,20 @@ closeModal() {
 }
 ```
-**Métodos del servicio:**
+**Service methods:**
-| Método | Descripción |
+| Method | Description |
 |---|---|
-| `open(config: ModalConfig)` | Abre un nuevo modal |
-| `close()` | Cierra el modal actual |
-| `accept()` | Cierra el modal (alias de close) |
-| `clear()` | Cierra todos los modales |
+| `open(config: ModalConfig)` | Opens a new modal |
+| `close()` | Closes the current modal |
+| `accept()` | Closes the modal (alias for close) |
+| `clear()` | Closes all modals |
 ---
 ### Notification (`shk-notification`)
-Sistema de notificaciones toast con posiciones configurables y barra de progreso opcional.
+Toast notification system with configurable positions and optional progress bar.
 ```html
 <shk-notification position="right-top" />
@@ -498,7 +505,7 @@ constructor(private notifSrv: NotificationService) {}
 showNotif() {
   const id = this.notifSrv.addNotification(
-    'Operación exitosa',
+    'Operation successful',
     'success',
     false,  // showProgress
     3000    // duration (ms)
@@ -510,28 +517,28 @@ updateProgress(id: string, progress: number) {
 }
 ```
-| Input | Tipo | Default |
+| Input | Type | Default |
 |---|---|---|
 | `position` | `'center-top' \| 'right-top' \| 'left-top'` | `'center-top'` |
-**Métodos del servicio:**
+**Service methods:**
-| Método | Descripción |
+| Method | Description |
 |---|---|
-| `addNotification(msg, type?, showProgress?, duration?)` | Agrega una notificación |
-| `updateProgress(id, progress)` | Actualiza la barra de progreso |
-| `removeNotification(notification)` | Elimina una notificación |
-| `removeNotificationById(id)` | Elimina por ID |
-| `clearAll()` | Elimina todas las notificaciones |
+| `addNotification(msg, type?, showProgress?, duration?)` | Adds a notification |
+| `updateProgress(id, progress)` | Updates the progress bar |
+| `removeNotification(notification)` | Removes a notification |
+| `removeNotificationById(id)` | Removes by ID |
+| `clearAll()` | Removes all notifications |
 ---
 ### ConfirmDialog (`shk-confirm-dialog`)
-Diálogo de confirmación programático. Se usa a través del `ConfirmDialogService` que lo crea dinámicamente.
+Programmatic confirmation dialog. Used via `ConfirmDialogService` which dynamically creates it.
 ```html
-<!-- No hace falta agregarlo al template -->
+<!-- No need to add it to the template -->
 ```
 ```typescript
@@ -552,30 +559,30 @@ constructor(private confirmSrv: ConfirmDialogService) {}
 async deleteItem() {
   const confirmed = await this.confirmSrv.confirm({
-    title: 'Eliminar usuario',
-    message: '¿Estás seguro de eliminar este usuario?',
-    confirmLabel: 'Eliminar',
+    title: 'Delete user',
+    message: 'Are you sure you want to delete this user?',
+    confirmLabel: 'Delete',
     type: 'danger',
   });
   if (confirmed) {
-    // proceder con la eliminación
+    // proceed with deletion
   }
 }
 ```
-| Input | Tipo | Default |
+| Input | Type | Default |
 |---|---|---|
-| `title` | `string` | `'Confirmar acción'` |
-| `message` | `string` | `'¿Está seguro de realizar esta acción?'` |
-| `confirmLabel` | `string` | `'Confirmar'` |
-| `cancelLabel` | `string` | `'Cancelar'` |
-| `loadingText` | `string` | `'Procesando…'` |
+| `title` | `string` | `'Confirm action'` |
+| `message` | `string` | `'Are you sure you want to proceed?'` |
+| `confirmLabel` | `string` | `'Confirm'` |
+| `cancelLabel` | `string` | `'Cancel'` |
+| `loadingText` | `string` | `'Processing…'` |
 | `type` | `'danger' \| 'info' \| 'warning'` | `'danger'` |
 | `loading` | `boolean` | `false` |
 | `showCancel` | `boolean` | `true` |
-| Output | Tipo |
+| Output | Type |
 |---|---|
 | `closed` | `void` |
@@ -583,7 +590,7 @@ async deleteItem() {
 ### Chart (`shk-chart`)
-Wrapper de Chart.js que soporta los tipos de gráfico principales.
+Chart.js wrapper supporting the main chart types.
 ```html
 <shk-chart
@@ -596,35 +603,35 @@ Wrapper de Chart.js que soporta los tipos de gráfico principales.
 ```typescript
 import { COLOR_PALETTE, readThemeColors } from 'shirkasoft-ui-components';
-const colors = readThemeColors(); // colores del tema actual
+const colors = readThemeColors(); // current theme colors
 ```
-| Input | Tipo | Default |
+| Input | Type | Default |
 |---|---|---|
 | `type` | `'line' \| 'bar' \| 'pie' \| 'doughnut' \| 'polarArea'` | `'bar'` |
 | `data` | `any` | `{ datasets: [] }` |
 | `options` | `any` | `{}` |
-**Utils exportadas:**
+**Exported utils:**
-| Export | Descripción |
+| Export | Description |
 |---|---|
-| `COLOR_PALETTE` | Array de colores predefinidos (bg + border) |
-| `readThemeColors()` | Lee colores del tema actual (`--shk-surface-*`) |
+| `COLOR_PALETTE` | Predefined color array (bg + border) |
+| `readThemeColors()` | Reads current theme colors (`--shk-surface-*`) |
 ---
 ### Tooltip (`shk-tooltip`)
-Tooltip con dos modos: `hover` (posicionamiento CSS) y `fixed` (posicionamiento calculado con JS).
+Tooltip with two modes: `hover` (CSS positioning) and `fixed` (JS-calculated positioning).
 ```html
-<shk-tooltip [text]="'Info adicional'" [position]="'bottom'" [mode]="'hover'">
-  <button>Pasar el mouse</button>
+<shk-tooltip [text]="'Additional info'" [position]="'bottom'" [mode]="'hover'">
+  <button>Hover me</button>
 </shk-tooltip>
 ```
-| Input | Tipo | Default |
+| Input | Type | Default |
 |---|---|---|
 | `text` | `string` | `''` |
 | `position` | `'top' \| 'bottom' \| 'right'` | `'bottom'` |
@@ -633,23 +640,23 @@ Tooltip con dos modos: `hover` (posicionamiento CSS) y `fixed` (posicionamiento
 ---
-## Desarrollo
+## Development
 ```bash
-# Construir la librería
+# Build the library
 pnpm build
-# Servir la showcase (app de demostración)
+# Serve the showcase (demo app)
 pnpm serve
-# Construir la showcase
+# Build the showcase
 pnpm build:showcase
-# Escuchar cambios en la librería
+# Watch for library changes
 pnpm watch
 ```
-### Versionado
+### Versioning
 ```bash
 pnpm version:patch   # 1.0.22 → 1.0.23
@@ -659,11 +666,11 @@ pnpm version:major   # 1.0.22 → 2.0.0
 ---
-## Publicación
+## Publishing
-CI/CD vía GitHub Actions:
-- Al pushear un tag `v*` se publica a npm automáticamente.
-- Al pushear a `main`/`master` se despliega la showcase a GitHub Pages.
+CI/CD via GitHub Actions:
+- Pushing a `v*` tag automatically publishes to npm.
+- Pushing to `main`/`master` deploys the showcase to GitHub Pages.
 Manual:
@@ -673,6 +680,6 @@ bash scripts/publish-lib.sh
 ---
-## Licencia
+## License
 MIT © Shirkasoft

package/fesm2022/shirkasoft-ui-components.mjs CHANGED Viewed

@@ -2820,9 +2820,11 @@ class ChartComponent {
         this.chartInstance?.destroy();
     }
     initChart() {
-        const ctx = this.canvasRef().nativeElement.getContext('2d');
+        const canvas = this.canvasRef().nativeElement;
+        const ctx = canvas.getContext('2d');
         if (!ctx)
             return;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
         this.chartInstance = new Chart(ctx, {
             type: this.type(),
             data: this.data(),