@mikezimm/fps-library-v2 1.0.80 → 1.0.81

package/CHANGELOG.md

@@ -5,17 +5,24 @@ npm run build
 npm version major/minor/patch
 npm publish --access=public
 
-npm install @mikezimm/fps-library-v2@1.0.80
+npm install @mikezimm/fps-library-v2@1.0.81
 
 # Changelog
 
 NOTE:  TURN BACK ON STRICT NULL CHECKS - turned off for PropPaneCols
 
+## 1.0.81 - 2023-Jan-03: ALVFinMan components
+- added makeBubbleElementFromBubbles, IMinTeachBubble to src/components/atoms/TeachBubble
+- refactored bubbles to include content element
+- Add FadeCarousel and SelectDots under src/components/molecules/FadeCarousel ( from test-fps-test/ALVFinMan web part )
+- relocated thinArray and getSpreadIndexes to src/logic/Arrays/thinOutArray.ts
+- created getWhoDunItElements in src/components/atoms/WhoDunItRow/getWhoDunIt.tsx to build Peope/Dates row
+
 ## 1.0.80 - 2022-Dec-31: clean up console.logs, ALVFinMan fetches
 - remove unneccessary console.logs
 - fix a couple check4Gulp imports that pull in pnp2
 - update PinMeGroup to only auto-expand on PageInfo for now
-- add getNextIndex function from FadeCarousel component to src\logic\Arrays\searching\getNextIndex.ts
+- add getNextIndex function from FadeCarousel component to src/logic/Arrays/searching/getNextIndex.ts
 - update getSourceItems to automatically create expandColumns from selectColumns if it is empty - ALVFinMan
 - add fetchFpsPageAsXML and fetchFpsItemAsXML to fetch Modern Page content
 

package/lib/components/atoms/TeachBubble/IMinTeachBubble.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export interface IMinTeachBubble {
+    step?: number;
+    target: string;
+    headline: string;
+    message?: string;
+    content?: JSX.Element;
+}
+/**
+ *  This is an example of how to set the ID of a PivotItem so it can be referenced.
+ *    Just use the getTabId callback.
+ 
+    <Pivot
+      getTabId={ ( itemKey, index ) => { return `ALVFMMainPivot${itemKey}`} }
+      styles={ mainPivotStyles }
+    >
+ *
+ */ 
+//# sourceMappingURL=IMinTeachBubble.d.ts.map

package/lib/components/atoms/TeachBubble/IMinTeachBubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IMinTeachBubble.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/TeachBubble/IMinTeachBubble.tsx"],"names":[],"mappings":";AACA,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CAEvB;AAED;;;;;;;;;GASG"}

package/lib/components/atoms/TeachBubble/IMinTeachBubble.js

@@ -0,0 +1,12 @@
+export {};
+/**
+ *  This is an example of how to set the ID of a PivotItem so it can be referenced.
+ *    Just use the getTabId callback.
+ 
+    <Pivot
+      getTabId={ ( itemKey, index ) => { return `ALVFMMainPivot${itemKey}`} }
+      styles={ mainPivotStyles }
+    >
+ *
+ */ 
+//# sourceMappingURL=IMinTeachBubble.js.map

package/lib/components/atoms/TeachBubble/IMinTeachBubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IMinTeachBubble.js","sourceRoot":"","sources":["../../../../src/components/atoms/TeachBubble/IMinTeachBubble.tsx"],"names":[],"mappings":";AAYA;;;;;;;;;GASG"}

package/lib/components/atoms/TeachBubble/SampleTeachBubbles.d.ts

@@ -0,0 +1,3 @@
+import { IMinTeachBubble } from "./IMinTeachBubble";
+export declare function getHomeTeachBubbles(wpId: string): IMinTeachBubble[];
+//# sourceMappingURL=SampleTeachBubbles.d.ts.map

package/lib/components/atoms/TeachBubble/SampleTeachBubbles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SampleTeachBubbles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/TeachBubble/SampleTeachBubbles.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,eAAe,EAAE,CAenE"}

package/lib/components/atoms/TeachBubble/SampleTeachBubbles.js

@@ -0,0 +1,17 @@
+export function getHomeTeachBubbles(wpId) {
+    return [
+        {
+            // step: 0,
+            // NOTE:  Target must start with # for Id and prefer to end with a unique webpart instance ID
+            target: `#ALVFMHomeTour${wpId}`,
+            headline: `Want a tour of this web part?`,
+            message: `If you find a 'Map' icon like this, you can click on it and get a Tour of a feature.  In all Tours, Click 'Next' to continue.  You can press the X button to close this tour at any time :).`,
+        }, {
+            // step: 0,
+            target: `#ALVFMMainPivotGeneral${wpId}`,
+            headline: `'GENERAL' tab`,
+            message: `General information about the manual, not tied to any specific Policy, Instruction or process.`,
+        },
+    ];
+}
+//# sourceMappingURL=SampleTeachBubbles.js.map

