@itwin/appui-react 4.8.3 → 4.9.0

package/lib/esm/appui-react/layout/widget/Overflow.scss

@@ -0,0 +1,59 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+.nz-widget-overflow {
+  width: 2em;
+  position: relative;
+
+  &.nz-hidden {
+    display: none;
+  }
+
+  > .nz-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    user-select: none;
+
+    > .nz-icon {
+      background: $buic-background-2;
+      width: 1em;
+      height: 1em;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:after {
+        content: "";
+        display: block;
+        border-color: $buic-foreground-disabled;
+        border-style: solid;
+        border-width: 0.15em 0.15em 0 0;
+        width: 0.5em;
+        height: 0.5em;
+        margin-left: -0.15em;
+        box-sizing: border-box;
+        transform: rotate(45deg);
+      }
+    }
+
+    &:hover {
+      > .nz-icon {
+        &:after {
+          border-color: $buic-foreground-activehover;
+        }
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}

package/lib/esm/appui-react/layout/widget/PanelWidget.d.ts

@@ -0,0 +1,22 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./PanelWidget.scss";
+import * as React from "react";
+import type { WidgetState } from "../state/WidgetState";
+/** @internal */
+export interface PanelWidgetProps {
+    widgetId: WidgetState["id"];
+}
+/** @internal */
+export declare const PanelWidget: React.ForwardRefExoticComponent<PanelWidgetProps & React.RefAttributes<HTMLDivElement>>;
+/** @internal */
+export declare function useMode(widgetId: string): "fit" | "fill" | "minimized";
+/** @internal */
+export declare function useBorders(widgetId: WidgetState["id"]): {
+    "nz-border-top": boolean;
+    "nz-border-bottom": boolean;
+    "nz-border-left": boolean;
+    "nz-border-right": boolean;
+};
+//# sourceMappingURL=PanelWidget.d.ts.map

package/lib/esm/appui-react/layout/widget/PanelWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelWidget.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/PanelWidget.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAgBxD,gBAAgB;AAChB,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;CAC7B;AAED,gBAAgB;AAChB,eAAO,MAAM,WAAW,yFA0CvB,CAAC;AAcF,gBAAgB;AAChB,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,WAAW,CAwBtE;AAED,gBAAgB;AAChB,wBAAgB,UAAU,CAAC,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC;;;;;EAqErD"}

package/lib/esm/appui-react/layout/widget/PanelWidget.js

@@ -0,0 +1,149 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./PanelWidget.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { assert } from "@itwin/core-bentley";
+import { isHorizontalPanelSide, PanelSideContext, } from "../widget-panels/Panel";
+import { WidgetContentContainer } from "./ContentContainer";
+import { WidgetTabBar } from "./TabBar";
+import { Widget, WidgetProvider } from "./Widget";
+import { WidgetOutline } from "../outline/WidgetOutline";
+import { WidgetTarget } from "../target/WidgetTarget";
+import { isHorizontalPanelState } from "../state/PanelState";
+import { useLayout } from "../base/LayoutStore";
+import { getWidgetState } from "../state/internal/WidgetStateHelpers";
+/** @internal */
+export const PanelWidget = React.forwardRef(function PanelWidget({ widgetId }, ref) {
+    const side = React.useContext(PanelSideContext);
+    assert(!!side);
+    const widgetsLength = useLayout((state) => {
+        const panel = state.panels[side];
+        return panel.widgets.length;
+    });
+    const minimized = useLayout((state) => {
+        const widget = getWidgetState(state, widgetId);
+        return widget.minimized;
+    });
+    const horizontal = isHorizontalPanelSide(side);
+    const mode = useMode(widgetId);
+    const borders = useBorders(widgetId);
+    const showTarget = widgetsLength !== 1;
+    const className = classnames("nz-widget-panelWidget", horizontal && "nz-horizontal", `nz-${mode}`, borders);
+    const content = React.useMemo(() => (React.createElement(WidgetContentContainer, null,
+        showTarget && React.createElement(WidgetTarget, null),
+        React.createElement(WidgetOutline, null))), [showTarget]);
+    return (React.createElement(WidgetProvider, { id: widgetId },
+        React.createElement(Widget, { className: className, ref: ref },
+            React.createElement(WidgetTabBar, { separator: isHorizontalPanelSide(side) ? true : !minimized }),
+            content)));
+});
+function findFillWidget(state, side) {
+    const panelWidgets = state.panels[side].widgets;
+    return panelWidgets.find((widgetId) => {
+        const widget = getWidgetState(state, widgetId);
+        if (widget.minimized)
+            return false;
+        const tabId = widget.activeTabId;
+        const tab = state.tabs[tabId];
+        if (!tab.preferredPanelWidgetSize)
+            return true;
+        return false;
+    });
+}
+/** @internal */
+export function useMode(widgetId) {
+    const side = React.useContext(PanelSideContext);
+    assert(!!side);
+    return useLayout((state) => {
+        const fillWidget = findFillWidget(state, side);
+        // Force `fill` for last panel widget that is not minimized.
+        if (!fillWidget) {
+            const panel = state.panels[side];
+            for (let i = panel.widgets.length - 1; i >= 0; i--) {
+                const wId = panel.widgets[i];
+                const w = getWidgetState(state, wId);
+                if (w.minimized)
+                    continue;
+                if (wId === widgetId)
+                    return "fill";
+                break;
+            }
+        }
+        const widget = getWidgetState(state, widgetId);
+        if (widget.minimized)
+            return "minimized";
+        const tabId = widget.activeTabId;
+        const tab = state.tabs[tabId];
+        return tab.preferredPanelWidgetSize ? "fit" : "fill";
+    });
+}
+/** @internal */
+export function useBorders(widgetId) {
+    const side = React.useContext(PanelSideContext);
+    assert(!!side);
+    return useLayout((state) => {
+        const panels = state.panels;
+        const panel = panels[side];
+        const toolSettings = state.toolSettings;
+        const isHorizontal = isHorizontalPanelSide(panel.side);
+        const isVertical = !isHorizontal;
+        const isFirst = panel.widgets[0] === widgetId;
+        const isLast = panel.widgets[panel.widgets.length - 1] === widgetId;
+        const isTopMostPanelBorder = panel.side === "top" ||
+            (isVertical && !panels.top.span) ||
+            (isVertical && panels.top.span && panels.top.collapsed) ||
+            (isVertical && panels.top.widgets.length === 0);
+        let top = true;
+        let bottom = true;
+        let left = true;
+        let right = true;
+        if (panel.side === "bottom") {
+            bottom = false;
+        }
+        if (isVertical && isLast) {
+            bottom = false;
+        }
+        if (isTopMostPanelBorder && (toolSettings === null || toolSettings === void 0 ? void 0 : toolSettings.type) === "docked") {
+            top = false;
+        }
+        if (isVertical && !isFirst) {
+            top = false;
+        }
+        if (isVertical &&
+            panels.top.span &&
+            !panels.top.collapsed &&
+            panels.top.widgets.length > 0) {
+            top = false;
+        }
+        if (isHorizontal && !isFirst) {
+            left = false;
+        }
+        if (isHorizontalPanelState(panel) &&
+            !panel.span &&
+            isFirst &&
+            !panels.left.collapsed &&
+            panels.left.widgets.length > 0) {
+            left = false;
+        }
+        if (isHorizontalPanelState(panel) &&
+            !panel.span &&
+            isLast &&
+            !panels.right.collapsed &&
+            panels.right.widgets.length > 0) {
+            right = false;
+        }
+        return {
+            "nz-border-top": top,
+            "nz-border-bottom": bottom,
+            "nz-border-left": left,
+            "nz-border-right": right,
+        };
+    }, true);
+}
+//# sourceMappingURL=PanelWidget.js.map

package/lib/esm/appui-react/layout/widget/PanelWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelWidget.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/PanelWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport \"./PanelWidget.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport type { WidgetState } from \"../state/WidgetState\";\nimport type { PanelSide } from \"../widget-panels/PanelTypes\";\nimport {\n  isHorizontalPanelSide,\n  PanelSideContext,\n} from \"../widget-panels/Panel\";\nimport { WidgetContentContainer } from \"./ContentContainer\";\nimport { WidgetTabBar } from \"./TabBar\";\nimport { Widget, WidgetProvider } from \"./Widget\";\nimport { WidgetOutline } from \"../outline/WidgetOutline\";\nimport { WidgetTarget } from \"../target/WidgetTarget\";\nimport { isHorizontalPanelState } from \"../state/PanelState\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport { getWidgetState } from \"../state/internal/WidgetStateHelpers\";\nimport type { NineZoneState } from \"../state/NineZoneState\";\n\n/** @internal */\nexport interface PanelWidgetProps {\n  widgetId: WidgetState[\"id\"];\n}\n\n/** @internal */\nexport const PanelWidget = React.forwardRef<HTMLDivElement, PanelWidgetProps>(\n  function PanelWidget({ widgetId }, ref) {\n    const side = React.useContext(PanelSideContext);\n    assert(!!side);\n    const widgetsLength = useLayout((state) => {\n      const panel = state.panels[side];\n      return panel.widgets.length;\n    });\n    const minimized = useLayout((state) => {\n      const widget = getWidgetState(state, widgetId);\n      return widget.minimized;\n    });\n    const horizontal = isHorizontalPanelSide(side);\n    const mode = useMode(widgetId);\n    const borders = useBorders(widgetId);\n    const showTarget = widgetsLength !== 1;\n    const className = classnames(\n      \"nz-widget-panelWidget\",\n      horizontal && \"nz-horizontal\",\n      `nz-${mode}`,\n      borders\n    );\n    const content = React.useMemo(\n      () => (\n        <WidgetContentContainer>\n          {showTarget && <WidgetTarget />}\n          <WidgetOutline />\n        </WidgetContentContainer>\n      ),\n      [showTarget]\n    );\n    return (\n      <WidgetProvider id={widgetId}>\n        <Widget className={className} ref={ref}>\n          <WidgetTabBar\n            separator={isHorizontalPanelSide(side) ? true : !minimized}\n          />\n          {content}\n        </Widget>\n      </WidgetProvider>\n    );\n  }\n);\n\nfunction findFillWidget(state: NineZoneState, side: PanelSide) {\n  const panelWidgets = state.panels[side].widgets;\n  return panelWidgets.find((widgetId) => {\n    const widget = getWidgetState(state, widgetId);\n    if (widget.minimized) return false;\n    const tabId = widget.activeTabId;\n    const tab = state.tabs[tabId];\n    if (!tab.preferredPanelWidgetSize) return true;\n    return false;\n  });\n}\n\n/** @internal */\nexport function useMode(widgetId: string): \"fit\" | \"fill\" | \"minimized\" {\n  const side = React.useContext(PanelSideContext);\n  assert(!!side);\n  return useLayout((state) => {\n    const fillWidget = findFillWidget(state, side);\n\n    // Force `fill` for last panel widget that is not minimized.\n    if (!fillWidget) {\n      const panel = state.panels[side];\n      for (let i = panel.widgets.length - 1; i >= 0; i--) {\n        const wId = panel.widgets[i];\n        const w = getWidgetState(state, wId);\n        if (w.minimized) continue;\n        if (wId === widgetId) return \"fill\";\n        break;\n      }\n    }\n\n    const widget = getWidgetState(state, widgetId);\n    if (widget.minimized) return \"minimized\";\n    const tabId = widget.activeTabId;\n    const tab = state.tabs[tabId];\n    return tab.preferredPanelWidgetSize ? \"fit\" : \"fill\";\n  });\n}\n\n/** @internal */\nexport function useBorders(widgetId: WidgetState[\"id\"]) {\n  const side = React.useContext(PanelSideContext);\n  assert(!!side);\n  return useLayout((state) => {\n    const panels = state.panels;\n    const panel = panels[side];\n    const toolSettings = state.toolSettings;\n    const isHorizontal = isHorizontalPanelSide(panel.side);\n    const isVertical = !isHorizontal;\n    const isFirst = panel.widgets[0] === widgetId;\n    const isLast = panel.widgets[panel.widgets.length - 1] === widgetId;\n    const isTopMostPanelBorder =\n      panel.side === \"top\" ||\n      (isVertical && !panels.top.span) ||\n      (isVertical && panels.top.span && panels.top.collapsed) ||\n      (isVertical && panels.top.widgets.length === 0);\n\n    let top = true;\n    let bottom = true;\n    let left = true;\n    let right = true;\n    if (panel.side === \"bottom\") {\n      bottom = false;\n    }\n    if (isVertical && isLast) {\n      bottom = false;\n    }\n    if (isTopMostPanelBorder && toolSettings?.type === \"docked\") {\n      top = false;\n    }\n    if (isVertical && !isFirst) {\n      top = false;\n    }\n    if (\n      isVertical &&\n      panels.top.span &&\n      !panels.top.collapsed &&\n      panels.top.widgets.length > 0\n    ) {\n      top = false;\n    }\n    if (isHorizontal && !isFirst) {\n      left = false;\n    }\n    if (\n      isHorizontalPanelState(panel) &&\n      !panel.span &&\n      isFirst &&\n      !panels.left.collapsed &&\n      panels.left.widgets.length > 0\n    ) {\n      left = false;\n    }\n    if (\n      isHorizontalPanelState(panel) &&\n      !panel.span &&\n      isLast &&\n      !panels.right.collapsed &&\n      panels.right.widgets.length > 0\n    ) {\n      right = false;\n    }\n    return {\n      \"nz-border-top\": top,\n      \"nz-border-bottom\": bottom,\n      \"nz-border-left\": left,\n      \"nz-border-right\": right,\n    };\n  }, true);\n}\n"]}

