@skyux/code-examples 15.0.0-alpha.5 → 15.0.0-alpha.6

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.
@@ -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';
@@ -429,7 +429,7 @@ let EditModalComponent$2 = class EditModalComponent {
429
429
  this.gridOptions = inject(SkyAgGridService).getEditableGridOptions({
430
430
  gridOptions: {
431
431
  columnDefs: [
432
- {
432
+ defineSkyAgGridColDef({
433
433
  colId: 'markInactiveAction',
434
434
  headerName: 'Mark inactive',
435
435
  type: SkyCellType.Template,
@@ -437,8 +437,8 @@ let EditModalComponent$2 = class EditModalComponent {
437
437
  cellRendererParams: {
438
438
  template: this.markInactiveAction,
439
439
  },
440
- },
441
- {
440
+ }),
441
+ defineSkyAgGridColDef({
442
442
  field: 'name',
443
443
  headerName: 'Name',
444
444
  type: SkyCellType.Text,
@@ -454,8 +454,8 @@ let EditModalComponent$2 = class EditModalComponent {
454
454
  },
455
455
  },
456
456
  editable: true,
457
- },
458
- {
457
+ }),
458
+ defineSkyAgGridColDef({
459
459
  field: 'age',
460
460
  headerName: 'Age',
461
461
  type: SkyCellType.Number,
@@ -472,14 +472,14 @@ let EditModalComponent$2 = class EditModalComponent {
472
472
  },
473
473
  },
474
474
  editable: true,
475
- },
475
+ }),
476
476
  {
477
477
  field: 'startDate',
478
478
  headerName: 'Start date',
479
479
  type: SkyCellType.Date,
480
480
  sort: 'asc',
481
481
  },
482
- {
482
+ defineSkyAgGridColDef({
483
483
  field: 'endDate',
484
484
  headerName: 'End date',
485
485
  type: SkyCellType.Date,
@@ -489,8 +489,8 @@ let EditModalComponent$2 = class EditModalComponent {
489
489
  skyComponentProperties: { minDate: params.data.startDate },
490
490
  };
491
491
  },
492
- },
493
- {
492
+ }),
493
+ defineSkyAgGridColDef({
494
494
  field: 'department',
495
495
  headerName: 'Department',
496
496
  type: SkyCellType.Autocomplete,
@@ -510,8 +510,8 @@ let EditModalComponent$2 = class EditModalComponent {
510
510
  this.#clearJobTitle(event.node);
511
511
  }
512
512
  },
513
- },
514
- {
513
+ }),
514
+ defineSkyAgGridColDef({
515
515
  field: 'jobTitle',
516
516
  headerName: 'Title',
517
517
  type: SkyCellType.Autocomplete,
@@ -525,7 +525,7 @@ let EditModalComponent$2 = class EditModalComponent {
525
525
  }
526
526
  return editParams;
527
527
  },
528
- },
528
+ }),
529
529
  {
530
530
  colId: 'validationCurrency',
531
531
  field: 'validationCurrency',
@@ -533,7 +533,7 @@ let EditModalComponent$2 = class EditModalComponent {
533
533
  type: [SkyCellType.CurrencyValidator],
534
534
  editable: true,
535
535
  },
536
- {
536
+ defineSkyAgGridColDef({
537
537
  colId: 'validationDate',
538
538
  field: 'validationDate',
539
539
  headerName: 'Validation date',
@@ -545,7 +545,7 @@ let EditModalComponent$2 = class EditModalComponent {
545
545
  },
546
546
  },
547
547
  editable: true,
548
- },
548
+ }),
549
549
  ],
