@hitachivantara/uikit-react-pentaho 0.1.1

package/README.md

@@ -0,0 +1,11 @@
+# @hitachivantara/uikit-react-pentaho
+
+UI Kit Pentaho+ React components.
+
+## Installation
+
+Install the package in your project directory with:
+
+```sh
+npm install @hitachivantara/uikit-react-pentaho
+```

package/dist/cjs/Canvas/FloatingPanel/FloatingPanel.cjs

@@ -0,0 +1,162 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const reactResizeDetector = require("react-resize-detector");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const FloatingPanel_styles = require("./FloatingPanel.styles.cjs");
+const Tabs = require("../Tabs/Tabs.cjs");
+const Tab = require("../Tab/Tab.cjs");
+const HvCanvasFloatingPanel = react.forwardRef((props, ref) => {
+  const {
+    id: idProp,
+    className,
+    children,
+    open,
+    tabs,
+    minimize,
+    leftActions,
+    rightActions,
+    tab: tabProp,
+    classes: classesProp,
+    onTabChange,
+    onAction,
+    ...others
+  } = uikitReactCore.useDefaultProps("HvCanvasFloatingPanel", props);
+  const { classes, cx } = FloatingPanel_styles.useClasses(classesProp);
+  const id = uikitReactCore.useUniqueId(idProp);
+  const { width: tabWidth = 0, ref: tabRef } = reactResizeDetector.useResizeDetector({
+    handleHeight: false
+  });
+  const { width: panelWidth = 0, ref: panelRef } = reactResizeDetector.useResizeDetector({
+    handleHeight: false
+  });
+  const { width: leftActionWidth = 32, ref: leftActionRef } = reactResizeDetector.useResizeDetector(
+    {
+      handleHeight: false,
+      refreshMode: "debounce",
+      refreshOptions: {
+        trailing: true
+      }
+    }
+  );
+  const { width: rightActionWidth = 32, ref: rightActionRef } = reactResizeDetector.useResizeDetector({
+    handleHeight: false,
+    refreshMode: "debounce",
+    refreshOptions: {
+      trailing: true
+    }
+  });
+  const overflowing = react.useMemo(() => {
+    const scrollWidth = tabRef.current?.scrollWidth ?? 0;
+    return scrollWidth - tabWidth >= 1;
+  }, [tabRef, tabWidth]);
+  const [selectedTab, setSelectedTab] = uikitReactCore.useControlled(
+    tabProp,
+    tabs[0].id
+  );
+  const handleTabChange = (event, tabId) => {
+    setSelectedTab(tabId);
+    onTabChange?.(event, tabId);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      id,
+      ref,
+      className: cx(
+        classes.root,
+        {
+          [classes.closed]: !open,
+          [classes.minimized]: minimize,
+          [classes.multipleTabs]: tabs.length > 1,
+          [classes.overflowing]: overflowing
+        },
+        className
+      ),
+      ...others,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.tabsRoot, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Tabs.HvCanvasTabs,
+            {
+              style: {
+                // @ts-ignore
+                "--left-actions-width": `${leftActionWidth}px`,
+                "--right-actions-width": `${rightActionWidth}px`
+              },
+              onChange: handleTabChange,
+              value: selectedTab,
+              children: tabs.map((tab, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                Tab.HvCanvasTab,
+                {
+                  ref: index === 0 ? tabRef : void 0,
+                  id: `${id}-${tab.id}`,
+                  value: tab.id,
+                  className: classes.tab,
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.tabTitle, children: tab.title })
+                },
+                tab.id
+              ))
+            }
+          ),
+          (leftActions || rightActions) && !overflowing ? tabs.map((tab, index) => {
+            const btnsDisabled = selectedTab !== tab.id && !minimize;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  // @ts-ignore
+                  "--tab-width": `${tabWidth}px`,
+                  "--right": `calc((${index} + 1) * var(--tab-width))`,
+                  "--left": `calc(${index} * var(--tab-width))`
+                },
+                children: [
+                  leftActions && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: leftActionRef, className: classes.leftActions, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    uikitReactCore.HvActionsGeneric,
+                    {
+                      maxVisibleActions: 1,
+                      actions: leftActions,
+                      disabled: btnsDisabled,
+                      onAction: (event, action) => onAction?.(event, action, tab.id),
+                      variant: "secondaryGhost",
+                      iconOnly: true
+                    }
+                  ) }),
+                  rightActions && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: rightActionRef, className: classes.rightActions, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    uikitReactCore.HvActionsGeneric,
+                    {
+                      maxVisibleActions: 2,
+                      actions: rightActions,
+                      disabled: btnsDisabled,
+                      onAction: (event, action) => onAction?.(event, action, tab.id),
+                      variant: "secondaryGhost",
+                      iconOnly: true
+                    }
+                  ) })
+                ]
+              },
+              tab.id
+            );
+          }) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          uikitReactCore.HvPanel,
+          {
+            ref: panelRef,
+            role: "tabpanel",
+            "aria-labelledby": `${id}-${selectedTab}`,
+            className: classes.content,
+            style: {
+              // @ts-ignore
+              "--right-border-radius": tabWidth * tabs.length >= panelWidth ? "0px" : "16px"
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+});
+exports.floatingPanelClasses = FloatingPanel_styles.staticClasses;
+exports.HvCanvasFloatingPanel = HvCanvasFloatingPanel;

