@rivtn/noseur 1.0.0

package/dist/esm/form/Button.js

@@ -0,0 +1,131 @@
+import "./Form.css";
+import React from 'react';
+import { Scheme } from '../constants/Scheme';
+import { Classname } from '../utils/Classname';
+import { Alignment } from '../constants/Alignment';
+import { ObjectHelper } from '../utils/ObjectHelper';
+import { MicroBuilder } from "../utils/MicroBuilder";
+;
+;
+class ButtonComponent extends React.Component {
+    static defaultProps = {
+        scheme: Scheme.STATELESS,
+        leftIconRelativeAlignment: Alignment.LEFT,
+        rightIconRelativeAlignment: Alignment.RIGHT,
+    };
+    state = {
+        rippleState: { isRippling: false, x: -1, y: -1 },
+    };
+    buttonManagerRef;
+    constructor(props) {
+        super(props);
+        this.onClick = this.onClick.bind(this);
+    }
+    componentDidMount() {
+        this.buttonManagerRef = {
+            setLoadingState: (isLoading) => this.setState({ isLoading }),
+        };
+        ObjectHelper.resolveManageRef(this, this.buttonManagerRef);
+    }
+    componentDidUpdate(_, prevState) {
+        if (prevState.rippleState.isRippling != this.state.rippleState.isRippling && !this.state.rippleState.isRippling) {
+            this.setState({ rippleState: { ...this.state.rippleState, x: -1, y: -1 } });
+        }
+        if ((prevState.rippleState.x != this.state.rippleState.x) && (prevState.rippleState.y != this.state.rippleState.y)) {
+            if (this.state.rippleState.x != -1 && this.state.rippleState.y != -1) {
+                this.setState({ rippleState: { ...this.state.rippleState, isRippling: true } });
+                setTimeout(() => this.setState({ rippleState: { ...this.state.rippleState, isRippling: false } }), 300);
+            }
+            else {
+                this.setState({ rippleState: { ...this.state.rippleState, isRippling: false } });
+            }
+        }
+    }
+    componentWillUnmount() {
+        ObjectHelper.resolveManageRef(this, null);
+        this.buttonManagerRef = undefined;
+    }
+    onClick(activeProps, event) {
+        if (activeProps.rippleEffect) {
+            const button = event.currentTarget;
+            const rect = event.target.getBoundingClientRect();
+            this.setState({
+                rippleState: {
+                    diameter: button.clientHeight,
+                    isRippling: false,
+                    y: event.clientY - rect.top,
+                    x: event.clientX - rect.left
+                }
+            });
+        }
+        event.manageRef = this.buttonManagerRef;
+        this.props.onClick && this.props.onClick(event);
+    }
+    render() {
+        const activeProps = {
+            ...this.props,
+            ...(this.state.isLoading ? (this.props.loadingProps || {}) : {})
+        };
+        const eventProps = ObjectHelper.extractEventProps(activeProps);
+        const className = Classname.build((!activeProps.noStyle && activeProps.raised) ? `${activeProps.scheme}-bd-rd` : null, (!activeProps.noStyle && activeProps.scheme) ? `${activeProps.scheme}-bd-3px-bx-sw-ac` : null, (!activeProps.noStyle && activeProps.scheme) ? `${activeProps.scheme}-bd-3px-bx-sw-fc` : null, (!activeProps.noStyle && !activeProps.textOnly && !activeProps.outlined) ? activeProps.scheme : null, (!activeProps.noStyle && activeProps.scheme && activeProps.outlined) ? `${activeProps.scheme}-bd-cl` : null, (!activeProps.noStyle && activeProps.scheme && (activeProps.outlined || activeProps.textOnly)) ? `${activeProps.scheme}-tx` : null, (!activeProps.noStyle && activeProps.rippleEffect && (activeProps.outlined || activeProps.textOnly)) ? `${activeProps.scheme}-rp` : null, (!activeProps.noStyle && activeProps.scheme && (activeProps.outlined || activeProps.textOnly) && activeProps.fillOnHover) ? `${activeProps.scheme}-bg-hv` : null, {
+            'noseur-wd-auto': activeProps.fill,
+            'noseur-disabled': !activeProps.noStyle && activeProps.disabled,
+            'noseur-rounded-bd': !activeProps.noStyle && activeProps.rounded,
+            'noseur-pd-10': !activeProps.children && !activeProps.text && !activeProps.iconOnly,
+            'noseur-no-bg': !activeProps.noStyle && (activeProps.outlined || activeProps.textOnly),
+            'noseur-no-bd': !activeProps.noStyle && (activeProps.borderless || (activeProps.textOnly && !activeProps.outlined)),
+        }, "noseur-button", activeProps.className);
+        const children = [];
+        if (activeProps.text)
+            children.push(activeProps.text);
+        if (activeProps.children)
+            children.push(activeProps.children);
+        const rightIcon = MicroBuilder.buildIcon(activeProps.rightIcon, {
+            scheme: activeProps.scheme,
+            relativeAlignment: children.length ? activeProps.rightIconRelativeAlignment : Alignment.NONE
+        });
+        const leftIcon = MicroBuilder.buildIcon(activeProps.leftIcon, {
+            scheme: activeProps.scheme,
+            relativeAlignment: children.length ? activeProps.leftIconRelativeAlignment : Alignment.NONE,
+            fillIcon: activeProps.fillLeftIcon
+        });
+        if (rightIcon)
+            children.push(rightIcon);
+        if (leftIcon)
+            children.unshift(leftIcon);
+        if (this.state.rippleState.isRippling) {
+            const style = {
+                width: this.state.rippleState.diameter,
+                height: this.state.rippleState.diameter,
+                left: this.state.rippleState.x, right: this.state.rippleState.x,
+            };
+            children.push((React.createElement("span", { className: "noseur-rp", style: style })));
+        }
+        const props = {
+            children,
+            className,
+            ...eventProps,
+            key: activeProps.key,
+            type: this.props.type,
+            style: activeProps.style,
+            draggable: this.props.draggable,
+            onClick: (e) => {
+                this.onClick(activeProps, e);
+            },
+        };
+        return (!activeProps.link
+            ? React.createElement("button", { ref: this.props.forwardRef, ...props })
+            : React.createElement("a", { ref: this.props.forwardRef, ...props, href: activeProps.link, target: activeProps.linkTarget }));
+    }
+}
+export const Button = ({ ref, ...props }) => (React.createElement(ButtonComponent, { ...props, forwardRef: ref }));
+export function buildButtonControl(control, customNonOverridingProps, cb, className) {
+    if (!control || React.isValidElement(control))
+        return control;
+    const buttonProps = {
+        ...customNonOverridingProps,
+        ...control,
+        className: Classname.build(className, control.className)
+    };
+    return React.createElement(Button, { ...buttonProps, onClick: cb });
+}

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { ComponentBaseProps, ComponentElementBasicAttributes } from "../core/ComponentBaseProps";
+export type CalendarAttributesRelays = {
+    day?: {} & ComponentElementBasicAttributes;
+    week?: {} & ComponentElementBasicAttributes;
+};
+export declare enum CalenderMode {
+    DAY = 0,
+    WEEK = 1,
+    YEAR = 2,
+    MONTH = 3,
+    XDAYS = 4,
+    SCHEDULE = 5
+}
+export interface CalendarManageRef {
+}
+export interface CalendarProps extends ComponentBaseProps<HTMLDivElement, CalendarManageRef, CalendarAttributesRelays> {
+    mode: CalenderMode;
+}
+export declare const Calendar: ({ ref, ...props }: Partial<CalendarProps>) => React.JSX.Element;

