@deviceinsight/ng-ui-basic-components 3.13.0-SNAPSHOT

package/lib/esm/components/tabs/Tabs.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import Bubble from '../bubble/Bubble';
+/**
+ * Tabs add the possibility to unite several homogeneous pages into one.
+ * Unlike RouteTabs, Tabs cannot be accessed directly via the browser's history
+ */
+export default class Tabs extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            currentTab: this.props.pages.length ? this.props.pages[0].name : null
+        };
+        this.handleClick = (tab) => {
+            if (this.props.onChange) {
+                this.props.onChange(tab);
+            }
+            else if (typeof this.props.currentTab === 'undefined') {
+                this.setState({
+                    currentTab: tab
+                });
+            }
+        };
+        this.currentTabPage = () => {
+            const currentTab = typeof this.props.currentTab === 'string' ? this.props.currentTab : this.state.currentTab;
+            return this.props.pages.find(({ name }) => currentTab === name);
+        };
+        this.isCurrentTab = (tab) => {
+            const currentTab = typeof this.props.currentTab === 'string' ? this.props.currentTab : this.state.currentTab;
+            return currentTab === tab;
+        };
+        this.renderBody = () => {
+            const page = this.currentTabPage();
+            if (page && typeof page.renderBody === 'function') {
+                return page.renderBody();
+            }
+            return null;
+        };
+    }
+    render() {
+        const { pages, disabled } = this.props;
+        return (React.createElement("div", null,
+            React.createElement("div", { className: "di tabs" }, pages.map(({ name, renderHeading, tabDescription }) => tabDescription ? (React.createElement(Bubble, { inverted: true, key: name, content: tabDescription, className: "bubble-tab-description" },
+                React.createElement("button", { "data-testid": "tab-button", className: `item ${disabled ? 'disabled' : ''} ${this.isCurrentTab(name) ? 'active' : ''}`, onClick: () => !disabled && this.handleClick(name) }, renderHeading()))) : (React.createElement("button", { "data-testid": "tab-button", key: name, className: `item ${disabled ? 'disabled' : ''} ${this.isCurrentTab(name) ? 'active' : ''}`, onClick: () => !disabled && this.handleClick(name) }, renderHeading())))),
+            this.renderBody()));
+    }
+}

package/lib/esm/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { PopupDirection } from '../popup/Popup';
+export declare type Props = {
+    /** Content of the Tooltip */
+    content: React.ReactNode;
+    /** Enabler of the Tooltip */
+    children: React.ReactNode;
+    /** @ignore */
+    className?: string;
+    /** (Optional) if set, disables the <Tooltip/> from opening */
+    disabled?: boolean;
+    /** (Optional) if set, opens <Tooltip/> in given direction, defaults to 'right' */
+    direction?: PopupDirection;
+};
+declare type State = {
+    active: boolean;
+};
+/**
+ * Tooltip is best used to display some short additional information or description
+ */
+export default class Tooltip extends React.Component<Props, State> {
+    state: State;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    render(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=Tooltip.d.ts.map

package/lib/esm/components/tooltip/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAc,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAC;AAErD,oBAAY,KAAK,GAAG;IACnB,6BAA6B;IAC7B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,6BAA6B;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,wFAAwF;IACxF,SAAS,CAAC,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF,aAAK,KAAK,GAAG;IACZ,MAAM,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACjE,KAAK,EAAE,KAAK,CAEV;IAEF,gBAAgB,EAAE,MAAM,IAAI,CAQ1B;IAEF,gBAAgB,EAAE,MAAM,IAAI,CAI1B;IAEF,MAAM;CAmBN"}

package/lib/esm/components/tooltip/Tooltip.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import Popup from '../popup/Popup';
+/**
+ * Tooltip is best used to display some short additional information or description
+ */
+export default class Tooltip extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            active: false
+        };
+        this.handleMouseEnter = () => {
+            const { disabled } = this.props;
+            if (!disabled) {
+                this.setState({
+                    active: true
+                });
+            }
+        };
+        this.handleMouseLeave = () => {
+            this.setState({
+                active: false
+            });
+        };
+    }
+    render() {
+        const { content, children, className, direction, ...otherProps } = this.props;
+        const { active } = this.state;
+        return (React.createElement("span", { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave },
+            React.createElement(Popup, { ...otherProps, active: active, onHide: () => { }, handler: children, direction: direction ? direction : 'right', onHandlerClick: () => { }, className: `tooltip inverted ${className ? className : ''}` },
+                React.createElement("span", { className: "tooltip-content" }, content))));
+    }
+}

package/lib/esm/hooks/useOutsideClick.d.ts

