@sd-angular/core 19.0.3 → 19.0.5

package/components/query-builder/src/query-builder.serializer.d.ts

@@ -0,0 +1,32 @@
+import { Filter } from '@sdcorejs/utils/models';
+import { QbGroup, QbToken, SdQueryBuilderField } from './query-builder.model';
+/**
+ * Map the internal builder tree to the public `Filter` (the root is always a
+ * `FilterAndOr`). Rules missing field / operator / value — and empty nested
+ * groups — are dropped so the result is always a valid `Filter`.
+ *
+ * @param group - the editable tree's root group.
+ * @returns the canonical nested `Filter`, or `null` when no complete rule survives.
+ */
+export declare function treeToFilter(group: QbGroup): Filter | null;
+/**
+ * Inverse of {@link treeToFilter} — rebuild the editable tree from a `Filter` so a
+ * consumer can seed `[value]`. A non-group (bare) filter is wrapped in an AND root;
+ * `null` yields an empty AND root.
+ *
+ * @param filter - a `Filter` (group or leaf), or `null` / `undefined` for an empty tree.
+ * @returns a fresh root `QbGroup` mirroring the filter's structure.
+ */
+export declare function filterToTree(filter: Filter | null | undefined): QbGroup;
+/**
+ * Render a `Filter` to a SQL-ish token stream for view mode. Field tokens use the
+ * matching field's `label`; operators map to SQL syntax (`= != like between is null …`);
+ * `and` / `or` are lowercase; nested multi-child groups are wrapped in parentheses.
+ * Returns a token stream (not a string) so the template can wrap each piece in a
+ * highlight `<span>` keyed by `QbToken.kind`.
+ *
+ * @param filter - the `Filter` to render, or `null` / `undefined`.
+ * @param fields - field metadata, used to resolve each field key to its display label + value formatting.
+ * @returns the ordered tokens, or `[]` when `filter` is empty.
+ */
+export declare function filterToTokens(filter: Filter | null | undefined, fields: SdQueryBuilderField[]): QbToken[];

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

@@ -1,18 +1,20 @@
-import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
 import { Color } from '@sdcorejs/utils/models';
 import * as i0 from "@angular/core";
