quang 20.1.8 → 20.2.1

package/components/input/README.md

@@ -4,35 +4,103 @@ The `QuangInputComponent` must be configured using the `componentType` input pro
 
 ## Supported Types
 
-- text
-- textarea
-- password
-- email
-- number
-- url
-- search
-- tel
-- color
+The component supports the following input types, each with specific behaviors and configurations:
+
+### Text Input Types
+
+- **text** — Standard text input for general text entry
+- **email** — Email input with built-in email validation
+- **password** — Password input with optional show/hide toggle functionality
+- **url** — URL input with URL format validation
+- **search** — Search input with native search behavior
+- **tel** — Telephone number input
+
+### Numeric Input Types
+
+- **number** — Numeric input with step controls and min/max validation
+
+### Special Input Types
+
+- **textarea** — Multi-line text input with resizable functionality
+- **color** — Color picker input
+
+### Type-Specific Features
+
+#### Textarea (`componentType="textarea"`)
+
+- **Multi-line support**: Automatically expands for content
+- **Resizable control**: Use `resizable` input to enable/disable manual resizing
+- **No min/max number constraints**: Number-related inputs are ignored
+
+#### Password (`componentType="password"`)
+
+- **Toggle visibility**: Built-in show/hide password functionality
+- **Icon support**: Custom icons through content projection
+- **Security**: Masks input by default, reveals on toggle
+
+#### Number (`componentType="number"`)
+
+- **Step controls**: Use `componentStep` to define increment/decrement values
+- **Range validation**: Set `minNumber` and `maxNumber` for value constraints
+- **Decimal support**: Supports decimal values when step allows
+
+#### Email (`componentType="email"`)
+
+- **Format validation**: Automatic email format validation
+- **Autocomplete**: Enhanced with email-specific autocomplete
+
+#### Search (`componentType="search"`)
+
+- **Clear button**: Native clear functionality on supported browsers
+- **Search behavior**: Platform-specific search enhancements
 
 ## Inputs
 
+### Core Configuration
+
 - `componentType`: `'text' | 'textarea' | 'password' | 'email' | 'number' | 'url' | 'search' | 'tel' | 'color'` — Specifies the type of input. **(Required)**
-- `maxLengthText`: `number | null` — Maximum length for text input.
-- `minLengthText`: `number | null` — Minimum length for text input.
-- `minNumber`: `number | undefined` — Minimum value for number input.
-- `maxNumber`: `number | undefined` — Maximum value for number input.
-- `componentStep`: `number` — Step for number input. Default: `1`.
-- `resizable`: `boolean` — If false, disables textarea resizing. Default: `true` (only for textarea).
-- All standard form/label/validation-related inputs inherited from `QuangBaseComponent`:
-  - `isReadonly`, `componentLabel`, `componentPlaceholder`, `componentTabIndex`, `componentClass`, `errorMap`, `successMessage`, `helpMessage`, `formControl`
+
+### Text-Specific Inputs
+
+- `maxLengthText`: `number | null` — Maximum length for text input. Applies to: `text`, `textarea`, `email`, `password`, `url`, `search`, `tel`
+- `minLengthText`: `number | null` — Minimum length for text input. Applies to: `text`, `textarea`, `email`, `password`, `url`, `search`, `tel`
+
+### Number-Specific Inputs
+
+- `minNumber`: `number | undefined` — Minimum value for number input. **Only applies to**: `number`
+- `maxNumber`: `number | undefined` — Maximum value for number input. **Only applies to**: `number`
+- `componentStep`: `number` — Step increment for number input. Default: `1`. **Only applies to**: `number`
+
+### Textarea-Specific Inputs
+
+- `resizable`: `boolean` — Controls textarea resizing behavior. Default: `true`
+
+### Password-Specific Inputs
+
+- `showHidePasswordButton`: `boolean` — Shows/hides the password toggle button. Default: `true`. **Only applies to**: `password`
+- `buttonClass`: `string` — Additional CSS classes for the password toggle button. **Only applies to**: `password`
+
+### Universal Inputs
+
+- `isReadonly`: `boolean` — Makes the input read-only
+- `componentLabel`: `string` — Label text (supports i18n keys)
+- `componentPlaceholder`: `string` — Placeholder text (supports i18n keys)
+- `componentTabIndex`: `number` — Tab index for accessibility
+- `componentClass`: `string` — Additional CSS classes for the input element
+- `errorMap`: `Record<string, any>` — Validation error messages
+- `successMessage`: `string` — Success message text
+- `helpMessage`: `string` — Help text displayed below the input
+- `formControl`: `FormControl` — Angular reactive form control
 
 ## Outputs
 
