@kwiz/fluentui 1.0.21 → 1.0.24

package/dist/controls/horizontal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"horizontal.js","sourceRoot":"","sources":["../../src/controls/horizontal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAiB,OAAO,EAAE,MAAM,WAAW,CAAC;AAEnD,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,UAAU,kCACH,MAAM,CAAC,IAAI,KACd,aAAa,EAAE,KAAK,GACvB;IACD,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,KAAK,EAAE,MAAM,CAAC,KAAK;CACtB,CAAC,CAAA;AAMF,MAAM,CAAC,MAAM,UAAU,GAA6D,CAAC,KAAK,EAAE,EAAE;IAC1F,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,IAAI,GAAG,GAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;IAEjD,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC9B,IAAI,KAAK,CAAC,IAAI;QACV,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,KAAK,CAAC,KAAK;QACX,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE7B,IAAI,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC;QAAE,GAAG,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvD,OAAO,CACH,KAAC,OAAO,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CACnC,CAAC;AACN,CAAC,CAAA"}

package/dist/controls/input.d.ts

@@ -0,0 +1,13 @@
+import { InputProps, TextareaProps } from '@fluentui/react-components';
+import React from 'react';
+interface IProps extends InputProps {
+    onOK?: () => void;
+    onCancel?: () => void;
+}
+export declare const InputEx: React.FunctionComponent<React.PropsWithChildren<IProps>>;
+interface IPropsTextArea extends TextareaProps {
+    fullSize?: boolean;
+    growNoShrink?: boolean;
+}
+export declare const TextAreaEx: React.FunctionComponent<React.PropsWithChildren<IPropsTextArea>>;
+export {};

package/dist/controls/input.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input, makeStyles, mergeClasses, Textarea } from '@fluentui/react-components';
+import { isFunction } from '@kwiz/common';
+import React from 'react';
+import { useKWIZFluentContext } from '../helpers/context';
+export const InputEx = (props) => {
+    const ctx = useKWIZFluentContext();
+    return (_jsx(Input, Object.assign({ appearance: ctx.inputAppearance }, props, { onKeyDown: isFunction(props.onOK) || isFunction(props.onCancel)
+            ? e => {
+                if (isFunction(props.onOK) && e.key === "Enter")
+                    props.onOK();
+                else if (isFunction(props.onCancel) && e.key === "Escape")
+                    props.onCancel();
+            }
+            : undefined })));
+};
+const fullSize = {
+    width: '100% !important',
+    maxHeight: '100% !important'
+};
+const useStyles = makeStyles({
+    fullSizeTextArea: Object.assign(Object.assign({}, fullSize), { ['& > textarea']: fullSize }),
+});
+export const TextAreaEx = (props) => {
+    const cssNames = useStyles();
+    let css = [];
+    if (props.fullSize)
+        css.push(cssNames.fullSizeTextArea);
+    const textAreaRef = React.useRef(null);
+    const recalcHeight = React.useCallback(() => {
+        if (textAreaRef.current && props.growNoShrink) {
+            if (textAreaRef.current.scrollHeight > textAreaRef.current.clientHeight)
+                textAreaRef.current.style.minHeight = textAreaRef.current.scrollHeight + 'px';
+        }
+    }, [textAreaRef]);
+    let style = Object.assign({ height: '100%' }, props.style);
+    return (_jsx(Textarea, Object.assign({ ref: textAreaRef, className: mergeClasses(...css) }, props, { style: style, onChange: (e, d) => {
+            if (props.onChange)
+                props.onChange(e, d);
+            recalcHeight();
+        } })));
+};
+//# sourceMappingURL=input.js.map

package/dist/controls/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../src/controls/input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,KAAK,EAAc,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAiB,MAAM,4BAA4B,CAAC;AAChI,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAO1D,MAAM,CAAC,MAAM,OAAO,GAA6D,CAAC,KAAK,EAAE,EAAE;IACvF,MAAM,GAAG,GAAG,oBAAoB,EAAE,CAAC;IACnC,OAAO,CACH,KAAC,KAAK,kBAAC,UAAU,EAAE,GAAG,CAAC,eAAe,IAAM,KAAK,IAC7C,SAAS,EAAE,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC;YAC3D,CAAC,CAAC,CAAC,CAAC,EAAE;gBACF,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;oBAAE,KAAK,CAAC,IAAI,EAAE,CAAC;qBACzD,IAAI,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;oBAAE,KAAK,CAAC,QAAQ,EAAE,CAAC;YAChF,CAAC;YACD,CAAC,CAAC,SAAS,IAEjB,CACL,CAAC;AACN,CAAC,CAAA;AAED,MAAM,QAAQ,GAAiB;IAC3B,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,iBAAiB;CAC/B,CAAC;AACF,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,gBAAgB,kCACT,QAAQ,KACX,CAAC,cAAc,CAAC,EAAE,QAAQ,GAC7B;CACJ,CAAC,CAAA;AAMF,MAAM,CAAC,MAAM,UAAU,GAAqE,CAAC,KAAK,EAAE,EAAE;IAClG,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,IAAI,GAAG,GAAa,EAAE,CAAC;IAEvB,IAAI,KAAK,CAAC,QAAQ;QAAE,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IACxD,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAsB,IAAI,CAAC,CAAC;IAC5D,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,IAAI,WAAW,CAAC,OAAO,IAAI,KAAK,CAAC,YAAY,EAAE,CAAC;YAC5C,IAAI,WAAW,CAAC,OAAO,CAAC,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,YAAY;gBACnE,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,YAAY,GAAG,IAAI,CAAC;QACtF,CAAC;IACL,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,IAAI,KAAK,mBAA0B,MAAM,EAAE,MAAM,IAAK,KAAK,CAAC,KAAK,CAAE,CAAC;IACpE,OAAO,CACH,KAAC,QAAQ,kBAAC,GAAG,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,CAAC,GAAG,GAAG,CAAC,IAAM,KAAK,IAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACrG,IAAI,KAAK,CAAC,QAAQ;gBAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YACzC,YAAY,EAAE,CAAC;QACnB,CAAC,IAAI,CACR,CAAC;AACN,CAAC,CAAA"}

package/dist/controls/kwizoverflow.d.ts