package/lib/components/atoms/TeachBubble/SampleTeachBubbles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SampleTeachBubbles.js","sourceRoot":"","sources":["../../../../src/components/atoms/TeachBubble/SampleTeachBubbles.tsx"],"names":[],"mappings":"AAGA,MAAM,UAAU,mBAAmB,CAAC,IAAY;IAC9C,OAAO;QACL;YACE,WAAW;YACX,6FAA6F;YAC7F,MAAM,EAAE,iBAAiB,IAAI,EAAE;YAC/B,QAAQ,EAAE,+BAA+B;YACzC,OAAO,EAAE,8LAA8L;SACxM,EAAE;YACD,WAAW;YACX,MAAM,EAAE,yBAAyB,IAAI,EAAE;YACvC,QAAQ,EAAE,eAAe;YACzB,OAAO,EAAE,gGAAgG;SAC1G;KACF,CAAC;AACJ,CAAC"}

package/lib/components/atoms/TeachBubble/component.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IMinTeachBubble } from './IMinTeachBubble';
+export declare function makeBubbleElementFromBubbles(teachBubble: number, TeachBubbleArray: IMinTeachBubble[], setTeachBubble: any, closeTour: any): JSX.Element;
+//# sourceMappingURL=component.d.ts.map

package/lib/components/atoms/TeachBubble/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/TeachBubble/component.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,wBAAgB,4BAA4B,CAAE,WAAW,EAAE,MAAM,EAAE,gBAAgB,EAAC,eAAe,EAAE,EAAE,cAAc,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,GAAK,GAAG,CAAC,OAAO,CAyBzJ"}

package/lib/components/atoms/TeachBubble/component.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function makeBubbleElementFromBubbles(teachBubble, TeachBubbleArray, setTeachBubble, closeTour) {
+    if (teachBubble === null)
+        return null;
+    const theBubble = TeachBubbleArray[teachBubble];
+    const nextBubble = teachBubble === TeachBubbleArray.length - 1 ? 0 : teachBubble + 1;
+    const prevBubble = teachBubble === 0 ? TeachBubbleArray.length - 1 : teachBubble - 1;
+    console.log(`HomeTeachingBubbles:`, teachBubble, nextBubble, prevBubble);
+    const Bubble = React.createElement("div", null,
+        React.createElement(TeachingBubble, { target: theBubble.target, hasCloseButton: true, headline: theBubble.headline, onDismiss: () => { closeTour(); }, primaryButtonProps: { text: `${'Next'}`, onClick: () => setTeachBubble(nextBubble) }, secondaryButtonProps: { text: `${'Previous'}`, onClick: () => setTeachBubble(prevBubble) }, footerContent: `${teachBubble + 1} of ${TeachBubbleArray.length}` },
+            !theBubble.message ? null : React.createElement("div", null, `${theBubble.message}`),
+            !theBubble.content ? null : React.createElement("div", null, `${theBubble.content}`)));
+    return Bubble;
+}
+//# sourceMappingURL=component.js.map

package/lib/components/atoms/TeachBubble/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../src/components/atoms/TeachBubble/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAG3E,8DAA8D;AAC9D,MAAM,UAAU,4BAA4B,CAAE,WAAmB,EAAE,gBAAkC,EAAE,cAAmB,EAAE,SAAc;IAExI,IAAK,WAAW,KAAK,IAAI;QAAI,OAAO,IAAI,CAAC;IAEzC,MAAM,SAAS,GAAoB,gBAAgB,CAAE,WAAW,CAAE,CAAC;IACnE,MAAM,UAAU,GAAW,WAAW,KAAK,gBAAgB,CAAC,MAAM,GAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC;IAC5F,MAAM,UAAU,GAAW,WAAW,KAAK,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,MAAM,GAAE,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC;IAC5F,OAAO,CAAC,GAAG,CAAE,sBAAsB,EAAG,WAAW,EAAG,UAAU,EAAE,UAAU,CAAE,CAAC;IAC7E,MAAM,MAAM,GAAgB;QACxB,oBAAC,cAAc,IACb,MAAM,EAAG,SAAS,CAAC,MAAM,EACzB,cAAc,EAAE,IAAI,EACpB,QAAQ,EAAG,SAAS,CAAC,QAAQ,EAC7B,SAAS,EAAG,GAAG,EAAE,GAAG,SAAS,EAAG,CAAA,CAAC,CAAC,EAClC,kBAAkB,EAAG,EAAE,IAAI,EAAE,GAAG,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAE,UAAU,CAAE,EAAE,EACvF,oBAAoB,EAAG,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAE,UAAU,CAAE,EAAE,EAC7F,aAAa,EAAG,GAAI,WAAW,GAAG,CAAE,OAAQ,gBAAgB,CAAC,MAAO,EAAE;YAEpE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,iCAAO,GAAI,SAAS,CAAC,OAAQ,EAAE,CAAQ;YACnE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,iCAAO,GAAI,SAAS,CAAC,OAAQ,EAAE,CAAQ,CACtD,CACf,CAAA;IAEN,OAAO,MAAM,CAAC;AAEhB,CAAC"}

package/lib/components/atoms/WhoDunItRow/getWhoDunIt.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export interface IWhoDunItItem extends Partial<any> {
+    Author?: any;
+    Editor?: any;
+    FirstPublishedDate?: any;
+    createdLoc?: string;
+    "Author/Title"?: string;
+    modifiedLoc?: string;
+    "Editor/Title"?: string;
+}
+export interface IWhoDunItRow {
+    item: IWhoDunItItem;
+    showCreated?: boolean;
+    showPublished?: boolean;
+    showModified?: boolean;
+}
+export declare function getWhoDunItElements(props: IWhoDunItRow): JSX.Element;
+//# sourceMappingURL=getWhoDunIt.d.ts.map

