@deviceinsight/ng-ui-components 6.18.0-SNAPSHOT

package/lib/cjs/components/input/SelectWithSearch.js

@@ -0,0 +1,119 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const react_select_1 = __importDefault(require("react-select"));
+const lodash_1 = require("lodash");
+require("../../assets/react-select.css");
+require("../../assets/react-select-custom.css");
+function getSortedOptions(options, compareOptions) {
+    if (!compareOptions) {
+        // @ts-ignore
+        return (0, lodash_1.orderBy)(options, 'label', 'asc');
+    }
+    // @ts-ignore
+    if (options.every((option) => !option.options)) {
+        const singleOptions = options;
+        return [...singleOptions].sort(compareOptions);
+    }
+    // @ts-ignore
+    if (options.every((option) => option.options)) {
+        const groupOptions = options;
+        return groupOptions.map((option) => ({ ...option, options: [...option.options].sort(compareOptions) }));
+    }
+    throw new Error('Mixing groups with single options not allowed');
+}
+/**
+ * SelectWithSearch enhances a native select list by applying a search functionality to it.
+ * Additional entries can be added by setting and adjusting `specialOptions`
+ */
+class SelectWithSearch extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            options: []
+        };
+        this.selectRef = React.createRef();
+        this.portalRoot = null;
+        this.updateOptions = () => {
+            const { options, specialOptions, compareOptions } = this.props;
+            const sortedOptions = getSortedOptions(options, compareOptions);
+            if (specialOptions) {
+                this.setState({
+                    // @ts-ignore
+                    options: [...sortedOptions, ...specialOptions]
+                });
+            }
+            else {
+                this.setState({
+                    options: sortedOptions
+                });
+            }
+        };
+        this.filterOption = (option, inputValue) => {
+            return option.label.toString().toLowerCase().startsWith(inputValue.toLowerCase());
+        };
+        this.getContainerClasses = () => {
+            const { specialOptions } = this.props;
+            if (specialOptions) {
+                return ['select-search-container', 'special'];
+            }
+            return ['select-search-container'];
+        };
+    }
+    componentDidMount() {
+        this.updateOptions();
+        if (this.props['data-testid'] && this.selectRef && this.selectRef.current) {
+            this.selectRef.current.controlRef.setAttribute('data-testid', this.props['data-testid']);
+        }
+        if (this.props.menuPortalTarget) {
+            this.portalRoot = document.createElement('div');
+            const classes = this.getContainerClasses();
+            this.portalRoot.classList.add(...classes);
+            this.props.menuPortalTarget.appendChild(this.portalRoot);
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if (!(0, lodash_1.isEqual)(prevProps.options, this.props.options)) {
+            this.updateOptions();
+        }
+    }
+    componentWillUnmount() {
+        if (this.props.menuPortalTarget && this.portalRoot) {
+            this.props.menuPortalTarget.removeChild(this.portalRoot);
+        }
+    }
+    render() {
+        const { noResultsMessage, placeholder, value, onChange, clearable, loading, disabled } = this.props;
+        const { options } = this.state;
+        return (React.createElement(react_select_1.default, { ref: this.selectRef, joinValues: true, name: "form-field-name", className: this.getContainerClasses().join(' '), classNamePrefix: "select-search", isClearable: clearable, noOptionsMessage: noResultsMessage ? () => noResultsMessage : undefined, options: options, value: value || null, onChange: onChange, placeholder: placeholder, 
+            // @ts-ignore
+            filterOption: this.filterOption, isLoading: loading, menuPortalTarget: this.portalRoot, isDisabled: disabled }));
+    }
+}
+exports.default = SelectWithSearch;

