@babylonjs/shared-ui-components 8.16.0 → 8.16.1

package/fluent/hoc/dropdownPropertyLine.d.ts

@@ -3,7 +3,6 @@ import type { AcceptedDropdownValue, DropdownProps } from "../primitives/dropdow
 import type { PropertyLineProps } from "./propertyLine.js";
 import type { FunctionComponent } from "react";
 type DropdownPropertyLineProps<V extends AcceptedDropdownValue> = Omit<DropdownProps<V>, "includeNullAs"> & PropertyLineProps;
-export declare const NullableDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<AcceptedDropdownValue>>;
 /**
  * Dropdown component for explicitly defined number values.
  * If value can be undefined, use OptionalNumberDropdownPropertyLine instead.

package/fluent/hoc/dropdownPropertyLine.js

@@ -9,7 +9,7 @@ import { PropertyLine } from "./propertyLine.js";
 const DropdownPropertyLine = (props) => {
     return (_jsx(PropertyLine, { ...props, children: _jsx(Dropdown, { ...props }) }));
 };
-export const NullableDropdownPropertyLine = (props) => (_jsx(DropdownPropertyLine, { ...props, includeNullAs: "null" }));
+const NullableDropdownPropertyLine = (props) => _jsx(DropdownPropertyLine, { ...props, includeNullAs: "null" });
 const OptionalDropdownPropertyLine = (props) => _jsx(DropdownPropertyLine, { ...props, includeNullAs: "undefined" });
 /**
  * Dropdown component for explicitly defined number values.

package/fluent/hoc/dropdownPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdownPropertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/dropdownPropertyLine.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAM9C;;;;GAIG;AACH,MAAM,oBAAoB,GAAgF,CAAC,KAAK,EAAE,EAAE;IAChH,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,QAAQ,OAAK,KAAK,GAAI,GACZ,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAwE,CAAC,KAAK,EAAE,EAAE,CAAC,CACxH,KAAC,oBAAoB,OAAK,KAAK,EAAE,aAAa,EAAC,MAAM,GAAG,CAC3D,CAAC;AACF,MAAM,4BAA4B,GAAwE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,oBAAoB,OAAK,KAAK,EAAE,aAAa,EAAC,WAAW,GAAG,CAAC;AAEnL;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,oBAA4E,CAAC;AACvH;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,oBAA4E,CAAC;AAEvH;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAA8F,CAAC;AACjJ;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAA8F,CAAC;AAEjJ;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAAgG,CAAC;AACnJ;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAAgG,CAAC","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport { Dropdown } from \"../primitives/dropdown\";\r\nimport type { AcceptedDropdownValue, DropdownProps } from \"../primitives/dropdown\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\ntype DropdownPropertyLineProps<V extends AcceptedDropdownValue> = Omit<DropdownProps<V>, \"includeNullAs\"> & PropertyLineProps;\r\n\r\n/**\r\n * Wraps a dropdown in a property line\r\n * @param props - PropertyLineProps and DropdownProps\r\n * @returns property-line wrapped dropdown\r\n */\r\nconst DropdownPropertyLine: FunctionComponent<DropdownProps<AcceptedDropdownValue> & PropertyLineProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Dropdown {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n\r\nexport const NullableDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<AcceptedDropdownValue>> = (props) => (\r\n    <DropdownPropertyLine {...props} includeNullAs=\"null\" />\r\n);\r\nconst OptionalDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<AcceptedDropdownValue>> = (props) => <DropdownPropertyLine {...props} includeNullAs=\"undefined\" />;\r\n\r\n/**\r\n * Dropdown component for explicitly defined number values.\r\n * If value can be undefined, use OptionalNumberDropdownPropertyLine instead.\r\n * If value can be null, use NullableNumberDropdownPropertyLine instead.\r\n */\r\nexport const NumberDropdownPropertyLine = DropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<number>>;\r\n/**\r\n * Dropdown component for explicitly defined string values.\r\n * If value can be undefined, use OptionalStringDropdownPropertyLine instead.\r\n * If value can be null, use NullableStringDropdownPropertyLine instead.\r\n */\r\nexport const StringDropdownPropertyLine = DropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<string>>;\r\n\r\n/**\r\n * Dropdown component for Nullable<number> values.\r\n */\r\nexport const NullableNumberDropdownPropertyLine = NullableDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<Nullable<number>>>;\r\n/**\r\n * Dropdown component for Nullable<string> values.\r\n */\r\nexport const NullableStringDropdownPropertyLine = NullableDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<Nullable<string>>>;\r\n\r\n/**\r\n * Dropdown component for number | undefined values\r\n */\r\nexport const OptionalNumberDropdownPropertyLine = OptionalDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<number | undefined>>;\r\n/**\r\n * Dropdown component for string | undefined values\r\n */\r\nexport const OptionalStringDropdownPropertyLine = OptionalDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<string | undefined>>;\r\n"]}
+{"version":3,"file":"dropdownPropertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/dropdownPropertyLine.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAM9C;;;;GAIG;AACH,MAAM,oBAAoB,GAAgF,CAAC,KAAK,EAAE,EAAE;IAChH,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,QAAQ,OAAK,KAAK,GAAI,GACZ,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,4BAA4B,GAAwE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,oBAAoB,OAAK,KAAK,EAAE,aAAa,EAAC,MAAM,GAAG,CAAC;AAC9K,MAAM,4BAA4B,GAAwE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,oBAAoB,OAAK,KAAK,EAAE,aAAa,EAAC,WAAW,GAAG,CAAC;AAEnL;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,oBAA4E,CAAC;AACvH;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,oBAA4E,CAAC;AAEvH;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAA8F,CAAC;AACjJ;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAA8F,CAAC;AAEjJ;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAAgG,CAAC;AACnJ;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAAgG,CAAC","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport { Dropdown } from \"../primitives/dropdown\";\r\nimport type { AcceptedDropdownValue, DropdownProps } from \"../primitives/dropdown\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\ntype DropdownPropertyLineProps<V extends AcceptedDropdownValue> = Omit<DropdownProps<V>, \"includeNullAs\"> & PropertyLineProps;\r\n\r\n/**\r\n * Wraps a dropdown in a property line\r\n * @param props - PropertyLineProps and DropdownProps\r\n * @returns property-line wrapped dropdown\r\n */\r\nconst DropdownPropertyLine: FunctionComponent<DropdownProps<AcceptedDropdownValue> & PropertyLineProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Dropdown {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n\r\nconst NullableDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<AcceptedDropdownValue>> = (props) => <DropdownPropertyLine {...props} includeNullAs=\"null\" />;\r\nconst OptionalDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<AcceptedDropdownValue>> = (props) => <DropdownPropertyLine {...props} includeNullAs=\"undefined\" />;\r\n\r\n/**\r\n * Dropdown component for explicitly defined number values.\r\n * If value can be undefined, use OptionalNumberDropdownPropertyLine instead.\r\n * If value can be null, use NullableNumberDropdownPropertyLine instead.\r\n */\r\nexport const NumberDropdownPropertyLine = DropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<number>>;\r\n/**\r\n * Dropdown component for explicitly defined string values.\r\n * If value can be undefined, use OptionalStringDropdownPropertyLine instead.\r\n * If value can be null, use NullableStringDropdownPropertyLine instead.\r\n */\r\nexport const StringDropdownPropertyLine = DropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<string>>;\r\n\r\n/**\r\n * Dropdown component for Nullable<number> values.\r\n */\r\nexport const NullableNumberDropdownPropertyLine = NullableDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<Nullable<number>>>;\r\n/**\r\n * Dropdown component for Nullable<string> values.\r\n */\r\nexport const NullableStringDropdownPropertyLine = NullableDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<Nullable<string>>>;\r\n\r\n/**\r\n * Dropdown component for number | undefined values\r\n */\r\nexport const OptionalNumberDropdownPropertyLine = OptionalDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<number | undefined>>;\r\n/**\r\n * Dropdown component for string | undefined values\r\n */\r\nexport const OptionalStringDropdownPropertyLine = OptionalDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<string | undefined>>;\r\n"]}

package/fluent/hoc/gradientList.d.ts

