Pull request #1575: Release/patch 12.2.1

Merge in OUI/oblique from release/patch_12.2.1 to master * commit 'dc6294626482aa1fff3646a6a95c8f6bae5e8e1a': chore(toolchain): release version 12.2.1 chore(toolchain): update dependencies and refactor accordingly fix(oblique/master-layout): ensure that the main navigation is scrollable even if initially empty fix(oblique/material): make collapsed mode support th cells fix(sds/text-page): scroll to fragment if present fix(sds/text-page): preserve fragments when navigating feat(sandbox/material): add an example with a card larger that its image fix(oblique/material): don't stretch images in cards fix(sds/icon): remove icon color example
oblique-bit · Dec 20, 2024 · db1c373 · db1c373
2 parents fc51a4b + dc62946
commit db1c373
Show file tree

Hide file tree

Showing 33 changed files with 410 additions and 322 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.2.0",
+  "version": "12.2.1",
   "license": "MIT",
   "organization": {
     "name": "Federal Office of Information Technology, Systems and Telecommunication FOITT",
@@ -75,7 +75,7 @@
     "@angular/compiler-cli": "^18.2.13",
     "@types/jest": "^29.5.14",
     "@types/js-cookie": "^3.0.6",
-    "@types/node": "^20.17.9",
+    "@types/node": "^20.17.10",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "chalk": "^4.1.2",
@@ -84,9 +84,9 @@
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "jest-sonar": "^0.2.16",
-    "lint-staged": "^15.2.10",
+    "lint-staged": "^15.2.11",
     "prettier": "^3.4.2",
-    "stylelint": "^16.11.0",
+    "stylelint": "^16.12.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.2.0",
+  "version": "12.2.1",
   "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.2.0
+sonar.projectVersion=12.2.1
 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.2.0",
+  "version": "12.2.1",
   "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.2.0
+sonar.projectVersion=12.2.1
 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,11 @@
+# [12.2.1](https://github.com/oblique-bit/oblique/compare/12.2.0...12.2.1) (2024-12-20)
+
+## Bug Fixes
+
+- **master-layout:** ensure that the main navigation is scrollable even if initially empty ([ba829189](https://github.com/oblique-bit/oblique/commit/ba8291890f6bb4fc15858a9322712101b41a099c))
+- **material:** make collapsed mode support th cells ([bcbd8778](https://github.com/oblique-bit/oblique/commit/bcbd877884a956448bcd611c449b47e84ad9eb9d))
+- **material:** don't stretch images in cards ([203a2617](https://github.com/oblique-bit/oblique/commit/203a26179a7ebce6d3628f92e99ac4b9b7d7f30e))
+
 # [12.2.0](https://github.com/oblique-bit/oblique/compare/12.1.0...12.2.0) (2024-12-16)
 
 ## Features

diff --git a/projects/oblique/package.json b/projects/oblique/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oblique/oblique",
-  "version": "12.2.0",
+  "version": "12.2.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.com/"
   },

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.2.0
+sonar.projectVersion=12.2.1
 sonar.typescript.lcov.reportPaths=coverage/oblique/lcov.info
 sonar.testExecutionReportPaths=coverage/oblique/sqr.xml
 sonar.tests=projects/oblique/src/lib

diff --git a/...ue/src/lib/master-layout/master-layout-navigation/master-layout-navigation.component.html b/...ue/src/lib/master-layout/master-layout-navigation/master-layout-navigation.component.html
@@ -15,6 +15,7 @@ <h2 id="ob-navigationlabel" class="ob-screen-reader-only" *ngIf="initializedLink
 <ng-content *ngIf="!initializedLinks.length" />
 <nav *ngIf="initializedLinks.length" aria-labelledby="ob-navigationlabel">
 	<ul
+		#mainNav
 		aria-labelledby="ob-navigationlabel"
 		id="navigation"
 		class="ob-main-nav"

diff --git a/...ique/src/lib/master-layout/master-layout-navigation/master-layout-navigation.component.ts b/...ique/src/lib/master-layout/master-layout-navigation/master-layout-navigation.component.ts
@@ -11,6 +11,7 @@ import {
 	OnInit,
 	Optional,
 	Renderer2,
+	ViewChild,
 	ViewEncapsulation
 } from '@angular/core';
 import {IsActiveMatchOptions, NavigationEnd, Router} from '@angular/router';
@@ -54,7 +55,9 @@ export class ObMasterLayoutNavigationComponent implements OnChanges, OnInit, Aft
 	@HostBinding('class.navigation-scrollable') @HostBinding('class.navigation-scrollable-active') isScrollable: boolean;
 	routerLinkActiveOptions: IsActiveMatchOptions = {paths: 'subset', queryParams: 'subset', fragment: 'ignored', matrixParams: 'ignored'};
 	private static readonly buttonWidth = 30;
-	private nav: HTMLElement;
+
+	@ViewChild('mainNav') private readonly nav?: ElementRef<HTMLElement>;
+
 	private readonly currentParentAncestors: BehaviorSubject<ObNavigationLink[]> = new BehaviorSubject<ObNavigationLink[]>([]);
 	private readonly currentParentLinkSource: BehaviorSubject<ObNavigationLink> = new BehaviorSubject<ObNavigationLink>(
 		new ObNavigationLink()
@@ -93,7 +96,6 @@ export class ObMasterLayoutNavigationComponent implements OnChanges, OnInit, Aft
 	}
 
 	ngAfterViewInit(): void {
-		this.nav = this.el.nativeElement.querySelector('.ob-main-nav:not(.ob-sub-nav)');
 		this.masterLayout.navigation.scrolled.pipe(takeUntil(this.unsubscribe)).subscribe(offset => this.updateScroll(offset));
 	}
 
@@ -279,9 +281,12 @@ export class ObMasterLayoutNavigationComponent implements OnChanges, OnInit, Aft
 			if (scrollMode === ObEScrollMode.DISABLED) {
 				this.isScrollable = false;
 			} else {
-				const childWidth = Array.from(this.nav.children).reduce((total, el: HTMLElement) => total + el.clientWidth, 0);
-				this.maxScroll = Math.max(0, -(this.nav.clientWidth - childWidth - 2 * ObMasterLayoutNavigationComponent.buttonWidth));
-				this.isScrollable = scrollMode === ObEScrollMode.ENABLED ? true : childWidth > this.nav.clientWidth;
+				const childWidth = Array.from(this.nav.nativeElement.children).reduce((total, el: HTMLElement) => total + el.clientWidth, 0);
+				this.maxScroll = Math.max(
+					0,
+					-(this.nav.nativeElement.clientWidth - childWidth - 2 * ObMasterLayoutNavigationComponent.buttonWidth)
+				);
+				this.isScrollable = scrollMode === ObEScrollMode.ENABLED ? true : childWidth > this.nav.nativeElement.clientWidth;
 			}
 			this.updateScroll(this.isScrollable ? 0 : -this.currentScroll);
 		}
@@ -299,6 +304,6 @@ export class ObMasterLayoutNavigationComponent implements OnChanges, OnInit, Aft
 		this.currentScroll += delta;
 		this.currentScroll = Math.max(0, this.currentScroll);
 		this.currentScroll = Math.min(this.currentScroll, this.maxScroll);
-		this.renderer.setStyle(this.nav.children[0], 'margin-left', `-${this.currentScroll}px`);
+		this.renderer.setStyle(this.nav.nativeElement.children[0], 'margin-left', `-${this.currentScroll}px`);
 	}
 }
diff --git a/projects/oblique/src/lib/version.ts b/projects/oblique/src/lib/version.ts
@@ -1 +1 @@
-export const appVersion = '12.2.0';
+export const appVersion = '12.2.1';
diff --git a/projects/oblique/src/styles/scss/core/mixins/_table.scss b/projects/oblique/src/styles/scss/core/mixins/_table.scss
@@ -20,7 +20,9 @@
 			left: -9999px;
 		}
 