package/dist/cjs/Canvas/FloatingPanel/FloatingPanel.styles.cjs

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const { staticClasses, useClasses } = uikitReactCore.createClasses(
+  "HvCanvasFloatingPanel",
+  {
+    root: {
+      position: "absolute",
+      display: "flex",
+      flexDirection: "column",
+      right: 0,
+      bottom: 0,
+      width: "100%",
+      maxHeight: "500px",
+      visibility: "visible",
+      transition: "visibility 0.3s ease, max-height 0.3s ease, width 0.3s ease"
+    },
+    closed: {
+      maxHeight: 0,
+      visibility: "hidden"
+    },
+    minimized: {
+      "& $content": {
+        display: "none"
+      },
+      "& $tab": {
+        backgroundColor: uikitReactCore.theme.colors.atmo1,
+        ...uikitReactCore.theme.typography.label
+      }
+    },
+    multipleTabs: {
+      "& $tab": { maxWidth: "288px" },
+      "& $rightActions": {
+        right: `calc(100% - var(--right) + ${uikitReactCore.theme.space.xs})`
+      }
+    },
+    overflowing: {
+      "& $tabTitle": {
+        paddingLeft: uikitReactCore.theme.space.sm,
+        paddingRight: uikitReactCore.theme.space.sm
+      }
+    },
+    tab: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      width: "100%"
+    },
+    tabTitle: {
+      display: "flex",
+      width: "100%",
+      padding: uikitReactCore.theme.space.sm,
+      paddingLeft: `calc(var(--left-actions-width) + ${uikitReactCore.theme.space.xs})`,
+      paddingRight: `calc(var(--right-actions-width) + ${uikitReactCore.theme.space.xs})`
+    },
+    tabsRoot: {
+      position: "relative"
+    },
+    leftActions: {
+      position: "absolute",
+      left: `calc(var(--left) + ${uikitReactCore.theme.space.xs})`,
+      top: 8
+    },
+    rightActions: {
+      position: "absolute",
+      right: uikitReactCore.theme.space.xs,
+      top: 8
+    },
+    content: { borderTopRightRadius: "var(--right-border-radius)" }
+  }
+);
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/Canvas/Panel/Panel.cjs

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const Panel_styles = require("./Panel.styles.cjs");
+const Tabs = require("../Tabs/Tabs.cjs");
+const Tab = require("../Tab/Tab.cjs");
+const DEFAULT_LABELS = {
+  open: "Open",
+  close: "Close"
+};
+const HvCanvasPanel = react.forwardRef(
+  (props, ref) => {
+    const {
+      id: idProp,
+      tab: tabProp,
+      open: openProp,
+      defaultOpen = false,
+      tabs,
+      onToggle,
+      onTabChange,
+      labels: labelsProp,
+      className,
+      children,
+      classes: classesProp,
+      ...others
+    } = uikitReactCore.useDefaultProps("HvCanvasPanel", props);
+    const id = uikitReactCore.useUniqueId(idProp);
+    const { classes, cx } = Panel_styles.useClasses(classesProp);
+    const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
+    const [open, setOpen] = uikitReactCore.useControlled(openProp, Boolean(defaultOpen));
+    const [selectedTab, setSelectedTab] = uikitReactCore.useControlled(
+      tabProp,
+      tabs?.[0]?.id ?? "none"
+    );
+    const handleTogglePanel = (event) => {
+      setOpen((prev) => !prev);
+      onToggle?.(event, !open);
+    };
+    const handleTabChange = (event, tabId) => {
+      setSelectedTab(tabId);
+      onTabChange?.(event, tabId);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          id,
+          className: cx(classes.root, className, {
+            [classes.open]: open,
+            [classes.close]: !open
+          }),
+          ...others,
+          children: [
+            tabs && /* @__PURE__ */ jsxRuntime.jsx(
+              Tabs.HvCanvasTabs,
+              {
+                className: classes.tabs,
+                value: selectedTab,
+                onChange: handleTabChange,
+                children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+                  Tab.HvCanvasTab,
+                  {
+                    id: `${id}-${tab.id}`,
+                    value: tab.id,
+                    tabIndex: 0,
+                    children: tab.content
+                  },
+                  tab.id
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              uikitReactCore.HvPanel,
+              {
+                role: tabs ? "tabpanel" : void 0,
+                "aria-labelledby": tabs ? `${id}-${selectedTab}` : void 0,
+                className: classes.content,
+                children
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cx(classes.handle, {
+            [classes.handleOpen]: open,
+            [classes.handleClose]: !open
+          }),
+          onClick: handleTogglePanel,
+          role: "button",
+          tabIndex: 0,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              handleTogglePanel(e);
+            }
+          },
+          "aria-label": open ? labels.close : labels.open,
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.handleButton, children: open ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Start, { color: ["primary"] }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.End, { color: ["primary"] }) })
+        }
+      )
+    ] });
+  }
+);
+exports.canvasPanelClasses = Panel_styles.staticClasses;
+exports.HvCanvasPanel = HvCanvasPanel;

