arengibook 3.0.3-datepicker.0 → 3.0.5-datepicker

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.js +66 -27
  2. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -12975,7 +12975,7 @@ function styleInject(css, ref) {
12975
12975
  if ( ref === void 0 ) ref = {};
12976
12976
  var insertAt = ref.insertAt;
12977
12977
 
12978
- if (!css || typeof document === 'undefined') { return; }
12978
+ if (typeof document === 'undefined') { return; }
12979
12979
 
12980
12980
  var head = document.head || document.getElementsByTagName('head')[0];
12981
12981
  var style = document.createElement('style');
@@ -12998,13 +12998,10 @@ function styleInject(css, ref) {
12998
12998
  }
12999
12999
  }
13000
13000
 
13001
- var css_248z$1 = "@charset \"UTF-8\";\n/* Variables couleurs */\n/* Force une largeur à 100% de l'input Calendar */\n.datepicker-fullwidth {\n width: 100%;\n}\n\n.datepicker-fullwidth > .p-calendar {\n width: 100%;\n}\n\n.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {\n outline: 0 none;\n outline-offset: 0;\n box-shadow: 0 0 0 0.2rem #a5f3fc;\n border-color: #06b6d4;\n}\n\n/* Neutralise les styles hérités */\n.datepickerbook table,\n.datepickerbook tbody,\n.datepickerbook tr,\n.datepickerbook td,\n.datepickerbook th {\n background-color: unset !important;\n color: inherit !important;\n border: none;\n}\n\n/* Restaure les couleurs et l'entete du calendrier */\n.datepickerbook .p-datepicker {\n background-color: #fff !important;\n color: #333 !important;\n border-radius: 6px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n}\n\n.datepickerbook .datepicker-custom-header {\n display: flex;\n justify-content: space-between;\n align-items: stretch;\n padding: 0.5rem 0.75rem;\n gap: 0.75rem;\n}\n\n.datepickerbook .datepicker-spinner {\n display: flex;\n flex-direction: column;\n align-items: center;\n font-size: 0.85rem;\n}\n\n.datepickerbook .dp-label {\n margin: 0.25rem 0;\n font-weight: 500;\n}\n\n.p-datepicker .p-datepicker-title,\n.p-datepicker .p-datepicker-prev,\n.p-datepicker .p-datepicker-next {\n display: none !important;\n}\n\n.datepickerbook .p-datepicker-header {\n justify-content: center;\n}\n\n.datepickerbook .dp-popup {\n position: absolute;\n top: 100%;\n margin-top: 0.25rem;\n background: #fff;\n border: 1px solid #ddd;\n border-radius: 4px;\n padding: 0.25rem;\n z-index: 10;\n}\n\n.datepickerbook .dp-popup-months,\n.datepickerbook .dp-popup-years {\n display: grid;\n grid-template-columns: repeat(3, auto);\n gap: 0.25rem;\n}\n\n.datepickerbook .dp-popup-item {\n border: none;\n background: transparent;\n padding: 0.15rem 0.4rem;\n cursor: pointer;\n font-size: 0.8rem;\n}\n\n.datepickerbook .dp-popup-item:hover {\n background: #eee;\n}\n\n.datepickerbook .datepicker-custom-header {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 0.5rem 0.75rem;\n}\n\n/*.datepickerbook .dp-header-top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 0.75rem;\n}*/\n.datepickerbook .dp-header-part {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.datepickerbook .dp-label-button {\n border: none;\n background: transparent;\n cursor: pointer;\n font-weight: 800;\n font-size: 16px;\n margin: 0.25rem 0;\n}\n\n.datepickerbook.dp-monthyear-mode .dp-monthyear-header {\n padding-bottom: 0.25rem;\n}\n\n.datepickerbook {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin-bottom: 0.25rem;\n}\n\n.datepickerbook .dp-back-button {\n border: none;\n background: transparent;\n cursor: pointer;\n font-size: 0.9rem;\n}\n\n.datepickerbook .dp-title {\n font-weight: 600;\n font-size: 0.9rem;\n}\n\n/* Colonnes mois / années */\n.datepickerbook .dp-header-lists {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.5rem;\n}\n\n.datepickerbook .dp-month-list,\n.datepickerbook .dp-year-list {\n padding-right: 0.25rem;\n display: flex;\n flex-direction: column;\n gap: 0.15rem;\n}\n\n.datepickerbook .dp-list-item:hover {\n background: #f0f0f0;\n}\n\n/*.datepickerbook.dp-monthyear-mode .p-datepicker-calendar {\n display: none;\n}*/\n.p-datepicker-header.datepicker-custom-header.dp-monthyear-header {\n margin: auto;\n}\n\n/*.p-monthpicker*/\n.p-datepicker-monthpicker.dp-monthyear-mode {\n box-shadow: none !important;\n border-radius: 0px;\n}\n\n.p-datepicker {\n width: 331px !important;\n min-width: 331px !important;\n max-width: 331px !important;\n}\n.p-datepicker .dp-arrow {\n border: none;\n background-color: transparent;\n color: rgba(0, 0, 0, 0.3137254902);\n cursor: pointer;\n}\n.p-datepicker .dp-arrow:hover {\n color: #06B6D4;\n background-color: rgba(165, 243, 252, 0.3137254902);\n}\n.p-datepicker.dp-year-only {\n box-shadow: none !important;\n}\n.p-datepicker.dp-year-only .dp-header-top-alt {\n display: none !important;\n}\n.p-datepicker.dp-year-only .dp-monthyear-header {\n width: 205px;\n min-width: 205px;\n max-width: 205px;\n}\n.p-datepicker.dp-year-only .dp-monthyear-header .dp-year-container {\n width: 100%;\n}\n.p-datepicker.dp-year-only .dp-year-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container {\n width: 100%;\n border-top: 1px solid #eaeaea;\n height: 51px;\n display: flex;\n align-items: center;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-up {\n border-right: 1px solid #eaeaea;\n border-radius: 0px 0px 0px 5px !important;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-down {\n border-radius: 0px 0px 5px 0px !important;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-year {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 49%;\n border-radius: 0px;\n flex: 1;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-year:hover {\n background-color: rgba(165, 243, 252, 0.3137254902);\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-year-list {\n width: 100%;\n gap: 0px;\n padding: 0px;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item-active {\n width: 100%;\n color: #ffffff !important;\n background-color: #06B6D4 !important;\n border-bottom: 1px solid #06B6D4 !important;\n font-weight: 600;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item {\n background-color: transparent;\n border: none;\n color: black;\n transition: 0s !important;\n height: 25px;\n font-size: 16px;\n border-radius: 0px;\n border-bottom: 1px solid #eaeaea;\n width: 100%;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item:not(.dp-list-item-big) {\n padding: 3px 10px !important;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item:not(.dp-list-item-big):hover {\n background-color: rgba(165, 243, 252, 0.3137254902) !important;\n color: #06B6D4;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item {\n padding: 3px 10px;\n transition: background 0.2s;\n}\n\n.dp-monthyear-mode .p-datepicker-group, .p-datepicker-monthpicker .p-datepicker-group, .dp-year-only .p-datepicker-group {\n padding: 0px !important;\n border: 0px solid transparent !important;\n}\n.dp-monthyear-mode .dp-monthyear-header, .p-datepicker-monthpicker .dp-monthyear-header, .dp-year-only .dp-monthyear-header {\n justify-content: flex-start;\n gap: 0;\n background: linear-gradient(45deg, #ffffff, #ffffff);\n border: 1px solid rgba(255, 255, 255, 0.3294117647);\n border-radius: 8px;\n position: absolute;\n top: 0;\n left: 0;\n padding: 0px !important;\n width: 331px;\n min-width: 331px;\n max-width: 331px;\n}\n.dp-monthyear-mode .dp-header-top-alt, .p-datepicker-monthpicker .dp-header-top-alt, .dp-year-only .dp-header-top-alt {\n width: 100%;\n height: 50px !important;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid #eaeaea;\n}\n.dp-monthyear-mode .dp-header-top-alt .dp-header-top-alt-part:first-child, .p-datepicker-monthpicker .dp-header-top-alt .dp-header-top-alt-part:first-child, .dp-year-only .dp-header-top-alt .dp-header-top-alt-part:first-child {\n border-right: 1px solid #eaeaea;\n}\n.dp-monthyear-mode .dp-header-top-alt .dp-header-top-alt-part, .p-datepicker-monthpicker .dp-header-top-alt .dp-header-top-alt-part, .dp-year-only .dp-header-top-alt .dp-header-top-alt-part {\n width: 49%;\n height: 50px;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n color: black;\n font-size: 16px;\n text-transform: capitalize;\n}\n.dp-monthyear-mode .p-datepicker-calendar-container, .p-datepicker-monthpicker .p-datepicker-calendar-container, .dp-year-only .p-datepicker-calendar-container {\n display: none;\n}\n.dp-monthyear-mode .dp-actions, .p-datepicker-monthpicker .dp-actions, .dp-year-only .dp-actions {\n width: 100%;\n background-color: white;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-radius: 0px 0px 5px 5px;\n padding: 5px;\n border-top: 1px solid #eaeaea;\n}\n.dp-monthyear-mode .dp-actions .p-button, .p-datepicker-monthpicker .dp-actions .p-button, .dp-year-only .dp-actions .p-button {\n padding: 10px 15px;\n}\n.dp-monthyear-mode .dp-actions .p-button .p-button-icon, .p-datepicker-monthpicker .dp-actions .p-button .p-button-icon, .dp-year-only .dp-actions .p-button .p-button-icon {\n display: none;\n}\n.dp-monthyear-mode .dp-header-lists, .p-datepicker-monthpicker .dp-header-lists, .dp-year-only .dp-header-lists {\n width: 100%;\n height: 300px;\n display: flex;\n align-items: flex-start;\n gap: initial;\n padding: 0px;\n}\n.dp-monthyear-mode .dp-month-list, .p-datepicker-monthpicker .dp-month-list, .dp-year-only .dp-month-list {\n transition: none !important;\n margin: 0px;\n border-right: 1px solid #eaeaea;\n gap: 0px;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item-active, .p-datepicker-monthpicker .dp-month-list .dp-list-item-active, .dp-year-only .dp-month-list .dp-list-item-active {\n width: 100%;\n color: #fff !important;\n background-color: #06B6D4 !important;\n box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3137254902);\n border-bottom: 1px solid #06B6D4 !important;\n font-weight: 600;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item, .p-datepicker-monthpicker .dp-month-list .dp-list-item, .dp-year-only .dp-month-list .dp-list-item {\n border: none;\n height: 25px;\n background-color: transparent;\n font-size: 16px;\n text-transform: capitalize;\n border-radius: 0px;\n margin: 0px;\n padding: 3px;\n width: calc(100% - 0px);\n border-bottom: 1px solid #eaeaea;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item:hover, .p-datepicker-monthpicker .dp-month-list .dp-list-item:hover, .dp-year-only .dp-month-list .dp-list-item:hover {\n background-color: rgba(165, 243, 252, 0.3137254902);\n box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3137254902);\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item:last-child, .p-datepicker-monthpicker .dp-month-list .dp-list-item:last-child, .dp-year-only .dp-month-list .dp-list-item:last-child {\n border: none;\n}\n.dp-monthyear-mode .dp-year-container, .p-datepicker-monthpicker .dp-year-container, .dp-year-only .dp-year-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n}\n.dp-monthyear-mode .dp-year-container .dp-arrow-container, .p-datepicker-monthpicker .dp-year-container .dp-arrow-container, .dp-year-only .dp-year-container .dp-arrow-container {\n width: 100%;\n border-top: 1px solid #eaeaea;\n height: 51px;\n display: flex;\n align-items: center;\n}\n.dp-monthyear-mode .dp-year-container .dp-arrow-container .dp-arrow-up, .p-datepicker-monthpicker .dp-year-container .dp-arrow-container .dp-arrow-up, .dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-up {\n border-right: 1px solid #eaeaea;\n}\n.dp-monthyear-mode .dp-year-container .dp-arrow-container .dp-arrow-year, .p-datepicker-monthpicker .dp-year-container .dp-arrow-container .dp-arrow-year, .dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-year {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 49%;\n border-radius: 0px;\n flex: 1;\n}\n.dp-monthyear-mode .dp-year-container .dp-year-list, .p-datepicker-monthpicker .dp-year-container .dp-year-list, .dp-year-only .dp-year-container .dp-year-list {\n width: 100%;\n gap: 0px;\n padding: 0px;\n}\n.dp-monthyear-mode .dp-year-container .dp-list-item-active, .p-datepicker-monthpicker .dp-year-container .dp-list-item-active, .dp-year-only .dp-year-container .dp-list-item-active {\n width: 100%;\n color: #ffffff !important;\n background-color: #06B6D4 !important;\n box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3137254902);\n border-bottom: 1px solid #06B6D4 !important;\n font-weight: 600;\n}\n.dp-monthyear-mode .dp-year-container .dp-list-item, .p-datepicker-monthpicker .dp-year-container .dp-list-item, .dp-year-only .dp-year-container .dp-list-item {\n background-color: transparent;\n border: none;\n color: black;\n transition: 0s !important;\n height: 25px;\n font-size: 16px;\n border-radius: 0px;\n border-bottom: 1px solid #eaeaea;\n width: 100%;\n padding: 3px 10px;\n}\n.dp-monthyear-mode .dp-year-container .dp-list-item:not(.dp-list-item-big), .p-datepicker-monthpicker .dp-year-container .dp-list-item:not(.dp-list-item-big), .dp-year-only .dp-year-container .dp-list-item:not(.dp-list-item-big) {\n padding: 3px 10px !important;\n}\n.dp-monthyear-mode .dp-year-container .dp-list-item:not(.dp-list-item-big):hover, .p-datepicker-monthpicker .dp-year-container .dp-list-item:not(.dp-list-item-big):hover, .dp-year-only .dp-year-container .dp-list-item:not(.dp-list-item-big):hover {\n background-color: rgba(165, 243, 252, 0.3137254902) !important;\n color: #06B6D4;\n}\n.dp-monthyear-mode .dp-month-list, .dp-monthyear-mode .dp-year-container, .p-datepicker-monthpicker .dp-month-list, .p-datepicker-monthpicker .dp-year-container, .dp-year-only .dp-month-list, .dp-year-only .dp-year-container {\n width: 49%;\n flex: 1;\n margin: 0px;\n background-color: transparent;\n padding: 0px;\n height: 100%;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item, .dp-monthyear-mode .dp-year-container .dp-list-item, .p-datepicker-monthpicker .dp-month-list .dp-list-item, .p-datepicker-monthpicker .dp-year-container .dp-list-item, .dp-year-only .dp-month-list .dp-list-item, .dp-year-only .dp-year-container .dp-list-item {\n cursor: pointer;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item:hover, .dp-monthyear-mode .dp-year-container .dp-list-item:hover, .p-datepicker-monthpicker .dp-month-list .dp-list-item:hover, .p-datepicker-monthpicker .dp-year-container .dp-list-item:hover, .dp-year-only .dp-month-list .dp-list-item:hover, .dp-year-only .dp-year-container .dp-list-item:hover {\n color: #06B6D4;\n box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3137254902);\n border-bottom: 1px solid rgba(165, 243, 252, 0.3137254902);\n}\n.dp-monthyear-mode .dp-month-list:hover, .dp-monthyear-mode .dp-year-container:hover, .p-datepicker-monthpicker .dp-month-list:hover, .p-datepicker-monthpicker .dp-year-container:hover, .dp-year-only .dp-month-list:hover, .dp-year-only .dp-year-container:hover {\n background-color: rgba(255, 255, 255, 0.3137254902);\n}\n\n.p-datepicker {\n padding: 0px;\n background-color: white;\n box-shadow: 1px 2px 26px rgba(0, 0, 0, 0.2117647059);\n width: 321px;\n}\n.p-datepicker .p-datepicker-group-container {\n width: 100%;\n}\n.p-datepicker .p-datepicker-group {\n background: linear-gradient(45deg, rgba(255, 255, 255, 0.7882352941), rgba(255, 255, 255, 0.5294117647));\n border-radius: 8px;\n padding-bottom: 1px;\n}\n.p-datepicker .p-datepicker-header {\n padding: 0px;\n /*position: fixed;\n left: 0;*/\n height: 50px;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid #eaeaea;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-month {\n border-right: 1px solid #eaeaea;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-month .dp-arrow-left {\n border-radius: 7px 0px 0px 0px;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-year .dp-arrow-right {\n border-radius: 0px 7px 0px 0px;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part {\n width: 49%;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part .dp-arrow {\n width: 30px;\n height: 49px;\n min-width: 30px;\n min-height: 49px;\n max-width: 30px;\n max-height: 49px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part .dp-arrow:hover {\n background-color: rgba(165, 243, 252, 0.3137254902);\n color: #06B6D4;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part .dp-label-button {\n width: calc(100% - 60px);\n display: flex;\n align-items: center;\n justify-content: center;\n height: 50px;\n margin: 0px;\n text-transform: capitalize;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part .dp-label-button:hover {\n background-color: rgba(165, 243, 252, 0.3137254902);\n color: #06B6D4;\n font-weight: 800;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part:hover {\n background-color: rgba(255, 255, 255, 0.3137254902);\n}\n.p-datepicker .p-datepicker-calendar-container {\n padding: 10px;\n /* margin-top: 50px;*/\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar {\n margin: 0px;\n width: 300px;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar thead tr th {\n padding: 2px;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar thead tr th span {\n color: #000000;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr .p-datepicker-today {\n background-color: transparent;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr .p-datepicker-today span {\n background-color: transparent;\n font-weight: 600;\n color: #06B6D4;\n border: 1px solid #06B6D4;\n text-decoration: underline;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td {\n padding: 0px;\n border: 1px solid #f4f4f4;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td .p-highlight {\n color: #e7efff !important;\n background-color: #06B6D4 !important;\n box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3137254902);\n font-weight: 600;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td .p-disabled {\n opacity: 0.3;\n cursor: not-allowed;\n background-color: rgba(217, 217, 217, 0) !important;\n font-size: 12px;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td span {\n margin: 0;\n width: 100%;\n border-radius: 0px;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td span:hover {\n background-color: rgba(165, 243, 252, 0.3137254902);\n color: #06B6D4;\n box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3137254902);\n}";
13002
- styleInject(css_248z$1);
13003
-
13004
- var css_248z = "@charset \"UTF-8\";\n/* WRAPPER GLOBAL */\n.dp-monthyear-header {\n width: 360px;\n background: #ffffff;\n border-radius: 18px;\n padding: 24px 26px;\n box-shadow: 0 8px 26px rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n font-family: Inter, sans-serif;\n gap: 22px;\n}\n\n/* TITRE */\n.dp-header-top-alt .dp-title {\n font-size: 1.55rem;\n font-weight: 700;\n text-align: center;\n color: #1c1c1c;\n margin-bottom: 2px;\n}\n\n/* LAYOUT MOIS - ANNEES */\n/*.dp-header-lists {\n display: grid;\n grid-template-columns: 1fr 150px;\n align-items: center;\n gap: 30px;\n padding-top: 10px;\n padding-bottom: 10px;\n}*/\n/* MOIS */\n/*.dp-month-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}*/\n/*.dp-month-list .dp-list-item {\n font-size: 1.02rem;\n color: #222;\n border-radius: 6px;\n cursor: pointer;\n\n}*/\n.datepickerbook .dp-year-list .dp-list-item:hover {\n background: #9394d8;\n}\n\n.dp-month-list .dp-list-item-active {\n background: #ffffff;\n font-weight: 600;\n}\n\n/* SLOT MACHINE – ANNÉES */\n/*.dp-year-container {\n background: #f4f4f4;\n border-radius: 22px;\n padding: 16px 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n}*/\n/* Centrage parfait */\n.dp-year-list {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n padding: 0;\n}\n\n/* Année normale */\n.dp-year-list .dp-list-item {\n font-size: 1.2rem;\n color: #8f8f8f;\n padding: 4px 0;\n cursor: pointer;\n transition: 0.15s;\n}\n\n.dp-year-list .dp-list-item:hover {\n color: #000;\n}\n\n/* Année sélectionnée */\n.dp-list-item-active.dp-list-item-big {\n /*background: #6366f1;\n color: #fff !important;\n padding: 10px 22px;\n border-radius: 12px;\n font-size: 1.65rem !important;\n font-weight: 700 !important;*/\n}\n\n/* FLECHES */\n.dp-arrow-up,\n.dp-arrow-down {\n font-size: 1.5rem;\n color: #333;\n padding: 6px;\n border: none;\n background: none;\n cursor: pointer;\n margin: 4px 0;\n}\n\n/* ACTIONS BAS – GROS BOUTONS */\n.dp-actions {\n display: flex;\n justify-content: center;\n gap: 20px;\n padding-top: 5px;\n padding-bottom: 10px;\n}\n\n/*.dp-actions .p-button {\n font-size: 1.2rem !important;\n padding: 12px 24px !important;\n border-radius: 10px !important;\n}*/\n/* TITRE MOIS ANNEE */\n.dp-header-top {\n margin: auto;\n}\n\n/* DATEPICKER CONTAINER */\n/*.p-datepicker .dp-monthyear-header {\n background: transparent !important;\n border: none !important;\n box-shadow: none !important;\n padding: 0 !important;\n border-radius: 30px;\n}*/\n/*.p-datepicker.datepickerbook.dp-monthyear-mode {\n border-radius: 30px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}*/\n/*DATEPICKER MENSUEL CUSTOMISE*/\n.p-monthpicker {\n display: none !important;\n margin: auto;\n}\n\n.datepickerbook .p-datepicker-header {\n border: none !important;\n border-bottom: none !important;\n box-shadow: none !important;\n background: transparent !important;\n}\n\n.datepickerbook.p-datepicker {\n padding: 0 !important;\n margin: 0 !important;\n}\n\n/*DATEPICKER ANNUEL CUSTOMISE*/\n.p-yearpicker {\n display: none !important;\n}\n\n.datepickerbook .p-datepicker-footer {\n margin-bottom: 20px;\n}";
13001
+ var css_248z = "@charset \"UTF-8\";\n/* Variables couleurs */\n/* Force une largeur à 100% de l'input Calendar */\n.datepicker-fullwidth {\n width: 100%;\n}\n\n.datepicker-fullwidth > .dp-input-wrapper {\n width: 100%;\n}\n.datepicker-fullwidth > .dp-input-wrapper > .p-calendar {\n width: 100%;\n}\n\n.dp-input-wrapper {\n position: relative;\n display: inline-flex;\n}\n.dp-input-wrapper .dp-clear-btn {\n position: absolute;\n right: 0.5rem;\n top: 50%;\n transform: translateY(-50%);\n background: none;\n border: none;\n cursor: pointer;\n padding: 0.2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #aaa;\n z-index: 1;\n border-radius: 50%;\n line-height: 1;\n}\n.dp-input-wrapper .dp-clear-btn:hover {\n color: #555;\n background-color: rgba(0, 0, 0, 0.06);\n}\n.dp-input-wrapper .dp-clear-btn .pi {\n font-size: 0.65rem;\n}\n\n.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {\n outline: 0 none;\n outline-offset: 0;\n box-shadow: 0 0 0 0.2rem #a5f3fc;\n border-color: #06b6d4;\n}\n\n/* Panel invisible jusqu'au repositionnement (évite le flash position basse → haute) */\n.datepickerbook:not(.dp-ready) {\n visibility: hidden !important;\n}\n\n/* Neutralise les styles hérités */\n.datepickerbook table,\n.datepickerbook tbody,\n.datepickerbook tr,\n.datepickerbook td,\n.datepickerbook th {\n background-color: unset !important;\n color: inherit !important;\n border: none;\n}\n\n/* Restaure les couleurs et l'entete du calendrier */\n.datepickerbook .p-datepicker {\n background-color: #fff !important;\n color: #333 !important;\n border-radius: 6px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n}\n\n.datepickerbook .datepicker-custom-header {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 0.5rem 0.75rem;\n}\n\n.datepickerbook .datepicker-spinner {\n display: flex;\n flex-direction: column;\n align-items: center;\n font-size: 0.85rem;\n}\n\n.datepickerbook .dp-label {\n margin: 0.25rem 0;\n font-weight: 500;\n}\n\n.p-datepicker .p-datepicker-title,\n.p-datepicker .p-datepicker-prev,\n.p-datepicker .p-datepicker-next {\n display: none !important;\n}\n\n.datepickerbook .p-datepicker-header {\n justify-content: center;\n}\n\n.datepickerbook .dp-popup {\n position: absolute;\n top: 100%;\n margin-top: 0.25rem;\n background: #fff;\n border: 1px solid #ddd;\n border-radius: 4px;\n padding: 0.25rem;\n z-index: 10;\n}\n\n.datepickerbook .dp-popup-months,\n.datepickerbook .dp-popup-years {\n display: grid;\n grid-template-columns: repeat(3, auto);\n gap: 0.25rem;\n}\n\n.datepickerbook .dp-popup-item {\n border: none;\n background: transparent;\n padding: 0.15rem 0.4rem;\n cursor: pointer;\n font-size: 0.8rem;\n}\n\n.datepickerbook .dp-popup-item:hover {\n background: #eee;\n}\n\n/*.datepickerbook .dp-header-top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 0.75rem;\n}*/\n.datepickerbook .dp-header-part {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.datepickerbook .dp-label-button {\n border: none;\n background: transparent;\n cursor: pointer;\n font-weight: 800;\n font-size: 16px;\n margin: 0.25rem 0;\n}\n\n.datepickerbook.dp-monthyear-mode .dp-monthyear-header {\n padding-bottom: 0.25rem;\n}\n\n.datepickerbook {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin-bottom: 0.25rem;\n}\n\n.datepickerbook .dp-back-button {\n border: none;\n background: transparent;\n cursor: pointer;\n font-size: 0.9rem;\n}\n\n.datepickerbook .dp-title {\n font-weight: 600;\n font-size: 0.9rem;\n}\n\n/* Colonnes mois / années */\n.datepickerbook .dp-header-lists {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.5rem;\n}\n\n.datepickerbook .dp-month-list,\n.datepickerbook .dp-year-list {\n padding-right: 0.25rem;\n display: flex;\n flex-direction: column;\n gap: 0.15rem;\n}\n\n.datepickerbook .dp-list-item:hover {\n background: #f0f0f0;\n}\n\n.p-datepicker-header.datepicker-custom-header.dp-monthyear-header {\n margin: auto;\n}\n\n/*.p-monthpicker*/\n.p-datepicker.dp-monthyear-mode {\n box-shadow: none !important;\n border-radius: 0px;\n}\n.p-datepicker.dp-monthyear-mode .dp-header-top-alt {\n display: none !important;\n}\n\n.p-datepicker-monthpicker.dp-monthyear-mode {\n box-shadow: none !important;\n border-radius: 0px;\n}\n.p-datepicker-monthpicker.dp-monthyear-mode .dp-header-top-alt {\n display: none !important;\n}\n\n.p-datepicker {\n width: 331px !important;\n min-width: 331px !important;\n max-width: 331px !important;\n}\n.p-datepicker .dp-arrow {\n border: none;\n background-color: transparent;\n color: rgba(0, 0, 0, 0.3137254902);\n cursor: pointer;\n}\n.p-datepicker .dp-arrow:hover {\n color: #06B6D4;\n background-color: rgba(165, 243, 252, 0.3137254902);\n}\n.p-datepicker.dp-year-only {\n box-shadow: none !important;\n}\n.p-datepicker.dp-year-only .dp-header-top-alt {\n display: none !important;\n}\n.p-datepicker.dp-year-only .dp-monthyear-header {\n width: 205px;\n min-width: 205px;\n max-width: 205px;\n}\n.p-datepicker.dp-year-only .dp-monthyear-header .dp-year-container {\n width: 100%;\n}\n.p-datepicker.dp-year-only .dp-year-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container {\n width: 100%;\n border-top: 1px solid #eaeaea;\n height: 51px;\n display: flex;\n align-items: center;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-up {\n border-right: 1px solid #eaeaea;\n border-radius: 0px 0px 0px 5px !important;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-down {\n border-radius: 0px 0px 5px 0px !important;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-year {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 49%;\n border-radius: 0px;\n flex: 1;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-year:hover {\n background-color: rgba(165, 243, 252, 0.3137254902);\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-year-list {\n width: 100%;\n gap: 0px;\n padding: 0px;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item-active {\n width: 100%;\n color: #ffffff !important;\n background-color: #06B6D4 !important;\n border-bottom: 1px solid #06B6D4 !important;\n font-weight: 600;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item {\n background-color: transparent;\n border: none;\n color: black;\n transition: 0s !important;\n height: 25px;\n font-size: 16px;\n border-radius: 0px;\n border-bottom: 1px solid #eaeaea;\n width: 100%;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item:not(.dp-list-item-big) {\n padding: 3px 10px !important;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item:not(.dp-list-item-big):hover {\n background-color: rgba(165, 243, 252, 0.3137254902) !important;\n color: #06B6D4;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item {\n padding: 3px 10px;\n transition: background 0.2s;\n}\n\n.dp-monthyear-mode .p-datepicker-group, .p-datepicker-monthpicker .p-datepicker-group, .dp-year-only .p-datepicker-group {\n padding: 0px !important;\n border: 0px solid transparent !important;\n}\n.dp-monthyear-mode .dp-monthyear-header, .p-datepicker-monthpicker .dp-monthyear-header, .dp-year-only .dp-monthyear-header {\n justify-content: flex-start;\n gap: 0;\n background: linear-gradient(45deg, #ffffff, #ffffff);\n border: 1px solid rgba(255, 255, 255, 0.3294117647);\n border-radius: 8px;\n position: absolute;\n top: 0;\n left: 0;\n padding: 0px !important;\n width: 331px;\n min-width: 331px;\n max-width: 331px;\n}\n.dp-monthyear-mode .dp-header-top-alt, .p-datepicker-monthpicker .dp-header-top-alt, .dp-year-only .dp-header-top-alt {\n width: 100%;\n height: 50px !important;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid #eaeaea;\n}\n.dp-monthyear-mode .dp-header-top-alt .dp-header-top-alt-part:first-child, .p-datepicker-monthpicker .dp-header-top-alt .dp-header-top-alt-part:first-child, .dp-year-only .dp-header-top-alt .dp-header-top-alt-part:first-child {\n border-right: 1px solid #eaeaea;\n}\n.dp-monthyear-mode .dp-header-top-alt .dp-header-top-alt-part, .p-datepicker-monthpicker .dp-header-top-alt .dp-header-top-alt-part, .dp-year-only .dp-header-top-alt .dp-header-top-alt-part {\n width: 49%;\n height: 50px;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n color: black;\n font-size: 16px;\n text-transform: capitalize;\n}\n.dp-monthyear-mode .p-datepicker-calendar-container, .p-datepicker-monthpicker .p-datepicker-calendar-container, .dp-year-only .p-datepicker-calendar-container {\n display: none;\n}\n.dp-monthyear-mode .dp-actions, .p-datepicker-monthpicker .dp-actions, .dp-year-only .dp-actions {\n width: 100%;\n background-color: white;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-radius: 0px 0px 5px 5px;\n padding: 0px 10px 10px 10px;\n}\n.dp-monthyear-mode .dp-actions .p-button:first-child, .p-datepicker-monthpicker .dp-actions .p-button:first-child, .dp-year-only .dp-actions .p-button:first-child {\n border: 0px solid transparent;\n color: #06B6D4;\n}\n.dp-monthyear-mode .dp-actions .p-button:last-child, .p-datepicker-monthpicker .dp-actions .p-button:last-child, .dp-year-only .dp-actions .p-button:last-child {\n background-color: white;\n border: 1px solid #06B6D4;\n color: #06B6D4;\n}\n.dp-monthyear-mode .dp-actions .p-button:last-child:hover, .p-datepicker-monthpicker .dp-actions .p-button:last-child:hover, .dp-year-only .dp-actions .p-button:last-child:hover {\n background-color: #06B6D4;\n color: white;\n}\n.dp-monthyear-mode .dp-actions .p-button, .p-datepicker-monthpicker .dp-actions .p-button, .dp-year-only .dp-actions .p-button {\n padding: 10px 15px;\n}\n.dp-monthyear-mode .dp-actions .p-button .p-button-icon, .p-datepicker-monthpicker .dp-actions .p-button .p-button-icon, .dp-year-only .dp-actions .p-button .p-button-icon {\n display: none;\n}\n.dp-monthyear-mode .dp-header-lists, .p-datepicker-monthpicker .dp-header-lists, .dp-year-only .dp-header-lists {\n width: calc(100% - 20px);\n height: 300px;\n display: flex;\n align-items: flex-start;\n gap: initial;\n padding: 0px;\n margin: 10px;\n}\n.dp-monthyear-mode .dp-month-list, .p-datepicker-monthpicker .dp-month-list, .dp-year-only .dp-month-list {\n transition: none !important;\n border: 1px solid #eaeaea;\n margin: 0px 10px 0px 0px !important;\n gap: 0px;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item-active, .p-datepicker-monthpicker .dp-month-list .dp-list-item-active, .dp-year-only .dp-month-list .dp-list-item-active {\n width: 100%;\n color: #fff !important;\n background-color: #06B6D4 !important;\n border-bottom: 1px solid #06B6D4 !important;\n font-weight: 600;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item, .p-datepicker-monthpicker .dp-month-list .dp-list-item, .dp-year-only .dp-month-list .dp-list-item {\n border: none;\n height: 25px;\n background-color: transparent;\n font-size: 16px;\n text-transform: capitalize;\n border-radius: 0px;\n margin: 0px;\n padding: 3px;\n width: calc(100% - 0px);\n border-bottom: 1px solid #eaeaea;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item:hover, .p-datepicker-monthpicker .dp-month-list .dp-list-item:hover, .dp-year-only .dp-month-list .dp-list-item:hover {\n background-color: rgba(165, 243, 252, 0.3137254902);\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item:last-child, .p-datepicker-monthpicker .dp-month-list .dp-list-item:last-child, .dp-year-only .dp-month-list .dp-list-item:last-child {\n border: none;\n}\n.dp-monthyear-mode .dp-year-container, .p-datepicker-monthpicker .dp-year-container, .dp-year-only .dp-year-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n border: 1px solid #eaeaea;\n}\n.dp-monthyear-mode .dp-year-container .dp-arrow-container, .p-datepicker-monthpicker .dp-year-container .dp-arrow-container, .dp-year-only .dp-year-container .dp-arrow-container {\n width: 100%;\n border-top: 1px solid #eaeaea;\n height: 51px;\n display: flex;\n align-items: center;\n}\n.dp-monthyear-mode .dp-year-container .dp-arrow-container .dp-arrow-up, .p-datepicker-monthpicker .dp-year-container .dp-arrow-container .dp-arrow-up, .dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-up {\n border-right: 1px solid #eaeaea;\n}\n.dp-monthyear-mode .dp-year-container .dp-arrow-container .dp-arrow-year, .p-datepicker-monthpicker .dp-year-container .dp-arrow-container .dp-arrow-year, .dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-year {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 49%;\n border-radius: 0px;\n flex: 1;\n}\n.dp-monthyear-mode .dp-year-container .dp-year-list, .p-datepicker-monthpicker .dp-year-container .dp-year-list, .dp-year-only .dp-year-container .dp-year-list {\n width: 100%;\n gap: 0px;\n padding: 0px;\n}\n.dp-monthyear-mode .dp-year-container .dp-list-item-active, .p-datepicker-monthpicker .dp-year-container .dp-list-item-active, .dp-year-only .dp-year-container .dp-list-item-active {\n width: 100%;\n color: #ffffff !important;\n background-color: #06B6D4 !important;\n border-bottom: 1px solid #06B6D4 !important;\n font-weight: 600;\n}\n.dp-monthyear-mode .dp-year-container .dp-list-item, .p-datepicker-monthpicker .dp-year-container .dp-list-item, .dp-year-only .dp-year-container .dp-list-item {\n background-color: transparent;\n border: none;\n color: black;\n transition: 0s !important;\n height: 25px;\n font-size: 16px;\n border-radius: 0px;\n border-bottom: 1px solid #eaeaea;\n width: 100%;\n padding: 3px 10px;\n}\n.dp-monthyear-mode .dp-year-container .dp-list-item:not(.dp-list-item-big), .p-datepicker-monthpicker .dp-year-container .dp-list-item:not(.dp-list-item-big), .dp-year-only .dp-year-container .dp-list-item:not(.dp-list-item-big) {\n padding: 3px 10px !important;\n}\n.dp-monthyear-mode .dp-year-container .dp-list-item:not(.dp-list-item-big):hover, .p-datepicker-monthpicker .dp-year-container .dp-list-item:not(.dp-list-item-big):hover, .dp-year-only .dp-year-container .dp-list-item:not(.dp-list-item-big):hover {\n background-color: rgba(165, 243, 252, 0.3137254902) !important;\n color: #06B6D4;\n}\n.dp-monthyear-mode .dp-month-list, .dp-monthyear-mode .dp-year-container, .p-datepicker-monthpicker .dp-month-list, .p-datepicker-monthpicker .dp-year-container, .dp-year-only .dp-month-list, .dp-year-only .dp-year-container {\n width: 49%;\n flex: 1;\n margin: 0px;\n background-color: transparent;\n padding: 0px;\n height: 100%;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item, .dp-monthyear-mode .dp-year-container .dp-list-item, .p-datepicker-monthpicker .dp-month-list .dp-list-item, .p-datepicker-monthpicker .dp-year-container .dp-list-item, .dp-year-only .dp-month-list .dp-list-item, .dp-year-only .dp-year-container .dp-list-item {\n cursor: pointer;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item:hover, .dp-monthyear-mode .dp-year-container .dp-list-item:hover, .p-datepicker-monthpicker .dp-month-list .dp-list-item:hover, .p-datepicker-monthpicker .dp-year-container .dp-list-item:hover, .dp-year-only .dp-month-list .dp-list-item:hover, .dp-year-only .dp-year-container .dp-list-item:hover {\n color: #06B6D4;\n border-bottom: 1px solid rgba(165, 243, 252, 0.3137254902);\n}\n.dp-monthyear-mode .dp-month-list:hover, .dp-monthyear-mode .dp-year-container:hover, .p-datepicker-monthpicker .dp-month-list:hover, .p-datepicker-monthpicker .dp-year-container:hover, .dp-year-only .dp-month-list:hover, .dp-year-only .dp-year-container:hover {\n background-color: rgba(255, 255, 255, 0.3137254902);\n}\n\n.p-datepicker {\n padding: 0px;\n background-color: white;\n box-shadow: 1px 2px 26px rgba(0, 0, 0, 0.2117647059);\n width: 321px;\n}\n.p-datepicker .p-datepicker-group-container {\n width: 100%;\n}\n.p-datepicker .p-datepicker-group {\n background: linear-gradient(45deg, rgba(255, 255, 255, 0.7882352941), rgba(255, 255, 255, 0.5294117647));\n border-radius: 8px;\n padding-bottom: 1px;\n}\n.p-datepicker .p-datepicker-header {\n padding: 0px;\n /*position: fixed;\n left: 0;*/\n height: 50px;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid #eaeaea;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-month {\n border-right: 1px solid #eaeaea;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-month .dp-arrow-left {\n border-radius: 7px 0px 0px 0px;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-year .dp-arrow-right {\n border-radius: 0px 7px 0px 0px;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part {\n width: 49%;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part .dp-arrow {\n width: 30px;\n height: 49px;\n min-width: 30px;\n min-height: 49px;\n max-width: 30px;\n max-height: 49px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part .dp-arrow:hover {\n background-color: rgba(165, 243, 252, 0.3137254902);\n color: #06B6D4;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part .dp-label-button {\n width: calc(100% - 60px);\n display: flex;\n align-items: center;\n justify-content: center;\n height: 50px;\n margin: 0px;\n text-transform: capitalize;\n color: #06B6D4;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part .dp-label-button:hover {\n background-color: rgba(165, 243, 252, 0.3137254902);\n font-weight: 800;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part:hover {\n background-color: rgba(255, 255, 255, 0.3137254902);\n}\n.p-datepicker .p-datepicker-calendar-container {\n padding: 10px;\n /* margin-top: 50px;*/\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar {\n margin: 0px;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar thead tr th {\n padding: 2px;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar thead tr th span {\n color: #000000;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr .p-datepicker-today {\n background-color: transparent;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr .p-datepicker-today span {\n background-color: transparent;\n font-weight: 600;\n color: #06B6D4;\n border: 1px solid #06B6D4;\n text-decoration: underline;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td {\n padding: 0px;\n border: 1px solid #f4f4f4;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td .p-highlight {\n color: #e7efff !important;\n background-color: #06B6D4 !important;\n box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3137254902);\n font-weight: 600;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td .p-disabled {\n opacity: 0.3;\n cursor: not-allowed;\n background-color: rgba(217, 217, 217, 0) !important;\n font-size: 12px;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td span {\n margin: 0;\n width: 100%;\n border-radius: 0px;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td span:hover {\n background-color: rgba(165, 243, 252, 0.3137254902) !important;\n color: #06B6D4;\n box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3137254902);\n}\n\n/* WRAPPER GLOBAL */\n.dp-monthyear-header {\n width: 360px;\n background: #ffffff;\n border-radius: 18px;\n padding: 24px 26px;\n box-shadow: 0 8px 26px rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n font-family: Inter, sans-serif;\n gap: 22px;\n}\n\n/* TITRE */\n.dp-header-top-alt .dp-title {\n font-size: 1.55rem;\n font-weight: 700;\n text-align: center;\n color: #1c1c1c;\n margin-bottom: 2px;\n}\n\n/* MOIS */\n.datepickerbook .dp-year-list .dp-list-item:hover {\n background: #9394d8;\n}\n\n.dp-month-list .dp-list-item-active {\n background: #ffffff;\n font-weight: 600;\n}\n\n/* Centrage parfait */\n.dp-year-list {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n padding: 0;\n}\n\n/* Année normale */\n.dp-year-list .dp-list-item {\n font-size: 1.2rem;\n color: #8f8f8f;\n padding: 4px 0;\n cursor: pointer;\n transition: 0.15s;\n}\n\n.dp-year-list .dp-list-item:hover {\n color: #000;\n}\n\n/* FLECHES */\n.dp-arrow-up,\n.dp-arrow-down {\n font-size: 1.5rem;\n color: #333;\n padding: 6px;\n border: none;\n background: none;\n cursor: pointer;\n margin: 4px 0;\n}\n\n/* ACTIONS BAS – GROS BOUTONS */\n.dp-actions {\n display: flex;\n justify-content: center;\n gap: 20px;\n padding-top: 5px;\n padding-bottom: 10px;\n}\n\n/* TITRE MOIS ANNEE */\n.dp-header-top {\n margin: auto;\n}\n\n/*DATEPICKER MENSUEL CUSTOMISE*/\n.p-monthpicker {\n display: none !important;\n margin: auto;\n}\n\n.datepickerbook .p-datepicker-header {\n border: none !important;\n border-bottom: none !important;\n box-shadow: none !important;\n background: transparent !important;\n}\n\n.datepickerbook.p-datepicker {\n padding: 0 !important;\n margin: 0 !important;\n}\n\n/*DATEPICKER ANNUEL CUSTOMISE*/\n.p-yearpicker {\n display: none !important;\n}\n\n.datepickerbook .p-datepicker-footer {\n margin-bottom: 20px;\n}";
13005
13002
  styleInject(css_248z);
