@itwin/appui-react 4.0.0-dev.2 → 4.0.0-dev.4

package/lib/esm/appui-react/navigationaids/NavigationAidControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationAidControl.js","sourceRoot":"","sources":["../../../../src/appui-react/navigationaids/NavigationAidControl.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAIH,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAA0B,qBAAqB,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AAUnI;;GAEG;AACH,MAAM,OAAO,2BAA4B,SAAQ,OAAwC;CAAI;AAE7F;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,qBAAqB;IAG7D,YAAY,IAA4B,EAAE,OAAY;QACpD,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACvB,CAAC;IAED,qDAAqD;IACrD,IAAW,SAAS,KAAsB,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;IACnE,IAAW,SAAS,CAAC,CAAkB,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC;IAEjE,+FAA+F;IACxF,OAAO,KAAyB,OAAO,SAAS,CAAC,CAAC,CAAC;IAE1D,oCAAoC;IAC7B,OAAO,KAAgC,OAAO,yBAAyB,CAAC,aAAa,CAAC,CAAC,CAAC;CAChG","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 NavigationAids\n */\n\nimport * as React from \"react\";\nimport { IModelConnection } from \"@itwin/core-frontend\";\nimport { UiEvent } from \"@itwin/appui-abstract\";\nimport { ConfigurableCreateInfo, ConfigurableUiControl, ConfigurableUiControlType } from \"../configurableui/ConfigurableUiControl\";\n\n/** NavigationAid Activated Event Args interface.\n * @public\n */\nexport interface NavigationAidActivatedEventArgs {\n  navigationAidId: string;\n  iModelConnection: IModelConnection;\n}\n\n/** NavigationAid Activated Event class.\n * @public\n */\nexport class NavigationAidActivatedEvent extends UiEvent<NavigationAidActivatedEventArgs> { }\n\n/** The base class for Navigation Aid controls.\n * @public\n */\nexport class NavigationAidControl extends ConfigurableUiControl {\n  private _reactNode: React.ReactNode;\n\n  constructor(info: ConfigurableCreateInfo, options: any) {\n    super(info, options);\n  }\n\n  /** The React element associated with this control */\n  public get reactNode(): React.ReactNode { return this._reactNode; }\n  public set reactNode(r: React.ReactNode) { this._reactNode = r; }\n\n  /** Square size of navigation aid. Default size is \"64px\". Override to set a different size. */\n  public getSize(): string | undefined { return undefined; }\n\n  /** Get the type of this control. */\n  public getType(): ConfigurableUiControlType { return ConfigurableUiControlType.NavigationAid; }\n}\n"]}
+{"version":3,"file":"NavigationAidControl.js","sourceRoot":"","sources":["../../../../src/appui-react/navigationaids/NavigationAidControl.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAIH,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAA0B,qBAAqB,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AAUnI;;GAEG;AACH,MAAM,OAAO,2BAA4B,SAAQ,OAAwC;CAAI;AAE7F;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,qBAAqB;IAG7D,YAAY,IAA4B,EAAE,OAAY;QACpD,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACvB,CAAC;IAED,qDAAqD;IACrD,IAAW,SAAS,KAAsB,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;IACnE,IAAW,SAAS,CAAC,CAAkB,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC;IAEjE,+FAA+F;IACxF,OAAO,KAAyB,OAAO,SAAS,CAAC,CAAC,CAAC;IAE1D,oCAAoC;IAC7B,OAAO,KAAgC,OAAO,yBAAyB,CAAC,aAAa,CAAC,CAAC,CAAC;CAChG","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module NavigationAids\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { IModelConnection } from \"@itwin/core-frontend\";\r\nimport { UiEvent } from \"@itwin/appui-abstract\";\r\nimport { ConfigurableCreateInfo, ConfigurableUiControl, ConfigurableUiControlType } from \"../configurableui/ConfigurableUiControl\";\r\n\r\n/** NavigationAid Activated Event Args interface.\r\n * @public\r\n */\r\nexport interface NavigationAidActivatedEventArgs {\r\n  navigationAidId: string;\r\n  iModelConnection: IModelConnection;\r\n}\r\n\r\n/** NavigationAid Activated Event class.\r\n * @public\r\n */\r\nexport class NavigationAidActivatedEvent extends UiEvent<NavigationAidActivatedEventArgs> { }\r\n\r\n/** The base class for Navigation Aid controls.\r\n * @public\r\n */\r\nexport class NavigationAidControl extends ConfigurableUiControl {\r\n  private _reactNode: React.ReactNode;\r\n\r\n  constructor(info: ConfigurableCreateInfo, options: any) {\r\n    super(info, options);\r\n  }\r\n\r\n  /** The React element associated with this control */\r\n  public get reactNode(): React.ReactNode { return this._reactNode; }\r\n  public set reactNode(r: React.ReactNode) { this._reactNode = r; }\r\n\r\n  /** Square size of navigation aid. Default size is \"64px\". Override to set a different size. */\r\n  public getSize(): string | undefined { return undefined; }\r\n\r\n  /** Get the type of this control. */\r\n  public getType(): ConfigurableUiControlType { return ConfigurableUiControlType.NavigationAid; }\r\n}\r\n"]}

