npm - @sdcorejs/angular - Versions diffs - 19.0.1 → 20.0.0-rc.2 - Mend

@sdcorejs/angular 19.0.1 → 20.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (655) hide show

package/fesm2022/sdcorejs-angular-components-inform.mjs CHANGED Viewed

@@ -11,10 +11,10 @@ import { TranslatePipe } from '@sdcorejs/angular/i18n';
  * Khi có phần tử mang [sdInformAction], component ẩn link `actionLabel` mặc định.
  */
 class SdInformActionDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdInformActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: SdInformActionDirective, isStandalone: true, selector: "[sdInformAction]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdInformActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.23", type: SdInformActionDirective, isStandalone: true, selector: "[sdInformAction]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdInformActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdInformActionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sdInformAction]',
@@ -34,35 +34,35 @@ const SD_INFORM_DEFAULT_ICON = {
 };
 class SdInform {
     // 1. INPUTS
-    color = input('primary', {
-        transform: value => value || 'primary',
-    });
-    primary = input(false, { transform: booleanAttribute });
-    secondary = input(false, { transform: booleanAttribute });
-    info = input(false, { transform: booleanAttribute });
-    success = input(false, { transform: booleanAttribute });
-    warning = input(false, { transform: booleanAttribute });
-    error = input(false, { transform: booleanAttribute });
-    title = input();
-    description = input();
-    icon = input();
-    hideIcon = input(false, { transform: booleanAttribute });
-    fontSet = input('material-icons', {
-        transform: value => value || 'material-icons',
-    });
-    closable = input(false, { transform: booleanAttribute });
-    actionLabel = input();
-    lineClamp = input();
-    autoId = input();
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color", transform: value => value || 'primary' }] : [{
+            transform: value => value || 'primary',
+        }]));
+    primary = input(false, ...(ngDevMode ? [{ debugName: "primary", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    secondary = input(false, ...(ngDevMode ? [{ debugName: "secondary", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    info = input(false, ...(ngDevMode ? [{ debugName: "info", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    success = input(false, ...(ngDevMode ? [{ debugName: "success", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    warning = input(false, ...(ngDevMode ? [{ debugName: "warning", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    error = input(false, ...(ngDevMode ? [{ debugName: "error", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    hideIcon = input(false, ...(ngDevMode ? [{ debugName: "hideIcon", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    fontSet = input('material-icons', ...(ngDevMode ? [{ debugName: "fontSet", transform: value => value || 'material-icons' }] : [{
+            transform: value => value || 'material-icons',
+        }]));
+    closable = input(false, ...(ngDevMode ? [{ debugName: "closable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    actionLabel = input(...(ngDevMode ? [undefined, { debugName: "actionLabel" }] : []));
+    lineClamp = input(...(ngDevMode ? [undefined, { debugName: "lineClamp" }] : []));
+    autoId = input(...(ngDevMode ? [undefined, { debugName: "autoId" }] : []));
     // 2. OUTPUTS
     sdClosed = output();
     sdAction = output();
     // 3. STATE
-    dismissed = signal(false);
-    expanded = signal(false);
-    overflowing = signal(false);
-    bodyRef = viewChild('body');
-    actionSlot = contentChild(SdInformActionDirective);
+    dismissed = signal(false, ...(ngDevMode ? [{ debugName: "dismissed" }] : []));
+    expanded = signal(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    overflowing = signal(false, ...(ngDevMode ? [{ debugName: "overflowing" }] : []));
+    bodyRef = viewChild('body', ...(ngDevMode ? [{ debugName: "bodyRef" }] : []));
+    actionSlot = contentChild(SdInformActionDirective, ...(ngDevMode ? [{ debugName: "actionSlot" }] : []));
     // 4. COMPUTED
     effectiveColor = computed(() => {
         if (this.primary())
@@ -78,7 +78,7 @@ class SdInform {
         if (this.error())
             return 'error';
         return this.color();
-    });
+    }, ...(ngDevMode ? [{ debugName: "effectiveColor" }] : []));
     colorClasses = computed(() => {
         const c = this.effectiveColor();
         return {
@@ -89,12 +89,12 @@ class SdInform {
             'c-warning': c === 'warning',
             'c-error': c === 'error',
         };
-    });
+    }, ...(ngDevMode ? [{ debugName: "colorClasses" }] : []));
     effectiveIcon = computed(() => {
         if (this.hideIcon())
             return null;
         return this.icon() || SD_INFORM_DEFAULT_ICON[this.effectiveColor()];
-    });
+    }, ...(ngDevMode ? [{ debugName: "effectiveIcon" }] : []));
     fontSetClasses = computed(() => {
         const f = this.fontSet();
         return {
@@ -103,26 +103,26 @@ class SdInform {
             'material-icons-round': f === 'material-icons-round',
             'material-icons-sharp': f === 'material-icons-sharp',
         };
-    });
-    hasActionSlot = computed(() => !!this.actionSlot());
+    }, ...(ngDevMode ? [{ debugName: "fontSetClasses" }] : []));
+    hasActionSlot = computed(() => !!this.actionSlot(), ...(ngDevMode ? [{ debugName: "hasActionSlot" }] : []));
     // clamp dòng: null = không clamp (đầy đủ); số = số dòng tối đa.
     clampLines = computed(() => {
         const n = this.lineClamp();
         if (!n || n <= 0)
             return null;
         return this.expanded() ? null : n;
-    });
+    }, ...(ngDevMode ? [{ debugName: "clampLines" }] : []));
     // toggle hiện khi đang clamp và đã từng tràn, hoặc đang mở rộng (để còn thu gọn lại).
     showToggle = computed(() => {
         if (!this.lineClamp())
             return false;
         return this.overflowing() || this.expanded();
-    });
+    }, ...(ngDevMode ? [{ debugName: "showToggle" }] : []));
     // why: error/warning là cảnh báo → assertive 'alert'; các màu còn lại là thông tin → polite 'status'.
     liveRole = computed(() => {
         const c = this.effectiveColor();
         return c === 'error' || c === 'warning' ? 'alert' : 'status';
-    });
+    }, ...(ngDevMode ? [{ debugName: "liveRole" }] : []));
     // 5. OVERFLOW MEASUREMENT
     #measureScheduled = false;
     constructor() {
@@ -174,13 +174,13 @@ class SdInform {
         event.stopPropagation();
         this.sdAction.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdInform, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdInform, isStandalone: true, selector: "sd-inform", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, hideIcon: { classPropertyName: "hideIcon", publicName: "hideIcon", isSignal: true, isRequired: false, transformFunction: null }, fontSet: { classPropertyName: "fontSet", publicName: "fontSet", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, lineClamp: { classPropertyName: "lineClamp", publicName: "lineClamp", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed", sdAction: "sdAction" }, queries: [{ propertyName: "actionSlot", first: true, predicate: SdInformActionDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!dismissed()) {\n  @let ic = effectiveIcon();\n  <div\n    class=\"c-inform\"\n    [attr.role]=\"liveRole()\"\n    [ngClass]=\"colorClasses()\"\n    [attr.data-autoId]=\"autoId() || null\"\n    [attr.data-autoid]=\"autoId() || null\">\n\n    @if (ic) {\n      <mat-icon class=\"c-inform-icon c-material-icon\" aria-hidden=\"true\" [ngClass]=\"fontSetClasses()\">{{ ic }}</mat-icon>\n    }\n\n    @let al = actionLabel();\n    <div class=\"c-inform-content\">\n      @if (title(); as t) {\n        <div class=\"c-inform-title\">{{ t }}</div>\n      }\n      @if (description(); as d) {\n        <div\n          #body\n          class=\"c-inform-body\"\n          [class.is-clamped]=\"clampLines() !== null\"\n          [style.-webkit-line-clamp]=\"clampLines()\">\n          {{ d }}\n        </div>\n      }\n      @if (showToggle()) {\n        <button type=\"button\" class=\"c-inform-toggle\" (click)=\"toggleExpanded()\">\n          {{ (expanded() ? 'core.component.inform.show-less' : 'core.component.inform.show-more') | translate }}\n        </button>\n      }\n\n      @if (hasActionSlot()) {\n        <div class=\"c-inform-action\">\n          <ng-content select=\"[sdInformAction]\"></ng-content>\n        </div>\n      } @else if (al) {\n        <button type=\"button\" class=\"c-inform-action c-inform-action-link\" (click)=\"onAction($event)\">\n          {{ al }}\n        </button>\n      }\n    </div>\n\n    @if (closable()) {\n      <button\n        type=\"button\"\n        class=\"c-inform-close\"\n        [attr.aria-label]=\"'core.common.close' | translate\"\n        (click)=\"onClose($event)\">\n        <mat-icon class=\"material-icons\" aria-hidden=\"true\">close</mat-icon>\n      </button>\n    }\n  </div>\n}\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}.c-inform{display:flex;align-items:flex-start;gap:12px;border:1px solid transparent;border-radius:8px;padding:12px 16px;background:#fff}.c-inform.c-primary{border-color:var(--sd-primary);background:var(--sd-primary-light)}.c-inform.c-primary .c-inform-icon,.c-inform.c-primary .c-inform-title{color:var(--sd-primary)}.c-inform.c-secondary{border-color:var(--sd-secondary);background:var(--sd-secondary-light)}.c-inform.c-secondary .c-inform-icon,.c-inform.c-secondary .c-inform-title{color:var(--sd-secondary)}.c-inform.c-info{border-color:var(--sd-info);background:var(--sd-info-light)}.c-inform.c-info .c-inform-icon,.c-inform.c-info .c-inform-title{color:var(--sd-info)}.c-inform.c-success{border-color:var(--sd-success);background:var(--sd-success-light)}.c-inform.c-success .c-inform-icon,.c-inform.c-success .c-inform-title{color:var(--sd-success)}.c-inform.c-warning{border-color:var(--sd-warning);background:var(--sd-warning-light)}.c-inform.c-warning .c-inform-icon,.c-inform.c-warning .c-inform-title{color:var(--sd-warning)}.c-inform.c-error{border-color:var(--sd-error);background:var(--sd-error-light)}.c-inform.c-error .c-inform-icon,.c-inform.c-error .c-inform-title{color:var(--sd-error)}.c-inform .c-inform-icon{flex:0 0 auto;width:20px;height:20px;font-size:20px;line-height:20px}.c-inform .c-inform-content{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}.c-inform .c-inform-title{font-weight:600;font-size:14px;line-height:20px}.c-inform .c-inform-body{font-size:14px;line-height:20px;color:var(--sd-black500);overflow-wrap:break-word}.c-inform .c-inform-body.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.c-inform .c-inform-toggle,.c-inform .c-inform-action-link{align-self:flex-start;margin-top:4px;padding:0;border:none;background:none;cursor:pointer;font-size:14px;line-height:20px}.c-inform .c-inform-toggle,.c-inform .c-inform-action-link{color:var(--sd-info)}.c-inform .c-inform-action-link:hover{text-decoration:underline}.c-inform .c-inform-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;padding:0;border:none;background:transparent;cursor:pointer;color:var(--sd-black400);transition:background-color 80ms ease,color 80ms ease}.c-inform .c-inform-close:hover{background:#0000000f;color:var(--sd-error)}.c-inform .c-inform-close mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdInform, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: SdInform, isStandalone: true, selector: "sd-inform", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, hideIcon: { classPropertyName: "hideIcon", publicName: "hideIcon", isSignal: true, isRequired: false, transformFunction: null }, fontSet: { classPropertyName: "fontSet", publicName: "fontSet", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, lineClamp: { classPropertyName: "lineClamp", publicName: "lineClamp", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed", sdAction: "sdAction" }, queries: [{ propertyName: "actionSlot", first: true, predicate: SdInformActionDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!dismissed()) {\n  @let ic = effectiveIcon();\n  <div\n    class=\"c-inform\"\n    [attr.role]=\"liveRole()\"\n    [ngClass]=\"colorClasses()\"\n    [attr.data-autoId]=\"autoId() || null\"\n    [attr.data-autoid]=\"autoId() || null\">\n\n    @if (ic) {\n      <mat-icon class=\"c-inform-icon c-material-icon\" aria-hidden=\"true\" [ngClass]=\"fontSetClasses()\">{{ ic }}</mat-icon>\n    }\n\n    @let al = actionLabel();\n    <div class=\"c-inform-content\">\n      @if (title(); as t) {\n        <div class=\"c-inform-title\">{{ t }}</div>\n      }\n      @if (description(); as d) {\n        <div\n          #body\n          class=\"c-inform-body\"\n          [class.is-clamped]=\"clampLines() !== null\"\n          [style.-webkit-line-clamp]=\"clampLines()\">\n          {{ d }}\n        </div>\n      }\n      @if (showToggle()) {\n        <button type=\"button\" class=\"c-inform-toggle\" (click)=\"toggleExpanded()\">\n          {{ (expanded() ? 'core.component.inform.show-less' : 'core.component.inform.show-more') | translate }}\n        </button>\n      }\n\n      @if (hasActionSlot()) {\n        <div class=\"c-inform-action\">\n          <ng-content select=\"[sdInformAction]\"></ng-content>\n        </div>\n      } @else if (al) {\n        <button type=\"button\" class=\"c-inform-action c-inform-action-link\" (click)=\"onAction($event)\">\n          {{ al }}\n        </button>\n      }\n    </div>\n\n    @if (closable()) {\n      <button\n        type=\"button\"\n        class=\"c-inform-close\"\n        [attr.aria-label]=\"'core.common.close' | translate\"\n        (click)=\"onClose($event)\">\n        <mat-icon class=\"material-icons\" aria-hidden=\"true\">close</mat-icon>\n      </button>\n    }\n  </div>\n}\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}.c-inform{display:flex;align-items:flex-start;gap:12px;border:1px solid transparent;border-radius:8px;padding:12px 16px;background:#fff}.c-inform.c-primary{border-color:var(--sd-primary);background:var(--sd-primary-light)}.c-inform.c-primary .c-inform-icon,.c-inform.c-primary .c-inform-title{color:var(--sd-primary)}.c-inform.c-secondary{border-color:var(--sd-secondary);background:var(--sd-secondary-light)}.c-inform.c-secondary .c-inform-icon,.c-inform.c-secondary .c-inform-title{color:var(--sd-secondary)}.c-inform.c-info{border-color:var(--sd-info);background:var(--sd-info-light)}.c-inform.c-info .c-inform-icon,.c-inform.c-info .c-inform-title{color:var(--sd-info)}.c-inform.c-success{border-color:var(--sd-success);background:var(--sd-success-light)}.c-inform.c-success .c-inform-icon,.c-inform.c-success .c-inform-title{color:var(--sd-success)}.c-inform.c-warning{border-color:var(--sd-warning);background:var(--sd-warning-light)}.c-inform.c-warning .c-inform-icon,.c-inform.c-warning .c-inform-title{color:var(--sd-warning)}.c-inform.c-error{border-color:var(--sd-error);background:var(--sd-error-light)}.c-inform.c-error .c-inform-icon,.c-inform.c-error .c-inform-title{color:var(--sd-error)}.c-inform .c-inform-icon{flex:0 0 auto;width:20px;height:20px;font-size:20px;line-height:20px}.c-inform .c-inform-content{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}.c-inform .c-inform-title{font-weight:600;font-size:14px;line-height:20px}.c-inform .c-inform-body{font-size:14px;line-height:20px;color:var(--sd-black500);overflow-wrap:break-word}.c-inform .c-inform-body.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.c-inform .c-inform-toggle,.c-inform .c-inform-action-link{align-self:flex-start;margin-top:4px;padding:0;border:none;background:none;cursor:pointer;font-size:14px;line-height:20px}.c-inform .c-inform-toggle,.c-inform .c-inform-action-link{color:var(--sd-info)}.c-inform .c-inform-action-link:hover{text-decoration:underline}.c-inform .c-inform-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;padding:0;border:none;background:transparent;cursor:pointer;color:var(--sd-black400);transition:background-color 80ms ease,color 80ms ease}.c-inform .c-inform-close:hover{background:#0000000f;color:var(--sd-error)}.c-inform .c-inform-close mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdInform, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdInform, decorators: [{
             type: Component,
             args: [{ selector: 'sd-inform', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, TranslatePipe], template: "@if (!dismissed()) {\n  @let ic = effectiveIcon();\n  <div\n    class=\"c-inform\"\n    [attr.role]=\"liveRole()\"\n    [ngClass]=\"colorClasses()\"\n    [attr.data-autoId]=\"autoId() || null\"\n    [attr.data-autoid]=\"autoId() || null\">\n\n    @if (ic) {\n      <mat-icon class=\"c-inform-icon c-material-icon\" aria-hidden=\"true\" [ngClass]=\"fontSetClasses()\">{{ ic }}</mat-icon>\n    }\n\n    @let al = actionLabel();\n    <div class=\"c-inform-content\">\n      @if (title(); as t) {\n        <div class=\"c-inform-title\">{{ t }}</div>\n      }\n      @if (description(); as d) {\n        <div\n          #body\n          class=\"c-inform-body\"\n          [class.is-clamped]=\"clampLines() !== null\"\n          [style.-webkit-line-clamp]=\"clampLines()\">\n          {{ d }}\n        </div>\n      }\n      @if (showToggle()) {\n        <button type=\"button\" class=\"c-inform-toggle\" (click)=\"toggleExpanded()\">\n          {{ (expanded() ? 'core.component.inform.show-less' : 'core.component.inform.show-more') | translate }}\n        </button>\n      }\n\n      @if (hasActionSlot()) {\n        <div class=\"c-inform-action\">\n          <ng-content select=\"[sdInformAction]\"></ng-content>\n        </div>\n      } @else if (al) {\n        <button type=\"button\" class=\"c-inform-action c-inform-action-link\" (click)=\"onAction($event)\">\n          {{ al }}\n        </button>\n      }\n    </div>\n\n    @if (closable()) {\n      <button\n        type=\"button\"\n        class=\"c-inform-close\"\n        [attr.aria-label]=\"'core.common.close' | translate\"\n        (click)=\"onClose($event)\">\n        <mat-icon class=\"material-icons\" aria-hidden=\"true\">close</mat-icon>\n      </button>\n    }\n  </div>\n}\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}.c-inform{display:flex;align-items:flex-start;gap:12px;border:1px solid transparent;border-radius:8px;padding:12px 16px;background:#fff}.c-inform.c-primary{border-color:var(--sd-primary);background:var(--sd-primary-light)}.c-inform.c-primary .c-inform-icon,.c-inform.c-primary .c-inform-title{color:var(--sd-primary)}.c-inform.c-secondary{border-color:var(--sd-secondary);background:var(--sd-secondary-light)}.c-inform.c-secondary .c-inform-icon,.c-inform.c-secondary .c-inform-title{color:var(--sd-secondary)}.c-inform.c-info{border-color:var(--sd-info);background:var(--sd-info-light)}.c-inform.c-info .c-inform-icon,.c-inform.c-info .c-inform-title{color:var(--sd-info)}.c-inform.c-success{border-color:var(--sd-success);background:var(--sd-success-light)}.c-inform.c-success .c-inform-icon,.c-inform.c-success .c-inform-title{color:var(--sd-success)}.c-inform.c-warning{border-color:var(--sd-warning);background:var(--sd-warning-light)}.c-inform.c-warning .c-inform-icon,.c-inform.c-warning .c-inform-title{color:var(--sd-warning)}.c-inform.c-error{border-color:var(--sd-error);background:var(--sd-error-light)}.c-inform.c-error .c-inform-icon,.c-inform.c-error .c-inform-title{color:var(--sd-error)}.c-inform .c-inform-icon{flex:0 0 auto;width:20px;height:20px;font-size:20px;line-height:20px}.c-inform .c-inform-content{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}.c-inform .c-inform-title{font-weight:600;font-size:14px;line-height:20px}.c-inform .c-inform-body{font-size:14px;line-height:20px;color:var(--sd-black500);overflow-wrap:break-word}.c-inform .c-inform-body.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.c-inform .c-inform-toggle,.c-inform .c-inform-action-link{align-self:flex-start;margin-top:4px;padding:0;border:none;background:none;cursor:pointer;font-size:14px;line-height:20px}.c-inform .c-inform-toggle,.c-inform .c-inform-action-link{color:var(--sd-info)}.c-inform .c-inform-action-link:hover{text-decoration:underline}.c-inform .c-inform-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;padding:0;border:none;background:transparent;cursor:pointer;color:var(--sd-black400);transition:background-color 80ms ease,color 80ms ease}.c-inform .c-inform-close:hover{background:#0000000f;color:var(--sd-error)}.c-inform .c-inform-close mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], primary: [{ type: i0.Input, args: [{ isSignal: true, alias: "primary", required: false }] }], secondary: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondary", required: false }] }], info: [{ type: i0.Input, args: [{ isSignal: true, alias: "info", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], warning: [{ type: i0.Input, args: [{ isSignal: true, alias: "warning", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], hideIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideIcon", required: false }] }], fontSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "fontSet", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], lineClamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineClamp", required: false }] }], autoId: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], sdClosed: [{ type: i0.Output, args: ["sdClosed"] }], sdAction: [{ type: i0.Output, args: ["sdAction"] }], bodyRef: [{ type: i0.ViewChild, args: ['body', { isSignal: true }] }], actionSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdInformActionDirective), { isSignal: true }] }] } });
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/sdcorejs-angular-components-inform.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sdcorejs-angular-components-inform.mjs","sources":["../../../projects/sdcorejs-angular/components/inform/src/inform-action.directive.ts","../../../projects/sdcorejs-angular/components/inform/src/inform.component.ts","../../../projects/sdcorejs-angular/components/inform/src/inform.component.html","../../../projects/sdcorejs-angular/components/inform/sdcorejs-angular-components-inform.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n/*\n Marker cho vùng action custom chiếu vào <sd-inform>.\n * Khi có phần tử mang [sdInformAction], component ẩn link `actionLabel` mặc định.\n /\n@Directive({\n selector: '[sdInformAction]',\n standalone: true,\n})\nexport class SdInformActionDirective {}\n","/ eslint-disable @angular-eslint/no-output-rename /\nimport { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n afterNextRender,\n booleanAttribute,\n computed,\n contentChild,\n effect,\n input,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { Color } from '@sdcorejs/utils/models';\nimport { MaterialIconFontSet } from '@sdcorejs/angular/utilities/models';\nimport { TranslatePipe } from '@sdcorejs/angular/i18n';\nimport { SdInformActionDirective } from './inform-action.directive';\n\n// why: mỗi color có icon trạng thái mặc định khi consumer không truyền [icon].\nconst SD_INFORM_DEFAULT_ICON: Record<Color, string> = {\n primary: 'info',\n secondary: 'info',\n info: 'info',\n success: 'check_circle',\n warning: 'warning',\n error: 'error',\n};\n\n@Component({\n selector: 'sd-inform',\n templateUrl: './inform.component.html',\n styleUrls: ['./inform.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [CommonModule, MatIconModule, TranslatePipe],\n})\nexport class SdInform {\n // 1. INPUTS\n color = input<Color, Color \| undefined \| null>('primary', {\n transform: value => value \|\| 'primary',\n });\n\n primary = input(false, { transform: booleanAttribute });\n secondary = input(false, { transform: booleanAttribute });\n info = input(false, { transform: booleanAttribute });\n success = input(false, { transform: booleanAttribute });\n warning = input(false, { transform: booleanAttribute });\n error = input(false, { transform: booleanAttribute });\n\n title = input<string \| undefined>();\n description = input<string \| undefined>();\n icon = input<string \| undefined>();\n hideIcon = input(false, { transform: booleanAttribute });\n\n fontSet = input<MaterialIconFontSet, MaterialIconFontSet \| undefined \| null>('material-icons', {\n transform: value => value \|\| 'material-icons',\n });\n\n closable = input(false, { transform: booleanAttribute });\n actionLabel = input<string \| undefined>();\n lineClamp = input<number \| undefined>();\n autoId = input<string \| undefined>();\n\n // 2. OUTPUTS\n sdClosed = output<Event>();\n sdAction = output<Event>();\n\n // 3. STATE\n readonly dismissed = signal(false);\n readonly expanded = signal(false);\n readonly overflowing = signal(false);\n\n protected readonly bodyRef = viewChild<ElementRef<HTMLElement>>('body');\n protected readonly actionSlot = contentChild(SdInformActionDirective);\n\n // 4. COMPUTED\n effectiveColor = computed<Color>(() => {\n if (this.primary()) return 'primary';\n if (this.secondary()) return 'secondary';\n if (this.info()) return 'info';\n if (this.success()) return 'success';\n if (this.warning()) return 'warning';\n if (this.error()) return 'error';\n return this.color();\n });\n\n colorClasses = computed(() => {\n const c = this.effectiveColor();\n return {\n 'c-primary': c === 'primary',\n 'c-secondary': c === 'secondary',\n 'c-info': c === 'info',\n 'c-success': c === 'success',\n 'c-warning': c === 'warning',\n 'c-error': c === 'error',\n };\n });\n\n effectiveIcon = computed<string \| null>(() => {\n if (this.hideIcon()) return null;\n return this.icon() \|\| SD_INFORM_DEFAULT_ICON[this.effectiveColor()];\n });\n\n fontSetClasses = computed(() => {\n const f = this.fontSet();\n return {\n 'material-icons': f === 'material-icons',\n 'material-icons-outlined': f === 'material-icons-outlined',\n 'material-icons-round': f === 'material-icons-round',\n 'material-icons-sharp': f === 'material-icons-sharp',\n };\n });\n\n hasActionSlot = computed(() => !!this.actionSlot());\n\n // clamp dòng: null = không clamp (đầy đủ); số = số dòng tối đa.\n clampLines = computed<number \| null>(() => {\n const n = this.lineClamp();\n if (!n \|\| n <= 0) return null;\n return this.expanded() ? null : n;\n });\n\n // toggle hiện khi đang clamp và đã từng tràn, hoặc đang mở rộng (để còn thu gọn lại).\n showToggle = computed(() => {\n if (!this.lineClamp()) return false;\n return this.overflowing() \|\| this.expanded();\n });\n\n // why: error/warning là cảnh báo → assertive 'alert'; các màu còn lại là thông tin → polite 'status'.\n liveRole = computed<'alert' \| 'status'>(() => {\n const c = this.effectiveColor();\n return c === 'error' \|\| c === 'warning' ? 'alert' : 'status';\n });\n\n // 5. OVERFLOW MEASUREMENT\n #measureScheduled = false;\n\n constructor() {\n // đo lần đầu sau render\n afterNextRender(() => this.measureOverflow());\n // why: re-đo khi nội dung/clamp/expanded đổi; đồng thời gắn ResizeObserver để bắt thay đổi kích thước container (responsive).\n effect(onCleanup => {\n this.description();\n this.lineClamp();\n this.expanded();\n const el = this.bodyRef()?.nativeElement;\n this.#scheduleMeasure();\n // why: guard instanceof Element để test stub (plain object) không làm ResizeObserver.observe ném lỗi.\n if (el instanceof Element && typeof ResizeObserver !== 'undefined') {\n const ro = new ResizeObserver(() => this.measureOverflow());\n ro.observe(el);\n onCleanup(() => ro.disconnect());\n }\n });\n }\n\n #scheduleMeasure(): void {\n if (this.#measureScheduled) return;\n this.#measureScheduled = true;\n // gom nhiều thay đổi vào 1 lần đo sau khi DOM cập nhật xong\n queueMicrotask(() => {\n this.#measureScheduled = false;\n this.measureOverflow();\n });\n }\n\n /* Đo tràn dòng của body; chỉ có ý nghĩa khi đang clamp. /\n measureOverflow(): void {\n const el = this.bodyRef()?.nativeElement;\n if (!el \|\| this.expanded() \|\| !this.lineClamp()) return;\n // +1 chống sai số làm tròn sub-pixel\n this.overflowing.set(el.scrollHeight > el.clientHeight + 1);\n }\n\n // 6. HANDLERS\n toggleExpanded(): void {\n this.expanded.update(v => !v);\n }\n\n onClose(event: Event): void {\n event.stopPropagation();\n this.dismissed.set(true);\n this.sdClosed.emit(event);\n }\n\n onAction(event: Event): void {\n event.stopPropagation();\n this.sdAction.emit(event);\n }\n}\n","@if (!dismissed()) {\n @let ic = effectiveIcon();\n <div\n class=\"c-inform\"\n [attr.role]=\"liveRole()\"\n [ngClass]=\"colorClasses()\"\n [attr.data-autoId]=\"autoId() \|\| null\"\n [attr.data-autoid]=\"autoId() \|\| null\">\n\n @if (ic) {\n <mat-icon class=\"c-inform-icon c-material-icon\" aria-hidden=\"true\" [ngClass]=\"fontSetClasses()\">{{ ic }}</mat-icon>\n }\n\n @let al = actionLabel();\n <div class=\"c-inform-content\">\n @if (title(); as t) {\n <div class=\"c-inform-title\">{{ t }}</div>\n }\n @if (description(); as d) {\n <div\n #body\n class=\"c-inform-body\"\n [class.is-clamped]=\"clampLines() !== null\"\n [style.-webkit-line-clamp]=\"clampLines()\">\n {{ d }}\n </div>\n }\n @if (showToggle()) {\n <button type=\"button\" class=\"c-inform-toggle\" (click)=\"toggleExpanded()\">\n {{ (expanded() ? 'core.component.inform.show-less' : 'core.component.inform.show-more') \| translate }}\n </button>\n }\n\n @if (hasActionSlot()) {\n <div class=\"c-inform-action\">\n <ng-content select=\"[sdInformAction]\"></ng-content>\n </div>\n } @else if (al) {\n <button type=\"button\" class=\"c-inform-action c-inform-action-link\" (click)=\"onAction($event)\">\n {{ al }}\n </button>\n }\n </div>\n\n @if (closable()) {\n <button\n type=\"button\"\n class=\"c-inform-close\"\n [attr.aria-label]=\"'core.common.close' \| translate\"\n (click)=\"onClose($event)\">\n <mat-icon class=\"material-icons\" aria-hidden=\"true\">close</mat-icon>\n </button>\n }\n </div>\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"sdcorejs-angular-components-inform.mjs","sources":["../../../projects/sdcorejs-angular/components/inform/src/inform-action.directive.ts","../../../projects/sdcorejs-angular/components/inform/src/inform.component.ts","../../../projects/sdcorejs-angular/components/inform/src/inform.component.html","../../../projects/sdcorejs-angular/components/inform/sdcorejs-angular-components-inform.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n/*\n Marker cho vùng action custom chiếu vào <sd-inform>.\n * Khi có phần tử mang [sdInformAction], component ẩn link `actionLabel` mặc định.\n /\n@Directive({\n selector: '[sdInformAction]',\n standalone: true,\n})\nexport class SdInformActionDirective {}\n","/ eslint-disable @angular-eslint/no-output-rename /\nimport { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n afterNextRender,\n booleanAttribute,\n computed,\n contentChild,\n effect,\n input,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { Color } from '@sdcorejs/utils/models';\nimport { MaterialIconFontSet } from '@sdcorejs/angular/utilities/models';\nimport { TranslatePipe } from '@sdcorejs/angular/i18n';\nimport { SdInformActionDirective } from './inform-action.directive';\n\n// why: mỗi color có icon trạng thái mặc định khi consumer không truyền [icon].\nconst SD_INFORM_DEFAULT_ICON: Record<Color, string> = {\n primary: 'info',\n secondary: 'info',\n info: 'info',\n success: 'check_circle',\n warning: 'warning',\n error: 'error',\n};\n\n@Component({\n selector: 'sd-inform',\n templateUrl: './inform.component.html',\n styleUrls: ['./inform.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [CommonModule, MatIconModule, TranslatePipe],\n})\nexport class SdInform {\n // 1. INPUTS\n color = input<Color, Color \| undefined \| null>('primary', {\n transform: value => value \|\| 'primary',\n });\n\n primary = input(false, { transform: booleanAttribute });\n secondary = input(false, { transform: booleanAttribute });\n info = input(false, { transform: booleanAttribute });\n success = input(false, { transform: booleanAttribute });\n warning = input(false, { transform: booleanAttribute });\n error = input(false, { transform: booleanAttribute });\n\n title = input<string \| undefined>();\n description = input<string \| undefined>();\n icon = input<string \| undefined>();\n hideIcon = input(false, { transform: booleanAttribute });\n\n fontSet = input<MaterialIconFontSet, MaterialIconFontSet \| undefined \| null>('material-icons', {\n transform: value => value \|\| 'material-icons',\n });\n\n closable = input(false, { transform: booleanAttribute });\n actionLabel = input<string \| undefined>();\n lineClamp = input<number \| undefined>();\n autoId = input<string \| undefined>();\n\n // 2. OUTPUTS\n sdClosed = output<Event>();\n sdAction = output<Event>();\n\n // 3. STATE\n readonly dismissed = signal(false);\n readonly expanded = signal(false);\n readonly overflowing = signal(false);\n\n protected readonly bodyRef = viewChild<ElementRef<HTMLElement>>('body');\n protected readonly actionSlot = contentChild(SdInformActionDirective);\n\n // 4. COMPUTED\n effectiveColor = computed<Color>(() => {\n if (this.primary()) return 'primary';\n if (this.secondary()) return 'secondary';\n if (this.info()) return 'info';\n if (this.success()) return 'success';\n if (this.warning()) return 'warning';\n if (this.error()) return 'error';\n return this.color();\n });\n\n colorClasses = computed(() => {\n const c = this.effectiveColor();\n return {\n 'c-primary': c === 'primary',\n 'c-secondary': c === 'secondary',\n 'c-info': c === 'info',\n 'c-success': c === 'success',\n 'c-warning': c === 'warning',\n 'c-error': c === 'error',\n };\n });\n\n effectiveIcon = computed<string \| null>(() => {\n if (this.hideIcon()) return null;\n return this.icon() \|\| SD_INFORM_DEFAULT_ICON[this.effectiveColor()];\n });\n\n fontSetClasses = computed(() => {\n const f = this.fontSet();\n return {\n 'material-icons': f === 'material-icons',\n 'material-icons-outlined': f === 'material-icons-outlined',\n 'material-icons-round': f === 'material-icons-round',\n 'material-icons-sharp': f === 'material-icons-sharp',\n };\n });\n\n hasActionSlot = computed(() => !!this.actionSlot());\n\n // clamp dòng: null = không clamp (đầy đủ); số = số dòng tối đa.\n clampLines = computed<number \| null>(() => {\n const n = this.lineClamp();\n if (!n \|\| n <= 0) return null;\n return this.expanded() ? null : n;\n });\n\n // toggle hiện khi đang clamp và đã từng tràn, hoặc đang mở rộng (để còn thu gọn lại).\n showToggle = computed(() => {\n if (!this.lineClamp()) return false;\n return this.overflowing() \|\| this.expanded();\n });\n\n // why: error/warning là cảnh báo → assertive 'alert'; các màu còn lại là thông tin → polite 'status'.\n liveRole = computed<'alert' \| 'status'>(() => {\n const c = this.effectiveColor();\n return c === 'error' \|\| c === 'warning' ? 'alert' : 'status';\n });\n\n // 5. OVERFLOW MEASUREMENT\n #measureScheduled = false;\n\n constructor() {\n // đo lần đầu sau render\n afterNextRender(() => this.measureOverflow());\n // why: re-đo khi nội dung/clamp/expanded đổi; đồng thời gắn ResizeObserver để bắt thay đổi kích thước container (responsive).\n effect(onCleanup => {\n this.description();\n this.lineClamp();\n this.expanded();\n const el = this.bodyRef()?.nativeElement;\n this.#scheduleMeasure();\n // why: guard instanceof Element để test stub (plain object) không làm ResizeObserver.observe ném lỗi.\n if (el instanceof Element && typeof ResizeObserver !== 'undefined') {\n const ro = new ResizeObserver(() => this.measureOverflow());\n ro.observe(el);\n onCleanup(() => ro.disconnect());\n }\n });\n }\n\n #scheduleMeasure(): void {\n if (this.#measureScheduled) return;\n this.#measureScheduled = true;\n // gom nhiều thay đổi vào 1 lần đo sau khi DOM cập nhật xong\n queueMicrotask(() => {\n this.#measureScheduled = false;\n this.measureOverflow();\n });\n }\n\n /* Đo tràn dòng của body; chỉ có ý nghĩa khi đang clamp. /\n measureOverflow(): void {\n const el = this.bodyRef()?.nativeElement;\n if (!el \|\| this.expanded() \|\| !this.lineClamp()) return;\n // +1 chống sai số làm tròn sub-pixel\n this.overflowing.set(el.scrollHeight > el.clientHeight + 1);\n }\n\n // 6. HANDLERS\n toggleExpanded(): void {\n this.expanded.update(v => !v);\n }\n\n onClose(event: Event): void {\n event.stopPropagation();\n this.dismissed.set(true);\n this.sdClosed.emit(event);\n }\n\n onAction(event: Event): void {\n event.stopPropagation();\n this.sdAction.emit(event);\n }\n}\n","@if (!dismissed()) {\n @let ic = effectiveIcon();\n <div\n class=\"c-inform\"\n [attr.role]=\"liveRole()\"\n [ngClass]=\"colorClasses()\"\n [attr.data-autoId]=\"autoId() \|\| null\"\n [attr.data-autoid]=\"autoId() \|\| null\">\n\n @if (ic) {\n <mat-icon class=\"c-inform-icon c-material-icon\" aria-hidden=\"true\" [ngClass]=\"fontSetClasses()\">{{ ic }}</mat-icon>\n }\n\n @let al = actionLabel();\n <div class=\"c-inform-content\">\n @if (title(); as t) {\n <div class=\"c-inform-title\">{{ t }}</div>\n }\n @if (description(); as d) {\n <div\n #body\n class=\"c-inform-body\"\n [class.is-clamped]=\"clampLines() !== null\"\n [style.-webkit-line-clamp]=\"clampLines()\">\n {{ d }}\n </div>\n }\n @if (showToggle()) {\n <button type=\"button\" class=\"c-inform-toggle\" (click)=\"toggleExpanded()\">\n {{ (expanded() ? 'core.component.inform.show-less' : 'core.component.inform.show-more') \| translate }}\n </button>\n }\n\n @if (hasActionSlot()) {\n <div class=\"c-inform-action\">\n <ng-content select=\"[sdInformAction]\"></ng-content>\n </div>\n } @else if (al) {\n <button type=\"button\" class=\"c-inform-action c-inform-action-link\" (click)=\"onAction($event)\">\n {{ al }}\n </button>\n }\n </div>\n\n @if (closable()) {\n <button\n type=\"button\"\n class=\"c-inform-close\"\n [attr.aria-label]=\"'core.common.close' \| translate\"\n (click)=\"onClose($event)\">\n <mat-icon class=\"material-icons\" aria-hidden=\"true\">close</mat-icon>\n </button>\n }\n </div>\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;AAEA;;;AAGG;MAKU,uBAAuB,CAAA;wGAAvB,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;4FAAvB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAJnC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,kBAAkB;AAC5B,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;;ACTD;AAsBA;AACA,MAAM,sBAAsB,GAA0B;AACpD,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,SAAS,EAAE,MAAM;AACjB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,KAAK,EAAE,OAAO;CACf;MAUY,QAAQ,CAAA;;AAEnB,IAAA,KAAK,GAAG,KAAK,CAAkC,SAAS,yCACtD,SAAS,EAAE,KAAK,IAAI,KAAK,IAAI,SAAS,EAAA,CAAA,GAAA,CADkB;AACxD,YAAA,SAAS,EAAE,KAAK,IAAI,KAAK,IAAI,SAAS;AACvC,SAAA,CAAA,CAAA,CAAC;AAEF,IAAA,OAAO,GAAG,KAAK,CAAC,KAAK,2CAAI,SAAS,EAAE,gBAAgB,EAAA,CAAA,GAAA,CAA7B,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAC;AACvD,IAAA,SAAS,GAAG,KAAK,CAAC,KAAK,6CAAI,SAAS,EAAE,gBAAgB,EAAA,CAAA,GAAA,CAA7B,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAC;AACzD,IAAA,IAAI,GAAG,KAAK,CAAC,KAAK,wCAAI,SAAS,EAAE,gBAAgB,EAAA,CAAA,GAAA,CAA7B,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAC;AACpD,IAAA,OAAO,GAAG,KAAK,CAAC,KAAK,2CAAI,SAAS,EAAE,gBAAgB,EAAA,CAAA,GAAA,CAA7B,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAC;AACvD,IAAA,OAAO,GAAG,KAAK,CAAC,KAAK,2CAAI,SAAS,EAAE,gBAAgB,EAAA,CAAA,GAAA,CAA7B,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAC;AACvD,IAAA,KAAK,GAAG,KAAK,CAAC,KAAK,yCAAI,SAAS,EAAE,gBAAgB,EAAA,CAAA,GAAA,CAA7B,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAC;IAErD,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAsB;IACnC,WAAW,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAsB;IACzC,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAsB;AAClC,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,4CAAI,SAAS,EAAE,gBAAgB,EAAA,CAAA,GAAA,CAA7B,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAC;AAExD,IAAA,OAAO,GAAG,KAAK,CAA8D,gBAAgB,2CAC3F,SAAS,EAAE,KAAK,IAAI,KAAK,IAAI,gBAAgB,EAAA,CAAA,GAAA,CADgD;AAC7F,YAAA,SAAS,EAAE,KAAK,IAAI,KAAK,IAAI,gBAAgB;AAC9C,SAAA,CAAA,CAAA,CAAC;AAEF,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,4CAAI,SAAS,EAAE,gBAAgB,EAAA,CAAA,GAAA,CAA7B,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAC;IACxD,WAAW,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAsB;IACzC,SAAS,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAsB;IACvC,MAAM,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,QAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAsB;;IAGpC,QAAQ,GAAG,MAAM,EAAS;IAC1B,QAAQ,GAAG,MAAM,EAAS;;AAGjB,IAAA,SAAS,GAAG,MAAM,CAAC,KAAK,qDAAC;AACzB,IAAA,QAAQ,GAAG,MAAM,CAAC,KAAK,oDAAC;AACxB,IAAA,WAAW,GAAG,MAAM,CAAC,KAAK,uDAAC;AAEjB,IAAA,OAAO,GAAG,SAAS,CAA0B,MAAM,mDAAC;AACpD,IAAA,UAAU,GAAG,YAAY,CAAC,uBAAuB,sDAAC;;AAGrE,IAAA,cAAc,GAAG,QAAQ,CAAQ,MAAK;QACpC,IAAI,IAAI,CAAC,OAAO,EAAE;AAAE,YAAA,OAAO,SAAS;QACpC,IAAI,IAAI,CAAC,SAAS,EAAE;AAAE,YAAA,OAAO,WAAW;QACxC,IAAI,IAAI,CAAC,IAAI,EAAE;AAAE,YAAA,OAAO,MAAM;QAC9B,IAAI,IAAI,CAAC,OAAO,EAAE;AAAE,YAAA,OAAO,SAAS;QACpC,IAAI,IAAI,CAAC,OAAO,EAAE;AAAE,YAAA,OAAO,SAAS;QACpC,IAAI,IAAI,CAAC,KAAK,EAAE;AAAE,YAAA,OAAO,OAAO;AAChC,QAAA,OAAO,IAAI,CAAC,KAAK,EAAE;AACrB,IAAA,CAAC,0DAAC;AAEF,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAK;AAC3B,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,cAAc,EAAE;QAC/B,OAAO;YACL,WAAW,EAAE,CAAC,KAAK,SAAS;YAC5B,aAAa,EAAE,CAAC,KAAK,WAAW;YAChC,QAAQ,EAAE,CAAC,KAAK,MAAM;YACtB,WAAW,EAAE,CAAC,KAAK,SAAS;YAC5B,WAAW,EAAE,CAAC,KAAK,SAAS;YAC5B,SAAS,EAAE,CAAC,KAAK,OAAO;SACzB;AACH,IAAA,CAAC,wDAAC;AAEF,IAAA,aAAa,GAAG,QAAQ,CAAgB,MAAK;QAC3C,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,OAAO,IAAI;AAChC,QAAA,OAAO,IAAI,CAAC,IAAI,EAAE,IAAI,sBAAsB,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;AACrE,IAAA,CAAC,yDAAC;AAEF,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAK;AAC7B,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE;QACxB,OAAO;YACL,gBAAgB,EAAE,CAAC,KAAK,gBAAgB;YACxC,yBAAyB,EAAE,CAAC,KAAK,yBAAyB;YAC1D,sBAAsB,EAAE,CAAC,KAAK,sBAAsB;YACpD,sBAAsB,EAAE,CAAC,KAAK,sBAAsB;SACrD;AACH,IAAA,CAAC,0DAAC;AAEF,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,yDAAC;;AAGnD,IAAA,UAAU,GAAG,QAAQ,CAAgB,MAAK;AACxC,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE;AAC1B,QAAA,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;AAAE,YAAA,OAAO,IAAI;AAC7B,QAAA,OAAO,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,GAAG,CAAC;AACnC,IAAA,CAAC,sDAAC;;AAGF,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAK;AACzB,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;AAAE,YAAA,OAAO,KAAK;QACnC,OAAO,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE;AAC9C,IAAA,CAAC,sDAAC;;AAGF,IAAA,QAAQ,GAAG,QAAQ,CAAqB,MAAK;AAC3C,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,cAAc,EAAE;AAC/B,QAAA,OAAO,CAAC,KAAK,OAAO,IAAI,CAAC,KAAK,SAAS,GAAG,OAAO,GAAG,QAAQ;AAC9D,IAAA,CAAC,oDAAC;;IAGF,iBAAiB,GAAG,KAAK;AAEzB,IAAA,WAAA,GAAA;;QAEE,eAAe,CAAC,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;;QAE7C,MAAM,CAAC,SAAS,IAAG;YACjB,IAAI,CAAC,WAAW,EAAE;YAClB,IAAI,CAAC,SAAS,EAAE;YAChB,IAAI,CAAC,QAAQ,EAAE;YACf,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,EAAE,aAAa;YACxC,IAAI,CAAC,gBAAgB,EAAE;;YAEvB,IAAI,EAAE,YAAY,OAAO,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE;AAClE,gBAAA,MAAM,EAAE,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;AAC3D,gBAAA,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC;gBACd,SAAS,CAAC,MAAM,EAAE,CAAC,UAAU,EAAE,CAAC;YAClC;AACF,QAAA,CAAC,CAAC;IACJ;IAEA,gBAAgB,GAAA;QACd,IAAI,IAAI,CAAC,iBAAiB;YAAE;AAC5B,QAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI;;QAE7B,cAAc,CAAC,MAAK;AAClB,YAAA,IAAI,CAAC,iBAAiB,GAAG,KAAK;YAC9B,IAAI,CAAC,eAAe,EAAE;AACxB,QAAA,CAAC,CAAC;IACJ;;IAGA,eAAe,GAAA;QACb,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,EAAE,aAAa;AACxC,QAAA,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YAAE;;AAEjD,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,YAAY,GAAG,EAAE,CAAC,YAAY,GAAG,CAAC,CAAC;IAC7D;;IAGA,cAAc,GAAA;AACZ,QAAA,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IAC/B;AAEA,IAAA,OAAO,CAAC,KAAY,EAAA;QAClB,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;AACxB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;IAC3B;AAEA,IAAA,QAAQ,CAAC,KAAY,EAAA;QACnB,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;IAC3B;wGAxJW,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAR,QAAQ,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,YAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAqC0B,uBAAuB,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,MAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC7EtE,gtDAuDA,2zNDjBY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAE,aAAa,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAEzC,QAAQ,EAAA,UAAA,EAAA,CAAA;kBARpB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAAA,eAAA,EAGJ,uBAAuB,CAAC,MAAM,EAAA,UAAA,EACnC,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,aAAa,EAAE,aAAa,CAAC,EAAA,QAAA,EAAA,gtDAAA,EAAA,MAAA,EAAA,CAAA,owNAAA,CAAA,EAAA;AAsCW,SAAA,CAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,SAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,SAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,SAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,aAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,SAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,aAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,QAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,UAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,UAAA,CAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CAAA,MAAM,2FACzB,uBAAuB,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AE7EtE;;AAEG;;;;"}

package/fesm2022/sdcorejs-angular-components-mini-editor.mjs CHANGED Viewed

@@ -287,8 +287,8 @@ class SdMiniEditor {
     /** ControlValueAccessor callbacks */
     #onChange = () => { };
     #onTouched = () => { };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdMiniEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: SdMiniEditor, isStandalone: true, selector: "sd-mini-editor", inputs: { option: "option", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange", contentChange: "contentChange", blur: "blur", focus: "focus" }, host: { properties: { "style.--sd-mini-editor-max-height": "this.maxEditorHeight" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdMiniEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.23", type: SdMiniEditor, isStandalone: true, selector: "sd-mini-editor", inputs: { option: "option", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange", contentChange: "contentChange", blur: "blur", focus: "focus" }, host: { properties: { "style.--sd-mini-editor-max-height": "this.maxEditorHeight" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SdMiniEditor),
@@ -296,7 +296,7 @@ class SdMiniEditor {
             },
         ], ngImport: i0, template: "<sd-ckeditor-styles />\n<ckeditor class=\"sd-mini-editor\" [editor]=\"Editor\" [config]=\"editorConfig\" [disabled]=\"disabled\" (ready)=\"onReady($event)\"> </ckeditor>\n", styles: [".sd-mini-editor{display:block}::ng-deep .ck-powered-by-balloon{display:none!important}::ng-deep .ck-mentions .ck-button.ck-on{background:var(--sd-primary)!important;color:#fff!important}::ng-deep .ck-mentions .ck-button.ck-on *{color:#fff!important}:host ::ng-deep .ck-editor{--ck-content-font-size: 14px;--ck-content-line-height: 1.5}:host ::ng-deep .ck-editor__editable_inline{border:var(--ck-focus-ring);border-top-left-radius:0!important;border-top-right-radius:0!important;max-height:var(--sd-mini-editor-max-height);overflow:auto}:host ::ng-deep .ck-toolbar{border-radius:0;border:0!important}:host ::ng-deep .ck-content img{max-width:100%!important;height:auto!important;object-fit:contain}:host ::ng-deep .ck-content p{margin-bottom:var(--ck-spacing-large);text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important}:host ::ng-deep .ck-custom-mention{font-weight:600;padding:0 2px;display:inline-block;pointer-events:none;-webkit-user-select:none;user-select:none;color:#2962ff}:host ::ng-deep .ck-custom-mention:before{content:attr(data-marker)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i1.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableWatchdog", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }, { kind: "component", type: SdCKEditorStyles, selector: "sd-ckeditor-styles" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdMiniEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdMiniEditor, decorators: [{
             type: Component,
             args: [{ selector: 'sd-mini-editor', standalone: true, imports: [CommonModule, CKEditorModule, SdCKEditorStyles], providers: [
                         {

package/fesm2022/sdcorejs-angular-components-mini-editor.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sdcorejs-angular-components-mini-editor.mjs","sources":["../../../projects/sdcorejs-angular/components/mini-editor/src/mini-editor.component.ts","../../../projects/sdcorejs-angular/components/mini-editor/src/mini-editor.component.html","../../../projects/sdcorejs-angular/components/mini-editor/sdcorejs-angular-components-mini-editor.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, EventEmitter, HostBinding, Input, Output, forwardRef } from '@angular/core';\nimport { CKEditorModule } from '@ckeditor/ckeditor5-angular';\nimport { SdCKEditorStyles } from '@sdcorejs/angular/components/ckeditor-styles';\nimport {\n Bold,\n ClassicEditor,\n Essentials,\n Italic,\n Link,\n List,\n FontColor,\n Markdown,\n Mention,\n Paragraph,\n Underline,\n Undo,\n Widget,\n} from 'ckeditor5';\nimport { Subject, Subscription } from 'rxjs';\nimport { throttleTime } from 'rxjs/operators';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { SdMiniEditorOption, SdMiniEditorConfig, SdMiniEditorMentionItem } from './mini-editor.model';\n\n/*\n Component sd-mini-editor - Editor đơn giản cho comment input\n * Sử dụng CKEditor với chế độ đơn giản (bold, italic, link)\n * Hỗ trợ mention và output format (html/markdown)\n \n @example\n * ```html\n * <sd-mini-editor\n * [option]=\"editorOption\"\n * [(ngModel)]=\"content\"\n * (contentChange)=\"onContentChange($event)\"\n * >\n * </sd-mini-editor>\n * ```\n /\n@Component({\n selector: 'sd-mini-editor',\n standalone: true,\n imports: [CommonModule, CKEditorModule, SdCKEditorStyles],\n templateUrl: './mini-editor.component.html',\n styleUrls: ['./mini-editor.component.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SdMiniEditor),\n multi: true,\n },\n ],\n})\nexport class SdMiniEditor implements ControlValueAccessor {\n /* Cấu hình option cho editor /\n @Input({ required: true }) option!: SdMiniEditorOption;\n\n @HostBinding('style.--sd-mini-editor-max-height')\n get maxEditorHeight(): string \| undefined {\n return this.option?.maxHeight;\n }\n\n /* NgModel binding - nội dung HTML/Markdown /\n @Input() value = '';\n @Output() valueChange = new EventEmitter<string>();\n\n /* Event emitter khi content thay đổi /\n @Output() contentChange = new EventEmitter<string>();\n\n /* Event emitter khi blur /\n @Output() blur = new EventEmitter<FocusEvent>();\n\n /* Event emitter khi focus /\n @Output() focus = new EventEmitter<FocusEvent>();\n\n /* Disabled state /\n @Input() disabled = false;\n\n Editor = ClassicEditor;\n #editor!: ClassicEditor;\n #subscription = new Subscription();\n #contentChangeSubject = new Subject<string>();\n\n // Build editor config dynamically\n get editorConfig(): SdMiniEditorConfig {\n const enableMention = this.option?.enableMention ?? false;\n const useMarkdown = this.option?.outputFormat === 'markdown';\n const plugins: any[] = [Essentials, FontColor, Paragraph, Bold, Italic, Underline, Link, List, Undo, Widget];\n\n // Add Markdown plugin if outputFormat is markdown\n if (useMarkdown) {\n plugins.push(Markdown);\n }\n\n // Add Mention plugin if enabled\n if (enableMention) {\n plugins.push(Mention);\n }\n\n // Build base config\n const config: SdMiniEditorConfig = {\n licenseKey: 'GPL',\n getOption: () => this.option,\n plugins,\n toolbar: {\n items: ['bold', 'italic', 'underline', '\|', 'fontColor', '\|', 'bulletedList', 'numberedList', '\|', 'link'],\n shouldNotGroupWhenFull: true,\n },\n placeholder: this.option?.placeholder,\n link: {\n addTargetToExternalLinks: true,\n defaultProtocol: 'https://',\n },\n fontColor: {\n columns: 5,\n documentColors: 10,\n colorPicker: { format: 'hex' },\n },\n };\n\n // Add mention configuration if enabled\n if (enableMention && this.option?.mentionConfig?.feeds) {\n config.mention = {\n feeds: this.option.mentionConfig.feeds,\n };\n }\n\n return config;\n }\n\n constructor() {\n // Setup debounce cho content change\n this.#subscription.add(\n this.#contentChangeSubject.pipe(throttleTime(500, undefined, { leading: true, trailing: true })).subscribe(content => {\n const output = this.#convertOutput(content);\n this.value = output;\n this.#onChange(output);\n this.valueChange.emit(output);\n this.contentChange.emit(output);\n this.option?.onChange?.(output);\n })\n );\n }\n\n ngOnDestroy() {\n this.#subscription.unsubscribe();\n this.#editor?.destroy?.();\n }\n\n /\n Kiểm tra có nên enable mention plugin không\n /\n #shouldEnableMention(): boolean {\n return this.option?.enableMention ?? false;\n }\n\n /\n Xử lý khi editor ready\n /\n onReady(editor: ClassicEditor) {\n this.#editor = editor;\n\n // Set initial content\n if (this.value) {\n this.setContent(this.value);\n }\n\n // Lắng nghe sự kiện thay đổi nội dung\n editor.model.document.on('change:data', () => {\n const content = editor.getData();\n this.#contentChangeSubject.next(content);\n });\n\n // Lắng nghe focus/blur events\n editor.editing.view.document.on('focus', evt => {\n const domEvent = (evt as any).domEvent as FocusEvent;\n this.focus.emit(domEvent);\n this.option?.onFocus?.(domEvent);\n });\n\n editor.editing.view.document.on('blur', evt => {\n const domEvent = (evt as any).domEvent as FocusEvent;\n this.blur.emit(domEvent);\n this.option?.onBlur?.(domEvent);\n });\n\n // Lắng nghe sự kiện mention được chọn\n if (this.#shouldEnableMention()) {\n editor.commands.get('mention')?.on('execute', (_evt, data: any) => {\n const mentionData = data[0];\n this.option?.onMentionSelect?.(mentionData.mention);\n // Trigger content change sau khi insert mention\n const content = editor.getData();\n this.#contentChangeSubject.next(content);\n });\n\n // Custom downcast converter để thay đổi cấu trúc mention HTML\n editor.conversion.for('downcast').attributeToElement({\n model: 'mention',\n view: (mentionData, { writer }) => {\n const data = mentionData as SdMiniEditorMentionItem;\n const rawId = data?.id \|\| '';\n const marker = rawId[0];\n const cleanId = rawId.slice(1);\n\n return writer.createAttributeElement('span', {\n class: 'ck-custom-mention',\n 'data-id': cleanId,\n 'data-marker': marker,\n contenteditable: 'false',\n });\n },\n converterPriority: 'highest',\n });\n\n // Xử lý keyboard để xóa mention 1 lần\n editor.editing.view.document.on('keydown', (evt, data) => {\n const keyEvent = data as { keyCode: number; domEvent: KeyboardEvent };\n // Delete (46) hoặc Backspace (8)\n if (keyEvent.keyCode === 46 \|\| keyEvent.keyCode === 8) {\n const model = editor.model;\n const selection = model.document.selection;\n const position = selection.getFirstPosition();\n if (!position) return;\n\n // Tìm text node có mention attribute\n const node = position.textNode \|\| position.nodeBefore \|\| position.nodeAfter;\n if (node && node.is('$text')) {\n const mentionAttr = node.getAttribute('mention');\n if (mentionAttr) {\n // Xóa toàn bộ text node chứa mention\n model.change(writer => {\n writer.remove(node);\n });\n evt.stop();\n }\n }\n }\n });\n }\n }\n\n /\n Convert output theo format (html hoặc markdown)\n * Khi sử dụng CKEditor Markdown plugin, getData() tự động trả về Markdown\n /\n #convertOutput(content: string): string {\n // CKEditor Markdown plugin tự động xử lý conversion\n // Không cần manual conversion nữa\n return content;\n }\n\n /\n Set nội dung cho editor\n /\n setContent(content: string) {\n this.#editor?.setData?.(content);\n }\n\n /\n Get nội dung từ editor\n /\n getContent(): string {\n if (this.#editor) {\n const html = this.#editor.getData();\n return this.#convertOutput(html);\n }\n return '';\n }\n\n /\n Get nội dung HTML gốc (không convert)\n /\n getHtmlContent(): string {\n return this.#editor?.getData?.() \|\| '';\n }\n\n /\n Focus vào editor\n /\n focusEditor() {\n this.#editor?.editing?.view?.focus?.();\n }\n\n /\n Insert mention vào vị trí con trỏ hiện tại\n /\n insertMention(item: { id: string; name: string; marker?: string }) {\n if (!this.#editor) return;\n\n const firstFeed = this.option?.mentionConfig?.feeds?.[0];\n const marker = item.marker \|\| (firstFeed as any)?.marker \|\| '@';\n\n // Sử dụng CKEditor mention command\n this.#editor.execute('mention', {\n marker,\n mention: {\n id: item.id,\n text: `${marker}${item.name}`,\n },\n });\n }\n\n /\n Get danh sách mentions trong nội dung\n /\n getMentions(): Array<{ id: string; name: string; marker: string }> {\n if (!this.#editor) return [];\n\n const mentions: Array<{ id: string; name: string; marker: string }> = [];\n const root = this.#editor.model.document.getRoot();\n if (!root) return mentions;\n\n const range = this.#editor.model.createRangeIn(root);\n\n for (const item of range.getItems()) {\n if (item.is('$text')) {\n const mentionAttr = item.getAttribute('mention');\n if (mentionAttr) {\n const text = (item as any).data as string;\n const marker = text.charAt(0);\n const name = text.substring(1);\n const id = item.getAttribute('data-user-id') as string;\n\n mentions.push({ id, name, marker });\n }\n }\n }\n\n return mentions;\n }\n\n /\n ControlValueAccessor: Write value\n /\n writeValue(value: string): void {\n this.value = value \|\| '';\n if (this.#editor) {\n this.setContent(this.value);\n }\n }\n\n /\n ControlValueAccessor: Register change callback\n /\n registerOnChange(fn: (value: string) => void): void {\n this.#onChange = fn;\n }\n\n /\n ControlValueAccessor: Register touched callback\n /\n registerOnTouched(fn: () => void): void {\n this.#onTouched = fn;\n }\n\n /* ControlValueAccessor callbacks /\n #onChange: (value: string) => void = () => {};\n #onTouched: () => void = () => {};\n}\n","<sd-ckeditor-styles />\n<ckeditor class=\"sd-mini-editor\" [editor]=\"Editor\" [config]=\"editorConfig\" [disabled]=\"disabled\" (ready)=\"onReady($event)\"> </ckeditor>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"sdcorejs-angular-components-mini-editor.mjs","sources":["../../../projects/sdcorejs-angular/components/mini-editor/src/mini-editor.component.ts","../../../projects/sdcorejs-angular/components/mini-editor/src/mini-editor.component.html","../../../projects/sdcorejs-angular/components/mini-editor/sdcorejs-angular-components-mini-editor.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, EventEmitter, HostBinding, Input, Output, forwardRef } from '@angular/core';\nimport { CKEditorModule } from '@ckeditor/ckeditor5-angular';\nimport { SdCKEditorStyles } from '@sdcorejs/angular/components/ckeditor-styles';\nimport {\n Bold,\n ClassicEditor,\n Essentials,\n Italic,\n Link,\n List,\n FontColor,\n Markdown,\n Mention,\n Paragraph,\n Underline,\n Undo,\n Widget,\n} from 'ckeditor5';\nimport { Subject, Subscription } from 'rxjs';\nimport { throttleTime } from 'rxjs/operators';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { SdMiniEditorOption, SdMiniEditorConfig, SdMiniEditorMentionItem } from './mini-editor.model';\n\n/*\n Component sd-mini-editor - Editor đơn giản cho comment input\n * Sử dụng CKEditor với chế độ đơn giản (bold, italic, link)\n * Hỗ trợ mention và output format (html/markdown)\n \n @example\n * ```html\n * <sd-mini-editor\n * [option]=\"editorOption\"\n * [(ngModel)]=\"content\"\n * (contentChange)=\"onContentChange($event)\"\n * >\n * </sd-mini-editor>\n * ```\n /\n@Component({\n selector: 'sd-mini-editor',\n standalone: true,\n imports: [CommonModule, CKEditorModule, SdCKEditorStyles],\n templateUrl: './mini-editor.component.html',\n styleUrls: ['./mini-editor.component.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SdMiniEditor),\n multi: true,\n },\n ],\n})\nexport class SdMiniEditor implements ControlValueAccessor {\n /* Cấu hình option cho editor /\n @Input({ required: true }) option!: SdMiniEditorOption;\n\n @HostBinding('style.--sd-mini-editor-max-height')\n get maxEditorHeight(): string \| undefined {\n return this.option?.maxHeight;\n }\n\n /* NgModel binding - nội dung HTML/Markdown /\n @Input() value = '';\n @Output() valueChange = new EventEmitter<string>();\n\n /* Event emitter khi content thay đổi /\n @Output() contentChange = new EventEmitter<string>();\n\n /* Event emitter khi blur /\n @Output() blur = new EventEmitter<FocusEvent>();\n\n /* Event emitter khi focus /\n @Output() focus = new EventEmitter<FocusEvent>();\n\n /* Disabled state /\n @Input() disabled = false;\n\n Editor = ClassicEditor;\n #editor!: ClassicEditor;\n #subscription = new Subscription();\n #contentChangeSubject = new Subject<string>();\n\n // Build editor config dynamically\n get editorConfig(): SdMiniEditorConfig {\n const enableMention = this.option?.enableMention ?? false;\n const useMarkdown = this.option?.outputFormat === 'markdown';\n const plugins: any[] = [Essentials, FontColor, Paragraph, Bold, Italic, Underline, Link, List, Undo, Widget];\n\n // Add Markdown plugin if outputFormat is markdown\n if (useMarkdown) {\n plugins.push(Markdown);\n }\n\n // Add Mention plugin if enabled\n if (enableMention) {\n plugins.push(Mention);\n }\n\n // Build base config\n const config: SdMiniEditorConfig = {\n licenseKey: 'GPL',\n getOption: () => this.option,\n plugins,\n toolbar: {\n items: ['bold', 'italic', 'underline', '\|', 'fontColor', '\|', 'bulletedList', 'numberedList', '\|', 'link'],\n shouldNotGroupWhenFull: true,\n },\n placeholder: this.option?.placeholder,\n link: {\n addTargetToExternalLinks: true,\n defaultProtocol: 'https://',\n },\n fontColor: {\n columns: 5,\n documentColors: 10,\n colorPicker: { format: 'hex' },\n },\n };\n\n // Add mention configuration if enabled\n if (enableMention && this.option?.mentionConfig?.feeds) {\n config.mention = {\n feeds: this.option.mentionConfig.feeds,\n };\n }\n\n return config;\n }\n\n constructor() {\n // Setup debounce cho content change\n this.#subscription.add(\n this.#contentChangeSubject.pipe(throttleTime(500, undefined, { leading: true, trailing: true })).subscribe(content => {\n const output = this.#convertOutput(content);\n this.value = output;\n this.#onChange(output);\n this.valueChange.emit(output);\n this.contentChange.emit(output);\n this.option?.onChange?.(output);\n })\n );\n }\n\n ngOnDestroy() {\n this.#subscription.unsubscribe();\n this.#editor?.destroy?.();\n }\n\n /\n Kiểm tra có nên enable mention plugin không\n /\n #shouldEnableMention(): boolean {\n return this.option?.enableMention ?? false;\n }\n\n /\n Xử lý khi editor ready\n /\n onReady(editor: ClassicEditor) {\n this.#editor = editor;\n\n // Set initial content\n if (this.value) {\n this.setContent(this.value);\n }\n\n // Lắng nghe sự kiện thay đổi nội dung\n editor.model.document.on('change:data', () => {\n const content = editor.getData();\n this.#contentChangeSubject.next(content);\n });\n\n // Lắng nghe focus/blur events\n editor.editing.view.document.on('focus', evt => {\n const domEvent = (evt as any).domEvent as FocusEvent;\n this.focus.emit(domEvent);\n this.option?.onFocus?.(domEvent);\n });\n\n editor.editing.view.document.on('blur', evt => {\n const domEvent = (evt as any).domEvent as FocusEvent;\n this.blur.emit(domEvent);\n this.option?.onBlur?.(domEvent);\n });\n\n // Lắng nghe sự kiện mention được chọn\n if (this.#shouldEnableMention()) {\n editor.commands.get('mention')?.on('execute', (_evt, data: any) => {\n const mentionData = data[0];\n this.option?.onMentionSelect?.(mentionData.mention);\n // Trigger content change sau khi insert mention\n const content = editor.getData();\n this.#contentChangeSubject.next(content);\n });\n\n // Custom downcast converter để thay đổi cấu trúc mention HTML\n editor.conversion.for('downcast').attributeToElement({\n model: 'mention',\n view: (mentionData, { writer }) => {\n const data = mentionData as SdMiniEditorMentionItem;\n const rawId = data?.id \|\| '';\n const marker = rawId[0];\n const cleanId = rawId.slice(1);\n\n return writer.createAttributeElement('span', {\n class: 'ck-custom-mention',\n 'data-id': cleanId,\n 'data-marker': marker,\n contenteditable: 'false',\n });\n },\n converterPriority: 'highest',\n });\n\n // Xử lý keyboard để xóa mention 1 lần\n editor.editing.view.document.on('keydown', (evt, data) => {\n const keyEvent = data as { keyCode: number; domEvent: KeyboardEvent };\n // Delete (46) hoặc Backspace (8)\n if (keyEvent.keyCode === 46 \|\| keyEvent.keyCode === 8) {\n const model = editor.model;\n const selection = model.document.selection;\n const position = selection.getFirstPosition();\n if (!position) return;\n\n // Tìm text node có mention attribute\n const node = position.textNode \|\| position.nodeBefore \|\| position.nodeAfter;\n if (node && node.is('$text')) {\n const mentionAttr = node.getAttribute('mention');\n if (mentionAttr) {\n // Xóa toàn bộ text node chứa mention\n model.change(writer => {\n writer.remove(node);\n });\n evt.stop();\n }\n }\n }\n });\n }\n }\n\n /\n Convert output theo format (html hoặc markdown)\n * Khi sử dụng CKEditor Markdown plugin, getData() tự động trả về Markdown\n /\n #convertOutput(content: string): string {\n // CKEditor Markdown plugin tự động xử lý conversion\n // Không cần manual conversion nữa\n return content;\n }\n\n /\n Set nội dung cho editor\n /\n setContent(content: string) {\n this.#editor?.setData?.(content);\n }\n\n /\n Get nội dung từ editor\n /\n getContent(): string {\n if (this.#editor) {\n const html = this.#editor.getData();\n return this.#convertOutput(html);\n }\n return '';\n }\n\n /\n Get nội dung HTML gốc (không convert)\n /\n getHtmlContent(): string {\n return this.#editor?.getData?.() \|\| '';\n }\n\n /\n Focus vào editor\n /\n focusEditor() {\n this.#editor?.editing?.view?.focus?.();\n }\n\n /\n Insert mention vào vị trí con trỏ hiện tại\n /\n insertMention(item: { id: string; name: string; marker?: string }) {\n if (!this.#editor) return;\n\n const firstFeed = this.option?.mentionConfig?.feeds?.[0];\n const marker = item.marker \|\| (firstFeed as any)?.marker \|\| '@';\n\n // Sử dụng CKEditor mention command\n this.#editor.execute('mention', {\n marker,\n mention: {\n id: item.id,\n text: `${marker}${item.name}`,\n },\n });\n }\n\n /\n Get danh sách mentions trong nội dung\n /\n getMentions(): Array<{ id: string; name: string; marker: string }> {\n if (!this.#editor) return [];\n\n const mentions: Array<{ id: string; name: string; marker: string }> = [];\n const root = this.#editor.model.document.getRoot();\n if (!root) return mentions;\n\n const range = this.#editor.model.createRangeIn(root);\n\n for (const item of range.getItems()) {\n if (item.is('$text')) {\n const mentionAttr = item.getAttribute('mention');\n if (mentionAttr) {\n const text = (item as any).data as string;\n const marker = text.charAt(0);\n const name = text.substring(1);\n const id = item.getAttribute('data-user-id') as string;\n\n mentions.push({ id, name, marker });\n }\n }\n }\n\n return mentions;\n }\n\n /\n ControlValueAccessor: Write value\n /\n writeValue(value: string): void {\n this.value = value \|\| '';\n if (this.#editor) {\n this.setContent(this.value);\n }\n }\n\n /\n ControlValueAccessor: Register change callback\n /\n registerOnChange(fn: (value: string) => void): void {\n this.#onChange = fn;\n }\n\n /\n ControlValueAccessor: Register touched callback\n /\n registerOnTouched(fn: () => void): void {\n this.#onTouched = fn;\n }\n\n /* ControlValueAccessor callbacks /\n #onChange: (value: string) => void = () => {};\n #onTouched: () => void = () => {};\n}\n","<sd-ckeditor-styles />\n<ckeditor class=\"sd-mini-editor\" [editor]=\"Editor\" [config]=\"editorConfig\" [disabled]=\"disabled\" (ready)=\"onReady($event)\"> </ckeditor>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sdcorejs-angular-components-modal.mjs CHANGED Viewed

@@ -11,27 +11,27 @@ import { MatIconModule } from '@angular/material/icon';
 import { BrowserUtilities } from '@sdcorejs/utils/fns';
 class SdModal {
-    static index = signal(0);
+    static index = signal(0, ...(ngDevMode ? [{ debugName: "index" }] : []));
     templateRef = viewChild.required('templateRef');
-    modal = viewChild('modal');
+    modal = viewChild('modal', ...(ngDevMode ? [{ debugName: "modal" }] : []));
     // autoId prefix `modal-`. Lưu ý: footer/body buttons render qua <ng-content> nên consumer phải
     // tự đặt [attr.data-autoId] cho các nút đó. Component chỉ tự bind autoId cho NÚT ĐÓNG (X icon).
-    autoIdInput = input(undefined, { alias: 'autoId' });
-    autoId = computed(() => (this.autoIdInput() ? `components-modal-${this.autoIdInput()}` : undefined));
-    closeButtonAutoId = computed(() => (this.autoId() ? `${this.autoId()}-close` : undefined));
-    dataOpened = computed(() => (this.isOpened() ? 'true' : 'false'));
-    title = input('', { transform: (v) => v ?? '' });
-    color = input('primary', { transform: (v) => v ?? 'primary' });
-    width = input('md', { transform: (v) => v ?? 'md' });
-    height = input('auto', { transform: (v) => v ?? 'auto' });
-    view = input(undefined, { transform: (v) => v ?? undefined });
-    modalClass = input('', { transform: (v) => v ?? '' });
-    lazyLoadContent = input(true, { transform: booleanAttribute });
-    hideClose = input(false, { transform: booleanAttribute });
-    disableBackdropClose = input(true, { transform: booleanAttribute }); // default to true to keep backward compatibility
+    autoIdInput = input(undefined, ...(ngDevMode ? [{ debugName: "autoIdInput", alias: 'autoId' }] : [{ alias: 'autoId' }]));
+    autoId = computed(() => (this.autoIdInput() ? `components-modal-${this.autoIdInput()}` : undefined), ...(ngDevMode ? [{ debugName: "autoId" }] : []));
+    closeButtonAutoId = computed(() => (this.autoId() ? `${this.autoId()}-close` : undefined), ...(ngDevMode ? [{ debugName: "closeButtonAutoId" }] : []));
+    dataOpened = computed(() => (this.isOpened() ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "dataOpened" }] : []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title", transform: (v) => v ?? '' }] : [{ transform: (v) => v ?? '' }]));
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color", transform: (v) => v ?? 'primary' }] : [{ transform: (v) => v ?? 'primary' }]));
+    width = input('md', ...(ngDevMode ? [{ debugName: "width", transform: (v) => v ?? 'md' }] : [{ transform: (v) => v ?? 'md' }]));
+    height = input('auto', ...(ngDevMode ? [{ debugName: "height", transform: (v) => v ?? 'auto' }] : [{ transform: (v) => v ?? 'auto' }]));
+    view = input(undefined, ...(ngDevMode ? [{ debugName: "view", transform: (v) => v ?? undefined }] : [{ transform: (v) => v ?? undefined }]));
+    modalClass = input('', ...(ngDevMode ? [{ debugName: "modalClass", transform: (v) => v ?? '' }] : [{ transform: (v) => v ?? '' }]));
+    lazyLoadContent = input(true, ...(ngDevMode ? [{ debugName: "lazyLoadContent", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    hideClose = input(false, ...(ngDevMode ? [{ debugName: "hideClose", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    disableBackdropClose = input(true, ...(ngDevMode ? [{ debugName: "disableBackdropClose", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // default to true to keep backward compatibility
     sdClosed = output();
-    isOpened = signal(false);
-    alreadyOpened = signal(false);
+    isOpened = signal(false, ...(ngDevMode ? [{ debugName: "isOpened" }] : []));
+    alreadyOpened = signal(false, ...(ngDevMode ? [{ debugName: "alreadyOpened" }] : []));
     #isMobile = false;
     #resolvedWidth = 'md';
     #bottomSheetRef;
@@ -92,13 +92,13 @@ class SdModal {
         this.#bottomSheetRef?.dismiss();
         this.#dialogRef?.close();
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdModal, isStandalone: true, selector: "sd-modal", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, modalClass: { classPropertyName: "modalClass", publicName: "modalClass", isSignal: true, isRequired: false, transformFunction: null }, lazyLoadContent: { classPropertyName: "lazyLoadContent", publicName: "lazyLoadContent", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef>\n  <div class=\"sd-modal-root\"\n       [attr.data-autoId]=\"autoId()\"\n       [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      <!-- Header -->\n      <!-- D\u00F9ng scss thu\u1EA7n -->\n      @if (title()) {\n        <div class=\"d-flex align-items-center p-16\">\n          <ng-content select=\"[sdHeaderLeft]\">\n            <div class=\"T18M\">{{ title() }}</div>\n          </ng-content>\n          <div class=\"d-flex align-items-center ml-auto\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            <ng-content select=\"[sdHeader]\"></ng-content>\n            @if (!hideClose()) {\n              <mat-icon class=\"text-secondary cursor-pointer\" fontIcon=\"close\" (click)=\"close()\" [attr.data-autoId]=\"closeButtonAutoId()\"></mat-icon>\n            }\n          </div>\n        </div>\n      }\n      <!-- <mat-divider></mat-divider> -->\n      <!-- Body -->\n      <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\n        <ng-content></ng-content>\n      </div>\n      <!-- Footer -->\n      <!-- <mat-divider></mat-divider> -->\n      <div class=\"d-flex align-items-center p-8\" #footer>\n        <ng-content select=\"[sdFooterLeft]\"></ng-content>\n        <div class=\"ml-auto\">\n          <ng-content select=\"[sdFooterRight]\"></ng-content>\n          <ng-content select=\"[sdFooter]\"></ng-content>\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["button:focus{outline:none!important}.mat-dialog-container{padding:0!important}.mat-dialog-container .mat-dialog-content{max-height:80vh}.mat-dialog-container .mat-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.mat-bottom-sheet-container{max-height:\"inherit\"}sd-modal-header{padding:12px 24px;display:block;width:100%}@media(max-width:640px){sd-modal-header{padding:12px}}.cdk-global-overlay-wrapper .mat-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:80vh;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}\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: MatBottomSheetModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: SdModal, isStandalone: true, selector: "sd-modal", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, modalClass: { classPropertyName: "modalClass", publicName: "modalClass", isSignal: true, isRequired: false, transformFunction: null }, lazyLoadContent: { classPropertyName: "lazyLoadContent", publicName: "lazyLoadContent", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef>\n  <div class=\"sd-modal-root\"\n       [attr.data-autoId]=\"autoId()\"\n       [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      <!-- Header -->\n      <!-- D\u00F9ng scss thu\u1EA7n -->\n      @if (title()) {\n        <div class=\"d-flex align-items-center p-16\">\n          <ng-content select=\"[sdHeaderLeft]\">\n            <div class=\"T18M\">{{ title() }}</div>\n          </ng-content>\n          <div class=\"d-flex align-items-center ml-auto\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            <ng-content select=\"[sdHeader]\"></ng-content>\n            @if (!hideClose()) {\n              <mat-icon class=\"text-secondary cursor-pointer\" fontIcon=\"close\" (click)=\"close()\" [attr.data-autoId]=\"closeButtonAutoId()\"></mat-icon>\n            }\n          </div>\n        </div>\n      }\n      <!-- <mat-divider></mat-divider> -->\n      <!-- Body -->\n      <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\n        <ng-content></ng-content>\n      </div>\n      <!-- Footer -->\n      <!-- <mat-divider></mat-divider> -->\n      <div class=\"d-flex align-items-center p-8\" #footer>\n        <ng-content select=\"[sdFooterLeft]\"></ng-content>\n        <div class=\"ml-auto\">\n          <ng-content select=\"[sdFooterRight]\"></ng-content>\n          <ng-content select=\"[sdFooter]\"></ng-content>\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["button:focus{outline:none!important}.mat-dialog-container{padding:0!important}.mat-dialog-container .mat-dialog-content{max-height:80vh}.mat-dialog-container .mat-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.mat-bottom-sheet-container{max-height:\"inherit\"}sd-modal-header{padding:12px 24px;display:block;width:100%}@media(max-width:640px){sd-modal-header{padding:12px}}.cdk-global-overlay-wrapper .mat-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:80vh;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}\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: MatBottomSheetModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdModal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdModal, decorators: [{
             type: Component,
             args: [{ selector: 'sd-modal', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, MatBottomSheetModule, MatDialogModule, MatDividerModule, MatButtonModule], template: "<ng-template #templateRef>\n  <div class=\"sd-modal-root\"\n       [attr.data-autoId]=\"autoId()\"\n       [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      <!-- Header -->\n      <!-- D\u00F9ng scss thu\u1EA7n -->\n      @if (title()) {\n        <div class=\"d-flex align-items-center p-16\">\n          <ng-content select=\"[sdHeaderLeft]\">\n            <div class=\"T18M\">{{ title() }}</div>\n          </ng-content>\n          <div class=\"d-flex align-items-center ml-auto\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            <ng-content select=\"[sdHeader]\"></ng-content>\n            @if (!hideClose()) {\n              <mat-icon class=\"text-secondary cursor-pointer\" fontIcon=\"close\" (click)=\"close()\" [attr.data-autoId]=\"closeButtonAutoId()\"></mat-icon>\n            }\n          </div>\n        </div>\n      }\n      <!-- <mat-divider></mat-divider> -->\n      <!-- Body -->\n      <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\n        <ng-content></ng-content>\n      </div>\n      <!-- Footer -->\n      <!-- <mat-divider></mat-divider> -->\n      <div class=\"d-flex align-items-center p-8\" #footer>\n        <ng-content select=\"[sdFooterLeft]\"></ng-content>\n        <div class=\"ml-auto\">\n          <ng-content select=\"[sdFooterRight]\"></ng-content>\n          <ng-content select=\"[sdFooter]\"></ng-content>\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["button:focus{outline:none!important}.mat-dialog-container{padding:0!important}.mat-dialog-container .mat-dialog-content{max-height:80vh}.mat-dialog-container .mat-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.mat-bottom-sheet-container{max-height:\"inherit\"}sd-modal-header{padding:12px 24px;display:block;width:100%}@media(max-width:640px){sd-modal-header{padding:12px}}.cdk-global-overlay-wrapper .mat-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:80vh;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], modal: [{ type: i0.ViewChild, args: ['modal', { isSignal: true }] }], autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], modalClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalClass", required: false }] }], lazyLoadContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyLoadContent", required: false }] }], hideClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideClose", required: false }] }], disableBackdropClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableBackdropClose", required: false }] }], sdClosed: [{ type: i0.Output, args: ["sdClosed"] }] } });
 /**
  * Generated bundle index. Do not edit.