13006
13003
 
13007
- var _excluded$3 = ["value", "onChange", "placeholder", "dateFormat", "view", "invalid", "errorMessage", "disabled", "locale", "showTime", "showIcon", "icon", "iconBgButton", "iconPos", "name", "id", "fullWidth", "inputProps", "onBlur", "onSelect", "onClick"];
13004
+ var _excluded$3 = ["value", "onChange", "placeholder", "dateFormat", "view", "invalid", "errorMessage", "disabled", "locale", "showTime", "showIcon", "icon", "iconBgButton", "iconPos", "name", "id", "fullWidth", "inputProps", "onBlur", "onSelect", "onClick", "showClear"];
13008
13005
  var normalizeDate = function normalizeDate(v) {
13009
13006
  if (!v) return null;
13010
13007
  return v instanceof Date ? v : new Date(v);
@@ -13050,7 +13047,9 @@ var DatePicker = function DatePicker(_ref) {
13050
13047
  onBlur = _ref.onBlur,
13051
13048
  onSelect = _ref.onSelect;
13052
13049
  _ref.onClick;
13053
- var rest = _objectWithoutProperties$1(_ref, _excluded$3);
13050
+ var _ref$showClear = _ref.showClear,
13051
+ showClear = _ref$showClear === void 0 ? true : _ref$showClear,
13052
+ rest = _objectWithoutProperties$1(_ref, _excluded$3);
13054
13053
  var _useState = useState(function () {
13055
13054
  return normalizeDate(value);
13056
13055
  }),
@@ -13079,17 +13078,22 @@ var DatePicker = function DatePicker(_ref) {
13079
13078
  _useState10 = _slicedToArray$8(_useState1, 2),
13080
13079
  visibleYears = _useState10[0],
13081
13080
  setVisibleYears = _useState10[1];
13081
+ var _useState11 = useState(false),
13082
+ _useState12 = _slicedToArray$8(_useState11, 2),
13083
+ panelReady = _useState12[0],
13084
+ setPanelReady = _useState12[1];
13082
13085
  var selectedYear = useRef(null);
13086
+ var skipYearReposition = useRef(false);
13083
13087
  var inputRef = useRef(null);
13084
13088
  var calendarRef = useRef(null);
13085
- var _useState11 = useState(null),
13086
- _useState12 = _slicedToArray$8(_useState11, 2);
13087
- _useState12[0];
13088
- _useState12[1];
13089
- var _useState13 = useState(false),
13090
- _useState14 = _slicedToArray$8(_useState13, 2),
13091
- isScrolling = _useState14[0];
13089
+ var _useState13 = useState(null),
13090
+ _useState14 = _slicedToArray$8(_useState13, 2);
13091
+ _useState14[0];
13092
13092
  _useState14[1];
13093
+ var _useState15 = useState(false),
13094
+ _useState16 = _slicedToArray$8(_useState15, 2),
13095
+ isScrolling = _useState16[0];
13096
+ _useState16[1];
13093
13097
  var wheelCooldown = false;
13094
13098
  var scrollListenersRef = useRef([]);
13095
13099
  var panelVisibleRef = useRef(false);
@@ -13097,9 +13101,13 @@ var DatePicker = function DatePicker(_ref) {
13097
13101
  setStory(datePickerStorie(dateFormat));
13098
13102
  }, [dateFormat]);
13099
13103
  useEffect(function () {
13104
+ if (skipYearReposition.current) {
13105
+ skipYearReposition.current = false;
13106
+ return;
13107
+ }
13100
13108
  var current = viewDate || new Date();
13101
13109
  var currentYear = current.getFullYear();
13102
- setVisibleYears([currentYear - 3, currentYear - 2, currentYear - 1, currentYear, currentYear + 1, currentYear + 2]);
13110
+ setVisibleYears([currentYear - 4, currentYear - 3, currentYear - 2, currentYear - 1, currentYear, currentYear + 1, currentYear + 2, currentYear + 3, currentYear + 4, currentYear + 5]);
13103
13111
  selectedYear.current = currentYear;
13104
13112
  }, [viewDate]);
13105
13113
  var datePickerStorie = function datePickerStorie(dateFormat) {
@@ -13179,6 +13187,25 @@ var DatePicker = function DatePicker(_ref) {
13179
13187
  onBlur(e);
13180
13188
  }
13181
13189
  };
13190
+ var handleClear = function handleClear(e) {
13191
+ e.preventDefault();
13192
+ e.stopPropagation();
13193
+ setValeur(null);
13194
+ if (calendarRef.current) {
13195
+ calendarRef.current.hide();
13196
+ }
13197
+ if (onChange) {
13198
+ onChange({
13199
+ value: null
13200
+ });
13201
+ }
13202
+ if (onSelect) {
13203
+ onSelect(null, {
13204
+ type: 'clear',
13205
+ source: 'DatePicker'
13206
+ });
13207
+ }
13208
+ };
13182
13209
  useEffect(function () {
13183
13210
  if (inputRef.current) {
13184
13211
  var event = new Event('datePickerChange', {
@@ -13265,6 +13292,7 @@ var DatePicker = function DatePicker(_ref) {
13265
13292
  });
13266
13293
  };
13267
13294
  var setYearFromList = function setYearFromList(y) {
13295
+ skipYearReposition.current = true;
13268
13296
  setViewDate(function (prev) {
13269
13297
  var base = prev || new Date();
13270
13298
  var next = new Date(base.getTime());
@@ -13523,20 +13551,20 @@ var DatePicker = function DatePicker(_ref) {
13523
13551
  capture: false
13524
13552
  });
13525
13553
  });
13526
- // Le contenu custom (dp-monthyear-header) est en position:absolute →
13527
- // overlay.offsetHeight ≈ 0 → DomHandler.absolutePosition ne détecte pas
13528
- // le dépassement de viewport et positionne toujours vers le bas.
13529
- // On force la hauteur du panel après le rendu du template, puis on repositionne.
13554
+ // La classe dp-ready est retirée à chaque fermeture (handleHide).
13555
+ // La CSS cache .datepickerbook:not(.dp-ready) → panel invisible dès sa création,
13556
+ // avant même le premier paint du navigateur.
13557
+ // On ajoute dp-ready uniquement après avoir repositionné.
13530
13558
  setTimeout(function () {
13531
13559
  var _calendarRef$current2;
13532
- var overlay = (_calendarRef$current2 = calendarRef.current) === null || _calendarRef$current2 === void 0 ? void 0 : _calendarRef$current2.getOverlay();
13533
- if (overlay) {
13534
- var customContent = overlay.querySelector('.dp-monthyear-header');
13535
- if (customContent) {
13536
- overlay.style.minHeight = customContent.offsetHeight + 'px';
13537
- }
13560
+ var currentOverlay = (_calendarRef$current2 = calendarRef.current) === null || _calendarRef$current2 === void 0 ? void 0 : _calendarRef$current2.getOverlay();
13561
+ if (!currentOverlay) return;
13562
+ var customContent = currentOverlay.querySelector('.dp-monthyear-header');
13563
+ if (customContent) {
13564
+ currentOverlay.style.minHeight = customContent.offsetHeight + 'px';
13538
13565
  }
13539
13566
  repositionPanel();
13567
+ setPanelReady(true);
13540
13568
  }, 0);
13541
13569
  };
13542
13570
  var handleHide = function handleHide() {
@@ -13547,15 +13575,18 @@ var DatePicker = function DatePicker(_ref) {
13547
13575
  if (overlay) {
13548
13576
  overlay.style.minHeight = '';
13549
13577
  }
13578
+ setPanelReady(false);
13550
13579
  };
13551
13580
  useEffect(function () {
13552
13581
  return function () {
13553
13582
  cleanupScrollListeners();
13554
13583
  };
13555
13584
  }, []);
13556
- var panelClassName = "datepickerbook" + (mode === "monthYear" ? " dp-monthyear-mode" : "") + (story === "year" ? " dp-year-only" : "");
13585
+ var panelClassName = "datepickerbook" + (mode === "monthYear" ? " dp-monthyear-mode" : "") + (story === "year" ? " dp-year-only" : "") + (panelReady ? " dp-ready" : "");
13557
13586
  return /*#__PURE__*/React__default.createElement("div", {
13558
13587
  className: fullWidth ? "datepicker-fullwidth flex flex-col gap-1" : "flex flex-col gap-1"
13588
+ }, /*#__PURE__*/React__default.createElement("div", {
13589
+ className: "dp-input-wrapper"
13559
13590
  }, /*#__PURE__*/React__default.createElement(CustomCalendar, _extends$A({
13560
13591
  ref: calendarRef,
13561
13592
  inputRef: inputRef,
@@ -13586,7 +13617,15 @@ var DatePicker = function DatePicker(_ref) {
13586
13617
  }, rest, {
13587
13618
  onShow: handleShow,
13588
13619
  onHide: handleHide
13589
- })), invalid && /*#__PURE__*/React__default.createElement("small", {
13620
+ })), showClear && valeur && !disabled && /*#__PURE__*/React__default.createElement("button", {
13621
+ type: "button",
13622
+ className: "dp-clear-btn",
13623
+ onClick: handleClear,
13624
+ tabIndex: -1,
13625
+ "aria-label": "Effacer la date"
13626
+ }, /*#__PURE__*/React__default.createElement("i", {
13627
+ className: "pi pi-times"
13628
+ }))), invalid && /*#__PURE__*/React__default.createElement("small", {
13590
13629
  style: {
13591
13630
  color: 'red',
13592
13631
  fontStyle: 'italic'
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "arengibook",
3
3
  "private": false,
4
- "version": "3.0.3-datepicker.0",
4
+ "version": "3.0.5-datepicker",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",
7
7
  "exports": {