Pull request #1554: Release/patch 12.0.4

Merge in OUI/oblique from release/patch_12.0.4 to master * commit 'a4fb2ec22bf7f8aac93d864746eed76da170c1eb': chore(toolchain): release version 12.0.4 chore(toolchain): update dependencies and refactor accordingly fix(service-navigation/web-component): add missing styles feat(sds/material): add stretchTabs example for tabs fix(oblique/material): deactivate stretchTabs per default fix(oblique/material): add missing theme for pseudo-checkboxes fix(service-navigation/web-component): add missing default values fix(oblique/service-navigation): change `flex` to `inline-flex` for authentication widget fix(oblique/material): add missing shadow to mat-menu fix(oblique/schematics): provide `provideHttpClient` instead of deprecated `HttpClientModule`
oblique-bit · Nov 29, 2024 · faa7c4d · faa7c4d
2 parents 48b3bdf + a4fb2ec
commit faa7c4d
Show file tree

Hide file tree

Showing 37 changed files with 352 additions and 269 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "title": "Oblique",
   "name": "oblique",
-  "version": "12.0.3",
+  "version": "12.0.4",
   "license": "MIT",
   "organization": {
     "name": "Federal Office of Information Technology, Systems and Telecommunication FOITT",
@@ -47,12 +47,12 @@
     "@angular/common": "^18.2.4",
     "@angular/compiler": "^18.2.4",
     "@angular/core": "^18.2.4",
-    "@angular/forms": "^18.2.12",
+    "@angular/forms": "^18.2.13",
     "@angular/material": "^18.2.4",
     "@angular/material-moment-adapter": "^18.2.14",
     "@angular/platform-browser": "^18.2.4",
-    "@angular/platform-browser-dynamic": "^18.2.12",
-    "@angular/router": "^18.2.12",
+    "@angular/platform-browser-dynamic": "^18.2.13",
+    "@angular/router": "^18.2.13",
     "@ngx-translate/core": "^15.0.0",
     "@popperjs/core": "^2.11.8",
     "ajv": "^8.17.1",
@@ -70,12 +70,12 @@
     "@angular-devkit/core": "^18.2.4",
     "@angular-eslint/eslint-plugin": "^18.3.1",
     "@angular-eslint/eslint-plugin-template": "^18.3.1",
-    "@angular-eslint/template-parser": "^18.4.1",
+    "@angular-eslint/template-parser": "^18.4.2",
     "@angular/cli": "^18.2.12",
-    "@angular/compiler-cli": "^18.2.12",
+    "@angular/compiler-cli": "^18.2.13",
     "@types/jest": "^29.5.14",
     "@types/js-cookie": "^3.0.6",
-    "@types/node": "^20.17.6",
+    "@types/node": "^20.17.9",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "chalk": "^4.1.2",
@@ -85,8 +85,8 @@
     "jest": "^29.7.0",
     "jest-sonar": "^0.2.16",
     "lint-staged": "^15.2.10",
-    "prettier": "^3.3.3",
-    "stylelint": "^16.10.0",
+    "prettier": "^3.4.1",
+    "stylelint": "^16.11.0",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-scss": "^6.10.0",

diff --git a/projects/cli/package.json b/projects/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oblique/cli",
-  "version": "12.0.3",
+  "version": "12.0.4",
   "description": "Command Line Interface to manage Oblique projects",
   "keywords": [
     "ob",

diff --git a/projects/cli/sonar-project.properties b/projects/cli/sonar-project.properties
@@ -1,6 +1,6 @@
 sonar.projectName=@oblique/cli
 sonar.projectKey=oblique_cli
-sonar.projectVersion=12.0.3
+sonar.projectVersion=12.0.4
 sonar.typescript.lcov.reportPaths=coverage/cli/lcov.info
 sonar.testExecutionReportPaths=coverage/cli/sqr.xml
 sonar.tests=projects/cli/src

diff --git a/projects/design-system/package.json b/projects/design-system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oblique/design-system",
-  "version": "12.0.3",
+  "version": "12.0.4",
   "scripts": {
     "lint": "ts-node scripts/lint.ts",
     "format": "ts-node scripts/lint.ts --fix",

diff --git a/projects/design-system/sonar-project.properties b/projects/design-system/sonar-project.properties
@@ -1,6 +1,6 @@
 sonar.projectName=@oblique/design-system
 sonar.projectKey=oblique_design-system
-sonar.projectVersion=12.0.3
+sonar.projectVersion=12.0.4
 sonar.typescript.lcov.reportPaths=coverage/design-system/lcov.info
 sonar.testExecutionReportPaths=coverage/design-system/sqr.xml
 sonar.tests=projects/design-system/src/lib

diff --git a/projects/oblique/CHANGELOG.md b/projects/oblique/CHANGELOG.md
@@ -1,3 +1,13 @@
+# [12.0.4](https://github.com/oblique-bit/oblique/compare/12.0.3...12.0.4) (2024-11-29)
+
+## Bug Fixes
+
+- **material:** deactivate stretchTabs per default ([d7366cdd](https://github.com/oblique-bit/oblique/commit/d7366cdd33ec09f3c6b3678d3ae173bc21c006f1))
+- **material:** add missing theme for pseudo-checkboxes ([183eb334](https://github.com/oblique-bit/oblique/commit/183eb33401c4dc23268cd81c1408f685066aaf99))
+- **material:** add missing shadow to mat-menu ([d65e6d2f](https://github.com/oblique-bit/oblique/commit/d65e6d2f3a5a6a3cf9c8947ec7c7918bbbc6c917))
+- **schematics:** provide `provideHttpClient` instead of deprecated `HttpClientModule` ([5924c7da](https://github.com/oblique-bit/oblique/commit/5924c7dacd226eb280624bc3992336619ea87033))
+- **service-navigation:** change `flex` to `inline-flex` for authentication widget ([e7c5e361](https://github.com/oblique-bit/oblique/commit/e7c5e361b077a756d17145459838e213d1ac5685))
+
 # [12.0.3](https://github.com/oblique-bit/oblique/compare/12.0.2...12.0.3) (2024-11-22)
 
 ## Bug Fixes

diff --git a/projects/oblique/package.json b/projects/oblique/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oblique/oblique",
-  "version": "12.0.3",
+  "version": "12.0.4",
   "publishConfig": {
     "registry": "https://registry.npmjs.com/"
   },
@@ -39,7 +39,7 @@
     "rxjs": "^7.0.0"
   },
   "dependencies": {
-    "@angular-eslint/schematics": "^18.4.1",
+    "@angular-eslint/schematics": "^18.4.2",
     "@angular/cdk": "^18.0.0 || ^19.0.0",
     "@schematics/angular": "^18.2.4",
     "ansi-colors": "^4.1.3",

diff --git a/projects/oblique/schematics/index/ng-add/rules/locales.ts b/projects/oblique/schematics/index/ng-add/rules/locales.ts
@@ -2,7 +2,7 @@ import {Rule, SchematicContext, Tree, chain} from '@angular-devkit/schematics';
 import {insertImport} from '@angular/cdk/schematics';
 import {addImportToModule, addProviderToModule} from '@schematics/angular/utility/ast-utils';
 import {Change, InsertChange} from '@schematics/angular/utility/change';
-import {adaptInsertChange, addDependency, appModulePath, applyChanges, createSrcFile, importModuleInRoot} from '../ng-add-utils';
+import {adaptInsertChange, addDependency, appModulePath, applyChanges, createSrcFile} from '../ng-add-utils';
 import {ObliquePackage, addFile, createSafeRule, infoMigration, readFile} from '../../utils';
 
 export function addLocales(locales: string[]): Rule {
@@ -73,7 +73,6 @@ function addTranslation(locales: string[]): Rule {
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	return createSafeRule((tree: Tree, _context: SchematicContext) => {
 		addDependency(tree, '@ngx-translate/core');
-		importModuleInRoot(tree, 'HttpClientModule', '@angular/common/http');
 		locales.map(locale => locale.split('-')[0]).forEach((lang: string) => addFile(tree, `src/assets/i18n/${lang}.json`, '{}'));
 		addTranslationToImports(tree);
 		return tree;

diff --git a/projects/oblique/schematics/index/ng-add/rules/obliqueFeatures.ts b/projects/oblique/schematics/index/ng-add/rules/obliqueFeatures.ts
@@ -72,10 +72,23 @@ function addInterceptors(httpInterceptors: boolean): Rule {
 			const obliqueInterceptorProvider = '{provide: HTTP_INTERCEPTORS, useClass: ObHttpApiInterceptor, multi: true}';
 			const sourceFile = createSrcFile(tree, appModulePath);
 			const changes = addProviderToModule(sourceFile, appModulePath, obliqueInterceptorProvider, ObliquePackage)
-				.concat(insertImport(sourceFile, appModulePath, 'HTTP_INTERCEPTORS', '@angular/common/http'))
+				.concat(addProviderToModule(sourceFile, appModulePath, 'provideHttpClient(withInterceptorsFromDi())', '@angular/common/http'))
 				.filter((change: Change) => change instanceof InsertChange)
-				.map((change: InsertChange) => adaptInsertChange(tree, change, obliqueInterceptorProvider, obliqueInterceptorModuleName));
-
+				.map((change: InsertChange) => adaptInsertChange(tree, change, obliqueInterceptorProvider, obliqueInterceptorModuleName))
+				.map((change: InsertChange) =>
+					adaptInsertChange(
+						tree,
+						change,
+						'provideHttpClient(withInterceptorsFromDi())',
+						'provideHttpClient, HTTP_INTERCEPTORS, withInterceptorsFromDi'
+					)
+				);
+			tree = applyChanges(tree, appModulePath, changes);
+		} else {
+			const sourceFile = createSrcFile(tree, appModulePath);
+			const changes = addProviderToModule(sourceFile, appModulePath, 'provideHttpClient()', '@angular/common/http')
+				.filter((change: Change) => change instanceof InsertChange)
+				.map((change: InsertChange) => adaptInsertChange(tree, change, 'provideHttpClient()', 'provideHttpClient'));
 			tree = applyChanges(tree, appModulePath, changes);
 		}
 		return tree;

diff --git a/projects/oblique/sonar-project.properties b/projects/oblique/sonar-project.properties
@@ -1,6 +1,6 @@
 sonar.projectName=@oblique/oblique
 sonar.projectKey=oblique_oblique
-sonar.projectVersion=12.0.3
+sonar.projectVersion=12.0.4
 sonar.typescript.lcov.reportPaths=coverage/oblique/lcov.info
 sonar.testExecutionReportPaths=coverage/oblique/sqr.xml
 sonar.tests=projects/oblique/src/lib

diff --git a/...rc/lib/service-navigation/authentication/service-navigation-authentication.component.scss b/...rc/lib/service-navigation/authentication/service-navigation-authentication.component.scss
@@ -5,7 +5,7 @@
 	padding-left: variables.$ob-spacing-sm;
 
 	a.ob-button[id*="login"] {
-		display: flex;
+		display: inline-flex;
 		flex-direction: row-reverse;
 
 		&.mat-mdc-button > .mat-icon {

diff --git a/projects/oblique/src/lib/utilities.model.ts b/projects/oblique/src/lib/utilities.model.ts
@@ -4,6 +4,7 @@ import {MatRadioDefaultOptions} from '@angular/material/radio';
 import {StepperOptions} from '@angular/cdk/stepper';
 import {ObEPamsEnvironment} from './service-navigation/service-navigation.model';
 import {MatSlideToggleDefaultOptions} from '@angular/material/slide-toggle';
+import {MatTabsConfig} from '@angular/material/tabs';
 
 export interface ObIBanner {
 	text: string;
@@ -22,4 +23,5 @@ export interface ObIMaterialConfig {
 	MAT_CHECKBOX_OPTIONS?: MatCheckboxDefaultOptions;
 	MAT_RADIO_OPTIONS?: MatRadioDefaultOptions;
 	MAT_SLIDE_TOGGLE_OPTIONS?: MatSlideToggleDefaultOptions;
+	MAT_TABS_CONFIG?: MatTabsConfig;
 }
diff --git a/projects/oblique/src/lib/utilities.spec.ts b/projects/oblique/src/lib/utilities.spec.ts
@@ -22,8 +22,10 @@ import {
 	radioOptionsProvider,
 	slideToggleOptionsProvider,
 	stepperOptionsOptionsProvider,
+	tabsOptionsProvider,
 	windowProvider
 } from './utilities';
+import {MAT_TABS_CONFIG} from '@angular/material/tabs';
 
 describe('utilities', () => {
 	describe('windowProvider', () => {
@@ -176,9 +178,19 @@ describe('utilities', () => {
 		});
 	});
 
+	describe('tabsOptionsProvider', () => {
+		it('should return default config without parameters', () => {
+			expect(tabsOptionsProvider()).toEqual({stretchTabs: false});
+		});
+
+		it('should return given config when provided as parameters', () => {
+			expect(tabsOptionsProvider({MAT_TABS_CONFIG: {stretchTabs: true}})).toEqual({stretchTabs: true});
+		});
+	});
+
 	describe('obliqueProviders', () => {
-		it('should return 7 configurations', () => {
-			expect(obliqueProviders().length).toBe(7);
+		it('should return 8 configurations', () => {
+			expect(obliqueProviders().length).toBe(8);
 		});
 
 		it.each([
@@ -187,6 +199,7 @@ describe('utilities', () => {
 			MAT_CHECKBOX_DEFAULT_OPTIONS,
 			MAT_RADIO_DEFAULT_OPTIONS,
 			MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS,
+			MAT_TABS_CONFIG,
 			WINDOW,
 			MATERIAL_SANITY_CHECKS
 		])('should contain ½s', provide => {

diff --git a/projects/oblique/src/lib/utilities.ts b/projects/oblique/src/lib/utilities.ts
@@ -14,6 +14,7 @@ import {ObIBanner, ObIMaterialConfig, ObIPamsConfiguration} from './utilities.mo
 import {ObCheckboxModule} from './checkbox/checkbox.module';
 import {ObFormFieldModule} from './form-field/form-field.module';
 import {MATERIAL_SANITY_CHECKS} from '@angular/material/core';
+import {MAT_TABS_CONFIG, MatTabsConfig} from '@angular/material/tabs';
 
 export const WINDOW = new InjectionToken<Window>('Window');
 export const OB_BANNER = new InjectionToken<ObIBanner>('Banner');
@@ -66,6 +67,10 @@ export function slideToggleOptionsProvider(config?: ObIMaterialConfig): MatSlide
 	return config?.MAT_SLIDE_TOGGLE_OPTIONS || {color: 'primary'};
 }
 
+export function tabsOptionsProvider(config?: ObIMaterialConfig): MatTabsConfig {
+	return config?.MAT_TABS_CONFIG || {stretchTabs: false};
+}
+
 export const OB_MATERIAL_CONFIG = new InjectionToken<ObIMaterialConfig>('ObIMaterialConfig');
 
 export function obliqueProviders(): Provider[] {
@@ -75,6 +80,7 @@ export function obliqueProviders(): Provider[] {
 		{provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useFactory: checkboxOptionsProvider, deps: [[new Optional(), OB_MATERIAL_CONFIG]]},
 		{provide: MAT_RADIO_DEFAULT_OPTIONS, useFactory: radioOptionsProvider, deps: [[new Optional(), OB_MATERIAL_CONFIG]]},
 		{provide: MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS, useFactory: slideToggleOptionsProvider, deps: [[new Optional(), OB_MATERIAL_CONFIG]]},
+		{provide: MAT_TABS_CONFIG, useFactory: tabsOptionsProvider, deps: [[new Optional(), OB_MATERIAL_CONFIG]]},
 		{provide: WINDOW, useFactory: windowProvider, deps: [DOCUMENT]},
 		{provide: MATERIAL_SANITY_CHECKS, useValue: {theme: false}}
 	];

diff --git a/projects/oblique/src/lib/version.ts b/projects/oblique/src/lib/version.ts
@@ -1 +1 @@
-export const appVersion = '12.0.3';
+export const appVersion = '12.0.4';
diff --git a/projects/oblique/src/styles/scss/material/_mat-menu.scss b/projects/oblique/src/styles/scss/material/_mat-menu.scss
@@ -1,5 +1,5 @@
 @use "../core/mixins/shadow";
 
-.mat-mdc-menu-panel {
+.mat-mdc-menu-panel.mat-mdc-elevation-specific {
 	@include shadow.ob-shadow-default();
 }
diff --git a/projects/oblique/src/styles/scss/oblique-material.scss b/projects/oblique/src/styles/scss/oblique-material.scss
@@ -72,6 +72,7 @@ $theme-tabs: (
 @include mat.tabs-theme(mat.m2-define-light-theme($theme-tabs));
 @include mat.tooltip-theme(mat.m2-define-light-theme($theme));
 @include mat.option-theme(mat.m2-define-light-theme($theme));
+@include mat.pseudo-checkbox-theme(mat.m2-define-light-theme($theme));
 
 // import to overwrite mat-component-specifics
 @import "material/mat-autocomplete";

diff --git a/projects/sandbox-ssr/package.json b/projects/sandbox-ssr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sandbox-ssr",
-  "version": "12.0.3",
+  "version": "12.0.4",
   "scripts": {
     "start": "ng serve",
     "start-ssr": "node ../../dist/sandbox-ssr/server/server.mjs",
@@ -12,7 +12,7 @@
     "release": "ts-node scripts/release.ts"
   },
   "dependencies": {
-    "@angular/platform-server": "^18.2.12",
+    "@angular/platform-server": "^18.2.13",
     "@angular/ssr": "^18.2.12",
     "express": "^4.21.1"
   },

diff --git a/projects/sandbox-ssr/sonar-project.properties b/projects/sandbox-ssr/sonar-project.properties
@@ -1,6 +1,6 @@
 sonar.projectName=@oblique/sandbox-ssr
 sonar.projectKey=oblique_sandbox-ssr
-sonar.projectVersion=12.0.3
+sonar.projectVersion=12.0.4
 sonar.typescript.lcov.reportPaths=coverage/sandbox-ssr/lcov.info
 sonar.testExecutionReportPaths=coverage/sandbox-ssr/sqr.xml
 sonar.tests=projects/sandbox-ssr/src/app

diff --git a/projects/sandbox/package.json b/projects/sandbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sandbox",
-  "version": "12.0.3",
+  "version": "12.0.4",
   "scripts": {
     "start": "ng serve",
     "start-pams": "ng serve --configuration pams",

diff --git a/projects/sandbox/sonar-project.properties b/projects/sandbox/sonar-project.properties
@@ -1,6 +1,6 @@
 sonar.projectName=@oblique/sandbox
 sonar.projectKey=oblique_sandbox
-sonar.projectVersion=12.0.3
+sonar.projectVersion=12.0.4
 sonar.typescript.lcov.reportPaths=coverage/sandbox/lcov.info
 sonar.testExecutionReportPaths=coverage/sandbox/sqr.xml
 sonar.tests=projects/sandbox/src/app

diff --git a/projects/sds/.stylelintrc.yml b/projects/sds/.stylelintrc.yml
@@ -2,4 +2,5 @@ extends: "../../.stylelintrc.yml"
 rules:
   # rules that need some refactoring to be enabled
   no-descending-specificity: null
+  selector-id-pattern: null
   selector-class-pattern: ^([a-z][a-z0-9]*)([-_]{0,2}[a-z0-9]+)*$
diff --git a/projects/sds/CHANGELOG.md b/projects/sds/CHANGELOG.md
@@ -1,3 +1,9 @@
+# [12.0.4](https://github.com/oblique-bit/oblique/compare/12.0.3...12.0.4) (2024-11-29)
+
+## Features
+
+- **material:** add stretchTabs example for tabs ([d1a68625](https://github.com/oblique-bit/oblique/commit/d1a6862590932aded61d6574109925225992251a))
+
 # [12.0.1](https://github.com/oblique-bit/oblique/compare/12.0.0...12.0.1) (2024-11-01)
 
 ## Bug Fixes

diff --git a/projects/sds/package.json b/projects/sds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "swiss-design-system",
-  "version": "12.0.3",
+  "version": "12.0.4",
   "scripts": {
     "start": "ng serve",
     "lint": "ts-node scripts/lint.ts",

diff --git a/projects/sds/sonar-project.properties b/projects/sds/sonar-project.properties
@@ -1,6 +1,6 @@
 sonar.projectName=@oblique/sds
 sonar.projectKey=oblique_sds
-sonar.projectVersion=12.0.3
+sonar.projectVersion=12.0.4
 sonar.typescript.lcov.reportPaths=coverage/sds/lcov.info
 sonar.testExecutionReportPaths=coverage/sds/sqr.xml
 sonar.tests=projects/sds/src/app

diff --git a/...mples/code-examples/tabs/previews/stretched/tabs-example-stretched-preview.component.html b/...mples/code-examples/tabs/previews/stretched/tabs-example-stretched-preview.component.html
@@ -0,0 +1,5 @@
+<mat-tab-group mat-stretch-tabs="true">
+	<mat-tab label="First"> Content with headerPosition below 1 </mat-tab>
+	<mat-tab label="Second"> Content 2 </mat-tab>
+	<mat-tab label="Third"> Content 3 </mat-tab>
+</mat-tab-group>
diff --git a/...xamples/code-examples/tabs/previews/stretched/tabs-example-stretched-preview.component.ts b/...xamples/code-examples/tabs/previews/stretched/tabs-example-stretched-preview.component.ts
@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+import {MatTabsModule} from '@angular/material/tabs';
+
+@Component({
+	selector: 'app-tabs-example-stretched-preview',
+	templateUrl: './tabs-example-stretched-preview.component.html',
+	standalone: true,
+	imports: [MatTabsModule]
+})
+export class TabsExampleStretchedPreviewComponent {}
diff --git a/projects/sds/src/app/code-examples/code-examples/tabs/tabs-code-examples.component.spec.ts b/projects/sds/src/app/code-examples/code-examples/tabs/tabs-code-examples.component.spec.ts
@@ -36,7 +36,7 @@ describe(TabsCodeExamplesComponent.name, () => {
 		expect(component).toBeTruthy();
 	});
 
-	it('should have 2 CodeExampleComponent', () => {
-		expect(fixture.debugElement.queryAll(By.directive(CodeExampleComponent)).length).toBe(2);
+	it('should have 3 CodeExampleComponent', () => {
+		expect(fixture.debugElement.queryAll(By.directive(CodeExampleComponent)).length).toBe(3);
 	});
 });
diff --git a/projects/sds/src/app/code-examples/code-examples/tabs/tabs-code-examples.component.ts b/projects/sds/src/app/code-examples/code-examples/tabs/tabs-code-examples.component.ts
@@ -5,6 +5,7 @@ import {CommonModule} from '@angular/common';
 import {CodeExampleComponent} from '../../code-example/code-example.component';
 import {TabsExampleBasicPreviewComponent} from './previews/basic/tabs-example-basic-preview.component';
 import {TabsExampleVariationsPreviewComponent} from './previews/variations/tabs-example-variations-preview.component';
+import {TabsExampleStretchedPreviewComponent} from './previews/stretched/tabs-example-stretched-preview.component';
 
 @Component({
 	selector: 'app-code-example-tabs',
@@ -34,6 +35,15 @@ export class TabsCodeExamplesComponent extends CodeExamples {
 				this.getSnippet('tabs', 'variations/tabs-example-variations-preview.component.ts', 'TS'),
 				this.getSnippet('tabs', 'variations/tabs-example-variations-preview.component.scss', 'SCSS')
 			]
+		},
+		{
+			component: TabsExampleStretchedPreviewComponent,
+			idParts: ['stretched'],
+			title: 'Tabs stretched',
+			snippets: [
+				this.getSnippet('tabs', 'stretched/tabs-example-stretched-preview.component.html', 'HTML'),
+				this.getSnippet('tabs', 'stretched/tabs-example-stretched-preview.component.ts', 'TS')
+			]
 		}
 	];
 }