@@ -0,0 +1,14 @@
+interface IProps<ItemType> {
+    /** you cannot have a menu with trigger in overflow items. put those in groupWrapper controls before/after rendering children. */
+    items: ItemType[];
+    getKey: (item: ItemType, index: number) => string;
+    getPriority?: (item: ItemType, index: number) => number;
+    renderItem: (item: ItemType, index: number, overflow?: boolean) => JSX.Element;
+    groupWrapper?: (children: React.ReactNode) => JSX.Element;
+    menuRef?: React.RefObject<HTMLButtonElement>;
+    menuWrapper?: (children: React.ReactNode) => JSX.Element;
+    menuTrigger?: (ref: React.RefObject<HTMLButtonElement>, overflowCount: number) => JSX.Element;
+    className?: string;
+}
+export declare const KWIZOverflow: <ItemType>(props: IProps<ItemType>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/controls/kwizoverflow.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu, MenuButton, MenuItem, MenuList, MenuPopover, MenuTrigger, Overflow, OverflowItem, useIsOverflowItemVisible, useOverflowMenu } from "@fluentui/react-components";
+import { MoreHorizontalFilled } from "@fluentui/react-icons";
+import { isNumber } from '@kwiz/common';
+const OverflowMenu = (props) => {
+    const { ref, isOverflowing, overflowCount } = useOverflowMenu();
+    if (!isOverflowing) {
+        return null;
+    }
+    let menu = _jsxs(Menu, { children: [_jsx(MenuTrigger, { disableButtonEnhancement: true, children: props.menuTrigger
+                    ? props.menuTrigger(props.menuRef || ref, overflowCount)
+                    : _jsx(MenuButton, { icon: _jsx(MoreHorizontalFilled, {}), ref: props.menuRef || ref, "aria-label": "More items", appearance: "subtle" }) }), _jsx(MenuPopover, { children: _jsx(MenuList, { children: props.items.map((item, index) => (_jsx(OverflowMenuItem, Object.assign({}, props, { item: item, index: index }), props.getKey(item, index)))) }) })] });
+    return (props.menuWrapper
+        ? props.menuWrapper(menu)
+        : menu);
+};
+const OverflowMenuItem = (props) => {
+    const isVisible = useIsOverflowItemVisible(props.getKey(props.item, props.index));
+    if (isVisible) {
+        return null;
+    }
+    return (_jsx(MenuItem, { children: props.renderItem(props.item, props.index, true) }, props.getKey(props.item, props.index)));
+};
+export const KWIZOverflow = (props) => {
+    let content = [];
+    let addMenu = () => {
+        if (menuIndex >= 0)
+            content.splice(menuIndex, 0, _jsx(OverflowMenu, Object.assign({}, props), "overflow_menu"));
+        else
+            content.push(_jsx(OverflowMenu, Object.assign({}, props), "overflow_menu"));
+    };
+    let menuIndex = -1;
+    props.items.forEach((item, index) => {
+        //add the menu before the first item with priority
+        let priority = props.getPriority ? props.getPriority(item, index) : undefined;
+        if (isNumber(priority) && priority > 0)
+            menuIndex = index;
+        content.push(_jsx(OverflowItem, { id: props.getKey(item, index), priority: priority, children: props.renderItem(item, index) }, props.getKey(item, index)));
+    });
+    addMenu();
+    return (_jsx(Overflow, { minimumVisible: 2, padding: 60, children: _jsx("div", { style: { overflow: "hidden" }, className: props.className, children: props.groupWrapper
+                ? props.groupWrapper(content)
+                : content }) }, `overflow_${props.items.length}`));
+};
+//# sourceMappingURL=kwizoverflow.js.map

package/dist/controls/kwizoverflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kwizoverflow.js","sourceRoot":"","sources":["../../src/controls/kwizoverflow.tsx"],"names":[],"mappings":"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"}

package/dist/controls/list.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface iListItem {
+    key: string | number;
+    media?: JSX.Element | string;
+    header: string;
+    headerMedia?: JSX.Element | string;
+    content?: string | JSX.Element | (string | JSX.Element)[];
+    onClickOnMedia?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    selected?: boolean;
+}
+interface IProps {
+    selectable?: boolean;
+    items: iListItem[];
+    showAllHeaderMedia?: boolean;
+    /** allow multiline content */
+    multiline?: boolean;
+    dark?: boolean;
+}
+export declare const ListEx: (props: IProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/controls/list.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles, tokens } from '@fluentui/react-components';
+import { LOGO_BLUE_SQUARE, LOGO_WHITE_SQUARE, isNullOrUndefined, isString } from '@kwiz/common';
+import { KnownClassNames, mixins } from '../styles/styles';
+import { Horizontal } from './horizontal';
+import { Section } from './section';
+import { Vertical } from './vertical';
+const useStyles = makeStyles({
+    list: {
+        rowGap: 0
+    },
+    listItem: {
+        padding: tokens.spacingVerticalS,
+        ':hover': {
+            backgroundColor: tokens.colorNeutralBackground1Hover
+        }
+    },
+    listItemSelected: {
+        backgroundColor: tokens.colorNeutralBackground1Selected
+    },
+    media: {
+        width: '32px',
+        fontSize: tokens.fontSizeBase600,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center'
+    },
+    image: {
+        width: tokens.lineHeightBase600,
+        height: tokens.lineHeightBase600,
+        backgroundPosition: 'center center',
+        backgroundSize: 'cover',
+        borderRadius: tokens.borderRadiusCircular,
+        border: `1px solid ${tokens.colorNeutralStroke1}`
+    },
+    listItemBody: {
+        rowGap: 0,
+        width: 'calc(100% - 44px)'
+    },
+    listItemHeader: mixins.ellipsis,
+    listItemContent: Object.assign(Object.assign({}, mixins.ellipsis), { fontSize: tokens.fontSizeBase200 }),
+    listItemMedia: Object.assign(Object.assign({}, mixins.ellipsis), { maxWidth: '20%', '& svg': {
+            height: tokens.fontSizeBase300
+        }, '& button': {
+            padding: 0,
+            minWidth: 0,
+            minHeight: 0,
+            height: '14px'
+        } }),
+    listItemMediaNoTrim: {
+        overflow: 'visible',
+        maxWidth: 'fit-content'
+    },
+    listItemMultilineContent: {
+        whiteSpace: 'pre-line'
+    }
+});
+export const ListEx = (props) => {
+    const cssNames = useStyles();
+    const listItemElm = (item) => _jsxs(Horizontal, { css: [cssNames.listItem, item.selected && cssNames.listItemSelected], onClick: item.onClick, children: [item.media && _jsx(Section, { css: [cssNames.media], onClick: (e) => {
+                    if (!item.onClickOnMedia)
+                        e.stopPropagation(); //media may have its on onclick
+                }, children: isString(item.media)
+                    ? _jsx("div", { className: cssNames.image, style: { backgroundImage: `url('${encodeURI(item.media)}'), url('${props.dark ? LOGO_WHITE_SQUARE : LOGO_BLUE_SQUARE}')` } })
+                    : item.media }), _jsxs(Vertical, { main: true, css: [cssNames.listItemBody], children: [_jsxs(Horizontal, { main: true, children: [_jsx(Section, { main: true, css: [cssNames.listItemHeader], children: item.header }), item.headerMedia && _jsx(Section, { onClick: (e) => {
+                                    e.stopPropagation(); //media may have its on onclick
+                                }, css: [cssNames.listItemMedia, props.showAllHeaderMedia && cssNames.listItemMediaNoTrim], children: item.headerMedia })] }), !isNullOrUndefined(item.content)
+                        ? (Array.isArray(item.content) ? item.content : [item.content]).map((c, idx) => isNullOrUndefined(c) ? undefined : _jsx(Section, { css: [cssNames.listItemContent, props.multiline ? cssNames.listItemMultilineContent : undefined], children: c }, idx))
+                        : undefined] })] }, item.key);
+    return (_jsx(Vertical, { css: [cssNames.list, KnownClassNames.list], children: props.items.map(item => listItemElm(item)) }));
+};
+//# sourceMappingURL=list.js.map

