@skyux/flyout 5.5.0 → 5.6.2
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.
- package/bundles/skyux-flyout.umd.js +100 -97
- package/documentation.json +39 -61
- package/esm2015/lib/modules/flyout/flyout-adapter.service.js.map +1 -1
- package/esm2015/lib/modules/flyout/flyout-instance.js.map +1 -1
- package/esm2015/lib/modules/flyout/flyout-iterator.component.js.map +1 -1
- package/esm2015/lib/modules/flyout/flyout-media-query.service.js.map +1 -1
- package/esm2015/lib/modules/flyout/flyout.component.js +9 -6
- package/esm2015/lib/modules/flyout/flyout.component.js.map +1 -1
- package/esm2015/lib/modules/flyout/flyout.module.js +3 -3
- package/esm2015/lib/modules/flyout/flyout.module.js.map +1 -1
- package/esm2015/lib/modules/flyout/flyout.service.js +1 -1
- package/esm2015/lib/modules/flyout/flyout.service.js.map +1 -1
- package/esm2015/lib/modules/flyout/types/flyout-config.js.map +1 -1
- package/esm2015/lib/modules/shared/sky-flyout-resources.module.js +1 -1
- package/esm2015/lib/modules/shared/sky-flyout-resources.module.js.map +1 -1
- package/fesm2015/skyux-flyout.js +70 -67
- package/fesm2015/skyux-flyout.js.map +1 -1
- package/lib/modules/flyout/flyout-iterator.component.d.ts +1 -1
- package/lib/modules/flyout/flyout.component.d.ts +2 -2
- package/lib/modules/flyout/flyout.service.d.ts +1 -1
- package/package.json +17 -17
package/documentation.json
CHANGED
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
"sources": [
|
|
141
141
|
{
|
|
142
142
|
"fileName": "projects/flyout/src/modules/flyout/flyout-instance.ts",
|
|
143
|
-
"line":
|
|
143
|
+
"line": 115,
|
|
144
144
|
"character": 2
|
|
145
145
|
}
|
|
146
146
|
],
|
|
@@ -189,7 +189,7 @@
|
|
|
189
189
|
"sources": [
|
|
190
190
|
{
|
|
191
191
|
"fileName": "projects/flyout/src/modules/flyout/flyout-instance.ts",
|
|
192
|
-
"line":
|
|
192
|
+
"line": 26,
|
|
193
193
|
"character": 9
|
|
194
194
|
}
|
|
195
195
|
],
|
|
@@ -221,7 +221,7 @@
|
|
|
221
221
|
"sources": [
|
|
222
222
|
{
|
|
223
223
|
"fileName": "projects/flyout/src/modules/flyout/flyout-instance.ts",
|
|
224
|
-
"line":
|
|
224
|
+
"line": 31,
|
|
225
225
|
"character": 9
|
|
226
226
|
}
|
|
227
227
|
],
|
|
@@ -251,7 +251,7 @@
|
|
|
251
251
|
"sources": [
|
|
252
252
|
{
|
|
253
253
|
"fileName": "projects/flyout/src/modules/flyout/flyout-instance.ts",
|
|
254
|
-
"line":
|
|
254
|
+
"line": 45,
|
|
255
255
|
"character": 9
|
|
256
256
|
}
|
|
257
257
|
],
|
|
@@ -272,7 +272,7 @@
|
|
|
272
272
|
"sources": [
|
|
273
273
|
{
|
|
274
274
|
"fileName": "projects/flyout/src/modules/flyout/flyout-instance.ts",
|
|
275
|
-
"line":
|
|
275
|
+
"line": 19,
|
|
276
276
|
"character": 13
|
|
277
277
|
}
|
|
278
278
|
],
|
|
@@ -313,7 +313,7 @@
|
|
|
313
313
|
"sources": [
|
|
314
314
|
{
|
|
315
315
|
"fileName": "projects/flyout/src/modules/flyout/flyout-instance.ts",
|
|
316
|
-
"line":
|
|
316
|
+
"line": 50,
|
|
317
317
|
"character": 13
|
|
318
318
|
}
|
|
319
319
|
],
|
|
@@ -353,7 +353,7 @@
|
|
|
353
353
|
"sources": [
|
|
354
354
|
{
|
|
355
355
|
"fileName": "projects/flyout/src/modules/flyout/flyout-instance.ts",
|
|
356
|
-
"line":
|
|
356
|
+
"line": 65,
|
|
357
357
|
"character": 13
|
|
358
358
|
}
|
|
359
359
|
],
|
|
@@ -426,7 +426,7 @@
|
|
|
426
426
|
"sources": [
|
|
427
427
|
{
|
|
428
428
|
"fileName": "projects/flyout/src/modules/flyout/flyout-instance.ts",
|
|
429
|
-
"line":
|
|
429
|
+
"line": 57,
|
|
430
430
|
"character": 13
|
|
431
431
|
}
|
|
432
432
|
],
|
|
@@ -466,7 +466,7 @@
|
|
|
466
466
|
"sources": [
|
|
467
467
|
{
|
|
468
468
|
"fileName": "projects/flyout/src/modules/flyout/flyout-instance.ts",
|
|
469
|
-
"line":
|
|
469
|
+
"line": 86,
|
|
470
470
|
"character": 13
|
|
471
471
|
}
|
|
472
472
|
],
|
|
@@ -539,7 +539,7 @@
|
|
|
539
539
|
"sources": [
|
|
540
540
|
{
|
|
541
541
|
"fileName": "projects/flyout/src/modules/flyout/flyout-instance.ts",
|
|
542
|
-
"line":
|
|
542
|
+
"line": 125,
|
|
543
543
|
"character": 9
|
|
544
544
|
}
|
|
545
545
|
],
|
|
@@ -619,7 +619,7 @@
|
|
|
619
619
|
"sources": [
|
|
620
620
|
{
|
|
621
621
|
"fileName": "projects/flyout/src/modules/flyout/flyout-instance.ts",
|
|
622
|
-
"line":
|
|
622
|
+
"line": 13,
|
|
623
623
|
"character": 13
|
|
624
624
|
}
|
|
625
625
|
],
|
|
@@ -653,29 +653,7 @@
|
|
|
653
653
|
}
|
|
654
654
|
}
|
|
655
655
|
],
|
|
656
|
-
"children": [
|
|
657
|
-
{
|
|
658
|
-
"id": 157,
|
|
659
|
-
"name": "constructor",
|
|
660
|
-
"kind": 512,
|
|
661
|
-
"kindString": "Constructor",
|
|
662
|
-
"flags": {},
|
|
663
|
-
"signatures": [
|
|
664
|
-
{
|
|
665
|
-
"id": 158,
|
|
666
|
-
"name": "new SkyFlyoutModule",
|
|
667
|
-
"kind": 16384,
|
|
668
|
-
"kindString": "Constructor signature",
|
|
669
|
-
"flags": {},
|
|
670
|
-
"type": {
|
|
671
|
-
"type": "reference",
|
|
672
|
-
"id": 156,
|
|
673
|
-
"name": "SkyFlyoutModule"
|
|
674
|
-
}
|
|
675
|
-
}
|
|
676
|
-
]
|
|
677
|
-
}
|
|
678
|
-
],
|
|
656
|
+
"children": [],
|
|
679
657
|
"groups": [
|
|
680
658
|
{
|
|
681
659
|
"title": "Constructors",
|
|
@@ -688,7 +666,7 @@
|
|
|
688
666
|
"sources": [
|
|
689
667
|
{
|
|
690
668
|
"fileName": "projects/flyout/src/modules/flyout/flyout.module.ts",
|
|
691
|
-
"line":
|
|
669
|
+
"line": 32,
|
|
692
670
|
"character": 13
|
|
693
671
|
}
|
|
694
672
|
]
|
|
@@ -726,7 +704,7 @@
|
|
|
726
704
|
"sources": [
|
|
727
705
|
{
|
|
728
706
|
"fileName": "projects/flyout/src/modules/flyout/flyout.service.ts",
|
|
729
|
-
"line":
|
|
707
|
+
"line": 40,
|
|
730
708
|
"character": 2
|
|
731
709
|
}
|
|
732
710
|
],
|
|
@@ -830,7 +808,7 @@
|
|
|
830
808
|
"sources": [
|
|
831
809
|
{
|
|
832
810
|
"fileName": "projects/flyout/src/modules/flyout/flyout.service.ts",
|
|
833
|
-
"line":
|
|
811
|
+
"line": 60,
|
|
834
812
|
"character": 9
|
|
835
813
|
}
|
|
836
814
|
],
|
|
@@ -881,7 +859,7 @@
|
|
|
881
859
|
"sources": [
|
|
882
860
|
{
|
|
883
861
|
"fileName": "projects/flyout/src/modules/flyout/flyout.service.ts",
|
|
884
|
-
"line":
|
|
862
|
+
"line": 49,
|
|
885
863
|
"character": 9
|
|
886
864
|
}
|
|
887
865
|
],
|
|
@@ -918,7 +896,7 @@
|
|
|
918
896
|
"sources": [
|
|
919
897
|
{
|
|
920
898
|
"fileName": "projects/flyout/src/modules/flyout/flyout.service.ts",
|
|
921
|
-
"line":
|
|
899
|
+
"line": 77,
|
|
922
900
|
"character": 9
|
|
923
901
|
}
|
|
924
902
|
],
|
|
@@ -1020,7 +998,7 @@
|
|
|
1020
998
|
"sources": [
|
|
1021
999
|
{
|
|
1022
1000
|
"fileName": "projects/flyout/src/modules/flyout/flyout.service.ts",
|
|
1023
|
-
"line":
|
|
1001
|
+
"line": 34,
|
|
1024
1002
|
"character": 13
|
|
1025
1003
|
}
|
|
1026
1004
|
],
|
|
@@ -1219,7 +1197,7 @@
|
|
|
1219
1197
|
"sources": [
|
|
1220
1198
|
{
|
|
1221
1199
|
"fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
|
|
1222
|
-
"line":
|
|
1200
|
+
"line": 15,
|
|
1223
1201
|
"character": 2
|
|
1224
1202
|
}
|
|
1225
1203
|
],
|
|
@@ -1242,7 +1220,7 @@
|
|
|
1242
1220
|
"sources": [
|
|
1243
1221
|
{
|
|
1244
1222
|
"fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
|
|
1245
|
-
"line":
|
|
1223
|
+
"line": 22,
|
|
1246
1224
|
"character": 2
|
|
1247
1225
|
}
|
|
1248
1226
|
],
|
|
@@ -1265,7 +1243,7 @@
|
|
|
1265
1243
|
"sources": [
|
|
1266
1244
|
{
|
|
1267
1245
|
"fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
|
|
1268
|
-
"line":
|
|
1246
|
+
"line": 30,
|
|
1269
1247
|
"character": 2
|
|
1270
1248
|
}
|
|
1271
1249
|
],
|
|
@@ -1298,7 +1276,7 @@
|
|
|
1298
1276
|
"sources": [
|
|
1299
1277
|
{
|
|
1300
1278
|
"fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
|
|
1301
|
-
"line":
|
|
1279
|
+
"line": 42,
|
|
1302
1280
|
"character": 2
|
|
1303
1281
|
}
|
|
1304
1282
|
],
|
|
@@ -1321,7 +1299,7 @@
|
|
|
1321
1299
|
"sources": [
|
|
1322
1300
|
{
|
|
1323
1301
|
"fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
|
|
1324
|
-
"line":
|
|
1302
|
+
"line": 48,
|
|
1325
1303
|
"character": 2
|
|
1326
1304
|
}
|
|
1327
1305
|
],
|
|
@@ -1350,7 +1328,7 @@
|
|
|
1350
1328
|
"sources": [
|
|
1351
1329
|
{
|
|
1352
1330
|
"fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
|
|
1353
|
-
"line":
|
|
1331
|
+
"line": 97,
|
|
1354
1332
|
"character": 2
|
|
1355
1333
|
}
|
|
1356
1334
|
],
|
|
@@ -1379,7 +1357,7 @@
|
|
|
1379
1357
|
"sources": [
|
|
1380
1358
|
{
|
|
1381
1359
|
"fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
|
|
1382
|
-
"line":
|
|
1360
|
+
"line": 90,
|
|
1383
1361
|
"character": 2
|
|
1384
1362
|
}
|
|
1385
1363
|
],
|
|
@@ -1408,7 +1386,7 @@
|
|
|
1408
1386
|
"sources": [
|
|
1409
1387
|
{
|
|
1410
1388
|
"fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
|
|
1411
|
-
"line":
|
|
1389
|
+
"line": 60,
|
|
1412
1390
|
"character": 2
|
|
1413
1391
|
}
|
|
1414
1392
|
],
|
|
@@ -1437,7 +1415,7 @@
|
|
|
1437
1415
|
"sources": [
|
|
1438
1416
|
{
|
|
1439
1417
|
"fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
|
|
1440
|
-
"line":
|
|
1418
|
+
"line": 54,
|
|
1441
1419
|
"character": 2
|
|
1442
1420
|
}
|
|
1443
1421
|
],
|
|
@@ -1460,7 +1438,7 @@
|
|
|
1460
1438
|
"sources": [
|
|
1461
1439
|
{
|
|
1462
1440
|
"fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
|
|
1463
|
-
"line":
|
|
1441
|
+
"line": 66,
|
|
1464
1442
|
"character": 2
|
|
1465
1443
|
}
|
|
1466
1444
|
],
|
|
@@ -1484,7 +1462,7 @@
|
|
|
1484
1462
|
"sources": [
|
|
1485
1463
|
{
|
|
1486
1464
|
"fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
|
|
1487
|
-
"line":
|
|
1465
|
+
"line": 71,
|
|
1488
1466
|
"character": 2
|
|
1489
1467
|
}
|
|
1490
1468
|
],
|
|
@@ -1508,7 +1486,7 @@
|
|
|
1508
1486
|
"sources": [
|
|
1509
1487
|
{
|
|
1510
1488
|
"fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
|
|
1511
|
-
"line":
|
|
1489
|
+
"line": 76,
|
|
1512
1490
|
"character": 2
|
|
1513
1491
|
}
|
|
1514
1492
|
],
|
|
@@ -1534,7 +1512,7 @@
|
|
|
1534
1512
|
"sources": [
|
|
1535
1513
|
{
|
|
1536
1514
|
"fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
|
|
1537
|
-
"line":
|
|
1515
|
+
"line": 105,
|
|
1538
1516
|
"character": 2
|
|
1539
1517
|
}
|
|
1540
1518
|
],
|
|
@@ -1563,7 +1541,7 @@
|
|
|
1563
1541
|
"sources": [
|
|
1564
1542
|
{
|
|
1565
1543
|
"fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
|
|
1566
|
-
"line":
|
|
1544
|
+
"line": 83,
|
|
1567
1545
|
"character": 2
|
|
1568
1546
|
}
|
|
1569
1547
|
],
|
|
@@ -1598,7 +1576,7 @@
|
|
|
1598
1576
|
"sources": [
|
|
1599
1577
|
{
|
|
1600
1578
|
"fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
|
|
1601
|
-
"line":
|
|
1579
|
+
"line": 7,
|
|
1602
1580
|
"character": 17
|
|
1603
1581
|
}
|
|
1604
1582
|
]
|
|
@@ -1805,12 +1783,12 @@
|
|
|
1805
1783
|
{
|
|
1806
1784
|
"fileName": "flyout-demo.component.ts",
|
|
1807
1785
|
"filePath": "/projects/flyout/documentation/code-examples/flyout/basic/flyout-demo.component.ts",
|
|
1808
|
-
"rawContents": "import { Component } from '@angular/core';\
|
|
1786
|
+
"rawContents": "import { Component } from '@angular/core';\nimport {\n SkyFlyoutConfig,\n SkyFlyoutInstance,\n SkyFlyoutService,\n} from '@skyux/flyout';\n\nimport { FlyoutDemoFlyoutComponent } from './flyout-demo-flyout.component';\n\n@Component({\n selector: 'app-flyout-demo',\n templateUrl: './flyout-demo.component.html',\n})\nexport class FlyoutDemoComponent {\n public flyout: SkyFlyoutInstance<any>;\n\n constructor(private flyoutService: SkyFlyoutService) {}\n\n public closeAndRemoveFlyout(): void {\n if (this.flyout && this.flyout.isOpen) {\n this.flyoutService.close();\n }\n this.flyout = undefined;\n }\n\n public openFlyoutWithCutsomWidth(): void {\n const flyoutConfig: SkyFlyoutConfig = {\n ariaLabelledBy: 'flyout-title',\n ariaRole: 'dialog',\n defaultWidth: 350,\n maxWidth: 500,\n minWidth: 200,\n };\n this.flyout = this.flyoutService.open(\n FlyoutDemoFlyoutComponent,\n flyoutConfig\n );\n\n this.flyout.closed.subscribe(() => {\n this.flyout = undefined;\n });\n }\n\n public openSimpleFlyout(): void {\n const flyoutConfig: SkyFlyoutConfig = {\n ariaLabelledBy: 'flyout-title',\n ariaRole: 'dialog',\n };\n this.flyout = this.flyoutService.open(\n FlyoutDemoFlyoutComponent,\n flyoutConfig\n );\n\n this.flyout.closed.subscribe(() => {\n this.flyout = undefined;\n });\n }\n}\n"
|
|
1809
1787
|
},
|
|
1810
1788
|
{
|
|
1811
1789
|
"fileName": "flyout-demo.module.ts",
|
|
1812
1790
|
"filePath": "/projects/flyout/documentation/code-examples/flyout/basic/flyout-demo.module.ts",
|
|
1813
|
-
"rawContents": "import {
|
|
1791
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyFlyoutModule } from '@skyux/flyout';\n\nimport { FlyoutDemoFlyoutComponent } from './flyout-demo-flyout.component';\nimport { FlyoutDemoComponent } from './flyout-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyFlyoutModule],\n declarations: [FlyoutDemoComponent, FlyoutDemoFlyoutComponent],\n entryComponents: [FlyoutDemoFlyoutComponent],\n exports: [FlyoutDemoComponent],\n})\nexport class AutocompleteDemoModule {}\n"
|
|
1814
1792
|
},
|
|
1815
1793
|
{
|
|
1816
1794
|
"fileName": "flyout-demo-flyout.component.ts",
|
|
@@ -1825,12 +1803,12 @@
|
|
|
1825
1803
|
{
|
|
1826
1804
|
"fileName": "flyout-demo.component.ts",
|
|
1827
1805
|
"filePath": "/projects/flyout/documentation/code-examples/flyout/custom-headers/flyout-demo.component.ts",
|
|
1828
|
-
"rawContents": "import { Component } from '@angular/core';\
|
|
1806
|
+
"rawContents": "import { Component } from '@angular/core';\nimport {\n SkyFlyoutConfig,\n SkyFlyoutInstance,\n SkyFlyoutService,\n} from '@skyux/flyout';\n\nimport { FlyoutDemoFlyoutComponent } from './flyout-demo-flyout.component';\n\n@Component({\n selector: 'app-flyout-demo',\n templateUrl: './flyout-demo.component.html',\n})\nexport class FlyoutDemoComponent {\n public flyout: SkyFlyoutInstance<any>;\n\n constructor(private flyoutService: SkyFlyoutService) {}\n\n public openFlyoutWithIterators(): void {\n const flyoutConfig: SkyFlyoutConfig = {\n ariaLabelledBy: 'flyout-title',\n ariaRole: 'dialog',\n showIterator: true,\n };\n this.flyout = this.flyoutService.open(\n FlyoutDemoFlyoutComponent,\n flyoutConfig\n );\n\n this.flyout.iteratorNextButtonClick.subscribe(() => {\n alert('Next iterator button clicked!');\n });\n\n this.flyout.iteratorPreviousButtonClick.subscribe(() => {\n alert('Prvious iterator button clicked!');\n });\n\n this.flyout.closed.subscribe(() => {\n this.flyout = undefined;\n });\n }\n\n public openFlyoutWithRoutePermalink(): void {\n const flyoutConfig: SkyFlyoutConfig = {\n ariaLabelledBy: 'flyout-title',\n ariaRole: 'dialog',\n permalink: {\n label: 'Go to Components page',\n route: {\n commands: ['/components'],\n extras: {\n fragment: 'helloWorld',\n queryParams: {\n foo: 'bar',\n },\n },\n },\n },\n };\n this.flyout = this.flyoutService.open(\n FlyoutDemoFlyoutComponent,\n flyoutConfig\n );\n\n this.flyout.closed.subscribe(() => {\n this.flyout = undefined;\n });\n }\n\n public openFlyoutWithUrlPermalink(): void {\n const flyoutConfig: SkyFlyoutConfig = {\n ariaLabelledBy: 'flyout-title',\n ariaRole: 'dialog',\n permalink: {\n label: `Visit blackbaud.com`,\n url: 'http://www.blackbaud.com',\n },\n };\n this.flyout = this.flyoutService.open(\n FlyoutDemoFlyoutComponent,\n flyoutConfig\n );\n\n this.flyout.closed.subscribe(() => {\n this.flyout = undefined;\n });\n }\n}\n"
|
|
1829
1807
|
},
|
|
1830
1808
|
{
|
|
1831
1809
|
"fileName": "flyout-demo.module.ts",
|
|
1832
1810
|
"filePath": "/projects/flyout/documentation/code-examples/flyout/custom-headers/flyout-demo.module.ts",
|
|
1833
|
-
"rawContents": "import {
|
|
1811
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyFlyoutModule } from '@skyux/flyout';\n\nimport { FlyoutDemoFlyoutComponent } from './flyout-demo-flyout.component';\nimport { FlyoutDemoComponent } from './flyout-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyFlyoutModule],\n declarations: [FlyoutDemoComponent, FlyoutDemoFlyoutComponent],\n entryComponents: [FlyoutDemoFlyoutComponent],\n exports: [FlyoutDemoComponent],\n})\nexport class AutocompleteDemoModule {}\n"
|
|
1834
1812
|
},
|
|
1835
1813
|
{
|
|
1836
1814
|
"fileName": "flyout-demo-context.ts",
|
|
@@ -1855,12 +1833,12 @@
|
|
|
1855
1833
|
{
|
|
1856
1834
|
"fileName": "flyout-demo.component.ts",
|
|
1857
1835
|
"filePath": "/projects/flyout/documentation/code-examples/flyout/grid/flyout-demo.component.ts",
|
|
1858
|
-
"rawContents": "import { Component, ViewChild } from '@angular/core';\
|
|
1836
|
+
"rawContents": "import { Component, ViewChild } from '@angular/core';\nimport {\n SkyFlyoutConfig,\n SkyFlyoutInstance,\n SkyFlyoutService,\n} from '@skyux/flyout';\nimport { ListItemModel } from '@skyux/list-builder-common';\nimport { SkyListViewGridComponent } from '@skyux/list-builder-view-grids';\n\nimport { Subject, of } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { FlyoutDemoContext } from './flyout-demo-context';\nimport { FlyoutDemoFlyoutComponent } from './flyout-demo-flyout.component';\n\n@Component({\n selector: 'app-flyout-demo',\n templateUrl: './flyout-demo.component.html',\n})\nexport class FlyoutDemoComponent {\n public flyout: SkyFlyoutInstance<any>;\n\n public rowHighlightedId: string;\n\n public users = of([\n {\n id: '1',\n name: 'Troy Barnes',\n constituentCode: 'Alumnus',\n latestGift: 175,\n status: 'Paid',\n },\n {\n id: '2',\n name: 'Britta Perry',\n constituentCode: 'Friend',\n latestGift: 5,\n status: 'Past due',\n },\n {\n id: '3',\n name: 'Pierce Hawthorne',\n constituentCode: 'Board Member',\n latestGift: 1500,\n status: 'Paid',\n },\n {\n id: '4',\n name: 'Annie Edison',\n constituentCode: 'Alumnus',\n latestGift: 100,\n status: 'Paid',\n },\n {\n id: '5',\n name: 'Shirley Bennett',\n constituentCode: 'Board Member',\n latestGift: 250,\n status: 'Paid',\n },\n {\n id: '6',\n name: 'Jeff Winger',\n constituentCode: 'Friend',\n latestGift: 250,\n status: 'Paid',\n },\n {\n id: '7',\n name: 'Abed Nadir',\n constituentCode: 'Major Donor',\n latestGift: 100000,\n status: 'Paid',\n },\n ]);\n\n @ViewChild(SkyListViewGridComponent)\n public listViewGridComponent: SkyListViewGridComponent;\n\n private listState: ListItemModel[];\n\n private openFlyoutStream = new Subject<boolean>();\n\n constructor(private flyoutService: SkyFlyoutService) {}\n\n public onNameClick(record: FlyoutDemoContext): void {\n this.openRecord(record);\n }\n\n private openRecord(record: FlyoutDemoContext) {\n // Prevent highlight from being prematurely removed.\n this.openFlyoutStream.next(true);\n\n const flyoutConfig: SkyFlyoutConfig = {\n providers: [\n {\n provide: FlyoutDemoContext,\n useValue: record,\n },\n ],\n ariaLabelledBy: 'flyout-title',\n ariaRole: 'dialog',\n permalink: {\n route: {\n commands: ['/users', record.id],\n extras: {\n queryParams: {\n envid: '123456789',\n },\n },\n },\n },\n showIterator: true,\n };\n\n this.flyout = this.flyoutService.open(\n FlyoutDemoFlyoutComponent,\n flyoutConfig\n );\n\n this.flyout.closed.subscribe(() => {\n this.flyout = undefined;\n });\n\n this.initIterators(record, this.flyout);\n }\n\n private initIterators(record: any, flyout: SkyFlyoutInstance<any>) {\n this.rowHighlightedId = record.id;\n\n // Remove highlights when flyout is closed.\n flyout.closed.pipe(takeUntil(this.openFlyoutStream)).subscribe(() => {\n this.rowHighlightedId = undefined;\n });\n\n this.listViewGridComponent.items\n .pipe(takeUntil(this.openFlyoutStream))\n .subscribe((s: any) => {\n this.listState = s;\n\n flyout.iteratorPreviousButtonDisabled = this.isFirstElementInArray(\n this.rowHighlightedId,\n this.listState\n );\n flyout.iteratorNextButtonDisabled = this.isLastElementInArray(\n this.rowHighlightedId,\n this.listState\n );\n });\n\n flyout.iteratorPreviousButtonClick\n .pipe(takeUntil(this.openFlyoutStream))\n .subscribe(() => {\n const previous = this.stepToItemInArray(\n this.listState,\n this.rowHighlightedId,\n -1\n );\n this.openRecord(previous.data);\n });\n\n flyout.iteratorNextButtonClick\n .pipe(takeUntil(this.openFlyoutStream))\n .subscribe(() => {\n const next = this.stepToItemInArray(\n this.listState,\n this.rowHighlightedId,\n 1\n );\n this.openRecord(next.data);\n });\n\n flyout.iteratorPreviousButtonDisabled = this.isFirstElementInArray(\n this.rowHighlightedId,\n this.listState\n );\n flyout.iteratorNextButtonDisabled = this.isLastElementInArray(\n this.rowHighlightedId,\n this.listState\n );\n }\n\n private stepToItemInArray(\n array: Array<any>,\n currentId: string,\n step: number\n ) {\n for (let i = 0; i < array.length; i++) {\n if (array[i].id === currentId) {\n return array[i + step];\n }\n }\n }\n\n private isFirstElementInArray(id: any, array: any[]) {\n const element = array.find((x) => x.id === id);\n if (array[0] === element) {\n return true;\n }\n return false;\n }\n\n private isLastElementInArray(id: any, array: any[]) {\n const element = array.find((x) => x.id === id);\n if (array[array.length - 1] === element) {\n return true;\n }\n return false;\n }\n}\n"
|
|
1859
1837
|
},
|
|
1860
1838
|
{
|
|
1861
1839
|
"fileName": "flyout-demo.module.ts",
|
|
1862
1840
|
"filePath": "/projects/flyout/documentation/code-examples/flyout/grid/flyout-demo.module.ts",
|
|
1863
|
-
"rawContents": "import {
|
|
1841
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyAvatarModule } from '@skyux/avatar';\nimport { SkyFlyoutModule } from '@skyux/flyout';\nimport { SkyKeyInfoModule, SkyLabelModule } from '@skyux/indicators';\nimport { SkyPageSummaryModule } from '@skyux/layout';\nimport { SkyListModule } from '@skyux/list-builder';\nimport { SkyListViewGridModule } from '@skyux/list-builder-view-grids';\n\nimport { FlyoutDemoFlyoutComponent } from './flyout-demo-flyout.component';\nimport { FlyoutDemoComponent } from './flyout-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n SkyAvatarModule,\n SkyFlyoutModule,\n SkyListModule,\n SkyKeyInfoModule,\n SkyLabelModule,\n SkyListViewGridModule,\n SkyPageSummaryModule,\n ],\n declarations: [FlyoutDemoComponent, FlyoutDemoFlyoutComponent],\n entryComponents: [FlyoutDemoFlyoutComponent],\n exports: [FlyoutDemoComponent],\n})\nexport class AutocompleteDemoModule {}\n"
|
|
1864
1842
|
}
|
|
1865
1843
|
]
|
|
1866
1844
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flyout-adapter.service.js","sourceRoot":"","sources":["../../../../../../../../libs/components/flyout/src/lib/modules/flyout/flyout-adapter.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EAEV,gBAAgB,GACjB,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"flyout-adapter.service.js","sourceRoot":"","sources":["../../../../../../../../libs/components/flyout/src/lib/modules/flyout/flyout-adapter.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EAEV,gBAAgB,GACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;;;AAEnE;;GAEG;AAEH,MAAM,OAAO,uBAAuB;IAGlC,YACU,eAAiC,EACjC,SAA0B;QAD1B,oBAAe,GAAf,eAAe,CAAkB;QACjC,cAAS,GAAT,SAAS,CAAiB;QAElC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAC5E,CAAC;IAEM,mBAAmB,CAAC,MAAkB;QAC3C,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC;QAC9C,MAAM,UAAU,GAAG,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC;QAExE,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,aAAa,EAAE,sBAAsB,CAAC,CAAC;SACtE;IACH,CAAC;IAEM,kBAAkB,CACvB,OAAmB,EACnB,UAA+B;QAE/B,MAAM,QAAQ,GAAgB,OAAO,CAAC,aAAa,CAAC;QAEpD,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,EAAE,6BAA6B,CAAC,CAAC;QACnE,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,EAAE,6BAA6B,CAAC,CAAC;QACnE,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,EAAE,6BAA6B,CAAC,CAAC;QACnE,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,EAAE,6BAA6B,CAAC,CAAC;QAEnE,IAAI,QAAgB,CAAC;QAErB,QAAQ,UAAU,EAAE;YAClB,KAAK,mBAAmB,CAAC,EAAE,CAAC,CAAC;gBAC3B,QAAQ,GAAG,6BAA6B,CAAC;gBACzC,MAAM;aACP;YACD,KAAK,mBAAmB,CAAC,EAAE,CAAC,CAAC;gBAC3B,QAAQ,GAAG,6BAA6B,CAAC;gBACzC,MAAM;aACP;YACD,KAAK,mBAAmB,CAAC,EAAE,CAAC,CAAC;gBAC3B,QAAQ,GAAG,6BAA6B,CAAC;gBACzC,MAAM;aACP;YACD,OAAO,CAAC,CAAC;gBACP,QAAQ,GAAG,6BAA6B,CAAC;gBACzC,MAAM;aACP;SACF;QAED,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC7C,CAAC;IAEM,yBAAyB,CAAC,MAAe;QAC9C,yEAAyE;QACzE,sEAAsE;QACtE,oFAAoF;QACpF,sDAAsD;QACtD,MAAM,OAAO,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QACpD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACvC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;SACvD;IACH,CAAC;;qHA/DU,uBAAuB;yHAAvB,uBAAuB;4FAAvB,uBAAuB;kBADnC,UAAU","sourcesContent":["import {\n ElementRef,\n Injectable,\n Renderer2,\n RendererFactory2,\n} from '@angular/core';\nimport { SkyAppWindowRef, SkyMediaBreakpoints } from '@skyux/core';\n\n/**\n * @internal\n */\n@Injectable()\nexport class SkyFlyoutAdapterService {\n private renderer: Renderer2;\n\n constructor(\n private rendererFactory: RendererFactory2,\n private windowRef: SkyAppWindowRef\n ) {\n this.renderer = this.rendererFactory.createRenderer(undefined, undefined);\n }\n\n public adjustHeaderForHelp(header: ElementRef): void {\n const windowObj = this.windowRef.nativeWindow;\n const helpWidget = windowObj.document.getElementById('bb-help-invoker');\n\n if (helpWidget) {\n this.renderer.addClass(header.nativeElement, 'sky-flyout-help-shim');\n }\n }\n\n public setResponsiveClass(\n element: ElementRef,\n breakpoint: SkyMediaBreakpoints\n ): void {\n const nativeEl: HTMLElement = element.nativeElement;\n\n this.renderer.removeClass(nativeEl, 'sky-responsive-container-xs');\n this.renderer.removeClass(nativeEl, 'sky-responsive-container-sm');\n this.renderer.removeClass(nativeEl, 'sky-responsive-container-md');\n this.renderer.removeClass(nativeEl, 'sky-responsive-container-lg');\n\n let newClass: string;\n\n switch (breakpoint) {\n case SkyMediaBreakpoints.xs: {\n newClass = 'sky-responsive-container-xs';\n break;\n }\n case SkyMediaBreakpoints.sm: {\n newClass = 'sky-responsive-container-sm';\n break;\n }\n case SkyMediaBreakpoints.md: {\n newClass = 'sky-responsive-container-md';\n break;\n }\n default: {\n newClass = 'sky-responsive-container-lg';\n break;\n }\n }\n\n this.renderer.addClass(nativeEl, newClass);\n }\n\n public toggleIframePointerEvents(enable: boolean): void {\n // When iframes are present on the page, they may interfere with dragging\n // temporarily disable pointer events in iframes when dragging starts.\n // When re-enabling we set to the empty string as it will remove the element styling\n // and fall back to any css originally given to iframe\n const iframes = document.querySelectorAll('iframe');\n for (let i = 0; i < iframes.length; i++) {\n iframes[i].style.pointerEvents = enable ? '' : 'none';\n }\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flyout-instance.js","sourceRoot":"","sources":["../../../../../../../../libs/components/flyout/src/lib/modules/flyout/flyout-instance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,OAAO,EAAc,OAAO,EAAE,MAAM,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"flyout-instance.js","sourceRoot":"","sources":["../../../../../../../../libs/components/flyout/src/lib/modules/flyout/flyout-instance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,OAAO,EAAc,OAAO,EAAE,MAAM,MAAM,CAAC;AAK3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE;;GAEG;AACH,MAAM,OAAO,iBAAiB;IAsG5B;QA5FA;;WAEG;QACI,WAAM,GAAG,IAAI,YAAY,EAAQ,CAAC;QAezC;;;WAGG;QACI,WAAM,GAAG,IAAI,CAAC;QA0Db,iBAAY,GAAG,IAAI,OAAO,EAA+B,CAAC;QAE1D,6BAAwB,GAAG,IAAI,YAAY,EAAQ,CAAC;QAEpD,iCAA4B,GAAG,IAAI,YAAY,EAAQ,CAAC;QAExD,gCAA2B,GAAG,KAAK,CAAC;QAEpC,oCAA+B,GAAG,KAAK,CAAC;QAExC,oBAAe,GAAG,IAAI,OAAO,EAAoB,CAAC;QAGxD,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC,CAAC,CAAC;IACL,CAAC;IAzGD;;;;OAIG;IACH,IAAW,WAAW;QACpB,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAYD;;;OAGG;IACH,IAAW,cAAc;QACvB,OAAO,IAAI,CAAC,eAAe,CAAC;IAC9B,CAAC;IAQD;;OAEG;IACH,IAAW,uBAAuB;QAChC,OAAO,IAAI,CAAC,wBAAwB,CAAC;IACvC,CAAC;IAED;;OAEG;IACH,IAAW,2BAA2B;QACpC,OAAO,IAAI,CAAC,4BAA4B,CAAC;IAC3C,CAAC;IAED;;;OAGG;IACH,IAAW,0BAA0B,CAAC,QAAiB;QACrD,IAAI,CAAC,2BAA2B,GAAG,QAAQ,CAAC;QAC5C,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;gBACvB,IAAI,EAAE,oBAAoB,CAAC,yBAAyB;aACrD,CAAC,CAAC;SACJ;aAAM;YACL,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;gBACvB,IAAI,EAAE,oBAAoB,CAAC,wBAAwB;aACpD,CAAC,CAAC;SACJ;IACH,CAAC;IAED,IAAW,0BAA0B;QACnC,OAAO,IAAI,CAAC,2BAA2B,CAAC;IAC1C,CAAC;IAED;;;OAGG;IACH,IAAW,8BAA8B,CAAC,QAAiB;QACzD,IAAI,CAAC,+BAA+B,GAAG,QAAQ,CAAC;QAChD,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;gBACvB,IAAI,EAAE,oBAAoB,CAAC,6BAA6B;aACzD,CAAC,CAAC;SACJ;aAAM;YACL,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;gBACvB,IAAI,EAAE,oBAAoB,CAAC,4BAA4B;aACxD,CAAC,CAAC;SACJ;IACH,CAAC;IAED,IAAW,8BAA8B;QACvC,OAAO,IAAI,CAAC,+BAA+B,CAAC;IAC9C,CAAC;IAoBD;;;OAGG;IACI,KAAK,CAAC,IAAyB;QACpC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;YACvB,IAAI,EAAE,oBAAoB,CAAC,KAAK;YAChC,IAAI,EAAE,EAAE,iBAAiB,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,EAAE;SACnE,CAAC,CAAC;QAEH,IAAI,CAAC,4BAA4B,CAAC,QAAQ,EAAE,CAAC;QAC7C,IAAI,CAAC,wBAAwB,CAAC,QAAQ,EAAE,CAAC;QAEzC,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC;CACF","sourcesContent":["import { EventEmitter } from '@angular/core';\n\nimport { Observable, Subject } from 'rxjs';\n\nimport { SkyFlyoutBeforeCloseHandler } from './types/flyout-before-close-handler';\nimport { SkyFlyoutCloseArgs } from './types/flyout-close-args';\nimport { SkyFlyoutMessage } from './types/flyout-message';\nimport { SkyFlyoutMessageType } from './types/flyout-message-type';\n\n/**\n * Represents a single displayed flyout.\n */\nexport class SkyFlyoutInstance<T> {\n /**\n * An event that the modal instance emits when it is about to close.\n * If a subscription exists for this event,\n * the modal does not close until the subscriber calls the handler's `closeModal` method.\n */\n public get beforeClose(): Observable<SkyFlyoutBeforeCloseHandler> {\n return this._beforeClose;\n }\n\n /**\n * An event that the flyout instance emits when it closes.\n */\n public closed = new EventEmitter<void>();\n\n /**\n * Specifies the instance of the component to display in the flyout.\n */\n public componentInstance: T;\n\n /**\n * Used to communicate with the host component.\n * @internal\n */\n public get hostController(): Subject<SkyFlyoutMessage> {\n return this._hostController;\n }\n\n /**\n * A `boolean` value that returns `true` if the flyout is open.\n * @default true\n */\n public isOpen = true;\n\n /**\n * An event that the flyout instance emits when users click the next iterator button.\n */\n public get iteratorNextButtonClick(): EventEmitter<void> {\n return this._iteratorNextButtonClick;\n }\n\n /**\n * An event that the flyout instance emits when users click the previous iterator button.\n */\n public get iteratorPreviousButtonClick(): EventEmitter<void> {\n return this._iteratorPreviousButtonClick;\n }\n\n /**\n * Disables the next iterator button.\n * @default false\n */\n public set iteratorNextButtonDisabled(newValue: boolean) {\n this._iteratorNextButtonDisabled = newValue;\n if (newValue) {\n this.hostController.next({\n type: SkyFlyoutMessageType.DisableIteratorNextButton,\n });\n } else {\n this.hostController.next({\n type: SkyFlyoutMessageType.EnableIteratorNextButton,\n });\n }\n }\n\n public get iteratorNextButtonDisabled(): boolean {\n return this._iteratorNextButtonDisabled;\n }\n\n /**\n * Disables the previous iterator button.\n * @default false\n */\n public set iteratorPreviousButtonDisabled(newValue: boolean) {\n this._iteratorPreviousButtonDisabled = newValue;\n if (newValue) {\n this.hostController.next({\n type: SkyFlyoutMessageType.DisableIteratorPreviousButton,\n });\n } else {\n this.hostController.next({\n type: SkyFlyoutMessageType.EnableIteratorPreviousButton,\n });\n }\n }\n\n public get iteratorPreviousButtonDisabled(): boolean {\n return this._iteratorPreviousButtonDisabled;\n }\n\n private _beforeClose = new Subject<SkyFlyoutBeforeCloseHandler>();\n\n private _iteratorNextButtonClick = new EventEmitter<void>();\n\n private _iteratorPreviousButtonClick = new EventEmitter<void>();\n\n private _iteratorNextButtonDisabled = false;\n\n private _iteratorPreviousButtonDisabled = false;\n\n private _hostController = new Subject<SkyFlyoutMessage>();\n\n constructor() {\n this.closed.subscribe(() => {\n this.isOpen = false;\n });\n }\n\n /**\n * Closes the flyout instance and emits its `closed` event.\n * @param args Arguments used when closing the flyout.\n */\n public close(args?: SkyFlyoutCloseArgs): void {\n this.hostController.next({\n type: SkyFlyoutMessageType.Close,\n data: { ignoreBeforeClose: args ? args.ignoreBeforeClose : false },\n });\n\n this._iteratorPreviousButtonClick.complete();\n this._iteratorNextButtonClick.complete();\n\n this.hostController.complete();\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flyout-iterator.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/flyout/src/lib/modules/flyout/flyout-iterator.component.ts","../../../../../../../../libs/components/flyout/src/lib/modules/flyout/flyout-iterator.component.html"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,
|
|
1
|
+
{"version":3,"file":"flyout-iterator.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/flyout/src/lib/modules/flyout/flyout-iterator.component.ts","../../../../../../../../libs/components/flyout/src/lib/modules/flyout/flyout-iterator.component.html"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,YAAY,EACZ,KAAK,EAEL,MAAM,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;;;;;AAE/B;;GAEG;AAMH,MAAM,OAAO,0BAA0B;IALvC;QAsBU,kBAAa,GAAG,IAAI,OAAO,EAAE,CAAC;QAE9B,qBAAgB,GAAG,IAAI,YAAY,EAAQ,CAAC;QAE5C,yBAAoB,GAAG,IAAI,YAAY,EAAQ,CAAC;KAsBzD;IApCC,IACW,mBAAmB;QAC5B,OAAO,IAAI,CAAC,oBAAoB,CAAC;IACnC,CAAC;IAED,IACW,eAAe;QACxB,OAAO,IAAI,CAAC,gBAAgB,CAAC;IAC/B,CAAC;IAQM,WAAW;QAChB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;QAC1B,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC9B,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE,CAAC;QACrC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC;IACnC,CAAC;IAEM,uBAAuB;QAC5B,0BAA0B;QAC1B,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE;YAChC,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,CAAC;SAClC;IACH,CAAC;IAEM,mBAAmB;QACxB,0BAA0B;QAC1B,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;YAC5B,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;SAC9B;IACH,CAAC;;wHA1CU,0BAA0B;4GAA1B,0BAA0B,gQClBvC,yvCA0CA;4FDxBa,0BAA0B;kBALtC,SAAS;mBAAC;oBACT,QAAQ,EAAE,qBAAqB;oBAC/B,WAAW,EAAE,kCAAkC;oBAC/C,SAAS,EAAE,CAAC,kCAAkC,CAAC;iBAChD;8BAGQ,kBAAkB;sBADxB,KAAK;gBAIC,sBAAsB;sBAD5B,KAAK;gBAIK,mBAAmB;sBAD7B,MAAM;gBAMI,eAAe;sBADzB,MAAM","sourcesContent":["import {\n Component,\n EventEmitter,\n Input,\n OnDestroy,\n Output,\n} from '@angular/core';\n\nimport { Subject } from 'rxjs';\n\n/**\n * @internal\n */\n@Component({\n selector: 'sky-flyout-iterator',\n templateUrl: './flyout-iterator.component.html',\n styleUrls: ['./flyout-iterator.component.scss'],\n})\nexport class SkyFlyoutIteratorComponent implements OnDestroy {\n @Input()\n public nextButtonDisabled: boolean;\n\n @Input()\n public previousButtonDisabled: boolean;\n\n @Output()\n public get previousButtonClick(): EventEmitter<void> {\n return this._previousButtonClick;\n }\n\n @Output()\n public get nextButtonClick(): EventEmitter<void> {\n return this._nextButtonClick;\n }\n\n private ngUnsubscribe = new Subject();\n\n private _nextButtonClick = new EventEmitter<void>();\n\n private _previousButtonClick = new EventEmitter<void>();\n\n public ngOnDestroy(): void {\n this.ngUnsubscribe.next();\n this.ngUnsubscribe.complete();\n this._previousButtonClick.complete();\n this._nextButtonClick.complete();\n }\n\n public onIteratorPreviousClick(): void {\n /* istanbul ignore else */\n if (!this.previousButtonDisabled) {\n this._previousButtonClick.emit();\n }\n }\n\n public onIteratorNextClick(): void {\n /* istanbul ignore else */\n if (!this.nextButtonDisabled) {\n this._nextButtonClick.emit();\n }\n }\n}\n","<div id=\"iterators\" class=\"sky-flyout-iterators\">\n <button\n class=\"sky-btn\"\n [attr.aria-label]=\"\n 'skyux_flyout_iterator_previous_button' | skyLibResources\n \"\n [disabled]=\"previousButtonDisabled\"\n [skyThemeClass]=\"{\n 'sky-btn-default sky-margin-inline-compact': 'default',\n 'sky-btn-icon-borderless sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onIteratorPreviousClick()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-up\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"chevron-up\"\n iconType=\"skyux\"\n size=\"lg\"\n >\n </sky-icon>\n </button>\n <button\n class=\"sky-btn\"\n [attr.aria-label]=\"'skyux_flyout_iterator_next_button' | skyLibResources\"\n [disabled]=\"nextButtonDisabled\"\n [skyThemeClass]=\"{\n 'sky-btn-default sky-margin-inline-compact': 'default',\n 'sky-btn-icon-borderless sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onIteratorNextClick()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-down\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"chevron-down\"\n iconType=\"skyux\"\n size=\"lg\"\n >\n </sky-icon>\n </button>\n</div>\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flyout-media-query.service.js","sourceRoot":"","sources":["../../../../../../../../libs/components/flyout/src/lib/modules/flyout/flyout-media-query.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"flyout-media-query.service.js","sourceRoot":"","sources":["../../../../../../../../libs/components/flyout/src/lib/modules/flyout/flyout-media-query.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAyB,MAAM,aAAa,CAAC;AAEzE,OAAO,EAAE,eAAe,EAAgB,MAAM,MAAM,CAAC;;AAErD;;GAEG;AAEH,MAAM,OAAO,0BAA0B;IAWrC;QANQ,mBAAc,GAAG,IAAI,eAAe,CAC1C,IAAI,CAAC,OAAO,CACb,CAAC;QAEM,aAAQ,GAAG,mBAAmB,CAAC,EAAE,CAAC;QAGxC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC1C,CAAC;IAZD,IAAW,OAAO;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAYM,SAAS,CAAC,QAA+B;QAC9C,OAAO,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC;YACnC,IAAI,EAAE,CAAC,WAAgC,EAAE,EAAE;gBACzC,QAAQ,CAAC,WAAW,CAAC,CAAC;YACxB,CAAC;SACF,CAAC,CAAC;IACL,CAAC;IAEM,qBAAqB,CAAC,KAAa;QACxC,IAAI,UAA+B,CAAC;QAEpC,IAAI,IAAI,CAAC,uBAAuB,CAAC,KAAK,EAAE,mBAAmB,CAAC,EAAE,CAAC,EAAE;YAC/D,UAAU,GAAG,mBAAmB,CAAC,EAAE,CAAC;SACrC;aAAM,IAAI,IAAI,CAAC,uBAAuB,CAAC,KAAK,EAAE,mBAAmB,CAAC,EAAE,CAAC,EAAE;YACtE,UAAU,GAAG,mBAAmB,CAAC,EAAE,CAAC;SACrC;aAAM,IAAI,IAAI,CAAC,uBAAuB,CAAC,KAAK,EAAE,mBAAmB,CAAC,EAAE,CAAC,EAAE;YACtE,UAAU,GAAG,mBAAmB,CAAC,EAAE,CAAC;SACrC;aAAM;YACL,UAAU,GAAG,mBAAmB,CAAC,EAAE,CAAC;SACrC;QAED,IAAI,CAAC,QAAQ,GAAG,UAAU,CAAC;QAC3B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC1C,CAAC;IAEM,uBAAuB,CAC5B,KAAa,EACb,UAA+B;QAE/B,MAAM,qBAAqB,GAAG,GAAG,CAAC;QAClC,MAAM,qBAAqB,GAAG,GAAG,CAAC;QAClC,MAAM,qBAAqB,GAAG,GAAG,CAAC;QAClC,MAAM,qBAAqB,GAAG,GAAG,CAAC;QAClC,MAAM,qBAAqB,GAAG,IAAI,CAAC;QACnC,MAAM,qBAAqB,GAAG,IAAI,CAAC;QAEnC,QAAQ,UAAU,EAAE;YAClB,KAAK,mBAAmB,CAAC,EAAE,CAAC,CAAC;gBAC3B,OAAO,KAAK,IAAI,qBAAqB,CAAC;aACvC;YACD,KAAK,mBAAmB,CAAC,EAAE,CAAC,CAAC;gBAC3B,OAAO,KAAK,IAAI,qBAAqB,IAAI,KAAK,IAAI,qBAAqB,CAAC;aACzE;YACD,KAAK,mBAAmB,CAAC,EAAE,CAAC,CAAC;gBAC3B,OAAO,KAAK,IAAI,qBAAqB,IAAI,KAAK,IAAI,qBAAqB,CAAC;aACzE;YACD,OAAO,CAAC,CAAC;gBACP,OAAO,KAAK,IAAI,qBAAqB,CAAC;aACvC;SACF;IACH,CAAC;IAEM,OAAO;QACZ,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC;;wHArEU,0BAA0B;4HAA1B,0BAA0B;4FAA1B,0BAA0B;kBADtC,UAAU","sourcesContent":["import { Injectable } from '@angular/core';\nimport { SkyMediaBreakpoints, SkyMediaQueryListener } from '@skyux/core';\n\nimport { BehaviorSubject, Subscription } from 'rxjs';\n\n/**\n * @internal\n */\n@Injectable()\nexport class SkyFlyoutMediaQueryService {\n public get current(): SkyMediaBreakpoints {\n return this._current;\n }\n\n private currentSubject = new BehaviorSubject<SkyMediaBreakpoints>(\n this.current\n );\n\n private _current = SkyMediaBreakpoints.xs;\n\n constructor() {\n this.currentSubject.next(this._current);\n }\n\n public subscribe(listener: SkyMediaQueryListener): Subscription {\n return this.currentSubject.subscribe({\n next: (breakpoints: SkyMediaBreakpoints) => {\n listener(breakpoints);\n },\n });\n }\n\n public setBreakpointForWidth(width: number): void {\n let breakpoint: SkyMediaBreakpoints;\n\n if (this.isWidthWithinBreakpiont(width, SkyMediaBreakpoints.xs)) {\n breakpoint = SkyMediaBreakpoints.xs;\n } else if (this.isWidthWithinBreakpiont(width, SkyMediaBreakpoints.sm)) {\n breakpoint = SkyMediaBreakpoints.sm;\n } else if (this.isWidthWithinBreakpiont(width, SkyMediaBreakpoints.md)) {\n breakpoint = SkyMediaBreakpoints.md;\n } else {\n breakpoint = SkyMediaBreakpoints.lg;\n }\n\n this._current = breakpoint;\n this.currentSubject.next(this._current);\n }\n\n public isWidthWithinBreakpiont(\n width: number,\n breakpoint: SkyMediaBreakpoints\n ): boolean {\n const xsBreakpointMaxPixels = 767;\n const smBreakpointMinPixels = 768;\n const smBreakpointMaxPixels = 991;\n const mdBreakpointMinPixels = 992;\n const mdBreakpointMaxPixels = 1199;\n const lgBreakpointMinPixels = 1200;\n\n switch (breakpoint) {\n case SkyMediaBreakpoints.xs: {\n return width <= xsBreakpointMaxPixels;\n }\n case SkyMediaBreakpoints.sm: {\n return width >= smBreakpointMinPixels && width <= smBreakpointMaxPixels;\n }\n case SkyMediaBreakpoints.md: {\n return width >= mdBreakpointMinPixels && width <= mdBreakpointMaxPixels;\n }\n default: {\n return width >= lgBreakpointMinPixels;\n }\n }\n }\n\n public destroy(): void {\n this.currentSubject.complete();\n }\n}\n"]}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { Component, ChangeDetectionStrategy, ChangeDetectorRef, ComponentFactoryResolver, ElementRef, HostListener, Injector, ViewChild, ViewContainerRef, NgZone, } from '@angular/core';
|
|
2
1
|
import { animate, state, style, transition, trigger, } from '@angular/animations';
|
|
3
|
-
import {
|
|
4
|
-
import { take, takeUntil, takeWhile } from 'rxjs/operators';
|
|
2
|
+
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ComponentFactoryResolver, ElementRef, HostListener, Injector, NgZone, ViewChild, ViewContainerRef, } from '@angular/core';
|
|
5
3
|
import { SkyMediaBreakpoints, SkyMediaQueryService, SkyUIConfigService, } from '@skyux/core';
|
|
6
4
|
import { SkyLibResourcesService } from '@skyux/i18n';
|
|
5
|
+
import { Subject, fromEvent } from 'rxjs';
|
|
6
|
+
import { take, takeUntil, takeWhile } from 'rxjs/operators';
|
|
7
7
|
import { SkyFlyoutAdapterService } from './flyout-adapter.service';
|
|
8
8
|
import { SkyFlyoutInstance } from './flyout-instance';
|
|
9
9
|
import { SkyFlyoutMediaQueryService } from './flyout-media-query.service';
|
|
10
|
-
import { SkyFlyoutMessageType } from './types/flyout-message-type';
|
|
11
10
|
import { SkyFlyoutBeforeCloseHandler } from './types/flyout-before-close-handler';
|
|
11
|
+
import { SkyFlyoutMessageType } from './types/flyout-message-type';
|
|
12
12
|
import * as i0 from "@angular/core";
|
|
13
13
|
import * as i1 from "./flyout-adapter.service";
|
|
14
14
|
import * as i2 from "@skyux/i18n";
|
|
@@ -79,7 +79,7 @@ export class SkyFlyoutComponent {
|
|
|
79
79
|
return this.getString('skyux_flyout_permalink_button');
|
|
80
80
|
}
|
|
81
81
|
get primaryAction() {
|
|
82
|
-
|
|
82
|
+
const primaryAction = this.config.primaryAction;
|
|
83
83
|
if (primaryAction) {
|
|
84
84
|
return primaryAction;
|
|
85
85
|
}
|
|
@@ -339,7 +339,9 @@ export class SkyFlyoutComponent {
|
|
|
339
339
|
flyoutWidth: this.flyoutWidth,
|
|
340
340
|
})
|
|
341
341
|
.pipe(take(1))
|
|
342
|
-
.subscribe(
|
|
342
|
+
.subscribe(
|
|
343
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
344
|
+
() => { }, (err) => {
|
|
343
345
|
console.warn('Could not save flyout data.');
|
|
344
346
|
console.warn(err);
|
|
345
347
|
});
|
|
@@ -386,6 +388,7 @@ export class SkyFlyoutComponent {
|
|
|
386
388
|
if (this.resizeKeyControlActive) {
|
|
387
389
|
this.resizeKeyControlActive = false;
|
|
388
390
|
}
|
|
391
|
+
break;
|
|
389
392
|
case 'left':
|
|
390
393
|
if (this.resizeKeyControlActive) {
|
|
391
394
|
/* istanbul ignore else */
|