@mikezimm/fps-library-v2 1.0.178 → 1.0.179

package/lib/components/atoms/Links/CallBackLinks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallBackLinks.js","sourceRoot":"","sources":["../../../../src/components/atoms/Links/CallBackLinks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,GAAE,MAAM,iCAAiC,CAAC;AAGvD,MAAM,UAAU,GAAwB,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;AAE9I;;;;;;;;GAQG;AACH,8DAA8D;AAC9D,MAAM,UAAU,eAAe,CAAE,KAAa,EAAE,OAA+B,EAAE,SAAkB,KAAK;IACtG,MAAM,QAAQ,GAAW,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,OAAO,CAAE,KAAK,CAAC,WAAW,EAAE,CAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,UAAU,CAAE;IACtI,MAAM,SAAS,GAAW,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5E,MAAM,KAAK,GAAgB,2BAAG,KAAK,EAAE,EAAE,GAAG,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,EAAC,EAC1E,OAAO,EAAE,GAAG,EAAE,GAAG,OAAO,CAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,CAAG,CAAC,CAAC,CAAC;QAC9E,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,YAAY,EAAE,KAAK,EAAC,EAAE,QAAQ,EAAG,QAAQ,GAAK;;QAAE,KAAK,CAAK,CAAC;IAC7E,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,UAAU,CAAE,UAAoB,EAAE,aAAqC;IACrF,MAAM,UAAU,GAAgB,iCAC5B,UAAU,CAAC,GAAG,CAAE,KAAK,CAAC,EAAE,GAAI,OAAO,eAAe,CAAE,KAAK,EAAE,aAAa,CAAG,CAAA,CAAC,CAAC,CAAE,CAC7E,CAAC;IACP,OAAO,UAAU,CAAC;AACpB,CAAC"}

package/lib/components/molecules/FullPageBackGround/FullPageBGParams.d.ts

@@ -0,0 +1,7 @@
+export declare const PageFitOriginal: string;
+export declare const PageFitLayout2: string;
+export declare const SetNormalColor: string;
+export declare const SetWhiteColor: string;
+export declare const ClearAllParams: string;
+export declare const FullPageBGParams: string[];
+//# sourceMappingURL=FullPageBGParams.d.ts.map

package/lib/components/molecules/FullPageBackGround/FullPageBGParams.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullPageBGParams.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/FullPageBackGround/FullPageBGParams.tsx"],"names":[],"mappings":"AACA,eAAO,MAAM,eAAe,EAAE,MAA+B,CAAC;AAC9D,eAAO,MAAM,cAAc,EAAE,MAA8B,CAAC;AAC5D,eAAO,MAAM,cAAc,EAAE,MAAmC,CAAC;AACjE,eAAO,MAAM,aAAa,EAAE,MAAiC,CAAC;AAC9D,eAAO,MAAM,cAAc,EAAE,MAA8B,CAAC;AAE5D,eAAO,MAAM,gBAAgB,EAAE,MAAM,EAAqF,CAAC"}

package/lib/components/molecules/FullPageBackGround/FullPageBGParams.js

@@ -0,0 +1,8 @@
+export const PageFitOriginal = `fullPageFit=Original`;
+export const PageFitLayout2 = `fullPageFit=Layout2`;
+export const SetNormalColor = `defaultFontColor=default`;
+export const SetWhiteColor = `defaultFontColor=white`;
+export const ClearAllParams = `clearAllParams=true`;
+export const FullPageBGParams = [PageFitOriginal, PageFitLayout2, SetNormalColor, SetWhiteColor, ClearAllParams];
+// paramters used for FullBackGround
+//# sourceMappingURL=FullPageBGParams.js.map

package/lib/components/molecules/FullPageBackGround/FullPageBGParams.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullPageBGParams.js","sourceRoot":"","sources":["../../../../src/components/molecules/FullPageBackGround/FullPageBGParams.tsx"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,eAAe,GAAW,sBAAsB,CAAC;AAC9D,MAAM,CAAC,MAAM,cAAc,GAAW,qBAAqB,CAAC;AAC5D,MAAM,CAAC,MAAM,cAAc,GAAW,0BAA0B,CAAC;AACjE,MAAM,CAAC,MAAM,aAAa,GAAW,wBAAwB,CAAC;AAC9D,MAAM,CAAC,MAAM,cAAc,GAAW,qBAAqB,CAAC;AAE5D,MAAM,CAAC,MAAM,gBAAgB,GAAa,CAAC,eAAe,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,cAAc,CAAC,CAAC;AAC3H,oCAAoC"}

package/lib/components/molecules/FullPageBackGround/IFPSPageBGWPProps.d.ts

@@ -0,0 +1,16 @@
+export type IFullPageOverlayColor = 'Black' | 'White';
+export declare const FullPageOverlayColors: IFullPageOverlayColor[];
+export type IFPSFullPageImageFit = 'Original' | 'Layout2';
+export declare const FullPageImageFitStrings: IFPSFullPageImageFit[];
+export interface IFPSPageBGWPProps {
+    fullPageImage: string;
+    fullPageImageFilter: string;
+    fullPageScrollable: boolean;
+    defaultWhiteText: boolean;
+    whiteRefreshTip: string;
+    fullPageOverlayOpacity: number;
+    fullPageOverlayColor: IFullPageOverlayColor;
+    fullPageImageFit: IFPSFullPageImageFit;
+}
+export declare const changeFullBackground: string[];
+//# sourceMappingURL=IFPSPageBGWPProps.d.ts.map

