@sd-angular/core 19.0.0-beta.7 → 19.0.0-beta.70

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 { EventEmitter, Output, HostBinding, Input, 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';
@@ -11,67 +11,85 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i5 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
+import { DefaultMaterialIconFontSet } from '@sd-angular/core/utilities/models';
 import { Subject, Subscription } from 'rxjs';
 import { throttleTime, filter } from 'rxjs/operators';
 
 /* eslint-disable @angular-eslint/no-input-rename */
 class SdButton extends SdBaseSecureComponent {
-    autoId;
-    set _autoId(val) {
-        if (val) {
-            this.autoId = `button-${val}`;
-        }
-    }
-    // --- Style Inputs (Giữ nguyên) ---
-    type = 'light';
-    set _type(type) {
-        this.type = type || 'light';
-    }
-    color = 'secondary';
-    set _color(color) {
-        this.color = color || 'secondary';
-    }
-    title;
-    width;
-    size = 'sm';
-    tooltip;
-    prefixIcon;
-    suffixIcon;
-    fontSet = 'material-icons';
-    set _fontSet(fontSet) {
-        this.fontSet = fontSet || 'material-icons';
-    }
-    // --- State Inputs ---
-    disabled = false;
-    // Binding attribute này để CSS :host[disabled] hoạt động nếu cần
-    get disabledAttr() { return this.disabled ? 'true' : null; }
-    set _disabled(value) {
-        this.disabled = value === '' || !!value;
-    }
-    loading = false;
-    click = new EventEmitter();
+    // ==========================================
+    // 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'
+    });
+    color = input('secondary', {
+        transform: (value) => value || 'secondary'
+    });
+    size = input('sm', {
+        transform: (value) => value || 'sm'
+    });
+    fontSet = input(DefaultMaterialIconFontSet, {
+        transform: (value) => value || DefaultMaterialIconFontSet
+    });
+    title = input(undefined);
+    width = input(undefined);
+    tooltip = input(undefined);
+    prefixIcon = input(undefined);
+    suffixIcon = input(undefined);
+    disabled = input(false, { transform: booleanAttribute });
+    loading = input(false, { transform: booleanAttribute });
+    block = input(false, { transform: booleanAttribute });
+    htmlType = input('button', {
+        transform: (value) => value || 'button'
+    });
+    // ==========================================
+    // 3. COMPUTED STATE
+    // ==========================================
+    autoId = computed(() => this.autoIdInput() ? `button-${this.autoIdInput()}` : undefined);
+    buttonClasses = computed(() => ({
+        'c-square': (this.prefixIcon() || this.suffixIcon()) && !this.title(),
+        'c-sm': this.size() === 'sm',
+        'c-md': this.size() === 'md',
+        'c-lg': this.size() === 'lg',
+        'c-disabled': this.disabled(),
+        'c-block': this.block(),
+    }));
+    // ==========================================
+    // 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
-            .pipe(throttleTime(300, undefined, { leading: true, trailing: false }), filter(() => !this.disabled && !this.loading))
+            .pipe(throttleTime(300, undefined, { leading: true, trailing: false }), filter(() => !this.disabled() && !this.loading()))
             .subscribe(event => {
-            // Emit sự kiện ra ngoài
             this.click.emit(event);
         }));
     }