-- All standard outputs inherited from `QuangBaseComponent`:
-  - `componentBlur`
+- `showPassword`: `EventEmitter<boolean>` — Emitted when the password visibility is toggled (password inputs only)
+- `componentBlur`: `EventEmitter<void>` — Emitted when input loses focus
 
 ## Usage
 
+### Basic Text Input
+
 ```html
 <quang-input
   [errorMap]="errors()"
@@ -40,19 +108,75 @@ The `QuangInputComponent` must be configured using the `componentType` input pro
   componentType="text"
   formControlName="testInput"
 />
+```
+
+### Password Input with Toggle
+
+```html
+<quang-input
+  [errorMap]="errors()"
+  [showHidePasswordButton]="true"
+  (showPassword)="onToggleShowPassword($event)"
+  componentLabel="form.label.password"
+  componentType="password"
+  formControlName="password"
+>
+  @if (showPassword()) {
+  <svg-icon src="assets/icons/svg/visibility_off.svg" />
+  } @else {
+  <svg-icon src="assets/icons/svg/visibility.svg" />
+  }
+</quang-input>
+```
+
+#### TypeScript Example
+
+```typescript
+export class MyComponent {
+  showPassword = signal<boolean>(false)
+
+  onToggleShowPassword(isVisible: boolean): void {
+    this.showPassword.set(isVisible)
+  }
+
+  errors(): Record<string, any> {
+    return this.form.get('password')?.errors ?? {}
+  }
+}
+```
+
+### Number Input with Constraints
 
+```html
 <quang-input
+  [componentStep]="5"
   [errorMap]="errors()"
-  [isReadonly]="isReadonly()"
-  [maxNumber]="10"
+  [maxNumber]="100"
   [minNumber]="0"
-  componentLabel="form.label.input"
+  componentLabel="form.label.quantity"
   componentType="number"
-  formControlName="testInput"
-  successMessage="form.label.success"
+  formControlName="quantity"
 />
 ```
 
-## Notes
+### Textarea
+
+```html
+<quang-input
+  [errorMap]="errors()"
+  [maxLengthText]="500"
+  componentLabel="form.label.description"
+  componentType="textarea"
+  formControlName="description"
+/>
+```
+
+### Type-Specific Features
+
+The component supports various input types with specific behaviors:
 
-This component extends the `QuangBaseComponent` and inherits its features, such as label and validation messages.
+- **text, email, url, search, tel**: Support text length constraints
+- **password**: Built-in show/hide toggle functionality with icon support
+- **number**: Step controls and min/max validation
+- **textarea**: Multi-line support with resizable control
+- **color**: Color picker input

package/components/input/index.d.ts