package/lib/esm/appui-react/navigationaids/SheetNavigationAid.d.ts

@@ -1,72 +1,72 @@
-/** @packageDocumentation
- * @module NavigationAids
- */
-import "./SheetNavigationAid.scss";
-import * as React from "react";
-import { IModelConnection } from "@itwin/core-frontend";
-import { CommonProps } from "@itwin/core-react";
-import { ConfigurableCreateInfo } from "../configurableui/ConfigurableUiControl";
-import { NavigationAidControl } from "./NavigationAidControl";
-/** A Sheet Navigation Aid control.
- * @alpha
- */
-export declare class SheetNavigationAidControl extends NavigationAidControl {
-    static navigationAidId: string;
-    constructor(info: ConfigurableCreateInfo, options: any);
-    getSize(): string | undefined;
-}
-/** Data displayed about sheet
- * @alpha
- */
-export interface SheetData {
-    name: string;
-    viewId: string;
-}
-/** Properties for the [[SheetNavigationAid]] component
- * @alpha
- */
-export interface SheetNavigationProps extends CommonProps {
-    iModelConnection: IModelConnection;
-}
-/** @internal */
-interface SheetNavigationState {
-    index: number;
-    sheetData: SheetData[];
-}
-/** A Sheet Navigation Aid.
- * @alpha
- */
-export declare class SheetNavigationAid extends React.Component<SheetNavigationProps, SheetNavigationState> {
-    private _isMounted;
-    /** @internal */
-    readonly state: Readonly<SheetNavigationState>;
-    private _viewport;
-    constructor(props: SheetNavigationProps);
-    /** Adds listeners when components mounts */
-    componentDidMount(): Promise<void>;
-    /** Removes listeners when component will unmount */
-    componentWillUnmount(): void;
-    /** Queries for sheet info and sets as sheetData */
-    private _setupSheets;
-    /** @internal */
-    render(): React.ReactNode;
-    /** Sets index of newly selected card */
-    private _handleCardSelected;
-    /** Updates view to the next lowest index in sheetData */
-    private _handleOnClickLeftArrow;
-    /** Updates view to next highest index in sheetData */
-    private _handleOnClickRightArrow;
-    /** Handles a Viewport change & synchs the index */
-    private _handleSelectedViewportChanged;
-    private _handleViewIdChanged;
-    /** Handles a Viewport change & synchs the index */
-    private _handleViewportChanged;
-    /** Updates view to currently set sheet */
-    private _updateView;
-    /** Creates a new SheetsModalFrontstage */
-    private modalFrontstage;
-    /** Opens a new SheetsModelFrontstage on sheetName click */
-    private _handleOnClickSheetName;
-}
-export {};
+/** @packageDocumentation
+ * @module NavigationAids
+ */
+import "./SheetNavigationAid.scss";
+import * as React from "react";
+import { IModelConnection } from "@itwin/core-frontend";
+import { CommonProps } from "@itwin/core-react";
+import { ConfigurableCreateInfo } from "../configurableui/ConfigurableUiControl";
+import { NavigationAidControl } from "./NavigationAidControl";
+/** A Sheet Navigation Aid control.
+ * @alpha
+ */
+export declare class SheetNavigationAidControl extends NavigationAidControl {
+    static navigationAidId: string;
+    constructor(info: ConfigurableCreateInfo, options: any);
+    getSize(): string | undefined;
+}
+/** Data displayed about sheet
+ * @alpha
+ */
+export interface SheetData {
+    name: string;
+    viewId: string;
+}
+/** Properties for the [[SheetNavigationAid]] component
+ * @alpha
+ */
+export interface SheetNavigationProps extends CommonProps {
+    iModelConnection: IModelConnection;
+}
+/** @internal */
+interface SheetNavigationState {
+    index: number;
+    sheetData: SheetData[];
+}
+/** A Sheet Navigation Aid.
+ * @alpha
+ */
+export declare class SheetNavigationAid extends React.Component<SheetNavigationProps, SheetNavigationState> {
+    private _isMounted;
+    /** @internal */
+    readonly state: Readonly<SheetNavigationState>;
+    private _viewport;
+    constructor(props: SheetNavigationProps);
+    /** Adds listeners when components mounts */
+    componentDidMount(): Promise<void>;
+    /** Removes listeners when component will unmount */
+    componentWillUnmount(): void;
+    /** Queries for sheet info and sets as sheetData */
+    private _setupSheets;
+    /** @internal */
+    render(): React.ReactNode;
+    /** Sets index of newly selected card */
+    private _handleCardSelected;
+    /** Updates view to the next lowest index in sheetData */
+    private _handleOnClickLeftArrow;
+    /** Updates view to next highest index in sheetData */
+    private _handleOnClickRightArrow;
+    /** Handles a Viewport change & synchs the index */
+    private _handleSelectedViewportChanged;
+    private _handleViewIdChanged;
+    /** Handles a Viewport change & synchs the index */
+    private _handleViewportChanged;
+    /** Updates view to currently set sheet */
+    private _updateView;
+    /** Creates a new SheetsModalFrontstage */
+    private modalFrontstage;
+    /** Opens a new SheetsModelFrontstage on sheetName click */
+    private _handleOnClickSheetName;
+}
+export {};
 //# sourceMappingURL=SheetNavigationAid.d.ts.map