package/lib/esm/appui-react/layout/widget/PanelWidget.scss

@@ -0,0 +1,62 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+.nz-widget-panelWidget {
+  $border-width: 1px;
+  border: 0px solid var(--iui-color-border);
+
+  &.nz-border-top {
+    border-top-width: $border-width;
+  }
+
+  &.nz-border-bottom {
+    border-bottom-width: $border-width;
+  }
+
+  &.nz-border-left {
+    border-left-width: $border-width;
+  }
+
+  &.nz-border-right {
+    border-right-width: $border-width;
+  }
+
+  &.nz-widget-widget,
+  &.nz-init,
+  &.nz-transition {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  &.nz-horizontal {
+    &.nz-transition {
+      transition: flex-basis 0.25s ease-out;
+    }
+  }
+
+  &:not(.nz-horizontal) {
+    &.nz-transition {
+      transition: flex-basis 0.25s ease-out;
+    }
+  }
+
+  &.nz-fit {
+    flex: 0 1 auto;
+  }
+
+  &.nz-fill {
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 0px;
+    min-height: 0;
+  }
+
+  &:not(.nz-minimized) {
+    > .nz-content {
+      min-height: 0;
+      min-width: 0;
+    }
+  }
+}

package/lib/esm/appui-react/layout/widget/PinToggle.d.ts

@@ -0,0 +1,7 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+/** @internal */
+export declare function PinToggle(): React.JSX.Element;
+//# sourceMappingURL=PinToggle.d.ts.map

package/lib/esm/appui-react/layout/widget/PinToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinToggle.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/PinToggle.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,gBAAgB;AAChB,wBAAgB,SAAS,sBAoBxB"}

package/lib/esm/appui-react/layout/widget/PinToggle.js

@@ -0,0 +1,30 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+import { assert } from "@itwin/core-bentley";
+import { SvgPin, SvgPinHollow } from "@itwin/itwinui-icons-react";
+import { NineZoneDispatchContext, useLabel } from "../base/NineZone";
+import { PanelSideContext } from "../widget-panels/Panel";
+import { useLayout } from "../base/LayoutStore";
+import { ActionButton } from "../../preview/widget-action-dropdown/Button";
+/** @internal */
+export function PinToggle() {
+    const side = React.useContext(PanelSideContext);
+    assert(!!side);
+    const dispatch = React.useContext(NineZoneDispatchContext);
+    const pinPanelTitle = useLabel("pinPanelTitle");
+    const unpinPanelTitle = useLabel("unpinPanelTitle");
+    const pinned = useLayout((state) => state.panels[side].pinned);
+    return (React.createElement(ActionButton, { icon: pinned ? React.createElement(SvgPin, null) : React.createElement(SvgPinHollow, null), title: pinned ? unpinPanelTitle : pinPanelTitle, onClick: () => {
+            dispatch({
+                side,
+                type: "PANEL_TOGGLE_PINNED",
+            });
+        } }));
+}
+//# sourceMappingURL=PinToggle.js.map

package/lib/esm/appui-react/layout/widget/PinToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinToggle.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/PinToggle.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAE3E,gBAAgB;AAChB,MAAM,UAAU,SAAS;IACvB,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAChD,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IACf,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC3D,MAAM,aAAa,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;IAChD,MAAM,eAAe,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;IAE/D,OAAO,CACL,oBAAC,YAAY,IACX,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,oBAAC,MAAM,OAAG,CAAC,CAAC,CAAC,oBAAC,YAAY,OAAG,EAC5C,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,EAC/C,OAAO,EAAE,GAAG,EAAE;YACZ,QAAQ,CAAC;gBACP,IAAI;gBACJ,IAAI,EAAE,qBAAqB;aAC5B,CAAC,CAAC;QACL,CAAC,GACD,CACH,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { SvgPin, SvgPinHollow } from \"@itwin/itwinui-icons-react\";\nimport { NineZoneDispatchContext, useLabel } from \"../base/NineZone\";\nimport { PanelSideContext } from \"../widget-panels/Panel\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport { ActionButton } from \"../../preview/widget-action-dropdown/Button\";\n\n/** @internal */\nexport function PinToggle() {\n  const side = React.useContext(PanelSideContext);\n  assert(!!side);\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  const pinPanelTitle = useLabel(\"pinPanelTitle\");\n  const unpinPanelTitle = useLabel(\"unpinPanelTitle\");\n  const pinned = useLayout((state) => state.panels[side].pinned);\n\n  return (\n    <ActionButton\n      icon={pinned ? <SvgPin /> : <SvgPinHollow />}\n      title={pinned ? unpinPanelTitle : pinPanelTitle}\n      onClick={() => {\n        dispatch({\n          side,\n          type: \"PANEL_TOGGLE_PINNED\",\n        });\n      }}\n    />\n  );\n}\n"]}

