feat: layout angular15

DSI-HUG · Jul 31, 2024 · 02777f7 · 02777f7
1 parent 665c93c
commit 02777f7
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 15 deletions.
diff --git a/projects/demo-app/src/app/layout/layout-demo.component.html b/projects/demo-app/src/app/layout/layout-demo.component.html
@@ -30,7 +30,18 @@
 
     <!-- Right panel -->
     <ng-template #layoutRight>
-        <div class="layout-right-container">Layout right</div>
+        <div class="layout-right-container">
+            Layout right
+            <div filters-chip-list>
+                <mat-chip-listbox class="mat-mdc-chip-set-stacked" aria-label="Color selection">
+                    <mat-chip-option>1</mat-chip-option>
+                    <mat-chip-option>2</mat-chip-option>
+                    <mat-chip-option>3</mat-chip-option>
+                    <mat-chip-option>4</mat-chip-option>
+                    <mat-chip-option>5</mat-chip-option>
+                </mat-chip-listbox>
+            </div>
+        </div>
     </ng-template>
 
     <!-- Info boxes panel -->

diff --git a/projects/demo-app/src/app/layout/layout-demo.component.scss b/projects/demo-app/src/app/layout/layout-demo.component.scss
@@ -12,6 +12,7 @@
         .layout-right-container {
             display: flex;
             flex: 1 1 auto;
+            flex-direction: column;
             background: mat.get-color-from-palette(mat.$red-palette, 100);
         }
     }

diff --git a/projects/demo-app/src/app/layout/layout-demo.component.ts b/projects/demo-app/src/app/layout/layout-demo.component.ts
@@ -1,12 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { NgxLayoutComponent } from '@hug/ngx-layout';
 import { NgxSearchContainerComponent, NgxSearchInputDirective } from '@hug/ngx-search-container';
 import { NgxStatusService } from '@hug/ngx-status';
+import {MatChipsModule} from '@angular/material/chips';
 
 @Component({
     selector: 'app-layout-demo',
@@ -20,6 +21,7 @@ import { NgxStatusService } from '@hug/ngx-status';
         MatButtonModule,
         MatIconModule,
         MatTooltipModule,
+        MatChipsModule,
         NgxSearchContainerComponent,
         NgxSearchInputDirective,
         NgxLayoutComponent

diff --git a/projects/layout/src/_layout-theme.scss b/projects/layout/src/_layout-theme.scss
@@ -10,15 +10,15 @@
         background-color: mat.get-color-from-palette($primary, darker);
         color: mat.get-color-from-palette($primary, darker-contrast);
 
-        .mat-icon-button:not([disabled]) .mat-icon {
+        .mat-mdc-icon-button:not([disabled]) .mat-icon {
             color: mat.get-color-from-palette($primary, darker-contrast);
         }
 
         &:not(:first-of-type) {
             background-color: mat.get-color-from-palette($primary);
             color: mat.get-color-from-palette($primary, default-contrast);
 
-            .mat-icon-button:not([disabled]) .mat-icon {
+            .mat-mdc-icon-button:not([disabled]) .mat-icon {
                 color: mat.get-color-from-palette($primary, default-contrast);
             }
         }
@@ -46,12 +46,12 @@
                 }
 
                 [filters-chip-list] {
-                    .mat-standard-chip {
+                    .mat-mdc-chip {
                         background-color: mat.get-color-from-palette($accent);
                         color: mat.get-color-from-palette($background, background);
                     }
 
-                    .mat-standard-chip {
+                    .mat-mdc-chip {
                         &:not([disabled]) {
                             &:hover {
                                 background-color: mat.get-color-from-palette($accent, 700);

diff --git a/projects/layout/src/layout.component.scss b/projects/layout/src/layout.component.scss
@@ -69,17 +69,14 @@ ngx-layout {
             }
 
             [filters-chip-list] {
-                .mat-chip-list-wrapper {
+                mat-chip-listbox {
                     margin: 0;
                     max-height: 20vh;
                     overflow-y: auto;
                 }
 
-                .mat-standard-chip {
+                .mat-mdc-chip {
                     position: relative;
-                }
-
-                .mat-standard-chip {
                     padding: 0.5rem;
                     margin: 0.1rem;
                     font-size: 0.75rem;
@@ -137,7 +134,7 @@ ngx-layout {
                 width: 100%;
             }
 
-            .mat-form-field-infix {
+            .mat-mdc-form-field-infix {
                 width: inherit;
             }
 
@@ -209,6 +206,10 @@ ngx-layout {
 
             .primary-action-container {
                 z-index: 20;
+
+                button {
+                    background-color: #009688;
+                }
             }
         }
     }

diff --git a/projects/layout/src/layout.component.ts b/projects/layout/src/layout.component.ts
@@ -1,11 +1,11 @@
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, HostBinding, inject, Input, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { MatDrawer, MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { NgxMediaService } from '@hug/ngx-core';
 import { NgxSidenavService } from '@hug/ngx-sidenav';