@design-factory/design-factory 15.2.2 → 16.0.0

package/fesm2022/design-factory.mjs

@@ -1,16 +1,118 @@
 import * as i0 from '@angular/core';
-import { Directive, NgModule, Input, HostListener, Injectable, Host, HostBinding, EventEmitter, Component, Output, Inject, ChangeDetectionStrategy, ContentChildren, Optional, forwardRef, ViewChild, ContentChild, InjectionToken, PLATFORM_ID, inject, ViewEncapsulation, ComponentRef, TemplateRef } from '@angular/core';
+import { EventEmitter, Directive, Inject, HostBinding, Output, HostListener, Component, ChangeDetectionStrategy, ContentChildren, NgModule, Input, Injectable, InjectionToken, PLATFORM_ID, ViewEncapsulation, ComponentRef, TemplateRef, Optional, forwardRef, ViewChild, ContentChild, inject, Host, Renderer2, ElementRef, numberAttribute } from '@angular/core';
+import * as i1$1 from '@angular/common';
+import { DOCUMENT, isPlatformBrowser, CommonModule, NgIf, NgTemplateOutlet } from '@angular/common';
+import { merge, BehaviorSubject, fromEvent, Subscription, combineLatest, Subject, Observable, EMPTY, of, timer, race } from 'rxjs';
 import * as i1 from '@ng-bootstrap/ng-bootstrap';
-import { NgbAlertModule, NgbDatepickerKeyboardService, NgbDate, NgbDropdownModule, NgbDatepickerModule, NgbPopoverConfig, NgbPopoverModule, NgbProgressbarModule, NgbTooltipModule, NgbCollapseModule, NgbAccordionModule, NgbToastModule } from '@ng-bootstrap/ng-bootstrap';
-import * as i1$1 from '@ng-select/ng-select';
-import { NgSelectModule } from '@ng-select/ng-select';
-import * as i1$2 from '@angular/common';
-import { CommonModule, DOCUMENT, NgIf, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
-import { merge, Subject, Subscription, BehaviorSubject, fromEvent, combineLatest, Observable, EMPTY, of, timer, race } from 'rxjs';
+import { NgbToastModule, NgbAlertModule, NgbDatepickerKeyboardService, NgbDate, NgbDropdownModule, NgbDatepickerModule, NgbAccordionModule, NgbPopoverConfig, NgbPopoverModule, NgbProgressbarModule, NgbCollapseModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { take, map, switchMap, distinctUntilChanged, throttleTime, tap, filter, endWith, takeUntil } from 'rxjs/operators';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { throttleTime, tap, distinctUntilChanged, filter, take, map, switchMap, endWith, takeUntil } from 'rxjs/operators';
 import * as i3 from '@angular/router';
 import { RouterModule } from '@angular/router';
+import * as i1$2 from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
+
+class SkipLinkDirective {
+    onFocus() {
+        this.inFocus.emit(true);
+    }
+    onClick() {
+        this.focusOnTarget();
+    }
+    onBlur() {
+        this.inFocus.emit(false);
+    }
+    constructor(element, document) {
+        this.element = element;
+        this.document = document;
+        this.class = 'list-group-item list-group-item-action';
+        this.inFocus = new EventEmitter();
+    }
+    focusOnTarget() {
+        const href = String(this.element.nativeElement.getAttribute('href'));
+        const parts = href.split('#');
+        if (parts.length < 2) {
+            return;
+        }
+        const id = parts.pop();
+        if (!id) {
+            return;
+        }
+        setTimeout(() => {
+            const target = this.document.getElementById(id);
+            if (target) {
+                target.focus();
+                this.onBlur();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SkipLinkDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: SkipLinkDirective, isStandalone: true, selector: "[dfSkipLink]", outputs: { inFocus: "inFocus" }, host: { listeners: { "focus": "onFocus()", "click": "onClick()", "blur": "onBlur()" }, properties: { "class": "this.class" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SkipLinkDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dfSkipLink]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { class: [{
+                type: HostBinding
+            }], inFocus: [{
+                type: Output
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
+class SkipLinksContainerComponent {
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
+        this.inFocus = false;
+    }
+    ngAfterContentInit() {
+        if (!this.links.length) {
+            return;
+        }
+        this.focusSubscription = merge(...this.links.map((link) => link.inFocus)).subscribe((focus) => {
+            this.inFocus = focus;
+            this.changeDetector.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        this.focusSubscription.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SkipLinksContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: SkipLinksContainerComponent, isStandalone: true, selector: "df-skip-links-container", queries: [{ propertyName: "links", predicate: SkipLinkDirective }], ngImport: i0, template: "<section class=\"df-skip-links__section\">\n  <div class=\"df-skip-links\">\n    <div\n      class=\"df-skip-links-wrap list-group\"\n      [class.focus]=\"inFocus\"\n      (blur)=\"inFocus=false\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </div>\n</section>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SkipLinksContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-skip-links-container', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<section class=\"df-skip-links__section\">\n  <div class=\"df-skip-links\">\n    <div\n      class=\"df-skip-links-wrap list-group\"\n      [class.focus]=\"inFocus\"\n      (blur)=\"inFocus=false\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </div>\n</section>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { links: [{
+                type: ContentChildren,
+                args: [SkipLinkDirective]
+            }] } });
+
+class DfAccessibilityModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAccessibilityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfAccessibilityModule, imports: [SkipLinkDirective, SkipLinksContainerComponent], exports: [SkipLinkDirective, SkipLinksContainerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAccessibilityModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAccessibilityModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SkipLinkDirective, SkipLinksContainerComponent],
+                    exports: [SkipLinkDirective, SkipLinksContainerComponent]
+                }]
+        }] });
 
 class DfInsertIconDirective {
     constructor(el, renderer) {
@@ -70,6 +172,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
                 }]
         }] });
 
+class DfToastModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfToastModule, imports: [DfInsertIconModule], exports: [NgbToastModule, DfInsertIconModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfToastModule, imports: [DfInsertIconModule, NgbToastModule, DfInsertIconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfToastModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [DfInsertIconModule],
+                    exports: [NgbToastModule, DfInsertIconModule]
+                }]
+        }] });
+
 class DfAlertModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfAlertModule, imports: [DfInsertIconModule], exports: [NgbAlertModule, DfInsertIconModule] }); }
@@ -539,242 +654,425 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
                 }]
         }] });
 
