@skyux/pages 5.0.0 → 5.5.0-beta.0

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 (64) hide show
  1. package/README.md +6 -4
  2. package/bundles/skyux-pages.umd.js +77 -67
  3. package/documentation.json +69 -29
  4. package/esm2015/index.js +12 -0
  5. package/esm2015/index.js.map +1 -0
  6. package/esm2015/lib/modules/action-hub/action-hub-buttons.component.js +23 -0
  7. package/esm2015/lib/modules/action-hub/action-hub-buttons.component.js.map +1 -0
  8. package/esm2015/lib/modules/action-hub/action-hub-content.component.js +17 -0
  9. package/esm2015/lib/modules/action-hub/action-hub-content.component.js.map +1 -0
  10. package/esm2015/lib/modules/action-hub/action-hub.component.js +95 -0
  11. package/esm2015/lib/modules/action-hub/action-hub.component.js.map +1 -0
  12. package/esm2015/lib/modules/action-hub/action-hub.module.js +86 -0
  13. package/esm2015/lib/modules/action-hub/action-hub.module.js.map +1 -0
  14. package/esm2015/lib/modules/action-hub/types/action-hub-needs-attention.js +2 -0
  15. package/esm2015/lib/modules/action-hub/types/action-hub-needs-attention.js.map +1 -0
  16. package/esm2015/lib/modules/action-hub/types/page-link.js +2 -0
  17. package/esm2015/lib/modules/action-hub/types/page-link.js.map +1 -0
  18. package/esm2015/lib/modules/action-hub/types/recent-link.js +2 -0
  19. package/esm2015/lib/modules/action-hub/types/recent-link.js.map +1 -0
  20. package/esm2015/lib/modules/link-list/link-list.component.js +23 -0
  21. package/esm2015/lib/modules/link-list/link-list.component.js.map +1 -0
  22. package/esm2015/lib/modules/needs-attention/needs-attention.component.js +26 -0
  23. package/esm2015/lib/modules/needs-attention/needs-attention.component.js.map +1 -0
  24. package/esm2015/lib/modules/page-header/page-header.component.js +24 -0
  25. package/esm2015/lib/modules/page-header/page-header.component.js.map +1 -0
  26. package/esm2015/lib/modules/page-header/page-header.module.js +41 -0
  27. package/esm2015/lib/modules/page-header/page-header.module.js.map +1 -0
  28. package/esm2015/lib/modules/shared/pages-resources.module.js +52 -0
  29. package/esm2015/lib/modules/shared/pages-resources.module.js.map +1 -0
  30. package/esm2015/skyux-pages.js +2 -2
  31. package/esm2015/skyux-pages.js.map +1 -0
  32. package/fesm2015/skyux-pages.js +65 -53
  33. package/fesm2015/skyux-pages.js.map +1 -1
  34. package/index.d.ts +9 -0
  35. package/{modules → lib/modules}/action-hub/action-hub-buttons.component.d.ts +0 -0
  36. package/{modules → lib/modules}/action-hub/action-hub-content.component.d.ts +0 -0
  37. package/{modules → lib/modules}/action-hub/action-hub.component.d.ts +4 -3
  38. package/{modules → lib/modules}/action-hub/action-hub.module.d.ts +0 -0
  39. package/{modules → lib/modules}/action-hub/types/action-hub-needs-attention.d.ts +0 -0
  40. package/{modules → lib/modules}/action-hub/types/page-link.d.ts +0 -0
  41. package/{modules → lib/modules}/action-hub/types/recent-link.d.ts +0 -0
  42. package/{modules → lib/modules}/link-list/link-list.component.d.ts +0 -0
  43. package/{modules → lib/modules}/needs-attention/needs-attention.component.d.ts +0 -0
  44. package/{modules → lib/modules}/page-header/page-header.component.d.ts +0 -0
  45. package/{modules → lib/modules}/page-header/page-header.module.d.ts +0 -0
  46. package/{modules → lib/modules}/shared/pages-resources.module.d.ts +0 -0
  47. package/package.json +22 -8
  48. package/skyux-pages.d.ts +1 -1
  49. package/LICENSE +0 -21
  50. package/bundles/skyux-pages.umd.js.map +0 -1
  51. package/esm2015/modules/action-hub/action-hub-buttons.component.js +0 -23
  52. package/esm2015/modules/action-hub/action-hub-content.component.js +0 -17
  53. package/esm2015/modules/action-hub/action-hub.component.js +0 -94
  54. package/esm2015/modules/action-hub/action-hub.module.js +0 -86
  55. package/esm2015/modules/action-hub/types/action-hub-needs-attention.js +0 -2
  56. package/esm2015/modules/action-hub/types/page-link.js +0 -2
  57. package/esm2015/modules/action-hub/types/recent-link.js +0 -2
  58. package/esm2015/modules/link-list/link-list.component.js +0 -23
  59. package/esm2015/modules/needs-attention/needs-attention.component.js +0 -26
  60. package/esm2015/modules/page-header/page-header.component.js +0 -24
  61. package/esm2015/modules/page-header/page-header.module.js +0 -41
  62. package/esm2015/modules/shared/pages-resources.module.js +0 -41
  63. package/esm2015/public-api.js +0 -12
  64. package/public-api.d.ts +0 -9
@@ -29,10 +29,12 @@
29
29
  "name": "NgModule",
30
30
  "type": {
31
31
  "type": "reference",
32
+ "qualifiedName": "NgModuleDecorator",
33
+ "package": "@angular/core",
32
34
  "name": "NgModule"
33
35
  },