package/dist/controls/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sourceRoot":"","sources":["../../src/controls/list.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEhG,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,IAAI,EAAE;QACF,MAAM,EAAE,CAAC;KACZ;IACD,QAAQ,EAAE;QACN,OAAO,EAAE,MAAM,CAAC,gBAAgB;QAChC,QAAQ,EAAE;YACN,eAAe,EAAE,MAAM,CAAC,4BAA4B;SACvD;KACJ;IACD,gBAAgB,EAAE;QACd,eAAe,EAAE,MAAM,CAAC,+BAA+B;KAC1D;IACD,KAAK,EAAE;QACH,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,MAAM,CAAC,eAAe;QAChC,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,cAAc,EAAE,QAAQ;KAC3B;IACD,KAAK,EAAE;QACH,KAAK,EAAE,MAAM,CAAC,iBAAiB;QAC/B,MAAM,EAAE,MAAM,CAAC,iBAAiB;QAChC,kBAAkB,EAAE,eAAe;QACnC,cAAc,EAAE,OAAO;QACvB,YAAY,EAAE,MAAM,CAAC,oBAAoB;QACzC,MAAM,EAAE,aAAa,MAAM,CAAC,mBAAmB,EAAE;KACpD;IACD,YAAY,EAAE;QACV,MAAM,EAAE,CAAC;QACT,KAAK,EAAE,mBAAmB;KAC7B;IACD,cAAc,EAAE,MAAM,CAAC,QAAQ;IAC/B,eAAe,kCACR,MAAM,CAAC,QAAQ,KAClB,QAAQ,EAAE,MAAM,CAAC,eAAe,GACnC;IACD,aAAa,kCACN,MAAM,CAAC,QAAQ,KAClB,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE;YACL,MAAM,EAAE,MAAM,CAAC,eAAe;SACjC,EACD,UAAU,EAAE;YACR,OAAO,EAAE,CAAC;YACV,QAAQ,EAAE,CAAC;YACX,SAAS,EAAE,CAAC;YACZ,MAAM,EAAE,MAAM;SACjB,GACJ;IACD,mBAAmB,EAAE;QACjB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,aAAa;KAC1B;IACD,wBAAwB,EAAE;QACtB,UAAU,EAAE,UAAU;KACzB;CACJ,CAAC,CAAC;AAqBH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAa,EAAE,EAAE;IAEpC,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAE7B,MAAM,WAAW,GAAG,CAAC,IAAe,EAAE,EAAE,CAAC,MAAC,UAAU,IAAgB,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,aAC1J,IAAI,CAAC,KAAK,IAAI,KAAC,OAAO,IAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBAC1D,IAAI,CAAC,IAAI,CAAC,cAAc;wBACpB,CAAC,CAAC,eAAe,EAAE,CAAC,CAAA,+BAA+B;gBAC3D,CAAC,YACO,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;oBAChB,CAAC,CAAC,cAAK,SAAS,EAAE,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,eAAe,EAAE,QAAQ,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,IAAI,EAAE,GAAQ;oBACpK,CAAC,CAAC,IAAI,CAAC,KAAK,GACT,EACf,MAAC,QAAQ,IAAC,IAAI,QAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC,aACvC,MAAC,UAAU,IAAC,IAAI,mBACZ,KAAC,OAAO,IAAC,IAAI,QAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,YAAG,IAAI,CAAC,MAAM,GAAW,EACpE,IAAI,CAAC,WAAW,IAAI,KAAC,OAAO,IAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oCACzC,CAAC,CAAC,eAAe,EAAE,CAAC,CAAA,+BAA+B;gCACvD,CAAC,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,EAAE,KAAK,CAAC,kBAAkB,IAAI,QAAQ,CAAC,mBAAmB,CAAC,YAAG,IAAI,CAAC,WAAW,GAAW,IAC/G,EACZ,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC;wBAC7B,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,OAAO,IAAW,GAAG,EAAE,CAAC,QAAQ,CAAC,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,wBAAwB,CAAC,CAAC,CAAC,SAAS,CAAC,YAAG,CAAC,IAAzG,GAAG,CAAiH,CAAC;wBACtP,CAAC,CAAC,SAAS,IACR,KAnB2C,IAAI,CAAC,GAAG,CAoBrD,CAAC;IAEd,OAAO,CACH,KAAC,QAAQ,IAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,eAAe,CAAC,IAAI,CAAC,YAC/C,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,GACpC,CACd,CAAC;AACN,CAAC,CAAA"}

package/dist/controls/loading.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+interface IProps {
+}
+export declare const Loading: React.FunctionComponent<IProps>;
+export {};

package/dist/controls/loading.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LOGO_ANIM_SMALL } from '@kwiz/common';
+import { Centered } from './centered';
+export const Loading = (props) => {
+    return (_jsx(Centered, { children: _jsx("img", { src: LOGO_ANIM_SMALL, alt: "loading", style: { width: '15vw' } }) }));
+};
+//# sourceMappingURL=loading.js.map