package/lib/cjs/components/input/SelectWithSearchAsync.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { Pageable } from '../../types/pagination';
+import '../../assets/react-select.css';
+import '../../assets/react-select-custom.css';
+export declare type Props<Item, ID> = {
+    /** Flag to preselect the status of the checkbox */
+    value: ID | null | undefined;
+    /** Function, executed when selecting value */
+    onChange: (item: ID | null | undefined) => void;
+    /** Identifier for value */
+    valueKey: string;
+    /** Identifier for label */
+    labelKey: string;
+    /** Function, executed when the component mounts and updates */
+    searchByQuery: (query: string, offset: number) => Promise<Pageable<Item>>;
+    /** Function, executed when the component mounts and updates */
+    searchById: (id: ID) => Promise<Item | null | undefined>;
+    /** (Optional) if set, returns a custom message if no results are available*/
+    noResultsMessage?: string;
+    /** (Optional) if true, enables button to clear field on click */
+    clearable?: boolean;
+    /** (Optional) indicates if the component is disabled or not */
+    disabled?: boolean;
+    /** (Optional) Whether the menu should use a portal, and where it should attach */
+    menuPortalTarget?: HTMLElement;
+    /** Placeholder */
+    placeholder?: string;
+    /** @ignore */
+    'data-testid'?: string;
+};
+declare type SelectItem<ID> = {
+    value: ID;
+    label: string;
+};
+declare type State<ID extends string | number> = {
+    cache: Record<ID, SelectItem<ID>>;
+    currentItem: SelectItem<ID> | null | undefined;
+};
+/**
+ * SelectWithSearchAsync enhances a native select list by applying a search functionality to it.
+ * Fetches selectable results asynchronously while showing small loading indicator
+ */
+export default class SelectWithSearchAsync<Item, ID extends string | number> extends React.Component<Props<Item, ID>, State<ID>> {
+    state: State<ID>;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    transformBackendItemToSelectItem: (backendItem: any) => SelectItem<ID>;
+    reloadItemFromCache: () => boolean;
+    addBackendItemToCache: (item: Item | null | undefined) => void;
+    fetchOptions: (input: string, options: Array<Item>) => Promise<{
+        hasMore: boolean;
+        options: Array<any>;
+    }>;
+    handleChange: (item: SelectItem<ID> | null | undefined) => void;
+    render(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=SelectWithSearchAsync.d.ts.map

package/lib/cjs/components/input/SelectWithSearchAsync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectWithSearchAsync.d.ts","sourceRoot":"","sources":["../../../../src/components/input/SelectWithSearchAsync.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,QAAQ,EAAC,MAAM,wBAAwB,CAAC;AAChD,OAAO,+BAA+B,CAAC;AACvC,OAAO,sCAAsC,CAAC;AAE9C,oBAAY,KAAK,CAAC,IAAI,EAAE,EAAE,IAAI;IAC7B,mDAAmD;IACnD,KAAK,EAAE,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IAE7B,8CAA8C;IAC9C,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAEhD,2BAA2B;IAC3B,QAAQ,EAAE,MAAM,CAAC;IAEjB,2BAA2B;IAC3B,QAAQ,EAAE,MAAM,CAAC;IAEjB,+DAA+D;IAC/D,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;IAE1E,+DAA+D;IAC/D,UAAU,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,OAAO,CAAC,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAEzD,6EAA6E;IAC7E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,kFAAkF;IAClF,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAE/B,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,cAAc;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,aAAK,UAAU,CAAC,EAAE,IAAI;IACrB,KAAK,EAAE,EAAE,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,aAAK,KAAK,CAAC,EAAE,SAAS,MAAM,GAAG,MAAM,IAAI;IACxC,KAAK,EAAE,MAAM,CAAC,EAAE,EAAE,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC;IAClC,WAAW,EAAE,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;CAC/C,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,qBAAqB,CAAC,IAAI,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,KAAK,CAAC,SAAS,CACnG,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC,EACf,KAAK,CAAC,EAAE,CAAC,CACT;IACA,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,CAGd;IAEF,iBAAiB;IAQjB,kBAAkB;IAiBlB,gCAAgC,EAAE,CAAC,WAAW,EAAE,GAAG,KAAK,UAAU,CAAC,EAAE,CAAC,CAMpE;IACF,mBAAmB,EAAE,MAAM,OAAO,CAYhC;IACF,qBAAqB,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI,CAQ5D;IAEF,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,OAAO,CAAC;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;KAAC,CAAC,CAgBrG;IAEF,YAAY,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI,CAgB7D;IAEF,MAAM;CAmBN"}

package/lib/cjs/components/input/SelectWithSearchAsync.js

@@ -0,0 +1,126 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const react_select_async_paginate_1 = require("react-select-async-paginate");
+require("../../assets/react-select.css");
+require("../../assets/react-select-custom.css");
+/**
+ * SelectWithSearchAsync enhances a native select list by applying a search functionality to it.
+ * Fetches selectable results asynchronously while showing small loading indicator
+ */
+class SelectWithSearchAsync extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            cache: {},
+            currentItem: null
+        };
+        this.transformBackendItemToSelectItem = (backendItem) => {
+            const { labelKey, valueKey } = this.props;
+            return {
+                value: backendItem[valueKey],
+                label: backendItem[labelKey]
+            };
+        };
+        this.reloadItemFromCache = () => {
+            const { value } = this.props;
+            const { currentItem, cache } = this.state;
+            if (value && (!currentItem || currentItem.value !== value) && cache[value]) {
+                this.setState({
+                    currentItem: cache[value]
+                });
+                return true;
+            }
+            return false;
+        };
+        this.addBackendItemToCache = (item) => {
+            if (item) {
+                const selectItem = this.transformBackendItemToSelectItem(item);
+                const id = selectItem.value;
+                this.setState(({ cache }) => ({
+                    cache: { ...cache, [id]: selectItem }
+                }));
+            }
+        };
+        this.fetchOptions = async (input, options) => {
+            const { searchByQuery } = this.props;
+            try {
+                const { content, number, totalPages } = await searchByQuery(input, options.length);
+                return {
+                    options: content.map(this.transformBackendItemToSelectItem),
+                    hasMore: number < totalPages - 1
+                };
+            }
+            catch (error) {
+                console.error('Error fetching options:', error);
+                return { hasMore: false, options: [] };
+            }
+        };
+        this.handleChange = (item) => {
+            const { onChange } = this.props;
+            if (item) {
+                const id = item.value;
+                this.setState(({ cache }) => ({
+                    cache: { ...cache, [id]: item }
+                }), () => {
+                    onChange(id);
+                });
+            }
+            else {
+                onChange(null);
+            }
+        };
+    }
+    componentDidMount() {
+        const { value, searchById } = this.props;
+        if (value) {
+            searchById(value).then(this.addBackendItemToCache);
+        }
+    }
+    componentDidUpdate() {
+        const { value, searchById } = this.props;
+        const { currentItem } = this.state;
+        if (value && (!currentItem || currentItem.value !== value)) {
+            const foundInCache = this.reloadItemFromCache();
+            if (!foundInCache) {
+                searchById(value).then(this.addBackendItemToCache);
+            }
+        }
+        else if (!value && currentItem) {
+            this.setState({
+                currentItem: null
+            });
+        }
+    }
+    render() {
+        const { clearable, noResultsMessage, disabled, menuPortalTarget } = this.props;
+        const { currentItem } = this.state;
+        return (React.createElement(react_select_async_paginate_1.AsyncPaginate, { className: "select-search-container", classNamePrefix: "select-search", isClearable: clearable, noResultsText: noResultsMessage, value: currentItem, onChange: this.handleChange, 
+            // @ts-ignore
+            loadOptions: this.fetchOptions, isDisabled: disabled, menuPortalTarget: menuPortalTarget, placeholder: this.props.placeholder }));
+    }
+}
+exports.default = SelectWithSearchAsync;