-		td {
+		td,
+		tbody > tr > th,
+		tfoot > tr > th {
 			position: relative;
 			margin-left: variables.$ob-table-collapsed-header-width;
 			min-height: calc(

diff --git a/projects/oblique/src/styles/scss/material/_mat-card.scss b/projects/oblique/src/styles/scss/material/_mat-card.scss
@@ -165,7 +165,9 @@
 
 	.mat-mdc-card-image,
 	.mdc-card__media {
-		width: 100%;
+		max-width: 100%;
+		height: auto;
+		align-self: center;
 	}
 }
 

diff --git a/projects/sandbox-ssr/package.json b/projects/sandbox-ssr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oblique/sandbox-ssr",
-  "version": "12.2.0",
+  "version": "12.2.1",
   "scripts": {
     "start": "ng serve",
     "start-ssr": "node ../../dist/sandbox-ssr/server/server.mjs",

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.2.0
+sonar.projectVersion=12.2.1
 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/CHANGELOG.md b/projects/sandbox/CHANGELOG.md
@@ -1,3 +1,9 @@
+# [12.2.1](https://github.com/oblique-bit/oblique/compare/12.2.0...12.2.1) (2024-12-20)
+
+## Features
+
+- **material:** add an example with a card larger that its image ([9ddea5e4](https://github.com/oblique-bit/oblique/commit/9ddea5e48d6980fb13cdc43423bf53758000253f))
+
 # [12.1.0](https://github.com/oblique-bit/oblique/compare/12.0.4...12.1.0) (2024-12-09)
 
 ## Bug Fixes

diff --git a/projects/sandbox/package.json b/projects/sandbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oblique/sandbox",
-  "version": "12.2.0",
+  "version": "12.2.1",
   "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.2.0
+sonar.projectVersion=12.2.1
 sonar.typescript.lcov.reportPaths=coverage/sandbox/lcov.info
 sonar.testExecutionReportPaths=coverage/sandbox/sqr.xml
 sonar.tests=projects/sandbox/src/app

diff --git a/projects/sandbox/src/app/material/card/card.component.html b/projects/sandbox/src/app/material/card/card.component.html
@@ -29,6 +29,33 @@ <h2 class="page-header">Card</h2>
 					<button type="button" mat-button obButton="primary">Share</button>
 				</mat-card-actions>
 			</mat-card>
+			<mat-card>
+				<img
+					*ngIf="pictureVisible"
+					mat-card-image
+					alt="A person in a space suit holding luminous balloons"
+					ngSrc="assets/images/alex-shuper_person-in-a-space-suit.jpg"
+					[height]="200"
+					[width]="200"
+				/>
+				<ob-alert *ngIf="alertVisible" type="info"> New feature </ob-alert>
+				<mat-card-header *ngIf="headerVisible">
+					<div *ngIf="avatarVisible" mat-card-avatar></div>
+					<mat-card-title *ngIf="titleVisible">Default Card</mat-card-title>
+					<mat-card-subtitle *ngIf="subtitleVisible">Subtitle</mat-card-subtitle>
+				</mat-card-header>
+				<mat-card-content *ngIf="contentVisible">
+					<p>This card shows a small image.</p>
+					<div class="ob-signature" *ngIf="signatureVisible">
+						<span>OFIT</span>
+						<span>Last login 20.07.2022</span>
+					</div>
+				</mat-card-content>
+				<mat-card-actions *ngIf="actionsVisible">
+					<button type="button" mat-button obButton="secondary">Like</button>
+					<button type="button" mat-button obButton="primary">Share</button>
+				</mat-card-actions>
+			</mat-card>
 			<button type="button" mat-button obButton="primary" class="ob-button-card" [attr.disabled]="disabled ? '' : undefined">
 				<mat-card>
 					<img

diff --git a/projects/sds/CHANGELOG.md b/projects/sds/CHANGELOG.md
@@ -1,3 +1,11 @@
+# [12.2.1](https://github.com/oblique-bit/oblique/compare/12.2.0...12.2.1) (2024-12-20)
+
+## Bug Fixes
+
+- **icon:** remove icon color example ([27db13c5](https://github.com/oblique-bit/oblique/commit/27db13c57395782633e89f9dff2ff2ce03385d01))
+- **text-page:** scroll to fragment if present ([d9f81ce4](https://github.com/oblique-bit/oblique/commit/d9f81ce4e8596573c293a81ec26bb8340b0bb6f0))
+- **text-page:** preserve fragments when navigating ([97a9e045](https://github.com/oblique-bit/oblique/commit/97a9e045ec0038b867b43a75a5fba3cabbf9dd97))
+
 # [12.1.0](https://github.com/oblique-bit/oblique/compare/12.0.4...12.1.0) (2024-12-09)
 
 ## Bug Fixes

diff --git a/projects/sds/package.json b/projects/sds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oblique/sds",
-  "version": "12.2.0",
+  "version": "12.2.1",
   "scripts": {
     "start": "ng serve",
     "lint": "ts-node scripts/lint.ts",
@@ -14,7 +14,7 @@
     "release": "ts-node scripts/release.ts"
   },
   "dependencies": {
-    "highlight.js": "^11.10.0",
+    "highlight.js": "^11.11.0",
     "jquery": "^3.7.1",
     "raw-loader": "^4.0.2"
   },

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.2.0
+sonar.projectVersion=12.2.1
 sonar.typescript.lcov.reportPaths=coverage/sds/lcov.info
 sonar.testExecutionReportPaths=coverage/sds/sqr.xml
 sonar.tests=projects/sds/src/app

diff --git a/projects/sds/src/app/code-examples/code-examples/icons/icons-code-examples.component.spec.ts b/projects/sds/src/app/code-examples/code-examples/icons/icons-code-examples.component.spec.ts
@@ -8,7 +8,6 @@ import {By} from '@angular/platform-browser';
 import {IconsExampleIconsGalleryPreviewComponent} from './previews/icons-gallery/icons-example-icons-gallery-preview.component';
 import {IconsExampleFontSizePreviewComponent} from './previews/font-size/icons-example-font-size-preview.component';
 import {IconsExampleDefaultPreviewComponent} from './previews/default/icons-example-default-preview.component';
-import {IconsExampleColorPreviewComponent} from './previews/color/icons-example-color-preview.component';
 import {MatIcon} from '@angular/material/icon';
 import {ObMockTranslateService, WINDOW} from '@oblique/oblique';
 import {TranslateService} from '@ngx-translate/core';
@@ -35,8 +34,8 @@ describe(IconsCodeExamplesComponent.name, () => {
 		expect(component).toBeTruthy();
 	});
 
-	test(`that there are 4 ${CodeExampleComponent.name}s`, () => {
-		expect(fixture.debugElement.queryAll(By.directive(CodeExampleComponent)).length).toBe(4);
+	test(`that there are 3 ${CodeExampleComponent.name}s`, () => {
+		expect(fixture.debugElement.queryAll(By.directive(CodeExampleComponent)).length).toBe(3);
 	});
 
 	test(`that there is 1 ${IconsExampleIconsGalleryPreviewComponent.name}s`, () => {
@@ -51,11 +50,7 @@ describe(IconsCodeExamplesComponent.name, () => {
 		expect(fixture.debugElement.queryAll(By.directive(IconsExampleDefaultPreviewComponent)).length).toBe(1);
 	});
 
-	test(`that there is 1 ${IconsExampleColorPreviewComponent.name}s`, () => {
-		expect(fixture.debugElement.queryAll(By.directive(IconsExampleColorPreviewComponent)).length).toBe(1);
-	});
-
-	test(`that there are 706 ${MatIcon.name}s`, () => {
-		expect(fixture.debugElement.queryAll(By.directive(MatIcon)).length).toBe(706);
+	test(`that there are 702 ${MatIcon.name}s`, () => {
+		expect(fixture.debugElement.queryAll(By.directive(MatIcon)).length).toBe(702);
 	});
 });
diff --git a/projects/sds/src/app/code-examples/code-examples/icons/icons-code-examples.component.ts b/projects/sds/src/app/code-examples/code-examples/icons/icons-code-examples.component.ts
@@ -5,7 +5,6 @@ import {CommonModule} from '@angular/common';
 import {CodeExampleComponent} from '../../code-example/code-example.component';
 import {IconsExampleDefaultPreviewComponent} from './previews/default/icons-example-default-preview.component';
 import {IconsExampleFontSizePreviewComponent} from './previews/font-size/icons-example-font-size-preview.component';
-import {IconsExampleColorPreviewComponent} from './previews/color/icons-example-color-preview.component';
 import {IconsExampleIconsGalleryPreviewComponent} from './previews/icons-gallery/icons-example-icons-gallery-preview.component';
 
 @Component({
@@ -27,16 +26,6 @@ export class IconsCodeExamplesComponent extends CodeExamples {
 				this.getSnippet('icons', 'default/icons-example-default-preview.component.ts', 'TS')
 			]
 		},
-		{
-			component: IconsExampleColorPreviewComponent,
-			idParts: ['color'],
-			title: 'Icon Color',
-			snippets: [
-				this.getSnippet('icons', 'color/icons-example-color-preview.component.html', 'HTML'),
-				this.getSnippet('icons', 'color/icons-example-color-preview.component.scss', 'SCSS'),
-				this.getSnippet('icons', 'color/icons-example-color-preview.component.ts', 'TS')
-			]
-		},
 		{
 			component: IconsExampleFontSizePreviewComponent,
 			idParts: ['font', 'size'],

diff --git a/...de-examples/code-examples/icons/previews/color/icons-example-color-preview.component.html b/...de-examples/code-examples/icons/previews/color/icons-example-color-preview.component.html
diff --git a/...de-examples/code-examples/icons/previews/color/icons-example-color-preview.component.scss b/...de-examples/code-examples/icons/previews/color/icons-example-color-preview.component.scss
diff --git a/...code-examples/code-examples/icons/previews/color/icons-example-color-preview.component.ts b/...code-examples/code-examples/icons/previews/color/icons-example-color-preview.component.ts
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export const appVersion = '12.2.0';
		export const appVersion = '12.2.1';