@@ -0,0 +1,3 @@
+declare const useOutsideClick: (elements: Array<HTMLElement | null>, callback: (evt: MouseEvent | TouchEvent | undefined) => void) => void;
+export default useOutsideClick;
+//# sourceMappingURL=useOutsideClick.d.ts.map

package/lib/esm/hooks/useOutsideClick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOutsideClick.d.ts","sourceRoot":"","sources":["../../../src/hooks/useOutsideClick.ts"],"names":[],"mappings":"AAqBA,QAAA,MAAM,eAAe,aACV,MAAM,WAAW,GAAG,IAAI,CAAC,kBACnB,UAAU,GAAG,UAAU,GAAG,SAAS,KAAK,IAAI,SA6B5D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/esm/hooks/useOutsideClick.js

@@ -0,0 +1,40 @@
+import { useEffect, useRef } from 'react';
+const isTouchEvent = (event) => {
+    return !!event.touches;
+};
+const isInsideBoundingRect = (element, event) => {
+    const rect = element.getBoundingClientRect();
+    let x, y;
+    if (isTouchEvent(event)) {
+        x = event.touches[0].pageX;
+        y = event.touches[0].pageY;
+    }
+    else {
+        x = event.pageX;
+        y = event.pageY;
+    }
+    return rect.left <= x && rect.right >= x && rect.top <= y && rect.bottom >= y;
+};
+const useOutsideClick = (elements, callback) => {
+    const callbackRef = useRef(callback);
+    useEffect(() => {
+        callbackRef.current = callback;
+    }, [callback]);
+    useEffect(() => {
+        const listener = (event) => {
+            const elementsNonNull = elements.filter((element) => element != null);
+            if (elementsNonNull.every((element) => element !== event.target &&
+                !element.contains(event.target) &&
+                !isInsideBoundingRect(element, event))) {
+                callbackRef.current(event);
+            }
+        };
+        document.addEventListener('mousedown', listener, true);
+        document.addEventListener('touchstart', listener, true);
+        return () => {
+            document.removeEventListener('mousedown', listener, true);
+            document.removeEventListener('touchstart', listener, true);
+        };
+    }, [elements]);
+};
+export default useOutsideClick;

package/lib/esm/index.d.ts

@@ -0,0 +1,22 @@
+import './assets/style.css';
+export { default as Accordion } from './components/accordion/Accordion';
+export { default as AccordionItem } from './components/accordionComponents/AccordionItem';
+export { default as Button } from './components/button/Button';
+export { default as ButtonRow } from './components/button/ButtonRow';
+export { default as Modal } from './components/modal/Modal';
+export { default as ModalContainer } from './components/modalComponents/ModalContainer';
+export { default as Spinner } from './components/spinner/Spinner';
+export { default as SpinnerContainer } from './components/spinner/SpinnerContainer';
+export { default as Checkbox } from './components/input/Checkbox';
+export { default as ConfirmProvider } from './components/confirm/ConfirmProvider';
+export { default as withConfirm } from './components/confirm/withConfirm';
+export { default as useConfirm } from './components/confirm/useConfirm';
+export { default as Icon } from './components/icon/Icon';
+export { default as Label } from './components/label/Label';
+export { default as Bubble } from './components/bubble/Bubble';
+export { default as Tooltip } from './components/tooltip/Tooltip';
+export { default as Tabs } from './components/tabs/Tabs';
+export { default as SearchBox } from './components/input/SearchBox';
+export { default as Popup } from './components/popup/Popup';
+export type { ConfirmProps } from './components/confirm/withConfirm';
+//# sourceMappingURL=index.d.ts.map

package/lib/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAC,OAAO,IAAI,aAAa,EAAC,MAAM,gDAAgD,CAAC;AACxF,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAC,OAAO,IAAI,KAAK,EAAC,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,6CAA6C,CAAC;AACtF,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAC,OAAO,IAAI,gBAAgB,EAAC,MAAM,uCAAuC,CAAC;AAClF,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAC,OAAO,IAAI,eAAe,EAAC,MAAM,sCAAsC,CAAC;AAChF,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAC,OAAO,IAAI,KAAK,EAAC,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAC,OAAO,IAAI,KAAK,EAAC,MAAM,0BAA0B,CAAC;AAG1D,YAAY,EAAC,YAAY,EAAC,MAAM,kCAAkC,CAAC"}

package/lib/esm/index.js