550
550
  onGridReady: (gridReadyEvent) => {
551
551
  this.#gridApi.set(gridReadyEvent.api);
@@ -597,14 +597,14 @@ class AgGridDataEntryGridBasicExampleComponent {
597
597
  this.gridData = signal(AG_GRID_DEMO_DATA$b, /* @ts-ignore */
598
598
  ...(ngDevMode ? [{ debugName: "gridData" }] : /* istanbul ignore next */ []));
599
599
  this.#columnDefs = [
600
- {
600
+ defineSkyAgGridColDef({
601
601
  field: 'selected',
602
602
  type: SkyCellType.RowSelector,
603
603
  cellRendererParams: {
604
604
  // Could be a SkyAppResourcesService.getString call that returns an observable.
605
605
  label: (data) => of(`Select ${data.name}`),
606
606
  },
607
- },
607
+ }),
608
608
  {
609
609
  colId: 'context',
610
610
  maxWidth: 50,
@@ -615,7 +615,7 @@ class AgGridDataEntryGridBasicExampleComponent {
615
615
  headerHidden: true,
616
616
  },
617
617
  },
618
- {
618
+ defineSkyAgGridColDef({
619
619
  field: 'name',
620
620
  headerName: 'Name',
621
621
  type: SkyCellType.Text,
@@ -625,8 +625,8 @@ class AgGridDataEntryGridBasicExampleComponent {
625
625
  validatorMessage: `Value exceeds maximum length`,
626
626
  },
627
627
  },
628
- },
629
- {
628
+ }),
629
+ defineSkyAgGridColDef({
630
630
  field: 'age',
631
631
  headerName: 'Age',
632
632
  type: SkyCellType.Number,
@@ -637,7 +637,7 @@ class AgGridDataEntryGridBasicExampleComponent {
637
637
  },
638
638
  },
639
639
  maxWidth: 60,
640
- },
640
+ }),
641
641
  {
642
642
  field: 'startDate',
643
643
  headerName: 'Start date',
@@ -666,7 +666,7 @@ class AgGridDataEntryGridBasicExampleComponent {
666
666
  headerName: 'Validation currency',
667
667
  type: [SkyCellType.CurrencyValidator],
668
668
  },
669
- {
669
+ defineSkyAgGridColDef({
670
670
  colId: 'validationDate',
671
671
  field: 'validationDate',
672
672
  headerName: 'Validation date',
@@ -677,7 +677,7 @@ class AgGridDataEntryGridBasicExampleComponent {
677
677
  validatorMessage: 'Enter a future date',
678
678
  },
679
679
  },
680
- },
680
+ }),
681
681
  ];
682
682
  this.#modalSvc = inject(SkyModalService);
683
683
  this.#gridApi = signal(undefined, /* @ts-ignore */
@@ -920,7 +920,7 @@ let EditModalComponent$1 = class EditModalComponent {
920
920
  type: SkyCellType.Date,
921
921
  sort: 'asc',
922
922
  },
923
- {
923
+ defineSkyAgGridColDef({
924
924
  field: 'endDate',
925
925
  headerName: 'End date',
926
926
  type: SkyCellType.Date,
@@ -932,8 +932,8 @@ let EditModalComponent$1 = class EditModalComponent {
932
932
  },
933
933
  };
934
934
  },
935
- },
936
- {
935
+ }),
936
+ defineSkyAgGridColDef({
937
937
  field: 'department',
938
938
  headerName: 'Department',
939
939
  type: SkyCellType.Autocomplete,
@@ -953,8 +953,8 @@ let EditModalComponent$1 = class EditModalComponent {
953
953
  this.#clearJobTitle(event.node);
954
954
  }
955
955
  },
956
- },
957
- {
956
+ }),
957
+ defineSkyAgGridColDef({
958
958
  field: 'jobTitle',
959
959
  headerName: 'Title',
960
960
  type: SkyCellType.Autocomplete,
@@ -968,7 +968,7 @@ let EditModalComponent$1 = class EditModalComponent {
968
968
  }
969
969
  return editParams;
970
970
  },
971
- },
971
+ }),
972
972
  {
973
973
  colId: 'validationCurrency',
974
974
  field: 'validationCurrency',
@@ -976,7 +976,7 @@ let EditModalComponent$1 = class EditModalComponent {
976
976
  type: [SkyCellType.CurrencyValidator],
977
977
  editable: true,
978
978
  },
979
- {
979
+ defineSkyAgGridColDef({
980
980
  colId: 'validationDate',
981
981
  field: 'validationDate',
982
982
  headerName: 'Validation date',
@@ -988,7 +988,7 @@ let EditModalComponent$1 = class EditModalComponent {
988
988
  },
989
989
  },
990
990
  editable: true,
991
- },
991
+ }),
992
992
  ],