package/lib/esm/appui-react/layout/widget/PopoutToggle.d.ts

@@ -0,0 +1,9 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+/** @internal */
+export declare function PopoutToggle(): React.JSX.Element;
+/** @internal */
+export declare function usePopoutToggle(): boolean;
+//# sourceMappingURL=PopoutToggle.d.ts.map

package/lib/esm/appui-react/layout/widget/PopoutToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoutToggle.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/PopoutToggle.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,gBAAgB;AAChB,wBAAgB,YAAY,sBAiB3B;AAED,gBAAgB;AAChB,wBAAgB,eAAe,YAM9B"}

package/lib/esm/appui-react/layout/widget/PopoutToggle.js

@@ -0,0 +1,34 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+import { SvgWindowPopout } from "@itwin/itwinui-icons-react";
+import { NineZoneDispatchContext, useLabel } from "../base/NineZone";
+import { useActiveTabId } from "./Widget";
+import { useLayout } from "../base/LayoutStore";
+import { ActionButton } from "../../preview/widget-action-dropdown/Button";
+/** @internal */
+export function PopoutToggle() {
+    const dispatch = React.useContext(NineZoneDispatchContext);
+    const activeTabId = useActiveTabId();
+    const popoutTitle = useLabel("popoutActiveTab");
+    return (React.createElement(ActionButton, { icon: React.createElement(SvgWindowPopout, null), title: popoutTitle, onClick: () => {
+            dispatch({
+                id: activeTabId,
+                type: "WIDGET_TAB_POPOUT",
+            });
+        } }));
+}
+/** @internal */
+export function usePopoutToggle() {
+    const tabId = useActiveTabId();
+    return useLayout((state) => {
+        const tab = state.tabs[tabId];
+        return !!tab.canPopout;
+    });
+}
+//# sourceMappingURL=PopoutToggle.js.map

