@mikezimm/fps-library-v2 1.0.38 → 1.0.40

package/lib/common/PropPaneHelp/pages/listview/ListPerformance.js

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { escape } from '@microsoft/sp-lodash-subset';
+import { PivotItem, } from 'office-ui-fabric-react/lib/Pivot';
+const LinkFindInternalName = React.createElement("a", { href: "https://tomriha.com/what-is-sharepoint-column-internal-name-and-where-to-find-it/", target: "_blank" }, "Finding Internal Name of a column");
+export function getHelpListPerformance() {
+    const WebPartHelpElement = React.createElement(PivotItem, { headerText: 'Performance' },
+        React.createElement("div", { className: 'fps-pph-content' },
+            React.createElement("div", { className: 'fps-pph-topic' },
+                escape(`Performance settings`),
+                " on this page require advanced Javascript knowledge"),
+            React.createElement("div", null, escape(`Please contact your SharePoint team for assistance :)`)),
+            React.createElement("div", { className: 'fps-pph-topic' }, "Rest filter to load only specific items"),
+            React.createElement("div", null, "Rest filters are applied when the web part fetches the information."),
+            React.createElement("div", null, "Pre-filtering the data with a rest filter will improve loading times and reduce data on mobile."),
+            React.createElement("div", null,
+                "In rest filters, ",
+                React.createElement("b", null, escape(`everything is case sensitive`)),
+                " and requires using ",
+                LinkFindInternalName),
+            React.createElement("ul", null,
+                React.createElement("li", null, escape(`Status eq '4. Completed'  --- Only retrieve items where Status column equals '4. Completed'`)),
+                React.createElement("li", null, "Approver eq [Me]  --- Only retrieve items where Approver column equals currently logged in user"),
+                React.createElement("li", null, "You can combine filters but there are limitations."),
+                React.createElement("ul", null,
+                    React.createElement("li", null, "You CAN NOT filter on more than one User or Lookup column at a time"),
+                    React.createElement("li", null, "You CAN filter on a User column AND other column types"))),
+            React.createElement("div", { className: 'fps-pph-topic' }, "Javascript eval"),
+            React.createElement("div", null, "Javascript filters are applied after the data is fetched."),
+            React.createElement("div", null, "If the result of this eval === true, then the item is shown."),
+            React.createElement("div", null, "Only fetched columns can be used in Javascript eval."),
+            React.createElement("div", null, escape(`You may need to toggle the 'Get all item props' if a column is not a refiner or on a view.`)),
+            React.createElement("div", null, "Having both rest and javascript eval filters allow you to limit what items and refiners you see."),
+            React.createElement("div", null,
+                "In Javascript eval filters, ",
+                React.createElement("b", null, escape(`everything is case sensitive`)),
+                " and requires using ",
+                LinkFindInternalName),
+            React.createElement("ul", null,
+                React.createElement("li", null,
+                    "item.Author",
+                    React.createElement("b", null, "Id"),
+                    " === sourceUserInfo.Id || item.Editor",
+                    React.createElement("b", null, "Id"),
+                    " === sourceUserInfo.Id"),
+                React.createElement("li", null, "The previous example filters items where CreatedBy OR ModifiedBy is the currently logged in user"),
+                React.createElement("div", null,
+                    React.createElement("mark", null,
+                        React.createElement("b", null, "NOT seeing any items with example?:")),
+                    " Be sure to add Id after the ",
+                    React.createElement("b", null, "Internal Column names"),
+                    "."),
+                React.createElement("li", null, escape(`The javascript syntax for an item's User columns is InternalColumName followed by either Id or Title - with no space or .dot.`)))));
+    return WebPartHelpElement;
+}
+//# sourceMappingURL=ListPerformance.js.map

package/lib/common/PropPaneHelp/pages/listview/ListPerformance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListPerformance.js","sourceRoot":"","sources":["../../../../../src/common/PropPaneHelp/pages/listview/ListPerformance.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAE,SAAS,GAAG,MAAM,kCAAkC,CAAC;AAE9D,MAAM,oBAAoB,GAAG,2BAAG,IAAI,EAAC,mFAAmF,EAAC,MAAM,EAAC,QAAQ,wCAAsC,CAAC;AAE/K,MAAM,UAAU,sBAAsB;IAEpC,MAAM,kBAAkB,GAAG,oBAAC,SAAS,IAAC,UAAU,EAAG,aAAa;QAC1D,6BAAK,SAAS,EAAG,iBAAiB;YAKhC,6BAAK,SAAS,EAAG,eAAe;gBAAI,MAAM,CAAC,sBAAsB,CAAC;sEAA0D;YAC5H,iCAAM,MAAM,CAAC,uDAAuD,CAAC,CAAO;YAE5E,6BAAK,SAAS,EAAG,eAAe,8CAAgD;YAChF,uGAA8E;YAC9E,mIAA0G;YAC1G;;gBAAsB,+BAAI,MAAM,CAAC,8BAA8B,CAAC,CAAK;;gBAAsB,oBAAoB,CAAQ;YACvH;gBACE,gCAAK,MAAM,CAAC,6FAA6F,CAAC,CAAM;gBAChH,kIAAwG;gBACxG,qFAA2D;gBAC3D;oBACE,sGAA4E;oBAC5E,yFAA+D,CAC5D,CACF;YAEL,6BAAK,SAAS,EAAG,eAAe,sBAAwB;YACxD,6FAAoE;YACpE,gGAAuE;YACvE,wFAA+D;YAC/D,iCAAM,MAAM,CAAC,4FAA4F,CAAC,CAAO;YACjH,oIAA2G;YAC3G;;gBAAiC,+BAAI,MAAM,CAAC,8BAA8B,CAAC,CAAK;;gBAAsB,oBAAoB,CAAQ;YAClI;gBACE;;oBAAe,oCAAS;;oBAAqC,oCAAS;6CAA2B;gBACjG,mIAAyG;gBACzG;oBAAK;wBAAM,qEAA0C,CAAO;;oBAA6B,uDAA4B;wBAAO;gBAC5H,gCAAK,MAAM,CAAC,+HAA+H,CAAC,CAAM,CAC/I,CAED,CACI,CACf;IAED,OAAO,kBAAkB,CAAC;AAE5B,CAAC"}