package/lib/components/molecules/FullPageBackGround/IFPSPageBGWPProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IFPSPageBGWPProps.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/FullPageBackGround/IFPSPageBGWPProps.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,OAAO,CAAC;AACtD,eAAO,MAAM,qBAAqB,EAAE,qBAAqB,EAAyB,CAAC;AAEnF,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,SAAS,CAAC;AAC1D,eAAO,MAAM,uBAAuB,EAAE,oBAAoB,EAA8B,CAAC;AAEzF,MAAM,WAAW,iBAAiB;IAGhC,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,oBAAoB,EAAE,qBAAqB,CAAC;IAC5C,gBAAgB,EAAE,oBAAoB,CAAC;CAExC;AAED,eAAO,MAAM,oBAAoB,EAAE,MAAM,EACqE,CAAC"}

package/lib/components/molecules/FullPageBackGround/IFPSPageBGWPProps.js

@@ -0,0 +1,5 @@
+export const FullPageOverlayColors = [`Black`, `White`];
+export const FullPageImageFitStrings = [`Original`, `Layout2`];
+export const changeFullBackground = [`fullPageImage`, `fullPageImageFilter`, `fullPageScrollable`,
+    `defaultWhiteText`, `whiteRefreshTip`, `fullPageOverlayOpacity`, `fullPageOverlayColor`, `fullPageImageFit`];
+//# sourceMappingURL=IFPSPageBGWPProps.js.map

package/lib/components/molecules/FullPageBackGround/IFPSPageBGWPProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IFPSPageBGWPProps.js","sourceRoot":"","sources":["../../../../src/components/molecules/FullPageBackGround/IFPSPageBGWPProps.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,qBAAqB,GAA4B,CAAE,OAAO,EAAE,OAAO,CAAE,CAAC;AAGnF,MAAM,CAAC,MAAM,uBAAuB,GAA2B,CAAE,UAAU,EAAE,SAAS,CAAE,CAAC;AAgBzF,MAAM,CAAC,MAAM,oBAAoB,GAAa,CAAC,eAAe,EAAE,qBAAqB,EAAE,oBAAoB;IACzG,kBAAkB,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,sBAAsB,EAAE,kBAAkB,CAAC,CAAC"}

package/lib/components/molecules/FullPageBackGround/PropHelp/CSSPerformance.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+/**
+ * FPS Slick Sections Notes:
+ *
+ * ForceWhite does NOT work on collapsible sections.... might at first but if you collapse then expand, no go because web part does not re-apply the classes to the web parts.
+ * @returns
+ */
+export declare function getWebPartHelpElementCSSPerformance(): JSX.Element;
+//# sourceMappingURL=CSSPerformance.d.ts.map

package/lib/components/molecules/FullPageBackGround/PropHelp/CSSPerformance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CSSPerformance.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/FullPageBackGround/PropHelp/CSSPerformance.tsx"],"names":[],"mappings":";AAUA;;;;;GAKG;AAGH,wBAAgB,mCAAmC,IAAO,GAAG,CAAC,OAAO,CA6BpE"}

package/lib/components/molecules/FullPageBackGround/PropHelp/CSSPerformance.js

@@ -0,0 +1,50 @@
+import * as React from 'react';
+// import ReactJson from "react-json-view";
+import { PivotItem, } from 'office-ui-fabric-react/lib/Pivot';
+// export function putObjectIntoJSON ( obj: any, name: string = null ): JSX.Element {
+//   // return <ReactJson src={ obj } name={ 'panelItem' } collapsed={ true } displayDataTypes={ true } displayObjectSize={ true } enableClipboard={ true } style={{ padding: '20px 0px' }}/>;
+//   return <ReactJson src={ obj } name={ name } collapsed={ false } displayDataTypes={ false } displayObjectSize={ false } enableClipboard={ true } style={{ padding: '20px 0px' }} theme= { 'rjv-default' } indentWidth={ 2}/>;
+// }
+/**
+ * FPS Slick Sections Notes:
+ *
+ * ForceWhite does NOT work on collapsible sections.... might at first but if you collapse then expand, no go because web part does not re-apply the classes to the web parts.
+ * @returns
+ */
+export function getWebPartHelpElementCSSPerformance() {
+    const WebPartHelpElement = React.createElement(PivotItem, { headerText: 'CSS Performance' },
+        React.createElement("div", { className: 'fps-pph-content' },
+            React.createElement("div", { className: 'fps-pph-topic' }, "CSS Lag and performance"),
+            React.createElement("div", null,
+                "If the web part is not in the ",
+                React.createElement("b", null, "active"),
+                " part of the page, styles will not get updated until the user moves/scrolls to where the web part can be loaded."),
+            React.createElement("div", null,
+                "Any changes to styles happen ",
+                React.createElement("b", null, "AFTER"),
+                " the page loads ",
+                React.createElement("b", null, "so you may notice it change"),
+                "."),
+            React.createElement("div", null, "See Improving Performance below for tips on how to improve perforamnce."),
+            React.createElement("div", { className: 'fps-pph-topic' }, "Tips to improve performance"),
+            React.createElement("h4", null, "Web part location"),
+            React.createElement("div", null,
+                React.createElement("b", null, "Install"),
+                " FPS Slick Sections web part ",
+                React.createElement("b", null, "in the first section on the page"),
+                "."),
+            React.createElement("h4", null, "Minimize what SharePoint has to do before web part is loaded"),
+            React.createElement("ul", null,
+                React.createElement("li", null, "Remove as much navigation as possible."),
+                React.createElement("ul", null,
+                    React.createElement("li", null,
+                        "Disable Navigation in ",
+                        React.createElement("b", null, "Change the Look : Navigation"),
+                        " menu"),
+                    React.createElement("li", null, "Remove un-neccessary links in navigation"),
+                    React.createElement("li", null, "If you are trying to totally hide SharePoint interface, disconnect from HubSite")),
+                React.createElement("li", null, "Reduce the number of sections on your page"),
+                React.createElement("li", null, "Reduce the number of web parts on your page"))));
+    return WebPartHelpElement;
+}
+//# sourceMappingURL=CSSPerformance.js.map

