npm - @sd-angular/core - Versions diffs - 19.0.11 → 19.0.13 - Mend

@sd-angular/core 19.0.11 → 19.0.13

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

Files changed (88) hide show

package/fesm2022/sd-angular-core-components-inform.mjs CHANGED Viewed

@@ -175,11 +175,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()) {\r\n  @let _effectiveIcon = effectiveIcon();\r\n  <div\r\n    class=\"c-inform\"\r\n    [attr.role]=\"liveRole()\"\r\n    [ngClass]=\"colorClasses()\"\r\n    [attr.data-autoId]=\"autoId() || null\"\r\n    [attr.data-autoid]=\"autoId() || null\">\r\n\r\n    @if (_effectiveIcon) {\r\n      <mat-icon class=\"c-inform-icon c-material-icon\" aria-hidden=\"true\" [ngClass]=\"fontSetClasses()\">{{ _effectiveIcon }}</mat-icon>\r\n    }\r\n\r\n    @let _actionLabel = actionLabel();\r\n    <div class=\"c-inform-content\">\r\n      @if (title(); as t) {\r\n        <div class=\"c-inform-title\">{{ t }}</div>\r\n      }\r\n      @if (description(); as d) {\r\n        <div\r\n          #body\r\n          class=\"c-inform-body\"\r\n          [class.is-clamped]=\"clampLines() !== null\"\r\n          [style.-webkit-line-clamp]=\"clampLines()\">\r\n          {{ d }}\r\n        </div>\r\n      }\r\n      @if (showToggle()) {\r\n        <button type=\"button\" class=\"c-inform-toggle\" (click)=\"toggleExpanded()\">\r\n          {{ (expanded() ? 'core.component.inform.show-less' : 'core.component.inform.show-more') | translate }}\r\n        </button>\r\n      }\r\n\r\n      @if (hasActionSlot()) {\r\n        <div class=\"c-inform-action\">\r\n          <ng-content select=\"[sdInformAction]\"></ng-content>\r\n        </div>\r\n      } @else if (_actionLabel) {\r\n        <button type=\"button\" class=\"c-inform-action c-inform-action-link\" (click)=\"onAction($event)\">\r\n          {{ _actionLabel }}\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    @if (closable()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"c-inform-close\"\r\n        [attr.aria-label]=\"'core.common.close' | translate\"\r\n        (click)=\"onClose($event)\">\r\n        <mat-icon class=\"material-icons\" aria-hidden=\"true\">close</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-inform{display:flex;align-items:flex-start;gap:12px;border:1px solid transparent;border-radius:8px;padding:12px 16px;background:#fff}.c-inform.c-primary{border-color:var(--sd-primary);background:var(--sd-primary-light)}.c-inform.c-primary .c-inform-icon,.c-inform.c-primary .c-inform-title{color:var(--sd-primary)}.c-inform.c-secondary{border-color:var(--sd-secondary);background:var(--sd-secondary-light)}.c-inform.c-secondary .c-inform-icon,.c-inform.c-secondary .c-inform-title{color:var(--sd-secondary)}.c-inform.c-info{border-color:var(--sd-info);background:var(--sd-info-light)}.c-inform.c-info .c-inform-icon,.c-inform.c-info .c-inform-title{color:var(--sd-info)}.c-inform.c-success{border-color:var(--sd-success);background:var(--sd-success-light)}.c-inform.c-success .c-inform-icon,.c-inform.c-success .c-inform-title{color:var(--sd-success)}.c-inform.c-warning{border-color:var(--sd-warning);background:var(--sd-warning-light)}.c-inform.c-warning .c-inform-icon,.c-inform.c-warning .c-inform-title{color:var(--sd-warning)}.c-inform.c-error{border-color:var(--sd-error);background:var(--sd-error-light)}.c-inform.c-error .c-inform-icon,.c-inform.c-error .c-inform-title{color:var(--sd-error)}.c-inform .c-inform-icon{flex:0 0 auto;width:20px;height:20px;font-size:20px;line-height:20px}.c-inform .c-inform-content{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}.c-inform .c-inform-title{font-weight:600;font-size:14px;line-height:20px}.c-inform .c-inform-body{font-size:14px;line-height:20px;color:var(--sd-black500);overflow-wrap:break-word}.c-inform .c-inform-body.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.c-inform .c-inform-toggle,.c-inform .c-inform-action-link{align-self:flex-start;margin-top:4px;padding:0;border:none;background:none;cursor:pointer;font-size:14px;line-height:20px}.c-inform .c-inform-toggle,.c-inform .c-inform-action-link{color:var(--sd-info)}.c-inform .c-inform-action-link:hover{text-decoration:underline}.c-inform .c-inform-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;padding:0;border:none;background:transparent;cursor:pointer;color:var(--sd-black400);transition:background-color 80ms ease,color 80ms ease}.c-inform .c-inform-close:hover{background:#0000000f;color:var(--sd-error)}.c-inform .c-inform-close mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵ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  <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      <mat-icon class=\"c-inform-icon c-material-icon\" aria-hidden=\"true\" [ngClass]=\"fontSetClasses()\">{{ _effectiveIcon }}</mat-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        <mat-icon class=\"material-icons\" aria-hidden=\"true\">close</mat-icon>\n      </button>\n    }\n  </div>\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-inform{display:flex;align-items:flex-start;gap:12px;border:1px solid transparent;border-radius:8px;padding:12px 16px;background:#fff}.c-inform.c-primary{border-color:var(--sd-primary);background:var(--sd-primary-light)}.c-inform.c-primary .c-inform-icon,.c-inform.c-primary .c-inform-title{color:var(--sd-primary)}.c-inform.c-secondary{border-color:var(--sd-secondary);background:var(--sd-secondary-light)}.c-inform.c-secondary .c-inform-icon,.c-inform.c-secondary .c-inform-title{color:var(--sd-secondary)}.c-inform.c-info{border-color:var(--sd-info);background:var(--sd-info-light)}.c-inform.c-info .c-inform-icon,.c-inform.c-info .c-inform-title{color:var(--sd-info)}.c-inform.c-success{border-color:var(--sd-success);background:var(--sd-success-light)}.c-inform.c-success .c-inform-icon,.c-inform.c-success .c-inform-title{color:var(--sd-success)}.c-inform.c-warning{border-color:var(--sd-warning);background:var(--sd-warning-light)}.c-inform.c-warning .c-inform-icon,.c-inform.c-warning .c-inform-title{color:var(--sd-warning)}.c-inform.c-error{border-color:var(--sd-error);background:var(--sd-error-light)}.c-inform.c-error .c-inform-icon,.c-inform.c-error .c-inform-title{color:var(--sd-error)}.c-inform .c-inform-icon{flex:0 0 auto;width:20px;height:20px;font-size:20px;line-height:20px}.c-inform .c-inform-content{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}.c-inform .c-inform-title{font-weight:600;font-size:14px;line-height:20px}.c-inform .c-inform-body{font-size:14px;line-height:20px;color:var(--sd-black500);overflow-wrap:break-word}.c-inform .c-inform-body.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.c-inform .c-inform-toggle,.c-inform .c-inform-action-link{align-self:flex-start;margin-top:4px;padding:0;border:none;background:none;cursor:pointer;font-size:14px;line-height:20px}.c-inform .c-inform-toggle,.c-inform .c-inform-action-link{color:var(--sd-info)}.c-inform .c-inform-action-link:hover{text-decoration:underline}.c-inform .c-inform-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;padding:0;border:none;background:transparent;cursor:pointer;color:var(--sd-black400);transition:background-color 80ms ease,color 80ms ease}.c-inform .c-inform-close:hover{background:#0000000f;color:var(--sd-error)}.c-inform .c-inform-close mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdInform, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-inform', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, TranslatePipe], template: "@if (!dismissed()) {\r\n  @let _effectiveIcon = effectiveIcon();\r\n  <div\r\n    class=\"c-inform\"\r\n    [attr.role]=\"liveRole()\"\r\n    [ngClass]=\"colorClasses()\"\r\n    [attr.data-autoId]=\"autoId() || null\"\r\n    [attr.data-autoid]=\"autoId() || null\">\r\n\r\n    @if (_effectiveIcon) {\r\n      <mat-icon class=\"c-inform-icon c-material-icon\" aria-hidden=\"true\" [ngClass]=\"fontSetClasses()\">{{ _effectiveIcon }}</mat-icon>\r\n    }\r\n\r\n    @let _actionLabel = actionLabel();\r\n    <div class=\"c-inform-content\">\r\n      @if (title(); as t) {\r\n        <div class=\"c-inform-title\">{{ t }}</div>\r\n      }\r\n      @if (description(); as d) {\r\n        <div\r\n          #body\r\n          class=\"c-inform-body\"\r\n          [class.is-clamped]=\"clampLines() !== null\"\r\n          [style.-webkit-line-clamp]=\"clampLines()\">\r\n          {{ d }}\r\n        </div>\r\n      }\r\n      @if (showToggle()) {\r\n        <button type=\"button\" class=\"c-inform-toggle\" (click)=\"toggleExpanded()\">\r\n          {{ (expanded() ? 'core.component.inform.show-less' : 'core.component.inform.show-more') | translate }}\r\n        </button>\r\n      }\r\n\r\n      @if (hasActionSlot()) {\r\n        <div class=\"c-inform-action\">\r\n          <ng-content select=\"[sdInformAction]\"></ng-content>\r\n        </div>\r\n      } @else if (_actionLabel) {\r\n        <button type=\"button\" class=\"c-inform-action c-inform-action-link\" (click)=\"onAction($event)\">\r\n          {{ _actionLabel }}\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    @if (closable()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"c-inform-close\"\r\n        [attr.aria-label]=\"'core.common.close' | translate\"\r\n        (click)=\"onClose($event)\">\r\n        <mat-icon class=\"material-icons\" aria-hidden=\"true\">close</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-inform{display:flex;align-items:flex-start;gap:12px;border:1px solid transparent;border-radius:8px;padding:12px 16px;background:#fff}.c-inform.c-primary{border-color:var(--sd-primary);background:var(--sd-primary-light)}.c-inform.c-primary .c-inform-icon,.c-inform.c-primary .c-inform-title{color:var(--sd-primary)}.c-inform.c-secondary{border-color:var(--sd-secondary);background:var(--sd-secondary-light)}.c-inform.c-secondary .c-inform-icon,.c-inform.c-secondary .c-inform-title{color:var(--sd-secondary)}.c-inform.c-info{border-color:var(--sd-info);background:var(--sd-info-light)}.c-inform.c-info .c-inform-icon,.c-inform.c-info .c-inform-title{color:var(--sd-info)}.c-inform.c-success{border-color:var(--sd-success);background:var(--sd-success-light)}.c-inform.c-success .c-inform-icon,.c-inform.c-success .c-inform-title{color:var(--sd-success)}.c-inform.c-warning{border-color:var(--sd-warning);background:var(--sd-warning-light)}.c-inform.c-warning .c-inform-icon,.c-inform.c-warning .c-inform-title{color:var(--sd-warning)}.c-inform.c-error{border-color:var(--sd-error);background:var(--sd-error-light)}.c-inform.c-error .c-inform-icon,.c-inform.c-error .c-inform-title{color:var(--sd-error)}.c-inform .c-inform-icon{flex:0 0 auto;width:20px;height:20px;font-size:20px;line-height:20px}.c-inform .c-inform-content{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}.c-inform .c-inform-title{font-weight:600;font-size:14px;line-height:20px}.c-inform .c-inform-body{font-size:14px;line-height:20px;color:var(--sd-black500);overflow-wrap:break-word}.c-inform .c-inform-body.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.c-inform .c-inform-toggle,.c-inform .c-inform-action-link{align-self:flex-start;margin-top:4px;padding:0;border:none;background:none;cursor:pointer;font-size:14px;line-height:20px}.c-inform .c-inform-toggle,.c-inform .c-inform-action-link{color:var(--sd-info)}.c-inform .c-inform-action-link:hover{text-decoration:underline}.c-inform .c-inform-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;padding:0;border:none;background:transparent;cursor:pointer;color:var(--sd-black400);transition:background-color 80ms ease,color 80ms ease}.c-inform .c-inform-close:hover{background:#0000000f;color:var(--sd-error)}.c-inform .c-inform-close mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"] }]
+            args: [{ selector: 'sd-inform', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, TranslatePipe], template: "@if (!dismissed()) {\n  @let _effectiveIcon = effectiveIcon();\n  <div\n    class=\"c-inform\"\n    [attr.role]=\"liveRole()\"\n    [ngClass]=\"colorClasses()\"\n    [attr.data-autoId]=\"autoId() || null\"\n    [attr.data-autoid]=\"autoId() || null\">\n\n    @if (_effectiveIcon) {\n      <mat-icon class=\"c-inform-icon c-material-icon\" aria-hidden=\"true\" [ngClass]=\"fontSetClasses()\">{{ _effectiveIcon }}</mat-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        <mat-icon class=\"material-icons\" aria-hidden=\"true\">close</mat-icon>\n      </button>\n    }\n  </div>\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-inform{display:flex;align-items:flex-start;gap:12px;border:1px solid transparent;border-radius:8px;padding:12px 16px;background:#fff}.c-inform.c-primary{border-color:var(--sd-primary);background:var(--sd-primary-light)}.c-inform.c-primary .c-inform-icon,.c-inform.c-primary .c-inform-title{color:var(--sd-primary)}.c-inform.c-secondary{border-color:var(--sd-secondary);background:var(--sd-secondary-light)}.c-inform.c-secondary .c-inform-icon,.c-inform.c-secondary .c-inform-title{color:var(--sd-secondary)}.c-inform.c-info{border-color:var(--sd-info);background:var(--sd-info-light)}.c-inform.c-info .c-inform-icon,.c-inform.c-info .c-inform-title{color:var(--sd-info)}.c-inform.c-success{border-color:var(--sd-success);background:var(--sd-success-light)}.c-inform.c-success .c-inform-icon,.c-inform.c-success .c-inform-title{color:var(--sd-success)}.c-inform.c-warning{border-color:var(--sd-warning);background:var(--sd-warning-light)}.c-inform.c-warning .c-inform-icon,.c-inform.c-warning .c-inform-title{color:var(--sd-warning)}.c-inform.c-error{border-color:var(--sd-error);background:var(--sd-error-light)}.c-inform.c-error .c-inform-icon,.c-inform.c-error .c-inform-title{color:var(--sd-error)}.c-inform .c-inform-icon{flex:0 0 auto;width:20px;height:20px;font-size:20px;line-height:20px}.c-inform .c-inform-content{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}.c-inform .c-inform-title{font-weight:600;font-size:14px;line-height:20px}.c-inform .c-inform-body{font-size:14px;line-height:20px;color:var(--sd-black500);overflow-wrap:break-word}.c-inform .c-inform-body.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.c-inform .c-inform-toggle,.c-inform .c-inform-action-link{align-self:flex-start;margin-top:4px;padding:0;border:none;background:none;cursor:pointer;font-size:14px;line-height:20px}.c-inform .c-inform-toggle,.c-inform .c-inform-action-link{color:var(--sd-info)}.c-inform .c-inform-action-link:hover{text-decoration:underline}.c-inform .c-inform-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;padding:0;border:none;background:transparent;cursor:pointer;color:var(--sd-black400);transition:background-color 80ms ease,color 80ms ease}.c-inform .c-inform-close:hover{background:#0000000f;color:var(--sd-error)}.c-inform .c-inform-close mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"] }]
         }], ctorParameters: () => [] });
 /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-angular-core-components-inform.mjs","sources":["../../../projects/sd-angular/components/inform/src/inform-action.directive.ts","../../../projects/sd-angular/components/inform/src/inform.component.ts","../../../projects/sd-angular/components/inform/src/inform.component.html","../../../projects/sd-angular/components/inform/sd-angular-core-components-inform.ts"],"sourcesContent":["import { Directive } from '@angular/core';\r\n\r\n/*\r\n Marker cho vùng action custom chiếu vào <sd-inform>.\r\n * Khi có phần tử mang [sdInformAction], component ẩn link `actionLabel` mặc định.\r\n /\r\n@Directive({\r\n selector: '[sdInformAction]',\r\n standalone: true,\r\n})\r\nexport class SdInformActionDirective {}\r\n","/ eslint-disable @angular-eslint/no-output-rename /\r\nimport { CommonModule } from '@angular/common';\r\nimport {\r\n ChangeDetectionStrategy,\r\n Component,\r\n ElementRef,\r\n afterNextRender,\r\n booleanAttribute,\r\n computed,\r\n contentChild,\r\n effect,\r\n input,\r\n output,\r\n signal,\r\n viewChild,\r\n} from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { Color } from '@sdcorejs/utils/models';\r\nimport { MaterialIconFontSet } from '@sd-angular/core/utilities/models';\r\nimport { TranslatePipe } from '@sd-angular/core/i18n';\r\nimport { SdInformActionDirective } from './inform-action.directive';\r\n\r\n// why: mỗi color có icon trạng thái mặc định khi consumer không truyền [icon].\r\nconst SD_INFORM_DEFAULT_ICON: Record<Color, string> = {\r\n primary: 'info',\r\n secondary: 'info',\r\n info: 'info',\r\n success: 'check_circle',\r\n warning: 'warning',\r\n error: 'error',\r\n};\r\n\r\n@Component({\r\n selector: 'sd-inform',\r\n templateUrl: './inform.component.html',\r\n styleUrl: './inform.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true,\r\n imports: [CommonModule, MatIconModule, TranslatePipe],\r\n})\r\nexport class SdInform {\r\n // 1. INPUTS\r\n color = input<Color, Color \| undefined \| null>('primary', {\r\n transform: value => value \|\| 'primary',\r\n });\r\n\r\n primary = input(false, { transform: booleanAttribute });\r\n secondary = input(false, { transform: booleanAttribute });\r\n info = input(false, { transform: booleanAttribute });\r\n success = input(false, { transform: booleanAttribute });\r\n warning = input(false, { transform: booleanAttribute });\r\n error = input(false, { transform: booleanAttribute });\r\n\r\n title = input<string \| undefined>();\r\n description = input<string \| undefined>();\r\n icon = input<string \| undefined>();\r\n hideIcon = input(false, { transform: booleanAttribute });\r\n\r\n fontSet = input<MaterialIconFontSet, MaterialIconFontSet \| undefined \| null>('material-icons', {\r\n transform: value => value \|\| 'material-icons',\r\n });\r\n\r\n closable = input(false, { transform: booleanAttribute });\r\n actionLabel = input<string \| undefined>();\r\n lineClamp = input<number \| undefined>();\r\n autoId = input<string \| undefined>();\r\n\r\n // 2. OUTPUTS\r\n sdClosed = output<Event>();\r\n sdAction = output<Event>();\r\n\r\n // 3. STATE\r\n readonly dismissed = signal(false);\r\n readonly expanded = signal(false);\r\n readonly overflowing = signal(false);\r\n\r\n protected readonly bodyRef = viewChild<ElementRef<HTMLElement>>('body');\r\n protected readonly actionSlot = contentChild(SdInformActionDirective);\r\n\r\n // 4. COMPUTED\r\n effectiveColor = computed<Color>(() => {\r\n if (this.primary()) return 'primary';\r\n if (this.secondary()) return 'secondary';\r\n if (this.info()) return 'info';\r\n if (this.success()) return 'success';\r\n if (this.warning()) return 'warning';\r\n if (this.error()) return 'error';\r\n return this.color();\r\n });\r\n\r\n colorClasses = computed(() => {\r\n const c = this.effectiveColor();\r\n return {\r\n 'c-primary': c === 'primary',\r\n 'c-secondary': c === 'secondary',\r\n 'c-info': c === 'info',\r\n 'c-success': c === 'success',\r\n 'c-warning': c === 'warning',\r\n 'c-error': c === 'error',\r\n };\r\n });\r\n\r\n effectiveIcon = computed<string \| null>(() => {\r\n if (this.hideIcon()) return null;\r\n return this.icon() \|\| SD_INFORM_DEFAULT_ICON[this.effectiveColor()];\r\n });\r\n\r\n fontSetClasses = computed(() => {\r\n const f = this.fontSet();\r\n return {\r\n 'material-icons': f === 'material-icons',\r\n 'material-icons-outlined': f === 'material-icons-outlined',\r\n 'material-icons-round': f === 'material-icons-round',\r\n 'material-icons-sharp': f === 'material-icons-sharp',\r\n };\r\n });\r\n\r\n hasActionSlot = computed(() => !!this.actionSlot());\r\n\r\n // clamp dòng: null = không clamp (đầy đủ); số = số dòng tối đa.\r\n clampLines = computed<number \| null>(() => {\r\n const n = this.lineClamp();\r\n if (!n \|\| n <= 0) return null;\r\n return this.expanded() ? null : n;\r\n });\r\n\r\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).\r\n showToggle = computed(() => {\r\n if (!this.lineClamp()) return false;\r\n return this.overflowing() \|\| this.expanded();\r\n });\r\n\r\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'.\r\n liveRole = computed<'alert' \| 'status'>(() => {\r\n const c = this.effectiveColor();\r\n return c === 'error' \|\| c === 'warning' ? 'alert' : 'status';\r\n });\r\n\r\n // 5. OVERFLOW MEASUREMENT\r\n #measureScheduled = false;\r\n\r\n constructor() {\r\n // đo lần đầu sau render\r\n afterNextRender(() => this.measureOverflow());\r\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).\r\n effect(onCleanup => {\r\n this.description();\r\n this.lineClamp();\r\n this.expanded();\r\n const el = this.bodyRef()?.nativeElement;\r\n this.#scheduleMeasure();\r\n // why: guard instanceof Element để test stub (plain object) không làm ResizeObserver.observe ném lỗi.\r\n if (el instanceof Element && typeof ResizeObserver !== 'undefined') {\r\n const ro = new ResizeObserver(() => this.measureOverflow());\r\n ro.observe(el);\r\n onCleanup(() => ro.disconnect());\r\n }\r\n });\r\n }\r\n\r\n #scheduleMeasure(): void {\r\n if (this.#measureScheduled) return;\r\n this.#measureScheduled = true;\r\n // gom nhiều thay đổi vào 1 lần đo sau khi DOM cập nhật xong\r\n queueMicrotask(() => {\r\n this.#measureScheduled = false;\r\n this.measureOverflow();\r\n });\r\n }\r\n\r\n /* Đo tràn dòng của body; chỉ có ý nghĩa khi đang clamp. /\r\n measureOverflow(): void {\r\n const el = this.bodyRef()?.nativeElement;\r\n if (!el \|\| this.expanded() \|\| !this.lineClamp()) return;\r\n // +1 chống sai số làm tròn sub-pixel\r\n this.overflowing.set(el.scrollHeight > el.clientHeight + 1);\r\n }\r\n\r\n // 6. HANDLERS\r\n toggleExpanded(): void {\r\n this.expanded.update(v => !v);\r\n }\r\n\r\n onClose(event: Event): void {\r\n event.stopPropagation();\r\n this.dismissed.set(true);\r\n this.sdClosed.emit(event);\r\n }\r\n\r\n onAction(event: Event): void {\r\n event.stopPropagation();\r\n this.sdAction.emit(event);\r\n }\r\n}\r\n","@if (!dismissed()) {\r\n @let _effectiveIcon = effectiveIcon();\r\n <div\r\n class=\"c-inform\"\r\n [attr.role]=\"liveRole()\"\r\n [ngClass]=\"colorClasses()\"\r\n [attr.data-autoId]=\"autoId() \|\| null\"\r\n [attr.data-autoid]=\"autoId() \|\| null\">\r\n\r\n @if (_effectiveIcon) {\r\n <mat-icon class=\"c-inform-icon c-material-icon\" aria-hidden=\"true\" [ngClass]=\"fontSetClasses()\">{{ _effectiveIcon }}</mat-icon>\r\n }\r\n\r\n @let _actionLabel = actionLabel();\r\n <div class=\"c-inform-content\">\r\n @if (title(); as t) {\r\n <div class=\"c-inform-title\">{{ t }}</div>\r\n }\r\n @if (description(); as d) {\r\n <div\r\n #body\r\n class=\"c-inform-body\"\r\n [class.is-clamped]=\"clampLines() !== null\"\r\n [style.-webkit-line-clamp]=\"clampLines()\">\r\n {{ d }}\r\n </div>\r\n }\r\n @if (showToggle()) {\r\n <button type=\"button\" class=\"c-inform-toggle\" (click)=\"toggleExpanded()\">\r\n {{ (expanded() ? 'core.component.inform.show-less' : 'core.component.inform.show-more') \| translate }}\r\n </button>\r\n }\r\n\r\n @if (hasActionSlot()) {\r\n <div class=\"c-inform-action\">\r\n <ng-content select=\"[sdInformAction]\"></ng-content>\r\n </div>\r\n } @else if (_actionLabel) {\r\n <button type=\"button\" class=\"c-inform-action c-inform-action-link\" (click)=\"onAction($event)\">\r\n {{ _actionLabel }}\r\n </button>\r\n }\r\n </div>\r\n\r\n @if (closable()) {\r\n <button\r\n type=\"button\"\r\n class=\"c-inform-close\"\r\n [attr.aria-label]=\"'core.common.close' \| translate\"\r\n (click)=\"onClose($event)\">\r\n <mat-icon class=\"material-icons\" aria-hidden=\"true\">close</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n}\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"sd-angular-core-components-inform.mjs","sources":["../../../projects/sd-angular/components/inform/src/inform-action.directive.ts","../../../projects/sd-angular/components/inform/src/inform.component.ts","../../../projects/sd-angular/components/inform/src/inform.component.html","../../../projects/sd-angular/components/inform/sd-angular-core-components-inform.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n/*\n Marker cho vùng action custom chiếu vào <sd-inform>.\n * Khi có phần tử mang [sdInformAction], component ẩn link `actionLabel` mặc định.\n /\n@Directive({\n selector: '[sdInformAction]',\n standalone: true,\n})\nexport class SdInformActionDirective {}\n","/ eslint-disable @angular-eslint/no-output-rename /\r\nimport { CommonModule } from '@angular/common';\r\nimport {\r\n ChangeDetectionStrategy,\r\n Component,\r\n ElementRef,\r\n afterNextRender,\r\n booleanAttribute,\r\n computed,\r\n contentChild,\r\n effect,\r\n input,\r\n output,\r\n signal,\r\n viewChild,\r\n} from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { Color } from '@sdcorejs/utils/models';\r\nimport { MaterialIconFontSet } from '@sd-angular/core/utilities/models';\r\nimport { TranslatePipe } from '@sd-angular/core/i18n';\r\nimport { SdInformActionDirective } from './inform-action.directive';\r\n\r\n// why: mỗi color có icon trạng thái mặc định khi consumer không truyền [icon].\r\nconst SD_INFORM_DEFAULT_ICON: Record<Color, string> = {\r\n primary: 'info',\r\n secondary: 'info',\r\n info: 'info',\r\n success: 'check_circle',\r\n warning: 'warning',\r\n error: 'error',\r\n};\r\n\r\n@Component({\r\n selector: 'sd-inform',\r\n templateUrl: './inform.component.html',\r\n styleUrl: './inform.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true,\r\n imports: [CommonModule, MatIconModule, TranslatePipe],\r\n})\r\nexport class SdInform {\r\n // 1. INPUTS\r\n color = input<Color, Color \| undefined \| null>('primary', {\r\n transform: value => value \|\| 'primary',\r\n });\r\n\r\n primary = input(false, { transform: booleanAttribute });\r\n secondary = input(false, { transform: booleanAttribute });\r\n info = input(false, { transform: booleanAttribute });\r\n success = input(false, { transform: booleanAttribute });\r\n warning = input(false, { transform: booleanAttribute });\r\n error = input(false, { transform: booleanAttribute });\r\n\r\n title = input<string \| undefined>();\r\n description = input<string \| undefined>();\r\n icon = input<string \| undefined>();\r\n hideIcon = input(false, { transform: booleanAttribute });\r\n\r\n fontSet = input<MaterialIconFontSet, MaterialIconFontSet \| undefined \| null>('material-icons', {\r\n transform: value => value \|\| 'material-icons',\r\n });\r\n\r\n closable = input(false, { transform: booleanAttribute });\r\n actionLabel = input<string \| undefined>();\r\n lineClamp = input<number \| undefined>();\r\n autoId = input<string \| undefined>();\r\n\r\n // 2. OUTPUTS\r\n sdClosed = output<Event>();\r\n sdAction = output<Event>();\r\n\r\n // 3. STATE\r\n readonly dismissed = signal(false);\r\n readonly expanded = signal(false);\r\n readonly overflowing = signal(false);\r\n\r\n protected readonly bodyRef = viewChild<ElementRef<HTMLElement>>('body');\r\n protected readonly actionSlot = contentChild(SdInformActionDirective);\r\n\r\n // 4. COMPUTED\r\n effectiveColor = computed<Color>(() => {\r\n if (this.primary()) return 'primary';\r\n if (this.secondary()) return 'secondary';\r\n if (this.info()) return 'info';\r\n if (this.success()) return 'success';\r\n if (this.warning()) return 'warning';\r\n if (this.error()) return 'error';\r\n return this.color();\r\n });\r\n\r\n colorClasses = computed(() => {\r\n const c = this.effectiveColor();\r\n return {\r\n 'c-primary': c === 'primary',\r\n 'c-secondary': c === 'secondary',\r\n 'c-info': c === 'info',\r\n 'c-success': c === 'success',\r\n 'c-warning': c === 'warning',\r\n 'c-error': c === 'error',\r\n };\r\n });\r\n\r\n effectiveIcon = computed<string \| null>(() => {\r\n if (this.hideIcon()) return null;\r\n return this.icon() \|\| SD_INFORM_DEFAULT_ICON[this.effectiveColor()];\r\n });\r\n\r\n fontSetClasses = computed(() => {\r\n const f = this.fontSet();\r\n return {\r\n 'material-icons': f === 'material-icons',\r\n 'material-icons-outlined': f === 'material-icons-outlined',\r\n 'material-icons-round': f === 'material-icons-round',\r\n 'material-icons-sharp': f === 'material-icons-sharp',\r\n };\r\n });\r\n\r\n hasActionSlot = computed(() => !!this.actionSlot());\r\n\r\n // clamp dòng: null = không clamp (đầy đủ); số = số dòng tối đa.\r\n clampLines = computed<number \| null>(() => {\r\n const n = this.lineClamp();\r\n if (!n \|\| n <= 0) return null;\r\n return this.expanded() ? null : n;\r\n });\r\n\r\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).\r\n showToggle = computed(() => {\r\n if (!this.lineClamp()) return false;\r\n return this.overflowing() \|\| this.expanded();\r\n });\r\n\r\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'.\r\n liveRole = computed<'alert' \| 'status'>(() => {\r\n const c = this.effectiveColor();\r\n return c === 'error' \|\| c === 'warning' ? 'alert' : 'status';\r\n });\r\n\r\n // 5. OVERFLOW MEASUREMENT\r\n #measureScheduled = false;\r\n\r\n constructor() {\r\n // đo lần đầu sau render\r\n afterNextRender(() => this.measureOverflow());\r\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).\r\n effect(onCleanup => {\r\n this.description();\r\n this.lineClamp();\r\n this.expanded();\r\n const el = this.bodyRef()?.nativeElement;\r\n this.#scheduleMeasure();\r\n // why: guard instanceof Element để test stub (plain object) không làm ResizeObserver.observe ném lỗi.\r\n if (el instanceof Element && typeof ResizeObserver !== 'undefined') {\r\n const ro = new ResizeObserver(() => this.measureOverflow());\r\n ro.observe(el);\r\n onCleanup(() => ro.disconnect());\r\n }\r\n });\r\n }\r\n\r\n #scheduleMeasure(): void {\r\n if (this.#measureScheduled) return;\r\n this.#measureScheduled = true;\r\n // gom nhiều thay đổi vào 1 lần đo sau khi DOM cập nhật xong\r\n queueMicrotask(() => {\r\n this.#measureScheduled = false;\r\n this.measureOverflow();\r\n });\r\n }\r\n\r\n /* Đo tràn dòng của body; chỉ có ý nghĩa khi đang clamp. /\r\n measureOverflow(): void {\r\n const el = this.bodyRef()?.nativeElement;\r\n if (!el \|\| this.expanded() \|\| !this.lineClamp()) return;\r\n // +1 chống sai số làm tròn sub-pixel\r\n this.overflowing.set(el.scrollHeight > el.clientHeight + 1);\r\n }\r\n\r\n // 6. HANDLERS\r\n toggleExpanded(): void {\r\n this.expanded.update(v => !v);\r\n }\r\n\r\n onClose(event: Event): void {\r\n event.stopPropagation();\r\n this.dismissed.set(true);\r\n this.sdClosed.emit(event);\r\n }\r\n\r\n onAction(event: Event): void {\r\n event.stopPropagation();\r\n this.sdAction.emit(event);\r\n }\r\n}\r\n","@if (!dismissed()) {\n @let _effectiveIcon = effectiveIcon();\n <div\n class=\"c-inform\"\n [attr.role]=\"liveRole()\"\n [ngClass]=\"colorClasses()\"\n [attr.data-autoId]=\"autoId() \|\| null\"\n [attr.data-autoid]=\"autoId() \|\| null\">\n\n @if (_effectiveIcon) {\n <mat-icon class=\"c-inform-icon c-material-icon\" aria-hidden=\"true\" [ngClass]=\"fontSetClasses()\">{{ _effectiveIcon }}</mat-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 <mat-icon class=\"material-icons\" aria-hidden=\"true\">close</mat-icon>\n </button>\n }\n </div>\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sd-angular-core-components-modal.mjs CHANGED Viewed

@@ -93,11 +93,11 @@ class SdModal {
         this.#dialogRef?.close();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdModal, isStandalone: true, selector: "sd-modal", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, modalClass: { classPropertyName: "modalClass", publicName: "modalClass", isSignal: true, isRequired: false, transformFunction: null }, lazyLoadContent: { classPropertyName: "lazyLoadContent", publicName: "lazyLoadContent", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef>\r\n  <div class=\"sd-modal-root\"\r\n       [attr.data-autoId]=\"autoId()\"\r\n       [attr.data-opened]=\"dataOpened()\">\r\n    @if (!lazyLoadContent() || alreadyOpened()) {\r\n      <!-- Header -->\r\n      <!-- D\u00F9ng scss thu\u1EA7n -->\r\n      @if (title()) {\r\n        <div class=\"d-flex align-items-center p-16\">\r\n          <ng-content select=\"[sdHeaderLeft]\">\r\n            <div class=\"T18M\">{{ title() }}</div>\r\n          </ng-content>\r\n          <div class=\"d-flex align-items-center ml-auto\">\r\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n            <ng-content select=\"[sdHeader]\"></ng-content>\r\n            @if (!hideClose()) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"sd-modal-close-btn\"\r\n                aria-label=\"Close\"\r\n                (click)=\"close()\"\r\n                [attr.data-autoId]=\"closeButtonAutoId()\">\r\n                <mat-icon>close</mat-icon>\r\n              </button>\r\n            }\r\n          </div>\r\n        </div>\r\n      }\r\n      <!-- <mat-divider></mat-divider> -->\r\n      <!-- Body -->\r\n      <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n      <!-- Footer -->\r\n      <!-- <mat-divider></mat-divider> -->\r\n      <div class=\"d-flex align-items-center p-8\" #footer>\r\n        <ng-content select=\"[sdFooterLeft]\"></ng-content>\r\n        <div class=\"ml-auto\">\r\n          <ng-content select=\"[sdFooterRight]\"></ng-content>\r\n          <ng-content select=\"[sdFooter]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["button:focus{outline:none!important}.mat-dialog-container{padding:0!important}.mat-dialog-container .mat-dialog-content{max-height:80vh}.mat-dialog-container .mat-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.mat-bottom-sheet-container{max-height:\"inherit\"}sd-modal-header{padding:12px 24px;display:block;width:100%}@media(max-width:640px){sd-modal-header{padding:12px}}.sd-modal-close-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;width:32px;height:32px;margin-left:8px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sd-black400);line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color 80ms ease,color 80ms ease}.sd-modal-close-btn:hover{background:var(--sd-black100);color:var(--sd-black500)}.sd-modal-close-btn:active{background:var(--sd-black200)}.sd-modal-close-btn:focus{outline:none!important}.sd-modal-close-btn:focus-visible{outline:2px solid var(--sd-primary)!important;outline-offset:2px}.sd-modal-close-btn mat-icon{display:block;width:20px;height:20px;font-size:20px;line-height:20px}.cdk-global-overlay-wrapper .mat-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:80vh;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdModal, isStandalone: true, selector: "sd-modal", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, modalClass: { classPropertyName: "modalClass", publicName: "modalClass", isSignal: true, isRequired: false, transformFunction: null }, lazyLoadContent: { classPropertyName: "lazyLoadContent", publicName: "lazyLoadContent", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef>\r\n  <div class=\"sd-modal-root\"\r\n       [attr.data-autoId]=\"autoId()\"\r\n       [attr.data-opened]=\"dataOpened()\">\r\n    @if (!lazyLoadContent() || alreadyOpened()) {\r\n      <!-- Header -->\r\n      <!-- D\u00F9ng scss thu\u1EA7n -->\r\n      @if (title()) {\r\n        <div class=\"d-flex align-items-center p-16\">\r\n          <ng-content select=\"[sdHeaderLeft]\">\r\n            <div class=\"T18M\">{{ title() }}</div>\r\n          </ng-content>\r\n          <div class=\"d-flex align-items-center ml-auto\">\r\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            <ng-content select=\"[sdHeader]\"></ng-content>\n            @if (!hideClose()) {\n              <button\n                type=\"button\"\n                class=\"sd-modal-close-btn\"\n                aria-label=\"Close\"\n                (click)=\"close()\"\n                [attr.data-autoId]=\"closeButtonAutoId()\">\n                <mat-icon>close</mat-icon>\n              </button>\n            }\n          </div>\n        </div>\n      }\n      <!-- <mat-divider></mat-divider> -->\r\n      <!-- Body -->\r\n      <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n      <!-- Footer -->\r\n      <!-- <mat-divider></mat-divider> -->\r\n      <div class=\"d-flex align-items-center p-8\" #footer>\r\n        <ng-content select=\"[sdFooterLeft]\"></ng-content>\r\n        <div class=\"ml-auto\">\r\n          <ng-content select=\"[sdFooterRight]\"></ng-content>\r\n          <ng-content select=\"[sdFooter]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["button:focus{outline:none!important}.mat-dialog-container{padding:0!important}.mat-dialog-container .mat-dialog-content{max-height:80vh}.mat-dialog-container .mat-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.mat-bottom-sheet-container{max-height:\"inherit\"}sd-modal-header{padding:12px 24px;display:block;width:100%}@media(max-width:640px){sd-modal-header{padding:12px}}.sd-modal-close-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;width:32px;height:32px;margin-left:8px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sd-black400);line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color 80ms ease,color 80ms ease}.sd-modal-close-btn:hover{background:var(--sd-black100);color:var(--sd-black500)}.sd-modal-close-btn:active{background:var(--sd-black200)}.sd-modal-close-btn:focus{outline:none!important}.sd-modal-close-btn:focus-visible{outline:2px solid var(--sd-primary)!important;outline-offset:2px}.sd-modal-close-btn mat-icon{display:block;width:20px;height:20px;font-size:20px;line-height:20px}.cdk-global-overlay-wrapper .mat-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:80vh;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdModal, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-modal', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, MatBottomSheetModule, MatDialogModule, MatDividerModule, MatButtonModule], template: "<ng-template #templateRef>\r\n  <div class=\"sd-modal-root\"\r\n       [attr.data-autoId]=\"autoId()\"\r\n       [attr.data-opened]=\"dataOpened()\">\r\n    @if (!lazyLoadContent() || alreadyOpened()) {\r\n      <!-- Header -->\r\n      <!-- D\u00F9ng scss thu\u1EA7n -->\r\n      @if (title()) {\r\n        <div class=\"d-flex align-items-center p-16\">\r\n          <ng-content select=\"[sdHeaderLeft]\">\r\n            <div class=\"T18M\">{{ title() }}</div>\r\n          </ng-content>\r\n          <div class=\"d-flex align-items-center ml-auto\">\r\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n            <ng-content select=\"[sdHeader]\"></ng-content>\r\n            @if (!hideClose()) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"sd-modal-close-btn\"\r\n                aria-label=\"Close\"\r\n                (click)=\"close()\"\r\n                [attr.data-autoId]=\"closeButtonAutoId()\">\r\n                <mat-icon>close</mat-icon>\r\n              </button>\r\n            }\r\n          </div>\r\n        </div>\r\n      }\r\n      <!-- <mat-divider></mat-divider> -->\r\n      <!-- Body -->\r\n      <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n      <!-- Footer -->\r\n      <!-- <mat-divider></mat-divider> -->\r\n      <div class=\"d-flex align-items-center p-8\" #footer>\r\n        <ng-content select=\"[sdFooterLeft]\"></ng-content>\r\n        <div class=\"ml-auto\">\r\n          <ng-content select=\"[sdFooterRight]\"></ng-content>\r\n          <ng-content select=\"[sdFooter]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["button:focus{outline:none!important}.mat-dialog-container{padding:0!important}.mat-dialog-container .mat-dialog-content{max-height:80vh}.mat-dialog-container .mat-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.mat-bottom-sheet-container{max-height:\"inherit\"}sd-modal-header{padding:12px 24px;display:block;width:100%}@media(max-width:640px){sd-modal-header{padding:12px}}.sd-modal-close-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;width:32px;height:32px;margin-left:8px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sd-black400);line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color 80ms ease,color 80ms ease}.sd-modal-close-btn:hover{background:var(--sd-black100);color:var(--sd-black500)}.sd-modal-close-btn:active{background:var(--sd-black200)}.sd-modal-close-btn:focus{outline:none!important}.sd-modal-close-btn:focus-visible{outline:2px solid var(--sd-primary)!important;outline-offset:2px}.sd-modal-close-btn mat-icon{display:block;width:20px;height:20px;font-size:20px;line-height:20px}.cdk-global-overlay-wrapper .mat-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:80vh;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}\n"] }]
+            args: [{ selector: 'sd-modal', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, MatBottomSheetModule, MatDialogModule, MatDividerModule, MatButtonModule], template: "<ng-template #templateRef>\r\n  <div class=\"sd-modal-root\"\r\n       [attr.data-autoId]=\"autoId()\"\r\n       [attr.data-opened]=\"dataOpened()\">\r\n    @if (!lazyLoadContent() || alreadyOpened()) {\r\n      <!-- Header -->\r\n      <!-- D\u00F9ng scss thu\u1EA7n -->\r\n      @if (title()) {\r\n        <div class=\"d-flex align-items-center p-16\">\r\n          <ng-content select=\"[sdHeaderLeft]\">\r\n            <div class=\"T18M\">{{ title() }}</div>\r\n          </ng-content>\r\n          <div class=\"d-flex align-items-center ml-auto\">\r\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            <ng-content select=\"[sdHeader]\"></ng-content>\n            @if (!hideClose()) {\n              <button\n                type=\"button\"\n                class=\"sd-modal-close-btn\"\n                aria-label=\"Close\"\n                (click)=\"close()\"\n                [attr.data-autoId]=\"closeButtonAutoId()\">\n                <mat-icon>close</mat-icon>\n              </button>\n            }\n          </div>\n        </div>\n      }\n      <!-- <mat-divider></mat-divider> -->\r\n      <!-- Body -->\r\n      <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n      <!-- Footer -->\r\n      <!-- <mat-divider></mat-divider> -->\r\n      <div class=\"d-flex align-items-center p-8\" #footer>\r\n        <ng-content select=\"[sdFooterLeft]\"></ng-content>\r\n        <div class=\"ml-auto\">\r\n          <ng-content select=\"[sdFooterRight]\"></ng-content>\r\n          <ng-content select=\"[sdFooter]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["button:focus{outline:none!important}.mat-dialog-container{padding:0!important}.mat-dialog-container .mat-dialog-content{max-height:80vh}.mat-dialog-container .mat-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.mat-bottom-sheet-container{max-height:\"inherit\"}sd-modal-header{padding:12px 24px;display:block;width:100%}@media(max-width:640px){sd-modal-header{padding:12px}}.sd-modal-close-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;width:32px;height:32px;margin-left:8px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sd-black400);line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color 80ms ease,color 80ms ease}.sd-modal-close-btn:hover{background:var(--sd-black100);color:var(--sd-black500)}.sd-modal-close-btn:active{background:var(--sd-black200)}.sd-modal-close-btn:focus{outline:none!important}.sd-modal-close-btn:focus-visible{outline:2px solid var(--sd-primary)!important;outline-offset:2px}.sd-modal-close-btn mat-icon{display:block;width:20px;height:20px;font-size:20px;line-height:20px}.cdk-global-overlay-wrapper .mat-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:80vh;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}\n"] }]
         }], ctorParameters: () => [] });
 /**

package/fesm2022/sd-angular-core-components-modal.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-angular-core-components-modal.mjs","sources":["../../../projects/sd-angular/components/modal/src/modal.component.ts","../../../projects/sd-angular/components/modal/src/modal.component.html","../../../projects/sd-angular/components/modal/sd-angular-core-components-modal.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport {\r\n ChangeDetectionStrategy,\r\n Component,\r\n DestroyRef,\r\n ElementRef,\r\n TemplateRef,\r\n booleanAttribute,\r\n computed,\r\n inject,\r\n input,\r\n output,\r\n signal,\r\n viewChild\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { MatBottomSheet, MatBottomSheetModule, MatBottomSheetRef } from '@angular/material/bottom-sheet';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';\r\nimport { MatDividerModule } from '@angular/material/divider';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { BrowserUtilities } from '@sdcorejs/utils/fns';\r\nimport { Color, Size } from '@sdcorejs/utils/models';\r\n\r\n@Component({\r\n selector: 'sd-modal',\r\n templateUrl: './modal.component.html',\r\n styleUrl: './modal.component.scss',\r\n // encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true,\r\n imports: [CommonModule, MatIconModule, MatBottomSheetModule, MatDialogModule, MatDividerModule, MatButtonModule],\r\n})\r\nexport class SdModal {\r\n static index = signal(0);\r\n\r\n templateRef = viewChild.required<TemplateRef<any>>('templateRef');\r\n modal = viewChild<ElementRef>('modal');\r\n\r\n // autoId prefix `modal-`. Lưu ý: footer/body buttons render qua <ng-content> nên consumer phải\r\n // tự đặt [attr.data-autoId] cho các nút đó. Component chỉ tự bind autoId cho NÚT ĐÓNG (X icon).\r\n readonly autoIdInput = input<string \| undefined \| null>(undefined, { alias: 'autoId' });\r\n readonly autoId = computed(() => (this.autoIdInput() ? `components-modal-${this.autoIdInput()}` : undefined));\r\n readonly closeButtonAutoId = computed(() => (this.autoId() ? `${this.autoId()}-close` : undefined));\r\n readonly dataOpened = computed(() => (this.isOpened() ? 'true' : 'false'));\r\n\r\n title = input<string, string \| null \| undefined>('', { transform: (v) => v ?? '' });\r\n color = input<Color, Color \| null \| undefined>('primary', { transform: (v) => v ?? 'primary' });\r\n width = input<Size \| string, Size \| string \| null \| undefined>('md', { transform: (v) => v ?? 'md' });\r\n height = input<string, string \| null \| undefined>('auto', { transform: (v) => v ?? 'auto' });\r\n view = input<'dialog' \| 'bottom-sheet' \| undefined, 'dialog' \| 'bottom-sheet' \| null \| undefined>(undefined, { transform: (v) => v ?? undefined });\r\n modalClass = input<string \| string[] \| Record<string, boolean>, string \| string[] \| Record<string, boolean> \| null \| undefined>('', { transform: (v) => v ?? '' });\r\n lazyLoadContent = input(true, { transform: booleanAttribute });\r\n hideClose = input<boolean, boolean \| ''>(false, { transform: booleanAttribute });\r\n disableBackdropClose = input<boolean, boolean \| ''>(true, { transform: booleanAttribute }); // default to true to keep backward compatibility\r\n\r\n sdClosed = output<void>();\r\n\r\n isOpened = signal(false);\r\n alreadyOpened = signal(false);\r\n\r\n #isMobile = false;\r\n #resolvedWidth = 'md';\r\n #bottomSheetRef!: MatBottomSheetRef<any>;\r\n #dialogRef!: MatDialogRef<any>;\r\n\r\n #dialog = inject(MatDialog);\r\n #bottomSheet = inject(MatBottomSheet);\r\n #destroyRef = inject(DestroyRef);\r\n\r\n constructor() {\r\n this.#isMobile = BrowserUtilities.isMobile();\r\n }\r\n\r\n #resolveWidth(): string {\r\n const w = this.width() \|\| '80vw';\r\n if (this.#isMobile) return w;\r\n switch (w) {\r\n case 'lg': return '80vw';\r\n case 'md': return '60vw';\r\n case 'sm': return '40vw';\r\n case 'sx': return '20vw';\r\n default: return w;\r\n }\r\n }\r\n\r\n open = (): void => {\r\n if (this.isOpened()) {\r\n return;\r\n }\r\n this.alreadyOpened.set(true);\r\n this.isOpened.set(true);\r\n this.#resolvedWidth = this.#resolveWidth();\r\n\r\n if ((!this.view() && this.#isMobile) \|\| this.view() === 'bottom-sheet') {\r\n this.#bottomSheetRef = this.#bottomSheet.open(this.templateRef(), {\r\n panelClass: this.modalClass() as string \| string[],\r\n disableClose: this.disableBackdropClose()\r\n });\r\n this.#bottomSheetRef.afterDismissed()\r\n .pipe(takeUntilDestroyed(this.#destroyRef))\r\n .subscribe(() => {\r\n this.isOpened.set(false);\r\n this.sdClosed.emit();\r\n });\r\n } else {\r\n this.#dialogRef = this.#dialog.open(this.templateRef(), {\r\n width: this.#resolvedWidth,\r\n maxWidth: this.#resolvedWidth,\r\n panelClass: this.modalClass() as string \| string[],\r\n disableClose: this.disableBackdropClose(),\r\n });\r\n this.#dialogRef.afterClosed()\r\n .pipe(takeUntilDestroyed(this.#destroyRef))\r\n .subscribe(() => {\r\n this.isOpened.set(false);\r\n this.sdClosed.emit();\r\n });\r\n }\r\n };\r\n\r\n close = (): void => {\r\n this.#bottomSheetRef?.dismiss();\r\n this.#dialogRef?.close();\r\n };\r\n}\r\n","<ng-template #templateRef>\r\n <div class=\"sd-modal-root\"\r\n [attr.data-autoId]=\"autoId()\"\r\n [attr.data-opened]=\"dataOpened()\">\r\n @if (!lazyLoadContent() \|\| alreadyOpened()) {\r\n <!-- Header -->\r\n <!-- Dùng scss thuần -->\r\n @if (title()) {\r\n <div class=\"d-flex align-items-center p-16\">\r\n <ng-content select=\"[sdHeaderLeft]\">\r\n <div class=\"T18M\">{{ title() }}</div>\r\n </ng-content>\r\n <div class=\"d-flex align-items-center ml-auto\">\r\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n <ng-content select=\"[sdHeader]\"></ng-content>\r\n @if (!hideClose()) {\r\n <button\r\n type=\"button\"\r\n class=\"sd-modal-close-btn\"\r\n aria-label=\"Close\"\r\n (click)=\"close()\"\r\n [attr.data-autoId]=\"closeButtonAutoId()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- <mat-divider></mat-divider> -->\r\n <!-- Body -->\r\n <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\r\n <ng-content></ng-content>\r\n </div>\r\n <!-- Footer -->\r\n <!-- <mat-divider></mat-divider> -->\r\n <div class=\"d-flex align-items-center p-8\" #footer>\r\n <ng-content select=\"[sdFooterLeft]\"></ng-content>\r\n <div class=\"ml-auto\">\r\n <ng-content select=\"[sdFooterRight]\"></ng-content>\r\n <ng-content select=\"[sdFooter]\"></ng-content>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"sd-angular-core-components-modal.mjs","sources":["../../../projects/sd-angular/components/modal/src/modal.component.ts","../../../projects/sd-angular/components/modal/src/modal.component.html","../../../projects/sd-angular/components/modal/sd-angular-core-components-modal.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport {\r\n ChangeDetectionStrategy,\r\n Component,\r\n DestroyRef,\r\n ElementRef,\r\n TemplateRef,\r\n booleanAttribute,\r\n computed,\r\n inject,\r\n input,\r\n output,\r\n signal,\r\n viewChild\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { MatBottomSheet, MatBottomSheetModule, MatBottomSheetRef } from '@angular/material/bottom-sheet';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';\r\nimport { MatDividerModule } from '@angular/material/divider';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { BrowserUtilities } from '@sdcorejs/utils/fns';\r\nimport { Color, Size } from '@sdcorejs/utils/models';\r\n\r\n@Component({\r\n selector: 'sd-modal',\r\n templateUrl: './modal.component.html',\r\n styleUrl: './modal.component.scss',\r\n // encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true,\r\n imports: [CommonModule, MatIconModule, MatBottomSheetModule, MatDialogModule, MatDividerModule, MatButtonModule],\r\n})\r\nexport class SdModal {\r\n static index = signal(0);\r\n\r\n templateRef = viewChild.required<TemplateRef<any>>('templateRef');\r\n modal = viewChild<ElementRef>('modal');\r\n\r\n // autoId prefix `modal-`. Lưu ý: footer/body buttons render qua <ng-content> nên consumer phải\r\n // tự đặt [attr.data-autoId] cho các nút đó. Component chỉ tự bind autoId cho NÚT ĐÓNG (X icon).\r\n readonly autoIdInput = input<string \| undefined \| null>(undefined, { alias: 'autoId' });\r\n readonly autoId = computed(() => (this.autoIdInput() ? `components-modal-${this.autoIdInput()}` : undefined));\r\n readonly closeButtonAutoId = computed(() => (this.autoId() ? `${this.autoId()}-close` : undefined));\r\n readonly dataOpened = computed(() => (this.isOpened() ? 'true' : 'false'));\r\n\r\n title = input<string, string \| null \| undefined>('', { transform: (v) => v ?? '' });\r\n color = input<Color, Color \| null \| undefined>('primary', { transform: (v) => v ?? 'primary' });\r\n width = input<Size \| string, Size \| string \| null \| undefined>('md', { transform: (v) => v ?? 'md' });\r\n height = input<string, string \| null \| undefined>('auto', { transform: (v) => v ?? 'auto' });\r\n view = input<'dialog' \| 'bottom-sheet' \| undefined, 'dialog' \| 'bottom-sheet' \| null \| undefined>(undefined, { transform: (v) => v ?? undefined });\r\n modalClass = input<string \| string[] \| Record<string, boolean>, string \| string[] \| Record<string, boolean> \| null \| undefined>('', { transform: (v) => v ?? '' });\r\n lazyLoadContent = input(true, { transform: booleanAttribute });\r\n hideClose = input<boolean, boolean \| ''>(false, { transform: booleanAttribute });\r\n disableBackdropClose = input<boolean, boolean \| ''>(true, { transform: booleanAttribute }); // default to true to keep backward compatibility\r\n\r\n sdClosed = output<void>();\r\n\r\n isOpened = signal(false);\r\n alreadyOpened = signal(false);\r\n\r\n #isMobile = false;\r\n #resolvedWidth = 'md';\r\n #bottomSheetRef!: MatBottomSheetRef<any>;\r\n #dialogRef!: MatDialogRef<any>;\r\n\r\n #dialog = inject(MatDialog);\r\n #bottomSheet = inject(MatBottomSheet);\r\n #destroyRef = inject(DestroyRef);\r\n\r\n constructor() {\r\n this.#isMobile = BrowserUtilities.isMobile();\r\n }\r\n\r\n #resolveWidth(): string {\r\n const w = this.width() \|\| '80vw';\r\n if (this.#isMobile) return w;\r\n switch (w) {\r\n case 'lg': return '80vw';\r\n case 'md': return '60vw';\r\n case 'sm': return '40vw';\r\n case 'sx': return '20vw';\r\n default: return w;\r\n }\r\n }\r\n\r\n open = (): void => {\r\n if (this.isOpened()) {\r\n return;\r\n }\r\n this.alreadyOpened.set(true);\r\n this.isOpened.set(true);\r\n this.#resolvedWidth = this.#resolveWidth();\r\n\r\n if ((!this.view() && this.#isMobile) \|\| this.view() === 'bottom-sheet') {\r\n this.#bottomSheetRef = this.#bottomSheet.open(this.templateRef(), {\r\n panelClass: this.modalClass() as string \| string[],\r\n disableClose: this.disableBackdropClose()\r\n });\r\n this.#bottomSheetRef.afterDismissed()\r\n .pipe(takeUntilDestroyed(this.#destroyRef))\r\n .subscribe(() => {\r\n this.isOpened.set(false);\r\n this.sdClosed.emit();\r\n });\r\n } else {\r\n this.#dialogRef = this.#dialog.open(this.templateRef(), {\r\n width: this.#resolvedWidth,\r\n maxWidth: this.#resolvedWidth,\r\n panelClass: this.modalClass() as string \| string[],\r\n disableClose: this.disableBackdropClose(),\r\n });\r\n this.#dialogRef.afterClosed()\r\n .pipe(takeUntilDestroyed(this.#destroyRef))\r\n .subscribe(() => {\r\n this.isOpened.set(false);\r\n this.sdClosed.emit();\r\n });\r\n }\r\n };\r\n\r\n close = (): void => {\r\n this.#bottomSheetRef?.dismiss();\r\n this.#dialogRef?.close();\r\n };\r\n}\r\n","<ng-template #templateRef>\r\n <div class=\"sd-modal-root\"\r\n [attr.data-autoId]=\"autoId()\"\r\n [attr.data-opened]=\"dataOpened()\">\r\n @if (!lazyLoadContent() \|\| alreadyOpened()) {\r\n <!-- Header -->\r\n <!-- Dùng scss thuần -->\r\n @if (title()) {\r\n <div class=\"d-flex align-items-center p-16\">\r\n <ng-content select=\"[sdHeaderLeft]\">\r\n <div class=\"T18M\">{{ title() }}</div>\r\n </ng-content>\r\n <div class=\"d-flex align-items-center ml-auto\">\r\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\n <ng-content select=\"[sdHeader]\"></ng-content>\n @if (!hideClose()) {\n <button\n type=\"button\"\n class=\"sd-modal-close-btn\"\n aria-label=\"Close\"\n (click)=\"close()\"\n [attr.data-autoId]=\"closeButtonAutoId()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </div>\n </div>\n }\n <!-- <mat-divider></mat-divider> -->\r\n <!-- Body -->\r\n <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\r\n <ng-content></ng-content>\r\n </div>\r\n <!-- Footer -->\r\n <!-- <mat-divider></mat-divider> -->\r\n <div class=\"d-flex align-items-center p-8\" #footer>\r\n <ng-content select=\"[sdFooterLeft]\"></ng-content>\r\n <div class=\"ml-auto\">\r\n <ng-content select=\"[sdFooterRight]\"></ng-content>\r\n <ng-content select=\"[sdFooter]\"></ng-content>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sd-angular-core-components-org-chart.mjs CHANGED Viewed

@@ -93,13 +93,13 @@ class SdOrgChart {
         return this.#itemKey(item).replace(/[^a-zA-Z0-9_-]/g, '-');
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdOrgChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdOrgChart, isStandalone: true, selector: "sd-org-chart", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-autoid": "autoId()" } }, queries: [{ propertyName: "itemDef", first: true, predicate: SdOrgChartItemDefDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@let _resolvedItems = resolvedItems();\r\n@let _resolvedItemTemplate = resolvedItemTemplate();\r\n\r\n<div class=\"sd-org-chart\" role=\"tree\">\r\n  <ul class=\"sd-org-chart__tree\">\r\n    @for (item of _resolvedItems; track trackByItem($index, item)) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item, item: item, depth: 0, parent: null, templateRef: _resolvedItemTemplate }\" />\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n<ng-template #nodeTemplate let-item let-depth=\"depth\" let-parent=\"parent\" let-templateRef=\"templateRef\">\r\n  @let _children = childrenOf(item);\r\n  @let _hasChildren = _children.length > 0;\r\n  @let _expanded = isExpanded(item);\r\n  @let _context = createContext(item, depth, parent);\r\n\r\n  <li\r\n    class=\"sd-org-chart__node\"\r\n    [class.sd-org-chart__node--expanded]=\"_hasChildren && _expanded\"\r\n    [class.sd-org-chart__node--collapsed]=\"_hasChildren && !_expanded\"\r\n    role=\"treeitem\"\r\n    [attr.aria-expanded]=\"_hasChildren ? _expanded : null\">\r\n    <div class=\"sd-org-chart__node-shell\">\r\n      <div\r\n        class=\"sd-org-chart__card\"\r\n        [class.sd-org-chart__card--no-image]=\"!item.image\"\r\n        [class.sd-org-chart__card--compact]=\"!item.image && !item.description\"\r\n        [attr.data-node-id]=\"item.id\"\r\n        [attr.data-autoid]=\"nodeAutoId(item, 'node')\"\r\n        [attr.data-depth]=\"depth\"\r\n        [style.--sd-org-node-color]=\"item.color || null\">\r\n        @if (templateRef) {\r\n          <ng-container *ngTemplateOutlet=\"templateRef; context: _context\" />\r\n        } @else {\r\n          @if (item.image) {\r\n            <img class=\"sd-org-chart__image\" [src]=\"item.image\" [alt]=\"item.title\" [attr.data-autoid]=\"nodeAutoId(item, 'image')\" />\r\n          }\r\n          <div class=\"sd-org-chart__title\" [attr.data-autoid]=\"nodeAutoId(item, 'title')\">{{ item.title }}</div>\r\n          @if (item.description) {\r\n            <div class=\"sd-org-chart__description\" [attr.data-autoid]=\"nodeAutoId(item, 'description')\">{{ item.description }}</div>\r\n          }\r\n        }\r\n      </div>\r\n\r\n      @if (_hasChildren && collapsible()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"sd-org-chart__toggle\"\r\n          [attr.aria-label]=\"_expanded ? 'Collapse children' : 'Expand children'\"\r\n          [attr.aria-expanded]=\"_expanded\"\r\n          [attr.data-autoid]=\"nodeAutoId(item, 'toggle')\"\r\n          (click)=\"toggle(item, $event)\">\r\n          <mat-icon>{{ _expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    @if (_hasChildren && _expanded) {\r\n      <ul class=\"sd-org-chart__children\" role=\"group\">\r\n        @for (child of _children; track trackByItem($index, child)) {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              nodeTemplate;\r\n              context: { $implicit: child, item: child, depth: depth + 1, parent: item, templateRef: templateRef }\r\n            \" />\r\n        }\r\n      </ul>\r\n    }\r\n  </li>\r\n</ng-template>\r\n", styles: [":host{--sd-org-line: #d9e2ef;--sd-org-card-bg: #ffffff;--sd-org-text: #102047;--sd-org-text-muted: #4d5b73;--sd-org-shadow: 0 8px 20px rgba(24, 39, 75, .08);--sd-org-gap-x: 20px;--sd-org-gap-y: 32px;display:block;overflow-x:auto;overflow-y:hidden;padding:8px 0 12px}.sd-org-chart{display:inline-block;min-width:100%;padding:8px 16px 0}.sd-org-chart__tree,.sd-org-chart__children{display:flex;justify-content:center;align-items:flex-start;margin:0;padding:0;list-style:none}.sd-org-chart__node{position:relative;flex:0 0 auto;padding:var(--sd-org-gap-y) var(--sd-org-gap-x) 0;text-align:center}.sd-org-chart__tree>.sd-org-chart__node{padding-top:0}.sd-org-chart__children>.sd-org-chart__node:before,.sd-org-chart__children>.sd-org-chart__node:after{position:absolute;top:0;width:50%;height:calc(var(--sd-org-gap-y) / 2);border-top:1px solid var(--sd-org-line);content:\"\"}.sd-org-chart__children>.sd-org-chart__node:before{right:50%}.sd-org-chart__children>.sd-org-chart__node:after{left:50%}.sd-org-chart__children>.sd-org-chart__node:first-child:before,.sd-org-chart__children>.sd-org-chart__node:last-child:after{border-top:0}.sd-org-chart__children>.sd-org-chart__node:only-child{padding-top:calc(var(--sd-org-gap-y) / 2)}.sd-org-chart__children>.sd-org-chart__node:only-child:before,.sd-org-chart__children>.sd-org-chart__node:only-child:after{display:none}.sd-org-chart__node-shell{position:relative;display:flex;flex-direction:column;align-items:center}.sd-org-chart__children>.sd-org-chart__node>.sd-org-chart__node-shell:before{position:absolute;top:calc(var(--sd-org-gap-y) * -1);left:50%;width:0;height:var(--sd-org-gap-y);border-left:1px solid var(--sd-org-line);content:\"\"}.sd-org-chart__tree>.sd-org-chart__node>.sd-org-chart__node-shell:before{display:none}.sd-org-chart__card{position:relative;z-index:1;min-width:128px;min-height:110px;box-sizing:border-box;padding:16px 14px 14px;color:var(--sd-org-text);background:var(--sd-org-node-color, var(--sd-org-card-bg));border:1px solid color-mix(in srgb,var(--sd-org-node-color, var(--sd-org-line)) 36%,var(--sd-org-line));border-radius:6px;box-shadow:var(--sd-org-shadow)}.sd-org-chart__card--compact{min-width:74px;min-height:40px;padding:10px 16px}.sd-org-chart__card--no-image:not(.sd-org-chart__card--compact){min-height:78px}.sd-org-chart__image{display:block;width:44px;height:44px;margin:0 auto 10px;object-fit:cover;border-radius:50%}.sd-org-chart__title{max-width:150px;margin:0 auto;overflow-wrap:anywhere;font-size:14px;font-weight:700;line-height:1.35}.sd-org-chart__description{max-width:150px;margin:5px auto 0;overflow-wrap:anywhere;color:var(--sd-org-text-muted);font-size:13px;line-height:1.3}.sd-org-chart__toggle{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:-1px;padding:0;color:#52708f;background:#fff;border:1px solid var(--sd-org-line);border-radius:50%;cursor:pointer}.sd-org-chart__toggle:hover{background:#f4f7fb}.sd-org-chart__toggle:focus-visible{outline:2px solid var(--sd-primary, #2a66f4);outline-offset:2px}.sd-org-chart__toggle mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdOrgChart, isStandalone: true, selector: "sd-org-chart", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-autoid": "autoId()" } }, queries: [{ propertyName: "itemDef", first: true, predicate: SdOrgChartItemDefDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@let _resolvedItems = resolvedItems();\n@let _resolvedItemTemplate = resolvedItemTemplate();\r\n\r\n<div class=\"sd-org-chart\" role=\"tree\">\r\n  <ul class=\"sd-org-chart__tree\">\r\n    @for (item of _resolvedItems; track trackByItem($index, item)) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item, item: item, depth: 0, parent: null, templateRef: _resolvedItemTemplate }\" />\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n<ng-template #nodeTemplate let-item let-depth=\"depth\" let-parent=\"parent\" let-templateRef=\"templateRef\">\r\n  @let _children = childrenOf(item);\r\n  @let _hasChildren = _children.length > 0;\r\n  @let _expanded = isExpanded(item);\r\n  @let _context = createContext(item, depth, parent);\r\n\r\n  <li\r\n    class=\"sd-org-chart__node\"\r\n    [class.sd-org-chart__node--expanded]=\"_hasChildren && _expanded\"\r\n    [class.sd-org-chart__node--collapsed]=\"_hasChildren && !_expanded\"\r\n    role=\"treeitem\"\r\n    [attr.aria-expanded]=\"_hasChildren ? _expanded : null\">\r\n    <div class=\"sd-org-chart__node-shell\">\r\n      <div\r\n        class=\"sd-org-chart__card\"\r\n        [class.sd-org-chart__card--no-image]=\"!item.image\"\r\n        [class.sd-org-chart__card--compact]=\"!item.image && !item.description\"\r\n        [attr.data-node-id]=\"item.id\"\r\n        [attr.data-autoid]=\"nodeAutoId(item, 'node')\"\r\n        [attr.data-depth]=\"depth\"\r\n        [style.--sd-org-node-color]=\"item.color || null\">\r\n        @if (templateRef) {\r\n          <ng-container *ngTemplateOutlet=\"templateRef; context: _context\" />\r\n        } @else {\r\n          @if (item.image) {\r\n            <img class=\"sd-org-chart__image\" [src]=\"item.image\" [alt]=\"item.title\" [attr.data-autoid]=\"nodeAutoId(item, 'image')\" />\r\n          }\r\n          <div class=\"sd-org-chart__title\" [attr.data-autoid]=\"nodeAutoId(item, 'title')\">{{ item.title }}</div>\r\n          @if (item.description) {\r\n            <div class=\"sd-org-chart__description\" [attr.data-autoid]=\"nodeAutoId(item, 'description')\">{{ item.description }}</div>\r\n          }\r\n        }\r\n      </div>\r\n\r\n      @if (_hasChildren && collapsible()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"sd-org-chart__toggle\"\r\n          [attr.aria-label]=\"_expanded ? 'Collapse children' : 'Expand children'\"\r\n          [attr.aria-expanded]=\"_expanded\"\r\n          [attr.data-autoid]=\"nodeAutoId(item, 'toggle')\"\r\n          (click)=\"toggle(item, $event)\">\r\n          <mat-icon>{{ _expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    @if (_hasChildren && _expanded) {\r\n      <ul class=\"sd-org-chart__children\" role=\"group\">\r\n        @for (child of _children; track trackByItem($index, child)) {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              nodeTemplate;\r\n              context: { $implicit: child, item: child, depth: depth + 1, parent: item, templateRef: templateRef }\r\n            \" />\r\n        }\r\n      </ul>\r\n    }\r\n  </li>\r\n</ng-template>\r\n", styles: [":host{--sd-org-line: #d9e2ef;--sd-org-card-bg: #ffffff;--sd-org-text: #102047;--sd-org-text-muted: #4d5b73;--sd-org-shadow: 0 8px 20px rgba(24, 39, 75, .08);--sd-org-gap-x: 20px;--sd-org-gap-y: 32px;display:block;overflow-x:auto;overflow-y:hidden;padding:8px 0 12px}.sd-org-chart{display:inline-block;min-width:100%;padding:8px 16px 0}.sd-org-chart__tree,.sd-org-chart__children{display:flex;justify-content:center;align-items:flex-start;margin:0;padding:0;list-style:none}.sd-org-chart__node{position:relative;flex:0 0 auto;padding:var(--sd-org-gap-y) var(--sd-org-gap-x) 0;text-align:center}.sd-org-chart__tree>.sd-org-chart__node{padding-top:0}.sd-org-chart__children>.sd-org-chart__node:before,.sd-org-chart__children>.sd-org-chart__node:after{position:absolute;top:0;width:50%;height:calc(var(--sd-org-gap-y) / 2);border-top:1px solid var(--sd-org-line);content:\"\"}.sd-org-chart__children>.sd-org-chart__node:before{right:50%}.sd-org-chart__children>.sd-org-chart__node:after{left:50%}.sd-org-chart__children>.sd-org-chart__node:first-child:before,.sd-org-chart__children>.sd-org-chart__node:last-child:after{border-top:0}.sd-org-chart__children>.sd-org-chart__node:only-child{padding-top:calc(var(--sd-org-gap-y) / 2)}.sd-org-chart__children>.sd-org-chart__node:only-child:before,.sd-org-chart__children>.sd-org-chart__node:only-child:after{display:none}.sd-org-chart__node-shell{position:relative;display:flex;flex-direction:column;align-items:center}.sd-org-chart__children>.sd-org-chart__node>.sd-org-chart__node-shell:before{position:absolute;top:calc(var(--sd-org-gap-y) * -1);left:50%;width:0;height:var(--sd-org-gap-y);border-left:1px solid var(--sd-org-line);content:\"\"}.sd-org-chart__tree>.sd-org-chart__node>.sd-org-chart__node-shell:before{display:none}.sd-org-chart__card{position:relative;z-index:1;min-width:128px;min-height:110px;box-sizing:border-box;padding:16px 14px 14px;color:var(--sd-org-text);background:var(--sd-org-node-color, var(--sd-org-card-bg));border:1px solid color-mix(in srgb,var(--sd-org-node-color, var(--sd-org-line)) 36%,var(--sd-org-line));border-radius:6px;box-shadow:var(--sd-org-shadow)}.sd-org-chart__card--compact{min-width:74px;min-height:40px;padding:10px 16px}.sd-org-chart__card--no-image:not(.sd-org-chart__card--compact){min-height:78px}.sd-org-chart__image{display:block;width:44px;height:44px;margin:0 auto 10px;object-fit:cover;border-radius:50%}.sd-org-chart__title{max-width:150px;margin:0 auto;overflow-wrap:anywhere;font-size:14px;font-weight:700;line-height:1.35}.sd-org-chart__description{max-width:150px;margin:5px auto 0;overflow-wrap:anywhere;color:var(--sd-org-text-muted);font-size:13px;line-height:1.3}.sd-org-chart__toggle{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:-1px;padding:0;color:#52708f;background:#fff;border:1px solid var(--sd-org-line);border-radius:50%;cursor:pointer}.sd-org-chart__toggle:hover{background:#f4f7fb}.sd-org-chart__toggle:focus-visible{outline:2px solid var(--sd-primary, #2a66f4);outline-offset:2px}.sd-org-chart__toggle mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdOrgChart, decorators: [{
             type: Component,
             args: [{ selector: 'sd-org-chart', standalone: true, imports: [CommonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.data-autoid]': 'autoId()',
-                    }, template: "@let _resolvedItems = resolvedItems();\r\n@let _resolvedItemTemplate = resolvedItemTemplate();\r\n\r\n<div class=\"sd-org-chart\" role=\"tree\">\r\n  <ul class=\"sd-org-chart__tree\">\r\n    @for (item of _resolvedItems; track trackByItem($index, item)) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item, item: item, depth: 0, parent: null, templateRef: _resolvedItemTemplate }\" />\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n<ng-template #nodeTemplate let-item let-depth=\"depth\" let-parent=\"parent\" let-templateRef=\"templateRef\">\r\n  @let _children = childrenOf(item);\r\n  @let _hasChildren = _children.length > 0;\r\n  @let _expanded = isExpanded(item);\r\n  @let _context = createContext(item, depth, parent);\r\n\r\n  <li\r\n    class=\"sd-org-chart__node\"\r\n    [class.sd-org-chart__node--expanded]=\"_hasChildren && _expanded\"\r\n    [class.sd-org-chart__node--collapsed]=\"_hasChildren && !_expanded\"\r\n    role=\"treeitem\"\r\n    [attr.aria-expanded]=\"_hasChildren ? _expanded : null\">\r\n    <div class=\"sd-org-chart__node-shell\">\r\n      <div\r\n        class=\"sd-org-chart__card\"\r\n        [class.sd-org-chart__card--no-image]=\"!item.image\"\r\n        [class.sd-org-chart__card--compact]=\"!item.image && !item.description\"\r\n        [attr.data-node-id]=\"item.id\"\r\n        [attr.data-autoid]=\"nodeAutoId(item, 'node')\"\r\n        [attr.data-depth]=\"depth\"\r\n        [style.--sd-org-node-color]=\"item.color || null\">\r\n        @if (templateRef) {\r\n          <ng-container *ngTemplateOutlet=\"templateRef; context: _context\" />\r\n        } @else {\r\n          @if (item.image) {\r\n            <img class=\"sd-org-chart__image\" [src]=\"item.image\" [alt]=\"item.title\" [attr.data-autoid]=\"nodeAutoId(item, 'image')\" />\r\n          }\r\n          <div class=\"sd-org-chart__title\" [attr.data-autoid]=\"nodeAutoId(item, 'title')\">{{ item.title }}</div>\r\n          @if (item.description) {\r\n            <div class=\"sd-org-chart__description\" [attr.data-autoid]=\"nodeAutoId(item, 'description')\">{{ item.description }}</div>\r\n          }\r\n        }\r\n      </div>\r\n\r\n      @if (_hasChildren && collapsible()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"sd-org-chart__toggle\"\r\n          [attr.aria-label]=\"_expanded ? 'Collapse children' : 'Expand children'\"\r\n          [attr.aria-expanded]=\"_expanded\"\r\n          [attr.data-autoid]=\"nodeAutoId(item, 'toggle')\"\r\n          (click)=\"toggle(item, $event)\">\r\n          <mat-icon>{{ _expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    @if (_hasChildren && _expanded) {\r\n      <ul class=\"sd-org-chart__children\" role=\"group\">\r\n        @for (child of _children; track trackByItem($index, child)) {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              nodeTemplate;\r\n              context: { $implicit: child, item: child, depth: depth + 1, parent: item, templateRef: templateRef }\r\n            \" />\r\n        }\r\n      </ul>\r\n    }\r\n  </li>\r\n</ng-template>\r\n", styles: [":host{--sd-org-line: #d9e2ef;--sd-org-card-bg: #ffffff;--sd-org-text: #102047;--sd-org-text-muted: #4d5b73;--sd-org-shadow: 0 8px 20px rgba(24, 39, 75, .08);--sd-org-gap-x: 20px;--sd-org-gap-y: 32px;display:block;overflow-x:auto;overflow-y:hidden;padding:8px 0 12px}.sd-org-chart{display:inline-block;min-width:100%;padding:8px 16px 0}.sd-org-chart__tree,.sd-org-chart__children{display:flex;justify-content:center;align-items:flex-start;margin:0;padding:0;list-style:none}.sd-org-chart__node{position:relative;flex:0 0 auto;padding:var(--sd-org-gap-y) var(--sd-org-gap-x) 0;text-align:center}.sd-org-chart__tree>.sd-org-chart__node{padding-top:0}.sd-org-chart__children>.sd-org-chart__node:before,.sd-org-chart__children>.sd-org-chart__node:after{position:absolute;top:0;width:50%;height:calc(var(--sd-org-gap-y) / 2);border-top:1px solid var(--sd-org-line);content:\"\"}.sd-org-chart__children>.sd-org-chart__node:before{right:50%}.sd-org-chart__children>.sd-org-chart__node:after{left:50%}.sd-org-chart__children>.sd-org-chart__node:first-child:before,.sd-org-chart__children>.sd-org-chart__node:last-child:after{border-top:0}.sd-org-chart__children>.sd-org-chart__node:only-child{padding-top:calc(var(--sd-org-gap-y) / 2)}.sd-org-chart__children>.sd-org-chart__node:only-child:before,.sd-org-chart__children>.sd-org-chart__node:only-child:after{display:none}.sd-org-chart__node-shell{position:relative;display:flex;flex-direction:column;align-items:center}.sd-org-chart__children>.sd-org-chart__node>.sd-org-chart__node-shell:before{position:absolute;top:calc(var(--sd-org-gap-y) * -1);left:50%;width:0;height:var(--sd-org-gap-y);border-left:1px solid var(--sd-org-line);content:\"\"}.sd-org-chart__tree>.sd-org-chart__node>.sd-org-chart__node-shell:before{display:none}.sd-org-chart__card{position:relative;z-index:1;min-width:128px;min-height:110px;box-sizing:border-box;padding:16px 14px 14px;color:var(--sd-org-text);background:var(--sd-org-node-color, var(--sd-org-card-bg));border:1px solid color-mix(in srgb,var(--sd-org-node-color, var(--sd-org-line)) 36%,var(--sd-org-line));border-radius:6px;box-shadow:var(--sd-org-shadow)}.sd-org-chart__card--compact{min-width:74px;min-height:40px;padding:10px 16px}.sd-org-chart__card--no-image:not(.sd-org-chart__card--compact){min-height:78px}.sd-org-chart__image{display:block;width:44px;height:44px;margin:0 auto 10px;object-fit:cover;border-radius:50%}.sd-org-chart__title{max-width:150px;margin:0 auto;overflow-wrap:anywhere;font-size:14px;font-weight:700;line-height:1.35}.sd-org-chart__description{max-width:150px;margin:5px auto 0;overflow-wrap:anywhere;color:var(--sd-org-text-muted);font-size:13px;line-height:1.3}.sd-org-chart__toggle{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:-1px;padding:0;color:#52708f;background:#fff;border:1px solid var(--sd-org-line);border-radius:50%;cursor:pointer}.sd-org-chart__toggle:hover{background:#f4f7fb}.sd-org-chart__toggle:focus-visible{outline:2px solid var(--sd-primary, #2a66f4);outline-offset:2px}.sd-org-chart__toggle mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"] }]
+                    }, template: "@let _resolvedItems = resolvedItems();\n@let _resolvedItemTemplate = resolvedItemTemplate();\r\n\r\n<div class=\"sd-org-chart\" role=\"tree\">\r\n  <ul class=\"sd-org-chart__tree\">\r\n    @for (item of _resolvedItems; track trackByItem($index, item)) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item, item: item, depth: 0, parent: null, templateRef: _resolvedItemTemplate }\" />\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n<ng-template #nodeTemplate let-item let-depth=\"depth\" let-parent=\"parent\" let-templateRef=\"templateRef\">\r\n  @let _children = childrenOf(item);\r\n  @let _hasChildren = _children.length > 0;\r\n  @let _expanded = isExpanded(item);\r\n  @let _context = createContext(item, depth, parent);\r\n\r\n  <li\r\n    class=\"sd-org-chart__node\"\r\n    [class.sd-org-chart__node--expanded]=\"_hasChildren && _expanded\"\r\n    [class.sd-org-chart__node--collapsed]=\"_hasChildren && !_expanded\"\r\n    role=\"treeitem\"\r\n    [attr.aria-expanded]=\"_hasChildren ? _expanded : null\">\r\n    <div class=\"sd-org-chart__node-shell\">\r\n      <div\r\n        class=\"sd-org-chart__card\"\r\n        [class.sd-org-chart__card--no-image]=\"!item.image\"\r\n        [class.sd-org-chart__card--compact]=\"!item.image && !item.description\"\r\n        [attr.data-node-id]=\"item.id\"\r\n        [attr.data-autoid]=\"nodeAutoId(item, 'node')\"\r\n        [attr.data-depth]=\"depth\"\r\n        [style.--sd-org-node-color]=\"item.color || null\">\r\n        @if (templateRef) {\r\n          <ng-container *ngTemplateOutlet=\"templateRef; context: _context\" />\r\n        } @else {\r\n          @if (item.image) {\r\n            <img class=\"sd-org-chart__image\" [src]=\"item.image\" [alt]=\"item.title\" [attr.data-autoid]=\"nodeAutoId(item, 'image')\" />\r\n          }\r\n          <div class=\"sd-org-chart__title\" [attr.data-autoid]=\"nodeAutoId(item, 'title')\">{{ item.title }}</div>\r\n          @if (item.description) {\r\n            <div class=\"sd-org-chart__description\" [attr.data-autoid]=\"nodeAutoId(item, 'description')\">{{ item.description }}</div>\r\n          }\r\n        }\r\n      </div>\r\n\r\n      @if (_hasChildren && collapsible()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"sd-org-chart__toggle\"\r\n          [attr.aria-label]=\"_expanded ? 'Collapse children' : 'Expand children'\"\r\n          [attr.aria-expanded]=\"_expanded\"\r\n          [attr.data-autoid]=\"nodeAutoId(item, 'toggle')\"\r\n          (click)=\"toggle(item, $event)\">\r\n          <mat-icon>{{ _expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    @if (_hasChildren && _expanded) {\r\n      <ul class=\"sd-org-chart__children\" role=\"group\">\r\n        @for (child of _children; track trackByItem($index, child)) {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              nodeTemplate;\r\n              context: { $implicit: child, item: child, depth: depth + 1, parent: item, templateRef: templateRef }\r\n            \" />\r\n        }\r\n      </ul>\r\n    }\r\n  </li>\r\n</ng-template>\r\n", styles: [":host{--sd-org-line: #d9e2ef;--sd-org-card-bg: #ffffff;--sd-org-text: #102047;--sd-org-text-muted: #4d5b73;--sd-org-shadow: 0 8px 20px rgba(24, 39, 75, .08);--sd-org-gap-x: 20px;--sd-org-gap-y: 32px;display:block;overflow-x:auto;overflow-y:hidden;padding:8px 0 12px}.sd-org-chart{display:inline-block;min-width:100%;padding:8px 16px 0}.sd-org-chart__tree,.sd-org-chart__children{display:flex;justify-content:center;align-items:flex-start;margin:0;padding:0;list-style:none}.sd-org-chart__node{position:relative;flex:0 0 auto;padding:var(--sd-org-gap-y) var(--sd-org-gap-x) 0;text-align:center}.sd-org-chart__tree>.sd-org-chart__node{padding-top:0}.sd-org-chart__children>.sd-org-chart__node:before,.sd-org-chart__children>.sd-org-chart__node:after{position:absolute;top:0;width:50%;height:calc(var(--sd-org-gap-y) / 2);border-top:1px solid var(--sd-org-line);content:\"\"}.sd-org-chart__children>.sd-org-chart__node:before{right:50%}.sd-org-chart__children>.sd-org-chart__node:after{left:50%}.sd-org-chart__children>.sd-org-chart__node:first-child:before,.sd-org-chart__children>.sd-org-chart__node:last-child:after{border-top:0}.sd-org-chart__children>.sd-org-chart__node:only-child{padding-top:calc(var(--sd-org-gap-y) / 2)}.sd-org-chart__children>.sd-org-chart__node:only-child:before,.sd-org-chart__children>.sd-org-chart__node:only-child:after{display:none}.sd-org-chart__node-shell{position:relative;display:flex;flex-direction:column;align-items:center}.sd-org-chart__children>.sd-org-chart__node>.sd-org-chart__node-shell:before{position:absolute;top:calc(var(--sd-org-gap-y) * -1);left:50%;width:0;height:var(--sd-org-gap-y);border-left:1px solid var(--sd-org-line);content:\"\"}.sd-org-chart__tree>.sd-org-chart__node>.sd-org-chart__node-shell:before{display:none}.sd-org-chart__card{position:relative;z-index:1;min-width:128px;min-height:110px;box-sizing:border-box;padding:16px 14px 14px;color:var(--sd-org-text);background:var(--sd-org-node-color, var(--sd-org-card-bg));border:1px solid color-mix(in srgb,var(--sd-org-node-color, var(--sd-org-line)) 36%,var(--sd-org-line));border-radius:6px;box-shadow:var(--sd-org-shadow)}.sd-org-chart__card--compact{min-width:74px;min-height:40px;padding:10px 16px}.sd-org-chart__card--no-image:not(.sd-org-chart__card--compact){min-height:78px}.sd-org-chart__image{display:block;width:44px;height:44px;margin:0 auto 10px;object-fit:cover;border-radius:50%}.sd-org-chart__title{max-width:150px;margin:0 auto;overflow-wrap:anywhere;font-size:14px;font-weight:700;line-height:1.35}.sd-org-chart__description{max-width:150px;margin:5px auto 0;overflow-wrap:anywhere;color:var(--sd-org-text-muted);font-size:13px;line-height:1.3}.sd-org-chart__toggle{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:-1px;padding:0;color:#52708f;background:#fff;border:1px solid var(--sd-org-line);border-radius:50%;cursor:pointer}.sd-org-chart__toggle:hover{background:#f4f7fb}.sd-org-chart__toggle:focus-visible{outline:2px solid var(--sd-primary, #2a66f4);outline-offset:2px}.sd-org-chart__toggle mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"] }]
         }] });
 /**

package/fesm2022/sd-angular-core-components-org-chart.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-angular-core-components-org-chart.mjs","sources":["../../../projects/sd-angular/components/org-chart/src/org-chart-item-def.directive.ts","../../../projects/sd-angular/components/org-chart/src/org-chart.component.ts","../../../projects/sd-angular/components/org-chart/src/org-chart.component.html","../../../projects/sd-angular/components/org-chart/sd-angular-core-components-org-chart.ts"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\nimport { SdOrgChartItem, SdOrgChartItemContext } from './org-chart.model';\n\n@Directive({\n selector: '[sdOrgChartItemDef]',\n})\nexport class SdOrgChartItemDefDirective<T extends SdOrgChartItem = SdOrgChartItem> {\n static ngTemplateContextGuard<T extends SdOrgChartItem>(\n _dir: SdOrgChartItemDefDirective<T>,\n _ctx: unknown\n ): _ctx is SdOrgChartItemContext<T> {\n return true;\n }\n\n readonly templateRef: TemplateRef<SdOrgChartItemContext<T>> = inject(TemplateRef);\n}\n","import { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, TemplateRef, booleanAttribute, computed, contentChild, input, signal } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdOrgChartItemDefDirective } from './org-chart-item-def.directive';\r\nimport { SdOrgChartItem, SdOrgChartItemContext, SdOrgChartOption } from './org-chart.model';\r\n\r\n@Component({\r\n selector: 'sd-org-chart',\r\n standalone: true,\r\n imports: [CommonModule, MatIconModule],\r\n templateUrl: './org-chart.component.html',\r\n styleUrl: './org-chart.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n host: {\r\n '[attr.data-autoid]': 'autoId()',\r\n },\r\n})\r\nexport class SdOrgChart {\r\n readonly autoIdInput = input<string \| undefined \| null>(undefined, { alias: 'autoId' });\r\n readonly option = input<SdOrgChartOption \| undefined>(undefined);\r\n readonly autoId = computed(() => {\r\n const scope = this.option()?.autoId ?? this.autoIdInput();\r\n return scope ? `components-org-chart-${scope}` : undefined;\r\n });\r\n\r\n readonly items = input<SdOrgChartItem[] \| undefined>(undefined);\r\n readonly itemTemplate = input<TemplateRef<SdOrgChartItemContext> \| undefined \| null>(undefined);\r\n readonly collapsible = input(true, { transform: booleanAttribute });\r\n\r\n readonly itemDef = contentChild(SdOrgChartItemDefDirective);\r\n readonly resolvedItems = computed(() => this.option()?.items ?? this.items() ?? []);\r\n readonly resolvedCollapsible = computed(() => this.option()?.collapsible ?? this.collapsible());\r\n\r\n readonly resolvedItemTemplate = computed<TemplateRef<SdOrgChartItemContext> \| undefined>(() => {\r\n return this.itemDef()?.templateRef \|\| this.option()?.itemTemplate \|\| this.itemTemplate() \|\| undefined;\r\n });\r\n\r\n readonly #expandedState = signal<Record<string, boolean>>({});\r\n\r\n readonly trackByItem = (_index: number, item: SdOrgChartItem) => item.id;\r\n\r\n hasChildren = (item: SdOrgChartItem): boolean => {\r\n return this.childrenOf(item).length > 0;\r\n };\r\n\r\n childrenOf = (item: SdOrgChartItem): SdOrgChartItem[] => {\r\n return item.children \|\| [];\r\n };\r\n\r\n isExpanded = (item: SdOrgChartItem): boolean => {\r\n if (!this.resolvedCollapsible()) {\r\n return true;\r\n }\r\n\r\n const key = this.#itemKey(item);\r\n const state = this.#expandedState();\r\n return state[key] ?? item.expanded ?? true;\r\n };\r\n\r\n toggle = (item: SdOrgChartItem, event?: Event): void => {\r\n event?.stopPropagation();\r\n\r\n if (!this.resolvedCollapsible() \|\| !this.hasChildren(item)) {\r\n return;\r\n }\r\n\r\n const key = this.#itemKey(item);\r\n const expanded = !(this.#expandedState()[key] ?? item.expanded ?? true);\r\n this.#expandedState.update(state => ({\r\n ...state,\r\n [key]: expanded,\r\n }));\r\n this.option()?.onToggle?.({ item, expanded });\r\n };\r\n\r\n createContext = (item: SdOrgChartItem, depth: number, parent: SdOrgChartItem \| null): SdOrgChartItemContext => {\r\n const hasChildren = this.hasChildren(item);\r\n const expanded = this.isExpanded(item);\r\n\r\n return {\r\n $implicit: item,\r\n item,\r\n depth,\r\n parent,\r\n expanded,\r\n hasChildren,\r\n isLeaf: !hasChildren,\r\n toggle: () => this.toggle(item),\r\n };\r\n };\r\n\r\n nodeAutoId = (item: SdOrgChartItem, part: 'node' \| 'image' \| 'title' \| 'description' \| 'toggle'): string \| undefined => {\r\n const base = this.autoId();\r\n if (!base) {\r\n return undefined;\r\n }\r\n\r\n return `${base}-${part}-${this.#autoIdKey(item)}`;\r\n };\r\n\r\n #itemKey = (item: SdOrgChartItem): string => {\r\n return String(item.id);\r\n };\r\n\r\n #autoIdKey = (item: SdOrgChartItem): string => {\r\n return this.#itemKey(item).replace(/[^a-zA-Z0-9_-]/g, '-');\r\n };\r\n}\r\n","@let _resolvedItems = resolvedItems();\r\n@let _resolvedItemTemplate = resolvedItemTemplate();\r\n\r\n<div class=\"sd-org-chart\" role=\"tree\">\r\n <ul class=\"sd-org-chart__tree\">\r\n @for (item of _resolvedItems; track trackByItem($index, item)) {\r\n <ng-container\r\n ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item, item: item, depth: 0, parent: null, templateRef: _resolvedItemTemplate }\" />\r\n }\r\n </ul>\r\n</div>\r\n\r\n<ng-template #nodeTemplate let-item let-depth=\"depth\" let-parent=\"parent\" let-templateRef=\"templateRef\">\r\n @let _children = childrenOf(item);\r\n @let _hasChildren = _children.length > 0;\r\n @let _expanded = isExpanded(item);\r\n @let _context = createContext(item, depth, parent);\r\n\r\n <li\r\n class=\"sd-org-chart__node\"\r\n [class.sd-org-chart__node--expanded]=\"_hasChildren && _expanded\"\r\n [class.sd-org-chart__node--collapsed]=\"_hasChildren && !_expanded\"\r\n role=\"treeitem\"\r\n [attr.aria-expanded]=\"_hasChildren ? _expanded : null\">\r\n <div class=\"sd-org-chart__node-shell\">\r\n <div\r\n class=\"sd-org-chart__card\"\r\n [class.sd-org-chart__card--no-image]=\"!item.image\"\r\n [class.sd-org-chart__card--compact]=\"!item.image && !item.description\"\r\n [attr.data-node-id]=\"item.id\"\r\n [attr.data-autoid]=\"nodeAutoId(item, 'node')\"\r\n [attr.data-depth]=\"depth\"\r\n [style.--sd-org-node-color]=\"item.color \|\| null\">\r\n @if (templateRef) {\r\n <ng-container ngTemplateOutlet=\"templateRef; context: _context\" />\r\n } @else {\r\n @if (item.image) {\r\n <img class=\"sd-org-chart__image\" [src]=\"item.image\" [alt]=\"item.title\" [attr.data-autoid]=\"nodeAutoId(item, 'image')\" />\r\n }\r\n <div class=\"sd-org-chart__title\" [attr.data-autoid]=\"nodeAutoId(item, 'title')\">{{ item.title }}</div>\r\n @if (item.description) {\r\n <div class=\"sd-org-chart__description\" [attr.data-autoid]=\"nodeAutoId(item, 'description')\">{{ item.description }}</div>\r\n }\r\n }\r\n </div>\r\n\r\n @if (_hasChildren && collapsible()) {\r\n <button\r\n type=\"button\"\r\n class=\"sd-org-chart__toggle\"\r\n [attr.aria-label]=\"_expanded ? 'Collapse children' : 'Expand children'\"\r\n [attr.aria-expanded]=\"_expanded\"\r\n [attr.data-autoid]=\"nodeAutoId(item, 'toggle')\"\r\n (click)=\"toggle(item, $event)\">\r\n <mat-icon>{{ _expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n\r\n @if (_hasChildren && _expanded) {\r\n <ul class=\"sd-org-chart__children\" role=\"group\">\r\n @for (child of _children; track trackByItem($index, child)) {\r\n <ng-container\r\n ngTemplateOutlet=\"\r\n nodeTemplate;\r\n context: { $implicit: child, item: child, depth: depth + 1, parent: item, templateRef: templateRef }\r\n \" />\r\n }\r\n </ul>\r\n }\r\n </li>\r\n</ng-template>\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"sd-angular-core-components-org-chart.mjs","sources":["../../../projects/sd-angular/components/org-chart/src/org-chart-item-def.directive.ts","../../../projects/sd-angular/components/org-chart/src/org-chart.component.ts","../../../projects/sd-angular/components/org-chart/src/org-chart.component.html","../../../projects/sd-angular/components/org-chart/sd-angular-core-components-org-chart.ts"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\r\nimport { SdOrgChartItem, SdOrgChartItemContext } from './org-chart.model';\r\n\r\n@Directive({\r\n selector: '[sdOrgChartItemDef]',\r\n})\r\nexport class SdOrgChartItemDefDirective<T extends SdOrgChartItem = SdOrgChartItem> {\r\n static ngTemplateContextGuard<T extends SdOrgChartItem>(\r\n _dir: SdOrgChartItemDefDirective<T>,\r\n _ctx: unknown\r\n ): _ctx is SdOrgChartItemContext<T> {\r\n return true;\r\n }\r\n\r\n readonly templateRef: TemplateRef<SdOrgChartItemContext<T>> = inject(TemplateRef);\r\n}\r\n","import { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, TemplateRef, booleanAttribute, computed, contentChild, input, signal } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdOrgChartItemDefDirective } from './org-chart-item-def.directive';\r\nimport { SdOrgChartItem, SdOrgChartItemContext, SdOrgChartOption } from './org-chart.model';\n\r\n@Component({\r\n selector: 'sd-org-chart',\r\n standalone: true,\r\n imports: [CommonModule, MatIconModule],\r\n templateUrl: './org-chart.component.html',\r\n styleUrl: './org-chart.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n host: {\r\n '[attr.data-autoid]': 'autoId()',\r\n },\r\n})\r\nexport class SdOrgChart {\n readonly autoIdInput = input<string \| undefined \| null>(undefined, { alias: 'autoId' });\n readonly option = input<SdOrgChartOption \| undefined>(undefined);\n readonly autoId = computed(() => {\n const scope = this.option()?.autoId ?? this.autoIdInput();\n return scope ? `components-org-chart-${scope}` : undefined;\n });\n\n readonly items = input<SdOrgChartItem[] \| undefined>(undefined);\n readonly itemTemplate = input<TemplateRef<SdOrgChartItemContext> \| undefined \| null>(undefined);\n readonly collapsible = input(true, { transform: booleanAttribute });\n\n readonly itemDef = contentChild(SdOrgChartItemDefDirective);\n readonly resolvedItems = computed(() => this.option()?.items ?? this.items() ?? []);\n readonly resolvedCollapsible = computed(() => this.option()?.collapsible ?? this.collapsible());\n\n readonly resolvedItemTemplate = computed<TemplateRef<SdOrgChartItemContext> \| undefined>(() => {\n return this.itemDef()?.templateRef \|\| this.option()?.itemTemplate \|\| this.itemTemplate() \|\| undefined;\n });\n\r\n readonly #expandedState = signal<Record<string, boolean>>({});\r\n\r\n readonly trackByItem = (_index: number, item: SdOrgChartItem) => item.id;\r\n\r\n hasChildren = (item: SdOrgChartItem): boolean => {\r\n return this.childrenOf(item).length > 0;\r\n };\r\n\r\n childrenOf = (item: SdOrgChartItem): SdOrgChartItem[] => {\r\n return item.children \|\| [];\r\n };\r\n\r\n isExpanded = (item: SdOrgChartItem): boolean => {\r\n if (!this.resolvedCollapsible()) {\n return true;\r\n }\r\n\r\n const key = this.#itemKey(item);\r\n const state = this.#expandedState();\r\n return state[key] ?? item.expanded ?? true;\r\n };\r\n\r\n toggle = (item: SdOrgChartItem, event?: Event): void => {\r\n event?.stopPropagation();\r\n\r\n if (!this.resolvedCollapsible() \|\| !this.hasChildren(item)) {\n return;\n }\n\n const key = this.#itemKey(item);\n const expanded = !(this.#expandedState()[key] ?? item.expanded ?? true);\n this.#expandedState.update(state => ({\n ...state,\n [key]: expanded,\n }));\n this.option()?.onToggle?.({ item, expanded });\n };\n\r\n createContext = (item: SdOrgChartItem, depth: number, parent: SdOrgChartItem \| null): SdOrgChartItemContext => {\r\n const hasChildren = this.hasChildren(item);\r\n const expanded = this.isExpanded(item);\r\n\r\n return {\r\n $implicit: item,\r\n item,\r\n depth,\r\n parent,\r\n expanded,\r\n hasChildren,\r\n isLeaf: !hasChildren,\r\n toggle: () => this.toggle(item),\r\n };\r\n };\r\n\r\n nodeAutoId = (item: SdOrgChartItem, part: 'node' \| 'image' \| 'title' \| 'description' \| 'toggle'): string \| undefined => {\r\n const base = this.autoId();\r\n if (!base) {\r\n return undefined;\r\n }\r\n\r\n return `${base}-${part}-${this.#autoIdKey(item)}`;\r\n };\r\n\r\n #itemKey = (item: SdOrgChartItem): string => {\r\n return String(item.id);\r\n };\r\n\r\n #autoIdKey = (item: SdOrgChartItem): string => {\r\n return this.#itemKey(item).replace(/[^a-zA-Z0-9_-]/g, '-');\r\n };\r\n}\r\n","@let _resolvedItems = resolvedItems();\n@let _resolvedItemTemplate = resolvedItemTemplate();\r\n\r\n<div class=\"sd-org-chart\" role=\"tree\">\r\n <ul class=\"sd-org-chart__tree\">\r\n @for (item of _resolvedItems; track trackByItem($index, item)) {\r\n <ng-container\r\n ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item, item: item, depth: 0, parent: null, templateRef: _resolvedItemTemplate }\" />\r\n }\r\n </ul>\r\n</div>\r\n\r\n<ng-template #nodeTemplate let-item let-depth=\"depth\" let-parent=\"parent\" let-templateRef=\"templateRef\">\r\n @let _children = childrenOf(item);\r\n @let _hasChildren = _children.length > 0;\r\n @let _expanded = isExpanded(item);\r\n @let _context = createContext(item, depth, parent);\r\n\r\n <li\r\n class=\"sd-org-chart__node\"\r\n [class.sd-org-chart__node--expanded]=\"_hasChildren && _expanded\"\r\n [class.sd-org-chart__node--collapsed]=\"_hasChildren && !_expanded\"\r\n role=\"treeitem\"\r\n [attr.aria-expanded]=\"_hasChildren ? _expanded : null\">\r\n <div class=\"sd-org-chart__node-shell\">\r\n <div\r\n class=\"sd-org-chart__card\"\r\n [class.sd-org-chart__card--no-image]=\"!item.image\"\r\n [class.sd-org-chart__card--compact]=\"!item.image && !item.description\"\r\n [attr.data-node-id]=\"item.id\"\r\n [attr.data-autoid]=\"nodeAutoId(item, 'node')\"\r\n [attr.data-depth]=\"depth\"\r\n [style.--sd-org-node-color]=\"item.color \|\| null\">\r\n @if (templateRef) {\r\n <ng-container ngTemplateOutlet=\"templateRef; context: _context\" />\r\n } @else {\r\n @if (item.image) {\r\n <img class=\"sd-org-chart__image\" [src]=\"item.image\" [alt]=\"item.title\" [attr.data-autoid]=\"nodeAutoId(item, 'image')\" />\r\n }\r\n <div class=\"sd-org-chart__title\" [attr.data-autoid]=\"nodeAutoId(item, 'title')\">{{ item.title }}</div>\r\n @if (item.description) {\r\n <div class=\"sd-org-chart__description\" [attr.data-autoid]=\"nodeAutoId(item, 'description')\">{{ item.description }}</div>\r\n }\r\n }\r\n </div>\r\n\r\n @if (_hasChildren && collapsible()) {\r\n <button\r\n type=\"button\"\r\n class=\"sd-org-chart__toggle\"\r\n [attr.aria-label]=\"_expanded ? 'Collapse children' : 'Expand children'\"\r\n [attr.aria-expanded]=\"_expanded\"\r\n [attr.data-autoid]=\"nodeAutoId(item, 'toggle')\"\r\n (click)=\"toggle(item, $event)\">\r\n <mat-icon>{{ _expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n\r\n @if (_hasChildren && _expanded) {\r\n <ul class=\"sd-org-chart__children\" role=\"group\">\r\n @for (child of _children; track trackByItem($index, child)) {\r\n <ng-container\r\n ngTemplateOutlet=\"\r\n nodeTemplate;\r\n context: { $implicit: child, item: child, depth: depth + 1, parent: item, templateRef: templateRef }\r\n \" />\r\n }\r\n </ul>\r\n }\r\n </li>\r\n</ng-template>\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}