993
993
  onGridReady: (gridReadyEvent) => {
994
994
  this.#gridApi.set(gridReadyEvent.api);
@@ -1124,14 +1124,14 @@ let ViewGridComponent$3 = class ViewGridComponent {
1124
1124
  ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
1125
1125
  this.viewId = 'dataEntryGridWithDataManagerView';
1126
1126
  this.#columnDefs = [
1127
- {
1127
+ defineSkyAgGridColDef({
1128
1128
  field: 'selected',
1129
1129
  type: SkyCellType.RowSelector,
1130
1130
  cellRendererParams: {
1131
1131
  // Could be a SkyAppResourcesService.getString call that returns an observable.
1132
1132
  label: (data) => of(`Select ${data.name}`),
1133
1133
  },
1134
- },
1134
+ }),
1135
1135
  {
1136
1136
  colId: 'context',
1137
1137
  maxWidth: 50,
@@ -1179,7 +1179,7 @@ let ViewGridComponent$3 = class ViewGridComponent {
1179
1179
  headerName: 'Validation currency',
1180
1180
  type: [SkyCellType.CurrencyValidator],
1181
1181
  },
1182
- {
1182
+ defineSkyAgGridColDef({
1183
1183
  field: 'validationDate',
1184
1184
  headerName: 'Validation date',
1185
1185
  type: [SkyCellType.Date, SkyCellType.Validator],
@@ -1189,7 +1189,7 @@ let ViewGridComponent$3 = class ViewGridComponent {
1189
1189
  validatorMessage: 'Please enter a future date',
1190
1190
  },
1191
1191
  },
1192
- },
1192
+ }),
1193
1193
  ];
1194
1194
  this.noRowsTemplate = `<div class="sky-theme-font-body-deemphasized-m">No results found.</div>`;
1195
1195
  this.#dataManagerSvc = inject(SkyDataManagerService);
@@ -1573,7 +1573,7 @@ class AgGridDataEntryGridFocusExampleComponent {
1573
1573
  this.gridOptions = inject(SkyAgGridService).getEditableGridOptions({
1574
1574
  gridOptions: {
1575
1575
  columnDefs: [
1576
- {
1576
+ defineSkyAgGridColDef({
1577
1577
  field: 'name',
1578
1578
  headerName: 'Name',
1579
1579
  type: SkyCellType.Text,
@@ -1584,8 +1584,8 @@ class AgGridDataEntryGridFocusExampleComponent {
1584
1584
  validatorMessage: `Value exceeds maximum length`,
1585
1585
  },
1586
1586
  },
1587
- },
1588
- {
1587
+ }),
1588
+ defineSkyAgGridColDef({
1589
1589
  field: 'age',
1590
1590
  headerName: 'Age',
1591
1591
  type: SkyCellType.Number,
@@ -1597,7 +1597,7 @@ class AgGridDataEntryGridFocusExampleComponent {
1597
1597
  },
1598
1598
  },
1599
1599
  maxWidth: 60,
1600
- },
1600
+ }),
1601
1601
  {
1602
1602
  field: 'startDate',
1603
1603
  headerName: 'Start date',
@@ -1631,7 +1631,7 @@ class AgGridDataEntryGridFocusExampleComponent {
1631
1631
  type: [SkyCellType.CurrencyValidator],
1632
1632
  editable: true,
1633
1633
  },
1634
- {
1634
+ defineSkyAgGridColDef({
1635
1635
  colId: 'validationDate',
1636
1636
  field: 'validationDate',
1637
1637
  headerName: 'Validation date',
@@ -1643,7 +1643,7 @@ class AgGridDataEntryGridFocusExampleComponent {
1643
1643
  validatorMessage: 'Enter a future date',
1644
1644
  },
1645
1645
  },
1646
- },
1646
+ }),
1647
1647
  ],
1648
1648
  focusGridInnerElement: (params) => {
1649
1649
  params.api.startEditingCell({
@@ -1855,7 +1855,7 @@ class EditModalComponent {
1855
1855
  this.gridOptions = inject(SkyAgGridService).getEditableGridOptions({
1856
1856
  gridOptions: {
1857
1857
  columnDefs: [
1858
- {
1858
+ defineSkyAgGridColDef({
1859
1859
  field: 'name',
1860
1860
  headerName: 'Name',
1861
1861
  type: SkyCellType.Text,
@@ -1871,8 +1871,8 @@ class EditModalComponent {
1871
1871
  },
1872
1872
  },
1873
1873
  editable: true,
1874
- },
1875
- {
1874
+ }),
1875
+ defineSkyAgGridColDef({
1876
1876
  field: 'age',
1877
1877
  headerName: 'Age',
1878
1878
  type: SkyCellType.Number,
@@ -1889,14 +1889,14 @@ class EditModalComponent {
1889
1889
  },
1890
1890
  },
1891
1891
  editable: true,
1892
- },
1892
+ }),
1893
1893
  {
1894
1894
  field: 'startDate',
1895
1895
  headerName: 'Start date',
1896
1896
  type: SkyCellType.Date,
1897
1897
  sort: 'asc',
1898
1898
  },
1899
- {
1899
+ defineSkyAgGridColDef({
1900
1900
  field: 'endDate',
1901
1901
  headerName: 'End date',
1902
1902
  type: SkyCellType.Date,
@@ -1906,8 +1906,8 @@ class EditModalComponent {
1906
1906
  skyComponentProperties: { minDate: params.data.startDate },
1907
1907
  };
1908
1908
  },
1909
- },
1910
- {
1909
+ }),
1910
+ defineSkyAgGridColDef({
1911
1911
  field: 'department',
1912
1912
  headerName: 'Department',
1913
1913
  type: SkyCellType.Autocomplete,
@@ -1927,8 +1927,8 @@ class EditModalComponent {
1927
1927
  this.#clearJobTitle(event.node);
1928
1928
  }
1929
1929
  },
1930
- },
1931
- {
1930
+ }),
1931
+ defineSkyAgGridColDef({
1932
1932
  field: 'jobTitle',
1933
1933
  headerName: 'Title',
1934
1934
  type: SkyCellType.Autocomplete,
@@ -1942,7 +1942,7 @@ class EditModalComponent {
1942
1942
  }
1943
1943
  return editParams;
1944
1944
  },
1945
- },
1945
+ }),
1946
1946
  {
1947
1947
  colId: 'validationCurrency',
1948
1948
  field: 'validationCurrency',
@@ -1950,7 +1950,7 @@ class EditModalComponent {
1950
1950
  type: [SkyCellType.CurrencyValidator],
1951
1951
  editable: true,
1952
1952
  },
1953
- {
1953
+ defineSkyAgGridColDef({
1954
1954
  colId: 'validationDate',
1955
1955
  field: 'validationDate',
1956
1956
  headerName: 'Validation date',
@@ -1962,7 +1962,7 @@ class EditModalComponent {
1962
1962
  },
1963
1963
  },
1964
1964
  editable: true,
1965
- },
1965
+ }),
1966
1966
  ],
1967
1967
  onGridReady: (gridReadyEvent) => {
1968
1968
  this.#gridApi.set(gridReadyEvent.api);
@@ -2029,14 +2029,14 @@ class AgGridDataEntryGridInlineHelpExampleComponent {
2029
2029
  this.gridOptions = inject(SkyAgGridService).getGridOptions({
2030
2030
  gridOptions: {
2031
2031
  columnDefs: [
2032
- {
2032
+ defineSkyAgGridColDef({
2033
2033
  field: 'selected',
2034
2034
  type: SkyCellType.RowSelector,
2035
2035
  cellRendererParams: {
2036
2036
  // Could be a SkyAppResourcesService.getString call that returns an observable.
2037
2037
  label: (data) => of(`Select ${data.name}`),
2038
2038
  },
2039
- },
2039
+ }),
2040
2040
  {
2041
2041
  colId: 'context',
2042
2042
  maxWidth: 50,
@@ -2047,7 +2047,7 @@ class AgGridDataEntryGridInlineHelpExampleComponent {
2047
2047
  headerHidden: true,
2048
2048
  },
2049
2049
  },
2050
- {
2050
+ defineSkyAgGridColDef({
2051
2051
  field: 'name',
2052
2052
  headerName: 'Name',
2053
2053
  type: SkyCellType.Text,
@@ -2060,8 +2060,8 @@ class AgGridDataEntryGridInlineHelpExampleComponent {
2060
2060
  headerComponentParams: {
2061
2061
  inlineHelpComponent: InlineHelpComponent$1,
2062
2062
  },
2063
- },
2064
- {
2063
+ }),
2064
+ defineSkyAgGridColDef({
2065
2065
  field: 'age',
2066
2066
  headerName: 'Age',
2067
2067
  type: SkyCellType.Number,
@@ -2075,7 +2075,7 @@ class AgGridDataEntryGridInlineHelpExampleComponent {
2075
2075
  headerComponentParams: {
2076
2076
  inlineHelpComponent: InlineHelpComponent$1,
2077
2077
  },
2078
- },
2078
+ }),
2079
2079
  {
2080
2080
  field: 'startDate',
2081
2081
  headerName: 'Start date',
@@ -2119,7 +2119,7 @@ class AgGridDataEntryGridInlineHelpExampleComponent {
2119
2119
  inlineHelpComponent: InlineHelpComponent$1,
2120
2120
  },
2121
2121
  },
2122
- {
2122
+ defineSkyAgGridColDef({
2123
2123
  colId: 'validationDate',
2124
2124
  field: 'validationDate',
2125
2125
  headerName: 'Validation date',
@@ -2133,7 +2133,7 @@ class AgGridDataEntryGridInlineHelpExampleComponent {
2133
2133
  headerComponentParams: {
2134
2134
  inlineHelpComponent: InlineHelpComponent$1,
2135
2135
  },
2136
- },
2136
+ }),
2137
2137
  ],
2138
2138
  onGridReady: (gridReadyEvent) => {
2139
2139
  this.#gridApi.set(gridReadyEvent.api);
@@ -2372,14 +2372,14 @@ class AgGridDataGridBasicMultiselectExampleComponent {
2372
2372
  constructor() {
2373
2373
  this.gridData = AG_GRID_DEMO_DATA$7;
2374
2374
  this.#columnDefs = [
2375
- {
2375
+ defineSkyAgGridColDef({
2376
2376
  field: 'selected',
2377
2377
  type: SkyCellType.RowSelector,
2378
2378
  cellRendererParams: {
2379
2379
  // Could be a SkyAppResourcesService.getString call that returns an observable.
2380
2380
  label: (data) => of(`Select ${data.name}`),
2381
2381
  },
2382
- },
2382
+ }),
2383
2383
  {
2384
2384
  colId: 'context',
2385
2385
  maxWidth: 50,
@@ -2923,7 +2923,7 @@ let ViewGridComponent$2 = class ViewGridComponent {
2923
2923
  this.viewId = 'dataGridMultiselectWithDataManagerView';
2924
2924
  this.noRowsTemplate = `<div class="sky-deemphasized">No results found.</div>`;
2925
2925
  this.#columnDefs = [
2926
- {
2926
+ defineSkyAgGridColDef({
2927
2927
  field: 'selected',
2928
2928
  type: SkyCellType.RowSelector,
2929
2929
  suppressMovable: true,
@@ -2933,7 +2933,7 @@ let ViewGridComponent$2 = class ViewGridComponent {
2933
2933
  // Could be a SkyAppResourcesService.getString call that returns an observable.
2934
2934
  label: (data) => of(`Select ${data.name}`),
2935
2935
  },
2936
- },
2936
+ }),
2937
2937
  {
2938
2938
  colId: 'context',
2939
2939
  maxWidth: 50,
@@ -3859,14 +3859,14 @@ class AgGridDataGridInlineHelpExampleComponent {
3859
3859
  this.gridData = AG_GRID_DEMO_DATA$3;
3860
3860
  this.searchText = '';
3861
3861
  this.#columnDefs = [
3862
- {
3862
+ defineSkyAgGridColDef({
3863
3863
  field: 'selected',
3864
3864
  type: SkyCellType.RowSelector,
3865
3865
  cellRendererParams: {
3866
3866
  // Could be a SkyAppResourcesService.getString call that returns an observable.
3867
3867
  label: (data) => of(`Select ${data.name}`),
3868
3868
  },
3869
- },
3869
+ }),
3870
3870
  {
3871
3871
  colId: 'context',
3872
3872
  maxWidth: 50,
@@ -4329,7 +4329,7 @@ class AgGridDataGridTemplateRefColumnExampleComponent {
4329
4329
  maxWidth: 80,
4330
4330
  resizable: false,
4331
4331
  },
4332
- {
4332
+ defineSkyAgGridColDef({
4333
4333
  field: 'department',
4334
4334
  headerName: 'Department',
4335
4335
  type: SkyCellType.Template,
@@ -4337,8 +4337,8 @@ class AgGridDataGridTemplateRefColumnExampleComponent {
4337
4337
  template: this.boldColumn,
4338
4338
  },
4339
4339
  initialWidth: 220,
4340
- },
4341
- {
4340
+ }),
4341
+ defineSkyAgGridColDef({
4342
4342
  field: 'jobTitle',
4343
4343
  headerName: 'Title',
4344
4344
  type: SkyCellType.Template,
@@ -4346,7 +4346,7 @@ class AgGridDataGridTemplateRefColumnExampleComponent {
4346
4346
  template: this.emphasizedColumn,
4347
4347
  },
4348
4348
  initialWidth: 220,
4349
- },
4349
+ }),
4350
4350
  ],
4351
4351
  rowData: AG_GRID_DEMO_DATA$1,
4352
4352
  },
@@ -4548,14 +4548,14 @@ class AgGridDataGridTopScrollExampleComponent {
4548
4548
  sortable: false,
4549
4549
  cellRenderer: ContextMenuComponent,
4550
4550
  },
4551
- {
4551
+ defineSkyAgGridColDef({
4552
4552
  field: 'selected',
4553
4553
  type: SkyCellType.RowSelector,
4554
4554
  cellRendererParams: {
4555
4555
  // Could be a SkyAppResourcesService.getString call that returns an observable.
4556
4556
  label: (data) => of(`Select ${data.name}`),
4557
4557
  },
4558
- },
4558
+ }),
4559
4559
  {
4560
4560
  field: 'name',
4561
4561
  headerName: 'Name',
@@ -14796,11 +14796,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
14796
14796
  */
14797
14797
  class TabsVerticalTabsBasicExampleComponent {
14798
14798
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabsVerticalTabsBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
14799
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: TabsVerticalTabsBasicExampleComponent, isStandalone: true, selector: "app-tabs-vertical-tabs-basic-example", ngImport: i0, template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-basic\">\n <sky-vertical-tab tabHeading=\"Tab 1\"> Tab 1 content </sky-vertical-tab>\n <sky-vertical-tab tabHeading=\"Tab 2\" [active]=\"true\">\n Tab 2 content\n </sky-vertical-tab>\n <sky-vertical-tab tabHeading=\"Tab 3\" [disabled]=\"true\">\n Tab 3 content\n </sky-vertical-tab>\n</sky-vertical-tabset>\n", dependencies: [{ kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i1$2.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent"], outputs: ["activeChange"] }, { kind: "component", type: i1$2.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
14799
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: TabsVerticalTabsBasicExampleComponent, isStandalone: true, selector: "app-tabs-vertical-tabs-basic-example", ngImport: i0, template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-basic\" tabWidth=\"auto\">\n <sky-vertical-tab tabHeading=\"A short tab\"> Tab 1 content </sky-vertical-tab>\n <sky-vertical-tab tabHeading=\"Tab 2\" [active]=\"true\">\n Tab 2 content\n </sky-vertical-tab>\n <sky-vertical-tab\n tabHeading=\"A very long tab heading that wraps when the width is constrained\"\n [disabled]=\"true\"\n >\n Tab 3 content\n </sky-vertical-tab>\n</sky-vertical-tabset>\n", dependencies: [{ kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i1$2.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent", "tabWidth"], outputs: ["activeChange"] }, { kind: "component", type: i1$2.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
14800
14800
  }
14801
14801
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabsVerticalTabsBasicExampleComponent, decorators: [{
14802
14802
  type: Component,
14803
- args: [{ selector: 'app-tabs-vertical-tabs-basic-example', changeDetection: ChangeDetectionStrategy.Eager, imports: [SkyVerticalTabsetModule], template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-basic\">\n <sky-vertical-tab tabHeading=\"Tab 1\"> Tab 1 content </sky-vertical-tab>\n <sky-vertical-tab tabHeading=\"Tab 2\" [active]=\"true\">\n Tab 2 content\n </sky-vertical-tab>\n <sky-vertical-tab tabHeading=\"Tab 3\" [disabled]=\"true\">\n Tab 3 content\n </sky-vertical-tab>\n</sky-vertical-tabset>\n" }]
14803
+ args: [{ selector: 'app-tabs-vertical-tabs-basic-example', changeDetection: ChangeDetectionStrategy.Eager, imports: [SkyVerticalTabsetModule], template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-basic\" tabWidth=\"auto\">\n <sky-vertical-tab tabHeading=\"A short tab\"> Tab 1 content </sky-vertical-tab>\n <sky-vertical-tab tabHeading=\"Tab 2\" [active]=\"true\">\n Tab 2 content\n </sky-vertical-tab>\n <sky-vertical-tab\n tabHeading=\"A very long tab heading that wraps when the width is constrained\"\n [disabled]=\"true\"\n >\n Tab 3 content\n </sky-vertical-tab>\n</sky-vertical-tabset>\n" }]
14804
14804
  }] });
14805
14805
 
14806
14806
  /**
@@ -14848,7 +14848,7 @@ class TabsVerticalTabsGroupedExampleComponent {
14848
14848
  ];
14849
14849
  }
14850
14850
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabsVerticalTabsGroupedExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
14851
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: TabsVerticalTabsGroupedExampleComponent, isStandalone: true, selector: "app-tabs-vertical-tabs-grouped-example", ngImport: i0, template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-group\" showTabsText=\"Tab list\">\n @for (group of groups; track group) {\n <sky-vertical-tabset-group\n [groupHeading]=\"group.heading\"\n [open]=\"group.isOpen\"\n [disabled]=\"group.isDisabled\"\n >\n @for (tab of group.subTabs; track tab) {\n <sky-vertical-tab\n [active]=\"tab.active\"\n [tabHeading]=\"tab.tabHeading\"\n [tabHeaderCount]=\"tab.tabHeaderCount\"\n [disabled]=\"tab.disabled\"\n >\n {{ tab.content }}\n </sky-vertical-tab>\n }\n </sky-vertical-tabset-group>\n }\n</sky-vertical-tabset>\n", dependencies: [{ kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i1$2.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent"], outputs: ["activeChange"] }, { kind: "component", type: i1$2.λ7, selector: "sky-vertical-tabset-group", inputs: ["disabled", "groupHeading", "open"] }, { kind: "component", type: i1$2.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
14851
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: TabsVerticalTabsGroupedExampleComponent, isStandalone: true, selector: "app-tabs-vertical-tabs-grouped-example", ngImport: i0, template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-group\" showTabsText=\"Tab list\">\n @for (group of groups; track group) {\n <sky-vertical-tabset-group\n [groupHeading]=\"group.heading\"\n [open]=\"group.isOpen\"\n [disabled]=\"group.isDisabled\"\n >\n @for (tab of group.subTabs; track tab) {\n <sky-vertical-tab\n [active]=\"tab.active\"\n [tabHeading]=\"tab.tabHeading\"\n [tabHeaderCount]=\"tab.tabHeaderCount\"\n [disabled]=\"tab.disabled\"\n >\n {{ tab.content }}\n </sky-vertical-tab>\n }\n </sky-vertical-tabset-group>\n }\n</sky-vertical-tabset>\n", dependencies: [{ kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i1$2.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent", "tabWidth"], outputs: ["activeChange"] }, { kind: "component", type: i1$2.λ7, selector: "sky-vertical-tabset-group", inputs: ["disabled", "groupHeading", "open"] }, { kind: "component", type: i1$2.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
14852
14852
  }
14853
14853
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabsVerticalTabsGroupedExampleComponent, decorators: [{
14854
14854
  type: Component,
@@ -14908,7 +14908,7 @@ class TabsVerticalTabsMixedExampleComponent {
14908
14908
  ];
14909
14909
  }
14910
14910
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabsVerticalTabsMixedExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
14911
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: TabsVerticalTabsMixedExampleComponent, isStandalone: true, selector: "app-tabs-vertical-tabs-mixed-example", ngImport: i0, template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-mixed\" showTabsText=\"Tab list\">\n @for (group of groupedTabs; track group) {\n <sky-vertical-tabset-group\n [groupHeading]=\"group.heading\"\n [open]=\"group.isOpen\"\n [disabled]=\"group.isDisabled\"\n >\n @for (tab of group.subTabs; track tab) {\n <sky-vertical-tab [active]=\"tab.active\" [tabHeading]=\"tab.tabHeading\">\n {{ tab.content }}\n </sky-vertical-tab>\n }\n </sky-vertical-tabset-group>\n }\n\n <sky-vertical-tab tabHeading=\"Tab 1\"> Tab 1 Content </sky-vertical-tab>\n\n <sky-vertical-tab tabHeading=\"Tab 2\" [tabHeaderCount]=\"3\">\n Tab 2 Content\n </sky-vertical-tab>\n\n <sky-vertical-tab tabHeading=\"Tab 3\" [disabled]=\"true\">\n Tab 3 Content\n </sky-vertical-tab>\n</sky-vertical-tabset>\n", dependencies: [{ kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i1$2.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent"], outputs: ["activeChange"] }, { kind: "component", type: i1$2.λ7, selector: "sky-vertical-tabset-group", inputs: ["disabled", "groupHeading", "open"] }, { kind: "component", type: i1$2.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
14911
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: TabsVerticalTabsMixedExampleComponent, isStandalone: true, selector: "app-tabs-vertical-tabs-mixed-example", ngImport: i0, template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-mixed\" showTabsText=\"Tab list\">\n @for (group of groupedTabs; track group) {\n <sky-vertical-tabset-group\n [groupHeading]=\"group.heading\"\n [open]=\"group.isOpen\"\n [disabled]=\"group.isDisabled\"\n >\n @for (tab of group.subTabs; track tab) {\n <sky-vertical-tab [active]=\"tab.active\" [tabHeading]=\"tab.tabHeading\">\n {{ tab.content }}\n </sky-vertical-tab>\n }\n </sky-vertical-tabset-group>\n }\n\n <sky-vertical-tab tabHeading=\"Tab 1\"> Tab 1 Content </sky-vertical-tab>\n\n <sky-vertical-tab tabHeading=\"Tab 2\" [tabHeaderCount]=\"3\">\n Tab 2 Content\n </sky-vertical-tab>\n\n <sky-vertical-tab tabHeading=\"Tab 3\" [disabled]=\"true\">\n Tab 3 Content\n </sky-vertical-tab>\n</sky-vertical-tabset>\n", dependencies: [{ kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i1$2.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent", "tabWidth"], outputs: ["activeChange"] }, { kind: "component", type: i1$2.λ7, selector: "sky-vertical-tabset-group", inputs: ["disabled", "groupHeading", "open"] }, { kind: "component", type: i1$2.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
14912
14912
  }
14913
14913
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabsVerticalTabsMixedExampleComponent, decorators: [{
14914
14914
  type: Component,