package/dist/controls/loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading.js","sourceRoot":"","sources":["../../src/controls/loading.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAKtC,MAAM,CAAC,MAAM,OAAO,GAAoC,CAAC,KAAK,EAAE,EAAE;IAC9D,OAAO,CACH,KAAC,QAAQ,cAAC,cAAK,GAAG,EAAE,eAAe,EAAE,GAAG,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAI,GAAW,CAC7F,CAAC;AACN,CAAC,CAAA"}

package/dist/controls/please-wait.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { IPrompterProps } from './prompt';
+interface IProps {
+    step?: number;
+    max?: number;
+    /** do not wrap in a dialog */
+    contentOnly?: boolean;
+    cancelText?: string;
+    onCancel?: () => void;
+    label?: string;
+}
+export declare const PleaseWait: React.FunctionComponent<React.PropsWithChildren<IProps>>;
+export declare const PleaseWaitPrompt: (props: {
+    message: string;
+    step?: number;
+    max?: number;
+}) => IPrompterProps;
+export {};

package/dist/controls/please-wait.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Field, ProgressBar } from '@fluentui/react-components';
+import { isFunction } from '@kwiz/common';
+import { Prompter } from './prompt';
+export const PleaseWait = (props) => {
+    const field = _jsx(Field, { validationMessage: props.label || "please wait...", validationState: "none", children: _jsx(ProgressBar, { value: props.step, max: props.max }) });
+    return (props.contentOnly
+        ? field
+        : _jsx(Prompter, { hideOk: true, hideCancel: !isFunction(props.onCancel), cancelButtonText: props.cancelText || 'cancel', onCancel: props.onCancel, children: field }));
+};
+export const PleaseWaitPrompt = (props) => ({
+    //title: 'please wait...',
+    hideOk: true, hideCancel: true,
+    children: _jsx(Field, { validationMessage: props.message, validationState: "none", children: _jsx(ProgressBar, { value: props.step, max: props.max }) })
+});
+//# sourceMappingURL=please-wait.js.map

package/dist/controls/please-wait.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"please-wait.js","sourceRoot":"","sources":["../../src/controls/please-wait.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAkB,QAAQ,EAAE,MAAM,UAAU,CAAC;AAUpD,MAAM,CAAC,MAAM,UAAU,GAA6D,CAAC,KAAK,EAAE,EAAE;IAC1F,MAAM,KAAK,GAAG,KAAC,KAAK,IAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,gBAAgB,EAAE,eAAe,EAAC,MAAM,YAC3F,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,GAAI,GAC9C,CAAC;IACT,OAAO,CAAC,KAAK,CAAC,WAAW;QACrB,CAAC,CAAC,KAAK;QACP,CAAC,CAAC,KAAC,QAAQ,IAAC,MAAM,QACd,UAAU,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,EACvC,gBAAgB,EAAE,KAAK,CAAC,UAAU,IAAI,QAAQ,EAC9C,QAAQ,EAAE,KAAK,CAAC,QAAQ,YAAG,KAAK,GAAY,CACnD,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAwD,EAAkB,EAAE,CAAC,CAAC;IAC3G,0BAA0B;IAC1B,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI;IAC9B,QAAQ,EAAE,KAAC,KAAK,IAAC,iBAAiB,EAAE,KAAK,CAAC,OAAO,EAAE,eAAe,EAAC,MAAM,YACrE,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,GAAI,GAC9C;CACX,CAAC,CAAC"}

package/dist/controls/prompt.d.ts

@@ -0,0 +1,32 @@
+import { DialogModalType } from '@fluentui/react-components';
+import React from 'react';
+import { ButtonEXProps } from './button';
+export interface IPrompterProps {
+    hideOk?: boolean;
+    hideCancel?: boolean;
+    showCancelInTitle?: boolean;
+    /** return false to prevent closing the dialog. */
+    onOK?: () => Promise<void> | void;
+    onCancel?: () => void;
+    okButtonText?: string;
+    cancelButtonText?: string;
+    title?: string | JSX.Element;
+    okButtonProps?: Partial<ButtonEXProps>;
+    cancelButtonProps?: Partial<ButtonEXProps>;
+    children?: JSX.Element;
+    /** allow to epand the dialog to be wider */
+    maxWidth?: number | string;
+    /** additional button actions at the bottom */
+    actions?: JSX.Element[];
+    /** dialog title actions */
+    titleActions?: JSX.Element[];
+    /** specify a specific mount node for this dialog */
+    mountNode?: HTMLElement | null | {
+        element?: HTMLElement | null;
+        className?: string;
+    };
+    modalType?: DialogModalType;
+    /** do not fire ok/cancel on esc/enter press */
+    disableKeyboardActions?: boolean;
+}
+export declare const Prompter: React.ForwardRefExoticComponent<IPrompterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/controls/prompt.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogActions, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger } from '@fluentui/react-components';
+import { DismissRegular } from '@fluentui/react-icons';
+import { isNotEmptyArray, isNullOrEmptyString } from '@kwiz/common';
+import React from 'react';
+import { useKWIZFluentContext } from '../helpers/context';
+import { useKeyDown } from '../helpers/hooks';
+import { ButtonEX, ButtonEXSecondary } from './button';
+export const Prompter = React.forwardRef((props, ref) => {
+    const ctx = useKWIZFluentContext();
+    const disableKeyboardActions = React.useRef(props.disableKeyboardActions);
+    disableKeyboardActions.current = props.disableKeyboardActions;
+    let okProps = Object.assign(Object.assign({}, (props.okButtonProps || {})), { onClick: () => props.onOK(), title: props.okButtonText || 'yes' });
+    let cancelProps = Object.assign(Object.assign({}, (props.cancelButtonProps || {})), { onClick: () => props.onCancel(), title: props.cancelButtonText || 'no' });
+    useKeyDown({
+        onEnter: () => !disableKeyboardActions.current && props.onOK(),
+        onEscape: () => !disableKeyboardActions.current && props.onCancel(),
+    });
+    const actions = [];
+    if (!props.hideOk)
+        actions.push(_jsx(DialogTrigger, { disableButtonEnhancement: true, children: _jsx(ButtonEXSecondary, Object.assign({}, okProps)) }, 'ok'));
+    if (!props.hideCancel)
+        actions.push(_jsx(DialogTrigger, { disableButtonEnhancement: true, children: _jsx(ButtonEXSecondary, Object.assign({}, cancelProps)) }, 'cancel'));
+    if (isNotEmptyArray(props.actions))
+        actions.push(...props.actions);
+    const titleActions = props.titleActions ? [...props.titleActions] : [];
+    if (props.showCancelInTitle)
+        titleActions.push(_jsx(DialogTrigger, { disableButtonEnhancement: true, children: _jsx(ButtonEX, Object.assign({}, cancelProps, { icon: _jsx(DismissRegular, {}) })) }, 'cancel'));
+    return (_jsx(Dialog, { open: true, modalType: props.modalType, children: _jsx(DialogSurface, { mountNode: props.mountNode || ctx.mountNode, style: !isNullOrEmptyString(props.maxWidth) ? { maxWidth: props.maxWidth } : undefined, children: _jsxs(DialogBody, { children: [(!isNullOrEmptyString(props.title) || isNotEmptyArray(titleActions)) && _jsx(DialogTitle, { action: titleActions, children: props.title }), _jsx(DialogContent, { ref: ref, children: props.children }), isNotEmptyArray(actions) && _jsx(DialogActions, { fluid: actions.length > 2, children: actions })] }) }) }));
+});
+//# sourceMappingURL=prompt.js.map