package/lib/common/PropPaneHelp/pages/listview/RefinerColumns.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function getHelpRefinerColumns(): JSX.Element;
+//# sourceMappingURL=RefinerColumns.d.ts.map

package/lib/common/PropPaneHelp/pages/listview/RefinerColumns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RefinerColumns.d.ts","sourceRoot":"","sources":["../../../../../src/common/PropPaneHelp/pages/listview/RefinerColumns.tsx"],"names":[],"mappings":";AAOA,wBAAgB,qBAAqB,IAAO,GAAG,CAAC,OAAO,CA+BtD"}

package/lib/common/PropPaneHelp/pages/listview/RefinerColumns.js

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { escape } from '@microsoft/sp-lodash-subset';
+import { PivotItem, } from 'office-ui-fabric-react/lib/Pivot';
+const LinkFindInternalName = React.createElement("a", { href: "https://tomriha.com/what-is-sharepoint-column-internal-name-and-where-to-find-it/", target: "_blank" }, "Finding Internal Name of a column");
+export function getHelpRefinerColumns() {
+    const WebPartHelpElement = React.createElement(PivotItem, { headerText: 'Refiner Columns' },
+        React.createElement("div", { className: 'fps-pph-content' },
+            React.createElement("div", { className: 'fps-pph-topic' }, escape(`Setting the Refiner 'Column Value'`)),
+            React.createElement("div", null,
+                React.createElement("mark", null,
+                    React.createElement("b", null, "NOTE:")),
+                " ColumnNames in this webpart ",
+                React.createElement("b", null, "MUST BE Internal Column names"),
+                "."),
+            React.createElement("div", null,
+                React.createElement("b", null, "Internal Column names"),
+                " ARE NOT the Column Titles you see. ",
+                LinkFindInternalName),
+            React.createElement("div", { className: 'fps-pph-topic' }, "Simple column types (Text, Date, Number, Single/Multi Select Choice)"),
+            React.createElement("div", null,
+                React.createElement("b", null, "InternalColumnName"),
+                " - Nothing special require for these column types"),
+            React.createElement("div", { className: 'fps-pph-topic' }, escape(`User columns (Single/Multi) on the main list (can not be part of lookup column)`)),
+            React.createElement("div", null,
+                React.createElement("b", null, "UserColumnName/Title"),
+                escape(` - /Title shows the person's Name`)),
+            React.createElement("div", null, "See the Users tab in this page for more information on using User columns"),
+            React.createElement("div", { className: 'fps-pph-topic' }, "Lookup columns (Single/Multi) - that are brought in under the LookupColumn"),
+            React.createElement("div", null,
+                React.createElement("b", null, "LookupColumnName/Title"),
+                " - /Title shows the Title field from the lookup item"),
+            React.createElement("div", null,
+                React.createElement("b", null, "LookupColumnName/OtherField"),
+                " - /OtherField is the InternalColumnName of the lookup column from the other list"),
+            React.createElement("div", { className: 'fps-pph-topic', style: { textDecoration: 'underline' } }, "Example with real column names"),
+            React.createElement("div", { style: { paddingTop: '8px' } }, escape(`Say you have a lookup column like 'CustomerPlant' which has a Title column (Plant name) and Country column (where it is located)`)),
+            React.createElement("div", null,
+                "To show Customer Plant Title, use ",
+                React.createElement("b", null, "CustomerPlant/Title")),
+            React.createElement("div", null,
+                "To show Customer Plant Country, use ",
+                React.createElement("b", null, "CustomerPlant/Country"))));
+    return WebPartHelpElement;
+}
+//# sourceMappingURL=RefinerColumns.js.map

package/lib/common/PropPaneHelp/pages/listview/RefinerColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RefinerColumns.js","sourceRoot":"","sources":["../../../../../src/common/PropPaneHelp/pages/listview/RefinerColumns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAE,SAAS,GAAG,MAAM,kCAAkC,CAAC;AAE9D,MAAM,oBAAoB,GAAG,2BAAG,IAAI,EAAC,mFAAmF,EAAC,MAAM,EAAC,QAAQ,wCAAsC,CAAC;AAE/K,MAAM,UAAU,qBAAqB;IAEnC,MAAM,kBAAkB,GAAG,oBAAC,SAAS,IAAC,UAAU,EAAG,iBAAiB;QAClE,6BAAK,SAAS,EAAG,iBAAiB;YAChC,6BAAK,SAAS,EAAG,eAAe,IAAI,MAAM,CAAC,oCAAoC,CAAC,CAAO;YACvF;gBAAK;oBAAM,uCAAY,CAAO;;gBAA6B,+DAAoC;oBAAO;YACtG;gBAAK,uDAA4B;;gBAAsC,oBAAoB,CAAQ;YACnG,6BAAK,SAAS,EAAG,eAAe,2EAA6E;YAC7G;gBAAK,oDAAyB;oEAAuD;YAKrF,6BAAK,SAAS,EAAG,eAAe,IAAI,MAAM,CAAC,iFAAiF,CAAC,CAAO;YACpI;gBAAK,sDAA2B;gBAAC,MAAM,CAAC,mCAAmC,CAAC,CAAO;YACnF,6GAAoF;YAEpF,6BAAK,SAAS,EAAG,eAAe,iFAAmF;YACnH;gBAAK,wDAA6B;uEAA0D;YAC5F;gBAAK,6DAAkC;oGAAuF;YAE9H,6BAAK,SAAS,EAAG,eAAe,EAAG,KAAK,EAAE,EAAE,cAAc,EAAE,WAAW,EAAC,qCAAsC;YAC9G,6BAAK,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAC,IAAG,MAAM,CAAC,kIAAkI,CAAC,CAAO;YACpL;;gBAAuC,qDAA0B,CAAM;YACvE;;gBAAyC,uDAA4B,CAAM,CACvE,CACI,CACX;IAED,OAAO,kBAAkB,CAAC;AAE5B,CAAC"}