34
36
  "arguments": {
35
- "obj": "{\n imports: [\n CommonModule,\n PagesResourcesModule,\n RouterModule,\n SkyActionButtonModule,\n SkyAppLinkModule,\n SkyFluidGridModule,\n SkyI18nModule,\n SkyIconModule,\n SkyKeyInfoModule,\n SkyPageHeaderModule,\n SkyThemeModule,\n SkyWaitModule,\n SkyHrefModule\n ],\n declarations: [\n SkyActionHubButtonsComponent,\n SkyActionHubComponent,\n SkyActionHubContentComponent,\n SkyNeedsAttentionComponent,\n SkyLinkListComponent\n ],\n exports: [\n SkyActionHubButtonsComponent,\n SkyActionHubComponent,\n SkyActionHubContentComponent\n ]\n}"
37
+ "obj": "{\n imports: [\n CommonModule,\n PagesResourcesModule,\n RouterModule,\n SkyActionButtonModule,\n SkyAppLinkModule,\n SkyFluidGridModule,\n SkyI18nModule,\n SkyIconModule,\n SkyKeyInfoModule,\n SkyPageHeaderModule,\n SkyThemeModule,\n SkyWaitModule,\n SkyHrefModule,\n ],\n declarations: [\n SkyActionHubButtonsComponent,\n SkyActionHubComponent,\n SkyActionHubContentComponent,\n SkyNeedsAttentionComponent,\n SkyLinkListComponent,\n ],\n exports: [\n SkyActionHubButtonsComponent,\n SkyActionHubComponent,\n SkyActionHubContentComponent,\n ],\n}"
36
38
  }
37
39
  }
38
40
  ],
@@ -87,10 +89,12 @@
87
89
  "name": "NgModule",
88
90
  "type": {
89
91
  "type": "reference",
92
+ "qualifiedName": "NgModuleDecorator",
93
+ "package": "@angular/core",
90
94
  "name": "NgModule"
91
95
  },
92
96
  "arguments": {
93
- "obj": "{\n imports: [\n CommonModule,\n RouterModule,\n SkyAppLinkModule,\n SkyIconModule,\n SkyThemeModule,\n SkyHrefModule\n ],\n declarations: [SkyPageHeaderComponent],\n exports: [SkyPageHeaderComponent]\n}"
97
+ "obj": "{\n imports: [\n CommonModule,\n RouterModule,\n SkyAppLinkModule,\n SkyIconModule,\n SkyThemeModule,\n SkyHrefModule,\n ],\n declarations: [SkyPageHeaderComponent],\n exports: [SkyPageHeaderComponent],\n}"
94
98
  }
95
99
  }
96
100
  ],
@@ -148,10 +152,12 @@
148
152
  "name": "Component",
149
153
  "type": {
150
154
  "type": "reference",
155
+ "qualifiedName": "ComponentDecorator",
156
+ "package": "@angular/core",
151
157
  "name": "Component"
152
158
  },
153
159
  "arguments": {
154
- "obj": "{\n selector: 'sky-action-hub',\n templateUrl: './action-hub.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush\n}"
160
+ "obj": "{\n selector: 'sky-action-hub',\n templateUrl: './action-hub.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n}"
155
161
  }
156
162
  }
157
163
  ],
@@ -186,13 +192,15 @@
186
192
  "isPublic": true
187
193
  },
188
194
  "comment": {
189
- "shortText": "Provides a list of actions that users must perform based on business requirements or best practices, or `'loading'` to display a wait indicator."
195
+ "shortText": "Provides a list of actions that users must perform based on business requirements or best practices, or `\"loading\"` to display a wait indicator."
190
196
  },
191
197
  "decorators": [
192
198
  {
193
199
  "name": "Input",
194
200
  "type": {
195
201
  "type": "reference",
202
+ "qualifiedName": "InputDecorator",
203
+ "package": "@angular/core",
196
204
  "name": "Input"
197
205
  },
198
206
  "arguments": {}
@@ -240,6 +248,8 @@
240
248
  "name": "Input",
241
249
  "type": {
242
250
  "type": "reference",
251
+ "qualifiedName": "InputDecorator",
252
+ "package": "@angular/core",
243
253
  "name": "Input"
244
254
  },
245
255
  "arguments": {}
@@ -267,13 +277,15 @@
267
277
  "isPublic": true
268
278
  },
269
279
  "comment": {
270
- "shortText": "Provides a list of recently accessed links, or `'loading'` to display a wait indicator."
280
+ "shortText": "Provides a list of recently accessed links, or `\"loading\"` to display a wait indicator."
271
281
  },
272
282
  "decorators": [
273
283
  {
274
284
  "name": "Input",
275
285
  "type": {
276
286
  "type": "reference",
287
+ "qualifiedName": "InputDecorator",
288
+ "package": "@angular/core",
277
289
  "name": "Input"
278
290
  },
279
291
  "arguments": {}
@@ -314,13 +326,15 @@
314
326
  "isPublic": true
315
327
  },
316
328
  "comment": {
317
- "shortText": "Provides a list of related links, or `'loading'` to display a wait indicator."
329
+ "shortText": "Provides a list of related links, or `\"loading\"` to display a wait indicator."
318
330
  },
319
331
  "decorators": [
320
332
  {
321
333
  "name": "Input",
322
334
  "type": {
323
335
  "type": "reference",
336
+ "qualifiedName": "InputDecorator",
337
+ "package": "@angular/core",
324
338
  "name": "Input"
325
339
  },
326
340
  "arguments": {}
@@ -361,13 +375,21 @@
361
375
  "isPublic": true
362
376
  },
363
377
  "comment": {
364
- "shortText": "Specifies the page title."
378
+ "shortText": "Specifies the page title.",
379
+ "tags": [
380
+ {
381
+ "tag": "default",
382
+ "text": "\"\"\n"
383
+ }
384
+ ]
365
385
  },
366
386
  "decorators": [
367
387
  {
368
388
  "name": "Input",
369
389
  "type": {
370
390
  "type": "reference",
391
+ "qualifiedName": "InputDecorator",
392
+ "package": "@angular/core",
371
393
  "name": "Input"
372
394
  },
373
395
  "arguments": {}
@@ -376,7 +398,7 @@
376
398
  "sources": [
377
399
  {
378
400
  "fileName": "projects/pages/src/modules/action-hub/action-hub.component.ts",
379
- "line": 45,
401
+ "line": 46,
380
402
  "character": 9
381
403
  }
382
404
  ],
@@ -397,7 +419,7 @@
397
419
  "sources": [
398
420
  {
399
421
  "fileName": "projects/pages/src/modules/action-hub/action-hub.component.ts",
400
- "line": 47,
422
+ "line": 48,
401
423
  "character": 9
402
424
  }
403
425
  ],
@@ -476,7 +498,7 @@
476
498
  "sources": [
477
499
  {
478
500
  "fileName": "projects/pages/src/modules/action-hub/action-hub.component.ts",
479
- "line": 76,
501
+ "line": 77,
480
502
  "character": 9
481
503
  }
482
504
  ],
@@ -585,10 +607,12 @@
585
607
  "name": "Component",
586
608
  "type": {
587
609
  "type": "reference",
610
+ "qualifiedName": "ComponentDecorator",
611
+ "package": "@angular/core",
588
612
  "name": "Component"
589
613
  },
590
614
  "arguments": {
591
- "obj": "{\n selector: 'sky-action-hub-buttons',\n templateUrl: 'action-hub-buttons.component.html'\n}"
615
+ "obj": "{\n selector: 'sky-action-hub-buttons',\n templateUrl: 'action-hub-buttons.component.html',\n}"
592
616
  }
593
617
  }
594
618
  ],
@@ -646,10 +670,12 @@
646
670
  "name": "Component",
647
671
  "type": {
648
672
  "type": "reference",
673
+ "qualifiedName": "ComponentDecorator",
674
+ "package": "@angular/core",
649
675
  "name": "Component"
650
676
  },
651
677
  "arguments": {
652
- "obj": "{\n selector: 'sky-action-hub-content',\n templateUrl: 'action-hub-content.component.html'\n}"
678
+ "obj": "{\n selector: 'sky-action-hub-content',\n templateUrl: 'action-hub-content.component.html',\n}"
653
679
  }
654
680
  }
655
681
  ],
@@ -704,10 +730,12 @@
704
730
  "name": "Component",
705
731
  "type": {
706
732
  "type": "reference",
733
+ "qualifiedName": "ComponentDecorator",
734
+ "package": "@angular/core",
707
735
  "name": "Component"
708
736
  },
709
737
  "arguments": {
710
- "obj": "{\n selector: 'sky-page-header',\n templateUrl: './page-header.component.html',\n styleUrls: ['./page-header.component.scss']\n}"
738
+ "obj": "{\n selector: 'sky-page-header',\n templateUrl: './page-header.component.html',\n styleUrls: ['./page-header.component.scss'],\n}"
711
739
  }
712
740
  }
