arengibook 3.0.4-datepicker → 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 +32 -24
  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,10 +12998,7 @@ 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 > .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/* 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
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"];
@@ -13081,17 +13078,22 @@ var DatePicker = function DatePicker(_ref) {
13081
13078
  _useState10 = _slicedToArray$8(_useState1, 2),
13082
13079
  visibleYears = _useState10[0],
13083
13080
  setVisibleYears = _useState10[1];
13081
+ var _useState11 = useState(false),
13082
+ _useState12 = _slicedToArray$8(_useState11, 2),
13083
+ panelReady = _useState12[0],
13084
+ setPanelReady = _useState12[1];
13084
13085
  var selectedYear = useRef(null);
13086
+ var skipYearReposition = useRef(false);
13085
13087
  var inputRef = useRef(null);
13086
13088
  var calendarRef = useRef(null);
13087
- var _useState11 = useState(null),
13088
- _useState12 = _slicedToArray$8(_useState11, 2);
13089
- _useState12[0];
13090
- _useState12[1];
13091
- var _useState13 = useState(false),
13092
- _useState14 = _slicedToArray$8(_useState13, 2),
13093
- isScrolling = _useState14[0];
13089
+ var _useState13 = useState(null),
13090
+ _useState14 = _slicedToArray$8(_useState13, 2);
13091
+ _useState14[0];
13094
13092
  _useState14[1];
13093
+ var _useState15 = useState(false),
13094
+ _useState16 = _slicedToArray$8(_useState15, 2),
13095
+ isScrolling = _useState16[0];
13096
+ _useState16[1];
13095
13097
  var wheelCooldown = false;
13096
13098
  var scrollListenersRef = useRef([]);
13097
13099
  var panelVisibleRef = useRef(false);
@@ -13099,9 +13101,13 @@ var DatePicker = function DatePicker(_ref) {
13099
13101
  setStory(datePickerStorie(dateFormat));
13100
13102
  }, [dateFormat]);
13101
13103
  useEffect(function () {
13104
+ if (skipYearReposition.current) {
13105
+ skipYearReposition.current = false;
13106
+ return;
13107
+ }
13102
13108
  var current = viewDate || new Date();
13103
13109
  var currentYear = current.getFullYear();
13104
- 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]);
13105
13111
  selectedYear.current = currentYear;
13106
13112
  }, [viewDate]);
13107
13113
  var datePickerStorie = function datePickerStorie(dateFormat) {
@@ -13286,6 +13292,7 @@ var DatePicker = function DatePicker(_ref) {
13286
13292
  });
13287
13293
  };
13288
13294
  var setYearFromList = function setYearFromList(y) {
13295
+ skipYearReposition.current = true;
13289
13296
  setViewDate(function (prev) {
13290
13297
  var base = prev || new Date();
13291
13298
  var next = new Date(base.getTime());
@@ -13544,20 +13551,20 @@ var DatePicker = function DatePicker(_ref) {
13544
13551
  capture: false
13545
13552
  });
13546
13553
  });
13547
- // Le contenu custom (dp-monthyear-header) est en position:absolute →
13548
- // overlay.offsetHeight ≈ 0 → DomHandler.absolutePosition ne détecte pas
13549
- // le dépassement de viewport et positionne toujours vers le bas.
13550
- // 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é.
13551
13558
  setTimeout(function () {
13552
13559
  var _calendarRef$current2;
13553
- var overlay = (_calendarRef$current2 = calendarRef.current) === null || _calendarRef$current2 === void 0 ? void 0 : _calendarRef$current2.getOverlay();
13554
- if (overlay) {
13555
- var customContent = overlay.querySelector('.dp-monthyear-header');
13556
- if (customContent) {
13557
- overlay.style.minHeight = customContent.offsetHeight + 'px';
13558
- }
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';
13559
13565
  }
13560
13566
  repositionPanel();
13567
+ setPanelReady(true);
13561
13568
  }, 0);
13562
13569
  };
13563
13570
  var handleHide = function handleHide() {
@@ -13568,13 +13575,14 @@ var DatePicker = function DatePicker(_ref) {
13568
13575
  if (overlay) {
13569
13576
  overlay.style.minHeight = '';
13570
13577
  }
13578
+ setPanelReady(false);
13571
13579
  };
13572
13580
  useEffect(function () {
13573
13581
  return function () {
13574
13582
  cleanupScrollListeners();
13575
13583
  };
13576
13584
  }, []);
13577
- 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" : "");
13578
13586
  return /*#__PURE__*/React__default.createElement("div", {
13579
13587
  className: fullWidth ? "datepicker-fullwidth flex flex-col gap-1" : "flex flex-col gap-1"
13580
13588
  }, /*#__PURE__*/React__default.createElement("div", {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "arengibook",
3
3
  "private": false,
4
- "version": "3.0.4-datepicker",
4
+ "version": "3.0.5-datepicker",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",
7
7
  "exports": {