package/lib/common/PropPaneHelp/pages/listview/RefinerRules.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function getHelpRefinerRules(): JSX.Element;
+//# sourceMappingURL=RefinerRules.d.ts.map

package/lib/common/PropPaneHelp/pages/listview/RefinerRules.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RefinerRules.d.ts","sourceRoot":"","sources":["../../../../../src/common/PropPaneHelp/pages/listview/RefinerRules.tsx"],"names":[],"mappings":";AASA,wBAAgB,mBAAmB,IAAO,GAAG,CAAC,OAAO,CAkCpD"}

package/lib/common/PropPaneHelp/pages/listview/RefinerRules.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { escape } from '@microsoft/sp-lodash-subset';
+import { PivotItem, } from 'office-ui-fabric-react/lib/Pivot';
+import { RefinerRulesStrs, RefinerRulesInts, RefinerRulesNums, RefinerRulesTime, RefinerRulesUser, } from '../../../../components/interfaces/Refiners/IRefiners';
+const padRight15 = { paddingRight: '15px' };
+export function getHelpRefinerRules() {
+    const WebPartHelpElement = React.createElement(PivotItem, { headerText: 'Refiner Rules' },
+        React.createElement("div", { className: 'fps-pph-content' },
+            React.createElement("div", { className: 'fps-pph-topic' }, "Rules are like calculated columns without the work - Only applies to refiners."),
+            React.createElement("div", null,
+                React.createElement("b", null, "Example:"),
+                "  If you have a date column, actual dates or times are not good refiners because they typically will have to many values to choose from.",
+                React.createElement("br", null),
+                escape(`However if you apply a rule like 'groupByYears', it will bucket all your items into years based on the values in the column.`),
+                React.createElement("br", null)),
+            React.createElement("div", null,
+                React.createElement("b", null, "NOTE:"),
+                escape(`  The web part only shows refiners based on the items it intially reads in. So in the case of 'groupByYears', `),
+                React.createElement("b", null, "you will not see a year if there are no items for that year"),
+                "."),
+            React.createElement("div", null,
+                React.createElement("b", null, "parseBy..."),
+                " will take a string column and create Refiners by splitting the string by commas and semi-colons."),
+            React.createElement("div", null,
+                React.createElement("b", null, "groupBy..."),
+                " will take number or date column values and group them into larger buckets."),
+            React.createElement("div", null, "Generally speaking, only select one per refiner."),
+            React.createElement("div", { style: { display: 'flex' } },
+                React.createElement("div", { style: padRight15 },
+                    React.createElement("div", { className: 'fps-pph-topic' }, "Number rules"),
+                    React.createElement("ul", null, RefinerRulesNums.map((rule, idx) => React.createElement("li", { key: idx }, rule)))),
+                React.createElement("div", { style: padRight15 },
+                    React.createElement("div", { className: 'fps-pph-topic' }, "Integer rules"),
+                    React.createElement("ul", null, RefinerRulesInts.map((rule, idx) => React.createElement("li", { key: idx }, rule)))),
+                React.createElement("div", { style: padRight15 },
+                    React.createElement("div", { className: 'fps-pph-topic' }, "String rules"),
+                    React.createElement("ul", null, RefinerRulesStrs.map((rule, idx) => React.createElement("li", { key: idx }, rule)))),
+                React.createElement("div", { style: padRight15 },
+                    React.createElement("div", { className: 'fps-pph-topic' }, "Time rules"),
+                    React.createElement("ul", null, RefinerRulesTime.map((rule, idx) => React.createElement("li", { key: idx }, rule)))),
+                React.createElement("div", { style: padRight15 },
+                    React.createElement("div", { className: 'fps-pph-topic' }, "User rules"),
+                    React.createElement("ul", null, RefinerRulesUser.map((rule, idx) => React.createElement("li", { key: idx }, rule)))))));
+    return WebPartHelpElement;
+}
+//# sourceMappingURL=RefinerRules.js.map

package/lib/common/PropPaneHelp/pages/listview/RefinerRules.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RefinerRules.js","sourceRoot":"","sources":["../../../../../src/common/PropPaneHelp/pages/listview/RefinerRules.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAE,SAAS,GAAG,MAAM,kCAAkC,CAAC;AAE9D,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,GAAI,MAAM,sDAAsD,CAAC;AAElK,MAAM,UAAU,GAAwB,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC;AAEjE,MAAM,UAAU,mBAAmB;IAEjC,MAAM,kBAAkB,GAAG,oBAAC,SAAS,IAAC,UAAU,EAAG,eAAe;QAClE,6BAAK,SAAS,EAAG,iBAAiB;YAC9B,6BAAK,SAAS,EAAG,eAAe,qFAAuF;YACvH;gBAAK,0CAAe;;gBAAwI,+BAAK;gBAChK,MAAM,CAAC,8HAA8H,CAAC;gBAAC,+BAAK,CAAM;YACnJ;gBAAK,uCAAY;gBAAC,MAAM,CAAC,gHAAgH,CAAC;gBAAC,6FAAkE;oBAAO;YACpN;gBAAK,4CAAiB;oHAAuG;YAC7H;gBAAK,4CAAiB;8FAAiF;YACvG,oFAA2D;YAC3D,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;gBAC3B,6BAAK,KAAK,EAAG,UAAU;oBAAG,6BAAK,SAAS,EAAG,eAAe,mBAAqB;oBAAA,gCAC3E,gBAAgB,CAAC,GAAG,CAAE,CAAE,IAAwB,EAAE,GAAW,EAAE,EAAE,CAAC,4BAAI,GAAG,EAAG,GAAG,IAAK,IAAI,CAAO,CAAE,CAChG,CAAM;gBACX,6BAAK,KAAK,EAAG,UAAU;oBAAG,6BAAK,SAAS,EAAG,eAAe,oBAAsB;oBAAA,gCAC5E,gBAAgB,CAAC,GAAG,CAAE,CAAE,IAAwB,EAAE,GAAW,EAAE,EAAE,CAAC,4BAAI,GAAG,EAAG,GAAG,IAAK,IAAI,CAAO,CAAE,CAChG,CAAM;gBACX,6BAAK,KAAK,EAAG,UAAU;oBAAG,6BAAK,SAAS,EAAG,eAAe,mBAAqB;oBAAA,gCAC3E,gBAAgB,CAAC,GAAG,CAAE,CAAE,IAAwB,EAAE,GAAW,EAAE,EAAE,CAAC,4BAAI,GAAG,EAAG,GAAG,IAAK,IAAI,CAAO,CAAE,CAChG,CAAM;gBACX,6BAAK,KAAK,EAAG,UAAU;oBAAG,6BAAK,SAAS,EAAG,eAAe,iBAAmB;oBAAA,gCACzE,gBAAgB,CAAC,GAAG,CAAE,CAAE,IAAwB,EAAE,GAAW,EAAE,EAAE,CAAC,4BAAI,GAAG,EAAG,GAAG,IAAK,IAAI,CAAO,CAAE,CAChG,CAAM;gBACX,6BAAK,KAAK,EAAG,UAAU;oBAAG,6BAAK,SAAS,EAAG,eAAe,iBAAmB;oBAAA,gCACzE,gBAAgB,CAAC,GAAG,CAAE,CAAE,IAAwB,EAAE,GAAW,EAAE,EAAE,CAAC,4BAAI,GAAG,EAAG,GAAG,IAAK,IAAI,CAAO,CAAE,CAChG,CAAM,CACT,CACJ,CACI,CACT;IAED,OAAO,kBAAkB,CAAC;AAE5B,CAAC"}