package/lib/esm/appui-react/layout/widget/PopoutToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoutToggle.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/PopoutToggle.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,uBAAuB,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAE3E,gBAAgB;AAChB,MAAM,UAAU,YAAY;IAC1B,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC3D,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,WAAW,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IAEhD,OAAO,CACL,oBAAC,YAAY,IACX,IAAI,EAAE,oBAAC,eAAe,OAAG,EACzB,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,GAAG,EAAE;YACZ,QAAQ,CAAC;gBACP,EAAE,EAAE,WAAW;gBACf,IAAI,EAAE,mBAAmB;aAC1B,CAAC,CAAC;QACL,CAAC,GACD,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,eAAe;IAC7B,MAAM,KAAK,GAAG,cAAc,EAAE,CAAC;IAC/B,OAAO,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;QACzB,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,OAAO,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC;IACzB,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport * as React from \"react\";\nimport { SvgWindowPopout } from \"@itwin/itwinui-icons-react\";\nimport { NineZoneDispatchContext, useLabel } from \"../base/NineZone\";\nimport { useActiveTabId } from \"./Widget\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport { ActionButton } from \"../../preview/widget-action-dropdown/Button\";\n\n/** @internal */\nexport function PopoutToggle() {\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  const activeTabId = useActiveTabId();\n  const popoutTitle = useLabel(\"popoutActiveTab\");\n\n  return (\n    <ActionButton\n      icon={<SvgWindowPopout />}\n      title={popoutTitle}\n      onClick={() => {\n        dispatch({\n          id: activeTabId,\n          type: \"WIDGET_TAB_POPOUT\",\n        });\n      }}\n    />\n  );\n}\n\n/** @internal */\nexport function usePopoutToggle() {\n  const tabId = useActiveTabId();\n  return useLayout((state) => {\n    const tab = state.tabs[tabId];\n    return !!tab.canPopout;\n  });\n}\n"]}

