quang 19.0.19 → 19.0.21

package/fesm2022/quang-overlay-tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"quang-overlay-tooltip.mjs","sources":["../../../projects/quang/overlay/tooltip/tooltip.component.ts","../../../projects/quang/overlay/tooltip/tooltip.component.html","../../../projects/quang/overlay/tooltip/tooltip.directive.ts","../../../projects/quang/overlay/tooltip/quang-overlay-tooltip.ts"],"sourcesContent":["import { animate, state, style, transition, trigger } from '@angular/animations'\nimport { ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay'\nimport { ChangeDetectionStrategy, Component, input, signal } from '@angular/core'\n\nimport { QuangBaseOverlayComponent } from 'quang/overlay/shared'\n\n@Component({\n  selector: 'quang-tooltip',\n  imports: [OverlayModule],\n  templateUrl: './tooltip.component.html',\n  styleUrl: './tooltip.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n\n  animations: [\n    trigger('tooltip', [\n      state('*', style({ opacity: 1 })),\n      transition(':enter', [style({ opacity: 0 }), animate(200, style({ opacity: 1 }))]),\n      transition(':leave', [style({ opacity: 1 }), animate(300, style({ opacity: 0 }))]),\n    ]),\n  ],\n})\nexport class QuangTooltipComponent implements QuangBaseOverlayComponent {\n  content = input<string>('')\n\n  quangTooltipPosition = input<'top' | 'bottom' | 'left' | 'right'>('top')\n\n  positionPair = signal<ConnectionPositionPair | null>(null)\n\n  payload = input<unknown>()\n}\n","<div\n  @tooltip\n  class=\"quang-tooltip\"\n>\n  {{ content() }}\n</div>\n","import { ComponentType } from '@angular/cdk/portal'\nimport { Directive, input, signal } from '@angular/core'\n\nimport { QuangBaseOverlayDirective } from 'quang/overlay/shared'\n\nimport { QuangTooltipComponent } from './tooltip.component'\n\n@Directive({\n  selector: '[quangTooltip]',\n})\nexport class QuangTooltipDirective extends QuangBaseOverlayDirective<QuangTooltipComponent> {\n  override targetComponentType = signal<ComponentType<QuangTooltipComponent> | undefined>(QuangTooltipComponent)\n\n  override content = input.required<string>({ alias: 'quangTooltip' })\n\n  override showMethod = input<'click' | 'hover'>('hover')\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-overlay-tooltip.mjs","sources":["../../../projects/quang/overlay/tooltip/tooltip.component.ts","../../../projects/quang/overlay/tooltip/tooltip.component.html","../../../projects/quang/overlay/tooltip/tooltip.directive.ts","../../../projects/quang/overlay/tooltip/quang-overlay-tooltip.ts"],"sourcesContent":["import { animate, state, style, transition, trigger } from '@angular/animations'\nimport { ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay'\nimport { ChangeDetectionStrategy, Component, input, signal } from '@angular/core'\n\nimport { QuangBaseOverlayComponent } from 'quang/overlay/shared'\n\n@Component({\n  selector: 'quang-tooltip',\n  imports: [OverlayModule],\n  templateUrl: './tooltip.component.html',\n  styleUrl: './tooltip.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n\n  animations: [\n    trigger('tooltip', [\n      state('*', style({ opacity: 1 })),\n      transition(':enter', [style({ opacity: 0 }), animate(200, style({ opacity: 1 }))]),\n      transition(':leave', [style({ opacity: 1 }), animate(300, style({ opacity: 0 }))]),\n    ]),\n  ],\n})\nexport class QuangTooltipComponent implements QuangBaseOverlayComponent {\n  overlayContent = input.required<string>()\n\n  quangTooltipPosition = input<'top' | 'bottom' | 'left' | 'right'>('top')\n\n  positionPair = signal<ConnectionPositionPair | null>(null)\n\n  payload = input<unknown>()\n}\n","<div\n  @tooltip\n  class=\"quang-tooltip\"\n>\n  {{ overlayContent() }}\n</div>\n","import { ComponentType } from '@angular/cdk/portal'\nimport { Directive, input, signal } from '@angular/core'\n\nimport { QuangBaseOverlayDirective } from 'quang/overlay/shared'\n\nimport { QuangTooltipComponent } from './tooltip.component'\n\n@Directive({\n  selector: '[quangTooltip]',\n})\nexport class QuangTooltipDirective extends QuangBaseOverlayDirective<QuangTooltipComponent> {\n  override targetComponentType = signal<ComponentType<QuangTooltipComponent> | undefined>(QuangTooltipComponent)\n\n  override content = input.required<string>({ alias: 'quangTooltip' })\n\n  override showMethod = input<'click' | 'hover'>('hover')\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAqBa,qBAAqB,CAAA;AAflC,IAAA,WAAA,GAAA;AAgBE,QAAA,IAAA,CAAA,cAAc,GAAG,KAAK,CAAC,QAAQ,EAAU;AAEzC,QAAA,IAAA,CAAA,oBAAoB,GAAG,KAAK,CAAsC,KAAK,CAAC;AAExE,QAAA,IAAA,CAAA,YAAY,GAAG,MAAM,CAAgC,IAAI,CAAC;QAE1D,IAAO,CAAA,OAAA,GAAG,KAAK,EAAW;AAC3B;8GARY,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,ECrBlC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,oBAAA,EAAA,EAAA,iBAAA,EAAA,sBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,oFAMA,EDEY,MAAA,EAAA,CAAA,4IAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,aAAa,EAKX,CAAA,EAAA,UAAA,EAAA;YACV,OAAO,CAAC,SAAS,EAAE;gBACjB,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;gBACjC,UAAU,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;gBAClF,UAAU,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;aACnF,CAAC;AACH,SAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAEU,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAfjC,SAAS;+BACE,eAAe,EAAA,OAAA,EAChB,CAAC,aAAa,CAAC,mBAGP,uBAAuB,CAAC,MAAM,EAEnC,UAAA,EAAA;wBACV,OAAO,CAAC,SAAS,EAAE;4BACjB,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;4BACjC,UAAU,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;4BAClF,UAAU,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;yBACnF,CAAC;AACH,qBAAA,EAAA,QAAA,EAAA,oFAAA,EAAA,MAAA,EAAA,CAAA,4IAAA,CAAA,EAAA;;;AETG,MAAO,qBAAsB,SAAQ,yBAAgD,CAAA;AAH3F,IAAA,WAAA,GAAA;;AAIW,QAAA,IAAA,CAAA,mBAAmB,GAAG,MAAM,CAAmD,qBAAqB,CAAC;QAErG,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC,QAAQ,CAAS,EAAE,KAAK,EAAE,cAAc,EAAE,CAAC;AAE3D,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAoB,OAAO,CAAC;AACxD;8GANY,qBAAqB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAArB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAHjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;AAC3B,iBAAA;;;ACTD;;AAEG;;;;"}

package/loader/README.md

@@ -1,14 +1,81 @@
 # Quang Loader
 
-Quang Loader is a fast way to implements an overlay loader to a project.
+Quang Loader provides a simple and efficient way to implement an overlay loader in your project. It includes a default spinner but also supports custom content.
 
-### QuangLoaderComponent
+## QuangLoaderComponent
 
-The `QuangLoaderComponent` is a component that shows a loader in page. It Has a default spinner but it could be replaced with custom content.
+The `QuangLoaderComponent` displays a loader overlay on the page. It is highly customizable and can be used to indicate loading states in your application.
 
-To use it:
+### Inputs
 
-- Import [QuangLoaderComponent](./loader.component.ts) to your component (suggested app.component.ts).
-- Import [quangLoaderInterceptor](./loader-interceptor.ts) and [provideLoader](./loader-providers.ts) to Providers (app.config.ts)
+- `showAtLeastFor`: `number` — Minimum time (in milliseconds) to show the loader for. Default: `500`.
+- You can use `ng-content` to project custom content (e.g., a custom spinner or message).
 
-Read [`Component @example`](./loader.component.ts) [`Interceptor @example`](./loader-interceptor.ts) [`Providers @example`](./loader-providers.ts) for usage.
+> **Note:** Loader visibility is managed internally by the loader service and HTTP interceptor, not by an input property.
+
+### Usage
+
+1. **Import the Component**:
+   ```typescript
+   import { QuangLoaderComponent } from 'quang/loader'
+   ```
+2. **Add to Template**:
+   ```html
+   <quang-loader></quang-loader>
+   ```
+3. **Custom Content**:
+   ```html
+   <quang-loader>
+     <div class="custom-spinner">Loading...</div>
+   </quang-loader>
+   ```
+
+## Loader Interceptor
+
+The `quangLoaderInterceptor` automatically shows and hides the loader during HTTP requests.
+
+### Usage
+
+1. **Import the Interceptor**:
+   ```typescript
+   import { quangLoaderInterceptor } from 'quang/loader'
+
+   providers: [
+     { provide: HTTP_INTERCEPTORS, useClass: quangLoaderInterceptor, multi: true }
+   ]
+   ```
+2. **Configuration**:
+   Configure the interceptor as needed for your application.
+
+## Loader Providers
+
+The `provideQuangLoaderExcludedUrls` function configures the loader globally. It allows you to customize the loader's behavior, including setting delays, custom templates, and excluding specific URLs from triggering the loader.
+
+### Usage
+
+1. **Import the Provider**:
+   ```typescript
+   import { provideQuangLoaderExcludedUrls } from 'quang/loader';
+
+   providers: [
+     provideQuangLoaderExcludedUrls([
+       { url: 'assets', method: 'GET' },
+       { url: '/api/health', method: 'GET' },
+     ]),
+   ];
+   ```
+
+### Excluding URLs from the Loader
+
+To exclude specific URLs from triggering the loader, use the `provideQuangLoaderExcludedUrls` function. This function accepts an array of URL objects. Any HTTP request matching these URLs will not activate the loader.
+
+Example:
+
+```typescript
+provideQuangLoaderExcludedUrls([
+  { url: 'assets', method: 'GET' },
+  { url: '/api/health', method: 'GET' },
+]);
+```
+
+In this example, requests to `assets` and `/api/health` with the `GET` method will not show the loader, ensuring that static assets or health check endpoints do not interfere with the user experience.

package/overlay/modal/README.md

@@ -0,0 +1,97 @@
+# QuangModalComponent
+
+The `QuangModalComponent` is an overlay component used directly in its parent component.
+
+## Features
+
+- Modal overlay for displaying content
+- Configurable size and position
+- Supports animations for opening and closing
+
+## Inputs
+
+- `position`: `'right' | 'left' | 'center'` (required) — Position of the modal.
+- `height`: `string` — Height of the modal. Default: `'80vh'`.
+- `width`: `string` — Width of the modal. Default: `'80vw'`.
+- `padding`: `string` — Padding inside the modal. Default: `'0 1rem'`.
+- `containerClass`: `string` — Custom CSS class for the modal container.
+- `animationMode`: `'SLIDE_FROM_LEFT_TO_RIGHT' | 'SLIDE_FROM_RIGHT_TO_LEFT' | 'SLIDE_TOP_TO_BOTTOM' | 'SLIDE_BOTTOM_TO_TOP' | 'FADE'` — Animation mode for the modal.
+- `backgroundColor`: `string` — Background color for the modal.
+- `showBackdrop`: `boolean` — Whether to show the backdrop. Default: `true`.
+- Use `ng-container` with `header`, `body`, and `footer` slots for custom content.
+
+## Outputs
+
+- `backdropClick`: Emits when the user clicks on the backdrop (outside the modal).
+
+## Usage
+
+### HTML
+
+```html
+<quang-modal
+  (backdropClick)="closeModal()"
+  animationMode="SLIDE_BOTTOM_TO_TOP"
+  height="80vh"
+  padding="0"
+  position="center"
+  [showBackdrop]="true"
+>
+  <ng-container header>
+    <div class="d-flex justify-content-between mt-2">
+      <h3>{{ 'title.header' | transloco }}</h3>
+      <button
+        (click)="closeModal()"
+        class="btn btn-outline-secondary"
+        type="button"
+      >
+        X
+      </button>
+    </div>
+  </ng-container>
+  <ng-container body>
+    <h3>{{ content() }}</h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua.
+    </p>
+    <img
+      alt="test"
+      src="https://picsum.photos/200/300"
+    />
+  </ng-container>
+  <ng-container footer>
+    <div class="d-flex mb-3 gap-3 w-100">
+      <h3 class="d-flex flex-column flex-grow-1">{{ 'title.footer' | transloco }}</h3>
+      <button
+        (click)="closeModal()"
+        class="btn btn-outline-secondary"
+        type="button"
+      >
+        {{ 'buttons.close' | transloco }}
+      </button>
+    </div>
+  </ng-container>
+</quang-modal>
+```
+
+### TypeScript
+
+```typescript
+import { signal } from '@angular/core';
+
+showModal = signal(false);
+content = signal('Modal Content');
+
+openModal() {
+  showModal.set(true);
+}
+
+closeModal() {
+  showModal.set(false);
+}
+```
+
+## Notes
+
+This component uses Angular CDK's `Overlay` and `Portal` modules for rendering modals dynamically. Refer to the component's API for all available configuration options.

package/overlay/popover/README.md

@@ -0,0 +1,40 @@
+# QuangPopoverComponent
+
+The `QuangPopoverComponent` is a base overlay popover with its own style, used via the `[quangPopover]` directive.
+
+## Features
+
+- Popover overlay for displaying additional information
+- Configurable trigger and position (via directive)
+- Supports custom content via `TemplateRef`
+
+## Inputs (via Directive)
+
+- `quangPopover`: `TemplateRef<any> | null` (required) — The template to display in the popover.
+- `overlayPosition`: `string` — Position of the popover. Accepts values like `'top'`, `'top-left'`, `'top-right'`, `'bottom'`, `'bottom-left'`, `'bottom-right'`, `'left'`, `'right'`
+- `showMethod`: `string` — Trigger for the popover. Accepts values like `'click'`, `'hover'`, `'focus'`.
+- `payload`: `any` — Optional data to pass to the popover template.
+
+## Outputs
+
+- _(none)_ — The popover closes automatically when the user clicks outside or triggers the close logic.
+
+## Usage
+
+```html
+<button
+  [overlayPosition]="'top'"
+  [quangPopover]="popoverTemplate"
+  [showMethod]="'click'"
+>
+  Open Popover
+</button>
+
+<ng-template #popoverTemplate>
+  <div>Popover Content</div>
+</ng-template>
+```
+
+## Notes
+
+This component is used via the `[quangPopover]` directive and extends the `QuangBaseOverlayComponent`, inheriting features such as dynamic positioning and styling. The popover content is always provided as a `TemplateRef`.

package/overlay/popover/popover.component.d.ts

@@ -3,11 +3,11 @@ import { TemplateRef } from '@angular/core';
 import { QuangBaseOverlayComponent } from 'quang/overlay/shared';
 import * as i0 from "@angular/core";
 export declare class QuangPopoverComponent implements QuangBaseOverlayComponent {
-    content: import("@angular/core").InputSignal<TemplateRef<any> | null>;
+    overlayContent: import("@angular/core").InputSignal<TemplateRef<any> | null>;
     positionPair: import("@angular/core").WritableSignal<ConnectionPositionPair | null>;
     payload: import("@angular/core").InputSignal<any>;
     getPopoverPosition: import("@angular/core").WritableSignal<string>;
     onChangePositionPair$: import("rxjs").Subscription;
     static ɵfac: i0.ɵɵFactoryDeclaration<QuangPopoverComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<QuangPopoverComponent, "quang-popover", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "payload": { "alias": "payload"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<QuangPopoverComponent, "quang-popover", never, { "overlayContent": { "alias": "overlayContent"; "required": false; "isSignal": true; }; "payload": { "alias": "payload"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/overlay/shared/quang-base-overlay.component.d.ts

@@ -1,9 +1,9 @@
 import { ConnectionPositionPair } from '@angular/cdk/overlay';
 import * as i0 from "@angular/core";
 export declare abstract class QuangBaseOverlayComponent {
-    content: import("@angular/core").InputSignal<any>;
+    overlayContent: import("@angular/core").InputSignal<any>;
     payload: import("@angular/core").InputSignal<any>;
     positionPair: import("@angular/core").WritableSignal<ConnectionPositionPair | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<QuangBaseOverlayComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<QuangBaseOverlayComponent, "quang-base-overlay-component", never, { "content": { "alias": "content"; "required": true; "isSignal": true; }; "payload": { "alias": "payload"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<QuangBaseOverlayComponent, "quang-base-overlay-component", never, { "overlayContent": { "alias": "overlayContent"; "required": true; "isSignal": true; }; "payload": { "alias": "payload"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/overlay/toast/README.md

@@ -0,0 +1,64 @@
+# QuangToastComponent
+
+The `QuangToastComponent` is an overlay component used directly in its parent component and managed via the `QuangToastService`.
+
+## Features
+
+- Toast notifications for displaying messages
+- Configurable duration, type, and position (via service)
+- Supports multiple toast instances and custom templates
+
+## Inputs
+
+- `showAtLeastFor`: `number` — Minimum time (in milliseconds) to show the toast for. Default: `500`.
+
+> **Note:** All toast configuration (message, type, position, timing, etc.) is provided via the `QuangToastService.openToast()` method, not as component inputs.
+
+## Outputs
+
+- *(none)* — Toast dismissal is managed internally by the service.
+
+## Usage
+
+### HTML
+
+```html
+<quang-toast />
+```
+
+### TypeScript
+
+```typescript
+import { inject } from '@angular/core'
+import { QuangToastService } from 'quang/overlay/toast'
+
+quangToast = inject(QuangToastService)
+
+openToast(type: 'success' | 'error') {
+  quangToast.openToast({
+    type,
+    title: type === 'success' ? 'Success' : 'Error',
+    position: 'top-right',
+    text: 'This is a toast message',
+    timing: 5000,
+    showCloseButton: true,
+  })
+}
+```
+
+#### ToastData Options
+
+- `type`: `'success' | 'warning' | 'error'` (required)
+- `title?`: `string`
+- `position`: `'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center' | 'top-center' | 'bottom-center'`
+- `timing`: `number` (required)
+- `text?`: `string`
+- `showCloseButton?`: `boolean`
+- `customTemplate?`: `TemplateRef<any>`
+- `customIcon?`: `string`
+- `hideHeader?`: `boolean`
+- ...and more (see service for full list)
+
+## Notes
+
+This component uses the `QuangToastService` for managing toast instances dynamically. All toast display logic and configuration is handled via the service.

package/overlay/tooltip/README.md

@@ -0,0 +1,36 @@
+# QuangTooltipComponent
+
+The `QuangTooltipComponent` is a base overlay tooltip with its own style, used via the `[quangTooltip]` directive.
+
+## Features
+
+- Tooltip overlay for displaying additional information
+- Configurable trigger and position (via directive)
+- Supports animations for showing and hiding
+
+## Inputs (via Directive)
+
+- `quangTooltip`: `string` (required) — The content to display in the tooltip.
+- `showMethod`: `'click' | 'hover'` — Specifies the trigger for the tooltip. Default: `'hover'`.
+- `quangTooltipPosition`: `'top' | 'bottom' | 'left' | 'right'` — Position of the tooltip. Default: `'top'`.
+- `payload`: `unknown` — Optional data to pass to the tooltip.
+
+## Outputs
+
+- *(none)* — The tooltip closes automatically when the user clicks outside or triggers the close logic.
+
+## Usage
+
+```html
+<button
+  [quangTooltip]="'This is a tooltip'"
+  [showMethod]="'hover'"
+  [quangTooltipPosition]="'top'"
+>
+  Hover me
+</button>
+```
+
+## Notes
+
+This component uses Angular animations for smooth transitions and extends the `QuangBaseOverlayComponent` for dynamic positioning. The tooltip is always used via the `[quangTooltip]` directive.

package/overlay/tooltip/tooltip.component.d.ts

@@ -2,10 +2,10 @@ import { ConnectionPositionPair } from '@angular/cdk/overlay';
 import { QuangBaseOverlayComponent } from 'quang/overlay/shared';
 import * as i0 from "@angular/core";
 export declare class QuangTooltipComponent implements QuangBaseOverlayComponent {
-    content: import("@angular/core").InputSignal<string>;
+    overlayContent: import("@angular/core").InputSignal<string>;
     quangTooltipPosition: import("@angular/core").InputSignal<"top" | "bottom" | "left" | "right">;
     positionPair: import("@angular/core").WritableSignal<ConnectionPositionPair | null>;
     payload: import("@angular/core").InputSignal<unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<QuangTooltipComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<QuangTooltipComponent, "quang-tooltip", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "quangTooltipPosition": { "alias": "quangTooltipPosition"; "required": false; "isSignal": true; }; "payload": { "alias": "payload"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<QuangTooltipComponent, "quang-tooltip", never, { "overlayContent": { "alias": "overlayContent"; "required": true; "isSignal": true; }; "quangTooltipPosition": { "alias": "quangTooltipPosition"; "required": false; "isSignal": true; }; "payload": { "alias": "payload"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quang",
   "sideEffects": false,
-  "version": "19.0.19",
+  "version": "19.0.21",
   "dependencies": {
     "tslib": "^2.3.0"
   },
@@ -86,14 +86,14 @@
       "types": "./auth/mobile/index.d.ts",
       "default": "./fesm2022/quang-auth-mobile.mjs"
     },
-    "./components/checkbox": {
-      "types": "./components/checkbox/index.d.ts",
-      "default": "./fesm2022/quang-components-checkbox.mjs"
-    },
     "./components/autocomplete": {
       "types": "./components/autocomplete/index.d.ts",
       "default": "./fesm2022/quang-components-autocomplete.mjs"
     },
+    "./components/checkbox": {
+      "types": "./components/checkbox/index.d.ts",
+      "default": "./fesm2022/quang-components-checkbox.mjs"
+    },
     "./components/date": {
       "types": "./components/date/index.d.ts",
       "default": "./fesm2022/quang-components-date.mjs"

package/translation/README.md

@@ -1,21 +1,34 @@
 # Quang Translation
 
-`Quang Translation` is a wrapper of `Transloco` to implements commons features
+Quang Translation is a wrapper around `@jsverse/transloco` that implements common features for internationalization (i18n) in Angular projects.
 
-### QuangTranslationLoaderService
+## Overview
 
-[QuangTranslationLoaderService](./translation-loader.service.ts) loads translations' files.
+This package provides:
+- A translation loader service for loading translation files
+- Providers for configuring translation behavior
+- A translation service for runtime translation management
+- Translation tokens for use throughout your project
 
-### Translation Providers
+## QuangTranslationLoaderService
 
-`Translation Providers` provides a configurable setup for internationalization (i18n) using the @jsverse/transloco library.
+[`QuangTranslationLoaderService`](./translation-loader.service.ts) loads translation files dynamically and integrates with Transloco.
 
-Read [@example](./translation-providers.ts) for usage.
+## Translation Providers
 
-### QuangTranslationService
+Translation providers offer a configurable setup for i18n using the `@jsverse/transloco` library. See [`translation-providers.ts`](./translation-providers.ts) for usage examples and configuration options.
 
-[QuangTranslationService](./translation.service.ts) is responsible for managing translations within the application. It leverages the @jsverse/transloco library for core translation functionalities.
+## QuangTranslationService
 
-### Translation Tokens
+[`QuangTranslationService`](./translation.service.ts) manages translations at runtime, leveraging `@jsverse/transloco` for core translation features. It provides methods for switching languages, retrieving translations, and more.
 
-[`Translation Tokens`](./translations.tokens.ts) includes a set of tokens that you can use inside your project.
+## Translation Tokens
+
+[`translations.tokens.ts`](./translations.tokens.ts) includes a set of injectable tokens for customizing and extending translation behavior in your project.
+
+## Usage
+
+Refer to the linked files above for implementation details and usage examples. For most applications, you will:
+- Register the translation providers in your app module
+- Use `QuangTranslationService` for runtime translation management
+- Use the provided tokens and loader service as needed for advanced scenarios