package/lib/components/atoms/WhoDunItRow/getWhoDunIt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getWhoDunIt.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/WhoDunItRow/getWhoDunIt.tsx"],"names":[],"mappings":";AAKA,MAAM,WAAW,aAAc,SAAQ,OAAO,CAAC,GAAG,CAAC;IACjD,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,MAAM,CAAC,EAAE,GAAG,CAAC;IAEb,kBAAkB,CAAC,EAAE,GAAG,CAAC;IAEzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;CAEzB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,aAAa,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAE,KAAK,EAAE,YAAY,GAAI,GAAG,CAAC,OAAO,CA0BtE"}

package/lib/components/atoms/WhoDunItRow/getWhoDunIt.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+export function getWhoDunItElements(props) {
+    const { item, showCreated, showModified, showPublished } = props;
+    const modifiedString = showModified === true ? `Modified${item.modifiedLoc} - ${item['Editor/Title']}` : '';
+    const WhoDates = React.createElement("div", { className: 'whoDateStamps' },
+        showCreated !== true || item.FirstPublishedDate ? null :
+            React.createElement("div", { className: 'dateStamps', title: modifiedString },
+                React.createElement("div", null, "Created"),
+                " ",
+                React.createElement("div", null, item.createdLoc),
+                " ",
+                React.createElement("div", null, item['Author/Title'])),
+        showPublished !== true ? null :
+            React.createElement("div", { className: 'dateStamps', title: modifiedString },
+                React.createElement("div", null, "Published"),
+                " ",
+                React.createElement("div", null, item.FirstPublishedDate ? item.FirstPublishedDate : 'NOT YET PUBLISHED'),
+                " ",
+                React.createElement("div", null)));
+    return WhoDates;
+}
+//# sourceMappingURL=getWhoDunIt.js.map

package/lib/components/atoms/WhoDunItRow/getWhoDunIt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getWhoDunIt.js","sourceRoot":"","sources":["../../../../src/components/atoms/WhoDunItRow/getWhoDunIt.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAwB/B,MAAM,UAAU,mBAAmB,CAAE,KAAmB;IAEtD,MAAM,EAAG,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IAElE,MAAM,cAAc,GAAW,YAAY,KAAK,IAAI,CAAC,CAAC,CAAC,WAAY,IAAI,CAAC,WAAY,MAAO,IAAI,CAAC,cAAc,CAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAExH,MAAM,QAAQ,GAAG,6BAAK,SAAS,EAAG,eAAe;QAC7C,WAAW,KAAK,IAAI,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;YACxD,6BAAK,SAAS,EAAG,YAAY,EAAG,KAAK,EAAK,cAAc;gBACtD,2CAAkB;;gBAAC,iCAAO,IAAI,CAAC,UAAU,CAAQ;;gBAAC,iCAAO,IAAI,CAAC,cAAc,CAAC,CAAQ,CACjF;QAEN,aAAa,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;YAC/B,6BAAK,SAAS,EAAG,YAAY,EAAG,KAAK,EAAK,cAAc;gBAEtD,6CAAoB;;gBAAC,iCAAO,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,mBAAmB,CAAQ;;gBAAC,gCAAe,CACvH,CAOJ,CAAC;IAEP,OAAO,QAAQ,CAAC;AAClB,CAAC"}

package/lib/components/molecules/FadeCarousel/SelectDots/component.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+export interface IDotsHookWPProps {
+    maxDots: number;
+    titleProp?: string;
+    selectedLabel?: string;
+    containerStyle?: React.CSSProperties;
+    constainerClass?: string;
+    labelStyle?: React.CSSProperties;
+    iconStyle?: React.CSSProperties;
+}
+export interface IDotsHookProps {
+    items: any[];
+    current: number;
+    selectCallback: any;
+    dotsWPProps: IDotsHookWPProps;
+}
+declare const DotsHook: React.FC<IDotsHookProps>;
+export default DotsHook;
+//# sourceMappingURL=component.d.ts.map

package/lib/components/molecules/FadeCarousel/SelectDots/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/FadeCarousel/SelectDots/component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACjC;AAED,MAAM,WAAW,cAAc;IAE7B,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAEhB,cAAc,EAAE,GAAG,CAAC;IACpB,WAAW,EAAE,gBAAgB,CAAC;CAC/B;AAID,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA6CtC,CAAA;AAED,eAAe,QAAQ,CAAC"}

