@ng-nest/ui 17.0.11 → 18.0.0

package/fesm2022/ng-nest-ui-description.mjs

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
-import { Component, Input, TemplateRef, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, inject, ContentChildren, NgModule } from '@angular/core';
-import { __decorate } from 'tslib';
-import { XProperty, XWithConfig, XInputBoolean, XConfigService, XIsChange, XClearClass, XIsEmpty } from '@ng-nest/ui/core';
+import { input, Component, viewChild, TemplateRef, ViewEncapsulation, ChangeDetectionStrategy, contentChildren, computed, NgModule } from '@angular/core';
+import { XPropertyFunction, XToBoolean, XToCssPixelValue, XToNumber, XIsEmpty } from '@ng-nest/ui/core';
 import { XOutletDirective } from '@ng-nest/ui/outlet';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 
@@ -11,33 +10,78 @@ import { NgClass, NgTemplateOutlet } from '@angular/common';
  * @decorator component
  */
 const XDescriptionPrefix = 'x-description';
-const X_CONFIG_NAME = 'description';
+const X_DESCRIPTION_CONFIG_NAME = 'description';
 /**
  * Description Property
  */
-class XDescriptionProperty extends XProperty {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDescriptionProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XDescriptionProperty, selector: "x-description-property", inputs: { title: "title", bordered: "bordered", gridTemplateColumns: "gridTemplateColumns", size: "size" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+class XDescriptionProperty extends XPropertyFunction(X_DESCRIPTION_CONFIG_NAME) {
+    constructor() {
+        super(...arguments);
+        /**
+         * @zh_CN 描述列表的标题，支持自定义模板
+         * @en_US Describe the title of the list, support custom template
+         * @example
+         *
+         * ```html
+         * <x-description title="Title">
+         *   <x-description-item>name</x-description-item>
+         * </x-description>
+         * <x-description [title]="titleTpl">
+         *   <x-description-item>name</x-description-item>
+         * </x-description>
+         * <ng-template #titleTpl>Title</ng-template>
+         * ```
+         *
+         */
+        this.title = input();
+        /**
+         * @zh_CN 是否展示边框
+         * @en_US Whether to show column borders
+         * @example
+         *
+         * ```html
+         * <x-description title="Title" bordered>
+         *   <x-description-item>name</x-description-item>
+         * </x-description>
+         * ```
+         *
+         */
+        this.bordered = input(this.config?.bordered ?? false, { transform: XToBoolean });
+        /**
+         * @zh_CN grid 布局下定义列宽度
+         * @en_US Define column width under grid layout
+         * @example
+         *
+         * ```html
+         * <x-description title="Title" bordered gridTemplateColumns="1fr 1fr">
+         *   <x-description-item gridArea="1/1/2/2">name</x-description-item>
+         *   <x-description-item gridArea="1/2/3/2">age</x-description-item>
+         * </x-description>
+         * ```
+         *
+         */
+        this.gridTemplateColumns = input();
+        /**
+         * @zh_CN 尺寸
+         * @en_US Size
+         * @example
+         *
+         * ```html
+         * <x-description title="Title" size="big">
+         *   <x-description-item>name</x-description-item>
+         * </x-description>
+         * ```
+         *
+         */
+        this.size = input(this.config?.size ?? 'medium');
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDescriptionProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XDescriptionProperty, selector: "x-description-property", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, gridTemplateColumns: { classPropertyName: "gridTemplateColumns", publicName: "gridTemplateColumns", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XWithConfig(X_CONFIG_NAME, false),
-    XInputBoolean()
-], XDescriptionProperty.prototype, "bordered", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'medium')
-], XDescriptionProperty.prototype, "size", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDescriptionProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDescriptionProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XDescriptionPrefix}-property`, template: '' }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], bordered: [{
-                type: Input
-            }], gridTemplateColumns: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }] } });
+        }] });
 /**
  * Description Item
  * @selector x-description-item
@@ -49,136 +93,201 @@ const XDescriptionItemPrefix = 'x-description-item';
  */
 class XDescriptionItemProperty {
     constructor() {
+        /**
+         * @zh_CN 使用 grid 布局
+         * @en_US Use grid layout to merge cells
+         * @example
+         *
+         * ```html
+         * <x-description>
+         *   <x-description-item gridArea="1/1/2/2">name</x-description-item>
+         * </x-description>
+         * ```
+         *
+         */
+        this.gridArea = input();
+        /**
+         * @zh_CN 内容的描述，支持自定义模板
+         * @en_US Description of content, support custom templates
+         * @example
+         *
+         * ```html
+         * <x-description>
+         *   <x-description-item label="name1">name1</x-description-item>
+         *   <x-description-item [label]="nameTpl">name2</x-description-item>
+         * </x-description>
+         * <ng-template #nameTpl></ng-template>
+         * ```
+         *
+         */
+        this.label = input();
         /**
          * @zh_CN flex 布局下的子元素水平排列方式
          * @en_US Child element under the horizontal arrangement of the layout flex
+         * @example
+         *
+         * ```html
+         * <x-description>
+         *   <x-description-item justify="end">end</x-description-item>
+         *   <x-description-item justify="center">center</x-description-item>
+         *   <x-description-item justify="start">start</x-description-item>
+         *   <x-description-item justify="space-around">space-around</x-description-item>
+         *   <x-description-item justify="space-between">space-between</x-description-item>
+         * </x-description>
+         * ```
+         *
          */
-        this.justify = 'start';
+        this.justify = input('start');
         /**
          * @zh_CN flex 布局下的子元素垂直排列方式
          * @en_US Child element under the vertical layout flex arrangement
+         * @example
+         *
+         * ```html
+         * <x-description>
+         *   <x-description-item align="end">end</x-description-item>
+         *   <x-description-item align="center">center</x-description-item>
+         *   <x-description-item align="start">start</x-description-item>
+         * </x-description>
+         * ```
+         *
          */
-        this.align = 'start';
+        this.align = input('start');
         /**
          * @zh_CN flex 布局下的子元素排列方向
          * @en_US Child element under the direction of arrangement of the layout flex
+         * @example
+         *
+         * ```html
+         * <x-description>
+         *   <x-description-item direction="column">column</x-description-item>
+         *   <x-description-item direction="column-reverse">column-reverse</x-description-item>
+         *   <x-description-item direction="row">row</x-description-item>
+         *   <x-description-item direction="row-reverse">row-reverse</x-description-item>
+         * </x-description>
+         * ```
+         *
          */
-        this.direction = 'row';
+        this.direction = input('row');
+        /**
+         * @zh_CN 宽度
+         * @en_US Width
+         * @example
+         *
+         * ```html
+         * <x-description>
+         *   <x-description-item width="100px">width100</x-description-item>
+         *   <x-description-item width="200px">width200</x-description-item>
+         * </x-description>
+         * ```
+         *
+         */
+        this.width = input('', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN flex 比重
+         * @en_US Flex proportion
+         * @example
+         *
+         * ```html
+         * <x-description>
+         *   <x-description-item flex="1">flex1</x-description-item>
+         *   <x-description-item flex="2">flex2</x-description-item>
+         * </x-description>
+         * ```
+         *
+         */
+        this.flex = input(0, { transform: XToNumber });
         /**
          * @zh_CN 是否是标题
          * @en_US Whether it is heading
+         * @example
+         *
+         * ```html
+         * <x-description>
+         *   <x-description-item label="name" heading></x-description-item>
+         *   <x-description-item>name1</x-description-item>
+         * </x-description>
+         * ```
+         *
          */
-        this.heading = false;
+        this.heading = input(false, { transform: XToBoolean });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDescriptionItemProperty, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XDescriptionItemProperty, selector: "x-description-item-property", inputs: { gridArea: "gridArea", label: "label", justify: "justify", align: "align", direction: "direction", width: "width", flex: "flex", heading: "heading" }, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDescriptionItemProperty, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XDescriptionItemProperty, selector: "x-description-item-property", inputs: { gridArea: { classPropertyName: "gridArea", publicName: "gridArea", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, flex: { classPropertyName: "flex", publicName: "flex", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XInputBoolean()
-], XDescriptionItemProperty.prototype, "heading", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDescriptionItemProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDescriptionItemProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XDescriptionItemPrefix}-property`, template: '' }]
-        }], propDecorators: { gridArea: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], justify: [{
-                type: Input
-            }], align: [{
-                type: Input
-            }], direction: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], flex: [{
-                type: Input
-            }], heading: [{
-                type: Input
-            }] } });
+        }] });
 
 class XDescriptionItemComponent extends XDescriptionItemProperty {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDescriptionItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XDescriptionItemComponent, isStandalone: true, selector: "x-description-item", viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    constructor() {
+        super(...arguments);
+        this.content = viewChild.required(TemplateRef);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDescriptionItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.1", type: XDescriptionItemComponent, isStandalone: true, selector: "x-description-item", viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <ng-template>
       <ng-content></ng-content>
     </ng-template>
-  `, isInline: true, styles: [".x-description{margin:0;padding:0}.x-description-header{display:flex;align-items:center}.x-description-title{font-weight:700}.x-description-grid{display:grid;grid-auto-flow:row}.x-description-item{display:flex;align-items:baseline}.x-description-item.x-flex{display:flex}.x-description-item.x-justify-start{justify-content:flex-start}.x-description-item.x-justify-center{justify-content:center}.x-description-item.x-justify-end{justify-content:flex-end}.x-description-item.x-justify-space-between{justify-content:space-between}.x-description-item.x-justify-space-around{justify-content:space-around}.x-description-item.x-align-start{align-items:flex-start}.x-description-item.x-align-center{align-items:center}.x-description-item.x-align-end{align-items:flex-end}.x-description-item.x-direction-column{flex-direction:column}.x-description-item.x-direction-column-reverse{flex-direction:column-reverse}.x-description-item.x-direction-row{flex-direction:row}.x-description-item.x-direction-row-reverse{flex-direction:row-reverse}.x-description-item-heading{background-color:var(--x-background-a100)}.x-description-bordered .x-description-item{border:var(--x-border-width) var(--x-border-style) var(--x-border);margin-left:-1px;margin-top:-1px}.x-description-big .x-description-header{padding:var(--x-padding-big) 0}.x-description-big .x-description-item{padding:calc(var(--x-padding-big) / 2) 0}.x-description-big.x-description-bordered .x-description-item{padding:var(--x-padding-big)}.x-description-large .x-description-header{padding:var(--x-padding-large) 0}.x-description-large .x-description-item{padding:calc(var(--x-padding-large) / 2) 0}.x-description-large.x-description-bordered .x-description-item{padding:var(--x-padding-large)}.x-description-medium .x-description-header{padding:var(--x-padding-medium) 0}.x-description-medium .x-description-item{padding:calc(var(--x-padding-medium) / 2) 0}.x-description-medium.x-description-bordered .x-description-item{padding:var(--x-padding-medium)}.x-description-small .x-description-header{padding:var(--x-padding-small) 0}.x-description-small .x-description-item{padding:calc(var(--x-padding-small) / 2) 0}.x-description-small.x-description-bordered .x-description-item{padding:var(--x-padding-small)}.x-description-mini .x-description-header{padding:var(--x-padding-mini) 0}.x-description-mini .x-description-item{padding:calc(var(--x-padding-mini) / 2) 0}.x-description-mini.x-description-bordered .x-description-item{padding:var(--x-padding-mini)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: [".x-description{margin:0;padding:0}.x-description-header{display:flex;align-items:center}.x-description-title{font-weight:700}.x-description-grid{display:grid;grid-auto-flow:row}.x-description-item{display:flex;align-items:baseline}.x-description-item.x-flex{display:flex}.x-description-item.x-justify-start{justify-content:flex-start}.x-description-item.x-justify-center{justify-content:center}.x-description-item.x-justify-end{justify-content:flex-end}.x-description-item.x-justify-space-between{justify-content:space-between}.x-description-item.x-justify-space-around{justify-content:space-around}.x-description-item.x-align-start{align-items:flex-start}.x-description-item.x-align-center{align-items:center}.x-description-item.x-align-end{align-items:flex-end}.x-description-item.x-direction-column{flex-direction:column}.x-description-item.x-direction-column-reverse{flex-direction:column-reverse}.x-description-item.x-direction-row{flex-direction:row}.x-description-item.x-direction-row-reverse{flex-direction:row-reverse}.x-description-item-heading{background-color:var(--x-background-a100)}.x-description-bordered .x-description-item{border:var(--x-border-width) var(--x-border-style) var(--x-border);margin-left:calc(var(--x-border-width) * -1);margin-top:calc(var(--x-border-width) * -1)}.x-description-big .x-description-header{padding:var(--x-padding-big) 0}.x-description-big .x-description-item{padding:calc(var(--x-padding-big) / 2) 0}.x-description-big.x-description-bordered .x-description-item{padding:var(--x-padding-big)}.x-description-large .x-description-header{padding:var(--x-padding-large) 0}.x-description-large .x-description-item{padding:calc(var(--x-padding-large) / 2) 0}.x-description-large.x-description-bordered .x-description-item{padding:var(--x-padding-large)}.x-description-medium .x-description-header{padding:var(--x-padding-medium) 0}.x-description-medium .x-description-item{padding:calc(var(--x-padding-medium) / 2) 0}.x-description-medium.x-description-bordered .x-description-item{padding:var(--x-padding-medium)}.x-description-small .x-description-header{padding:var(--x-padding-small) 0}.x-description-small .x-description-item{padding:calc(var(--x-padding-small) / 2) 0}.x-description-small.x-description-bordered .x-description-item{padding:var(--x-padding-small)}.x-description-mini .x-description-header{padding:var(--x-padding-mini) 0}.x-description-mini .x-description-item{padding:calc(var(--x-padding-mini) / 2) 0}.x-description-mini.x-description-bordered .x-description-item{padding:var(--x-padding-mini)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDescriptionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDescriptionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XDescriptionItemPrefix}`, standalone: true, template: `
     <ng-template>
       <ng-content></ng-content>
     </ng-template>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".x-description{margin:0;padding:0}.x-description-header{display:flex;align-items:center}.x-description-title{font-weight:700}.x-description-grid{display:grid;grid-auto-flow:row}.x-description-item{display:flex;align-items:baseline}.x-description-item.x-flex{display:flex}.x-description-item.x-justify-start{justify-content:flex-start}.x-description-item.x-justify-center{justify-content:center}.x-description-item.x-justify-end{justify-content:flex-end}.x-description-item.x-justify-space-between{justify-content:space-between}.x-description-item.x-justify-space-around{justify-content:space-around}.x-description-item.x-align-start{align-items:flex-start}.x-description-item.x-align-center{align-items:center}.x-description-item.x-align-end{align-items:flex-end}.x-description-item.x-direction-column{flex-direction:column}.x-description-item.x-direction-column-reverse{flex-direction:column-reverse}.x-description-item.x-direction-row{flex-direction:row}.x-description-item.x-direction-row-reverse{flex-direction:row-reverse}.x-description-item-heading{background-color:var(--x-background-a100)}.x-description-bordered .x-description-item{border:var(--x-border-width) var(--x-border-style) var(--x-border);margin-left:-1px;margin-top:-1px}.x-description-big .x-description-header{padding:var(--x-padding-big) 0}.x-description-big .x-description-item{padding:calc(var(--x-padding-big) / 2) 0}.x-description-big.x-description-bordered .x-description-item{padding:var(--x-padding-big)}.x-description-large .x-description-header{padding:var(--x-padding-large) 0}.x-description-large .x-description-item{padding:calc(var(--x-padding-large) / 2) 0}.x-description-large.x-description-bordered .x-description-item{padding:var(--x-padding-large)}.x-description-medium .x-description-header{padding:var(--x-padding-medium) 0}.x-description-medium .x-description-item{padding:calc(var(--x-padding-medium) / 2) 0}.x-description-medium.x-description-bordered .x-description-item{padding:var(--x-padding-medium)}.x-description-small .x-description-header{padding:var(--x-padding-small) 0}.x-description-small .x-description-item{padding:calc(var(--x-padding-small) / 2) 0}.x-description-small.x-description-bordered .x-description-item{padding:var(--x-padding-small)}.x-description-mini .x-description-header{padding:var(--x-padding-mini) 0}.x-description-mini .x-description-item{padding:calc(var(--x-padding-mini) / 2) 0}.x-description-mini.x-description-bordered .x-description-item{padding:var(--x-padding-mini)}\n"] }]
-        }], propDecorators: { content: [{
-                type: ViewChild,
-                args: [TemplateRef, { static: true }]
-            }] } });
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".x-description{margin:0;padding:0}.x-description-header{display:flex;align-items:center}.x-description-title{font-weight:700}.x-description-grid{display:grid;grid-auto-flow:row}.x-description-item{display:flex;align-items:baseline}.x-description-item.x-flex{display:flex}.x-description-item.x-justify-start{justify-content:flex-start}.x-description-item.x-justify-center{justify-content:center}.x-description-item.x-justify-end{justify-content:flex-end}.x-description-item.x-justify-space-between{justify-content:space-between}.x-description-item.x-justify-space-around{justify-content:space-around}.x-description-item.x-align-start{align-items:flex-start}.x-description-item.x-align-center{align-items:center}.x-description-item.x-align-end{align-items:flex-end}.x-description-item.x-direction-column{flex-direction:column}.x-description-item.x-direction-column-reverse{flex-direction:column-reverse}.x-description-item.x-direction-row{flex-direction:row}.x-description-item.x-direction-row-reverse{flex-direction:row-reverse}.x-description-item-heading{background-color:var(--x-background-a100)}.x-description-bordered .x-description-item{border:var(--x-border-width) var(--x-border-style) var(--x-border);margin-left:calc(var(--x-border-width) * -1);margin-top:calc(var(--x-border-width) * -1)}.x-description-big .x-description-header{padding:var(--x-padding-big) 0}.x-description-big .x-description-item{padding:calc(var(--x-padding-big) / 2) 0}.x-description-big.x-description-bordered .x-description-item{padding:var(--x-padding-big)}.x-description-large .x-description-header{padding:var(--x-padding-large) 0}.x-description-large .x-description-item{padding:calc(var(--x-padding-large) / 2) 0}.x-description-large.x-description-bordered .x-description-item{padding:var(--x-padding-large)}.x-description-medium .x-description-header{padding:var(--x-padding-medium) 0}.x-description-medium .x-description-item{padding:calc(var(--x-padding-medium) / 2) 0}.x-description-medium.x-description-bordered .x-description-item{padding:var(--x-padding-medium)}.x-description-small .x-description-header{padding:var(--x-padding-small) 0}.x-description-small .x-description-item{padding:calc(var(--x-padding-small) / 2) 0}.x-description-small.x-description-bordered .x-description-item{padding:var(--x-padding-small)}.x-description-mini .x-description-header{padding:var(--x-padding-mini) 0}.x-description-mini .x-description-item{padding:calc(var(--x-padding-mini) / 2) 0}.x-description-mini.x-description-bordered .x-description-item{padding:var(--x-padding-mini)}\n"] }]
+        }] });
 
 class XDescriptionComponent extends XDescriptionProperty {
     constructor() {
         super(...arguments);
-        this.configService = inject(XConfigService);
-    }
-    ngOnInit() {
-        this.setClassMap();
-    }
-    ngOnChanges(changes) {
-        const { size } = changes;
-        XIsChange(size) && this.setClassMap();
-    }
-    ngAfterViewInit() {
-        this.setMerge();
-    }
-    setClassMap() {
-        XClearClass(this.classMap);
-        this.classMap = {
-            [`${XDescriptionPrefix}-${this.size}`]: !XIsEmpty(this.size)
-        };
+        this.items = contentChildren(XDescriptionItemComponent);
+        this.classMap = computed(() => ({
+            [`${XDescriptionPrefix}-${this.size()}`]: !XIsEmpty(this.size())
+        }));
+        this.gridTemplateColumnsSignal = computed(() => {
+            let gridTemplateColumns = this.gridTemplateColumns();
+            if (gridTemplateColumns)
+                return gridTemplateColumns;
+            const columns = [];
+            this.items().forEach((x) => {
+                if (x.width()) {
+                    columns.push(x.width());
+                }
+                else if (x.flex()) {
+                    columns.push(`${x.flex()}fr`);
+                }
+            });
+            return columns.join(' ');
+        });
     }
     setFlex(item) {
         let classes = {};
-        if (!XIsEmpty(item.justify))
-            classes[`x-justify-${item.justify}`] = true;
-        if (!XIsEmpty(item.align))
-            classes[`x-align-${item.align}`] = true;
-        if (!XIsEmpty(item.direction))
-            classes[`x-direction-${item.direction}`] = true;
+        if (!XIsEmpty(item.justify()))
+            classes[`x-justify-${item.justify()}`] = true;
+        if (!XIsEmpty(item.align()))
+            classes[`x-align-${item.align()}`] = true;
+        if (!XIsEmpty(item.direction()))
+            classes[`x-direction-${item.direction()}`] = true;
         return classes;
     }
-    setMerge() {
-        if (this.gridTemplateColumns)
-            return;
-        let gridTemplateColumns = [];
-        this.items.forEach((x) => {
-            if (x.width) {
-                gridTemplateColumns.push(x.width);
-            }
-            else if (x.flex) {
-                gridTemplateColumns.push(`${x.flex}fr`);
-            }
-        });
-        this.gridTemplateColumns = gridTemplateColumns.join(' ');
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDescriptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XDescriptionComponent, isStandalone: true, selector: "x-description", queries: [{ propertyName: "items", predicate: XDescriptionItemComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"x-description\" [class.x-description-bordered]=\"bordered\" [ngClass]=\"classMap\">\r\n  @if (title) {\r\n    <div class=\"x-description-header\">\r\n      <div class=\"x-description-title\" *xOutlet=\"title\">\r\n        {{ title }}\r\n      </div>\r\n    </div>\r\n  }\r\n  <div class=\"x-description-grid\" [style.grid-template-columns]=\"gridTemplateColumns\">\r\n    @for (item of items; track item; let i = $index) {\r\n      <div\r\n        class=\"x-description-item\"\r\n        [style.grid-area]=\"item.gridArea ? item.gridArea : '1 / ' + (i + 1)\"\r\n        [class.x-description-item-heading]=\"item.heading\"\r\n        [ngClass]=\"setFlex(item)\"\r\n      >\r\n        <div class=\"x-description-item-label\">\r\n          <ng-container *xOutlet=\"item.label\">{{ item.label }}</ng-container>\r\n        </div>\r\n        <div class=\"x-description-item-content\">\r\n          <ng-template [ngTemplateOutlet]=\"item.content\"></ng-template>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".x-description{margin:0;padding:0}.x-description-header{display:flex;align-items:center}.x-description-title{font-weight:700}.x-description-grid{display:grid;grid-auto-flow:row}.x-description-item{display:flex;align-items:baseline}.x-description-item.x-flex{display:flex}.x-description-item.x-justify-start{justify-content:flex-start}.x-description-item.x-justify-center{justify-content:center}.x-description-item.x-justify-end{justify-content:flex-end}.x-description-item.x-justify-space-between{justify-content:space-between}.x-description-item.x-justify-space-around{justify-content:space-around}.x-description-item.x-align-start{align-items:flex-start}.x-description-item.x-align-center{align-items:center}.x-description-item.x-align-end{align-items:flex-end}.x-description-item.x-direction-column{flex-direction:column}.x-description-item.x-direction-column-reverse{flex-direction:column-reverse}.x-description-item.x-direction-row{flex-direction:row}.x-description-item.x-direction-row-reverse{flex-direction:row-reverse}.x-description-item-heading{background-color:var(--x-background-a100)}.x-description-bordered .x-description-item{border:var(--x-border-width) var(--x-border-style) var(--x-border);margin-left:-1px;margin-top:-1px}.x-description-big .x-description-header{padding:var(--x-padding-big) 0}.x-description-big .x-description-item{padding:calc(var(--x-padding-big) / 2) 0}.x-description-big.x-description-bordered .x-description-item{padding:var(--x-padding-big)}.x-description-large .x-description-header{padding:var(--x-padding-large) 0}.x-description-large .x-description-item{padding:calc(var(--x-padding-large) / 2) 0}.x-description-large.x-description-bordered .x-description-item{padding:var(--x-padding-large)}.x-description-medium .x-description-header{padding:var(--x-padding-medium) 0}.x-description-medium .x-description-item{padding:calc(var(--x-padding-medium) / 2) 0}.x-description-medium.x-description-bordered .x-description-item{padding:var(--x-padding-medium)}.x-description-small .x-description-header{padding:var(--x-padding-small) 0}.x-description-small .x-description-item{padding:calc(var(--x-padding-small) / 2) 0}.x-description-small.x-description-bordered .x-description-item{padding:var(--x-padding-small)}.x-description-mini .x-description-header{padding:var(--x-padding-mini) 0}.x-description-mini .x-description-item{padding:calc(var(--x-padding-mini) / 2) 0}.x-description-mini.x-description-bordered .x-description-item{padding:var(--x-padding-mini)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDescriptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XDescriptionComponent, isStandalone: true, selector: "x-description", queries: [{ propertyName: "items", predicate: XDescriptionItemComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"x-description\" [class.x-description-bordered]=\"bordered()\" [ngClass]=\"classMap()\">\r\n  @if (title()) {\r\n    <div class=\"x-description-header\">\r\n      <div class=\"x-description-title\" *xOutlet=\"title()\">\r\n        {{ title() }}\r\n      </div>\r\n    </div>\r\n  }\r\n  <div class=\"x-description-grid\" [style.grid-template-columns]=\"gridTemplateColumnsSignal()\">\r\n    @for (item of items(); track item) {\r\n      <div\r\n        class=\"x-description-item\"\r\n        [style.grid-area]=\"item.gridArea() ? item.gridArea() : '1 / ' + ($index + 1)\"\r\n        [class.x-description-item-heading]=\"item.heading()\"\r\n        [ngClass]=\"setFlex(item)\"\r\n      >\r\n        <div class=\"x-description-item-label\">\r\n          <ng-container *xOutlet=\"item.label()\">{{ item.label() }}</ng-container>\r\n        </div>\r\n        <div class=\"x-description-item-content\">\r\n          <ng-template [ngTemplateOutlet]=\"item.content()\"></ng-template>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".x-description{margin:0;padding:0}.x-description-header{display:flex;align-items:center}.x-description-title{font-weight:700}.x-description-grid{display:grid;grid-auto-flow:row}.x-description-item{display:flex;align-items:baseline}.x-description-item.x-flex{display:flex}.x-description-item.x-justify-start{justify-content:flex-start}.x-description-item.x-justify-center{justify-content:center}.x-description-item.x-justify-end{justify-content:flex-end}.x-description-item.x-justify-space-between{justify-content:space-between}.x-description-item.x-justify-space-around{justify-content:space-around}.x-description-item.x-align-start{align-items:flex-start}.x-description-item.x-align-center{align-items:center}.x-description-item.x-align-end{align-items:flex-end}.x-description-item.x-direction-column{flex-direction:column}.x-description-item.x-direction-column-reverse{flex-direction:column-reverse}.x-description-item.x-direction-row{flex-direction:row}.x-description-item.x-direction-row-reverse{flex-direction:row-reverse}.x-description-item-heading{background-color:var(--x-background-a100)}.x-description-bordered .x-description-item{border:var(--x-border-width) var(--x-border-style) var(--x-border);margin-left:calc(var(--x-border-width) * -1);margin-top:calc(var(--x-border-width) * -1)}.x-description-big .x-description-header{padding:var(--x-padding-big) 0}.x-description-big .x-description-item{padding:calc(var(--x-padding-big) / 2) 0}.x-description-big.x-description-bordered .x-description-item{padding:var(--x-padding-big)}.x-description-large .x-description-header{padding:var(--x-padding-large) 0}.x-description-large .x-description-item{padding:calc(var(--x-padding-large) / 2) 0}.x-description-large.x-description-bordered .x-description-item{padding:var(--x-padding-large)}.x-description-medium .x-description-header{padding:var(--x-padding-medium) 0}.x-description-medium .x-description-item{padding:calc(var(--x-padding-medium) / 2) 0}.x-description-medium.x-description-bordered .x-description-item{padding:var(--x-padding-medium)}.x-description-small .x-description-header{padding:var(--x-padding-small) 0}.x-description-small .x-description-item{padding:calc(var(--x-padding-small) / 2) 0}.x-description-small.x-description-bordered .x-description-item{padding:var(--x-padding-small)}.x-description-mini .x-description-header{padding:var(--x-padding-mini) 0}.x-description-mini .x-description-item{padding:calc(var(--x-padding-mini) / 2) 0}.x-description-mini.x-description-bordered .x-description-item{padding:var(--x-padding-mini)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDescriptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDescriptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XDescriptionPrefix}`, standalone: true, imports: [NgClass, NgTemplateOutlet, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-description\" [class.x-description-bordered]=\"bordered\" [ngClass]=\"classMap\">\r\n  @if (title) {\r\n    <div class=\"x-description-header\">\r\n      <div class=\"x-description-title\" *xOutlet=\"title\">\r\n        {{ title }}\r\n      </div>\r\n    </div>\r\n  }\r\n  <div class=\"x-description-grid\" [style.grid-template-columns]=\"gridTemplateColumns\">\r\n    @for (item of items; track item; let i = $index) {\r\n      <div\r\n        class=\"x-description-item\"\r\n        [style.grid-area]=\"item.gridArea ? item.gridArea : '1 / ' + (i + 1)\"\r\n        [class.x-description-item-heading]=\"item.heading\"\r\n        [ngClass]=\"setFlex(item)\"\r\n      >\r\n        <div class=\"x-description-item-label\">\r\n          <ng-container *xOutlet=\"item.label\">{{ item.label }}</ng-container>\r\n        </div>\r\n        <div class=\"x-description-item-content\">\r\n          <ng-template [ngTemplateOutlet]=\"item.content\"></ng-template>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".x-description{margin:0;padding:0}.x-description-header{display:flex;align-items:center}.x-description-title{font-weight:700}.x-description-grid{display:grid;grid-auto-flow:row}.x-description-item{display:flex;align-items:baseline}.x-description-item.x-flex{display:flex}.x-description-item.x-justify-start{justify-content:flex-start}.x-description-item.x-justify-center{justify-content:center}.x-description-item.x-justify-end{justify-content:flex-end}.x-description-item.x-justify-space-between{justify-content:space-between}.x-description-item.x-justify-space-around{justify-content:space-around}.x-description-item.x-align-start{align-items:flex-start}.x-description-item.x-align-center{align-items:center}.x-description-item.x-align-end{align-items:flex-end}.x-description-item.x-direction-column{flex-direction:column}.x-description-item.x-direction-column-reverse{flex-direction:column-reverse}.x-description-item.x-direction-row{flex-direction:row}.x-description-item.x-direction-row-reverse{flex-direction:row-reverse}.x-description-item-heading{background-color:var(--x-background-a100)}.x-description-bordered .x-description-item{border:var(--x-border-width) var(--x-border-style) var(--x-border);margin-left:-1px;margin-top:-1px}.x-description-big .x-description-header{padding:var(--x-padding-big) 0}.x-description-big .x-description-item{padding:calc(var(--x-padding-big) / 2) 0}.x-description-big.x-description-bordered .x-description-item{padding:var(--x-padding-big)}.x-description-large .x-description-header{padding:var(--x-padding-large) 0}.x-description-large .x-description-item{padding:calc(var(--x-padding-large) / 2) 0}.x-description-large.x-description-bordered .x-description-item{padding:var(--x-padding-large)}.x-description-medium .x-description-header{padding:var(--x-padding-medium) 0}.x-description-medium .x-description-item{padding:calc(var(--x-padding-medium) / 2) 0}.x-description-medium.x-description-bordered .x-description-item{padding:var(--x-padding-medium)}.x-description-small .x-description-header{padding:var(--x-padding-small) 0}.x-description-small .x-description-item{padding:calc(var(--x-padding-small) / 2) 0}.x-description-small.x-description-bordered .x-description-item{padding:var(--x-padding-small)}.x-description-mini .x-description-header{padding:var(--x-padding-mini) 0}.x-description-mini .x-description-item{padding:calc(var(--x-padding-mini) / 2) 0}.x-description-mini.x-description-bordered .x-description-item{padding:var(--x-padding-mini)}\n"] }]
-        }], propDecorators: { items: [{
-                type: ContentChildren,
-                args: [XDescriptionItemComponent]
-            }] } });
+            args: [{ selector: `${XDescriptionPrefix}`, standalone: true, imports: [NgClass, NgTemplateOutlet, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-description\" [class.x-description-bordered]=\"bordered()\" [ngClass]=\"classMap()\">\r\n  @if (title()) {\r\n    <div class=\"x-description-header\">\r\n      <div class=\"x-description-title\" *xOutlet=\"title()\">\r\n        {{ title() }}\r\n      </div>\r\n    </div>\r\n  }\r\n  <div class=\"x-description-grid\" [style.grid-template-columns]=\"gridTemplateColumnsSignal()\">\r\n    @for (item of items(); track item) {\r\n      <div\r\n        class=\"x-description-item\"\r\n        [style.grid-area]=\"item.gridArea() ? item.gridArea() : '1 / ' + ($index + 1)\"\r\n        [class.x-description-item-heading]=\"item.heading()\"\r\n        [ngClass]=\"setFlex(item)\"\r\n      >\r\n        <div class=\"x-description-item-label\">\r\n          <ng-container *xOutlet=\"item.label()\">{{ item.label() }}</ng-container>\r\n        </div>\r\n        <div class=\"x-description-item-content\">\r\n          <ng-template [ngTemplateOutlet]=\"item.content()\"></ng-template>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".x-description{margin:0;padding:0}.x-description-header{display:flex;align-items:center}.x-description-title{font-weight:700}.x-description-grid{display:grid;grid-auto-flow:row}.x-description-item{display:flex;align-items:baseline}.x-description-item.x-flex{display:flex}.x-description-item.x-justify-start{justify-content:flex-start}.x-description-item.x-justify-center{justify-content:center}.x-description-item.x-justify-end{justify-content:flex-end}.x-description-item.x-justify-space-between{justify-content:space-between}.x-description-item.x-justify-space-around{justify-content:space-around}.x-description-item.x-align-start{align-items:flex-start}.x-description-item.x-align-center{align-items:center}.x-description-item.x-align-end{align-items:flex-end}.x-description-item.x-direction-column{flex-direction:column}.x-description-item.x-direction-column-reverse{flex-direction:column-reverse}.x-description-item.x-direction-row{flex-direction:row}.x-description-item.x-direction-row-reverse{flex-direction:row-reverse}.x-description-item-heading{background-color:var(--x-background-a100)}.x-description-bordered .x-description-item{border:var(--x-border-width) var(--x-border-style) var(--x-border);margin-left:calc(var(--x-border-width) * -1);margin-top:calc(var(--x-border-width) * -1)}.x-description-big .x-description-header{padding:var(--x-padding-big) 0}.x-description-big .x-description-item{padding:calc(var(--x-padding-big) / 2) 0}.x-description-big.x-description-bordered .x-description-item{padding:var(--x-padding-big)}.x-description-large .x-description-header{padding:var(--x-padding-large) 0}.x-description-large .x-description-item{padding:calc(var(--x-padding-large) / 2) 0}.x-description-large.x-description-bordered .x-description-item{padding:var(--x-padding-large)}.x-description-medium .x-description-header{padding:var(--x-padding-medium) 0}.x-description-medium .x-description-item{padding:calc(var(--x-padding-medium) / 2) 0}.x-description-medium.x-description-bordered .x-description-item{padding:var(--x-padding-medium)}.x-description-small .x-description-header{padding:var(--x-padding-small) 0}.x-description-small .x-description-item{padding:calc(var(--x-padding-small) / 2) 0}.x-description-small.x-description-bordered .x-description-item{padding:var(--x-padding-small)}.x-description-mini .x-description-header{padding:var(--x-padding-mini) 0}.x-description-mini .x-description-item{padding:calc(var(--x-padding-mini) / 2) 0}.x-description-mini.x-description-bordered .x-description-item{padding:var(--x-padding-mini)}\n"] }]
+        }] });
 
 class XDescriptionModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDescriptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: XDescriptionModule, imports: [XDescriptionComponent, XDescriptionItemComponent], exports: [XDescriptionComponent, XDescriptionItemComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDescriptionModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDescriptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XDescriptionModule, imports: [XDescriptionComponent, XDescriptionItemComponent], exports: [XDescriptionComponent, XDescriptionItemComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDescriptionModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDescriptionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDescriptionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [XDescriptionComponent, XDescriptionItemComponent],

package/fesm2022/ng-nest-ui-description.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-nest-ui-description.mjs","sources":["../../../../lib/ng-nest/ui/description/description.property.ts","../../../../lib/ng-nest/ui/description/description-item.component.ts","../../../../lib/ng-nest/ui/description/description.component.ts","../../../../lib/ng-nest/ui/description/description.component.html","../../../../lib/ng-nest/ui/description/description.module.ts","../../../../lib/ng-nest/ui/description/ng-nest-ui-description.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\r\nimport { XAlign, XBoolean, XDirection, XInputBoolean, XJustify, XProperty, XSize, XTemplate, XWithConfig } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * Description\r\n * @selector x-description\r\n * @decorator component\r\n */\r\nexport const XDescriptionPrefix = 'x-description';\r\nconst X_CONFIG_NAME = 'description';\r\n\r\n/**\r\n * Description Property\r\n */\r\n@Component({ selector: `${XDescriptionPrefix}-property`, template: '' })\r\nexport class XDescriptionProperty extends XProperty {\r\n  /**\r\n   * @zh_CN 描述列表的标题，支持自定义模板\r\n   * @en_US Describe the title of the list, support custom template\r\n   */\r\n  @Input() title?: XTemplate;\r\n  /**\r\n   * @zh_CN 是否展示边框\r\n   * @en_US Whether to show column borders\r\n   */\r\n  @Input() @XWithConfig<XBoolean>(X_CONFIG_NAME, false) @XInputBoolean() bordered!: XBoolean;\r\n  /**\r\n   * @zh_CN grid 布局下定义列宽度\r\n   * @en_US Define column width under grid layout\r\n   */\r\n  @Input() gridTemplateColumns?: string;\r\n  /**\r\n   * @zh_CN 尺寸\r\n   * @en_US Size\r\n   */\r\n  @Input() @XWithConfig<XSize>(X_CONFIG_NAME, 'medium') size!: XSize;\r\n}\r\n\r\n/**\r\n * Description Item\r\n * @selector x-description-item\r\n * @decorator component\r\n */\r\nexport const XDescriptionItemPrefix = 'x-description-item';\r\n\r\n/**\r\n * Description Item Property\r\n */\r\n@Component({ selector: `${XDescriptionItemPrefix}-property`, template: '' })\r\nexport class XDescriptionItemProperty {\r\n  /**\r\n   * @zh_CN 使用 grid 布局\r\n   * @en_US Use grid layout to merge cells\r\n   */\r\n  @Input() gridArea?: string;\r\n  /**\r\n   * @zh_CN 内容的描述，支持自定义模板\r\n   * @en_US Description of content, support custom templates\r\n   */\r\n  @Input() label?: XTemplate;\r\n  /**\r\n   * @zh_CN flex 布局下的子元素水平排列方式\r\n   * @en_US Child element under the horizontal arrangement of the layout flex\r\n   */\r\n  @Input() justify?: XJustify = 'start';\r\n  /**\r\n   * @zh_CN flex 布局下的子元素垂直排列方式\r\n   * @en_US Child element under the vertical layout flex arrangement\r\n   */\r\n  @Input() align?: XAlign = 'start';\r\n  /**\r\n   * @zh_CN flex 布局下的子元素排列方向\r\n   * @en_US Child element under the direction of arrangement of the layout flex\r\n   */\r\n  @Input() direction?: XDirection = 'row';\r\n  /**\r\n   * @zh_CN 宽度\r\n   * @en_US Width\r\n   */\r\n  @Input() width?: string;\r\n  /**\r\n   * @zh_CN flex 比重\r\n   * @en_US Flex proportion\r\n   */\r\n  @Input() flex?: number;\r\n  /**\r\n   * @zh_CN 是否是标题\r\n   * @en_US Whether it is heading\r\n   */\r\n  @Input() @XInputBoolean() heading: XBoolean = false;\r\n}\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, TemplateRef } from '@angular/core';\r\nimport { XDescriptionItemPrefix, XDescriptionItemProperty } from './description.property';\r\n\r\n@Component({\r\n  selector: `${XDescriptionItemPrefix}`,\r\n  standalone: true,\r\n  template: `\r\n    <ng-template>\r\n      <ng-content></ng-content>\r\n    </ng-template>\r\n  `,\r\n  styleUrls: ['./style/index.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XDescriptionItemComponent extends XDescriptionItemProperty {\r\n  @ViewChild(TemplateRef, { static: true }) content!: TemplateRef<void>;\r\n}\r\n","import {\r\n  Component,\r\n  ViewEncapsulation,\r\n  ChangeDetectionStrategy,\r\n  ContentChildren,\r\n  QueryList,\r\n  SimpleChanges,\r\n  inject,\r\n  OnInit,\r\n  AfterViewInit,\r\n  OnChanges\r\n} from '@angular/core';\r\nimport { XDescriptionPrefix, XDescriptionProperty } from './description.property';\r\nimport { XClearClass, XConfigService, XIsChange, XIsEmpty } from '@ng-nest/ui/core';\r\nimport { XDescriptionItemComponent } from './description-item.component';\r\nimport { XOutletDirective } from '@ng-nest/ui/outlet';\r\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\r\n\r\n@Component({\r\n  selector: `${XDescriptionPrefix}`,\r\n  standalone: true,\r\n  imports: [NgClass, NgTemplateOutlet, XOutletDirective],\r\n  templateUrl: './description.component.html',\r\n  styleUrls: ['./style/index.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XDescriptionComponent extends XDescriptionProperty implements OnInit, AfterViewInit, OnChanges {\r\n  @ContentChildren(XDescriptionItemComponent) items!: QueryList<XDescriptionItemComponent>;\r\n\r\n  configService = inject(XConfigService);\r\n\r\n  ngOnInit() {\r\n    this.setClassMap();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    const { size } = changes;\r\n    XIsChange(size) && this.setClassMap();\r\n  }\r\n\r\n  ngAfterViewInit() {\r\n    this.setMerge();\r\n  }\r\n\r\n  setClassMap() {\r\n    XClearClass(this.classMap);\r\n    this.classMap = {\r\n      [`${XDescriptionPrefix}-${this.size}`]: !XIsEmpty(this.size)\r\n    };\r\n  }\r\n\r\n  setFlex(item: XDescriptionItemComponent) {\r\n    let classes: { [property: string]: boolean } = {};\r\n    if (!XIsEmpty(item.justify)) classes[`x-justify-${item.justify}`] = true;\r\n    if (!XIsEmpty(item.align)) classes[`x-align-${item.align}`] = true;\r\n    if (!XIsEmpty(item.direction)) classes[`x-direction-${item.direction}`] = true;\r\n    return classes;\r\n  }\r\n\r\n  setMerge() {\r\n    if (this.gridTemplateColumns) return;\r\n    let gridTemplateColumns: string[] = [];\r\n    this.items.forEach((x) => {\r\n      if (x.width) {\r\n        gridTemplateColumns.push(x.width);\r\n      } else if (x.flex) {\r\n        gridTemplateColumns.push(`${x.flex}fr`);\r\n      }\r\n    });\r\n    this.gridTemplateColumns = gridTemplateColumns.join(' ');\r\n  }\r\n}\r\n","<div class=\"x-description\" [class.x-description-bordered]=\"bordered\" [ngClass]=\"classMap\">\r\n  @if (title) {\r\n    <div class=\"x-description-header\">\r\n      <div class=\"x-description-title\" *xOutlet=\"title\">\r\n        {{ title }}\r\n      </div>\r\n    </div>\r\n  }\r\n  <div class=\"x-description-grid\" [style.grid-template-columns]=\"gridTemplateColumns\">\r\n    @for (item of items; track item; let i = $index) {\r\n      <div\r\n        class=\"x-description-item\"\r\n        [style.grid-area]=\"item.gridArea ? item.gridArea : '1 / ' + (i + 1)\"\r\n        [class.x-description-item-heading]=\"item.heading\"\r\n        [ngClass]=\"setFlex(item)\"\r\n      >\r\n        <div class=\"x-description-item-label\">\r\n          <ng-container *xOutlet=\"item.label\">{{ item.label }}</ng-container>\r\n        </div>\r\n        <div class=\"x-description-item-content\">\r\n          <ng-template [ngTemplateOutlet]=\"item.content\"></ng-template>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { XDescriptionItemComponent } from './description-item.component';\r\nimport { XDescriptionComponent } from './description.component';\r\n\r\n@NgModule({\r\n  imports: [XDescriptionComponent, XDescriptionItemComponent],\r\n  exports: [XDescriptionComponent, XDescriptionItemComponent],\r\n})\r\nexport class XDescriptionModule {}\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":"ng-nest-ui-description.mjs","sources":["../../../../lib/ng-nest/ui/description/description.property.ts","../../../../lib/ng-nest/ui/description/description-item.component.ts","../../../../lib/ng-nest/ui/description/description.component.ts","../../../../lib/ng-nest/ui/description/description.component.html","../../../../lib/ng-nest/ui/description/description.module.ts","../../../../lib/ng-nest/ui/description/ng-nest-ui-description.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\r\nimport { XPropertyFunction, XToBoolean, XToCssPixelValue, XToNumber } from '@ng-nest/ui/core';\r\nimport type { XAlign, XBoolean, XDirection, XJustify, XNumber, XSize, XTemplate } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * Description\r\n * @selector x-description\r\n * @decorator component\r\n */\r\nexport const XDescriptionPrefix = 'x-description';\r\nconst X_DESCRIPTION_CONFIG_NAME = 'description';\r\n\r\n/**\r\n * Description Property\r\n */\r\n@Component({ selector: `${XDescriptionPrefix}-property`, template: '' })\r\nexport class XDescriptionProperty extends XPropertyFunction(X_DESCRIPTION_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 描述列表的标题，支持自定义模板\r\n   * @en_US Describe the title of the list, support custom template\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-description title=\"Title\">\r\n   *   <x-description-item>name</x-description-item>\r\n   * </x-description>\r\n   * <x-description [title]=\"titleTpl\">\r\n   *   <x-description-item>name</x-description-item>\r\n   * </x-description>\r\n   * <ng-template #titleTpl>Title</ng-template>\r\n   * ```\r\n   *\r\n   */\r\n  readonly title = input<XTemplate>();\r\n  /**\r\n   * @zh_CN 是否展示边框\r\n   * @en_US Whether to show column borders\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-description title=\"Title\" bordered>\r\n   *   <x-description-item>name</x-description-item>\r\n   * </x-description>\r\n   * ```\r\n   *\r\n   */\r\n  readonly bordered = input<boolean, XBoolean>(this.config?.bordered ?? false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN grid 布局下定义列宽度\r\n   * @en_US Define column width under grid layout\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-description title=\"Title\" bordered gridTemplateColumns=\"1fr 1fr\">\r\n   *   <x-description-item gridArea=\"1/1/2/2\">name</x-description-item>\r\n   *   <x-description-item gridArea=\"1/2/3/2\">age</x-description-item>\r\n   * </x-description>\r\n   * ```\r\n   *\r\n   */\r\n  readonly gridTemplateColumns = input<string>();\r\n  /**\r\n   * @zh_CN 尺寸\r\n   * @en_US Size\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-description title=\"Title\" size=\"big\">\r\n   *   <x-description-item>name</x-description-item>\r\n   * </x-description>\r\n   * ```\r\n   *\r\n   */\r\n  readonly size = input<XSize>(this.config?.size ?? 'medium');\r\n}\r\n\r\n/**\r\n * Description Item\r\n * @selector x-description-item\r\n * @decorator component\r\n */\r\nexport const XDescriptionItemPrefix = 'x-description-item';\r\n\r\n/**\r\n * Description Item Property\r\n */\r\n@Component({ selector: `${XDescriptionItemPrefix}-property`, template: '' })\r\nexport class XDescriptionItemProperty {\r\n  /**\r\n   * @zh_CN 使用 grid 布局\r\n   * @en_US Use grid layout to merge cells\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-description>\r\n   *   <x-description-item gridArea=\"1/1/2/2\">name</x-description-item>\r\n   * </x-description>\r\n   * ```\r\n   *\r\n   */\r\n  readonly gridArea = input<string>();\r\n  /**\r\n   * @zh_CN 内容的描述，支持自定义模板\r\n   * @en_US Description of content, support custom templates\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-description>\r\n   *   <x-description-item label=\"name1\">name1</x-description-item>\r\n   *   <x-description-item [label]=\"nameTpl\">name2</x-description-item>\r\n   * </x-description>\r\n   * <ng-template #nameTpl></ng-template>\r\n   * ```\r\n   *\r\n   */\r\n  readonly label = input<XTemplate>();\r\n  /**\r\n   * @zh_CN flex 布局下的子元素水平排列方式\r\n   * @en_US Child element under the horizontal arrangement of the layout flex\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-description>\r\n   *   <x-description-item justify=\"end\">end</x-description-item>\r\n   *   <x-description-item justify=\"center\">center</x-description-item>\r\n   *   <x-description-item justify=\"start\">start</x-description-item>\r\n   *   <x-description-item justify=\"space-around\">space-around</x-description-item>\r\n   *   <x-description-item justify=\"space-between\">space-between</x-description-item>\r\n   * </x-description>\r\n   * ```\r\n   *\r\n   */\r\n  readonly justify = input<XJustify>('start');\r\n  /**\r\n   * @zh_CN flex 布局下的子元素垂直排列方式\r\n   * @en_US Child element under the vertical layout flex arrangement\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-description>\r\n   *   <x-description-item align=\"end\">end</x-description-item>\r\n   *   <x-description-item align=\"center\">center</x-description-item>\r\n   *   <x-description-item align=\"start\">start</x-description-item>\r\n   * </x-description>\r\n   * ```\r\n   *\r\n   */\r\n  readonly align = input<XAlign>('start');\r\n  /**\r\n   * @zh_CN flex 布局下的子元素排列方向\r\n   * @en_US Child element under the direction of arrangement of the layout flex\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-description>\r\n   *   <x-description-item direction=\"column\">column</x-description-item>\r\n   *   <x-description-item direction=\"column-reverse\">column-reverse</x-description-item>\r\n   *   <x-description-item direction=\"row\">row</x-description-item>\r\n   *   <x-description-item direction=\"row-reverse\">row-reverse</x-description-item>\r\n   * </x-description>\r\n   * ```\r\n   *\r\n   */\r\n  readonly direction = input<XDirection>('row');\r\n  /**\r\n   * @zh_CN 宽度\r\n   * @en_US Width\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-description>\r\n   *   <x-description-item width=\"100px\">width100</x-description-item>\r\n   *   <x-description-item width=\"200px\">width200</x-description-item>\r\n   * </x-description>\r\n   * ```\r\n   *\r\n   */\r\n  readonly width = input<string, XNumber>('', { transform: XToCssPixelValue });\r\n  /**\r\n   * @zh_CN flex 比重\r\n   * @en_US Flex proportion\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-description>\r\n   *   <x-description-item flex=\"1\">flex1</x-description-item>\r\n   *   <x-description-item flex=\"2\">flex2</x-description-item>\r\n   * </x-description>\r\n   * ```\r\n   *\r\n   */\r\n  readonly flex = input<number, XNumber>(0, { transform: XToNumber });\r\n  /**\r\n   * @zh_CN 是否是标题\r\n   * @en_US Whether it is heading\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-description>\r\n   *   <x-description-item label=\"name\" heading></x-description-item>\r\n   *   <x-description-item>name1</x-description-item>\r\n   * </x-description>\r\n   * ```\r\n   *\r\n   */\r\n  readonly heading = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n}\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, TemplateRef, viewChild } from '@angular/core';\r\nimport { XDescriptionItemPrefix, XDescriptionItemProperty } from './description.property';\r\n\r\n@Component({\r\n  selector: `${XDescriptionItemPrefix}`,\r\n  standalone: true,\r\n  template: `\r\n    <ng-template>\r\n      <ng-content></ng-content>\r\n    </ng-template>\r\n  `,\r\n  styleUrls: ['./style/index.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XDescriptionItemComponent extends XDescriptionItemProperty {\r\n  content = viewChild.required(TemplateRef);\r\n}\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, computed, contentChildren } from '@angular/core';\r\nimport { XDescriptionPrefix, XDescriptionProperty } from './description.property';\r\nimport { XIsEmpty } from '@ng-nest/ui/core';\r\nimport { XDescriptionItemComponent } from './description-item.component';\r\nimport { XOutletDirective } from '@ng-nest/ui/outlet';\r\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\r\n\r\n@Component({\r\n  selector: `${XDescriptionPrefix}`,\r\n  standalone: true,\r\n  imports: [NgClass, NgTemplateOutlet, XOutletDirective],\r\n  templateUrl: './description.component.html',\r\n  styleUrls: ['./style/index.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XDescriptionComponent extends XDescriptionProperty {\r\n  items = contentChildren(XDescriptionItemComponent);\r\n\r\n  classMap = computed(() => ({\r\n    [`${XDescriptionPrefix}-${this.size()}`]: !XIsEmpty(this.size())\r\n  }));\r\n\r\n  gridTemplateColumnsSignal = computed(() => {\r\n    let gridTemplateColumns = this.gridTemplateColumns();\r\n    if (gridTemplateColumns) return gridTemplateColumns;\r\n    const columns: string[] = [];\r\n    this.items().forEach((x) => {\r\n      if (x.width()) {\r\n        columns.push(x.width());\r\n      } else if (x.flex()) {\r\n        columns.push(`${x.flex()}fr`);\r\n      }\r\n    });\r\n    return columns.join(' ');\r\n  });\r\n\r\n  setFlex(item: XDescriptionItemComponent) {\r\n    let classes: { [property: string]: boolean } = {};\r\n    if (!XIsEmpty(item.justify())) classes[`x-justify-${item.justify()}`] = true;\r\n    if (!XIsEmpty(item.align())) classes[`x-align-${item.align()}`] = true;\r\n    if (!XIsEmpty(item.direction())) classes[`x-direction-${item.direction()}`] = true;\r\n    return classes;\r\n  }\r\n}\r\n","<div class=\"x-description\" [class.x-description-bordered]=\"bordered()\" [ngClass]=\"classMap()\">\r\n  @if (title()) {\r\n    <div class=\"x-description-header\">\r\n      <div class=\"x-description-title\" *xOutlet=\"title()\">\r\n        {{ title() }}\r\n      </div>\r\n    </div>\r\n  }\r\n  <div class=\"x-description-grid\" [style.grid-template-columns]=\"gridTemplateColumnsSignal()\">\r\n    @for (item of items(); track item) {\r\n      <div\r\n        class=\"x-description-item\"\r\n        [style.grid-area]=\"item.gridArea() ? item.gridArea() : '1 / ' + ($index + 1)\"\r\n        [class.x-description-item-heading]=\"item.heading()\"\r\n        [ngClass]=\"setFlex(item)\"\r\n      >\r\n        <div class=\"x-description-item-label\">\r\n          <ng-container *xOutlet=\"item.label()\">{{ item.label() }}</ng-container>\r\n        </div>\r\n        <div class=\"x-description-item-content\">\r\n          <ng-template [ngTemplateOutlet]=\"item.content()\"></ng-template>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { XDescriptionItemComponent } from './description-item.component';\r\nimport { XDescriptionComponent } from './description.component';\r\n\r\n@NgModule({\r\n  imports: [XDescriptionComponent, XDescriptionItemComponent],\r\n  exports: [XDescriptionComponent, XDescriptionItemComponent],\r\n})\r\nexport class XDescriptionModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}