package/lib/common/PropPaneHelp/pages/listview/Stats.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IWebpartBannerProps } from '../../../../banner/mainReact/IWebpartBannerProps';
+export declare function getHelpStats(bannerProps: IWebpartBannerProps): JSX.Element;
+//# sourceMappingURL=Stats.d.ts.map

package/lib/common/PropPaneHelp/pages/listview/Stats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stats.d.ts","sourceRoot":"","sources":["../../../../../src/common/PropPaneHelp/pages/listview/Stats.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kDAAkD,CAAC;AAIvF,wBAAgB,YAAY,CAAG,WAAW,EAAE,mBAAmB,GAAM,GAAG,CAAC,OAAO,CAkD/E"}

package/lib/common/PropPaneHelp/pages/listview/Stats.js

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { escape } from '@microsoft/sp-lodash-subset';
+import { PivotItem, } from 'office-ui-fabric-react/lib/Pivot';
+import { putObjectIntoJSON } from '../../../../components/atoms/Elements/putObjectIntoJSON';
+const LinkFindInternalName = React.createElement("a", { href: "https://tomriha.com/what-is-sharepoint-column-internal-name-and-where-to-find-it/", target: "_blank" }, "Finding Internal Name of a column");
+import { SampleCharts } from './samples/SampleCharts';
+import { PleaseSeeWiki } from '../../atoms/SeeWiki';
+export function getHelpStats(bannerProps) {
+    const WebPartHelpElement = React.createElement(PivotItem, { headerText: 'Stats' },
+        React.createElement("div", { className: 'fps-pph-content' },
+            React.createElement("div", { className: 'fps-pph-topic' }, "Stats are basic kpi style charts embeded into the webpart"),
+            React.createElement("ul", null,
+                React.createElement("li", null, "If you want basic KPI charts (like counting items) with little effort, these are for you!"),
+                React.createElement("li", null, "These are not intended for anything advanced.  Use PowerBI or other alternatives for that."),
+                React.createElement("li", null, "Basic Charts include Tiles with Counts, Horizontal Bars, and Paretos"),
+                React.createElement("li", null, "They give the end user a simple button to see charts defined in the property pane."),
+                React.createElement("li", null, "These require some advanced settings.  Please contact the SharePoint team or Join ShareLab to get more information.")),
+            React.createElement("div", { style: { display: 'flex' } },
+                React.createElement("div", null,
+                    React.createElement("div", { className: 'fps-pph-topic' }, "Sample Chart property"),
+                    putObjectIntoJSON(SampleCharts)),
+                React.createElement("div", null,
+                    React.createElement("div", { className: 'fps-pph-topic' }, "About Charts structure"),
+                    React.createElement("ul", null,
+                        React.createElement("li", null, "Must follow this minimum structure."),
+                        React.createElement("li", null, "Charts structure is made up of an array of charts ( even if you only have one )."),
+                        React.createElement("li", null, "A typical chart is made up of these common properites"),
+                        React.createElement("ul", null,
+                            React.createElement("li", null,
+                                React.createElement("b", null, "primaryField:"),
+                                " InternalColumnName"),
+                            React.createElement("li", null,
+                                React.createElement("b", null, "title:"),
+                                " Title above the chart"),
+                            React.createElement("li", null,
+                                React.createElement("b", null, "stat:"),
+                                " What math operation you want to do on the primaryField"),
+                            React.createElement("div", null, escape(`Available stats: 'sum' , 'avg' , 'max' , 'min' , 'count', 'daysAgo' , 'monthsAgo' , 'eval'`)),
+                            React.createElement("li", null,
+                                React.createElement("b", null, "chartTypes:"),
+                                " Differnt types of charts you toggle through when you click on the chart bars."),
+                            React.createElement("div", null, escape(`Available types: 'pareto-asc' | 'pareto-dec' | 'pareto-labels' | 'stacked-column-labels' | 'stacked-column-dec' | 'stacked-column-asc' | 'kpi-tiles'`)),
+                            React.createElement("div", null,
+                                "The best advice for the types is just try some and see what they do ",
+                                `:)`)),
+                        React.createElement("div", { className: 'fps-pph-topic' }, "The example shown here will:"),
+                        React.createElement("ol", null,
+                            React.createElement("li", null, escape(`get the field called 'Id'`)),
+                            React.createElement("li", null, "get a count of the items (broken down by your refiner categories)"),
+                            React.createElement("li", null, "first show a pareto chart decending by the count (highest total count per refiner on top)"),
+                            React.createElement("li", null, "If you click on a bar in the chart, it will toggle between a pareto chart and a stacked Horizontal bar chart"))))),
+            PleaseSeeWiki(bannerProps)));
+    return WebPartHelpElement;
+}
+//# sourceMappingURL=Stats.js.map