package/lib/components/molecules/FadeCarousel/SelectDots/component.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { getSpreadIndexes, } from '../../../../logic/Arrays/thinOutArray';
+require('@mikezimm/fps-styles/dist/selectDots.css');
+const defaultMessage = `Currently showing item: {current} of {count}`;
+const DotsHook = (props) => {
+    const { items, current, selectCallback, } = props;
+    const { maxDots, titleProp, selectedLabel, containerStyle, labelStyle, iconStyle, constainerClass } = props.dotsWPProps;
+    const [dotsToShow, setDotsToShow] = useState([]);
+    // useEffect NOTES:  Start with anonomous function
+    useEffect(() => {
+        // useEffect NOTES:  Be sure to wrap this in an anonomous function or it will keep rendering over and over
+        (() => {
+            const showDots = getSpreadIndexes(items.length, maxDots);
+            console.log('showDots: ', showDots);
+            setDotsToShow(showDots);
+            // useEffect NOTES:  Be sure to add () at the end of the function to call it correctly
+        })();
+        // useEffect NOTES:  init has , []) at the end
+    }, []);
+    const dots = [];
+    items.map((item, index) => {
+        const selectDot = index === current ? 'fpsSelectDot' : 'fpsUnSelectDot';
+        if (dotsToShow.indexOf(index) > -1)
+            dots.push(React.createElement(Icon, { title: `#${index + 1} of ${items.length} ${titleProp ? ` - ${item[titleProp]}` : ''}`, onClick: () => selectCallback(index), className: `fpsFadeDots ${selectDot}`, iconName: 'CircleShapeSolid', style: iconStyle }));
+    });
+    const baseLabel = selectedLabel ? selectedLabel : selectedLabel !== '' ? defaultMessage : '';
+    const dotLabel = baseLabel.replace(`{Title}`, items[current] ? items[current][titleProp] : '')
+        .replace(`{current}`, (current + 1).toFixed())
+        .replace(`{count}`, (items.length).toFixed());
+    const dotsElement = React.createElement("div", { className: `fpsDotsContainer ${constainerClass}`, style: containerStyle },
+        React.createElement("div", { className: 'fadeInDots' }, dots),
+        React.createElement("div", { className: 'dotLabel', style: labelStyle }, dotLabel));
+    return (dotsElement);
+};
+export default DotsHook;
+//# sourceMappingURL=component.js.map

package/lib/components/molecules/FadeCarousel/SelectDots/component.js.map

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

package/lib/components/molecules/FadeCarousel/component.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { IDotsHookProps } from './SelectDots/component';
+export interface ICarouselItem extends Partial<any> {
+    imageSrc?: string;
+    title?: string;
+    location?: string;
+    href?: string;
+    target?: string;
+    FirstPublishedDate?: any;
+    createdLoc?: string;
+    "Author/Title"?: string;
+    modifiedLoc?: string;
+    "Editor/Title"?: string;
+}
+export interface ICarouselProps {
+    items: ICarouselItem[];
+    firstXItems?: number;
+    titleField?: string;
+    descriptionField?: string;
+    hrefField?: string;
+    imageUrlField?: string;
+    noImage?: boolean;
+    showCreated?: boolean;
+    showPublished?: boolean;
+    showModified?: boolean;
+    constainerStyles?: React.CSSProperties;
+    constainerClass?: string;
+}
+export interface IFadeCarouselProps {
+    carouselProps: ICarouselProps;
+    dotProps?: IDotsHookProps;
+}
+export declare function getNextIndex(length: number, current: number, back?: boolean): number;
+declare const FadeCarousel: React.FC<IFadeCarouselProps>;
+export default FadeCarousel;
+//# sourceMappingURL=component.d.ts.map

package/lib/components/molecules/FadeCarousel/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/FadeCarousel/component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAiB,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAOjE,MAAM,WAAW,aAAc,SAAQ,OAAO,CAAC,GAAG,CAAC;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,GAAG,CAAC;IAEzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;CAExB;AAEF,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,kBAAkB;IACjC,aAAa,EAAE,cAAc,CAAC;IAC9B,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAGD,wBAAgB,YAAY,CAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,GAAE,OAAe,GAAI,MAAM,CAM7F;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4E9C,CAAA;AAED,eAAe,YAAY,CAAC"}

package/lib/components/molecules/FadeCarousel/component.js