-export declare class SdSection extends SdBaseSecureComponent {
+export declare class SdSection {
     #private;
     title: import("@angular/core").InputSignal<string | null | undefined>;
     subTitle: import("@angular/core").InputSignal<string | null | undefined>;
     icon: import("@angular/core").InputSignal<string | null | undefined>;
     iconColor: import("@angular/core").InputSignal<Color>;
     collapsed: import("@angular/core").ModelSignal<boolean>;
+    collapsible: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** @deprecated Use `collapsible` instead. */
     collapsable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly isCollapsible: import("@angular/core").Signal<boolean>;
     hideHeader: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     noPaddingBody: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     constructor();
     toggleCollapse: () => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdSection, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdSection, "sd-section", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subTitle": { "alias": "subTitle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "collapsable": { "alias": "collapsable"; "required": false; "isSignal": true; }; "hideHeader": { "alias": "hideHeader"; "required": false; "isSignal": true; }; "noPaddingBody": { "alias": "noPaddingBody"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["[sdHeaderLeft]", "[sdHeaderRight]", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdSection, "sd-section", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subTitle": { "alias": "subTitle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "collapsable": { "alias": "collapsable"; "required": false; "isSignal": true; }; "hideHeader": { "alias": "hideHeader"; "required": false; "isSignal": true; }; "noPaddingBody": { "alias": "noPaddingBody"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["[sdHeaderLeft]", "[sdHeaderRight]", "*"], true, never>;
 }

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

@@ -1,8 +1,7 @@
 import { CdkPortal } from '@angular/cdk/portal';
-import { SdBaseSecureComponent } from '@sd-angular/core/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 '@sd-angular/core/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 '@sd-angular/core/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 '@sd-angular/core/components/base';
 import { SdQuickAction } from '@sd-angular/core/components/quick-action';
 import { SdScrollDirective } from '@sd-angular/core/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 '@sd-angular/core/components/button';
+import { MaterialIconFontSet, SdUnwrapSignal } from '@sd-angular/core/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/sd-angular-core-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 '@sd-angular/core/components/base';
 import { DefaultMaterialIconFontSet } from '@sd-angular/core/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();\r\n@let btnLoad = loading();\r\n@let btnTitle = title();\r\n@let pIcon = prefixIcon();\r\n@let sIcon = suffixIcon();\r\n@let fSet = fontSet();\r\n@let hType = htmlType();\r\n@let _disabled = disabled();\r\n@let _color = color();\r\n@let _autoId = autoId();\r\n@let _width = width();\r\n@let _tooltip = tooltip();\r\n\r\n@if (btnType === 'fill') {\r\n  <button\r\n    mat-flat-button\r\n    class=\"c-button c-fill\"\r\n    [type]=\"hType\"\r\n    [ngClass]=\"buttonClasses()\"\r\n    [disabled]=\"_disabled\"\r\n    [color]=\"_color\"\r\n    [attr.data-autoId]=\"_autoId\"\r\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\r\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\r\n    [style.width]=\"_width\"\r\n    [matTooltip]=\"_tooltip || ''\"\r\n    matTooltipPosition=\"above\"\r\n    (click)=\"onInternalClick($event)\">\r\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\r\n  </button>\r\n} @else if (btnType === 'light') {\r\n  <button\r\n    mat-flat-button\r\n    class=\"c-button c-light\"\r\n    [type]=\"hType\"\r\n    [ngClass]=\"buttonClasses()\"\r\n    [disabled]=\"_disabled\"\r\n    [color]=\"_color\"\r\n    [attr.data-autoId]=\"_autoId\"\r\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\r\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\r\n    [style.width]=\"_width\"\r\n    [matTooltip]=\"_tooltip || ''\"\r\n    matTooltipPosition=\"above\"\r\n    (click)=\"onInternalClick($event)\">\r\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\r\n  </button>\r\n} @else if (btnType === 'outline') {\r\n  <button\r\n    mat-stroked-button\r\n    class=\"c-button c-outline\"\r\n    [type]=\"hType\"\r\n    [ngClass]=\"buttonClasses()\"\r\n    [disabled]=\"_disabled\"\r\n    [color]=\"_color\"\r\n    [attr.data-autoId]=\"_autoId\"\r\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\r\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\r\n    [style.width]=\"_width\"\r\n    [matTooltip]=\"_tooltip || ''\"\r\n    matTooltipPosition=\"above\"\r\n    (click)=\"onInternalClick($event)\">\r\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\r\n  </button>\r\n} @else if (btnType === 'link') {\r\n  <button\r\n    mat-button\r\n    class=\"c-button c-link\"\r\n    [type]=\"hType\"\r\n    [ngClass]=\"buttonClasses()\"\r\n    [disabled]=\"_disabled\"\r\n    [color]=\"_color\"\r\n    [attr.data-autoId]=\"_autoId\"\r\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\r\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\r\n    [style.width]=\"_width\"\r\n    [matTooltip]=\"_tooltip || ''\"\r\n    matTooltipPosition=\"above\"\r\n    (click)=\"onInternalClick($event)\">\r\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\r\n  </button>\r\n}\r\n\r\n<ng-template #contentTpl>\r\n  <div class=\"c-button-content-wrapper\">\r\n    @if (btnLoad) {\r\n      <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\r\n    } @else if (pIcon) {\r\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-prefix\">{{ pIcon }}</mat-icon>\r\n    }\r\n\r\n    @if (btnTitle) {\r\n      <span class=\"c-title\" [class.ml-8]=\"btnLoad || pIcon\" [class.mr-8]=\"sIcon && !btnLoad\">\r\n        {{ btnTitle }}\r\n      </span>\r\n    }\r\n\r\n    @if (sIcon && !btnLoad) {\r\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-suffix\">{{ sIcon }}</mat-icon>\r\n    }\r\n\r\n    @if (!btnTitle && !pIcon && !btnLoad && sIcon) {\r\n      <mat-icon [fontSet]=\"fSet\">{{ sIcon }}</mat-icon>\r\n    }\r\n  </div>\r\n</ng-template>\r\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();\r\n@let btnLoad = loading();\r\n@let btnTitle = title();\r\n@let pIcon = prefixIcon();\r\n@let sIcon = suffixIcon();\r\n@let fSet = fontSet();\r\n@let hType = htmlType();\r\n@let _disabled = disabled();\r\n@let _color = color();\r\n@let _autoId = autoId();\r\n@let _width = width();\r\n@let _tooltip = tooltip();\r\n\r\n@if (btnType === 'fill') {\r\n  <button\r\n    mat-flat-button\r\n    class=\"c-button c-fill\"\r\n    [type]=\"hType\"\r\n    [ngClass]=\"buttonClasses()\"\r\n    [disabled]=\"_disabled\"\r\n    [color]=\"_color\"\r\n    [attr.data-autoId]=\"_autoId\"\r\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\r\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\r\n    [style.width]=\"_width\"\r\n    [matTooltip]=\"_tooltip || ''\"\r\n    matTooltipPosition=\"above\"\r\n    (click)=\"onInternalClick($event)\">\r\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\r\n  </button>\r\n} @else if (btnType === 'light') {\r\n  <button\r\n    mat-flat-button\r\n    class=\"c-button c-light\"\r\n    [type]=\"hType\"\r\n    [ngClass]=\"buttonClasses()\"\r\n    [disabled]=\"_disabled\"\r\n    [color]=\"_color\"\r\n    [attr.data-autoId]=\"_autoId\"\r\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\r\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\r\n    [style.width]=\"_width\"\r\n    [matTooltip]=\"_tooltip || ''\"\r\n    matTooltipPosition=\"above\"\r\n    (click)=\"onInternalClick($event)\">\r\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\r\n  </button>\r\n} @else if (btnType === 'outline') {\r\n  <button\r\n    mat-stroked-button\r\n    class=\"c-button c-outline\"\r\n    [type]=\"hType\"\r\n    [ngClass]=\"buttonClasses()\"\r\n    [disabled]=\"_disabled\"\r\n    [color]=\"_color\"\r\n    [attr.data-autoId]=\"_autoId\"\r\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\r\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\r\n    [style.width]=\"_width\"\r\n    [matTooltip]=\"_tooltip || ''\"\r\n    matTooltipPosition=\"above\"\r\n    (click)=\"onInternalClick($event)\">\r\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\r\n  </button>\r\n} @else if (btnType === 'link') {\r\n  <button\r\n    mat-button\r\n    class=\"c-button c-link\"\r\n    [type]=\"hType\"\r\n    [ngClass]=\"buttonClasses()\"\r\n    [disabled]=\"_disabled\"\r\n    [color]=\"_color\"\r\n    [attr.data-autoId]=\"_autoId\"\r\n    [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\r\n    [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\r\n    [style.width]=\"_width\"\r\n    [matTooltip]=\"_tooltip || ''\"\r\n    matTooltipPosition=\"above\"\r\n    (click)=\"onInternalClick($event)\">\r\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\r\n  </button>\r\n}\r\n\r\n<ng-template #contentTpl>\r\n  <div class=\"c-button-content-wrapper\">\r\n    @if (btnLoad) {\r\n      <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\r\n    } @else if (pIcon) {\r\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-prefix\">{{ pIcon }}</mat-icon>\r\n    }\r\n\r\n    @if (btnTitle) {\r\n      <span class=\"c-title\" [class.ml-8]=\"btnLoad || pIcon\" [class.mr-8]=\"sIcon && !btnLoad\">\r\n        {{ btnTitle }}\r\n      </span>\r\n    }\r\n\r\n    @if (sIcon && !btnLoad) {\r\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-suffix\">{{ sIcon }}</mat-icon>\r\n    }\r\n\r\n    @if (!btnTitle && !pIcon && !btnLoad && sIcon) {\r\n      <mat-icon [fontSet]=\"fSet\">{{ sIcon }}</mat-icon>\r\n    }\r\n  </div>\r\n</ng-template>\r\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,