package/dist/controls/prompt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prompt.js","sourceRoot":"","sources":["../../src/controls/prompt.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAmB,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC1J,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAiB,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAkCtE,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAmC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACtF,MAAM,GAAG,GAAG,oBAAoB,EAAE,CAAC;IACnC,MAAM,sBAAsB,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,sBAAsB,CAAC,CAAC;IAC1E,sBAAsB,CAAC,OAAO,GAAG,KAAK,CAAC,sBAAsB,CAAC;IAE9D,IAAI,OAAO,mCACJ,CAAC,KAAK,CAAC,aAAoB,IAAI,EAAE,CAAC,KACrC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,EAC3B,KAAK,EAAE,KAAK,CAAC,YAAY,IAAI,KAAK,GACrC,CAAC;IACF,IAAI,WAAW,mCACR,CAAC,KAAK,CAAC,iBAAwB,IAAI,EAAE,CAAC,KACzC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,EAC/B,KAAK,EAAE,KAAK,CAAC,gBAAgB,IAAI,IAAI,GACxC,CAAC;IAEF,UAAU,CAAC;QACP,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,sBAAsB,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,EAAE;QAC9D,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,sBAAsB,CAAC,OAAO,IAAI,KAAK,CAAC,QAAQ,EAAE;KACtE,CAAC,CAAC;IAEH,MAAM,OAAO,GAAkB,EAAE,CAAC;IAClC,IAAI,CAAC,KAAK,CAAC,MAAM;QAAE,OAAO,CAAC,IAAI,CAAC,KAAC,aAAa,IAAU,wBAAwB,kBAC5E,KAAC,iBAAiB,oBAAK,OAAO,EAAI,IADa,IAAI,CAEvC,CAAC,CAAC;IAClB,IAAI,CAAC,KAAK,CAAC,UAAU;QAAE,OAAO,CAAC,IAAI,CAAC,KAAC,aAAa,IAAc,wBAAwB,kBACpF,KAAC,iBAAiB,oBAAK,WAAW,EAAI,IADa,QAAQ,CAE/C,CAAC,CAAC;IAClB,IAAI,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC;QAC9B,OAAO,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,YAAY,GAAkB,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACtF,IAAI,KAAK,CAAC,iBAAiB;QACvB,YAAY,CAAC,IAAI,CAAC,KAAC,aAAa,IAAc,wBAAwB,kBAClE,KAAC,QAAQ,oBAAK,WAAW,IAAE,IAAI,EAAE,KAAC,cAAc,KAAG,IAAI,IADtB,QAAQ,CAE7B,CAAC,CAAC;IAGtB,OAAO,CACH,KAAC,MAAM,IAAC,IAAI,QAAC,SAAS,EAAE,KAAK,CAAC,SAAS,YACnC,KAAC,aAAa,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,GAAG,CAAC,SAAS,EACtD,KAAK,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,YACtF,MAAC,UAAU,eACN,CAAC,CAAC,mBAAmB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,eAAe,CAAC,YAAY,CAAC,CAAC,IAAI,KAAC,WAAW,IACjF,MAAM,EAAE,YAAY,YACtB,KAAK,CAAC,KAAK,GAAe,EAC5B,KAAC,aAAa,IAAC,GAAG,EAAE,GAAG,YAClB,KAAK,CAAC,QAAQ,GACH,EACf,eAAe,CAAC,OAAO,CAAC,IAAI,KAAC,aAAa,IAAC,KAAK,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,YAChE,OAAO,GACI,IACP,GACD,GACX,CACZ,CAAC;AACN,CAAC,CAAC,CAAC"}

package/dist/controls/search.d.ts

@@ -0,0 +1,13 @@
+import { InputProps } from '@fluentui/react-components';
+import React from 'react';
+interface IProps extends InputProps {
+    main?: boolean;
+    delay?: number;
+    /** if changing the value in the caller - change this prop to reset */
+    resetValue?: string;
+    onChangeDeferred?: (newValue: string) => void;
+    onChangeSync?: (newValue: string) => void;
+}
+/** value is set on first load. to change the value after it was first set - change the compoenet's key. */
+export declare const Search: React.FunctionComponent<React.PropsWithChildren<IProps>>;
+export {};