713
741
  ],
@@ -746,6 +774,8 @@
746
774
  "name": "Input",
747
775
  "type": {
748
776
  "type": "reference",
777
+ "qualifiedName": "InputDecorator",
778
+ "package": "@angular/core",
749
779
  "name": "Input"
750
780
  },
751
781
  "arguments": {}
@@ -777,6 +807,8 @@
777
807
  "name": "Input",
778
808
  "type": {
779
809
  "type": "reference",
810
+ "qualifiedName": "InputDecorator",
811
+ "package": "@angular/core",
780
812
  "name": "Input"
781
813
  },
782
814
  "arguments": {}
@@ -889,7 +921,7 @@
889
921
  },
890
922
  "sources": [
891
923
  {
892
- "fileName": "projects/pages/src/modules/action-hub/types/action-hub-needs-attention.ts",
924
+ "fileName": "lib/modules/action-hub/types/action-hub-needs-attention.ts",
893
925
  "line": 20,
894
926
  "character": 4
895
927
  }
@@ -911,7 +943,7 @@
911
943
  "flags": {},
912
944
  "sources": [
913
945
  {
914
- "fileName": "projects/pages/src/modules/action-hub/types/action-hub-needs-attention.ts",
946
+ "fileName": "lib/modules/action-hub/types/action-hub-needs-attention.ts",
915
947
  "line": 21,
916
948
  "character": 6
917
949
  }
@@ -934,13 +966,15 @@
934
966
  },
935
967
  "sources": [
936
968
  {
937
- "fileName": "projects/pages/src/modules/action-hub/types/action-hub-needs-attention.ts",
969
+ "fileName": "lib/modules/action-hub/types/action-hub-needs-attention.ts",
938
970
  "line": 22,
939
971
  "character": 6
940
972
  }
941
973
  ],
942
974
  "type": {
943
975
  "type": "reference",
976
+ "qualifiedName": "NavigationExtras",
977
+ "package": "@angular/router",
944
978
  "name": "NavigationExtras"
945
979
  }
946
980
  }
@@ -968,7 +1002,7 @@
968
1002
  },
969
1003
  "sources": [
970
1004
  {
971
- "fileName": "projects/pages/src/modules/action-hub/types/action-hub-needs-attention.ts",
1005
+ "fileName": "lib/modules/action-hub/types/action-hub-needs-attention.ts",
972
1006
  "line": 24,
973
1007
  "character": 4
974
1008
  }
@@ -1099,7 +1133,7 @@
1099
1133
  },
1100
1134
  "sources": [
1101
1135
  {
1102
- "fileName": "projects/pages/src/modules/action-hub/types/page-link.ts",
1136
+ "fileName": "lib/modules/action-hub/types/page-link.ts",
1103
1137
  "line": 15,
1104
1138
  "character": 4
1105
1139
  }
@@ -1121,7 +1155,7 @@
1121
1155
  "flags": {},
1122
1156
  "sources": [
1123
1157
  {
1124
- "fileName": "projects/pages/src/modules/action-hub/types/page-link.ts",
1158
+ "fileName": "lib/modules/action-hub/types/page-link.ts",
1125
1159
  "line": 16,
1126
1160
  "character": 6
1127
1161
  }
@@ -1144,13 +1178,15 @@
1144
1178
  },
1145
1179
  "sources": [
1146
1180
  {
1147
- "fileName": "projects/pages/src/modules/action-hub/types/page-link.ts",
1181
+ "fileName": "lib/modules/action-hub/types/page-link.ts",
1148
1182
  "line": 17,
1149
1183
  "character": 6
1150
1184
  }
1151
1185
  ],
1152
1186
  "type": {
1153
1187
  "type": "reference",
1188
+ "qualifiedName": "NavigationExtras",
1189
+ "package": "@angular/router",
1154
1190
  "name": "NavigationExtras"
1155
1191
  }
1156
1192
  }