-const DF_SELECT_CLASS = 'df-ym';
-
-class DfManageNavSelectDirective {
-    constructor(select, element, rtlDirectionService, renderer) {
-        this.select = select;
-        this.element = element;
-        this.rtlDirectionService = rtlDirectionService;
-        this.renderer = renderer;
+// Default DF breakpoints
+const DF_BREAKPOINTS_VAR_DEFAULT = {
+    xs: '--df-breakpoint-xs',
+    sm: '--df-breakpoint-sm',
+    md: '--df-breakpoint-md',
+    lg: '--df-breakpoint-lg',
+    xl: '--df-breakpoint-xl',
+    xxl: '--df-breakpoint-xxl',
+    xxxl: '--df-breakpoint-xxxl'
+};
+const BREAKPOINTS_VARS = new InjectionToken('Bootstrap Breakpoints', {
+    providedIn: 'root',
+    factory() {
+        return DF_BREAKPOINTS_VAR_DEFAULT;
     }
-    ngOnInit() {
-        this.direction = this.rtlDirectionService.getPageDirection(this.element);
+});
+class DfBreakpoints {
+    constructor(_breakPointsVar, platformID) {
+        this._breakPointsVar = _breakPointsVar;
+        this.platformID = platformID;
+        this._breakPoints$ = new BehaviorSubject(null);
+        this.initBreakpoints();
     }
-    handleKeyDown(event) {
-        if (this.direction === RightToLeftDirectionEnum.LeftToRight) {
-            this.arrowLeftInnerHandler(event);
-        }
-        else {
-            this.arrowRightInnerHandler(event);
-        }
+    get breakPoints$() {
+        return this._breakPoints$.asObservable();
     }
-    handleKeyDownBackspace(event) {
-        // Clear on backspace is already handled by ng select when clearable is true
-        if (!this.select.clearable && !this.select.searchTerm) {
-            const listBadge = this.element.nativeElement.querySelectorAll(`.${DF_SELECT_CLASS}`);
-            if (listBadge.length > 0) {
-                listBadge[listBadge.length - 1].click();
+    initBreakpoints() {
+        let breakPoints = null;
+        if (isPlatformBrowser(this.platformID) && this._breakPoints$.value === null) {
+            // we are in a browser so CSS variable are accessible
+            // we init the BP only once
+            const styles = window.getComputedStyle(document.documentElement);
+            const bpArray = [];
+            for (const el of Object.keys(this._breakPointsVar)) {
+                const curValue = this._breakPointsVar[el];
+                const bpValue = Number.parseInt(styles.getPropertyValue(curValue), 10);
+                if (isNaN(bpValue)) {
+                    // We should never enter here. Only if people did not put the correct list of CSS vars...
+                    // Or if the CSS is not arrived yet.
+                    // What should we do then?
+                    // TODO init from the default list provided if we want to?
+                }
+                else {
+                    bpArray.push([el, bpValue]);
+                }
+            }
+            breakPoints = this.generate(bpArray);
+            // In case the first page contains the directive and the CSS vars are not available
+            // We may need to launch a second init at load time.
+            if (Object.keys(breakPoints).length === 0) {
+                fromEvent(window, 'load')
+                    .pipe(take(1))
+                    .subscribe(() => {
+                    // Init once as the service is available everywhere
+                    // We do not check if the CSS variable are changing over time
+                    // here onload the CSS var should be available
+                    this.initBreakpoints();
+                });
             }
         }
+        this._breakPoints$.next(breakPoints);
     }
-    handleKeyDownRight(event) {
-        if (this.direction === RightToLeftDirectionEnum.LeftToRight) {
-            this.arrowRightInnerHandler(event);
-        }
-        else {
-            this.arrowLeftInnerHandler(event);
-        }
-    }
-    arrowRightInnerHandler(event) {
-        const listBadge = this.element.nativeElement.querySelectorAll(`.${DF_SELECT_CLASS}`);
-        const currentPos = Array.prototype.indexOf.call(listBadge, document.activeElement);
-        // Test if the focus is in the list (otherwise it is in the input and we do nothing)
-        if (currentPos !== -1) {
-            if (currentPos === listBadge.length - 1) {
-                this.select.focus();
+    // Utilities to use if you want to create your own queries with your values.
+    // sizes is an array of array BreakPoints with sizes[0] --> identifier of the BreakPoint
+    // sizes[1] px value of the BreakPoint
+    generate(sizes) {
+        sizes = sizes.sort((a, b) => a[1] - b[1]);
+        const dict = {};
+        for (let i = 0; i < sizes.length; i++) {
+            const name = sizes[i][0];
+            const min = sizes[i][1];
+            const max = i === sizes.length - 1 ? undefined : sizes[i + 1][1];
+            if (min === 0) {
+                dict[name] = `(max-width: ${max - 0.01}px)`;
             }
-            else {
-                (listBadge[currentPos + 1] || document.activeElement).focus();
+            else if (max) {
+                dict[name] = `(max-width: ${max - 0.01}px) and (min-width: ${min}px)`;
             }
-        }
-        else if (event.target.selectionStart === event.target.selectionEnd &&
-            event.target.nodeName === 'INPUT' &&
-            event.target.selectionStart === event.target.value.length) {
-            const clearEl = this.element.nativeElement.querySelector('.ng-clear-wrapper') ||
-                this.element.nativeElement.querySelector('.ng-clear');
-            if (clearEl) {
-                // Event if it can be added multiple time it is not an issue I think.
-                this.renderer.listen(clearEl, 'keydown.Enter', (e) => {
-                    e.stopPropagation(); // kill the event to forbid default ng-select behavior (open the dropdown)
-                    this.select.handleClearClick();
-                });
-                clearEl.setAttribute('tabindex', '1'); // To be able to focus the element in chrome
-                clearEl.focus();
+            else {
+                dict[name] = `(min-width: ${min}px)`;
             }
         }
+        return dict;
     }
-    arrowLeftInnerHandler(event) {
-        const listBadge = this.element.nativeElement.querySelectorAll(`.${DF_SELECT_CLASS}`);
-        if (event.target.selectionStart === event.target.selectionEnd &&
-            event.target.selectionStart === 0 &&
-            event.target.nodeName === 'INPUT') {
-            if (listBadge.length > 0) {
-                listBadge[listBadge.length - 1].focus();
-            }
-        }
-        else if (event.target.classList.contains('ng-clear-wrapper') || event.target.classList.contains('ng-clear')) {
-            this.select.focus();
-        }
-        else {
-            const currentPos = Array.prototype.indexOf.call(listBadge, document.activeElement);
-            (listBadge[currentPos - 1] || document.activeElement).focus();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfBreakpoints, deps: [{ token: BREAKPOINTS_VARS }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfBreakpoints, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfBreakpoints, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [BREAKPOINTS_VARS]
+                }] }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }]; } });
+class DfMediaQuery {
+    constructor(platformId) {
+        this._isBrowser = isPlatformBrowser(platformId);
+    }
+    notSupported(query) {
+        return { matches: false, media: query, addEventListener: () => { }, removeEventListener: () => { } };
+    }
+    matchMedia(query) {
+        if (this._isBrowser && window.matchMedia) {
+            return window.matchMedia(query);
+        }
+        else {
+            return this.notSupported(query);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfManageNavSelectDirective, deps: [{ token: i1$1.NgSelectComponent, host: true }, { token: i0.ElementRef }, { token: DfDirectionDetectionService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfManageNavSelectDirective, isStandalone: true, selector: "[dfManageNavSelect]", host: { listeners: { "keydown.arrowLeft": "handleKeyDown($event)", "keydown.Backspace": "handleKeyDownBackspace($event)", "keydown.arrowRight": "handleKeyDownRight($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaQuery, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaQuery, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfManageNavSelectDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[dfManageNavSelect]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.NgSelectComponent, decorators: [{
-                    type: Host
-                }] }, { type: i0.ElementRef }, { type: DfDirectionDetectionService }, { type: i0.Renderer2 }]; }, propDecorators: { handleKeyDown: [{
-                type: HostListener,
-                args: ['keydown.arrowLeft', ['$event']]
-            }], handleKeyDownBackspace: [{
-                type: HostListener,
-                args: ['keydown.Backspace', ['$event']]
-            }], handleKeyDownRight: [{
-                type: HostListener,
-                args: ['keydown.arrowRight', ['$event']]
-            }] } });
-
-// Put to avoid opening of the select after removal. See why in file:
-// https://github.com/ng-select/ng-select/blob/57c6671a972d23beddcca2b6acc9418544c17a2e/src/ng-select/ng-select.component.ts#L307
-const NG_SELECT_CLASS_IDENTIFIER = 'ng-value-icon';
-class DfManageBadgeEventsDirective {
-    constructor(renderer, element) {
-        this.renderer = renderer;
-        this.element = element;
-        this.tabindex = '-1';
-        this.renderer.addClass(this.element.nativeElement, DF_SELECT_CLASS);
-        this.renderer.addClass(this.element.nativeElement, NG_SELECT_CLASS_IDENTIFIER);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaQuery, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }]; } });
+class DfMediaObserver {
+    constructor(_mediaQuery) {
+        this._mediaQuery = _mediaQuery;
+        this._subscription = new Subscription();
+        this._queries = new Map();
     }
-    ngAfterViewInit() {
-        const childs = this.element.nativeElement.children;
-        const map = Array.from(childs);
-        map.forEach((element) => {
-            this.renderer.addClass(element, NG_SELECT_CLASS_IDENTIFIER);
-        });
+    /**
+     * Verifies if at least one of the provided media-queries is matching
+     * the current viewport
+     */
+    matches(queries) {
+        queries = this._flattenQueries(Array.isArray(queries) ? queries : [queries]);
+        return queries.some(q => this._registerQuery(q).mediaQueryList.matches);
     }
-    handleKeyDownBackspace(event) {
-        this.dfManageBadgeEventsSelect[0](this.dfManageBadgeEventsSelect[1]);
-        event.stopPropagation();
+    /**
+     * Produces an observable for a set of media-queries that will emit
+     * meta information for any changes of the given queries.
+     * @param value One or more media-queries to be observed.
+     * @returns A stream of matches meta object for the given media-queries.
+     */
+    observe(queries) {
+        queries = this._flattenQueries(Array.isArray(queries) ? queries : [queries]);
+        return combineLatest(queries.map(q => this._registerQuery(q).mediaQueryList$)).pipe(map((events) => events.reduce((result, event) => {
+            result.matches = result.matches || event.matches;
+            result.breakpoints[event.media] = event.matches;
+            return result;
+        }, { matches: false, breakpoints: {} })));
     }
-    handleClick(event) {
-        this.dfManageBadgeEventsSelect[0](this.dfManageBadgeEventsSelect[1]);
-        event.stopPropagation();
+    ngOnDestroy() {
+        this._subscription.unsubscribe();
     }
-    handleKeyDownEnter(event) {
-        this.dfManageBadgeEventsSelect[0](this.dfManageBadgeEventsSelect[1]);
-        event.stopPropagation();
+    _flattenQueries(queries) {
+        return queries.map(q => q.split(',')).reduce((flat, a) => flat.concat(a));
     }
-    handleKeyDownDelete(event) {
-        this.dfManageBadgeEventsSelect[0](this.dfManageBadgeEventsSelect[1]);
-        event.stopPropagation();
+    _registerQuery(query) {
+        if (this._queries.has(query)) {
+            return this._queries.get(query);
+        }
+        const queryList = this._mediaQuery.matchMedia(query);
+        const queryList$ = new BehaviorSubject({
+            media: query,
+            matches: queryList.matches
+        });
+        this._subscription.add(fromEvent(queryList, 'change').subscribe((event) => {
+            queryList$.next(event);
+        }));
+        const meta = { mediaQueryList: queryList, mediaQueryList$: queryList$ };
+        this._queries.set(query, meta);
+        return meta;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfManageBadgeEventsDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfManageBadgeEventsDirective, isStandalone: true, selector: "[dfManageBadgeEventsSelect]", inputs: { dfManageBadgeEventsSelect: "dfManageBadgeEventsSelect" }, host: { listeners: { "keydown.Backspace": "handleKeyDownBackspace($event)", "click": "handleClick($event)", "keydown.Enter": "handleKeyDownEnter($event)", "keydown.Delete": "handleKeyDownDelete($event)" }, properties: { "attr.tabindex": "this.tabindex" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaObserver, deps: [{ token: DfMediaQuery }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaObserver, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfManageBadgeEventsDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[dfManageBadgeEventsSelect]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { dfManageBadgeEventsSelect: [{
-                type: Input
-            }], tabindex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], handleKeyDownBackspace: [{
-                type: HostListener,
-                args: ['keydown.Backspace', ['$event']]
-            }], handleClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], handleKeyDownEnter: [{
-                type: HostListener,
-                args: ['keydown.Enter', ['$event']]
-            }], handleKeyDownDelete: [{
-                type: HostListener,
-                args: ['keydown.Delete', ['$event']]
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaObserver, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: DfMediaQuery }]; } });
 
-// Copy of https://github.com/ng-select/ng-select/blob/master/src/ng-option-highlight/lib/ng-option-highlight.directive.ts
-class DfOptionHighlightDirective {
-    constructor(elementRef, renderer) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.element = this.elementRef.nativeElement;
+/**
+ * Services you can use to get indication about the current width screen of your application
+ * the matchMedia JS feature (https://developer.mozilla.org/fr/docs/Web/API/Window/matchMedia)
+ */
+class DfMedia {
+    constructor(mediaObserver, _breakPointsService) {
+        this.mediaObserver = mediaObserver;
+        this._breakPointsService = _breakPointsService;
     }
-    ngOnChanges() {
-        if (this.canHighlight) {
-            this.highlightLabel();
-        }
-        else if (this.label) { // unhighlight if there was some
-            this.setInnerHtml(this.label);
+    initQueries(mediaOrBreakpoints, breakPoints = {}) {
+        const queries = [];
+        if (Array.isArray(mediaOrBreakpoints)) {
+            for (const el of mediaOrBreakpoints) {
+                queries.push(breakPoints[el] ? breakPoints[el] : el);
+            }
         }
-    }
-    ngAfterViewInit() {
-        this.label = this.element.innerHTML;
-        if (this.canHighlight) {
-            this.highlightLabel();
+        else {
+            queries.push(breakPoints[mediaOrBreakpoints] ? breakPoints[mediaOrBreakpoints] : mediaOrBreakpoints);
         }
+        return queries;
     }
-    escapeRegExp(str) {
-        return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    /**
+     * Getter to have the observable indication if you are or not in the current scope of your queries
+     * If one queries is matching result is `True` otherwise result is `False`
+     * @param mediaOrBreakpoints either media query string/Array of string or/and in case of BS usage a
+     * string/Array of string of the breakpoints name (sm...).
+     */
+    getObservable(mediaOrBreakpoints) {
+        return this._breakPointsService.breakPoints$.pipe(map(breakpoints => {
+            return breakpoints ? this.initQueries(mediaOrBreakpoints, breakpoints) : this.initQueries(mediaOrBreakpoints);
+        }), switchMap(query => {
+            return this.mediaObserver.observe(query);
+        }), map(value => value.matches), distinctUntilChanged());
     }
-    highlightLabel() {
-        const label = this.label;
-        if (!this.term) {
-            this.setInnerHtml(label);
-            return;
-        }
-        const alternationString = this.escapeRegExp(this.term).replace(' ', '|');
-        const termRegex = new RegExp(alternationString, 'gi');
-        this.setInnerHtml(label.replace(termRegex, `<span class=\"highlighted\">$&</span>`));
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMedia, deps: [{ token: DfMediaObserver }, { token: DfBreakpoints }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMedia, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMedia, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: DfMediaObserver }, { type: DfBreakpoints }]; } });
+
+/**
+ * Directive using the matchMedia JS feature (https://developer.mozilla.org/fr/docs/Web/API/Window/matchMedia)
+ * to be able to add or remove an element like ngIf is doing.
+ * Import DfMediaModule from DF to use all media elements provided
+ */
+class DfIfMediaDirective {
+    /**
+     * Input of the directive
+     * @param mediaOrBreakpoints either media query string/Array of string or in case of BS usage a
+     * string/Array of string of the breakpoints name (sm...).
+     */
+    set dfIfMedia(mediaOrBreakpoints) {
+        this._subscription.add(this._mediaService.getObservable(mediaOrBreakpoints).subscribe((isValidated) => {
+            this.update(isValidated);
+        }));
     }
-    get canHighlight() {
-        return this.isDefined(this.term) && this.isDefined(this.label);
+    constructor(_viewContainerRef, _template, _mediaService) {
+        this._viewContainerRef = _viewContainerRef;
+        this._template = _template;
+        this._mediaService = _mediaService;
+        this._viewInstance = null;
+        this._subscription = new Subscription();
     }
-    setInnerHtml(html) {
-        this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', html);
+    ngOnDestroy() {
+        if (this._viewInstance) {
+            this._viewContainerRef.clear();
+        }
+        this._subscription.unsubscribe();
     }
-    isDefined(value) {
-        return value !== undefined && value !== null;
+    update(matches) {
+        if (matches && this._viewInstance === null) {
+            this._viewInstance = this._viewContainerRef.createEmbeddedView(this._template);
+        }
+        else if (!matches) {
+            this._viewContainerRef.clear();
+            this._viewInstance = null;
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfOptionHighlightDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfOptionHighlightDirective, isStandalone: true, selector: "[dfOptionHighlight]", inputs: { term: ["dfOptionHighlight", "term"] }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfIfMediaDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: DfMedia }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfIfMediaDirective, isStandalone: true, selector: "[dfIfMedia]", inputs: { dfIfMedia: "dfIfMedia" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfOptionHighlightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfIfMediaDirective, decorators: [{
             type: Directive,
+            args: [{ selector: '[dfIfMedia]', standalone: true }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: DfMedia }]; }, propDecorators: { dfIfMedia: [{
+                type: Input
+            }] } });
+
+class DfMediaModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfMediaModule, imports: [DfIfMediaDirective], exports: [DfIfMediaDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaModule, decorators: [{
+            type: NgModule,
             args: [{
-                    selector: '[dfOptionHighlight]',
-                    standalone: true
+                    imports: [DfIfMediaDirective],
+                    exports: [DfIfMediaDirective]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { term: [{
-                type: Input,
-                args: ['dfOptionHighlight']
-            }] } });
+        }] });
 
-class DfSelectModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfSelectModule, imports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective], exports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective, NgSelectModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSelectModule, imports: [NgSelectModule] }); }
+class DfFooterModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfFooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfFooterModule, imports: [DfMediaModule, NgbAccordionModule], exports: [DfMediaModule, NgbAccordionModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfFooterModule, imports: [DfMediaModule, NgbAccordionModule, DfMediaModule, NgbAccordionModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfFooterModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective],
-                    exports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective, NgSelectModule]
+                    imports: [DfMediaModule, NgbAccordionModule],
+                    exports: [DfMediaModule, NgbAccordionModule]
+                }]
+        }] });
+
+class DfAmadeusIconComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAmadeusIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DfAmadeusIconComponent, isStandalone: true, selector: "df-amadeus-icon", ngImport: i0, template: `
+    <svg
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      x="0px"
+      y="0px"
+      viewBox="0 0 510.2 67.9"
+      style="enable-background:new 0 0 510.2 67.9;"
+      xml:space="preserve"
+    >
+      <g id="Layer_2"></g>
+      <g id="Layer_1">
+        <path
+          d="M269.7,0c-8.3,0-19.8,1.4-26.9,4v61.9c5.8,1.2,16.8,2,24.4,2c26,0,36.1-10.2,36.1-34.4C303.4,12.5,290.5,0,269.7,0
+        M257.5,12.6c2.4-0.5,7-1.1,11.6-1.1c10.6,0,18.8,5.9,18.8,22c0,15.5-4.1,22.9-20.2,22.9c-5.2,0-10.3-0.8-10.3-0.8V12.6z
+        M461.5,65.5c0,0,9,2.4,21.7,2.4c12,0,27-4.1,27-20.3c0-10.6-7.8-15.1-20.5-19.7c-6.9-2.5-12.7-4.8-12.7-9.5
+      c0-2.3,1.7-6.7,10.5-6.7c8.2,0,16.6,3.8,16.6,3.8l3.7-10.8C505.2,3.4,497.2,0,486.1,0c-12.1,0-23.8,6.4-23.8,19.3
+      c0,13.3,12.1,17.3,21.5,20.5c6.4,2.2,11.8,4.4,11.8,8.7c0,4.1-2.3,7.7-13.1,7.7c-8.9,0-18.3-2-18.3-2L461.5,65.5z M429.6,50.3
+      c-3.5,1.7-11,4.5-17.9,4.5c-10,0-11.7-4.5-11.7-14.9V0.6h-2.2c-3.3,0-10.6,0.6-12.4,0.9v40.3c0,17.6,4.3,26,22.2,26
+      c13.7,0,21.7-5.3,22.2-5.3c0.2,0,4.9,2.9,14.3,2.9v-64c-1-0.2-8.1-0.9-11.7-0.9h-2.9V50.3z M198.5,0c-13,0-23.2,3.2-27.1,5.2
+      l3.1,10.9c0,0,10-3.6,19.8-3.6c8.4,0,12.7,2.4,12.7,10.6v4.7h-12.7c-21.6,0-28,9.9-28,20.8c0,14.5,11.3,19.1,21.6,19.1
+      c12,0,18.9-5,19.8-5c0.7,0,3.1,2.6,14,2.6V19.3C221.7,5.5,213.1,0,198.5,0 M207.1,52.7c-3.1,1.2-10.7,3.7-16.2,3.7
+      c-6,0-10.6-2.1-10.6-8.7c0-5.7,3.1-9,11.4-9.3l15.4-0.6V52.7z M32.2,0C19.2,0,9,3.2,5.1,5.2l3.1,10.9c0,0,10-3.6,19.8-3.6
+      c8.4,0,12.7,2.4,12.7,10.6v4.7H28c-21.6,0-28,9.9-28,20.8c0,14.5,11.3,19.1,21.6,19.1c12,0,18.9-5,19.8-5c0.7,0,3.1,2.6,14,2.6
+      V19.3C55.4,5.5,46.8,0,32.2,0 M40.9,52.7c-3.1,1.2-10.7,3.7-16.2,3.7c-6,0-10.6-2.1-10.6-8.7c0-5.7,3.1-9,11.4-9.3l15.4-0.6V52.7z
+        M114,39c-0.4,0.9-0.8,2.7-1.1,3.8c-0.3-1-0.8-2.8-1.1-3.8L99,6.1C96.8,0.7,93.4,0,87.2,0c-2.2,0-6.6,0.3-6.6,0.3L74,66.9h14.6
+      l3.2-44.7l13.9,33.8c1,2.6,3.1,3.7,7.3,3.7c4.1,0,6.2-1,7.3-3.7L134,22.2l3.2,44.7h14.6l-6.6-66.6c0,0-4.4-0.3-6.6-0.3
+      c-6.2,0-9.6,0.7-11.8,6.1L114,39z M320.8,64.7c0,0,11.2,3.1,25.5,3.1c15.3,0,22.3-1.7,22.3-1.7V54.8c0,0-7.6,1.5-18.3,1.5
+      c-9.3,0-15.1-1.2-15.1-1.2v-16h28.9V27.8h-28.9V12.5c0,0,5.7-1,14.1-1c9.5,0,18.1,1.5,18.1,1.5V1.6c0,0-7.5-1.6-19.8-1.6
+      c-16.3,0-27,2.9-27,2.9V64.7z"
+        />
+      </g>
+    </svg>
+  `, isInline: true, styles: [":root{--df-navbar-height: 3.5rem}:host{min-width:60px}:host svg{margin:10%}:host.icon-primary{fill:var(--df-primary-500)}:host.icon-white{fill:#fff}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAmadeusIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-amadeus-icon', template: `
+    <svg
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      x="0px"
+      y="0px"
+      viewBox="0 0 510.2 67.9"
+      style="enable-background:new 0 0 510.2 67.9;"
+      xml:space="preserve"
+    >
+      <g id="Layer_2"></g>
+      <g id="Layer_1">
+        <path
+          d="M269.7,0c-8.3,0-19.8,1.4-26.9,4v61.9c5.8,1.2,16.8,2,24.4,2c26,0,36.1-10.2,36.1-34.4C303.4,12.5,290.5,0,269.7,0
+        M257.5,12.6c2.4-0.5,7-1.1,11.6-1.1c10.6,0,18.8,5.9,18.8,22c0,15.5-4.1,22.9-20.2,22.9c-5.2,0-10.3-0.8-10.3-0.8V12.6z
+        M461.5,65.5c0,0,9,2.4,21.7,2.4c12,0,27-4.1,27-20.3c0-10.6-7.8-15.1-20.5-19.7c-6.9-2.5-12.7-4.8-12.7-9.5
+      c0-2.3,1.7-6.7,10.5-6.7c8.2,0,16.6,3.8,16.6,3.8l3.7-10.8C505.2,3.4,497.2,0,486.1,0c-12.1,0-23.8,6.4-23.8,19.3
+      c0,13.3,12.1,17.3,21.5,20.5c6.4,2.2,11.8,4.4,11.8,8.7c0,4.1-2.3,7.7-13.1,7.7c-8.9,0-18.3-2-18.3-2L461.5,65.5z M429.6,50.3
+      c-3.5,1.7-11,4.5-17.9,4.5c-10,0-11.7-4.5-11.7-14.9V0.6h-2.2c-3.3,0-10.6,0.6-12.4,0.9v40.3c0,17.6,4.3,26,22.2,26
+      c13.7,0,21.7-5.3,22.2-5.3c0.2,0,4.9,2.9,14.3,2.9v-64c-1-0.2-8.1-0.9-11.7-0.9h-2.9V50.3z M198.5,0c-13,0-23.2,3.2-27.1,5.2
+      l3.1,10.9c0,0,10-3.6,19.8-3.6c8.4,0,12.7,2.4,12.7,10.6v4.7h-12.7c-21.6,0-28,9.9-28,20.8c0,14.5,11.3,19.1,21.6,19.1
+      c12,0,18.9-5,19.8-5c0.7,0,3.1,2.6,14,2.6V19.3C221.7,5.5,213.1,0,198.5,0 M207.1,52.7c-3.1,1.2-10.7,3.7-16.2,3.7
+      c-6,0-10.6-2.1-10.6-8.7c0-5.7,3.1-9,11.4-9.3l15.4-0.6V52.7z M32.2,0C19.2,0,9,3.2,5.1,5.2l3.1,10.9c0,0,10-3.6,19.8-3.6
+      c8.4,0,12.7,2.4,12.7,10.6v4.7H28c-21.6,0-28,9.9-28,20.8c0,14.5,11.3,19.1,21.6,19.1c12,0,18.9-5,19.8-5c0.7,0,3.1,2.6,14,2.6
+      V19.3C55.4,5.5,46.8,0,32.2,0 M40.9,52.7c-3.1,1.2-10.7,3.7-16.2,3.7c-6,0-10.6-2.1-10.6-8.7c0-5.7,3.1-9,11.4-9.3l15.4-0.6V52.7z
+        M114,39c-0.4,0.9-0.8,2.7-1.1,3.8c-0.3-1-0.8-2.8-1.1-3.8L99,6.1C96.8,0.7,93.4,0,87.2,0c-2.2,0-6.6,0.3-6.6,0.3L74,66.9h14.6
+      l3.2-44.7l13.9,33.8c1,2.6,3.1,3.7,7.3,3.7c4.1,0,6.2-1,7.3-3.7L134,22.2l3.2,44.7h14.6l-6.6-66.6c0,0-4.4-0.3-6.6-0.3
+      c-6.2,0-9.6,0.7-11.8,6.1L114,39z M320.8,64.7c0,0,11.2,3.1,25.5,3.1c15.3,0,22.3-1.7,22.3-1.7V54.8c0,0-7.6,1.5-18.3,1.5
+      c-9.3,0-15.1-1.2-15.1-1.2v-16h28.9V27.8h-28.9V12.5c0,0,5.7-1,14.1-1c9.5,0,18.1,1.5,18.1,1.5V1.6c0,0-7.5-1.6-19.8-1.6
+      c-16.3,0-27,2.9-27,2.9V64.7z"
+        />
+      </g>
+    </svg>
+  `, standalone: true, styles: [":root{--df-navbar-height: 3.5rem}:host{min-width:60px}:host svg{margin:10%}:host.icon-primary{fill:var(--df-primary-500)}:host.icon-white{fill:#fff}\n"] }]
+        }] });
+
+class DfIconModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfIconModule, imports: [DfAmadeusIconComponent], exports: [DfAmadeusIconComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfIconModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfIconModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [DfAmadeusIconComponent],
+                    exports: [DfAmadeusIconComponent]
                 }]
         }] });
 
+class DfModalService {
+    constructor(modalService, rendererFactory) {
+        this.modalService = modalService;
+        this.rendererFactory = rendererFactory;
+        this.renderer = this.rendererFactory.createRenderer(null, null);
+    }
+    open(content, options) {
+        let modalRef;
+        if (options && options.container) {
+            modalRef = this.modalService.open(content, options);
+        }
+        else {
+            modalRef = this.modalService.open(content, Object.assign({}, { container: 'body' }, options));
+        }
+        // we add the 'df-modal-open' class to the body when the modal is open. We remove it when the modal is closed/dismissed
+        this.renderer.addClass(document.body, 'df-modal-open');
+        modalRef.result.then(() => {
+            this.renderer.removeClass(document.body, 'df-modal-open');
+        }, () => {
+            this.renderer.removeClass(document.body, 'df-modal-open');
+        });
+        return modalRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfModalService, deps: [{ token: i1.NgbModal }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfModalService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.NgbModal }, { type: i0.RendererFactory2 }]; } });
+
 class DfPopoverConfig extends NgbPopoverConfig {
     constructor(ngbConfig) {
         super(ngbConfig || { animation: true });
@@ -929,7 +1227,7 @@ class DfProgressbarComponent {
         this.maxValue = 100;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DfProgressbarComponent, isStandalone: true, selector: "df-progressbar", inputs: { infiniteAnimation: "infiniteAnimation", value: "value", maxValue: "maxValue", text: "text", start$: "start$", end$: "end$", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel" }, outputs: { percentageValueChange: "percentageValueChange" }, ngImport: i0, template: "<ng-container *ngIf=\"displayProgressBar\">\n  <div *ngIf=\"computedText\" class=\"progressbar-text mb-2\">{{ computedText }}</div>\n  <div class=\"progress\">\n    <ng-container *ngIf=\"infiniteAnimation; else withValue\">\n      <div\n        class=\"progress-bar infinite-animation\"\n        role=\"progressbar\"\n        aria-valuetext=\"indeterminate\"\n        [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n        [attr.aria-label]=\"!ariaLabelledBy && ariaLabel ? ariaLabel : null\"\n      ></div>\n    </ng-container>\n    <ng-template #withValue>\n      <div\n        [style.width.%]=\"percentageValue\"\n        class=\"progress-bar\"\n        role=\"progressbar\"\n        [attr.aria-valuenow]=\"value\"\n        aria-valuemin=\"0\"\n        [attr.aria-valuemax]=\"maxValue\"\n        [attr.aria-valuetext]=\"computedText ? computedText : null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n        [attr.aria-label]=\"!ariaLabelledBy && ariaLabel ? ariaLabel : null\"\n      ></div>\n    </ng-template>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DfProgressbarComponent, isStandalone: true, selector: "df-progressbar", inputs: { infiniteAnimation: "infiniteAnimation", value: "value", maxValue: "maxValue", text: "text", start$: "start$", end$: "end$", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel" }, outputs: { percentageValueChange: "percentageValueChange" }, ngImport: i0, template: "<ng-container *ngIf=\"displayProgressBar\">\n  <div *ngIf=\"computedText\" class=\"progressbar-text mb-2\">{{ computedText }}</div>\n  <div class=\"progress\">\n    <ng-container *ngIf=\"infiniteAnimation; else withValue\">\n      <div\n        class=\"progress-bar infinite-animation\"\n        role=\"progressbar\"\n        aria-valuetext=\"indeterminate\"\n        [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n        [attr.aria-label]=\"!ariaLabelledBy && ariaLabel ? ariaLabel : null\"\n      ></div>\n    </ng-container>\n    <ng-template #withValue>\n      <div\n        [style.width.%]=\"percentageValue\"\n        class=\"progress-bar\"\n        role=\"progressbar\"\n        [attr.aria-valuenow]=\"value\"\n        aria-valuemin=\"0\"\n        [attr.aria-valuemax]=\"maxValue\"\n        [attr.aria-valuetext]=\"computedText ? computedText : null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n        [attr.aria-label]=\"!ariaLabelledBy && ariaLabel ? ariaLabel : null\"\n      ></div>\n    </ng-template>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressbarComponent, decorators: [{
             type: Component,
@@ -967,195 +1265,437 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
                 }]
         }] });
 
-class SkipLinkDirective {
-    onFocus() {
-        this.inFocus.emit(true);
+var DfProgressIndicatorContentType;
+(function (DfProgressIndicatorContentType) {
+    DfProgressIndicatorContentType["SPINNER"] = "spinner";
+    DfProgressIndicatorContentType["PROGRESSBAR"] = "progressbar";
+})(DfProgressIndicatorContentType || (DfProgressIndicatorContentType = {}));
+class DfProgressIndicatorContentSpinner {
+    constructor(spinnerInput) {
+        this.type = DfProgressIndicatorContentType.SPINNER;
+        this.spinnerInput = spinnerInput;
     }
-    onClick() {
-        this.focusOnTarget();
+}
+class DfProgressIndicatorContentProgressBar {
+    constructor(progressBarInput, position) {
+        this.type = DfProgressIndicatorContentType.PROGRESSBAR;
+        this.progressBarInput = progressBarInput;
+        this.position = position || DfProgressIndicatorContentPosition.TOP;
     }
-    onBlur() {
-        this.inFocus.emit(false);
+}
+var DfProgressIndicatorContentPosition;
+(function (DfProgressIndicatorContentPosition) {
+    DfProgressIndicatorContentPosition["TOP"] = "top";
+    DfProgressIndicatorContentPosition["BOTTOM"] = "bottom";
+    DfProgressIndicatorContentPosition["CENTERED"] = "centered";
+})(DfProgressIndicatorContentPosition || (DfProgressIndicatorContentPosition = {}));
+
+class DfProgressIndicatorContainerComponent {
+    constructor() {
+        this.DEFAULT_CLASS_POSITION = 'df-progressindicator-centered';
+        this.positionClass = this.DEFAULT_CLASS_POSITION;
     }
-    constructor(element, document) {
-        this.element = element;
-        this.document = document;
-        this.class = 'list-group-item list-group-item-action';
-        this.inFocus = new EventEmitter();
+    get classes() {
+        return `df-progressindicator-container ${this.containerClass || ''} ${this.positionClass}`;
     }
-    focusOnTarget() {
-        const href = String(this.element.nativeElement.getAttribute('href'));
-        const parts = href.split('#');
-        if (parts.length < 2) {
-            return;
-        }
-        const id = parts.pop();
-        if (!id) {
-            return;
+    set position(newPosition) {
+        switch (newPosition) {
+            case DfProgressIndicatorContentPosition.TOP:
+                this.positionClass = 'df-progressindicator-top';
+                break;
+            case DfProgressIndicatorContentPosition.BOTTOM:
+                this.positionClass = 'df-progressindicator-bottom';
+                break;
+            default:
+                this.positionClass = this.DEFAULT_CLASS_POSITION;
         }
-        setTimeout(() => {
-            const target = this.document.getElementById(id);
-            if (target) {
-                target.focus();
-                this.onBlur();
-            }
-        });
+        this._position = newPosition;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SkipLinkDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: SkipLinkDirective, isStandalone: true, selector: "[dfSkipLink]", outputs: { inFocus: "inFocus" }, host: { listeners: { "focus": "onFocus()", "click": "onClick()", "blur": "onBlur()" }, properties: { "class": "this.class" } }, ngImport: i0 }); }
+    get position() {
+        return this._position;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DfProgressIndicatorContainerComponent, isStandalone: true, selector: "df-progressindicator-container", inputs: { containerClass: "containerClass", position: "position" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: `
+    <ng-content></ng-content>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SkipLinkDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorContainerComponent, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[dfSkipLink]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }]; }, propDecorators: { class: [{
-                type: HostBinding
-            }], inFocus: [{
-                type: Output
-            }], onFocus: [{
-                type: HostListener,
-                args: ['focus']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click']
-            }], onBlur: [{
-                type: HostListener,
-                args: ['blur']
+                    selector: 'df-progressindicator-container',
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+    <ng-content></ng-content>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }], propDecorators: { classes: [{
+                type: HostBinding,
+                args: ['class']
+            }], containerClass: [{
+                type: Input
+            }], position: [{
+                type: Input
             }] } });
 
-class SkipLinksContainerComponent {
-    constructor(changeDetector) {
-        this.changeDetector = changeDetector;
-        this.inFocus = false;
+class DfDefaultSpinnerComponent {
+    constructor() {
+        this.isGlobalSpinner = false;
+        this.contentClass = 'spinner-border text-primary';
     }
-    ngAfterContentInit() {
-        if (!this.links.length) {
-            return;
-        }
-        this.focusSubscription = merge(...this.links.map((link) => link.inFocus)).subscribe((focus) => {
-            this.inFocus = focus;
-            this.changeDetector.detectChanges();
-        });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfDefaultSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DfDefaultSpinnerComponent, isStandalone: true, selector: "df-default-spinner", inputs: { isGlobalSpinner: "isGlobalSpinner", contentClass: "contentClass", ariaLabel: "ariaLabel" }, ngImport: i0, template: "<div [ngClass]=\"contentClass\" [attr.role]=\"isGlobalSpinner ? 'alert' : 'status'\">\n  <span class=\"visually-hidden\">\n    <ng-container *ngIf=\"ariaLabel; else defaultAriaLabel\">{{ ariaLabel }}</ng-container>\n  </span>\n</div>\n\n<ng-template #defaultAriaLabel>\n  <ng-container i18n=\"@@df.progressindicator.default.spinner.ariaLabel\">Loading...</ng-container>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfDefaultSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-default-spinner', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div [ngClass]=\"contentClass\" [attr.role]=\"isGlobalSpinner ? 'alert' : 'status'\">\n  <span class=\"visually-hidden\">\n    <ng-container *ngIf=\"ariaLabel; else defaultAriaLabel\">{{ ariaLabel }}</ng-container>\n  </span>\n</div>\n\n<ng-template #defaultAriaLabel>\n  <ng-container i18n=\"@@df.progressindicator.default.spinner.ariaLabel\">Loading...</ng-container>\n</ng-template>\n" }]
+        }], propDecorators: { isGlobalSpinner: [{
+                type: Input
+            }], contentClass: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }] } });
+
+class DfProgressIndicatorBackdropComponent {
+    constructor() {
+        this.isGlobalBackdrop = true;
     }
-    ngOnDestroy() {
-        this.focusSubscription.unsubscribe();
+    get classes() {
+        return `df-progressindicator-backdrop ${this.backdropClass || ''} ${this.isGlobalBackdrop ? 'df-progressindicator-backdrop-global' : 'df-progressindicator-backdrop-contextual'}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SkipLinksContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: SkipLinksContainerComponent, isStandalone: true, selector: "df-skip-links-container", queries: [{ propertyName: "links", predicate: SkipLinkDirective }], ngImport: i0, template: "<section class=\"df-skip-links__section\">\n  <div class=\"df-skip-links\">\n    <div\n      class=\"df-skip-links__wrap list-group\"\n      [class.focus]=\"inFocus\"\n      (blur)=\"inFocus=false\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </div>\n</section>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DfProgressIndicatorBackdropComponent, isStandalone: true, selector: "df-progressindicator-backdrop", inputs: { backdropClass: "backdropClass", isGlobalBackdrop: "isGlobalBackdrop" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SkipLinksContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorBackdropComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'df-skip-links-container', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<section class=\"df-skip-links__section\">\n  <div class=\"df-skip-links\">\n    <div\n      class=\"df-skip-links__wrap list-group\"\n      [class.focus]=\"inFocus\"\n      (blur)=\"inFocus=false\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </div>\n</section>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { links: [{
-                type: ContentChildren,
-                args: [SkipLinkDirective]
+            args: [{
+                    selector: 'df-progressindicator-backdrop',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }], propDecorators: { classes: [{
+                type: HostBinding,
+                args: ['class']
+            }], backdropClass: [{
+                type: Input
+            }], isGlobalBackdrop: [{
+                type: Input
             }] } });
 
-class DfAccessibilityModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAccessibilityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfAccessibilityModule, imports: [SkipLinkDirective, SkipLinksContainerComponent], exports: [SkipLinkDirective, SkipLinksContainerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAccessibilityModule }); }
+class DfProgressIndicatorRef {
+    constructor(containerRef, contentRef, backdropRef) {
+        this.containerRef = containerRef;
+        this.contentRef = contentRef;
+        this.backdropRef = backdropRef;
+    }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAccessibilityModule, decorators: [{
-            type: NgModule,
+
+const noop$1 = () => { };
+/**
+ * Utility to handle the scrollbar.
+ *
+ * It allows to compensate the lack of a vertical scrollbar by adding an
+ * equivalent padding on the right of the body, and to remove this compensation.
+ *
+ * It is a copy of https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/util/scrollbar.ts
+ */
+class ScrollBar {
+    constructor(_document) {
+        this._document = _document;
+    }
+    /**
+     * To be called right before a potential vertical scrollbar would be removed:
+     *
+     * - if there was a scrollbar, adds some compensation padding to the body
+     * to keep the same layout as when the scrollbar is there
+     * - if there was none, there is nothing to do
+     *
+     * @return a callback used to revert the compensation (noop if there was none,
+     * otherwise a function removing the padding)
+     */
+    compensate() {
+        const width = this._getWidth();
+        return !this._isPresent(width) ? noop$1 : this._adjustBody(width);
+    }
+    /**
+     * Adds a padding of the given width on the right of the body.
+     *
+     * @return a callback used to revert the padding to its previous value
+     */
+    _adjustBody(scrollbarWidth) {
+        const body = this._document.body;
+        const userSetPaddingStyle = body.style.paddingRight;
+        const paddingRight = 'padding-right';
+        const actualPadding = parseFloat(window.getComputedStyle(body)[paddingRight]);
+        body.style[paddingRight] = `${actualPadding + scrollbarWidth}px`;
+        return () => (body.style[paddingRight] = userSetPaddingStyle);
+    }
+    /**
+     * Tells whether a scrollbar is currently present on the body.
+     *
+     * @return true if scrollbar is present, false otherwise
+     */
+    _isPresent(scrollbarWidth) {
+        const rect = this._document.body.getBoundingClientRect();
+        const bodyToViewportGap = window.innerWidth - (rect.left + rect.right);
+        const uncertainty = 0.1 * scrollbarWidth;
+        return bodyToViewportGap >= scrollbarWidth - uncertainty;
+    }
+    /**
+     * Calculates and returns the width of a scrollbar.
+     *
+     * @return the width of a scrollbar on this page
+     */
+    _getWidth() {
+        const measurer = this._document.createElement('div');
+        measurer.className = 'modal-scrollbar-measure';
+        const body = this._document.body;
+        body.appendChild(measurer);
+        const width = measurer.getBoundingClientRect().width - measurer.clientWidth;
+        body.removeChild(measurer);
+        return width;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ScrollBar, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ScrollBar, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ScrollBar, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; } });
+
+class DfProgressIndicatorService {
+    constructor(document, rendererFactory, componentFactoryResolver, appRef, injector, scrollbar) {
+        this.document = document;
+        this.rendererFactory = rendererFactory;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.appRef = appRef;
+        this.injector = injector;
+        this.scrollbar = scrollbar;
+        this.BODY_CLASS = 'df-progressindicator-open';
+        // TODO - Remove it when https://github.com/angular/angular/issues/22567
+        this.containerAttributes = ['containerClass', 'position'];
+        this.backdropAttributes = ['backdropClass', 'isGlobalBackdrop'];
+        this.defaultSpinnerAttributes = ['contentClass', 'ariaLabel', 'isGlobalSpinner'];
+        this.defaultProgressBarAttributes = ['infiniteAnimation', 'ariaLabel'];
+        this.activeInstances = [];
+        this.renderer = this.rendererFactory.createRenderer(null, null);
+    }
+    open(content, options) {
+        const containerElt = this.getContainer(this.document, options);
+        if (!containerElt) {
+            throw new Error(`[Design Factory] The specified progress indicator container "${options?.container ||
+                'body'}" was not found in the DOM.`);
+        }
+        // Create needed components
+        const backdropRef = options?.backdrop !== false
+            ? this.createComponent(DfProgressIndicatorBackdropComponent, this.componentFactoryResolver, undefined, containerElt)
+            : undefined;
+        const contentRef = this.getContent(content, this.componentFactoryResolver, containerElt);
+        const containerCmpRef = this.createComponent(DfProgressIndicatorContainerComponent, this.componentFactoryResolver, contentRef, containerElt);
+        const onDestroyOperations = [];
+        // Add aria attributes on the container
+        this.renderer.setAttribute(containerElt, 'aria-busy', 'true');
+        onDestroyOperations.push(() => {
+            this.renderer.removeAttribute(containerElt, 'aria-busy');
+        });
+        // Override some styles if body is the container
+        if (containerElt === this.document.body) {
+            const scrollCompensation = this.scrollbar.compensate();
+            this.renderer.addClass(this.document.body, this.BODY_CLASS);
+            this.renderer.setAttribute(this.document.body, 'aria-busy', 'true');
+            onDestroyOperations.push(() => {
+                scrollCompensation();
+                this.renderer.removeClass(this.document.body, this.BODY_CLASS);
+            });
+        }
+        if (onDestroyOperations.length > 0) {
+            containerCmpRef.onDestroy(() => {
+                onDestroyOperations.forEach(operation => {
+                    operation();
+                });
+            });
+        }
+        // Force override of position in case of the use of a progress bar component
+        if (content instanceof DfProgressIndicatorContentProgressBar) {
+            options = {
+                ...options,
+                position: content.position
+            };
+        }
+        // Apply options to the created components
+        if (backdropRef) {
+            this.applyOptions(backdropRef, this.backdropAttributes, { ...options, isGlobalBackdrop: containerElt === this.document.body });
+        }
+        this.applyOptions(containerCmpRef, this.containerAttributes, options);
+        const progressIndicatorRef = new DfProgressIndicatorRef(containerCmpRef, contentRef, backdropRef);
+        this.activeInstances.push(progressIndicatorRef);
+        return progressIndicatorRef;
+    }
+    close(progressIndicatorRef) {
+        const instanceIndex = this.activeInstances.indexOf(progressIndicatorRef);
+        if (instanceIndex > -1) {
+            Object.keys(progressIndicatorRef).forEach(key => {
+                const propertyValue = progressIndicatorRef[key];
+                if (propertyValue && propertyValue instanceof ComponentRef) {
+                    propertyValue.destroy();
+                    progressIndicatorRef[key] = undefined;
+                }
+            });
+            this.activeInstances.splice(instanceIndex, 1);
+        }
+        else {
+            throw new Error('[Design Factory] The specified progress indicator reference is no longer active and cannot be closed.');
+        }
+    }
+    /**
+     * Retrieve container according to the desired options.
+     */
+    getContainer(document, options) {
+        if (options?.container instanceof HTMLElement) {
+            return options.container;
+        }
+        return options?.container ? document.querySelector(options.container) : document.body;
+    }
+    getContent(content, cfr, container) {
+        if (!content) {
+            return this.createComponent(DfDefaultSpinnerComponent, cfr);
+        }
+        else if (content instanceof DfProgressIndicatorContentSpinner) {
+            const cmpRef = this.createComponent(DfDefaultSpinnerComponent, cfr);
+            this.applyOptions(cmpRef, this.defaultSpinnerAttributes, { ...content.spinnerInput, isGlobalSpinner: container === this.document.body });
+            return cmpRef;
+        }
+        else if (content instanceof DfProgressIndicatorContentProgressBar) {
+            const cmpRef = this.createComponent(DfProgressbarComponent, cfr);
+            this.applyOptions(cmpRef, this.defaultProgressBarAttributes, { ...content.progressBarInput, infiniteAnimation: true });
+            return cmpRef;
+        }
+        else if (content instanceof TemplateRef) {
+            const viewRef = content.createEmbeddedView({});
+            this.appRef.attachView(viewRef);
+            return viewRef;
+        }
+        else {
+            return this.createComponent(content, cfr);
+        }
+    }
+    createComponent(cmpType, cfr, childrenProjectables, container) {
+        const cmpFactory = cfr.resolveComponentFactory(cmpType);
+        let cmpRef;
+        if (childrenProjectables) {
+            if (childrenProjectables instanceof ComponentRef) {
+                cmpRef = cmpFactory.create(this.injector, [[childrenProjectables.location.nativeElement]]);
+            }
+            else {
+                cmpRef = cmpFactory.create(this.injector, [childrenProjectables.rootNodes]);
+            }
+        }
+        else {
+            cmpRef = cmpFactory.create(this.injector);
+        }
+        this.appRef.attachView(cmpRef.hostView);
+        if (container) {
+            container.appendChild(cmpRef.location.nativeElement);
+        }
+        return cmpRef;
+    }
+    applyOptions(cmpRef, availableOptions, options) {
+        if (options) {
+            const cmpInst = cmpRef.instance;
+            availableOptions.forEach((option) => {
+                const optionValue = options[option];
+                if (optionValue !== null && optionValue !== undefined) {
+                    cmpInst[option] = optionValue;
+                }
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorService, deps: [{ token: DOCUMENT }, { token: i0.RendererFactory2 }, { token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: ScrollBar }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorService, decorators: [{
+            type: Injectable,
             args: [{
-                    imports: [SkipLinkDirective, SkipLinksContainerComponent],
-                    exports: [SkipLinkDirective, SkipLinksContainerComponent]
+                    providedIn: 'root'
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.RendererFactory2 }, { type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: ScrollBar }]; } });
 
-class DfAmadeusIconComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAmadeusIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DfAmadeusIconComponent, isStandalone: true, selector: "df-amadeus-icon", ngImport: i0, template: `
-    <svg
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      x="0px"
-      y="0px"
-      viewBox="0 0 510.2 67.9"
-      style="enable-background:new 0 0 510.2 67.9;"
-      xml:space="preserve"
-    >
-      <g id="Layer_2"></g>
-      <g id="Layer_1">
-        <path
-          d="M269.7,0c-8.3,0-19.8,1.4-26.9,4v61.9c5.8,1.2,16.8,2,24.4,2c26,0,36.1-10.2,36.1-34.4C303.4,12.5,290.5,0,269.7,0
-        M257.5,12.6c2.4-0.5,7-1.1,11.6-1.1c10.6,0,18.8,5.9,18.8,22c0,15.5-4.1,22.9-20.2,22.9c-5.2,0-10.3-0.8-10.3-0.8V12.6z
-        M461.5,65.5c0,0,9,2.4,21.7,2.4c12,0,27-4.1,27-20.3c0-10.6-7.8-15.1-20.5-19.7c-6.9-2.5-12.7-4.8-12.7-9.5
-      c0-2.3,1.7-6.7,10.5-6.7c8.2,0,16.6,3.8,16.6,3.8l3.7-10.8C505.2,3.4,497.2,0,486.1,0c-12.1,0-23.8,6.4-23.8,19.3
-      c0,13.3,12.1,17.3,21.5,20.5c6.4,2.2,11.8,4.4,11.8,8.7c0,4.1-2.3,7.7-13.1,7.7c-8.9,0-18.3-2-18.3-2L461.5,65.5z M429.6,50.3
-      c-3.5,1.7-11,4.5-17.9,4.5c-10,0-11.7-4.5-11.7-14.9V0.6h-2.2c-3.3,0-10.6,0.6-12.4,0.9v40.3c0,17.6,4.3,26,22.2,26
-      c13.7,0,21.7-5.3,22.2-5.3c0.2,0,4.9,2.9,14.3,2.9v-64c-1-0.2-8.1-0.9-11.7-0.9h-2.9V50.3z M198.5,0c-13,0-23.2,3.2-27.1,5.2
-      l3.1,10.9c0,0,10-3.6,19.8-3.6c8.4,0,12.7,2.4,12.7,10.6v4.7h-12.7c-21.6,0-28,9.9-28,20.8c0,14.5,11.3,19.1,21.6,19.1
-      c12,0,18.9-5,19.8-5c0.7,0,3.1,2.6,14,2.6V19.3C221.7,5.5,213.1,0,198.5,0 M207.1,52.7c-3.1,1.2-10.7,3.7-16.2,3.7
-      c-6,0-10.6-2.1-10.6-8.7c0-5.7,3.1-9,11.4-9.3l15.4-0.6V52.7z M32.2,0C19.2,0,9,3.2,5.1,5.2l3.1,10.9c0,0,10-3.6,19.8-3.6
-      c8.4,0,12.7,2.4,12.7,10.6v4.7H28c-21.6,0-28,9.9-28,20.8c0,14.5,11.3,19.1,21.6,19.1c12,0,18.9-5,19.8-5c0.7,0,3.1,2.6,14,2.6
-      V19.3C55.4,5.5,46.8,0,32.2,0 M40.9,52.7c-3.1,1.2-10.7,3.7-16.2,3.7c-6,0-10.6-2.1-10.6-8.7c0-5.7,3.1-9,11.4-9.3l15.4-0.6V52.7z
-        M114,39c-0.4,0.9-0.8,2.7-1.1,3.8c-0.3-1-0.8-2.8-1.1-3.8L99,6.1C96.8,0.7,93.4,0,87.2,0c-2.2,0-6.6,0.3-6.6,0.3L74,66.9h14.6
-      l3.2-44.7l13.9,33.8c1,2.6,3.1,3.7,7.3,3.7c4.1,0,6.2-1,7.3-3.7L134,22.2l3.2,44.7h14.6l-6.6-66.6c0,0-4.4-0.3-6.6-0.3
-      c-6.2,0-9.6,0.7-11.8,6.1L114,39z M320.8,64.7c0,0,11.2,3.1,25.5,3.1c15.3,0,22.3-1.7,22.3-1.7V54.8c0,0-7.6,1.5-18.3,1.5
-      c-9.3,0-15.1-1.2-15.1-1.2v-16h28.9V27.8h-28.9V12.5c0,0,5.7-1,14.1-1c9.5,0,18.1,1.5,18.1,1.5V1.6c0,0-7.5-1.6-19.8-1.6
-      c-16.3,0-27,2.9-27,2.9V64.7z"
-        />
-      </g>
-    </svg>
-  `, isInline: true, styles: [":host{min-width:60px}:host svg{margin:10%}:host.icon-primary{fill:#005eb8}:host.icon-white{fill:#fff}\n"] }); }
+class DfProgressIndicatorDirective {
+    constructor(elementRef, progressService) {
+        this.elementRef = elementRef;
+        this.progressService = progressService;
+    }
+    ngOnChanges(changes) {
+        if (changes['dfProgressIndicator']) {
+            const isProgressing = this.dfProgressIndicator;
+            if (isProgressing) {
+                const config = {
+                    ...this.dfProgressIndicatorConfig?.options,
+                    container: this.elementRef.nativeElement
+                };
+                this.progressIndicatorRef = this.progressService.open(this.dfProgressIndicatorConfig?.content, config);
+            }
+            else if (!isProgressing && this.progressIndicatorRef) {
+                this.progressService.close(this.progressIndicatorRef);
+                this.progressIndicatorRef = undefined;
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorDirective, deps: [{ token: i0.ElementRef }, { token: DfProgressIndicatorService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfProgressIndicatorDirective, isStandalone: true, selector: "[dfProgressIndicator]", inputs: { dfProgressIndicator: "dfProgressIndicator", dfProgressIndicatorConfig: "dfProgressIndicatorConfig" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAmadeusIconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'df-amadeus-icon', template: `
-    <svg
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      x="0px"
-      y="0px"
-      viewBox="0 0 510.2 67.9"
-      style="enable-background:new 0 0 510.2 67.9;"
-      xml:space="preserve"
-    >
-      <g id="Layer_2"></g>
-      <g id="Layer_1">
-        <path
-          d="M269.7,0c-8.3,0-19.8,1.4-26.9,4v61.9c5.8,1.2,16.8,2,24.4,2c26,0,36.1-10.2,36.1-34.4C303.4,12.5,290.5,0,269.7,0
-        M257.5,12.6c2.4-0.5,7-1.1,11.6-1.1c10.6,0,18.8,5.9,18.8,22c0,15.5-4.1,22.9-20.2,22.9c-5.2,0-10.3-0.8-10.3-0.8V12.6z
-        M461.5,65.5c0,0,9,2.4,21.7,2.4c12,0,27-4.1,27-20.3c0-10.6-7.8-15.1-20.5-19.7c-6.9-2.5-12.7-4.8-12.7-9.5
-      c0-2.3,1.7-6.7,10.5-6.7c8.2,0,16.6,3.8,16.6,3.8l3.7-10.8C505.2,3.4,497.2,0,486.1,0c-12.1,0-23.8,6.4-23.8,19.3
-      c0,13.3,12.1,17.3,21.5,20.5c6.4,2.2,11.8,4.4,11.8,8.7c0,4.1-2.3,7.7-13.1,7.7c-8.9,0-18.3-2-18.3-2L461.5,65.5z M429.6,50.3
-      c-3.5,1.7-11,4.5-17.9,4.5c-10,0-11.7-4.5-11.7-14.9V0.6h-2.2c-3.3,0-10.6,0.6-12.4,0.9v40.3c0,17.6,4.3,26,22.2,26
-      c13.7,0,21.7-5.3,22.2-5.3c0.2,0,4.9,2.9,14.3,2.9v-64c-1-0.2-8.1-0.9-11.7-0.9h-2.9V50.3z M198.5,0c-13,0-23.2,3.2-27.1,5.2
-      l3.1,10.9c0,0,10-3.6,19.8-3.6c8.4,0,12.7,2.4,12.7,10.6v4.7h-12.7c-21.6,0-28,9.9-28,20.8c0,14.5,11.3,19.1,21.6,19.1
-      c12,0,18.9-5,19.8-5c0.7,0,3.1,2.6,14,2.6V19.3C221.7,5.5,213.1,0,198.5,0 M207.1,52.7c-3.1,1.2-10.7,3.7-16.2,3.7
-      c-6,0-10.6-2.1-10.6-8.7c0-5.7,3.1-9,11.4-9.3l15.4-0.6V52.7z M32.2,0C19.2,0,9,3.2,5.1,5.2l3.1,10.9c0,0,10-3.6,19.8-3.6
-      c8.4,0,12.7,2.4,12.7,10.6v4.7H28c-21.6,0-28,9.9-28,20.8c0,14.5,11.3,19.1,21.6,19.1c12,0,18.9-5,19.8-5c0.7,0,3.1,2.6,14,2.6
-      V19.3C55.4,5.5,46.8,0,32.2,0 M40.9,52.7c-3.1,1.2-10.7,3.7-16.2,3.7c-6,0-10.6-2.1-10.6-8.7c0-5.7,3.1-9,11.4-9.3l15.4-0.6V52.7z
-        M114,39c-0.4,0.9-0.8,2.7-1.1,3.8c-0.3-1-0.8-2.8-1.1-3.8L99,6.1C96.8,0.7,93.4,0,87.2,0c-2.2,0-6.6,0.3-6.6,0.3L74,66.9h14.6
-      l3.2-44.7l13.9,33.8c1,2.6,3.1,3.7,7.3,3.7c4.1,0,6.2-1,7.3-3.7L134,22.2l3.2,44.7h14.6l-6.6-66.6c0,0-4.4-0.3-6.6-0.3
-      c-6.2,0-9.6,0.7-11.8,6.1L114,39z M320.8,64.7c0,0,11.2,3.1,25.5,3.1c15.3,0,22.3-1.7,22.3-1.7V54.8c0,0-7.6,1.5-18.3,1.5
-      c-9.3,0-15.1-1.2-15.1-1.2v-16h28.9V27.8h-28.9V12.5c0,0,5.7-1,14.1-1c9.5,0,18.1,1.5,18.1,1.5V1.6c0,0-7.5-1.6-19.8-1.6
-      c-16.3,0-27,2.9-27,2.9V64.7z"
-        />
-      </g>
-    </svg>
-  `, standalone: true, styles: [":host{min-width:60px}:host svg{margin:10%}:host.icon-primary{fill:#005eb8}:host.icon-white{fill:#fff}\n"] }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dfProgressIndicator]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DfProgressIndicatorService }]; }, propDecorators: { dfProgressIndicator: [{
+                type: Input
+            }], dfProgressIndicatorConfig: [{
+                type: Input
+            }] } });
 
-class DfIconModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfIconModule, imports: [DfAmadeusIconComponent], exports: [DfAmadeusIconComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfIconModule }); }
+class DfProgressIndicatorModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorModule, imports: [DfDefaultSpinnerComponent,
+            DfProgressbarModule,
+            DfProgressIndicatorBackdropComponent,
+            DfProgressIndicatorContainerComponent,
+            DfProgressIndicatorDirective], exports: [DfProgressbarModule,
+            DfProgressIndicatorContainerComponent,
+            DfProgressIndicatorDirective,
+            DfProgressIndicatorBackdropComponent,
+            DfDefaultSpinnerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorModule, imports: [DfDefaultSpinnerComponent,
+            DfProgressbarModule, DfProgressbarModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfIconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [DfAmadeusIconComponent],
-                    exports: [DfAmadeusIconComponent]
+                    imports: [
+                        DfDefaultSpinnerComponent,
+                        DfProgressbarModule,
+                        DfProgressIndicatorBackdropComponent,
+                        DfProgressIndicatorContainerComponent,
+                        DfProgressIndicatorDirective
+                    ],
+                    exports: [
+                        DfProgressbarModule,
+                        DfProgressIndicatorContainerComponent,
+                        DfProgressIndicatorDirective,
+                        DfProgressIndicatorBackdropComponent,
+                        DfDefaultSpinnerComponent
+                    ]
                 }]
         }] });
 
