@ng-nest/ui 20.1.4 → 20.1.7

package/fesm2022/ng-nest-ui-thought-chain.mjs

@@ -0,0 +1,121 @@
+import * as i0 from '@angular/core';
+import { model, input, Component, inject, ChangeDetectorRef, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
+import { XPropertyFunction, XToBoolean } from '@ng-nest/ui/core';
+import { XTimelineComponent } from '@ng-nest/ui/timeline';
+import { XOutletDirective } from '@ng-nest/ui/outlet';
+import { XIconComponent } from '@ng-nest/ui/icon';
+import { XLoadingComponent } from '@ng-nest/ui/loading';
+import * as i1 from '@ng-nest/ui/collapse';
+import { XCollapseModule } from '@ng-nest/ui/collapse';
+
+/**
+ * ThoughtChain
+ * @selector x-thought-chain
+ * @decorator component
+ */
+const XThoughtChainPrefix = 'x-thought-chain';
+const X_THOUGHT_CHAIN_CONFIG_NAME = 'thoughtChain';
+/**
+ * ThoughtChain Property
+ */
+class XThoughtChainProperty extends XPropertyFunction(X_THOUGHT_CHAIN_CONFIG_NAME) {
+    constructor() {
+        super(...arguments);
+        /**
+         * @zh_CN 思维链节点数据
+         * @en_US ThoughtChain items
+         */
+        this.data = model([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+        /**
+         * @zh_CN 显示序号
+         * @en_US Show number
+         */
+        this.showNumber = input(this.config?.showNumber ?? true, ...(ngDevMode ? [{ debugName: "showNumber", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 尺寸
+         * @en_US Size
+         */
+        this.size = input(this.config?.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        /**
+         * @zh_CN 自定义内容模板
+         * @en_US Content template
+         */
+        this.wrapper = input(...(ngDevMode ? [undefined, { debugName: "wrapper" }] : []));
+        /**
+         * @zh_CN 自定义图标模板
+         * @en_US Icon template
+         */
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        /**
+         * @zh_CN 节点标题右侧额外的内容模板
+         * @en_US Node extra content
+         */
+        this.extra = input(...(ngDevMode ? [undefined, { debugName: "extra" }] : []));
+        /**
+         * @zh_CN 节点详细内容模板
+         * @en_US Node detail content
+         */
+        this.content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : []));
+        /**
+         * @zh_CN 详细内容是否可折叠
+         * @en_US Collapsible detail content
+         */
+        this.collapsible = input(this.config?.collapsible ?? false, ...(ngDevMode ? [{ debugName: "collapsible", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN loading 的类型样式
+         * @en_US Loading type style
+         */
+        this.loadingType = input(this.config?.loadingType ?? 'circular', ...(ngDevMode ? [{ debugName: "loadingType" }] : []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XThoughtChainProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XThoughtChainProperty, isStandalone: true, selector: "x-thought-chain-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, showNumber: { classPropertyName: "showNumber", publicName: "showNumber", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, wrapper: { classPropertyName: "wrapper", publicName: "wrapper", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, extra: { classPropertyName: "extra", publicName: "extra", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, loadingType: { classPropertyName: "loadingType", publicName: "loadingType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XThoughtChainProperty, decorators: [{
+            type: Component,
+            args: [{ selector: `${XThoughtChainPrefix}-property`, template: '' }]
+        }] });
+
+class XThoughtChainComponent extends XThoughtChainProperty {
+    constructor() {
+        super(...arguments);
+        this.cdr = inject(ChangeDetectorRef);
+    }
+    addNode(node) {
+        this.data.update((x) => [...x, node]);
+    }
+    updateNode(node) {
+        const nd = this.data().find((x) => x.id === node.id);
+        if (nd)
+            Object.assign(nd, node);
+        this.cdr.detectChanges();
+    }
+    removeNode(node) {
+        this.data.update((x) => [...x.filter((y) => y.id !== node.id)]);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XThoughtChainComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XThoughtChainComponent, isStandalone: true, selector: "x-thought-chain", usesInheritance: true, ngImport: i0, template: "<div class=\"x-thought-chain\">\r\n  <x-timeline\r\n    [data]=\"data()\"\r\n    [showNumber]=\"showNumber()\"\r\n    [icon]=\"iconTpl\"\r\n    [wrapper]=\"wrapper() ?? wrapperTpl\"\r\n    [size]=\"size()\"\r\n  ></x-timeline>\r\n\r\n  <ng-template #iconTpl let-node=\"$node\" let-index=\"$index\">\r\n    <div\r\n      class=\"x-thought-chain-icon\"\r\n      [class.x-thought-chain-success]=\"node.status === 'success'\"\r\n      [class.x-thought-chain-error]=\"node.status === 'error'\"\r\n      [class.x-thought-chain-pending]=\"node.status === 'pending'\"\r\n      [style.backgroundColor]=\"node.color\"\r\n    >\r\n      @if (showNumber() && !node.icon && !node.loading && node.status !== 'pending') {\r\n        {{ index + 1 }}\r\n      }\r\n      @if (node.icon && !node.loading && node.status !== 'pending') {\r\n        <x-icon [type]=\"node.icon\"></x-icon>\r\n      }\r\n      @if (node.loading || node.status === 'pending') {\r\n        <x-loading inline [x-loading]=\"true\" [size]=\"size()\" [type]=\"loadingType()\"></x-loading>\r\n      }\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #wrapperTpl let-node=\"$node\" let-index=\"$index\">\r\n    @if (collapsible()) {\r\n      <x-collapse class=\"x-thought-chain-collapse\" ghost iconPosition=\"left\">\r\n        <x-collapse-panel [label]=\"labelTpl\">\r\n          <ng-container *xOutlet=\"contentTpl\"></ng-container>\r\n        </x-collapse-panel>\r\n      </x-collapse>\r\n    } @else {\r\n      <ng-container *xOutlet=\"labelTpl\"></ng-container>\r\n      <ng-container *xOutlet=\"contentTpl\"></ng-container>\r\n    }\r\n    <ng-template #labelTpl>\r\n      <div class=\"x-thought-chain-wrapper\">\r\n        <div class=\"x-thought-chain-inner\">\r\n          <div class=\"x-thought-chain-label\">{{ node.label }}</div>\r\n          <div class=\"x-thought-chain-description\">{{ node.description }}</div>\r\n        </div>\r\n        <div class=\"x-thought-chain-extra\">\r\n          <ng-container *xOutlet=\"extra(); context: { $node: node, $index: index }\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template #contentTpl>\r\n      @if (node.content || content()) {\r\n        @if (content()) {\r\n          <div class=\"x-thought-chain-content\">\r\n            <ng-container *xOutlet=\"content(); context: { $node: node, $index: index }\"></ng-container>\r\n          </div>\r\n        } @else {\r\n          <div class=\"x-thought-chain-content\" [innerHTML]=\"node.content\"></div>\r\n        }\r\n      }\r\n    </ng-template>\r\n  </ng-template>\r\n</div>\r\n", styles: [".x-thought-chain{margin:0;padding:0}.x-thought-chain-wrapper{display:flex}.x-thought-chain-inner{flex:1;display:flex;flex-direction:column}.x-thought-chain-label{font-weight:600}.x-thought-chain-description{color:var(--x-text-400)}.x-thought-chain-content{position:relative;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);background-color:var(--x-white)}.x-thought-chain-collapse .x-collapse-panel-header{padding:0;align-items:flex-start}.x-thought-chain-icon{width:100%;height:100%;border-radius:50%;display:flex;justify-content:center;align-items:center}.x-thought-chain-success{background-color:var(--x-success)}.x-thought-chain-error{background-color:var(--x-danger)}.x-thought-chain .x-timeline-big .x-thought-chain-label{line-height:calc(var(--x-height-big) - .5rem)}.x-thought-chain .x-timeline-big .x-thought-chain-content{line-height:calc(var(--x-height-big) - .75rem);padding:var(--x-padding-big)}.x-thought-chain .x-timeline-big .x-thought-chain-collapse .x-collapse-panel-header>.x-icon{height:calc(var(--x-height-big) - .5rem);display:flex;align-items:center}.x-thought-chain .x-timeline-big .x-thought-chain-collapse .x-collapse-panel-content{padding:calc(var(--x-padding-big) * .5) 0}.x-thought-chain .x-timeline-large .x-thought-chain-label{line-height:calc(var(--x-height-large) - .5rem)}.x-thought-chain .x-timeline-large .x-thought-chain-content{line-height:calc(var(--x-height-large) - .75rem);padding:var(--x-padding-large)}.x-thought-chain .x-timeline-large .x-thought-chain-collapse .x-collapse-panel-header>.x-icon{height:calc(var(--x-height-large) - .5rem);display:flex;align-items:center}.x-thought-chain .x-timeline-large .x-thought-chain-collapse .x-collapse-panel-content{padding:calc(var(--x-padding-large) * .5) 0}.x-thought-chain .x-timeline-medium .x-thought-chain-label{line-height:calc(var(--x-height-medium) - .5rem)}.x-thought-chain .x-timeline-medium .x-thought-chain-content{line-height:calc(var(--x-height-medium) - .75rem);padding:var(--x-padding-medium)}.x-thought-chain .x-timeline-medium .x-thought-chain-collapse .x-collapse-panel-header>.x-icon{height:calc(var(--x-height-medium) - .5rem);display:flex;align-items:center}.x-thought-chain .x-timeline-medium .x-thought-chain-collapse .x-collapse-panel-content{padding:calc(var(--x-padding-medium) * .5) 0}.x-thought-chain .x-timeline-small .x-thought-chain-label{line-height:calc(var(--x-height-small) - .5rem)}.x-thought-chain .x-timeline-small .x-thought-chain-content{line-height:calc(var(--x-height-small) - .75rem);padding:var(--x-padding-small)}.x-thought-chain .x-timeline-small .x-thought-chain-collapse .x-collapse-panel-header>.x-icon{height:calc(var(--x-height-small) - .5rem);display:flex;align-items:center}.x-thought-chain .x-timeline-small .x-thought-chain-collapse .x-collapse-panel-content{padding:calc(var(--x-padding-small) * .5) 0}.x-thought-chain .x-timeline-mini .x-thought-chain-label{line-height:calc(var(--x-height-mini) - .5rem)}.x-thought-chain .x-timeline-mini .x-thought-chain-content{line-height:calc(var(--x-height-mini) - .75rem);padding:var(--x-padding-mini)}.x-thought-chain .x-timeline-mini .x-thought-chain-collapse .x-collapse-panel-header>.x-icon{height:calc(var(--x-height-mini) - .5rem);display:flex;align-items:center}.x-thought-chain .x-timeline-mini .x-thought-chain-collapse .x-collapse-panel-content{padding:calc(var(--x-padding-mini) * .5) 0}\n"], dependencies: [{ kind: "component", type: XTimelineComponent, selector: "x-timeline" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XLoadingComponent, selector: "x-loading, [x-loading]" }, { kind: "ngmodule", type: XCollapseModule }, { kind: "component", type: i1.XCollapseComponent, selector: "x-collapse" }, { kind: "component", type: i1.XCollapsePanelComponent, selector: "x-collapse-panel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XThoughtChainComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'x-thought-chain', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [XTimelineComponent, XOutletDirective, XIconComponent, XLoadingComponent, XCollapseModule], template: "<div class=\"x-thought-chain\">\r\n  <x-timeline\r\n    [data]=\"data()\"\r\n    [showNumber]=\"showNumber()\"\r\n    [icon]=\"iconTpl\"\r\n    [wrapper]=\"wrapper() ?? wrapperTpl\"\r\n    [size]=\"size()\"\r\n  ></x-timeline>\r\n\r\n  <ng-template #iconTpl let-node=\"$node\" let-index=\"$index\">\r\n    <div\r\n      class=\"x-thought-chain-icon\"\r\n      [class.x-thought-chain-success]=\"node.status === 'success'\"\r\n      [class.x-thought-chain-error]=\"node.status === 'error'\"\r\n      [class.x-thought-chain-pending]=\"node.status === 'pending'\"\r\n      [style.backgroundColor]=\"node.color\"\r\n    >\r\n      @if (showNumber() && !node.icon && !node.loading && node.status !== 'pending') {\r\n        {{ index + 1 }}\r\n      }\r\n      @if (node.icon && !node.loading && node.status !== 'pending') {\r\n        <x-icon [type]=\"node.icon\"></x-icon>\r\n      }\r\n      @if (node.loading || node.status === 'pending') {\r\n        <x-loading inline [x-loading]=\"true\" [size]=\"size()\" [type]=\"loadingType()\"></x-loading>\r\n      }\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #wrapperTpl let-node=\"$node\" let-index=\"$index\">\r\n    @if (collapsible()) {\r\n      <x-collapse class=\"x-thought-chain-collapse\" ghost iconPosition=\"left\">\r\n        <x-collapse-panel [label]=\"labelTpl\">\r\n          <ng-container *xOutlet=\"contentTpl\"></ng-container>\r\n        </x-collapse-panel>\r\n      </x-collapse>\r\n    } @else {\r\n      <ng-container *xOutlet=\"labelTpl\"></ng-container>\r\n      <ng-container *xOutlet=\"contentTpl\"></ng-container>\r\n    }\r\n    <ng-template #labelTpl>\r\n      <div class=\"x-thought-chain-wrapper\">\r\n        <div class=\"x-thought-chain-inner\">\r\n          <div class=\"x-thought-chain-label\">{{ node.label }}</div>\r\n          <div class=\"x-thought-chain-description\">{{ node.description }}</div>\r\n        </div>\r\n        <div class=\"x-thought-chain-extra\">\r\n          <ng-container *xOutlet=\"extra(); context: { $node: node, $index: index }\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template #contentTpl>\r\n      @if (node.content || content()) {\r\n        @if (content()) {\r\n          <div class=\"x-thought-chain-content\">\r\n            <ng-container *xOutlet=\"content(); context: { $node: node, $index: index }\"></ng-container>\r\n          </div>\r\n        } @else {\r\n          <div class=\"x-thought-chain-content\" [innerHTML]=\"node.content\"></div>\r\n        }\r\n      }\r\n    </ng-template>\r\n  </ng-template>\r\n</div>\r\n", styles: [".x-thought-chain{margin:0;padding:0}.x-thought-chain-wrapper{display:flex}.x-thought-chain-inner{flex:1;display:flex;flex-direction:column}.x-thought-chain-label{font-weight:600}.x-thought-chain-description{color:var(--x-text-400)}.x-thought-chain-content{position:relative;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);background-color:var(--x-white)}.x-thought-chain-collapse .x-collapse-panel-header{padding:0;align-items:flex-start}.x-thought-chain-icon{width:100%;height:100%;border-radius:50%;display:flex;justify-content:center;align-items:center}.x-thought-chain-success{background-color:var(--x-success)}.x-thought-chain-error{background-color:var(--x-danger)}.x-thought-chain .x-timeline-big .x-thought-chain-label{line-height:calc(var(--x-height-big) - .5rem)}.x-thought-chain .x-timeline-big .x-thought-chain-content{line-height:calc(var(--x-height-big) - .75rem);padding:var(--x-padding-big)}.x-thought-chain .x-timeline-big .x-thought-chain-collapse .x-collapse-panel-header>.x-icon{height:calc(var(--x-height-big) - .5rem);display:flex;align-items:center}.x-thought-chain .x-timeline-big .x-thought-chain-collapse .x-collapse-panel-content{padding:calc(var(--x-padding-big) * .5) 0}.x-thought-chain .x-timeline-large .x-thought-chain-label{line-height:calc(var(--x-height-large) - .5rem)}.x-thought-chain .x-timeline-large .x-thought-chain-content{line-height:calc(var(--x-height-large) - .75rem);padding:var(--x-padding-large)}.x-thought-chain .x-timeline-large .x-thought-chain-collapse .x-collapse-panel-header>.x-icon{height:calc(var(--x-height-large) - .5rem);display:flex;align-items:center}.x-thought-chain .x-timeline-large .x-thought-chain-collapse .x-collapse-panel-content{padding:calc(var(--x-padding-large) * .5) 0}.x-thought-chain .x-timeline-medium .x-thought-chain-label{line-height:calc(var(--x-height-medium) - .5rem)}.x-thought-chain .x-timeline-medium .x-thought-chain-content{line-height:calc(var(--x-height-medium) - .75rem);padding:var(--x-padding-medium)}.x-thought-chain .x-timeline-medium .x-thought-chain-collapse .x-collapse-panel-header>.x-icon{height:calc(var(--x-height-medium) - .5rem);display:flex;align-items:center}.x-thought-chain .x-timeline-medium .x-thought-chain-collapse .x-collapse-panel-content{padding:calc(var(--x-padding-medium) * .5) 0}.x-thought-chain .x-timeline-small .x-thought-chain-label{line-height:calc(var(--x-height-small) - .5rem)}.x-thought-chain .x-timeline-small .x-thought-chain-content{line-height:calc(var(--x-height-small) - .75rem);padding:var(--x-padding-small)}.x-thought-chain .x-timeline-small .x-thought-chain-collapse .x-collapse-panel-header>.x-icon{height:calc(var(--x-height-small) - .5rem);display:flex;align-items:center}.x-thought-chain .x-timeline-small .x-thought-chain-collapse .x-collapse-panel-content{padding:calc(var(--x-padding-small) * .5) 0}.x-thought-chain .x-timeline-mini .x-thought-chain-label{line-height:calc(var(--x-height-mini) - .5rem)}.x-thought-chain .x-timeline-mini .x-thought-chain-content{line-height:calc(var(--x-height-mini) - .75rem);padding:var(--x-padding-mini)}.x-thought-chain .x-timeline-mini .x-thought-chain-collapse .x-collapse-panel-header>.x-icon{height:calc(var(--x-height-mini) - .5rem);display:flex;align-items:center}.x-thought-chain .x-timeline-mini .x-thought-chain-collapse .x-collapse-panel-content{padding:calc(var(--x-padding-mini) * .5) 0}\n"] }]
+        }] });
+
+class XThoughtChainModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XThoughtChainModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: XThoughtChainModule, imports: [XThoughtChainComponent], exports: [XThoughtChainComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XThoughtChainModule, imports: [XThoughtChainComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XThoughtChainModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [XThoughtChainComponent],
+                    imports: [XThoughtChainComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { XThoughtChainComponent, XThoughtChainModule, XThoughtChainPrefix, XThoughtChainProperty };
+//# sourceMappingURL=ng-nest-ui-thought-chain.mjs.map

package/fesm2022/ng-nest-ui-thought-chain.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-nest-ui-thought-chain.mjs","sources":["../../../../lib/ng-nest/ui/thought-chain/thought-chain.property.ts","../../../../lib/ng-nest/ui/thought-chain/thought-chain.component.ts","../../../../lib/ng-nest/ui/thought-chain/thought-chain.component.html","../../../../lib/ng-nest/ui/thought-chain/thought-chain.module.ts","../../../../lib/ng-nest/ui/thought-chain/ng-nest-ui-thought-chain.ts"],"sourcesContent":["import { Component, input, model } from '@angular/core';\r\nimport { XPropertyFunction, XBoolean, XToBoolean, XSize, XTemplate } from '@ng-nest/ui/core';\r\nimport { XTimelineNode } from '@ng-nest/ui/timeline';\r\nimport type { XLoadingType } from '@ng-nest/ui/loading';\r\n\r\n/**\r\n * ThoughtChain\r\n * @selector x-thought-chain\r\n * @decorator component\r\n */\r\nexport const XThoughtChainPrefix = 'x-thought-chain';\r\nconst X_THOUGHT_CHAIN_CONFIG_NAME = 'thoughtChain';\r\n\r\n/**\r\n * ThoughtChain Property\r\n */\r\n@Component({ selector: `${XThoughtChainPrefix}-property`, template: '' })\r\nexport class XThoughtChainProperty extends XPropertyFunction(X_THOUGHT_CHAIN_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 思维链节点数据\r\n   * @en_US ThoughtChain items\r\n   */\r\n  readonly data = model<XThoughtChainNode[]>([]);\r\n  /**\r\n   * @zh_CN 显示序号\r\n   * @en_US Show number\r\n   */\r\n  readonly showNumber = input<boolean, XBoolean>(this.config?.showNumber ?? true, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 尺寸\r\n   * @en_US Size\r\n   */\r\n  readonly size = input<XSize>(this.config?.size ?? 'medium');\r\n  /**\r\n   * @zh_CN 自定义内容模板\r\n   * @en_US Content template\r\n   */\r\n  readonly wrapper = input<XTemplate>();\r\n  /**\r\n   * @zh_CN 自定义图标模板\r\n   * @en_US Icon template\r\n   */\r\n  readonly icon = input<XTemplate>();\r\n  /**\r\n   * @zh_CN 节点标题右侧额外的内容模板\r\n   * @en_US Node extra content\r\n   */\r\n  readonly extra = input<XTemplate>();\r\n  /**\r\n   * @zh_CN 节点详细内容模板\r\n   * @en_US Node detail content\r\n   */\r\n  readonly content = input<XTemplate>();\r\n  /**\r\n   * @zh_CN 详细内容是否可折叠\r\n   * @en_US Collapsible detail content\r\n   */\r\n  readonly collapsible = input<boolean, XBoolean>(this.config?.collapsible ?? false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN loading 的类型样式\r\n   * @en_US Loading type style\r\n   */\r\n  readonly loadingType = input<XLoadingType>(this.config?.loadingType ?? 'circular');\r\n}\r\n\r\n/**\r\n * @zh_CN 思维链节点\r\n * @en_US Thought chain node\r\n */\r\nexport interface XThoughtChainNode extends XTimelineNode {\r\n  /**\r\n   * @zh_CN 节点描述\r\n   * @en_US Node description\r\n   */\r\n  description?: string;\r\n  /**\r\n   * @zh_CN 节点状态\r\n   * @en_US Node status\r\n   */\r\n  status?: XThoughtChainNodeStatus;\r\n}\r\n\r\n/**\r\n * @zh_CN 节点状态\r\n * @en_US Node status\r\n */\r\nexport type XThoughtChainNodeStatus = 'success' | 'error' | 'pending';\r\n","import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, ViewEncapsulation } from '@angular/core';\r\nimport { XThoughtChainNode, XThoughtChainProperty } from './thought-chain.property';\r\nimport { XTimelineComponent } from '@ng-nest/ui/timeline';\r\nimport { XOutletDirective } from '@ng-nest/ui/outlet';\r\nimport { XIconComponent } from '@ng-nest/ui/icon';\r\nimport { XLoadingComponent } from '@ng-nest/ui/loading';\r\nimport { XCollapseModule } from '@ng-nest/ui/collapse';\r\n\r\n@Component({\r\n  selector: 'x-thought-chain',\r\n  templateUrl: './thought-chain.component.html',\r\n  styleUrls: ['./thought-chain.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [XTimelineComponent, XOutletDirective, XIconComponent, XLoadingComponent, XCollapseModule]\r\n})\r\nexport class XThoughtChainComponent extends XThoughtChainProperty {\r\n  cdr = inject(ChangeDetectorRef);\r\n  addNode(node: XThoughtChainNode) {\r\n    this.data.update((x) => [...x, node]);\r\n  }\r\n\r\n  updateNode(node: XThoughtChainNode) {\r\n    const nd = this.data().find((x) => x.id === node.id);\r\n    if (nd) Object.assign(nd, node);\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  removeNode(node: XThoughtChainNode) {\r\n    this.data.update((x) => [...x.filter((y) => y.id !== node.id)]);\r\n  }\r\n}\r\n","<div class=\"x-thought-chain\">\r\n  <x-timeline\r\n    [data]=\"data()\"\r\n    [showNumber]=\"showNumber()\"\r\n    [icon]=\"iconTpl\"\r\n    [wrapper]=\"wrapper() ?? wrapperTpl\"\r\n    [size]=\"size()\"\r\n  ></x-timeline>\r\n\r\n  <ng-template #iconTpl let-node=\"$node\" let-index=\"$index\">\r\n    <div\r\n      class=\"x-thought-chain-icon\"\r\n      [class.x-thought-chain-success]=\"node.status === 'success'\"\r\n      [class.x-thought-chain-error]=\"node.status === 'error'\"\r\n      [class.x-thought-chain-pending]=\"node.status === 'pending'\"\r\n      [style.backgroundColor]=\"node.color\"\r\n    >\r\n      @if (showNumber() && !node.icon && !node.loading && node.status !== 'pending') {\r\n        {{ index + 1 }}\r\n      }\r\n      @if (node.icon && !node.loading && node.status !== 'pending') {\r\n        <x-icon [type]=\"node.icon\"></x-icon>\r\n      }\r\n      @if (node.loading || node.status === 'pending') {\r\n        <x-loading inline [x-loading]=\"true\" [size]=\"size()\" [type]=\"loadingType()\"></x-loading>\r\n      }\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #wrapperTpl let-node=\"$node\" let-index=\"$index\">\r\n    @if (collapsible()) {\r\n      <x-collapse class=\"x-thought-chain-collapse\" ghost iconPosition=\"left\">\r\n        <x-collapse-panel [label]=\"labelTpl\">\r\n          <ng-container *xOutlet=\"contentTpl\"></ng-container>\r\n        </x-collapse-panel>\r\n      </x-collapse>\r\n    } @else {\r\n      <ng-container *xOutlet=\"labelTpl\"></ng-container>\r\n      <ng-container *xOutlet=\"contentTpl\"></ng-container>\r\n    }\r\n    <ng-template #labelTpl>\r\n      <div class=\"x-thought-chain-wrapper\">\r\n        <div class=\"x-thought-chain-inner\">\r\n          <div class=\"x-thought-chain-label\">{{ node.label }}</div>\r\n          <div class=\"x-thought-chain-description\">{{ node.description }}</div>\r\n        </div>\r\n        <div class=\"x-thought-chain-extra\">\r\n          <ng-container *xOutlet=\"extra(); context: { $node: node, $index: index }\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template #contentTpl>\r\n      @if (node.content || content()) {\r\n        @if (content()) {\r\n          <div class=\"x-thought-chain-content\">\r\n            <ng-container *xOutlet=\"content(); context: { $node: node, $index: index }\"></ng-container>\r\n          </div>\r\n        } @else {\r\n          <div class=\"x-thought-chain-content\" [innerHTML]=\"node.content\"></div>\r\n        }\r\n      }\r\n    </ng-template>\r\n  </ng-template>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { XThoughtChainComponent } from './thought-chain.component';\r\n\r\n@NgModule({\r\n  exports: [XThoughtChainComponent],\r\n  imports: [XThoughtChainComponent]\r\n})\r\nexport class XThoughtChainModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,11 +1,12 @@
 import * as i0 from '@angular/core';
 import { input, Component, computed, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
-import { XPropertyFunction, XToDataArray, XIsEmpty } from '@ng-nest/ui/core';
+import { XPropertyFunction, XToDataArray, XToBoolean, XIsEmpty } from '@ng-nest/ui/core';
 import { NgClass, DatePipe } from '@angular/common';
 import { XIconComponent } from '@ng-nest/ui/icon';
 import { XTimeAgoPipe } from '@ng-nest/ui/time-ago';
 import { XLinkComponent } from '@ng-nest/ui/link';
 import { XOutletDirective } from '@ng-nest/ui/outlet';
+import { XLoadingComponent } from '@ng-nest/ui/loading';
 
 /**
  * Timeline
@@ -30,14 +31,34 @@ class XTimelineProperty extends XPropertyFunction(X_TIMELINE_CONFIG_NAME) {
          * @en_US Content template
          */
         this.wrapper = input(...(ngDevMode ? [undefined, { debugName: "wrapper" }] : []));
+        /**
+         * @zh_CN 图标模板
+         * @en_US Icon template
+         */
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        /**
+         * @zh_CN 显示序号
+         * @en_US Show number
+         */
+        this.showNumber = input(this.config?.showNumber ?? false, ...(ngDevMode ? [{ debugName: "showNumber", transform: XToBoolean }] : [{ transform: XToBoolean }]));
         /**
          * @zh_CN 时间轴的相对位置
          * @en_US Content and timeline relative position
          */
         this.mode = input(this.config?.mode ?? 'left', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        /**
+         * @zh_CN loading 的类型样式
+         * @en_US Loading type style
+         */
+        this.loadingType = input(this.config?.loadingType ?? 'circular', ...(ngDevMode ? [{ debugName: "loadingType" }] : []));
+        /**
+         * @zh_CN 尺寸
+         * @en_US Size
+         */
+        this.size = input(this.config?.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XTimelineProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XTimelineProperty, isStandalone: true, selector: "x-timeline-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, wrapper: { classPropertyName: "wrapper", publicName: "wrapper", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XTimelineProperty, isStandalone: true, selector: "x-timeline-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, wrapper: { classPropertyName: "wrapper", publicName: "wrapper", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showNumber: { classPropertyName: "showNumber", publicName: "showNumber", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, loadingType: { classPropertyName: "loadingType", publicName: "loadingType", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XTimelineProperty, decorators: [{
             type: Component,
@@ -48,7 +69,8 @@ class XTimelineComponent extends XTimelineProperty {
     constructor() {
         super(...arguments);
         this.classMap = computed(() => ({
-            [`${XTimelinePrefix}-${this.mode()}`]: !XIsEmpty(this.mode())
+            [`${XTimelinePrefix}-${this.mode()}`]: !XIsEmpty(this.mode()),
+            [`${XTimelinePrefix}-${this.size()}`]: !XIsEmpty(this.size())
         }), ...(ngDevMode ? [{ debugName: "classMap" }] : []));
         this.nodes = computed(() => {
             const data = this.data();
@@ -73,11 +95,11 @@ class XTimelineComponent extends XTimelineProperty {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XTimelineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XTimelineComponent, isStandalone: true, selector: "x-timeline", usesInheritance: true, ngImport: i0, template: "<div #timeline class=\"x-timeline\" [ngClass]=\"classMap()\">\r\n  <ul>\r\n    @for (node of nodes(); track node.id) {\r\n      <li [class.x-timeline-loading]=\"node.loading\">\r\n        <div class=\"x-timeline-tail\" [class.x-timeline-tail-dashed]=\"node.dashed\"></div>\r\n        <div\r\n          class=\"x-timeline-icon {{ node.type ? 'x-timeline-' + node.type : '' }} {{\r\n            node.size ? 'x-timeline-' + node.size : ''\r\n          }}\"\r\n          [style.background-color]=\"node.color\"\r\n        >\r\n          @if (node.icon && !node.loading) {\r\n            <x-icon [type]=\"node.icon\"></x-icon>\r\n          }\r\n          @if (node.loading) {\r\n            <x-icon type=\"fto-loader\" [spin]=\"true\"></x-icon>\r\n          }\r\n        </div>\r\n        <div class=\"x-timeline-wrapper\">\r\n          <ng-container *xOutlet=\"wrapper(); context: { $node: node }\">\r\n            <div class=\"x-timeline-label\">\r\n              @if (node.label) {\r\n                <x-link>{{ node.label }}</x-link>\r\n              }\r\n              <span class=\"x-timeline-time\" [title]=\"node.time | date: 'yyyy-MM-dd HH:mm:ss'\">{{\r\n                node.time | xTimeAgo\r\n              }}</span>\r\n            </div>\r\n            <div class=\"x-timeline-content\">{{ node.content }}</div>\r\n          </ng-container>\r\n        </div>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".x-timeline{margin:0;padding:0}.x-timeline{display:block}.x-timeline ul,.x-timeline li{margin:0;padding:0;list-style:none}.x-timeline>ul{padding-left:.625rem}.x-timeline>ul>li{padding-bottom:1rem;position:relative}.x-timeline>ul>li:last-child .x-timeline-tail{border-left-color:transparent}.x-timeline>ul>li:first-child .x-timeline-tail{top:1.25rem}.x-timeline-tail{position:absolute;height:100%;border-left:.125rem solid var(--x-border)}.x-timeline-tail-dashed{border-left-style:dashed}.x-timeline-icon{position:absolute;background-color:var(--x-border);border-radius:50%;display:flex;justify-content:center;align-items:center;color:var(--x-white);width:1.375rem;height:1.375rem;border:.0625rem solid var(--x-background-100)}.x-timeline-wrapper{position:relative}.x-timeline-label{display:flex;align-items:center;margin-bottom:.125rem}.x-timeline-label>x-link{margin-right:.325rem}.x-timeline-content{color:var(--x-text-300)}.x-timeline-time{font-size:var(--x-font-size);color:var(--x-text-400)}.x-timeline-loading .x-timeline-icon{color:var(--x-text-400);font-size:1.25rem;background-color:transparent!important}.x-timeline-left .x-timeline-icon{left:-.625rem}.x-timeline-left .x-timeline-wrapper{padding-left:1.625rem}.x-timeline-right .x-timeline-icon{right:-.625rem}.x-timeline-right .x-timeline-wrapper{padding-right:1.625rem;text-align:right}.x-timeline-right .x-timeline-tail{right:0}.x-timeline-right .x-timeline-label{justify-content:flex-end}.x-timeline-right .x-timeline-content{text-align:right}.x-timeline-alternate .x-timeline-icon{left:50%;margin-left:-.6875rem}.x-timeline-alternate .x-timeline-tail{left:50%;margin-left:-.0625rem}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{width:50%;padding-right:1.625rem;text-align:right}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-label{justify-content:flex-end}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-content{text-align:right}.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{left:50%;width:50%;padding-left:1.625rem}.x-timeline-primary{background-color:var(--x-primary)}.x-timeline-success{background-color:var(--x-success)}.x-timeline-warning{background-color:var(--x-warning)}.x-timeline-danger{background-color:var(--x-danger)}.x-timeline-info{background-color:var(--x-info)}.x-timeline-big{width:2.175rem;height:2.175rem;left:-1.025rem;font-size:1.55rem}.x-timeline-large{width:1.875rem;height:1.875rem;left:-.875rem;font-size:1.25rem}.x-timeline-medium{width:1.675rem;height:1.675rem;left:-.775rem;font-size:1.05rem}.x-timeline-small{width:1.5rem;height:1.5rem;left:-.6875rem;font-size:.875rem}.x-timeline-mini{width:1.375rem;height:1.375rem;left:-.625rem;font-size:.75rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: XTimeAgoPipe, name: "xTimeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XTimelineComponent, isStandalone: true, selector: "x-timeline", usesInheritance: true, ngImport: i0, template: "<div #timeline class=\"x-timeline\" [class.x-timeline-number]=\"showNumber()\" [ngClass]=\"classMap()\">\r\n  <ul>\r\n    @for (node of nodes(); track node.id) {\r\n      <li [class.x-timeline-loading]=\"node.loading\">\r\n        <div class=\"x-timeline-tail\" [class.x-timeline-tail-dashed]=\"node.dashed\"></div>\r\n        @if (icon()) {\r\n          <div class=\"x-timeline-icon\">\r\n            <ng-container *xOutlet=\"icon(); context: { $node: node, $index }\"></ng-container>\r\n          </div>\r\n        } @else {\r\n          <div\r\n            class=\"x-timeline-icon {{ node.type ? 'x-timeline-' + node.type : '' }}\"\r\n            [style.background-color]=\"node.color\"\r\n          >\r\n            @if (showNumber() && !node.icon && !node.loading) {\r\n              {{ $index + 1 }}\r\n            }\r\n            @if (node.icon && !node.loading) {\r\n              <x-icon [type]=\"node.icon\"></x-icon>\r\n            }\r\n            @if (node.loading) {\r\n              <x-loading inline [x-loading]=\"true\" [type]=\"loadingType()\"></x-loading>\r\n            }\r\n          </div>\r\n        }\r\n        <div class=\"x-timeline-wrapper\">\r\n          <ng-container *xOutlet=\"wrapper(); context: { $node: node, $index }\">\r\n            <div class=\"x-timeline-label\">\r\n              @if (node.label) {\r\n                <x-link>{{ node.label }}</x-link>\r\n              }\r\n              <span class=\"x-timeline-time\" [title]=\"node.time | date: 'yyyy-MM-dd HH:mm:ss'\">{{\r\n                node.time | xTimeAgo\r\n              }}</span>\r\n            </div>\r\n            <div class=\"x-timeline-content\">{{ node.content }}</div>\r\n          </ng-container>\r\n        </div>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".x-timeline{margin:0;padding:0}.x-timeline{display:block}.x-timeline ul,.x-timeline li{margin:0;padding:0;list-style:none}.x-timeline>ul{padding-left:.8125rem}.x-timeline>ul>li{position:relative}.x-timeline>ul>li:not(:last-child){padding-bottom:1rem}.x-timeline>ul>li:last-child .x-timeline-tail{border-left-color:transparent}.x-timeline>ul>li:first-child .x-timeline-tail{top:1.25rem}.x-timeline-tail{position:absolute;height:100%;border-left:.125rem solid var(--x-border)}.x-timeline-tail-dashed{border-left-style:dashed}.x-timeline-icon{position:absolute;background-color:var(--x-border);border-radius:50%;display:flex;justify-content:center;align-items:center;color:var(--x-white);width:1.75rem;height:1.75rem;border:.0625rem solid var(--x-background-100)}.x-timeline-wrapper{position:relative}.x-timeline-label{display:flex;align-items:center;margin-bottom:.125rem}.x-timeline-label>x-link{margin-right:.325rem}.x-timeline-content{color:var(--x-text-300)}.x-timeline-time{font-size:var(--x-font-size);color:var(--x-text-400)}.x-timeline-loading .x-timeline-icon{color:var(--x-text-400);font-size:1.25rem;background-color:transparent!important}.x-timeline-number .x-timeline-icon{background-color:var(--x-background-a900)}.x-timeline-primary{background-color:var(--x-primary)}.x-timeline-success{background-color:var(--x-success)}.x-timeline-warning{background-color:var(--x-warning)}.x-timeline-danger{background-color:var(--x-danger)}.x-timeline-info{background-color:var(--x-info)}.x-timeline-big .x-timeline-label{line-height:calc(var(--x-height-big) - .5rem)}.x-timeline-big .x-timeline-wrapper{padding-left:calc(var(--x-height-big) - .5rem)}.x-timeline-big .x-timeline-icon{width:calc(var(--x-height-big) - .5rem);height:calc(var(--x-height-big) - .5rem)}.x-timeline-big.x-timeline-left .x-timeline-icon{left:calc(.0625rem - (var(--x-height-big) - .5rem) * .5)}.x-timeline-big.x-timeline-left .x-timeline-wrapper{padding-left:calc(var(--x-height-big) - .5rem)}.x-timeline-big.x-timeline-right .x-timeline-icon{right:calc(.0625rem - (var(--x-height-big) - .5rem) * .5)}.x-timeline-big.x-timeline-right .x-timeline-wrapper{padding-right:calc(var(--x-height-big) - .5rem);text-align:right}.x-timeline-big.x-timeline-alternate .x-timeline-icon{margin-left:calc(.0625rem - (var(--x-height-big) - .5rem) * .5)}.x-timeline-big.x-timeline-alternate .x-timeline-tail{margin-left:-.0625rem}.x-timeline-big.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{padding-right:calc(var(--x-height-big) - .5rem)}.x-timeline-big.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{padding-left:calc(var(--x-height-big) - .5rem)}.x-timeline-large .x-timeline-label{line-height:calc(var(--x-height-large) - .5rem)}.x-timeline-large .x-timeline-wrapper{padding-left:calc(var(--x-height-large) - .5rem)}.x-timeline-large .x-timeline-icon{width:calc(var(--x-height-large) - .5rem);height:calc(var(--x-height-large) - .5rem)}.x-timeline-large.x-timeline-left .x-timeline-icon{left:calc(.0625rem - (var(--x-height-large) - .5rem) * .5)}.x-timeline-large.x-timeline-left .x-timeline-wrapper{padding-left:calc(var(--x-height-large) - .5rem)}.x-timeline-large.x-timeline-right .x-timeline-icon{right:calc(.0625rem - (var(--x-height-large) - .5rem) * .5)}.x-timeline-large.x-timeline-right .x-timeline-wrapper{padding-right:calc(var(--x-height-large) - .5rem);text-align:right}.x-timeline-large.x-timeline-alternate .x-timeline-icon{margin-left:calc(.0625rem - (var(--x-height-large) - .5rem) * .5)}.x-timeline-large.x-timeline-alternate .x-timeline-tail{margin-left:-.0625rem}.x-timeline-large.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{padding-right:calc(var(--x-height-large) - .5rem)}.x-timeline-large.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{padding-left:calc(var(--x-height-large) - .5rem)}.x-timeline-medium .x-timeline-label{line-height:calc(var(--x-height-medium) - .5rem)}.x-timeline-medium .x-timeline-wrapper{padding-left:calc(var(--x-height-medium) - .5rem)}.x-timeline-medium .x-timeline-icon{width:calc(var(--x-height-medium) - .5rem);height:calc(var(--x-height-medium) - .5rem)}.x-timeline-medium.x-timeline-left .x-timeline-icon{left:calc(.0625rem - (var(--x-height-medium) - .5rem) * .5)}.x-timeline-medium.x-timeline-left .x-timeline-wrapper{padding-left:calc(var(--x-height-medium) - .5rem)}.x-timeline-medium.x-timeline-right .x-timeline-icon{right:calc(.0625rem - (var(--x-height-medium) - .5rem) * .5)}.x-timeline-medium.x-timeline-right .x-timeline-wrapper{padding-right:calc(var(--x-height-medium) - .5rem);text-align:right}.x-timeline-medium.x-timeline-alternate .x-timeline-icon{margin-left:calc(.0625rem - (var(--x-height-medium) - .5rem) * .5)}.x-timeline-medium.x-timeline-alternate .x-timeline-tail{margin-left:-.0625rem}.x-timeline-medium.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{padding-right:calc(var(--x-height-medium) - .5rem)}.x-timeline-medium.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{padding-left:calc(var(--x-height-medium) - .5rem)}.x-timeline-small .x-timeline-label{line-height:calc(var(--x-height-small) - .5rem)}.x-timeline-small .x-timeline-wrapper{padding-left:calc(var(--x-height-small) - .5rem)}.x-timeline-small .x-timeline-icon{width:calc(var(--x-height-small) - .5rem);height:calc(var(--x-height-small) - .5rem)}.x-timeline-small.x-timeline-left .x-timeline-icon{left:calc(.0625rem - (var(--x-height-small) - .5rem) * .5)}.x-timeline-small.x-timeline-left .x-timeline-wrapper{padding-left:calc(var(--x-height-small) - .5rem)}.x-timeline-small.x-timeline-right .x-timeline-icon{right:calc(.0625rem - (var(--x-height-small) - .5rem) * .5)}.x-timeline-small.x-timeline-right .x-timeline-wrapper{padding-right:calc(var(--x-height-small) - .5rem);text-align:right}.x-timeline-small.x-timeline-alternate .x-timeline-icon{margin-left:calc(.0625rem - (var(--x-height-small) - .5rem) * .5)}.x-timeline-small.x-timeline-alternate .x-timeline-tail{margin-left:-.0625rem}.x-timeline-small.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{padding-right:calc(var(--x-height-small) - .5rem)}.x-timeline-small.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{padding-left:calc(var(--x-height-small) - .5rem)}.x-timeline-mini .x-timeline-label{line-height:calc(var(--x-height-mini) - .5rem)}.x-timeline-mini .x-timeline-wrapper{padding-left:calc(var(--x-height-mini) - .5rem)}.x-timeline-mini .x-timeline-icon{width:calc(var(--x-height-mini) - .5rem);height:calc(var(--x-height-mini) - .5rem)}.x-timeline-mini.x-timeline-left .x-timeline-icon{left:calc(.0625rem - (var(--x-height-mini) - .5rem) * .5)}.x-timeline-mini.x-timeline-left .x-timeline-wrapper{padding-left:calc(var(--x-height-mini) - .5rem)}.x-timeline-mini.x-timeline-right .x-timeline-icon{right:calc(.0625rem - (var(--x-height-mini) - .5rem) * .5)}.x-timeline-mini.x-timeline-right .x-timeline-wrapper{padding-right:calc(var(--x-height-mini) - .5rem);text-align:right}.x-timeline-mini.x-timeline-alternate .x-timeline-icon{margin-left:calc(.0625rem - (var(--x-height-mini) - .5rem) * .5)}.x-timeline-mini.x-timeline-alternate .x-timeline-tail{margin-left:-.0625rem}.x-timeline-mini.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{padding-right:calc(var(--x-height-mini) - .5rem)}.x-timeline-mini.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{padding-left:calc(var(--x-height-mini) - .5rem)}.x-timeline-right .x-timeline-tail{right:0}.x-timeline-right .x-timeline-label{justify-content:flex-end}.x-timeline-right .x-timeline-content{text-align:right}.x-timeline-alternate .x-timeline-icon,.x-timeline-alternate .x-timeline-tail{left:50%}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{width:50%;text-align:right}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-label{justify-content:flex-end}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-content{text-align:right}.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{left:50%;width:50%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "component", type: XLoadingComponent, selector: "x-loading, [x-loading]" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: XTimeAgoPipe, name: "xTimeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XTimelineComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XTimelinePrefix}`, imports: [NgClass, DatePipe, XIconComponent, XTimeAgoPipe, XLinkComponent, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #timeline class=\"x-timeline\" [ngClass]=\"classMap()\">\r\n  <ul>\r\n    @for (node of nodes(); track node.id) {\r\n      <li [class.x-timeline-loading]=\"node.loading\">\r\n        <div class=\"x-timeline-tail\" [class.x-timeline-tail-dashed]=\"node.dashed\"></div>\r\n        <div\r\n          class=\"x-timeline-icon {{ node.type ? 'x-timeline-' + node.type : '' }} {{\r\n            node.size ? 'x-timeline-' + node.size : ''\r\n          }}\"\r\n          [style.background-color]=\"node.color\"\r\n        >\r\n          @if (node.icon && !node.loading) {\r\n            <x-icon [type]=\"node.icon\"></x-icon>\r\n          }\r\n          @if (node.loading) {\r\n            <x-icon type=\"fto-loader\" [spin]=\"true\"></x-icon>\r\n          }\r\n        </div>\r\n        <div class=\"x-timeline-wrapper\">\r\n          <ng-container *xOutlet=\"wrapper(); context: { $node: node }\">\r\n            <div class=\"x-timeline-label\">\r\n              @if (node.label) {\r\n                <x-link>{{ node.label }}</x-link>\r\n              }\r\n              <span class=\"x-timeline-time\" [title]=\"node.time | date: 'yyyy-MM-dd HH:mm:ss'\">{{\r\n                node.time | xTimeAgo\r\n              }}</span>\r\n            </div>\r\n            <div class=\"x-timeline-content\">{{ node.content }}</div>\r\n          </ng-container>\r\n        </div>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".x-timeline{margin:0;padding:0}.x-timeline{display:block}.x-timeline ul,.x-timeline li{margin:0;padding:0;list-style:none}.x-timeline>ul{padding-left:.625rem}.x-timeline>ul>li{padding-bottom:1rem;position:relative}.x-timeline>ul>li:last-child .x-timeline-tail{border-left-color:transparent}.x-timeline>ul>li:first-child .x-timeline-tail{top:1.25rem}.x-timeline-tail{position:absolute;height:100%;border-left:.125rem solid var(--x-border)}.x-timeline-tail-dashed{border-left-style:dashed}.x-timeline-icon{position:absolute;background-color:var(--x-border);border-radius:50%;display:flex;justify-content:center;align-items:center;color:var(--x-white);width:1.375rem;height:1.375rem;border:.0625rem solid var(--x-background-100)}.x-timeline-wrapper{position:relative}.x-timeline-label{display:flex;align-items:center;margin-bottom:.125rem}.x-timeline-label>x-link{margin-right:.325rem}.x-timeline-content{color:var(--x-text-300)}.x-timeline-time{font-size:var(--x-font-size);color:var(--x-text-400)}.x-timeline-loading .x-timeline-icon{color:var(--x-text-400);font-size:1.25rem;background-color:transparent!important}.x-timeline-left .x-timeline-icon{left:-.625rem}.x-timeline-left .x-timeline-wrapper{padding-left:1.625rem}.x-timeline-right .x-timeline-icon{right:-.625rem}.x-timeline-right .x-timeline-wrapper{padding-right:1.625rem;text-align:right}.x-timeline-right .x-timeline-tail{right:0}.x-timeline-right .x-timeline-label{justify-content:flex-end}.x-timeline-right .x-timeline-content{text-align:right}.x-timeline-alternate .x-timeline-icon{left:50%;margin-left:-.6875rem}.x-timeline-alternate .x-timeline-tail{left:50%;margin-left:-.0625rem}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{width:50%;padding-right:1.625rem;text-align:right}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-label{justify-content:flex-end}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-content{text-align:right}.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{left:50%;width:50%;padding-left:1.625rem}.x-timeline-primary{background-color:var(--x-primary)}.x-timeline-success{background-color:var(--x-success)}.x-timeline-warning{background-color:var(--x-warning)}.x-timeline-danger{background-color:var(--x-danger)}.x-timeline-info{background-color:var(--x-info)}.x-timeline-big{width:2.175rem;height:2.175rem;left:-1.025rem;font-size:1.55rem}.x-timeline-large{width:1.875rem;height:1.875rem;left:-.875rem;font-size:1.25rem}.x-timeline-medium{width:1.675rem;height:1.675rem;left:-.775rem;font-size:1.05rem}.x-timeline-small{width:1.5rem;height:1.5rem;left:-.6875rem;font-size:.875rem}.x-timeline-mini{width:1.375rem;height:1.375rem;left:-.625rem;font-size:.75rem}\n"] }]
+            args: [{ selector: `${XTimelinePrefix}`, imports: [NgClass, DatePipe, XIconComponent, XTimeAgoPipe, XLinkComponent, XLoadingComponent, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #timeline class=\"x-timeline\" [class.x-timeline-number]=\"showNumber()\" [ngClass]=\"classMap()\">\r\n  <ul>\r\n    @for (node of nodes(); track node.id) {\r\n      <li [class.x-timeline-loading]=\"node.loading\">\r\n        <div class=\"x-timeline-tail\" [class.x-timeline-tail-dashed]=\"node.dashed\"></div>\r\n        @if (icon()) {\r\n          <div class=\"x-timeline-icon\">\r\n            <ng-container *xOutlet=\"icon(); context: { $node: node, $index }\"></ng-container>\r\n          </div>\r\n        } @else {\r\n          <div\r\n            class=\"x-timeline-icon {{ node.type ? 'x-timeline-' + node.type : '' }}\"\r\n            [style.background-color]=\"node.color\"\r\n          >\r\n            @if (showNumber() && !node.icon && !node.loading) {\r\n              {{ $index + 1 }}\r\n            }\r\n            @if (node.icon && !node.loading) {\r\n              <x-icon [type]=\"node.icon\"></x-icon>\r\n            }\r\n            @if (node.loading) {\r\n              <x-loading inline [x-loading]=\"true\" [type]=\"loadingType()\"></x-loading>\r\n            }\r\n          </div>\r\n        }\r\n        <div class=\"x-timeline-wrapper\">\r\n          <ng-container *xOutlet=\"wrapper(); context: { $node: node, $index }\">\r\n            <div class=\"x-timeline-label\">\r\n              @if (node.label) {\r\n                <x-link>{{ node.label }}</x-link>\r\n              }\r\n              <span class=\"x-timeline-time\" [title]=\"node.time | date: 'yyyy-MM-dd HH:mm:ss'\">{{\r\n                node.time | xTimeAgo\r\n              }}</span>\r\n            </div>\r\n            <div class=\"x-timeline-content\">{{ node.content }}</div>\r\n          </ng-container>\r\n        </div>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".x-timeline{margin:0;padding:0}.x-timeline{display:block}.x-timeline ul,.x-timeline li{margin:0;padding:0;list-style:none}.x-timeline>ul{padding-left:.8125rem}.x-timeline>ul>li{position:relative}.x-timeline>ul>li:not(:last-child){padding-bottom:1rem}.x-timeline>ul>li:last-child .x-timeline-tail{border-left-color:transparent}.x-timeline>ul>li:first-child .x-timeline-tail{top:1.25rem}.x-timeline-tail{position:absolute;height:100%;border-left:.125rem solid var(--x-border)}.x-timeline-tail-dashed{border-left-style:dashed}.x-timeline-icon{position:absolute;background-color:var(--x-border);border-radius:50%;display:flex;justify-content:center;align-items:center;color:var(--x-white);width:1.75rem;height:1.75rem;border:.0625rem solid var(--x-background-100)}.x-timeline-wrapper{position:relative}.x-timeline-label{display:flex;align-items:center;margin-bottom:.125rem}.x-timeline-label>x-link{margin-right:.325rem}.x-timeline-content{color:var(--x-text-300)}.x-timeline-time{font-size:var(--x-font-size);color:var(--x-text-400)}.x-timeline-loading .x-timeline-icon{color:var(--x-text-400);font-size:1.25rem;background-color:transparent!important}.x-timeline-number .x-timeline-icon{background-color:var(--x-background-a900)}.x-timeline-primary{background-color:var(--x-primary)}.x-timeline-success{background-color:var(--x-success)}.x-timeline-warning{background-color:var(--x-warning)}.x-timeline-danger{background-color:var(--x-danger)}.x-timeline-info{background-color:var(--x-info)}.x-timeline-big .x-timeline-label{line-height:calc(var(--x-height-big) - .5rem)}.x-timeline-big .x-timeline-wrapper{padding-left:calc(var(--x-height-big) - .5rem)}.x-timeline-big .x-timeline-icon{width:calc(var(--x-height-big) - .5rem);height:calc(var(--x-height-big) - .5rem)}.x-timeline-big.x-timeline-left .x-timeline-icon{left:calc(.0625rem - (var(--x-height-big) - .5rem) * .5)}.x-timeline-big.x-timeline-left .x-timeline-wrapper{padding-left:calc(var(--x-height-big) - .5rem)}.x-timeline-big.x-timeline-right .x-timeline-icon{right:calc(.0625rem - (var(--x-height-big) - .5rem) * .5)}.x-timeline-big.x-timeline-right .x-timeline-wrapper{padding-right:calc(var(--x-height-big) - .5rem);text-align:right}.x-timeline-big.x-timeline-alternate .x-timeline-icon{margin-left:calc(.0625rem - (var(--x-height-big) - .5rem) * .5)}.x-timeline-big.x-timeline-alternate .x-timeline-tail{margin-left:-.0625rem}.x-timeline-big.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{padding-right:calc(var(--x-height-big) - .5rem)}.x-timeline-big.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{padding-left:calc(var(--x-height-big) - .5rem)}.x-timeline-large .x-timeline-label{line-height:calc(var(--x-height-large) - .5rem)}.x-timeline-large .x-timeline-wrapper{padding-left:calc(var(--x-height-large) - .5rem)}.x-timeline-large .x-timeline-icon{width:calc(var(--x-height-large) - .5rem);height:calc(var(--x-height-large) - .5rem)}.x-timeline-large.x-timeline-left .x-timeline-icon{left:calc(.0625rem - (var(--x-height-large) - .5rem) * .5)}.x-timeline-large.x-timeline-left .x-timeline-wrapper{padding-left:calc(var(--x-height-large) - .5rem)}.x-timeline-large.x-timeline-right .x-timeline-icon{right:calc(.0625rem - (var(--x-height-large) - .5rem) * .5)}.x-timeline-large.x-timeline-right .x-timeline-wrapper{padding-right:calc(var(--x-height-large) - .5rem);text-align:right}.x-timeline-large.x-timeline-alternate .x-timeline-icon{margin-left:calc(.0625rem - (var(--x-height-large) - .5rem) * .5)}.x-timeline-large.x-timeline-alternate .x-timeline-tail{margin-left:-.0625rem}.x-timeline-large.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{padding-right:calc(var(--x-height-large) - .5rem)}.x-timeline-large.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{padding-left:calc(var(--x-height-large) - .5rem)}.x-timeline-medium .x-timeline-label{line-height:calc(var(--x-height-medium) - .5rem)}.x-timeline-medium .x-timeline-wrapper{padding-left:calc(var(--x-height-medium) - .5rem)}.x-timeline-medium .x-timeline-icon{width:calc(var(--x-height-medium) - .5rem);height:calc(var(--x-height-medium) - .5rem)}.x-timeline-medium.x-timeline-left .x-timeline-icon{left:calc(.0625rem - (var(--x-height-medium) - .5rem) * .5)}.x-timeline-medium.x-timeline-left .x-timeline-wrapper{padding-left:calc(var(--x-height-medium) - .5rem)}.x-timeline-medium.x-timeline-right .x-timeline-icon{right:calc(.0625rem - (var(--x-height-medium) - .5rem) * .5)}.x-timeline-medium.x-timeline-right .x-timeline-wrapper{padding-right:calc(var(--x-height-medium) - .5rem);text-align:right}.x-timeline-medium.x-timeline-alternate .x-timeline-icon{margin-left:calc(.0625rem - (var(--x-height-medium) - .5rem) * .5)}.x-timeline-medium.x-timeline-alternate .x-timeline-tail{margin-left:-.0625rem}.x-timeline-medium.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{padding-right:calc(var(--x-height-medium) - .5rem)}.x-timeline-medium.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{padding-left:calc(var(--x-height-medium) - .5rem)}.x-timeline-small .x-timeline-label{line-height:calc(var(--x-height-small) - .5rem)}.x-timeline-small .x-timeline-wrapper{padding-left:calc(var(--x-height-small) - .5rem)}.x-timeline-small .x-timeline-icon{width:calc(var(--x-height-small) - .5rem);height:calc(var(--x-height-small) - .5rem)}.x-timeline-small.x-timeline-left .x-timeline-icon{left:calc(.0625rem - (var(--x-height-small) - .5rem) * .5)}.x-timeline-small.x-timeline-left .x-timeline-wrapper{padding-left:calc(var(--x-height-small) - .5rem)}.x-timeline-small.x-timeline-right .x-timeline-icon{right:calc(.0625rem - (var(--x-height-small) - .5rem) * .5)}.x-timeline-small.x-timeline-right .x-timeline-wrapper{padding-right:calc(var(--x-height-small) - .5rem);text-align:right}.x-timeline-small.x-timeline-alternate .x-timeline-icon{margin-left:calc(.0625rem - (var(--x-height-small) - .5rem) * .5)}.x-timeline-small.x-timeline-alternate .x-timeline-tail{margin-left:-.0625rem}.x-timeline-small.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{padding-right:calc(var(--x-height-small) - .5rem)}.x-timeline-small.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{padding-left:calc(var(--x-height-small) - .5rem)}.x-timeline-mini .x-timeline-label{line-height:calc(var(--x-height-mini) - .5rem)}.x-timeline-mini .x-timeline-wrapper{padding-left:calc(var(--x-height-mini) - .5rem)}.x-timeline-mini .x-timeline-icon{width:calc(var(--x-height-mini) - .5rem);height:calc(var(--x-height-mini) - .5rem)}.x-timeline-mini.x-timeline-left .x-timeline-icon{left:calc(.0625rem - (var(--x-height-mini) - .5rem) * .5)}.x-timeline-mini.x-timeline-left .x-timeline-wrapper{padding-left:calc(var(--x-height-mini) - .5rem)}.x-timeline-mini.x-timeline-right .x-timeline-icon{right:calc(.0625rem - (var(--x-height-mini) - .5rem) * .5)}.x-timeline-mini.x-timeline-right .x-timeline-wrapper{padding-right:calc(var(--x-height-mini) - .5rem);text-align:right}.x-timeline-mini.x-timeline-alternate .x-timeline-icon{margin-left:calc(.0625rem - (var(--x-height-mini) - .5rem) * .5)}.x-timeline-mini.x-timeline-alternate .x-timeline-tail{margin-left:-.0625rem}.x-timeline-mini.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{padding-right:calc(var(--x-height-mini) - .5rem)}.x-timeline-mini.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{padding-left:calc(var(--x-height-mini) - .5rem)}.x-timeline-right .x-timeline-tail{right:0}.x-timeline-right .x-timeline-label{justify-content:flex-end}.x-timeline-right .x-timeline-content{text-align:right}.x-timeline-alternate .x-timeline-icon,.x-timeline-alternate .x-timeline-tail{left:50%}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{width:50%;text-align:right}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-label{justify-content:flex-end}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-content{text-align:right}.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{left:50%;width:50%}\n"] }]
         }] });
 
 class XTimelineModule {

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

@@ -1 +1 @@
-{"version":3,"file":"ng-nest-ui-timeline.mjs","sources":["../../../../lib/ng-nest/ui/timeline/timeline.property.ts","../../../../lib/ng-nest/ui/timeline/timeline.component.ts","../../../../lib/ng-nest/ui/timeline/timeline.component.html","../../../../lib/ng-nest/ui/timeline/timeline.module.ts","../../../../lib/ng-nest/ui/timeline/ng-nest-ui-timeline.ts"],"sourcesContent":["import { XPropertyFunction, XToDataArray } from '@ng-nest/ui/core';\r\nimport { Component, input } from '@angular/core';\r\nimport type { XType, XSize, XTemplate, XIdentityProperty, XDate, XDataArray } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * Timeline\r\n * @selector x-timeline\r\n * @decorator component\r\n */\r\nexport const XTimelinePrefix = 'x-timeline';\r\nconst X_TIMELINE_CONFIG_NAME = 'timeline';\r\n\r\n/**\r\n * Timeline Property\r\n */\r\n@Component({ selector: `${XTimelinePrefix}-property`, template: '' })\r\nexport class XTimelineProperty extends XPropertyFunction(X_TIMELINE_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 数据\r\n   * @en_US Date\r\n   */\r\n  readonly data = input<XTimelineNode[], XDataArray<XTimelineNode>>([], { transform: XToDataArray });\r\n  /**\r\n   * @zh_CN 内容模板\r\n   * @en_US Content template\r\n   */\r\n  readonly wrapper = input<XTemplate>();\r\n  /**\r\n   * @zh_CN 时间轴的相对位置\r\n   * @en_US Content and timeline relative position\r\n   */\r\n  readonly mode = input<XTimelineMode>(this.config?.mode ?? 'left');\r\n}\r\n\r\n/**\r\n * @zh_CN Timeline 数据对象\r\n * @en_US Timeline node data\r\n */\r\nexport interface XTimelineNode extends XIdentityProperty {\r\n  /**\r\n   * @zh_CN 时间\r\n   * @en_US Time\r\n   */\r\n  time?: XDate;\r\n  /**\r\n   * @zh_CN 内容\r\n   * @en_US Content\r\n   */\r\n  content?: string;\r\n  /**\r\n   * @zh_CN 尺寸\r\n   * @en_US Size\r\n   */\r\n  size?: XSize;\r\n  /**\r\n   * @zh_CN 类型\r\n   * @en_US Type\r\n   */\r\n  type?: XType;\r\n  /**\r\n   * @zh_CN 图标\r\n   * @en_US Icon\r\n   */\r\n  icon?: string;\r\n  /**\r\n   * @zh_CN 颜色\r\n   * @en_US Color\r\n   */\r\n  color?: string;\r\n  /**\r\n   * @zh_CN 加载中\r\n   * @en_US Loading\r\n   */\r\n  loading?: boolean;\r\n  /**\r\n   * @zh_CN 连接线显示虚线，针对下一个节点，下一个节点为 loading 状态也会显示虚线\r\n   * @en_US The connecting line displays a dotted line. For the next node, the dotted line will also be displayed when the next node is in loading status\r\n   */\r\n  dashed?: boolean;\r\n  /**\r\n   * @zh_CN 其它自定义属性\r\n   * @en_US Other property\r\n   */\r\n  [property: string]: any;\r\n}\r\n\r\n/**\r\n * @zh_CN 时间轴的相对位置\r\n * @en_US Content and timeline relative position\r\n */\r\nexport type XTimelineMode = 'left' | 'right' | 'alternate';\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, computed } from '@angular/core';\r\nimport { XTimelinePrefix, XTimelineNode, XTimelineProperty } from './timeline.property';\r\nimport { XIsEmpty } from '@ng-nest/ui/core';\r\nimport { DatePipe, NgClass } from '@angular/common';\r\nimport { XIconComponent } from '@ng-nest/ui/icon';\r\nimport { XTimeAgoPipe } from '@ng-nest/ui/time-ago';\r\nimport { XLinkComponent } from '@ng-nest/ui/link';\r\nimport { XOutletDirective } from '@ng-nest/ui/outlet';\r\n\r\n@Component({\r\n  selector: `${XTimelinePrefix}`,\r\n  imports: [NgClass, DatePipe, XIconComponent, XTimeAgoPipe, XLinkComponent, XOutletDirective],\r\n  templateUrl: './timeline.component.html',\r\n  styleUrls: ['./timeline.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XTimelineComponent extends XTimelineProperty {\r\n  classMap = computed(() => ({\r\n    [`${XTimelinePrefix}-${this.mode()}`]: !XIsEmpty(this.mode())\r\n  }));\r\n\r\n  nodes = computed(() => {\r\n    const data = this.data();\r\n    this.setDashed(data);\r\n    return data;\r\n  });\r\n\r\n  private setDashed(nodes: XTimelineNode[]) {\r\n    const len = nodes.length;\r\n    if (len <= 1) return;\r\n    for (let i = 0; i < nodes.length; i++) {\r\n      let node = nodes[i];\r\n      if (!node.loading) continue;\r\n      if (i === 0) {\r\n        node.dashed = true;\r\n      } else if (i > 0) {\r\n        nodes[i - 1].dashed = true;\r\n      }\r\n    }\r\n  }\r\n}\r\n","<div #timeline class=\"x-timeline\" [ngClass]=\"classMap()\">\r\n  <ul>\r\n    @for (node of nodes(); track node.id) {\r\n      <li [class.x-timeline-loading]=\"node.loading\">\r\n        <div class=\"x-timeline-tail\" [class.x-timeline-tail-dashed]=\"node.dashed\"></div>\r\n        <div\r\n          class=\"x-timeline-icon {{ node.type ? 'x-timeline-' + node.type : '' }} {{\r\n            node.size ? 'x-timeline-' + node.size : ''\r\n          }}\"\r\n          [style.background-color]=\"node.color\"\r\n        >\r\n          @if (node.icon && !node.loading) {\r\n            <x-icon [type]=\"node.icon\"></x-icon>\r\n          }\r\n          @if (node.loading) {\r\n            <x-icon type=\"fto-loader\" [spin]=\"true\"></x-icon>\r\n          }\r\n        </div>\r\n        <div class=\"x-timeline-wrapper\">\r\n          <ng-container *xOutlet=\"wrapper(); context: { $node: node }\">\r\n            <div class=\"x-timeline-label\">\r\n              @if (node.label) {\r\n                <x-link>{{ node.label }}</x-link>\r\n              }\r\n              <span class=\"x-timeline-time\" [title]=\"node.time | date: 'yyyy-MM-dd HH:mm:ss'\">{{\r\n                node.time | xTimeAgo\r\n              }}</span>\r\n            </div>\r\n            <div class=\"x-timeline-content\">{{ node.content }}</div>\r\n          </ng-container>\r\n        </div>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { XTimelineComponent } from './timeline.component';\r\n\r\n@NgModule({\r\n  exports: [XTimelineComponent],\r\n  imports: [XTimelineComponent]\r\n})\r\nexport class XTimelineModule {}\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-timeline.mjs","sources":["../../../../lib/ng-nest/ui/timeline/timeline.property.ts","../../../../lib/ng-nest/ui/timeline/timeline.component.ts","../../../../lib/ng-nest/ui/timeline/timeline.component.html","../../../../lib/ng-nest/ui/timeline/timeline.module.ts","../../../../lib/ng-nest/ui/timeline/ng-nest-ui-timeline.ts"],"sourcesContent":["import { XPropertyFunction, XToBoolean, XToDataArray } from '@ng-nest/ui/core';\r\nimport { Component, input } from '@angular/core';\r\nimport type { XType, XSize, XTemplate, XIdentityProperty, XDate, XDataArray, XBoolean } from '@ng-nest/ui/core';\r\nimport type { XLoadingType } from '@ng-nest/ui/loading';\r\n\r\n/**\r\n * Timeline\r\n * @selector x-timeline\r\n * @decorator component\r\n */\r\nexport const XTimelinePrefix = 'x-timeline';\r\nconst X_TIMELINE_CONFIG_NAME = 'timeline';\r\n\r\n/**\r\n * Timeline Property\r\n */\r\n@Component({ selector: `${XTimelinePrefix}-property`, template: '' })\r\nexport class XTimelineProperty extends XPropertyFunction(X_TIMELINE_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 数据\r\n   * @en_US Date\r\n   */\r\n  readonly data = input<XTimelineNode[], XDataArray<XTimelineNode>>([], { transform: XToDataArray });\r\n  /**\r\n   * @zh_CN 内容模板\r\n   * @en_US Content template\r\n   */\r\n  readonly wrapper = input<XTemplate>();\r\n  /**\r\n   * @zh_CN 图标模板\r\n   * @en_US Icon template\r\n   */\r\n  readonly icon = input<XTemplate>();\r\n  /**\r\n   * @zh_CN 显示序号\r\n   * @en_US Show number\r\n   */\r\n  readonly showNumber = input<boolean, XBoolean>(this.config?.showNumber ?? false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 时间轴的相对位置\r\n   * @en_US Content and timeline relative position\r\n   */\r\n  readonly mode = input<XTimelineMode>(this.config?.mode ?? 'left');\r\n  /**\r\n   * @zh_CN loading 的类型样式\r\n   * @en_US Loading type style\r\n   */\r\n  readonly loadingType = input<XLoadingType>(this.config?.loadingType ?? 'circular');\r\n  /**\r\n   * @zh_CN 尺寸\r\n   * @en_US Size\r\n   */\r\n  readonly size = input<XSize>(this.config?.size ?? 'medium');\r\n}\r\n\r\n/**\r\n * @zh_CN Timeline 数据对象\r\n * @en_US Timeline node data\r\n */\r\nexport interface XTimelineNode extends XIdentityProperty {\r\n  /**\r\n   * @zh_CN 时间\r\n   * @en_US Time\r\n   */\r\n  time?: XDate;\r\n  /**\r\n   * @zh_CN 内容\r\n   * @en_US Content\r\n   */\r\n  content?: string;\r\n  /**\r\n   * @zh_CN 类型\r\n   * @en_US Type\r\n   */\r\n  type?: XType;\r\n  /**\r\n   * @zh_CN 图标\r\n   * @en_US Icon\r\n   */\r\n  icon?: string;\r\n  /**\r\n   * @zh_CN 颜色\r\n   * @en_US Color\r\n   */\r\n  color?: string;\r\n  /**\r\n   * @zh_CN 加载中\r\n   * @en_US Loading\r\n   */\r\n  loading?: boolean;\r\n  /**\r\n   * @zh_CN 连接线显示虚线，针对下一个节点，下一个节点为 loading 状态也会显示虚线\r\n   * @en_US The connecting line displays a dotted line. For the next node, the dotted line will also be displayed when the next node is in loading status\r\n   */\r\n  dashed?: boolean;\r\n  /**\r\n   * @zh_CN 其它自定义属性\r\n   * @en_US Other property\r\n   */\r\n  [property: string]: any;\r\n}\r\n\r\n/**\r\n * @zh_CN 时间轴的相对位置\r\n * @en_US Content and timeline relative position\r\n */\r\nexport type XTimelineMode = 'left' | 'right' | 'alternate';\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, computed } from '@angular/core';\r\nimport { XTimelinePrefix, XTimelineNode, XTimelineProperty } from './timeline.property';\r\nimport { XIsEmpty } from '@ng-nest/ui/core';\r\nimport { DatePipe, NgClass } from '@angular/common';\r\nimport { XIconComponent } from '@ng-nest/ui/icon';\r\nimport { XTimeAgoPipe } from '@ng-nest/ui/time-ago';\r\nimport { XLinkComponent } from '@ng-nest/ui/link';\r\nimport { XOutletDirective } from '@ng-nest/ui/outlet';\r\nimport { XLoadingComponent } from '@ng-nest/ui/loading';\r\n\r\n@Component({\r\n  selector: `${XTimelinePrefix}`,\r\n  imports: [NgClass, DatePipe, XIconComponent, XTimeAgoPipe, XLinkComponent, XLoadingComponent, XOutletDirective],\r\n  templateUrl: './timeline.component.html',\r\n  styleUrls: ['./timeline.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XTimelineComponent extends XTimelineProperty {\r\n  classMap = computed(() => ({\r\n    [`${XTimelinePrefix}-${this.mode()}`]: !XIsEmpty(this.mode()),\r\n    [`${XTimelinePrefix}-${this.size()}`]: !XIsEmpty(this.size())\r\n  }));\r\n\r\n  nodes = computed(() => {\r\n    const data = this.data();\r\n    this.setDashed(data);\r\n    return data;\r\n  });\r\n\r\n  private setDashed(nodes: XTimelineNode[]) {\r\n    const len = nodes.length;\r\n    if (len <= 1) return;\r\n    for (let i = 0; i < nodes.length; i++) {\r\n      let node = nodes[i];\r\n      if (!node.loading) continue;\r\n      if (i === 0) {\r\n        node.dashed = true;\r\n      } else if (i > 0) {\r\n        nodes[i - 1].dashed = true;\r\n      }\r\n    }\r\n  }\r\n}\r\n","<div #timeline class=\"x-timeline\" [class.x-timeline-number]=\"showNumber()\" [ngClass]=\"classMap()\">\r\n  <ul>\r\n    @for (node of nodes(); track node.id) {\r\n      <li [class.x-timeline-loading]=\"node.loading\">\r\n        <div class=\"x-timeline-tail\" [class.x-timeline-tail-dashed]=\"node.dashed\"></div>\r\n        @if (icon()) {\r\n          <div class=\"x-timeline-icon\">\r\n            <ng-container *xOutlet=\"icon(); context: { $node: node, $index }\"></ng-container>\r\n          </div>\r\n        } @else {\r\n          <div\r\n            class=\"x-timeline-icon {{ node.type ? 'x-timeline-' + node.type : '' }}\"\r\n            [style.background-color]=\"node.color\"\r\n          >\r\n            @if (showNumber() && !node.icon && !node.loading) {\r\n              {{ $index + 1 }}\r\n            }\r\n            @if (node.icon && !node.loading) {\r\n              <x-icon [type]=\"node.icon\"></x-icon>\r\n            }\r\n            @if (node.loading) {\r\n              <x-loading inline [x-loading]=\"true\" [type]=\"loadingType()\"></x-loading>\r\n            }\r\n          </div>\r\n        }\r\n        <div class=\"x-timeline-wrapper\">\r\n          <ng-container *xOutlet=\"wrapper(); context: { $node: node, $index }\">\r\n            <div class=\"x-timeline-label\">\r\n              @if (node.label) {\r\n                <x-link>{{ node.label }}</x-link>\r\n              }\r\n              <span class=\"x-timeline-time\" [title]=\"node.time | date: 'yyyy-MM-dd HH:mm:ss'\">{{\r\n                node.time | xTimeAgo\r\n              }}</span>\r\n            </div>\r\n            <div class=\"x-timeline-content\">{{ node.content }}</div>\r\n          </ng-container>\r\n        </div>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { XTimelineComponent } from './timeline.component';\r\n\r\n@NgModule({\r\n  exports: [XTimelineComponent],\r\n  imports: [XTimelineComponent]\r\n})\r\nexport class XTimelineModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;AAKA;;;;AAIG;AACI,MAAM,eAAe,GAAG;AAC/B,MAAM,sBAAsB,GAAG,UAAU;AAEzC;;AAEG;MAEU,iBAAkB,SAAQ,iBAAiB,CAAC,sBAAsB,CAAC,CAAA;AADhF,IAAA,WAAA,GAAA;;AAEE;;;AAGG;AACM,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAA6C,EAAE,wCAAI,SAAS,EAAE,YAAY,EAAA,CAAA,GAAA,CAAzB,EAAE,SAAS,EAAE,YAAY,EAAE,GAAC;AAClG;;;AAGG;QACM,IAAA,CAAA,OAAO,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAa;AACrC;;;AAGG;QACM,IAAA,CAAA,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAa;AAClC;;;AAGG;QACM,IAAA,CAAA,UAAU,GAAG,KAAK,CAAoB,IAAI,CAAC,MAAM,EAAE,UAAU,IAAI,KAAK,8CAAI,SAAS,EAAE,UAAU,EAAA,CAAA,GAAA,CAAvB,EAAE,SAAS,EAAE,UAAU,EAAE,CAAA,CAAA,CAAC;AAC3G;;;AAGG;QACM,IAAA,CAAA,IAAI,GAAG,KAAK,CAAgB,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,MAAM,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;AACjE;;;AAGG;QACM,IAAA,CAAA,WAAW,GAAG,KAAK,CAAe,IAAI,CAAC,MAAM,EAAE,WAAW,IAAI,UAAU,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;AAClF;;;AAGG;QACM,IAAA,CAAA,IAAI,GAAG,KAAK,CAAQ,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,QAAQ,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;AAC5D,IAAA;iIApCY,iBAAiB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,q9BADkC,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,CAAA;;2FACrD,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAD7B,SAAS;mBAAC,EAAE,QAAQ,EAAE,CAAA,EAAG,eAAe,WAAW,EAAE,QAAQ,EAAE,EAAE,EAAE;;;ACE9D,MAAO,kBAAmB,SAAQ,iBAAiB,CAAA;AARzD,IAAA,WAAA,GAAA;;AASE,QAAA,IAAA,CAAA,QAAQ,GAAG,QAAQ,CAAC,OAAO;AACzB,YAAA,CAAC,GAAG,eAAe,CAAA,CAAA,EAAI,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;AAC7D,YAAA,CAAC,GAAG,eAAe,CAAA,CAAA,EAAI,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE;AAC7D,SAAA,CAAC,oDAAC;AAEH,QAAA,IAAA,CAAA,KAAK,GAAG,QAAQ,CAAC,MAAK;AACpB,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;AACxB,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;AACpB,YAAA,OAAO,IAAI;AACb,QAAA,CAAC,iDAAC;AAeH,IAAA;AAbS,IAAA,SAAS,CAAC,KAAsB,EAAA;AACtC,QAAA,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM;QACxB,IAAI,GAAG,IAAI,CAAC;YAAE;AACd,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACrC,YAAA,IAAI,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC;YACnB,IAAI,CAAC,IAAI,CAAC,OAAO;gBAAE;AACnB,YAAA,IAAI,CAAC,KAAK,CAAC,EAAE;AACX,gBAAA,IAAI,CAAC,MAAM,GAAG,IAAI;YACpB;AAAO,iBAAA,IAAI,CAAC,GAAG,CAAC,EAAE;gBAChB,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,GAAG,IAAI;YAC5B;QACF;IACF;iIAxBW,kBAAkB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClB/B,ivDA0CA,EAAA,MAAA,EAAA,CAAA,20PAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED9BY,OAAO,oFAAY,cAAc,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAgB,cAAc,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,iBAAiB,EAAA,QAAA,EAAA,wBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,gBAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAA3F,QAAQ,wCAAkB,YAAY,EAAA,IAAA,EAAA,UAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAM9C,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAR9B,SAAS;+BACE,CAAA,EAAG,eAAe,CAAA,CAAE,EAAA,OAAA,EACrB,CAAC,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,gBAAgB,CAAC,EAAA,aAAA,EAGhG,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,ivDAAA,EAAA,MAAA,EAAA,CAAA,20PAAA,CAAA,EAAA;;;METpC,eAAe,CAAA;iIAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;kIAAf,eAAe,EAAA,OAAA,EAAA,CAFhB,kBAAkB,CAAA,EAAA,OAAA,EAAA,CADlB,kBAAkB,CAAA,EAAA,CAAA,CAAA;AAGjB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,YAFhB,kBAAkB,CAAA,EAAA,CAAA,CAAA;;2FAEjB,eAAe,EAAA,UAAA,EAAA,CAAA;kBAJ3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,kBAAkB,CAAC;oBAC7B,OAAO,EAAE,CAAC,kBAAkB;AAC7B,iBAAA;;;ACND;;AAEG;;;;"}