@mozaic-ds/angular 0.24.0-beta.3 → 0.24.0-beta.4

package/adeo/fesm2020/mozaic-ds-angular.mjs

@@ -4,8 +4,8 @@ import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, NgControl, FormControlName, FormGroupDirective, ReactiveFormsModule } from '@angular/forms';
-import { fromEvent, shareReplay, BehaviorSubject, Subject, startWith, map, of, tap, catchError, throwError, finalize, first, debounceTime, filter, switchMap, takeUntil, merge, combineLatest, delay as delay$1, throttleTime, pairwise, distinctUntilChanged, share } from 'rxjs';
-import { trigger, transition, group, query, style, animate, state } from '@angular/animations';
+import { fromEvent, shareReplay, BehaviorSubject, Subject, startWith, map, of, tap, catchError, throwError, finalize, first, debounceTime, filter, switchMap, takeUntil, merge, combineLatest, delay as delay$1, pairwise } from 'rxjs';
+import { trigger, transition, group, query, style, animate } from '@angular/animations';
 import { delay } from 'rxjs/operators';
 import * as i1$1 from '@angular/common/http';
 import * as i1$2 from '@angular/router';
@@ -4020,15 +4020,10 @@ var Direction;
     Direction["Down"] = "Down";
 })(Direction || (Direction = {}));
 