@@ -1413,9 +1953,9 @@ const options = {
         return (passiveOptionAccessed = true);
     }
 };
-const noop$1 = () => { };
-w.addEventListener && w.addEventListener('p', noop$1, options);
-w.removeEventListener && w.removeEventListener('p', noop$1, false);
+const noop = () => { };
+w.addEventListener && w.addEventListener('p', noop, options);
+w.removeEventListener && w.removeEventListener('p', noop, false);
 const supportsPassiveEvents = passiveOptionAccessed;
 /**
  * Helper class to attach event listeners to DOM elements with debounce support using rxjs
@@ -3687,7 +4227,7 @@ class SliderComponent {
         return changeContext;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SliderComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: SliderComponent, isStandalone: true, selector: "ngx-slider", inputs: { value: "value", highValue: "highValue", options: "options", manualRefresh: "manualRefresh", triggerFocus: "triggerFocus" }, outputs: { valueChange: "valueChange", highValueChange: "highValueChange", userChangeStart: "userChangeStart", userChange: "userChange", userChangeEnd: "userChangeEnd" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.class", "class.vertical": "this.sliderElementVerticalClass", "class.animate": "this.sliderElementAnimateClass", "class.with-legend": "this.sliderElementWithLegendClass", "attr.disabled": "this.sliderElementDisabledAttr", "attr.aria-label": "this.sliderElementAriaLabel" } }, providers: [NGX_SLIDER_CONTROL_VALUE_ACCESSOR], queries: [{ propertyName: "tooltipTemplate", first: true, predicate: ["tooltipTemplate"], descendants: true }], viewQueries: [{ propertyName: "leftOuterSelectionBarElement", first: true, predicate: ["leftOuterSelectionBar"], descendants: true, read: SliderElementDirective }, { propertyName: "rightOuterSelectionBarElement", first: true, predicate: ["rightOuterSelectionBar"], descendants: true, read: SliderElementDirective }, { propertyName: "fullBarElement", first: true, predicate: ["fullBar"], descendants: true, read: SliderElementDirective }, { propertyName: "selectionBarElement", first: true, predicate: ["selectionBar"], descendants: true, read: SliderElementDirective }, { propertyName: "minHandleElement", first: true, predicate: ["minHandle"], descendants: true, read: SliderHandleDirective }, { propertyName: "maxHandleElement", first: true, predicate: ["maxHandle"], descendants: true, read: SliderHandleDirective }, { propertyName: "floorLabelElement", first: true, predicate: ["floorLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "ceilLabelElement", first: true, predicate: ["ceilLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "minHandleLabelElement", first: true, predicate: ["minHandleLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "maxHandleLabelElement", first: true, predicate: ["maxHandleLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "combinedLabelElement", first: true, predicate: ["combinedLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "ticksElement", first: true, predicate: ["ticksElement"], descendants: true, read: SliderElementDirective }], usesOnChanges: true, ngImport: i0, template: "<!-- // 0 Left selection bar outside two handles -->\n<span ngxSliderElement #leftOuterSelectionBar class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-left-out-selection\">\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 1 Right selection bar outside two handles -->\n<span ngxSliderElement #rightOuterSelectionBar class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-right-out-selection\">\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 2 The whole slider bar -->\n<span ngxSliderElement #fullBar [class.ngx-slider-transparent]=\"fullBarTransparentClass\" class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-full-bar\">\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 3 Selection bar between two handles -->\n<span ngxSliderElement #selectionBar [class.ngx-slider-draggable]=\"selectionBarDraggableClass\" class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-selection-bar\">\n  <span class=\"ngx-slider-span ngx-slider-bar ngx-slider-selection\" [ngStyle]=\"barStyle\"></span>\n</span>\n<!-- // 4 Low slider handle -->\n<span ngxSliderHandle #minHandle class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-min\" [ngStyle]=minPointerStyle></span>\n<!-- // 5 High slider handle -->\n<span ngxSliderHandle #maxHandle [style.display]=\"range ? 'inherit' : 'none'\" class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-max\" [ngStyle]=maxPointerStyle></span>\n<!-- // 6 Floor label -->\n<span ngxSliderLabel #floorLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-limit ngx-slider-floor\"></span>\n<!-- // 7 Ceiling label -->\n<span ngxSliderLabel #ceilLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-limit ngx-slider-ceil\"></span>\n<!-- // 8 Label above the low slider handle -->\n<span ngxSliderLabel #minHandleLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-model-value\"></span>\n<!-- // 9 Label above the high slider handle -->\n<span ngxSliderLabel #maxHandleLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-model-high\"></span>\n<!-- // 10 Combined range label when the slider handles are close ex. 15 - 17 -->\n<span ngxSliderLabel #combinedLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-combined\"></span>\n<!-- // 11 The ticks -->\n<span ngxSliderElement #ticksElement [hidden]=\"!showTicks\" [class.ngx-slider-ticks-values-under]=\"ticksUnderValuesClass\" class=\"ngx-slider-ticks\">\n  <span *ngFor=\"let t of ticks\" class=\"ngx-slider-tick\" [ngClass]=\"{'ngx-slider-selected': t.selected}\" [ngStyle]=\"t.style\">\n    <ngx-slider-tooltip-wrapper [template]=\"tooltipTemplate\" [tooltip]=\"t.tooltip\" [placement]=\"t.tooltipPlacement\"></ngx-slider-tooltip-wrapper>\n    <ngx-slider-tooltip-wrapper *ngIf=\"t.value !== null\" class=\"ngx-slider-span ngx-slider-tick-value\"\n        [template]=\"tooltipTemplate\" [tooltip]=\"t.valueTooltip\" [placement]=\"t.valueTooltipPlacement\" [content]=\"t.value\"></ngx-slider-tooltip-wrapper>\n    <span *ngIf=\"t.legend !== null\" class=\"ngx-slider-span ngx-slider-tick-legend\" [innerHTML]=\"t.legend\"></span>\n  </span>\n</span>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TooltipWrapperComponent, selector: "ngx-slider-tooltip-wrapper", inputs: ["template", "tooltip", "placement", "content"] }, { kind: "directive", type: SliderLabelDirective, selector: "[ngxSliderLabel]" }, { kind: "directive", type: SliderHandleDirective, selector: "[ngxSliderHandle]" }, { kind: "directive", type: SliderElementDirective, selector: "[ngxSliderElement]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: SliderComponent, isStandalone: true, selector: "ngx-slider", inputs: { value: "value", highValue: "highValue", options: "options", manualRefresh: "manualRefresh", triggerFocus: "triggerFocus" }, outputs: { valueChange: "valueChange", highValueChange: "highValueChange", userChangeStart: "userChangeStart", userChange: "userChange", userChangeEnd: "userChangeEnd" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.class", "class.vertical": "this.sliderElementVerticalClass", "class.animate": "this.sliderElementAnimateClass", "class.with-legend": "this.sliderElementWithLegendClass", "attr.disabled": "this.sliderElementDisabledAttr", "attr.aria-label": "this.sliderElementAriaLabel" } }, providers: [NGX_SLIDER_CONTROL_VALUE_ACCESSOR], queries: [{ propertyName: "tooltipTemplate", first: true, predicate: ["tooltipTemplate"], descendants: true }], viewQueries: [{ propertyName: "leftOuterSelectionBarElement", first: true, predicate: ["leftOuterSelectionBar"], descendants: true, read: SliderElementDirective }, { propertyName: "rightOuterSelectionBarElement", first: true, predicate: ["rightOuterSelectionBar"], descendants: true, read: SliderElementDirective }, { propertyName: "fullBarElement", first: true, predicate: ["fullBar"], descendants: true, read: SliderElementDirective }, { propertyName: "selectionBarElement", first: true, predicate: ["selectionBar"], descendants: true, read: SliderElementDirective }, { propertyName: "minHandleElement", first: true, predicate: ["minHandle"], descendants: true, read: SliderHandleDirective }, { propertyName: "maxHandleElement", first: true, predicate: ["maxHandle"], descendants: true, read: SliderHandleDirective }, { propertyName: "floorLabelElement", first: true, predicate: ["floorLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "ceilLabelElement", first: true, predicate: ["ceilLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "minHandleLabelElement", first: true, predicate: ["minHandleLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "maxHandleLabelElement", first: true, predicate: ["maxHandleLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "combinedLabelElement", first: true, predicate: ["combinedLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "ticksElement", first: true, predicate: ["ticksElement"], descendants: true, read: SliderElementDirective }], usesOnChanges: true, ngImport: i0, template: "<!-- // 0 Left selection bar outside two handles -->\n<span ngxSliderElement #leftOuterSelectionBar class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-left-out-selection\">\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 1 Right selection bar outside two handles -->\n<span ngxSliderElement #rightOuterSelectionBar class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-right-out-selection\">\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 2 The whole slider bar -->\n<span ngxSliderElement #fullBar [class.ngx-slider-transparent]=\"fullBarTransparentClass\" class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-full-bar\">\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 3 Selection bar between two handles -->\n<span ngxSliderElement #selectionBar [class.ngx-slider-draggable]=\"selectionBarDraggableClass\" class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-selection-bar\">\n  <span class=\"ngx-slider-span ngx-slider-bar ngx-slider-selection\" [ngStyle]=\"barStyle\"></span>\n</span>\n<!-- // 4 Low slider handle -->\n<span ngxSliderHandle #minHandle class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-min\" [ngStyle]=minPointerStyle></span>\n<!-- // 5 High slider handle -->\n<span ngxSliderHandle #maxHandle [style.display]=\"range ? 'inherit' : 'none'\" class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-max\" [ngStyle]=maxPointerStyle></span>\n<!-- // 6 Floor label -->\n<span ngxSliderLabel #floorLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-limit ngx-slider-floor\"></span>\n<!-- // 7 Ceiling label -->\n<span ngxSliderLabel #ceilLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-limit ngx-slider-ceil\"></span>\n<!-- // 8 Label above the low slider handle -->\n<span ngxSliderLabel #minHandleLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-model-value\"></span>\n<!-- // 9 Label above the high slider handle -->\n<span ngxSliderLabel #maxHandleLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-model-high\"></span>\n<!-- // 10 Combined range label when the slider handles are close ex. 15 - 17 -->\n<span ngxSliderLabel #combinedLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-combined\"></span>\n<!-- // 11 The ticks -->\n<span ngxSliderElement #ticksElement [hidden]=\"!showTicks\" [class.ngx-slider-ticks-values-under]=\"ticksUnderValuesClass\" class=\"ngx-slider-ticks\">\n  <span *ngFor=\"let t of ticks\" class=\"ngx-slider-tick\" [ngClass]=\"{'ngx-slider-selected': t.selected}\" [ngStyle]=\"t.style\">\n    <ngx-slider-tooltip-wrapper [template]=\"tooltipTemplate\" [tooltip]=\"t.tooltip\" [placement]=\"t.tooltipPlacement\"></ngx-slider-tooltip-wrapper>\n    <ngx-slider-tooltip-wrapper *ngIf=\"t.value !== null\" class=\"ngx-slider-span ngx-slider-tick-value\"\n        [template]=\"tooltipTemplate\" [tooltip]=\"t.valueTooltip\" [placement]=\"t.valueTooltipPlacement\" [content]=\"t.value\"></ngx-slider-tooltip-wrapper>\n    <span *ngIf=\"t.legend !== null\" class=\"ngx-slider-span ngx-slider-tick-legend\" [innerHTML]=\"t.legend\"></span>\n  </span>\n</span>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TooltipWrapperComponent, selector: "ngx-slider-tooltip-wrapper", inputs: ["template", "tooltip", "placement", "content"] }, { kind: "directive", type: SliderLabelDirective, selector: "[ngxSliderLabel]" }, { kind: "directive", type: SliderHandleDirective, selector: "[ngxSliderHandle]" }, { kind: "directive", type: SliderElementDirective, selector: "[ngxSliderElement]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
@@ -3795,49 +4335,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
                 }]
         }] });
 
-/**
- * My dfTooltipTruncate directive
- */
-class DfTooltipTruncateDirective {
-    constructor(tooltip, elementRef, renderer) {
-        this.tooltip = tooltip;
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-    }
-    ngOnInit() {
-        this.renderer.addClass(this.elementRef.nativeElement, 'text-truncate');
-    }
-    ngDoCheck() {
-        this.tooltip.disableTooltip = !this.hasOverflow(this.elementRef.nativeElement);
-    }
-    hasOverflow(element) {
-        return element?.offsetHeight < element?.scrollHeight || element?.offsetWidth < element?.scrollWidth;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfTooltipTruncateDirective, deps: [{ token: i1.NgbTooltip }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfTooltipTruncateDirective, isStandalone: true, selector: "[dfTooltipTruncate]", exportAs: ["dfTooltipTruncate"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfTooltipTruncateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    exportAs: 'dfTooltipTruncate',
-                    selector: '[dfTooltipTruncate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i1.NgbTooltip }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
-
-class DfTooltipModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfTooltipModule, imports: [DfTooltipTruncateDirective], exports: [DfTooltipTruncateDirective, NgbTooltipModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfTooltipModule, imports: [NgbTooltipModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfTooltipModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [DfTooltipTruncateDirective],
-                    exports: [DfTooltipTruncateDirective, NgbTooltipModule]
-                }]
-        }] });
-
 /**
  * A configuration service for the [DfSideNavService](#/components/sidenav/api#DfSideNavComponent) component.
  *
@@ -3899,561 +4396,278 @@ class DfSideNavService {
         this.subscription.unsubscribe();
     }
     /**
-     * Use this to init the list of Elements from your sidenav
-     *
-     *
-     * Second option withRouter is to be set to false if you are not passing link string for the angular Router
-     * Here we are not deep copying the array --> the function will change it
-     */
-    initItems(items, withRouter = true) {
-        this._items = items;
-        this.addNavItemType(withRouter);
-        this.setActiveItem(this._items);
-        this.dispatchSideNavItems();
-    }
-    /**
-     * Use this to inactivate the list of Elements from your sidenav
-     * isActive properties of all items will be set to false recursively
-     *
-     */
-    inactiveItems(list) {
-        list.forEach(item => {
-            item.isActive = false;
-            if (item.subMenus) {
-                this.inactiveItems(item.subMenus);
-            }
-        });
-        this.dispatchSideNavItems();
-    }
-    /**
-     * Use this to active the item pass as input
-     * This function inactivate all the other items of the service
-     * It will then dispatch the list of items of the sideNav to activeItem$
-     *
-     */
-    activeItem(item) {
-        this.inactiveItems(this._items);
-        item.isActive = true;
-        this._activeItem$.next(item);
-        this.dispatchSideNavItems();
-    }
-    /**
-     * Getter to know when to put/remove the overlay.
-     * `True` in case of overlay needed
-     *
-     */
-    get isAppOverlay$() {
-        return this._isAppOverlay$.asObservable();
-    }
-    /**
-     * Getter to know if the sidenav is in an overlay panel or not
-     * `True` in case of overlay panel
-     *
-     */
-    get isInMenuOverlay$() {
-        return this._isInMenuOverlay$.asObservable();
-    }
-    /**
-     * Getter to know the current activeItem a user clicked on
-     *
-     */
-    get activeItem$() {
-        return this._activeItem$.asObservable();
-    }
-    /**
-     * Getter to know if the sideNav is present in the page
-     * SideNav may be collapsed here or not
-     *
-     */
-    get isPresent$() {
-        return this._isPresent$.asObservable();
-    }
-    /**
-     * Future Options
-     */
-    get isMinimized$() {
-        return this._isMinmized$.asObservable();
-    }
-    /**
-     * Getter to know if the SideNav is collapsed or not
-     * If `true` the SideNav is collapsed
-     *
-     */
-    get isCollapsed$() {
-        return this._isCollapsed$.asObservable();
-    }
-    /**
-     * Getter of the SideNav Items after they have beens changed
-     *
-     */
-    get sideNavItems$() {
-        return this._sideNavItems$.asObservable();
-    }
-    /**
-     * Getter to know the mode Apply for the SideNav
-     * If `true` the SideNav can be in overlay (but not necessary is).
-     *
-     */
-    get isAppOverlayMode() {
-        return this._isAppOverlayMode;
-    }
-    // initItems must be used to push new items to the service
-    get items() {
-        return this._items;
-    }
-    /**
-     * Use this to toggle a SideNav Item (either from expand to collapse or the other way around).
-     * isCollapsed attribute of the input item is changed.
-     * All items are push again to the stream of items.
-     * This is used internally by the SideNav in case of click and Enter on an Item with subMenus
-     */
-    toggle(itemInput) {
-        itemInput.isCollapsed = !itemInput.isCollapsed;
-        this.dispatchSideNavItems();
-    }
-    /**
+     * Use this to init the list of Elements from your sidenav
      *
-     * @param itemInput
+     *
+     * Second option withRouter is to be set to false if you are not passing link string for the angular Router
+     * Here we are not deep copying the array --> the function will change it
      */
