@cityway/basic-ui 1.0.1 → 1.0.2-beta001

package/fesm2022/cityway-basic-ui.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
-import { CommonModule, NgTemplateOutlet, NgClass } from '@angular/common';
+import { CommonModule, NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, signal, EventEmitter, effect, Output, Input, Directive, HostBinding, Component, ViewChild, ContentChildren, Injectable, HostListener, Renderer2, output, TemplateRef, ContentChild, ViewChildren, Pipe } from '@angular/core';
+import { inject, ElementRef, signal, EventEmitter, effect, Output, Input, Directive, HostBinding, Component, ViewChild, ContentChildren, Injectable, HostListener, Renderer2, output, TemplateRef, ContentChild, ApplicationRef, Injector, createComponent, ViewChildren, Pipe } from '@angular/core';
 import * as i2 from '@ngx-translate/core';
 import { TranslateModule, TranslateService, TranslatePipe } from '@ngx-translate/core';
 import { BehaviorSubject, fromEvent } from 'rxjs';
@@ -9,11 +9,10 @@ import * as i4 from '@angular-slider/ngx-slider';
 import { NgxSliderModule } from '@angular-slider/ngx-slider';
 import * as i2$1 from '@angular/forms';
 import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
 import { NgbDropdownModule, NgbPopover } from '@ng-bootstrap/ng-bootstrap';
 import * as i3 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