package/lib/cjs/components/input/UrnInput.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+export declare type Props = {
+    /** Current value of input field */
+    value: string;
+    /** Function, executed on change */
+    onChange: (value: string) => any;
+};
+declare type State = {
+    editMode: boolean;
+};
+/**
+ * UrnInput offers a convenient way to add or edit Asset URNs.
+ * Usually, a generated default value is passed in as prop.
+ */
+export default class UrnInput extends React.Component<Props, State> {
+    state: State;
+    handleEdit: () => void;
+    handleChangeValue: (event: React.SyntheticEvent<HTMLInputElement>) => any;
+    render(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=UrnInput.d.ts.map

package/lib/cjs/components/input/UrnInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UrnInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/UrnInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,oBAAY,KAAK,GAAG;IACnB,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IAEd,mCAAmC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,GAAG,CAAC;CACjC,CAAC;AAEF,aAAK,KAAK,GAAG;IACZ,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IAClE,KAAK,EAAE,KAAK,CAEV;IAEF,UAAU,EAAE,MAAM,IAAI,CAGlB;IAEJ,iBAAiB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,GAAG,CAEN;IAEnE,MAAM;CA+BN"}

package/lib/cjs/components/input/UrnInput.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const ng_ui_basic_components_1 = require("@deviceinsight/ng-ui-basic-components");
+/**
+ * UrnInput offers a convenient way to add or edit Asset URNs.
+ * Usually, a generated default value is passed in as prop.
+ */
+class UrnInput extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            editMode: false
+        };
+        this.handleEdit = () => this.setState({
+            editMode: true
+        });
+        this.handleChangeValue = (event) => this.props.onChange(event.target.value);
+    }
+    render() {
+        const { editMode } = this.state;
+        const { value } = this.props;
+        if (editMode) {
+            return (React.createElement("input", { value: value, onChange: this.handleChangeValue, autoCorrect: "off", spellCheck: "false", autoComplete: "off" }));
+        }
+        else {
+            return (React.createElement("span", null,
+                React.createElement("span", { style: {
+                        marginRight: 10
+                    } }, value),
+                React.createElement(ng_ui_basic_components_1.Button, { small: true, onClick: this.handleEdit },
+                    React.createElement(ng_ui_basic_components_1.Icon, { edit: true }))));
+        }
+    }
+}
+exports.default = UrnInput;

