@mikezimm/fps-library-v2 1.0.15 → 1.0.16

package/CHANGELOG.md

@@ -5,11 +5,14 @@ npm run build
 npm version major/minor/patch
 npm publish --access=public
 
-npm install @mikezimm/fps-library-v2@1.0.15
+npm install @mikezimm/fps-library-v2@1.0.16
 
 
 # Changelog
 
+## 1.0.16 - 2022-Dec-11
+- clean up build errors - moved temp files back to npmFunctions so could build
+
 ## 1.0.15 - 2022-Dec-11
 - More cleanup imports
 

package/lib/banner/bannerX/BannerContent.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IWebpartBannerProps } from '../mainReact/IWebpartBannerProps';
+export declare function mainBannerContent(bannerProps: IWebpartBannerProps, forceNarrowStyles: boolean, nearBannerElementsArray: JSX.Element[], farBannerElementsArray: JSX.Element[], showSettings: boolean, _openPanel: any, _togglePropsHelp: any): JSX.Element;
+//# sourceMappingURL=BannerContent.d.ts.map

package/lib/banner/bannerX/BannerContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerContent.d.ts","sourceRoot":"","sources":["../../../src/banner/bannerX/BannerContent.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAMvE,wBAAgB,iBAAiB,CAAE,WAAW,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,OAAO,EAC3F,uBAAuB,EAAE,GAAG,CAAC,OAAO,EAAE,EAAE,sBAAsB,EAAE,GAAG,CAAC,OAAO,EAAE,EAC7E,YAAY,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,gBAAgB,EAAE,GAAG,eA0KhE"}

package/lib/banner/bannerX/BannerContent.js

