@kwiz/fluentui 1.0.78 → 1.0.80

package/src/controls/list.tsx

@@ -1,120 +0,0 @@
-import { makeStyles, tokens } from '@fluentui/react-components';
-import { LOGO_BLUE_SQUARE, LOGO_WHITE_SQUARE, isNullOrUndefined, isString } from '@kwiz/common';
-import React from 'react';
-import { useKWIZFluentContext } from '../helpers/context-internal';
-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: {
-        ...mixins.ellipsis,
-        fontSize: tokens.fontSizeBase200
-    },
-    listItemMedia: {
-        ...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 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 const ListEx = (props: IProps) => {
-    const ctx = useKWIZFluentContext();
-    const cssNames = useStyles();
-    const isDark = ctx.dark === true || props.dark === true;
-
-    const listItemElm = (item: iListItem) => <Horizontal key={item.key} css={[cssNames.listItem, item.selected && cssNames.listItemSelected]} onClick={item.onClick}>
-        {item.media && <Section css={[cssNames.media]} onClick={(e) => {
-            if (!item.onClickOnMedia)
-                e.stopPropagation();//media may have its on onclick
-        }}>{
-                isString(item.media)
-                    ? <div className={cssNames.image} style={{ backgroundImage: `url('${encodeURI(item.media)}'), url('${isDark ? LOGO_WHITE_SQUARE : LOGO_BLUE_SQUARE}')` }}></div>
-                    : item.media
-            }</Section>}
-        <Vertical main css={[cssNames.listItemBody]}>
-            <Horizontal main>
-                <Section main css={[cssNames.listItemHeader]}>{item.header}</Section>
-                {item.headerMedia && <Section onClick={(e) => {
-                    e.stopPropagation();//media may have its on onclick
-                }} css={[cssNames.listItemMedia, props.showAllHeaderMedia && cssNames.listItemMediaNoTrim]}>{item.headerMedia}</Section>}
-            </Horizontal>
-            {!isNullOrUndefined(item.content)
-                ? (Array.isArray(item.content) ? item.content : [item.content]).map((c, idx) => isNullOrUndefined(c) ? undefined : <Section key={idx} css={[cssNames.listItemContent, props.multiline ? cssNames.listItemMultilineContent : undefined]}>{c}</Section>)
-                : undefined}
-        </Vertical>
-    </Horizontal>;
-
-    return (
-        <Vertical css={[cssNames.list, KnownClassNames.list]}>
-            {props.items.map(item => listItemElm(item))}
-        </Vertical>
-    );
-}

package/src/controls/loading.tsx

@@ -1,11 +0,0 @@
-import { LOGO_ANIM_SMALL } from '@kwiz/common';
-import { Centered } from './centered';
-import React from 'react';
-
-interface IProps {
-}
-export const Loading: React.FunctionComponent<IProps> = (props) => {
-    return (
-        <Centered><img src={LOGO_ANIM_SMALL} alt="loading" style={{ width: '15vw' }} /></Centered>
-    );
-}

package/src/controls/menu.tsx

@@ -1,196 +0,0 @@
-import { Menu, MenuDivider, MenuGroup, MenuGroupHeader, MenuItem, MenuList, MenuListProps, MenuPopover, menuPopoverClassNames, MenuPopoverProps, MenuProps, MenuTrigger } from '@fluentui/react-components';
-import { IDictionary, isNotEmptyArray, isNotEmptyString, isNullOrEmptyString, isNullOrUndefined, isNumber, isString, isUndefined, jsonClone, stopEvent } from '@kwiz/common';
-import React from 'react';
-import { useClickableDiv, useStateEX } from '../helpers';
-import { useKWIZFluentContext } from '../helpers/context-internal';
-import { ButtonEX, ButtonEXProps } from './button';
-import { DividerEX } from './divider';
-import { Horizontal } from './horizontal';
-import { Search } from './search';
-
-interface iMenuItemEXItem {
-    type?: "item";
-    title: string;
-    onClick: () => void;
-    disabled?: boolean;
-    icon?: JSX.Element;
-    items?: iMenuItemEX[];
-    checked?: boolean;
-}
-interface iMenuItemEXSeparator {
-    type: "separator";
-}
-interface iMenuItemEXGroup {
-    type: "group";
-    title: string;
-    //can't nest groups
-    items: (iMenuItemEX & { type?: "separator" | "item" })[];
-}
-export type iMenuItemEX = iMenuItemEXItem | iMenuItemEXSeparator | iMenuItemEXGroup;
-
-interface IProps {
-    menuProps?: MenuProps;
-    menuPopOverProps?: MenuPopoverProps;
-    menuListProps?: MenuListProps;
-    trigger: JSX.Element | string | ButtonEXProps;
-    items: iMenuItemEX[];
-    /** default 8 null/false to disable */
-    filterThreshold?: number | false;
-    /** default 8, null/false to disable */
-    pageSize?: number | false;
-}
-export const MenuEx: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    const ctx = useKWIZFluentContext();
-    const [startIndexPerLevel, setStartIndexPerLevel] = useStateEX<IDictionary<number>>({});
-    const [filterPerLevel, setFilterPerLevel] = useStateEX<IDictionary<string>>({});
-    let pageSize: number = isUndefined(props.pageSize) ? 8 : isNumber(props.pageSize) ? props.pageSize : 99999999999;
-    let filterThreshold: number = isUndefined(props.filterThreshold) ? 8 : isNumber(props.filterThreshold) ? props.filterThreshold : 99999999999;
-
-    //when hovering over sub menu the parent would close - have menu trigger keep open on the parent level
-    const [keepOpen, setKeepOpen] = useStateEX<IDictionary<boolean>>({});
-    const [opened, setOpened] = useStateEX<IDictionary<boolean>>({});
-
-    const clickableDiv = useClickableDiv();
-
-    React.useEffect(() => {
-        window.setTimeout(() => {
-            var menus = document.querySelectorAll(`.${menuPopoverClassNames.root}`);
-            menus.forEach((menu: HTMLDivElement) => {
-                var rect = menu.getBoundingClientRect();
-                if (rect.bottom > document.documentElement.clientHeight) {
-                    menu.style.overflow = "auto";
-                    menu.style.height = `${rect.height - (rect.bottom - document.documentElement.clientHeight)}px`;
-                }
-            });
-        }, 100);
-    }, [opened]);
-
-    function renderItems(items: iMenuItemEX[], level: number) {
-        const myLevelFilter = filterPerLevel[level];
-
-        const showItem = (i: iMenuItemEX) => {
-            //get rid of empty/null items
-            let show = !isNullOrUndefined(i) && (isNotEmptyString(i.type) || isNotEmptyString((i as iMenuItemEXItem).title));
-            if (show && isNotEmptyString(myLevelFilter)) {
-                if (i.type === "separator") show = false;
-                else if (i.type === "group") {
-                    //only show group if 1 or more results are in it
-                    return i.items.filter(sub => showItem(sub)).length > 0;
-                }
-                else
-                    show = i.title.toLowerCase().indexOf(myLevelFilter) >= 0;
-            }
-            return show;
-        }
-
-        //inject group items into this level - so we share the filter/next functionality. it looks wierd if filter/paging is done per group if they are displayed inline.
-        items = items.map(i => i.type === "group" && isNotEmptyArray(i.items) ? [i, ...i.items] : i)
-            .flat()
-            //filter empty item or based on text filter
-            .filter(i => showItem(i));
-
-        let menuItems = items.map((item, index) => {
-            switch (item.type) {
-                case "group":
-                    //todo: technically group items should be nested inside the group for better screen reder support
-                    return <MenuGroup key={index}>
-                        <MenuGroupHeader>{item.title}</MenuGroupHeader>
-                    </MenuGroup>;
-                case "separator":
-                    return <MenuDivider key={index} />;
-                case "item":
-                default:
-                    const openKey = `${level}|${index}`;
-                    const menuItem = <MenuItem key={index} icon={item.icon}
-                        disabled={item.disabled}
-                        onClick={item.onClick}
-                    >{item.title}</MenuItem>;
-                    return isNotEmptyArray(item.items)
-                        ? <Menu key={index} mountNode={ctx.mountNode} open={opened[openKey] || false} onOpenChange={(e, data) => {
-                            if (data.open) {
-                                setOpened({ ...opened, [openKey]: true });
-                                setKeepOpen({ ...keepOpen, [level]: true });
-                            }
-                            else if (!keepOpen[openKey]) {
-                                setOpened({ ...opened, [openKey]: false });
-                                setKeepOpen({ ...keepOpen, [level]: false });
-                            }
-                        }}>
-                            <MenuTrigger disableButtonEnhancement>
-                                {menuItem}
-                            </MenuTrigger>
-                            <MenuPopover>
-                                <MenuList>
-                                    {renderItems(item.items, level + 1)}
-                                </MenuList>
-                            </MenuPopover>
-                        </Menu>
-                        : menuItem;
-            }
-        });
-
-        const paged = menuItems.length > pageSize;
-        const filtered = menuItems.length > filterThreshold || !isNullOrEmptyString(myLevelFilter);
-
-        if (paged) {
-            let start = startIndexPerLevel[level];
-            if (isNullOrUndefined(start)) start = 0;
-            let hasMore = menuItems.length > start + pageSize;
-            menuItems = menuItems.slice(start, start + pageSize);
-            if (start > 0) {
-                menuItems.splice(0, 0, <DividerEX key="$prev" title='Previous'
-                    {...clickableDiv}
-                    onClick={() => {
-                        const s = jsonClone(startIndexPerLevel);
-                        s[level] = start - pageSize;
-                        setStartIndexPerLevel(s);
-                    }}
-                >previous</DividerEX>);
-            }
-            if (hasMore)
-                menuItems.push(<DividerEX key="$next" title='Next'
-                    {...clickableDiv}
-                    onClick={() => {
-                        const s = jsonClone(startIndexPerLevel);
-                        s[level] = start + pageSize;
-                        setStartIndexPerLevel(s);
-                    }}
-                >next</DividerEX>);
-        }
-        if (filtered) {
-            //just filter - no paging
-            menuItems.splice(0, 0, <Horizontal key='$search'>
-                <Search defaultValue={myLevelFilter || ""} onChangeDeferred={(newValue) => {
-                    const s = jsonClone(filterPerLevel);
-                    s[level] = newValue ? newValue.toLowerCase() : "";
-                    setFilterPerLevel(s);
-                }} />
-            </Horizontal>);
-        }
-        return menuItems;
-    }
-
-    return (
-        <Menu mountNode={ctx.mountNode} {...props.menuProps} open={opened[0] || false} onOpenChange={(e, data) => {
-            if (data.open) setOpened({ ...opened, 0: true });
-            else if (!keepOpen[0]) setOpened({ ...opened, 0: false });
-        }}>
-            <MenuTrigger disableButtonEnhancement>
-                {isString(props.trigger)
-                    ? <ButtonEX title={props.trigger} onClick={(e) => {
-                        stopEvent(e);
-                    }} />
-                    : isString((props.trigger as ButtonEXProps).title)
-                        ? <ButtonEX {...(props.trigger as ButtonEXProps)} onClick={(e) => {
-                            stopEvent(e);
-                        }} />
-                        : props.trigger as JSX.Element}
-            </MenuTrigger>
-            <MenuPopover {...props.menuPopOverProps}>
-                <MenuList {...props.menuListProps}>
-                    {renderItems(props.items, 0)}
-                </MenuList>
-            </MenuPopover>
-        </Menu>
-    );
-}