@@ -0,0 +1,71 @@
+import * as React from 'react';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { useState } from 'react';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import DotsHook from './SelectDots/component';
+import { getWhoDunItElements } from '../../atoms/WhoDunItRow/getWhoDunIt';
+require('@mikezimm/fps-styles/dist/fadeCarouselStyles.css');
+require('@mikezimm/fps-styles/dist/fadeCarouselArrows.css');
+// getNextIndex copied to fps-library-v2 here:  src\logic\Arrays\searching\getNextIndex.ts
+export function getNextIndex(length, current, back = false) {
+    if (back === false) {
+        return current === length - 1 ? 0 : current + 1;
+    }
+    else {
+        return current === 0 ? length - 1 : current - 1;
+    }
+}
+const FadeCarousel = (props) => {
+    const { items, titleField, descriptionField, hrefField, imageUrlField, constainerStyles, constainerClass, noImage, firstXItems, showCreated, showModified, showPublished } = props.carouselProps;
+    const [currentSlide, setCurrentSlide] = useState(0);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [showItems, setShowItems] = useState(firstXItems && firstXItems > 0 ? items.slice(0, firstXItems) : items);
+    const titleProp = titleField ? titleField : 'Title';
+    const slides = showItems.map((item, index) => {
+        const inOrOut = index === currentSlide ? 'fpsFadeIn' : 'fpsFadeOut';
+        const imageLink = imageUrlField ? item[imageUrlField] : item.BannerImageUrl ? item.BannerImageUrl.Url.replace('tenant', 'mcclickster') : '';
+        const openLink = `${window.location.origin}${item[hrefField ? hrefField : 'FileRef']}`;
+        const WhoDates = getWhoDunItElements({ item: item, showCreated: showCreated, showModified: showModified, showPublished: showPublished });
+        // const modifiedString: string = showModified === true ? `Modified${ item.modifiedLoc } - ${ item['Editor/Title'] }` : '';
+        // const WhoDates = <div className={ 'whoDateStamps' }>
+        //   { showCreated !== true || item.FirstPublishedDate ? null : 
+        //     <div className={ 'dateStamps' } title = { modifiedString } >
+        //       <div>Created</div> <div>{ item.createdLoc }</div> <div>{ item['Author/Title'] }</div>
+        //     </div>
+        //   }
+        //   { showPublished !== true ? null : 
+        //     <div className={ 'dateStamps' } title = { modifiedString } >
+        //       {/* <div>Published</div> <div>{ item.FirstPublishedDate.toLocalTime() }</div> <div>{ item['Author/Title'] }</div> */}
+        //       <div>Published</div> <div>{ item.FirstPublishedDate ? item.FirstPublishedDate : 'NOT YET PUBLISHED' }</div> <div>{  }</div>
+        //     </div>
+        //   }
+        //   {/* { showModified !== true ? null : 
+        //     <div className={ 'dateStamps' }>
+        //       <div>Modified</div> <div>{ item.modifiedLoc }</div> <div>{ item['Editor/Title'] }</div>
+        //     </div>
+        //   } */}
+        // </div>;
+        return (React.createElement("div", { key: index, onClick: () => window.open(openLink, '_blank'), className: `fpsFadeElement ${inOrOut}` },
+            !imageLink || noImage === true ? null : React.createElement("img", { src: imageLink.replace('tenant', 'mcclickster') }),
+            React.createElement("h3", null, item[titleProp]),
+            React.createElement("p", null, item[descriptionField ? descriptionField : 'Description']),
+            WhoDates));
+    });
+    const slider = React.createElement("div", { className: `fpsFadeContainer ${constainerClass}`, style: constainerStyles },
+        React.createElement("div", { className: 'fpsFadeArrow fpsFadeArrowL', onClick: () => setCurrentSlide(getNextIndex(showItems.length, currentSlide, true)) },
+            React.createElement(Icon, { iconName: "ChevronLeft" })),
+        slides,
+        React.createElement("div", { className: 'fpsFadeArrow fpsFadeArrowR', onClick: () => setCurrentSlide(getNextIndex(showItems.length, currentSlide)) },
+            React.createElement(Icon, { iconName: "ChevronRight" })),
+        React.createElement(DotsHook, { items: showItems, current: currentSlide, selectCallback: setCurrentSlide, dotsWPProps: { ...{
+                    maxDots: firstXItems ? firstXItems : 7,
+                    titleProp: titleProp,
+                    // selectedLabel = { `This is a new {count} label from {current} based on {Title}` }
+                    // containerStyle = {{ fontSize: '48px', color: 'darkred', padding: '10px', }}
+                    // iconStyle = {{ fontSize: '18px', color: 'darkgreen', padding: '3px', }}
+                    // labelStyle = {{ fontSize: '22px', color: 'purple', padding: '5px',  }}
+                }, ...props.dotProps } }));
+    return (slider);
+};
+export default FadeCarousel;
+//# sourceMappingURL=component.js.map