package/lib/common/PropPaneHelp/pages/listview/Stats.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stats.js","sourceRoot":"","sources":["../../../../../src/common/PropPaneHelp/pages/listview/Stats.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAE,SAAS,GAAG,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAE5F,MAAM,oBAAoB,GAAG,2BAAG,IAAI,EAAC,mFAAmF,EAAC,MAAM,EAAC,QAAQ,wCAAsC,CAAC;AAG/K,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,MAAM,UAAU,YAAY,CAAG,WAAgC;IAE7D,MAAM,kBAAkB,GAAG,oBAAC,SAAS,IAAE,UAAU,EAAG,OAAO;QACzD,6BAAK,SAAS,EAAG,iBAAiB;YAChC,6BAAK,SAAS,EAAG,eAAe,gEAAkE;YAClG;gBACE,4HAAkG;gBAClG,6HAAmG;gBACnG,uGAA6E;gBAC7E,qHAA2F;gBAC3F,sJAA4H,CACzH;YACL,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;gBAC7B;oBACE,6BAAK,SAAS,EAAG,eAAe,4BAA8B;oBAC5D,iBAAiB,CAAE,YAAY,CAAE,CAC/B;gBACN;oBACE,6BAAK,SAAS,EAAG,eAAe,6BAA+B;oBAC/D;wBACE,sEAA4C;wBAC5C,mHAAyF;wBACzF,wFAA8D;wBAC9D;4BACE;gCAAI,+CAAoB;sDAAwB;4BAChD;gCAAI,wCAAa;yDAA2B;4BAC5C;gCAAI,uCAAY;0FAA4D;4BAC5E,iCAAM,MAAM,CAAC,4FAA4F,CAAC,CAAO;4BAEjH;gCAAI,6CAAkB;iHAAmF;4BACzG,iCAAM,MAAM,CAAC,sJAAsJ,CAAC,CAAO;4BAC3K;;gCAA0E,IAAI,CAAO,CAClF;wBACL,6BAAK,SAAS,EAAG,eAAe,mCAAqC;wBACrE;4BACE,gCAAK,MAAM,CAAC,2BAA2B,CAAC,CAAM;4BAC9C,oGAA0E;4BAC1E,4HAAkG;4BAClG,+IAAqH,CAClH,CACF,CACD,CACF;YACJ,aAAa,CAAE,WAAW,CAAE,CAC1B,CACI,CACX;IAED,OAAO,kBAAkB,CAAC;AAE5B,CAAC"}

package/lib/common/PropPaneHelp/pages/listview/StringFunctions.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function getHelpStringFunctions(): JSX.Element;
+//# sourceMappingURL=StringFunctions.d.ts.map

package/lib/common/PropPaneHelp/pages/listview/StringFunctions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StringFunctions.d.ts","sourceRoot":"","sources":["../../../../../src/common/PropPaneHelp/pages/listview/StringFunctions.tsx"],"names":[],"mappings":";AAWA,wBAAgB,sBAAsB,IAAO,GAAG,CAAC,OAAO,CA6CvD"}

package/lib/common/PropPaneHelp/pages/listview/StringFunctions.js

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { escape } from '@microsoft/sp-lodash-subset';
+import { PivotItem, } from 'office-ui-fabric-react/lib/Pivot';
+import { DoNotExpandLinkColumns, DoNotExpandTrimB4, DoNotExpandTrimAfter, DoNotExpandTrimWords, DoNotExpandTrimTimes, DoNotExpandTrimSpecial } from '../../../../pnpjs/Lists/getVX/IGetInterfaceV2';
+const padRight40 = { paddingRight: '40px' };
+export function getHelpStringFunctions() {
+    const WebPartHelpElement = React.createElement(PivotItem, { headerText: 'String Functions' },
+        React.createElement("div", { className: 'fps-pph-content' },
+            React.createElement("div", { className: 'fps-pph-topic' }, "String Functions are like calculated columns without the work."),
+            React.createElement("div", null,
+                "The goal of String functions are to make strings shorter for both ",
+                React.createElement("b", null, "refiners"),
+                " and ",
+                React.createElement("b", null, "views"),
+                "."),
+            React.createElement("div", null, "Can be applied to columns to modify the values for this webpart - like an ad-hoc calculated column but more."),
+            React.createElement("div", null, "For example, lets say you want to show the initials of the Editor (Modified By)"),
+            React.createElement("div", null,
+                "To get the full name of the editor, use ",
+                React.createElement("b", null, "Editor/Title")),
+            React.createElement("div", null,
+                "To get their initials instead, use ",
+                React.createElement("b", null,
+                    "Editor/Title",
+                    React.createElement("span", { style: { color: 'green' } }, "/Initials"))),
+            React.createElement("div", { style: { display: 'flex' } },
+                React.createElement("div", { style: padRight40 },
+                    React.createElement("div", { className: 'fps-pph-topic' }, "Split before character"),
+                    React.createElement("ul", null, DoNotExpandTrimB4.map((rule, idx) => React.createElement("li", { key: idx }, '/' + rule)))),
+                React.createElement("div", { style: padRight40 },
+                    React.createElement("div", { className: 'fps-pph-topic' }, "Split after character"),
+                    React.createElement("ul", null, DoNotExpandTrimAfter.map((rule, idx) => React.createElement("li", { key: idx }, '/' + rule)))),
+                React.createElement("div", { style: padRight40 },
+                    React.createElement("div", { className: 'fps-pph-topic' }, "Words"),
+                    React.createElement("ul", null, DoNotExpandTrimWords.map((rule, idx) => React.createElement("li", { key: idx }, '/' + rule)))),
+                React.createElement("div", { style: padRight40 },
+                    React.createElement("div", { className: 'fps-pph-topic' }, "Initials"),
+                    React.createElement("ul", null, DoNotExpandTrimSpecial.map((rule, idx) => React.createElement("li", { key: idx }, '/' + rule)))),
+                React.createElement("div", null,
+                    React.createElement("div", { style: padRight40 },
+                        React.createElement("div", { className: 'fps-pph-topic' }, "Link columns"),
+                        React.createElement("ul", null, DoNotExpandLinkColumns.map((rule, idx) => React.createElement("li", { key: idx }, '/' + rule)))),
+                    React.createElement("div", { style: padRight40 },
+                        React.createElement("div", { className: 'fps-pph-topic', title: "These automatically convert to your Local Time" }, "Time columns - LOCAL"),
+                        React.createElement("ul", null, DoNotExpandTrimTimes.map((rule, idx) => React.createElement("li", { key: idx }, '/' + rule)))))),
+            React.createElement("div", { className: 'fps-pph-topic' }, "Notes: "),
+            React.createElement("div", null, "Words ending in Capital C - the C stands for Characters so FirstWord2C = First 2 characters of the first word"),
+            React.createElement("div", null, "Words ending in Capital D - includes digits so InitalsD includes all Initials AND numbers"),
+            React.createElement("div", null, escape(`at this time, 'TrimB42ndDot', 'FirstAcronym', 'SecondAcronym' are not implimented :( `)),
+            React.createElement("div", null, escape(`Object. : If string column is parsable JSON:  ColumnName/Object.propKey to get the value for propKey in Text column called 'ColumnName'`))));
+    return WebPartHelpElement;
+}
+//# sourceMappingURL=StringFunctions.js.map