package/src/controls/merge-text.tsx

@@ -1,126 +0,0 @@
-import { Drawer, DrawerBody, DrawerHeader, DrawerHeaderTitle, Field, Label, makeStyles, Radio, tokens } from '@fluentui/react-components';
-import { DismissRegular, SaveRegular } from '@fluentui/react-icons';
-import { isNullOrUndefined, waitFor } from '@kwiz/common';
-import { DefaultDarkColors, DefaultLightColors, MisMerge2 } from '@mismerge/react';
-import * as React from 'react';
-
-import '@mismerge/core/dark.css';
-import '@mismerge/core/styles.css';
-import { useStateEX, useWindowSize } from '../helpers';
-import { useKWIZFluentContext } from '../helpers/context-internal';
-import { ButtonEX, ButtonEXPrimarySubtle } from './button';
-import { Horizontal } from './horizontal';
-import { Section } from './section';
-import { Vertical } from './vertical';
-
-const useStyles = makeStyles({
-    root: {
-        // position: 'fixed',
-        // top: 0,
-        // left: 0,
-        // right: 0,
-        // bottom: 0,
-        // backgroundColor: tokens.colorNeutralBackground1,
-        // zIndex: 10,
-        "& .mismerge": {
-            // height: "100%",
-            "--background": tokens.colorNeutralBackground1,
-            //line number background
-            "--primary-100": tokens.colorNeutralBackground2,
-            //selection background
-            "--selection": tokens.colorNeutralBackground1Selected,
-            //scrollbar hover
-            "--primary-300": tokens.colorNeutralBackground1Hover,
-            //border / scroll
-            "--primary-200": tokens.colorNeutralStroke1,
-            //line number color
-            "--primary-400": tokens.colorNeutralForeground2,
-            //button hover color
-            "--primary-500": tokens.colorNeutralForeground1Hover,
-            //main text color
-            "--primary-600": tokens.colorNeutralForeground1,
-            "& TEXTAREA": {
-                lineHeight: "20px"
-            }
-        }
-    },
-    menu: {
-        justifyContent: "space-between"
-    }
-});
-
-interface IProps {
-    title: string;
-    description?: string;
-    lhsTitle: string;
-    lhsValue: string;
-    rhsTitle: string;
-    rhsValue: string;
-    dark?: boolean;
-    save: (merged: string) => void;
-    cancel: () => void;
-}
-export const MergeText: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    const classes = useStyles();
-    const ctx = useKWIZFluentContext();
-
-    let size = useWindowSize();
-    let wrapper = React.useRef<HTMLDivElement>();
-    let [lhs, setLhs] = useStateEX(props.lhsValue || "", {
-        skipUpdateIfSame: true, onChange: (v, changed) => {
-            if (changed) setKeep("left"); return v;
-        }
-    });
-    let [rhs, setRhs] = useStateEX(props.rhsValue || "", {
-        skipUpdateIfSame: true, onChange: (v, changed) => {
-            if (changed) setKeep("right"); return v;
-        }
-    });
-    let [keep, setKeep] = useStateEX<"cancel" | "left" | "right">("cancel");
-
-    React.useEffect(() => {
-        if (wrapper.current) {
-            waitFor(() => !isNullOrUndefined(wrapper.current.querySelector(".mismerge"))).then(() => {
-                let mismerge = wrapper.current.querySelector(".mismerge") as HTMLDivElement;
-                if (mismerge)
-                    mismerge.style.height = `${mismerge.offsetParent.clientHeight - mismerge.offsetTop - 10}px`;
-            });
-        }
-    }, [wrapper.current, size.height]);
-
-    return <Drawer type='overlay' open size='full' className={classes.root} mountNode={ctx.mountNode}>
-        <DrawerHeader>
-            <DrawerHeaderTitle action={<ButtonEX icon={<DismissRegular />} title="Close" onClick={props.cancel} />}>
-                {props.title}
-            </DrawerHeaderTitle>
-        </DrawerHeader>
-        <DrawerBody>
-            <Vertical>
-                {props.description && <Label>{props.description}</Label>}
-                <Field label="Which version would you like to keep?"
-                    hint="Merge the changes to either side and save. Close this panel to keep editing the page without saving">
-                    <Horizontal css={[classes.menu]}>
-                        <Horizontal nogap>
-                            <Radio value="left" label={props.lhsTitle} checked={keep === "left"} onClick={() => setKeep("left")} />
-                            <ButtonEXPrimarySubtle showTitleWithIcon dontCenterText icon={<SaveRegular />} disabled={keep !== "left"} title={`Save ${props.lhsTitle.toLowerCase()}`} onClick={() => props.save(lhs)} />
-                        </Horizontal>
-                        <Horizontal nogap>
-                            <Radio value="right" label={props.rhsTitle} checked={keep === "right"} onClick={() => setKeep("right")} />
-                            <ButtonEXPrimarySubtle showTitleWithIcon dontCenterText icon={<SaveRegular />} disabled={keep !== "right"} title={`Save ${props.rhsTitle.toLowerCase()}`} onClick={() => props.save(rhs)} />
-                        </Horizontal>
-                    </Horizontal>
-                </Field>
-                <Section main ref={wrapper}>
-                    <MisMerge2
-                        lhs={lhs}
-                        rhs={rhs}
-                        lhsEditable rhsEditable
-                        onLhsChange={v => setLhs(v)}
-                        onRhsChange={v => setRhs(v)}
-                        colors={props.dark ? DefaultDarkColors : DefaultLightColors}
-                    />
-                </Section>
-            </Vertical>
-        </DrawerBody>
-    </Drawer>;
-}

