arengibook 3.1.9-datepicker → 3.2.1-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.
- package/dist/index.js +92 -15
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -13210,7 +13210,7 @@ var LOCALES = {
|
|
|
13210
13210
|
}
|
|
13211
13211
|
};
|
|
13212
13212
|
|
|
13213
|
-
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/* 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 width: auto !important;\n min-width: unset !important;\n max-width: unset !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}\n\n.dp-error-message {\n color: red !important;\n font-style: italic !important;\n display: block !important;\n width: 100% !important;\n max-width: 100% !important;\n white-space: normal !important;\n word-break: break-word !important;\n overflow-wrap: break-word !important;\n line-height: 1.4 !important;\n font-size: 0.875rem !important;\n margin-top: 2px !important;\n float: none !important;\n position: static !important;\n}";
|
|
13213
|
+
var css_248z$1 = "@charset \"UTF-8\";\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: scale(0.85);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n@keyframes toastSlideIn {\n from {\n opacity: 0;\n transform: translateX(40px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n@keyframes toastIconPop {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n 60% {\n transform: scale(1.2);\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n }\n}\n@keyframes toastTextSlide {\n from {\n opacity: 0;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\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: #b0b8c4;\n z-index: 1;\n border-radius: 50%;\n line-height: 1;\n}\n.dp-input-wrapper .dp-clear-btn:hover {\n color: #1a1e26;\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/* Application du mixin field sur l'input du Calendar */\n.p-calendar > .p-inputtext {\n font-family: \"Roboto\", sans-serif;\n min-height: 40px;\n padding: 0 12px;\n background: #ffffff;\n border: 1.5px solid #e0e3e8;\n border-radius: 7px;\n color: #1a1e26;\n outline: none;\n transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-calendar > .p-inputtext:hover:not(:focus):not(:focus-within):not([disabled]):not(.is-disabled) {\n border-color: #c8cdd6;\n}\n.p-calendar > .p-inputtext:focus, .p-calendar > .p-inputtext:focus-within, .p-calendar > .p-inputtext.is-open {\n border-color: #3f3f3f;\n box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);\n}\n.p-calendar > .p-inputtext[disabled], .p-calendar > .p-inputtext.is-disabled {\n opacity: 0.45;\n cursor: not-allowed;\n pointer-events: none;\n}\n.p-calendar > .p-inputtext[readonly], .p-calendar > .p-inputtext.is-readonly {\n background: #f4f5f6;\n cursor: default;\n box-shadow: none;\n}\n.p-calendar > .p-inputtext[readonly]:hover, .p-calendar > .p-inputtext.is-readonly:hover {\n border-color: #e0e3e8;\n}\n.p-calendar > .p-inputtext.is-error {\n border-color: #dc2626;\n box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n.p-calendar > .p-inputtext.is-success {\n border-color: #15803d;\n box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.12);\n}\n.p-calendar > .p-inputtext:hover {\n border-color: #c8cdd6 !important;\n}\n.p-calendar > .p-inputtext:focus, .p-calendar > .p-inputtext.p-focus {\n border-color: #3f3f3f !important;\n box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;\n outline: none;\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: #ffffff !important;\n color: #1a1e26 !important;\n border-radius: 7px;\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: #ffffff;\n border: 1px solid #e0e3e8;\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: #f4f5f6;\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: #f4f5f6;\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: #b0b8c4;\n cursor: pointer;\n transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1), background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-datepicker .dp-arrow:hover {\n color: #3f3f3f;\n background-color: rgba(63, 63, 63, 0.08);\n}\n.p-datepicker.dp-year-only {\n box-shadow: none !important;\n width: auto !important;\n min-width: unset !important;\n max-width: unset !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 #e0e3e8;\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 #e0e3e8;\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(63, 63, 63, 0.08);\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: #3f3f3f !important;\n border-bottom: 1px solid #3f3f3f !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: #1a1e26;\n transition: 0s !important;\n height: 25px;\n font-size: 16px;\n border-radius: 0px;\n border-bottom: 1px solid #e0e3e8;\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(63, 63, 63, 0.08) !important;\n color: #3f3f3f;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item {\n padding: 3px 10px;\n transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1);\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: #ffffff;\n border: 1px solid rgba(255, 255, 255, 0.33);\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 #e0e3e8;\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 #e0e3e8;\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: #1a1e26;\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: #ffffff;\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: #3f3f3f;\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: #ffffff;\n border: 1px solid #3f3f3f;\n color: #3f3f3f;\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: #3f3f3f;\n color: #ffffff;\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 #e0e3e8;\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: #ffffff !important;\n background-color: #3f3f3f !important;\n border-bottom: 1px solid #3f3f3f !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 #e0e3e8;\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(63, 63, 63, 0.08);\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 #e0e3e8;\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 #e0e3e8;\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 #e0e3e8;\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: #3f3f3f !important;\n border-bottom: 1px solid #3f3f3f !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: #1a1e26;\n transition: 0s !important;\n height: 25px;\n font-size: 16px;\n border-radius: 0px;\n border-bottom: 1px solid #e0e3e8;\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(63, 63, 63, 0.08) !important;\n color: #3f3f3f;\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: #3f3f3f;\n border-bottom: 1px solid rgba(63, 63, 63, 0.08);\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.31);\n}\n\n.p-datepicker {\n padding: 0px;\n background-color: #ffffff;\n box-shadow: 1px 2px 26px rgba(0, 0, 0, 0.21);\n width: 321px;\n}\n.p-datepicker .p-datepicker-group-container {\n width: 100%;\n}\n.p-datepicker .p-datepicker-group {\n background: #ffffff;\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 #e0e3e8;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-month {\n border-right: 1px solid #e0e3e8;\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(63, 63, 63, 0.08);\n color: #3f3f3f;\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: #3f3f3f;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part .dp-label-button:hover {\n background-color: rgba(63, 63, 63, 0.08);\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.31);\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: #1a1e26;\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: #3f3f3f;\n border: 1px solid #3f3f3f;\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 #f4f5f6;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td .p-highlight {\n color: #ffffff !important;\n background-color: #3f3f3f !important;\n box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.31);\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: transparent !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(63, 63, 63, 0.08) !important;\n color: #3f3f3f;\n box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.31);\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: #1a1e26;\n margin-bottom: 2px;\n}\n\n/* HOVER ANNÉES */\n.datepickerbook .dp-year-list .dp-list-item:hover {\n background: rgba(63, 63, 63, 0.15);\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: #b0b8c4;\n padding: 4px 0;\n cursor: pointer;\n transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.dp-year-list .dp-list-item:hover {\n color: #1a1e26;\n}\n\n/* FLECHES */\n.dp-arrow-up,\n.dp-arrow-down {\n font-size: 1.5rem;\n color: #1a1e26;\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}\n\n.dp-error-message {\n color: red !important;\n font-style: italic !important;\n display: block !important;\n width: 100% !important;\n max-width: 100% !important;\n white-space: normal !important;\n word-break: break-word !important;\n overflow-wrap: break-word !important;\n line-height: 1.4 !important;\n font-size: 0.875rem !important;\n margin-top: 2px !important;\n float: none !important;\n position: static !important;\n}";
|
|
13214
13214
|
styleInject(css_248z$1);
|
|
13215
13215
|
|
|
13216
13216
|
var _excluded$3 = ["value", "onChange", "placeholder", "dateFormat", "displayMask", "view", "invalid", "errorMessage", "disabled", "locale", "showTime", "showIcon", "icon", "iconBgButton", "iconPos", "name", "id", "fullWidth", "inputProps", "onBlur", "onSelect", "onClick", "showClear", "reopenOnClick", "invalidDateMessage"];
|
|
@@ -13916,7 +13916,8 @@ var DatePicker = function DatePicker(_ref) {
|
|
|
13916
13916
|
}, (dateFormat === 'mm/yy' || dateFormat === 'yy') && {
|
|
13917
13917
|
footerTemplate: headerTemplate
|
|
13918
13918
|
}, displayMask && {
|
|
13919
|
-
mask: getMaskFromDateFormat(dateFormat)
|
|
13919
|
+
mask: getMaskFromDateFormat(dateFormat),
|
|
13920
|
+
maskSlotChar: '.'
|
|
13920
13921
|
}, rest, {
|
|
13921
13922
|
onShow: handleShow,
|
|
13922
13923
|
onHide: handleHide
|
|
@@ -37335,7 +37336,7 @@ var Toast$1 = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (in
|
|
|
37335
37336
|
}));
|
|
37336
37337
|
Toast$1.displayName = 'Toast';
|
|
37337
37338
|
|
|
37338
|
-
var css_248z = "@charset \"UTF-8\";\n.p-toast-message {\n height: auto;\n}\n\n.p-toast-message.heightoastlarge {\n min-height: 50px;\n}\n\n.p-toast-message.heightoastmedium {\n max-height: 100px;\n overflow: hidden;\n}\n\n.p-toast-message.toast_s--compact {\n width: 116px;\n min-width: 56px;\n padding-right: 0;\n position: relative;\n}\n\n.p-toast-message.toast_s--compact .p-toast-message-content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0.5rem;\n}\n\n.p-toast-message.toast_s--compact .maximize-button {\n margin-right: 20px;\n}\n\n.p-toast-message.toast_s--compact .p-toast-icon-close {\n position: absolute;\n top: 4px;\n right: 4px;\n}\n\n.p-toast-message.toast_s--large {\n width: auto;\n min-width: auto;\n padding-right: inherit;\n}\n\n.p-toast-message.toast_s--large .p-toast-message-content {\n display: flex;\n align-items: center;\n padding: 1rem;\n gap: 0.75rem;\n}\n\n.p-toast-message .maximize-button-container {\n margin-left: auto;\n display: flex;\n align-items: center;\n}\n\n.p-toast-message.toast_s--large .p-toast-icon-close {\n position: static;\n margin-left: 0.5rem;\n}\n\n/* Title */\n.toast-title {\n font-weight: 600;\n font-size: 0.95rem;\n line-height: 1.3;\n color: #111827; /* gris très foncé / quasi noir */\n margin-bottom: 0.25rem;\n}\n\n.toast-root {\n display: flex;\n align-items: flex-start;\n width: 100%;\n gap: 0.75rem;\n}\n\n.toast-left {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n flex-shrink: 0;\n}\n\n.toast-body {\n line-height: 1.4;\n}\n\n.toast-action-btn {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n}\n\n.p-toast-message-content {\n position: relative;\n}\n\n.p-toast-icon-close {\n position: static;\n}\n\n.toast-left .p-toast-icon-close {\n order: 3;\n}\n\n/* Toast - Percentage */\n.toast-percentage {\n margin-top: 0.5rem;\n width: 100%;\n}\n\n.toast-percentage-label {\n font-size: 0.875rem;\n color: #6B7280;\n margin-bottom: 0.25rem;\n text-align: right;\n width: 100%;\n}\n\n.toast-percentage-bar {\n height: 6px;\n background-color: #E5E7EB;\n border-radius: 999px;\n overflow: hidden;\n width: 100%;\n}\n\n.toast-percentage-bar-fill {\n height: 100%;\n background-color: #3B82F6;\n transition: width 0.3s ease;\n}\n\n/* Link */\n.toast-link {\n margin-top: 0.5rem;\n}\n\n.toast-link a {\n font-size: 0.85rem;\n font-weight: 500;\n color: #2563EB;\n text-decoration: underline;\n}\n\n.toast-link a:hover {\n text-decoration: none;\n}\n\n/* Links */\n.toast-links {\n margin-top: 0.5rem;\n padding-left: 1rem;\n}\n\n.toast-links li {\n margin-bottom: 0.25rem;\n}\n\n.toast-links a {\n font-size: 0.85rem;\n color: #2563EB;\n text-decoration: underline;\n}\n\n.toast-links a:hover {\n text-decoration: none;\n}\n\n.toast-message {\n padding-right: 20px;\n}\n\n.p-toast-message {\n position: relative;\n}\n\n.p-toast-message .p-toast-icon-close {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n}\n\n.p-toast-message .toast-action-btn {\n position: absolute;\n top: 0.5rem;\n right: 2.5rem;\n}\n\n/* AttachedFiles */\n.toast-attached-files {\n margin-top: 0.75rem;\n}\n\n.toast-attached-files-title {\n font-size: 0.75rem;\n font-weight: 600;\n color: #6B7280;\n margin-bottom: 0.25rem;\n}\n\n.toast-attached-files-list {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.toast-attached-files-list li {\n margin-bottom: 0.25rem;\n}\n\n.toast-attached-files-list a {\n display: inline-flex;\n align-items: center;\n gap: 0.35rem;\n font-size: 0.85rem;\n color: #2563EB;\n text-decoration: underline;\n}\n\n.toast-attached-files-list a:hover {\n text-decoration: none;\n}";
|
|
37339
|
+
var css_248z = "@keyframes fadeIn {\n from {\n opacity: 0;\n transform: scale(0.85);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n@keyframes toastSlideIn {\n from {\n opacity: 0;\n transform: translateX(40px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n@keyframes toastIconPop {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n 60% {\n transform: scale(1.2);\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n }\n}\n@keyframes toastTextSlide {\n from {\n opacity: 0;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n.p-toast {\n top: 58px !important;\n right: 0px !important;\n}\n\n.p-toast-message {\n font-family: \"Roboto\", sans-serif;\n position: relative;\n height: auto;\n border-radius: 7px 0px 0px 7px;\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);\n overflow: hidden;\n border: none;\n border-left: 6px solid var(--toast-dark, #3774bc);\n background: var(--toast-bg, #56b6e4) !important;\n color: #ffffff;\n animation: toastSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;\n transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-toast-message:hover::after {\n animation-play-state: paused;\n}\n.p-toast-message::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 0;\n background: var(--toast-dark, #3774bc);\n opacity: 0.15;\n animation: toastTimerBg var(--toast-life, 3s) linear forwards;\n}\n\n@keyframes toastTimerBg {\n from {\n clip-path: inset(0 0 0 0);\n }\n to {\n clip-path: inset(0 100% 0 0);\n }\n}\n.p-toast-message.toast-timer-restart::after {\n animation: none;\n animation: toastTimerBg var(--toast-life, 3s) linear forwards;\n}\n\n@keyframes toastSlideOut {\n 0% {\n opacity: 1;\n transform: translateX(0) scale(1);\n max-height: 200px;\n }\n 50% {\n opacity: 0.3;\n transform: translateX(20px) scale(0.98);\n max-height: 200px;\n }\n 80% {\n opacity: 0;\n transform: translateX(30px) scale(0.97);\n max-height: 200px;\n }\n 100% {\n opacity: 0;\n transform: translateX(30px) scale(0.97);\n max-height: 0;\n margin-bottom: 0;\n }\n}\n.p-toast .p-toast-message.p-toast-message-exit-active {\n animation: toastSlideOut 0.6s ease-out forwards !important;\n overflow: visible !important;\n transition: none !important;\n}\n\n.p-toast-message-success {\n --toast-color: #2c7722;\n --toast-bg: #4ec33d;\n --toast-dark: #2c7722;\n}\n\n.p-toast-message-error {\n --toast-color: #940300;\n --toast-bg: #f12e22;\n --toast-dark: #940300;\n}\n\n.p-toast-message-warn {\n --toast-color: #c37602;\n --toast-bg: #f5b447;\n --toast-dark: #c37602;\n}\n\n.p-toast-message-info {\n --toast-color: #3774bc;\n --toast-bg: #56b6e4;\n --toast-dark: #3774bc;\n}\n\n.p-toast-message.toast-type--processing {\n --toast-color: #7868e6;\n --toast-bg: #b8b5ff;\n --toast-dark: #7868e6;\n}\n.p-toast-message.toast-type--processing .toast-icon-wrapper {\n animation: toastIconPop 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both, toastPulse 3s ease-in-out 0.6s infinite;\n}\n.p-toast-message.toast-type--processing .toast-icon-wrapper i {\n animation: toastCogSpin 5s ease-in-out infinite;\n}\n.p-toast-message.toast-type--processing .toast-icon-wrapper::before, .p-toast-message.toast-type--processing .toast-icon-wrapper::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.6);\n transform: translate(-50%, -50%);\n animation: toastRipple 2.5s ease-out infinite;\n pointer-events: none;\n}\n.p-toast-message.toast-type--processing .toast-icon-wrapper::after {\n animation-delay: 1.2s;\n}\n\n@keyframes toastCogSpin {\n 0%, 70% {\n transform: rotate(0deg);\n }\n 85% {\n transform: rotate(180deg);\n }\n 85.1%, 100% {\n transform: rotate(180deg);\n }\n}\n@keyframes toastPulse {\n 0%, 100% {\n box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);\n }\n 50% {\n box-shadow: 0 0 16px 8px rgba(255, 255, 255, 0.25);\n }\n}\n@keyframes toastRipple {\n 0% {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n opacity: 0.6;\n }\n 100% {\n width: 70px;\n height: 70px;\n border-radius: 50%;\n opacity: 0;\n }\n}\n.p-toast-message.toast-type--warning {\n --toast-color: #c37602;\n --toast-bg: #f5b447;\n --toast-dark: #c37602;\n}\n\n.p-toast-message-content {\n position: relative;\n z-index: 1;\n padding: 9px 8px;\n border-radius: 10px 0px 0px 10px;\n background: transparent;\n}\n\n.p-toast-message .p-toast-icon-close {\n position: absolute;\n top: 10px;\n right: 10px;\n width: 24px;\n height: 24px;\n font-size: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border-radius: 100%;\n background-color: rgba(255, 255, 255, 0.15);\n color: rgba(255, 255, 255, 0.7);\n transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1), background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-toast-message .p-toast-icon-close:hover {\n color: #ffffff;\n background-color: rgba(255, 255, 255, 0.3);\n}\n.p-toast-message .p-toast-icon-close svg, .p-toast-message .p-toast-icon-close .p-icon {\n width: 12px;\n height: 12px;\n}\n\n.toast-actions-top {\n position: absolute;\n top: 10px;\n right: 38px;\n display: flex;\n align-items: center;\n}\n\n.toast-toggle-btn {\n width: 24px;\n height: 24px;\n background-color: rgba(255, 255, 255, 0.15);\n border: none;\n cursor: pointer;\n padding: 0;\n color: rgba(255, 255, 255, 0.7);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 100%;\n transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1), background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.toast-toggle-btn:hover {\n color: #ffffff;\n background-color: rgba(255, 255, 255, 0.3);\n}\n\n.toast-toggle-icon {\n width: 12px;\n height: 12px;\n min-width: 12px;\n min-height: 12px;\n transform: rotate(45deg);\n}\n\n.toast-root {\n display: flex;\n align-items: flex-start;\n width: 100%;\n gap: 12px;\n}\n\n.toast-left {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n.toast-icon-wrapper {\n position: relative;\n width: 32px;\n height: 32px;\n min-width: 32px;\n min-height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: none;\n overflow: visible;\n animation: toastIconPop 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both;\n}\n.toast-icon-wrapper i {\n color: var(--toast-dark, #3774bc);\n font-size: 24px;\n z-index: 1;\n}\n\n.toast-left .p-toast-icon-close {\n order: 3;\n}\n\n.toast-body {\n line-height: 1.5;\n font-size: 0.875rem;\n color: rgba(255, 255, 255, 0.9);\n padding-right: 50px;\n flex: 1;\n min-width: 0;\n animation: toastTextSlide 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;\n}\n\n.toast-title {\n font-weight: 700;\n font-size: 1.1rem;\n line-height: 1.3;\n color: #ffffff;\n margin-bottom: 4px;\n}\n\n.toast-message {\n padding-right: 0;\n color: rgba(255, 255, 255, 0.85);\n font-size: 0.85rem;\n}\n\n.p-toast-message.toast_s--compact {\n width: fit-content;\n min-width: 48px;\n padding-right: 0;\n margin-left: auto;\n margin-right: -66px;\n transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-toast-message.toast_s--compact .p-toast-message-content {\n display: flex;\n align-items: center;\n padding: 8px 10px;\n gap: 6px;\n}\n.p-toast-message.toast_s--compact .toast-actions-top {\n position: static;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.p-toast-message.toast_s--compact .p-toast-icon-close {\n position: relative;\n top: -5px;\n right: 0px;\n flex-shrink: 0;\n}\n.p-toast-message.toast_s--compact:hover {\n margin-right: 0;\n}\n.p-toast-message.toast_s--compact .toast-body {\n padding-right: 0;\n}\n\n.p-toast-message.toast_s--large {\n width: auto;\n min-width: auto;\n max-width: 420px;\n padding-right: inherit;\n}\n.p-toast-message.toast_s--large .p-toast-message-content {\n display: flex;\n align-items: flex-start;\n padding: 16px 18px;\n gap: 12px;\n}\n\n.p-toast-message .maximize-button-container {\n margin-left: auto;\n display: flex;\n align-items: center;\n}\n\n.toast-percentage {\n margin-top: 10px;\n width: 100%;\n}\n\n.toast-percentage-label {\n font-size: 0.8rem;\n color: rgba(255, 255, 255, 0.6);\n margin-bottom: 4px;\n text-align: right;\n width: 100%;\n}\n\n.toast-percentage-bar {\n height: 4px;\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 999px;\n overflow: hidden;\n width: 100%;\n}\n\n.toast-percentage-bar-fill {\n height: 100%;\n background-color: #ffffff;\n border-radius: 999px;\n transition: width 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.toast-link {\n margin-top: 8px;\n}\n\n.toast-link a {\n font-size: 0.8rem;\n font-weight: 500;\n color: #ffffff;\n text-decoration: underline;\n opacity: 0.8;\n transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.toast-link a:hover {\n opacity: 1;\n}\n\n.toast-links {\n margin-top: 8px;\n padding-left: 1rem;\n}\n\n.toast-links li {\n margin-bottom: 4px;\n}\n\n.toast-links a {\n font-size: 0.8rem;\n color: #ffffff;\n text-decoration: underline;\n opacity: 0.8;\n transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.toast-links a:hover {\n opacity: 1;\n}\n\n.toast-attached-files {\n margin-top: 10px;\n}\n\n.toast-attached-files-title {\n font-size: 0.75rem;\n font-weight: 600;\n color: rgba(255, 255, 255, 0.6);\n margin-bottom: 4px;\n}\n\n.toast-attached-files-list {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.toast-attached-files-list li {\n margin-bottom: 4px;\n}\n\n.toast-attached-files-list a {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 0.8rem;\n color: #ffffff;\n text-decoration: underline;\n opacity: 0.8;\n transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.toast-attached-files-list a:hover {\n opacity: 1;\n}\n\n.p-toast-message.heightoastlarge {\n min-height: 50px;\n}\n\n.p-toast-message.heightoastmedium {\n max-height: 100px;\n overflow: hidden;\n}";
|
|
37339
37340
|
styleInject(css_248z);
|
|
37340
37341
|
|
|
37341
37342
|
var ICONS = {
|
|
@@ -37343,7 +37344,7 @@ var ICONS = {
|
|
|
37343
37344
|
error: "pi pi-times-circle",
|
|
37344
37345
|
settingError: "pi pi-cog pi-times-circle",
|
|
37345
37346
|
warning: "pi pi-exclamation-triangle",
|
|
37346
|
-
processing: "pi pi-
|
|
37347
|
+
processing: "pi pi-cog",
|
|
37347
37348
|
info: "pi pi-info-circle"
|
|
37348
37349
|
};
|
|
37349
37350
|
var DEFAULTS = {
|
|
@@ -37352,6 +37353,26 @@ var DEFAULTS = {
|
|
|
37352
37353
|
duration: 3000,
|
|
37353
37354
|
position: 'top-right'
|
|
37354
37355
|
};
|
|
37356
|
+
var UnfoldMoreIcon = function UnfoldMoreIcon() {
|
|
37357
|
+
return /*#__PURE__*/React__default.createElement("svg", {
|
|
37358
|
+
className: "toast-toggle-icon",
|
|
37359
|
+
viewBox: "0 0 24 24",
|
|
37360
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
37361
|
+
}, /*#__PURE__*/React__default.createElement("path", {
|
|
37362
|
+
d: "M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z",
|
|
37363
|
+
fill: "currentColor"
|
|
37364
|
+
}));
|
|
37365
|
+
};
|
|
37366
|
+
var UnfoldLessIcon = function UnfoldLessIcon() {
|
|
37367
|
+
return /*#__PURE__*/React__default.createElement("svg", {
|
|
37368
|
+
className: "toast-toggle-icon",
|
|
37369
|
+
viewBox: "0 0 24 24",
|
|
37370
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
37371
|
+
}, /*#__PURE__*/React__default.createElement("path", {
|
|
37372
|
+
d: "M7.41 18.59L8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z",
|
|
37373
|
+
fill: "currentColor"
|
|
37374
|
+
}));
|
|
37375
|
+
};
|
|
37355
37376
|
var ToastContent = function ToastContent(_ref) {
|
|
37356
37377
|
var type = _ref.type,
|
|
37357
37378
|
title = _ref.title,
|
|
@@ -37372,16 +37393,11 @@ var ToastContent = function ToastContent(_ref) {
|
|
|
37372
37393
|
className: "toast-root"
|
|
37373
37394
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
37374
37395
|
className: "toast-left"
|
|
37396
|
+
}, /*#__PURE__*/React__default.createElement("span", {
|
|
37397
|
+
className: "toast-icon-wrapper"
|
|
37375
37398
|
}, /*#__PURE__*/React__default.createElement("i", {
|
|
37376
37399
|
className: ICONS[type] || ICONS.info,
|
|
37377
37400
|
"aria-hidden": "true"
|
|
37378
|
-
}), showToggleBtn && /*#__PURE__*/React__default.createElement("button", {
|
|
37379
|
-
type: "button",
|
|
37380
|
-
onClick: onToggleSize,
|
|
37381
|
-
"aria-label": isExpanded ? "Réduire" : "Agrandir",
|
|
37382
|
-
className: "toast-action-btn"
|
|
37383
|
-
}, /*#__PURE__*/React__default.createElement("i", {
|
|
37384
|
-
className: isExpanded ? "pi pi-window-minimize" : "pi pi-window-maximize"
|
|
37385
37401
|
}))), size !== "S" && /*#__PURE__*/React__default.createElement("div", {
|
|
37386
37402
|
className: "toast-body"
|
|
37387
37403
|
}, title && /*#__PURE__*/React__default.createElement("div", {
|
|
@@ -37394,7 +37410,14 @@ var ToastContent = function ToastContent(_ref) {
|
|
|
37394
37410
|
__html: message
|
|
37395
37411
|
},
|
|
37396
37412
|
onClick: handleClick
|
|
37397
|
-
})))
|
|
37413
|
+
}))), showToggleBtn && /*#__PURE__*/React__default.createElement("div", {
|
|
37414
|
+
className: "toast-actions-top"
|
|
37415
|
+
}, /*#__PURE__*/React__default.createElement("button", {
|
|
37416
|
+
type: "button",
|
|
37417
|
+
onClick: onToggleSize,
|
|
37418
|
+
"aria-label": isExpanded ? "Réduire" : "Agrandir",
|
|
37419
|
+
className: "toast-toggle-btn"
|
|
37420
|
+
}, isExpanded ? /*#__PURE__*/React__default.createElement(UnfoldLessIcon, null) : /*#__PURE__*/React__default.createElement(UnfoldMoreIcon, null))));
|
|
37398
37421
|
};
|
|
37399
37422
|
var Toast = function Toast(_ref2) {
|
|
37400
37423
|
var message = _ref2.message,
|
|
@@ -37432,11 +37455,11 @@ var Toast = function Toast(_ref2) {
|
|
|
37432
37455
|
if (!toastRef.current || !autoShow) return;
|
|
37433
37456
|
if (hasShownRef.current && !reShowOnPropsChange) return;
|
|
37434
37457
|
toastRef.current.show({
|
|
37435
|
-
severity: type,
|
|
37458
|
+
severity: type === 'processing' ? 'info' : type,
|
|
37436
37459
|
closable: closable,
|
|
37437
37460
|
life: duration,
|
|
37438
37461
|
sticky: sticky,
|
|
37439
|
-
className: sizeClass,
|
|
37462
|
+
className: "".concat(sizeClass, " toast-type--").concat(type),
|
|
37440
37463
|
content: function content() {
|
|
37441
37464
|
return /*#__PURE__*/React__default.createElement(ToastContent, {
|
|
37442
37465
|
type: type,
|
|
@@ -37451,7 +37474,46 @@ var Toast = function Toast(_ref2) {
|
|
|
37451
37474
|
}
|
|
37452
37475
|
});
|
|
37453
37476
|
hasShownRef.current = true;
|
|
37477
|
+
|
|
37478
|
+
// ────────────────────────────────────────────────────────
|
|
37479
|
+
// Injection de --toast-life sur le message pour synchroniser
|
|
37480
|
+
// l'animation du background timer (SCSS) avec la durée réelle.
|
|
37481
|
+
// PrimeToast ne supporte pas le style inline sur show(),
|
|
37482
|
+
// donc on le set manuellement après le render.
|
|
37483
|
+
// ────────────────────────────────────────────────────────
|
|
37484
|
+
if (duration && !sticky) {
|
|
37485
|
+
setTimeout(function () {
|
|
37486
|
+
var _toastRef$current2;
|
|
37487
|
+
var container = (_toastRef$current2 = toastRef.current) === null || _toastRef$current2 === void 0 ? void 0 : _toastRef$current2.getElement();
|
|
37488
|
+
if (!container) return;
|
|
37489
|
+
var messages = container.querySelectorAll('.p-toast-message');
|
|
37490
|
+
var lastMessage = messages[messages.length - 1];
|
|
37491
|
+
if (lastMessage) {
|
|
37492
|
+
lastMessage.style.setProperty('--toast-life', duration + 'ms');
|
|
37493
|
+
}
|
|
37494
|
+
}, 0);
|
|
37495
|
+
}
|
|
37454
37496
|
}, [message, type, closable, duration, autoShow, reShowOnPropsChange, title, sticky, closeOnLinkClick, size, sizeModulable, isExpanded]);
|
|
37497
|
+
|
|
37498
|
+
// ────────────────────────────────────────────────────────
|
|
37499
|
+
// Mise à jour de --toast-life quand duration change
|
|
37500
|
+
// (ex: l'utilisateur modifie le slider duration dans Storybook)
|
|
37501
|
+
// On toggle une classe pour forcer le restart de l'animation
|
|
37502
|
+
// du ::after (le background timer).
|
|
37503
|
+
// ────────────────────────────────────────────────────────
|
|
37504
|
+
useEffect(function () {
|
|
37505
|
+
var _toastRef$current3;
|
|
37506
|
+
if (!duration || sticky) return;
|
|
37507
|
+
var container = (_toastRef$current3 = toastRef.current) === null || _toastRef$current3 === void 0 ? void 0 : _toastRef$current3.getElement();
|
|
37508
|
+
if (!container) return;
|
|
37509
|
+
var messages = container.querySelectorAll('.p-toast-message');
|
|
37510
|
+
messages.forEach(function (msg) {
|
|
37511
|
+
msg.style.setProperty('--toast-life', duration + 'ms');
|
|
37512
|
+
msg.classList.remove('toast-timer-restart');
|
|
37513
|
+
void msg.offsetHeight;
|
|
37514
|
+
msg.classList.add('toast-timer-restart');
|
|
37515
|
+
});
|
|
37516
|
+
}, [duration, sticky]);
|
|
37455
37517
|
return /*#__PURE__*/React__default.createElement(Toast$1, {
|
|
37456
37518
|
ref: toastRef,
|
|
37457
37519
|
position: position
|
|
@@ -37490,9 +37552,10 @@ var showToast = function showToast(_ref3) {
|
|
|
37490
37552
|
setTimeout(function () {
|
|
37491
37553
|
var _toastRef;
|
|
37492
37554
|
(_toastRef = toastRef) === null || _toastRef === void 0 || _toastRef.show({
|
|
37493
|
-
severity: type,
|
|
37555
|
+
severity: type === 'processing' ? 'info' : type,
|
|
37494
37556
|
life: duration,
|
|
37495
37557
|
sticky: sticky,
|
|
37558
|
+
className: "toast-type--".concat(type),
|
|
37496
37559
|
closable: closable,
|
|
37497
37560
|
content: function content() {
|
|
37498
37561
|
return /*#__PURE__*/React__default.createElement(ToastContent, {
|
|
@@ -37503,6 +37566,20 @@ var showToast = function showToast(_ref3) {
|
|
|
37503
37566
|
});
|
|
37504
37567
|
}
|
|
37505
37568
|
});
|
|
37569
|
+
|
|
37570
|
+
// Injection de --toast-life (voir commentaire dans le composant Toast)
|
|
37571
|
+
if (duration && !sticky) {
|
|
37572
|
+
setTimeout(function () {
|
|
37573
|
+
var _container;
|
|
37574
|
+
var el = (_container = container) === null || _container === void 0 ? void 0 : _container.querySelector('.p-toast');
|
|
37575
|
+
if (!el) return;
|
|
37576
|
+
var messages = el.querySelectorAll('.p-toast-message');
|
|
37577
|
+
var lastMessage = messages[messages.length - 1];
|
|
37578
|
+
if (lastMessage) {
|
|
37579
|
+
lastMessage.style.setProperty('--toast-life', duration + 'ms');
|
|
37580
|
+
}
|
|
37581
|
+
}, 50);
|
|
37582
|
+
}
|
|
37506
37583
|
}, 0);
|
|
37507
37584
|
};
|
|
37508
37585
|
if (typeof window !== 'undefined') {
|