package/lib/components/molecules/FullPageBackGround/PropHelp/CSSPerformance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CSSPerformance.js","sourceRoot":"","sources":["../../../../../src/components/molecules/FullPageBackGround/PropHelp/CSSPerformance.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,2CAA2C;AAC3C,OAAO,EAAG,SAAS,GAAG,MAAM,kCAAkC,CAAC;AAE/D,qFAAqF;AACrF,8LAA8L;AAC9L,iOAAiO;AACjO,IAAI;AAEJ;;;;;GAKG;AAGH,MAAM,UAAU,mCAAmC;IAEjD,MAAM,kBAAkB,GAAG,oBAAC,SAAS,IAAC,UAAU,EAAG,iBAAiB;QAClE,6BAAK,SAAS,EAAG,iBAAiB;YAChC,6BAAK,SAAS,EAAG,eAAe,8BAAgC;YAChE;;gBAAmC,wCAAa;mIAAsH;YACtK;;gBAAkC,uCAAY;;gBAAgB,6DAAkC;oBAAO;YACvG,2GAAkF;YAElF,6BAAK,SAAS,EAAG,eAAe,kCAAoC;YACpE,oDAA0B;YAC1B;gBAAK,yCAAc;;gBAA6B,kEAAuC;oBAAO;YAE9F,+FAAqE;YACrE;gBACE,yEAA+C;gBAC/C;oBACE;;wBAA0B,8DAAmC;gCAAU;oBACvE,2EAAiD;oBACjD,kHAAwF,CACrF;gBACL,6EAAmD;gBACnD,8EAAoD,CACjD,CACD,CACI,CAAC;IAEb,OAAO,kBAAkB,CAAC;AAE5B,CAAC"}

package/lib/components/molecules/FullPageBackGround/PropHelp/CSSWarning.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+/**
+ * FPS Slick Sections Notes:
+ *
+ * ForceWhite does NOT work on collapsible sections.... might at first but if you collapse then expand, no go because web part does not re-apply the classes to the web parts.
+ * @returns
+ */
+export declare function getWebPartHelpElementCSSWarning(): JSX.Element;
+//# sourceMappingURL=CSSWarning.d.ts.map

package/lib/components/molecules/FullPageBackGround/PropHelp/CSSWarning.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CSSWarning.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/FullPageBackGround/PropHelp/CSSWarning.tsx"],"names":[],"mappings":";AAUA;;;;;GAKG;AAGH,wBAAgB,+BAA+B,IAAO,GAAG,CAAC,OAAO,CAmGhE"}

