@sd-angular/core 19.0.0-beta.37 → 19.0.0-beta.38

package/assets/scss/core/bootstrap.scss

@@ -81,6 +81,23 @@
   .fs-#{$i} {
     font-size: #{$i}px !important;
   }
+
+  // Gap
+  .gap-#{$i} {
+    gap: #{$i}px !important;
+  }
+
+  .gap-y-#{$i} {
+    row-gap: #{$i}px !important;
+  }
+
+  .gap-x-#{$i} {
+    column-gap: #{$i}px !important;
+  }
+}
+
+.flex-1 {
+  flex: 1;
 }
 
 .w-full {

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

@@ -4,11 +4,12 @@ export declare class SdAvatar implements OnInit {
     #private;
     src: string | undefined | null;
     size: number;
+    name: string;
     isUrl: boolean;
     initials: string;
     bgColor: string;
     ngOnInit(): void;
     handleError(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdAvatar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdAvatar, "sd-avatar", never, { "src": { "alias": "src"; "required": true; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdAvatar, "sd-avatar", never, { "src": { "alias": "src"; "required": true; }; "size": { "alias": "size"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, {}, never, never, true, never>;
 }

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

@@ -2,16 +2,17 @@ import { OnDestroy, OnInit } from '@angular/core';
 import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
 import { SdColor } from '@sd-angular/core/utilities/models';
 import * as i0 from "@angular/core";
-type FontSetType = 'material-icons' | 'material-icons-outlined' | 'material-icons-round' | 'material-icons-sharp' | 'material-symbols-outlined';
-type ButtonType = 'fill' | 'light' | 'outline' | 'link';
-type ButtonSize = 'sm' | 'md' | 'lg';
+export type SdButtonFontSet = 'material-icons' | 'material-icons-outlined' | 'material-icons-round' | 'material-icons-sharp' | 'material-symbols-outlined';
+export type SdButtonType = 'fill' | 'light' | 'outline' | 'link';
+export type SdButtonSize = 'sm' | 'md' | 'lg';
 export declare class SdButton extends SdBaseSecureComponent implements OnInit, OnDestroy {
     #private;
+    private el;
     autoIdInput: import("@angular/core").InputSignal<string | null | undefined>;
-    type: import("@angular/core").InputSignalWithTransform<ButtonType, ButtonType | null | undefined>;
+    type: import("@angular/core").InputSignalWithTransform<SdButtonType, SdButtonType | null | undefined>;
     color: import("@angular/core").InputSignalWithTransform<SdColor, SdColor | null | undefined>;
-    size: import("@angular/core").InputSignalWithTransform<ButtonSize, ButtonSize | null | undefined>;
-    fontSet: import("@angular/core").InputSignalWithTransform<FontSetType, FontSetType | null | undefined>;
+    size: import("@angular/core").InputSignalWithTransform<SdButtonSize, SdButtonSize | null | undefined>;
+    fontSet: import("@angular/core").InputSignalWithTransform<SdButtonFontSet, SdButtonFontSet | null | undefined>;
     title: import("@angular/core").InputSignal<string | null | undefined>;
     width: import("@angular/core").InputSignal<string | null | undefined>;
     tooltip: import("@angular/core").InputSignal<string | null | undefined>;
@@ -30,10 +31,8 @@ export declare class SdButton extends SdBaseSecureComponent implements OnInit, O
     click: import("@angular/core").OutputEmitterRef<Event>;
     constructor();
     ngOnInit(): void;
-    onHostClick(event: Event): void;
     onInternalClick(event: Event): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdButton, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SdButton, "sd-button", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fontSet": { "alias": "fontSet"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, { "click": "click"; }, never, never, true, never>;
 }
-export {};

package/components/document-builder/index.d.ts

@@ -1,3 +1,4 @@
 export * from './src/components';
 export * from './src/document-builder.model';
 export * from './src/document-builder.component';
+export * from './src/plugins/ck-comment/ck-comment.plugin.model';

package/components/document-builder/src/document-builder.component.d.ts

@@ -1,6 +1,7 @@
 import { EventEmitter } from '@angular/core';
 import { ClassicEditor, ModelRange } from 'ckeditor5';
-import { SdDocumentBuilderComment, SdDocumentBuilderHeading, SdDocumentBuilderOption, SdDocumentBuilderVariable, SdEditorConfig } from './document-builder.model';
+import { CkCommentPlugin } from './plugins';
+import { SdDocumentBuilderHeading, SdDocumentBuilderOption, SdDocumentBuilderVariable, SdEditorConfig } from './document-builder.model';
 import * as i0 from "@angular/core";
 export declare class SdDocumentBuilder {
     #private;
@@ -30,47 +31,7 @@ export declare class SdDocumentBuilder {
          */
         scroll: (id: string) => void;
     };
-    comment: {
-        /**
-         * Lấy tất cả comments trong document
-         * @returns Danh sách tất cả comments
-         */
-        all: () => SdDocumentBuilderComment[];
-        /**
-         * Thêm comment vào vùng text đang được chọn
-         * @param comment - Dữ liệu comment
-         * @param data - Dữ liệu extra data
-         * @returns SdDocumentBuilderComment hoặc null nếu không có text được chọn
-         */
-        add: <T = any>(range: ModelRange, comment: string, args?: {
-            markerIdExternal?: string | number;
-            data?: T;
-        }) => SdDocumentBuilderComment<T> | null;
-        /**
-         * Cập nhật nội dung comment
-         * @param markerId - ID của marker
-         * @param commentData - Dữ liệu mới
-         * @returns Comment đã cập nhật hoặc null
-         */
-        update: <T = any>(markerId: string, comment: string, data?: T) => SdDocumentBuilderComment<T> | null;
-        /**
-         * Lấy chi tiết comment theo markerId
-         * @param markerId - ID của marker
-         * @returns Comment hoặc null
-         */
-        detail: (markerId: string) => SdDocumentBuilderComment | null;
-        /**
-         * Xóa comment theo markerId
-         * @param markerId - ID của marker cần xóa
-         * @returns true nếu xóa thành công, false nếu không tìm thấy
-         */
-        remove: (markerId: string) => boolean;
-        /**
-         * Scroll đến vị trí comment
-         * @param markerId - ID của marker cần scroll tới
-         */
-        scroll: (markerId: string) => void;
-    };
+    getCommentPluginAPI(): CkCommentPlugin | null;
     variable: {
         /**
          * Lấy tất cả variabes trong document

package/components/document-builder/src/document-builder.model.d.ts

@@ -1,11 +1,11 @@
-import { EditorConfig, EventInfo, ModelDocumentSelection, ModelRange, ViewDataTransfer } from 'ckeditor5';
+import { EditorConfig, EventInfo, ModelDocumentSelection, ViewDataTransfer } from 'ckeditor5';
+import { CkCommentConfig } from './plugins/ck-comment/ck-comment.plugin.model';
 export type SdEditorConfig = EditorConfig & {
     getOption?: () => SdDocumentBuilderOption;
 };
 export interface SdDocumentBuilderOption {
     onDropVariable?: (variable: SdDocumentBuilderVariable, dropIndex: number) => boolean | Promise<boolean | SdDocumentBuilderVariable>;
-    onAddComment?: (selectedComment: SdDocumentBuilderSelectedComment) => void;
-    onSelectComment?: (markerId: string) => void;
+    comment?: CkCommentConfig;
     onSelection?: (selection: ModelDocumentSelection, $event: EventInfo<string, unknown>) => void;
     onOrientation?: (orientation: 'PORTRAIT' | 'LANDSCAPE') => void;
     onPaste?: (data: SdPasteEventData) => void | Promise<void>;
@@ -18,17 +18,6 @@ export interface SdDocumentBuilderVariable<T = any> {
     display: string;
     data?: T;
 }
-export interface SdDocumentBuilderSelectedComment {
-    range: ModelRange;
-    selectedText: string;
-}
-export interface SdDocumentBuilderComment<T = any> {
-    markerId: string;
-    selectedText: string;
-    comment?: string;
-    createdAt?: Date;
-    data?: T;
-}
 export interface SdDocumentBuilderHeading {
     id: string;
     text: string;

package/components/document-builder/src/plugins/ck-comment/ck-comment.plugin.d.ts

@@ -0,0 +1,43 @@
+import { Plugin, ContextualBalloon } from 'ckeditor5';
+import { CkComment, CkCommentConfig, CkCommentColors } from './ck-comment.plugin.model';
+export declare class CkCommentPlugin extends Plugin {
+    #private;
+    static get pluginName(): string;
+    static get requires(): (typeof ContextualBalloon)[];
+    static readonly PENDING_MARKER_ID = "__pending_comment__";
+    static readonly DEFAULT_SEARCH_RANGE = 5;
+    static readonly DEFAULT_COLORS: CkCommentColors;
+    init(): void;
+    /**
+     * Thiết lập config với callbacks
+     */
+    setConfig(config: CkCommentConfig): void;
+    /**
+     * Thêm comment và tạo marker
+     */
+    addComment(comment: CkComment): boolean;
+    /**
+     * Xóa comment theo id
+     */
+    removeComment(id: string | number): boolean;
+    /**
+     * Chọn comment theo id - chỉ thêm class highlight, không bôi đen text
+     */
+    selectComment(id: string | number, scrollIntoView?: boolean): void;
+    /**
+     * Thiết lập tất cả comments (khôi phục từ dữ liệu)
+     */
+    setComments(comments: CkComment[]): void;
+    /**
+     * Lấy tất cả comments
+     */
+    get comments(): CkComment[];
+    /**
+     * Thiết lập pending highlight cho selection (khi user đang nhập nội dung comment)
+     */
+    setPendingSelection(startPath: number[], endPath: number[]): boolean;
+    /**
+     * Xóa pending highlight và fire onCancelPending callback
+     */
+    clearPendingSelection(): void;
+}

package/components/document-builder/src/plugins/ck-comment/ck-comment.plugin.model.d.ts

@@ -0,0 +1,50 @@
+import { ModelRange } from 'ckeditor5';
+/**
+ * Comment status based on text changes
+ */
+export type CkCommentStatus = 'normal' | 'modified' | 'broken';
+/**
+ * Color configuration for comment markers
+ */
+export interface CkCommentColors {
+    marker?: string;
+    markerSelected?: string;
+    markerPending?: string;
+    markerModified?: string;
+    markerBroken?: string;
+}
+/**
+ * Comment data structure for CkCommentPlugin
+ */
+export interface CkComment<T = any> {
+    id: string | number;
+    startPath: number[];
+    endPath: number[];
+    originalText: string;
+    currentText: string;
+    status: CkCommentStatus;
+    data?: T;
+}
+/**
+ * Config for CkCommentPlugin
+ */
+export interface CkCommentConfig {
+    onPendingComment?: (comment: CkComment) => void;
+    onAddComment?: (comment: CkComment) => void;
+    onSelectComment?: (id: string | number) => void;
+    onRemoveComment?: (id: string | number) => void;
+    onChange?: (comments: CkComment[]) => void;
+    onCancelPending?: () => void;
+    searchRange?: number;
+    debug?: boolean;
+    colors?: CkCommentColors;
+}
+/**
+ * Data returned when user selects text for comment
+ */
+export interface CkCommentSelection {
+    range: ModelRange;
+    startPath: number[];
+    endPath: number[];
+    text: string;
+}

package/components/document-builder/src/plugins/index.d.ts

@@ -1,5 +1,4 @@
 export * from './heading/heading.plugin';
-export * from './comment/comment.plugin';
 export * from './variable/variable.plugin';
 export * from './table-custom';
 export * from './image-upload/image-upload.plugin';
@@ -8,3 +7,5 @@ export * from './page-orientation/page-orientation.plugin';
 export * from './paste-handler';
 export * from './highlight-range/highlight-range.plugin';
 export * from './block-space/block-space.plugin';
+export * from './ck-comment/ck-comment.plugin';
+export * from './ck-comment/ck-comment.plugin.model';

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

@@ -5,6 +5,7 @@ import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
 class SdAvatar {
     src;
     size = 32;
+    name = '';
     isUrl = false;
     initials = '';
     bgColor = '#ccc';
@@ -12,18 +13,16 @@ class SdAvatar {
         this.#init();
     }
     #init = () => {
-        if (!this.src) {
-            this.isUrl = false;
-            this.initials = '?';
-            this.bgColor = '#bdc3c7';
-            return;
-        }
         // Kiểm tra xem src có phải là URL (http, https, data:image, hoặc path /)
         const urlPattern = /^(http|https|data:image|\/)/;
-        this.isUrl = urlPattern.test(this.src);
-        if (!this.isUrl) {
-            this.initials = this.#getInitials(this.src);
-            this.bgColor = this.#generateColor(this.src);
+        this.isUrl = urlPattern.test(this.src || '');
+        if (this.name || !this.isUrl) {
+            this.bgColor = this.#generateColor(this.name || this.src || '');
+            this.initials = this.#getInitials(this.name || this.src || '');
+        }
+        else {
+            this.bgColor = '#bdc3c7';
+            this.initials = '?';
         }
     };
     handleError() {
@@ -31,13 +30,14 @@ class SdAvatar {
         this.#init();
     }
     #getInitials = (name) => {
-        return name
+        return (name
             .trim()
             .split(' ')
+            .filter(Boolean)
             .map(n => n[0])
             .join('')
             .toUpperCase()
-            .substring(0, 2);
+            .substring(0, 2) || '');
     };
     #generateColor = (name) => {
         const colors = [
@@ -68,7 +68,7 @@ class SdAvatar {
         return colors[Math.abs(hash) % colors.length];
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdAvatar, isStandalone: true, selector: "sd-avatar", inputs: { src: "src", size: "size" }, ngImport: i0, template: "<div class=\"sd-avatar\" [style.width.px]=\"size\" [style.height.px]=\"size\" [style.line-height.px]=\"size\" [style.backgroundColor]=\"bgColor\">\r\n  @if (isUrl) {\r\n    <img [src]=\"src\" (error)=\"handleError()\" alt=\"avatar\" />\r\n  } @else {\r\n    <span class=\"sd-avatar-text\" [style.fontSize.px]=\"size / 2.5\">\r\n      {{ initials }}\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [".sd-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;color:#fff;font-weight:500;-webkit-user-select:none;user-select:none;background-size:cover}.sd-avatar img{width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdAvatar, isStandalone: true, selector: "sd-avatar", inputs: { src: "src", size: "size", name: "name" }, ngImport: i0, template: "<div class=\"sd-avatar\" [style.width.px]=\"size\" [style.height.px]=\"size\" [style.line-height.px]=\"size\" [style.backgroundColor]=\"bgColor\">\r\n  @if (isUrl) {\r\n    <img [src]=\"src\" (error)=\"handleError()\" alt=\"avatar\" />\r\n  } @else {\r\n    <span class=\"sd-avatar-text\" [style.fontSize.px]=\"size / 2.5\">\r\n      {{ initials }}\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [".sd-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;color:#fff;font-weight:500;-webkit-user-select:none;user-select:none;background-size:cover}.sd-avatar img{width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAvatar, decorators: [{
             type: Component,
@@ -78,6 +78,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 args: [{ required: true }]
             }], size: [{
                 type: Input
+            }], name: [{
+                type: Input
             }] } });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-components-avatar.mjs","sources":["../../../projects/sd-angular/components/avatar/src/avatar.component.ts","../../../projects/sd-angular/components/avatar/src/avatar.component.html","../../../projects/sd-angular/components/avatar/sd-angular-core-components-avatar.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'sd-avatar',\r\n  standalone: true,\r\n  imports: [CommonModule],\r\n  templateUrl: './avatar.component.html',\r\n  styleUrls: ['./avatar.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SdAvatar implements OnInit {\r\n  @Input({ required: true }) src: string | undefined | null;\r\n  @Input() size: number = 32;\r\n\r\n  isUrl: boolean = false;\r\n  initials: string = '';\r\n  bgColor: string = '#ccc';\r\n\r\n  ngOnInit(): void {\r\n    this.#init();\r\n  }\r\n\r\n  #init = () => {\r\n    if (!this.src) {\r\n      this.isUrl = false;\r\n      this.initials = '?';\r\n      this.bgColor = '#bdc3c7';\r\n      return;\r\n    }\r\n    // Kiểm tra xem src có phải là URL (http, https, data:image, hoặc path /)\r\n    const urlPattern = /^(http|https|data:image|\\/)/;\r\n    this.isUrl = urlPattern.test(this.src);\r\n    if (!this.isUrl) {\r\n      this.initials = this.#getInitials(this.src);\r\n      this.bgColor = this.#generateColor(this.src);\r\n    }\r\n  };\r\n\r\n  handleError() {\r\n    this.src = undefined; // Nếu ảnh lỗi, chuyển sang hiển thị initials\r\n    this.#init();\r\n  }\r\n\r\n  #getInitials = (name: string): string => {\r\n    return name\r\n      .trim()\r\n      .split(' ')\r\n      .map(n => n[0])\r\n      .join('')\r\n      .toUpperCase()\r\n      .substring(0, 2);\r\n  };\r\n\r\n  #generateColor = (name: string): string => {\r\n    const colors = [\r\n      '#1abc9c',\r\n      '#2ecc71',\r\n      '#3498db',\r\n      '#9b59b6',\r\n      '#34495e',\r\n      '#16a085',\r\n      '#27ae60',\r\n      '#2980b9',\r\n      '#8e44ad',\r\n      '#2c3e50',\r\n      '#f1c40f',\r\n      '#e67e22',\r\n      '#e74c3c',\r\n      '#95a5a6',\r\n      '#f39c12',\r\n      '#d35400',\r\n      '#c0392b',\r\n      '#bdc3c7',\r\n      '#7f8c8d',\r\n    ];\r\n    let hash = 0;\r\n    for (let i = 0; i < name.length; i++) {\r\n      hash = name.charCodeAt(i) + ((hash << 5) - hash);\r\n    }\r\n    return colors[Math.abs(hash) % colors.length];\r\n  };\r\n}\r\n","<div class=\"sd-avatar\" [style.width.px]=\"size\" [style.height.px]=\"size\" [style.line-height.px]=\"size\" [style.backgroundColor]=\"bgColor\">\r\n  @if (isUrl) {\r\n    <img [src]=\"src\" (error)=\"handleError()\" alt=\"avatar\" />\r\n  } @else {\r\n    <span class=\"sd-avatar-text\" [style.fontSize.px]=\"size / 2.5\">\r\n      {{ initials }}\r\n    </span>\r\n  }\r\n</div>\r\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-avatar.mjs","sources":["../../../projects/sd-angular/components/avatar/src/avatar.component.ts","../../../projects/sd-angular/components/avatar/src/avatar.component.html","../../../projects/sd-angular/components/avatar/sd-angular-core-components-avatar.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'sd-avatar',\r\n  standalone: true,\r\n  imports: [CommonModule],\r\n  templateUrl: './avatar.component.html',\r\n  styleUrls: ['./avatar.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SdAvatar implements OnInit {\r\n  @Input({ required: true }) src: string | undefined | null;\r\n  @Input() size: number = 32;\r\n  @Input() name: string = '';\r\n\r\n  isUrl: boolean = false;\r\n  initials: string = '';\r\n  bgColor: string = '#ccc';\r\n\r\n  ngOnInit(): void {\r\n    this.#init();\r\n  }\r\n\r\n  #init = () => {\r\n    // Kiểm tra xem src có phải là URL (http, https, data:image, hoặc path /)\r\n    const urlPattern = /^(http|https|data:image|\\/)/;\r\n    this.isUrl = urlPattern.test(this.src || '');\r\n    if (this.name || !this.isUrl) {\r\n      this.bgColor = this.#generateColor(this.name || this.src || '');\r\n      this.initials = this.#getInitials(this.name || this.src || '');\r\n    } else {\r\n      this.bgColor = '#bdc3c7';\r\n      this.initials = '?';\r\n    }\r\n  };\r\n\r\n  handleError() {\r\n    this.src = undefined; // Nếu ảnh lỗi, chuyển sang hiển thị initials\r\n    this.#init();\r\n  }\r\n\r\n  #getInitials = (name: string): string => {\r\n    return (\r\n      name\r\n        .trim()\r\n        .split(' ')\r\n        .filter(Boolean)\r\n        .map(n => n[0])\r\n        .join('')\r\n        .toUpperCase()\r\n        .substring(0, 2) || ''\r\n    );\r\n  };\r\n\r\n  #generateColor = (name: string): string => {\r\n    const colors = [\r\n      '#1abc9c',\r\n      '#2ecc71',\r\n      '#3498db',\r\n      '#9b59b6',\r\n      '#34495e',\r\n      '#16a085',\r\n      '#27ae60',\r\n      '#2980b9',\r\n      '#8e44ad',\r\n      '#2c3e50',\r\n      '#f1c40f',\r\n      '#e67e22',\r\n      '#e74c3c',\r\n      '#95a5a6',\r\n      '#f39c12',\r\n      '#d35400',\r\n      '#c0392b',\r\n      '#bdc3c7',\r\n      '#7f8c8d',\r\n    ];\r\n    let hash = 0;\r\n    for (let i = 0; i < name.length; i++) {\r\n      hash = name.charCodeAt(i) + ((hash << 5) - hash);\r\n    }\r\n    return colors[Math.abs(hash) % colors.length];\r\n  };\r\n}\r\n","<div class=\"sd-avatar\" [style.width.px]=\"size\" [style.height.px]=\"size\" [style.line-height.px]=\"size\" [style.backgroundColor]=\"bgColor\">\r\n  @if (isUrl) {\r\n    <img [src]=\"src\" (error)=\"handleError()\" alt=\"avatar\" />\r\n  } @else {\r\n    <span class=\"sd-avatar-text\" [style.fontSize.px]=\"size / 2.5\">\r\n      {{ initials }}\r\n    </span>\r\n  }\r\n</div>\r\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-button.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, computed, output, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ElementRef, input, booleanAttribute, computed, output, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2 from '@angular/material/icon';
@@ -17,35 +17,36 @@ import { throttleTime, filter } from 'rxjs/operators';
 /* eslint-disable @angular-eslint/no-input-rename */
 class SdButton extends SdBaseSecureComponent {
     // ==========================================
-    // 1. SIGNAL INPUTS (Bảo mật 100% với Null/Undefined)
-    // Cú pháp: input<Kiểu_Nội_Bộ, Kiểu_Cha_Truyền_Vào>(Giá_Trị_Mặc_Định, { transform })
+    // 1. INJECTS
+    // ==========================================
+    el = inject(ElementRef);
+    // ==========================================
+    // 2. SIGNAL INPUTS (Bảo mật 100% với Null/Undefined)
     // ==========================================
     autoIdInput = input(undefined, { alias: 'autoId' });
     type = input('light', {
-        transform: value => value || 'light',
+        transform: (value) => value || 'light'
     });
     color = input('secondary', {
-        transform: value => value || 'secondary',
+        transform: (value) => value || 'secondary'
     });
     size = input('sm', {
-        transform: value => value || 'sm',
+        transform: (value) => value || 'sm'
     });
     fontSet = input('material-icons', {
-        transform: value => value || 'material-icons',
+        transform: (value) => value || 'material-icons'
     });
-    // Các thẻ chuỗi văn bản hoặc icon mặc định không có cũng không sao
     title = input(undefined);
     width = input(undefined);
     tooltip = input(undefined);
     prefixIcon = input(undefined);
     suffixIcon = input(undefined);
-    // booleanAttribute tự động biến '', null, undefined thành boolean chuẩn
     disabled = input(false, { transform: booleanAttribute });
     loading = input(false, { transform: booleanAttribute });
     // ==========================================
-    // 2. COMPUTED STATE
+    // 3. COMPUTED STATE
     // ==========================================
-    autoId = computed(() => (this.autoIdInput() ? `button-${this.autoIdInput()}` : undefined));
+    autoId = computed(() => this.autoIdInput() ? `button-${this.autoIdInput()}` : undefined);
     buttonClasses = computed(() => ({
         'c-square': (this.prefixIcon() || this.suffixIcon()) && !this.title(),
         'c-sm': this.size() === 'sm',
@@ -54,13 +55,23 @@ class SdButton extends SdBaseSecureComponent {
         'c-disabled': this.disabled(),
     }));
     // ==========================================
-    // 3. OUTPUT & RXJS STREAMS
+    // 4. OUTPUT & RXJS STREAMS
     // ==========================================
     click = output();
     #clickSubject = new Subject();
     #subscription = new Subscription();
     constructor() {
         super();
+        // Kỹ thuật Đánh chặn sự kiện (Capture Phase)
+        // Tóm sống mọi sự kiện click ngay khi nó vừa chạm vào component
+        this.el.nativeElement.addEventListener('click', (event) => {
+            if (this.disabled() || this.loading()) {
+                // Nghiền nát sự kiện, không cho Angular phát (click) ra component cha
+                event.preventDefault();
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+            }
+        }, { capture: true });
     }
     ngOnInit() {
         this.#subscription.add(this.#clickSubject
@@ -69,13 +80,6 @@ class SdButton extends SdBaseSecureComponent {
             this.click.emit(event);
         }));
     }
-    // Chặn sự kiện nổi bọt ở cấp độ Host
-    onHostClick(event) {
-        if (this.disabled() || this.loading()) {
-            event.preventDefault();
-            event.stopImmediatePropagation();
-        }
-    }
     // Nhận click từ thẻ button con bên trong
     onInternalClick(event) {
         event.stopPropagation();
@@ -88,7 +92,7 @@ class SdButton extends SdBaseSecureComponent {
         this.#subscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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 } }, outputs: { click: "click" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class.sd-disabled": "disabled()", "class.sd-loading": "loading()", "attr.disabled": "disabled() ? \"true\" : null" } }, usesInheritance: true, ngImport: i0, template: "@let btnType = type();\n@let btnLoad = loading();\n@let btnTitle = title();\n@let pIcon = prefixIcon();\n@let sIcon = suffixIcon();\n@let fSet = fontSet();\n\n@if (btnType === 'fill') {\n  <button\n    mat-flat-button\n    class=\"c-button c-fill\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"disabled()\"\n    [color]=\"color()\"\n    [attr.data-autoId]=\"autoId()\"\n    [style.width]=\"width()\"\n    [matTooltip]=\"tooltip() || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'light') {\n  <button\n    mat-flat-button\n    class=\"c-button c-light\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"disabled()\"\n    [color]=\"color()\"\n    [attr.data-autoId]=\"autoId()\"\n    [style.width]=\"width()\"\n    [matTooltip]=\"tooltip() || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'outline') {\n  <button\n    mat-stroked-button\n    class=\"c-button c-outline\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"disabled()\"\n    [color]=\"color()\"\n    [attr.data-autoId]=\"autoId()\"\n    [style.width]=\"width()\"\n    [matTooltip]=\"tooltip() || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'link') {\n  <button\n    mat-button\n    class=\"c-button c-link\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"disabled()\"\n    [color]=\"color()\"\n    [attr.data-autoId]=\"autoId()\"\n    [style.width]=\"width()\"\n    [matTooltip]=\"tooltip() || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n}\n\n<ng-template #contentTpl>\n  <div class=\"c-button-content-wrapper\">\n    @if (btnLoad) {\n      <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\n    } @else if (pIcon) {\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-prefix\">{{ pIcon }}</mat-icon>\n    }\n\n    @if (btnTitle) {\n      <span class=\"c-title\" [class.ml-8]=\"btnLoad || pIcon\" [class.mr-8]=\"sIcon && !btnLoad\">\n        {{ btnTitle }}\n      </span>\n    }\n\n    @if (sIcon && !btnLoad) {\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-suffix\">{{ sIcon }}</mat-icon>\n    }\n\n    @if (!btnTitle && !pIcon && !btnLoad && sIcon) {\n      <mat-icon [fontSet]=\"fSet\">{{ sIcon }}</mat-icon>\n    }\n  </div>\n</ng-template>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{display:inline-block;pointer-events:auto}:host.sd-disabled{cursor:not-allowed}:host.sd-loading{cursor:wait}:host ::ng-deep button.c-button{pointer-events:auto;min-width:auto}: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%}: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:16px!important;width:16px!important;font-size:16px!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-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%;pointer-events:none}: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.17", 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 } }, outputs: { click: "click" }, host: { properties: { "class.sd-disabled": "disabled()", "class.sd-loading": "loading()", "attr.disabled": "disabled() ? \"true\" : null" } }, usesInheritance: true, ngImport: i0, template: "@let btnType = type();\n@let btnLoad = loading();\n@let btnTitle = title();\n@let pIcon = prefixIcon();\n@let sIcon = suffixIcon();\n@let fSet = fontSet();\n\n@if (btnType === 'fill') {\n  <button\n    mat-flat-button\n    class=\"c-button c-fill\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"disabled()\"\n    [color]=\"color()\"\n    [attr.data-autoId]=\"autoId()\"\n    [style.width]=\"width()\"\n    [matTooltip]=\"tooltip() || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'light') {\n  <button\n    mat-flat-button\n    class=\"c-button c-light\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"disabled()\"\n    [color]=\"color()\"\n    [attr.data-autoId]=\"autoId()\"\n    [style.width]=\"width()\"\n    [matTooltip]=\"tooltip() || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'outline') {\n  <button\n    mat-stroked-button\n    class=\"c-button c-outline\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"disabled()\"\n    [color]=\"color()\"\n    [attr.data-autoId]=\"autoId()\"\n    [style.width]=\"width()\"\n    [matTooltip]=\"tooltip() || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'link') {\n  <button\n    mat-button\n    class=\"c-button c-link\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"disabled()\"\n    [color]=\"color()\"\n    [attr.data-autoId]=\"autoId()\"\n    [style.width]=\"width()\"\n    [matTooltip]=\"tooltip() || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n}\n\n<ng-template #contentTpl>\n  <div class=\"c-button-content-wrapper\">\n    @if (btnLoad) {\n      <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\n    } @else if (pIcon) {\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-prefix\">{{ pIcon }}</mat-icon>\n    }\n\n    @if (btnTitle) {\n      <span class=\"c-title\" [class.ml-8]=\"btnLoad || pIcon\" [class.mr-8]=\"sIcon && !btnLoad\">\n        {{ btnTitle }}\n      </span>\n    }\n\n    @if (sIcon && !btnLoad) {\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-suffix\">{{ sIcon }}</mat-icon>\n    }\n\n    @if (!btnTitle && !pIcon && !btnLoad && sIcon) {\n      <mat-icon [fontSet]=\"fSet\">{{ sIcon }}</mat-icon>\n    }\n  </div>\n</ng-template>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{display:inline-block;pointer-events:auto}:host.sd-disabled{cursor:not-allowed}:host.sd-loading{cursor:wait}:host ::ng-deep button.c-button{pointer-events:auto;min-width:auto}: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%}: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:16px!important;width:16px!important;font-size:16px!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-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%;pointer-events:none}:host ::ng-deep .c-spinner{display:inline-block}:host.sd-loading ::ng-deep button.c-button{pointer-events:none;opacity:.85}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdButton, decorators: [{
             type: Component,
@@ -96,7 +100,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         '[class.sd-disabled]': 'disabled()',
                         '[class.sd-loading]': 'loading()',
                         '[attr.disabled]': 'disabled() ? "true" : null',
-                        '(click)': 'onHostClick($event)',
                     }, template: "@let btnType = type();\n@let btnLoad = loading();\n@let btnTitle = title();\n@let pIcon = prefixIcon();\n@let sIcon = suffixIcon();\n@let fSet = fontSet();\n\n@if (btnType === 'fill') {\n  <button\n    mat-flat-button\n    class=\"c-button c-fill\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"disabled()\"\n    [color]=\"color()\"\n    [attr.data-autoId]=\"autoId()\"\n    [style.width]=\"width()\"\n    [matTooltip]=\"tooltip() || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'light') {\n  <button\n    mat-flat-button\n    class=\"c-button c-light\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"disabled()\"\n    [color]=\"color()\"\n    [attr.data-autoId]=\"autoId()\"\n    [style.width]=\"width()\"\n    [matTooltip]=\"tooltip() || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'outline') {\n  <button\n    mat-stroked-button\n    class=\"c-button c-outline\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"disabled()\"\n    [color]=\"color()\"\n    [attr.data-autoId]=\"autoId()\"\n    [style.width]=\"width()\"\n    [matTooltip]=\"tooltip() || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'link') {\n  <button\n    mat-button\n    class=\"c-button c-link\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"disabled()\"\n    [color]=\"color()\"\n    [attr.data-autoId]=\"autoId()\"\n    [style.width]=\"width()\"\n    [matTooltip]=\"tooltip() || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n}\n\n<ng-template #contentTpl>\n  <div class=\"c-button-content-wrapper\">\n    @if (btnLoad) {\n      <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\n    } @else if (pIcon) {\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-prefix\">{{ pIcon }}</mat-icon>\n    }\n\n    @if (btnTitle) {\n      <span class=\"c-title\" [class.ml-8]=\"btnLoad || pIcon\" [class.mr-8]=\"sIcon && !btnLoad\">\n        {{ btnTitle }}\n      </span>\n    }\n\n    @if (sIcon && !btnLoad) {\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-suffix\">{{ sIcon }}</mat-icon>\n    }\n\n    @if (!btnTitle && !pIcon && !btnLoad && sIcon) {\n      <mat-icon [fontSet]=\"fSet\">{{ sIcon }}</mat-icon>\n    }\n  </div>\n</ng-template>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{display:inline-block;pointer-events:auto}:host.sd-disabled{cursor:not-allowed}:host.sd-loading{cursor:wait}:host ::ng-deep button.c-button{pointer-events:auto;min-width:auto}: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%}: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:16px!important;width:16px!important;font-size:16px!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-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%;pointer-events:none}:host ::ng-deep .c-spinner{display:inline-block}:host.sd-loading ::ng-deep button.c-button{pointer-events:none;opacity:.85}\n"] }]
         }], ctorParameters: () => [] });