@@ -0,0 +1,14 @@
+import type { FunctionComponent } from "react";
+import { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from "@babylonjs/core/Misc/gradients.js";
+import type { Nullable } from "@babylonjs/core/types.js";
+type GradientListProps<T extends FactorGradient | Color3Gradient | Color4Gradient> = {
+    label: string;
+    gradients: Nullable<Array<T>>;
+    addGradient: (step?: T) => void;
+    removeGradient: (step: T) => void;
+    onChange: (newGradient: T) => void;
+};
+export declare const FactorGradientList: FunctionComponent<GradientListProps<FactorGradient>>;
+export declare const Color3GradientList: FunctionComponent<GradientListProps<Color3Gradient>>;
+export declare const Color4GradientList: FunctionComponent<GradientListProps<Color4Gradient>>;
+export {};

package/fluent/hoc/gradientList.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { List } from "../primitives/list.js";
+import { Color3GradientComponent, Color4GradientComponent, FactorGradientComponent } from "../primitives/gradient.js";
+import { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from "@babylonjs/core/Misc/gradients.js";
+import { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
+// Convert gradients to LineList items and sort by gradient value
+function GradientsToListItems(gradients) {
+    return (gradients?.map((gradient, index) => ({
+        id: index,
+        data: gradient,
+        sortBy: gradient.gradient,
+    })) ?? []);
+}
+const GradientList = (props) => {
+    const { gradients, type } = props;
+    const items = GradientsToListItems(gradients);
+    const deleteStep = (step) => {
+        props.removeGradient(step);
+    };
+    const addNewStep = () => {
+        if (items.length === 0) {
+            props.addGradient(); // Default
+        }
+        else {
+            switch (props.type) {
+                case "Factor": {
+                    const newStep = new FactorGradient(1, 1, 1);
+                    props.addGradient(newStep);
+                    break;
+                }
+                case "Color3": {
+                    const newStepColor3 = new Color3Gradient(1, Color3.White());
+                    props.addGradient(newStepColor3);
+                    break;
+                }
+                case "Color4": {
+                    const newStepColor = new Color4Gradient(1, new Color4(1, 1, 1, 1), new Color4(1, 1, 1, 1));
+                    props.addGradient(newStepColor);
+                    break;
+                }
+            }
+        }
+    };
+    return (_jsx("div", { children: _jsx(List, { addButtonLabel: items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`, items: items, onDelete: (item) => deleteStep(item.data), onAdd: addNewStep, renderItem: (item) => {
+                const gradient = item.data;
+                switch (props.type) {
+                    case "Factor":
+                        return (_jsx(FactorGradientComponent, { value: gradient, onChange: (newGradient) => {
+                                item.data.gradient = newGradient.gradient;
+                                item.data.factor1 = newGradient.factor1;
+                                item.data.factor2 = newGradient.factor2;
+                                props.onChange(newGradient);
+                            } }));
+                    case "Color3":
+                        return (_jsx(Color3GradientComponent, { value: gradient, onChange: (newGradient) => {
+                                item.data.gradient = newGradient.gradient;
+                                item.data.color = newGradient.color;
+                                props.onChange(newGradient);
+                            } }));
+                    case "Color4":
+                        return (_jsx(Color4GradientComponent, { value: gradient, onChange: (newGradient) => {
+                                item.data.gradient = newGradient.gradient;
+                                item.data.color1 = newGradient.color1;
+                                item.data.color2 = newGradient.color2;
+                                props.onChange(newGradient);
+                            } }));
+                }
+            } }, type) }));
+};
+const FactorGradientCast = GradientList;
+const Color3GradientCast = GradientList;
+const Color4GradientCast = GradientList;
+export const FactorGradientList = (props) => _jsx(FactorGradientCast, { ...props, type: "Factor" });
+export const Color3GradientList = (props) => _jsx(Color3GradientCast, { ...props, type: "Color3" });
+export const Color4GradientList = (props) => _jsx(Color4GradientCast, { ...props, type: "Color4" });
+//# sourceMappingURL=gradientList.js.map

package/fluent/hoc/gradientList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradientList.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/gradientList.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACnH,OAAO,EAAE,cAAc,EAAE,aAAa,IAAI,cAAc,EAAE,cAAc,EAAE,0CAA4B;AAGtG,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,4CAA8B;AAYvD,iEAAiE;AACjE,SAAS,oBAAoB,CAAC,SAA0C;IACpE,OAAO,CACH,SAAS,EAAE,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QACjC,EAAE,EAAE,KAAK;QACT,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,QAAQ,CAAC,QAAQ;KAC5B,CAAC,CAAC,IAAI,EAAE,CACZ,CAAC;AACN,CAAC;AAED,MAAM,YAAY,GAAqH,CAAC,KAAK,EAAE,EAAE;IAC7I,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAClC,MAAM,KAAK,GAAG,oBAAoB,CAAC,SAAS,CAAC,CAAC;IAE9C,MAAM,UAAU,GAAG,CAAC,IAAsD,EAAE,EAAE;QAC1E,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACpB,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACrB,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,UAAU;QACnC,CAAC;aAAM,CAAC;YACJ,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;gBACjB,KAAK,QAAQ,CAAC,CAAC,CAAC;oBACZ,MAAM,OAAO,GAAG,IAAI,cAAc,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;oBAC5C,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;oBAC3B,MAAM;gBACV,CAAC;gBACD,KAAK,QAAQ,CAAC,CAAC,CAAC;oBACZ,MAAM,aAAa,GAAG,IAAI,cAAc,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;oBAC5D,KAAK,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;oBACjC,MAAM;gBACV,CAAC;gBACD,KAAK,QAAQ,CAAC,CAAC,CAAC;oBACZ,MAAM,YAAY,GAAG,IAAI,cAAc,CAAC,CAAC,EAAE,IAAI,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;oBAC3F,KAAK,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;oBAChC,MAAM;gBACV,CAAC;YACL,CAAC;QACL,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,wBACI,KAAC,IAAI,IAED,cAAc,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,OAAO,KAAK,CAAC,KAAK,GAAG,EACnF,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,KAAK,EAAE,UAAU,EACjB,UAAU,EAAE,CAAC,IAAI,EAAE,EAAE;gBACjB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;gBAC3B,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;oBACjB,KAAK,QAAQ;wBACT,OAAO,CACH,KAAC,uBAAuB,IACpB,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,WAA2B,EAAE,EAAE;gCACtC,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,QAAQ,CAAC;gCAC1C,IAAI,CAAC,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC;gCACxC,IAAI,CAAC,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC;gCACxC,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;4BAChC,CAAC,GACH,CACL,CAAC;oBAEN,KAAK,QAAQ;wBACT,OAAO,CACH,KAAC,uBAAuB,IACpB,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,WAA2B,EAAE,EAAE;gCACtC,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,QAAQ,CAAC;gCAC1C,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC;gCACpC,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;4BAChC,CAAC,GACH,CACL,CAAC;oBACN,KAAK,QAAQ;wBACT,OAAO,CACH,KAAC,uBAAuB,IACpB,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,WAA2B,EAAE,EAAE;gCACtC,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,QAAQ,CAAC;gCAC1C,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC;gCACtC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC;gCACtC,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;4BAChC,CAAC,GACH,CACL,CAAC;gBACV,CAAC;YACL,CAAC,IA7CI,IAAI,CA8CX,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,YAAyF,CAAC;AACrH,MAAM,kBAAkB,GAAG,YAAyF,CAAC;AACrH,MAAM,kBAAkB,GAAG,YAAyF,CAAC;AAErH,MAAM,CAAC,MAAM,kBAAkB,GAAyD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,kBAAkB,OAAK,KAAK,EAAE,IAAI,EAAC,QAAQ,GAAG,CAAC;AACnJ,MAAM,CAAC,MAAM,kBAAkB,GAAyD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,kBAAkB,OAAK,KAAK,EAAE,IAAI,EAAC,QAAQ,GAAG,CAAC;AACnJ,MAAM,CAAC,MAAM,kBAAkB,GAAyD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,kBAAkB,OAAK,KAAK,EAAE,IAAI,EAAC,QAAQ,GAAG,CAAC","sourcesContent":["import type { FunctionComponent } from \"react\";\r\n\r\nimport { List } from \"../primitives/list\";\r\nimport { Color3GradientComponent, Color4GradientComponent, FactorGradientComponent } from \"../primitives/gradient\";\r\nimport { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from \"core/Misc/gradients\";\r\nimport type { IValueGradient } from \"core/Misc/gradients\";\r\nimport type { Nullable } from \"core/types\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\n\r\ntype GradientTypes = \"Factor\" | \"Color3\" | \"Color4\";\r\n\r\ntype GradientListProps<T extends FactorGradient | Color3Gradient | Color4Gradient> = {\r\n    label: string;\r\n    gradients: Nullable<Array<T>>;\r\n    addGradient: (step?: T) => void;\r\n    removeGradient: (step: T) => void;\r\n    onChange: (newGradient: T) => void;\r\n};\r\n\r\n// Convert gradients to LineList items and sort by gradient value\r\nfunction GradientsToListItems(gradients: Nullable<Array<IValueGradient>>) {\r\n    return (\r\n        gradients?.map((gradient, index) => ({\r\n            id: index,\r\n            data: gradient,\r\n            sortBy: gradient.gradient,\r\n        })) ?? []\r\n    );\r\n}\r\n\r\nconst GradientList: FunctionComponent<GradientListProps<FactorGradient | Color3Gradient | Color4Gradient> & { type: GradientTypes }> = (props) => {\r\n    const { gradients, type } = props;\r\n    const items = GradientsToListItems(gradients);\r\n\r\n    const deleteStep = (step: FactorGradient | Color3Gradient | Color4Gradient) => {\r\n        props.removeGradient(step);\r\n    };\r\n\r\n    const addNewStep = () => {\r\n        if (items.length === 0) {\r\n            props.addGradient(); // Default\r\n        } else {\r\n            switch (props.type) {\r\n                case \"Factor\": {\r\n                    const newStep = new FactorGradient(1, 1, 1);\r\n                    props.addGradient(newStep);\r\n                    break;\r\n                }\r\n                case \"Color3\": {\r\n                    const newStepColor3 = new Color3Gradient(1, Color3.White());\r\n                    props.addGradient(newStepColor3);\r\n                    break;\r\n                }\r\n                case \"Color4\": {\r\n                    const newStepColor = new Color4Gradient(1, new Color4(1, 1, 1, 1), new Color4(1, 1, 1, 1));\r\n                    props.addGradient(newStepColor);\r\n                    break;\r\n                }\r\n            }\r\n        }\r\n    };\r\n\r\n    return (\r\n        <div>\r\n            <List\r\n                key={type}\r\n                addButtonLabel={items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`}\r\n                items={items}\r\n                onDelete={(item) => deleteStep(item.data)}\r\n                onAdd={addNewStep}\r\n                renderItem={(item) => {\r\n                    const gradient = item.data;\r\n                    switch (props.type) {\r\n                        case \"Factor\":\r\n                            return (\r\n                                <FactorGradientComponent\r\n                                    value={gradient}\r\n                                    onChange={(newGradient: FactorGradient) => {\r\n                                        item.data.gradient = newGradient.gradient;\r\n                                        item.data.factor1 = newGradient.factor1;\r\n                                        item.data.factor2 = newGradient.factor2;\r\n                                        props.onChange(newGradient);\r\n                                    }}\r\n                                />\r\n                            );\r\n\r\n                        case \"Color3\":\r\n                            return (\r\n                                <Color3GradientComponent\r\n                                    value={gradient}\r\n                                    onChange={(newGradient: Color3Gradient) => {\r\n                                        item.data.gradient = newGradient.gradient;\r\n                                        item.data.color = newGradient.color;\r\n                                        props.onChange(newGradient);\r\n                                    }}\r\n                                />\r\n                            );\r\n                        case \"Color4\":\r\n                            return (\r\n                                <Color4GradientComponent\r\n                                    value={gradient}\r\n                                    onChange={(newGradient: Color4Gradient) => {\r\n                                        item.data.gradient = newGradient.gradient;\r\n                                        item.data.color1 = newGradient.color1;\r\n                                        item.data.color2 = newGradient.color2;\r\n                                        props.onChange(newGradient);\r\n                                    }}\r\n                                />\r\n                            );\r\n                    }\r\n                }}\r\n            />\r\n        </div>\r\n    );\r\n};\r\n\r\nconst FactorGradientCast = GradientList as FunctionComponent<GradientListProps<FactorGradient> & { type: \"Factor\" }>;\r\nconst Color3GradientCast = GradientList as FunctionComponent<GradientListProps<Color3Gradient> & { type: \"Color3\" }>;\r\nconst Color4GradientCast = GradientList as FunctionComponent<GradientListProps<Color4Gradient> & { type: \"Color4\" }>;\r\n\r\nexport const FactorGradientList: FunctionComponent<GradientListProps<FactorGradient>> = (props) => <FactorGradientCast {...props} type=\"Factor\" />;\r\nexport const Color3GradientList: FunctionComponent<GradientListProps<Color3Gradient>> = (props) => <Color3GradientCast {...props} type=\"Color3\" />;\r\nexport const Color4GradientList: FunctionComponent<GradientListProps<Color4Gradient>> = (props) => <Color4GradientCast {...props} type=\"Color4\" />;\r\n"]}

package/fluent/hoc/inputPropertyLine.d.ts

@@ -1,5 +1,15 @@
 import type { PropertyLineProps } from "./propertyLine.js";
 import type { FunctionComponent } from "react";
 import type { InputProps } from "../primitives/input.js";
+/**
+ * Wraps a text input in a property line
+ * @param props - PropertyLineProps and InputProps
+ * @returns property-line wrapped input component
+ */
 export declare const TextInputPropertyLine: FunctionComponent<InputProps<string> & PropertyLineProps>;
-export declare const FloatInputPropertyLine: FunctionComponent<InputProps<number> & PropertyLineProps>;
+/**
+ * Wraps a number input in a property line
+ * @param props - PropertyLineProps and InputProps
+ * @returns property-line wrapped input component
+ */
+export declare const NumberInputPropertyLine: FunctionComponent<InputProps<number> & PropertyLineProps>;

package/fluent/hoc/inputPropertyLine.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PropertyLine } from "./propertyLine.js";
-import { Input } from "../primitives/input.js";
+import { NumberInput, TextInput } from "../primitives/input.js";
 /**
- * Wraps an input in a property line
+ * Wraps a text input in a property line
  * @param props - PropertyLineProps and InputProps
  * @returns property-line wrapped input component
  */
-const InputPropertyLine = (props) => {
-    return (_jsx(PropertyLine, { ...props, children: _jsx(Input, { ...props }) }));
-};
-export const TextInputPropertyLine = InputPropertyLine;
-export const FloatInputPropertyLine = InputPropertyLine;
+export const TextInputPropertyLine = (props) => (_jsx(PropertyLine, { ...props, children: _jsx(TextInput, { ...props }) }));
+/**
+ * Wraps a number input in a property line
+ * @param props - PropertyLineProps and InputProps
+ * @returns property-line wrapped input component
+ */
+export const NumberInputPropertyLine = (props) => (_jsx(PropertyLine, { ...props, children: _jsx(NumberInput, { ...props }) }));
 //# sourceMappingURL=inputPropertyLine.js.map

package/fluent/hoc/inputPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputPropertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/inputPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAK5C;;;;GAIG;AACH,MAAM,iBAAiB,GAA8C,CAAC,KAAK,EAAE,EAAE;IAC3E,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,KAAK,OAAK,KAAK,GAAI,GACT,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,iBAA8E,CAAC;AACpH,MAAM,CAAC,MAAM,sBAAsB,GAAG,iBAA8E,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { Input } from \"../primitives/input\";\r\nimport type { InputProps } from \"../primitives/input\";\r\n\r\ntype InputPropertyLineProps = InputProps<string | number> & PropertyLineProps;\r\n\r\n/**\r\n * Wraps an input in a property line\r\n * @param props - PropertyLineProps and InputProps\r\n * @returns property-line wrapped input component\r\n */\r\nconst InputPropertyLine: FunctionComponent<InputPropertyLineProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Input {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n\r\nexport const TextInputPropertyLine = InputPropertyLine as FunctionComponent<InputProps<string> & PropertyLineProps>;\r\nexport const FloatInputPropertyLine = InputPropertyLine as FunctionComponent<InputProps<number> & PropertyLineProps>;\r\n"]}
+{"version":3,"file":"inputPropertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/inputPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAG7D;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAA8D,CAAC,KAAK,EAAE,EAAE,CAAC,CACvG,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,SAAS,OAAK,KAAK,GAAI,GACb,CAClB,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAA8D,CAAC,KAAK,EAAE,EAAE,CAAC,CACzG,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,WAAW,OAAK,KAAK,GAAI,GACf,CAClB,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { NumberInput, TextInput } from \"../primitives/input\";\r\nimport type { InputProps } from \"../primitives/input\";\r\n\r\n/**\r\n * Wraps a text input in a property line\r\n * @param props - PropertyLineProps and InputProps\r\n * @returns property-line wrapped input component\r\n */\r\nexport const TextInputPropertyLine: FunctionComponent<InputProps<string> & PropertyLineProps> = (props) => (\r\n    <PropertyLine {...props}>\r\n        <TextInput {...props} />\r\n    </PropertyLine>\r\n);\r\n\r\n/**\r\n * Wraps a number input in a property line\r\n * @param props - PropertyLineProps and InputProps\r\n * @returns property-line wrapped input component\r\n */\r\nexport const NumberInputPropertyLine: FunctionComponent<InputProps<number> & PropertyLineProps> = (props) => (\r\n    <PropertyLine {...props}>\r\n        <NumberInput {...props} />\r\n    </PropertyLine>\r\n);\r\n"]}

package/fluent/primitives/colorPicker.js

@@ -66,7 +66,7 @@ export const ColorPickerPopup = (props) => {
             align: "start",
             overflowBoundary: document.body,
             autoSize: true,
-        }, open: popoverOpen, trapFocus: true, onOpenChange: (_, data) => setPopoverOpen(data.open), children: [_jsx(PopoverTrigger, { disableButtonEnhancement: true, children: _jsx(ColorSwatch, { size: "small", color: color.toHexString(), value: color.toHexString().slice(1) }) }), _jsx(PopoverSurface, { children: _jsxs("div", { className: classes.colorPickerContainer, children: [_jsxs(ColorPicker, { color: rgbaToHsv(color), onColorChange: handleColorPickerChange, children: [_jsx(ColorArea, { inputX: { "aria-label": "Saturation" }, inputY: { "aria-label": "Brightness" } }), _jsx(ColorSlider, { "aria-label": "Hue" }), color instanceof Color4 && _jsx(AlphaSlider, { "aria-label": "Alpha" })] }), _jsxs("div", { className: classes.container, children: [_jsxs("div", { className: classes.row, children: [_jsx("div", { className: classes.previewColor, style: { backgroundColor: color.toHexString() } }), _jsx(InputHexField, { label: "Gamma Hex", value: color, isLinearMode: props.isLinearMode, onChange: handleChange }), _jsx(InputHexField, { label: "Linear Hex", linearHex: true, isLinearMode: props.isLinearMode, value: color, onChange: handleChange })] }), _jsxs("div", { className: classes.row, children: [_jsx(InputRgbField, { label: "Red", color: color, rgbKey: "r", onChange: handleChange }), _jsx(InputRgbField, { label: "Green", color: color, rgbKey: "g", onChange: handleChange }), _jsx(InputRgbField, { label: "Blue", color: color, rgbKey: "b", onChange: handleChange }), _jsx(InputAlphaField, { color: color, onChange: handleChange })] }), _jsxs("div", { className: classes.row, children: [_jsx(InputHsvField, { label: "Hue", color: color, hsvKey: "h", max: 360, onChange: handleChange }), _jsx(InputHsvField, { label: "Saturation", color: color, hsvKey: "s", max: 100, scale: 100, onChange: handleChange }), _jsx(InputHsvField, { label: "Value", color: color, hsvKey: "v", max: 100, scale: 100, onChange: handleChange })] })] })] }) })] }));
+        }, open: popoverOpen, trapFocus: true, onOpenChange: (_, data) => setPopoverOpen(data.open), children: [_jsx(PopoverTrigger, { disableButtonEnhancement: true, children: _jsx(ColorSwatch, { borderColor: tokens.colorNeutralShadowKeyDarker, size: "small", color: color.toHexString(), value: color.toHexString().slice(1) }) }), _jsx(PopoverSurface, { children: _jsxs("div", { className: classes.colorPickerContainer, children: [_jsxs(ColorPicker, { color: rgbaToHsv(color), onColorChange: handleColorPickerChange, children: [_jsx(ColorArea, { inputX: { "aria-label": "Saturation" }, inputY: { "aria-label": "Brightness" } }), _jsx(ColorSlider, { "aria-label": "Hue" }), color instanceof Color4 && _jsx(AlphaSlider, { "aria-label": "Alpha" })] }), _jsxs("div", { className: classes.container, children: [_jsxs("div", { className: classes.row, children: [_jsx("div", { className: classes.previewColor, style: { backgroundColor: color.toHexString() } }), _jsx(InputHexField, { label: "Gamma Hex", value: color, isLinearMode: props.isLinearMode, onChange: handleChange }), _jsx(InputHexField, { label: "Linear Hex", linearHex: true, isLinearMode: props.isLinearMode, value: color, onChange: handleChange })] }), _jsxs("div", { className: classes.row, children: [_jsx(InputRgbField, { label: "Red", color: color, rgbKey: "r", onChange: handleChange }), _jsx(InputRgbField, { label: "Green", color: color, rgbKey: "g", onChange: handleChange }), _jsx(InputRgbField, { label: "Blue", color: color, rgbKey: "b", onChange: handleChange }), _jsx(InputAlphaField, { color: color, onChange: handleChange })] }), _jsxs("div", { className: classes.row, children: [_jsx(InputHsvField, { label: "Hue", color: color, hsvKey: "h", max: 360, onChange: handleChange }), _jsx(InputHsvField, { label: "Saturation", color: color, hsvKey: "s", max: 100, scale: 100, onChange: handleChange }), _jsx(InputHsvField, { label: "Value", color: color, hsvKey: "v", max: 100, scale: 100, onChange: handleChange })] })] })] }) })] }));
 };
 /**
  * Component which displays the passed in color's HEX value, either in linearSpace (if linearHex is true) or in gamma space

package/fluent/primitives/colorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"colorPicker.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/colorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable jsdoc/require-returns */\r\n/* eslint-disable @typescript-eslint/naming-convention */\r\nimport { useState, useEffect, useCallback } from \"react\";\r\nimport type { FunctionComponent, ChangeEvent } from \"react\";\r\nimport {\r\n    Input,\r\n    Label,\r\n    SpinButton,\r\n    useId,\r\n    ColorPicker,\r\n    ColorSlider,\r\n    ColorArea,\r\n    AlphaSlider,\r\n    InfoLabel,\r\n    Link,\r\n    makeStyles,\r\n    Popover,\r\n    PopoverSurface,\r\n    PopoverTrigger,\r\n    tokens,\r\n    Body1Strong,\r\n    ColorSwatch,\r\n} from \"@fluentui/react-components\";\r\nimport type { SpinButtonChangeEvent, SpinButtonOnChangeData, ColorPickerProps as FluentColorPickerProps, InputOnChangeData } from \"@fluentui/react-components\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nconst useColorPickerStyles = makeStyles({\r\n    colorPickerContainer: {\r\n        width: \"325px\",\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacingVerticalMNudge, // 10px\r\n        overflow: \"visible\",\r\n    },\r\n    previewColor: {\r\n        width: \"50px\",\r\n        height: \"50px\",\r\n        borderRadius: tokens.borderRadiusMedium,\r\n        border: `${tokens.spacingVerticalXXS} solid ${tokens.colorNeutralShadowKeyLighter}`,\r\n        \"@media (forced-colors: active)\": {\r\n            forcedColorAdjust: \"none\", // ensures elmement maintains color in high constrast mode\r\n        },\r\n    },\r\n    row: {\r\n        display: \"flex\",\r\n        flexDirection: \"row\",\r\n        gap: tokens.spacingVerticalM, // 12px\r\n        alignItems: \"center\",\r\n    },\r\n    colorFieldWrapper: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacingVerticalSNudge, // 6px\r\n    },\r\n    input: {\r\n        width: \"80px\",\r\n    },\r\n    spinButton: {\r\n        minWidth: \"60px\",\r\n    },\r\n    container: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacingVerticalL, // 16px\r\n    },\r\n});\r\n\r\nexport type ColorPickerProps<C extends Color3 | Color4> = {\r\n    isLinearMode?: boolean;\r\n} & BaseComponentProps<C>;\r\n\r\nexport const ColorPickerPopup: FunctionComponent<ColorPickerProps<Color3 | Color4>> = (props) => {\r\n    const classes = useColorPickerStyles();\r\n    const [color, setColor] = useState(props.value);\r\n\r\n    const [popoverOpen, setPopoverOpen] = useState(false);\r\n\r\n    useEffect(() => {\r\n        setColor(props.value); // Ensures the trigger color updates when props.value changes\r\n    }, [props.value]);\r\n\r\n    const handleColorPickerChange: FluentColorPickerProps[\"onColorChange\"] = (_, data) => {\r\n        let color: Color3 | Color4 = Color3.FromHSV(data.color.h, data.color.s, data.color.v);\r\n        if (props.value instanceof Color4) {\r\n            color = Color4.FromColor3(color, data.color.a ?? 1);\r\n        }\r\n        handleChange(color);\r\n    };\r\n\r\n    const handleChange = (newColor: Color3 | Color4) => {\r\n        setColor(newColor);\r\n        props.onChange(newColor); // Ensures the parent is notified when color changes from within colorPicker\r\n    };\r\n\r\n    return (\r\n        <Popover\r\n            positioning={{\r\n                align: \"start\",\r\n                overflowBoundary: document.body,\r\n                autoSize: true,\r\n            }}\r\n            open={popoverOpen}\r\n            trapFocus\r\n            onOpenChange={(_, data) => setPopoverOpen(data.open)}\r\n        >\r\n            <PopoverTrigger disableButtonEnhancement>\r\n                <ColorSwatch size=\"small\" color={color.toHexString()} value={color.toHexString().slice(1)} />\r\n            </PopoverTrigger>\r\n\r\n            <PopoverSurface>\r\n                <div className={classes.colorPickerContainer}>\r\n                    <ColorPicker color={rgbaToHsv(color)} onColorChange={handleColorPickerChange}>\r\n                        <ColorArea inputX={{ \"aria-label\": \"Saturation\" }} inputY={{ \"aria-label\": \"Brightness\" }} />\r\n                        <ColorSlider aria-label=\"Hue\" />\r\n                        {color instanceof Color4 && <AlphaSlider aria-label=\"Alpha\" />}\r\n                    </ColorPicker>\r\n                    <div className={classes.container}>\r\n                        {/* Top Row: Preview, Gamma Hex, Linear Hex */}\r\n                        <div className={classes.row}>\r\n                            <div className={classes.previewColor} style={{ backgroundColor: color.toHexString() }} />\r\n                            <InputHexField label=\"Gamma Hex\" value={color} isLinearMode={props.isLinearMode} onChange={handleChange} />\r\n                            <InputHexField label=\"Linear Hex\" linearHex={true} isLinearMode={props.isLinearMode} value={color} onChange={handleChange} />\r\n                        </div>\r\n\r\n                        {/* Middle Row: Red, Green, Blue, Alpha */}\r\n                        <div className={classes.row}>\r\n                            <InputRgbField label=\"Red\" color={color} rgbKey=\"r\" onChange={handleChange} />\r\n                            <InputRgbField label=\"Green\" color={color} rgbKey=\"g\" onChange={handleChange} />\r\n                            <InputRgbField label=\"Blue\" color={color} rgbKey=\"b\" onChange={handleChange} />\r\n                            <InputAlphaField color={color} onChange={handleChange} />\r\n                        </div>\r\n\r\n                        {/* Bottom Row: Hue, Saturation, Value */}\r\n                        <div className={classes.row}>\r\n                            <InputHsvField label=\"Hue\" color={color} hsvKey=\"h\" max={360} onChange={handleChange} />\r\n                            <InputHsvField label=\"Saturation\" color={color} hsvKey=\"s\" max={100} scale={100} onChange={handleChange} />\r\n                            <InputHsvField label=\"Value\" color={color} hsvKey=\"v\" max={100} scale={100} onChange={handleChange} />\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </PopoverSurface>\r\n        </Popover>\r\n    );\r\n};\r\n\r\ntype HsvKey = \"h\" | \"s\" | \"v\";\r\nexport type InputHexProps = BaseComponentProps<Color3 | Color4> & {\r\n    label?: string;\r\n    linearHex?: boolean;\r\n    isLinearMode?: boolean;\r\n};\r\n/**\r\n * Component which displays the passed in color's HEX value, either in linearSpace (if linearHex is true) or in gamma space\r\n * When the hex color is changed by user, component calculates the new Color3/4 value and calls onChange\r\n *\r\n * Component uses the isLinearMode boolean to display an informative label regarding linear / gamma space\r\n * @param props - The properties for the InputHexField component.\r\n * @returns\r\n */\r\nexport const InputHexField: FunctionComponent<InputHexProps> = (props) => {\r\n    const id = useId(\"hex-input\");\r\n    const styles = useColorPickerStyles();\r\n    const { label, value, onChange, linearHex, isLinearMode } = props;\r\n\r\n    const handleChange = (e: ChangeEvent<HTMLInputElement>, _: InputOnChangeData) => {\r\n        // If linearHint (aka PBR material, ensure the other values are displayed in gamma even if linear hex changes)\r\n        const value = e.target.value;\r\n        if (value != \"\" && /^[0-9A-Fa-f]+$/g.test(value) == false) {\r\n            return;\r\n        }\r\n        onChange(Color3.FromHexString(value).toGammaSpace());\r\n    };\r\n    return (\r\n        <div className={styles.colorFieldWrapper}>\r\n            {props.linearHex ? (\r\n                <InfoLabel\r\n                    htmlFor={id}\r\n                    info={\r\n                        !isLinearMode ? (\r\n                            <> This color picker is attached to an entity whose color is stored in gamma space, so we are showing linear hex in disabled view </>\r\n                        ) : (\r\n                            <>\r\n                                This color picker is attached to an entity whose color is stored in linear space (ex: PBR Material), and Babylon converts the color to gamma space\r\n                                before rendering on screen because the human eye is best at processing colors in gamma space. We thus also want to display the color picker in gamma\r\n                                space so that the color chosen here will match the color seen in your entity.\r\n                                <br />\r\n                                If you want to copy/paste the HEX into your code, you can either use\r\n                                <Body1Strong>Color3.FromHexString(LINEAR_HEX)</Body1Strong>\r\n                                <br />\r\n                                or\r\n                                <br />\r\n                                <Body1Strong>Color3.FromHexString(GAMMA_HEX).toLinearSpace()</Body1Strong>\r\n                                <br />\r\n                                <br />\r\n                                <Link href=\"https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/\"> Read more in our docs! </Link>\r\n                            </>\r\n                        )\r\n                    }\r\n                >\r\n                    {label}\r\n                </InfoLabel>\r\n            ) : (\r\n                <Label htmlFor={id}>{label}</Label>\r\n            )}\r\n            <Input\r\n                disabled={linearHex ? !isLinearMode : false}\r\n                className={styles.input}\r\n                value={linearHex ? value.toLinearSpace().toHexString() : value.toHexString()}\r\n                id={id}\r\n                onChange={handleChange}\r\n            />\r\n        </div>\r\n    );\r\n};\r\n\r\ntype RgbKey = \"r\" | \"g\" | \"b\";\r\ntype InputRgbFieldProps = {\r\n    color: Color3 | Color4;\r\n    label: string;\r\n    rgbKey: RgbKey;\r\n    onChange: (color: Color3 | Color4) => void;\r\n};\r\n\r\nconst InputRgbField: FunctionComponent<InputRgbFieldProps> = (props) => {\r\n    const { color, onChange, label, rgbKey } = props;\r\n    const id = useId(`${label.toLowerCase()}-input`);\r\n    const classes = useColorPickerStyles();\r\n\r\n    const handleChange = useCallback(\r\n        (_: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {\r\n            const val = data.value ?? parseFloat(data.displayValue ?? \"\");\r\n\r\n            if (val === null || Number.isNaN(val) || !NUMBER_REGEX.test(val.toString())) {\r\n                return;\r\n            }\r\n\r\n            const newColor = color.clone();\r\n            newColor[rgbKey] = val / 255.0; // Convert to 0-1 range\r\n            onChange(newColor);\r\n        },\r\n        [color]\r\n    );\r\n\r\n    return (\r\n        <div className={classes.colorFieldWrapper}>\r\n            <Label htmlFor={id}>{label}</Label>\r\n            <SpinButton className={classes.spinButton} min={0} max={255} value={color[rgbKey] * 255.0} step={1} id={id} onChange={handleChange} name={rgbKey} />\r\n        </div>\r\n    );\r\n};\r\n\r\ntype InputHsvFieldProps = {\r\n    color: Color3 | Color4;\r\n    label: string;\r\n    hsvKey: HsvKey;\r\n    onChange: (color: Color3 | Color4) => void;\r\n    max: number;\r\n    scale?: number;\r\n};\r\n\r\n/**\r\n * In the HSV (Hue, Saturation, Value) color model, Hue (H) ranges from 0 to 360 degrees, representing the color's position on the color wheel.\r\n * Saturation (S) ranges from 0 to 100%, indicating the intensity or purity of the color, with 0 being shades of gray and 100 being a fully saturated color.\r\n * Value (V) ranges from 0 to 100%, representing the brightness of the color, with 0 being black and 100 being the brightest.\r\n * @param props - The properties for the InputHsvField component.\r\n */\r\nexport const InputHsvField: FunctionComponent<InputHsvFieldProps> = (props) => {\r\n    const { color, label, hsvKey, max, scale = 1 } = props;\r\n\r\n    const id = useId(`${label.toLowerCase()}-input`);\r\n    const classes = useColorPickerStyles();\r\n\r\n    const handleChange = useCallback(\r\n        (_: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {\r\n            const val = data.value ?? parseFloat(data.displayValue ?? \"\");\r\n\r\n            if (val === null || Number.isNaN(val) || !NUMBER_REGEX.test(val.toString())) {\r\n                return;\r\n            }\r\n\r\n            // Convert current color to HSV, update the new hsv value, then call onChange prop\r\n            const hsv = rgbaToHsv(color);\r\n            hsv[hsvKey] = val / scale;\r\n            let newColor: Color3 | Color4 = Color3.FromHSV(hsv.h, hsv.s, hsv.v);\r\n            if (color instanceof Color4) {\r\n                newColor = Color4.FromColor3(newColor, color.a ?? 1);\r\n            }\r\n            props.onChange(newColor);\r\n        },\r\n        [color]\r\n    );\r\n\r\n    return (\r\n        <div className={classes.colorFieldWrapper}>\r\n            <Label htmlFor={id}>{label}</Label>\r\n            <SpinButton className={classes.spinButton} min={0} max={max} value={rgbaToHsv(color)[hsvKey] * scale} step={1} id={id} onChange={handleChange} name={hsvKey} />\r\n        </div>\r\n    );\r\n};\r\n\r\ntype InputAlphaProps = {\r\n    color: Color3 | Color4;\r\n    onChange: (color: Color4) => void;\r\n};\r\n\r\n/**\r\n * Displays the alpha value of a color, either in the disabled state (if color is Color3) or as a spin button (if color is Color4).\r\n * @param props\r\n * @returns\r\n */\r\nconst InputAlphaField: FunctionComponent<InputAlphaProps> = (props) => {\r\n    const classes = useColorPickerStyles();\r\n    const id = useId(\"alpha-input\");\r\n    const { color } = props;\r\n\r\n    const onChange = (_: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {\r\n        const value = data.value ?? parseFloat(data.displayValue ?? \"\");\r\n\r\n        if (Number.isNaN(value) || value < 0 || value > 1) {\r\n            return;\r\n        }\r\n\r\n        if (color instanceof Color4) {\r\n            const newColor = color.clone();\r\n            newColor.a = value;\r\n            return newColor;\r\n        } else {\r\n            return Color4.FromColor3(color, value);\r\n        }\r\n    };\r\n\r\n    return (\r\n        <div className={classes.colorFieldWrapper}>\r\n            <div className={classes.row}>\r\n                <Label htmlFor={id}>Alpha</Label>\r\n                {color instanceof Color3 && (\r\n                    <InfoLabel\r\n                        htmlFor={id}\r\n                        info={\r\n                            <>\r\n                                Because this color picker is representing a Color3, we do not permit modifying alpha from the color picker. You can however modify the material's\r\n                                alpha property directly, either in code via material.alpha OR via inspector's transparency section.\r\n                            </>\r\n                        }\r\n                    ></InfoLabel>\r\n                )}\r\n            </div>\r\n            <SpinButton\r\n                disabled={color instanceof Color3}\r\n                min={0}\r\n                max={1}\r\n                className={classes.spinButton}\r\n                value={color instanceof Color3 ? 1 : color.a}\r\n                step={0.01}\r\n                onChange={onChange}\r\n                id={id}\r\n            />\r\n        </div>\r\n    );\r\n};\r\n\r\nconst NUMBER_REGEX = /^\\d+$/;\r\n\r\nfunction rgbaToHsv(color: { r: number; g: number; b: number; a?: number }): { h: number; s: number; v: number; a?: number } {\r\n    const c = new Color3(color.r, color.g, color.b);\r\n    const hsv = c.toHSV();\r\n    return { h: hsv.r, s: hsv.g, v: hsv.b, a: color.a };\r\n}\r\n"]}
+{"version":3,"file":"colorPicker.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/colorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable jsdoc/require-returns */\r\n/* eslint-disable @typescript-eslint/naming-convention */\r\nimport { useState, useEffect, useCallback } from \"react\";\r\nimport type { FunctionComponent, ChangeEvent } from \"react\";\r\nimport {\r\n    Input,\r\n    Label,\r\n    SpinButton,\r\n    useId,\r\n    ColorPicker,\r\n    ColorSlider,\r\n    ColorArea,\r\n    AlphaSlider,\r\n    InfoLabel,\r\n    Link,\r\n    makeStyles,\r\n    Popover,\r\n    PopoverSurface,\r\n    PopoverTrigger,\r\n    tokens,\r\n    Body1Strong,\r\n    ColorSwatch,\r\n} from \"@fluentui/react-components\";\r\nimport type { SpinButtonChangeEvent, SpinButtonOnChangeData, ColorPickerProps as FluentColorPickerProps, InputOnChangeData } from \"@fluentui/react-components\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nconst useColorPickerStyles = makeStyles({\r\n    colorPickerContainer: {\r\n        width: \"325px\",\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacingVerticalMNudge, // 10px\r\n        overflow: \"visible\",\r\n    },\r\n    previewColor: {\r\n        width: \"50px\",\r\n        height: \"50px\",\r\n        borderRadius: tokens.borderRadiusMedium,\r\n        border: `${tokens.spacingVerticalXXS} solid ${tokens.colorNeutralShadowKeyLighter}`,\r\n        \"@media (forced-colors: active)\": {\r\n            forcedColorAdjust: \"none\", // ensures elmement maintains color in high constrast mode\r\n        },\r\n    },\r\n    row: {\r\n        display: \"flex\",\r\n        flexDirection: \"row\",\r\n        gap: tokens.spacingVerticalM, // 12px\r\n        alignItems: \"center\",\r\n    },\r\n    colorFieldWrapper: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacingVerticalSNudge, // 6px\r\n    },\r\n    input: {\r\n        width: \"80px\",\r\n    },\r\n    spinButton: {\r\n        minWidth: \"60px\",\r\n    },\r\n    container: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacingVerticalL, // 16px\r\n    },\r\n});\r\n\r\nexport type ColorPickerProps<C extends Color3 | Color4> = {\r\n    isLinearMode?: boolean;\r\n} & BaseComponentProps<C>;\r\n\r\nexport const ColorPickerPopup: FunctionComponent<ColorPickerProps<Color3 | Color4>> = (props) => {\r\n    const classes = useColorPickerStyles();\r\n    const [color, setColor] = useState(props.value);\r\n\r\n    const [popoverOpen, setPopoverOpen] = useState(false);\r\n\r\n    useEffect(() => {\r\n        setColor(props.value); // Ensures the trigger color updates when props.value changes\r\n    }, [props.value]);\r\n\r\n    const handleColorPickerChange: FluentColorPickerProps[\"onColorChange\"] = (_, data) => {\r\n        let color: Color3 | Color4 = Color3.FromHSV(data.color.h, data.color.s, data.color.v);\r\n        if (props.value instanceof Color4) {\r\n            color = Color4.FromColor3(color, data.color.a ?? 1);\r\n        }\r\n        handleChange(color);\r\n    };\r\n\r\n    const handleChange = (newColor: Color3 | Color4) => {\r\n        setColor(newColor);\r\n        props.onChange(newColor); // Ensures the parent is notified when color changes from within colorPicker\r\n    };\r\n\r\n    return (\r\n        <Popover\r\n            positioning={{\r\n                align: \"start\",\r\n                overflowBoundary: document.body,\r\n                autoSize: true,\r\n            }}\r\n            open={popoverOpen}\r\n            trapFocus\r\n            onOpenChange={(_, data) => setPopoverOpen(data.open)}\r\n        >\r\n            <PopoverTrigger disableButtonEnhancement>\r\n                <ColorSwatch borderColor={tokens.colorNeutralShadowKeyDarker} size=\"small\" color={color.toHexString()} value={color.toHexString().slice(1)} />\r\n            </PopoverTrigger>\r\n\r\n            <PopoverSurface>\r\n                <div className={classes.colorPickerContainer}>\r\n                    <ColorPicker color={rgbaToHsv(color)} onColorChange={handleColorPickerChange}>\r\n                        <ColorArea inputX={{ \"aria-label\": \"Saturation\" }} inputY={{ \"aria-label\": \"Brightness\" }} />\r\n                        <ColorSlider aria-label=\"Hue\" />\r\n                        {color instanceof Color4 && <AlphaSlider aria-label=\"Alpha\" />}\r\n                    </ColorPicker>\r\n                    <div className={classes.container}>\r\n                        {/* Top Row: Preview, Gamma Hex, Linear Hex */}\r\n                        <div className={classes.row}>\r\n                            <div className={classes.previewColor} style={{ backgroundColor: color.toHexString() }} />\r\n                            <InputHexField label=\"Gamma Hex\" value={color} isLinearMode={props.isLinearMode} onChange={handleChange} />\r\n                            <InputHexField label=\"Linear Hex\" linearHex={true} isLinearMode={props.isLinearMode} value={color} onChange={handleChange} />\r\n                        </div>\r\n\r\n                        {/* Middle Row: Red, Green, Blue, Alpha */}\r\n                        <div className={classes.row}>\r\n                            <InputRgbField label=\"Red\" color={color} rgbKey=\"r\" onChange={handleChange} />\r\n                            <InputRgbField label=\"Green\" color={color} rgbKey=\"g\" onChange={handleChange} />\r\n                            <InputRgbField label=\"Blue\" color={color} rgbKey=\"b\" onChange={handleChange} />\r\n                            <InputAlphaField color={color} onChange={handleChange} />\r\n                        </div>\r\n\r\n                        {/* Bottom Row: Hue, Saturation, Value */}\r\n                        <div className={classes.row}>\r\n                            <InputHsvField label=\"Hue\" color={color} hsvKey=\"h\" max={360} onChange={handleChange} />\r\n                            <InputHsvField label=\"Saturation\" color={color} hsvKey=\"s\" max={100} scale={100} onChange={handleChange} />\r\n                            <InputHsvField label=\"Value\" color={color} hsvKey=\"v\" max={100} scale={100} onChange={handleChange} />\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </PopoverSurface>\r\n        </Popover>\r\n    );\r\n};\r\n\r\ntype HsvKey = \"h\" | \"s\" | \"v\";\r\nexport type InputHexProps = BaseComponentProps<Color3 | Color4> & {\r\n    label?: string;\r\n    linearHex?: boolean;\r\n    isLinearMode?: boolean;\r\n};\r\n/**\r\n * Component which displays the passed in color's HEX value, either in linearSpace (if linearHex is true) or in gamma space\r\n * When the hex color is changed by user, component calculates the new Color3/4 value and calls onChange\r\n *\r\n * Component uses the isLinearMode boolean to display an informative label regarding linear / gamma space\r\n * @param props - The properties for the InputHexField component.\r\n * @returns\r\n */\r\nexport const InputHexField: FunctionComponent<InputHexProps> = (props) => {\r\n    const id = useId(\"hex-input\");\r\n    const styles = useColorPickerStyles();\r\n    const { label, value, onChange, linearHex, isLinearMode } = props;\r\n\r\n    const handleChange = (e: ChangeEvent<HTMLInputElement>, _: InputOnChangeData) => {\r\n        // If linearHint (aka PBR material, ensure the other values are displayed in gamma even if linear hex changes)\r\n        const value = e.target.value;\r\n        if (value != \"\" && /^[0-9A-Fa-f]+$/g.test(value) == false) {\r\n            return;\r\n        }\r\n        onChange(Color3.FromHexString(value).toGammaSpace());\r\n    };\r\n    return (\r\n        <div className={styles.colorFieldWrapper}>\r\n            {props.linearHex ? (\r\n                <InfoLabel\r\n                    htmlFor={id}\r\n                    info={\r\n                        !isLinearMode ? (\r\n                            <> This color picker is attached to an entity whose color is stored in gamma space, so we are showing linear hex in disabled view </>\r\n                        ) : (\r\n                            <>\r\n                                This color picker is attached to an entity whose color is stored in linear space (ex: PBR Material), and Babylon converts the color to gamma space\r\n                                before rendering on screen because the human eye is best at processing colors in gamma space. We thus also want to display the color picker in gamma\r\n                                space so that the color chosen here will match the color seen in your entity.\r\n                                <br />\r\n                                If you want to copy/paste the HEX into your code, you can either use\r\n                                <Body1Strong>Color3.FromHexString(LINEAR_HEX)</Body1Strong>\r\n                                <br />\r\n                                or\r\n                                <br />\r\n                                <Body1Strong>Color3.FromHexString(GAMMA_HEX).toLinearSpace()</Body1Strong>\r\n                                <br />\r\n                                <br />\r\n                                <Link href=\"https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/\"> Read more in our docs! </Link>\r\n                            </>\r\n                        )\r\n                    }\r\n                >\r\n                    {label}\r\n                </InfoLabel>\r\n            ) : (\r\n                <Label htmlFor={id}>{label}</Label>\r\n            )}\r\n            <Input\r\n                disabled={linearHex ? !isLinearMode : false}\r\n                className={styles.input}\r\n                value={linearHex ? value.toLinearSpace().toHexString() : value.toHexString()}\r\n                id={id}\r\n                onChange={handleChange}\r\n            />\r\n        </div>\r\n    );\r\n};\r\n\r\ntype RgbKey = \"r\" | \"g\" | \"b\";\r\ntype InputRgbFieldProps = {\r\n    color: Color3 | Color4;\r\n    label: string;\r\n    rgbKey: RgbKey;\r\n    onChange: (color: Color3 | Color4) => void;\r\n};\r\n\r\nconst InputRgbField: FunctionComponent<InputRgbFieldProps> = (props) => {\r\n    const { color, onChange, label, rgbKey } = props;\r\n    const id = useId(`${label.toLowerCase()}-input`);\r\n    const classes = useColorPickerStyles();\r\n\r\n    const handleChange = useCallback(\r\n        (_: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {\r\n            const val = data.value ?? parseFloat(data.displayValue ?? \"\");\r\n\r\n            if (val === null || Number.isNaN(val) || !NUMBER_REGEX.test(val.toString())) {\r\n                return;\r\n            }\r\n\r\n            const newColor = color.clone();\r\n            newColor[rgbKey] = val / 255.0; // Convert to 0-1 range\r\n            onChange(newColor);\r\n        },\r\n        [color]\r\n    );\r\n\r\n    return (\r\n        <div className={classes.colorFieldWrapper}>\r\n            <Label htmlFor={id}>{label}</Label>\r\n            <SpinButton className={classes.spinButton} min={0} max={255} value={color[rgbKey] * 255.0} step={1} id={id} onChange={handleChange} name={rgbKey} />\r\n        </div>\r\n    );\r\n};\r\n\r\ntype InputHsvFieldProps = {\r\n    color: Color3 | Color4;\r\n    label: string;\r\n    hsvKey: HsvKey;\r\n    onChange: (color: Color3 | Color4) => void;\r\n    max: number;\r\n    scale?: number;\r\n};\r\n\r\n/**\r\n * In the HSV (Hue, Saturation, Value) color model, Hue (H) ranges from 0 to 360 degrees, representing the color's position on the color wheel.\r\n * Saturation (S) ranges from 0 to 100%, indicating the intensity or purity of the color, with 0 being shades of gray and 100 being a fully saturated color.\r\n * Value (V) ranges from 0 to 100%, representing the brightness of the color, with 0 being black and 100 being the brightest.\r\n * @param props - The properties for the InputHsvField component.\r\n */\r\nexport const InputHsvField: FunctionComponent<InputHsvFieldProps> = (props) => {\r\n    const { color, label, hsvKey, max, scale = 1 } = props;\r\n\r\n    const id = useId(`${label.toLowerCase()}-input`);\r\n    const classes = useColorPickerStyles();\r\n\r\n    const handleChange = useCallback(\r\n        (_: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {\r\n            const val = data.value ?? parseFloat(data.displayValue ?? \"\");\r\n\r\n            if (val === null || Number.isNaN(val) || !NUMBER_REGEX.test(val.toString())) {\r\n                return;\r\n            }\r\n\r\n            // Convert current color to HSV, update the new hsv value, then call onChange prop\r\n            const hsv = rgbaToHsv(color);\r\n            hsv[hsvKey] = val / scale;\r\n            let newColor: Color3 | Color4 = Color3.FromHSV(hsv.h, hsv.s, hsv.v);\r\n            if (color instanceof Color4) {\r\n                newColor = Color4.FromColor3(newColor, color.a ?? 1);\r\n            }\r\n            props.onChange(newColor);\r\n        },\r\n        [color]\r\n    );\r\n\r\n    return (\r\n        <div className={classes.colorFieldWrapper}>\r\n            <Label htmlFor={id}>{label}</Label>\r\n            <SpinButton className={classes.spinButton} min={0} max={max} value={rgbaToHsv(color)[hsvKey] * scale} step={1} id={id} onChange={handleChange} name={hsvKey} />\r\n        </div>\r\n    );\r\n};\r\n\r\ntype InputAlphaProps = {\r\n    color: Color3 | Color4;\r\n    onChange: (color: Color4) => void;\r\n};\r\n\r\n/**\r\n * Displays the alpha value of a color, either in the disabled state (if color is Color3) or as a spin button (if color is Color4).\r\n * @param props\r\n * @returns\r\n */\r\nconst InputAlphaField: FunctionComponent<InputAlphaProps> = (props) => {\r\n    const classes = useColorPickerStyles();\r\n    const id = useId(\"alpha-input\");\r\n    const { color } = props;\r\n\r\n    const onChange = (_: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {\r\n        const value = data.value ?? parseFloat(data.displayValue ?? \"\");\r\n\r\n        if (Number.isNaN(value) || value < 0 || value > 1) {\r\n            return;\r\n        }\r\n\r\n        if (color instanceof Color4) {\r\n            const newColor = color.clone();\r\n            newColor.a = value;\r\n            return newColor;\r\n        } else {\r\n            return Color4.FromColor3(color, value);\r\n        }\r\n    };\r\n\r\n    return (\r\n        <div className={classes.colorFieldWrapper}>\r\n            <div className={classes.row}>\r\n                <Label htmlFor={id}>Alpha</Label>\r\n                {color instanceof Color3 && (\r\n                    <InfoLabel\r\n                        htmlFor={id}\r\n                        info={\r\n                            <>\r\n                                Because this color picker is representing a Color3, we do not permit modifying alpha from the color picker. You can however modify the material's\r\n                                alpha property directly, either in code via material.alpha OR via inspector's transparency section.\r\n                            </>\r\n                        }\r\n                    ></InfoLabel>\r\n                )}\r\n            </div>\r\n            <SpinButton\r\n                disabled={color instanceof Color3}\r\n                min={0}\r\n                max={1}\r\n                className={classes.spinButton}\r\n                value={color instanceof Color3 ? 1 : color.a}\r\n                step={0.01}\r\n                onChange={onChange}\r\n                id={id}\r\n            />\r\n        </div>\r\n    );\r\n};\r\n\r\nconst NUMBER_REGEX = /^\\d+$/;\r\n\r\nfunction rgbaToHsv(color: { r: number; g: number; b: number; a?: number }): { h: number; s: number; v: number; a?: number } {\r\n    const c = new Color3(color.r, color.g, color.b);\r\n    const hsv = c.toHSV();\r\n    return { h: hsv.r, s: hsv.g, v: hsv.b, a: color.a };\r\n}\r\n"]}