package/lib/components/molecules/FullPageBackGround/PropHelp/CSSWarning.js

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
+// import ReactJson from "react-json-view";
+import { PivotItem, } from 'office-ui-fabric-react/lib/Pivot';
+// export function putObjectIntoJSON ( obj: any, name: string = null ): JSX.Element {
+//   // return <ReactJson src={ obj } name={ 'panelItem' } collapsed={ true } displayDataTypes={ true } displayObjectSize={ true } enableClipboard={ true } style={{ padding: '20px 0px' }}/>;
+//   return <ReactJson src={ obj } name={ name } collapsed={ false } displayDataTypes={ false } displayObjectSize={ false } enableClipboard={ true } style={{ padding: '20px 0px' }} theme= { 'rjv-default' } indentWidth={ 2}/>;
+// }
+/**
+ * FPS Slick Sections Notes:
+ *
+ * ForceWhite does NOT work on collapsible sections.... might at first but if you collapse then expand, no go because web part does not re-apply the classes to the web parts.
+ * @returns
+ */
+export function getWebPartHelpElementCSSWarning() {
+    const WebPartHelpElement = React.createElement(PivotItem, { headerText: 'CSS Warning' },
+        React.createElement("div", { className: 'fps-pph-content' },
+            React.createElement("div", { className: 'fps-pph-topic' }, "CSS Warning - applies to ANY 3rd party web part that modifies SharePoint page styles"),
+            React.createElement("h4", null, "Style changes may stop working without notice"),
+            React.createElement("div", null, "3rd party web parts rely on specific settings on SharePoint pages to work."),
+            React.createElement("div", null, "Microsoft can change those settings at any time without notice which could cause this web part to not work as desired."),
+            React.createElement("div", null, "If you notice any changes, please report to your SharePoint team as soon as possible."),
+            React.createElement("div", null,
+                React.createElement("b", null, "DO NOT rely on any style changes as means for restricting access!"),
+                " Use proper permission strategies instead."),
+            React.createElement("h4", null, "Perceived Lag with styles changing"),
+            React.createElement("div", null, "See next tab regarding performance of style changes."),
+            React.createElement("div", { className: 'fps-pph-topic' }, "Incompatibilities - avoid these conditions"),
+            React.createElement("h4", null, "Collapsable sections"),
+            React.createElement("div", null, "Styling updates to web parts only happen when the page is first loaded.  Due to how SharePoint builds the page, collapsible section styles get reset when expanding."),
+            React.createElement("div", { className: 'fps-pph-topic' }, "Forced White Font color returns to black"),
+            React.createElement("div", null, "If you scroll far down a page, SharePoint unloads some content like Site and Page Titles."),
+            React.createElement("div", null, "When you scroll back up, SharePoint recreates them from scratch which this web part can not detect."),
+            React.createElement("div", null,
+                "If this happens, just press the Refresh Icon in the web part bar: ",
+                React.createElement(Icon, { style: { fontSize: 'larger' }, iconName: "SyncStatusSolid" })),
+            React.createElement("div", { className: 'fps-pph-topic' }, "Styles do not get updated on all web parts"),
+            React.createElement("div", null, "Do to the vast and every changing variety of web parts, only the most common have been tested."),
+            React.createElement("div", null, "These include"),
+            React.createElement("ul", null,
+                React.createElement("li", null, "Quick Links - most style variations"),
+                React.createElement("li", null, "News, Image, Timer, Hero, People web parts"),
+                React.createElement("li", null, "Embeded link web part"),
+                React.createElement("li", null, "Youtube web part"),
+                React.createElement("li", null, "Pivot Tiles web part")),
+            React.createElement("div", { className: 'fps-pph-topic' }, "CSS Class Selectors"),
+            React.createElement("a", { href: 'https://github.com/mikezimm/Slick-Sections/blob/main/src/webparts/fpsSlickSections/CoreFPS/SectionStyles.ts' }, "SectionStyles.ts"),
+            React.createElement("div", null,
+                "Used to get all ",
+                React.createElement("b", null, "Section divs"),
+                ":  ",
+                `document.querySelectorAll('`,
+                React.createElement("b", null, ".CanvasZone"),
+                `')`),
+            React.createElement("div", null,
+                "Used to get all ",
+                React.createElement("b", null, "WebPart divs"),
+                ":  ",
+                `document.querySelectorAll('`,
+                React.createElement("b", null, ".ControlZone"),
+                `')`),
+            React.createElement("div", { className: 'fps-pph-topic' }, "Specific dependancy for Full Page Background Image"),
+            React.createElement("div", null,
+                "Used to Main Canvas Div - to add Full Page BG Image:  ",
+                `document.getElementsByClassName('`,
+                React.createElement("b", null, "CanvasComponent"),
+                `')`),
+            React.createElement("div", { className: 'fps-pph-topic' }, "Specific dependancies for styling White Text"),
+            React.createElement("div", null,
+                "scss class:  forceWhiteText - Code: ",
+                React.createElement("a", { href: 'https://github.com/mikezimm/Slick-Sections/blob/ab202b0aec3b42f24d34ce35be07e50ae2595842/src/webparts/fpsSlickSections/components/FpsSlickSections.module.scss#L207' }, "Link to scss file for White Text")),
+            React.createElement("div", { className: 'fps-pph-topic' }, "White Text:  Site Header: Title, Following, Share buttons"),
+            React.createElement("div", null,
+                `document.querySelector('`,
+                React.createElement("b", null, `[data-automationid="SiteHeader"]`),
+                `')`),
+            React.createElement("div", null,
+                "Apply ",
+                React.createElement("b", null, ".forceWhiteTextSiteHeader"),
+                " to ",
+                React.createElement("b", null, "SiteHeader")),
+            React.createElement("div", null,
+                React.createElement("b", null,
+                    React.createElement("mark", null, "NOTE:"),
+                    " datautomationid"),
+                " is ONE WORD without a hyphen for this data element"),
+            React.createElement("div", null, `a,span ( attribute - link text and spans inside attributes )`),
+            React.createElement("div", null, `a span:hover ( attribute - link text and spans inside attributes )`),
+            React.createElement("div", null, `.ms-HorizontalNavItem-linkText.is-selected ( Add selected link underline bottom-border )`),
+            React.createElement("div", null, `data-automationid="SiteHeaderTitle" a ( attribute - link which Title is )`),
+            React.createElement("div", null, "Also targets all buttons and button icons"),
+            React.createElement("div", { className: 'fps-pph-topic' }, "White Text:  Page Title"),
+            React.createElement("div", null,
+                `document.querySelector('`,
+                React.createElement("b", null,
+                    "`",
+                    `[data-automation-id="pageHeader"]`,
+                    "`"),
+                `')`),
+            React.createElement("div", null,
+                "Apply ",
+                React.createElement("b", null, ".forceWhiteTextPageHeader"),
+                " to ",
+                React.createElement("b", null, "pageHeader")),
+            React.createElement("div", null, `[data-automation-id="TitleTextId"]`),
+            React.createElement("div", null, `[data-automation-id="personaDetails"]`),
+            React.createElement("div", { className: 'fps-pph-topic' }, "White Text:  Used for Command Bar Div"),
+            React.createElement("div", null,
+                `document.getElementsByClassName('`,
+                React.createElement("b", null, "mainContent"),
+                `')`),
+            React.createElement("div", null,
+                "Apply ",
+                React.createElement("b", null, ".forceWhiteTextCmdButton"),
+                " to ",
+                React.createElement("b", null, "mainContent")),
+            React.createElement("div", null, `[data-automation-id="visibleContent"]`),
+            React.createElement("div", null, `[data-automation-id="CollapsibleLayer-Button"]`),
+            React.createElement("div", { className: 'fps-pph-topic' }, "White Text:  webPartHeader - All Webparts"),
+            React.createElement("div", null, `[data-automation-id="webPartHeader"] [role="heading"]`),
+            React.createElement("div", { className: 'fps-pph-topic' }, "White Text:  News webpart"),
+            React.createElement("div", null, `[data-automation-id="newsItem"]`),
+            React.createElement("div", null, `[data-automation-id="newsItemTitle"]`),
+            React.createElement("div", null, `[data-automation-id="newsItemDescription"]`),
+            React.createElement("div", { className: 'fps-pph-topic' }, "White Text:  Image webpart"),
+            React.createElement("div", null, `[data-automation-id="captionElement"]`),
+            React.createElement("div", { className: 'fps-pph-topic' }, "White Text:  Text web part"),
+            React.createElement("div", null, `[data-automation-id="textBox"] >> h2, h3, h4, p, a`),
+            React.createElement("div", { className: 'fps-pph-topic' }, "White Text:  Quick Links web part"),
+            React.createElement("div", null, `[data-automation-id="quick-links-item-title"]`),
+            React.createElement("div", null, `[data-automation-id="tile-card"]`),
+            React.createElement("div", null, `[data-automation-id="button-card"]`),
+            React.createElement("div", null, `[data-automation-id="grid-layout"]`),
+            React.createElement("div", { className: 'fps-pph-topic' }, "White Text:  Embed link web part"),
+            React.createElement("div", null, `[data-automation-id="embedContainer"]`),
+            React.createElement("div", { className: 'fps-pph-topic' }, "White Text:  Collapsible Section - NOT supported"),
+            React.createElement("div", null, `[data-automation-id="CollapsibleLayer-Button"]`)));
+    return WebPartHelpElement;
+}
+//# sourceMappingURL=CSSWarning.js.map

