@ng-atomic/components 17.9.0 → 17.11.0

package/fesm2022/ng-atomic-components-organisms-smart-list.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-organisms-smart-list.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/organisms/smart-list/smart-list.organism.ts","../../../../../packages/@ng-atomic/components/src/lib/organisms/smart-list/ng-atomic-components-organisms-smart-list.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, inject, input } from '@angular/core';\nimport { DATA_ACCESSOR, defaultDataAccessor } from '@ng-atomic/common/pipes/data-accessor';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { MatListModule } from '@angular/material/list';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatRippleModule } from '@angular/material/core';\nimport { DataAccessorPipe } from '@ng-atomic/common/pipes/data-accessor';\nimport { _computed, Actions, InjectableComponent, NgAtomicComponent, TokenizedType } from '@ng-atomic/core';\nimport { KeysPipe } from '@ng-atomic/common/pipes/keys';\nimport { GroupedByPipe } from '@ng-atomic/common/pipes/grouped-by';\nimport { MatButtonModule } from '@angular/material/button';\nimport { ActionsPipe } from '@ng-atomic/common/pipes/actions';\nimport { SmartMenuButtonAtom } from '@ng-atomic/components/atoms/smart-menu-button';\nimport { makeConfig } from '@ng-atomic/common/services/ui';\n\nexport enum ActionId {\n  CLICK_ITEM = '[@ng-atomic/components/organisms/smart-list] Click Item',\n  ITEM_BUTTON_CLICK = '[@ng-atomic/components/organisms/smart-list] Item Button Click',\n}\n\n@TokenizedType()\n@Directive({standalone: true})\nexport class SmartListOrganismStore<T> extends InjectableComponent {\n  static readonly ActionId = ActionId;\n  static readonly Config = makeConfig(() => {\n    return (_, context) => ({\n      items: [],\n      itemActions: [],\n      groupedBy: '',\n      groupKeys: [],\n      itemActionsType: (context.breakpoint === 'xSmall' ? 'dispatch' : 'menu') as 'menu' | 'dispatch'\n    });\n  }, ['components', 'organisms', 'smart-list']);\n\n  readonly config = SmartListOrganismStore.Config.inject();\n  readonly items = input<T[]>([]);\n  readonly itemActions = input<Actions>([]);\n  readonly groupedBy = input<string>();\n  readonly groupKeys = input<string[]>();\n  readonly itemActionsType = input(_computed(() => this.config().itemActionsType));\n}\n\n@Component({\n  selector: 'organisms-smart-list',\n  standalone: true,\n  imports: [\n    NgTemplateOutlet,\n    MatListModule,\n    MatIconModule,\n    MatButtonModule,\n    MatTooltipModule,\n    MatRippleModule,\n    DataAccessorPipe,\n    ActionsPipe,\n    GroupedByPipe,\n    KeysPipe,\n    SmartMenuButtonAtom\n  ],\n  template: `\n  @if (store.groupedBy()) {\n    <mat-list>\n      @for (key of store.groupKeys() ?? (store.items() | groupedBy:store.groupedBy() | keys); track key) {\n        <div mat-subheader>{{ key }}</div>\n        @for (item of ((store.items() ?? [] | groupedBy:store.groupedBy())?.[key] ?? []); track item.id) { \n          <ng-container *ngTemplateOutlet=\"listItem; context: {$implicit: item}\" />\n          <mat-divider />\n        }\n      }\n    </mat-list>\n  } @else {\n    <mat-list>\n      @for (item of store.items(); track item.id) {\n        <ng-container *ngTemplateOutlet=\"listItem; context: {$implicit: item}\" />\n        <mat-divider />\n      }\n    </mat-list>\n  }\n  <ng-template #listItem let-item>\n    <mat-list-item lines=\"2\" matRipple (click)=\"onItemClick(item)\">\n      <span\n        matListItemTitle\n        [matTooltip]=\"item | dataAccessor:'title'\"\n      >\n        {{ item | dataAccessor:'title' }}\n      </span>\n      <span matListItemLine>\n        {{ item | dataAccessor:'description' }}\n      </span>\n      @if ((store.itemActions() | resolveActions:item); as actions) {\n        <ng-container matListItemMeta>\n          @if (actions.length) {\n            @switch (store.itemActionsType()) {\n              @case ('dispatch') {\n                <button\n                  mat-icon-button\n                  (click)=\"onItemActionsClick(item, $event)\"\n                >\n                  <mat-icon>menu</mat-icon>\n                </button>\n              }\n              @case ('menu') {\n                <atoms-smart-menu-button\n                  [actions]=\"actions\"\n                  (action)=\"dispatch($event)\"\n                />\n              }\n            }\n          }\n        </ng-container>\n      }\n    </mat-list-item>\n  </ng-template>\n  `,\n  styleUrls: ['./smart-list.organism.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: SmartListOrganismStore,\n      inputs: ['items', 'itemActions', 'groupedBy', 'groupKeys', 'itemActionsType'],\n    },\n  ],\n})\nexport class SmartListOrganism<T> extends NgAtomicComponent {\n  static readonly ActionId = ActionId;\n  protected readonly store = inject(SmartListOrganismStore);\n  protected readonly dataAccessor = inject(DATA_ACCESSOR, {optional: true}) ?? defaultDataAccessor;\n  protected readonly trackById = (_: number, item: T) => this.dataAccessor(item, 'id');\n\n  protected onItemClick(item: T) {\n    this.dispatch({id: ActionId.CLICK_ITEM, payload: item});\n  }\n\n  protected onItemActionsClick(item: T, $event: Event) {\n    $event.stopPropagation();\n    $event.preventDefault();\n    this.dispatch({id: ActionId.ITEM_BUTTON_CLICK, payload: item});\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-atomic-components-organisms-smart-list.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/organisms/smart-list/smart-list.organism.ts","../../../../../packages/@ng-atomic/components/src/lib/organisms/smart-list/ng-atomic-components-organisms-smart-list.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, inject, input } from '@angular/core';\nimport { DATA_ACCESSOR, defaultDataAccessor } from '@ng-atomic/common/pipes/data-accessor';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { MatListModule } from '@angular/material/list';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatRippleModule } from '@angular/material/core';\nimport { DataAccessorPipe } from '@ng-atomic/common/pipes/data-accessor';\nimport { _computed, Actions, InjectableComponent, NgAtomicComponent, TokenizedType } from '@ng-atomic/core';\nimport { KeysPipe } from '@ng-atomic/common/pipes/keys';\nimport { GroupedByPipe } from '@ng-atomic/common/pipes/grouped-by';\nimport { MatButtonModule } from '@angular/material/button';\nimport { ActionsPipe } from '@ng-atomic/common/pipes/actions';\nimport { SmartMenuButtonAtom } from '@ng-atomic/components/atoms/smart-menu-button';\nimport { makeConfig } from '@ng-atomic/common/services/ui';\n\nexport enum ActionId {\n  CLICK_ITEM = '[@ng-atomic/components/organisms/smart-list] Click Item',\n  ITEM_BUTTON_CLICK = '[@ng-atomic/components/organisms/smart-list] Item Button Click',\n}\n\n@TokenizedType()\n@Directive({standalone: true})\nexport class SmartListOrganismStore<T> extends InjectableComponent {\n  static readonly ActionId = ActionId;\n  static readonly Config = makeConfig(() => {\n    return () => ({\n      items: <any[]>[],\n      itemActions: <Actions>[],\n      groupedBy: '',\n      groupKeys: <string[]>[],\n      itemActionsType: <'menu' | 'dispatch'>'menu'\n    });\n  }, ['components', 'organisms', 'smart-list']);\n\n  static provideItemActionsTypeConfig() {\n    return SmartListOrganismStore.Config.provide(() => {\n      return (config, context) => ({\n        ...config,\n        itemActionsType: (context.breakpoint === 'xSmall' ? 'dispatch' : 'menu')\n      });\n    });\n  }\n\n  readonly config = SmartListOrganismStore.Config.inject();\n  readonly items = input<T[]>([]);\n  readonly itemActions = input<Actions>([]);\n  readonly groupedBy = input<string>();\n  readonly groupKeys = input<string[]>();\n  readonly itemActionsType = input(_computed(() => this.config().itemActionsType));\n}\n\n@Component({\n  selector: 'organisms-smart-list',\n  standalone: true,\n  imports: [\n    NgTemplateOutlet,\n    MatListModule,\n    MatIconModule,\n    MatButtonModule,\n    MatTooltipModule,\n    MatRippleModule,\n    DataAccessorPipe,\n    ActionsPipe,\n    GroupedByPipe,\n    KeysPipe,\n    SmartMenuButtonAtom\n  ],\n  template: `\n  @if (store.groupedBy()) {\n    <mat-list>\n      @for (key of store.groupKeys() ?? (store.items() | groupedBy:store.groupedBy() | keys); track key) {\n        <div mat-subheader>{{ key }}</div>\n        @for (item of ((store.items() ?? [] | groupedBy:store.groupedBy())?.[key] ?? []); track item.id) { \n          <ng-container *ngTemplateOutlet=\"listItem; context: {$implicit: item}\" />\n          <mat-divider />\n        }\n      }\n    </mat-list>\n  } @else {\n    <mat-list>\n      @for (item of store.items(); track item.id) {\n        <ng-container *ngTemplateOutlet=\"listItem; context: {$implicit: item}\" />\n        <mat-divider />\n      }\n    </mat-list>\n  }\n  <ng-template #listItem let-item>\n    <mat-list-item lines=\"2\" matRipple (click)=\"onItemClick(item)\">\n      <span\n        matListItemTitle\n        [matTooltip]=\"item | dataAccessor:'title'\"\n      >\n        {{ item | dataAccessor:'title' }}\n      </span>\n      <span matListItemLine>\n        {{ item | dataAccessor:'description' }}\n      </span>\n      @if ((store.itemActions() | resolveActions:item); as actions) {\n        <ng-container matListItemMeta>\n          @if (actions.length) {\n            @switch (store.itemActionsType()) {\n              @case ('dispatch') {\n                <button\n                  mat-icon-button\n                  (click)=\"onItemActionsClick(item, $event)\"\n                >\n                  <mat-icon>menu</mat-icon>\n                </button>\n              }\n              @case ('menu') {\n                <atoms-smart-menu-button\n                  [actions]=\"actions\"\n                  (action)=\"dispatch($event)\"\n                />\n              }\n            }\n          }\n        </ng-container>\n      }\n    </mat-list-item>\n  </ng-template>\n  `,\n  styleUrls: ['./smart-list.organism.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: SmartListOrganismStore,\n      inputs: ['items', 'itemActions', 'groupedBy', 'groupKeys', 'itemActionsType'],\n    },\n  ],\n})\nexport class SmartListOrganism<T> extends NgAtomicComponent {\n  static readonly ActionId = ActionId;\n  protected readonly store = inject(SmartListOrganismStore);\n  protected readonly dataAccessor = inject(DATA_ACCESSOR, {optional: true}) ?? defaultDataAccessor;\n  protected readonly trackById = (_: number, item: T) => this.dataAccessor(item, 'id');\n\n  protected onItemClick(item: T) {\n    this.dispatch({id: ActionId.CLICK_ITEM, payload: item});\n  }\n\n  protected onItemActionsClick(item: T, $event: Event) {\n    $event.stopPropagation();\n    $event.preventDefault();\n    this.dispatch({id: ActionId.ITEM_BUTTON_CLICK, payload: item});\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ng-atomic-components-organisms-social-login-section.mjs

@@ -9,14 +9,14 @@ class SocialLoginSectionOrganism {
         this.signInWithGoogleButtonClick = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: SocialLoginSectionOrganism, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: SocialLoginSectionOrganism, isStandalone: true, selector: "organisms-social-login-section", outputs: { signInWithGoogleButtonClick: "signInWithGoogleButtonClick" }, ngImport: i0, template: "<button \n  mat-raised-button \n  color=\"primary\" \n  (click)=\"signInWithGoogleButtonClick.emit()\"\n>Google\u30A2\u30AB\u30A6\u30F3\u30C8\u3067\u30ED\u30B0\u30A4\u30F3</button>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-heading-BVVK: var(--horizontal-padding)}:host{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-heading-BVVK);box-sizing:border-box}:host button{width:100%;height:56px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: SocialLoginSectionOrganism, isStandalone: true, selector: "organisms-social-login-section", outputs: { signInWithGoogleButtonClick: "signInWithGoogleButtonClick" }, ngImport: i0, template: "<button \n  mat-raised-button \n  color=\"primary\" \n  (click)=\"signInWithGoogleButtonClick.emit()\"\n>Google\u30A2\u30AB\u30A6\u30F3\u30C8\u3067\u30ED\u30B0\u30A4\u30F3</button>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-heading-xHgp: var(--horizontal-padding)}:host{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-heading-xHgp);box-sizing:border-box}:host button{width:100%;height:56px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: SocialLoginSectionOrganism, decorators: [{
             type: Component,
             args: [{ selector: 'organisms-social-login-section', standalone: true, imports: [
                         CommonModule,
                         MatButtonModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n  mat-raised-button \n  color=\"primary\" \n  (click)=\"signInWithGoogleButtonClick.emit()\"\n>Google\u30A2\u30AB\u30A6\u30F3\u30C8\u3067\u30ED\u30B0\u30A4\u30F3</button>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-heading-BVVK: var(--horizontal-padding)}:host{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-heading-BVVK);box-sizing:border-box}:host button{width:100%;height:56px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n  mat-raised-button \n  color=\"primary\" \n  (click)=\"signInWithGoogleButtonClick.emit()\"\n>Google\u30A2\u30AB\u30A6\u30F3\u30C8\u3067\u30ED\u30B0\u30A4\u30F3</button>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-heading-xHgp: var(--horizontal-padding)}:host{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-heading-xHgp);box-sizing:border-box}:host button{width:100%;height:56px}\n"] }]
         }], propDecorators: { signInWithGoogleButtonClick: [{
                 type: Output
             }] } });