@@ -0,0 +1,21 @@
+import './assets/style.css';
+// Components
+export { default as Accordion } from './components/accordion/Accordion';
+export { default as AccordionItem } from './components/accordionComponents/AccordionItem';
+export { default as Button } from './components/button/Button';
+export { default as ButtonRow } from './components/button/ButtonRow';
+export { default as Modal } from './components/modal/Modal';
+export { default as ModalContainer } from './components/modalComponents/ModalContainer';
+export { default as Spinner } from './components/spinner/Spinner';
+export { default as SpinnerContainer } from './components/spinner/SpinnerContainer';
+export { default as Checkbox } from './components/input/Checkbox';
+export { default as ConfirmProvider } from './components/confirm/ConfirmProvider';
+export { default as withConfirm } from './components/confirm/withConfirm';
+export { default as useConfirm } from './components/confirm/useConfirm';
+export { default as Icon } from './components/icon/Icon';
+export { default as Label } from './components/label/Label';
+export { default as Bubble } from './components/bubble/Bubble';
+export { default as Tooltip } from './components/tooltip/Tooltip';
+export { default as Tabs } from './components/tabs/Tabs';
+export { default as SearchBox } from './components/input/SearchBox';
+export { default as Popup } from './components/popup/Popup';

package/lib/esm/types/i18n.d.ts

@@ -0,0 +1,5 @@
+export declare type TranslationDescriptor = {
+    id: string;
+    defaultValue: string;
+};
+//# sourceMappingURL=i18n.d.ts.map

package/lib/esm/types/i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../src/types/i18n.ts"],"names":[],"mappings":"AAAA,oBAAY,qBAAqB,GAAG;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,MAAM,CAAC;CACrB,CAAC"}

package/lib/esm/types/i18n.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,80 @@
+{
+	"name": "@deviceinsight/ng-ui-basic-components",
+	"version": "3.13.0-SNAPSHOT",
+	"private": false,
+	"license": "SEE LICENSE IN LICENSE",
+	"repository": {
+		"type": "git",
+		"url": "https://gitlab.device-insight.com/ng-ui/ng-ui-basic-components.git"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"main": "lib/cjs/index.js",
+	"exports": {
+		"require": "./lib/cjs/index.js",
+		"import": "./lib/esm/index.js"
+	},
+	"types": "./lib/esm/index.d.ts",
+	"files": [
+		"lib"
+	],
+	"scripts": {
+		"scan": "npx --registry=https://registry.npmjs.org audit-ci@^6 --low true --skip-dev --config scan-config.json5",
+		"prebuild:library": "rm -rf ./lib",
+		"build:library": "tsc && tsc --project tsconfig.cjs.json",
+		"postbuild:library": "cp -R ./src/assets ./lib/esm && cp -R ./src/assets ./lib/cjs",
+		"build": "npm run build:library",
+		"eslint": "eslint -c .eslintrc \"**/*.{ts,tsx}\"",
+		"prettier": "prettier --write \"{src/**/*.ts,src/**/*.tsx,src/**/*.md}\"",
+		"watch": "npm run build:library; tsc-watch --onSuccess \"yalc push\"",
+		"prepare": "husky install",
+		"pre-commit": "lint-staged",
+		"typecheck": "tsc --noEmit"
+	},
+	"dependencies": {
+		"classnames": "2.3.1",
+		"dayjs": "1.11.0",
+		"lodash": "4.17.21",
+		"react-draggable": "4.4.5",
+		"react-popper": "2.3.0"
+	},
+	"peerDependencies": {
+		"react": "^18.2.x",
+		"react-dom": "^18.2.x",
+		"react-i18next": "^12.x"
+	},
+	"devDependencies": {
+		"@types/classnames": "2.3.1",
+		"@types/i18next": "8.4.6",
+		"@types/lodash": "4.14.169",
+		"@types/node": "15.3.0",
+		"@types/react": "18.0.27",
+		"@types/react-dom": "18.0.10",
+		"@typescript-eslint/eslint-plugin": "5.19.0",
+		"@typescript-eslint/parser": "5.19.0",
+		"core-js": "3.8.3",
+		"dotenv": "8.2.0",
+		"eslint": "8.13.0",
+		"eslint-plugin-filenames": "1.3.2",
+		"eslint-plugin-import": "2.26.0",
+		"eslint-plugin-react": "7.29.4",
+		"eslint-plugin-react-hooks": "4.4.0",
+		"husky": "8.0.0",
+		"i18next": "19.9.2",
+		"lint-staged": "10.5.4",
+		"prettier": "2.2.1",
+		"raf": "3.4.1",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"react-i18next": "12.1.5",
+		"react-router-dom": "5.3.4",
+		"tsc-watch": "4.2.9",
+		"typescript": "4.6.3"
+	},
+	"lint-staged": {
+		"{src/**/*.ts,src/**/*.tsx}": [
+			"prettier --write"
+		]
+	}
+}