package/src/controls/please-wait.tsx

@@ -1,33 +0,0 @@
-import { Field, ProgressBar } from '@fluentui/react-components';
-import { isFunction } from '@kwiz/common';
-import React from 'react';
-import { IPrompterProps, Prompter } from './prompt';
-
-interface IProps {
-    step?: number; max?: number;
-    /** do not wrap in a dialog */
-    contentOnly?: boolean;
-    cancelText?: string;
-    onCancel?: () => void;
-    label?: string;
-}
-export const PleaseWait: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    const field = <Field validationMessage={props.label || "please wait..."} validationState="none">
-        <ProgressBar value={props.step} max={props.max} />
-    </Field>;
-    return (props.contentOnly
-        ? field
-        : <Prompter hideOk
-            hideCancel={!isFunction(props.onCancel)}
-            cancelButtonText={props.cancelText || 'cancel'}
-            onCancel={props.onCancel}>{field}</Prompter>
-    );
-}
-
-export const PleaseWaitPrompt = (props: { message: string; step?: number; max?: number; }): IPrompterProps => ({
-    //title: 'please wait...',
-    hideOk: true, hideCancel: true,
-    children: <Field validationMessage={props.message} validationState="none">
-        <ProgressBar value={props.step} max={props.max} />
-    </Field>
-});