package/lib/cjs/components/input/ValidatedTextInput.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+export declare type Props = {
+    /** Value of the input field */
+    value: string;
+    /** Function, executed on change, takes value and valid as arguments */
+    onChange: (value: string, valid: boolean) => void;
+    /** Pattern to validate the input */
+    pattern: RegExp;
+    /** If true, marks the input field as mandatory */
+    required: boolean;
+    /** Placeholder */
+    placeholder: string;
+    /** @ignore */
+    style?: React.CSSProperties;
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    onBlur?: () => void;
+    /** @ignore */
+    disabled?: boolean;
+    /** (Optional) sets custom styles if the input field's value isn't valid */
+    invalidStyle?: React.CSSProperties;
+};
+/**
+ * ValidatedTextInput provides an easy way to validate a text inputs value for a certain pattern.
+ * This is best used for any form of forms.
+ */
+export default class ValidatedTextInput extends React.Component<Props> {
+    static defaultProps: {
+        required: boolean;
+    };
+    handleChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+    render(): JSX.Element;
+}
+//# sourceMappingURL=ValidatedTextInput.d.ts.map

package/lib/cjs/components/input/ValidatedTextInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidatedTextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/ValidatedTextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,oBAAY,KAAK,GAAG;IACnB,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IAEd,uEAAuE;IACvE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAElD,oCAAoC;IACpC,OAAO,EAAE,MAAM,CAAC;IAEhB,kDAAkD;IAClD,QAAQ,EAAE,OAAO,CAAC;IAElB,kBAAkB;IAClB,WAAW,EAAE,MAAM,CAAC;IAEpB,cAAc;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACnC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;IACrE,MAAM,CAAC,YAAY,EAAE;QACpB,QAAQ,EAAE,OAAO,CAAC;KAClB,CAEC;IAEF,YAAY,MAAO,MAAM,cAAc,CAAC,gBAAgB,CAAC,UAKvD;IAEF,MAAM;CAaN"}