package/lib/esm/appui-react/layout/widget/PreviewHorizontalPanelAlign.d.ts

@@ -0,0 +1,29 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+import { HorizontalAlignment } from "@itwin/core-react";
+import type { PanelSide } from "../widget-panels/PanelTypes";
+/** Horizontal panel alignment preview feature state.
+ * @internal
+ */
+export declare function usePreviewHorizontalPanelAlign(): {
+    enabled: boolean;
+    alignments: {
+        bottom: HorizontalAlignment;
+        top: HorizontalAlignment;
+    };
+    setAlignment: (panel: PanelSide | undefined, alignment: HorizontalAlignment) => void;
+};
+/** Preview horizontal panel alignment feature provider.
+ * @internal
+ */
+export declare function PreviewHorizontalPanelAlignFeatureProvider({ enabled, children, }: {
+    enabled?: boolean;
+    children?: React.ReactNode;
+}): React.JSX.Element;
+/** @internal */
+export declare function PreviewHorizontalPanelAlignButton(): React.JSX.Element;
+/** @internal */
+export declare function useHorizontalPanelAlignButton(): boolean;
+//# sourceMappingURL=PreviewHorizontalPanelAlign.d.ts.map

package/lib/esm/appui-react/layout/widget/PreviewHorizontalPanelAlign.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewHorizontalPanelAlign.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/PreviewHorizontalPanelAlign.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAMxD,OAAO,KAAK,EAEV,SAAS,EACV,MAAM,6BAA6B,CAAC;AA0BrC;;GAEG;AACH,wBAAgB,8BAA8B;;;;;;;EAE7C;AAED;;GAEG;AACH,wBAAgB,0CAA0C,CAAC,EACzD,OAAO,EACP,QAAQ,GACT,EAAE;IACD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,qBA4BA;AA6DD,gBAAgB;AAChB,wBAAgB,iCAAiC,sBA8ChD;AAED,gBAAgB;AAChB,wBAAgB,6BAA6B,YAW5C"}

