@sdcorejs/angular 19.0.3 → 19.0.5

package/components/side-drawer/src/side-drawer.component.d.ts

@@ -1,8 +1,7 @@
 import { CdkPortal } from '@angular/cdk/portal';
-import { SdBaseSecureComponent } from '@sdcorejs/angular/components/base';
 import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
-export declare class SdSideDrawer extends SdBaseSecureComponent {
+export declare class SdSideDrawer {
     #private;
     id: string;
     portal: import("@angular/core").Signal<CdkPortal>;

package/components/splitter/src/splitter.component.d.ts

@@ -1,13 +1,19 @@
 import { SdSplitterPanelComponent } from './splitter-panel/splitter-panel.component';
-import { SplitterLayoutState, SplitterOrientation } from './splitter.models';
+import { SdSplitterOption, SplitterLayoutState, SplitterOrientation } from './splitter.models';
 import * as i0 from "@angular/core";
 export declare class SdSplitterComponent {
     #private;
+    option: import("@angular/core").InputSignal<SdSplitterOption | undefined>;
     orientation: import("@angular/core").InputSignal<SplitterOrientation>;
     disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     storageKey: import("@angular/core").InputSignal<string | undefined>;
     snapThreshold: import("@angular/core").InputSignalWithTransform<number, unknown>;
     keyboardStep: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    resolvedOrientation: import("@angular/core").Signal<SplitterOrientation>;
+    resolvedDisabled: import("@angular/core").Signal<boolean>;
+    resolvedStorageKey: import("@angular/core").Signal<string | undefined>;
+    resolvedSnapThreshold: import("@angular/core").Signal<number>;
+    resolvedKeyboardStep: import("@angular/core").Signal<number>;
     readonly resizeEnd: import("@angular/core").OutputEmitterRef<SplitterLayoutState>;
     readonly collapsedChange: import("@angular/core").OutputEmitterRef<{
         panelId: string | number;
@@ -24,5 +30,5 @@ export declare class SdSplitterComponent {
     toggle(target: number | string): void;
     resizePanel(target: number | string, size: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdSplitterComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdSplitterComponent, "sd-splitter", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "storageKey": { "alias": "storageKey"; "required": false; "isSignal": true; }; "snapThreshold": { "alias": "snapThreshold"; "required": false; "isSignal": true; }; "keyboardStep": { "alias": "keyboardStep"; "required": false; "isSignal": true; }; }, { "resizeEnd": "resizeEnd"; "collapsedChange": "collapsedChange"; "layoutChange": "layoutChange"; }, ["panels"], ["sd-splitter-panel"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdSplitterComponent, "sd-splitter", never, { "option": { "alias": "option"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "storageKey": { "alias": "storageKey"; "required": false; "isSignal": true; }; "snapThreshold": { "alias": "snapThreshold"; "required": false; "isSignal": true; }; "keyboardStep": { "alias": "keyboardStep"; "required": false; "isSignal": true; }; }, { "resizeEnd": "resizeEnd"; "collapsedChange": "collapsedChange"; "layoutChange": "layoutChange"; }, ["panels"], ["sd-splitter-panel"], true, never>;
 }

package/components/splitter/src/splitter.models.d.ts

@@ -10,6 +10,19 @@ export interface SplitterLayoutState {
     v: 1;
     panels: SplitterPanelState[];
 }
+export interface SdSplitterOption {
+    orientation?: SplitterOrientation;
+    disabled?: boolean;
+    storageKey?: string;
+    snapThreshold?: number;
+    keyboardStep?: number;
+    onResizeEnd?: (state: SplitterLayoutState) => void;
+    onCollapsedChange?: (event: {
+        panelId: string | number;
+        collapsed: boolean;
+    }) => void;
+    onLayoutChange?: (state: SplitterLayoutState) => void;
+}
 export interface ResolvedPanelMeta {
     id: string | number;
     index: number;

package/components/stepper/src/stepper.component.d.ts

@@ -1,10 +1,9 @@
 import { StepperSelectionEvent } from '@angular/cdk/stepper';
 import { MatStepper } from '@angular/material/stepper';
-import { SdBaseSecureComponent } from '@sdcorejs/angular/components/base';
 import { Color } from '@sdcorejs/utils/models';
 import { SdStep } from './step.component';
 import * as i0 from "@angular/core";
-export declare class SdStepper extends SdBaseSecureComponent {
+export declare class SdStepper {
     steps: import("@angular/core").Signal<readonly SdStep[]>;
     selectedIndex: import("@angular/core").ModelSignal<number>;
     linear: import("@angular/core").InputSignalWithTransform<boolean, unknown>;

package/components/tab/src/tab-group.component.d.ts

@@ -1,5 +1,4 @@
 import { MatTabGroup } from '@angular/material/tabs';
-import { SdBaseSecureComponent } from '@sdcorejs/angular/components/base';
 import { Color } from '@sdcorejs/utils/models';
 import { SdTab } from './tab.component';
 import * as i0 from "@angular/core";
@@ -7,7 +6,7 @@ export interface SdTabClosedEvent {
     index: number;
     tab: SdTab;
 }
-export declare class SdTabGroup extends SdBaseSecureComponent {
+export declare class SdTabGroup {
     tabs: import("@angular/core").Signal<readonly SdTab[]>;
     selectedIndex: import("@angular/core").ModelSignal<number>;
     variant: import("@angular/core").InputSignal<"line" | "pills" | "segmented">;

package/components/table/src/services/table-filter/table-filter.model.d.ts

@@ -47,6 +47,8 @@ export interface SdTableOptionFilter<T = any> {
     /** Chế độ thủ công: phải nhấn nút áp dụng mới gửi filter */
     manualFilter?: boolean;
     /** Có thể thu gọn bộ lọc hay không */
+    collapsible?: boolean;
+    /** @deprecated Use `collapsible` instead. */
     collapsable?: boolean;
     /** Ẩn toolbar (xóa bộ lọc, thiết lập) của external filter, khi có ít external filter user không cần chức năng này */
     hideExternalFilterToolbar?: boolean;

package/components/table/src/table.component.d.ts

@@ -13,7 +13,6 @@ import { SdTableColumn } from './models/table-column.model';
 import { SdTableOption } from './models/table-option.model';
 import { SdTableFilterRequest, TableFilterRegister } from './services/table-filter/table-filter.model';
 import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
-import { SdBaseSecureComponent } from '@sdcorejs/angular/components/base';
 import { SdQuickAction } from '@sdcorejs/angular/components/quick-action';
 import { SdScrollDirective } from '@sdcorejs/angular/directives';
 import { Operator } from '@sdcorejs/utils/models';
@@ -35,7 +34,7 @@ export declare class MatPaginatorIntlCro extends MatPaginatorIntl {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatPaginatorIntlCro, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MatPaginatorIntlCro>;
 }
-export declare class SdTable<T = unknown> extends SdBaseSecureComponent implements OnInit, AfterViewInit, OnDestroy {
+export declare class SdTable<T = unknown> implements OnInit, AfterViewInit, OnDestroy {
     #private;
     autoIdInput: import("@angular/core").InputSignal<string | null | undefined>;
     autoId: import("@angular/core").Signal<string | undefined>;

package/components/tree/index.d.ts

@@ -0,0 +1,3 @@
+export * from './src/tree.component';
+export * from './src/tree-item-def.directive';
+export * from './src/tree.model';

package/components/tree/src/tree-item-def.directive.d.ts

@@ -0,0 +1,9 @@
+import { TemplateRef } from '@angular/core';
+import { SdTreeItemContext } from './tree.model';
+import * as i0 from "@angular/core";
+export declare class SdTreeItemDefDirective<T = any> {
+    static ngTemplateContextGuard<T>(_dir: SdTreeItemDefDirective<T>, ctx: unknown): ctx is SdTreeItemContext<T>;
+    readonly templateRef: TemplateRef<SdTreeItemContext<T>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdTreeItemDefDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SdTreeItemDefDirective<any>, "[sdTreeItemDef]", never, {}, {}, never, never, true, never>;
+}

package/components/tree/src/tree.component.d.ts

@@ -0,0 +1,102 @@
+import { TemplateRef } from '@angular/core';
+import { SdTreeItemDefDirective } from './tree-item-def.directive';
+import { SdTreeCommand, SdTreeDataSource, SdTreeComponentOption, SdTreeItem, SdTreeItemContext, SdTreeNode, SdTreeOption, SdTreeSelectionAction, SdTreeSelectionEvent, SdTreeSelectorOption, SdTreeToggleEvent } from './tree.model';
+import * as i0 from "@angular/core";
+export type SdTreeAutoIdPart = 'row' | 'toggle' | 'checkbox' | 'icon' | 'label' | 'command';
+export interface SdTreeNodeAutoIds {
+    row?: string;
+    toggle?: string;
+    checkbox?: string;
+    icon?: string;
+    label?: string;
+    command?: string;
+}
+export interface SdTreeViewCommand<T = any> {
+    key: string;
+    command: SdTreeCommand<T>;
+    title: string;
+    icon: string;
+    color: SdTreeCommand<T>['color'];
+    fontSet: SdTreeCommand<T>['fontSet'];
+    disabled: boolean;
+    autoId?: string;
+    defaultColor: boolean;
+}
+export interface SdTreeViewNode<T = any> extends SdTreeNode<T> {
+    icon?: string;
+    selected: boolean;
+    selectionDisabled: boolean;
+    toggleDisabled: boolean;
+    toggleLabel: string;
+    ariaExpanded: boolean | null;
+    autoIds: SdTreeNodeAutoIds;
+    commands: SdTreeViewCommand<T>[];
+    context: SdTreeItemContext<T>;
+}
+export interface SdTreeSelectionActionView<T = any> {
+    action: SdTreeSelectionAction<T>;
+    autoId: string | null;
+}
+export declare class SdTree<T = any> {
+    #private;
+    readonly autoIdInput: import("@angular/core").InputSignal<string | null | undefined>;
+    readonly option: import("@angular/core").InputSignal<SdTreeComponentOption<T> | undefined>;
+    /** Migration bridge. New usage should put the data source in `option.items`. */
+    readonly items: import("@angular/core").InputSignal<SdTreeDataSource<SdTreeItem<T>> | undefined>;
+    /** Migration bridge. New usage should put static/lazy config in `option.tree`. */
+    readonly tree: import("@angular/core").InputSignal<SdTreeOption<T> | undefined>;
+    readonly selectedItemsInput: import("@angular/core").InputSignal<T[] | null | undefined>;
+    readonly commands: import("@angular/core").InputSignal<SdTreeCommand<T>[] | null | undefined>;
+    readonly selectable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly selector: import("@angular/core").InputSignal<SdTreeSelectorOption<T> | null | undefined>;
+    readonly itemTemplate: import("@angular/core").InputSignal<TemplateRef<SdTreeItemContext<T>> | null | undefined>;
+    readonly selectedItemsChange: import("@angular/core").OutputEmitterRef<T[]>;
+    readonly selectChange: import("@angular/core").OutputEmitterRef<SdTreeSelectionEvent<T>>;
+    readonly expandChange: import("@angular/core").OutputEmitterRef<SdTreeToggleEvent<T>>;
+    readonly collapseChange: import("@angular/core").OutputEmitterRef<SdTreeToggleEvent<T>>;
+    readonly itemDef: import("@angular/core").Signal<SdTreeItemDefDirective<any> | undefined>;
+    readonly resolvedItemsSource: import("@angular/core").Signal<SdTreeDataSource<SdTreeItem<T>>>;
+    readonly resolvedTree: import("@angular/core").Signal<SdTreeOption<T>>;
+    readonly resolvedSelector: import("@angular/core").Signal<SdTreeSelectorOption<T> | null | undefined>;
+    readonly resolvedCommands: import("@angular/core").Signal<SdTreeCommand<T>[]>;
+    readonly resolvedSelectable: import("@angular/core").Signal<boolean>;
+    readonly autoId: import("@angular/core").Signal<string | undefined>;
+    readonly resolvedItemTemplate: import("@angular/core").Signal<TemplateRef<SdTreeItemContext<T>> | undefined>;
+    readonly indentSize: import("@angular/core").Signal<number>;
+    readonly normalizedFilterText: import("@angular/core").Signal<string>;
+    readonly selectionVisible: import("@angular/core").Signal<boolean>;
+    readonly selectedIdSet: import("@angular/core").Signal<Set<string>>;
+    readonly rootNodes: import("@angular/core").Signal<SdTreeNode<T>[]>;
+    readonly visibleNodes: import("@angular/core").Signal<SdTreeNode<T>[]>;
+    readonly selectedItems: import("@angular/core").Signal<T[]>;
+    readonly selectedCount: import("@angular/core").Signal<number>;
+    readonly selectionMessage: import("@angular/core").Signal<string>;
+    readonly visibleSelectionActions: import("@angular/core").Signal<SdTreeSelectionAction<T>[]>;
+    readonly selectionActionViews: import("@angular/core").Signal<SdTreeSelectionActionView<T>[]>;
+    readonly clearSelectionAutoId: import("@angular/core").Signal<string | null>;
+    /**
+     * Template-facing row model. Expensive/variable values are resolved once per
+     * signal recomputation so the HTML does not call helper methods for every CD pass.
+     */
+    readonly visibleViewNodes: import("@angular/core").Signal<SdTreeViewNode<T>[]>;
+    readonly trackByNode: (_index: number, node: SdTreeNode<T>) => string;
+    constructor();
+    reload(): void;
+    filter(searchText: string | undefined | null): void;
+    isSelected(node: SdTreeNode<T>): boolean;
+    nodeIcon(node: SdTreeNode<T>): string | undefined;
+    visibleCommands(node: SdTreeNode<T>): SdTreeCommand<T>[];
+    isSelectionDisabled(node: SdTreeNode<T>): boolean;
+    commandTitle(command: SdTreeCommand<T>, item: T): string;
+    commandIcon(command: SdTreeCommand<T>, item: T): string;
+    isCommandDisabled(command: SdTreeCommand<T>, item: T): boolean;
+    toggle(node: SdTreeNode<T>, event?: Event): Promise<void>;
+    toggleSelection(node: SdTreeNode<T>, event?: Event): void;
+    clearSelection(): void;
+    onSelectionAction(action: SdTreeSelectionAction<T>): void;
+    createContext(node: SdTreeNode<T>): SdTreeItemContext<T>;
+    nodeAutoId(node: SdTreeNode<T>, part: SdTreeAutoIdPart): string | undefined;
+    commandAutoId(node: SdTreeNode<T>, command: SdTreeCommand<T>): string | undefined;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdTree<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdTree<any>, "sd-tree", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "option": { "alias": "option"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "tree": { "alias": "tree"; "required": false; "isSignal": true; }; "selectedItemsInput": { "alias": "selectedItems"; "required": false; "isSignal": true; }; "commands": { "alias": "commands"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "selector": { "alias": "selector"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; }, { "selectedItemsChange": "selectedItemsChange"; "selectChange": "selectChange"; "expandChange": "expandChange"; "collapseChange": "collapseChange"; }, ["itemDef"], never, true, never>;
+}

package/components/tree/src/tree.model.d.ts

@@ -0,0 +1,142 @@
+import { Signal, TemplateRef } from '@angular/core';
+import { SdButton } from '@sdcorejs/angular/components/button';
+import { MaterialIconFontSet, SdUnwrapSignal } from '@sdcorejs/angular/utilities/models';
+import { Color } from '@sdcorejs/utils/models';
+export type SdTreeDataSource<TItem = any> = TItem[] | Signal<TItem[]> | (() => TItem[] | Promise<TItem[]>);
+export type SdTreeLoadType = 'static' | 'lazy';
+export type SdTreeOption<T = any> = SdTreeStaticOption<T> | SdTreeLazyOption<T>;
+export type SdTreeItem<T = any> = SdTreeItemStatic<T> | SdTreeItemLazy<T>;
+export type SdTreeItemByLoadType<T = any, TLoadType extends SdTreeLoadType = SdTreeLoadType> = TLoadType extends 'lazy' ? SdTreeItemLazy<T> : SdTreeItemStatic<T>;
+export interface SdTreeItemBase<T = any> {
+    /** Stable node id used for expansion, selection, filtering ancestry, and auto-id generation. */
+    id: string;
+    /** Text shown by the default tree row. Custom templates can still read `item` / `treeItem`. */
+    label: string;
+    /**
+     * Optional node icon override.
+     * - Branch without `icon`: tree renders the default folder icon (`folder` / `folder_open`).
+     * - Leaf without `icon`: tree renders no icon.
+     * This replaces the old `leafIcon` split. One field is enough because each node decides its own icon.
+     */
+    icon?: string | null;
+    /** Consumer payload. Commands, selection callbacks, and `$implicit` template context receive this value. */
+    data: T;
+    /** Initial expansion state for this node. Component state wins after the user toggles. */
+    expanded?: boolean;
+}
+export interface SdTreeItemStatic<T = any> extends SdTreeItemBase<T> {
+    /** Static-mode children. Lazy mode does not use this field. */
+    children?: SdTreeItemStatic<T>[];
+    /** `hasChildren` belongs to lazy mode only; static mode derives branches from `children`. */
+    hasChildren?: never;
+}
+export interface SdTreeItemLazy<T = any> extends SdTreeItemBase<T> {
+    /** Lazy-mode hint. Set `false` for known leaf nodes that do not need `onExpandChildren`. */
+    hasChildren?: boolean;
+    /** `children` belongs to static mode only; lazy loaded children are cached inside the component. */
+    children?: never;
+}
+export interface SdTreeBaseOption {
+    maxDepth?: number;
+    indentSize?: number;
+}
+export interface SdTreeStaticOption<T = any> extends SdTreeBaseOption {
+    loadType: 'static';
+    /** Expand all (`true`), none (`false`), or root levels where `level < number`. */
+    defaultExpanded?: boolean | number;
+}
+export interface SdTreeLazyOption<T = any> extends SdTreeBaseOption {
+    loadType: 'lazy';
+    /**
+     * Called once when a lazy node is first expanded. Return wrapped `SdTreeItemLazy<T>` children,
+     * not raw data, so each child has a stable id/label/icon contract.
+     */
+    onExpandChildren: (item: SdTreeItemLazy<T>) => Promise<SdTreeItemLazy<T>[]> | SdTreeItemLazy<T>[];
+}
+export interface SdTreeCommand<T = any> {
+    key: string;
+    title: string | ((item: T) => string);
+    icon?: string | ((item: T) => string | undefined | null);
+    color?: Color;
+    fontSet?: MaterialIconFontSet;
+    disabled?: boolean | ((item: T) => boolean);
+    hidden?: boolean | ((item: T) => boolean);
+    click: (item: T) => void;
+}
+export interface SdTreeSelectorOption<T = any> {
+    visible?: boolean;
+    actions?: SdTreeSelectionAction<T>[];
+    message?: string | ((selectedItems: T[]) => string);
+    disabled?: (item: T, selectedItems: T[]) => boolean;
+}
+export interface SdTreeSelectionAction<T = any> {
+    icon?: string;
+    fontSet?: SdUnwrapSignal<SdButton['fontSet']>;
+    tooltip?: SdUnwrapSignal<SdButton['tooltip']>;
+    title?: SdUnwrapSignal<SdButton['title']>;
+    color?: SdUnwrapSignal<SdButton['color']>;
+    type?: SdUnwrapSignal<SdButton['type']>;
+    hidden?: boolean | ((selectedItems: T[]) => boolean);
+    click: (selectedItems: T[]) => void;
+}
+export interface SdTreeComponentOptionBase<T = any, TItem extends SdTreeItem<T> = SdTreeItem<T>> {
+    autoId?: string | null;
+    /** Root nodes can be an array, a signal, a sync loader, or an async loader. Call `reload()` to rerun loader sources. */
+    items: SdTreeDataSource<TItem>;
+    selectedItems?: T[] | null;
+    selector?: SdTreeSelectorOption<T> | null;
+    commands?: SdTreeCommand<T>[] | null;
+    itemTemplate?: SdTreeItemTemplate<T> | null;
+    selectable?: boolean;
+    onSelectedItemsChange?: (items: T[]) => void;
+    onSelect?: (event: SdTreeSelectionEvent<T>) => void;
+    onExpand?: (event: SdTreeToggleEvent<T>) => void;
+    onCollapse?: (event: SdTreeToggleEvent<T>) => void;
+}
+export interface SdTreeStaticComponentOption<T = any> extends SdTreeComponentOptionBase<T, SdTreeItemStatic<T>> {
+    /** Static tree is the default when `tree` is omitted. */
+    tree?: SdTreeStaticOption<T>;
+}
+export interface SdTreeLazyComponentOption<T = any> extends SdTreeComponentOptionBase<T, SdTreeItemLazy<T>> {
+    tree: SdTreeLazyOption<T>;
+}
+export type SdTreeComponentOption<T = any> = SdTreeStaticComponentOption<T> | SdTreeLazyComponentOption<T>;
+export interface SdTreeNode<T = any> {
+    /** Wrapped tree item containing id/label/icon/data plus mode-specific tree metadata. */
+    treeItem: SdTreeItem<T>;
+    /** Raw consumer payload. Kept as a shortcut because most callbacks operate on data, not wrapper metadata. */
+    data: T;
+    id: string;
+    label: string;
+    level: number;
+    parent: SdTreeNode<T> | null;
+    children: SdTreeNode<T>[];
+    hasChildren: boolean;
+    isExpanded: boolean;
+    isLoading: boolean;
+}
+export interface SdTreeItemContext<T = any> {
+    $implicit: T;
+    item: T;
+    treeItem: SdTreeItem<T>;
+    node: SdTreeNode<T>;
+    level: number;
+    expanded: boolean;
+    selected: boolean;
+    loading: boolean;
+    hasChildren: boolean;
+    isLeaf: boolean;
+    toggle: () => void;
+    select: () => void;
+}
+export type SdTreeItemTemplate<T = any> = TemplateRef<SdTreeItemContext<T>>;
+export interface SdTreeSelectionEvent<T = any> {
+    item: T;
+    selected: boolean;
+    selectedItems: T[];
+}
+export interface SdTreeToggleEvent<T = any> {
+    item: T;
+    expanded: boolean;
+    node: SdTreeNode<T>;
+}

package/components/upload-file/src/upload-file.component.d.ts

@@ -11,6 +11,8 @@ export declare class SdUploadFile<TArgs = any> {
     #private;
     readonly id: string;
     readonly formControl: SdFormControl;
+    /** Hiển thị message "vui lòng upload": không disabled + đã touched + còn lỗi required. */
+    readonly showRequiredError: import("@angular/core").Signal<boolean>;
     readonly previewFiles: import("@angular/core").WritableSignal<PreviewFile[]>;
     readonly selectedFile: import("@angular/core").WritableSignal<PreviewFile | null | undefined>;
     readonly previewFileComponent: import("@angular/core").Signal<PreviewComponent | undefined>;

package/fesm2022/sdcorejs-angular-components-button.mjs

@@ -10,13 +10,12 @@ import * as i4 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i5 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { SdBaseSecureComponent } from '@sdcorejs/angular/components/base';
 import { DefaultMaterialIconFontSet } from '@sdcorejs/angular/utilities/models';
 import { Subject, Subscription } from 'rxjs';
 import { throttleTime, filter } from 'rxjs/operators';
 
 /* eslint-disable @angular-eslint/no-input-rename */
-class SdButton extends SdBaseSecureComponent {
+class SdButton {
     // ==========================================
     // 1. INJECTS
     // ==========================================
@@ -67,7 +66,6 @@ class SdButton extends SdBaseSecureComponent {
     #clickSubject = new Subject();
     #subscription = new Subscription();
     constructor() {
-        super();
         // Kỹ thuật Đánh chặn sự kiện (Capture Phase)
         // Tóm sống mọi sự kiện click ngay khi nó vừa chạm vào component
         this.el.nativeElement.addEventListener('click', (event) => {
@@ -98,7 +96,7 @@ class SdButton extends SdBaseSecureComponent {
         this.#subscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdButton, isStandalone: true, selector: "sd-button", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fontSet: { classPropertyName: "fontSet", publicName: "fontSet", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, htmlType: { classPropertyName: "htmlType", publicName: "htmlType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, host: { properties: { "class.sd-disabled": "disabled()", "class.sd-loading": "loading()", "class.sd-block": "block()", "attr.disabled": "disabled() ? \"true\" : null" } }, usesInheritance: true, ngImport: i0, template: "@let btnType = type();\n@let btnLoad = loading();\n@let btnTitle = title();\n@let pIcon = prefixIcon();\n@let sIcon = suffixIcon();\n@let fSet = fontSet();\n@let hType = htmlType();\n@let _disabled = disabled();\n@let _color = color();\n@let _autoId = autoId();\n@let _width = width();\n@let _tooltip = tooltip();\n\n@if (btnType === 'fill') {\n  <button\n    mat-flat-button\n    class=\"c-button c-fill\"\n    [type]=\"hType\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"_disabled\"\n    [color]=\"_color\"\n    [attr.data-autoId]=\"_autoId\"\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\n    [style.width]=\"_width\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'light') {\n  <button\n    mat-flat-button\n    class=\"c-button c-light\"\n    [type]=\"hType\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"_disabled\"\n    [color]=\"_color\"\n    [attr.data-autoId]=\"_autoId\"\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\n    [style.width]=\"_width\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'outline') {\n  <button\n    mat-stroked-button\n    class=\"c-button c-outline\"\n    [type]=\"hType\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"_disabled\"\n    [color]=\"_color\"\n    [attr.data-autoId]=\"_autoId\"\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\n    [style.width]=\"_width\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'link') {\n  <button\n    mat-button\n    class=\"c-button c-link\"\n    [type]=\"hType\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"_disabled\"\n    [color]=\"_color\"\n    [attr.data-autoId]=\"_autoId\"\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\n    [style.width]=\"_width\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n}\n\n<ng-template #contentTpl>\n  <div class=\"c-button-content-wrapper\">\n    @if (btnLoad) {\n      <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\n    } @else if (pIcon) {\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-prefix\">{{ pIcon }}</mat-icon>\n    }\n\n    @if (btnTitle) {\n      <span class=\"c-title\" [class.ml-8]=\"btnLoad || pIcon\" [class.mr-8]=\"sIcon && !btnLoad\">\n        {{ btnTitle }}\n      </span>\n    }\n\n    @if (sIcon && !btnLoad) {\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-suffix\">{{ sIcon }}</mat-icon>\n    }\n\n    @if (!btnTitle && !pIcon && !btnLoad && sIcon) {\n      <mat-icon [fontSet]=\"fSet\">{{ sIcon }}</mat-icon>\n    }\n  </div>\n</ng-template>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{display:inline-block;pointer-events:auto}:host.sd-disabled{cursor:not-allowed}:host.sd-loading{cursor:wait}:host.sd-block{display:block;width:100%}:host.sd-block button{width:100%}:host ::ng-deep button.c-button{pointer-events:auto;min-width:auto;white-space:nowrap}:host ::ng-deep button.c-button .mat-button-wrapper,:host ::ng-deep button.c-button .mdc-button__label{display:flex;align-items:center;justify-content:center;width:100%;min-width:0}:host ::ng-deep button.c-button[disabled],:host ::ng-deep button.c-button.mat-button-disabled{pointer-events:none;color:#a6a6a6!important;background-color:#e9e9e9!important}:host ::ng-deep button.c-button.c-square{min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button.c-sm{font-size:14px!important;height:32px;line-height:20px!important;padding:2px 12px!important;font-weight:400}:host ::ng-deep button.c-button.c-sm mat-icon{height:16px!important;width:16px!important;font-size:16px!important}:host ::ng-deep button.c-button.c-sm.c-square{width:32px!important;min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button.c-md{font-size:16px;height:40px;line-height:20px;padding:2px 16px!important;font-weight:400}:host ::ng-deep button.c-button.c-md mat-icon{height:20px!important;width:20px!important;font-size:20px!important}:host ::ng-deep button.c-button.c-md.c-square{width:40px!important;min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button.c-lg{font-size:16px!important;line-height:20px!important;padding:2px 16px!important;height:48px}:host ::ng-deep button.c-button.c-lg.c-square{width:48px!important;min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button:focus{outline:none}:host ::ng-deep button.c-button.c-disabled{opacity:.5}:host ::ng-deep button.c-button.c-block{width:100%!important}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-primary{background-color:var(--sd-primary);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-info{background-color:var(--sd-info);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-success{background-color:var(--sd-success);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-warning{background-color:var(--sd-warning);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-error{background-color:var(--sd-error);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-secondary{background-color:#000!important;color:#fff}:host ::ng-deep button.c-button.c-fill .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#fff!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-primary{background-color:var(--sd-primary-light);color:var(--sd-primary)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-primary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-primary)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-info{background-color:var(--sd-info-light);color:var(--sd-info)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-info .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-info)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-success{background-color:var(--sd-success-light);color:var(--sd-success)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-success .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-success)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-warning{background-color:var(--sd-warning-light);color:var(--sd-warning)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-warning .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-warning)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-error{background-color:var(--sd-error-light);color:var(--sd-error)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-error .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-error)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-secondary{background-color:var(--sd-secondary-light);color:#000!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-secondary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#000!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button{border-color:#d3d3d3}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-primary{color:var(--sd-primary)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-primary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-primary)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-info{color:var(--sd-info)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-info .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-info)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-success{color:var(--sd-success)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-success .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-success)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-warning{color:var(--sd-warning)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-warning .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-warning)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-error{color:var(--sd-error)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-error .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-error)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-secondary{color:#000!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-secondary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#000!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-button-disabled{background:transparent!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-primary{color:var(--sd-primary)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-primary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-primary)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-info{color:var(--sd-info)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-info .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-info)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-success{color:var(--sd-success)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-success .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-success)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-warning{color:var(--sd-warning)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-warning .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-warning)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-error{color:var(--sd-error)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-error .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-error)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-secondary{color:#000!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-secondary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#000!important}:host ::ng-deep .c-button-content-wrapper{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;pointer-events:none}:host ::ng-deep .c-title{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .c-spinner{display:inline-block}:host.sd-loading ::ng-deep button.c-button{pointer-events:none;opacity:.85}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdButton, isStandalone: true, selector: "sd-button", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fontSet: { classPropertyName: "fontSet", publicName: "fontSet", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, htmlType: { classPropertyName: "htmlType", publicName: "htmlType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, host: { properties: { "class.sd-disabled": "disabled()", "class.sd-loading": "loading()", "class.sd-block": "block()", "attr.disabled": "disabled() ? \"true\" : null" } }, ngImport: i0, template: "@let btnType = type();\n@let btnLoad = loading();\n@let btnTitle = title();\n@let pIcon = prefixIcon();\n@let sIcon = suffixIcon();\n@let fSet = fontSet();\n@let hType = htmlType();\n@let _disabled = disabled();\n@let _color = color();\n@let _autoId = autoId();\n@let _width = width();\n@let _tooltip = tooltip();\n\n@if (btnType === 'fill') {\n  <button\n    mat-flat-button\n    class=\"c-button c-fill\"\n    [type]=\"hType\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"_disabled\"\n    [color]=\"_color\"\n    [attr.data-autoId]=\"_autoId\"\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\n    [style.width]=\"_width\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'light') {\n  <button\n    mat-flat-button\n    class=\"c-button c-light\"\n    [type]=\"hType\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"_disabled\"\n    [color]=\"_color\"\n    [attr.data-autoId]=\"_autoId\"\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\n    [style.width]=\"_width\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'outline') {\n  <button\n    mat-stroked-button\n    class=\"c-button c-outline\"\n    [type]=\"hType\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"_disabled\"\n    [color]=\"_color\"\n    [attr.data-autoId]=\"_autoId\"\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\n    [style.width]=\"_width\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'link') {\n  <button\n    mat-button\n    class=\"c-button c-link\"\n    [type]=\"hType\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"_disabled\"\n    [color]=\"_color\"\n    [attr.data-autoId]=\"_autoId\"\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\n    [style.width]=\"_width\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n}\n\n<ng-template #contentTpl>\n  <div class=\"c-button-content-wrapper\">\n    @if (btnLoad) {\n      <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\n    } @else if (pIcon) {\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-prefix\">{{ pIcon }}</mat-icon>\n    }\n\n    @if (btnTitle) {\n      <span class=\"c-title\" [class.ml-8]=\"btnLoad || pIcon\" [class.mr-8]=\"sIcon && !btnLoad\">\n        {{ btnTitle }}\n      </span>\n    }\n\n    @if (sIcon && !btnLoad) {\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-suffix\">{{ sIcon }}</mat-icon>\n    }\n\n    @if (!btnTitle && !pIcon && !btnLoad && sIcon) {\n      <mat-icon [fontSet]=\"fSet\">{{ sIcon }}</mat-icon>\n    }\n  </div>\n</ng-template>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{display:inline-block;pointer-events:auto}:host.sd-disabled{cursor:not-allowed}:host.sd-loading{cursor:wait}:host.sd-block{display:block;width:100%}:host.sd-block button{width:100%}:host ::ng-deep button.c-button{pointer-events:auto;min-width:auto;white-space:nowrap}:host ::ng-deep button.c-button .mat-button-wrapper,:host ::ng-deep button.c-button .mdc-button__label{display:flex;align-items:center;justify-content:center;width:100%;min-width:0}:host ::ng-deep button.c-button[disabled],:host ::ng-deep button.c-button.mat-button-disabled{pointer-events:none;color:#a6a6a6!important;background-color:#e9e9e9!important}:host ::ng-deep button.c-button.c-square{min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button.c-sm{font-size:14px!important;height:32px;line-height:20px!important;padding:2px 12px!important;font-weight:400}:host ::ng-deep button.c-button.c-sm mat-icon{height:16px!important;width:16px!important;font-size:16px!important}:host ::ng-deep button.c-button.c-sm.c-square{width:32px!important;min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button.c-md{font-size:16px;height:40px;line-height:20px;padding:2px 16px!important;font-weight:400}:host ::ng-deep button.c-button.c-md mat-icon{height:20px!important;width:20px!important;font-size:20px!important}:host ::ng-deep button.c-button.c-md.c-square{width:40px!important;min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button.c-lg{font-size:16px!important;line-height:20px!important;padding:2px 16px!important;height:48px}:host ::ng-deep button.c-button.c-lg.c-square{width:48px!important;min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button:focus{outline:none}:host ::ng-deep button.c-button.c-disabled{opacity:.5}:host ::ng-deep button.c-button.c-block{width:100%!important}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-primary{background-color:var(--sd-primary);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-info{background-color:var(--sd-info);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-success{background-color:var(--sd-success);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-warning{background-color:var(--sd-warning);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-error{background-color:var(--sd-error);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-secondary{background-color:#000!important;color:#fff}:host ::ng-deep button.c-button.c-fill .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#fff!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-primary{background-color:var(--sd-primary-light);color:var(--sd-primary)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-primary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-primary)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-info{background-color:var(--sd-info-light);color:var(--sd-info)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-info .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-info)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-success{background-color:var(--sd-success-light);color:var(--sd-success)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-success .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-success)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-warning{background-color:var(--sd-warning-light);color:var(--sd-warning)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-warning .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-warning)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-error{background-color:var(--sd-error-light);color:var(--sd-error)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-error .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-error)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-secondary{background-color:var(--sd-secondary-light);color:#000!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-secondary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#000!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button{border-color:#d3d3d3}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-primary{color:var(--sd-primary)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-primary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-primary)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-info{color:var(--sd-info)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-info .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-info)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-success{color:var(--sd-success)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-success .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-success)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-warning{color:var(--sd-warning)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-warning .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-warning)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-error{color:var(--sd-error)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-error .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-error)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-secondary{color:#000!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-secondary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#000!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-button-disabled{background:transparent!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-primary{color:var(--sd-primary)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-primary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-primary)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-info{color:var(--sd-info)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-info .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-info)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-success{color:var(--sd-success)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-success .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-success)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-warning{color:var(--sd-warning)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-warning .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-warning)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-error{color:var(--sd-error)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-error .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-error)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-secondary{color:#000!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-secondary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#000!important}:host ::ng-deep .c-button-content-wrapper{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;pointer-events:none}:host ::ng-deep .c-title{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .c-spinner{display:inline-block}:host.sd-loading ::ng-deep button.c-button{pointer-events:none;opacity:.85}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdButton, decorators: [{
             type: Component,

package/fesm2022/sdcorejs-angular-components-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sdcorejs-angular-components-button.mjs","sources":["../../../projects/sdcorejs-angular/components/button/src/button.component.ts","../../../projects/sdcorejs-angular/components/button/src/button.component.html","../../../projects/sdcorejs-angular/components/button/sdcorejs-angular-components-button.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\nimport { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  OnDestroy,\n  OnInit,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  output,\n} from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { SdBaseSecureComponent } from '@sdcorejs/angular/components/base';\nimport { Color } from '@sdcorejs/utils/models';\nimport { DefaultMaterialIconFontSet, MaterialIconFontSet } from '@sdcorejs/angular/utilities/models';\nimport { Subject, Subscription } from 'rxjs';\nimport { filter, throttleTime } from 'rxjs/operators';\n\n// Export các Type ra ngoài để tái sử dụng ở file config/interface\nexport type SdButtonType = 'fill' | 'light' | 'outline' | 'link';\nexport type SdButtonSize = 'sm' | 'md' | 'lg';\nexport type SdButtonHtmlType = 'button' | 'submit' | 'reset';\n\n@Component({\n  selector: 'sd-button',\n  templateUrl: './button.component.html',\n  styleUrls: ['./button.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [CommonModule, MatIconModule, MatButtonModule, MatProgressSpinnerModule, MatTooltipModule],\n  host: {\n    '[class.sd-disabled]': 'disabled()',\n    '[class.sd-loading]': 'loading()',\n    '[class.sd-block]': 'block()',\n    '[attr.disabled]': 'disabled() ? \"true\" : null',\n  }\n})\nexport class SdButton extends SdBaseSecureComponent implements OnInit, OnDestroy {\n  // ==========================================\n  // 1. INJECTS\n  // ==========================================\n  private el = inject(ElementRef);\n\n  // ==========================================\n  // 2. SIGNAL INPUTS (Bảo mật 100% với Null/Undefined)\n  // ==========================================\n  autoIdInput = input<string | undefined | null>(undefined, { alias: 'autoId' });\n  \n  type = input<SdButtonType, SdButtonType | undefined | null>('light', {\n    transform: (value) => value || 'light'\n  });\n\n  color = input<Color, Color | undefined | null>('secondary', {\n    transform: (value) => value || 'secondary'\n  });\n\n  size = input<SdButtonSize, SdButtonSize | undefined | null>('sm', {\n    transform: (value) => value || 'sm'\n  });\n\n  fontSet = input<MaterialIconFontSet, MaterialIconFontSet | undefined | null>(DefaultMaterialIconFontSet, {\n    transform: (value) => value || DefaultMaterialIconFontSet\n  });\n\n  title = input<string | undefined | null>(undefined);\n  width = input<string | undefined | null>(undefined);\n  tooltip = input<string | undefined | null>(undefined);\n  prefixIcon = input<string | undefined | null>(undefined);\n  suffixIcon = input<string | undefined | null>(undefined);\n\n  disabled = input(false, { transform: booleanAttribute });\n  loading = input(false, { transform: booleanAttribute });\n  block = input(false, { transform: booleanAttribute });\n\n  htmlType = input<SdButtonHtmlType, SdButtonHtmlType | undefined | null>('button', {\n    transform: (value) => value || 'button'\n  });\n\n  // ==========================================\n  // 3. COMPUTED STATE\n  // ==========================================\n  autoId = computed(() => this.autoIdInput() ? `components-button-${this.autoIdInput()}` : undefined);\n  \n  buttonClasses = computed(() => ({\n    'c-square': (this.prefixIcon() || this.suffixIcon()) && !this.title(),\n    'c-sm': this.size() === 'sm',\n    'c-md': this.size() === 'md',\n    'c-lg': this.size() === 'lg',\n    'c-disabled': this.disabled(),\n    'c-block': this.block(),\n  }));\n\n  // ==========================================\n  // 4. OUTPUT & RXJS STREAMS\n  // ==========================================\n  click = output<Event>();\n\n  #clickSubject = new Subject<Event>();\n  #subscription = new Subscription();\n\n  constructor() {\n    super();\n\n    // Kỹ thuật Đánh chặn sự kiện (Capture Phase)\n    // Tóm sống mọi sự kiện click ngay khi nó vừa chạm vào component\n    this.el.nativeElement.addEventListener(\n      'click',\n      (event: Event) => {\n        if (this.disabled() || this.loading()) {\n          // Nghiền nát sự kiện, không cho Angular phát (click) ra component cha\n          event.preventDefault();\n          event.stopPropagation();\n          event.stopImmediatePropagation();\n        }\n      },\n      { capture: true }\n    );\n  }\n\n  ngOnInit() {\n    this.#subscription.add(\n      this.#clickSubject\n        .pipe(\n          throttleTime(300, undefined, { leading: true, trailing: false }),\n          filter(() => !this.disabled() && !this.loading())\n        )\n        .subscribe(event => {\n          this.click.emit(event);\n        })\n    );\n  }\n\n  // Nhận click từ thẻ button con bên trong\n  onInternalClick(event: Event) {\n    event.stopPropagation();\n    \n    if (this.disabled() || this.loading()) {\n      return;\n    }\n\n    this.#clickSubject.next(event);\n  }\n\n  ngOnDestroy() {\n    this.#subscription.unsubscribe();\n  }\n}","@let btnType = type();\n@let btnLoad = loading();\n@let btnTitle = title();\n@let pIcon = prefixIcon();\n@let sIcon = suffixIcon();\n@let fSet = fontSet();\n@let hType = htmlType();\n@let _disabled = disabled();\n@let _color = color();\n@let _autoId = autoId();\n@let _width = width();\n@let _tooltip = tooltip();\n\n@if (btnType === 'fill') {\n  <button\n    mat-flat-button\n    class=\"c-button c-fill\"\n    [type]=\"hType\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"_disabled\"\n    [color]=\"_color\"\n    [attr.data-autoId]=\"_autoId\"\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\n    [style.width]=\"_width\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'light') {\n  <button\n    mat-flat-button\n    class=\"c-button c-light\"\n    [type]=\"hType\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"_disabled\"\n    [color]=\"_color\"\n    [attr.data-autoId]=\"_autoId\"\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\n    [style.width]=\"_width\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'outline') {\n  <button\n    mat-stroked-button\n    class=\"c-button c-outline\"\n    [type]=\"hType\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"_disabled\"\n    [color]=\"_color\"\n    [attr.data-autoId]=\"_autoId\"\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\n    [style.width]=\"_width\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'link') {\n  <button\n    mat-button\n    class=\"c-button c-link\"\n    [type]=\"hType\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"_disabled\"\n    [color]=\"_color\"\n    [attr.data-autoId]=\"_autoId\"\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\n    [style.width]=\"_width\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n}\n\n<ng-template #contentTpl>\n  <div class=\"c-button-content-wrapper\">\n    @if (btnLoad) {\n      <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\n    } @else if (pIcon) {\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-prefix\">{{ pIcon }}</mat-icon>\n    }\n\n    @if (btnTitle) {\n      <span class=\"c-title\" [class.ml-8]=\"btnLoad || pIcon\" [class.mr-8]=\"sIcon && !btnLoad\">\n        {{ btnTitle }}\n      </span>\n    }\n\n    @if (sIcon && !btnLoad) {\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-suffix\">{{ sIcon }}</mat-icon>\n    }\n\n    @if (!btnTitle && !pIcon && !btnLoad && sIcon) {\n      <mat-icon [fontSet]=\"fSet\">{{ sIcon }}</mat-icon>\n    }\n  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sdcorejs-angular-components-button.mjs","sources":["../../../projects/sdcorejs-angular/components/button/src/button.component.ts","../../../projects/sdcorejs-angular/components/button/src/button.component.html","../../../projects/sdcorejs-angular/components/button/sdcorejs-angular-components-button.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\nimport { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  OnDestroy,\n  OnInit,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  output,\n} from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { Color } from '@sdcorejs/utils/models';\nimport { DefaultMaterialIconFontSet, MaterialIconFontSet } from '@sdcorejs/angular/utilities/models';\nimport { Subject, Subscription } from 'rxjs';\nimport { filter, throttleTime } from 'rxjs/operators';\n\n// Export các Type ra ngoài để tái sử dụng ở file config/interface\nexport type SdButtonType = 'fill' | 'light' | 'outline' | 'link';\nexport type SdButtonSize = 'sm' | 'md' | 'lg';\nexport type SdButtonHtmlType = 'button' | 'submit' | 'reset';\n\n@Component({\n  selector: 'sd-button',\n  templateUrl: './button.component.html',\n  styleUrls: ['./button.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [CommonModule, MatIconModule, MatButtonModule, MatProgressSpinnerModule, MatTooltipModule],\n  host: {\n    '[class.sd-disabled]': 'disabled()',\n    '[class.sd-loading]': 'loading()',\n    '[class.sd-block]': 'block()',\n    '[attr.disabled]': 'disabled() ? \"true\" : null',\n  }\n})\nexport class SdButton implements OnInit, OnDestroy {\n  // ==========================================\n  // 1. INJECTS\n  // ==========================================\n  private el = inject(ElementRef);\n\n  // ==========================================\n  // 2. SIGNAL INPUTS (Bảo mật 100% với Null/Undefined)\n  // ==========================================\n  autoIdInput = input<string | undefined | null>(undefined, { alias: 'autoId' });\n  \n  type = input<SdButtonType, SdButtonType | undefined | null>('light', {\n    transform: (value) => value || 'light'\n  });\n\n  color = input<Color, Color | undefined | null>('secondary', {\n    transform: (value) => value || 'secondary'\n  });\n\n  size = input<SdButtonSize, SdButtonSize | undefined | null>('sm', {\n    transform: (value) => value || 'sm'\n  });\n\n  fontSet = input<MaterialIconFontSet, MaterialIconFontSet | undefined | null>(DefaultMaterialIconFontSet, {\n    transform: (value) => value || DefaultMaterialIconFontSet\n  });\n\n  title = input<string | undefined | null>(undefined);\n  width = input<string | undefined | null>(undefined);\n  tooltip = input<string | undefined | null>(undefined);\n  prefixIcon = input<string | undefined | null>(undefined);\n  suffixIcon = input<string | undefined | null>(undefined);\n\n  disabled = input(false, { transform: booleanAttribute });\n  loading = input(false, { transform: booleanAttribute });\n  block = input(false, { transform: booleanAttribute });\n\n  htmlType = input<SdButtonHtmlType, SdButtonHtmlType | undefined | null>('button', {\n    transform: (value) => value || 'button'\n  });\n\n  // ==========================================\n  // 3. COMPUTED STATE\n  // ==========================================\n  autoId = computed(() => this.autoIdInput() ? `components-button-${this.autoIdInput()}` : undefined);\n  \n  buttonClasses = computed(() => ({\n    'c-square': (this.prefixIcon() || this.suffixIcon()) && !this.title(),\n    'c-sm': this.size() === 'sm',\n    'c-md': this.size() === 'md',\n    'c-lg': this.size() === 'lg',\n    'c-disabled': this.disabled(),\n    'c-block': this.block(),\n  }));\n\n  // ==========================================\n  // 4. OUTPUT & RXJS STREAMS\n  // ==========================================\n  click = output<Event>();\n\n  #clickSubject = new Subject<Event>();\n  #subscription = new Subscription();\n\n  constructor() {\n\n    // Kỹ thuật Đánh chặn sự kiện (Capture Phase)\n    // Tóm sống mọi sự kiện click ngay khi nó vừa chạm vào component\n    this.el.nativeElement.addEventListener(\n      'click',\n      (event: Event) => {\n        if (this.disabled() || this.loading()) {\n          // Nghiền nát sự kiện, không cho Angular phát (click) ra component cha\n          event.preventDefault();\n          event.stopPropagation();\n          event.stopImmediatePropagation();\n        }\n      },\n      { capture: true }\n    );\n  }\n\n  ngOnInit() {\n    this.#subscription.add(\n      this.#clickSubject\n        .pipe(\n          throttleTime(300, undefined, { leading: true, trailing: false }),\n          filter(() => !this.disabled() && !this.loading())\n        )\n        .subscribe(event => {\n          this.click.emit(event);\n        })\n    );\n  }\n\n  // Nhận click từ thẻ button con bên trong\n  onInternalClick(event: Event) {\n    event.stopPropagation();\n    \n    if (this.disabled() || this.loading()) {\n      return;\n    }\n\n    this.#clickSubject.next(event);\n  }\n\n  ngOnDestroy() {\n    this.#subscription.unsubscribe();\n  }\n}","@let btnType = type();\n@let btnLoad = loading();\n@let btnTitle = title();\n@let pIcon = prefixIcon();\n@let sIcon = suffixIcon();\n@let fSet = fontSet();\n@let hType = htmlType();\n@let _disabled = disabled();\n@let _color = color();\n@let _autoId = autoId();\n@let _width = width();\n@let _tooltip = tooltip();\n\n@if (btnType === 'fill') {\n  <button\n    mat-flat-button\n    class=\"c-button c-fill\"\n    [type]=\"hType\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"_disabled\"\n    [color]=\"_color\"\n    [attr.data-autoId]=\"_autoId\"\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\n    [style.width]=\"_width\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'light') {\n  <button\n    mat-flat-button\n    class=\"c-button c-light\"\n    [type]=\"hType\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"_disabled\"\n    [color]=\"_color\"\n    [attr.data-autoId]=\"_autoId\"\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\n    [style.width]=\"_width\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'outline') {\n  <button\n    mat-stroked-button\n    class=\"c-button c-outline\"\n    [type]=\"hType\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"_disabled\"\n    [color]=\"_color\"\n    [attr.data-autoId]=\"_autoId\"\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\n    [style.width]=\"_width\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'link') {\n  <button\n    mat-button\n    class=\"c-button c-link\"\n    [type]=\"hType\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"_disabled\"\n    [color]=\"_color\"\n    [attr.data-autoId]=\"_autoId\"\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\n    [style.width]=\"_width\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n}\n\n<ng-template #contentTpl>\n  <div class=\"c-button-content-wrapper\">\n    @if (btnLoad) {\n      <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\n    } @else if (pIcon) {\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-prefix\">{{ pIcon }}</mat-icon>\n    }\n\n    @if (btnTitle) {\n      <span class=\"c-title\" [class.ml-8]=\"btnLoad || pIcon\" [class.mr-8]=\"sIcon && !btnLoad\">\n        {{ btnTitle }}\n      </span>\n    }\n\n    @if (sIcon && !btnLoad) {\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-suffix\">{{ sIcon }}</mat-icon>\n    }\n\n    @if (!btnTitle && !pIcon && !btnLoad && sIcon) {\n      <mat-icon [fontSet]=\"fSet\">{{ sIcon }}</mat-icon>\n    }\n  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA;MA0Ca,QAAQ,CAAA;;;;AAIX,IAAA,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC;;;;IAK/B,WAAW,GAAG,KAAK,CAA4B,SAAS,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AAE9E,IAAA,IAAI,GAAG,KAAK,CAAgD,OAAO,EAAE;QACnE,SAAS,EAAE,CAAC,KAAK,KAAK,KAAK,IAAI;AAChC,KAAA,CAAC;AAEF,IAAA,KAAK,GAAG,KAAK,CAAkC,WAAW,EAAE;QAC1D,SAAS,EAAE,CAAC,KAAK,KAAK,KAAK,IAAI;AAChC,KAAA,CAAC;AAEF,IAAA,IAAI,GAAG,KAAK,CAAgD,IAAI,EAAE;QAChE,SAAS,EAAE,CAAC,KAAK,KAAK,KAAK,IAAI;AAChC,KAAA,CAAC;AAEF,IAAA,OAAO,GAAG,KAAK,CAA8D,0BAA0B,EAAE;QACvG,SAAS,EAAE,CAAC,KAAK,KAAK,KAAK,IAAI;AAChC,KAAA,CAAC;AAEF,IAAA,KAAK,GAAG,KAAK,CAA4B,SAAS,CAAC;AACnD,IAAA,KAAK,GAAG,KAAK,CAA4B,SAAS,CAAC;AACnD,IAAA,OAAO,GAAG,KAAK,CAA4B,SAAS,CAAC;AACrD,IAAA,UAAU,GAAG,KAAK,CAA4B,SAAS,CAAC;AACxD,IAAA,UAAU,GAAG,KAAK,CAA4B,SAAS,CAAC;IAExD,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;IACxD,OAAO,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;IACvD,KAAK,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAErD,IAAA,QAAQ,GAAG,KAAK,CAAwD,QAAQ,EAAE;QAChF,SAAS,EAAE,CAAC,KAAK,KAAK,KAAK,IAAI;AAChC,KAAA,CAAC;;;;IAKF,MAAM,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,GAAG,CAAA,kBAAA,EAAqB,IAAI,CAAC,WAAW,EAAE,CAAA,CAAE,GAAG,SAAS,CAAC;AAEnG,IAAA,aAAa,GAAG,QAAQ,CAAC,OAAO;AAC9B,QAAA,UAAU,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE;AACrE,QAAA,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI;AAC5B,QAAA,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI;AAC5B,QAAA,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI;AAC5B,QAAA,YAAY,EAAE,IAAI,CAAC,QAAQ,EAAE;AAC7B,QAAA,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE;AACxB,KAAA,CAAC,CAAC;;;;IAKH,KAAK,GAAG,MAAM,EAAS;AAEvB,IAAA,aAAa,GAAG,IAAI,OAAO,EAAS;AACpC,IAAA,aAAa,GAAG,IAAI,YAAY,EAAE;AAElC,IAAA,WAAA,GAAA;;;AAIE,QAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CACpC,OAAO,EACP,CAAC,KAAY,KAAI;YACf,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE;;gBAErC,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,eAAe,EAAE;gBACvB,KAAK,CAAC,wBAAwB,EAAE;YAClC;AACF,QAAA,CAAC,EACD,EAAE,OAAO,EAAE,IAAI,EAAE,CAClB;IACH;IAEA,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CACpB,IAAI,CAAC;AACF,aAAA,IAAI,CACH,YAAY,CAAC,GAAG,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAChE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;aAElD,SAAS,CAAC,KAAK,IAAG;AACjB,YAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;QACxB,CAAC,CAAC,CACL;IACH;;AAGA,IAAA,eAAe,CAAC,KAAY,EAAA;QAC1B,KAAK,CAAC,eAAe,EAAE;QAEvB,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE;YACrC;QACF;AAEA,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;IAChC;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,aAAa,CAAC,WAAW,EAAE;IAClC;wGA3GW,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAR,QAAQ,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,mBAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,SAAA,EAAA,eAAA,EAAA,8BAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC1CrB,61GA0GA,EAAA,MAAA,EAAA,CAAA,23ZAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDxEY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,6GAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,wBAAwB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAQvF,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAdpB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,mBAGJ,uBAAuB,CAAC,MAAM,EAAA,UAAA,EACnC,IAAI,WACP,CAAC,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,wBAAwB,EAAE,gBAAgB,CAAC,EAAA,IAAA,EAC7F;AACJ,wBAAA,qBAAqB,EAAE,YAAY;AACnC,wBAAA,oBAAoB,EAAE,WAAW;AACjC,wBAAA,kBAAkB,EAAE,SAAS;AAC7B,wBAAA,iBAAiB,EAAE,4BAA4B;AAChD,qBAAA,EAAA,QAAA,EAAA,61GAAA,EAAA,MAAA,EAAA,CAAA,23ZAAA,CAAA,EAAA;;;AExCH;;AAEG;;;;"}