package/dist/cjs/Canvas/Panel/Panel.styles.cjs

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasPanel", {
+  root: {
+    height: "100%",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    boxShadow: "4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)",
+    backgroundColor: "transparent",
+    transition: "visibility 0.3s ease, width 0.3s ease",
+    overflow: "hidden",
+    "&$open": {
+      width: 320,
+      visibility: "visible"
+    },
+    "&$close": {
+      width: 0,
+      visibility: "hidden"
+    }
+  },
+  tabs: {},
+  content: {
+    height: "100%"
+  },
+  handle: {
+    height: "172px",
+    width: "35px",
+    display: "flex",
+    justifyContent: "center",
+    boxShadow: "4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)",
+    backgroundColor: uikitReactCore.theme.colors.atmo1,
+    borderRadius: "0px 16px 16px 0px",
+    position: "absolute",
+    transition: "left 0.3s ease",
+    top: "calc(50% - 86px)",
+    "&$handleOpen": {
+      left: 320
+    },
+    "&$handleClose": {
+      left: 0
+    },
+    "&:hover": {
+      cursor: "pointer"
+    },
+    "&:focus-visible": {
+      ...uikitReactCore.outlineStyles
+    }
+  },
+  handleButton: {
+    top: "calc(50% - 16px)",
+    position: "absolute"
+  },
+  open: {},
+  close: {},
+  handleOpen: {},
+  handleClose: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/Canvas/Tab/Tab.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const Tab = require("@mui/base/Tab");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const Tab_styles = require("./Tab.styles.cjs");
+const HvCanvasTab = react.forwardRef(
+  (props, ref) => {
+    const {
+      classes: classesProp,
+      className,
+      ...others
+    } = uikitReactCore.useDefaultProps("HvCanvasTab", props);
+    const { classes, cx } = Tab_styles.useClasses(classesProp);
+    return /* @__PURE__ */ jsxRuntime.jsx(Tab.Tab, { ref, className: cx(classes.root, className), ...others });
+  }
+);
+exports.canvasTabClasses = Tab_styles.staticClasses;
+exports.HvCanvasTab = HvCanvasTab;

package/dist/cjs/Canvas/Tab/Tab.styles.cjs

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Tab = require("@mui/base/Tab");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasTab", {
+  root: {
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+    borderRadius: "16px 16px 0 0",
+    backgroundColor: uikitReactCore.theme.colors.atmo2,
+    color: uikitReactCore.theme.colors.secondary_60,
+    overflow: "hidden",
+    width: "100%",
+    boxShadow: "0px -2px 8px 0px #4141410F",
+    paddingInlineEnd: 0,
+    paddingInlineStart: 0,
+    "& svg .color0": {
+      fill: "currentcolor"
+    },
+    "&:hover": {
+      cursor: "pointer"
+    },
+    "&:focus": {
+      backgroundColor: uikitReactCore.theme.colors.atmo1
+    },
+    [`&.${Tab.tabClasses.selected}`]: {
+      backgroundColor: uikitReactCore.theme.colors.atmo1,
+      ...uikitReactCore.theme.typography.label
+    },
+    "&:focus-visible": {
+      ...uikitReactCore.outlineStyles
+    }
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/Canvas/Tabs/Tabs.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const Tabs = require("@mui/base/Tabs");
+const TabsList = require("@mui/base/TabsList");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const Tabs_styles = require("./Tabs.styles.cjs");
+const HvCanvasTabs = react.forwardRef(
+  (props, ref) => {
+    const {
+      selectionFollowsFocus = true,
+      children,
+      className,
+      classes: classesProp,
+      ...others
+    } = uikitReactCore.useDefaultProps("HvCanvasTabs", props);
+    const { classes, cx } = Tabs_styles.useClasses(classesProp);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Tabs.Tabs,
+      {
+        ref,
+        className: cx(classes.root, className),
+        selectionFollowsFocus,
+        ...others,
+        children: /* @__PURE__ */ jsxRuntime.jsx(TabsList.TabsList, { className: classes.list, children })
+      }
+    );
+  }
+);
+exports.canvasTabsClasses = Tabs_styles.staticClasses;
+exports.HvCanvasTabs = HvCanvasTabs;