package/lib/components/molecules/FullPageBackGround/PropHelp/CSSWarning.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CSSWarning.js","sourceRoot":"","sources":["../../../../../src/components/molecules/FullPageBackGround/PropHelp/CSSWarning.tsx"],"names":[],"mappings":"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"}

package/lib/components/molecules/FullPageBackGround/PropHelp/FullImage.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ICallbackAddParamToUrl } from '../../../../banner/FPSWebPartClass/IThisFPSWebPartClass';
+/**
+ * FPS Slick Sections Notes:
+ *
+ * ForceWhite does NOT work on collapsible sections.... might at first but if you collapse then expand, no go because web part does not re-apply the classes to the web parts.
+ * @returns
+ */
+export declare const LinkStyles: React.CSSProperties;
+export declare function getWebPartHelpElementFullImage(onClick: ICallbackAddParamToUrl): JSX.Element;
+//# sourceMappingURL=FullImage.d.ts.map

package/lib/components/molecules/FullPageBackGround/PropHelp/FullImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullImage.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/FullPageBackGround/PropHelp/FullImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,yDAAyD,CAAC;AAEjG;;;;;GAKG;AAEH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,aAAmG,CAAC;AAEnI,wBAAgB,8BAA8B,CAAG,OAAO,EAAE,sBAAsB,GAAI,GAAG,CAAC,OAAO,CA+C9F"}

package/lib/components/molecules/FullPageBackGround/PropHelp/FullImage.js

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
+// import ReactJson from "react-json-view";
+import { PivotItem, } from 'office-ui-fabric-react/lib/Pivot';
+import { PageFitLayout2, PageFitOriginal, SetNormalColor, SetWhiteColor } from "../FullPageBGParams";
+/**
+ * FPS Slick Sections Notes:
+ *
+ * ForceWhite does NOT work on collapsible sections.... might at first but if you collapse then expand, no go because web part does not re-apply the classes to the web parts.
+ * @returns
+ */
+// White text refresh label
+export const LinkStyles = { padding: '8px 15px', marginBottom: '12px', color: 'darkblue', cursor: 'pointer' };
+export function getWebPartHelpElementFullImage(onClick) {
+    const WebPartHelpElement = React.createElement(PivotItem, { headerText: 'Background' },
+        React.createElement("div", { className: 'fps-pph-content' },
+            React.createElement("div", { className: 'fps-pph-topic' }, "Full Page Image url"),
+            React.createElement("div", null, "If you want a single image as the page background, paste full link to image here"),
+            React.createElement("div", null, "When you scroll, the page scrolls but image is fixed."),
+            React.createElement("div", { className: 'fps-pph-topic' }, "Image Overlay"),
+            React.createElement("div", null, "Adjust Opacity greater than 0 in order to make background image darker or lighter."),
+            React.createElement("div", null, "Then select overlay color."),
+            React.createElement("div", { className: 'fps-pph-topic' }, "CSS Image Filter"),
+            React.createElement("div", null, "Allows you to apply a filter to your background image like blue or grayscale."),
+            React.createElement("div", null,
+                React.createElement("a", { href: `https://www.w3schools.com/cssref/playdemo.php?filename=playcss_filter&preval=blur(5px)` }, "See image filter examples here"),
+                "."),
+            React.createElement("div", null,
+                "Note you can combine filters to such as doing this:  ",
+                React.createElement("b", null, "blur(5px) sepia(100%)"),
+                "."),
+            React.createElement("div", { className: 'fps-pph-topic' }, "Force default text color white"),
+            React.createElement("div", null,
+                React.createElement("b", null, "Toggle on"),
+                " if you are using a ",
+                React.createElement("b", null, "dark color full page image"),
+                "."),
+            React.createElement("div", null,
+                "Makes certain ",
+                React.createElement("b", null, "web backgrounds transparent with white text")),
+            React.createElement("div", null,
+                React.createElement("mark", null, "Text color may also be white while Editing the page when background image is not visible")),
+            React.createElement("div", { className: 'fps-pph-topic' }, "White text refresh label"),
+            React.createElement("div", null,
+                "If you force white text, the web part bar will have this icon:  ",
+                React.createElement(Icon, { style: { fontSize: 'larger' }, iconName: "SyncStatusSolid" })),
+            React.createElement("div", null, "You can add text to left of that icon you want to tell people what it is."),
+            React.createElement("div", null,
+                "Note that the message should be very short and may crash into a longer web part title to ",
+                `it's`,
+                " left."),
+            React.createElement("div", { className: 'fps-pph-topic' }, "Image Fit"),
+            React.createElement("div", null, "Unfortunately the Background image will not fill entire page in all screen sizes."),
+            React.createElement("div", null, "We recommend you test the page by stretching to different sizes from wide-screen monitors to phone sizes in portrait mode."),
+            React.createElement("div", null, "Sometimes you may see white bars on the top-bottom or side."),
+            React.createElement("div", null, "If this causes an issue, you can try changing this setting, then save the page and completely refresh."),
+            React.createElement("div", null, "To temporarily test each layout, click on these links which will open this page in new windows."),
+            React.createElement("div", null,
+                PageFitOriginal,
+                PageFitLayout2),
+            React.createElement("div", null,
+                React.createElement("mark", null, "NOTE:"),
+                " If you are forcing white text, white bars may prevent you from finding the edit button."),
+            React.createElement("div", null,
+                "The work-around is to add this paramter to your page url and reload:",
+                SetNormalColor,
+                " OR",
+                SetWhiteColor)));
+    return WebPartHelpElement;
+}
+//# sourceMappingURL=FullImage.js.map

