Issue #534: lux-app-footer: der footer soll optional nicht sticky sein

public_api.ts

@@ -274,6 +274,7 @@ export * from './src/app/modules/lux-layout/lux-checkbox-container-ac/lux-checkb
 // Services
 export * from './src/app/modules/lux-layout/lux-app-footer/lux-app-footer-button.service';
 export * from './src/app/modules/lux-layout/lux-app-footer/lux-app-footer-link.service';
+export * from './src/app/modules/lux-layout/lux-app-footer/lux-app-footer-fixed.service';
 export * from './src/app/modules/lux-layout/lux-stepper/lux-stepper-helper.service';
 export * from './src/app/modules/lux-layout/lux-stepper-large/lux-stepper-large-subcomponents/lux-stepper-large-mobile-overlay/lux-stepper-large-mobile-overlay.service';
 // Classes

src/app/app-routing.module.ts

@@ -8,6 +8,7 @@ import { DseComponent } from './demo/abstract/dse/dse.component';
 import { DseResolver } from './demo/abstract/dse/dse.resolver';
 import { ImpressumComponent } from './demo/abstract/impressum/impressum.component';
 import { ImpressumResolver } from './demo/abstract/impressum/impressum.resolver';
+import { IconOverviewComponent } from './demo/components-overview/icon-example/icon-overview/icon-overview.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
@@ -33,6 +34,7 @@ const routes: Routes = [
   },
   { path: 'form', loadChildren: () => import('./demo/form/form-example.module').then((m) => m.FormExampleModule) },
   { path: 'configuration', component: ConfigurationComponent },
+  { path: 'icon-overview', component: IconOverviewComponent },
   { path: 'baseline', loadChildren: () => import('./demo/baseline/baseline.module').then((m) => m.BaselineModule) }
 ];
 

src/app/app.component.html

@@ -207,7 +207,7 @@ <h3 class="lux-side-nav-header-greeting">Navigation</h3>
         luxLabel="Iconsuche"
         luxAriaLabel="Lux-Icons suchen"
         luxTagId="navItem4"
-        [luxSelected]="url.endsWith('components-overview/example/icon-overview')"
+        [luxSelected]="url.endsWith('icon-overview')"
         (luxClicked)="goToIconSearch()"
       ></lux-app-header-ac-nav-menu-item>
       <lux-app-header-ac-nav-menu-item
@@ -293,6 +293,8 @@ <h3 class="lux-side-nav-header-greeting">Navigation</h3>
       ></lux-app-header-ac-action-nav-item>
     </lux-app-header-ac-action-nav>
   </lux-app-header-ac>
-  <lux-app-content luxAriaRoleMainLabel=""></lux-app-content>
-  <lux-app-footer *ngIf="this.luxAppFooter !== 'none'" luxVersion="18.1.0"></lux-app-footer>
+  <lux-app-content luxAriaRoleMainLabel="">
+    <lux-app-footer *ngIf="this.luxAppFooter !== 'none' && ((fixedFooterService.fixedModeAsObservable | async) === false)" luxVersion="18.1.0"></lux-app-footer>
+  </lux-app-content>
+  <lux-app-footer *ngIf="this.luxAppFooter !== 'none' && ((fixedFooterService.fixedModeAsObservable | async) === true)" luxVersion="18.1.0"></lux-app-footer>
 </div>

src/app/app.component.ts

