@sd-angular/core 19.0.30 → 19.0.32

package/components/data-state/index.d.ts

@@ -0,0 +1 @@
+export * from './src/data-state.component';

package/components/data-state/src/data-state.component.d.ts

@@ -0,0 +1,41 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export type SdIconSet = 'material-icons' | 'material-icons-outlined' | 'material-icons-round' | 'material-icons-sharp' | 'lucide';
+export type SdDataStateKind = 'loading' | 'empty' | 'error' | 'forbidden' | 'success';
+export interface SdDataStateTemplateContext {
+    readonly $implicit: SdDataStateKind;
+    readonly state: SdDataStateKind;
+    readonly retry: () => void;
+    readonly action: () => void;
+}
+export declare class SdDataStateTemplateDirective {
+    readonly template: TemplateRef<SdDataStateTemplateContext>;
+    static ngTemplateContextGuard(_directive: SdDataStateTemplateDirective, _context: unknown): _context is SdDataStateTemplateContext;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdDataStateTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SdDataStateTemplateDirective, "ng-template[sdDataStateTemplate]", never, {}, {}, never, never, true, never>;
+}
+export declare class SdDataState {
+    readonly state: import("@angular/core").InputSignal<SdDataStateKind>;
+    readonly title: import("@angular/core").InputSignal<string | null | undefined>;
+    readonly message: import("@angular/core").InputSignal<string | null | undefined>;
+    readonly icon: import("@angular/core").InputSignal<string | null | undefined>;
+    readonly fontSet: import("@angular/core").InputSignal<SdIconSet | undefined>;
+    readonly retryable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly retryLabel: import("@angular/core").InputSignal<string | null | undefined>;
+    readonly actionLabel: import("@angular/core").InputSignal<string | null | undefined>;
+    readonly compact: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly fullPage: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly sdRetry: import("@angular/core").OutputEmitterRef<void>;
+    readonly sdAction: import("@angular/core").OutputEmitterRef<void>;
+    protected readonly customTemplate: import("@angular/core").Signal<SdDataStateTemplateDirective | undefined>;
+    protected readonly effectiveFontSet: import("@angular/core").Signal<SdIconSet>;
+    protected readonly effectiveIcon: import("@angular/core").Signal<string | null>;
+    protected readonly titleKey: import("@angular/core").Signal<string>;
+    protected readonly messageKey: import("@angular/core").Signal<string>;
+    protected readonly role: import("@angular/core").Signal<"alert" | "status">;
+    protected readonly retry: () => void;
+    protected readonly action: () => void;
+    protected readonly templateContext: import("@angular/core").Signal<SdDataStateTemplateContext>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdDataState, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdDataState, "sd-data-state", never, { "state": { "alias": "state"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "fontSet": { "alias": "fontSet"; "required": false; "isSignal": true; }; "retryable": { "alias": "retryable"; "required": false; "isSignal": true; }; "retryLabel": { "alias": "retryLabel"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "fullPage": { "alias": "fullPage"; "required": false; "isSignal": true; }; }, { "sdRetry": "sdRetry"; "sdAction": "sdAction"; }, ["customTemplate"], ["*"], true, never>;
+}

package/components/import-excel/src/import-excel.component.d.ts

@@ -19,13 +19,35 @@ export declare class SdImportExcel implements OnInit, OnDestroy {
     excelItems: SdImportExcelItem[];
     hasDescription: boolean;
     showing: 'ALL' | 'SUCCESS' | 'WARNING' | 'ERROR';
+    readonly filters: readonly [{
+        readonly value: "ALL";
+        readonly label: "core.component.import-excel.filter-all";
+        readonly icon: "list_alt";
+    }, {
+        readonly value: "SUCCESS";
+        readonly label: "core.component.import-excel.filter-success";
+        readonly icon: "check_circle_outline";
+    }, {
+        readonly value: "WARNING";
+        readonly label: "core.component.import-excel.filter-warning";
+        readonly icon: "warning_amber";
+    }, {
+        readonly value: "ERROR";
+        readonly label: "core.component.import-excel.filter-error";
+        readonly icon: "error_outline";
+    }];
+    filterCount: (value: "ALL" | "SUCCESS" | "WARNING" | "ERROR") => number;
+    protected validationMessages: (item: SdImportExcelItem) => {
+        errors: string[];
+        warnings: string[];
+    };
     filteredItems: SdImportExcelItem[];
     viewItems: SdImportExcelItem[];
     numberOfSuccess: number;
     numberOfError: number;
     numberOfWarning: number;
     file?: File;
-    set paginator(paginator: MatPaginator);
+    set paginator(paginator: MatPaginator | undefined);
     uploading: boolean;
     isUploaded: boolean;
     isDownloadTemplate: boolean;

package/components/index.d.ts

@@ -25,3 +25,4 @@ export * from '@sd-angular/core/components/editor';
 export * from '@sd-angular/core/components/splitter';
 export * from '@sd-angular/core/components/preview';
 export * from '@sd-angular/core/components/autoid-inspector';
+export * from '@sd-angular/core/components/data-state';

package/components/quick-action/src/quick-action.component.d.ts

@@ -4,6 +4,8 @@ export declare class SdQuickAction {
      * Toggle visibility of the floating toolbar. Bare attribute = true.
      */
     readonly opened: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Keep the toolbar in its owner's layout (for a sticky table footer or a drawer). */
+    readonly contained: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdQuickAction, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdQuickAction, "sd-quick-action", never, { "opened": { "alias": "opened"; "required": false; "isSignal": true; }; }, {}, never, ["[sdMessage]", "[sdAction]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdQuickAction, "sd-quick-action", never, { "opened": { "alias": "opened"; "required": false; "isSignal": true; }; "contained": { "alias": "contained"; "required": false; "isSignal": true; }; }, {}, never, ["[sdMessage]", "[sdAction]"], true, never>;
 }

package/components/table/src/components/selector-action/selector-action.component.d.ts

@@ -10,7 +10,18 @@ export declare class SelectorActionComponent {
     clear: import("@angular/core").OutputEmitterRef<void>;
     autoId: import("@angular/core").Signal<string>;
     message: import("@angular/core").Signal<string>;
+    readonly actions: import("@angular/core").Signal<Action[]>;
     opened: import("@angular/core").Signal<boolean>;
+    readonly directActions: import("@angular/core").Signal<{
+        action: Action;
+        index: number;
+    }[]>;
+    readonly overflowActions: import("@angular/core").Signal<{
+        action: Action;
+        index: number;
+    }[]>;
+    readonly moreLabel: import("@angular/core").Signal<string>;
+    readonly clearLabel: import("@angular/core").Signal<string>;
     onClear: () => void;
     onClickAction: (action: Action) => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectorActionComponent, never>;

package/components/table/src/services/table-local/table-local-sort.util.d.ts

@@ -0,0 +1,3 @@
+import type { SdTableColumn } from '../../models/table-column.model';
+/** Internal local-sort comparison; intentionally not exported from the table entry point. */
+export declare const compareLocalValues: (a: unknown, b: unknown, type: SdTableColumn["type"], direction: "ASC" | "DESC") => number;

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

@@ -13,6 +13,8 @@ import { SdTableColumn } from './models/table-column.model';
 import { SdTableOption } from './models/table-option.model';
 import { SdTableFilterRequest, TableFilterRegister, TableFilterValue } from './services/table-filter/table-filter.model';
 import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
+import { SdDataStateTemplateDirective } from '@sd-angular/core/components/data-state';
+import { SdReadState } from '@sd-angular/core/utilities/read-state';
 import { SdQuickAction } from '@sd-angular/core/components/quick-action';
 import { SdScrollDirective } from '@sd-angular/core/directives';
 import { Operator } from '@sdcorejs/utils/models';
@@ -39,6 +41,11 @@ export declare class SdTable<T = unknown> implements AfterViewInit, OnDestroy {
     autoIdInput: import("@angular/core").InputSignal<string | null | undefined>;
     autoId: import("@angular/core").Signal<string | undefined>;
     option: import("@angular/core").InputSignal<SdTableOption<T>>;
+    /** Hide the integrated error region while retaining read state, events and retry. */
+    readonly hideReadError: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly sdReadStateChange: import("@angular/core").OutputEmitterRef<SdReadState>;
+    readonly readState: import("@angular/core").Signal<SdReadState>;
+    readonly dataStateTemplate: import("@angular/core").Signal<SdDataStateTemplateDirective | undefined>;
     table: import("@angular/core").Signal<MatTable<any> | undefined>;
     configComponent: import("@angular/core").Signal<ConfigComponent | undefined>;
     sdPopupExport: import("@angular/core").Signal<SdPopupExport | undefined>;
@@ -80,6 +87,8 @@ export declare class SdTable<T = unknown> implements AfterViewInit, OnDestroy {
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     getFilterRequest: () => SdTableFilterRequest;
+    /** Retry only the still-valid failed server request, without resetting filters or paging. */
+    retryRead: () => Promise<void>;
     reload: (force?: boolean, scrollTop?: boolean) => Promise<void>;
     exportExcel: (columns?: SdExcelColumn[]) => void;
     exportCSV: (columns?: SdExcelColumn[]) => void;
@@ -128,5 +137,5 @@ export declare class SdTable<T = unknown> implements AfterViewInit, OnDestroy {
     reorderSortPredicate: (index: number, drag: CdkDrag<SdTableItem<T>>, drop: CdkDropList<SdTableItem<T>[]>) => boolean;
     onReorderDrop(event: CdkDragDrop<SdTableItem<T>[]>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdTable<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdTable<any>, "sd-table", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "option": { "alias": "option"; "required": true; "isSignal": true; }; }, {}, ["sdSubInformation", "sdGroupDef", "sdCellDefs", "sdFooterDefs", "sdFilterDefs", "sdTitleDefs"], ["[sdTableTop]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdTable<any>, "sd-table", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "option": { "alias": "option"; "required": true; "isSignal": true; }; "hideReadError": { "alias": "hideReadError"; "required": false; "isSignal": true; }; }, { "sdReadStateChange": "sdReadStateChange"; }, ["dataStateTemplate", "sdSubInformation", "sdGroupDef", "sdCellDefs", "sdFooterDefs", "sdFilterDefs", "sdTitleDefs"], ["[sdTableTop]"], true, never>;
 }

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

@@ -28,6 +28,7 @@ export declare class SdUploadFile<TArgs = any> {
     readonly label: import("@angular/core").InputSignal<string | undefined>;
     readonly key: import("@angular/core").InputSignal<string | undefined>;
     readonly description: import("@angular/core").InputSignal<string | undefined>;
+    readonly appearance: import("@angular/core").InputSignal<"dropzone" | "compact">;
     readonly previewWidth: import("@angular/core").InputSignal<string>;
     readonly previewHeight: import("@angular/core").InputSignal<string>;
     readonly align: import("@angular/core").InputSignal<"left" | "center">;
@@ -58,6 +59,9 @@ export declare class SdUploadFile<TArgs = any> {
     onDrop: (event: CdkDragDrop<string[]>) => void;
     onImgError: (previewFile: PreviewFile) => void;
     onSelect: (file: PreviewFile) => void;
+    readonly isTouchDevice: boolean;
+    onUploadKeydown: (event: Event) => void;
+    onSelectKeydown: (file: PreviewFile, event: KeyboardEvent) => void;
     /**
      * Lấy danh sách các File từ previewFiles (chưa upload).
      */
@@ -86,5 +90,5 @@ export declare class SdUploadFile<TArgs = any> {
     onDownload: (previewFile: PreviewFile) => void;
     isLastVisibleOverlay(fileIndex: number): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdUploadFile<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdUploadFile<any>, "sd-upload-file", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "args": { "alias": "args"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "key": { "alias": "key"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "previewWidth": { "alias": "previewWidth"; "required": false; "isSignal": true; }; "previewHeight": { "alias": "previewHeight"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "uploadInput": { "alias": "upload"; "required": false; "isSignal": true; }; "details": { "alias": "details"; "required": false; "isSignal": true; }; "downloadInput": { "alias": "download"; "required": false; "isSignal": true; }; "imageValidator": { "alias": "imageValidator"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "scaleToPixel": { "alias": "scaleToPixel"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "nameInput": { "alias": "name"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "maxOfImage": { "alias": "maxOfImage"; "required": false; "isSignal": true; }; "extensions": { "alias": "extensions"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; }, { "loaded": "loaded"; "filesChanged": "filesChanged"; "model": "modelChange"; }, ["sdLabelDef"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdUploadFile<any>, "sd-upload-file", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "args": { "alias": "args"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "key": { "alias": "key"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "previewWidth": { "alias": "previewWidth"; "required": false; "isSignal": true; }; "previewHeight": { "alias": "previewHeight"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "uploadInput": { "alias": "upload"; "required": false; "isSignal": true; }; "details": { "alias": "details"; "required": false; "isSignal": true; }; "downloadInput": { "alias": "download"; "required": false; "isSignal": true; }; "imageValidator": { "alias": "imageValidator"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "scaleToPixel": { "alias": "scaleToPixel"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "nameInput": { "alias": "name"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "maxOfImage": { "alias": "maxOfImage"; "required": false; "isSignal": true; }; "extensions": { "alias": "extensions"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; }, { "loaded": "loaded"; "filesChanged": "filesChanged"; "model": "modelChange"; }, ["sdLabelDef"], never, true, never>;
 }

package/fesm2022/sd-angular-core-components-button.mjs

@@ -96,7 +96,7 @@ class SdButton {
         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" } }, ngImport: i0, template: "@let _type = type();\n@let _loading = loading();\n@let _title = title();\n@let _prefixIcon = prefixIcon();\n@let _suffixIcon = suffixIcon();\n@let _fontSet = fontSet();\n@let _htmlType = htmlType();\n@let _disabled = disabled();\n@let _color = color();\n@let _autoId = autoId();\n@let _width = width();\n@let _tooltip = tooltip();\n\n@if (_type === 'fill') {\n  <button\n    mat-flat-button\n    class=\"c-button c-fill\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_type === 'light') {\n  <button\n    mat-flat-button\n    class=\"c-button c-light\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_type === 'outline') {\n  <button\n    mat-stroked-button\n    class=\"c-button c-outline\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_type === 'link') {\n  <button\n    mat-button\n    class=\"c-button c-link\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_loading) {\n      <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\n    } @else if (_prefixIcon) {\n      <mat-icon [fontSet]=\"_fontSet\" class=\"c-icon-prefix\">{{ _prefixIcon }}</mat-icon>\n    }\n\n    @if (_title) {\n      <span class=\"c-title\" [class.ml-8]=\"_loading || _prefixIcon\" [class.mr-8]=\"_suffixIcon && !_loading\">\n        {{ _title }}\n      </span>\n    }\n\n    @if (_suffixIcon && !_loading) {\n      <mat-icon [fontSet]=\"_fontSet\" class=\"c-icon-suffix\">{{ _suffixIcon }}</mat-icon>\n    }\n\n    @if (!_title && !_prefixIcon && !_loading && _suffixIcon) {\n      <mat-icon [fontSet]=\"_fontSet\">{{ _suffixIcon }}</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 _type = type();\n@let _loading = loading();\n@let _title = title();\n@let _prefixIcon = prefixIcon();\n@let _suffixIcon = suffixIcon();\n@let _fontSet = fontSet();\n@let _htmlType = htmlType();\n@let _disabled = disabled();\n@let _color = color();\n@let _autoId = autoId();\n@let _width = width();\n@let _tooltip = tooltip();\n\n@if (_type === 'fill') {\n  <button\n    mat-flat-button\n    class=\"c-button c-fill\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_type === 'light') {\n  <button\n    mat-flat-button\n    class=\"c-button c-light\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_type === 'outline') {\n  <button\n    mat-stroked-button\n    class=\"c-button c-outline\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_type === 'link') {\n  <button\n    mat-button\n    class=\"c-button c-link\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_loading) {\n      <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\n    } @else if (_prefixIcon) {\n      <mat-icon [fontSet]=\"_fontSet\" class=\"c-icon-prefix\">{{ _prefixIcon }}</mat-icon>\n    }\n\n    @if (_title) {\n      <span class=\"c-title\">\n        {{ _title }}\n      </span>\n    }\n\n    @if (_suffixIcon && !_loading) {\n      <mat-icon [fontSet]=\"_fontSet\" class=\"c-icon-suffix\">{{ _suffixIcon }}</mat-icon>\n    }\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;font-weight:500;letter-spacing:normal;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:var(--sd-disabled-text, var(--sd-black400, #757575))!important;background-color:var(--sd-disabled-bg, var(--sd-secondary-light, #e9e9e9))!important;border-color:var(--sd-border, var(--sd-black300, #bfbfbf))!important}:host ::ng-deep button.c-button[disabled].c-outline,:host ::ng-deep button.c-button[disabled].c-link,:host ::ng-deep button.c-button.mat-button-disabled.c-outline,:host ::ng-deep button.c-button.mat-button-disabled.c-link{background-color:transparent!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}:host ::ng-deep button.c-button.c-sm .c-button-content-wrapper{gap:6px}: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}: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:focus-visible{outline:2px solid var(--sd-primary, #2a66f4);outline-offset:2px}: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:not([disabled]){background-color:var(--sd-primary);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-info:not([disabled]){background-color:var(--sd-info);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-success:not([disabled]){background-color:var(--sd-success);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-warning:not([disabled]){background-color:var(--sd-warning);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-error:not([disabled]){background-color:var(--sd-error);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-secondary:not([disabled]){background-color:var(--sd-secondary)!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:not([disabled]){background-color:var(--sd-primary-light);color:var(--sd-primary)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-primary:not([disabled]) .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:not([disabled]){background-color:var(--sd-info-light);color:var(--sd-info)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-info:not([disabled]) .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:not([disabled]){background-color:var(--sd-success-light);color:var(--sd-success)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-success:not([disabled]) .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:not([disabled]){background-color:var(--sd-warning-light);color:var(--sd-warning)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-warning:not([disabled]) .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:not([disabled]){background-color:var(--sd-error-light);color:var(--sd-error)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-error:not([disabled]) .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:not([disabled]){background-color:var(--sd-secondary-light);color:var(--sd-secondary)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-secondary:not([disabled]) .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-secondary)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button{border-color:var(--sd-border-strong, var(--sd-black400, #757575))}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-primary:not([disabled]){color:var(--sd-primary)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-primary:not([disabled]) .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:not([disabled]){color:var(--sd-info)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-info:not([disabled]) .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:not([disabled]){color:var(--sd-success)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-success:not([disabled]) .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:not([disabled]){color:var(--sd-warning)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-warning:not([disabled]) .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:not([disabled]){color:var(--sd-error)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-error:not([disabled]) .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:not([disabled]){color:var(--sd-secondary)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-secondary:not([disabled]) .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-secondary)!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:not([disabled]){color:var(--sd-primary)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-primary:not([disabled]) .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:not([disabled]){color:var(--sd-info)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-info:not([disabled]) .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:not([disabled]){color:var(--sd-success)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-success:not([disabled]) .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:not([disabled]){color:var(--sd-warning)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-warning:not([disabled]) .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:not([disabled]){color:var(--sd-error)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-error:not([disabled]) .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:not([disabled]){color:var(--sd-secondary)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-secondary:not([disabled]) .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-secondary)!important}:host ::ng-deep .c-button-content-wrapper{display:flex;gap:8px;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 mat-icon{flex:0 0 auto}:host ::ng-deep .c-spinner{flex:0 0 auto;display:inline-block}:host.sd-loading ::ng-deep button.c-button:not([disabled]){pointer-events:none;opacity:.85}@media(prefers-reduced-motion:reduce){:host ::ng-deep .c-spinner,:host ::ng-deep .c-spinner *{animation:none!important;transition:none!important}}\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,
@@ -105,7 +105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '[class.sd-loading]': 'loading()',
                         '[class.sd-block]': 'block()',
                         '[attr.disabled]': 'disabled() ? "true" : null',
-                    }, template: "@let _type = type();\n@let _loading = loading();\n@let _title = title();\n@let _prefixIcon = prefixIcon();\n@let _suffixIcon = suffixIcon();\n@let _fontSet = fontSet();\n@let _htmlType = htmlType();\n@let _disabled = disabled();\n@let _color = color();\n@let _autoId = autoId();\n@let _width = width();\n@let _tooltip = tooltip();\n\n@if (_type === 'fill') {\n  <button\n    mat-flat-button\n    class=\"c-button c-fill\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_type === 'light') {\n  <button\n    mat-flat-button\n    class=\"c-button c-light\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_type === 'outline') {\n  <button\n    mat-stroked-button\n    class=\"c-button c-outline\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_type === 'link') {\n  <button\n    mat-button\n    class=\"c-button c-link\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_loading) {\n      <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\n    } @else if (_prefixIcon) {\n      <mat-icon [fontSet]=\"_fontSet\" class=\"c-icon-prefix\">{{ _prefixIcon }}</mat-icon>\n    }\n\n    @if (_title) {\n      <span class=\"c-title\" [class.ml-8]=\"_loading || _prefixIcon\" [class.mr-8]=\"_suffixIcon && !_loading\">\n        {{ _title }}\n      </span>\n    }\n\n    @if (_suffixIcon && !_loading) {\n      <mat-icon [fontSet]=\"_fontSet\" class=\"c-icon-suffix\">{{ _suffixIcon }}</mat-icon>\n    }\n\n    @if (!_title && !_prefixIcon && !_loading && _suffixIcon) {\n      <mat-icon [fontSet]=\"_fontSet\">{{ _suffixIcon }}</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"] }]
+                    }, template: "@let _type = type();\n@let _loading = loading();\n@let _title = title();\n@let _prefixIcon = prefixIcon();\n@let _suffixIcon = suffixIcon();\n@let _fontSet = fontSet();\n@let _htmlType = htmlType();\n@let _disabled = disabled();\n@let _color = color();\n@let _autoId = autoId();\n@let _width = width();\n@let _tooltip = tooltip();\n\n@if (_type === 'fill') {\n  <button\n    mat-flat-button\n    class=\"c-button c-fill\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_type === 'light') {\n  <button\n    mat-flat-button\n    class=\"c-button c-light\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_type === 'outline') {\n  <button\n    mat-stroked-button\n    class=\"c-button c-outline\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_type === 'link') {\n  <button\n    mat-button\n    class=\"c-button c-link\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_loading) {\n      <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\n    } @else if (_prefixIcon) {\n      <mat-icon [fontSet]=\"_fontSet\" class=\"c-icon-prefix\">{{ _prefixIcon }}</mat-icon>\n    }\n\n    @if (_title) {\n      <span class=\"c-title\">\n        {{ _title }}\n      </span>\n    }\n\n    @if (_suffixIcon && !_loading) {\n      <mat-icon [fontSet]=\"_fontSet\" class=\"c-icon-suffix\">{{ _suffixIcon }}</mat-icon>\n    }\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;font-weight:500;letter-spacing:normal;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:var(--sd-disabled-text, var(--sd-black400, #757575))!important;background-color:var(--sd-disabled-bg, var(--sd-secondary-light, #e9e9e9))!important;border-color:var(--sd-border, var(--sd-black300, #bfbfbf))!important}:host ::ng-deep button.c-button[disabled].c-outline,:host ::ng-deep button.c-button[disabled].c-link,:host ::ng-deep button.c-button.mat-button-disabled.c-outline,:host ::ng-deep button.c-button.mat-button-disabled.c-link{background-color:transparent!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}:host ::ng-deep button.c-button.c-sm .c-button-content-wrapper{gap:6px}: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}: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:focus-visible{outline:2px solid var(--sd-primary, #2a66f4);outline-offset:2px}: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:not([disabled]){background-color:var(--sd-primary);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-info:not([disabled]){background-color:var(--sd-info);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-success:not([disabled]){background-color:var(--sd-success);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-warning:not([disabled]){background-color:var(--sd-warning);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-error:not([disabled]){background-color:var(--sd-error);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-secondary:not([disabled]){background-color:var(--sd-secondary)!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:not([disabled]){background-color:var(--sd-primary-light);color:var(--sd-primary)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-primary:not([disabled]) .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:not([disabled]){background-color:var(--sd-info-light);color:var(--sd-info)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-info:not([disabled]) .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:not([disabled]){background-color:var(--sd-success-light);color:var(--sd-success)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-success:not([disabled]) .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:not([disabled]){background-color:var(--sd-warning-light);color:var(--sd-warning)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-warning:not([disabled]) .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:not([disabled]){background-color:var(--sd-error-light);color:var(--sd-error)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-error:not([disabled]) .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:not([disabled]){background-color:var(--sd-secondary-light);color:var(--sd-secondary)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-secondary:not([disabled]) .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-secondary)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button{border-color:var(--sd-border-strong, var(--sd-black400, #757575))}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-primary:not([disabled]){color:var(--sd-primary)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-primary:not([disabled]) .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:not([disabled]){color:var(--sd-info)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-info:not([disabled]) .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:not([disabled]){color:var(--sd-success)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-success:not([disabled]) .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:not([disabled]){color:var(--sd-warning)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-warning:not([disabled]) .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:not([disabled]){color:var(--sd-error)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-error:not([disabled]) .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:not([disabled]){color:var(--sd-secondary)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-secondary:not([disabled]) .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-secondary)!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:not([disabled]){color:var(--sd-primary)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-primary:not([disabled]) .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:not([disabled]){color:var(--sd-info)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-info:not([disabled]) .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:not([disabled]){color:var(--sd-success)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-success:not([disabled]) .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:not([disabled]){color:var(--sd-warning)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-warning:not([disabled]) .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:not([disabled]){color:var(--sd-error)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-error:not([disabled]) .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:not([disabled]){color:var(--sd-secondary)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-secondary:not([disabled]) .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-secondary)!important}:host ::ng-deep .c-button-content-wrapper{display:flex;gap:8px;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 mat-icon{flex:0 0 auto}:host ::ng-deep .c-spinner{flex:0 0 auto;display:inline-block}:host.sd-loading ::ng-deep button.c-button:not([disabled]){pointer-events:none;opacity:.85}@media(prefers-reduced-motion:reduce){:host ::ng-deep .c-spinner,:host ::ng-deep .c-spinner *{animation:none!important;transition:none!important}}\n"] }]
         }], ctorParameters: () => [] });
 
 /**

package/fesm2022/sd-angular-core-components-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-components-button.mjs","sources":["../../../projects/sd-angular/components/button/src/button.component.ts","../../../projects/sd-angular/components/button/src/button.component.html","../../../projects/sd-angular/components/button/sd-angular-core-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 '@sd-angular/core/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  styleUrl: './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 _type = type();\n@let _loading = loading();\n@let _title = title();\n@let _prefixIcon = prefixIcon();\n@let _suffixIcon = suffixIcon();\n@let _fontSet = fontSet();\n@let _htmlType = htmlType();\n@let _disabled = disabled();\n@let _color = color();\n@let _autoId = autoId();\n@let _width = width();\n@let _tooltip = tooltip();\n\n@if (_type === 'fill') {\n  <button\n    mat-flat-button\n    class=\"c-button c-fill\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_type === 'light') {\n  <button\n    mat-flat-button\n    class=\"c-button c-light\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_type === 'outline') {\n  <button\n    mat-stroked-button\n    class=\"c-button c-outline\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_type === 'link') {\n  <button\n    mat-button\n    class=\"c-button c-link\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_loading) {\n      <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\n    } @else if (_prefixIcon) {\n      <mat-icon [fontSet]=\"_fontSet\" class=\"c-icon-prefix\">{{ _prefixIcon }}</mat-icon>\n    }\n\n    @if (_title) {\n      <span class=\"c-title\" [class.ml-8]=\"_loading || _prefixIcon\" [class.mr-8]=\"_suffixIcon && !_loading\">\n        {{ _title }}\n      </span>\n    }\n\n    @if (_suffixIcon && !_loading) {\n      <mat-icon [fontSet]=\"_fontSet\" class=\"c-icon-suffix\">{{ _suffixIcon }}</mat-icon>\n    }\n\n    @if (!_title && !_prefixIcon && !_loading && _suffixIcon) {\n      <mat-icon [fontSet]=\"_fontSet\">{{ _suffixIcon }}</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":"sd-angular-core-components-button.mjs","sources":["../../../projects/sd-angular/components/button/src/button.component.ts","../../../projects/sd-angular/components/button/src/button.component.html","../../../projects/sd-angular/components/button/sd-angular-core-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 '@sd-angular/core/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  styleUrl: './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 _type = type();\n@let _loading = loading();\n@let _title = title();\n@let _prefixIcon = prefixIcon();\n@let _suffixIcon = suffixIcon();\n@let _fontSet = fontSet();\n@let _htmlType = htmlType();\n@let _disabled = disabled();\n@let _color = color();\n@let _autoId = autoId();\n@let _width = width();\n@let _tooltip = tooltip();\n\n@if (_type === 'fill') {\n  <button\n    mat-flat-button\n    class=\"c-button c-fill\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_type === 'light') {\n  <button\n    mat-flat-button\n    class=\"c-button c-light\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_type === 'outline') {\n  <button\n    mat-stroked-button\n    class=\"c-button c-outline\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_type === 'link') {\n  <button\n    mat-button\n    class=\"c-button c-link\"\n    [type]=\"_htmlType\"\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]=\"_loading ? '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 (_loading) {\n      <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\n    } @else if (_prefixIcon) {\n      <mat-icon [fontSet]=\"_fontSet\" class=\"c-icon-prefix\">{{ _prefixIcon }}</mat-icon>\n    }\n\n    @if (_title) {\n      <span class=\"c-title\">\n        {{ _title }}\n      </span>\n    }\n\n    @if (_suffixIcon && !_loading) {\n      <mat-icon [fontSet]=\"_fontSet\" class=\"c-icon-suffix\">{{ _suffixIcon }}</mat-icon>\n    }\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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"}

package/fesm2022/sd-angular-core-components-data-state.mjs

@@ -0,0 +1,72 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, input, booleanAttribute, output, contentChild, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { TranslatePipe } from '@sd-angular/core/i18n';
+import * as i1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { SdButton } from '@sd-angular/core/components/button';
+
+class SdDataStateTemplateDirective {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, _context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdDataStateTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: SdDataStateTemplateDirective, isStandalone: true, selector: "ng-template[sdDataStateTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdDataStateTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[sdDataStateTemplate]',
+                    standalone: true,
+                }]
+        }] });
+const DEFAULT_ICON = {
+    loading: 'autorenew',
+    empty: 'inbox',
+    error: 'error_outline',
+    forbidden: 'lock',
+    success: null,
+};
+class SdDataState {
+    state = input('success');
+    title = input();
+    message = input();
+    icon = input();
+    fontSet = input();
+    retryable = input(false, { transform: booleanAttribute });
+    retryLabel = input();
+    actionLabel = input();
+    compact = input(false, { transform: booleanAttribute });
+    fullPage = input(false, { transform: booleanAttribute });
+    sdRetry = output();
+    sdAction = output();
+    customTemplate = contentChild(SdDataStateTemplateDirective);
+    // why: core dùng Material; giữ kiểu API nguồn và fallback Lucide về bộ font có sẵn.
+    effectiveFontSet = computed(() => this.fontSet() === 'lucide' ? 'material-icons-outlined' : (this.fontSet() ?? 'material-icons-outlined'));
+    effectiveIcon = computed(() => this.icon() ?? DEFAULT_ICON[this.state()]);
+    titleKey = computed(() => `core.component.data-state.${this.state()}.title`);
+    messageKey = computed(() => `core.component.data-state.${this.state()}.message`);
+    role = computed(() => this.state() === 'error' || this.state() === 'forbidden' ? 'alert' : 'status');
+    retry = () => this.sdRetry.emit();
+    action = () => this.sdAction.emit();
+    templateContext = computed(() => ({
+        $implicit: this.state(),
+        state: this.state(),
+        retry: this.retry,
+        action: this.action,
+    }));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdDataState, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdDataState, isStandalone: true, selector: "sd-data-state", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, fontSet: { classPropertyName: "fontSet", publicName: "fontSet", isSignal: true, isRequired: false, transformFunction: null }, retryable: { classPropertyName: "retryable", publicName: "retryable", isSignal: true, isRequired: false, transformFunction: null }, retryLabel: { classPropertyName: "retryLabel", publicName: "retryLabel", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, fullPage: { classPropertyName: "fullPage", publicName: "fullPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdRetry: "sdRetry", sdAction: "sdAction" }, queries: [{ propertyName: "customTemplate", first: true, predicate: SdDataStateTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@let currentState = state();\n@let template = customTemplate();\n@let _role = role();\n@let _retryable = retryable();\n@let _actionLabel = actionLabel();\n@let currentIcon = effectiveIcon();\n\n@if (currentState === 'success') {\n  @if (template) {\n    <ng-container [ngTemplateOutlet]=\"template.template\" [ngTemplateOutletContext]=\"templateContext()\"></ng-container>\n  } @else {\n    <ng-content></ng-content>\n  }\n} @else if (template) {\n  <ng-container [ngTemplateOutlet]=\"template.template\" [ngTemplateOutletContext]=\"templateContext()\"></ng-container>\n} @else {\n  <section\n    class=\"sd-data-state\"\n    [class.sd-data-state--compact]=\"compact()\"\n    [class.sd-data-state--full-page]=\"fullPage()\"\n    [class.sd-data-state--with-icon]=\"!!currentIcon\"\n    [attr.data-state]=\"currentState\"\n    [attr.role]=\"_role\"\n    [attr.aria-busy]=\"currentState === 'loading' ? 'true' : null\"\n    [attr.aria-live]=\"_role === 'alert' ? 'assertive' : 'polite'\">\n    @if (currentIcon) {\n      <span class=\"sd-data-state__symbol\" aria-hidden=\"true\">\n        <mat-icon class=\"sd-data-state__icon\" [fontSet]=\"effectiveFontSet()\">{{ currentIcon }}</mat-icon>\n      </span>\n    }\n\n    <div class=\"sd-data-state__title\">{{ title() ?? (titleKey() | translate) }}</div>\n    <div class=\"sd-data-state__message\">{{ message() ?? (messageKey() | translate) }}</div>\n\n    @if (_retryable || _actionLabel) {\n      <div class=\"sd-data-state__actions\">\n        @if (_retryable) {\n          <sd-button\n            data-state-retry\n            type=\"light\"\n            color=\"primary\"\n            size=\"sm\"\n            htmlType=\"button\"\n            width=\"100%\"\n            prefixIcon=\"refresh\"\n            fontSet=\"material-icons-outlined\"\n            [title]=\"retryLabel() || ('core.component.data-state.retry' | translate)\"\n            (click)=\"retry()\"></sd-button>\n        }\n        @if (_actionLabel; as label) {\n          <sd-button\n            data-state-action\n            type=\"fill\"\n            color=\"primary\"\n            size=\"sm\"\n            htmlType=\"button\"\n            width=\"100%\"\n            [title]=\"label\"\n            (click)=\"action()\"></sd-button>\n        }\n      </div>\n    }\n  </section>\n}\n", styles: [":host{display:contents}.sd-data-state{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-width:0;min-height:240px;padding:32px;text-align:center;color:var(--sd-black500)}.sd-data-state__symbol{display:grid;place-items:center;flex-shrink:0;width:56px;height:56px;margin-bottom:16px;border-radius:8px;background:var(--sd-black100)}.sd-data-state__icon{width:32px;height:32px;font-size:32px;line-height:1;color:var(--sd-black400)}.sd-data-state[data-state=error] .sd-data-state__symbol,.sd-data-state[data-state=forbidden] .sd-data-state__symbol{background:color-mix(in srgb,var(--sd-error-light) 40%,transparent)}.sd-data-state[data-state=error] .sd-data-state__icon,.sd-data-state[data-state=forbidden] .sd-data-state__icon{color:var(--sd-error)}.sd-data-state[data-state=loading] .sd-data-state__icon{color:var(--sd-primary);animation:sd-data-state-spin 1s linear infinite}.sd-data-state[data-state=loading] .sd-data-state__symbol{background:var(--sd-primary-light)}.sd-data-state[data-state=empty] .sd-data-state__symbol{background:var(--sd-warning-light)}.sd-data-state[data-state=empty] .sd-data-state__icon{color:var(--sd-warning-dark)}.sd-data-state__title{max-width:100%;font-size:16px;font-weight:600;line-height:24px;overflow-wrap:anywhere}.sd-data-state__message{max-width:440px;margin-top:4px;color:var(--sd-black400);font-size:14px;line-height:22px;overflow-wrap:anywhere}.sd-data-state__message:empty,.sd-data-state__title:empty{display:none}.sd-data-state__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;max-width:100%;margin-top:16px}.sd-data-state__actions sd-button{min-width:0;max-width:100%}.sd-data-state--compact{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;align-items:start;column-gap:12px;min-height:120px;padding:16px;text-align:start}.sd-data-state--compact.sd-data-state--with-icon{grid-template-columns:32px minmax(0,1fr)}.sd-data-state--compact .sd-data-state__symbol{grid-column:1;grid-row:1/span 2;width:32px;height:32px;margin:0;border-radius:6px}.sd-data-state--compact .sd-data-state__icon{width:22px;height:22px;font-size:22px}.sd-data-state--compact .sd-data-state__title,.sd-data-state--compact .sd-data-state__message,.sd-data-state--compact .sd-data-state__actions{grid-column:-2}.sd-data-state--compact .sd-data-state__title{font-size:14px;line-height:20px}.sd-data-state--compact .sd-data-state__message{margin-top:2px;font-size:13px;line-height:20px}.sd-data-state--compact .sd-data-state__actions{justify-content:flex-start;margin-top:10px}.sd-data-state--full-page{min-height:100dvh}@keyframes sd-data-state-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.sd-data-state[data-state=loading] .sd-data-state__icon{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdDataState, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-data-state', standalone: true, imports: [NgTemplateOutlet, TranslatePipe, MatIconModule, SdButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let currentState = state();\n@let template = customTemplate();\n@let _role = role();\n@let _retryable = retryable();\n@let _actionLabel = actionLabel();\n@let currentIcon = effectiveIcon();\n\n@if (currentState === 'success') {\n  @if (template) {\n    <ng-container [ngTemplateOutlet]=\"template.template\" [ngTemplateOutletContext]=\"templateContext()\"></ng-container>\n  } @else {\n    <ng-content></ng-content>\n  }\n} @else if (template) {\n  <ng-container [ngTemplateOutlet]=\"template.template\" [ngTemplateOutletContext]=\"templateContext()\"></ng-container>\n} @else {\n  <section\n    class=\"sd-data-state\"\n    [class.sd-data-state--compact]=\"compact()\"\n    [class.sd-data-state--full-page]=\"fullPage()\"\n    [class.sd-data-state--with-icon]=\"!!currentIcon\"\n    [attr.data-state]=\"currentState\"\n    [attr.role]=\"_role\"\n    [attr.aria-busy]=\"currentState === 'loading' ? 'true' : null\"\n    [attr.aria-live]=\"_role === 'alert' ? 'assertive' : 'polite'\">\n    @if (currentIcon) {\n      <span class=\"sd-data-state__symbol\" aria-hidden=\"true\">\n        <mat-icon class=\"sd-data-state__icon\" [fontSet]=\"effectiveFontSet()\">{{ currentIcon }}</mat-icon>\n      </span>\n    }\n\n    <div class=\"sd-data-state__title\">{{ title() ?? (titleKey() | translate) }}</div>\n    <div class=\"sd-data-state__message\">{{ message() ?? (messageKey() | translate) }}</div>\n\n    @if (_retryable || _actionLabel) {\n      <div class=\"sd-data-state__actions\">\n        @if (_retryable) {\n          <sd-button\n            data-state-retry\n            type=\"light\"\n            color=\"primary\"\n            size=\"sm\"\n            htmlType=\"button\"\n            width=\"100%\"\n            prefixIcon=\"refresh\"\n            fontSet=\"material-icons-outlined\"\n            [title]=\"retryLabel() || ('core.component.data-state.retry' | translate)\"\n            (click)=\"retry()\"></sd-button>\n        }\n        @if (_actionLabel; as label) {\n          <sd-button\n            data-state-action\n            type=\"fill\"\n            color=\"primary\"\n            size=\"sm\"\n            htmlType=\"button\"\n            width=\"100%\"\n            [title]=\"label\"\n            (click)=\"action()\"></sd-button>\n        }\n      </div>\n    }\n  </section>\n}\n", styles: [":host{display:contents}.sd-data-state{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-width:0;min-height:240px;padding:32px;text-align:center;color:var(--sd-black500)}.sd-data-state__symbol{display:grid;place-items:center;flex-shrink:0;width:56px;height:56px;margin-bottom:16px;border-radius:8px;background:var(--sd-black100)}.sd-data-state__icon{width:32px;height:32px;font-size:32px;line-height:1;color:var(--sd-black400)}.sd-data-state[data-state=error] .sd-data-state__symbol,.sd-data-state[data-state=forbidden] .sd-data-state__symbol{background:color-mix(in srgb,var(--sd-error-light) 40%,transparent)}.sd-data-state[data-state=error] .sd-data-state__icon,.sd-data-state[data-state=forbidden] .sd-data-state__icon{color:var(--sd-error)}.sd-data-state[data-state=loading] .sd-data-state__icon{color:var(--sd-primary);animation:sd-data-state-spin 1s linear infinite}.sd-data-state[data-state=loading] .sd-data-state__symbol{background:var(--sd-primary-light)}.sd-data-state[data-state=empty] .sd-data-state__symbol{background:var(--sd-warning-light)}.sd-data-state[data-state=empty] .sd-data-state__icon{color:var(--sd-warning-dark)}.sd-data-state__title{max-width:100%;font-size:16px;font-weight:600;line-height:24px;overflow-wrap:anywhere}.sd-data-state__message{max-width:440px;margin-top:4px;color:var(--sd-black400);font-size:14px;line-height:22px;overflow-wrap:anywhere}.sd-data-state__message:empty,.sd-data-state__title:empty{display:none}.sd-data-state__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;max-width:100%;margin-top:16px}.sd-data-state__actions sd-button{min-width:0;max-width:100%}.sd-data-state--compact{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;align-items:start;column-gap:12px;min-height:120px;padding:16px;text-align:start}.sd-data-state--compact.sd-data-state--with-icon{grid-template-columns:32px minmax(0,1fr)}.sd-data-state--compact .sd-data-state__symbol{grid-column:1;grid-row:1/span 2;width:32px;height:32px;margin:0;border-radius:6px}.sd-data-state--compact .sd-data-state__icon{width:22px;height:22px;font-size:22px}.sd-data-state--compact .sd-data-state__title,.sd-data-state--compact .sd-data-state__message,.sd-data-state--compact .sd-data-state__actions{grid-column:-2}.sd-data-state--compact .sd-data-state__title{font-size:14px;line-height:20px}.sd-data-state--compact .sd-data-state__message{margin-top:2px;font-size:13px;line-height:20px}.sd-data-state--compact .sd-data-state__actions{justify-content:flex-start;margin-top:10px}.sd-data-state--full-page{min-height:100dvh}@keyframes sd-data-state-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.sd-data-state[data-state=loading] .sd-data-state__icon{animation:none}}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdDataState, SdDataStateTemplateDirective };
+//# sourceMappingURL=sd-angular-core-components-data-state.mjs.map