@@ -1178,7 +1214,7 @@
1178
1214
  },
1179
1215
  "sources": [
1180
1216
  {
1181
- "fileName": "projects/pages/src/modules/action-hub/types/page-link.ts",
1217
+ "fileName": "lib/modules/action-hub/types/page-link.ts",
1182
1218
  "line": 19,
1183
1219
  "character": 4
1184
1220
  }
@@ -1292,6 +1328,8 @@
1292
1328
  },
1293
1329
  {
1294
1330
  "type": "reference",
1331
+ "qualifiedName": "Date",
1332
+ "package": "typescript",
1295
1333
  "name": "Date"
1296
1334
  }
1297
1335
  ]
@@ -1332,7 +1370,7 @@
1332
1370
  },
1333
1371
  "sources": [
1334
1372
  {
1335
- "fileName": "projects/pages/src/modules/action-hub/types/page-link.ts",
1373
+ "fileName": "lib/modules/action-hub/types/page-link.ts",
1336
1374
  "line": 15,
1337
1375
  "character": 4
1338
1376
  }
@@ -1354,7 +1392,7 @@
1354
1392
  "flags": {},
1355
1393
  "sources": [
1356
1394
  {
1357
- "fileName": "projects/pages/src/modules/action-hub/types/page-link.ts",
1395
+ "fileName": "lib/modules/action-hub/types/page-link.ts",
1358
1396
  "line": 16,
1359
1397
  "character": 6
1360
1398
  }
@@ -1377,13 +1415,15 @@
1377
1415
  },
1378
1416
  "sources": [
1379
1417
  {
1380
- "fileName": "projects/pages/src/modules/action-hub/types/page-link.ts",
1418
+ "fileName": "lib/modules/action-hub/types/page-link.ts",
1381
1419
  "line": 17,
1382
1420
  "character": 6
1383
1421
  }
1384
1422
  ],
1385
1423
  "type": {
1386
1424
  "type": "reference",
1425
+ "qualifiedName": "NavigationExtras",
1426
+ "package": "@angular/router",
1387
1427
  "name": "NavigationExtras"
1388
1428
  }
1389
1429
  }
@@ -1411,7 +1451,7 @@
1411
1451
  },
1412
1452
  "sources": [
1413
1453
  {
1414
- "fileName": "projects/pages/src/modules/action-hub/types/page-link.ts",
1454
+ "fileName": "lib/modules/action-hub/types/page-link.ts",
1415
1455
  "line": 19,
1416
1456
  "character": 4
1417
1457
  }
@@ -1493,7 +1533,7 @@
1493
1533
  ],