@@ -0,0 +1,151 @@
+import * as React from 'react';
+import { DisplayMode } from '../../common/interfaces/@msft/1.15.2/displayMode';
+import { createStyleFromString } from '../../logic/Strings/reactCSS';
+import * as links from '../../components/atoms/Links/LinksRepos';
+import { makeInfoElement } from './InfoElement';
+import { bannerSettingsContent } from '../components/Gear/bannerGearFunctions';
+export function mainBannerContent(bannerProps, forceNarrowStyles, nearBannerElementsArray, farBannerElementsArray, showSettings, _openPanel, _togglePropsHelp) {
+    // const { showTricks, context, keySiteProps, bannerWidth } = bannerProps;
+    let settingsContent = null;
+    let settingsPage = null;
+    if (bannerProps.showBannerGear === true) {
+        settingsPage = bannerSettingsContent(bannerProps, forceNarrowStyles);
+        settingsContent = settingsPage.content;
+    }
+    const showSettingsAsPivot = forceNarrowStyles === true || (settingsPage === null || settingsPage === void 0 ? void 0 : settingsPage.showSettingsAsPivot) === true ? true : false;
+    /***
+   *    .d8888. db    db d88888b d88888b d888888b db    db
+   *    88'  YP 88    88 88'     88'       `88'   `8b  d8'
+   *    `8bo.   88    88 88ooo   88ooo      88     `8bd8'
+   *      `Y8b. 88    88 88~~~   88~~~      88     .dPYb.
+   *    db   8D 88b  d88 88      88        .88.   .8P  Y8.
+   *    `8888Y' ~Y8888P' YP      YP      Y888888P YP    YP
+   *
+   *
+   */
+    const bannerSuffix = '';
+    //Exclude the props.bannerProps.title if the webpart is narrow to make more responsive
+    let bannerTitle = bannerProps.bannerWidth < 900 ? bannerProps.title : `${bannerProps.title} ${(bannerSuffix ? ' - ' + bannerSuffix : '')}`;
+    if (bannerTitle === '') {
+        bannerTitle = 'ignore';
+    }
+    if (bannerProps.displayMode === DisplayMode.Edit) {
+        bannerTitle += '';
+    }
+    /***
+     *    d8888b.  .d8b.  d8b   db       .o88b.  .d88b.  d8b   db d888888b d88888b d8b   db d888888b
+     *    88  `8D d8' `8b 888o  88      d8P  Y8 .8P  Y8. 888o  88 `~~88~~' 88'     888o  88 `~~88~~'
+     *    88oooY' 88ooo88 88V8o 88      8P      88    88 88V8o 88    88    88ooooo 88V8o 88    88
+     *    88~~~b. 88~~~88 88 V8o88      8b      88    88 88 V8o88    88    88~~~~~ 88 V8o88    88
+     *    88   8D 88   88 88  V888      Y8b  d8 `8b  d8' 88  V888    88    88.     88  V888    88
+     *    Y8888P' YP   YP VP   V8P       `Y88P'  `Y88P'  VP   V8P    YP    Y88888P VP   V8P    YP
+     *
+     *
+     */
+    //  Estimated width pixels used by banner.  Used to determine max size of the title component.
+    let usedWidth = 40; //20px padding on outside of all elements
+    usedWidth += nearBannerElementsArray.length * 43 + farBannerElementsArray.length * 43; //Add 45px per icon button
+    // usedWidth += 40; //Padding between near/far elements and the text part of heading
+    const remainingWidth = bannerProps.bannerWidth - usedWidth - 40;
+    let moreInfoText = bannerProps.infoElement ? bannerProps.infoElement : 'More Information';
+    let bannerTitleText = bannerTitle && bannerTitle.length > 0 ? bannerTitle.trim() : 'FPS Webpart';
+    const textWidth = (moreInfoText.length + bannerTitleText.length) * 19 + 40; //characters * 19px + 40 padding
+    if (bannerTitleText && ['hide', 'ignore', 'empty'].indexOf(bannerTitleText.toLowerCase()) >= 0) {
+        bannerTitleText = '';
+    }
+    //  If space between < estimated space needed, apply ratio, else just leave large on both sides so the math works.
+    const moreInfoRatio = textWidth > remainingWidth ? moreInfoText.length / (moreInfoText.length + bannerTitleText.length) : .7;
+    const titleRatio = textWidth > remainingWidth ? 1 - moreInfoRatio : .7;
+    if (bannerProps.bannerWidth < 700 && moreInfoText.length > 5) {
+        moreInfoText = moreInfoText === 'More Information' ? 'Info' : moreInfoText.substring(0, 5) + '...';
+    }
+    // usedWidth += 18 * bannerTitleText.length; //Est 18px per character of title
+    const hasNear = nearBannerElementsArray.length > 0 ? true : false;
+    const hasFar = farBannerElementsArray.length > 0 ? true : false;
+    const hasNearOrFar = hasNear === true || hasFar === true ? true : false;
+    let bannerStyle = {};
+    if (bannerProps.bannerReactCSS) {
+        bannerStyle = bannerProps.bannerReactCSS;
+    }
+    else if (bannerProps.styleString) {
+        bannerStyle = createStyleFromString(bannerProps.styleString, { background: 'green' }, 'bannerStyle in banner/component.tsx ~ 81');
+    }
+    if (!bannerStyle.height) {
+        bannerStyle.height = '35px';
+    }
+    if (!bannerStyle.paddingLeft) {
+        bannerStyle.paddingLeft = '20px';
+    }
+    if (!bannerStyle.paddingRight) {
+        bannerStyle.paddingRight = '20px';
+    }
+    if (hasNearOrFar === false) {
+        bannerStyle.cursor = 'pointer';
+    }
+    const classNames = ['container', bannerProps.hoverEffect === true ? 'opacity' : null, 'flex-container'].join(' ');
+    //  On clicks need to be defined like this and only put on specific elements in certain cases.
+    //  OR ELSE they will all get fired messing up panel open
+    const bannerOnClick = hasNearOrFar !== true ? _openPanel : undefined;
+    const titleInfoOnClick = hasNearOrFar === true ? _openPanel : undefined;
+    const titleInfoCursor = hasNearOrFar === true ? 'pointer' : undefined;
+    const styleFlexElements = { padding: '10px', cursor: titleInfoCursor };
+    //Added for https://github.com/mikezimm/PageInfo/issues/30
+    const isPinned = bannerProps.domElement && bannerProps.domElement.offsetParent && bannerProps.domElement.offsetParent.classList.contains('pinMeWebPartDefault') ? true : false;
+    const isPageInfo = bannerProps.gitHubRepo.desc === links.gitRepoPageInfoSmall.desc ? true : false;
+    const maxWidth = isPinned === true || isPageInfo === true ? '200px' : titleRatio * remainingWidth;
+    const styleLeftTitle = { padding: '10px', cursor: titleInfoCursor, maxWidth: maxWidth, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
+    const styleRightTitle = { padding: '10px', cursor: titleInfoCursor, maxWidth: moreInfoRatio * remainingWidth, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
+    /***
+   *    d888888b d8b   db d88888b  .d88b.       d88888b db      d88888b .88b  d88. d88888b d8b   db d888888b
+   *      `88'   888o  88 88'     .8P  Y8.      88'     88      88'     88'YbdP`88 88'     888o  88 `~~88~~'
+   *       88    88V8o 88 88ooo   88    88      88ooooo 88      88ooooo 88  88  88 88ooooo 88V8o 88    88
+   *       88    88 V8o88 88~~~   88    88      88~~~~~ 88      88~~~~~ 88  88  88 88~~~~~ 88 V8o88    88
+   *      .88.   88  V888 88      `8b  d8'      88.     88booo. 88.     88  88  88 88.     88  V888    88
+   *    Y888888P VP   V8P YP       `Y88P'       Y88888P Y88888P Y88888P YP  YP  YP Y88888P VP   V8P    YP
+   *
+   *
+   */
+    const infoElement = makeInfoElement(bannerProps, moreInfoText, styleRightTitle, titleInfoOnClick, _togglePropsHelp);
+    /***
+     *    d8888b. db    db d888888b db      d8888b.
+     *    88  `8D 88    88   `88'   88      88  `8D
+     *    88oooY' 88    88    88    88      88   88
+     *    88~~~b. 88    88    88    88      88   88
+     *    88   8D 88b  d88   .88.   88booo. 88  .8D
+     *    Y8888P' ~Y8888P' Y888888P Y88888P Y8888D'
+     *
+     *
+     *    db      d88888b d88888b d888888b      d8888b. d888888b  d888b  db   db d888888b
+     *    88      88'     88'     `~~88~~'      88  `8D   `88'   88' Y8b 88   88 `~~88~~'
+     *    88      88ooooo 88ooo      88         88oobY'    88    88      88ooo88    88
+     *    88      88~~~~~ 88~~~      88         88`8b      88    88  ooo 88~~~88    88
+     *    88booo. 88.     88         88         88 `88.   .88.   88. ~8~ 88   88    88
+     *    Y88888P Y88888P YP         YP         88   YD Y888888P  Y888P  YP   YP    YP
+     *
+     *
+     */
+    const appendTitle = bannerProps.appendTitle ? bannerProps.appendTitle : '';
+    const bannerLeft = nearBannerElementsArray.length === 0 ? React.createElement("div", { style: styleFlexElements, onClick: titleInfoOnClick },
+        " ",
+        bannerTitleText,
+        " ") :
+        React.createElement("div", { className: 'flex-left-nowrap-start' },
+            nearBannerElementsArray,
+            React.createElement("div", { style: styleLeftTitle, onClick: titleInfoOnClick, title: bannerTitleText },
+                " ",
+                bannerTitleText,
+                " ",
+                appendTitle,
+                " "));
+    const bannerRight = farBannerElementsArray.length === 0 && infoElement.length === 0 ? React.createElement("div", { style: styleFlexElements, onClick: titleInfoOnClick }, moreInfoText) :
+        React.createElement("div", { className: 'flex-left-nowrap-start' }, [...farBannerElementsArray, ...infoElement,]);
+    let showSettingStyle = showSettingsAsPivot === true ? 'show-settings show-settings-pivot' : 'show-settings show-settings-flex';
+    console.log('showSettingStyle ~ 326', showSettingStyle);
+    let bannerContent = React.createElement("div", null,
+        React.createElement("div", { className: classNames, style: bannerStyle, onClick: bannerOnClick },
+            bannerLeft,
+            bannerRight),
+        React.createElement("div", { className: showSettings ? showSettingStyle : 'hide-settings', style: {} }, settingsContent));
+    return bannerContent;
+}
+//# sourceMappingURL=BannerContent.js.map

package/lib/banner/bannerX/BannerContent.js.map

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

package/lib/banner/bannerX/FetchBannerX.d.ts

@@ -0,0 +1,101 @@
+import * as React from 'react';
+/***
+ *    d88888b d8888b. .d8888.      d8888b. d8888b. d88888b .d8888. d88888b d888888b .d8888.
+ *    88'     88  `8D 88'  YP      88  `8D 88  `8D 88'     88'  YP 88'     `~~88~~' 88'  YP
+ *    88ooo   88oodD' `8bo.        88oodD' 88oobY' 88ooooo `8bo.   88ooooo    88    `8bo.
+ *    88~~~   88~~~     `Y8b.      88~~~   88`8b   88~~~~~   `Y8b. 88~~~~~    88      `Y8b.
+ *    88      88      db   8D      88      88 `88. 88.     db   8D 88.        88    db   8D
+ *    YP      88      `8888Y'      88      88   YD Y88888P `8888Y' Y88888P    YP    `8888Y'
+ *
+ *
+ */
+import { IPinMeState } from '../features/PinMe/Interfaces';
+import { ILoadPerformance } from '../../components/molecules/Performance/IPerformance';
+import { IBannerPages, IWebpartBannerProps } from '../mainReact/IWebpartBannerProps';
+import { ISpecialMessage } from '../components/SpecialBanner/interface';
+import { IFPSCorePinMeReactComponentState } from '../mainReact/ReactComponentState';
+import { PanelType } from 'office-ui-fabric-react';
+export interface IFetchBannerXProps {
+    bannerProps: IWebpartBannerProps;
+    parentState: IFPSCorePinMeReactComponentState;
+    appendTitle?: string | JSX.Element;
+    WebPartHelpPivots: JSX.Element[];
+    SpecialMessage?: ISpecialMessage;
+    contentPages: IBannerPages;
+    nearBannerElementsArray: Element[];
+    farBannerElementsArray: Element[];
+    updatePinState: any;
+    pinState: IPinMeState;
+    refreshId?: string;
+    replacePanelHTML?: JSX.Element;
+    bonusHTML1?: JSX.Element;
+    panelPerformance?: ILoadPerformance;
+    bonusHTML2?: any;
+}
+export interface IFetchBannerXState {
+    showPanel: boolean;
+    showSettings: boolean;
+    selectedKey: string;
+    showPropsHelp: boolean;
+    panelType: PanelType;
+    expandoramicMode: boolean;
+}
+export default class FetchBanner extends React.Component<IFetchBannerXProps, IFetchBannerXState> {
+    private _webPartHelpElement;
+    private makeLargerCmdStyles;
+    private pimMeCmdStyles;
+    /***
+     *    d8b   db d88888b  .d8b.  d8888b.      d88888b  .d8b.  d8888b.      d88888b db      d88888b
+     *    888o  88 88'     d8' `8b 88  `8D      88'     d8' `8b 88  `8D      88'     88      88'
+     *    88V8o 88 88ooooo 88ooo88 88oobY'      88ooo   88ooo88 88oobY'      88ooooo 88      88ooooo
+     *    88 V8o88 88~~~~~ 88~~~88 88`8b        88~~~   88~~~88 88`8b        88~~~~~ 88      88~~~~~
+     *    88  V888 88.     88   88 88 `88.      88      88   88 88 `88.      88.     88booo. 88.
+     *    VP   V8P Y88888P YP   YP 88   YD      YP      YP   YP 88   YD      Y88888P Y88888P Y88888P
+     *
+     *
+     */
+    private nearBannerElements;
+    private buildNearBannerElements;
+    private buildFarBannerElements;
+    /***
+    *     .o88b.  .d88b.  d8b   db .d8888. d888888b d8888b. db    db  .o88b. d888888b  .d88b.  d8888b.
+    *    d8P  Y8 .8P  Y8. 888o  88 88'  YP `~~88~~' 88  `8D 88    88 d8P  Y8 `~~88~~' .8P  Y8. 88  `8D
+    *    8P      88    88 88V8o 88 `8bo.      88    88oobY' 88    88 8P         88    88    88 88oobY'
+    *    8b      88    88 88 V8o88   `Y8b.    88    88`8b   88    88 8b         88    88    88 88`8b
+    *    Y8b  d8 `8b  d8' 88  V888 db   8D    88    88 `88. 88b  d88 Y8b  d8    88    `8b  d8' 88 `88.
+    *     `Y88P'  `Y88P'  VP   V8P `8888Y'    YP    88   YD ~Y8888P'  `Y88P'    YP     `Y88P'  88   YD
+    *
+    *
+    */
+    constructor(props: IFetchBannerXProps);
+    componentDidMount(): void;
+    /***
+   *         d8888b. d888888b d8888b.      db    db d8888b. d8888b.  .d8b.  d888888b d88888b
+   *         88  `8D   `88'   88  `8D      88    88 88  `8D 88  `8D d8' `8b `~~88~~' 88'
+   *         88   88    88    88   88      88    88 88oodD' 88   88 88ooo88    88    88ooooo
+   *         88   88    88    88   88      88    88 88~~~   88   88 88~~~88    88    88~~~~~
+   *         88  .8D   .88.   88  .8D      88b  d88 88      88  .8D 88   88    88    88.
+   *         Y8888D' Y888888P Y8888D'      ~Y8888P' 88      Y8888D' YP   YP    YP    Y88888P
+   *
+   *
+   */
+    componentDidUpdate(prevProps: IFetchBannerXProps): boolean;
+    /***
+     *    d8888b. d88888b d8b   db d8888b. d88888b d8888b.
+     *    88  `8D 88'     888o  88 88  `8D 88'     88  `8D
+     *    88oobY' 88ooooo 88V8o 88 88   88 88ooooo 88oobY'
+     *    88`8b   88~~~~~ 88 V8o88 88   88 88~~~~~ 88`8b
+     *    88 `88. 88.     88  V888 88  .8D 88.     88 `88.
+     *    88   YD Y88888P VP   V8P Y8888D' Y88888P 88   YD
+     *
+     *
+     */
+    render(): React.ReactElement<IFetchBannerXProps>;
+    private _toggleExpando;
+    private showSettings;
+    private _closePanel;
+    private _openPanel;
+    private _panelWidth;
+    private _togglePropsHelp;
+}
+//# sourceMappingURL=FetchBannerX.d.ts.map

package/lib/banner/bannerX/FetchBannerX.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FetchBannerX.d.ts","sourceRoot":"","sources":["../../../src/banner/bannerX/FetchBannerX.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;GASG;AAGH,OAAO,EAAe,WAAW,EAAc,MAAM,8BAA8B,CAAC;AAEpF,OAAO,EAAE,gBAAgB,EAAE,MAAM,qDAAqD,CAAC;AAEvF,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAG,MAAM,kCAAkC,CAAC;AACtF,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAExE,OAAO,EAAE,gCAAgC,EAAE,MAAM,kCAAkC,CAAC;AAIpF,OAAO,EAAS,SAAS,EAAE,MAAM,wBAAwB,CAAC;AA6B1D,MAAM,WAAW,kBAAkB;IAE/B,WAAW,EAAK,mBAAmB,CAAC;IACpC,WAAW,EAAK,gCAAgC,CAAC;IAEjD,WAAW,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACnC,iBAAiB,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IACjC,cAAc,CAAC,EAAE,eAAe,CAAC;IAEjC,YAAY,EAAG,YAAY,CAAC;IAE5B,uBAAuB,EAAE,OAAO,EAAE,CAAC;IACnC,sBAAsB,EAAE,OAAO,EAAE,CAAC;IAElC,cAAc,EAAE,GAAG,CAAC;IACpB,QAAQ,EAAE,WAAW,CAAC;IAEtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,UAAU,CAAC,EAAE,GAAG,CAAC;CAEpB;AAED,MAAM,WAAW,kBAAkB;IAEjC,SAAS,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IAEpB,aAAa,EAAE,OAAO,CAAC;IAEvB,SAAS,EAAE,SAAS,CAAC;IAErB,gBAAgB,EAAE,OAAO,CAAC;CAG1B;AAED,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;IAG9F,OAAO,CAAC,mBAAmB,CAAmF;IAE9G,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,cAAc,CAAoC;IAG5D;;;;;;;;;OASG;IAED,OAAO,CAAC,kBAAkB,CAAkC;IAE5D,OAAO,CAAC,uBAAuB;IAK/B,OAAO,CAAC,sBAAsB;IAS9B;;;;;;;;;MASE;gBAGiB,KAAK,EAAC,kBAAkB;IAiBpC,iBAAiB;IAUtB;;;;;;;;;KASC;IAEI,kBAAkB,CAAC,SAAS,EAAE,kBAAkB;IAmCzD;;;;;;;;;OASG;IAGM,MAAM,IAAI,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC;IA2NvD,OAAO,CAAC,cAAc;IAetB,OAAO,CAAC,YAAY;IAErB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,gBAAgB;CAKxB"}

package/lib/banner/bannerX/FetchBannerX.js

@@ -0,0 +1,340 @@
+import * as React from 'react';
+import { DisplayMode } from '@microsoft/sp-core-library';
+import { FPSPinMe, getDefaultFPSPinState, } from '../features/PinMe/FPSPinMenu';
+import { updateFarElementsPinMe } from './PinFunctions';
+import { getWebPartHelpElementX } from '../../common/PropPaneHelp/pages/PropPaneHelp';
+import { createSpecialElement } from '../components/SpecialBanner/component';
+import { Panel, PanelType } from 'office-ui-fabric-react';
+import { getMinPanel } from './MinPanel';
+import { getFullPanel, pivotHeading0, pivotHeadingX } from './FullPanel';
+import { mainBannerContent } from './BannerContent';
+import { getForceNarrow } from './Near/CheckNarrow';
+import { updateNearElements } from './Near/updateNearElements';
+import { setExpandoRamicMode } from '../features/Expando/functions';
+// import { IFieldPanelProps } from '../../components/molecules/FieldPanel/IFieldPanelProps';
+require('@mikezimm/fps-styles/dist/banner.css');
+/***
+ *    db       .d88b.   .o88b.  .d8b.  db
+ *    88      .8P  Y8. d8P  Y8 d8' `8b 88
+ *    88      88    88 8P      88ooo88 88
+ *    88      88    88 8b      88~~~88 88
+ *    88booo. `8b  d8' Y8b  d8 88   88 88booo.
+ *    Y88888P  `Y88P'   `Y88P' YP   YP Y88888P
+ *
+ *
+ */
+//Use this to add more console.logs for this component
+const consoleFunctions = true;
+export default class FetchBanner extends React.Component {
+    makeLargerCmdStyles() {
+        const smaller = JSON.parse(JSON.stringify(this.props.bannerProps.bannerCmdReactCSS));
+        smaller.fontSize = 'larger';
+        smaller.marginRight = '';
+        return smaller;
+    }
+    buildNearBannerElements() {
+        const elements = this.props.nearBannerElementsArray ? this.props.nearBannerElementsArray : [];
+        return elements;
+    }
+    buildFarBannerElements() {
+        const farElements = this.props.farBannerElementsArray ? this.props.farBannerElementsArray : [];
+        if (this.props.bannerProps.showTricks === true) {
+            farElements.push(null);
+        }
+        return farElements;
+    }
+    /***
+    *     .o88b.  .d88b.  d8b   db .d8888. d888888b d8888b. db    db  .o88b. d888888b  .d88b.  d8888b.
+    *    d8P  Y8 .8P  Y8. 888o  88 88'  YP `~~88~~' 88  `8D 88    88 d8P  Y8 `~~88~~' .8P  Y8. 88  `8D
+    *    8P      88    88 88V8o 88 `8bo.      88    88oobY' 88    88 8P         88    88    88 88oobY'
+    *    8b      88    88 88 V8o88   `Y8b.    88    88`8b   88    88 8b         88    88    88 88`8b
+    *    Y8b  d8 `8b  d8' 88  V888 db   8D    88    88 `88. 88b  d88 Y8b  d8    88    `8b  d8' 88 `88.
+    *     `Y88P'  `Y88P'  VP   V8P `8888Y'    YP    88   YD ~Y8888P'  `Y88P'    YP     `Y88P'  88   YD
+    *
+    *
+    */
+    constructor(props) {
+        super(props);
+        this._webPartHelpElement = getWebPartHelpElementX(this.props.WebPartHelpPivots, this.props.bannerProps);
+        this.pimMeCmdStyles = null;
+        /***
+         *    d8b   db d88888b  .d8b.  d8888b.      d88888b  .d8b.  d8888b.      d88888b db      d88888b
+         *    888o  88 88'     d8' `8b 88  `8D      88'     d8' `8b 88  `8D      88'     88      88'
+         *    88V8o 88 88ooooo 88ooo88 88oobY'      88ooo   88ooo88 88oobY'      88ooooo 88      88ooooo
+         *    88 V8o88 88~~~~~ 88~~~88 88`8b        88~~~   88~~~88 88`8b        88~~~~~ 88      88~~~~~
+         *    88  V888 88.     88   88 88 `88.      88      88   88 88 `88.      88.     88booo. 88.
+         *    VP   V8P Y88888P YP   YP 88   YD      YP      YP   YP 88   YD      Y88888P Y88888P Y88888P
+         *
+         *
+         */
+        this.nearBannerElements = this.buildNearBannerElements();
+        if (consoleFunctions === true)
+            console.log('FetchBannerElement ~ constructor');
+        const expandoProps = this.props.bannerProps.expandoProps;
+        this.state = {
+            showPanel: false,
+            // keySiteProps: keySiteProps,
+            selectedKey: this.props.replacePanelHTML ? pivotHeadingX : pivotHeading0,
+            panelType: PanelType.medium,
+            showSettings: false,
+            expandoramicMode: expandoProps.enableExpandoramic === true && expandoProps.expandoDefault === true ? true : false,
+            // renderCount: 0,
+            showPropsHelp: false,
+        };
+    }
+    componentDidMount() {
+        if (consoleFunctions === true)
+            console.log('FetchBannerElement ~ componentDidMount');
+        this.pimMeCmdStyles = this.makeLargerCmdStyles();
+        //Copied from FPSPageInfo.tsx componentDidMount
+        const { displayMode, fpsPinMenu } = this.props.bannerProps;
+        const tempPinState = displayMode === DisplayMode.Edit ? 'normal' : this.props.pinState;
+        FPSPinMe(fpsPinMenu.domElement, tempPinState, null, false, true, null, fpsPinMenu.pageLayout, displayMode);
+    }
+    //        
+    /***
+   *         d8888b. d888888b d8888b.      db    db d8888b. d8888b.  .d8b.  d888888b d88888b
+   *         88  `8D   `88'   88  `8D      88    88 88  `8D 88  `8D d8' `8b `~~88~~' 88'
+   *         88   88    88    88   88      88    88 88oodD' 88   88 88ooo88    88    88ooooo
+   *         88   88    88    88   88      88    88 88~~~   88   88 88~~~88    88    88~~~~~
+   *         88  .8D   .88.   88  .8D      88b  d88 88      88  .8D 88   88    88    88.
+   *         Y8888D' Y888888P Y8888D'      ~Y8888P' 88      Y8888D' YP   YP    YP    Y88888P
+   *
+   *
+   */
+    componentDidUpdate(prevProps) {
+        if (consoleFunctions === true)
+            console.log('FetchBannerElement ~ componentDidUpdate');
+        const { displayMode, fpsPinMenu, } = this.props.bannerProps;
+        const pinStatus = getDefaultFPSPinState(prevProps.bannerProps.fpsPinMenu, fpsPinMenu, displayMode);
+        this.pimMeCmdStyles = this.makeLargerCmdStyles();
+        let refresh = false;
+        if (pinStatus.refresh === true) {
+            FPSPinMe(fpsPinMenu.domElement, pinStatus.defPinState, null, false, true, null, fpsPinMenu.pageLayout, displayMode);
+        }
+        if (JSON.stringify(prevProps.panelPerformance) !== JSON.stringify(this.props.panelPerformance)) {
+            refresh = true;
+        }
+        else if (prevProps.bonusHTML1 !== this.props.bonusHTML1) {
+            refresh = true;
+        }
+        else if (prevProps.bonusHTML2 !== this.props.bonusHTML2) {
+            refresh = true;
+        }
+        else if (typeof prevProps.appendTitle !== typeof this.props.appendTitle) {
+            refresh = true;
+        }
+        else if (typeof prevProps.appendTitle === 'string' && typeof this.props.appendTitle === 'string' && prevProps.appendTitle && this.props.appendTitle) {
+            refresh = true;
+        }
+        if (refresh === true)
+            this._webPartHelpElement = getWebPartHelpElementX(this.props.WebPartHelpPivots, this.props.bannerProps);
+        return refresh;
+    }
+    /***
+     *    d8888b. d88888b d8b   db d8888b. d88888b d8888b.
+     *    88  `8D 88'     888o  88 88  `8D 88'     88  `8D
+     *    88oobY' 88ooooo 88V8o 88 88   88 88ooooo 88oobY'
+     *    88`8b   88~~~~~ 88 V8o88 88   88 88~~~~~ 88`8b
+     *    88 `88. 88.     88  V888 88  .8D 88.     88 `88.
+     *    88   YD Y88888P VP   V8P Y8888D' Y88888P 88   YD
+     *
+     *
+     */
+    render() {
+        if (consoleFunctions === true)
+            console.log('FetchBannerElement ~ render');
+        if (this.props.bannerProps.showBanner !== true) {
+            return (React.createElement("div", null));
+        }
+        else {
+            const { bannerProps, } = this.props;
+            const { displayMode, fpsPinMenu, } = this.props.bannerProps;
+            const { showBanner, showTricks, showRepoLinks } = this.props.bannerProps;
+            const showPanel = this.state.showPanel;
+            const showSettings = this.state.showSettings;
+            const forceNarrowStyles = getForceNarrow(this.props.pinState, this.props.updatePinState);
+            const farBannerElementsArray = updateFarElementsPinMe({ farBannerElementsArray: this.buildFarBannerElements(),
+                displayMode: displayMode, fpsPinMenu: fpsPinMenu, pinState: this.props.pinState, updatePinState: this.props.updatePinState, pimMeCmdStyles: this.pimMeCmdStyles });
+            const nearBannerElementsArray = updateNearElements(this.nearBannerElements, this.props.bannerProps, this.showSettings.bind(this), this._toggleExpando.bind(this));
+            /***
+           *    d8888b.  .d8b.  d8b   db d8b   db d88888b d8888b.      d88888b db      d88888b .88b  d88. d88888b d8b   db d888888b
+           *    88  `8D d8' `8b 888o  88 888o  88 88'     88  `8D      88'     88      88'     88'YbdP`88 88'     888o  88 `~~88~~'
+           *    88oooY' 88ooo88 88V8o 88 88V8o 88 88ooooo 88oobY'      88ooooo 88      88ooooo 88  88  88 88ooooo 88V8o 88    88
+           *    88~~~b. 88~~~88 88 V8o88 88 V8o88 88~~~~~ 88`8b        88~~~~~ 88      88~~~~~ 88  88  88 88~~~~~ 88 V8o88    88
+           *    88   8D 88   88 88  V888 88  V888 88.     88 `88.      88.     88booo. 88.     88  88  88 88.     88  V888    88
+           *    Y8888P' YP   YP VP   V8P VP   V8P Y88888P 88   YD      Y88888P Y88888P Y88888P YP  YP  YP Y88888P VP   V8P    YP
+           *
+           *
+           */
+            const bannerContent = mainBannerContent(bannerProps, forceNarrowStyles, nearBannerElementsArray, farBannerElementsArray, showSettings, this._openPanel.bind(this), this._togglePropsHelp.bind(this));
+            /***
+             *     d888b  d88888b d888888b      .88b  d88. d888888b d8b   db      d8888b.  .d8b.  d8b   db d88888b db
+             *    88' Y8b 88'     `~~88~~'      88'YbdP`88   `88'   888o  88      88  `8D d8' `8b 888o  88 88'     88
+             *    88      88ooooo    88         88  88  88    88    88V8o 88      88oodD' 88ooo88 88V8o 88 88ooooo 88
+             *    88  ooo 88~~~~~    88         88  88  88    88    88 V8o88      88~~~   88~~~88 88 V8o88 88~~~~~ 88
+             *    88. ~8~ 88.        88         88  88  88   .88.   88  V888      88      88   88 88  V888 88.     88booo.
+             *     Y888P  Y88888P    YP         YP  YP  YP Y888888P VP   V8P      88      YP   YP VP   V8P Y88888P Y88888P
+             *
+             *
+             */
+            let panelContent = null;
+            if (showPanel === true && this.props.bannerProps.showFullPanel !== true) {
+                panelContent = getMinPanel(this.props.bannerProps);
+                /***
+                 *     d888b  d88888b d888888b      d88888b db    db db      db           d8888b.  .d8b.  d8b   db d88888b db
+                 *    88' Y8b 88'     `~~88~~'      88'     88    88 88      88           88  `8D d8' `8b 888o  88 88'     88
+                 *    88      88ooooo    88         88ooo   88    88 88      88           88oodD' 88ooo88 88V8o 88 88ooooo 88
+                 *    88  ooo 88~~~~~    88         88~~~   88    88 88      88           88~~~   88~~~88 88 V8o88 88~~~~~ 88
+                 *    88. ~8~ 88.        88         88      88b  d88 88booo. 88booo.      88      88   88 88  V888 88.     88booo.
+                 *     Y888P  Y88888P    YP         YP      ~Y8888P' Y88888P Y88888P      88      YP   YP VP   V8P Y88888P Y88888P
+                 *
+                 *
+                 */
+            }
+            else if (showPanel === true) {
+                panelContent = getFullPanel(this.props.bannerProps, this.state.selectedKey);
+            }
+            /***
+             *     .o88b.  .d88b.  d8b   db .d8888. d888888b      d8888b.  .d8b.  d8b   db d88888b db
+             *    d8P  Y8 .8P  Y8. 888o  88 88'  YP `~~88~~'      88  `8D d8' `8b 888o  88 88'     88
+             *    8P      88    88 88V8o 88 `8bo.      88         88oodD' 88ooo88 88V8o 88 88ooooo 88
+             *    8b      88    88 88 V8o88   `Y8b.    88         88~~~   88~~~88 88 V8o88 88~~~~~ 88
+             *    Y8b  d8 `8b  d8' 88  V888 db   8D    88         88      88   88 88  V888 88.     88booo.
+             *     `Y88P'  `Y88P'  VP   V8P `8888Y'    YP         88      YP   YP VP   V8P Y88888P Y88888P
+             *
+             *
+             */
+            const bannerPanel = React.createElement("div", null,
+                React.createElement(Panel, { isOpen: showPanel, 
+                    // this prop makes the panel non-modal
+                    isBlocking: true, onDismiss: this._closePanel.bind(this), closeButtonAriaLabel: "Close", type: this.state.panelType, isLightDismiss: true }, panelContent));
+            /***
+             *    .d8888. d8888b. d88888b  .o88b. d888888b  .d8b.  db
+             *    88'  YP 88  `8D 88'     d8P  Y8   `88'   d8' `8b 88
+             *    `8bo.   88oodD' 88ooooo 8P         88    88ooo88 88
+             *      `Y8b. 88~~~   88~~~~~ 8b         88    88~~~88 88
+             *    db   8D 88      88.     Y8b  d8   .88.   88   88 88booo.
+             *    `8888Y' 88      Y88888P  `Y88P' Y888888P YP   YP Y88888P
+             *
+             *
+             */
+            let SpecialElement = this.props.SpecialMessage ? createSpecialElement(this.props.SpecialMessage) : undefined;
+            /***
+       *    d8888b. d8888b.  .d88b.  d8888b. .d8888.      db   db d88888b db      d8888b.
+       *    88  `8D 88  `8D .8P  Y8. 88  `8D 88'  YP      88   88 88'     88      88  `8D
+       *    88oodD' 88oobY' 88    88 88oodD' `8bo.        88ooo88 88ooooo 88      88oodD'
+       *    88~~~   88`8b   88    88 88~~~     `Y8b.      88~~~88 88~~~~~ 88      88~~~
+       *    88      88 `88. `8b  d8' 88      db   8D      88   88 88.     88booo. 88
+       *    88      88   YD  `Y88P'  88      `8888Y'      YP   YP Y88888P Y88888P 88
+       *
+       *
+       */
+            let propsHelp = null;
+            if (this._webPartHelpElement) {
+                propsHelp = React.createElement("div", { className: this.state.showPropsHelp !== true ? 'fps-pph-hide' : 'fps-pph-show' }, this._webPartHelpElement ? this._webPartHelpElement : null);
+            }
+            /***
+       *    d8888b. d88888b d888888b db    db d8888b. d8b   db
+       *    88  `8D 88'     `~~88~~' 88    88 88  `8D 888o  88
+       *    88oobY' 88ooooo    88    88    88 88oobY' 88V8o 88
+       *    88`8b   88~~~~~    88    88    88 88`8b   88 V8o88
+       *    88 `88. 88.        88    88b  d88 88 `88. 88  V888
+       *    88   YD Y88888P    YP    ~Y8888P' 88   YD VP   V8P
+       *
+       *
+       */
+            return (React.createElement("div", { className: 'banner-component' },
+                SpecialElement,
+                bannerContent,
+                propsHelp,
+                bannerPanel)
+            // //If refreshId={ this.props.parentState.refreshId } -- causes React minified error #85
+            // refreshId={ this.props.refreshId ? this.props.refreshId : '' }
+            // displayMode={ bannerProps.displayMode }
+            // WebPartHelpElement={ this.props.bannerProps.WebPartHelpElement }
+            // SpecialMessage={ this.props.SpecialMessage }
+            // forceNarrowStyles= { forceNarrowStyles }
+            // contentPages= { this.props.contentPages }
+            // feedbackEmail= { bannerProps.feedbackEmail }
+            // FPSUser={ bannerProps.FPSUser }
+            // exportProps={ bannerProps.exportProps }
+            // showBanner={ bannerProps.showBanner }
+            // // Adding this to adjust expected width for when prop pane could be opened
+            // bannerWidth={ ( bannerProps.bannerWidth ) }
+            // pageContext={ bannerProps.pageContext }
+            // pageLayout={ bannerProps.pageLayout }
+            // title ={ bannerTitle }
+            // appendTitle ={ this.props.appendTitle }
+            // panelTitle = { bannerProps.panelTitle }
+            // infoElement = { bannerProps.infoElement }
+            // bannerReactCSS={ bannerProps.bannerReactCSS }
+            // bannerCmdReactCSS={ bannerProps.bannerCmdReactCSS }
+            // showTricks={ bannerProps.showTricks }
+            // showGoToParent={ bannerProps.showGoToParent }
+            // showGoToHome={ bannerProps.showGoToHome }
+            // onHomePage={ bannerProps.onHomePage }
+            // webpartHistory={ bannerProps.webpartHistory }
+            // showBannerGear={ bannerProps.showBannerGear }
+            // showFullPanel={ bannerProps.showFullPanel }
+            // replacePanelHTML={ this.props.replacePanelHTML ? this.props.replacePanelHTML : bannerProps.replacePanelHTML }
+            // bonusHTML1={ this.props.bonusHTML1 ? this.props.bonusHTML1 : null }
+            // panelPerformance={ this.props.panelPerformance ? this.props.panelPerformance : null as any }
+            // bonusHTML2={ this.props.bonusHTML2 ? this.props.bonusHTML2 : null }
+            // replacePanelWarning={ bannerProps.replacePanelWarning }
+            // hoverEffect={ bannerProps.hoverEffect }
+            // gitHubRepo={ bannerProps.gitHubRepo }
+            // earyAccess={ bannerProps.earyAccess }
+            // wideToggle={ bannerProps.wideToggle }
+            // nearElements = { this.nearBannerElements }
+            // farElements = { farBannerElementsArray }
+            // showRepoLinks={ bannerProps.showRepoLinks }
+            // showExport={ bannerProps.showExport }
+            // //2022-02-17:  Added these for expandoramic mode
+            // domElement = { bannerProps.domElement }
+            // enableExpandoramic = { bannerProps.enableExpandoramic }
+            // expandoDefault = { bannerProps.expandoDefault }
+            // expandoStyle = { bannerProps.expandoStyle}
+            // expandAlert = { bannerProps.expandAlert }
+            // expandConsole = { bannerProps.expandConsole }
+            // expandoPadding = { bannerProps.expandoPadding }
+            // beAUser = { bannerProps.beAUser }
+            // showBeAUserIcon = { bannerProps.showBeAUserIcon }
+            // beAUserFunction={ bannerProps.beAUserFunction }
+            );
+        }
+    }
+    _toggleExpando() {
+        const { domElement, pageLayout } = this.props.bannerProps;
+        const { expandoStyle, expandAlert, expandConsole, expandoPadding } = this.props.bannerProps.expandoProps;
+        const newMode = this.state.expandoramicMode === true ? false : true;
+        setExpandoRamicMode(domElement, newMode, expandoStyle, expandAlert, expandConsole, expandoPadding, pageLayout);
+        // if ( this.state.expandoramicMode === true ) {
+        this.setState({ expandoramicMode: newMode, });
+        // } else {
+        // this.setState({ showPanel: true,});
+        // }
+    }
+    showSettings() { this.setState({ showSettings: !this.state.showSettings }); }
+    _closePanel() {
+        this.setState({ showPanel: false, });
+    }
+    _openPanel(event) {
+        let textCallback = event.currentTarget.dataset.callback;
+        if (textCallback && textCallback.length > 0) {
+            //Do Nothing
+        }
+        else {
+            this.setState({ showPanel: true, });
+        }
+    }
+    _panelWidth() {
+        let newPanelType = this.state.panelType !== PanelType.medium ? PanelType.medium : PanelType.large;
+        this.setState({ panelType: newPanelType, });
+    }
+    _togglePropsHelp() {
+        let newState = this.state.showPropsHelp === true ? false : true;
+        this.setState({ showPropsHelp: newState });
+    }
+}
+//# sourceMappingURL=FetchBannerX.js.map