fix: remove unused FlexLayoutModule imports and replace with specific…

projects/apps/updated-demo/src/app/pages/dashboard/dashboard.component.ts

@@ -1,10 +1,9 @@
 import { Component } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
-import { FlexLayoutModule } from '@ngbracket/ngx-layout';
 
 @Component({
   selector: 'app-dashboard',
-  imports: [MatCardModule, FlexLayoutModule],
+  imports: [MatCardModule],
   template: `<h1>Ngx-Layout</h1> `,
   styles: [``],
 })

projects/apps/updated-demo/src/app/pages/grid/layout/layout.component.ts

@@ -1,10 +1,25 @@
+import { NgStyle } from '@angular/common';
 import { Component } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
-import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+import {
+  GridAreaDirective,
+  GridAreasDirective,
+  GridColumnsDirective,
+  GridGapDirective,
+} from '@ngbracket/ngx-layout';
+import { StyleDirective } from 'projects/libs/flex-layout/extended/style/style';
 
 @Component({
   selector: 'app-grid-layout',
-  imports: [MatCardModule, FlexLayoutModule],
+  imports: [
+    MatCardModule,
+    NgStyle,
+    StyleDirective,
+    GridAreaDirective,
+    GridGapDirective,
+    GridAreasDirective,
+    GridColumnsDirective,
+  ],
   template: ` <mat-card class="card-demo">
     <mat-card-title>Basic Responsive Grid App</mat-card-title>
     <mat-card-content class="containerX">

projects/apps/updated-demo/src/app/pages/grid/minmax/minmax.component.ts

@@ -1,10 +1,21 @@
 import { Component } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
-import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+import {
+  GridColumnDirective,
+  GridColumnsDirective,
+  GridGapDirective,
+  GridRowDirective,
+} from '@ngbracket/ngx-layout';
 
 @Component({
   selector: 'app-minmax',
-  imports: [MatCardModule, FlexLayoutModule],
+  imports: [
+    MatCardModule,
+    GridGapDirective,
+    GridColumnDirective,
+    GridColumnsDirective,
+    GridRowDirective,
+  ],
   template: ` <mat-card class="card-demo">
     <mat-card-title>Grid with Minmax</mat-card-title>
     <mat-card-content class="containerX">
@@ -32,8 +43,6 @@ import { FlexLayoutModule } from '@ngbracket/ngx-layout';
   styles: [
     `
       .box {
-        /*background-color: #444;*/
-        /*color: #fff;*/
         border-radius: 5px;
         padding: 20px;
         font-size: 150%;

projects/apps/updated-demo/src/app/pages/grid/nested/nested.component.ts

@@ -1,10 +1,23 @@
 import { Component } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
-import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+import {
+  GridColumnDirective,
+  GridColumnsDirective,
+  GridGapDirective,
+  GridRowDirective,
+  GridRowsDirective,
+} from '@ngbracket/ngx-layout';
 
 @Component({
   selector: 'app-nested',
-  imports: [MatCardModule, FlexLayoutModule],
+  imports: [
+    MatCardModule,
+    GridGapDirective,
+    GridColumnsDirective,
+    GridRowsDirective,
+    GridColumnDirective,
+    GridRowDirective,
+  ],
   template: ` <mat-card class="card-demo">
     <mat-card-title>Nested Grid</mat-card-title>
     <mat-card-content class="containerX">

projects/apps/updated-demo/src/app/pages/grid/overlay/overlay.component.ts

@@ -1,10 +1,24 @@
 import { Component } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
-import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+import {
+  GridAreasDirective,
+  GridColumnDirective,
+  GridColumnsDirective,
+  GridGapDirective,
+  GridRowDirective,
+} from '@ngbracket/ngx-layout';
 
 @Component({
   selector: 'app-overlay',
-  imports: [MatCardModule, FlexLayoutModule],
+  imports: [
+    MatCardModule,
+    GridGapDirective,
+    GridColumnsDirective,
+    GridAreasDirective,
+    GridAreasDirective,
+    GridColumnDirective,
+    GridRowDirective,
+  ],
   template: ` <mat-card class="card-demo">
     <mat-card-title>Grid with Overlay</mat-card-title>
     <mat-card-content class="containerX">

projects/apps/updated-demo/src/app/pages/grid/position/position.component.ts

@@ -1,10 +1,21 @@
 import { Component } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
-import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+import {
+  GridAreaDirective,
+  GridAreasDirective,
+  GridColumnsDirective,
+  GridGapDirective,
+} from '@ngbracket/ngx-layout';
 
 @Component({
   selector: 'app-position',
-  imports: [MatCardModule, FlexLayoutModule],
+  imports: [
+    MatCardModule,
+    GridGapDirective,
+    GridColumnsDirective,
+    GridAreasDirective,
+    GridAreaDirective,
+  ],
   template: `<mat-card class="card-demo">
     <mat-card-title>Grid with Positioning</mat-card-title>
     <mat-card-content class="containerX">

projects/apps/updated-demo/src/app/pages/layout/align-self/align-self.component.ts

@@ -1,12 +1,25 @@
 import { Component } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
-import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+import {
+  FlexAlignDirective,
+  FlexDirective,
+  LayoutAlignDirective,
+  LayoutDirective,
+  LayoutGapDirective,
+} from '@ngbracket/ngx-layout';
 
 const ALIGN_OPTIONS = ['auto', 'start', 'center', 'baseline', 'end', 'stretch'];
 
 @Component({
   selector: 'app-align-self',
-  imports: [MatCardModule, FlexLayoutModule],
+  imports: [
+    MatCardModule,
+    FlexAlignDirective,
+    FlexDirective,
+    LayoutDirective,
+    LayoutGapDirective,
+    LayoutAlignDirective,
+  ],
   template: ` <mat-card class="card-demo">
     <mat-card-title>Flex with Align-Self</mat-card-title>
     <mat-card-subtitle

projects/apps/updated-demo/src/app/pages/layout/alignment/alignment.component.ts

@@ -3,15 +3,23 @@ import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatRadioModule } from '@angular/material/radio';
-import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+import { FlexDirective, ShowHideDirective } from '@ngbracket/ngx-layout';
+import { LayoutAlignDirective } from 'projects/libs/flex-layout/flex/layout-align/layout-align';
+import { LayoutDirective } from 'projects/libs/flex-layout/flex/layout/layout';
 
 @Component({
   selector: 'app-alignment',
   imports: [
     FormsModule,
+    FlexDirective,
+    LayoutAlignDirective,
+    LayoutDirective,
+    FlexDirective,
+    LayoutDirective,
+    LayoutAlignDirective,
+    ShowHideDirective,
     MatRadioModule,
     MatCardModule,
-    FlexLayoutModule,
     MatButtonModule,
   ],
   template: ` <mat-card class="card-demo">

projects/apps/updated-demo/src/app/pages/layout/attribute-values/attribute-values.component.ts

@@ -1,10 +1,16 @@
 import { Component } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
-import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+import { FlexDirective, LayoutDirective } from '@ngbracket/ngx-layout';
 
 @Component({
   selector: 'app-attribute-values',
-  imports: [MatCardModule, FlexLayoutModule],
+  imports: [
+    MatCardModule,
+    FlexDirective,
+    LayoutDirective,
+    FlexDirective,
+    LayoutDirective,
+  ],
   template: `<mat-card class="card-demo">
     <mat-card-title>Flex Attribute Values</mat-card-title>
     <mat-card-subtitle

projects/apps/updated-demo/src/app/pages/layout/direction/direction.component.ts

@@ -2,11 +2,21 @@ import { Direction } from '@angular/cdk/bidi';
 import { Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
-import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+import {
+  FlexOffsetDirective,
+  LayoutDirective,
+  LayoutGapDirective,
+} from '@ngbracket/ngx-layout';
 
 @Component({
   selector: 'app-direction',
-  imports: [MatCardModule, MatButtonModule, FlexLayoutModule],
+  imports: [
+    MatCardModule,
+    MatButtonModule,
+    LayoutDirective,
+    LayoutGapDirective,
+    FlexOffsetDirective,
+  ],
   template: `
     <mat-card class="card-demo">
       <mat-card-title>Direction support for RTL</mat-card-title>

projects/apps/updated-demo/src/app/pages/layout/offset-values/offset-values.component.ts

@@ -1,10 +1,14 @@
 import { Component } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
-import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+import {
+  FlexDirective,
+  FlexOffsetDirective,
+  LayoutDirective,
+} from '@ngbracket/ngx-layout';
 
 @Component({
   selector: 'app-offset-values',
-  imports: [MatCardModule, FlexLayoutModule],
+  imports: [MatCardModule, LayoutDirective, FlexDirective, FlexOffsetDirective],
   template: ` <mat-card class="card-demo">
     <mat-card-title>Flex Offset Values</mat-card-title>
     <mat-card-subtitle

projects/apps/updated-demo/src/app/pages/layout/row-fill-wrap/row-fill-wrap.component.ts

@@ -1,12 +1,12 @@
 import { Component } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
-import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+import { FlexDirective, LayoutDirective } from '@ngbracket/ngx-layout';
 
 const DIRECTIONS = ['row', 'row-reverse', 'column', 'column-reverse'];
 
 @Component({
   selector: 'app-row-fill-wrap',
-  imports: [MatCardModule, FlexLayoutModule],
+  imports: [MatCardModule, LayoutDirective, FlexDirective],
   template: `
     <mat-card class="card-demo" (click)="toggleDirection()">
       <mat-card-title>'Flex' with Layout-Wrap</mat-card-title>

projects/apps/updated-demo/src/app/pages/layout/row-fill/row-fill.component.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
-import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+import { FlexDirective, LayoutDirective } from '@ngbracket/ngx-layout';
 
 const DIRECTIONS = ['row', 'row-reverse', 'column', 'column-reverse'];
 @Component({
   selector: 'app-row-fill',
-  imports: [MatCardModule, FlexLayoutModule],
+  imports: [MatCardModule, LayoutDirective, FlexDirective],
   template: `<mat-card class="card-demo" (click)="toggleDirection()">
     <mat-card-title>'Flex' to Fill Row</mat-card-title>
     <mat-card-subtitle

projects/apps/updated-demo/src/app/pages/responsive/flex-directive/directive.component.ts

@@ -1,11 +1,16 @@
 import { Component } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
-import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+import { FlexDirective, LayoutDirective } from '@ngbracket/ngx-layout';
 import { MediaQueryStatusComponent } from '../../media-query-status/media-query-status.component';
 
 @Component({
   selector: 'app-directive',
-  imports: [MatCardModule, FlexLayoutModule, MediaQueryStatusComponent],
+  imports: [
+    MatCardModule,
+    LayoutDirective,
+    FlexDirective,
+    MediaQueryStatusComponent,
+  ],
   template: ` <mat-card class="card-demo">
     <mat-card-title>Responsive Flex Directives</mat-card-title>
     <mat-card-subtitle

projects/apps/updated-demo/src/app/pages/responsive/flex-order/order.component.ts

@@ -1,11 +1,16 @@
 import { Component } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
-import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+import { FlexDirective, LayoutDirective } from '@ngbracket/ngx-layout';
 import { MediaQueryStatusComponent } from '../../media-query-status/media-query-status.component';
 
 @Component({
   selector: 'app-order',
-  imports: [MatCardModule, FlexLayoutModule, MediaQueryStatusComponent],
+  imports: [
+    MatCardModule,
+    LayoutDirective,
+    FlexDirective,
+    MediaQueryStatusComponent,
+  ],
   template: `<mat-card class="card-demo">
     <mat-card-title>Responsive Flex Ordering</mat-card-title>
     <mat-card-subtitle

projects/apps/updated-demo/src/app/pages/responsive/layout-direction/direction.component.ts

@@ -1,11 +1,16 @@
 import { Component } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
-import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+import { FlexDirective, LayoutDirective } from '@ngbracket/ngx-layout';
 import { MediaQueryStatusComponent } from '../../media-query-status/media-query-status.component';
 
 @Component({
   selector: 'app-direction',
-  imports: [MatCardModule, FlexLayoutModule, MediaQueryStatusComponent],
+  imports: [
+    MatCardModule,
+    LayoutDirective,
+    FlexDirective,
+    MediaQueryStatusComponent,
+  ],
   template: ` <mat-card class="card-demo">
     <mat-card-title>Responsive Layout Directions</mat-card-title>
     <mat-card-subtitle

projects/apps/updated-demo/src/app/pages/responsive/row-column/row-column.component.ts

@@ -1,14 +1,15 @@
 import { Component, inject } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import {
-  FlexLayoutModule,
+  FlexDirective,
+  LayoutDirective,
   MediaChange,
   MediaObserver,
 } from '@ngbracket/ngx-layout';
 
 @Component({
   selector: 'app-row-column',
-  imports: [MatCardModule, FlexLayoutModule],
+  imports: [MatCardModule, FlexDirective, LayoutDirective],
   template: `<mat-card class="card-demo">
     <mat-card-title>Multiple Responsive Columns</mat-card-title>
     <mat-card-subtitle>

projects/apps/updated-demo/src/app/pages/responsive/show-hide/show-hide.component.ts

@@ -1,11 +1,21 @@
 import { Component } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
-import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+import {
+  FlexDirective,
+  LayoutDirective,
+  ShowHideDirective,
+} from '@ngbracket/ngx-layout';
 import { MediaQueryStatusComponent } from '../../media-query-status/media-query-status.component';
 
 @Component({
   selector: 'app-show-hide',
-  imports: [MatCardModule, FlexLayoutModule, MediaQueryStatusComponent],
+  imports: [
+    MatCardModule,
+    FlexDirective,
+    LayoutDirective,
+    ShowHideDirective,
+    MediaQueryStatusComponent,
+  ],
   template: `<mat-card class="card-demo">
     <mat-card-title>Show & Hide Directives</mat-card-title>
     <mat-card-subtitle