Merge remote-tracking branch 'origin/main' into release-3.0.0

.changeset/config.json

@@ -1,9 +1,6 @@
 {
   "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
-  "changelog": [
-    "@changesets/changelog-github",
-    { "repo": "siemens/ix" }
-  ],
+  "changelog": ["@changesets/changelog-github", { "repo": "siemens/ix" }],
   "commit": false,
   "linked": [],
   "fixed": [
@@ -22,6 +19,7 @@
     "react-test-app",
     "vue-test-app",
     "html-test-app",
+    "ionic-test-app",
     "figma-plugin",
     "documentation"
   ]

.changeset/giant-tigers-decide.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': minor
+---
+
+feat(core/push-card): add alternative card types

.changeset/lemon-pants-act.md

@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+fix(core/tree): handle text overflow gracefully

.changeset/thick-fireants-worry.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': minor
+---
+
+feat(core): add css safe areas

.gitignore

@@ -152,6 +152,7 @@ yarn-error.log*
 packages/core/components/
 packages/core/hydrate/
 packages/*/dist/
+test-apps/*/dist/
 packages/*/www/
 packages/*/loader/
 packages/*/dist-transpiled/
@@ -164,11 +165,17 @@ packages/*/build/
 packages/core/dist-css
 
 ###
-# @siemens/html-test-app
+# html-test-app
 ###
 
 packages/html-test-app/src/public/additional-theme
 
+###
+# ionic-test-app
+###
+
+packages/ionic-test-app/public/additional-theme
+
 ###
 # documentation
 ###
@@ -180,6 +187,7 @@ packages/documentation/scripts/.typedoc/
 packages/documentation/static/auto-generated/
 packages/documentation/static/figma/
 packages/documentation/static/webcomponent-examples/*
+packages/documentation/static/ionic-preview
 !packages/documentation/static/versioned_examples/*/webcomponent-examples
 
 ###

ix.code-workspace

@@ -44,6 +44,10 @@
       "name": "vue-test-app",
       "path": "./packages/vue-test-app"
     },