package/lib/esm/appui-react/navigationaids/SheetNavigationAid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SheetNavigationAid.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/navigationaids/SheetNavigationAid.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,2BAA2B,CAAC;AAEnC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAa,gBAAgB,EAA+C,MAAM,sBAAsB,CAAC;AAGhH,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAIjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAI9D;;GAEG;AACH,qBAAa,yBAA0B,SAAQ,oBAAoB;IACjE,OAAc,eAAe,SAAwB;gBAEzC,IAAI,EAAE,sBAAsB,EAAE,OAAO,EAAE,GAAG;IAMtC,OAAO,IAAI,MAAM,GAAG,SAAS;CAC9C;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAED,gBAAgB;AAChB,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,SAAS,EAAE,CAAC;CACxB;AAED;;GAEG;AACH,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,oBAAoB,EAAE,oBAAoB,CAAC;IACjG,OAAO,CAAC,UAAU,CAAS;IAE3B,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,CAG5D;IAEF,OAAO,CAAC,SAAS,CAA6B;gBAElC,KAAK,EAAE,oBAAoB;IAMvC,4CAA4C;IACtB,iBAAiB;IAcvC,oDAAoD;IACpC,oBAAoB;IASpC,mDAAmD;YACrC,YAAY;IA8B1B,gBAAgB;IACA,MAAM,IAAI,KAAK,CAAC,SAAS;IA2CzC,wCAAwC;IACxC,OAAO,CAAC,mBAAmB,CAIzB;IAEF,yDAAyD;IAEzD,OAAO,CAAC,uBAAuB,CAI7B;IAEF,sDAAsD;IAEtD,OAAO,CAAC,wBAAwB,CAI9B;IAEF,mDAAmD;IAEnD,OAAO,CAAC,8BAA8B,CAIpC;IAGF,OAAO,CAAC,oBAAoB,CAG1B;IAEF,mDAAmD;IAEnD,OAAO,CAAC,sBAAsB,CAe5B;IAEF,0CAA0C;YAE5B,WAAW;IAMzB,0CAA0C;IAE1C,OAAO,CAAC,eAAe;IAIvB,2DAA2D;IAE3D,OAAO,CAAC,uBAAuB,CAE7B;CACH"}
+{"version":3,"file":"SheetNavigationAid.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/navigationaids/SheetNavigationAid.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,2BAA2B,CAAC;AAEnC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAa,gBAAgB,EAA+C,MAAM,sBAAsB,CAAC;AAGhH,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAIjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAI9D;;GAEG;AACH,qBAAa,yBAA0B,SAAQ,oBAAoB;IACjE,OAAc,eAAe,SAAwB;gBAEzC,IAAI,EAAE,sBAAsB,EAAE,OAAO,EAAE,GAAG;IAKtC,OAAO,IAAI,MAAM,GAAG,SAAS;CAC9C;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAED,gBAAgB;AAChB,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,SAAS,EAAE,CAAC;CACxB;AAED;;GAEG;AACH,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,oBAAoB,EAAE,oBAAoB,CAAC;IACjG,OAAO,CAAC,UAAU,CAAS;IAE3B,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,CAG5D;IAEF,OAAO,CAAC,SAAS,CAA6B;gBAElC,KAAK,EAAE,oBAAoB;IAMvC,4CAA4C;IACtB,iBAAiB;IAcvC,oDAAoD;IACpC,oBAAoB;IASpC,mDAAmD;YACrC,YAAY;IA8B1B,gBAAgB;IACA,MAAM,IAAI,KAAK,CAAC,SAAS;IA2CzC,wCAAwC;IACxC,OAAO,CAAC,mBAAmB,CAIzB;IAEF,yDAAyD;IAEzD,OAAO,CAAC,uBAAuB,CAI7B;IAEF,sDAAsD;IAEtD,OAAO,CAAC,wBAAwB,CAI9B;IAEF,mDAAmD;IAEnD,OAAO,CAAC,8BAA8B,CAIpC;IAGF,OAAO,CAAC,oBAAoB,CAG1B;IAEF,mDAAmD;IAEnD,OAAO,CAAC,sBAAsB,CAe5B;IAEF,0CAA0C;YAE5B,WAAW;IAMzB,0CAA0C;IAE1C,OAAO,CAAC,eAAe;IAIvB,2DAA2D;IAE3D,OAAO,CAAC,uBAAuB,CAE7B;CACH"}