package/lib/common/PropPaneHelp/pages/listview/StringFunctions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StringFunctions.js","sourceRoot":"","sources":["../../../../../src/common/PropPaneHelp/pages/listview/StringFunctions.tsx"],"names":[],"mappings":"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"}

package/lib/common/PropPaneHelp/pages/listview/Users.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function getHelpUsers(): JSX.Element;
+//# sourceMappingURL=Users.d.ts.map

package/lib/common/PropPaneHelp/pages/listview/Users.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Users.d.ts","sourceRoot":"","sources":["../../../../../src/common/PropPaneHelp/pages/listview/Users.tsx"],"names":[],"mappings":";AAWA,wBAAgB,YAAY,IAAO,GAAG,CAAC,OAAO,CAuC7C"}

package/lib/common/PropPaneHelp/pages/listview/Users.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { PivotItem, } from 'office-ui-fabric-react/lib/Pivot';
+const padRight15 = { paddingRight: '15px' };
+// const padRight40: React.CSSProperties = { paddingRight: '40px' };
+const UserColumnRestPropertiesSPO = ['Title', 'Name', 'EMail', 'FirstName', 'UserName', 'ID', 'SipAddress', 'Office', 'Modified', 'Created',];
+const UserColumnRestPropertiesSPONOTWORK = ['MobilePhone', 'Department', 'JobTitle', 'WorkPhone', 'ImnName', 'NameWithPicture', 'NameWithPictureAndDetails', 'ContentTypeDisp',];
+export function getHelpUsers() {
+    const WebPartHelpElement = React.createElement(PivotItem, { headerText: 'Users' },
+        React.createElement("div", { className: 'fps-pph-content' },
+            React.createElement("div", { className: 'fps-pph-topic' }, "Properties you can get from a Single/Multi User Column."),
+            React.createElement("div", { style: { display: 'flex' } },
+                React.createElement("div", { style: padRight15 },
+                    React.createElement("div", { className: 'fps-pph-topic' }, "Valid User Props"),
+                    React.createElement("ul", null, UserColumnRestPropertiesSPO.map((rule, idx) => React.createElement("li", { key: idx }, rule)))),
+                React.createElement("div", { style: padRight15 },
+                    React.createElement("div", { className: 'fps-pph-topic' }, "May not work in SPO"),
+                    React.createElement("ul", null, UserColumnRestPropertiesSPONOTWORK.map((rule, idx) => React.createElement("li", { key: idx }, rule)))),
+                React.createElement("div", null,
+                    React.createElement("div", { className: 'fps-pph-topic' }, "Sample User Props"),
+                    React.createElement("ul", null,
+                        React.createElement("li", null,
+                            React.createElement("b", null, "Title"),
+                            " ~ John Smith"),
+                        React.createElement("li", null,
+                            React.createElement("b", null, "Name"),
+                            " ~ i:0#.f|membership|john.smith@fps.com"),
+                        React.createElement("li", null,
+                            React.createElement("b", null, "EMail"),
+                            " ~ john.smith@fps.com"),
+                        React.createElement("li", null,
+                            React.createElement("b", null, "Office"),
+                            " ~ Office in Delve"),
+                        React.createElement("li", null,
+                            React.createElement("b", null, "ID"),
+                            " ~ 79"),
+                        React.createElement("li", null,
+                            React.createElement("b", null, "FirstName"),
+                            " ~ John"),
+                        React.createElement("li", null,
+                            React.createElement("b", null, "LastName"),
+                            " ~ Smith"),
+                        React.createElement("li", null,
+                            React.createElement("b", null, "UserName"),
+                            " ~ john.smith@fps.com"),
+                        React.createElement("li", null,
+                            React.createElement("b", null, "SipAddress"),
+                            " ~ john.smith@fps.com")))),
+            React.createElement("a", { href: "https://sharepoint.stackexchange.com/a/272687", target: "_blank" }, "source:  stack exchange")));
+    return WebPartHelpElement;
+}
+//# sourceMappingURL=Users.js.map

