@pnp/spfx-controls-react 3.26.0-beta.3440869 → 3.26.0-beta.3446786

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/CHANGELOG.json +4 -2
  2. package/CHANGELOG.md +2 -1
  3. package/jest-output/JUnit.xml +108 -98
  4. package/lib/common/telemetry/version.js +1 -1
  5. package/lib/controls/richText/RichText.d.ts +12 -0
  6. package/lib/controls/richText/RichText.d.ts.map +1 -1
  7. package/lib/controls/richText/RichText.js +216 -41
  8. package/lib/controls/richText/RichText.js.map +1 -1
  9. package/lib/controls/richText/RichText.module.scss.css +55 -38
  10. package/lib/controls/richText/RichText.module.scss.css.map +1 -1
  11. package/lib/controls/richText/RichText.types.d.ts +17 -1
  12. package/lib/controls/richText/RichText.types.d.ts.map +1 -1
  13. package/lib/controls/richText/RichTextPropertyPane.d.ts +45 -0
  14. package/lib/controls/richText/RichTextPropertyPane.d.ts.map +1 -1
  15. package/lib/controls/richText/RichTextPropertyPane.js +290 -21
  16. package/lib/controls/richText/RichTextPropertyPane.js.map +1 -1
  17. package/lib/controls/richText/RichTextPropertyPane.types.d.ts +3 -1
  18. package/lib/controls/richText/RichTextPropertyPane.types.d.ts.map +1 -1
  19. package/lib/controls/richText/RteColorPicker.module.scss.css +4 -3
  20. package/lib/controls/richText/RteColorPicker.module.scss.css.map +1 -1
  21. package/lib-commonjs/common/telemetry/version.js +1 -1
  22. package/lib-commonjs/controls/richText/RichText.js +216 -41
  23. package/lib-commonjs/controls/richText/RichText.js.map +1 -1
  24. package/lib-commonjs/controls/richText/RichText.module.scss.css +55 -38
  25. package/lib-commonjs/controls/richText/RichText.module.scss.css.map +1 -1
  26. package/lib-commonjs/controls/richText/RichTextPropertyPane.js +289 -20
  27. package/lib-commonjs/controls/richText/RichTextPropertyPane.js.map +1 -1
  28. package/lib-commonjs/controls/richText/RteColorPicker.module.scss.css +4 -3
  29. package/lib-commonjs/controls/richText/RteColorPicker.module.scss.css.map +1 -1
  30. package/lib-commonjs/webparts/controlsTest/components/ControlsTest.js +87 -2
  31. package/lib-commonjs/webparts/controlsTest/components/ControlsTest.js.map +1 -1
  32. package/lib-commonjs/webparts/controlsTest/components/ControlsTest.module.scss.css +13 -0
  33. package/lib-commonjs/webparts/controlsTest/components/ControlsTest.module.scss.css.map +1 -1
  34. package/package.json +1 -1
  35. package/release/analysis-logs/lint.sarif +392 -340
  36. package/release/manifests/45165954-80f9-44c1-9967-cd38ae92a33b.manifest.json +1 -1
  37. package/release/manifests/57ebd944-98ed-43f9-b722-e959d6dac6ad.manifest.json +1 -1
  38. package/release/manifests/f9c6b930-8d5d-4550-bfd9-ed5f6ca443a8.manifest.json +1 -1
@@ -1793,17 +1793,17 @@
1793
1793
  },
1794
1794
  {
1795
1795
  "location": {
1796
- "uri": "src/controls/richText/RichTextPropertyPane.types.ts"
1796
+ "uri": "src/controls/richText/RichText.types.ts"
1797
1797
  }
1798
1798
  },
1799
1799
  {
1800
1800
  "location": {
1801
- "uri": "src/controls/richText/RichTextPropertyPane.tsx"
1801
+ "uri": "src/controls/richText/RichTextPropertyPane.types.ts"
1802
1802
  }
1803
1803
  },
1804
1804
  {
1805
1805
  "location": {
1806
- "uri": "src/controls/richText/RichText.types.ts"
1806
+ "uri": "src/controls/richText/RichTextPropertyPane.tsx"
1807
1807
  }
1808
1808
  },
1809
1809
  {
@@ -9803,13 +9803,13 @@
9803
9803
  {
9804
9804
  "physicalLocation": {
9805
9805
  "artifactLocation": {
9806
- "uri": "src/controls/richText/RichTextPropertyPane.types.ts",
9806
+ "uri": "src/controls/richText/RichText.types.ts",
9807
9807
  "index": 316
9808
9808
  },
9809
9809
  "region": {
9810
- "startLine": 14,
9810
+ "startLine": 155,
9811
9811
  "startColumn": 12,
9812
- "endLine": 14,
9812
+ "endLine": 155,
9813
9813
  "endColumn": 15
9814
9814
  }
9815
9815
  }
@@ -9833,14 +9833,14 @@
9833
9833
  {
9834
9834
  "physicalLocation": {
9835
9835
  "artifactLocation": {
9836
- "uri": "src/controls/richText/RichTextPropertyPane.tsx",
9837
- "index": 317
9836
+ "uri": "src/controls/richText/RichText.types.ts",
9837
+ "index": 316
9838
9838
  },
9839
9839
  "region": {
9840
- "startLine": 593,
9841
- "startColumn": 44,
9842
- "endLine": 593,
9843
- "endColumn": 47
9840
+ "startLine": 191,
9841
+ "startColumn": 19,
9842
+ "endLine": 191,
9843
+ "endColumn": 22
9844
9844
  }
9845
9845
  }
9846
9846
  }
@@ -9863,13 +9863,13 @@
9863
9863
  {
9864
9864
  "physicalLocation": {
9865
9865
  "artifactLocation": {
9866
- "uri": "src/controls/richText/RichText.types.ts",
9867
- "index": 318
9866
+ "uri": "src/controls/richText/RichTextPropertyPane.types.ts",
9867
+ "index": 317
9868
9868
  },
9869
9869
  "region": {
9870
- "startLine": 136,
9870
+ "startLine": 16,
9871
9871
  "startColumn": 12,
9872
- "endLine": 136,
9872
+ "endLine": 16,
9873
9873
  "endColumn": 15
9874
9874
  }
9875
9875
  }
@@ -9893,14 +9893,14 @@
9893
9893
  {
9894
9894
  "physicalLocation": {
9895
9895
  "artifactLocation": {
9896
- "uri": "src/controls/richText/RichText.types.ts",
9896
+ "uri": "src/controls/richText/RichTextPropertyPane.tsx",
9897
9897
  "index": 318
9898
9898
  },
9899
9899
  "region": {
9900
- "startLine": 172,
9901
- "startColumn": 19,
9902
- "endLine": 172,
9903
- "endColumn": 22
9900
+ "startLine": 918,
9901
+ "startColumn": 44,
9902
+ "endLine": 918,
9903
+ "endColumn": 47
9904
9904
  }
9905
9905
  }
9906
9906
  }
@@ -9927,22 +9927,20 @@
9927
9927
  "index": 319
9928
9928
  },
9929
9929
  "region": {
9930
- "startLine": 943,
9931
- "startColumn": 35,
9932
- "endLine": 943,
9933
- "endColumn": 38
9930
+ "startLine": 1029,
9931
+ "startColumn": 34,
9932
+ "endLine": 1029,
9933
+ "endColumn": 37,
9934
+ "snippet": {
9935
+ "text": "any"
9936
+ }
9934
9937
  }
9935
9938
  }
9936
9939
  }
9937
9940
  ],
9938
9941
  "ruleId": "@typescript-eslint/no-explicit-any",
9939
9942
  "ruleIndex": 0,
9940
- "suppressions": [
9941
- {
9942
- "kind": "inSource",
9943
- "justification": ""
9944
- }
9945
- ]
9943
+ "suppressions": []
9946
9944
  },
9947
9945
  {
9948
9946
  "level": "warning",
@@ -9957,22 +9955,20 @@
9957
9955
  "index": 319
9958
9956
  },
9959
9957
  "region": {
9960
- "startLine": 943,
9961
- "startColumn": 48,
9962
- "endLine": 943,
9963
- "endColumn": 51
9958
+ "startLine": 1029,
9959
+ "startColumn": 47,
9960
+ "endLine": 1029,
9961
+ "endColumn": 50,
9962
+ "snippet": {
9963
+ "text": "any"
9964
+ }
9964
9965
  }
9965
9966
  }
9966
9967
  }
9967
9968
  ],
9968
9969
  "ruleId": "@typescript-eslint/no-explicit-any",
9969
9970
  "ruleIndex": 0,
9970
- "suppressions": [
9971
- {
9972
- "kind": "inSource",
9973
- "justification": ""
9974
- }
9975
- ]
9971
+ "suppressions": []
9976
9972
  },
9977
9973
  {
9978
9974
  "level": "warning",
@@ -9987,22 +9983,20 @@
9987
9983
  "index": 319
9988
9984
  },
9989
9985
  "region": {
9990
- "startLine": 943,
9991
- "startColumn": 61,
9992
- "endLine": 943,
9993
- "endColumn": 64
9986
+ "startLine": 1029,
9987
+ "startColumn": 60,
9988
+ "endLine": 1029,
9989
+ "endColumn": 63,
9990
+ "snippet": {
9991
+ "text": "any"
9992
+ }
9994
9993
  }
9995
9994
  }
9996
9995
  }
9997
9996
  ],
9998
9997
  "ruleId": "@typescript-eslint/no-explicit-any",
9999
9998
  "ruleIndex": 0,
10000
- "suppressions": [
10001
- {
10002
- "kind": "inSource",
10003
- "justification": ""
10004
- }
10005
- ]
9999
+ "suppressions": []
10006
10000
  },
10007
10001
  {
10008
10002
  "level": "warning",
@@ -10017,22 +10011,20 @@
10017
10011
  "index": 319
10018
10012
  },
10019
10013
  "region": {
10020
- "startLine": 1046,
10021
- "startColumn": 44,
10022
- "endLine": 1046,
10023
- "endColumn": 47
10014
+ "startLine": 1147,
10015
+ "startColumn": 10,
10016
+ "endLine": 1147,
10017
+ "endColumn": 13,
10018
+ "snippet": {
10019
+ "text": "any"
10020
+ }
10024
10021
  }
10025
10022
  }
10026
10023
  }
10027
10024
  ],
10028
10025
  "ruleId": "@typescript-eslint/no-explicit-any",
10029
10026
  "ruleIndex": 0,
10030
- "suppressions": [
10031
- {
10032
- "kind": "inSource",
10033
- "justification": ""
10034
- }
10035
- ]
10027
+ "suppressions": []
10036
10028
  },
10037
10029
  {
10038
10030
  "level": "warning",
@@ -10047,22 +10039,20 @@
10047
10039
  "index": 319
10048
10040
  },
10049
10041
  "region": {
10050
- "startLine": 1059,
10051
- "startColumn": 43,
10052
- "endLine": 1059,
10053
- "endColumn": 46
10042
+ "startLine": 1148,
10043
+ "startColumn": 13,
10044
+ "endLine": 1148,
10045
+ "endColumn": 16,
10046
+ "snippet": {
10047
+ "text": "any"
10048
+ }
10054
10049
  }
10055
10050
  }
10056
10051
  }
10057
10052
  ],
10058
10053
  "ruleId": "@typescript-eslint/no-explicit-any",
10059
10054
  "ruleIndex": 0,
10060
- "suppressions": [
10061
- {
10062
- "kind": "inSource",
10063
- "justification": ""
10064
- }
10065
- ]
10055
+ "suppressions": []
10066
10056
  },
10067
10057
  {
10068
10058
  "level": "warning",
@@ -10077,22 +10067,20 @@
10077
10067
  "index": 319
10078
10068
  },
10079
10069
  "region": {
10080
- "startLine": 1059,
10081
- "startColumn": 58,
10082
- "endLine": 1059,
10083
- "endColumn": 61
10070
+ "startLine": 1149,
10071
+ "startColumn": 11,
10072
+ "endLine": 1149,
10073
+ "endColumn": 14,
10074
+ "snippet": {
10075
+ "text": "any"
10076
+ }
10084
10077
  }
10085
10078
  }
10086
10079
  }
10087
10080
  ],
10088
10081
  "ruleId": "@typescript-eslint/no-explicit-any",
10089
10082
  "ruleIndex": 0,
10090
- "suppressions": [
10091
- {
10092
- "kind": "inSource",
10093
- "justification": ""
10094
- }
10095
- ]
10083
+ "suppressions": []
10096
10084
  },
10097
10085
  {
10098
10086
  "level": "warning",
@@ -10107,10 +10095,13 @@
10107
10095
  "index": 319
10108
10096
  },
10109
10097
  "region": {
10110
- "startLine": 1059,
10111
- "startColumn": 71,
10112
- "endLine": 1059,
10113
- "endColumn": 74
10098
+ "startLine": 1133,
10099
+ "startColumn": 43,
10100
+ "endLine": 1133,
10101
+ "endColumn": 46,
10102
+ "snippet": {
10103
+ "text": "any"
10104
+ }
10114
10105
  }
10115
10106
  }
10116
10107
  }
@@ -10137,10 +10128,13 @@
10137
10128
  "index": 319
10138
10129
  },
10139
10130
  "region": {
10140
- "startLine": 1121,
10141
- "startColumn": 21,
10142
- "endLine": 1121,
10143
- "endColumn": 24
10131
+ "startLine": 1213,
10132
+ "startColumn": 19,
10133
+ "endLine": 1213,
10134
+ "endColumn": 22,
10135
+ "snippet": {
10136
+ "text": "any"
10137
+ }
10144
10138
  }
10145
10139
  }
10146
10140
  }
@@ -10167,10 +10161,13 @@
10167
10161
  "index": 319
10168
10162
  },
10169
10163
  "region": {
10170
- "startLine": 1179,
10171
- "startColumn": 27,
10172
- "endLine": 1179,
10173
- "endColumn": 30
10164
+ "startLine": 1273,
10165
+ "startColumn": 26,
10166
+ "endLine": 1273,
10167
+ "endColumn": 29,
10168
+ "snippet": {
10169
+ "text": "any"
10170
+ }
10174
10171
  }
10175
10172
  }
10176
10173
  }
@@ -10197,10 +10194,13 @@
10197
10194
  "index": 319
10198
10195
  },
10199
10196
  "region": {
10200
- "startLine": 1187,
10201
- "startColumn": 34,
10202
- "endLine": 1187,
10203
- "endColumn": 37
10197
+ "startLine": 1282,
10198
+ "startColumn": 33,
10199
+ "endLine": 1282,
10200
+ "endColumn": 36,
10201
+ "snippet": {
10202
+ "text": "any"
10203
+ }
10204
10204
  }
10205
10205
  }
10206
10206
  }
@@ -21876,9 +21876,9 @@
21876
21876
  "index": 901
21877
21877
  },
21878
21878
  "region": {
21879
- "startLine": 27,
21879
+ "startLine": 29,
21880
21880
  "startColumn": 30,
21881
- "endLine": 27,
21881
+ "endLine": 29,
21882
21882
  "endColumn": 33
21883
21883
  }
21884
21884
  }
@@ -22041,9 +22041,9 @@
22041
22041
  "index": 907
22042
22042
  },
