@rivtn/noseur 1.0.0

package/dist/esm/form/Form.css

@@ -0,0 +1,467 @@
+.noseur-form-bd-cl {
+  border-color: var(--noseurFormBorderColor, #dfdfdf);
+}
+
+/* Button */
+.noseur-button {
+  outline: none;
+  cursor: pointer;
+  overflow: hidden;
+  border-width: 1px;
+  border-radius: 7px;
+  text-align: center;
+  position: relative;
+  width: fit-content;
+  align-items: center;
+  border-style: solid;
+  height: fit-content;
+  display: inline-flex;
+  text-decoration: none;
+  vertical-align: bottom;
+  justify-content: center;
+  padding: 10px 15px 10px 15px;
+}
+
+.noseur-button:hover {
+  filter: brightness(97%);
+}
+
+/* Input and TextArea */
+.noseur-input {
+  flex: 1;
+  outline: none;
+  padding: 0.7rem;
+  font-size: 15px;
+  border-radius: 6px;
+  background: transparent;
+  box-sizing: border-box;
+  border: 1px solid #dfdfdf;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  color: var(--noseurInputColor, #3e3f41);
+}
+
+.noseur-input-filled {
+  background-color: #eff2f5;
+}
+
+.noseur-input-flushed {
+  border: none;
+  border-radius: 0px;
+  padding: 0.7rem 0px 0.7rem 0px;
+  border-bottom: 1px solid var(--noseurInputFlushedBorderColor, #dfdfdf);
+}
+
+textarea.noseur-input {
+  flex: initial;
+}
+
+/* Checkbox */
+.noseur-checkbox {
+  display: flex;
+  cursor: pointer;
+  width: fit-content;
+  align-items: center;
+}
+
+.noseur-checkbox > input {
+  display: none;
+}
+
+.noseur-checkbox-box {
+  width: 18px;
+  height: 18px;
+  outline: none;
+  min-width: 18px;
+  min-height: 18px;
+  user-select: none;
+  border-width: 2px;
+  border-radius: 5px;
+  border-style: solid;
+  align-items: center;
+  display: inline-flex;
+  vertical-align: bottom;
+  justify-content: center;
+}
+
+.noseur-checkbox-box > .noseur-icon {
+  font-size: 12px;
+}
+
+/* Dropdown */
+.noseur-dropdown {
+  cursor: pointer;
+}
+
+.noseur-dropdown > .noseur-fctrl-c > .noseur-fctrl-lc {
+  min-width: auto;
+  margin-right: 5px;
+}
+
+.noseur-dropdown > .noseur-fctrl-c > .noseur-fctrl-lc > img,
+.noseur-dropdown > .noseur-fctrl-c > .noseur-fctrl-lc > .noseur-dropdown-left-content > img,
+.noseur-dropdown > .noseur-fctrl-c > .noseur-fctrl-rc > .noseur-dropdown-right-content > img {
+  width: auto;
+  height: 22px;
+  margin-left: 9px;
+}
+
+.noseur-dropdown-inputtext {
+  min-width: auto;
+}
+
+.noseur-dropdown-left-content {
+  margin: 0px;
+  display: flex;
+  margin-left: 5px;
+  align-items: center;
+  align-self: flex-start;
+}
+
+.noseur-dropdown-right-content {
+  margin: 0px;
+  display: flex;
+  margin-right: 5px;
+  align-items: center;
+  align-self: flex-end;
+}
+
+.noseur-dropdown-left-content > *,
+.noseur-dropdown-right-content > * {
+  margin: 10px;
+}
+
+.noseur-dropdown-popover {
+  display: flex;
+  overflow: auto;
+  min-width: 190px;
+  flex-direction: column;
+  border-radius: 0px 0px 3px 3px;
+  --componentMarginTopOrBottom: 3px;
+  background-color: var(--noseurDropdownPopoverBgColor, white);
+  box-shadow: 0 2px 12px 0 var(--noseurDropdownPopoverBoxShadowColor, rgba(0, 0, 0, 0.1)) !important;
+}
+
+.noseur-dropdown-popover-list {
+  flex: 1;
+  margin: 0px;
+  padding: 0px;
+  overflow: auto;
+  margin-top: 7px;
+  /*height: 350px;*/
+  margin-bottom: 7px;
+}
+
+.noseur-dropdown-popover-list > li {
+  border: none;
+  font-size: 14px;
+  cursor: pointer;
+  list-style-type: none;
+  padding: 12px 15px 12px 15px;
+}
+
+.noseur-dropdown-popover-list > li.default-style:hover {
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.noseur-dropdown-popover-list > li.default-style[aria-selected=true] {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.noseur-dropdown-popover-li-grp {
+  font-weight: bold;
+  pointer-events: none;
+}
+
+.noseur-dropdown-popover-li-item {
+  display: flex;
+}
+
+.noseur-dropdown-popover-li-item > img {
+  width: 20px;
+  height: 20px;
+  max-width: 20px;
+  max-height: 20px;
+  margin-right: 10px;
+}
+
+.noseur-dropdown-popover-empty {
+  padding: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* File Input */
+.noseur-file-input {
+  display: flex;
+  overflow: auto;
+  width: fit-content;
+}
+
+.noseur-file-input-control {
+  display: flex;
+  padding: 7px 10px;
+  position: absolute;
+  width: fit-content;
+  flex-direction: row;
+}
+
+.noseur-file-input-control > *:not(:last-child) {
+  margin-right: 5px;
+}
+
+.noseur-file-input-label {
+  margin: 5px;
+  cursor: pointer;
+  font-weight: 700;
+  padding: 7px 10px;
+  border-radius: 5px;
+  width: fit-content;
+  width: -moz-fit-content;
+  width: -webkit-fit-content;
+  color: var(--noseurFileInputLabelColor, #fff);
+  background: var(--noseurFileInputLabelBgColor, hsla(0, 1.4%, 59%, 0.5));
+}
+
+.noseur-file-input > div > .noseur-file-input-preview {
+  display: flex;
+  width: inherit;
+  height: inherit;
+  position: relative;
+  align-items: center;
+  border-radius: inherit;
+  color: var(--noseurSchemeMainColor, #ededed);
+}
+
+.noseur-file-input > .noseur-file-input-previews,
+.noseur-file-input > div > .noseur-file-input-preview > img {
+  border-radius: inherit;
+}
+
+.noseur-file-input > div > .noseur-file-input-preview > .noseur-close {
+  top: 0px;
+  right: 0px;
+  margin: 5px;
+  position: absolute;
+  padding: 10px 12px;
+}
+
+.noseur-file-input > div > .noseur-file-input-preview-empty,
+.noseur-file-input > div > .noseur-file-input-preview > .noseur-file-input-preview-image,
+.noseur-file-input > div > .noseur-file-input-preview > .noseur-file-input-preview-video {
+  width: inherit;
+  height: inherit;
+  font-size: 30px;
+  justify-content: center;
+  border: 1px solid var(--noseurSchemeMainColor01Percent, rgba(237, 237, 237, 0.5));
+}
+
+.noseur-file-input > div > .noseur-file-input-preview-empty {
+  cursor: pointer;
+}
+
+.noseur-file-input > div > .noseur-file-input-preview-empty > i {
+  padding: 20px;
+  border-radius: 100%;
+  background: var(--noseurSchemeMainColor01Percent, rgba(237, 237, 237, 0.5));
+}
+
+.noseur-file-input > div > .noseur-file-input-preview > .noseur-file-input-preview-binary {
+  display: flex;
+  align-items: center;
+}
+
+.noseur-file-input > div > .noseur-file-input-preview > .noseur-file-input-preview-binary > * {
+  margin-right: 5px;
+}
+
+.noseur-file-input > div > .noseur-file-input-preview > .noseur-file-input-preview-binary > .noseur-close {
+  cursor: pointer;
+  margin-left: 5px;
+}
+
+.noseur-file-input > div.noseur-fl-d-r > .noseur-file-input-preview:not(.noseur-file-input-preview:first-child) {
+  margin-left: 15px;
+}
+
+.noseur-file-input > div.noseur-fl-d-c > .noseur-file-input-preview:not(.noseur-file-input-preview:first-child) {
+  margin-top: 15px;
+}
+
+.noseur-file-input.noseur-file-input-controlled {
+  width: auto;
+  border-radius: 7px;
+  flex-direction: column;
+  border: 1px solid var(--noseurSchemeMainColor, rgba(237, 237, 237, 0.2));
+}
+
+.noseur-file-input.noseur-file-input-controlled > .noseur-file-input-fixture {
+  padding: 15px;
+  display: flex;
+  background-color: var(--noseurSchemeStripColor, rgba(237, 237, 237, 0.5));
+  border-bottom: 1px solid var(--noseurSchemeMainColor, rgba(237, 237, 237, 0.5));
+}
+
+.noseur-file-input.noseur-file-input-controlled > .noseur-file-input-fixture > button:not(.noseur-file-input-fixture > button:first-child) {
+  margin-left: 10px;
+}
+
+.noseur-file-input > .noseur-file-input-previews {
+  width: inherit;
+  height: inherit;
+}
+
+.noseur-file-input.noseur-file-input-controlled > .noseur-file-input-previews {
+  margin: 15px;
+}
+
+.noseur-file-input.noseur-file-input-controlled > .noseur-file-input-previews > .noseur-file-input-preview {
+  width: auto;
+  border: none;
+}
+
+/* Radio button */
+.noseur-radiobutton {
+  display: flex;
+  cursor: pointer;
+  width: fit-content;
+  align-items: center;
+}
+
+.noseur-radiobutton > input {
+  display: none;
+}
+
+.noseur-radiobutton-box {
+  width: 18px;
+  height: 18px;
+  outline: none;
+  min-width: 18px;
+  min-height: 18px;
+  user-select: none;
+  border-width: 2px;
+  border-radius: 100%;
+  border-style: solid;
+  align-items: center;
+  display: inline-flex;
+  vertical-align: bottom;
+  justify-content: center;
+  border-color: var(--noseurSchemeMainColor, var(--noseurFormBorderColor, #dfdfdf));
+}
+
+.noseur-radiobutton-box > .noseur-icon {
+  font-size: 12px;
+  border-radius: 100%;
+  color: var(--noseurSchemeMainColor, var(--noseurFormBorderColor, #dfdfdf));
+  background-color: var(--noseurSchemeMainColor, var(--noseurFormBorderColor, #dfdfdf));
+}
+
+/* Color palette */
+.noseur-color-palette {
+  display: grid;
+  width: fit-content;
+}
+
+.noseur-color-palette-tile {
+  cursor: pointer;
+}
+
+.noseur-color-palette-tile:hover,
+.noseur-color-palette-tile.active {
+  border-color: rgb(255, 255, 255) !important;
+}
+
+/* Color Map */
+.noseur-color-map {
+  display: flex;
+  width: fit-content;
+}
+
+.noseur-color-map-map {
+  position: relative;
+  border-radius: 5px;
+}
+
+.noseur-color-map-map-gradient {
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  position: absolute;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), black), linear-gradient(to right, white, rgba(255, 255, 255, 0));
+}
+
+/* Slider */
+.noseur-slider {
+  border: none;
+  display: flex;
+  position: relative;
+  border-radius: 7px;
+  align-items: center;
+  background: var(--noseurSchemeMainColor01Percent, #e5e7eb);
+}
+
+.noseur-slider-vertical {
+  height: 14rem;
+  width: 0.286rem;
+  margin: 0px 12px;
+  flex-direction: column;
+}
+
+.noseur-slider-horizontal {
+  width: 14rem;
+  height: 0.286rem;
+  margin: 12px 0px;
+  flex-direction: row;
+}
+
+.noseur-slider-range,
+.noseur-slider-handle {
+  position: absolute;
+}
+
+.noseur-slider-range {
+  border-radius: 7px;
+  background: var(--noseurSchemeMainColor, #7199be);
+}
+
+.noseur-slider-vertical > .noseur-slider-range {
+  width: 100%;
+}
+.noseur-slider-vertical > .noseur-slider-range.inverse {
+  bottom: 0px;
+}
+
+.noseur-slider-horizontal > .noseur-slider-range {
+  height: 100%;
+}
+.noseur-slider-horizontal > .noseur-slider-range.inverse {
+  right: 0px;
+}
+
+.noseur-slider-handle {
+  cursor: grab;
+  width: 0.7rem;
+  height: 0.7rem;
+  border-radius: 100%;
+  background: var(--noseurSchemeAccentColor, white);
+  border: 2px solid var(--noseurSchemeMainColor, #7199be);
+}
+
+.noseur-slider-handle:active {
+  cursor: grabbing;
+}
+
+.noseur-slider-handle.active {
+  z-index: 2;
+}
+
+/* Calendar */
+.noseur-calendar {
+  display: flex;
+}
+
+.noseur-calendar-week {
+  display: flex;
+}

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

@@ -0,0 +1,45 @@
+import "./Form.css";
+import React from 'react';
+import { ComponentBaseProps } from '../core/ComponentBaseProps';
+import { NoseurElement, NoseurFormElement, NoseurInputValue } from "../constants/Types";
+export type InputOnInputCompleteHandler = (value: string) => void;
+export type InputOnFirstInputCompleteHandler = (value?: string) => void;
+export interface BareInputManageRef<T> {
+    clear: () => void;
+    setValue: (value: T) => void;
+    value: () => T | null | undefined;
+}
+export interface InputManageRef extends BareInputManageRef<string> {
+}
+export interface InputProps extends ComponentBaseProps<NoseurFormElement, InputManageRef> {
+    rows: number;
+    type: string;
+    mask: string;
+    fill: boolean;
+    raised: boolean;
+    filled: boolean;
+    rounded: boolean;
+    flushed: boolean;
+    maskSlot: string;
+    readOnly: boolean;
+    required: boolean;
+    highlight: boolean;
+    borderless: boolean;
+    inputFilter: RegExp;
+    placeholder: string;
+    children: NoseurElement;
+    autoGrowHeight: boolean;
+    value: NoseurInputValue;
+    defaultValue: NoseurInputValue;
+    completeInputOnBlurOnly: boolean;
+    completeInputOnEnterPressOnly: boolean;
+    onInputComplete: InputOnInputCompleteHandler | undefined;
+    onFirstInput: InputOnFirstInputCompleteHandler | undefined;
+    onInputEmpty: React.FormEventHandler<NoseurFormElement> | undefined;
+}
+export declare const TextInput: ({ ref, ...props }: Partial<InputProps>) => React.JSX.Element;
+export declare const EmailInput: ({ ref, ...props }: Partial<InputProps>) => React.JSX.Element;
+export declare const NumberInput: ({ ref, ...props }: Partial<InputProps>) => React.JSX.Element;
+export declare const TextAreaInput: ({ ref, ...props }: Partial<InputProps>) => React.JSX.Element;
+export declare const PasswordInput: ({ ref, ...props }: Partial<InputProps>) => React.JSX.Element;
+export declare const MoneyInput: ({ ref, ...props }: Partial<InputProps>) => React.JSX.Element;

package/dist/esm/form/Input.js

@@ -0,0 +1,186 @@
+import "./Form.css";
+import React from 'react';
+import { Scheme } from '../constants/Scheme';
+import { DOMHelper } from "../utils/DOMUtils";
+import { Classname } from "../utils/Classname";
+import { ObjectHelper } from "../utils/ObjectHelper";
+import { InputFilter, InputHelper } from "../utils/InputHelper";
+;
+;
+class Input extends React.Component {
+    static defaultProps = {
+        type: "text",
+        maskSlot: "X",
+        scheme: Scheme.STATELESS,
+    };
+    state = {
+        value: this.props.value ?? this.props.defaultValue
+    };
+    internalInputElement;
+    constructor(props) {
+        super(props);
+        this.onBlur = this.onBlur.bind(this);
+        this.onKeyUp = this.onKeyUp.bind(this);
+        this.onInput = this.onInput.bind(this);
+        this.onKeyDown = this.onKeyDown.bind(this);
+        this.resolveMask = this.resolveMask.bind(this);
+        this.onPasteCapture = this.onPasteCapture.bind(this);
+    }
+    componentDidMount() {
+        ObjectHelper.resolveManageRef(this, {
+            clear: () => {
+                if (!this.internalInputElement)
+                    return;
+                this.internalInputElement.value = "";
+                if (this.props.autoGrowHeight) {
+                    this.internalInputElement.style.height = DOMHelper.calculateHeight(this.internalInputElement) + "px";
+                }
+            },
+            value: () => {
+                if (!this.internalInputElement)
+                    return null;
+                return this.internalInputElement.value;
+            },
+            setValue: (value) => {
+                this.setState({ value }, () => {
+                    if (!this.internalInputElement)
+                        return;
+                    this.internalInputElement.value = value;
+                });
+            },
+        });
+    }
+    componentWillUnmount() {
+        ObjectHelper.resolveManageRef(this, null);
+    }
+    resolveMask(element) {
+        const value = element.value;
+        const valueParts = value.split("");
+        const maskParts = new Set(this.props.maskSlot);
+        const resolvedValue = this.props.mask.split("");
+        const [from, to] = [element.selectionStart, element.selectionEnd];
+        console.log("SELECTEION", from, to);
+        /*for (let index = 0, valueIndex = 0; index < resolvedValue.length && (!!valueParts[valueIndex] && valueIndex < resolvedValue.length); index++) {
+            console.log("PLACEHOLDER INDEX", valueParts[valueIndex], index);
+            if (maskParts.has(resolvedValue[index])) resolvedValue[index] = valueParts[valueIndex++];
+        }*/
+        const maskSlotIndexes = {};
+        for (let index = from, sindex = 0; index < resolvedValue.length && sindex < valueParts.length; index++) {
+            console.log("PLACEHOLDER INDEX", from, index, resolvedValue[index]);
+            if (maskParts.has(resolvedValue[index])) {
+                maskSlotIndexes["" + index] = sindex;
+                sindex++;
+            }
+        }
+        for (const [index, sindex] of Object.entries(maskSlotIndexes))
+            resolvedValue[parseInt(index)] = valueParts[sindex];
+        /*const masskSlotIndexes = resolvedValue.reduce((acc: number[], c: string, index: number): number[] => {
+            if (maskParts.has(c)) acc.push(index);
+            return acc;
+        }, []);*
+        /*for (let index = 0; index < valueParts.length; index++) {
+            maskParts.has()
+            console.log("PLACEHOLDER INDEX", valueParts[index]);
+        }*/
+        /*for (let index = 1; index < maskParts.size; index++) {
+            const maskPart = maskParts[index];
+            console.log("   ", maskPart, valueParts[index-1], index, index-1);
+            resolvedValue += (maskPart == "" ? valueParts[index-1] : maskPart);
+        }*/
+        element.value = resolvedValue.join("");
+        console.log("TO RESOLVE MASK", value, "=>", "resolvedValue", maskSlotIndexes, resolvedValue.join(""), maskParts, this.props.mask, this.props.maskSlot);
+    }
+    onKeyDown(event) {
+        this.props.onKeyDown && this.props.onKeyDown(event);
+        !this.props.inputFilter || InputHelper.validateEventKeyInput(this.props.inputFilter, event);
+    }
+    onPasteCapture(event) {
+        this.props.onPasteCapture && this.props.onPasteCapture(event);
+        !this.props.inputFilter || InputHelper.validateEventValue(this.props.inputFilter, event, event.clipboardData.getData('Text'));
+    }
+    onInput(event) {
+        this.props.onInput && this.props.onInput(event);
+        const value = event.target.value;
+        const valueLength = value.length;
+        const hasValue = !!this.state.value;
+        if (this.props.mask)
+            this.resolveMask(event.target);
+        if (this.props.onFirstInput && !hasValue)
+            this.props.onFirstInput(value);
+        if (this.props.onInputEmpty && hasValue && !valueLength)
+            this.props.onInputEmpty(event);
+        this.setState({ value });
+        if (this.props.autoGrowHeight) {
+            event.target.style.height = DOMHelper.calculateHeight(event.target) + "px";
+        }
+    }
+    onBlur(event) {
+        this.props.onBlur && this.props.onBlur(event);
+        if (this.props.completeInputOnEnterPressOnly)
+            return;
+        this.props.onInputComplete && this.props.onInputComplete(event.target.value);
+    }
+    onKeyUp(event) {
+        this.props.onKeyUp && this.props.onKeyUp(event);
+        if (this.props.completeInputOnBlurOnly)
+            return;
+        const key = InputHelper.getKey(event);
+        if (key == 13)
+            this.props.onInputComplete && this.props.onInputComplete(event.target.value);
+    }
+    render() {
+        const eventProps = ObjectHelper.extractEventProps(this.props, ["onInputEmpty", "onFirstInput", "onInputComplete"]);
+        const className = Classname.build((!this.props.noStyle && this.props.highlight) ? `${this.props.scheme}-bd-cl` : null, (!this.props.noStyle && this.props.scheme && !this.props.flushed) ? `${this.props.scheme}-bd-3px-bx-sw-fc` : null, (!this.props.noStyle && this.props.scheme) ? `${this.props.scheme}-bd-cl-fc ${this.props.scheme}-bd-cl-hv` : null, {
+            'noseur-wd-100-pct': this.props.fill,
+            'noseur-no-bd': this.props.borderless,
+            'noseur-disabled': this.props.disabled,
+            'noseur-input-flushed': this.props.flushed,
+            'noseur-skeleton': this.props.scheme === Scheme.SKELETON,
+            'noseur-raised-bd': !this.props.noStyle && this.props.raised,
+            'noseur-bd-radius-20': !this.props.noStyle && this.props.rounded,
+            'noseur-input-filled': !this.props.noStyle && this.props.filled,
+        }, "noseur-input", this.props.className);
+        const props = {
+            className,
+            ...eventProps,
+            id: this.props.id,
+            key: this.props.key,
+            rows: this.props.rows,
+            type: this.props.type,
+            name: this.props.name,
+            style: this.props.style,
+            children: this.props.children,
+            required: this.props.required,
+            readOnly: this.props.readOnly,
+            defaultValue: this.state.value,
+            placeholder: this.props.placeholder,
+            onBlur: this.onBlur,
+            onKeyUp: this.onKeyUp,
+            onInput: this.onInput,
+            onKeyDown: this.onKeyDown,
+            onPasteCapture: this.onPasteCapture,
+            ref: (el) => {
+                if (!el)
+                    return;
+                this.internalInputElement = el;
+                ObjectHelper.resolveRef(this.props.forwardRef, el);
+            }
+        };
+        if (this.props.value)
+            props.value = this.props.value;
+        if (this.internalInputElement && !this.internalInputElement.value && this.internalInputElement.value !== this.state.value) {
+            this.internalInputElement.value = this.state.value ?? "";
+        }
+        return (this.props.type === "textarea"
+            ? React.createElement("textarea", { ...props })
+            : React.createElement("input", { ...props }));
+    }
+}
+export const TextInput = ({ ref, ...props }) => {
+    return (React.createElement(Input, { ...props, forwardRef: ref }));
+};
+export const EmailInput = ({ ref, ...props }) => (React.createElement(Input, { ...props, forwardRef: ref, type: "email" }));
+export const NumberInput = ({ ref, ...props }) => (React.createElement(Input, { ...props, forwardRef: ref, type: "number" }));
+export const TextAreaInput = ({ ref, ...props }) => (React.createElement(Input, { ...props, forwardRef: ref, type: "textarea" }));
+export const PasswordInput = ({ ref, ...props }) => (React.createElement(Input, { ...props, forwardRef: ref, type: "password" }));
+export const MoneyInput = ({ ref, ...props }) => (React.createElement(Input, { ...props, forwardRef: ref, inputFilter: InputFilter.MONEY }));