package/lib/common/PropPaneHelp/pages/listview/Users.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Users.js","sourceRoot":"","sources":["../../../../../src/common/PropPaneHelp/pages/listview/Users.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,SAAS,GAAG,MAAM,kCAAkC,CAAC;AAE9D,MAAM,UAAU,GAAwB,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC;AACjE,oEAAoE;AAEpE,MAAM,2BAA2B,GAAc,CAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAG,CAAC;AAC3J,MAAM,kCAAkC,GAAc,CAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,iBAAiB,EAAE,2BAA2B,EAAE,iBAAiB,EAAG,CAAC;AAE9L,MAAM,UAAU,YAAY;IAE1B,MAAM,kBAAkB,GAAG,oBAAC,SAAS,IAAE,UAAU,EAAG,OAAO;QACzD,6BAAK,SAAS,EAAG,iBAAiB;YAChC,6BAAK,SAAS,EAAG,eAAe,8DAAgE;YAEhG,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;gBAG7B,6BAAK,KAAK,EAAG,UAAU;oBAAG,6BAAK,SAAS,EAAG,eAAe,uBAAyB;oBAAA,gCAC/E,2BAA2B,CAAC,GAAG,CAAE,CAAE,IAAa,EAAE,GAAW,EAAE,EAAE,CAAC,4BAAI,GAAG,EAAG,GAAG,IAAK,IAAI,CAAO,CAAE,CAC9F,CAAM;gBAEb,6BAAK,KAAK,EAAG,UAAU;oBAAG,6BAAK,SAAS,EAAG,eAAe,0BAA4B;oBAAA,gCAChF,kCAAkC,CAAC,GAAG,CAAE,CAAE,IAAa,EAAE,GAAW,EAAE,EAAE,CAAC,4BAAI,GAAG,EAAG,GAAG,IAAK,IAAI,CAAO,CAAE,CACrG,CAAM;gBAEf;oBACE,6BAAK,SAAS,EAAG,eAAe,wBAA0B;oBAC1D;wBACE;4BAAI,uCAAY;4CAAkB;wBAClC;4BAAI,sCAAW;sEAA4C;wBAC3D;4BAAI,uCAAY;oDAA0B;wBAC1C;4BAAI,wCAAa;iDAAuB;wBACxC;4BAAI,oCAAS;oCAAU;wBACvB;4BAAI,2CAAgB;sCAAY;wBAChC;4BAAI,0CAAe;uCAAa;wBAChC;4BAAI,0CAAe;oDAA0B;wBAC7C;4BAAI,4CAAiB;oDAA0B,CAC5C,CACD,CACF;YACN,2BAAG,IAAI,EAAC,+CAA+C,EAAC,MAAM,EAAC,QAAQ,8BAA4B,CAC/F,CACI,CACX;IAED,OAAO,kBAAkB,CAAC;AAE5B,CAAC"}

package/lib/common/PropPaneHelp/pages/listview/Views.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IWebpartBannerProps } from '../../../../banner/mainReact/IWebpartBannerProps';
+export declare function getHelpViews(bannerProps: IWebpartBannerProps): JSX.Element;
+//# sourceMappingURL=Views.d.ts.map

package/lib/common/PropPaneHelp/pages/listview/Views.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Views.d.ts","sourceRoot":"","sources":["../../../../../src/common/PropPaneHelp/pages/listview/Views.tsx"],"names":[],"mappings":";AAoCA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kDAAkD,CAAC;AAKvF,wBAAgB,YAAY,CAAG,WAAW,EAAE,mBAAmB,GAAK,GAAG,CAAC,OAAO,CAoF9E"}

package/lib/common/PropPaneHelp/pages/listview/Views.js