package/dist/controls/search.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input, makeStyles } from '@fluentui/react-components';
+import { DismissRegular, SearchRegular } from "@fluentui/react-icons";
+import { debounce, isFunction, isNullOrEmptyString } from '@kwiz/common';
+import React, { useState } from 'react';
+import { GetLogger } from '../_modules/config';
+import { useStateEX } from '../helpers/hooks';
+import { mixins } from '../styles/styles';
+const logger = GetLogger("Search");
+const useStyles = makeStyles({
+    main: mixins.main,
+    clickable: mixins.clickable,
+});
+/** value is set on first load. to change the value after it was first set - change the compoenet's key. */
+export const Search = (props) => {
+    const cssNames = useStyles();
+    const [resetKey, setResetKey] = useState(1);
+    let delay = props.delay || 1;
+    //cannot call debounce every render, since it won't be the same debounced instance...
+    var notifyParent = React.useMemo(() => debounce(v => {
+        logger.log(`Set: ${v}`);
+        props.onChangeDeferred(v);
+    }, delay * 1000), [delay]);
+    let [value, setValue] = useStateEX(props.value, {
+        onChange: newValue => {
+            if (isFunction(props.onChangeSync))
+                props.onChangeSync(newValue);
+            if (isFunction(props.onChangeDeferred))
+                notifyParent(newValue);
+            return newValue;
+        }
+    });
+    //once props change, reset this control value to match
+    React.useEffect(() => {
+        setValue(props.resetValue);
+        //todo: bug: setting value does not sync into the text box
+        setResetKey(resetKey + 1);
+    }, [props.resetValue]);
+    return (_jsx(Input, Object.assign({}, props, { value: value, onChange: (e, data) => setValue(data.value), className: props.main ? cssNames.main : undefined, contentBefore: !isNullOrEmptyString(value) ? undefined : _jsx(SearchRegular, {}), contentAfter: isNullOrEmptyString(value)
+            ? undefined
+            : _jsx(DismissRegular, { className: cssNames.clickable, onClick: () => {
+                    setValue("");
+                    //todo: bug: setting value does not sync into the text box
+                    setResetKey(resetKey + 1);
+                } }) }), resetKey));
+};
+//# sourceMappingURL=search.js.map

package/dist/controls/search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.js","sourceRoot":"","sources":["../../src/controls/search.tsx"],"names":[],"mappings":"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"}

package/dist/controls/section.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface ISectionProps {
+    main?: boolean;
+    css?: string[];
+    style?: React.CSSProperties;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    rootProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    title?: string;
+    left?: boolean;
+    right?: boolean;
+}
+export declare const Section: React.ForwardRefExoticComponent<ISectionProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/controls/section.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles, mergeClasses, tokens } from '@fluentui/react-components';
+import { isFunction, isNotEmptyArray } from '@kwiz/common';
+import React from 'react';
+import { KnownClassNames, mixins } from '../styles/styles';
+const useStyles = makeStyles({
+    main: mixins.main,
+    clickable: mixins.clickable,
+    left: Object.assign(Object.assign({}, mixins.float), { float: "left", marginRight: tokens.spacingHorizontalXXL }),
+    right: Object.assign(Object.assign({}, mixins.float), { float: "right", marginRight: tokens.spacingHorizontalXXL })
+});
+export const Section = React.forwardRef((props, ref) => {
+    const cssNames = useStyles();
+    let css = [KnownClassNames.section];
+    if (props.main)
+        css.push(cssNames.main);
+    if (isFunction(props.onClick))
+        css.push(cssNames.clickable);
+    if (props.left)
+        css.push(cssNames.left);
+    else if (props.right)
+        css.push(cssNames.right);
+    if (isNotEmptyArray(props.css))
+        css.push(...props.css);
+    return (_jsx("div", Object.assign({ ref: ref }, (props.rootProps || {}), { title: props.title, style: props.style, className: mergeClasses(...css), onClick: props.onClick, children: props.children })));
+});
+//# sourceMappingURL=section.js.map

package/dist/controls/section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section.js","sourceRoot":"","sources":["../../src/controls/section.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE3D,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,SAAS,EAAE,MAAM,CAAC,SAAS;IAC3B,IAAI,kCACG,MAAM,CAAC,KAAK,KACf,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,CAAC,oBAAoB,GAC3C;IACD,KAAK,kCACE,MAAM,CAAC,KAAK,KACf,KAAK,EAAE,OAAO,EACd,WAAW,EAAE,MAAM,CAAC,oBAAoB,GAC3C;CACJ,CAAC,CAAC;AAcH,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAyD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC3G,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,IAAI,GAAG,GAAa,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;IAC9C,IAAI,KAAK,CAAC,IAAI;QAAE,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IACxC,IAAI,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC;QACzB,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IAEjC,IAAI,KAAK,CAAC,IAAI;QAAE,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;SACnC,IAAI,KAAK,CAAC,KAAK;QAAE,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE/C,IAAI,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC;QAAE,GAAG,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvD,OAAO,CACH,4BAAK,GAAG,EAAE,GAAG,IAAM,CAAC,KAAK,CAAC,SAAS,IAAI,EAAE,CAAC,IAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAC9E,SAAS,EAAE,YAAY,CAAC,GAAG,GAAG,CAAC,EAC/B,OAAO,EAAE,KAAK,CAAC,OAAO,YACrB,KAAK,CAAC,QAAQ,IACb,CACT,CAAC;AACN,CAAC,CAAC,CAAC"}