package/lib/components/molecules/FullPageBackGround/PropHelp/FullImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullImage.js","sourceRoot":"","sources":["../../../../../src/components/molecules/FullPageBackGround/PropHelp/FullImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,iCAAiC,CAAC;AACvD,2CAA2C;AAC3C,OAAO,EAAG,SAAS,GAAG,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGrG;;;;;GAKG;AACH,2BAA2B;AAC3B,MAAM,CAAC,MAAM,UAAU,GAAwB,EAAE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;AAEnI,MAAM,UAAU,8BAA8B,CAAG,OAA+B;IAE9E,MAAM,kBAAkB,GAAG,oBAAC,SAAS,IAAC,UAAU,EAAG,YAAY;QAC7D,6BAAK,SAAS,EAAG,iBAAiB;YAEhC,6BAAK,SAAS,EAAG,eAAe,0BAA4B;YAC5D,oHAA2F;YAC3F,yFAAgE;YAEhE,6BAAK,SAAS,EAAG,eAAe,oBAAsB;YACtD,sHAA6F;YAC7F,8DAAqC;YAErC,6BAAK,SAAS,EAAG,eAAe,uBAAyB;YACzD,iHAAwF;YACxF;gBAAK,2BAAG,IAAI,EAAG,wFAAwF,qCAAqC;oBAAO;YACnJ;;gBAA0D,uDAA4B;oBAAO;YAE7F,6BAAK,SAAS,EAAG,eAAe,qCAAuC;YACvE;gBAAK,2CAAgB;;gBAAoB,4DAAiC;oBAAO;YACjF;;gBAAmB,6EAAkD,CAAM;YAC3E;gBAAK,6HAAqG,CAAM;YAEhH,6BAAK,SAAS,EAAG,eAAe,+BAAiC;YACjE;;gBAAqE,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAC,iBAAiB,GAAE,CAAM;YAC5I,6GAAoF;YACpF;;gBAA+F,MAAM;yBAAa;YAElH,6BAAK,SAAS,EAAG,eAAe,gBAAkB;YAClD,qHAA4F;YAC5F,8JAAqI;YACrI,+FAAsE;YACtE,0IAAiH;YACjH,mIAA0G;YAC1G;gBACI,eAAe;gBACf,cAAc,CACZ;YACN;gBAAK,0CAAkB;2GAA8F;YACrH;;gBACI,cAAc;;gBACd,aAAa,CAAQ,CACrB,CACI,CAAC;IAEb,OAAO,kBAAkB,CAAC;AAE5B,CAAC"}

package/lib/components/molecules/FullPageBackGround/PropPane/FPSSlickBackgroundGroup.d.ts

@@ -0,0 +1,11 @@
+import { IPropertyPaneGroup } from '@microsoft/sp-property-pane';
+/**
+ * FPSBanner3BasicGroup builds FPS Banner Basics Prop Pane Group: showBanner, bannerTitle, infoElementChoice, infoElementText,
+ * @param forceBanner
+ * @param modifyBannerTitle
+ * @param showBanner
+ * @param infoElementText
+ * @returns
+ */
+export declare function FPSSlickBackgroundGroup(thisWPClass: any): IPropertyPaneGroup;
+//# sourceMappingURL=FPSSlickBackgroundGroup.d.ts.map