22043
22043
  "region": {
22044
- "startLine": 165,
22044
+ "startLine": 166,
22045
22045
  "startColumn": 3,
22046
- "endLine": 165,
22046
+ "endLine": 166,
22047
22047
  "endColumn": 14,
22048
22048
  "snippet": {
22049
22049
  "text": "IWidgetLink"
@@ -22069,9 +22069,9 @@
22069
22069
  "index": 907
22070
22070
  },
22071
22071
  "region": {
22072
- "startLine": 178,
22072
+ "startLine": 180,
22073
22073
  "startColumn": 51,
22074
- "endLine": 178,
22074
+ "endLine": 180,
22075
22075
  "endColumn": 94,
22076
22076
  "snippet": {
22077
22077
  "text": "import('../../../AdaptiveCardDesignerHost')"
@@ -22097,9 +22097,9 @@
22097
22097
  "index": 907
22098
22098
  },
22099
22099
  "region": {
22100
- "startLine": 179,
22100
+ "startLine": 181,
22101
22101
  "startColumn": 43,
22102
- "endLine": 179,
22102
+ "endLine": 181,
22103
22103
  "endColumn": 78,
22104
22104
  "snippet": {
22105
22105
  "text": "import('../../../AdaptiveCardHost')"
@@ -22125,9 +22125,9 @@
22125
22125
  "index": 907
22126
22126
  },
22127
22127
  "region": {
22128
- "startLine": 181,
22128
+ "startLine": 183,
22129
22129
  "startColumn": 41,
22130
- "endLine": 181,
22130
+ "endLine": 183,
22131
22131
  "endColumn": 74,
22132
22132
  "snippet": {
22133
22133
  "text": "import('../../../AnimatedDialog')"
@@ -22153,9 +22153,9 @@
22153
22153
  "index": 907
22154
22154
  },
22155
22155
  "region": {
22156
- "startLine": 183,
22156
+ "startLine": 185,
22157
22157
  "startColumn": 39,
22158
- "endLine": 183,
22158
+ "endLine": 185,
22159
22159
  "endColumn": 70,
22160
22160
  "snippet": {
22161
22161
  "text": "import('../../../ChartControl')"
@@ -22181,9 +22181,9 @@
22181
22181
  "index": 907
22182
22182
  },
22183
22183
  "region": {
22184
- "startLine": 185,
22184
+ "startLine": 187,
22185
22185
  "startColumn": 46,
22186
- "endLine": 185,
22186
+ "endLine": 187,
22187
22187
  "endColumn": 93,
22188
22188
  "snippet": {
22189
22189
  "text": "import('../../../controls/accessibleAccordion')"
@@ -22209,9 +22209,9 @@
22209
22209
  "index": 907
22210
22210
  },
22211
22211
  "region": {
22212
- "startLine": 187,
22212
+ "startLine": 189,
22213
22213
  "startColumn": 35,
22214
- "endLine": 187,
22214
+ "endLine": 189,
22215
22215
  "endColumn": 71,
22216
22216
  "snippet": {
22217
22217
  "text": "import('../../../controls/carousel')"
@@ -22237,9 +22237,9 @@
22237
22237
  "index": 907
22238
22238
  },
22239
22239
  "region": {
22240
- "startLine": 189,
22240
+ "startLine": 191,
22241
22241
  "startColumn": 44,
22242
- "endLine": 189,
22242
+ "endLine": 191,
22243
22243
  "endColumn": 89,
22244
22244
  "snippet": {
22245
22245
  "text": "import('../../../controls/contentTypePicker')"
@@ -22265,9 +22265,9 @@
22265
22265
  "index": 907
22266
22266
  },
22267
22267
  "region": {
22268
- "startLine": 191,
22268
+ "startLine": 193,
22269
22269
  "startColumn": 36,
22270
- "endLine": 191,
22270
+ "endLine": 193,
22271
22271
  "endColumn": 73,
22272
22272
  "snippet": {
22273
22273
  "text": "import('../../../controls/dashboard')"
@@ -22293,9 +22293,9 @@
22293
22293
  "index": 907
22294
22294
  },
22295
22295
  "region": {
22296
- "startLine": 193,
22296
+ "startLine": 195,
22297
22297
  "startColumn": 38,
22298
- "endLine": 193,
22298
+ "endLine": 195,
22299
22299
  "endColumn": 77,
22300
22300
  "snippet": {
22301
22301
  "text": "import('../../../controls/dynamicForm')"
@@ -22321,9 +22321,9 @@
22321
22321
  "index": 907
22322
22322
  },
22323
22323
  "region": {
22324
- "startLine": 194,
22324
+ "startLine": 196,
22325
22325
  "startColumn": 37,
22326
- "endLine": 194,
22326
+ "endLine": 196,
22327
22327
  "endColumn": 75,
22328
22328
  "snippet": {
22329
22329
  "text": "import('../../../controls/iconPicker')"
@@ -22349,9 +22349,9 @@
22349
22349
  "index": 907
22350
22350
  },
22351
22351
  "region": {
22352
- "startLine": 196,
22352
+ "startLine": 198,
22353
22353
  "startColumn": 3,
22354
- "endLine": 196,
22354
+ "endLine": 198,
22355
22355
  "endColumn": 68,
22356
22356
  "snippet": {
22357
22357
  "text": "import('../../../controls/listItemPicker/ComboBoxListItemPicker')"
@@ -22377,9 +22377,9 @@
22377
22377
  "index": 907
22378
22378
  },
22379
22379
  "region": {
22380
- "startLine": 198,
22380
+ "startLine": 200,
22381
22381
  "startColumn": 38,
22382
- "endLine": 198,
22382
+ "endLine": 200,
22383
22383
  "endColumn": 77,
22384
22384
  "snippet": {
22385
22385
  "text": "import('../../../controls/LivePersona')"
@@ -22405,9 +22405,9 @@
22405
22405
  "index": 907
22406
22406
  },
22407
22407
  "region": {
22408
- "startLine": 200,
22408
+ "startLine": 202,
22409
22409
  "startColumn": 41,
22410
- "endLine": 200,
22410
+ "endLine": 202,
22411
22411
  "endColumn": 98,
22412
22412
  "snippet": {
22413
22413
  "text": "import('../../../controls/locationPicker/LocationPicker')"
@@ -22433,9 +22433,9 @@
22433
22433
  "index": 907
22434
22434
  },
22435
22435
  "region": {
22436
- "startLine": 202,
22436
+ "startLine": 204,
22437
22437
  "startColumn": 47,
22438
- "endLine": 202,
22438
+ "endLine": 204,
22439
22439
  "endColumn": 116,
22440
22440
  "snippet": {
22441
22441
  "text": "import('../../../controls/modernTaxonomyPicker/ModernTaxonomyPicker')"
@@ -22461,9 +22461,9 @@
22461
22461
  "index": 907
22462
22462
  },
22463
22463
  "region": {
22464
- "startLine": 203,
22464
+ "startLine": 205,
22465
22465
  "startColumn": 39,
22466
- "endLine": 203,
22466
+ "endLine": 205,
22467
22467
  "endColumn": 79,
22468
22468
  "snippet": {
22469
22469
  "text": "import('../../../controls/monacoEditor')"
@@ -22489,9 +22489,9 @@
22489
22489
  "index": 907
22490
22490
  },
22491
22491
  "region": {
22492
- "startLine": 204,
22492
+ "startLine": 206,
22493
22493
  "startColumn": 34,
22494
- "endLine": 204,
22494
+ "endLine": 206,
22495
22495
  "endColumn": 69,
22496
22496
  "snippet": {
22497
22497
  "text": "import('../../../controls/MyTeams')"
@@ -22517,9 +22517,9 @@
22517
22517
  "index": 907
22518
22518
  },
22519
22519
  "region": {
22520
- "startLine": 205,
22520
+ "startLine": 207,
22521
22521
  "startColumn": 37,
22522
- "endLine": 205,
22522
+ "endLine": 207,
22523
22523
  "endColumn": 75,
22524
22524
  "snippet": {
22525
22525
  "text": "import('../../../controls/pagination')"
@@ -22545,9 +22545,9 @@
22545
22545
  "index": 907
22546
22546
  },
22547
22547
  "region": {
22548
- "startLine": 207,
22548
+ "startLine": 209,
22549
22549
  "startColumn": 39,
22550
- "endLine": 207,
22550
+ "endLine": 209,
22551
22551
  "endColumn": 79,
22552
22552
  "snippet": {
22553
22553
  "text": "import('../../../controls/peoplepicker')"
@@ -22573,9 +22573,9 @@
22573
22573
  "index": 907
22574
22574
  },
22575
22575
  "region": {
22576
- "startLine": 209,
22576
+ "startLine": 211,
22577
22577
  "startColumn": 49,
22578
- "endLine": 209,
22578
+ "endLine": 211,
22579
22579
  "endColumn": 99,
22580
22580
  "snippet": {
22581
22581
  "text": "import('../../../controls/ProgressStepsIndicator')"
@@ -22601,9 +22601,9 @@
22601
22601
  "index": 907
22602
22602
  },
22603
22603
  "region": {
22604
- "startLine": 211,
22604
+ "startLine": 213,
22605
22605
  "startColumn": 37,
22606
- "endLine": 211,
22606
+ "endLine": 213,
22607
22607
  "endColumn": 86,
22608
22608
  "snippet": {
22609
22609
  "text": "import('../../../controls/sitePicker/SitePicker')"
@@ -22629,9 +22629,9 @@
22629
22629
  "index": 907
22630
22630
  },
22631
22631
  "region": {
22632
- "startLine": 212,
22632
+ "startLine": 214,
22633
22633
  "startColumn": 34,
22634
- "endLine": 212,
22634
+ "endLine": 214,
22635
22635
  "endColumn": 69,
22636
22636
  "snippet": {
22637
22637
  "text": "import('../../../controls/toolbar')"
@@ -22657,9 +22657,9 @@
22657
22657
  "index": 907
22658
22658
  },
22659
22659
  "region": {
22660
- "startLine": 213,
22660
+ "startLine": 215,
22661
22661
  "startColumn": 35,
22662
- "endLine": 213,
22662
+ "endLine": 215,
22663
22663
  "endColumn": 71,
22664
22664
  "snippet": {
22665
22665
  "text": "import('../../../controls/treeView')"
@@ -22685,9 +22685,9 @@
22685
22685
  "index": 907
22686
22686
  },
22687
22687
  "region": {
22688
- "startLine": 214,
22688
+ "startLine": 216,
22689
22689
  "startColumn": 38,
22690
- "endLine": 214,
22690
+ "endLine": 216,
22691
22691
  "endColumn": 77,
22692
22692
  "snippet": {
22693
22693
  "text": "import('../../../controls/uploadFiles')"
@@ -22713,9 +22713,9 @@
22713
22713
  "index": 907
22714
22714
  },
22715
22715
  "region": {
22716
- "startLine": 215,
22716
+ "startLine": 217,
22717
22717
  "startColumn": 47,
22718
- "endLine": 215,
22718
+ "endLine": 217,
22719
22719
  "endColumn": 95,
22720
22720
  "snippet": {
22721
22721
  "text": "import('../../../controls/variantThemeProvider')"
@@ -22741,9 +22741,9 @@
22741
22741
  "index": 907
22742
22742
  },
22743
22743
  "region": {
22744
- "startLine": 216,
22744
+ "startLine": 218,
22745
22745
  "startColumn": 37,
22746
- "endLine": 216,
22746
+ "endLine": 218,
22747
22747
  "endColumn": 66,
22748
22748
  "snippet": {
22749
22749
  "text": "import('../../../ViewPicker')"
@@ -22769,9 +22769,9 @@
22769
22769
  "index": 907
22770
22770
  },
22771
22771
  "region": {
22772
- "startLine": 218,
22772
+ "startLine": 220,
22773
22773
  "startColumn": 41,
22774
- "endLine": 218,
22774
+ "endLine": 220,
22775
22775
  "endColumn": 74,
22776
22776
  "snippet": {
22777
22777
  "text": "import('../../../DateTimePicker')"
@@ -22797,9 +22797,9 @@
22797
22797
  "index": 907
22798
22798
  },
22799
22799
  "region": {
22800
- "startLine": 220,
22800
+ "startLine": 222,
22801
22801
  "startColumn": 40,
22802
- "endLine": 220,
22802
+ "endLine": 222,
22803
22803
  "endColumn": 72,
22804
22804
  "snippet": {
22805
22805
  "text": "import('../../../DragDropFiles')"
@@ -22825,9 +22825,9 @@
22825
22825
  "index": 907
22826
22826
  },
22827
22827
  "region": {
22828
- "startLine": 222,
22828
+ "startLine": 224,
22829
22829
  "startColumn": 48,
22830
- "endLine": 222,
22830
+ "endLine": 224,
22831
22831
  "endColumn": 88,
22832
22832
  "snippet": {
22833
22833
  "text": "import('../../../EnhancedThemeProvider')"
@@ -22853,9 +22853,9 @@
22853
22853
  "index": 907
22854
22854
  },
22855
22855
  "region": {
22856
- "startLine": 224,
22856
+ "startLine": 226,
22857
22857
  "startColumn": 46,
22858
- "endLine": 224,
22858
+ "endLine": 226,
22859
22859
  "endColumn": 84,
22860
22860
  "snippet": {
22861
22861
  "text": "import('../../../FieldCollectionData')"
@@ -22881,9 +22881,9 @@
22881
22881
  "index": 907
22882
22882
  },
22883
22883
  "region": {
22884
- "startLine": 226,
22884
+ "startLine": 228,
22885
22885
  "startColumn": 38,
22886
- "endLine": 226,
22886
+ "endLine": 228,
22887
22887
  "endColumn": 68,
22888
22888
  "snippet": {
22889
22889
  "text": "import('../../../FieldPicker')"
@@ -22909,9 +22909,9 @@
22909
22909
  "index": 907
22910
22910
  },
22911
22911
  "region": {
22912
- "startLine": 228,
22912
+ "startLine": 230,
22913
22913
  "startColumn": 37,
22914
- "endLine": 228,
22914
+ "endLine": 230,
22915
22915
  "endColumn": 66,
22916
22916
  "snippet": {
22917
22917
  "text": "import('../../../FilePicker')"
@@ -22937,9 +22937,9 @@
22937
22937
  "index": 907
22938
22938
  },
22939
22939
  "region": {
22940
- "startLine": 230,
22940
+ "startLine": 232,
22941
22941
  "startColumn": 39,
22942
- "endLine": 230,
22942
+ "endLine": 232,
22943
22943
  "endColumn": 70,
22944
22944
  "snippet": {
22945
22945
  "text": "import('../../../FileTypeIcon')"
@@ -22965,9 +22965,9 @@
22965
22965
  "index": 907
22966
22966
  },
22967
22967
  "region": {
22968
- "startLine": 232,
22968
+ "startLine": 234,
22969
22969
  "startColumn": 41,
22970
- "endLine": 232,
22970
+ "endLine": 234,
22971
22971
  "endColumn": 74,
22972
22972
  "snippet": {
22973
22973
  "text": "import('../../../FolderExplorer')"
@@ -22993,9 +22993,9 @@
22993
22993
  "index": 907
22994
22994
  },
22995
22995
  "region": {
22996
- "startLine": 234,
22996
+ "startLine": 236,
22997
22997
  "startColumn": 39,
22998
- "endLine": 234,
22998
+ "endLine": 236,
22999
22999
  "endColumn": 70,
23000
23000
  "snippet": {
23001
23001
  "text": "import('../../../FolderPicker')"
@@ -23021,9 +23021,9 @@
23021
23021
  "index": 907
23022
23022
  },
23023
23023
  "region": {
23024
- "startLine": 235,
23024
+ "startLine": 237,
23025
23025
  "startColumn": 37,
23026
- "endLine": 235,
23026
+ "endLine": 237,
23027
23027
  "endColumn": 66,
23028
23028
  "snippet": {
23029
23029
  "text": "import('../../../GridLayout')"
@@ -23049,9 +23049,9 @@
23049
23049
  "index": 907
23050
23050
  },
23051
23051
  "region": {
23052
- "startLine": 236,
23052
+ "startLine": 238,
23053
23053
  "startColumn": 44,
23054
- "endLine": 236,
23054
+ "endLine": 238,
23055
23055
  "endColumn": 80,
23056
23056
  "snippet": {
23057
23057
  "text": "import('../../../HoverReactionsBar')"
@@ -23077,9 +23077,9 @@
23077
23077
  "index": 907
23078
23078
  },
23079
23079
  "region": {
23080
- "startLine": 237,
23080
+ "startLine": 239,
23081
23081
  "startColumn": 38,
23082
- "endLine": 237,
23082
+ "endLine": 239,
23083
23083
  "endColumn": 68,
23084
23084
  "snippet": {
23085
23085
  "text": "import('../../../GroupPicker')"
@@ -23105,9 +23105,9 @@
23105
23105
  "index": 907
23106
23106
  },
23107
23107
  "region": {
23108
- "startLine": 239,
23108
+ "startLine": 241,
23109
23109
  "startColumn": 79,
23110
- "endLine": 239,
23110
+ "endLine": 241,
23111
23111
  "endColumn": 110,
23112
23112
  "snippet": {
23113
23113
  "text": "import('../../../IFrameDialog')"
@@ -23133,9 +23133,9 @@
23133
23133
  "index": 907
23134
23134
  },
23135
23135
  "region": {
23136
- "startLine": 241,
23136
+ "startLine": 243,
23137
23137
  "startColumn": 38,
23138
- "endLine": 241,
23138
+ "endLine": 243,
23139
23139
  "endColumn": 68,
23140
23140
  "snippet": {
23141
23141
  "text": "import('../../../IFramePanel')"
@@ -23161,9 +23161,9 @@
23161
23161
  "index": 907
23162
23162
  },
23163
23163
  "region": {
23164
- "startLine": 242,
23164
+ "startLine": 244,
23165
23165
  "startColumn": 38,
23166
- "endLine": 242,
23166
+ "endLine": 244,
23167
23167
  "endColumn": 68,
23168
23168
  "snippet": {
23169
23169
  "text": "import('../../../ImagePicker')"
@@ -23189,9 +23189,9 @@
23189
23189
  "index": 907
23190
23190
  },
23191
23191
  "region": {
23192
- "startLine": 243,
23192
+ "startLine": 245,
23193
23193
  "startColumn": 46,
23194
- "endLine": 243,
23194
+ "endLine": 245,
23195
23195
  "endColumn": 84,
23196
23196
  "snippet": {
23197
23197
  "text": "import('../../../ListItemAttachments')"
@@ -23217,9 +23217,9 @@
23217
23217
  "index": 907
23218
23218
  },
23219
23219
  "region": {
23220
- "startLine": 244,
23220
+ "startLine": 246,
23221
23221
  "startColumn": 43,
23222
- "endLine": 244,
23222
+ "endLine": 246,
23223
23223
  "endColumn": 78,
23224
23224
  "snippet": {
23225
23225
  "text": "import('../../../ListItemComments')"
@@ -23245,9 +23245,9 @@
23245
23245
  "index": 907
23246
23246
  },
23247
23247
  "region": {
23248
- "startLine": 245,
23248
+ "startLine": 247,
23249
23249
  "startColumn": 41,
23250
- "endLine": 245,
23250
+ "endLine": 247,
23251
23251
  "endColumn": 74,
23252
23252
  "snippet": {
23253
23253
  "text": "import('../../../ListItemPicker')"
@@ -23273,9 +23273,9 @@
23273
23273
  "index": 907
23274
23274
  },
23275
23275
  "region": {
23276
- "startLine": 246,
23276
+ "startLine": 248,
23277
23277
  "startColumn": 37,
23278
- "endLine": 246,
23278
+ "endLine": 248,
23279
23279
  "endColumn": 66,
23280
23280
  "snippet": {
23281
23281
  "text": "import('../../../ListPicker')"
@@ -23301,9 +23301,9 @@
23301
23301
  "index": 907
23302
23302
  },
23303
23303
  "region": {
23304
- "startLine": 248,
23304
+ "startLine": 250,
23305
23305
  "startColumn": 38,
23306
- "endLine": 248,
23306
+ "endLine": 250,
23307
23307
  "endColumn": 77,
23308
23308
  "snippet": {
23309
23309
  "text": "import('../../../controls/ListToolbar')"
@@ -23329,9 +23329,9 @@
23329
23329
  "index": 907
23330
23330
  },
23331
23331
  "region": {
23332
- "startLine": 250,
23332
+ "startLine": 252,
23333
23333
  "startColumn": 35,
23334
- "endLine": 250,
23334
+ "endLine": 252,
23335
23335
  "endColumn": 62,
23336
23336
  "snippet": {
23337
23337
  "text": "import('../../../ListView')"
@@ -23357,9 +23357,9 @@
23357
23357
  "index": 907
23358
23358
  },
23359
23359
  "region": {
23360
- "startLine": 290,
23360
+ "startLine": 292,
23361
23361
  "startColumn": 30,
23362
- "endLine": 290,
23362
+ "endLine": 292,
23363
23363
  "endColumn": 52,
23364
23364
  "snippet": {
23365
23365
  "text": "import('../../../Map')"
@@ -23385,9 +23385,9 @@
23385
23385
  "index": 907
23386
23386
  },
23387
23387
  "region": {
23388
- "startLine": 292,
23388
+ "startLine": 294,
23389
23389
  "startColumn": 38,
23390
- "endLine": 292,
23390
+ "endLine": 294,
23391
23391
  "endColumn": 68,
23392
23392
  "snippet": {
23393
23393
  "text": "import('../../../ModernAudio')"
@@ -23413,9 +23413,9 @@
23413
23413
  "index": 907
23414
23414
  },
23415
23415
  "region": {
23416
- "startLine": 294,
23416
+ "startLine": 296,
23417
23417
  "startColumn": 39,
23418
- "endLine": 294,
23418
+ "endLine": 296,
23419
23419
  "endColumn": 78,
23420
23420
  "snippet": {
23421
23421
  "text": "import('../../../ModernTaxonomyPicker')"
@@ -23441,9 +23441,9 @@
23441
23441
  "index": 907
23442
23442
  },
23443
23443
  "region": {
23444
- "startLine": 296,
23444
+ "startLine": 298,
23445
23445
  "startColumn": 38,
23446
- "endLine": 296,
23446
+ "endLine": 298,
23447
23447
  "endColumn": 68,
23448
23448
  "snippet": {
23449
23449
  "text": "import('../../../Placeholder')"
@@ -23469,9 +23469,9 @@
23469
23469
  "index": 907
23470
23470
  },
23471
23471
  "region": {
23472
- "startLine": 298,
23472
+ "startLine": 300,
23473
23473
  "startColumn": 35,
23474
- "endLine": 298,
23474
+ "endLine": 300,
23475
23475
  "endColumn": 62,
23476
23476
  "snippet": {
23477
23477
  "text": "import('../../../Progress')"
@@ -23497,9 +23497,9 @@
23497
23497
  "index": 907
23498
23498
  },
23499
23499
  "region": {
23500
- "startLine": 300,
23500
+ "startLine": 302,
23501
23501
  "startColumn": 35,
23502
- "endLine": 300,
23502
+ "endLine": 302,
23503
23503
  "endColumn": 62,
23504
23504
  "snippet": {
23505
23505
  "text": "import('../../../RichText')"
@@ -23525,9 +23525,9 @@
23525
23525
  "index": 907
23526
23526
  },
23527
23527
  "region": {
23528
- "startLine": 301,
23528
+ "startLine": 303,
23529
23529
  "startColumn": 38,
23530
- "endLine": 301,
23530
+ "endLine": 303,
23531
23531
  "endColumn": 68,
23532
23532
  "snippet": {
23533
23533
  "text": "import('../../../ShareDialog')"
@@ -23553,9 +23553,9 @@
23553
23553
  "index": 907
23554
23554
  },
23555
23555
  "region": {
23556
- "startLine": 303,
23556
+ "startLine": 305,
23557
23557
  "startColumn": 49,
23558
- "endLine": 303,
23558
+ "endLine": 305,
23559
23559
  "endColumn": 90,
23560
23560
  "snippet": {
23561
23561
  "text": "import('../../../SecurityTrimmedControl')"
@@ -23581,9 +23581,9 @@
23581
23581
  "index": 907
23582
23582
  },
23583
23583
  "region": {
23584
- "startLine": 305,
23584
+ "startLine": 307,
23585
23585
  "startColumn": 41,
23586
- "endLine": 305,
23586
+ "endLine": 307,
23587
23587
  "endColumn": 74,
23588
23588
  "snippet": {
23589
23589
  "text": "import('../../../SiteBreadcrumb')"
@@ -23609,9 +23609,9 @@
23609
23609
  "index": 907
23610
23610
  },
23611
23611
  "region": {
23612
- "startLine": 307,
23612
+ "startLine": 309,
23613
23613
  "startColumn": 41,
23614
- "endLine": 307,
23614
+ "endLine": 309,
23615
23615
  "endColumn": 74,
23616
23616
  "snippet": {
23617
23617
  "text": "import('../../../TaxonomyPicker')"
@@ -23637,9 +23637,9 @@
23637
23637
  "index": 907
23638
23638
  },
23639
23639
  "region": {
23640
- "startLine": 309,
23640
+ "startLine": 311,
23641
23641
  "startColumn": 44,
23642
- "endLine": 309,
23642
+ "endLine": 311,
23643
23643
  "endColumn": 80,
23644
23644
  "snippet": {
23645
23645
  "text": "import('../../../TeamChannelPicker')"
@@ -23665,9 +23665,9 @@
23665
23665
  "index": 907
23666
23666
  },
23667
23667
  "region": {
23668
- "startLine": 310,
23668
+ "startLine": 312,
23669
23669
  "startColumn": 37,
23670
- "endLine": 310,
23670
+ "endLine": 312,
23671
23671
  "endColumn": 66,
23672
23672
  "snippet": {
23673
23673
  "text": "import('../../../TeamPicker')"
@@ -23693,9 +23693,9 @@
23693
23693
  "index": 907
23694
23694
  },
23695
23695
  "region": {
23696
- "startLine": 311,
23696
+ "startLine": 313,
23697
23697
  "startColumn": 44,
23698
- "endLine": 311,
23698
+ "endLine": 313,
23699
23699
  "endColumn": 80,
23700
23700
  "snippet": {
23701
23701
  "text": "import('../../../TermSetNavigation')"
@@ -23721,9 +23721,9 @@
23721
23721
  "index": 907
23722
23722
  },
23723
23723
  "region": {
23724
- "startLine": 312,
23724
+ "startLine": 314,
23725
23725
  "startColumn": 39,
23726
- "endLine": 312,
23726
+ "endLine": 314,
23727
23727
  "endColumn": 70,
23728
23728
  "snippet": {
23729
23729
  "text": "import('../../../WebPartTitle')"
@@ -23749,9 +23749,9 @@
23749
23749
  "index": 907
23750
23750
  },
23751
23751
  "region": {
23752
- "startLine": 314,
23752
+ "startLine": 316,
23753
23753
  "startColumn": 38,
23754
- "endLine": 314,
23754
+ "endLine": 316,
23755
23755
  "endColumn": 61,
23756
23756
  "snippet": {
23757
23757
  "text": "import('./TestControl')"
@@ -23777,9 +23777,9 @@
23777
23777
  "index": 907
23778
23778
  },
23779
23779
  "region": {
23780
- "startLine": 316,
23780
+ "startLine": 318,
23781
23781
  "startColumn": 37,
23782
- "endLine": 316,
23782
+ "endLine": 318,
23783
23783
  "endColumn": 66,
23784
23784
  "snippet": {
23785
23785
  "text": "import('../../../UserPicker')"
@@ -23805,9 +23805,9 @@
23805
23805
  "index": 907
23806
23806
  },
23807
23807
  "region": {
23808
- "startLine": 322,
23808
+ "startLine": 324,
23809
23809
  "startColumn": 23,
23810
- "endLine": 322,
23810
+ "endLine": 324,
23811
23811
  "endColumn": 26,
23812
23812
  "snippet": {
23813
23813
  "text": "any"
@@ -23833,9 +23833,9 @@
23833
23833
  "index": 907
23834
23834
  },
23835
23835
  "region": {
23836
- "startLine": 468,
23836
+ "startLine": 482,
23837
23837
  "startColumn": 3,
23838
- "endLine": 468,
23838
+ "endLine": 482,
23839
23839
  "endColumn": 31,
23840
23840
  "snippet": {
23841
23841
  "text": "private onSelectedChannel = "
@@ -23861,9 +23861,9 @@
23861
23861
  "index": 907
23862
23862
  },
23863
23863
  "region": {
23864
- "startLine": 689,
23864
+ "startLine": 765,
23865
23865
  "startColumn": 3,
23866
- "endLine": 689,
23866
+ "endLine": 765,
23867
23867
  "endColumn": 33,
23868
23868
  "snippet": {
23869
23869
  "text": "public async componentDidMount"
@@ -23889,9 +23889,9 @@
23889
23889
  "index": 907
23890
23890
  },
23891
23891
  "region": {
23892
- "startLine": 695,
23892
+ "startLine": 771,
23893
23893
  "startColumn": 42,
23894
- "endLine": 695,
23894
+ "endLine": 771,
23895
23895
  "endColumn": 45,
23896
23896
  "snippet": {
23897
23897
  "text": "any"
@@ -23917,9 +23917,9 @@
23917
23917
  "index": 907
23918
23918
  },
23919
23919
  "region": {
23920
- "startLine": 716,
23920
+ "startLine": 792,
23921
23921
  "startColumn": 121,
23922
- "endLine": 716,
23922
+ "endLine": 792,
23923
23923
  "endColumn": 124,
23924
23924
  "snippet": {
23925
23925
  "text": "any"
@@ -23945,9 +23945,9 @@
23945
23945
  "index": 907
23946
23946
  },
23947
23947
  "region": {
23948
- "startLine": 723,
23948
+ "startLine": 799,
23949
23949
  "startColumn": 18,
23950
- "endLine": 723,
23950
+ "endLine": 799,
23951
23951
  "endColumn": 23,
23952
23952
  "snippet": {
23953
23953
  "text": "error"
@@ -23973,9 +23973,9 @@
23973
23973
  "index": 907
23974
23974
  },
23975
23975
  "region": {
23976
- "startLine": 747,
23976
+ "startLine": 823,
23977
23977
  "startColumn": 3,
23978
- "endLine": 747,
23978
+ "endLine": 823,
23979
23979
  "endColumn": 23,
23980
23980
  "snippet": {
23981
23981
  "text": "private _onConfigure"
@@ -24001,9 +24001,9 @@
24001
24001
  "index": 907
24002
24002
  },
24003
24003
  "region": {
24004
- "startLine": 755,
24004
+ "startLine": 831,
24005
24005
  "startColumn": 3,
24006
- "endLine": 755,
24006
+ "endLine": 831,
24007
24007
  "endColumn": 24,
24008
24008
  "snippet": {
24009
24009
  "text": "private _getSelection"
@@ -24029,9 +24029,9 @@
24029
24029
  "index": 907
24030
24030
  },
24031
24031
  "region": {
24032
- "startLine": 755,
24032
+ "startLine": 831,
24033
24033
  "startColumn": 32,
24034
- "endLine": 755,
24034
+ "endLine": 831,
24035
24035
  "endColumn": 35,
24036
24036
  "snippet": {
24037
24037
  "text": "any"
@@ -24057,9 +24057,9 @@
24057
24057
  "index": 907
24058
24058
  },
24059
24059
  "region": {
24060
- "startLine": 764,
24060
+ "startLine": 840,
24061
24061
  "startColumn": 3,
24062
- "endLine": 764,
24062
+ "endLine": 840,
24063
24063
  "endColumn": 27,
24064
24064
  "snippet": {
24065
24065
  "text": "private _getDropFiles = "
@@ -24085,9 +24085,9 @@
24085
24085
  "index": 907
24086
24086
  },
24087
24087
  "region": {
24088
- "startLine": 789,
24088
+ "startLine": 865,
24089
24089
  "startColumn": 3,
24090
- "endLine": 789,
24090
+ "endLine": 865,
24091
24091
  "endColumn": 32,
24092
24092
  "snippet": {
24093
24093
  "text": "private _onTaxPickerChange = "
@@ -24113,9 +24113,9 @@
24113
24113
  "index": 907
24114
24114
  },
24115
24115
  "region": {
24116
- "startLine": 801,
24116
+ "startLine": 877,
24117
24117
  "startColumn": 3,
24118
- "endLine": 801,
24118
+ "endLine": 877,
24119
24119
  "endColumn": 37,
24120
24120
  "snippet": {
24121
24121
  "text": "private _onDateTimePickerChange = "
@@ -24141,9 +24141,9 @@
24141
24141
  "index": 907
24142
24142
  },
24143
24143
  "region": {
24144
- "startLine": 810,
24144
+ "startLine": 886,
24145
24145
  "startColumn": 3,
24146
- "endLine": 810,
24146
+ "endLine": 886,
24147
24147
  "endColumn": 32,
24148
24148
  "snippet": {
24149
24149
  "text": "private onListPickerChange = "
@@ -24169,9 +24169,9 @@
24169
24169
  "index": 907
24170
24170
  },
24171
24171
  "region": {
24172
- "startLine": 821,
24172
+ "startLine": 897,
24173
24173
  "startColumn": 3,
24174
- "endLine": 821,
24174
+ "endLine": 897,
24175
24175
  "endColumn": 32,
24176
24176
  "snippet": {
24177
24177
  "text": "private onViewPickerChange = "
@@ -24197,9 +24197,9 @@
24197
24197
  "index": 907
24198
24198
  },
24199
24199
  "region": {
24200
- "startLine": 828,
24200
+ "startLine": 904,
24201
24201
  "startColumn": 3,
24202
- "endLine": 828,
24202
+ "endLine": 904,
24203
24203
  "endColumn": 24,
24204
24204
  "snippet": {
24205
24205
  "text": "private deleteItem = "
@@ -24225,9 +24225,9 @@
24225
24225
  "index": 907
24226
24226
  },
24227
24227
  "region": {
24228
- "startLine": 842,
24228
+ "startLine": 918,
24229
24229
  "startColumn": 3,
24230
- "endLine": 842,
24230
+ "endLine": 918,
24231
24231
  "endColumn": 35,
24232
24232
  "snippet": {
24233
24233
  "text": "private _getPeoplePickerItems = "
@@ -24253,9 +24253,9 @@
24253
24253
  "index": 907
24254
24254
  },
24255
24255
  "region": {
24256
- "startLine": 842,
24256
+ "startLine": 918,
24257
24257
  "startColumn": 43,
24258
- "endLine": 842,
24258
+ "endLine": 918,
24259
24259
  "endColumn": 46,
24260
24260
  "snippet": {
24261
24261
  "text": "any"
@@ -24281,9 +24281,9 @@
24281
24281
  "index": 907
24282
24282
  },
24283
24283
  "region": {
24284
- "startLine": 857,
24284
+ "startLine": 933,
24285
24285
  "startColumn": 3,
24286
- "endLine": 857,
24286
+ "endLine": 933,
24287
24287
  "endColumn": 37,
24288
24288
  "snippet": {
24289
24289
  "text": "private listItemPickerDataSelected"
@@ -24309,9 +24309,9 @@
24309
24309
  "index": 907
24310
24310
  },
24311
24311
  "region": {
24312
- "startLine": 857,
24312
+ "startLine": 933,
24313
24313
  "startColumn": 44,
24314
- "endLine": 857,
24314
+ "endLine": 933,
24315
24315
  "endColumn": 47,
24316
24316
  "snippet": {
24317
24317
  "text": "any"
@@ -24337,9 +24337,9 @@
24337
24337
  "index": 907
24338
24338
  },
24339
24339
  "region": {
24340
- "startLine": 861,
24340
+ "startLine": 937,
24341
24341
  "startColumn": 3,
24342
- "endLine": 861,
24342
+ "endLine": 937,
24343
24343
  "endColumn": 25,
24344
24344
  "snippet": {
24345
24345
  "text": "private _startProgress"
@@ -24365,9 +24365,9 @@
24365
24365
  "index": 907
24366
24366
  },
24367
24367
  "region": {
24368
- "startLine": 922,
24368
+ "startLine": 998,
24369
24369
  "startColumn": 3,
24370
- "endLine": 922,
24370
+ "endLine": 998,
24371
24371
  "endColumn": 37,
24372
24372
  "snippet": {
24373
24373
  "text": "private _onFilePickerSave = async "
@@ -24393,9 +24393,9 @@
24393
24393
  "index": 907
24394
24394
  },
24395
24395
  "region": {
24396
- "startLine": 935,
24396
+ "startLine": 1011,
24397
24397
  "startColumn": 3,
24398
- "endLine": 935,
24398
+ "endLine": 1011,
24399
24399
  "endColumn": 44,
24400
24400
  "snippet": {
24401
24401
  "text": "private onToolbarSelectedFiltersChange = "
@@ -24421,9 +24421,9 @@
24421
24421
  "index": 907
24422
24422
  },
24423
24423
  "region": {
24424
- "startLine": 941,
24424
+ "startLine": 1017,
24425
24425
  "startColumn": 3,
24426
- "endLine": 941,
24426
+ "endLine": 1017,
24427
24427
  "endColumn": 33,
24428
24428
  "snippet": {
24429
24429
  "text": "private toggleToolbarFilter = "
@@ -24449,9 +24449,9 @@
24449
24449
  "index": 907
24450
24450
  },
24451
24451
  "region": {
24452
- "startLine": 961,
24452
+ "startLine": 1037,
24453
24453
  "startColumn": 3,
24454
- "endLine": 961,
24454
+ "endLine": 1037,
24455
24455
  "endColumn": 23,
24456
24456
  "snippet": {
24457
24457
  "text": "private addFilter = "
@@ -24477,9 +24477,9 @@
24477
24477
  "index": 907
24478
24478
  },
24479
24479
  "region": {
24480
- "startLine": 969,
24480
+ "startLine": 1045,
24481
24481
  "startColumn": 3,
24482
- "endLine": 969,
24482
+ "endLine": 1045,
24483
24483
  "endColumn": 28,
24484
24484
  "snippet": {
24485
24485
  "text": "private onClearFilters = "
@@ -24505,9 +24505,9 @@
24505
24505
  "index": 907
24506
24506
  },
24507
24507
  "region": {
24508
- "startLine": 974,
24508
+ "startLine": 1050,
24509
24509
  "startColumn": 3,
24510
- "endLine": 974,
24510
+ "endLine": 1050,
24511
24511
  "endColumn": 28,
24512
24512
  "snippet": {
24513
24513
  "text": "private onRemoveFilter = "
@@ -24533,9 +24533,9 @@
24533
24533
  "index": 907
24534
24534
  },
24535
24535
  "region": {
24536
- "startLine": 991,
24536
+ "startLine": 1067,
24537
24537
  "startColumn": 38,
24538
- "endLine": 991,
24538
+ "endLine": 1067,
24539
24539
  "endColumn": 41,
24540
24540
  "snippet": {
24541
24541
  "text": "any"
@@ -24561,9 +24561,9 @@
24561
24561
  "index": 907
24562
24562
  },
24563
24563
  "region": {
24564
- "startLine": 1042,
24564
+ "startLine": 1118,
24565
24565
  "startColumn": 32,
24566
- "endLine": 1042,
24566
+ "endLine": 1118,
24567
24567
  "endColumn": 39,
24568
24568
  "snippet": {
24569
24569
  "text": "\"Title\""
@@ -24589,9 +24589,9 @@
24589
24589
  "index": 907
24590
24590
  },
24591
24591
  "region": {
24592
- "startLine": 1087,
24592
+ "startLine": 1163,
24593
24593
  "startColumn": 24,
24594
- "endLine": 1087,
24594
+ "endLine": 1163,
24595
24595
  "endColumn": 27,
24596
24596
  "snippet": {
24597
24597
  "text": "any"
@@ -24617,9 +24617,9 @@
24617
24617
  "index": 907
24618
24618
  },
24619
24619
  "region": {
24620
- "startLine": 1088,
24620
+ "startLine": 1164,
24621
24621
  "startColumn": 32,
24622
- "endLine": 1088,
24622
+ "endLine": 1164,
24623
24623
  "endColumn": 51,
24624
24624
  "snippet": {
24625
24625
  "text": "'ServerRelativeUrl'"
@@ -24645,9 +24645,9 @@
24645
24645
  "index": 907
24646
24646
  },
24647
24647
  "region": {
24648
- "startLine": 1112,
24648
+ "startLine": 1188,
24649
24649
  "startColumn": 34,
24650
- "endLine": 1112,
24650
+ "endLine": 1188,
24651
24651
  "endColumn": 37,
24652
24652
  "snippet": {
24653
24653
  "text": "any"
@@ -24673,9 +24673,9 @@
24673
24673
  "index": 907
24674
24674
  },
24675
24675
  "region": {
24676
- "startLine": 1200,
24676
+ "startLine": 1276,
24677
24677
  "startColumn": 60,
24678
- "endLine": 1200,
24678
+ "endLine": 1276,
24679
24679
  "endColumn": 68,
24680
24680
  "snippet": {
24681
24681
  "text": "itemdata"
@@ -24701,9 +24701,9 @@
24701
24701
  "index": 907
24702
24702
  },
24703
24703
  "region": {
24704
- "startLine": 1307,
24704
+ "startLine": 1383,
24705
24705
  "startColumn": 23,
24706
- "endLine": 1307,
24706
+ "endLine": 1383,
24707
24707
  "endColumn": 34,
24708
24708
  "snippet": {
24709
24709
  "text": "<TextField>"
@@ -24729,9 +24729,9 @@
24729
24729
  "index": 907
24730
24730
  },
24731
24731
  "region": {
24732
- "startLine": 1606,
24732
+ "startLine": 1713,
24733
24733
  "startColumn": 51,
24734
- "endLine": 1606,
24734
+ "endLine": 1713,
24735
24735
  "endColumn": 54,
24736
24736
  "snippet": {
24737
24737
  "text": "any"
@@ -24757,9 +24757,9 @@
24757
24757
  "index": 907
24758
24758
  },
24759
24759
  "region": {
24760
- "startLine": 1606,
24760
+ "startLine": 1713,
24761
24761
  "startColumn": 56,
24762
- "endLine": 1606,
24762
+ "endLine": 1713,
24763
24763
  "endColumn": 67,
24764
24764
  "snippet": {
24765
24765
  "text": "\"loginName\""
@@ -24775,7 +24775,7 @@
24775
24775
  {
24776
24776
  "level": "warning",
24777
24777
  "message": {
24778
- "text": "File has too many lines (3138). Maximum allowed is 2000."
24778
+ "text": "File has too many lines (3245). Maximum allowed is 2000."
24779
24779
  },
24780
24780
  "locations": [
24781
24781
  {
@@ -24787,10 +24787,10 @@
24787
24787
  "region": {
24788
24788
  "startLine": 2001,
24789
24789
  "startColumn": 1,
24790
- "endLine": 3139,
24790
+ "endLine": 3246,
24791
24791
  "endColumn": 1,
24792
24792
  "snippet": {
24793
- "text": " <div className=\"ms-font-m\">iframe dialog tester:\n <PrimaryButton\n text=\"Open iframe Dialog\"\n onClick={() => { this.setState({ iFrameDialogOpened: true }); }} />\n <IFrameDialog\n url={iframeUrl}\n iframeOnLoad={(iframe: any) => { console.log('iframe loaded'); }}\n hidden={!this.state.iFrameDialogOpened}\n onDismiss={() => { this.setState({ iFrameDialogOpened: false }); }}\n modalProps={{\n isBlocking: true,\n styles: {\n root: {\n backgroundColor: '#00ff00'\n },\n main: {\n backgroundColor: '#ff0000'\n }\n }\n }}\n dialogContentProps={{\n type: DialogType.close,\n showCloseButton: true\n }}\n width={'570px'}\n height={'315px'} />\n </div>\n </div>\n }\n {controlVisibility.IFramePanel &&\n <div id=\"IFramePanelDiv\" className={styles.container}>\n <div className=\"ms-font-m\">iframe Panel tester:\n <PrimaryButton\n text=\"Open iframe Panel\"\n onClick={() => { this.setState({ iFramePanelOpened: true }); }} />\n <IFramePanel\n url={iframeUrl}\n type={PanelType.medium}\n // height=\"300px\"\n headerText=\"iframe panel title\"\n closeButtonAriaLabel=\"Close\"\n isOpen={this.state.iFramePanelOpened}\n onDismiss={() => { this.setState({ iFramePanelOpened: false }); }}\n iframeOnLoad={(iframe: any) => { console.log('iframe loaded'); }}\n />\n </div>\n </div>\n }\n {controlVisibility.ImagePicker &&\n <div id=\"ImagePickerDiv\" className={styles.container}>\n <ImagePicker\n context={this.props.context}\n onFileSelected={(file) => { console.log(file); this.setState({ selectedUrlImagePicker: file.fileAbsoluteUrl }); }}\n onDeleteFile={() => { console.log('file deleted'); }}\n selectedFileUrl={this.state.selectedUrlImagePicker}\n />\n </div>\n }\n {controlVisibility.FolderPicker &&\n <div id=\"FolderPickerDiv\" className={styles.container}>\n <FolderPicker context={this.props.context}\n rootFolder={{\n Name: 'Documents',\n ServerRelativeUrl: `${this.props.context.pageContext.web.serverRelativeUrl === '/' ? '' : this.props.context.pageContext.web.serverRelativeUrl}/Shared Documents`\n }}\n onSelect={this._onFolderSelect}\n label='Folder Picker'\n required={true}\n canCreateFolders={true}\n ></FolderPicker>\n </div>\n }\n <div id=\"FilterBarDiv\" className={styles.container} hidden={!controlVisibility.FilterBar}>\n <FilterBar items={this.state.filters} inlineItemCount={3} onClearFilters={this.onClearFilters} onRemoveFilter={this.onRemoveFilter} />\n <button onClick={this.addFilter}>Add new filter</button>\n </div>\n {controlVisibility.Carousel &&\n\n <div id=\"CarouselDiv\" className={styles.container}>\n <div>\n <h3>Carousel with fixed elements:</h3>\n <Carousel\n buttonsLocation={CarouselButtonsLocation.top}\n buttonsDisplay={CarouselButtonsDisplay.block}\n\n contentContainerStyles={styles.carouselContent}\n containerButtonsStyles={styles.carouselButtonsContainer}\n\n isInfinite={true}\n\n element={this.carouselElements}\n onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}\n />\n </div>\n <div>\n <h3>Carousel with CarouselImage elements:</h3>\n <Carousel\n buttonsLocation={CarouselButtonsLocation.center}\n buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}\n\n contentContainerStyles={styles.carouselImageContent}\n //containerButtonsStyles={styles.carouselButtonsContainer}\n\n isInfinite={true}\n indicatorShape={CarouselIndicatorShape.circle}\n indicatorsDisplay={CarouselIndicatorsDisplay.block}\n pauseOnHover={true}\n\n element={[\n {\n imageSrc: 'https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80',\n title: 'Colosseum',\n description: 'This is Colosseum',\n url: 'https://en.wikipedia.org/wiki/Colosseum',\n showDetailsOnHover: true,\n imageFit: ImageFit.cover\n },\n {\n imageSrc: 'https://www.telegraph.co.uk/content/dam/science/2018/06/20/stonehenge-2326750_1920_trans%2B%2BZgEkZX3M936N5BQK4Va8RWtT0gK_6EfZT336f62EI5U.jpg',\n title: 'Stonehenge',\n description: 'This is Stonehendle',\n url: 'https://en.wikipedia.org/wiki/Stonehenge',\n showDetailsOnHover: true,\n imageFit: ImageFit.cover\n },\n {\n imageSrc: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/All_Gizah_Pyramids.jpg/2560px-All_Gizah_Pyramids.jpg',\n title: 'Pyramids of Giza',\n description: 'This are Pyramids of Giza (Egypt)',\n url: 'https://en.wikipedia.org/wiki/Egyptian_pyramids',\n showDetailsOnHover: true,\n imageFit: ImageFit.cover\n }\n ]}\n onMoveNextClicked={(index: number) => { console.log(`Next button clicked: ${index}`); }}\n onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}\n rootStyles={mergeStyles({\n backgroundColor: '#C3C3C3'\n })}\n />\n </div>\n <div>\n <h3>Carousel with triggerPageElement:</h3>\n <Carousel\n buttonsLocation={CarouselButtonsLocation.bottom}\n buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}\n\n contentContainerStyles={styles.carouselContent}\n\n canMoveNext={this.state.canMoveNext}\n canMovePrev={this.state.canMovePrev}\n triggerPageEvent={this.triggerNextElement}\n element={this.state.currentCarouselElement}\n />\n </div>\n <div>\n <h3>Carousel with minimal configuration:</h3>\n <Carousel\n element={this.carouselElements}\n contentHeight={200}\n />\n </div>\n </div>\n }\n {controlVisibility.SiteBreadcrumb &&\n <div id=\"SiteBreadcrumbDiv\" className={styles.container}>\n <div className={styles.siteBreadcrumb}>\n <SiteBreadcrumb context={this.props.context} />\n </div>\n </div>\n }\n {controlVisibility.FilePicker &&\n <div id=\"FilePickerDiv\" className={styles.container}>\n <div>\n <h3>File Picker</h3>\n <TextField\n label=\"Default SiteFileTab Folder\"\n onChange={debounce((ev, newVal) => { this.setState({ filePickerDefaultFolderAbsolutePath: newVal }); }, 500)}\n styles={{ root: { marginBottom: 10 } }}\n />\n <FilePicker\n bingAPIKey=\"<BING API KEY>\"\n //webAbsoluteUrl=\"https://023xn.sharepoint.com/sites/test1\"\n //defaultFolderAbsolutePath={\"https://aterentiev.sharepoint.com/sites/SPFxinTeamsDemo/Shared%20Documents/General\"}\n //accepts={[\".gif\", \".jpg\", \".jpeg\", \".bmp\", \".dib\", \".tif\", \".tiff\", \".ico\", \".png\", \".jxr\", \".svg\"]}\n buttonLabel=\"Add File\"\n buttonIconProps={{ iconName: 'Add', styles: { root: { fontSize: 42 } } }}\n onSave={this._onFilePickerSave}\n onChange={(filePickerResult: IFilePickerResult[]) => { console.log(filePickerResult); }}\n context={this.props.context}\n hideRecentTab={false}\n includePageLibraries={true}\n checkIfFileExists={false}\n />\n {\n this.state.filePickerResult &&\n <div>\n <div>\n FileName: {this.state.filePickerResult[0].fileName}\n </div>\n <div>\n File size: {GeneralHelper.formatBytes(this.state.filePickerResult[0].fileSize, 2)}\n </div>\n </div>\n }\n </div>\n\n <div>\n <h3>File Picker with target folder browser</h3>\n <FilePicker\n bingAPIKey=\"<BING API KEY>\"\n //accepts={[\".gif\", \".jpg\", \".jpeg\", \".bmp\", \".dib\", \".tif\", \".tiff\", \".ico\", \".png\", \".jxr\", \".svg\"]}\n buttonLabel=\"Upload image\"\n buttonIcon=\"FileImage\"\n onSave={this._onFilePickerSave}\n onChange={(filePickerResult: IFilePickerResult[]) => { console.log(filePickerResult); }}\n context={this.props.context}\n hideRecentTab={false}\n renderCustomUploadTabContent={() => (\n <FolderExplorer context={this.props.context}\n rootFolder={this.rootFolder}\n defaultFolder={this.rootFolder}\n onSelect={this._onFolderSelect}\n canCreateFolders={true}\n />)}\n />\n </div>\n <p><a href=\"javascript:;\" onClick={this.deleteItem}>Deletes second item</a></p>\n </div>\n }\n {controlVisibility.Progress &&\n <div id=\"ProgressDiv\" className={styles.container}>\n <Progress title={'Progress Test'}\n showOverallProgress={true}\n showIndeterminateOverallProgress={false}\n hideNotStartedActions={false}\n actions={this.state.progressActions}\n currentActionIndex={this.state.currentProgressActionIndex}\n longRunningText={'This operation takes longer than expected'}\n longRunningTextDisplayDelay={7000}\n height={'350px'}\n inProgressIconName={'ChromeBackMirrored'} />\n <PrimaryButton text={'Start Progress'} onClick={this._startProgress} />\n </div>\n }\n {controlVisibility.ProgressStepsIndicator &&\n <div id=\"ProgressStepsIndicatorDiv\" className={styles.container}>\n <ProgressStepsIndicator steps={this.progressSteps} currentStep={0} themeVariant={this.props.themeVariant} />\n </div>\n }\n {controlVisibility.GridLayout &&\n <div id=\"GridLayoutDiv\" className={styles.container}>\n <div className=\"ms-font-l\">Grid Layout</div>\n <GridLayout\n ariaLabel={\"List of content, use right and left arrow keys to navigate, arrow down to access details.\"}\n items={sampleGridData}\n onRenderGridItem={(item: any, finalSize: ISize, isCompact: boolean) => this._onRenderGridItem(item, finalSize, isCompact)}\n itemMinWidth={250}\n itemMaxWidth={600}\n itemPadding={60}\n //compactThreshold={220}\n //rowsPerPage={1}\n />\n </div>\n }\n {controlVisibility.HoverReactionsBar &&\n <div ref={this.divRefAddReaction} id=\"HoverReactionsBarDiv\" className={styles.container}>\n <PrimaryButton text=\"Open HoverReactionsBar\" onClick={() => { this.setState({ isOpenHoverReactionBar: true }); }} />\n <HoverReactionsBar\n isOpen={this.state.isOpenHoverReactionBar}\n onSelect={(emoji, emojiInfo) => { console.log(emoji); }}\n onDismiss={(): void => {\n this.setState({ isOpenHoverReactionBar: false });\n }}\n target={this.divRefAddReaction.current as HTMLDivElement} />\n </div>\n }\n {controlVisibility.FolderExplorer &&\n <div id=\"FolderExplorerDiv\" className={styles.container}>\n <FolderExplorer\n context={this.props.context}\n rootFolder={{\n Name: 'Documents',\n ServerRelativeUrl: `${this.props.context.pageContext.web.serverRelativeUrl === '/' ? '' : this.props.context.pageContext.web.serverRelativeUrl}/Shared Documents`\n }}\n defaultFolder={{\n Name: 'Documents',\n ServerRelativeUrl: `${this.props.context.pageContext.web.serverRelativeUrl === '/' ? '' : this.props.context.pageContext.web.serverRelativeUrl}/Shared Documents`\n }}\n onSelect={this._onFolderSelect}\n canCreateFolders={true}\n orderby='Name' //'ListItemAllFields/Created'\n orderAscending={true}\n showFiles={true}\n onFileClick={this._onFileClick}\n />\n </div>\n }\n {controlVisibility.TreeView &&\n <div id=\"TreeViewDiv\" className={styles.container}>\n <h3>Tree View</h3>\n <TreeView items={this.treeitems}\n defaultExpanded={false}\n selectionMode={TreeViewSelectionMode.Multiple}\n showCheckboxes={true}\n treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu}\n defaultSelectedKeys={this.state.treeViewSelectedKeys}\n onExpandCollapse={this.onExpandCollapseTree}\n onSelect={this.onItemSelected}\n defaultExpandedChildren={true}\n theme={this.props.themeVariant}\n //expandToSelected={true}\n // onRenderItem={this.renderCustomTreeItem}\n />\n <PrimaryButton onClick={() => { this.setState({ treeViewSelectedKeys: [] }); }}>Clear selection</PrimaryButton>\n </div>\n }\n {controlVisibility.Pagination &&\n <div id=\"PaginationDiv\" className={styles.container}>\n <Pagination\n currentPage={3}\n onChange={(page) => (this._getPage(page))}\n totalPages={this.props.paginationTotalPages || 13}\n //limiter={3}\n // hideFirstPageJump\n //hideLastPageJump\n //limiterIcon={\"NumberedListText\"}\n />\n </div>\n }\n {controlVisibility.FieldCollectionData &&\n <div id=\"FieldCollectionDataDiv\" className={styles.container}>\n <FieldCollectionData\n key={\"FieldCollectionData\"}\n label={\"Fields Collection\"}\n itemsPerPage={3}\n manageBtnLabel={\"Manage\"}\n onChanged={(value) => { console.log(value); }}\n panelHeader={\"Manage values\"}\n enableSorting={true}\n panelProps={{ type: PanelType.custom, customWidth: \"98vw\" }}\n fields={[\n { id: \"Field1\", title: \"String field\", type: CustomCollectionFieldType.string, required: true },\n { id: \"Field2\", title: \"Number field\", type: CustomCollectionFieldType.number },\n { id: \"Field3\", title: \"URL field\", type: CustomCollectionFieldType.url },\n { id: \"Field4\", title: \"Boolean field\", type: CustomCollectionFieldType.boolean },\n {\n id: \"Field5\", title: \"People picker\", type: CustomCollectionFieldType.peoplepicker, required: true,\n minimumUsers: 2, minimumUsersMessage: \"2 Users is the minimum\", maximumUsers: 3,\n },\n {\n id: \"Field6\", title: \"Combo Single\", type: CustomCollectionFieldType.combobox, required: true,\n multiSelect: false, options: [{ key: \"choice 1\", text: \"choice 1\" }, { key: \"choice 2\", text: \"choice 2\" }, { key: \"choice 3\", text: \"choice 3\" }]\n },\n {\n id: \"Field7\", title: \"Combo Multi\", type: CustomCollectionFieldType.combobox,\n allowFreeform: true, multiSelect: true, options: [{ key: \"choice 1\", text: \"choice 1\" }, { key: \"choice 2\", text: \"choice 2\" }, { key: \"choice 3\", text: \"choice 3\" }]\n },\n { id: \"Field8\", title: \"Date field\", type: CustomCollectionFieldType.date, placeholder: \"Select a date\" }\n ]}\n value={this.getRandomCollectionFieldData()}\n\n // value = {null}\n context={this.props.context as any} //error when this is omitted and people picker is used\n usePanel={true}\n noDataMessage=\"No data is selected\" //overrides the default message\n />\n </div>\n }\n {controlVisibility.ContentTypePicker &&\n <ContentTypePicker\n context={this.props.context}\n // group=\"Content Feedback\"\n // includeHidden={false}\n // includeReadOnly={false}\n // label=\"Select your content type\"\n // multiSelect={false}\n // orderBy={ContentTypesOrderBy.Name}\n // listId=\"00000000-0000-0000-0000-000000000000\"\n // onSelectionChanged={this.onContentTypePickerChanged}\n // showBlankOption={true}\n />\n }\n {controlVisibility.Dashboard &&\n <div id=\"DashboardDiv\" className={styles.container}>\n <Dashboard\n widgets={[{\n title: \"Card 1\",\n desc: \"Last updated Monday, April 4 at 11:15 AM (PT)\",\n widgetActionGroup: calloutItemsExample,\n size: WidgetSize.Quadruple,\n body: [\n {\n id: \"t1\",\n title: \"Tab 1\",\n content: (\n <Flex\n vAlign=\"center\"\n hAlign=\"center\"\n styles={{ height: \"100%\", border: \"1px dashed rgb(179, 176, 173)\" }}\n >\n <NorthstarText size=\"large\" weight=\"semibold\">\n Content #1\n </NorthstarText>\n </Flex>\n ),\n },\n {\n id: \"t2\",\n title: \"Tab 2\",\n content: (\n <Flex\n vAlign=\"center\"\n hAlign=\"center\"\n styles={{ height: \"100%\", border: \"1px dashed rgb(179, 176, 173)\" }}\n >\n <NorthstarText size=\"large\" weight=\"semibold\">\n Content #2\n </NorthstarText>\n </Flex>\n ),\n },\n {\n id: \"t3\",\n title: \"Tab 3\",\n content: (\n <Flex\n vAlign=\"center\"\n hAlign=\"center\"\n styles={{ height: \"100%\", border: \"1px dashed rgb(179, 176, 173)\" }}\n >\n <NorthstarText size=\"large\" weight=\"semibold\">\n Content #3\n </NorthstarText>\n </Flex>\n ),\n },\n ],\n link: linkExample,\n },\n {\n title: \"Card 2\",\n size: WidgetSize.Single,\n link: customizedLinkExample,\n rowSpan: 2\n },\n {\n title: \"Card 3\",\n size: WidgetSize.Double,\n link: linkExample,\n },\n {\n title: \"Card 4\",\n size: WidgetSize.Single,\n link: customizedLinkExample,\n },\n {\n title: \"Card 5\",\n size: WidgetSize.Single,\n link: linkExample,\n },\n {\n title: \"Card 6\",\n size: WidgetSize.Single,\n link: linkExample,\n }]} />\n </div>\n }\n {controlVisibility.Toolbar &&\n <div id=\"ToolbarDiv\" className={styles.container}>\n <div>\n <h3>Uncontrolled toolbar</h3>\n <Toolbar actionGroups={{\n 'group1': {\n 'action1': {\n title: 'Edit',\n iconName: 'Edit',\n onClick: () => { console.log('Edit action click'); }\n },\n 'action2': {\n title: 'New',\n iconName: 'Add',\n onClick: () => { console.log('New action click'); }\n }\n }\n }}\n filters={toolbarFilters}\n onSelectedFiltersChange={this.onToolbarSelectedFiltersChange}\n />\n </div>\n <div>\n <h3>Controlled toolbar</h3>\n <Toolbar actionGroups={{\n 'group1': {\n 'action1': {\n title: 'Edit',\n iconName: 'Edit',\n onClick: () => { console.log('Edit action click'); }\n },\n 'action2': {\n title: 'New',\n iconName: 'Add',\n onClick: () => { console.log('New action click'); }\n }\n }\n }}\n filters={toolbarFilters}\n selectedFilterIds={this.state.selectedFilters}\n onSelectedFiltersChange={this.onToolbarSelectedFiltersChange} />\n </div>\n <div>Selected filter IDs: {this.state.selectedFilters.join(\", \")}</div>\n <PrimaryButton text='Toggle filter1' onClick={() => this.toggleToolbarFilter(\"filter1\")} />\n <PrimaryButton text='Toggle filter2' onClick={() => this.toggleToolbarFilter(\"filter2\")} />\n </div>\n }\n {controlVisibility.AnimatedDialog &&\n <div id=\"AnimatedDialogDiv\" className={styles.container}>\n <h3>Animated Dialogs</h3>\n\n {/* Multiple elements added only for demo - can be controlled with fewer elements */}\n\n <PrimaryButton text='Show animated dialog' onClick={() => { this.setState({ showAnimatedDialog: true }); }} />\n {/* Normal animated dialog */}\n <AnimatedDialog\n hidden={!this.state.showAnimatedDialog}\n onDismiss={() => { this.setState({ showAnimatedDialog: false }); }}\n dialogContentProps={animatedDialogContentProps}\n modalProps={animatedModalProps}\n >\n <DialogFooter>\n <PrimaryButton onClick={() => { this.setState({ showAnimatedDialog: false }); }} text=\"Yes\" />\n <DefaultButton onClick={() => { this.setState({ showAnimatedDialog: false }); }} text=\"No\" />\n </DialogFooter>\n </AnimatedDialog>\n <br />\n <br />\n\n <PrimaryButton text='Show animated dialog with icon' onClick={() => { this.setState({ showCustomisedAnimatedDialog: true }); }} />\n {/* Animated dialog with icon */}\n <AnimatedDialog\n hidden={!this.state.showCustomisedAnimatedDialog}\n onDismiss={() => { this.setState({ showCustomisedAnimatedDialog: false }); }}\n dialogContentProps={customizedAnimatedDialogContentProps}\n modalProps={customizedAnimatedModalProps}\n dialogAnimationInType='fadeInDown'\n dialogAnimationOutType='fadeOutDown'\n iconName='UnknownSolid'\n iconAnimationType='zoomInDown'\n showAnimatedDialogFooter={true}\n okButtonText=\"Yes\"\n cancelButtonText=\"No\"\n onOkClick={() => timeout(1500)}\n onSuccess={() => {\n this.setState({ showCustomisedAnimatedDialog: false });\n this.setState({ showSuccessDialog: true });\n }}\n onError={() => {\n this.setState({ showCustomisedAnimatedDialog: false });\n this.setState({ showErrorDialog: true });\n }}>\n <div className={styles.dialogContent}>\n <span>Do you like the animated dialog?</span>\n </div>\n </AnimatedDialog>\n\n {/* Success animated dialog */}\n <AnimatedDialog\n hidden={!this.state.showSuccessDialog}\n onDismiss={() => { this.setState({ showSuccessDialog: false }); }}\n dialogContentProps={successDialogContentProps}\n modalProps={customizedAnimatedModalProps}\n iconName='CompletedSolid'\n >\n <div className={styles.dialogContent}><span>Thank you.</span></div>\n <div className={styles.dialogFooter}>\n <PrimaryButton onClick={() => { this.setState({ showSuccessDialog: false }); }} text=\"OK\" >\n </PrimaryButton>\n </div>\n </AnimatedDialog>\n\n {/* Error animated dialog */}\n <AnimatedDialog\n hidden={!this.state.showErrorDialog}\n onDismiss={() => { this.setState({ showErrorDialog: false }); }}\n dialogContentProps={errorDialogContentProps}\n modalProps={customizedAnimatedModalProps}\n iconName='StatusErrorFull'\n >\n <div className={styles.dialogContent}><span>Ther was an error.</span></div>\n <div className={styles.dialogFooter}>\n <PrimaryButton onClick={() => { this.setState({ showErrorDialog: false }); }} text=\"OK\" >\n </PrimaryButton>\n </div>\n </AnimatedDialog>\n </div>\n }\n {controlVisibility.LivePersona &&\n <div id=\"LivePersonaDiv\" className={styles.container}>\n <LivePersona upn=\"meganb@contoso.onmicrosoft.com\"\n template={\n <>\n <Persona text=\"Megan Bowen\" secondaryText=\"meganb@contoso.onmicrosoft.com\" coinSize={48} />\n </>\n }\n serviceScope={this.props.context.serviceScope}\n />\n </div>\n }\n {controlVisibility.LocationPicker &&\n <div id=\"LocationPickerDiv\" className={styles.container}>\n <LocationPicker context={this.props.context} label=\"Location\" onChange={(locValue: ILocationPickerItem) => { console.log(locValue.DisplayName + \", \" + locValue.Address.Street); }}></LocationPicker>\n </div>\n }\n {controlVisibility.ModernTaxonomyPicker &&\n <div id=\"ModernTaxonomyPickerDiv\" className={styles.container}>\n <ModernTaxonomyPicker\n allowMultipleSelections={true}\n termSetId={this.termSetId}\n panelTitle=\"Panel title\"\n label={\"Modern Taxonomy Picker\"}\n context={this.props.context}\n required={false}\n disabled={false}\n customPanelWidth={400}\n />\n </div>\n }\n {controlVisibility.MonacoEditor &&\n <div id=\"MonacoEditorDiv\" className={styles.container}>\n <MonacoEditor value={\"\"}\n showMiniMap={true}\n onValueChange={(value, validationErrors) => { console.log(value); console.log(validationErrors); }}\n language={\"javascript\"} />\n </div>\n }\n {controlVisibility.AdaptiveCardHost &&\n <div id=\"AdaptiveCardHostDiv\" className={styles.container}>\n <h3>Adaptive Card Host</h3>\n <AdaptiveCardHost\n card={{\n \"$schema\": \"http://adaptivecards.io/schemas/adaptive-card.json\",\n \"type\": \"AdaptiveCard\",\n \"version\": \"1.0\",\n \"body\": [\n {\n \"type\": \"TextBlock\",\n \"size\": \"medium\",\n \"weight\": \"bolder\",\n \"text\": \" ${ParticipantInfoForm.title}\",\n \"horizontalAlignment\": \"center\",\n \"wrap\": true,\n \"style\": \"heading\"\n },\n {\n \"type\": \"Input.Text\",\n \"label\": \"Name\",\n \"style\": \"text\",\n \"id\": \"SimpleVal\",\n \"isRequired\": true,\n \"errorMessage\": \"Name is required\"\n },\n {\n \"type\": \"Input.Text\",\n \"label\": \"Homepage\",\n \"style\": \"url\",\n \"id\": \"UrlVal\"\n },\n {\n \"type\": \"Input.Text\",\n \"label\": \"Email\",\n \"style\": \"email\",\n \"id\": \"EmailVal\"\n },\n {\n \"type\": \"Input.Text\",\n \"label\": \"Phone\",\n \"style\": \"tel\",\n \"id\": \"TelVal\"\n },\n {\n \"type\": \"Input.Text\",\n \"label\": \"Comments\",\n \"style\": \"text\",\n \"isMultiline\": true,\n \"id\": \"MultiLineVal\"\n },\n {\n \"type\": \"Input.Number\",\n \"label\": \"Quantity\",\n \"min\": -5,\n \"max\": 5,\n \"value\": 1,\n \"id\": \"NumVal\",\n \"errorMessage\": \"The quantity must be between -5 and 5\"\n },\n {\n \"type\": \"Input.Date\",\n \"label\": \"Due Date\",\n \"id\": \"DateVal\",\n \"value\": \"2017-09-20\"\n },\n {\n \"type\": \"Input.Time\",\n \"label\": \"Start time\",\n \"id\": \"TimeVal\",\n \"value\": \"16:59\"\n },\n {\n \"type\": \"TextBlock\",\n \"size\": \"medium\",\n \"weight\": \"bolder\",\n \"text\": \"${Survey.title} \",\n \"horizontalAlignment\": \"center\",\n \"wrap\": true,\n \"style\": \"heading\"\n },\n {\n \"type\": \"Input.ChoiceSet\",\n \"id\": \"CompactSelectVal\",\n \"label\": \"${Survey.questions[0].question}\",\n \"style\": \"compact\",\n \"value\": \"1\",\n \"choices\": [\n {\n \"$data\": \"${Survey.questions[0].items}\",\n \"title\": \"${choice}\",\n \"value\": \"${value}\"\n }\n ]\n },\n {\n \"type\": \"Input.ChoiceSet\",\n \"id\": \"SingleSelectVal\",\n \"label\": \"${Survey.questions[1].question}\",\n \"style\": \"expanded\",\n \"value\": \"1\",\n \"choices\": [\n {\n \"$data\": \"${Survey.questions[1].items}\",\n \"title\": \"${choice}\",\n \"value\": \"${value}\"\n }\n ]\n },\n {\n \"type\": \"Input.ChoiceSet\",\n \"id\": \"MultiSelectVal\",\n \"label\": \"${Survey.questions[2].question}\",\n \"isMultiSelect\": true,\n \"value\": \"1,3\",\n \"choices\": [\n {\n \"$data\": \"${Survey.questions[2].items}\",\n \"title\": \"${choice}\",\n \"value\": \"${value}\"\n }\n ]\n },\n {\n \"type\": \"TextBlock\",\n \"size\": \"medium\",\n \"weight\": \"bolder\",\n \"text\": \"Input.Toggle\",\n \"horizontalAlignment\": \"center\",\n \"wrap\": true,\n \"style\": \"heading\"\n },\n {\n \"type\": \"Input.Toggle\",\n \"label\": \"Please accept the terms and conditions:\",\n \"title\": \"${Survey.questions[3].question}\",\n \"valueOn\": \"true\",\n \"valueOff\": \"false\",\n \"id\": \"AcceptsTerms\",\n \"isRequired\": true,\n \"errorMessage\": \"Accepting the terms and conditions is required\"\n },\n {\n \"type\": \"Input.Toggle\",\n \"label\": \"How do you feel about red cars?\",\n \"title\": \"${Survey.questions[4].question}\",\n \"valueOn\": \"RedCars\",\n \"valueOff\": \"NotRedCars\",\n \"id\": \"ColorPreference\"\n }\n ],\n \"actions\": [\n {\n \"type\": \"Action.Submit\",\n \"title\": \"Submit\",\n \"data\": {\n \"id\": \"1234567890\"\n }\n },\n {\n \"type\": \"Action.ShowCard\",\n \"title\": \"Show Card\",\n \"card\": {\n \"type\": \"AdaptiveCard\",\n \"body\": [\n {\n \"type\": \"Input.Text\",\n \"label\": \"enter comment\",\n \"style\": \"text\",\n \"id\": \"CommentVal\"\n }\n ],\n \"actions\": [\n {\n \"type\": \"Action.Submit\",\n \"title\": \"OK\"\n }\n ]\n }\n }\n ]\n }}\n data={{\n \"$root\": {\n \"ParticipantInfoForm\": {\n \"title\": \"Input.Text elements\"\n },\n \"Survey\": {\n \"title\": \"Input ChoiceSet\",\n \"questions\": [\n {\n \"question\": \"What color do you want? (compact)\",\n \"items\": [\n {\n \"choice\": \"Red\",\n \"value\": \"1\"\n },\n {\n \"choice\": \"Green\",\n \"value\": \"2\"\n },\n {\n \"choice\": \"Blue\",\n \"value\": \"3\"\n }\n ]\n },\n {\n \"question\": \"What color do you want? (expanded)\",\n \"items\": [\n {\n \"choice\": \"Red\",\n \"value\": \"1\"\n },\n {\n \"choice\": \"Green\",\n \"value\": \"2\"\n },\n {\n \"choice\": \"Blue\",\n \"value\": \"3\"\n }\n ]\n },\n {\n \"question\": \"What color do you want? (multiselect)\",\n \"items\": [\n {\n \"choice\": \"Red\",\n \"value\": \"1\"\n },\n {\n \"choice\": \"Green\",\n \"value\": \"2\"\n },\n {\n \"choice\": \"Blue\",\n \"value\": \"3\"\n }\n ]\n },\n {\n \"question\": \"I accept the terms and conditions (True/False)\"\n },\n {\n \"question\": \"Red cars are better than other cars\"\n }\n ]\n }\n }\n }}\n theme={this.props.themeVariant}\n themeType={AdaptiveCardHostThemeType.SharePoint}\n onInvokeAction={(action) => alert(JSON.stringify(action))}\n onError={(error) => console.log(error.message)}\n onSetCustomElements={(registry: CardObjectRegistry<CardElement>) => { }}\n onSetCustomActions={(registry: CardObjectRegistry<Action>) => { }}\n onUpdateHostCapabilities={(hostCapabilities: HostCapabilities) => {\n hostCapabilities.setCustomProperty(\"CustomPropertyName\", Date.now);\n }}\n context={this.props.context}\n />\n </div>\n }\n {controlVisibility.VariantThemeProvider &&\n <div id=\"VariantThemeProviderDiv\" className={styles.container}>\n <h3>Variant Theme Provider</h3>\n <VariantThemeProvider variantType={VariantType.Strong}>\n <Stack tokens={{ childrenGap: 5, padding: 5 }}>\n <Label>This Web Part implements an example on how to use the 'Fluent UI' theme library and how to apply/generate theme variation for the Web Part itself.</Label>\n <PrimaryButton>Primary Button</PrimaryButton>\n <DefaultButton>Default Button</DefaultButton>\n <Link>Link</Link>\n </Stack>\n </VariantThemeProvider>\n </div>\n }\n {controlVisibility.EnhancedThemeProvider &&\n <div id=\"EnhancedThemeProviderDiv\" className={styles.container}>\n <h3>Enhanced Theme Provider</h3>\n <EnhancedThemeProvider applyTo=\"element\" context={this.props.context} theme={this.props.themeVariant}>\n <ControlsTestEnhancedThemeProviderFunctionComponent />\n <ControlsTestEnhancedThemeProvider />\n </EnhancedThemeProvider>\n </div>\n }\n {controlVisibility.AdaptiveCardDesignerHost &&\n <div id=\"AdaptiveCardDesignerHostDiv\" className={styles.container}>\n <h3>Adaptive Card Designer Host</h3>\n <AdaptiveCardDesignerHost\n headerText={`Adaptive Card Designer`}\n buttonText=\"Open Designer\"\n card={{ \"$schema\": \"http://adaptivecards.io/schemas/adaptive-card.json\", \"type\": \"AdaptiveCard\", \"version\": \"1.5\", \"body\": [{ \"type\": \"ColumnSet\", \"columns\": [{ \"width\": \"auto\", \"items\": [{ \"type\": \"Image\", \"size\": \"Small\", \"style\": \"Person\", \"url\": \"/_layouts/15/userphoto.aspx?size=M&username=${$root['@context']['userInfo']['email']}\" }], \"type\": \"Column\" }, { \"width\": \"stretch\", \"items\": [{ \"type\": \"TextBlock\", \"text\": \"${$root['@context']['userInfo']['displayName']}\", \"weight\": \"Bolder\" }, { \"type\": \"TextBlock\", \"spacing\": \"None\", \"text\": \"${$root['@context']['userInfo']['email']}\" }], \"type\": \"Column\" }] }] }}\n data={undefined}\n context={this.props.context}\n theme={this.props.themeVariant}\n onSave={(payload: object) => alert(JSON.stringify(payload))}\n snippets={[{\n name: \"Persona\",\n category: \"Snippets\",\n payload: {\n type: \"ColumnSet\",\n columns: [\n {\n width: \"auto\",\n items: [\n {\n type: \"Image\",\n size: \"Small\",\n style: \"Person\",\n url: \"/_layouts/15/userphoto.aspx?size=M&username=${$root['@context']['userInfo']['email']}\"\n }\n ]\n },\n {\n width: \"stretch\",\n items: [\n {\n type: \"TextBlock\",\n text: \"${$root['@context']['userInfo']['displayName']}\",\n weight: \"Bolder\"\n },\n {\n type: \"TextBlock\",\n spacing: \"None\",\n text: \"${$root['@context']['userInfo']['email']}\"\n }\n ]\n }\n ]\n }\n }]}\n />\n </div>\n }\n {controlVisibility.ShareDialog &&\n <div id=\"ShareDialogDiv\" className={styles.container}>\n <PrimaryButton text=\"Open Share dialog\" onClick={() => { this.setState({ isOpenShareDialog: true }); }} />\n <ShareDialog\n isOpen={this.state.isOpenShareDialog}\n onClose={() => this.setState({ isOpenShareDialog: false })}\n options={{\n siteUrl: this.props.context.pageContext.web.absoluteUrl,\n listId: 'b1416fca-dc77-4198-a082-62a7657dcfa9',\n itemId: 1,\n name: 'Document Name'\n }} />\n </div>\n }\n {controlVisibility.TaxonomyTree &&\n <div id=\"TaxonomyTreeDiv\" className={styles.container} hidden={!controlVisibility.TaxonomyTree}>\n <h3>Modern Taxonomy Tree</h3>\n {this.state.termStoreInfo && (\n <TaxonomyTree\n languageTag={this.state.termStoreInfo.defaultLanguageTag}\n onLoadMoreData={this.spTaxonomyService.getTerms}\n pageSize={50}\n setTerms={(value) => this.setState({ testTerms: value as any })}\n termStoreInfo={this.state.termStoreInfo}\n termSetInfo={this.state.termSetInfo}\n terms={this.state.testTerms as any[]}\n onRenderActionButton={() => <button>test button</button>}\n hideDeprecatedTerms={false}\n showIcons={true}\n />\n )}\n </div>\n }\n {controlVisibility.ListToolbar &&\n <div id=\"ListToolbarDiv\" className={styles.container}>\n <h3>ListToolbar</h3>\n <ListToolbar\n context={this.props.context}\n theme={this.props.themeVariant as any}\n items={[\n { key: 'new', label: 'New', icon: <span>+</span>, onClick: () => console.log('New clicked'), group: 'actions' },\n { key: 'edit', label: 'Edit', icon: <span>✎</span>, onClick: () => console.log('Edit clicked'), group: 'actions' },\n { key: 'delete', label: 'Delete', icon: <span>🗑</span>, onClick: () => console.log('Delete clicked'), appearance: 'subtle', group: 'danger' },\n ]}\n farItems={[\n { key: 'filter', label: 'Filter', icon: <span>🔍</span>, onClick: () => console.log('Filter clicked'), isFarItem: true },\n { key: 'settings', label: 'Settings', icon: <span>⚙</span>, onClick: () => console.log('Settings clicked'), isFarItem: true },\n ]}\n totalCount={10}\n showGroupDividers={true}\n ariaLabel=\"List Toolbar\"\n />\n </div>\n }\n {controlVisibility.TestControl &&\n <div id=\"TestControlDiv\" className={styles.container}>\n <TestControl context={this.props.context} themeVariant={this.props.themeVariant} />\n </div>\n }\n {controlVisibility.UploadFiles &&\n <div id=\"UploadFilesDiv\" className={styles.container}>\n <h3>Upload Files</h3>\n <EnhancedThemeProvider theme={this.props.themeVariant} context={this.props.context}>\n <Stack>\n <UploadFiles\n context={this.props.context}\n title=\"Upload Files\"\n onUploadFiles={(files) => {\n console.log(\"files\", files);\n }}\n themeVariant={this.props.themeVariant}\n />\n </Stack>\n </EnhancedThemeProvider>\n </div>\n }\n {controlVisibility.UserPicker &&\n <div id=\"UserPickerDiv\" className={styles.container}>\n <UserPicker\n context={this.props.context}\n secondaryTextPropertyName=\"mail\"\n theme={this.props.themeVariant}\n placeholder={\"Search User\"}\n // label={\n // <div>\n // <Person20Filled color={tokens.colorBrandForeground1} />\n // <Body1>Select User</Body1>\n // </div>\n // }\n // onSelectedUsers={onSelectedUsers}\n // onRemoveSelectedUser={onRemovedUser}\n />\n </div>\n }\n {\n controlVisibility.Calendar &&\n <div id=\"CalendarDiv\" className={styles.container}>\n <TestCalendarControl\n context={this.props.context} theme={this.props.themeVariant as any} hasTeamsContext={false} themeString={'default'} title={'Calendar'} appHostName={EAppHostName.SharePoint} />\n </div>\n\n }\n {\n controlVisibility.SPFilePicker &&\n <div id=\"SPFilePickerDiv\" className={styles.container}>\n <TestSPFilePickerControl context={this.props.context} />\n </div>\n\n }\n {controlVisibility.WorldMap &&\n <div id=\"WorldMapDiv\" className={styles.container}>\n <WorldMap description={'World Map Sample'} isDarkTheme={false} hasTeamsContext={false} title={'Microsoft Locations Worldwide'} />\n </div>\n }\n </div>\n </React.Suspense>\n );\n }\n\n private getRandomCollectionFieldData = () => {\n let result = [];\n for (let i = 1; i < 16; i++) {\n\n const sampleDate = new Date();\n sampleDate.setDate(sampleDate.getDate() + i);\n\n result.push({\n \"Field1\": `String${i}`,\n \"Field2\": i,\n \"Field3\": \"https://pnp.github.io/\",\n \"Field4\": true,\n \"Field5\": null as any,\n \"Field6\": { key: \"choice 1\", text: \"choice 1\" },\n \"Field7\": [{ key: \"choice 1\", text: \"choice 1\" }, { key: \"choice 2\", text: \"choice 2\" }],\n \"Field8\": sampleDate\n });\n }\n return result;\n }\n\n private onExpandCollapseTree(item: ITreeItem, isExpanded: boolean) {\n console.log((isExpanded ? \"item expanded: \" : \"item collapsed: \") + item);\n }\n\n private onItemSelected(items: ITreeItem[]) {\n console.log(\"items selected: \" + items.length);\n }\n\n private renderCustomTreeItem(item: ITreeItem): JSX.Element {\n return (\n <span>\n {\n item.iconProps &&\n <i className={\"ms-Icon ms-Icon--\" + item.iconProps.iconName} style={{ paddingRight: '4px' }} />\n }\n {item.label}\n </span>\n );\n }\n\n private _getPage(page: number) {\n console.log('Page:', page);\n }\n\n // private _onFolderSelect = (folder: IFolder): void => {\n // console.log('selected folder', folder);\n //\n}\n"
24793
+ "text": " </div>\n }\n {controlVisibility.ListItemPicker &&\n <div id=\"ListItemPickerDiv\" className={styles.container}>\n <div className=\"ms-font-m\">List Item picker list data tester:\n\n <ListItemPicker listId={'b1416fca-dc77-4198-a082-62a7657dcfa9'}\n columnInternalName=\"DateAndTime\"\n keyColumnInternalName=\"Id\"\n // filter={\"Title eq 'SPFx'\"}\n orderBy={'Title desc'}\n itemLimit={5}\n context={this.props.context}\n placeholder={'Select list items'}\n onSelectedItem={this.listItemPickerDataSelected} />\n\n </div>\n </div>\n }\n {controlVisibility.ListItemComments &&\n <div id=\"ListItemCommentsDiv\" className={styles.container}>\n <div className=\"ms-font-m\">List Item Comments Tester\n <ListItemComments webUrl='https://contoso.sharepoint.com/sites/ThePerspective'\n listId='6f151a33-a7af-4fae-b8c4-f2f04cbc690f'\n itemId={\"1\"}\n serviceScope={this.props.context.serviceScope}\n numberCommentsPerPage={10}\n label=\"ListItem Comments\"\n />\n </div>\n </div>\n }\n {controlVisibility.ViewPicker &&\n <div id=\"ViewPickerDiv\" className={styles.container}>\n <div className=\"ms-font-m\">View picker tester:\n <ViewPicker context={this.props.context}\n label=\"Select view(s)\"\n listId={\"9f3908cd-1e88-4ab3-ac42-08efbbd64ec9\"}\n placeholder={'Select list view(s)'}\n orderBy={1}\n multiSelect={true}\n onSelectionChanged={this.onViewPickerChange} />\n </div>\n </div>\n }\n {controlVisibility.FieldPicker &&\n <div id=\"FieldPickerDiv\" className={styles.container}>\n <div className=\"ms-font-m\">Field picker tester:\n <FieldPicker\n context={this.props.context}\n label={'Select a field'}\n listId={this.state.selectedList}\n onSelectionChanged={(fields) => {\n console.log(fields);\n }}\n />\n </div>\n </div>\n }\n {controlVisibility.IconPicker &&\n <div id=\"IconPickerDiv\" className={styles.container}>\n <div>Icon Picker</div>\n <div>\n <IconPicker\n renderOption=\"panel\"\n onSave={(value) => { console.log(value); }}\n currentIcon={'Warning'}\n buttonLabel=\"Icon Picker\" />\n </div>\n <IconPicker buttonLabel={'Icon'}\n onChange={(iconName: string) => { console.log(iconName); }}\n onCancel={() => { console.log(\"Panel closed\"); }}\n onSave={(iconName: string) => { console.log(iconName); }} />\n </div>\n }\n {controlVisibility.ComboBoxListItemPicker &&\n <div id=\"ComboBoxListItemPickerDiv\" className={styles.container}>\n <div className=\"ms-font-m\">ComboBoxListItemPicker:\n\n <ComboBoxListItemPicker listId={this.state.comboBoxListItemPickerListId}\n columnInternalName='Title'\n keyColumnInternalName='Id'\n orderBy='Title desc'\n multiSelect={true}\n onSelectedItem={(data) => {\n console.log(`Item(s):`, data);\n }}\n defaultSelectedItems={this.state.comboBoxListItemPickerIds}\n webUrl={this.props.context.pageContext.web.absoluteUrl}\n spHttpClient={this.props.context.spHttpClient} />\n\n <PrimaryButton text=\"Change List\" onClick={() => {\n this.setState({\n comboBoxListItemPickerListId: '71210430-8436-4962-a14d-5525475abd6b'\n });\n }} />\n <PrimaryButton text=\"Change default items\" onClick={() => {\n this.setState({\n comboBoxListItemPickerIds: [{ Id: 2, Title: '222' }]\n });\n }} />\n\n </div>\n </div>\n }\n {controlVisibility.IFrameDialog &&\n <div id=\"IFrameDialogDiv\" className={styles.container}>\n <div className=\"ms-font-m\">iframe dialog tester:\n <PrimaryButton\n text=\"Open iframe Dialog\"\n onClick={() => { this.setState({ iFrameDialogOpened: true }); }} />\n <IFrameDialog\n url={iframeUrl}\n iframeOnLoad={(iframe: any) => { console.log('iframe loaded'); }}\n hidden={!this.state.iFrameDialogOpened}\n onDismiss={() => { this.setState({ iFrameDialogOpened: false }); }}\n modalProps={{\n isBlocking: true,\n styles: {\n root: {\n backgroundColor: '#00ff00'\n },\n main: {\n backgroundColor: '#ff0000'\n }\n }\n }}\n dialogContentProps={{\n type: DialogType.close,\n showCloseButton: true\n }}\n width={'570px'}\n height={'315px'} />\n </div>\n </div>\n }\n {controlVisibility.IFramePanel &&\n <div id=\"IFramePanelDiv\" className={styles.container}>\n <div className=\"ms-font-m\">iframe Panel tester:\n <PrimaryButton\n text=\"Open iframe Panel\"\n onClick={() => { this.setState({ iFramePanelOpened: true }); }} />\n <IFramePanel\n url={iframeUrl}\n type={PanelType.medium}\n // height=\"300px\"\n headerText=\"iframe panel title\"\n closeButtonAriaLabel=\"Close\"\n isOpen={this.state.iFramePanelOpened}\n onDismiss={() => { this.setState({ iFramePanelOpened: false }); }}\n iframeOnLoad={(iframe: any) => { console.log('iframe loaded'); }}\n />\n </div>\n </div>\n }\n {controlVisibility.ImagePicker &&\n <div id=\"ImagePickerDiv\" className={styles.container}>\n <ImagePicker\n context={this.props.context}\n onFileSelected={(file) => { console.log(file); this.setState({ selectedUrlImagePicker: file.fileAbsoluteUrl }); }}\n onDeleteFile={() => { console.log('file deleted'); }}\n selectedFileUrl={this.state.selectedUrlImagePicker}\n />\n </div>\n }\n {controlVisibility.FolderPicker &&\n <div id=\"FolderPickerDiv\" className={styles.container}>\n <FolderPicker context={this.props.context}\n rootFolder={{\n Name: 'Documents',\n ServerRelativeUrl: `${this.props.context.pageContext.web.serverRelativeUrl === '/' ? '' : this.props.context.pageContext.web.serverRelativeUrl}/Shared Documents`\n }}\n onSelect={this._onFolderSelect}\n label='Folder Picker'\n required={true}\n canCreateFolders={true}\n ></FolderPicker>\n </div>\n }\n <div id=\"FilterBarDiv\" className={styles.container} hidden={!controlVisibility.FilterBar}>\n <FilterBar items={this.state.filters} inlineItemCount={3} onClearFilters={this.onClearFilters} onRemoveFilter={this.onRemoveFilter} />\n <button onClick={this.addFilter}>Add new filter</button>\n </div>\n {controlVisibility.Carousel &&\n\n <div id=\"CarouselDiv\" className={styles.container}>\n <div>\n <h3>Carousel with fixed elements:</h3>\n <Carousel\n buttonsLocation={CarouselButtonsLocation.top}\n buttonsDisplay={CarouselButtonsDisplay.block}\n\n contentContainerStyles={styles.carouselContent}\n containerButtonsStyles={styles.carouselButtonsContainer}\n\n isInfinite={true}\n\n element={this.carouselElements}\n onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}\n />\n </div>\n <div>\n <h3>Carousel with CarouselImage elements:</h3>\n <Carousel\n buttonsLocation={CarouselButtonsLocation.center}\n buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}\n\n contentContainerStyles={styles.carouselImageContent}\n //containerButtonsStyles={styles.carouselButtonsContainer}\n\n isInfinite={true}\n indicatorShape={CarouselIndicatorShape.circle}\n indicatorsDisplay={CarouselIndicatorsDisplay.block}\n pauseOnHover={true}\n\n element={[\n {\n imageSrc: 'https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80',\n title: 'Colosseum',\n description: 'This is Colosseum',\n url: 'https://en.wikipedia.org/wiki/Colosseum',\n showDetailsOnHover: true,\n imageFit: ImageFit.cover\n },\n {\n imageSrc: 'https://www.telegraph.co.uk/content/dam/science/2018/06/20/stonehenge-2326750_1920_trans%2B%2BZgEkZX3M936N5BQK4Va8RWtT0gK_6EfZT336f62EI5U.jpg',\n title: 'Stonehenge',\n description: 'This is Stonehendle',\n url: 'https://en.wikipedia.org/wiki/Stonehenge',\n showDetailsOnHover: true,\n imageFit: ImageFit.cover\n },\n {\n imageSrc: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/All_Gizah_Pyramids.jpg/2560px-All_Gizah_Pyramids.jpg',\n title: 'Pyramids of Giza',\n description: 'This are Pyramids of Giza (Egypt)',\n url: 'https://en.wikipedia.org/wiki/Egyptian_pyramids',\n showDetailsOnHover: true,\n imageFit: ImageFit.cover\n }\n ]}\n onMoveNextClicked={(index: number) => { console.log(`Next button clicked: ${index}`); }}\n onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}\n rootStyles={mergeStyles({\n backgroundColor: '#C3C3C3'\n })}\n />\n </div>\n <div>\n <h3>Carousel with triggerPageElement:</h3>\n <Carousel\n buttonsLocation={CarouselButtonsLocation.bottom}\n buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}\n\n contentContainerStyles={styles.carouselContent}\n\n canMoveNext={this.state.canMoveNext}\n canMovePrev={this.state.canMovePrev}\n triggerPageEvent={this.triggerNextElement}\n element={this.state.currentCarouselElement}\n />\n </div>\n <div>\n <h3>Carousel with minimal configuration:</h3>\n <Carousel\n element={this.carouselElements}\n contentHeight={200}\n />\n </div>\n </div>\n }\n {controlVisibility.SiteBreadcrumb &&\n <div id=\"SiteBreadcrumbDiv\" className={styles.container}>\n <div className={styles.siteBreadcrumb}>\n <SiteBreadcrumb context={this.props.context} />\n </div>\n </div>\n }\n {controlVisibility.FilePicker &&\n <div id=\"FilePickerDiv\" className={styles.container}>\n <div>\n <h3>File Picker</h3>\n <TextField\n label=\"Default SiteFileTab Folder\"\n onChange={debounce((ev, newVal) => { this.setState({ filePickerDefaultFolderAbsolutePath: newVal }); }, 500)}\n styles={{ root: { marginBottom: 10 } }}\n />\n <FilePicker\n bingAPIKey=\"<BING API KEY>\"\n //webAbsoluteUrl=\"https://023xn.sharepoint.com/sites/test1\"\n //defaultFolderAbsolutePath={\"https://aterentiev.sharepoint.com/sites/SPFxinTeamsDemo/Shared%20Documents/General\"}\n //accepts={[\".gif\", \".jpg\", \".jpeg\", \".bmp\", \".dib\", \".tif\", \".tiff\", \".ico\", \".png\", \".jxr\", \".svg\"]}\n buttonLabel=\"Add File\"\n buttonIconProps={{ iconName: 'Add', styles: { root: { fontSize: 42 } } }}\n onSave={this._onFilePickerSave}\n onChange={(filePickerResult: IFilePickerResult[]) => { console.log(filePickerResult); }}\n context={this.props.context}\n hideRecentTab={false}\n includePageLibraries={true}\n checkIfFileExists={false}\n />\n {\n this.state.filePickerResult &&\n <div>\n <div>\n FileName: {this.state.filePickerResult[0].fileName}\n </div>\n <div>\n File size: {GeneralHelper.formatBytes(this.state.filePickerResult[0].fileSize, 2)}\n </div>\n </div>\n }\n </div>\n\n <div>\n <h3>File Picker with target folder browser</h3>\n <FilePicker\n bingAPIKey=\"<BING API KEY>\"\n //accepts={[\".gif\", \".jpg\", \".jpeg\", \".bmp\", \".dib\", \".tif\", \".tiff\", \".ico\", \".png\", \".jxr\", \".svg\"]}\n buttonLabel=\"Upload image\"\n buttonIcon=\"FileImage\"\n onSave={this._onFilePickerSave}\n onChange={(filePickerResult: IFilePickerResult[]) => { console.log(filePickerResult); }}\n context={this.props.context}\n hideRecentTab={false}\n renderCustomUploadTabContent={() => (\n <FolderExplorer context={this.props.context}\n rootFolder={this.rootFolder}\n defaultFolder={this.rootFolder}\n onSelect={this._onFolderSelect}\n canCreateFolders={true}\n />)}\n />\n </div>\n <p><a href=\"javascript:;\" onClick={this.deleteItem}>Deletes second item</a></p>\n </div>\n }\n {controlVisibility.Progress &&\n <div id=\"ProgressDiv\" className={styles.container}>\n <Progress title={'Progress Test'}\n showOverallProgress={true}\n showIndeterminateOverallProgress={false}\n hideNotStartedActions={false}\n actions={this.state.progressActions}\n currentActionIndex={this.state.currentProgressActionIndex}\n longRunningText={'This operation takes longer than expected'}\n longRunningTextDisplayDelay={7000}\n height={'350px'}\n inProgressIconName={'ChromeBackMirrored'} />\n <PrimaryButton text={'Start Progress'} onClick={this._startProgress} />\n </div>\n }\n {controlVisibility.ProgressStepsIndicator &&\n <div id=\"ProgressStepsIndicatorDiv\" className={styles.container}>\n <ProgressStepsIndicator steps={this.progressSteps} currentStep={0} themeVariant={this.props.themeVariant} />\n </div>\n }\n {controlVisibility.GridLayout &&\n <div id=\"GridLayoutDiv\" className={styles.container}>\n <div className=\"ms-font-l\">Grid Layout</div>\n <GridLayout\n ariaLabel={\"List of content, use right and left arrow keys to navigate, arrow down to access details.\"}\n items={sampleGridData}\n onRenderGridItem={(item: any, finalSize: ISize, isCompact: boolean) => this._onRenderGridItem(item, finalSize, isCompact)}\n itemMinWidth={250}\n itemMaxWidth={600}\n itemPadding={60}\n //compactThreshold={220}\n //rowsPerPage={1}\n />\n </div>\n }\n {controlVisibility.HoverReactionsBar &&\n <div ref={this.divRefAddReaction} id=\"HoverReactionsBarDiv\" className={styles.container}>\n <PrimaryButton text=\"Open HoverReactionsBar\" onClick={() => { this.setState({ isOpenHoverReactionBar: true }); }} />\n <HoverReactionsBar\n isOpen={this.state.isOpenHoverReactionBar}\n onSelect={(emoji, emojiInfo) => { console.log(emoji); }}\n onDismiss={(): void => {\n this.setState({ isOpenHoverReactionBar: false });\n }}\n target={this.divRefAddReaction.current as HTMLDivElement} />\n </div>\n }\n {controlVisibility.FolderExplorer &&\n <div id=\"FolderExplorerDiv\" className={styles.container}>\n <FolderExplorer\n context={this.props.context}\n rootFolder={{\n Name: 'Documents',\n ServerRelativeUrl: `${this.props.context.pageContext.web.serverRelativeUrl === '/' ? '' : this.props.context.pageContext.web.serverRelativeUrl}/Shared Documents`\n }}\n defaultFolder={{\n Name: 'Documents',\n ServerRelativeUrl: `${this.props.context.pageContext.web.serverRelativeUrl === '/' ? '' : this.props.context.pageContext.web.serverRelativeUrl}/Shared Documents`\n }}\n onSelect={this._onFolderSelect}\n canCreateFolders={true}\n orderby='Name' //'ListItemAllFields/Created'\n orderAscending={true}\n showFiles={true}\n onFileClick={this._onFileClick}\n />\n </div>\n }\n {controlVisibility.TreeView &&\n <div id=\"TreeViewDiv\" className={styles.container}>\n <h3>Tree View</h3>\n <TreeView items={this.treeitems}\n defaultExpanded={false}\n selectionMode={TreeViewSelectionMode.Multiple}\n showCheckboxes={true}\n treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu}\n defaultSelectedKeys={this.state.treeViewSelectedKeys}\n onExpandCollapse={this.onExpandCollapseTree}\n onSelect={this.onItemSelected}\n defaultExpandedChildren={true}\n theme={this.props.themeVariant}\n //expandToSelected={true}\n // onRenderItem={this.renderCustomTreeItem}\n />\n <PrimaryButton onClick={() => { this.setState({ treeViewSelectedKeys: [] }); }}>Clear selection</PrimaryButton>\n </div>\n }\n {controlVisibility.Pagination &&\n <div id=\"PaginationDiv\" className={styles.container}>\n <Pagination\n currentPage={3}\n onChange={(page) => (this._getPage(page))}\n totalPages={this.props.paginationTotalPages || 13}\n //limiter={3}\n // hideFirstPageJump\n //hideLastPageJump\n //limiterIcon={\"NumberedListText\"}\n />\n </div>\n }\n {controlVisibility.FieldCollectionData &&\n <div id=\"FieldCollectionDataDiv\" className={styles.container}>\n <FieldCollectionData\n key={\"FieldCollectionData\"}\n label={\"Fields Collection\"}\n itemsPerPage={3}\n manageBtnLabel={\"Manage\"}\n onChanged={(value) => { console.log(value); }}\n panelHeader={\"Manage values\"}\n enableSorting={true}\n panelProps={{ type: PanelType.custom, customWidth: \"98vw\" }}\n fields={[\n { id: \"Field1\", title: \"String field\", type: CustomCollectionFieldType.string, required: true },\n { id: \"Field2\", title: \"Number field\", type: CustomCollectionFieldType.number },\n { id: \"Field3\", title: \"URL field\", type: CustomCollectionFieldType.url },\n { id: \"Field4\", title: \"Boolean field\", type: CustomCollectionFieldType.boolean },\n {\n id: \"Field5\", title: \"People picker\", type: CustomCollectionFieldType.peoplepicker, required: true,\n minimumUsers: 2, minimumUsersMessage: \"2 Users is the minimum\", maximumUsers: 3,\n },\n {\n id: \"Field6\", title: \"Combo Single\", type: CustomCollectionFieldType.combobox, required: true,\n multiSelect: false, options: [{ key: \"choice 1\", text: \"choice 1\" }, { key: \"choice 2\", text: \"choice 2\" }, { key: \"choice 3\", text: \"choice 3\" }]\n },\n {\n id: \"Field7\", title: \"Combo Multi\", type: CustomCollectionFieldType.combobox,\n allowFreeform: true, multiSelect: true, options: [{ key: \"choice 1\", text: \"choice 1\" }, { key: \"choice 2\", text: \"choice 2\" }, { key: \"choice 3\", text: \"choice 3\" }]\n },\n { id: \"Field8\", title: \"Date field\", type: CustomCollectionFieldType.date, placeholder: \"Select a date\" }\n ]}\n value={this.getRandomCollectionFieldData()}\n\n // value = {null}\n context={this.props.context as any} //error when this is omitted and people picker is used\n usePanel={true}\n noDataMessage=\"No data is selected\" //overrides the default message\n />\n </div>\n }\n {controlVisibility.ContentTypePicker &&\n <ContentTypePicker\n context={this.props.context}\n // group=\"Content Feedback\"\n // includeHidden={false}\n // includeReadOnly={false}\n // label=\"Select your content type\"\n // multiSelect={false}\n // orderBy={ContentTypesOrderBy.Name}\n // listId=\"00000000-0000-0000-0000-000000000000\"\n // onSelectionChanged={this.onContentTypePickerChanged}\n // showBlankOption={true}\n />\n }\n {controlVisibility.Dashboard &&\n <div id=\"DashboardDiv\" className={styles.container}>\n <Dashboard\n widgets={[{\n title: \"Card 1\",\n desc: \"Last updated Monday, April 4 at 11:15 AM (PT)\",\n widgetActionGroup: calloutItemsExample,\n size: WidgetSize.Quadruple,\n body: [\n {\n id: \"t1\",\n title: \"Tab 1\",\n content: (\n <Flex\n vAlign=\"center\"\n hAlign=\"center\"\n styles={{ height: \"100%\", border: \"1px dashed rgb(179, 176, 173)\" }}\n >\n <NorthstarText size=\"large\" weight=\"semibold\">\n Content #1\n </NorthstarText>\n </Flex>\n ),\n },\n {\n id: \"t2\",\n title: \"Tab 2\",\n content: (\n <Flex\n vAlign=\"center\"\n hAlign=\"center\"\n styles={{ height: \"100%\", border: \"1px dashed rgb(179, 176, 173)\" }}\n >\n <NorthstarText size=\"large\" weight=\"semibold\">\n Content #2\n </NorthstarText>\n </Flex>\n ),\n },\n {\n id: \"t3\",\n title: \"Tab 3\",\n content: (\n <Flex\n vAlign=\"center\"\n hAlign=\"center\"\n styles={{ height: \"100%\", border: \"1px dashed rgb(179, 176, 173)\" }}\n >\n <NorthstarText size=\"large\" weight=\"semibold\">\n Content #3\n </NorthstarText>\n </Flex>\n ),\n },\n ],\n link: linkExample,\n },\n {\n title: \"Card 2\",\n size: WidgetSize.Single,\n link: customizedLinkExample,\n rowSpan: 2\n },\n {\n title: \"Card 3\",\n size: WidgetSize.Double,\n link: linkExample,\n },\n {\n title: \"Card 4\",\n size: WidgetSize.Single,\n link: customizedLinkExample,\n },\n {\n title: \"Card 5\",\n size: WidgetSize.Single,\n link: linkExample,\n },\n {\n title: \"Card 6\",\n size: WidgetSize.Single,\n link: linkExample,\n }]} />\n </div>\n }\n {controlVisibility.Toolbar &&\n <div id=\"ToolbarDiv\" className={styles.container}>\n <div>\n <h3>Uncontrolled toolbar</h3>\n <Toolbar actionGroups={{\n 'group1': {\n 'action1': {\n title: 'Edit',\n iconName: 'Edit',\n onClick: () => { console.log('Edit action click'); }\n },\n 'action2': {\n title: 'New',\n iconName: 'Add',\n onClick: () => { console.log('New action click'); }\n }\n }\n }}\n filters={toolbarFilters}\n onSelectedFiltersChange={this.onToolbarSelectedFiltersChange}\n />\n </div>\n <div>\n <h3>Controlled toolbar</h3>\n <Toolbar actionGroups={{\n 'group1': {\n 'action1': {\n title: 'Edit',\n iconName: 'Edit',\n onClick: () => { console.log('Edit action click'); }\n },\n 'action2': {\n title: 'New',\n iconName: 'Add',\n onClick: () => { console.log('New action click'); }\n }\n }\n }}\n filters={toolbarFilters}\n selectedFilterIds={this.state.selectedFilters}\n onSelectedFiltersChange={this.onToolbarSelectedFiltersChange} />\n </div>\n <div>Selected filter IDs: {this.state.selectedFilters.join(\", \")}</div>\n <PrimaryButton text='Toggle filter1' onClick={() => this.toggleToolbarFilter(\"filter1\")} />\n <PrimaryButton text='Toggle filter2' onClick={() => this.toggleToolbarFilter(\"filter2\")} />\n </div>\n }\n {controlVisibility.AnimatedDialog &&\n <div id=\"AnimatedDialogDiv\" className={styles.container}>\n <h3>Animated Dialogs</h3>\n\n {/* Multiple elements added only for demo - can be controlled with fewer elements */}\n\n <PrimaryButton text='Show animated dialog' onClick={() => { this.setState({ showAnimatedDialog: true }); }} />\n {/* Normal animated dialog */}\n <AnimatedDialog\n hidden={!this.state.showAnimatedDialog}\n onDismiss={() => { this.setState({ showAnimatedDialog: false }); }}\n dialogContentProps={animatedDialogContentProps}\n modalProps={animatedModalProps}\n >\n <DialogFooter>\n <PrimaryButton onClick={() => { this.setState({ showAnimatedDialog: false }); }} text=\"Yes\" />\n <DefaultButton onClick={() => { this.setState({ showAnimatedDialog: false }); }} text=\"No\" />\n </DialogFooter>\n </AnimatedDialog>\n <br />\n <br />\n\n <PrimaryButton text='Show animated dialog with icon' onClick={() => { this.setState({ showCustomisedAnimatedDialog: true }); }} />\n {/* Animated dialog with icon */}\n <AnimatedDialog\n hidden={!this.state.showCustomisedAnimatedDialog}\n onDismiss={() => { this.setState({ showCustomisedAnimatedDialog: false }); }}\n dialogContentProps={customizedAnimatedDialogContentProps}\n modalProps={customizedAnimatedModalProps}\n dialogAnimationInType='fadeInDown'\n dialogAnimationOutType='fadeOutDown'\n iconName='UnknownSolid'\n iconAnimationType='zoomInDown'\n showAnimatedDialogFooter={true}\n okButtonText=\"Yes\"\n cancelButtonText=\"No\"\n onOkClick={() => timeout(1500)}\n onSuccess={() => {\n this.setState({ showCustomisedAnimatedDialog: false });\n this.setState({ showSuccessDialog: true });\n }}\n onError={() => {\n this.setState({ showCustomisedAnimatedDialog: false });\n this.setState({ showErrorDialog: true });\n }}>\n <div className={styles.dialogContent}>\n <span>Do you like the animated dialog?</span>\n </div>\n </AnimatedDialog>\n\n {/* Success animated dialog */}\n <AnimatedDialog\n hidden={!this.state.showSuccessDialog}\n onDismiss={() => { this.setState({ showSuccessDialog: false }); }}\n dialogContentProps={successDialogContentProps}\n modalProps={customizedAnimatedModalProps}\n iconName='CompletedSolid'\n >\n <div className={styles.dialogContent}><span>Thank you.</span></div>\n <div className={styles.dialogFooter}>\n <PrimaryButton onClick={() => { this.setState({ showSuccessDialog: false }); }} text=\"OK\" >\n </PrimaryButton>\n </div>\n </AnimatedDialog>\n\n {/* Error animated dialog */}\n <AnimatedDialog\n hidden={!this.state.showErrorDialog}\n onDismiss={() => { this.setState({ showErrorDialog: false }); }}\n dialogContentProps={errorDialogContentProps}\n modalProps={customizedAnimatedModalProps}\n iconName='StatusErrorFull'\n >\n <div className={styles.dialogContent}><span>Ther was an error.</span></div>\n <div className={styles.dialogFooter}>\n <PrimaryButton onClick={() => { this.setState({ showErrorDialog: false }); }} text=\"OK\" >\n </PrimaryButton>\n </div>\n </AnimatedDialog>\n </div>\n }\n {controlVisibility.LivePersona &&\n <div id=\"LivePersonaDiv\" className={styles.container}>\n <LivePersona upn=\"meganb@contoso.onmicrosoft.com\"\n template={\n <>\n <Persona text=\"Megan Bowen\" secondaryText=\"meganb@contoso.onmicrosoft.com\" coinSize={48} />\n </>\n }\n serviceScope={this.props.context.serviceScope}\n />\n </div>\n }\n {controlVisibility.LocationPicker &&\n <div id=\"LocationPickerDiv\" className={styles.container}>\n <LocationPicker context={this.props.context} label=\"Location\" onChange={(locValue: ILocationPickerItem) => { console.log(locValue.DisplayName + \", \" + locValue.Address.Street); }}></LocationPicker>\n </div>\n }\n {controlVisibility.ModernTaxonomyPicker &&\n <div id=\"ModernTaxonomyPickerDiv\" className={styles.container}>\n <ModernTaxonomyPicker\n allowMultipleSelections={true}\n termSetId={this.termSetId}\n panelTitle=\"Panel title\"\n label={\"Modern Taxonomy Picker\"}\n context={this.props.context}\n required={false}\n disabled={false}\n customPanelWidth={400}\n />\n </div>\n }\n {controlVisibility.MonacoEditor &&\n <div id=\"MonacoEditorDiv\" className={styles.container}>\n <MonacoEditor value={\"\"}\n showMiniMap={true}\n onValueChange={(value, validationErrors) => { console.log(value); console.log(validationErrors); }}\n language={\"javascript\"} />\n </div>\n }\n {controlVisibility.AdaptiveCardHost &&\n <div id=\"AdaptiveCardHostDiv\" className={styles.container}>\n <h3>Adaptive Card Host</h3>\n <AdaptiveCardHost\n card={{\n \"$schema\": \"http://adaptivecards.io/schemas/adaptive-card.json\",\n \"type\": \"AdaptiveCard\",\n \"version\": \"1.0\",\n \"body\": [\n {\n \"type\": \"TextBlock\",\n \"size\": \"medium\",\n \"weight\": \"bolder\",\n \"text\": \" ${ParticipantInfoForm.title}\",\n \"horizontalAlignment\": \"center\",\n \"wrap\": true,\n \"style\": \"heading\"\n },\n {\n \"type\": \"Input.Text\",\n \"label\": \"Name\",\n \"style\": \"text\",\n \"id\": \"SimpleVal\",\n \"isRequired\": true,\n \"errorMessage\": \"Name is required\"\n },\n {\n \"type\": \"Input.Text\",\n \"label\": \"Homepage\",\n \"style\": \"url\",\n \"id\": \"UrlVal\"\n },\n {\n \"type\": \"Input.Text\",\n \"label\": \"Email\",\n \"style\": \"email\",\n \"id\": \"EmailVal\"\n },\n {\n \"type\": \"Input.Text\",\n \"label\": \"Phone\",\n \"style\": \"tel\",\n \"id\": \"TelVal\"\n },\n {\n \"type\": \"Input.Text\",\n \"label\": \"Comments\",\n \"style\": \"text\",\n \"isMultiline\": true,\n \"id\": \"MultiLineVal\"\n },\n {\n \"type\": \"Input.Number\",\n \"label\": \"Quantity\",\n \"min\": -5,\n \"max\": 5,\n \"value\": 1,\n \"id\": \"NumVal\",\n \"errorMessage\": \"The quantity must be between -5 and 5\"\n },\n {\n \"type\": \"Input.Date\",\n \"label\": \"Due Date\",\n \"id\": \"DateVal\",\n \"value\": \"2017-09-20\"\n },\n {\n \"type\": \"Input.Time\",\n \"label\": \"Start time\",\n \"id\": \"TimeVal\",\n \"value\": \"16:59\"\n },\n {\n \"type\": \"TextBlock\",\n \"size\": \"medium\",\n \"weight\": \"bolder\",\n \"text\": \"${Survey.title} \",\n \"horizontalAlignment\": \"center\",\n \"wrap\": true,\n \"style\": \"heading\"\n },\n {\n \"type\": \"Input.ChoiceSet\",\n \"id\": \"CompactSelectVal\",\n \"label\": \"${Survey.questions[0].question}\",\n \"style\": \"compact\",\n \"value\": \"1\",\n \"choices\": [\n {\n \"$data\": \"${Survey.questions[0].items}\",\n \"title\": \"${choice}\",\n \"value\": \"${value}\"\n }\n ]\n },\n {\n \"type\": \"Input.ChoiceSet\",\n \"id\": \"SingleSelectVal\",\n \"label\": \"${Survey.questions[1].question}\",\n \"style\": \"expanded\",\n \"value\": \"1\",\n \"choices\": [\n {\n \"$data\": \"${Survey.questions[1].items}\",\n \"title\": \"${choice}\",\n \"value\": \"${value}\"\n }\n ]\n },\n {\n \"type\": \"Input.ChoiceSet\",\n \"id\": \"MultiSelectVal\",\n \"label\": \"${Survey.questions[2].question}\",\n \"isMultiSelect\": true,\n \"value\": \"1,3\",\n \"choices\": [\n {\n \"$data\": \"${Survey.questions[2].items}\",\n \"title\": \"${choice}\",\n \"value\": \"${value}\"\n }\n ]\n },\n {\n \"type\": \"TextBlock\",\n \"size\": \"medium\",\n \"weight\": \"bolder\",\n \"text\": \"Input.Toggle\",\n \"horizontalAlignment\": \"center\",\n \"wrap\": true,\n \"style\": \"heading\"\n },\n {\n \"type\": \"Input.Toggle\",\n \"label\": \"Please accept the terms and conditions:\",\n \"title\": \"${Survey.questions[3].question}\",\n \"valueOn\": \"true\",\n \"valueOff\": \"false\",\n \"id\": \"AcceptsTerms\",\n \"isRequired\": true,\n \"errorMessage\": \"Accepting the terms and conditions is required\"\n },\n {\n \"type\": \"Input.Toggle\",\n \"label\": \"How do you feel about red cars?\",\n \"title\": \"${Survey.questions[4].question}\",\n \"valueOn\": \"RedCars\",\n \"valueOff\": \"NotRedCars\",\n \"id\": \"ColorPreference\"\n }\n ],\n \"actions\": [\n {\n \"type\": \"Action.Submit\",\n \"title\": \"Submit\",\n \"data\": {\n \"id\": \"1234567890\"\n }\n },\n {\n \"type\": \"Action.ShowCard\",\n \"title\": \"Show Card\",\n \"card\": {\n \"type\": \"AdaptiveCard\",\n \"body\": [\n {\n \"type\": \"Input.Text\",\n \"label\": \"enter comment\",\n \"style\": \"text\",\n \"id\": \"CommentVal\"\n }\n ],\n \"actions\": [\n {\n \"type\": \"Action.Submit\",\n \"title\": \"OK\"\n }\n ]\n }\n }\n ]\n }}\n data={{\n \"$root\": {\n \"ParticipantInfoForm\": {\n \"title\": \"Input.Text elements\"\n },\n \"Survey\": {\n \"title\": \"Input ChoiceSet\",\n \"questions\": [\n {\n \"question\": \"What color do you want? (compact)\",\n \"items\": [\n {\n \"choice\": \"Red\",\n \"value\": \"1\"\n },\n {\n \"choice\": \"Green\",\n \"value\": \"2\"\n },\n {\n \"choice\": \"Blue\",\n \"value\": \"3\"\n }\n ]\n },\n {\n \"question\": \"What color do you want? (expanded)\",\n \"items\": [\n {\n \"choice\": \"Red\",\n \"value\": \"1\"\n },\n {\n \"choice\": \"Green\",\n \"value\": \"2\"\n },\n {\n \"choice\": \"Blue\",\n \"value\": \"3\"\n }\n ]\n },\n {\n \"question\": \"What color do you want? (multiselect)\",\n \"items\": [\n {\n \"choice\": \"Red\",\n \"value\": \"1\"\n },\n {\n \"choice\": \"Green\",\n \"value\": \"2\"\n },\n {\n \"choice\": \"Blue\",\n \"value\": \"3\"\n }\n ]\n },\n {\n \"question\": \"I accept the terms and conditions (True/False)\"\n },\n {\n \"question\": \"Red cars are better than other cars\"\n }\n ]\n }\n }\n }}\n theme={this.props.themeVariant}\n themeType={AdaptiveCardHostThemeType.SharePoint}\n onInvokeAction={(action) => alert(JSON.stringify(action))}\n onError={(error) => console.log(error.message)}\n onSetCustomElements={(registry: CardObjectRegistry<CardElement>) => { }}\n onSetCustomActions={(registry: CardObjectRegistry<Action>) => { }}\n onUpdateHostCapabilities={(hostCapabilities: HostCapabilities) => {\n hostCapabilities.setCustomProperty(\"CustomPropertyName\", Date.now);\n }}\n context={this.props.context}\n />\n </div>\n }\n {controlVisibility.VariantThemeProvider &&\n <div id=\"VariantThemeProviderDiv\" className={styles.container}>\n <h3>Variant Theme Provider</h3>\n <VariantThemeProvider variantType={VariantType.Strong}>\n <Stack tokens={{ childrenGap: 5, padding: 5 }}>\n <Label>This Web Part implements an example on how to use the 'Fluent UI' theme library and how to apply/generate theme variation for the Web Part itself.</Label>\n <PrimaryButton>Primary Button</PrimaryButton>\n <DefaultButton>Default Button</DefaultButton>\n <Link>Link</Link>\n </Stack>\n </VariantThemeProvider>\n </div>\n }\n {controlVisibility.EnhancedThemeProvider &&\n <div id=\"EnhancedThemeProviderDiv\" className={styles.container}>\n <h3>Enhanced Theme Provider</h3>\n <EnhancedThemeProvider applyTo=\"element\" context={this.props.context} theme={this.props.themeVariant}>\n <ControlsTestEnhancedThemeProviderFunctionComponent />\n <ControlsTestEnhancedThemeProvider />\n </EnhancedThemeProvider>\n </div>\n }\n {controlVisibility.AdaptiveCardDesignerHost &&\n <div id=\"AdaptiveCardDesignerHostDiv\" className={styles.container}>\n <h3>Adaptive Card Designer Host</h3>\n <AdaptiveCardDesignerHost\n headerText={`Adaptive Card Designer`}\n buttonText=\"Open Designer\"\n card={{ \"$schema\": \"http://adaptivecards.io/schemas/adaptive-card.json\", \"type\": \"AdaptiveCard\", \"version\": \"1.5\", \"body\": [{ \"type\": \"ColumnSet\", \"columns\": [{ \"width\": \"auto\", \"items\": [{ \"type\": \"Image\", \"size\": \"Small\", \"style\": \"Person\", \"url\": \"/_layouts/15/userphoto.aspx?size=M&username=${$root['@context']['userInfo']['email']}\" }], \"type\": \"Column\" }, { \"width\": \"stretch\", \"items\": [{ \"type\": \"TextBlock\", \"text\": \"${$root['@context']['userInfo']['displayName']}\", \"weight\": \"Bolder\" }, { \"type\": \"TextBlock\", \"spacing\": \"None\", \"text\": \"${$root['@context']['userInfo']['email']}\" }], \"type\": \"Column\" }] }] }}\n data={undefined}\n context={this.props.context}\n theme={this.props.themeVariant}\n onSave={(payload: object) => alert(JSON.stringify(payload))}\n snippets={[{\n name: \"Persona\",\n category: \"Snippets\",\n payload: {\n type: \"ColumnSet\",\n columns: [\n {\n width: \"auto\",\n items: [\n {\n type: \"Image\",\n size: \"Small\",\n style: \"Person\",\n url: \"/_layouts/15/userphoto.aspx?size=M&username=${$root['@context']['userInfo']['email']}\"\n }\n ]\n },\n {\n width: \"stretch\",\n items: [\n {\n type: \"TextBlock\",\n text: \"${$root['@context']['userInfo']['displayName']}\",\n weight: \"Bolder\"\n },\n {\n type: \"TextBlock\",\n spacing: \"None\",\n text: \"${$root['@context']['userInfo']['email']}\"\n }\n ]\n }\n ]\n }\n }]}\n />\n </div>\n }\n {controlVisibility.ShareDialog &&\n <div id=\"ShareDialogDiv\" className={styles.container}>\n <PrimaryButton text=\"Open Share dialog\" onClick={() => { this.setState({ isOpenShareDialog: true }); }} />\n <ShareDialog\n isOpen={this.state.isOpenShareDialog}\n onClose={() => this.setState({ isOpenShareDialog: false })}\n options={{\n siteUrl: this.props.context.pageContext.web.absoluteUrl,\n listId: 'b1416fca-dc77-4198-a082-62a7657dcfa9',\n itemId: 1,\n name: 'Document Name'\n }} />\n </div>\n }\n {controlVisibility.TaxonomyTree &&\n <div id=\"TaxonomyTreeDiv\" className={styles.container} hidden={!controlVisibility.TaxonomyTree}>\n <h3>Modern Taxonomy Tree</h3>\n {this.state.termStoreInfo && (\n <TaxonomyTree\n languageTag={this.state.termStoreInfo.defaultLanguageTag}\n onLoadMoreData={this.spTaxonomyService.getTerms}\n pageSize={50}\n setTerms={(value) => this.setState({ testTerms: value as any })}\n termStoreInfo={this.state.termStoreInfo}\n termSetInfo={this.state.termSetInfo}\n terms={this.state.testTerms as any[]}\n onRenderActionButton={() => <button>test button</button>}\n hideDeprecatedTerms={false}\n showIcons={true}\n />\n )}\n </div>\n }\n {controlVisibility.ListToolbar &&\n <div id=\"ListToolbarDiv\" className={styles.container}>\n <h3>ListToolbar</h3>\n <ListToolbar\n context={this.props.context}\n theme={this.props.themeVariant as any}\n items={[\n { key: 'new', label: 'New', icon: <span>+</span>, onClick: () => console.log('New clicked'), group: 'actions' },\n { key: 'edit', label: 'Edit', icon: <span>✎</span>, onClick: () => console.log('Edit clicked'), group: 'actions' },\n { key: 'delete', label: 'Delete', icon: <span>🗑</span>, onClick: () => console.log('Delete clicked'), appearance: 'subtle', group: 'danger' },\n ]}\n farItems={[\n { key: 'filter', label: 'Filter', icon: <span>🔍</span>, onClick: () => console.log('Filter clicked'), isFarItem: true },\n { key: 'settings', label: 'Settings', icon: <span>⚙</span>, onClick: () => console.log('Settings clicked'), isFarItem: true },\n ]}\n totalCount={10}\n showGroupDividers={true}\n ariaLabel=\"List Toolbar\"\n />\n </div>\n }\n {controlVisibility.TestControl &&\n <div id=\"TestControlDiv\" className={styles.container}>\n <TestControl context={this.props.context} themeVariant={this.props.themeVariant} />\n </div>\n }\n {controlVisibility.UploadFiles &&\n <div id=\"UploadFilesDiv\" className={styles.container}>\n <h3>Upload Files</h3>\n <EnhancedThemeProvider theme={this.props.themeVariant} context={this.props.context}>\n <Stack>\n <UploadFiles\n context={this.props.context}\n title=\"Upload Files\"\n onUploadFiles={(files) => {\n console.log(\"files\", files);\n }}\n themeVariant={this.props.themeVariant}\n />\n </Stack>\n </EnhancedThemeProvider>\n </div>\n }\n {controlVisibility.UserPicker &&\n <div id=\"UserPickerDiv\" className={styles.container}>\n <UserPicker\n context={this.props.context}\n secondaryTextPropertyName=\"mail\"\n theme={this.props.themeVariant}\n placeholder={\"Search User\"}\n // label={\n // <div>\n // <Person20Filled color={tokens.colorBrandForeground1} />\n // <Body1>Select User</Body1>\n // </div>\n // }\n // onSelectedUsers={onSelectedUsers}\n // onRemoveSelectedUser={onRemovedUser}\n />\n </div>\n }\n {\n controlVisibility.Calendar &&\n <div id=\"CalendarDiv\" className={styles.container}>\n <TestCalendarControl\n context={this.props.context} theme={this.props.themeVariant as any} hasTeamsContext={false} themeString={'default'} title={'Calendar'} appHostName={EAppHostName.SharePoint} />\n </div>\n\n }\n {\n controlVisibility.SPFilePicker &&\n <div id=\"SPFilePickerDiv\" className={styles.container}>\n <TestSPFilePickerControl context={this.props.context} />\n </div>\n\n }\n {controlVisibility.WorldMap &&\n <div id=\"WorldMapDiv\" className={styles.container}>\n <WorldMap description={'World Map Sample'} isDarkTheme={false} hasTeamsContext={false} title={'Microsoft Locations Worldwide'} />\n </div>\n }\n </div>\n </React.Suspense>\n );\n }\n\n private getRandomCollectionFieldData = () => {\n let result = [];\n for (let i = 1; i < 16; i++) {\n\n const sampleDate = new Date();\n sampleDate.setDate(sampleDate.getDate() + i);\n\n result.push({\n \"Field1\": `String${i}`,\n \"Field2\": i,\n \"Field3\": \"https://pnp.github.io/\",\n \"Field4\": true,\n \"Field5\": null as any,\n \"Field6\": { key: \"choice 1\", text: \"choice 1\" },\n \"Field7\": [{ key: \"choice 1\", text: \"choice 1\" }, { key: \"choice 2\", text: \"choice 2\" }],\n \"Field8\": sampleDate\n });\n }\n return result;\n }\n\n private onExpandCollapseTree(item: ITreeItem, isExpanded: boolean) {\n console.log((isExpanded ? \"item expanded: \" : \"item collapsed: \") + item);\n }\n\n private onItemSelected(items: ITreeItem[]) {\n console.log(\"items selected: \" + items.length);\n }\n\n private renderCustomTreeItem(item: ITreeItem): JSX.Element {\n return (\n <span>\n {\n item.iconProps &&\n <i className={\"ms-Icon ms-Icon--\" + item.iconProps.iconName} style={{ paddingRight: '4px' }} />\n }\n {item.label}\n </span>\n );\n }\n\n private _getPage(page: number) {\n console.log('Page:', page);\n }\n\n // private _onFolderSelect = (folder: IFolder): void => {\n // console.log('selected folder', folder);\n //\n}\n"
24794
24794
  }
24795
24795
  }
24796
24796
  }
@@ -24813,9 +24813,9 @@
24813
24813
  "index": 907
24814
24814
  },
24815
24815
  "region": {
24816
- "startLine": 2007,
24816
+ "startLine": 2114,
24817
24817
  "startColumn": 42,
24818
- "endLine": 2007,
24818
+ "endLine": 2114,
24819
24819
  "endColumn": 45,
24820
24820
  "snippet": {
24821
24821
  "text": "any"
@@ -24841,9 +24841,9 @@
24841
24841
  "index": 907
24842
24842
  },
24843
24843
  "region": {
24844
- "startLine": 2044,
24844
+ "startLine": 2151,
24845
24845
  "startColumn": 42,
24846
- "endLine": 2044,
24846
+ "endLine": 2151,
24847
24847
  "endColumn": 45,
24848
24848
  "snippet": {
24849
24849
  "text": "any"
@@ -24869,9 +24869,9 @@
24869
24869
  "index": 907
24870
24870
  },
24871
24871
  "region": {
24872
- "startLine": 2061,
24872
+ "startLine": 2168,
24873
24873
  "startColumn": 15,
24874
- "endLine": 2070,
24874
+ "endLine": 2177,
24875
24875
  "endColumn": 16,
24876
24876
  "snippet": {
24877
24877
  "text": "<FolderPicker context={this.props.context}\n rootFolder={{\n Name: 'Documents',\n ServerRelativeUrl: `${this.props.context.pageContext.web.serverRelativeUrl === '/' ? '' : this.props.context.pageContext.web.serverRelativeUrl}/Shared Documents`\n }}\n onSelect={this._onFolderSelect}\n label='Folder Picker'\n required={true}\n canCreateFolders={true}\n >"
@@ -24897,9 +24897,9 @@
24897
24897
  "index": 907
24898
24898
  },
24899
24899
  "region": {
24900
- "startLine": 2228,
24900
+ "startLine": 2335,
24901
24901
  "startColumn": 26,
24902
- "endLine": 2228,
24902
+ "endLine": 2335,
24903
24903
  "endColumn": 40,
24904
24904
  "snippet": {
24905
24905
  "text": "\"javascript:;\""
@@ -24925,9 +24925,9 @@
24925
24925
  "index": 907
24926
24926
  },
24927
24927
  "region": {
24928
- "startLine": 2257,
24928
+ "startLine": 2364,
24929
24929
  "startColumn": 42,
24930
- "endLine": 2257,
24930
+ "endLine": 2364,
24931
24931
  "endColumn": 45,
24932
24932
  "snippet": {
24933
24933
  "text": "any"
@@ -24953,9 +24953,9 @@
24953
24953
  "index": 907
24954
24954
  },
24955
24955
  "region": {
24956
- "startLine": 2364,
24956
+ "startLine": 2471,
24957
24957
  "startColumn": 48,
24958
- "endLine": 2364,
24958
+ "endLine": 2471,
24959
24959
  "endColumn": 51,
24960
24960
  "snippet": {
24961
24961
  "text": "any"
@@ -24981,9 +24981,9 @@
24981
24981
  "index": 907
24982
24982
  },
24983
24983
  "region": {
24984
- "startLine": 2576,
24984
+ "startLine": 2683,
24985
24985
  "startColumn": 19,
24986
- "endLine": 2576,
24986
+ "endLine": 2683,
24987
24987
  "endColumn": 110,
24988
24988
  "snippet": {
24989
24989
  "text": "<PrimaryButton onClick={() => { this.setState({ showSuccessDialog: false }); }} text=\"OK\" >"
@@ -25009,9 +25009,9 @@
25009
25009
  "index": 907
25010
25010
  },
25011
25011
  "region": {
25012
- "startLine": 2591,
25012
+ "startLine": 2698,
25013
25013
  "startColumn": 19,
25014
- "endLine": 2591,
25014
+ "endLine": 2698,
25015
25015
  "endColumn": 108,
25016
25016
  "snippet": {
25017
25017
  "text": "<PrimaryButton onClick={() => { this.setState({ showErrorDialog: false }); }} text=\"OK\" >"
@@ -25037,9 +25037,9 @@
25037
25037
  "index": 907
25038
25038
  },
25039
25039
  "region": {
25040
- "startLine": 2611,
25040
+ "startLine": 2718,
25041
25041
  "startColumn": 15,
25042
- "endLine": 2611,
25042
+ "endLine": 2718,
25043
25043
  "endColumn": 195,
25044
25044
  "snippet": {
25045
25045
  "text": "<LocationPicker context={this.props.context} label=\"Location\" onChange={(locValue: ILocationPickerItem) => { console.log(locValue.DisplayName + \", \" + locValue.Address.Street); }}>"
@@ -25065,7 +25065,7 @@
25065
25065
  "index": 907
25066
25066
  },
25067
25067
  "region": {
25068
- "startLine": 2905,
25068
+ "startLine": 3012,
25069
25069
  "startColumn": 80,
25070
25070
  "snippet": {
25071
25071
  "text": "'Fluent UI' theme library and how to apply/generate theme variation for the Web Part itself.</Label>"
@@ -25091,7 +25091,7 @@
25091
25091
  "index": 907
25092
25092
  },
25093
25093
  "region": {
25094
- "startLine": 2905,
25094
+ "startLine": 3012,
25095
25095
  "startColumn": 90,
25096
25096
  "snippet": {
25097
25097
  "text": "' theme library and how to apply/generate theme variation for the Web Part itself.</Label>"
@@ -25117,9 +25117,9 @@
25117
25117
  "index": 907
25118
25118
  },
25119
25119
  "region": {
25120
- "startLine": 2993,
25120
+ "startLine": 3100,
25121
25121
  "startColumn": 76,
25122
- "endLine": 2993,
25122
+ "endLine": 3100,
25123
25123
  "endColumn": 79,
25124
25124
  "snippet": {
25125
25125
  "text": "any"
@@ -25145,9 +25145,9 @@
25145
25145
  "index": 907
25146
25146
  },
25147
25147
  "region": {
25148
- "startLine": 2996,
25148
+ "startLine": 3103,
25149
25149
  "startColumn": 50,
25150
- "endLine": 2996,
25150
+ "endLine": 3103,
25151
25151
  "endColumn": 53,
25152
25152
  "snippet": {
25153
25153
  "text": "any"
@@ -25173,9 +25173,9 @@
25173
25173
  "index": 907
25174
25174
  },
25175
25175
  "region": {
25176
- "startLine": 3009,
25176
+ "startLine": 3116,
25177
25177
  "startColumn": 51,
25178
- "endLine": 3009,
25178
+ "endLine": 3116,
25179
25179
  "endColumn": 54,
25180
25180
  "snippet": {
25181
25181
  "text": "any"
@@ -25201,9 +25201,9 @@
25201
25201
  "index": 907
25202
25202
  },
25203
25203
  "region": {
25204
- "startLine": 3069,
25204
+ "startLine": 3176,
25205
25205
  "startColumn": 82,
25206
- "endLine": 3069,
25206
+ "endLine": 3176,
25207
25207
  "endColumn": 85,
25208
25208
  "snippet": {
25209
25209
  "text": "any"
@@ -25229,9 +25229,9 @@
25229
25229
  "index": 907
25230
25230
  },
25231
25231
  "region": {
25232
- "startLine": 3090,
25232
+ "startLine": 3197,
25233
25233
  "startColumn": 3,
25234
- "endLine": 3090,
25234
+ "endLine": 3197,
25235
25235
  "endColumn": 42,
25236
25236
  "snippet": {
25237
25237
  "text": "private getRandomCollectionFieldData = "
@@ -25257,9 +25257,9 @@
25257
25257
  "index": 907
25258
25258
  },
25259
25259
  "region": {
25260
- "startLine": 3091,
25260
+ "startLine": 3198,
25261
25261
  "startColumn": 9,
25262
- "endLine": 3091,
25262
+ "endLine": 3198,
25263
25263
  "endColumn": 15,
25264
25264
  "snippet": {
25265
25265
  "text": "result"
@@ -25285,9 +25285,9 @@
25285
25285
  "index": 907
25286
25286
  },
25287
25287
  "region": {
25288
- "startLine": 3102,
25288
+ "startLine": 3209,
25289
25289
  "startColumn": 27,
25290
- "endLine": 3102,
25290
+ "endLine": 3209,
25291
25291
  "endColumn": 30,
25292
25292
  "snippet": {
25293
25293
  "text": "any"
@@ -25313,9 +25313,9 @@
25313
25313
  "index": 907
25314
25314
  },
25315
25315
  "region": {
25316
- "startLine": 3111,
25316
+ "startLine": 3218,
25317
25317
  "startColumn": 3,
25318
- "endLine": 3111,
25318
+ "endLine": 3218,
25319
25319
  "endColumn": 31,
25320
25320
  "snippet": {
25321
25321
  "text": "private onExpandCollapseTree"
@@ -25341,9 +25341,9 @@
25341
25341
  "index": 907
25342
25342
  },
25343
25343
  "region": {
25344
- "startLine": 3115,
25344
+ "startLine": 3222,
25345
25345
  "startColumn": 3,
25346
- "endLine": 3115,
25346
+ "endLine": 3222,
25347
25347
  "endColumn": 25,
25348
25348
  "snippet": {
25349
25349
  "text": "private onItemSelected"
@@ -25369,9 +25369,9 @@
25369
25369
  "index": 907
25370
25370
  },
25371
25371
  "region": {
25372
- "startLine": 3131,
25372
+ "startLine": 3238,
25373
25373
  "startColumn": 3,
25374
- "endLine": 3131,
25374
+ "endLine": 3238,
25375
25375
  "endColumn": 19,
25376
25376
  "snippet": {
25377
25377
  "text": "private _getPage"
@@ -25397,9 +25397,9 @@
25397
25397
  "index": 907
25398
25398
  },
25399
25399
  "region": {
25400
- "startLine": 764,
25400
+ "startLine": 840,
25401
25401
  "startColumn": 35,
25402
- "endLine": 764,
25402
+ "endLine": 840,
25403
25403
  "endColumn": 38,
25404
25404
  "snippet": {
25405
25405
  "text": "any"
@@ -26879,6 +26879,58 @@
26879
26879
  "id": "ESL0999"
26880
26880
  }
26881
26881
  },
26882
+ {
26883
+ "level": "warning",
26884
+ "message": {
26885
+ "text": "Unused eslint-disable directive (no problems were reported from '@typescript-eslint/no-explicit-any')."
26886
+ },
26887
+ "locations": [
26888
+ {
26889
+ "physicalLocation": {
26890
+ "artifactLocation": {
26891
+ "uri": "src/controls/richText/RichText.tsx",
26892
+ "index": 319
26893
+ },
26894
+ "region": {
26895
+ "startLine": 1030,
26896
+ "startColumn": 3,
26897
+ "snippet": {
26898
+ "text": "// eslint-disable-line @typescript-eslint/no-explicit-any"
26899
+ }
26900
+ }
26901
+ }
26902
+ }
26903
+ ],
26904
+ "descriptor": {
26905
+ "id": "ESL0999"
26906
+ }
26907
+ },
26908
+ {
26909
+ "level": "warning",
26910
+ "message": {
26911
+ "text": "Unused eslint-disable directive (no problems were reported from '@typescript-eslint/no-explicit-any')."
26912
+ },
26913
+ "locations": [
26914
+ {
26915
+ "physicalLocation": {
26916
+ "artifactLocation": {
26917
+ "uri": "src/controls/richText/RichText.tsx",
26918
+ "index": 319
26919
+ },
26920
+ "region": {
26921
+ "startLine": 1151,
26922
+ "startColumn": 3,
26923
+ "snippet": {
26924
+ "text": "// eslint-disable-line @typescript-eslint/no-explicit-any"
26925
+ }
26926
+ }
26927
+ }
26928
+ }
26929
+ ],
26930
+ "descriptor": {
26931
+ "id": "ESL0999"
26932
+ }
26933
+ },
26882
26934
  {
26883
26935
  "level": "warning",
26884
26936
  "message": {