-    collapseItem(itemInput) {
-        this.collapse(itemInput, this._items);
+    initItems(items, withRouter = true) {
+        this._items = items;
+        this.addNavItemType(withRouter);
+        this.setActiveItem(this._items);
         this.dispatchSideNavItems();
     }
     /**
-     * Use this to collapseAll items
+     * Use this to inactivate the list of Elements from your sidenav
+     * isActive properties of all items will be set to false recursively
+     *
      */
-    collapseAllItems() {
-        this.collapseAll(this._items);
+    inactiveItems(list) {
+        list.forEach(item => {
+            item.isActive = false;
+            if (item.subMenus) {
+                this.inactiveItems(item.subMenus);
+            }
+        });
         this.dispatchSideNavItems();
     }
     /**
-     * Use this to set/unset the SideNav in an Overlay Menu
-     * If input is `True` then the SideNav will be in an Overlay Menu
-     * (when not collapsed)
+     * Use this to active the item pass as input
+     * This function inactivate all the other items of the service
+     * It will then dispatch the list of items of the sideNav to activeItem$
      *
      */
-    setInMenuSideNav(on) {
-        this._isInMenuOverlay$.next(on);
+    activeItem(item) {
+        this.inactiveItems(this._items);
+        item.isActive = true;
+        this._activeItem$.next(item);
+        this.dispatchSideNavItems();
     }
     /**
-     * Use this to collapse the SideNav
+     * Getter to know when to put/remove the overlay.
+     * `True` in case of overlay needed
      *
      */
-    hideSideNav() {
-        this._isCollapsed$.next(true);
+    get isAppOverlay$() {
+        return this._isAppOverlay$.asObservable();
     }
     /**
-     * Use this to make the SideNav visible (uncollapse)
+     * Getter to know if the sidenav is in an overlay panel or not
+     * `True` in case of overlay panel
      *
      */
-    showSideNav() {
-        this._isCollapsed$.next(false);
+    get isInMenuOverlay$() {
+        return this._isInMenuOverlay$.asObservable();
     }
     /**
-     * Use this to toggle the SideNav status collapse/visible
+     * Getter to know the current activeItem a user clicked on
      *
      */
-    toggleSideNav() {
-        this._isCollapsed$.next(!this._isCollapsed$.value);
-    }
-    // internal usage from the SideNav. Call when component is destroy
-    removeSideBar() {
-        this._isCollapsed$.next(false);
-        this._isPresent$.next(false);
+    get activeItem$() {
+        return this._activeItem$.asObservable();
     }
     /**
-     * Use this to set the App Overlay Mode
-     * Input `True` if you want to set the AppOverlay
-     * An event is send to isAppOverlay$ depending on your status
-     * if Input = `True` and isCollapsed = `False` then isAppOverlay$
-     * will be `True`
+     * Getter to know if the sideNav is present in the page
+     * SideNav may be collapsed here or not
      *
      */
-    setAppOverlayMode(on) {
-        this._isAppOverlayMode = on;
-        this.updateOverLay();
-    }
-    // Internal usage to the sidenav component
-    // Do not use
-    setSideNav() {
-        this._isPresent$.next(true);
+    get isPresent$() {
+        return this._isPresent$.asObservable();
     }
     /**
-     *
-     * @param itemInput
-     * @param itemsList
+     * Future Options
      */
-    collapse(itemInput, itemsList) {
-        for (const item of itemsList) {
-            if (item === itemInput && item.subMenus) {
-                item.isCollapsed = true;
-                return true; // propagate the collapse up
-            }
-            else if (item === itemInput) {
-                return true;
-            }
-            else if (item.subMenus) {
-                const needcol = this.collapse(itemInput, item.subMenus);
-                if (needcol) {
-                    item.isCollapsed = true; // collapse it
-                    return true; // propagate the collapse up
-                }
-            }
-        }
-        return false;
+    get isMinimized$() {
+        return this._isMinmized$.asObservable();
     }
     /**
+     * Getter to know if the SideNav is collapsed or not
+     * If `true` the SideNav is collapsed
      *
-     * @param itemsList
      */
-    collapseAll(itemsList) {
-        itemsList.forEach(item => {
-            if (item.subMenus) {
-                item.isCollapsed = true;
-                this.collapseAll(item.subMenus);
-            }
-        });
-    }
-    // Only one item at the time must be active
-    // Active flag in item is only valid for action button and link
-    // Router link does not use this active flag to work
-    // It is up to you to inactivateItems when needed when you mix actionButton and router link
-    // To avoid more than one active state visible
-    setActiveItem(items, foundAnActive = false) {
-        let foundActive = foundAnActive;
-        items.forEach(item => {
-            if (item.isActive && foundAnActive) {
-                throw Error('DfSideNavService must be init with only one isActive item');
-            }
-            else if (item.isActive) {
-                this._activeItem$.next(item);
-                foundActive = true;
-            }
-            if (item.subMenus) {
-                foundActive = this.setActiveItem(item.subMenus, foundActive);
-            }
-        });
-        return foundActive;
-    }
-    addNavItemType(withRouter, items = this._items) {
-        items.forEach(item => {
-            if (!item.type) {
-                if (item.subMenus) {
-                    item.type = DfNavItemType.subMenus;
-                }
-                else if (item.isExternal) {
-                    item.type = DfNavItemType.externalLink;
-                }
-                else if (withRouter) {
-                    item.type = DfNavItemType.routerLink;
-                }
-                else {
-                    item.type = DfNavItemType.actionButton;
-                }
-            }
-            if (item.subMenus) {
-                this.addNavItemType(withRouter, item.subMenus);
-            }
-        });
-    }
-    dispatchSideNavItems() {
-        this._sideNavItems$.next(this._items);
-    }
-    updateOverLay() {
-        this._isAppOverlay$.next(this.isAppOverlayMode && this._isCollapsed$.value === false);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavService, deps: [{ token: DfSideNavConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: DfSideNavConfig }]; } });
-
-// Default DF breakpoints
-const DF_BREAKPOINTS_VAR_DEFAULT = {
-    xs: '--df-breakpoint-xs',
-    sm: '--df-breakpoint-sm',
-    md: '--df-breakpoint-md',
-    lg: '--df-breakpoint-lg',
-    xl: '--df-breakpoint-xl',
-    xxl: '--df-breakpoint-xxl',
-    xxxl: '--df-breakpoint-xxxl'
-};
-const BREAKPOINTS_VARS = new InjectionToken('Bootstrap Breakpoints', {
-    providedIn: 'root',
-    factory() {
-        return DF_BREAKPOINTS_VAR_DEFAULT;
-    }
-});
-class DfBreakpoints {
-    constructor(_breakPointsVar, platformID) {
-        this._breakPointsVar = _breakPointsVar;
-        this.platformID = platformID;
-        this._breakPoints$ = new BehaviorSubject(null);
-        this.initBreakpoints();
-    }
-    get breakPoints$() {
-        return this._breakPoints$.asObservable();
-    }
-    initBreakpoints() {
-        let breakPoints = null;
-        if (isPlatformBrowser(this.platformID) && this._breakPoints$.value === null) {
-            // we are in a browser so CSS variable are accessible
-            // we init the BP only once
-            const styles = window.getComputedStyle(document.documentElement);
-            const bpArray = [];
-            for (const el of Object.keys(this._breakPointsVar)) {
-                const curValue = this._breakPointsVar[el];
-                const bpValue = Number.parseInt(styles.getPropertyValue(curValue), 10);
-                if (isNaN(bpValue)) {
-                    // We should never enter here. Only if people did not put the correct list of CSS vars...
-                    // Or if the CSS is not arrived yet.
-                    // What should we do then?
-                    // TODO init from the default list provided if we want to?
-                }
-                else {
-                    bpArray.push([el, bpValue]);
-                }
-            }
-            breakPoints = this.generate(bpArray);
-            // In case the first page contains the directive and the CSS vars are not available
-            // We may need to launch a second init at load time.
-            if (Object.keys(breakPoints).length === 0) {
-                fromEvent(window, 'load')
-                    .pipe(take(1))
-                    .subscribe(() => {
-                    // Init once as the service is available everywhere
-                    // We do not check if the CSS variable are changing over time
-                    // here onload the CSS var should be available
-                    this.initBreakpoints();
-                });
-            }
-        }
-        this._breakPoints$.next(breakPoints);
-    }
-    // Utilities to use if you want to create your own queries with your values.
-    // sizes is an array of array BreakPoints with sizes[0] --> identifier of the BreakPoint
-    // sizes[1] px value of the BreakPoint
-    generate(sizes) {
-        sizes = sizes.sort((a, b) => a[1] - b[1]);
-        const dict = {};
-        for (let i = 0; i < sizes.length; i++) {
-            const name = sizes[i][0];
-            const min = sizes[i][1];
-            const max = i === sizes.length - 1 ? undefined : sizes[i + 1][1];
-            if (min === 0) {
-                dict[name] = `(max-width: ${max - 0.01}px)`;
-            }
-            else if (max) {
-                dict[name] = `(max-width: ${max - 0.01}px) and (min-width: ${min}px)`;
-            }
-            else {
-                dict[name] = `(min-width: ${min}px)`;
-            }
-        }
-        return dict;
+    get isCollapsed$() {
+        return this._isCollapsed$.asObservable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfBreakpoints, deps: [{ token: BREAKPOINTS_VARS }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfBreakpoints, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfBreakpoints, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [BREAKPOINTS_VARS]
-                }] }, { type: Object, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }]; } });
-class DfMediaQuery {
-    constructor(platformId) {
-        this._isBrowser = isPlatformBrowser(platformId);
+    /**
+     * Getter of the SideNav Items after they have beens changed
+     *
+     */
+    get sideNavItems$() {
+        return this._sideNavItems$.asObservable();
     }
-    notSupported(query) {
-        return { matches: false, media: query, addEventListener: () => { }, removeEventListener: () => { } };
+    /**
+     * Getter to know the mode Apply for the SideNav
+     * If `true` the SideNav can be in overlay (but not necessary is).
+     *
+     */
+    get isAppOverlayMode() {
+        return this._isAppOverlayMode;
     }
-    matchMedia(query) {
-        if (this._isBrowser && window.matchMedia) {
-            return window.matchMedia(query);
-        }
-        else {
-            return this.notSupported(query);
-        }
+    // initItems must be used to push new items to the service
+    get items() {
+        return this._items;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaQuery, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaQuery, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaQuery, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: Object, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }]; } });
-class DfMediaObserver {
-    constructor(_mediaQuery) {
-        this._mediaQuery = _mediaQuery;
-        this._subscription = new Subscription();
-        this._queries = new Map();
+    /**
+     * Use this to toggle a SideNav Item (either from expand to collapse or the other way around).
+     * isCollapsed attribute of the input item is changed.
+     * All items are push again to the stream of items.
+     * This is used internally by the SideNav in case of click and Enter on an Item with subMenus
+     */
+    toggle(itemInput) {
+        itemInput.isCollapsed = !itemInput.isCollapsed;
+        this.dispatchSideNavItems();
     }
     /**
-     * Verifies if at least one of the provided media-queries is matching
-     * the current viewport
+     *
+     * @param itemInput
      */
-    matches(queries) {
-        queries = this._flattenQueries(Array.isArray(queries) ? queries : [queries]);
-        return queries.some(q => this._registerQuery(q).mediaQueryList.matches);
+    collapseItem(itemInput) {
+        this.collapse(itemInput, this._items);
+        this.dispatchSideNavItems();
     }
     /**
-     * Produces an observable for a set of media-queries that will emit
-     * meta information for any changes of the given queries.
-     * @param value One or more media-queries to be observed.
-     * @returns A stream of matches meta object for the given media-queries.
+     * Use this to collapseAll items
      */
-    observe(queries) {
-        queries = this._flattenQueries(Array.isArray(queries) ? queries : [queries]);
-        return combineLatest(queries.map(q => this._registerQuery(q).mediaQueryList$)).pipe(map((events) => events.reduce((result, event) => {
-            result.matches = result.matches || event.matches;
-            result.breakpoints[event.media] = event.matches;
-            return result;
-        }, { matches: false, breakpoints: {} })));
+    collapseAllItems() {
+        this.collapseAll(this._items);
+        this.dispatchSideNavItems();
     }
-    ngOnDestroy() {
-        this._subscription.unsubscribe();
+    /**
+     * Use this to set/unset the SideNav in an Overlay Menu
+     * If input is `True` then the SideNav will be in an Overlay Menu
+     * (when not collapsed)
+     *
+     */
+    setInMenuSideNav(on) {
+        this._isInMenuOverlay$.next(on);
     }
-    _flattenQueries(queries) {
-        return queries.map(q => q.split(',')).reduce((flat, a) => flat.concat(a));
+    /**
+     * Use this to collapse the SideNav
+     *
+     */
+    hideSideNav() {
+        this._isCollapsed$.next(true);
     }
-    _registerQuery(query) {
-        if (this._queries.has(query)) {
-            return this._queries.get(query);
-        }
-        const queryList = this._mediaQuery.matchMedia(query);
-        const queryList$ = new BehaviorSubject({
-            media: query,
-            matches: queryList.matches
-        });
-        this._subscription.add(fromEvent(queryList, 'change').subscribe((event) => {
-            queryList$.next(event);
-        }));
-        const meta = { mediaQueryList: queryList, mediaQueryList$: queryList$ };
-        this._queries.set(query, meta);
-        return meta;
+    /**
+     * Use this to make the SideNav visible (uncollapse)
+     *
+     */
+    showSideNav() {
+        this._isCollapsed$.next(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaObserver, deps: [{ token: DfMediaQuery }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaObserver, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaObserver, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: DfMediaQuery }]; } });
-
-/**
- * Services you can use to get indication about the current width screen of your application
- * the matchMedia JS feature (https://developer.mozilla.org/fr/docs/Web/API/Window/matchMedia)
- */
-class DfMedia {
-    constructor(mediaObserver, _breakPointsService) {
-        this.mediaObserver = mediaObserver;
-        this._breakPointsService = _breakPointsService;
+    /**
+     * Use this to toggle the SideNav status collapse/visible
+     *
+     */
+    toggleSideNav() {
+        this._isCollapsed$.next(!this._isCollapsed$.value);
     }
-    initQueries(mediaOrBreakpoints, breakPoints = {}) {
-        const queries = [];
-        if (Array.isArray(mediaOrBreakpoints)) {
-            for (const el of mediaOrBreakpoints) {
-                queries.push(breakPoints[el] ? breakPoints[el] : el);
-            }
-        }
-        else {
-            queries.push(breakPoints[mediaOrBreakpoints] ? breakPoints[mediaOrBreakpoints] : mediaOrBreakpoints);
-        }
-        return queries;
+    // internal usage from the SideNav. Call when component is destroy
+    removeSideBar() {
+        this._isCollapsed$.next(false);
+        this._isPresent$.next(false);
     }
     /**
-     * Getter to have the observable indication if you are or not in the current scope of your queries
-     * If one queries is matching result is `True` otherwise result is `False`
-     * @param mediaOrBreakpoints either media query string/Array of string or/and in case of BS usage a
-     * string/Array of string of the breakpoints name (sm...).
+     * Use this to set the App Overlay Mode
+     * Input `True` if you want to set the AppOverlay
+     * An event is send to isAppOverlay$ depending on your status
+     * if Input = `True` and isCollapsed = `False` then isAppOverlay$
+     * will be `True`
+     *
      */
-    getObservable(mediaOrBreakpoints) {
-        return this._breakPointsService.breakPoints$.pipe(map(breakpoints => {
-            return breakpoints ? this.initQueries(mediaOrBreakpoints, breakpoints) : this.initQueries(mediaOrBreakpoints);
-        }), switchMap(query => {
-            return this.mediaObserver.observe(query);
-        }), map(value => value.matches), distinctUntilChanged());
+    setAppOverlayMode(on) {
+        this._isAppOverlayMode = on;
+        this.updateOverLay();
+    }
+    // Internal usage to the sidenav component
+    // Do not use
+    setSideNav() {
+        this._isPresent$.next(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMedia, deps: [{ token: DfMediaObserver }, { token: DfBreakpoints }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMedia, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMedia, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: DfMediaObserver }, { type: DfBreakpoints }]; } });
-
-/**
- * Directive using the matchMedia JS feature (https://developer.mozilla.org/fr/docs/Web/API/Window/matchMedia)
- * to be able to add or remove an element like ngIf is doing.
- * Import DfMediaModule from DF to use all media elements provided
- */
-class DfIfMediaDirective {
     /**
-     * Input of the directive
-     * @param mediaOrBreakpoints either media query string/Array of string or in case of BS usage a
-     * string/Array of string of the breakpoints name (sm...).
+     *
+     * @param itemInput
+     * @param itemsList
      */
-    set dfIfMedia(mediaOrBreakpoints) {
-        this._subscription.add(this._mediaService.getObservable(mediaOrBreakpoints).subscribe((isValidated) => {
-            this.update(isValidated);
-        }));
+    collapse(itemInput, itemsList) {
+        for (const item of itemsList) {
+            if (item === itemInput && item.subMenus) {
+                item.isCollapsed = true;
+                return true; // propagate the collapse up
+            }
+            else if (item === itemInput) {
+                return true;
+            }
+            else if (item.subMenus) {
+                const needcol = this.collapse(itemInput, item.subMenus);
+                if (needcol) {
+                    item.isCollapsed = true; // collapse it
+                    return true; // propagate the collapse up
+                }
+            }
+        }
+        return false;
+    }
+    /**
+     *
+     * @param itemsList
+     */
+    collapseAll(itemsList) {
+        itemsList.forEach(item => {
+            if (item.subMenus) {
+                item.isCollapsed = true;
+                this.collapseAll(item.subMenus);
+            }
+        });
+    }
+    // Only one item at the time must be active
+    // Active flag in item is only valid for action button and link
+    // Router link does not use this active flag to work
+    // It is up to you to inactivateItems when needed when you mix actionButton and router link
+    // To avoid more than one active state visible
+    setActiveItem(items, foundAnActive = false) {
+        let foundActive = foundAnActive;
+        items.forEach(item => {
+            if (item.isActive && foundAnActive) {
+                throw Error('DfSideNavService must be init with only one isActive item');
+            }
+            else if (item.isActive) {
+                this._activeItem$.next(item);
+                foundActive = true;
+            }
+            if (item.subMenus) {
+                foundActive = this.setActiveItem(item.subMenus, foundActive);
+            }
+        });
+        return foundActive;
     }
-    constructor(_viewContainerRef, _template, _mediaService) {
-        this._viewContainerRef = _viewContainerRef;
-        this._template = _template;
-        this._mediaService = _mediaService;
-        this._viewInstance = null;
-        this._subscription = new Subscription();
+    addNavItemType(withRouter, items = this._items) {
+        items.forEach(item => {
+            if (!item.type) {
+                if (item.subMenus) {
+                    item.type = DfNavItemType.subMenus;
+                }
+                else if (item.isExternal) {
+                    item.type = DfNavItemType.externalLink;
+                }
+                else if (withRouter) {
+                    item.type = DfNavItemType.routerLink;
+                }
+                else {
+                    item.type = DfNavItemType.actionButton;
+                }
+            }
+            if (item.subMenus) {
+                this.addNavItemType(withRouter, item.subMenus);
+            }
+        });
     }
-    ngOnDestroy() {
-        if (this._viewInstance) {
-            this._viewContainerRef.clear();
-        }
-        this._subscription.unsubscribe();
+    dispatchSideNavItems() {
+        this._sideNavItems$.next(this._items);
     }
-    update(matches) {
-        if (matches && this._viewInstance === null) {
-            this._viewInstance = this._viewContainerRef.createEmbeddedView(this._template);
-        }
-        else if (!matches) {
-            this._viewContainerRef.clear();
-            this._viewInstance = null;
-        }
+    updateOverLay() {
+        this._isAppOverlay$.next(this.isAppOverlayMode && this._isCollapsed$.value === false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfIfMediaDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: DfMedia }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfIfMediaDirective, isStandalone: true, selector: "[dfIfMedia]", inputs: { dfIfMedia: "dfIfMedia" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfIfMediaDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[dfIfMedia]', standalone: true }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: DfMedia }]; }, propDecorators: { dfIfMedia: [{
-                type: Input
-            }] } });
-
-class DfMediaModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfMediaModule, imports: [DfIfMediaDirective], exports: [DfIfMediaDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavService, deps: [{ token: DfSideNavConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaModule, decorators: [{
-            type: NgModule,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavService, decorators: [{
+            type: Injectable,
             args: [{
-                    imports: [DfIfMediaDirective],
-                    exports: [DfIfMediaDirective]
+                    providedIn: 'root'
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: DfSideNavConfig }]; } });
 
 const environment = {
     animation: true,
@@ -4835,7 +5049,7 @@ class DfSideNavListComponent {
         return `df-sidenav-id-${uniqueId};`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DfSideNavListComponent, isStandalone: true, selector: "df-sidenavlist", inputs: { items: "items", tplIcon: "tplIcon", tplItem: "tplItem", currentItem: "currentItem", id: "id" }, ngImport: i0, template: "<ul class=\"df-sidenav-list\" [ngbCollapse]=\"currentItem?.isCollapsed ?? false\" [attr.id]=\"id\">\n  <li *ngFor=\"let item of items; let i = index\" [ngSwitch]=\"item.type\" dfManageSideNav>\n    <ng-container *ngSwitchCase=\"sideNavService.type.subMenus\">\n      <ng-template #subMenus>\n        <button\n          class=\"df-sidenav-item d-flex align-items-center\"\n          (click)=\"sideNavService.toggle(item)\"\n          type=\"button\"\n          [attr.aria-expanded]=\"!item.isCollapsed\"\n          [attr.aria-controls]=\"'sidenavControl' + controlledUniqueId.toString() + '-' + i\"\n          [class.df-sidenav-item-withicon]=\"item.icon\"\n        >\n          <ng-template\n            *ngIf=\"tplIcon && item.icon; else elseIcon\"\n            [ngTemplateOutlet]=\"tplIcon.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          ></ng-template>\n          <ng-template #elseIcon>\n            <span *ngIf=\"item.icon\" aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon\"></span>\n          </ng-template>\n          <span class=\"flex-grow-1 text-nowrap text-truncate\">{{ item.title }}</span>\n          <span\n            class=\"ms-3\"\n            [class.icon-chevron-down]=\"item.isCollapsed\"\n            [class.icon-chevron-up]=\"!item.isCollapsed\"\n          ></span>\n          <!-- put the chevron as icon directly in the menu -->\n          <!-- todo the icon and the minimized -->\n        </button>\n        <!-- we don't pass the icons as they are not suppose to have ones ??-->\n        <df-sidenavlist\n          [items]=\"item.subMenus ?? []\"\n          [tplItem]=\"tplItem\"\n          [currentItem]=\"item\"\n          [id]=\"'sidenavControl' + controlledUniqueId.toString() + '-' + i\"\n        ></df-sidenavlist>\n      </ng-template>\n      <ng-container *ngIf=\"!item.breakpoints; else elseSubMenus\">\n        <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n      </ng-container>\n      <ng-template #elseSubMenus>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-template #dfSideNavItemContent>\n      <ng-template\n        *ngIf=\"tplIcon && item.icon; else elseIcon\"\n        [ngTemplateOutlet]=\"tplIcon.templateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      ></ng-template>\n      <ng-template #elseIcon>\n        <span *ngIf=\"item.icon\" aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-5\"></span>\n      </ng-template>\n      <span class=\"flex-grow-1 text-nowrap text-truncate\">{{ item.title }}</span>\n    </ng-template>\n    <ng-container *ngSwitchCase=\"sideNavService.type.actionButton\">\n      <ng-template #dfSideNavItemButton>\n        <button\n          class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n          (click)=\"sideNavService.activeItem(item)\"\n          [class.active]=\"item.isActive\"\n        >\n          <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n        </button>\n      </ng-template>\n      <ng-container *ngIf=\"!item.breakpoints; else elseAction\">\n        <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n      </ng-container>\n      <ng-template #elseAction>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-template #dfRouterTemplate>\n      <a\n        class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n        routerLinkActive=\"active\"\n        routerLink=\"{{ item.value }}\"\n        ariaCurrentWhenActive=\"page\"\n      >\n        <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n      </a>\n    </ng-template>\n    <ng-container *ngSwitchCase=\"sideNavService.type.routerLink\">\n      <ng-container *ngIf=\"!item.breakpoints; else elseRouterLink\">\n        <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n      </ng-container>\n      <ng-template #elseRouterLink>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"sideNavService.type.separator\">\n      <ng-template #dfSeparatorTmp>\n        <hr class=\"spacing-01\" />\n      </ng-template>\n      <ng-container *ngIf=\"!item.breakpoints; else elseSeparator\">\n        <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n      </ng-container>\n      <ng-template #elseSeparator>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"sideNavService.type.template\">\n      <ng-template\n        *ngIf=\"tplItem\"\n        [ngTemplateOutlet]=\"tplItem.templateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      ></ng-template>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"sideNavService.type.title\">\n      <ng-template #dfTitleTmp>\n        <div class=\"df-sidenav-item df-sidenav-title d-flex align-items-center flex-grow-1\">\n          <span class=\"text-nowrap text-truncate text-uppercase text-muted\">{{ item.title }}</span>\n        </div>\n      </ng-template>\n      <ng-container *ngIf=\"!item.breakpoints; else elseTitle\">\n        <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n      </ng-container>\n      <ng-template #elseTitle>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <ng-template #dfLinkDefaultTmp>\n        <a\n          class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n          href=\"{{ item.value }}\"\n          [class.active]=\"item.isActive && item.type === sideNavService.type.link\"\n          [attr.target]=\"item.type === sideNavService.type.externalLink ? '_blank' : ''\"\n        >\n          <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n        </a>\n      </ng-template>\n      <ng-container *ngIf=\"!item.breakpoints; else elseDefault\">\n        <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n      </ng-container>\n      <ng-template #elseDefault>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n  </li>\n</ul>\n", dependencies: [{ kind: "component", type: DfSideNavListComponent, selector: "df-sidenavlist", inputs: ["items", "tplIcon", "tplItem", "currentItem", "id"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: NgbCollapseModule }, { kind: "directive", type: i1.NgbCollapse, selector: "[ngbCollapse]", inputs: ["animation", "ngbCollapse", "horizontal"], outputs: ["ngbCollapseChange", "shown", "hidden"], exportAs: ["ngbCollapse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: DfMediaModule }, { kind: "directive", type: DfIfMediaDirective, selector: "[dfIfMedia]", inputs: ["dfIfMedia"] }, { kind: "ngmodule", type: DfSideNavCollapseModule }, { kind: "directive", type: DfManageSideNavDirective, selector: "[dfManageSideNav]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DfSideNavListComponent, isStandalone: true, selector: "df-sidenavlist", inputs: { items: "items", tplIcon: "tplIcon", tplItem: "tplItem", currentItem: "currentItem", id: "id" }, ngImport: i0, template: "<ul class=\"df-sidenav-list\" [ngbCollapse]=\"currentItem?.isCollapsed ?? false\" [attr.id]=\"id\">\n  <li *ngFor=\"let item of items; let i = index\" [ngSwitch]=\"item.type\" dfManageSideNav>\n    <ng-container *ngSwitchCase=\"sideNavService.type.subMenus\">\n      <ng-template #subMenus>\n        <button\n          class=\"df-sidenav-item d-flex align-items-center\"\n          (click)=\"sideNavService.toggle(item)\"\n          type=\"button\"\n          [attr.aria-expanded]=\"!item.isCollapsed\"\n          [attr.aria-controls]=\"'sidenavControl' + controlledUniqueId.toString() + '-' + i\"\n          [class.df-sidenav-item-withicon]=\"item.icon\"\n        >\n          <ng-template\n            *ngIf=\"tplIcon && item.icon; else elseIcon\"\n            [ngTemplateOutlet]=\"tplIcon.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          ></ng-template>\n          <ng-template #elseIcon>\n            <span *ngIf=\"item.icon\" aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon\"></span>\n          </ng-template>\n          <span class=\"flex-grow-1 text-nowrap text-truncate\">{{ item.title }}</span>\n          <span\n            class=\"ms-3\"\n            [class.icon-chevron-down]=\"item.isCollapsed\"\n            [class.icon-chevron-up]=\"!item.isCollapsed\"\n          ></span>\n          <!-- put the chevron as icon directly in the menu -->\n          <!-- todo the icon and the minimized -->\n        </button>\n        <!-- we don't pass the icons as they are not suppose to have ones ??-->\n        <df-sidenavlist\n          [items]=\"item.subMenus ?? []\"\n          [tplItem]=\"tplItem\"\n          [currentItem]=\"item\"\n          [id]=\"'sidenavControl' + controlledUniqueId.toString() + '-' + i\"\n        ></df-sidenavlist>\n      </ng-template>\n      <ng-container *ngIf=\"!item.breakpoints; else elseSubMenus\">\n        <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n      </ng-container>\n      <ng-template #elseSubMenus>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-template #dfSideNavItemContent>\n      <ng-template\n        *ngIf=\"tplIcon && item.icon; else elseIcon\"\n        [ngTemplateOutlet]=\"tplIcon.templateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      ></ng-template>\n      <ng-template #elseIcon>\n        <span *ngIf=\"item.icon\" aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-5\"></span>\n      </ng-template>\n      <span class=\"flex-grow-1 text-nowrap text-truncate\">{{ item.title }}</span>\n    </ng-template>\n    <ng-container *ngSwitchCase=\"sideNavService.type.actionButton\">\n      <ng-template #dfSideNavItemButton>\n        <button\n          class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n          (click)=\"sideNavService.activeItem(item)\"\n          [class.active]=\"item.isActive\"\n        >\n          <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n        </button>\n      </ng-template>\n      <ng-container *ngIf=\"!item.breakpoints; else elseAction\">\n        <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n      </ng-container>\n      <ng-template #elseAction>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-template #dfRouterTemplate>\n      <a\n        class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n        routerLinkActive=\"active\"\n        routerLink=\"{{ item.value }}\"\n        ariaCurrentWhenActive=\"page\"\n      >\n        <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n      </a>\n    </ng-template>\n    <ng-container *ngSwitchCase=\"sideNavService.type.routerLink\">\n      <ng-container *ngIf=\"!item.breakpoints; else elseRouterLink\">\n        <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n      </ng-container>\n      <ng-template #elseRouterLink>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"sideNavService.type.separator\">\n      <ng-template #dfSeparatorTmp>\n        <hr class=\"spacing-01\" />\n      </ng-template>\n      <ng-container *ngIf=\"!item.breakpoints; else elseSeparator\">\n        <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n      </ng-container>\n      <ng-template #elseSeparator>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"sideNavService.type.template\">\n      <ng-template\n        *ngIf=\"tplItem\"\n        [ngTemplateOutlet]=\"tplItem.templateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      ></ng-template>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"sideNavService.type.title\">\n      <ng-template #dfTitleTmp>\n        <div class=\"df-sidenav-item df-sidenav-title d-flex align-items-center flex-grow-1\">\n          <span class=\"text-nowrap text-truncate text-uppercase text-muted\">{{ item.title }}</span>\n        </div>\n      </ng-template>\n      <ng-container *ngIf=\"!item.breakpoints; else elseTitle\">\n        <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n      </ng-container>\n      <ng-template #elseTitle>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <ng-template #dfLinkDefaultTmp>\n        <a\n          class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n          href=\"{{ item.value }}\"\n          [class.active]=\"item.isActive && item.type === sideNavService.type.link\"\n          [attr.target]=\"item.type === sideNavService.type.externalLink ? '_blank' : ''\"\n        >\n          <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n        </a>\n      </ng-template>\n      <ng-container *ngIf=\"!item.breakpoints; else elseDefault\">\n        <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n      </ng-container>\n      <ng-template #elseDefault>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n  </li>\n</ul>\n", dependencies: [{ kind: "component", type: DfSideNavListComponent, selector: "df-sidenavlist", inputs: ["items", "tplIcon", "tplItem", "currentItem", "id"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: NgbCollapseModule }, { kind: "directive", type: i1.NgbCollapse, selector: "[ngbCollapse]", inputs: ["animation", "ngbCollapse", "horizontal"], outputs: ["ngbCollapseChange", "shown", "hidden"], exportAs: ["ngbCollapse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: DfMediaModule }, { kind: "directive", type: DfIfMediaDirective, selector: "[dfIfMedia]", inputs: ["dfIfMedia"] }, { kind: "ngmodule", type: DfSideNavCollapseModule }, { kind: "directive", type: DfManageSideNavDirective, selector: "[dfManageSideNav]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavListComponent, decorators: [{
             type: Component,
@@ -4909,7 +5123,7 @@ class DfSideNavComponent {
         this.sideNavService.removeSideBar();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DfSideNavComponent, isStandalone: true, selector: "df-sidenav", host: { properties: { "class.df-sidenav-menu-overlay": "this.overlayClass", "class": "this.elements" } }, queries: [{ propertyName: "tplHeader", first: true, predicate: DfSideNavHeaderDirective, descendants: true }, { propertyName: "tplIcon", first: true, predicate: DfSideNavIconDirective, descendants: true }, { propertyName: "tplItem", first: true, predicate: DfSideNavItemDirective, descendants: true }], ngImport: i0, template: "<ng-template *ngIf=\"tplHeader\" [ngTemplateOutlet]=\"tplHeader.templateRef\"></ng-template>\n<df-sidenavlist [items]=\"(sideNavService.sideNavItems$ | async) ?? []\" [tplIcon]=\"tplIcon\" [tplItem]=\"tplItem\"></df-sidenavlist>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "component", type: DfSideNavListComponent, selector: "df-sidenavlist", inputs: ["items", "tplIcon", "tplItem", "currentItem", "id"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DfSideNavComponent, isStandalone: true, selector: "df-sidenav", host: { properties: { "class.df-sidenav-menu-overlay": "this.overlayClass", "class": "this.elements" } }, queries: [{ propertyName: "tplHeader", first: true, predicate: DfSideNavHeaderDirective, descendants: true }, { propertyName: "tplIcon", first: true, predicate: DfSideNavIconDirective, descendants: true }, { propertyName: "tplItem", first: true, predicate: DfSideNavItemDirective, descendants: true }], ngImport: i0, template: "<ng-template *ngIf=\"tplHeader\" [ngTemplateOutlet]=\"tplHeader.templateRef\"></ng-template>\n<df-sidenavlist [items]=\"(sideNavService.sideNavItems$ | async) ?? []\" [tplIcon]=\"tplIcon\" [tplItem]=\"tplItem\"></df-sidenavlist>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: DfSideNavListComponent, selector: "df-sidenavlist", inputs: ["items", "tplIcon", "tplItem", "currentItem", "id"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavComponent, decorators: [{
             type: Component,
@@ -4983,598 +5197,835 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
                 type: Input
             }] } });
 
-class DfSideNavModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavModule, imports: [DfManageSideNavDirective,
-            DfSideNavComponent,
-            DfSideNavHeaderDirective,
-            DfExcludeTrapDirective,
-            DfSideNavIconDirective,
-            DfSideNavItemDirective], exports: [DfManageSideNavDirective,
-            DfSideNavComponent,
-            DfSideNavHeaderDirective,
-            DfExcludeTrapDirective,
-            DfSideNavIconDirective,
-            DfSideNavItemDirective,
-            DfSideNavCollapseModule,
-            DfMediaModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavModule, imports: [DfSideNavComponent, DfSideNavCollapseModule,
-            DfMediaModule] }); }
+const DF_SELECT_CLASS = 'df-ym';
+
+class DfManageNavSelectDirective {
+    constructor(select, element, rtlDirectionService, renderer) {
+        this.select = select;
+        this.element = element;
+        this.rtlDirectionService = rtlDirectionService;
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+        this.direction = this.rtlDirectionService.getPageDirection(this.element);
+    }
+    handleKeyDown(event) {
+        if (this.direction === RightToLeftDirectionEnum.LeftToRight) {
+            this.arrowLeftInnerHandler(event);
+        }
+        else {
+            this.arrowRightInnerHandler(event);
+        }
+    }
+    handleKeyDownBackspace(event) {
+        // Clear on backspace is already handled by ng select when clearable is true
+        if (!this.select.clearable && !this.select.searchTerm) {
+            const listBadge = this.element.nativeElement.querySelectorAll(`.${DF_SELECT_CLASS}`);
+            if (listBadge.length > 0) {
+                listBadge[listBadge.length - 1].click();
+            }
+        }
+    }
+    handleKeyDownRight(event) {
+        if (this.direction === RightToLeftDirectionEnum.LeftToRight) {
+            this.arrowRightInnerHandler(event);
+        }
+        else {
+            this.arrowLeftInnerHandler(event);
+        }
+    }
+    arrowRightInnerHandler(event) {
+        const listBadge = this.element.nativeElement.querySelectorAll(`.${DF_SELECT_CLASS}`);
+        const currentPos = Array.prototype.indexOf.call(listBadge, document.activeElement);
+        // Test if the focus is in the list (otherwise it is in the input and we do nothing)
+        if (currentPos !== -1) {
+            if (currentPos === listBadge.length - 1) {
+                this.select.focus();
+            }
+            else {
+                (listBadge[currentPos + 1] || document.activeElement).focus();
+            }
+        }
+        else if (event.target.selectionStart === event.target.selectionEnd &&
+            event.target.nodeName === 'INPUT' &&
+            event.target.selectionStart === event.target.value.length) {
+            const clearEl = this.element.nativeElement.querySelector('.ng-clear-wrapper') ||
+                this.element.nativeElement.querySelector('.ng-clear');
+            if (clearEl) {
+                // Event if it can be added multiple time it is not an issue I think.
+                this.renderer.listen(clearEl, 'keydown.Enter', (e) => {
+                    e.stopPropagation(); // kill the event to forbid default ng-select behavior (open the dropdown)
+                    this.select.handleClearClick();
+                });
+                clearEl.setAttribute('tabindex', '1'); // To be able to focus the element in chrome
+                clearEl.focus();
+            }
+        }
+    }
+    arrowLeftInnerHandler(event) {
+        const listBadge = this.element.nativeElement.querySelectorAll(`.${DF_SELECT_CLASS}`);
+        if (event.target.selectionStart === event.target.selectionEnd &&
+            event.target.selectionStart === 0 &&
+            event.target.nodeName === 'INPUT') {
+            if (listBadge.length > 0) {
+                listBadge[listBadge.length - 1].focus();
+            }
+        }
+        else if (event.target.classList.contains('ng-clear-wrapper') || event.target.classList.contains('ng-clear')) {
+            this.select.focus();
+        }
+        else {
+            const currentPos = Array.prototype.indexOf.call(listBadge, document.activeElement);
+            (listBadge[currentPos - 1] || document.activeElement).focus();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfManageNavSelectDirective, deps: [{ token: i1$2.NgSelectComponent, host: true }, { token: i0.ElementRef }, { token: DfDirectionDetectionService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfManageNavSelectDirective, isStandalone: true, selector: "[dfManageNavSelect]", host: { listeners: { "keydown.arrowLeft": "handleKeyDown($event)", "keydown.Backspace": "handleKeyDownBackspace($event)", "keydown.arrowRight": "handleKeyDownRight($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavModule, decorators: [{
-            type: NgModule,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfManageNavSelectDirective, decorators: [{
+            type: Directive,
             args: [{
-                    imports: [
-                        DfManageSideNavDirective,
-                        DfSideNavComponent,
-                        DfSideNavHeaderDirective,
-                        DfExcludeTrapDirective,
-                        DfSideNavIconDirective,
-                        DfSideNavItemDirective
-                    ],
-                    exports: [
-                        DfManageSideNavDirective,
-                        DfSideNavComponent,
-                        DfSideNavHeaderDirective,
-                        DfExcludeTrapDirective,
-                        DfSideNavIconDirective,
-                        DfSideNavItemDirective,
-                        DfSideNavCollapseModule,
-                        DfMediaModule
-                    ]
+                    selector: '[dfManageNavSelect]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.NgSelectComponent, decorators: [{
+                    type: Host
+                }] }, { type: i0.ElementRef }, { type: DfDirectionDetectionService }, { type: i0.Renderer2 }]; }, propDecorators: { handleKeyDown: [{
+                type: HostListener,
+                args: ['keydown.arrowLeft', ['$event']]
+            }], handleKeyDownBackspace: [{
+                type: HostListener,
+                args: ['keydown.Backspace', ['$event']]
+            }], handleKeyDownRight: [{
+                type: HostListener,
+                args: ['keydown.arrowRight', ['$event']]
+            }] } });
+
+// Copy of https://github.com/ng-select/ng-select/blob/master/src/ng-option-highlight/lib/ng-option-highlight.directive.ts
+class DfOptionHighlightDirective {
+    constructor(elementRef, renderer) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.element = this.elementRef.nativeElement;
+    }
+    ngOnChanges() {
+        if (this.canHighlight) {
+            this.highlightLabel();
+        }
+        else if (this.label) { // unhighlight if there was some
+            this.setInnerHtml(this.label);
+        }
+    }
+    ngAfterViewInit() {
+        this.label = this.element.innerHTML;
+        if (this.canHighlight) {
+            this.highlightLabel();
+        }
+    }
+    escapeRegExp(str) {
+        return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+    highlightLabel() {
+        const label = this.label;
+        if (!this.term) {
+            this.setInnerHtml(label);
+            return;
+        }
+        const alternationString = this.escapeRegExp(this.term).replace(' ', '|');
+        const termRegex = new RegExp(alternationString, 'gi');
+        this.setInnerHtml(label.replace(termRegex, `<span class=\"highlighted\">$&</span>`));
+    }
+    get canHighlight() {
+        return this.isDefined(this.term) && this.isDefined(this.label);
+    }
+    setInnerHtml(html) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', html);
+    }
+    isDefined(value) {
+        return value !== undefined && value !== null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfOptionHighlightDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfOptionHighlightDirective, isStandalone: true, selector: "[dfOptionHighlight]", inputs: { term: ["dfOptionHighlight", "term"] }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfOptionHighlightDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dfOptionHighlight]',
+                    standalone: true
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { term: [{
+                type: Input,
+                args: ['dfOptionHighlight']
+            }] } });
 
-class DfManageCardSelectionDirective {
-    set dfManageCardSelected(isSelected) {
-        const selectedClass = 'df-card-selected';
-        if (isSelected === true) {
-            this.renderer.addClass(this.element.nativeElement, selectedClass);
-        }
-        else {
-            this.renderer.removeClass(this.element.nativeElement, selectedClass);
-        }
-    }
-    constructor(element, renderer) {
-        this.element = element;
+// Put to avoid opening of the select after removal. See why in file:
+// https://github.com/ng-select/ng-select/blob/57c6671a972d23beddcca2b6acc9418544c17a2e/src/ng-select/ng-select.component.ts#L307
+const NG_SELECT_CLASS_IDENTIFIER = 'ng-value-icon';
+class DfManageBadgeEventsDirective {
+    constructor(renderer, element) {
         this.renderer = renderer;
+        this.element = element;
+        this.tabindex = '-1';
+        this.renderer.addClass(this.element.nativeElement, DF_SELECT_CLASS);
+        this.renderer.addClass(this.element.nativeElement, NG_SELECT_CLASS_IDENTIFIER);
     }
     ngAfterViewInit() {
-        this.input = this.element.nativeElement.querySelector('.form-check-input');
-        this.renderer.setAttribute(this.input, 'tabIndex', '-1');
+        const childs = this.element.nativeElement.children;
+        const map = Array.from(childs);
+        map.forEach((element) => {
+            this.renderer.addClass(element, NG_SELECT_CLASS_IDENTIFIER);
+        });
     }
-    click(event) {
-        const target = event.target;
-        // If the input or the label is clicked then the selection is already made
-        // The card must have only one input
-        if (!(target.classList.contains('form-check-input') || target.classList.contains('form-check-label'))) {
-            this.input.click();
-        }
-        else {
-            this.element.nativeElement.focus();
-        }
+    handleKeyDownBackspace(event) {
+        this.dfManageBadgeEventsSelect[0](this.dfManageBadgeEventsSelect[1]);
+        event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfManageCardSelectionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfManageCardSelectionDirective, isStandalone: true, selector: "[dfManageCardSelected]", inputs: { dfManageCardSelected: "dfManageCardSelected" }, host: { listeners: { "click": "click($event)" } }, ngImport: i0 }); }
+    handleClick(event) {
+        this.dfManageBadgeEventsSelect[0](this.dfManageBadgeEventsSelect[1]);
+        event.stopPropagation();
+    }
+    handleKeyDownEnter(event) {
+        this.dfManageBadgeEventsSelect[0](this.dfManageBadgeEventsSelect[1]);
+        event.stopPropagation();
+    }
+    handleKeyDownDelete(event) {
+        this.dfManageBadgeEventsSelect[0](this.dfManageBadgeEventsSelect[1]);
+        event.stopPropagation();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfManageBadgeEventsDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfManageBadgeEventsDirective, isStandalone: true, selector: "[dfManageBadgeEventsSelect]", inputs: { dfManageBadgeEventsSelect: "dfManageBadgeEventsSelect" }, host: { listeners: { "keydown.Backspace": "handleKeyDownBackspace($event)", "click": "handleClick($event)", "keydown.Enter": "handleKeyDownEnter($event)", "keydown.Delete": "handleKeyDownDelete($event)" }, properties: { "attr.tabindex": "this.tabindex" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfManageCardSelectionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfManageBadgeEventsDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dfManageCardSelected]',
+                    selector: '[dfManageBadgeEventsSelect]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { dfManageCardSelected: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { dfManageBadgeEventsSelect: [{
                 type: Input
-            }], click: [{
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], handleKeyDownBackspace: [{
+                type: HostListener,
+                args: ['keydown.Backspace', ['$event']]
+            }], handleClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
+            }], handleKeyDownEnter: [{
+                type: HostListener,
+                args: ['keydown.Enter', ['$event']]
+            }], handleKeyDownDelete: [{
+                type: HostListener,
+                args: ['keydown.Delete', ['$event']]
             }] } });
 
-class DfAdvancedCardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAdvancedCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfAdvancedCardModule, imports: [DfManageCardSelectionDirective], exports: [DfManageCardSelectionDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAdvancedCardModule }); }
+class DfSelectModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfSelectModule, imports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective], exports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective, NgSelectModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSelectModule, imports: [NgSelectModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAdvancedCardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSelectModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [DfManageCardSelectionDirective],
-                    exports: [DfManageCardSelectionDirective]
+                    imports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective],
+                    exports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective, NgSelectModule]
                 }]
         }] });
 
-var DfProgressIndicatorContentType;
-(function (DfProgressIndicatorContentType) {
-    DfProgressIndicatorContentType["SPINNER"] = "spinner";
-    DfProgressIndicatorContentType["PROGRESSBAR"] = "progressbar";
-})(DfProgressIndicatorContentType || (DfProgressIndicatorContentType = {}));
-class DfProgressIndicatorContentSpinner {
-    constructor(spinnerInput) {
-        this.type = DfProgressIndicatorContentType.SPINNER;
-        this.spinnerInput = spinnerInput;
+class DfStepperService {
+    constructor() {
+        this.setFocus = false;
+        this._stepperState$ = new BehaviorSubject({
+            steps: [],
+            active: 0,
+            isLinear: false,
+            isInline: false,
+            isVertical: false
+        });
+        this._state = {
+            steps: [],
+            active: 0,
+            isLinear: false,
+            isInline: false,
+            isVertical: false
+        };
+        this._completedLabel = 'Completed';
+        this._warningLabel = 'Warning';
+        this._stepperAriaLabel = 'Stepper';
     }
-}
-class DfProgressIndicatorContentProgressBar {
-    constructor(progressBarInput, position) {
-        this.type = DfProgressIndicatorContentType.PROGRESSBAR;
-        this.progressBarInput = progressBarInput;
-        this.position = position || DfProgressIndicatorContentPosition.TOP;
+    get stepperState$() {
+        return this._stepperState$.asObservable();
     }
-}
-var DfProgressIndicatorContentPosition;
-(function (DfProgressIndicatorContentPosition) {
-    DfProgressIndicatorContentPosition["TOP"] = "top";
-    DfProgressIndicatorContentPosition["BOTTOM"] = "bottom";
-    DfProgressIndicatorContentPosition["CENTERED"] = "centered";
-})(DfProgressIndicatorContentPosition || (DfProgressIndicatorContentPosition = {}));
-
-class DfProgressIndicatorContainerComponent {
-    constructor() {
-        this.DEFAULT_CLASS_POSITION = 'df-progressindicator-centered';
-        this.positionClass = this.DEFAULT_CLASS_POSITION;
+    // initState must be used to push new Steps to the service
+    get state() {
+        return this._state;
     }
-    get classes() {
-        return `df-progressindicator-container ${this.containerClass || ''} ${this.positionClass}`;
+    dispatchStepperState() {
+        this._stepperState$.next(this._state);
     }
-    set position(newPosition) {
-        switch (newPosition) {
-            case DfProgressIndicatorContentPosition.TOP:
-                this.positionClass = 'df-progressindicator-top';
-                break;
-            case DfProgressIndicatorContentPosition.BOTTOM:
-                this.positionClass = 'df-progressindicator-bottom';
-                break;
-            default:
-                this.positionClass = this.DEFAULT_CLASS_POSITION;
-        }
-        this._position = newPosition;
+    updateStepperState() {
+        this._state = this.normalizeState(this._state);
+        this.dispatchStepperState();
     }
-    get position() {
-        return this._position;
+    // API
+    /**
+     * Use this to init the list of Elements from your stepper
+     *
+     * Here we are not deep copying the array --> the function will change it
+     */
+    initStepperState(state) {
+        // normalize the steps here
+        this._state = this.normalizeState(state);
+        this.dispatchStepperState();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DfProgressIndicatorContainerComponent, isStandalone: true, selector: "df-progressindicator-container", inputs: { containerClass: "containerClass", position: "position" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: `
-    <ng-content></ng-content>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorContainerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'df-progressindicator-container',
-                    encapsulation: ViewEncapsulation.None,
-                    template: `
-    <ng-content></ng-content>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
-                }]
-        }], propDecorators: { classes: [{
-                type: HostBinding,
-                args: ['class']
-            }], containerClass: [{
-                type: Input
-            }], position: [{
-                type: Input
-            }] } });
-
-class DfDefaultSpinnerComponent {
-    constructor() {
-        this.isGlobalSpinner = false;
-        this.contentClass = 'spinner-border text-primary';
+    /**
+     * Use this to normalize the state of the stepper (completed, warning, current, future)
+     * @param state
+     * @returns
+     */
+    normalizeState(state) {
+        const stepsList = [];
+        for (let i = 0; i < state.steps.length; i++) {
+            if (state.steps[i].warning) {
+                stepsList.push({ ...state.steps[i], type: 'warning' });
+            }
+            else if (i === state.active) {
+                stepsList.push({ ...state.steps[i], type: 'current' });
+            }
+            else if (state.steps[i].completed) {
+                stepsList.push({ ...state.steps[i], type: 'completed' });
+            }
+            else {
+                stepsList.push({ ...state.steps[i], type: 'future' });
+            }
+        }
+        return { ...state, steps: stepsList };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfDefaultSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DfDefaultSpinnerComponent, isStandalone: true, selector: "df-default-spinner", inputs: { isGlobalSpinner: "isGlobalSpinner", contentClass: "contentClass", ariaLabel: "ariaLabel" }, ngImport: i0, template: "<div [ngClass]=\"contentClass\" [attr.role]=\"isGlobalSpinner ? 'alert' : 'status'\">\n  <span class=\"visually-hidden\">\n    <ng-container *ngIf=\"ariaLabel; else defaultAriaLabel\">{{ ariaLabel }}</ng-container>\n  </span>\n</div>\n\n<ng-template #defaultAriaLabel>\n  <ng-container i18n=\"@@df.progressindicator.default.spinner.ariaLabel\">Loading...</ng-container>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfDefaultSpinnerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'df-default-spinner', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div [ngClass]=\"contentClass\" [attr.role]=\"isGlobalSpinner ? 'alert' : 'status'\">\n  <span class=\"visually-hidden\">\n    <ng-container *ngIf=\"ariaLabel; else defaultAriaLabel\">{{ ariaLabel }}</ng-container>\n  </span>\n</div>\n\n<ng-template #defaultAriaLabel>\n  <ng-container i18n=\"@@df.progressindicator.default.spinner.ariaLabel\">Loading...</ng-container>\n</ng-template>\n" }]
-        }], propDecorators: { isGlobalSpinner: [{
-                type: Input
-            }], contentClass: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }] } });
-
-class DfProgressIndicatorBackdropComponent {
-    constructor() {
-        this.isGlobalBackdrop = true;
+    /**
+     * Internal to get the stepper aria label in the template
+     */
+    get stepperAriaLabel() {
+        return this._stepperAriaLabel;
     }
-    get classes() {
-        return `df-progressindicator-backdrop ${this.backdropClass || ''} ${this.isGlobalBackdrop ? 'df-progressindicator-backdrop-global' : 'df-progressindicator-backdrop-contextual'}`;
+    /**
+     * Use this to set the stepper aria label (i18n)
+     */
+    set stepperAriaLabel(label) {
+        this._stepperAriaLabel = label;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DfProgressIndicatorBackdropComponent, isStandalone: true, selector: "df-progressindicator-backdrop", inputs: { backdropClass: "backdropClass", isGlobalBackdrop: "isGlobalBackdrop" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorBackdropComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'df-progressindicator-backdrop',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
-                }]
-        }], propDecorators: { classes: [{
-                type: HostBinding,
-                args: ['class']
-            }], backdropClass: [{
-                type: Input
-            }], isGlobalBackdrop: [{
-                type: Input
-            }] } });
-
-class DfProgressIndicatorRef {
-    constructor(containerRef, contentRef, backdropRef) {
-        this.containerRef = containerRef;
-        this.contentRef = contentRef;
-        this.backdropRef = backdropRef;
+    /**
+     * Internal to get the completed label in the template
+     */
+    get completedLabel() {
+        return this._completedLabel;
     }
-}
-
-const noop = () => { };
-/**
- * Utility to handle the scrollbar.
- *
- * It allows to compensate the lack of a vertical scrollbar by adding an
- * equivalent padding on the right of the body, and to remove this compensation.
- *
- * It is a copy of https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/util/scrollbar.ts
- */
-class ScrollBar {
-    constructor(_document) {
-        this._document = _document;
+    /**
+     * Internal to get the waring label in the template
+     */
+    get warningLabel() {
+        return this._warningLabel;
     }
     /**
-     * To be called right before a potential vertical scrollbar would be removed:
-     *
-     * - if there was a scrollbar, adds some compensation padding to the body
-     * to keep the same layout as when the scrollbar is there
-     * - if there was none, there is nothing to do
-     *
-     * @return a callback used to revert the compensation (noop if there was none,
-     * otherwise a function removing the padding)
+     * Use this to set the completed label (i18n)
      */
-    compensate() {
-        const width = this._getWidth();
-        return !this._isPresent(width) ? noop : this._adjustBody(width);
+    set completedLabel(label) {
+        this._completedLabel = label;
     }
     /**
-     * Adds a padding of the given width on the right of the body.
-     *
-     * @return a callback used to revert the padding to its previous value
+     * Use this to set the warning label (i18n)
      */
-    _adjustBody(scrollbarWidth) {
-        const body = this._document.body;
-        const userSetPaddingStyle = body.style.paddingRight;
-        const paddingRight = 'padding-right';
-        const actualPadding = parseFloat(window.getComputedStyle(body)[paddingRight]);
-        body.style[paddingRight] = `${actualPadding + scrollbarWidth}px`;
-        return () => (body.style[paddingRight] = userSetPaddingStyle);
+    set warningLabel(label) {
+        this._warningLabel = label;
     }
     /**
-     * Tells whether a scrollbar is currently present on the body.
-     *
-     * @return true if scrollbar is present, false otherwise
+     * TODO make it customizable
+     * @param index - index of the step
+     * @returns - string of the step number to display
      */
-    _isPresent(scrollbarWidth) {
-        const rect = this._document.body.getBoundingClientRect();
-        const bodyToViewportGap = window.innerWidth - (rect.left + rect.right);
-        const uncertainty = 0.1 * scrollbarWidth;
-        return bodyToViewportGap >= scrollbarWidth - uncertainty;
+    getStepNumberLabel(index) {
+        return `${index + 1}`;
+    }
+    resetFocus() {
+        this.setFocus = false;
     }
     /**
-     * Calculates and returns the width of a scrollbar.
      *
-     * @return the width of a scrollbar on this page
+     * @param isLinear - true if the stepper is linear
      */
-    _getWidth() {
-        const measurer = this._document.createElement('div');
-        measurer.className = 'modal-scrollbar-measure';
-        const body = this._document.body;
-        body.appendChild(measurer);
-        const width = measurer.getBoundingClientRect().width - measurer.clientWidth;
-        body.removeChild(measurer);
-        return width;
+    setLinear(isLinear) {
+        this._state.isLinear = isLinear;
+        this.dispatchStepperState();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ScrollBar, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ScrollBar, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ScrollBar, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }]; } });
-
-class DfProgressIndicatorService {
-    constructor(document, rendererFactory, componentFactoryResolver, appRef, injector, scrollbar) {
-        this.document = document;
-        this.rendererFactory = rendererFactory;
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.appRef = appRef;
-        this.injector = injector;
-        this.scrollbar = scrollbar;
-        this.BODY_CLASS = 'df-progressindicator-open';
-        // TODO - Remove it when https://github.com/angular/angular/issues/22567
-        this.containerAttributes = ['containerClass', 'position'];
-        this.backdropAttributes = ['backdropClass', 'isGlobalBackdrop'];
-        this.defaultSpinnerAttributes = ['contentClass', 'ariaLabel', 'isGlobalSpinner'];
-        this.defaultProgressBarAttributes = ['infiniteAnimation', 'ariaLabel'];
-        this.activeInstances = [];
-        this.renderer = this.rendererFactory.createRenderer(null, null);
+    /**
+     *
+     * @param isInline - true if the stepper is inline
+     */
+    setInline(isInline) {
+        this._state.isInline = isInline;
+        this.dispatchStepperState();
     }
-    open(content, options) {
-        const containerElt = this.getContainer(this.document, options);
-        if (!containerElt) {
-            throw new Error(`[Design Factory] The specified progress indicator container "${options?.container ||
-                'body'}" was not found in the DOM.`);
-        }
-        // Create needed components
-        const backdropRef = options?.backdrop !== false
-            ? this.createComponent(DfProgressIndicatorBackdropComponent, this.componentFactoryResolver, undefined, containerElt)
-            : undefined;
-        const contentRef = this.getContent(content, this.componentFactoryResolver, containerElt);
-        const containerCmpRef = this.createComponent(DfProgressIndicatorContainerComponent, this.componentFactoryResolver, contentRef, containerElt);
-        const onDestroyOperations = [];
-        // Add aria attributes on the container
-        this.renderer.setAttribute(containerElt, 'aria-busy', 'true');
-        onDestroyOperations.push(() => {
-            this.renderer.removeAttribute(containerElt, 'aria-busy');
-        });
-        // Override some styles if body is the container
-        if (containerElt === this.document.body) {
-            const scrollCompensation = this.scrollbar.compensate();
-            this.renderer.addClass(this.document.body, this.BODY_CLASS);
-            this.renderer.setAttribute(this.document.body, 'aria-busy', 'true');
-            onDestroyOperations.push(() => {
-                scrollCompensation();
-                this.renderer.removeClass(this.document.body, this.BODY_CLASS);
-            });
-        }
-        if (onDestroyOperations.length > 0) {
-            containerCmpRef.onDestroy(() => {
-                onDestroyOperations.forEach(operation => {
-                    operation();
-                });
-            });
-        }
-        // Force override of position in case of the use of a progress bar component
-        if (content instanceof DfProgressIndicatorContentProgressBar) {
-            options = {
-                ...options,
-                position: content.position
-            };
+    /**
+     *
+     * @param index - index of the step to select start at 0
+     */
+    selectStep(index) {
+        if (index < 0 || index >= this._state.steps.length) {
+            return;
         }
-        // Apply options to the created components
-        if (backdropRef) {
-            this.applyOptions(backdropRef, this.backdropAttributes, { ...options, isGlobalBackdrop: containerElt === this.document.body });
+        this._state.active = index;
+        this.updateStepperState();
+    }
+    /**
+     * Same as selectStep but with focus on the step selected
+     * @param index - index of the step to select start at 0
+     */
+    selectWithFocus(index) {
+        if (index < 0 || index >= this._state.steps.length) {
+            return;
         }
-        this.applyOptions(containerCmpRef, this.containerAttributes, options);
-        const progressIndicatorRef = new DfProgressIndicatorRef(containerCmpRef, contentRef, backdropRef);
-        this.activeInstances.push(progressIndicatorRef);
-        return progressIndicatorRef;
+        this.setFocus = true;
+        this.selectStep(index);
     }
-    close(progressIndicatorRef) {
-        const instanceIndex = this.activeInstances.indexOf(progressIndicatorRef);
-        if (instanceIndex > -1) {
-            Object.keys(progressIndicatorRef).forEach(key => {
-                const propertyValue = progressIndicatorRef[key];
-                if (propertyValue && propertyValue instanceof ComponentRef) {
-                    propertyValue.destroy();
-                    progressIndicatorRef[key] = undefined;
-                }
-            });
-            this.activeInstances.splice(instanceIndex, 1);
+    /**
+     *
+     * @param index - index of the step to complete start at 0
+     */
+    completeStep(index) {
+        if (index < 0 || index >= this._state.steps.length) {
+            return;
         }
-        else {
-            throw new Error('[Design Factory] The specified progress indicator reference is no longer active and cannot be closed.');
+        this._state.steps[index].completed = true;
+        this._state.steps[index].warning = false;
+        this.updateStepperState();
+    }
+    /**
+     *
+     * @param index - index of the step to complete start at 0
+     */
+    completeStepAndGoNext(index) {
+        this.completeStep(index);
+        this.selectStep(index + 1);
+    }
+    /**
+     * Attention if the step was completed it will be uncompleted after.
+     * @param index - index of the step to make Warning start at 0
+     * @param warningLabel - label to display in the warning by default it will take the warningLabel if it exists or the label
+     */
+    makeWarning(index, warningLabel) {
+        if (index < 0 || index >= this._state.steps.length) {
+            return;
         }
+        this._state.steps[index].warning = true;
+        this._state.steps[index].completed = false;
+        this._state.steps[index].warningLabel = warningLabel
+            ? warningLabel
+            : this._state.steps[index].warningLabel
+                ? this._state.steps[index].warningLabel
+                : this._state.steps[index].label;
+        this.updateStepperState();
     }
     /**
-     * Retrieve container according to the desired options.
+     *
+     * @param index - index of the step to remove Warning start at 0
      */
-    getContainer(document, options) {
-        if (options?.container instanceof HTMLElement) {
-            return options.container;
+    removeWarning(index) {
+        if (index < 0 || index >= this._state.steps.length) {
+            return;
         }
-        return options?.container ? document.querySelector(options.container) : document.body;
+        this._state.steps[index].warning = false;
+        this.updateStepperState();
     }
-    getContent(content, cfr, container) {
-        if (!content) {
-            return this.createComponent(DfDefaultSpinnerComponent, cfr);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperService, decorators: [{
+            type: Injectable
+        }] });
+
+const DF_STEP_CLASS = 'df-stepper-step';
+class DfStepperStepDirective {
+    constructor() {
+        this.unlistener = [];
+        this.renderer2 = inject(Renderer2);
+        this.element = inject(ElementRef);
+    }
+    ngOnInit() {
+        this.unlistener.push(this.renderer2.listen(this.element.nativeElement, 'focus', () => {
+            this.handleFocusTabIndex();
+        }));
+        this.unlistener.push(this.renderer2.listen(this.element.nativeElement, 'blur', (event) => {
+            this.handleBlurTabIndex(event);
+        }));
+    }
+    handleFocusTabIndex() {
+        this.element.nativeElement.tabIndex = 0;
+    }
+    handleBlurTabIndex(event) {
+        if (event.relatedTarget &&
+            'classList' in event.relatedTarget &&
+            event.relatedTarget.classList.contains(DF_STEP_CLASS)) {
+            this.element.nativeElement.tabIndex = -1;
         }
-        else if (content instanceof DfProgressIndicatorContentSpinner) {
-            const cmpRef = this.createComponent(DfDefaultSpinnerComponent, cfr);
-            this.applyOptions(cmpRef, this.defaultSpinnerAttributes, { ...content.spinnerInput, isGlobalSpinner: container === this.document.body });
-            return cmpRef;
+    }
+    ngOnDestroy() {
+        this.unlistener.forEach((ul) => ul());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperStepDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfStepperStepDirective, isStandalone: true, selector: "[dfStepperStep]", exportAs: ["dfStepperStep"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperStepDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dfStepperStep]',
+                    exportAs: 'dfStepperStep',
+                    standalone: true
+                }]
+        }] });
+class DfStepperDirective {
+    constructor() {
+        this.stepperService = inject(DfStepperService);
+        this.element = inject(ElementRef);
+        this.rtlDirectionService = inject(DfDirectionDetectionService);
+    }
+    ngOnInit() {
+        this.direction = this.rtlDirectionService.getPageDirection(this.element);
+    }
+    handleEnterDown() {
+        this.handleSelect();
+    }
+    handleSpaceDown() {
+        this.handleSelect();
+    }
+    handleGoPrevious() {
+        if (this.direction === RightToLeftDirectionEnum.LeftToRight) {
+            this.arrowLeftInnerHandler();
         }
-        else if (content instanceof DfProgressIndicatorContentProgressBar) {
-            const cmpRef = this.createComponent(DfProgressbarComponent, cfr);
-            this.applyOptions(cmpRef, this.defaultProgressBarAttributes, { ...content.progressBarInput, infiniteAnimation: true });
-            return cmpRef;
+        else {
+            this.arrowRightInnerHandler();
         }
-        else if (content instanceof TemplateRef) {
-            const viewRef = content.createEmbeddedView({});
-            this.appRef.attachView(viewRef);
-            return viewRef;
+    }
+    handleGoNext() {
+        if (this.direction === RightToLeftDirectionEnum.LeftToRight) {
+            this.arrowRightInnerHandler();
         }
         else {
-            return this.createComponent(content, cfr);
+            this.arrowLeftInnerHandler();
         }
     }
-    createComponent(cmpType, cfr, childrenProjectables, container) {
-        const cmpFactory = cfr.resolveComponentFactory(cmpType);
-        let cmpRef;
-        if (childrenProjectables) {
-            if (childrenProjectables instanceof ComponentRef) {
-                cmpRef = cmpFactory.create(this.injector, [[childrenProjectables.location.nativeElement]]);
-            }
-            else {
-                cmpRef = cmpFactory.create(this.injector, [childrenProjectables.rootNodes]);
-            }
+    handleKeyDownRight(event) {
+        if (!this.stepperService.state.isVertical) {
+            this.handleGoNext();
+            event.preventDefault();
         }
-        else {
-            cmpRef = cmpFactory.create(this.injector);
+    }
+    handleKeyDown(event) {
+        if (!this.stepperService.state.isVertical) {
+            this.handleGoPrevious();
+            event.preventDefault();
         }
-        this.appRef.attachView(cmpRef.hostView);
-        if (container) {
-            container.appendChild(cmpRef.location.nativeElement);
+    }
+    handleKeyDownUp(event) {
+        if (this.stepperService.state.isVertical) {
+            this.handleGoNext();
+            event.preventDefault();
         }
-        return cmpRef;
     }
-    applyOptions(cmpRef, availableOptions, options) {
-        if (options) {
-            const cmpInst = cmpRef.instance;
-            availableOptions.forEach((option) => {
-                const optionValue = options[option];
-                if (optionValue !== null && optionValue !== undefined) {
-                    cmpInst[option] = optionValue;
-                }
-            });
+    handleKeyDownDown(event) {
+        if (this.stepperService.state.isVertical) {
+            this.handleGoPrevious();
+            event.preventDefault();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorService, deps: [{ token: DOCUMENT }, { token: i0.RendererFactory2 }, { token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: ScrollBar }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.RendererFactory2 }, { type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: ScrollBar }]; } });
-
-class DfProgressIndicatorDirective {
-    constructor(elementRef, progressService) {
-        this.elementRef = elementRef;
-        this.progressService = progressService;
+    getSteps() {
+        return this.element.nativeElement.querySelectorAll(`:scope .${DF_STEP_CLASS}`);
     }
-    ngOnChanges(changes) {
-        if (changes['dfProgressIndicator']) {
-            const isProgressing = this.dfProgressIndicator;
-            if (isProgressing) {
-                const config = {
-                    ...this.dfProgressIndicatorConfig?.options,
-                    container: this.elementRef.nativeElement
-                };
-                this.progressIndicatorRef = this.progressService.open(this.dfProgressIndicatorConfig?.content, config);
+    handleSelect() {
+        const listStep = this.getSteps();
+        const currentPos = Array.prototype.indexOf.call(listStep, document.activeElement);
+        if (currentPos !== -1) {
+            listStep[currentPos].click();
+        }
+    }
+    arrowRightInnerHandler() {
+        const listStep = this.getSteps();
+        const currentPos = Array.prototype.indexOf.call(listStep, document.activeElement);
+        // Test if the focus is in the list (otherwise we do nothing)
+        if (currentPos !== -1) {
+            // we put the focus on the next element.
+            if (currentPos === listStep.length - 1) {
+                listStep[0].focus();
             }
-            else if (!isProgressing && this.progressIndicatorRef) {
-                this.progressService.close(this.progressIndicatorRef);
-                this.progressIndicatorRef = undefined;
+            else {
+                listStep[currentPos + 1].focus();
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorDirective, deps: [{ token: i0.ElementRef }, { token: DfProgressIndicatorService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfProgressIndicatorDirective, isStandalone: true, selector: "[dfProgressIndicator]", inputs: { dfProgressIndicator: "dfProgressIndicator", dfProgressIndicatorConfig: "dfProgressIndicatorConfig" }, usesOnChanges: true, ngImport: i0 }); }
+    arrowLeftInnerHandler() {
+        const listStep = this.getSteps();
+        const currentPos = Array.prototype.indexOf.call(listStep, document.activeElement);
+        // Test if the focus is in the list (otherwise we do nothing)
+        if (currentPos !== -1) {
+            // we put the focus on the next element.
+            if (currentPos === 0) {
+                listStep[listStep.length - 1].focus();
+            }
+            else {
+                listStep[currentPos - 1].focus();
+            }
+        }
+    }
+    ngAfterViewChecked() {
+        // Put back the focus on the active elements
+        if (this.stepperService.setFocus) {
+            const listStep = this.getSteps();
+            listStep[this.stepperService.state.active].focus();
+            this.stepperService.resetFocus();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfStepperDirective, isStandalone: true, selector: "[dfStepperLogic]", host: { listeners: { "keydown.Enter": "handleEnterDown()", "keydown.Space": "handleSpaceDown()", "keydown.arrowRight": "handleKeyDownRight($event)", "keydown.arrowLeft": "handleKeyDown($event)", "keydown.arrowDown": "handleKeyDownUp($event)", "keydown.arrowUp": "handleKeyDownDown($event)" } }, exportAs: ["dfStepperLogic"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dfProgressIndicator]',
+                    selector: '[dfStepperLogic]',
+                    exportAs: 'dfStepperLogic',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DfProgressIndicatorService }]; }, propDecorators: { dfProgressIndicator: [{
-                type: Input
-            }], dfProgressIndicatorConfig: [{
-                type: Input
+        }], propDecorators: { handleEnterDown: [{
+                type: HostListener,
+                args: ['keydown.Enter']
+            }], handleSpaceDown: [{
+                type: HostListener,
+                args: ['keydown.Space']
+            }], handleKeyDownRight: [{
+                type: HostListener,
+                args: ['keydown.arrowRight', ['$event']]
+            }], handleKeyDown: [{
+                type: HostListener,
+                args: ['keydown.arrowLeft', ['$event']]
+            }], handleKeyDownUp: [{
+                type: HostListener,
+                args: ['keydown.arrowDown', ['$event']]
+            }], handleKeyDownDown: [{
+                type: HostListener,
+                args: ['keydown.arrowUp', ['$event']]
             }] } });
 
-class DfProgressIndicatorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorModule, imports: [DfDefaultSpinnerComponent,
-            DfProgressbarModule,
-            DfProgressIndicatorBackdropComponent,
-            DfProgressIndicatorContainerComponent,
-            DfProgressIndicatorDirective], exports: [DfProgressbarModule,
-            DfProgressIndicatorContainerComponent,
-            DfProgressIndicatorDirective,
-            DfProgressIndicatorBackdropComponent,
-            DfDefaultSpinnerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorModule, imports: [DfDefaultSpinnerComponent,
-            DfProgressbarModule, DfProgressbarModule] }); }
+class DfStepperStepContentDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+        /**
+         * The step index
+         * -1 means that the input index is not set
+         */
+        // eslint-disable-next-line @angular-eslint/no-input-rename
+        this.dfStepperStepContent = -1;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperStepContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfStepperStepContentDirective, isStandalone: true, selector: "ng-template[dfStepperStepContent]", inputs: { dfStepperStepContent: ["dfStepperStepContent", "dfStepperStepContent", (value) => numberAttribute(value, -1)] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperStepContentDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[dfStepperStepContent]', standalone: true }]
+        }], propDecorators: { dfStepperStepContent: [{
+                type: Input,
+                args: [{ transform: (value) => numberAttribute(value, -1) }]
+            }] } });
+/**
+ * Stepper component is a component to provide a step by step navigation
+ * You have two ways to navigate through the steps:
+ * - Using the linear navigation, where you can only go to the next step
+ * - Using the non-linear navigation, where you can go to any step
+ */
+class DfStepperComponent {
+    constructor() {
+        this.stepperService = inject(DfStepperService);
+        this.mapStepToContent = new Map();
+        this.stepperService.stepperState$.subscribe((state) => {
+            this.state = state;
+        });
+    }
+    ngAfterContentInit() {
+        this.tplStepsContent.forEach((tplStepContent) => {
+            if (tplStepContent.dfStepperStepContent !== -1) {
+                this.mapStepToContent.set(tplStepContent.dfStepperStepContent, tplStepContent.templateRef);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DfStepperComponent, isStandalone: true, selector: "[dfStepper]", host: { attributes: { "role": "tablist" }, properties: { "class.df-vertical-stepper": "state?.isVertical", "attr.aria-label": "stepperService.stepperAriaLabel", "attr.aria-orientation": "state?.isVertical ? \"vertical\": null" }, classAttribute: "df-stepper mb-2" }, queries: [{ propertyName: "tplStepsContent", predicate: DfStepperStepContentDirective }], hostDirectives: [{ directive: DfStepperDirective }], ngImport: i0, template: "<ng-template #myStepperLine>\n  <div class=\"df-stepper-line-wrapper\">\n    <div class=\"df-stepper-line\">\n      <div class=\"df-stepper-horizontal-line\"></div>\n    </div>\n    <div class=\"df-stepper-line d-none d-sm-flex\">\n      <div class=\"flex-grow-1\"></div>\n    </div>\n  </div>\n</ng-template>\n<ng-container *ngIf=\"state\">\n  <ng-template ngFor let-step [ngForOf]=\"state.steps\" let-i=\"index\">\n    <button #stepbasic class=\"btn btn-link df-stepper-step\"\n      dfStepperStep\n      [class.active]=\"i === state.active\"\n      [class.flex-row]=\"state.isInline\"\n      [attr.tabIndex]=\"i === state.active ? 0 : -1\"\n      [class.df-stepper-step-warning]=\"step.type === 'warning'\"\n      [class.df-stepper-step-completed]=\"step.type === 'completed'\"\n      [class.df-stepper-step-current]=\"step.type === 'current'\"\n      [class.df-stepper-step-future]=\"step.type === 'future'\"\n      [disabled]=\"state.isLinear && (step.type === 'future' || step.type === 'completed')\"\n      role=\"tab\"\n      [attr.aria-selected]=\"i === state.active ? 'true': 'false'\"\n      [attr.aria-posinset]=\"i + 1\"\n      [attr.aria-setsize]=\"state.steps.length\" [attr.aria-controls]=\"step.ariaControl\" (click)=\"stepperService.selectWithFocus(i)\">\n      <div\n        [class.df-stepper-number-current]=\"step.type === 'current'\"\n        [class.df-stepper-outline-icon]=\"step.type === 'warning'\"\n        [class.icon-exclamation-triangle]=\"step.type === 'warning'\"\n        [class.df-stepper-icon]=\"step.type === 'completed'\"\n        [class.icon-check]=\"step.type === 'completed'\"\n        [class.df-stepper-outline-number-future]=\"step.type === 'future'\"\n        >\n        <span aria-hidden=\"true\">{{stepperService.getStepNumberLabel(i)}}</span>\n      </div>\n      <div [class.align-items-center]=\"!state.isInline\"\n      [class.flex-column]=\"state.isInline\"\n        [class.mt-1]=\"!state.isInline\"\n        [class.d-none]=\"!state.isVertical\"\n        [class.d-sm-flex]=\"!state.isVertical\"\n        [class.d-flex]=\"state.isVertical\">\n        <span *ngIf=\"step.type === 'warning'\" class=\"visually-hidden\">{{stepperService.warningLabel}}</span>\n        <span class=\"df-stepper-label\">{{step.label}}</span>\n        <span *ngIf=\"state.isInline && step.optionalLabel\" class=\"df-stepper-optional-label\">{{step.optionalLabel}}</span>\n        <span *ngIf=\"step.completed\" class=\"visually-hidden\">{{stepperService.completedLabel}}</span>\n      </div>\n    </button>\n    <ng-container *ngIf=\"!state.isVertical && i < state.steps.length - 1 \" [ngTemplateOutlet]=\"myStepperLine\"></ng-container>\n    <div *ngIf=\"state.isVertical && i < state.steps.length\" [class.d-none]=\"state.steps.length - 1 === i\" role=\"tabpanel\" [id]=\"step.ariaControl\" class=\"df-vertical-stepper-panel df-vertical-stepper-line\">\n      <ng-template *ngIf=\"mapStepToContent.has(i) && state.active === i\" [ngTemplateOutlet]=\"mapStepToContent.get(i) || null\" [ngTemplateOutletContext]=\"{state, index: i, service: stepperService}\"></ng-template>\n    </div>\n  </ng-template>\n</ng-container>\n<div class=\"text-primary mb-2\"\n  [class.d-block]=\"!state.isVertical\"\n  [class.d-sm-none]=\"!state.isVertical\"\n  [class.d-none]=\"state.isVertical\"\n  *ngIf=\"stepperService.stepperState$ | async as state\">\n  <span class=\"df-stepper-label\">{{state.steps[state.active].label}}</span>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "directive", type: DfStepperStepDirective, selector: "[dfStepperStep]", exportAs: ["dfStepperStep"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[dfStepper]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, DfStepperDirective, DfStepperStepDirective], hostDirectives: [DfStepperDirective], host: {
+                        role: 'tablist',
+                        class: 'df-stepper mb-2',
+                        '[class.df-vertical-stepper]': 'state?.isVertical',
+                        '[attr.aria-label]': 'stepperService.stepperAriaLabel',
+                        '[attr.aria-orientation]': 'state?.isVertical ? "vertical": null'
+                    }, template: "<ng-template #myStepperLine>\n  <div class=\"df-stepper-line-wrapper\">\n    <div class=\"df-stepper-line\">\n      <div class=\"df-stepper-horizontal-line\"></div>\n    </div>\n    <div class=\"df-stepper-line d-none d-sm-flex\">\n      <div class=\"flex-grow-1\"></div>\n    </div>\n  </div>\n</ng-template>\n<ng-container *ngIf=\"state\">\n  <ng-template ngFor let-step [ngForOf]=\"state.steps\" let-i=\"index\">\n    <button #stepbasic class=\"btn btn-link df-stepper-step\"\n      dfStepperStep\n      [class.active]=\"i === state.active\"\n      [class.flex-row]=\"state.isInline\"\n      [attr.tabIndex]=\"i === state.active ? 0 : -1\"\n      [class.df-stepper-step-warning]=\"step.type === 'warning'\"\n      [class.df-stepper-step-completed]=\"step.type === 'completed'\"\n      [class.df-stepper-step-current]=\"step.type === 'current'\"\n      [class.df-stepper-step-future]=\"step.type === 'future'\"\n      [disabled]=\"state.isLinear && (step.type === 'future' || step.type === 'completed')\"\n      role=\"tab\"\n      [attr.aria-selected]=\"i === state.active ? 'true': 'false'\"\n      [attr.aria-posinset]=\"i + 1\"\n      [attr.aria-setsize]=\"state.steps.length\" [attr.aria-controls]=\"step.ariaControl\" (click)=\"stepperService.selectWithFocus(i)\">\n      <div\n        [class.df-stepper-number-current]=\"step.type === 'current'\"\n        [class.df-stepper-outline-icon]=\"step.type === 'warning'\"\n        [class.icon-exclamation-triangle]=\"step.type === 'warning'\"\n        [class.df-stepper-icon]=\"step.type === 'completed'\"\n        [class.icon-check]=\"step.type === 'completed'\"\n        [class.df-stepper-outline-number-future]=\"step.type === 'future'\"\n        >\n        <span aria-hidden=\"true\">{{stepperService.getStepNumberLabel(i)}}</span>\n      </div>\n      <div [class.align-items-center]=\"!state.isInline\"\n      [class.flex-column]=\"state.isInline\"\n        [class.mt-1]=\"!state.isInline\"\n        [class.d-none]=\"!state.isVertical\"\n        [class.d-sm-flex]=\"!state.isVertical\"\n        [class.d-flex]=\"state.isVertical\">\n        <span *ngIf=\"step.type === 'warning'\" class=\"visually-hidden\">{{stepperService.warningLabel}}</span>\n        <span class=\"df-stepper-label\">{{step.label}}</span>\n        <span *ngIf=\"state.isInline && step.optionalLabel\" class=\"df-stepper-optional-label\">{{step.optionalLabel}}</span>\n        <span *ngIf=\"step.completed\" class=\"visually-hidden\">{{stepperService.completedLabel}}</span>\n      </div>\n    </button>\n    <ng-container *ngIf=\"!state.isVertical && i < state.steps.length - 1 \" [ngTemplateOutlet]=\"myStepperLine\"></ng-container>\n    <div *ngIf=\"state.isVertical && i < state.steps.length\" [class.d-none]=\"state.steps.length - 1 === i\" role=\"tabpanel\" [id]=\"step.ariaControl\" class=\"df-vertical-stepper-panel df-vertical-stepper-line\">\n      <ng-template *ngIf=\"mapStepToContent.has(i) && state.active === i\" [ngTemplateOutlet]=\"mapStepToContent.get(i) || null\" [ngTemplateOutletContext]=\"{state, index: i, service: stepperService}\"></ng-template>\n    </div>\n  </ng-template>\n</ng-container>\n<div class=\"text-primary mb-2\"\n  [class.d-block]=\"!state.isVertical\"\n  [class.d-sm-none]=\"!state.isVertical\"\n  [class.d-none]=\"state.isVertical\"\n  *ngIf=\"stepperService.stepperState$ | async as state\">\n  <span class=\"df-stepper-label\">{{state.steps[state.active].label}}</span>\n</div>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { tplStepsContent: [{
+                type: ContentChildren,
+                args: [DfStepperStepContentDirective]
+            }] } });
+
+class DfStepperModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfStepperModule, imports: [DfStepperDirective, DfStepperStepDirective, DfStepperComponent, DfStepperStepContentDirective], exports: [DfStepperDirective, DfStepperStepDirective, DfStepperComponent, DfStepperStepContentDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperModule, imports: [DfStepperComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        DfDefaultSpinnerComponent,
-                        DfProgressbarModule,
-                        DfProgressIndicatorBackdropComponent,
-                        DfProgressIndicatorContainerComponent,
-                        DfProgressIndicatorDirective
-                    ],
-                    exports: [
-                        DfProgressbarModule,
-                        DfProgressIndicatorContainerComponent,
-                        DfProgressIndicatorDirective,
-                        DfProgressIndicatorBackdropComponent,
-                        DfDefaultSpinnerComponent
-                    ]
+                    imports: [DfStepperDirective, DfStepperStepDirective, DfStepperComponent, DfStepperStepContentDirective],
+                    exports: [DfStepperDirective, DfStepperStepDirective, DfStepperComponent, DfStepperStepContentDirective]
                 }]
         }] });
 
-class DfFooterModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfFooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfFooterModule, imports: [DfMediaModule, NgbAccordionModule], exports: [DfMediaModule, NgbAccordionModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfFooterModule, imports: [DfMediaModule, NgbAccordionModule, DfMediaModule, NgbAccordionModule] }); }
+/**
+ * My dfTooltipTruncate directive
+ */
+class DfTooltipTruncateDirective {
+    constructor(tooltip, elementRef, renderer) {
+        this.tooltip = tooltip;
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+        this.renderer.addClass(this.elementRef.nativeElement, 'text-truncate');
+    }
+    ngDoCheck() {
+        this.tooltip.disableTooltip = !this.hasOverflow(this.elementRef.nativeElement);
+    }
+    hasOverflow(element) {
+        return element?.offsetHeight < element?.scrollHeight || element?.offsetWidth < element?.scrollWidth;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfTooltipTruncateDirective, deps: [{ token: i1.NgbTooltip }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfTooltipTruncateDirective, isStandalone: true, selector: "[dfTooltipTruncate]", exportAs: ["dfTooltipTruncate"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfFooterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfTooltipTruncateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'dfTooltipTruncate',
+                    selector: '[dfTooltipTruncate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1.NgbTooltip }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
+
+class DfTooltipModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfTooltipModule, imports: [DfTooltipTruncateDirective], exports: [DfTooltipTruncateDirective, NgbTooltipModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfTooltipModule, imports: [NgbTooltipModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfTooltipModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [DfMediaModule, NgbAccordionModule],
-                    exports: [DfMediaModule, NgbAccordionModule]
+                    imports: [DfTooltipTruncateDirective],
+                    exports: [DfTooltipTruncateDirective, NgbTooltipModule]
                 }]
         }] });
 
-class DfToastModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfToastModule, imports: [DfInsertIconModule], exports: [NgbToastModule, DfInsertIconModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfToastModule, imports: [DfInsertIconModule, NgbToastModule, DfInsertIconModule] }); }
+class DfSideNavModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavModule, imports: [DfManageSideNavDirective,
+            DfSideNavComponent,
+            DfSideNavHeaderDirective,
+            DfExcludeTrapDirective,
+            DfSideNavIconDirective,
+            DfSideNavItemDirective], exports: [DfManageSideNavDirective,
+            DfSideNavComponent,
+            DfSideNavHeaderDirective,
+            DfExcludeTrapDirective,
+            DfSideNavIconDirective,
+            DfSideNavItemDirective,
+            DfSideNavCollapseModule,
+            DfMediaModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavModule, imports: [DfSideNavComponent, DfSideNavCollapseModule,
+            DfMediaModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfToastModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [DfInsertIconModule],
-                    exports: [NgbToastModule, DfInsertIconModule]
+                    imports: [
+                        DfManageSideNavDirective,
+                        DfSideNavComponent,
+                        DfSideNavHeaderDirective,
+                        DfExcludeTrapDirective,
+                        DfSideNavIconDirective,
+                        DfSideNavItemDirective
+                    ],
+                    exports: [
+                        DfManageSideNavDirective,
+                        DfSideNavComponent,
+                        DfSideNavHeaderDirective,
+                        DfExcludeTrapDirective,
+                        DfSideNavIconDirective,
+                        DfSideNavItemDirective,
+                        DfSideNavCollapseModule,
+                        DfMediaModule
+                    ]
                 }]
         }] });
 
-class DfModalService {
-    constructor(modalService, rendererFactory) {
-        this.modalService = modalService;
-        this.rendererFactory = rendererFactory;
-        this.renderer = this.rendererFactory.createRenderer(null, null);
+class DfManageCardSelectionDirective {
+    set dfManageCardSelected(isSelected) {
+        const selectedClass = 'df-card-selected';
+        if (isSelected === true) {
+            this.renderer.addClass(this.element.nativeElement, selectedClass);
+        }
+        else {
+            this.renderer.removeClass(this.element.nativeElement, selectedClass);
+        }
     }
-    open(content, options) {
-        let modalRef;
-        if (options && options.container) {
-            modalRef = this.modalService.open(content, options);
+    constructor(element, renderer) {
+        this.element = element;
+        this.renderer = renderer;
+    }
+    ngAfterViewInit() {
+        this.input = this.element.nativeElement.querySelector('.form-check-input');
+        this.renderer.setAttribute(this.input, 'tabIndex', '-1');
+    }
+    click(event) {
+        const target = event.target;
+        // If the input or the label is clicked then the selection is already made
+        // The card must have only one input
+        if (!(target.classList.contains('form-check-input') || target.classList.contains('form-check-label'))) {
+            this.input.click();
         }
         else {
-            modalRef = this.modalService.open(content, Object.assign({}, { container: 'body' }, options));
+            this.element.nativeElement.focus();
         }
-        // we add the 'df-modal-open' class to the body when the modal is open. We remove it when the modal is closed/dismissed
-        this.renderer.addClass(document.body, 'df-modal-open');
-        modalRef.result.then(() => {
-            this.renderer.removeClass(document.body, 'df-modal-open');
-        }, () => {
-            this.renderer.removeClass(document.body, 'df-modal-open');
-        });
-        return modalRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfModalService, deps: [{ token: i1.NgbModal }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfModalService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfManageCardSelectionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfManageCardSelectionDirective, isStandalone: true, selector: "[dfManageCardSelected]", inputs: { dfManageCardSelected: "dfManageCardSelected" }, host: { listeners: { "click": "click($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfModalService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfManageCardSelectionDirective, decorators: [{
+            type: Directive,
             args: [{
-                    providedIn: 'root'
+                    selector: '[dfManageCardSelected]',
+                    standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.NgbModal }, { type: i0.RendererFactory2 }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { dfManageCardSelected: [{
+                type: Input
+            }], click: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class DfAdvancedCardModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAdvancedCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfAdvancedCardModule, imports: [DfManageCardSelectionDirective], exports: [DfManageCardSelectionDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAdvancedCardModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAdvancedCardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [DfManageCardSelectionDirective],
+                    exports: [DfManageCardSelectionDirective]
+                }]
+        }] });
 
 const DF_MODULES = [
     DfAlertModule,
@@ -5592,8 +6043,12 @@ const DF_MODULES = [
     DfSideNavCollapseModule,
     DfAdvancedCardModule,
     DfFooterModule,
-    DfToastModule
+    DfToastModule,
+    DfStepperModule
 ];
+/**
+ * @deprecated Import only the needed modules or use standalone components instead of DfModule
+ */
 class DfModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfModule, imports: [DfAlertModule,
@@ -5611,7 +6066,8 @@ class DfModule {
             DfSideNavCollapseModule,
             DfAdvancedCardModule,
             DfFooterModule,
-            DfToastModule], exports: [DfAlertModule,
+            DfToastModule,
+            DfStepperModule], exports: [DfAlertModule,
             DfDatePickerModule,
             DfSelectModule,
             DfProgressbarModule,
@@ -5626,7 +6082,8 @@ class DfModule {
             DfSideNavCollapseModule,
             DfAdvancedCardModule,
             DfFooterModule,
-            DfToastModule] }); }
+            DfToastModule,
+            DfStepperModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfModule, imports: [DF_MODULES, DfAlertModule,
             DfDatePickerModule,
             DfSelectModule,
@@ -5642,7 +6099,8 @@ class DfModule {
             DfSideNavCollapseModule,
             DfAdvancedCardModule,
             DfFooterModule,
-            DfToastModule] }); }
+            DfToastModule,
+            DfStepperModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfModule, decorators: [{
             type: NgModule,
@@ -5652,6 +6110,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
                 }]
         }] });
 
+// Accessibility
+
 /**
  * Public API Surface of design-factory
  */
@@ -5660,5 +6120,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BREAKPOINTS_VARS, ChangeContext, CloseInputDatePickerDirective, DF_BREAKPOINTS_VAR_DEFAULT, DfAccessibilityModule, DfAdvancedCardModule, DfAdvancedInputModule, DfAlertModule, DfAmadeusIconComponent, DfBreakpoints, DfDatePickerModule, DfDatepickerRangeDirective, DfDatepickerRangeService, DfDefaultSpinnerComponent, DfDirectionDetectionService, DfExcludeTrapDirective, DfFooterModule, DfIconModule, DfIfMediaDirective, DfInputIconDirective, DfInsertIconDirective, DfInsertIconModule, DfManageBadgeEventsDirective, DfManageCardSelectionDirective, DfManageNavSelectDirective, DfManageSideNavDirective, DfMedia, DfMediaModule, DfMediaObserver, DfMediaQuery, DfModalService, DfModule, DfNavItemType, DfOptionHighlightDirective, DfPopoverConfig, DfPopoverModule, DfProgressIndicatorBackdropComponent, DfProgressIndicatorContainerComponent, DfProgressIndicatorContentPosition, DfProgressIndicatorContentProgressBar, DfProgressIndicatorContentSpinner, DfProgressIndicatorContentType, DfProgressIndicatorDirective, DfProgressIndicatorModule, DfProgressIndicatorRef, DfProgressIndicatorService, DfProgressbarComponent, DfProgressbarModule, DfSelectModule, DfSideNavCollapseDirective, DfSideNavCollapseModule, DfSideNavCollapseService, DfSideNavComponent, DfSideNavHeaderDirective, DfSideNavIconDirective, DfSideNavItemDirective, DfSideNavModule, DfSideNavService, DfSliderDirectionDirective, DfSliderModule, DfToastModule, DfTooltipModule, DfTooltipTruncateDirective, DfTriggerClickDirective, LabelType, Options, PointerType, RightToLeftDirectionEnum, SkipLinkDirective, SkipLinksContainerComponent, SliderComponent };
+export { BREAKPOINTS_VARS, ChangeContext, CloseInputDatePickerDirective, DF_BREAKPOINTS_VAR_DEFAULT, DfAccessibilityModule, DfAdvancedCardModule, DfAdvancedInputModule, DfAlertModule, DfAmadeusIconComponent, DfBreakpoints, DfDatePickerModule, DfDatepickerRangeDirective, DfDatepickerRangeService, DfDefaultSpinnerComponent, DfDirectionDetectionService, DfExcludeTrapDirective, DfFooterModule, DfIconModule, DfIfMediaDirective, DfInputIconDirective, DfInsertIconDirective, DfInsertIconModule, DfManageBadgeEventsDirective, DfManageCardSelectionDirective, DfManageNavSelectDirective, DfManageSideNavDirective, DfMedia, DfMediaModule, DfMediaObserver, DfMediaQuery, DfModalService, DfModule, DfNavItemType, DfOptionHighlightDirective, DfPopoverConfig, DfPopoverModule, DfProgressIndicatorBackdropComponent, DfProgressIndicatorContainerComponent, DfProgressIndicatorContentPosition, DfProgressIndicatorContentProgressBar, DfProgressIndicatorContentSpinner, DfProgressIndicatorContentType, DfProgressIndicatorDirective, DfProgressIndicatorModule, DfProgressIndicatorRef, DfProgressIndicatorService, DfProgressbarComponent, DfProgressbarModule, DfSelectModule, DfSideNavCollapseDirective, DfSideNavCollapseModule, DfSideNavCollapseService, DfSideNavComponent, DfSideNavHeaderDirective, DfSideNavIconDirective, DfSideNavItemDirective, DfSideNavModule, DfSideNavService, DfSliderDirectionDirective, DfSliderModule, DfStepperComponent, DfStepperDirective, DfStepperModule, DfStepperService, DfStepperStepContentDirective, DfStepperStepDirective, DfToastModule, DfTooltipModule, DfTooltipTruncateDirective, DfTriggerClickDirective, LabelType, Options, PointerType, RightToLeftDirectionEnum, SkipLinkDirective, SkipLinksContainerComponent, SliderComponent };
 //# sourceMappingURL=design-factory.mjs.map