package/lib/components/molecules/FadeCarousel/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../src/components/molecules/FadeCarousel/component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,6DAA6D;AAC7D,OAAO,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,iCAAiC,CAAC;AAEvD,OAAO,QAA4B,MAAM,wBAAwB,CAAA;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAE1E,OAAO,CAAE,kDAAkD,CAAC,CAAC;AAC7D,OAAO,CAAE,kDAAkD,CAAC,CAAC;AAwC7D,0FAA0F;AAC1F,MAAM,UAAU,YAAY,CAAE,MAAc,EAAE,OAAe,EAAE,OAAgB,KAAK;IAClF,IAAK,IAAI,KAAK,KAAK,EAAG;QACpB,OAAO,OAAO,KAAK,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC;KACjD;SAAM;QACL,OAAO,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC;KACjD;AACH,CAAC;AAED,MAAM,YAAY,GAAiC,CAAE,KAAK,EAAG,EAAE;IAE7D,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,eAAe,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC,aAAa,CAAC;IACjM,MAAM,CAAE,YAAY,EAAE,eAAe,CAAE,GAAG,QAAQ,CAAU,CAAC,CAAE,CAAC;IAEhE,6DAA6D;IAC7D,MAAM,CAAE,SAAS,EAAE,YAAY,CAAE,GAAG,QAAQ,CAAmB,WAAW,IAAI,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,WAAW,CAAE,CAAC,CAAC,CAAC,KAAK,CAAE,CAAC;IAEvI,MAAM,SAAS,GAAW,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC;IAE5D,MAAM,MAAM,GAAG,SAAS,CAAC,GAAG,CAAE,CAAE,IAAI,EAAE,KAAK,EAAG,EAAE;QAC9C,MAAM,OAAO,GAAG,KAAK,KAAK,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC;QACpE,MAAM,SAAS,GAAG,aAAa,CAAC,CAAC,CAAC,IAAI,CAAE,aAAa,CAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAE,QAAQ,EAAE,aAAa,CAAE,CAAC,CAAC,CAAC,EAAE,CAAE;QACjJ,MAAM,QAAQ,GAAG,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAE,EAAE,CAAC;QAIzF,MAAM,QAAQ,GAAG,mBAAmB,CAAE,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,CAAE,CAAC;QAE3I,2HAA2H;QAC3H,uDAAuD;QACvD,gEAAgE;QAChE,mEAAmE;QACnE,8FAA8F;QAC9F,aAAa;QACb,MAAM;QACN,uCAAuC;QACvC,mEAAmE;QACnE,8HAA8H;QAC9H,oIAAoI;QACpI,aAAa;QACb,MAAM;QACN,0CAA0C;QAC1C,uCAAuC;QACvC,gGAAgG;QAChG,aAAa;QACb,UAAU;QACV,UAAU;QAEV,OAAO,CAAE,6BAAK,GAAG,EAAE,KAAK,EAAE,OAAO,EAAG,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAE,QAAQ,EAAG,QAAQ,CAAC,EAAG,SAAS,EAAI,kBAAkB,OAAO,EAAE;YAClH,CAAC,SAAS,IAAI,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,6BAAK,GAAG,EAAG,SAAS,CAAC,OAAO,CAAE,QAAQ,EAAE,aAAa,CAAE,GAAI;YACrG,gCAAM,IAAI,CAAE,SAAS,CAAE,CAAO;YAC9B,+BAAK,IAAI,CAAE,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,aAAa,CAAE,CAAM;YACpE,QAAQ,CACN,CACL,CAAA;IAAA,CAAC,CAAC,CAAC;IAEN,MAAM,MAAM,GAAG,6BAAK,SAAS,EAAG,oBAAoB,eAAe,EAAE,EAAG,KAAK,EAAG,gBAAgB;QAC9F,6BAAK,SAAS,EAAG,4BAA4B,EAAC,OAAO,EAAG,GAAG,EAAE,CAAC,eAAe,CAAG,YAAY,CAAE,SAAS,CAAC,MAAM,EAAE,YAAY,EAAE,IAAI,CAAE,CAAC;YACjI,oBAAC,IAAI,IAAC,QAAQ,EAAC,aAAa,GAAG,CAC7B;QAEJ,MAAM;QAER,6BAAK,SAAS,EAAG,4BAA4B,EAAC,OAAO,EAAG,GAAG,EAAE,CAAC,eAAe,CAAG,YAAY,CAAE,SAAS,CAAC,MAAM,EAAE,YAAY,CAAE,CAAC;YAC7H,oBAAC,IAAI,IAAC,QAAQ,EAAC,cAAc,GAAG,CAC5B;QAEN,oBAAC,QAAQ,IACP,KAAK,EAAG,SAAS,EACjB,OAAO,EAAG,YAAY,EACtB,cAAc,EAAI,eAAe,EACjC,WAAW,EAAI,EAAC,GAAG;oBACjB,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;oBACtC,SAAS,EAAE,SAAS;oBACpB,oFAAoF;oBACpF,8EAA8E;oBAC9E,0EAA0E;oBAC1E,yEAAyE;iBAC1E,EAAC,GAAG,KAAK,CAAC,QAAQ,EAAE,GAErB,CACE,CAAC;IAEP,OAAO,CAAE,MAAM,CAAE,CAAC;AAEpB,CAAC,CAAA;AAED,eAAe,YAAY,CAAC"}

package/lib/logic/Arrays/thinOutArray.d.ts

@@ -0,0 +1,44 @@
+/**
+ * thinArray will take an array of elements and
+ *    return 'relatively' evenly spaced elements at for total of 'count' items.
+ *    NOTE that the spacing may not seem very even when the length is smaller
+ *
+ * example:  array = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ], count === 2:
+ *  return:  [ 0, 9 ]
+ *  if count === 3:  return:  [0,4,9]
+ *  if count === 4:  return:  [0,2,5,9]
+ *
+ * FRINGE CASE:
+ *    Added pushEven for when 1 < ratio < 2 where it would return [0] instead of every other element.
+      As an example if length === 99 and count === 51, it would return [0] but of count were 50 it would give every other item.
+      So now, if the ratio of length / count < 2, it will just return the first, every other one and the last.
+      So if you had an array of length 99 and asked for 98 back, it would only give you an array with 50 items... 0,2,4,6,8,10..., 98 so every other item.
+      This means in this case, you could get far less items back than the count, but then the logic would not have to decide which ones to skip.
+ *
+ *
+ * @param array
+ * @param count
+ * @returns
+ */
+export declare function thinArray(array: any[], count?: number): any[];
+/**
+ * getSpreadIndexes will take the length (of an array) and
+ *    return evenly spaced zero-based indexes for total of 'count' indexes.
+ *
+ * example:  array = [ A, B, C, D, E, F, G, H, I, J,  ] ( length === 10 ), count === 2:
+ *  return:  [ 0, 9 ]                     =>>> if you map these indexes, the result would be:  [ A, J ]
+ *  if count === 3:  return:  [0,4,9]     =>>> if you map these indexes, the result would be:  [  A, E, J ]
+ *  if count === 4:  return:  [0,2,5,9]   =>>> if you map these indexes, the result would be:  [  A, C, F, J ]
+ *
+ * NOTE FRINGE CASE MENTIONED IN thinArray function where the 1 < ( length / count ) < 2
+ *  You may not get the total count of items back in that case.  but every other item instead.
+ *
+ * @param array
+ * @param count
+ * @returns
+ */
+export declare function getSpreadIndexes(arrayLength: number, count: number): number[];
+/**
+ * The following commented code is what I tested in code pen for reference and testing if needed
+ */
+//# sourceMappingURL=thinOutArray.d.ts.map