-const headerAnimation = trigger('widthGrow', [
-    state('closed', style({ opacity: 0, transform: 'translateY(-100%)' })),
-    state('open', style({ opacity: 1, transform: 'translateY(0)' })),
-    transition('* => *', animate('300ms ease-in')),
-]);
-
 class HeaderComponent {
-    constructor(cdRef) {
+    constructor(cdRef, elementRef) {
         this.cdRef = cdRef;
+        this.elementRef = elementRef;
         this.title = '';
         this.subtitle = '';
         this.badgeType = 'information';
@@ -4037,31 +4032,85 @@ class HeaderComponent {
         this.showShadow = true;
         this.sticky = false;
         this.animate = false;
-        this.showParent = true;
-        this.state = 'open';
+        this.showBack = false;
+        this.backButtonLabel = 'Back';
+        this.backEvent = new EventEmitter();
+        this.directionChangeEvent = new EventEmitter();
+        this.direction = Direction.Up;
+        this.showTabs = true;
+        this.showBreadcrumb = true;
     }
     ngAfterViewInit() {
-        if (this.parentRef?.nativeElement.children &&
-            this.parentRef?.nativeElement.children.length === 0) {
-            this.showParent = false;
+        if (this.tabsRef == null ||
+            (this.tabsRef?.nativeElement.children && this.tabsRef?.nativeElement.children.length === 0)) {
+            this.showTabs = false;
         }
-        if (this.animate && this.sticky) {
-            fromEvent(window, 'scroll')
-                .pipe(throttleTime(50), map(() => window.pageYOffset), pairwise(), map(([y1, y2]) => (y2 < y1 ? Direction.Up : Direction.Down)), distinctUntilChanged(), share())
-                .subscribe((x) => {
-                this.state === 'closed' ? (this.state = 'open') : (this.state = 'closed');
-                this.cdRef.detectChanges();
-            });
+        if (this.breadcrumbRef == null ||
+            (this.breadcrumbRef?.nativeElement.children &&
+                this.breadcrumbRef?.nativeElement.children.length === 0)) {
+            this.showBreadcrumb = false;
         }
+        this.scroll();
         this.cdRef.detectChanges();
     }
+    onParentScroll(parentElement) {
+        let lastScrollTop = parentElement.scrollTop || 0;
+        const handleScroll = () => {
+            const currentScrollTop = parentElement.scrollTop || 0;
+            if (currentScrollTop > lastScrollTop) {
+                this.direction = Direction.Down;
+            }
+            else {
+                this.direction = Direction.Up;
+            }
+            this.directionChangeEvent.emit(this.direction);
+            lastScrollTop = currentScrollTop;
+            this.cdRef.detectChanges();
+        };
+        parentElement.addEventListener('scroll', handleScroll);
+    }
+    scroll() {
+        if (this.animate && this.sticky) {
+            const parentElement = this.findParentWithScroll(this.elementRef.nativeElement);
+            if (parentElement) {
+                this.onParentScroll(parentElement);
+            }
+            else {
+                fromEvent(window, 'scroll')
+                    .pipe(map(() => window.scrollY), pairwise(), map(([y1, y2]) => {
+                    return y2 < y1 ? Direction.Up : Direction.Down;
+                }))
+                    .subscribe((direction) => {
+                    this.direction = direction;
+                    this.directionChangeEvent.emit(this.direction);
+                    this.cdRef.detectChanges();
+                });
+            }
+        }
+    }
+    findParentWithScroll(element) {
+        if (element.parentElement) {
+            const parent = element.parentElement;
+            const hasOverflow = window.getComputedStyle(parent).overflow;
+            if (hasOverflow === 'auto' || hasOverflow === 'scroll') {
+                return parent;
+            }
+            else {
+                return this.findParentWithScroll(parent);
+            }
+        }
+        return null;
+    }
+    back() {
+        this.backEvent.emit(true);
+    }
 }
-HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HeaderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: HeaderComponent, selector: "moz-header", inputs: { title: "title", subtitle: "subtitle", badgeType: "badgeType", badgeContent: "badgeContent", size: "size", showShadow: "showShadow", sticky: "sticky", animate: "animate" }, viewQueries: [{ propertyName: "parentRef", first: true, predicate: ["parentRef"], descendants: true }], ngImport: i0, template: "<div\n  class=\"mc-header\"\n  [ngClass]=\"[showShadow ? 'mc-header--shadow' : '', sticky ? 'mc-header--sticky' : '']\"\n  [@widthGrow]=\"state\"\n>\n  <div class=\"mc-header__container\">\n    <ng-container ngProjectAs=\"'moz-breadcrumb'\">\n      <ng-content select=\"moz-breadcrumb\"></ng-content>\n    </ng-container>\n    <div class=\"mc-header__actions\">\n      <div class=\"mc-header__icons\">\n        <ng-content select=\"[icons]\"></ng-content>\n      </div>\n      <div class=\"mc-header__selector\">\n        <ng-content select=\"[selector]\"></ng-content>\n      </div>\n    </div>\n    <div class=\"mc-header__content\">\n      <div class=\"mc-header__content-main\">\n        <h1 class=\"mc-header__title mc-header__title--{{ size }}\">{{ title }}</h1>\n      </div>\n      <div class=\"mc-header__content-aside\">\n        <span class=\"mc-header__subtitle\" *ngIf=\"subtitle\">{{ subtitle }}</span>\n        <div *ngIf=\"badgeContent\" moz-badge [type]=\"badgeType || 'information'\">\n          {{ badgeContent }}\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"mc-header__tabs mc-divider-top mc-divider-top--light\" #parentRef *ngIf=\"showParent\">\n    <ng-container ngProjectAs=\"'moz-tabs'\">\n      <ng-content select=\"moz-tabs\"></ng-content>\n    </ng-container>\n  </div>\n</div>\n", styles: [".mc-divider{position:relative}.mc-divider-top{border-top:1px solid #666666}.mc-divider-top--lightest{border-top-color:#fff}.mc-divider-top--light{border-top-color:#b3b3b3}.mc-divider-top--dark{border-top-color:#000}.mc-divider-top--m{border-top-width:.25rem}.mc-divider-top--l{border-top-width:.5rem}.mc-divider-right{border-right:1px solid #666666}.mc-divider-right--lightest{border-right-color:#fff}.mc-divider-right--light{border-right-color:#b3b3b3}.mc-divider-right--dark{border-right-color:#000}.mc-divider-right--m{border-right-width:.25rem}.mc-divider-right--l{border-right-width:.5rem}.mc-divider-bottom{border-bottom:1px solid #666666}.mc-divider-bottom--lightest{border-bottom-color:#fff}.mc-divider-bottom--light{border-bottom-color:#b3b3b3}.mc-divider-bottom--dark{border-bottom-color:#000}.mc-divider-bottom--m{border-bottom-width:.25rem}.mc-divider-bottom--l{border-bottom-width:.5rem}.mc-divider-left{border-left:1px solid #666666}.mc-divider-left--lightest{border-left-color:#fff}.mc-divider-left--light{border-left-color:#b3b3b3}.mc-divider-left--dark{border-left-color:#000}.mc-divider-left--m{border-left-width:.25rem}.mc-divider-left--l{border-left-width:.5rem}.mc-header{font-family:Roboto,sans-serif;font-weight:400;background-color:#fff;z-index:5}.mc-header__container{padding:.5rem 2rem 1rem;display:grid}@media (min-width: 1024px) and (max-width: 1279px){.mc-header__container{padding-left:3rem;padding-right:3rem}}.mc-header__breadcrumb{grid-column:1;grid-row:auto}.mc-header__content{color:#000;grid-column:1;grid-row:auto;padding-top:.5rem}.mc-header__content-main{display:flex;align-items:center;gap:1rem}.mc-header__content-main:not(:only-child){margin-bottom:.25rem}.mc-header__content-aside{display:flex;align-items:flex-start;flex-direction:column;gap:.5rem;padding-bottom:.5rem}.mc-header__content-aside.can-navigate{padding-left:3rem}@media screen and (min-width: 1024px){.mc-header__content-aside{align-items:center;flex-direction:row;gap:1rem;padding-bottom:0}}.mc-header__back{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;align-items:center;background-color:transparent;justify-content:center;color:currentColor;display:flex;height:2rem;width:2rem}.mc-header__back-icon{color:#333;height:1.5rem;width:1.5rem}.mc-header__back-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-header__title{font-size:1.75rem;line-height:1.2857142857;font-weight:700;margin-top:0;margin-bottom:0}.mc-header__title--s{font-size:1.4375rem;line-height:1.3913043478}.mc-header__title--l{font-size:2.125rem;line-height:1.2941176471}.mc-header__title--xl{font-size:2.5625rem;line-height:1.3658536585}.mc-header__subtitle{font-size:1rem;line-height:1.375}.mc-header__actions,.mc-header__icons{display:flex;gap:1.5rem}.mc-header__actions{align-items:flex-end;align-self:flex-start;grid-column:1;grid-row:1;justify-self:end;margin-bottom:.5rem;min-height:2.5rem}@media screen and (min-width: 1024px){.mc-header__actions{grid-column:2;grid-row:1;margin-bottom:0}}.mc-header__selector:not(:only-child){padding-left:1.5625rem;position:relative}.mc-header__selector:not(:only-child):before{background:#b3b3b3;content:\"\";display:block;width:1px;height:100%;position:absolute;top:50%;transform:translateY(-50%);left:0}.mc-header__tabs{padding-left:2rem;padding-right:2rem}@media (min-width: 1024px) and (max-width: 1279px){.mc-header__tabs{padding-left:3rem;padding-right:3rem}}.mc-header--shadow{box-shadow:0 1px 5px #19191933}.mc-header--animate{left:0;position:absolute;right:0;transition:transform ease-out .4s}.mc-header--sticky{position:sticky;top:0}.mc-header--up{transform:translateY(0)}.mc-header--down{transform:translateY(calc(-100% - 5px))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BadgeComponent, selector: "[moz-badge]", inputs: ["type"] }], animations: [headerAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: HeaderComponent, selector: "moz-header", inputs: { title: "title", subtitle: "subtitle", badgeType: "badgeType", badgeContent: "badgeContent", size: "size", showShadow: "showShadow", sticky: "sticky", animate: "animate", showBack: "showBack", backButtonLabel: "backButtonLabel" }, outputs: { backEvent: "backEvent", directionChangeEvent: "directionChangeEvent" }, viewQueries: [{ propertyName: "tabsRef", first: true, predicate: ["tabsRef"], descendants: true }, { propertyName: "breadcrumbRef", first: true, predicate: ["breadcrumbRef"], descendants: true }], ngImport: i0, template: "<div\n  class=\"mc-header\"\n  [ngClass]=\"[\n    showShadow ? 'mc-header--shadow' : '',\n    sticky ? 'mc-header--sticky' : '',\n    animate ? 'mc-header--animate' : '',\n    animate ? (direction === 'Up' ? 'mc-header--up' : 'mc-header--down') : ''\n  ]\"\n>\n  <div class=\"mc-header__container\">\n    <ng-container ngProjectAs=\"'moz-breadcrumb'\" #breadcrumbRef *ngIf=\"showBreadcrumb && !showBack\">\n      <ng-content select=\"moz-breadcrumb\"></ng-content>\n    </ng-container>\n    <div class=\"mc-header__actions\">\n      <div class=\"mc-header__icons\">\n        <ng-content select=\"[icons]\"></ng-content>\n      </div>\n      <div class=\"mc-header__selector\">\n        <ng-content select=\"[selector]\"></ng-content>\n      </div>\n    </div>\n    <div class=\"mc-header__content\">\n      <div class=\"mc-header__content-main\">\n        <button\n          class=\"mc-header__back\"\n          type=\"button\"\n          *ngIf=\"showBack && !showBreadcrumb\"\n          (click)=\"back()\"\n        >\n          <moz-icon iconName=\"Navigation_Arrow_Back_24px\"></moz-icon>\n          <span class=\"mc-header__back-label\">{{ backButtonLabel }}</span>\n        </button>\n        <h1 class=\"mc-header__title mc-header__title--{{ size }}\">{{ title }}</h1>\n      </div>\n      <div\n        class=\"mc-header__content-aside\"\n        [ngClass]=\"[showBack && !showBreadcrumb ? 'can-navigate' : '']\"\n      >\n        <span class=\"mc-header__subtitle\" *ngIf=\"subtitle\">{{ subtitle }}</span>\n        <div *ngIf=\"badgeContent\" moz-badge [type]=\"badgeType || 'information'\">\n          {{ badgeContent }}\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"mc-header__tabs mc-divider-top mc-divider-top--light\" #tabsRef *ngIf=\"showTabs\">\n    <ng-container ngProjectAs=\"'moz-tabs'\">\n      <ng-content select=\"moz-tabs\"></ng-content>\n    </ng-container>\n  </div>\n</div>\n", styles: [".mc-divider{position:relative}.mc-divider-top{border-top:1px solid #666666}.mc-divider-top--lightest{border-top-color:#fff}.mc-divider-top--light{border-top-color:#b3b3b3}.mc-divider-top--dark{border-top-color:#000}.mc-divider-top--m{border-top-width:.25rem}.mc-divider-top--l{border-top-width:.5rem}.mc-divider-right{border-right:1px solid #666666}.mc-divider-right--lightest{border-right-color:#fff}.mc-divider-right--light{border-right-color:#b3b3b3}.mc-divider-right--dark{border-right-color:#000}.mc-divider-right--m{border-right-width:.25rem}.mc-divider-right--l{border-right-width:.5rem}.mc-divider-bottom{border-bottom:1px solid #666666}.mc-divider-bottom--lightest{border-bottom-color:#fff}.mc-divider-bottom--light{border-bottom-color:#b3b3b3}.mc-divider-bottom--dark{border-bottom-color:#000}.mc-divider-bottom--m{border-bottom-width:.25rem}.mc-divider-bottom--l{border-bottom-width:.5rem}.mc-divider-left{border-left:1px solid #666666}.mc-divider-left--lightest{border-left-color:#fff}.mc-divider-left--light{border-left-color:#b3b3b3}.mc-divider-left--dark{border-left-color:#000}.mc-divider-left--m{border-left-width:.25rem}.mc-divider-left--l{border-left-width:.5rem}.mc-header{font-family:Roboto,sans-serif;font-weight:400;background-color:#fff;z-index:5}.mc-header__container{padding:.5rem 2rem 1rem;display:grid}@media (min-width: 1024px) and (max-width: 1279px){.mc-header__container{padding-left:3rem;padding-right:3rem}}.mc-header__breadcrumb{grid-column:1;grid-row:auto}.mc-header__content{color:#000;grid-column:1;grid-row:auto;padding-top:.5rem}.mc-header__content-main{display:flex;align-items:center;gap:1rem}.mc-header__content-main:not(:only-child){margin-bottom:.25rem}.mc-header__content-aside{display:flex;align-items:flex-start;flex-direction:column;gap:.5rem;padding-bottom:.5rem}.mc-header__content-aside.can-navigate{padding-left:3rem}@media screen and (min-width: 1024px){.mc-header__content-aside{align-items:center;flex-direction:row;gap:1rem;padding-bottom:0}}.mc-header__back{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;align-items:center;background-color:transparent;justify-content:center;color:currentColor;display:flex;height:2rem;width:2rem}.mc-header__back-icon{color:#333;height:1.5rem;width:1.5rem}.mc-header__back-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-header__title{font-size:1.75rem;line-height:1.2857142857;font-weight:700;margin-top:0;margin-bottom:0}.mc-header__title--s{font-size:1.4375rem;line-height:1.3913043478}.mc-header__title--l{font-size:2.125rem;line-height:1.2941176471}.mc-header__title--xl{font-size:2.5625rem;line-height:1.3658536585}.mc-header__subtitle{font-size:1rem;line-height:1.375}.mc-header__actions,.mc-header__icons{display:flex;gap:1.5rem}.mc-header__actions{align-items:flex-end;align-self:flex-start;grid-column:1;grid-row:1;justify-self:end;margin-bottom:.5rem;min-height:2.5rem}@media screen and (min-width: 1024px){.mc-header__actions{grid-column:2;grid-row:1;margin-bottom:0}}.mc-header__selector:not(:only-child){padding-left:1.5625rem;position:relative}.mc-header__selector:not(:only-child):before{background:#b3b3b3;content:\"\";display:block;width:1px;height:100%;position:absolute;top:50%;transform:translateY(-50%);left:0}.mc-header__tabs{padding-left:2rem;padding-right:2rem}@media (min-width: 1024px) and (max-width: 1279px){.mc-header__tabs{padding-left:3rem;padding-right:3rem}}.mc-header--shadow{box-shadow:0 1px 5px #19191933}.mc-header--animate{left:0;position:absolute;right:0;transition:transform ease-out .4s}.mc-header--sticky{position:sticky;top:0}.mc-header--up{transform:translateY(0)}.mc-header--down{transform:translateY(calc(-100% - 5px))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BadgeComponent, selector: "[moz-badge]", inputs: ["type"] }, { kind: "component", type: IconComponent, selector: "moz-icon", inputs: ["iconName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'moz-header', changeDetection: ChangeDetectionStrategy.OnPush, animations: [headerAnimation], template: "<div\n  class=\"mc-header\"\n  [ngClass]=\"[showShadow ? 'mc-header--shadow' : '', sticky ? 'mc-header--sticky' : '']\"\n  [@widthGrow]=\"state\"\n>\n  <div class=\"mc-header__container\">\n    <ng-container ngProjectAs=\"'moz-breadcrumb'\">\n      <ng-content select=\"moz-breadcrumb\"></ng-content>\n    </ng-container>\n    <div class=\"mc-header__actions\">\n      <div class=\"mc-header__icons\">\n        <ng-content select=\"[icons]\"></ng-content>\n      </div>\n      <div class=\"mc-header__selector\">\n        <ng-content select=\"[selector]\"></ng-content>\n      </div>\n    </div>\n    <div class=\"mc-header__content\">\n      <div class=\"mc-header__content-main\">\n        <h1 class=\"mc-header__title mc-header__title--{{ size }}\">{{ title }}</h1>\n      </div>\n      <div class=\"mc-header__content-aside\">\n        <span class=\"mc-header__subtitle\" *ngIf=\"subtitle\">{{ subtitle }}</span>\n        <div *ngIf=\"badgeContent\" moz-badge [type]=\"badgeType || 'information'\">\n          {{ badgeContent }}\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"mc-header__tabs mc-divider-top mc-divider-top--light\" #parentRef *ngIf=\"showParent\">\n    <ng-container ngProjectAs=\"'moz-tabs'\">\n      <ng-content select=\"moz-tabs\"></ng-content>\n    </ng-container>\n  </div>\n</div>\n", styles: [".mc-divider{position:relative}.mc-divider-top{border-top:1px solid #666666}.mc-divider-top--lightest{border-top-color:#fff}.mc-divider-top--light{border-top-color:#b3b3b3}.mc-divider-top--dark{border-top-color:#000}.mc-divider-top--m{border-top-width:.25rem}.mc-divider-top--l{border-top-width:.5rem}.mc-divider-right{border-right:1px solid #666666}.mc-divider-right--lightest{border-right-color:#fff}.mc-divider-right--light{border-right-color:#b3b3b3}.mc-divider-right--dark{border-right-color:#000}.mc-divider-right--m{border-right-width:.25rem}.mc-divider-right--l{border-right-width:.5rem}.mc-divider-bottom{border-bottom:1px solid #666666}.mc-divider-bottom--lightest{border-bottom-color:#fff}.mc-divider-bottom--light{border-bottom-color:#b3b3b3}.mc-divider-bottom--dark{border-bottom-color:#000}.mc-divider-bottom--m{border-bottom-width:.25rem}.mc-divider-bottom--l{border-bottom-width:.5rem}.mc-divider-left{border-left:1px solid #666666}.mc-divider-left--lightest{border-left-color:#fff}.mc-divider-left--light{border-left-color:#b3b3b3}.mc-divider-left--dark{border-left-color:#000}.mc-divider-left--m{border-left-width:.25rem}.mc-divider-left--l{border-left-width:.5rem}.mc-header{font-family:Roboto,sans-serif;font-weight:400;background-color:#fff;z-index:5}.mc-header__container{padding:.5rem 2rem 1rem;display:grid}@media (min-width: 1024px) and (max-width: 1279px){.mc-header__container{padding-left:3rem;padding-right:3rem}}.mc-header__breadcrumb{grid-column:1;grid-row:auto}.mc-header__content{color:#000;grid-column:1;grid-row:auto;padding-top:.5rem}.mc-header__content-main{display:flex;align-items:center;gap:1rem}.mc-header__content-main:not(:only-child){margin-bottom:.25rem}.mc-header__content-aside{display:flex;align-items:flex-start;flex-direction:column;gap:.5rem;padding-bottom:.5rem}.mc-header__content-aside.can-navigate{padding-left:3rem}@media screen and (min-width: 1024px){.mc-header__content-aside{align-items:center;flex-direction:row;gap:1rem;padding-bottom:0}}.mc-header__back{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;align-items:center;background-color:transparent;justify-content:center;color:currentColor;display:flex;height:2rem;width:2rem}.mc-header__back-icon{color:#333;height:1.5rem;width:1.5rem}.mc-header__back-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-header__title{font-size:1.75rem;line-height:1.2857142857;font-weight:700;margin-top:0;margin-bottom:0}.mc-header__title--s{font-size:1.4375rem;line-height:1.3913043478}.mc-header__title--l{font-size:2.125rem;line-height:1.2941176471}.mc-header__title--xl{font-size:2.5625rem;line-height:1.3658536585}.mc-header__subtitle{font-size:1rem;line-height:1.375}.mc-header__actions,.mc-header__icons{display:flex;gap:1.5rem}.mc-header__actions{align-items:flex-end;align-self:flex-start;grid-column:1;grid-row:1;justify-self:end;margin-bottom:.5rem;min-height:2.5rem}@media screen and (min-width: 1024px){.mc-header__actions{grid-column:2;grid-row:1;margin-bottom:0}}.mc-header__selector:not(:only-child){padding-left:1.5625rem;position:relative}.mc-header__selector:not(:only-child):before{background:#b3b3b3;content:\"\";display:block;width:1px;height:100%;position:absolute;top:50%;transform:translateY(-50%);left:0}.mc-header__tabs{padding-left:2rem;padding-right:2rem}@media (min-width: 1024px) and (max-width: 1279px){.mc-header__tabs{padding-left:3rem;padding-right:3rem}}.mc-header--shadow{box-shadow:0 1px 5px #19191933}.mc-header--animate{left:0;position:absolute;right:0;transition:transform ease-out .4s}.mc-header--sticky{position:sticky;top:0}.mc-header--up{transform:translateY(0)}.mc-header--down{transform:translateY(calc(-100% - 5px))}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { title: [{
+            args: [{ selector: 'moz-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"mc-header\"\n  [ngClass]=\"[\n    showShadow ? 'mc-header--shadow' : '',\n    sticky ? 'mc-header--sticky' : '',\n    animate ? 'mc-header--animate' : '',\n    animate ? (direction === 'Up' ? 'mc-header--up' : 'mc-header--down') : ''\n  ]\"\n>\n  <div class=\"mc-header__container\">\n    <ng-container ngProjectAs=\"'moz-breadcrumb'\" #breadcrumbRef *ngIf=\"showBreadcrumb && !showBack\">\n      <ng-content select=\"moz-breadcrumb\"></ng-content>\n    </ng-container>\n    <div class=\"mc-header__actions\">\n      <div class=\"mc-header__icons\">\n        <ng-content select=\"[icons]\"></ng-content>\n      </div>\n      <div class=\"mc-header__selector\">\n        <ng-content select=\"[selector]\"></ng-content>\n      </div>\n    </div>\n    <div class=\"mc-header__content\">\n      <div class=\"mc-header__content-main\">\n        <button\n          class=\"mc-header__back\"\n          type=\"button\"\n          *ngIf=\"showBack && !showBreadcrumb\"\n          (click)=\"back()\"\n        >\n          <moz-icon iconName=\"Navigation_Arrow_Back_24px\"></moz-icon>\n          <span class=\"mc-header__back-label\">{{ backButtonLabel }}</span>\n        </button>\n        <h1 class=\"mc-header__title mc-header__title--{{ size }}\">{{ title }}</h1>\n      </div>\n      <div\n        class=\"mc-header__content-aside\"\n        [ngClass]=\"[showBack && !showBreadcrumb ? 'can-navigate' : '']\"\n      >\n        <span class=\"mc-header__subtitle\" *ngIf=\"subtitle\">{{ subtitle }}</span>\n        <div *ngIf=\"badgeContent\" moz-badge [type]=\"badgeType || 'information'\">\n          {{ badgeContent }}\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"mc-header__tabs mc-divider-top mc-divider-top--light\" #tabsRef *ngIf=\"showTabs\">\n    <ng-container ngProjectAs=\"'moz-tabs'\">\n      <ng-content select=\"moz-tabs\"></ng-content>\n    </ng-container>\n  </div>\n</div>\n", styles: [".mc-divider{position:relative}.mc-divider-top{border-top:1px solid #666666}.mc-divider-top--lightest{border-top-color:#fff}.mc-divider-top--light{border-top-color:#b3b3b3}.mc-divider-top--dark{border-top-color:#000}.mc-divider-top--m{border-top-width:.25rem}.mc-divider-top--l{border-top-width:.5rem}.mc-divider-right{border-right:1px solid #666666}.mc-divider-right--lightest{border-right-color:#fff}.mc-divider-right--light{border-right-color:#b3b3b3}.mc-divider-right--dark{border-right-color:#000}.mc-divider-right--m{border-right-width:.25rem}.mc-divider-right--l{border-right-width:.5rem}.mc-divider-bottom{border-bottom:1px solid #666666}.mc-divider-bottom--lightest{border-bottom-color:#fff}.mc-divider-bottom--light{border-bottom-color:#b3b3b3}.mc-divider-bottom--dark{border-bottom-color:#000}.mc-divider-bottom--m{border-bottom-width:.25rem}.mc-divider-bottom--l{border-bottom-width:.5rem}.mc-divider-left{border-left:1px solid #666666}.mc-divider-left--lightest{border-left-color:#fff}.mc-divider-left--light{border-left-color:#b3b3b3}.mc-divider-left--dark{border-left-color:#000}.mc-divider-left--m{border-left-width:.25rem}.mc-divider-left--l{border-left-width:.5rem}.mc-header{font-family:Roboto,sans-serif;font-weight:400;background-color:#fff;z-index:5}.mc-header__container{padding:.5rem 2rem 1rem;display:grid}@media (min-width: 1024px) and (max-width: 1279px){.mc-header__container{padding-left:3rem;padding-right:3rem}}.mc-header__breadcrumb{grid-column:1;grid-row:auto}.mc-header__content{color:#000;grid-column:1;grid-row:auto;padding-top:.5rem}.mc-header__content-main{display:flex;align-items:center;gap:1rem}.mc-header__content-main:not(:only-child){margin-bottom:.25rem}.mc-header__content-aside{display:flex;align-items:flex-start;flex-direction:column;gap:.5rem;padding-bottom:.5rem}.mc-header__content-aside.can-navigate{padding-left:3rem}@media screen and (min-width: 1024px){.mc-header__content-aside{align-items:center;flex-direction:row;gap:1rem;padding-bottom:0}}.mc-header__back{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;align-items:center;background-color:transparent;justify-content:center;color:currentColor;display:flex;height:2rem;width:2rem}.mc-header__back-icon{color:#333;height:1.5rem;width:1.5rem}.mc-header__back-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-header__title{font-size:1.75rem;line-height:1.2857142857;font-weight:700;margin-top:0;margin-bottom:0}.mc-header__title--s{font-size:1.4375rem;line-height:1.3913043478}.mc-header__title--l{font-size:2.125rem;line-height:1.2941176471}.mc-header__title--xl{font-size:2.5625rem;line-height:1.3658536585}.mc-header__subtitle{font-size:1rem;line-height:1.375}.mc-header__actions,.mc-header__icons{display:flex;gap:1.5rem}.mc-header__actions{align-items:flex-end;align-self:flex-start;grid-column:1;grid-row:1;justify-self:end;margin-bottom:.5rem;min-height:2.5rem}@media screen and (min-width: 1024px){.mc-header__actions{grid-column:2;grid-row:1;margin-bottom:0}}.mc-header__selector:not(:only-child){padding-left:1.5625rem;position:relative}.mc-header__selector:not(:only-child):before{background:#b3b3b3;content:\"\";display:block;width:1px;height:100%;position:absolute;top:50%;transform:translateY(-50%);left:0}.mc-header__tabs{padding-left:2rem;padding-right:2rem}@media (min-width: 1024px) and (max-width: 1279px){.mc-header__tabs{padding-left:3rem;padding-right:3rem}}.mc-header--shadow{box-shadow:0 1px 5px #19191933}.mc-header--animate{left:0;position:absolute;right:0;transition:transform ease-out .4s}.mc-header--sticky{position:sticky;top:0}.mc-header--up{transform:translateY(0)}.mc-header--down{transform:translateY(calc(-100% - 5px))}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { title: [{
                 type: Input
             }], subtitle: [{
                 type: Input
@@ -4077,21 +4126,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], animate: [{
                 type: Input
-            }], parentRef: [{
+            }], showBack: [{
+                type: Input
+            }], backButtonLabel: [{
+                type: Input
+            }], backEvent: [{
+                type: Output
+            }], directionChangeEvent: [{
+                type: Output
+            }], tabsRef: [{
                 type: ViewChild,
-                args: ['parentRef']
+                args: ['tabsRef']
+            }], breadcrumbRef: [{
+                type: ViewChild,
+                args: ['breadcrumbRef']
             }] } });
 
 class HeaderModule {
 }
 HeaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-HeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: HeaderModule, declarations: [HeaderComponent], imports: [CommonModule, BadgeModule], exports: [HeaderComponent] });
-HeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HeaderModule, imports: [CommonModule, BadgeModule] });
+HeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: HeaderModule, declarations: [HeaderComponent], imports: [CommonModule, BadgeModule, IconModule], exports: [HeaderComponent] });
+HeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HeaderModule, imports: [CommonModule, BadgeModule, IconModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HeaderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [HeaderComponent],
-                    imports: [CommonModule, BadgeModule],
+                    imports: [CommonModule, BadgeModule, IconModule],
                     exports: [HeaderComponent],
                 }]
         }] });
