@edmicro/olkit 1.0.5 → 1.0.10

package/types/edmicro-olkit.d.ts

@@ -1,40 +1,78 @@
 import * as _angular_core from '@angular/core';
-import { OnDestroy, ElementRef, QueryList, TemplateRef } from '@angular/core';
+import { OnInit, OnDestroy, ElementRef, QueryList, TemplateRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import * as _edmicro_olkit from '@edmicro/olkit';
 import { SafeHtml } from '@angular/platform-browser';
 import { Observable } from 'rxjs';
 
-declare class AccordionItemComponent {
-    readonly itemId: _angular_core.InputSignal<string>;
+declare class OlAccordionItemComponent {
+    private readonly parentAccordion;
     readonly title: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly itemId: _angular_core.InputSignal<string>;
     readonly isOpen: _angular_core.ModelSignal<boolean>;
     readonly opened: _angular_core.OutputEmitterRef<void>;
     readonly closed: _angular_core.OutputEmitterRef<void>;
-    private readonly parentAccordion;
+    readonly isSeparated: _angular_core.Signal<boolean>;
+    readonly isFlush: _angular_core.Signal<boolean>;
+    readonly headerId: _angular_core.Signal<string>;
+    readonly contentId: _angular_core.Signal<string>;
+    readonly headerClasses: _angular_core.Signal<string>;
+    readonly chevronClasses: _angular_core.Signal<string>;
+    readonly contentClasses: _angular_core.Signal<string>;
+    readonly bodyClasses: _angular_core.Signal<"px-0 pt-1 pb-4 text-base text-gray-600 dark:text-gray-300 leading-relaxed" | "border-t border-gray-200 dark:border-slate-700 px-5 py-4 text-base text-gray-600 dark:text-gray-300 bg-white dark:bg-slate-900 leading-relaxed">;
+    toggle(): void;
     open(): void;
     close(): void;
-    toggle(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionItemComponent, "ol-accordion-item", never, { "itemId": { "alias": "itemId"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "opened": "opened"; "closed": "closed"; }, never, ["[icon]", "*"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlAccordionItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlAccordionItemComponent, "ol-accordion-item", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "itemId": { "alias": "itemId"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "opened": "opened"; "closed": "closed"; }, never, ["*"], true, never>;
 }
 
-declare class AccordionComponent {
-    readonly flush: _angular_core.InputSignal<boolean>;
-    readonly alwaysOpen: _angular_core.InputSignal<boolean>;
-    readonly items: _angular_core.Signal<readonly AccordionItemComponent[]>;
+type AccordionVariant = 'bordered' | 'flush' | 'separated';
+declare class OlAccordionComponent {
+    readonly multiple: _angular_core.InputSignal<boolean>;
+    readonly variant: _angular_core.InputSignal<AccordionVariant>;
+    readonly items: _angular_core.Signal<readonly OlAccordionItemComponent[]>;
+    readonly accordionClasses: _angular_core.Signal<"border border-gray-200 dark:border-slate-700 rounded-xl overflow-hidden bg-white dark:bg-slate-900 shadow-2xs divide-y divide-gray-200 dark:divide-slate-700" | "border-b border-gray-200 dark:border-slate-700 divide-y divide-gray-200 dark:divide-slate-700 bg-transparent" | "space-y-3">;
+    handleItemOpened(openedItem: OlAccordionItemComponent): void;
     /**
-     * Xử lý khi một item con được mở ra
+     * Keyboard navigation
      */
-    handleItemToggle(activeItem: AccordionItemComponent): void;
-    getItem(indexOrId: number | string): AccordionItemComponent | undefined;
+    handleKeyboard(event: KeyboardEvent): void;
+    getItem(indexOrId: number | string): OlAccordionItemComponent | undefined;
     open(indexOrId: number | string): void;
     close(indexOrId: number | string): void;
     toggle(indexOrId: number | string): void;
     openAll(): void;
     closeAll(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionComponent, "ol-accordion", never, { "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "alwaysOpen": { "alias": "alwaysOpen"; "required": false; "isSignal": true; }; }, {}, ["items"], ["*"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlAccordionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlAccordionComponent, "ol-accordion", never, { "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, ["items"], ["*"], true, never>;
+}
+
+type AlertType = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+type AlertVariant$1 = 'subtle' | 'solid' | 'bordered' | 'accent-left';
+type AlertRounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+declare class OlAlertComponent {
+    readonly type: _angular_core.InputSignal<AlertType>;
+    readonly variant: _angular_core.InputSignal<AlertVariant$1>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly icon: _angular_core.InputSignal<string | boolean>;
+    readonly dismissible: _angular_core.InputSignal<boolean>;
+    readonly rounded: _angular_core.InputSignal<AlertRounded>;
+    readonly onDismiss: _angular_core.OutputEmitterRef<void>;
+    readonly visible: _angular_core.WritableSignal<boolean>;
+    readonly showIcon: _angular_core.Signal<boolean>;
+    readonly iconName: _angular_core.Signal<string>;
+    readonly alertClasses: _angular_core.Signal<string>;
+    readonly iconClasses: _angular_core.Signal<string>;
+    readonly closeButtonClasses: _angular_core.Signal<"ms-auto -mx-1.5 -my-1.5 rounded-lg p-1.5 inline-flex items-center justify-center shrink-0 transition-colors focus:outline-none focus:ring-2 text-white/80 hover:text-white hover:bg-white/20 focus:ring-white/50" | "ms-auto -mx-1.5 -my-1.5 rounded-lg p-1.5 inline-flex items-center justify-center shrink-0 transition-colors focus:outline-none focus:ring-2 text-emerald-600 hover:bg-emerald-100 focus:ring-emerald-200 dark:text-emerald-400 dark:hover:bg-emerald-900/30 dark:focus:ring-emerald-800" | "ms-auto -mx-1.5 -my-1.5 rounded-lg p-1.5 inline-flex items-center justify-center shrink-0 transition-colors focus:outline-none focus:ring-2 text-amber-600 hover:bg-amber-100 focus:ring-amber-200 dark:text-amber-400 dark:hover:bg-amber-900/30 dark:focus:ring-amber-800" | "ms-auto -mx-1.5 -my-1.5 rounded-lg p-1.5 inline-flex items-center justify-center shrink-0 transition-colors focus:outline-none focus:ring-2 text-rose-600 hover:bg-rose-100 focus:ring-rose-200 dark:text-rose-400 dark:hover:bg-rose-900/30 dark:focus:ring-rose-800" | "ms-auto -mx-1.5 -my-1.5 rounded-lg p-1.5 inline-flex items-center justify-center shrink-0 transition-colors focus:outline-none focus:ring-2 text-brand-600 hover:bg-brand-100 focus:ring-brand-200 dark:text-brand-400 dark:hover:bg-brand-900/30 dark:focus:ring-brand-800" | "ms-auto -mx-1.5 -my-1.5 rounded-lg p-1.5 inline-flex items-center justify-center shrink-0 transition-colors focus:outline-none focus:ring-2 text-gray-600 hover:bg-gray-100 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-slate-700 dark:focus:ring-slate-600">;
+    private applyColorClasses;
+    private applySubtleColors;
+    private applySolidColors;
+    private applyBorderedColors;
+    dismiss(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlAlertComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlAlertComponent, "ol-alert", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, { "onDismiss": "onDismiss"; }, never, ["*", "[alertActions]"], true, never>;
 }
 
 type AlertColor = 'info' | 'danger' | 'success' | 'warning' | 'dark';
@@ -121,12 +159,56 @@ declare class BadgeComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<BadgeComponent, "ol-badge", never, { "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "rightIcon": { "alias": "rightIcon"; "required": false; "isSignal": true; }; "avatar": { "alias": "avatar"; "required": false; "isSignal": true; }; "avatarText": { "alias": "avatarText"; "required": false; "isSignal": true; }; "secondaryText": { "alias": "secondaryText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; }, { "dismiss": "dismiss"; }, never, ["*"], true, never>;
 }
 
-declare class BannerComponent {
-    readonly position: _angular_core.InputSignal<"bottom" | "top">;
-    readonly dismissed: _angular_core.OutputEmitterRef<void>;
+type BannerVariant = 'brand' | 'gradient' | 'warning' | 'dark' | 'subtle';
+type BannerPosition = 'top-fixed' | 'top-sticky' | 'inline' | 'bottom-floating';
+/**
+ * Banner Component - Full-width announcement component
+ *
+ * @example
+ * ```html
+ * <ol-banner>
+ *   Ôn Luyện ra mắt kho học liệu số mới cho giáo viên
+ * </ol-banner>
+ *
+ * <ol-banner
+ *   variant="gradient"
+ *   [showBadge]="true"
+ *   badgeText="Mới"
+ *   icon="bullhorn">
+ *   Tính năng AI chấm bài tự động đã có mặt!
+ * </ol-banner>
+ *
+ * <ol-banner
+ *   variant="warning"
+ *   position="bottom-floating"
+ *   storageKey="maintenance-2024-09"
+ *   (onDismiss)="handleDismiss()">
+ *   <span>Hệ thống sẽ bảo trì vào 20:00 tối nay</span>
+ *   <button bannerCta class="btn btn-sm btn-warning">
+ *     Gia hạn ngay
+ *   </button>
+ * </ol-banner>
+ * ```
+ */
+declare class OlBannerComponent implements OnInit {
+    readonly variant: _angular_core.InputSignal<BannerVariant>;
+    readonly position: _angular_core.InputSignal<BannerPosition>;
+    readonly storageKey: _angular_core.InputSignal<string>;
+    readonly dismissible: _angular_core.InputSignal<boolean>;
+    readonly showBadge: _angular_core.InputSignal<boolean>;
+    readonly badgeText: _angular_core.InputSignal<string>;
+    readonly icon: _angular_core.InputSignal<string>;
+    readonly onDismiss: _angular_core.OutputEmitterRef<void>;
+    readonly visible: _angular_core.WritableSignal<boolean>;
+    readonly bannerClasses: _angular_core.Signal<string>;
+    readonly badgeClasses: _angular_core.Signal<string>;
+    readonly dismissButtonClasses: _angular_core.Signal<"text-amber-600 hover:bg-amber-100 dark:text-amber-200 dark:hover:bg-amber-900/40" | "text-gray-500 hover:bg-gray-200 dark:text-slate-400 dark:hover:bg-slate-700" | "text-white/70 hover:bg-white/10 hover:text-white">;
+    ngOnInit(): void;
     dismiss(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BannerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BannerComponent, "ol-banner", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; }, never, ["*"], true, never>;
+    private getStoredDismissState;
+    private setStoredDismissState;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlBannerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlBannerComponent, "ol-banner", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "storageKey": { "alias": "storageKey"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "showBadge": { "alias": "showBadge"; "required": false; "isSignal": true; }; "badgeText": { "alias": "badgeText"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, { "onDismiss": "onDismiss"; }, never, ["*", "[bannerCta]"], true, never>;
 }
 
 type BreadcrumbVariant = 'default' | 'background' | 'with-dropdown' | 'with-group-buttons' | 'only-buttons' | 'with-badge';
@@ -342,7 +424,7 @@ declare class DatepickerStateService {
     };
     clear(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatepickerStateService, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DatepickerStateService>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
 }
 
 declare class DatepickerComponent implements ControlValueAccessor {
@@ -365,10 +447,14 @@ declare class DatepickerComponent implements ControlValueAccessor {
     readonly size: _angular_core.InputSignal<DatepickerSize>;
     readonly clearable: _angular_core.InputSignal<boolean>;
     readonly dateChange: _angular_core.OutputEmitterRef<Date | null>;
+    readonly timestampChange: _angular_core.OutputEmitterRef<number | null>;
+    readonly isoChange: _angular_core.OutputEmitterRef<string | null>;
+    readonly formattedChange: _angular_core.OutputEmitterRef<string>;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
     readonly inputValue: _angular_core.WritableSignal<string>;
     private onChange;
     private onTouched;
+    private emitAllChanges;
     constructor();
     readonly inputSizeClasses: _angular_core.Signal<"py-2 px-3 ps-9 text-xs rounded-lg" | "py-3.5 px-4 ps-11 text-base rounded-xl" | "py-2.5 px-3.5 ps-10 text-sm rounded-xl">;
     readonly iconSizeClasses: _angular_core.Signal<"w-3.5 h-3.5 text-gray-500 inset-s-3" | "w-5 h-5 text-gray-500 inset-s-3.5" | "w-4 h-4 text-gray-500 inset-s-3.5">;
@@ -385,7 +471,7 @@ declare class DatepickerComponent implements ControlValueAccessor {
     onDocumentClick(event: MouseEvent): void;
     onEscape(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatepickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerComponent, "ol-datepicker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "daysDisabled": { "alias": "daysDisabled"; "required": false; "isSignal": true; }; "datesDisabled": { "alias": "datesDisabled"; "required": false; "isSignal": true; }; "datesEnabled": { "alias": "datesEnabled"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "dateChange": "dateChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerComponent, "ol-datepicker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "daysDisabled": { "alias": "daysDisabled"; "required": false; "isSignal": true; }; "datesDisabled": { "alias": "datesDisabled"; "required": false; "isSignal": true; }; "datesEnabled": { "alias": "datesEnabled"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "dateChange": "dateChange"; "timestampChange": "timestampChange"; "isoChange": "isoChange"; "formattedChange": "formattedChange"; }, never, never, true, never>;
 }
 
 declare class DateRangePickerComponent implements ControlValueAccessor {
@@ -429,6 +515,8 @@ declare class DateRangePickerComponent implements ControlValueAccessor {
     togglePopup(event?: MouseEvent): void;
     closePopup(): void;
     onValueSelected(val: Date | [Date | null, Date | null]): void;
+    onPopupApply(): void;
+    onPopupCancel(): void;
     onPopupClear(): void;
     onStartInputChange(val: string): void;
     onEndInputChange(val: string): void;
@@ -497,10 +585,17 @@ declare class DatepickerFooterComponent {
     readonly state: DatepickerStateService;
     readonly clearClick: _angular_core.OutputEmitterRef<void>;
     readonly todayClick: _angular_core.OutputEmitterRef<void>;
+    readonly applyClick: _angular_core.OutputEmitterRef<void>;
+    readonly cancelClick: _angular_core.OutputEmitterRef<void>;
+    readonly isRangeMode: _angular_core.Signal<boolean>;
+    readonly rangeSummaryText: _angular_core.Signal<string>;
+    readonly canApply: _angular_core.Signal<boolean>;
     onClear(): void;
     onToday(): void;
+    onApply(): void;
+    onCancel(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatepickerFooterComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerFooterComponent, "ol-datepicker-footer", never, {}, { "clearClick": "clearClick"; "todayClick": "todayClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerFooterComponent, "ol-datepicker-footer", never, {}, { "clearClick": "clearClick"; "todayClick": "todayClick"; "applyClick": "applyClick"; "cancelClick": "cancelClick"; }, never, never, true, never>;
 }
 
 declare class DatepickerPopupComponent {
@@ -510,12 +605,16 @@ declare class DatepickerPopupComponent {
     readonly presets: _angular_core.InputSignal<DatepickerPreset[]>;
     readonly valueChange: _angular_core.OutputEmitterRef<Date | [Date | null, Date | null]>;
     readonly clearClick: _angular_core.OutputEmitterRef<void>;
+    readonly applyClick: _angular_core.OutputEmitterRef<void>;
+    readonly cancelClick: _angular_core.OutputEmitterRef<void>;
     onDaySelected(date: Date): void;
     onFooterToday(): void;
     onFooterClear(): void;
+    onFooterApply(): void;
+    onFooterCancel(): void;
     applyPreset(preset: DatepickerPreset): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatepickerPopupComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerPopupComponent, "ol-datepicker-popup", never, { "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "dualMonth": { "alias": "dualMonth"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "clearClick": "clearClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerPopupComponent, "ol-datepicker-popup", never, { "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "dualMonth": { "alias": "dualMonth"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "clearClick": "clearClick"; "applyClick": "applyClick"; "cancelClick": "cancelClick"; }, never, never, true, never>;
 }
 
 declare const WEEKDAYS_SHORT_VI: string[];
@@ -951,6 +1050,12 @@ declare class RichTextEditorComponent {
 type TimepickerFormat = '24h' | '12h';
 type TimepickerSize = 'sm' | 'md' | 'lg';
 type TimepickerState = 'default' | 'error' | 'success';
+interface TimeObject {
+    hour: number;
+    minute: number;
+    period?: 'AM' | 'PM';
+    formatted: string;
+}
 declare class TimepickerComponent implements ControlValueAccessor {
     private readonly elementRef;
     readonly value: _angular_core.ModelSignal<string>;
@@ -968,6 +1073,9 @@ declare class TimepickerComponent implements ControlValueAccessor {
     readonly id: _angular_core.InputSignal<string>;
     readonly minuteStep: _angular_core.InputSignal<number>;
     readonly showPresets: _angular_core.InputSignal<boolean>;
+    readonly addonType: _angular_core.InputSignal<"none" | "left" | "right">;
+    readonly addonText: _angular_core.InputSignal<string>;
+    readonly addonIcon: _angular_core.InputSignal<string>;
     private readonly generatedId;
     protected readonly inputId: _angular_core.Signal<string>;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
@@ -978,11 +1086,19 @@ declare class TimepickerComponent implements ControlValueAccessor {
     readonly hours24: number[];
     readonly hours12: number[];
     readonly minutes: number[];
+    readonly hourContainerRef: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    readonly minuteContainerRef: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    readonly timeChange: _angular_core.OutputEmitterRef<string>;
+    readonly timestampChange: _angular_core.OutputEmitterRef<number | null>;
+    readonly isoChange: _angular_core.OutputEmitterRef<string | null>;
+    readonly timeObjectChange: _angular_core.OutputEmitterRef<TimeObject | null>;
     private onChange;
     private onTouched;
+    private emitAllChanges;
     constructor(elementRef: ElementRef);
     onDocumentClick(event: MouseEvent): void;
     toggleDropdown(): void;
+    private scrollToSelected;
     private parseCurrentValue;
     selectHour(h: number): void;
     selectMinute(m: number): void;
@@ -998,7 +1114,7 @@ declare class TimepickerComponent implements ControlValueAccessor {
     registerOnTouched(fn: any): void;
     setDisabledState?(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TimepickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimepickerComponent, "ol-timepicker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "showPresets": { "alias": "showPresets"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimepickerComponent, "ol-timepicker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "showPresets": { "alias": "showPresets"; "required": false; "isSignal": true; }; "addonType": { "alias": "addonType"; "required": false; "isSignal": true; }; "addonText": { "alias": "addonText"; "required": false; "isSignal": true; }; "addonIcon": { "alias": "addonIcon"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "timeChange": "timeChange"; "timestampChange": "timestampChange"; "isoChange": "isoChange"; "timeObjectChange": "timeObjectChange"; }, never, never, true, never>;
 }
 
 type AutocompleteSize = 'sm' | 'md' | 'lg';
@@ -1276,25 +1392,216 @@ declare class SidebarSubmenuComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarSubmenuComponent, "ol-sidebar-submenu", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeTheme": { "alias": "badgeTheme"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; }, never, ["*"], true, never>;
 }
 
-declare class SkeletonComponent {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonComponent, "ol-skeleton", never, {}, {}, never, never, true, never>;
+/**
+ * OlSkeleton - Loading placeholder component
+ *
+ * Hiển thị skeleton loader cho content đang tải với nhiều variants và animations
+ *
+ * @example
+ * // Text skeleton
+ * <ol-skeleton type="text" />
+ *
+ * // Avatar skeleton
+ * <ol-skeleton type="avatar" rounded="full" />
+ *
+ * // Card skeleton
+ * <ol-skeleton type="card" height="200px" />
+ *
+ * // Multiple text lines
+ * @for (i of [1,2,3,4]; track i) {
+ *   <ol-skeleton type="text" [width]="i === 4 ? '60%' : '100%'" />
+ * }
+ */
+declare class OlSkeletonComponent {
+    /**
+     * Loại skeleton
+     * - text: Thanh ngang cho text line
+     * - avatar: Hình tròn cho avatar
+     * - card: Khối chữ nhật cho card
+     * - button: Nhỏ hơn cho button
+     * - image: Tỷ lệ 16:9 hoặc 4:3
+     * - custom: Tùy chỉnh width/height
+     */
+    type: _angular_core.InputSignal<"image" | "custom" | "avatar" | "button" | "text" | "card">;
+    /**
+     * Chiều rộng của skeleton
+     * Mặc định: 100% (hoặc theo preset của type)
+     */
+    width: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Chiều cao của skeleton
+     * Mặc định: theo preset của type
+     */
+    height: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Bo tròn góc
+     * - none: rounded-none
+     * - sm: rounded-sm
+     * - md: rounded-md (default)
+     * - lg: rounded-lg
+     * - xl: rounded-xl
+     * - full: rounded-full (cho avatar)
+     */
+    rounded: _angular_core.InputSignal<"sm" | "md" | "lg" | "xl" | "none" | "full">;
+    /**
+     * Loại animation
+     * - pulse: Nhấp nháy opacity (default)
+     * - wave: Gradient di chuyển ngang
+     * - none: Static không animation
+     */
+    animation: _angular_core.InputSignal<"none" | "pulse" | "wave">;
+    /**
+     * Aspect ratio cho image type
+     * - 16/9: Landscape (default)
+     * - 4/3: Standard
+     */
+    aspectRatio: _angular_core.InputSignal<"16/9" | "4/3">;
+    /**
+     * Computed classes cho skeleton
+     */
+    skeletonClasses: _angular_core.Signal<string>;
+    /**
+     * Computed styles cho skeleton
+     */
+    skeletonStyles: _angular_core.Signal<Record<string, string>>;
+    /**
+     * Get rounded class based on type and input
+     */
+    private getRoundedClass;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlSkeletonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlSkeletonComponent, "ol-skeleton", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "animation": { "alias": "animation"; "required": false; "isSignal": true; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class SpeedDialComponent {
-    readonly isOpen: _angular_core.ModelSignal<boolean>;
+type SpeedDialDirection = 'top' | 'bottom' | 'left' | 'right';
+type SpeedDialType = 'default' | 'rounded' | 'menu';
+type SpeedDialTrigger = 'click' | 'hover';
+type SpeedDialColor = 'brand' | 'neutral' | 'success' | 'danger' | 'warning';
+interface SpeedDialAction {
+    id?: string;
+    label: string;
+    icon?: string;
+    svgPath?: string;
+    tooltip?: string;
+    disabled?: boolean;
+    class?: string;
+    onClick?: () => void;
+}
+
+declare class OlSpeedDialComponent {
+    private readonly elementRef;
+    direction: _angular_core.InputSignal<SpeedDialDirection>;
+    type: _angular_core.InputSignal<SpeedDialType>;
+    trigger: _angular_core.InputSignal<SpeedDialTrigger>;
+    color: _angular_core.InputSignal<SpeedDialColor>;
+    icon: _angular_core.InputSignal<string>;
+    ariaLabel: _angular_core.InputSignal<string>;
+    tooltip: _angular_core.InputSignal<string | undefined>;
+    disabled: _angular_core.InputSignal<boolean>;
+    backdrop: _angular_core.InputSignal<boolean>;
+    closeOnClickOutside: _angular_core.InputSignal<boolean>;
+    closeOnEscape: _angular_core.InputSignal<boolean>;
+    actions: _angular_core.InputSignal<SpeedDialAction[]>;
+    customClass: _angular_core.InputSignal<string>;
+    isOpen: _angular_core.ModelSignal<boolean>;
+    onOpen: _angular_core.OutputEmitterRef<void>;
+    onClose: _angular_core.OutputEmitterRef<void>;
+    actionClick: _angular_core.OutputEmitterRef<SpeedDialAction>;
+    private hoverTimeout?;
+    containerClasses: _angular_core.Signal<string>;
+    itemsContainerClasses: _angular_core.Signal<string>;
+    triggerButtonClasses: _angular_core.Signal<string>;
+    tooltipPositionForItems: _angular_core.Signal<"left" | "top">;
     toggle(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SpeedDialComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SpeedDialComponent, "ol-speed-dial", never, { "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; }, never, ["*"], true, never>;
+    open(): void;
+    close(): void;
+    handleAction(action: SpeedDialAction, event: MouseEvent): void;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    onBackdropMouseEnter(): void;
+    onDocumentClick(event: MouseEvent): void;
+    onEscape(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlSpeedDialComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlSpeedDialComponent, "ol-speed-dial", never, { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; "closeOnClickOutside": { "alias": "closeOnClickOutside"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "customClass": { "alias": "class"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "onOpen": "onOpen"; "onClose": "onClose"; "actionClick": "actionClick"; }, never, ["*"], true, never>;
+}
+
+declare class OlSpeedDialItemComponent {
+    label: _angular_core.InputSignal<string>;
+    icon: _angular_core.InputSignal<string | undefined>;
+    tooltip: _angular_core.InputSignal<string | undefined>;
+    tooltipPosition: _angular_core.InputSignal<"left" | "right" | "top" | "bottom">;
+    disabled: _angular_core.InputSignal<boolean>;
+    type: _angular_core.InputSignal<SpeedDialType>;
+    customClass: _angular_core.InputSignal<string>;
+    onClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    handleClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlSpeedDialItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlSpeedDialItemComponent, "ol-speed-dial-item", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "customClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["*"], true, never>;
 }
 
-type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type SpinnerColor = 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple';
-declare class SpinnerComponent {
-    readonly size: _angular_core.InputSignal<SpinnerSize>;
-    readonly color: _angular_core.InputSignal<SpinnerColor>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SpinnerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SpinnerComponent, "ol-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+/**
+ * OlSpinner - Loading spinner component
+ *
+ * Hiển thị loading indicator với nhiều variants và sizes
+ *
+ * @example
+ * // Circle spinner (default)
+ * <ol-spinner />
+ *
+ * // Dots spinner
+ * <ol-spinner variant="dots" size="lg" color="brand" />
+ *
+ * // Pulse spinner
+ * <ol-spinner variant="pulse" size="xl" color="success" />
+ */
+declare class OlSpinnerComponent {
+    /**
+     * Variant của spinner
+     * - circle: Vòng tròn xoay với viền khuyết (default)
+     * - dots: 3 chấm tròn nhấp nhô
+     * - pulse: Hình tròn nhấp nháy scale
+     */
+    variant: _angular_core.InputSignal<"circle" | "pulse" | "dots">;
+    /**
+     * Kích thước spinner
+     * - xs: 12px (w-3 h-3)
+     * - sm: 16px (w-4 h-4)
+     * - md: 24px (w-6 h-6) - default
+     * - lg: 36px (w-9 h-9)
+     * - xl: 48px (w-12 h-12)
+     */
+    size: _angular_core.InputSignal<"xs" | "sm" | "md" | "lg" | "xl">;
+    /**
+     * Màu sắc của spinner
+     * - brand: border-brand-600 (default)
+     * - white: border-white
+     * - success: border-emerald-600
+     * - warning: border-amber-500
+     * - danger: border-rose-600
+     * - gray: border-gray-400
+     */
+    color: _angular_core.InputSignal<"brand" | "danger" | "success" | "warning" | "white" | "gray">;
+    /**
+     * Aria label cho accessibility
+     */
+    ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Computed classes cho spinner container
+     */
+    spinnerClasses: _angular_core.Signal<string>;
+    /**
+     * Computed classes cho size
+     */
+    sizeClasses: _angular_core.Signal<"w-4 h-4" | "w-6 h-6" | "w-12 h-12" | "w-3 h-3" | "w-9 h-9">;
+    /**
+     * Computed classes cho dots
+     */
+    dotClasses: _angular_core.Signal<string>;
+    /**
+     * Computed classes cho pulse
+     */
+    pulseClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlSpinnerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlSpinnerComponent, "ol-spinner", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class TableComponent {
@@ -1383,6 +1690,76 @@ declare class ToastComponent implements OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToastComponent, "ol-toast", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "duration": { "alias": "duration"; "required": false; "isSignal": true; }; "isVisible": { "alias": "isVisible"; "required": false; "isSignal": true; }; }, { "isVisible": "isVisibleChange"; "closed": "closed"; }, never, ["*"], true, never>;
 }
 
+interface ToastConfig {
+    id?: string;
+    type?: 'success' | 'danger' | 'warning' | 'info' | 'neutral';
+    title?: string;
+    message: string;
+    duration?: number;
+    position?: ToastPosition;
+    actionLabel?: string;
+    onAction?: () => void;
+    showProgress?: boolean;
+    avatar?: string;
+    icon?: string | boolean;
+    dismissible?: boolean;
+}
+type ToastPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
+interface Toast extends ToastConfig {
+    id: string;
+    createdAt: number;
+}
+
+declare class OlToastService {
+    private toasts;
+    private maxToasts;
+    private defaultDuration;
+    readonly toasts$: _angular_core.Signal<Toast[]>;
+    show(config: ToastConfig): string;
+    success(message: string, config?: Partial<ToastConfig>): string;
+    error(message: string, config?: Partial<ToastConfig>): string;
+    warning(message: string, config?: Partial<ToastConfig>): string;
+    info(message: string, config?: Partial<ToastConfig>): string;
+    dismiss(id: string): void;
+    clear(position?: ToastPosition): void;
+    private addToast;
+    private scheduleAutoDismiss;
+    private generateId;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlToastService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+
+declare class OlToastComponent implements OnInit, OnDestroy {
+    config: _angular_core.InputSignal<Toast>;
+    dismiss: _angular_core.OutputEmitterRef<void>;
+    progress: _angular_core.WritableSignal<number>;
+    private progressInterval?;
+    private isPaused;
+    toastClasses: _angular_core.Signal<string>;
+    showIcon: _angular_core.Signal<boolean>;
+    iconName: _angular_core.Signal<string>;
+    iconClasses: _angular_core.Signal<string>;
+    progressBarClasses: _angular_core.Signal<string>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    handleDismiss(): void;
+    handleAction(): void;
+    private startProgress;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlToastComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlToastComponent, "ol-toast", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; }, { "dismiss": "dismiss"; }, never, never, true, never>;
+}
+
+declare class OlToastContainerComponent {
+    toastService: OlToastService;
+    positions: ToastPosition[];
+    getToastsByPosition(position: ToastPosition): _edmicro_olkit.Toast[];
+    getContainerClasses(position: ToastPosition): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlToastContainerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlToastContainerComponent, "ol-toast-container", never, {}, {}, never, never, true, never>;
+}
+
 type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
 type TooltipTrigger = 'hover' | 'click';
 type TooltipTheme = 'dark' | 'light';
@@ -1406,6 +1783,120 @@ declare class TooltipComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TooltipComponent, "ol-tooltip", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; }, never, ["*"], true, never>;
 }
 
+/**
+ * Tooltip Directive
+ * Provides accessible tooltips with Floating UI positioning
+ *
+ * @example
+ * ```html
+ * <button olTooltip="Lưu câu hỏi">
+ *   <ol-icon name="save" />
+ * </button>
+ *
+ * <span olTooltip="Điểm cao nhất" tooltipPosition="bottom">9.5/10</span>
+ *
+ * <div olTooltip="Thông tin" tooltipTheme="light">Hover me</div>
+ * ```
+ */
+declare class OlTooltipDirective implements OnDestroy {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly appRef;
+    private readonly injector;
+    private readonly positioningService;
+    /** Tooltip content */
+    olTooltip: _angular_core.InputSignal<string>;
+    /** Tooltip position */
+    tooltipPosition: _angular_core.InputSignal<"left" | "right" | "top" | "bottom">;
+    /** Tooltip theme */
+    tooltipTheme: _angular_core.InputSignal<"brand" | "dark" | "light">;
+    /** Delay before showing tooltip (ms) */
+    tooltipDelay: _angular_core.InputSignal<number>;
+    /** Disable tooltip */
+    tooltipDisabled: _angular_core.InputSignal<boolean>;
+    /** Show arrow */
+    tooltipArrow: _angular_core.InputSignal<boolean>;
+    private showTimeout?;
+    private hideTimeout?;
+    private touchTimeout?;
+    private tooltipComponent?;
+    private tooltipElement?;
+    private cleanupAutoUpdate?;
+    private tooltipId;
+    private mouseEnterListener?;
+    private mouseLeaveListener?;
+    private focusListener?;
+    private blurListener?;
+    private touchStartListener?;
+    private touchEndListener?;
+    constructor();
+    ngOnDestroy(): void;
+    /**
+     * Setup event listeners for tooltip triggers
+     */
+    private setupListeners;
+    /**
+     * Remove event listeners
+     */
+    private removeListeners;
+    /**
+     * Schedule tooltip show with delay
+     */
+    private scheduleShow;
+    /**
+     * Schedule tooltip hide with delay
+     */
+    private scheduleHide;
+    /**
+     * Show tooltip
+     */
+    private show;
+    /**
+     * Hide tooltip
+     */
+    private hide;
+    /**
+     * Destroy tooltip component
+     */
+    private destroyTooltip;
+    /**
+     * Position tooltip using Floating UI
+     */
+    private positionTooltip;
+    /**
+     * Cleanup all resources
+     */
+    private cleanup;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlTooltipDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<OlTooltipDirective, "[olTooltip]", never, { "olTooltip": { "alias": "olTooltip"; "required": true; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; "tooltipTheme": { "alias": "tooltipTheme"; "required": false; "isSignal": true; }; "tooltipDelay": { "alias": "tooltipDelay"; "required": false; "isSignal": true; }; "tooltipDisabled": { "alias": "tooltipDisabled"; "required": false; "isSignal": true; }; "tooltipArrow": { "alias": "tooltipArrow"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Internal Tooltip Component
+ * Renders the actual tooltip content with theme and arrow support
+ * Used internally by OlTooltipDirective
+ */
+declare class OlTooltipComponent {
+    /** Tooltip content text */
+    content: _angular_core.InputSignal<string>;
+    /** Theme variant */
+    theme: _angular_core.InputSignal<"brand" | "dark" | "light">;
+    /** Tooltip ID for ARIA */
+    tooltipId: _angular_core.InputSignal<string>;
+    /** Show arrow */
+    arrow: _angular_core.InputSignal<boolean>;
+    /**
+     * Computed tooltip classes based on theme
+     */
+    tooltipClasses: _angular_core.Signal<string>;
+    /**
+     * Computed arrow classes based on theme
+     */
+    arrowClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlTooltipComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTooltipComponent, "ol-tooltip-internal", never, { "content": { "alias": "content"; "required": true; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "tooltipId": { "alias": "tooltipId"; "required": false; "isSignal": true; }; "arrow": { "alias": "arrow"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | number;
 type IconColor = 'current' | 'brand' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'white' | 'muted' | string;
 type IconVariant = 'linear' | 'bold' | 'line-duotone' | 'file-type' | 'brand' | 'custom' | string;
@@ -1452,7 +1943,8 @@ declare class OlIconService {
      */
     private loadManifest;
     /**
-     * Lấy SVG SafeHtml tức thì đồng bộ 0ms từ In-Memory Pre-bundled Registry
+     * Lấy SVG SafeHtml tức thì đồng bộ 0ms từ In-Memory Pre-bundled Registry (OL_ICONS)
+     * Tất cả icons được lưu trong OL_ICONS (icons.data.ts) - nguồn dữ liệu duy nhất, hỗ trợ tree-shaking.
      */
     getIconSync(name: string, variant?: string): SafeHtml | null;
     /**
@@ -1460,13 +1952,17 @@ declare class OlIconService {
      */
     getIcon(name: string, variant?: string): Observable<SafeHtml | null>;
     private fetchIconSvg;
-    private readonly builtinSvgMap;
+    /**
+     * Alias map: ánh xạ tên icon thay thế sang tên chuẩn trong OL_ICONS.
+     * Các icons trong builtinSvgMap cũ đã được hợp nhất trực tiếp vào OL_ICONS (icons.data.ts)
+     * để chuẩn hoá về một nguồn dữ liệu duy nhất, hỗ trợ tree-shaking.
+     */
     private readonly aliasMap;
     private getCandidateUrls;
     private normalizeKey;
     private cleanSvg;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlIconService, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<OlIconService>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
 }
 
 /**
@@ -1503,7 +1999,7 @@ declare class BottomNavComponent {
     readonly bordered: _angular_core.InputSignal<boolean>;
     readonly shadow: _angular_core.InputSignal<boolean>;
     readonly safeArea: _angular_core.InputSignal<boolean>;
-    readonly position: _angular_core.InputSignal<"relative" | "fixed">;
+    readonly position: _angular_core.InputSignal<"fixed" | "relative">;
     readonly navClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BottomNavComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<BottomNavComponent, "ol-bottom-nav", never, { "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "shadow": { "alias": "shadow"; "required": false; "isSignal": true; }; "safeArea": { "alias": "safeArea"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -1568,6 +2064,493 @@ declare class StepperComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StepperComponent, "ol-stepper", never, { "currentStep": { "alias": "currentStep"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "breakpoint": { "alias": "breakpoint"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "currentStep": "currentStepChange"; "stepChange": "stepChange"; }, ["steps"], ["*"], true, never>;
 }
 
-export { AccordionComponent, AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BannerComponent, BottomNavComponent, BottomNavItemComponent, BreadcrumbComponent, BreadcrumbItemComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CarouselComponent, CarouselSlideComponent, CheckboxComponent, ClipboardComponent, CollapseComponent, DateRangePickerComponent, DatepickerComponent, DatepickerDirective, DatepickerFooterComponent, DatepickerHeaderComponent, DatepickerPopupComponent, DatepickerStateService, DayViewComponent, DownloadAppButtonComponent, DrawerComponent, DropdownComponent, DropdownItemComponent, FileInputComponent, FloatingLabelComponent, FooterComponent, IconComponent, IconShapeComponent, InputComponent, InputCounterComponent, KbdComponent, ListGroupComponent, ListGroupItemComponent, MONTHS_FULL_EN, MONTHS_FULL_VI, MONTHS_SHORT_VI, ModalComponent, MonthViewComponent, NavDropdownComponent, NavbarComponent, NavbarItemComponent, OL_ICONS, OlIconService, OtpInputComponent, PaginationComponent, PopoverComponent, ProgressComponent, RadioComponent, RangeComponent, RatingComponent, RichTextEditorComponent, SelectComponent, SidebarComponent, SidebarGroupComponent, SidebarItemComponent, SidebarSubmenuComponent, SkeletonComponent, SpeedDialComponent, SpinnerComponent, StepItemComponent, StepperComponent, TabItemComponent, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, TimelineComponent, TimelineItemComponent, TimepickerComponent, ToastComponent, ToggleComponent, TooltipComponent, WEEKDAYS_SHORT_EN, WEEKDAYS_SHORT_VI, YearViewComponent, cloneDate, endOfDay, formatDate, generateMonthMatrix, generateMonthsMatrix, generateYearsMatrix, isBetween, isDateDisabled, isSameDay, isSameMonth, isSameYear, isToday, parseDate, startOfDay };
-export type { AlertColor, AlertVariant, AppDevice, AppTheme, AutocompleteOption, AutocompleteSize, AutocompleteState, AvatarShape, AvatarSize, AvatarStatus, BadgeShape, BadgeSize, BadgeTheme, BadgeType, BreadcrumbItemStatus, BreadcrumbSeparator, BreadcrumbVariant, ButtonColor, ButtonGroupColor, ButtonGroupOrientation, ButtonGroupSize, ButtonSize, CardPadding, CardRadius, CardShadow, CardVariant, CheckboxSize, DateCustomClass, DateRange, DatepickerPreset, DatepickerSelectionMode, DatepickerSize, DatepickerViewMode, DayCell, DrawerPlacement, DropdownAutoClose, DropdownPlacement, DropdownTrigger, FileInputSize, FloatingLabelSize, FloatingLabelState, FloatingLabelVariant, IconColor, IconDefinition, IconManifestEntry, IconShapeColor, IconShapeSize, IconShapeType, IconSize, IconVariant, InputCounterSize, InputSize, InputState, ModalPlacement, ModalSize, MonthCell, PaginationType, PaginationVariant, PopoverPlacement, ProgressColor, ProgressSize, RadioSize, SelectOption, SelectSize, SelectState, SpinnerColor, SpinnerSize, StepState, StepperBreakpoint, StepperOrientation, StepperVariant, TabsSize, TabsVariant, TextareaState, TimepickerFormat, TimepickerSize, TimepickerState, ToastType, ToggleColor, ToggleSize, TooltipPlacement, TooltipTheme, TooltipTrigger, YearCell };
+interface OlTreeNode {
+    id: string;
+    label: string;
+    icon?: string;
+    count?: number;
+    badge?: string;
+    badgeTheme?: 'brand' | 'green' | 'yellow' | 'red' | 'gray';
+    children?: OlTreeNode[];
+    expanded?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    data?: any;
+}
+
+declare class TreeComponent {
+    readonly nodes: _angular_core.ModelSignal<OlTreeNode[]>;
+    readonly checkable: _angular_core.InputSignal<boolean>;
+    readonly selectionMode: _angular_core.InputSignal<"single" | "multiple">;
+    readonly bordered: _angular_core.InputSignal<boolean>;
+    readonly toggleIcon: _angular_core.InputSignal<"plus-minus" | "chevron">;
+    readonly nodeSelect: _angular_core.OutputEmitterRef<OlTreeNode>;
+    readonly nodeCheck: _angular_core.OutputEmitterRef<{
+        node: OlTreeNode;
+        checked: boolean;
+    }>;
+    handleNodeClick(node: OlTreeNode): void;
+    handleNodeCheck(event: {
+        node: OlTreeNode;
+        checked: boolean;
+    }): void;
+    handleToggleExpand(node: OlTreeNode): void;
+    private updateNodeCheckCascade;
+    private updateNodeExpanded;
+    private setAllDescendantsSelected;
+    private setSelectedNodeSingle;
+    private cloneTree;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TreeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TreeComponent, "ol-tree", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "checkable": { "alias": "checkable"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "toggleIcon": { "alias": "toggleIcon"; "required": false; "isSignal": true; }; }, { "nodes": "nodesChange"; "nodeSelect": "nodeSelect"; "nodeCheck": "nodeCheck"; }, never, never, true, never>;
+}
+
+declare class TreeNodeComponent {
+    readonly node: _angular_core.InputSignal<OlTreeNode>;
+    readonly checkable: _angular_core.InputSignal<boolean>;
+    readonly selectionMode: _angular_core.InputSignal<"single" | "multiple">;
+    readonly toggleIcon: _angular_core.InputSignal<"plus-minus" | "chevron">;
+    readonly level: _angular_core.InputSignal<number>;
+    readonly nodeClick: _angular_core.OutputEmitterRef<OlTreeNode>;
+    readonly nodeCheck: _angular_core.OutputEmitterRef<{
+        node: OlTreeNode;
+        checked: boolean;
+    }>;
+    readonly toggleExpand: _angular_core.OutputEmitterRef<OlTreeNode>;
+    handleToggle(event: MouseEvent): void;
+    handleClick(): void;
+    handleCheck(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TreeNodeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TreeNodeComponent, "ol-tree-node", never, { "node": { "alias": "node"; "required": true; "isSignal": true; }; "checkable": { "alias": "checkable"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "toggleIcon": { "alias": "toggleIcon"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; }, { "nodeClick": "nodeClick"; "nodeCheck": "nodeCheck"; "toggleExpand": "toggleExpand"; }, never, never, true, never>;
+}
+
+type ChartType = 'line' | 'smooth-line' | 'area' | 'smooth-area' | 'step-line' | 'bar' | 'stacked-bar' | 'horizontal-bar' | 'stacked-horizontal-bar' | 'diverging-bar' | 'pie' | 'donut' | 'rose' | 'radar' | 'gauge' | 'radial' | 'scatter' | 'heatmap' | 'boxplot';
+/** Cấu hình chuỗi dữ liệu (Dành cho Line, Bar, Stacked Bar, Area, Radar) */
+interface ChartSeries {
+    /** Tên chuỗi hiển thị trên Legend và Tooltip */
+    name: string;
+    /** Mảng giá trị tương ứng từng danh mục (categories) */
+    data: number[];
+    /** Màu sắc đặc trưng cho chuỗi (mã HEX, HSL hoặc tên biến CSS) */
+    color?: string;
+    /** Độ dày nét vẽ cho biểu đồ đường (mặc định 2.5) */
+    strokeWidth?: number;
+    /** Nét đứt (ví dụ: '4 4') */
+    strokeDasharray?: string;
+}
+/** Cấu hình phân đoạn điểm dữ liệu (Dành cho Pie, Donut, Rose, Gauge) */
+interface ChartDataPoint {
+    /** Nhãn mô tả phân đoạn */
+    label: string;
+    /** Giá trị số của phân đoạn */
+    value: number;
+    /** Màu sắc phân đoạn (nếu không cung cấp sẽ lấy theo bảng màu mặc định) */
+    color?: string;
+    /** Chú thích bổ sung hiển thị trên tooltip hoặc legend */
+    subLabel?: string;
+}
+/** Cấu hình trục đánh giá đa chiều cho biểu đồ Radar */
+interface RadarIndicator {
+    /** Tên tiêu chí đánh giá (ví dụ: 'Tư duy logic', 'Tính toán nhanh') */
+    name: string;
+    /** Giá trị tối đa của thang điểm (mặc định: 100) */
+    max?: number;
+}
+/** Điểm dữ liệu toạ độ cho biểu đồ phân tán Scatter */
+interface ScatterDataPoint {
+    /** Toạ độ trục hoành (X) */
+    x: number;
+    /** Toạ độ trục tung (Y) */
+    y: number;
+    /** Kích thước điểm tròn (mặc định 6) */
+    size?: number;
+    /** Nhãn tên của đối tượng dữ liệu */
+    label?: string;
+    /** Màu sắc riêng của điểm */
+    color?: string;
+}
+/** Chuỗi dữ liệu phân tán */
+interface ScatterSeries {
+    /** Tên nhóm phân tán */
+    name: string;
+    /** Danh sách các điểm toạ độ */
+    data: ScatterDataPoint[];
+    /** Màu mặc định của nhóm */
+    color?: string;
+}
+/** Dữ liệu bản đồ nhiệt Heatmap theo ma trận 2 chiều */
+interface HeatmapData {
+    /** Danh sách nhãn cột (Trục X: ví dụ thứ trong tuần T2 -> CN) */
+    xLabels: string[];
+    /** Danh sách nhãn hàng (Trục Y: ví dụ khung giờ 08:00, 12:00, 18:00...) */
+    yLabels: string[];
+    /** Ma trận giá trị [hàng][cột] tương ứng yLabels x xLabels */
+    matrix: number[][];
+    /** Giá trị nhỏ nhất thang đo nhiệt (mặc định: 0) */
+    min?: number;
+    /** Giá trị lớn nhất thang đo nhiệt (mặc định: tự động tính) */
+    max?: number;
+    /** Đơn vị đo hiển thị khi hover tooltip (ví dụ: 'lượt', 'câu', 'phút') */
+    unit?: string;
+}
+/** Điểm dữ liệu biểu đồ hộp Boxplot (Thống kê phân vị điểm số) */
+interface BoxplotDataPoint {
+    /** Nhãn nhóm (ví dụ: 'Lớp 12A1', 'Đề số 01') */
+    label: string;
+    /** Giá trị nhỏ nhất */
+    min: number;
+    /** Tứ phân vị thứ nhất (Q1 - 25%) */
+    q1: number;
+    /** Trung vị (Median - 50%) */
+    median: number;
+    /** Tứ phân vị thứ ba (Q3 - 75%) */
+    q3: number;
+    /** Giá trị lớn nhất */
+    max: number;
+    /** Các điểm ngoại lai (nếu có) */
+    outliers?: number[];
+    /** Màu sắc biểu diễn hộp */
+    color?: string;
+}
+
+declare class ChartComponent {
+    /** Chủng loại biểu đồ */
+    readonly type: _angular_core.InputSignal<ChartType>;
+    /** Tiêu đề chính */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Tiêu đề phụ / mô tả */
+    readonly subtitle: _angular_core.InputSignal<string>;
+    /** Danh sách nhãn phân loại trục hoành */
+    readonly categories: _angular_core.InputSignal<string[]>;
+    /** Chuỗi dữ liệu số (Line, Bar, Stacked, Area, Radar) */
+    readonly series: _angular_core.InputSignal<ChartSeries[]>;
+    /** Dữ liệu phân đoạn (Pie, Donut, Rose) */
+    readonly dataPoints: _angular_core.InputSignal<ChartDataPoint[]>;
+    /** Chỉ số đa chiều (Radar) */
+    readonly indicators: _angular_core.InputSignal<RadarIndicator[]>;
+    /** Chuỗi dữ liệu phân tán (Scatter) */
+    readonly scatterSeries: _angular_core.InputSignal<ScatterSeries[]>;
+    /** Ma trận nhiệt độ dữ liệu (Heatmap) */
+    readonly heatmapData: _angular_core.InputSignal<HeatmapData | null>;
+    /** Dữ liệu biểu đồ hộp (Boxplot) */
+    readonly boxplotData: _angular_core.InputSignal<BoxplotDataPoint[]>;
+    /** Giá trị đo lường tiến độ (Gauge / Radial) */
+    readonly value: _angular_core.InputSignal<number>;
+    /** Giá trị tối đa (Gauge / Radial) */
+    readonly max: _angular_core.InputSignal<number>;
+    /** Chiều cao khung biểu đồ (px) */
+    readonly height: _angular_core.InputSignal<number>;
+    /** Hiển thị chú thích bảng màu (Legend) */
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    /** Hiển thị đường gióng toạ độ (Grid) */
+    readonly showGrid: _angular_core.InputSignal<boolean>;
+    /** Tiêu đề nhãn trục hoành (X-Axis) - ví dụ: "Thời gian", "Tháng", "Số phút" */
+    readonly xAxisTitle: _angular_core.InputSignal<string>;
+    /** Tiêu đề nhãn trục tung (Y-Axis) - ví dụ: "Điểm số", "Số lượng (câu)", "Tỷ lệ (%)" */
+    readonly yAxisTitle: _angular_core.InputSignal<string>;
+    /** Đơn vị hiển thị sau số liệu */
+    readonly unit: _angular_core.InputSignal<string>;
+    readonly defaultPalette: string[];
+    readonly activeTooltip: _angular_core.WritableSignal<{
+        x: number;
+        y: number;
+        title: string;
+        items: {
+            label: string;
+            value: string | number;
+            color?: string;
+        }[];
+    } | null>;
+    readonly hiddenItems: _angular_core.WritableSignal<Set<string>>;
+    toggleLegendItem(name: string): void;
+    isItemHidden(name: string): boolean;
+    readonly seriesLegendList: _angular_core.Signal<{
+        name: string;
+        color: string;
+        hidden: boolean;
+    }[]>;
+    readonly radarLegendList: _angular_core.Signal<{
+        name: string;
+        color: string;
+        hidden: boolean;
+    }[]>;
+    readonly scatterLegendList: _angular_core.Signal<{
+        name: string;
+        color: string;
+        hidden: boolean;
+    }[]>;
+    readonly yAxisMin: _angular_core.Signal<number>;
+    readonly yAxisMax: _angular_core.Signal<number>;
+    readonly yGridSteps: _angular_core.Signal<number[]>;
+    readonly svgWidth = 560;
+    readonly svgHeight = 230;
+    readonly padding: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    readonly innerWidth: _angular_core.Signal<number>;
+    readonly innerHeight: _angular_core.Signal<number>;
+    readonly linePaths: _angular_core.Signal<{
+        name: string;
+        color: string;
+        strokeWidth: number;
+        strokeDasharray: string | undefined;
+        linePathD: string;
+        areaPathD: string;
+        points: {
+            x: number;
+            y: number;
+            value: number;
+            category: string;
+        }[];
+    }[]>;
+    private getSmoothSvgPath;
+    readonly columnsComputed: _angular_core.Signal<{
+        categories: {
+            label: string;
+            displayLabel: string;
+            centerX: number;
+        }[];
+        bars: {
+            categoryIndex: number;
+            seriesIndex: number;
+            name: string;
+            value: number;
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+            color: string;
+        }[];
+    }>;
+    readonly stackedColumnsComputed: _angular_core.Signal<{
+        categories: {
+            label: string;
+            displayLabel: string;
+            centerX: number;
+        }[];
+        segments: {
+            categoryIndex: number;
+            seriesIndex: number;
+            name: string;
+            value: number;
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+            color: string;
+        }[];
+    }>;
+    readonly totalDonutValue: _angular_core.Signal<number>;
+    readonly donutSegments: _angular_core.Signal<{
+        label: string;
+        value: number;
+        percentage: number;
+        color: string;
+        strokeDasharray: string;
+        strokeDashoffset: number;
+    }[]>;
+    readonly pieSlices: _angular_core.Signal<{
+        label: string;
+        value: number;
+        percentage: number;
+        color: string;
+        pathD: string;
+    }[]>;
+    readonly pieBreakdownItems: _angular_core.Signal<{
+        label: string;
+        value: number;
+        percentage: number;
+        color: string;
+        hidden: boolean;
+    }[]>;
+    readonly gaugePercentage: _angular_core.Signal<number>;
+    readonly gaugeOffset: _angular_core.Signal<number>;
+    readonly radialOffset: _angular_core.Signal<number>;
+    readonly radarIndicatorsList: _angular_core.Signal<RadarIndicator[]>;
+    readonly radarGridRings: _angular_core.Signal<string[]>;
+    readonly radarAxes: _angular_core.Signal<{
+        name: string;
+        x1: number;
+        y1: number;
+        x2: number;
+        y2: number;
+        labelX: number;
+        labelY: number;
+        anchor: string;
+    }[]>;
+    readonly radarSeriesPolygons: _angular_core.Signal<{
+        name: string;
+        color: string;
+        points: {
+            x: number;
+            y: number;
+            value: number;
+            name: string;
+        }[];
+        polygonStr: string;
+    }[]>;
+    readonly scatterDataComputed: _angular_core.Signal<{
+        seriesList: {
+            name: string;
+            color: string;
+            points: {
+                cx: number;
+                cy: number;
+                r: number;
+                color: string;
+                x: number;
+                y: number;
+                size?: number;
+                label?: string;
+            }[];
+        }[];
+        xMin: number;
+        xMax: number;
+        yMin: number;
+        yMax: number;
+        xTicks: {
+            val: number;
+            x: number;
+        }[];
+        yTicks: {
+            val: number;
+            y: number;
+        }[];
+    }>;
+    readonly heatmapComputed: _angular_core.Signal<{
+        xLabels: string[];
+        yLabels: string[];
+        unit: string;
+        cells: {
+            row: number;
+            col: number;
+            yLabel: string;
+            xLabel: string;
+            value: number;
+            ratio: number;
+            opacity: number;
+        }[];
+    } | null>;
+    readonly boxplotComputed: _angular_core.Signal<{
+        label: string;
+        color: string;
+        centerX: number;
+        boxX: number;
+        boxWidth: number;
+        yMin: number;
+        yQ1: number;
+        yMedian: number;
+        yQ3: number;
+        yMax: number;
+        raw: BoxplotDataPoint;
+    }[]>;
+    readonly horizontalBarsComputed: _angular_core.Signal<({
+        category: string;
+        total: number;
+        segments: {
+            name: string;
+            value: number;
+            widthPct: number;
+            leftPct: number;
+            color: string;
+        }[];
+        isStacked: boolean;
+        items?: undefined;
+        zeroPct?: undefined;
+        isDiverging?: undefined;
+        isGrouped?: undefined;
+    } | {
+        category: string;
+        items: {
+            name: string;
+            value: number;
+            widthPct: number;
+            leftPct: number;
+            color: string;
+        }[];
+        zeroPct: number;
+        isDiverging: boolean;
+        total?: undefined;
+        segments?: undefined;
+        isStacked?: undefined;
+        isGrouped?: undefined;
+    } | {
+        category: string;
+        items: {
+            name: string;
+            value: number;
+            widthPct: number;
+            color: string;
+        }[];
+        isGrouped: boolean;
+        total?: undefined;
+        segments?: undefined;
+        isStacked?: undefined;
+        zeroPct?: undefined;
+        isDiverging?: undefined;
+    })[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChartComponent, "ol-chart", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "series": { "alias": "series"; "required": false; "isSignal": true; }; "dataPoints": { "alias": "dataPoints"; "required": false; "isSignal": true; }; "indicators": { "alias": "indicators"; "required": false; "isSignal": true; }; "scatterSeries": { "alias": "scatterSeries"; "required": false; "isSignal": true; }; "heatmapData": { "alias": "heatmapData"; "required": false; "isSignal": true; }; "boxplotData": { "alias": "boxplotData"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "xAxisTitle": { "alias": "xAxisTitle"; "required": false; "isSignal": true; }; "yAxisTitle": { "alias": "yAxisTitle"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type ChatSender = 'user' | 'bot' | 'other';
+declare class ChatBubbleComponent {
+    readonly sender: _angular_core.InputSignal<ChatSender>;
+    readonly senderName: _angular_core.InputSignal<string>;
+    readonly time: _angular_core.InputSignal<string>;
+    readonly avatar: _angular_core.InputSignal<string>;
+    readonly avatarText: _angular_core.InputSignal<string>;
+    readonly status: _angular_core.InputSignal<"sending" | "sent" | "read" | "delivered">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChatBubbleComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChatBubbleComponent, "ol-chat-bubble", never, { "sender": { "alias": "sender"; "required": false; "isSignal": true; }; "senderName": { "alias": "senderName"; "required": false; "isSignal": true; }; "time": { "alias": "time"; "required": false; "isSignal": true; }; "avatar": { "alias": "avatar"; "required": false; "isSignal": true; }; "avatarText": { "alias": "avatarText"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; }, {}, never, ["*", "*", "*"], true, never>;
+}
+
+declare class ChatContainerComponent {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly status: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChatContainerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChatContainerComponent, "ol-chat-container", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=header-actions]", "*", "[slot=footer]"], true, never>;
+}
+
+type DeviceType = 'browser' | 'iphone' | 'tablet';
+declare class DeviceMockupComponent {
+    readonly device: _angular_core.InputSignal<DeviceType>;
+    readonly url: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DeviceMockupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DeviceMockupComponent, "ol-device-mockup", never, { "device": { "alias": "device"; "required": false; "isSignal": true; }; "url": { "alias": "url"; "required": false; "isSignal": true; }; }, {}, never, ["*", "*", "*"], true, never>;
+}
+
+declare class GalleryComponent {
+    readonly cols: _angular_core.InputSignal<2 | 3 | 4 | 5>;
+    readonly gap: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GalleryComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<GalleryComponent, "ol-gallery", never, { "cols": { "alias": "cols"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class GalleryItemComponent {
+    readonly src: _angular_core.InputSignal<string>;
+    readonly alt: _angular_core.InputSignal<string>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly subtitle: _angular_core.InputSignal<string>;
+    readonly ratio: _angular_core.InputSignal<"video" | "square" | "auto" | "portrait">;
+    readonly itemClick: _angular_core.OutputEmitterRef<void>;
+    handleClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GalleryItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<GalleryItemComponent, "ol-gallery-item", never, { "src": { "alias": "src"; "required": true; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "ratio": { "alias": "ratio"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
+}
+
+type JumbotronVariant = 'brand' | 'dark' | 'gradient' | 'light';
+declare class JumbotronComponent {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly subtitle: _angular_core.InputSignal<string>;
+    readonly badgeText: _angular_core.InputSignal<string>;
+    readonly variant: _angular_core.InputSignal<JumbotronVariant>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<JumbotronComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<JumbotronComponent, "ol-jumbotron", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "badgeText": { "alias": "badgeText"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=badge-icon]", "[slot=actions]", "*"], true, never>;
+}
+
+export { AlertComponent, AutocompleteComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BottomNavComponent, BottomNavItemComponent, BreadcrumbComponent, BreadcrumbItemComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CarouselComponent, CarouselSlideComponent, ChartComponent, ChatBubbleComponent, ChatContainerComponent, CheckboxComponent, ClipboardComponent, CollapseComponent, DateRangePickerComponent, DatepickerComponent, DatepickerDirective, DatepickerFooterComponent, DatepickerHeaderComponent, DatepickerPopupComponent, DatepickerStateService, DayViewComponent, DeviceMockupComponent, DownloadAppButtonComponent, DrawerComponent, DropdownComponent, DropdownItemComponent, FileInputComponent, FloatingLabelComponent, FooterComponent, GalleryComponent, GalleryItemComponent, IconComponent, IconShapeComponent, InputComponent, InputCounterComponent, JumbotronComponent, KbdComponent, ListGroupComponent, ListGroupItemComponent, MONTHS_FULL_EN, MONTHS_FULL_VI, MONTHS_SHORT_VI, ModalComponent, MonthViewComponent, NavDropdownComponent, NavbarComponent, NavbarItemComponent, OL_ICONS, OlAccordionComponent, OlAccordionItemComponent, OlAlertComponent, OlBannerComponent, OlIconService, OlSkeletonComponent, OlSpeedDialComponent, OlSpeedDialItemComponent, OlSpinnerComponent, OlToastComponent, OlToastContainerComponent, OlToastService, OlTooltipComponent, OlTooltipDirective, OtpInputComponent, PaginationComponent, PopoverComponent, ProgressComponent, RadioComponent, RangeComponent, RatingComponent, RichTextEditorComponent, SelectComponent, SidebarComponent, SidebarGroupComponent, SidebarItemComponent, SidebarSubmenuComponent, StepItemComponent, StepperComponent, TabItemComponent, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, TimelineComponent, TimelineItemComponent, TimepickerComponent, ToastComponent, ToggleComponent, TooltipComponent, TreeComponent, TreeNodeComponent, WEEKDAYS_SHORT_EN, WEEKDAYS_SHORT_VI, YearViewComponent, cloneDate, endOfDay, formatDate, generateMonthMatrix, generateMonthsMatrix, generateYearsMatrix, isBetween, isDateDisabled, isSameDay, isSameMonth, isSameYear, isToday, parseDate, startOfDay };
+export type { AccordionVariant, AlertColor, AlertRounded, AlertType, AlertVariant$1 as AlertVariant, AppDevice, AppTheme, AutocompleteOption, AutocompleteSize, AutocompleteState, AvatarShape, AvatarSize, AvatarStatus, BadgeShape, BadgeSize, BadgeTheme, BadgeType, BannerPosition, BannerVariant, BoxplotDataPoint, BreadcrumbItemStatus, BreadcrumbSeparator, BreadcrumbVariant, ButtonColor, ButtonGroupColor, ButtonGroupOrientation, ButtonGroupSize, ButtonSize, CardPadding, CardRadius, CardShadow, CardVariant, ChartDataPoint, ChartSeries, ChartType, ChatSender, CheckboxSize, DateCustomClass, DateRange, DatepickerPreset, DatepickerSelectionMode, DatepickerSize, DatepickerViewMode, DayCell, DeviceType, DrawerPlacement, DropdownAutoClose, DropdownPlacement, DropdownTrigger, FileInputSize, FloatingLabelSize, FloatingLabelState, FloatingLabelVariant, HeatmapData, IconColor, IconDefinition, IconManifestEntry, IconShapeColor, IconShapeSize, IconShapeType, IconSize, IconVariant, InputCounterSize, InputSize, InputState, JumbotronVariant, ModalPlacement, ModalSize, MonthCell, OlTreeNode, PaginationType, PaginationVariant, PopoverPlacement, ProgressColor, ProgressSize, RadarIndicator, RadioSize, ScatterDataPoint, ScatterSeries, SelectOption, SelectSize, SelectState, SpeedDialAction, SpeedDialColor, SpeedDialDirection, SpeedDialTrigger, SpeedDialType, StepState, StepperBreakpoint, StepperOrientation, StepperVariant, TabsSize, TabsVariant, TextareaState, TimeObject, TimepickerFormat, TimepickerSize, TimepickerState, Toast, ToastConfig, ToastPosition, ToastType, ToggleColor, ToggleSize, TooltipPlacement, TooltipTheme, TooltipTrigger, YearCell };
 //# sourceMappingURL=edmicro-olkit.d.ts.map