package/lib/components/molecules/FullPageBackGround/PropPane/FPSSlickBackgroundGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FPSSlickBackgroundGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/FullPageBackGround/PropPane/FPSSlickBackgroundGroup.ts"],"names":[],"mappings":"AACA,OAAO,EAOH,kBAAkB,EAKnB,MAAM,6BAA6B,CAAC;AAQvC;;;;;;;GAOG;AAGH,wBAAgB,uBAAuB,CAAE,WAAW,EAAE,GAAG,GAAI,kBAAkB,CA0F9E"}

package/lib/components/molecules/FullPageBackGround/PropPane/FPSSlickBackgroundGroup.js

@@ -0,0 +1,78 @@
+import { PropertyPaneTextField, PropertyPaneDropdown, PropertyPaneLabel, 
+// IPropertyPaneDropdownProps,
+PropertyPaneToggle, PropertyPaneSlider,
+// IPropertyPaneDropdownOption,
+ } from '@microsoft/sp-property-pane';
+import { FullPageImageFitStrings, FullPageOverlayColors, } from '../IFPSPageBGWPProps';
+const FPSSlickFullPageOverlayColorChoices = FullPageOverlayColors.map((key, idx) => { return { index: idx, key: key, text: key }; });
+const FPSSlickFullPageImageFitChoices = FullPageImageFitStrings.map((key, idx) => { return { index: idx, key: key, text: key }; });
+/**
+ * FPSBanner3BasicGroup builds FPS Banner Basics Prop Pane Group: showBanner, bannerTitle, infoElementChoice, infoElementText,
+ * @param forceBanner
+ * @param modifyBannerTitle
+ * @param showBanner
+ * @param infoElementText
+ * @returns
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function FPSSlickBackgroundGroup(thisWPClass) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const thisProps = thisWPClass.properties;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const groupFields = [];
+    if (thisWPClass._allowFullPageBG !== true) {
+        groupFields.push(PropertyPaneLabel('nothing', {
+            text: 'This set of options is NOT available in webpart'
+        }));
+    }
+    else {
+        const { fullPageImage, fullPageOverlayOpacity } = thisProps;
+        const hasFullCanvasBG = fullPageImage ? true : false;
+        groupFields.push(PropertyPaneTextField(`fullPageImage`, {
+            label: 'Full Page Image url',
+            description: `Single picture spanning all sections`,
+        }));
+        groupFields.push(PropertyPaneSlider(`fullPageOverlayOpacity`, {
+            label: `Image Overlay Opacity - make Image lighter or darker`,
+            min: 0,
+            max: 1,
+            step: .1,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            value: thisProps[`fullPageOverlayOpacity`],
+        }));
+        const hasOverlayOpacity = fullPageOverlayOpacity > 0 ? true : false;
+        groupFields.push(PropertyPaneDropdown('fullPageOverlayColor', {
+            label: 'Overlay color - When opacity > 0',
+            options: FPSSlickFullPageOverlayColorChoices,
+            disabled: hasOverlayOpacity === true ? false : true,
+        }));
+        groupFields.push(PropertyPaneTextField(`fullPageImageFilter`, {
+            label: 'CSS Image Filter - for Full Page Image',
+            description: `example:  blur(5px) sepia(100%) - will both blur and colorize`,
+            disabled: hasFullCanvasBG === true ? false : true,
+        }));
+        // whiteRefreshTip
+        groupFields.push(PropertyPaneToggle('defaultWhiteText', {
+            label: `Force default text color to White`,
+            onText: `When fullPageImage is dark`,
+            offText: `Off`
+        }));
+        groupFields.push(PropertyPaneTextField(`whiteRefreshTip`, {
+            label: 'White text refresh label',
+            description: `Tip to refresh White Font colors like:  Refresh White Text`,
+            disabled: thisProps.defaultWhiteText === true ? false : true,
+        }));
+        groupFields.push(PropertyPaneDropdown('fullPageImageFit', {
+            label: 'Image fit',
+            options: FPSSlickFullPageImageFitChoices,
+            disabled: hasFullCanvasBG === true ? false : true,
+        }));
+    }
+    const propGroup = {
+        groupName: `FPS Full Page Background Props`,
+        isCollapsed: true,
+        groupFields: groupFields
+    };
+    return propGroup;
+}
+//# sourceMappingURL=FPSSlickBackgroundGroup.js.map

package/lib/components/molecules/FullPageBackGround/PropPane/FPSSlickBackgroundGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FPSSlickBackgroundGroup.js","sourceRoot":"","sources":["../../../../../src/components/molecules/FullPageBackGround/PropPane/FPSSlickBackgroundGroup.ts"],"names":[],"mappings":"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"}

package/lib/components/molecules/FullPageBackGround/addCanvasBGImageComponent.d.ts

@@ -0,0 +1,3 @@
+import { IFPSPageBGWPProps } from "./IFPSPageBGWPProps";
+export declare function addCanvasBGImageComponent(webPartProps: IFPSPageBGWPProps, updates: number): number;
+//# sourceMappingURL=addCanvasBGImageComponent.d.ts.map

package/lib/components/molecules/FullPageBackGround/addCanvasBGImageComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"addCanvasBGImageComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/FullPageBackGround/addCanvasBGImageComponent.ts"],"names":[],"mappings":"AAEA,OAAO,EAAwB,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAQ9E,wBAAgB,yBAAyB,CAAC,YAAY,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAsHlG"}

package/lib/components/molecules/FullPageBackGround/addCanvasBGImageComponent.js

@@ -0,0 +1,110 @@
+import { check4This } from "@mikezimm/fps-pnp2/lib/services/sp/CheckSearch";
+// require( './forceWhiteText.css' );
+// require( './fullPageBackground.css' );
+require('@mikezimm/fps-styles/dist/forceWhiteText.css');
+require('@mikezimm/fps-styles/dist/fullPageBackground.css');
+export function addCanvasBGImageComponent(webPartProps, updates) {
+    // Added due to https://github.com/mikezimm/Slick-Sections/issues/51
+    const defaultWhiteText = check4This(`defaultFontColor=default`) === true ? false : check4This(`defaultFontColor=white`) === true ? true : webPartProps.defaultWhiteText;
+    let fullPageImageFit = webPartProps.fullPageImageFit;
+    if (check4This(`fullPageFit=Original`) === true) {
+        fullPageImageFit = `Original`;
+    }
+    else if (check4This(`fullPageFit=Layout2`) === true) {
+        fullPageImageFit = `Layout2`;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let slickCanvasBG = Array.from(document.getElementsByClassName(`slickSectionCanvasBG`));
+    if (slickCanvasBG.length === 0)
+        slickCanvasBG = Array.from(document.getElementsByClassName(`slickSectionCanvasBG2`));
+    if (!webPartProps.fullPageImage) {
+        // if the fps canvas element exists already, just remove the visibleSlickSection className and return
+        if (slickCanvasBG.length > 0) {
+            slickCanvasBG[0].classList.remove(`visibleSlickSection`);
+        }
+        return updates;
+    }
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassName
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const divsCanvas = Array.from(document.getElementsByClassName(`CanvasComponent`));
+    if (divsCanvas.length === 0) {
+        // If there are no CanvasComponent elements, then I don't have an element to prepend the background to
+        console.log(`FPS Slick Sections addPreCanvasComponent - NO CanvasComponent found`);
+        return updates;
+    }
+    const fullPageImageFilter = webPartProps.fullPageImageFilter ? `style= "filter:${webPartProps.fullPageImageFilter}"` : ``;
+    const canvasClass = fullPageImageFit === 'Layout2' ? `slickSectionCanvasBG2` : `slickSectionCanvasBG`;
+    const imgClass = fullPageImageFit === 'Layout2' ? `slickSectionCanvasBGImg2` : `slickSectionCanvasBGImg`;
+    // https://github.com/mikezimm/Slick-Sections/issues/40
+    const divHTML = `<div class="${canvasClass}">
+    <img class="${imgClass}" src="${webPartProps.fullPageImage}" ${fullPageImageFilter}>
+    <div class="${`slickSectionCanvasBGOverlay`}" style="
+        background: ${webPartProps.fullPageOverlayColor};
+        opacity: ${webPartProps.fullPageOverlayOpacity};
+    "></div>
+  </div>`;
+    if (slickCanvasBG.length > 0) {
+        // If slickCanvasBG already exists, add the visible class
+        slickCanvasBG[0].classList.add(`visibleSlickSection`);
+        // Then update the src
+        const img = slickCanvasBG[0].getElementsByClassName(imgClass);
+        if (img && img.src !== webPartProps.fullPageImage)
+            img.src = webPartProps.fullPageImage;
+        updates++;
+    }
+    else {
+        const tempDiv = document.createElement("div");
+        // https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement
+        divsCanvas[0].insertAdjacentElement("beforebegin", tempDiv);
+        tempDiv.outerHTML = divHTML;
+        tempDiv.classList.add(`visibleSlickSection`);
+        updates++;
+    }
+    // Only apply white to command bar if there is an image && you force white default
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const cmdBar = Array.from(document.getElementsByClassName(`mainContent`));
+    if (cmdBar && cmdBar.length > 0) {
+        if (defaultWhiteText === true) {
+            cmdBar[0].classList.add(`forceWhiteTextCmdButton`);
+        }
+        else {
+            cmdBar[0].classList.remove(`forceWhiteTextCmdButton`);
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const siteHeader = document.querySelector(`[data-automationid="SiteHeader"]`);
+    if (siteHeader) {
+        if (defaultWhiteText === true) {
+            siteHeader.classList.add(`forceWhiteTextSiteHeader`);
+        }
+        else {
+            siteHeader.classList.remove(`forceWhiteTextSiteHeader`);
+        }
+    }
+    // Added this for horizontal nav https://github.com/mikezimm/Slick-Sections/issues/53
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const horizontalNav = Array.from(document.getElementsByClassName(`ms-HorizontalNav`));
+    if (horizontalNav && horizontalNav.length > 0) {
+        // Added targetIdx because first ms-HorizontalNav might be Hub Nav which does not have background
+        // Then also get parentElement so it can target both the HorizontalName AND actionsWrapper class
+        const targetIdx = horizontalNav.length - 1;
+        if (defaultWhiteText === true) {
+            horizontalNav[targetIdx].parentElement.classList.add(`forceWhiteTextSiteHeader`);
+        }
+        else {
+            horizontalNav[targetIdx].parentElement.classList.remove(`forceWhiteTextSiteHeader`);
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const pageHeader = document.querySelector(`[data-automation-id="pageHeader"]`);
+    if (pageHeader) {
+        if (defaultWhiteText === true) {
+            pageHeader.classList.add(`forceWhiteTextPageHeader`);
+        }
+        else {
+            pageHeader.classList.remove(`forceWhiteTextPageHeader`);
+        }
+    }
+    return updates;
+}
+//# sourceMappingURL=addCanvasBGImageComponent.js.map