package/lib/esm/appui-react/layout/widget/PreviewHorizontalPanelAlign.js

@@ -0,0 +1,113 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+import { assert } from "@itwin/core-bentley";
+import { HorizontalAlignment } from "@itwin/core-react";
+import { DropdownMenu, MenuItem } from "@itwin/itwinui-react";
+import { isHorizontalPanelSide, PanelSideContext, } from "../widget-panels/Panel";
+import { useIsMainPanelWidget } from "./Buttons";
+import { WidgetActionDropdownContext } from "../../preview/widget-action-dropdown/MoreButton";
+import { TabBarButton } from "./Button";
+/** Default value used when not provided or disabled. */
+const defaultAlignments = {
+    top: HorizontalAlignment.Justify,
+    bottom: HorizontalAlignment.Justify,
+};
+const HorizontalPanelAlignContext = React.createContext({
+    enabled: false,
+    alignments: defaultAlignments,
+    setAlignment: () => { },
+});
+/** Horizontal panel alignment preview feature state.
+ * @internal
+ */
+export function usePreviewHorizontalPanelAlign() {
+    return React.useContext(HorizontalPanelAlignContext);
+}
+/** Preview horizontal panel alignment feature provider.
+ * @internal
+ */
+export function PreviewHorizontalPanelAlignFeatureProvider({ enabled, children, }) {
+    const [alignments, setAlignments] = React.useState({
+        top: HorizontalAlignment.Justify,
+        bottom: HorizontalAlignment.Justify,
+    });
+    const setAlignment = React.useCallback((panel, alignment) => {
+        if (!panel || !isHorizontalPanelSide(panel))
+            return;
+        setAlignments((prev) => ({
+            ...prev,
+            [panel]: alignment,
+        }));
+    }, []);
+    return (React.createElement(HorizontalPanelAlignContext.Provider, { value: {
+            enabled: !!enabled,
+            alignments: enabled ? alignments : defaultAlignments,
+            setAlignment,
+        } }, children));
+}
+function SvgSide(props) {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1rem", height: "1rem", viewBox: "0 0 16 16", fill: "var(--iui-color-icon-muted, currentColor)", ...props },
+        React.createElement("path", { d: "M0 2v12h16V2H0Zm11 7H1V3h10v6Zm4 4h-3V3h3v10Z" })));
+}
+function SvgJustify(props) {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1rem", height: "1rem", viewBox: "0 0 16 16", fill: "var(--iui-color-icon-muted, currentColor)", ...props },
+        React.createElement("path", { d: "M0 2v12h16V2H0Zm4 7H1V3h3v6Zm1 0V3h6v6H5Zm10 0h-3V3h3v6Z" })));
+}
+function SvgCenter(props) {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1rem", height: "1rem", viewBox: "0 0 16 16", fill: "var(--iui-color-icon-muted, currentColor)", ...props },
+        React.createElement("path", { d: "M0 2v12h16V2H0Zm4 11H1V3h3v10Zm1-4V3h6v6H5Zm10 4h-3V3h3v10Z" })));
+}
+function getIcon(side, alignment) {
+    const scaleY = side === "top" ? "-1" : "1";
+    if (alignment === HorizontalAlignment.Justify)
+        return React.createElement(SvgJustify, { transform: `scale(1, ${scaleY})` });
+    if (alignment === HorizontalAlignment.Center)
+        return React.createElement(SvgCenter, { transform: `scale(1, ${scaleY})` });
+    const scaleX = alignment === HorizontalAlignment.Left ? "1" : "-1";
+    return React.createElement(SvgSide, { transform: `scale(${scaleX}, ${scaleY})` });
+}
+function capitalize(s) {
+    return s.charAt(0).toUpperCase() + s.slice(1);
+}
+/** @internal */
+export function PreviewHorizontalPanelAlignButton() {
+    const side = React.useContext(PanelSideContext);
+    assert(!!side);
+    assert(isHorizontalPanelSide(side));
+    const { alignments, setAlignment } = usePreviewHorizontalPanelAlign();
+    const title = "Align panel";
+    const getMenuItems = (onClose) => [
+        HorizontalAlignment.Justify,
+        HorizontalAlignment.Center,
+        HorizontalAlignment.Left,
+        HorizontalAlignment.Right,
+    ].map((align) => {
+        return (React.createElement(MenuItem, { key: align, onClick: () => {
+                setAlignment(side, align);
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }, icon: getIcon(side, align), isSelected: alignments[side] === align }, capitalize(align)));
+    });
+    const dropdownContext = React.useContext(WidgetActionDropdownContext);
+    if (dropdownContext !== undefined) {
+        return (React.createElement(MenuItem, { icon: getIcon(side, alignments[side]), subMenuItems: getMenuItems() }, title));
+    }
+    return (React.createElement(DropdownMenu, { menuItems: (close) => getMenuItems(close) },
+        React.createElement(TabBarButton, { title: title }, getIcon(side, alignments[side]))));
+}
+/** @internal */
+export function useHorizontalPanelAlignButton() {
+    const side = React.useContext(PanelSideContext);
+    const { enabled } = usePreviewHorizontalPanelAlign();
+    const isMainPanelWidget = useIsMainPanelWidget();
+    return !!(enabled &&
+        side &&
+        isHorizontalPanelSide(side) &&
+        isMainPanelWidget);
+}
+//# sourceMappingURL=PreviewHorizontalPanelAlign.js.map