package/dist/esm/form/Calendar.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { Classname } from "../utils/Classname";
+export var CalenderMode;
+(function (CalenderMode) {
+    CalenderMode[CalenderMode["DAY"] = 0] = "DAY";
+    CalenderMode[CalenderMode["WEEK"] = 1] = "WEEK";
+    CalenderMode[CalenderMode["YEAR"] = 2] = "YEAR";
+    CalenderMode[CalenderMode["MONTH"] = 3] = "MONTH";
+    CalenderMode[CalenderMode["XDAYS"] = 4] = "XDAYS";
+    CalenderMode[CalenderMode["SCHEDULE"] = 5] = "SCHEDULE";
+})(CalenderMode || (CalenderMode = {}));
+class CalendarComponent extends React.Component {
+    static defaultProps = {
+        mode: CalenderMode.WEEK,
+    };
+    state = {
+        mode: this.props.mode
+    };
+    constructor(props) {
+        super(props);
+    }
+    componentDidUpdate(__, _) {
+    }
+    renderCalendarDayView() {
+        return (React.createElement("div", { className: Classname.build("noseur-calendar-day", this.props.attrsRelay.day?.className), style: this.props.attrsRelay.day?.style, id: this.props.attrsRelay.day?.id }, "Day"));
+    }
+    renderCalendarWeekView() {
+        return (React.createElement("div", { className: Classname.build("noseur-calendar-week", this.props.attrsRelay.week?.className), style: this.props.attrsRelay.week?.style, id: this.props.attrsRelay.week?.id }, "Day"));
+    }
+    renderCalendarView() {
+        if (this.state.mode === CalenderMode.DAY) {
+            return this.renderCalendarDayView();
+        }
+        return this.renderCalendarWeekView();
+    }
+    render() {
+        let view = this.renderCalendarView();
+        const className = Classname.build("noseur-calendar", this.props.className);
+        const style = {
+            ...(this.props.style ?? {}),
+        };
+        return (React.createElement("div", { className: className, style: style, id: this.props.id, key: this.props.key }, view));
+    }
+    ;
+}
+export const Calendar = ({ ref, ...props }) => (React.createElement(CalendarComponent, { ...props, forwardRef: ref }));

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