1494
1534
  "sources": [
1495
1535
  {
1496
- "fileName": "projects/pages/src/public-api.ts",
1536
+ "fileName": "index.ts",
1497
1537
  "line": 1,
1498
1538
  "character": 0
1499
1539
  }
@@ -1508,12 +1548,12 @@
1508
1548
  {
1509
1549
  "fileName": "action-hub-demo.component.ts",
1510
1550
  "filePath": "/projects/pages/documentation/code-examples/action-hub/action-hub-demo.component.ts",
1511
- "rawContents": "import { Component } from '@angular/core';\n\nconst pastHours = Array.from(Array(5).keys()).map((i) => {\n const date = new Date();\n date.setHours(date.getHours() - (i + 1));\n return date;\n});\n\n@Component({\n selector: 'app-action-hub-visual',\n templateUrl: './action-hub-demo.component.html'\n})\nexport class ActionHubDemoComponent {\n public data = {\n title: 'Page title',\n needsAttention: [\n {\n title: '9',\n message: 'updates from portal',\n permalink: {\n url: '#'\n }\n },\n {\n title: '8',\n message: 'new messages from online donation',\n permalink: {\n url: '#'\n }\n },\n {\n title: '7',\n message: 'possible duplicates from constituent lists',\n permalink: {\n url: '#'\n }\n },\n {\n title: '6',\n message: 'updates from portal',\n permalink: {\n url: '#'\n }\n },\n {\n title: '5',\n message: 'new messages from online donation',\n permalink: {\n url: '#'\n }\n },\n {\n title: '4',\n message: 'possible duplicates from constituent lists',\n permalink: {\n url: '#'\n }\n },\n {\n title: '3',\n message: 'update from portal',\n permalink: {\n url: '#'\n }\n },\n {\n title: '2',\n message: 'new messages from online donation',\n permalink: {\n url: '#'\n }\n },\n {\n title: '1',\n message: 'possible duplicate from constituent lists',\n permalink: {\n url: '#'\n }\n }\n ],\n recentLinks: [\n {\n label: 'Recent 1',\n permalink: {\n url: '#'\n },\n lastAccessed: pastHours[0]\n },\n {\n label: 'Recent 2',\n permalink: {\n url: '#'\n },\n lastAccessed: pastHours[1]\n },\n {\n label: 'Recent 3',\n permalink: {\n url: '#'\n },\n lastAccessed: pastHours[2]\n },\n {\n label: 'Recent 4',\n permalink: {\n url: '#'\n },\n lastAccessed: pastHours[3]\n },\n {\n label: 'Recent 5',\n permalink: {\n url: '#'\n },\n lastAccessed: pastHours[4]\n }\n ],\n relatedLinks: [\n {\n label: 'Link 1',\n permalink: {\n url: '#'\n }\n },\n {\n label: 'Link 2',\n permalink: {\n url: '#'\n }\n },\n {\n label: 'Link 3',\n permalink: {\n url: '#'\n }\n }\n ]\n };\n\n public buttons = [\n {\n label: 'Action 1',\n permalink: {\n url: '#'\n }\n },\n {\n label: 'Action 2',\n permalink: {\n url: '#'\n }\n },\n {\n label: 'Action 3',\n permalink: {\n url: '#'\n }\n }\n ];\n}\n"
1551
+ "rawContents": "import { Component } from '@angular/core';\n\nconst pastHours = Array.from(Array(5).keys()).map((i) => {\n const date = new Date();\n date.setHours(date.getHours() - (i + 1));\n return date;\n});\n\n@Component({\n selector: 'app-action-hub-visual',\n templateUrl: './action-hub-demo.component.html',\n})\nexport class ActionHubDemoComponent {\n public data = {\n title: 'Page title',\n needsAttention: [\n {\n title: '9',\n message: 'updates from portal',\n permalink: {\n url: '#',\n },\n },\n {\n title: '8',\n message: 'new messages from online donation',\n permalink: {\n url: '#',\n },\n },\n {\n title: '7',\n message: 'possible duplicates from constituent lists',\n permalink: {\n url: '#',\n },\n },\n {\n title: '6',\n message: 'updates from portal',\n permalink: {\n url: '#',\n },\n },\n {\n title: '5',\n message: 'new messages from online donation',\n permalink: {\n url: '#',\n },\n },\n {\n title: '4',\n message: 'possible duplicates from constituent lists',\n permalink: {\n url: '#',\n },\n },\n {\n title: '3',\n message: 'update from portal',\n permalink: {\n url: '#',\n },\n },\n {\n title: '2',\n message: 'new messages from online donation',\n permalink: {\n url: '#',\n },\n },\n {\n title: '1',\n message: 'possible duplicate from constituent lists',\n permalink: {\n url: '#',\n },\n },\n ],\n recentLinks: [\n {\n label: 'Recent 1',\n permalink: {\n url: '#',\n },\n lastAccessed: pastHours[0],\n },\n {\n label: 'Recent 2',\n permalink: {\n url: '#',\n },\n lastAccessed: pastHours[1],\n },\n {\n label: 'Recent 3',\n permalink: {\n url: '#',\n },\n lastAccessed: pastHours[2],\n },\n {\n label: 'Recent 4',\n permalink: {\n url: '#',\n },\n lastAccessed: pastHours[3],\n },\n {\n label: 'Recent 5',\n permalink: {\n url: '#',\n },\n lastAccessed: pastHours[4],\n },\n ],\n relatedLinks: [\n {\n label: 'Link 1',\n permalink: {\n url: '#',\n },\n },\n {\n label: 'Link 2',\n permalink: {\n url: '#',\n },\n },\n {\n label: 'Link 3',\n permalink: {\n url: '#',\n },\n },\n ],\n };\n\n public buttons = [\n {\n label: 'Action 1',\n permalink: {\n url: '#',\n },\n },\n {\n label: 'Action 2',\n permalink: {\n url: '#',\n },\n },\n {\n label: 'Action 3',\n permalink: {\n url: '#',\n },\n },\n ];\n}\n"
1512
1552
  },
1513
1553
  {
1514
1554
  "fileName": "action-hub-demo.module.ts",
1515
1555
  "filePath": "/projects/pages/documentation/code-examples/action-hub/action-hub-demo.module.ts",
1516
- "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyActionHubModule } from '@skyux/pages';\n\nimport { ActionHubDemoComponent } from './action-hub-demo.component';\n\n@NgModule({\n declarations: [ActionHubDemoComponent],\n exports: [ActionHubDemoComponent],\n imports: [CommonModule, SkyActionHubModule]\n})\nexport class ActionHubDemoModule {}\n"
1556
+ "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyActionHubModule } from '@skyux/pages';\n\nimport { ActionHubDemoComponent } from './action-hub-demo.component';\n\n@NgModule({\n declarations: [ActionHubDemoComponent],\n exports: [ActionHubDemoComponent],\n imports: [CommonModule, SkyActionHubModule],\n})\nexport class ActionHubDemoModule {}\n"
1517
1557
  }
1518
1558
  ]
