@sdcorejs/angular 19.1.5 → 19.2.0

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

@@ -2,7 +2,7 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Directive, input, booleanAttribute, output, signal, viewChild, contentChild, computed, afterNextRender, effect, ChangeDetectionStrategy, Component } from '@angular/core';
-import { TranslatePipe } from '@sdcorejs/angular/i18n';
+import { SdTranslatePipe } from '@sdcorejs/angular/i18n';
 import { SdIcon } from '@sdcorejs/angular/modules/icon';
 
 /**
@@ -164,11 +164,11 @@ class SdInform {
         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 _effectiveIcon = effectiveIcon();\n  @let _fontSet = fontSet();\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 (_effectiveIcon) {\n      <sd-icon class=\"c-inform-icon c-material-icon\" aria-hidden=\"true\" [fontSet]=\"_fontSet\" [name]=\"_effectiveIcon\"></sd-icon>\n    }\n\n    @let _actionLabel = 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 (_actionLabel) {\n        <button type=\"button\" class=\"c-inform-action c-inform-action-link\" (click)=\"onAction($event)\">\n          {{ _actionLabel }}\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        <sd-icon aria-hidden=\"true\" name=\"close\"></sd-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-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!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-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!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-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!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-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!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-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!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-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!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}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!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-text);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-text-secondary);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 sd-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 _effectiveIcon = effectiveIcon();\n  @let _fontSet = fontSet();\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 (_effectiveIcon) {\n      <sd-icon class=\"c-inform-icon c-material-icon\" aria-hidden=\"true\" [fontSet]=\"_fontSet\" [name]=\"_effectiveIcon\"></sd-icon>\n    }\n\n    @let _actionLabel = 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') | sdTranslate }}\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 (_actionLabel) {\n        <button type=\"button\" class=\"c-inform-action c-inform-action-link\" (click)=\"onAction($event)\">\n          {{ _actionLabel }}\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' | sdTranslate\"\n        (click)=\"onClose($event)\">\n        <sd-icon aria-hidden=\"true\" name=\"close\"></sd-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-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!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-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!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-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!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-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!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-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!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-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!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}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!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-text);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-text-secondary);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 sd-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SdTranslatePipe, name: "sdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdInform, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-inform', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [SdIcon, CommonModule, TranslatePipe], template: "@if (!dismissed()) {\n  @let _effectiveIcon = effectiveIcon();\n  @let _fontSet = fontSet();\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 (_effectiveIcon) {\n      <sd-icon class=\"c-inform-icon c-material-icon\" aria-hidden=\"true\" [fontSet]=\"_fontSet\" [name]=\"_effectiveIcon\"></sd-icon>\n    }\n\n    @let _actionLabel = 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 (_actionLabel) {\n        <button type=\"button\" class=\"c-inform-action c-inform-action-link\" (click)=\"onAction($event)\">\n          {{ _actionLabel }}\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        <sd-icon aria-hidden=\"true\" name=\"close\"></sd-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-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!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-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!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-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!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-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!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-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!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-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!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}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!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-text);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-text-secondary);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 sd-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"] }]
+            args: [{ selector: 'sd-inform', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [SdIcon, CommonModule, SdTranslatePipe], template: "@if (!dismissed()) {\n  @let _effectiveIcon = effectiveIcon();\n  @let _fontSet = fontSet();\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 (_effectiveIcon) {\n      <sd-icon class=\"c-inform-icon c-material-icon\" aria-hidden=\"true\" [fontSet]=\"_fontSet\" [name]=\"_effectiveIcon\"></sd-icon>\n    }\n\n    @let _actionLabel = 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') | sdTranslate }}\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 (_actionLabel) {\n        <button type=\"button\" class=\"c-inform-action c-inform-action-link\" (click)=\"onAction($event)\">\n          {{ _actionLabel }}\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' | sdTranslate\"\n        (click)=\"onClose($event)\">\n        <sd-icon aria-hidden=\"true\" name=\"close\"></sd-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-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!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-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!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-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!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-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!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-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!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-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!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}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!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-text);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-text-secondary);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 sd-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"] }]
         }], ctorParameters: () => [] });
 
 /**

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

@@ -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","import { 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 { Color } from '@sdcorejs/utils/models';\nimport { TranslatePipe } from '@sdcorejs/angular/i18n';\nimport { SdInformActionDirective } from './inform-action.directive';\nimport { SdIcon, type SdIconSet } from '@sdcorejs/angular/modules/icon';\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  styleUrl: './inform.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [SdIcon, CommonModule, 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<SdIconSet | undefined, SdIconSet | undefined | null>(undefined, {\n    transform: value => value ?? undefined,\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  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 _effectiveIcon = effectiveIcon();\n  @let _fontSet = fontSet();\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 (_effectiveIcon) {\n      <sd-icon class=\"c-inform-icon c-material-icon\" aria-hidden=\"true\" [fontSet]=\"_fontSet\" [name]=\"_effectiveIcon\"></sd-icon>\n    }\n\n    @let _actionLabel = 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 (_actionLabel) {\n        <button type=\"button\" class=\"c-inform-action c-inform-action-link\" (click)=\"onAction($event)\">\n          {{ _actionLabel }}\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        <sd-icon aria-hidden=\"true\" name=\"close\"></sd-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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"}
+{"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","import { 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 { Color } from '@sdcorejs/utils/models';\nimport { SdTranslatePipe } from '@sdcorejs/angular/i18n';\nimport { SdInformActionDirective } from './inform-action.directive';\nimport { SdIcon, type SdIconSet } from '@sdcorejs/angular/modules/icon';\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  styleUrl: './inform.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [SdIcon, CommonModule, SdTranslatePipe],\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<SdIconSet | undefined, SdIconSet | undefined | null>(undefined, {\n    transform: value => value ?? undefined,\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  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 _effectiveIcon = effectiveIcon();\n  @let _fontSet = fontSet();\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 (_effectiveIcon) {\n      <sd-icon class=\"c-inform-icon c-material-icon\" aria-hidden=\"true\" [fontSet]=\"_fontSet\" [name]=\"_effectiveIcon\"></sd-icon>\n    }\n\n    @let _actionLabel = 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') | sdTranslate }}\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 (_actionLabel) {\n        <button type=\"button\" class=\"c-inform-action c-inform-action-link\" (click)=\"onAction($event)\">\n          {{ _actionLabel }}\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' | sdTranslate\"\n        (click)=\"onClose($event)\">\n        <sd-icon aria-hidden=\"true\" name=\"close\"></sd-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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"}

package/fesm2022/sdcorejs-angular-components-modal-resizable.mjs

@@ -1,25 +1,155 @@
 import * as i0 from '@angular/core';
-import { viewChild, input, booleanAttribute, output, inject, ChangeDetectorRef, DestroyRef, signal, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, Injectable, viewChild, input, booleanAttribute, output, ChangeDetectorRef, DestroyRef, signal, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
 import { Utilities } from '@sdcorejs/utils/fns';
 import * as i2 from '@angular/cdk/portal';
 import { CdkPortal, DomPortalOutlet, PortalModule } from '@angular/cdk/portal';
-import { CommonModule } from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { SdLoadingService } from '@sdcorejs/angular/services';
 import { SdIcon } from '@sdcorejs/angular/modules/icon';
 
+/**
+ * Sổ đăng ký các panel `<sd-modal-resizable>` đang sống.
+ *
+ * why: mỗi panel được portal ra thẳng `document.body` nên việc xếp chỗ (width/right) là bài toán
+ * chung của cả stack. Trước đây `#arrangePanels` quét `document.querySelectorAll('.modal-resizable')`
+ * — query đó bắt MỌI phần tử mang class này trong tài liệu, kể cả markup của component khác hoặc
+ * của app dùng trùng tên class, rồi ghi đè inline style lên chúng. Registry giới hạn phạm vi ghi
+ * đúng vào các instance do library tạo ra và còn sống.
+ */
+class SdModalResizableRegistry {
+    // why: dùng token DOCUMENT thay vì global `document`, đồng bộ với `preview-image` — service
+    // `providedIn:'root'` có thể được khởi tạo trong quá trình render phía server.
+    #document = inject(DOCUMENT);
+    // Set giữ nguyên thứ tự đăng ký → thứ tự xếp chỗ ổn định, khớp thứ tự panel được mở.
+    #ids = new Set();
+    register(id) {
+        this.#ids.add(id);
+    }
+    unregister(id) {
+        this.#ids.delete(id);
+    }
+    /**
+     * Phần tử panel của các instance đã đăng ký và đang có mặt trong DOM.
+     * Instance đã destroy hoặc chưa attach portal sẽ bị bỏ qua.
+     */
+    panels() {
+        const elements = [];
+        for (const id of this.#ids) {
+            const element = this.#document.getElementById(id);
+            if (element)
+                elements.push(element);
+        }
+        return elements;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdModalResizableRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdModalResizableRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdModalResizableRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * `<sd-modal-resizable>` — right-docked, non-modal panel that can be minimized, expanded or pushed
+ * fullscreen. Several panels stack side by side along the right edge of the viewport, so the user
+ * can keep multiple records open at once while still working with the page behind them.
+ *
+ * Use it for side-by-side comparison / inspector workflows. Use `<sd-modal>` when the task is
+ * blocking, and `<sd-side-drawer>` when a single overlay with a backdrop is enough.
+ *
+ * NOTE ON DOCS: this component deliberately has **no** sibling `sd-modal-resizable.md`. Every `*.md`
+ * under the library is swept into `published-docs/<version>/index.json` by `scripts/collect-docs.mjs`,
+ * and `scripts/generate-showcase-example-sources.test.mjs` asserts that list is 1:1 with the
+ * `publishedDocId` set in the showcase documentation registry. A published doc with no showcase page
+ * therefore turns that release guard red. Keep the reference here until the component ships a
+ * showcase demo + registry entry; only then add the `.md`.
+ *
+ * ```ts
+ * import { SdModalResizable } from '@sdcorejs/angular/components/modal-resizable';
+ * ```
+ *
+ * ```html
+ * <sd-button title="Open detail" type="fill" color="primary" (click)="panel.open()"></sd-button>
+ *
+ * <sd-modal-resizable #panel width="520px">
+ *   <span sdTitle>Đơn hàng #1024</span>
+ *
+ *   <div sdBody class="panel-body">
+ *     <sd-section icon="receipt" title="Thông tin chung">
+ *       <sd-section-item label="Khách hàng">Nguyen Van An</sd-section-item>
+ *     </sd-section>
+ *   </div>
+ *
+ *   <sd-button sdFooterRight type="text" title="Đóng" (click)="panel.close()"></sd-button>
+ * </sd-modal-resizable>
+ * ```
+ *
+ * ### Slots
+ * | Selector          | Where it renders          |
+ * | ----------------- | ------------------------- |
+ * | `[sdTitle]`       | Header title area.        |
+ * | `[sdBody]`        | Scrollable content area.  |
+ * | `[sdFooterLeft]`  | Footer left action group. |
+ * | `[sdFooterRight]` | Footer right action group.|
+ *
+ * Header, body and footer only render while the panel is open.
+ *
+ * ### Panel stacking
+ * The panel is portalled onto `document.body` (via `CdkPortal` + `DomPortalOutlet`), so laying panels
+ * out is a concern shared by all live instances rather than by a single view. Arrangement is scoped
+ * through the root-provided `SdModalResizableRegistry`: each instance registers its panel id on
+ * construction and unregisters it on destroy. `open`, `close`, `minimize`, `maximize` and
+ * `toggleMaximum` re-run the arrangement and rewrite inline `width` / `right` **only on registered,
+ * still-mounted panels**, in registration order. Consequences worth knowing:
+ * - Markup of your own that happens to carry the `.modal-resizable` class is **not** touched.
+ *   (Earlier builds ran `document.querySelectorAll('.modal-resizable')` and rewrote every match.)
+ * - A destroyed panel immediately stops taking up a slot for the instances that outlive it.
+ * - Panels marked `c-closed`, and expanded panels with no captured `data-width`, are skipped.
+ *
+ * ### Lifecycle / teardown
+ * `open()`, `close()` and the arrangement pass each schedule a short `setTimeout` (100ms / 100ms /
+ * 200ms) that mutates DOM. All of them are tracked and cleared in `DestroyRef.onDestroy`, together
+ * with unregistering from the registry and destroying the portal view. Destroying the component
+ * mid-animation cannot run layout work against a detached panel.
+ *
+ * ### Anti-patterns
+ * - Rendering it inside a scroll container and expecting it to be clipped — it lives on `<body>`.
+ * - Reusing the `.modal-resizable` class on your own elements to "join" the stack; register a real
+ *   component instead.
+ * - Writing inline `width` / `right` on a panel yourself — the next arrangement pass overwrites both.
+ *
+ * ### Tests
+ * `src/modal-resizable.component.spec.ts` — portal attach, open/close/minimize/maximize math,
+ * loading, editing, timer teardown, registry scoping. Run:
+ * `npx ng test sdcorejs-angular --watch=false --browsers=ChromeHeadless --include='projects/sdcorejs-angular/components/modal-resizable/src/modal-resizable.component.spec.ts'`
+ *
+ * ### Related
+ * `<sd-modal>` (blocking dialog / bottom-sheet), `<sd-side-drawer>` (single right-side overlay with
+ * a body scroll lock), `SdLoadingService` (powers `startLoading()` / `stopLoading()`).
+ */
 class SdModalResizable {
+    /** Generated DOM id of the panel element (`I<uuid>`). */
     id = `I${Utilities.generateUuid()}`;
     portal = viewChild.required(CdkPortal);
+    /** Marks the panel as editable. Bare attribute = `true`. Default `false`. */
     editable = input(false, { transform: booleanAttribute });
+    /** CSS width used while the panel is expanded (not a minimum). Default `'480px'`. */
     width = input('480px');
+    /** Emitted by `toggleEditable()` with the new editing state. */
     editingChanged = output();
     #embeddedViewRef;
     #ref = inject(ChangeDetectorRef);
     #loadingService = inject(SdLoadingService);
     #destroyRef = inject(DestroyRef);
+    #registry = inject(SdModalResizableRegistry);
+    // why: open/close/#arrangePanels đều hẹn setTimeout thao tác DOM. Gom id vào một set để
+    // onDestroy clear sạch, tránh callback chạy trên portal đã tháo (element không còn, hoặc tệ
+    // hơn: element của instance khác vừa tái sử dụng id).
+    #timers = new Set();
+    // Trạng thái panel — đọc được từ ngoài (template/consumer), chỉ component tự ghi.
     isEditing = signal(false);
     isOpened = signal(false);
     isHover = signal(false);
@@ -27,6 +157,7 @@ class SdModalResizable {
     isMinimum = signal(false);
     isMaximum = signal(false);
     constructor() {
+        this.#registry.register(this.id);
         afterNextRender(() => {
             // why: attachTemplatePortal tạo embedded view từ VCR của chính CdkPortal →
             // KHÔNG cần appRef/injector/document. Chỉ truyền outletElement để tương thích
@@ -36,15 +167,28 @@ class SdModalResizable {
             this.#detectChanges();
         });
         this.#destroyRef.onDestroy(() => {
+            this.#registry.unregister(this.id);
+            for (const timer of this.#timers)
+                clearTimeout(timer);
+            this.#timers.clear();
             this.#embeddedViewRef?.destroy();
         });
     }
+    /** setTimeout có theo dõi — huỷ được hàng loạt trong onDestroy. */
+    #schedule(callback, delay) {
+        const timer = setTimeout(() => {
+            this.#timers.delete(timer);
+            callback();
+        }, delay);
+        this.#timers.add(timer);
+    }
+    /** Opens the panel, captures its rendered width, and expands it. */
     open = () => {
         this.isOpened.set(true);
         this.#detectChanges();
         const element = this.#getElement();
         if (element && !element.classList.contains('c-minium')) {
-            setTimeout(() => {
+            this.#schedule(() => {
                 const maximumWidth = element.offsetWidth;
                 if (maximumWidth > 0) {
                     element.dataset['width'] = maximumWidth.toString();
@@ -54,10 +198,11 @@ class SdModalResizable {
         }
         this.maximize();
     };
+    /** Collapses the panel to zero width and stops loading. */
     close = () => {
         this.isOpened.set(false);
         this.#detectChanges();
-        setTimeout(() => {
+        this.#schedule(() => {
             const element = this.#getElement();
             element?.style.setProperty('width', '0px');
             element?.style.setProperty('right', '0px');
@@ -67,48 +212,59 @@ class SdModalResizable {
         this.stopLoading();
         this.#arrangePanels();
     };
+    /** Shrinks the panel to the 300px minimum strip. */
     minimize = () => {
         this.isMinimum.set(true);
         this.#detectChanges();
         this.#arrangePanels();
     };
+    /** Restores the panel to its expanded width. */
     maximize = () => {
         this.isMinimum.set(false);
         this.#detectChanges();
         this.#arrangePanels();
     };
+    /** Toggles fullscreen (`calc(100% - 16px)`). */
     toggleMaximum = () => {
         this.isMaximum.update(isMaximum => !isMaximum);
         this.#detectChanges();
         this.#arrangePanels();
     };
+    /** Drives the scoped loading overlay through `SdLoadingService`. */
     startLoading = () => {
         this.isLoading.set(true);
         this.#detectChanges();
         this.#loadingService.stop(`#${this.id}`);
         this.#loadingService.start(`#${this.id}`);
     };
+    /** Stops the scoped loading overlay. */
     stopLoading = () => {
         this.isLoading.set(false);
         this.#detectChanges();
         this.#loadingService.stop(`#${this.id}`);
     };
+    /** Flips `isEditing` and emits `editingChanged`. */
     toggleEditable() {
         this.isEditing.update(isEditing => !isEditing);
         this.#detectChanges();
         this.editingChanged.emit(this.isEditing());
     }
+    /** Hover state hook bound in the template. */
     onFocus = () => {
         this.isHover.set(true);
     };
+    /** Hover state hook bound in the template. */
     onBlur = () => {
         this.isHover.set(false);
     };
     #arrangePanels = () => {
-        setTimeout(() => {
+        this.#schedule(() => {
             let totalRight = 0;
             const minimumWidth = 300;
-            document.querySelectorAll('.modal-resizable').forEach(item => {
+            // why: chỉ xếp chỗ các panel do <sd-modal-resizable> đang sống sở hữu (registry), KHÔNG
+            // querySelectorAll('.modal-resizable') toàn document — query đó ghi đè inline width/right
+            // lên mọi phần tử trùng class, kể cả markup của component khác không liên quan.
+            this.#registry.panels().forEach(item => {
                 if (item.classList.contains('c-minium')) {
                     item.style.setProperty('width', `${minimumWidth}px`);
                     item.style.setProperty('right', `${totalRight}px`);
@@ -142,11 +298,11 @@ class SdModalResizable {
         this.#embeddedViewRef?.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdModalResizable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdModalResizable, isStandalone: true, selector: "sd-modal-resizable", inputs: { editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editingChanged: "editingChanged" }, viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template cdkPortal>\n  <div\n    [id]=\"id\"\n    class=\"modal-resizable\"\n    [style.width]=\"width()\"\n    [class.modal-resizable--active]=\"isOpened()\"\n    [class.modal-resizable--loading]=\"isLoading()\"\n    [class.c-minium]=\"isMinimum()\"\n    [class.c-fullscreen]=\"isMaximum()\"\n    (mouseover)=\"onFocus()\"\n    (focus)=\"onFocus()\"\n    (mouseout)=\"onBlur()\"\n    (blur)=\"onBlur()\">\n    @if (isOpened()) {\n      <div class=\"modal-resizable__header\">\n        <div class=\"modal-resizable__title\">\n          <ng-content select=\"[sdTitle]\"></ng-content>\n        </div>\n        <div class=\"modal-resizable__actions\">\n          @if (!isMinimum()) {\n            <button type=\"button\" class=\"c-action--white c-min\" (click)=\"minimize()\" mat-icon-button title=\"Thu nh\u1ECF\">\n              <sd-icon name=\"remove\"></sd-icon>\n            </button>\n          }\n          @if (isMinimum()) {\n            <button type=\"button\" class=\"c-action--white c-max\" (click)=\"maximize()\" mat-icon-button title=\"Ph\u00F3ng to\">\n              <sd-icon name=\"remove\"></sd-icon>\n            </button>\n          }\n          @if (!isMaximum()) {\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"To\u00E0n m\u00E0n h\u00ECnh\">\n              <sd-icon name=\"open_in_full\"></sd-icon>\n            </button>\n          }\n          @if (isMaximum()) {\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Tho\u00E1t to\u00E0n m\u00E0n h\u00ECnh\">\n              <sd-icon name=\"fullscreen_exit\"></sd-icon>\n            </button>\n          }\n          <button type=\"button\" class=\"c-action--white\" (click)=\"close()\" mat-icon-button title=\"\u0110\u00F3ng\">\n            <sd-icon name=\"close\"></sd-icon>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-resizable__body\">\n        <div class=\"modal-resizable__content\">\n          <ng-content select=\"[sdBody]\"></ng-content>\n        </div>\n      </div>\n      <div class=\"modal-resizable__footer\">\n        <div class=\"modal-resizable__footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n        <div class=\"modal-resizable__footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!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-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!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-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!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-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!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-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!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-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!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}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!important}.modal-resizable{position:fixed;right:12px;top:80px;bottom:0;background-color:#fff;z-index:998;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(0,100%,0);transition:all .3s ease-in-out;pointer-events:none;box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003;border-radius:4px 4px 0 0}.modal-resizable button.c-action--white:focus{outline:none!important}.modal-resizable.c-minium-of-list{top:auto;bottom:0;opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.modal-resizable.c-minium{top:auto!important;z-index:998!important}.modal-resizable.c-minium .modal-resizable__body,.modal-resizable.c-minium .modal-resizable__footer{display:none}.modal-resizable.c-fullscreen{top:0;z-index:999}.c-action{color:var(--sd-secondary)}.c-action:focus{outline:none}.c-action--white.c-min{margin-bottom:-12px}.c-action--white.c-max{margin-top:-12px}.modal-resizable__icon{border:0;background:transparent;color:#212121;overflow:hidden;outline:none}.modal-resizable__icon sd-icon{float:left}.modal-resizable__header{display:flex;align-items:center;flex-wrap:nowrap;gap:4px;min-height:40px;padding:0 16px;background-color:#5d6165;border-radius:4px 4px 0 0}.modal-resizable__body{flex:1;position:relative}.modal-resizable__content{position:absolute;padding:8px 16px 16px;inset:0;overflow:auto}.modal-resizable__footer{border-top:1px solid #dde0e5;padding:5px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px}.modal-resizable__footer-left,.modal-resizable__footer-right{display:inline-flex;align-items:center;gap:8px}.modal-resizable__footer-right{margin-left:auto}.modal-resizable--active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.modal-resizable__title{flex:1 1 0;min-width:0;font-size:14px;line-height:20px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-resizable__title>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-resizable__actions{display:flex;align-items:center;flex:0 0 auto;gap:4px;margin-left:auto}.modal-resizable__actions .c-action--white{flex:0 0 auto;width:32px;height:32px;line-height:32px}.modal-resizable__actions .c-action--white.c-min,.modal-resizable__actions .c-action--white.c-max{margin:0}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdModalResizable, isStandalone: true, selector: "sd-modal-resizable", inputs: { editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editingChanged: "editingChanged" }, viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template cdkPortal>\n  <div\n    [id]=\"id\"\n    class=\"modal-resizable\"\n    [style.width]=\"width()\"\n    [class.modal-resizable--active]=\"isOpened()\"\n    [class.modal-resizable--loading]=\"isLoading()\"\n    [class.c-minium]=\"isMinimum()\"\n    [class.c-fullscreen]=\"isMaximum()\"\n    (mouseover)=\"onFocus()\"\n    (focus)=\"onFocus()\"\n    (mouseout)=\"onBlur()\"\n    (blur)=\"onBlur()\">\n    @if (isOpened()) {\n      <div class=\"modal-resizable__header\">\n        <div class=\"modal-resizable__title\">\n          <ng-content select=\"[sdTitle]\"></ng-content>\n        </div>\n        <div class=\"modal-resizable__actions\">\n          @if (!isMinimum()) {\n            <button type=\"button\" class=\"c-action--white c-min\" (click)=\"minimize()\" mat-icon-button title=\"Thu nh\u1ECF\">\n              <sd-icon name=\"remove\"></sd-icon>\n            </button>\n          }\n          @if (isMinimum()) {\n            <button type=\"button\" class=\"c-action--white c-max\" (click)=\"maximize()\" mat-icon-button title=\"Ph\u00F3ng to\">\n              <sd-icon name=\"remove\"></sd-icon>\n            </button>\n          }\n          @if (!isMaximum()) {\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"To\u00E0n m\u00E0n h\u00ECnh\">\n              <sd-icon name=\"open_in_full\"></sd-icon>\n            </button>\n          }\n          @if (isMaximum()) {\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Tho\u00E1t to\u00E0n m\u00E0n h\u00ECnh\">\n              <sd-icon name=\"fullscreen_exit\"></sd-icon>\n            </button>\n          }\n          <button type=\"button\" class=\"c-action--white\" (click)=\"close()\" mat-icon-button title=\"\u0110\u00F3ng\">\n            <sd-icon name=\"close\"></sd-icon>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-resizable__body\">\n        <div class=\"modal-resizable__content\">\n          <ng-content select=\"[sdBody]\"></ng-content>\n        </div>\n      </div>\n      <div class=\"modal-resizable__footer\">\n        <div class=\"modal-resizable__footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n        <div class=\"modal-resizable__footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!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-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!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-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!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-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!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-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!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-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!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}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!important}.modal-resizable{position:fixed;right:12px;top:80px;bottom:0;background-color:#fff;z-index:998;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(0,100%,0);transition:all .3s ease-in-out;pointer-events:none;box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003;border-radius:4px 4px 0 0}.modal-resizable button.c-action--white:focus{outline:none!important}.modal-resizable button.c-action--white:focus-visible{outline:2px solid #fff!important;outline-offset:2px}.modal-resizable.c-minium-of-list{top:auto;bottom:0;opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.modal-resizable.c-minium{top:auto!important;z-index:998!important}.modal-resizable.c-minium .modal-resizable__body,.modal-resizable.c-minium .modal-resizable__footer{display:none}.modal-resizable.c-fullscreen{top:0;z-index:999}.c-action{color:var(--sd-secondary)}.c-action:focus{outline:none}.c-action:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px}.c-action--white.c-min{margin-bottom:-12px}.c-action--white.c-max{margin-top:-12px}.modal-resizable__icon{border:0;background:transparent;color:#212121;overflow:hidden;outline:none}.modal-resizable__icon:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px}.modal-resizable__icon sd-icon{float:left}.modal-resizable__header{display:flex;align-items:center;flex-wrap:nowrap;gap:4px;min-height:40px;padding:0 16px;background-color:#5d6165;border-radius:4px 4px 0 0}.modal-resizable__body{flex:1;position:relative}.modal-resizable__content{position:absolute;padding:8px 16px 16px;inset:0;overflow:auto}.modal-resizable__footer{border-top:1px solid #dde0e5;padding:5px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px}.modal-resizable__footer-left,.modal-resizable__footer-right{display:inline-flex;align-items:center;gap:8px}.modal-resizable__footer-right{margin-left:auto}.modal-resizable--active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.modal-resizable__title{flex:1 1 0;min-width:0;font-size:14px;line-height:20px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-resizable__title>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-resizable__actions{display:flex;align-items:center;flex:0 0 auto;gap:4px;margin-left:auto}.modal-resizable__actions .c-action--white{flex:0 0 auto;width:32px;height:32px;line-height:32px}.modal-resizable__actions .c-action--white.c-min,.modal-resizable__actions .c-action--white.c-max{margin:0}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdModalResizable, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-modal-resizable', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [SdIcon, CommonModule, MatDialogModule, MatButtonModule, PortalModule], template: "<ng-template cdkPortal>\n  <div\n    [id]=\"id\"\n    class=\"modal-resizable\"\n    [style.width]=\"width()\"\n    [class.modal-resizable--active]=\"isOpened()\"\n    [class.modal-resizable--loading]=\"isLoading()\"\n    [class.c-minium]=\"isMinimum()\"\n    [class.c-fullscreen]=\"isMaximum()\"\n    (mouseover)=\"onFocus()\"\n    (focus)=\"onFocus()\"\n    (mouseout)=\"onBlur()\"\n    (blur)=\"onBlur()\">\n    @if (isOpened()) {\n      <div class=\"modal-resizable__header\">\n        <div class=\"modal-resizable__title\">\n          <ng-content select=\"[sdTitle]\"></ng-content>\n        </div>\n        <div class=\"modal-resizable__actions\">\n          @if (!isMinimum()) {\n            <button type=\"button\" class=\"c-action--white c-min\" (click)=\"minimize()\" mat-icon-button title=\"Thu nh\u1ECF\">\n              <sd-icon name=\"remove\"></sd-icon>\n            </button>\n          }\n          @if (isMinimum()) {\n            <button type=\"button\" class=\"c-action--white c-max\" (click)=\"maximize()\" mat-icon-button title=\"Ph\u00F3ng to\">\n              <sd-icon name=\"remove\"></sd-icon>\n            </button>\n          }\n          @if (!isMaximum()) {\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"To\u00E0n m\u00E0n h\u00ECnh\">\n              <sd-icon name=\"open_in_full\"></sd-icon>\n            </button>\n          }\n          @if (isMaximum()) {\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Tho\u00E1t to\u00E0n m\u00E0n h\u00ECnh\">\n              <sd-icon name=\"fullscreen_exit\"></sd-icon>\n            </button>\n          }\n          <button type=\"button\" class=\"c-action--white\" (click)=\"close()\" mat-icon-button title=\"\u0110\u00F3ng\">\n            <sd-icon name=\"close\"></sd-icon>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-resizable__body\">\n        <div class=\"modal-resizable__content\">\n          <ng-content select=\"[sdBody]\"></ng-content>\n        </div>\n      </div>\n      <div class=\"modal-resizable__footer\">\n        <div class=\"modal-resizable__footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n        <div class=\"modal-resizable__footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!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-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!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-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!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-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!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-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!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-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!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}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!important}.modal-resizable{position:fixed;right:12px;top:80px;bottom:0;background-color:#fff;z-index:998;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(0,100%,0);transition:all .3s ease-in-out;pointer-events:none;box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003;border-radius:4px 4px 0 0}.modal-resizable button.c-action--white:focus{outline:none!important}.modal-resizable.c-minium-of-list{top:auto;bottom:0;opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.modal-resizable.c-minium{top:auto!important;z-index:998!important}.modal-resizable.c-minium .modal-resizable__body,.modal-resizable.c-minium .modal-resizable__footer{display:none}.modal-resizable.c-fullscreen{top:0;z-index:999}.c-action{color:var(--sd-secondary)}.c-action:focus{outline:none}.c-action--white.c-min{margin-bottom:-12px}.c-action--white.c-max{margin-top:-12px}.modal-resizable__icon{border:0;background:transparent;color:#212121;overflow:hidden;outline:none}.modal-resizable__icon sd-icon{float:left}.modal-resizable__header{display:flex;align-items:center;flex-wrap:nowrap;gap:4px;min-height:40px;padding:0 16px;background-color:#5d6165;border-radius:4px 4px 0 0}.modal-resizable__body{flex:1;position:relative}.modal-resizable__content{position:absolute;padding:8px 16px 16px;inset:0;overflow:auto}.modal-resizable__footer{border-top:1px solid #dde0e5;padding:5px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px}.modal-resizable__footer-left,.modal-resizable__footer-right{display:inline-flex;align-items:center;gap:8px}.modal-resizable__footer-right{margin-left:auto}.modal-resizable--active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.modal-resizable__title{flex:1 1 0;min-width:0;font-size:14px;line-height:20px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-resizable__title>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-resizable__actions{display:flex;align-items:center;flex:0 0 auto;gap:4px;margin-left:auto}.modal-resizable__actions .c-action--white{flex:0 0 auto;width:32px;height:32px;line-height:32px}.modal-resizable__actions .c-action--white.c-min,.modal-resizable__actions .c-action--white.c-max{margin:0}\n"] }]
+            args: [{ selector: 'sd-modal-resizable', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [SdIcon, CommonModule, MatDialogModule, MatButtonModule, PortalModule], template: "<ng-template cdkPortal>\n  <div\n    [id]=\"id\"\n    class=\"modal-resizable\"\n    [style.width]=\"width()\"\n    [class.modal-resizable--active]=\"isOpened()\"\n    [class.modal-resizable--loading]=\"isLoading()\"\n    [class.c-minium]=\"isMinimum()\"\n    [class.c-fullscreen]=\"isMaximum()\"\n    (mouseover)=\"onFocus()\"\n    (focus)=\"onFocus()\"\n    (mouseout)=\"onBlur()\"\n    (blur)=\"onBlur()\">\n    @if (isOpened()) {\n      <div class=\"modal-resizable__header\">\n        <div class=\"modal-resizable__title\">\n          <ng-content select=\"[sdTitle]\"></ng-content>\n        </div>\n        <div class=\"modal-resizable__actions\">\n          @if (!isMinimum()) {\n            <button type=\"button\" class=\"c-action--white c-min\" (click)=\"minimize()\" mat-icon-button title=\"Thu nh\u1ECF\">\n              <sd-icon name=\"remove\"></sd-icon>\n            </button>\n          }\n          @if (isMinimum()) {\n            <button type=\"button\" class=\"c-action--white c-max\" (click)=\"maximize()\" mat-icon-button title=\"Ph\u00F3ng to\">\n              <sd-icon name=\"remove\"></sd-icon>\n            </button>\n          }\n          @if (!isMaximum()) {\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"To\u00E0n m\u00E0n h\u00ECnh\">\n              <sd-icon name=\"open_in_full\"></sd-icon>\n            </button>\n          }\n          @if (isMaximum()) {\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Tho\u00E1t to\u00E0n m\u00E0n h\u00ECnh\">\n              <sd-icon name=\"fullscreen_exit\"></sd-icon>\n            </button>\n          }\n          <button type=\"button\" class=\"c-action--white\" (click)=\"close()\" mat-icon-button title=\"\u0110\u00F3ng\">\n            <sd-icon name=\"close\"></sd-icon>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-resizable__body\">\n        <div class=\"modal-resizable__content\">\n          <ng-content select=\"[sdBody]\"></ng-content>\n        </div>\n      </div>\n      <div class=\"modal-resizable__footer\">\n        <div class=\"modal-resizable__footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n        <div class=\"modal-resizable__footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!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-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!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-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!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-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!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-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!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-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!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}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!important}.modal-resizable{position:fixed;right:12px;top:80px;bottom:0;background-color:#fff;z-index:998;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(0,100%,0);transition:all .3s ease-in-out;pointer-events:none;box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003;border-radius:4px 4px 0 0}.modal-resizable button.c-action--white:focus{outline:none!important}.modal-resizable button.c-action--white:focus-visible{outline:2px solid #fff!important;outline-offset:2px}.modal-resizable.c-minium-of-list{top:auto;bottom:0;opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.modal-resizable.c-minium{top:auto!important;z-index:998!important}.modal-resizable.c-minium .modal-resizable__body,.modal-resizable.c-minium .modal-resizable__footer{display:none}.modal-resizable.c-fullscreen{top:0;z-index:999}.c-action{color:var(--sd-secondary)}.c-action:focus{outline:none}.c-action:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px}.c-action--white.c-min{margin-bottom:-12px}.c-action--white.c-max{margin-top:-12px}.modal-resizable__icon{border:0;background:transparent;color:#212121;overflow:hidden;outline:none}.modal-resizable__icon:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px}.modal-resizable__icon sd-icon{float:left}.modal-resizable__header{display:flex;align-items:center;flex-wrap:nowrap;gap:4px;min-height:40px;padding:0 16px;background-color:#5d6165;border-radius:4px 4px 0 0}.modal-resizable__body{flex:1;position:relative}.modal-resizable__content{position:absolute;padding:8px 16px 16px;inset:0;overflow:auto}.modal-resizable__footer{border-top:1px solid #dde0e5;padding:5px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px}.modal-resizable__footer-left,.modal-resizable__footer-right{display:inline-flex;align-items:center;gap:8px}.modal-resizable__footer-right{margin-left:auto}.modal-resizable--active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.modal-resizable__title{flex:1 1 0;min-width:0;font-size:14px;line-height:20px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-resizable__title>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-resizable__actions{display:flex;align-items:center;flex:0 0 auto;gap:4px;margin-left:auto}.modal-resizable__actions .c-action--white{flex:0 0 auto;width:32px;height:32px;line-height:32px}.modal-resizable__actions .c-action--white.c-min,.modal-resizable__actions .c-action--white.c-max{margin:0}\n"] }]
         }], ctorParameters: () => [] });
 
 /**