cmat 0.0.87 → 0.0.88

package/fesm2022/cmat-components-org-chart.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, HostBinding, forwardRef } from '@angular/core';
+import { input, output, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, HostBinding, forwardRef } from '@angular/core';
 import { NgClass } from '@angular/common';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
@@ -8,111 +8,96 @@ import { MatIconModule } from '@angular/material/icon';
 
 class CmatChartNodeComponent {
     constructor() {
-        this.direction = 'vertical';
-        this.detailsBtnClick = new EventEmitter();
-        this.connectorToParentHeight = '1em';
-        this.maxHeightEm = 19.2;
-    }
-    ngOnChanges(changes) {
-        if (changes.enableControlHeight) {
-            if (this.enableControlHeight && this.node.heightFactor) {
-                let newHeight = this.node.heightFactor * this.maxHeightEm;
-                if (this.node.heightFactor >= 2)
-                    newHeight -= this.node.heightFactor - 1;
-                this.connectorToParentHeight = `${newHeight}em`;
+        this.node = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+        this.hasParent = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "hasParent" }] : /* istanbul ignore next */ []));
+        this.enableControlHeight = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "enableControlHeight" }] : /* istanbul ignore next */ []));
+        this.direction = input('vertical', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+        this.detailsBtnTitle = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "detailsBtnTitle" }] : /* istanbul ignore next */ []));
+        this.detailsBtnClick = output();
+        this.containerClass = computed(() => `cmat-org-connector-${this.direction()} `, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containerClass" }] : /* istanbul ignore next */ []));
+        this.connectorToParentHeight = computed(() => {
+            const heightFactor = this.node().heightFactor;
+            if (this.enableControlHeight() && heightFactor !== undefined && heightFactor > 0) {
+                const maxHeightEm = 19.2;
+                let newHeight = heightFactor * maxHeightEm;
+                if (heightFactor >= 2) {
+                    newHeight -= heightFactor - 1;
+                }
+                return `${newHeight}em`;
             }
-        }
-        if (changes.direction) {
-            this.containerClass = `cmat-org-connector-${this.direction} `;
-        }
+            return '1em';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "connectorToParentHeight" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatChartNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatChartNodeComponent, isStandalone: true, selector: "cmat-org-chart-node", inputs: { node: "node", hasParent: "hasParent", enableControlHeight: "enableControlHeight", direction: "direction", detailsBtnTitle: "detailsBtnTitle" }, outputs: { detailsBtnClick: "detailsBtnClick" }, exportAs: ["cmatOrgChartNode"], usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n@if(hasParent){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass\" [style.height]=\"connectorToParentHeight\"></div>\r\n}\r\n<div class=\"cmat-org-box cmat-org-border cmat-org-background\" [ngClass]=\"node.cssClass\">\r\n    @if(node.image!==''){\r\n    <div class=\"cmat-org-image\" [style]=\"{ 'background-image': 'url(\\'' + node.image + '\\')' }\"\r\n        [style.border-color]=\"node.color\"></div>\r\n    }@else {\r\n    <div class=\"text-center\">\r\n        <mat-icon class=\"icon-size-16\" [svgIcon]=\"'heroicons_outline:user-circle'\">\r\n        </mat-icon>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"cmat-org-container\">\r\n        <div class=\"cmat-org-title\" [innerHTML]=\"node.title\" [style.color]=\"node.color\"></div>\r\n        <div class=\"cmat-org-name\" [innerHTML]=\"node.name\"></div>\r\n        \r\n        @if(node.showDetail){\r\n        <div class=\"button-container\">\r\n            <button matButton=\"filled\" class=\"cmat-org-btn cmat-org-btn-details\" color=\"primary\"\r\n                (click)=\"detailsBtnClick.emit(node)\">\r\n                {{ detailsBtnTitle }}\r\n            </button>\r\n        </div>\r\n        }\r\n    </div>\r\n<!-- eslint-enable @angular-eslint/template/no-inline-styles -->\r\n</div>\r\n@if(node.children.length){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass\"></div>\r\n}\r\n", styles: ["cmat-org-chart-node{display:flex;align-items:center}.cmat-org-box{width:16em;height:16em;box-sizing:border-box;overflow:overlay;position:relative}.cmat-org-container{display:flex;flex-direction:column;align-items:center}.cmat-org-title,.cmat-org-name,.button-container{flex:1}.cmat-org-title{margin-top:.5em}.cmat-org-name{margin:.3em 0}.button-container{display:flex;flex-direction:row;justify-content:center;align-items:center;position:absolute;bottom:1em;width:100%}.cmat-org-image{background-repeat:round;width:4em;height:4em;background-color:transparent!important;border-radius:50%;padding:.25em;border:3px solid var(--cmat-text-hint);margin:4px auto auto}.cmat-org-title{font-size:1.1rem;font-weight:700;text-align:center}.cmat-org-name{text-align:center;margin-bottom:8px!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatChartNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatChartNodeComponent, isStandalone: true, selector: "cmat-org-chart-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, hasParent: { classPropertyName: "hasParent", publicName: "hasParent", isSignal: true, isRequired: false, transformFunction: null }, enableControlHeight: { classPropertyName: "enableControlHeight", publicName: "enableControlHeight", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, detailsBtnTitle: { classPropertyName: "detailsBtnTitle", publicName: "detailsBtnTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { detailsBtnClick: "detailsBtnClick" }, exportAs: ["cmatOrgChartNode"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n@if(hasParent()){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass()\" [style.height]=\"connectorToParentHeight()\"></div>\r\n}\r\n<div class=\"cmat-org-box cmat-org-border cmat-org-background\" [ngClass]=\"node().cssClass\">\r\n    @if(node().image!==''){\r\n    <div class=\"cmat-org-image\" [style]=\"{ 'background-image': 'url(\\'' + node().image + '\\')' }\"\r\n        [style.border-color]=\"node().color\"></div>\r\n    }@else {\r\n    <div class=\"text-center\">\r\n        <mat-icon class=\"icon-size-16\" [svgIcon]=\"'heroicons_outline:user-circle'\">\r\n        </mat-icon>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"cmat-org-container\">\r\n        <div class=\"cmat-org-title\" [innerHTML]=\"node().title\" [style.color]=\"node().color\"></div>\r\n        <div class=\"cmat-org-name\" [innerHTML]=\"node().name\"></div>\r\n        \r\n        @if(node().showDetail){\r\n        <div class=\"button-container\">\r\n            <button matButton=\"filled\" class=\"cmat-org-btn cmat-org-btn-details\" color=\"primary\"\r\n                (click)=\"detailsBtnClick.emit(node())\">\r\n                {{ detailsBtnTitle() }}\r\n            </button>\r\n        </div>\r\n        }\r\n    </div>\r\n<!-- eslint-enable @angular-eslint/template/no-inline-styles -->\r\n</div>\r\n@if(node().children.length){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass()\"></div>\r\n}", styles: ["cmat-org-chart-node{display:flex;align-items:center}.cmat-org-box{width:16em;height:16em;box-sizing:border-box;overflow:overlay;position:relative}.cmat-org-container{display:flex;flex-direction:column;align-items:center}.cmat-org-title,.cmat-org-name,.button-container{flex:1}.cmat-org-title{margin-top:.5em}.cmat-org-name{margin:.3em 0}.button-container{display:flex;flex-direction:row;justify-content:center;align-items:center;position:absolute;bottom:1em;width:100%}.cmat-org-image{background-repeat:round;width:4em;height:4em;background-color:transparent!important;border-radius:50%;padding:.25em;border:3px solid var(--cmat-text-hint);margin:4px auto auto}.cmat-org-title{font-size:1.1rem;font-weight:700;text-align:center}.cmat-org-name{text-align:center;margin-bottom:8px!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatChartNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatChartNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-org-chart-node', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatOrgChartNode', imports: [NgClass, MatIconModule, MatButtonModule], template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n@if(hasParent){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass\" [style.height]=\"connectorToParentHeight\"></div>\r\n}\r\n<div class=\"cmat-org-box cmat-org-border cmat-org-background\" [ngClass]=\"node.cssClass\">\r\n    @if(node.image!==''){\r\n    <div class=\"cmat-org-image\" [style]=\"{ 'background-image': 'url(\\'' + node.image + '\\')' }\"\r\n        [style.border-color]=\"node.color\"></div>\r\n    }@else {\r\n    <div class=\"text-center\">\r\n        <mat-icon class=\"icon-size-16\" [svgIcon]=\"'heroicons_outline:user-circle'\">\r\n        </mat-icon>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"cmat-org-container\">\r\n        <div class=\"cmat-org-title\" [innerHTML]=\"node.title\" [style.color]=\"node.color\"></div>\r\n        <div class=\"cmat-org-name\" [innerHTML]=\"node.name\"></div>\r\n        \r\n        @if(node.showDetail){\r\n        <div class=\"button-container\">\r\n            <button matButton=\"filled\" class=\"cmat-org-btn cmat-org-btn-details\" color=\"primary\"\r\n                (click)=\"detailsBtnClick.emit(node)\">\r\n                {{ detailsBtnTitle }}\r\n            </button>\r\n        </div>\r\n        }\r\n    </div>\r\n<!-- eslint-enable @angular-eslint/template/no-inline-styles -->\r\n</div>\r\n@if(node.children.length){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass\"></div>\r\n}\r\n", styles: ["cmat-org-chart-node{display:flex;align-items:center}.cmat-org-box{width:16em;height:16em;box-sizing:border-box;overflow:overlay;position:relative}.cmat-org-container{display:flex;flex-direction:column;align-items:center}.cmat-org-title,.cmat-org-name,.button-container{flex:1}.cmat-org-title{margin-top:.5em}.cmat-org-name{margin:.3em 0}.button-container{display:flex;flex-direction:row;justify-content:center;align-items:center;position:absolute;bottom:1em;width:100%}.cmat-org-image{background-repeat:round;width:4em;height:4em;background-color:transparent!important;border-radius:50%;padding:.25em;border:3px solid var(--cmat-text-hint);margin:4px auto auto}.cmat-org-title{font-size:1.1rem;font-weight:700;text-align:center}.cmat-org-name{text-align:center;margin-bottom:8px!important}\n"] }]
-        }], propDecorators: { node: [{
-                type: Input
-            }], hasParent: [{
-                type: Input
-            }], enableControlHeight: [{
-                type: Input
-            }], direction: [{
-                type: Input
-            }], detailsBtnTitle: [{
-                type: Input
-            }], detailsBtnClick: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'cmat-org-chart-node', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatOrgChartNode', imports: [NgClass, MatIconModule, MatButtonModule], template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n@if(hasParent()){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass()\" [style.height]=\"connectorToParentHeight()\"></div>\r\n}\r\n<div class=\"cmat-org-box cmat-org-border cmat-org-background\" [ngClass]=\"node().cssClass\">\r\n    @if(node().image!==''){\r\n    <div class=\"cmat-org-image\" [style]=\"{ 'background-image': 'url(\\'' + node().image + '\\')' }\"\r\n        [style.border-color]=\"node().color\"></div>\r\n    }@else {\r\n    <div class=\"text-center\">\r\n        <mat-icon class=\"icon-size-16\" [svgIcon]=\"'heroicons_outline:user-circle'\">\r\n        </mat-icon>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"cmat-org-container\">\r\n        <div class=\"cmat-org-title\" [innerHTML]=\"node().title\" [style.color]=\"node().color\"></div>\r\n        <div class=\"cmat-org-name\" [innerHTML]=\"node().name\"></div>\r\n        \r\n        @if(node().showDetail){\r\n        <div class=\"button-container\">\r\n            <button matButton=\"filled\" class=\"cmat-org-btn cmat-org-btn-details\" color=\"primary\"\r\n                (click)=\"detailsBtnClick.emit(node())\">\r\n                {{ detailsBtnTitle() }}\r\n            </button>\r\n        </div>\r\n        }\r\n    </div>\r\n<!-- eslint-enable @angular-eslint/template/no-inline-styles -->\r\n</div>\r\n@if(node().children.length){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass()\"></div>\r\n}", styles: ["cmat-org-chart-node{display:flex;align-items:center}.cmat-org-box{width:16em;height:16em;box-sizing:border-box;overflow:overlay;position:relative}.cmat-org-container{display:flex;flex-direction:column;align-items:center}.cmat-org-title,.cmat-org-name,.button-container{flex:1}.cmat-org-title{margin-top:.5em}.cmat-org-name{margin:.3em 0}.button-container{display:flex;flex-direction:row;justify-content:center;align-items:center;position:absolute;bottom:1em;width:100%}.cmat-org-image{background-repeat:round;width:4em;height:4em;background-color:transparent!important;border-radius:50%;padding:.25em;border:3px solid var(--cmat-text-hint);margin:4px auto auto}.cmat-org-title{font-size:1.1rem;font-weight:700;text-align:center}.cmat-org-name{text-align:center;margin-bottom:8px!important}\n"] }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], hasParent: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasParent", required: false }] }], enableControlHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableControlHeight", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], detailsBtnTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailsBtnTitle", required: false }] }], detailsBtnClick: [{ type: i0.Output, args: ["detailsBtnClick"] }] } });
 
 class CmatChartDesignerComponent {
     constructor() {
-        this.hasParent = false;
-        this.direction = 'vertical';
-        this.detailsBtnClick = new EventEmitter();
+        this.node = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+        this.hasParent = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasParent" }] : /* istanbul ignore next */ []));
+        this.enableControlHeight = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "enableControlHeight" }] : /* istanbul ignore next */ []));
+        this.direction = input('vertical', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+        this.detailsBtnTitle = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "detailsBtnTitle" }] : /* istanbul ignore next */ []));
+        this.detailsBtnClick = output();
+        this.chartNodeClass = computed(() => `cmat-org-${this.direction()}`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "chartNodeClass" }] : /* istanbul ignore next */ []));
     }
