allaw-ui 4.7.9 → 4.8.1

package/dist/components/atoms/datepickers/Datepicker.d.ts

@@ -13,6 +13,7 @@ export interface DatepickerProps {
     disableFutur?: Boolean;
     mode?: "button" | "input";
     onError?: (err: string) => void;
+    isPrefilled?: boolean;
 }
 declare const Datepicker: React.FC<DatepickerProps>;
 export default Datepicker;

package/dist/components/atoms/datepickers/Datepicker.js

@@ -20,8 +20,8 @@ import { fr } from "date-fns/locale";
 import { format } from "date-fns";
 import TinyInfo from "../typography/TinyInfo";
 var CustomInput = forwardRef(function (_a, ref) {
-    var value = _a.value, onClick = _a.onClick, placeholder = _a.placeholder;
-    var _b = useState(placeholder), displayedPlaceholder = _b[0], setDisplayedPlaceholder = _b[1];
+    var value = _a.value, onClick = _a.onClick, placeholder = _a.placeholder, _b = _a.isPrefilled, isPrefilled = _b === void 0 ? false : _b;
+    var _c = useState(placeholder), displayedPlaceholder = _c[0], setDisplayedPlaceholder = _c[1];
     var containerRef = useRef(null);
     var testRef = useRef(null);
     useEffect(function () {
@@ -41,7 +41,11 @@ var CustomInput = forwardRef(function (_a, ref) {
         window.addEventListener("resize", checkTextFit);
         return function () { return window.removeEventListener("resize", checkTextFit); };
     }, [placeholder]);
-    return (React.createElement("button", { type: "button", className: "datepicker", onClick: onClick, ref: ref },
+    return (React.createElement("button", { type: "button", className: "datepicker ".concat(isPrefilled
+            ? (value === null || value === void 0 ? void 0 : value.trim())
+                ? "datepicker-prefilled"
+                : "datepicker-prefilled-empty"
+            : ""), onClick: onClick, ref: ref },
         React.createElement("span", { className: "datepicker-content", ref: containerRef },
             React.createElement("span", { className: "datepicker-text" }, value || displayedPlaceholder),
             React.createElement("i", { className: "datepicker-icon allaw-icon-calendar" })),
@@ -49,10 +53,10 @@ var CustomInput = forwardRef(function (_a, ref) {
 });
 CustomInput.displayName = "CustomInput";
 var CustomInputField = forwardRef(function (_a, ref) {
-    var value = _a.value, onChange = _a.onChange, onCalendarClick = _a.onCalendarClick, placeholder = _a.placeholder, onBlur = _a.onBlur, error = _a.error, onError = _a.onError;
-    var _b = useState(value || ""), inputValue = _b[0], setInputValue = _b[1];
-    var _c = useState(false), isTouched = _c[0], setIsTouched = _c[1];
-    var _d = useState(error || ""), localError = _d[0], setLocalError = _d[1];
+    var value = _a.value, onChange = _a.onChange, onCalendarClick = _a.onCalendarClick, placeholder = _a.placeholder, onBlur = _a.onBlur, error = _a.error, onError = _a.onError, _b = _a.isPrefilled, isPrefilled = _b === void 0 ? false : _b;
+    var _c = useState(value || ""), inputValue = _c[0], setInputValue = _c[1];
+    var _d = useState(false), isTouched = _d[0], setIsTouched = _d[1];
+    var _e = useState(error || ""), localError = _e[0], setLocalError = _e[1];
     var inputRef = useRef(null);
     useEffect(function () {
         setInputValue(value || "");
@@ -104,7 +108,11 @@ var CustomInputField = forwardRef(function (_a, ref) {
             onError(err);
     };
     return (React.createElement("div", { style: { width: "100%" } },
-        React.createElement("div", { className: "datepicker-input-wrapper" },
+        React.createElement("div", { className: "datepicker-input-wrapper ".concat(isPrefilled
+                ? inputValue.trim()
+                    ? "datepicker-input-wrapper-prefilled"
+                    : "datepicker-input-wrapper-prefilled-empty"
+                : "") },
             React.createElement("input", { ref: inputRef, type: "text", inputMode: "numeric", pattern: "\\d{2}/\\d{2}/\\d{4}", maxLength: 10, className: "datepicker-input ".concat(localError && isTouched ? "datepicker-input-error" : ""), placeholder: placeholder, value: inputValue, onChange: handleInput, onBlur: handleBlur, autoComplete: "off", "data-form-type": "other", "data-lpignore": "true", "data-1p-ignore": true }),
             React.createElement("button", { type: "button", className: "datepicker-input-icon", tabIndex: -1, onClick: onCalendarClick },
                 React.createElement("i", { className: "datepicker-icon allaw-icon-calendar" }))),
@@ -112,14 +120,14 @@ var CustomInputField = forwardRef(function (_a, ref) {
 });
 CustomInputField.displayName = "CustomInputField";
 var Datepicker = function (_a) {
-    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b, _c = _a.yearDropdownItemNumber, yearDropdownItemNumber = _c === void 0 ? 10 : _c, maxDaysInPast = _a.maxDaysInPast, minDate = _a.minDate, maxDate = _a.maxDate, _d = _a.disableFutur, disableFutur = _d === void 0 ? true : _d, _e = _a.mode, mode = _e === void 0 ? "button" : _e, onError = _a.onError;
-    var _f = useState(value), selectedDate = _f[0], setSelectedDate = _f[1];
-    var _g = useState(false), isOpen = _g[0], setIsOpen = _g[1];
-    var _h = useState({ top: 0, left: 0 }), position = _h[0], setPosition = _h[1];
+    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b, _c = _a.yearDropdownItemNumber, yearDropdownItemNumber = _c === void 0 ? 10 : _c, maxDaysInPast = _a.maxDaysInPast, minDate = _a.minDate, maxDate = _a.maxDate, _d = _a.disableFutur, disableFutur = _d === void 0 ? true : _d, _e = _a.mode, mode = _e === void 0 ? "button" : _e, onError = _a.onError, _f = _a.isPrefilled, isPrefilled = _f === void 0 ? false : _f;
+    var _g = useState(value), selectedDate = _g[0], setSelectedDate = _g[1];
+    var _h = useState(false), isOpen = _h[0], setIsOpen = _h[1];
+    var _j = useState({ top: 0, left: 0 }), position = _j[0], setPosition = _j[1];
     var buttonRef = useRef(null);
     var calendarRef = useRef(null);
-    var _j = useState("bottom"), placement = _j[0], setPlacement = _j[1];
-    var _k = useState(""), inputError = _k[0], setInputError = _k[1];
+    var _k = useState("bottom"), placement = _k[0], setPlacement = _k[1];
+    var _l = useState(""), inputError = _l[0], setInputError = _l[1];
     useEffect(function () {
         setSelectedDate(value);
     }, [value]);
@@ -217,9 +225,9 @@ var Datepicker = function (_a) {
             }, onCalendarClick: function () { return setIsOpen(!isOpen); }, placeholder: placeholder, error: inputError, onBlur: function () {
                 if (!selectedDate)
                     setInputError("Date invalide");
-            }, onError: onError })) : (React.createElement(CustomInput, { value: selectedDate
+            }, onError: onError, isPrefilled: isPrefilled })) : (React.createElement(CustomInput, { value: selectedDate
                 ? format(selectedDate, "dd MMMM yyyy", { locale: fr })
-                : "", onClick: function () { return setIsOpen(!isOpen); }, placeholder: placeholder })),
+                : "", onClick: function () { return setIsOpen(!isOpen); }, placeholder: placeholder, isPrefilled: isPrefilled })),
         isOpen &&
             ReactDOM.createPortal(React.createElement("div", { ref: calendarRef, className: "datepicker-portal ".concat(placement, " datepicker-portal-animated"), style: __assign({ left: "".concat(position.left, "px") }, (placement === "bottom"
                     ? { top: "".concat(position.top, "px") }

package/dist/components/atoms/datepickers/Datepicker.stories.d.ts

@@ -50,6 +50,12 @@ declare namespace _default {
             let defaultValue_1: string;
             export { defaultValue_1 as defaultValue };
         }
+        namespace isPrefilled {
+            let control_4: string;
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
     }
 }
 export default _default;
@@ -58,6 +64,8 @@ export namespace Default {
         export let placeholder: string;
         let yearDropdownItemNumber_1: number;
         export { yearDropdownItemNumber_1 as yearDropdownItemNumber };
+        let isPrefilled_1: boolean;
+        export { isPrefilled_1 as isPrefilled };
     }
 }
 export namespace WithValue {
@@ -108,4 +116,52 @@ export namespace InputMode {
     }
     export { args_5 as args };
 }
+export namespace PrefilledButton {
+    export namespace args_6 {
+        let value_1: Date;
+        export { value_1 as value };
+        let placeholder_6: string;
+        export { placeholder_6 as placeholder };
+        let mode_2: string;
+        export { mode_2 as mode };
+        let isPrefilled_2: boolean;
+        export { isPrefilled_2 as isPrefilled };
+    }
+    export { args_6 as args };
+}
+export namespace PrefilledButtonEmpty {
+    export namespace args_7 {
+        let placeholder_7: string;
+        export { placeholder_7 as placeholder };
+        let mode_3: string;
+        export { mode_3 as mode };
+        let isPrefilled_3: boolean;
+        export { isPrefilled_3 as isPrefilled };
+    }
+    export { args_7 as args };
+}
+export namespace PrefilledInput {
+    export namespace args_8 {
+        let value_2: Date;
+        export { value_2 as value };
+        let placeholder_8: string;
+        export { placeholder_8 as placeholder };
+        let mode_4: string;
+        export { mode_4 as mode };
+        let isPrefilled_4: boolean;
+        export { isPrefilled_4 as isPrefilled };
+    }
+    export { args_8 as args };
+}
+export namespace PrefilledInputEmpty {
+    export namespace args_9 {
+        let placeholder_9: string;
+        export { placeholder_9 as placeholder };
+        let mode_5: string;
+        export { mode_5 as mode };
+        let isPrefilled_5: boolean;
+        export { isPrefilled_5 as isPrefilled };
+    }
+    export { args_9 as args };
+}
 import Datepicker from "./Datepicker";

package/dist/components/atoms/datepickers/Datepicker.stories.js

@@ -36,12 +36,17 @@ export default {
             description: "Mode d'affichage du sélecteur (bouton ou champ de saisie)",
             defaultValue: "button",
         },
+        isPrefilled: {
+            control: "boolean",
+            description: "Affiche une bordure bleue pour indiquer un champ pré-rempli",
+        },
     },
 };
 export var Default = {
     args: {
         placeholder: "Sélectionner une date",
         yearDropdownItemNumber: 10,
+        isPrefilled: false,
     },
 };
 export var WithValue = {
@@ -76,3 +81,33 @@ export var InputMode = {
         placeholder: "jj/mm/aaaa",
     },
 };
+export var PrefilledButton = {
+    args: {
+        value: new Date("2024-03-15"),
+        placeholder: "Sélectionner une date",
+        mode: "button",
+        isPrefilled: true,
+    },
+};
+export var PrefilledButtonEmpty = {
+    args: {
+        placeholder: "Champ pré-rempli vide",
+        mode: "button",
+        isPrefilled: true,
+    },
+};
+export var PrefilledInput = {
+    args: {
+        value: new Date("2024-03-15"),
+        placeholder: "jj/mm/aaaa",
+        mode: "input",
+        isPrefilled: true,
+    },
+};
+export var PrefilledInputEmpty = {
+    args: {
+        placeholder: "jj/mm/aaaa pré-rempli vide",
+        mode: "input",
+        isPrefilled: true,
+    },
+};

package/dist/components/atoms/datepickers/datepicker.css

@@ -334,3 +334,47 @@
     transform: scale(1);
   }
 }
+
+/* Nouveaux styles pour la fonctionnalité isPrefilled */
+
+/* Style prefilled pour le mode button */
+.datepicker-prefilled {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.datepicker-prefilled-empty {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.datepicker-prefilled:hover {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.datepicker-prefilled-empty:hover {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+/* Style prefilled pour le mode input */
+.datepicker-input-wrapper-prefilled {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.datepicker-input-wrapper-prefilled-empty {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.datepicker-input-wrapper-prefilled:hover {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.datepicker-input-wrapper-prefilled-empty:hover {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.datepicker-input-wrapper-prefilled:focus-within {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.datepicker-input-wrapper-prefilled-empty:focus-within {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}

package/dist/components/atoms/inputs/TextArea.css

@@ -176,3 +176,31 @@
   padding-top: 4px;
   padding-left: 14px;
 }
+
+/* Nouveaux styles pour la fonctionnalité isPrefilled */
+
+/* Style prefilled - champ rempli */
+.text-area-prefilled {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+/* Style prefilled - champ vide */
+.text-area-prefilled-empty {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.text-area-prefilled:hover {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.text-area-prefilled-empty:hover {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.text-area-prefilled:focus-within {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.text-area-prefilled-empty:focus-within {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}

package/dist/components/atoms/inputs/TextArea.d.ts

@@ -17,6 +17,7 @@ export interface TextAreaProps {
     variant?: "bold" | "semiBold" | "medium";
     color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
     dataTestId?: string;
+    isPrefilled?: boolean;
 }
 export interface TextAreaRef {
     validate: () => boolean;

package/dist/components/atoms/inputs/TextArea.js

@@ -6,10 +6,10 @@ import Paragraph from "../typography/Paragraph";
 import TinyInfo from "../typography/TinyInfo";
 import "./TextArea.css";
 var TextArea = forwardRef(function (_a, ref) {
-    var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, propError = _a.error, _d = _a.maxHeight, maxHeight = _d === void 0 ? 400 : _d, minHeight = _a.minHeight, _e = _a.variant, variant = _e === void 0 ? "medium" : _e, _f = _a.color, color = _f === void 0 ? "noir" : _f, dataTestId = _a.dataTestId;
-    var _g = useState(propValue || ""), value = _g[0], setValue = _g[1];
-    var _h = useState(propError || ""), error = _h[0], setError = _h[1];
-    var _j = useState(false), isTouched = _j[0], setIsTouched = _j[1];
+    var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, propError = _a.error, _d = _a.maxHeight, maxHeight = _d === void 0 ? 400 : _d, minHeight = _a.minHeight, _e = _a.variant, variant = _e === void 0 ? "medium" : _e, _f = _a.color, color = _f === void 0 ? "noir" : _f, dataTestId = _a.dataTestId, _g = _a.isPrefilled, isPrefilled = _g === void 0 ? false : _g;
+    var _h = useState(propValue || ""), value = _h[0], setValue = _h[1];
+    var _j = useState(propError || ""), error = _j[0], setError = _j[1];
+    var _k = useState(false), isTouched = _k[0], setIsTouched = _k[1];
     var textareaRef = useRef(null);
     useEffect(function () {
         setValue(propValue || "");
@@ -79,7 +79,11 @@ var TextArea = forwardRef(function (_a, ref) {
                 "\u00A0",
                 "*"))),
         React.createElement("div", { className: "text-area-container" },
-            React.createElement("div", { className: "text-area-input", "data-testid": dataTestId || "text-area" },
+            React.createElement("div", { className: "text-area-input ".concat(isPrefilled
+                    ? value.trim()
+                        ? "text-area-prefilled"
+                        : "text-area-prefilled-empty"
+                    : ""), "data-testid": dataTestId || "text-area" },
                 React.createElement("textarea", { ref: textareaRef, placeholder: placeholder, className: minHeight !== undefined
                         ? "text-area-placeholder no-transition"
                         : "text-area-placeholder", value: value, onChange: handleChange, onBlur: handleBlur, style: textareaStyle, "data-testid": dataTestId || "text-area" })),

package/dist/components/atoms/selects/Select.d.ts

@@ -18,6 +18,7 @@ export interface SelectProps<T extends string | string[]> {
     onChange?: (selected: T) => void;
     onError?: (error: string) => void;
     maxLines?: false | number;
+    isPrefilled?: boolean;
 }
 export interface SelectRef {
     validate: () => boolean;

package/dist/components/atoms/selects/Select.js

@@ -14,21 +14,21 @@ import "../../../styles/global.css";
 import TinyInfo from "../typography/TinyInfo";
 function Select(_a, ref) {
     var _b;
-    var items = _a.items, selectedItem = _a.selectedItem, _c = _a.placeholder, placeholder = _c === void 0 ? "Choisir..." : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.showError, showError = _f === void 0 ? false : _f, _g = _a.width, width = _g === void 0 ? 100 : _g, maxItems = _a.maxItems, _h = _a.requireAttention, requireAttention = _h === void 0 ? false : _h, _j = _a.disabledItems, disabledItems = _j === void 0 ? [] : _j, onChange = _a.onChange, onError = _a.onError, _k = _a.maxLines, maxLines = _k === void 0 ? false : _k;
-    var _l = useState(false), isOpen = _l[0], setIsOpen = _l[1];
-    var _m = useState((multiple ? selectedItem || [] : selectedItem || "")), selected = _m[0], setSelected = _m[1];
-    var _o = useState(""), error = _o[0], setError = _o[1];
+    var items = _a.items, selectedItem = _a.selectedItem, _c = _a.placeholder, placeholder = _c === void 0 ? "Choisir..." : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.showError, showError = _f === void 0 ? false : _f, _g = _a.width, width = _g === void 0 ? 100 : _g, maxItems = _a.maxItems, _h = _a.requireAttention, requireAttention = _h === void 0 ? false : _h, _j = _a.disabledItems, disabledItems = _j === void 0 ? [] : _j, onChange = _a.onChange, onError = _a.onError, _k = _a.maxLines, maxLines = _k === void 0 ? false : _k, _l = _a.isPrefilled, isPrefilled = _l === void 0 ? false : _l;
+    var _m = useState(false), isOpen = _m[0], setIsOpen = _m[1];
+    var _o = useState((multiple ? selectedItem || [] : selectedItem || "")), selected = _o[0], setSelected = _o[1];
+    var _p = useState(""), error = _p[0], setError = _p[1];
     var selectRef = useRef(null);
     var listRef = useRef(null);
     var tagContainerRef = useRef(null);
-    var _p = useState([]), visibleTags = _p[0], setVisibleTags = _p[1];
-    var _q = useState(0), hiddenCount = _q[0], setHiddenCount = _q[1];
-    var _r = useState({
+    var _q = useState([]), visibleTags = _q[0], setVisibleTags = _q[1];
+    var _r = useState(0), hiddenCount = _r[0], setHiddenCount = _r[1];
+    var _s = useState({
         top: 0,
         left: 0,
         width: 0,
-    }), listPosition = _r[0], setListPosition = _r[1];
-    var _s = useState("bottom"), placement = _s[0], setPlacement = _s[1];
+    }), listPosition = _s[0], setListPosition = _s[1];
+    var _t = useState("bottom"), placement = _t[0], setPlacement = _t[1];
     useEffect(function () {
         setSelected((multiple ? selectedItem || [] : selectedItem || ""));
     }, [selectedItem, multiple]);
@@ -233,7 +233,13 @@ function Select(_a, ref) {
         validate: function () { return validateSelect(selected); },
     }); });
     return (React.createElement("div", { ref: selectRef, className: "".concat(styles.selectContainer, " ").concat(isOpen ? styles.selectPressed : ""), style: { width: "".concat(width, "%") } },
-        React.createElement("button", { type: "button", className: "".concat(styles.select, " ").concat(isOpen ? styles.selectPressed : styles.selectDefault, " ").concat(multiple ? styles.selectMultiple : styles.selectSingle, " ").concat(requireAttention ? styles.selectRequireAttention : ""), onClick: toggleOpen, style: { width: "100%" } },
+        React.createElement("button", { type: "button", className: "".concat(styles.select, " ").concat(isOpen ? styles.selectPressed : styles.selectDefault, " ").concat(multiple ? styles.selectMultiple : styles.selectSingle, " ").concat(requireAttention ? styles.selectRequireAttention : "", " ").concat(isPrefilled
+                ? Array.isArray(selected) && selected.length > 0
+                    ? styles.selectPrefilled
+                    : !Array.isArray(selected) && selected
+                        ? styles.selectPrefilled
+                        : styles.selectPrefilledEmpty
+                : ""), onClick: toggleOpen, style: { width: "100%" } },
             React.createElement("span", { className: "".concat(styles.selectText, " ").concat(maxLines !== false ? styles.selectTextClamp : ""), style: maxLines !== false
                     ? { WebkitLineClamp: maxLines }
                     : undefined }, Array.isArray(selected) && selected.length > 0

package/dist/components/atoms/selects/Select.module.css

@@ -240,3 +240,31 @@
     transform: scale(1);
   }
 }
+
+/* Nouveaux styles pour la fonctionnalité isPrefilled */
+
+/* Style prefilled - champ rempli */
+.selectPrefilled {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+/* Style prefilled - champ vide */
+.selectPrefilledEmpty {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.selectPrefilled:hover {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.selectPrefilledEmpty:hover {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.selectPrefilled:focus {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.selectPrefilledEmpty:focus {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}

package/dist/components/atoms/selects/Select.stories.d.ts

@@ -88,6 +88,12 @@ declare namespace _default {
             export { control_9 as control };
             export let description: string;
         }
+        namespace isPrefilled {
+            let control_10: string;
+            export { control_10 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
     }
     export namespace parameters {
         namespace backgrounds {
@@ -122,4 +128,6 @@ export const RequireAttention: any;
 export const TwoLines: any;
 export const WithDisabledItems: any;
 export const MultipleWithDisabledItems: any;
+export const Prefilled: any;
+export const PrefilledEmpty: any;
 import Select from "./Select";

package/dist/components/atoms/selects/Select.stories.js

@@ -81,6 +81,10 @@ export default {
             },
             description: "Nombre de lignes max affichées (laisser vide pour 1 ligne)",
         },
+        isPrefilled: {
+            control: "boolean",
+            description: "Affiche une bordure bleue pour indiquer un champ pré-rempli",
+        },
     },
     parameters: {
         backgrounds: {
@@ -130,6 +134,7 @@ Default.args = {
     requireAttention: false,
     width: 100,
     maxLines: undefined,
+    isPrefilled: false,
 };
 export var Pressed = Template.bind({});
 Pressed.args = {
@@ -256,3 +261,39 @@ MultipleWithDisabledItems.args = {
     maxItems: 4,
     width: 100,
 };
+export var Prefilled = Template.bind({});
+Prefilled.args = {
+    items: [
+        { label: "Lundi 12 août", value: "lundi-12-aout" },
+        { label: "Mardi 13 août", value: "mardi-13-aout" },
+        { label: "Mercredi 14 août", value: "mercredi-14-aout" },
+        { label: "Jeudi 15 août", value: "jeudi-15-aout" },
+        { label: "Vendredi 16 août", value: "vendredi-16-aout" },
+        { label: "Samedi 17 août", value: "samedi-17-aout" },
+    ],
+    selectedItem: "mardi-13-aout",
+    placeholder: "Select...",
+    multiple: false,
+    isRequired: false,
+    requireAttention: false,
+    width: 100,
+    isPrefilled: true,
+};
+export var PrefilledEmpty = Template.bind({});
+PrefilledEmpty.args = {
+    items: [
+        { label: "Lundi 12 août", value: "lundi-12-aout" },
+        { label: "Mardi 13 août", value: "mardi-13-aout" },
+        { label: "Mercredi 14 août", value: "mercredi-14-aout" },
+        { label: "Jeudi 15 août", value: "jeudi-15-aout" },
+        { label: "Vendredi 16 août", value: "vendredi-16-aout" },
+        { label: "Samedi 17 août", value: "samedi-17-aout" },
+    ],
+    selectedItem: "",
+    placeholder: "Champ pré-rempli vide...",
+    multiple: false,
+    isRequired: false,
+    requireAttention: false,
+    width: 100,
+    isPrefilled: true,
+};

package/dist/components/molecules/AiText/aiText.js

@@ -6,11 +6,6 @@ var AiText = function (_a) {
     return (React.createElement("div", { className: "".concat(styles.wrapper, " ").concat(className || "") },
         React.createElement("div", { className: styles.glowContainer },
             React.createElement("div", { className: "".concat(styles.glowLayer, " ").concat(styles.glowLayer1) }),
-            React.createElement("div", { className: "".concat(styles.glowLayer, " ").concat(styles.glowLayer2) }),
-            React.createElement("div", { className: "".concat(styles.glowLayer, " ").concat(styles.glowLayer3) }),
-            React.createElement("div", { className: "".concat(styles.glowLayer, " ").concat(styles.glowLayer4) }),
-            React.createElement("div", { className: "".concat(styles.glowLayer, " ").concat(styles.glowLayer5) }),
-            React.createElement("div", { className: "".concat(styles.glowLayer, " ").concat(styles.glowLayer6) }),
             React.createElement("div", { className: styles.aiTextContainer },
                 React.createElement("div", { className: styles.content }, children)))));
 };

package/dist/components/molecules/AiText/aiText.module.css

@@ -48,17 +48,11 @@
   width: 999px;
   height: 999px;
   background: conic-gradient(
-    #14698b,
-    #25beeb 8%,
-    #6db8e0 18%,
-    #25beeb 30%,
-    #1a8bb8 45%,
-    #25beeb 55%,
-    #1a8bb8 70%,
-    #14698b 85%
+    #25BEEB,
+    #ffffff
   );
   transform: translate(-50%, -50%) rotate(60deg);
-  animation: glowRotate1 4s linear infinite;
+  animation: glowRotate1 6s linear infinite;
 }
 
 /* Couche 2-4 - Effets secondaires */
@@ -76,13 +70,8 @@
   width: 600px;
   height: 600px;
   background: conic-gradient(
-    rgba(23, 30, 37, 0.2),
-    #1a8bb8 12%,
-    rgba(37, 190, 235, 0.4) 25%,
-    #728ea7 40%,
-    rgba(23, 30, 37, 0.3) 55%,
-    #25beeb 70%,
-    rgba(109, 184, 224, 0.6) 85%
+    #25BEEB,
+    #ffffff
   );
   transform: translate(-50%, -50%) rotate(82deg);
   animation: glowRotate2 4s linear infinite;
@@ -100,13 +89,8 @@
   width: 600px;
   height: 600px;
   background: conic-gradient(
-    rgba(162, 181, 200, 0.3) 0%,
-    #6db8e0 15%,
-    rgba(37, 190, 235, 0.7) 30%,
-    #a2b5c8 45%,
-    #25beeb 60%,
-    rgba(114, 142, 167, 0.5) 75%,
-    rgba(109, 184, 224, 0.8) 90%
+    #25BEEB,
+    #ffffff
   );
   transform: translate(-50%, -50%) rotate(83deg);
   filter: brightness(1.4);
@@ -124,14 +108,8 @@
   width: 600px;
   height: 600px;
   background: conic-gradient(
-    #456073,
-    #25beeb 15%,
-    #6db8e0 25%,
-    #1a8bb8 35%,
-    #456073 50%,
-    #25beeb 65%,
-    #728ea7 80%,
-    #456073 95%
+    #25BEEB,
+    #ffffff
   );
   transform: translate(-50%, -50%) rotate(70deg);
   filter: brightness(1.3);

package/dist/components/molecules/datepickerForm/DatepickerForm.d.ts

@@ -13,6 +13,7 @@ export interface DatepickerFormProps {
     minDate?: Date;
     mode?: "button" | "input";
     onError?: (err: string) => void;
+    isPrefilled?: boolean;
 }
 declare const DatepickerForm: React.FC<DatepickerFormProps>;
 export default DatepickerForm;

package/dist/components/molecules/datepickerForm/DatepickerForm.js

@@ -16,9 +16,9 @@ import Paragraph from "../../atoms/typography/Paragraph";
 import Datepicker from "../../atoms/datepickers/Datepicker";
 var DatepickerForm = function (_a) {
     // console.log("Valeur reçue dans DatepickerForm :", value);
-    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b, text = _a.text, _c = _a.variant, variant = _c === void 0 ? "medium" : _c, _d = _a.color, color = _d === void 0 ? "noir" : _d, _e = _a.yearDropdownItemNumber, yearDropdownItemNumber = _e === void 0 ? 10 : _e, maxDaysInPast = _a.maxDaysInPast, minDate = _a.minDate, mode = _a.mode, onError = _a.onError;
+    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b, text = _a.text, _c = _a.variant, variant = _c === void 0 ? "medium" : _c, _d = _a.color, color = _d === void 0 ? "noir" : _d, _e = _a.yearDropdownItemNumber, yearDropdownItemNumber = _e === void 0 ? 10 : _e, maxDaysInPast = _a.maxDaysInPast, minDate = _a.minDate, mode = _a.mode, onError = _a.onError, _f = _a.isPrefilled, isPrefilled = _f === void 0 ? false : _f;
     return (React.createElement("div", { className: "datepicker-form-wrapper" },
         text && React.createElement(Paragraph, { text: text, variant: variant, color: color }),
-        React.createElement(Datepicker, __assign({ value: value || undefined, onChange: onChange, placeholder: placeholder, yearDropdownItemNumber: yearDropdownItemNumber, maxDaysInPast: maxDaysInPast, minDate: minDate }, (mode ? { mode: mode } : {}), (onError ? { onError: onError } : {})))));
+        React.createElement(Datepicker, __assign({ value: value || undefined, onChange: onChange, placeholder: placeholder, yearDropdownItemNumber: yearDropdownItemNumber, maxDaysInPast: maxDaysInPast, minDate: minDate }, (mode ? { mode: mode } : {}), (onError ? { onError: onError } : {}), { isPrefilled: isPrefilled }))));
 };
 export default DatepickerForm;

package/dist/components/molecules/datepickerForm/DatepickerForm.stories.d.ts

@@ -80,6 +80,12 @@ declare namespace _default {
             let defaultValue_4: string;
             export { defaultValue_4 as defaultValue };
         }
+        namespace isPrefilled {
+            let control_7: string;
+            export { control_7 as control };
+            let description_5: string;
+            export { description_5 as description };
+        }
     }
 }
 export default _default;
@@ -94,6 +100,8 @@ export namespace Default {
         export { color_1 as color };
         let yearDropdownItemNumber_1: number;
         export { yearDropdownItemNumber_1 as yearDropdownItemNumber };
+        let isPrefilled_1: boolean;
+        export { isPrefilled_1 as isPrefilled };
     }
 }
 export namespace WithLabel {
@@ -208,4 +216,76 @@ export namespace ButtonMode {
     }
     export { args_7 as args };
 }
+export namespace PrefilledButton {
+    export namespace args_8 {
+        let text_9: string;
+        export { text_9 as text };
+        let value_1: Date;
+        export { value_1 as value };
+        let placeholder_8: string;
+        export { placeholder_8 as placeholder };
+        let variant_9: string;
+        export { variant_9 as variant };
+        let color_9: string;
+        export { color_9 as color };
+        let mode_3: string;
+        export { mode_3 as mode };
+        let isPrefilled_2: boolean;
+        export { isPrefilled_2 as isPrefilled };
+    }
+    export { args_8 as args };
+}
+export namespace PrefilledButtonEmpty {
+    export namespace args_9 {
+        let text_10: string;
+        export { text_10 as text };
+        let placeholder_9: string;
+        export { placeholder_9 as placeholder };
+        let variant_10: string;
+        export { variant_10 as variant };
+        let color_10: string;
+        export { color_10 as color };
+        let mode_4: string;
+        export { mode_4 as mode };
+        let isPrefilled_3: boolean;
+        export { isPrefilled_3 as isPrefilled };
+    }
+    export { args_9 as args };
+}
+export namespace PrefilledInput {
+    export namespace args_10 {
+        let text_11: string;
+        export { text_11 as text };
+        let value_2: Date;
+        export { value_2 as value };
+        let placeholder_10: string;
+        export { placeholder_10 as placeholder };
+        let variant_11: string;
+        export { variant_11 as variant };
+        let color_11: string;
+        export { color_11 as color };
+        let mode_5: string;
+        export { mode_5 as mode };
+        let isPrefilled_4: boolean;
+        export { isPrefilled_4 as isPrefilled };
+    }
+    export { args_10 as args };
+}
+export namespace PrefilledInputEmpty {
+    export namespace args_11 {
+        let text_12: string;
+        export { text_12 as text };
+        let placeholder_11: string;
+        export { placeholder_11 as placeholder };
+        let variant_12: string;
+        export { variant_12 as variant };
+        let color_12: string;
+        export { color_12 as color };
+        let mode_6: string;
+        export { mode_6 as mode };
+        let isPrefilled_5: boolean;
+        export { isPrefilled_5 as isPrefilled };
+    }
+    export { args_11 as args };
+}
 import DatepickerForm from "./DatepickerForm";

package/dist/components/molecules/datepickerForm/DatepickerForm.stories.js

@@ -58,6 +58,10 @@ export default {
             description: "Mode d'affichage du sélecteur (bouton ou champ de saisie)",
             defaultValue: "button",
         },
+        isPrefilled: {
+            control: "boolean",
+            description: "Affiche une bordure bleue pour indiquer un champ pré-rempli",
+        },
     },
 };
 export var Default = {
@@ -67,6 +71,7 @@ export var Default = {
         variant: "medium",
         color: "noir",
         yearDropdownItemNumber: 10,
+        isPrefilled: false,
     },
 };
 export var WithLabel = {
@@ -136,3 +141,45 @@ export var ButtonMode = {
         yearDropdownItemNumber: 10,
     },
 };
+export var PrefilledButton = {
+    args: {
+        text: "DATE D'OUVERTURE (pré-rempli)",
+        value: new Date("2024-03-15"),
+        placeholder: "Sélectionner une date",
+        variant: "medium",
+        color: "noir",
+        mode: "button",
+        isPrefilled: true,
+    },
+};
+export var PrefilledButtonEmpty = {
+    args: {
+        text: "DATE D'OUVERTURE (pré-rempli vide)",
+        placeholder: "Champ pré-rempli vide",
+        variant: "medium",
+        color: "noir",
+        mode: "button",
+        isPrefilled: true,
+    },
+};
+export var PrefilledInput = {
+    args: {
+        text: "DATE D'OUVERTURE (pré-rempli input)",
+        value: new Date("2024-03-15"),
+        placeholder: "jj/mm/aaaa",
+        variant: "medium",
+        color: "noir",
+        mode: "input",
+        isPrefilled: true,
+    },
+};
+export var PrefilledInputEmpty = {
+    args: {
+        text: "DATE D'OUVERTURE (pré-rempli input vide)",
+        placeholder: "jj/mm/aaaa pré-rempli vide",
+        variant: "medium",
+        color: "noir",
+        mode: "input",
+        isPrefilled: true,
+    },
+};

package/dist/components/molecules/selectForm/SelectForm.d.ts

@@ -14,6 +14,7 @@ export interface SelectFormProps {
     onChange?: (selected: string | string[]) => void;
     variant?: "bold" | "semiBold" | "medium";
     color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
+    isPrefilled?: boolean;
 }
 declare const SelectForm: React.FC<SelectFormProps>;
 export default SelectForm;

package/dist/components/molecules/selectForm/SelectForm.js

@@ -4,12 +4,12 @@ import "../../../styles/global.css";
 import Paragraph from "../../atoms/typography/Paragraph";
 import Select from "../../atoms/selects/Select";
 var SelectForm = function (_a) {
-    var label = _a.label, isRequired = _a.isRequired, options = _a.options, isMultiple = _a.isMultiple, _b = _a.placeHolder, placeHolder = _b === void 0 ? "Sélectionner une valeur" : _b, _c = _a.width, width = _c === void 0 ? 100 : _c, selectedItem = _a.selectedItem, maxItems = _a.maxItems, onChange = _a.onChange, _d = _a.variant, variant = _d === void 0 ? "medium" : _d, _e = _a.color, color = _e === void 0 ? "noir" : _e;
+    var label = _a.label, isRequired = _a.isRequired, options = _a.options, isMultiple = _a.isMultiple, _b = _a.placeHolder, placeHolder = _b === void 0 ? "Sélectionner une valeur" : _b, _c = _a.width, width = _c === void 0 ? 100 : _c, selectedItem = _a.selectedItem, maxItems = _a.maxItems, onChange = _a.onChange, _d = _a.variant, variant = _d === void 0 ? "medium" : _d, _e = _a.color, color = _e === void 0 ? "noir" : _e, _f = _a.isPrefilled, isPrefilled = _f === void 0 ? false : _f;
     return (React.createElement("div", { className: "select-form" },
         React.createElement(Paragraph, { variant: variant, color: color, text: React.createElement(React.Fragment, null,
                 label,
                 " ",
                 isRequired && React.createElement("span", { className: "select-form-required" }, "*")), size: "default" }),
-        React.createElement(Select, { items: options, multiple: isMultiple, isRequired: isRequired, width: width, placeholder: placeHolder, selectedItem: selectedItem, maxItems: maxItems, onChange: onChange })));
+        React.createElement(Select, { items: options, multiple: isMultiple, isRequired: isRequired, width: width, placeholder: placeHolder, selectedItem: selectedItem, maxItems: maxItems, onChange: onChange, isPrefilled: isPrefilled })));
 };
 export default SelectForm;

package/dist/components/molecules/selectForm/SelectForm.stories.d.ts

@@ -62,6 +62,11 @@ declare namespace _default {
             }
             export { control_8 as control };
         }
+        namespace isPrefilled {
+            let control_9: string;
+            export { control_9 as control };
+            export let description: string;
+        }
     }
 }
 export default _default;
@@ -69,4 +74,6 @@ export const Default: any;
 export const Multiple: any;
 export const CustomWidth: any;
 export const WithSelectedItem: any;
+export const Prefilled: any;
+export const PrefilledEmpty: any;
 import SelectForm from "./SelectForm";

package/dist/components/molecules/selectForm/SelectForm.stories.js

@@ -56,6 +56,10 @@ export default {
                 ],
             },
         },
+        isPrefilled: {
+            control: "boolean",
+            description: "Affiche une bordure bleue pour indiquer un champ pré-rempli",
+        },
     },
 };
 var Template = function (args) {
@@ -82,6 +86,7 @@ Default.args = {
     selectedItem: "",
     variant: "medium",
     color: "noir",
+    isPrefilled: false,
 };
 export var Multiple = Template.bind({});
 Multiple.args = {
@@ -102,3 +107,7 @@ export var CustomWidth = Template.bind({});
 CustomWidth.args = __assign(__assign({}, Default.args), { width: 50 });
 export var WithSelectedItem = Template.bind({});
 WithSelectedItem.args = __assign(__assign({}, Default.args), { selectedItem: "48h" });
+export var Prefilled = Template.bind({});
+Prefilled.args = __assign(__assign({}, Default.args), { selectedItem: "72h", isPrefilled: true });
+export var PrefilledEmpty = Template.bind({});
+PrefilledEmpty.args = __assign(__assign({}, Default.args), { selectedItem: "", isPrefilled: true, placeHolder: "Champ pré-rempli vide..." });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "4.7.9",
+  "version": "4.8.1",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",