package/lib/cjs/components/input/ValidatedTextInput.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const isValid = (value, pattern, required) => {
+    if (!value.length) {
+        return !required;
+    }
+    return pattern.test(value);
+};
+/**
+ * ValidatedTextInput provides an easy way to validate a text inputs value for a certain pattern.
+ * This is best used for any form of forms.
+ */
+class ValidatedTextInput extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.handleChange = (e) => {
+            const { value } = e.target;
+            const { pattern, required, onChange } = this.props;
+            const valid = isValid(value, pattern, required);
+            onChange(value, valid);
+        };
+    }
+    render() {
+        const { style, invalidStyle, value, ...props } = this.props;
+        const { pattern, required, ...otherProps } = props;
+        return (react_1.default.createElement("input", { ...otherProps, value: value, onChange: this.handleChange, style: isValid(value, pattern, required) ? style : { ...style, ...invalidStyle }, type: "text" }));
+    }
+}
+exports.default = ValidatedTextInput;
+ValidatedTextInput.defaultProps = {
+    required: false
+};

package/lib/cjs/components/input/__tests__/DateInput.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DateInput.spec.d.ts.map

package/lib/cjs/components/input/__tests__/DateInput.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.spec.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/__tests__/DateInput.spec.tsx"],"names":[],"mappings":""}

package/lib/cjs/components/input/__tests__/DateInput.spec.js

@@ -0,0 +1,113 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_2 = require("@testing-library/react");
+const DateInput_1 = __importDefault(require("../DateInput"));
+jest.mock('i18next', () => ({ language: 'de' }));
+const DateStateProvider = ({ children, initialValue }) => {
+    const [state, setState] = (0, react_1.useState)(initialValue);
+    return children(state, setState);
+};
+describe('DateInput.js', () => {
+    describe('Locale support', () => {
+        it('should render date in correct format for de-DE locale', async () => {
+            (0, react_2.render)(react_1.default.createElement(DateInput_1.default, { value: new Date('2019-02-01').getTime(), onChange: () => { } }));
+            await (0, react_2.waitFor)(() => expect(react_2.screen.getByTestId('date-input')).toHaveValue('01.02.2019'));
+        });
+    });
+    describe('Changing values via text input', () => {
+        it('should render correct date typed into text input without "invalid" class', async () => {
+            await (0, react_2.act)(async () => {
+                (0, react_2.render)(react_1.default.createElement(DateStateProvider, { initialValue: new Date('2019-02-01').getTime() }, (date, setDate) => react_1.default.createElement(DateInput_1.default, { value: date, onChange: (date) => setDate(date) })));
+            });
+            await (0, react_2.act)(async () => {
+                react_2.fireEvent.change(react_2.screen.getByTestId('date-input'), { target: { value: '02.02.2019' } });
+            });
+            expect(react_2.screen.getByTestId('date-input')).toHaveValue('02.02.2019');
+            expect(react_2.screen.getByTestId('date-input')).not.toHaveClass('invalid');
+        });
+        it('should render incorrect date typed into text input with "invalid" class', async () => {
+            await (0, react_2.act)(async () => {
+                (0, react_2.render)(react_1.default.createElement(DateStateProvider, { initialValue: new Date('2019-02-01').getTime() }, (date, setDate) => react_1.default.createElement(DateInput_1.default, { value: date, onChange: (date) => setDate(date) })));
+            });
+            await (0, react_2.act)(async () => {
+                react_2.fireEvent.change(react_2.screen.getByTestId('date-input'), { target: { value: '02.02.201' } });
+            });
+            expect(react_2.screen.getByTestId('date-input')).toHaveClass('invalid');
+        });
+        it('should call onChange callback with parsed value of the input during the input is being changed when the value is valid', async () => {
+            const onChange = jest.fn();
+            await (0, react_2.act)(async () => {
+                (0, react_2.render)(react_1.default.createElement(DateInput_1.default, { value: new Date('2019-02-01').getTime(), onChange: onChange }));
+            });
+            await (0, react_2.act)(async () => {
+                react_2.fireEvent.change(react_2.screen.getByTestId('date-input'), { target: { value: '02.02.2019' } });
+            });
+            const currentValue = onChange.mock.calls[onChange.mock.calls.length - 1][0];
+            expect((0, dayjs_1.default)(currentValue).toISOString()).toEqual((0, dayjs_1.default)('2019-02-02').toISOString());
+        });
+        it('should not call onChange callback while editing the input when the input value is invalid', async () => {
+            const onChange = jest.fn();
+            await (0, react_2.act)(async () => {
+                (0, react_2.render)(react_1.default.createElement(DateInput_1.default, { value: new Date('2019-02-01').getTime(), onChange: onChange }));
+            });
+            await (0, react_2.act)(async () => {
+                react_2.fireEvent.change(react_2.screen.getByTestId('date-input'), { target: { value: '02.02.201' } });
+            });
+            expect(onChange).not.toHaveBeenCalled();
+        });
+        it('should display the current value in the input field if the input value is invalid and the input became blurred', async () => {
+            await (0, react_2.act)(async () => {
+                (0, react_2.render)(react_1.default.createElement(DateStateProvider, { initialValue: new Date('2019-02-01').getTime() }, (date, setDate) => react_1.default.createElement(DateInput_1.default, { value: date, onChange: (date) => setDate(date) })));
+            });
+            await (0, react_2.act)(async () => {
+                react_2.fireEvent.change(react_2.screen.getByTestId('date-input'), { target: { value: '02.02.201' } });
+                react_2.fireEvent.blur(react_2.screen.getByTestId('date-input'));
+            });
+            expect(react_2.screen.getByTestId('date-input')).toHaveValue('01.02.2019');
+        });
+        it('should display invalid date text in the input when the value is NaN', async () => {
+            await (0, react_2.act)(async () => {
+                (0, react_2.render)(react_1.default.createElement(DateInput_1.default, { value: NaN, onChange: () => { } }));
+            });
+            expect(react_2.screen.getByTestId('date-input')).toHaveValue('dateInput.invalidDate');
+        });
+        it('should call onChange callback with [null, true] when empty string is set to input field', async () => {
+            const onChange = jest.fn();
+            await (0, react_2.act)(async () => {
+                (0, react_2.render)(react_1.default.createElement(DateInput_1.default, { value: Date.now(), onChange: onChange }));
+            });
+            await (0, react_2.act)(async () => {
+                react_2.fireEvent.change(react_2.screen.getByTestId('date-input'), { target: { value: '' } });
+            });
+            expect(onChange.mock.calls).toEqual([[null, true]]);
+        });
+    });
+});

