@ng-atomic/components 19.0.0-preview.9 → 19.2.0

package/fesm2022/ng-atomic-components-molecules.mjs

@@ -1,6 +1,5 @@
-import * as i0 from '@angular/core';
-import { Directive, inject, input, viewChild, EventEmitter, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
-import { TokenizedType, provideComponent } from '@ng-atomic/core';
+import { makeEnvironmentProviders, importProvidersFrom } from '@angular/core';
+import { provideComponent } from '@ng-atomic/core';
 import { NavigationListItemMoleculeStore } from '@ng-atomic/components/molecules/navigation-list-item';
 import { ChipsInputFieldMoleculeStore } from '@ng-atomic/components/molecules/chips-input-field';
 import { HeaderMoleculeStore } from '@ng-atomic/components/molecules/header';
@@ -9,560 +8,13 @@ import { TextInputFieldMoleculeStore } from '@ng-atomic/components/molecules/tex
 import { LoadingBoxMoleculeStore } from '@ng-atomic/components/molecules/loading-box';
 import { ActionsColumnMoleculeStore } from '@ng-atomic/components/molecules/actions-column';
 import { ListItemMoleculeStore } from '@ng-atomic/components/molecules/list-item';
-import { __decorate } from 'tslib';
-import * as i4 from '@angular/forms';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import * as i1$1 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i1 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import * as i2 from '@angular/material/table';
-import { MatTableModule } from '@angular/material/table';
-import * as i3 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { StylePipe } from '@ng-atomic/common/pipes/style';
-import { SpreadSheetCell, SpreadSheetCellInput, SpreadSheetService } from '@ng-atomic/common/services/spreadsheet';
-import { NgClass, NgStyle } from '@angular/common';
-import { makeConfig } from '@ng-atomic/common/services/ui';
-import { resolveFormField } from '@ng-atomic/common/pipes/smart-field';
-import { ResizeColumnDirective } from '@ng-atomic/common/directives/resize-column';
-import { NgAtomicColumnMoleculeStore, NgAtomicColumnMolecule } from '@ng-atomic/common/directives/molecules/column';
-import { FlatTreeControl } from '@angular/cdk/tree';
-import { derivedAsync } from 'ngxtension/derived-async';
-import { startWith, map } from 'rxjs';
+import { TextColumnMoleculeStore } from '@ng-atomic/components/molecules/text-column';
+import { TreeColumnMoleculeStore } from '@ng-atomic/components/molecules/tree-column';
+import { ThreadMessageMoleculeStore } from '@ng-atomic/components/molecules/thread-message';
 
-var TextColumnMoleculeStore_1;
-var ActionId;
-(function (ActionId) {
-    ActionId["UPDATE_VALUE"] = "[@ng-atomic/components/molecules/text-column] update value";
-})(ActionId || (ActionId = {}));
-let TextColumnMoleculeStore = class TextColumnMoleculeStore extends NgAtomicColumnMoleculeStore {
-    constructor() {
-        super(...arguments);
-        this.config = TextColumnMoleculeStore_1.Config.inject();
-    }
-    static { TextColumnMoleculeStore_1 = this; }
-    static { this.ActionId = ActionId; }
-    static { this.Config = makeConfig(() => {
-        return () => ({
-            index: 0,
-            sort: 'none',
-            sticky: false,
-            stickyEnd: false,
-            name: '',
-            editable: false,
-            clickCopy: false,
-        });
-    }, ['@ng-atomic/components', 'molecules', 'text-column']); }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TextColumnMoleculeStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: TextColumnMoleculeStore, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
-};
-TextColumnMoleculeStore = TextColumnMoleculeStore_1 = __decorate([
-    TokenizedType()
-], TextColumnMoleculeStore);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TextColumnMoleculeStore, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                }]
-        }] });
-class TextColumnMolecule extends NgAtomicColumnMolecule {
-    constructor() {
-        super(...arguments);
-        this.store = inject(TextColumnMoleculeStore);
-        this.formFieldMap = input({});
-        this.inputElement = viewChild('input');
-        this.headerClick = new EventEmitter();
-        this.resolveFormField = resolveFormField;
-    }
-    onInputValueChange(pre, current, context, input) {
-        this.dispatch({
-            id: ActionId.UPDATE_VALUE,
-            payload: { pre, current, context, onFailed: () => { input.value = pre; } },
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TextColumnMolecule, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: TextColumnMolecule, isStandalone: true, selector: "molecules-text-column", inputs: { formFieldMap: { classPropertyName: "formFieldMap", publicName: "formFieldMap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { headerClick: "headerClick" }, providers: [
-            { provide: NgAtomicColumnMoleculeStore, useExisting: TextColumnMoleculeStore },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: TextColumnMoleculeStore, inputs: ["index", "index", "column", "column", "editable", "editable", "clickCopy", "clickCopy"] }], ngImport: i0, template: `
-  @let component = '@ng-atomic/components/molecules/text-column';
-  <ng-container matColumnDef [sticky]="store.sticky()" [stickyEnd]="store.stickyEnd()">
-    <ng-container *matHeaderCellDef>
-      @let position = { col: store.index(), row: 0 };
-      @let context = { item: null, name: store.name(), position, component, selector: 'header-cell' };
-      @let value = ss.grid.getValue(position);
-      @let expressionValue = ss.grid.getExpressionValue(position);
-      @let isEditable = ss.protection.isEditable(value, context);
-      <th
-        mat-header-cell
-        [style.text-align]="justify"
-        [ssCell]="position"
-        [ssCellContext]="context"
-        [ssCellEditable]="isEditable"
-        (click)="headerClick.emit()"
-        resizeColumn
-        [resizeColumnWidth]="store.width()"
-        (resize)="onResize(store.index(), $event)"
-        [ngStyle]="store.columnStyle()"
-      >
-        <p
-          class="nowrap"
-          style="display: flex; align-items: center;"
-        >
-          <span>{{ expressionValue }}</span>
-          @switch(store.sort()) {
-            @case('asc') {
-              <mat-icon class="order">south</mat-icon>
-            }
-            @case('desc') {
-              <mat-icon class="order">north</mat-icon>
-            }
-          }
-        </p>
-      </th>
-    </ng-container>
-    <ng-container *matCellDef="let item; let i = index">
-      @let index = i ?? item?.$index;
-      @let position = { col: store.index(), row: index + 1 };
-      @let context = { item, name: store.name(), position, component, selector: 'cell' };
-      @let value = ss.grid.getValue(position);
-      @let expressionValue = ss.grid.getExpressionValue(position);
-      @let isEditable = ss.protection.isEditable(value, context);
-      @let isEditing = ss.editor.isEditing(position);
-      @let formField = resolveFormField(formFieldMap(), store.name());
-      <td
-        mat-cell
-        [style.text-align]="justify"
-        [ssCell]="position"
-        [ssCellContext]="context"
-        [ssCellEditable]="isEditable"
-        [ngClass]="{ 'editable': isEditable }"
-        [tabIndex]="-1"
-        [matTooltip]="store.tooltipText() || value"
-        [matTooltipPosition]="'below'"
-        [matTooltipDisabled]="isEditable"
-        [ngStyle]="store.columnStyle()"
-      >
-        @switch(formField?.type) {
-          @case('text') {
-            <input
-              class="cell-input"
-              [type]="formField.type"
-              [ngModel]="value"
-              [ssCellInput]="position"
-              [style.visibility]="isEditing ? 'visible' : 'hidden'"
-              (blur)="onInputValueChange(value, $event.target.value, context, input)"
-              #input
-            >
-          }
-          @case ('number') {
-            <input
-              class="cell-input"
-              [type]="formField.type"
-              [ngModel]="value"
-              [ssCellInput]="position"
-              [style.visibility]="isEditing ? 'visible' : 'hidden'"
-              (blur)="onInputValueChange(value, $event.target.value, context, input)"
-              #input
-            >
-          }
-        }
-        <!-- <atoms-input
-          [type]="'number'"
-          [placeholder]="value"
-          [value]="value"
-          (valueChange)="onInputValueChange(value, $event, context, input)"
-          [style.visibility]="isEditing ? 'visible' : 'hidden'"
-          [style.display]="isEditing ? 'contents' : 'none'"
-          [ssCellInput]="position"
-          #el
-        /> -->
-        <p
-          [style]="value | style:context"
-          [style.visibility]="!isEditing ? 'visible' : 'hidden'"
-          (click)="copy(value, $event)"
-        >
-          {{ expressionValue }}
-        </p>
-      </td>
-    </ng-container>
-  </ng-container>
-  `, isInline: true, styles: ["th[mat-header-cell],td[mat-cell]{position:relative;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}th[mat-header-cell] mat-icon.order,td[mat-cell] mat-icon.order{width:12px;height:12px;font-size:12px}th[mat-header-cell] .cell-input,td[mat-cell] .cell-input{position:absolute;inset:0;width:100%;height:100%;margin:0;border:none;box-sizing:border-box;padding-right:4px;font-size:var(--mat-table-row-item-label-text-size, 14px);background:transparent}th[mat-header-cell] .cell-input[type=number],td[mat-cell] .cell-input[type=number]{text-align:right}th[mat-header-cell] .cell-input[type=number]::-webkit-outer-spin-button,th[mat-header-cell] .cell-input[type=number]::-webkit-inner-spin-button,td[mat-cell] .cell-input[type=number]::-webkit-outer-spin-button,td[mat-cell] .cell-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}th[mat-header-cell] .cell-input[type=number],td[mat-cell] .cell-input[type=number]{-moz-appearance:textfield}th[mat-header-cell] .cell-input:focus,td[mat-cell] .cell-input:focus{outline:none}th[mat-header-cell] p,td[mat-cell] p{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th[mat-header-cell].editable,td[mat-cell].editable{background-color:#fff}th[mat-header-cell].editing,td[mat-cell].editing{outline:2px solid #424950;outline-offset:-2px}th[mat-header-cell].selected,td[mat-cell].selected{background-color:#dce4ed}th[mat-header-cell]:focus,td[mat-cell]:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: SpreadSheetCell, selector: "[ssCell]", inputs: ["ssCell", "ssCellEditable", "ssCellContext"] }, { kind: "directive", type: SpreadSheetCellInput, selector: "[ssCellInput]", inputs: ["ssCellInput"] }, { kind: "pipe", type: StylePipe, name: "style" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumnWidth"], outputs: ["resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TextColumnMolecule, decorators: [{
-            type: Component,
-            args: [{ selector: 'molecules-text-column', imports: [
-                        NgClass,
-                        NgStyle,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatTableModule,
-                        MatTooltipModule,
-                        MatInputModule,
-                        ReactiveFormsModule,
-                        SpreadSheetCell,
-                        SpreadSheetCellInput,
-                        StylePipe,
-                        FormsModule,
-                        ResizeColumnDirective,
-                    ], template: `
-  @let component = '@ng-atomic/components/molecules/text-column';
-  <ng-container matColumnDef [sticky]="store.sticky()" [stickyEnd]="store.stickyEnd()">
-    <ng-container *matHeaderCellDef>
-      @let position = { col: store.index(), row: 0 };
-      @let context = { item: null, name: store.name(), position, component, selector: 'header-cell' };
-      @let value = ss.grid.getValue(position);
-      @let expressionValue = ss.grid.getExpressionValue(position);
-      @let isEditable = ss.protection.isEditable(value, context);
-      <th
-        mat-header-cell
-        [style.text-align]="justify"
-        [ssCell]="position"
-        [ssCellContext]="context"
-        [ssCellEditable]="isEditable"
-        (click)="headerClick.emit()"
-        resizeColumn
-        [resizeColumnWidth]="store.width()"
-        (resize)="onResize(store.index(), $event)"
-        [ngStyle]="store.columnStyle()"
-      >
-        <p
-          class="nowrap"
-          style="display: flex; align-items: center;"
-        >
-          <span>{{ expressionValue }}</span>
-          @switch(store.sort()) {
-            @case('asc') {
-              <mat-icon class="order">south</mat-icon>
-            }
-            @case('desc') {
-              <mat-icon class="order">north</mat-icon>
-            }
-          }
-        </p>
-      </th>
-    </ng-container>
-    <ng-container *matCellDef="let item; let i = index">
-      @let index = i ?? item?.$index;
-      @let position = { col: store.index(), row: index + 1 };
-      @let context = { item, name: store.name(), position, component, selector: 'cell' };
-      @let value = ss.grid.getValue(position);
-      @let expressionValue = ss.grid.getExpressionValue(position);
-      @let isEditable = ss.protection.isEditable(value, context);
-      @let isEditing = ss.editor.isEditing(position);
-      @let formField = resolveFormField(formFieldMap(), store.name());
-      <td
-        mat-cell
-        [style.text-align]="justify"
-        [ssCell]="position"
-        [ssCellContext]="context"
-        [ssCellEditable]="isEditable"
-        [ngClass]="{ 'editable': isEditable }"
-        [tabIndex]="-1"
-        [matTooltip]="store.tooltipText() || value"
-        [matTooltipPosition]="'below'"
-        [matTooltipDisabled]="isEditable"
-        [ngStyle]="store.columnStyle()"
-      >
-        @switch(formField?.type) {
-          @case('text') {
-            <input
-              class="cell-input"
-              [type]="formField.type"
-              [ngModel]="value"
-              [ssCellInput]="position"
-              [style.visibility]="isEditing ? 'visible' : 'hidden'"
-              (blur)="onInputValueChange(value, $event.target.value, context, input)"
-              #input
-            >
-          }
-          @case ('number') {
-            <input
-              class="cell-input"
-              [type]="formField.type"
-              [ngModel]="value"
-              [ssCellInput]="position"
-              [style.visibility]="isEditing ? 'visible' : 'hidden'"
-              (blur)="onInputValueChange(value, $event.target.value, context, input)"
-              #input
-            >
-          }
-        }
-        <!-- <atoms-input
-          [type]="'number'"
-          [placeholder]="value"
-          [value]="value"
-          (valueChange)="onInputValueChange(value, $event, context, input)"
-          [style.visibility]="isEditing ? 'visible' : 'hidden'"
-          [style.display]="isEditing ? 'contents' : 'none'"
-          [ssCellInput]="position"
-          #el
-        /> -->
-        <p
-          [style]="value | style:context"
-          [style.visibility]="!isEditing ? 'visible' : 'hidden'"
-          (click)="copy(value, $event)"
-        >
-          {{ expressionValue }}
-        </p>
-      </td>
-    </ng-container>
-  </ng-container>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
-                        {
-                            directive: TextColumnMoleculeStore,
-                            inputs: [
-                                'index',
-                                'column',
-                                'editable',
-                                'clickCopy'
-                            ],
-                        },
-                    ], providers: [
-                        { provide: NgAtomicColumnMoleculeStore, useExisting: TextColumnMoleculeStore },
-                    ], styles: ["th[mat-header-cell],td[mat-cell]{position:relative;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}th[mat-header-cell] mat-icon.order,td[mat-cell] mat-icon.order{width:12px;height:12px;font-size:12px}th[mat-header-cell] .cell-input,td[mat-cell] .cell-input{position:absolute;inset:0;width:100%;height:100%;margin:0;border:none;box-sizing:border-box;padding-right:4px;font-size:var(--mat-table-row-item-label-text-size, 14px);background:transparent}th[mat-header-cell] .cell-input[type=number],td[mat-cell] .cell-input[type=number]{text-align:right}th[mat-header-cell] .cell-input[type=number]::-webkit-outer-spin-button,th[mat-header-cell] .cell-input[type=number]::-webkit-inner-spin-button,td[mat-cell] .cell-input[type=number]::-webkit-outer-spin-button,td[mat-cell] .cell-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}th[mat-header-cell] .cell-input[type=number],td[mat-cell] .cell-input[type=number]{-moz-appearance:textfield}th[mat-header-cell] .cell-input:focus,td[mat-cell] .cell-input:focus{outline:none}th[mat-header-cell] p,td[mat-cell] p{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th[mat-header-cell].editable,td[mat-cell].editable{background-color:#fff}th[mat-header-cell].editing,td[mat-cell].editing{outline:2px solid #424950;outline-offset:-2px}th[mat-header-cell].selected,td[mat-cell].selected{background-color:#dce4ed}th[mat-header-cell]:focus,td[mat-cell]:focus{outline:none}\n"] }]
-        }], propDecorators: { headerClick: [{
-                type: Output
-            }] } });
-
-class TreeColumnMoleculeStore extends NgAtomicColumnMoleculeStore {
-    constructor() {
-        super(...arguments);
-        this.config = TreeColumnMoleculeStore.Config.inject();
-        this.treeControl = input(new FlatTreeControl((node) => node.level, (node) => node.isExpandable));
-        this.isExpandedAll = derivedAsync(() => {
-            const control = this.treeControl();
-            return control.expansionModel.changed.pipe(startWith(null), map(() => control.expansionModel.selected.length === control.dataNodes.length));
-        });
-    }
-    static { this.Config = makeConfig(() => {
-        return () => ({
-            sort: 'none',
-            sticky: false,
-            stickyEnd: false,
-            editable: false,
-            clickCopy: false,
-        });
-    }, ['@ng-atomic/components', 'molecules', 'text-column']); }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeColumnMoleculeStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: TreeColumnMoleculeStore, isStandalone: true, selector: "molecules-tree-column", inputs: { treeControl: { classPropertyName: "treeControl", publicName: "treeControl", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeColumnMoleculeStore, decorators: [{
-            type: Directive,
-            args: [{ standalone: true, selector: 'molecules-tree-column' }]
-        }] });
-class TreeColumnMolecule extends NgAtomicColumnMolecule {
-    constructor() {
-        super(...arguments);
-        this.store = inject(TreeColumnMoleculeStore);
-        this.ss = inject(SpreadSheetService);
-        this.headerClick = new EventEmitter();
-    }
-    toggleAll() {
-        if (!this.store.isExpandedAll()) {
-            this.store.treeControl().expandAll();
-        }
-        else {
-            this.store.treeControl().collapseAll();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeColumnMolecule, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: TreeColumnMolecule, isStandalone: true, selector: "molecules-tree-column", outputs: { headerClick: "headerClick" }, providers: [
-            { provide: NgAtomicColumnMoleculeStore, useExisting: TreeColumnMoleculeStore },
-        ], usesInheritance: true, hostDirectives: [{ directive: TreeColumnMoleculeStore, inputs: ["index", "index", "treeControl", "treeControl", "column", "column"] }], ngImport: i0, template: `
-  @let component = '@ng-atomic/components/molecules/tree-column';
-  <ng-container matColumnDef [sticky]="store.sticky()" [stickyEnd]="store.stickyEnd()">
-    <ng-container *matHeaderCellDef>
-      @let position = { col: store.index(), row: 0 };
-      @let context = { item: null, name: store.name(), position, component, selector: 'header-cell' };
-      @let value = ss.grid.getValue(position);
-      @let expressionValue = ss.grid.getExpressionValue(position);
-      <th
-        mat-header-cell
-        [ssCell]="position"
-        [ssCellContext]="context"
-        [ssCellEditable]="ss.protection.isEditable(value, context)"
-        [style.text-align]="justify"
-        (click)="headerClick.emit()"
-        resizeColumn
-        [resizeColumnWidth]="store.width()"
-        (resize)="onResize(store.index(), $event)"
-        [ngStyle]="store.columnStyle()"
-      >
-        <p class="nowrap" style="display: flex; align-items: center;">
-          <!-- <button mat-icon-button (click)="toggleAll()">
-            <mat-icon>
-              {{ store.isExpandedAll() ? 'unfold_less' : 'unfold_more' }}
-            </mat-icon>
-          </button> -->
-          <span>{{ expressionValue }}</span>
-          @switch(store.sort()) {
-            @case ('asc') {
-              <mat-icon class="order">south</mat-icon>
-            }
-            @case ('desc') { 
-              <mat-icon class="order">north</mat-icon>
-            }
-          }
-        </p>
-      </th>
-    </ng-container>
-    <ng-container *matCellDef="let item; let i = index">
-      @let index = item?.$index ?? i;
-      @let position = { col: store.index(), row: index + 1 };
-      @let context = { item, name: store.name(), position, component };
-      @let value = ss.grid.getValue(position);
-      @let expressionValue = ss.grid.getExpressionValue(position);
-      <td
-        mat-cell
-        [ssCell]="position"
-        [ssCellContext]="context"
-        [ssCellEditable]="ss.protection.isEditable(value, context)"
-        [matTooltip]="store.tooltipText() || value"
-        [matTooltipPosition]="'below'"
-        [matTooltipDisabled]="ss.protection.isEditable(value, context)"
-        [ngStyle]="store.columnStyle()"
-      > 
-        <p class="nowrap" [style.maxWidth.px]="item.level * 48 + store.width()">
-          <span [style.paddingLeft.px]="(item.level + (item.isExpandable ? 0 : 1)) * 48"></span>
-          @if (item.isExpandable) {
-            <button 
-              mat-icon-button 
-              [style.visibility]="!item.isExpandable ? 'hidden' : 'visible'"
-              (click)="store.treeControl().toggle(item)"
-            >
-              <mat-icon>
-                {{ store.treeControl().isExpanded(item) ? 'expand_more' : 'chevron_right' }}
-              </mat-icon>
-            </button>
-          }
-          <span (click)="copy(value, $event)"> {{ expressionValue }} </span>
-        </p>
-      </td>
-    </ng-container>
-  </ng-container> `, isInline: true, styles: ["th[mat-header-cell],td[mat-cell]{cursor:pointer}th[mat-header-cell] mat-icon.order,td[mat-cell] mat-icon.order{width:12px;height:12px;font-size:12px}th[mat-header-cell] p.nowrap,td[mat-cell] p.nowrap{margin-block-start:0em;margin-block-end:0em;display:flex;justify-content:flex-start;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: SpreadSheetCell, selector: "[ssCell]", inputs: ["ssCell", "ssCellEditable", "ssCellContext"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumnWidth"], outputs: ["resize"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeColumnMolecule, decorators: [{
-            type: Component,
-            args: [{ selector: 'molecules-tree-column', imports: [
-                        MatButtonModule,
-                        MatIconModule,
-                        MatTableModule,
-                        MatTooltipModule,
-                        SpreadSheetCell,
-                        ResizeColumnDirective,
-                        NgStyle,
-                    ], template: `
-  @let component = '@ng-atomic/components/molecules/tree-column';
-  <ng-container matColumnDef [sticky]="store.sticky()" [stickyEnd]="store.stickyEnd()">
-    <ng-container *matHeaderCellDef>
-      @let position = { col: store.index(), row: 0 };
-      @let context = { item: null, name: store.name(), position, component, selector: 'header-cell' };
-      @let value = ss.grid.getValue(position);
-      @let expressionValue = ss.grid.getExpressionValue(position);
-      <th
-        mat-header-cell
-        [ssCell]="position"
-        [ssCellContext]="context"
-        [ssCellEditable]="ss.protection.isEditable(value, context)"
-        [style.text-align]="justify"
-        (click)="headerClick.emit()"
-        resizeColumn
-        [resizeColumnWidth]="store.width()"
-        (resize)="onResize(store.index(), $event)"
-        [ngStyle]="store.columnStyle()"
-      >
-        <p class="nowrap" style="display: flex; align-items: center;">
-          <!-- <button mat-icon-button (click)="toggleAll()">
-            <mat-icon>
-              {{ store.isExpandedAll() ? 'unfold_less' : 'unfold_more' }}
-            </mat-icon>
-          </button> -->
-          <span>{{ expressionValue }}</span>
-          @switch(store.sort()) {
-            @case ('asc') {
-              <mat-icon class="order">south</mat-icon>
-            }
-            @case ('desc') { 
-              <mat-icon class="order">north</mat-icon>
-            }
-          }
-        </p>
-      </th>
-    </ng-container>
-    <ng-container *matCellDef="let item; let i = index">
-      @let index = item?.$index ?? i;
-      @let position = { col: store.index(), row: index + 1 };
-      @let context = { item, name: store.name(), position, component };
-      @let value = ss.grid.getValue(position);
-      @let expressionValue = ss.grid.getExpressionValue(position);
-      <td
-        mat-cell
-        [ssCell]="position"
-        [ssCellContext]="context"
-        [ssCellEditable]="ss.protection.isEditable(value, context)"
-        [matTooltip]="store.tooltipText() || value"
-        [matTooltipPosition]="'below'"
-        [matTooltipDisabled]="ss.protection.isEditable(value, context)"
-        [ngStyle]="store.columnStyle()"
-      > 
-        <p class="nowrap" [style.maxWidth.px]="item.level * 48 + store.width()">
-          <span [style.paddingLeft.px]="(item.level + (item.isExpandable ? 0 : 1)) * 48"></span>
-          @if (item.isExpandable) {
-            <button 
-              mat-icon-button 
-              [style.visibility]="!item.isExpandable ? 'hidden' : 'visible'"
-              (click)="store.treeControl().toggle(item)"
-            >
-              <mat-icon>
-                {{ store.treeControl().isExpanded(item) ? 'expand_more' : 'chevron_right' }}
-              </mat-icon>
-            </button>
-          }
-          <span (click)="copy(value, $event)"> {{ expressionValue }} </span>
-        </p>
-      </td>
-    </ng-container>
-  </ng-container> `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
-                        {
-                            directive: TreeColumnMoleculeStore,
-                            inputs: [
-                                'index',
-                                'treeControl',
-                                'column'
-                            ],
-                        },
-                    ], providers: [
-                        { provide: NgAtomicColumnMoleculeStore, useExisting: TreeColumnMoleculeStore },
-                    ], styles: ["th[mat-header-cell],td[mat-cell]{cursor:pointer}th[mat-header-cell] mat-icon.order,td[mat-cell] mat-icon.order{width:12px;height:12px;font-size:12px}th[mat-header-cell] p.nowrap,td[mat-cell] p.nowrap{margin-block-start:0em;margin-block-end:0em;display:flex;justify-content:flex-start;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
-        }], propDecorators: { headerClick: [{
-                type: Output
-            }] } });
-
-class NgAtomicMoleculesModule {
-    static forRoot() {
-        return {
-            ngModule: NgAtomicMoleculesModule,
-            providers: [
-                ...provideMolecules(),
-            ],
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgAtomicMoleculesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: NgAtomicMoleculesModule, imports: [MatChipsModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgAtomicMoleculesModule, imports: [MatChipsModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgAtomicMoleculesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        MatChipsModule,
-                    ]
-                }]
-        }] });
 function provideMolecules() {
-    return [
+    return makeEnvironmentProviders([
+        importProvidersFrom(MatChipsModule),
         ActionsColumnMoleculeStore.Config.provide(),
         provideComponent(ActionsColumnMoleculeStore, () => import('@ng-atomic/components/molecules/actions-column').then(m => m.ActionsColumnMolecule)),
         provideComponent(ChipsInputFieldMoleculeStore, () => import('@ng-atomic/components/molecules/chips-input-field').then(m => m.ChipsInputFieldMolecule)),
@@ -577,12 +29,13 @@ function provideMolecules() {
         provideComponent(TextInputFieldMoleculeStore, () => import('@ng-atomic/components/molecules/text-input-field').then(m => m.TextInputFieldMolecule)),
         TextColumnMoleculeStore.Config.provide(),
         TreeColumnMoleculeStore.Config.provide(),
-    ];
+        ThreadMessageMoleculeStore.DI.provide(() => import('@ng-atomic/components/molecules/thread-message').then(m => m.ThreadMessageMolecule)),
+    ]);
 }
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgAtomicMoleculesModule, provideMolecules };
+export { provideMolecules };
 //# sourceMappingURL=ng-atomic-components-molecules.mjs.map