package/lib/esm/appui-react/layout/widget/PreviewHorizontalPanelAlign.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewHorizontalPanelAlign.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/PreviewHorizontalPanelAlign.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { HorizontalAlignment } from \"@itwin/core-react\";\nimport { DropdownMenu, MenuItem } from \"@itwin/itwinui-react\";\nimport {\n  isHorizontalPanelSide,\n  PanelSideContext,\n} from \"../widget-panels/Panel\";\nimport type {\n  HorizontalPanelSide,\n  PanelSide,\n} from \"../widget-panels/PanelTypes\";\nimport { useIsMainPanelWidget } from \"./Buttons\";\nimport { WidgetActionDropdownContext } from \"../../preview/widget-action-dropdown/MoreButton\";\nimport { TabBarButton } from \"./Button\";\n\n/** Default value used when not provided or disabled. */\nconst defaultAlignments = {\n  top: HorizontalAlignment.Justify,\n  bottom: HorizontalAlignment.Justify,\n};\n\nconst HorizontalPanelAlignContext = React.createContext<{\n  enabled: boolean;\n  alignments: {\n    [side in HorizontalPanelSide]: HorizontalAlignment;\n  };\n  setAlignment: (\n    panel: PanelSide | undefined,\n    alignment: HorizontalAlignment\n  ) => void;\n}>({\n  enabled: false,\n  alignments: defaultAlignments,\n  setAlignment: () => {},\n});\n\n/** Horizontal panel alignment preview feature state.\n * @internal\n */\nexport function usePreviewHorizontalPanelAlign() {\n  return React.useContext(HorizontalPanelAlignContext);\n}\n\n/** Preview horizontal panel alignment feature provider.\n * @internal\n */\nexport function PreviewHorizontalPanelAlignFeatureProvider({\n  enabled,\n  children,\n}: {\n  enabled?: boolean;\n  children?: React.ReactNode;\n}) {\n  const [alignments, setAlignments] = React.useState<{\n    [x in HorizontalPanelSide]: HorizontalAlignment;\n  }>({\n    top: HorizontalAlignment.Justify,\n    bottom: HorizontalAlignment.Justify,\n  });\n  const setAlignment = React.useCallback(\n    (panel: PanelSide | undefined, alignment: HorizontalAlignment) => {\n      if (!panel || !isHorizontalPanelSide(panel)) return;\n      setAlignments((prev) => ({\n        ...prev,\n        [panel]: alignment,\n      }));\n    },\n    []\n  );\n  return (\n    <HorizontalPanelAlignContext.Provider\n      value={{\n        enabled: !!enabled,\n        alignments: enabled ? alignments : defaultAlignments,\n        setAlignment,\n      }}\n    >\n      {children}\n    </HorizontalPanelAlignContext.Provider>\n  );\n}\n\nfunction SvgSide(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"1rem\"\n      height=\"1rem\"\n      viewBox=\"0 0 16 16\"\n      fill=\"var(--iui-color-icon-muted, currentColor)\"\n      {...props}\n    >\n      <path d=\"M0 2v12h16V2H0Zm11 7H1V3h10v6Zm4 4h-3V3h3v10Z\" />\n    </svg>\n  );\n}\n\nfunction SvgJustify(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"1rem\"\n      height=\"1rem\"\n      viewBox=\"0 0 16 16\"\n      fill=\"var(--iui-color-icon-muted, currentColor)\"\n      {...props}\n    >\n      <path d=\"M0 2v12h16V2H0Zm4 7H1V3h3v6Zm1 0V3h6v6H5Zm10 0h-3V3h3v6Z\" />\n    </svg>\n  );\n}\n\nfunction SvgCenter(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"1rem\"\n      height=\"1rem\"\n      viewBox=\"0 0 16 16\"\n      fill=\"var(--iui-color-icon-muted, currentColor)\"\n      {...props}\n    >\n      <path d=\"M0 2v12h16V2H0Zm4 11H1V3h3v10Zm1-4V3h6v6H5Zm10 4h-3V3h3v10Z\" />\n    </svg>\n  );\n}\n\nfunction getIcon(side: HorizontalPanelSide, alignment: HorizontalAlignment) {\n  const scaleY = side === \"top\" ? \"-1\" : \"1\";\n  if (alignment === HorizontalAlignment.Justify)\n    return <SvgJustify transform={`scale(1, ${scaleY})`} />;\n  if (alignment === HorizontalAlignment.Center)\n    return <SvgCenter transform={`scale(1, ${scaleY})`} />;\n  const scaleX = alignment === HorizontalAlignment.Left ? \"1\" : \"-1\";\n  return <SvgSide transform={`scale(${scaleX}, ${scaleY})`} />;\n}\n\nfunction capitalize(s: string) {\n  return s.charAt(0).toUpperCase() + s.slice(1);\n}\n\n/** @internal */\nexport function PreviewHorizontalPanelAlignButton() {\n  const side = React.useContext(PanelSideContext);\n  assert(!!side);\n  assert(isHorizontalPanelSide(side));\n  const { alignments, setAlignment } = usePreviewHorizontalPanelAlign();\n  const title = \"Align panel\";\n\n  const getMenuItems = (onClose?: () => void) =>\n    [\n      HorizontalAlignment.Justify,\n      HorizontalAlignment.Center,\n      HorizontalAlignment.Left,\n      HorizontalAlignment.Right,\n    ].map((align) => {\n      return (\n        <MenuItem\n          key={align}\n          onClick={() => {\n            setAlignment(side, align);\n            onClose?.();\n          }}\n          icon={getIcon(side, align)}\n          isSelected={alignments[side] === align}\n        >\n          {capitalize(align)}\n        </MenuItem>\n      );\n    });\n  const dropdownContext = React.useContext(WidgetActionDropdownContext);\n  if (dropdownContext !== undefined) {\n    return (\n      <MenuItem\n        icon={getIcon(side, alignments[side])}\n        subMenuItems={getMenuItems()}\n      >\n        {title}\n      </MenuItem>\n    );\n  }\n  return (\n    <DropdownMenu menuItems={(close) => getMenuItems(close)}>\n      <TabBarButton title={title}>\n        {getIcon(side, alignments[side])}\n      </TabBarButton>\n    </DropdownMenu>\n  );\n}\n\n/** @internal */\nexport function useHorizontalPanelAlignButton() {\n  const side = React.useContext(PanelSideContext);\n  const { enabled } = usePreviewHorizontalPanelAlign();\n  const isMainPanelWidget = useIsMainPanelWidget();\n\n  return !!(\n    enabled &&\n    side &&\n    isHorizontalPanelSide(side) &&\n    isMainPanelWidget\n  );\n}\n"]}

