@cityway/bo-ui 1.0.1 → 1.0.3

package/fesm2022/cityway-bo-ui.mjs

@@ -0,0 +1,1598 @@
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Directive, Input, HostBinding, Inject, HostListener, Component, EventEmitter, Output, ViewChild, ContentChildren, Injectable } from '@angular/core';
+import * as i1 from '@angular/router';
+import { NavigationEnd, RouterModule } from '@angular/router';
+import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
+import { filter } from 'rxjs/operators';
+import * as i2$1 from '@ng-bootstrap/ng-bootstrap';
+import { NgbTooltipModule, NgbCollapseModule, NgbDropdownModule, NgbAccordionModule, NgbPopover, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import * as i2 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i2$2 from '@angular/forms';
+import { Validators, ReactiveFormsModule, FormGroup, FormsModule } from '@angular/forms';
+import { JwtHelperService } from '@auth0/angular-jwt';
+import * as i3 from '@angular/platform-browser';
+import * as i4 from '@ngx-loading-bar/core';
+import * as i2$3 from '@angular/cdk/drag-drop';
+import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i4$1 from '@angular-slider/ngx-slider';
+import { NgxSliderModule } from '@angular-slider/ngx-slider';
+import * as i3$1 from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
+
+class AccordionDirective {
+    constructor(router) {
+        this.router = router;
+        this.navlinks = [];
+        setTimeout(() => this.checkOpenLinks());
+    }
+    ngAfterContentChecked() {
+        this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((e) => this.checkOpenLinks());
+    }
+    closeOtherLinks(openLink) {
+        this.navlinks.forEach((link) => {
+            if (link !== openLink) {
+                link.open = false;
+            }
+        });
+    }
+    addLink(link) {
+        this.navlinks.push(link);
+    }
+    removeGroup(link) {
+        const index = this.navlinks.indexOf(link);
+        if (index !== -1) {
+            this.navlinks.splice(index, 1);
+        }
+    }
+    checkOpenLinks() {
+        this.navlinks.forEach((link) => {
+            if (link.group) {
+                const routeUrl = this.router.url;
+                const currentUrl = routeUrl.split('/');
+                if (currentUrl.indexOf(link.group) > 0) {
+                    link.open = true;
+                    this.closeOtherLinks(link);
+                }
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AccordionDirective, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: AccordionDirective, isStandalone: true, selector: "[appAccordion]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AccordionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appAccordion]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1.Router }] });
+
+class AccordionLinkDirective {
+    constructor(nav) {
+        this.nav = nav;
+    }
+    get open() {
+        return this._open;
+    }
+    set open(value) {
+        this._open = value;
+        if (value) {
+            this.nav.closeOtherLinks(this);
+        }
+    }
+    ngOnInit() {
+        this.nav.addLink(this);
+    }
+    ngOnDestroy() {
+        this.nav.removeGroup(this);
+    }
+    toggle() {
+        this.open = !this.open;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AccordionLinkDirective, deps: [{ token: AccordionDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: AccordionLinkDirective, isStandalone: true, selector: "[appAccordionLink]", inputs: { group: "group", open: "open" }, host: { properties: { "class.open": "this._open" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AccordionLinkDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appAccordionLink]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: AccordionDirective, decorators: [{
+                    type: Inject,
+                    args: [AccordionDirective]
+                }] }], propDecorators: { group: [{
+                type: Input
+            }], _open: [{
+                type: HostBinding,
+                args: ['class.open']
+            }], open: [{
+                type: Input
+            }] } });
+
+class AccordionAnchorDirective {
+    constructor(navlink) {
+        this.navlink = navlink;
+    }
+    onClick(e) {
+        this.navlink.toggle();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AccordionAnchorDirective, deps: [{ token: AccordionLinkDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: AccordionAnchorDirective, isStandalone: true, selector: "[appAccordionToggle]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AccordionAnchorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appAccordionToggle]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: AccordionLinkDirective, decorators: [{
+                    type: Inject,
+                    args: [AccordionLinkDirective]
+                }] }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class MenuComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: MenuComponent, isStandalone: true, selector: "app-menu", ngImport: i0, template: "<!-- <ul class=\"navigation\" appAccordion>\r\n  <ng-container *ngFor=\"let menuitem of menus; index as Index\">\r\n    <ng-container *ngIf=\"!menuitem.hide\">\r\n      <li *ngIf=\"menuitem.type !== 'divider' && menuitem.type !== 'title'\" appAccordionLink [group]=\"menuitem.state\"\r\n        [ngClass]=\"menuitem.state.includes(currentRoute) ? 'navigation-item menu-opened' : 'navigation-item'\" routerLinkActive=\"active\"> -->\r\n        <!-- INTERNAL LINK -->\r\n        <!-- <a *ngIf=\"menuitem.type === 'link' && isOpened\" [ngClass]=\"{'disabled': menuitem.disabled}\" class=\"navigation-link\"\r\n          [routerLink]=\"menuitem.state\">\r\n          <ng-container [ngTemplateOutlet]=\"menuItem\"></ng-container>\r\n        </a>\r\n        <a *ngIf=\"menuitem.type === 'link' && !isOpened\" [ngClass]=\"{'disabled': menuitem.disabled}\" class=\"navigation-link\"\r\n          [routerLink]=\"menuitem.state\" placement=\"right\" [ngbTooltip]=\"menuitem.name | translate\" container=\"body\"\r\n          tooltipClass=\"menu-tooltip\">\r\n          <ng-container [ngTemplateOutlet]=\"menuItem\"></ng-container>\r\n        </a> -->\r\n        <!-- EXTERNAL LINK ou EXTERNAL LINK IN A TAB-->\r\n        <!-- <a *ngIf=\"menuitem.type === 'extLink' || menuitem.type === 'extTabLink' && isOpened\" class=\"navigation-link\"\r\n          [href]=\"menuitem.state\" [attr.target]=\"menuitem.type === 'extTabLink' ? '_blanck' : null\">\r\n          <ng-container [ngTemplateOutlet]=\"menuItem\"></ng-container>\r\n        </a>\r\n        <a *ngIf=\"menuitem.type === 'extLink' || menuitem.type === 'extTabLink' && !isOpened\" class=\"navigation-link\"\r\n          [href]=\"menuitem.state\" [attr.target]=\"menuitem.type === 'extTabLink' ? '_blanck' : null\"\r\n          placement=\"right\" [ngbTooltip]=\"menuitem.name | translate\" container=\"body\"\r\n          tooltipClass=\"menu-tooltip\">\r\n          <ng-container [ngTemplateOutlet]=\"menuItem\"></ng-container>\r\n        </a> -->\r\n\r\n<!--\r\n        <ng-template #menuItem>\r\n          <span class=\"{{ menuitem.icon }} me-3 icon\" aria-hidden=\"true\"></span>\r\n          <span class=\"title me-auto\">{{ menuitem.name | translate }}</span>\r\n          <span *ngFor=\"let badge of menuitem.badge\" class=\"badge badge-{{ badge.type }} me-3\">{{ badge.value }}</span>\r\n        </ng-template>\r\n\r\n        <ng-container *ngIf=\"isOpened\">\r\n          <button *ngIf=\"menuitem.type === 'sub' || menuitem.type === 'sub-reorder'\" type=\"button\" class=\"navigation-link btn navigation-btn\"\r\n            (click)=\"onShow(Index)\" [ngClass]=\"isCollapsed[Index] ? 'collapsed' : ''\"\r\n            [attr.aria-expanded]=\"!isCollapsed[Index]\" aria-controls=\"collapseExample\">\r\n            <ng-container [ngTemplateOutlet]=\"menuItem\"></ng-container>\r\n            <span class=\"menu-caret optyweb cw-nav-collapse2\" aria-hidden=\"true\"></span>\r\n          </button>\r\n          <ul *ngIf=\"menuitem.type === 'sub'\" class=\"navigation-submenu\" [ngbCollapse]\r\n            [(ngbCollapse)]=\"isCollapsed[Index]\">\r\n            <ng-container *ngFor=\"let childitem of menuitem.children\">\r\n              <li *ngIf=\"!childitem.hide\" class=\"navigation-item\" routerLinkActive=\"active\"\r\n                [ngClass]=\"{disabled: childitem.disabled}\">\r\n                <a [routerLink]=\"['/', menuitem.state, childitem.state ]\" class=\"navigation-submenu-link\">\r\n                  {{ childitem.name | translate }}\r\n                </a>\r\n              </li>\r\n            </ng-container>\r\n          </ul>\r\n          <ul *ngIf=\"menuitem.type === 'sub-reorder'\" class=\"navigation-submenu\" [ngbCollapse]\r\n            [(ngbCollapse)]=\"isCollapsed[Index]\">\r\n            <ng-container *ngFor=\"let childitem of menuitem.children\">\r\n              <li *ngIf=\"!childitem.hide\" class=\"navigation-item\" routerLinkActive=\"active\"\r\n                [ngClass]=\"{disabled: childitem.disabled}\">\r\n                <a [routerLink]=\"childitem.state\" class=\"navigation-submenu-link\">\r\n                  {{ childitem.name | translate }}\r\n                </a>\r\n              </li>\r\n            </ng-container>\r\n          </ul>\r\n        </ng-container>\r\n      </li>\r\n\r\n      <ng-container *ngIf=\"!isOpened\">\r\n        <li ngbDropdown *ngIf=\"menuitem.type !== 'divider' && menuitem.type !== 'title'\" appAccordionLink\r\n          [group]=\"menuitem.state\" class=\"navigation-dropdown\" [autoClose]=\"true\"\r\n          [container]=\"'body'\" [dropdownClass]=\"'navigation-submenu-dropdown'\" routerLinkActive=\"active\" #myDrop=\"ngbDropdown\"\r\n          (mouseenter)=\"$event.stopPropagation(); myDrop.open();\" (mouseleave)=\"$event.stopPropagation(); myDrop.close();\">\r\n          <button *ngIf=\"menuitem.type === 'sub' || menuitem.type === 'sub-reorder'\" type=\"button\" class=\"navigation-link btn navigation-btn\"\r\n            id=\"dropdownBasic1\" ngbDropdownToggle (click)=\"onShow(Index)\">\r\n            <span class=\"{{ menuitem.icon }} me-3 icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"title me-auto\">{{ menuitem.name | translate }}</span>\r\n            <span *ngFor=\"let badge of menuitem.badge\" class=\"badge badge-{{ badge.type }} me-3\">{{ badge.value\r\n              }}</span>\r\n            <span class=\"menu-caret optyweb cw-nav-expand2\" aria-hidden=\"true\"></span>\r\n          </button>\r\n          <ul ngbDropdownMenu *ngIf=\"menuitem.type === 'sub'\" class=\"navigation-submenu\"\r\n            [ngClass]=\"'navigation-submenu-collapsed'\"\r\n            (mouseenter)=\"$event.stopPropagation(); myDrop.open();\" (mouseleave)=\"$event.stopPropagation(); myDrop.close();\">\r\n            <ng-container *ngFor=\"let childitem of menuitem.children\">\r\n              <li *ngIf=\"!childitem.hide\" class=\"navigation-item\" routerLinkActive=\"active\"\r\n                [ngClass]=\"{disabled: childitem.disabled}\">\r\n                <a [routerLink]=\"['/', menuitem.state, childitem.state ]\" class=\"navigation-submenu-link\" ngbDropdownItem>\r\n                  {{ childitem.name | translate }}\r\n                </a>\r\n              </li>\r\n            </ng-container>\r\n          </ul>\r\n          <ul ngbDropdownMenu *ngIf=\"menuitem.type === 'sub-reorder'\" class=\"navigation-submenu\"\r\n            [ngClass]=\"'navigation-submenu-collapsed'\"\r\n            (mouseenter)=\"$event.stopPropagation(); myDrop.open();\" (mouseleave)=\"$event.stopPropagation(); myDrop.close();\">\r\n            <ng-container *ngFor=\"let childitem of menuitem.children\">\r\n              <li *ngIf=\"!childitem.hide\" class=\"navigation-item\" routerLinkActive=\"active\"\r\n                [ngClass]=\"{disabled: childitem.disabled}\">\r\n                <a [routerLink]=\"childitem.state\" class=\"navigation-submenu-link\" ngbDropdownItem>\r\n                  {{ childitem.name | translate }}\r\n                </a>\r\n              </li>\r\n            </ng-container>\r\n          </ul>\r\n        </li>\r\n      </ng-container>\r\n\r\n      <li *ngIf=\"menuitem.type === 'divider'\" class=\"navigation-item\">\r\n        <hr />\r\n      </li>\r\n      <li *ngIf=\"menuitem.type === 'title'\" class=\"navigation-item\">\r\n        <span class=\"navigation-title\">{{ menuitem.name | translate }}</span>\r\n      </li>\r\n    </ng-container>\r\n  </ng-container>\r\n</ul> -->\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "ngmodule", type: NgbCollapseModule }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "ngmodule", type: TranslateModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-menu', standalone: true, imports: [
+                        CommonModule,
+                        RouterModule,
+                        NgbTooltipModule,
+                        NgbCollapseModule,
+                        NgbDropdownModule,
+                        AccordionLinkDirective,
+                        TranslateModule,
+                        AccordionLinkDirective,
+                        AccordionDirective
+                    ], template: "<!-- <ul class=\"navigation\" appAccordion>\r\n  <ng-container *ngFor=\"let menuitem of menus; index as Index\">\r\n    <ng-container *ngIf=\"!menuitem.hide\">\r\n      <li *ngIf=\"menuitem.type !== 'divider' && menuitem.type !== 'title'\" appAccordionLink [group]=\"menuitem.state\"\r\n        [ngClass]=\"menuitem.state.includes(currentRoute) ? 'navigation-item menu-opened' : 'navigation-item'\" routerLinkActive=\"active\"> -->\r\n        <!-- INTERNAL LINK -->\r\n        <!-- <a *ngIf=\"menuitem.type === 'link' && isOpened\" [ngClass]=\"{'disabled': menuitem.disabled}\" class=\"navigation-link\"\r\n          [routerLink]=\"menuitem.state\">\r\n          <ng-container [ngTemplateOutlet]=\"menuItem\"></ng-container>\r\n        </a>\r\n        <a *ngIf=\"menuitem.type === 'link' && !isOpened\" [ngClass]=\"{'disabled': menuitem.disabled}\" class=\"navigation-link\"\r\n          [routerLink]=\"menuitem.state\" placement=\"right\" [ngbTooltip]=\"menuitem.name | translate\" container=\"body\"\r\n          tooltipClass=\"menu-tooltip\">\r\n          <ng-container [ngTemplateOutlet]=\"menuItem\"></ng-container>\r\n        </a> -->\r\n        <!-- EXTERNAL LINK ou EXTERNAL LINK IN A TAB-->\r\n        <!-- <a *ngIf=\"menuitem.type === 'extLink' || menuitem.type === 'extTabLink' && isOpened\" class=\"navigation-link\"\r\n          [href]=\"menuitem.state\" [attr.target]=\"menuitem.type === 'extTabLink' ? '_blanck' : null\">\r\n          <ng-container [ngTemplateOutlet]=\"menuItem\"></ng-container>\r\n        </a>\r\n        <a *ngIf=\"menuitem.type === 'extLink' || menuitem.type === 'extTabLink' && !isOpened\" class=\"navigation-link\"\r\n          [href]=\"menuitem.state\" [attr.target]=\"menuitem.type === 'extTabLink' ? '_blanck' : null\"\r\n          placement=\"right\" [ngbTooltip]=\"menuitem.name | translate\" container=\"body\"\r\n          tooltipClass=\"menu-tooltip\">\r\n          <ng-container [ngTemplateOutlet]=\"menuItem\"></ng-container>\r\n        </a> -->\r\n\r\n<!--\r\n        <ng-template #menuItem>\r\n          <span class=\"{{ menuitem.icon }} me-3 icon\" aria-hidden=\"true\"></span>\r\n          <span class=\"title me-auto\">{{ menuitem.name | translate }}</span>\r\n          <span *ngFor=\"let badge of menuitem.badge\" class=\"badge badge-{{ badge.type }} me-3\">{{ badge.value }}</span>\r\n        </ng-template>\r\n\r\n        <ng-container *ngIf=\"isOpened\">\r\n          <button *ngIf=\"menuitem.type === 'sub' || menuitem.type === 'sub-reorder'\" type=\"button\" class=\"navigation-link btn navigation-btn\"\r\n            (click)=\"onShow(Index)\" [ngClass]=\"isCollapsed[Index] ? 'collapsed' : ''\"\r\n            [attr.aria-expanded]=\"!isCollapsed[Index]\" aria-controls=\"collapseExample\">\r\n            <ng-container [ngTemplateOutlet]=\"menuItem\"></ng-container>\r\n            <span class=\"menu-caret optyweb cw-nav-collapse2\" aria-hidden=\"true\"></span>\r\n          </button>\r\n          <ul *ngIf=\"menuitem.type === 'sub'\" class=\"navigation-submenu\" [ngbCollapse]\r\n            [(ngbCollapse)]=\"isCollapsed[Index]\">\r\n            <ng-container *ngFor=\"let childitem of menuitem.children\">\r\n              <li *ngIf=\"!childitem.hide\" class=\"navigation-item\" routerLinkActive=\"active\"\r\n                [ngClass]=\"{disabled: childitem.disabled}\">\r\n                <a [routerLink]=\"['/', menuitem.state, childitem.state ]\" class=\"navigation-submenu-link\">\r\n                  {{ childitem.name | translate }}\r\n                </a>\r\n              </li>\r\n            </ng-container>\r\n          </ul>\r\n          <ul *ngIf=\"menuitem.type === 'sub-reorder'\" class=\"navigation-submenu\" [ngbCollapse]\r\n            [(ngbCollapse)]=\"isCollapsed[Index]\">\r\n            <ng-container *ngFor=\"let childitem of menuitem.children\">\r\n              <li *ngIf=\"!childitem.hide\" class=\"navigation-item\" routerLinkActive=\"active\"\r\n                [ngClass]=\"{disabled: childitem.disabled}\">\r\n                <a [routerLink]=\"childitem.state\" class=\"navigation-submenu-link\">\r\n                  {{ childitem.name | translate }}\r\n                </a>\r\n              </li>\r\n            </ng-container>\r\n          </ul>\r\n        </ng-container>\r\n      </li>\r\n\r\n      <ng-container *ngIf=\"!isOpened\">\r\n        <li ngbDropdown *ngIf=\"menuitem.type !== 'divider' && menuitem.type !== 'title'\" appAccordionLink\r\n          [group]=\"menuitem.state\" class=\"navigation-dropdown\" [autoClose]=\"true\"\r\n          [container]=\"'body'\" [dropdownClass]=\"'navigation-submenu-dropdown'\" routerLinkActive=\"active\" #myDrop=\"ngbDropdown\"\r\n          (mouseenter)=\"$event.stopPropagation(); myDrop.open();\" (mouseleave)=\"$event.stopPropagation(); myDrop.close();\">\r\n          <button *ngIf=\"menuitem.type === 'sub' || menuitem.type === 'sub-reorder'\" type=\"button\" class=\"navigation-link btn navigation-btn\"\r\n            id=\"dropdownBasic1\" ngbDropdownToggle (click)=\"onShow(Index)\">\r\n            <span class=\"{{ menuitem.icon }} me-3 icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"title me-auto\">{{ menuitem.name | translate }}</span>\r\n            <span *ngFor=\"let badge of menuitem.badge\" class=\"badge badge-{{ badge.type }} me-3\">{{ badge.value\r\n              }}</span>\r\n            <span class=\"menu-caret optyweb cw-nav-expand2\" aria-hidden=\"true\"></span>\r\n          </button>\r\n          <ul ngbDropdownMenu *ngIf=\"menuitem.type === 'sub'\" class=\"navigation-submenu\"\r\n            [ngClass]=\"'navigation-submenu-collapsed'\"\r\n            (mouseenter)=\"$event.stopPropagation(); myDrop.open();\" (mouseleave)=\"$event.stopPropagation(); myDrop.close();\">\r\n            <ng-container *ngFor=\"let childitem of menuitem.children\">\r\n              <li *ngIf=\"!childitem.hide\" class=\"navigation-item\" routerLinkActive=\"active\"\r\n                [ngClass]=\"{disabled: childitem.disabled}\">\r\n                <a [routerLink]=\"['/', menuitem.state, childitem.state ]\" class=\"navigation-submenu-link\" ngbDropdownItem>\r\n                  {{ childitem.name | translate }}\r\n                </a>\r\n              </li>\r\n            </ng-container>\r\n          </ul>\r\n          <ul ngbDropdownMenu *ngIf=\"menuitem.type === 'sub-reorder'\" class=\"navigation-submenu\"\r\n            [ngClass]=\"'navigation-submenu-collapsed'\"\r\n            (mouseenter)=\"$event.stopPropagation(); myDrop.open();\" (mouseleave)=\"$event.stopPropagation(); myDrop.close();\">\r\n            <ng-container *ngFor=\"let childitem of menuitem.children\">\r\n              <li *ngIf=\"!childitem.hide\" class=\"navigation-item\" routerLinkActive=\"active\"\r\n                [ngClass]=\"{disabled: childitem.disabled}\">\r\n                <a [routerLink]=\"childitem.state\" class=\"navigation-submenu-link\" ngbDropdownItem>\r\n                  {{ childitem.name | translate }}\r\n                </a>\r\n              </li>\r\n            </ng-container>\r\n          </ul>\r\n        </li>\r\n      </ng-container>\r\n\r\n      <li *ngIf=\"menuitem.type === 'divider'\" class=\"navigation-item\">\r\n        <hr />\r\n      </li>\r\n      <li *ngIf=\"menuitem.type === 'title'\" class=\"navigation-item\">\r\n        <span class=\"navigation-title\">{{ menuitem.name | translate }}</span>\r\n      </li>\r\n    </ng-container>\r\n  </ng-container>\r\n</ul> -->\r\n" }]
+        }] });
+
+class SidebarComponent {
+    constructor() {
+        this.toggleSidenav = new EventEmitter();
+    }
+    onClick() {
+        this.toggleSidenav.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: SidebarComponent, isStandalone: true, selector: "app-sidebar", inputs: { isOpened: "isOpened" }, outputs: { toggleSidenav: "toggleSidenav" }, ngImport: i0, template: "<div class=\"sidebar-scroll\">\r\n  <div class=\"sidebar\">\r\n    <nav class=\"navbar custom-navbar main-brand justify-content-center text-center\">\r\n      <a class=\"navbar-brand text-decoration-none\" [routerLink]=\"['/']\" [ngClass]=\"{'invisible': !isOpened}\">\r\n        <div class=\"navbar-brand-name text-wrap\">\r\n          <!-- {{ configuration.appSettings.name }} -->\r\n        </div>\r\n        <div class=\"navbar-brand-project\">\r\n          <!-- {{ configuration.appSettings.clientName }} -->\r\n        </div>\r\n      </a>\r\n      <button type=\"button\" class=\"btn btn-primary btn-close-menu d-lg-none\" (click)=\"onClick()\">\r\n        <span class=\"optyweb cw-toolbar-close1\" aria-hidden=\"true\"></span>\r\n        <span class=\"visually-hidden\">{{ '_COMMON._SIDEBAR.CLOSE_BTN' | translate }}</span>\r\n      </button>\r\n    </nav>\r\n\r\n    <!-- main navigation -->\r\n    <!-- <nav *ngIf=\"menuService.menu$ | async\" class=\"main-menu\">\r\n      <app-menu [isOpened]=\"isOpened\"></app-menu>\r\n    </nav> -->\r\n\r\n    <nav class=\"navbar custom-navbar sidebar-footer bg-white\" [ngClass]=\"{'sidebar-footer-closed': !isOpened}\">\r\n      <ul class=\"navbar-nav w-100\">\r\n        <!-- <li class=\"nav-item\">\r\n          <a class=\"btn nav-link d-flex\" href=\"assets/docs/fr/manuel.pdf\" container=\"body\" type=\"button\"\r\n            [ngbTooltip]=\"'_COMMON._USER.LBL_USER_MANUAL' | translate\" [placement]=\"isOpened ? 'top' : 'right'\">\r\n            <span class=\"bo-icons bo-manual\" aria-hidden=\"true\"></span>\r\n            <span class=\"visually-hidden\">{{ '_COMMON._USER.LBL_USER_MANUAL' | translate }}</span>\r\n          </a>\r\n        </li>\r\n        <ng-container *ngIf=\"authService.isLoggedIn()\">\r\n          <li class=\"nav-item\">\r\n            <button (click)=\"authService.logout()\" class=\"btn nav-link d-flex\" container=\"body\" type=\"button\"\r\n              [ngbTooltip]=\"'_COMMON._APPLICATION.LOGOUT' | translate\" [placement]=\"isOpened ? 'top' : 'right'\">\r\n              <span class=\"optyweb cw-nav-connexion\" aria-hidden=\"true\"></span>\r\n              <span class=\"visually-hidden\">{{ '_COMMON._APPLICATION.LOGOUT' | translate }}</span>\r\n            </button>\r\n          </li>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!authService.isLoggedIn()\">\r\n          <li class=\"nav-item\">\r\n            <button (click)=\"authService.startAuthentication()\" class=\"btn nav-link d-flex\" container=\"body\"\r\n              type=\"button\" [ngbTooltip]=\"'_COMMON._APPLICATION.LOGIN' | translate\"\r\n              [placement]=\"isOpened ? 'top' : 'right'\">\r\n              <span class=\"optyweb cw-nav-connexion\" aria-hidden=\"true\"></span>\r\n              <span class=\"visually-hidden\">{{ '_COMMON._APPLICATION.LOGIN' | translate }}</span>\r\n            </button>\r\n          </li>\r\n        </ng-container>\r\n        <li class=\"nav-item docked-hidden\">\r\n          <a [href]=\"configuration.authentication.portalSettings.urlApplications\" class=\"nav-link d-flex\"\r\n            container=\"body\" [ngbTooltip]=\"'_COMMON._APPLICATION.CHANGE' | translate\"\r\n            [placement]=\"isOpened ? 'top' : 'right'\">\r\n            <span class=\"bo-icons bo-change-app\" aria-hidden=\"true\"></span>\r\n            <span class=\"visually-hidden\">{{ '_COMMON._APPLICATION.CHANGE' | translate }}</span>\r\n          </a>\r\n        </li> -->\r\n      </ul>\r\n    </nav>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sidebar', standalone: true, imports: [
+                        TranslateModule,
+                        MenuComponent,
+                        NgbTooltipModule,
+                        CommonModule,
+                        RouterModule
+                    ], template: "<div class=\"sidebar-scroll\">\r\n  <div class=\"sidebar\">\r\n    <nav class=\"navbar custom-navbar main-brand justify-content-center text-center\">\r\n      <a class=\"navbar-brand text-decoration-none\" [routerLink]=\"['/']\" [ngClass]=\"{'invisible': !isOpened}\">\r\n        <div class=\"navbar-brand-name text-wrap\">\r\n          <!-- {{ configuration.appSettings.name }} -->\r\n        </div>\r\n        <div class=\"navbar-brand-project\">\r\n          <!-- {{ configuration.appSettings.clientName }} -->\r\n        </div>\r\n      </a>\r\n      <button type=\"button\" class=\"btn btn-primary btn-close-menu d-lg-none\" (click)=\"onClick()\">\r\n        <span class=\"optyweb cw-toolbar-close1\" aria-hidden=\"true\"></span>\r\n        <span class=\"visually-hidden\">{{ '_COMMON._SIDEBAR.CLOSE_BTN' | translate }}</span>\r\n      </button>\r\n    </nav>\r\n\r\n    <!-- main navigation -->\r\n    <!-- <nav *ngIf=\"menuService.menu$ | async\" class=\"main-menu\">\r\n      <app-menu [isOpened]=\"isOpened\"></app-menu>\r\n    </nav> -->\r\n\r\n    <nav class=\"navbar custom-navbar sidebar-footer bg-white\" [ngClass]=\"{'sidebar-footer-closed': !isOpened}\">\r\n      <ul class=\"navbar-nav w-100\">\r\n        <!-- <li class=\"nav-item\">\r\n          <a class=\"btn nav-link d-flex\" href=\"assets/docs/fr/manuel.pdf\" container=\"body\" type=\"button\"\r\n            [ngbTooltip]=\"'_COMMON._USER.LBL_USER_MANUAL' | translate\" [placement]=\"isOpened ? 'top' : 'right'\">\r\n            <span class=\"bo-icons bo-manual\" aria-hidden=\"true\"></span>\r\n            <span class=\"visually-hidden\">{{ '_COMMON._USER.LBL_USER_MANUAL' | translate }}</span>\r\n          </a>\r\n        </li>\r\n        <ng-container *ngIf=\"authService.isLoggedIn()\">\r\n          <li class=\"nav-item\">\r\n            <button (click)=\"authService.logout()\" class=\"btn nav-link d-flex\" container=\"body\" type=\"button\"\r\n              [ngbTooltip]=\"'_COMMON._APPLICATION.LOGOUT' | translate\" [placement]=\"isOpened ? 'top' : 'right'\">\r\n              <span class=\"optyweb cw-nav-connexion\" aria-hidden=\"true\"></span>\r\n              <span class=\"visually-hidden\">{{ '_COMMON._APPLICATION.LOGOUT' | translate }}</span>\r\n            </button>\r\n          </li>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!authService.isLoggedIn()\">\r\n          <li class=\"nav-item\">\r\n            <button (click)=\"authService.startAuthentication()\" class=\"btn nav-link d-flex\" container=\"body\"\r\n              type=\"button\" [ngbTooltip]=\"'_COMMON._APPLICATION.LOGIN' | translate\"\r\n              [placement]=\"isOpened ? 'top' : 'right'\">\r\n              <span class=\"optyweb cw-nav-connexion\" aria-hidden=\"true\"></span>\r\n              <span class=\"visually-hidden\">{{ '_COMMON._APPLICATION.LOGIN' | translate }}</span>\r\n            </button>\r\n          </li>\r\n        </ng-container>\r\n        <li class=\"nav-item docked-hidden\">\r\n          <a [href]=\"configuration.authentication.portalSettings.urlApplications\" class=\"nav-link d-flex\"\r\n            container=\"body\" [ngbTooltip]=\"'_COMMON._APPLICATION.CHANGE' | translate\"\r\n            [placement]=\"isOpened ? 'top' : 'right'\">\r\n            <span class=\"bo-icons bo-change-app\" aria-hidden=\"true\"></span>\r\n            <span class=\"visually-hidden\">{{ '_COMMON._APPLICATION.CHANGE' | translate }}</span>\r\n          </a>\r\n        </li> -->\r\n      </ul>\r\n    </nav>\r\n  </div>\r\n</div>\r\n" }]
+        }], propDecorators: { toggleSidenav: [{
+                type: Output
+            }], isOpened: [{
+                type: Input
+            }] } });
+
+class SkipLinksComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SkipLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: SkipLinksComponent, isStandalone: true, selector: "app-skip-links", ngImport: i0, template: "<div class=\"skip-links\">\r\n  <a href=\"#content\">{{ '_COMMON._SKIP_LINKS.CONTENT' | translate }}</a>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SkipLinksComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-skip-links', standalone: true, imports: [
+                        TranslateModule
+                    ], template: "<div class=\"skip-links\">\r\n  <a href=\"#content\">{{ '_COMMON._SKIP_LINKS.CONTENT' | translate }}</a>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [] });
+
+// import { Configuration } from '../../../models/configuration/configuration';
+// import { KeyVersion, Version } from '../../../models/version';
+// import { VersionService } from '../../../services/version.service';
+class FooterComponent {
+    constructor(
+    // private versionService: VersionService,
+    modalService) {
+        this.modalService = modalService;
+        this._today = Date.now();
+        // this.configuration = JSON.parse(localStorage.getItem('configuration')) as Configuration;
+    }
+    get today() {
+        return this._today;
+    }
+    set today(value) {
+        this._today = value;
+    }
+    ngOnInit() {
+        // this.versionService.get().subscribe({
+        //   next: (version: Version) => {
+        //     this.versions = version;
+        //     const keys = this.versions.bundle.projects.filter(x => x.name === this.configuration.appSettings.name);
+        //     if (keys[0]) {
+        //       this.productVersion = keys[0];
+        //     }
+        //   }
+        // });
+    }
+    open(content, size = 'lg') {
+        this.modalRef = this.modalService.open(content, {
+            size,
+            ariaLabelledBy: 'modal-basic-title',
+            centered: true
+        });
+    }
+    close() {
+        this.modalRef.dismiss();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: FooterComponent, deps: [{ token: i2$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: FooterComponent, isStandalone: true, selector: "app-footer", ngImport: i0, template: "<footer role=\"contentinfo\">\r\n  <nav class=\"navbar custom-navbar main-footer px-3\">\r\n    <ul class=\"list-inline text-center mb-0\">\r\n      <li class=\"list-inline-item\">\r\n        <span class=\"me-1\">Copyright &copy; {{today | date:'yyyy'}}</span>\r\n        Cityway\r\n      </li>\r\n      <!-- <li class=\"list-inline-item\">\r\n        <a href=\"mailto:{{configuration.appSettings.emailSupport}}\">{{configuration.appSettings.emailSupport}}</a>\r\n      </li>\r\n      <li class=\"list-inline-item\">\r\n        @if (versions) {\r\n          <button type=\"button\" class=\"btn btn-link p-0 border-0\" (click)=\"open(modalversion, 'md')\">\r\n            {{versions.bundle.version}}\r\n          </button>\r\n        }\r\n        @else {\r\n          {{configuration.appSettings.version}}\r\n        }\r\n      </li> -->\r\n    </ul>\r\n  </nav>\r\n</footer>\r\n\r\n<!-- <ng-template #modalversion let-c=\"close\" let-d=\"dismiss\">\r\n  <div class=\"modal-header\">\r\n    <h1 id=\"modal-basic-title\" class=\"modal-title\">{{productVersion.name}} - {{productVersion.version}} </h1>\r\n    <button type=\"button\" class=\"btn-close\" attr.aria-label=\"{{'_COMMON._ACTION.CLOSE' | translate}}\" (click)=\"close()\">\r\n    </button>\r\n  </div>\r\n  <div class=\"modal-body\">\r\n    <p class=\"fw-bold\">{{'_COMMON._VERSION.INCLUDED' | translate}}</p>\r\n\r\n    <table class=\"table table-bordered table-striped\">\r\n      <caption class=\"visually-hidden\"\r\n        [innerHTML]=\"'_COMMON._TABLE.CAPTION' | translate: { label: '_COMMON._VERSION.INCLUDED' | translate } \">\r\n      </caption>\r\n      <tbody>\r\n        <tr *ngFor=\"let version of versions.bundle.projects\">\r\n          <td>{{version.name}}</td>\r\n          <td>{{version.version}}</td>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n  <div class=\"modal-footer\">\r\n    <button type=\"button\" class=\"btn btn-secondary\" (click)=\"close()\">\r\n      {{'_COMMON._ACTION.CLOSE' | translate}}\r\n    </button>\r\n  </div>\r\n</ng-template> -->\r\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: FooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-footer', standalone: true, imports: [
+                        TranslateModule,
+                        CommonModule
+                    ], template: "<footer role=\"contentinfo\">\r\n  <nav class=\"navbar custom-navbar main-footer px-3\">\r\n    <ul class=\"list-inline text-center mb-0\">\r\n      <li class=\"list-inline-item\">\r\n        <span class=\"me-1\">Copyright &copy; {{today | date:'yyyy'}}</span>\r\n        Cityway\r\n      </li>\r\n      <!-- <li class=\"list-inline-item\">\r\n        <a href=\"mailto:{{configuration.appSettings.emailSupport}}\">{{configuration.appSettings.emailSupport}}</a>\r\n      </li>\r\n      <li class=\"list-inline-item\">\r\n        @if (versions) {\r\n          <button type=\"button\" class=\"btn btn-link p-0 border-0\" (click)=\"open(modalversion, 'md')\">\r\n            {{versions.bundle.version}}\r\n          </button>\r\n        }\r\n        @else {\r\n          {{configuration.appSettings.version}}\r\n        }\r\n      </li> -->\r\n    </ul>\r\n  </nav>\r\n</footer>\r\n\r\n<!-- <ng-template #modalversion let-c=\"close\" let-d=\"dismiss\">\r\n  <div class=\"modal-header\">\r\n    <h1 id=\"modal-basic-title\" class=\"modal-title\">{{productVersion.name}} - {{productVersion.version}} </h1>\r\n    <button type=\"button\" class=\"btn-close\" attr.aria-label=\"{{'_COMMON._ACTION.CLOSE' | translate}}\" (click)=\"close()\">\r\n    </button>\r\n  </div>\r\n  <div class=\"modal-body\">\r\n    <p class=\"fw-bold\">{{'_COMMON._VERSION.INCLUDED' | translate}}</p>\r\n\r\n    <table class=\"table table-bordered table-striped\">\r\n      <caption class=\"visually-hidden\"\r\n        [innerHTML]=\"'_COMMON._TABLE.CAPTION' | translate: { label: '_COMMON._VERSION.INCLUDED' | translate } \">\r\n      </caption>\r\n      <tbody>\r\n        <tr *ngFor=\"let version of versions.bundle.projects\">\r\n          <td>{{version.name}}</td>\r\n          <td>{{version.version}}</td>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n  <div class=\"modal-footer\">\r\n    <button type=\"button\" class=\"btn btn-secondary\" (click)=\"close()\">\r\n      {{'_COMMON._ACTION.CLOSE' | translate}}\r\n    </button>\r\n  </div>\r\n</ng-template> -->\r\n" }]
+        }], ctorParameters: () => [{ type: i2$1.NgbModal }] });
+
+class HeaderComponent {
+    constructor(translateService, fb) {
+        this.translateService = translateService;
+        this.fb = fb;
+        this.toggleSidenav = new EventEmitter();
+        this.parent = null;
+        this.jwtHelper = new JwtHelperService();
+    }
+    ngOnInit() {
+        this.formHeader = this.fb.group({
+            lang: ['fr', Validators.compose([Validators.required])],
+        });
+        this.loginName = 'Admin';
+    }
+    changeLang(lang) {
+        localStorage.setItem('lang', lang);
+        this.lang = lang;
+        this.translateService.setDefaultLang(lang);
+        this.translateService.use(lang);
+    }
+    ngOnChanges(simpleChanges) {
+        // Si il y a un changement et que la variable envoye par le parent a une currentValue
+        if (simpleChanges && simpleChanges['parent'] && simpleChanges['parent'].currentValue) {
+            // attribution des datas a nos variables pour notre HTML
+            this.parentLink = simpleChanges['parent'].currentValue.link;
+            this.parentTitle = simpleChanges['parent'].currentValue.title;
+        }
+        // Si il y a un changement et que la variable envoye par le parent a une currentValue
+        if (simpleChanges && simpleChanges['heading'] && simpleChanges['heading'].currentValue) {
+            // Attribution des datas a nos variables pour notre HTML
+            this.heading = simpleChanges['heading'].currentValue;
+            // Si la variable du parent (parent) n'as pas change
+            if (!simpleChanges['heading']) {
+                // alors on la supprime pour le cote HTML
+                delete this.parent;
+            }
+        }
+    }
+    /** Renvoie un tableau de menus */
+    getMenus(parent) {
+        if (parent === null || parent === undefined) {
+            return new Array();
+        }
+        // Soit 1 element , soit 1 tableau en entée
+        return parent instanceof Array ? parent : new Array(parent);
+    }
+    onClick() {
+        this.toggleSidenav.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: HeaderComponent, deps: [{ token: i2.TranslateService }, { token: i2$2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: HeaderComponent, isStandalone: true, selector: "app-header", inputs: { heading: "heading", headingUrlParamsOptions: "headingUrlParamsOptions", parent: "parent", isMenuOpened: "isMenuOpened" }, outputs: { toggleSidenav: "toggleSidenav" }, usesOnChanges: true, ngImport: i0, template: "<header role=\"banner\" class=\"header\">\r\n  <form [formGroup]=\"formHeader\">\r\n    <nav class=\"navbar custom-navbar bg-faded main-header\">\r\n      <button type=\"button\" class=\"btn btn-primary menu-link\" (click)=\"onClick()\"\r\n        [title]=\"isMenuOpened ? ('_COMMON._MENU.BTN_MAIN_MENU_CLOSE' | translate) : ('_COMMON._MENU.BTN_MAIN_MENU_OPEN' | translate)\">\r\n        <span class=\"bo-icons\" [ngClass]=\"isMenuOpened ? 'bo-menu-expanded' : 'bo-menu-collapsed' \"\r\n          aria-hidden=\"true\"></span>\r\n        <span class=\"visually-hidden\">{{ '_COMMON._MENU.BTN_MAIN_MENU' | translate}}</span>\r\n      </button>\r\n\r\n      <nav aria-label=\"breadcrumb\">\r\n        <ol class=\"breadcrumb align-items-center\">\r\n          <li class=\"breadcrumb-item\">\r\n            <a href=\"/#\">\r\n              <span class=\"optyweb cw-nav-home d-block d-md-none\" aria-hidden=\"true\"></span>\r\n              <span class=\"visually-hidden d-block d-md-none\">{{ \"_COMMON._BREADCRUMB.HOME\" | translate }}</span>\r\n              <span class=\"d-none d-md-block\">{{ \"_COMMON._BREADCRUMB.HOME\" | translate }}</span>\r\n            </a>\r\n          </li>\r\n          <li *ngFor=\"let item of getMenus(parent)\" class=\"breadcrumb-item active\">\r\n            <a *ngIf=\"!item.disabled\" [routerLink]=\"item.link\" href=\"#\">{{item.title | translate}}</a>\r\n            <span *ngIf=\"item.disabled\">{{item.title | translate}}</span>\r\n          </li>\r\n          <li aria-current=\"page\" class=\"breadcrumb-item active navbar-heading\">\r\n            <h1>{{ heading | translate:headingUrlParamsOptions }}</h1>\r\n          </li>\r\n        </ol>\r\n      </nav>\r\n\r\n      <span class=\"me-auto\"></span>\r\n\r\n      <ul class=\"navbar-nav\">\r\n\r\n        <li class=\"nav-item ms-0\" ngbDropdown placement=\"right\">\r\n          <button class=\"header-login d-flex align-items-center btn btn-light\" id=\"language\"\r\n            ngbDropdownToggle type=\"button\">\r\n            <span class=\"optyweb cw-misc-man2 header-avatar\" aria-hidden=\"true\"></span>\r\n            <span class=\"header-indicator\">\r\n              <span class=\"bo-icons bo-alert-success\" aria-hidden=\"true\"></span>\r\n              <span class=\"visually-hidden\">{{ '_COMMON._USER.LBL_LOGGED' | translate }}</span>\r\n              <!-- <img src=\"assets/images/common/check-mark.svg\" [alt]=\"'_COMMON._USER.LBL_LOGGED' | translate\"\r\n                class=\"header-indicator\" width=\"15\" height=\"15\"> -->\r\n              </span>\r\n            <span class=\"d-none d-lg-inline-block ms-3 me-1\">{{ loginName }}</span>\r\n          </button>\r\n          <div ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\r\n            <div class=\"dropdown-header font-md d-md-none\">\r\n              <span>{{ loginName }}</span>\r\n            </div>\r\n            <a class=\"dropdown-item\" href=\"javascript:;\">\r\n              <span>{{'_COMMON._USER.LBL_SETTINGS' | translate}}</span>\r\n            </a>\r\n            <a class=\"dropdown-item\" href=\"javascript:;\">\r\n              <span>{{'_COMMON._USER.LBL_PROFILE' | translate}}</span>\r\n            </a>\r\n            <a class=\"dropdown-item\" href=\"javascript:;\">\r\n              <span>{{'_COMMON._USER.LBL_NOTIFICATIONS' | translate}}</span>\r\n            </a>\r\n            <div class=\"dropdown-divider\"></div>\r\n            <a class=\"dropdown-item\" href=\"javascript:;\">\r\n              <span>{{'_COMMON._USER.LBL_HELP' | translate}}</span>\r\n            </a>\r\n            <a class=\"dropdown-item\" href=\"javascript:;\">\r\n              <span>{{ '_COMMON._ACTION.SIGN_OUT' | translate }}</span>\r\n            </a>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </form>\r\n</header>\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i2$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i2$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i2$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: HeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-header', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        RouterModule,
+                        CommonModule,
+                        TranslateModule,
+                        NgbDropdownModule
+                    ], template: "<header role=\"banner\" class=\"header\">\r\n  <form [formGroup]=\"formHeader\">\r\n    <nav class=\"navbar custom-navbar bg-faded main-header\">\r\n      <button type=\"button\" class=\"btn btn-primary menu-link\" (click)=\"onClick()\"\r\n        [title]=\"isMenuOpened ? ('_COMMON._MENU.BTN_MAIN_MENU_CLOSE' | translate) : ('_COMMON._MENU.BTN_MAIN_MENU_OPEN' | translate)\">\r\n        <span class=\"bo-icons\" [ngClass]=\"isMenuOpened ? 'bo-menu-expanded' : 'bo-menu-collapsed' \"\r\n          aria-hidden=\"true\"></span>\r\n        <span class=\"visually-hidden\">{{ '_COMMON._MENU.BTN_MAIN_MENU' | translate}}</span>\r\n      </button>\r\n\r\n      <nav aria-label=\"breadcrumb\">\r\n        <ol class=\"breadcrumb align-items-center\">\r\n          <li class=\"breadcrumb-item\">\r\n            <a href=\"/#\">\r\n              <span class=\"optyweb cw-nav-home d-block d-md-none\" aria-hidden=\"true\"></span>\r\n              <span class=\"visually-hidden d-block d-md-none\">{{ \"_COMMON._BREADCRUMB.HOME\" | translate }}</span>\r\n              <span class=\"d-none d-md-block\">{{ \"_COMMON._BREADCRUMB.HOME\" | translate }}</span>\r\n            </a>\r\n          </li>\r\n          <li *ngFor=\"let item of getMenus(parent)\" class=\"breadcrumb-item active\">\r\n            <a *ngIf=\"!item.disabled\" [routerLink]=\"item.link\" href=\"#\">{{item.title | translate}}</a>\r\n            <span *ngIf=\"item.disabled\">{{item.title | translate}}</span>\r\n          </li>\r\n          <li aria-current=\"page\" class=\"breadcrumb-item active navbar-heading\">\r\n            <h1>{{ heading | translate:headingUrlParamsOptions }}</h1>\r\n          </li>\r\n        </ol>\r\n      </nav>\r\n\r\n      <span class=\"me-auto\"></span>\r\n\r\n      <ul class=\"navbar-nav\">\r\n\r\n        <li class=\"nav-item ms-0\" ngbDropdown placement=\"right\">\r\n          <button class=\"header-login d-flex align-items-center btn btn-light\" id=\"language\"\r\n            ngbDropdownToggle type=\"button\">\r\n            <span class=\"optyweb cw-misc-man2 header-avatar\" aria-hidden=\"true\"></span>\r\n            <span class=\"header-indicator\">\r\n              <span class=\"bo-icons bo-alert-success\" aria-hidden=\"true\"></span>\r\n              <span class=\"visually-hidden\">{{ '_COMMON._USER.LBL_LOGGED' | translate }}</span>\r\n              <!-- <img src=\"assets/images/common/check-mark.svg\" [alt]=\"'_COMMON._USER.LBL_LOGGED' | translate\"\r\n                class=\"header-indicator\" width=\"15\" height=\"15\"> -->\r\n              </span>\r\n            <span class=\"d-none d-lg-inline-block ms-3 me-1\">{{ loginName }}</span>\r\n          </button>\r\n          <div ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\r\n            <div class=\"dropdown-header font-md d-md-none\">\r\n              <span>{{ loginName }}</span>\r\n            </div>\r\n            <a class=\"dropdown-item\" href=\"javascript:;\">\r\n              <span>{{'_COMMON._USER.LBL_SETTINGS' | translate}}</span>\r\n            </a>\r\n            <a class=\"dropdown-item\" href=\"javascript:;\">\r\n              <span>{{'_COMMON._USER.LBL_PROFILE' | translate}}</span>\r\n            </a>\r\n            <a class=\"dropdown-item\" href=\"javascript:;\">\r\n              <span>{{'_COMMON._USER.LBL_NOTIFICATIONS' | translate}}</span>\r\n            </a>\r\n            <div class=\"dropdown-divider\"></div>\r\n            <a class=\"dropdown-item\" href=\"javascript:;\">\r\n              <span>{{'_COMMON._USER.LBL_HELP' | translate}}</span>\r\n            </a>\r\n            <a class=\"dropdown-item\" href=\"javascript:;\">\r\n              <span>{{ '_COMMON._ACTION.SIGN_OUT' | translate }}</span>\r\n            </a>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </form>\r\n</header>\r\n" }]
+        }], ctorParameters: () => [{ type: i2.TranslateService }, { type: i2$2.UntypedFormBuilder }], propDecorators: { heading: [{
+                type: Input
+            }], headingUrlParamsOptions: [{
+                type: Input
+            }], parent: [{
+                type: Input
+            }], isMenuOpened: [{
+                type: Input
+            }], toggleSidenav: [{
+                type: Output
+            }] } });
+
+const SMALL_WIDTH_BREAKPOINT = 1300;
+class AdminLayoutComponent {
+    constructor(_element, router, route, translate, titleService, zone) {
+        this._element = _element;
+        this.router = router;
+        this.route = route;
+        this.translate = translate;
+        this.titleService = titleService;
+        this.zone = zone;
+        this.options = {
+            lang: 'en',
+            theme: 'test',
+            settings: false,
+            docked: false,
+            boxed: false,
+            opened: false
+        };
+        this.lang = 'lang-fr';
+        this.isMenuOpened = true;
+        this.mediaMatcher = matchMedia(`(max-width: 992px)`);
+        this.mediaMatcherLg = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);
+        this.handleMediaMatcherLg = (event) => {
+            this.zone.run(() => {
+                this.isMenuOpened = !event.matches;
+            });
+        };
+        this.handleMediaMatcher = (event) => {
+            this.zone.run(() => {
+                this.menuReponsiveMode = event.matches;
+            });
+        };
+        this.mediaMatcherLg.addEventListener('change', this.handleMediaMatcherLg);
+        this.mediaMatcher.addEventListener('change', this.handleMediaMatcher);
+    }
+    ngOnInit() {
+        this._router = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
+            // Scroll to top on view load
+            document.querySelector('.main-content').scrollTop = 0;
+            if (this.isOver()) {
+                this.sideMenu.close();
+            }
+            this.runOnRouteChange();
+        });
+        this.runOnRouteChange();
+        this.onLangChange();
+        this.lang = 'lang-' + localStorage.getItem('lang');
+        // Check résolution pour menu au chargement
+        this.handleMediaMatcherLg(this.mediaMatcherLg);
+        this.handleMediaMatcher(this.mediaMatcher);
+    }
+    ngOnDestroy() {
+        this._router.unsubscribe();
+        this.mediaMatcherLg.removeEventListener('change', this.handleMediaMatcherLg);
+        this.mediaMatcher.removeEventListener('change', this.handleMediaMatcher);
+    }
+    isOver() {
+        return this.mediaMatcherLg.matches;
+    }
+    isClosed() {
+        if (this.mediaMatcherLg.matches) {
+        }
+        console.log(this.sideMenu.opened);
+    }
+    receiveMessage($event) {
+        this.options = $event;
+    }
+    toggleFullscreen() {
+        const elem = this._element.nativeElement.querySelector('.main-content');
+        if (elem.requestFullscreen) {
+            elem.requestFullscreen();
+        }
+        else if (elem.webkitRequestFullScreen) {
+            elem.webkitRequestFullScreen();
+        }
+        else if (elem.mozRequestFullScreen) {
+            elem.mozRequestFullScreen();
+        }
+        else if (elem.msRequestFullScreen) {
+            elem.msRequestFullScreen();
+        }
+    }
+    runOnRouteChange() {
+        this.route.children.forEach((route) => {
+            let activeRoute = route;
+            while (activeRoute.firstChild) {
+                activeRoute = activeRoute.firstChild;
+            }
+            this.routeOptions = activeRoute.snapshot.data;
+            this.urlParamsOptions = activeRoute.params;
+        });
+        if (this.routeOptions.hasOwnProperty('heading')) {
+            // init a null des data qui seront envoye (permet d'avoir toujours un changement pour le OnChange dans l'enfant)
+            this.parentProperties = null;
+            // Si notre route a bien la propriete "Parent"
+            if (this.routeOptions.hasOwnProperty('parent')) {
+                // alors on remplie la variable qui sera envoyer a l'enfant
+                this.parentProperties = this.routeOptions.parent;
+            }
+            // set du titre
+            this.setTitle(this.translate.instant(this.routeOptions.heading, this.urlParamsOptions.value));
+        }
+    }
+    onLangChange() {
+        this.translate.onLangChange.subscribe((event) => {
+            this.setTitle(this.translate.instant(this.routeOptions.heading, this.urlParamsOptions.value));
+        });
+    }
+    setTitle(newTitle) {
+        this.titleService.setTitle(this.translate.instant(newTitle));
+    }
+    onToggleMenu() {
+        this.isMenuOpened = !this.isMenuOpened;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AdminLayoutComponent, deps: [{ token: i0.ElementRef }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.TranslateService }, { token: i3.Title }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: AdminLayoutComponent, isStandalone: true, selector: "app-admin", viewQueries: [{ propertyName: "sidebar", first: true, predicate: ["sidebar"], descendants: true }, { propertyName: "sideMenu", first: true, predicate: ["sideMenu"], descendants: true }], ngImport: i0, template: "<ngx-loading-bar></ngx-loading-bar>\r\n\r\n<app-skip-links></app-skip-links>\r\n\r\n\r\n<div class=\"wrapper\">\r\n  <app-sidebar [isOpened]=\"isMenuOpened\" class=\"bg-cover\" [ngClass]=\"{'bg-closed' : !isMenuOpened, 'bg-opened' : isMenuOpened, 'responsive-menu': menuReponsiveMode}\" (toggleSidenav)=\"onToggleMenu()\"></app-sidebar>\r\n  <div class=\"wrapper-content flex-grow-1\" [ngClass]=\"{'wrapper-content-closed' : !isMenuOpened, 'wrapper-content-opened' : isMenuOpened, 'wrapper-content-responsive': menuReponsiveMode}\">\r\n    <app-header (toggleSidenav)=\"onToggleMenu()\" [heading]=\"routeOptions.heading\" [isMenuOpened]=\"isMenuOpened\"\r\n      [headingUrlParamsOptions]=\"urlParamsOptions.value\" [parent]=\"parentProperties\"></app-header>\r\n    <main role=\"main\" id=\"content\" class=\"main-content\">\r\n      <router-outlet>\r\n      </router-outlet>\r\n    </main>\r\n    <app-footer></app-footer>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: LoadingBarRouterModule }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i4.LoadingBarComponent, selector: "ngx-loading-bar", inputs: ["includeSpinner", "includeBar", "fixed", "color", "value", "ref", "height", "diameter"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SidebarComponent, selector: "app-sidebar", inputs: ["isOpened"], outputs: ["toggleSidenav"] }, { kind: "component", type: SkipLinksComponent, selector: "app-skip-links" }, { kind: "component", type: FooterComponent, selector: "app-footer" }, { kind: "component", type: HeaderComponent, selector: "app-header", inputs: ["heading", "headingUrlParamsOptions", "parent", "isMenuOpened"], outputs: ["toggleSidenav"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AdminLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-admin', standalone: true, imports: [
+                        LoadingBarRouterModule,
+                        CommonModule,
+                        SidebarComponent,
+                        SkipLinksComponent,
+                        FooterComponent,
+                        HeaderComponent
+                    ], template: "<ngx-loading-bar></ngx-loading-bar>\r\n\r\n<app-skip-links></app-skip-links>\r\n\r\n\r\n<div class=\"wrapper\">\r\n  <app-sidebar [isOpened]=\"isMenuOpened\" class=\"bg-cover\" [ngClass]=\"{'bg-closed' : !isMenuOpened, 'bg-opened' : isMenuOpened, 'responsive-menu': menuReponsiveMode}\" (toggleSidenav)=\"onToggleMenu()\"></app-sidebar>\r\n  <div class=\"wrapper-content flex-grow-1\" [ngClass]=\"{'wrapper-content-closed' : !isMenuOpened, 'wrapper-content-opened' : isMenuOpened, 'wrapper-content-responsive': menuReponsiveMode}\">\r\n    <app-header (toggleSidenav)=\"onToggleMenu()\" [heading]=\"routeOptions.heading\" [isMenuOpened]=\"isMenuOpened\"\r\n      [headingUrlParamsOptions]=\"urlParamsOptions.value\" [parent]=\"parentProperties\"></app-header>\r\n    <main role=\"main\" id=\"content\" class=\"main-content\">\r\n      <router-outlet>\r\n      </router-outlet>\r\n    </main>\r\n    <app-footer></app-footer>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.TranslateService }, { type: i3.Title }, { type: i0.NgZone }], propDecorators: { sidebar: [{
+                type: ViewChild,
+                args: ['sidebar', { static: false }]
+            }], sideMenu: [{
+                type: ViewChild,
+                args: ['sideMenu', { static: false }]
+            }] } });
+
+class TitleBreadcrumbComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: TitleBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: TitleBreadcrumbComponent, isStandalone: true, selector: "app-title-breadcrumb", inputs: { heading: "heading" }, ngImport: i0, template: "<div class=\"bg-white border-bottom px-3 py-3\">\r\n  <h1>{{heading}}</h1>\r\n  <nav aria-label=\"breadcrumb\">\r\n    <ol class=\"breadcrumb\">\r\n      <li class=\"breadcrumb-item\"><a href=\"#\">{{ 'GENERIC.HOME' | translate}}</a></li>\r\n      <li class=\"breadcrumb-item\">{{ 'GENERIC.HOME' | translate}}</li>\r\n      <li class=\"breadcrumb-item active\" aria-current=\"page\">{{ heading | uppercase | translate }}</li>\r\n    </ol>\r\n    </nav>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: TitleBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-title-breadcrumb', standalone: true, imports: [
+                        TranslateModule,
+                        CommonModule
+                    ], template: "<div class=\"bg-white border-bottom px-3 py-3\">\r\n  <h1>{{heading}}</h1>\r\n  <nav aria-label=\"breadcrumb\">\r\n    <ol class=\"breadcrumb\">\r\n      <li class=\"breadcrumb-item\"><a href=\"#\">{{ 'GENERIC.HOME' | translate}}</a></li>\r\n      <li class=\"breadcrumb-item\">{{ 'GENERIC.HOME' | translate}}</li>\r\n      <li class=\"breadcrumb-item active\" aria-current=\"page\">{{ heading | uppercase | translate }}</li>\r\n    </ol>\r\n    </nav>\r\n</div>\r\n" }]
+        }], propDecorators: { heading: [{
+                type: Input
+            }] } });
+
+class AccordionsContentComponent {
+    constructor() {
+        this.disabled = false;
+        this.collapsed = true;
+    }
+    get fragment() {
+        return this.slugify(this.title);
+    }
+    slugify(text) {
+        return text
+            .toLowerCase()
+            .trim()
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '')
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AccordionsContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: AccordionsContentComponent, isStandalone: true, selector: "app-accordions-content", inputs: { title: "title", disabled: "disabled", collapsed: "collapsed" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: '<ng-template #content><ng-content></ng-content></ng-template>', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AccordionsContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-accordions-content',
+                    template: '<ng-template #content><ng-content></ng-content></ng-template>',
+                    standalone: true
+                }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], collapsed: [{
+                type: Input
+            }], templateRef: [{
+                type: ViewChild,
+                args: ['content', { static: true }]
+            }] } });
+
+class AccordionsComponent {
+    constructor() {
+        this.closeOthers = false;
+        this.id = 'classic';
+        this.destroyOnHide = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AccordionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AccordionsComponent, isStandalone: true, selector: "app-accordions", inputs: { title: "title", closeOthers: "closeOthers", id: "id", destroyOnHide: "destroyOnHide" }, queries: [{ propertyName: "accordions", predicate: AccordionsContentComponent }], ngImport: i0, template: "<div ngbAccordion [closeOthers]=\"closeOthers\" [destroyOnHide]=\"destroyOnHide\">\r\n   @for (accordion of accordions.toArray(); track $index) {\r\n    <div ngbAccordionItem [disabled]=\"accordion.disabled\" [collapsed]=\"accordion.collapsed\">\r\n      <h2 ngbAccordionHeader>\r\n        <button ngbAccordionButton [attr.data-test-ctw]=\"'button-accordion-' + id + '-' + $index\">\r\n          {{ accordion.title | translate }}\r\n        </button>\r\n      </h2>\r\n      <div ngbAccordionCollapse>\r\n        <div ngbAccordionBody>\r\n          <ng-container *ngTemplateOutlet=\"accordion.templateRef\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NgbAccordionModule }, { kind: "directive", type: i2$1.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i2$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i2$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i2$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "component", type: i2$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i2$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AccordionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-accordions', standalone: true, imports: [
+                        CommonModule,
+                        TranslateModule,
+                        NgbAccordionModule
+                    ], template: "<div ngbAccordion [closeOthers]=\"closeOthers\" [destroyOnHide]=\"destroyOnHide\">\r\n   @for (accordion of accordions.toArray(); track $index) {\r\n    <div ngbAccordionItem [disabled]=\"accordion.disabled\" [collapsed]=\"accordion.collapsed\">\r\n      <h2 ngbAccordionHeader>\r\n        <button ngbAccordionButton [attr.data-test-ctw]=\"'button-accordion-' + id + '-' + $index\">\r\n          {{ accordion.title | translate }}\r\n        </button>\r\n      </h2>\r\n      <div ngbAccordionCollapse>\r\n        <div ngbAccordionBody>\r\n          <ng-container *ngTemplateOutlet=\"accordion.templateRef\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { title: [{
+                type: Input
+            }], closeOthers: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], destroyOnHide: [{
+                type: Input
+            }], accordions: [{
+                type: ContentChildren,
+                args: [AccordionsContentComponent]
+            }] } });
+
+class AlertComponent {
+    constructor() {
+        this.isDismissible = false;
+        this.cssClass = '';
+        this.btnAction = new EventEmitter();
+        this.isVisible = true;
+    }
+    ngOnInit() {
+    }
+    closeAlert() {
+        this.isVisible = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AlertComponent, isStandalone: true, selector: "app-alert", inputs: { type: "type", title: "title", isDismissible: "isDismissible", cssClass: "cssClass", dataTest: "dataTest" }, outputs: { btnAction: "btnAction" }, ngImport: i0, template: "@if (isVisible) {\r\n  <div [class]=\"'alert alert-' + type + ' '+ cssClass\" [ngClass]=\"{ 'alert-dismissible fade show': isDismissible }\"\r\n    [attr.data-test-ctw]=\"dataTest ?? null\">\r\n\r\n    @if (title) {\r\n      <div class=\"fw-bold\">{{ title }}</div>\r\n    }\r\n\r\n    <ng-content></ng-content>\r\n\r\n    @if (isDismissible) {\r\n      <button type=\"button\" class=\"btn-close\" (click)=\"closeAlert()\" [attr.aria-label]=\"'_COMMON._ACTION.CLOSE' | translate\"></button>\r\n    }\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-alert', standalone: true, imports: [
+                        CommonModule,
+                        TranslateModule
+                    ], template: "@if (isVisible) {\r\n  <div [class]=\"'alert alert-' + type + ' '+ cssClass\" [ngClass]=\"{ 'alert-dismissible fade show': isDismissible }\"\r\n    [attr.data-test-ctw]=\"dataTest ?? null\">\r\n\r\n    @if (title) {\r\n      <div class=\"fw-bold\">{{ title }}</div>\r\n    }\r\n\r\n    <ng-content></ng-content>\r\n\r\n    @if (isDismissible) {\r\n      <button type=\"button\" class=\"btn-close\" (click)=\"closeAlert()\" [attr.aria-label]=\"'_COMMON._ACTION.CLOSE' | translate\"></button>\r\n    }\r\n  </div>\r\n}\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { type: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], isDismissible: [{
+                type: Input
+            }], cssClass: [{
+                type: Input
+            }], dataTest: [{
+                type: Input
+            }], btnAction: [{
+                type: Output
+            }] } });
+
+class IconComponent {
+    constructor() {
+        this.icon = 'cw-alert-help';
+        this.font = 'optyweb';
+        this.withOnlyIcon = false;
+    }
+    get hostClasses() {
+        return 'd-inline-flex align-items-center';
+    }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: IconComponent, isStandalone: true, selector: "app-icon", inputs: { icon: "icon", font: "font", withOnlyIcon: "withOnlyIcon", label: "label", iconCssClass: "iconCssClass", iconColorCustom: "iconColorCustom" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<span [class]=\"font + ' icon'\" [ngClass]=\"[icon, !withOnlyIcon ? 'me-2' : '', iconCssClass ? iconCssClass : '']\" aria-hidden=\"true\"\r\n [attr.style]=\"iconColorCustom ? 'color: ' + iconColorCustom : null\"></span>\r\n\r\n@if (!withOnlyIcon) {\r\n  <span>{{ label }}</span>\r\n}\r\n@else {\r\n  <span class=\"visually-hidden\">{{ label }}</span>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-icon', standalone: true, imports: [
+                        CommonModule
+                    ], template: "<span [class]=\"font + ' icon'\" [ngClass]=\"[icon, !withOnlyIcon ? 'me-2' : '', iconCssClass ? iconCssClass : '']\" aria-hidden=\"true\"\r\n [attr.style]=\"iconColorCustom ? 'color: ' + iconColorCustom : null\"></span>\r\n\r\n@if (!withOnlyIcon) {\r\n  <span>{{ label }}</span>\r\n}\r\n@else {\r\n  <span class=\"visually-hidden\">{{ label }}</span>\r\n}\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { icon: [{
+                type: Input
+            }], font: [{
+                type: Input
+            }], withOnlyIcon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], iconCssClass: [{
+                type: Input
+            }], iconColorCustom: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class BadgeComponent {
+    constructor() {
+        this.cssClass = '';
+    }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: BadgeComponent, isStandalone: true, selector: "app-badge", inputs: { type: "type", label: "label", withIcon: "withIcon", cssClass: "cssClass", dataTest: "dataTest" }, ngImport: i0, template: "<div [class]=\"'badge badge-' + type + ' '+ cssClass\" [attr.data-test-ctw]=\"dataTest ? dataTest : null\">\r\n  @if (withIcon) {\r\n    <app-icon [icon]=\"withIcon\" [label]=\"label\"></app-icon>\r\n  } @else {\r\n    {{ label }}\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon", "font", "withOnlyIcon", "label", "iconCssClass", "iconColorCustom"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-badge', standalone: true, imports: [IconComponent], template: "<div [class]=\"'badge badge-' + type + ' '+ cssClass\" [attr.data-test-ctw]=\"dataTest ? dataTest : null\">\r\n  @if (withIcon) {\r\n    <app-icon [icon]=\"withIcon\" [label]=\"label\"></app-icon>\r\n  } @else {\r\n    {{ label }}\r\n  }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { type: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], withIcon: [{
+                type: Input
+            }], cssClass: [{
+                type: Input
+            }], dataTest: [{
+                type: Input
+            }] } });
+
+class ButtonComponent {
+    constructor() {
+        this.isDropdown = false;
+        this.withOnlyIcon = false;
+        this.isMinWidth = false;
+        this.isDisabled = false;
+        this.withSpinner = false;
+        this.small = false;
+        this.btnAction = new EventEmitter();
+        this.isLoading = false;
+    }
+    ngOnInit() {
+    }
+    onBtnAction() {
+        this.btnAction.emit();
+        if (this.withSpinner) {
+            this.isLoading = !this.isLoading;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { type: "type", isDropdown: "isDropdown", withIcon: "withIcon", withOnlyIcon: "withOnlyIcon", isMinWidth: "isMinWidth", isDisabled: "isDisabled", withSpinner: "withSpinner", label: "label", small: "small", dataTest: "dataTest" }, outputs: { btnAction: "btnAction" }, ngImport: i0, template: "@if (!isDropdown) {\r\n  <button type=\"button\" class=\"btn\"\r\n    [class]=\"'btn-' + type\"\r\n    [ngClass]=\"{ 'btn-min-width': isMinWidth, 'btn-sm': small }\"\r\n    [disabled]=\"isDisabled\"\r\n    (click)=\"onBtnAction()\"\r\n    [attr.data-test-ctw]=\"dataTest ?? null\">\r\n\r\n    @if (isLoading) {\r\n      <span class=\"spinner-border spinner-border-sm me-2\" aria-hidden=\"true\"></span>\r\n      <span class=\"visually-hidden\" role=\"status\">{{ '_COMMON._HTTP.TXT_LOADING' | translate }}</span>\r\n    }\r\n\r\n    @if (withIcon) {\r\n      <app-icon [icon]=\"withIcon\" [label]=\"label\" [withOnlyIcon]=\"withOnlyIcon\"></app-icon>\r\n    }\r\n    @else {\r\n      {{ label | translate }}\r\n    }\r\n  </button>\r\n}\r\n@else {\r\n  <div ngbDropdown class=\"d-inline-block\">\r\n    <button class=\"btn\"\r\n      [class]=\"'btn-' + type\"\r\n      ngbDropdownToggle\r\n      type=\"button\"\r\n      [ngClass]=\"{ 'btn-min-width': isMinWidth, 'spinner-border': isLoading }\"\r\n      [disabled]=\"isDisabled\"\r\n      [attr.data-test-ctw]=\"dataTest ?? null\">\r\n\r\n      @if (withIcon) {\r\n        <app-icon class=\"me-2\"></app-icon>\r\n      }\r\n\r\n      {{ label | translate }}\r\n    </button>\r\n\r\n    <ul ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\r\n      <ng-content></ng-content>\r\n    </ul>\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i2$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i2$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i2$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon", "font", "withOnlyIcon", "label", "iconCssClass", "iconColorCustom"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-button', standalone: true, imports: [
+                        CommonModule,
+                        TranslateModule,
+                        NgbDropdownModule,
+                        IconComponent
+                    ], template: "@if (!isDropdown) {\r\n  <button type=\"button\" class=\"btn\"\r\n    [class]=\"'btn-' + type\"\r\n    [ngClass]=\"{ 'btn-min-width': isMinWidth, 'btn-sm': small }\"\r\n    [disabled]=\"isDisabled\"\r\n    (click)=\"onBtnAction()\"\r\n    [attr.data-test-ctw]=\"dataTest ?? null\">\r\n\r\n    @if (isLoading) {\r\n      <span class=\"spinner-border spinner-border-sm me-2\" aria-hidden=\"true\"></span>\r\n      <span class=\"visually-hidden\" role=\"status\">{{ '_COMMON._HTTP.TXT_LOADING' | translate }}</span>\r\n    }\r\n\r\n    @if (withIcon) {\r\n      <app-icon [icon]=\"withIcon\" [label]=\"label\" [withOnlyIcon]=\"withOnlyIcon\"></app-icon>\r\n    }\r\n    @else {\r\n      {{ label | translate }}\r\n    }\r\n  </button>\r\n}\r\n@else {\r\n  <div ngbDropdown class=\"d-inline-block\">\r\n    <button class=\"btn\"\r\n      [class]=\"'btn-' + type\"\r\n      ngbDropdownToggle\r\n      type=\"button\"\r\n      [ngClass]=\"{ 'btn-min-width': isMinWidth, 'spinner-border': isLoading }\"\r\n      [disabled]=\"isDisabled\"\r\n      [attr.data-test-ctw]=\"dataTest ?? null\">\r\n\r\n      @if (withIcon) {\r\n        <app-icon class=\"me-2\"></app-icon>\r\n      }\r\n\r\n      {{ label | translate }}\r\n    </button>\r\n\r\n    <ul ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\r\n      <ng-content></ng-content>\r\n    </ul>\r\n  </div>\r\n}\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { type: [{
+                type: Input
+            }], isDropdown: [{
+                type: Input
+            }], withIcon: [{
+                type: Input
+            }], withOnlyIcon: [{
+                type: Input
+            }], isMinWidth: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], withSpinner: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], small: [{
+                type: Input
+            }], dataTest: [{
+                type: Input
+            }], btnAction: [{
+                type: Output
+            }] } });
+
+class CardComponent {
+    constructor(cdRef) {
+        this.cdRef = cdRef;
+        this.showFooter = true;
+    }
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+        this.showFooter = this.cardFooter.nativeElement && this.cardFooter.nativeElement.children.length > 0;
+        this.cdRef.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CardComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CardComponent, isStandalone: true, selector: "app-card", inputs: { title: "title" }, viewQueries: [{ propertyName: "cardFooter", first: true, predicate: ["cardFooter"], descendants: true }], ngImport: i0, template: "<div class=\"card\">\r\n  @if (title) {\r\n    <h2 class=\"card-header\">{{ title }}</h2>\r\n  }\r\n\r\n  <div class=\"card-body\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  @if (showFooter) {\r\n    <div class=\"card-footer\" #cardFooter>\r\n      <ng-content select=\"[card-footer]\"></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-card', standalone: true, imports: [
+                        CommonModule
+                    ], template: "<div class=\"card\">\r\n  @if (title) {\r\n    <h2 class=\"card-header\">{{ title }}</h2>\r\n  }\r\n\r\n  <div class=\"card-body\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  @if (showFooter) {\r\n    <div class=\"card-footer\" #cardFooter>\r\n      <ng-content select=\"[card-footer]\"></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { title: [{
+                type: Input
+            }], cardFooter: [{
+                type: ViewChild,
+                args: ['cardFooter']
+            }] } });
+
+class CustomListComponent {
+    constructor() {
+        this.customListData = [];
+    }
+    ngOnInit() {
+    }
+    hasValue(value) {
+        if (value === null || value === undefined) {
+            return false;
+        }
+        ;
+        if (typeof value === 'string' && value.trim() === '') {
+            return false;
+        }
+        ;
+        if (Array.isArray(value) && value.length === 0) {
+            return false;
+        }
+        ;
+        if (typeof value === 'object' && Object.keys(value).length === 0) {
+            return false;
+        }
+        ;
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CustomListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CustomListComponent, isStandalone: true, selector: "app-custom-list", inputs: { customListData: "customListData" }, ngImport: i0, template: "<div class=\"custom-card-light\">\r\n  @for (group of customListData; track group.title) {\r\n    @if (group.title) {\r\n      <h3>{{ group.title | translate }}</h3>\r\n    }\r\n\r\n    <dl class=\"custom-description-list\">\r\n      @for (field of group.fields; track field.label) {\r\n        @if (!field.hideIfEmpty || hasValue(field.value)) {\r\n          <dt [innerHTML]=\"'_LABEL.COLON' | translate: { label: (field.label | translate) }\"></dt>\r\n          <dd>\r\n            @switch (field.type) {\r\n              @case ('date') {\r\n                {{ field.value | date: 'short' }}\r\n              }\r\n              @case ('boolean') {\r\n                {{ (field.value ? '_COMMON._PRO_SENTENCE.YES' : '_COMMON._PRO_SENTENCE.NO') | translate }}\r\n              }\r\n              @case ('html') {\r\n                <span [innerHTML]=\"field.value\"></span>\r\n              }\r\n              @default {\r\n                {{ field.translateValue ? (field.value | translate) : field.value }}\r\n              }\r\n            }\r\n          </dd>\r\n        }\r\n      }\r\n    </dl>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CustomListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-custom-list', standalone: true, imports: [
+                        CommonModule,
+                        TranslateModule
+                    ], template: "<div class=\"custom-card-light\">\r\n  @for (group of customListData; track group.title) {\r\n    @if (group.title) {\r\n      <h3>{{ group.title | translate }}</h3>\r\n    }\r\n\r\n    <dl class=\"custom-description-list\">\r\n      @for (field of group.fields; track field.label) {\r\n        @if (!field.hideIfEmpty || hasValue(field.value)) {\r\n          <dt [innerHTML]=\"'_LABEL.COLON' | translate: { label: (field.label | translate) }\"></dt>\r\n          <dd>\r\n            @switch (field.type) {\r\n              @case ('date') {\r\n                {{ field.value | date: 'short' }}\r\n              }\r\n              @case ('boolean') {\r\n                {{ (field.value ? '_COMMON._PRO_SENTENCE.YES' : '_COMMON._PRO_SENTENCE.NO') | translate }}\r\n              }\r\n              @case ('html') {\r\n                <span [innerHTML]=\"field.value\"></span>\r\n              }\r\n              @default {\r\n                {{ field.translateValue ? (field.value | translate) : field.value }}\r\n              }\r\n            }\r\n          </dd>\r\n        }\r\n      }\r\n    </dl>\r\n  }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { customListData: [{
+                type: Input
+            }] } });
+
+class DragNDropListComponent {
+    constructor() {
+        this.availableItems = [];
+        this.activeItems = [];
+        this.availableItemsChange = new EventEmitter();
+        this.activeItemsChange = new EventEmitter();
+    }
+    drop(event) {
+        if (event.previousContainer === event.container) {
+            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+        }
+        else {
+            transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
+        }
+        this.availableItemsChange.emit(this.availableItems);
+        this.activeItemsChange.emit(this.activeItems);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DragNDropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: DragNDropListComponent, isStandalone: true, selector: "app-drag-n-drop-list", inputs: { availableItems: "availableItems", activeItems: "activeItems", itemTemplate: "itemTemplate" }, outputs: { availableItemsChange: "availableItemsChange", activeItemsChange: "activeItemsChange" }, ngImport: i0, template: "<div class=\"drag-drop-list\">\r\n  <div class=\"list-column\" cdkDropList #availableList=\"cdkDropList\" [cdkDropListData]=\"availableItems\"\r\n    [cdkDropListConnectedTo]=\"[activeList]\" (cdkDropListDropped)=\"drop($event)\">\r\n    <h3>Modes disponibles</h3>\r\n    @for (item of availableItems; track item) {\r\n      <div cdkDrag>\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate || defaultTemplate; context: { $implicit: item }\"></ng-container>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"list-column\" cdkDropList #activeList=\"cdkDropList\" [cdkDropListData]=\"activeItems\"\r\n    [cdkDropListConnectedTo]=\"[availableList]\" (cdkDropListDropped)=\"drop($event)\">\r\n    <h3>Modes activ\u00E9s</h3>\r\n    @for (item of activeItems; track item) {\r\n      <div cdkDrag>\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate || defaultTemplate; context: { $implicit: item }\"></ng-container>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <ng-template #defaultTemplate let-item>\r\n    <div class=\"default-item\">\r\n      Mode : {{ item.label }} ({{ item.code }} )\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DragNDropListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-drag-n-drop-list', standalone: true, imports: [
+                        CommonModule,
+                        TranslateModule,
+                        DragDropModule
+                    ], template: "<div class=\"drag-drop-list\">\r\n  <div class=\"list-column\" cdkDropList #availableList=\"cdkDropList\" [cdkDropListData]=\"availableItems\"\r\n    [cdkDropListConnectedTo]=\"[activeList]\" (cdkDropListDropped)=\"drop($event)\">\r\n    <h3>Modes disponibles</h3>\r\n    @for (item of availableItems; track item) {\r\n      <div cdkDrag>\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate || defaultTemplate; context: { $implicit: item }\"></ng-container>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"list-column\" cdkDropList #activeList=\"cdkDropList\" [cdkDropListData]=\"activeItems\"\r\n    [cdkDropListConnectedTo]=\"[availableList]\" (cdkDropListDropped)=\"drop($event)\">\r\n    <h3>Modes activ\u00E9s</h3>\r\n    @for (item of activeItems; track item) {\r\n      <div cdkDrag>\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate || defaultTemplate; context: { $implicit: item }\"></ng-container>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <ng-template #defaultTemplate let-item>\r\n    <div class=\"default-item\">\r\n      Mode : {{ item.label }} ({{ item.code }} )\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n" }]
+        }], propDecorators: { availableItems: [{
+                type: Input
+            }], activeItems: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], availableItemsChange: [{
+                type: Output
+            }], activeItemsChange: [{
+                type: Output
+            }] } });
+
+var FormFieldTypeEnum;
+(function (FormFieldTypeEnum) {
+    FormFieldTypeEnum["text"] = "text";
+    FormFieldTypeEnum["date"] = "date";
+    FormFieldTypeEnum["time"] = "time";
+    FormFieldTypeEnum["dateTime"] = "datetime-local";
+    FormFieldTypeEnum["textarea"] = "textarea";
+    FormFieldTypeEnum["select"] = "select";
+    FormFieldTypeEnum["radio"] = "radio";
+    FormFieldTypeEnum["radioInline"] = "radioInline";
+    FormFieldTypeEnum["radioButton"] = "radioButton";
+    FormFieldTypeEnum["checkbox"] = "checkbox";
+    FormFieldTypeEnum["checkboxInline"] = "checkboxInline";
+    FormFieldTypeEnum["checkboxButton"] = "checkboxButton";
+    FormFieldTypeEnum["switch"] = "switch";
+    FormFieldTypeEnum["switchSmall"] = "switchSmall";
+    FormFieldTypeEnum["ngSelect"] = "ngSelect";
+    FormFieldTypeEnum["ngSelectMultiple"] = "ngSelectMultiple";
+    FormFieldTypeEnum["number"] = "number";
+    FormFieldTypeEnum["color"] = "color";
+    FormFieldTypeEnum["file"] = "file";
+    FormFieldTypeEnum["password"] = "password";
+    FormFieldTypeEnum["email"] = "email";
+    FormFieldTypeEnum["slider"] = "slider";
+    FormFieldTypeEnum["dateToDate"] = "dateToDate";
+    FormFieldTypeEnum["datePlusOne"] = "datePlusOne";
+    FormFieldTypeEnum["datePlusTwo"] = "datePlusTwo";
+    FormFieldTypeEnum["datePlusSeven"] = "datePlusSeven";
+    FormFieldTypeEnum["dateComplexe"] = "dateComplexe";
+    FormFieldTypeEnum["dateTimeToDateTime"] = "dateTimeToDateTime";
+    FormFieldTypeEnum["timeToTime"] = "timeToTime";
+})(FormFieldTypeEnum || (FormFieldTypeEnum = {}));
+
+class ShowHidePasswordDirective {
+    constructor(el, renderer, translateService) {
+        this.el = el;
+        this.renderer = renderer;
+        this.translateService = translateService;
+        this.isShown = false;
+    }
+    ngOnInit() {
+        this.setup();
+    }
+    setup() {
+        const div = this.renderer.createElement('div');
+        this.renderer.insertBefore(this.el.nativeElement.parentNode, div, this.el.nativeElement);
+        this.renderer.appendChild(div, this.el.nativeElement);
+        this.renderer.addClass(div, 'see-password-container');
+        const button = this.renderer.createElement('button');
+        this.renderer.appendChild(this.el.nativeElement.parentNode, button);
+        this.renderer.addClass(button, 'btn');
+        this.renderer.setAttribute(button, 'type', 'button');
+        this.renderer.addClass(button, 'optyweb');
+        this.renderer.addClass(button, 'cw-hide-map');
+        this.renderer.addClass(button, 'py-2');
+        this.renderer.addClass(button, 'see-password');
+        const srOnly = this.renderer.createElement('span');
+        this.renderer.appendChild(button, srOnly);
+        this.renderer.addClass(srOnly, 'visually-hidden');
+        this.renderer.setProperty(srOnly, 'innerHTML', this.translateService.instant('_COMMON._FORM._SHOW_HIDE_PWD.SHOW'));
+        this.renderer.listen(button, 'click', (event) => {
+            this.isShown = !this.isShown;
+            if (this.isShown) {
+                this.el.nativeElement.setAttribute('type', 'text');
+                this.renderer.removeClass(button, 'cw-hide-map');
+                this.renderer.addClass(button, 'cw-show-map');
+                this.renderer.setProperty(srOnly, 'innerHTML', this.translateService.instant('_COMMON._FORM._SHOW_HIDE_PWD.HIDE'));
+            }
+            else {
+                this.el.nativeElement.setAttribute('type', 'password');
+                this.renderer.addClass(button, 'cw-hide-map');
+                this.renderer.removeClass(button, 'cw-show-map');
+                this.renderer.setProperty(srOnly, 'innerHTML', this.translateService.instant('_COMMON._FORM._SHOW_HIDE_PWD.SHOW'));
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ShowHidePasswordDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: ShowHidePasswordDirective, isStandalone: true, selector: "[showHidePassword]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ShowHidePasswordDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[showHidePassword]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.TranslateService }] });
+
+function rangeValidator(group, type) {
+    const startControl = group.get('start');
+    const endControl = group.get('end');
+    const start = startControl?.value;
+    const end = endControl?.value;
+    if (!start || !end)
+        return null;
+    let startValue;
+    let endValue;
+    switch (type) {
+        case 'time':
+            startValue = parseTime(start);
+            endValue = parseTime(end);
+            break;
+        case 'datetime':
+            startValue = new Date(start).getTime();
+            endValue = new Date(end).getTime();
+            break;
+        default: // date
+            startValue = new Date(start).setHours(0, 0, 0, 0);
+            endValue = new Date(end).setHours(0, 0, 0, 0);
+    }
+    if (startValue > endValue) {
+        // Marquer les enfants comme invalid
+        startControl?.setErrors({ ...startControl.errors, rangeInvalid: true });
+        endControl?.setErrors({ ...endControl.errors, rangeInvalid: true });
+        return { rangeInvalid: true };
+    }
+    else {
+        // Supprimer l’erreur rangeInvalid si présente
+        if (startControl?.errors?.['rangeInvalid']) {
+            const { rangeInvalid, ...rest } = startControl.errors;
+            startControl.setErrors(Object.keys(rest).length ? rest : null);
+        }
+        if (endControl?.errors?.['rangeInvalid']) {
+            const { rangeInvalid, ...rest } = endControl.errors;
+            endControl.setErrors(Object.keys(rest).length ? rest : null);
+        }
+    }
+    return null;
+}
+function parseTime(time) {
+    const [h, m] = time.split(':').map(Number);
+    return h * 60 + m;
+}
+class FormFieldComponent {
+    get hostClasses() {
+        return 'position-relative';
+    }
+    constructor() {
+        this.options = [];
+        this.isRequired = false;
+        this.isInAddon = false;
+        this.isReadonly = false;
+        this.isDisabled = false;
+        this.inTableFilter = false;
+        this.clearFieldFilter = new EventEmitter();
+        this.refreshEvent = new EventEmitter();
+        this.typeField = FormFieldTypeEnum;
+    }
+    get isRange() {
+        if (!this.control)
+            return false;
+        return this.control instanceof FormGroup &&
+            'start' in this.control.controls &&
+            'end' in this.control.controls;
+    }
+    get formControl() {
+        return this.control;
+    }
+    get controlOrGroup() {
+        return this.control ?? this.formGroup?.get(this.name);
+    }
+    ngOnInit() {
+        console.log(this.isRange, this.control);
+        if (this.formGroup && this.name) {
+            const group = this.formGroup.get(this.name);
+            if (group instanceof FormGroup) {
+                switch (this.type) {
+                    case this.typeField.dateToDate:
+                        group.setValidators(g => rangeValidator(g, 'date'));
+                        break;
+                    case this.typeField.timeToTime:
+                        group.setValidators(g => rangeValidator(g, 'time'));
+                        break;
+                    case this.typeField.dateTimeToDateTime:
+                        group.setValidators(g => rangeValidator(g, 'datetime'));
+                        break;
+                }
+                group.updateValueAndValidity();
+            }
+        }
+    }
+    onCheckboxChange(event) {
+        const checkbox = event.target;
+        const valueArray = this.control.value || [];
+        if (checkbox.checked) {
+            this.control.setValue([...valueArray, checkbox.value]);
+        }
+        else {
+            this.control.setValue(valueArray.filter((v) => v !== checkbox.value));
+        }
+        this.control.markAsTouched();
+    }
+    onBlur() {
+        if (this.control && !this.control.touched) {
+            this.control.markAsTouched();
+        }
+    }
+    isInInputGroup() {
+        const inInputGroup = [
+            this.typeField.text,
+            this.typeField.date,
+            this.typeField.time,
+            this.typeField.dateTime,
+            this.typeField.number,
+            this.typeField.email,
+            this.typeField.textarea,
+            this.typeField.password,
+        ].includes(this.type);
+        return inInputGroup;
+    }
+    getControl(path) {
+        if (!this.isRange)
+            return null;
+        const group = this.control;
+        return group.get(path);
+    }
+    getInputType() {
+        switch (this.type) {
+            case this.typeField.dateToDate:
+                return 'date';
+            case this.typeField.timeToTime:
+                return 'time';
+            case this.typeField.dateTimeToDateTime:
+                return 'datetime-local';
+            default:
+                return 'text';
+        }
+    }
+    onClearFieldFilter() {
+        this.clearFieldFilter.emit();
+    }
+    onClearFieldPeriod(path) {
+        const ctrl = this.getControl(path);
+        if (ctrl) {
+            ctrl.setValue(null);
+            ctrl.markAsPristine();
+            ctrl.markAsUntouched();
+        }
+    }
+    onClearField(control) {
+        control?.setValue(null);
+        control?.markAsPristine();
+        control?.markAsUntouched();
+    }
+    onDateAddDay(direction) {
+        const current = this.getDateValue();
+        if (current) {
+            const delta = direction === 'prev' ? -1 : 1;
+            current.setDate(current.getDate() + delta);
+            this.formControl.setValue(this.formatDate(current));
+        }
+    }
+    onTodayAddDay(days) {
+        const today = new Date();
+        today.setDate(today.getDate() + days);
+        this.formControl.setValue(this.formatDate(today));
+    }
+    onRefresh() {
+        this.refreshEvent.emit();
+    }
+    getDateValue() {
+        const value = this.formControl.value;
+        if (!value)
+            return null;
+        const date = new Date(value);
+        return isNaN(date.getTime()) ? null : date;
+    }
+    formatDate(date) {
+        const year = date.getFullYear();
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const day = date.getDate().toString().padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: FormFieldComponent, isStandalone: true, selector: "app-form-field", inputs: { control: "control", formGroup: "formGroup", type: "type", label: "label", name: "name", placeholder: "placeholder", options: "options", isRequired: "isRequired", help: "help", tooltip: "tooltip", addonLeft: "addonLeft", addonRight: "addonRight", isInAddon: "isInAddon", isReadonly: "isReadonly", isDisabled: "isDisabled", sliderValue: "sliderValue", sliderOptions: "sliderOptions", cssClass: "cssClass", inTableFilter: "inTableFilter" }, outputs: { clearFieldFilter: "clearFieldFilter", refreshEvent: "refreshEvent" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@if (!isInAddon && !inTableFilter) {\r\n  <div class=\"form-group\">\r\n    @if (\r\n    type !== typeField.checkbox &&\r\n    type !== typeField.radio &&\r\n    type !== typeField.checkboxButton &&\r\n    type !== typeField.radioButton &&\r\n    type !== typeField.checkboxInline &&\r\n    type !== typeField.radioInline &&\r\n    type !== typeField.switch &&\r\n    type !== typeField.switchSmall\r\n\r\n    ) {\r\n      <label [for]=\"name\" class=\"form-label\">\r\n        {{ label }}\r\n\r\n        @if (isRequired) {\r\n          <span class=\"text-danger\">*</span>\r\n        }\r\n\r\n        @if (tooltip) {\r\n          <button type=\"button\" class=\"btn btn-link btn-popover\" placement=\"bottom\" [ngbPopover]=\"popContent\" container=\"body\"\r\n            triggers=\"mouseenter:mouseleave\">\r\n            <span class=\"btn-popover-icon bo-icons bo-help\"></span>\r\n          </button>\r\n          <ng-template #popContent>\r\n            <div [innerHTML]=\"tooltip\"></div>\r\n          </ng-template>\r\n        }\r\n      </label>\r\n    }\r\n\r\n    @if (addonLeft || addonRight) {\r\n      <div class=\"input-group\">\r\n        <ng-container *ngIf=\"addonLeft\" [ngTemplateOutlet]=\"addonLeft\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n        <ng-container *ngIf=\"addonRight\" [ngTemplateOutlet]=\"addonRight\"></ng-container>\r\n      </div>\r\n    }\r\n    @else {\r\n      @if ( isInInputGroup() ) {\r\n        <div class=\"input-group\">\r\n          <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n        </div>\r\n      }\r\n      @else {\r\n        <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n      }\r\n    }\r\n\r\n    <!-- Error message -->\r\n    @if (controlOrGroup?.invalid && controlOrGroup?.touched) {\r\n      <div class=\"invalid-feedback d-block\" [id]=\"'error-' + name\">\r\n        <span\r\n          *ngIf=\"(controlOrGroup?.errors?.['required']) || (getControl('start')?.errors?.['required'] || getControl('end')?.errors?.['required'])\"\r\n          [innerHtml]=\"'_COMMON._FORM.ERROR_IS_MANDATORY' | translate: {label: label}\">\r\n        </span>\r\n        <span *ngIf=\"controlOrGroup?.errors?.['rangeInvalid']\">\r\n          {{'_COMMON._DATES.ERROR_START_END_PERIOD' | translate}}\r\n        </span>\r\n      </div>\r\n    }\r\n\r\n    @if (help) {\r\n      <small [id]=\"name + '-help'\" class=\"form-text text-muted\">{{help}}</small>\r\n    }\r\n\r\n  </div>\r\n}\r\n@else if ( inTableFilter ) {\r\n  <label class=\"form-label\" [for]=\"name\" class=\"visually-hidden\">\r\n    {{'_COMMON._FORM.FILTER_LABEL' | translate: { col: name } }}\r\n  </label>\r\n\r\n  @if ( isInInputGroup() ) {\r\n    <div class=\"input-group\">\r\n      <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n    </div>\r\n  }\r\n  @else {\r\n    <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n  }\r\n}\r\n@else {\r\n  <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n}\r\n\r\n<ng-template #field>\r\n  <!-- Text -->\r\n  @if ([typeField.text, typeField.date, typeField.time, typeField.dateTime, typeField.number, typeField.file,\r\n  typeField.email,\r\n  typeField.color].includes(type)) {\r\n    <input [type]=\"type\" class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n      [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n      [attr.placeholder]=\"placeholder ? placeholder : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n      [attr.readonly]=\"isReadonly ? 'readonly' : null\" [disabled]=\"isDisabled\"\r\n      [attr.aria-required]=\"isRequired\" [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n      [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" />\r\n  }\r\n\r\n  @if (type === typeField.password) {\r\n    <input showHidePassword [type]=\"type\" class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n      [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n      [attr.required]=\"isRequired ? 'required' : null\" [attr.readonly]=\"isReadonly ? 'readonly' : null\"\r\n      [attr.disabled]=\"isDisabled ? 'disabled' : null\" [attr.aria-required]=\"isRequired\"\r\n      [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n      [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" />\r\n  }\r\n\r\n  <!-- Textarea -->\r\n  @if (type === typeField.textarea) {\r\n    <textarea class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n      [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n      [attr.placeholder]=\"placeholder ? placeholder : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n      [attr.readonly]=\"isReadonly ? 'readonly' : null\" [attr.disabled]=\"isDisabled ? 'disabled' : null\"\r\n      [attr.aria-required]=\"isRequired\" [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n      [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\"></textarea>\r\n  }\r\n\r\n  <!-- Select -->\r\n  @if (type === typeField.select) {\r\n    <ng-select [formControl]=\"formControl\" [items]=\"options\" bindLabel=\"label\" [labelForId]=\"name\" bindValue=\"value\"\r\n      [ngClass]=\"cssClass\" [searchable]=\"false\" [placeholder]=\"placeholder ? placeholder : null\" [readonly]=\"isReadonly\"\r\n      [attr.disabled]=\"isDisabled ? 'disabled' : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n      [attr.aria-required]=\"isRequired\" [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n      [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" [attr.id]=\"name\"\r\n      (blur)=\"onBlur()\">\r\n      <ng-content></ng-content>\r\n    </ng-select>\r\n  }\r\n\r\n  <!-- NgSelect -->\r\n  @if (type === typeField.ngSelect || type === typeField.ngSelectMultiple) {\r\n    <ng-select [formControl]=\"formControl\" [items]=\"options\" bindLabel=\"label\" [labelForId]=\"name\" bindValue=\"value\"\r\n      [multiple]=\"type === typeField.ngSelectMultiple\" [ngClass]=\"cssClass\"\r\n      [placeholder]=\"placeholder ? placeholder : null\" [readonly]=\"isReadonly\"\r\n      [notFoundText]=\"'_COMMON.NO_RESULT' | translate\" [attr.disabled]=\"isDisabled ? 'disabled' : null\"\r\n      [attr.required]=\"isRequired ? 'required' : null\" [attr.aria-required]=\"isRequired\"\r\n      [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n      [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" [attr.id]=\"name\"\r\n      (blur)=\"onBlur()\">\r\n      <ng-content></ng-content>\r\n    </ng-select>\r\n  }\r\n\r\n  <!-- Radio -->\r\n  @if (type === typeField.radioInline || type === typeField.radio) {\r\n    <fieldset [ngClass]=\"{ 'flex-column': type === typeField.radio }\">\r\n      <legend>{{label}}</legend>\r\n      <ul class=\" mb-0\" [ngClass]=\"type === typeField.radioInline ? 'list-inline' : 'list-unstyled'\">\r\n        <li *ngFor=\"let opt of options\" class=\"form-check\"\r\n          [ngClass]=\"{ 'form-check-inline': type === typeField.radioInline }\">\r\n          <input type=\"radio\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" [formControl]=\"formControl\"\r\n            class=\"form-check-input\" />\r\n          <label [for]=\"name + '_' + opt.value\" class=\"form-check-label\">{{ opt.label }}</label>\r\n        </li>\r\n      </ul>\r\n    </fieldset>\r\n  }\r\n\r\n  <!-- Radio button -->\r\n  @if (type === typeField.radioButton) {\r\n    <fieldset>\r\n      <legend>{{label}}</legend>\r\n      <div class=\"btn-group btn-group-secondary\">\r\n        <ng-container *ngFor=\"let opt of options\">\r\n          <input type=\"radio\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" [formControl]=\"formControl\"\r\n            class=\"visually-hidden\" />\r\n          <label [for]=\"name + '_' + opt.value\" class=\"btn btn-form\">{{ opt.label }}</label>\r\n        </ng-container>\r\n      </div>\r\n    </fieldset>\r\n  }\r\n\r\n  <!-- Checkbox  Switch -->\r\n  @if (\r\n  (type === typeField.checkbox ||\r\n  type === typeField.switch ||\r\n  type === typeField.switchSmall)\r\n  && options.length === 0\r\n  ) {\r\n    <div class=\"form-check form-switch\" [ngClass]=\"{'form-switch-small': type === typeField.switchSmall}\">\r\n      <input type=\"checkbox\" [id]=\"name\" [formControl]=\"formControl\" class=\"form-check-input\" />\r\n      <label [for]=\"name\" class=\"form-check-label\">{{ label }}</label>\r\n    </div>\r\n  }\r\n\r\n  <!-- Checkbox -->\r\n  @if ((type === typeField.checkboxInline || type === typeField.checkbox) && options.length > 0) {\r\n    <fieldset *ngIf=\"\" [ngClass]=\"{ 'flex-column': type === typeField.checkbox }\">\r\n      <legend>{{label}}</legend>\r\n      <ul class=\"mb-0\" [ngClass]=\"type === typeField.checkboxInline ? 'list-inline' : 'list-unstyled'\">\r\n        <li *ngFor=\"let opt of options\" class=\"form-check\"\r\n          [ngClass]=\"{ 'form-check-inline': type === typeField.checkboxInline }\">\r\n          <input type=\"checkbox\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" (change)=\"onCheckboxChange($event)\"\r\n            [checked]=\"control.value?.includes(opt.value)\" class=\"form-check-input\" />\r\n          <label [for]=\"name + '_' + opt.value\" class=\"form-check-label\">{{ opt.label }}</label>\r\n        </li>\r\n      </ul>\r\n    </fieldset>\r\n  }\r\n\r\n  <!-- Checkbox button -->\r\n  @if (type === typeField.checkboxButton) {\r\n    <fieldset>\r\n      <legend>{{label}}</legend>\r\n      <div class=\"btn-group btn-group-secondary\">\r\n        <ng-container *ngFor=\"let opt of options\">\r\n          <input type=\"checkbox\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" (change)=\"onCheckboxChange($event)\"\r\n            [checked]=\"control.value?.includes(opt.value)\" class=\"visually-hidden\" />\r\n          <label [for]=\"name + '_' + opt.value\" class=\"btn btn-form\">{{ opt.label }}</label>\r\n        </ng-container>\r\n      </div>\r\n    </fieldset>\r\n  }\r\n\r\n  <!-- Period - DateToDate / TimeToTime / DateTimeToDateTime -->\r\n  @if ([typeField.dateToDate, typeField.timeToTime, typeField.dateTimeToDateTime].includes(type) && isRange) {\r\n\r\n    <div class=\"input-group\">\r\n      @if (!inTableFilter) {\r\n        <span class=\"input-group-text text-lowercase\" [class.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          {{ type === typeField.timeToTime ? ('_COMMON._DATES.FROM' | translate) : ('_COMMON._DATES.FROM_TO_1' | translate)\r\n          }}\r\n        </span>\r\n        }\r\n\r\n      <input [type]=\"getInputType()\" class=\"form-control\" [id]=\"name + '_start'\" [formControl]=\"getControl('start')\"\r\n        [attr.placeholder]=\"inTableFilter ? (type === typeField.timeToTime ? ('_COMMON._DATES.FROM' | translate) : ('_COMMON._DATES.FROM_TO_1' | translate)) : null\"\r\n        [ngClass]=\"[(cssClass || ''), getControl('start')?.value ? 'has-value' : '']\"\r\n        [attr.required]=\"isRequired ? 'required' : null\" [attr.readonly]=\"isReadonly ? 'readonly' : null\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\" [attr.aria-required]=\"isRequired\"\r\n        [attr.aria-invalid]=\"getControl('start')?.invalid && getControl('start')?.touched\"\r\n        [attr.aria-describedby]=\"getControl('start')?.invalid && getControl('start')?.touched ? 'error-' + name : null\" />\r\n\r\n      <button *ngIf=\"getControl('start')?.value\" type=\"button\" class=\"btn btn-secondary btn-clear-field\"\r\n        (click)=\"onClearFieldPeriod('start')\">\r\n        &times;\r\n      </button>\r\n\r\n      @if (!inTableFilter) {\r\n        <span class=\"input-group-text text-lowercase\" [class.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          {{ type === typeField.timeToTime ? ('_COMMON._DATES.TO' | translate) : ('_COMMON._DATES.FROM_TO_2' | translate) }}\r\n        </span>\r\n      }\r\n\r\n      <input [type]=\"getInputType()\" class=\"form-control\" [id]=\"name + '_end'\" [formControl]=\"getControl('end')\"\r\n        [attr.placeholder]=\"inTableFilter ? (type === typeField.timeToTime ? ('_COMMON._DATES.TO' | translate) : ('_COMMON._DATES.FROM_TO_2' | translate)) : null\"\r\n        [ngClass]=\"[(cssClass || ''), getControl('end')?.value ? 'has-value' : '']\"\r\n        [attr.required]=\"isRequired ? 'required' : null\" [attr.readonly]=\"isReadonly ? 'readonly' : null\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\"\r\n        [attr.aria-invalid]=\"getControl('end')?.invalid && getControl('end')?.touched\"\r\n        [attr.aria-describedby]=\"getControl('end')?.invalid && getControl('end')?.touched ? 'error-' + name : null\" />\r\n\r\n      <button *ngIf=\"getControl('end')?.value\" type=\"button\" class=\"btn btn-secondary btn-clear-field\"\r\n        (click)=\"onClearFieldPeriod('end')\">\r\n        &times;\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if ([typeField.datePlusOne, typeField.datePlusTwo, typeField.datePlusSeven, typeField.dateComplexe].includes(type)) {\r\n    <div class=\"input-group\">\r\n\r\n      @if (type === typeField.dateComplexe) {\r\n      <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onDateAddDay('prev')\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n        <app-icon font=\"optyweb\" icon=\"cw-nav-next-left\" [withOnlyIcon]=\"true\" [label]=\"'Jour pr\u00E9c\u00E9dent'\"></app-icon>\r\n      </button>\r\n      }\r\n\r\n      <input type=\"date\" class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n        [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n        [attr.placeholder]=\"placeholder ? placeholder : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n        [attr.readonly]=\"isReadonly ? 'readonly' : null\" [disabled]=\"isDisabled\"\r\n        [attr.aria-required]=\"isRequired\" [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n        [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" />\r\n      <button *ngIf=\"formControl?.value\" class=\"btn btn-secondary btn-clear-field\" type=\"button\"\r\n        (click)=\"onClearField(formControl)\">&times;</button>\r\n\r\n      @if (type === typeField.dateComplexe) {\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onDateAddDay('next')\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          <app-icon font=\"optyweb\" icon=\"cw-nav-next-right\" [withOnlyIcon]=\"true\" [label]=\"'Jour suivant'\"></app-icon>\r\n        </button>\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onRefresh()\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          <app-icon font=\"optyweb\" icon=\"cw-toolbar-reload\" [withOnlyIcon]=\"true\" [label]=\"'Rafra\u00EEchir'\"></app-icon>\r\n        </button>\r\n      }\r\n\r\n      <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(0)\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n        J\r\n        <span class=\"visually-hidden\">Aujourd'hui</span>\r\n      </button>\r\n      <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(1)\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n        J+1\r\n        <span class=\"visually-hidden\">Demain</span>\r\n      </button>\r\n\r\n      @if (type !== typeField.datePlusOne && type !== typeField.dateComplexe) {\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(2)\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          J+2\r\n          <span class=\"visually-hidden\">Dans 2 jours</span>\r\n        </button>\r\n\r\n        @if (type !== typeField.datePlusTwo) {\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(7)\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          J+7\r\n          <span class=\"visually-hidden\">Dans 7 jours</span>\r\n        </button>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (type === typeField.slider) {\r\n    <ngx-slider [(value)]=\"sliderValue\" [options]=\"sliderOptions\" [formControl]=\"formControl\"></ngx-slider>\r\n  }\r\n\r\n  @if (inTableFilter && isInInputGroup()) {\r\n    <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onClearFieldFilter()\">&times;</button>\r\n  }\r\n  @else if (isInInputGroup()) {\r\n    <button *ngIf=\"formControl?.value\" class=\"btn btn-secondary btn-clear-field\" type=\"button\"\r\n      (click)=\"onClearField(formControl)\">&times;</button>\r\n  }\r\n\r\n</ng-template>\r\n", 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "ngmodule", type: NgxSliderModule }, { kind: "component", type: i4$1.SliderComponent, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus", "cancelUserChange"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "directive", type: ShowHidePasswordDirective, selector: "[showHidePassword]" }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon", "font", "withOnlyIcon", "label", "iconCssClass", "iconColorCustom"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: FormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-form-field', standalone: true, imports: [
+                        CommonModule,
+                        TranslateModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NgSelectModule,
+                        NgbDropdownModule,
+                        NgxSliderModule,
+                        NgbPopover,
+                        ShowHidePasswordDirective,
+                        IconComponent
+                    ], template: "@if (!isInAddon && !inTableFilter) {\r\n  <div class=\"form-group\">\r\n    @if (\r\n    type !== typeField.checkbox &&\r\n    type !== typeField.radio &&\r\n    type !== typeField.checkboxButton &&\r\n    type !== typeField.radioButton &&\r\n    type !== typeField.checkboxInline &&\r\n    type !== typeField.radioInline &&\r\n    type !== typeField.switch &&\r\n    type !== typeField.switchSmall\r\n\r\n    ) {\r\n      <label [for]=\"name\" class=\"form-label\">\r\n        {{ label }}\r\n\r\n        @if (isRequired) {\r\n          <span class=\"text-danger\">*</span>\r\n        }\r\n\r\n        @if (tooltip) {\r\n          <button type=\"button\" class=\"btn btn-link btn-popover\" placement=\"bottom\" [ngbPopover]=\"popContent\" container=\"body\"\r\n            triggers=\"mouseenter:mouseleave\">\r\n            <span class=\"btn-popover-icon bo-icons bo-help\"></span>\r\n          </button>\r\n          <ng-template #popContent>\r\n            <div [innerHTML]=\"tooltip\"></div>\r\n          </ng-template>\r\n        }\r\n      </label>\r\n    }\r\n\r\n    @if (addonLeft || addonRight) {\r\n      <div class=\"input-group\">\r\n        <ng-container *ngIf=\"addonLeft\" [ngTemplateOutlet]=\"addonLeft\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n        <ng-container *ngIf=\"addonRight\" [ngTemplateOutlet]=\"addonRight\"></ng-container>\r\n      </div>\r\n    }\r\n    @else {\r\n      @if ( isInInputGroup() ) {\r\n        <div class=\"input-group\">\r\n          <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n        </div>\r\n      }\r\n      @else {\r\n        <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n      }\r\n    }\r\n\r\n    <!-- Error message -->\r\n    @if (controlOrGroup?.invalid && controlOrGroup?.touched) {\r\n      <div class=\"invalid-feedback d-block\" [id]=\"'error-' + name\">\r\n        <span\r\n          *ngIf=\"(controlOrGroup?.errors?.['required']) || (getControl('start')?.errors?.['required'] || getControl('end')?.errors?.['required'])\"\r\n          [innerHtml]=\"'_COMMON._FORM.ERROR_IS_MANDATORY' | translate: {label: label}\">\r\n        </span>\r\n        <span *ngIf=\"controlOrGroup?.errors?.['rangeInvalid']\">\r\n          {{'_COMMON._DATES.ERROR_START_END_PERIOD' | translate}}\r\n        </span>\r\n      </div>\r\n    }\r\n\r\n    @if (help) {\r\n      <small [id]=\"name + '-help'\" class=\"form-text text-muted\">{{help}}</small>\r\n    }\r\n\r\n  </div>\r\n}\r\n@else if ( inTableFilter ) {\r\n  <label class=\"form-label\" [for]=\"name\" class=\"visually-hidden\">\r\n    {{'_COMMON._FORM.FILTER_LABEL' | translate: { col: name } }}\r\n  </label>\r\n\r\n  @if ( isInInputGroup() ) {\r\n    <div class=\"input-group\">\r\n      <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n    </div>\r\n  }\r\n  @else {\r\n    <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n  }\r\n}\r\n@else {\r\n  <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n}\r\n\r\n<ng-template #field>\r\n  <!-- Text -->\r\n  @if ([typeField.text, typeField.date, typeField.time, typeField.dateTime, typeField.number, typeField.file,\r\n  typeField.email,\r\n  typeField.color].includes(type)) {\r\n    <input [type]=\"type\" class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n      [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n      [attr.placeholder]=\"placeholder ? placeholder : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n      [attr.readonly]=\"isReadonly ? 'readonly' : null\" [disabled]=\"isDisabled\"\r\n      [attr.aria-required]=\"isRequired\" [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n      [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" />\r\n  }\r\n\r\n  @if (type === typeField.password) {\r\n    <input showHidePassword [type]=\"type\" class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n      [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n      [attr.required]=\"isRequired ? 'required' : null\" [attr.readonly]=\"isReadonly ? 'readonly' : null\"\r\n      [attr.disabled]=\"isDisabled ? 'disabled' : null\" [attr.aria-required]=\"isRequired\"\r\n      [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n      [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" />\r\n  }\r\n\r\n  <!-- Textarea -->\r\n  @if (type === typeField.textarea) {\r\n    <textarea class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n      [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n      [attr.placeholder]=\"placeholder ? placeholder : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n      [attr.readonly]=\"isReadonly ? 'readonly' : null\" [attr.disabled]=\"isDisabled ? 'disabled' : null\"\r\n      [attr.aria-required]=\"isRequired\" [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n      [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\"></textarea>\r\n  }\r\n\r\n  <!-- Select -->\r\n  @if (type === typeField.select) {\r\n    <ng-select [formControl]=\"formControl\" [items]=\"options\" bindLabel=\"label\" [labelForId]=\"name\" bindValue=\"value\"\r\n      [ngClass]=\"cssClass\" [searchable]=\"false\" [placeholder]=\"placeholder ? placeholder : null\" [readonly]=\"isReadonly\"\r\n      [attr.disabled]=\"isDisabled ? 'disabled' : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n      [attr.aria-required]=\"isRequired\" [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n      [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" [attr.id]=\"name\"\r\n      (blur)=\"onBlur()\">\r\n      <ng-content></ng-content>\r\n    </ng-select>\r\n  }\r\n\r\n  <!-- NgSelect -->\r\n  @if (type === typeField.ngSelect || type === typeField.ngSelectMultiple) {\r\n    <ng-select [formControl]=\"formControl\" [items]=\"options\" bindLabel=\"label\" [labelForId]=\"name\" bindValue=\"value\"\r\n      [multiple]=\"type === typeField.ngSelectMultiple\" [ngClass]=\"cssClass\"\r\n      [placeholder]=\"placeholder ? placeholder : null\" [readonly]=\"isReadonly\"\r\n      [notFoundText]=\"'_COMMON.NO_RESULT' | translate\" [attr.disabled]=\"isDisabled ? 'disabled' : null\"\r\n      [attr.required]=\"isRequired ? 'required' : null\" [attr.aria-required]=\"isRequired\"\r\n      [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n      [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" [attr.id]=\"name\"\r\n      (blur)=\"onBlur()\">\r\n      <ng-content></ng-content>\r\n    </ng-select>\r\n  }\r\n\r\n  <!-- Radio -->\r\n  @if (type === typeField.radioInline || type === typeField.radio) {\r\n    <fieldset [ngClass]=\"{ 'flex-column': type === typeField.radio }\">\r\n      <legend>{{label}}</legend>\r\n      <ul class=\" mb-0\" [ngClass]=\"type === typeField.radioInline ? 'list-inline' : 'list-unstyled'\">\r\n        <li *ngFor=\"let opt of options\" class=\"form-check\"\r\n          [ngClass]=\"{ 'form-check-inline': type === typeField.radioInline }\">\r\n          <input type=\"radio\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" [formControl]=\"formControl\"\r\n            class=\"form-check-input\" />\r\n          <label [for]=\"name + '_' + opt.value\" class=\"form-check-label\">{{ opt.label }}</label>\r\n        </li>\r\n      </ul>\r\n    </fieldset>\r\n  }\r\n\r\n  <!-- Radio button -->\r\n  @if (type === typeField.radioButton) {\r\n    <fieldset>\r\n      <legend>{{label}}</legend>\r\n      <div class=\"btn-group btn-group-secondary\">\r\n        <ng-container *ngFor=\"let opt of options\">\r\n          <input type=\"radio\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" [formControl]=\"formControl\"\r\n            class=\"visually-hidden\" />\r\n          <label [for]=\"name + '_' + opt.value\" class=\"btn btn-form\">{{ opt.label }}</label>\r\n        </ng-container>\r\n      </div>\r\n    </fieldset>\r\n  }\r\n\r\n  <!-- Checkbox  Switch -->\r\n  @if (\r\n  (type === typeField.checkbox ||\r\n  type === typeField.switch ||\r\n  type === typeField.switchSmall)\r\n  && options.length === 0\r\n  ) {\r\n    <div class=\"form-check form-switch\" [ngClass]=\"{'form-switch-small': type === typeField.switchSmall}\">\r\n      <input type=\"checkbox\" [id]=\"name\" [formControl]=\"formControl\" class=\"form-check-input\" />\r\n      <label [for]=\"name\" class=\"form-check-label\">{{ label }}</label>\r\n    </div>\r\n  }\r\n\r\n  <!-- Checkbox -->\r\n  @if ((type === typeField.checkboxInline || type === typeField.checkbox) && options.length > 0) {\r\n    <fieldset *ngIf=\"\" [ngClass]=\"{ 'flex-column': type === typeField.checkbox }\">\r\n      <legend>{{label}}</legend>\r\n      <ul class=\"mb-0\" [ngClass]=\"type === typeField.checkboxInline ? 'list-inline' : 'list-unstyled'\">\r\n        <li *ngFor=\"let opt of options\" class=\"form-check\"\r\n          [ngClass]=\"{ 'form-check-inline': type === typeField.checkboxInline }\">\r\n          <input type=\"checkbox\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" (change)=\"onCheckboxChange($event)\"\r\n            [checked]=\"control.value?.includes(opt.value)\" class=\"form-check-input\" />\r\n          <label [for]=\"name + '_' + opt.value\" class=\"form-check-label\">{{ opt.label }}</label>\r\n        </li>\r\n      </ul>\r\n    </fieldset>\r\n  }\r\n\r\n  <!-- Checkbox button -->\r\n  @if (type === typeField.checkboxButton) {\r\n    <fieldset>\r\n      <legend>{{label}}</legend>\r\n      <div class=\"btn-group btn-group-secondary\">\r\n        <ng-container *ngFor=\"let opt of options\">\r\n          <input type=\"checkbox\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" (change)=\"onCheckboxChange($event)\"\r\n            [checked]=\"control.value?.includes(opt.value)\" class=\"visually-hidden\" />\r\n          <label [for]=\"name + '_' + opt.value\" class=\"btn btn-form\">{{ opt.label }}</label>\r\n        </ng-container>\r\n      </div>\r\n    </fieldset>\r\n  }\r\n\r\n  <!-- Period - DateToDate / TimeToTime / DateTimeToDateTime -->\r\n  @if ([typeField.dateToDate, typeField.timeToTime, typeField.dateTimeToDateTime].includes(type) && isRange) {\r\n\r\n    <div class=\"input-group\">\r\n      @if (!inTableFilter) {\r\n        <span class=\"input-group-text text-lowercase\" [class.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          {{ type === typeField.timeToTime ? ('_COMMON._DATES.FROM' | translate) : ('_COMMON._DATES.FROM_TO_1' | translate)\r\n          }}\r\n        </span>\r\n        }\r\n\r\n      <input [type]=\"getInputType()\" class=\"form-control\" [id]=\"name + '_start'\" [formControl]=\"getControl('start')\"\r\n        [attr.placeholder]=\"inTableFilter ? (type === typeField.timeToTime ? ('_COMMON._DATES.FROM' | translate) : ('_COMMON._DATES.FROM_TO_1' | translate)) : null\"\r\n        [ngClass]=\"[(cssClass || ''), getControl('start')?.value ? 'has-value' : '']\"\r\n        [attr.required]=\"isRequired ? 'required' : null\" [attr.readonly]=\"isReadonly ? 'readonly' : null\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\" [attr.aria-required]=\"isRequired\"\r\n        [attr.aria-invalid]=\"getControl('start')?.invalid && getControl('start')?.touched\"\r\n        [attr.aria-describedby]=\"getControl('start')?.invalid && getControl('start')?.touched ? 'error-' + name : null\" />\r\n\r\n      <button *ngIf=\"getControl('start')?.value\" type=\"button\" class=\"btn btn-secondary btn-clear-field\"\r\n        (click)=\"onClearFieldPeriod('start')\">\r\n        &times;\r\n      </button>\r\n\r\n      @if (!inTableFilter) {\r\n        <span class=\"input-group-text text-lowercase\" [class.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          {{ type === typeField.timeToTime ? ('_COMMON._DATES.TO' | translate) : ('_COMMON._DATES.FROM_TO_2' | translate) }}\r\n        </span>\r\n      }\r\n\r\n      <input [type]=\"getInputType()\" class=\"form-control\" [id]=\"name + '_end'\" [formControl]=\"getControl('end')\"\r\n        [attr.placeholder]=\"inTableFilter ? (type === typeField.timeToTime ? ('_COMMON._DATES.TO' | translate) : ('_COMMON._DATES.FROM_TO_2' | translate)) : null\"\r\n        [ngClass]=\"[(cssClass || ''), getControl('end')?.value ? 'has-value' : '']\"\r\n        [attr.required]=\"isRequired ? 'required' : null\" [attr.readonly]=\"isReadonly ? 'readonly' : null\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\"\r\n        [attr.aria-invalid]=\"getControl('end')?.invalid && getControl('end')?.touched\"\r\n        [attr.aria-describedby]=\"getControl('end')?.invalid && getControl('end')?.touched ? 'error-' + name : null\" />\r\n\r\n      <button *ngIf=\"getControl('end')?.value\" type=\"button\" class=\"btn btn-secondary btn-clear-field\"\r\n        (click)=\"onClearFieldPeriod('end')\">\r\n        &times;\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if ([typeField.datePlusOne, typeField.datePlusTwo, typeField.datePlusSeven, typeField.dateComplexe].includes(type)) {\r\n    <div class=\"input-group\">\r\n\r\n      @if (type === typeField.dateComplexe) {\r\n      <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onDateAddDay('prev')\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n        <app-icon font=\"optyweb\" icon=\"cw-nav-next-left\" [withOnlyIcon]=\"true\" [label]=\"'Jour pr\u00E9c\u00E9dent'\"></app-icon>\r\n      </button>\r\n      }\r\n\r\n      <input type=\"date\" class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n        [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n        [attr.placeholder]=\"placeholder ? placeholder : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n        [attr.readonly]=\"isReadonly ? 'readonly' : null\" [disabled]=\"isDisabled\"\r\n        [attr.aria-required]=\"isRequired\" [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n        [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" />\r\n      <button *ngIf=\"formControl?.value\" class=\"btn btn-secondary btn-clear-field\" type=\"button\"\r\n        (click)=\"onClearField(formControl)\">&times;</button>\r\n\r\n      @if (type === typeField.dateComplexe) {\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onDateAddDay('next')\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          <app-icon font=\"optyweb\" icon=\"cw-nav-next-right\" [withOnlyIcon]=\"true\" [label]=\"'Jour suivant'\"></app-icon>\r\n        </button>\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onRefresh()\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          <app-icon font=\"optyweb\" icon=\"cw-toolbar-reload\" [withOnlyIcon]=\"true\" [label]=\"'Rafra\u00EEchir'\"></app-icon>\r\n        </button>\r\n      }\r\n\r\n      <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(0)\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n        J\r\n        <span class=\"visually-hidden\">Aujourd'hui</span>\r\n      </button>\r\n      <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(1)\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n        J+1\r\n        <span class=\"visually-hidden\">Demain</span>\r\n      </button>\r\n\r\n      @if (type !== typeField.datePlusOne && type !== typeField.dateComplexe) {\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(2)\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          J+2\r\n          <span class=\"visually-hidden\">Dans 2 jours</span>\r\n        </button>\r\n\r\n        @if (type !== typeField.datePlusTwo) {\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(7)\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          J+7\r\n          <span class=\"visually-hidden\">Dans 7 jours</span>\r\n        </button>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (type === typeField.slider) {\r\n    <ngx-slider [(value)]=\"sliderValue\" [options]=\"sliderOptions\" [formControl]=\"formControl\"></ngx-slider>\r\n  }\r\n\r\n  @if (inTableFilter && isInInputGroup()) {\r\n    <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onClearFieldFilter()\">&times;</button>\r\n  }\r\n  @else if (isInInputGroup()) {\r\n    <button *ngIf=\"formControl?.value\" class=\"btn btn-secondary btn-clear-field\" type=\"button\"\r\n      (click)=\"onClearField(formControl)\">&times;</button>\r\n  }\r\n\r\n</ng-template>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { control: [{
+                type: Input
+            }], formGroup: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], isRequired: [{
+                type: Input
+            }], help: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], addonLeft: [{
+                type: Input
+            }], addonRight: [{
+                type: Input
+            }], isInAddon: [{
+                type: Input
+            }], isReadonly: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], sliderValue: [{
+                type: Input
+            }], sliderOptions: [{
+                type: Input
+            }], cssClass: [{
+                type: Input
+            }], inTableFilter: [{
+                type: Input
+            }], clearFieldFilter: [{
+                type: Output
+            }], refreshEvent: [{
+                type: Output
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+var LegendTypeEnum;
+(function (LegendTypeEnum) {
+    LegendTypeEnum["icon"] = "icon";
+    LegendTypeEnum["badge"] = "badge";
+    LegendTypeEnum["color"] = "color";
+})(LegendTypeEnum || (LegendTypeEnum = {}));
+
+class LegendComponent {
+    constructor() {
+        this.legendTypeEnum = LegendTypeEnum;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: LegendComponent, isStandalone: true, selector: "app-legend", inputs: { legend: "legend" }, ngImport: i0, template: "<div *ngIf=\"legend.title\" class=\"legend-title\">\r\n  {{ '_COMMON._TABLE.LEGEND' | translate }}\r\n</div>\r\n<ul class=\"list-inline legend-items\">\r\n  @for (item of legend.data; track $index) {\r\n    <li class=\"list-inline-item legend-item\">\r\n        @switch (item.type) {\r\n          @case (legendTypeEnum.icon) {\r\n            <app-icon [icon]=\"item.icon\" [label]=\"item.label\" [iconCssClass]=\"'text-' + item.colorUi\" [iconColorCustom]=\"item.colorCustom\">\r\n            </app-icon>\r\n          }\r\n          @case (legendTypeEnum.badge) {\r\n            <app-badge [type]=\"item.colorUi\" [label]=\"item.labelBadge\"></app-badge>\r\n            {{item.label}}\r\n          }\r\n          @case (legendTypeEnum.color) {\r\n            <span class=\"legend-item-color\" [ngClass]=\"item.colorUi ?'legend-' + item.colorUi : ''\" [style.background-color]=\"item.colorCustom\"></span>\r\n            {{item.label}}\r\n          }\r\n        }\r\n    </li>\r\n  }\r\n</ul>\r\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"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon", "font", "withOnlyIcon", "label", "iconCssClass", "iconColorCustom"] }, { kind: "component", type: BadgeComponent, selector: "app-badge", inputs: ["type", "label", "withIcon", "cssClass", "dataTest"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LegendComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-legend', standalone: true, imports: [
+                        CommonModule,
+                        IconComponent,
+                        BadgeComponent,
+                        TranslateModule
+                    ], template: "<div *ngIf=\"legend.title\" class=\"legend-title\">\r\n  {{ '_COMMON._TABLE.LEGEND' | translate }}\r\n</div>\r\n<ul class=\"list-inline legend-items\">\r\n  @for (item of legend.data; track $index) {\r\n    <li class=\"list-inline-item legend-item\">\r\n        @switch (item.type) {\r\n          @case (legendTypeEnum.icon) {\r\n            <app-icon [icon]=\"item.icon\" [label]=\"item.label\" [iconCssClass]=\"'text-' + item.colorUi\" [iconColorCustom]=\"item.colorCustom\">\r\n            </app-icon>\r\n          }\r\n          @case (legendTypeEnum.badge) {\r\n            <app-badge [type]=\"item.colorUi\" [label]=\"item.labelBadge\"></app-badge>\r\n            {{item.label}}\r\n          }\r\n          @case (legendTypeEnum.color) {\r\n            <span class=\"legend-item-color\" [ngClass]=\"item.colorUi ?'legend-' + item.colorUi : ''\" [style.background-color]=\"item.colorCustom\"></span>\r\n            {{item.label}}\r\n          }\r\n        }\r\n    </li>\r\n  }\r\n</ul>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { legend: [{
+                type: Input
+            }] } });
+
+class LoaderComponent {
+    constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: LoaderComponent, isStandalone: true, selector: "app-loader", ngImport: i0, template: "<div class=\"animated-loader-container animated-loader-medium animated-loader-container-top\">\r\n  <div class=\"animated-loader mb-1\" aria-live=\"assertive\"></div>\r\n  <div class=\"animated-loader-text\">{{ '_COMMON._HTTP.TXT_LOADING' | translate }}</div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-loader', standalone: true, imports: [
+                        TranslateModule
+                    ], template: "<div class=\"animated-loader-container animated-loader-medium animated-loader-container-top\">\r\n  <div class=\"animated-loader mb-1\" aria-live=\"assertive\"></div>\r\n  <div class=\"animated-loader-text\">{{ '_COMMON._HTTP.TXT_LOADING' | translate }}</div>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [] });
+
+var ModalsType;
+(function (ModalsType) {
+    ModalsType["delete"] = "delete";
+    ModalsType["loader"] = "loader";
+    ModalsType["quickSideView"] = "quicksideview";
+    ModalsType["custom"] = "custom";
+})(ModalsType || (ModalsType = {}));
+
+var UiTypeEnum;
+(function (UiTypeEnum) {
+    UiTypeEnum["primary"] = "primary";
+    UiTypeEnum["secondary"] = "secondary";
+    UiTypeEnum["light"] = "light";
+    UiTypeEnum["info"] = "info";
+    UiTypeEnum["success"] = "success";
+    UiTypeEnum["warning"] = "warning";
+    UiTypeEnum["danger"] = "danger";
+    UiTypeEnum["link"] = "link";
+    UiTypeEnum["dark"] = "dark";
+})(UiTypeEnum || (UiTypeEnum = {}));
+
+class ModalsComponent {
+    constructor(activeModal, translateService) {
+        this.activeModal = activeModal;
+        this.translateService = translateService;
+        this.itemsToDelete = [];
+        this.itemsToDeleteTitle = this.translateService.instant('_COMMON._MODAL_DELETE.DEFAULT_TYPE');
+        this.btnAction = new EventEmitter();
+        this.modalsType = ModalsType;
+        this.buttonTypeEnum = UiTypeEnum;
+    }
+    ngOnInit() {
+        this.labelBtnAction = this.type === this.modalsType.quickSideView
+            ? this.translateService.instant('_COMMON._ACTION.EDIT') : this.labelBtnAction;
+    }
+    actionClick() {
+        this.activeModal.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ModalsComponent, deps: [{ token: i2$1.NgbActiveModal }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ModalsComponent, isStandalone: true, selector: "app-modals", inputs: { type: "type", modalTitle: "modalTitle", itemsToDelete: "itemsToDelete", itemsToDeleteTitle: "itemsToDeleteTitle", labelBtnAction: "labelBtnAction", customBodyTemplate: "customBodyTemplate", customBodyContext: "customBodyContext" }, outputs: { btnAction: "btnAction" }, ngImport: i0, template: "@if (type !== modalsType.loader) {\r\n  <div class=\"modal-header\">\r\n    @if (type === modalsType.delete) {\r\n      <h1 class=\"modal-title\" id=\"modal-basic-title\">\r\n        {{ '_COMMON._MODAL_DELETE.TITLE' | translate: { number: itemsToDelete.length, name: itemsToDeleteTitle } }}\r\n      </h1>\r\n    }\r\n    @else {\r\n      <h1 class=\"modal-title\" id=\"modal-basic-title\">\r\n        {{ modalTitle | translate }}\r\n      </h1>\r\n    }\r\n\r\n    <button type=\"button\" class=\"btn-close\" [attr.aria-label]=\"'_COMMON._ACTION.CLOSE' | translate\"\r\n      (click)=\"activeModal.dismiss()\" data-test-ctw=\"btn-close-modal\">\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"modal-body\">\r\n    @if (type === modalsType.delete) {\r\n      @if (itemsToDelete.length === 1) {\r\n        <div [innerHTML]=\"'_COMMON._MODAL_DELETE.SIMPLE_TEXT' | translate\"></div>\r\n      }\r\n      @if (itemsToDelete.length > 1) {\r\n        <div [innerHTML]=\"'_COMMON._MODAL_DELETE.MULTIPLE_TEXT' | translate\"></div>\r\n      }\r\n      @if (itemsToDelete.length > 0) {\r\n        <ul class=\"mb-0\">\r\n          @for (item of itemsToDelete; track item) {\r\n            <li>{{ item }}</li>\r\n          }\r\n        </ul>\r\n      }\r\n    }\r\n    @else if (type === modalsType.custom || type === modalsType.quickSideView) {\r\n      @if (customBodyTemplate) {\r\n        <ng-container [ngTemplateOutlet]=\"customBodyTemplate\" [ngTemplateOutletContext]=\"customBodyContext\">\r\n        </ng-container>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div class=\"modal-footer\">\r\n    @if (type === modalsType.delete) {\r\n      <app-button label=\"_COMMON._ACTION.DELETE\" [type]=\"buttonTypeEnum.danger\" [isMinWidth]=\"true\"\r\n        (btnAction)=\"actionClick()\" dataTest=\"btn-action-modal\">\r\n      </app-button>\r\n\r\n      <app-button label=\"_COMMON._ACTION.CANCEL\" [type]=\"buttonTypeEnum.secondary\" [isMinWidth]=\"true\"\r\n        (btnAction)=\"activeModal.dismiss()\" dataTest=\"btn-close-modal\">\r\n      </app-button>\r\n    }\r\n    @else {\r\n      @if(labelBtnAction) {\r\n        <app-button [label]=\"labelBtnAction | translate\" [type]=\"buttonTypeEnum.primary\" [isMinWidth]=\"true\"\r\n          (btnAction)=\"actionClick()\" dataTest=\"btn-close-modal\">\r\n        </app-button>\r\n      }\r\n\r\n      <app-button label=\"_COMMON._ACTION.CLOSE\" [type]=\"buttonTypeEnum.secondary\" [isMinWidth]=\"true\"\r\n        (btnAction)=\"activeModal.dismiss()\" dataTest=\"btn-close-modal\">\r\n      </app-button>\r\n    }\r\n  </div>\r\n}\r\n\r\n@if (type === modalsType.loader) {\r\n  <div class=\"modal-body\">\r\n    <app-loader></app-loader>\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["type", "isDropdown", "withIcon", "withOnlyIcon", "isMinWidth", "isDisabled", "withSpinner", "label", "small", "dataTest"], outputs: ["btnAction"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ModalsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-modals', standalone: true, imports: [
+                        CommonModule,
+                        TranslateModule,
+                        ButtonComponent,
+                        LoaderComponent
+                    ], template: "@if (type !== modalsType.loader) {\r\n  <div class=\"modal-header\">\r\n    @if (type === modalsType.delete) {\r\n      <h1 class=\"modal-title\" id=\"modal-basic-title\">\r\n        {{ '_COMMON._MODAL_DELETE.TITLE' | translate: { number: itemsToDelete.length, name: itemsToDeleteTitle } }}\r\n      </h1>\r\n    }\r\n    @else {\r\n      <h1 class=\"modal-title\" id=\"modal-basic-title\">\r\n        {{ modalTitle | translate }}\r\n      </h1>\r\n    }\r\n\r\n    <button type=\"button\" class=\"btn-close\" [attr.aria-label]=\"'_COMMON._ACTION.CLOSE' | translate\"\r\n      (click)=\"activeModal.dismiss()\" data-test-ctw=\"btn-close-modal\">\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"modal-body\">\r\n    @if (type === modalsType.delete) {\r\n      @if (itemsToDelete.length === 1) {\r\n        <div [innerHTML]=\"'_COMMON._MODAL_DELETE.SIMPLE_TEXT' | translate\"></div>\r\n      }\r\n      @if (itemsToDelete.length > 1) {\r\n        <div [innerHTML]=\"'_COMMON._MODAL_DELETE.MULTIPLE_TEXT' | translate\"></div>\r\n      }\r\n      @if (itemsToDelete.length > 0) {\r\n        <ul class=\"mb-0\">\r\n          @for (item of itemsToDelete; track item) {\r\n            <li>{{ item }}</li>\r\n          }\r\n        </ul>\r\n      }\r\n    }\r\n    @else if (type === modalsType.custom || type === modalsType.quickSideView) {\r\n      @if (customBodyTemplate) {\r\n        <ng-container [ngTemplateOutlet]=\"customBodyTemplate\" [ngTemplateOutletContext]=\"customBodyContext\">\r\n        </ng-container>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div class=\"modal-footer\">\r\n    @if (type === modalsType.delete) {\r\n      <app-button label=\"_COMMON._ACTION.DELETE\" [type]=\"buttonTypeEnum.danger\" [isMinWidth]=\"true\"\r\n        (btnAction)=\"actionClick()\" dataTest=\"btn-action-modal\">\r\n      </app-button>\r\n\r\n      <app-button label=\"_COMMON._ACTION.CANCEL\" [type]=\"buttonTypeEnum.secondary\" [isMinWidth]=\"true\"\r\n        (btnAction)=\"activeModal.dismiss()\" dataTest=\"btn-close-modal\">\r\n      </app-button>\r\n    }\r\n    @else {\r\n      @if(labelBtnAction) {\r\n        <app-button [label]=\"labelBtnAction | translate\" [type]=\"buttonTypeEnum.primary\" [isMinWidth]=\"true\"\r\n          (btnAction)=\"actionClick()\" dataTest=\"btn-close-modal\">\r\n        </app-button>\r\n      }\r\n\r\n      <app-button label=\"_COMMON._ACTION.CLOSE\" [type]=\"buttonTypeEnum.secondary\" [isMinWidth]=\"true\"\r\n        (btnAction)=\"activeModal.dismiss()\" dataTest=\"btn-close-modal\">\r\n      </app-button>\r\n    }\r\n  </div>\r\n}\r\n\r\n@if (type === modalsType.loader) {\r\n  <div class=\"modal-body\">\r\n    <app-loader></app-loader>\r\n  </div>\r\n}\r\n" }]
+        }], ctorParameters: () => [{ type: i2$1.NgbActiveModal }, { type: i2.TranslateService }], propDecorators: { type: [{
+                type: Input
+            }], modalTitle: [{
+                type: Input
+            }], itemsToDelete: [{
+                type: Input
+            }], itemsToDeleteTitle: [{
+                type: Input
+            }], labelBtnAction: [{
+                type: Input
+            }], customBodyTemplate: [{
+                type: Input
+            }], customBodyContext: [{
+                type: Input
+            }], btnAction: [{
+                type: Output
+            }] } });
+
+class TabContentComponent {
+    constructor() {
+        this.disabled = false;
+    }
+    get fragment() {
+        return this.slugify(this.title);
+    }
+    slugify(text) {
+        return text
+            .toLowerCase()
+            .trim()
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '')
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: TabContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: TabContentComponent, isStandalone: true, selector: "app-tab-content", inputs: { title: "title", disabled: "disabled" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: '<ng-template #content><ng-content></ng-content></ng-template>', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: TabContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-tab-content',
+                    template: '<ng-template #content><ng-content></ng-content></ng-template>',
+                    standalone: true
+                }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], templateRef: [{
+                type: ViewChild,
+                args: ['content', { static: true }]
+            }] } });
+
+class TabComponent {
+    constructor(router, route) {
+        this.router = router;
+        this.route = route;
+        this.useFragment = true;
+        this.basicDisplay = false;
+        this.activeId = 0;
+    }
+    ngAfterContentInit() {
+        const tabsArray = this.tabs.toArray();
+        const firstEnabledIndex = tabsArray.findIndex(tab => !tab.disabled);
+        this.activeId = firstEnabledIndex !== -1 ? firstEnabledIndex : 0;
+        this.route.fragment.subscribe(fragment => {
+            if (this.useFragment) {
+                if (fragment) {
+                    const foundIndex = tabsArray.findIndex(tab => tab.fragment === fragment && !tab.disabled);
+                    if (foundIndex !== -1) {
+                        this.activeId = foundIndex;
+                    }
+                }
+                else {
+                    const currentTab = tabsArray[this.activeId];
+                    this.router.navigate([], {
+                        relativeTo: this.route,
+                        fragment: currentTab.fragment,
+                        queryParamsHandling: 'preserve',
+                        replaceUrl: true
+                    });
+                }
+            }
+        });
+    }
+    onTabChange(newIndex) {
+        this.activeId = newIndex;
+        if (!this.useFragment) {
+            return;
+        }
+        const tabsArray = this.tabs.toArray();
+        const selectedTab = tabsArray[newIndex];
+        if (selectedTab && !selectedTab.disabled) {
+            this.router.navigate([], {
+                relativeTo: this.route,
+                fragment: selectedTab.fragment,
+                queryParamsHandling: 'preserve',
+                replaceUrl: true
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: TabComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: TabComponent, isStandalone: true, selector: "app-tab", inputs: { useFragment: "useFragment", title: "title", id: "id", basicDisplay: "basicDisplay" }, queries: [{ propertyName: "tabs", predicate: TabContentComponent }], ngImport: i0, template: "@if (!basicDisplay) {\r\n  <div class=\"card\">\r\n    @if (title) {\r\n      <h2 class=\"card-header\">{{ title | translate }}</h2>\r\n    }\r\n\r\n    <div class=\"card-body p-0\">\r\n      <ul ngbNav #nav=\"ngbNav\" [(activeId)]=\"activeId\" class=\"nav-tabs nav-tabs-card\"\r\n        (activeIdChange)=\"onTabChange($event)\" appRwdTabs>\r\n        @for (tab of tabs.toArray(); track tab; let i = $index) {\r\n          <li [ngbNavItem]=\"i\" [disabled]=\"tab.disabled\">\r\n            <a ngbNavLink [attr.data-test-ctw]=\"'link-tab-' + id + '-' + i\">\r\n              {{ tab.title | translate }}\r\n            </a>\r\n            <ng-template ngbNavContent>\r\n              <ng-container *ngTemplateOutlet=\"tab.templateRef\"></ng-container>\r\n            </ng-template>\r\n          </li>\r\n        }\r\n\r\n        <li ngbDropdown class=\"nav-item d-none\" placement=\"bottom-right\">\r\n          <button (click)=\"false\" class=\"nav-link\" ngbDropdownToggle>\r\n            {{ '_COMMON._ACTION.MORE' | translate }}\r\n          </button>\r\n          <ul ngbDropdownMenu placement=\"bottom right\"></ul>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngbNavOutlet]=\"nav\" class=\"tab-content-card\"></div>\r\n}\r\n@else {\r\n  @if (title) {\r\n    <h2>{{ title | translate }}</h2>\r\n  }\r\n\r\n  <ul ngbNav #nav=\"ngbNav\" [(activeId)]=\"activeId\" class=\"nav-tabs\" (activeIdChange)=\"onTabChange($event)\" appRwdTabs>\r\n    @for (tab of tabs.toArray(); track tab; let i = $index) {\r\n      <li [ngbNavItem]=\"i\" [disabled]=\"tab.disabled\">\r\n        <a ngbNavLink [attr.data-test-ctw]=\"'link-tab-' + i\">\r\n          {{ tab.title | translate }}\r\n        </a>\r\n        <ng-template ngbNavContent>\r\n          <ng-container *ngTemplateOutlet=\"tab.templateRef\"></ng-container>\r\n        </ng-template>\r\n      </li>\r\n    }\r\n\r\n    <li ngbDropdown class=\"nav-item d-none\" placement=\"bottom-right\">\r\n      <button (click)=\"false\" class=\"nav-link\" ngbDropdownToggle>\r\n        {{ '_COMMON._ACTION.MORE' | translate }}\r\n      </button>\r\n      <ul ngbDropdownMenu placement=\"bottom right\"></ul>\r\n    </li>\r\n  </ul>\r\n\r\n  <div [ngbNavOutlet]=\"nav\" class=\"tab-content\"></div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NgbNavModule }, { kind: "directive", type: i2$1.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$1.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$1.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$1.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$1.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$1.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$1.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: TabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-tab', standalone: true, imports: [
+                        CommonModule,
+                        TranslateModule,
+                        NgbNavModule
+                    ], template: "@if (!basicDisplay) {\r\n  <div class=\"card\">\r\n    @if (title) {\r\n      <h2 class=\"card-header\">{{ title | translate }}</h2>\r\n    }\r\n\r\n    <div class=\"card-body p-0\">\r\n      <ul ngbNav #nav=\"ngbNav\" [(activeId)]=\"activeId\" class=\"nav-tabs nav-tabs-card\"\r\n        (activeIdChange)=\"onTabChange($event)\" appRwdTabs>\r\n        @for (tab of tabs.toArray(); track tab; let i = $index) {\r\n          <li [ngbNavItem]=\"i\" [disabled]=\"tab.disabled\">\r\n            <a ngbNavLink [attr.data-test-ctw]=\"'link-tab-' + id + '-' + i\">\r\n              {{ tab.title | translate }}\r\n            </a>\r\n            <ng-template ngbNavContent>\r\n              <ng-container *ngTemplateOutlet=\"tab.templateRef\"></ng-container>\r\n            </ng-template>\r\n          </li>\r\n        }\r\n\r\n        <li ngbDropdown class=\"nav-item d-none\" placement=\"bottom-right\">\r\n          <button (click)=\"false\" class=\"nav-link\" ngbDropdownToggle>\r\n            {{ '_COMMON._ACTION.MORE' | translate }}\r\n          </button>\r\n          <ul ngbDropdownMenu placement=\"bottom right\"></ul>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngbNavOutlet]=\"nav\" class=\"tab-content-card\"></div>\r\n}\r\n@else {\r\n  @if (title) {\r\n    <h2>{{ title | translate }}</h2>\r\n  }\r\n\r\n  <ul ngbNav #nav=\"ngbNav\" [(activeId)]=\"activeId\" class=\"nav-tabs\" (activeIdChange)=\"onTabChange($event)\" appRwdTabs>\r\n    @for (tab of tabs.toArray(); track tab; let i = $index) {\r\n      <li [ngbNavItem]=\"i\" [disabled]=\"tab.disabled\">\r\n        <a ngbNavLink [attr.data-test-ctw]=\"'link-tab-' + i\">\r\n          {{ tab.title | translate }}\r\n        </a>\r\n        <ng-template ngbNavContent>\r\n          <ng-container *ngTemplateOutlet=\"tab.templateRef\"></ng-container>\r\n        </ng-template>\r\n      </li>\r\n    }\r\n\r\n    <li ngbDropdown class=\"nav-item d-none\" placement=\"bottom-right\">\r\n      <button (click)=\"false\" class=\"nav-link\" ngbDropdownToggle>\r\n        {{ '_COMMON._ACTION.MORE' | translate }}\r\n      </button>\r\n      <ul ngbDropdownMenu placement=\"bottom right\"></ul>\r\n    </li>\r\n  </ul>\r\n\r\n  <div [ngbNavOutlet]=\"nav\" class=\"tab-content\"></div>\r\n}\r\n" }]
+        }], ctorParameters: () => [{ type: i1.Router }, { type: i1.ActivatedRoute }], propDecorators: { useFragment: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], basicDisplay: [{
+                type: Input
+            }], tabs: [{
+                type: ContentChildren,
+                args: [TabContentComponent]
+            }] } });
+
+class DoubleScrollDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    onResize() {
+        this.adaptScrollWidth();
+    }
+    // Si scroll le tableau on scroll aussi div.table-responsive-double-scroll
+    onScroll() {
+        this.div.scrollLeft = this.el.nativeElement.scrollLeft;
+    }
+    ngOnInit() {
+        // On applique un margin-top à 0 à la table.
+        this.el.nativeElement.style.marginTop = '0';
+        // On crée le div.table-responsive-double-scroll et on l'insère avant le tableau
+        this.div = this.renderer.createElement('div');
+        this.renderer.addClass(this.div, 'table-responsive-double-scroll');
+        this.renderer.insertBefore(this.el.nativeElement.parentNode, this.div, this.el.nativeElement);
+        // On crée le div.scroll et on l'insère dans le div.table-responsive-double-scroll
+        this.scroll = this.renderer.createElement('div');
+        this.renderer.addClass(this.scroll, 'scroll');
+        this.renderer.appendChild(this.div, this.scroll);
+        // Si on scroll div.table-responsive-double-scroll on scroll aussi le tableau
+        this.div.addEventListener('scroll', function () {
+            //this.nextSibling.scrollLeft = this.scrollLeft;
+            this.nextSibling.style.transform = "translateX(-" + this.scrollLeft + "px)";
+        });
+    }
+    adaptScrollWidth() {
+        // On donne à div.scroll la taille du tableau
+        if (this.el.nativeElement.firstChild.offsetWidth > this.el.nativeElement.offsetWidth) {
+            this.scroll.style.width = (this.el.nativeElement.firstChild.offsetWidth + 17) + 'px';
+        }
+        else {
+            this.scroll.style.widdth = 'auto';
+        }
+    }
+    ngAfterViewChecked() {
+        this.adaptScrollWidth();
+    }
+    ngOnDestroy() {
+        this.div.removeEventListener('scroll', null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DoubleScrollDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: DoubleScrollDirective, isStandalone: true, selector: "[appDoubleScroll]", host: { listeners: { "window:resize": "onResize($event)", "scroll": "onScroll($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DoubleScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appDoubleScroll]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }], onScroll: [{
+                type: HostListener,
+                args: ['scroll', ['$event']]
+            }] } });
+
+var ActionOnTableType;
+(function (ActionOnTableType) {
+    ActionOnTableType["add"] = "add";
+    ActionOnTableType["exportPage"] = "exportPage";
+    ActionOnTableType["exportAll"] = "exportAll";
+    ActionOnTableType["custom1"] = "custom1";
+    ActionOnTableType["custom2"] = "custom2";
+})(ActionOnTableType || (ActionOnTableType = {}));
+
+class ActionsOnTableComponent {
+    constructor() {
+        this.actionOnTable = [];
+        this.actionClick = new EventEmitter();
+        this.actionOnTableAction = ActionOnTableType;
+    }
+    onActionClick(action) {
+        this.actionClick.emit(action);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ActionsOnTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ActionsOnTableComponent, isStandalone: true, selector: "app-actions-on-table", inputs: { actionOnTable: "actionOnTable", customContent: "customContent" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<div class=\"actions-on-table\" *ngIf=\"actionOnTable?.length || customContent\">\r\n  <div class=\"me-auto\">\r\n    @if (customContent) {\r\n      <ng-container [ngTemplateOutlet]=\"customContent\"></ng-container>\r\n    }\r\n  </div>\r\n  <div class=\"btn-group\">\r\n    @for (action of actionOnTable; track action) {\r\n      @if (action.action === actionOnTableAction.add) {\r\n        <a (click)=\"onActionClick(actionOnTableAction.add)\" href=\"javascript:void(0)\" class=\"btn btn-primary btn-min-width\">\r\n          {{ '_COMMON._ACTION.ADD' | translate }}\r\n        </a>\r\n      }\r\n\r\n      @if (action.action === actionOnTableAction.exportAll) {\r\n        <div class=\"btn-group\" ngbDropdown placement=\"bottom-right\">\r\n          <button class=\"btn btn-secondary btn-min-width\" id=\"dd-export\" ngbDropdownToggle>\r\n            {{ '_COMMON._ACTION.EXPORT' | translate }}\r\n          </button>\r\n          <ul ngbDropdownMenu aria-labelledby=\"dd-export\">\r\n            <li>\r\n              <button class=\"dropdown-item\" (click)=\"onActionClick(actionOnTableAction.exportPage)\">\r\n                {{ '_COMMON._TABLE.EXPORT_CURRENT' | translate }}\r\n              </button>\r\n            </li>\r\n            <li>\r\n              <button class=\"dropdown-item\" (click)=\"onActionClick(actionOnTableAction.exportAll)\">\r\n                {{ '_COMMON._TABLE.EXPORT_ALL' | translate }}\r\n              </button>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n      }\r\n\r\n      @if (action.action === actionOnTableAction.custom1) {\r\n        <a (click)=\"onActionClick(actionOnTableAction.custom1)\" href=\"javascript:void(0)\" class=\"btn btn-min-width\"\r\n          [ngClass]=\"'btn-' + action.type\">\r\n          {{ action.label }}\r\n        </a>\r\n      }\r\n\r\n      @if (action.action === actionOnTableAction.custom2) {\r\n        <a (click)=\"onActionClick(actionOnTableAction.custom2)\" href=\"javascript:void(0)\" class=\"btn btn-min-width\"\r\n          [ngClass]=\"'btn-' + action.type\">\r\n          {{ action.label }}\r\n        </a>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { 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"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i2$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i2$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i2$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ActionsOnTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-actions-on-table', standalone: true, imports: [
+                        TranslateModule,
+                        CommonModule,
+                        NgbDropdownModule
+                    ], template: "<div class=\"actions-on-table\" *ngIf=\"actionOnTable?.length || customContent\">\r\n  <div class=\"me-auto\">\r\n    @if (customContent) {\r\n      <ng-container [ngTemplateOutlet]=\"customContent\"></ng-container>\r\n    }\r\n  </div>\r\n  <div class=\"btn-group\">\r\n    @for (action of actionOnTable; track action) {\r\n      @if (action.action === actionOnTableAction.add) {\r\n        <a (click)=\"onActionClick(actionOnTableAction.add)\" href=\"javascript:void(0)\" class=\"btn btn-primary btn-min-width\">\r\n          {{ '_COMMON._ACTION.ADD' | translate }}\r\n        </a>\r\n      }\r\n\r\n      @if (action.action === actionOnTableAction.exportAll) {\r\n        <div class=\"btn-group\" ngbDropdown placement=\"bottom-right\">\r\n          <button class=\"btn btn-secondary btn-min-width\" id=\"dd-export\" ngbDropdownToggle>\r\n            {{ '_COMMON._ACTION.EXPORT' | translate }}\r\n          </button>\r\n          <ul ngbDropdownMenu aria-labelledby=\"dd-export\">\r\n            <li>\r\n              <button class=\"dropdown-item\" (click)=\"onActionClick(actionOnTableAction.exportPage)\">\r\n                {{ '_COMMON._TABLE.EXPORT_CURRENT' | translate }}\r\n              </button>\r\n            </li>\r\n            <li>\r\n              <button class=\"dropdown-item\" (click)=\"onActionClick(actionOnTableAction.exportAll)\">\r\n                {{ '_COMMON._TABLE.EXPORT_ALL' | translate }}\r\n              </button>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n      }\r\n\r\n      @if (action.action === actionOnTableAction.custom1) {\r\n        <a (click)=\"onActionClick(actionOnTableAction.custom1)\" href=\"javascript:void(0)\" class=\"btn btn-min-width\"\r\n          [ngClass]=\"'btn-' + action.type\">\r\n          {{ action.label }}\r\n        </a>\r\n      }\r\n\r\n      @if (action.action === actionOnTableAction.custom2) {\r\n        <a (click)=\"onActionClick(actionOnTableAction.custom2)\" href=\"javascript:void(0)\" class=\"btn btn-min-width\"\r\n          [ngClass]=\"'btn-' + action.type\">\r\n          {{ action.label }}\r\n        </a>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { actionOnTable: [{
+                type: Input
+            }], customContent: [{
+                type: Input
+            }], actionClick: [{
+                type: Output
+            }] } });
+
+class TableComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: TableComponent, isStandalone: true, selector: "app-table", ngImport: i0, template: "<!-- <app-actions-on-table [actionOnTable]=\"actionOnTable\" (actionClick)=\"onActionClick($event)\"\r\n  [customContent]=\"customActionsTemplate\"></app-actions-on-table> -->\r\n\r\n<!-- <div *ngIf=\"checkbox\" class=\"actions-on-table on-selection\">\r\n  <div class=\"on-selection-info\"> -->\r\n    <!-- If one selected item on the current page -->\r\n    <!-- <span class=\"fw-bold\">1</span>\r\n    {{ '_COMMON._TABLE._BULK_ACTION.SELECTED_ITEM_CURRENT_PAGE' | translate }} -->\r\n\r\n    <!-- If one selected item on all pages -->\r\n    <!-- <span class=\"fw-bold\">1</span>\r\n    {{ '_COMMON._TABLE._BULK_ACTION.SELECTED_ITEM_ALL_PAGES' | translate }}\r\n    <span class=\"fw-bold\">{{total}}</span> -->\r\n\r\n    <!-- If several selected items on the current page -->\r\n    <!-- <span class=\"fw-bold\">{{number}}</span>\r\n    {{ '_COMMON._TABLE._BULK_ACTION.SELECTED_ITEMS_CURRENT_PAGE' | translate }} -->\r\n\r\n    <!-- If several selected items on all pages -->\r\n    <!-- <span class=\"fw-bold\">{{number}}</span>\r\n    {{ '_COMMON._TABLE._BULK_ACTION.SELECTED_ITEMS_ALL_PAGES' | translate }}\r\n    <span class=\"fw-bold\">{{total}}</span> -->\r\n  <!-- </div>\r\n\r\n  <button class=\"btn btn-secondary btn-min-width\" type=\"button\">\r\n    {{ '_COMMON._TABLE._BULK_ACTION.EXPORT_SELECTION' | translate }}\r\n  </button>\r\n  <button class=\"btn btn-danger btn-min-width\" type=\"button\">\r\n    {{ '_COMMON._TABLE._BULK_ACTION.DELETE_SELECTION' | translate }}\r\n  </button>\r\n</div>\r\n\r\n<div class=\"table-responsive table-responsive-full-width mb-3\" appDoubleScroll>\r\n  <table class=\"table table-bordered table-striped table-hover table-full-width\">\r\n    <caption class=\"visually-hidden\" [innerHTML]=\"'_COMMON._TABLE.CAPTION' | translate: { label: title } \"></caption>\r\n    <thead>\r\n      <tr>\r\n        <th *ngIf=\"checkbox\" scope=\"col\" width=\"10\">\r\n          <div class=\"form-check\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" id=\"checkme\">\r\n            <label class=\"form-label\" class=\"form-check-label\" for=\"checkme\">\r\n              <span class=\"visually-hidden\">{{ '_COMMON._TABLE._THEAD.CHECK_LINE' | translate }}</span>\r\n            </label>\r\n          </div>\r\n        </th>\r\n        <ng-container *ngFor=\"let column of columns\">\r\n          <th scope=\"col\" [ngClass]=\"{'p-0': column.sort}\">\r\n            <button *ngIf=\"column.sort\" class=\"sorting-btn\"\r\n              [ngClass]=\"getSortIcon(column.key)\"\r\n              (click)=\"setSortProperty(column.key)\">\r\n              {{column.label}}\r\n              <span class=\"sorting-icons\">\r\n                <span class=\"bo-icons bo-sort\"></span>\r\n              </span>\r\n            </button>\r\n            <ng-container *ngIf=\"!column.sort\">\r\n              {{ column.label }}\r\n            </ng-container>\r\n          </th>\r\n        </ng-container>\r\n      </tr>\r\n      <tr *ngIf=\"filterForm\" [formGroup]=\"filterForm\" class=\"table-filter\">\r\n        <th *ngIf=\"checkbox\"></th>\r\n        <ng-container *ngFor=\"let column of columns\">\r\n          <th>\r\n            <app-form-field *ngIf=\"column.filter\" [type]=\"column.filter?.type\" [name]=\"column.key\" [control]=\"filterForm.get(column.key)\"\r\n              [options]=\"column.filter?.options\" [inTableFilter]=\"true\" [cssClass]=\"filterForm.get(column.key).value ? 'has-value' : ''\"\r\n              [placeholder]=\"'_COMMON._ACTION.FILTER_BY' | translate\"\r\n              (clearFieldFilter)=\"filterForm.get(column.key).setValue('')\"></app-form-field>\r\n          </th>\r\n        </ng-container>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr>\r\n        <td colspan=\"100\"> -->\r\n          <!-- <app-loader></app-loader> -->\r\n        <!-- </td>\r\n      </tr>\r\n      <ng-container> -->\r\n        <!-- <tr *ngIf=\"paginedResult && paginedResult.result?.length <= 0\">\r\n          <td class=\"table-info no-result\" colspan=\"100\">\r\n            {{ '_COMMON._TABLE.NO_RESULT' | translate }}\r\n          </td>\r\n        </tr> -->\r\n      <!-- </ng-container>\r\n    </tbody>\r\n\r\n    @if (legend) {\r\n    <tfoot>\r\n      <tr>\r\n        <td class=\"table-legend\" colspan=\"100\">\r\n          <app-legend [legend]=\"legend\"></app-legend>\r\n        </td>\r\n      </tr>\r\n    </tfoot>\r\n    }\r\n  </table>\r\n</div> -->\r\n\r\n<!-- <cw-xpagination *ngIf=\"paginedResult && paginedResult?.pagination.PageCount >= 0\"\r\n  [pagination]=\"paginedResult?.pagination\" [pagesToShow]=\"pageToShow\" (goPage)=\"goToPage($event)\" (goNext)=\"onNext()\"\r\n  (goPrev)=\"onPrev()\" (nbResultChange)=\"onNbResultChange($event)\">\r\n</cw-xpagination> -->\r\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: 
+                // XpaginationComponent,
+                ReactiveFormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-table', standalone: true, imports: [
+                        ActionsOnTableComponent,
+                        TranslateModule,
+                        FormsModule,
+                        CommonModule,
+                        // XpaginationComponent,
+                        ReactiveFormsModule,
+                        DoubleScrollDirective,
+                        LegendComponent,
+                        FormFieldComponent
+                    ], template: "<!-- <app-actions-on-table [actionOnTable]=\"actionOnTable\" (actionClick)=\"onActionClick($event)\"\r\n  [customContent]=\"customActionsTemplate\"></app-actions-on-table> -->\r\n\r\n<!-- <div *ngIf=\"checkbox\" class=\"actions-on-table on-selection\">\r\n  <div class=\"on-selection-info\"> -->\r\n    <!-- If one selected item on the current page -->\r\n    <!-- <span class=\"fw-bold\">1</span>\r\n    {{ '_COMMON._TABLE._BULK_ACTION.SELECTED_ITEM_CURRENT_PAGE' | translate }} -->\r\n\r\n    <!-- If one selected item on all pages -->\r\n    <!-- <span class=\"fw-bold\">1</span>\r\n    {{ '_COMMON._TABLE._BULK_ACTION.SELECTED_ITEM_ALL_PAGES' | translate }}\r\n    <span class=\"fw-bold\">{{total}}</span> -->\r\n\r\n    <!-- If several selected items on the current page -->\r\n    <!-- <span class=\"fw-bold\">{{number}}</span>\r\n    {{ '_COMMON._TABLE._BULK_ACTION.SELECTED_ITEMS_CURRENT_PAGE' | translate }} -->\r\n\r\n    <!-- If several selected items on all pages -->\r\n    <!-- <span class=\"fw-bold\">{{number}}</span>\r\n    {{ '_COMMON._TABLE._BULK_ACTION.SELECTED_ITEMS_ALL_PAGES' | translate }}\r\n    <span class=\"fw-bold\">{{total}}</span> -->\r\n  <!-- </div>\r\n\r\n  <button class=\"btn btn-secondary btn-min-width\" type=\"button\">\r\n    {{ '_COMMON._TABLE._BULK_ACTION.EXPORT_SELECTION' | translate }}\r\n  </button>\r\n  <button class=\"btn btn-danger btn-min-width\" type=\"button\">\r\n    {{ '_COMMON._TABLE._BULK_ACTION.DELETE_SELECTION' | translate }}\r\n  </button>\r\n</div>\r\n\r\n<div class=\"table-responsive table-responsive-full-width mb-3\" appDoubleScroll>\r\n  <table class=\"table table-bordered table-striped table-hover table-full-width\">\r\n    <caption class=\"visually-hidden\" [innerHTML]=\"'_COMMON._TABLE.CAPTION' | translate: { label: title } \"></caption>\r\n    <thead>\r\n      <tr>\r\n        <th *ngIf=\"checkbox\" scope=\"col\" width=\"10\">\r\n          <div class=\"form-check\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" id=\"checkme\">\r\n            <label class=\"form-label\" class=\"form-check-label\" for=\"checkme\">\r\n              <span class=\"visually-hidden\">{{ '_COMMON._TABLE._THEAD.CHECK_LINE' | translate }}</span>\r\n            </label>\r\n          </div>\r\n        </th>\r\n        <ng-container *ngFor=\"let column of columns\">\r\n          <th scope=\"col\" [ngClass]=\"{'p-0': column.sort}\">\r\n            <button *ngIf=\"column.sort\" class=\"sorting-btn\"\r\n              [ngClass]=\"getSortIcon(column.key)\"\r\n              (click)=\"setSortProperty(column.key)\">\r\n              {{column.label}}\r\n              <span class=\"sorting-icons\">\r\n                <span class=\"bo-icons bo-sort\"></span>\r\n              </span>\r\n            </button>\r\n            <ng-container *ngIf=\"!column.sort\">\r\n              {{ column.label }}\r\n            </ng-container>\r\n          </th>\r\n        </ng-container>\r\n      </tr>\r\n      <tr *ngIf=\"filterForm\" [formGroup]=\"filterForm\" class=\"table-filter\">\r\n        <th *ngIf=\"checkbox\"></th>\r\n        <ng-container *ngFor=\"let column of columns\">\r\n          <th>\r\n            <app-form-field *ngIf=\"column.filter\" [type]=\"column.filter?.type\" [name]=\"column.key\" [control]=\"filterForm.get(column.key)\"\r\n              [options]=\"column.filter?.options\" [inTableFilter]=\"true\" [cssClass]=\"filterForm.get(column.key).value ? 'has-value' : ''\"\r\n              [placeholder]=\"'_COMMON._ACTION.FILTER_BY' | translate\"\r\n              (clearFieldFilter)=\"filterForm.get(column.key).setValue('')\"></app-form-field>\r\n          </th>\r\n        </ng-container>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr>\r\n        <td colspan=\"100\"> -->\r\n          <!-- <app-loader></app-loader> -->\r\n        <!-- </td>\r\n      </tr>\r\n      <ng-container> -->\r\n        <!-- <tr *ngIf=\"paginedResult && paginedResult.result?.length <= 0\">\r\n          <td class=\"table-info no-result\" colspan=\"100\">\r\n            {{ '_COMMON._TABLE.NO_RESULT' | translate }}\r\n          </td>\r\n        </tr> -->\r\n      <!-- </ng-container>\r\n    </tbody>\r\n\r\n    @if (legend) {\r\n    <tfoot>\r\n      <tr>\r\n        <td class=\"table-legend\" colspan=\"100\">\r\n          <app-legend [legend]=\"legend\"></app-legend>\r\n        </td>\r\n      </tr>\r\n    </tfoot>\r\n    }\r\n  </table>\r\n</div> -->\r\n\r\n<!-- <cw-xpagination *ngIf=\"paginedResult && paginedResult?.pagination.PageCount >= 0\"\r\n  [pagination]=\"paginedResult?.pagination\" [pagesToShow]=\"pageToShow\" (goPage)=\"goToPage($event)\" (goNext)=\"onNext()\"\r\n  (goPrev)=\"onPrev()\" (nbResultChange)=\"onNbResultChange($event)\">\r\n</cw-xpagination> -->\r\n" }]
+        }] });
+
+class WizardStepComponent {
+    constructor() {
+        this.completed = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: WizardStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: WizardStepComponent, isStandalone: true, selector: "app-wizard-step", inputs: { title: "title", completed: "completed" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: '<ng-template #content><ng-content></ng-content></ng-template>', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: WizardStepComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-wizard-step',
+                    template: '<ng-template #content><ng-content></ng-content></ng-template>',
+                    standalone: true
+                }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], completed: [{
+                type: Input
+            }], templateRef: [{
+                type: ViewChild,
+                args: ['content', { static: true }]
+            }] } });
+
+class WizardStepperComponent {
+    constructor() {
+        this.stepChange = new EventEmitter();
+        this.stepNext = new EventEmitter();
+        this.stepPrevious = new EventEmitter();
+        this.stepEnd = new EventEmitter();
+        this.selectedIndex = 0;
+    }
+    get stepList() {
+        return this.steps.toArray();
+    }
+    goToStep(index) {
+        if (index < 0 || index >= this.steps.length)
+            return;
+        // Vérifier que toutes les étapes précédentes sont complétées
+        for (let i = 0; i < index; i++) {
+            if (!this.steps.toArray()[i].completed) {
+                return; // Empêche d'aller à cette étape si une étape précédente n'est pas validée
+            }
+        }
+        this.selectedIndex = index;
+        this.stepChange.emit(this.selectedIndex);
+    }
+    nextStep() {
+        if (this.selectedIndex < this.steps.length - 1) {
+            const currentStep = this.steps.toArray()[this.selectedIndex];
+            if (!currentStep.completed) {
+                // Si l'étape courante n'est pas validée, on bloque
+                return;
+            }
+            this.selectedIndex++;
+            this.stepNext.emit(this.selectedIndex);
+            this.stepChange.emit(this.selectedIndex);
+        }
+    }
+    previousStep() {
+        if (this.selectedIndex > 0) {
+            this.selectedIndex--;
+            this.stepPrevious.emit(this.selectedIndex);
+            this.stepChange.emit(this.selectedIndex);
+        }
+    }
+    endWizard() {
+        if (this.selectedIndex > 0) {
+            this.stepEnd.emit(this.selectedIndex);
+            this.stepChange.emit(this.selectedIndex);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: WizardStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: WizardStepperComponent, isStandalone: true, selector: "app-wizard-stepper", outputs: { stepChange: "stepChange", stepNext: "stepNext", stepPrevious: "stepPrevious", stepEnd: "stepEnd" }, queries: [{ propertyName: "steps", predicate: WizardStepComponent }], ngImport: i0, template: "<nav>\r\n  <ul class=\"list-inline step-list\">\r\n    @for (step of steps.toArray(); track step; let i = $index) {\r\n      <li class=\"list-inline-item step-item\">\r\n        <button class=\"btn step-button\" [ngClass]=\"{\r\n              'step-active': selectedIndex === i,\r\n              'step-completed': step.completed,\r\n              'step-current': selectedIndex === i && step.completed === false\r\n            }\" [disabled]=\"(i > 0 && !steps.toArray()[i - 1]?.completed)\" (click)=\"goToStep(i)\" type=\"button\">\r\n          <span class=\"step-indicator bo-icons bo-alert-success\" aria-hidden=\"true\"></span>\r\n          <span class=\"step-label\">\r\n            {{ step.title || ('_COMMON._STEPPER.STEP' | translate) + (i + 1) }}\r\n          </span>\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</nav>\r\n\r\n@for (step of steps.toArray(); track step; let i = $index) {\r\n  <section class=\"tab-pane\" [class.active]=\"selectedIndex === i\" [hidden]=\"selectedIndex !== i\" role=\"tabpanel\">\r\n    <ng-container *ngTemplateOutlet=\"step.templateRef\"></ng-container>\r\n  </section>\r\n}\r\n\r\n<div class=\"text-center mt-5\">\r\n  <div class=\"btn-group\">\r\n    <button class=\"btn btn-secondary btn-min-width\" (click)=\"previousStep()\" [disabled]=\"selectedIndex === 0\"\r\n      type=\"button\">\r\n      {{ '_COMMON._STEPPER.PREVIOUS_STEP' | translate }}\r\n    </button>\r\n\r\n    @if (selectedIndex !== steps.length - 1) {\r\n      <button class=\"btn btn-primary btn-min-width\" (click)=\"nextStep()\"\r\n        [disabled]=\"!steps.toArray()[selectedIndex]?.completed\" type=\"button\">\r\n        {{ '_COMMON._STEPPER.NEXT_STEP' | translate }}\r\n      </button>\r\n    }\r\n    @else {\r\n      <button class=\"btn btn-primary btn-min-width\" (click)=\"endWizard()\" type=\"button\">\r\n        {{ '_COMMON._ACTION.END' | translate }}\r\n      </button>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: WizardStepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-wizard-stepper', standalone: true, imports: [
+                        CommonModule,
+                        TranslateModule
+                    ], template: "<nav>\r\n  <ul class=\"list-inline step-list\">\r\n    @for (step of steps.toArray(); track step; let i = $index) {\r\n      <li class=\"list-inline-item step-item\">\r\n        <button class=\"btn step-button\" [ngClass]=\"{\r\n              'step-active': selectedIndex === i,\r\n              'step-completed': step.completed,\r\n              'step-current': selectedIndex === i && step.completed === false\r\n            }\" [disabled]=\"(i > 0 && !steps.toArray()[i - 1]?.completed)\" (click)=\"goToStep(i)\" type=\"button\">\r\n          <span class=\"step-indicator bo-icons bo-alert-success\" aria-hidden=\"true\"></span>\r\n          <span class=\"step-label\">\r\n            {{ step.title || ('_COMMON._STEPPER.STEP' | translate) + (i + 1) }}\r\n          </span>\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</nav>\r\n\r\n@for (step of steps.toArray(); track step; let i = $index) {\r\n  <section class=\"tab-pane\" [class.active]=\"selectedIndex === i\" [hidden]=\"selectedIndex !== i\" role=\"tabpanel\">\r\n    <ng-container *ngTemplateOutlet=\"step.templateRef\"></ng-container>\r\n  </section>\r\n}\r\n\r\n<div class=\"text-center mt-5\">\r\n  <div class=\"btn-group\">\r\n    <button class=\"btn btn-secondary btn-min-width\" (click)=\"previousStep()\" [disabled]=\"selectedIndex === 0\"\r\n      type=\"button\">\r\n      {{ '_COMMON._STEPPER.PREVIOUS_STEP' | translate }}\r\n    </button>\r\n\r\n    @if (selectedIndex !== steps.length - 1) {\r\n      <button class=\"btn btn-primary btn-min-width\" (click)=\"nextStep()\"\r\n        [disabled]=\"!steps.toArray()[selectedIndex]?.completed\" type=\"button\">\r\n        {{ '_COMMON._STEPPER.NEXT_STEP' | translate }}\r\n      </button>\r\n    }\r\n    @else {\r\n      <button class=\"btn btn-primary btn-min-width\" (click)=\"endWizard()\" type=\"button\">\r\n        {{ '_COMMON._ACTION.END' | translate }}\r\n      </button>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+        }], propDecorators: { steps: [{
+                type: ContentChildren,
+                args: [WizardStepComponent]
+            }], stepChange: [{
+                type: Output
+            }], stepNext: [{
+                type: Output
+            }], stepPrevious: [{
+                type: Output
+            }], stepEnd: [{
+                type: Output
+            }] } });
+
+class ModalsService {
+    constructor(modalService) {
+        this.modalService = modalService;
+    }
+    openModal(type, config, sizeOverride) {
+        const size = sizeOverride ?? this.getModalSizeByType(type);
+        const modalRef = this.modalService.open(ModalsComponent, {
+            centered: true,
+            size,
+            backdrop: type === ModalsType.loader ? 'static' : true,
+            ariaLabelledBy: 'modal-basic-title',
+            keyboard: type !== ModalsType.loader,
+            windowClass: type === ModalsType.quickSideView ? 'quick-view-modal' : null,
+            scrollable: type === ModalsType.quickSideView
+        });
+        modalRef.componentInstance.type = type;
+        if (config) {
+            Object.assign(modalRef.componentInstance, config);
+        }
+        return modalRef;
+    }
+    getModalSizeByType(type) {
+        switch (type) {
+            case ModalsType.loader:
+                return 'sm';
+            case ModalsType.delete:
+                return 'md';
+            case ModalsType.quickSideView:
+                return 'lg';
+            default:
+                return 'md';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ModalsService, deps: [{ token: i2$1.NgbModal }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ModalsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ModalsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i2$1.NgbModal }] });
+
+/*
+ * Public API Surface of bo-ui
+ */
+// LIB UI
+//---------------------------------------------------------
+// Layout
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AccordionsComponent, AccordionsContentComponent, ActionOnTableType, AdminLayoutComponent, AlertComponent, BadgeComponent, ButtonComponent, CardComponent, CustomListComponent, DragNDropListComponent, FooterComponent, FormFieldComponent, FormFieldTypeEnum, HeaderComponent, IconComponent, LegendComponent, LegendTypeEnum, LoaderComponent, MenuComponent, ModalsComponent, ModalsService, ModalsType, SidebarComponent, SkipLinksComponent, TabComponent, TabContentComponent, TableComponent, TitleBreadcrumbComponent, UiTypeEnum, WizardStepComponent, WizardStepperComponent, rangeValidator };
+//# sourceMappingURL=cityway-bo-ui.mjs.map