@skyux/code-examples 14.11.0 → 14.13.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 (4) hide show
  1. package/fesm2022/skyux-code-examples.mjs +73 -73
  2. package/fesm2022/skyux-code-examples.mjs.map +1 -1
  3. package/package.json +36 -36
  4. package/types/skyux-code-examples.d.ts +29 -41
package/fesm2022/skyux-code-examples.mjs CHANGED
@@ -13,7 +13,7 @@ import { SkyModalInstance, SkyModalModule, SkyModalService, SkyConfirmService, S
13
13
  import * as i1$2 from '@skyux/tabs';
14
14
  import { SkyTabsModule, SkySectionedFormService, SkySectionedFormMessageType, SkySectionedFormModule, SkyVerticalTabsetModule } from '@skyux/tabs';
15
15
  import * as i1$4 from '@skyux/ag-grid';
16
- import { SkyAgGridService, SkyCellType, SkyAgGridModule, SkyAgGridHeaderInfo } from '@skyux/ag-grid';
16
+ import { SkyAgGridService, SkyCellType, defineSkyAgGridColDef, SkyAgGridModule, SkyAgGridHeaderInfo } from '@skyux/ag-grid';
17
17
  import * as i1$5 from '@skyux/layout';
18
18
  import { SkyToolbarModule, SkyDescriptionListModule, SkyBoxModule, SkyFluidGridModule, SkyActionButtonModule, SkyBackToTopModule, SkyCardModule, SkyDefinitionListModule, SkyFormatModule, SkyInlineDeleteModule, SkyPageSummaryModule, SkyTextExpandRepeaterModule, SkyTextExpandModule } from '@skyux/layout';
19
19
  import * as i2$1 from '@skyux/lookup';
@@ -428,7 +428,7 @@ let EditModalComponent$2 = class EditModalComponent {
428
428
  this.gridOptions = inject(SkyAgGridService).getEditableGridOptions({
429
429
  gridOptions: {
430
430
  columnDefs: [
431
- {
431
+ defineSkyAgGridColDef({
432
432
  colId: 'markInactiveAction',
433
433
  headerName: 'Mark inactive',
434
434
  type: SkyCellType.Template,
@@ -436,8 +436,8 @@ let EditModalComponent$2 = class EditModalComponent {
436
436
  cellRendererParams: {
437
437
  template: this.markInactiveAction,
438
438
  },
439
- },
440
- {
439
+ }),
440
+ defineSkyAgGridColDef({
441
441
  field: 'name',
442
442
  headerName: 'Name',
443
443
  type: SkyCellType.Text,
@@ -453,8 +453,8 @@ let EditModalComponent$2 = class EditModalComponent {
453
453
  },
454
454
  },
455
455
  editable: true,
456
- },
457
- {
456
+ }),
457
+ defineSkyAgGridColDef({
458
458
  field: 'age',
459
459
  headerName: 'Age',
460
460
  type: SkyCellType.Number,
@@ -471,14 +471,14 @@ let EditModalComponent$2 = class EditModalComponent {
471
471
  },
472
472
  },
473
473
  editable: true,
474
- },
474
+ }),
475
475
  {
476
476
  field: 'startDate',
477
477
  headerName: 'Start date',
478
478
  type: SkyCellType.Date,
479
479
  sort: 'asc',
480
480
  },
481
- {
481
+ defineSkyAgGridColDef({
482
482
  field: 'endDate',
483
483
  headerName: 'End date',
484
484
  type: SkyCellType.Date,
@@ -488,8 +488,8 @@ let EditModalComponent$2 = class EditModalComponent {
488
488
  skyComponentProperties: { minDate: params.data.startDate },
489
489
  };
490
490
  },
491
- },
492
- {
491
+ }),
492
+ defineSkyAgGridColDef({
493
493
  field: 'department',
494
494
  headerName: 'Department',
495
495
  type: SkyCellType.Autocomplete,
@@ -509,8 +509,8 @@ let EditModalComponent$2 = class EditModalComponent {
509
509
  this.#clearJobTitle(event.node);
510
510
  }
511
511
  },
512
- },
513
- {
512
+ }),
513
+ defineSkyAgGridColDef({
514
514
  field: 'jobTitle',
515
515
  headerName: 'Title',
516
516
  type: SkyCellType.Autocomplete,
@@ -524,7 +524,7 @@ let EditModalComponent$2 = class EditModalComponent {
524
524
  }
525
525
  return editParams;
526
526
  },
527
- },
527
+ }),
528
528
  {
529
529
  colId: 'validationCurrency',
530
530
  field: 'validationCurrency',
@@ -532,7 +532,7 @@ let EditModalComponent$2 = class EditModalComponent {
532
532
  type: [SkyCellType.CurrencyValidator],
533
533
  editable: true,
534
534
  },
535
- {
535
+ defineSkyAgGridColDef({
536
536
  colId: 'validationDate',
537
537
  field: 'validationDate',
538
538
  headerName: 'Validation date',
@@ -544,7 +544,7 @@ let EditModalComponent$2 = class EditModalComponent {
544
544
  },
545
545
  },
546
546
  editable: true,
547
- },
547
+ }),
548
548
  ],
549
549
  onGridReady: (gridReadyEvent) => {
550
550
  this.#gridApi.set(gridReadyEvent.api);
@@ -594,14 +594,14 @@ class AgGridDataEntryGridBasicExampleComponent {
594
594
  constructor() {
595
595
  this.gridData = signal(AG_GRID_DEMO_DATA$b, ...(ngDevMode ? [{ debugName: "gridData" }] : []));
596
596
  this.#columnDefs = [
597
- {
597
+ defineSkyAgGridColDef({
598
598
  field: 'selected',
599
599
  type: SkyCellType.RowSelector,
600
600
  cellRendererParams: {
601
601
  // Could be a SkyAppResourcesService.getString call that returns an observable.
602
602
  label: (data) => of(`Select ${data.name}`),
603
603
  },
604
- },
604
+ }),
605
605
  {
606
606
  colId: 'context',
607
607
  maxWidth: 50,
@@ -612,7 +612,7 @@ class AgGridDataEntryGridBasicExampleComponent {
612
612
  headerHidden: true,
613
613
  },
614
614
  },
615
- {
615
+ defineSkyAgGridColDef({
616
616
  field: 'name',
617
617
  headerName: 'Name',
618
618
  type: SkyCellType.Text,
@@ -622,8 +622,8 @@ class AgGridDataEntryGridBasicExampleComponent {
622
622
  validatorMessage: `Value exceeds maximum length`,
623
623
  },
624
624
  },
625
- },
626
- {
625
+ }),
626
+ defineSkyAgGridColDef({
627
627
  field: 'age',
628
628
  headerName: 'Age',
629
629
  type: SkyCellType.Number,
@@ -634,7 +634,7 @@ class AgGridDataEntryGridBasicExampleComponent {
634
634
  },
635
635
  },
636
636
  maxWidth: 60,
637
- },
637
+ }),
638
638
  {
639
639
  field: 'startDate',
640
640
  headerName: 'Start date',
@@ -663,7 +663,7 @@ class AgGridDataEntryGridBasicExampleComponent {
663
663
  headerName: 'Validation currency',
664
664
  type: [SkyCellType.CurrencyValidator],
665
665
  },
666
- {
666
+ defineSkyAgGridColDef({
667
667
  colId: 'validationDate',
668
668
  field: 'validationDate',
669
669
  headerName: 'Validation date',
@@ -674,7 +674,7 @@ class AgGridDataEntryGridBasicExampleComponent {
674
674
  validatorMessage: 'Enter a future date',
675
675
  },
676
676
  },
677
- },
677
+ }),
678
678
  ];
679
679
  this.#modalSvc = inject(SkyModalService);
680
680
  this.#gridApi = signal(undefined, ...(ngDevMode ? [{ debugName: "#gridApi" }] : []));
@@ -915,7 +915,7 @@ let EditModalComponent$1 = class EditModalComponent {
915
915
  type: SkyCellType.Date,
916
916
  sort: 'asc',
917
917
  },
918
- {
918
+ defineSkyAgGridColDef({
919
919
  field: 'endDate',
920
920
  headerName: 'End date',
921
921
  type: SkyCellType.Date,
@@ -927,8 +927,8 @@ let EditModalComponent$1 = class EditModalComponent {
927
927
  },
928
928
  };
929
929
  },
930
- },
931
- {
930
+ }),
931
+ defineSkyAgGridColDef({
932
932
  field: 'department',
933
933
  headerName: 'Department',
934
934
  type: SkyCellType.Autocomplete,
@@ -948,8 +948,8 @@ let EditModalComponent$1 = class EditModalComponent {
948
948
  this.#clearJobTitle(event.node);
949
949
  }
950
950
  },
951
- },
952
- {
951
+ }),
952
+ defineSkyAgGridColDef({
953
953
  field: 'jobTitle',
954
954
  headerName: 'Title',
955
955
  type: SkyCellType.Autocomplete,
@@ -963,7 +963,7 @@ let EditModalComponent$1 = class EditModalComponent {
963
963
  }
964
964
  return editParams;
965
965
  },
966
- },
966
+ }),
967
967
  {
968
968
  colId: 'validationCurrency',
969
969
  field: 'validationCurrency',
@@ -971,7 +971,7 @@ let EditModalComponent$1 = class EditModalComponent {
971
971
  type: [SkyCellType.CurrencyValidator],
972
972
  editable: true,
973
973
  },
974
- {
974
+ defineSkyAgGridColDef({
975
975
  colId: 'validationDate',
976
976
  field: 'validationDate',
977
977
  headerName: 'Validation date',
@@ -983,7 +983,7 @@ let EditModalComponent$1 = class EditModalComponent {
983
983
  },
984
984
  },
985
985
  editable: true,
986
- },
986
+ }),
987
987
  ],