package/fesm2022/ng-atomic-components-organisms-table.mjs

@@ -3,7 +3,7 @@ import { inject, Injectable, input, computed, Directive, Component, ChangeDetect
 import { FormBuilder } from '@angular/forms';
 import { PaginationService } from '@ng-atomic/common/services/form/pagination';
 import { SortService } from '@ng-atomic/common/services/form/sort';
-import { wrapActions, InjectableComponent, TokenizedType, NgAtomicComponent, Effect } from '@ng-atomic/core';
+import { wrapActions, InjectableComponent, _computed, TokenizedType, NgAtomicComponent, Effect } from '@ng-atomic/core';
 import { injectProps, DomainPipe } from '@ng-atomic/common/pipes/domain';
 import { omitBy } from 'lodash-es';
 import { __decorate, __metadata } from 'tslib';
@@ -25,8 +25,10 @@ import { ResolveColumnsPipe } from '@ng-atomic/common/pipes/resolve-columns';
 import { MapPipe } from '@ng-atomic/common/pipes/map';
 import { AutoColumnsPipe } from '@ng-atomic/common/pipes/auto-columns';
 import { SortPipe } from '@ng-atomic/common/pipes/sort';
-import { MatTreeFlattener, MatTreeFlatDataSource } from '@angular/material/tree';
 import { FlatTreeControl } from '@angular/cdk/tree';
+import { CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
+import { makeConfig } from '@ng-atomic/common/services/ui';
+import { MatTreeFlattener, MatTreeFlatDataSource } from '@angular/material/tree';
 
 function buildColumns(columns) {
     return columns.map(column => {
@@ -51,6 +53,7 @@ function buildColumns(columns) {
                 return {
                     type: 'tree',
                     name: column.split('__tree_')?.[1] ?? '__tree',
+                    headerText: '',
                     visible: true,
                     width: 200,
                 };
@@ -98,6 +101,7 @@ class IndexFormBuilder {
                     return this.fb.group({
                         type: this.fb.control({ value: 'tree', disabled: true }),
                         name: this.fb.control({ value: column.name, disabled: true }),
+                        headerText: this.fb.control(column.headerText),
                         visible: this.fb.control(column.visible),
                         width: this.fb.control(80),
                     });
@@ -157,9 +161,19 @@ function buildTreeFlatDataSource(treeControl, data, key = 'children') {
     return new MatTreeFlatDataSource(treeControl, treeFlattener, data);
 }
 
+var TableOrganismStore_1;
+var ActionId;
+(function (ActionId) {
+    ActionId["CHECKBOX_CLICK"] = "[@ng-atomic/components/organisms/checkbox-column] Checkbox Click";
+    ActionId["HEADER_CHECKBOX_CLICK"] = "[@ng-atomic/components/organisms/checkbox-column] Header Checkbox Click";
+    ActionId["HEADER_CLICK"] = "[@ng-atomic/components/organisms/table] Header Click";
+    ActionId["ROW_DROP"] = "[@ng-atomic/components/organisms/table] Row Drop";
+})(ActionId || (ActionId = {}));
 let TableOrganismStore = class TableOrganismStore extends InjectableComponent {
     constructor() {
         super(...arguments);
+        this.config = TableOrganismStore_1.Config.inject();
+        this.draggable = input(_computed(() => this.config().draggable));
         this.domainPipe = inject(DomainPipe);
         this.form = input(inject(IndexFormBuilder).build());
         this.itemActions = input([]);
@@ -174,13 +188,20 @@ let TableOrganismStore = class TableOrganismStore extends InjectableComponent {
             }
             return new MatTableDataSource(this.items());
         });
-        this.isHidden = computed(() => (item) => this.treeControl().getLevel(item) === 0);
+        this.isHidden = input(_computed(() => this.config().isHidden));
+        // () => {
+        //   if (this.childrenKey()) {
+        //     return (item: T) => this.treeControl().getLevel(item) === 0;
+        //   } else {
+        //     return (item: T) => false;
+        //   }
+        // }
         this.formValue = computedRawValue(() => this.form());
         this.sort = computed(() => this.formValue()?.sort ?? { key: '', order: 'asc' }, {
             equal: (a, b) => JSON.stringify(a) === JSON.stringify(b),
         });
         this.columns = computed(() => {
-            return new ColumnsPipe().transform((this.formValue()?.columns ?? [])).map(column => {
+            const columns = new ColumnsPipe().transform((this.formValue()?.columns ?? [])).map(column => {
                 if (column.name.startsWith('__tree_')) {
                     return {
                         ...column,
@@ -188,6 +209,13 @@ let TableOrganismStore = class TableOrganismStore extends InjectableComponent {
                         sort: this.sort().key === column.name ? this.sort().order : 'none',
                     };
                 }
+                else if (column.name.startsWith('checkbox')) {
+                    return {
+                        ...column,
+                        type: 'checkbox',
+                        headerText: 'check',
+                    };
+                }
                 else if (column.type === 'actions') {
                     return {
                         ...column,
@@ -199,20 +227,29 @@ let TableOrganismStore = class TableOrganismStore extends InjectableComponent {
                 else {
                     return {
                         ...column,
-                        headerText: this.domainPipe.transform(column?.name),
+                        headerText: this.domainPipe.transform(column?.headerText ?? column?.name),
                         sort: this.sort().key === column.name ? this.sort().order : 'none',
                     };
                 }
             });
+            return columns;
         }, { equal: (a, b) => JSON.stringify(a) === JSON.stringify(b) });
         this.columnNames = computed(() => this.columns().map(column => column.name), {
             equal: (a, b) => JSON.stringify(a) === JSON.stringify(b),
         });
     }
+    static { TableOrganismStore_1 = this; }
+    static { this.ActionId = ActionId; }
+    static { this.Config = makeConfig(() => {
+        return () => ({
+            draggable: true,
+            isHidden: (item) => false,
+        });
+    }, ['components', 'organisms', 'table']); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: TableOrganismStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: TableOrganismStore, isStandalone: true, selector: "organisms-table", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, itemActions: { classPropertyName: "itemActions", publicName: "itemActions", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, treeControl: { classPropertyName: "treeControl", publicName: "treeControl", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DomainPipe], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: TableOrganismStore, isStandalone: true, selector: "organisms-table", inputs: { draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, itemActions: { classPropertyName: "itemActions", publicName: "itemActions", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, treeControl: { classPropertyName: "treeControl", publicName: "treeControl", isSignal: true, isRequired: false, transformFunction: null }, isHidden: { classPropertyName: "isHidden", publicName: "isHidden", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DomainPipe], usesInheritance: true, ngImport: i0 }); }
 };
-TableOrganismStore = __decorate([
+TableOrganismStore = TableOrganismStore_1 = __decorate([
     TokenizedType()
 ], TableOrganismStore);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: TableOrganismStore, decorators: [{
@@ -223,11 +260,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                     providers: [DomainPipe],
                 }]
         }] });
-var ActionId;
-(function (ActionId) {
-    ActionId["CHECKBOX_CLICK"] = "[@ng-atomic/components/organisms/checkbox-column] Checkbox Click";
-    ActionId["HEADER_CLICK"] = "[@ng-atomic/components/organisms/table] Header Click";
-})(ActionId || (ActionId = {}));
 class TableOrganism extends NgAtomicComponent {
     constructor() {
         super(...arguments);
@@ -237,11 +269,31 @@ class TableOrganism extends NgAtomicComponent {
     onCheckboxClick(item) {
         this.dispatch({ id: ActionId.CHECKBOX_CLICK, payload: item });
     }
+    onHeaderCheckboxClick(item) {
+        this.dispatch({ id: ActionId.HEADER_CHECKBOX_CLICK });
+    }
     onHeaderClick(column) {
         this.dispatch({ id: ActionId.HEADER_CLICK, payload: column });
     }
+    onDrop(event) {
+        const control = this.store.treeControl();
+        const nodes = control.dataNodes.filter(node => node.level === 0);
+        const nodes_ = getDisplayedNodes(nodes, control);
+        const draggedNode = nodes_[event.previousIndex];
+        const droppedNode = nodes_[event.currentIndex];
+        const items = flatItems(this.store.items(), this.store.childrenKey());
+        this.dispatch({
+            id: ActionId.ROW_DROP,
+            payload: {
+                previousIndex: nodes_.findIndex(node => node === event.item.data),
+                currentIndex: event.currentIndex,
+                dragged: items.find(item => item.id === draggedNode.id),
+                dropped: items.find(item => item.id === droppedNode.id),
+            }
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: TableOrganism, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: TableOrganism, isStandalone: true, selector: "organisms-table", host: { classAttribute: "organism" }, usesInheritance: true, hostDirectives: [{ directive: TableOrganismStore, inputs: ["form", "form", "itemActions", "itemActions", "selection", "selection", "items", "items", "childrenKey", "childrenKey", "highlight", "highlight"] }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: TableOrganism, isStandalone: true, selector: "organisms-table", host: { classAttribute: "organism" }, usesInheritance: true, hostDirectives: [{ directive: TableOrganismStore, inputs: ["draggable", "draggable", "form", "form", "itemActions", "itemActions", "selection", "selection", "items", "items", "childrenKey", "childrenKey", "highlight", "highlight", "treeControl", "treeControl", "isHidden", "isHidden"] }], ngImport: i0, template: `
   <table
     mat-table
     recycleRows
@@ -249,52 +301,60 @@ class TableOrganism extends NgAtomicComponent {
     matSortDisableClear
     matSortDirection="desc"
     [dataSource]="store.dataSource()"
+    cdkDropList
+    (cdkDropListDropped)="onDrop($event)"
+    [cdkDropListDisabled]="!store.draggable()"
   >
-    @for (column of store.columns(); track column.name; let i = $index) {
-      @switch (column.type) {
-        @case ('checkbox') {
-          <molecules-checkbox-column
-            [name]="column.name"
-            [selection]="store.selection()"
-            [isHidden]="store.isHidden()"
-            (action)="dispatch($event)"
-          />
-        }
-        @case ('actions') {
-          <molecules-actions-column
-            [name]="column.name"
-            [itemActions]="column.actions"
-            (action)="dispatch($event)"
-          />
-        }
-        @case('tree') {
-          <molecules-tree-column
-            [name]="column.name"
-            [headerText]="column.headerText"
-            [treeControl]="store.treeControl()"
-            [sort]="column.sort"
-            (headerClick)="onHeaderClick(column.name)"
-          />
-        }
-        @default {
-          <molecules-smart-column
-            [name]="column.name"
-            [headerText]="column.headerText"
-            [sort]="column.sort"
-            (headerClick)="onHeaderClick(column.name)"
-          />
+    <tbody
+    >
+      @for (column of store.columns(); track column.name; let i = $index) {
+        @switch (column.type) {
+          @case ('checkbox') {
+            <molecules-checkbox-column
+              [name]="column.name"
+              [selection]="store.selection()"
+              [isHidden]="store.isHidden()"
+              (action)="dispatch($event)"
+            />
+          }
+          @case ('actions') {
+            <molecules-actions-column
+              [name]="column.name"
+              [itemActions]="column.actions"
+              (action)="dispatch($event)"
+            />
+          }
+          @case('tree') {
+            <molecules-tree-column
+              [name]="column.name"
+              [headerText]="column.headerText"
+              [treeControl]="store.treeControl()"
+              [sort]="column.sort"
+              (headerClick)="onHeaderClick(column.name)"
+            />
+          }
+          @default {
+            <molecules-smart-column
+              [name]="column.name"
+              [headerText]="column.headerText"
+              [sort]="column.sort"
+              (headerClick)="onHeaderClick(column.name)"
+            />
+          }
         }
       }
-    }
-    <tr mat-header-row *matHeaderRowDef="store.columnNames(); sticky: true"></tr>
-    <tr
-      mat-row
-      *matRowDef="let item; columns: store.columnNames();"
-      [ngClass]="{ highlight: store.highlight().isSelected(item.id) }"
-    ></tr>
-    <div class="mat-row" *matNoDataRow>No Data</div>
+      <tr mat-header-row *matHeaderRowDef="store.columnNames(); sticky: true"></tr>
+      <tr
+        mat-row
+        *matRowDef="let item; columns: store.columnNames();"
+        [ngClass]="{ highlight: store.highlight().isSelected(item.id) }"
+        [cdkDrag]
+        [cdkDragDisabled]="!store.draggable()"
+      ></tr>
+      <div class="mat-row" *matNoDataRow>No Data</div>
+    </tbody>
   </table>
-  `, isInline: true, styles: [":host{--width: 100%;--width-SCOPED-IN-smart-table-ZJ54: var(--width);--column-vertical-padding: 4px;--column-vertical-padding-SCOPED-IN-smart-table-ZJ54: var(--column-vertical-padding);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-smart-table-ZJ54: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-smart-table-ZJ54: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-smart-table-ZJ54: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-smart-table-ZJ54: var(--on-background-color);--vertical-padding: 16px;--vertical-padding-SCOPED-IN-smart-table-ZJ54: var(--vertical-padding)}:host{position:relative;display:block;width:100%;height:100%;overflow:scroll}:host::-webkit-scrollbar{display:none}:host table{width:100%;max-height:100%;background-color:var(--background-color-SCOPED-IN-smart-table-ZJ54);color:var(--on-background-color-SCOPED-IN-smart-table-ZJ54)}:host table .nowrap{width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host table ::ng-deep th,:host table ::ng-deep td{padding:0 var(--column-vertical-padding-SCOPED-IN-smart-table-ZJ54);box-sizing:border-box}:host table ::ng-deep th:first-child,:host table ::ng-deep td:first-child{padding-left:var(--vertical-padding-SCOPED-IN-smart-table-ZJ54)}:host table ::ng-deep th:last-child,:host table ::ng-deep td:last-child{padding-right:var(--vertical-padding-SCOPED-IN-smart-table-ZJ54)}:host table ::ng-deep tr.highlight{background-color:#f0f0f0;transition:background-color .5s}:host .no-data-message{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px);height:3em;padding:0 16px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1.MatRecycleRows, selector: "mat-table[recycleRows], table[mat-table][recycleRows]" }, { kind: "directive", type: i1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: i1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: ActionsColumnMolecule, selector: "molecules-actions-column" }, { kind: "component", type: CheckboxColumnMolecule, selector: "molecules-checkbox-column", inputs: ["name", "selection", "isHidden"] }, { kind: "component", type: SmartColumnMolecule, selector: "molecules-smart-column", inputs: ["headerText", "name"], outputs: ["headerClick"] }, { kind: "component", type: TreeColumnMolecule, selector: "molecules-tree-column", outputs: ["headerClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--width: 100%;--width-SCOPED-IN-smart-table-of5W: var(--width);--column-vertical-padding: 4px;--column-vertical-padding-SCOPED-IN-smart-table-of5W: var(--column-vertical-padding);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-smart-table-of5W: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-smart-table-of5W: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-smart-table-of5W: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-smart-table-of5W: var(--on-background-color);--vertical-padding: 16px;--vertical-padding-SCOPED-IN-smart-table-of5W: var(--vertical-padding)}.cdk-drag-preview{display:table;background-color:#fff}.cdk-drag-placeholder{opacity:0}:host{position:relative;display:block;width:100%;height:100%;overflow:scroll}:host::-webkit-scrollbar{display:none}:host table{width:100%;max-height:100%;background-color:var(--background-color-SCOPED-IN-smart-table-of5W);color:var(--on-background-color-SCOPED-IN-smart-table-of5W)}:host table .nowrap{width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host table ::ng-deep th,:host table ::ng-deep td{padding:0 var(--column-vertical-padding-SCOPED-IN-smart-table-of5W);box-sizing:border-box}:host table ::ng-deep th:first-child,:host table ::ng-deep td:first-child{padding-left:var(--vertical-padding-SCOPED-IN-smart-table-of5W)}:host table ::ng-deep th:last-child,:host table ::ng-deep td:last-child{padding-right:var(--vertical-padding-SCOPED-IN-smart-table-of5W)}:host table ::ng-deep tr.highlight{background-color:#f0f0f0;transition:background-color .5s}:host .no-data-message{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px);height:3em;padding:0 16px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1.MatRecycleRows, selector: "mat-table[recycleRows], table[mat-table][recycleRows]" }, { kind: "directive", type: i1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: i1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: ActionsColumnMolecule, selector: "molecules-actions-column" }, { kind: "component", type: CheckboxColumnMolecule, selector: "molecules-checkbox-column", inputs: ["name", "selection", "isHidden"] }, { kind: "component", type: SmartColumnMolecule, selector: "molecules-smart-column", inputs: ["headerText", "name"], outputs: ["headerClick"] }, { kind: "component", type: TreeColumnMolecule, selector: "molecules-tree-column", outputs: ["headerClick"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     Effect(CheckboxColumnMolecule.ActionId.CHECKBOX_CLICK),
@@ -302,6 +362,12 @@ __decorate([
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", void 0)
 ], TableOrganism.prototype, "onCheckboxClick", null);
+__decorate([
+    Effect(CheckboxColumnMolecule.ActionId.HEADER_CHECKBOX_CLICK),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], TableOrganism.prototype, "onHeaderCheckboxClick", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: TableOrganism, decorators: [{
             type: Component,
             args: [{ selector: 'organisms-table', standalone: true, imports: [
@@ -321,6 +387,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                         AutoColumnsPipe,
                         SortPipe,
                         ColumnsPipe,
+                        CdkDropList,
+                        CdkDrag,
                     ], template: `
   <table
     mat-table
@@ -329,62 +397,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
     matSortDisableClear
     matSortDirection="desc"
     [dataSource]="store.dataSource()"
+    cdkDropList
+    (cdkDropListDropped)="onDrop($event)"
+    [cdkDropListDisabled]="!store.draggable()"
   >
-    @for (column of store.columns(); track column.name; let i = $index) {
-      @switch (column.type) {
-        @case ('checkbox') {
-          <molecules-checkbox-column
-            [name]="column.name"
-            [selection]="store.selection()"
-            [isHidden]="store.isHidden()"
-            (action)="dispatch($event)"
-          />
-        }
-        @case ('actions') {
-          <molecules-actions-column
-            [name]="column.name"
-            [itemActions]="column.actions"
-            (action)="dispatch($event)"
-          />
-        }
-        @case('tree') {
-          <molecules-tree-column
-            [name]="column.name"
-            [headerText]="column.headerText"
-            [treeControl]="store.treeControl()"
-            [sort]="column.sort"
-            (headerClick)="onHeaderClick(column.name)"
-          />
-        }
-        @default {
-          <molecules-smart-column
-            [name]="column.name"
-            [headerText]="column.headerText"
-            [sort]="column.sort"
-            (headerClick)="onHeaderClick(column.name)"
-          />
+    <tbody
+    >
+      @for (column of store.columns(); track column.name; let i = $index) {
+        @switch (column.type) {
+          @case ('checkbox') {
+            <molecules-checkbox-column
+              [name]="column.name"
+              [selection]="store.selection()"
+              [isHidden]="store.isHidden()"
+              (action)="dispatch($event)"
+            />
+          }
+          @case ('actions') {
+            <molecules-actions-column
+              [name]="column.name"
+              [itemActions]="column.actions"
+              (action)="dispatch($event)"
+            />
+          }
+          @case('tree') {
+            <molecules-tree-column
+              [name]="column.name"
+              [headerText]="column.headerText"
+              [treeControl]="store.treeControl()"
+              [sort]="column.sort"
+              (headerClick)="onHeaderClick(column.name)"
+            />
+          }
+          @default {
+            <molecules-smart-column
+              [name]="column.name"
+              [headerText]="column.headerText"
+              [sort]="column.sort"
+              (headerClick)="onHeaderClick(column.name)"
+            />
+          }
         }
       }
-    }
-    <tr mat-header-row *matHeaderRowDef="store.columnNames(); sticky: true"></tr>
-    <tr
-      mat-row
-      *matRowDef="let item; columns: store.columnNames();"
-      [ngClass]="{ highlight: store.highlight().isSelected(item.id) }"
-    ></tr>
-    <div class="mat-row" *matNoDataRow>No Data</div>
+      <tr mat-header-row *matHeaderRowDef="store.columnNames(); sticky: true"></tr>
+      <tr
+        mat-row
+        *matRowDef="let item; columns: store.columnNames();"
+        [ngClass]="{ highlight: store.highlight().isSelected(item.id) }"
+        [cdkDrag]
+        [cdkDragDisabled]="!store.draggable()"
+      ></tr>
+      <div class="mat-row" *matNoDataRow>No Data</div>
+    </tbody>
   </table>
   `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
                             directive: TableOrganismStore,
-                            inputs: ['form', 'itemActions', 'selection', 'items', 'childrenKey', 'highlight'],
+                            inputs: [
+                                'draggable',
+                                'form',
+                                'itemActions',
+                                'selection',
+                                'items',
+                                'childrenKey',
+                                'highlight',
+                                'treeControl',
+                                'isHidden',
+                            ],
                         },
-                    ], host: { class: 'organism' }, styles: [":host{--width: 100%;--width-SCOPED-IN-smart-table-ZJ54: var(--width);--column-vertical-padding: 4px;--column-vertical-padding-SCOPED-IN-smart-table-ZJ54: var(--column-vertical-padding);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-smart-table-ZJ54: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-smart-table-ZJ54: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-smart-table-ZJ54: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-smart-table-ZJ54: var(--on-background-color);--vertical-padding: 16px;--vertical-padding-SCOPED-IN-smart-table-ZJ54: var(--vertical-padding)}:host{position:relative;display:block;width:100%;height:100%;overflow:scroll}:host::-webkit-scrollbar{display:none}:host table{width:100%;max-height:100%;background-color:var(--background-color-SCOPED-IN-smart-table-ZJ54);color:var(--on-background-color-SCOPED-IN-smart-table-ZJ54)}:host table .nowrap{width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host table ::ng-deep th,:host table ::ng-deep td{padding:0 var(--column-vertical-padding-SCOPED-IN-smart-table-ZJ54);box-sizing:border-box}:host table ::ng-deep th:first-child,:host table ::ng-deep td:first-child{padding-left:var(--vertical-padding-SCOPED-IN-smart-table-ZJ54)}:host table ::ng-deep th:last-child,:host table ::ng-deep td:last-child{padding-right:var(--vertical-padding-SCOPED-IN-smart-table-ZJ54)}:host table ::ng-deep tr.highlight{background-color:#f0f0f0;transition:background-color .5s}:host .no-data-message{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px);height:3em;padding:0 16px}\n"] }]
-        }], propDecorators: { onCheckboxClick: [] } });
+                    ], host: { class: 'organism' }, styles: [":host{--width: 100%;--width-SCOPED-IN-smart-table-of5W: var(--width);--column-vertical-padding: 4px;--column-vertical-padding-SCOPED-IN-smart-table-of5W: var(--column-vertical-padding);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-smart-table-of5W: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-smart-table-of5W: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-smart-table-of5W: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-smart-table-of5W: var(--on-background-color);--vertical-padding: 16px;--vertical-padding-SCOPED-IN-smart-table-of5W: var(--vertical-padding)}.cdk-drag-preview{display:table;background-color:#fff}.cdk-drag-placeholder{opacity:0}:host{position:relative;display:block;width:100%;height:100%;overflow:scroll}:host::-webkit-scrollbar{display:none}:host table{width:100%;max-height:100%;background-color:var(--background-color-SCOPED-IN-smart-table-of5W);color:var(--on-background-color-SCOPED-IN-smart-table-of5W)}:host table .nowrap{width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host table ::ng-deep th,:host table ::ng-deep td{padding:0 var(--column-vertical-padding-SCOPED-IN-smart-table-of5W);box-sizing:border-box}:host table ::ng-deep th:first-child,:host table ::ng-deep td:first-child{padding-left:var(--vertical-padding-SCOPED-IN-smart-table-of5W)}:host table ::ng-deep th:last-child,:host table ::ng-deep td:last-child{padding-right:var(--vertical-padding-SCOPED-IN-smart-table-of5W)}:host table ::ng-deep tr.highlight{background-color:#f0f0f0;transition:background-color .5s}:host .no-data-message{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px);height:3em;padding:0 16px}\n"] }]
+        }], propDecorators: { onCheckboxClick: [], onHeaderCheckboxClick: [] } });
+function getDisplayedNodes(nodes, control) {
+    const result = [];
+    for (const node of nodes) {
+        result.push(node);
+        if (control.isExpanded(node)) {
+            result.push(...getDisplayedNodes(node.children, control));
+        }
+    }
+    return result;
+}
+function flatItems(items, key = 'children') {
+    const result = [];
+    for (const item of items) {
+        result.push(item);
+        if (item[key]) {
+            result.push(...flatItems(item[key], key));
+        }
+    }
+    return result;
+}
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { IndexFormBuilder, IndexFormBuilder as IndexTemplateFormBuilder, TableOrganism, TableOrganismStore, buildColumns, injectIndexForm, injectIndexFormBuilder, injectIndexForm as injectIndexTemplateForm, injectIndexFormBuilder as injectIndexTemplateFormBuilder };
+export { IndexFormBuilder, IndexFormBuilder as IndexTemplateFormBuilder, TableOrganism, TableOrganismStore, buildColumns, flatItems, injectIndexForm, injectIndexFormBuilder, injectIndexForm as injectIndexTemplateForm, injectIndexFormBuilder as injectIndexTemplateFormBuilder };
 //# sourceMappingURL=ng-atomic-components-organisms-table.mjs.map