package/src/controls/progress-bar.tsx

@@ -1,110 +0,0 @@
-import { DividerProps, makeStyles, mergeClasses, ProgressBar, tokens } from '@fluentui/react-components';
-import { CheckmarkRegular, FluentIcon } from '@fluentui/react-icons';
-import { isFunction, isNotEmptyString } from '@kwiz/common';
-import React from 'react';
-import { KnownClassNames } from '../styles/styles';
-import { Horizontal } from './horizontal';
-import { Section } from './section';
-import { Vertical } from './vertical';
-
-const useStyles = makeStyles({
-    root: {
-        position: "relative"
-    },
-    stepNumber: {
-        border: `2px solid ${tokens.colorNeutralStroke1}`,
-        borderRadius: tokens.borderRadiusCircular,
-        width: '24px',
-        height: '24px',
-        position: 'relative',
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: tokens.colorNeutralBackground1,
-    },
-    stepLabel: {
-        backgroundColor: tokens.colorNeutralBackground1,
-        position: "absolute",
-        top: '-10px',
-        left: 0,
-        right: 0,
-        "& > span": {
-            whiteSpace: "nowrap",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            display: "inline-block"
-        }
-    },
-    stepNumberCurrent: {
-        border: `2px solid ${tokens.colorBrandBackground}`,
-    },
-    stepNumberCompleted: {
-        border: `2px solid ${tokens.colorBrandBackground}`,
-        backgroundColor: tokens.colorBrandBackground,
-        color: tokens.colorNeutralBackground1,
-    },
-    stepNumberClickable: {
-        cursor: "pointer"
-    },
-    stepTitle: {
-        fontSize: tokens.fontSizeBase400,
-        lineHeight: tokens.lineHeightBase400,
-    },
-    progressBar: {
-        position: "absolute",
-        top: "14px"
-    },
-    stepSpacer: {
-        position: "relative"
-    }
-});
-interface IProps extends DividerProps {
-    steps: number;
-    step: number;
-    stepLabel?: string;
-    css?: string[];
-    /** optional, send an icon instead of the step number */
-    stepIcons?: FluentIcon[];
-    onStepClick?: (step: number) => void;
-}
-export const ProgressBarEX = React.forwardRef<HTMLDivElement, (React.PropsWithChildren<IProps>)>((props, ref) => {
-    const classes = useStyles();
-
-    let stepLabels: JSX.Element[] = [];
-    for (let i = 0; i < props.steps; i++) {
-        const stepClasses = [classes.stepNumber];
-        let addLabel = false;
-        let canClick = false;
-        if (props.step === i) {
-            stepClasses.push(classes.stepNumberCurrent);
-            if (isNotEmptyString(props.stepLabel))
-                addLabel = true;
-        }
-        else if (props.step > i) {
-            stepClasses.push(classes.stepNumberCompleted);
-            canClick = isFunction(props.onStepClick);
-            if (canClick)
-                stepClasses.push(classes.stepNumberClickable);
-        }
-        let StepIcon = props.stepIcons?.[i];
-        stepLabels.push(<Section key={`step${i}`} css={stepClasses} onClick={canClick ? () => props.onStepClick(i) : undefined}>{StepIcon ? <StepIcon /> : `${i + 1}`}</Section>);
-        stepLabels.push(<Section main key={`step${i}Spacer`} css={[classes.stepSpacer]}>
-            {addLabel && <Horizontal key="label" hCentered css={[classes.stepLabel, KnownClassNames.progressBarStepLabel]}>
-                <span>{props.stepLabel}</span>
-            </Horizontal>}
-        </Section>);
-
-    }
-
-    let StepIcon = props.stepIcons?.[props.steps];
-    //add last submit step
-    stepLabels.push(<span key='stepSubmit' className={mergeClasses(classes.stepNumber, props.step === props.steps && classes.stepNumberCompleted)}>{StepIcon ? <StepIcon /> : <CheckmarkRegular />}</span>);
-
-    return (
-        <Vertical css={[classes.root, ...(props.css || [])]}>
-            {/* progress bar first so labels will cover it without the need for zindex */}
-            <ProgressBar className={classes.progressBar} value={(props.step * 2) + 1} max={props.steps * 2} />
-            <Horizontal css={[classes.stepTitle]}>{...stepLabels}</Horizontal>
-        </Vertical >
-    );
-});