merge main into release-3.0.0 (#1528)

.changeset/breezy-hotels-tap.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/modal): duplicate event firing

.changeset/clever-pandas-chew.md

@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+fix(core): replace font styles with actual formats

.changeset/eighty-mails-collect.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/menu-about): set index if selected is set on tab-item

.changeset/pink-spoons-obey.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/input): remove hover state from readonly and disabled variant

.changeset/tricky-hornets-work.md

@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+fix(core/dropdown): clean up disconnected dropdowns

.changeset/yellow-goats-wash.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/upload): disable file browser if control is disabled

.github/workflows/pr.yml

@@ -18,6 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     outputs:
       core_any_changed: ${{ steps.changes.outputs.core_any_changed }}
+      core_all_changed_files: ${{ steps.changes.outputs.core_all_changed_files }}
       aggrid_any_changed: ${{ steps.changes.outputs.aggrid_any_changed }}
       echarts_any_changed: ${{ steps.changes.outputs.echarts_any_changed }}
       docs_any_changed: ${{ steps.changes.outputs.docs_any_changed }}
@@ -195,3 +196,41 @@ jobs:
 
       - name: Test
         run: pnpm run test --cache-dir=.turbo --filter !\documentation
+
+  strict:
+    if: ${{ needs.changes.outputs.core_any_changed == 'true' }}
+    needs: [changes]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/workflows/actions/turbo
+      - name: Strict
+        id: report
+        env:
+          ALL_CHANGED_FILES: ${{ needs.changes.outputs.core_all_changed_files }}
+        run: pnpm --filter @siemens/ix exec strict-check ${ALL_CHANGED_FILES}
+
+      - name: Find Comment
+        uses: peter-evans/find-comment@v3
+        id: find-comment
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          comment-author: 'github-actions[bot]'
+          body-includes: '### Report of `strict` check'
+
+      - name: Delete comment
+        if: ${{ steps.report.outputs.has_errors != 'true' }}
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: 'delete-comment'
+          token: ${{ secrets.GITHUB_TOKEN }}
+          comment-id: ${{ steps.find-comment.outputs.comment-id }}
+
+      - name: Create or update comment
+        if: ${{ steps.report.outputs.has_errors == 'true' }}
+        uses: peter-evans/create-or-update-comment@v4
+        with:
+          comment-id: ${{ steps.find-comment.outputs.comment-id }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body: ${{ steps.report.outputs.body }}
+          edit-mode: replace

.npmrc

@@ -1,8 +1,21 @@
 registry=https://registry.npmjs.org
 @siemens:registry=https://registry.npmjs.org
-shamefully-hoist=true
 puppeteer_skip_chromium_download=true
 puppeteer_skip_chrome_headless_shell_download=true
 puppeteer_skip_download=true
 link-workspace-packages=deep
 prefer-workspace-packages=true
+
+# angular-test-app echarts dependency needs public hoisting
+public-hoist-pattern[]=zrender
+public-hoist-pattern[]=claygl
+
+# documentation
+public-hoist-pattern[]=@docusaurus/*
+public-hoist-pattern[]=hogan.js
+public-hoist-pattern[]=autocomplete.js
+public-hoist-pattern[]=mark.js
+public-hoist-pattern[]=lunr
+
+public-hoist-pattern[]=playwright
+public-hoist-pattern[]=eslint**

ix.code-workspace

@@ -52,10 +52,6 @@
       "name": "eslint-config",
       "path": "./packages/eslint-config-ix"
     },
-    {
-      "name": "example-styles",
-      "path": "./packages/example-styles"
-    },
     {
       "name": "figma-plugin",
       "path": "./packages/figma-plugin"

packages/aggrid/tests/aggrid.e2e.ts

@@ -13,8 +13,8 @@ regressionTest.describe('aggrid', () => {
   regressionTest('basic', async ({ page }) => {
     await page.goto('basic.html');
 
-    await page.getByRole('columnheader').nth(0).hover();
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    await page.getByRole('columnheader').nth(1).hover();
+    expect(await page.screenshot({ fullPage: true, animations: 'disabled' })).toMatchSnapshot();
   });
 
   regressionTest('filter', async ({ page }) => {
@@ -29,7 +29,7 @@ regressionTest.describe('aggrid', () => {
     const inputHandle = filterMenu.getByPlaceholder('Filter...');
     await inputHandle.fill('Test');
 
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    expect(await page.screenshot({ fullPage: true, animations: 'disabled' })).toMatchSnapshot();
   });
 
   regressionTest('editor', async ({ page }) => {
@@ -38,11 +38,11 @@ regressionTest.describe('aggrid', () => {
     const editorCellHandle = page.locator('.ag-cell-not-inline-editing[col-id="price"]').nth(0);
     await editorCellHandle.dblclick();
 
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    expect(await page.screenshot({ fullPage: true, animations: 'disabled' })).toMatchSnapshot();
   });
 
   regressionTest('pagination', async ({ page }) => {
     await page.goto('pagination.html');
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    expect(await page.screenshot({ fullPage: true, animations: 'disabled' })).toMatchSnapshot();
   });
 });

packages/angular-test-app/angular.json

@@ -8,6 +8,7 @@
     },
     "analytics": false
   },
+
   "newProjectRoot": "projects",
   "projects": {
     "angular-test-app": {
@@ -95,6 +96,7 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
+            "preserveSymlinks": true,
             "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "assets": [

packages/angular-test-app/package.json

@@ -21,12 +21,13 @@
     "@angular/router": "^18.1.2",
     "@siemens/ix": "workspace:*",
     "@siemens/ix-angular": "workspace:*",
+    "@siemens/ix-echarts": "workspace:*",
     "@siemens/ix-icons": "0.0.0-20240827135516",
     "ag-grid-angular": "^30.2.1",
     "ag-grid-community": "^32.0.2",
     "echarts": "5.4.3",
     "echarts-gl": "^2.0.9",
-    "example-styles": "workspace:*",
+    "html-test-app": "workspace:*",
     "ngx-echarts": "^18.0.0",
     "rxjs": "~7.8.1",
     "tslib": "^2.6.3",

packages/angular-test-app/scripts/copy-preview.mjs

@@ -6,10 +6,33 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { copyPreviewStyles } from 'example-styles';
 import path from 'path';
-
+import fs from 'fs';
+import fsp from 'fs/promises';
 const __dirname = path.resolve();
 
-const stylesPath = path.resolve(__dirname, 'src', 'preview-examples', 'styles');
-copyPreviewStyles(stylesPath);
+const previewPath = path.join(
+  __dirname,
+  'node_modules',
+  'html-test-app',
+  'src',
+  'preview-examples'
+);
+
+(async () => {
+  console.log('Copying preview styles to html-test-app...');
+  const cssFiles = fs
+    .readdirSync(previewPath)
+    .filter((f) => f.endsWith('.css'));
+
+  await Promise.all(
+    cssFiles.map((cssFile) =>
+      fsp.copyFile(
+        path.join(previewPath, cssFile),
+        path.join(__dirname, 'src', 'preview-examples', cssFile)
+      )
+    )
+  );
+
+  console.log('Done');
+})();

packages/angular-test-app/src/app/app.module.ts

@@ -190,6 +190,7 @@ import VerticalTabs from '../preview-examples/vertical-tabs';
 import VerticalTabsWithAvatar from '../preview-examples/vertical-tabs-with-avatar';
 import Workflow from '../preview-examples/workflow';
 import WorkflowVertical from '../preview-examples/workflow-vertical';
+import * as echarts from 'echarts';
 
 @NgModule({
   declarations: [
@@ -374,7 +375,7 @@ import WorkflowVertical from '../preview-examples/workflow-vertical';
     AgGridModule,
     FormsModule,
     NgxEchartsModule.forRoot({
-      echarts: () => import('echarts'),
+      echarts,
     }),
   ],
   providers: [],

packages/angular-test-app/src/preview-examples/about-and-legal.css

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+ix-application {
+  width: 100vw;
+  height: 100vh;
+}

packages/angular-test-app/src/preview-examples/about-and-legal.ts

@@ -12,7 +12,7 @@ import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: './about-and-legal.html',
-  styleUrls: ['./styles/application.css'],
+  styleUrls: ['./about-and-legal.css'],
 })
 export default class AboutAndLegal implements AfterViewInit {
   @ViewChild('menu', { read: ElementRef })

packages/angular-test-app/src/preview-examples/application-app-switch.css

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+ix-application {
+  width: 100vw;
+  height: 100vh;
+}

packages/angular-test-app/src/preview-examples/application-app-switch.ts

@@ -13,7 +13,7 @@ import { AppSwitchConfiguration } from '@siemens/ix';
 @Component({
   selector: 'app-example',
   templateUrl: './application-app-switch.html',
-  styleUrls: ['./styles/application.css'],
+  styleUrls: ['./application-app-switch.css'],
 })
 export default class ApplicationAppSwitchExample {
   appSwitchConfig: AppSwitchConfiguration = {

packages/angular-test-app/src/preview-examples/application-breakpoints.css

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+ix-application {
+  width: 100vw;
+  height: 100vh;
+}

packages/angular-test-app/src/preview-examples/application-breakpoints.ts

@@ -11,7 +11,7 @@ import { Breakpoint } from '@siemens/ix';
 
 @Component({
   selector: 'app-example',
-  styleUrls: ['./styles/application.css'],
+  styleUrls: ['./application-breakpoints.css'],
   templateUrl: './application-breakpoints.html',
 })
 export default class ApplicationBreakpointExample {

packages/example-styles/css/application.css → packages/angular-test-app/src/preview-examples/application.css

@@ -6,6 +6,10 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
 
 ix-application {
   width: 100vw;

packages/angular-test-app/src/preview-examples/application.ts

@@ -12,6 +12,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: './application.html',
-  styleUrls: ['./styles/application.css'],
+  styleUrls: ['./application.css'],
 })
 export default class ApplicationExample {}

packages/angular-test-app/src/preview-examples/basic-navigation.css

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+ix-basic-navigation {
+  width: 100vw;
+  height: 100vh;
+}

packages/angular-test-app/src/preview-examples/basic-navigation.ts

@@ -20,6 +20,6 @@ import { Component } from '@angular/core';
       </ix-menu>
     </ix-basic-navigation>
   `,
-  styleUrls: ['./styles/basic-navigation.css'],
+  styleUrls: ['./basic-navigation.css'],
 })
 export default class BasicNavigation {}

packages/angular-test-app/src/preview-examples/blind-header-actions.css

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+ix-blind {
+  margin: 0.5rem 0;
+}