@@ -0,0 +1,20 @@
+import "./Form.css";
+import React from 'react';
+import { Alignment } from "../constants/Alignment";
+import { ComponentBaseProps } from '../core/ComponentBaseProps';
+import { NoseurFormElement, NoseurCheckState, NoseurLabel, NoseurNummber } from "../constants/Types";
+export interface CheckboxProps extends ComponentBaseProps<NoseurFormElement | HTMLLabelElement> {
+    checked: boolean;
+    readOnly: boolean;
+    required: boolean;
+    label: NoseurLabel;
+    highlight: boolean;
+    alignLabel: Alignment;
+    defaultChecked: boolean;
+    alwaysRenderInput: boolean;
+    checkedIndex: NoseurNummber;
+    checkStates: NoseurCheckState[];
+    defaultCheckedIndex: NoseurNummber;
+    onChecked?: (checked: boolean) => void | boolean;
+}
+export declare const Checkbox: ({ ref, ...props }: Partial<CheckboxProps>) => React.JSX.Element;

package/dist/esm/form/Checkbox.js

@@ -0,0 +1,155 @@
+import "./Form.css";
+import React from 'react';
+import { Scheme } from "../constants/Scheme";
+import { Classname } from "../utils/Classname";
+import { Alignment } from "../constants/Alignment";
+import { ObjectHelper } from "../utils/ObjectHelper";
+import { MicroBuilder } from "../utils/MicroBuilder";
+;
+class CheckboxComponent extends React.Component {
+    static defaultProps = {
+        scheme: Scheme.STATELESS,
+        alignLabel: Alignment.RIGHT,
+        checkStates: [
+            {
+                icon: null,
+                checked: false,
+                scheme: Scheme.NIL,
+                value: "un-checked",
+            },
+            {
+                checked: true,
+                value: "checked",
+                icon: "fa fa-check",
+                scheme: Scheme.PRIMARY,
+            }
+        ]
+    };
+    state = {
+        checkedIndex: this.getFirstCheckedValue(),
+    };
+    constructor(props) {
+        super(props);
+        this.onClick = this.onClick.bind(this);
+        this.onKeyDown = this.onKeyDown.bind(this);
+        this.onCheckBoxClicked = this.onCheckBoxClicked.bind(this);
+        this.getFirstCheckedValue = this.getFirstCheckedValue.bind(this);
+    }
+    componentDidUpdate(prevProps) {
+        if ((prevProps.checked !== undefined && prevProps.checked !== this.props.checked)
+            || (prevProps.checkedIndex !== undefined && prevProps.checkedIndex !== this.props.checkedIndex)) {
+            this.setState({ checkedIndex: this.getFirstCheckedValue() });
+        }
+    }
+    onClick(event) {
+        this.props.onClick && this.props.onClick(event);
+        event.stopPropagation();
+        this.onCheckBoxClicked(event);
+    }
+    onKeyDown(event) {
+        this.props.onKeyDown && this.props.onKeyDown(event);
+        if (event.code == "Space") {
+            event.preventDefault();
+            event.stopPropagation();
+            this.onCheckBoxClicked(event);
+        }
+    }
+    onCheckBoxClicked(event) {
+        if (this.props.readOnly)
+            return;
+        let newCheckedIndex = this.getCheckStatesIndex() + 1;
+        if (newCheckedIndex >= this.props.checkStates.length)
+            newCheckedIndex = 0;
+        let checkState = this.props.checkStates[newCheckedIndex];
+        if (this.props.onChecked?.(checkState?.checked) === true && checkState?.checked === true) {
+            return;
+        }
+        this.props.onChange?.({
+            ...event,
+            checkState,
+            value: checkState?.value,
+            checked: checkState?.checked
+        });
+        this.setState({ checkedIndex: newCheckedIndex });
+    }
+    getCheckStatesIndex() {
+        if (this.props.checkedIndex)
+            return this.props.checkedIndex;
+        if (this.props.checked || this.props.checkedIndex != null)
+            return this.getFirstCheckedValue();
+        const checkStatesSize = this.props.checkStates.length;
+        let checkedIndex = this.state.checkedIndex;
+        if (checkedIndex >= checkStatesSize) {
+            checkedIndex = 0;
+        }
+        return checkedIndex;
+    }
+    getFirstCheckedValue() {
+        if (this.props.checkStates.length == 2 && this.props.checkStates[0].scheme == Scheme.NIL) {
+            if (this.props.checked || this.props.defaultChecked)
+                return 1;
+            if (this.props.checkedIndex != null)
+                return this.props.checkedIndex;
+            if (this.props.defaultCheckedIndex != null)
+                return this.props.defaultCheckedIndex;
+        }
+        return 0;
+    }
+    buildInput(checkState) {
+        if (!checkState.checked && !this.props.alwaysRenderInput)
+            return;
+        const props = {
+            id: this.props.id,
+            name: this.props.name,
+            checked: checkState.checked,
+            required: this.props.required,
+            onClick: () => { },
+            onChange: (e) => { e.stopPropagation(); }
+        };
+        return React.createElement("input", { type: "checkbox", ...props });
+    }
+    buildBox(checkState) {
+        const scheme = this.props.checkStates.length == 2 && this.props.checkStates[0].scheme == Scheme.NIL
+            ? this.props.scheme : (checkState.scheme ?? this.props.scheme);
+        const className = Classname.build("noseur-checkbox-box", (!this.props.noStyle && scheme) ? `${scheme}-bd-3px-bx-sw-fc` : null, (!this.props.noStyle && !checkState.scheme) ? `noseur-form-bd-cl` : null, (!this.props.noStyle && checkState.scheme) ? scheme : null, (!this.props.noStyle && this.props.highlight) ? `${scheme}-bd-cl` : null, (!this.props.noStyle && scheme) ? `${scheme}-bd-cl-fc ${scheme}-bd-cl-hv ${scheme}-bd-cl-ac` : null, {
+            'noseur-skeleton': scheme === Scheme.SKELETON,
+        }, this.props.className);
+        const icon = MicroBuilder.buildIcon(checkState.icon, {
+            scheme: checkState.scheme
+        });
+        const props = {
+            className,
+            tabIndex: 1,
+            onClick: this.onClick,
+            onKeyDown: this.onKeyDown,
+        };
+        return (React.createElement("span", { ...props }, icon));
+    }
+    render() {
+        const checkState = this.props.checkStates[this.getCheckStatesIndex()];
+        const box = this.buildBox(checkState);
+        const input = this.buildInput(checkState);
+        const label = MicroBuilder.buildLabel(this.props.label, {
+            scheme: this.props.scheme,
+            relativeAlignment: this.props.alignLabel,
+        }, { onClick: this.onClick });
+        const className = Classname.build("noseur-checkbox", {
+            'noseur-fl-d-c-r': this.props.alignLabel === Alignment.TOP,
+            'noseur-fl-d-r-r': this.props.alignLabel === Alignment.LEFT,
+            'noseur-fl-d-c': this.props.alignLabel === Alignment.BOTTOM,
+            'noseur-disabled': !this.props.noStyle && this.props.disabled,
+        });
+        const eventProps = ObjectHelper.extractEventProps(this.props, ["onChecked"]);
+        const props = {
+            className,
+            ...eventProps,
+            key: this.props.key,
+            style: this.props.style,
+        };
+        return (React.createElement("label", { ref: this.props.forwardRef, ...props },
+            box,
+            label,
+            input));
+    }
+}
+export const Checkbox = ({ ref, ...props }) => (React.createElement(CheckboxComponent, { ...props, forwardRef: ref }));

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { Alignment } from "../constants/Alignment";
+import { Color, NoseurElement } from "../constants/Types";
+import { ComponentBaseProps, ComponentElementBasicAttributes } from "../core/ComponentBaseProps";
+export type ColorMapAttributesRelays = {
+    map?: {
+        size: number;
+    } & ComponentElementBasicAttributes;
+};
+export interface ColorMapManageRef {
+}
+export interface ColorMapProps extends ComponentBaseProps<HTMLDivElement, ColorMapManageRef, ColorMapAttributesRelays> {
+    hex: string;
+    color: Color;
+    hideMap: boolean;
+    hideAlpha: boolean;
+    hideSlider: boolean;
+    alignAlpha: Alignment;
+    alignSlider: Alignment;
+    indicator: NoseurElement;
+}
+export declare const ColorMap: ({ ref, ...props }: Partial<ColorMapProps>) => React.JSX.Element;

