@rivtn/noseur 1.0.0 → 1.0.1

package/dist/esm/compose/Composed.css

@@ -435,3 +435,29 @@ input.noseur-fctrl-cc {
   padding: 0px 7px;
   margin: 0px 15px -6px 15px;
 }
+
+/* ColorPicker */
+.noseur-color-picker-modal,
+.noseur-color-picker-inline,
+.noseur-color-picker-popover {
+  padding: 15px;
+  border-radius: 7px;
+  border: 1px solid var(--noseurSchemeDataBorderColor, rgb(145, 144, 144));
+}
+
+.noseur-color-picker-modal {
+  width: auto !important;
+  padding: 0px !important;
+}
+
+.noseur-color-picker-modal .noseur-color-picker-layout-column {
+  flex: 1;
+}
+
+.noseur-color-picker-popover {
+  background: var(--containerBackground, white);
+}
+
+.noseur-color-picker-popover {
+  margin: 15px;
+}

package/dist/esm/compose/exotic/ColorPicker.d.ts

@@ -1,9 +1,9 @@
 import "../Composed.css";
 import React from "react";
-import { ColorEventHandler } from "../../constants/Types";
+import { Color, ColorEventHandler } from "../../constants/Types";
 import { ComponentBaseProps, ComponentRenderType } from "../../core/ComponentBaseProps";