package/dist/controls/svg.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+interface IProps {
+    size: number;
+}
+export declare const YouTubeIcon: React.FunctionComponent<React.PropsWithChildren<IProps>>;
+export declare const MermaidIcon: React.FunctionComponent<React.PropsWithChildren<IProps>>;
+export declare const TeamsIcon: React.FunctionComponent<React.PropsWithChildren<IProps>>;
+export declare const SVGLinkIcon: (props: {
+    size: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SVGSplitIcon: (props: {
+    size: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const HubSpotIcon: (props: {
+    size: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const GetSVGLinkIcon: (props: {
+    size: number;
+}) => string;
+export declare const GetSVGSplitIcon: (props: {
+    size: number;
+}) => string;
+export {};

package/dist/controls/svg.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tokens } from '@fluentui/react-components';
+export const YouTubeIcon = (props) => {
+    return (_jsx("svg", { height: `${props.size}px`, width: `${props.size}px`, version: "1.1", id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: "0 0 461.001 461.001", xmlSpace: "preserve", children: _jsx("g", { children: _jsx("path", { style: { fill: "#F61C0D" }, d: "M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728\nc0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137\nC461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607\nc0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z" }) }) }));
+};
+export const MermaidIcon = (props) => {
+    return (_jsxs("svg", { height: `${props.size}px`, width: `${props.size}px`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 490.16 490.16", children: [_jsx("defs", { children: _jsx("style", { children: `.mm-cls-1{fill:#ff3670;}.mm-cls-2{fill:#fff;}` }) }), _jsx("rect", { className: "mm-cls-1", width: "490.16", height: "490.16", rx: "84.61" }), _jsx("path", { className: "mm-cls-2", d: "M407.48,111.18A165.2,165.2,0,0,0,245.08,220,165.2,165.2,0,0,0,82.68,111.18a165.5,165.5,0,0,0,72.06,143.64,88.81,88.81,0,0,1,38.53,73.45v50.86H296.9V328.27a88.8,88.8,0,0,1,38.52-73.45,165.41,165.41,0,0,0,72.06-143.64Z" }), _jsx("path", { className: "mm-cls-2", d: "M160.63,328.27a56.09,56.09,0,0,0-24.27-46.49,198.74,198.74,0,0,1-28.54-23.66A196.87,196.87,0,0,1,82.53,227V379.13h78.1Z" }), _jsx("path", { className: "mm-cls-2", d: "M329.53,328.27a56.09,56.09,0,0,1,24.27-46.49,198.74,198.74,0,0,0,28.54-23.66A196.87,196.87,0,0,0,407.63,227V379.13h-78.1Z" })] }));
+};
+export const TeamsIcon = (props) => {
+    return (_jsxs("svg", { height: `${props.size}px`, width: `${props.size}px`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 2228.833 2073.333", children: [_jsx("path", { fill: "#5059C9", d: "M1554.637,777.5h575.713c54.391,0,98.483,44.092,98.483,98.483c0,0,0,0,0,0v524.398 c0,199.901-162.051,361.952-361.952,361.952h0h-1.711c-199.901,0.028-361.975-162-362.004-361.901c0-0.017,0-0.034,0-0.052V828.971 C1503.167,800.544,1526.211,777.5,1554.637,777.5L1554.637,777.5z" }), _jsx("circle", { fill: "#5059C9", cx: "1943.75", cy: "440.583", r: "233.25" }), _jsx("circle", { fill: "#7B83EB", cx: "1218.083", cy: "336.917", r: "336.917" }), _jsx("path", { fill: "#7B83EB", d: "M1667.323,777.5H717.01c-53.743,1.33-96.257,45.931-95.01,99.676v598.105 c-7.505,322.519,247.657,590.16,570.167,598.053c322.51-7.893,577.671-275.534,570.167-598.053V877.176 C1763.579,823.431,1721.066,778.83,1667.323,777.5z" }), _jsx("path", { opacity: ".1", d: "M1244,777.5v838.145c-0.258,38.435-23.549,72.964-59.09,87.598 c-11.316,4.787-23.478,7.254-35.765,7.257H667.613c-6.738-17.105-12.958-34.21-18.142-51.833 c-18.144-59.477-27.402-121.307-27.472-183.49V877.02c-1.246-53.659,41.198-98.19,94.855-99.52H1244z" }), _jsx("path", { opacity: ".2", d: "M1192.167,777.5v889.978c-0.002,12.287-2.47,24.449-7.257,35.765 c-14.634,35.541-49.163,58.833-87.598,59.09H691.975c-8.812-17.105-17.105-34.21-24.362-51.833 c-7.257-17.623-12.958-34.21-18.142-51.833c-18.144-59.476-27.402-121.307-27.472-183.49V877.02 c-1.246-53.659,41.198-98.19,94.855-99.52H1192.167z" }), _jsx("path", { opacity: ".2", d: "M1192.167,777.5v786.312c-0.395,52.223-42.632,94.46-94.855,94.855h-447.84 c-18.144-59.476-27.402-121.307-27.472-183.49V877.02c-1.246-53.659,41.198-98.19,94.855-99.52H1192.167z" }), _jsx("path", { opacity: ".2", d: "M1140.333,777.5v786.312c-0.395,52.223-42.632,94.46-94.855,94.855H649.472 c-18.144-59.476-27.402-121.307-27.472-183.49V877.02c-1.246-53.659,41.198-98.19,94.855-99.52H1140.333z" }), _jsx("path", { opacity: ".1", d: "M1244,509.522v163.275c-8.812,0.518-17.105,1.037-25.917,1.037 c-8.812,0-17.105-0.518-25.917-1.037c-17.496-1.161-34.848-3.937-51.833-8.293c-104.963-24.857-191.679-98.469-233.25-198.003 c-7.153-16.715-12.706-34.071-16.587-51.833h258.648C1201.449,414.866,1243.801,457.217,1244,509.522z" }), _jsx("path", { opacity: ".2", d: "M1192.167,561.355v111.442c-17.496-1.161-34.848-3.937-51.833-8.293 c-104.963-24.857-191.679-98.469-233.25-198.003h190.228C1149.616,466.699,1191.968,509.051,1192.167,561.355z" }), _jsx("path", { opacity: ".2", d: "M1192.167,561.355v111.442c-17.496-1.161-34.848-3.937-51.833-8.293 c-104.963-24.857-191.679-98.469-233.25-198.003h190.228C1149.616,466.699,1191.968,509.051,1192.167,561.355z" }), _jsx("path", { opacity: ".2", d: "M1140.333,561.355v103.148c-104.963-24.857-191.679-98.469-233.25-198.003 h138.395C1097.783,466.699,1140.134,509.051,1140.333,561.355z" }), _jsxs("linearGradient", { id: "a", gradientUnits: "userSpaceOnUse", x1: "198.099", y1: "1683.0726", x2: "942.2344", y2: "394.2607", gradientTransform: "matrix(1 0 0 -1 0 2075.3333)", children: [_jsx("stop", { offset: "0", stopColor: "#5a62c3" }), _jsx("stop", { offset: ".5", stopColor: "#4d55bd" }), _jsx("stop", { offset: "1", stopColor: "#3940ab" })] }), _jsx("path", { fill: "url(#a)", d: "M95.01,466.5h950.312c52.473,0,95.01,42.538,95.01,95.01v950.312c0,52.473-42.538,95.01-95.01,95.01 H95.01c-52.473,0-95.01-42.538-95.01-95.01V561.51C0,509.038,42.538,466.5,95.01,466.5z" }), _jsx("path", { fill: "#FFF", d: "M820.211,828.193H630.241v517.297H509.211V828.193H320.123V727.844h500.088V828.193z" })] }));
+};
+export const SVGLinkIcon = (props) => {
+    return (_jsx("svg", { fill: tokens.colorNeutralForeground1, height: `${props.size}px`, width: `${props.size}px`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 490.16 490.16", children: _jsx("g", { children: _jsxs("g", { children: [_jsx("path", { d: "M409.657,32.474c-43.146-43.146-113.832-43.146-156.978,0l-84.763,84.762c29.07-8.262,60.589-6.12,88.129,6.732\n\t\t\tl44.063-44.064c17.136-17.136,44.982-17.136,62.118,0c17.136,17.136,17.136,44.982,0,62.118l-55.386,55.386l-36.414,36.414\n\t\t\tc-17.136,17.136-44.982,17.136-62.119,0l-47.43,47.43c11.016,11.017,23.868,19.278,37.332,24.48\n\t\t\tc36.415,14.382,78.643,8.874,110.467-16.219c3.06-2.447,6.426-5.201,9.18-8.262l57.222-57.222l34.578-34.578\n\t\t\tC453.109,146.306,453.109,75.926,409.657,32.474z" }), _jsx("path", { d: "M184.135,320.114l-42.228,42.228c-17.136,17.137-44.982,17.137-62.118,0c-17.136-17.136-17.136-44.981,0-62.118\n\t\t\tl91.8-91.799c17.136-17.136,44.982-17.136,62.119,0l47.43-47.43c-11.016-11.016-23.868-19.278-37.332-24.48\n\t\t\tc-38.25-15.3-83.232-8.262-115.362,20.502c-1.53,1.224-3.06,2.754-4.284,3.978l-91.8,91.799\n\t\t\tc-43.146,43.146-43.146,113.832,0,156.979c43.146,43.146,113.832,43.146,156.978,0l82.927-83.845\n\t\t\tC230.035,335.719,220.243,334.496,184.135,320.114z" })] }) }) }));
+};
+export const SVGSplitIcon = (props) => {
+    return _jsx("svg", { fill: tokens.colorNeutralForeground1, height: `${props.size}px`, width: `${props.size}px`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 17 17", children: _jsx("path", { d: "M10.646 13.146l0.707 0.707-2.853 2.854-2.854-2.854 0.707-0.707 1.647 1.647v-3.772h1v3.772l1.646-1.647zM8 2.207v3.772h1v-3.772l1.646 1.646 0.707-0.707-2.853-2.853-2.854 2.853 0.707 0.707 1.647-1.646zM0 8v1h17v-1h-17z" }) });
+};
+export const HubSpotIcon = (props) => {
+    return _jsx("svg", { fill: tokens.colorNeutralForeground1, height: `${props.size}px`, width: `${props.size}px`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: _jsx("path", { d: "M267.4 211.6c-25.1 23.7-40.8 57.3-40.8 94.6 0 29.3 9.7 56.3 26 78L203.1 434c-4.4-1.6-9.1-2.5-14-2.5-10.8 0-20.9 4.2-28.5 11.8-7.6 7.6-11.8 17.8-11.8 28.6s4.2 20.9 11.8 28.5c7.6 7.6 17.8 11.6 28.5 11.6 10.8 0 20.9-3.9 28.6-11.6 7.6-7.6 11.8-17.8 11.8-28.5 0-4.2-.6-8.2-1.9-12.1l50-50.2c22 16.9 49.4 26.9 79.3 26.9 71.9 0 130-58.3 130-130.2 0-65.2-47.7-119.2-110.2-128.7V116c17.5-7.4 28.2-23.8 28.2-42.9 0-26.1-20.9-47.9-47-47.9S311.2 47 311.2 73.1c0 19.1 10.7 35.5 28.2 42.9v61.2c-15.2 2.1-29.6 6.7-42.7 13.6-27.6-20.9-117.5-85.7-168.9-124.8 1.2-4.4 2-9 2-13.8C129.8 23.4 106.3 0 77.4 0 48.6 0 25.2 23.4 25.2 52.2c0 28.9 23.4 52.3 52.2 52.3 9.8 0 18.9-2.9 26.8-7.6l163.2 114.7zm89.5 163.6c-38.1 0-69-30.9-69-69s30.9-69 69-69 69 30.9 69 69-30.9 69-69 69z" }) });
+};
+//get icons as html
+export const GetSVGLinkIcon = (props) => {
+    return (`<svg fill="${tokens.colorNeutralForeground1}" height="${props.size}px" width="${props.size}px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490.16 490.16">
+            <g>
+                <g>
+                    <path d="M409.657,32.474c-43.146-43.146-113.832-43.146-156.978,0l-84.763,84.762c29.07-8.262,60.589-6.12,88.129,6.732
+			l44.063-44.064c17.136-17.136,44.982-17.136,62.118,0c17.136,17.136,17.136,44.982,0,62.118l-55.386,55.386l-36.414,36.414
+			c-17.136,17.136-44.982,17.136-62.119,0l-47.43,47.43c11.016,11.017,23.868,19.278,37.332,24.48
+			c36.415,14.382,78.643,8.874,110.467-16.219c3.06-2.447,6.426-5.201,9.18-8.262l57.222-57.222l34.578-34.578
+			C453.109,146.306,453.109,75.926,409.657,32.474z"/>
+                    <path d="M184.135,320.114l-42.228,42.228c-17.136,17.137-44.982,17.137-62.118,0c-17.136-17.136-17.136-44.981,0-62.118
+			l91.8-91.799c17.136-17.136,44.982-17.136,62.119,0l47.43-47.43c-11.016-11.016-23.868-19.278-37.332-24.48
+			c-38.25-15.3-83.232-8.262-115.362,20.502c-1.53,1.224-3.06,2.754-4.284,3.978l-91.8,91.799
+			c-43.146,43.146-43.146,113.832,0,156.979c43.146,43.146,113.832,43.146,156.978,0l82.927-83.845
+			C230.035,335.719,220.243,334.496,184.135,320.114z"/>
+                </g>
+            </g>
+        </svg>`);
+};
+export const GetSVGSplitIcon = (props) => {
+    return `<svg fill="${tokens.colorNeutralForeground1}" height="${props.size}px" width="${props.size}px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17">
+	<path d="M10.646 13.146l0.707 0.707-2.853 2.854-2.854-2.854 0.707-0.707 1.647 1.647v-3.772h1v3.772l1.646-1.647zM8 2.207v3.772h1v-3.772l1.646 1.646 0.707-0.707-2.853-2.853-2.854 2.853 0.707 0.707 1.647-1.646zM0 8v1h17v-1h-17z" />
+</svg>`;
+};
+//# sourceMappingURL=svg.js.map

package/dist/controls/svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg.js","sourceRoot":"","sources":["../../src/controls/svg.tsx"],"names":[],"mappings":"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"}

package/dist/controls/toolbar.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface IProps {
+    /** toolbar buttons that may render or render in overflow */
+    buttonGroups: {
+        elm: JSX.Element;
+        overflowElement?: JSX.Element;
+    }[][];
+    /** side buttons that will always render, never overflow */
+    sideButtons?: JSX.Element;
+}
+export declare const ToolbarEX: React.FunctionComponent<IProps>;
+export {};