package/lib/logic/Arrays/thinOutArray.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"thinOutArray.d.ts","sourceRoot":"","sources":["../../../src/logic/Arrays/thinOutArray.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,wBAAgB,SAAS,CAAE,KAAK,EAAE,GAAG,EAAE,EAAE,KAAK,GAAE,MAAU,GAAG,GAAG,EAAE,CAmCjE;AAED;;;;;;;;;;;;;;;GAeG;AAGH,wBAAgB,gBAAgB,CAAE,WAAW,EAAE,MAAM,EAAG,KAAK,EAAE,MAAM,GAAI,MAAM,EAAE,CAchF;AAGD;;GAEG"}

package/lib/logic/Arrays/thinOutArray.js

@@ -0,0 +1,122 @@
+// Function based on this post:  https://codereview.stackexchange.com/a/56627
+/**
+ * thinArray will take an array of elements and
+ *    return 'relatively' evenly spaced elements at for total of 'count' items.
+ *    NOTE that the spacing may not seem very even when the length is smaller
+ *
+ * example:  array = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ], count === 2:
+ *  return:  [ 0, 9 ]
+ *  if count === 3:  return:  [0,4,9]
+ *  if count === 4:  return:  [0,2,5,9]
+ *
+ * FRINGE CASE:
+ *    Added pushEven for when 1 < ratio < 2 where it would return [0] instead of every other element.
+      As an example if length === 99 and count === 51, it would return [0] but of count were 50 it would give every other item.
+      So now, if the ratio of length / count < 2, it will just return the first, every other one and the last.
+      So if you had an array of length 99 and asked for 98 back, it would only give you an array with 50 items... 0,2,4,6,8,10..., 98 so every other item.
+      This means in this case, you could get far less items back than the count, but then the logic would not have to decide which ones to skip.
+ *
+ *
+ * @param array
+ * @param count
+ * @returns
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function thinArray(array, count = 2) {
+    const originalLength = array.length;
+    if (originalLength === 0) {
+        return [];
+    }
+    else if (originalLength <= count) {
+        return array;
+    }
+    else if (count === 2) {
+        return [array[0], array[originalLength - 1]];
+    }
+    const targetSections = count - 1;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const output = [];
+    const ratio = originalLength / targetSections;
+    array.map((e, i) => {
+        const iPush = Math.floor(output.length * (ratio) - 1);
+        // Added pushEven for when 1 < ratio < 2 where it would return [0] instead of every other element.
+        // As an example if length === 99 and count === 51, it would return [0] but of count were 50 it would give every other item.
+        const isEven = (i % 2) === 0 ? true : false;
+        const pushEven = ratio < 2 && isEven === true ? true : false;
+        if (iPush === i || i === 0 || i === array.length || pushEven === true) {
+            output.push(e);
+        }
+    });
+    return output;
+}
+/**
+ * getSpreadIndexes will take the length (of an array) and
+ *    return evenly spaced zero-based indexes for total of 'count' indexes.
+ *
+ * example:  array = [ A, B, C, D, E, F, G, H, I, J,  ] ( length === 10 ), count === 2:
+ *  return:  [ 0, 9 ]                     =>>> if you map these indexes, the result would be:  [ A, J ]
+ *  if count === 3:  return:  [0,4,9]     =>>> if you map these indexes, the result would be:  [  A, E, J ]
+ *  if count === 4:  return:  [0,2,5,9]   =>>> if you map these indexes, the result would be:  [  A, C, F, J ]
+ *
+ * NOTE FRINGE CASE MENTIONED IN thinArray function where the 1 < ( length / count ) < 2
+ *  You may not get the total count of items back in that case.  but every other item instead.
+ *
+ * @param array
+ * @param count
+ * @returns
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function getSpreadIndexes(arrayLength, count) {
+    if (arrayLength === 0) {
+        return [];
+    }
+    const indexes = Array.from({ length: arrayLength }, (_, i) => i);
+    if (arrayLength <= count) {
+        return indexes;
+    }
+    else {
+        const keepIndexes = thinArray(indexes, count);
+        return keepIndexes;
+    }
+}
+/**
+ * The following commented code is what I tested in code pen for reference and testing if needed
+ */
+// const arrLength = 99;
+// const numbers = Array.from({ length: arrLength }, (_, i) => i );
+// function thinArray(array, count ) {
+//   const originalLength = array.length;
+//   if (originalLength === 0) {
+//       console.log('first if')
+//       return [];
+//   } else if (originalLength <= count) {
+//       console.log('first else')
+//       return array;
+//   } else if ( count === 2 ) {
+//     console.log('second else')
+//     return [ array[0], array[ originalLength - 1] ];
+//   }
+//   const targetSections = count -1;
+//   // eslint-disable-next-line @typescript-eslint/no-explicit-any
+//   const output= [];
+//   const ratio = originalLength / targetSections;
+//   console.log('test',targetSections);
+//   array.map( ( e, i ) => {
+//     const iPush = Math.floor(output.length * ( ratio ) -1);
+//     const isEven = (i % 2) == 0 ? true : false;
+//     const iPushEven = ratio < 2 && isEven === true ? true : false;
+//     if ( iPush === i || i === 0 || i === array.length || iPushEven === true ) { 
+//       output.push( e );
+//     }
+//     console.log( 'iPush',iPushEven, i, iPush, output )
+//   });
+//   console.log( 'ratio',ratio )
+//   return output;
+// }
+// const base = 51;
+// const result = thinArray( numbers,base)
+// console.log( `${( arrLength + 1 )} / ${base-1}`, ( arrLength + 1 ) / ( base-1 ) )
+// console.log(`${( arrLength + 1 )} / ${base}`, ( arrLength + 1 ) / base)
+// console.log( `${( arrLength + 1 )} / ${base+1}`, ( arrLength + 1 ) / ( base + 1 ) )
+// console.log( result )
+//# sourceMappingURL=thinOutArray.js.map