-    get hostClass() {
-        return this.direction === 'vertical' ? 'column' : '';
+    get hostFlexDirection() {
+        return this.direction() === 'vertical' ? 'column' : '';
     }
-    get hostWidthClass() {
-        return this.direction === 'vertical' ? 'fit-content' : '';
+    get hostWidth() {
+        return this.direction() === 'vertical' ? 'fit-content' : '';
     }
-    ngOnChanges(changes) {
-        if (changes.direction) {
-            this.chartNodeClass = `cmat-org-${this.direction}`;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatChartDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatChartDesignerComponent, isStandalone: true, selector: "cmat-org-chart-designer", inputs: { node: "node", hasParent: "hasParent", enableControlHeight: "enableControlHeight", direction: "direction", detailsBtnTitle: "detailsBtnTitle" }, outputs: { detailsBtnClick: "detailsBtnClick" }, host: { properties: { "style.flex-direction": "this.hostClass", "style.width": "this.hostWidthClass" } }, exportAs: ["cmatOrgChartDesigner"], usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<cmat-org-chart-node [class]=\"chartNodeClass\" [node]=\"node\" [hasParent]=\"hasParent\"\r\n    [enableControlHeight]=\"enableControlHeight\" [direction]=\"direction\" [detailsBtnTitle]=\"detailsBtnTitle\"\r\n    (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n</cmat-org-chart-node>\r\n\r\n<div class=\"cmat-org-reports-{{ direction }} cmat-org-reports\">\r\n    @for (childNode of node.children; track $index) {\r\n    <div class=\"cmat-org-org-container cmat-org-org-container-{{ direction }}\">\r\n        <div class=\"cmat-org-connector-container cmat-org-connector-container-{{ direction }}\">\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$first ? 'transparent' : ''\"></div>\r\n            <div class=\"cmat-org-border\"></div>\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$last ? 'transparent' : ''\"></div>\r\n        </div>\r\n        <cmat-org-chart-designer [node]=\"childNode\" [hasParent]=\"true\" [enableControlHeight]=\"enableControlHeight\"\r\n            [direction]=\"direction\" [detailsBtnTitle]=\"detailsBtnTitle\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n        </cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n<!-- eslint-enable @angular-eslint/template/no-inline-styles -->\r\n</div>\r\n", styles: ["cmat-org-chart-designer{display:flex;align-items:center;flex:1}.cmat-org-vertical{flex-direction:column}.cmat-org-org-container{display:flex}.cmat-org-org-container-vertical{flex-direction:column}.cmat-org-connector{flex:1}.cmat-org-connector-container{display:flex}.cmat-org-connector-container-horizontal{flex-direction:column}.cmat-org-reports{display:flex;flex:1}.cmat-org-reports-horizontal{flex-direction:column}.cmat-org-reports-vertical{width:100%}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatChartDesignerComponent), selector: "cmat-org-chart-designer", inputs: ["node", "hasParent", "enableControlHeight", "direction", "detailsBtnTitle"], outputs: ["detailsBtnClick"], exportAs: ["cmatOrgChartDesigner"] }, { kind: "component", type: i0.forwardRef(() => CmatChartNodeComponent), selector: "cmat-org-chart-node", inputs: ["node", "hasParent", "enableControlHeight", "direction", "detailsBtnTitle"], outputs: ["detailsBtnClick"], exportAs: ["cmatOrgChartNode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatChartDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatChartDesignerComponent, isStandalone: true, selector: "cmat-org-chart-designer", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, hasParent: { classPropertyName: "hasParent", publicName: "hasParent", isSignal: true, isRequired: false, transformFunction: null }, enableControlHeight: { classPropertyName: "enableControlHeight", publicName: "enableControlHeight", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, detailsBtnTitle: { classPropertyName: "detailsBtnTitle", publicName: "detailsBtnTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { detailsBtnClick: "detailsBtnClick" }, host: { properties: { "style.flex-direction": "this.hostFlexDirection", "style.width": "this.hostWidth" } }, exportAs: ["cmatOrgChartDesigner"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<cmat-org-chart-node [class]=\"chartNodeClass()\" [node]=\"node()\" [hasParent]=\"hasParent()\"\r\n    [enableControlHeight]=\"enableControlHeight()\" [direction]=\"direction()\" [detailsBtnTitle]=\"detailsBtnTitle()\"\r\n    (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n</cmat-org-chart-node>\r\n\r\n<div class=\"cmat-org-reports-{{ direction() }} cmat-org-reports\">\r\n    @for (childNode of node().children; track $index) {\r\n    <div class=\"cmat-org-org-container cmat-org-org-container-{{ direction() }}\">\r\n        <div class=\"cmat-org-connector-container cmat-org-connector-container-{{ direction() }}\">\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$first ? 'transparent' : ''\"></div>\r\n            <div class=\"cmat-org-border\"></div>\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$last ? 'transparent' : ''\"></div>\r\n        </div>\r\n        <cmat-org-chart-designer [node]=\"childNode\" [hasParent]=\"true\" [enableControlHeight]=\"enableControlHeight()\"\r\n            [direction]=\"direction()\" [detailsBtnTitle]=\"detailsBtnTitle()\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n        </cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n<!-- eslint-enable @angular-eslint/template/no-inline-styles -->\r\n</div>", styles: ["cmat-org-chart-designer{display:flex;align-items:center;flex:1}.cmat-org-vertical{flex-direction:column}.cmat-org-org-container{display:flex}.cmat-org-org-container-vertical{flex-direction:column}.cmat-org-connector{flex:1}.cmat-org-connector-container{display:flex}.cmat-org-connector-container-horizontal{flex-direction:column}.cmat-org-reports{display:flex;flex:1}.cmat-org-reports-horizontal{flex-direction:column}.cmat-org-reports-vertical{width:100%}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatChartDesignerComponent), selector: "cmat-org-chart-designer", inputs: ["node", "hasParent", "enableControlHeight", "direction", "detailsBtnTitle"], outputs: ["detailsBtnClick"], exportAs: ["cmatOrgChartDesigner"] }, { kind: "component", type: i0.forwardRef(() => CmatChartNodeComponent), selector: "cmat-org-chart-node", inputs: ["node", "hasParent", "enableControlHeight", "direction", "detailsBtnTitle"], outputs: ["detailsBtnClick"], exportAs: ["cmatOrgChartNode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatChartDesignerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatChartDesignerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-org-chart-designer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatOrgChartDesigner', imports: [CmatChartNodeComponent, forwardRef(() => CmatChartDesignerComponent)], template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<cmat-org-chart-node [class]=\"chartNodeClass\" [node]=\"node\" [hasParent]=\"hasParent\"\r\n    [enableControlHeight]=\"enableControlHeight\" [direction]=\"direction\" [detailsBtnTitle]=\"detailsBtnTitle\"\r\n    (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n</cmat-org-chart-node>\r\n\r\n<div class=\"cmat-org-reports-{{ direction }} cmat-org-reports\">\r\n    @for (childNode of node.children; track $index) {\r\n    <div class=\"cmat-org-org-container cmat-org-org-container-{{ direction }}\">\r\n        <div class=\"cmat-org-connector-container cmat-org-connector-container-{{ direction }}\">\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$first ? 'transparent' : ''\"></div>\r\n            <div class=\"cmat-org-border\"></div>\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$last ? 'transparent' : ''\"></div>\r\n        </div>\r\n        <cmat-org-chart-designer [node]=\"childNode\" [hasParent]=\"true\" [enableControlHeight]=\"enableControlHeight\"\r\n            [direction]=\"direction\" [detailsBtnTitle]=\"detailsBtnTitle\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n        </cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n<!-- eslint-enable @angular-eslint/template/no-inline-styles -->\r\n</div>\r\n", styles: ["cmat-org-chart-designer{display:flex;align-items:center;flex:1}.cmat-org-vertical{flex-direction:column}.cmat-org-org-container{display:flex}.cmat-org-org-container-vertical{flex-direction:column}.cmat-org-connector{flex:1}.cmat-org-connector-container{display:flex}.cmat-org-connector-container-horizontal{flex-direction:column}.cmat-org-reports{display:flex;flex:1}.cmat-org-reports-horizontal{flex-direction:column}.cmat-org-reports-vertical{width:100%}\n"] }]
-        }], propDecorators: { node: [{
-                type: Input
-            }], hasParent: [{
-                type: Input
-            }], enableControlHeight: [{
-                type: Input
-            }], direction: [{
-                type: Input
-            }], detailsBtnTitle: [{
-                type: Input
-            }], detailsBtnClick: [{
-                type: Output
-            }], hostClass: [{
+            args: [{ selector: 'cmat-org-chart-designer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatOrgChartDesigner', imports: [CmatChartNodeComponent, forwardRef(() => CmatChartDesignerComponent)], template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<cmat-org-chart-node [class]=\"chartNodeClass()\" [node]=\"node()\" [hasParent]=\"hasParent()\"\r\n    [enableControlHeight]=\"enableControlHeight()\" [direction]=\"direction()\" [detailsBtnTitle]=\"detailsBtnTitle()\"\r\n    (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n</cmat-org-chart-node>\r\n\r\n<div class=\"cmat-org-reports-{{ direction() }} cmat-org-reports\">\r\n    @for (childNode of node().children; track $index) {\r\n    <div class=\"cmat-org-org-container cmat-org-org-container-{{ direction() }}\">\r\n        <div class=\"cmat-org-connector-container cmat-org-connector-container-{{ direction() }}\">\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$first ? 'transparent' : ''\"></div>\r\n            <div class=\"cmat-org-border\"></div>\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$last ? 'transparent' : ''\"></div>\r\n        </div>\r\n        <cmat-org-chart-designer [node]=\"childNode\" [hasParent]=\"true\" [enableControlHeight]=\"enableControlHeight()\"\r\n            [direction]=\"direction()\" [detailsBtnTitle]=\"detailsBtnTitle()\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n        </cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n<!-- eslint-enable @angular-eslint/template/no-inline-styles -->\r\n</div>", styles: ["cmat-org-chart-designer{display:flex;align-items:center;flex:1}.cmat-org-vertical{flex-direction:column}.cmat-org-org-container{display:flex}.cmat-org-org-container-vertical{flex-direction:column}.cmat-org-connector{flex:1}.cmat-org-connector-container{display:flex}.cmat-org-connector-container-horizontal{flex-direction:column}.cmat-org-reports{display:flex;flex:1}.cmat-org-reports-horizontal{flex-direction:column}.cmat-org-reports-vertical{width:100%}\n"] }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], hasParent: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasParent", required: false }] }], enableControlHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableControlHeight", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], detailsBtnTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailsBtnTitle", required: false }] }], detailsBtnClick: [{ type: i0.Output, args: ["detailsBtnClick"] }], hostFlexDirection: [{
                 type: HostBinding,
                 args: ['style.flex-direction']
-            }], hostWidthClass: [{
+            }], hostWidth: [{
                 type: HostBinding,
                 args: ['style.width']
             }] } });
 
 class CmatOrgChartComponent {
     constructor() {
-        this.enableControlHeight = false;
-        this.direction = 'vertical';
-        this.detailsBtnTitle = '查看详细';
-        this.detailsBtnClick = new EventEmitter();
+        this.nodes = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+        this.enableControlHeight = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "enableControlHeight" }] : /* istanbul ignore next */ []));
+        this.direction = input('vertical', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+        this.detailsBtnTitle = input('查看详细', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "detailsBtnTitle" }] : /* istanbul ignore next */ []));
+        this.detailsBtnClick = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatOrgChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatOrgChartComponent, isStandalone: true, selector: "cmat-org-chart", inputs: { nodes: "nodes", enableControlHeight: "enableControlHeight", direction: "direction", detailsBtnTitle: "detailsBtnTitle" }, outputs: { detailsBtnClick: "detailsBtnClick" }, exportAs: ["cmatOrgChart"], ngImport: i0, template: "<div class=\"cmat-org\">\r\n    @for (node of nodes; track $index) {\r\n    <div class=\"cmat-org-self-{{ direction }}\">\r\n        <cmat-org-chart-designer [node]=\"node\" [direction]=\"direction\" [enableControlHeight]=\"enableControlHeight\"\r\n            [detailsBtnTitle]=\"detailsBtnTitle\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\"></cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n</div>", styles: [".cmat-org-horizontal{padding:1em 0}.cmat-org-vertical{padding:0 1em}.cmat-org-border{border:.1em solid var(--cmat-divider);box-sizing:border-box}.cmat-org-box{padding:.5em 1em;border-radius:.2em;box-shadow:0 2px 8px #00000059}.cmat-org-connector-horizontal{width:1em!important;height:0!important}.cmat-org-connector-vertical{width:0!important;height:1em!important}.cmat-org .cmat-org-self-vertical{margin-bottom:2%}\n"], dependencies: [{ kind: "component", type: CmatChartDesignerComponent, selector: "cmat-org-chart-designer", inputs: ["node", "hasParent", "enableControlHeight", "direction", "detailsBtnTitle"], outputs: ["detailsBtnClick"], exportAs: ["cmatOrgChartDesigner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatOrgChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatOrgChartComponent, isStandalone: true, selector: "cmat-org-chart", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, enableControlHeight: { classPropertyName: "enableControlHeight", publicName: "enableControlHeight", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, detailsBtnTitle: { classPropertyName: "detailsBtnTitle", publicName: "detailsBtnTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { detailsBtnClick: "detailsBtnClick" }, exportAs: ["cmatOrgChart"], ngImport: i0, template: "<div class=\"cmat-org\">\r\n    @for (node of nodes(); track $index) {\r\n    <div class=\"cmat-org-self-{{ direction() }}\">\r\n        <cmat-org-chart-designer [node]=\"node\" [direction]=\"direction()\" [enableControlHeight]=\"enableControlHeight()\"\r\n            [detailsBtnTitle]=\"detailsBtnTitle()\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\"></cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n</div>", styles: [".cmat-org-horizontal{padding:1em 0}.cmat-org-vertical{padding:0 1em}.cmat-org-border{border:.1em solid var(--cmat-divider);box-sizing:border-box}.cmat-org-box{padding:.5em 1em;border-radius:.2em;box-shadow:0 2px 8px #00000059}.cmat-org-connector-horizontal{width:1em!important;height:0!important}.cmat-org-connector-vertical{width:0!important;height:1em!important}.cmat-org .cmat-org-self-vertical{margin-bottom:2%}\n"], dependencies: [{ kind: "component", type: CmatChartDesignerComponent, selector: "cmat-org-chart-designer", inputs: ["node", "hasParent", "enableControlHeight", "direction", "detailsBtnTitle"], outputs: ["detailsBtnClick"], exportAs: ["cmatOrgChartDesigner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatOrgChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatOrgChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-org-chart', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatOrgChart', imports: [CmatChartDesignerComponent], template: "<div class=\"cmat-org\">\r\n    @for (node of nodes; track $index) {\r\n    <div class=\"cmat-org-self-{{ direction }}\">\r\n        <cmat-org-chart-designer [node]=\"node\" [direction]=\"direction\" [enableControlHeight]=\"enableControlHeight\"\r\n            [detailsBtnTitle]=\"detailsBtnTitle\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\"></cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n</div>", styles: [".cmat-org-horizontal{padding:1em 0}.cmat-org-vertical{padding:0 1em}.cmat-org-border{border:.1em solid var(--cmat-divider);box-sizing:border-box}.cmat-org-box{padding:.5em 1em;border-radius:.2em;box-shadow:0 2px 8px #00000059}.cmat-org-connector-horizontal{width:1em!important;height:0!important}.cmat-org-connector-vertical{width:0!important;height:1em!important}.cmat-org .cmat-org-self-vertical{margin-bottom:2%}\n"] }]
-        }], propDecorators: { nodes: [{
-                type: Input
-            }], enableControlHeight: [{
-                type: Input
-            }], direction: [{
-                type: Input
-            }], detailsBtnTitle: [{
-                type: Input
-            }], detailsBtnClick: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'cmat-org-chart', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatOrgChart', imports: [CmatChartDesignerComponent], template: "<div class=\"cmat-org\">\r\n    @for (node of nodes(); track $index) {\r\n    <div class=\"cmat-org-self-{{ direction() }}\">\r\n        <cmat-org-chart-designer [node]=\"node\" [direction]=\"direction()\" [enableControlHeight]=\"enableControlHeight()\"\r\n            [detailsBtnTitle]=\"detailsBtnTitle()\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\"></cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n</div>", styles: [".cmat-org-horizontal{padding:1em 0}.cmat-org-vertical{padding:0 1em}.cmat-org-border{border:.1em solid var(--cmat-divider);box-sizing:border-box}.cmat-org-box{padding:.5em 1em;border-radius:.2em;box-shadow:0 2px 8px #00000059}.cmat-org-connector-horizontal{width:1em!important;height:0!important}.cmat-org-connector-vertical{width:0!important;height:1em!important}.cmat-org .cmat-org-self-vertical{margin-bottom:2%}\n"] }]
+        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: true }] }], enableControlHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableControlHeight", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], detailsBtnTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailsBtnTitle", required: false }] }], detailsBtnClick: [{ type: i0.Output, args: ["detailsBtnClick"] }] } });
 
 class ChartNode {
     constructor(structure, parent) {

package/fesm2022/cmat-components-org-chart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cmat-components-org-chart.mjs","sources":["../../../projects/cmat/components/org-chart/node/chart-node.component.ts","../../../projects/cmat/components/org-chart/node/chart-node.component.html","../../../projects/cmat/components/org-chart/designer/chart-designer.component.ts","../../../projects/cmat/components/org-chart/designer/chart-designer.component.html","../../../projects/cmat/components/org-chart/org-chart.component.ts","../../../projects/cmat/components/org-chart/org-chart.component.html","../../../projects/cmat/components/org-chart/node/node.type.ts","../../../projects/cmat/components/org-chart/cmat-components-org-chart.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { INode } from './node.type';\r\n\r\n@Component({\r\n    selector: 'cmat-org-chart-node',\r\n    templateUrl: './chart-node.component.html',\r\n    styleUrls: ['./chart-node.component.scss'],\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    exportAs: 'cmatOrgChartNode',\r\n    imports: [NgClass, MatIconModule, MatButtonModule]\r\n})\r\nexport class CmatChartNodeComponent implements OnChanges {\r\n    @Input() node: INode;\r\n    @Input() hasParent: boolean;\r\n    @Input() enableControlHeight: boolean;\r\n    @Input() direction: 'vertical' | 'horizontal' = 'vertical';\r\n    @Input() detailsBtnTitle: string;\r\n\r\n    @Output() detailsBtnClick = new EventEmitter<INode>();\r\n\r\n    containerClass: string;\r\n    connectorToParentHeight = '1em';\r\n    maxHeightEm = 19.2;\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes.enableControlHeight) {\r\n            if (this.enableControlHeight && this.node.heightFactor) {\r\n                let newHeight = this.node.heightFactor * this.maxHeightEm;\r\n                if (this.node.heightFactor >= 2) newHeight -= this.node.heightFactor - 1;\r\n                this.connectorToParentHeight = `${newHeight}em`;\r\n            }\r\n        }\r\n\r\n        if (changes.direction) {\r\n            this.containerClass = `cmat-org-connector-${this.direction} `;\r\n        }\r\n    }\r\n}\r\n","<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n@if(hasParent){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass\" [style.height]=\"connectorToParentHeight\"></div>\r\n}\r\n<div class=\"cmat-org-box cmat-org-border cmat-org-background\" [ngClass]=\"node.cssClass\">\r\n    @if(node.image!==''){\r\n    <div class=\"cmat-org-image\" [style]=\"{ 'background-image': 'url(\\'' + node.image + '\\')' }\"\r\n        [style.border-color]=\"node.color\"></div>\r\n    }@else {\r\n    <div class=\"text-center\">\r\n        <mat-icon class=\"icon-size-16\" [svgIcon]=\"'heroicons_outline:user-circle'\">\r\n        </mat-icon>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"cmat-org-container\">\r\n        <div class=\"cmat-org-title\" [innerHTML]=\"node.title\" [style.color]=\"node.color\"></div>\r\n        <div class=\"cmat-org-name\" [innerHTML]=\"node.name\"></div>\r\n        \r\n        @if(node.showDetail){\r\n        <div class=\"button-container\">\r\n            <button matButton=\"filled\" class=\"cmat-org-btn cmat-org-btn-details\" color=\"primary\"\r\n                (click)=\"detailsBtnClick.emit(node)\">\r\n                {{ detailsBtnTitle }}\r\n            </button>\r\n        </div>\r\n        }\r\n    </div>\r\n<!-- eslint-enable @angular-eslint/template/no-inline-styles -->\r\n</div>\r\n@if(node.children.length){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass\"></div>\r\n}\r\n","import { ChangeDetectionStrategy, Component, EventEmitter, forwardRef, HostBinding, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';\r\nimport { CmatChartNodeComponent } from '../node/chart-node.component';\r\nimport { INode } from '../node/node.type';\r\n\r\n@Component({\r\n    selector: 'cmat-org-chart-designer',\r\n    templateUrl: './chart-designer.component.html',\r\n    styleUrls: ['./chart-designer.component.scss'],\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    exportAs: 'cmatOrgChartDesigner',\r\n    imports: [CmatChartNodeComponent, forwardRef(() => CmatChartDesignerComponent)]\r\n})\r\nexport class CmatChartDesignerComponent implements OnChanges {\r\n    @Input() node: INode;\r\n    @Input() hasParent:boolean = false;\r\n    @Input() enableControlHeight: boolean;\r\n    @Input() direction: 'vertical' | 'horizontal' = 'vertical';\r\n    @Input() detailsBtnTitle: string;\r\n\r\n    @Output() detailsBtnClick = new EventEmitter<INode>();\r\n\r\n    chartNodeClass: string;\r\n\r\n\r\n    @HostBinding('style.flex-direction')\r\n    get hostClass(): string {\r\n        return this.direction === 'vertical' ? 'column' : '';\r\n    }\r\n\r\n    @HostBinding('style.width')\r\n    get hostWidthClass(): string {\r\n        return this.direction === 'vertical' ? 'fit-content' : '';\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes.direction) {\r\n            this.chartNodeClass = `cmat-org-${this.direction}`;\r\n        }\r\n    }\r\n\r\n}\r\n","<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<cmat-org-chart-node [class]=\"chartNodeClass\" [node]=\"node\" [hasParent]=\"hasParent\"\r\n    [enableControlHeight]=\"enableControlHeight\" [direction]=\"direction\" [detailsBtnTitle]=\"detailsBtnTitle\"\r\n    (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n</cmat-org-chart-node>\r\n\r\n<div class=\"cmat-org-reports-{{ direction }} cmat-org-reports\">\r\n    @for (childNode of node.children; track $index) {\r\n    <div class=\"cmat-org-org-container cmat-org-org-container-{{ direction }}\">\r\n        <div class=\"cmat-org-connector-container cmat-org-connector-container-{{ direction }}\">\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$first ? 'transparent' : ''\"></div>\r\n            <div class=\"cmat-org-border\"></div>\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$last ? 'transparent' : ''\"></div>\r\n        </div>\r\n        <cmat-org-chart-designer [node]=\"childNode\" [hasParent]=\"true\" [enableControlHeight]=\"enableControlHeight\"\r\n            [direction]=\"direction\" [detailsBtnTitle]=\"detailsBtnTitle\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n        </cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n<!-- eslint-enable @angular-eslint/template/no-inline-styles -->\r\n</div>\r\n","import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';\r\nimport { CmatChartDesignerComponent } from './designer/chart-designer.component';\r\nimport { INode } from './node/node.type';\r\n\r\n\r\n@Component({\r\n    selector: 'cmat-org-chart',\r\n    templateUrl: './org-chart.component.html',\r\n    styleUrls: ['./org-chart.component.scss'],\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    exportAs: 'cmatOrgChart',\r\n    imports: [CmatChartDesignerComponent]\r\n})\r\nexport class CmatOrgChartComponent {\r\n    @Input() nodes: INode[];\r\n    @Input() enableControlHeight:boolean = false;\r\n    @Input() direction: 'vertical' | 'horizontal' = 'vertical';\r\n    @Input() detailsBtnTitle:string = '查看详细';\r\n\r\n    @Output() detailsBtnClick = new EventEmitter<INode>();\r\n}\r\n","<div class=\"cmat-org\">\r\n    @for (node of nodes; track $index) {\r\n    <div class=\"cmat-org-self-{{ direction }}\">\r\n        <cmat-org-chart-designer [node]=\"node\" [direction]=\"direction\" [enableControlHeight]=\"enableControlHeight\"\r\n            [detailsBtnTitle]=\"detailsBtnTitle\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\"></cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n</div>","export interface INode {\r\n    name: string;\r\n    cssClass: string;\r\n    image: string;\r\n    title?: string;\r\n    color?: string;\r\n    showDetail: boolean;\r\n    children: INode[];\r\n    heightFactor?: number;\r\n}\r\n\r\nexport class ChartNode implements INode {\r\n    name: string;\r\n    cssClass: string;\r\n    image: string;\r\n    title?: string;\r\n    color?: string;\r\n    showDetail: boolean;\r\n    children: ChartNode[];\r\n    heightFactor?: number;\r\n    parent?: ChartNode;\r\n\r\n    constructor(structure: string[], parent?: ChartNode) {\r\n        this.parent = parent;\r\n        const [name, ...reports] = structure;\r\n        this.name = name.split('(')[0].trim();\r\n        const titleMatch = /\\(([^)]+)\\)/.exec(name);\r\n        this.title = titleMatch?.[1].trim();\r\n\r\n        this.children = reports.map(r => r.substring(1))\r\n            .reduce((previous, current) => {\r\n                if (!current.startsWith(' ')) {\r\n                    previous.push([]);\r\n                }\r\n\r\n                previous[previous.length - 1].push(current);\r\n                return previous;\r\n            }, [] as string[][])\r\n            .map(r => new ChartNode(r, this)) ?? [];\r\n    }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"cmat-components-org-chart.mjs","sources":["../../../projects/cmat/components/org-chart/node/chart-node.component.ts","../../../projects/cmat/components/org-chart/node/chart-node.component.html","../../../projects/cmat/components/org-chart/designer/chart-designer.component.ts","../../../projects/cmat/components/org-chart/designer/chart-designer.component.html","../../../projects/cmat/components/org-chart/org-chart.component.ts","../../../projects/cmat/components/org-chart/org-chart.component.html","../../../projects/cmat/components/org-chart/node/node.type.ts","../../../projects/cmat/components/org-chart/cmat-components-org-chart.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, input, output, computed, ViewEncapsulation } from '@angular/core';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { INode } from './node.type';\r\n\r\n@Component({\r\n    selector: 'cmat-org-chart-node',\r\n    templateUrl: './chart-node.component.html',\r\n    styleUrls: ['./chart-node.component.scss'],\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    exportAs: 'cmatOrgChartNode',\r\n    imports: [NgClass, MatIconModule, MatButtonModule]\r\n})\r\nexport class CmatChartNodeComponent {\r\n    readonly node = input.required<INode>();\r\n    readonly hasParent = input<boolean>();\r\n    readonly enableControlHeight = input<boolean>();\r\n    readonly direction = input<'vertical' | 'horizontal'>('vertical');\r\n    readonly detailsBtnTitle = input<string>();\r\n\r\n    readonly detailsBtnClick = output<INode>();\r\n\r\n    readonly containerClass = computed(() => `cmat-org-connector-${this.direction()} `);\r\n\r\n    readonly connectorToParentHeight = computed(() => {\r\n        const heightFactor = this.node().heightFactor;\r\n        if (this.enableControlHeight() && heightFactor !== undefined && heightFactor > 0) {\r\n            const maxHeightEm = 19.2;\r\n            let newHeight = heightFactor * maxHeightEm;\r\n            if (heightFactor >= 2) {\r\n                newHeight -= heightFactor - 1;\r\n            }\r\n            return `${newHeight}em`;\r\n        }\r\n        return '1em';\r\n    });\r\n}\r\n","<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n@if(hasParent()){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass()\" [style.height]=\"connectorToParentHeight()\"></div>\r\n}\r\n<div class=\"cmat-org-box cmat-org-border cmat-org-background\" [ngClass]=\"node().cssClass\">\r\n    @if(node().image!==''){\r\n    <div class=\"cmat-org-image\" [style]=\"{ 'background-image': 'url(\\'' + node().image + '\\')' }\"\r\n        [style.border-color]=\"node().color\"></div>\r\n    }@else {\r\n    <div class=\"text-center\">\r\n        <mat-icon class=\"icon-size-16\" [svgIcon]=\"'heroicons_outline:user-circle'\">\r\n        </mat-icon>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"cmat-org-container\">\r\n        <div class=\"cmat-org-title\" [innerHTML]=\"node().title\" [style.color]=\"node().color\"></div>\r\n        <div class=\"cmat-org-name\" [innerHTML]=\"node().name\"></div>\r\n        \r\n        @if(node().showDetail){\r\n        <div class=\"button-container\">\r\n            <button matButton=\"filled\" class=\"cmat-org-btn cmat-org-btn-details\" color=\"primary\"\r\n                (click)=\"detailsBtnClick.emit(node())\">\r\n                {{ detailsBtnTitle() }}\r\n            </button>\r\n        </div>\r\n        }\r\n    </div>\r\n<!-- eslint-enable @angular-eslint/template/no-inline-styles -->\r\n</div>\r\n@if(node().children.length){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass()\"></div>\r\n}","import { ChangeDetectionStrategy, Component, forwardRef, HostBinding, input, output, computed, ViewEncapsulation } from '@angular/core';\r\nimport { CmatChartNodeComponent } from '../node/chart-node.component';\r\nimport { INode } from '../node/node.type';\r\n\r\n@Component({\r\n    selector: 'cmat-org-chart-designer',\r\n    templateUrl: './chart-designer.component.html',\r\n    styleUrls: ['./chart-designer.component.scss'],\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    exportAs: 'cmatOrgChartDesigner',\r\n    imports: [CmatChartNodeComponent, forwardRef(() => CmatChartDesignerComponent)]\r\n})\r\nexport class CmatChartDesignerComponent {\r\n    readonly node = input.required<INode>();\r\n    readonly hasParent = input<boolean>(false);\r\n    readonly enableControlHeight = input<boolean>();\r\n    readonly direction = input<'vertical' | 'horizontal'>('vertical');\r\n    readonly detailsBtnTitle = input<string>();\r\n\r\n    readonly detailsBtnClick = output<INode>();\r\n\r\n    readonly chartNodeClass = computed(() => `cmat-org-${this.direction()}`);\r\n\r\n\r\n    @HostBinding('style.flex-direction')\r\n    get hostFlexDirection(): string {\r\n        return this.direction() === 'vertical' ? 'column' : '';\r\n    }\r\n\r\n    @HostBinding('style.width')\r\n    get hostWidth(): string {\r\n        return this.direction() === 'vertical' ? 'fit-content' : '';\r\n    }\r\n\r\n}\r\n","<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<cmat-org-chart-node [class]=\"chartNodeClass()\" [node]=\"node()\" [hasParent]=\"hasParent()\"\r\n    [enableControlHeight]=\"enableControlHeight()\" [direction]=\"direction()\" [detailsBtnTitle]=\"detailsBtnTitle()\"\r\n    (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n</cmat-org-chart-node>\r\n\r\n<div class=\"cmat-org-reports-{{ direction() }} cmat-org-reports\">\r\n    @for (childNode of node().children; track $index) {\r\n    <div class=\"cmat-org-org-container cmat-org-org-container-{{ direction() }}\">\r\n        <div class=\"cmat-org-connector-container cmat-org-connector-container-{{ direction() }}\">\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$first ? 'transparent' : ''\"></div>\r\n            <div class=\"cmat-org-border\"></div>\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$last ? 'transparent' : ''\"></div>\r\n        </div>\r\n        <cmat-org-chart-designer [node]=\"childNode\" [hasParent]=\"true\" [enableControlHeight]=\"enableControlHeight()\"\r\n            [direction]=\"direction()\" [detailsBtnTitle]=\"detailsBtnTitle()\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n        </cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n<!-- eslint-enable @angular-eslint/template/no-inline-styles -->\r\n</div>","import { ChangeDetectionStrategy, Component, input, output, ViewEncapsulation } from '@angular/core';\r\nimport { CmatChartDesignerComponent } from './designer/chart-designer.component';\r\nimport { INode } from './node/node.type';\r\n\r\n\r\n@Component({\r\n    selector: 'cmat-org-chart',\r\n    templateUrl: './org-chart.component.html',\r\n    styleUrls: ['./org-chart.component.scss'],\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    exportAs: 'cmatOrgChart',\r\n    imports: [CmatChartDesignerComponent]\r\n})\r\nexport class CmatOrgChartComponent {\r\n    readonly nodes = input.required<INode[]>();\r\n    readonly enableControlHeight = input<boolean>(false);\r\n    readonly direction = input<'vertical' | 'horizontal'>('vertical');\r\n    readonly detailsBtnTitle = input<string>('查看详细');\r\n\r\n    readonly detailsBtnClick = output<INode>();\r\n}","<div class=\"cmat-org\">\r\n    @for (node of nodes(); track $index) {\r\n    <div class=\"cmat-org-self-{{ direction() }}\">\r\n        <cmat-org-chart-designer [node]=\"node\" [direction]=\"direction()\" [enableControlHeight]=\"enableControlHeight()\"\r\n            [detailsBtnTitle]=\"detailsBtnTitle()\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\"></cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n</div>","export interface INode {\r\n    name: string;\r\n    cssClass: string;\r\n    image: string;\r\n    title?: string;\r\n    color?: string;\r\n    showDetail: boolean;\r\n    children: INode[];\r\n    heightFactor?: number;\r\n}\r\n\r\nexport class ChartNode implements INode {\r\n    name: string;\r\n    cssClass: string;\r\n    image: string;\r\n    title?: string;\r\n    color?: string;\r\n    showDetail: boolean;\r\n    children: ChartNode[];\r\n    heightFactor?: number;\r\n    parent?: ChartNode;\r\n\r\n    constructor(structure: string[], parent?: ChartNode) {\r\n        this.parent = parent;\r\n        const [name, ...reports] = structure;\r\n        this.name = name.split('(')[0].trim();\r\n        const titleMatch = /\\(([^)]+)\\)/.exec(name);\r\n        this.title = titleMatch?.[1].trim();\r\n\r\n        this.children = reports.map(r => r.substring(1))\r\n            .reduce((previous, current) => {\r\n                if (!current.startsWith(' ')) {\r\n                    previous.push([]);\r\n                }\r\n\r\n                previous[previous.length - 1].push(current);\r\n                return previous;\r\n            }, [] as string[][])\r\n            .map(r => new ChartNode(r, this)) ?? [];\r\n    }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/cmat-components-page-header.mjs

@@ -1,35 +1,29 @@
 import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 
 class CmatPageHeaderComponent {
     constructor() {
-        this.title = '页面标题';
-        this.description = '';
-        this.eyebrow = '';
-        this.divider = true;
-        this.align = 'start';
+        this.title = input('页面标题', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.description = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+        this.eyebrow = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eyebrow" }] : /* istanbul ignore next */ []));
+        this.divider = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "divider" }] : /* istanbul ignore next */ []));
+        this.align = input('start', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        this.isCentered = computed(() => this.align() === 'center', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCentered" }] : /* istanbul ignore next */ []));
     }
-    get isCentered() {
-        return this.align === 'center';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatPageHeaderComponent, isStandalone: true, selector: "cmat-page-header", inputs: { title: "title", description: "description", eyebrow: "eyebrow", divider: "divider", align: "align" }, ngImport: i0, template: "<section\r\n    class=\"border-b border-default pb-4\"\r\n    [ngClass]=\"isCentered ? 'flex flex-col items-center gap-4 text-center' : 'flex flex-col gap-4 md:flex-row md:items-end md:justify-between'\"\r\n>\r\n    <div class=\"min-w-0\">\r\n        @if (eyebrow) {\r\n            <p class=\"text-xs font-semibold uppercase tracking-[0.2em] text-primary\">{{ eyebrow }}</p>\r\n        }\r\n\r\n        <h1 class=\"mt-1 text-2xl font-semibold text-default\">{{ title }}</h1>\r\n\r\n        @if (description) {\r\n            <p class=\"mt-2 max-w-3xl text-sm leading-6 text-secondary\">{{ description }}</p>\r\n        }\r\n    </div>\r\n\r\n    <div [ngClass]=\"isCentered ? 'flex items-center justify-center gap-2' : 'flex items-center gap-2 md:ml-auto'\">\r\n        <ng-content select=\"[cmatPageHeaderActions]\"></ng-content>\r\n    </div>\r\n</section>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatPageHeaderComponent, isStandalone: true, selector: "cmat-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, eyebrow: { classPropertyName: "eyebrow", publicName: "eyebrow", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section\r\n    class=\"border-b border-default pb-4\"\r\n    [ngClass]=\"isCentered() ? 'flex flex-col items-center gap-4 text-center' : 'flex flex-col gap-4 md:flex-row md:items-end md:justify-between'\"\r\n>\r\n    <div class=\"min-w-0\">\r\n        @if (eyebrow()) {\r\n            <p class=\"text-xs font-semibold uppercase tracking-[0.2em] text-primary\">{{ eyebrow() }}</p>\r\n        }\r\n\r\n        <h1 class=\"mt-1 text-2xl font-semibold text-default\">{{ title() }}</h1>\r\n\r\n        @if (description()) {\r\n            <p class=\"mt-2 max-w-3xl text-sm leading-6 text-secondary\">{{ description() }}</p>\r\n        }\r\n    </div>\r\n\r\n    <div [ngClass]=\"isCentered() ? 'flex items-center justify-center gap-2' : 'flex items-center gap-2 md:ml-auto'\">\r\n        <ng-content select=\"[cmatPageHeaderActions]\"></ng-content>\r\n    </div>\r\n</section>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatPageHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-page-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<section\r\n    class=\"border-b border-default pb-4\"\r\n    [ngClass]=\"isCentered ? 'flex flex-col items-center gap-4 text-center' : 'flex flex-col gap-4 md:flex-row md:items-end md:justify-between'\"\r\n>\r\n    <div class=\"min-w-0\">\r\n        @if (eyebrow) {\r\n            <p class=\"text-xs font-semibold uppercase tracking-[0.2em] text-primary\">{{ eyebrow }}</p>\r\n        }\r\n\r\n        <h1 class=\"mt-1 text-2xl font-semibold text-default\">{{ title }}</h1>\r\n\r\n        @if (description) {\r\n            <p class=\"mt-2 max-w-3xl text-sm leading-6 text-secondary\">{{ description }}</p>\r\n        }\r\n    </div>\r\n\r\n    <div [ngClass]=\"isCentered ? 'flex items-center justify-center gap-2' : 'flex items-center gap-2 md:ml-auto'\">\r\n        <ng-content select=\"[cmatPageHeaderActions]\"></ng-content>\r\n    </div>\r\n</section>\r\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], eyebrow: [{
-                type: Input
-            }], divider: [{
-                type: Input
-            }], align: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'cmat-page-header', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<section\r\n    class=\"border-b border-default pb-4\"\r\n    [ngClass]=\"isCentered() ? 'flex flex-col items-center gap-4 text-center' : 'flex flex-col gap-4 md:flex-row md:items-end md:justify-between'\"\r\n>\r\n    <div class=\"min-w-0\">\r\n        @if (eyebrow()) {\r\n            <p class=\"text-xs font-semibold uppercase tracking-[0.2em] text-primary\">{{ eyebrow() }}</p>\r\n        }\r\n\r\n        <h1 class=\"mt-1 text-2xl font-semibold text-default\">{{ title() }}</h1>\r\n\r\n        @if (description()) {\r\n            <p class=\"mt-2 max-w-3xl text-sm leading-6 text-secondary\">{{ description() }}</p>\r\n        }\r\n    </div>\r\n\r\n    <div [ngClass]=\"isCentered() ? 'flex items-center justify-center gap-2' : 'flex items-center gap-2 md:ml-auto'\">\r\n        <ng-content select=\"[cmatPageHeaderActions]\"></ng-content>\r\n    </div>\r\n</section>\r\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], eyebrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "eyebrow", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/cmat-components-page-header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cmat-components-page-header.mjs","sources":["../../../projects/cmat/components/page-header/page-header.component.ts","../../../projects/cmat/components/page-header/page-header.component.html","../../../projects/cmat/components/page-header/cmat-components-page-header.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'cmat-page-header',\r\n    templateUrl: './page-header.component.html',\r\n    styleUrls: ['./page-header.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    imports: [NgClass]\r\n})\r\nexport class CmatPageHeaderComponent {\r\n    \r\n    @Input() title:string = '页面标题';\r\n\r\n    \r\n    @Input() description:string = '';\r\n\r\n    \r\n    @Input() eyebrow:string = '';\r\n\r\n    \r\n    @Input() divider: boolean = true;\r\n\r\n    \r\n    @Input() align: 'start' | 'center' = 'start';\r\n\r\n    get isCentered(): boolean {\r\n        return this.align === 'center';\r\n    }\r\n}\r\n","<section\r\n    class=\"border-b border-default pb-4\"\r\n    [ngClass]=\"isCentered ? 'flex flex-col items-center gap-4 text-center' : 'flex flex-col gap-4 md:flex-row md:items-end md:justify-between'\"\r\n>\r\n    <div class=\"min-w-0\">\r\n        @if (eyebrow) {\r\n            <p class=\"text-xs font-semibold uppercase tracking-[0.2em] text-primary\">{{ eyebrow }}</p>\r\n        }\r\n\r\n        <h1 class=\"mt-1 text-2xl font-semibold text-default\">{{ title }}</h1>\r\n\r\n        @if (description) {\r\n            <p class=\"mt-2 max-w-3xl text-sm leading-6 text-secondary\">{{ description }}</p>\r\n        }\r\n    </div>\r\n\r\n    <div [ngClass]=\"isCentered ? 'flex items-center justify-center gap-2' : 'flex items-center gap-2 md:ml-auto'\">\r\n        <ng-content select=\"[cmatPageHeaderActions]\"></ng-content>\r\n    </div>\r\n</section>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAUa,uBAAuB,CAAA;AAPpC,IAAA,WAAA,GAAA;QASa,IAAA,CAAA,KAAK,GAAU,MAAM;QAGrB,IAAA,CAAA,WAAW,GAAU,EAAE;QAGvB,IAAA,CAAA,OAAO,GAAU,EAAE;QAGnB,IAAA,CAAA,OAAO,GAAY,IAAI;QAGvB,IAAA,CAAA,KAAK,GAAuB,OAAO;AAK/C,IAAA;AAHG,IAAA,IAAI,UAAU,GAAA;AACV,QAAA,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;IAClC;+GAlBS,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,WAAA,EAAA,aAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,SAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECVpC,g2BAoBA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDZc,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAER,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAPnC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,mBAGX,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,OAAO,CAAC,EAAA,QAAA,EAAA,g2BAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA;;sBAIjB;;sBAGA;;sBAGA;;sBAGA;;sBAGA;;;AExBL;;AAEG;;;;"}
+{"version":3,"file":"cmat-components-page-header.mjs","sources":["../../../projects/cmat/components/page-header/page-header.component.ts","../../../projects/cmat/components/page-header/page-header.component.html","../../../projects/cmat/components/page-header/cmat-components-page-header.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, input, computed, ViewEncapsulation } from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'cmat-page-header',\r\n    templateUrl: './page-header.component.html',\r\n    styleUrls: ['./page-header.component.scss'],\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    imports: [NgClass]\r\n})\r\nexport class CmatPageHeaderComponent {\r\n    readonly title = input<string>('页面标题');\r\n    readonly description = input<string>('');\r\n    readonly eyebrow = input<string>('');\r\n    readonly divider = input<boolean>(true);\r\n    readonly align = input<'start' | 'center'>('start');\r\n\r\n    readonly isCentered = computed(() => this.align() === 'center');\r\n}\r\n","<section\r\n    class=\"border-b border-default pb-4\"\r\n    [ngClass]=\"isCentered() ? 'flex flex-col items-center gap-4 text-center' : 'flex flex-col gap-4 md:flex-row md:items-end md:justify-between'\"\r\n>\r\n    <div class=\"min-w-0\">\r\n        @if (eyebrow()) {\r\n            <p class=\"text-xs font-semibold uppercase tracking-[0.2em] text-primary\">{{ eyebrow() }}</p>\r\n        }\r\n\r\n        <h1 class=\"mt-1 text-2xl font-semibold text-default\">{{ title() }}</h1>\r\n\r\n        @if (description()) {\r\n            <p class=\"mt-2 max-w-3xl text-sm leading-6 text-secondary\">{{ description() }}</p>\r\n        }\r\n    </div>\r\n\r\n    <div [ngClass]=\"isCentered() ? 'flex items-center justify-center gap-2' : 'flex items-center gap-2 md:ml-auto'\">\r\n        <ng-content select=\"[cmatPageHeaderActions]\"></ng-content>\r\n    </div>\r\n</section>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAWa,uBAAuB,CAAA;AARpC,IAAA,WAAA,GAAA;QASa,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,MAAM;kFAAC;QAC7B,IAAA,CAAA,WAAW,GAAG,KAAK,CAAS,EAAE;wFAAC;QAC/B,IAAA,CAAA,OAAO,GAAG,KAAK,CAAS,EAAE;oFAAC;QAC3B,IAAA,CAAA,OAAO,GAAG,KAAK,CAAU,IAAI;oFAAC;QAC9B,IAAA,CAAA,KAAK,GAAG,KAAK,CAAqB,OAAO;kFAAC;QAE1C,IAAA,CAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,KAAK,QAAQ;uFAAC;AAClE,IAAA;8GARY,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECXpC,82BAoBA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDXc,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAER,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBARnC,SAAS;+BACI,kBAAkB,EAAA,aAAA,EAGb,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,OAAO,CAAC,EAAA,QAAA,EAAA,82BAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA;;;AETtB;;AAEG;;;;"}