-    // Hàm này gắn vào (click) của button con
+    // Nhận click từ thẻ button con bên trong
     onInternalClick(event) {
-        // 1. QUAN TRỌNG: Chặn sự kiện nổi bọt lên Host
-        // Vì Host đã có pointer-events: none nên về lý thuyết nó không nhận click,
-        // nhưng stopPropagation đảm bảo an toàn tuyệt đối về mặt DOM event bubbling.
         event.stopPropagation();
-        // Nếu muốn chắc chắn Angular không dính lại sự kiện cũ
-        // event.stopImmediatePropagation(); 
-        if (this.disabled || this.loading) {
+        if (this.disabled() || this.loading()) {
             return;
         }
         this.#clickSubject.next(event);
@@ -79,62 +97,18 @@ class SdButton extends SdBaseSecureComponent {
     ngOnDestroy() {
         this.#subscription.unsubscribe();
     }
-    get buttonClasses() {
-        return {
-            'c-square': (this.prefixIcon || this.suffixIcon) && !this.title,
-            'c-sm': this.size === 'sm',
-            'c-md': this.size === 'md',
-            'c-lg': this.size === 'lg',
-            'c-disabled': this.disabled,
-        };
-    }
     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: { _autoId: ["autoId", "_autoId"], _type: ["type", "_type"], _color: ["color", "_color"], title: "title", width: "width", size: "size", tooltip: "tooltip", prefixIcon: "prefixIcon", suffixIcon: "suffixIcon", _fontSet: ["fontSet", "_fontSet"], _disabled: ["disabled", "_disabled"], loading: "loading" }, outputs: { click: "click" }, host: { properties: { "class.sd-disabled": "this.disabled", "attr.disabled": "this.disabledAttr", "class.sd-loading": "this.loading" } }, usesInheritance: true, ngImport: i0, template: "@if (type === '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)\"> <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    [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)\"> <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    [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)\"> <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    [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)\"> <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>", 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 }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, htmlType: { classPropertyName: "htmlType", publicName: "htmlType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, host: { properties: { "class.sd-disabled": "disabled()", "class.sd-loading": "loading()", "class.sd-block": "block()", "attr.disabled": "disabled() ? \"true\" : null" } }, usesInheritance: true, ngImport: i0, template: "@let btnType = type();\r\n@let btnLoad = loading();\r\n@let btnTitle = title();\r\n@let pIcon = prefixIcon();\r\n@let sIcon = suffixIcon();\r\n@let fSet = fontSet();\r\n@let hType = htmlType();\r\n\r\n@if (btnType === 'fill') {\r\n  <button\r\n    mat-flat-button\r\n    class=\"c-button c-fill\"\r\n    [type]=\"hType\"\r\n    [ngClass]=\"buttonClasses()\"\r\n    [disabled]=\"disabled()\"\r\n    [color]=\"color()\"\r\n    [attr.data-autoId]=\"autoId()\"\r\n    [style.width]=\"width()\"\r\n    [matTooltip]=\"tooltip() || ''\"\r\n    matTooltipPosition=\"above\"\r\n    (click)=\"onInternalClick($event)\">\r\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\r\n  </button>\r\n} @else if (btnType === 'light') {\r\n  <button\r\n    mat-flat-button\r\n    class=\"c-button c-light\"\r\n    [type]=\"hType\"\r\n    [ngClass]=\"buttonClasses()\"\r\n    [disabled]=\"disabled()\"\r\n    [color]=\"color()\"\r\n    [attr.data-autoId]=\"autoId()\"\r\n    [style.width]=\"width()\"\r\n    [matTooltip]=\"tooltip() || ''\"\r\n    matTooltipPosition=\"above\"\r\n    (click)=\"onInternalClick($event)\">\r\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\r\n  </button>\r\n} @else if (btnType === 'outline') {\r\n  <button\r\n    mat-stroked-button\r\n    class=\"c-button c-outline\"\r\n    [type]=\"hType\"\r\n    [ngClass]=\"buttonClasses()\"\r\n    [disabled]=\"disabled()\"\r\n    [color]=\"color()\"\r\n    [attr.data-autoId]=\"autoId()\"\r\n    [style.width]=\"width()\"\r\n    [matTooltip]=\"tooltip() || ''\"\r\n    matTooltipPosition=\"above\"\r\n    (click)=\"onInternalClick($event)\">\r\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\r\n  </button>\r\n} @else if (btnType === 'link') {\r\n  <button\r\n    mat-button\r\n    class=\"c-button c-link\"\r\n    [type]=\"hType\"\r\n    [ngClass]=\"buttonClasses()\"\r\n    [disabled]=\"disabled()\"\r\n    [color]=\"color()\"\r\n    [attr.data-autoId]=\"autoId()\"\r\n    [style.width]=\"width()\"\r\n    [matTooltip]=\"tooltip() || ''\"\r\n    matTooltipPosition=\"above\"\r\n    (click)=\"onInternalClick($event)\">\r\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\r\n  </button>\r\n}\r\n\r\n<ng-template #contentTpl>\r\n  <div class=\"c-button-content-wrapper\">\r\n    @if (btnLoad) {\r\n      <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\r\n    } @else if (pIcon) {\r\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-prefix\">{{ pIcon }}</mat-icon>\r\n    }\r\n\r\n    @if (btnTitle) {\r\n      <span class=\"c-title\" [class.ml-8]=\"btnLoad || pIcon\" [class.mr-8]=\"sIcon && !btnLoad\">\r\n        {{ btnTitle }}\r\n      </span>\r\n    }\r\n\r\n    @if (sIcon && !btnLoad) {\r\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-suffix\">{{ sIcon }}</mat-icon>\r\n    }\r\n\r\n    @if (!btnTitle && !pIcon && !btnLoad && sIcon) {\r\n      <mat-icon [fontSet]=\"fSet\">{{ sIcon }}</mat-icon>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{display:inline-block;pointer-events:auto}:host.sd-disabled{cursor:not-allowed}:host.sd-loading{cursor:wait}:host.sd-block{display:block;width:100%}:host.sd-block button{width:100%}:host ::ng-deep button.c-button{pointer-events:auto;min-width:auto}: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: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%;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,
-            args: [{ selector: 'sd-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, MatButtonModule, MatProgressSpinnerModule, MatTooltipModule], template: "@if (type === '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)\"> <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    [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)\"> <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    [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)\"> <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    [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)\"> <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>", 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: () => [], propDecorators: { _autoId: [{
-                type: Input,
-                args: ['autoId']
-            }], _type: [{
-                type: Input,
-                args: ['type']
-            }], _color: [{
-                type: Input,
-                args: ['color']
-            }], title: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], tooltip: [{
-                type: Input
-            }], prefixIcon: [{
-                type: Input
-            }], suffixIcon: [{
-                type: Input
-            }], _fontSet: [{
-                type: Input,
-                args: ['fontSet']
-            }], disabled: [{
-                type: HostBinding,
-                args: ['class.sd-disabled']
-            }], disabledAttr: [{
-                type: HostBinding,
-                args: ['attr.disabled']
-            }], _disabled: [{
-                type: Input,
-                args: ['disabled']
-            }], loading: [{
-                type: HostBinding,
-                args: ['class.sd-loading']
-            }, {
-                type: Input
-            }], click: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'sd-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, MatButtonModule, MatProgressSpinnerModule, MatTooltipModule], host: {
+                        '[class.sd-disabled]': 'disabled()',
+                        '[class.sd-loading]': 'loading()',
+                        '[class.sd-block]': 'block()',
+                        '[attr.disabled]': 'disabled() ? "true" : null',
+                    }, template: "@let btnType = type();\r\n@let btnLoad = loading();\r\n@let btnTitle = title();\r\n@let pIcon = prefixIcon();\r\n@let sIcon = suffixIcon();\r\n@let fSet = fontSet();\r\n@let hType = htmlType();\r\n\r\n@if (btnType === 'fill') {\r\n  <button\r\n    mat-flat-button\r\n    class=\"c-button c-fill\"\r\n    [type]=\"hType\"\r\n    [ngClass]=\"buttonClasses()\"\r\n    [disabled]=\"disabled()\"\r\n    [color]=\"color()\"\r\n    [attr.data-autoId]=\"autoId()\"\r\n    [style.width]=\"width()\"\r\n    [matTooltip]=\"tooltip() || ''\"\r\n    matTooltipPosition=\"above\"\r\n    (click)=\"onInternalClick($event)\">\r\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\r\n  </button>\r\n} @else if (btnType === 'light') {\r\n  <button\r\n    mat-flat-button\r\n    class=\"c-button c-light\"\r\n    [type]=\"hType\"\r\n    [ngClass]=\"buttonClasses()\"\r\n    [disabled]=\"disabled()\"\r\n    [color]=\"color()\"\r\n    [attr.data-autoId]=\"autoId()\"\r\n    [style.width]=\"width()\"\r\n    [matTooltip]=\"tooltip() || ''\"\r\n    matTooltipPosition=\"above\"\r\n    (click)=\"onInternalClick($event)\">\r\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\r\n  </button>\r\n} @else if (btnType === 'outline') {\r\n  <button\r\n    mat-stroked-button\r\n    class=\"c-button c-outline\"\r\n    [type]=\"hType\"\r\n    [ngClass]=\"buttonClasses()\"\r\n    [disabled]=\"disabled()\"\r\n    [color]=\"color()\"\r\n    [attr.data-autoId]=\"autoId()\"\r\n    [style.width]=\"width()\"\r\n    [matTooltip]=\"tooltip() || ''\"\r\n    matTooltipPosition=\"above\"\r\n    (click)=\"onInternalClick($event)\">\r\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\r\n  </button>\r\n} @else if (btnType === 'link') {\r\n  <button\r\n    mat-button\r\n    class=\"c-button c-link\"\r\n    [type]=\"hType\"\r\n    [ngClass]=\"buttonClasses()\"\r\n    [disabled]=\"disabled()\"\r\n    [color]=\"color()\"\r\n    [attr.data-autoId]=\"autoId()\"\r\n    [style.width]=\"width()\"\r\n    [matTooltip]=\"tooltip() || ''\"\r\n    matTooltipPosition=\"above\"\r\n    (click)=\"onInternalClick($event)\">\r\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\r\n  </button>\r\n}\r\n\r\n<ng-template #contentTpl>\r\n  <div class=\"c-button-content-wrapper\">\r\n    @if (btnLoad) {\r\n      <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\r\n    } @else if (pIcon) {\r\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-prefix\">{{ pIcon }}</mat-icon>\r\n    }\r\n\r\n    @if (btnTitle) {\r\n      <span class=\"c-title\" [class.ml-8]=\"btnLoad || pIcon\" [class.mr-8]=\"sIcon && !btnLoad\">\r\n        {{ btnTitle }}\r\n      </span>\r\n    }\r\n\r\n    @if (sIcon && !btnLoad) {\r\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-suffix\">{{ sIcon }}</mat-icon>\r\n    }\r\n\r\n    @if (!btnTitle && !pIcon && !btnLoad && sIcon) {\r\n      <mat-icon [fontSet]=\"fSet\">{{ sIcon }}</mat-icon>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{display:inline-block;pointer-events:auto}:host.sd-disabled{cursor:not-allowed}:host.sd-loading{cursor:wait}:host.sd-block{display:block;width:100%}:host.sd-block button{width:100%}:host ::ng-deep button.c-button{pointer-events:auto;min-width:auto}: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: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%;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: () => [] });
 
 /**
  * Generated bundle index. Do not edit.

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 */\r\nimport { CommonModule } from '@angular/common';\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  EventEmitter,\r\n  HostBinding,\r\n  Input,\r\n  OnDestroy,\r\n  OnInit,\r\n  Output,\r\n} from '@angular/core';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { SdBaseSecureComponent } from '@sd-angular/core/components/base';\r\nimport { SdColor } from '@sd-angular/core/utilities/models';\r\nimport { Subject, Subscription } from 'rxjs';\r\nimport { filter, throttleTime } from 'rxjs/operators';\r\n\r\n@Component({\r\n  selector: 'sd-button',\r\n  templateUrl: './button.component.html',\r\n  styleUrls: ['./button.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  standalone: true,\r\n  imports: [CommonModule, MatIconModule, MatButtonModule, MatProgressSpinnerModule, MatTooltipModule],\r\n})\r\nexport class SdButton extends SdBaseSecureComponent implements OnInit, OnDestroy {\r\n  autoId?: string;\r\n  @Input('autoId') set _autoId(val: string | undefined | null) {\r\n    if (val) {\r\n      this.autoId = `button-${val}`;\r\n    }\r\n  }\r\n\r\n  // --- Style Inputs (Giữ nguyên) ---\r\n  type: 'fill' | 'light' | 'outline' | 'link' = 'light';\r\n  @Input('type') set _type(type: 'fill' | 'light' | 'outline' | 'link' | undefined | null) {\r\n    this.type = type || 'light';\r\n  }\r\n  color: SdColor = 'secondary';\r\n  @Input('color') set _color(color: SdColor | undefined | null) {\r\n    this.color = color || 'secondary';\r\n  }\r\n  @Input() title: string | undefined | null;\r\n  @Input() width: string | undefined | null;\r\n  @Input() size: 'sm' | 'md' | 'lg' | undefined | null = 'sm';\r\n  @Input() tooltip: string | undefined | null;\r\n  @Input() prefixIcon: string | undefined | null;\r\n  @Input() suffixIcon: string | undefined | null;\r\n  fontSet: 'material-icons' | 'material-icons-outlined' | 'material-icons-round' | 'material-icons-sharp' | 'material-symbols-outlined' =\r\n    'material-icons';\r\n  @Input('fontSet') set _fontSet(fontSet: SdButton['fontSet'] | undefined | null) {\r\n    this.fontSet = fontSet || 'material-icons';\r\n  }\r\n\r\n  // --- State Inputs ---\r\n  \r\n  @HostBinding('class.sd-disabled')\r\n  disabled = false;\r\n  \r\n  // Binding attribute này để CSS :host[disabled] hoạt động nếu cần\r\n  @HostBinding('attr.disabled')\r\n  get disabledAttr() { return this.disabled ? 'true' : null; }\r\n\r\n  @Input('disabled') set _disabled(value: '' | boolean | undefined | null) {\r\n    this.disabled = value === '' || !!value;\r\n  }\r\n\r\n  @HostBinding('class.sd-loading')\r\n  @Input() loading = false;\r\n\r\n  @Output() click = new EventEmitter<Event>();\r\n\r\n  #clickSubject = new Subject<Event>();\r\n  #subscription = new Subscription();\r\n\r\n  constructor() {\r\n    super();\r\n  }\r\n\r\n  ngOnInit() {\r\n    this.#subscription.add(\r\n      this.#clickSubject\r\n        .pipe(\r\n          throttleTime(300, undefined, { leading: true, trailing: false }),\r\n          filter(() => !this.disabled && !this.loading)\r\n        )\r\n        .subscribe(event => {\r\n          // Emit sự kiện ra ngoài\r\n          this.click.emit(event);\r\n        })\r\n    );\r\n  }\r\n\r\n  // Hàm này gắn vào (click) của button con\r\n  onInternalClick(event: Event) {\r\n    // 1. QUAN TRỌNG: Chặn sự kiện nổi bọt lên Host\r\n    // Vì Host đã có pointer-events: none nên về lý thuyết nó không nhận click,\r\n    // nhưng stopPropagation đảm bảo an toàn tuyệt đối về mặt DOM event bubbling.\r\n    event.stopPropagation();\r\n    \r\n    // Nếu muốn chắc chắn Angular không dính lại sự kiện cũ\r\n    // event.stopImmediatePropagation(); \r\n\r\n    if (this.disabled || this.loading) {\r\n      return;\r\n    }\r\n\r\n    this.#clickSubject.next(event);\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.#subscription.unsubscribe();\r\n  }\r\n\r\n  get buttonClasses() {\r\n    return {\r\n      'c-square': (this.prefixIcon || this.suffixIcon) && !this.title,\r\n      'c-sm': this.size === 'sm',\r\n      'c-md': this.size === 'md',\r\n      'c-lg': this.size === 'lg',\r\n      'c-disabled': this.disabled,\r\n    };\r\n  }\r\n}","@if (type === '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)\"> <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    [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)\"> <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    [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)\"> <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    [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)\"> <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 * 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 */\r\nimport { CommonModule } from '@angular/common';\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  OnDestroy,\r\n  OnInit,\r\n  booleanAttribute,\r\n  computed,\r\n  inject,\r\n  input,\r\n  output,\r\n} from '@angular/core';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { SdBaseSecureComponent } from '@sd-angular/core/components/base';\r\nimport { DefaultMaterialIconFontSet, MaterialIconFontSet, SdColor } from '@sd-angular/core/utilities/models';\r\nimport { Subject, Subscription } from 'rxjs';\r\nimport { filter, throttleTime } from 'rxjs/operators';\r\n\r\n// Export các Type ra ngoài để tái sử dụng ở file config/interface\r\nexport type SdButtonType = 'fill' | 'light' | 'outline' | 'link';\r\nexport type SdButtonSize = 'sm' | 'md' | 'lg';\r\nexport type SdButtonHtmlType = 'button' | 'submit' | 'reset';\r\n\r\n@Component({\r\n  selector: 'sd-button',\r\n  templateUrl: './button.component.html',\r\n  styleUrls: ['./button.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  standalone: true,\r\n  imports: [CommonModule, MatIconModule, MatButtonModule, MatProgressSpinnerModule, MatTooltipModule],\r\n  host: {\r\n    '[class.sd-disabled]': 'disabled()',\r\n    '[class.sd-loading]': 'loading()',\r\n    '[class.sd-block]': 'block()',\r\n    '[attr.disabled]': 'disabled() ? \"true\" : null',\r\n  }\r\n})\r\nexport class SdButton extends SdBaseSecureComponent implements OnInit, OnDestroy {\r\n  // ==========================================\r\n  // 1. INJECTS\r\n  // ==========================================\r\n  private el = inject(ElementRef);\r\n\r\n  // ==========================================\r\n  // 2. SIGNAL INPUTS (Bảo mật 100% với Null/Undefined)\r\n  // ==========================================\r\n  autoIdInput = input<string | undefined | null>(undefined, { alias: 'autoId' });\r\n  \r\n  type = input<SdButtonType, SdButtonType | undefined | null>('light', {\r\n    transform: (value) => value || 'light'\r\n  });\r\n\r\n  color = input<SdColor, SdColor | undefined | null>('secondary', {\r\n    transform: (value) => value || 'secondary'\r\n  });\r\n\r\n  size = input<SdButtonSize, SdButtonSize | undefined | null>('sm', {\r\n    transform: (value) => value || 'sm'\r\n  });\r\n\r\n  fontSet = input<MaterialIconFontSet, MaterialIconFontSet | undefined | null>(DefaultMaterialIconFontSet, {\r\n    transform: (value) => value || DefaultMaterialIconFontSet\r\n  });\r\n\r\n  title = input<string | undefined | null>(undefined);\r\n  width = input<string | undefined | null>(undefined);\r\n  tooltip = input<string | undefined | null>(undefined);\r\n  prefixIcon = input<string | undefined | null>(undefined);\r\n  suffixIcon = input<string | undefined | null>(undefined);\r\n\r\n  disabled = input(false, { transform: booleanAttribute });\r\n  loading = input(false, { transform: booleanAttribute });\r\n  block = input(false, { transform: booleanAttribute });\r\n\r\n  htmlType = input<SdButtonHtmlType, SdButtonHtmlType | undefined | null>('button', {\r\n    transform: (value) => value || 'button'\r\n  });\r\n\r\n  // ==========================================\r\n  // 3. COMPUTED STATE\r\n  // ==========================================\r\n  autoId = computed(() => this.autoIdInput() ? `button-${this.autoIdInput()}` : undefined);\r\n  \r\n  buttonClasses = computed(() => ({\r\n    'c-square': (this.prefixIcon() || this.suffixIcon()) && !this.title(),\r\n    'c-sm': this.size() === 'sm',\r\n    'c-md': this.size() === 'md',\r\n    'c-lg': this.size() === 'lg',\r\n    'c-disabled': this.disabled(),\r\n    'c-block': this.block(),\r\n  }));\r\n\r\n  // ==========================================\r\n  // 4. OUTPUT & RXJS STREAMS\r\n  // ==========================================\r\n  click = output<Event>();\r\n\r\n  #clickSubject = new Subject<Event>();\r\n  #subscription = new Subscription();\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    // Kỹ thuật Đánh chặn sự kiện (Capture Phase)\r\n    // Tóm sống mọi sự kiện click ngay khi nó vừa chạm vào component\r\n    this.el.nativeElement.addEventListener(\r\n      'click',\r\n      (event: Event) => {\r\n        if (this.disabled() || this.loading()) {\r\n          // Nghiền nát sự kiện, không cho Angular phát (click) ra component cha\r\n          event.preventDefault();\r\n          event.stopPropagation();\r\n          event.stopImmediatePropagation();\r\n        }\r\n      },\r\n      { capture: true }\r\n    );\r\n  }\r\n\r\n  ngOnInit() {\r\n    this.#subscription.add(\r\n      this.#clickSubject\r\n        .pipe(\r\n          throttleTime(300, undefined, { leading: true, trailing: false }),\r\n          filter(() => !this.disabled() && !this.loading())\r\n        )\r\n        .subscribe(event => {\r\n          this.click.emit(event);\r\n        })\r\n    );\r\n  }\r\n\r\n  // Nhận click từ thẻ button con bên trong\r\n  onInternalClick(event: Event) {\r\n    event.stopPropagation();\r\n    \r\n    if (this.disabled() || this.loading()) {\r\n      return;\r\n    }\r\n\r\n    this.#clickSubject.next(event);\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.#subscription.unsubscribe();\r\n  }\r\n}","@let btnType = type();\r\n@let btnLoad = loading();\r\n@let btnTitle = title();\r\n@let pIcon = prefixIcon();\r\n@let sIcon = suffixIcon();\r\n@let fSet = fontSet();\r\n@let hType = htmlType();\r\n\r\n@if (btnType === 'fill') {\r\n  <button\r\n    mat-flat-button\r\n    class=\"c-button c-fill\"\r\n    [type]=\"hType\"\r\n    [ngClass]=\"buttonClasses()\"\r\n    [disabled]=\"disabled()\"\r\n    [color]=\"color()\"\r\n    [attr.data-autoId]=\"autoId()\"\r\n    [style.width]=\"width()\"\r\n    [matTooltip]=\"tooltip() || ''\"\r\n    matTooltipPosition=\"above\"\r\n    (click)=\"onInternalClick($event)\">\r\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\r\n  </button>\r\n} @else if (btnType === 'light') {\r\n  <button\r\n    mat-flat-button\r\n    class=\"c-button c-light\"\r\n    [type]=\"hType\"\r\n    [ngClass]=\"buttonClasses()\"\r\n    [disabled]=\"disabled()\"\r\n    [color]=\"color()\"\r\n    [attr.data-autoId]=\"autoId()\"\r\n    [style.width]=\"width()\"\r\n    [matTooltip]=\"tooltip() || ''\"\r\n    matTooltipPosition=\"above\"\r\n    (click)=\"onInternalClick($event)\">\r\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\r\n  </button>\r\n} @else if (btnType === 'outline') {\r\n  <button\r\n    mat-stroked-button\r\n    class=\"c-button c-outline\"\r\n    [type]=\"hType\"\r\n    [ngClass]=\"buttonClasses()\"\r\n    [disabled]=\"disabled()\"\r\n    [color]=\"color()\"\r\n    [attr.data-autoId]=\"autoId()\"\r\n    [style.width]=\"width()\"\r\n    [matTooltip]=\"tooltip() || ''\"\r\n    matTooltipPosition=\"above\"\r\n    (click)=\"onInternalClick($event)\">\r\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\r\n  </button>\r\n} @else if (btnType === 'link') {\r\n  <button\r\n    mat-button\r\n    class=\"c-button c-link\"\r\n    [type]=\"hType\"\r\n    [ngClass]=\"buttonClasses()\"\r\n    [disabled]=\"disabled()\"\r\n    [color]=\"color()\"\r\n    [attr.data-autoId]=\"autoId()\"\r\n    [style.width]=\"width()\"\r\n    [matTooltip]=\"tooltip() || ''\"\r\n    matTooltipPosition=\"above\"\r\n    (click)=\"onInternalClick($event)\">\r\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\r\n  </button>\r\n}\r\n\r\n<ng-template #contentTpl>\r\n  <div class=\"c-button-content-wrapper\">\r\n    @if (btnLoad) {\r\n      <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\r\n    } @else if (pIcon) {\r\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-prefix\">{{ pIcon }}</mat-icon>\r\n    }\r\n\r\n    @if (btnTitle) {\r\n      <span class=\"c-title\" [class.ml-8]=\"btnLoad || pIcon\" [class.mr-8]=\"sIcon && !btnLoad\">\r\n        {{ btnTitle }}\r\n      </span>\r\n    }\r\n\r\n    @if (sIcon && !btnLoad) {\r\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-suffix\">{{ sIcon }}</mat-icon>\r\n    }\r\n\r\n    @if (!btnTitle && !pIcon && !btnLoad && sIcon) {\r\n      <mat-icon [fontSet]=\"fSet\">{{ sIcon }}</mat-icon>\r\n    }\r\n  </div>\r\n</ng-template>\r\n","/**\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-code-editor.mjs

@@ -0,0 +1,127 @@
+import { Clipboard } from '@angular/cdk/clipboard';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, model, input, booleanAttribute, signal, computed, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i2 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as Prism from 'prismjs';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-scss';
+import 'prismjs/components/prism-markup';
+
+class SdCodeEditor {
+    #clipboard = inject(Clipboard);
+    #sanitizer = inject(DomSanitizer);
+    // ==========================================
+    // 1. SIGNAL INPUTS & MODEL
+    // ==========================================
+    // Nhận bất kỳ kiểu dữ liệu nào (string, array, object)
+    valueModel = model(undefined, { alias: 'model' });
+    language = input('typescript');
+    maxHeight = input('500px');
+    // Trạng thái Viewed (true = Read Only, false = Editable)
+    viewed = input(false, { transform: booleanAttribute });
+    // ==========================================
+    // 2. INTERNAL STATE
+    // ==========================================
+    copied = signal(false);
+    // Chuỗi text nội bộ dùng để map với thẻ <textarea>
+    textValue = signal('');
+    prismLang = computed(() => this.language() === 'html' ? 'markup' : this.language());
+    // Cờ lưu vết để chống Loop (Vòng lặp vô tận khi bắn 2 chiều)
+    _lastEmittedValue = undefined;
+    constructor() {
+        // ==========================================
+        // EFFECT 1: Dữ liệu từ CHA truyền vào (Model -> TextValue)
+        // ==========================================
+        effect(() => {
+            const extVal = this.valueModel();
+            const lang = this.language();
+            untracked(() => {
+                // Nếu giá trị này do chính component bắn ra, bỏ qua để tránh loop
+                if (extVal === this._lastEmittedValue)
+                    return;
+                if (typeof extVal === 'string') {
+                    this.textValue.set(extVal);
+                }
+                else if (extVal !== undefined && extVal !== null) {
+                    // Tự động format Object -> String nếu là JSON
+                    if (lang === 'json') {
+                        try {
+                            this.textValue.set(JSON.stringify(extVal, null, 2));
+                        }
+                        catch {
+                            this.textValue.set('// Lỗi: Object có tham chiếu vòng (Circular Reference)');
+                        }
+                    }
+                    else {
+                        this.textValue.set(String(extVal));
+                    }
+                }
+                else {
+                    this.textValue.set('');
+                }
+            });
+        });
+    }
+    // ==========================================
+    // EFFECT 2: PrismJS render (TextValue -> HTML MÀU)
+    // ==========================================
+    highlightedCode = computed(() => {
+        // Dùng khoảng trắng để giữ độ cao cho thẻ pre nếu rỗng
+        const rawCode = this.textValue() || ' ';
+        const langKey = this.prismLang();
+        const grammar = Prism.languages[langKey] || Prism.languages['markup'];
+        // Cộng thêm \n ở cuối để chống lỗi con trỏ textarea ăn lẹm dòng cuối
+        const highlightedString = Prism.highlight(rawCode, grammar, langKey) + '\n';
+        return this.#sanitizer.bypassSecurityTrustHtml(highlightedString);
+    });
+    // ==========================================
+    // EVENTS
+    // ==========================================
+    // Khi người dùng gõ vào Textarea (TextValue -> Model)
+    onTextChange(newText) {
+        this.textValue.set(newText);
+        let valToEmit = newText;
+        // Nếu ngôn ngữ là JSON, cố gắng trả về Object thật
+        if (this.language() === 'json') {
+            try {
+                valToEmit = JSON.parse(newText);
+            }
+            catch {
+                // Nếu gõ dở ngoặc/sai cú pháp -> Trả về chuỗi String tạm
+                valToEmit = newText;
+            }
+        }
+        // Ghi sổ và bắn ra ngoài
+        this._lastEmittedValue = valToEmit;
+        this.valueModel.set(valToEmit);
+    }
+    copyToClipboard() {
+        const rawCode = this.textValue();
+        if (!rawCode)
+            return;
+        if (this.#clipboard.copy(rawCode)) {
+            this.copied.set(true);
+            setTimeout(() => this.copied.set(false), 2000);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdCodeEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdCodeEditor, isStandalone: true, selector: "sd-code-editor", inputs: { valueModel: { classPropertyName: "valueModel", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, viewed: { classPropertyName: "viewed", publicName: "viewed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "modelChange" }, ngImport: i0, template: "<div class=\"sd-code-wrapper\" [class.is-editable]=\"!viewed()\">\r\n  \r\n  <div class=\"sd-code-header\">\r\n    <div class=\"mac-dots\">\r\n      <span class=\"dot red\"></span>\r\n      <span class=\"dot yellow\"></span>\r\n      <span class=\"dot green\"></span>\r\n    </div>\r\n    \r\n    <div class=\"lang-badge\">\r\n      {{ language().toUpperCase() }} \r\n      <span style=\"opacity: 0.6; margin-left: 4px; font-weight: normal;\">\r\n        {{ viewed() ? '(READ ONLY)' : '(EDITING)' }}\r\n      </span>\r\n    </div>\r\n    \r\n    <button class=\"copy-btn\" [matTooltip]=\"copied() ? '\u0110\u00E3 copy!' : 'Copy code'\" (click)=\"copyToClipboard()\">\r\n      <mat-icon [class.text-success]=\"copied()\">{{ copied() ? 'check' : 'content_copy' }}</mat-icon>\r\n      <span>{{ copied() ? 'Copied' : 'Copy' }}</span>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"sd-code-content\" [style.maxHeight]=\"maxHeight()\">\r\n    <div class=\"editor-overlay-container\">\r\n      \r\n      @if (!viewed()) {\r\n        <textarea\r\n          class=\"code-textarea\"\r\n          [value]=\"textValue()\"\r\n          (input)=\"onTextChange($any($event.target).value)\"\r\n          spellcheck=\"false\"\r\n          autocomplete=\"off\"\r\n          autocorrect=\"off\"\r\n          autocapitalize=\"off\">\r\n        </textarea>\r\n      }\r\n      \r\n      <pre aria-hidden=\"true\" class=\"code-display\"><code [class]=\"'language-' + prismLang()\" [innerHTML]=\"highlightedCode()\"></code></pre>\r\n      \r\n    </div>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.sd-code-wrapper{background-color:#1e1e1e;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px #00000026;margin:16px 0;font-family:Fira Code,Consolas,Monaco,monospace}.sd-code-wrapper .sd-code-header{display:flex;align-items:center;justify-content:space-between;background-color:#2d2d2d;padding:8px 16px;border-bottom:1px solid #404040}.sd-code-wrapper .sd-code-header .mac-dots{display:flex;gap:6px}.sd-code-wrapper .sd-code-header .mac-dots .dot{width:12px;height:12px;border-radius:50%}.sd-code-wrapper .sd-code-header .mac-dots .dot.red{background-color:#ff5f56}.sd-code-wrapper .sd-code-header .mac-dots .dot.yellow{background-color:#ffbd2e}.sd-code-wrapper .sd-code-header .mac-dots .dot.green{background-color:#27c93f}.sd-code-wrapper .sd-code-header .lang-badge{color:#858585;font-size:12px;font-weight:600;letter-spacing:.5px}.sd-code-wrapper .sd-code-header .copy-btn{display:flex;align-items:center;gap:4px;background:none;border:none;color:#ccc;cursor:pointer;font-size:13px;padding:4px 8px;border-radius:4px;transition:all .2s ease}.sd-code-wrapper .sd-code-header .copy-btn mat-icon{font-size:16px;width:16px;height:16px}.sd-code-wrapper .sd-code-header .copy-btn:hover{background-color:#404040;color:#fff}.sd-code-wrapper .sd-code-header .copy-btn .text-success{color:#27c93f!important}.sd-code-wrapper .sd-code-content{overflow-y:auto;position:relative}.sd-code-wrapper .sd-code-content::-webkit-scrollbar{width:8px;height:8px}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-thumb{background:#555;border-radius:4px}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-thumb:hover{background:#777}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-track{background:#1e1e1e}.sd-code-wrapper .sd-code-content .editor-overlay-container{position:relative;min-height:100px}.sd-code-wrapper .sd-code-content .code-textarea,.sd-code-wrapper .sd-code-content .code-display{margin:0;padding:16px;border:0;width:100%;min-height:100%;font-family:inherit;font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-all;tab-size:2}.sd-code-wrapper .sd-code-content .code-textarea{position:absolute;top:0;left:0;z-index:2;background:transparent!important;color:transparent!important;-webkit-text-fill-color:transparent!important;caret-color:#fff;resize:none;outline:none;overflow:hidden}.sd-code-wrapper .sd-code-content .code-display{position:relative;z-index:1;pointer-events:none}.sd-code-wrapper .sd-code-content .code-display code{color:#d4d4d4;font-family:inherit}.sd-code-wrapper .token.comment,.sd-code-wrapper .token.block-comment,.sd-code-wrapper .token.prolog,.sd-code-wrapper .token.doctype,.sd-code-wrapper .token.cdata{color:#999}.sd-code-wrapper .token.punctuation{color:#ccc}.sd-code-wrapper .token.tag,.sd-code-wrapper .token.attr-name,.sd-code-wrapper .token.namespace,.sd-code-wrapper .token.deleted{color:#e2777a}.sd-code-wrapper .token.function-name{color:#6196cc}.sd-code-wrapper .token.boolean,.sd-code-wrapper .token.number,.sd-code-wrapper .token.function{color:#f08d49}.sd-code-wrapper .token.property,.sd-code-wrapper .token.class-name,.sd-code-wrapper .token.constant,.sd-code-wrapper .token.symbol{color:#f8c555}.sd-code-wrapper .token.selector,.sd-code-wrapper .token.important,.sd-code-wrapper .token.atrule,.sd-code-wrapper .token.keyword,.sd-code-wrapper .token.builtin{color:#cc99cd}.sd-code-wrapper .token.string,.sd-code-wrapper .token.char,.sd-code-wrapper .token.attr-value,.sd-code-wrapper .token.regex,.sd-code-wrapper .token.variable{color:#7ec699}.sd-code-wrapper .token.operator,.sd-code-wrapper .token.entity,.sd-code-wrapper .token.url{color:#67cdcc}.sd-code-wrapper .token.important,.sd-code-wrapper .token.bold{font-weight:700}.sd-code-wrapper .token.italic{font-style:italic}.sd-code-wrapper .token.entity{cursor:help}.sd-code-wrapper .token.inserted{color:green}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdCodeEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-code-editor', standalone: true, imports: [CommonModule, MatIconModule, MatTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"sd-code-wrapper\" [class.is-editable]=\"!viewed()\">\r\n  \r\n  <div class=\"sd-code-header\">\r\n    <div class=\"mac-dots\">\r\n      <span class=\"dot red\"></span>\r\n      <span class=\"dot yellow\"></span>\r\n      <span class=\"dot green\"></span>\r\n    </div>\r\n    \r\n    <div class=\"lang-badge\">\r\n      {{ language().toUpperCase() }} \r\n      <span style=\"opacity: 0.6; margin-left: 4px; font-weight: normal;\">\r\n        {{ viewed() ? '(READ ONLY)' : '(EDITING)' }}\r\n      </span>\r\n    </div>\r\n    \r\n    <button class=\"copy-btn\" [matTooltip]=\"copied() ? '\u0110\u00E3 copy!' : 'Copy code'\" (click)=\"copyToClipboard()\">\r\n      <mat-icon [class.text-success]=\"copied()\">{{ copied() ? 'check' : 'content_copy' }}</mat-icon>\r\n      <span>{{ copied() ? 'Copied' : 'Copy' }}</span>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"sd-code-content\" [style.maxHeight]=\"maxHeight()\">\r\n    <div class=\"editor-overlay-container\">\r\n      \r\n      @if (!viewed()) {\r\n        <textarea\r\n          class=\"code-textarea\"\r\n          [value]=\"textValue()\"\r\n          (input)=\"onTextChange($any($event.target).value)\"\r\n          spellcheck=\"false\"\r\n          autocomplete=\"off\"\r\n          autocorrect=\"off\"\r\n          autocapitalize=\"off\">\r\n        </textarea>\r\n      }\r\n      \r\n      <pre aria-hidden=\"true\" class=\"code-display\"><code [class]=\"'language-' + prismLang()\" [innerHTML]=\"highlightedCode()\"></code></pre>\r\n      \r\n    </div>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.sd-code-wrapper{background-color:#1e1e1e;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px #00000026;margin:16px 0;font-family:Fira Code,Consolas,Monaco,monospace}.sd-code-wrapper .sd-code-header{display:flex;align-items:center;justify-content:space-between;background-color:#2d2d2d;padding:8px 16px;border-bottom:1px solid #404040}.sd-code-wrapper .sd-code-header .mac-dots{display:flex;gap:6px}.sd-code-wrapper .sd-code-header .mac-dots .dot{width:12px;height:12px;border-radius:50%}.sd-code-wrapper .sd-code-header .mac-dots .dot.red{background-color:#ff5f56}.sd-code-wrapper .sd-code-header .mac-dots .dot.yellow{background-color:#ffbd2e}.sd-code-wrapper .sd-code-header .mac-dots .dot.green{background-color:#27c93f}.sd-code-wrapper .sd-code-header .lang-badge{color:#858585;font-size:12px;font-weight:600;letter-spacing:.5px}.sd-code-wrapper .sd-code-header .copy-btn{display:flex;align-items:center;gap:4px;background:none;border:none;color:#ccc;cursor:pointer;font-size:13px;padding:4px 8px;border-radius:4px;transition:all .2s ease}.sd-code-wrapper .sd-code-header .copy-btn mat-icon{font-size:16px;width:16px;height:16px}.sd-code-wrapper .sd-code-header .copy-btn:hover{background-color:#404040;color:#fff}.sd-code-wrapper .sd-code-header .copy-btn .text-success{color:#27c93f!important}.sd-code-wrapper .sd-code-content{overflow-y:auto;position:relative}.sd-code-wrapper .sd-code-content::-webkit-scrollbar{width:8px;height:8px}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-thumb{background:#555;border-radius:4px}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-thumb:hover{background:#777}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-track{background:#1e1e1e}.sd-code-wrapper .sd-code-content .editor-overlay-container{position:relative;min-height:100px}.sd-code-wrapper .sd-code-content .code-textarea,.sd-code-wrapper .sd-code-content .code-display{margin:0;padding:16px;border:0;width:100%;min-height:100%;font-family:inherit;font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-all;tab-size:2}.sd-code-wrapper .sd-code-content .code-textarea{position:absolute;top:0;left:0;z-index:2;background:transparent!important;color:transparent!important;-webkit-text-fill-color:transparent!important;caret-color:#fff;resize:none;outline:none;overflow:hidden}.sd-code-wrapper .sd-code-content .code-display{position:relative;z-index:1;pointer-events:none}.sd-code-wrapper .sd-code-content .code-display code{color:#d4d4d4;font-family:inherit}.sd-code-wrapper .token.comment,.sd-code-wrapper .token.block-comment,.sd-code-wrapper .token.prolog,.sd-code-wrapper .token.doctype,.sd-code-wrapper .token.cdata{color:#999}.sd-code-wrapper .token.punctuation{color:#ccc}.sd-code-wrapper .token.tag,.sd-code-wrapper .token.attr-name,.sd-code-wrapper .token.namespace,.sd-code-wrapper .token.deleted{color:#e2777a}.sd-code-wrapper .token.function-name{color:#6196cc}.sd-code-wrapper .token.boolean,.sd-code-wrapper .token.number,.sd-code-wrapper .token.function{color:#f08d49}.sd-code-wrapper .token.property,.sd-code-wrapper .token.class-name,.sd-code-wrapper .token.constant,.sd-code-wrapper .token.symbol{color:#f8c555}.sd-code-wrapper .token.selector,.sd-code-wrapper .token.important,.sd-code-wrapper .token.atrule,.sd-code-wrapper .token.keyword,.sd-code-wrapper .token.builtin{color:#cc99cd}.sd-code-wrapper .token.string,.sd-code-wrapper .token.char,.sd-code-wrapper .token.attr-value,.sd-code-wrapper .token.regex,.sd-code-wrapper .token.variable{color:#7ec699}.sd-code-wrapper .token.operator,.sd-code-wrapper .token.entity,.sd-code-wrapper .token.url{color:#67cdcc}.sd-code-wrapper .token.important,.sd-code-wrapper .token.bold{font-weight:700}.sd-code-wrapper .token.italic{font-style:italic}.sd-code-wrapper .token.entity{cursor:help}.sd-code-wrapper .token.inserted{color:green}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdCodeEditor };
+//# sourceMappingURL=sd-angular-core-components-code-editor.mjs.map