@@ -4572,5 +4632,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AutocompleteComponent, AutocompleteModule, BadgeComponent, BadgeModule, BreadcrumbComponent, BreadcrumbModule, BuiltItMenuComponent, BuiltItMenuModule, ButtonComponent, ButtonModule, CHECKBOX_CONTROL_VALUE_ACCESSOR, CardComponent, CardModule, CheckboxComponent, CheckboxModule, DIALOG_CONFIG, DIALOG_DATA, DIALOG_REF, DialogComponent, DialogModule, DialogService, DropdownComponent, DropdownModule, FieldComponent, FieldErrorComponent, FieldModule, FileUploaderComponent, FileUploaderModule, HeaderComponent, HeaderModule, HeadingComponent, HeadingModule, IconComponent, IconModule, IconService, InputIconDirective, KpiComponent, KpiIcon, KpiModule, LAYER_CONFIG, LAYER_DATA, LAYER_REF, LayerComponent, LayerModule, LayerService, LinkComponent, LinkModule, ListboxComponent, ListboxModule, LoaderComponent, LoaderModule, LoaderService, MOZ_INPUT_ICON, MozDatatableCaptionComponent, MozDatatableComponent, MozDatatableContentCellComponent, MozDatatableFooterComponent, MozDatatableHeaderCellComponent, MozDatatableManagementComponent, MozDatatableManagementContentComponent, MozDatatableManagementModule, MozDatatableModule, MozDatatableRowExpansionContentComponent, MozDatatableSelectionComponent, MozDatatableSortDirective, MozDragNDropDirective, NOTIFICATION_CONFIG, NotificationComponent, NotificationConfigFactory, NotificationContainerComponent, NotificationFooterComponent, NotificationMessageComponent, NotificationModule, NotificationService, NotificationTitleComponent, PAGINATION_CONTROL_VALUE_ACCESSOR, PaginationComponent, PaginationModule, PhoneNumberComponent, PhoneNumberModule, ProgressBarComponent, ProgressBarModule, QuantitySelectorComponent, QuantitySelectorModule, SelectComponent, SelectModule, StepComponent, StepperComponent, StepperModule, TOGGLE_CONTROL_VALUE_ACCESSOR, TabComponent, TabsComponent, TabsModule, TagComponent, TagModule, TaglistComponent, TaglistLayerContentComponent, TaglistModule, TextAreaComponent, TextAreaModule, TextInputComponent, TextInputModule, ToggleComponent, ToggleModule, TooltipComponent, TooltipDirective, TooltipModule, UploadedFilesComponent, castBooleanProperty, generateId, getRandomNumber, overwriteStyle };
+export { AutocompleteComponent, AutocompleteModule, BadgeComponent, BadgeModule, BreadcrumbComponent, BreadcrumbModule, BuiltItMenuComponent, BuiltItMenuModule, ButtonComponent, ButtonModule, CHECKBOX_CONTROL_VALUE_ACCESSOR, CardComponent, CardModule, CheckboxComponent, CheckboxModule, DIALOG_CONFIG, DIALOG_DATA, DIALOG_REF, DialogComponent, DialogModule, DialogService, Direction, DropdownComponent, DropdownModule, FieldComponent, FieldErrorComponent, FieldModule, FileUploaderComponent, FileUploaderModule, HeaderComponent, HeaderModule, HeadingComponent, HeadingModule, IconComponent, IconModule, IconService, InputIconDirective, KpiComponent, KpiIcon, KpiModule, LAYER_CONFIG, LAYER_DATA, LAYER_REF, LayerComponent, LayerModule, LayerService, LinkComponent, LinkModule, ListboxComponent, ListboxModule, LoaderComponent, LoaderModule, LoaderService, MOZ_INPUT_ICON, MozDatatableCaptionComponent, MozDatatableComponent, MozDatatableContentCellComponent, MozDatatableFooterComponent, MozDatatableHeaderCellComponent, MozDatatableManagementComponent, MozDatatableManagementContentComponent, MozDatatableManagementModule, MozDatatableModule, MozDatatableRowExpansionContentComponent, MozDatatableSelectionComponent, MozDatatableSortDirective, MozDragNDropDirective, NOTIFICATION_CONFIG, NotificationComponent, NotificationConfigFactory, NotificationContainerComponent, NotificationFooterComponent, NotificationMessageComponent, NotificationModule, NotificationService, NotificationTitleComponent, PAGINATION_CONTROL_VALUE_ACCESSOR, PaginationComponent, PaginationModule, PhoneNumberComponent, PhoneNumberModule, ProgressBarComponent, ProgressBarModule, QuantitySelectorComponent, QuantitySelectorModule, SelectComponent, SelectModule, StepComponent, StepperComponent, StepperModule, TOGGLE_CONTROL_VALUE_ACCESSOR, TabComponent, TabsComponent, TabsModule, TagComponent, TagModule, TaglistComponent, TaglistLayerContentComponent, TaglistModule, TextAreaComponent, TextAreaModule, TextInputComponent, TextInputModule, ToggleComponent, ToggleModule, TooltipComponent, TooltipDirective, TooltipModule, UploadedFilesComponent, castBooleanProperty, generateId, getRandomNumber, overwriteStyle };
 //# sourceMappingURL=mozaic-ds-angular.mjs.map