package/dist/esm/form/ColorMap.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { Classname } from "../utils/Classname";
+class ColorMapComponent extends React.Component {
+    static defaultProps = {
+        hex: "#000000",
+    };
+    state = {
+        hex: this.props.hex ?? this.props.color?.hex
+    };
+    constructor(props) {
+        super(props);
+    }
+    componentDidUpdate(prevProps, _) {
+        if (this.props.hex !== prevProps.hex || this.props.color !== prevProps.color) {
+            this.setState({ hex: (this.props.hex !== prevProps.hex
+                    ? this.props.hex
+                    : (this.props.color !== prevProps.color ? this.props.color.hex : this.state.hex)) });
+        }
+    }
+    renderMap() {
+        if (this.props.hideMap)
+            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,
+            ...(this.props.attrsRelay?.map?.style ?? {}),
+            backgroundColor: this.state.hex,
+        };
+        return (React.createElement("div", { className: className, style: style, id: this.props.attrsRelay?.map?.id, key: this.props.attrsRelay?.map?.id },
+            React.createElement("div", { className: "noseur-color-map-map-gradient" })));
+    }
+    render() {
+        const map = this.renderMap();
+        const className = Classname.build("noseur-color-map", this.props.className);
+        const style = {
+            ...(this.props.style ?? {}),
+        };
+        return (React.createElement("div", { className: className, style: style, id: this.props.id, key: this.props.key }, map));
+    }
+    ;
+}
+export const ColorMap = ({ ref, ...props }) => (React.createElement(ColorMapComponent, { ...props, forwardRef: ref }));

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { ColorEventHandler, NoseurObject } from "../constants/Types";
+import { ComponentBaseProps, ComponentElementBasicAttributes } from "../core/ComponentBaseProps";
+export type ColorPaletteAttributesRelays = {
+    tile?: ComponentElementBasicAttributes;
+};
+export interface ColorPaletteProps extends ComponentBaseProps<HTMLDivElement, {}, ColorPaletteAttributesRelays> {
+    grid: number;
+    defaultValue: string;
+    palette: string[] | string;
+    gap: number | {
+        row: number;
+        column: number;
+    };
+    size: number | {
+        width: number;
+        height: number;
+    };
+    onSelectColor: ColorEventHandler;
+}
+export declare class ColorPaletteRegistry {
+    private static _registeredPalette;
+    static get(): NoseurObject<string[]>;
+    static getPalette(palette: string[] | string): string[];
+    static register(key: string, palette: string[]): void;
+    static unregister(key: string): void;
+}
+export declare const ColorPalette: ({ ref, ...props }: Partial<ColorPaletteProps>) => React.JSX.Element;