package/lib/logic/Arrays/thinOutArray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"thinOutArray.js","sourceRoot":"","sources":["../../../src/logic/Arrays/thinOutArray.ts"],"names":[],"mappings":"AAEA,6EAA6E;AAE7E;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,8DAA8D;AAC9D,MAAM,UAAU,SAAS,CAAE,KAAY,EAAE,QAAgB,CAAC;IAExD,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC;IAEpC,IAAI,cAAc,KAAK,CAAC,EAAE;QACtB,OAAO,EAAE,CAAC;KAEb;SAAM,IAAI,cAAc,IAAI,KAAK,EAAE;QAChC,OAAO,KAAK,CAAC;KAEhB;SAAM,IAAK,KAAK,KAAK,CAAC,EAAG;QACxB,OAAO,CAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,CAAE,cAAc,GAAG,CAAC,CAAC,CAAE,CAAC;KAEjD;IAED,MAAM,cAAc,GAAG,KAAK,GAAE,CAAC,CAAC;IAChC,8DAA8D;IAC9D,MAAM,MAAM,GAAS,EAAE,CAAC;IACxB,MAAM,KAAK,GAAG,cAAc,GAAG,cAAc,CAAC;IAE9C,KAAK,CAAC,GAAG,CAAE,CAAE,CAAC,EAAE,CAAC,EAAG,EAAE;QACpB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAE,KAAK,CAAE,GAAE,CAAC,CAAC,CAAC;QAEvD,kGAAkG;QAClG,4HAA4H;QAC5H,MAAM,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;QAC5C,MAAM,QAAQ,GAAG,KAAK,GAAG,CAAC,IAAI,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;QAE7D,IAAK,KAAK,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC,MAAM,IAAI,QAAQ,KAAK,IAAI,EAAG;YACvE,MAAM,CAAC,IAAI,CAAE,CAAC,CAAE,CAAC;SAClB;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAEhB,CAAC;AAED;;;;;;;;;;;;;;;GAeG;AAEH,8DAA8D;AAC9D,MAAM,UAAU,gBAAgB,CAAE,WAAmB,EAAG,KAAa;IAEnE,IAAI,WAAW,KAAK,CAAC,EAAE;QAAE,OAAO,EAAE,CAAC;KAAE;IAErC,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAE,CAAC;IAElE,IAAK,WAAW,IAAI,KAAK,EAAE;QACzB,OAAO,OAAO,CAAC;KAEhB;SAAM;QACL,MAAM,WAAW,GAAG,SAAS,CAAE,OAAO,EAAE,KAAK,CAAE,CAAC;QAChD,OAAO,WAAW,CAAC;KACpB;AAEH,CAAC;AAGD;;GAEG;AAEH,wBAAwB;AAExB,mEAAmE;AAEnE,sCAAsC;AAEtC,yCAAyC;AAEzC,gCAAgC;AAChC,gCAAgC;AAChC,mBAAmB;AACnB,0CAA0C;AAC1C,kCAAkC;AAClC,sBAAsB;AACtB,gCAAgC;AAChC,iCAAiC;AACjC,uDAAuD;AACvD,MAAM;AAEN,qCAAqC;AACrC,mEAAmE;AACnE,sBAAsB;AACtB,mDAAmD;AACnD,wCAAwC;AACxC,6BAA6B;AAC7B,8DAA8D;AAC9D,kDAAkD;AAClD,qEAAqE;AACrE,mFAAmF;AACnF,0BAA0B;AAC1B,QAAQ;AACR,yDAAyD;AACzD,QAAQ;AACR,iCAAiC;AACjC,mBAAmB;AACnB,IAAI;AAEJ,mBAAmB;AAEnB,0CAA0C;AAE1C,oFAAoF;AACpF,0EAA0E;AAC1E,sFAAsF;AACtF,wBAAwB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mikezimm/fps-library-v2",
-  "version": "1.0.80",
+  "version": "1.0.81",
   "description": "Library of reusable typescript/javascript functions, interfaces and constants",
   "license": "MIT",
   "main": "./lib/index.js",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@microsoft/sp-property-pane": "^1.15.2",
     "@mikezimm/fps-pnp2": "^1.0.27",
-    "@mikezimm/fps-styles": "^1.0.11",
+    "@mikezimm/fps-styles": "^1.0.12",
     "@pnp/spfx-controls-react": "3.12.0",
     "@pnp/spfx-property-controls": "^3.6.0",
     "office-ui-fabric-react": "^7.199.1",