package/dist/cjs/Canvas/Tabs/Tabs.styles.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasTabs", {
+  root: {},
+  list: {
+    display: "flex",
+    width: "100%",
+    height: 48
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/Canvas/Toolbar/Toolbar.cjs

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const Toolbar_styles = require("./Toolbar.styles.cjs");
+const DEFAULT_LABELS = {
+  back: "Back"
+};
+const HvCanvasToolbar = react.forwardRef(
+  (props, ref) => {
+    const {
+      title: titleProp,
+      backButton,
+      labels: labelsProp,
+      className,
+      children,
+      backButtonProps,
+      classes: classesProp,
+      ...others
+    } = uikitReactCore.useDefaultProps("HvCanvasToolbar", props);
+    const { classes, cx } = Toolbar_styles.useClasses(classesProp);
+    const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
+    const title = typeof titleProp === "string" ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { variant: "title4", children: titleProp }) : titleProp;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.back, children: backButton ?? /* @__PURE__ */ jsxRuntime.jsx(
+        uikitReactCore.HvIconButton,
+        {
+          title: labels.back,
+          variant: "primaryGhost",
+          ...backButtonProps,
+          children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Previous, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.title, children: title }),
+      children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actions, children })
+    ] });
+  }
+);
+exports.canvasToolbarClasses = Toolbar_styles.staticClasses;
+exports.HvCanvasToolbar = HvCanvasToolbar;

package/dist/cjs/Canvas/Toolbar/Toolbar.styles.cjs

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasToolbar", {
+  root: {
+    width: "100%",
+    height: 54,
+    display: "flex",
+    alignItems: "center",
+    borderRadius: uikitReactCore.theme.radii.full,
+    backgroundColor: uikitReactCore.theme.colors.atmo1,
+    position: "absolute",
+    right: 0,
+    top: 0,
+    transition: "width 0.3s ease"
+  },
+  back: {
+    borderRadius: `${uikitReactCore.theme.radii.full} 0 0 ${uikitReactCore.theme.radii.full}`,
+    minWidth: 68,
+    backgroundColor: uikitReactCore.theme.colors.containerBackgroundHover,
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  title: {
+    display: "flex",
+    alignItems: "center",
+    padding: uikitReactCore.theme.spacing(0, "md"),
+    height: "100%",
+    flexGrow: 1
+  },
+  actions: {
+    display: "flex",
+    flexWrap: "nowrap",
+    overflow: "auto",
+    paddingRight: uikitReactCore.theme.space.md
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/index.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Toolbar_styles = require("./Canvas/Toolbar/Toolbar.styles.cjs");
+const Toolbar = require("./Canvas/Toolbar/Toolbar.cjs");
+const Panel_styles = require("./Canvas/Panel/Panel.styles.cjs");
+const Panel = require("./Canvas/Panel/Panel.cjs");
+const Tabs_styles = require("./Canvas/Tabs/Tabs.styles.cjs");
+const Tabs = require("./Canvas/Tabs/Tabs.cjs");
+const FloatingPanel_styles = require("./Canvas/FloatingPanel/FloatingPanel.styles.cjs");
+const FloatingPanel = require("./Canvas/FloatingPanel/FloatingPanel.cjs");
+const Tab_styles = require("./Canvas/Tab/Tab.styles.cjs");
+const Tab = require("./Canvas/Tab/Tab.cjs");
+exports.canvasToolbarClasses = Toolbar_styles.staticClasses;
+exports.HvCanvasToolbar = Toolbar.HvCanvasToolbar;
+exports.canvasPanelClasses = Panel_styles.staticClasses;
+exports.HvCanvasPanel = Panel.HvCanvasPanel;
+exports.canvasTabsClasses = Tabs_styles.staticClasses;
+exports.HvCanvasTabs = Tabs.HvCanvasTabs;
+exports.floatingPanelClasses = FloatingPanel_styles.staticClasses;
+exports.HvCanvasFloatingPanel = FloatingPanel.HvCanvasFloatingPanel;
+exports.canvasTabClasses = Tab_styles.staticClasses;
+exports.HvCanvasTab = Tab.HvCanvasTab;