quang 20.1.9 → 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/wysiwyg/README.md

@@ -2,29 +2,21 @@
 
 The `QuangWysiwygComponent` is a rich text editor based on [SunEditor](https://github.com/JiHong88/SunEditor), offering a wide range of formatting options for creating and editing HTML content.
 
-## Features
+## Input
 
-- Rich text editing
-- Wide range of formatting options
-- Supports custom toolbars and plugins
+- `wysiwygOptions`: `object` - Configuration options for the editor (required)
+- `minHeight`: `string | undefined` - Minimum height for the editor area (default: '200px')
+- `highlightColor`: `boolean` - Show/hide the highlight color button in toolbar (default: true)
+- `isReadonly`: `boolean` - If true, the editor is readonly
+- `onImageUploadError`: `(errorMessage: any, result: any, core: any) => boolean` - Callback for image upload errors
+- `onFileDrop`: `(e: any, cleanData: any, maxCharCount: any, core: any) => boolean` - Callback for file drop events
+- Toolbar button toggles (all `boolean`, default: `true`): `font`, `fontSize`, `formatBlock`, `paragraphStyle`, `blockquote`, `bold`, `underline`, `italic`, `strike`, `fontColor`, `textStyle`, `removeFormat`, `align`, `list`, `table`, `link`, `image`, `fullScreen`, `showBlocks`
 
-## Inputs
+All standard inputs inherited from `QuangBaseComponent`: `componentLabel`, `componentPlaceholder`, `componentTabIndex`, `componentClass`, `errorMap`, `successMessage`, `helpMessage`, `formControl`
 
-- `wysiwygOptions`: `object` — Configuration options for the editor. **(Required)**
-- `minHeight`: `string | undefined` — Minimum height for the editor area. Default: `'200px'`.
-- `highlightColor`: `boolean` — Show/hide the highlight color button in the toolbar. Default: `true`.
-- `isReadonly`: `boolean` — If true, the editor is readonly.
-- `onImageUploadError`: `(errorMessage: any, result: any, core: any) => boolean` — Callback for image upload errors.
-- `onFileDrop`: `(e: any, cleanData: any, maxCharCount: any, core: any) => boolean` — Callback for file drop events.
-- Toolbar button toggles (all `boolean`, default: `true`):
-  - `font`, `fontSize`, `formatBlock`, `paragraphStyle`, `blockquote`, `bold`, `underline`, `italic`, `strike`, `fontColor`, `textStyle`, `removeFormat`, `align`, `list`, `table`, `link`, `image`, `fullScreen`, `showBlocks`
-- All standard form/label/validation-related inputs inherited from `QuangBaseComponent`:
-  - `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
 
@@ -45,11 +37,7 @@ The `QuangWysiwygComponent` is a rich text editor based on [SunEditor](https://g
 ### Note
 
 Remember to import:
-
 `node_modules/quang/components/wysiwyg/global-wysiswyg.component.scss`
-
 or
-
 `quang/components/wysiwyg/global-wysiswyg.component.scss`
-
 in your global style (suggested "vendors" folder).

package/fesm2022/quang-components-input.mjs

@@ -1,6 +1,6 @@
 import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, output, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { TranslocoPipe } from '@jsverse/transloco';
@@ -20,20 +20,29 @@ class QuangInputComponent extends QuangBaseComponent {
         this.maxNumber = input(undefined);
         this.componentStep = input(1);
         this.resizable = input(true);
+        this.buttonClass = input('');
+        this.showHidePasswordButton = input(true);
+        this.showPassword = output();
+        this.onShowPassword = signal(false);
+        this.componentInputType = computed(() => this.componentType() === 'password' && this.onShowPassword() ? 'text' : this.componentType());
         toObservable(this.componentType)
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
             this.setupFormControl();
         });
     }
+    onTogglePasswordVisibility() {
+        this.onShowPassword.update((current) => !current);
+        this.showPassword.emit(this.onShowPassword());
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: QuangInputComponent, isStandalone: true, selector: "quang-input", inputs: { componentType: { classPropertyName: "componentType", publicName: "componentType", isSignal: true, isRequired: true, transformFunction: null }, maxLengthText: { classPropertyName: "maxLengthText", publicName: "maxLengthText", isSignal: true, isRequired: false, transformFunction: null }, minLengthText: { classPropertyName: "minLengthText", publicName: "minLengthText", isSignal: true, isRequired: false, transformFunction: null }, minNumber: { classPropertyName: "minNumber", publicName: "minNumber", isSignal: true, isRequired: false, transformFunction: null }, maxNumber: { classPropertyName: "maxNumber", publicName: "maxNumber", isSignal: true, isRequired: false, transformFunction: null }, componentStep: { classPropertyName: "componentStep", publicName: "componentStep", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: QuangInputComponent, isStandalone: true, selector: "quang-input", inputs: { componentType: { classPropertyName: "componentType", publicName: "componentType", isSignal: true, isRequired: true, transformFunction: null }, maxLengthText: { classPropertyName: "maxLengthText", publicName: "maxLengthText", isSignal: true, isRequired: false, transformFunction: null }, minLengthText: { classPropertyName: "minLengthText", publicName: "minLengthText", isSignal: true, isRequired: false, transformFunction: null }, minNumber: { classPropertyName: "minNumber", publicName: "minNumber", isSignal: true, isRequired: false, transformFunction: null }, maxNumber: { classPropertyName: "maxNumber", publicName: "maxNumber", isSignal: true, isRequired: false, transformFunction: null }, componentStep: { classPropertyName: "componentStep", publicName: "componentStep", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, buttonClass: { classPropertyName: "buttonClass", publicName: "buttonClass", isSignal: true, isRequired: false, transformFunction: null }, showHidePasswordButton: { classPropertyName: "showHidePasswordButton", publicName: "showHidePasswordButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { showPassword: "showPassword" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => QuangInputComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if (componentType()) {\n  <div class=\"mb-3\">\n    @if (componentLabel()) {\n      <label\n        [htmlFor]=\"componentId()\"\n        class=\"form-label\"\n      >\n        {{ componentLabel() | transloco }}\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </label>\n    }\n    @if (componentType() !== 'textarea') {\n      <input\n        [attr.maxLength]=\"maxLengthText()\"\n        [attr.minLength]=\"minLengthText()\"\n        [attr.required]=\"getIsRequiredControl()\"\n        [class.is-invalid]=\"_showErrors()\"\n        [class.is-valid]=\"_showSuccess()\"\n        [disabled]=\"_isDisabled()\"\n        [id]=\"componentId()\"\n        [max]=\"maxNumber()\"\n        [min]=\"minNumber()\"\n        [ngClass]=\"componentClass()\"\n        [placeholder]=\"componentPlaceholder() | transloco\"\n        [readOnly]=\"isReadonly()\"\n        [step]=\"componentStep()\"\n        [tabIndex]=\"componentTabIndex()\"\n        [type]=\"componentType()\"\n        [value]=\"_value()\"\n        (blur)=\"onBlurHandler()\"\n        (input)=\"onChangedEventHandler($event)\"\n        autocomplete=\"off\"\n        class=\"form-control\"\n      />\n    }\n    @if (componentType() === 'textarea') {\n      <textarea\n        [attr.maxLength]=\"maxLengthText()\"\n        [attr.minLength]=\"minLengthText()\"\n        [class.is-invalid]=\"_showErrors()\"\n        [class.is-valid]=\"_showSuccess()\"\n        [class.no-resize]=\"!resizable()\"\n        [disabled]=\"_isDisabled()\"\n        [id]=\"componentId()\"\n        [ngClass]=\"componentClass()\"\n        [placeholder]=\"componentPlaceholder() | transloco\"\n        [readOnly]=\"isReadonly()\"\n        [tabIndex]=\"componentTabIndex()\"\n        [value]=\"_value()\"\n        (blur)=\"onBlurHandler()\"\n        (input)=\"onChangedEventHandler($event)\"\n        class=\"form-control\"\n      ></textarea>\n    }\n    <div class=\"valid-feedback\">\n      {{ successMessage() | transloco }}\n    </div>\n    <div class=\"invalid-feedback\">\n      {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n    </div>\n    @if (helpMessage()) {\n      <small\n        [hidden]=\"_showSuccess() || _showErrors()\"\n        aria-live=\"assertive\"\n        class=\"form-text text-muted\"\n      >\n        {{ helpMessage() | transloco }}\n      </small>\n    }\n  </div>\n}\n", styles: ["input::-webkit-search-cancel-button{-webkit-appearance:none;height:.75rem;width:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3 1024 1024' width='12' height='12' fill='currentColor'%3E%3Cpath d='M9 1018q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5l459-459 459 459q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5 9-9 9-22 0-13-9-22l-459-459 459-459q9-9 9-22 0-13-9-22-9-9-22-9-13 0-22 9l-459 459-459-459q-9-9-22-9-13 0-22 9-9 9-9 22 0 13 9 22l459 459-459 459q-9 9-9 22 0 13 9 22l0 0z'/%3E%3C/svg%3E%0A\");cursor:pointer}:host{display:block}.no-resize{resize:none}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (componentType()) {\n  <div class=\"mb-3\">\n    @if (componentLabel()) {\n      <label\n        [htmlFor]=\"componentId()\"\n        class=\"form-label\"\n      >\n        {{ componentLabel() | transloco }}\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </label>\n    }\n    @if (componentType() !== 'textarea') {\n      <div class=\"input-container\">\n        <input\n          [attr.maxLength]=\"maxLengthText()\"\n          [attr.minLength]=\"minLengthText()\"\n          [attr.required]=\"getIsRequiredControl()\"\n          [class.is-invalid]=\"_showErrors()\"\n          [class.is-valid]=\"_showSuccess()\"\n          [class.with-button-password]=\"showHidePasswordButton()\"\n          [disabled]=\"_isDisabled()\"\n          [id]=\"componentId()\"\n          [max]=\"maxNumber()\"\n          [min]=\"minNumber()\"\n          [ngClass]=\"componentClass()\"\n          [placeholder]=\"componentPlaceholder() | transloco\"\n          [readOnly]=\"isReadonly()\"\n          [step]=\"componentStep()\"\n          [tabIndex]=\"componentTabIndex()\"\n          [type]=\"componentInputType()\"\n          [value]=\"_value()\"\n          (blur)=\"onBlurHandler()\"\n          (input)=\"onChangedEventHandler($event)\"\n          autocomplete=\"off\"\n          class=\"form-control\"\n        />\n        @if (componentType() === 'password' && showHidePasswordButton()) {\n          <button\n            [class.border-danger]=\"_showErrors()\"\n            [class.border-success]=\"_showSuccess()\"\n            [ngClass]=\"buttonClass()\"\n            (click)=\"_ngControl()?.disabled ? null : onTogglePasswordVisibility()\"\n            #calendarButton\n            aria-label=\"calendar-button\"\n            class=\"btn btn-outline-secondary btn-outline-password\"\n            type=\"button\"\n          >\n            <ng-content></ng-content>\n          </button>\n        }\n      </div>\n    }\n    @if (componentType() === 'textarea') {\n      <textarea\n        [attr.maxLength]=\"maxLengthText()\"\n        [attr.minLength]=\"minLengthText()\"\n        [class.is-invalid]=\"_showErrors()\"\n        [class.is-valid]=\"_showSuccess()\"\n        [class.no-resize]=\"!resizable()\"\n        [disabled]=\"_isDisabled()\"\n        [id]=\"componentId()\"\n        [ngClass]=\"componentClass()\"\n        [placeholder]=\"componentPlaceholder() | transloco\"\n        [readOnly]=\"isReadonly()\"\n        [tabIndex]=\"componentTabIndex()\"\n        [value]=\"_value()\"\n        (blur)=\"onBlurHandler()\"\n        (input)=\"onChangedEventHandler($event)\"\n        class=\"form-control\"\n      ></textarea>\n    }\n    <div class=\"valid-feedback\">\n      {{ successMessage() | transloco }}\n    </div>\n    <div class=\"invalid-feedback\">\n      {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n    </div>\n    @if (helpMessage()) {\n      <small\n        [hidden]=\"_showSuccess() || _showErrors()\"\n        aria-live=\"assertive\"\n        class=\"form-text text-muted\"\n      >\n        {{ helpMessage() | transloco }}\n      </small>\n    }\n  </div>\n}\n", styles: ["input::-webkit-search-cancel-button{-webkit-appearance:none;height:.75rem;width:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3 1024 1024' width='12' height='12' fill='currentColor'%3E%3Cpath d='M9 1018q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5l459-459 459 459q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5 9-9 9-22 0-13-9-22l-459-459 459-459q9-9 9-22 0-13-9-22-9-9-22-9-13 0-22 9l-459 459-459-459q-9-9-22-9-13 0-22 9-9 9-9 22 0 13 9 22l459 459-459 459q-9 9-9 22 0 13 9 22l0 0z'/%3E%3C/svg%3E%0A\");cursor:pointer}:host{display:block}.no-resize{resize:none}.btn-outline-password{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;min-width:unset;display:flex;border-color:var(--bs-border-color)}.input-container{display:flex}input{flex:1}input.with-button-password{border-top-right-radius:0;border-bottom-right-radius:0}input:disabled{border-radius:var(--bs-border-radius)}.border-danger{border-color:var(--bs-form-invalid-border-color)}.border-success{border-color:var(--bs-form-valid-border-color)}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangInputComponent, decorators: [{
             type: Component,
@@ -43,7 +52,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                             useExisting: forwardRef(() => QuangInputComponent),
                             multi: true,
                         },
-                    ], imports: [TranslocoPipe, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (componentType()) {\n  <div class=\"mb-3\">\n    @if (componentLabel()) {\n      <label\n        [htmlFor]=\"componentId()\"\n        class=\"form-label\"\n      >\n        {{ componentLabel() | transloco }}\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </label>\n    }\n    @if (componentType() !== 'textarea') {\n      <input\n        [attr.maxLength]=\"maxLengthText()\"\n        [attr.minLength]=\"minLengthText()\"\n        [attr.required]=\"getIsRequiredControl()\"\n        [class.is-invalid]=\"_showErrors()\"\n        [class.is-valid]=\"_showSuccess()\"\n        [disabled]=\"_isDisabled()\"\n        [id]=\"componentId()\"\n        [max]=\"maxNumber()\"\n        [min]=\"minNumber()\"\n        [ngClass]=\"componentClass()\"\n        [placeholder]=\"componentPlaceholder() | transloco\"\n        [readOnly]=\"isReadonly()\"\n        [step]=\"componentStep()\"\n        [tabIndex]=\"componentTabIndex()\"\n        [type]=\"componentType()\"\n        [value]=\"_value()\"\n        (blur)=\"onBlurHandler()\"\n        (input)=\"onChangedEventHandler($event)\"\n        autocomplete=\"off\"\n        class=\"form-control\"\n      />\n    }\n    @if (componentType() === 'textarea') {\n      <textarea\n        [attr.maxLength]=\"maxLengthText()\"\n        [attr.minLength]=\"minLengthText()\"\n        [class.is-invalid]=\"_showErrors()\"\n        [class.is-valid]=\"_showSuccess()\"\n        [class.no-resize]=\"!resizable()\"\n        [disabled]=\"_isDisabled()\"\n        [id]=\"componentId()\"\n        [ngClass]=\"componentClass()\"\n        [placeholder]=\"componentPlaceholder() | transloco\"\n        [readOnly]=\"isReadonly()\"\n        [tabIndex]=\"componentTabIndex()\"\n        [value]=\"_value()\"\n        (blur)=\"onBlurHandler()\"\n        (input)=\"onChangedEventHandler($event)\"\n        class=\"form-control\"\n      ></textarea>\n    }\n    <div class=\"valid-feedback\">\n      {{ successMessage() | transloco }}\n    </div>\n    <div class=\"invalid-feedback\">\n      {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n    </div>\n    @if (helpMessage()) {\n      <small\n        [hidden]=\"_showSuccess() || _showErrors()\"\n        aria-live=\"assertive\"\n        class=\"form-text text-muted\"\n      >\n        {{ helpMessage() | transloco }}\n      </small>\n    }\n  </div>\n}\n", styles: ["input::-webkit-search-cancel-button{-webkit-appearance:none;height:.75rem;width:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3 1024 1024' width='12' height='12' fill='currentColor'%3E%3Cpath d='M9 1018q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5l459-459 459 459q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5 9-9 9-22 0-13-9-22l-459-459 459-459q9-9 9-22 0-13-9-22-9-9-22-9-13 0-22 9l-459 459-459-459q-9-9-22-9-13 0-22 9-9 9-9 22 0 13 9 22l459 459-459 459q-9 9-9 22 0 13 9 22l0 0z'/%3E%3C/svg%3E%0A\");cursor:pointer}:host{display:block}.no-resize{resize:none}\n"] }]
+                    ], imports: [TranslocoPipe, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (componentType()) {\n  <div class=\"mb-3\">\n    @if (componentLabel()) {\n      <label\n        [htmlFor]=\"componentId()\"\n        class=\"form-label\"\n      >\n        {{ componentLabel() | transloco }}\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </label>\n    }\n    @if (componentType() !== 'textarea') {\n      <div class=\"input-container\">\n        <input\n          [attr.maxLength]=\"maxLengthText()\"\n          [attr.minLength]=\"minLengthText()\"\n          [attr.required]=\"getIsRequiredControl()\"\n          [class.is-invalid]=\"_showErrors()\"\n          [class.is-valid]=\"_showSuccess()\"\n          [class.with-button-password]=\"showHidePasswordButton()\"\n          [disabled]=\"_isDisabled()\"\n          [id]=\"componentId()\"\n          [max]=\"maxNumber()\"\n          [min]=\"minNumber()\"\n          [ngClass]=\"componentClass()\"\n          [placeholder]=\"componentPlaceholder() | transloco\"\n          [readOnly]=\"isReadonly()\"\n          [step]=\"componentStep()\"\n          [tabIndex]=\"componentTabIndex()\"\n          [type]=\"componentInputType()\"\n          [value]=\"_value()\"\n          (blur)=\"onBlurHandler()\"\n          (input)=\"onChangedEventHandler($event)\"\n          autocomplete=\"off\"\n          class=\"form-control\"\n        />\n        @if (componentType() === 'password' && showHidePasswordButton()) {\n          <button\n            [class.border-danger]=\"_showErrors()\"\n            [class.border-success]=\"_showSuccess()\"\n            [ngClass]=\"buttonClass()\"\n            (click)=\"_ngControl()?.disabled ? null : onTogglePasswordVisibility()\"\n            #calendarButton\n            aria-label=\"calendar-button\"\n            class=\"btn btn-outline-secondary btn-outline-password\"\n            type=\"button\"\n          >\n            <ng-content></ng-content>\n          </button>\n        }\n      </div>\n    }\n    @if (componentType() === 'textarea') {\n      <textarea\n        [attr.maxLength]=\"maxLengthText()\"\n        [attr.minLength]=\"minLengthText()\"\n        [class.is-invalid]=\"_showErrors()\"\n        [class.is-valid]=\"_showSuccess()\"\n        [class.no-resize]=\"!resizable()\"\n        [disabled]=\"_isDisabled()\"\n        [id]=\"componentId()\"\n        [ngClass]=\"componentClass()\"\n        [placeholder]=\"componentPlaceholder() | transloco\"\n        [readOnly]=\"isReadonly()\"\n        [tabIndex]=\"componentTabIndex()\"\n        [value]=\"_value()\"\n        (blur)=\"onBlurHandler()\"\n        (input)=\"onChangedEventHandler($event)\"\n        class=\"form-control\"\n      ></textarea>\n    }\n    <div class=\"valid-feedback\">\n      {{ successMessage() | transloco }}\n    </div>\n    <div class=\"invalid-feedback\">\n      {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n    </div>\n    @if (helpMessage()) {\n      <small\n        [hidden]=\"_showSuccess() || _showErrors()\"\n        aria-live=\"assertive\"\n        class=\"form-text text-muted\"\n      >\n        {{ helpMessage() | transloco }}\n      </small>\n    }\n  </div>\n}\n", styles: ["input::-webkit-search-cancel-button{-webkit-appearance:none;height:.75rem;width:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3 1024 1024' width='12' height='12' fill='currentColor'%3E%3Cpath d='M9 1018q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5l459-459 459 459q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5 9-9 9-22 0-13-9-22l-459-459 459-459q9-9 9-22 0-13-9-22-9-9-22-9-13 0-22 9l-459 459-459-459q-9-9-22-9-13 0-22 9-9 9-9 22 0 13 9 22l459 459-459 459q-9 9-9 22 0 13 9 22l0 0z'/%3E%3C/svg%3E%0A\");cursor:pointer}:host{display:block}.no-resize{resize:none}.btn-outline-password{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;min-width:unset;display:flex;border-color:var(--bs-border-color)}.input-container{display:flex}input{flex:1}input.with-button-password{border-top-right-radius:0;border-bottom-right-radius:0}input:disabled{border-radius:var(--bs-border-radius)}.border-danger{border-color:var(--bs-form-invalid-border-color)}.border-success{border-color:var(--bs-form-valid-border-color)}\n"] }]
         }], ctorParameters: () => [] });
 
 /**

package/fesm2022/quang-components-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"quang-components-input.mjs","sources":["../../../projects/quang/components/input/input.component.ts","../../../projects/quang/components/input/input.component.html","../../../projects/quang/components/input/quang-components-input.ts"],"sourcesContent":["import { NgClass } from '@angular/common'\nimport { ChangeDetectionStrategy, Component, forwardRef, input } from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\nimport { NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\n\nimport { QuangBaseComponent } from 'quang/components/shared'\n\nexport type InputType = 'text' | 'textarea' | 'password' | 'email' | 'number' | 'url' | 'search' | 'tel' | 'color'\n\n@Component({\n  selector: 'quang-input',\n  templateUrl: './input.component.html',\n  styleUrl: './input.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => QuangInputComponent),\n      multi: true,\n    },\n  ],\n  imports: [TranslocoPipe, NgClass],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Input component that handles all the types declared in {@link InputType}\n * @property {boolean} resizable just for textarea {@link InputType}\n */\nexport class QuangInputComponent extends QuangBaseComponent<string | number> {\n  componentType = input.required<InputType>()\n\n  maxLengthText = input<number | null>(null)\n\n  minLengthText = input<number | null>(null)\n\n  minNumber = input<number | undefined>(undefined)\n\n  maxNumber = input<number | undefined>(undefined)\n\n  componentStep = input<number>(1)\n\n  resizable = input(true)\n\n  constructor() {\n    super()\n    toObservable(this.componentType)\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => {\n        this.setupFormControl()\n      })\n  }\n}\n","@if (componentType()) {\n  <div class=\"mb-3\">\n    @if (componentLabel()) {\n      <label\n        [htmlFor]=\"componentId()\"\n        class=\"form-label\"\n      >\n        {{ componentLabel() | transloco }}\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </label>\n    }\n    @if (componentType() !== 'textarea') {\n      <input\n        [attr.maxLength]=\"maxLengthText()\"\n        [attr.minLength]=\"minLengthText()\"\n        [attr.required]=\"getIsRequiredControl()\"\n        [class.is-invalid]=\"_showErrors()\"\n        [class.is-valid]=\"_showSuccess()\"\n        [disabled]=\"_isDisabled()\"\n        [id]=\"componentId()\"\n        [max]=\"maxNumber()\"\n        [min]=\"minNumber()\"\n        [ngClass]=\"componentClass()\"\n        [placeholder]=\"componentPlaceholder() | transloco\"\n        [readOnly]=\"isReadonly()\"\n        [step]=\"componentStep()\"\n        [tabIndex]=\"componentTabIndex()\"\n        [type]=\"componentType()\"\n        [value]=\"_value()\"\n        (blur)=\"onBlurHandler()\"\n        (input)=\"onChangedEventHandler($event)\"\n        autocomplete=\"off\"\n        class=\"form-control\"\n      />\n    }\n    @if (componentType() === 'textarea') {\n      <textarea\n        [attr.maxLength]=\"maxLengthText()\"\n        [attr.minLength]=\"minLengthText()\"\n        [class.is-invalid]=\"_showErrors()\"\n        [class.is-valid]=\"_showSuccess()\"\n        [class.no-resize]=\"!resizable()\"\n        [disabled]=\"_isDisabled()\"\n        [id]=\"componentId()\"\n        [ngClass]=\"componentClass()\"\n        [placeholder]=\"componentPlaceholder() | transloco\"\n        [readOnly]=\"isReadonly()\"\n        [tabIndex]=\"componentTabIndex()\"\n        [value]=\"_value()\"\n        (blur)=\"onBlurHandler()\"\n        (input)=\"onChangedEventHandler($event)\"\n        class=\"form-control\"\n      ></textarea>\n    }\n    <div class=\"valid-feedback\">\n      {{ successMessage() | transloco }}\n    </div>\n    <div class=\"invalid-feedback\">\n      {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n    </div>\n    @if (helpMessage()) {\n      <small\n        [hidden]=\"_showSuccess() || _showErrors()\"\n        aria-live=\"assertive\"\n        class=\"form-text text-muted\"\n      >\n        {{ helpMessage() | transloco }}\n      </small>\n    }\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"quang-components-input.mjs","sources":["../../../projects/quang/components/input/input.component.ts","../../../projects/quang/components/input/input.component.html","../../../projects/quang/components/input/quang-components-input.ts"],"sourcesContent":["import { NgClass } from '@angular/common'\nimport { ChangeDetectionStrategy, Component, computed, forwardRef, input, output, signal } from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\nimport { NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\n\nimport { QuangBaseComponent } from 'quang/components/shared'\n\nexport type InputType = 'text' | 'textarea' | 'password' | 'email' | 'number' | 'url' | 'search' | 'tel' | 'color'\n\n@Component({\n  selector: 'quang-input',\n  templateUrl: './input.component.html',\n  styleUrl: './input.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => QuangInputComponent),\n      multi: true,\n    },\n  ],\n  imports: [TranslocoPipe, NgClass],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Input component that handles all the types declared in {@link InputType}\n * @property {boolean} resizable just for textarea {@link InputType}\n */\nexport class QuangInputComponent extends QuangBaseComponent<string | number> {\n  componentType = input.required<InputType>()\n\n  maxLengthText = input<number | null>(null)\n\n  minLengthText = input<number | null>(null)\n\n  minNumber = input<number | undefined>(undefined)\n\n  maxNumber = input<number | undefined>(undefined)\n\n  componentStep = input<number>(1)\n\n  resizable = input(true)\n\n  buttonClass = input<string>('')\n\n  showHidePasswordButton = input(true)\n\n  showPassword = output<boolean>()\n\n  private onShowPassword = signal<boolean>(false)\n\n  componentInputType = computed<InputType>(() =>\n    this.componentType() === 'password' && this.onShowPassword() ? 'text' : this.componentType()\n  )\n\n  constructor() {\n    super()\n    toObservable(this.componentType)\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => {\n        this.setupFormControl()\n      })\n  }\n\n  onTogglePasswordVisibility(): void {\n    this.onShowPassword.update((current) => !current)\n    this.showPassword.emit(this.onShowPassword())\n  }\n}\n","@if (componentType()) {\n  <div class=\"mb-3\">\n    @if (componentLabel()) {\n      <label\n        [htmlFor]=\"componentId()\"\n        class=\"form-label\"\n      >\n        {{ componentLabel() | transloco }}\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </label>\n    }\n    @if (componentType() !== 'textarea') {\n      <div class=\"input-container\">\n        <input\n          [attr.maxLength]=\"maxLengthText()\"\n          [attr.minLength]=\"minLengthText()\"\n          [attr.required]=\"getIsRequiredControl()\"\n          [class.is-invalid]=\"_showErrors()\"\n          [class.is-valid]=\"_showSuccess()\"\n          [class.with-button-password]=\"showHidePasswordButton()\"\n          [disabled]=\"_isDisabled()\"\n          [id]=\"componentId()\"\n          [max]=\"maxNumber()\"\n          [min]=\"minNumber()\"\n          [ngClass]=\"componentClass()\"\n          [placeholder]=\"componentPlaceholder() | transloco\"\n          [readOnly]=\"isReadonly()\"\n          [step]=\"componentStep()\"\n          [tabIndex]=\"componentTabIndex()\"\n          [type]=\"componentInputType()\"\n          [value]=\"_value()\"\n          (blur)=\"onBlurHandler()\"\n          (input)=\"onChangedEventHandler($event)\"\n          autocomplete=\"off\"\n          class=\"form-control\"\n        />\n        @if (componentType() === 'password' && showHidePasswordButton()) {\n          <button\n            [class.border-danger]=\"_showErrors()\"\n            [class.border-success]=\"_showSuccess()\"\n            [ngClass]=\"buttonClass()\"\n            (click)=\"_ngControl()?.disabled ? null : onTogglePasswordVisibility()\"\n            #calendarButton\n            aria-label=\"calendar-button\"\n            class=\"btn btn-outline-secondary btn-outline-password\"\n            type=\"button\"\n          >\n            <ng-content></ng-content>\n          </button>\n        }\n      </div>\n    }\n    @if (componentType() === 'textarea') {\n      <textarea\n        [attr.maxLength]=\"maxLengthText()\"\n        [attr.minLength]=\"minLengthText()\"\n        [class.is-invalid]=\"_showErrors()\"\n        [class.is-valid]=\"_showSuccess()\"\n        [class.no-resize]=\"!resizable()\"\n        [disabled]=\"_isDisabled()\"\n        [id]=\"componentId()\"\n        [ngClass]=\"componentClass()\"\n        [placeholder]=\"componentPlaceholder() | transloco\"\n        [readOnly]=\"isReadonly()\"\n        [tabIndex]=\"componentTabIndex()\"\n        [value]=\"_value()\"\n        (blur)=\"onBlurHandler()\"\n        (input)=\"onChangedEventHandler($event)\"\n        class=\"form-control\"\n      ></textarea>\n    }\n    <div class=\"valid-feedback\">\n      {{ successMessage() | transloco }}\n    </div>\n    <div class=\"invalid-feedback\">\n      {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n    </div>\n    @if (helpMessage()) {\n      <small\n        [hidden]=\"_showSuccess() || _showErrors()\"\n        aria-live=\"assertive\"\n        class=\"form-text text-muted\"\n      >\n        {{ helpMessage() | transloco }}\n      </small>\n    }\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}