package/lib/esm/appui-react/navigationaids/SheetNavigationAid.js

@@ -1,181 +1,180 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module NavigationAids
- */
-import "./SheetNavigationAid.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { IModelApp } from "@itwin/core-frontend";
-import { UiComponents } from "@itwin/components-react";
-import { ViewportComponentEvents } from "@itwin/imodel-components-react";
-import { FrontstageManager } from "../frontstage/FrontstageManager";
-import { UiFramework } from "../UiFramework";
-import { ViewUtilities } from "../utils/ViewUtilities";
-import { NavigationAidControl } from "./NavigationAidControl";
-import { CardContainer, SheetsModalFrontstage } from "./SheetsModalFrontstage";
-import { ProgressRadial } from "@itwin/itwinui-react";
-/** A Sheet Navigation Aid control.
- * @alpha
- */
-export class SheetNavigationAidControl extends NavigationAidControl {
-    constructor(info, options) {
-        super(info, options);
-        this.reactNode = React.createElement(SheetNavigationAid, { iModelConnection: options.imodel });
-    }
-    // istanbul ignore next
-    getSize() { return "96px"; }
-}
-SheetNavigationAidControl.navigationAidId = "SheetNavigationAid";
-/** A Sheet Navigation Aid.
- * @alpha
- */
-export class SheetNavigationAid extends React.Component {
-    constructor(props) {
-        super(props);
-        this._isMounted = false;
-        /** @internal */
-        this.state = {
-            index: 0,
-            sheetData: [],
-        };
-        /** Sets index of newly selected card */
-        this._handleCardSelected = (event) => {
-            event && this.setState({
-                index: event.index,
-            });
-        };
-        /** Updates view to the next lowest index in sheetData */
-        // istanbul ignore next
-        this._handleOnClickLeftArrow = () => {
-            this.setState((prevState) => ({ index: prevState.index <= 0 ? prevState.sheetData.length - 1 : prevState.index - 1 }), async () => this._updateView());
-        };
-        /** Updates view to next highest index in sheetData */
-        // istanbul ignore next
-        this._handleOnClickRightArrow = () => {
-            this.setState((prevState) => ({ index: (prevState.index + 1) % prevState.sheetData.length }), async () => this._updateView());
-        };
-        /** Handles a Viewport change & synchs the index */
-        // istanbul ignore next
-        this._handleSelectedViewportChanged = (args) => {
-            if (args.current) {
-                this._handleViewportChanged(args.current);
-            }
-        };
-        // istanbul ignore next
-        this._handleViewIdChanged = (args) => {
-            if (this._viewport === args.viewport)
-                this._handleViewportChanged(args.viewport);
-        };
-        /** Handles a Viewport change & synchs the index */
-        // istanbul ignore next
-        this._handleViewportChanged = (viewport) => {
-            const className = ViewUtilities.getBisBaseClass(viewport.view.classFullName);
-            if (ViewUtilities.isSheet(className)) {
-                this._viewport = viewport;
-                const viewId = this._viewport.view.id.toString();
-                const index = this.state.sheetData.findIndex((sheetData) => {
-                    return (viewId === sheetData.viewId);
-                });
-                if (index >= 0)
-                    this.setState({ index });
-            }
-        };
-        /** Opens a new SheetsModelFrontstage on sheetName click */
-        // istanbul ignore next
-        this._handleOnClickSheetName = () => {
-            FrontstageManager.openModalFrontstage(this.modalFrontstage());
-        };
-        this._viewport = IModelApp.viewManager.selectedView;
-    }
-    /** Adds listeners when components mounts */
-    async componentDidMount() {
-        this._isMounted = true;
-        CardContainer.onCardSelectedEvent.addListener(this._handleCardSelected);
-        ViewportComponentEvents.onViewIdChangedEvent.addListener(this._handleViewIdChanged);
-        IModelApp.viewManager.onSelectedViewportChanged.addListener(this._handleSelectedViewportChanged);
-        const stateData = await this._setupSheets();
-        if (this._isMounted)
-            this.setState(stateData);
-    }
-    /** Removes listeners when component will unmount */
-    componentWillUnmount() {
-        this._isMounted = false;
-        CardContainer.onCardSelectedEvent.removeListener(this._handleCardSelected);
-        ViewportComponentEvents.onViewIdChangedEvent.removeListener(this._handleViewIdChanged);
-        IModelApp.viewManager.onSelectedViewportChanged.removeListener(this._handleSelectedViewportChanged);
-    }
-    /** Queries for sheet info and sets as sheetData */
-    async _setupSheets() {
-        const stateData = {
-            index: 0,
-            sheetData: [],
-        };
-        // istanbul ignore else
-        if (!this.props.iModelConnection || !this.props.iModelConnection.views.getViewList)
-            return stateData;
-        // istanbul ignore next
-        let viewId = "";
-        // istanbul ignore next
-        if (this._viewport) {
-            viewId = this._viewport.view.id.toString();
-        }
-        // istanbul ignore next
-        const sheets = await this.props.iModelConnection.views.getViewList({ from: "BisCore.SheetViewDefinition" });
-        // istanbul ignore next
-        sheets.forEach((viewSpec, index) => {
-            stateData.sheetData.push({ name: viewSpec.name, viewId: viewSpec.id });
-            if (viewSpec.id === viewId)
-                stateData.index = index;
-        });
-        // istanbul ignore next
-        return stateData;
-    }
-    /** @internal */
-    render() {
-        const name = (this.state.sheetData.length > 0) ? /* istanbul ignore next */ this.state.sheetData[this.state.index].name : "";
-        const sheet = UiFramework.translate("general.sheet");
-        const ofStr = UiComponents.translate("general.of");
-        const leftIndex = this.state.index === 0 ? this.state.sheetData.length - 1 : /* istanbul ignore next */ this.state.index - 1;
-        const rightIndex = this.state.index >= this.state.sheetData.length - 1 ? 0 : /* istanbul ignore next */ this.state.index + 1;
-        const leftTitle = this.state.sheetData[leftIndex] ? /* istanbul ignore next */ this.state.sheetData[leftIndex].name : undefined;
-        const rightTitle = this.state.sheetData[rightIndex] ? /* istanbul ignore next */ this.state.sheetData[rightIndex].name : undefined;
-        let content;
-        // istanbul ignore if
-        if (this.state.sheetData.length > 0) {
-            content = (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "sheet-title" }, sheet),
-                React.createElement("div", { className: "sheet-name", title: name, onClick: this._handleOnClickSheetName, role: "button", tabIndex: -1 }, name),
-                React.createElement("div", { className: "sheet-container" },
-                    React.createElement("div", { className: "sheet-caret icon icon-caret-left", onClick: this._handleOnClickLeftArrow, role: "button", tabIndex: -1, title: leftTitle }),
-                    React.createElement("div", null,
-                        this.state.index + 1,
-                        " ",
-                        ofStr,
-                        " ",
-                        this.state.sheetData.length),
-                    React.createElement("div", { className: "sheet-caret icon icon-caret-right", onClick: this._handleOnClickRightArrow, role: "button", tabIndex: -1, title: rightTitle }))));
-        }
-        else {
-            content = React.createElement(ProgressRadial, { size: "x-small", indeterminate: true });
-        }
-        return (React.createElement("div", { className: classnames("uifw-sheet-navigation", this.props.className), style: this.props.style },
-            React.createElement("div", { className: "gradient" }),
-            content));
-    }
-    /** Updates view to currently set sheet */
-    // istanbul ignore next
-    async _updateView() {
-        const viewState = await this.props.iModelConnection.views.load(this.state.sheetData[this.state.index].viewId);
-        if (this._viewport)
-            this._viewport.changeView(viewState);
-    }
-    /** Creates a new SheetsModalFrontstage */
-    // istanbul ignore next
-    modalFrontstage() {
-        return new SheetsModalFrontstage(this.state.sheetData, this.props.iModelConnection, this.state.index);
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module NavigationAids
+ */
+import "./SheetNavigationAid.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { IModelApp } from "@itwin/core-frontend";
+import { UiComponents } from "@itwin/components-react";
+import { ViewportComponentEvents } from "@itwin/imodel-components-react";
+import { FrontstageManager } from "../frontstage/FrontstageManager";
+import { UiFramework } from "../UiFramework";
+import { ViewUtilities } from "../utils/ViewUtilities";
+import { NavigationAidControl } from "./NavigationAidControl";
+import { CardContainer, SheetsModalFrontstage } from "./SheetsModalFrontstage";
+import { ProgressRadial } from "@itwin/itwinui-react";
+/** A Sheet Navigation Aid control.
+ * @alpha
+ */
+export class SheetNavigationAidControl extends NavigationAidControl {
+    constructor(info, options) {
+        super(info, options);
+        this.reactNode = React.createElement(SheetNavigationAid, { iModelConnection: options.imodel });
+    }
+    getSize() { return "96px"; }
+}
+SheetNavigationAidControl.navigationAidId = "SheetNavigationAid";
+/** A Sheet Navigation Aid.
+ * @alpha
+ */
+export class SheetNavigationAid extends React.Component {
+    constructor(props) {
+        super(props);
+        this._isMounted = false;
+        /** @internal */
+        this.state = {
+            index: 0,
+            sheetData: [],
+        };
+        /** Sets index of newly selected card */
+        this._handleCardSelected = (event) => {
+            event && this.setState({
+                index: event.index,
+            });
+        };
+        /** Updates view to the next lowest index in sheetData */
+        // istanbul ignore next
+        this._handleOnClickLeftArrow = () => {
+            this.setState((prevState) => ({ index: prevState.index <= 0 ? prevState.sheetData.length - 1 : prevState.index - 1 }), async () => this._updateView());
+        };
+        /** Updates view to next highest index in sheetData */
+        // istanbul ignore next
+        this._handleOnClickRightArrow = () => {
+            this.setState((prevState) => ({ index: (prevState.index + 1) % prevState.sheetData.length }), async () => this._updateView());
+        };
+        /** Handles a Viewport change & synchs the index */
+        // istanbul ignore next
+        this._handleSelectedViewportChanged = (args) => {
+            if (args.current) {
+                this._handleViewportChanged(args.current);
+            }
+        };
+        // istanbul ignore next
+        this._handleViewIdChanged = (args) => {
+            if (this._viewport === args.viewport)
+                this._handleViewportChanged(args.viewport);
+        };
+        /** Handles a Viewport change & synchs the index */
+        // istanbul ignore next
+        this._handleViewportChanged = (viewport) => {
+            const className = ViewUtilities.getBisBaseClass(viewport.view.classFullName);
+            if (ViewUtilities.isSheet(className)) {
+                this._viewport = viewport;
+                const viewId = this._viewport.view.id.toString();
+                const index = this.state.sheetData.findIndex((sheetData) => {
+                    return (viewId === sheetData.viewId);
+                });
+                if (index >= 0)
+                    this.setState({ index });
+            }
+        };
+        /** Opens a new SheetsModelFrontstage on sheetName click */
+        // istanbul ignore next
+        this._handleOnClickSheetName = () => {
+            FrontstageManager.openModalFrontstage(this.modalFrontstage());
+        };
+        this._viewport = IModelApp.viewManager.selectedView;
+    }
+    /** Adds listeners when components mounts */
+    async componentDidMount() {
+        this._isMounted = true;
+        CardContainer.onCardSelectedEvent.addListener(this._handleCardSelected);
+        ViewportComponentEvents.onViewIdChangedEvent.addListener(this._handleViewIdChanged);
+        IModelApp.viewManager.onSelectedViewportChanged.addListener(this._handleSelectedViewportChanged);
+        const stateData = await this._setupSheets();
+        if (this._isMounted)
+            this.setState(stateData);
+    }
+    /** Removes listeners when component will unmount */
+    componentWillUnmount() {
+        this._isMounted = false;
+        CardContainer.onCardSelectedEvent.removeListener(this._handleCardSelected);
+        ViewportComponentEvents.onViewIdChangedEvent.removeListener(this._handleViewIdChanged);
+        IModelApp.viewManager.onSelectedViewportChanged.removeListener(this._handleSelectedViewportChanged);
+    }
+    /** Queries for sheet info and sets as sheetData */
+    async _setupSheets() {
+        const stateData = {
+            index: 0,
+            sheetData: [],
+        };
+        // istanbul ignore else
+        if (!this.props.iModelConnection || !this.props.iModelConnection.views.getViewList)
+            return stateData;
+        // istanbul ignore next
+        let viewId = "";
+        // istanbul ignore next
+        if (this._viewport) {
+            viewId = this._viewport.view.id.toString();
+        }
+        // istanbul ignore next
+        const sheets = await this.props.iModelConnection.views.getViewList({ from: "BisCore.SheetViewDefinition" });
+        // istanbul ignore next
+        sheets.forEach((viewSpec, index) => {
+            stateData.sheetData.push({ name: viewSpec.name, viewId: viewSpec.id });
+            if (viewSpec.id === viewId)
+                stateData.index = index;
+        });
+        // istanbul ignore next
+        return stateData;
+    }
+    /** @internal */
+    render() {
+        const name = (this.state.sheetData.length > 0) ? /* istanbul ignore next */ this.state.sheetData[this.state.index].name : "";
+        const sheet = UiFramework.translate("general.sheet");
+        const ofStr = UiComponents.translate("general.of");
+        const leftIndex = this.state.index === 0 ? this.state.sheetData.length - 1 : /* istanbul ignore next */ this.state.index - 1;
+        const rightIndex = this.state.index >= this.state.sheetData.length - 1 ? 0 : /* istanbul ignore next */ this.state.index + 1;
+        const leftTitle = this.state.sheetData[leftIndex] ? /* istanbul ignore next */ this.state.sheetData[leftIndex].name : undefined;
+        const rightTitle = this.state.sheetData[rightIndex] ? /* istanbul ignore next */ this.state.sheetData[rightIndex].name : undefined;
+        let content;
+        // istanbul ignore if
+        if (this.state.sheetData.length > 0) {
+            content = (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "sheet-title" }, sheet),
+                React.createElement("div", { className: "sheet-name", title: name, onClick: this._handleOnClickSheetName, role: "button", tabIndex: -1 }, name),
+                React.createElement("div", { className: "sheet-container" },
+                    React.createElement("div", { className: "sheet-caret icon icon-caret-left", onClick: this._handleOnClickLeftArrow, role: "button", tabIndex: -1, title: leftTitle }),
+                    React.createElement("div", null,
+                        this.state.index + 1,
+                        " ",
+                        ofStr,
+                        " ",
+                        this.state.sheetData.length),
+                    React.createElement("div", { className: "sheet-caret icon icon-caret-right", onClick: this._handleOnClickRightArrow, role: "button", tabIndex: -1, title: rightTitle }))));
+        }
+        else {
+            content = React.createElement(ProgressRadial, { size: "x-small", indeterminate: true });
+        }
+        return (React.createElement("div", { className: classnames("uifw-sheet-navigation", this.props.className), style: this.props.style },
+            React.createElement("div", { className: "gradient" }),
+            content));
+    }
+    /** Updates view to currently set sheet */
+    // istanbul ignore next
+    async _updateView() {
+        const viewState = await this.props.iModelConnection.views.load(this.state.sheetData[this.state.index].viewId);
+        if (this._viewport)
+            this._viewport.changeView(viewState);
+    }
+    /** Creates a new SheetsModalFrontstage */
+    // istanbul ignore next
+    modalFrontstage() {
+        return new SheetsModalFrontstage(this.state.sheetData, this.props.iModelConnection, this.state.index);
+    }
+}
 //# sourceMappingURL=SheetNavigationAid.js.map