-import * as i1$2 from '@angular/router';
+import * as i1$1 from '@angular/router';
 
 class CollapseDirective {
     set cwCollapse(value) {
@@ -58,10 +57,10 @@ class CollapseDirective {
     hide() {
         this.collapsedSignal.set(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CollapseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: CollapseDirective, isStandalone: true, selector: "[cwCollapse]", inputs: { cwCollapse: "cwCollapse" }, outputs: { shown: "shown", hidden: "hidden" }, exportAs: ["cwCollapse"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CollapseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: CollapseDirective, isStandalone: true, selector: "[cwCollapse]", inputs: { cwCollapse: "cwCollapse" }, outputs: { shown: "shown", hidden: "hidden" }, exportAs: ["cwCollapse"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CollapseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CollapseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cwCollapse]',
@@ -102,40 +101,509 @@ var IconUiTypeEnum;
     IconUiTypeEnum["light"] = "light";
     IconUiTypeEnum["primary"] = "primary";
     IconUiTypeEnum["invert"] = "invert";
+    IconUiTypeEnum["success"] = "success";
+    IconUiTypeEnum["info"] = "info";
+    IconUiTypeEnum["warning"] = "warning";
+    IconUiTypeEnum["danger"] = "danger";
+    IconUiTypeEnum["neutral"] = "neutral";
 })(IconUiTypeEnum || (IconUiTypeEnum = {}));
 
+// AUTO-GENERATED — ne pas éditer manuellement
+// Regénérer avec : node build-sprite.mjs
+var SpriteIconEnum;
+(function (SpriteIconEnum) {
+    SpriteIconEnum["accessAccompaniedHearingImpairedUser"] = "accessAccompaniedHearingImpairedUser";
+    SpriteIconEnum["accessAccompaniedLearningImpairedUser"] = "accessAccompaniedLearningImpairedUser";
+    SpriteIconEnum["accessAccompaniedVisuallyChallengedUser"] = "accessAccompaniedVisuallyChallengedUser";
+    SpriteIconEnum["accessAccompaniedWheelchairUser"] = "accessAccompaniedWheelchairUser";
+    SpriteIconEnum["accessHearingImpairedUser"] = "accessHearingImpairedUser";
+    SpriteIconEnum["accessLearningImpairedUser"] = "accessLearningImpairedUser";
+    SpriteIconEnum["accessVisuallyChallengedUser"] = "accessVisuallyChallengedUser";
+    SpriteIconEnum["accessWheelchairUser"] = "accessWheelchairUser";
+    SpriteIconEnum["accountConfidentialitySettings"] = "accountConfidentialitySettings";
+    SpriteIconEnum["accountConsumption"] = "accountConsumption";
+    SpriteIconEnum["accountCredits"] = "accountCredits";
+    SpriteIconEnum["accountHelp"] = "accountHelp";
+    SpriteIconEnum["accountLogout"] = "accountLogout";
+    SpriteIconEnum["accountServices"] = "accountServices";
+    SpriteIconEnum["addBag"] = "addBag";
+    SpriteIconEnum["addCard"] = "addCard";
+    SpriteIconEnum["addPassenger"] = "addPassenger";
+    SpriteIconEnum["airQuality"] = "airQuality";
+    SpriteIconEnum["alertHelp"] = "alertHelp";
+    SpriteIconEnum["alertHelp1"] = "alertHelp1";
+    SpriteIconEnum["alertWarning"] = "alertWarning";
+    SpriteIconEnum["americanExpress"] = "americanExpress";
+    SpriteIconEnum["baby"] = "baby";
+    SpriteIconEnum["bad"] = "bad";
+    SpriteIconEnum["bmp"] = "bmp";
+    SpriteIconEnum["boardingForbidden"] = "boardingForbidden";
+    SpriteIconEnum["boardingOnly"] = "boardingOnly";
+    SpriteIconEnum["border"] = "border";
+    SpriteIconEnum["card"] = "card";
+    SpriteIconEnum["carPlate"] = "carPlate";
+    SpriteIconEnum["cash"] = "cash";
+    SpriteIconEnum["chat"] = "chat";
+    SpriteIconEnum["codes"] = "codes";
+    SpriteIconEnum["computer"] = "computer";
+    SpriteIconEnum["copyright"] = "copyright";
+    SpriteIconEnum["crowdsourcingAccident"] = "crowdsourcingAccident";
+    SpriteIconEnum["crowdsourcingBtn"] = "crowdsourcingBtn";
+    SpriteIconEnum["crowdsourcingBusShelter"] = "crowdsourcingBusShelter";
+    SpriteIconEnum["crowdsourcingCrowded"] = "crowdsourcingCrowded";
+    SpriteIconEnum["crowdsourcingDegradation"] = "crowdsourcingDegradation";
+    SpriteIconEnum["crowdsourcingDelay"] = "crowdsourcingDelay";
+    SpriteIconEnum["crowdsourcingEscalator"] = "crowdsourcingEscalator";
+    SpriteIconEnum["crowdsourcingInvalidate"] = "crowdsourcingInvalidate";
+    SpriteIconEnum["crowdsourcingLift"] = "crowdsourcingLift";
+    SpriteIconEnum["crowdsourcingMove"] = "crowdsourcingMove";
+    SpriteIconEnum["crowdsourcingReport"] = "crowdsourcingReport";
+    SpriteIconEnum["crowdsourcingSign"] = "crowdsourcingSign";
+    SpriteIconEnum["crowdsourcingStopRelocated"] = "crowdsourcingStopRelocated";
+    SpriteIconEnum["crowdsourcingTicket"] = "crowdsourcingTicket";
+    SpriteIconEnum["crowdsourcingTrafficJam"] = "crowdsourcingTrafficJam";
+    SpriteIconEnum["crowdsourcingValidate"] = "crowdsourcingValidate";
+    SpriteIconEnum["crowdsourcingVehicle"] = "crowdsourcingVehicle";
+    SpriteIconEnum["crowdsourcingWork"] = "crowdsourcingWork";
+    SpriteIconEnum["dataProtection"] = "dataProtection";
+    SpriteIconEnum["diamond"] = "diamond";
+    SpriteIconEnum["doc"] = "doc";
+    SpriteIconEnum["down"] = "down";
+    SpriteIconEnum["driver"] = "driver";
+    SpriteIconEnum["dropOffForbidden"] = "dropOffForbidden";
+    SpriteIconEnum["dropOffOnly"] = "dropOffOnly";
+    SpriteIconEnum["error"] = "error";
+    SpriteIconEnum["errorCard"] = "errorCard";
+    SpriteIconEnum["eshop"] = "eshop";
+    SpriteIconEnum["event"] = "event";
+    SpriteIconEnum["eventChangeRoad"] = "eventChangeRoad";
+    SpriteIconEnum["eventCloud"] = "eventCloud";
+    SpriteIconEnum["eventColClose"] = "eventColClose";
+    SpriteIconEnum["eventColOpen"] = "eventColOpen";
+    SpriteIconEnum["eventCommercial"] = "eventCommercial";
+    SpriteIconEnum["eventDisrupt"] = "eventDisrupt";
+    SpriteIconEnum["eventDisruptionEnd"] = "eventDisruptionEnd";
+    SpriteIconEnum["eventFog"] = "eventFog";
+    SpriteIconEnum["eventIce"] = "eventIce";
+    SpriteIconEnum["eventLine"] = "eventLine";
+    SpriteIconEnum["eventMarch"] = "eventMarch";
+    SpriteIconEnum["eventMiscHour"] = "eventMiscHour";
+    SpriteIconEnum["eventRain"] = "eventRain";
+    SpriteIconEnum["eventSnow"] = "eventSnow";
+    SpriteIconEnum["eventSnow2"] = "eventSnow2";
+    SpriteIconEnum["eventSocialMovement"] = "eventSocialMovement";
+    SpriteIconEnum["eventSun"] = "eventSun";
+    SpriteIconEnum["eventTrafficAccident"] = "eventTrafficAccident";
+    SpriteIconEnum["eventTrafficBlockedroad"] = "eventTrafficBlockedroad";
+    SpriteIconEnum["eventTrafficCongestion"] = "eventTrafficCongestion";
+    SpriteIconEnum["eventTrafficDisabledvehicle"] = "eventTrafficDisabledvehicle";
+    SpriteIconEnum["eventTrafficMiscellaneous"] = "eventTrafficMiscellaneous";
+    SpriteIconEnum["eventTrafficObstruction"] = "eventTrafficObstruction";
+    SpriteIconEnum["eventTrafficSportevent"] = "eventTrafficSportevent";
+    SpriteIconEnum["eventTrafficUndefined"] = "eventTrafficUndefined";
+    SpriteIconEnum["eventTrafficWeather"] = "eventTrafficWeather";
+    SpriteIconEnum["eventWarning"] = "eventWarning";
+    SpriteIconEnum["eventWeather"] = "eventWeather";
+    SpriteIconEnum["eventWind"] = "eventWind";
+    SpriteIconEnum["fail"] = "fail";
+    SpriteIconEnum["favorite"] = "favorite";
+    SpriteIconEnum["favoriteCard"] = "favoriteCard";
+    SpriteIconEnum["favoriteLine"] = "favoriteLine";
+    SpriteIconEnum["file"] = "file";
+    SpriteIconEnum["free"] = "free";
+    SpriteIconEnum["from"] = "from";
+    SpriteIconEnum["gif"] = "gif";
+    SpriteIconEnum["good"] = "good";
+    SpriteIconEnum["handCard"] = "handCard";
+    SpriteIconEnum["headphone"] = "headphone";
+    SpriteIconEnum["home"] = "home";
+    SpriteIconEnum["homeLine"] = "homeLine";
+    SpriteIconEnum["hotline"] = "hotline";
+    SpriteIconEnum["info"] = "info";
+    SpriteIconEnum["interactiveMap"] = "interactiveMap";
+    SpriteIconEnum["interactiveMapLine"] = "interactiveMapLine";
+    SpriteIconEnum["invert"] = "invert";
+    SpriteIconEnum["journey"] = "journey";
+    SpriteIconEnum["jpg"] = "jpg";
+    SpriteIconEnum["kcal"] = "kcal";
+    SpriteIconEnum["law"] = "law";
+    SpriteIconEnum["left"] = "left";
+    SpriteIconEnum["left1"] = "left1";
+    SpriteIconEnum["loading"] = "loading";
+    SpriteIconEnum["mailAlternate"] = "mailAlternate";
+    SpriteIconEnum["mapCenterMap"] = "mapCenterMap";
+    SpriteIconEnum["mapChooseMap"] = "mapChooseMap";
+    SpriteIconEnum["mapChooseMapIos"] = "mapChooseMapIos";
+    SpriteIconEnum["mapDeparture"] = "mapDeparture";
+    SpriteIconEnum["mapDisplacement"] = "mapDisplacement";
+    SpriteIconEnum["mapEnd"] = "mapEnd";
+    SpriteIconEnum["mapFullScreen"] = "mapFullScreen";
+    SpriteIconEnum["mapFullScreenReturn"] = "mapFullScreenReturn";
+    SpriteIconEnum["mapGeolocationActive"] = "mapGeolocationActive";
+    SpriteIconEnum["mapGeolocationInactive"] = "mapGeolocationInactive";
+    SpriteIconEnum["mapItinerary"] = "mapItinerary";
+    SpriteIconEnum["mapLocation"] = "mapLocation";
+    SpriteIconEnum["mapMap"] = "mapMap";
+    SpriteIconEnum["mapMap1"] = "mapMap1";
+    SpriteIconEnum["mapMap2"] = "mapMap2";
+    SpriteIconEnum["mapMap3"] = "mapMap3";
+    SpriteIconEnum["mapMove"] = "mapMove";
+    SpriteIconEnum["mapNavigation"] = "mapNavigation";
+    SpriteIconEnum["mapNearest"] = "mapNearest";
+    SpriteIconEnum["mapPin"] = "mapPin";
+    SpriteIconEnum["mapPin2"] = "mapPin2";
+    SpriteIconEnum["mapStop"] = "mapStop";
+    SpriteIconEnum["mapStreetView"] = "mapStreetView";
+    SpriteIconEnum["mapWorld"] = "mapWorld";
+    SpriteIconEnum["medium"] = "medium";
+    SpriteIconEnum["meeting"] = "meeting";
+    SpriteIconEnum["menu"] = "menu";
+    SpriteIconEnum["menuLine"] = "menuLine";
+    SpriteIconEnum["message"] = "message";
+    SpriteIconEnum["messageActivateAccount"] = "messageActivateAccount";
+    SpriteIconEnum["messageAlert"] = "messageAlert";
+    SpriteIconEnum["messageFail"] = "messageFail";
+    SpriteIconEnum["messageInfo"] = "messageInfo";
+    SpriteIconEnum["messageInfo2"] = "messageInfo2";
+    SpriteIconEnum["messageNotification"] = "messageNotification";
+    SpriteIconEnum["messageNoTripFavoris"] = "messageNoTripFavoris";
+    SpriteIconEnum["messageOk"] = "messageOk";
+    SpriteIconEnum["messageWarning"] = "messageWarning";
+    SpriteIconEnum["messengerAlternate"] = "messengerAlternate";
+    SpriteIconEnum["miscAccess"] = "miscAccess";
+    SpriteIconEnum["miscCamcorder"] = "miscCamcorder";
+    SpriteIconEnum["miscDiscover"] = "miscDiscover";
+    SpriteIconEnum["miscHealth"] = "miscHealth";
+    SpriteIconEnum["miscNews"] = "miscNews";
+    SpriteIconEnum["miscNewsletter"] = "miscNewsletter";
+    SpriteIconEnum["miscRegistered"] = "miscRegistered";
+    SpriteIconEnum["miscRoute"] = "miscRoute";
+    SpriteIconEnum["miscRoute2"] = "miscRoute2";
+    SpriteIconEnum["miscRoute3"] = "miscRoute3";
+    SpriteIconEnum["miscRoute4"] = "miscRoute4";
+    SpriteIconEnum["miscTicket1"] = "miscTicket1";
+    SpriteIconEnum["miscTicket2"] = "miscTicket2";
+    SpriteIconEnum["miscTicket3"] = "miscTicket3";
+    SpriteIconEnum["miscVia"] = "miscVia";
+    SpriteIconEnum["modeBike"] = "modeBike";
+    SpriteIconEnum["modeBoat"] = "modeBoat";
+    SpriteIconEnum["modeBus"] = "modeBus";
+    SpriteIconEnum["modeBusPmr"] = "modeBusPmr";
+    SpriteIconEnum["modeCar"] = "modeCar";
+    SpriteIconEnum["modeCarpooling"] = "modeCarpooling";
+    SpriteIconEnum["modeCarsharing"] = "modeCarsharing";
+    SpriteIconEnum["modeCoach"] = "modeCoach";
+    SpriteIconEnum["modeCyclopouss"] = "modeCyclopouss";
+    SpriteIconEnum["modeDoubling"] = "modeDoubling";
+    SpriteIconEnum["modeEBus"] = "modeEBus";
+    SpriteIconEnum["modeElectricShuttle"] = "modeElectricShuttle";
+    SpriteIconEnum["modeElevator"] = "modeElevator";
+    SpriteIconEnum["modeEscalator"] = "modeEscalator";
+    SpriteIconEnum["modeFindPlace"] = "modeFindPlace";
+    SpriteIconEnum["modeFreefloating"] = "modeFreefloating";
+    SpriteIconEnum["modeFunicular"] = "modeFunicular";
+    SpriteIconEnum["modeHail"] = "modeHail";
+    SpriteIconEnum["modeInoui"] = "modeInoui";
+    SpriteIconEnum["modeLer"] = "modeLer";
+    SpriteIconEnum["modeMinibus"] = "modeMinibus";
+    SpriteIconEnum["modeMulti"] = "modeMulti";
+    SpriteIconEnum["modeMultiBikeBus"] = "modeMultiBikeBus";
+    SpriteIconEnum["modeMultiCarBus"] = "modeMultiCarBus";
+    SpriteIconEnum["modeMultiCoach"] = "modeMultiCoach";
+    SpriteIconEnum["modeMultiTrain"] = "modeMultiTrain";
+    SpriteIconEnum["modePlane"] = "modePlane";
+    SpriteIconEnum["modeRer"] = "modeRer";
+    SpriteIconEnum["modeSchool"] = "modeSchool";
+    SpriteIconEnum["modeSelfServiceBike"] = "modeSelfServiceBike";
+    SpriteIconEnum["modeSncfIntercite"] = "modeSncfIntercite";
+    SpriteIconEnum["modeStreetcar"] = "modeStreetcar";
+    SpriteIconEnum["modeSubway"] = "modeSubway";
+    SpriteIconEnum["modeTaxi"] = "modeTaxi";
+    SpriteIconEnum["modeTaxibus"] = "modeTaxibus";
+    SpriteIconEnum["modeTer"] = "modeTer";
+    SpriteIconEnum["modeTgv"] = "modeTgv";
+    SpriteIconEnum["modeTod"] = "modeTod";
+    SpriteIconEnum["modeTrain"] = "modeTrain";
+    SpriteIconEnum["modeTrolley"] = "modeTrolley";
+    SpriteIconEnum["modeUnknown"] = "modeUnknown";
+    SpriteIconEnum["modeWait"] = "modeWait";
+    SpriteIconEnum["modeWaitInside"] = "modeWaitInside";
+    SpriteIconEnum["modeWalk"] = "modeWalk";
+    SpriteIconEnum["modeZou"] = "modeZou";
+    SpriteIconEnum["more"] = "more";
+    SpriteIconEnum["moveBackward"] = "moveBackward";
+    SpriteIconEnum["moveForward"] = "moveForward";
+    SpriteIconEnum["music"] = "music";
+    SpriteIconEnum["navDashboard"] = "navDashboard";
+    SpriteIconEnum["navFirst"] = "navFirst";
+    SpriteIconEnum["navigationApple"] = "navigationApple";
+    SpriteIconEnum["navigationFacebook"] = "navigationFacebook";
+    SpriteIconEnum["navigationGoogle"] = "navigationGoogle";
+    SpriteIconEnum["navigationInstagram"] = "navigationInstagram";
+    SpriteIconEnum["navigationLinkedin"] = "navigationLinkedin";
+    SpriteIconEnum["navigationPinterest"] = "navigationPinterest";
+    SpriteIconEnum["navigationSnapchat"] = "navigationSnapchat";
+    SpriteIconEnum["navigationTiktok"] = "navigationTiktok";
+    SpriteIconEnum["navigationTwitter"] = "navigationTwitter";
+    SpriteIconEnum["navigationWhatsapp"] = "navigationWhatsapp";
+    SpriteIconEnum["navigationYoutube"] = "navigationYoutube";
+    SpriteIconEnum["navLast"] = "navLast";
+    SpriteIconEnum["navMediaPause"] = "navMediaPause";
+    SpriteIconEnum["newWindow"] = "newWindow";
+    SpriteIconEnum["nextLeft"] = "nextLeft";
+    SpriteIconEnum["nextRight"] = "nextRight";
+    SpriteIconEnum["nfc"] = "nfc";
+    SpriteIconEnum["ok"] = "ok";
+    SpriteIconEnum["onlineServices"] = "onlineServices";
+    SpriteIconEnum["onlineServices2"] = "onlineServices2";
+    SpriteIconEnum["openofficeBlank"] = "openofficeBlank";
+    SpriteIconEnum["openofficeCalc"] = "openofficeCalc";
+    SpriteIconEnum["openofficeVideo"] = "openofficeVideo";
+    SpriteIconEnum["openofficeWriter"] = "openofficeWriter";
+    SpriteIconEnum["paste"] = "paste";
+    SpriteIconEnum["payment"] = "payment";
+    SpriteIconEnum["pdf"] = "pdf";
+    SpriteIconEnum["pet"] = "pet";
+    SpriteIconEnum["phone"] = "phone";
+    SpriteIconEnum["phoneCard"] = "phoneCard";
+    SpriteIconEnum["pinArrival"] = "pinArrival";
+    SpriteIconEnum["placeholder"] = "placeholder";
+    SpriteIconEnum["plan"] = "plan";
+    SpriteIconEnum["play"] = "play";
+    SpriteIconEnum["pmr"] = "pmr";
+    SpriteIconEnum["pmr2"] = "pmr2";
+    SpriteIconEnum["png"] = "png";
+    SpriteIconEnum["poiAccommodation"] = "poiAccommodation";
+    SpriteIconEnum["poiActivity"] = "poiActivity";
+    SpriteIconEnum["poiAddress"] = "poiAddress";
+    SpriteIconEnum["poiAdministration"] = "poiAdministration";
+    SpriteIconEnum["poiAirport"] = "poiAirport";
+    SpriteIconEnum["poiBar"] = "poiBar";
+    SpriteIconEnum["poiBeach"] = "poiBeach";
+    SpriteIconEnum["poiBikePark"] = "poiBikePark";
+    SpriteIconEnum["poiBikeRack"] = "poiBikeRack";
+    SpriteIconEnum["poiBikeRental"] = "poiBikeRental";
+    SpriteIconEnum["poiBusinessFacilities"] = "poiBusinessFacilities";
+    SpriteIconEnum["poiBusStation"] = "poiBusStation";
+    SpriteIconEnum["poiCamping"] = "poiCamping";
+    SpriteIconEnum["poiCarpoolArea"] = "poiCarpoolArea";
+    SpriteIconEnum["poiCarpoolingTransition"] = "poiCarpoolingTransition";
+    SpriteIconEnum["poiCarsharingStation"] = "poiCarsharingStation";
+    SpriteIconEnum["poiChargingStation"] = "poiChargingStation";
+    SpriteIconEnum["poiClub"] = "poiClub";
+    SpriteIconEnum["poiCommercialAgency"] = "poiCommercialAgency";
+    SpriteIconEnum["poiCommunityServices"] = "poiCommunityServices";
+    SpriteIconEnum["poiCompany"] = "poiCompany";
+    SpriteIconEnum["poiCorrespondence"] = "poiCorrespondence";
+    SpriteIconEnum["poiCulture"] = "poiCulture";
+    SpriteIconEnum["poiDistrict"] = "poiDistrict";
+    SpriteIconEnum["poiDropSelfServiceBike"] = "poiDropSelfServiceBike";
+    SpriteIconEnum["poiEducation"] = "poiEducation";
+    SpriteIconEnum["poiEducation2"] = "poiEducation2";
+    SpriteIconEnum["poiEnter"] = "poiEnter";
+    SpriteIconEnum["poiEuro"] = "poiEuro";
+    SpriteIconEnum["poiEvent"] = "poiEvent";
+    SpriteIconEnum["poiEventSport"] = "poiEventSport";
+    SpriteIconEnum["poiExit"] = "poiExit";
+    SpriteIconEnum["poiFireman"] = "poiFireman";
+    SpriteIconEnum["poiFuel"] = "poiFuel";
+    SpriteIconEnum["poiHistoric"] = "poiHistoric";
+    SpriteIconEnum["poiInfoBus"] = "poiInfoBus";
+    SpriteIconEnum["poiInformationPoint"] = "poiInformationPoint";
+    SpriteIconEnum["poiIntersection"] = "poiIntersection";
+    SpriteIconEnum["poiMapDefault"] = "poiMapDefault";
+    SpriteIconEnum["poiMarina"] = "poiMarina";
+    SpriteIconEnum["poiMarket"] = "poiMarket";
+    SpriteIconEnum["poiMilitary"] = "poiMilitary";
+    SpriteIconEnum["poiMiscHealthcare"] = "poiMiscHealthcare";
+    SpriteIconEnum["poiMiscSale"] = "poiMiscSale";
+    SpriteIconEnum["poiMiscSale2"] = "poiMiscSale2";
+    SpriteIconEnum["poiMiscWork"] = "poiMiscWork";
+    SpriteIconEnum["poiMuseum"] = "poiMuseum";
+    SpriteIconEnum["poiOtherServices"] = "poiOtherServices";
+    SpriteIconEnum["poiPark2"] = "poiPark2";
+    SpriteIconEnum["poiParkAndRide"] = "poiParkAndRide";
+    SpriteIconEnum["poiParking"] = "poiParking";
+    SpriteIconEnum["poiParkingCarpool"] = "poiParkingCarpool";
+    SpriteIconEnum["poiParkingElectricVehicle"] = "poiParkingElectricVehicle";
+    SpriteIconEnum["poiParkingV"] = "poiParkingV";
+    SpriteIconEnum["poiPatrol"] = "poiPatrol";
+    SpriteIconEnum["poiPhoto"] = "poiPhoto";
+    SpriteIconEnum["poiPointSale"] = "poiPointSale";
+    SpriteIconEnum["poiPolice"] = "poiPolice";
+    SpriteIconEnum["poiPublicPlace"] = "poiPublicPlace";
+    SpriteIconEnum["poiRentalAgency"] = "poiRentalAgency";
+    SpriteIconEnum["poiRestaurant"] = "poiRestaurant";
+    SpriteIconEnum["poiRezoPouce"] = "poiRezoPouce";
+    SpriteIconEnum["poiSchool2"] = "poiSchool2";
+    SpriteIconEnum["poiSecuredBike"] = "poiSecuredBike";
+    SpriteIconEnum["poiSelfServiceBike"] = "poiSelfServiceBike";
+    SpriteIconEnum["poiSelfServiceBikeSpot"] = "poiSelfServiceBikeSpot";
+    SpriteIconEnum["poiShopping"] = "poiShopping";
+    SpriteIconEnum["poiSkiResort2"] = "poiSkiResort2";
+    SpriteIconEnum["poiSport2"] = "poiSport2";
+    SpriteIconEnum["poiSwim"] = "poiSwim";
+    SpriteIconEnum["poiSwitchPointMulti"] = "poiSwitchPointMulti";
+    SpriteIconEnum["poiSwitchPointMulti2"] = "poiSwitchPointMulti2";
+    SpriteIconEnum["poiTakeSelfServiceBike"] = "poiTakeSelfServiceBike";
+    SpriteIconEnum["poiTouristOffice"] = "poiTouristOffice";
+    SpriteIconEnum["poiTown"] = "poiTown";
+    SpriteIconEnum["poiVaccination"] = "poiVaccination";
+    SpriteIconEnum["poiWorship"] = "poiWorship";
+    SpriteIconEnum["poiZone"] = "poiZone";
+    SpriteIconEnum["ppt"] = "ppt";
+    SpriteIconEnum["priceDollar"] = "priceDollar";
+    SpriteIconEnum["priceEuro"] = "priceEuro";
+    SpriteIconEnum["printAlternate"] = "printAlternate";
+    SpriteIconEnum["qrcode"] = "qrcode";
+    SpriteIconEnum["rar"] = "rar";
+    SpriteIconEnum["realtime"] = "realtime";
+    SpriteIconEnum["recentTrip"] = "recentTrip";
+    SpriteIconEnum["reloadCard"] = "reloadCard";
+    SpriteIconEnum["returnTrip"] = "returnTrip";
+    SpriteIconEnum["right"] = "right";
+    SpriteIconEnum["right1"] = "right1";
+    SpriteIconEnum["road"] = "road";
+    SpriteIconEnum["round"] = "round";
+    SpriteIconEnum["roundFull"] = "roundFull";
+    SpriteIconEnum["schedules"] = "schedules";
+    SpriteIconEnum["schedulesLine"] = "schedulesLine";
+    SpriteIconEnum["secure"] = "secure";
+    SpriteIconEnum["settingsFast"] = "settingsFast";
+    SpriteIconEnum["shop"] = "shop";
+    SpriteIconEnum["shopLine"] = "shopLine";
+    SpriteIconEnum["shopping"] = "shopping";
+    SpriteIconEnum["smartAssistant"] = "smartAssistant";
+    SpriteIconEnum["smartphone"] = "smartphone";
+    SpriteIconEnum["smartphoneHandled"] = "smartphoneHandled";
+    SpriteIconEnum["smartphoneWindows"] = "smartphoneWindows";
+    SpriteIconEnum["smoke"] = "smoke";
+    SpriteIconEnum["socialAddthis"] = "socialAddthis";
+    SpriteIconEnum["socialApple"] = "socialApple";
+    SpriteIconEnum["socialFacebook"] = "socialFacebook";
+    SpriteIconEnum["socialGoogle"] = "socialGoogle";
+    SpriteIconEnum["socialInstagram"] = "socialInstagram";
+    SpriteIconEnum["socialLinkedin"] = "socialLinkedin";
+    SpriteIconEnum["socialMail"] = "socialMail";
+    SpriteIconEnum["socialMessenger"] = "socialMessenger";
+    SpriteIconEnum["socialPinterest"] = "socialPinterest";
+    SpriteIconEnum["socialRemovethis"] = "socialRemovethis";
+    SpriteIconEnum["socialRss"] = "socialRss";
+    SpriteIconEnum["socialSnapchat"] = "socialSnapchat";
+    SpriteIconEnum["socialTiktok"] = "socialTiktok";
+    SpriteIconEnum["socialWhatsapp"] = "socialWhatsapp";
+    SpriteIconEnum["socialX"] = "socialX";
+    SpriteIconEnum["socialYoutube"] = "socialYoutube";
+    SpriteIconEnum["square"] = "square";
+    SpriteIconEnum["squareFull"] = "squareFull";
+    SpriteIconEnum["stamp"] = "stamp";
+    SpriteIconEnum["star"] = "star";
+    SpriteIconEnum["straight"] = "straight";
+    SpriteIconEnum["talk"] = "talk";
+    SpriteIconEnum["tarifProfileDollar"] = "tarifProfileDollar";
+    SpriteIconEnum["tarifProfileEuro"] = "tarifProfileEuro";
+    SpriteIconEnum["terminal"] = "terminal";
+    SpriteIconEnum["ticketAutovalidation"] = "ticketAutovalidation";
+    SpriteIconEnum["time"] = "time";
+    SpriteIconEnum["tinyElectricCar"] = "tinyElectricCar";
+    SpriteIconEnum["tinyTicket"] = "tinyTicket";
+    SpriteIconEnum["tip"] = "tip";
+    SpriteIconEnum["to"] = "to";
+    SpriteIconEnum["todUfr"] = "todUfr";
+    SpriteIconEnum["toolbarAdd"] = "toolbarAdd";
+    SpriteIconEnum["toolbarCalendarChecked"] = "toolbarCalendarChecked";
+    SpriteIconEnum["toolbarCalendarDefault"] = "toolbarCalendarDefault";
+    SpriteIconEnum["toolbarCalendarSchedule"] = "toolbarCalendarSchedule";
+    SpriteIconEnum["toolbarClose"] = "toolbarClose";
+    SpriteIconEnum["toolbarDelete"] = "toolbarDelete";
+    SpriteIconEnum["toolbarDisconnect"] = "toolbarDisconnect";
+    SpriteIconEnum["toolbarDownload"] = "toolbarDownload";
+    SpriteIconEnum["toolbarEdit"] = "toolbarEdit";
+    SpriteIconEnum["toolbarFavorite"] = "toolbarFavorite";
+    SpriteIconEnum["toolbarFavoriteAdd"] = "toolbarFavoriteAdd";
+    SpriteIconEnum["toolbarFavoriteAlert"] = "toolbarFavoriteAlert";
+    SpriteIconEnum["toolbarFavoriteNotSelected"] = "toolbarFavoriteNotSelected";
+    SpriteIconEnum["toolbarFilter"] = "toolbarFilter";
+    SpriteIconEnum["toolbarFilterCancel"] = "toolbarFilterCancel";
+    SpriteIconEnum["toolbarFullScreen2"] = "toolbarFullScreen2";
+    SpriteIconEnum["toolbarGuestMode"] = "toolbarGuestMode";
+    SpriteIconEnum["toolbarHidePassword"] = "toolbarHidePassword";
+    SpriteIconEnum["toolbarLess"] = "toolbarLess";
+    SpriteIconEnum["toolbarLogin"] = "toolbarLogin";
+    SpriteIconEnum["toolbarMenu"] = "toolbarMenu";
+    SpriteIconEnum["toolbarMinus"] = "toolbarMinus";
+    SpriteIconEnum["toolbarMyFamily"] = "toolbarMyFamily";
+    SpriteIconEnum["toolbarNavQuit"] = "toolbarNavQuit";
+    SpriteIconEnum["toolbarNextJourney"] = "toolbarNextJourney";
+    SpriteIconEnum["toolbarPastJourney"] = "toolbarPastJourney";
+    SpriteIconEnum["toolbarPlus"] = "toolbarPlus";
+    SpriteIconEnum["toolbarPrint"] = "toolbarPrint";
+    SpriteIconEnum["toolbarRecentSearch"] = "toolbarRecentSearch";
+    SpriteIconEnum["toolbarRefresh"] = "toolbarRefresh";
+    SpriteIconEnum["toolbarSchedule"] = "toolbarSchedule";
+    SpriteIconEnum["toolbarSearch"] = "toolbarSearch";
+    SpriteIconEnum["toolbarSettings1"] = "toolbarSettings1";
+    SpriteIconEnum["toolbarSettings2"] = "toolbarSettings2";
+    SpriteIconEnum["toolbarShare"] = "toolbarShare";
+    SpriteIconEnum["toolbarShowPassword"] = "toolbarShowPassword";
+    SpriteIconEnum["toolbarSocialShare"] = "toolbarSocialShare";
+    SpriteIconEnum["toolbarTable"] = "toolbarTable";
+    SpriteIconEnum["toolbarUpload"] = "toolbarUpload";
+    SpriteIconEnum["toolbarUser"] = "toolbarUser";
+    SpriteIconEnum["traffic"] = "traffic";
+    SpriteIconEnum["tripPlanner"] = "tripPlanner";
+    SpriteIconEnum["tripPlannerLine"] = "tripPlannerLine";
+    SpriteIconEnum["turnCompletelyLeft"] = "turnCompletelyLeft";
+    SpriteIconEnum["turnCompletelyRight"] = "turnCompletelyRight";
+    SpriteIconEnum["turnLeft"] = "turnLeft";
+    SpriteIconEnum["turnRight"] = "turnRight";
+    SpriteIconEnum["turnSlightlyLeft"] = "turnSlightlyLeft";
+    SpriteIconEnum["turnSlightlyRight"] = "turnSlightlyRight";
+    SpriteIconEnum["type2"] = "type2";
+    SpriteIconEnum["typeChademo"] = "typeChademo";
+    SpriteIconEnum["typeComboCcs"] = "typeComboCcs";
+    SpriteIconEnum["typeEf"] = "typeEf";
+    SpriteIconEnum["up"] = "up";
+    SpriteIconEnum["user"] = "user";
+    SpriteIconEnum["userConnected"] = "userConnected";
+    SpriteIconEnum["userConnectedLine"] = "userConnectedLine";
+    SpriteIconEnum["userLine"] = "userLine";
+    SpriteIconEnum["userTicket"] = "userTicket";
+    SpriteIconEnum["vector"] = "vector";
+    SpriteIconEnum["via"] = "via";
+    SpriteIconEnum["wagon"] = "wagon";
+    SpriteIconEnum["wagonHead"] = "wagonHead";
+    SpriteIconEnum["wallet"] = "wallet";
+    SpriteIconEnum["walletLine"] = "walletLine";
+    SpriteIconEnum["watts"] = "watts";
+    SpriteIconEnum["wifi"] = "wifi";
+    SpriteIconEnum["xls"] = "xls";
+    SpriteIconEnum["zip"] = "zip";
+})(SpriteIconEnum || (SpriteIconEnum = {}));
+
 class IconComponent {
     constructor() {
-        this.icon = 'cw-alert-help';
-        this.font = 'optyweb';
+        this.icon = SpriteIconEnum.alertHelp;
         this.type = IconTypeEnum.default;
         this.iconSize = IconSizeEnum['sm'];
         this.iconCssClass = '';
         this.iconUiType = IconUiTypeEnum.default;
+        this.spritePath = '/assets/icons/sprite.svg';
         this.iconTypeEnum = IconTypeEnum;
     }
     get hostClasses() {
-        if (this.type == IconTypeEnum.rounded) {
-            return 'icon-rounded icon-rounded-' + this.iconSize + ' icon-rounded-' + this.iconUiType;
-        }
-        else {
-            return 'icon icon-' + this.iconSize;
+        if (this.type === IconTypeEnum.rounded) {
+            return `icon-rounded icon-rounded-${this.iconSize} icon-rounded-${this.iconUiType}`;
         }
+        return `icon icon-${this.iconSize}`;
     }
-    ngOnInit() {
-        this.iconClass = this.font + ' ' + this.icon;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IconComponent, isStandalone: true, selector: "cw-icon", inputs: { icon: "icon", font: "font", label: "label", type: "type", iconSize: "iconSize", iconCssClass: "iconCssClass", iconUiType: "iconUiType", iconColorCustom: "iconColorCustom" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@if (type == iconTypeEnum.rounded) {\r\n      <span class=\"icon\">\r\n         <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\r\n      </span>\r\n    } @else {\r\n       <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\r\n    }\r\n\r\n<ng-template #icon>\r\n  <span [class]=\"iconClass + ' icon-span'\" [ngClass]=\"iconCssClass\" aria-hidden=\"true\" [attr.style]=\"iconColorCustom ? 'color: ' + iconColorCustom : null\"></span>\r\n  @if (label) {\r\n    <span class=\"visually-hidden\">{{ label }}</span>\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: IconComponent, isStandalone: true, selector: "cw-icon", inputs: { icon: "icon", label: "label", type: "type", iconSize: "iconSize", iconCssClass: "iconCssClass", iconUiType: "iconUiType", iconColorCustom: "iconColorCustom", spritePath: "spritePath" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@if (type == iconTypeEnum.rounded) {\r\n  <span class=\"icon\">\r\n    <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\r\n  </span>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\r\n}\r\n\r\n<ng-template #iconContent>\r\n  <svg class=\"icon-svg\" [ngClass]=\"iconCssClass\" aria-hidden=\"true\"\r\n    [attr.style]=\"iconColorCustom ? 'color: ' + iconColorCustom : null\">\r\n    <use [attr.href]=\"spritePath + '#' + icon\" />\r\n  </svg>\r\n  @if (label) {\r\n    <span class=\"visually-hidden\">{{ label }}</span>\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cw-icon', standalone: true, imports: [
-                        CommonModule
-                    ], template: "@if (type == iconTypeEnum.rounded) {\r\n      <span class=\"icon\">\r\n         <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\r\n      </span>\r\n    } @else {\r\n       <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\r\n    }\r\n\r\n<ng-template #icon>\r\n  <span [class]=\"iconClass + ' icon-span'\" [ngClass]=\"iconCssClass\" aria-hidden=\"true\" [attr.style]=\"iconColorCustom ? 'color: ' + iconColorCustom : null\"></span>\r\n  @if (label) {\r\n    <span class=\"visually-hidden\">{{ label }}</span>\r\n  }\r\n</ng-template>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { icon: [{
-                type: Input
-            }], font: [{
+            args: [{ selector: 'cw-icon', standalone: true, imports: [CommonModule], template: "@if (type == iconTypeEnum.rounded) {\r\n  <span class=\"icon\">\r\n    <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\r\n  </span>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\r\n}\r\n\r\n<ng-template #iconContent>\r\n  <svg class=\"icon-svg\" [ngClass]=\"iconCssClass\" aria-hidden=\"true\"\r\n    [attr.style]=\"iconColorCustom ? 'color: ' + iconColorCustom : null\">\r\n    <use [attr.href]=\"spritePath + '#' + icon\" />\r\n  </svg>\r\n  @if (label) {\r\n    <span class=\"visually-hidden\">{{ label }}</span>\r\n  }\r\n</ng-template>\r\n" }]
+        }], propDecorators: { icon: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -149,6 +617,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], iconColorCustom: [{
                 type: Input
+            }], spritePath: [{
+                type: Input
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -181,6 +651,7 @@ class CardComponent {
         this.isCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
         this.shouldRenderBody = signal(true, ...(ngDevMode ? [{ debugName: "shouldRenderBody" }] : []));
         this.iconSize = IconSizeEnum;
+        this.spriteIcon = SpriteIconEnum;
     }
     ngOnInit() {
         this.isCollapsed.set(this.collapsed);
@@ -223,16 +694,16 @@ class CardComponent {
     get collapsed_state() {
         return this.isCollapsed();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CardComponent, isStandalone: true, selector: "cw-card", inputs: { title: "title", type: "type", titleRank: "titleRank", collapsible: "collapsible", collapsed: "collapsed", collapseId: "collapseId", destroyOnHide: "destroyOnHide" }, outputs: { collapseClicked: "collapseClicked" }, viewQueries: [{ propertyName: "collapseDirective", first: true, predicate: ["collapse"], descendants: true }, { propertyName: "cardFooter", first: true, predicate: ["cardFooter"], descendants: true }], ngImport: i0, template: "<div class=\"card\" [class.card-collapse]=\"collapsible\" [class.card-light]=\"type == typeEnum.light\">\n  @if (title) {\n    <div class=\"card-header\" [class.card-header-collapse]=\"collapsible\"\n      [class.card-header-collapsed]=\"collapsible && isCollapsed()\">\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n    </div>\n  }\n\n   @if (shouldRenderBody()) {\n    <div class=\"card-body\" [cwCollapse]=\"isCollapsed()\" [id]=\"collapseId\" #collapse=\"cwCollapse\">\n      <ng-content></ng-content>\n    </div>\n  }\n\n  @if (showFooter) {\n    <div class=\"card-footer\" #cardFooter>\n      <ng-content select=\"[card-footer]\"></ng-content>\n    </div>\n  }\n</div>\n\n<ng-template #header>\n  @if (titleRank == titleRankEnum.h2) {\n    <h2>{{title}}</h2>\n  }\n  @else if (titleRank == titleRankEnum.h3) {\n    <h3>{{title}}</h3>\n  }\n\n  <div class=\"card-header-custom-area\">\n    <ng-content select=\"[header-custom-area]\"></ng-content>\n  </div>\n\n  @if (collapsible) {\n    <button type=\"button\" class=\"btn btn-collapse stretched-link\" (click)=\"toggleCollapse()\"\n      [attr.aria-expanded]=\"!isCollapsed()\" [class.collapsed]=\"isCollapsed()\" [attr.aria-controls]=\"collapseId\">\n      <cw-icon icon=\"cw-nav-expand2\" label=\"D\u00E9plier/Plier\" [iconSize]=\"iconSize['xs']\"></cw-icon>\n      <!-- // TODO trad -->\n    </button>\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CollapseDirective, selector: "[cwCollapse]", inputs: ["cwCollapse"], outputs: ["shown", "hidden"], exportAs: ["cwCollapse"] }, { kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "font", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CardComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: CardComponent, isStandalone: true, selector: "cw-card", inputs: { title: "title", type: "type", titleRank: "titleRank", collapsible: "collapsible", collapsed: "collapsed", collapseId: "collapseId", destroyOnHide: "destroyOnHide" }, outputs: { collapseClicked: "collapseClicked" }, viewQueries: [{ propertyName: "collapseDirective", first: true, predicate: ["collapse"], descendants: true }, { propertyName: "cardFooter", first: true, predicate: ["cardFooter"], descendants: true }], ngImport: i0, template: "<div class=\"card\" [class.card-collapse]=\"collapsible\" [class.card-light]=\"type == typeEnum.light\">\n  @if (title) {\n    <div class=\"card-header\" [class.card-header-collapse]=\"collapsible\"\n      [class.card-header-collapsed]=\"collapsible && isCollapsed()\">\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n    </div>\n  }\n\n  @if(collapsible) {\n    <div [cwCollapse]=\"isCollapsed()\" [id]=\"collapseId\" #collapse=\"cwCollapse\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  }\n  @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  }\n</div>\n\n<ng-template #header>\n  @if (titleRank == titleRankEnum.h2) {\n    <h2>{{title}}</h2>\n  }\n  @else if (titleRank == titleRankEnum.h3) {\n    <h3>{{title}}</h3>\n  }\n\n  <div class=\"card-header-custom-area\">\n    <ng-content select=\"[header-custom-area]\"></ng-content>\n  </div>\n\n  @if (collapsible) {\n    <button type=\"button\" class=\"btn btn-collapse stretched-link\" (click)=\"toggleCollapse()\"\n      [attr.aria-expanded]=\"!isCollapsed()\" [class.collapsed]=\"isCollapsed()\" [attr.aria-controls]=\"collapseId\">\n      <cw-icon [icon]=\"spriteIcon.down\" label=\"D\u00E9plier/Plier\" [iconSize]=\"iconSize['xs']\"></cw-icon>\n      <!-- // TODO trad -->\n    </button>\n  }\n</ng-template>\n\n<ng-template #content>\n  @if (shouldRenderBody()) {\n    <div class=\"card-body\">\n      <ng-content></ng-content>\n    </div>\n\n    @if (showFooter) {\n      <div class=\"card-footer\" #cardFooter>\n        <ng-content select=\"[card-footer]\"></ng-content>\n      </div>\n    }\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CollapseDirective, selector: "[cwCollapse]", inputs: ["cwCollapse"], outputs: ["shown", "hidden"], exportAs: ["cwCollapse"] }, { kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom", "spritePath"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cw-card', standalone: true, imports: [
                         CommonModule,
                         CollapseDirective,
                         IconComponent
-                    ], template: "<div class=\"card\" [class.card-collapse]=\"collapsible\" [class.card-light]=\"type == typeEnum.light\">\n  @if (title) {\n    <div class=\"card-header\" [class.card-header-collapse]=\"collapsible\"\n      [class.card-header-collapsed]=\"collapsible && isCollapsed()\">\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n    </div>\n  }\n\n   @if (shouldRenderBody()) {\n    <div class=\"card-body\" [cwCollapse]=\"isCollapsed()\" [id]=\"collapseId\" #collapse=\"cwCollapse\">\n      <ng-content></ng-content>\n    </div>\n  }\n\n  @if (showFooter) {\n    <div class=\"card-footer\" #cardFooter>\n      <ng-content select=\"[card-footer]\"></ng-content>\n    </div>\n  }\n</div>\n\n<ng-template #header>\n  @if (titleRank == titleRankEnum.h2) {\n    <h2>{{title}}</h2>\n  }\n  @else if (titleRank == titleRankEnum.h3) {\n    <h3>{{title}}</h3>\n  }\n\n  <div class=\"card-header-custom-area\">\n    <ng-content select=\"[header-custom-area]\"></ng-content>\n  </div>\n\n  @if (collapsible) {\n    <button type=\"button\" class=\"btn btn-collapse stretched-link\" (click)=\"toggleCollapse()\"\n      [attr.aria-expanded]=\"!isCollapsed()\" [class.collapsed]=\"isCollapsed()\" [attr.aria-controls]=\"collapseId\">\n      <cw-icon icon=\"cw-nav-expand2\" label=\"D\u00E9plier/Plier\" [iconSize]=\"iconSize['xs']\"></cw-icon>\n      <!-- // TODO trad -->\n    </button>\n  }\n</ng-template>\n" }]
+                    ], template: "<div class=\"card\" [class.card-collapse]=\"collapsible\" [class.card-light]=\"type == typeEnum.light\">\n  @if (title) {\n    <div class=\"card-header\" [class.card-header-collapse]=\"collapsible\"\n      [class.card-header-collapsed]=\"collapsible && isCollapsed()\">\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n    </div>\n  }\n\n  @if(collapsible) {\n    <div [cwCollapse]=\"isCollapsed()\" [id]=\"collapseId\" #collapse=\"cwCollapse\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  }\n  @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  }\n</div>\n\n<ng-template #header>\n  @if (titleRank == titleRankEnum.h2) {\n    <h2>{{title}}</h2>\n  }\n  @else if (titleRank == titleRankEnum.h3) {\n    <h3>{{title}}</h3>\n  }\n\n  <div class=\"card-header-custom-area\">\n    <ng-content select=\"[header-custom-area]\"></ng-content>\n  </div>\n\n  @if (collapsible) {\n    <button type=\"button\" class=\"btn btn-collapse stretched-link\" (click)=\"toggleCollapse()\"\n      [attr.aria-expanded]=\"!isCollapsed()\" [class.collapsed]=\"isCollapsed()\" [attr.aria-controls]=\"collapseId\">\n      <cw-icon [icon]=\"spriteIcon.down\" label=\"D\u00E9plier/Plier\" [iconSize]=\"iconSize['xs']\"></cw-icon>\n      <!-- // TODO trad -->\n    </button>\n  }\n</ng-template>\n\n<ng-template #content>\n  @if (shouldRenderBody()) {\n    <div class=\"card-body\">\n      <ng-content></ng-content>\n    </div>\n\n    @if (showFooter) {\n      <div class=\"card-footer\" #cardFooter>\n        <ng-content select=\"[card-footer]\"></ng-content>\n      </div>\n    }\n  }\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { title: [{
                 type: Input
             }], type: [{
@@ -335,10 +806,10 @@ class AccordionComponent {
     shouldCloseOthers() {
         return this.closeOthers && !this.allowMultiple;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AccordionComponent, isStandalone: true, selector: "cw-accordion", inputs: { closeOthers: "closeOthers", allowMultiple: "allowMultiple", destroyOnHide: "destroyOnHide" }, outputs: { panelOpened: "panelOpened", panelClosed: "panelClosed" }, queries: [{ propertyName: "cards", predicate: CardComponent }], ngImport: i0, template: "<div class=\"accordion\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: AccordionComponent, isStandalone: true, selector: "cw-accordion", inputs: { closeOthers: "closeOthers", allowMultiple: "allowMultiple", destroyOnHide: "destroyOnHide" }, outputs: { panelOpened: "panelOpened", panelClosed: "panelClosed" }, queries: [{ propertyName: "cards", predicate: CardComponent }], ngImport: i0, template: "<div class=\"accordion\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AccordionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cw-accordion', standalone: true, imports: [CommonModule], template: "<div class=\"accordion\">\r\n  <ng-content></ng-content>\r\n</div>\r\n" }]
         }], propDecorators: { closeOthers: [{
@@ -389,35 +860,36 @@ class IconNotificationComponent {
     ngOnInit() {
         switch (this.type) {
             case IconNotifTypeEnum.info:
-                this.icon = 'cw-alert-info2';
+                this.icon = SpriteIconEnum.alertHelp;
                 this.label = 'Informatiion';
                 break;
             case IconNotifTypeEnum.success:
-                this.icon = 'cw-alert-success2';
+                this.icon = SpriteIconEnum.eventDisruptionEnd;
                 this.label = 'Succès';
                 break;
             case IconNotifTypeEnum.warning:
-                this.icon = 'cw-event-warning';
+                this.icon = SpriteIconEnum.event;
                 this.label = 'Avertisement';
                 break;
             case IconNotifTypeEnum.danger:
-                this.icon = 'cw-toolbar-close1';
+                this.icon = SpriteIconEnum.toolbarClose;
                 this.label = 'Erreur';
                 break;
             case IconNotifTypeEnum.careful:
-                this.icon = 'cw-alert-warning';
+                this.icon = SpriteIconEnum.event;
                 this.label = 'Attention';
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: IconNotificationComponent, isStandalone: true, selector: "cw-icon-notification", inputs: { type: "type", iconSize: "iconSize" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "\r\n<span class=\"icon\">\r\n  <span class=\"icon-span optyweb\" [ngClass]=\"icon\" aria-hidden=\"true\" [title]=\"label\"></span>\r\n  <span class=\"visually-hidden\">{{ label }}</span>\r\n</span>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: IconNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: IconNotificationComponent, isStandalone: true, selector: "cw-icon-notification", inputs: { type: "type", iconSize: "iconSize" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "\r\n<span class=\"icon\">\r\n  <cw-icon [label]=\"label\" [iconSize]=\"iconSize['2xs']\" [icon]=\"icon\"></cw-icon>\r\n</span>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom", "spritePath"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconNotificationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: IconNotificationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cw-icon-notification', standalone: true, imports: [
-                        CommonModule
-                    ], template: "\r\n<span class=\"icon\">\r\n  <span class=\"icon-span optyweb\" [ngClass]=\"icon\" aria-hidden=\"true\" [title]=\"label\"></span>\r\n  <span class=\"visually-hidden\">{{ label }}</span>\r\n</span>\r\n" }]
+                        CommonModule,
+                        IconComponent
+                    ], template: "\r\n<span class=\"icon\">\r\n  <cw-icon [label]=\"label\" [iconSize]=\"iconSize['2xs']\" [icon]=\"icon\"></cw-icon>\r\n</span>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { type: [{
                 type: Input
             }], iconSize: [{
@@ -437,6 +909,7 @@ class AlertComponent {
         this.isVisible = true;
         this.showContent = true;
         this.iconSize = IconSizeEnum;
+        this.spriteIcon = SpriteIconEnum;
     }
     ngOnInit() {
         this.dataTest = this.dataTest ? this.dataTest : 'alert' + this.type;
@@ -471,17 +944,17 @@ class AlertComponent {
         this.isVisible = false;
         this.close.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlertComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AlertComponent, isStandalone: true, selector: "cw-alert", inputs: { type: "type", title: "title", isDismissible: "isDismissible", cssClass: "cssClass", dataTest: "dataTest" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "alertContent", first: true, predicate: ["alertContent"], descendants: true }], 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\">\r\n    <cw-icon-notification [type]=\"iconNotifType\"></cw-icon-notification>\r\n    <div class=\"alert-content\">\r\n      @if (title) {\r\n        <div class=\"fw-bold\">{{ title }}</div>\r\n      }\r\n\r\n      @if (showContent) {\r\n        <p class=\"mb-none\" #alertContent>\r\n          <ng-content></ng-content>\r\n        </p>\r\n      }\r\n    </div>\r\n    @if (isDismissible) {\r\n      <button type=\"button\" class=\"btn-close\" (click)=\"closeAlert()\"\r\n        [attr.aria-label]=\"'_COMMON._ACTION.CLOSE' | translate\"\r\n        [attr.data-test-ctw]=\"'close-' + dataTest\">\r\n        <cw-icon [label]=\"'_COMMON._ACTION.CLOSE' | translate\" [iconSize]=\"iconSize['2xs']\" icon=\"cw-toolbar-close1\"></cw-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: IconNotificationComponent, selector: "cw-icon-notification", inputs: ["type", "iconSize"] }, { kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "font", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AlertComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AlertComponent, isStandalone: true, selector: "cw-alert", inputs: { type: "type", title: "title", isDismissible: "isDismissible", cssClass: "cssClass", dataTest: "dataTest" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "alertContent", first: true, predicate: ["alertContent"], descendants: true }], 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\">\r\n    <cw-icon-notification [type]=\"iconNotifType\"></cw-icon-notification>\r\n    <div class=\"alert-content\">\r\n      @if (title) {\r\n        <div class=\"fw-bold\">{{ title }}</div>\r\n      }\r\n\r\n      @if (showContent) {\r\n        <p class=\"mb-none\" #alertContent>\r\n          <ng-content></ng-content>\r\n        </p>\r\n      }\r\n    </div>\r\n    @if (isDismissible) {\r\n      <button type=\"button\" class=\"btn-close\" (click)=\"closeAlert()\"\r\n        [attr.aria-label]=\"'_COMMON._ACTION.CLOSE' | translate\"\r\n        [attr.data-test-ctw]=\"'close-' + dataTest\">\r\n        <cw-icon [label]=\"'_COMMON._ACTION.CLOSE' | translate\" [iconSize]=\"iconSize['2xs']\" [icon]=\"spriteIcon.toolbarClose\"></cw-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: IconNotificationComponent, selector: "cw-icon-notification", inputs: ["type", "iconSize"] }, { kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom", "spritePath"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cw-alert', standalone: true, imports: [
                         CommonModule,
                         TranslateModule,
                         IconNotificationComponent,
                         IconComponent
-                    ], template: "@if (isVisible) {\r\n  <div [class]=\"'alert alert-' + type + ' '+ cssClass\" [ngClass]=\"{ 'alert-dismissible fade show': isDismissible }\"\r\n    [attr.data-test-ctw]=\"dataTest\">\r\n    <cw-icon-notification [type]=\"iconNotifType\"></cw-icon-notification>\r\n    <div class=\"alert-content\">\r\n      @if (title) {\r\n        <div class=\"fw-bold\">{{ title }}</div>\r\n      }\r\n\r\n      @if (showContent) {\r\n        <p class=\"mb-none\" #alertContent>\r\n          <ng-content></ng-content>\r\n        </p>\r\n      }\r\n    </div>\r\n    @if (isDismissible) {\r\n      <button type=\"button\" class=\"btn-close\" (click)=\"closeAlert()\"\r\n        [attr.aria-label]=\"'_COMMON._ACTION.CLOSE' | translate\"\r\n        [attr.data-test-ctw]=\"'close-' + dataTest\">\r\n        <cw-icon [label]=\"'_COMMON._ACTION.CLOSE' | translate\" [iconSize]=\"iconSize['2xs']\" icon=\"cw-toolbar-close1\"></cw-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n" }]
+                    ], template: "@if (isVisible) {\r\n  <div [class]=\"'alert alert-' + type + ' '+ cssClass\" [ngClass]=\"{ 'alert-dismissible fade show': isDismissible }\"\r\n    [attr.data-test-ctw]=\"dataTest\">\r\n    <cw-icon-notification [type]=\"iconNotifType\"></cw-icon-notification>\r\n    <div class=\"alert-content\">\r\n      @if (title) {\r\n        <div class=\"fw-bold\">{{ title }}</div>\r\n      }\r\n\r\n      @if (showContent) {\r\n        <p class=\"mb-none\" #alertContent>\r\n          <ng-content></ng-content>\r\n        </p>\r\n      }\r\n    </div>\r\n    @if (isDismissible) {\r\n      <button type=\"button\" class=\"btn-close\" (click)=\"closeAlert()\"\r\n        [attr.aria-label]=\"'_COMMON._ACTION.CLOSE' | translate\"\r\n        [attr.data-test-ctw]=\"'close-' + dataTest\">\r\n        <cw-icon [label]=\"'_COMMON._ACTION.CLOSE' | translate\" [iconSize]=\"iconSize['2xs']\" [icon]=\"spriteIcon.toolbarClose\"></cw-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
                 type: Input
             }], title: [{
@@ -517,10 +990,10 @@ class FocusTrackerService {
     ngOnDestroy() {
         document.removeEventListener('focus', this.focusListener, true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FocusTrackerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FocusTrackerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FocusTrackerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FocusTrackerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FocusTrackerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FocusTrackerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -594,10 +1067,10 @@ class ToastService {
     setLastToast(message) {
         this.lastToast = { message, date: new Date() };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToastService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ToastService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToastService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ToastService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -629,10 +1102,10 @@ class ToastComponent {
     close() {
         this.closed.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ToastComponent, isStandalone: true, selector: "cw-toast", outputs: { action: "action", closed: "closed" }, host: { attributes: { "role": "alert" }, properties: { "class.toast": "true" } }, ngImport: i0, template: "@for (toast of toastService.toasts; track toast.id) {\r\n  <cw-alert [type]=\"toast.type\" [isDismissible]=\"true\" [title]=\"toast.title\" (close)=\"toastService.remove(toast)\" [dataTest]=\"'toast-'+ toast.type\">\r\n    <span [innerHTML]=\"toast.message\"></span>&nbsp;\r\n    @if (toast.action) {\r\n      <a href=\"javascript:void(0);\" (click)=\"onAction(toast)\" class=\"alert-link\">{{ toast.action.label }}</a>\r\n    }\r\n  </cw-alert>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AlertComponent, selector: "cw-alert", inputs: ["type", "title", "isDismissible", "cssClass", "dataTest"], outputs: ["close"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ToastComponent, isStandalone: true, selector: "cw-toast", outputs: { action: "action", closed: "closed" }, host: { attributes: { "role": "alert" }, properties: { "class.toast": "true" } }, ngImport: i0, template: "@for (toast of toastService.toasts; track toast.id) {\r\n  <cw-alert [type]=\"toast.type\" [isDismissible]=\"true\" [title]=\"toast.title\" (close)=\"toastService.remove(toast)\" [dataTest]=\"'toast-'+ toast.type\">\r\n    <span [innerHTML]=\"toast.message\"></span>&nbsp;\r\n    @if (toast.action) {\r\n      <a href=\"javascript:void(0);\" (click)=\"onAction(toast)\" class=\"alert-link\">{{ toast.action.label }}</a>\r\n    }\r\n  </cw-alert>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AlertComponent, selector: "cw-alert", inputs: ["type", "title", "isDismissible", "cssClass", "dataTest"], outputs: ["close"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToastComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cw-toast', standalone: true, imports: [
                         CommonModule,
@@ -669,16 +1142,20 @@ var BadgePositionEnum;
 })(BadgePositionEnum || (BadgePositionEnum = {}));
 
 class BadgeComponent {
+    get hostClasses() {
+        return this.skeletonMode ? 'skeleton badge' : '';
+    }
     constructor() {
         this.badgePositionEnum = BadgePositionEnum;
         this.iconPosition = this.badgePositionEnum.left;
         this.cssClass = '';
+        this.skeletonMode = false;
         this.iconSizeEnum = IconSizeEnum;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BadgeComponent, isStandalone: true, selector: "cw-badge", inputs: { type: "type", label: "label", withIcon: "withIcon", iconPosition: "iconPosition", cssClass: "cssClass", dataTest: "dataTest" }, ngImport: i0, template: "<div [class]=\"'badge badge-' + type + ' '+ cssClass\" [attr.data-test-ctw]=\"dataTest ? dataTest : null\">\r\n\r\n  @if (withIcon && iconPosition === badgePositionEnum.left) {\r\n    <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSizeEnum['2xs']\"></cw-icon>\r\n  }\r\n\r\n  @if (label) {\r\n    {{ label }}\r\n  }\r\n\r\n  @if (withIcon && iconPosition === badgePositionEnum.right) {\r\n    <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSizeEnum['2xs']\"></cw-icon>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "font", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: BadgeComponent, isStandalone: true, selector: "cw-badge", inputs: { type: "type", label: "label", withIcon: "withIcon", iconPosition: "iconPosition", cssClass: "cssClass", skeletonMode: "skeletonMode", dataTest: "dataTest" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<div [class]=\"'badge badge-' + type + ' '+ cssClass\" [attr.data-test-ctw]=\"dataTest ? dataTest : null\">\r\n\r\n  @if (withIcon && iconPosition === badgePositionEnum.left) {\r\n    <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSizeEnum['2xs']\"></cw-icon>\r\n  }\r\n\r\n  @if (label) {\r\n    {{ label }}\r\n  }\r\n\r\n  @if (withIcon && iconPosition === badgePositionEnum.right) {\r\n    <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSizeEnum['2xs']\"></cw-icon>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom", "spritePath"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cw-badge', standalone: true, imports: [IconComponent], template: "<div [class]=\"'badge badge-' + type + ' '+ cssClass\" [attr.data-test-ctw]=\"dataTest ? dataTest : null\">\r\n\r\n  @if (withIcon && iconPosition === badgePositionEnum.left) {\r\n    <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSizeEnum['2xs']\"></cw-icon>\r\n  }\r\n\r\n  @if (label) {\r\n    {{ label }}\r\n  }\r\n\r\n  @if (withIcon && iconPosition === badgePositionEnum.right) {\r\n    <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSizeEnum['2xs']\"></cw-icon>\r\n  }\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { type: [{
@@ -691,8 +1168,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], cssClass: [{
                 type: Input
+            }], skeletonMode: [{
+                type: Input
             }], dataTest: [{
                 type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 class ClickOutsideDirective {
@@ -707,10 +1189,10 @@ class ClickOutsideDirective {
         this.elementRef = elementRef;
         this.clickOutside = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ClickOutsideDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clickOutside]',
@@ -773,10 +1255,10 @@ class ResponsiveService {
     checkIsMobileResolution() {
         return window.innerWidth < 768;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ResponsiveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ResponsiveService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ResponsiveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ResponsiveService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ResponsiveService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ResponsiveService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -805,29 +1287,32 @@ class DropdownItemDirective {
         this.elementRef.nativeElement.classList.add('dropdown-item');
         this.elementRef.nativeElement.setAttribute('tabindex', '0');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropdownItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: DropdownItemDirective, isStandalone: true, selector: "[cwDropdownItem]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DropdownItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DropdownItemDirective, isStandalone: true, selector: "[cwDropdownItem]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropdownItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DropdownItemDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[cwDropdownItem]' }]
         }] });
 class ButtonComponent {
+    get hostClasses() {
+        return this.skeletonMode ? 'skeleton btn' : '';
+    }
     constructor() {
         this.renderer = inject(Renderer2);
         this.responsiveService = inject(ResponsiveService);
         this.buttonPositionEnum = ButtonPositionEnum;
         this.id = '';
         this.isDropdown = false;
-        this.withIcon = '';
         this.withOnlyIcon = false;
         this.iconSize = ButtonIconSizeEnum.default;
         this.iconPosition = this.buttonPositionEnum.left;
         this.dropdownPosition = this.buttonPositionEnum.right;
         this.isMinWidth = false;
         this.isDisabled = false;
-        this.withSpinner = false;
+        this.isLoading = false;
         this.cssClass = '';
+        this.skeletonMode = false;
         this.withTooltip = false;
         this.tooltipText = '';
         this.tooltipTitle = '';
@@ -836,7 +1321,6 @@ class ButtonComponent {
         this.tooltipType = TypeTooltipEnum.tooltip;
         this.btnAction = new EventEmitter();
         this.dropDownClicked = new EventEmitter();
-        this.isLoading = false;
         this.iconSizeEnum = IconSizeEnum;
         this.iconType = IconTypeEnum;
         this.iconUiType = IconUiTypeEnum;
@@ -873,9 +1357,6 @@ class ButtonComponent {
     }
     onBtnAction() {
         this.btnAction.emit();
-        if (this.withSpinner) {
-            this.isLoading = !this.isLoading;
-        }
     }
     toggleDropdown() {
         this.getPlacement(this.dropdownPosition);
@@ -956,17 +1437,17 @@ class ButtonComponent {
     getRandomId(min, max) {
         return Math.floor(Math.random() * (max - min + 1)) + min;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ButtonComponent, isStandalone: true, selector: "cw-button", inputs: { type: "type", label: "label", id: "id", isDropdown: "isDropdown", withIcon: "withIcon", withOnlyIcon: "withOnlyIcon", iconSize: "iconSize", iconPosition: "iconPosition", dropdownPosition: "dropdownPosition", isMinWidth: "isMinWidth", isDisabled: "isDisabled", withSpinner: "withSpinner", cssClass: "cssClass", dataTest: "dataTest", withTooltip: "withTooltip", tooltipText: "tooltipText", tooltipTitle: "tooltipTitle", tooltipTrigger: "tooltipTrigger", tooltipPosition: "tooltipPosition", tooltipType: "tooltipType" }, outputs: { btnAction: "btnAction", dropDownClicked: "dropDownClicked" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }, { propertyName: "dropdownToggle", first: true, predicate: ["dropdownToggle"], descendants: true }], ngImport: i0, template: "<!-- Wrapper pour le tooltip -->\r\n@if (withTooltip) {\r\n  <div class=\"d-inline-block position-relative\" (clickOutside)=\"onTooltipClickOutside()\" ctwClickOutside>\r\n\r\n    <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n\r\n    <!-- Tooltip/Popover -->\r\n    @if (isTooltipOpened) {\r\n    <div role=\"tooltip\" [id]=\"'ctw-tooltip-' + tooltipRandomId\" [ngClass]=\"tooltipType + ' fade show ' + tooltipType + '-' + tooltipPosition\">\r\n      <div class=\"arrow\"></div>\r\n        @if (tooltipTitle) {\r\n          <div [ngClass]=\"(tooltipType === typeTooltipEnum.popover ? 'popover' : 'tooltip') + '-header'\"\r\n            [innerHTML]=\"tooltipTitle\"></div>\r\n        }\r\n        <div [ngClass]=\"tooltipType === typeTooltipEnum.tooltip ? 'tooltip-inner' : 'popover-body'\"\r\n          [innerHTML]=\"tooltipText\"></div>\r\n    </div>\r\n    }\r\n  </div>\r\n}\r\n@else {\r\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n}\r\n\r\n<!-- Template du bouton (code existant envelopp\u00E9) -->\r\n<ng-template #buttonTemplate>\r\n  @if (!isDropdown) {\r\n    <button type=\"button\" class=\"btn\" [class]=\"'btn-' + type + ' ' + cssClass\" [ngClass]=\"getButtonClasses()\"\r\n      [disabled]=\"isDisabled\" (click)=\"onBtnAction()\" [attr.data-test-ctw]=\"dataTest\"\r\n      [attr.aria-describedby]=\"withTooltip && isTooltipOpened ? 'ctw-tooltip-' + tooltipRandomId : null\"\r\n      (mouseenter)=\"withTooltip && tooltipTrigger === 'hover' ? showTooltip() : null\"\r\n      (mouseleave)=\"withTooltip && tooltipTrigger === 'hover' ? hideTooltip() : null\"\r\n      (click)=\"withTooltip && tooltipTrigger === 'click' ? showTooltip() : null\">\r\n\r\n      @if (isLoading) {\r\n      <span class=\"spinner-border spinner-border-sm\" aria-hidden=\"true\"></span>\r\n      <span class=\"visually-hidden\" role=\"status\">{{ '_COMMON._HTTP.TXT_LOADING' | translate }}</span>\r\n      }\r\n\r\n      <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\r\n    </button>\r\n  }\r\n  @else {\r\n    <div (clickOutside)=\"onClickOutside()\" ctwClickOutside #dropdown class=\"d-inline-block\">\r\n      <button class=\"btn\" [class]=\"'btn-' + type + ' '\" type=\"button\"\r\n        [ngClass]=\"getButtonClasses()\"\r\n        [disabled]=\"isDisabled\" [id]=\"id\" aria-expanded=\"false\" (click)=\"toggleDropdown()\" #dropdownToggle\r\n        [attr.data-test-ctw]=\"dataTest\"\r\n        [attr.aria-describedby]=\"withTooltip && isTooltipOpened ? 'ctw-tooltip-' + tooltipRandomId : null\"\r\n        (mouseenter)=\"withTooltip && tooltipTrigger === 'hover' ? showTooltip() : null\"\r\n        (mouseleave)=\"withTooltip && tooltipTrigger === 'hover' ? hideTooltip() : null\">\r\n\r\n        <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\r\n      </button>\r\n\r\n      <div [attr.aria-labelledby]=\"id\" class=\"dropdown-menu\" [ngClass]=\"placementCss\" #dropdownMenu>\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<!-- Template existant du contenu du bouton -->\r\n<ng-template #buttonContent>\r\n  @if (withIcon && iconPosition === buttonPositionEnum.left) {\r\n    <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\r\n  }\r\n\r\n  @if(withOnlyIcon) {\r\n    <span class=\"visually-hidden\">{{label | translate }}</span>\r\n  }\r\n  @else {\r\n    {{ label | translate }}\r\n  }\r\n\r\n  @if (withIcon && iconPosition === buttonPositionEnum.right) {\r\n    <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #iconContent>\r\n    @if(withOnlyIcon) {\r\n      @switch(iconSize) {\r\n        @case(buttonIconSizeEnum.xsmall) {\r\n          <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSizeEnum['xs']\"></cw-icon>\r\n        }\r\n        @case(buttonIconSizeEnum.small) {\r\n          <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSizeEnum['sm']\"></cw-icon>\r\n        }\r\n        @default {\r\n          <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSizeEnum['md']\"></cw-icon>\r\n        }\r\n      }\r\n    }\r\n    @else {\r\n      <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSizeEnum['md']\"></cw-icon>\r\n    }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "font", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ButtonComponent, isStandalone: true, selector: "cw-button", inputs: { type: "type", label: "label", id: "id", isDropdown: "isDropdown", withIcon: "withIcon", withOnlyIcon: "withOnlyIcon", iconSize: "iconSize", iconPosition: "iconPosition", dropdownPosition: "dropdownPosition", isMinWidth: "isMinWidth", isDisabled: "isDisabled", isLoading: "isLoading", cssClass: "cssClass", dataTest: "dataTest", skeletonMode: "skeletonMode", withTooltip: "withTooltip", tooltipText: "tooltipText", tooltipTitle: "tooltipTitle", tooltipTrigger: "tooltipTrigger", tooltipPosition: "tooltipPosition", tooltipType: "tooltipType" }, outputs: { btnAction: "btnAction", dropDownClicked: "dropDownClicked" }, host: { properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }, { propertyName: "dropdownToggle", first: true, predicate: ["dropdownToggle"], descendants: true }], ngImport: i0, template: "<!-- Wrapper pour le tooltip -->\r\n@if (withTooltip) {\r\n  <div class=\"d-inline-block position-relative\" (clickOutside)=\"onTooltipClickOutside()\" ctwClickOutside>\r\n\r\n    <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n\r\n    <!-- Tooltip/Popover -->\r\n    @if (isTooltipOpened) {\r\n    <div role=\"tooltip\" [id]=\"'ctw-tooltip-' + tooltipRandomId\" [ngClass]=\"tooltipType + ' fade show ' + tooltipType + '-' + tooltipPosition\">\r\n      <div class=\"arrow\"></div>\r\n        @if (tooltipTitle) {\r\n          <div [ngClass]=\"(tooltipType === typeTooltipEnum.popover ? 'popover' : 'tooltip') + '-header'\"\r\n            [innerHTML]=\"tooltipTitle\"></div>\r\n        }\r\n        <div [ngClass]=\"tooltipType === typeTooltipEnum.tooltip ? 'tooltip-inner' : 'popover-body'\"\r\n          [innerHTML]=\"tooltipText\"></div>\r\n    </div>\r\n    }\r\n  </div>\r\n}\r\n@else {\r\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n}\r\n\r\n<!-- Template du bouton (code existant envelopp\u00E9) -->\r\n<ng-template #buttonTemplate>\r\n  @if (!isDropdown) {\r\n    <button type=\"button\" class=\"btn\" [class]=\"'btn-' + type + ' ' + cssClass\" [ngClass]=\"getButtonClasses()\"\r\n      [disabled]=\"isDisabled\" (click)=\"onBtnAction()\" [attr.data-test-ctw]=\"dataTest\"\r\n      [attr.aria-describedby]=\"withTooltip && isTooltipOpened ? 'ctw-tooltip-' + tooltipRandomId : null\"\r\n      (mouseenter)=\"withTooltip && tooltipTrigger === 'hover' ? showTooltip() : null\"\r\n      (mouseleave)=\"withTooltip && tooltipTrigger === 'hover' ? hideTooltip() : null\"\r\n      (click)=\"withTooltip && tooltipTrigger === 'click' ? showTooltip() : null\">\r\n\r\n      @if (isLoading) {\r\n        <span class=\"spinner-border spinner-border-sm\" aria-hidden=\"true\"></span>\r\n        <span class=\"visually-hidden\" role=\"status\">{{ '_COMMON._HTTP.TXT_LOADING' | translate }}</span>\r\n      }\r\n\r\n      <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\r\n    </button>\r\n  }\r\n  @else {\r\n    <div (clickOutside)=\"onClickOutside()\" ctwClickOutside #dropdown class=\"d-inline-block\">\r\n      <button class=\"btn\" [class]=\"'btn-' + type + ' '\" type=\"button\"\r\n        [ngClass]=\"getButtonClasses()\"\r\n        [disabled]=\"isDisabled\" [id]=\"id\" aria-expanded=\"false\" (click)=\"toggleDropdown()\" #dropdownToggle\r\n        [attr.data-test-ctw]=\"dataTest\"\r\n        [attr.aria-describedby]=\"withTooltip && isTooltipOpened ? 'ctw-tooltip-' + tooltipRandomId : null\"\r\n        (mouseenter)=\"withTooltip && tooltipTrigger === 'hover' ? showTooltip() : null\"\r\n        (mouseleave)=\"withTooltip && tooltipTrigger === 'hover' ? hideTooltip() : null\">\r\n\r\n        <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\r\n      </button>\r\n\r\n      <div [attr.aria-labelledby]=\"id\" class=\"dropdown-menu\" [ngClass]=\"placementCss\" #dropdownMenu>\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<!-- Template existant du contenu du bouton -->\r\n<ng-template #buttonContent>\r\n  @if (withIcon && iconPosition === buttonPositionEnum.left) {\r\n    <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\r\n  }\r\n\r\n  @if(withOnlyIcon) {\r\n    <span class=\"visually-hidden\">{{label | translate }}</span>\r\n  }\r\n  @else {\r\n    {{ label | translate }}\r\n  }\r\n\r\n  @if (withIcon && iconPosition === buttonPositionEnum.right) {\r\n    <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #iconContent>\r\n    @if(withOnlyIcon) {\r\n      @switch(iconSize) {\r\n        @case(buttonIconSizeEnum.xsmall) {\r\n          <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSizeEnum['xs']\"></cw-icon>\r\n        }\r\n        @case(buttonIconSizeEnum.small) {\r\n          <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSizeEnum['sm']\"></cw-icon>\r\n        }\r\n        @default {\r\n          <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSizeEnum['md']\"></cw-icon>\r\n        }\r\n      }\r\n    }\r\n    @else {\r\n      <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSizeEnum['md']\"></cw-icon>\r\n    }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom", "spritePath"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cw-button', standalone: true, imports: [
                         CommonModule,
                         TranslateModule,
                         IconComponent,
                         ClickOutsideDirective
-                    ], template: "<!-- Wrapper pour le tooltip -->\r\n@if (withTooltip) {\r\n  <div class=\"d-inline-block position-relative\" (clickOutside)=\"onTooltipClickOutside()\" ctwClickOutside>\r\n\r\n    <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n\r\n    <!-- Tooltip/Popover -->\r\n    @if (isTooltipOpened) {\r\n    <div role=\"tooltip\" [id]=\"'ctw-tooltip-' + tooltipRandomId\" [ngClass]=\"tooltipType + ' fade show ' + tooltipType + '-' + tooltipPosition\">\r\n      <div class=\"arrow\"></div>\r\n        @if (tooltipTitle) {\r\n          <div [ngClass]=\"(tooltipType === typeTooltipEnum.popover ? 'popover' : 'tooltip') + '-header'\"\r\n            [innerHTML]=\"tooltipTitle\"></div>\r\n        }\r\n        <div [ngClass]=\"tooltipType === typeTooltipEnum.tooltip ? 'tooltip-inner' : 'popover-body'\"\r\n          [innerHTML]=\"tooltipText\"></div>\r\n    </div>\r\n    }\r\n  </div>\r\n}\r\n@else {\r\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n}\r\n\r\n<!-- Template du bouton (code existant envelopp\u00E9) -->\r\n<ng-template #buttonTemplate>\r\n  @if (!isDropdown) {\r\n    <button type=\"button\" class=\"btn\" [class]=\"'btn-' + type + ' ' + cssClass\" [ngClass]=\"getButtonClasses()\"\r\n      [disabled]=\"isDisabled\" (click)=\"onBtnAction()\" [attr.data-test-ctw]=\"dataTest\"\r\n      [attr.aria-describedby]=\"withTooltip && isTooltipOpened ? 'ctw-tooltip-' + tooltipRandomId : null\"\r\n      (mouseenter)=\"withTooltip && tooltipTrigger === 'hover' ? showTooltip() : null\"\r\n      (mouseleave)=\"withTooltip && tooltipTrigger === 'hover' ? hideTooltip() : null\"\r\n      (click)=\"withTooltip && tooltipTrigger === 'click' ? showTooltip() : null\">\r\n\r\n      @if (isLoading) {\r\n      <span class=\"spinner-border spinner-border-sm\" aria-hidden=\"true\"></span>\r\n      <span class=\"visually-hidden\" role=\"status\">{{ '_COMMON._HTTP.TXT_LOADING' | translate }}</span>\r\n      }\r\n\r\n      <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\r\n    </button>\r\n  }\r\n  @else {\r\n    <div (clickOutside)=\"onClickOutside()\" ctwClickOutside #dropdown class=\"d-inline-block\">\r\n      <button class=\"btn\" [class]=\"'btn-' + type + ' '\" type=\"button\"\r\n        [ngClass]=\"getButtonClasses()\"\r\n        [disabled]=\"isDisabled\" [id]=\"id\" aria-expanded=\"false\" (click)=\"toggleDropdown()\" #dropdownToggle\r\n        [attr.data-test-ctw]=\"dataTest\"\r\n        [attr.aria-describedby]=\"withTooltip && isTooltipOpened ? 'ctw-tooltip-' + tooltipRandomId : null\"\r\n        (mouseenter)=\"withTooltip && tooltipTrigger === 'hover' ? showTooltip() : null\"\r\n        (mouseleave)=\"withTooltip && tooltipTrigger === 'hover' ? hideTooltip() : null\">\r\n\r\n        <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\r\n      </button>\r\n\r\n      <div [attr.aria-labelledby]=\"id\" class=\"dropdown-menu\" [ngClass]=\"placementCss\" #dropdownMenu>\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<!-- Template existant du contenu du bouton -->\r\n<ng-template #buttonContent>\r\n  @if (withIcon && iconPosition === buttonPositionEnum.left) {\r\n    <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\r\n  }\r\n\r\n  @if(withOnlyIcon) {\r\n    <span class=\"visually-hidden\">{{label | translate }}</span>\r\n  }\r\n  @else {\r\n    {{ label | translate }}\r\n  }\r\n\r\n  @if (withIcon && iconPosition === buttonPositionEnum.right) {\r\n    <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #iconContent>\r\n    @if(withOnlyIcon) {\r\n      @switch(iconSize) {\r\n        @case(buttonIconSizeEnum.xsmall) {\r\n          <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSizeEnum['xs']\"></cw-icon>\r\n        }\r\n        @case(buttonIconSizeEnum.small) {\r\n          <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSizeEnum['sm']\"></cw-icon>\r\n        }\r\n        @default {\r\n          <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSizeEnum['md']\"></cw-icon>\r\n        }\r\n      }\r\n    }\r\n    @else {\r\n      <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSizeEnum['md']\"></cw-icon>\r\n    }\r\n</ng-template>\r\n" }]
+                    ], template: "<!-- Wrapper pour le tooltip -->\r\n@if (withTooltip) {\r\n  <div class=\"d-inline-block position-relative\" (clickOutside)=\"onTooltipClickOutside()\" ctwClickOutside>\r\n\r\n    <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n\r\n    <!-- Tooltip/Popover -->\r\n    @if (isTooltipOpened) {\r\n    <div role=\"tooltip\" [id]=\"'ctw-tooltip-' + tooltipRandomId\" [ngClass]=\"tooltipType + ' fade show ' + tooltipType + '-' + tooltipPosition\">\r\n      <div class=\"arrow\"></div>\r\n        @if (tooltipTitle) {\r\n          <div [ngClass]=\"(tooltipType === typeTooltipEnum.popover ? 'popover' : 'tooltip') + '-header'\"\r\n            [innerHTML]=\"tooltipTitle\"></div>\r\n        }\r\n        <div [ngClass]=\"tooltipType === typeTooltipEnum.tooltip ? 'tooltip-inner' : 'popover-body'\"\r\n          [innerHTML]=\"tooltipText\"></div>\r\n    </div>\r\n    }\r\n  </div>\r\n}\r\n@else {\r\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n}\r\n\r\n<!-- Template du bouton (code existant envelopp\u00E9) -->\r\n<ng-template #buttonTemplate>\r\n  @if (!isDropdown) {\r\n    <button type=\"button\" class=\"btn\" [class]=\"'btn-' + type + ' ' + cssClass\" [ngClass]=\"getButtonClasses()\"\r\n      [disabled]=\"isDisabled\" (click)=\"onBtnAction()\" [attr.data-test-ctw]=\"dataTest\"\r\n      [attr.aria-describedby]=\"withTooltip && isTooltipOpened ? 'ctw-tooltip-' + tooltipRandomId : null\"\r\n      (mouseenter)=\"withTooltip && tooltipTrigger === 'hover' ? showTooltip() : null\"\r\n      (mouseleave)=\"withTooltip && tooltipTrigger === 'hover' ? hideTooltip() : null\"\r\n      (click)=\"withTooltip && tooltipTrigger === 'click' ? showTooltip() : null\">\r\n\r\n      @if (isLoading) {\r\n        <span class=\"spinner-border spinner-border-sm\" aria-hidden=\"true\"></span>\r\n        <span class=\"visually-hidden\" role=\"status\">{{ '_COMMON._HTTP.TXT_LOADING' | translate }}</span>\r\n      }\r\n\r\n      <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\r\n    </button>\r\n  }\r\n  @else {\r\n    <div (clickOutside)=\"onClickOutside()\" ctwClickOutside #dropdown class=\"d-inline-block\">\r\n      <button class=\"btn\" [class]=\"'btn-' + type + ' '\" type=\"button\"\r\n        [ngClass]=\"getButtonClasses()\"\r\n        [disabled]=\"isDisabled\" [id]=\"id\" aria-expanded=\"false\" (click)=\"toggleDropdown()\" #dropdownToggle\r\n        [attr.data-test-ctw]=\"dataTest\"\r\n        [attr.aria-describedby]=\"withTooltip && isTooltipOpened ? 'ctw-tooltip-' + tooltipRandomId : null\"\r\n        (mouseenter)=\"withTooltip && tooltipTrigger === 'hover' ? showTooltip() : null\"\r\n        (mouseleave)=\"withTooltip && tooltipTrigger === 'hover' ? hideTooltip() : null\">\r\n\r\n        <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\r\n      </button>\r\n\r\n      <div [attr.aria-labelledby]=\"id\" class=\"dropdown-menu\" [ngClass]=\"placementCss\" #dropdownMenu>\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<!-- Template existant du contenu du bouton -->\r\n<ng-template #buttonContent>\r\n  @if (withIcon && iconPosition === buttonPositionEnum.left) {\r\n    <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\r\n  }\r\n\r\n  @if(withOnlyIcon) {\r\n    <span class=\"visually-hidden\">{{label | translate }}</span>\r\n  }\r\n  @else {\r\n    {{ label | translate }}\r\n  }\r\n\r\n  @if (withIcon && iconPosition === buttonPositionEnum.right) {\r\n    <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #iconContent>\r\n    @if(withOnlyIcon) {\r\n      @switch(iconSize) {\r\n        @case(buttonIconSizeEnum.xsmall) {\r\n          <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSizeEnum['xs']\"></cw-icon>\r\n        }\r\n        @case(buttonIconSizeEnum.small) {\r\n          <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSizeEnum['sm']\"></cw-icon>\r\n        }\r\n        @default {\r\n          <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSizeEnum['md']\"></cw-icon>\r\n        }\r\n      }\r\n    }\r\n    @else {\r\n      <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSizeEnum['md']\"></cw-icon>\r\n    }\r\n</ng-template>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { type: [{
                 type: Input
             }], label: [{
@@ -989,12 +1470,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], isDisabled: [{
                 type: Input
-            }], withSpinner: [{
+            }], isLoading: [{
                 type: Input
             }], cssClass: [{
                 type: Input
             }], dataTest: [{
                 type: Input
+            }], skeletonMode: [{
+                type: Input
             }], withTooltip: [{
                 type: Input
             }], tooltipText: [{
@@ -1020,6 +1503,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }], dropdownToggle: [{
                 type: ViewChild,
                 args: ['dropdownToggle']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 class DropdownComponent {
@@ -1073,10 +1559,10 @@ class DropdownComponent {
             this.closeDropdown();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DropdownComponent, isStandalone: true, selector: "cw-dropdown", inputs: { id: "id", title: "title", icon: "icon", btnCustom: "btnCustom", btnCssClass: "btnCssClass", menuClass: "menuClass", placement: "placement", autoClose: "autoClose" }, outputs: { opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "dropdownElement", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }, { propertyName: "dropdownToggle", first: true, predicate: ["dropdownToggle"], descendants: true }], ngImport: i0, template: "<div class=\"dropdown\" [class.show]=\"isOpen()\" (clickOutside)=\"onClickOutside()\" clickOutside #dropdown>\r\n\r\n  <button type=\"button\" class=\"dropdown-toggle btn\" [id]=\"dropdownId\" [attr.aria-expanded]=\"isOpen()\"\r\n    [attr.aria-haspopup]=\"true\" (click)=\"toggleDropdown()\" [ngClass]=\"btnCssClass\" #dropdownToggle>\r\n\r\n    <!-- Custom button content -->\r\n    <ng-content select=\"[button]\"></ng-content>\r\n\r\n    <!-- Classic button with icon -->\r\n    @if (!btnCustom) {\r\n      <cw-icon label=\"Menu\"></cw-icon>\r\n    }\r\n  </button>\r\n\r\n  <div [attr.aria-labelledby]=\"dropdownId\" class=\"dropdown-menu\" [class.show]=\"isOpen()\"\r\n    [ngClass]=\"placementCss + ' ' + menuClass\" #dropdownMenu>\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "font", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DropdownComponent, isStandalone: true, selector: "cw-dropdown", inputs: { id: "id", title: "title", icon: "icon", btnCustom: "btnCustom", btnCssClass: "btnCssClass", menuClass: "menuClass", placement: "placement", autoClose: "autoClose" }, outputs: { opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "dropdownElement", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }, { propertyName: "dropdownToggle", first: true, predicate: ["dropdownToggle"], descendants: true }], ngImport: i0, template: "<div class=\"dropdown\" [class.show]=\"isOpen()\" (clickOutside)=\"onClickOutside()\" clickOutside #dropdown>\r\n\r\n  <button type=\"button\" class=\"dropdown-toggle btn\" [id]=\"dropdownId\" [attr.aria-expanded]=\"isOpen()\"\r\n    [attr.aria-haspopup]=\"true\" (click)=\"toggleDropdown()\" [ngClass]=\"btnCssClass\" #dropdownToggle>\r\n\r\n    <!-- Custom button content -->\r\n    <ng-content select=\"[button]\"></ng-content>\r\n\r\n    <!-- Classic button with icon -->\r\n    @if (!btnCustom) {\r\n      <cw-icon label=\"Menu\"></cw-icon>\r\n    }\r\n  </button>\r\n\r\n  <div [attr.aria-labelledby]=\"dropdownId\" class=\"dropdown-menu\" [class.show]=\"isOpen()\"\r\n    [ngClass]=\"placementCss + ' ' + menuClass\" #dropdownMenu>\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom", "spritePath"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cw-dropdown', standalone: true, imports: [
                         CommonModule,
@@ -1153,10 +1639,10 @@ class ShowHidePasswordDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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.16", type: ShowHidePasswordDirective, isStandalone: true, selector: "[showHidePassword]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", 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.18", type: ShowHidePasswordDirective, isStandalone: true, selector: "[showHidePassword]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ShowHidePasswordDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ShowHidePasswordDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1246,7 +1732,12 @@ function parseTime(time) {
 }
 class FormFieldComponent {
     get hostClasses() {
-        return 'position-relative';
+        return [
+            'position-relative',
+            this.skeletonMode && 'skeleton form-control'
+        ]
+            .filter(Boolean)
+            .join(' ');
     }
     constructor() {
         this.displayLabel = true;
@@ -1255,9 +1746,11 @@ class FormFieldComponent {
         this.isInAddon = false;
         this.isReadonly = false;
         this.isDisabled = false;
+        this.skeletonMode = false;
         this.refreshEvent = new EventEmitter();
         this.textChanged = new EventEmitter();
         this.typeField = FormFieldTypeEnum;
+        this.spriteIcon = SpriteIconEnum;
     }
     get isRange() {
         if (!this.control)
@@ -1396,10 +1889,10 @@ class FormFieldComponent {
         }
         this.formControl.markAsTouched();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FormFieldComponent, isStandalone: true, selector: "cw-form-field", inputs: { control: "control", formGroup: "formGroup", type: "type", label: "label", displayLabel: "displayLabel", name: "name", placeholder: "placeholder", options: "options", rangeOptions: "rangeOptions", isRequired: "isRequired", help: "help", tooltip: "tooltip", addonLeft: "addonLeft", addonRight: "addonRight", isInAddon: "isInAddon", isReadonly: "isReadonly", isDisabled: "isDisabled", sliderValue: "sliderValue", sliderOptions: "sliderOptions", cssClass: "cssClass" }, outputs: { refreshEvent: "refreshEvent", textChanged: "textChanged" }, host: { properties: { "class": "this.hostClasses" } }, queries: [{ propertyName: "optionTemplate", first: true, predicate: ["ngOptionTpl"], descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: ["ngLabelTpl"], descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (!isInAddon) {\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.range &&\r\n  type !== typeField.switchSmall\r\n\r\n  ) {\r\n    <label [for]=\"name\" class=\"form-label\" [class.visually-hidden]=\"!displayLabel\">\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        @if(addonLeft) {\r\n          <ng-container [ngTemplateOutlet]=\"addonLeft\"></ng-container>\r\n        }\r\n        <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n        @if(addonRight) {\r\n          <ng-container [ngTemplateOutlet]=\"addonRight\"></ng-container>\r\n        }\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        @if ((controlOrGroup?.errors?.['required']) || (getControl('start')?.errors?.['required'] || getControl('end')?.errors?.['required'])) {\r\n          <span [innerHtml]=\"'_COMMON._FORM.ERROR_IS_MANDATORY' | translate: {label: label}\"></span>\r\n        }\r\n        @if(controlOrGroup?.errors?.['rangeInvalid']) {\r\n          <span>{{'_COMMON._DATES.ERROR_START_END_PERIOD' | translate}}</span>\r\n        }\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@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\" [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  @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\r\n      <!-- Template pour les options -->\r\n      <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        @if (optionTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"optionTemplate; context: { item: item, index: index, searchTerm: search }\"></ng-container>\r\n        }\r\n        @else {\r\n          <div>{{ item.label }}</div>\r\n        }\r\n      </ng-template>\r\n\r\n      <!-- Template pour le label -->\r\n      <ng-template ng-label-tmp let-item=\"item\">\r\n        @if (labelTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"labelTemplate; context: { item: item }\"></ng-container>\r\n        }\r\n        @else {\r\n            {{ item.label }}\r\n        }\r\n      </ng-template>\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()\" (search)=\"textChanged.emit($event?.term)\">\r\n\r\n      <!-- Template pour les options -->\r\n      <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        @if (optionTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"optionTemplate; context: { item: item, index: index, searchTerm: search }\"></ng-container>\r\n        }\r\n        @else {\r\n          <div>{{ item.label }}</div>\r\n        }\r\n      </ng-template>\r\n\r\n      <!-- Template pour le label -->\r\n      <ng-template ng-label-tmp let-item=\"item\">\r\n        @if (labelTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"labelTemplate; context: { item: item }\"></ng-container>\r\n        }\r\n        @else {\r\n          {{ item.label }}\r\n        }\r\n      </ng-template>\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 [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n    <ul class=\" mb-none\" [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 [class.visually-hidden]=\"!displayLabel\">{{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 [ngClass]=\"{ 'flex-column': type === typeField.checkbox }\">\r\n      <legend [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n      <ul class=\"mb-none\" [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 [class.visually-hidden]=\"!displayLabel\">{{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\r\n      <input [type]=\"getInputType()\" class=\"form-control\" [id]=\"name + '_start'\" [formControl]=\"getControl('start')\"\r\n        [attr.placeholder]=\"type === typeField.timeToTime ? ('_COMMON._DATES.FROM' | translate) : ('_COMMON._DATES.FROM_TO_1' | translate)\"\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      @if(getControl('start')?.value) {\r\n        <button type=\"button\" class=\"btn btn-secondary btn-clear-field\"\r\n          (click)=\"onClearFieldPeriod('start')\">\r\n          &times;\r\n        </button>\r\n      }\r\n\r\n      <input [type]=\"getInputType()\" class=\"form-control\" [id]=\"name + '_end'\" [formControl]=\"getControl('end')\"\r\n        [attr.placeholder]=\"type === typeField.timeToTime ? ('_COMMON._DATES.TO' | translate) : ('_COMMON._DATES.FROM_TO_2' | translate)\"\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          <cw-icon font=\"optyweb\" icon=\"cw-nav-next-left\" [label]=\"'Jour pr\u00E9c\u00E9dent'\"></cw-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\" [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      <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          <cw-icon font=\"optyweb\" icon=\"cw-nav-next-right\" [label]=\"'Jour suivant'\"></cw-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          <cw-icon font=\"optyweb\" icon=\"cw-toolbar-reload\" [label]=\"'Rafra\u00EEchir'\"></cw-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 (type === typeField.range) {\r\n    <div class=\"d-flex align-items-center gap-2\">\r\n      <button type=\"button\" class=\"btn slider-btn slider-btn-less\" (click)=\"onRangeStep('decrease')\"\r\n        [disabled]=\"formControl.value <= rangeOptions.floor\">\r\n        <span class=\"slider-btn-less-icon\" aria-hidden=\"true\"></span>\r\n        <span class=\"visually-hidden\">Diminuer</span>\r\n      </button>\r\n\r\n      <div class=\"slider-input flex-grow-1 position-relative\">\r\n        <label [for]=\"name\" class=\"slider-tooltip\" [style.left]=\"getRangePercent() + '%'\" aria-live=\"polite\"\r\n          aria-atomic=\"true\">\r\n          {{ label }} {{ formControl.value }}\r\n          @if (rangeOptions.unit) {\r\n            <abbr [title]=\"rangeOptions.unit\">{{ rangeOptions.unit }}</abbr>\r\n          }\r\n        </label>\r\n\r\n        <div class=\"slider-custom-bar\">\r\n          <div class=\"slider-custom-bar-selection\" [style.width]=\"getRangePercent() + '%'\">\r\n          </div>\r\n        </div>\r\n\r\n        <input type=\"range\" [id]=\"name\" [formControl]=\"formControl\" [min]=\"rangeOptions.floor\" [max]=\"rangeOptions.ceil\"\r\n          [step]=\"rangeOptions.step || 1\" class=\"form-control-range\" [attr.aria-required]=\"isRequired\"\r\n          [attr.aria-invalid]=\"control.invalid && control.touched\" [disabled]=\"isDisabled\">\r\n      </div>\r\n\r\n      <button type=\"button\" class=\"btn slider-btn slider-btn-more\" (click)=\"onRangeStep('increase')\"\r\n        [disabled]=\"formControl.value >= rangeOptions.ceil\">\r\n        <span class=\"slider-btn-more-icon optyweb cw-toolbar-add\" aria-hidden=\"true\"></span>\r\n        <span class=\"visually-hidden\">Augmenter</span>\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (isInInputGroup()) {\r\n    @if(formControl?.value) {\r\n      <button class=\"btn btn-secondary btn-clear-field\" type=\"button\"\r\n      (click)=\"onClearField(formControl)\">&times;</button>\r\n    }\r\n  }\r\n\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3.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: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "ngmodule", type: NgxSliderModule }, { kind: "component", type: i4.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: "cw-icon", inputs: ["icon", "font", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FormFieldComponent, isStandalone: true, selector: "cw-form-field", inputs: { control: "control", formGroup: "formGroup", type: "type", label: "label", displayLabel: "displayLabel", name: "name", placeholder: "placeholder", options: "options", rangeOptions: "rangeOptions", isRequired: "isRequired", help: "help", tooltip: "tooltip", addonLeft: "addonLeft", addonRight: "addonRight", isInAddon: "isInAddon", isReadonly: "isReadonly", isDisabled: "isDisabled", sliderValue: "sliderValue", sliderOptions: "sliderOptions", cssClass: "cssClass", skeletonMode: "skeletonMode" }, outputs: { refreshEvent: "refreshEvent", textChanged: "textChanged" }, host: { properties: { "class": "this.hostClasses" } }, queries: [{ propertyName: "optionTemplate", first: true, predicate: ["ngOptionTpl"], descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: ["ngLabelTpl"], descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (!isInAddon) {\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.range &&\r\n  type !== typeField.switchSmall\r\n\r\n  ) {\r\n    <label [for]=\"name\" class=\"form-label\" [class.visually-hidden]=\"!displayLabel\">\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        @if(addonLeft) {\r\n          <ng-container [ngTemplateOutlet]=\"addonLeft\"></ng-container>\r\n        }\r\n        <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n        @if(addonRight) {\r\n          <ng-container [ngTemplateOutlet]=\"addonRight\"></ng-container>\r\n        }\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        @if ((controlOrGroup?.errors?.['required']) || (getControl('start')?.errors?.['required'] || getControl('end')?.errors?.['required'])) {\r\n          <span [innerHtml]=\"'_COMMON._FORM.ERROR_IS_MANDATORY' | translate: {label: label}\"></span>\r\n        }\r\n        @if(controlOrGroup?.errors?.['rangeInvalid']) {\r\n          <span>{{'_COMMON._DATES.ERROR_START_END_PERIOD' | translate}}</span>\r\n        }\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@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\" [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  @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\r\n      <!-- Template pour les options -->\r\n      <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        @if (optionTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"optionTemplate; context: { item: item, index: index, searchTerm: search }\"></ng-container>\r\n        }\r\n        @else {\r\n          <div>{{ item.label }}</div>\r\n        }\r\n      </ng-template>\r\n\r\n      <!-- Template pour le label -->\r\n      <ng-template ng-label-tmp let-item=\"item\">\r\n        @if (labelTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"labelTemplate; context: { item: item }\"></ng-container>\r\n        }\r\n        @else {\r\n            {{ item.label }}\r\n        }\r\n      </ng-template>\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()\" (search)=\"textChanged.emit($event?.term)\">\r\n\r\n      <!-- Template pour les options -->\r\n      <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        @if (optionTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"optionTemplate; context: { item: item, index: index, searchTerm: search }\"></ng-container>\r\n        }\r\n        @else {\r\n          <div>{{ item.label }}</div>\r\n        }\r\n      </ng-template>\r\n\r\n      <!-- Template pour le label -->\r\n      <ng-template ng-label-tmp let-item=\"item\">\r\n        @if (labelTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"labelTemplate; context: { item: item }\"></ng-container>\r\n        }\r\n        @else {\r\n          {{ item.label }}\r\n        }\r\n      </ng-template>\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 [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n    <ul class=\" mb-none\" [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 [class.visually-hidden]=\"!displayLabel\">{{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 [ngClass]=\"{ 'flex-column': type === typeField.checkbox }\">\r\n      <legend [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n      <ul class=\"mb-none\" [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 [class.visually-hidden]=\"!displayLabel\">{{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\r\n      <input [type]=\"getInputType()\" class=\"form-control\" [id]=\"name + '_start'\" [formControl]=\"getControl('start')\"\r\n        [attr.placeholder]=\"type === typeField.timeToTime ? ('_COMMON._DATES.FROM' | translate) : ('_COMMON._DATES.FROM_TO_1' | translate)\"\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      @if(getControl('start')?.value) {\r\n        <button type=\"button\" class=\"btn btn-secondary btn-clear-field\"\r\n          (click)=\"onClearFieldPeriod('start')\">\r\n          &times;\r\n        </button>\r\n      }\r\n\r\n      <input [type]=\"getInputType()\" class=\"form-control\" [id]=\"name + '_end'\" [formControl]=\"getControl('end')\"\r\n        [attr.placeholder]=\"type === typeField.timeToTime ? ('_COMMON._DATES.TO' | translate) : ('_COMMON._DATES.FROM_TO_2' | translate)\"\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          <cw-icon font=\"optyweb\" [icon]=\"spriteIcon.nextLeft\" [label]=\"'Jour pr\u00E9c\u00E9dent'\"></cw-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\" [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      <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          <cw-icon font=\"optyweb\" [icon]=\"spriteIcon.nextRight\" [label]=\"'Jour suivant'\"></cw-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          <cw-icon font=\"optyweb\" [icon]=\"spriteIcon.toolbarRefresh\" [label]=\"'Rafra\u00EEchir'\"></cw-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 (type === typeField.range) {\r\n    <div class=\"d-flex align-items-center gap-2\">\r\n      <button type=\"button\" class=\"btn slider-btn slider-btn-less\" (click)=\"onRangeStep('decrease')\"\r\n        [disabled]=\"formControl.value <= rangeOptions.floor\">\r\n        <span class=\"slider-btn-less-icon\" aria-hidden=\"true\"></span>\r\n        <span class=\"visually-hidden\">Diminuer</span>\r\n      </button>\r\n\r\n      <div class=\"slider-input flex-grow-1 position-relative\">\r\n        <label [for]=\"name\" class=\"slider-tooltip\" [style.left]=\"getRangePercent() + '%'\" aria-live=\"polite\"\r\n          aria-atomic=\"true\">\r\n          {{ label }} {{ formControl.value }}\r\n          @if (rangeOptions.unit) {\r\n            <abbr [title]=\"rangeOptions.unit\">{{ rangeOptions.unit }}</abbr>\r\n          }\r\n        </label>\r\n\r\n        <div class=\"slider-custom-bar\">\r\n          <div class=\"slider-custom-bar-selection\" [style.width]=\"getRangePercent() + '%'\">\r\n          </div>\r\n        </div>\r\n\r\n        <input type=\"range\" [id]=\"name\" [formControl]=\"formControl\" [min]=\"rangeOptions.floor\" [max]=\"rangeOptions.ceil\"\r\n          [step]=\"rangeOptions.step || 1\" class=\"form-control-range\" [attr.aria-required]=\"isRequired\"\r\n          [attr.aria-invalid]=\"control.invalid && control.touched\" [disabled]=\"isDisabled\">\r\n      </div>\r\n\r\n      <button type=\"button\" class=\"btn slider-btn slider-btn-more\" (click)=\"onRangeStep('increase')\"\r\n        [disabled]=\"formControl.value >= rangeOptions.ceil\">\r\n        <span class=\"slider-btn-more-icon optyweb cw-toolbar-add\" aria-hidden=\"true\"></span>\r\n        <span class=\"visually-hidden\">Augmenter</span>\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (isInInputGroup()) {\r\n    @if(formControl?.value) {\r\n      <button class=\"btn btn-secondary btn-clear-field\" type=\"button\"\r\n      (click)=\"onClearField(formControl)\">&times;</button>\r\n    }\r\n  }\r\n\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3.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: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "ngmodule", type: NgxSliderModule }, { kind: "component", type: i4.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: "cw-icon", inputs: ["icon", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom", "spritePath"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cw-form-field', standalone: true, imports: [
                         CommonModule,
@@ -1412,7 +1905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         NgbPopover,
                         ShowHidePasswordDirective,
                         IconComponent
-                    ], template: "@if (!isInAddon) {\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.range &&\r\n  type !== typeField.switchSmall\r\n\r\n  ) {\r\n    <label [for]=\"name\" class=\"form-label\" [class.visually-hidden]=\"!displayLabel\">\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        @if(addonLeft) {\r\n          <ng-container [ngTemplateOutlet]=\"addonLeft\"></ng-container>\r\n        }\r\n        <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n        @if(addonRight) {\r\n          <ng-container [ngTemplateOutlet]=\"addonRight\"></ng-container>\r\n        }\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        @if ((controlOrGroup?.errors?.['required']) || (getControl('start')?.errors?.['required'] || getControl('end')?.errors?.['required'])) {\r\n          <span [innerHtml]=\"'_COMMON._FORM.ERROR_IS_MANDATORY' | translate: {label: label}\"></span>\r\n        }\r\n        @if(controlOrGroup?.errors?.['rangeInvalid']) {\r\n          <span>{{'_COMMON._DATES.ERROR_START_END_PERIOD' | translate}}</span>\r\n        }\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@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\" [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  @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\r\n      <!-- Template pour les options -->\r\n      <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        @if (optionTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"optionTemplate; context: { item: item, index: index, searchTerm: search }\"></ng-container>\r\n        }\r\n        @else {\r\n          <div>{{ item.label }}</div>\r\n        }\r\n      </ng-template>\r\n\r\n      <!-- Template pour le label -->\r\n      <ng-template ng-label-tmp let-item=\"item\">\r\n        @if (labelTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"labelTemplate; context: { item: item }\"></ng-container>\r\n        }\r\n        @else {\r\n            {{ item.label }}\r\n        }\r\n      </ng-template>\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()\" (search)=\"textChanged.emit($event?.term)\">\r\n\r\n      <!-- Template pour les options -->\r\n      <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        @if (optionTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"optionTemplate; context: { item: item, index: index, searchTerm: search }\"></ng-container>\r\n        }\r\n        @else {\r\n          <div>{{ item.label }}</div>\r\n        }\r\n      </ng-template>\r\n\r\n      <!-- Template pour le label -->\r\n      <ng-template ng-label-tmp let-item=\"item\">\r\n        @if (labelTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"labelTemplate; context: { item: item }\"></ng-container>\r\n        }\r\n        @else {\r\n          {{ item.label }}\r\n        }\r\n      </ng-template>\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 [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n    <ul class=\" mb-none\" [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 [class.visually-hidden]=\"!displayLabel\">{{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 [ngClass]=\"{ 'flex-column': type === typeField.checkbox }\">\r\n      <legend [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n      <ul class=\"mb-none\" [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 [class.visually-hidden]=\"!displayLabel\">{{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\r\n      <input [type]=\"getInputType()\" class=\"form-control\" [id]=\"name + '_start'\" [formControl]=\"getControl('start')\"\r\n        [attr.placeholder]=\"type === typeField.timeToTime ? ('_COMMON._DATES.FROM' | translate) : ('_COMMON._DATES.FROM_TO_1' | translate)\"\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      @if(getControl('start')?.value) {\r\n        <button type=\"button\" class=\"btn btn-secondary btn-clear-field\"\r\n          (click)=\"onClearFieldPeriod('start')\">\r\n          &times;\r\n        </button>\r\n      }\r\n\r\n      <input [type]=\"getInputType()\" class=\"form-control\" [id]=\"name + '_end'\" [formControl]=\"getControl('end')\"\r\n        [attr.placeholder]=\"type === typeField.timeToTime ? ('_COMMON._DATES.TO' | translate) : ('_COMMON._DATES.FROM_TO_2' | translate)\"\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          <cw-icon font=\"optyweb\" icon=\"cw-nav-next-left\" [label]=\"'Jour pr\u00E9c\u00E9dent'\"></cw-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\" [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      <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          <cw-icon font=\"optyweb\" icon=\"cw-nav-next-right\" [label]=\"'Jour suivant'\"></cw-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          <cw-icon font=\"optyweb\" icon=\"cw-toolbar-reload\" [label]=\"'Rafra\u00EEchir'\"></cw-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 (type === typeField.range) {\r\n    <div class=\"d-flex align-items-center gap-2\">\r\n      <button type=\"button\" class=\"btn slider-btn slider-btn-less\" (click)=\"onRangeStep('decrease')\"\r\n        [disabled]=\"formControl.value <= rangeOptions.floor\">\r\n        <span class=\"slider-btn-less-icon\" aria-hidden=\"true\"></span>\r\n        <span class=\"visually-hidden\">Diminuer</span>\r\n      </button>\r\n\r\n      <div class=\"slider-input flex-grow-1 position-relative\">\r\n        <label [for]=\"name\" class=\"slider-tooltip\" [style.left]=\"getRangePercent() + '%'\" aria-live=\"polite\"\r\n          aria-atomic=\"true\">\r\n          {{ label }} {{ formControl.value }}\r\n          @if (rangeOptions.unit) {\r\n            <abbr [title]=\"rangeOptions.unit\">{{ rangeOptions.unit }}</abbr>\r\n          }\r\n        </label>\r\n\r\n        <div class=\"slider-custom-bar\">\r\n          <div class=\"slider-custom-bar-selection\" [style.width]=\"getRangePercent() + '%'\">\r\n          </div>\r\n        </div>\r\n\r\n        <input type=\"range\" [id]=\"name\" [formControl]=\"formControl\" [min]=\"rangeOptions.floor\" [max]=\"rangeOptions.ceil\"\r\n          [step]=\"rangeOptions.step || 1\" class=\"form-control-range\" [attr.aria-required]=\"isRequired\"\r\n          [attr.aria-invalid]=\"control.invalid && control.touched\" [disabled]=\"isDisabled\">\r\n      </div>\r\n\r\n      <button type=\"button\" class=\"btn slider-btn slider-btn-more\" (click)=\"onRangeStep('increase')\"\r\n        [disabled]=\"formControl.value >= rangeOptions.ceil\">\r\n        <span class=\"slider-btn-more-icon optyweb cw-toolbar-add\" aria-hidden=\"true\"></span>\r\n        <span class=\"visually-hidden\">Augmenter</span>\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (isInInputGroup()) {\r\n    @if(formControl?.value) {\r\n      <button class=\"btn btn-secondary btn-clear-field\" type=\"button\"\r\n      (click)=\"onClearField(formControl)\">&times;</button>\r\n    }\r\n  }\r\n\r\n</ng-template>\r\n" }]
+                    ], template: "@if (!isInAddon) {\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.range &&\r\n  type !== typeField.switchSmall\r\n\r\n  ) {\r\n    <label [for]=\"name\" class=\"form-label\" [class.visually-hidden]=\"!displayLabel\">\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        @if(addonLeft) {\r\n          <ng-container [ngTemplateOutlet]=\"addonLeft\"></ng-container>\r\n        }\r\n        <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n        @if(addonRight) {\r\n          <ng-container [ngTemplateOutlet]=\"addonRight\"></ng-container>\r\n        }\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        @if ((controlOrGroup?.errors?.['required']) || (getControl('start')?.errors?.['required'] || getControl('end')?.errors?.['required'])) {\r\n          <span [innerHtml]=\"'_COMMON._FORM.ERROR_IS_MANDATORY' | translate: {label: label}\"></span>\r\n        }\r\n        @if(controlOrGroup?.errors?.['rangeInvalid']) {\r\n          <span>{{'_COMMON._DATES.ERROR_START_END_PERIOD' | translate}}</span>\r\n        }\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@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\" [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  @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\r\n      <!-- Template pour les options -->\r\n      <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        @if (optionTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"optionTemplate; context: { item: item, index: index, searchTerm: search }\"></ng-container>\r\n        }\r\n        @else {\r\n          <div>{{ item.label }}</div>\r\n        }\r\n      </ng-template>\r\n\r\n      <!-- Template pour le label -->\r\n      <ng-template ng-label-tmp let-item=\"item\">\r\n        @if (labelTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"labelTemplate; context: { item: item }\"></ng-container>\r\n        }\r\n        @else {\r\n            {{ item.label }}\r\n        }\r\n      </ng-template>\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()\" (search)=\"textChanged.emit($event?.term)\">\r\n\r\n      <!-- Template pour les options -->\r\n      <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        @if (optionTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"optionTemplate; context: { item: item, index: index, searchTerm: search }\"></ng-container>\r\n        }\r\n        @else {\r\n          <div>{{ item.label }}</div>\r\n        }\r\n      </ng-template>\r\n\r\n      <!-- Template pour le label -->\r\n      <ng-template ng-label-tmp let-item=\"item\">\r\n        @if (labelTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"labelTemplate; context: { item: item }\"></ng-container>\r\n        }\r\n        @else {\r\n          {{ item.label }}\r\n        }\r\n      </ng-template>\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 [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n    <ul class=\" mb-none\" [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 [class.visually-hidden]=\"!displayLabel\">{{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 [ngClass]=\"{ 'flex-column': type === typeField.checkbox }\">\r\n      <legend [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n      <ul class=\"mb-none\" [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 [class.visually-hidden]=\"!displayLabel\">{{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\r\n      <input [type]=\"getInputType()\" class=\"form-control\" [id]=\"name + '_start'\" [formControl]=\"getControl('start')\"\r\n        [attr.placeholder]=\"type === typeField.timeToTime ? ('_COMMON._DATES.FROM' | translate) : ('_COMMON._DATES.FROM_TO_1' | translate)\"\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      @if(getControl('start')?.value) {\r\n        <button type=\"button\" class=\"btn btn-secondary btn-clear-field\"\r\n          (click)=\"onClearFieldPeriod('start')\">\r\n          &times;\r\n        </button>\r\n      }\r\n\r\n      <input [type]=\"getInputType()\" class=\"form-control\" [id]=\"name + '_end'\" [formControl]=\"getControl('end')\"\r\n        [attr.placeholder]=\"type === typeField.timeToTime ? ('_COMMON._DATES.TO' | translate) : ('_COMMON._DATES.FROM_TO_2' | translate)\"\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          <cw-icon font=\"optyweb\" [icon]=\"spriteIcon.nextLeft\" [label]=\"'Jour pr\u00E9c\u00E9dent'\"></cw-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\" [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      <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          <cw-icon font=\"optyweb\" [icon]=\"spriteIcon.nextRight\" [label]=\"'Jour suivant'\"></cw-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          <cw-icon font=\"optyweb\" [icon]=\"spriteIcon.toolbarRefresh\" [label]=\"'Rafra\u00EEchir'\"></cw-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 (type === typeField.range) {\r\n    <div class=\"d-flex align-items-center gap-2\">\r\n      <button type=\"button\" class=\"btn slider-btn slider-btn-less\" (click)=\"onRangeStep('decrease')\"\r\n        [disabled]=\"formControl.value <= rangeOptions.floor\">\r\n        <span class=\"slider-btn-less-icon\" aria-hidden=\"true\"></span>\r\n        <span class=\"visually-hidden\">Diminuer</span>\r\n      </button>\r\n\r\n      <div class=\"slider-input flex-grow-1 position-relative\">\r\n        <label [for]=\"name\" class=\"slider-tooltip\" [style.left]=\"getRangePercent() + '%'\" aria-live=\"polite\"\r\n          aria-atomic=\"true\">\r\n          {{ label }} {{ formControl.value }}\r\n          @if (rangeOptions.unit) {\r\n            <abbr [title]=\"rangeOptions.unit\">{{ rangeOptions.unit }}</abbr>\r\n          }\r\n        </label>\r\n\r\n        <div class=\"slider-custom-bar\">\r\n          <div class=\"slider-custom-bar-selection\" [style.width]=\"getRangePercent() + '%'\">\r\n          </div>\r\n        </div>\r\n\r\n        <input type=\"range\" [id]=\"name\" [formControl]=\"formControl\" [min]=\"rangeOptions.floor\" [max]=\"rangeOptions.ceil\"\r\n          [step]=\"rangeOptions.step || 1\" class=\"form-control-range\" [attr.aria-required]=\"isRequired\"\r\n          [attr.aria-invalid]=\"control.invalid && control.touched\" [disabled]=\"isDisabled\">\r\n      </div>\r\n\r\n      <button type=\"button\" class=\"btn slider-btn slider-btn-more\" (click)=\"onRangeStep('increase')\"\r\n        [disabled]=\"formControl.value >= rangeOptions.ceil\">\r\n        <span class=\"slider-btn-more-icon optyweb cw-toolbar-add\" aria-hidden=\"true\"></span>\r\n        <span class=\"visually-hidden\">Augmenter</span>\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (isInInputGroup()) {\r\n    @if(formControl?.value) {\r\n      <button class=\"btn btn-secondary btn-clear-field\" type=\"button\"\r\n      (click)=\"onClearField(formControl)\">&times;</button>\r\n    }\r\n  }\r\n\r\n</ng-template>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { control: [{
                 type: Input
             }], formGroup: [{
@@ -1453,6 +1946,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], cssClass: [{
                 type: Input
+            }], skeletonMode: [{
+                type: Input
             }], refreshEvent: [{
                 type: Output
             }], textChanged: [{
@@ -1480,10 +1975,10 @@ class LegendComponent {
         this.displayInline = false;
         this.legendTypeEnum = LegendTypeEnum;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LegendComponent, isStandalone: true, selector: "cw-legend", inputs: { legend: "legend", displayInline: "displayInline" }, ngImport: i0, template: "@if (legend.title) {\r\n  <div class=\"legend-title\">\r\n    {{ '_COMMON._TABLE.LEGEND' | translate }}\r\n  </div>\r\n}\r\n\r\n<ul class=\"legend-items\" [class.list-inline]=\"displayInline\">\r\n  @for (item of legend.data; track $index) {\r\n    <li class=\"legend-item\" [class.list-inline-item]=\"displayInline\">\r\n        @switch (item.type) {\r\n          @case (legendTypeEnum.icon) {\r\n            <cw-icon [icon]=\"item.icon\" [label]=\"item.label\" [iconCssClass]=\"'text-' + item.colorUi\" [iconColorCustom]=\"item.colorCustom\"></cw-icon>\r\n          }\r\n          @case (legendTypeEnum.badge) {\r\n            <cw-badge [type]=\"item.colorBadge\" [label]=\"item.labelBadge\"></cw-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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "font", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom"] }, { kind: "component", type: BadgeComponent, selector: "cw-badge", inputs: ["type", "label", "withIcon", "iconPosition", "cssClass", "dataTest"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LegendComponent, isStandalone: true, selector: "cw-legend", inputs: { legend: "legend", displayInline: "displayInline" }, ngImport: i0, template: "@if (legend.title) {\r\n  <div class=\"legend-title\">\r\n    {{ '_COMMON._TABLE.LEGEND' | translate }}\r\n  </div>\r\n}\r\n\r\n<ul class=\"legend-items\" [class.list-inline]=\"displayInline\">\r\n  @for (item of legend.data; track $index) {\r\n    <li class=\"legend-item\" [class.list-inline-item]=\"displayInline\">\r\n        @switch (item.type) {\r\n          @case (legendTypeEnum.icon) {\r\n            <cw-icon [icon]=\"item.icon\" [label]=\"item.label\" [iconCssClass]=\"'text-' + item.colorUi\" [iconColorCustom]=\"item.colorCustom\"></cw-icon>\r\n          }\r\n          @case (legendTypeEnum.badge) {\r\n            <cw-badge [type]=\"item.colorBadge\" [label]=\"item.labelBadge\"></cw-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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom", "spritePath"] }, { kind: "component", type: BadgeComponent, selector: "cw-badge", inputs: ["type", "label", "withIcon", "iconPosition", "cssClass", "skeletonMode", "dataTest"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LegendComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LegendComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cw-legend', standalone: true, imports: [
                         CommonModule,
@@ -1499,14 +1994,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 class LoaderComponent {
     constructor() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LoaderComponent, isStandalone: true, selector: "cw-loader", ngImport: i0, template: "<div class=\"loader text-center\">\r\n  <span class=\"spinner-border spinner-border-sm\" aria-hidden=\"true\"></span>\r\n  <span role=\"status\">{{ '_COMMON._HTTP.TXT_LOADING' | translate }}</span>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: LoaderComponent, isStandalone: true, selector: "cw-loader", ngImport: i0, template: "<div class=\"d-flex-v gap-md loader text-center\">\r\n  <span class=\"spinner-border spinner-border-sm\" aria-hidden=\"true\"></span>\r\n  <span role=\"status\">{{ '_COMMON._HTTP.TXT_LOADING' | translate }}</span>\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.16", ngImport: i0, type: LoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LoaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cw-loader', standalone: true, imports: [
                         TranslateModule
-                    ], template: "<div class=\"loader text-center\">\r\n  <span class=\"spinner-border spinner-border-sm\" aria-hidden=\"true\"></span>\r\n  <span role=\"status\">{{ '_COMMON._HTTP.TXT_LOADING' | translate }}</span>\r\n</div>\r\n" }]
+                    ], template: "<div class=\"d-flex-v gap-md loader text-center\">\r\n  <span class=\"spinner-border spinner-border-sm\" aria-hidden=\"true\"></span>\r\n  <span role=\"status\">{{ '_COMMON._HTTP.TXT_LOADING' | translate }}</span>\r\n</div>\r\n" }]
         }], ctorParameters: () => [] });
 
 var ModalsType;
@@ -1515,38 +2010,236 @@ var ModalsType;
     ModalsType["loader"] = "loader";
     ModalsType["quickSideView"] = "quicksideview";
     ModalsType["custom"] = "custom";
+    ModalsType["success"] = "success";
+    ModalsType["info"] = "info";
+    ModalsType["warning"] = "warning";
+    ModalsType["danger"] = "danger";
+    ModalsType["neutral"] = "neutral";
 })(ModalsType || (ModalsType = {}));
+var ModalsSize;
+(function (ModalsSize) {
+    ModalsSize["sm"] = "sm";
+    ModalsSize["md"] = "md";
+    ModalsSize["lg"] = "lg";
+    ModalsSize["xl"] = "xl";
+})(ModalsSize || (ModalsSize = {}));
+
+class ModalsService {
+    constructor() {
+        this.appRef = inject(ApplicationRef);
+        this.injector = inject(Injector);
+        this.modalsStack = [];
+        this.focusedElementsStack = [];
+        this.dismissModal = new EventEmitter();
+        this.openedModal = new EventEmitter();
+    }
+    /**
+     * Ouvre une modale et retourne un objet compatible avec l'ancienne syntaxe .result
+     */
+    openModal(type, config, sizeOverride) {
+        // 1. Détermination des propriétés de base
+        const size = sizeOverride ?? this.getModalSizeByType(type);
+        const isQuickView = type === ModalsType.quickSideView;
+        // 2. Création dynamique du composant
+        const componentRef = createComponent(ModalsComponent, {
+            environmentInjector: this.appRef.injector,
+            elementInjector: this.injector
+        });
+        // 3. Injection des données
+        componentRef.instance.type = type;
+        componentRef.instance.size = size;
+        componentRef.instance.scrollable = isQuickView;
+        componentRef.instance.customClass = isQuickView ? 'quick-view-modal' : '';
+        if (config) {
+            Object.assign(componentRef.instance, config);
+        }
+        // 4. Gestion de la Promesse (le fameux .result)
+        const resultPromise = new Promise((resolve, reject) => {
+            // Succès : quand le bouton d'action est cliqué
+            const subAction = componentRef.instance.btnAction1.subscribe((data) => {
+                subAction.unsubscribe();
+                resolve(data || 'confirm');
+            });
+            const subAction2 = componentRef.instance.btnAction2.subscribe((data) => {
+                subAction.unsubscribe();
+                resolve(data || 'confirm');
+            });
+            // Échec/Fermeture : on intercepte la fermeture via dismissModal
+            const subDismiss = this.dismissModal.subscribe(() => {
+                subDismiss.unsubscribe();
+                reject('closed');
+            });
+        });
+        // 5. Intégration au DOM
+        const domElem = componentRef.hostView.rootNodes[0];
+        document.body.appendChild(domElem);
+        this.appRef.attachView(componentRef.hostView);
+        document.body.classList.add('modal-open');
+        // 6. Gestion de la pile et du focus
+        this.saveFocus();
+        this.modalsStack.push(componentRef);
+        // Retourne un objet ModalRef
+        return {
+            componentInstance: componentRef.instance,
+            result: resultPromise
+        };
+    }
+    /**
+     * Ferme la modale en haut de la pile
+     */
+    closeModal() {
+        const currentModal = this.modalsStack.pop();
+        if (currentModal) {
+            const modalClass = currentModal.instance.customClass ?? '';
+            // Retrait du DOM
+            this.appRef.detachView(currentModal.hostView);
+            currentModal.destroy();
+            // Gestion du body
+            if (this.modalsStack.length === 0) {
+                document.body.classList.remove('modal-open');
+            }
+            // Restauration focus
+            this.restoreFocus();
+            // On émet l'événement (ce qui déclenchera le reject de la promesse plus haut)
+            this.dismissModal.emit(modalClass);
+        }
+    }
+    getModalSizeByType(type) {
+        switch (type) {
+            case ModalsType.loader: return ModalsSize.sm;
+            case ModalsType.delete: return ModalsSize.md;
+            case ModalsType.quickSideView: return ModalsSize.lg;
+            default: return ModalsSize.md;
+        }
+    }
+    saveFocus() {
+        const activeEl = document.activeElement;
+        if (activeEl?.hasAttribute("cwDropdownItem")) {
+            const dropdownBtn = activeEl.closest(".dropdown")?.querySelector('button');
+            this.focusedElementsStack.push(dropdownBtn || activeEl);
+        }
+        else {
+            this.focusedElementsStack.push(activeEl);
+        }
+    }
+    restoreFocus() {
+        const previousEl = this.focusedElementsStack.pop();
+        if (previousEl) {
+            previousEl.focus();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ModalsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ModalsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ModalsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
 class ModalsComponent {
-    constructor(activeModal, translateService) {
-        this.activeModal = activeModal;
-        this.translateService = translateService;
+    constructor() {
+        this.modalService = inject(ModalsService);
+        this.translateService = inject(TranslateService);
+        this.size = ModalsSize.md;
+        this.customClass = '';
+        this.scrollable = false;
+        this.isAutcompModal = false;
         this.itemsToDelete = [];
         this.itemsToDeleteTitle = this.translateService.instant('_COMMON._MODAL_DELETE.DEFAULT_TYPE');
-        this.btnAction = new EventEmitter();
+        this.btnAction1 = new EventEmitter();
+        this.btnAction2 = new EventEmitter();
         this.modalsType = ModalsType;
-        this.buttonTypeEnum = FoButtonTypeEnum && BoButtonTypeEnum;
+        this.buttonTypeEnum = { ...FoButtonTypeEnum, ...BoButtonTypeEnum };
+        this.spriteIcon = SpriteIconEnum;
+        this.iconType = IconTypeEnum;
+        this.iconSize = IconSizeEnum;
+        this.iconUiType = IconUiTypeEnum;
     }
     ngOnInit() {
-        if (this.type === this.modalsType.quickSideView && !this.labelBtnAction) {
-            this.labelBtnAction = this.translateService.instant('_COMMON._ACTION.EDIT');
+        this.modalService.openedModal.emit(true);
+    }
+    ngAfterViewInit() {
+        setTimeout(() => this.trapFocus(this.modalContainer.nativeElement), 0);
+    }
+    onKeyDown(e) {
+        if (this.type === this.modalsType.loader) {
+            e.preventDefault();
+            return;
         }
+        if (e.key === 'Escape') {
+            const isAutocompleteOpen = document.activeElement?.getAttribute('aria-controls') === 'autocompletion-panel';
+            if (isAutocompleteOpen) {
+                e.preventDefault();
+            }
+            else {
+                this.closeModal();
+            }
+        }
+    }
+    action1Click() {
+        this.btnAction1.emit('confirm');
+        this.closeModal();
+    }
+    action2Click() {
+        this.btnAction1.emit('confirm');
+        this.closeModal();
+    }
+    closeModal() {
+        this.modalService.closeModal();
     }
-    actionClick() {
-        this.activeModal.close();
+    trapFocus(element) {
+        const focusableSelector = 'a[href], button:not([disabled]), textarea, input:not([disabled]), select';
+        const focusableEls = Array.from(element.querySelectorAll(focusableSelector));
+        if (focusableEls.length === 0)
+            return;
+        const firstFocusableEl = focusableEls[0];
+        const lastFocusableEl = focusableEls[focusableEls.length - 1];
+        // Logique Autocomplete peut etre à externaliser ou élargir la notion
+        const autocompleteInput = focusableEls.find(x => x.getAttribute('aria-controls') === 'autocompletion-panel');
+        if (autocompleteInput && this.isAutcompModal) {
+            autocompleteInput.focus();
+        }
+        else {
+            firstFocusableEl.focus();
+        }
+        // Listener pour le Tab (on l'attache au container)
+        element.addEventListener('keydown', (e) => {
+            if (e.key !== 'Tab')
+                return;
+            if (e.shiftKey) { // Shift + Tab
+                if (document.activeElement === firstFocusableEl) {
+                    lastFocusableEl.focus();
+                    e.preventDefault();
+                }
+            }
+            else { // Tab
+                if (document.activeElement === lastFocusableEl) {
+                    firstFocusableEl.focus();
+                    e.preventDefault();
+                }
+            }
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalsComponent, deps: [{ token: i1$1.NgbActiveModal }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ModalsComponent, isStandalone: true, selector: "cw-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-none\">\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      <cw-button label=\"_COMMON._ACTION.DELETE\" [type]=\"buttonTypeEnum.primary\" [isMinWidth]=\"true\"\r\n        (btnAction)=\"actionClick()\" dataTest=\"btn-action-modal\">\r\n      </cw-button>\r\n\r\n      <cw-button label=\"_COMMON._ACTION.CANCEL\" [type]=\"buttonTypeEnum.secondary\" [isMinWidth]=\"true\"\r\n        (btnAction)=\"activeModal.dismiss()\" dataTest=\"btn-close-modal\">\r\n      </cw-button>\r\n    }\r\n    @else {\r\n      @if(labelBtnAction) {\r\n        <cw-button [label]=\"labelBtnAction | translate\" [type]=\"buttonTypeEnum.primary\" [isMinWidth]=\"true\"\r\n          (btnAction)=\"actionClick()\" dataTest=\"btn-close-modal\">\r\n        </cw-button>\r\n      }\r\n\r\n      <cw-button label=\"_COMMON._ACTION.CLOSE\" [type]=\"buttonTypeEnum.secondary\" [isMinWidth]=\"true\"\r\n        (btnAction)=\"activeModal.dismiss()\" dataTest=\"btn-close-modal\">\r\n      </cw-button>\r\n    }\r\n  </div>\r\n}\r\n\r\n@if (type === modalsType.loader) {\r\n  <div class=\"modal-body\">\r\n    <cw-loader></cw-loader>\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ButtonComponent, selector: "cw-button", inputs: ["type", "label", "id", "isDropdown", "withIcon", "withOnlyIcon", "iconSize", "iconPosition", "dropdownPosition", "isMinWidth", "isDisabled", "withSpinner", "cssClass", "dataTest", "withTooltip", "tooltipText", "tooltipTitle", "tooltipTrigger", "tooltipPosition", "tooltipType"], outputs: ["btnAction", "dropDownClicked"] }, { kind: "component", type: LoaderComponent, selector: "cw-loader" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ModalsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ModalsComponent, isStandalone: true, selector: "cw-modals", inputs: { size: "size", customClass: "customClass", scrollable: "scrollable", isAutcompModal: "isAutcompModal", type: "type", modalTitle: "modalTitle", itemsToDelete: "itemsToDelete", itemsToDeleteTitle: "itemsToDeleteTitle", labelBtnAction1: "labelBtnAction1", labelBtnAction2: "labelBtnAction2", customBodyTemplate: "customBodyTemplate", customBodyContext: "customBodyContext" }, outputs: { btnAction1: "btnAction1", btnAction2: "btnAction2" }, viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true }], ngImport: i0, template: "<div class=\"cityway-v8 modal-backdrop fade show\" style=\"z-index: 1050;\" aria-hidden=\"true\"></div>\r\n\r\n<div role=\"dialog\" tabindex=\"-1\" aria-modal=\"true\" aria-labelledby=\"modal-basic-title\"\r\n  class=\"cityway-v8 d-flex modal show\" [ngClass]=\"customClass\" data-test-ctw=\"modal\" (keydown)=\"onKeyDown($event)\">\r\n\r\n  <div class=\"modal-inner-backdrop\" (click)=\"type !== modalsType.loader && closeModal()\"></div>\r\n\r\n  <div #modalContainer role=\"document\" class=\"modal-dialog modal-dialog-centered\"\r\n    [ngClass]=\"['modal-' + size, scrollable ? 'modal-dialog-scrollable' : '']\">\r\n\r\n    <div class=\"modal-content\">\r\n\r\n      @if (type !== modalsType.loader) {\r\n        @if (type == modalsType.delete || type == modalsType.quickSideView || type == modalsType.custom) {\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            <cw-button [label]=\"'_COMMON._ACTION.CLOSE' | translate\" [type]=\"buttonTypeEnum.light\" [withOnlyIcon]=\"true\"\r\n              [withIcon]=\"spriteIcon.toolbarClose\" (btnAction)=\"closeModal()\" dataTest=\"btn-close-modal\"\r\n              cssClass=\"btn-close\">\r\n            </cw-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-none\">\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 {\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        @else {\r\n          <div class=\"modal-header justify-content-end\">\r\n            <cw-button [label]=\"'_COMMON._ACTION.CLOSE' | translate\" [type]=\"buttonTypeEnum.light\" [withOnlyIcon]=\"true\"\r\n              [withIcon]=\"spriteIcon.toolbarClose\" (btnAction)=\"closeModal()\" dataTest=\"btn-close-modal\"\r\n              cssClass=\"btn-close\">\r\n            </cw-button>\r\n          </div>\r\n          <div class=\"modal-body\">\r\n            <cw-icon [label]=\"'Sucess'\" [iconSize]=\"iconSize['5xl']\" [icon]=\"spriteIcon.toolbarClose\" [type]=\"iconType.rounded\" [iconUiType]=\"iconUiType.success\"></cw-icon>\r\n\r\n            <h1 class=\"modal-title\" id=\"modal-basic-title\">\r\n              {{ modalTitle | translate }}\r\n            </h1>\r\n\r\n             @if (customBodyTemplate) {\r\n                <ng-container [ngTemplateOutlet]=\"customBodyTemplate\" [ngTemplateOutletContext]=\"customBodyContext\">\r\n                </ng-container>\r\n              }\r\n          </div>\r\n        }\r\n\r\n        <div class=\"modal-footer\">\r\n          @if (type === modalsType.delete) {\r\n            <cw-button label=\"_COMMON._ACTION.DELETE\" [type]=\"buttonTypeEnum.danger\" [isMinWidth]=\"true\"\r\n              (btnAction)=\"action1Click()\" dataTest=\"btn-action-modal\">\r\n            </cw-button>\r\n\r\n            <cw-button label=\"_COMMON._ACTION.CLOSE\" [type]=\"buttonTypeEnum.secondary\" [isMinWidth]=\"true\"\r\n              (btnAction)=\"closeModal()\" dataTest=\"btn-close-modal\">\r\n            </cw-button>\r\n          }\r\n          @else {\r\n            @if (labelBtnAction1) {\r\n              <cw-button [label]=\"labelBtnAction1 | translate\" [type]=\"buttonTypeEnum.primary\" [isMinWidth]=\"true\"\r\n              (btnAction)=\"action1Click()\" dataTest=\"btn-action-modal\">\r\n              </cw-button>\r\n            }\r\n            @if (labelBtnAction2) {\r\n              <cw-button [label]=\"labelBtnAction2 | translate\" [type]=\"buttonTypeEnum.secondary\" [isMinWidth]=\"true\"\r\n              (btnAction)=\"action2Click()\" dataTest=\"btn-action-modal\">\r\n              </cw-button>\r\n            }\r\n            @else {\r\n              <cw-button label=\"_COMMON._ACTION.CLOSE\" [type]=\"buttonTypeEnum.secondary\" [isMinWidth]=\"true\"\r\n                (btnAction)=\"closeModal()\" dataTest=\"btn-close-modal\">\r\n              </cw-button>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n      @else {\r\n        <div class=\"modal-body\">\r\n          <cw-loader></cw-loader>\r\n        </div>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ButtonComponent, selector: "cw-button", inputs: ["type", "label", "id", "isDropdown", "withIcon", "withOnlyIcon", "iconSize", "iconPosition", "dropdownPosition", "isMinWidth", "isDisabled", "isLoading", "cssClass", "dataTest", "skeletonMode", "withTooltip", "tooltipText", "tooltipTitle", "tooltipTrigger", "tooltipPosition", "tooltipType"], outputs: ["btnAction", "dropDownClicked"] }, { kind: "component", type: LoaderComponent, selector: "cw-loader" }, { kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom", "spritePath"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ModalsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cw-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-none\">\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      <cw-button label=\"_COMMON._ACTION.DELETE\" [type]=\"buttonTypeEnum.primary\" [isMinWidth]=\"true\"\r\n        (btnAction)=\"actionClick()\" dataTest=\"btn-action-modal\">\r\n      </cw-button>\r\n\r\n      <cw-button label=\"_COMMON._ACTION.CANCEL\" [type]=\"buttonTypeEnum.secondary\" [isMinWidth]=\"true\"\r\n        (btnAction)=\"activeModal.dismiss()\" dataTest=\"btn-close-modal\">\r\n      </cw-button>\r\n    }\r\n    @else {\r\n      @if(labelBtnAction) {\r\n        <cw-button [label]=\"labelBtnAction | translate\" [type]=\"buttonTypeEnum.primary\" [isMinWidth]=\"true\"\r\n          (btnAction)=\"actionClick()\" dataTest=\"btn-close-modal\">\r\n        </cw-button>\r\n      }\r\n\r\n      <cw-button label=\"_COMMON._ACTION.CLOSE\" [type]=\"buttonTypeEnum.secondary\" [isMinWidth]=\"true\"\r\n        (btnAction)=\"activeModal.dismiss()\" dataTest=\"btn-close-modal\">\r\n      </cw-button>\r\n    }\r\n  </div>\r\n}\r\n\r\n@if (type === modalsType.loader) {\r\n  <div class=\"modal-body\">\r\n    <cw-loader></cw-loader>\r\n  </div>\r\n}\r\n" }]
-        }], ctorParameters: () => [{ type: i1$1.NgbActiveModal }, { type: i2.TranslateService }], propDecorators: { type: [{
+            args: [{ selector: 'cw-modals', standalone: true, imports: [CommonModule, TranslateModule, NgClass, NgTemplateOutlet, ButtonComponent, LoaderComponent, IconComponent], template: "<div class=\"cityway-v8 modal-backdrop fade show\" style=\"z-index: 1050;\" aria-hidden=\"true\"></div>\r\n\r\n<div role=\"dialog\" tabindex=\"-1\" aria-modal=\"true\" aria-labelledby=\"modal-basic-title\"\r\n  class=\"cityway-v8 d-flex modal show\" [ngClass]=\"customClass\" data-test-ctw=\"modal\" (keydown)=\"onKeyDown($event)\">\r\n\r\n  <div class=\"modal-inner-backdrop\" (click)=\"type !== modalsType.loader && closeModal()\"></div>\r\n\r\n  <div #modalContainer role=\"document\" class=\"modal-dialog modal-dialog-centered\"\r\n    [ngClass]=\"['modal-' + size, scrollable ? 'modal-dialog-scrollable' : '']\">\r\n\r\n    <div class=\"modal-content\">\r\n\r\n      @if (type !== modalsType.loader) {\r\n        @if (type == modalsType.delete || type == modalsType.quickSideView || type == modalsType.custom) {\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            <cw-button [label]=\"'_COMMON._ACTION.CLOSE' | translate\" [type]=\"buttonTypeEnum.light\" [withOnlyIcon]=\"true\"\r\n              [withIcon]=\"spriteIcon.toolbarClose\" (btnAction)=\"closeModal()\" dataTest=\"btn-close-modal\"\r\n              cssClass=\"btn-close\">\r\n            </cw-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-none\">\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 {\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        @else {\r\n          <div class=\"modal-header justify-content-end\">\r\n            <cw-button [label]=\"'_COMMON._ACTION.CLOSE' | translate\" [type]=\"buttonTypeEnum.light\" [withOnlyIcon]=\"true\"\r\n              [withIcon]=\"spriteIcon.toolbarClose\" (btnAction)=\"closeModal()\" dataTest=\"btn-close-modal\"\r\n              cssClass=\"btn-close\">\r\n            </cw-button>\r\n          </div>\r\n          <div class=\"modal-body\">\r\n            <cw-icon [label]=\"'Sucess'\" [iconSize]=\"iconSize['5xl']\" [icon]=\"spriteIcon.toolbarClose\" [type]=\"iconType.rounded\" [iconUiType]=\"iconUiType.success\"></cw-icon>\r\n\r\n            <h1 class=\"modal-title\" id=\"modal-basic-title\">\r\n              {{ modalTitle | translate }}\r\n            </h1>\r\n\r\n             @if (customBodyTemplate) {\r\n                <ng-container [ngTemplateOutlet]=\"customBodyTemplate\" [ngTemplateOutletContext]=\"customBodyContext\">\r\n                </ng-container>\r\n              }\r\n          </div>\r\n        }\r\n\r\n        <div class=\"modal-footer\">\r\n          @if (type === modalsType.delete) {\r\n            <cw-button label=\"_COMMON._ACTION.DELETE\" [type]=\"buttonTypeEnum.danger\" [isMinWidth]=\"true\"\r\n              (btnAction)=\"action1Click()\" dataTest=\"btn-action-modal\">\r\n            </cw-button>\r\n\r\n            <cw-button label=\"_COMMON._ACTION.CLOSE\" [type]=\"buttonTypeEnum.secondary\" [isMinWidth]=\"true\"\r\n              (btnAction)=\"closeModal()\" dataTest=\"btn-close-modal\">\r\n            </cw-button>\r\n          }\r\n          @else {\r\n            @if (labelBtnAction1) {\r\n              <cw-button [label]=\"labelBtnAction1 | translate\" [type]=\"buttonTypeEnum.primary\" [isMinWidth]=\"true\"\r\n              (btnAction)=\"action1Click()\" dataTest=\"btn-action-modal\">\r\n              </cw-button>\r\n            }\r\n            @if (labelBtnAction2) {\r\n              <cw-button [label]=\"labelBtnAction2 | translate\" [type]=\"buttonTypeEnum.secondary\" [isMinWidth]=\"true\"\r\n              (btnAction)=\"action2Click()\" dataTest=\"btn-action-modal\">\r\n              </cw-button>\r\n            }\r\n            @else {\r\n              <cw-button label=\"_COMMON._ACTION.CLOSE\" [type]=\"buttonTypeEnum.secondary\" [isMinWidth]=\"true\"\r\n                (btnAction)=\"closeModal()\" dataTest=\"btn-close-modal\">\r\n              </cw-button>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n      @else {\r\n        <div class=\"modal-body\">\r\n          <cw-loader></cw-loader>\r\n        </div>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], propDecorators: { modalContainer: [{
+                type: ViewChild,
+                args: ['modalContainer']
+            }], size: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], scrollable: [{
+                type: Input
+            }], isAutcompModal: [{
+                type: Input
+            }], type: [{
                 type: Input
             }], modalTitle: [{
                 type: Input
@@ -1554,13 +2247,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], itemsToDeleteTitle: [{
                 type: Input
-            }], labelBtnAction: [{
+            }], labelBtnAction1: [{
+                type: Input
+            }], labelBtnAction2: [{
                 type: Input
             }], customBodyTemplate: [{
                 type: Input
             }], customBodyContext: [{
                 type: Input
-            }], btnAction: [{
+            }], btnAction1: [{
+                type: Output
+            }], btnAction2: [{
                 type: Output
             }] } });
 
@@ -1573,8 +2270,8 @@ class TabContentComponent {
     get fragment() {
         return UtilsHelper.slugify(this.title);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TabContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: TabContentComponent, isStandalone: true, selector: "cw-tab-content", inputs: { title: "title", disabled: "disabled", withIcon: "withIcon" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TabContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: TabContentComponent, isStandalone: true, selector: "cw-tab-content", inputs: { title: "title", disabled: "disabled", withIcon: "withIcon" }, ngImport: i0, template: `
     <div class="tab-pane"
          [class.fade]="!active"
          [class.active]="active"
@@ -1587,7 +2284,7 @@ class TabContentComponent {
     </div>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TabContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TabContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cw-tab-content',
@@ -1729,17 +2426,17 @@ class TabComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TabComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TabComponent, isStandalone: true, selector: "cw-tab", inputs: { type: "type", id: "id", useFragment: "useFragment", title: "title", tabContentCssClass: "tabContentCssClass", activeTabIndex: "activeTabIndex" }, outputs: { tabChanged: "tabChanged" }, queries: [{ propertyName: "tabs", predicate: TabContentComponent }], viewQueries: [{ propertyName: "tabLinks", predicate: ["tabLink"], descendants: true }], ngImport: i0, template: "<div class=\"tab\" [ngClass]=\"'tab-' + type\">\r\n  @if (title) {\r\n    <h2>{{ title | translate }}</h2>\r\n  }\r\n  <ul class=\"tab-items d-flex-h\" [ngClass]=\"'tab-items-' + type\" role=\"tablist\" appRwdTabs>\r\n    @for (tab of tabs.toArray(); track tab; let i = $index) {\r\n      <li class=\"tab-item\" role=\"presentation\">\r\n        <button #tabLink type=\"button\" class=\"tab-link btn\" [class.active]=\"tab.active\" [class.disabled]=\"tab.disabled\"\r\n        [disabled]=\"tab.disabled\" [attr.id]=\"'cw-nav-' + i\" [attr.data-test-ctw]=\"'link-tab-' + id + '-' + i\"\r\n        [attr.aria-selected]=\"tab.active\" [attr.aria-controls]=\"'cw-nav-' + i + '-panel'\"\r\n        [attr.tabindex]=\"tab.active ? '0' : '-1'\" (click)=\"selectTab(tab)\" (keydown)=\"onKeydown($event)\" role=\"tab\">\r\n        @if (tab.withIcon) {\r\n          <cw-icon [icon]=\"tab.withIcon\" [iconSize]=\"iconSize\"></cw-icon>\r\n        }\r\n        {{ tab.title | translate }}\r\n      </button>\r\n    </li>\r\n  }\r\n  </ul>\r\n</div>\r\n\r\n<div [class]=\"'tab-content ' + tabContentCssClass\" [ngClass]=\"'tab-content-' + type\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "font", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TabComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: TabComponent, isStandalone: true, selector: "cw-tab", inputs: { type: "type", id: "id", useFragment: "useFragment", title: "title", tabContentCssClass: "tabContentCssClass", activeTabIndex: "activeTabIndex" }, outputs: { tabChanged: "tabChanged" }, queries: [{ propertyName: "tabs", predicate: TabContentComponent }], viewQueries: [{ propertyName: "tabLinks", predicate: ["tabLink"], descendants: true }], ngImport: i0, template: "<div class=\"tab\" [ngClass]=\"'tab-' + type\">\r\n  @if (title) {\r\n    <h2>{{ title | translate }}</h2>\r\n  }\r\n  <ul class=\"tab-items d-flex-h\" [ngClass]=\"'tab-items-' + type\" role=\"tablist\" appRwdTabs>\r\n    @for (tab of tabs.toArray(); track tab; let i = $index) {\r\n      <li class=\"tab-item\" role=\"presentation\">\r\n        <button #tabLink type=\"button\" class=\"tab-link btn\" [class.active]=\"tab.active\" [class.disabled]=\"tab.disabled\"\r\n        [disabled]=\"tab.disabled\" [attr.id]=\"'cw-nav-' + i\" [attr.data-test-ctw]=\"'link-tab-' + id + '-' + i\"\r\n        [attr.aria-selected]=\"tab.active\" [attr.aria-controls]=\"'cw-nav-' + i + '-panel'\"\r\n        [attr.tabindex]=\"tab.active ? '0' : '-1'\" (click)=\"selectTab(tab)\" (keydown)=\"onKeydown($event)\" role=\"tab\">\r\n        @if (tab.withIcon) {\r\n          <cw-icon [icon]=\"tab.withIcon\" [iconSize]=\"iconSize\"></cw-icon>\r\n        }\r\n        {{ tab.title | translate }}\r\n      </button>\r\n    </li>\r\n  }\r\n  </ul>\r\n</div>\r\n\r\n<div [class]=\"'tab-content ' + tabContentCssClass\" [ngClass]=\"'tab-content-' + type\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom", "spritePath"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cw-tab', standalone: true, imports: [
                         CommonModule,
                         IconComponent,
                         TranslateModule
                     ], template: "<div class=\"tab\" [ngClass]=\"'tab-' + type\">\r\n  @if (title) {\r\n    <h2>{{ title | translate }}</h2>\r\n  }\r\n  <ul class=\"tab-items d-flex-h\" [ngClass]=\"'tab-items-' + type\" role=\"tablist\" appRwdTabs>\r\n    @for (tab of tabs.toArray(); track tab; let i = $index) {\r\n      <li class=\"tab-item\" role=\"presentation\">\r\n        <button #tabLink type=\"button\" class=\"tab-link btn\" [class.active]=\"tab.active\" [class.disabled]=\"tab.disabled\"\r\n        [disabled]=\"tab.disabled\" [attr.id]=\"'cw-nav-' + i\" [attr.data-test-ctw]=\"'link-tab-' + id + '-' + i\"\r\n        [attr.aria-selected]=\"tab.active\" [attr.aria-controls]=\"'cw-nav-' + i + '-panel'\"\r\n        [attr.tabindex]=\"tab.active ? '0' : '-1'\" (click)=\"selectTab(tab)\" (keydown)=\"onKeydown($event)\" role=\"tab\">\r\n        @if (tab.withIcon) {\r\n          <cw-icon [icon]=\"tab.withIcon\" [iconSize]=\"iconSize\"></cw-icon>\r\n        }\r\n        {{ tab.title | translate }}\r\n      </button>\r\n    </li>\r\n  }\r\n  </ul>\r\n</div>\r\n\r\n<div [class]=\"'tab-content ' + tabContentCssClass\" [ngClass]=\"'tab-content-' + type\">\r\n  <ng-content></ng-content>\r\n</div>\r\n" }]
-        }], ctorParameters: () => [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }], propDecorators: { type: [{
+        }], ctorParameters: () => [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }], propDecorators: { type: [{
                 type: Input
             }], id: [{
                 type: Input
@@ -1765,10 +2462,10 @@ class WizardStepComponent {
     constructor() {
         this.completed = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WizardStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WizardStepComponent, isStandalone: true, selector: "cw-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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: WizardStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: WizardStepComponent, isStandalone: true, selector: "cw-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.16", ngImport: i0, type: WizardStepComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: WizardStepComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cw-wizard-step',
@@ -1832,10 +2529,10 @@ class WizardStepperComponent {
             this.stepChange.emit(this.selectedIndex);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WizardStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: WizardStepperComponent, isStandalone: true, selector: "cw-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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: WizardStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: WizardStepperComponent, isStandalone: true, selector: "cw-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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.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.16", ngImport: i0, type: WizardStepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: WizardStepperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cw-wizard-stepper', standalone: true, imports: [
                         CommonModule,
@@ -1860,10 +2557,10 @@ class StepperComponent {
         this.steps = [];
         this.label = 'Étapes de progression'; // todo trad
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: StepperComponent, isStandalone: true, selector: "cw-stepper", inputs: { activeStep: "activeStep", steps: "steps", label: "label" }, ngImport: i0, template: "<ul class=\"stepper\" role=\"list\" [attr.aria-label]=\"label\">\r\n  @for (step of steps; track step; let i = $index) {\r\n    <li id=\"step-{{i}}\" class=\"stepper-item\" [ngClass]=\"{\r\n          'stepper-item-current': i === activeStep,\r\n          'stepper-item-completed': i < activeStep}\"\r\n      [attr.aria-current]=\"i === activeStep ? 'step' : null\">\r\n      <span class=\"stepper-label\">\r\n        <span class=\"visually-hidden\">{{i + 1}}</span>\r\n        {{step | translate}}\r\n      </span>\r\n    </li>\r\n  }\r\n</ul>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: StepperComponent, isStandalone: true, selector: "cw-stepper", inputs: { activeStep: "activeStep", steps: "steps", label: "label" }, ngImport: i0, template: "<ul class=\"stepper\" role=\"list\" [attr.aria-label]=\"label\">\r\n  @for (step of steps; track step; let i = $index) {\r\n    <li id=\"step-{{i}}\" class=\"stepper-item\" [ngClass]=\"{\r\n          'stepper-item-current': i === activeStep,\r\n          'stepper-item-completed': i < activeStep}\"\r\n      [attr.aria-current]=\"i === activeStep ? 'step' : null\">\r\n      <span class=\"stepper-label\">\r\n        <span class=\"visually-hidden\">{{i + 1}}</span>\r\n        {{step | translate}}\r\n      </span>\r\n    </li>\r\n  }\r\n</ul>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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.16", ngImport: i0, type: StepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cw-stepper', standalone: true, imports: [
                         CommonModule,
@@ -1892,10 +2589,10 @@ class FormatFileSizePipe {
         const unit = units[power];
         return `${formattedSize} ${unit}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormatFileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: FormatFileSizePipe, isStandalone: true, name: "formatFileSize" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormatFileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: FormatFileSizePipe, isStandalone: true, name: "formatFileSize" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormatFileSizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormatFileSizePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'formatFileSize' }]
         }] });
@@ -1905,13 +2602,14 @@ class FileToDownloadComponent {
         this.translate = inject(TranslateService);
         this.iconType = IconTypeEnum;
         this.iconSize = IconSizeEnum;
+        this.spriteIcon = SpriteIconEnum.toolbarDownload;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FileToDownloadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FileToDownloadComponent, isStandalone: true, selector: "cw-file-to-download", inputs: { attachments: "attachments" }, ngImport: i0, template: "<!-- If one file  -->\r\n@if (attachments.length === 1 ) {\r\n<ng-container *ngTemplateOutlet=\"file;context:{attachment:attachments[0]}\"></ng-container>\r\n}\r\n\r\n<!-- If two files or more, li loop -->\r\n@if (attachments.length > 1) {\r\n<ul class=\"list-unstyled file-to-download-items\">\r\n  @for (attachment of attachments; track attachment) {\r\n  <li class=\"file-to-download-list-item\">\r\n    <ng-container *ngTemplateOutlet=\"file;context:{attachment:attachment}\"></ng-container>\r\n  </li>\r\n  }\r\n</ul>\r\n}\r\n\r\n<ng-template #file let-attachment=\"attachment\">\r\n  <a [href]=\"attachment.url\" class=\"file-to-download-link\" target=\"_blank\">\r\n    <span class=\"file-to-download-name\">\r\n      {{ attachment.label ? attachment.label : ('_SHARED.ATTACHMENT_DEFAULT_LABEL' | translate ) }}\r\n    </span>\r\n    <span class=\"file-to-download-info\">\r\n      @if (attachment.extension && attachment.size) {\r\n      {{attachment.extension.toUpperCase()}} {{attachment.size * 1024 | formatFileSize}}\r\n      }\r\n      <cw-icon icon=\"cw-toolbar-download\" font=\"optyweb\" [label]=\"'_COMMON.NEW_WINDOW' |translate\" [type]=\"iconType.default\"\r\n        [iconSize]=\"iconSize['md']\" iconCssClass=\"file-to-download-download\"></cw-icon>\r\n    </span>\r\n  </a>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "font", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: FormatFileSizePipe, name: "formatFileSize" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FileToDownloadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FileToDownloadComponent, isStandalone: true, selector: "cw-file-to-download", inputs: { attachments: "attachments" }, ngImport: i0, template: "<!-- If one file  -->\r\n@if (attachments.length === 1 ) {\r\n<ng-container *ngTemplateOutlet=\"file;context:{attachment:attachments[0]}\"></ng-container>\r\n}\r\n\r\n<!-- If two files or more, li loop -->\r\n@if (attachments.length > 1) {\r\n<ul class=\"list-unstyled file-to-download-items\">\r\n  @for (attachment of attachments; track attachment) {\r\n  <li class=\"file-to-download-list-item\">\r\n    <ng-container *ngTemplateOutlet=\"file;context:{attachment:attachment}\"></ng-container>\r\n  </li>\r\n  }\r\n</ul>\r\n}\r\n\r\n<ng-template #file let-attachment=\"attachment\">\r\n  <a [href]=\"attachment.url\" class=\"file-to-download-link\" target=\"_blank\">\r\n    <span class=\"file-to-download-name\">\r\n      {{ attachment.label ? attachment.label : ('_SHARED.ATTACHMENT_DEFAULT_LABEL' | translate ) }}\r\n    </span>\r\n    <span class=\"file-to-download-info\">\r\n      @if (attachment.extension && attachment.size) {\r\n      {{attachment.extension.toUpperCase()}} {{attachment.size * 1024 | formatFileSize}}\r\n      }\r\n      <cw-icon [icon]=\"spriteIcon\" font=\"optyweb\" [label]=\"'_COMMON.NEW_WINDOW' |translate\" [type]=\"iconType.default\"\r\n        [iconSize]=\"iconSize['md']\" iconCssClass=\"file-to-download-download\"></cw-icon>\r\n    </span>\r\n  </a>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom", "spritePath"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: FormatFileSizePipe, name: "formatFileSize" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FileToDownloadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FileToDownloadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cw-file-to-download', imports: [NgTemplateOutlet, TranslatePipe, FormatFileSizePipe, IconComponent], template: "<!-- If one file  -->\r\n@if (attachments.length === 1 ) {\r\n<ng-container *ngTemplateOutlet=\"file;context:{attachment:attachments[0]}\"></ng-container>\r\n}\r\n\r\n<!-- If two files or more, li loop -->\r\n@if (attachments.length > 1) {\r\n<ul class=\"list-unstyled file-to-download-items\">\r\n  @for (attachment of attachments; track attachment) {\r\n  <li class=\"file-to-download-list-item\">\r\n    <ng-container *ngTemplateOutlet=\"file;context:{attachment:attachment}\"></ng-container>\r\n  </li>\r\n  }\r\n</ul>\r\n}\r\n\r\n<ng-template #file let-attachment=\"attachment\">\r\n  <a [href]=\"attachment.url\" class=\"file-to-download-link\" target=\"_blank\">\r\n    <span class=\"file-to-download-name\">\r\n      {{ attachment.label ? attachment.label : ('_SHARED.ATTACHMENT_DEFAULT_LABEL' | translate ) }}\r\n    </span>\r\n    <span class=\"file-to-download-info\">\r\n      @if (attachment.extension && attachment.size) {\r\n      {{attachment.extension.toUpperCase()}} {{attachment.size * 1024 | formatFileSize}}\r\n      }\r\n      <cw-icon icon=\"cw-toolbar-download\" font=\"optyweb\" [label]=\"'_COMMON.NEW_WINDOW' |translate\" [type]=\"iconType.default\"\r\n        [iconSize]=\"iconSize['md']\" iconCssClass=\"file-to-download-download\"></cw-icon>\r\n    </span>\r\n  </a>\r\n</ng-template>\r\n" }]
+            args: [{ selector: 'cw-file-to-download', imports: [NgTemplateOutlet, TranslatePipe, FormatFileSizePipe, IconComponent], template: "<!-- If one file  -->\r\n@if (attachments.length === 1 ) {\r\n<ng-container *ngTemplateOutlet=\"file;context:{attachment:attachments[0]}\"></ng-container>\r\n}\r\n\r\n<!-- If two files or more, li loop -->\r\n@if (attachments.length > 1) {\r\n<ul class=\"list-unstyled file-to-download-items\">\r\n  @for (attachment of attachments; track attachment) {\r\n  <li class=\"file-to-download-list-item\">\r\n    <ng-container *ngTemplateOutlet=\"file;context:{attachment:attachment}\"></ng-container>\r\n  </li>\r\n  }\r\n</ul>\r\n}\r\n\r\n<ng-template #file let-attachment=\"attachment\">\r\n  <a [href]=\"attachment.url\" class=\"file-to-download-link\" target=\"_blank\">\r\n    <span class=\"file-to-download-name\">\r\n      {{ attachment.label ? attachment.label : ('_SHARED.ATTACHMENT_DEFAULT_LABEL' | translate ) }}\r\n    </span>\r\n    <span class=\"file-to-download-info\">\r\n      @if (attachment.extension && attachment.size) {\r\n      {{attachment.extension.toUpperCase()}} {{attachment.size * 1024 | formatFileSize}}\r\n      }\r\n      <cw-icon [icon]=\"spriteIcon\" font=\"optyweb\" [label]=\"'_COMMON.NEW_WINDOW' |translate\" [type]=\"iconType.default\"\r\n        [iconSize]=\"iconSize['md']\" iconCssClass=\"file-to-download-download\"></cw-icon>\r\n    </span>\r\n  </a>\r\n</ng-template>\r\n" }]
         }], propDecorators: { attachments: [{
                 type: Input
             }] } });
@@ -1946,13 +2644,11 @@ class NumericalRangeComponent {
         this.numericalRangeType = NumericalRangeTypeEnum;
         this.iconTypeEnum = IconTypeEnum;
         this.iconSize = IconSizeEnum;
+        this.spriteIcon = SpriteIconEnum;
         this.labelPositionValue = NumericalRangeLabelPositionEnum;
         this.buttonType = FoButtonTypeEnum && BoButtonTypeEnum;
         this.buttonIconSize = ButtonIconSizeEnum;
-    }
-    ngOnInit() {
-        // this.elementRef.nativeElement.classList.add('dropdown-item');
-        // this.elementRef.nativeElement.setAttribute('tabindex', '0');
+        this.uniqueId = `numerical-range-${Math.random().toString(36).slice(2)}`;
     }
     increaseAmount() {
         const amount = this.amount + 1;
@@ -1971,12 +2667,12 @@ class NumericalRangeComponent {
         }
         this.newAmount.emit(amount);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NumericalRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: NumericalRangeComponent, isStandalone: true, selector: "cw-numerical-range", inputs: { type: "type", label: "label", amount: "amount", withIcon: "withIcon", withLabelVisible: "withLabelVisible", labelPosition: "labelPosition", ceil: "ceil", floor: "floor", isDisabled: "isDisabled", autoChangeAmount: "autoChangeAmount" }, outputs: { newAmount: "newAmount" }, ngImport: i0, template: "<div class=\"numerical-range text-center\" [ngClass]=\"'numerical-range-' + type\">\r\n  @if (labelPosition == labelPositionValue.outside) {\r\n    @if (withLabelVisible) {\r\n      <div class=\"numerical-range-label\">\r\n        @if (withIcon && (type == numericalRangeType.largeWhite || type == numericalRangeType.largeGrey)) {\r\n          <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSize['lg']\"></cw-icon>\r\n        }\r\n        <span>{{ label }}</span>\r\n      </div>\r\n    }\r\n  }\r\n  <div class=\"numerical-range-container\">\r\n\r\n    <cw-button [isDisabled]=\"isDisabled || amount <= floor\" label=\"Augmenter la valeur de 1\"\r\n      withIcon=\"optyweb cw-toolbar-add\" [withOnlyIcon]=\"true\" [type]=\"buttonType.primary\" [iconSize]=\"buttonIconSize.small\"\r\n      (btnAction)=\"decreaseAmount()\"></cw-button>\r\n\r\n    <div class=\"numerical-range-wrapper\">\r\n      <div class=\"numerical-range-amount\">\r\n        {{ amount }}\r\n      </div>\r\n\r\n      @if ((type !== numericalRangeType.largeGrey && type !== numericalRangeType.largeWhite) && (withIcon || withLabelVisible)) {\r\n        <div class=\"numerical-range-label\">\r\n          @if (withLabelVisible && labelPosition == labelPositionValue.inside) {\r\n            @if (withIcon) {\r\n              <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSize['lg']\"></cw-icon>\r\n            }\r\n            <span>{{ label }}</span>\r\n          }\r\n          @else {\r\n            @if (withIcon) {\r\n              <cw-icon [icon]=\"withIcon\" [label]=\"label\" [iconSize]=\"iconSize['lg']\"></cw-icon>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n      </div>\r\n    <cw-button [isDisabled]=\"isDisabled || amount >= ceil\" label=\"Dimiuer la valeur de 1\"\r\n      withIcon=\"optyweb cw-toolbar-add\" [withOnlyIcon]=\"true\" [type]=\"buttonType.primary\" [iconSize]=\"buttonIconSize.small\"\r\n      (btnAction)=\"increaseAmount()\"></cw-button>\r\n  </div>\r\n\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "font", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom"] }, { kind: "component", type: ButtonComponent, selector: "cw-button", inputs: ["type", "label", "id", "isDropdown", "withIcon", "withOnlyIcon", "iconSize", "iconPosition", "dropdownPosition", "isMinWidth", "isDisabled", "withSpinner", "cssClass", "dataTest", "withTooltip", "tooltipText", "tooltipTitle", "tooltipTrigger", "tooltipPosition", "tooltipType"], outputs: ["btnAction", "dropDownClicked"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NumericalRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: NumericalRangeComponent, isStandalone: true, selector: "cw-numerical-range", inputs: { type: "type", label: "label", amount: "amount", withIcon: "withIcon", withLabelVisible: "withLabelVisible", labelPosition: "labelPosition", ceil: "ceil", floor: "floor", isDisabled: "isDisabled", autoChangeAmount: "autoChangeAmount" }, outputs: { newAmount: "newAmount" }, ngImport: i0, template: "<div class=\"numerical-range text-center\" [ngClass]=\"'numerical-range-' + type\">\r\n\r\n  @if (labelPosition == labelPositionValue.outside && withLabelVisible) {\r\n    <div class=\"numerical-range-label\" aria-hidden=\"true\">\r\n      @if (withIcon && (type == numericalRangeType.largeWhite || type == numericalRangeType.largeGrey)) {\r\n        <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSize['lg']\"></cw-icon>\r\n      }\r\n      <span>{{ label }}</span>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"numerical-range-container\">\r\n    <cw-button [isDisabled]=\"isDisabled || amount <= floor\" [label]=\"'Diminuer ' + amount + ' ' + label\"\r\n      [withIcon]=\"spriteIcon.toolbarMinus\" [withOnlyIcon]=\"true\" [type]=\"buttonType.primary\"\r\n      [iconSize]=\"buttonIconSize.small\" (btnAction)=\"decreaseAmount()\">\r\n    </cw-button>\r\n\r\n    <div class=\"numerical-range-wrapper\">\r\n      <div class=\"numerical-range-amount\" aria-live=\"polite\" aria-atomic=\"true\">\r\n        {{ amount }}\r\n        @if (!withLabelVisible && !withIcon) {\r\n          <span class=\"sr-only\">{{ label }}</span>\r\n        }\r\n      </div>\r\n\r\n      @if ((type !== numericalRangeType.largeGrey && type !== numericalRangeType.largeWhite) && (withIcon ||\r\n      withLabelVisible)) {\r\n        <div class=\"numerical-range-label\">\r\n          @if (withLabelVisible && labelPosition == labelPositionValue.inside) {\r\n            @if (withIcon) {\r\n              <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSize['lg']\" aria-hidden=\"true\"></cw-icon>\r\n            }\r\n            <span>{{ label }}</span>\r\n          }\r\n          @else {\r\n              @if (withIcon) {\r\n              <cw-icon [icon]=\"withIcon\" [label]=\"label\" [iconSize]=\"iconSize['lg']\"></cw-icon>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <cw-button [isDisabled]=\"isDisabled || amount >= ceil\" [label]=\"'Augmenter ' + amount + ' ' + label\"\r\n      [withIcon]=\"spriteIcon.toolbarPlus\" [withOnlyIcon]=\"true\" [type]=\"buttonType.primary\"\r\n      [iconSize]=\"buttonIconSize.small\" (btnAction)=\"increaseAmount()\">\r\n    </cw-button>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom", "spritePath"] }, { kind: "component", type: ButtonComponent, selector: "cw-button", inputs: ["type", "label", "id", "isDropdown", "withIcon", "withOnlyIcon", "iconSize", "iconPosition", "dropdownPosition", "isMinWidth", "isDisabled", "isLoading", "cssClass", "dataTest", "skeletonMode", "withTooltip", "tooltipText", "tooltipTitle", "tooltipTrigger", "tooltipPosition", "tooltipType"], outputs: ["btnAction", "dropDownClicked"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NumericalRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NumericalRangeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cw-numerical-range', imports: [NgClass, IconComponent, ButtonComponent], standalone: true, template: "<div class=\"numerical-range text-center\" [ngClass]=\"'numerical-range-' + type\">\r\n  @if (labelPosition == labelPositionValue.outside) {\r\n    @if (withLabelVisible) {\r\n      <div class=\"numerical-range-label\">\r\n        @if (withIcon && (type == numericalRangeType.largeWhite || type == numericalRangeType.largeGrey)) {\r\n          <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSize['lg']\"></cw-icon>\r\n        }\r\n        <span>{{ label }}</span>\r\n      </div>\r\n    }\r\n  }\r\n  <div class=\"numerical-range-container\">\r\n\r\n    <cw-button [isDisabled]=\"isDisabled || amount <= floor\" label=\"Augmenter la valeur de 1\"\r\n      withIcon=\"optyweb cw-toolbar-add\" [withOnlyIcon]=\"true\" [type]=\"buttonType.primary\" [iconSize]=\"buttonIconSize.small\"\r\n      (btnAction)=\"decreaseAmount()\"></cw-button>\r\n\r\n    <div class=\"numerical-range-wrapper\">\r\n      <div class=\"numerical-range-amount\">\r\n        {{ amount }}\r\n      </div>\r\n\r\n      @if ((type !== numericalRangeType.largeGrey && type !== numericalRangeType.largeWhite) && (withIcon || withLabelVisible)) {\r\n        <div class=\"numerical-range-label\">\r\n          @if (withLabelVisible && labelPosition == labelPositionValue.inside) {\r\n            @if (withIcon) {\r\n              <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSize['lg']\"></cw-icon>\r\n            }\r\n            <span>{{ label }}</span>\r\n          }\r\n          @else {\r\n            @if (withIcon) {\r\n              <cw-icon [icon]=\"withIcon\" [label]=\"label\" [iconSize]=\"iconSize['lg']\"></cw-icon>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n      </div>\r\n    <cw-button [isDisabled]=\"isDisabled || amount >= ceil\" label=\"Dimiuer la valeur de 1\"\r\n      withIcon=\"optyweb cw-toolbar-add\" [withOnlyIcon]=\"true\" [type]=\"buttonType.primary\" [iconSize]=\"buttonIconSize.small\"\r\n      (btnAction)=\"increaseAmount()\"></cw-button>\r\n  </div>\r\n\r\n</div>\r\n" }]
+            args: [{ selector: 'cw-numerical-range', imports: [NgClass, IconComponent, ButtonComponent], standalone: true, template: "<div class=\"numerical-range text-center\" [ngClass]=\"'numerical-range-' + type\">\r\n\r\n  @if (labelPosition == labelPositionValue.outside && withLabelVisible) {\r\n    <div class=\"numerical-range-label\" aria-hidden=\"true\">\r\n      @if (withIcon && (type == numericalRangeType.largeWhite || type == numericalRangeType.largeGrey)) {\r\n        <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSize['lg']\"></cw-icon>\r\n      }\r\n      <span>{{ label }}</span>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"numerical-range-container\">\r\n    <cw-button [isDisabled]=\"isDisabled || amount <= floor\" [label]=\"'Diminuer ' + amount + ' ' + label\"\r\n      [withIcon]=\"spriteIcon.toolbarMinus\" [withOnlyIcon]=\"true\" [type]=\"buttonType.primary\"\r\n      [iconSize]=\"buttonIconSize.small\" (btnAction)=\"decreaseAmount()\">\r\n    </cw-button>\r\n\r\n    <div class=\"numerical-range-wrapper\">\r\n      <div class=\"numerical-range-amount\" aria-live=\"polite\" aria-atomic=\"true\">\r\n        {{ amount }}\r\n        @if (!withLabelVisible && !withIcon) {\r\n          <span class=\"sr-only\">{{ label }}</span>\r\n        }\r\n      </div>\r\n\r\n      @if ((type !== numericalRangeType.largeGrey && type !== numericalRangeType.largeWhite) && (withIcon ||\r\n      withLabelVisible)) {\r\n        <div class=\"numerical-range-label\">\r\n          @if (withLabelVisible && labelPosition == labelPositionValue.inside) {\r\n            @if (withIcon) {\r\n              <cw-icon [icon]=\"withIcon\" [iconSize]=\"iconSize['lg']\" aria-hidden=\"true\"></cw-icon>\r\n            }\r\n            <span>{{ label }}</span>\r\n          }\r\n          @else {\r\n              @if (withIcon) {\r\n              <cw-icon [icon]=\"withIcon\" [label]=\"label\" [iconSize]=\"iconSize['lg']\"></cw-icon>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <cw-button [isDisabled]=\"isDisabled || amount >= ceil\" [label]=\"'Augmenter ' + amount + ' ' + label\"\r\n      [withIcon]=\"spriteIcon.toolbarPlus\" [withOnlyIcon]=\"true\" [type]=\"buttonType.primary\"\r\n      [iconSize]=\"buttonIconSize.small\" (btnAction)=\"increaseAmount()\">\r\n    </cw-button>\r\n  </div>\r\n</div>\r\n" }]
         }], propDecorators: { type: [{
                 type: Input
             }], label: [{
@@ -2010,10 +2706,10 @@ class ImageComponent {
         this.width = '';
         this.height = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ImageComponent, isStandalone: true, selector: "cw-image", inputs: { source: "source", alt: "alt", isAriaHidden: "isAriaHidden", cssClass: "cssClass", width: "width", height: "height" }, ngImport: i0, template: "<img [src]=\"source\" [attr.aria-hidden]=\"isAriaHidden ? 'true' : null\" [class]=\"cssClass\" [alt]=\"alt\"\r\n  [attr.width]=\"width ? width : null\" [attr.height]=\"height ? height : null\">\r\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: ImageComponent, isStandalone: true, selector: "cw-image", inputs: { source: "source", alt: "alt", isAriaHidden: "isAriaHidden", cssClass: "cssClass", width: "width", height: "height" }, ngImport: i0, template: "<img [src]=\"source\" [attr.aria-hidden]=\"isAriaHidden ? 'true' : null\" [class]=\"cssClass\" [alt]=\"alt\"\r\n  [attr.width]=\"width ? width : null\" [attr.height]=\"height ? height : null\">\r\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cw-image', standalone: true, template: "<img [src]=\"source\" [attr.aria-hidden]=\"isAriaHidden ? 'true' : null\" [class]=\"cssClass\" [alt]=\"alt\"\r\n  [attr.width]=\"width ? width : null\" [attr.height]=\"height ? height : null\">\r\n" }]
         }], propDecorators: { source: [{
@@ -2036,47 +2732,6 @@ var PlacementEnum;
     PlacementEnum["Right"] = "right";
 })(PlacementEnum || (PlacementEnum = {}));
 
-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.16", ngImport: i0, type: ModalsService, deps: [{ token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalsService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalsService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$1.NgbModal }] });
-
 /*
  * Public API Surface of basic-ui
  */
@@ -2088,5 +2743,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AlertComponent, AlertTypeEnum, BadgeComponent, BadgePositionEnum, BadgeTypeEnum, BoButtonTypeEnum, BoTabTypeEnum, ButtonComponent, ButtonIconSizeEnum, ButtonPositionEnum, CardComponent, CardTitleRankEnum, CardTypeEnum, ClickOutsideDirective, CollapseDirective, DropdownComponent, DropdownItemDirective, FileToDownloadComponent, FoButtonTypeEnum, FoTabTypeEnum, FocusTrackerService, FormFieldComponent, FormFieldTypeEnum, IconComponent, IconNotifSizeEnum, IconNotifTypeEnum, IconNotificationComponent, IconSizeEnum, IconTypeEnum, IconUiTypeEnum, ImageComponent, LegendComponent, LegendTypeEnum, LoaderComponent, ModalsComponent, ModalsService, ModalsType, NumericalRangeComponent, NumericalRangeLabelPositionEnum, NumericalRangeTypeEnum, PlacementEnum, ResponsiveService, StepperComponent, TabComponent, TabContentComponent, ToastComponent, ToastService, TriggerTooltipEnum, TypeTooltipEnum, WizardStepComponent, WizardStepperComponent, rangeValidator };
+export { AccordionComponent, AlertComponent, AlertTypeEnum, BadgeComponent, BadgePositionEnum, BadgeTypeEnum, BoButtonTypeEnum, BoTabTypeEnum, ButtonComponent, ButtonIconSizeEnum, ButtonPositionEnum, CardComponent, CardTitleRankEnum, CardTypeEnum, ClickOutsideDirective, CollapseDirective, DropdownComponent, DropdownItemDirective, FileToDownloadComponent, FoButtonTypeEnum, FoTabTypeEnum, FocusTrackerService, FormFieldComponent, FormFieldTypeEnum, IconComponent, IconNotifSizeEnum, IconNotifTypeEnum, IconNotificationComponent, IconSizeEnum, IconTypeEnum, IconUiTypeEnum, ImageComponent, LegendComponent, LegendTypeEnum, LoaderComponent, ModalsComponent, ModalsService, ModalsSize, ModalsType, NumericalRangeComponent, NumericalRangeLabelPositionEnum, NumericalRangeTypeEnum, PlacementEnum, ResponsiveService, StepperComponent, TabComponent, TabContentComponent, ToastComponent, ToastService, TriggerTooltipEnum, TypeTooltipEnum, WizardStepComponent, WizardStepperComponent, rangeValidator };
 //# sourceMappingURL=cityway-basic-ui.mjs.map