@edmicro/olkit 1.0.1 → 1.0.4

package/types/edmicro-olkit.d.ts

@@ -1,5 +1,126 @@
 import * as _angular_core from '@angular/core';
-import { OnDestroy } from '@angular/core';
+import { OnDestroy, QueryList, ElementRef } 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>;
+    readonly title: _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;
+    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>;
+}
+
+declare class AccordionComponent {
+    readonly flush: _angular_core.InputSignal<boolean>;
+    readonly alwaysOpen: _angular_core.InputSignal<boolean>;
+    readonly items: _angular_core.Signal<readonly AccordionItemComponent[]>;
+    /**
+     * Xử lý khi một item con được mở ra
+     */
+    handleItemToggle(activeItem: AccordionItemComponent): void;
+    getItem(indexOrId: number | string): AccordionItemComponent | 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>;
+}
+
+type AlertColor = 'info' | 'danger' | 'success' | 'warning' | 'dark';
+type AlertVariant = 'default' | 'border-top' | 'small' | 'complex';
+declare class AlertComponent {
+    readonly color: _angular_core.InputSignal<AlertColor>;
+    readonly variant: _angular_core.InputSignal<AlertVariant>;
+    readonly title: _angular_core.InputSignal<string | undefined>;
+    readonly badge: _angular_core.InputSignal<string | undefined>;
+    readonly icon: _angular_core.InputSignal<boolean>;
+    readonly dismissible: _angular_core.InputSignal<boolean>;
+    readonly rounded: _angular_core.InputSignal<boolean>;
+    readonly border: _angular_core.InputSignal<boolean>;
+    readonly isVisible: _angular_core.ModelSignal<boolean>;
+    readonly dismissed: _angular_core.OutputEmitterRef<void>;
+    readonly containerClasses: _angular_core.Signal<string>;
+    readonly badgeClasses: _angular_core.Signal<"bg-brand-100 text-brand-700 dark:bg-brand-950 dark:text-brand-200" | "bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-200" | "bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-200" | "bg-orange-100 text-orange-700 dark:bg-orange-950 dark:text-orange-200" | "bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-300">;
+    readonly closeButtonClasses: _angular_core.Signal<"ms-auto -mx-1.5 -my-1.5 rounded-lg p-1.5 inline-flex items-center justify-center h-8 w-8 cursor-pointer focus:outline-hidden text-brand-500 hover:bg-brand-100 hover:text-brand-900 dark:text-brand-300 dark:hover:bg-brand-900/60 dark:hover:text-white" | "ms-auto -mx-1.5 -my-1.5 rounded-lg p-1.5 inline-flex items-center justify-center h-8 w-8 cursor-pointer focus:outline-hidden text-red-500 hover:bg-red-100 hover:text-red-900 dark:text-red-300 dark:hover:bg-red-900/60 dark:hover:text-white" | "ms-auto -mx-1.5 -my-1.5 rounded-lg p-1.5 inline-flex items-center justify-center h-8 w-8 cursor-pointer focus:outline-hidden text-green-500 hover:bg-green-100 hover:text-green-900 dark:text-green-300 dark:hover:bg-green-900/60 dark:hover:text-white" | "ms-auto -mx-1.5 -my-1.5 rounded-lg p-1.5 inline-flex items-center justify-center h-8 w-8 cursor-pointer focus:outline-hidden text-orange-500 hover:bg-orange-100 hover:text-orange-900 dark:text-orange-300 dark:hover:bg-orange-900/60 dark:hover:text-white" | "ms-auto -mx-1.5 -my-1.5 rounded-lg p-1.5 inline-flex items-center justify-center h-8 w-8 cursor-pointer focus:outline-hidden text-gray-500 hover:bg-gray-200 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white">;
+    dismiss(): void;
+    show(): void;
+    toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertComponent, "ol-alert", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "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; }; "border": { "alias": "border"; "required": false; "isSignal": true; }; "isVisible": { "alias": "isVisible"; "required": false; "isSignal": true; }; }, { "isVisible": "isVisibleChange"; "dismissed": "dismissed"; }, never, ["[badge]", "*", "[icon]", "[title]", "*", "[actions]", "[icon]", "*"], true, never>;
+}
+
+type AvatarSize = 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
+type AvatarShape = 'rounded' | 'circle';
+type AvatarStatus = 'online' | 'offline' | 'alternative' | 'busy' | 'away';
+declare class AvatarComponent {
+    readonly src: _angular_core.InputSignal<string>;
+    readonly alt: _angular_core.InputSignal<string>;
+    readonly text: _angular_core.InputSignal<string>;
+    readonly initials: _angular_core.InputSignal<string>;
+    readonly size: _angular_core.InputSignal<AvatarSize>;
+    readonly shape: _angular_core.InputSignal<AvatarShape>;
+    readonly bordered: _angular_core.InputSignal<boolean>;
+    readonly status: _angular_core.InputSignal<AvatarStatus | null>;
+    readonly statusPosition: _angular_core.InputSignal<"bottom-right" | "top-right">;
+    readonly removable: _angular_core.InputSignal<boolean>;
+    readonly name: _angular_core.InputSignal<string>;
+    readonly helper: _angular_core.InputSignal<string>;
+    readonly showHelper: _angular_core.InputSignal<boolean>;
+    readonly remove: _angular_core.OutputEmitterRef<MouseEvent>;
+    onRemoveClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AvatarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarComponent, "ol-avatar", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "statusPosition": { "alias": "statusPosition"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "helper": { "alias": "helper"; "required": false; "isSignal": true; }; "showHelper": { "alias": "showHelper"; "required": false; "isSignal": true; }; }, { "remove": "remove"; }, never, ["*"], true, never>;
+}
+
+declare class AvatarGroupComponent {
+    readonly size: _angular_core.InputSignal<AvatarSize>;
+    readonly counter: _angular_core.InputSignal<string | number | null>;
+    readonly counterAriaLabel: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AvatarGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarGroupComponent, "ol-avatar-group", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "counter": { "alias": "counter"; "required": false; "isSignal": true; }; "counterAriaLabel": { "alias": "counterAriaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type BadgeColor = 'default' | 'dark' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink';
+type BadgeSize = 'xs' | 'sm';
+declare class BadgeComponent {
+    readonly color: _angular_core.InputSignal<BadgeColor>;
+    readonly size: _angular_core.InputSignal<BadgeSize>;
+    readonly rounded: _angular_core.InputSignal<boolean>;
+    readonly href: _angular_core.InputSignal<string | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BadgeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BadgeComponent, "ol-badge", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class BannerComponent {
+    readonly position: _angular_core.InputSignal<"bottom" | "top">;
+    readonly dismissed: _angular_core.OutputEmitterRef<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>;
+}
+
+declare class BreadcrumbComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BreadcrumbComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BreadcrumbComponent, "ol-breadcrumb", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class BreadcrumbItemComponent {
+    readonly href: _angular_core.InputSignal<string | null>;
+    readonly isHome: _angular_core.InputSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BreadcrumbItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BreadcrumbItemComponent, "ol-breadcrumb-item", never, { "href": { "alias": "href"; "required": false; "isSignal": true; }; "isHome": { "alias": "isHome"; "required": false; "isSignal": true; }; }, {}, never, ["*", "*"], true, never>;
+}
 
 type ButtonColor = 'default' | 'brand' | 'primary' | 'alternative' | 'secondary' | 'tertiary' | 'ghost' | 'success' | 'green' | 'danger' | 'red' | 'warning' | 'yellow' | 'purple' | 'dark' | 'light';
 type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -33,59 +154,666 @@ declare class DownloadAppButtonComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DownloadAppButtonComponent, "ol-download-app-button", never, { "store": { "alias": "store"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; }, { "btnClick": "btnClick"; }, never, never, true, never>;
 }
 
-type AlertColor = 'info' | 'danger' | 'success' | 'warning' | 'dark';
-type AlertVariant = 'default' | 'border-top' | 'small' | 'complex';
-declare class AlertComponent {
-    readonly color: _angular_core.InputSignal<AlertColor>;
-    readonly variant: _angular_core.InputSignal<AlertVariant>;
-    readonly title: _angular_core.InputSignal<string | undefined>;
-    readonly badge: _angular_core.InputSignal<string | undefined>;
-    readonly icon: _angular_core.InputSignal<boolean>;
-    readonly dismissible: _angular_core.InputSignal<boolean>;
-    readonly rounded: _angular_core.InputSignal<boolean>;
-    readonly border: _angular_core.InputSignal<boolean>;
-    readonly isVisible: _angular_core.ModelSignal<boolean>;
-    readonly dismissed: _angular_core.OutputEmitterRef<void>;
-    readonly containerClasses: _angular_core.Signal<string>;
-    readonly badgeClasses: _angular_core.Signal<"bg-brand-100 text-brand-700 dark:bg-brand-950 dark:text-brand-200" | "bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-200" | "bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-200" | "bg-orange-100 text-orange-700 dark:bg-orange-950 dark:text-orange-200" | "bg-gray-100 text-gray-900 dark:bg-gray-700 dark:text-gray-200">;
-    readonly closeButtonClasses: _angular_core.Signal<"ms-auto inline-flex items-center justify-center p-1.5 rounded-lg focus:ring-2 cursor-pointer transition-colors duration-150 text-brand-900 hover:bg-brand-200/50 focus:ring-brand-400 dark:text-brand-300 dark:hover:bg-brand-900/50" | "ms-auto inline-flex items-center justify-center p-1.5 rounded-lg focus:ring-2 cursor-pointer transition-colors duration-150 text-red-900 hover:bg-red-200/50 focus:ring-red-400 dark:text-red-300 dark:hover:bg-red-900/50" | "ms-auto inline-flex items-center justify-center p-1.5 rounded-lg focus:ring-2 cursor-pointer transition-colors duration-150 text-green-900 hover:bg-green-200/50 focus:ring-green-400 dark:text-green-300 dark:hover:bg-green-900/50" | "ms-auto inline-flex items-center justify-center p-1.5 rounded-lg focus:ring-2 cursor-pointer transition-colors duration-150 text-orange-900 hover:bg-orange-200/50 focus:ring-orange-400 dark:text-orange-300 dark:hover:bg-orange-900/50" | "ms-auto inline-flex items-center justify-center p-1.5 rounded-lg focus:ring-2 cursor-pointer transition-colors duration-150 text-gray-900 hover:bg-gray-200/70 focus:ring-gray-400 dark:text-gray-200 dark:hover:bg-gray-700">;
-    dismiss(): void;
-    show(): void;
+declare class ButtonGroupComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonGroupComponent, "ol-button-group", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class CardComponent {
+    readonly href: _angular_core.InputSignal<string | null>;
+    readonly imgSrc: _angular_core.InputSignal<string | null>;
+    readonly imgAlt: _angular_core.InputSignal<string>;
+    readonly horizontal: _angular_core.InputSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "ol-card", never, { "href": { "alias": "href"; "required": false; "isSignal": true; }; "imgSrc": { "alias": "imgSrc"; "required": false; "isSignal": true; }; "imgAlt": { "alias": "imgAlt"; "required": false; "isSignal": true; }; "horizontal": { "alias": "horizontal"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class CarouselComponent {
+    readonly activeIndex: _angular_core.ModelSignal<number>;
+    readonly slideCount: _angular_core.InputSignal<number>;
+    readonly indicators: _angular_core.InputSignal<boolean>;
+    readonly controls: _angular_core.InputSignal<boolean>;
+    prev(): void;
+    next(): void;
+    goTo(index: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CarouselComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CarouselComponent, "ol-carousel", never, { "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; "slideCount": { "alias": "slideCount"; "required": false; "isSignal": true; }; "indicators": { "alias": "indicators"; "required": false; "isSignal": true; }; "controls": { "alias": "controls"; "required": false; "isSignal": true; }; }, { "activeIndex": "activeIndexChange"; }, never, ["*"], true, never>;
+}
+
+declare class CarouselSlideComponent {
+    readonly active: _angular_core.InputSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CarouselSlideComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CarouselSlideComponent, "ol-carousel-slide", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class ClipboardComponent {
+    readonly targetValue: _angular_core.InputSignal<string>;
+    readonly copied: _angular_core.WritableSignal<boolean>;
+    copy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClipboardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClipboardComponent, "ol-clipboard", never, { "targetValue": { "alias": "targetValue"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class CollapseComponent {
+    readonly collapsed: _angular_core.ModelSignal<boolean>;
     toggle(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertComponent, "ol-alert", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "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; }; "border": { "alias": "border"; "required": false; "isSignal": true; }; "isVisible": { "alias": "isVisible"; "required": false; "isSignal": true; }; }, { "isVisible": "isVisibleChange"; "dismissed": "dismissed"; }, never, ["[badge]", "*", "[icon]", "[title]", "*", "[actions]", "[icon]", "*"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CollapseComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CollapseComponent, "ol-collapse", never, { "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["*"], true, never>;
 }
 
-declare class AccordionItemComponent {
-    readonly itemId: _angular_core.InputSignal<string>;
-    readonly title: _angular_core.InputSignal<string>;
+type DatepickerViewMode = 'day' | 'month' | 'year';
+type DatepickerSelectionMode = 'single' | 'range';
+type DatepickerSize = 'sm' | 'md' | 'lg';
+type DateRange = [Date | null, Date | null];
+interface DateCustomClass {
+    date: Date;
+    classes: string[];
+    tooltip?: string;
+}
+interface DayCell {
+    date: Date;
+    dayNumber: number;
+    isCurrentMonth: boolean;
+    isToday: boolean;
+    isSelected: boolean;
+    isRangeStart: boolean;
+    isRangeEnd: boolean;
+    isInRange: boolean;
+    isRangeHover: boolean;
+    isDisabled: boolean;
+    customClasses?: string[];
+}
+interface MonthCell {
+    monthIndex: number;
+    monthName: string;
+    isCurrentMonth: boolean;
+    isSelected: boolean;
+    isDisabled: boolean;
+}
+interface YearCell {
+    year: number;
+    isCurrentYear: boolean;
+    isSelected: boolean;
+    isDisabled: boolean;
+}
+interface DatepickerPreset {
+    label: string;
+    range: () => [Date, Date];
+}
+
+declare class DatepickerStateService {
+    readonly viewMode: _angular_core.WritableSignal<DatepickerViewMode>;
+    readonly viewDate: _angular_core.WritableSignal<Date>;
+    readonly selectionMode: _angular_core.WritableSignal<DatepickerSelectionMode>;
+    readonly selectedDate: _angular_core.WritableSignal<Date | null>;
+    readonly rangeStart: _angular_core.WritableSignal<Date | null>;
+    readonly rangeEnd: _angular_core.WritableSignal<Date | null>;
+    readonly hoverDate: _angular_core.WritableSignal<Date | null>;
+    readonly minDate: _angular_core.WritableSignal<Date | null | undefined>;
+    readonly maxDate: _angular_core.WritableSignal<Date | null | undefined>;
+    readonly daysDisabled: _angular_core.WritableSignal<number[] | null | undefined>;
+    readonly datesDisabled: _angular_core.WritableSignal<Date[] | null | undefined>;
+    readonly datesEnabled: _angular_core.WritableSignal<Date[] | null | undefined>;
+    readonly dayMatrix: _angular_core.Signal<_edmicro_olkit.DayCell[][]>;
+    readonly monthMatrix: _angular_core.Signal<_edmicro_olkit.MonthCell[][]>;
+    readonly yearDecadeData: _angular_core.Signal<{
+        startYear: number;
+        endYear: number;
+        matrix: _edmicro_olkit.YearCell[][];
+    }>;
+    readonly viewDateNextMonth: _angular_core.Signal<Date>;
+    readonly dayMatrixNextMonth: _angular_core.Signal<_edmicro_olkit.DayCell[][]>;
+    readonly headerTitleNextMonth: _angular_core.Signal<string>;
+    readonly headerTitle: _angular_core.Signal<string>;
+    initSingle(value: Date | null): void;
+    initRange(value: DateRange | null): void;
+    navigatePrevious(): void;
+    navigateNext(): void;
+    toggleViewMode(): void;
+    setViewMode(mode: DatepickerViewMode): void;
+    selectMonth(monthIndex: number): void;
+    selectYear(year: number): void;
+    selectDay(date: Date): {
+        completed: boolean;
+        value: Date | DateRange;
+    };
+    setHover(date: Date | null): void;
+    selectToday(): {
+        completed: boolean;
+        value: Date | DateRange;
+    };
+    clear(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatepickerStateService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DatepickerStateService>;
+}
+
+declare class DatepickerComponent implements ControlValueAccessor {
+    readonly state: DatepickerStateService;
+    private readonly hostEl;
+    readonly value: _angular_core.ModelSignal<Date | null>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly helperText: _angular_core.InputSignal<string>;
+    readonly required: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly format: _angular_core.InputSignal<string>;
+    readonly minDate: _angular_core.InputSignal<Date | null>;
+    readonly maxDate: _angular_core.InputSignal<Date | null>;
+    readonly daysDisabled: _angular_core.InputSignal<number[]>;
+    readonly datesDisabled: _angular_core.InputSignal<Date[]>;
+    readonly datesEnabled: _angular_core.InputSignal<Date[]>;
+    readonly showFooter: _angular_core.InputSignal<boolean>;
+    readonly inline: _angular_core.InputSignal<boolean>;
+    readonly size: _angular_core.InputSignal<DatepickerSize>;
+    readonly clearable: _angular_core.InputSignal<boolean>;
+    readonly dateChange: _angular_core.OutputEmitterRef<Date | null>;
+    readonly isOpen: _angular_core.WritableSignal<boolean>;
+    readonly inputValue: _angular_core.WritableSignal<string>;
+    private onChange;
+    private onTouched;
+    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 start-3" | "w-5 h-5 text-gray-500 start-3.5" | "w-4 h-4 text-gray-500 start-3.5">;
+    writeValue(val: Date | null | string): void;
+    registerOnChange(fn: (val: Date | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState?(isDisabled: boolean): void;
+    togglePopup(event?: MouseEvent): void;
+    closePopup(): void;
+    onValueSelected(val: Date | [Date | null, Date | null]): void;
+    onPopupClear(): void;
+    onInputChange(val: string): void;
+    clearInput(event: MouseEvent): void;
+    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>;
+}
+
+declare class DateRangePickerComponent implements ControlValueAccessor {
+    readonly state: DatepickerStateService;
+    private readonly hostEl;
+    readonly value: _angular_core.ModelSignal<DateRange | null>;
+    readonly startPlaceholder: _angular_core.InputSignal<string>;
+    readonly endPlaceholder: _angular_core.InputSignal<string>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly fromLabel: _angular_core.InputSignal<string>;
+    readonly toLabel: _angular_core.InputSignal<string>;
+    readonly showInfoIcon: _angular_core.InputSignal<boolean>;
+    readonly variant: _angular_core.InputSignal<"dual-inputs" | "joined">;
+    readonly dualMonth: _angular_core.InputSignal<boolean>;
+    readonly helperText: _angular_core.InputSignal<string>;
+    readonly required: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly format: _angular_core.InputSignal<string>;
+    readonly minDate: _angular_core.InputSignal<Date | null>;
+    readonly maxDate: _angular_core.InputSignal<Date | null>;
+    readonly daysDisabled: _angular_core.InputSignal<number[]>;
+    readonly datesDisabled: _angular_core.InputSignal<Date[]>;
+    readonly datesEnabled: _angular_core.InputSignal<Date[]>;
+    readonly showFooter: _angular_core.InputSignal<boolean>;
+    readonly presets: _angular_core.InputSignal<DatepickerPreset[]>;
+    readonly inline: _angular_core.InputSignal<boolean>;
+    readonly size: _angular_core.InputSignal<DatepickerSize>;
+    readonly clearable: _angular_core.InputSignal<boolean>;
+    readonly rangeChange: _angular_core.OutputEmitterRef<DateRange | null>;
+    readonly isOpen: _angular_core.WritableSignal<boolean>;
+    readonly startInputValue: _angular_core.WritableSignal<string>;
+    readonly endInputValue: _angular_core.WritableSignal<string>;
+    private onChange;
+    private onTouched;
+    constructor();
+    readonly inputSizeClasses: _angular_core.Signal<"py-2 px-3 text-xs rounded-lg" | "py-3.5 px-4 text-base rounded-xl" | "py-2.5 px-3.5 text-sm rounded-xl">;
+    writeValue(val: DateRange | null): void;
+    registerOnChange(fn: (val: DateRange | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState?(isDisabled: boolean): void;
+    togglePopup(event?: MouseEvent): void;
+    closePopup(): void;
+    onValueSelected(val: Date | [Date | null, Date | null]): void;
+    onPopupClear(): void;
+    onStartInputChange(val: string): void;
+    onEndInputChange(val: string): void;
+    clearRange(event: MouseEvent): void;
+    onDocumentClick(event: MouseEvent): void;
+    onEscape(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DateRangePickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DateRangePickerComponent, "ol-date-range-picker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "startPlaceholder": { "alias": "startPlaceholder"; "required": false; "isSignal": true; }; "endPlaceholder": { "alias": "endPlaceholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "fromLabel": { "alias": "fromLabel"; "required": false; "isSignal": true; }; "toLabel": { "alias": "toLabel"; "required": false; "isSignal": true; }; "showInfoIcon": { "alias": "showInfoIcon"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "dualMonth": { "alias": "dualMonth"; "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; }; "presets": { "alias": "presets"; "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"; "rangeChange": "rangeChange"; }, never, never, true, never>;
+}
+
+declare class DatepickerDirective implements OnDestroy {
+    private readonly el;
+    private readonly vcr;
+    readonly state: DatepickerStateService;
+    readonly format: _angular_core.InputSignal<string>;
+    readonly minDate: _angular_core.InputSignal<Date | null>;
+    readonly maxDate: _angular_core.InputSignal<Date | null>;
+    readonly dateChange: _angular_core.OutputEmitterRef<Date | null>;
+    private popupRef;
+    onClick(event: MouseEvent): void;
+    onInput(): void;
+    toggle(): void;
+    open(): void;
+    close(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatepickerDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DatepickerDirective, "input[olDatepicker]", ["olDatepicker"], { "format": { "alias": "format"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; }, { "dateChange": "dateChange"; }, never, never, true, never>;
+}
+
+declare class DatepickerHeaderComponent {
+    readonly state: DatepickerStateService;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatepickerHeaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerHeaderComponent, "ol-datepicker-header", never, {}, {}, never, never, true, never>;
+}
+
+declare class DayViewComponent {
+    readonly state: DatepickerStateService;
+    readonly customMatrix: _angular_core.InputSignal<DayCell[][] | null>;
+    readonly daySelect: _angular_core.OutputEmitterRef<Date>;
+    readonly weekdays: string[];
+    onCellClick(cell: DayCell): void;
+    onCellMouseEnter(cell: DayCell): void;
+    onMouseLeave(): void;
+    getCellClasses(cell: DayCell): string[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DayViewComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DayViewComponent, "ol-day-view", never, { "customMatrix": { "alias": "customMatrix"; "required": false; "isSignal": true; }; }, { "daySelect": "daySelect"; }, never, never, true, never>;
+}
+
+declare class MonthViewComponent {
+    readonly state: DatepickerStateService;
+    onMonthClick(cell: MonthCell): void;
+    getCellClasses(cell: MonthCell): string[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MonthViewComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MonthViewComponent, "ol-month-view", never, {}, {}, never, never, true, never>;
+}
+
+declare class YearViewComponent {
+    readonly state: DatepickerStateService;
+    onYearClick(cell: YearCell): void;
+    getCellClasses(cell: YearCell): string[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YearViewComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YearViewComponent, "ol-year-view", never, {}, {}, never, never, true, never>;
+}
+
+declare class DatepickerFooterComponent {
+    readonly state: DatepickerStateService;
+    readonly clearClick: _angular_core.OutputEmitterRef<void>;
+    readonly todayClick: _angular_core.OutputEmitterRef<void>;
+    onClear(): void;
+    onToday(): 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>;
+}
+
+declare class DatepickerPopupComponent {
+    readonly state: DatepickerStateService;
+    readonly showFooter: _angular_core.InputSignal<boolean>;
+    readonly dualMonth: _angular_core.InputSignal<boolean>;
+    readonly presets: _angular_core.InputSignal<DatepickerPreset[]>;
+    readonly valueChange: _angular_core.OutputEmitterRef<Date | [Date | null, Date | null]>;
+    readonly clearClick: _angular_core.OutputEmitterRef<void>;
+    onDaySelected(date: Date): void;
+    onFooterToday(): void;
+    onFooterClear(): 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>;
+}
+
+declare const WEEKDAYS_SHORT_VI: string[];
+declare const WEEKDAYS_SHORT_EN: string[];
+declare const MONTHS_SHORT_VI: string[];
+declare const MONTHS_FULL_VI: string[];
+declare const MONTHS_FULL_EN: string[];
+declare function cloneDate(date: Date): Date;
+declare function startOfDay(date: Date): Date;
+declare function endOfDay(date: Date): Date;
+declare function isSameDay(d1: Date | null | undefined, d2: Date | null | undefined): boolean;
+declare function isSameMonth(d1: Date | null | undefined, d2: Date | null | undefined): boolean;
+declare function isSameYear(d1: Date | null | undefined, d2: Date | null | undefined): boolean;
+declare function isToday(date: Date): boolean;
+declare function isBetween(date: Date, start: Date | null | undefined, end: Date | null | undefined, inclusive?: boolean): boolean;
+declare function isDateDisabled(date: Date, minDate?: Date | null, maxDate?: Date | null, daysDisabled?: number[] | null, datesDisabled?: Date[] | null, datesEnabled?: Date[] | null): boolean;
+declare function formatDate(date: Date | null | undefined, format?: string): string;
+declare function parseDate(dateStr: string, format?: string): Date | null;
+/**
+ * Generates 42 days grid (6 weeks x 7 days) for the calendar view
+ */
+declare function generateMonthMatrix(viewDate: Date, options?: {
+    selectedDate?: Date | null;
+    rangeStart?: Date | null;
+    rangeEnd?: Date | null;
+    hoverDate?: Date | null;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    daysDisabled?: number[] | null;
+    datesDisabled?: Date[] | null;
+    datesEnabled?: Date[] | null;
+}): DayCell[][];
+declare function generateMonthsMatrix(viewDate: Date, selectedDate?: Date | null, minDate?: Date | null, maxDate?: Date | null): MonthCell[][];
+declare function generateYearsMatrix(viewDate: Date, selectedDate?: Date | null, minDate?: Date | null, maxDate?: Date | null): {
+    startYear: number;
+    endYear: number;
+    matrix: YearCell[][];
+};
+
+type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
+declare class DrawerComponent {
     readonly isOpen: _angular_core.ModelSignal<boolean>;
-    readonly opened: _angular_core.OutputEmitterRef<void>;
+    readonly placement: _angular_core.InputSignal<DrawerPlacement>;
+    readonly backdrop: _angular_core.InputSignal<boolean>;
     readonly closed: _angular_core.OutputEmitterRef<void>;
-    private readonly parentAccordion;
-    open(): void;
     close(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DrawerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DrawerComponent, "ol-drawer", never, { "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "closed": "closed"; }, never, ["*"], true, never>;
+}
+
+type DropdownPlacement = 'bottom' | 'top' | 'left' | 'right' | 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+type DropdownTrigger = 'click' | 'hover';
+declare class DropdownComponent {
+    private readonly elementRef;
+    private readonly destroyRef;
+    private readonly uid;
+    readonly buttonId: string;
+    readonly menuId: string;
+    private readonly triggerButtonRef;
+    private readonly menuRef;
+    private hideTimeoutId;
+    private suppressOutsideClickTimeoutId;
+    private suppressOutsideClick;
+    readonly label: _angular_core.InputSignal<string | null>;
+    readonly isOpen: _angular_core.ModelSignal<boolean>;
+    readonly placement: _angular_core.InputSignal<DropdownPlacement>;
+    readonly trigger: _angular_core.InputSignal<DropdownTrigger>;
+    readonly triggerClass: _angular_core.InputSignal<string>;
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    constructor();
+    readonly triggerButtonClasses: _angular_core.Signal<string>;
+    readonly menuPlacementClasses: _angular_core.Signal<"bottom-full left-0 mb-2" | "bottom-full right-0 mb-2" | "right-full top-0 me-2" | "left-full top-0 ms-2" | "top-full right-0 mt-2" | "top-full left-0 mt-2">;
+    onDocumentClick(event: MouseEvent): void;
+    onEscape(): void;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    show(): void;
+    hide(): 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>;
+    isVisible(): boolean;
+    private focusFirstMenuItem;
+    private clearHideTimeout;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownComponent, "ol-dropdown", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "triggerClass": { "alias": "triggerClass"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "opened": "opened"; "closed": "closed"; }, never, ["[triggerIcon]", "*"], true, never>;
 }
 
-declare class AccordionComponent {
-    readonly flush: _angular_core.InputSignal<boolean>;
-    readonly alwaysOpen: _angular_core.InputSignal<boolean>;
-    readonly items: _angular_core.Signal<readonly AccordionItemComponent[]>;
-    /**
-     * Xử lý khi một item con được mở ra
-     */
-    handleItemToggle(activeItem: AccordionItemComponent): void;
-    getItem(indexOrId: number | string): AccordionItemComponent | 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>;
+declare class DropdownItemComponent {
+    readonly href: _angular_core.InputSignal<string | null>;
+    readonly itemClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    handleClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownItemComponent, "ol-dropdown-item", never, { "href": { "alias": "href"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, ["*"], true, never>;
+}
+
+declare class FooterComponent {
+    readonly container: _angular_core.InputSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FooterComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FooterComponent, "ol-footer", never, { "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type InputSize = 'sm' | 'md' | 'lg' | 'xl';
+type InputState = 'default' | 'error' | 'success' | 'warning';
+declare class InputComponent {
+    readonly value: _angular_core.ModelSignal<string>;
+    readonly type: _angular_core.InputSignal<string>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly helperText: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    readonly size: _angular_core.InputSignal<InputSize>;
+    readonly state: _angular_core.InputSignal<InputState>;
+    readonly required: _angular_core.InputSignal<boolean>;
+    readonly showAsterisk: _angular_core.InputSignal<boolean>;
+    readonly labelIcon: _angular_core.InputSignal<boolean>;
+    readonly labelTooltip: _angular_core.InputSignal<string>;
+    readonly prefixText: _angular_core.InputSignal<string>;
+    readonly suffixText: _angular_core.InputSignal<string>;
+    readonly addOnIcon: _angular_core.InputSignal<boolean>;
+    readonly leftIcon: _angular_core.InputSignal<boolean>;
+    readonly rightIcon: _angular_core.InputSignal<boolean>;
+    readonly rightHelperText: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputComponent, "ol-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "labelIcon": { "alias": "labelIcon"; "required": false; "isSignal": true; }; "labelTooltip": { "alias": "labelTooltip"; "required": false; "isSignal": true; }; "prefixText": { "alias": "prefixText"; "required": false; "isSignal": true; }; "suffixText": { "alias": "suffixText"; "required": false; "isSignal": true; }; "addOnIcon": { "alias": "addOnIcon"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "rightIcon": { "alias": "rightIcon"; "required": false; "isSignal": true; }; "rightHelperText": { "alias": "rightHelperText"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["[addOnIcon], [leftIcon]", "[leftIcon]", "[rightIcon]", "[rightHelperAction]"], true, never>;
+}
+
+type TextareaState = 'default' | 'error' | 'success';
+declare class TextareaComponent {
+    readonly value: _angular_core.ModelSignal<string>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly rows: _angular_core.InputSignal<number>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly helperText: _angular_core.InputSignal<string>;
+    readonly maxLength: _angular_core.InputSignal<number | undefined>;
+    readonly showCharCount: _angular_core.InputSignal<boolean>;
+    readonly state: _angular_core.InputSignal<TextareaState>;
+    readonly required: _angular_core.InputSignal<boolean>;
+    readonly showAsterisk: _angular_core.InputSignal<boolean>;
+    readonly commentBox: _angular_core.InputSignal<boolean>;
+    readonly id: _angular_core.InputSignal<string>;
+    readonly submitComment: _angular_core.OutputEmitterRef<string>;
+    onSubmit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TextareaComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextareaComponent, "ol-textarea", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "showCharCount": { "alias": "showCharCount"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "commentBox": { "alias": "commentBox"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "submitComment": "submitComment"; }, never, never, true, never>;
+}
+
+type SelectSize = 'sm' | 'md' | 'lg';
+type SelectState = 'default' | 'error' | 'success';
+interface SelectOption {
+    label: string;
+    value: any;
+    disabled?: boolean;
+}
+declare class SelectComponent {
+    readonly value: _angular_core.ModelSignal<any>;
+    readonly options: _angular_core.InputSignal<SelectOption[]>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly size: _angular_core.InputSignal<SelectSize>;
+    readonly helperText: _angular_core.InputSignal<string>;
+    readonly state: _angular_core.InputSignal<SelectState>;
+    readonly required: _angular_core.InputSignal<boolean>;
+    readonly showAsterisk: _angular_core.InputSignal<boolean>;
+    readonly leftIcon: _angular_core.InputSignal<boolean>;
+    readonly id: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent, "ol-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["[leftIcon]", "*"], true, never>;
+}
+
+declare class CheckboxComponent {
+    readonly checked: _angular_core.ModelSignal<boolean>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly id: _angular_core.InputSignal<string>;
+    /** Falls back to an auto-generated id so the label stays associated with the input even when consumers don't pass one. */
+    private readonly generatedId;
+    protected readonly inputId: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CheckboxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckboxComponent, "ol-checkbox", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, never, true, never>;
+}
+
+declare class RadioComponent {
+    readonly name: _angular_core.InputSignal<string>;
+    readonly value: _angular_core.InputSignal<any>;
+    readonly selectedValue: _angular_core.ModelSignal<any>;
+    readonly modelValue: _angular_core.ModelSignal<any>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly id: _angular_core.InputSignal<string>;
+    /** Falls back to an auto-generated id so the label stays associated with the input even when consumers don't pass one. */
+    private readonly generatedId;
+    protected readonly inputId: _angular_core.Signal<string>;
+    get currentValue(): any;
+    onModelChange(val: any): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RadioComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioComponent, "ol-radio", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "selectedValue": { "alias": "selectedValue"; "required": false; "isSignal": true; }; "modelValue": { "alias": "modelValue"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "selectedValue": "selectedValueChange"; "modelValue": "modelValueChange"; }, never, never, true, never>;
+}
+
+type ToggleSize = 'sm' | 'md' | 'lg';
+declare class ToggleComponent {
+    readonly checked: _angular_core.ModelSignal<boolean>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly size: _angular_core.InputSignal<ToggleSize>;
+    readonly id: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToggleComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToggleComponent, "ol-toggle", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, never, true, never>;
+}
+
+type FileInputSize = 'sm' | 'md' | 'lg';
+declare class FileInputComponent {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly helperText: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly dropzone: _angular_core.InputSignal<boolean>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
+    readonly size: _angular_core.InputSignal<FileInputSize>;
+    readonly accept: _angular_core.InputSignal<string>;
+    readonly multiple: _angular_core.InputSignal<boolean>;
+    readonly id: _angular_core.InputSignal<string>;
+    readonly selectedFiles: _angular_core.WritableSignal<File[]>;
+    readonly isDragging: _angular_core.WritableSignal<boolean>;
+    readonly filesChanged: _angular_core.OutputEmitterRef<File[]>;
+    onFileSelected(event: Event): void;
+    onDragOver(event: DragEvent): void;
+    onDragLeave(event: DragEvent): void;
+    onDrop(event: DragEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FileInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FileInputComponent, "ol-file-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "dropzone": { "alias": "dropzone"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "filesChanged": "filesChanged"; }, never, never, true, never>;
+}
+
+declare class RangeComponent {
+    readonly value: _angular_core.ModelSignal<number>;
+    readonly min: _angular_core.InputSignal<number>;
+    readonly max: _angular_core.InputSignal<number>;
+    readonly step: _angular_core.InputSignal<number>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly helperText: _angular_core.InputSignal<string>;
+    readonly showValue: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly id: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RangeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RangeComponent, "ol-range", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+declare class FloatingLabelComponent {
+    readonly value: _angular_core.ModelSignal<string>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly type: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly helperText: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FloatingLabelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FloatingLabelComponent, "ol-floating-label", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+type InputCounterSize = 'sm' | 'md' | 'lg';
+declare class InputCounterComponent {
+    readonly value: _angular_core.ModelSignal<number>;
+    readonly min: _angular_core.InputSignal<number>;
+    readonly max: _angular_core.InputSignal<number>;
+    readonly step: _angular_core.InputSignal<number>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly size: _angular_core.InputSignal<InputCounterSize>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly helperText: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string>;
+    increment(): void;
+    decrement(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputCounterComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputCounterComponent, "ol-input-counter", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+declare class OtpInputComponent {
+    readonly length: _angular_core.InputSignal<number>;
+    readonly value: _angular_core.ModelSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly helperText: _angular_core.InputSignal<string>;
+    readonly masked: _angular_core.InputSignal<boolean>;
+    readonly id: _angular_core.InputSignal<string>;
+    readonly completed: _angular_core.OutputEmitterRef<string>;
+    inputElements: QueryList<ElementRef<HTMLInputElement>>;
+    get digits(): string[];
+    get lengthArray(): number[];
+    onInput(event: Event, index: number): void;
+    onKeyDown(event: KeyboardEvent, index: number): void;
+    onPaste(event: ClipboardEvent): void;
+    private focusIndex;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OtpInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OtpInputComponent, "ol-otp-input", never, { "length": { "alias": "length"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "masked": { "alias": "masked"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "completed": "completed"; }, never, never, true, never>;
+}
+
+declare class TagInputComponent {
+    readonly tags: _angular_core.ModelSignal<string[]>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly helperText: _angular_core.InputSignal<string>;
+    readonly maxTags: _angular_core.InputSignal<number | undefined>;
+    readonly id: _angular_core.InputSignal<string>;
+    readonly inputValue: _angular_core.WritableSignal<string>;
+    tagInputEl: ElementRef<HTMLInputElement>;
+    onKeyDown(event: KeyboardEvent): void;
+    addTag(tagText: string): void;
+    removeTag(index: number): void;
+    focusInput(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TagInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TagInputComponent, "ol-tag-input", never, { "tags": { "alias": "tags"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "maxTags": { "alias": "maxTags"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "tags": "tagsChange"; }, never, never, true, never>;
+}
+
+declare class RichTextEditorComponent {
+    readonly value: _angular_core.ModelSignal<string>;
+    readonly content: _angular_core.ModelSignal<string>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly helperText: _angular_core.InputSignal<string>;
+    readonly minHeight: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string>;
+    get currentValue(): string;
+    onModelChange(val: string): void;
+    editorArea: ElementRef<HTMLTextAreaElement>;
+    formatText(prefix: string, suffix?: string, defaultPlaceholder?: string): void;
+    insertList(ordered: boolean): void;
+    insertLink(): void;
+    insertCodeBlock(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RichTextEditorComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RichTextEditorComponent, "ol-rich-text-editor", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "content": "contentChange"; }, never, never, true, never>;
+}
+
+declare class KbdComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbdComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbdComponent, "ol-kbd", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class ListGroupComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListGroupComponent, "ol-list-group", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class ListGroupItemComponent {
+    readonly active: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly href: _angular_core.InputSignal<string | null>;
+    readonly itemClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    handleClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListGroupItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListGroupItemComponent, "ol-list-group-item", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, ["*"], true, never>;
 }
 
 type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
@@ -111,6 +839,102 @@ declare class ModalComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ModalComponent, "ol-modal", never, { "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "opened": "opened"; "closed": "closed"; }, never, ["*", "[footer]"], true, never>;
 }
 
+declare class NavbarComponent {
+    readonly isCollapsed: _angular_core.ModelSignal<boolean>;
+    toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavbarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NavbarComponent, "ol-navbar", never, { "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; }, { "isCollapsed": "isCollapsedChange"; }, never, ["[brand]", "*"], true, never>;
+}
+
+declare class NavbarItemComponent {
+    readonly href: _angular_core.InputSignal<string>;
+    readonly active: _angular_core.InputSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavbarItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NavbarItemComponent, "ol-navbar-item", never, { "href": { "alias": "href"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class PaginationComponent {
+    readonly currentPage: _angular_core.ModelSignal<number>;
+    readonly totalPages: _angular_core.InputSignal<number>;
+    readonly showIcons: _angular_core.InputSignal<boolean>;
+    readonly pageChange: _angular_core.OutputEmitterRef<number>;
+    goToPage(page: number): void;
+    prev(): void;
+    next(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PaginationComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PaginationComponent, "ol-pagination", never, { "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "totalPages": { "alias": "totalPages"; "required": false; "isSignal": true; }; "showIcons": { "alias": "showIcons"; "required": false; "isSignal": true; }; }, { "currentPage": "currentPageChange"; "pageChange": "pageChange"; }, never, never, true, never>;
+}
+
+type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
+declare class PopoverComponent {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly placement: _angular_core.InputSignal<PopoverPlacement>;
+    readonly isOpen: _angular_core.ModelSignal<boolean>;
+    toggle(): void;
+    close(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopoverComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PopoverComponent, "ol-popover", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; }, never, ["[trigger]", "*"], true, never>;
+}
+
+type ProgressColor = 'blue' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo';
+type ProgressSize = 'sm' | 'md' | 'lg' | 'xl';
+declare class ProgressComponent {
+    readonly progress: _angular_core.InputSignal<number>;
+    readonly color: _angular_core.InputSignal<ProgressColor>;
+    readonly size: _angular_core.InputSignal<ProgressSize>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly showProgress: _angular_core.InputSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProgressComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProgressComponent, "ol-progress", never, { "progress": { "alias": "progress"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showProgress": { "alias": "showProgress"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class RatingComponent {
+    readonly rating: _angular_core.InputSignal<number>;
+    readonly max: _angular_core.InputSignal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RatingComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RatingComponent, "ol-rating", never, { "rating": { "alias": "rating"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class SidebarComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarComponent, "ol-sidebar", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class SidebarItemComponent {
+    readonly href: _angular_core.InputSignal<string>;
+    readonly icon: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarItemComponent, "ol-sidebar-item", never, { "href": { "alias": "href"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, ["[icon]", "*"], 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>;
+}
+
+declare class SpeedDialComponent {
+    readonly isOpen: _angular_core.ModelSignal<boolean>;
+    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>;
+}
+
+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>;
+}
+
+declare class TableComponent {
+    readonly striped: _angular_core.InputSignal<boolean>;
+    readonly hoverable: _angular_core.InputSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent, "ol-table", never, { "striped": { "alias": "striped"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 declare class TabItemComponent {
     readonly tabId: _angular_core.InputSignal<string>;
     readonly title: _angular_core.InputSignal<string>;
@@ -142,35 +966,35 @@ declare class TabsComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsComponent, "ol-tabs", never, { "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; "tabChange": "tabChange"; }, ["items"], ["[tab-headers]", "*"], true, never>;
 }
 
-type DropdownPlacement = 'bottom' | 'top' | 'left' | 'right' | 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
-type DropdownTrigger = 'click' | 'hover';
-declare class DropdownComponent {
-    private readonly elementRef;
-    readonly label: _angular_core.InputSignal<string>;
-    readonly isOpen: _angular_core.ModelSignal<boolean>;
-    readonly placement: _angular_core.InputSignal<DropdownPlacement>;
-    readonly trigger: _angular_core.InputSignal<DropdownTrigger>;
-    readonly opened: _angular_core.OutputEmitterRef<void>;
+declare class TimelineComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TimelineComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimelineComponent, "ol-timeline", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class TimelineItemComponent {
+    readonly date: _angular_core.InputSignal<string>;
+    readonly title: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TimelineItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimelineItemComponent, "ol-timeline-item", never, { "date": { "alias": "date"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type ToastType = 'success' | 'danger' | 'warning' | 'info' | 'default';
+declare class ToastComponent implements OnDestroy {
+    readonly type: _angular_core.InputSignal<ToastType>;
+    readonly dismissible: _angular_core.InputSignal<boolean>;
+    readonly duration: _angular_core.InputSignal<number>;
+    readonly isVisible: _angular_core.ModelSignal<boolean>;
     readonly closed: _angular_core.OutputEmitterRef<void>;
-    readonly menuPlacementClasses: _angular_core.Signal<"bottom-full left-0 mb-2" | "bottom-full right-0 mb-2" | "right-full top-0 me-2" | "left-full top-0 ms-2" | "top-full right-0 mt-2" | "top-full left-0 mt-2">;
-    onDocumentClick(event: MouseEvent): void;
-    onEscape(): void;
-    onMouseEnter(): void;
-    onMouseLeave(): void;
+    private timerId;
+    constructor();
+    ngOnDestroy(): void;
+    private clearTimer;
+    readonly iconContainerClasses: _angular_core.Signal<"bg-emerald-100 text-emerald-600 dark:bg-emerald-950 dark:text-emerald-300" | "bg-rose-100 text-rose-600 dark:bg-rose-950 dark:text-rose-300" | "bg-amber-100 text-amber-600 dark:bg-amber-950 dark:text-amber-300" | "bg-brand-100 text-brand-600 dark:bg-brand-950 dark:text-brand-300" | "bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300">;
+    dismiss(): void;
     show(): void;
-    hide(): void;
     toggle(): void;
-    isVisible(): boolean;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownComponent, "ol-dropdown", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "opened": "opened"; "closed": "closed"; }, never, ["*"], true, never>;
-}
-
-declare class DropdownItemComponent {
-    readonly href: _angular_core.InputSignal<string | null>;
-    readonly itemClick: _angular_core.OutputEmitterRef<MouseEvent>;
-    handleClick(event: MouseEvent): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownItemComponent, "ol-dropdown-item", never, { "href": { "alias": "href"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, ["*", "*"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToastComponent, never>;
+    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>;
 }
 
 type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
@@ -196,25 +1020,85 @@ 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>;
 }
 
-type ToastType = 'success' | 'danger' | 'warning' | 'info' | 'default';
-declare class ToastComponent implements OnDestroy {
-    readonly type: _angular_core.InputSignal<ToastType>;
-    readonly dismissible: _angular_core.InputSignal<boolean>;
-    readonly duration: _angular_core.InputSignal<number>;
-    readonly isVisible: _angular_core.ModelSignal<boolean>;
-    readonly closed: _angular_core.OutputEmitterRef<void>;
-    private timerId;
+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;
+declare class IconComponent {
+    private readonly iconService;
+    readonly name: _angular_core.InputSignal<string>;
+    readonly size: _angular_core.InputSignal<IconSize>;
+    readonly color: _angular_core.InputSignal<string>;
+    readonly variant: _angular_core.InputSignal<string>;
+    readonly strokeWidth: _angular_core.InputSignal<string | number | null>;
+    private readonly asyncSvg;
+    readonly svgContent: _angular_core.Signal<SafeHtml | null>;
     constructor();
-    ngOnDestroy(): void;
-    private clearTimer;
-    readonly iconContainerClasses: _angular_core.Signal<"bg-emerald-100 text-emerald-600 dark:bg-emerald-950 dark:text-emerald-300" | "bg-rose-100 text-rose-600 dark:bg-rose-950 dark:text-rose-300" | "bg-amber-100 text-amber-600 dark:bg-amber-950 dark:text-amber-300" | "bg-brand-100 text-brand-600 dark:bg-brand-950 dark:text-brand-300" | "bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300">;
-    dismiss(): void;
-    show(): void;
-    toggle(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToastComponent, never>;
-    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>;
+    readonly isNumericSize: _angular_core.Signal<boolean>;
+    readonly customPixelSize: _angular_core.Signal<string | null>;
+    readonly sizeClasses: _angular_core.Signal<"" | "w-3.5 h-3.5" | "w-4 h-4" | "w-5 h-5" | "w-6 h-6" | "w-8 h-8" | "w-10 h-10" | "w-12 h-12">;
+    readonly isCustomColor: _angular_core.Signal<boolean>;
+    readonly isMulticolor: _angular_core.Signal<boolean>;
+    readonly colorClasses: _angular_core.Signal<string>;
+    readonly containerClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<IconComponent, "ol-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface IconManifestEntry {
+    nodeId?: string;
+    name: string;
+    label?: string;
+    category: string;
+    theme: string;
+    path: string;
+}
+declare class OlIconService {
+    private readonly sanitizer;
+    private readonly cache;
+    private readonly inFlight;
+    private manifest;
+    private manifestLoading$;
+    private basePath;
+    constructor();
+    setBasePath(path: string): void;
+    /**
+     * Nạp danh mục chỉ mục manifest.json nếu có
+     */
+    private loadManifest;
+    /**
+     * Lấy SVG SafeHtml tức thì đồng bộ 0ms từ In-Memory Pre-bundled Registry
+     */
+    getIconSync(name: string, variant?: string): SafeHtml | null;
+    /**
+     * Lấy SVG SafeHtml cho icon theo tên và biến thể (Observable fallback)
+     */
+    getIcon(name: string, variant?: string): Observable<SafeHtml | null>;
+    private fetchIconSvg;
+    private readonly aliasMap;
+    private getCandidateUrls;
+    private normalizeKey;
+    private cleanSvg;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlIconService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<OlIconService>;
+}
+
+/**
+ * Ôn Luyện Design System - Icon Registry Manifest & In-Memory Pre-bundled SVGs
+ * Toàn bộ vector SVG được nhúng trực tiếp in-memory để đạt hiệu năng 0ms instant render (Zero Network Requests).
+ * Tối ưu hóa tuyệt đối khi tải trang, F5, đổi Theme hoặc cuộn danh mục lớn.
+ */
+interface IconDefinition {
+    name: string;
+    label?: string;
+    category: 'file-types' | 'foundation' | 'navigation' | 'interface' | 'communication' | 'users' | 'files' | 'education' | 'time' | 'media' | 'devices' | 'transport' | 'status';
+    variant?: 'linear' | 'bold' | 'line-duotone' | 'file-type' | 'brand' | string;
+    keywords?: string[];
+    assetPath?: string;
+    isMulticolor?: boolean;
+    svg?: string;
 }
+declare const OL_ICONS: Record<string, IconDefinition>;
 
-export { AccordionComponent, AccordionItemComponent, AlertComponent, ButtonComponent, DownloadAppButtonComponent, DropdownComponent, DropdownItemComponent, ModalComponent, TabItemComponent, TabsComponent, ToastComponent, TooltipComponent };
-export type { AlertColor, AlertVariant, AppDevice, AppTheme, ButtonColor, ButtonSize, DropdownPlacement, DropdownTrigger, ModalPlacement, ModalSize, TabsVariant, ToastType, TooltipPlacement, TooltipTheme, TooltipTrigger };
+export { AccordionComponent, AccordionItemComponent, AlertComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BannerComponent, 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, InputComponent, InputCounterComponent, KbdComponent, ListGroupComponent, ListGroupItemComponent, MONTHS_FULL_EN, MONTHS_FULL_VI, MONTHS_SHORT_VI, ModalComponent, MonthViewComponent, NavbarComponent, NavbarItemComponent, OL_ICONS, OlIconService, OtpInputComponent, PaginationComponent, PopoverComponent, ProgressComponent, RadioComponent, RangeComponent, RatingComponent, RichTextEditorComponent, SelectComponent, SidebarComponent, SidebarItemComponent, SkeletonComponent, SpeedDialComponent, SpinnerComponent, TabItemComponent, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, TimelineComponent, TimelineItemComponent, 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, AvatarShape, AvatarSize, AvatarStatus, BadgeColor, BadgeSize, ButtonColor, ButtonSize, DateCustomClass, DateRange, DatepickerPreset, DatepickerSelectionMode, DatepickerSize, DatepickerViewMode, DayCell, DrawerPlacement, DropdownPlacement, DropdownTrigger, FileInputSize, IconColor, IconDefinition, IconManifestEntry, IconSize, IconVariant, InputCounterSize, InputSize, InputState, ModalPlacement, ModalSize, MonthCell, PopoverPlacement, ProgressColor, ProgressSize, SelectOption, SelectSize, SelectState, SpinnerColor, SpinnerSize, TabsVariant, TextareaState, ToastType, ToggleSize, TooltipPlacement, TooltipTheme, TooltipTrigger, YearCell };
 //# sourceMappingURL=edmicro-olkit.d.ts.map