@@ -1,9 +1,7 @@
 import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
 import { NavigationEnd, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { ComponentsOverviewNavigationService } from './demo/components-overview/components-overview-navigation.service';
-import { LuxAppFooterButtonService } from './modules/lux-layout/lux-app-footer/lux-app-footer-button.service';
 import { LuxAppFooterLinkInfo } from './modules/lux-layout/lux-app-footer/lux-app-footer-link-info';
 import { LuxAppFooterLinkService } from './modules/lux-layout/lux-app-footer/lux-app-footer-link.service';
 import { LuxSideNavComponent } from './modules/lux-layout/lux-app-header/lux-app-header-subcomponents/lux-side-nav/lux-side-nav.component';
@@ -12,8 +10,9 @@ import { LuxThemeService } from './modules/lux-theme/lux-theme.service';
 import { LuxAppService } from './modules/lux-util/lux-app.service';
 import { LuxConsoleService } from './modules/lux-util/lux-console.service';
 import { LuxMediaQueryObserverService } from './modules/lux-util/lux-media-query-observer.service';
-import {TenantLogoExampleHeaderService} from "./demo/components-overview/tenant-logo-example/tenant-logo-example-header.service";
-import {TenantLogoExampleConfigData} from "./demo/components-overview/tenant-logo-example/tenant-logo-example-config/tenant-logo-example-config-data";
+import { TenantLogoExampleHeaderService } from "./demo/components-overview/tenant-logo-example/tenant-logo-example-header.service";
+import { TenantLogoExampleConfigData } from "./demo/components-overview/tenant-logo-example/tenant-logo-example-config/tenant-logo-example-config-data";
+import { LuxAppFooterFixedService } from './modules/lux-layout/lux-app-footer/lux-app-footer-fixed.service';
 
 @Component({
   selector: 'app-root',
@@ -41,26 +40,24 @@ export class AppComponent implements OnInit, OnDestroy {
   constructor(
     public router: Router,
     private linkService: LuxAppFooterLinkService,
-    private buttonService: LuxAppFooterButtonService,
     private snackbarService: LuxSnackbarService,
     public navigationService: ComponentsOverviewNavigationService,
-    private sanitizer: DomSanitizer,
     private themeService: LuxThemeService,
     private elementRef: ElementRef,
     private appService: LuxAppService,
     private mediaQueryService: LuxMediaQueryObserverService,
     public componentsOverviewService: ComponentsOverviewNavigationService,
-    public tenantLogoHeaderService: TenantLogoExampleHeaderService
+    public tenantLogoHeaderService: TenantLogoExampleHeaderService,
+    public fixedFooterService: LuxAppFooterFixedService
   ) {
     themeService.loadTheme();
     this.themeName = themeService.getTheme().name;
     router.initialNavigation();
     this.appService.appEl = elementRef.nativeElement;
 
-    this.mobileView = mediaQueryService.activeMediaQuery === 'xs' || mediaQueryService.activeMediaQuery === 'sd';
-
-    this.subscriptions.push(this.mediaQueryService.getMediaQueryChangedAsObservable().subscribe((query) => {
-      this.mobileView = query === 'xs' || query === 'sd';
+    this.mobileView = mediaQueryService.isHandset();
+    this.subscriptions.push(this.mediaQueryService.getMediaQueryChangedAsObservable().subscribe(() => {
+      this.mobileView = this.mediaQueryService.isHandset();
     }));
 
     this.components = componentsOverviewService.filteredComponents.length;
@@ -130,7 +127,7 @@ export class AppComponent implements OnInit, OnDestroy {
     this.router.navigate(['baseline']);
   }
   goToIconSearch() {
-    this.router.navigate(['components-overview/example/icon-overview']);
+    this.router.navigate(['icon-overview']);
   }
 
   goToHomepage() {

src/app/demo/abstract/dse/dse.component.ts

@@ -4,7 +4,7 @@ import { ActivatedRoute } from '@angular/router';
 @Component({
   selector: 'lux-dse',
   templateUrl: './dse.component.html',
-  styles: [':host { display: flex; justify-content: center}'],
+  styles: [':host { display: flex; align-items: start; justify-content: center; flex: 1 1 auto;}'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DseComponent implements OnInit {

src/app/demo/abstract/impressum/impressum.component.ts

@@ -4,7 +4,7 @@ import { ActivatedRoute } from '@angular/router';
 @Component({
   selector: 'lux-impressum',
   templateUrl: './impressum.component.html',
-  styles: [':host { display: flex; justify-content: center}'],
+  styles: [':host { display: flex; align-items: start; justify-content: center; flex: 1 1 auto;}'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ImpressumComponent implements OnInit {

src/app/demo/base/license-hint/license-hint.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-license-hint',
-  styles: [':host { display: flex; justify-content: center}'],
+  styles: [':host { display: flex; align-items: start; justify-content: center; flex: 1 1 auto;}'],
   templateUrl: './license-hint.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush
 })

src/app/demo/baseline/baseline-example.component.scss

@@ -0,0 +1,5 @@
+:host {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+}

src/app/demo/components-overview/components-overview-routing.module.ts

@@ -59,7 +59,6 @@ import { TextareaAuthenticExampleComponent } from './textarea-authentic-example/
 import { FileInputAuthenticExampleComponent } from './file-example/file-input-authentic-example/file-input-authentic-example.component';
 import { ChipAuthenticExampleComponent } from './chip-authentic-example/chip-authentic-example.component';
 import { SliderAuthenticExampleComponent } from './slider-authentic-example/slider-authentic-example.component';
-import { IconOverviewComponent } from './icon-example/icon-overview/icon-overview.component';
 import { CheckboxContainerAcExampleComponent } from './checkbox-container-ac-example/checkbox-container-ac-example.component';
 import { TextboxExampleComponent } from './textbox-example/textbox-example.component';
 import { TenantLogoExampleComponent } from './tenant-logo-example/tenant-logo-example.component';
@@ -126,7 +125,6 @@ const routes: Routes = [
       { path: 'input-ac', component: InputAuthenticExampleComponent },
       { path: 'checkbox-ac', component: CheckboxAuthenticExampleComponent },
       { path: 'tile-overview', component: OverviewExampleComponent },
-      { path: 'icon-overview', component: IconOverviewComponent },
       { path: 'master-detail-ac', component: MasterDetailAuthenticExampleComponent },
       { path: 'checkbox-container-ac', component: CheckboxContainerAcExampleComponent },
       { path: 'textbox', component: TextboxExampleComponent },

src/app/demo/components-overview/components-overview.component.scss

@@ -1,3 +1,9 @@
+:host{
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+}
+
 lux-card.lux-card-mobile ::ng-deep mat-card {
   margin-left: 0 !important;
   margin-right: 0 !important;

src/app/demo/components-overview/icon-example/icon-example.component.html

@@ -77,7 +77,7 @@ <h3 class="lux-highlight-section-label">Gradient</h3>
     </lux-input-ac>
     <lux-link-plain
       luxLabel="Zur Iconsuche"
-      luxHref="/components-overview/example/icon-overview"
+      luxHref="/icon-overview"
       luxIconName="lux-interface-arrows-button-right"
       [luxIconShowRight]="true"
     ></lux-link-plain>

src/app/demo/components-overview/icon-example/icon-overview/icon-overview.component.scss

@@ -1,8 +1,6 @@
 .main-container {
   width: 100%;
   max-height: 100%;
-  // margin: 0 auto;
-  // max-width: 1200px;
   box-sizing: border-box;
 }
 
@@ -32,7 +30,7 @@
 
 .left-container,
 .right-container {
-  max-height: 100%;
+  max-height: 100vh;
   overflow: auto;
 
   lux-card ::ng-deep {

src/app/demo/components-overview/infinite-scrolling-example/infinite-scrolling-example.component.html

@@ -5,7 +5,7 @@
   <example-base-content>
     <ng-container *ngIf="created">
       <lux-list
-        style="overflow: auto"
+        class="infinite-list"
         luxInfiniteScroll
         [luxImmediateCallback]="immediateCallback"
         [luxIsLoading]="isLoading"

src/app/demo/components-overview/infinite-scrolling-example/infinite-scrolling-example.component.scss

@@ -1,25 +1,4 @@
-:host ::ng-deep {
-  .example-base-container {
-    ::ng-deep > .mat-mdc-card > .lux-card-content-container {
-      overflow-y: auto;
-
-      > mat-card-content {
-        height: 100%;
-        overflow-y: hidden !important;
-
-        > .lux-card-content {
-          height: 100%;
-
-          > lux-card-content {
-            height: 100%;
-          }
-        }
-      }
-    }
-  }
-}
-
-example-base-content {
-  max-height: 100%;
-  height: 100%;
-}
+.infinite-list {
+  overflow: auto; 
+  max-height: calc(100vh - 350px);
+}

src/app/demo/components-overview/list-example/list-example.component.html

@@ -1,6 +1,7 @@
 <example-base-structure exampleTitle="List" exampleDocumentationHref="https://github.com/IHK-GfI/lux-components/wiki/lux%E2%80%90list-v18">
   <example-base-content>
     <lux-list
+      class="custom-list"
       [luxEmptyLabel]="emptyLabel"
       [luxEmptyIconName]="emptyIconName"
       [luxEmptyIconSize]="emptyIconSize"

src/app/demo/components-overview/list-example/list-example.component.scss

@@ -0,0 +1,4 @@
+.custom-list {
+    overflow: auto; 
+    max-height: calc(100vh - 350px);
+}

src/app/demo/components-overview/master-detail-authentic-example/master-detail-authentic-example.component.html

@@ -1,5 +1,6 @@
 <h1 class="lux-sr-only">Beispiel für den Master-Detail</h1>
 <lux-master-detail-ac
+  class="custom-master"
   [luxEmptyIconDetail]="configuration.emptyIconDetail"
   [luxEmptyIconMaster]="configuration.emptyIconMaster"
   [luxEmptyIconDetailSize]="configuration.emptyIconDetailSize"

src/app/demo/components-overview/master-detail-authentic-example/master-detail-authentic-example.component.scss

@@ -1,6 +1,38 @@
+::ng-deep {
+
+  .example-base-content {
+    max-width: calc(100% - 302px);
+  }
+
+  .example-mobile .example-base-content {
+    max-width: 100%;
+  }
+
+  .lux-theme-authentic {
+    .example-base-structure{
+      max-height: calc(100vh - 178px);
+    }
+
+    .example-mobile .example-base-content {
+      max-height: calc(100vh - 210px);
+    }
+  }
+
+  .lux-theme-green {
+    .example-base-structure {
+      max-height: calc(100vh - 131px);
+    }
+
+    .example-mobile .example-base-content {
+      max-height: calc(100vh - 165px);
+    }
+  }
+} 
+
 detail-example ::ng-deep lux-card mat-card.mat-mdc-card {
   border: none;
 }
+
 .example-header, .example-tab-content {
   padding: 20px;
   margin-bottom: 20px;

src/app/demo/components-overview/stepper-large-example/stepper-large-example.component.scss

@@ -1,3 +1,17 @@
+::ng-deep { 
+  .lux-theme-authentic {
+    .example-base-structure {
+      max-height: calc(100vh - 178px);
+    }
+  }
+
+  .lux-theme-green {
+    .example-base-structure {
+      max-height: calc(100vh - 131px);
+    }
+  }
+} 
+
 .example-lux-stepper-large {
   height: 100%;
   overflow: hidden;

src/app/demo/configuration/configuration.component.html

@@ -45,14 +45,22 @@ <h3>Allgemein</h3>
         [luxDisabled]="!currentConfig.labelConfiguration!.allUppercase"
         [luxNoBottomLabel]="true"
       ></lux-select-ac>
-      <lux-input-ac luxLabel="Lookup URL" [(luxValue)]="currentConfig.lookupServiceUrl" [luxNoBottomLabel]="true"></lux-input-ac>
+      <lux-input-ac luxLabel="Lookup URL" [(luxValue)]="currentConfig.lookupServiceUrl" [luxNoBottomLabel]="true"  (luxValueChange)="updateConfig()"></lux-input-ac>
       <lux-input-ac
         luxLabel="throttleTimeMs der Buttons (Verhinderung von ungewollten Doppelklicks)"
         [(luxValue)]="currentConfig.buttonConfiguration!.throttleTimeMs"
         (luxValueChange)="updateConfig()"
         [luxNoBottomLabel]="true"
       ></lux-input-ac>
 
+      <div>
+        <h3>Footer</h3>
+        <lux-checkbox-container-ac>
+          <lux-toggle-ac luxLabel="fixedDesktop" [luxNoLabels]="true" [(luxChecked)]="currentConfig.appFooter!.fixedDesktop" (luxCheckedChange)="updateConfig()"></lux-toggle-ac>
+          <lux-toggle-ac luxLabel="fixedMobile" [luxNoLabels]="true" [(luxChecked)]="currentConfig.appFooter!.fixedMobile" (luxCheckedChange)="updateConfig()"></lux-toggle-ac>
+        </lux-checkbox-container-ac>
+      </div>
+
       <h3>Ripples</h3>
       <lux-input-ac
         luxLabel="enterDuration der Lux-Ripples"

src/app/demo/example-base/example-base-root/example-base-subcomponents/example-base-structure/example-base-structure.component.scss

@@ -1,16 +1,13 @@
 :host {
   display: flex;
   width: 100%;
-  height: 100%;
   > * {
     max-width: 100%;
   }
 }
 
 lux-card ::ng-deep > mat-card {
-  height: 100%;
   width: 100%;
-  max-height: 100%;
   margin: 0 !important;
 }
 
@@ -33,8 +30,6 @@ lux-card ::ng-deep mat-card-content .lux-card-content {
 }
 
 .example-base-options {
-  max-height: 100%;
-
   ::ng-deep {
     lux-card-actions {
       width: 100%;
@@ -51,7 +46,6 @@ lux-card ::ng-deep mat-card-content .lux-card-content {
 ::ng-deep {
   .example-content-centered {
     width: 100%;
-    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;