package/dist/esm/form/ColorPalette.js

@@ -0,0 +1,87 @@
+import React from "react";
+import { Classname } from "../utils/Classname";
+import { ColorHelper } from "../utils/ColorHelper";
+class ColorPaletteComponent extends React.Component {
+    static defaultProps = {
+        gap: 0,
+        size: 25,
+        grid: 10,
+    };
+    state = {
+        value: this.props.defaultValue,
+        palette: ColorPaletteRegistry.getPalette(this.props.palette) ?? [],
+    };
+    constructor(props) {
+        super(props);
+    }
+    onSelectColor(value) {
+        const previous = this.state.value;
+        const eventValue = { color: ColorHelper.hexToColor(value), previousColor: ColorHelper.hexToColor(previous) };
+        this.props.onChange && this.props.onChange({ value: eventValue });
+        if ((this.props.onSelectColor && this.props.onSelectColor(eventValue) === true))
+            return;
+        this.setState({ value });
+    }
+    renderTile(color) {
+        const style = {
+            backgroundColor: color,
+            border: `1px solid ${color}`,
+            width: (typeof this.props.size === "number" ? this.props.size : this.props.size.width) - 2,
+            height: (typeof this.props.size === "number" ? this.props.size : this.props.size.height) - 2,
+            minWidth: (typeof this.props.size === "number" ? this.props.size : this.props.size.width) - 2,
+            ...(this.props.attrsRelay?.tile?.style ?? {})
+        };
+        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);
+        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(" "),
+            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))));
+    }
+    ;
+}
+export class ColorPaletteRegistry {
+    static _registeredPalette = {};
+    static get() {
+        return ColorPaletteRegistry._registeredPalette;
+    }
+    static getPalette(palette) {
+        if (typeof palette !== "string")
+            return palette;
+        return (palette in ColorPaletteRegistry._registeredPalette ? ColorPaletteRegistry._registeredPalette[palette] : []);
+    }
+    static register(key, palette) {
+        ColorPaletteRegistry._registeredPalette[key] = palette;
+    }
+    static unregister(key) {
+        if (!(key in ColorPaletteRegistry._registeredPalette))
+            return;
+        delete ColorPaletteRegistry._registeredPalette[key];
+    }
+}
+export const ColorPalette = ({ ref, ...props }) => (React.createElement(ColorPaletteComponent, { ...props, forwardRef: ref }));
+let _defaultPaletteAlreadyRegistered = false;
+if (!_defaultPaletteAlreadyRegistered) {
+    _defaultPaletteAlreadyRegistered = true;
+    ColorPaletteRegistry.register("Microsoft", ["#f65314", "#7cbb00", "#00a1f1", "#ffbb00", "#737373"]); // https://www.color-hex.com/color-palette/4744
+    ColorPaletteRegistry.register("MicrosofVisualStudio", ["#5d2b90", "#008a00", "#333333", "#ffffff", "#000000"]); // https://www.color-hex.com/color-palette/12832
+    ColorPaletteRegistry.register("MicrosoftDynamicsCRM", ["#002050", "#dfe2e8", "#1160b7", "#b1d6f0", "#d24726"]); // https://www.color-hex.com/color-palette/29680
+    ColorPaletteRegistry.register("MicrosoftWordHighlighters", ["#ff0000", "#ffff00", "#00ff00", "#00ffff", "#ff00ff"]); // https://www.color-hex.com/color-palette/98189
+    ColorPaletteRegistry.register("Default", [
+        "#000000", "#444444", "#5b5b5b", "#999999", "#bcbcbc", "#eeeeee", "#f3f6f4", "#ffffff",
+        "#f44336", "#744700", "#ce7e00", "#8fce00", "#2986cc", "#16537e", "#6a329f", "#c90076",
+        "#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc",
+        "#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#9fc5e8", "#b4a7d6", "#d5a6bd",
+        "#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6fa8dc", "#8e7cc3", "#c27ba0",
+        "#cc0000", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3d85c6", "#674ea7", "#a64d79",
+        "#990000", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#0b5394", "#351c75", "#741b47",
+        "#660000", "#783f04", "#7f6000", "#274e13", "#0c343d", "#073763", "#20124d", "#4c1130",
+    ]); // https://www.color-hex.com/color-palettes/
+}

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