@@ -0,0 +1,155 @@
+import * as React from 'react';
+import { PivotItem, } from 'office-ui-fabric-react/lib/Pivot';
+import { Icon, } from 'office-ui-fabric-react/lib/Icon';
+const SampleViewJSON = [
+    // https://github.com/mikezimm/drilldown7/issues/161
+    {
+        "name": "Id",
+        "displayName": "Id",
+        "minWidth": 20,
+        "maxWidth": 35,
+        "linkPropertyName": "goToPropsLink"
+    },
+    {
+        "name": "Author/Title",
+        "displayName": "Created by",
+        "minWidth": 50
+    },
+    {
+        "name": "FileRef",
+        "displayName": "FileLeafRef",
+        "maxWidth": 50,
+        "linkPropertyName": "goToItemPreview"
+    },
+    {
+        "name": "TextColumn",
+        "displayName": "Link formula",
+        "maxWidth": 50,
+        "linkSubstitute": "https://www.google.com/search?q={{Editor/Title}}",
+        "textSubstitute": "{{Editor/Title}} was the last to modify this item",
+        "showEmptyAsEmpty": true,
+    },
+];
+import { PleaseSeeWiki } from '../../atoms/SeeWiki';
+import { LinkFindInternalName } from '../../atoms/InternalNames';
+import { putObjectIntoJSON } from '../../../../components/atoms/Elements/putObjectIntoJSON';
+export function getHelpViews(bannerProps) {
+    const WebPartHelpElement = React.createElement(PivotItem, { headerText: 'Views' },
+        React.createElement("div", { className: 'fps-pph-content' },
+            React.createElement("div", null, "Views are how  you define your list view in the web part."),
+            React.createElement("div", null, "The easiest way to get started, is to unlock our Pre-Configured List definitions in page 1 of properties.  Then select one of the pre-configured lists. Or contact your local SharePoint team if you have a good candidate for a company wide template."),
+            React.createElement("div", null, "TIP:  Enable sync views option in Wide View to copy those settings to all widths"),
+            React.createElement("div", { style: { display: 'flex' } },
+                React.createElement("div", null,
+                    React.createElement("div", { className: 'fps-pph-topic' }, "Sample view"),
+                    putObjectIntoJSON(SampleViewJSON)),
+                React.createElement("div", null,
+                    React.createElement("div", { className: 'fps-pph-topic' }, "About view structure"),
+                    React.createElement("ul", null,
+                        React.createElement("li", null, "A view definition is an array of view fields."),
+                        React.createElement("li", null, "A view field defines how you want each column to look."),
+                        React.createElement("li", null,
+                            React.createElement("mark", null, "NOTE: "),
+                            " ",
+                            React.createElement("b", null, "Quotes"),
+                            " are required per the example. ",
+                            React.createElement("br", null),
+                            "All column names and view properties are ",
+                            React.createElement("b", null, "Case Sensitive"),
+                            "!"),
+                        React.createElement("li", null, "Some common properties of view fields are..."),
+                        React.createElement("ul", null,
+                            React.createElement("li", null,
+                                React.createElement("b", null, "name:"),
+                                " is the Internal Column name for the field.  ",
+                                LinkFindInternalName),
+                            React.createElement("li", null,
+                                React.createElement("b", null, "displayName:"),
+                                " is the what you want the column heading to show"),
+                            React.createElement("li", null,
+                                React.createElement("b", null, "minWidth:"),
+                                " typically is the number of pixels for minimum column width"),
+                            React.createElement("li", null,
+                                React.createElement("b", null, "maxWidth:"),
+                                " typically is the number of pixels for maximum column width"),
+                            React.createElement("li", null,
+                                React.createElement("b", null, "linkPropertyName:"),
+                                " is the column or property with the Url if you want to have a link"),
+                            React.createElement("li", null,
+                                "Typical values you can use in ",
+                                React.createElement("b", null, "linkPropertyName"),
+                                " are:  FileRef, goToItemPreview, goToItemLink, goToPropsLink"))),
+                    React.createElement("div", { className: 'fps-pph-topic' }, "Advanced View capability"),
+                    React.createElement("ul", null,
+                        React.createElement("li", null,
+                            React.createElement("b", null, "linkSubstitute"),
+                            " property of a view can calculate the url for a clickable link based on column values.",
+                            React.createElement("ul", null,
+                                React.createElement("li", null,
+                                    React.createElement("b", null, `"https://www.google.com/search?q={{Editor/Title}}"`),
+                                    " - Example syntax"),
+                                React.createElement("li", null,
+                                    React.createElement("b", null, `{{ Editor/Title }}`),
+                                    " - Place Column Name to Subsititue between double curley braces"),
+                                React.createElement("li", null,
+                                    "Rules of linkSubstitute syntax",
+                                    React.createElement("ol", null,
+                                        React.createElement("li", null,
+                                            "Link formula ",
+                                            React.createElement("b", null,
+                                                "must start with either ",
+                                                `"http" or "/sites/"`),
+                                            " or it will NOT be considered a link."),
+                                        React.createElement("li", null,
+                                            "If the column you select ",
+                                            React.createElement("b", null, "does not have a value"),
+                                            ", it will NOT create a link, only show the value from the items view column name."),
+                                        React.createElement("li", null,
+                                            "In the example to left, if the ",
+                                            React.createElement("b", null, "item.Editor/Title"),
+                                            " was empty or not valid, the column will show ",
+                                            React.createElement("b", null, "item.TextColumn"),
+                                            " as a text value."),
+                                        React.createElement("li", null, "Only put single column name between curley braces"),
+                                        React.createElement("li", null, "Can do up to two substitutions in a linkSubstitute"),
+                                        React.createElement("li", null, "Value between the double curley braces must be valid Internal Name"),
+                                        React.createElement("li", null,
+                                            React.createElement("b", null, "String Functions"),
+                                            " syntax on that help tab are also valid"),
+                                        React.createElement("li", null,
+                                            "use ",
+                                            `"showEmptyAsEmpty" = true`,
+                                            " if you do not want any textSubstitute value if a field in the substitution is empty. In this example, if Editor/Title was empty, then no text will show. You can use this to NOT show a link or text if it would not be valid due to incomplete substitution."))))),
+                        React.createElement("li", null,
+                            React.createElement("b", null, "textSubstitute"),
+                            " property of a view can calculate a text value based on column values.",
+                            React.createElement("ul", null,
+                                React.createElement("li", null,
+                                    React.createElement("b", null, `"{{Editor/Title}} was the last to modify this item"`),
+                                    " - Example syntax"),
+                                React.createElement("li", null,
+                                    React.createElement("b", null, `{{ Editor/Title }}`),
+                                    " - Place Column Name to Subsititue between double curley braces"),
+                                React.createElement("li", null,
+                                    "Rules of textSubstitute syntax",
+                                    React.createElement("ol", null,
+                                        React.createElement("li", null, "Same rules as linkSubstitute except string does NOT have to be considered a link"),
+                                        React.createElement("li", null,
+                                            "If the column you select ",
+                                            React.createElement("b", null, "does not have a value"),
+                                            ", it will substitute the column name instead.")))))))),
+            PleaseSeeWiki(bannerProps),
+            React.createElement("div", { className: 'fps-pph-topic' }, "RichText max-hights"),
+            React.createElement("div", null, "This setting lets you adjust the height of multi-line-text fields."),
+            React.createElement("div", null, "Enter semi-colon separated numbers for the heights in css em values."),
+            React.createElement("div", null,
+                "If your view has a multi-line-text field, you will see a hamburger icon ",
+                React.createElement(Icon, { iconName: 'CollapseMenu' })),
+            React.createElement("div", null, "Click this icon to cycle through your max-heights set in the property pane setting."),
+            React.createElement("div", { className: 'fps-pph-topic' }, "Auto-Expand Rich text Height"),
+            React.createElement("div", null, "This setting over-rides your max-heights when there are only a few items."),
+            React.createElement("div", null, "Enter semi-colon separated numbers for maximum rows;max-height per row."),
+            React.createElement("div", null, "The default will set max-height any time your list shows 5 or less items.  Cool huh?")));
+    return WebPartHelpElement;
+}
+//# sourceMappingURL=Views.js.map

package/lib/common/PropPaneHelp/pages/listview/Views.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Views.js","sourceRoot":"","sources":["../../../../../src/common/PropPaneHelp/pages/listview/Views.tsx"],"names":[],"mappings":"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"}

package/lib/common/PropPaneHelp/pages/listview/samples/SampleCharts.d.ts

@@ -0,0 +1,2 @@
+export declare const SampleCharts: any;
+//# sourceMappingURL=SampleCharts.d.ts.map

package/lib/common/PropPaneHelp/pages/listview/samples/SampleCharts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SampleCharts.d.ts","sourceRoot":"","sources":["../../../../../../src/common/PropPaneHelp/pages/listview/samples/SampleCharts.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,EAAE,GAU1B,CAAC"}

package/lib/common/PropPaneHelp/pages/listview/samples/SampleCharts.js

@@ -0,0 +1,12 @@
+export const SampleCharts = [
+    {
+        "primaryField": "Id",
+        "title": "Count of items",
+        "stat": "count",
+        "chartTypes": [
+            "pareto-dec",
+            "stacked-column-labels"
+        ]
+    }
+];
+//# sourceMappingURL=SampleCharts.js.map