package/fluent/primitives/gradient.d.ts

@@ -0,0 +1,28 @@
+import type { FunctionComponent } from "react";
+import type { BaseComponentProps } from "../hoc/propertyLine.js";
+import { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from "@babylonjs/core/Misc/gradients.js";
+import { GradientBlockColorStep } from "@babylonjs/core/Materials/Node/Blocks/gradientBlock.js";
+/**
+ * Component wrapper for FactorGradient that provides slider inputs for factor1, factor2, and gradient step
+ * @param props - Component props containing FactorGradient value and change handler
+ * @returns A React component
+ */
+export declare const FactorGradientComponent: FunctionComponent<BaseComponentProps<FactorGradient>>;
+/**
+ * Component wrapper for Color3Gradient that provides color picker and gradient step slider
+ * @param props - Component props containing Color3Gradient value and change handler
+ * @returns A React component
+ */
+export declare const Color3GradientComponent: FunctionComponent<BaseComponentProps<Color3Gradient>>;
+/**
+ * Component wrapper for Color4Gradient that provides color pickers for color1, color2, and gradient step slider
+ * @param props - Component props containing Color4Gradient value and change handler
+ * @returns A React component
+ */
+export declare const Color4GradientComponent: FunctionComponent<BaseComponentProps<Color4Gradient>>;
+/**
+ * Component wrapper for GradientBlockColorStep that provides color picker and step slider
+ * @param props - Component props containing GradientBlockColorStep value and change handler
+ * @returns A React component
+ */
+export declare const ColorStepGradientComponent: FunctionComponent<BaseComponentProps<GradientBlockColorStep>>;

package/fluent/primitives/gradient.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { makeStyles, tokens } from "@fluentui/react-components";
+import { SyncedSliderInput } from "./syncedSlider.js";
+import { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
+import { ColorPickerPopup } from "./colorPicker.js";
+import { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from "@babylonjs/core/Misc/gradients.js";
+import { GradientBlockColorStep } from "@babylonjs/core/Materials/Node/Blocks/gradientBlock.js";
+const useGradientStyles = makeStyles({
+    container: {
+        display: "flex",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalS,
+        width: "100%",
+    },
+    // Wrapper for each slider to control its size
+    valueWrapper: {
+        flex: "0 1 auto", // Don't grow, can shrink, size based on content
+        alignContent: "center",
+        minWidth: "80px", // Minimum width to keep usable
+        maxWidth: "100px", // Maximum width to prevent them from getting too wide
+    },
+    // Wrapper for color pickers - much smaller since they're just swatches
+    colorWrapper: {
+        alignContent: "center",
+        // No flex properties - just take natural size
+    },
+    // Wrapper for the step slider to take remaining space
+    stepSliderWrapper: {
+        flex: "1 0 auto", // Can grow, don't shrink, size based on content
+        minWidth: "100px",
+    },
+});
+/**
+ * Gradient component that displays 1 or 2 color or number inputs next to a slider
+ * @param props - Component props containing gradient value and change handlers
+ * @returns A React component
+ */
+const Gradient = (props) => {
+    const [gradient, setGradient] = useState(props.value);
+    const classes = useGradientStyles();
+    useEffect(() => {
+        setGradient(props.value); // Re-render if props.value changes
+    }, [props.value]);
+    const gradientChange = (newGradient) => {
+        setGradient(newGradient);
+        props.onChange(newGradient);
+    };
+    return (_jsxs("div", { id: "gradientContainer", className: classes.container, children: [_jsx("div", { className: gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper, children: gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? (_jsx(ColorPickerPopup, { value: gradient.value1, onChange: (color) => gradientChange({ ...gradient, value1: color }) })) : (_jsx(SyncedSliderInput, { step: 0.01, value: gradient.value1, onChange: (val) => gradientChange({ ...gradient, value1: val }) })) }), gradient.value2 !== undefined && (_jsx("div", { className: gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper, children: gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? (_jsx(ColorPickerPopup, { value: gradient.value2, onChange: (color) => gradientChange({ ...gradient, value2: color }) })) : (_jsx(SyncedSliderInput, { step: 0.01, value: gradient.value2, onChange: (val) => gradientChange({ ...gradient, value2: val }) })) })), _jsx("div", { className: classes.stepSliderWrapper, children: _jsx(SyncedSliderInput, { notifyOnlyOnRelease: true, min: 0, max: 1, step: 0.01, value: gradient.step, onChange: (val) => gradientChange({ ...gradient, step: val }) }) })] }));
+};
+const FactorGradientCast = Gradient;
+const Color3GradientCast = Gradient;
+const Color4GradientCast = Gradient;
+/**
+ * Component wrapper for FactorGradient that provides slider inputs for factor1, factor2, and gradient step
+ * @param props - Component props containing FactorGradient value and change handler
+ * @returns A React component
+ */
+export const FactorGradientComponent = (props) => {
+    return (_jsx(FactorGradientCast, { ...props, value: { value1: props.value.factor1, value2: props.value.factor2, step: props.value.gradient }, onChange: (gradient) => props.onChange(new FactorGradient(gradient.step, gradient.value1, gradient.value2)) }));
+};
+/**
+ * Component wrapper for Color3Gradient that provides color picker and gradient step slider
+ * @param props - Component props containing Color3Gradient value and change handler
+ * @returns A React component
+ */
+export const Color3GradientComponent = (props) => {
+    return (_jsx(Color3GradientCast, { ...props, value: { value1: props.value.color, step: props.value.gradient }, onChange: (gradient) => props.onChange(new Color3Gradient(gradient.step, gradient.value1)) }));
+};
+/**
+ * Component wrapper for Color4Gradient that provides color pickers for color1, color2, and gradient step slider
+ * @param props - Component props containing Color4Gradient value and change handler
+ * @returns A React component
+ */
+export const Color4GradientComponent = (props) => {
+    return (_jsx(Color4GradientCast, { ...props, value: { value1: props.value.color1, value2: props.value.color2, step: props.value.gradient }, onChange: (gradient) => props.onChange(new Color4Gradient(gradient.step, gradient.value1, gradient.value2)) }));
+};
+/**
+ * Component wrapper for GradientBlockColorStep that provides color picker and step slider
+ * @param props - Component props containing GradientBlockColorStep value and change handler
+ * @returns A React component
+ */
+export const ColorStepGradientComponent = (props) => {
+    return (_jsx(Color3GradientCast, { ...props, value: { value1: props.value.color, step: props.value.step }, onChange: (gradient) => props.onChange(new GradientBlockColorStep(gradient.step, gradient.value1)) }));
+};
+//# sourceMappingURL=gradient.js.map

package/fluent/primitives/gradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradient.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/gradient.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport { useEffect, useState } from \"react\";\r\nimport { makeStyles, tokens } from \"@fluentui/react-components\";\r\n\r\nimport { SyncedSliderInput } from \"./syncedSlider\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport { ColorPickerPopup } from \"./colorPicker\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\nimport { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from \"core/Misc/gradients\";\r\nimport { GradientBlockColorStep } from \"core/Materials/Node/Blocks/gradientBlock\";\r\n\r\nconst useGradientStyles = makeStyles({\r\n    container: {\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        gap: tokens.spacingHorizontalS,\r\n        width: \"100%\",\r\n    },\r\n    // Wrapper for each slider to control its size\r\n    valueWrapper: {\r\n        flex: \"0 1 auto\", // Don't grow, can shrink, size based on content\r\n        alignContent: \"center\",\r\n        minWidth: \"80px\", // Minimum width to keep usable\r\n        maxWidth: \"100px\", // Maximum width to prevent them from getting too wide\r\n    },\r\n    // Wrapper for color pickers - much smaller since they're just swatches\r\n    colorWrapper: {\r\n        alignContent: \"center\",\r\n        // No flex properties - just take natural size\r\n    },\r\n    // Wrapper for the step slider to take remaining space\r\n    stepSliderWrapper: {\r\n        flex: \"1 0 auto\", // Can grow, don't shrink, size based on content\r\n        minWidth: \"100px\",\r\n    },\r\n});\r\n\r\ntype GradientProps<T extends number | Color3 | Color4> = {\r\n    value1: T;\r\n    value2?: T;\r\n    step: number;\r\n};\r\n\r\n/**\r\n * Gradient component that displays 1 or 2 color or number inputs next to a slider\r\n * @param props - Component props containing gradient value and change handlers\r\n * @returns A React component\r\n */\r\nconst Gradient: FunctionComponent<BaseComponentProps<GradientProps<number | Color3 | Color4>>> = (props) => {\r\n    const [gradient, setGradient] = useState(props.value);\r\n    const classes = useGradientStyles();\r\n\r\n    useEffect(() => {\r\n        setGradient(props.value); // Re-render if props.value changes\r\n    }, [props.value]);\r\n\r\n    const gradientChange = (newGradient: GradientProps<number | Color3 | Color4>) => {\r\n        setGradient(newGradient);\r\n        props.onChange(newGradient);\r\n    };\r\n    return (\r\n        <div id=\"gradientContainer\" className={classes.container}>\r\n            <div className={gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper}>\r\n                {gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? (\r\n                    <ColorPickerPopup value={gradient.value1} onChange={(color) => gradientChange({ ...gradient, value1: color })} />\r\n                ) : (\r\n                    <SyncedSliderInput step={0.01} value={gradient.value1} onChange={(val) => gradientChange({ ...gradient, value1: val })} />\r\n                )}\r\n            </div>\r\n            {gradient.value2 !== undefined && (\r\n                <div className={gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper}>\r\n                    {gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? (\r\n                        <ColorPickerPopup value={gradient.value2} onChange={(color) => gradientChange({ ...gradient, value2: color })} />\r\n                    ) : (\r\n                        <SyncedSliderInput step={0.01} value={gradient.value2} onChange={(val) => gradientChange({ ...gradient, value2: val })} />\r\n                    )}\r\n                </div>\r\n            )}\r\n\r\n            <div className={classes.stepSliderWrapper}>\r\n                <SyncedSliderInput notifyOnlyOnRelease={true} min={0} max={1} step={0.01} value={gradient.step} onChange={(val) => gradientChange({ ...gradient, step: val })} />\r\n            </div>\r\n        </div>\r\n    );\r\n};\r\n\r\nconst FactorGradientCast = Gradient as FunctionComponent<BaseComponentProps<GradientProps<number>>>;\r\nconst Color3GradientCast = Gradient as FunctionComponent<BaseComponentProps<GradientProps<Color3>>>;\r\nconst Color4GradientCast = Gradient as FunctionComponent<BaseComponentProps<GradientProps<Color4>>>;\r\n\r\n/**\r\n * Component wrapper for FactorGradient that provides slider inputs for factor1, factor2, and gradient step\r\n * @param props - Component props containing FactorGradient value and change handler\r\n * @returns A React component\r\n */\r\nexport const FactorGradientComponent: FunctionComponent<BaseComponentProps<FactorGradient>> = (props) => {\r\n    return (\r\n        <FactorGradientCast\r\n            {...props}\r\n            value={{ value1: props.value.factor1, value2: props.value.factor2, step: props.value.gradient }}\r\n            onChange={(gradient) => props.onChange(new FactorGradient(gradient.step, gradient.value1, gradient.value2))}\r\n        />\r\n    );\r\n};\r\n/**\r\n * Component wrapper for Color3Gradient that provides color picker and gradient step slider\r\n * @param props - Component props containing Color3Gradient value and change handler\r\n * @returns A React component\r\n */\r\nexport const Color3GradientComponent: FunctionComponent<BaseComponentProps<Color3Gradient>> = (props) => {\r\n    return (\r\n        <Color3GradientCast\r\n            {...props}\r\n            value={{ value1: props.value.color, step: props.value.gradient }}\r\n            onChange={(gradient) => props.onChange(new Color3Gradient(gradient.step, gradient.value1))}\r\n        />\r\n    );\r\n};\r\n/**\r\n * Component wrapper for Color4Gradient that provides color pickers for color1, color2, and gradient step slider\r\n * @param props - Component props containing Color4Gradient value and change handler\r\n * @returns A React component\r\n */\r\nexport const Color4GradientComponent: FunctionComponent<BaseComponentProps<Color4Gradient>> = (props) => {\r\n    return (\r\n        <Color4GradientCast\r\n            {...props}\r\n            value={{ value1: props.value.color1, value2: props.value.color2, step: props.value.gradient }}\r\n            onChange={(gradient) => props.onChange(new Color4Gradient(gradient.step, gradient.value1, gradient.value2))}\r\n        />\r\n    );\r\n};\r\n/**\r\n * Component wrapper for GradientBlockColorStep that provides color picker and step slider\r\n * @param props - Component props containing GradientBlockColorStep value and change handler\r\n * @returns A React component\r\n */\r\nexport const ColorStepGradientComponent: FunctionComponent<BaseComponentProps<GradientBlockColorStep>> = (props) => {\r\n    return (\r\n        <Color3GradientCast\r\n            {...props}\r\n            value={{ value1: props.value.color, step: props.value.step }}\r\n            onChange={(gradient) => props.onChange(new GradientBlockColorStep(gradient.step, gradient.value1))}\r\n        />\r\n    );\r\n};\r\n"]}

package/fluent/primitives/input.d.ts

@@ -6,9 +6,5 @@ export type InputProps<T extends string | number> = BaseComponentProps<T> & {
     min?: number;
     max?: number;
 };
-/**
- * This is an input text box that stops propagation of change events and sets its width based on the type of input (text or number)
- * @param props
- * @returns
- */
-export declare const Input: FunctionComponent<InputProps<string | number>>;
+export declare const NumberInput: FunctionComponent<InputProps<number>>;
+export declare const TextInput: FunctionComponent<InputProps<string>>;

package/fluent/primitives/input.js

@@ -5,11 +5,11 @@ const useInputStyles = makeStyles({
     text: {
         height: "auto",
         textAlign: "right",
+        minWidth: "100px", // Min width for text input
     },
-    float: {
+    number: {
         height: "auto",
-        width: "80px", // Fixed width for number input
-        flexShrink: 0,
+        minWidth: "40px", // Min width for number input
     },
 });
 /**
@@ -17,22 +17,25 @@ const useInputStyles = makeStyles({
  * @param props
  * @returns
  */
-export const Input = (props) => {
+const Input = (props) => {
     const classes = useInputStyles();
     const [value, setValue] = useState(props.value ?? "");
-    const type = typeof props.value === "number" ? "number" : "text";
     useEffect(() => {
         setValue(props.value ?? ""); // Update local state when props.value changes
     }, [props.value]);
     const handleChange = (event, _) => {
         event.stopPropagation(); // Prevent event propagation
-        const value = type === "number" ? Number(event.target.value) : String(event.target.value);
+        const value = props.type === "number" ? Number(event.target.value) : String(event.target.value);
         props.onChange(value); // Call the original onChange handler passed as prop
         setValue(value); // Update local state with the new value
     };
     const handleKeyDown = (event) => {
         event.stopPropagation(); // Prevent event propagation
     };
-    return (_jsx(FluentInput, { ...props, type: type, size: "small", value: value.toString(), className: typeof props.value === "number" ? classes.float : classes.text, onChange: handleChange, onKeyDown: handleKeyDown }));
+    return (_jsx(FluentInput, { ...props, size: "small", value: value.toString(), className: props.type === "number" ? classes.number : classes.text, onChange: handleChange, onKeyDown: handleKeyDown }));
 };
+const NumberInputCast = Input;
+const TextInputCast = Input;
+export const NumberInput = (props) => _jsx(NumberInputCast, { ...props, type: "number" });
+export const TextInput = (props) => _jsx(TextInputCast, { ...props, type: "text" });
 //# sourceMappingURL=input.js.map

package/fluent/primitives/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/input.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAG9E,MAAM,cAAc,GAAG,UAAU,CAAC;IAC9B,IAAI,EAAE;QACF,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,OAAO;KACrB;IACD,KAAK,EAAE;QACH,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM,EAAE,+BAA+B;QAC9C,UAAU,EAAE,CAAC;KAChB;CACJ,CAAC,CAAC;AAQH;;;;GAIG;AACH,MAAM,CAAC,MAAM,KAAK,GAAmD,CAAC,KAAK,EAAE,EAAE;IAC3E,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAEtD,MAAM,IAAI,GAAG,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;IAEjE,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,8CAA8C;IAC/E,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,CAAU,EAAE,EAAE;QACtE,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;QACrD,MAAM,KAAK,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC1F,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,oDAAoD;QAC3E,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,wCAAwC;IAC7D,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC7D,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;IACzD,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,WAAW,OACJ,KAAK,EACT,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,EACvB,SAAS,EAAE,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,EACzE,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,aAAa,GAC1B,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FunctionComponent, KeyboardEvent, ChangeEvent } from \"react\";\r\nimport { useEffect, useState } from \"react\";\r\n\r\nimport { Input as FluentInput, makeStyles } from \"@fluentui/react-components\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nconst useInputStyles = makeStyles({\r\n    text: {\r\n        height: \"auto\",\r\n        textAlign: \"right\",\r\n    },\r\n    float: {\r\n        height: \"auto\",\r\n        width: \"80px\", // Fixed width for number input\r\n        flexShrink: 0,\r\n    },\r\n});\r\n\r\nexport type InputProps<T extends string | number> = BaseComponentProps<T> & {\r\n    step?: number;\r\n    placeholder?: string;\r\n    min?: number;\r\n    max?: number;\r\n};\r\n/**\r\n * This is an input text box that stops propagation of change events and sets its width based on the type of input (text or number)\r\n * @param props\r\n * @returns\r\n */\r\nexport const Input: FunctionComponent<InputProps<string | number>> = (props) => {\r\n    const classes = useInputStyles();\r\n    const [value, setValue] = useState(props.value ?? \"\");\r\n\r\n    const type = typeof props.value === \"number\" ? \"number\" : \"text\";\r\n\r\n    useEffect(() => {\r\n        setValue(props.value ?? \"\"); // Update local state when props.value changes\r\n    }, [props.value]);\r\n\r\n    const handleChange = (event: ChangeEvent<HTMLInputElement>, _: unknown) => {\r\n        event.stopPropagation(); // Prevent event propagation\r\n        const value = type === \"number\" ? Number(event.target.value) : String(event.target.value);\r\n        props.onChange(value); // Call the original onChange handler passed as prop\r\n        setValue(value); // Update local state with the new value\r\n    };\r\n\r\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\r\n        event.stopPropagation(); // Prevent event propagation\r\n    };\r\n\r\n    return (\r\n        <FluentInput\r\n            {...props}\r\n            type={type}\r\n            size=\"small\"\r\n            value={value.toString()}\r\n            className={typeof props.value === \"number\" ? classes.float : classes.text}\r\n            onChange={handleChange}\r\n            onKeyDown={handleKeyDown}\r\n        />\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/input.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAG9E,MAAM,cAAc,GAAG,UAAU,CAAC;IAC9B,IAAI,EAAE;QACF,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,OAAO;QAClB,QAAQ,EAAE,OAAO,EAAE,2BAA2B;KACjD;IACD,MAAM,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,MAAM,EAAE,6BAA6B;KAClD;CACJ,CAAC,CAAC;AAQH;;;;GAIG;AACH,MAAM,KAAK,GAAiF,CAAC,KAAK,EAAE,EAAE;IAClG,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,8CAA8C;IAC/E,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,CAAU,EAAE,EAAE;QACtE,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;QACrD,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAChG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,oDAAoD;QAC3E,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,wCAAwC;IAC7D,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC7D,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;IACzD,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,WAAW,OACJ,KAAK,EACT,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,EACvB,SAAS,EAAE,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,EAClE,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,aAAa,GAC1B,CACL,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,KAAmE,CAAC;AAC5F,MAAM,aAAa,GAAG,KAAiE,CAAC;AAExF,MAAM,CAAC,MAAM,WAAW,GAA0C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,eAAe,OAAK,KAAK,EAAE,IAAI,EAAC,QAAQ,GAAG,CAAC;AAC1H,MAAM,CAAC,MAAM,SAAS,GAA0C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,aAAa,OAAK,KAAK,EAAE,IAAI,EAAC,MAAM,GAAG,CAAC","sourcesContent":["import type { FunctionComponent, KeyboardEvent, ChangeEvent } from \"react\";\r\nimport { useEffect, useState } from \"react\";\r\n\r\nimport { Input as FluentInput, makeStyles } from \"@fluentui/react-components\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nconst useInputStyles = makeStyles({\r\n    text: {\r\n        height: \"auto\",\r\n        textAlign: \"right\",\r\n        minWidth: \"100px\", // Min width for text input\r\n    },\r\n    number: {\r\n        height: \"auto\",\r\n        minWidth: \"40px\", // Min width for number input\r\n    },\r\n});\r\n\r\nexport type InputProps<T extends string | number> = BaseComponentProps<T> & {\r\n    step?: number;\r\n    placeholder?: string;\r\n    min?: number;\r\n    max?: number;\r\n};\r\n/**\r\n * This is an input text box that stops propagation of change events and sets its width based on the type of input (text or number)\r\n * @param props\r\n * @returns\r\n */\r\nconst Input: FunctionComponent<InputProps<string | number> & { type: \"text\" | \"number\" }> = (props) => {\r\n    const classes = useInputStyles();\r\n    const [value, setValue] = useState(props.value ?? \"\");\r\n\r\n    useEffect(() => {\r\n        setValue(props.value ?? \"\"); // Update local state when props.value changes\r\n    }, [props.value]);\r\n\r\n    const handleChange = (event: ChangeEvent<HTMLInputElement>, _: unknown) => {\r\n        event.stopPropagation(); // Prevent event propagation\r\n        const value = props.type === \"number\" ? Number(event.target.value) : String(event.target.value);\r\n        props.onChange(value); // Call the original onChange handler passed as prop\r\n        setValue(value); // Update local state with the new value\r\n    };\r\n\r\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\r\n        event.stopPropagation(); // Prevent event propagation\r\n    };\r\n\r\n    return (\r\n        <FluentInput\r\n            {...props}\r\n            size=\"small\"\r\n            value={value.toString()}\r\n            className={props.type === \"number\" ? classes.number : classes.text}\r\n            onChange={handleChange}\r\n            onKeyDown={handleKeyDown}\r\n        />\r\n    );\r\n};\r\n\r\nconst NumberInputCast = Input as FunctionComponent<InputProps<number> & { type: \"number\" }>;\r\nconst TextInputCast = Input as FunctionComponent<InputProps<string> & { type: \"text\" }>;\r\n\r\nexport const NumberInput: FunctionComponent<InputProps<number>> = (props) => <NumberInputCast {...props} type=\"number\" />;\r\nexport const TextInput: FunctionComponent<InputProps<string>> = (props) => <TextInputCast {...props} type=\"text\" />;\r\n"]}