-import { DialogProps } from "../../overlay/Dialog";
-import { PopoverProps } from "../../overlay/Popover";
+import { DialogManageRef, DialogProps } from "../../overlay/Dialog";
+import { PopoverManageRef, PopoverProps } from "../../overlay/Popover";
 export declare enum ColorPickerLayoutElement {
     DashElement = "[d]",
     SpaceElement = "[s]",
@@ -31,10 +31,17 @@ export type ColorPickerAttributesRelays = {
     popover?: Partial<PopoverProps>;
 };
 export interface ColorPickerManageRef {
+    reset: () => void;
+    dialogManageRef: () => DialogManageRef | null;
+    popoverManageRef: () => PopoverManageRef | null;
+    toggle: (event: Event, target?: HTMLElement) => void;
 }
 export interface ColorPickerProps extends ComponentBaseProps<HTMLDivElement, ColorPickerManageRef, ColorPickerAttributesRelays> {
+    colors: Color;
+    alpha: number;
     autoFocus: boolean;
     modalVisible: boolean;
+    selectedColors: Color[];
     type: ComponentRenderType;
     onSelectColor: ColorEventHandler;
 }

package/dist/esm/compose/exotic/ColorPicker.js

@@ -1,6 +1,17 @@
 import "../Composed.css";
 import React from "react";
 import { ComponentRenderType } from "../../core/ComponentBaseProps";
+import { Dialog } from "../../overlay/Dialog";
+import { Popover } from "../../overlay/Popover";
+import { ObjectHelper } from "../../utils/ObjectHelper";
+import { Classname } from "../../utils/Classname";
+import { ColorMap } from "../../form/ColorMap";
+import { ColorSlider, ColorSliderGradient } from "./ColorSlider";
+import { FormControl } from "../form/FormControl";
+import { ColorPalette } from "../../form/ColorPalette";
+import { TextInput } from "../../form/Input";
+import { Orientation } from "../../constants/Orientation";
+import { ColorHelper } from "../../utils/ColorHelper";
 export var ColorPickerLayoutElement;
 (function (ColorPickerLayoutElement) {
     ColorPickerLayoutElement["DashElement"] = "[d]";
@@ -26,9 +37,13 @@ export var ColorPickerLayout;
 (function (ColorPickerLayout) {
 })(ColorPickerLayout || (ColorPickerLayout = {}));
 class ColorPickerComponent extends React.Component {
-    static defaultProps = {};
+    static defaultProps = {
+        alpha: 1,
+    };
     state = {
+        alpha: this.props.alpha,
         modalVisible: this.props.modalVisible,
+        selectedColors: this.props.selectedColors ?? [this.props.colors ?? ColorHelper.hexToColor("#000000")]
     };
     dialogManageRef = {};
     popoverManageRef = {};
@@ -40,6 +55,14 @@ class ColorPickerComponent extends React.Component {
         this.reportOnSelectColor = this.reportOnSelectColor.bind(this);
         this.performColorControlAction = this.performColorControlAction.bind(this);
     }
+    componentDidMount() {
+        ObjectHelper.resolveManageRef(this, {
+            toggle: this.toggle,
+            reset: () => alert("RESET"),
+            dialogManageRef: () => this.dialogManageRef,
+            popoverManageRef: () => this.popoverManageRef,
+        });
+    }
     toggle(event, target) {
         switch (this.props.type) {
             case ComponentRenderType.MODAL:
@@ -72,14 +95,366 @@ class ColorPickerComponent extends React.Component {
                 break;
         }
     }
-    reportOnSelectColor(hex) {
-        if (!this.props.onSelectColor)
-            return;
-        throw new Error("Implement report on select color " + hex);
-    }
     toggleMapComponent() {
     }
     togglePalleteElement() {
     }
+    reportOnSelectColor(color) {
+        const previousColor = this.state.selectedColors?.[0];
+        this.setState({ selectedColors: [color] });
+        this.props.onSelectColor?.({ color, previousColor });
+    }
+    /*buildLayoutElements(controlActionMap: NoseurObject<(e?: any) => void>) {
+        const layoutElements: NoseurObject<NoseurElement> = {};
+        const requiredLayoutElements = new Set<DateTimePickerLayoutElement>();
+        this.props.layout.split(" ").forEach(l => requiredLayoutElements.add(l as any));
+        this.props.topLayout.split(" ").forEach(l => requiredLayoutElements.add(l as any));
+        this.props.timeLayout.split(" ").forEach(l => requiredLayoutElements.add(l as any));
+        this.props.leftLayout.split(" ").forEach(l => requiredLayoutElements.add(l as any));
+        this.props.rightLayout.split(" ").forEach(l => requiredLayoutElements.add(l as any));
+        this.props.footerLayout.split(" ").forEach(l => requiredLayoutElements.add(l as any));
+        this.props.headerLayout.split(" ").forEach(l => requiredLayoutElements.add(l as any));
+        this.props.bottomLayout.split(" ").forEach(l => requiredLayoutElements.add(l as any));
+        this.props.yearModeLayout.split(" ").forEach(l => requiredLayoutElements.add(l as any));
+        this.props.selectionLayout.split(" ").forEach(l => requiredLayoutElements.add(l as any));
+        this.props.monthModeLayout.split(" ").forEach(l => requiredLayoutElements.add(l as any));
+        this.props.yearModeHeaderLayout.split(" ").forEach(l => requiredLayoutElements.add(l as any));
+        this.props.yearModeHeaderLayout.split(" ").forEach(l => requiredLayoutElements.add(l as any));
+        this.props.monthModeHeaderLayout.split(" ").forEach(l => requiredLayoutElements.add(l as any));
+        this.props.monthModeHeaderLayout.split(" ").forEach(l => requiredLayoutElements.add(l as any));
+        const excludedLayouts = [
+            DateTimePickerLayoutElement.TimeElement, DateTimePickerLayoutElement.WeekDayElement,
+            DateTimePickerLayoutElement.DayElement, DateTimePickerLayoutElement.SelectionElement,
+            DateTimePickerLayoutElement.LeftPanelElement, DateTimePickerLayoutElement.HeaderElement,
+            DateTimePickerLayoutElement.FooterElement, DateTimePickerLayoutElement.RightPanelElement,
+            DateTimePickerLayoutElement.TopPanelElement, DateTimePickerLayoutElement.BottomPanelElement,
+            DateTimePickerLayoutElement.YearModeHeaderElement, DateTimePickerLayoutElement.YearModeFooterElement,
+            DateTimePickerLayoutElement.MonthModeHeaderElement, DateTimePickerLayoutElement.MonthModeFooterElement,
+        ];
+        const activeYear = this.state.activeDate.getFullYear();
+        const selectedYear = (this.state.selectedDates.length ? this.state.selectedDates[0] : new Date()).getFullYear();
+        const controlPropsMap: NoseurObject<Partial<ButtonProps> | NoseurElement> = {
+            DayElement: this.props.dayControl,
+            NextElement: this.props.nextControl,
+            PreviousElement: this.props.prevControl,
+            IncrementElement: this.props.incrementControl,
+            DecrementElement: this.props.decrementControl,
+        };
+        // TODO mltiple for multiple calender months
+        formattedDate.disabled = formattedDate.isNotInMonth;
+        requiredLayoutElements.forEach(requiredLayoutElement => {
+            if (!requiredLayoutElement.trim()) return;
+            if (excludedLayouts.includes(requiredLayoutElement)) return;
+            const options: TimePickerLayoutElementBuilderOptions = {
+                formattedDate,
+                scheme: this.props.scheme,
+                layoutElement: requiredLayoutElement,
+                text: this.labelsMap[requiredLayoutElement],
+                action: controlActionMap[requiredLayoutElement],
+                control: controlPropsMap[requiredLayoutElement],
+                basicAttrs: this.props.attrsRelay[requiredLayoutElement],
+            };
+            if (requiredLayoutElement === DateTimePickerLayoutElement.WeekdaysElements) {
+                layoutElements[DateTimePickerLayoutElement.WeekdaysElements] = (<div className={Classname.build("noseur-date-time-picker-weekdays", this.props.attrsRelay?.weekdays?.className)}>
+                    {this.props.weekdays.map((weekDay) => {
+                        const opts = {
+                            ...options,
+                            layoutElement: weekDay,
+                            text: DateHelper.translateWeekday(weekDay, this.props.locale),
+                            control: controlPropsMap[DateTimePickerLayoutElement.WeekDayElement],
+                            basicAttrs: addClassesToComponentElementBasicAttributes(this.props.attrsRelay[weekDay], Classname.build("noseur-date-time-picker-weekdays-day", this.props.attrsRelay?.weekdays?.weekday?.className))
+                        };
+                        return (this.props.weekdayTemplate
+                            ? this.props.weekdayTemplate(weekDay, {
+                                options: opts,
+                                formattedDate,
+                                controlActionMap,
+                                props: this.props,
+                                labelsMap: this.labelsMap,
+                                elementBuilder: dateTimePickerBuildLayoutElement,
+                                layoutElement: DateTimePickerLayoutElement.WeekDayElement,
+                            })
+                            : dateTimePickerBuildLayoutElement(opts));
+                    })}
+                </div>);
+                return;
+            } else if (requiredLayoutElement === DateTimePickerLayoutElement.SelectedDatesElements) {
+                layoutElements[DateTimePickerLayoutElement.SelectedDatesElements] = (<React.Fragment>
+                    {this.state.selectedDates.map((date) => {
+                        const opts = {
+                            ...options,
+                            layoutElement: DateTimePickerLayoutElement.SelectedDateElement,
+                            text: date.toLocaleString(this.props.locale, this.props.dateFormat),
+                            control: controlPropsMap[DateTimePickerLayoutElement.SelectedDateElement],
+                            basicAttrs: addClassesToComponentElementBasicAttributes(this.props.attrsRelay[DateTimePickerLayoutElement.SelectedDateElement], Classname.build("noseur-date-time-picker-selected-dates-selected-date", this.props.attrsRelay?.selectedDate?.className))
+                        };
+                        return (this.props.selectedDateTemplate
+                            ? this.props.selectedDateTemplate(date, {
+                                options: opts,
+                                formattedDate,
+                                controlActionMap,
+                                props: this.props,
+                                labelsMap: this.labelsMap,
+                                elementBuilder: dateTimePickerBuildLayoutElement,
+                                layoutElement: DateTimePickerLayoutElement.SelectedDateElement,
+                            })
+                            : dateTimePickerBuildLayoutElement(opts));
+                    })}
+                </React.Fragment>);
+                return;
+            } else if (requiredLayoutElement === DateTimePickerLayoutElement.DaysElements) {
+                const daysElements: any[] = [];
+                const row = 7, column = 6, rowColumnSum = row * column;
+                const underline = this.props.showDatesSeparator && !this.props.showGridLines;
+                const monthDays = DateHelper.getAllDaysInMonth(formattedDate.year, formattedDate.month);
+                const startWeekday = monthDays[0].getDay();
+                const previousMonthPadding = startWeekday;
+                const nextMonthPadding = rowColumnSum - (monthDays.length + previousMonthPadding);
+                const previousMonthDays = previousMonthPadding === 0 ? [] : this.props.dontOverlapDate
+                    ? Array(previousMonthPadding).fill(" ")
+                    : DateHelper.getAllDaysInMonth(formattedDate.year, formattedDate.month - 1, previousMonthPadding, true);
+                const nextMonthDays = this.props.dontOverlapDate
+                    ? Array(nextMonthPadding).fill(" ")
+                    : DateHelper.getAllDaysInMonth(formattedDate.year, formattedDate.month + 1, nextMonthPadding);
+                previousMonthDays.forEach(day => daysElements.push(this.buildDateElement(day, controlPropsMap[DateTimePickerLayoutElement.DayElement], controlActionMap)));
+                monthDays.forEach(day => daysElements.push(this.buildDateElement(day, controlPropsMap[DateTimePickerLayoutElement.DayElement], controlActionMap)));
+                nextMonthDays.forEach(day => daysElements.push(this.buildDateElement(day, controlPropsMap[DateTimePickerLayoutElement.DayElement], controlActionMap)));
+                const className = Classname.build("noseur-date-time-picker-days", this.props.attrsRelay?.days?.className, {
+                    "noseur-date-time-picker-days-underline": underline,
+                }, (underline ? this.props.attrsRelay?.days?.underline?.className : null));
+                layoutElements[DateTimePickerLayoutElement.DaysElements] = (<div className={className} style={{ gridTemplateColumns: this.props.weekdays.map(_ => "auto").join(" ") }}>
+                    {daysElements}
+                </div>);
+                return;
+            } else if (requiredLayoutElement === DateTimePickerLayoutElement.YearsElements) {
+                const comparatorYear = this.props.mode === DateTimePickerMode.DATETIME ? activeYear : selectedYear;
+                layoutElements[DateTimePickerLayoutElement.YearsElements] = (<div className={Classname.build("noseur-date-time-picker-years", this.props.attrsRelay?.years?.className)}>
+                    {Array(this.props.modeDifferenceCount).fill(undefined).map((_, index) => {
+                        const year = activeYear + index;
+                        const action = (event: Event) => this.onSelectYear(event, year);
+                        const className = Classname.build("noseur-date-time-picker-long-year", this.props.attrsRelay?.years?.year?.className);
+                        if (comparatorYear === year) controlPropsMap[DateTimePickerLayoutElement.YearElement] = {
+                            className: Classname.build(className, "noseur-date-time-picker-long-year-selected", this.props.attrsRelay?.years?.selected?.className)
+                        }; else controlPropsMap[DateTimePickerLayoutElement.YearElement] = { className };
+                        const opts = {
+                            ...options,
+                            action,
+                            text: year,
+                            layoutElement: DateTimePickerLayoutElement.YearElement,
+                            control: controlPropsMap[DateTimePickerLayoutElement.YearElement],
+                            basicAttrs: addClassesToComponentElementBasicAttributes(this.props.attrsRelay[DateTimePickerLayoutElement.YearElement], Classname.build((controlPropsMap[DateTimePickerLayoutElement.YearElement] || {}).className))
+                        };
+
+                        return (this.props.yearTemplate
+                            ? this.props.yearTemplate(index, {
+                                options: opts,
+                                formattedDate,
+                                controlActionMap,
+                                props: this.props,
+                                labelsMap: this.labelsMap,
+                                elementBuilder: dateTimePickerBuildLayoutElement,
+                                layoutElement: DateTimePickerLayoutElement.YearElement,
+                            })
+                            : dateTimePickerBuildLayoutElement(opts));
+                    })}
+                </div>);
+                return;
+            } else if (requiredLayoutElement === DateTimePickerLayoutElement.MonthsElements) {
+                const activeSelectedDate = DateHelper.clone(this.state.selectedDates.length ? this.state.selectedDates[0] : new Date());
+                layoutElements[DateTimePickerLayoutElement.MonthsElements] = (<div className="noseur-date-time-picker-months">
+                    {Array(12).fill(undefined).map((_, index) => {
+                        const selectedDate = DateHelper.clone(activeSelectedDate); selectedDate.setMonth(index);
+                        const action = (event: Event) => this.onSelectMonth(event, index, activeYear);
+                        const className = Classname.build("noseur-date-time-picker-month-name", this.props.attrsRelay?.years?.year?.className);
+                        if (activeSelectedDate.getMonth() === index && activeSelectedDate.getFullYear() === activeYear) controlPropsMap[DateTimePickerLayoutElement.MonthElement] = {
+                            className: Classname.build(className, "noseur-date-time-picker-month-name-selected", this.props.attrsRelay?.years?.selected?.className)
+                        }; else controlPropsMap[DateTimePickerLayoutElement.MonthElement] = { className };
+                        const monthName = selectedDate.toLocaleString(this.props.locale, { month: 'short' });
+                        const opts = {
+                            ...options,
+                            action,
+                            text: monthName,
+                            layoutElement: DateTimePickerLayoutElement.MonthElement,
+                            control: controlPropsMap[DateTimePickerLayoutElement.MonthElement],
+                            basicAttrs: addClassesToComponentElementBasicAttributes(this.props.attrsRelay[DateTimePickerLayoutElement.MonthElement], Classname.build((controlPropsMap[DateTimePickerLayoutElement.MonthElement] || {}).className))
+                        };
+
+                        return (this.props.monthTemplate
+                            ? this.props.monthTemplate(MonthIndex[index], {
+                                options: opts,
+                                formattedDate,
+                                controlActionMap,
+                                props: this.props,
+                                labelsMap: this.labelsMap,
+                                elementBuilder: dateTimePickerBuildLayoutElement,
+                                layoutElement: DateTimePickerLayoutElement.YearElement,
+                            })
+                            : dateTimePickerBuildLayoutElement(opts));
+                    })}
+                </div>);
+                return;
+            }
+            options.scheme = this.selectDateControlScheme(requiredLayoutElement);
+            if (!DateTimePickerLayoutElementsValues.includes(requiredLayoutElement) && this.props.customElementTemplate) {
+                const opts = {
+                    ...options,
+                    basicAttrs: addClassesToComponentElementBasicAttributes(this.props.attrsRelay[DateTimePickerLayoutElement.MonthElement], "noseur-date-time-picker-custom")
+                };
+                layoutElements[requiredLayoutElement] = this.props.customElementTemplate({
+                    options: opts,
+                    formattedDate,
+                    controlActionMap,
+                    props: this.props,
+                    labelsMap: this.labelsMap,
+                    layoutElement: requiredLayoutElement,
+                    elementBuilder: dateTimePickerBuildLayoutElement,
+                });
+                return;
+            }
+            if (requiredLayoutElement === DateTimePickerLayoutElement.YearToElement) options.text = `` + (activeYear + this.props.modeDifferenceCount - 1);
+            layoutElements[requiredLayoutElement] = dateTimePickerBuildLayoutElement(options);
+        });
+        requiredLayoutElements.forEach(requiredLayoutElement => {
+            const options = {
+                formattedDate,
+                scheme: this.props.scheme,
+                layoutElement: requiredLayoutElement,
+                text: this.labelsMap[requiredLayoutElement],
+                action: controlActionMap[requiredLayoutElement],
+                control: controlPropsMap[requiredLayoutElement],
+                basicAttrs: this.props.attrsRelay[requiredLayoutElement],
+            };
+            if (!requiredLayoutElement.includes("Element") || !excludedLayouts.includes(requiredLayoutElement)) return;
+            if (requiredLayoutElement === DateTimePickerLayoutElement.HeaderElement && !this.props.timeOnly) {
+                const className = Classname.build("noseur-date-time-picker-header");
+                layoutElements[DateTimePickerLayoutElement.HeaderElement] = this.buildLayoutElement(options, formattedDate, layoutElements, DateTimePickerLayoutElement.HeaderElement, this.props.headerLayout, className, this.props.headerTemplate, controlActionMap);
+            } else if (requiredLayoutElement === DateTimePickerLayoutElement.FooterElement && !this.props.timeOnly) {
+                const className = Classname.build("noseur-date-time-picker-footer");
+                layoutElements[DateTimePickerLayoutElement.FooterElement] = this.buildLayoutElement(options, formattedDate, layoutElements, DateTimePickerLayoutElement.FooterElement, this.props.footerLayout, className, this.props.footerTemplate, controlActionMap);
+            } else if (requiredLayoutElement === DateTimePickerLayoutElement.YearModeHeaderElement && !this.props.timeOnly) {
+                const className = Classname.build("noseur-date-time-picker-year-mode-header");
+                layoutElements[DateTimePickerLayoutElement.YearModeHeaderElement] = this.buildLayoutElement(options, formattedDate, layoutElements, DateTimePickerLayoutElement.YearModeHeaderElement, this.props.yearModeHeaderLayout, className, this.props.yearModeHeaderTemplate, controlActionMap);
+            } else if (requiredLayoutElement === DateTimePickerLayoutElement.YearModeFooterElement && !this.props.timeOnly) {
+                const className = Classname.build("noseur-date-time-picker-year-mode-footer");
+                layoutElements[DateTimePickerLayoutElement.YearModeFooterElement] = this.buildLayoutElement(options, formattedDate, layoutElements, DateTimePickerLayoutElement.YearModeFooterElement, this.props.yearModeFooterLayout, className, this.props.yearModeFooterTemplate, controlActionMap);
+            } else if (requiredLayoutElement === DateTimePickerLayoutElement.MonthModeHeaderElement && !this.props.timeOnly) {
+                const className = Classname.build("noseur-date-time-picker-month-mode-header");
+                layoutElements[DateTimePickerLayoutElement.MonthModeHeaderElement] = this.buildLayoutElement(options, formattedDate, layoutElements, DateTimePickerLayoutElement.MonthModeHeaderElement, this.props.monthModeHeaderLayout, className, this.props.monthModeHeaderTemplate, controlActionMap);
+            } else if (requiredLayoutElement === DateTimePickerLayoutElement.MonthModeFooterElement && !this.props.timeOnly) {
+                const className = Classname.build("noseur-date-time-picker-month-mode-footer");
+                layoutElements[DateTimePickerLayoutElement.MonthModeFooterElement] = this.buildLayoutElement(options, formattedDate, layoutElements, DateTimePickerLayoutElement.MonthModeFooterElement, this.props.monthModeFooterLayout, className, this.props.monthModeFooterTemplate, controlActionMap);
+            } else if (requiredLayoutElement === DateTimePickerLayoutElement.TopPanelElement && !this.props.timeOnly) {
+                const className = Classname.build("noseur-date-time-picker-top-panel");
+                layoutElements[DateTimePickerLayoutElement.TopPanelElement] = this.buildLayoutElement(options, formattedDate, layoutElements, DateTimePickerLayoutElement.TopPanelElement, this.props.topLayout, className, this.props.topPanelTemplate, controlActionMap);
+            } else if (requiredLayoutElement === DateTimePickerLayoutElement.BottomPanelElement && !this.props.timeOnly) {
+                const className = Classname.build("noseur-date-time-picker-bottom-panel");
+                layoutElements[DateTimePickerLayoutElement.BottomPanelElement] = this.buildLayoutElement(options, formattedDate, layoutElements, DateTimePickerLayoutElement.BottomPanelElement, this.props.bottomLayout, className, this.props.bottomPanelTemplate, controlActionMap);
+            } else if (requiredLayoutElement === DateTimePickerLayoutElement.LeftPanelElement && !this.props.timeOnly) {
+                const className = Classname.build("noseur-date-time-picker-left-panel");
+                layoutElements[DateTimePickerLayoutElement.LeftPanelElement] = this.buildLayoutElement(options, formattedDate, layoutElements, DateTimePickerLayoutElement.LeftPanelElement, this.props.leftLayout, className, this.props.leftPanelTemplate, controlActionMap);
+            } else if (requiredLayoutElement === DateTimePickerLayoutElement.RightPanelElement && !this.props.timeOnly) {
+                const className = Classname.build("noseur-date-time-picker-right-panel");
+                layoutElements[DateTimePickerLayoutElement.RightPanelElement] = this.buildLayoutElement(options, formattedDate, layoutElements, DateTimePickerLayoutElement.RightPanelElement, this.props.rightLayout, className, this.props.rightPanelTemplate, controlActionMap);
+            } else if (requiredLayoutElement === DateTimePickerLayoutElement.SelectionElement && !this.props.timeOnly) {
+                const className = Classname.build("noseur-date-time-picker-selection");
+                const selectionTemplate = !this.props.selectionTemplate ? null : (options: DateTimePickerElementOptions) => this.props.selectionTemplate(this.state.selectedDates, options);
+                layoutElements[DateTimePickerLayoutElement.SelectionElement] = this.buildLayoutElement(options, formattedDate, layoutElements, DateTimePickerLayoutElement.SelectionElement, this.props.selectionLayout, className, selectionTemplate, controlActionMap);
+            } else if (requiredLayoutElement === DateTimePickerLayoutElement.TimeElement && this.props.showTime) {
+                const className = Classname.build("noseur-date-time-picker-time");
+                layoutElements[DateTimePickerLayoutElement.TimeElement] = this.buildLayoutElement(options, formattedDate, layoutElements, DateTimePickerLayoutElement.TimeElement, this.props.timeLayout, className, this.props.timeTemplate, controlActionMap);
+            }
+        });
+        return layoutElements;
+    }*/
+    // TODO able to support multiple colors with each dot on slider map and on the pallete
+    buildLayout(/*layoutElements: NoseurObject<NoseurElement>, controlActionMap*/ _) {
+        const selectedColor = this.state.selectedColors?.[0];
+        return (React.createElement("div", { style: { display: "flex", width: "fit-content", flexDirection: "column" } },
+            React.createElement(ColorMap, { style: { width: "100%" }, mapWidth: "100%", mapHeight: 150, hex: selectedColor?.hex }),
+            React.createElement(ColorSlider, { style: { width: "100%", margin: "5px 0px" }, orientation: Orientation.HORIZONTAL, colorGradient: ColorSliderGradient.RAINBOW_HORIZONTAL, onSelectColor: async ({ color }) => {
+                    color.alpha = this.state.alpha;
+                    this.reportOnSelectColor(color);
+                } }),
+            React.createElement(ColorSlider, { style: { width: "100%", margin: "5px 0px" }, orientation: Orientation.HORIZONTAL, colorGradient: ColorSliderGradient.TRANSPARENT_HORIZONTAL, primaryColor: selectedColor.hex, onSelectColor: async ({ color }) => {
+                    this.reportOnSelectColor({ ...this.state.selectedColors?.[0], alpha: color.alpha });
+                } }),
+            React.createElement("div", { style: { display: "flex", width: "100%", marginTop: 5 } },
+                React.createElement(FormControl, { isFieldset: true, label: React.createElement("span", { style: { fontSize: 12 } }, "Hex") },
+                    React.createElement(TextInput, { style: { flex: 1, width: 60, padding: "7px 5px", fontSize: 14 }, defaultValue: selectedColor.hex })),
+                React.createElement(FormControl, { isFieldset: true, label: React.createElement("span", { style: { fontSize: 12 } }, "R") },
+                    React.createElement(TextInput, { style: { width: 40, padding: "7px 5px", fontSize: 14 }, defaultValue: "200" })),
+                React.createElement(FormControl, { isFieldset: true, label: React.createElement("span", { style: { fontSize: 12 } }, "G") },
+                    React.createElement(TextInput, { style: { width: 40, padding: "7px 5px", fontSize: 14 }, defaultValue: "200" })),
+                React.createElement(FormControl, { isFieldset: true, label: React.createElement("span", { style: { fontSize: 12 } }, "B") },
+                    React.createElement(TextInput, { style: { width: 40, padding: "7px 5px", fontSize: 14 }, defaultValue: "200" })),
+                React.createElement(FormControl, { isFieldset: true, label: React.createElement("span", { style: { fontSize: 12 } }, "A") },
+                    React.createElement(TextInput, { style: { width: 40, padding: "7px 5px", fontSize: 14 }, defaultValue: "100" }))),
+            React.createElement(ColorPalette, { style: { width: "100%", marginTop: 10 }, grid: 10, gtcSize: "1fr", row: 4, size: 20, gap: 3, palette: "Default", attrsRelay: { tile: { style: { borderRadius: 2 } } }, onSelectColor: ({ color }) => {
+                    color.alpha = this.state.alpha;
+                    this.reportOnSelectColor(color);
+                } })));
+        /*let layout = this.props.layout;
+        if (this.state.activeMode === DateTimePickerMode.YEAR) layout = this.props.yearModeLayout;
+        if (this.state.activeMode === DateTimePickerMode.MONTH) layout = this.props.monthModeLayout;
+        const rows = layout.split(DateTimePickerLayoutElement.RowDividerElement);
+        return rows.map((row, index) => {
+            if (!row.trim()) return null;
+            const className = Classname.build("noseur-date-time-picker-layout noseur-date-time-picker-layout-row");
+            const columns = row.split(DateTimePickerLayoutElement.ColumnDividerElement);
+            return (<div className={className} key={index}>
+                {columns.map((column, index) => {
+                    const className = Classname.build("noseur-date-time-picker-layout noseur-date-time-picker-layout-column", {
+                        "noseur-wd-100-pct": BoolHelper.equalsAny(column.trim(), ["TopPanelElement", "BottomPanelElement"])
+                    });
+                    const options = {
+                        formattedDate,
+                        layoutElement: column,
+                        scheme: this.props.scheme,
+                        text: this.labelsMap[column],
+                        action: controlActionMap[column],
+                        basicAttrs: addClassesToComponentElementBasicAttributes(this.props.attrsRelay[column], "noseur-date-time-picker-custom"),
+                    };
+                    return this.buildLayoutElement(options, formattedDate, layoutElements, DateTimePickerLayoutElement.MainLayoutElement, column, className, this.props.layoutTemplate, controlActionMap, index);
+                })}
+            </div>);
+        });*/
+    }
+    render() {
+        const controlActionMap = {
+            MapToggleElement: this.toggleMapComponent,
+            PalleteToggleElement: this.togglePalleteElement,
+            //SelectColor: (e) => { this.reportOnSelectColor(); this.toggle(e); },
+            ClearElement: () => this.performColorControlAction(ColorPickerLayoutElement.ClearElement),
+            CancelElement: () => this.performColorControlAction(ColorPickerLayoutElement.CancelElement),
+            ChooseElement: () => this.performColorControlAction(ColorPickerLayoutElement.ChooseElement),
+            ClearSolidColorElement: () => this.performColorControlAction(ColorPickerLayoutElement.ClearSolidColorElement),
+            ColorFormatDropdownElement: () => this.performColorControlAction(ColorPickerLayoutElement.ColorFormatDropdownElement),
+            ClearTransparentColorElement: () => this.performColorControlAction(ColorPickerLayoutElement.ClearTransparentColorElement),
+        };
+        //const layoutElements = this.buildLayoutElements(controlActionMap);
+        const layoutPanel = this.buildLayout(/*layoutElements, */ controlActionMap);
+        const className = Classname.build("noseur-color-picker", {
+            "noseur-color-picker-modal": this.props.type === ComponentRenderType.MODAL,
+            "noseur-color-picker-inline": this.props.type === ComponentRenderType.INLINE,
+            "noseur-color-picker-popover": this.props.type === ComponentRenderType.POPOVER,
+        }, this.props.scheme ? `${this.props.scheme}-vars` : null, this.props.className);
+        const ref = (r) => {
+            if (!r)
+                return;
+            if (this.props.autoFocus)
+                r.focus();
+            ObjectHelper.resolveRef(this.props.forwardRef, r);
+        };
+        switch (this.props.type) {
+            case ComponentRenderType.MODAL:
+                return (React.createElement(Dialog, { notClosable: false, ...this.props.attrsRelay?.dialog, ref: ref, className: className, style: this.props.style, manageRef: (m) => this.dialogManageRef = m, visible: this.state.modalVisible, onHide: () => this.setState({ modalVisible: false }) }, layoutPanel));
+            case ComponentRenderType.POPOVER:
+                return (React.createElement(Popover, { outsideClickLogic: "positional", ...this.props.attrsRelay?.popover, ref: ref, className: className, style: this.props.style, manageRef: (m) => this.popoverManageRef = m }, layoutPanel));
+            default:
+                return (React.createElement("div", { ref: ref, className: className, style: this.props.style }, layoutPanel));
+        }
+    }
+    ;
 }
 export const ColorPicker = ({ ref, ...props }) => (React.createElement(ColorPickerComponent, { ...props, forwardRef: ref }));
+// https://alabsi91.github.io/reanimated-color-picker/

package/dist/esm/form/ColorMap.d.ts

@@ -18,5 +18,7 @@ export interface ColorMapProps extends ComponentBaseProps<HTMLDivElement, ColorM
     alignAlpha: Alignment;
     alignSlider: Alignment;
     indicator: NoseurElement;
+    mapWidth: number | string;
+    mapHeight: number | string;
 }
 export declare const ColorMap: ({ ref, ...props }: Partial<ColorMapProps>) => React.JSX.Element;

package/dist/esm/form/ColorMap.js

@@ -2,6 +2,8 @@ import React from "react";
 import { Classname } from "../utils/Classname";
 class ColorMapComponent extends React.Component {
     static defaultProps = {
+        mapWidth: 180,
+        mapHeight: 180,
         hex: "#000000",
     };
     state = {
@@ -22,8 +24,8 @@ class ColorMapComponent extends React.Component {
             return;
         const className = Classname.build("noseur-color-map-map", this.props.attrsRelay?.map?.className);
         const style = {
-            width: this.props.attrsRelay?.map?.size ?? 180,
-            height: this.props.attrsRelay?.map?.size ?? 180,
+            width: this.props.attrsRelay?.map?.size ?? this.props.mapWidth,
+            height: this.props.attrsRelay?.map?.size ?? this.props.mapHeight,
             ...(this.props.attrsRelay?.map?.style ?? {}),
             backgroundColor: this.state.hex,
         };

package/dist/esm/form/ColorPalette.d.ts

@@ -5,8 +5,10 @@ export type ColorPaletteAttributesRelays = {
     tile?: ComponentElementBasicAttributes;
 };
 export interface ColorPaletteProps extends ComponentBaseProps<HTMLDivElement, {}, ColorPaletteAttributesRelays> {
+    row: number;
     grid: number;
     defaultValue: string;
+    gtcSize: number | string;
     palette: string[] | string;
     gap: number | {
         row: number;

package/dist/esm/form/ColorPalette.js

@@ -34,16 +34,20 @@ class ColorPaletteComponent extends React.Component {
         return (React.createElement("div", { key: color, className: Classname.build("noseur-color-palette-tile", this.props.attrsRelay?.tile?.className, { "active": color === this.state.value }), style: style, onClick: () => this.onSelectColor(color) }));
     }
     render() {
-        const width = (typeof this.props.size === "number" ? this.props.size : this.props.size.width);
+        let palette = this.state.palette;
+        const width = (!!this.props.gtcSize ? this.props.gtcSize : (typeof this.props.size === "number" ? this.props.size : this.props.size.width));
         const className = Classname.build("noseur-color-palette", this.props.className);
         const style = {
             ...(this.props.style ?? {}),
-            gridTemplateColumns: Array(Math.min(this.state.palette.length, this.props.grid)).fill(`${width}px`).join(" "),
+            gridTemplateColumns: Array(Math.min(this.state.palette.length, this.props.grid)).fill(typeof width === "number" ? `${width}px` : width).join(" "),
             columnGap: (typeof this.props.gap !== "number" ? this.props.gap.column : undefined),
             rowGap: (typeof this.props.gap !== "number" ? this.props.gap.row : undefined),
             gap: (typeof this.props.gap === "number" ? this.props.gap : undefined),
         };
-        return (React.createElement("div", { className: className, style: style, id: this.props.id, key: this.props.key }, this.state.palette.map((color) => this.renderTile(color))));
+        if (this.props.row) {
+            palette = palette.slice(0, (this.props.grid * this.props.row));
+        }
+        return (React.createElement("div", { className: className, style: style, id: this.props.id, key: this.props.key }, palette.map((color) => this.renderTile(color))));
     }
     ;
 }

package/dist/esm/hooks/useScreenDimension.d.ts

@@ -0,0 +1,4 @@
+export declare function useScreenDimension(): {
+    width: number;
+    height: number;
+};

package/dist/esm/hooks/useScreenDimension.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { ObserverHandler } from "../utils/DOMUtils";
+export function useScreenDimension() {
+    let documentResizeListener;
+    const [screenDimension, setScreenDimension] = React.useState({ width: 0, height: 0 });
+    React.useEffect(() => {
+        if (!documentResizeListener) {
+            documentResizeListener = (_) => {
+                const width = document.documentElement.clientWidth;
+                const height = document.documentElement.clientHeight;
+                setScreenDimension({ width, height });
+            };
+            ObserverHandler.observe("resize", documentResizeListener);
+        }
+        return () => {
+            if (documentResizeListener) {
+                ObserverHandler.unobserve("resize", documentResizeListener);
+                documentResizeListener = undefined;
+            }
+        };
+    }, []);
+    return {
+        ...screenDimension
+    };
+}

package/dist/esm/index.d.ts

@@ -54,7 +54,9 @@ export * from "./panel/Accordion";
 export * from "./panel/ScrollPanel";
 export * from "./layout/GridView";
 export * from "./sensor/DragSensor";
+export * from "./sensor/ResizeSensor";
 export * from "./sensor/ViewportSensor";
 export * from "./hooks/useSubscription";
 export * from "./hooks/useSearchParams";
+export * from "./hooks/useScreenDimension";
 import "./core/noseur.css";

package/dist/esm/index.js

@@ -66,8 +66,10 @@ export * from "./panel/ScrollPanel";
 export * from "./layout/GridView";
 // sensor
 export * from "./sensor/DragSensor";
+export * from "./sensor/ResizeSensor";
 export * from "./sensor/ViewportSensor";
 // hooks
 export * from "./hooks/useSubscription";
 export * from "./hooks/useSearchParams";
+export * from "./hooks/useScreenDimension";
 import "./core/noseur.css";

package/dist/esm/overlay/Overlay.css

@@ -278,6 +278,7 @@
 .noseur-messages > div {
   z-index: 1005;
   display: flex;
+  width: max-content;
   flex-direction: column;
 }
 

package/dist/esm/overlay/Popover.js

@@ -177,7 +177,7 @@ class PopoverComponent extends React.Component {
     rePosition(event, cb) {
         if (!this.state.visible)
             return;
-        this.target = event?.target ?? event?.currentTarget ?? this.target;
+        this.target = this.target ?? event?.target ?? event?.currentTarget ?? this.target;
         if (!this.target || !this.target.getBoundingClientRect)
             return;
         DOMHelper.absolutePositionRelatively(this.internalElement, this.target, this.props.positional);

package/dist/esm/sensor/ResizeSensor.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { ComponentBaseProps } from "../core/ComponentBaseProps";
+export interface ResizeDimension {
+    width: number;
+    height: number;
+}
+export type ResizeSensorRenderIfHandler = (clientWidth: number, clientHeight: number) => boolean;
+export type ResizeSensorDimensionChangeHandler = (event: any, dimension: ResizeDimension) => void;
+export interface ResizeSensorManageRef {
+}
+export interface ResizeSensorProps extends ComponentBaseProps<HTMLDivElement, ResizeSensorManageRef> {
+    minDimension: Partial<ResizeDimension>;
+    maxDimension: Partial<ResizeDimension>;
+    renderIf: ResizeSensorRenderIfHandler;
+    onDimensionChange: ResizeSensorDimensionChangeHandler;
+}
+export declare const ResizeSensor: ({ ref, ...props }: Partial<ResizeSensorProps>) => React.JSX.Element;

package/dist/esm/sensor/ResizeSensor.js

@@ -0,0 +1,71 @@
+import React from "react";
+import { ObjectHelper } from "../utils/ObjectHelper";
+import { ObserverHandler } from "../utils/DOMUtils";
+class ResizeSensorComponent extends React.Component {
+    static defaultProps = {};
+    state = {
+        renderChildren: this.shouldRenderChildren(this.props.minDimension, this.props.maxDimension, document.documentElement.clientWidth, document.documentElement.clientHeight),
+    };
+    documentResizeListener;
+    constructor(props) {
+        super(props);
+    }
+    componentDidMount() {
+        if (!this.documentResizeListener) {
+            this.documentResizeListener = (event) => {
+                const width = document.documentElement.clientWidth;
+                const height = document.documentElement.clientHeight;
+                this.props.onDimensionChange?.(event, { width: width, height: height });
+                this.setState({ renderChildren: this.shouldRenderChildren(this.props.minDimension, this.props.maxDimension, width, height) });
+            };
+            ObserverHandler.observe("resize", this.documentResizeListener);
+        }
+    }
+    componentWillUnmount() {
+        if (this.documentResizeListener) {
+            ObserverHandler.unobserve("resize", this.documentResizeListener);
+            this.documentResizeListener = undefined;
+        }
+    }
+    shouldRenderChildren(minDimension, maxDimension, screenWidth, screenHeight) {
+        if (this.props.renderIf?.(screenWidth, screenHeight))
+            return true;
+        if (!minDimension && !maxDimension) {
+            return true;
+        }
+        if (minDimension) {
+            if (minDimension.width !== undefined && minDimension.height !== undefined && minDimension.width < screenWidth && minDimension.height < screenHeight) {
+                return true;
+            }
+            else if (minDimension.width !== undefined && minDimension.width < screenWidth) {
+                return true;
+            }
+            else if (minDimension.height !== undefined && minDimension.height < screenHeight) {
+                return true;
+            }
+        }
+        else if (maxDimension) {
+            if (maxDimension.width !== undefined && maxDimension.height !== undefined && maxDimension.width > screenWidth && maxDimension.height > screenHeight) {
+                return true;
+            }
+            else if (maxDimension.width !== undefined && maxDimension.width > screenWidth) {
+                return true;
+            }
+            else if (maxDimension.height !== undefined && maxDimension.height > screenHeight) {
+                return true;
+            }
+        }
+        return false;
+    }
+    render() {
+        let childrenProps = ObjectHelper.conditionalClone(this.props, (key) => key in [...Object.keys(this.props), "children"]);
+        const children = !this.state.renderChildren ? null : React.Children.map(this.props.children, (child) => {
+            if (React.isValidElement(child)) {
+                return React.cloneElement(child, { ...(child.props ?? {}), ...childrenProps });
+            }
+            return child;
+        });
+        return (React.createElement(React.Fragment, { key: this.props.key }, (this.state.renderChildren) ? children : null));
+    }
+}
+export const ResizeSensor = ({ ref, ...props }) => (React.createElement(ResizeSensorComponent, { ...props, forwardRef: ref }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rivtn/noseur",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Eccentric, managed and configurable react components",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",