+    {
+      "name": "ionic-test-app",
+      "path": "./packages/ionic-test-app"
+    },
     {
       "name": "eslint-config",
       "path": "./packages/eslint-config-ix"

package.json

@@ -31,6 +31,7 @@
     "prepare": "pnpm git-hooks && pnpm disable-telemetry",
     "disable-telemetry": "turbo telemetry disable",
     "git-hooks": "husky install",
+    "compare-examples": "node ./scripts/compare-preview-examples-across-test-apps.js",
     "ci:version": "pnpm changeset version && pnpm i --lockfile-only",
     "ci:publish": "pnpm changeset publish",
     "ts-run": "tsx"

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

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

packages/angular-test-app/src/preview-examples/aggrid.html

@@ -0,0 +1,15 @@
+<!--
+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.
+-->
+
+<ag-grid-angular
+  style="height: 12rem; width: 100%"
+  class="ag-theme-alpine-dark ag-theme-ix"
+  [gridOptions]="gridOptions"
+>
+</ag-grid-angular>

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

@@ -8,57 +8,52 @@
  */
 
 import { Component } from '@angular/core';
-import { ColDef } from 'ag-grid-community';
+import { GridOptions } from 'ag-grid-community';
 
 @Component({
   selector: 'app-example',
-  template: `
-    <ag-grid-angular
-      style="height: 12rem; width: 100%"
-      class="ag-theme-alpine-dark ag-theme-ix"
-      [columnDefs]="columnDefs"
-      [rowData]="rowData"
-      rowSelection="multiple"
-      suppressCellFocus
-      checkboxSelection
-    ></ag-grid-angular>
-  `,
+  templateUrl: './aggrid.html',
 })
 export default class AGGrid {
-  columnDefs: ColDef[] = [
-    {
-      field: 'type',
-      headerName: 'Type',
-      resizable: true,
-      checkboxSelection: true,
-    },
-    {
-      field: 'status',
-      headerName: 'Status',
-      resizable: true,
-      sortable: true,
-      filter: true,
-    },
-    { field: 'hwVersion', headerName: 'HW version', resizable: true },
-  ];
-  rowData = [
-    {
-      type: 'Equipment',
-      status: 'Normal',
-      hwVersion: '2.0',
-      checked: false,
-    },
-    {
-      type: 'Positioner',
-      status: 'Maintenance',
-      hwVersion: '1.0',
-      checked: true,
-    },
-    {
-      type: 'Pressure sensor',
-      status: 'Unknown',
-      hwVersion: 'N/A',
-      checked: false,
-    },
-  ];
+  gridOptions = {
+    columnDefs: [
+      {
+        field: 'type',
+        headerName: 'Type',
+        resizable: true,
+        checkboxSelection: true,
+      },
+      {
+        field: 'status',
+        headerName: 'Status',
+        resizable: true,
+        sortable: true,
+        filter: true,
+      },
+      { field: 'hwVersion', headerName: 'HW version', resizable: true },
+    ],
+    rowData: [
+      {
+        type: 'Equipment',
+        status: 'Normal',
+        hwVersion: '2.0',
+        checked: false,
+      },
+      {
+        type: 'Positioner',
+        status: 'Maintenance',
+        hwVersion: '1.0',
+        checked: true,
+      },
+      {
+        type: 'Pressure sensor',
+        status: 'Unknown',
+        hwVersion: 'N/A',
+        checked: false,
+      },
+    ],
+    rowSelection: 'multiple',
+    suppressCellFocus: true,
+    checkboxSelection: true,
+  } as GridOptions;
 }

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

@@ -1,3 +1,12 @@
+<!--
+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.
+-->
+
 <ix-application [appSwitchConfig]="appSwitchConfig">
   <ix-application-header name="My Application">
     <div class="placeholder-logo" slot="logo"></div>
@@ -8,10 +17,7 @@
   </ix-menu>
 
   <ix-content>
-    <ix-content-header
-      slot="header"
-      header-title="My Content Page"
-    >
+    <ix-content-header slot="header" header-title="My Content Page">
     </ix-content-header>
   </ix-content>
 </ix-application>

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

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

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

@@ -1,3 +1,12 @@
+<!--
+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.
+-->
+
 <ix-application application-name="Application name" [breakpoints]="breakpoints">
   <ix-application-header name="My Application">
     <div class="placeholder-logo" slot="logo"></div>
@@ -20,19 +29,35 @@
     <ix-menu-item>Item 2</ix-menu-item>
   </ix-menu>
   <ix-content>
-    <ix-content-header
-      slot="header"
-      header-title="Choose breakpoint"
-    >
+    <ix-content-header slot="header" header-title="Choose breakpoint">
     </ix-content-header>
 
-    <input id="small" type="radio" name="layout" value="sm" (change)="onCheckedChange('sm')" />
+    <input
+      id="small"
+      type="radio"
+      name="layout"
+      value="sm"
+      (change)="onCheckedChange('sm')"
+    />
     <label for="small">Small</label>
 
-    <input id="medium" type="radio" name="layout" value="md" (change)="onCheckedChange('md')" checked />
+    <input
+      id="medium"
+      type="radio"
+      name="layout"
+      value="md"
+      (change)="onCheckedChange('md')"
+      checked
+    />
     <label for="medium">Medium</label>
 
-    <input id="large" type="radio" name="layout" value="lg" (change)="onCheckedChange('lg')" />
+    <input
+      id="large"
+      type="radio"
+      name="layout"
+      value="lg"
+      (change)="onCheckedChange('lg')"
+    />
     <label for="large">Large</label>
   </ix-content>
 </ix-application>

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

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

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

@@ -1,3 +1,12 @@
+<!--
+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.
+-->
+
 <ix-application>
   <ix-application-header name="My Application">
     <div class="placeholder-logo" slot="logo"></div>
@@ -8,10 +17,7 @@
   </ix-menu>
 
   <ix-content>
-    <ix-content-header
-      slot="header"
-      header-title="My Content Page"
-    >
+    <ix-content-header slot="header" header-title="My Content Page">
     </ix-content-header>
   </ix-content>
 </ix-application>

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

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