@@ -0,0 +1,78 @@
+import "./Form.css";
+import React from 'react';
+import { PopoverProps } from "../overlay/Popover";
+import { Alignment } from "../constants/Alignment";
+import { ComponentBaseProps } from "../core/ComponentBaseProps";
+import { FormControlProps } from "../compose/form/FormControl";
+import { InputOnInputCompleteHandler, InputProps } from "./Input";
+import { NoseurDivElement, NoseurElement, NoseurObject, ToggleIcons } from '../constants/Types';
+export type DropdownEventHandler = () => void | undefined;
+export type DropdownOnDeSelectHandler = (event: any) => void;
+export type DropdownPanelsHandler = () => NoseurElement | undefined;
+export type DropdownOption = {
+    label?: string;
+    value?: any;
+    icon?: any;
+};
+export type DropdownEmptyTemplateHandler = () => NoseurElement | undefined;
+export type DropdownLoadingTemplateHandler = () => NoseurElement | undefined;
+export type DropdownTemplateHandler = (option: any) => NoseurElement | undefined;
+export type DropdownSelectedIndex = {
+    primaryIndex: number;
+    secondaryIndex: number;
+};
+export type DropdownOnSelectHandler = (option: any, event: any) => boolean | undefined | void;
+export type DropdownTranslateLabelEventHandler = (label: string, option: NoseurObject<any>) => any;
+export type DropdownOnSearchHandler = (value: any, dropdownManageRef?: DropdownManageRef) => NoseurObject<any>[] | undefined | null;
+export interface DropdownManageRef {
+    hideDropDown: (e: any) => void;
+    showDropDown: (e: any) => void;
+    toggle: (e: any, ignoreEditable: boolean) => void;
+    changeOptions: (options: NoseurObject<any>[] | undefined) => void;
+}
+export interface DropdownProps extends ComponentBaseProps<NoseurDivElement, DropdownManageRef> {
+    fill: boolean;
+    noIcon: boolean;
+    editable: boolean;
+    disabled: boolean;
+    highlight: boolean;
+    clearable: boolean;
+    placeholder: string;
+    borderless: boolean;
+    noToggleIcons: boolean;
+    responsiveWidth: boolean;
+    optionsClassName: string;
+    noSelectionIcon: boolean;
+    toggleIcons: ToggleIcons;
+    defaultInputValue: string;
+    optionMap: DropdownOption;
+    selectedOptionIndex: number;
+    dontMatchTargetSize: boolean;
+    optionGroupChildrenKey: string;
+    renderOptionAsPlaceholder: boolean;
+    popoverProps: Partial<PopoverProps>;
+    textInputProps: Partial<InputProps>;
+    options: NoseurObject<any>[] | undefined;
+    forceUpdateIfSelectedIndexChanges: boolean;
+    formControlProps: Partial<FormControlProps>;
+    selectedOptionIndexes: DropdownSelectedIndex;
+    iconPosition: Alignment.LEFT | Alignment.RIGHT;
+    togglePosition: Alignment.LEFT | Alignment.RIGHT;
+    popoverRef: React.ForwardedRef<NoseurDivElement>;
+    textInputRef: React.ForwardedRef<HTMLInputElement>;
+    onSearch?: DropdownOnSearchHandler;
+    onDropdownShow: DropdownEventHandler;
+    onDropdownHide: DropdownEventHandler;
+    optionTemplate: DropdownTemplateHandler;
+    onSelectOption: DropdownOnSelectHandler;
+    emptyTemplate: DropdownEmptyTemplateHandler;
+    onDeSelectOption: DropdownOnDeSelectHandler;
+    popoverHeaderTemplate: DropdownPanelsHandler;
+    popoverFooterTemplate: DropdownPanelsHandler;
+    optionGroupTemplate: DropdownTemplateHandler;
+    loadingTemplate: DropdownLoadingTemplateHandler;
+    selectedOptionTemplate?: DropdownTemplateHandler;
+    onInputComplete: InputOnInputCompleteHandler | undefined;
+    translateSelectionLabel: DropdownTranslateLabelEventHandler;
+}
+export declare const Dropdown: ({ ref, ...props }: Partial<DropdownProps>) => React.JSX.Element;