1519
- }
1559
+ }
@@ -0,0 +1,12 @@
1
+ export * from './lib/modules/action-hub/action-hub.module';
2
+ export * from './lib/modules/action-hub/types/action-hub-needs-attention';
3
+ export * from './lib/modules/action-hub/types/page-link';
4
+ export * from './lib/modules/action-hub/types/recent-link';
5
+ export * from './lib/modules/page-header/page-header.module';
6
+ // Components and directives must be exported to support Angular's "partial" Ivy compiler.
7
+ // Obscure names are used to indicate types are not part of the public API.
8
+ export { SkyActionHubComponent as λ1 } from './lib/modules/action-hub/action-hub.component';
9
+ export { SkyActionHubButtonsComponent as λ2 } from './lib/modules/action-hub/action-hub-buttons.component';
10
+ export { SkyActionHubContentComponent as λ3 } from './lib/modules/action-hub/action-hub-content.component';
11
+ export { SkyPageHeaderComponent as λ4 } from './lib/modules/page-header/page-header.component';
12
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/components/pages/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,4CAA4C,CAAC;AAC3D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,0CAA0C,CAAC;AACzD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,8CAA8C,CAAC;AAE7D,0FAA0F;AAC1F,2EAA2E;AAC3E,OAAO,EAAE,qBAAqB,IAAI,EAAE,EAAE,MAAM,+CAA+C,CAAC;AAC5F,OAAO,EAAE,4BAA4B,IAAI,EAAE,EAAE,MAAM,uDAAuD,CAAC;AAC3G,OAAO,EAAE,4BAA4B,IAAI,EAAE,EAAE,MAAM,uDAAuD,CAAC;AAC3G,OAAO,EAAE,sBAAsB,IAAI,EAAE,EAAE,MAAM,iDAAiD,CAAC","sourcesContent":["export * from './lib/modules/action-hub/action-hub.module';\nexport * from './lib/modules/action-hub/types/action-hub-needs-attention';\nexport * from './lib/modules/action-hub/types/page-link';\nexport * from './lib/modules/action-hub/types/recent-link';\nexport * from './lib/modules/page-header/page-header.module';\n\n// Components and directives must be exported to support Angular's \"partial\" Ivy compiler.\n// Obscure names are used to indicate types are not part of the public API.\nexport { SkyActionHubComponent as λ1 } from './lib/modules/action-hub/action-hub.component';\nexport { SkyActionHubButtonsComponent as λ2 } from './lib/modules/action-hub/action-hub-buttons.component';\nexport { SkyActionHubContentComponent as λ3 } from './lib/modules/action-hub/action-hub-content.component';\nexport { SkyPageHeaderComponent as λ4 } from './lib/modules/page-header/page-header.component';\n"]}
@@ -0,0 +1,23 @@
1
+ import { Component } from '@angular/core';
2
+ import * as i0 from "@angular/core";
3
+ /**
4
+ * Displays buttons after the page title.
5
+ *
6
+ * Example:
7
+ *
8
+ * ```html
9
+ * <a class="sky-btn sky-btn-default" href="path/to/new">New</a>
10
+ * ```
11
+ */
12
+ export class SkyActionHubButtonsComponent {
13
+ }
14
+ SkyActionHubButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyActionHubButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
15
+ SkyActionHubButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyActionHubButtonsComponent, selector: "sky-action-hub-buttons", ngImport: i0, template: "<ng-content></ng-content>\n" });
16
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyActionHubButtonsComponent, decorators: [{
17
+ type: Component,
18
+ args: [{
19
+ selector: 'sky-action-hub-buttons',
20
+ templateUrl: 'action-hub-buttons.component.html',
21
+ }]
22
+ }] });
23
+ //# sourceMappingURL=action-hub-buttons.component.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"action-hub-buttons.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/pages/src/lib/modules/action-hub/action-hub-buttons.component.ts","../../../../../../../../libs/components/pages/src/lib/modules/action-hub/action-hub-buttons.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;AAE1C;;;;;;;;GAQG;AAKH,MAAM,OAAO,4BAA4B;;0HAA5B,4BAA4B;8GAA5B,4BAA4B,8DCfzC,6BACA;4FDca,4BAA4B;kBAJxC,SAAS;mBAAC;oBACT,QAAQ,EAAE,wBAAwB;oBAClC,WAAW,EAAE,mCAAmC;iBACjD","sourcesContent":["import { Component } from '@angular/core';\n\n/**\n * Displays buttons after the page title.\n *\n * Example:\n *\n * ```html\n * <a class=\"sky-btn sky-btn-default\" href=\"path/to/new\">New</a>\n * ```\n */\n@Component({\n selector: 'sky-action-hub-buttons',\n templateUrl: 'action-hub-buttons.component.html',\n})\nexport class SkyActionHubButtonsComponent {}\n","<ng-content></ng-content>\n"]}
@@ -0,0 +1,17 @@
1
+ import { Component } from '@angular/core';
2
+ import * as i0 from "@angular/core";
3
+ /**
4
+ * Displays additional content after the action items.
5
+ */
6
+ export class SkyActionHubContentComponent {
7
+ }
8
+ SkyActionHubContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyActionHubContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
9
+ SkyActionHubContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyActionHubContentComponent, selector: "sky-action-hub-content", ngImport: i0, template: "<ng-content></ng-content>\n" });
10
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyActionHubContentComponent, decorators: [{
11
+ type: Component,
12
+ args: [{
13
+ selector: 'sky-action-hub-content',
14
+ templateUrl: 'action-hub-content.component.html',
15
+ }]
16
+ }] });
17
+ //# sourceMappingURL=action-hub-content.component.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"action-hub-content.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/pages/src/lib/modules/action-hub/action-hub-content.component.ts","../../../../../../../../libs/components/pages/src/lib/modules/action-hub/action-hub-content.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;AAE1C;;GAEG;AAKH,MAAM,OAAO,4BAA4B;;0HAA5B,4BAA4B;8GAA5B,4BAA4B,8DCTzC,6BACA;4FDQa,4BAA4B;kBAJxC,SAAS;mBAAC;oBACT,QAAQ,EAAE,wBAAwB;oBAClC,WAAW,EAAE,mCAAmC;iBACjD","sourcesContent":["import { Component } from '@angular/core';\n\n/**\n * Displays additional content after the action items.\n */\n@Component({\n selector: 'sky-action-hub-content',\n templateUrl: 'action-hub-content.component.html',\n})\nexport class SkyActionHubContentComponent {}\n","<ng-content></ng-content>\n"]}
@@ -0,0 +1,95 @@
1
+ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
2
+ import * as i0 from "@angular/core";
3
+ import * as i1 from "@skyux/indicators";
4
+ import * as i2 from "@skyux/layout";
5
+ import * as i3 from "../page-header/page-header.component";
6
+ import * as i4 from "../needs-attention/needs-attention.component";
7
+ import * as i5 from "../link-list/link-list.component";
8
+ import * as i6 from "@skyux/theme";
9
+ import * as i7 from "@angular/common";
10
+ import * as i8 from "@skyux/i18n";
11
+ /**
12
+ * Creates an action hub to direct user attention to important
13
+ * actions and provide quick access to common tasks.
14
+ */
15
+ export class SkyActionHubComponent {
16
+ constructor() {
17
+ /**
18
+ * Provides a list of actions that users must perform based on business requirements or best practices, or `"loading"` to display a wait indicator.
19
+ */
20
+ this.needsAttention = [];
21
+ /**
22
+ * Provides a list of recently accessed links, or `"loading"` to display a wait indicator.
23
+ */
24
+ this.recentLinks = [];
25
+ /**
26
+ * Provides a list of related links, or `"loading"` to display a wait indicator.
27
+ */
28
+ this.relatedLinks = [];
29
+ /**
30
+ * Specifies the page title.
31
+ * @default ""
32
+ */
33
+ this.title = '';
34
+ }
35
+ getRecentLinksSorted(recentLinks, limit) {
36
+ if (recentLinks === 'loading') {
37
+ return 'loading';
38
+ }
39
+ if (!recentLinks || recentLinks.length === 0) {
40
+ return [];
41
+ }
42
+ return recentLinks
43
+ .slice(0)
44
+ .sort((a, b) => {
45
+ const aTime = a.lastAccessed instanceof Date
46
+ ? a.lastAccessed.toISOString()
47
+ : a.lastAccessed;
48
+ const bTime = b.lastAccessed instanceof Date
49
+ ? b.lastAccessed.toISOString()
50
+ : b.lastAccessed;
51
+ if (aTime === bTime) {
52
+ return 0;
53
+ }
54
+ return aTime > bTime ? -1 : 1;
55
+ })
56
+ .slice(0, limit);
57
+ }
58
+ getRelatedLinksSorted(relatedLinks) {
59
+ if (relatedLinks === 'loading') {
60
+ return 'loading';
61
+ }
62
+ if (!relatedLinks || relatedLinks.length === 0) {
63
+ return [];
64
+ }
65
+ return relatedLinks.slice(0).sort((a, b) => {
66
+ const aLabel = a.label.trim().toUpperCase();
67
+ const bLabel = b.label.trim().toUpperCase();
68
+ if (aLabel === bLabel) {
69
+ return 0;
70
+ }
71
+ return aLabel < bLabel ? -1 : 1;
72
+ });
73
+ }
74
+ }
75
+ SkyActionHubComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyActionHubComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
76
+ SkyActionHubComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyActionHubComponent, selector: "sky-action-hub", inputs: { needsAttention: "needsAttention", parentLink: "parentLink", recentLinks: "recentLinks", relatedLinks: "relatedLinks", title: "title" }, ngImport: i0, template: "<ng-template #loadingTemplateRef>\n <sky-wait [isWaiting]=\"true\"></sky-wait>\n</ng-template>\n<sky-fluid-grid>\n <sky-row>\n <sky-column>\n <sky-page-header\n [pageTitle]=\"title\"\n [parentLink]=\"parentLink\"\n ></sky-page-header>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column screenLarge=\"9\" screenXSmall=\"12\">\n <div\n [skyThemeClass]=\"{\n 'sky-margin-stacked-separate': 'default',\n 'sky-margin-stacked-xl': 'modern'\n }\"\n >\n <ng-content select=\"sky-action-hub-buttons\"></ng-content>\n </div>\n\n <div\n [skyThemeClass]=\"{\n 'sky-margin-stacked-separate': 'default',\n 'sky-margin-stacked-xxl': 'modern'\n }\"\n >\n <ng-container\n *ngIf=\"\n needsAttention === 'loading';\n then loadingTemplateRef;\n else needsAttentionTemplateRef\n \"\n ></ng-container>\n <ng-template #needsAttentionTemplateRef>\n <sky-needs-attention [items]=\"needsAttention\"></sky-needs-attention>\n </ng-template>\n </div>\n\n <div\n [skyThemeClass]=\"{\n 'sky-margin-stacked-separate': 'default',\n 'sky-margin-stacked-xxl': 'modern'\n }\"\n >\n <ng-content select=\"sky-action-hub-content\"></ng-content>\n </div>\n </sky-column>\n <sky-column screenLarge=\"3\" screenXSmall=\"12\">\n <sky-link-list\n [links]=\"getRelatedLinksSorted(relatedLinks)\"\n [title]=\"'sky_action_hub_related_links' | skyLibResources\"\n ></sky-link-list>\n <sky-link-list\n [links]=\"getRecentLinksSorted(recentLinks, 5)\"\n [title]=\"'sky_action_hub_recent_links' | skyLibResources\"\n ></sky-link-list>\n </sky-column>\n </sky-row>\n</sky-fluid-grid>\n", components: [{ type: i1.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { type: i2.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { type: i2.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { type: i2.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { type: i3.SkyPageHeaderComponent, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { type: i4.SkyNeedsAttentionComponent, selector: "sky-needs-attention", inputs: ["items"] }, { type: i5.SkyLinkListComponent, selector: "sky-link-list", inputs: ["links", "title"] }], directives: [{ type: i6.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i8.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
77
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyActionHubComponent, decorators: [{
78
+ type: Component,
79
+ args: [{
80
+ selector: 'sky-action-hub',
81
+ templateUrl: './action-hub.component.html',
82
+ changeDetection: ChangeDetectionStrategy.OnPush,
83
+ }]
84
+ }], propDecorators: { needsAttention: [{
85
+ type: Input
86
+ }], parentLink: [{
87
+ type: Input
88
+ }], recentLinks: [{
89
+ type: Input
90
+ }], relatedLinks: [{
91
+ type: Input
92
+ }], title: [{
93
+ type: Input
94
+ }] } });
95
+ //# sourceMappingURL=action-hub.component.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"action-hub.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/pages/src/lib/modules/action-hub/action-hub.component.ts","../../../../../../../../libs/components/pages/src/lib/modules/action-hub/action-hub.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;AAM1E;;;GAGG;AAMH,MAAM,OAAO,qBAAqB;IALlC;QAME;;WAEG;QAEI,mBAAc,GAA6C,EAAE,CAAC;QAQrE;;WAEG;QAEI,gBAAW,GAAgC,EAAE,CAAC;QAErD;;WAEG;QAEI,iBAAY,GAA8B,EAAE,CAAC;QAEpD;;;WAGG;QAEI,UAAK,GAAG,EAAE,CAAC;KAiDnB;IA/CQ,oBAAoB,CACzB,WAAwC,EACxC,KAAa;QAEb,IAAI,WAAW,KAAK,SAAS,EAAE;YAC7B,OAAO,SAAS,CAAC;SAClB;QACD,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE;YAC5C,OAAO,EAAE,CAAC;SACX;QACD,OAAO,WAAW;aACf,KAAK,CAAC,CAAC,CAAC;aACR,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACb,MAAM,KAAK,GACT,CAAC,CAAC,YAAY,YAAY,IAAI;gBAC5B,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE;gBAC9B,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;YACrB,MAAM,KAAK,GACT,CAAC,CAAC,YAAY,YAAY,IAAI;gBAC5B,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE;gBAC9B,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;YACrB,IAAI,KAAK,KAAK,KAAK,EAAE;gBACnB,OAAO,CAAC,CAAC;aACV;YACD,OAAO,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAChC,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;IACrB,CAAC;IAEM,qBAAqB,CAC1B,YAAuC;QAEvC,IAAI,YAAY,KAAK,SAAS,EAAE;YAC9B,OAAO,SAAS,CAAC;SAClB;QACD,IAAI,CAAC,YAAY,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;YAC9C,OAAO,EAAE,CAAC;SACX;QACD,OAAO,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACzC,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;YAC5C,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;YAC5C,IAAI,MAAM,KAAK,MAAM,EAAE;gBACrB,OAAO,CAAC,CAAC;aACV;YACD,OAAO,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAClC,CAAC,CAAC,CAAC;IACL,CAAC;;mHA9EU,qBAAqB;uGAArB,qBAAqB,wMCflC,q1DA8DA;4FD/Ca,qBAAqB;kBALjC,SAAS;mBAAC;oBACT,QAAQ,EAAE,gBAAgB;oBAC1B,WAAW,EAAE,6BAA6B;oBAC1C,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD;8BAMQ,cAAc;sBADpB,KAAK;gBAOC,UAAU;sBADhB,KAAK;gBAOC,WAAW;sBADjB,KAAK;gBAOC,YAAY;sBADlB,KAAK;gBAQC,KAAK;sBADX,KAAK","sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\nimport { SkyActionHubNeedsAttention } from './types/action-hub-needs-attention';\nimport { SkyPageLink } from './types/page-link';\nimport { SkyRecentLink } from './types/recent-link';\n\n/**\n * Creates an action hub to direct user attention to important\n * actions and provide quick access to common tasks.\n */\n@Component({\n selector: 'sky-action-hub',\n templateUrl: './action-hub.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyActionHubComponent {\n /**\n * Provides a list of actions that users must perform based on business requirements or best practices, or `\"loading\"` to display a wait indicator.\n */\n @Input()\n public needsAttention: SkyActionHubNeedsAttention[] | 'loading' = [];\n\n /**\n * Links back to a parent page.\n */\n @Input()\n public parentLink: SkyPageLink;\n\n /**\n * Provides a list of recently accessed links, or `\"loading\"` to display a wait indicator.\n */\n @Input()\n public recentLinks: SkyRecentLink[] | 'loading' = [];\n\n /**\n * Provides a list of related links, or `\"loading\"` to display a wait indicator.\n */\n @Input()\n public relatedLinks: SkyPageLink[] | 'loading' = [];\n\n /**\n * Specifies the page title.\n * @default \"\"\n */\n @Input()\n public title = '';\n\n public getRecentLinksSorted(\n recentLinks: SkyRecentLink[] | 'loading',\n limit: number\n ): SkyRecentLink[] | 'loading' {\n if (recentLinks === 'loading') {\n return 'loading';\n }\n if (!recentLinks || recentLinks.length === 0) {\n return [];\n }\n return recentLinks\n .slice(0)\n .sort((a, b) => {\n const aTime =\n a.lastAccessed instanceof Date\n ? a.lastAccessed.toISOString()\n : a.lastAccessed;\n const bTime =\n b.lastAccessed instanceof Date\n ? b.lastAccessed.toISOString()\n : b.lastAccessed;\n if (aTime === bTime) {\n return 0;\n }\n return aTime > bTime ? -1 : 1;\n })\n .slice(0, limit);\n }\n\n public getRelatedLinksSorted(\n relatedLinks: SkyPageLink[] | 'loading'\n ): SkyPageLink[] | 'loading' {\n if (relatedLinks === 'loading') {\n return 'loading';\n }\n if (!relatedLinks || relatedLinks.length === 0) {\n return [];\n }\n return relatedLinks.slice(0).sort((a, b) => {\n const aLabel = a.label.trim().toUpperCase();\n const bLabel = b.label.trim().toUpperCase();\n if (aLabel === bLabel) {\n return 0;\n }\n return aLabel < bLabel ? -1 : 1;\n });\n }\n}\n","<ng-template #loadingTemplateRef>\n <sky-wait [isWaiting]=\"true\"></sky-wait>\n</ng-template>\n<sky-fluid-grid>\n <sky-row>\n <sky-column>\n <sky-page-header\n [pageTitle]=\"title\"\n [parentLink]=\"parentLink\"\n ></sky-page-header>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column screenLarge=\"9\" screenXSmall=\"12\">\n <div\n [skyThemeClass]=\"{\n 'sky-margin-stacked-separate': 'default',\n 'sky-margin-stacked-xl': 'modern'\n }\"\n >\n <ng-content select=\"sky-action-hub-buttons\"></ng-content>\n </div>\n\n <div\n [skyThemeClass]=\"{\n 'sky-margin-stacked-separate': 'default',\n 'sky-margin-stacked-xxl': 'modern'\n }\"\n >\n <ng-container\n *ngIf=\"\n needsAttention === 'loading';\n then loadingTemplateRef;\n else needsAttentionTemplateRef\n \"\n ></ng-container>\n <ng-template #needsAttentionTemplateRef>\n <sky-needs-attention [items]=\"needsAttention\"></sky-needs-attention>\n </ng-template>\n </div>\n\n <div\n [skyThemeClass]=\"{\n 'sky-margin-stacked-separate': 'default',\n 'sky-margin-stacked-xxl': 'modern'\n }\"\n >\n <ng-content select=\"sky-action-hub-content\"></ng-content>\n </div>\n </sky-column>\n <sky-column screenLarge=\"3\" screenXSmall=\"12\">\n <sky-link-list\n [links]=\"getRelatedLinksSorted(relatedLinks)\"\n [title]=\"'sky_action_hub_related_links' | skyLibResources\"\n ></sky-link-list>\n <sky-link-list\n [links]=\"getRecentLinksSorted(recentLinks, 5)\"\n [title]=\"'sky_action_hub_recent_links' | skyLibResources\"\n ></sky-link-list>\n </sky-column>\n </sky-row>\n</sky-fluid-grid>\n"]}