988
988
  onGridReady: (gridReadyEvent) => {
989
989
  this.#gridApi.set(gridReadyEvent.api);
@@ -1118,14 +1118,14 @@ let ViewGridComponent$3 = class ViewGridComponent {
1118
1118
  this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
1119
1119
  this.viewId = 'dataEntryGridWithDataManagerView';
1120
1120
  this.#columnDefs = [
1121
- {
1121
+ defineSkyAgGridColDef({
1122
1122
  field: 'selected',
1123
1123
  type: SkyCellType.RowSelector,
1124
1124
  cellRendererParams: {
1125
1125
  // Could be a SkyAppResourcesService.getString call that returns an observable.
1126
1126
  label: (data) => of(`Select ${data.name}`),
1127
1127
  },
1128
- },
1128
+ }),
1129
1129
  {
1130
1130
  colId: 'context',
1131
1131
  maxWidth: 50,
@@ -1173,7 +1173,7 @@ let ViewGridComponent$3 = class ViewGridComponent {
1173
1173
  headerName: 'Validation currency',
1174
1174
  type: [SkyCellType.CurrencyValidator],
1175
1175
  },
1176
- {
1176
+ defineSkyAgGridColDef({
1177
1177
  field: 'validationDate',
1178
1178
  headerName: 'Validation date',
1179
1179
  type: [SkyCellType.Date, SkyCellType.Validator],
@@ -1183,7 +1183,7 @@ let ViewGridComponent$3 = class ViewGridComponent {
1183
1183
  validatorMessage: 'Please enter a future date',
1184
1184
  },
1185
1185
  },
1186
- },
1186
+ }),
1187
1187
  ];
1188
1188
  this.noRowsTemplate = `<div class="sky-theme-font-body-deemphasized-m">No results found.</div>`;
1189
1189
  this.#dataManagerSvc = inject(SkyDataManagerService);
@@ -1564,7 +1564,7 @@ class AgGridDataEntryGridFocusExampleComponent {
1564
1564
  this.gridOptions = inject(SkyAgGridService).getEditableGridOptions({
1565
1565
  gridOptions: {
1566
1566
  columnDefs: [
1567
- {
1567
+ defineSkyAgGridColDef({
1568
1568
  field: 'name',
1569
1569
  headerName: 'Name',
1570
1570
  type: SkyCellType.Text,
@@ -1575,8 +1575,8 @@ class AgGridDataEntryGridFocusExampleComponent {
1575
1575
  validatorMessage: `Value exceeds maximum length`,
1576
1576
  },
1577
1577
  },
1578
- },
1579
- {
1578
+ }),
1579
+ defineSkyAgGridColDef({
1580
1580
  field: 'age',
1581
1581
  headerName: 'Age',
1582
1582
  type: SkyCellType.Number,
@@ -1588,7 +1588,7 @@ class AgGridDataEntryGridFocusExampleComponent {
1588
1588
  },
1589
1589
  },
1590
1590
  maxWidth: 60,
1591
- },
1591
+ }),
1592
1592
  {
1593
1593
  field: 'startDate',
1594
1594
  headerName: 'Start date',
@@ -1622,7 +1622,7 @@ class AgGridDataEntryGridFocusExampleComponent {
1622
1622
  type: [SkyCellType.CurrencyValidator],
1623
1623
  editable: true,
1624
1624
  },
1625
- {
1625
+ defineSkyAgGridColDef({
1626
1626
  colId: 'validationDate',
1627
1627
  field: 'validationDate',
1628
1628
  headerName: 'Validation date',
@@ -1634,7 +1634,7 @@ class AgGridDataEntryGridFocusExampleComponent {
1634
1634
  validatorMessage: 'Enter a future date',
1635
1635
  },
1636
1636
  },
1637
- },
1637
+ }),
1638
1638
  ],
1639
1639
  focusGridInnerElement: (params) => {
1640
1640
  params.api.startEditingCell({
@@ -1846,7 +1846,7 @@ class EditModalComponent {
1846
1846
  this.gridOptions = inject(SkyAgGridService).getEditableGridOptions({
1847
1847
  gridOptions: {
1848
1848
  columnDefs: [
1849
- {
1849
+ defineSkyAgGridColDef({
1850
1850
  field: 'name',
1851
1851
  headerName: 'Name',
1852
1852
  type: SkyCellType.Text,
@@ -1862,8 +1862,8 @@ class EditModalComponent {
1862
1862
  },
1863
1863
  },
1864
1864
  editable: true,
1865
- },
1866
- {
1865
+ }),
1866
+ defineSkyAgGridColDef({
1867
1867
  field: 'age',
1868
1868
  headerName: 'Age',
1869
1869
  type: SkyCellType.Number,
@@ -1880,14 +1880,14 @@ class EditModalComponent {
1880
1880
  },
1881
1881
  },
1882
1882
  editable: true,
1883
- },
1883
+ }),
1884
1884
  {
1885
1885
  field: 'startDate',
1886
1886
  headerName: 'Start date',
1887
1887
  type: SkyCellType.Date,
1888
1888
  sort: 'asc',
1889
1889
  },
1890
- {
1890
+ defineSkyAgGridColDef({
1891
1891
  field: 'endDate',
1892
1892
  headerName: 'End date',
1893
1893
  type: SkyCellType.Date,
@@ -1897,8 +1897,8 @@ class EditModalComponent {
1897
1897
  skyComponentProperties: { minDate: params.data.startDate },
1898
1898
  };
1899
1899
  },
1900
- },
1901
- {
1900
+ }),
1901
+ defineSkyAgGridColDef({
1902
1902
  field: 'department',
1903
1903
  headerName: 'Department',
1904
1904
  type: SkyCellType.Autocomplete,
@@ -1918,8 +1918,8 @@ class EditModalComponent {
1918
1918
  this.#clearJobTitle(event.node);
1919
1919
  }
1920
1920
  },
1921
- },
1922
- {
1921
+ }),
1922
+ defineSkyAgGridColDef({
1923
1923
  field: 'jobTitle',
1924
1924
  headerName: 'Title',
1925
1925
  type: SkyCellType.Autocomplete,
@@ -1933,7 +1933,7 @@ class EditModalComponent {
1933
1933
  }
1934
1934
  return editParams;
1935
1935
  },
1936
- },
1936
+ }),
1937
1937
  {
1938
1938
  colId: 'validationCurrency',
1939
1939
  field: 'validationCurrency',
@@ -1941,7 +1941,7 @@ class EditModalComponent {
1941
1941
  type: [SkyCellType.CurrencyValidator],
1942
1942
  editable: true,
1943
1943
  },
1944
- {
1944
+ defineSkyAgGridColDef({
1945
1945
  colId: 'validationDate',
1946
1946
  field: 'validationDate',
1947
1947
  headerName: 'Validation date',
@@ -1953,7 +1953,7 @@ class EditModalComponent {
1953
1953
  },
1954
1954
  },
1955
1955
  editable: true,
1956
- },
1956
+ }),
1957
1957
  ],
1958
1958
  onGridReady: (gridReadyEvent) => {
1959
1959
  this.#gridApi.set(gridReadyEvent.api);
@@ -2018,14 +2018,14 @@ class AgGridDataEntryGridInlineHelpExampleComponent {
2018
2018
  this.gridOptions = inject(SkyAgGridService).getGridOptions({
2019
2019
  gridOptions: {
2020
2020
  columnDefs: [
2021
- {
2021
+ defineSkyAgGridColDef({
2022
2022
  field: 'selected',
2023
2023
  type: SkyCellType.RowSelector,
2024
2024
  cellRendererParams: {
2025
2025
  // Could be a SkyAppResourcesService.getString call that returns an observable.
2026
2026
  label: (data) => of(`Select ${data.name}`),
2027
2027
  },
2028
- },
2028
+ }),
2029
2029
  {
2030
2030
  colId: 'context',
2031
2031
  maxWidth: 50,
@@ -2036,7 +2036,7 @@ class AgGridDataEntryGridInlineHelpExampleComponent {
2036
2036
  headerHidden: true,
2037
2037
  },
2038
2038
  },
2039
- {
2039
+ defineSkyAgGridColDef({
2040
2040
  field: 'name',
2041
2041
  headerName: 'Name',
2042
2042
  type: SkyCellType.Text,
@@ -2049,8 +2049,8 @@ class AgGridDataEntryGridInlineHelpExampleComponent {
2049
2049
  headerComponentParams: {
2050
2050
  inlineHelpComponent: InlineHelpComponent$1,
2051
2051
  },
2052
- },
2053
- {
2052
+ }),
2053
+ defineSkyAgGridColDef({
2054
2054
  field: 'age',
2055
2055
  headerName: 'Age',
2056
2056
  type: SkyCellType.Number,
@@ -2064,7 +2064,7 @@ class AgGridDataEntryGridInlineHelpExampleComponent {
2064
2064
  headerComponentParams: {
2065
2065
  inlineHelpComponent: InlineHelpComponent$1,
2066
2066
  },
2067
- },
2067
+ }),
2068
2068
  {
2069
2069
  field: 'startDate',
2070
2070
  headerName: 'Start date',
@@ -2108,7 +2108,7 @@ class AgGridDataEntryGridInlineHelpExampleComponent {
2108
2108
  inlineHelpComponent: InlineHelpComponent$1,
2109
2109
  },
2110
2110
  },
2111
- {
2111
+ defineSkyAgGridColDef({
2112
2112
  colId: 'validationDate',
2113
2113
  field: 'validationDate',
2114
2114
  headerName: 'Validation date',
@@ -2122,7 +2122,7 @@ class AgGridDataEntryGridInlineHelpExampleComponent {
2122
2122
  headerComponentParams: {
2123
2123
  inlineHelpComponent: InlineHelpComponent$1,
2124
2124
  },
2125
- },
2125
+ }),
2126
2126
  ],
2127
2127
  onGridReady: (gridReadyEvent) => {
2128
2128
  this.#gridApi.set(gridReadyEvent.api);
@@ -2360,14 +2360,14 @@ class AgGridDataGridBasicMultiselectExampleComponent {
2360
2360
  constructor() {
2361
2361
  this.gridData = AG_GRID_DEMO_DATA$7;
2362
2362
  this.#columnDefs = [
2363
- {
2363
+ defineSkyAgGridColDef({
2364
2364
  field: 'selected',
2365
2365
  type: SkyCellType.RowSelector,
2366
2366
  cellRendererParams: {
2367
2367
  // Could be a SkyAppResourcesService.getString call that returns an observable.
2368
2368
  label: (data) => of(`Select ${data.name}`),
2369
2369
  },
2370
- },
2370
+ }),
2371
2371
  {
2372
2372
  colId: 'context',
2373
2373
  maxWidth: 50,
@@ -2910,7 +2910,7 @@ let ViewGridComponent$2 = class ViewGridComponent {
2910
2910
  this.viewId = 'dataGridMultiselectWithDataManagerView';
2911
2911
  this.noRowsTemplate = `<div class="sky-deemphasized">No results found.</div>`;
2912
2912
  this.#columnDefs = [
2913
- {
2913
+ defineSkyAgGridColDef({
2914
2914
  field: 'selected',
2915
2915
  type: SkyCellType.RowSelector,
2916
2916
  suppressMovable: true,
@@ -2920,7 +2920,7 @@ let ViewGridComponent$2 = class ViewGridComponent {
2920
2920
  // Could be a SkyAppResourcesService.getString call that returns an observable.
2921
2921
  label: (data) => of(`Select ${data.name}`),
2922
2922
  },
2923
- },
2923
+ }),
2924
2924
  {
2925
2925
  colId: 'context',
2926
2926
  maxWidth: 50,
@@ -3841,14 +3841,14 @@ class AgGridDataGridInlineHelpExampleComponent {
3841
3841
  this.gridData = AG_GRID_DEMO_DATA$3;
3842
3842
  this.searchText = '';
3843
3843
  this.#columnDefs = [
3844
- {
3844
+ defineSkyAgGridColDef({
3845
3845
  field: 'selected',
3846
3846
  type: SkyCellType.RowSelector,
3847
3847
  cellRendererParams: {
3848
3848
  // Could be a SkyAppResourcesService.getString call that returns an observable.
3849
3849
  label: (data) => of(`Select ${data.name}`),
3850
3850
  },
3851
- },
3851
+ }),
3852
3852
  {
3853
3853
  colId: 'context',
3854
3854
  maxWidth: 50,
@@ -4309,7 +4309,7 @@ class AgGridDataGridTemplateRefColumnExampleComponent {
4309
4309
  maxWidth: 80,
4310
4310
  resizable: false,
4311
4311
  },
4312
- {
4312
+ defineSkyAgGridColDef({
4313
4313
  field: 'department',
4314
4314
  headerName: 'Department',
4315
4315
  type: SkyCellType.Template,
@@ -4317,8 +4317,8 @@ class AgGridDataGridTemplateRefColumnExampleComponent {
4317
4317
  template: this.boldColumn,
4318
4318
  },
4319
4319
  initialWidth: 220,
4320
- },
4321
- {
4320
+ }),
4321
+ defineSkyAgGridColDef({
4322
4322
  field: 'jobTitle',
4323
4323
  headerName: 'Title',
4324
4324
  type: SkyCellType.Template,
@@ -4326,7 +4326,7 @@ class AgGridDataGridTemplateRefColumnExampleComponent {
4326
4326
  template: this.emphasizedColumn,
4327
4327
  },
4328
4328
  initialWidth: 220,
4329
- },
4329
+ }),
4330
4330
  ],
4331
4331
  rowData: AG_GRID_DEMO_DATA$1,
4332
4332
  },
@@ -4528,14 +4528,14 @@ class AgGridDataGridTopScrollExampleComponent {
4528
4528
  sortable: false,
4529
4529
  cellRenderer: ContextMenuComponent,
4530
4530
  },
4531
- {
4531
+ defineSkyAgGridColDef({
4532
4532
  field: 'selected',
4533
4533
  type: SkyCellType.RowSelector,
4534
4534
  cellRendererParams: {
4535
4535
  // Could be a SkyAppResourcesService.getString call that returns an observable.
4536
4536
  label: (data) => of(`Select ${data.name}`),
4537
4537
  },
4538
- },
4538
+ }),
4539
4539
  {
4540
4540
  field: 'name',
4541
4541
  headerName: 'Name',