@@ -10,9 +10,15 @@ declare class QuangInputComponent extends QuangBaseComponent<string | number> {
     maxNumber: _angular_core.InputSignal<number | undefined>;
     componentStep: _angular_core.InputSignal<number>;
     resizable: _angular_core.InputSignal<boolean>;
+    buttonClass: _angular_core.InputSignal<string>;
+    showHidePasswordButton: _angular_core.InputSignal<boolean>;
+    showPassword: _angular_core.OutputEmitterRef<boolean>;
+    private onShowPassword;
+    componentInputType: _angular_core.Signal<InputType>;
     constructor();
+    onTogglePasswordVisibility(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuangInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<QuangInputComponent, "quang-input", never, { "componentType": { "alias": "componentType"; "required": true; "isSignal": true; }; "maxLengthText": { "alias": "maxLengthText"; "required": false; "isSignal": true; }; "minLengthText": { "alias": "minLengthText"; "required": false; "isSignal": true; }; "minNumber": { "alias": "minNumber"; "required": false; "isSignal": true; }; "maxNumber": { "alias": "maxNumber"; "required": false; "isSignal": true; }; "componentStep": { "alias": "componentStep"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<QuangInputComponent, "quang-input", never, { "componentType": { "alias": "componentType"; "required": true; "isSignal": true; }; "maxLengthText": { "alias": "maxLengthText"; "required": false; "isSignal": true; }; "minLengthText": { "alias": "minLengthText"; "required": false; "isSignal": true; }; "minNumber": { "alias": "minNumber"; "required": false; "isSignal": true; }; "maxNumber": { "alias": "maxNumber"; "required": false; "isSignal": true; }; "componentStep": { "alias": "componentStep"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "buttonClass": { "alias": "buttonClass"; "required": false; "isSignal": true; }; "showHidePasswordButton": { "alias": "showHidePasswordButton"; "required": false; "isSignal": true; }; }, { "showPassword": "showPassword"; }, never, ["*"], true, never>;
 }
 
 export { QuangInputComponent };

package/components/paginator/README.md

@@ -1,43 +1,67 @@
 # QuangPaginatorComponent
 
-The `QuangPaginatorComponent` provides controls for navigating through pages of data, supporting configurations for total items, items per page, and current page.
-
-## Features
-
-- Pagination controls
-- Configurable total items, items per page, and current page
-- Emits events for page changes
+The `QuangPaginatorComponent` is a pagination control that provides navigation through large datasets with configurable page sizes and internationalization support.
 
 ## Inputs
 
-- `page`: `number` — Current page number. **(Required)**
-- `pageSize`: `number` — Number of items per page. **(Required)**
-- `sizeList`: `number[]` — List of selectable page sizes. Default: `[]`.
-- `totalItems`: `number` — Total number of items to paginate. **(Required)**
-- `showTotalElementsCount`: `boolean` — Show/hide total items count. Default: `true`.
-- `totalItemsText`: `string` — Translation key for total items label. Default: `'quangPaginator.totalItems'`.
-- `sizeText`: `string` — Translation key for size label. Default: `'quangPaginator.size'`.
-- `pageRangeText`: `string` — Translation key for page range label. Default: `'quangPaginator.pageRange'`. If the translation is overwritten, it should contain `{{page}}` and `{{amountPages}}` placeholders to display the correct numeric values.
-- `componentId`, `componentTabIndex`, `componentClass`: Standard component inputs.
+- `page`: `number` — Current active page number (1-based indexing). **(Required)**
+- `pageSize`: `number` — Number of items displayed per page. **(Required)**
+- `totalItems`: `number` — Total number of items in the dataset. **(Required)**
+- `sizeList`: `number[]` — Array of available page size options for user selection. Default: `[]`
+- `showTotalElementsCount`: `boolean` — Controls visibility of total items count display. Default: `true`
+- `totalItemsText`: `string` — Translation key for total items label text. Default: `'quangPaginator.totalItems'`
+- `sizeText`: `string` — Translation key for page size selector label. Default: `'quangPaginator.size'`
+- `pageRangeText`: `string` — Translation key for page range display. Must include `{{page}}` and `{{amountPages}}` placeholders. Default: `'quangPaginator.pageRange'`
+- `componentId`: `string` — Unique identifier for the paginator instance
+- `componentTabIndex`: `number` — Base tab index for paginator controls. Default: `0`
+- `componentClass`: `string | string[]` — Additional CSS classes for styling customization
 
 ## Outputs
 
-- `changePage`: Emits the new page number when the user navigates to a different page.
-- `changeSize`: Emits the new page size when the user changes it.
+- `changePage`: `EventEmitter<number>` — Emitted when user navigates to a different page
+- `changeSize`: `EventEmitter<number>` — Emitted when user changes the page size
 
 ## Usage
 
+### Basic Paginator
+
 ```html
 <quang-paginator
-  [page]="1"
-  [pageSize]="10"
-  [sizeList]="[5, 10, 20]"
-  [totalItems]="30"
-  (changePage)="onChangePage($event)"
-  (changeSize)="onChangePageSize($event)"
-/>
+  [page]="currentPage"
+  [pageSize]="itemsPerPage"
+  [totalItems]="totalItemCount"
+  (changePage)="onPageChange($event)"
+  (changeSize)="onPageSizeChange($event)"
+>
+</quang-paginator>
 ```
 
-## Notes
+#### TypeScript Example
+
+```typescript
+export class MyComponent {
+  currentPage = 1
+  itemsPerPage = 20
+  totalItemCount = 150
+
+  onPageChange(page: number): void {
+    this.currentPage = page
+    // Load data for new page
+  }
+
+  onPageSizeChange(pageSize: number): void {
+    this.itemsPerPage = pageSize
+    this.currentPage = 1 // Reset to first page
+    // Load data with new page size
+  }
+}
+```
+
+### Translation Integration
+
+The component uses QuangTranslationService for all text content:
 
-This component provides a user-friendly interface for pagination in lists and tables.
+- **Default Keys**: Uses `quangPaginator.*` translation keys
+- **Custom Override**: All text keys can be overridden via inputs
+- **Placeholder Support**: Page range text supports `{{page}}` and `{{amountPages}}` placeholders
+- **Dynamic Translation**: Responds to language changes automatically

package/components/select/README.md

@@ -2,53 +2,43 @@
 
 The `QuangSelectComponent` supports single or multiple selections from a dropdown list.
 
-## Features
+## Input
 
-- Single selection
-- Multiple selection
-- Customizable options
+- `selectOptions`: `SelectOption[]` - Array of options to display in the dropdown (required)
+- `selectionMode`: `'single' | 'multiple'` - Selection mode (default: 'single')
 
-## Inputs
+All standard inputs inherited from `QuangBaseComponent`: `isReadonly`, `componentLabel`, `componentPlaceholder`, `componentTabIndex`, `componentClass`, `errorMap`, `successMessage`, `helpMessage`, `formControl`
 
-- `selectOptions`: `SelectOption[]` — Array of options to display in the dropdown. **(Required)**
-- `selectionMode`: `'single' | 'multiple'` — Enables single or multiple selection mode. Default: `'single'`.
-- All standard form/label/validation-related inputs inherited from `QuangBaseComponent`:
-  - `isReadonly`, `componentLabel`, `componentPlaceholder`, `componentTabIndex`, `componentClass`, `errorMap`, `successMessage`, `helpMessage`, `formControl`
+## Output
 
-## Outputs
-
-- All standard outputs inherited from `QuangBaseComponent`:
-  - `componentBlur`
+All standard outputs inherited from `QuangBaseComponent`: `componentBlur`
 
 ## Usage
 
+### Single Selection
 ```html
 <quang-select
   [errorMap]="errors()"
-  [isReadonly]="isReadonly()"
   [selectOptions]="stringList"
-  class="col-4"
   componentLabel="form.label.select"
-  componentPlaceholder="Placeholder select singola scelta"
+  componentPlaceholder="Select an option"
   formControlName="testInput"
-  playgroundSourceCode
-  selectionMode="single"
-  successMessage="form.label.success"
-/>
+  selectionMode="single">
+</quang-select>
+```
 
+### Multiple Selection
+```html
 <quang-select
   [errorMap]="errors()"
-  [isReadonly]="isReadonly()"
   [selectOptions]="numberList"
-  class="col-4"
   componentLabel="form.label.multipleSelect"
-  componentPlaceholder="Placeholder select scelta multipla"
+  componentPlaceholder="Select multiple options"
   formControlName="testInputMultiple"
-  selectionMode="multiple"
-  successMessage="form.label.success"
-/>
+  selectionMode="multiple">
+</quang-select>
 ```
 
-## Notes
+## QuangTranslationService Integration
 
-This component extends the `QuangBaseComponent` and inherits its features, such as label and validation messages.
+The component supports automatic translation of all labels, help messages, and error messages through `QuangTranslationService`.

package/components/table/README.md

@@ -1,24 +1,90 @@
 # QuangTableComponent
 
-The `QuangTableComponent` allows for displaying data in a tabular format.
+The `QuangTableComponent` allows for displaying data in a tabular format with advanced features for customization, sorting, and row selection.
 
 ## Features
 
 - Tabular data display
 - Customizable headers and rows
-- Supports sorting and filtering
+- Supports sorting by columns
+- Custom cell rendering with templates
+- Row selection and highlighting
+- Sticky header option
+
+## Interfaces
+
+### TableConfiguration<T>
+```typescript
+interface TableConfiguration<T> {
+  headers: TableHeader[];
+  rows: TableRow<T>[];
+}
+```
+
+### TableHeader
+```typescript
+interface TableHeader {
+  text?: string;          // Display text for the header
+  sort?: SortCol;         // Sort configuration for the column
+  css?: string[];         // CSS classes to apply to the header
+  renderer?: TemplateRef<any>; // Custom template for header rendering
+  payload?: any;          // Additional data that can be used in custom renderers
+}
+```
+
+### TableRow<T>
+```typescript
+interface TableRow<T> {
+  payload?: T;            // The data object for this row
+  rowId?: string | number; // Unique identifier for the row
+  css?: string[];         // CSS classes to apply to the row
+  cellData: TableCell[];   // Array of cells in this row
+}
+```
+
+### TableCell
+```typescript
+interface TableCell {
+  renderer?: TemplateRef<any>; // Custom template for cell rendering
+  payload?: any;          // Additional data that can be used in custom renderers
+  text?: string;          // Display text for the cell
+  css?: string[];         // CSS classes to apply to the cell
+  fullWidth?: boolean;    // Whether the cell should span the full width
+}
+```
+
+### SortCol
+```typescript
+interface SortCol {
+  key: string;            // Identifier for the column
+  sort: SortTable;        // Sort direction (DEFAULT, ASC, DESC)
+}
+```
 
 ## Inputs
 
-- `tableConfigurations`: `{ headers: TableHeader[]; rows: any[] }` — Table configuration object containing headers and rows. **(Required)**
-- `stickyTable`: `boolean` — Enables sticky header/columns. Default: `false`.
-- All standard form/label/validation-related inputs inherited from `QuangBaseComponent` (if applicable):
-  - `isReadonly`, `componentLabel`, `componentPlaceholder`, `componentTabIndex`, `componentClass`, `errorMap`, `successMessage`, `helpMessage`, `formControl`
+- `tableConfigurations`: `TableConfiguration<T>` — Table configuration object containing headers and rows. **(Required)**
+  - This object defines the structure and data of your table.
+  
+- `clickableRow`: `boolean` — Whether rows should be clickable. Default: `false`.
+  - When true, clicking a row will emit the row data through the `selectedRow` output.
+
+- `selectedRows`: `string[] | number[]` — Array of rowIds that should be marked as selected.
+  - Use this to highlight specific rows in the table.
+
+- `stickyTable`: `boolean` — Enables sticky header. Default: `true`.
+  - When true, the header will remain visible when scrolling.
+
+- `noResultsText`: `string` — Text to display when no data is available. Default: 'quangTable.noResults'.
+  - This supports translation keys if using transloco.
 
 ## Outputs
 
-- `sortChanged`: Emits the sort state when the user changes sorting.
-- `rowClick`: Emits the clicked row data when a row is clicked.
+- `sortChanged`: `EventEmitter<SortCol[]>` — Emits when the user changes the sorting of a column.
+  - Returns an array of SortCol objects with the updated sorting state.
+
+- `selectedRow`: `EventEmitter<TableRow<T>>` — Emits when a row is clicked (if clickableRow is true).
+  - Returns the full row data including payload.
 
 ## Usage
 
@@ -26,38 +92,148 @@ The `QuangTableComponent` allows for displaying data in a tabular format.
 
 ```html
 <quang-table
-  [stickyTable]="true"
   [tableConfigurations]="tableConfig()"
+  [clickableRow]="true"
+  [stickyTable]="true"
+  [selectedRows]="selectedRowIds()"
+  (selectedRow)="onRowClick($event)"
   (sortChanged)="onChangeSort($event)"
-  (rowClick)="onRowClick($event)"
 />
 ```
 
 ### TypeScript
 
 ```typescript
-import { computed, signal } from '@angular/core'
+import { Component, signal, computed } from '@angular/core';
+import { 
+  TableConfiguration, 
+  TableHeader, 
+  TableRow, 
+  TableCell,
+  SortTable, 
+  SortCol 
+} from 'quang/components/table';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './example.component.html',
+})
+export class ExampleComponent {
+  // Sample data
+  userData = signal([
+    { id: 1, name: 'John Doe', email: 'john@example.com', age: 30 },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 25 },
+    { id: 3, name: 'Alice Johnson', email: 'alice@example.com', age: 35 },
+  ]);
+  
+  selectedRowIds = signal<number[]>([1]); // Row with ID 1 will be highlighted
+  
+  // Define headers
+  tableHeaders = [
+    {
+      text: 'ID',
+      sort: { key: 'id', sort: SortTable.DEFAULT }
+    },
+    {
+      text: 'Name',
+      sort: { key: 'name', sort: SortTable.DEFAULT }
+    },
+    {
+      text: 'Email',
+      sort: { key: 'email', sort: SortTable.DEFAULT }
+    },
+    {
+      text: 'Age',
+      sort: { key: 'age', sort: SortTable.DEFAULT }
+    }
+  ];
+  
+  // Compute rows from data
+  tableRows = computed(() => 
+    this.userData().map(user => ({
+      rowId: user.id,
+      payload: user,
+      cellData: [
+        { text: user.id.toString() },
+        { text: user.name },
+        { text: user.email },
+        { text: user.age.toString() }
+      ]
+    }))
+  );
+  
+  // Combine headers and rows into table configuration
+  tableConfig = computed<TableConfiguration<any>>(() => ({
+    headers: this.tableHeaders,
+    rows: this.tableRows()
+  }));
+  
+  onRowClick(row: TableRow<any>): void {
+    console.log('Row clicked:', row.payload);
+  }
+  
+  onChangeSort(sortCols: SortCol[]): void {
+    const sortCol = sortCols[0];
+    const sortDirection = sortCol.sort;
+    
+    // Sort data based on column and direction
+    this.userData.update(users => {
+      return [...users].sort((a, b) => {
+        if (sortDirection === SortTable.DEFAULT) {
+          return 0;
+        }
+        
+        const modifier = sortDirection === SortTable.ASC ? 1 : -1;
+        const aValue = a[sortCol.key];
+        const bValue = b[sortCol.key];
+        
+        if (aValue < bValue) return -1 * modifier;
+        if (aValue > bValue) return 1 * modifier;
+        return 0;
+      });
+    });
+  }
+}
+```
+
+## Advanced Usage with Custom Templates
 
-// Angular signals for table data and headers
+You can use templates to customize cell rendering:
 
-tableRows = signal([
-  { id: 1, name: 'John Doe', age: 30 },
-  { id: 2, name: 'Jane Smith', age: 25 },
-  { id: 3, name: 'Alice Johnson', age: 35 },
-])
+```html
+<ng-template #nameTemplate let-data>
+  <strong>{{ data.name }}</strong>
+</ng-template>
 
-tableHeaders = [
-  { key: 'id', label: 'ID', sortable: true },
-  { key: 'name', label: 'Name', sortable: true },
-  { key: 'age', label: 'Age', sortable: false },
-]
+<quang-table [tableConfigurations]="customTableConfig()">
+</quang-table>
+```
 
-tableConfig = computed(() => ({
-  headers: tableHeaders,
-  rows: tableRows(),
+```typescript
+nameTemplate = TemplateRef<ane>('nameTemplate')
+
+customTableConfig = computed(() => ({
+  headers: [
+    { text: 'ID' },
+    { text: 'Name', renderer: this.nameTemplate },
+    { text: 'Email' },
+    { text: 'Age' }
+  ],
+  rows: this.userData().map(user => ({
+    rowId: user.id,
+    payload: user,
+    cellData: [
+      { text: user.id.toString() },
+      { payload: user }, // This will be accessible in the template
+      { text: user.email },
+      { text: user.age.toString() }
+    ]
+  }))
 }))
 ```
 
 ## Notes
 
-This component is highly customizable and can be styled to match your application's design.
+- The table automatically adjusts column widths to match content.
+- Use CSS classes to customize the appearance of specific rows, headers, or cells.
+- For responsive tables, consider setting appropriate container widths.