package/lib/cjs/components/input/__tests__/DateTimeInput.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DateTimeInput.spec.d.ts.map

package/lib/cjs/components/input/__tests__/DateTimeInput.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeInput.spec.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/__tests__/DateTimeInput.spec.tsx"],"names":[],"mappings":""}

package/lib/cjs/components/input/__tests__/DateTimeInput.spec.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const DateTimeInput_1 = __importDefault(require("../DateTimeInput"));
+const react_2 = require("@testing-library/react");
+describe('DateTimeInput.js', () => {
+    it('should update time when timestamp has changed', () => {
+        const { rerender } = (0, react_2.render)(react_1.default.createElement(DateTimeInput_1.default, { timestamp: new Date('2019-02-01T11:11:00').getTime(), onChange: () => { } }));
+        const timeElement = react_2.screen.queryByDisplayValue('11:11');
+        expect(timeElement).toBeInTheDocument();
+        rerender(react_1.default.createElement(DateTimeInput_1.default, { timestamp: new Date('2019-02-02T03:24:00').getTime(), onChange: () => { } }));
+        expect(timeElement).toHaveDisplayValue('03:24');
+    });
+});

package/lib/cjs/components/input/__tests__/SelectWithSearchAsync.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SelectWithSearchAsync.spec.d.ts.map

package/lib/cjs/components/input/__tests__/SelectWithSearchAsync.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectWithSearchAsync.spec.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/__tests__/SelectWithSearchAsync.spec.tsx"],"names":[],"mappings":""}