package/lib/esm/appui-react/layout/widget/PreviewMaximizeToggle.d.ts

@@ -0,0 +1,30 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+/** Maximized widget preview feature state.
+ * @internal
+ */
+export declare function usePreviewMaximizedWidget(): MaximizedWidgetState;
+/** Properties of [[PreviewMaximizedWidgetFeatureProvider]] component.
+ * @internal
+ */
+export interface PreviewMaximizedWidgetFeatureProviderProps {
+    enabled?: boolean;
+    children?: React.ReactNode;
+}
+interface MaximizedWidgetState {
+    enabled: boolean | undefined;
+    maximizedWidget: string | undefined;
+    setMaximizedWidget: (id: string | undefined) => void;
+}
+/** Preview maximized widget feature provider.
+ * @internal
+ */
+export declare function PreviewMaximizedWidgetFeatureProvider({ enabled, children, }: PreviewMaximizedWidgetFeatureProviderProps): React.JSX.Element;
+/** @internal */
+export declare function PreviewMaximizeToggle(): React.JSX.Element;
+/** @internal */
+export declare function useMaximizeToggle(): boolean;
+export {};
+//# sourceMappingURL=PreviewMaximizeToggle.d.ts.map

package/lib/esm/appui-react/layout/widget/PreviewMaximizeToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewMaximizeToggle.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/PreviewMaximizeToggle.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B;;GAEG;AACH,wBAAgB,yBAAyB,yBAExC;AAED;;GAEG;AACH,MAAM,WAAW,0CAA0C;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,UAAU,oBAAoB;IAC5B,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CACtD;AASD;;GAEG;AACH,wBAAgB,qCAAqC,CAAC,EACpD,OAAO,EACP,QAAQ,GACT,EAAE,0CAA0C,qBAW5C;AAED,gBAAgB;AAChB,wBAAgB,qBAAqB,sBA0BpC;AAED,gBAAgB;AAChB,wBAAgB,iBAAiB,YAMhC"}